diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5323171..6b05c82 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,7 @@
-import Image from "next/image";
+"use client"
+
 import { Button } from "@/components/ui/button";
+import { Footer } from "@/components/footer";
 
 export default function Home() {
 	return (
@@ -7,54 +9,7 @@ export default function Home() {
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 
 			<Button>Click me</Button>
-
-			<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image
-						aria-hidden
-						src="/file.svg"
-						alt="File icon"
-						width={16}
-						height={16}
-					/>
-					Learn
-				</a>
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image
-						aria-hidden
-						src="/window.svg"
-						alt="Window icon"
-						width={16}
-						height={16}
-					/>
-					Examples
-				</a>
-				<a
-					className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-					href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<Image
-						aria-hidden
-						src="/globe.svg"
-						alt="Globe icon"
-						width={16}
-						height={16}
-					/>
-					Go to nextjs.org →
-				</a>
-			</footer>
+			<Footer />
 		</div>
 	);
 }
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..8c03f7d
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+
+import Image from "next/image";
+
+export function Footer() {
+
+    return (
+        <footer className="w-full mx-auto py-4 px-4 row-start-3 flex gap-6 flex-wrap items-center justify-center border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <a
+                className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+                href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Image
+                    aria-hidden
+                    src="/file.svg"
+                    alt="File icon"
+                    width={16}
+                    height={16}
+                />
+                Learn
+            </a>
+            <a
+                className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+                href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Image
+                    aria-hidden
+                    src="/window.svg"
+                    alt="Window icon"
+                    width={16}
+                    height={16}
+                />
+                Examples
+            </a>
+            <a
+                className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+                href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Image
+                    aria-hidden
+                    src="/globe.svg"
+                    alt="Globe icon"
+                    width={16}
+                    height={16}
+                />
+                Go to nextjs.org →
+            </a>
+        </footer>
+    )
+}
+
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 77e9d04..4c71584 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -2,8 +2,7 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { MoonIcon, SunIcon } from "lucide-react"
-import { useTheme } from "next-themes"
+
 import {
 	ClerkProvider,
 	SignInButton,
@@ -12,14 +11,12 @@ import {
 	UserButton
 } from '@clerk/nextjs';
 
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { ModeToggle } from "@/components/theme-toggle"
 
 export function Navbar() {
-	const { setTheme } = useTheme()
 
 	return (
-		<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+		<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60" suppressHydrationWarning={true}>
 			<div className="container flex h-14 items-center mx-auto">
 				<div className="mr-4 hidden md:flex">
 					<Link href="/" className="mr-6 flex items-center space-x-2">
@@ -35,22 +32,7 @@ export function Navbar() {
 					</nav>
 				</div>
 				<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-					<nav className="flex items-center">
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button variant="ghost" size="icon">
-									<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-									<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-									<span className="sr-only">Toggle theme</span>
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="end">
-								<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-								<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-								<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
-							</DropdownMenuContent>
-						</DropdownMenu>
-					</nav>
+					<ModeToggle />
 					<ClerkProvider>
 						<div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md">
 							<SignedOut>