diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index f5bd09431d..8e59a2852a 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -1,14 +1,5 @@
 <template>
-  <div
-    class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
-    :class="
-      active
-        ? 'bg-white dark-theme:bg-charcoal-600 text-neutral'
-        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
-    "
-    role="button"
-    @click="onClick"
-  >
+  <div :class="navItemClasses" role="button" @click="onClick">
     <NavIcon v-if="icon" :icon="icon" />
     <i-lucide:folder v-else class="text-xs text-neutral" />
     <span class="flex items-center">
@@ -18,7 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { NavItemData } from '@/types/navTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 import NavIcon from './NavIcon.vue'
 
@@ -27,4 +21,14 @@ const { icon, active, onClick } = defineProps<{
   active?: boolean
   onClick: () => void
 }>()
+
+const navItemClasses = computed(() =>
+  cn(
+    'flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer text-neutral',
+    {
+      'bg-gray-100 dark-theme:bg-charcoal-300': active,
+      'hover:bg-gray-100 dark-theme:hover:bg-charcoal-300': !active
+    }
+  )
+)
 </script>