diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index b20b5c98..89886fb8 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -2,11 +2,11 @@
 
 import Header from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
-import { MobileNavigation } from "@/components/layout/mobile-nav";
 import { TokenTabsHeader } from "@/components/layout/token-tabs-header";
 import { usePathname } from "next/navigation";
 import { useBreakpoint } from "@/hooks/use-breakpoint";
 import { cn } from "@/utils";
+import MobileNavigation from "@/components/layout/mobile-nav";
 
 export default function Layout({
     children,
diff --git a/src/components/layout/mobile-nav.tsx b/src/components/layout/mobile-nav.tsx
index 013d6a48..09badc50 100644
--- a/src/components/layout/mobile-nav.tsx
+++ b/src/components/layout/mobile-nav.tsx
@@ -8,7 +8,7 @@ import { cn } from "@/utils";
 import { useCustomNavigation } from "@/hooks/use-custom-navigation";
 import SwapTerminal from "../swap-terminal";
 
-export function MobileNavigation() {
+const MobileNavigation = ()  => {
     const pathname = usePathname();
     const { hideMainNav } = useCustomNavigation();
 
@@ -94,3 +94,5 @@ export function MobileNavigation() {
         </div>
     );
 }
+
+export default MobileNavigation;