diff --git a/README.md b/README.md
index 68e8241..ea48dc5 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 
 [ TODO LIST ]
 
+- [ ] Blog
 - [ ] Quizes System
 - [ ] Fixing janky ts-types
 - [ ] Main-Page ( Better design )
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
index 00913a2..2f9978c 100644
--- a/components/CourseCard.tsx
+++ b/components/CourseCard.tsx
@@ -1,5 +1,7 @@
 import { Course } from "../utils/types.ts";
 
+import IconCircle from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/circle.tsx";
+
 export default function CourseCard(props: { course: Course }) {
   const { course } = props;
   return (
@@ -8,8 +10,8 @@ export default function CourseCard(props: { course: Course }) {
       style={{ order: course.order }}
     >
       <a title={course.title} href={`/${course.slug}`}>
-        <h3 class="text-gray-500 font-bold">
-          {course.title}
+        <h3 class="text-gray-500 font-bold flex gap-1 items-center">
+          <IconCircle aria-hidden="true" class="h-4 w-4" /> {course.title}
         </h3>
       </a>
     </div>
diff --git a/components/Nav.tsx b/components/Nav.tsx
index 7152c89..df55402 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -6,7 +6,7 @@ populateCache();
 
 export default function NavBar() {
   return (
-    <nav class="bg-base-300 w-full py-4 px-2 md:px-8 flex items-center gap-4 border-b primary-content">
+    <nav class="bg-base-300 w-full py-4 px-4 md:px-8 flex items-center gap-4 border-b base-content">
       <div class="flex items-center flex-1">
         <div class="flex items-center gap-1">
           <img
diff --git a/routes/index.tsx b/routes/index.tsx
index e2dd586..ea00df5 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -41,18 +41,21 @@ export default function BlogIndexPage(
       </Head>
       <main class="max-w-screen-md px-4 pt-12 mx-auto mb-6">
         <h1 class="text-5xl font-bold z-10">المحتوى</h1>
-        <section class="flex flex-col gap-4">
+        <section class="flex flex-col">
           {merged.map((course, index) => {
             // Group of courses
             if ("courses" in course) {
               return (
-                <div class="" key={index}>
-                  <div class="flex gap-1 items-center">
+                <div class="mt-4" key={index}>
+                  <a
+                    href={`/group/${course.order}`}
+                    class="flex gap-1 items-center"
+                  >
                     <h2 class="text-3xl font-bold hover:opacity-75">
-                      <a href={`/group/${course.order}`}>{course.label}</a>
+                      {course.label}
                     </h2>
                     <IconChevronDown />
-                  </div>
+                  </a>
                   <div class="flex flex-col mt-2 pr-3">
                     {course.courses.map((innerCourse) => (
                       <CourseCard key={innerCourse.slug} course={innerCourse} />
diff --git a/static/styles.css b/static/styles.css
index 0a7adaa..6f348c5 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -6,10 +6,20 @@ body, .markdown-body {
     font-family: 'Cairo', sans-serif !important;
 }
 
-.no-user-select {
-  padding-top: 10px;
+.h-full-minus-bar {
+  /* screen - navbar */
+  height: calc(100vh - 64px);
 }
 
+/* Monaco Editor */
+.iPadShowKeyboard{
+  display: none;
+}
+.no-user-select, .showUnused {
+  padding-top: 10px !important;
+}
+
+/* Markdown */
 body .markdown-body {
   background-color: inherit !important;
   color: oklch(var(--bc)) !important;
@@ -19,16 +29,38 @@ body .markdown-body {
   width: fit-content;
 }
 
+pre {
+  direction: ltr !important;
+}
+
+.markdown-body .highlight pre {
+  background-color: var(--fallback-b3,oklch(var(--b3)/1)) !important;
+}
+
+mark {
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid #cccccc;
+  padding: 10px;
+  display: inline-block; 
+  position: relative; 
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+mark::before {
+  content: "ملاحظة";
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+/* Split Panel */
 .split {
   display: flex;
   flex-direction: row;
 }
 
-.h-full-minus-bar {
-  /* screen - navbar */
-  height: calc(100vh - 64px);
-}
-
 .gutter {
   position: relative;
   z-index: 2;
@@ -54,38 +86,11 @@ body .markdown-body {
   filter: none;
 }
 
-
 .gutter.gutter-horizontal::before {
   content: ''; 
 }
 
-
-pre {
-  direction: ltr !important;
-}
-
-.markdown-body .highlight pre {
-  background-color: var(--fallback-b3,oklch(var(--b3)/1)) !important;
-}
-
-mark {
-  background-color: transparent;
-  color: inherit;
-  border: 1px solid #cccccc;
-  padding: 10px;
-  display: inline-block; 
-  position: relative; 
-  border-radius: 10px;
-  margin-bottom: 10px;
-}
-
-mark::before {
-  content: "ملاحظة";
-  display: block;
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
+/* Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -99,7 +104,6 @@ mark::before {
   background-color: transparent;
 }
 
-
 body {
   scrollbar-width: thin;
   scrollbar-color: var(--fallback-bc,oklch(var(--bc)/.2)) var(--fallback-bc,oklch(var(--bc)/.2));