diff --git a/components/Nav.tsx b/components/Nav.tsx
index 7fd6fd5..763ec46 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -1,11 +1,32 @@
-export default function NavBar() {
-  const menus = [
-    { name: "later", href: "/" },
-    { name: "later", href: "/docs" },
-  ];
+import { cache, populateCache } from "../utils/course-cache.ts";
+import { Course } from "../utils/types.ts";
+
+populateCache();
+
+function Collapse({ titile, courses }: { titile: string; courses: Course[] }) {
+  return (
+    <div
+      tabindex={1}
+      class="collapse collapse-plus border border-base-300 bg-base-200"
+    >
+      <input type="checkbox" />
+      <div class="collapse-title text-xl font-medium">
+        {titile}
+      </div>
+      <div class="collapse-content">
+        {courses.map((course) => (
+          <li key={course.slug}>
+            <a title={course.title} href={`/${course.slug}`}>{course.title}</a>
+          </li>
+        ))}
+      </div>
+    </div>
+  );
+}
 
+export default function NavBar() {
   return (
-    <nav class="bg-base-300 w-full py-4 px-8 flex flex-col md:flex-row gap-4">
+    <nav class="bg-base-300 w-full py-4 px-2 md:px-8 flex items-center gap-4">
       <div class="flex items-center flex-1">
         <div class="flex items-center gap-1">
           <img
@@ -26,18 +47,33 @@ export default function NavBar() {
           </a>
         </div>
       </div>
-      <ul class="flex items-center gap-6">
-        {menus.map((menu) => (
-          <li>
-            <a
-              href={menu.href}
-              class="text-gray-500 hover:text-gray-700 py-1 border-gray-500 hidden"
-            >
-              {menu.name}
-            </a>
-          </li>
-        ))}
-      </ul>
+      <div dir="ltr" class="dropdown dropdown-bottom">
+        <div tabindex={0} role="button" class="btn m-1">تجربه</div>
+        <ul
+          dir="rtl"
+          tabindex={0}
+          class="dropdown-content z-[3] menu p-2 shadow bg-base-100 rounded-box w-72 gap-2 overflow-y-scroll"
+        >
+          {cache.merged.map((course, index) => {
+            if ("courses" in course) {
+              return (
+                <Collapse
+                  titile={course.label || "بدون عنوان"}
+                  courses={course.courses}
+                />
+              );
+            } else {
+              return (
+                <li class="" key={course.slug}>
+                  <a title={course.title} href={`/${course.slug}`}>
+                    {course.title}
+                  </a>
+                </li>
+              );
+            }
+          })}
+        </ul>
+      </div>
     </nav>
   );
 }
diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
index 7b43f52..c62fe4b 100644
--- a/routes/[...slug].tsx
+++ b/routes/[...slug].tsx
@@ -55,7 +55,7 @@ export default function CoursePage(props: PageProps<Course>) {
 
       <main>
         <div>
-          <div dir="ltr" class="split flex-grow max-h-screen min-h-screen">
+          <div dir="ltr" class="split flex-grow h-full-minus-bar">
             <div id="split-0" class="flex flex-col">
               <p class="py-2 bg-[#1E1E1E]"></p>
               <div dir="ltr" class="h-[400px] mb-2" id="editor"></div>
@@ -82,6 +82,33 @@ export default function CoursePage(props: PageProps<Course>) {
             </div>
           </div>
         </div>
+
+        {
+          /* <div>
+          <section dir="rtl" class="p-3 py-5 mb-40">
+            <div class="flex flex-col gap-2 md:flex-row justify-between mb-4">
+              <h1 class="text-3xl">{course.title}</h1>
+              <EditButton slug={course.slug} />
+            </div>
+            <div
+              id="document"
+              class="markdown-body"
+              data-color-mode="dark"
+              data-dark-theme="dark"
+              style={{ backgroundColor: "inherit" }}
+              dangerouslySetInnerHTML={{ __html: render(course.content) }}
+            />
+          </section>
+        </div>
+        <div>
+          <p class="py-2 bg-[#1E1E1E]"></p>
+          <div dir="ltr" class="h-[400px] mb-2" id="editor"></div>
+          <Editor
+            preCode={'console.log("Hello World!")'}
+            testCode={"x == x"}
+          />
+        </div> */
+        }
       </main>
     </>
   );
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 9b2dd35..4870a8d 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -25,8 +25,10 @@ export default function App({ Component }: PageProps) {
         />
       </head>
       <body>
-        <NavBar />
-        <Component />
+        <div class="h-screen">
+          <NavBar />
+          <Component />
+        </div>
       </body>
     </html>
   );
diff --git a/routes/index.tsx b/routes/index.tsx
index 8268a07..b5b21bf 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,71 +1,25 @@
 import { Handlers } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
 import { PageProps } from "$fresh/server.ts";
-import { join } from "$std/path/mod.ts";
 
 import CourseCard from "../components/CourseCard.tsx";
-import { getCourse, getGroupOrder } from "../utils/course.ts";
+import { getCourses } from "../utils/course.ts";
 import { Course, CourseGroup } from "../utils/types.ts";
+import { cache, populateCache } from "../utils/course-cache.ts";
+
+populateCache();
 
-const cache: { merged: (Course | CourseGroup)[] } = { merged: [] };
 export const handler: Handlers<{ merged: (Course | CourseGroup)[] }> = {
   async GET(_req, ctx) {
-    const courses = await getCourses();
+    const courses = await getCourses(cache);
     return ctx.render(courses);
   },
 };
 
-export async function getCourses(): Promise<
-  { merged: (Course | CourseGroup)[] }
-> {
-  if (cache.merged.length > 0) {
-    return cache;
-  }
-
-  console.log("Fetching courses...");
-  const files = Deno.readDir("./courses");
-  const groups: CourseGroup[] = [];
-  const nonGroups: Course[] = [];
-  for await (const file of files) {
-    if (file.isDirectory) {
-      const groupSlug = file.name;
-      const groupFiles = Deno.readDir(join("./courses", groupSlug));
-      const groupPromises = [];
-      for await (const groupFile of groupFiles) {
-        if (!groupFile.isDirectory && groupFile.name.endsWith(".md")) {
-          const slug = groupFile.name.replace(".md", "");
-          const course = await getCourse(join(groupSlug, slug));
-          if (course) {
-            groupPromises.push(course);
-          }
-        }
-      }
-      const groupOrder = await getGroupOrder(join("./courses", groupSlug));
-      groups.push({
-        courses: groupPromises,
-        order: groupOrder?.order,
-        label: groupOrder?.label,
-      });
-    } else if (file.name.endsWith(".md")) {
-      const slug = file.name.replace(".md", "");
-      const course = await getCourse(slug);
-      if (course) {
-        nonGroups.push(course);
-      }
-    }
-  }
-
-  const merged: (Course | CourseGroup)[] = [...nonGroups, ...groups];
-  merged.sort((a, b) => (a.order || 999) - (b.order || 999));
-  cache.merged = merged;
-  return cache;
-}
-
 export default function BlogIndexPage(
   props: PageProps<{ merged: (Course | CourseGroup)[] }>,
 ) {
   const { merged } = props.data;
-
   return (
     <>
       <Head>
diff --git a/static/resizer.js b/static/resizer.js
index 59af55a..1000d83 100644
--- a/static/resizer.js
+++ b/static/resizer.js
@@ -1,16 +1,26 @@
 function isMobile() {
-  return window.innerWidth <= 768;
+  return window.innerWidth <= 699;
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-  document.body.style.overflow = "hidden";
-
   if (isMobile()) {
-    Split(["#split-0", "#split-1"], {
-      sizes: [2, 100],
-      gutterAlign: "start",
-      minSize: 1,
-      gutterSize: 15,
+    const splitInstance = Split(["#split-0", "#split-1"], {
+      sizes: [0, 100],
+      gutterAlign: "end",
+      minSize: 0,
+      gutterSize: 13,
+    });
+
+    let isRight = true;
+    const gutter = document.querySelector(".gutter");
+    gutter.addEventListener("touchstart", function () {
+      if (isRight) {
+        splitInstance.setSizes([100, 0]);
+        isRight = false;
+      } else {
+        splitInstance.setSizes([0, 100]);
+        isRight = true;
+      }
     });
   } else {
     Split(["#split-0", "#split-1"], {
diff --git a/static/styles.css b/static/styles.css
index 557acf3..b996339 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -19,6 +19,10 @@ body .markdown-body {
   flex-direction: row;
 }
 
+.h-full-minus-bar {
+  height: calc(100vh - 88px);
+}
+
 .gutter {
   z-index: 2;
   background-color: var(--fallback-bc,oklch(var(--bc)/.2));
diff --git a/utils/course-cache.ts b/utils/course-cache.ts
new file mode 100644
index 0000000..0b32599
--- /dev/null
+++ b/utils/course-cache.ts
@@ -0,0 +1,7 @@
+import { Course, CourseGroup } from "./types.ts";
+import { getCourses } from "./course.ts";
+export const cache: { merged: (Course | CourseGroup)[] } = { merged: [] };
+
+export async function populateCache(): Promise<void> {
+  await getCourses(cache);
+}
diff --git a/utils/course.ts b/utils/course.ts
index ca632fd..41c0ea2 100644
--- a/utils/course.ts
+++ b/utils/course.ts
@@ -2,7 +2,7 @@ import { join } from "$std/path/mod.ts";
 import { readJson } from "https://deno.land/std@0.66.0/fs/read_json.ts";
 import { extract } from "https://deno.land/std@0.151.0/encoding/front_matter.ts";
 
-import { Course, CourseAttributes } from "../utils/types.ts";
+import { Course, CourseAttributes, CourseGroup } from "../utils/types.ts";
 
 export async function getGroupOrder(
   groupPath: string,
@@ -34,3 +34,51 @@ export async function getCourse(
   };
   return course;
 }
+
+export async function getCourses(
+  cache: { merged: (Course | CourseGroup)[] } = { merged: [] },
+): Promise<
+  { merged: (Course | CourseGroup)[] }
+> {
+  if (cache.merged.length > 0) {
+    return cache;
+  }
+
+  console.log("Fetching courses...");
+  const files = Deno.readDir("./courses");
+  const groups: CourseGroup[] = [];
+  const nonGroups: Course[] = [];
+  for await (const file of files) {
+    if (file.isDirectory) {
+      const groupSlug = file.name;
+      const groupFiles = Deno.readDir(join("./courses", groupSlug));
+      const groupPromises = [];
+      for await (const groupFile of groupFiles) {
+        if (!groupFile.isDirectory && groupFile.name.endsWith(".md")) {
+          const slug = groupFile.name.replace(".md", "");
+          const course = await getCourse(join(groupSlug, slug));
+          if (course) {
+            groupPromises.push(course);
+          }
+        }
+      }
+      const groupOrder = await getGroupOrder(join("./courses", groupSlug));
+      groups.push({
+        courses: groupPromises,
+        order: groupOrder?.order,
+        label: groupOrder?.label,
+      });
+    } else if (file.name.endsWith(".md")) {
+      const slug = file.name.replace(".md", "");
+      const course = await getCourse(slug);
+      if (course) {
+        nonGroups.push(course);
+      }
+    }
+  }
+
+  const merged: (Course | CourseGroup)[] = [...nonGroups, ...groups];
+  merged.sort((a, b) => (a.order || 999) - (b.order || 999));
+  cache.merged = merged;
+  return cache;
+}