diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 707ee46..de2ddb5 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -108,16 +108,16 @@ const handleLogout = async () => {
             <!-- Chat icon with notification badge -->
             <div v-if="item.href === '/chat'" class="relative">
               <MessageSquare class="h-4 w-4" />
-              <Badge v-if="totalUnreadMessages > 0" 
-                     class="absolute -top-2 -right-2 h-3.5 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center">
+              <Badge v-if="totalUnreadMessages > 0"
+                class="absolute -top-2 -right-2 h-3.5 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center">
                 {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
               </Badge>
             </div>
             <span v-else>{{ item.name }}</span>
             <span v-if="item.href === '/chat'">{{ item.name }}</span>
             <!-- Market preloading indicator -->
-            <div v-if="item.href === '/market' && marketPreloader.isPreloading" 
-                 class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+            <div v-if="item.href === '/market' && marketPreloader.isPreloading"
+              class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
           </router-link>
         </div>
       </div>
@@ -132,12 +132,12 @@ const handleLogout = async () => {
         <!-- </div> -->
 
         <!-- Cart Icon with Item Count -->
-        <router-link v-if="auth.isAuthenticated.value" to="/cart" 
+        <router-link v-if="auth.isAuthenticated.value" to="/cart"
           class="hidden sm:flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border hover:bg-muted/70 transition-colors relative">
           <ShoppingCart class="h-4 w-4 text-muted-foreground" />
           <span class="text-sm font-medium">Cart</span>
-          <Badge v-if="cartItemCount > 0" 
-                 class="absolute -top-2 -right-2 h-5 w-5 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+          <Badge v-if="cartItemCount > 0"
+            class="absolute -top-2 -right-2 h-5 w-5 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
             {{ cartItemCount > 99 ? '99+' : cartItemCount }}
           </Badge>
         </router-link>
@@ -164,12 +164,10 @@ const handleLogout = async () => {
                 <User class="h-4 w-4" />
                 Profile
               </DropdownMenuItem>
-              <DropdownMenuItem 
-                v-for="item in userMenuItems" 
-                :key="item.href"
-                @click="() => router.push(item.href)" 
+              <DropdownMenuItem v-for="item in userMenuItems" :key="item.href" @click="() => router.push(item.href)"
                 class="gap-2">
-                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity" class="h-4 w-4" />
+                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4" />
                 {{ item.name }}
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -201,38 +199,38 @@ const handleLogout = async () => {
         <!-- Mobile Navigation Icons (only show when authenticated) -->
         <div v-if="auth.isAuthenticated.value" class="md:hidden flex items-center gap-1">
           <!-- Events Button -->
-          <router-link to="/events" 
+          <router-link to="/events"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path === '/events'
+              'text-secondary bg-accent': $route.path === '/events'
             }">
             <span class="sr-only">Events</span>
             <Calendar class="h-5 w-5" />
           </router-link>
-          
+
           <!-- Market Button -->
-          <router-link to="/market" 
+          <router-link to="/market"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path.startsWith('/market')
+              'text-secondary bg-accent': $route.path.startsWith('/market')
             }">
             <span class="sr-only">Market</span>
             <ShoppingBag class="h-5 w-5" />
             <!-- Market preloading indicator -->
-            <div v-if="marketPreloader.isPreloading" 
-                 class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+            <div v-if="marketPreloader.isPreloading"
+              class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
           </router-link>
-          
+
           <!-- Chat Button -->
-          <router-link to="/chat" 
+          <router-link to="/chat"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path === '/chat'
+              'text-secondary bg-accent': $route.path === '/chat'
             }">
             <span class="sr-only">Chat</span>
             <MessageSquare class="h-5 w-5" />
-            <Badge v-if="totalUnreadMessages > 0" 
-                   class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+            <Badge v-if="totalUnreadMessages > 0"
+              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
               {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
             </Badge>
           </router-link>
@@ -277,17 +275,14 @@ const handleLogout = async () => {
                 <User class="h-4 w-4" />
                 Profile
               </Button>
-              <Button 
-                v-for="item in userMenuItems" 
-                :key="item.href"
-                variant="ghost" 
-                size="sm" 
-                @click="() => { router.push(item.href); isOpen = false }"
-                class="w-full justify-start gap-2">
-                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity" class="h-4 w-4" />
+              <Button v-for="item in userMenuItems" :key="item.href" variant="ghost" size="sm"
+                @click="() => { router.push(item.href); isOpen = false }" class="w-full justify-start gap-2">
+                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4" />
                 {{ item.name }}
               </Button>
-              <Button variant="ghost" size="sm" @click="showLogoutConfirm = true" class="w-full justify-start gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
+              <Button variant="ghost" size="sm" @click="showLogoutConfirm = true"
+                class="w-full justify-start gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
                 <LogOut class="h-4 w-4" />
                 Logout
               </Button>
@@ -317,7 +312,8 @@ const handleLogout = async () => {
     <ProfileDialog v-model:is-open="showProfileDialog" />
 
     <!-- Logout Confirm Dialog -->
-    <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="w-full justify-start gap-2" @confirm="handleLogout">
+    <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm"
+      class="w-full justify-start gap-2" @confirm="handleLogout">
       <LogOut class="h-4 w-4" />
       Logout
     </LogoutConfirmDialog>