diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
index ec4d1b1..4002665 100644
--- a/front/components/Navbar.vue
+++ b/front/components/Navbar.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="flex flex-row bg-white/10 backdrop-blur-xl p-2 rounded-full">
         <div v-for="item in routes" :key="item.key" 
-        :class="cx('flex flex-row text-sm px-4 py-2 font-bold rounded-full cursor-pointer', 
-            item?.key === type && 'bg-black/10'
-        )"
+        class="flex flex-row text-sm px-4 py-2 font-bold rounded-full cursor-pointer relative"
         @click="()=>{
             router.push({
                 query: {
@@ -13,6 +11,7 @@
             })
         }"
         >
+          <motion.div v-if="item?.key === type" layoutId="navbar-active" class="absolute inset-0 rounded-full w-full h-full bg-black/10"/>
           {{ item.name }}
         </div>
     </div>
@@ -20,6 +19,7 @@
 
 <script setup lang="ts">
 import { cx } from 'class-variance-authority'
+import { motion } from "motion-v"
 const routes = [
     { name: '文件', key: 'file' },
     { name: '文本', key: 'text' }
diff --git a/front/package.json b/front/package.json
index 8b1c243..6056d08 100644
--- a/front/package.json
+++ b/front/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
+    "lucide-vue-next": "^0.487.0",
+    "motion-v": "1.0.0-beta.2",
     "nuxt": "^3.16.0",
     "vue": "latest",
     "vue-router": "latest"