diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5b9f35e..2c17401 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,27 +1,29 @@
 import type { Metadata } from "next";
-import { Montserrat } from "next/font/google";
 import { Inter } from "next/font/google";
+import { DM_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const montserrat = Montserrat({
-  variable: "--font-montserrat",  subsets: ["latin"],
-});
-
 const inter = Inter({
   variable: "--font-inter",  subsets: ["latin"],
 });
 
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
 export const metadata: Metadata = {
   title: "RecoveryPath - Track Your Journey to Freedom",  description: "Luxurious recovery companion app. Track your days clean with an infinite counter, set personalized goals, and receive motivational support when you need it most.",  keywords: "recovery app, addiction support, sobriety tracker, wellness counter, recovery journey, hope, healing",  robots: {
     index: true,
     follow: true,
   },
   openGraph: {
-    title: "RecoveryPath - Your Recovery Companion",    description: "Track your journey to freedom with our elegant recovery counter and motivational support system.",    type: "website",    siteName: "RecoveryPath"},
+    title: "RecoveryPath - Your Recovery Companion",    description: "Track your journey to freedom with our elegant recovery counter and motivational support system.",    type: "website",    siteName: "RecoveryPath"
+  },
   twitter: {
-    card: "summary_large_image",    title: "RecoveryPath - Track Your Freedom",    description: "Your journey to recovery starts with a single day. RecoveryPath is here to support every step."},
+    card: "summary_large_image",    title: "RecoveryPath - Track Your Freedom",    description: "Your journey to recovery starts with a single day. RecoveryPath is here to support every step."
+  },
 };
 
 export default function RootLayout({
@@ -31,9 +33,26 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const theme = localStorage.getItem('theme') || 'light';
+                const isDark = theme === 'dark';
+                if (isDark) {
+                  document.documentElement.classList.add('dark');
+                } else {
+                  document.documentElement.classList.remove('dark');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
       <ServiceWrapper>
         <body
-          className={`${montserrat.variable} ${inter.variable} antialiased`}
+          className={`${inter.variable} ${dmSans.variable} antialiased`}
         >
           <Tag />
           {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ee2ff4c..e0c07b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,8 +9,59 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Heart, TrendingUp, Calendar, Flame, Star, Award, Zap, MessageSquare, Twitter, Instagram, MessageCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export default function LandingPage() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const theme = localStorage.getItem('theme') || 'light';
+    setIsDark(theme === 'dark');
+    applyTheme(theme);
+  }, []);
+
+  const applyTheme = (theme: string) => {
+    const isDarkTheme = theme === 'dark';
+    setIsDark(isDarkTheme);
+
+    if (isDarkTheme) {
+      document.documentElement.classList.add('dark');
+      // Apply dark theme colors
+      document.documentElement.style.setProperty('--background', '#0a0a0a');
+      document.documentElement.style.setProperty('--card', '#1a1a1a');
+      document.documentElement.style.setProperty('--foreground', '#ffffffe6');
+      document.documentElement.style.setProperty('--primary-cta', '#cee7ff');
+      document.documentElement.style.setProperty('--secondary-cta', '#1a1a1a');
+      document.documentElement.style.setProperty('--accent', '#4a9eff');
+      document.documentElement.style.setProperty('--background-accent', '#1a3a5c');
+      document.documentElement.style.setProperty('--primary-cta-text', '#0a0a0a');
+      document.documentElement.style.setProperty('--secondary-cta-text', '#ffffffe6');
+    } else {
+      document.documentElement.classList.remove('dark');
+      // Apply light theme colors
+      document.documentElement.style.setProperty('--background', '#ffffff');
+      document.documentElement.style.setProperty('--card', '#f9f9f9');
+      document.documentElement.style.setProperty('--foreground', '#000612e6');
+      document.documentElement.style.setProperty('--primary-cta', '#15479c');
+      document.documentElement.style.setProperty('--secondary-cta', '#f9f9f9');
+      document.documentElement.style.setProperty('--accent', '#e2e2e2');
+      document.documentElement.style.setProperty('--background-accent', '#c4c4c4');
+      document.documentElement.style.setProperty('--primary-cta-text', '#ffffff');
+      document.documentElement.style.setProperty('--secondary-cta-text', '#000612e6');
+    }
+
+    localStorage.setItem('theme', theme);
+  };
+
+  const toggleTheme = () => {
+    const newTheme = isDark ? 'light' : 'dark';
+    applyTheme(newTheme);
+  };
+
+  if (!mounted) return null;
+
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -19,9 +70,9 @@ export default function LandingPage() {
       contentWidth="small"
       sizing="mediumLarge"
       background="blurBottom"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
@@ -33,7 +84,9 @@ export default function LandingPage() {
             { name: "Support", id: "motivation" },
             { name: "Progress", id: "tracker" }
           ]}
-          button={{ text: "Start Now", href: "counter" }}
+          button={{
+            text: isDark ? "🌙 Light Mode" : "☀️ Dark Mode",            onClick: toggleTheme
+          }}
           brandName="RecoveryPath"
         />
       </div>
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index 62c2d18..c480bac 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }
