diff --git a/app/page.tsx b/app/page.tsx
index d3c5c18..8d68057 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1101,6 +1101,73 @@ export default function CodeEditor() {
 
   const [activeTab, setActiveTab] = useState<keyof CodeContent>("html")
   const [theme, setTheme] = useState<"light" | "dark">("light")
+
+  const [paletteOpen, setPaletteOpen] = useState(false)
+  const [autoRun, setAutoRun] = useState(true)
+  const [splitRatio, setSplitRatio] = useState(50)
+  const [isResizing, setIsResizing] = useState(false)
+
+
+  // use effect for handling full screen mode
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+
+  // const handleFullscreenToggle = async () => {
+  //   try {
+  //     if (document.fullscreenElement) {
+  //       if (document.exitFullscreen) {
+  //         await document.exitFullscreen();
+  //       }
+  //       return;
+  //     }
+
+  //     if (isFullscreen) {
+  //       setIsFullscreen(false);
+  //       return;
+  //     }
+
+  //     if (containerRef.current?.requestFullscreen) {
+  //       await containerRef.current.requestFullscreen();
+  //       return;
+  //     }
+
+  //     setIsFullscreen(true);
+  //   } catch (err) {
+  //     console.error("Error attempting to toggle fullscreen:", err);
+  //     setIsFullscreen((prev) => !prev);
+  //   }
+  // };
+
+  // Tracks which template is currently active
+
+  const [isMobile, setIsMobile] = useState(false)
+  const [consoleErrors, setConsoleErrors] = useState<Array<{message: string; line?: number; col?: number}>>([])
+  const [consoleOpen, setConsoleOpen] = useState(false)
+  const [moreSheetOpen, setMoreSheetOpen] = useState(false)
+
+  const [currentTemplateId, setCurrentTemplateId] = useState<string | null>(null)
+  const [templateSnapshots, setTemplateSnapshots] = useState<Record<string, CodeContent>>(() => {
+    if (typeof window === "undefined") return {}
+    try {
+      const saved = localStorage.getItem("webify_template_snapshots")
+      if (saved) return JSON.parse(saved) as Record<string, CodeContent>
+    } catch {
+      // corrupted storage — fall through
+    }
+    return {}
+  })
+
+  const isDragging = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
   const previewRef = useRef<HTMLIFrameElement>(null)
 
   useEffect(() => {