diff --git a/components/nav-mobile.tsx b/components/nav-mobile.tsx
index 8a3c1e82abb4d55f01148152a1e190319902aa87..2b2f0ae1c52d5b8b7842744a9da58fe4607b47ec 100644
--- a/components/nav-mobile.tsx
+++ b/components/nav-mobile.tsx
@@ -17,7 +17,7 @@ export const MobileNav = ({ items, user }: { items: SidebarNavItem[], user: User
     const visibleItems = user ? items : items.slice(0, 2)
 
     return (
-        <nav className={`grid h-full max-w-lg grid-cols-${visibleItems.length} justify-between mx-auto`}>
+        <nav className={`container flex flex-row items-center h-full w-full max-w-lg justify-between mx-auto`}>
             {visibleItems.map((item, index) => {
                 const Icon = Icons[item.icon || "arrowRight"]
                 if (item.title === "My Profile") {
@@ -25,7 +25,7 @@ export const MobileNav = ({ items, user }: { items: SidebarNavItem[], user: User
                 }
                 return (
                     item.href && (
-                        <Link key={index} href={item.disabled ? "/" : item.href} className="inline-flex items-center justify-center">
+                        <Link key={index} href={item.disabled ? "/" : item.href} className="inline-flex items-center justify-center w-full h-full">
                             <Button variant={`${path.startsWith(item.href) ? "secondary" : "ghost"}`} size="logo">
                                 <Icon />
                             </Button>