advance

app/(auth)/auth/login/page.tsx

@@ -3,6 +3,8 @@ import LoginForm from "@/components/auth/LoginForm";
 type LoginPageProps = {
   searchParams: Promise<{
     redirectTo?: string | string[];
+    role?: string | string[];
+    forgot?: string | string[];
   }>;
 };
 
@@ -10,6 +12,10 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
   const params = await searchParams;
   const redirectValue = params.redirectTo;
   const redirectTo = Array.isArray(redirectValue) ? redirectValue[0] : redirectValue;
+  const roleValue = params.role;
+  const role = Array.isArray(roleValue) ? roleValue[0] : roleValue;
+  const forgotValue = params.forgot;
+  const forgot = Array.isArray(forgotValue) ? forgotValue[0] : forgotValue;
 
-  return <LoginForm redirectTo={redirectTo ?? "/courses"} />;
+  return <LoginForm redirectTo={redirectTo ?? "/courses"} role={role} showForgot={forgot === "1"} />;
 }

app/(auth)/auth/signup/page.tsx

@@ -81,6 +81,15 @@ export default function SignupPage() {
           Login
         </Link>
       </p>
+      <p className="mt-2 text-sm text-slate-600">
+        Are you a teacher?{" "}
+        <Link className="font-semibold text-brand" href="/auth/login?role=teacher">
+          Login here
+        </Link>
+      </p>
+      <p className="mt-2 text-xs text-slate-500">
+        Teacher accounts are invite-only. If you received an invite, use the email provided.
+      </p>
     </div>
   );
 }

app/(protected)/courses/[slug]/learn/actions.ts

