diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6aeafa4..935b6f4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,14 +11,13 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download, Moon, Sun } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 export default function LandingPage() {
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
     const saved = localStorage.getItem('native-line-dark-mode');
     if (saved !== null) {
       setIsDarkMode(JSON.parse(saved));
@@ -26,13 +25,16 @@ export default function LandingPage() {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       setIsDarkMode(prefersDark);
     }
+    setMounted(true);
   }, []);
 
-  const toggleDarkMode = () => {
-    const newMode = !isDarkMode;
-    setIsDarkMode(newMode);
-    localStorage.setItem('native-line-dark-mode', JSON.stringify(newMode));
-  };
+  const toggleDarkMode = useCallback(() => {
+    setIsDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.setItem('native-line-dark-mode', JSON.stringify(newMode));
+      return newMode;
+    });
+  }, []);
 
   if (!mounted) {
     return null;