diff --git a/console/package.json b/console/package.json
index 78c9382bc..53128dbaf 100644
--- a/console/package.json
+++ b/console/package.json
@@ -66,6 +66,7 @@
     "dayjs": "^1.11.7",
     "emoji-mart": "^5.3.3",
     "fastq": "^1.15.0",
+    "floating-vue": "2.0.0-beta.20",
     "fuse.js": "^6.6.2",
     "jsencrypt": "^3.3.2",
     "lodash.clonedeep": "^4.5.0",
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index 727ec73ec..81fad0ed4 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -65,6 +65,7 @@ importers:
       eslint-plugin-cypress: ^2.12.1
       eslint-plugin-vue: ^9.8.0
       fastq: ^1.15.0
+      floating-vue: 2.0.0-beta.20
       fuse.js: ^6.6.2
       husky: ^8.0.3
       jsdom: ^20.0.3
@@ -140,6 +141,7 @@ importers:
       dayjs: 1.11.7
       emoji-mart: 5.3.3
       fastq: 1.15.0
+      floating-vue: 2.0.0-beta.20_vue@3.2.45
       fuse.js: 6.6.2
       jsencrypt: 3.3.2
       lodash.clonedeep: 4.5.0
diff --git a/console/src/setup/setupComponents.ts b/console/src/setup/setupComponents.ts
index c990c52cb..ce296838d 100644
--- a/console/src/setup/setupComponents.ts
+++ b/console/src/setup/setupComponents.ts
@@ -1,5 +1,7 @@
 import type { App } from "vue";
 import { VClosePopper, VTooltip } from "@halo-dev/components";
+import { Dropdown } from "floating-vue";
+import "floating-vue/dist/style.css";
 // @ts-ignore
 import VueGridLayout from "vue-grid-layout";
 import { defaultConfig, plugin as FormKit } from "@formkit/vue";
@@ -16,4 +18,7 @@ export function setupComponents(app: App) {
 
   app.directive("tooltip", VTooltip);
   app.directive("close-popper", VClosePopper);
+  // @deprecated
+  // Will be removed in the future, please use the VDropdown component from @halo-dev/components.
+  app.component("FloatingDropdown", Dropdown);
 }