diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47f1c1a..1b97c23 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,9 +8,16 @@ import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Sparkles, CheckCircle, Award, MapPin, Calendar } from "lucide-react";
+import { Sparkles, CheckCircle, Award, MapPin, Calendar, Moon, Sun } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -35,6 +42,19 @@ export default function LandingPage() {
           ]}
           button={{ text: "احجز الآن", href: "contact" }}
           brandName="صالون لي جراند"
+          rightElement={
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              aria-label="Toggle theme"
+            >
+              {isDarkMode ? (
+                <Sun size={20} className="text-yellow-500" />
+              ) : (
+                <Moon size={20} className="text-gray-700" />
+              )}
+            </button>
+          }
         />
       </div>