@@ -0,0 +1,92 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { requireUser } from "@/lib/auth/requireUser";
+import { db } from "@/lib/prisma";
+
+type ToggleLessonCompleteInput = {
+  courseSlug: string;
+  lessonId: string;
+};
+
+export async function toggleLessonComplete({ courseSlug, lessonId }: ToggleLessonCompleteInput) {
+  const user = await requireUser();
+
+  if (!user?.id) {
+    return { success: false, error: "Unauthorized" };
+  }
+
+  const lesson = await db.lesson.findUnique({
+    where: { id: lessonId },
+    select: {
+      id: true,
+      module: {
+        select: {
+          courseId: true,
+          course: {
+            select: {
+              slug: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!lesson || lesson.module.course.slug !== courseSlug) {
+    return { success: false, error: "Lesson not found" };
+  }
+
+  const enrollment = await db.enrollment.findUnique({
+    where: {
+      userId_courseId: {
+        userId: user.id,
+        courseId: lesson.module.courseId,
+      },
+    },
+    select: { id: true },
+  });
+
+  if (!enrollment) {
+    return { success: false, error: "Not enrolled in this course" };
+  }
+
+  const existingProgress = await db.userProgress.findUnique({
+    where: {
+      userId_lessonId: {
+        userId: user.id,
+        lessonId,
+      },
+    },
+    select: {
+      id: true,
+      isCompleted: true,
+    },
+  });
+
+  const nextCompleted = !existingProgress?.isCompleted;
+
+  if (existingProgress) {
+    await db.userProgress.update({
+      where: { id: existingProgress.id },
+      data: {
+        isCompleted: nextCompleted,
+        finishedAt: nextCompleted ? new Date() : null,
+        lastPlayedAt: new Date(),
+      },
+    });
+  } else {
+    await db.userProgress.create({
+      data: {
+        userId: user.id,
+        lessonId,
+        isCompleted: true,
+        finishedAt: new Date(),
+      },
+    });
+  }
+
+  revalidatePath(`/courses/${courseSlug}/learn`);
+
+  return { success: true, isCompleted: nextCompleted };
+}

app/(protected)/courses/[slug]/learn/page.tsx

@@ -1,214 +1,130 @@
-"use client";
+import { notFound, redirect } from "next/navigation";
+import { db } from "@/lib/prisma";
+import { requireUser } from "@/lib/auth/requireUser";
+import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
 
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import LessonRow from "@/components/LessonRow";
-import ProgressBar from "@/components/ProgressBar";
-import { getCourseBySlug } from "@/lib/data/courseCatalog";
-import {
-  getCourseProgress,
-  getCourseProgressPercent,
-  markLessonComplete,
-  setLastLesson,
-} from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course, Lesson } from "@/types/course";
-
-const lessonContent = (lesson: Lesson) => {
-  if (lesson.type === "video") {
-    return (
-      <div className="space-y-3">
-        <div className="aspect-video rounded-2xl border border-slate-300 bg-[#f6f6f7] p-4">
-          <div className="flex h-full items-center justify-center rounded-xl border-2 border-dashed border-slate-300 text-lg text-slate-500">
-            Video placeholder ({lesson.minutes} min)
-          </div>
-        </div>
-        {lesson.videoUrl ? (
-          <p className="text-sm text-slate-500">
-            Demo video URL: <span className="font-medium text-slate-700">{lesson.videoUrl}</span>
-          </p>
-        ) : null}
-      </div>
-    );
+function getText(value: unknown): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    if (typeof record.es === "string") return record.es;
+    if (typeof record.en === "string") return record.en;
   }
+  return "";
+}
 
-  if (lesson.type === "reading") {
-    return (
-      <div className="rounded-2xl border border-slate-300 bg-white p-5">
-        <p className="text-lg leading-9 text-slate-700">
-          Reading placeholder content for lesson: {lesson.title}. Replace with full lesson text and references in Phase 2.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="rounded-2xl border border-slate-300 bg-white p-5">
-      <p className="text-lg text-slate-700">Interactive placeholder for lesson: {lesson.title}.</p>
-      <button className="acve-button-secondary mt-3 px-3 py-1.5 text-sm" type="button">
-        Start interactive
-      </button>
-    </div>
-  );
+type PageProps = {
+  params: Promise<{ slug: string }>;
+  searchParams: Promise<{ lesson?: string }>;
 };
 
-export default function CourseLearnPage() {
-  const params = useParams<{ slug: string }>();
-  const slug = params.slug;
-  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
-  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
+export default async function CourseLearnPage({ params, searchParams }: PageProps) {
+  const { slug } = await params;
+  const { lesson: requestedLessonId } = await searchParams;
 
-  const [userId, setUserId] = useState("guest");
-  const [isAuthed, setIsAuthed] = useState(false);
-  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
-  const [completedLessonIds, setCompletedLessonIds] = useState<string[]>([]);
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const loadCourse = () => {
-      setCourse(getCourseBySlug(slug));
-      setHasResolvedCourse(true);
-    };
-    loadCourse();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
-  }, [slug]);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      setUserId(data.user?.id ?? "guest");
-      setIsAuthed(Boolean(data.user));
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-      setIsAuthed(Boolean(session?.user));
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    if (!course) return;
-
-    const progressState = getCourseProgress(userId, course.slug);
-    const fallback = course.lessons[0]?.id ?? null;
-    setSelectedLessonId(progressState.lastLessonId ?? fallback);
-    setCompletedLessonIds(progressState.completedLessonIds);
-    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
-  }, [course, userId]);
-
-  const completionSet = new Set(completedLessonIds);
-
-  if (!course && !hasResolvedCourse) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <p className="text-slate-600">Loading course...</p>
-      </div>
-    );
+  const user = await requireUser();
+  if (!user?.id) {
+    redirect(`/courses/${slug}`);
   }
 
+  const course = await db.course.findUnique({
+    where: { slug },
+    select: {
+      id: true,
+      slug: true,
+      title: true,
+      price: true,
+      modules: {
+        orderBy: { orderIndex: "asc" },
+        select: {
+          id: true,
+          title: true,
+          lessons: {
+            orderBy: { orderIndex: "asc" },
+            select: {
+              id: true,
+              title: true,
+              description: true,
+              videoUrl: true,
+              estimatedDuration: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
   if (!course) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
-        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
-        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
-          Back to courses
-        </Link>
-      </div>
-    );
+    notFound();
   }
 
-  const selectedLesson =
-    course.lessons.find((lesson) => lesson.id === selectedLessonId) ?? course.lessons[0];
+  let enrollment = await db.enrollment.findUnique({
+    where: {
+      userId_courseId: {
+        userId: user.id,
+        courseId: course.id,
+      },
+    },
+    select: { id: true },
+  });
 
-  if (!selectedLesson) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <h1 className="text-2xl font-bold text-slate-900">No lessons available</h1>
-        <p className="mt-2 text-slate-600">This course currently has no lessons configured.</p>
-        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href={`/courses/${course.slug}`}>
-          Back to course
-        </Link>
-      </div>
-    );
+  if (!enrollment) {
+    const isFree = Number(course.price) === 0;
+    if (isFree) {
+      enrollment = await db.enrollment.create({
+        data: {
+          userId: user.id,
+          courseId: course.id,
+          amountPaid: 0,
+        },
+        select: { id: true },
+      });
+    } else {
+      redirect(`/courses/${slug}`);
+    }
   }
 
-  const isLocked = (lesson: Lesson) => !lesson.isPreview && !isAuthed;
+  const completedProgress = await db.userProgress.findMany({
+    where: {
+      userId: user.id,
+      isCompleted: true,
+      lesson: {
+        module: {
+          courseId: course.id,
+        },
+      },
+    },
+    select: {
+      lessonId: true,
+    },
+  });
 
-  const onSelectLesson = (lesson: Lesson) => {
-    if (isLocked(lesson)) return;
-    setSelectedLessonId(lesson.id);
-    setLastLesson(userId, course.slug, lesson.id);
-  };
+  const modules = course.modules.map((module) => ({
+    id: module.id,
+    title: getText(module.title) || "Untitled module",
+    lessons: module.lessons.map((lesson) => ({
+      id: lesson.id,
+      title: getText(lesson.title) || "Untitled lesson",
+      description: getText(lesson.description),
+      videoUrl: lesson.videoUrl,
+      estimatedDuration: lesson.estimatedDuration,
+    })),
+  }));
 
-  const onMarkComplete = () => {
-    if (!selectedLesson) return;
-    markLessonComplete(userId, course.slug, selectedLesson.id);
-    const progressState = getCourseProgress(userId, course.slug);
-    setCompletedLessonIds(progressState.completedLessonIds);
-    setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
-  };
+  const flattenedLessonIds = modules.flatMap((module) => module.lessons.map((lesson) => lesson.id));
+  const initialSelectedLessonId =
+    requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
+      ? requestedLessonId
+      : flattenedLessonIds[0] ?? "";
 
   return (
-    <div className="space-y-6">
-      <header className="acve-panel p-6">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand md:text-xl" href={`/courses/${course.slug}`}>
-              <span className="text-base">{"<-"}</span>
-              Back to Course
-            </Link>
-            <h1 className="mt-2 text-3xl text-[#222b39] md:text-5xl">Course Content</h1>
-          </div>
-          <div className="min-w-[240px]">
-            <ProgressBar value={progress} label={`${progress}% complete`} />
-          </div>
-        </div>
-      </header>
-
-      <section className="space-y-3">
-        {course.lessons.map((lesson, index) => (
-          <div key={lesson.id} className="space-y-1">
-            <LessonRow
-              index={index}
-              isActive={lesson.id === selectedLesson?.id}
-              isLocked={isLocked(lesson)}
-              lesson={lesson}
-              onSelect={() => onSelectLesson(lesson)}
-            />
-            {completionSet.has(lesson.id) ? (
-              <p className="pl-2 text-sm font-medium text-[#2f9d73]">Completed</p>
-            ) : null}
-          </div>
-        ))}
-      </section>
-
-      <section className="acve-panel space-y-4 p-6">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h2 className="text-2xl text-[#222b39] md:text-4xl">{selectedLesson.title}</h2>
-            <p className="mt-1 text-base text-slate-600">
-              {selectedLesson.type} | {selectedLesson.minutes} min
-            </p>
-          </div>
-          <button
-            className="acve-button-primary px-4 py-2 text-sm font-semibold hover:brightness-105"
-            onClick={onMarkComplete}
-            type="button"
-          >
-            Mark complete
-          </button>
-        </div>
-
-        {lessonContent(selectedLesson)}
-      </section>
-    </div>
+    <StudentClassroomClient
+      courseSlug={course.slug}
+      courseTitle={getText(course.title) || "Untitled course"}
+      modules={modules}
+      initialSelectedLessonId={initialSelectedLessonId}
+      initialCompletedLessonIds={completedProgress.map((progress) => progress.lessonId)}
+    />
   );
 }

app/(protected)/org/page.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { requireUser } from "@/lib/auth/requireUser";
+
+export default async function OrgDashboardPage() {
+  await requireUser();
+
+  return (
+    <div className="space-y-6">
+      <header className="acve-panel p-6">
+        <h1 className="text-3xl font-bold text-slate-900">Organization Dashboard (Placeholder)</h1>
+        <p className="mt-2 text-slate-600">
+          Org admin tools are frontend placeholders for seat management, usage analytics, and assignment flows.
+        </p>
+        <p className="mt-3 inline-flex rounded-md border border-amber-300 bg-amber-50 px-3 py-1 text-sm font-semibold text-amber-900">
+          Org admin only (access model pending backend)
+        </p>
+      </header>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        <article className="acve-panel p-4">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Seats</p>
+          <p className="mt-2 text-2xl font-semibold text-slate-900">12 / 20 used</p>
+        </article>
+        <article className="acve-panel p-4">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Active learners</p>
+          <p className="mt-2 text-2xl font-semibold text-slate-900">9</p>
+        </article>
+        <article className="acve-panel p-4">
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Courses assigned</p>
+          <p className="mt-2 text-2xl font-semibold text-slate-900">4</p>
+        </article>
+      </section>
+
+      <section className="acve-panel p-6">
+        <h2 className="text-xl font-semibold text-slate-900">Assignment Queue (Placeholder)</h2>
+        <ul className="mt-3 space-y-2 text-sm text-slate-700">
+          <li className="rounded-md border border-slate-200 px-3 py-2">Assign &quot;Contract Analysis Practice&quot; to Team A (disabled)</li>
+          <li className="rounded-md border border-slate-200 px-3 py-2">Invite 3 learners to &quot;Legal English Foundations&quot; (disabled)</li>
+          <li className="rounded-md border border-slate-200 px-3 py-2">Export monthly progress report (disabled)</li>
+        </ul>
+        <Link className="mt-4 inline-flex rounded-md border border-slate-300 px-3 py-2 text-sm hover:bg-slate-50" href="/">
+          Back to home
+        </Link>
+      </section>
+    </div>
+  );
+}

app/(protected)/practice/[slug]/page.tsx

@@ -1,19 +1,49 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import ProgressBar from "@/components/ProgressBar";
 import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
 
+const attemptsKey = (slug: string) => `acve.practice-attempts.${slug}`;
+
+type AttemptRecord = {
+  completedAt: string;
+  score: number;
+  total: number;
+};
+
 export default function PracticeExercisePage() {
   const params = useParams<{ slug: string }>();
   const practiceModule = getPracticeBySlug(params.slug);
 
+  const [started, setStarted] = useState(false);
   const [index, setIndex] = useState(0);
   const [score, setScore] = useState(0);
   const [finished, setFinished] = useState(false);
   const [selected, setSelected] = useState<number | null>(null);
+  const [attempts, setAttempts] = useState<AttemptRecord[]>([]);
+
+  const loadAttempts = () => {
+    if (!practiceModule) return;
+    if (typeof window === "undefined") return;
+    const raw = window.localStorage.getItem(attemptsKey(practiceModule.slug));
+    if (!raw) {
+      setAttempts([]);
+      return;
+    }
+    try {
+      setAttempts(JSON.parse(raw) as AttemptRecord[]);
+    } catch {
+      setAttempts([]);
+    }
+  };
+
+  useEffect(() => {
+    loadAttempts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [practiceModule?.slug]);
 
   if (!practiceModule) {
     return (
@@ -50,6 +80,20 @@ export default function PracticeExercisePage() {
 
   const next = () => {
     if (index + 1 >= total) {
+      if (typeof window !== "undefined") {
+        const raw = window.localStorage.getItem(attemptsKey(practiceModule.slug));
+        const parsed = raw ? ((JSON.parse(raw) as AttemptRecord[]) ?? []) : [];
+        const nextAttempts = [
+          {
+            completedAt: new Date().toISOString(),
+            score,
+            total,
+          },
+          ...parsed,
+        ].slice(0, 5);
+        window.localStorage.setItem(attemptsKey(practiceModule.slug), JSON.stringify(nextAttempts));
+        setAttempts(nextAttempts);
+      }
       setFinished(true);
       return;
     }
@@ -58,31 +102,120 @@ export default function PracticeExercisePage() {
   };
 
   const restart = () => {
+    setStarted(true);
     setIndex(0);
     setScore(0);
     setSelected(null);
     setFinished(false);
   };
 
+  const start = () => {
+    setStarted(true);
+    setFinished(false);
+    setIndex(0);
+    setScore(0);
+    setSelected(null);
+  };
+
   if (finished) {
     return (
-      <div className="mx-auto max-w-3xl rounded-2xl border border-slate-300 bg-white p-8 text-center shadow-sm">
-        <h1 className="acve-heading text-5xl">Exercise complete</h1>
-        <p className="mt-2 text-3xl text-slate-700">
-          Final score: {score}/{total}
-        </p>
-        <button className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105" onClick={restart} type="button">
-          Restart
-        </button>
+      <div className="acve-page">
+        <section className="acve-panel p-6 text-center md:p-8">
+          <p className="acve-pill mx-auto mb-3 w-fit">Practice Results</p>
+          <h1 className="text-3xl font-semibold text-[#222a38] md:text-4xl">Exercise complete</h1>
+          <p className="mt-2 text-xl text-slate-700 md:text-2xl">
+            Final score: {score}/{total}
+          </p>
+          <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
+            <button className="acve-button-primary px-5 py-2 text-sm font-semibold hover:brightness-105" onClick={restart} type="button">
+              Retake quiz
+            </button>
+            <button className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" type="button">
+              Review answers (placeholder)
+            </button>
+            <Link className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" href="/practice">
+              Back to modules
+            </Link>
+          </div>
+        </section>
+
+        <section className="acve-panel p-4">
+          <h2 className="text-base font-semibold text-slate-800">Attempt History (Mock)</h2>
+          {attempts.length === 0 ? (
+            <p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
+          ) : (
+            <ul className="mt-2 space-y-2">
+              {attempts.map((attempt) => (
+                <li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
+                  Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </div>
+    );
+  }
+
+  if (!started) {
+    return (
+      <div className="acve-page">
+        <section className="acve-panel acve-section-base">
+          <p className="acve-pill mb-3 w-fit">Practice Session</p>
+          <h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">{practiceModule.title}</h1>
+          <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600">{practiceModule.description}</p>
+          <div className="mt-4 grid gap-3 sm:grid-cols-3">
+            <div className="rounded-xl border border-slate-200 bg-white p-3">
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Questions</p>
+              <p className="mt-1 text-2xl font-semibold text-slate-900">{total}</p>
+            </div>
+            <div className="rounded-xl border border-slate-200 bg-white p-3">
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Estimated time</p>
+              <p className="mt-1 text-2xl font-semibold text-slate-900">{Math.max(3, total * 2)} min</p>
+            </div>
+            <div className="rounded-xl border border-slate-200 bg-white p-3">
+              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Difficulty</p>
+              <p className="mt-1 text-2xl font-semibold text-slate-900">Intermediate</p>
+            </div>
+          </div>
+          <div className="mt-5 flex flex-wrap items-center gap-2">
+            <button className="acve-button-primary px-5 py-2 text-sm font-semibold hover:brightness-105" onClick={start} type="button">
+              Start practice
+            </button>
+            <Link className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" href="/practice">
+              Back to modules
+            </Link>
+          </div>
+        </section>
+
+        <section className="acve-panel p-4">
+          <h2 className="text-base font-semibold text-slate-800">Attempt History (Mock)</h2>
+          {attempts.length === 0 ? (
+            <p className="mt-2 text-sm text-slate-600">No attempts recorded yet for this module.</p>
+          ) : (
+            <ul className="mt-2 space-y-2">
+              {attempts.map((attempt) => (
+                <li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
+                  Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
-      <section className="text-center">
-        <p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
-        <h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
+    <div className="acve-page">
+      <section className="acve-panel p-4">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
+          <p className="text-base font-semibold text-slate-700">
+            {practiceModule.title} | Question {index + 1} / {total}
+          </p>
+          <p className="text-base font-semibold text-[#222a38]">Score: {score}/{total}</p>
+        </div>
+        <ProgressBar value={progress} />
       </section>
 
       <section className="grid gap-4 md:grid-cols-3">
@@ -95,28 +228,33 @@ export default function PracticeExercisePage() {
                 isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
               }`}
             >
-              <div className="mb-2 text-3xl text-brand md:text-4xl">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
-              <h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
-              <p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
+              <div className="mb-2 text-3xl text-brand">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
+              <h2 className="text-xl text-[#222a38]">{module.title}</h2>
+              <p className="mt-2 text-sm text-slate-600">{module.description}</p>
             </div>
           );
         })}
       </section>
 
       <section className="acve-panel p-4">
-        <div className="mb-3 flex items-center justify-between gap-4">
-          <p className="text-xl font-semibold text-slate-700">
-            Question {index + 1} / {total}
-          </p>
-          <p className="text-xl font-semibold text-[#222a38] md:text-2xl">Score: {score}/{total}</p>
-        </div>
-        <ProgressBar value={progress} />
+        <h2 className="text-lg font-semibold text-slate-800">Attempt History (Mock)</h2>
+        {attempts.length === 0 ? (
+          <p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
+        ) : (
+          <ul className="mt-2 space-y-2">
+            {attempts.map((attempt) => (
+              <li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
+                Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
+              </li>
+            ))}
+          </ul>
+        )}
       </section>
 
       <section className="acve-panel p-6">
-        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-10 text-center">
-          <p className="text-lg text-slate-500 md:text-2xl">Spanish Term</p>
-          <h2 className="acve-heading mt-2 text-3xl md:text-6xl">{current.prompt.replace("Spanish term: ", "")}</h2>
+        <div className="rounded-2xl bg-[#f6f6f8] px-6 py-8 text-center">
+          <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">Prompt</p>
+          <h2 className="mt-2 text-3xl font-semibold text-[#222a38] md:text-4xl">{current.prompt.replace("Spanish term: ", "")}</h2>
         </div>
 
         <div className="mt-6 grid gap-3">
@@ -135,7 +273,7 @@ export default function PracticeExercisePage() {
             return (
               <button
                 key={choice}
-                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 md:text-xl ${stateClass}`}
+                className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 ${stateClass}`}
                 onClick={() => pick(choiceIndex)}
                 type="button"
               >
@@ -146,7 +284,7 @@ export default function PracticeExercisePage() {
         </div>
 
         <button
-          className="acve-button-primary mt-6 px-6 py-2 text-lg font-semibold hover:brightness-105 disabled:opacity-50"
+          className="acve-button-primary mt-6 px-6 py-2 text-sm font-semibold hover:brightness-105 disabled:opacity-50"
           disabled={selected === null}
           onClick={next}
           type="button"

app/(protected)/teacher/actions.ts

@@ -0,0 +1,386 @@
+"use server";
+
+import { db } from "@/lib/prisma";
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import { z } from "zod";
+import { revalidatePath } from "next/cache";
+import { ContentStatus, Prisma, ProficiencyLevel } from "@prisma/client";
+
+// --- VALIDATION SCHEMAS (Zod) ---
+
+const createCourseSchema = z.object({
+    title: z.string().min(3, "El título debe tener al menos 3 caracteres"),
+});
+
+// --- ACTIONS ---
+
+/**
+ * 1. LIST COURSES
+ * Used by: app/(protected)/teacher/page.tsx (Dashboard)
+ */
+export async function getTeacherCourses() {
+    const user = await requireTeacher();
+
+    if (!user) {
+        return { success: false, error: "No autorizado" };
+    }
+
+    try {
+        const courses = await db.course.findMany({
+            where: {
+                authorId: user.id,
+            },
+            orderBy: {
+                updatedAt: "desc",
+            },
+            select: {
+                id: true,
+                title: true,
+                slug: true,
+                price: true,
+                status: true,
+                level: true,
+                _count: {
+                    select: {
+                        modules: true,
+                        enrollments: true,
+                    }
+                }
+            }
+        });
+
+        return { success: true, data: courses };
+    } catch (error) {
+        console.error("Error fetching courses:", error);
+        return { success: false, error: "Error al cargar los cursos" };
+    }
+}
+
+/**
+ * 2. CREATE COURSE (Draft) */
+export async function createCourse(formData: FormData) {
+    const user = await requireTeacher();
+
+    if (!user) {
+        return { success: false, error: "No autorizado" };
+    }
+
+    // 1. Extract & Validate
+    const rawTitle = formData.get("title");
+    const validated = createCourseSchema.safeParse({ title: rawTitle });
+
+    if (!validated.success) {
+        return { success: false, error: validated.error.flatten().fieldErrors.title?.[0] || "Error en el título" };
+    }
+
+    const title = validated.data.title;
+
+    // 2. Generate basic slug
+    const slug = `${title.toLowerCase().replace(/ /g, "-").replace(/[^\w-]/g, "")}-${Math.floor(Math.random() * 10000)}`;
+
+    try {
+        // 3. Create DB Record
+        const course = await db.course.create({
+            data: {
+                title: title,
+                slug: slug,
+                authorId: user.id,
+                description: "Descripción pendiente...",
+                status: "DRAFT",
+            },
+        });
+
+        // 4. Revalidate & Return
+        revalidatePath("/teacher/courses");
+        return { success: true, data: course };
+
+    } catch (error) {
+        console.error("Create course error:", error);
+        return { success: false, error: "No se pudo crear el curso." };
+    }
+}
+
+/**
+ * 3. DELETE COURSE */
+export async function deleteCourse(courseId: string) {
+    const user = await requireTeacher();
+
+    if (!user) return { success: false, error: "No autorizado" };
+
+    try {
+        const course = await db.course.findUnique({
+            where: { id: courseId },
+            select: { authorId: true }
+        });
+
+        if (!course || course.authorId !== user.id) {
+            return { success: false, error: "No tienes permiso para eliminar este curso." };
+        }
+
+        await db.course.delete({
+            where: { id: courseId },
+        });
+
+        revalidatePath("/teacher/courses");
+        return { success: true, data: "Curso eliminado" };
+
+    } catch {
+        return { success: false, error: "Error al eliminar el curso" };
+    }
+}
+
+export async function updateCourse(courseId: string, courseSlug: string, formData: FormData) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+
+    try {
+        const title = formData.get("title") as string;
+        const summary = formData.get("summary") as string;
+        // Direct cast is okay if you trust the select/input values
+        const level = formData.get("level") as ProficiencyLevel;
+        const status = formData.get("status") as ContentStatus;
+        const price = parseFloat(formData.get("price") as string) || 0;
+
+        await db.course.update({
+            where: { id: courseId, authorId: user.id },
+            data: {
+                title,
+                description: summary,
+                level,
+                status,
+                price,
+            },
+        });
+
+        // Revalidate both the list and the editor (edit route uses slug, not id)
+        revalidatePath("/teacher/courses");
+        revalidatePath(`/teacher/courses/${courseSlug}/edit`, "page");
+        return { success: true };
+    } catch {
+        return { success: false, error: "Failed to update" };
+    }
+}
+
+export async function updateLesson(lessonId: string, data: {
+    title?: string;
+    description?: Prisma.InputJsonValue | null;
+    videoUrl?: string;
+    isPublished?: boolean; // optional: for later
+}) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+
+    try {
+        const updateData: Prisma.LessonUpdateInput = { updatedAt: new Date() };
+        if (data.title !== undefined) updateData.title = data.title;
+        if (data.description !== undefined) updateData.description = data.description === null ? Prisma.JsonNull : data.description;
+        if (data.videoUrl !== undefined) updateData.videoUrl = data.videoUrl;
+
+        await db.lesson.update({
+            where: { id: lessonId },
+            data: updateData,
+        });
+
+        // 2. Revalidate to show changes immediately
+        revalidatePath("/teacher/courses");
+        return { success: true };
+    } catch (error) {
+        console.error("Update Lesson Error:", error);
+        return { success: false, error: "Failed to update lesson" };
+    }
+}
+
+export async function createModule(courseId: string) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+
+    try {
+        // Find the highest orderIndex so we can put the new one at the end
+        const lastModule = await db.module.findFirst({
+            where: { courseId },
+            orderBy: { orderIndex: "desc" },
+        });
+
+        const newOrder = lastModule ? lastModule.orderIndex + 1 : 0;
+
+        await db.module.create({
+            data: {
+                courseId,
+                title: "Nuevo Módulo", // Default title
+                orderIndex: newOrder,
+            },
+        });
+
+        revalidatePath(`/teacher/courses/${courseId}/edit`, "page");
+        return { success: true };
+    } catch (error) {
+        console.error("Create Module Error:", error);
+        return { success: false, error: "Failed to create module" };
+    }
+}
+
+// 2. CREATE LESSON
+export async function createLesson(moduleId: string) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+
+    try {
+        // Find the highest orderIndex for lessons in this module
+        const lastLesson = await db.lesson.findFirst({
+            where: { moduleId },
+            orderBy: { orderIndex: "desc" },
+        });
+
+        const newOrder = lastLesson ? lastLesson.orderIndex + 1 : 0;
+
+        // Create the lesson with default values
+        const lesson = await db.lesson.create({
+            data: {
+                moduleId,
+                title: "Nueva Lección",
+                orderIndex: newOrder,
+                estimatedDuration: 0,
+                version: 1,
+                // The type field is required in your schema (based on previous context)
+                // If you have a 'type' enum, set a default like 'VIDEO' or 'TEXT'
+                // type: "VIDEO", 
+            },
+        });
+
+        revalidatePath(`/teacher/courses/${moduleId}/edit`, "page");
+        return { success: true, lessonId: lesson.id };
+    } catch (error) {
+        console.error("Create Lesson Error:", error);
+        return { success: false, error: "Failed to create lesson" };
+    }
+}
+
+/**
+ * DELETE MODULE
+ * Also deletes all lessons inside it due to Prisma cascade or manual cleanup
+ */
+export async function deleteModule(moduleId: string) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+  
+    try {
+      await db.module.delete({
+        where: { 
+          id: moduleId,
+          course: { authorId: user.id } // Security: ownership check
+        },
+      });
+  
+      revalidatePath("/teacher/courses");
+      return { success: true };
+    } catch {
+      return { success: false, error: "No se pudo eliminar el módulo" };
+    }
+  }
+  
+  /**
+   * DELETE LESSON
+   */
+  export async function deleteLesson(lessonId: string) {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+  
+    try {
+      await db.lesson.delete({
+        where: { 
+          id: lessonId,
+          module: { course: { authorId: user.id } } // Deep ownership check
+        },
+      });
+  
+      revalidatePath("/teacher/courses");
+      return { success: true };
+    } catch {
+      return { success: false, error: "No se pudo eliminar la lección" };
+    }
+  }
+
+  export async function reorderModules(moduleId: string, direction: 'up' | 'down') {
+    const user = await requireTeacher();
+    if (!user) return { success: false, error: "Unauthorized" };
+  
+    const currentModule = await db.module.findUnique({
+      where: { id: moduleId },
+      include: { course: true }
+    });
+  
+    if (!currentModule || currentModule.course.authorId !== user.id) {
+      return { success: false, error: "Module not found" };
+    }
+  
+    const siblingModule = await db.module.findFirst({
+      where: {
+        courseId: currentModule.courseId,
+        orderIndex: direction === 'up' 
+          ? { lt: currentModule.orderIndex } 
+          : { gt: currentModule.orderIndex }
+      },
+      orderBy: { orderIndex: direction === 'up' ? 'desc' : 'asc' }
+    });
+  
+    if (!siblingModule) return { success: true }; // Already at the top/bottom
+  
+    // Swap orderIndex values
+    await db.$transaction([
+      db.module.update({
+        where: { id: currentModule.id },
+        data: { orderIndex: siblingModule.orderIndex }
+      }),
+      db.module.update({
+        where: { id: siblingModule.id },
+        data: { orderIndex: currentModule.orderIndex }
+      })
+    ]);
+  
+    revalidatePath(`/teacher/courses/${currentModule.course.slug}/edit`, "page");
+    return { success: true };
+  }
+
+/**
+ * Reorder lessons within the same module (swap orderIndex with sibling)
+ */
+export async function reorderLessons(lessonId: string, direction: "up" | "down") {
+  const user = await requireTeacher();
+  if (!user) return { success: false, error: "Unauthorized" };
+
+  const currentLesson = await db.lesson.findUnique({
+    where: { id: lessonId },
+    include: { module: { include: { course: true } } },
+  });
+
+  if (!currentLesson || currentLesson.module.course.authorId !== user.id) {
+    return { success: false, error: "Lesson not found" };
+  }
+
+  const siblingLesson = await db.lesson.findFirst({
+    where: {
+      moduleId: currentLesson.moduleId,
+      orderIndex:
+        direction === "up"
+          ? { lt: currentLesson.orderIndex }
+          : { gt: currentLesson.orderIndex },
+    },
+    orderBy: { orderIndex: direction === "up" ? "desc" : "asc" },
+  });
+
+  if (!siblingLesson) return { success: true }; // Already at top/bottom
+
+  await db.$transaction([
+    db.lesson.update({
+      where: { id: currentLesson.id },
+      data: { orderIndex: siblingLesson.orderIndex },
+    }),
+    db.lesson.update({
+      where: { id: siblingLesson.id },
+      data: { orderIndex: currentLesson.orderIndex },
+    }),
+  ]);
+
+  revalidatePath(`/teacher/courses/${currentLesson.module.course.slug}/edit`, "page");
+  return { success: true };
+}

app/(protected)/teacher/courses/[slug]/edit/page.tsx

@@ -1,13 +1,41 @@
+import { db } from "@/lib/prisma";
 import { requireTeacher } from "@/lib/auth/requireTeacher";
+import { notFound, redirect } from "next/navigation";
 import TeacherEditCourseForm from "@/components/teacher/TeacherEditCourseForm";
 
-type TeacherEditCoursePageProps = {
-  params: Promise<{ slug: string }>;
-};
+export default async function CourseEditPage({ params }: { params: Promise<{ slug: string }> }) {
+  const user = await requireTeacher();
+  if (!user) redirect("/auth/login");
 
-export default async function TeacherEditCoursePage({ params }: TeacherEditCoursePageProps) {
-  await requireTeacher();
   const { slug } = await params;
 
-  return <TeacherEditCourseForm slug={slug} />;
-}
+  // Fetch Course + Modules + Lessons
+  const course = await db.course.findUnique({
+    where: { slug: slug },
+    include: {
+      modules: {
+        orderBy: { orderIndex: "asc" },
+        include: {
+          lessons: {
+            orderBy: { orderIndex: "asc" },
+          },
+        },
+      },
+    },
+  });
+
+  if (!course) notFound();
+
+  // Security Check
+  if (course.authorId !== user.id && user.role !== "SUPER_ADMIN") {
+    return <div>No autorizado</div>;
+  }
+
+  // Transform Decimal to number for the UI component
+  const courseData = {
+    ...course,
+    price: course.price.toNumber(),
+  };
+
+  return <TeacherEditCourseForm course={courseData} />;
+}

app/(protected)/teacher/courses/[slug]/lessons/[lessonId]/LessonEditorForm.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { updateLesson } from "@/app/(protected)/teacher/actions";
+import VideoUpload from "@/components/teacher/VideoUpload"; // The component you created earlier
+
+interface LessonEditorFormProps {
+    lesson: {
+        id: string;
+        title: string;
+        description?: string | null;
+        videoUrl?: string | null;
+    };
+    courseSlug: string;
+}
+
+export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps) {
+    const router = useRouter();
+    const [loading, setLoading] = useState(false);
+    const [title, setTitle] = useState(lesson.title);
+    const [description, setDescription] = useState(lesson.description ?? "");
+
+    // 1. Auto-save Video URL when upload finishes
+    const handleVideoUploaded = async (url: string) => {
+        toast.loading("Guardando video...");
+        const res = await updateLesson(lesson.id, { videoUrl: url });
+
+        if (res.success) {
+            toast.dismiss();
+            toast.success("Video guardado correctamente");
+            router.refresh(); // Update the UI to show the new video player
+        } else {
+            toast.error("Error al guardar el video en la base de datos");
+        }
+    };
+
+    // 2. Save Text Changes (Title/Desc)
+    const handleSave = async () => {
+        setLoading(true);
+        const res = await updateLesson(lesson.id, { title, description });
+        if (res.success) {
+            toast.success("Cambios guardados");
+            router.refresh();
+        } else {
+            toast.error("Error al guardar cambios");
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+            {/* LEFT: Video & Content */}
+            <div className="lg:col-span-2 space-y-6">
+
+                {/* Video Upload Section */}
+                <section className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+                    <div className="p-6 border-b border-slate-100">
+                        <h2 className="font-semibold text-slate-900">Video del Curso</h2>
+                        <p className="text-sm text-slate-500">Sube el video principal de esta lección.</p>
+                    </div>
+                    <div className="p-6 bg-slate-50/50">
+                        <VideoUpload
+                            lessonId={lesson.id}
+                            currentVideoUrl={lesson.videoUrl}
+                            onUploadComplete={handleVideoUploaded}
+                        />
+                    </div>
+                </section>
+
+                {/* Text Content */}
+                <section className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-slate-700 mb-1">Título de la Lección</label>
+                        <input
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-700 mb-1">Descripción / Notas</label>
+                        <textarea
+                            rows={6}
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
+                            placeholder="Escribe aquí el contenido de la lección..."
+                        />
+                    </div>
+                </section>
+            </div>
+
+            {/* RIGHT: Settings / Actions */}
+            <div className="space-y-6">
+                <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
+                    <h3 className="font-semibold text-slate-900 mb-4">Acciones</h3>
+                    <button
+                        onClick={handleSave}
+                        disabled={loading}
+                        className="w-full bg-black text-white rounded-lg py-2.5 font-medium hover:bg-slate-800 disabled:opacity-50 transition-colors"
+                    >
+                        {loading ? "Guardando..." : "Guardar Cambios"}
+                    </button>
+
+                    <button
+                        onClick={() => router.push(`/teacher/courses/${courseSlug}/edit`)}
+                        className="w-full mt-3 bg-white border border-slate-300 text-slate-700 rounded-lg py-2.5 font-medium hover:bg-slate-50 transition-colors"
+                    >
+                        Volver al Curso
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    );
+}

app/(protected)/teacher/courses/[slug]/lessons/[lessonId]/page.tsx

@@ -0,0 +1,73 @@
+import { db } from "@/lib/prisma";
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import { redirect, notFound } from "next/navigation";
+import Link from "next/link";
+import { LessonEditorForm } from "./LessonEditorForm";
+
+function getText(value: unknown): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    const text = value as Record<string, string>;
+    return text.es || text.en || "";
+  }
+  return "";
+}
+
+interface PageProps {
+    params: Promise<{ slug: string; lessonId: string }>;
+}
+
+export default async function LessonPage({ params }: PageProps) {
+    const user = await requireTeacher();
+    if (!user) redirect("/auth/login");
+
+    const { slug, lessonId } = await params;
+
+    // 1. Fetch Lesson + Course Info (for breadcrumbs)
+    const lesson = await db.lesson.findUnique({
+        where: { id: lessonId },
+        include: {
+            module: {
+                include: {
+                    course: {
+                        select: { title: true, slug: true, authorId: true }
+                    }
+                }
+            }
+        }
+    });
+
+    // 2. Security & Null Checks
+    if (!lesson) notFound();
+    if (lesson.module.course.authorId !== user.id) redirect("/teacher");
+
+    return (
+        <div className="max-w-4xl mx-auto p-6">
+            {/* Breadcrumbs */}
+            <div className="flex items-center gap-2 text-sm text-slate-500 mb-6">
+                <Link href="/teacher" className="hover:text-black">Cursos</Link>
+                <span>/</span>
+                <Link href={`/teacher/courses/${slug}/edit`} className="hover:text-black">
+                    {getText(lesson.module.course.title)}
+                </Link>
+                <span>/</span>
+                <span className="text-slate-900 font-medium">{getText(lesson.title)}</span>
+            </div>
+
+            <div className="flex items-center justify-between mb-8">
+                <h1 className="text-3xl font-bold text-slate-900">Editar Lección</h1>
+            </div>
+
+            {/* The Client Form */}
+            <LessonEditorForm
+                lesson={{
+                    ...lesson,
+                    title: getText(lesson.title),
+                    description: getText(lesson.description),
+                }}
+                courseSlug={slug}
+            />
+        </div>
+    );
+}

app/(protected)/teacher/courses/[slug]/page.tsx

@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation";
+
+interface PageProps {
+    params: Promise<{ slug: string }>;
+}
+
+export default async function CourseDashboardPage({ params }: PageProps) {
+    // 1. Get the slug from the URL
+    const { slug } = await params;
+
+    // 2. Automatically redirect to the Edit page
+    // This saves us from building a separate "Stats" page for now
+    redirect(`/teacher/courses/${slug}/edit`);
+}

app/(protected)/teacher/page.tsx

@@ -1,7 +1,107 @@
+export const dynamic = 'force-dynamic';
+
+import { getTeacherCourses } from "./actions"; // Import the server action
+import Link from "next/link";
+import { redirect } from "next/navigation";
 import { requireTeacher } from "@/lib/auth/requireTeacher";
-import TeacherDashboardClient from "@/components/teacher/TeacherDashboardClient";
+import { logger } from "@/lib/logger";
 
 export default async function TeacherDashboardPage() {
-  await requireTeacher();
-  return <TeacherDashboardClient />;
-}
+  try {
+    // 1. Auth Check (Double protection)
+    // We log the attempt
+    logger.info("Accessing Teacher Dashboard");
+
+    // We wrap requireTeacher to catch potential DB/Supabase connection errors
+    let user;
+    try {
+      user = await requireTeacher();
+    } catch (authError) {
+      logger.error("requireTeacher failed with exception", authError);
+      throw authError;
+    }
+
+    if (!user) {
+      logger.info("User not authorized as teacher, redirecting");
+      redirect("/login");
+    }
+
+
+    // 2. Fetch Data
+    const { success, data: courses, error } = await getTeacherCourses();
+
+    return (
+      <div className="p-6 max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Panel del Profesor</h1>
+            <p className="text-gray-500">Gestiona tus cursos y contenidos.</p>
+          </div>
+          <Link
+            href="/teacher/courses/new"
+            className="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors"
+          >
+            + Nuevo Curso
+          </Link>
+        </div>
+
+        {/* Error State */}
+        {!success && (
+          <div className="bg-red-50 text-red-600 p-4 rounded-md border border-red-100">
+            Error: {error}
+          </div>
+        )}
+
+        {/* List State */}
+        {success && courses && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {courses.length === 0 ? (
+              // Empty State
+              <div className="col-span-full text-center py-12 border-2 border-dashed border-gray-200 rounded-lg">
+                <h3 className="mt-2 text-sm font-semibold text-gray-900">No hay cursos</h3>
+                <p className="mt-1 text-sm text-gray-500">Empieza creando tu primer curso de Inglés Jurídico.</p>
+              </div>
+            ) : (
+              // Course Cards
+              courses.map((course) => (
+                <Link
+                  key={course.id}
+                  href={`/teacher/courses/${course.slug}`}
+                  className="block group"
+                >
+                  <div className="border border-gray-200 rounded-lg p-5 hover:border-black transition-all bg-white shadow-sm hover:shadow-md">
+                    <div className="flex justify-between items-start mb-4">
+                      <span className={`text-xs font-medium px-2 py-1 rounded-full ${course.status === 'PUBLISHED' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
+                        }`}>
+                        {course.status === 'PUBLISHED' ? 'Publicado' : 'Borrador'}
+                      </span>
+                      <span className="text-sm font-bold text-gray-900">
+                        ${course.price.toString()}
+                      </span>
+                    </div>
+
+                    <h3 className="font-semibold text-lg text-gray-900 group-hover:text-blue-600 mb-1">
+                      {course.title as string}
+                    </h3>
+                    <p className="text-sm text-gray-500 mb-4">
+                      {course.level}
+                    </p>
+
+                    <div className="flex items-center gap-4 text-xs text-gray-500 border-t pt-4">
+                      <span>📚 {course._count.modules} Módulos</span>
+                      <span>👥 {course._count.enrollments} Alumnos</span>
+                    </div>
+                  </div>
+                </Link>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    );
+  } catch (error) {
+    logger.error("Critical error in TeacherDashboardPage", error);
+    throw error;
+  }
+}

app/(protected)/teacher/uploads/page.tsx

@@ -0,0 +1,7 @@
+import { requireTeacher } from "@/lib/auth/requireTeacher";
+import TeacherUploadsLibraryClient from "@/components/teacher/TeacherUploadsLibraryClient";
+
+export default async function TeacherUploadsPage() {
+  await requireTeacher();
+  return <TeacherUploadsLibraryClient />;
+}

app/(public)/assistant/page.tsx

@@ -2,9 +2,21 @@ import AssistantDrawer from "@/components/AssistantDrawer";
 
 export default function AssistantPage() {
   return (
-    <div className="space-y-4">
-      <h1 className="acve-heading text-4xl md:text-6xl">AI Assistant (Demo)</h1>
-      <p className="text-lg text-slate-600 md:text-2xl">This page renders the same assistant UI as the global drawer.</p>
+    <div className="acve-page">
+      <section className="acve-panel acve-section-base">
+        <p className="acve-pill mb-3 w-fit">AI Assistant (Demo)</p>
+        <h1 className="text-4xl font-semibold leading-tight text-[#222a38] md:text-5xl">Ask legal English questions in context</h1>
+        <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
+          This is a product preview. Responses are mock while backend retrieval and tutor logic are being integrated.
+        </p>
+      </section>
+
+      <section className="grid gap-3 md:grid-cols-3">
+        <article className="acve-panel p-4 text-sm text-slate-700">Use for clause terms, case-study guidance, and writing clarity tips.</article>
+        <article className="acve-panel p-4 text-sm text-slate-700">For legal advice or final authority, always verify with qualified counsel.</article>
+        <article className="acve-panel p-4 text-sm text-slate-700">Conversation persistence is placeholder-only in this MVP stage.</article>
+      </section>
+
       <AssistantDrawer mode="page" />
     </div>
   );

app/(public)/case-studies/[slug]/page.tsx

@@ -3,6 +3,13 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
+import type { CourseLevel } from "@/types/course";
+
+const levelBadgeClass = (level: CourseLevel) => {
+  if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
+  if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
+  return "bg-violet-100 text-violet-900 border border-violet-200";
+};
 
 export default function CaseStudyDetailPage() {
   const params = useParams<{ slug: string }>();
@@ -21,35 +28,43 @@ export default function CaseStudyDetailPage() {
   }
 
   return (
-    <article className="acve-panel space-y-6 p-6">
-      <header className="space-y-2">
-        <p className="text-lg text-slate-500">
-          {caseStudy.citation} ({caseStudy.year})
-        </p>
-        <h1 className="acve-heading text-3xl md:text-6xl">{caseStudy.title}</h1>
-        <p className="text-base text-slate-600 md:text-2xl">
-          Topic: {caseStudy.topic} | Level: {caseStudy.level}
-        </p>
+    <article className="acve-page">
+      <header className="acve-panel acve-section-base">
+        <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
+        <h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          <span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">Topic: {caseStudy.topic}</span>
+          <span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
+        </div>
       </header>
 
-      <section>
-        <h2 className="text-2xl text-[#232b39] md:text-4xl">Summary</h2>
-        <p className="mt-2 text-lg leading-relaxed text-slate-700 md:text-3xl">{caseStudy.summary}</p>
-      </section>
+      <section className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
+        <div className="acve-panel p-5">
+          <h2 className="text-2xl font-semibold text-[#232b39]">Case Summary</h2>
+          <p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summary}</p>
 
-      <section>
-        <h2 className="text-2xl text-[#232b39] md:text-4xl">Key legal terms explained</h2>
-        <div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {caseStudy.keyTerms.map((term, index) => (
-            <div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
-              <p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
-              <p className="mt-1 text-base text-slate-600 md:text-xl">Legal explanation block {index + 1}</p>
-            </div>
-          ))}
+          <h3 className="mt-5 text-lg font-semibold text-[#232b39]">Reading Guide (Placeholder)</h3>
+          <ul className="mt-2 space-y-2 text-sm text-slate-700">
+            <li className="rounded-lg border border-slate-200 bg-white px-3 py-2">1. Identify the legal issue and the jurisdiction context.</li>
+            <li className="rounded-lg border border-slate-200 bg-white px-3 py-2">2. Highlight the key reasoning applied by the court.</li>
+            <li className="rounded-lg border border-slate-200 bg-white px-3 py-2">3. Extract practical implications for drafting or litigation.</li>
+          </ul>
         </div>
+
+        <aside className="acve-panel p-5">
+          <h2 className="text-lg font-semibold text-[#232b39]">Key Legal Terms</h2>
+          <div className="mt-3 space-y-2">
+            {caseStudy.keyTerms.map((term, index) => (
+              <div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
+                <p className="text-base font-semibold text-brand">{term}</p>
+                <p className="mt-1 text-sm text-slate-600">Legal explanation block {index + 1}</p>
+              </div>
+            ))}
+          </div>
+        </aside>
       </section>
 
-      <section className="border-t border-slate-200 pt-5">
+      <section className="border-t border-slate-200 pt-1">
         <Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
           Back to Case Library
         </Link>

app/(public)/case-studies/page.tsx

@@ -3,73 +3,91 @@
 import Link from "next/link";
 import { useState } from "react";
 import { mockCaseStudies } from "@/lib/data/mockCaseStudies";
+import type { CourseLevel } from "@/types/course";
+
+const levelBadgeClass = (level: CourseLevel) => {
+  if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
+  if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
+  return "bg-violet-100 text-violet-900 border border-violet-200";
+};
 
 export default function CaseStudiesPage() {
   const [activeSlug, setActiveSlug] = useState(mockCaseStudies[0]?.slug ?? "");
   const activeCase = mockCaseStudies.find((item) => item.slug === activeSlug) ?? mockCaseStudies[0];
 
   return (
-    <div className="space-y-7">
-      <section className="text-center">
-        <p className="acve-pill mx-auto mb-4 w-fit">Case Studies</p>
-        <h1 className="acve-heading text-4xl md:text-6xl">Learn from Landmark Cases</h1>
-        <p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
-          Real English law cases explained with key legal terms and practical insights.
-        </p>
+    <div className="acve-page">
+      <section className="acve-panel acve-section-base">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <p className="acve-pill mb-3 w-fit">Case Studies</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">Landmark Cases, distilled for learning</h1>
+            <p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Review outcomes, legal terms, and practical context in a cleaner, high-density reading layout.
+            </p>
+          </div>
+          <div className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Library</p>
+            <p className="mt-1 text-xl font-semibold text-slate-900">{mockCaseStudies.length} cases</p>
+          </div>
+        </div>
       </section>
 
-      <section className="grid gap-5 lg:grid-cols-[0.9fr_1.8fr]">
-        <div className="space-y-3">
+      <section className="grid gap-4 lg:grid-cols-[0.9fr_1.7fr]">
+        <aside className="acve-panel p-3">
+          <p className="mb-3 px-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Browse Cases</p>
+          <div className="space-y-2">
           {mockCaseStudies.map((caseStudy) => {
             const isActive = caseStudy.slug === activeCase.slug;
             return (
               <button
                 key={caseStudy.slug}
-                className={`w-full rounded-2xl border p-4 text-left transition ${
-                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white hover:border-slate-400"
+                className={`w-full rounded-xl border p-3 text-left transition ${
+                  isActive ? "border-brand bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-400"
                 }`}
                 onClick={() => setActiveSlug(caseStudy.slug)}
                 type="button"
               >
-                <h2 className="text-xl text-[#232b39] md:text-3xl">{caseStudy.title}</h2>
-                <p className="mt-1 text-base text-slate-500 md:text-2xl">
+                <h2 className="text-lg font-semibold leading-tight text-[#232b39] md:text-xl">{caseStudy.title}</h2>
+                <p className="mt-1 text-sm text-slate-500 md:text-base">
                   [{caseStudy.year}] {caseStudy.citation}
                 </p>
-                <div className="mt-3 flex items-center gap-2 text-sm">
-                  <span className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{caseStudy.topic}</span>
-                  <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{caseStudy.level}</span>
+                <div className="mt-2 flex items-center gap-2 text-xs">
+                  <span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.topic}</span>
+                  <span className={`rounded-full px-2 py-1 font-semibold ${levelBadgeClass(caseStudy.level)}`}>{caseStudy.level}</span>
                 </div>
               </button>
             );
           })}
-        </div>
+          </div>
+        </aside>
 
-        <article className="acve-panel p-6">
-          <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
+        <article className="acve-panel p-5 md:p-6">
+          <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
             <div>
-              <h2 className="text-3xl text-[#202936] md:text-6xl">{activeCase.title}</h2>
-              <p className="mt-2 text-lg text-slate-500 md:text-3xl">
+              <h2 className="text-3xl font-semibold leading-tight text-[#202936] md:text-4xl">{activeCase.title}</h2>
+              <p className="mt-2 text-base text-slate-500 md:text-xl">
                 {activeCase.citation} | {activeCase.year}
               </p>
             </div>
-            <div className="space-y-2 text-right text-sm">
-              <p className="rounded-full bg-accent px-3 py-1 font-semibold text-white">{activeCase.level}</p>
+            <div className="space-y-2 text-right text-xs">
+              <p className={`rounded-full px-3 py-1 font-semibold ${levelBadgeClass(activeCase.level)}`}>{activeCase.level}</p>
               <p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
             </div>
           </div>
 
-          <section className="border-t border-slate-200 pt-5">
-            <h3 className="text-4xl text-[#232b39]">Case Summary</h3>
-            <p className="mt-3 text-lg leading-relaxed text-slate-700 md:text-3xl">{activeCase.summary}</p>
+          <section className="border-t border-slate-200 pt-4">
+            <h3 className="text-2xl font-semibold text-[#232b39]">Case Summary</h3>
+            <p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summary}</p>
           </section>
 
-          <section className="mt-6">
-            <h3 className="mb-3 text-4xl text-[#232b39]">Key Legal Terms Explained</h3>
-            <div className="space-y-3">
+          <section className="mt-5">
+            <h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Key Legal Terms Explained</h3>
+            <div className="grid gap-3 sm:grid-cols-2">
               {activeCase.keyTerms.map((term) => (
-                <div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
-                  <p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
-                  <p className="mt-1 text-base text-slate-600 md:text-2xl">Term explanation will be expanded in phase 2 content.</p>
+                <div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
+                  <p className="text-lg font-semibold text-brand">{term}</p>
+                  <p className="mt-1 text-sm text-slate-600">Detailed explanation will expand in phase 2 content.</p>
                 </div>
               ))}
             </div>

app/(public)/courses/[slug]/page.tsx

@@ -1,135 +1,184 @@
-"use client";
-
 import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import ProgressBar from "@/components/ProgressBar";
-import { getCourseBySlug } from "@/lib/data/courseCatalog";
-import { getCourseProgressPercent, progressUpdatedEventName } from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course } from "@/types/course";
+import { notFound } from "next/navigation";
+import { db } from "@/lib/prisma";
+import { requireUser } from "@/lib/auth/requireUser";
 
-export default function CourseDetailPage() {
-  const params = useParams<{ slug: string }>();
-  const slug = params.slug;
-  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
-  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
-
-  const [userId, setUserId] = useState("guest");
-  const [isAuthed, setIsAuthed] = useState(false);
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const loadCourse = () => {
-      setCourse(getCourseBySlug(slug));
-      setHasResolvedCourse(true);
-    };
-    loadCourse();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
-  }, [slug]);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      const nextId = data.user?.id ?? "guest";
-      setUserId(nextId);
-      setIsAuthed(Boolean(data.user));
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-      setIsAuthed(Boolean(session?.user));
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    if (!course) return;
-    const load = () => setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
-    load();
-    window.addEventListener(progressUpdatedEventName, load);
-    return () => window.removeEventListener(progressUpdatedEventName, load);
-  }, [course, userId]);
-
-  if (!course && !hasResolvedCourse) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <p className="text-slate-600">Loading course...</p>
-      </div>
-    );
+function getText(value: unknown): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    if (typeof record.en === "string") return record.en;
+    if (typeof record.es === "string") return record.es;
   }
+  return "";
+}
 
-  if (!course) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
-        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
-        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
-          Back to courses
-        </Link>
-      </div>
-    );
-  }
+const levelLabel = (level: string) => {
+  if (level === "BEGINNER") return "Beginner";
+  if (level === "INTERMEDIATE") return "Intermediate";
+  if (level === "ADVANCED") return "Advanced";
+  return level;
+};
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export default async function CourseDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+
+  const course = await db.course.findFirst({
+    where: { slug, status: "PUBLISHED" },
+    include: {
+      author: { select: { fullName: true } },
+      modules: {
+        orderBy: { orderIndex: "asc" },
+        include: {
+          lessons: {
+            orderBy: { orderIndex: "asc" },
+            select: { id: true, title: true, estimatedDuration: true },
+          },
+        },
+      },
+      _count: { select: { enrollments: true } },
+    },
+  });
+
+  if (!course) notFound();
+
+  const user = await requireUser();
+  const isAuthed = Boolean(user?.id);
+
+  const title = getText(course.title) || "Untitled course";
+  const summary = getText(course.description) || "";
+
+  const lessons = course.modules.flatMap((m) =>
+    m.lessons.map((l) => ({
+      id: l.id,
+      title: getText(l.title) || "Untitled lesson",
+      minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
+    })),
+  );
+  const lessonsCount = lessons.length;
 
   const redirect = `/courses/${course.slug}/learn`;
   const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
 
+  const learningOutcomes = [
+    "Understand key legal vocabulary in context",
+    "Apply contract and case analysis patterns",
+    "Improve professional written legal communication",
+  ];
+
   return (
-    <div className="grid gap-7 lg:grid-cols-[1.9fr_0.9fr]">
-      <section className="pt-1">
-        <Link className="inline-flex items-center gap-2 text-lg text-slate-600 hover:text-brand md:text-2xl" href="/courses">
-          <span className="text-xl">{"<-"}</span>
-          Back to Courses
-        </Link>
+    <div className="acve-page">
+      <section className="acve-panel overflow-hidden p-0">
+        <div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
+          <div className="acve-section-base">
+            <Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
+              <span>{"<-"}</span>
+              Back to Courses
+            </Link>
 
-        <div className="mt-6 flex items-center gap-3 text-base text-slate-600 md:text-lg">
-          <span className="rounded-full bg-accent px-4 py-1 text-base font-semibold text-white">{course.level}</span>
-          <span>Contract Law</span>
-        </div>
+            <div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
+              <span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
+                {levelLabel(course.level)}
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
+                {course.status.toLowerCase()}
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-3 py-1">
+                {lessonsCount} lessons
+              </span>
+            </div>
 
-        <h1 className="acve-heading mt-5 text-4xl leading-tight md:text-7xl">{course.title}</h1>
-        <p className="mt-5 max-w-5xl text-xl leading-relaxed text-slate-600 md:text-4xl">{course.summary}</p>
+            <h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
+            <p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>
 
-        <div className="mt-7 flex flex-wrap items-center gap-5 text-lg text-slate-600 md:text-3xl">
-          <span className="font-semibold text-slate-800">Rating {course.rating.toFixed(1)}</span>
-          <span>{course.students.toLocaleString()} students</span>
-          <span>{course.weeks} weeks</span>
-          <span>{course.lessonsCount} lessons</span>
+            <div className="mt-5 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">
+                  {course._count.enrollments.toLocaleString()}
+                </p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
+                <p className="mt-1 text-lg font-semibold text-slate-900">
+                  {course.author.fullName || "ACVE Team"}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
+            <ul className="mt-3 space-y-2">
+              {learningOutcomes.map((item) => (
+                <li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </aside>
         </div>
       </section>
 
-      <aside className="acve-panel space-y-5 p-7">
-        <h2 className="text-2xl text-slate-700 md:text-4xl">Your Progress</h2>
-        <div className="flex items-end justify-between">
-          <p className="text-4xl font-semibold text-brand md:text-6xl">{progress}%</p>
-          <p className="text-lg text-slate-600 md:text-3xl">
-            {Math.round((progress / 100) * course.lessonsCount)}/{course.lessonsCount} lessons
-          </p>
-        </div>
-        <ProgressBar value={progress} />
-        <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
-          <p className="mb-4 font-semibold text-slate-800">{course.instructor}</p>
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Duration</p>
-          <p className="mb-4 font-semibold text-slate-800">{course.weeks} weeks</p>
-          <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
-          <p className="font-semibold text-slate-800">{course.level}</p>
-        </div>
-        {isAuthed ? (
-          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={redirect}>
-            Start Course
-          </Link>
-        ) : (
-          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={loginUrl}>
-            Login to start
-          </Link>
-        )}
-      </aside>
+      <section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
+        <article className="acve-panel acve-section-base">
+          <h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
+          <div className="mt-4 grid gap-2">
+            {lessons.slice(0, 5).map((lesson, index) => (
+              <div
+                key={lesson.id}
+                className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
+              >
+                <span className="font-medium text-slate-800">
+                  Lesson {index + 1}: {lesson.title}
+                </span>
+                <span className="text-slate-500">{lesson.minutes} min</span>
+              </div>
+            ))}
+            {lessons.length === 0 && (
+              <p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
+                No lessons yet. Check back soon.
+              </p>
+            )}
+          </div>
+        </article>
+
+        <aside className="acve-panel space-y-5 p-6">
+          <h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
+          <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
+            <p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
+            <p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
+            <p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
+            <p className="font-semibold text-slate-800">{lessonsCount}</p>
+          </div>
+          {isAuthed ? (
+            <Link
+              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
+              href={redirect}
+            >
+              Start Course
+            </Link>
+          ) : (
+            <Link
+              className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
+              href={loginUrl}
+            >
+              Login to start
+            </Link>
+          )}
+        </aside>
+      </section>
     </div>
   );
 }

app/(public)/courses/page.tsx

@@ -1,115 +1,93 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
 import CourseCard from "@/components/CourseCard";
-import Tabs from "@/components/Tabs";
-import { getAllCourses } from "@/lib/data/courseCatalog";
-import {
-  getCourseProgressPercent,
-  progressUpdatedEventName,
-} from "@/lib/progress/localProgress";
-import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
-import { supabaseBrowser } from "@/lib/supabase/browser";
-import type { Course, CourseLevel } from "@/types/course";
+import { db } from "@/lib/prisma";
 
-const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
-
-export default function CoursesPage() {
-  const [activeLevel, setActiveLevel] = useState<CourseLevel>("Beginner");
-  const [userId, setUserId] = useState("guest");
-  const [progressBySlug, setProgressBySlug] = useState<Record<string, number>>({});
-  const [courses, setCourses] = useState<Course[]>(() => getAllCourses());
-
-  const counts = useMemo(
-    () =>
-      levels.reduce(
-        (acc, level) => {
-          acc[level] = courses.filter((course) => course.level === level).length;
-          return acc;
+export default async function CoursesPage() {
+  const courses = await db.course.findMany({
+    where: {
+      status: "PUBLISHED",
+    },
+    include: {
+      author: {
+        select: {
+          fullName: true,
         },
-        {} as Record<CourseLevel, number>,
-      ),
-    [courses],
-  );
+      },
+      modules: {
+        select: {
+          _count: {
+            select: {
+              lessons: true,
+            },
+          },
+        },
+      },
+      _count: {
+        select: {
+          enrollments: true,
+        },
+      },
+    },
+    orderBy: {
+      updatedAt: "desc",
+    },
+  });
 
-  useEffect(() => {
-    const loadCourses = () => {
-      setCourses(getAllCourses());
-    };
-
-    loadCourses();
-    window.addEventListener(teacherCoursesUpdatedEventName, loadCourses);
-    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourses);
-  }, []);
-
-  useEffect(() => {
-    const client = supabaseBrowser();
-    if (!client) return;
-
-    client.auth.getUser().then(({ data }) => {
-      setUserId(data.user?.id ?? "guest");
-    });
-
-    const { data } = client.auth.onAuthStateChange((_event, session) => {
-      setUserId(session?.user?.id ?? "guest");
-    });
-
-    return () => data.subscription.unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    const load = () => {
-      const nextProgress: Record<string, number> = {};
-      for (const course of courses) {
-        nextProgress[course.slug] = getCourseProgressPercent(userId, course.slug, course.lessons.length);
-      }
-      setProgressBySlug(nextProgress);
-    };
-
-    load();
-    window.addEventListener(progressUpdatedEventName, load);
-    window.addEventListener(teacherCoursesUpdatedEventName, load);
-    return () => {
-      window.removeEventListener(progressUpdatedEventName, load);
-      window.removeEventListener(teacherCoursesUpdatedEventName, load);
-    };
-  }, [courses, userId]);
-
-  const filteredCourses = useMemo(
-    () => courses.filter((course) => course.level === activeLevel),
-    [activeLevel, courses],
+  const totalLessons = courses.reduce(
+    (total, course) => total + course.modules.reduce((courseTotal, module) => courseTotal + module._count.lessons, 0),
+    0,
   );
 
   return (
-    <div className="space-y-8">
-      <section className="acve-panel p-5">
-        <div className="flex flex-wrap items-center gap-4">
-          <Tabs active={activeLevel} onChange={setActiveLevel} options={levels} />
-          <span className="text-base font-semibold text-slate-600">{counts[activeLevel]} courses in this level</span>
-        </div>
-      </section>
-
-      <section className="acve-panel px-6 py-8">
-        <div className="flex items-start gap-4">
-          <div className="mt-1 flex h-12 w-12 items-center justify-center rounded-xl bg-accent text-2xl font-semibold text-white">C</div>
-          <div>
-            <h1 className="text-3xl text-[#202a39] md:text-5xl">{activeLevel} Level Courses</h1>
-            <p className="mt-2 text-base text-slate-600 md:text-2xl">
-              {activeLevel === "Beginner"
-                ? "Perfect for those new to English law. Build a strong foundation with fundamental concepts and terminology."
-                : activeLevel === "Intermediate"
-                  ? "Deepen practical analysis skills with real-world drafting, contract review, and legal communication."
-                  : "Master complex legal reasoning and advanced writing for high-impact legal practice."}
+    <div className="acve-page">
+      <section className="acve-panel overflow-hidden p-0">
+        <div className="grid gap-0 lg:grid-cols-[1.45fr_0.95fr]">
+          <div className="acve-section-base">
+            <p className="acve-pill mb-4 w-fit">Course Catalog</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#202a39] md:text-4xl">Build your legal English learning path</h1>
+            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Discover our published legal English courses and start with the path that matches your level.
             </p>
+            <div className="mt-5 grid gap-3 sm:grid-cols-3">
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Courses</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{courses.length}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published Lessons</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">{totalLessons}</p>
+              </div>
+              <div className="rounded-xl border border-slate-200 bg-white p-3">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructors</p>
+                <p className="mt-1 text-2xl font-semibold text-slate-900">
+                  {new Set(courses.map((course) => course.author.fullName || "ACVE Team")).size}
+                </p>
+              </div>
+            </div>
           </div>
+
+          <aside className="border-t border-slate-200 bg-slate-50/80 p-5 lg:border-l lg:border-t-0">
+            <h2 className="text-base font-semibold text-slate-800">Open Access</h2>
+            <p className="mt-2 text-sm text-slate-600">
+              This catalog is public. Open any course card to visit the landing page and enroll.
+            </p>
+          </aside>
         </div>
       </section>
 
-      <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-        {filteredCourses.map((course) => (
-          <CourseCard key={course.slug} course={course} progress={progressBySlug[course.slug] ?? 0} />
-        ))}
-      </div>
+      {courses.length === 0 ? (
+        <section className="acve-panel acve-section-base">
+          <div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center">
+            <h2 className="text-2xl font-semibold text-slate-900">Coming Soon</h2>
+            <p className="mt-2 text-slate-600">We are preparing new courses. Please check back shortly.</p>
+          </div>
+        </section>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {courses.map((course) => (
+            <CourseCard key={course.slug} course={course} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

app/(public)/page.tsx

@@ -10,22 +10,22 @@ const highlights = [
 
 export default function HomePage() {
   return (
-    <div className="space-y-8">
-      <section className="acve-panel relative overflow-hidden p-6 md:p-10">
-        <div className="grid items-start gap-8 lg:grid-cols-[1.1fr_0.9fr]">
+    <div className="acve-page">
+      <section className="acve-panel relative overflow-hidden p-5 md:p-8">
+        <div className="grid items-start gap-6 lg:grid-cols-[1.15fr_0.85fr]">
           <div>
-            <p className="acve-pill mb-5 w-fit text-base">
+            <p className="acve-pill mb-4 w-fit text-sm">
               <span className="mr-2 text-accent">*</span>
               Professional Legal Education
             </p>
-            <h1 className="acve-heading text-4xl leading-[1.1] md:text-7xl">Learn English Law with Confidence</h1>
-            <p className="mt-5 max-w-2xl text-lg leading-relaxed text-slate-600 md:text-2xl">
+            <h1 className="acve-heading text-4xl leading-tight md:text-5xl">Learn English Law with Confidence</h1>
+            <p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
               Courses, case studies, and guided practice designed for Latin American professionals and students.
             </p>
-            <ul className="mt-7 space-y-3">
+            <ul className="mt-5 grid gap-2 sm:grid-cols-2">
               {highlights.map((item) => (
-                <li key={item} className="flex items-start gap-3 text-base text-slate-700 md:text-xl">
-                  <span className="mt-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-accent text-base text-accent">
+                <li key={item} className="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
+                  <span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full border border-accent text-xs text-accent">
                     v
                   </span>
                   {item}
@@ -33,11 +33,11 @@ export default function HomePage() {
               ))}
             </ul>
 
-            <div className="mt-8 flex flex-wrap gap-3">
-              <Link className="acve-button-primary px-8 py-3 text-lg font-semibold transition hover:brightness-105" href="/courses">
+            <div className="mt-6 flex flex-wrap gap-2">
+              <Link className="acve-button-primary px-6 py-2 text-sm font-semibold transition hover:brightness-105" href="/courses">
                 Start Learning
               </Link>
-              <Link className="acve-button-secondary px-8 py-3 text-lg font-semibold transition hover:bg-brand-soft" href="/courses">
+              <Link className="acve-button-secondary px-6 py-2 text-sm font-semibold transition hover:bg-brand-soft" href="/courses">
                 Explore Courses
               </Link>
             </div>
@@ -47,29 +47,29 @@ export default function HomePage() {
             <div className="overflow-hidden rounded-3xl border border-slate-300 bg-white shadow-sm">
               <Image
                 alt="ACVE legal library"
-                className="h-[420px] w-full object-cover object-right md:h-[600px]"
+                className="h-[360px] w-full object-cover object-right md:h-[460px]"
                 height={900}
                 priority
                 src="/images/hero-reference.png"
                 width={700}
               />
             </div>
-            <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-slate-300 bg-white px-5 py-4 shadow-sm">
+            <div className="absolute bottom-4 left-4 right-4 rounded-2xl border border-slate-300 bg-white px-4 py-3 shadow-sm">
               <p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
-              <p className="text-xl font-semibold text-slate-800">Legal Assistant Ready</p>
-              <p className="text-base text-slate-500">Ask me anything about English Law</p>
+              <p className="text-lg font-semibold text-slate-800">Legal Assistant Ready</p>
+              <p className="text-sm text-slate-500">Ask me anything about English Law</p>
             </div>
           </div>
         </div>
 
-        <div className="mt-10 grid gap-4 border-t border-slate-200 pt-7 text-center text-sm font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/courses">
+        <div className="mt-6 grid gap-3 border-t border-slate-200 pt-5 text-center text-xs font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/courses">
             Browse courses
           </Link>
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/case-studies">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/case-studies">
             Read case studies
           </Link>
-          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-4 hover:border-brand hover:text-brand" href="/practice">
+          <Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/practice">
             Practice and exercises
           </Link>
         </div>

app/(public)/practice/page.tsx

@@ -3,13 +3,23 @@ import { mockPracticeModules } from "@/lib/data/mockPractice";
 
 export default function PracticePage() {
   return (
-    <div className="space-y-7">
-      <section className="text-center">
-        <p className="acve-pill mx-auto mb-4 w-fit">Practice and Exercises</p>
-        <h1 className="acve-heading text-4xl md:text-6xl">Master Your Skills</h1>
-        <p className="mx-auto mt-3 max-w-4xl text-lg text-slate-600 md:text-3xl">
-          Interactive exercises designed to reinforce your understanding of English law concepts.
-        </p>
+    <div className="acve-page">
+      <section className="acve-panel acve-section-base">
+        <div className="grid gap-4 md:grid-cols-[1.5fr_0.9fr]">
+          <div>
+            <p className="acve-pill mb-3 w-fit">Practice and Exercises</p>
+            <h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">Build confidence through short practice sessions</h1>
+            <p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">
+              Train legal vocabulary, clause analysis, and case reasoning with quick modules you can complete in minutes.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Practice Overview</p>
+            <p className="mt-2 text-2xl font-semibold text-slate-900">{mockPracticeModules.length} modules</p>
+            <p className="mt-2 text-sm text-slate-600">Interactive now: {mockPracticeModules.filter((item) => item.isInteractive).length}</p>
+            <p className="text-sm text-slate-600">Coming soon: {mockPracticeModules.filter((item) => !item.isInteractive).length}</p>
+          </div>
+        </div>
       </section>
 
       <section className="grid gap-4 md:grid-cols-3">
@@ -17,22 +27,27 @@ export default function PracticePage() {
           <Link
             key={module.slug}
             href={`/practice/${module.slug}`}
-            className={`rounded-2xl border p-6 shadow-sm transition hover:-translate-y-0.5 ${
-              index === 0 ? "border-brand bg-white" : "border-slate-300 bg-white"
+            className={`rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 ${
+              index === 0 ? "border-brand bg-white" : "border-slate-200 bg-white hover:border-slate-300"
             }`}
           >
-            <div className="mb-3 text-3xl text-brand md:text-4xl">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
-            <h2 className="text-2xl text-[#222a38] md:text-4xl">{module.title}</h2>
-            <p className="mt-2 text-lg text-slate-600 md:text-2xl">{module.description}</p>
-            <p className="mt-4 text-sm font-semibold uppercase tracking-wide text-slate-500">
+            <div className="mb-2 flex items-center justify-between">
+              <div className="text-2xl text-brand">{index === 0 ? "A/" : index === 1 ? "[]" : "O"}</div>
+              <span className="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-600">
+                {module.questions?.length ? `${module.questions.length} questions` : "Scaffolded"}
+              </span>
+            </div>
+            <h2 className="text-2xl leading-tight text-[#222a38]">{module.title}</h2>
+            <p className="mt-2 text-base leading-relaxed text-slate-600">{module.description}</p>
+            <p className="mt-4 text-xs font-semibold uppercase tracking-wide text-slate-500">
               {module.isInteractive ? "Interactive now" : "Coming soon"}
             </p>
           </Link>
         ))}
       </section>
 
-      <section className="acve-panel p-5 text-center">
-        <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">
+      <section className="acve-panel p-4 text-center">
+        <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
           Open a module to start the full interactive flow
         </p>
       </section>

app/globals copy.css

@@ -0,0 +1,154 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+  --acve-bg: #f3f3f5;
+  --acve-panel: #ffffff;
+  --acve-ink: #273040;
+  --acve-muted: #667085;
+  --acve-line: #d8dbe2;
+  --acve-brand: #98143f;
+  --acve-brand-soft: #f8eef2;
+  --acve-gold: #d4af37;
+  --acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
+  --acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: radial-gradient(circle at top right, #fcfcfd 0%, #f5f5f7 55%, #f0f0f2 100%);
+  color: var(--acve-ink);
+  font-family: var(--acve-body-font);
+  text-rendering: geometricPrecision;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--acve-heading-font);
+}
+
+::selection {
+  background: #f2d6df;
+  color: #421020;
+}
+
+.acve-shell {
+  background: linear-gradient(180deg, #f7f7f8 0%, #f2f3f5 100%);
+}
+
+.acve-panel {
+  border: 1px solid var(--acve-line);
+  background: var(--acve-panel);
+  border-radius: 16px;
+}
+
+.acve-heading {
+  color: var(--acve-brand);
+  font-family: var(--acve-heading-font);
+  letter-spacing: 0.01em;
+}
+
+.acve-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--acve-line);
+  border-radius: 9999px;
+  background: #fafafa;
+  color: #384253;
+  padding: 8px 14px;
+  font-size: 0.95rem;
+}
+
+.acve-button-primary {
+  background: var(--acve-brand);
+  color: #ffffff;
+  border-radius: 12px;
+  border: 1px solid var(--acve-brand);
+}
+
+.acve-button-secondary {
+  border: 1px solid var(--acve-brand);
+  color: var(--acve-brand);
+  background: #ffffff;
+  border-radius: 12px;
+}
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/globals.css

@@ -3,17 +3,56 @@
 @tailwind utilities;
 
 :root {
-  color-scheme: light;
-  --acve-bg: #f3f3f5;
-  --acve-panel: #ffffff;
-  --acve-ink: #273040;
-  --acve-muted: #667085;
-  --acve-line: #d8dbe2;
+  /* ACVE core variables */
   --acve-brand: #98143f;
-  --acve-brand-soft: #f8eef2;
-  --acve-gold: #d4af37;
+  --acve-ink: #253247;
+  --acve-line: #d8dce3;
+  --acve-panel: #ffffff;
   --acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
   --acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
+  --acve-space-1: 4px;
+  --acve-space-2: 8px;
+  --acve-space-3: 12px;
+  --acve-space-4: 16px;
+  --acve-space-5: 24px;
+  --acve-space-6: 32px;
+  --acve-space-7: 48px;
+
+  /* SHADCN MAPPING */
+  --background: 0 0% 98%;
+  /* Matches your #f5f5f7 approx */
+  --foreground: 220 24% 20%;
+  /* Matches your --acve-ink */
+
+  --primary: 341 77% 34%;
+  /* Your Burgundy #98143f */
+  --primary-foreground: 0 0% 100%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 220 24% 20%;
+
+  --border: 223 18% 87%;
+  /* Matches your --acve-line */
+  --input: 223 18% 87%;
+  --ring: 341 77% 34%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --radius: 0.75rem;
+  /* 12px to match your primary button */
 }
 
 html,
@@ -23,6 +62,8 @@ body {
   background: radial-gradient(circle at top right, #fcfcfd 0%, #f5f5f7 55%, #f0f0f2 100%);
   color: var(--acve-ink);
   font-family: var(--acve-body-font);
+  font-size: 16px;
+  line-height: 1.45;
   text-rendering: geometricPrecision;
 }
 
@@ -31,6 +72,25 @@ a {
   text-decoration: none;
 }
 
+a,
+button,
+input,
+select,
+textarea,
+[role="button"] {
+  outline-color: transparent;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role="button"]:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
 h1,
 h2,
 h3,
@@ -57,6 +117,7 @@ h4 {
   color: var(--acve-brand);
   font-family: var(--acve-heading-font);
   letter-spacing: 0.01em;
+  line-height: 1.1;
 }
 
 .acve-pill {
@@ -75,6 +136,7 @@ h4 {
   color: #ffffff;
   border-radius: 12px;
   border: 1px solid var(--acve-brand);
+  min-height: 44px;
 }
 
 .acve-button-secondary {
@@ -82,4 +144,25 @@ h4 {
   color: var(--acve-brand);
   background: #ffffff;
   border-radius: 12px;
+  min-height: 44px;
+}
+
+.acve-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--acve-space-5);
+}
+
+.acve-section-tight {
+  padding: var(--acve-space-4);
+}
+
+.acve-section-base {
+  padding: var(--acve-space-5);
+}
+
+@media (min-width: 768px) {
+  .acve-page {
+    gap: var(--acve-space-6);
+  }
 }

app/layout.tsx

@@ -15,7 +15,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
       <body>
         <div className="acve-shell flex min-h-screen flex-col">
           <Navbar />
-          <main className="mx-auto w-full max-w-[1300px] flex-1 px-4 py-6 md:py-8">{children}</main>
+          <main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-5 md:px-5 md:py-7">{children}</main>
           <Footer />
         </div>
         <AssistantDrawer />