diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
index d200f90..f72349d 100644
--- a/front/components/Navbar.vue
+++ b/front/components/Navbar.vue
@@ -1,26 +1,26 @@
 <template>
     <div class="flex flex-row bg-white/50 backdrop-blur-xl p-2 rounded-full">
-        <div v-for="item in routes" :key="item.key" 
-        class="flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer"
-        @click="()=>{
+        <div v-for="item in routes" :key="item.key" :class="cx('flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full relative select-none cursor-pointer',
+            item?.key !== type && 'hover:bg-black/5'
+        )" @click="() => {
             router.push({
-                path:'/',
+                path: '/',
                 query: {
                     ...route.query,
                     type: item.key
                 }
             })
-        }"
-        >
-          <motion.div v-if="item?.key === type" layoutId="navbar-active" class="absolute inset-0 rounded-full w-full h-full bg-black/10"/>
-          <component :is="item.icon" />
-          {{ item.name }}
+        }">
+            <motion.div v-if="item?.key === type" layoutId="navbar-active"
+                class="absolute inset-0 rounded-full w-full h-full bg-black/10" />
+            <component :is="item.icon" />
+            {{ item.name }}
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-
+import { cx } from 'class-variance-authority'
 import { LucideClipboardType, LucidePaperclip } from "#components"
 import { motion } from "motion-v"
 const routes = [