diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
index 902099c5..594abda2 100644
--- a/app/(marketing)/layout.tsx
+++ b/app/(marketing)/layout.tsx
@@ -18,6 +18,7 @@ export default async function MarketingLayout({
       <header className="container z-40 bg-background">
         <div className="flex h-20 items-center justify-between py-6">
           <MainNav items={marketingConfig.mainNav} />
+
           <nav>
             <Link
               href="/login"
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
index b5cdb526..b72791c4 100644
--- a/components/main-nav.tsx
+++ b/components/main-nav.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import Link from "next/link"
 import { useSelectedLayoutSegment } from "next/navigation"
-
+import { ModeToggle } from "@/components/mode-toggle"
 import { MainNavItem } from "types"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
@@ -44,6 +44,7 @@ export function MainNav({ items, children }: MainNavProps) {
               {item.title}
             </Link>
           ))}
+           <ModeToggle />
         </nav>
       ) : null}
       <button
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index fc6a5b8e..0610d9d5 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -51,7 +51,9 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             .
           </p>
         </div>
-        <ModeToggle />
+        <span className="block sm:hidden">
+          <ModeToggle />
+        </span>
       </div>
     </footer>
   )