diff --git a/src/components/generic/AddBlockMenu.jsx b/src/components/generic/AddBlockMenu.jsx
new file mode 100644
index 0000000..e57ae86
--- /dev/null
+++ b/src/components/generic/AddBlockMenu.jsx
@@ -0,0 +1,75 @@
+// components/generic/CMS/AddBlockMenu.jsx
+
+import { Plus, Type, Image, ImagePlay, Video, VideoIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const BLOCK_TYPES = [
+    {
+        type:        "text",
+        label:       "Text",
+        description: "A rich text block",
+        icon:        <Type className="h-4 w-4" />,
+    },
+    {
+        type:        "image",
+        label:       "Image",
+        description: "A single image",
+        icon:        <Image className="h-4 w-4" />,
+    },
+    {
+        type:        "text-image",
+        label:       "Text + Image",
+        description: "Text beside an image",
+        icon:        <ImagePlay className="h-4 w-4" />,
+    },
+    {
+        type:        "video",
+        label:       "Video",
+        description: "A single video",
+        icon:        <VideoIcon className="h-4 w-4" />,
+    },
+    {
+        type:        "text-video",
+        label:       "Text + Video",
+        description: "Text beside a video",
+        icon:        <Video className="h-4 w-4" />,
+    },
+];
+
+export function AddBlockMenu({ onAdd }) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button type="button" variant="outline" className="w-full border-dashed gap-2">
+                    <Plus className="h-4 w-4" />
+                    Add Block
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" className="w-56">
+                <DropdownMenuLabel>Choose a block type</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {BLOCK_TYPES.map(({ type, label, description, icon }) => (
+                    <DropdownMenuItem
+                        key={type}
+                        onClick={() => onAdd(type)}
+                        className="flex items-start gap-3 py-2 cursor-pointer"
+                    >
+                        <span className="mt-0.5 text-muted-foreground">{icon}</span>
+                        <div className="flex flex-col">
+                            <span className="text-sm font-medium">{label}</span>
+                            <span className="text-xs text-muted-foreground">{description}</span>
+                        </div>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
\ No newline at end of file
diff --git a/src/components/generic/AssetPickerSheet.jsx b/src/components/generic/AssetPickerSheet.jsx
new file mode 100644
index 0000000..1fe91b4
--- /dev/null
+++ b/src/components/generic/AssetPickerSheet.jsx
@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { Search, CheckCircle2 } from "lucide-react";
+
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetDescription,
+} from "@/components/ui/sheet";
+import { Input }   from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge }   from "@/components/ui/badge";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+
+// ─── Empty ────────────────────────────────────────────────────────────────────
+
+function EmptyState({ fileType }) {
+    return (
+        <div className="flex flex-col items-center justify-center h-48 gap-2">
+            <p className="text-sm text-muted-foreground">
+                No {fileType} assets found.
+            </p>
+        </div>
+    );
+}
+
+// ─── Asset Card ───────────────────────────────────────────────────────────────
+
+function AssetCard({ asset, selected, onSelect }) {
+    const thumb = asset.thumbnail_url ?? asset.file_url;
+
+    return (
+        <button
+            type="button"
+            onClick={() => onSelect(asset)}
+            className={[
+                "relative rounded-lg border-2 overflow-hidden transition-all text-left w-full",
+                "hover:border-primary/60 hover:shadow-sm",
+                selected
+                    ? "border-primary ring-2 ring-primary/20"
+                    : "border-border",
+            ].join(" ")}
+        >
+            {/* Thumbnail */}
+            <div className="aspect-video bg-muted w-full overflow-hidden">
+                {thumb ? (
+                    <img
+                        src={thumb}
+                        alt={asset.display_name}
+                        className="w-full h-full object-cover"
+                    />
+                ) : (
+                    <div className="w-full h-full flex items-center justify-center">
+                        <span className="text-xs text-muted-foreground">No preview</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Name */}
+            <div className="p-2">
+                <p className="text-xs font-medium truncate">{asset.display_name}</p>
+            </div>
+
+            {/* Selected checkmark */}
+            {selected && (
+                <div className="absolute top-1.5 right-1.5">
+                    <CheckCircle2 className="h-5 w-5 text-primary fill-white" />
+                </div>
+            )}
+        </button>
+    );
+}
+
+// ─── Sheet ────────────────────────────────────────────────────────────────────
+
+export function AssetPickerSheet({ open, onOpenChange, fileType, onSelect }) {
+    const { fetchAssets, assets, pagination, loading } = useAssets();
+    const [search,   setSearch]   = useState("");
+    const [page,     setPage]     = useState(1);
+    const [selected, setSelected] = useState(null);
+
+    const LIMIT = 12;
+
+    // ── Fetch on open / search / page change ──────────────────────────────────
+    useEffect(() => {
+        if (!open) return;
+        fetchAssets({
+            page,
+            limit: LIMIT,
+            filters: [
+                ...(fileType ? [{ id: "file_type", value: [fileType] }] : []),
+                ...(search   ? [{ id: "display_name", value: [search] }] : []),
+            ],
+        });
+    }, [open, page, search, fileType]);
+
+    // ── Reset on close ────────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!open) {
+            setSearch("");
+            setPage(1);
+            setSelected(null);
+        }
+    }, [open]);
+
+    const handleSelect = (asset) => {
+        setSelected(asset.asset_id);
+        onSelect(asset);
+        onOpenChange(false);
+    };
+
+    const label = fileType
+        ? `${fileType.charAt(0).toUpperCase()}${fileType.slice(1)}s`
+        : "Assets";
+
+    return (
+        <Sheet open={open} onOpenChange={onOpenChange}>
+            <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+
+                {/* ── Header ── */}
+                <SheetHeader className="px-6 pt-6 pb-4 border-b">
+                    <SheetTitle>Select {label}</SheetTitle>
+                    <SheetDescription>
+                        Click an asset to attach it.
+                    </SheetDescription>
+                </SheetHeader>
+
+                {/* ── Search ── */}
+                <div className="px-6 py-3 border-b">
+                    <div className="relative">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                        <Input
+                            placeholder={`Search ${label.toLowerCase()}…`}
+                            value={search}
+                            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                            className="pl-9"
+                        />
+                    </div>
+                </div>
+
+                {/* ── Grid ── */}
+                <div className="flex-1 overflow-y-auto px-6 py-4">
+                    {loading ? (
+                        <div className="flex items-center justify-center h-48">
+                            <Spinner className="h-5 w-5" />
+                        </div>
+                    ) : !assets.length ? (
+                        <EmptyState fileType={fileType ?? "asset"} />
+                    ) : (
+                        <div className="grid grid-cols-2 gap-3">
+                            {assets.map((asset) => (
+                                <AssetCard
+                                    key={asset.asset_id}
+                                    asset={asset}
+                                    selected={selected === asset.asset_id}
+                                    onSelect={handleSelect}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {/* ── Pagination ── */}
+                {pagination.totalPages > 1 && (
+                    <div className="flex items-center justify-between px-6 py-3 border-t text-sm">
+                        <span className="text-muted-foreground">
+                            Page {pagination.page} of {pagination.totalPages}
+                        </span>
+                        <div className="flex gap-2">
+                            <button
+                                type="button"
+                                disabled={!pagination.hasPrevPage || loading}
+                                onClick={() => setPage((p) => p - 1)}
+                                className="px-3 py-1 rounded border text-xs disabled:opacity-40 hover:bg-muted transition-colors"
+                            >
+                                Prev
+                            </button>
+                            <button
+                                type="button"
+                                disabled={!pagination.hasNextPage || loading}
+                                onClick={() => setPage((p) => p + 1)}
+                                className="px-3 py-1 rounded border text-xs disabled:opacity-40 hover:bg-muted transition-colors"
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+            </SheetContent>
+        </Sheet>
+    );
+}
\ No newline at end of file
diff --git a/src/components/generic/BlockList.jsx b/src/components/generic/BlockList.jsx
new file mode 100644
index 0000000..7e1fe54
--- /dev/null
+++ b/src/components/generic/BlockList.jsx
@@ -0,0 +1,66 @@
+// components/generic/CMS/BlockList.jsx
+
+import { BlockWrapper } from "./BlockWrapper";
+import { TextBlock } from "./Blocks/TextBlock";
+import { ImageBlock } from "./Blocks/ImageBlock";
+import { TextImageBlock } from "./Blocks/TextImageBlock";
+import { VideoBlock } from "./Blocks/VideoBlock";
+import { TextVideoBlock } from "./Blocks/TextVideoBlock";
+
+// ─── Block renderer ───────────────────────────────────────────────────────────
+
+function BlockContent({ type, content, onUpdate }) {
+    switch (type) {
+        case "text":       return <TextBlock       content={content} onUpdate={onUpdate} />;
+        case "image":      return <ImageBlock      content={content} onUpdate={onUpdate} />;
+        case "text-image": return <TextImageBlock  content={content} onUpdate={onUpdate} />;
+        case "video":      return <VideoBlock      content={content} onUpdate={onUpdate} />;
+        case "text-video": return <TextVideoBlock  content={content} onUpdate={onUpdate} />;
+        default:           return <p className="text-sm text-muted-foreground">Unknown block type.</p>;
+    }
+}
+
+// ─── Default content per type ─────────────────────────────────────────────────
+
+export const DEFAULT_CONTENT = {
+    "text":       { body: "" },
+    "image":      { asset_id: null, url: "", alt: "" },
+    "text-image": { body: "", asset_id: null, url: "", alt: "", image_position: "right" },
+    "video":      { asset_id: null, url: "", thumbnail_url: "" },
+    "text-video": { body: "", asset_id: null, url: "", thumbnail_url: "", video_position: "right" },
+};
+
+// ─── List ─────────────────────────────────────────────────────────────────────
+
+export function BlockList({ blocks, onUpdate, onMove, onDelete }) {
+    if (!blocks.length) {
+        return (
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/20 py-16 gap-2">
+                <p className="text-sm text-muted-foreground">No blocks yet.</p>
+                <p className="text-xs text-muted-foreground">Use the button below to add your first block.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            {blocks.map((block, index) => (
+                <BlockWrapper
+                    key={block.id}
+                    type={block.type}
+                    index={index}
+                    total={blocks.length}
+                    onMoveUp={()     => onMove(block.id, "up")}
+                    onMoveDown={()   => onMove(block.id, "down")}
+                    onDelete={()     => onDelete(block.id)}
+                >
+                    <BlockContent
+                        type={block.type}
+                        content={block.content}
+                        onUpdate={(updated) => onUpdate(block.id, updated)}
+                    />
+                </BlockWrapper>
+            ))}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/generic/BlockWrapper.jsx b/src/components/generic/BlockWrapper.jsx
new file mode 100644
index 0000000..e88925a
--- /dev/null
+++ b/src/components/generic/BlockWrapper.jsx
@@ -0,0 +1,83 @@
+// components/generic/CMS/BlockWrapper.jsx
+
+import { GripVertical, ChevronUp, ChevronDown, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge }  from "@/components/ui/badge";
+
+const BLOCK_LABELS = {
+    "text":       "Text",
+    "image":      "Image",
+    "text-image": "Text + Image",
+    "video":      "Video",
+    "text-video": "Text + Video",
+};
+
+export function BlockWrapper({
+    type,
+    index,
+    total,
+    onMoveUp,
+    onMoveDown,
+    onDelete,
+    children,
+}) {
+    return (
+        <div className="group relative rounded-lg border bg-card transition-shadow hover:shadow-sm">
+
+            {/* ── Top toolbar ── */}
+            <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 rounded-t-lg">
+
+                {/* Left — drag handle + block type */}
+                <div className="flex items-center gap-2">
+                    <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
+                    <Badge variant="secondary" className="text-xs">
+                        {BLOCK_LABELS[type] ?? type}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">
+                        Block {index + 1}
+                    </span>
+                </div>
+
+                {/* Right — move + delete */}
+                <div className="flex items-center gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        disabled={index === 0}
+                        onClick={onMoveUp}
+                    >
+                        <ChevronUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        disabled={index === total - 1}
+                        onClick={onMoveDown}
+                    >
+                        <ChevronDown className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
+                        onClick={onDelete}
+                    >
+                        <Trash2 className="h-4 w-4" />
+                    </Button>
+                </div>
+
+            </div>
+
+            {/* ── Block content ── */}
+            <div className="p-4">
+                {children}
+            </div>
+
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/generic/Blocks/ImageBlock.jsx b/src/components/generic/Blocks/ImageBlock.jsx
new file mode 100644
index 0000000..45038cd
--- /dev/null
+++ b/src/components/generic/Blocks/ImageBlock.jsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ImageIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { AssetPickerSheet } from "../AssetPickerSheet";
+
+
+function MediaPlaceholder({ onClick }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+    >
+      <ImageIcon className="h-8 w-8 text-muted-foreground/50" />
+      <p className="text-sm text-muted-foreground">
+        Click to select an image
+      </p>
+    </button>
+  );
+}
+
+export function ImageBlock({ content, onUpdate }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  return (
+    <div className="space-y-3">
+      <Label>Image</Label>
+
+      {content.url ? (
+        <div
+          className="relative rounded-lg overflow-hidden cursor-pointer group"
+          onClick={() => setPickerOpen(true)}
+        >
+          <img
+            src={content.url}
+            alt={content.alt ?? ""}
+            className="w-full aspect-video object-cover"
+          />
+          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <p className="text-white text-sm font-medium">Change Image</p>
+          </div>
+        </div>
+      ) : (
+        <MediaPlaceholder onClick={() => setPickerOpen(true)} />
+      )}
+
+      {content.url && (
+        <div className="space-y-1.5">
+          <Label>Alt Text</Label>
+          <Input
+            placeholder="Describe the image..."
+            value={content.alt ?? ""}
+            onChange={(e) => onUpdate({ ...content, alt: e.target.value })}
+          />
+        </div>
+      )}
+
+      <AssetPickerSheet
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        fileType="image"
+        onSelect={(asset) => onUpdate({
+          ...content,
+          asset_id: asset.asset_id,
+          url: asset.file_url,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/src/components/generic/Blocks/TextBlock.jsx b/src/components/generic/Blocks/TextBlock.jsx
new file mode 100644
index 0000000..d456cf6
--- /dev/null
+++ b/src/components/generic/Blocks/TextBlock.jsx
@@ -0,0 +1,18 @@
+// components/generic/CMS/blocks/TextBlock.jsx
+
+import { Textarea } from "@/components/ui/textarea";
+import { Label }    from "@/components/ui/label";
+
+export function TextBlock({ content, onUpdate }) {
+    return (
+        <div className="space-y-1.5">
+            <Label>Content</Label>
+            <Textarea
+                placeholder="Enter text content..."
+                rows={4}
+                value={content.body ?? ""}
+                onChange={(e) => onUpdate({ ...content, body: e.target.value })}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/generic/Blocks/TextImageBlock.jsx b/src/components/generic/Blocks/TextImageBlock.jsx
new file mode 100644
index 0000000..ff9c312
--- /dev/null
+++ b/src/components/generic/Blocks/TextImageBlock.jsx
@@ -0,0 +1,111 @@
+// components/generic/CMS/blocks/TextImageBlock.jsx
+
+import { useState } from "react";
+import { ImageIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AssetPickerSheet } from "../AssetPickerSheet";
+
+export function TextImageBlock({ content, onUpdate }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  return (
+    <div className="space-y-4">
+
+      {/* ── Layout ── */}
+      <div className="space-y-1.5 max-w-[200px]">
+        <Label>Image Position</Label>
+        <Select
+          value={content.image_position ?? "right"}
+          onValueChange={(v) => onUpdate({ ...content, image_position: v })}
+        >
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className={[
+        "grid gap-4",
+        "grid-cols-1 md:grid-cols-2",
+      ].join(" ")}>
+
+        {/* ── Text side ── */}
+        <div className="space-y-1.5">
+          <Label>Content</Label>
+          <Textarea
+            placeholder="Enter text content..."
+            rows={5}
+            value={content.body ?? ""}
+            onChange={(e) => onUpdate({ ...content, body: e.target.value })}
+          />
+        </div>
+
+        {/* ── Image side ── */}
+        <div className={[
+          "space-y-1.5",
+          content.image_position === "left" ? "md:order-first" : "",
+        ].join(" ")}>
+          <Label>Image</Label>
+
+          {content.url ? (
+            <div
+              className="relative rounded-lg overflow-hidden cursor-pointer group"
+              onClick={() => setPickerOpen(true)}
+            >
+              <img
+                src={content.url}
+                alt={content.alt ?? ""}
+                className="w-full aspect-video object-cover"
+              />
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <p className="text-white text-sm font-medium">Change Image</p>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPickerOpen(true)}
+              className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+            >
+              <ImageIcon className="h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">Click to select an image</p>
+            </button>
+          )}
+
+          {content.url && (
+            <div className="space-y-1.5">
+              <Label>Alt Text</Label>
+              <Input
+                placeholder="Describe the image..."
+                value={content.alt ?? ""}
+                onChange={(e) => onUpdate({ ...content, alt: e.target.value })}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <AssetPickerSheet
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        fileType="image"
+        onSelect={(asset) => onUpdate({
+          ...content,
+          asset_id: asset.asset_id,
+          url: asset.file_url,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/src/components/generic/Blocks/TextVideoBlock.jsx b/src/components/generic/Blocks/TextVideoBlock.jsx
new file mode 100644
index 0000000..30ff5a0
--- /dev/null
+++ b/src/components/generic/Blocks/TextVideoBlock.jsx
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { VideoIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AssetPickerSheet } from "../AssetPickerSheet";
+
+export function TextVideoBlock({ content, onUpdate }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const thumb = content.thumbnail_url ?? null;
+
+  return (
+    <div className="space-y-4">
+
+      {/* ── Layout ── */}
+      <div className="space-y-1.5 max-w-[200px]">
+        <Label>Video Position</Label>
+        <Select
+          value={content.video_position ?? "right"}
+          onValueChange={(v) => onUpdate({ ...content, video_position: v })}
+        >
+          <SelectTrigger><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+        {/* ── Text side ── */}
+        <div className="space-y-1.5">
+          <Label>Content</Label>
+          <Textarea
+            placeholder="Enter text content..."
+            rows={5}
+            value={content.body ?? ""}
+            onChange={(e) => onUpdate({ ...content, body: e.target.value })}
+          />
+        </div>
+
+        {/* ── Video side ── */}
+        <div className={[
+          "space-y-1.5",
+          content.video_position === "left" ? "md:order-first" : "",
+        ].join(" ")}>
+          <Label>Video</Label>
+
+          {content.url ? (
+            <div
+              className="relative rounded-lg overflow-hidden cursor-pointer group"
+              onClick={() => setPickerOpen(true)}
+            >
+              {thumb ? (
+                <img
+                  src={thumb}
+                  alt="Video thumbnail"
+                  className="w-full aspect-video object-cover"
+                />
+              ) : (
+                <div className="w-full aspect-video bg-muted flex items-center justify-center">
+                  <VideoIcon className="h-10 w-10 text-muted-foreground/50" />
+                </div>
+              )}
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <p className="text-white text-sm font-medium">Change Video</p>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <div className="h-12 w-12 rounded-full bg-black/50 flex items-center justify-center">
+                  <VideoIcon className="h-5 w-5 text-white" />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPickerOpen(true)}
+              className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+            >
+              <VideoIcon className="h-8 w-8 text-muted-foreground/50" />
+              <p className="text-sm text-muted-foreground">Click to select a video</p>
+            </button>
+          )}
+        </div>
+      </div>
+
+      <AssetPickerSheet
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        fileType="video"
+        onSelect={(asset) => onUpdate({
+          ...content,
+          asset_id: asset.asset_id,
+          url: asset.file_url,
+          thumbnail_url: asset.thumbnail_url ?? null,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/src/components/generic/Blocks/VideoBlock.jsx b/src/components/generic/Blocks/VideoBlock.jsx
new file mode 100644
index 0000000..770dd0f
--- /dev/null
+++ b/src/components/generic/Blocks/VideoBlock.jsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { VideoIcon } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { AssetPickerSheet } from "../AssetPickerSheet";
+
+export function VideoBlock({ content, onUpdate }) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const thumb = content.thumbnail_url ?? null;
+
+  return (
+    <div className="space-y-3">
+      <Label>Video</Label>
+
+      {content.url ? (
+        <div
+          className="relative rounded-lg overflow-hidden cursor-pointer group"
+          onClick={() => setPickerOpen(true)}
+        >
+          {thumb ? (
+            <img
+              src={thumb}
+              alt="Video thumbnail"
+              className="w-full aspect-video object-cover"
+            />
+          ) : (
+            <div className="w-full aspect-video bg-muted flex items-center justify-center">
+              <VideoIcon className="h-10 w-10 text-muted-foreground/50" />
+            </div>
+          )}
+          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <p className="text-white text-sm font-medium">Change Video</p>
+          </div>
+          {/* Play icon overlay */}
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="h-12 w-12 rounded-full bg-black/50 flex items-center justify-center">
+              <VideoIcon className="h-5 w-5 text-white" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setPickerOpen(true)}
+          className="w-full aspect-video rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20 transition-colors flex flex-col items-center justify-center gap-2"
+        >
+          <VideoIcon className="h-8 w-8 text-muted-foreground/50" />
+          <p className="text-sm text-muted-foreground">Click to select a video</p>
+        </button>
+      )}
+
+      <AssetPickerSheet
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        fileType="video"
+        onSelect={(asset) => onUpdate({
+          ...content,
+          asset_id: asset.asset_id,
+          url: asset.file_url,
+          thumbnail_url: asset.thumbnail_url ?? null,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/src/contexts/AdminCoursesContext.jsx b/src/contexts/AdminCoursesContext.jsx
new file mode 100644
index 0000000..ae58b63
--- /dev/null
+++ b/src/contexts/AdminCoursesContext.jsx
@@ -0,0 +1,395 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import api from "@/utils/api.util";
+import { toast } from "sonner";
+
+const CoursesContext = createContext(null);
+
+export function useCourses() {
+  const ctx = useContext(CoursesContext);
+  if (!ctx) throw new Error("useCourses must be used within a CoursesProvider");
+  return ctx;
+}
+
+// ─── Initial States ───────────────────────────────────────────────────────────
+
+const PAGINATION_INIT = {
+  page: 1,
+  limit: 10,
+  totalRecords: 0,
+  totalPages: 0,
+  hasPrevPage: false,
+  hasNextPage: false,
+};
+
+const BASE = "/admin/courses";
+
+export function CoursesProvider({ children }) {
+
+  // ─── State ────────────────────────────────────────────────────────────────
+  const [courses, setCourses] = useState([]);
+  const [course, setCourse] = useState(null);
+  const [units, setUnits] = useState([]);
+  const [unit, setUnit] = useState(null);
+  const [lessons, setLessons] = useState([]);
+  const [lesson, setLesson] = useState(null);
+  const [lessonPage, setLessonPage] = useState(null);
+  const [attributes, setAttributes] = useState([]);
+  const [pagination, setPagination] = useState(PAGINATION_INIT);
+  const [loading, setLoading] = useState(false);
+
+  // ─── Request wrapper ──────────────────────────────────────────────────────
+  const request = useCallback(async (fn) => {
+    setLoading(true);
+    try {
+      return await fn();
+    } catch (err) {
+      const message = err?.response?.data?.message ?? "Something went wrong.";
+      toast.error(message);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // =========================================================================
+  // ─── COURSES ─────────────────────────────────────────────────────────────
+  // =========================================================================
+
+  // ─── GET /admin/courses ───────────────────────────────────────────────────
+  const fetchCourses = useCallback(
+    (params = {}) =>
+      request(async () => {
+        const { filters, sort, ...rest } = params;
+        const { data } = await api.get(BASE, {
+          params: {
+            ...rest,
+            ...(filters?.length ? { filters: JSON.stringify(filters) } : {}),
+            ...(sort?.length ? { sort: JSON.stringify(sort) } : {}),
+          },
+        });
+        const final_data = data?.data;
+        setCourses(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        if (final_data?.attributes?.length) setAttributes(final_data.attributes);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── GET /admin/courses/:courseId ─────────────────────────────────────────
+  const fetchCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}`);
+        const result = data?.data?.data ?? null;
+        setCourse(result);
+        setUnits(result?.units ?? []);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── POST /admin/courses ──────────────────────────────────────────────────
+  const createCourse = useCallback(
+    (payload) =>
+      request(async () => {
+        const { data } = await api.post(BASE, payload);
+        const course = data?.data?.data ?? null;
+        if (course) {
+          setCourses((prev) => [course, ...prev]);
+          toast.success("Course created successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── PATCH /admin/courses/:courseId ───────────────────────────────────────
+  const updateCourse = useCallback(
+    (courseId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}`, payload);
+        const course = data?.data?.data ?? null;
+        if (course) {
+          setCourses((prev) => prev.map((c) => (c.course_id === courseId ? course : c)));
+          setCourse(course);
+          toast.success("Course updated successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /admin/courses/:courseId ──────────────────────────────────────
+  const deleteCourse = useCallback(
+    (courseId) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}`);
+        setCourses((prev) => prev.filter((c) => c.course_id !== courseId));
+        setCourse((prev) => (prev?.course_id === courseId ? null : prev));
+        toast.success("Course deleted.");
+        return data;
+      }),
+    [request]
+  );
+
+  // =========================================================================
+  // ─── UNITS ───────────────────────────────────────────────────────────────
+  // =========================================================================
+
+  // ─── GET /admin/courses/:courseId/units ───────────────────────────────────
+  const fetchUnits = useCallback(
+    (courseId, params = {}) =>
+      request(async () => {
+        const { filters, sort, ...rest } = params;
+        const { data } = await api.get(`${BASE}/${courseId}/units`, {
+          params: {
+            ...rest,
+            ...(filters?.length ? { filters: JSON.stringify(filters) } : {}),
+            ...(sort?.length ? { sort: JSON.stringify(sort) } : {}),
+          },
+        });
+        const final_data = data?.data;
+        setUnits(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        if (final_data?.attributes?.length) setAttributes(final_data.attributes);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── GET /admin/courses/:courseId/units/:unitId ───────────────────────────
+  const fetchUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/units/${unitId}`);
+        const result = data?.data?.data ?? null;
+        setUnit(result);
+        setLessons(result?.lessons ?? []);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── POST /admin/courses/:courseId/units ──────────────────────────────────
+  const createUnit = useCallback(
+    (courseId, payload) =>
+      request(async () => {
+        const { data } = await api.post(`${BASE}/${courseId}/units`, payload);
+        const unit = data?.data?.data ?? null;
+        if (unit) {
+          setUnits((prev) => [...prev, unit]);
+          toast.success("Unit created successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── PATCH /admin/courses/:courseId/units/:unitId ─────────────────────────
+  const updateUnit = useCallback(
+    (courseId, unitId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}`, payload);
+        const unit = data?.data?.data ?? null;
+        if (unit) {
+          setUnits((prev) => prev.map((u) => (u.unit_id === unitId ? unit : u)));
+          setUnit(unit);
+          toast.success("Unit updated successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /admin/courses/:courseId/units/:unitId ────────────────────────
+  const deleteUnit = useCallback(
+    (courseId, unitId) =>
+      request(async () => {
+        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}`);
+        setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
+        setUnit((prev) => (prev?.unit_id === unitId ? null : prev));
+        toast.success("Unit deleted.");
+        return data;
+      }),
+    [request]
+  );
+
+  // =========================================================================
+  // ─── LESSONS ─────────────────────────────────────────────────────────────
+  // =========================================================================
+
+  // ─── GET /admin/courses/:courseId/units/:unitId/lessons ───────────────────
+  const fetchLessons = useCallback(
+    (courseId, unitId, params = {}) =>
+      request(async () => {
+        const { filters, sort, ...rest } = params;
+        const { data } = await api.get(`${BASE}/${courseId}/units/${unitId}/lessons`, {
+          params: {
+            ...rest,
+            ...(filters?.length ? { filters: JSON.stringify(filters) } : {}),
+            ...(sort?.length ? { sort: JSON.stringify(sort) } : {}),
+          },
+        });
+        const final_data = data?.data;
+        setLessons(final_data?.data ?? []);
+        setPagination(final_data?.pagination ?? PAGINATION_INIT);
+        if (final_data?.attributes?.length) setAttributes(final_data.attributes);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── GET /admin/courses/:courseId/units/:unitId/lessons/:lessonId ─────────
+  const fetchLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(
+          `${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}`
+        );
+        const result = data?.data?.data ?? null;
+        setLesson(result);
+        setLessonPage(result?.page ?? null);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── POST /admin/courses/:courseId/units/:unitId/lessons ──────────────────
+  const createLesson = useCallback(
+    (courseId, unitId, payload) =>
+      request(async () => {
+        const { data } = await api.post(
+          `${BASE}/${courseId}/units/${unitId}/lessons`,
+          payload
+        );
+        const lesson = data?.data?.data ?? null;
+        if (lesson) {
+          setLessons((prev) => [...prev, lesson]);
+          toast.success("Lesson created successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── PATCH /admin/courses/:courseId/units/:unitId/lessons/:lessonId ───────
+  const updateLesson = useCallback(
+    (courseId, unitId, lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.patch(
+          `${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}`,
+          payload
+        );
+        const lesson = data?.data?.data ?? null;
+        if (lesson) {
+          setLessons((prev) => prev.map((l) => (l.lesson_id === lessonId ? lesson : l)));
+          setLesson(lesson);
+          toast.success("Lesson updated successfully.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── DELETE /admin/courses/:courseId/units/:unitId/lessons/:lessonId ──────
+  const deleteLesson = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.delete(
+          `${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}`
+        );
+        setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
+        setLesson((prev) => (prev?.lesson_id === lessonId ? null : prev));
+        toast.success("Lesson deleted.");
+        return data;
+      }),
+    [request]
+  );
+
+  // =========================================================================
+  // ─── LESSON PAGE ─────────────────────────────────────────────────────────
+  // =========================================================================
+
+  // ─── GET .../lessons/:lessonId/page ───────────────────────────────────────
+  const fetchLessonPage = useCallback(
+    (courseId, unitId, lessonId) =>
+      request(async () => {
+        const { data } = await api.get(
+          `${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}/page`
+        );
+        const page = data?.data?.data ?? null;
+        setLessonPage(page);
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── PUT .../lessons/:lessonId/page ───────────────────────────────────────
+  const saveLessonPage = useCallback(
+    (courseId, unitId, lessonId, payload) =>
+      request(async () => {
+        const { data } = await api.put(
+          `${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}/page`,
+          payload
+        );
+        const page = data?.data?.data ?? null;
+        if (page) {
+          setLessonPage(page);
+          toast.success("Lesson page saved.");
+        }
+        return data;
+      }),
+    [request]
+  );
+
+  // ─── Provider ─────────────────────────────────────────────────────────────
+  return (
+    <CoursesContext.Provider value={{
+      // state
+      courses, course,
+      units, unit,
+      lessons, lesson,
+      lessonPage,
+      attributes,
+      pagination,
+      loading,
+
+      // setters
+      setPagination,
+      setCourse,
+      setUnit,
+      setLesson,
+      setLessonPage,
+
+      // course actions
+      fetchCourses,
+      fetchCourse,
+      createCourse,
+      updateCourse,
+      deleteCourse,
+
+      // unit actions
+      fetchUnits,
+      fetchUnit,
+      createUnit,
+      updateUnit,
+      deleteUnit,
+
+      // lesson actions
+      fetchLessons,
+      fetchLesson,
+      createLesson,
+      updateLesson,
+      deleteLesson,
+
+      // lesson page actions
+      fetchLessonPage,
+      saveLessonPage,
+    }}>
+      {children}
+    </CoursesContext.Provider>
+  );
+}
+
+
diff --git a/src/contexts/provider/AdminProvider.jsx b/src/contexts/provider/AdminProvider.jsx
index e6f6200..b5aa87f 100644
--- a/src/contexts/provider/AdminProvider.jsx
+++ b/src/contexts/provider/AdminProvider.jsx
@@ -3,6 +3,7 @@ import { AssetsProvider } from "../AdminAssetsContext";
 import { AdminDashboardProvider } from "../AdminDashboardContext"
 import { UserProvider } from "../AdminUserContext";
 import { UserGroupProvider } from "../AdminUserGroupContext";
+import { CoursesProvider } from "../AdminCoursesContext";
 
 export const AdminProvider = ({ children }) => {
   return (
@@ -10,10 +11,12 @@ export const AdminProvider = ({ children }) => {
       <AssetsProvider>
         <UserProvider>
           <UserGroupProvider>
-            {children}
+            <CoursesProvider>
+              {children}
+            </CoursesProvider>
           </UserGroupProvider>
         </UserProvider>
       </AssetsProvider>
     </AdminDashboardProvider>
   );
-};
\ No newline at end of file
+};
diff --git a/src/data/adminDashboard.data.jsx b/src/data/adminDashboard.data.jsx
index 640ff01..bf51735 100644
--- a/src/data/adminDashboard.data.jsx
+++ b/src/data/adminDashboard.data.jsx
@@ -1,5 +1,3 @@
-// modules/admin/data/dashboard.data.jsx
-//
 // Centralizes all icon maps, link maps, and chart link maps for the
 // admin dashboard. To add a new section (e.g. Tasks), just add a new
 // export block here and import it in UsersDashboard.jsx.
diff --git a/src/data/adminTiles.data.js b/src/data/adminTiles.data.js
index 8afaaef..25b373b 100644
--- a/src/data/adminTiles.data.js
+++ b/src/data/adminTiles.data.js
@@ -1,6 +1,4 @@
-// data/adminTiles.data.js
-
-import { Users, GitFork, FolderOpen } from "lucide-react";
+import { Users, GitFork, FolderOpen, BookText, ListCheck } from "lucide-react";
 
 export const ADMIN_SECTIONS = [
     {
@@ -22,6 +20,16 @@ export const ADMIN_SECTIONS = [
             { key: "assets", label: "Assets", icon: FolderOpen, link: "/admin/assets" },
         ],
     },
+    {
+        id: "section-courses",
+        tab: "Content Management",
+        title: "Content Management",
+        description: "Manage tasks and courses",
+        tiles: [
+            { key: "assets", label: "Courses", icon: BookText, link: "/admin/courses" },
+            { key: "assets", label: "Tasks", icon: ListCheck, link: "" },
+        ],
+    },
     {
         id: "section-site",
         tab: "Site Content",
diff --git a/src/modules/admin/components/courses/CourseTable.jsx b/src/modules/admin/components/courses/CourseTable.jsx
new file mode 100644
index 0000000..ab38a83
--- /dev/null
+++ b/src/modules/admin/components/courses/CourseTable.jsx
@@ -0,0 +1,119 @@
+import { useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/columns.config";
+import { buildToolbarActions } from "../../config/courses/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/selection.config";
+import { buildRowActions } from "../../config/courses/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function CoursesTable() {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+  const { user } = useAuth();
+
+  const { courses, attributes, pagination, setPagination, loading, fetchCourses, deleteCourse, } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: courses,
+    attributes,
+    filename: `${getTimestamp()}_Courses`,
+    sheetName: "Courses",
+  };
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${row.course_id}`),
+    onEdit: (row) => navigate(`/admin/courses/${row.course_id}/edit`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), []);
+
+  const toolbarActions = buildToolbarActions({
+    fetchCourses,
+    pagination,
+    exportConfig,
+    navigate,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchCourses({ page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Courses"
+        data={courses}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={fetchCourses}
+        onFetchFilterData={() => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
+        recordLabel="course"
+        emptyMessage="No courses found."
+      />
+
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Course"
+        getName={(c) => c?.title}
+        onArchive={(c) => deleteCourse(c?.course_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/src/modules/admin/components/courses/LessonsTable.jsx b/src/modules/admin/components/courses/LessonsTable.jsx
new file mode 100644
index 0000000..de5004f
--- /dev/null
+++ b/src/modules/admin/components/courses/LessonsTable.jsx
@@ -0,0 +1,119 @@
+import { useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/lessons/columns.config";
+import { buildToolbarActions } from "../../config/courses/lessons/toolbar.config";
+import { buildRowActions } from "../../config/courses/lessons/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function LessonsTable({ courseId, unitId }) {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const {
+    lessons, attributes, pagination, setPagination, loading,
+    fetchLessons, deleteLesson,
+  } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: lessons,
+    attributes,
+    filename: `${getTimestamp()}_Lessons`,
+    sheetName: "Lessons",
+  };
+
+  const handleFetch = useCallback(
+    (params) => fetchLessons(courseId, unitId, params),
+    [courseId, unitId]
+  );
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${row.lesson_id}`),
+    onEdit: (row) => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${row.lesson_id}/edit`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [courseId, unitId]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchLessons: (params) => fetchLessons(courseId, unitId, params),
+    pagination,
+    exportConfig,
+    navigate,
+    courseId,
+    unitId,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Lessons"
+        data={lessons}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={() => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        recordLabel="lesson"
+        emptyMessage="No lessons found."
+      />
+
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Lesson"
+        getName={(l) => l?.title}
+        onArchive={(l) => deleteLesson(courseId, unitId, l?.lesson_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/src/modules/admin/components/courses/UnitsTable.jsx b/src/modules/admin/components/courses/UnitsTable.jsx
new file mode 100644
index 0000000..4013619
--- /dev/null
+++ b/src/modules/admin/components/courses/UnitsTable.jsx
@@ -0,0 +1,119 @@
+import { useMemo, useRef, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/units/columns.config";
+import { buildToolbarActions } from "../../config/courses/units/toolbar.config";
+import { buildRowActions } from "../../config/courses/units/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function UnitsTable({ courseId }) {
+  const [archiveTarget, setArchiveTarget] = useState(null);
+
+  const tableRefsRef = useRef({
+    getFilters: () => [],
+    getSort: () => [],
+    resetSelection: () => { },
+    setFilters: () => { },
+  });
+
+  const navigate = useNavigate();
+
+  const {
+    units, attributes, pagination, setPagination, loading,
+    fetchUnits, deleteUnit,
+  } = useCourses();
+
+  const handleRefsReady = (refs) => {
+    tableRefsRef.current = refs;
+  };
+
+  const exportConfig = {
+    allData: units,
+    attributes,
+    filename: `${getTimestamp()}_Units`,
+    sheetName: "Units",
+  };
+
+  const handleFetch = useCallback(
+    (params) => fetchUnits(courseId, params),
+    [courseId]
+  );
+
+  const rowActions = useMemo(() => buildRowActions({
+    onView: (row) => navigate(`/admin/courses/${courseId}/units/${row.unit_id}`),
+    onEdit: (row) => navigate(`/admin/courses/${courseId}/units/${row.unit_id}/edit`),
+    onArchive: (row) => setArchiveTarget(row),
+  }), [courseId]);
+
+  const toolbarActions = buildToolbarActions({
+    fetchUnits: (params) => fetchUnits(courseId, params),
+    pagination,
+    exportConfig,
+    navigate,
+    courseId,
+    getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
+  const columns = useMemo(
+    () => buildDataColumns(attributes, rowActions),
+    [attributes, rowActions]
+  );
+
+  const handleArchiveSuccess = () => {
+    setArchiveTarget(null);
+    tableRefsRef.current.resetSelection?.();
+    fetchUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
+  };
+
+  return (
+    <>
+      <DataTable
+        title="Units"
+        data={units}
+        columns={columns}
+        attributes={attributes}
+        pagination={pagination}
+        setPagination={setPagination}
+        loading={loading}
+        onFetch={handleFetch}
+        onFetchFilterData={() => []}
+        onRefsReady={handleRefsReady}
+        renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+          <FilterSheet
+            open={open}
+            onOpenChange={onOpenChange}
+            column={column}
+            attr={attr}
+            data={data}
+            loading={loading}
+          />
+        )}
+        columnPinning={columnPinning}
+        toolbarActions={toolbarActions}
+        recordLabel="unit"
+        emptyMessage="No units found."
+      />
+
+      <ArchiveDialog
+        open={!!archiveTarget}
+        onOpenChange={(v) => !v && setArchiveTarget(null)}
+        entity={archiveTarget}
+        entityLabel="Unit"
+        getName={(u) => u?.title}
+        onArchive={(u) => deleteUnit(courseId, u?.unit_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+    </>
+  );
+}
diff --git a/src/modules/admin/config/courses/columns.config.jsx b/src/modules/admin/config/courses/columns.config.jsx
new file mode 100644
index 0000000..db75d6a
--- /dev/null
+++ b/src/modules/admin/config/courses/columns.config.jsx
@@ -0,0 +1,38 @@
+import { Badge } from "@/components/ui/badge";
+
+export const columnPinning = {
+  left: ["select", "title"],
+  right: ["actions"],
+};
+
+export function buildDataColumns(attributes, rowActions) {
+  const base = [
+    {
+      accessorKey: "title",
+      header: "Title",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.title}</span>
+      ),
+    },
+    {
+      accessorKey: "description",
+      header: "Description",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm truncate max-w-xs block">
+          {row.original.description ?? "—"}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "order",
+      header: "Order",
+      cell: ({ row }) => (
+        <Badge variant="outline" className="text-xs">
+          {row.original.order}
+        </Badge>
+      ),
+    },
+  ];
+
+  return rowActions ? [...base, rowActions] : base;
+}
diff --git a/src/modules/admin/config/courses/lessons/columns.config.jsx b/src/modules/admin/config/courses/lessons/columns.config.jsx
new file mode 100644
index 0000000..9096867
--- /dev/null
+++ b/src/modules/admin/config/courses/lessons/columns.config.jsx
@@ -0,0 +1,52 @@
+import { Badge } from "@/components/ui/badge";
+
+export const columnPinning = {
+  left: ["select", "title"],
+  right: ["actions"],
+};
+
+export function buildDataColumns(attributes, rowActions) {
+  const base = [
+    {
+      accessorKey: "title",
+      header: "Title",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.title}</span>
+      ),
+    },
+    {
+      accessorKey: "description",
+      header: "Description",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm truncate max-w-xs block">
+          {row.original.description ?? "—"}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "order",
+      header: "Order",
+      cell: ({ row }) => (
+        <Badge variant="outline" className="text-xs">
+          {row.original.order}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: "page",
+      header: "Content",
+      cell: ({ row }) => {
+        const blocks = row.original.page?.blocks ?? [];
+        return blocks.length ? (
+          <Badge variant="secondary" className="text-xs">
+            {blocks.length} block{blocks.length !== 1 ? "s" : ""}
+          </Badge>
+        ) : (
+          <span className="text-xs text-muted-foreground">No content</span>
+        );
+      },
+    },
+  ];
+
+  return rowActions ? [...base, rowActions] : base;
+}
diff --git a/src/modules/admin/config/courses/lessons/rowActions.config.jsx b/src/modules/admin/config/courses/lessons/rowActions.config.jsx
new file mode 100644
index 0000000..48ce7b4
--- /dev/null
+++ b/src/modules/admin/config/courses/lessons/rowActions.config.jsx
@@ -0,0 +1,35 @@
+// config/courses/lessons/rowActions.config.jsx
+
+import { Eye, Pencil, Trash2 } from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onArchive }) {
+  return {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => (
+      <div className="flex items-center justify-end gap-1">
+        <button
+          type="button"
+          onClick={() => onView(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Eye className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onEdit(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onArchive(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+    ),
+  };
+}
diff --git a/src/modules/admin/config/courses/lessons/toolbar.config.jsx b/src/modules/admin/config/courses/lessons/toolbar.config.jsx
new file mode 100644
index 0000000..88db67e
--- /dev/null
+++ b/src/modules/admin/config/courses/lessons/toolbar.config.jsx
@@ -0,0 +1,53 @@
+// config/courses/lessons/toolbar.config.jsx
+
+import { Plus, RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchLessons,
+  pagination,
+  exportConfig,
+  navigate,
+  courseId,
+  unitId,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchLessons({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Lesson",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate(
+        `/admin/courses/${courseId}/units/${unitId}/lessons/create`
+      ),
+    },
+  ];
+}
diff --git a/src/modules/admin/config/courses/rowActions.config.jsx b/src/modules/admin/config/courses/rowActions.config.jsx
new file mode 100644
index 0000000..ddbb004
--- /dev/null
+++ b/src/modules/admin/config/courses/rowActions.config.jsx
@@ -0,0 +1,33 @@
+import { Eye, Pencil, Trash2 } from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onArchive }) {
+  return {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => (
+      <div className="flex items-center justify-end gap-1">
+        <button
+          type="button"
+          onClick={() => onView(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Eye className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onEdit(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onArchive(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+    ),
+  };
+}
diff --git a/src/modules/admin/config/courses/selection.config.jsx b/src/modules/admin/config/courses/selection.config.jsx
new file mode 100644
index 0000000..8be6485
--- /dev/null
+++ b/src/modules/admin/config/courses/selection.config.jsx
@@ -0,0 +1,18 @@
+import { Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildSelectionActions({ exportConfig, getTableInstance }) {
+  return [
+    {
+      key: "export-selected",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      onClick: (rows, table) =>
+        exportTableToExcel({
+          ...exportConfig,
+          selectedRows: rows,
+          tableInstance: table ?? getTableInstance(),
+        }),
+    },
+  ];
+}
diff --git a/src/modules/admin/config/courses/toolbar.config.jsx b/src/modules/admin/config/courses/toolbar.config.jsx
new file mode 100644
index 0000000..96a88f3
--- /dev/null
+++ b/src/modules/admin/config/courses/toolbar.config.jsx
@@ -0,0 +1,47 @@
+import { Plus, RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchCourses,
+  pagination,
+  exportConfig,
+  navigate,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchCourses({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Course",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate("/admin/courses/create"),
+    },
+  ];
+}
diff --git a/src/modules/admin/config/courses/units/columns.config.jsx b/src/modules/admin/config/courses/units/columns.config.jsx
new file mode 100644
index 0000000..c5af0ee
--- /dev/null
+++ b/src/modules/admin/config/courses/units/columns.config.jsx
@@ -0,0 +1,40 @@
+// config/courses/units/columns.config.jsx
+
+import { Badge } from "@/components/ui/badge";
+
+export const columnPinning = {
+  left: ["select", "title"],
+  right: ["actions"],
+};
+
+export function buildDataColumns(attributes, rowActions) {
+  const base = [
+    {
+      accessorKey: "title",
+      header: "Title",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.title}</span>
+      ),
+    },
+    {
+      accessorKey: "description",
+      header: "Description",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm truncate max-w-xs block">
+          {row.original.description ?? "—"}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "order",
+      header: "Order",
+      cell: ({ row }) => (
+        <Badge variant="outline" className="text-xs">
+          {row.original.order}
+        </Badge>
+      ),
+    },
+  ];
+
+  return rowActions ? [...base, rowActions] : base;
+}
diff --git a/src/modules/admin/config/courses/units/rowActions.config.jsx b/src/modules/admin/config/courses/units/rowActions.config.jsx
new file mode 100644
index 0000000..ddbb004
--- /dev/null
+++ b/src/modules/admin/config/courses/units/rowActions.config.jsx
@@ -0,0 +1,33 @@
+import { Eye, Pencil, Trash2 } from "lucide-react";
+
+export function buildRowActions({ onView, onEdit, onArchive }) {
+  return {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => (
+      <div className="flex items-center justify-end gap-1">
+        <button
+          type="button"
+          onClick={() => onView(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Eye className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onEdit(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onArchive(row.original)}
+          className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+    ),
+  };
+}
diff --git a/src/modules/admin/config/courses/units/toolbar.config.jsx b/src/modules/admin/config/courses/units/toolbar.config.jsx
new file mode 100644
index 0000000..efe3b54
--- /dev/null
+++ b/src/modules/admin/config/courses/units/toolbar.config.jsx
@@ -0,0 +1,48 @@
+import { Plus, RefreshCw, Download } from "lucide-react";
+import { exportTableToExcel } from "@/utils/excel.util";
+
+export function buildToolbarActions({
+  fetchUnits,
+  pagination,
+  exportConfig,
+  navigate,
+  courseId,
+  getFilters,
+  getSort,
+  getTableInstance,
+}) {
+  return [
+    {
+      key: "refresh",
+      type: "button",
+      label: "Refresh",
+      icon: <RefreshCw className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => fetchUnits({
+        page: 1,
+        limit: pagination?.limit ?? 10,
+        filters: getFilters(),
+        sort: getSort(),
+      }),
+    },
+    {
+      key: "export",
+      type: "button",
+      label: "Export",
+      icon: <Download className="h-3.5 w-3.5" />,
+      variant: "outline",
+      onClick: () => exportTableToExcel({
+        ...exportConfig,
+        tableInstance: getTableInstance(),
+      }),
+    },
+    {
+      key: "create",
+      type: "button",
+      label: "New Unit",
+      icon: <Plus className="h-3.5 w-3.5" />,
+      variant: "default",
+      onClick: () => navigate(`/admin/courses/${courseId}/units/create`),
+    },
+  ];
+}
diff --git a/src/modules/admin/pages/courses/CourseDetail.jsx b/src/modules/admin/pages/courses/CourseDetail.jsx
new file mode 100644
index 0000000..3de1d7d
--- /dev/null
+++ b/src/modules/admin/pages/courses/CourseDetail.jsx
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Plus } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import UnitsTable from "../../components/courses/UnitsTable";
+
+export default function CourseDetail() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const { fetchCourse, course, loading } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchCourse(courseId);
+      setInitializing(false);
+    })();
+  }, [courseId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "..." },
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6">
+
+          {/* ── Course header ── */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">{course?.title}</h1>
+                {course?.description && (
+                  <p className="text-sm text-muted-foreground">{course.description}</p>
+                )}
+              </div>
+            </div>
+            <Button onClick={() => navigate(`/admin/courses/${courseId}/edit`)}>
+              Edit Course
+            </Button>
+          </div>
+
+          {/* ── Units ── */}
+          <UnitsTable courseId={courseId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/CourseList.jsx b/src/modules/admin/pages/courses/CourseList.jsx
new file mode 100644
index 0000000..3c9adba
--- /dev/null
+++ b/src/modules/admin/pages/courses/CourseList.jsx
@@ -0,0 +1,23 @@
+import { House } from "lucide-react";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import CoursesTable from "../../components/courses/CourseTable";
+
+export default function CourseList() {
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses" },
+  ];
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+        <div className="w-full">
+          <CoursesTable />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/CreateCourse.jsx b/src/modules/admin/pages/courses/CreateCourse.jsx
new file mode 100644
index 0000000..1094c5e
--- /dev/null
+++ b/src/modules/admin/pages/courses/CreateCourse.jsx
@@ -0,0 +1,103 @@
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft } from "lucide-react";
+import { House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function CreateCourse() {
+  const navigate = useNavigate();
+  const { createCourse, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: "Create" },
+  ];
+
+  const onSubmit = async (data) => {
+    const result = await createCourse({ ...data, createdBy: user?.user_id });
+    if (!result) return;
+    navigate("/admin/courses");
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Course</h1>
+              <p className="text-sm text-muted-foreground">Add a new course.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Course title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Course
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/CreateLesson.jsx b/src/modules/admin/pages/courses/CreateLesson.jsx
new file mode 100644
index 0000000..ee8bc4c
--- /dev/null
+++ b/src/modules/admin/pages/courses/CreateLesson.jsx
@@ -0,0 +1,105 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function CreateLesson() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { createLesson, course, unit, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: unit?.title ?? "Unit", to: `/admin/courses/${courseId}/units/${unitId}` },
+    { label: "Create Lesson" },
+  ];
+
+  const onSubmit = async (data) => {
+    const result = await createLesson(courseId, unitId, { ...data, createdBy: user?.user_id });
+    if (!result) return;
+    navigate(`/admin/courses/${courseId}/units/${unitId}`);
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Lesson</h1>
+              <p className="text-sm text-muted-foreground">Add a new lesson to this unit.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Lesson title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Lesson
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/CreateUnit.jsx b/src/modules/admin/pages/courses/CreateUnit.jsx
new file mode 100644
index 0000000..086f34f
--- /dev/null
+++ b/src/modules/admin/pages/courses/CreateUnit.jsx
@@ -0,0 +1,104 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function CreateUnit() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const { createUnit, course, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: "Create Unit" },
+  ];
+
+  const onSubmit = async (data) => {
+    const result = await createUnit(courseId, { ...data, createdBy: user?.user_id });
+    if (!result) return;
+    navigate(`/admin/courses/${courseId}`);
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Create Unit</h1>
+              <p className="text-sm text-muted-foreground">Add a new unit to this course.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Unit title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Create Unit
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/EditCourse.jsx b/src/modules/admin/pages/courses/EditCourse.jsx
new file mode 100644
index 0000000..da50267
--- /dev/null
+++ b/src/modules/admin/pages/courses/EditCourse.jsx
@@ -0,0 +1,118 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditCourse() {
+  const navigate = useNavigate();
+  const { courseId } = useParams();
+  const { fetchCourse, updateCourse, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, reset, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: "Edit" },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchCourse(courseId);
+      const course = res?.data?.data ?? null;
+      if (!course) return;
+      reset({
+        title: course.title ?? "",
+        description: course.description ?? "",
+        order: course.order ?? 0,
+      });
+    })();
+  }, [courseId]);
+
+  const onSubmit = async (data) => {
+    if (!isDirty) return navigate(-1);
+    const result = await updateCourse(courseId, { ...data, updatedBy: user?.user_id });
+    if (!result) return;
+    navigate(-1);
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Course</h1>
+              <p className="text-sm text-muted-foreground">Update course details.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Course title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/EditLesson.jsx b/src/modules/admin/pages/courses/EditLesson.jsx
new file mode 100644
index 0000000..2fafad0
--- /dev/null
+++ b/src/modules/admin/pages/courses/EditLesson.jsx
@@ -0,0 +1,122 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditLesson() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson, updateLesson, course, unit, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, reset, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: unit?.title ?? "Unit", to: `/admin/courses/${courseId}/units/${unitId}` },
+    { label: "Edit Lesson" },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchLesson(courseId, unitId, lessonId);
+      const lesson = res?.data?.data ?? null;
+      if (!lesson) return;
+      reset({
+        title: lesson.title ?? "",
+        description: lesson.description ?? "",
+        order: lesson.order ?? 0,
+      });
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  const onSubmit = async (data) => {
+    if (!isDirty) return navigate(-1);
+    const result = await updateLesson(courseId, unitId, lessonId, {
+      ...data,
+      updatedBy: user?.user_id,
+    });
+    if (!result) return;
+    navigate(-1);
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Lesson</h1>
+              <p className="text-sm text-muted-foreground">Update lesson details.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Lesson title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/EditUnit.jsx b/src/modules/admin/pages/courses/EditUnit.jsx
new file mode 100644
index 0000000..ebfbd05
--- /dev/null
+++ b/src/modules/admin/pages/courses/EditUnit.jsx
@@ -0,0 +1,119 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Spinner } from "@/components/ui/spinner";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required."),
+  description: z.string().optional(),
+  order: z.coerce.number().min(0).default(0),
+});
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return <p className="text-xs text-destructive mt-1">{message}</p>;
+}
+
+export default function EditUnit() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchUnit, updateUnit, course, loading } = useCourses();
+  const { user } = useAuth();
+
+  const { register, handleSubmit, reset, formState: { errors, isDirty } } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { title: "", description: "", order: 0 },
+  });
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: "Edit Unit" },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetchUnit(courseId, unitId);
+      const unit = res?.data?.data ?? null;
+      if (!unit) return;
+      reset({
+        title: unit.title ?? "",
+        description: unit.description ?? "",
+        order: unit.order ?? 0,
+      });
+    })();
+  }, [courseId, unitId]);
+
+  const onSubmit = async (data) => {
+    if (!isDirty) return navigate(-1);
+    const result = await updateUnit(courseId, unitId, { ...data, updatedBy: user?.user_id });
+    if (!result) return;
+    navigate(-1);
+  };
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Edit Unit</h1>
+              <p className="text-sm text-muted-foreground">Update unit details.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="rounded-lg border bg-card p-6 space-y-5">
+
+              <div className="space-y-1.5">
+                <Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
+                <Input id="title" placeholder="Unit title" {...register("title")} />
+                <FieldError message={errors.title?.message} />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
+              </div>
+
+              <div className="space-y-1.5 max-w-[120px]">
+                <Label htmlFor="order">Order</Label>
+                <Input id="order" type="number" min={0} {...register("order")} />
+              </div>
+
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading || !isDirty}>
+                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/LessonDetail.jsx b/src/modules/admin/pages/courses/LessonDetail.jsx
new file mode 100644
index 0000000..ca32b8f
--- /dev/null
+++ b/src/modules/admin/pages/courses/LessonDetail.jsx
@@ -0,0 +1,99 @@
+// modules/admin/pages/courses/LessonDetail.jsx
+
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Layout } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { Badge } from "@/components/ui/badge";
+
+export default function LessonDetail() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson, course, unit, lesson, lessonPage, loading } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchLesson(courseId, unitId, lessonId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: unit?.title ?? "Unit", to: `/admin/courses/${courseId}/units/${unitId}` },
+    { label: lesson?.title ?? "..." },
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-3xl space-y-6">
+
+          {/* ── Header ── */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">{lesson?.title}</h1>
+                {lesson?.description && (
+                  <p className="text-sm text-muted-foreground">{lesson.description}</p>
+                )}
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/edit`)}
+            >
+              Edit Details
+            </Button>
+          </div>
+
+          {/* ── Page builder card ── */}
+          <div className="rounded-lg border bg-card p-6 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Layout className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Lesson Content</p>
+                <p className="text-xs text-muted-foreground">
+                  {lessonPage?.blocks?.length
+                    ? `${lessonPage.blocks.length} block${lessonPage.blocks.length !== 1 ? "s" : ""}`
+                    : "No content yet"}
+                </p>
+              </div>
+            </div>
+            <Button
+              onClick={() => navigate(
+                `/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}/page`
+              )}
+            >
+              {lessonPage?.blocks?.length ? "Edit Content" : "Add Content"}
+            </Button>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/LessonPageBuilder.jsx b/src/modules/admin/pages/courses/LessonPageBuilder.jsx
new file mode 100644
index 0000000..fd60dda
--- /dev/null
+++ b/src/modules/admin/pages/courses/LessonPageBuilder.jsx
@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House, Save } from "lucide-react";
+import { nanoid } from "nanoid";
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import { useAuth } from "@/contexts/AuthContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
+import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
+
+function makeBlock(type) {
+  return {
+    id: nanoid(),
+    type,
+    content: { ...DEFAULT_CONTENT[type] },
+  };
+}
+
+export default function LessonPageBuilder() {
+  const navigate = useNavigate();
+  const { courseId, unitId, lessonId } = useParams();
+  const { fetchLesson, saveLessonPage, course, unit, lesson, lessonPage, loading } = useCourses();
+  const { user } = useAuth();
+
+  const [blocks, setBlocks] = useState([]);
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchLesson(courseId, unitId, lessonId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId, lessonId]);
+
+  // ── Populate blocks from saved page ───────────────────────────────────────
+  useEffect(() => {
+    if (lessonPage?.blocks?.length) {
+      setBlocks(lessonPage.blocks);
+    }
+  }, [lessonPage]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: unit?.title ?? "Unit", to: `/admin/courses/${courseId}/units/${unitId}` },
+    { label: lesson?.title ?? "Lesson", to: `/admin/courses/${courseId}/units/${unitId}/lessons/${lessonId}` },
+    { label: "Page Builder" },
+  ];
+
+  // ── Block actions ─────────────────────────────────────────────────────────
+
+  const addBlock = (type) =>
+    setBlocks((prev) => [...prev, makeBlock(type)]);
+
+  const updateBlock = (id, content) =>
+    setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
+
+  const deleteBlock = (id) =>
+    setBlocks((prev) => prev.filter((b) => b.id !== id));
+
+  const moveBlock = (id, direction) => {
+    setBlocks((prev) => {
+      const index = prev.findIndex((b) => b.id === id);
+      const swapIndex = direction === "up" ? index - 1 : index + 1;
+      if (swapIndex < 0 || swapIndex >= prev.length) return prev;
+      const next = [...prev];
+      [next[index], next[swapIndex]] = [next[swapIndex], next[index]];
+      return next;
+    });
+  };
+
+  // ── Save ──────────────────────────────────────────────────────────────────
+
+  const handleSave = async () => {
+    const result = await saveLessonPage(courseId, unitId, lessonId, {
+      blocks,
+      updatedBy: user?.user_id,
+    });
+    if (!result) return;
+    navigate(-1);
+  };
+
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full max-w-3xl space-y-6 pb-10">
+
+          {/* ── Header ── */}
+          <div className="flex items-center gap-3">
+            <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div>
+              <h1 className="text-xl font-semibold">Page Builder</h1>
+              <p className="text-sm text-muted-foreground">
+                {lesson?.title}
+              </p>
+            </div>
+          </div>
+
+          {/* ── Blocks ── */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-medium">
+                Content Blocks
+                {blocks.length > 0 && (
+                  <span className="ml-2 text-xs text-muted-foreground font-normal">
+                    {blocks.length} block{blocks.length !== 1 ? "s" : ""}
+                  </span>
+                )}
+              </p>
+            </div>
+
+            <BlockList
+              blocks={blocks}
+              onUpdate={updateBlock}
+              onMove={moveBlock}
+              onDelete={deleteBlock}
+            />
+
+            <AddBlockMenu onAdd={addBlock} />
+          </div>
+
+          {/* ── Actions ── */}
+          <div className="flex justify-end gap-3">
+            <Button type="button" variant="outline" onClick={() => navigate(-1)} disabled={loading}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={loading}>
+              {loading
+                ? <Spinner className="h-4 w-4 mr-2" />
+                : <Save className="h-4 w-4 mr-2" />
+              }
+              Save Page
+            </Button>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/pages/courses/UnitDetail.jsx b/src/modules/admin/pages/courses/UnitDetail.jsx
new file mode 100644
index 0000000..717e3c5
--- /dev/null
+++ b/src/modules/admin/pages/courses/UnitDetail.jsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import LessonsTable from "../../components/courses/LessonsTable";
+
+export default function UnitDetail() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchUnit, course, unit, loading } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchUnit(courseId, unitId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title ?? "Course", to: `/admin/courses/${courseId}` },
+    { label: unit?.title ?? "..." },
+  ];
+
+  // Replace the loading check
+  if (initializing) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Spinner className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-muted/60 h-full">
+      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
+        <div className="flex flex-col gap-2 my-6">
+          <AppBreadcrumb items={items} />
+        </div>
+
+        <div className="w-full space-y-6">
+
+          {/* ── Unit header ── */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <h1 className="text-xl font-semibold">{unit?.title}</h1>
+                {unit?.description && (
+                  <p className="text-sm text-muted-foreground">{unit.description}</p>
+                )}
+              </div>
+            </div>
+            <Button onClick={() => navigate(`/admin/courses/${courseId}/units/${unitId}/edit`)}>
+              Edit Unit
+            </Button>
+          </div>
+
+          {/* ── Lessons ── */}
+          <LessonsTable courseId={courseId} unitId={unitId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/admin/routes/AdminRoutes.jsx b/src/modules/admin/routes/AdminRoutes.jsx
index e185ac5..a8ad595 100644
--- a/src/modules/admin/routes/AdminRoutes.jsx
+++ b/src/modules/admin/routes/AdminRoutes.jsx
@@ -25,6 +25,17 @@ import ViewVideoAsset from "../pages/assets/ViewVideoAsset";
 import ViewDocumentAsset from "../pages/assets/ViewDocumentAsset";
 import AssetList from '../pages/assets/AssetList'
 import EditAsset from '../pages/assets/EditAsset'
+import CourseList from '../pages/courses/CourseList'
+import CreateCourse from '../pages/courses/CreateCourse'
+import EditCourse from '../pages/courses/EditCourse'
+import CourseDetail from '../pages/courses/CourseDetail'
+import CreateUnit from '../pages/courses/CreateUnit'
+import UnitDetail from '../pages/courses/UnitDetail'
+import CreateLesson from '../pages/courses/CreateLesson'
+import LessonDetail from '../pages/courses/LessonDetail'
+import LessonPageBuilder from '../pages/courses/LessonPageBuilder'
+import EditUnit from '../pages/courses/EditUnit'
+import EditLesson from '../pages/courses/EditLesson'
 
 export const AdminRoutes = {
   element: <ProtectedRoute allowedRoles={['admin']} />,
@@ -74,9 +85,29 @@ export const AdminRoutes = {
             { path: 'view/document/:assetId', element: <ViewDocumentAsset /> },
             { path: 'edit/:assetId', element: <EditAsset /> },
           ],
-        }
+        },
+
+        // Courses
+        {
+          path: 'courses',
+          element: <Outlet />,
+          children: [
+            { index: true, element: <CourseList /> },
+            { path: 'create', element: <CreateCourse /> },
+            { path: ':courseId', element: <CourseDetail /> },
+            { path: ':courseId/edit', element: <EditCourse /> },
+            { path: ':courseId/units/create', element: <CreateUnit /> },
+            { path: ':courseId/units/:unitId', element: <UnitDetail /> },
+            { path: ':courseId/units/:unitId/edit', element: <EditUnit /> },
+            { path: ':courseId/units/:unitId/lessons/create', element: <CreateLesson /> },
+            { path: ':courseId/units/:unitId/lessons/:lessonId', element: <LessonDetail /> },
+            { path: ':courseId/units/:unitId/lessons/:lessonId/edit', element: <EditLesson /> },
+            { path: ':courseId/units/:unitId/lessons/:lessonId/page', element: <LessonPageBuilder /> },
+          ]
+        },
+
         // Add here
       ]
     },
   ],
-}
\ No newline at end of file
+}