diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 6e1d319..8464e3b 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -22,10 +22,10 @@ export function LoginPage({ next }: { next?: string }) {
     <main className="w-full max-w-md p-8 border rounded-md shadow-sm">
       <div className="flex justify-center items-center gap-1.5 mb-4">
         <Donut className="w-5 h-5" />
-        <h1 className="text-lg font-bold text-gray-800">DishCraft</h1>
+        <h1 className="text-lg font-bold text-foreground">DishCraft</h1>
       </div>
 
-      <h2 className="text-2xl font-bold mb-4 text-gray-800">Login</h2>
+      <h2 className="text-2xl font-bold mb-4 text-foreground">Login</h2>
       <SignInForm next={next} />
 
       <div className="mt-2 w-full">
@@ -41,7 +41,7 @@ export function LoginPage({ next }: { next?: string }) {
       <div className="mt-3">
         <span className="text-sm text-muted-foreground">
           Don&apos;t have an account?{" "}
-          <Link href="/signup" className="underline text-black">
+          <Link href="/signup" className="underline text-foreground">
             Sign Up
           </Link>
         </span>
@@ -78,7 +78,10 @@ function SignInFormFields({ error }: SignInActionData) {
   return (
     <div className="space-y-3">
       <div className="space-y-2">
-        <label className="block text-gray-700 mb-1 text-sm" htmlFor="username">
+        <label
+          className="block text-foreground mb-1 text-sm"
+          htmlFor="username"
+        >
           Username
         </label>
         <Input
@@ -95,7 +98,10 @@ function SignInFormFields({ error }: SignInActionData) {
         />
       </div>
       <div className="space-y-2 relative">
-        <label className="block text-gray-700 mb-1 text-sm" htmlFor="password">
+        <label
+          className="block text-foreground mb-1 text-sm"
+          htmlFor="password"
+        >
           Password
         </label>
         <Input
@@ -110,13 +116,13 @@ function SignInFormFields({ error }: SignInActionData) {
         {showPassword ? (
           <EyeOff
             onClick={() => setShowPassword((prev) => !prev)}
-            className="text-gray-700 h-5 w-5 absolute right-2 top-[2.125rem] cursor-pointer"
+            className="text-foreground h-5 w-5 absolute right-2 top-[1.9rem] cursor-pointer"
             aria-label="hide password"
           />
         ) : (
           <Eye
             onClick={() => setShowPassword((prev) => !prev)}
-            className="text-gray-700 h-5 w-5 absolute right-2 top-[2.125rem] cursor-pointer"
+            className="text-foreground h-5 w-5 absolute right-2 top-[1.9rem] cursor-pointer"
             aria-label="show password"
           />
         )}
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index c1e3833..9742a5a 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -22,10 +22,12 @@ export function SignUpPage({ next }: { next?: string }) {
     <main className="w-full max-w-md p-8 border rounded-md shadow-sm">
       <div className="flex justify-center items-center gap-1.5 mb-4">
         <Donut className="w-5 h-5" />
-        <h1 className="text-lg font-bold text-gray-800">DishCraft</h1>
+        <h1 className="text-lg font-bold text-foreground">DishCraft</h1>
       </div>
 
-      <h2 className="text-2xl font-bold mb-4 text-gray-800">Create Account</h2>
+      <h2 className="text-2xl font-bold mb-4 text-foreground">
+        Create Account
+      </h2>
       <SignUpForm next={next} />
 
       <div className="mt-2 w-full">
@@ -35,7 +37,7 @@ export function SignUpPage({ next }: { next?: string }) {
       <div className="mt-3">
         <span className="text-sm text-muted-foreground">
           Already have an account?{" "}
-          <Link href="/login" className="underline text-black">
+          <Link href="/login" className="underline text-foreground">
             Login
           </Link>
         </span>
@@ -73,7 +75,7 @@ function SignUpFormFields({ error }: SignUpActionData) {
     <div className="space-y-3">
       <div className="space-y-2">
         <label
-          className="block text-gray-700 mb-1 text-sm"
+          className="block text-foreground mb-1 text-sm"
           htmlFor="new-username"
         >
           Username
@@ -100,7 +102,7 @@ function SignUpFormFields({ error }: SignUpActionData) {
       </div>
       <div className="space-y-2 relative">
         <label
-          className="block text-gray-700 mb-1 text-sm"
+          className="block text-foreground mb-1 text-sm"
           htmlFor="new-password"
         >
           Password
@@ -117,13 +119,13 @@ function SignUpFormFields({ error }: SignUpActionData) {
         {showPassword ? (
           <EyeOff
             onClick={() => setShowPassword((prev) => !prev)}
-            className="text-gray-700 h-5 w-5 absolute right-2 top-[2.125rem] cursor-pointer"
+            className="text-foreground h-5 w-5 absolute right-2 top-[1.9rem] cursor-pointer"
             aria-label="hide password"
           />
         ) : (
           <Eye
             onClick={() => setShowPassword((prev) => !prev)}
-            className="text-gray-700 h-5 w-5 absolute right-2 top-[2.125rem] cursor-pointer"
+            className="text-foreground h-5 w-5 absolute right-2 top-[1.9rem] cursor-pointer"
             aria-label="show password"
           />
         )}
diff --git a/app/(recipes)/add/recipe-form.tsx b/app/(recipes)/add/recipe-form.tsx
index 2747c13..931de72 100644
--- a/app/(recipes)/add/recipe-form.tsx
+++ b/app/(recipes)/add/recipe-form.tsx
@@ -40,7 +40,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
     <div className="space-y-4 py-1">
       <div className="flex flex-col flex-grow space-y-2 items-start">
         <label
-          className="block text-sm font-medium text-gray-700"
+          className="block text-sm font-medium text-foreground"
           htmlFor="title"
         >
           Title
@@ -62,7 +62,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       ) : null}
       <div className="flex flex-col space-y-2 items-start">
         <label
-          className="block text-sm font-medium text-gray-700"
+          className="block text-sm font-medium text-foreground"
           htmlFor="cuisine"
         >
           Cuisine
@@ -83,7 +83,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       ) : null}
       <div className="flex flex-col space-y-2 items-start">
         <label
-          className="block text-sm font-medium text-gray-700"
+          className="block text-sm font-medium text-foreground"
           htmlFor="category"
         >
           Category
@@ -104,7 +104,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       ) : null}
       <div className="flex flex-col space-y-2 items-start">
         <label
-          className="block text-sm font-medium text-gray-700"
+          className="block text-sm font-medium text-foreground"
           htmlFor="image"
         >
           Image (optional)
@@ -125,7 +125,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       ) : null}
       <div className="flex flex-col space-y-2 items-start">
         <label
-          className="block text-sm font-medium text-gray-700"
+          className="block text-sm font-medium text-foreground"
           htmlFor="prepTime"
         >
           Prep Time (min)
@@ -147,14 +147,14 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       <div className="flex flex-col space-y-2 items-start">
         <div className="w-full flex justify-between">
           <label
-            className="flex items-center gap-1 text-sm font-medium text-gray-700"
+            className="flex items-center gap-1 text-sm font-medium text-foreground"
             htmlFor="ingredients"
           >
             Ingredients
             <TooltipProvider delayDuration={200}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Info className="h-4 w-4 cursor-pointer" />
+                  <Info className="h-4 w-4 cursor-pointer hidden lg:block" />
                 </TooltipTrigger>
                 <TooltipContent className="text-center">
                   <p>Markdown is supported!</p>
@@ -163,7 +163,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
               </Tooltip>
             </TooltipProvider>
           </label>
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <label htmlFor="ingredients-preview">Preview</label>
             <Switch
               id="ingredients-preview"
@@ -179,7 +179,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
         <div
           className={clsx(
             "w-full px-3 py-2 border rounded-md !text-sm",
-            ingredientsPreviewToggle ? "block" : "hidden",
+            ingredientsPreviewToggle ? "block" : "hidden"
           )}
         >
           <MarkdownRenderer>{ingredientsInput}</MarkdownRenderer>
@@ -203,14 +203,14 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
       <div className="flex flex-col space-y-2 items-start">
         <div className="w-full flex justify-between">
           <label
-            className="flex items-center gap-1 text-sm font-medium text-gray-700"
+            className="flex items-center gap-1 text-sm font-medium text-foreground"
             htmlFor="procedure"
           >
             Procedure
             <TooltipProvider delayDuration={200}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Info className="h-4 w-4 cursor-pointer" />
+                  <Info className="h-4 w-4 cursor-pointer hidden lg:block" />
                 </TooltipTrigger>
                 <TooltipContent className="text-center">
                   <p>Markdown is supported!</p>
@@ -219,7 +219,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
               </Tooltip>
             </TooltipProvider>
           </label>
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <label htmlFor="procedure-preview">Preview</label>
             <Switch
               id="procedure-preview"
@@ -233,7 +233,7 @@ export function RecipeFormFields({ error }: SubmitRecipeData) {
         <div
           className={clsx(
             "w-full px-3 py-2 border rounded-md !text-sm",
-            procedurePreviewToggle ? "block" : "hidden",
+            procedurePreviewToggle ? "block" : "hidden"
           )}
         >
           <MarkdownRenderer>{procedureInput}</MarkdownRenderer>
diff --git a/app/layout.tsx b/app/layout.tsx
index 2444e93..81eed76 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Suspense } from "react";
 import { Analytics } from "@vercel/analytics/react";
 import { Toaster } from "@/components/ui/toaster";
 import { LayoutSkeleton } from "@/components/skeletons/recipes-skeleton";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const jetbrains_mono = JetBrains_Mono({
@@ -24,13 +25,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${inter.className} ${jetbrains_mono.variable} overflow-y-scroll`}
       >
-        <Suspense fallback={<LayoutSkeleton />}>{children}</Suspense>
-        <Toaster />
-        <Analytics />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Suspense fallback={<LayoutSkeleton />}>{children}</Suspense>
+          <Toaster />
+          <Analytics />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/app/user/page.tsx b/app/user/page.tsx
index 2f40700..03a7401 100644
--- a/app/user/page.tsx
+++ b/app/user/page.tsx
@@ -75,11 +75,11 @@ export default async function UserPage() {
       <Tabs defaultValue="submitted" className="w-full">
         <TabsList className="w-full">
           <TabsTrigger value="submitted" className="w-full">
-            <Upload className="text-gray-700 h-4 w-4 mr-2" />
+            <Upload className="text-muted-foreground h-4 w-4 mr-2" />
             Submitted
           </TabsTrigger>
           <TabsTrigger value="liked" className="w-full">
-            <Heart className="text-gray-700 h-4 w-4 mr-2" />
+            <Heart className="text-muted-foreground h-4 w-4 mr-2" />
             Liked
           </TabsTrigger>
         </TabsList>
diff --git a/bun.lock b/bun.lock
index 916cf94..fd29062 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,6 +30,7 @@
         "nanoid-dictionary": "^4.3.0",
         "next": "^14.0.5-canary.56",
         "next-auth": "^5.0.0-beta.4",
+        "next-themes": "^0.4.6",
         "react": "^18",
         "react-dom": "^18",
         "tailwind-merge": "^2.2.0",
@@ -819,6 +820,8 @@
 
     "next-auth": ["next-auth@5.0.0-beta.4", "", { "dependencies": { "@auth/core": "0.18.4" }, "peerDependencies": { "next": "^14", "nodemailer": "^6.6.5", "react": "^18.2.0" }, "optionalPeers": ["nodemailer"] }, "sha512-vgocjvwPA8gxd/zrIP/vr9lJ/HeNe+C56lPP1D3sdyenHt8KncQV6ro7q0xCsDp1fcOKx7WAWVZH5o8aMxDzgw=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "next-tick": ["next-tick@1.1.0", "", {}, "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="],
 
     "node-addon-api": ["node-addon-api@5.1.0", "", {}, "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="],
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 3285cbb..230376f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -19,11 +19,12 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { AddLink, AuthNav, UsernameLabel } from "@/app/(auth)/auth-nav";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export default function Navbar() {
   return (
     <header className="w-full px-4 flex justify-center sticky top-4">
-      <div className="z-10 h-[74px] max-w-5xl w-full py-4 px-6 flex justify-between lg:grid grid-cols-6 place-items-center text-sm rounded-full backdrop-filter bg-white/40 backdrop-blur border">
+      <div className="z-10 h-[74px] max-w-5xl w-full py-4 pl-6 pr-6 lg:pr-0 flex justify-between lg:grid grid-cols-6 place-items-center text-sm rounded-full backdrop-filter bg-background/40 backdrop-blur border">
         <Link
           href="/"
           className="col-span-2 lg:col-span-1 w-full flex justify-start"
@@ -96,8 +97,12 @@ export default function Navbar() {
             </li>
           </ul>
         </nav>
+
         <Suspense fallback={null}>
-          <AuthNav />
+          <div className="flex items-center justify-end">
+            <ThemeToggle />
+            <AuthNav />
+          </div>
         </Suspense>
 
         <div className="flex gap-4 lg:hidden">
diff --git a/components/recipe-card.tsx b/components/recipe-card.tsx
index 03de228..c62b3a7 100644
--- a/components/recipe-card.tsx
+++ b/components/recipe-card.tsx
@@ -16,14 +16,14 @@ export default function RecipeCard({ recipe }: { recipe: ReducedRecipe }) {
       prefetch={true}
       className="flex flex-col items-center"
     >
-      <div className="w-full px-4 py-4 flex flex-col items-start gap-2 group rounded-md hover:bg-neutral-100/75 transition">
+      <div className="w-full px-4 py-4 flex flex-col items-start gap-2 group rounded-md hover:bg-muted/75 transition">
         <div className="w-full flex items-center gap-2">
-          <span className="font-semibold text-gray-800 group-hover:text-black transition duration-300">
+          <span className="font-semibold text-foreground group-hover:text-foreground transition duration-300">
             {recipe.title}
           </span>
-          <ArrowRight className="h-4 w-4 text-gray-800 group-hover:translate-x-1 transition-transform group-hover:text-black group-hover:dark:text-white" />
+          <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:translate-x-1 transition-transform group-hover:text-foreground" />
         </div>
-        <div className="text-gray-600 group-hover:text-black space-x-2 text-sm font-light">
+        <div className="text-muted-foreground group-hover:text-foreground space-x-2 text-sm font-light">
           <span>{`${recipe.cuisine}`}</span>
           <span className="text-xs select-none">|</span>
           <span>{`${recipe.category}`}</span>
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..52dfef1
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,8 @@
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..eeaf15a
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // Avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="h-9 w-9 lg:w-12">
+        <Sun className="h-5 w-5" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="h-9 w-9 lg:w-12"
+      aria-label="Toggle theme"
+    >
+      {theme === "light" ? (
+        <Moon className="h-5 w-5" />
+      ) : (
+        <Sun className="h-5 w-5" />
+      )}
+    </Button>
+  );
+}
diff --git a/package.json b/package.json
index 707c2dc..738e63b 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "nanoid-dictionary": "^4.3.0",
     "next": "^14.0.5-canary.56",
     "next-auth": "^5.0.0-beta.4",
+    "next-themes": "^0.4.6",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",