diff --git a/apps/admin/autoResolver/auto-imports.d.ts b/apps/admin/autoResolver/auto-imports.d.ts
index 31fe193..ae14a71 100644
--- a/apps/admin/autoResolver/auto-imports.d.ts
+++ b/apps/admin/autoResolver/auto-imports.d.ts
@@ -142,7 +142,7 @@ declare global {
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useComponentRef: typeof import('../src/composables/useComponentRef')['useComponentRef']
+  const useComponentRef: typeof import('@celeris/hooks')['useComponentRef']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -195,6 +195,7 @@ declare global {
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
+  const useLoading: typeof import('@celeris/hooks')['useLoading']
   const useLoadingBar: typeof import('@celeris/ca-components')['useLoadingBar']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@@ -204,7 +205,7 @@ declare global {
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
   const useMenuSetting: typeof import('../src/composables/setting/useMenuSetting')['useMenuSetting']
-  const useMergeState: typeof import('../src/composables/useMergeState')['useMergeState']
+  const useMergeState: typeof import('@celeris/hooks')['useMergeState']
   const useMessage: typeof import('@celeris/ca-components')['useMessage']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
@@ -238,6 +239,7 @@ declare global {
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useScreen: typeof import('@celeris/hooks')['useScreen']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -249,7 +251,7 @@ declare global {
   const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
-  const useState: typeof import('../src/composables/useState')['useState']
+  const useState: typeof import('@celeris/hooks')['useState']
   const useStepper: typeof import('@vueuse/core')['useStepper']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
@@ -446,7 +448,7 @@ declare module 'vue' {
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useComponentRef: UnwrapRef<typeof import('../src/composables/useComponentRef')['useComponentRef']>
+    readonly useComponentRef: UnwrapRef<typeof import('@celeris/hooks')['useComponentRef']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -499,6 +501,7 @@ declare module 'vue' {
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useLoading: UnwrapRef<typeof import('@celeris/hooks')['useLoading']>
     readonly useLoadingBar: UnwrapRef<typeof import('@celeris/ca-components')['useLoadingBar']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
@@ -508,7 +511,7 @@ declare module 'vue' {
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
     readonly useMenuSetting: UnwrapRef<typeof import('../src/composables/setting/useMenuSetting')['useMenuSetting']>
-    readonly useMergeState: UnwrapRef<typeof import('../src/composables/useMergeState')['useMergeState']>
+    readonly useMergeState: UnwrapRef<typeof import('@celeris/hooks')['useMergeState']>
     readonly useMessage: UnwrapRef<typeof import('@celeris/ca-components')['useMessage']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
@@ -542,6 +545,7 @@ declare module 'vue' {
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreen: UnwrapRef<typeof import('@celeris/hooks')['useScreen']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -553,7 +557,7 @@ declare module 'vue' {
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
-    readonly useState: UnwrapRef<typeof import('../src/composables/useState')['useState']>
+    readonly useState: UnwrapRef<typeof import('@celeris/hooks')['useState']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
@@ -744,7 +748,7 @@ declare module '@vue/runtime-core' {
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
-    readonly useComponentRef: UnwrapRef<typeof import('../src/composables/useComponentRef')['useComponentRef']>
+    readonly useComponentRef: UnwrapRef<typeof import('@celeris/hooks')['useComponentRef']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
@@ -797,6 +801,7 @@ declare module '@vue/runtime-core' {
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
+    readonly useLoading: UnwrapRef<typeof import('@celeris/hooks')['useLoading']>
     readonly useLoadingBar: UnwrapRef<typeof import('@celeris/ca-components')['useLoadingBar']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
@@ -806,7 +811,7 @@ declare module '@vue/runtime-core' {
     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
     readonly useMenuSetting: UnwrapRef<typeof import('../src/composables/setting/useMenuSetting')['useMenuSetting']>
-    readonly useMergeState: UnwrapRef<typeof import('../src/composables/useMergeState')['useMergeState']>
+    readonly useMergeState: UnwrapRef<typeof import('@celeris/hooks')['useMergeState']>
     readonly useMessage: UnwrapRef<typeof import('@celeris/ca-components')['useMessage']>
     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
@@ -840,6 +845,7 @@ declare module '@vue/runtime-core' {
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useScreen: UnwrapRef<typeof import('@celeris/hooks')['useScreen']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -851,7 +857,7 @@ declare module '@vue/runtime-core' {
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
-    readonly useState: UnwrapRef<typeof import('../src/composables/useState')['useState']>
+    readonly useState: UnwrapRef<typeof import('@celeris/hooks')['useState']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
diff --git a/apps/admin/src/composables/index.ts b/apps/admin/src/composables/index.ts
index bcaf6ca..17b8f8e 100644
--- a/apps/admin/src/composables/index.ts
+++ b/apps/admin/src/composables/index.ts
@@ -1,6 +1,3 @@
 export * from "./setting";
 export * from "./useChartOption";
-export * from "./useComponentRef";
-export * from "./useMergeState";
 export * from "./useNaiveUIConfigProvider";
-export * from "./useState";
diff --git a/packages/node/vite/src/plugins/unpluginAutoImport.ts b/packages/node/vite/src/plugins/unpluginAutoImport.ts
index 23da3ff..8e3f7f3 100644
--- a/packages/node/vite/src/plugins/unpluginAutoImport.ts
+++ b/packages/node/vite/src/plugins/unpluginAutoImport.ts
@@ -17,6 +17,15 @@ export function createAutoImportPluginConfig(): PluginOption {
           "useLoadingBar",
         ],
       },
+      {
+        "@celeris/hooks": [
+          "useComponentRef",
+          "useLoading",
+          "useMergeState",
+          "useScreen",
+          "useState",
+        ],
+      },
     ],
     dts: "autoResolver/auto-imports.d.ts",
     dirs: [
diff --git a/packages/web/hooks/package.json b/packages/web/hooks/package.json
index 0835fc9..f581773 100644
--- a/packages/web/hooks/package.json
+++ b/packages/web/hooks/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@celeris/types": "workspace:*",
+    "@celeris/utils": "workspace:*",
     "@vueuse/core": "^10.2.1",
     "@vueuse/integrations": "^10.2.1"
   },
diff --git a/packages/web/hooks/src/index.ts b/packages/web/hooks/src/index.ts
index 9cf0674..78a9c66 100644
--- a/packages/web/hooks/src/index.ts
+++ b/packages/web/hooks/src/index.ts
@@ -1,2 +1,5 @@
+export * from "./useComponentRef";
 export * from "./useLoading";
+export * from "./useMergeState";
 export * from "./useScreen";
+export * from "./useState";
diff --git a/apps/admin/src/composables/useComponentRef.ts b/packages/web/hooks/src/useComponentRef.ts
similarity index 100%
rename from apps/admin/src/composables/useComponentRef.ts
rename to packages/web/hooks/src/useComponentRef.ts
diff --git a/apps/admin/src/composables/useMergeState.ts b/packages/web/hooks/src/useMergeState.ts
similarity index 100%
rename from apps/admin/src/composables/useMergeState.ts
rename to packages/web/hooks/src/useMergeState.ts
diff --git a/apps/admin/src/composables/useState.ts b/packages/web/hooks/src/useState.ts
similarity index 100%
rename from apps/admin/src/composables/useState.ts
rename to packages/web/hooks/src/useState.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 438bb3b..a6be7b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -325,6 +325,9 @@ importers:
       '@celeris/types':
         specifier: workspace:*
         version: link:../types
+      '@celeris/utils':
+        specifier: workspace:*
+        version: link:../utils
       '@vueuse/core':
         specifier: ^10.2.1
         version: 10.2.1(vue@3.3.4)