diff --git a/app/dashboard/sites/[siteId]/SitePage.tsx b/app/dashboard/sites/[siteId]/SitePage.tsx
index cdb0d21..e33f02e 100644
--- a/app/dashboard/sites/[siteId]/SitePage.tsx
+++ b/app/dashboard/sites/[siteId]/SitePage.tsx
@@ -61,7 +61,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                       </button>
                     </>
                   )}
-                  <EditModeToggle onToggle={setIsEditMode} />
+                  <EditModeToggle toggle={setIsEditMode} isActive={isEditMode} />
                 </div>
               </div>
               
diff --git a/components/EditModeToggle.tsx b/components/EditModeToggle.tsx
index 86a6999..2567d22 100644
--- a/components/EditModeToggle.tsx
+++ b/components/EditModeToggle.tsx
@@ -1,26 +1,30 @@
 "use client"
 
-import { useState } from "react"
-import { Pencil, Eye } from "lucide-react"
+import { useEffect, useState } from "react"
 
 interface EditModeToggleProps {
   className?: string
-  onToggle?: (isEditMode: boolean) => void
+  toggle?: (isEditMode: boolean) => void
+  isActive?: boolean
 }
 
-export function EditModeToggle({ className, onToggle }: EditModeToggleProps) {
-  const [isEditMode, setIsEditMode] = useState(false)
+export function EditModeToggle({ className, toggle, isActive }: EditModeToggleProps) {
+  const [isEditMode, setIsEditMode] = useState(isActive ?? false);
+  
+  useEffect(() => {
+    setIsEditMode(isActive ?? false);
+  }, [isActive]);
 
   const handleToggle = () => {
-    const newMode = !isEditMode
-    setIsEditMode(newMode)
-    onToggle?.(newMode)
-  }
+    const newMode = !isEditMode;
+    setIsEditMode(newMode);
+    toggle?.(newMode);
+  };
 
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <input type="checkbox" onChange={handleToggle} checked={isEditMode} className="toggle toggle-xs" />
       <label htmlFor="toggle" className="label-text">Edit Mode</label>
     </div>
-  )
+  );
 }
\ No newline at end of file