diff --git a/components/Courses.tsx b/components/Courses.tsx
index fea8961..e2ee837 100644
--- a/components/Courses.tsx
+++ b/components/Courses.tsx
@@ -30,14 +30,16 @@ export default function Courses(
             );
           }
         })}
-        <p class="mt-4 text-2xl">نعمل على الدروس القادما...</p>
-        <a
-          href="https://github.com/TeaByte/NakhlahJS"
-          class="text-gray-500 hover:underline"
-          target="_blank"
-        >
-          هل تود المساهمه في الموقع ؟
-        </a>
+        <div>
+          <p class="mt-3 text-2xl">نعمل على الدروس القادما...</p>
+          <a
+            href="https://github.com/TeaByte/NakhlahJS"
+            class="text-gray-500 hover:underline"
+            target="_blank"
+          >
+            هل تود المساهمه في الموقع ؟
+          </a>
+        </div>
       </section>
     </>
   );
diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
index cf3b827..4c69356 100644
--- a/components/EditorSplit.tsx
+++ b/components/EditorSplit.tsx
@@ -5,7 +5,7 @@ export default function EditorSplit(props: { slug: string }) {
   const testcases = getTestCase(props.slug);
   return (
     <>
-      <div class="mt-4">
+      <div class="mt-2">
         <div class="mx-2 border-[6px] border-base-300 rounded-btn pb-2">
           <div
             class="h-[400px] rounded-box"
diff --git a/components/Nav.tsx b/components/Nav.tsx
index 69a3173..d624dc8 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -28,7 +28,7 @@ export default function NavBar() {
           </a>
         </div>
       </div>
-      <div class="flex gap-3 items-center">
+      <div class="flex gap-2 items-center">
         <ThemeToggle />
         <Drawer courses={cache.courses} />
       </div>
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
index a112eec..04ba679 100644
--- a/islands/Editor.tsx
+++ b/islands/Editor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useLayoutEffect, useState } from "preact/hooks";
 import { useToast } from "./useToast.ts";
 import { doTests } from "./DoTest.ts";
 
@@ -13,9 +13,8 @@ interface Window {
 }
 
 export default function Editor(props: CounterProps) {
-  const [output, setOutput] = useState<string>("");
-  const { showToast } = useToast();
-  useEffect(() => {
+  // FIX ( useEffect, useLayoutEffect ) both don't load the preCode for some reason IDK why..
+  useLayoutEffect(() => {
     const initializeEditor = () => {
       if (window.editor) {
         window.editor.setValue(props.preCode);
@@ -27,6 +26,9 @@ export default function Editor(props: CounterProps) {
     };
   }, []);
 
+  const [output, setOutput] = useState<string>("");
+  const { showToast } = useToast();
+
   function handleCodeClear() {
     window.editor.setValue("");
     setOutput("");
@@ -107,7 +109,7 @@ export default function Editor(props: CounterProps) {
             اختبار
           </button>
         </div>
-        <pre className=" bg-base-300 overflow-y-scroll rounded-box p-4 mb-4 grow">
+        <pre className=" bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 grow">
 {output}
         </pre>
       </div>
diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
index 99cff0a..b947599 100644
--- a/islands/ThemeToggle.tsx
+++ b/islands/ThemeToggle.tsx
@@ -1,34 +1,35 @@
 import { useEffect } from "preact/hooks";
 
 declare var window: Window & typeof globalThis;
+
 interface Window {
   monaco: any;
 }
 
 export default function ThemeToggle() {
-  useEffect(() => {
-    const storedTheme = localStorage.getItem("selectedTheme");
-    if (storedTheme) {
-      document.documentElement.setAttribute("data-theme", storedTheme);
-      updateMarkdownTheme(storedTheme);
-    }
-  }, []);
-
   const updateMarkdownTheme = (theme: string) => {
     const documentDiv = document.getElementById("document");
     if (documentDiv) {
       if (theme === "dracula") {
         documentDiv.setAttribute("data-color-mode", "dark");
         documentDiv.setAttribute("data-dark-theme", "dark");
-        window.monaco.editor.setTheme("vs-dark");
+        window.monaco && window.monaco.editor.setTheme("vs-dark");
       } else {
         documentDiv.setAttribute("data-color-mode", "light");
         documentDiv.setAttribute("data-light-theme", "light");
-        window.monaco.editor.setTheme("vs-light");
+        window.monaco && window.monaco.editor.setTheme("vs-light");
       }
     }
   };
 
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("selectedTheme");
+    if (storedTheme) {
+      document.documentElement.setAttribute("data-theme", storedTheme);
+      updateMarkdownTheme(storedTheme);
+    }
+  }, []);
+
   const handleThemeChange = () => {
     const storedTheme = localStorage.getItem("selectedTheme");
     const newTheme = storedTheme === "nord" ? "dracula" : "nord";