diff --git a/resources/js/components/MobileBottomNav.vue b/resources/js/components/MobileBottomNav.vue
index b2f292a..1144413 100644
--- a/resources/js/components/MobileBottomNav.vue
+++ b/resources/js/components/MobileBottomNav.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import { CalendarDays, Clock, ShoppingBag, ShoppingCart } from '@lucide/vue';
+import { computed } from 'vue';
 import { useCan } from '@/composables/useCan';
 import admin from '@/routes/admin';
 
@@ -43,6 +44,10 @@ const navItems: NavItem[] = [
     },
 ];
 
+const visibleItems = computed(() => {
+    return navItems.filter((item) => !item.permission || can(item.permission));
+});
+
 function isActive(href: string): boolean {
     return page.url.startsWith(href);
 }
@@ -57,11 +62,11 @@ function badgeCount(item: NavItem): number {
 </script>
 
 <template>
-    <nav class="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center pb-4 lg:hidden">
+    <nav v-if="visibleItems.length > 0" class="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center pb-4 lg:hidden">
         <div
             class="pointer-events-auto flex items-center gap-1 rounded-2xl border bg-background/95 px-2 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80">
-            <template v-for="item in navItems" :key="item.title">
-                <Link v-if="!item.permission || can(item.permission)" :href="item.href"
+            <template v-for="item in visibleItems" :key="item.title">
+                <Link :href="item.href"
                     class="relative flex flex-col items-center gap-0.5 rounded-xl px-3.5 py-1.5 text-[11px] font-medium text-muted-foreground transition-all duration-200"
                     :class="{
                         'text-primary scale-110 drop-shadow-md': isActive(item.href),