diff --git a/README.md b/README.md
index 03a343b..55337af 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 - [ ] Main-Page ( Better design )
 - [ ] Markdown and cache ( Better code )
 - [ ] Login || LocalStorage and save progress
+- [ ] Next and Prev buttons
 - [ ] Themes, theme settings
 
 ---
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
index 70c35d8..00913a2 100644
--- a/components/CourseCard.tsx
+++ b/components/CourseCard.tsx
@@ -4,16 +4,13 @@ export default function CourseCard(props: { course: Course }) {
   const { course } = props;
   return (
     <div
-      class="py-4 gray-200 hover:opacity-75"
+      class="py-2 gray-200 hover:opacity-75"
       style={{ order: course.order }}
     >
       <a title={course.title} href={`/${course.slug}`}>
-        <h3 class="gray-900 font-bold">
+        <h3 class="text-gray-500 font-bold">
           {course.title}
         </h3>
-        <div class="text-gray-500 truncate text-ellipsis max-w-[300px] md:max-w-full overflow-hidden">
-          {course.snippet}
-        </div>
       </a>
     </div>
   );
diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
index 59f19a5..964fbd0 100644
--- a/routes/[...slug].tsx
+++ b/routes/[...slug].tsx
@@ -1,5 +1,5 @@
 import { Course } from "../utils/types.ts";
-import { getCourse } from "../utils/course.ts";
+import { getCourse, getJson } from "../utils/course.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { CSS, render } from "$gfm";
@@ -7,21 +7,28 @@ import { Head } from "$fresh/runtime.ts";
 import Editor from "../islands/Editor.tsx";
 import EditButton from "../components/EditButton.tsx";
 
-export const handler: Handlers<Course> = {
-  async GET(_req, ctx) {
-    try {
-      const course = await getCourse(ctx.params.slug);
-      if (course === null) return ctx.renderNotFound();
-      return ctx.render(course);
-    } catch {
-      return ctx.renderNotFound();
-    }
-  },
-};
-
-export default function CoursePage(props: PageProps<Course>) {
-  const course = props.data;
+export const handler: Handlers<{ course: Course; lable: string | undefined }> =
+  {
+    async GET(_req, ctx) {
+      try {
+        let lable: string | undefined;
+        const course = await getCourse(ctx.params.slug);
+        if (ctx.params.slug.includes("/")) {
+          lable = await getJson(ctx.params.slug.split("/")[0]);
+          console.log(lable);
+        }
+        if (course === null) return ctx.renderNotFound();
+        return ctx.render({ course, lable });
+      } catch {
+        return ctx.renderNotFound();
+      }
+    },
+  };
 
+export default function CoursePage(
+  props: PageProps<{ course: Course; lable: string | undefined }>,
+) {
+  const { course, lable } = props.data;
   return (
     <>
       <Head>
@@ -34,7 +41,6 @@ export default function CoursePage(props: PageProps<Course>) {
           property="og:url"
           content={`https://nakhlahjs.com/${course.slug}`}
         />
-
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
         <link
           rel="stylesheet"
@@ -62,10 +68,28 @@ export default function CoursePage(props: PageProps<Course>) {
             </div>
             <div id="split-1" class="overflow-y-scroll">
               <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 class="text-sm breadcrumbs" dir="rtl">
+                    <ul>
+                      <li>
+                        <a href="/">الرئيسية</a>
+                      </li>
+                      {lable && (
+                        <li>
+                          <a href={`/group/${lable}`}>
+                            {lable}
+                          </a>
+                        </li>
+                      )}
+                      <li class="underline">{course.title}</li>
+                    </ul>
+                  </div>
+                  <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>
+
                 <div
                   id="document"
                   class="markdown-body"
diff --git a/routes/group/[slug].tsx b/routes/group/[slug].tsx
index 16fc761..d166e57 100644
--- a/routes/group/[slug].tsx
+++ b/routes/group/[slug].tsx
@@ -1,4 +1,4 @@
-import { CourseGroup } from "../../utils/types.ts";
+import { Course, CourseGroup } from "../../utils/types.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
@@ -13,10 +13,25 @@ populateCache();
 // TODO - FIX TYPES
 export const handler: Handlers<CourseGroup> = {
   GET(_req, ctx) {
-    const foundCourseGroup = cache.merged.find((c) => {
-      return "courses" in c && c.courses.length > 0 &&
-        c.order === parseInt(ctx.params.slug, 10);
-    });
+    let foundCourseGroup: CourseGroup | Course | undefined = undefined;
+    const toFind = isNaN(parseInt(ctx.params.slug))
+      ? decodeURIComponent(ctx.params.slug)
+      : parseInt(ctx.params.slug);
+
+    console.log("toFind", toFind);
+    if (typeof toFind === "number") {
+      foundCourseGroup = cache.merged.find((c) => {
+        return "courses" in c && c.courses.length > 0 &&
+          c.order === toFind;
+      });
+    } else {
+      console.log("label", toFind);
+      foundCourseGroup = cache.merged.find((c) => {
+        return "courses" in c && c.courses.length > 0 &&
+          c.label === toFind;
+      });
+    }
+
     if (!foundCourseGroup) return ctx.renderNotFound();
     return ctx.render(foundCourseGroup as CourseGroup);
   },
diff --git a/routes/index.tsx b/routes/index.tsx
index 425601a..e2dd586 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -41,7 +41,7 @@ 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-2">
+        <section class="flex flex-col gap-4">
           {merged.map((course, index) => {
             // Group of courses
             if ("courses" in course) {
@@ -63,7 +63,7 @@ export default function BlogIndexPage(
             } else {
               // Single course
               return (
-                <div class="" key={course.slug}>
+                <div key={course.slug}>
                   <CourseCard course={course} />
                 </div>
               );
diff --git a/utils/course.ts b/utils/course.ts
index 41c0ea2..8eb4f43 100644
--- a/utils/course.ts
+++ b/utils/course.ts
@@ -21,7 +21,7 @@ export async function getGroupOrder(
 
 export async function getCourse(
   slug: string,
-): Promise<Course | null> {
+): Promise<Course> {
   const text = await Deno.readTextFile(join("./courses", `${slug}.md`));
   const { attrs, body } = extract(text);
   const courseAttrs = attrs as CourseAttributes;
@@ -35,6 +35,14 @@ export async function getCourse(
   return course;
 }
 
+export async function getJson(
+  slug: string,
+): Promise<string> {
+  const text = await Deno.readTextFile(join("./courses", `${slug}/_data.json`));
+  const json: { label: string } = JSON.parse(text);
+  return json.label;
+}
+
 export async function getCourses(
   cache: { merged: (Course | CourseGroup)[] } = { merged: [] },
 ): Promise<
