diff --git a/docs/frontend/components.md b/docs/frontend/components.md
index 01037d339d..57fdb370af 100644
--- a/docs/frontend/components.md
+++ b/docs/frontend/components.md
@@ -44,13 +44,7 @@ if (file_exists($script_assets)) {
 
 ## Component Access
 
-For `Dokan Free`, we can import the components via `@/components`:
-
-```js
-import { DataViews } from '@/components';
-```
-
-In `Dokan Pro`, components can be imported directly from `@dokan/components`:
+For `dokan free & premium version`, we can import the components via `@dokan/components`:
 
 ```js
 import { DataViews } from '@dokan/components';
@@ -73,8 +67,8 @@ externals: {
 |____ src/
 |        |___ components/
 |        |      |___ index.tsx         # Main export file
-|        |      |___ DataViews/        # Existing component
-|        |      |___ YourComponent/   # Your new component directory
+|        |      |___ dataviews/        # Existing component
+|        |      |___ your-component/   # Your new component directory
 |        |      |     |___ index.tsx
 |        |      |     |___ style.scss
 |        |      |
diff --git a/docs/frontend/dataviews.md b/docs/frontend/dataviews.md
index 07a2dd9973..781d9e4668 100644
--- a/docs/frontend/dataviews.md
+++ b/docs/frontend/dataviews.md
@@ -94,7 +94,7 @@ domReady(() => {
 
 ### Step 3: Create a DataViewTable component.
 
-In `Dokan Pro`, we can use the `DataViews` component from the `@dokan/components` package. For the free version, we can import `DataViews` from the `src/components` (`lite`) directory.  
+We can use the `DataViews` component from the `@dokan/components` package. `(for both free & premium version)`  
 
 All the (free version) global components are available in `@dokan/components` package.
 
@@ -108,9 +108,8 @@ import {
     __experimentalVStack as VStack, Button
 } from "@wordpress/components";
 
-// For dokan-pro, we will import the `DataViews` component from the @dokan/components package. Otherwise, in free version we will import from the `@/components` directory.
-import { DataViews } from '@dokan/components'; // For pro version
-// import { DataViews } from '@/components'; // For free version
+// We will import the `DataViews` component from the @dokan/components package.
+import { DataViews } from '@dokan/components';
 
 const WPostsDataView = ({ navigate }) => {
     const [ data, setData ] = useState([]);
diff --git a/docs/frontend/filter.md b/docs/frontend/filter.md
index eb1103a010..3e1b677450 100644
--- a/docs/frontend/filter.md
+++ b/docs/frontend/filter.md
@@ -11,13 +11,7 @@ The Filter component provides a standardized way to implement filtering function
 
 ## Installation
 
-#### Dokan lite
-
-```jsx
-import Filter from '../components';
-```
-
-#### Dokan pro or external plugins
+For `dokan free & premium version`, we can import the `Filter` components from `@dokan/components` package:
 
 ```jsx
 import { Filter } from '@dokan/components';
@@ -153,12 +147,6 @@ The filter hook name should follow this pattern:
 
 You can use the `snakeCase` utility to ensure proper formatting:
 
-For Dokan Lite:
-```jsx
-import { snakeCase } from "@/utilities";
-```
-
-For Dokan Pro or other plugins:
 ```jsx
 import { snakeCase } from "@dokan/utilities";
 ```
diff --git a/docs/frontend/hooks.md b/docs/frontend/hooks.md
index ef3220cd7c..a593cde6aa 100644
--- a/docs/frontend/hooks.md
+++ b/docs/frontend/hooks.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-`Dokan` provides a set of reusable `hooks` that can be used across both `Free` and `Pro` versions. This documentation explains how to properly set up and use `hooks` in your project.
+`Dokan` provides a set of reusable `hooks` that can be used across both `Free` and `Premium` versions. This documentation explains how to properly set up and use `hooks` in your project.
 
 ## Important Dependencies
 
@@ -11,7 +11,7 @@ For both `Dokan Free and Pro` versions, we must register the `dokan-react-compon
 ### Implementation Example
 
 ```php
-// Register scripts with dokan-react-components dependency
+// Register scripts with `dokan-react-components` dependency
 $script_assets = 'add_your_script_assets_path_here';
 
 if (file_exists($script_assets)) {
@@ -44,13 +44,7 @@ if (file_exists($script_assets)) {
 
 ## Component Access
 
-For `Dokan Free`, we can import the components via `@/hooks`:
-
-```js
-import { useWindowDimensions } from '@/hooks';
-```
-
-In `Dokan Pro`, components can be imported directly from `@dokan/components`:
+For `Dokan free & premium version`, we can import the components via `@dokan/hooks`:
 
 ```js
 import { useWindowDimensions } from '@dokan/hooks';
@@ -83,7 +77,7 @@ externals: {
 |____ Other Files
 ```
 
-**Finally,** we need to export the new `hook` from the `src/hooks/index.tsx` file. Then, we can import the new component from `@dokan/hooks` in `dokan pro` version.
+**Finally,** we need to export the new `hook` from the `src/hooks/index.tsx` file. Then, we can import the new component via `@dokan/hooks`.
 
 ```tsx
 export { default as useWindowDimensions } from '@/hooks/ViewportDimensions';
diff --git a/docs/frontend/sortable-list.md b/docs/frontend/sortable-list.md
index f01dcbe011..cf00e1c83e 100644
--- a/docs/frontend/sortable-list.md
+++ b/docs/frontend/sortable-list.md
@@ -8,7 +8,7 @@
 - [Component Properties](#component-properties)
 
 ## Introduction
-The Dokan `SortableList` component provide a `flexible` and `reusable` `drag-and-drop` interface for managing `sortable lists`, `grids`, and `horizontal` layouts. Built on top of `@dnd-kit`, these components offer seamless integration with Dokan's existing component ecosystem.
+The Dokan `SortableList` component provide a `flexible` and `reusable` `drag-and-drop` interface for managing `sortable lists`, `grids`, and `horizontal` layouts. Built on top of `@dnd-kit`, these components offer seamless integration with `Dokan's` existing component ecosystem.
 
 ## Data Structures
 The `SortableList` component accommodates an `array` data type for its `items` property, which can follow `three primary array data structure patterns`:
@@ -109,7 +109,7 @@ For both `Dokan Free and Pro` versions, we must register the `dokan-react-compon
 
 ```tsx
 import { useState } from '@wordpress/element';
-import SortableList from '@/components/sortable-list';
+import SortableList from '@dokan/components/sortable-list';
 ```
 
 #### Step 2: Set Up Your State Management
diff --git a/docs/frontend/utilities.md b/docs/frontend/utilities.md
index b7030ec208..a56a076810 100644
--- a/docs/frontend/utilities.md
+++ b/docs/frontend/utilities.md
@@ -33,7 +33,7 @@ export * from './YourUtility';
 
 ## Change Case Utilities
 
-In `Dokan` and `Dokan Pro`, we recommend using the `change-case` utility methods from the `Dokan utilities package`. These utilities are accessible through the `@dokan/utilities` import in `Dokan Pro`.
+In `Dokan` and `Dokan Pro`, we recommend using the `change-case` utility methods from the `Dokan utilities package`. These utilities are accessible through the `@dokan/utilities` package.
 
 ## Why Use Change Case from Dokan Utilities?
 
@@ -62,13 +62,7 @@ The following case transformation utilities are available:
 
 ## Utilities Access
 
-For `Dokan Free`, we can import the `utilities` via `@/utilities`:
-
-```js
-import { snakeCase, camelCase, kebabCase } from '@/utilities';
-```
-
-In `Dokan Pro`, `utilities` can be imported directly from `@dokan/components`:
+For `Dokan free & premium version`, we can import the `utilities` via `@dokan/utilities`:
 
 ```js
 import { snakeCase, camelCase, kebabCase } from '@dokan/utilities';
diff --git a/src/components/PriceHtml.tsx b/src/components/PriceHtml.tsx
index 1531f7d163..de489dcf5f 100644
--- a/src/components/PriceHtml.tsx
+++ b/src/components/PriceHtml.tsx
@@ -1,5 +1,5 @@
 import { RawHTML } from '@wordpress/element';
-import { formatPrice } from '@/utilities';
+import { formatPrice } from '@dokan/utilities';
 
 type PriceHtmlProps = {
     price: string | number;
diff --git a/src/components/dataviews/DataViewTable.tsx b/src/components/dataviews/DataViewTable.tsx
index bca4c0cd06..fc9ef9a216 100644
--- a/src/components/dataviews/DataViewTable.tsx
+++ b/src/components/dataviews/DataViewTable.tsx
@@ -1,10 +1,10 @@
 import { DataViews } from '@wordpress/dataviews/wp';
 import { Slot } from "@wordpress/components";
-import { ViewportDimensions } from '@/Hooks/ViewportDimensions';
+import { ViewportDimensions } from '@dokan/hooks';
 import type { Action, Field, SupportedLayouts, View } from "@wordpress/dataviews/src/types";
-import { kebabCase, snakeCase } from "@/utilities";
+import { kebabCase, snakeCase } from "@dokan/utilities";
 import { useEffect } from "@wordpress/element";
-import { useWindowDimensions } from "@/hooks";
+import { useWindowDimensions } from "@dokan/hooks";
 import './style.scss';
 
 type ItemWithId = { id: string };
diff --git a/src/components/sortable-list/index.tsx b/src/components/sortable-list/index.tsx
index 23c4ef5c47..5f022f3482 100644
--- a/src/components/sortable-list/index.tsx
+++ b/src/components/sortable-list/index.tsx
@@ -28,7 +28,7 @@ import {
 } from '@dnd-kit/sortable';
 
 import { Slot } from "@wordpress/components";
-import { snakeCase, kebabCase } from "@/utilities";
+import { snakeCase, kebabCase } from "@dokan/utilities";
 import SortableItem from './SortableItem';
 import type { Announcements, ScreenReaderInstructions } from "@dnd-kit/core";
 import type { AutoScrollOptions } from "@dnd-kit/core";
diff --git a/src/dashboard/Withdraw/RequestList.tsx b/src/dashboard/Withdraw/RequestList.tsx
index fe178fce9a..393d1d349d 100644
--- a/src/dashboard/Withdraw/RequestList.tsx
+++ b/src/dashboard/Withdraw/RequestList.tsx
@@ -6,7 +6,7 @@ import DateTimeHtml from '../../Components/DateTimeHtml';
 import { useWithdraw } from './Hooks/useWithdraw';
 import { UseWithdrawRequestsReturn } from './Hooks/useWithdrawRequests';
 import { isEqual } from 'lodash';
-import { DataViews } from '@/Components';
+import { DataViews } from '@dokan/components';
 
 function RequestList( {
     withdrawRequests,
diff --git a/src/dashboard/Withdraw/RequestWithdrawBtn.tsx b/src/dashboard/Withdraw/RequestWithdrawBtn.tsx
index 2cc05286ef..b72df3ad3f 100644
--- a/src/dashboard/Withdraw/RequestWithdrawBtn.tsx
+++ b/src/dashboard/Withdraw/RequestWithdrawBtn.tsx
@@ -15,7 +15,7 @@ import { useDebounceCallback } from 'usehooks-ts';
 import { useCharge } from './Hooks/useCharge';
 import { UseWithdrawSettingsReturn } from './Hooks/useWithdrawSettings';
 import { UseWithdrawRequestsReturn } from './Hooks/useWithdrawRequests';
-import { formatPrice } from '@/utilities';
+import { formatPrice } from '@dokan/utilities';
 
 function RequestWithdrawBtn( {
     settings,
diff --git a/src/dashboard/Withdraw/WithdrawRequests.tsx b/src/dashboard/Withdraw/WithdrawRequests.tsx
index c194e8d84b..6b54ee5f18 100644
--- a/src/dashboard/Withdraw/WithdrawRequests.tsx
+++ b/src/dashboard/Withdraw/WithdrawRequests.tsx
@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { twMerge } from 'tailwind-merge';
 import RequestWithdrawBtn from './RequestWithdrawBtn';
 import { useWithdrawSettings } from './Hooks/useWithdrawSettings';
-import { useCurrentUser } from "@/hooks";
+import { useCurrentUser } from "@dokan/hooks";
 
 function WithdrawRequests() {
     const useWithdrawRequestHook = useWithdrawRequests( true );
diff --git a/src/dashboard/Withdraw/index.tsx b/src/dashboard/Withdraw/index.tsx
index 04edf369dc..342daec4d5 100644
--- a/src/dashboard/Withdraw/index.tsx
+++ b/src/dashboard/Withdraw/index.tsx
@@ -7,7 +7,7 @@ import PaymentDetails from './PaymentDetails';
 import PaymentMethods from './PaymentMethods';
 import { DokanToaster } from '@getdokan/dokan-ui';
 import { useEffect } from '@wordpress/element';
-import { useCurrentUser } from "@/hooks";
+import { useCurrentUser } from "@dokan/hooks";
 
 const Index = () => {
     const useWithdrawRequestHook = useWithdrawRequests( true );
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
index e7c28dbf18..fab46b2219 100644
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -1,2 +1,2 @@
-export { default as useWindowDimensions } from '@/hooks/ViewportDimensions';
-export { useCurrentUser } from '@/hooks/useCurrentUser';
+export { default as useWindowDimensions } from '@dokan/hooks/ViewportDimensions';
+export { useCurrentUser } from '@dokan/hooks/useCurrentUser';
diff --git a/src/utils/Bootstrap.js b/src/utils/Bootstrap.js
index ea9de7940b..3f7875f84d 100644
--- a/src/utils/Bootstrap.js
+++ b/src/utils/Bootstrap.js
@@ -4,11 +4,11 @@ import Moment from 'moment'
 import Notifications from 'vue-notification'
 import ListTable from 'vue-wp-list-table';
 import Multiselect from 'vue-multiselect'
-import API_Helper from '@/utils/Api'
+import API_Helper from '@dokan/utils/Api'
 import ChartJS from 'vue-chartjs'
 import Mixin from './Mixin'
 import Debounce from 'debounce'
-import VersionCompare from '@/utils/VersionCompare'
+import VersionCompare from '@dokan/utils/VersionCompare'
 import { parse } from 'papaparse'
 
 window.__ = function( text, domain ) {
diff --git a/webpack.config.js b/webpack.config.js
index 7261e2c4fc..3447552a57 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,13 +10,13 @@ const updatedConfig = {
   entry: {
     ...entryPoints,
     'components': {
-      import: '@/components/index.tsx',
+      import: '@dokan/components/index.tsx',
     },
     'utilities': {
-      import: '@/utilities/index.ts',
+      import: '@dokan/utilities/index.ts',
     },
     'hooks': {
-      import: '@/hooks/index.tsx',
+      import: '@dokan/hooks/index.tsx',
     },
     'dokan-status': '/src/Status/index.tsx',
   },
@@ -35,7 +35,7 @@ const updatedConfig = {
     ...defaultConfig.resolve,
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': path.resolve('./src/'),
+      '@dokan': path.resolve('./src/'),
       'frontend': path.resolve('./src/frontend/'),
       'admin': path.resolve('./src/admin/'),
     },