diff --git a/app/[locale]/dashboard/courses/page.jsx b/app/[locale]/dashboard/courses/page.jsx
index 3b1c7e2e..6f3cddcb 100644
--- a/app/[locale]/dashboard/courses/page.jsx
+++ b/app/[locale]/dashboard/courses/page.jsx
@@ -62,9 +62,11 @@ const CoursesPageContent = () => {
         setCourses(response.bookmarks || []);
       } else {
         const response = await fetchCourses();
+        if (!response) throw new Error("No data returned");
         setCourses(response);
       }
-    } catch (error) {
+    } catch (err) {
+      console.error("[CoursesPage] Failed to load courses:", err);
       setError(true);
     } finally {
       setLoading(false);
diff --git a/app/dashboard/courses/categories/page.jsx b/app/dashboard/courses/categories/page.jsx
new file mode 100644
index 00000000..d1514257
--- /dev/null
+++ b/app/dashboard/courses/categories/page.jsx
@@ -0,0 +1,182 @@
+"use client";
+import { useEffect, useState, useMemo } from "react";
+import Link from "next/link";
+import { fetchCourses } from "@/lib/actions/courses/fetch-courses";
+import CourseCardSkeleton from "@/components/atoms/skeletons/CourseCardSkeleton";
+import NetworkErrorComp from "@/components/molecules/errors/NetworkError";
+import {
+  CATEGORY_GROUPS,
+  CATEGORIES,
+  getCategoryCounts,
+} from "@/lib/categories";
+import { BookOpen, ArrowRight, LayoutGrid } from "lucide-react";
+
+export default function CategoryHubPage() {
+  const [courses, setCourses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const loadCourses = async () => {
+    setLoading(true);
+    setError(false);
+    try {
+      const data = await fetchCourses();
+      if (!data) throw new Error("No data returned");
+      setCourses(data);
+    } catch (err) {
+      console.error("[CategoryHub] Failed to load courses:", err);
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadCourses();
+  }, []);
+
+  // Derive counts from the fetched course list
+  const counts = useMemo(() => getCategoryCounts(courses), [courses]);
+
+  const totalCourses = courses.length;
+
+  if (error) {
+    return (
+      <NetworkErrorComp
+        errMsg="Failed to load course categories, please try again."
+        reset={loadCourses}
+      />
+    );
+  }
+
+  return (
+    <div className="bg-muted min-h-full w-full">
+      {/* ── Hero header ── */}
+      <div className="bg-gradient-to-br from-accent via-green-600 to-highlight px-6 py-10 text-white">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center gap-3 mb-3">
+            <LayoutGrid className="w-8 h-8 opacity-90" />
+            <h1 className="text-3xl md:text-4xl font-bold">
+              Course Categories
+            </h1>
+          </div>
+          <p className="text-green-50 text-base md:text-lg max-w-xl">
+            Browse authentic Islamic knowledge across{" "}
+            {CATEGORIES.length} categories grouped into{" "}
+            {CATEGORY_GROUPS.length} disciplines.
+          </p>
+          {!loading && (
+            <p className="mt-2 text-green-100 text-sm">
+              {totalCourses} course{totalCourses !== 1 ? "s" : ""} available
+            </p>
+          )}
+          <div className="mt-5">
+            <Link
+              href="/dashboard/courses"
+              className="inline-flex items-center gap-2 bg-white text-accent font-semibold px-5 py-2.5 rounded-full text-sm hover:bg-green-50 transition-colors shadow"
+            >
+              <BookOpen className="w-4 h-4" />
+              Browse All Courses
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* ── Loading skeletons ── */}
+      {loading ? (
+        <div className="p-6 max-w-6xl mx-auto space-y-10">
+          {[...Array(3)].map((_, gi) => (
+            <div key={gi}>
+              <div className="h-6 w-48 bg-gray-200 rounded animate-pulse mb-4" />
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                {[...Array(3)].map((_, ci) => (
+                  <CourseCardSkeleton key={ci} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        /* ── Category groups ── */
+        <div className="p-6 max-w-6xl mx-auto space-y-10">
+          {CATEGORY_GROUPS.map((group) => {
+            const groupCategories = CATEGORIES.filter(
+              (c) => c.group === group
+            );
+            return (
+              <section key={group}>
+                <h2 className="text-xl md:text-2xl font-bold mb-4 text-foreground border-b border-border pb-2">
+                  {group}
+                </h2>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                  {groupCategories.map((cat) => {
+                    const count = counts[cat.slug] || 0;
+                    const isEmpty = count === 0;
+                    return (
+                      <Link
+                        key={cat.slug}
+                        href={`/dashboard/courses/category/${cat.slug}`}
+                        className={`group flex flex-col rounded-2xl p-5 border transition-all ${
+                          isEmpty
+                            ? "bg-muted/40 border-border opacity-60 hover:opacity-80"
+                            : "bg-background border-border hover:border-accent hover:shadow-lg hover:scale-[1.02]"
+                        }`}
+                        aria-label={`${cat.label} — ${count} course${count !== 1 ? "s" : ""}`}
+                      >
+                        {/* Icon + count */}
+                        <div className="flex items-start justify-between mb-3">
+                          <span
+                            className="text-3xl"
+                            role="img"
+                            aria-label={cat.label}
+                          >
+                            {cat.icon}
+                          </span>
+                          <span
+                            className={`text-xs font-bold px-2.5 py-1 rounded-full ${
+                              isEmpty
+                                ? "bg-muted text-muted-foreground"
+                                : "bg-accent/10 text-accent"
+                            }`}
+                          >
+                            {count} course{count !== 1 ? "s" : ""}
+                          </span>
+                        </div>
+
+                        {/* Label + description */}
+                        <h3
+                          className={`font-semibold text-base leading-tight mb-1 transition-colors ${
+                            isEmpty
+                              ? "text-muted-foreground"
+                              : "text-foreground group-hover:text-accent"
+                          }`}
+                        >
+                          {cat.label}
+                        </h3>
+                        <p className="text-sm text-muted-foreground line-clamp-2 flex-1">
+                          {cat.description}
+                        </p>
+
+                        {/* CTA row */}
+                        <div
+                          className={`mt-4 flex items-center gap-1 text-xs font-semibold ${
+                            isEmpty
+                              ? "text-muted-foreground"
+                              : "text-accent group-hover:gap-2 transition-all"
+                          }`}
+                        >
+                          {isEmpty ? "No courses yet" : "View courses"}
+                          <ArrowRight className="w-3 h-3" />
+                        </div>
+                      </Link>
+                    );
+                  })}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/dashboard/courses/category/[slug]/page.jsx b/app/dashboard/courses/category/[slug]/page.jsx
new file mode 100644
index 00000000..1786438c
--- /dev/null
+++ b/app/dashboard/courses/category/[slug]/page.jsx
@@ -0,0 +1,249 @@
+"use client";
+import { useEffect, useState, useMemo } from "react";
+import { use } from "react";
+import Link from "next/link";
+import { fetchCourses } from "@/lib/actions/courses/fetch-courses";
+import CourseCard from "@/components/molecules/dashboard/cards/courseCard";
+import CourseCardSkeleton from "@/components/atoms/skeletons/CourseCardSkeleton";
+import NetworkErrorComp from "@/components/molecules/errors/NetworkError";
+import NotFoundComp from "@/components/molecules/errors/NotFound";
+import Modal from "@/components/molecules/Modal";
+import CreateCourseForm from "@/components/organisms/create/course-create-form";
+import { getCategoryBySlug, resolveSlug } from "@/lib/categories";
+import { getAverageRating } from "@/hooks/getAverageRating";
+import { ArrowLeft, BookOpen, Plus } from "lucide-react";
+
+// Sort options
+const SORT_OPTIONS = [
+  { value: "newest", label: "Newest" },
+  { value: "price-asc", label: "Price: Low to High" },
+  { value: "price-desc", label: "Price: High to Low" },
+  { value: "rating", label: "Top Rated" },
+];
+
+function sortCourses(courses, sort) {
+  const sorted = [...courses];
+  switch (sort) {
+    case "price-asc":
+      return sorted.sort((a, b) => (a.price || 0) - (b.price || 0));
+    case "price-desc":
+      return sorted.sort((a, b) => (b.price || 0) - (a.price || 0));
+    case "rating":
+      return sorted.sort(
+        (a, b) =>
+          getAverageRating(b.reviews || []) -
+          getAverageRating(a.reviews || [])
+      );
+    case "newest":
+    default:
+      return sorted.sort(
+        (a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
+      );
+  }
+}
+
+export default function CategoryLandingPage({ params }) {
+  // Unwrap params using React.use() for Next.js 15+
+  const { slug } = use(params);
+
+  const category = getCategoryBySlug(slug);
+
+  const [allCourses, setAllCourses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [sort, setSort] = useState("newest");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const loadCourses = async () => {
+    setLoading(true);
+    setError(false);
+    try {
+      const data = await fetchCourses();
+      if (!data) throw new Error("No data returned");
+      setAllCourses(data);
+    } catch (err) {
+      console.error("[CategoryLanding] Failed to load courses:", err);
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadCourses();
+  }, [slug]);
+
+  // Filter to this category's courses
+  const categoryCourses = useMemo(
+    () =>
+      sortCourses(
+        allCourses.filter((c) => resolveSlug(c.category) === slug),
+        sort
+      ),
+    [allCourses, slug, sort]
+  );
+
+  // Unknown slug → graceful not-found, no crash
+  if (!category) {
+    return (
+      <NotFoundComp
+        errMsg={`No category found for "${slug}". It may have been renamed or doesn't exist yet.`}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <NetworkErrorComp
+        errMsg={`Failed to load courses for ${category.label}. Please try again.`}
+        reset={loadCourses}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className="bg-muted min-h-full w-full">
+        {/* ── Hero header ── */}
+        <div className="bg-gradient-to-br from-accent via-green-600 to-highlight px-6 py-10 text-white">
+          <div className="max-w-5xl mx-auto">
+            {/* Breadcrumb */}
+            <nav className="flex items-center gap-2 text-green-100 text-sm mb-4">
+              <Link
+                href="/dashboard/courses"
+                className="hover:text-white transition-colors flex items-center gap-1"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Courses
+              </Link>
+              <span>/</span>
+              <Link
+                href="/dashboard/courses/categories"
+                className="hover:text-white transition-colors"
+              >
+                Categories
+              </Link>
+              <span>/</span>
+              <span className="text-white font-medium">{category.label}</span>
+            </nav>
+
+            {/* Icon + title */}
+            <div className="flex items-start gap-4">
+              <span className="text-5xl" role="img" aria-label={category.label}>
+                {category.icon}
+              </span>
+              <div>
+                <h1 className="text-3xl md:text-4xl font-bold leading-tight">
+                  {category.label}
+                </h1>
+                <p className="mt-2 text-green-100 text-base md:text-lg max-w-xl">
+                  {category.description}
+                </p>
+                {!loading && (
+                  <p className="mt-1 text-green-200 text-sm">
+                    {categoryCourses.length} course
+                    {categoryCourses.length !== 1 ? "s" : ""}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Group badge */}
+            <div className="mt-4">
+              <span className="inline-block bg-white/20 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                {category.group}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── Controls ── */}
+        <div className="px-6 py-4 max-w-5xl mx-auto flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <BookOpen className="w-5 h-5 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              {loading ? "Loading…" : `${categoryCourses.length} course${categoryCourses.length !== 1 ? "s" : ""}`}
+            </span>
+          </div>
+          <div className="flex items-center gap-3">
+            {/* Sort */}
+            <select
+              value={sort}
+              onChange={(e) => setSort(e.target.value)}
+              className="rounded-full border border-input bg-background px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
+              aria-label="Sort courses"
+            >
+              {SORT_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+            {/* Create course CTA */}
+            <button
+              onClick={() => setModalOpen(true)}
+              className="inline-flex items-center gap-1 rounded-full bg-accent text-white px-4 py-2 text-sm font-semibold hover:bg-accent/90 transition-colors"
+            >
+              <Plus className="w-4 h-4" />
+              Add Course
+            </button>
+          </div>
+        </div>
+
+        {/* ── Course grid ── */}
+        <div className="px-6 pb-10 max-w-5xl mx-auto">
+          {loading ? (
+            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+              {[...Array(6)].map((_, idx) => (
+                <CourseCardSkeleton key={`skeleton-${idx}`} />
+              ))}
+            </div>
+          ) : categoryCourses.length === 0 ? (
+            /* ── Empty state ── */
+            <div className="flex flex-col items-center justify-center py-24 text-center">
+              <span className="text-7xl mb-6" role="img" aria-label="empty">
+                {category.icon}
+              </span>
+              <h2 className="text-2xl font-bold text-foreground mb-3">
+                No courses yet in {category.label}
+              </h2>
+              <p className="text-muted-foreground max-w-sm mb-6">
+                Be the first educator to share knowledge in this discipline. The
+                Ummah is waiting for you!
+              </p>
+              <button
+                onClick={() => setModalOpen(true)}
+                className="inline-flex items-center gap-2 rounded-full bg-accent text-white px-6 py-3 font-semibold hover:bg-accent/90 transition-colors shadow"
+              >
+                <Plus className="w-5 h-5" />
+                Create the first course
+              </button>
+              <Link
+                href="/dashboard/courses/categories"
+                className="mt-4 text-sm text-accent underline underline-offset-2 hover:text-accent/80 transition-colors"
+              >
+                Browse other categories
+              </Link>
+            </div>
+          ) : (
+            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+              {categoryCourses.map((course) => (
+                <CourseCard key={course._id} course={course} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Course modal */}
+      <Modal
+        title="Create Course"
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        className="max-w-md w-full"
+      >
+        <CreateCourseForm />
+      </Modal>
+    </>
+  );
+}
diff --git a/app/dashboard/layout.jsx b/app/dashboard/layout.jsx
new file mode 100644
index 00000000..c3524f09
--- /dev/null
+++ b/app/dashboard/layout.jsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
+import { SidebarLeft } from "@/components/organisms/dashboard/sidebar-left";
+import NavHeader from "@/components/molecules/dashboard/nav-header";
+
+export default function DashboardLayout({ children }) {
+  return (
+    <SidebarProvider>
+      <SidebarLeft />
+      <SidebarInset>
+        <NavHeader />
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
diff --git a/app/layout.js b/app/layout.js
new file mode 100644
index 00000000..ee5f8b66
--- /dev/null
+++ b/app/layout.js
@@ -0,0 +1,14 @@
+import "../styles/globals.css";
+
+export const metadata = {
+  title: "Deen Bridge",
+  description: "Islamic education platform",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/components/molecules/dashboard/cards/courseCard.jsx b/components/molecules/dashboard/cards/courseCard.jsx
index 03fd08bd..505ce1ec 100644
--- a/components/molecules/dashboard/cards/courseCard.jsx
+++ b/components/molecules/dashboard/cards/courseCard.jsx
@@ -1,4 +1,5 @@
 import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
 import Button from "@/components/atoms/form/Button";
 import Link from "next/link";
 import { Ellipsis, CheckCircle } from "lucide-react";
@@ -7,7 +8,7 @@ import Image from "next/image";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useBookmark } from "@/hooks/useBookmark";
 import BookmarkButton from "@/components/atoms/BookmarkButton";
-import { resolveCategorySlug } from "@/lib/categories";
+import { resolveSlug } from "@/lib/categories";
 import { cn } from "@/lib/utils";
 import {
   poppins_400,
@@ -39,6 +40,12 @@ const CourseCard = ({ course, onBookmarkChange, initialIsBookmarked, progress })
     e.stopPropagation();
     await toggle();
   };
+
+  // Resolve the stored category string to a known slug.
+  // Unknown / legacy values get slug=null -> fallback to decorative badge only.
+  const categorySlug = resolveSlug(course.category);
+  const categoryLabel = course.category || "General";
+
   return (
     <div className="group relative flex flex-col overflow-hidden rounded-2xl border border-accent/10 bg-surface-raised shadow-sm transition-all hover:-translate-y-0.5 hover:border-secondary/30 hover:shadow-md">
       {/* Image */}
@@ -52,19 +59,22 @@ const CourseCard = ({ course, onBookmarkChange, initialIsBookmarked, progress })
         />
         <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/70 to-transparent" />
 
-        {/* Category  */}
-        <div className="absolute left-3 right-3 top-3 z-20 flex justify-between">
-          <Link
-            href={`/dashboard/courses/category/${resolveCategorySlug(
-              course?.category
-            )}`}
-            className={cn(
-              poppins_600,
-              "rounded-full border border-accent/15 bg-surface-raised/90 px-3 py-1 text-xs uppercase tracking-wider text-ink shadow"
-            )}
-          >
-            {course.category || "General"}
-          </Link>
+        {/* Category badge — links to category landing page when slug is known */}
+        <div className="absolute top-3 left-3 right-3 z-20 flex justify-between">
+          {categorySlug ? (
+            <Link
+              href={`/dashboard/courses/category/${categorySlug}`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Badge className="bg-white/80 text-accent font-bold px-3 py-1 rounded-full shadow border-0 text-xs uppercase tracking-wider hover:bg-white transition-colors cursor-pointer">
+                {categoryLabel}
+              </Badge>
+            </Link>
+          ) : (
+            <Badge className="bg-white/80 text-accent font-bold px-3 py-1 rounded-full shadow border-0 text-xs uppercase tracking-wider">
+              {categoryLabel}
+            </Badge>
+          )}
           {user?._id === course?.createdBy?._id ? (
             <span
               className={cn(
diff --git a/lib/categories.js b/lib/categories.js
index 394439cd..78806658 100644
--- a/lib/categories.js
+++ b/lib/categories.js
@@ -8,7 +8,7 @@
 // The taxonomy mirrors the values educators pick in the create form
 // (islamicCategories in lib/data.js). Stored courses may contain legacy or
 // free-text values that do not match a known slug; those are resolved through
-// resolveCategory() into the FALLBACK bucket instead of crashing.
+// resolveCategorySlug() into the FALLBACK bucket instead of crashing.
 
 import {
   Archive,
@@ -104,7 +104,7 @@ export const CATEGORY_GROUPS = [
       },
       {
         slug: "seerah",
-        label: "Seerah (Life of the Prophet ﷺ)",
+        label: "Seerah (Life of the Prophet)",
         shortLabel: "Seerah",
         description:
           "The life, character, and mission of Prophet Muhammad (peace be upon him).",
@@ -376,6 +376,9 @@ export const ISLAMIC_CATEGORIES = CATEGORY_GROUPS.flatMap((group) =>
   }))
 );
 
+// Alias for backward compatibility — some pages import CATEGORIES directly.
+export const CATEGORIES = ISLAMIC_CATEGORIES;
+
 export const CATEGORY_MAP = Object.fromEntries(
   ISLAMIC_CATEGORIES.map((category) => [category.slug, category])
 );
@@ -426,10 +429,44 @@ export function resolveCategorySlug(value) {
   return FALLBACK_SLUG;
 }
 
+/**
+ * Resolve a raw category string to a known slug or null.
+ * Returns null (not FALLBACK_SLUG) when no match is found, so callers can
+ * distinguish "no match" from "matched the fallback".
+ *
+ * @param {string | undefined | null} raw
+ * @returns {string | null}
+ */
+export function resolveSlug(raw) {
+  if (!raw) return null;
+  const normalised = raw.toLowerCase().trim();
+  if (!normalised) return null;
+
+  // Exact slug match
+  if (Object.hasOwn(CATEGORY_MAP, normalised)) return normalised;
+  // Exact label match
+  const byLabel = ISLAMIC_CATEGORIES.find(
+    (c) => c.label.toLowerCase().trim() === normalised
+  );
+  if (byLabel) return byLabel.slug;
+
+  // Partial label match — only return if EXACTLY ONE match (unambiguous)
+  const partialMatches = ISLAMIC_CATEGORIES.filter(
+    (c) =>
+      c.label.toLowerCase().includes(normalised) ||
+      normalised.includes(c.label.toLowerCase())
+  );
+  if (partialMatches.length === 1) return partialMatches[0].slug;
+
+  // Unknown value — log and return null
+  console.warn(`[resolveSlug] Unknown category value: "${raw}"`);
+  return null;
+}
+
 export function getCategoryBySlug(slug) {
   if (!slug) return null;
   if (slug === FALLBACK_SLUG) return FALLBACK_CATEGORY;
-  return CATEGORY_MAP[slug] || null;
+  return Object.hasOwn(CATEGORY_MAP, slug) ? CATEGORY_MAP[slug] : null;
 }
 
 export function getCategoryLabel(slug) {
@@ -437,6 +474,19 @@ export function getCategoryLabel(slug) {
   return category ? category.label : "General";
 }
 
+/**
+ * Get categories grouped by their parent group, as an array of objects.
+ * Useful for building grouped UIs (ComboBox, category hub grid).
+ *
+ * @returns {{ group: string, categories: Category[] }[]}
+ */
+export function getGroupedCategories() {
+  return CATEGORY_GROUPS.map((group) => ({
+    group: group.label,
+    categories: group.categories,
+  }));
+}
+
 // Course list -> { slug: count }. Empty / legacy / free-text values count
 // toward the fallback bucket.
 export function getCategoryCounts(courses) {