diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 2e2ddedf..e222761a 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -40,11 +40,11 @@ export function MobileNav({ children }: { children: React.ReactNode }) {
 
       <div
         className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-hidden transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
+        style={{ backgroundColor: "var(--color-navbar)" }}
       >
         <div
           className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-3 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-2 md:mt-0"
           style={{
-            backgroundColor: "var(--color-navbar)",
             borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
           }}
         >