From b1394f53306a34e66ec6c33ce38528104301d386 Mon Sep 17 00:00:00 2001
From: Faisal Misbah <faisalmisbah23@gmail.com>
Date: Fri, 6 Nov 2026 22:59:38 +0500
Subject: [PATCH 1/4] feat(courses): course ratings and reviews

---
 .../(catalog)/catalog/[courseSlug]/page.tsx   |  26 ++-
 .../app/(learn)/(catalog)/catalog/page.tsx    |   2 +
 .../(main)/courses/[courseSlug]/page.tsx      |  17 ++
 .../courses/[courseSlug]/reports/page.tsx     |  58 ++++-
 .../components/learn/catalog-course-card.tsx  |  12 +
 .../chapter-complete-celebration-modal.tsx    |  59 ++++-
 frontend/src/components/learn/chapter-nav.tsx |   1 +
 .../components/learn/course-rating-card.tsx   | 151 +++++++++++++
 .../components/learn/course-rating-link.tsx   | 104 +++++++++
 .../src/components/learn/course-reviews.tsx   |  76 +++++++
 .../learn/mark-chapter-complete.tsx           |   4 +
 frontend/src/components/learn/star-rating.tsx |  65 ++++++
 frontend/src/server/actions/course-rating.ts  |  40 ++++
 frontend/src/shared/api/catalog.ts            |  11 +-
 frontend/src/shared/api/teach.ts              |   6 +
 .../learn/course-overview-content.tsx         |   7 +-
 .../components/learn/course-overview-hero.tsx |   5 +
 .../learning-ui/src/shared/api/catalog.ts     |  11 +-
 .../migration.sql                             |  31 +++
 .../migration.sql                             |   2 +
 server/prisma/schema.prisma                   |  27 +++
 server/src/controllers/catalog.ts             |   7 +
 server/src/controllers/courses.ts             |  17 ++
 server/src/routes/v1/catalog.ts               |   5 +-
 server/src/routes/v1/courses.ts               |  18 +-
 server/src/services/catalog/catalog.ts        |   2 +
 server/src/services/courses/overview.ts       |  17 +-
 server/src/services/courses/ratings.ts        | 205 ++++++++++++++++++
 server/src/services/teach/reports.ts          |   5 +-
 server/src/shared/api/catalog.ts              |  11 +-
 server/src/shared/api/teach.ts                |   6 +
 server/src/validations/courses.ts             |  13 ++
 server/tests/api/course-ratings.test.ts       |  92 ++++++++
 33 files changed, 1096 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/learn/course-rating-card.tsx
 create mode 100644 frontend/src/components/learn/course-rating-link.tsx
 create mode 100644 frontend/src/components/learn/course-reviews.tsx
 create mode 100644 frontend/src/components/learn/star-rating.tsx
 create mode 100644 frontend/src/server/actions/course-rating.ts
 create mode 100644 server/prisma/migrations/20261106180000_add_course_ratings/migration.sql
 create mode 100644 server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql
 create mode 100644 server/src/services/courses/ratings.ts
 create mode 100644 server/tests/api/course-ratings.test.ts

diff --git a/frontend/src/app/(learn)/(catalog)/catalog/[courseSlug]/page.tsx b/frontend/src/app/(learn)/(catalog)/catalog/[courseSlug]/page.tsx
index 41f41d746..90b8464ca 100644
--- a/frontend/src/app/(learn)/(catalog)/catalog/[courseSlug]/page.tsx
+++ b/frontend/src/app/(learn)/(catalog)/catalog/[courseSlug]/page.tsx
@@ -4,7 +4,7 @@ import type { CatalogCourseDetail } from "@/shared/api/catalog";
 import { getSessionUser } from "@/server/auth/guards";
 import { cn } from "@/lib/utils";
 import { SITE_SHARE_IMAGE, SITE_URL } from "@/lib/site";
-import { serverApiFetchOrNotFound } from "@/lib/api-server";
+import { serverApiFetch, serverApiFetchOrNotFound } from "@/lib/api-server";
 import { selfEnrollInCourseAction } from "@/server/actions/enroll";
 import { CourseCover } from "@/components/learn/course-cover";
 import { formatPriceCents } from "@/lib/format-price";
@@ -12,11 +12,23 @@ import { buttonVariants } from "@/components/ui/button";
 import { PendingSubmitButton } from "@/components/ui/pending-submit-button";
 import { CourseProjectShowcase } from "@/components/learn/course-project-showcase";
 import { CourseRoadmap } from "@/components/learn/course-roadmap";
+import { CourseReviews, type CourseReviewsView } from "@/components/learn/course-reviews";
+import { StarRating } from "@/components/learn/star-rating";
 
 async function loadCourse(courseSlug: string) {
   return serverApiFetchOrNotFound<CatalogCourseDetail>(`/api/v1/catalog/${encodeURIComponent(courseSlug)}`);
 }
 
+async function loadReviews(courseSlug: string): Promise<CourseReviewsView | null> {
+  try {
+    return await serverApiFetch<CourseReviewsView>(
+      `/api/v1/catalog/${encodeURIComponent(courseSlug)}/reviews?page=1&pageSize=5`
+    );
+  } catch {
+    return null;
+  }
+}
+
 export async function generateMetadata({ params }: { params: Promise<{ courseSlug: string }> }): Promise<Metadata> {
   const { courseSlug } = await params;
   const course = await loadCourse(courseSlug);
@@ -59,6 +71,7 @@ export default async function CatalogCoursePage({
   const { courseSlug } = await params;
   const user = await getSessionUser();
   const course = await loadCourse(courseSlug);
+  const reviews = await loadReviews(course.slug);
   const hasAccess = course.access === "active";
   const needsPayment = course.access === "payment_required";
   // Visitors sign up first and land straight in the course (see app/enroll); learners enroll in one
@@ -117,6 +130,15 @@ export default async function CatalogCoursePage({
           {course.instructorName ? `Instructor · ${course.instructorName}` : "Instructor-led course"}
         </p>
         <h1 className="mt-1 text-3xl font-semibold tracking-tight">{course.title}</h1>
+        {course.ratingCount > 0 && course.ratingAverage != null ? (
+          <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            <StarRating value={course.ratingAverage} size={16} />
+            <span className="font-medium text-foreground">{course.ratingAverage.toFixed(1)}</span>
+            <span>
+              ({course.ratingCount} rating{course.ratingCount === 1 ? "" : "s"})
+            </span>
+          </div>
+        ) : null}
         {course.description ? (
           <p className="mt-3 text-sm leading-6 text-muted-foreground">{course.description}</p>
         ) : null}
@@ -146,6 +168,8 @@ export default async function CatalogCoursePage({
       </header>
       </div>
 
+      {reviews ? <CourseReviews reviews={reviews} /> : null}
+
       <div className="mt-6">
         <CourseProjectShowcase courseSlug={course.slug} />
       </div>
diff --git a/frontend/src/app/(learn)/(catalog)/catalog/page.tsx b/frontend/src/app/(learn)/(catalog)/catalog/page.tsx
index ffb21bb06..3e34d1d24 100644
--- a/frontend/src/app/(learn)/(catalog)/catalog/page.tsx
+++ b/frontend/src/app/(learn)/(catalog)/catalog/page.tsx
@@ -33,6 +33,8 @@ function CourseGrid({ courses }: { courses: CatalogCourseSummary[] }) {
               tags={course.tags}
               instructorName={course.instructorName}
               enrolledLabel={enrolledLabel}
+              ratingAverage={course.ratingAverage}
+              ratingCount={course.ratingCount}
             />
           </li>
         );
diff --git a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
index 1e69dce2c..8dc432e76 100644
--- a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
+++ b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
@@ -11,6 +11,8 @@ import { WebCourseNavigation } from "@/components/learn/course-navigation";
 import { chooseCourseSpecialisationAction, upgradeCourseCurriculumAction } from "@/server/actions/course-track";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { CourseRatingCard } from "@/components/learn/course-rating-card";
+import { CourseRatingLink } from "@/components/learn/course-rating-link";
 
 const loadOverview = cache((courseSlug: string) =>
   serverApiFetchOrNotFound<CourseOverview>(`/api/v1/courses/${encodeURIComponent(courseSlug)}/overview`)
@@ -115,7 +117,22 @@ export default async function CourseOverviewPage({
           "use server";
           await upgradeCourseCurriculumAction(course.slug);
         }}
+        ratingLink={
+          enrollment.status === "COMPLETED" && !overview.rating && overview.ratingDismissed ? (
+            <CourseRatingLink courseSlug={course.slug} />
+          ) : null
+        }
       />
+      {/* The completion modal asks first; this card is the full form or the edit surface. */}
+      {enrollment.status === "COMPLETED" &&
+      (overview.rating || !overview.ratingDismissed) ? (
+        <CourseRatingCard
+          courseSlug={course.slug}
+          courseTitle={course.title}
+          initialRating={overview.rating}
+          initialDismissed={overview.ratingDismissed}
+        />
+      ) : null}
     </WebCourseNavigation>
   );
 }
diff --git a/frontend/src/app/(teach)/courses/[courseSlug]/reports/page.tsx b/frontend/src/app/(teach)/courses/[courseSlug]/reports/page.tsx
index 76204eb9d..24bb6e972 100644
--- a/frontend/src/app/(teach)/courses/[courseSlug]/reports/page.tsx
+++ b/frontend/src/app/(teach)/courses/[courseSlug]/reports/page.tsx
@@ -4,10 +4,12 @@ import {
   BarChart3,
   CircleCheckBig,
   Download,
+  Star,
   TrendingUp,
   Users,
   type LucideIcon,
 } from "lucide-react";
+import { StarRating } from "@/components/learn/star-rating";
 import type { ChapterReportView, CourseReportView } from "@/shared/api/teach";
 import { nowMs } from "@/server/time";
 import { requireTeachSurface } from "@/server/auth/guards";
@@ -33,7 +35,7 @@ export default async function CourseReportsPage({
   const report = await serverApiFetchOrNotFound<CourseReportView>(
     `/api/v1/teach/courses/${encodeURIComponent(courseSlug)}/reports${query}`
   );
-  const { course, summary, enrollments, chapterReport } = report;
+  const { course, summary, enrollments, chapterReport, ratings } = report;
   const atRisk = enrollments.filter((e) => e.atRisk);
   const now = nowMs();
 
@@ -87,6 +89,60 @@ export default async function CourseReportsPage({
             <SummaryCard icon={CircleCheckBig} label="Completed" value={summary.completed} sub={`${pct(summary.completed, summary.enrolled)}% completion rate`} />
           </div>
 
+          <section className="rounded-2xl border bg-card p-5 shadow-sm sm:p-6">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">Course rating</p>
+                <h2 className="mt-1 text-lg font-semibold tracking-tight">What learners said</h2>
+              </div>
+              <div className="text-right">
+                <p className="flex items-center justify-end gap-1.5 text-2xl font-semibold tabular-nums">
+                  <Star className="size-4 fill-current text-amber-500" aria-hidden />
+                  {ratings.average != null ? ratings.average.toFixed(1) : "—"}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {ratings.count} rating{ratings.count === 1 ? "" : "s"}
+                </p>
+              </div>
+            </div>
+
+            {ratings.count === 0 ? (
+              <p className="mt-3 text-sm text-muted-foreground">
+                No ratings yet. Learners can rate the course after completing it.
+              </p>
+            ) : (
+              <div className="mt-4 grid gap-5 sm:grid-cols-2">
+                <div className="space-y-1">
+                  {ratings.distribution.map((row) => {
+                    const percent = ratings.count > 0 ? Math.round((row.count / ratings.count) * 100) : 0;
+                    return (
+                      <div key={row.stars} className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span className="w-8 tabular-nums">{row.stars}★</span>
+                        <span className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                          <span className="block h-full rounded-full bg-amber-500" style={{ width: `${percent}%` }} />
+                        </span>
+                        <span className="w-10 text-right tabular-nums">{percent}%</span>
+                      </div>
+                    );
+                  })}
+                </div>
+                <ul className="space-y-2">
+                  {ratings.recent.map((row) => (
+                    <li key={row.id} className="rounded-lg border border-border p-3">
+                      <div className="flex flex-wrap items-center gap-2 text-xs">
+                        <StarRating value={row.rating} size={12} />
+                        <span className="font-medium text-foreground">{row.reviewer}</span>
+                      </div>
+                      {row.review ? (
+                        <p className="mt-1 text-sm text-muted-foreground">{row.review}</p>
+                      ) : null}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </section>
+
           {atRisk.length > 0 && (
             <section className="rounded-2xl border border-amber-300/60 bg-amber-50/70 p-4 dark:border-amber-500/30 dark:bg-amber-500/10">
               <p className="flex items-center gap-2 text-sm font-semibold text-amber-950 dark:text-amber-200">
diff --git a/frontend/src/components/learn/catalog-course-card.tsx b/frontend/src/components/learn/catalog-course-card.tsx
index 718c3f95d..6d4c6e538 100644
--- a/frontend/src/components/learn/catalog-course-card.tsx
+++ b/frontend/src/components/learn/catalog-course-card.tsx
@@ -1,6 +1,7 @@
 import { EnrollmentBadge } from "@buildment/learning-ui/components/learn/enrollment-badge";
 import Link from "next/link";
 import { CourseCover } from "@/components/learn/course-cover";
+import { StarRating } from "@/components/learn/star-rating";
 import { formatPriceCents } from "@/lib/format-price";
 
 export type CatalogCourseCardProps = {
@@ -17,6 +18,8 @@ export type CatalogCourseCardProps = {
   enrolledLabel?: string | null;
   subcategory?: string | null;
   tags?: string[];
+  ratingAverage?: number | null;
+  ratingCount?: number;
 };
 
 /** The whole card is the link: a big target on a phone, and one tab stop per course. */
@@ -34,6 +37,8 @@ export function CatalogCourseCard({
   enrolledLabel,
   subcategory,
   tags = [],
+  ratingAverage = null,
+  ratingCount = 0,
 }: CatalogCourseCardProps) {
   const meta = [difficulty ? difficulty.toLowerCase() : null, estimatedHours ? `${estimatedHours} hours` : null]
     .filter(Boolean)
@@ -48,6 +53,13 @@ export function CatalogCourseCard({
         {meta ? <p className="text-sm capitalize text-muted-foreground">{meta}</p> : null}
         {subcategory ? <p className="mt-1 text-xs font-semibold uppercase tracking-wide text-primary">{subcategory}</p> : null}
         <h2 className="mt-2 text-lg leading-snug tracking-[-0.02em]">{title}</h2>
+        {ratingCount > 0 && ratingAverage != null ? (
+          <div className="mt-1.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+            <StarRating value={ratingAverage} size={12} />
+            <span className="font-medium text-foreground">{ratingAverage.toFixed(1)}</span>
+            <span>({ratingCount})</span>
+          </div>
+        ) : null}
         {tags.length ? <p className="mt-2 line-clamp-1 text-xs text-muted-foreground">{tags.slice(0, 3).join(" · ")}</p> : null}
         {instructorName ? <p className="mt-1 text-sm text-muted-foreground">With {instructorName}</p> : null}
         {description ? (
diff --git a/frontend/src/components/learn/chapter-complete-celebration-modal.tsx b/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
index d11fe28cb..1a9f6960d 100644
--- a/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
+++ b/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { ArrowRight, CheckCircle2, X } from "lucide-react";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Progress, ProgressLabel } from "@/components/ui/progress";
+import { StarRatingInput } from "@/components/learn/star-rating";
+import { saveCourseRatingAction } from "@/server/actions/course-rating";
 
 export function ChapterCompleteCelebrationModal({
   open,
@@ -16,6 +18,7 @@ export function ChapterCompleteCelebrationModal({
   courseTotal,
   nextHref,
   nextTitle,
+  courseSlug,
 }: {
   open: boolean;
   onClose: () => void;
@@ -26,12 +29,29 @@ export function ChapterCompleteCelebrationModal({
   courseTotal: number;
   nextHref?: string;
   nextTitle?: string;
+  /** Enables the one-time rating prompt when the course is complete. */
+  courseSlug?: string;
 }) {
+  const [rating, setRating] = useState(0);
+  const [review, setReview] = useState("");
+  const [ratingPending, setRatingPending] = useState(false);
+  const [ratingSaved, setRatingSaved] = useState(false);
+  const [ratingError, setRatingError] = useState<string | null>(null);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const completed = Math.min(courseTotal, Math.max(0, courseCompleted));
   const percent = courseTotal > 0 ? Math.round((completed / courseTotal) * 100) : 0;
   const courseComplete = courseTotal > 0 && completed === courseTotal;
 
+  async function submitRating() {
+    if (!courseSlug || rating < 1) return;
+    setRatingPending(true);
+    setRatingError(null);
+    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
+    setRatingPending(false);
+    if (res.ok) setRatingSaved(true);
+    else setRatingError(res.error);
+  }
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
@@ -98,6 +118,43 @@ export function ChapterCompleteCelebrationModal({
             <p className="mt-2 text-xs text-muted-foreground">{percent}% complete</p>
           </div>
         ) : null}
+        {courseComplete && courseSlug ? (
+          <div className="mt-4 rounded-xl border border-border bg-muted/30 p-4">
+            {ratingSaved ? (
+              <p className="text-sm font-medium">Thanks for rating the course.</p>
+            ) : (
+              <>
+                <p className="text-sm font-semibold">How was the course?</p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Your rating helps other learners decide.
+                </p>
+                <div className="mt-2">
+                  <StarRatingInput value={rating} onChange={setRating} disabled={ratingPending} />
+                </div>
+                <textarea
+                  value={review}
+                  onChange={(event) => setReview(event.target.value)}
+                  rows={2}
+                  maxLength={1000}
+                  placeholder="Add a few words (optional)"
+                  className="mt-2 w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
+                />
+                {ratingError ? <p className="mt-1 text-xs text-destructive">{ratingError}</p> : null}
+                <div className="mt-2 flex justify-end">
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={submitRating}
+                    disabled={rating < 1 || ratingPending}
+                  >
+                    {ratingPending ? "Saving…" : "Submit rating"}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        ) : null}
+
         <div className="mt-5 flex flex-col gap-2">
           {courseComplete ? (
             <Link href="/my-courses" className={buttonVariants({ className: "min-h-11" })}>View my courses <ArrowRight aria-hidden /></Link>
diff --git a/frontend/src/components/learn/chapter-nav.tsx b/frontend/src/components/learn/chapter-nav.tsx
index b188af7b9..929cacc54 100644
--- a/frontend/src/components/learn/chapter-nav.tsx
+++ b/frontend/src/components/learn/chapter-nav.tsx
@@ -206,6 +206,7 @@ export function ChapterNav({
         <div className="border-b border-border bg-muted/40 px-5 py-5 sm:px-6">
           <ChapterCompletionStrip
             chapterId={chapterId}
+            courseSlug={courseSlug}
             nextLocked={Boolean(nextLocked)}
             chapterComplete={chapterComplete}
             canMarkComplete={canMarkComplete}
diff --git a/frontend/src/components/learn/course-rating-card.tsx b/frontend/src/components/learn/course-rating-card.tsx
new file mode 100644
index 000000000..7cb47a648
--- /dev/null
+++ b/frontend/src/components/learn/course-rating-card.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2, Pencil, Star } from "lucide-react";
+import { saveCourseRatingAction, dismissCourseRatingAction, type CourseRatingView } from "@/server/actions/course-rating";
+import { StarRating, StarRatingInput } from "@/components/learn/star-rating";
+import { cn } from "@/lib/utils";
+
+/**
+ * One card, after the course is complete. Skippable, editable, never repeated.
+ * The copy explains why the rating matters so it does not feel like a survey.
+ */
+export function CourseRatingCard({
+  courseSlug,
+  courseTitle,
+  initialRating,
+  initialDismissed = false,
+}: {
+  courseSlug: string;
+  courseTitle: string;
+  initialRating: CourseRatingView | null;
+  initialDismissed?: boolean;
+}) {
+  const [rating, setRating] = useState(initialRating?.rating ?? 0);
+  const [review, setReview] = useState(initialRating?.review ?? "");
+  const [saved, setSaved] = useState<CourseRatingView | null>(initialRating);
+  const [editing, setEditing] = useState(!initialRating);
+  const [dismissed, setDismissed] = useState(initialDismissed);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function notNow() {
+    setPending(true);
+    await dismissCourseRatingAction({ courseSlug });
+    setPending(false);
+    setDismissed(true);
+    setEditing(false);
+  }
+
+  async function submit() {
+    if (rating < 1) {
+      setError("Choose a star rating first.");
+      return;
+    }
+    setPending(true);
+    setError(null);
+    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
+    setPending(false);
+    if (res.ok) {
+      setSaved(res.data);
+      setEditing(false);
+    } else {
+      setError(res.error);
+    }
+  }
+
+  if (dismissed && !saved && !editing) {
+    return (
+      <div className="mx-auto mt-6 w-full max-w-4xl px-6">
+        <button
+          type="button"
+          onClick={() => setEditing(true)}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <Star className="size-4" aria-hidden /> Rate this course
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <section className="mx-auto mt-6 w-full max-w-4xl px-6">
+      <div className="rounded-2xl border border-border bg-card p-5 shadow-sm sm:p-6">
+        {saved && !editing ? (
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <p className="text-sm font-medium text-foreground">Your rating</p>
+              <div className="mt-1 flex items-center gap-2">
+                <StarRating value={saved.rating} size={18} />
+                <span className="text-sm text-muted-foreground">{saved.rating} / 5</span>
+              </div>
+              {saved.review ? (
+                <p className="mt-2 max-w-2xl text-sm text-muted-foreground">&ldquo;{saved.review}&rdquo;</p>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={() => setEditing(true)}
+              className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
+            >
+              <Pencil className="size-3.5" aria-hidden /> Edit review
+            </button>
+          </div>
+        ) : (
+          <>
+            <h2 className="text-base font-semibold text-foreground">How was {courseTitle}?</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Your rating helps other learners decide and helps us fix the parts that did not work.
+            </p>
+
+            <div className="mt-3">
+              <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
+            </div>
+
+            <label className="mt-3 block text-sm">
+              <span className="sr-only">Review (optional)</span>
+              <textarea
+                value={review}
+                onChange={(event) => setReview(event.target.value)}
+                rows={3}
+                maxLength={1000}
+                placeholder="Anything you want to add? (optional)"
+                className="w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
+              />
+            </label>
+
+            {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
+
+            <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={notNow}
+                disabled={pending}
+                className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted"
+              >
+                Not now
+              </button>
+              <button
+                type="button"
+                onClick={submit}
+                disabled={pending || rating < 1}
+                className={cn(
+                  "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-1.5 text-sm font-medium text-background",
+                  (pending || rating < 1) && "opacity-60",
+                )}
+              >
+                {saved ? "Update rating" : "Submit rating"}
+              </button>
+            </div>
+          </>
+        )}
+
+        {saved && !editing ? (
+          <p className="mt-3 inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+            <CheckCircle2 className="size-3.5 text-primary" aria-hidden /> Thanks. You can change this any time.
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/learn/course-rating-link.tsx b/frontend/src/components/learn/course-rating-link.tsx
new file mode 100644
index 000000000..f7eba1e4d
--- /dev/null
+++ b/frontend/src/components/learn/course-rating-link.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Star, X } from "lucide-react";
+import { saveCourseRatingAction } from "@/server/actions/course-rating";
+import { StarRatingInput } from "@/components/learn/star-rating";
+import { Button } from "@/components/ui/button";
+
+/**
+ * The on-demand path left after the learner dismisses the full prompt.
+ * Clicking it opens the form; it never expands on its own.
+ */
+export function CourseRatingLink({ courseSlug }: { courseSlug: string }) {
+  const router = useRouter();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
+  const [rating, setRating] = useState(0);
+  const [review, setReview] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  async function submit() {
+    if (rating < 1) {
+      setError("Choose a star rating first.");
+      return;
+    }
+    setPending(true);
+    setError(null);
+    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
+    setPending(false);
+    if (res.ok) {
+      setOpen(false);
+      router.refresh();
+    } else {
+      setError(res.error);
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+      >
+        <Star className="size-4" aria-hidden /> Rate this course
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        onClose={() => setOpen(false)}
+        onClick={(event) => {
+          if (event.target === event.currentTarget) setOpen(false);
+        }}
+        className="fixed inset-0 z-50 m-auto w-[calc(100%-2rem)] max-w-md rounded-2xl border border-border bg-card p-5 text-card-foreground backdrop:bg-foreground/30"
+        aria-labelledby="course-rating-title"
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <h2 id="course-rating-title" className="text-lg font-semibold">
+              Rate this course
+            </h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Your rating helps other learners decide.
+            </p>
+          </div>
+          <button type="button" onClick={() => setOpen(false)} aria-label="Close" className="rounded p-1 text-muted-foreground hover:text-foreground">
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="mt-3">
+          <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
+        </div>
+        <textarea
+          value={review}
+          onChange={(event) => setReview(event.target.value)}
+          rows={3}
+          maxLength={1000}
+          placeholder="Add a few words (optional)"
+          className="mt-3 w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
+        />
+        {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
+
+        <div className="mt-3 flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button type="button" onClick={submit} disabled={rating < 1 || pending}>
+            {pending ? "Saving…" : "Submit rating"}
+          </Button>
+        </div>
+      </dialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/learn/course-reviews.tsx b/frontend/src/components/learn/course-reviews.tsx
new file mode 100644
index 000000000..24d26a813
--- /dev/null
+++ b/frontend/src/components/learn/course-reviews.tsx
@@ -0,0 +1,76 @@
+import { StarRating } from "@/components/learn/star-rating";
+
+export type CourseReviewsView = {
+  average: number | null;
+  count: number;
+  distribution: Array<{ stars: number; count: number }>;
+  items: Array<{
+    id: string;
+    rating: number;
+    review: string;
+    reviewer: string;
+    createdAt: string;
+  }>;
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+function when(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+/** Public rating summary and written reviews on the catalog course page. */
+export function CourseReviews({ reviews }: { reviews: CourseReviewsView }) {
+  if (reviews.count === 0) return null;
+  const average = reviews.average ?? 0;
+  return (
+    <section className="mt-6 overflow-hidden rounded-2xl border bg-card">
+      <div className="border-b p-5 sm:p-7">
+        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">Learner reviews</p>
+        <h2 className="mt-1 text-xl font-semibold tracking-tight">What learners say</h2>
+
+        <div className="mt-4 flex flex-col gap-5 sm:flex-row sm:items-center">
+          <div className="flex items-center gap-3">
+            <span className="text-4xl font-semibold tabular-nums">{average.toFixed(1)}</span>
+            <div>
+              <StarRating value={average} size={18} />
+              <p className="mt-1 text-xs text-muted-foreground">
+                {reviews.count} rating{reviews.count === 1 ? "" : "s"}
+              </p>
+            </div>
+          </div>
+          <div className="flex-1 space-y-1">
+            {reviews.distribution.map((row) => {
+              const percent = reviews.count > 0 ? Math.round((row.count / reviews.count) * 100) : 0;
+              return (
+                <div key={row.stars} className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span className="w-8 tabular-nums">{row.stars}★</span>
+                  <span className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
+                    <span className="block h-full rounded-full bg-amber-500" style={{ width: `${percent}%` }} />
+                  </span>
+                  <span className="w-10 text-right tabular-nums">{percent}%</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {reviews.items.length > 0 ? (
+        <ul className="divide-y">
+          {reviews.items.map((item) => (
+            <li key={item.id} className="p-5 sm:p-6">
+              <div className="flex flex-wrap items-center gap-2">
+                <StarRating value={item.rating} size={14} />
+                <span className="text-sm font-medium">{item.reviewer}</span>
+                <span className="text-xs text-muted-foreground">· {when(item.createdAt)}</span>
+              </div>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">{item.review}</p>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+}
diff --git a/frontend/src/components/learn/mark-chapter-complete.tsx b/frontend/src/components/learn/mark-chapter-complete.tsx
index a69bf70a4..337dd9374 100644
--- a/frontend/src/components/learn/mark-chapter-complete.tsx
+++ b/frontend/src/components/learn/mark-chapter-complete.tsx
@@ -19,6 +19,7 @@ const MODAL_OPEN_DELAY_MS = 200;
 
 export function ChapterCompletionStrip(props: {
   chapterId: string;
+  courseSlug: string;
   nextLocked: boolean;
   chapterComplete: boolean;
   canMarkComplete: boolean;
@@ -39,6 +40,7 @@ type CelebrationPhase = "idle" | "burst" | "modal";
 
 function ChapterCompletionMoment({
   chapterId,
+  courseSlug,
   nextLocked,
   chapterComplete,
   canMarkComplete,
@@ -53,6 +55,7 @@ function ChapterCompletionMoment({
   streakMilestone = null,
 }: {
   chapterId: string;
+  courseSlug: string;
   nextLocked: boolean;
   chapterComplete: boolean;
   canMarkComplete: boolean;
@@ -242,6 +245,7 @@ function ChapterCompletionMoment({
         courseTotal={courseTotal}
         nextHref={nextLocked && !isComplete ? undefined : nextHref}
         nextTitle={nextTitle}
+        courseSlug={courseSlug}
       />
     </>
   );
diff --git a/frontend/src/components/learn/star-rating.tsx b/frontend/src/components/learn/star-rating.tsx
new file mode 100644
index 000000000..d61fecb4f
--- /dev/null
+++ b/frontend/src/components/learn/star-rating.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/** Read-only 1–5 stars with fractional fill for averages like 4.7. */
+export function StarRating({
+  value,
+  size = 16,
+  className,
+}: {
+  value: number;
+  size?: number;
+  className?: string;
+}) {
+  const percent = Math.max(0, Math.min(100, (value / 5) * 100));
+  const stars = Array.from({ length: 5 }, (_, index) => (
+    <Star key={index} style={{ width: size, height: size }} aria-hidden />
+  ));
+  return (
+    <span
+      className={cn("relative inline-flex shrink-0", className)}
+      role="img"
+      aria-label={`${value.toFixed(1)} out of 5 stars`}
+    >
+      <span className="flex text-muted-foreground/30">{stars}</span>
+      <span className="absolute inset-y-0 left-0 overflow-hidden" style={{ width: `${percent}%` }}>
+        <span className="flex text-amber-500 [&>svg]:fill-current">{stars}</span>
+      </span>
+    </span>
+  );
+}
+
+/** Interactive 1–5 stars for the rating form. */
+export function StarRatingInput({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-1" role="radiogroup" aria-label="Course rating">
+      {[1, 2, 3, 4, 5].map((star) => (
+        <button
+          key={star}
+          type="button"
+          role="radio"
+          aria-checked={value === star}
+          aria-label={`${star} star${star === 1 ? "" : "s"}`}
+          disabled={disabled}
+          onClick={() => onChange(star)}
+          className={cn(
+            "rounded p-0.5 transition-colors focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-brand-yellow",
+            star <= value ? "text-amber-500 [&>svg]:fill-current" : "text-muted-foreground/40 hover:text-amber-500/70",
+          )}
+        >
+          <Star className="size-7" aria-hidden />
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/server/actions/course-rating.ts b/frontend/src/server/actions/course-rating.ts
new file mode 100644
index 000000000..16027c576
--- /dev/null
+++ b/frontend/src/server/actions/course-rating.ts
@@ -0,0 +1,40 @@
+"use server";
+
+import { ApiError } from "@/lib/api-client";
+import { serverApiFetch } from "@/lib/api-server";
+
+export type CourseRatingView = {
+  rating: number;
+  review: string | null;
+  updatedAt: string;
+};
+
+export async function saveCourseRatingAction(raw: {
+  courseSlug: string;
+  rating: number;
+  review?: string | null;
+}) {
+  try {
+    const data = await serverApiFetch<CourseRatingView>(
+      `/api/v1/courses/${encodeURIComponent(raw.courseSlug)}/rating`,
+      { method: "PUT", json: { rating: raw.rating, review: raw.review } }
+    );
+    return { ok: true as const, data };
+  } catch (error) {
+    if (error instanceof ApiError) return { ok: false as const, error: error.message };
+    throw error;
+  }
+}
+
+/** Remember "Not now" so the full prompt does not come back on the next visit. */
+export async function dismissCourseRatingAction(raw: { courseSlug: string }) {
+  try {
+    await serverApiFetch(`/api/v1/courses/${encodeURIComponent(raw.courseSlug)}/rating/dismiss`, {
+      method: "POST",
+    });
+    return { ok: true as const };
+  } catch (error) {
+    if (error instanceof ApiError) return { ok: false as const, error: error.message };
+    throw error;
+  }
+}
diff --git a/frontend/src/shared/api/catalog.ts b/frontend/src/shared/api/catalog.ts
index fd5488aa5..0ec461754 100644
--- a/frontend/src/shared/api/catalog.ts
+++ b/frontend/src/shared/api/catalog.ts
@@ -1,5 +1,5 @@
 // GENERATED from server/src/shared — do not edit here. Run `pnpm sync-shared` in server/.
-import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle } from "../domain/enums";
+import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle, EnrollStatus } from "../domain/enums";
 import type { CourseTrack } from "../lib/course-tracks";
 import type { SyllabusModule } from "./syllabus";
 
@@ -24,6 +24,9 @@ export type CatalogCourseSummary = {
   instructorName: string | null;
   moduleCount: number;
   chapterCount: number;
+  /** Cached course rating; null until the first review lands. */
+  ratingAverage: number | null;
+  ratingCount: number;
   /** The caller's enrollment lifecycle in this course; null for anonymous visitors. */
   enrollmentLifecycle: EnrollmentLifecycle | null;
 };
@@ -61,7 +64,11 @@ export type CourseOverview = {
     instructorName: string | null;
   };
   access: "active" | "payment_required" | "none";
-  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number } | null;
+  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
+  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  rating: { rating: number; review: string | null; updatedAt: string } | null;
+  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
   /** Variant and specialisation for a course in a family; null otherwise or without access. */
diff --git a/frontend/src/shared/api/teach.ts b/frontend/src/shared/api/teach.ts
index ed816d7f9..711789205 100644
--- a/frontend/src/shared/api/teach.ts
+++ b/frontend/src/shared/api/teach.ts
@@ -500,6 +500,12 @@ export type CourseReportView = {
   atRiskDays: number;
   enrollments: ReportEnrollmentRow[];
   chapterReport: ChapterReportView | null;
+  ratings: {
+    average: number | null;
+    count: number;
+    distribution: Array<{ stars: number; count: number }>;
+    recent: Array<{ id: string; rating: number; review: string | null; reviewer: string; createdAt: string }>;
+  };
 };
 
 export type CourseActivityView = {
diff --git a/packages/learning-ui/src/components/learn/course-overview-content.tsx b/packages/learning-ui/src/components/learn/course-overview-content.tsx
index 81c31afda..cfbdce027 100644
--- a/packages/learning-ui/src/components/learn/course-overview-content.tsx
+++ b/packages/learning-ui/src/components/learn/course-overview-content.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { CourseOverview } from '../../shared/api/catalog';
 import { CourseCouponBanner } from './course-coupon-banner';
 import { CourseCurriculumUpgradeBanner } from './course-curriculum-upgrade-banner';
@@ -9,10 +10,12 @@ import { VariantThemeScope, variantForTrack } from './variant-theme';
 import { LearnerBreadcrumb } from './learner-breadcrumb';
 
 /** The enrolled course page, shared by web and desktop. Hosts own access and navigation. */
-export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgradeCurriculum }: {
+export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgradeCurriculum, ratingLink }: {
   overview: CourseOverview;
   onChooseSpecialisation: (data: FormData) => Promise<void>;
   onUpgradeCurriculum?: () => Promise<void> | void;
+  /** Host-provided content under the hero's continue button (e.g. the rating link). */
+  ratingLink?: ReactNode;
 }) {
   const { course, enrollment, syllabus, track } = overview;
   if (!enrollment || !syllabus || overview.access !== 'active') return null;
@@ -21,7 +24,7 @@ export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgr
   return <VariantThemeScope variant={variantForTrack(track)}>
     <div className="mx-auto max-w-6xl space-y-8 px-5 py-8 sm:px-6 sm:py-10">
       <LearnerBreadcrumb courseSlug={course.slug} courseTitle={course.title} />
-      <CourseOverviewHero {...course} {...enrollment} chaptersTotal={chapterCount} continueHref={continueHref} continueLabel={continueLabel} moduleCount={modules.length} chapterCount={chapterCount} />
+      <CourseOverviewHero {...course} {...enrollment} chaptersTotal={chapterCount} continueHref={continueHref} continueLabel={continueLabel} moduleCount={modules.length} chapterCount={chapterCount} ratingLink={ratingLink} />
       {overview.curriculumUpgradeAvailable ? (
         <CourseCurriculumUpgradeBanner courseSlug={course.slug} onUpgrade={onUpgradeCurriculum} />
       ) : null}
diff --git a/packages/learning-ui/src/components/learn/course-overview-hero.tsx b/packages/learning-ui/src/components/learn/course-overview-hero.tsx
index b0b6e8137..96d1ee976 100644
--- a/packages/learning-ui/src/components/learn/course-overview-hero.tsx
+++ b/packages/learning-ui/src/components/learn/course-overview-hero.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { CourseLink as Link } from "./course-navigation";
 import { ArrowRight, BookOpen, Clock3, Layers3, MessageSquareText, Target } from "lucide-react";
 import { buttonVariants } from "../ui/button";
@@ -21,6 +22,8 @@ type CourseOverviewHeroProps = {
   moduleCount: number;
   chapterCount: number;
   estimatedHours: number | null;
+  /** Host-provided content under the continue button, e.g. the on-demand rating link. */
+  ratingLink?: ReactNode;
 };
 
 function splitTitle(title: string) {
@@ -45,6 +48,7 @@ export function CourseOverviewHero({
   moduleCount,
   chapterCount,
   estimatedHours,
+  ratingLink,
 }: CourseOverviewHeroProps) {
   const { lead, rest } = splitTitle(title);
 
@@ -146,6 +150,7 @@ export function CourseOverviewHero({
                 <ArrowRight aria-hidden />
               </Link>
             ) : null}
+            {ratingLink}
           </div>
         </aside>
       </div>
diff --git a/packages/learning-ui/src/shared/api/catalog.ts b/packages/learning-ui/src/shared/api/catalog.ts
index fd5488aa5..0ec461754 100644
--- a/packages/learning-ui/src/shared/api/catalog.ts
+++ b/packages/learning-ui/src/shared/api/catalog.ts
@@ -1,5 +1,5 @@
 // GENERATED from server/src/shared — do not edit here. Run `pnpm sync-shared` in server/.
-import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle } from "../domain/enums";
+import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle, EnrollStatus } from "../domain/enums";
 import type { CourseTrack } from "../lib/course-tracks";
 import type { SyllabusModule } from "./syllabus";
 
@@ -24,6 +24,9 @@ export type CatalogCourseSummary = {
   instructorName: string | null;
   moduleCount: number;
   chapterCount: number;
+  /** Cached course rating; null until the first review lands. */
+  ratingAverage: number | null;
+  ratingCount: number;
   /** The caller's enrollment lifecycle in this course; null for anonymous visitors. */
   enrollmentLifecycle: EnrollmentLifecycle | null;
 };
@@ -61,7 +64,11 @@ export type CourseOverview = {
     instructorName: string | null;
   };
   access: "active" | "payment_required" | "none";
-  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number } | null;
+  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
+  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  rating: { rating: number; review: string | null; updatedAt: string } | null;
+  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
   /** Variant and specialisation for a course in a family; null otherwise or without access. */
diff --git a/server/prisma/migrations/20261106180000_add_course_ratings/migration.sql b/server/prisma/migrations/20261106180000_add_course_ratings/migration.sql
new file mode 100644
index 000000000..158cb2df1
--- /dev/null
+++ b/server/prisma/migrations/20261106180000_add_course_ratings/migration.sql
@@ -0,0 +1,31 @@
+-- AlterTable
+ALTER TABLE "Course" ADD COLUMN "ratingAverage" DOUBLE PRECISION,
+ADD COLUMN "ratingCount" INTEGER NOT NULL DEFAULT 0;
+
+-- CreateTable
+CREATE TABLE "CourseRating" (
+    "id" TEXT NOT NULL,
+    "courseId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "rating" INTEGER NOT NULL,
+    "review" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "CourseRating_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "CourseRating_courseId_userId_key" ON "CourseRating"("courseId", "userId");
+
+-- CreateIndex
+CREATE INDEX "CourseRating_courseId_createdAt_idx" ON "CourseRating"("courseId", "createdAt");
+
+-- CreateIndex
+CREATE INDEX "CourseRating_userId_idx" ON "CourseRating"("userId");
+
+-- AddForeignKey
+ALTER TABLE "CourseRating" ADD CONSTRAINT "CourseRating_courseId_fkey" FOREIGN KEY ("courseId") REFERENCES "Course"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "CourseRating" ADD CONSTRAINT "CourseRating_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql b/server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql
new file mode 100644
index 000000000..5e88e0987
--- /dev/null
+++ b/server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Enrollment" ADD COLUMN "ratingDismissedAt" TIMESTAMP(3);
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
index a9cc195ad..0a45de4a3 100644
--- a/server/prisma/schema.prisma
+++ b/server/prisma/schema.prisma
@@ -295,6 +295,7 @@ model User {
   courseMemberships CourseInstructor[]
   courseInstructorInvitesSent CourseInstructorInvite[] @relation("CourseInstructorInviteSender")
   enrollments   Enrollment[]
+  courseRatings CourseRating[]
   responses     Response[]
   reviewsGiven          Review[]       @relation("Reviewer")
   invitesSent           Invite[]       @relation("InviteSender")
@@ -454,6 +455,10 @@ model Course {
   instructorCoupons InstructorCoupon[]
   invites        Invite[]
   helpThreads    HelpThread[]
+  ratings        CourseRating[]
+  /// Cached aggregate of CourseRating, maintained on every write so catalog cards stay one query.
+  ratingAverage  Float?
+  ratingCount    Int          @default(0)
   publishedAt    DateTime?
   createdAt      DateTime     @default(now())
   updatedAt      DateTime     @updatedAt
@@ -463,6 +468,25 @@ model Course {
   leaderboardPlacements LeaderboardPlacement[]
 }
 
+/// One learner's rating of a completed course. Editable, never duplicated.
+model CourseRating {
+  id        String   @id @default(cuid())
+  courseId  String
+  course    Course   @relation(fields: [courseId], references: [id], onDelete: Cascade)
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  /// 1–5 stars.
+  rating    Int
+  /// Optional written review. Public when present.
+  review    String?  @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@unique([courseId, userId])
+  @@index([courseId, createdAt])
+  @@index([userId])
+}
+
 model CreditEntry {
   id        String   @id @default(cuid())
   userId    String
@@ -662,6 +686,9 @@ model Enrollment {
   lastNudgeSentAt   DateTime?
   startedAt         DateTime?
   completedAt       DateTime?
+  /// Set when the learner dismisses the post-completion rating prompt. Keeps
+  /// the one-time ask from reappearing; the course page keeps a small link.
+  ratingDismissedAt DateTime?
   variantSlug       String? // learner's variant in the course family; null = not picked yet
   variantChosenAt   DateTime?
   variantLockedAt   DateTime? // first chapter start fixes the learner's variant
diff --git a/server/src/controllers/catalog.ts b/server/src/controllers/catalog.ts
index bdb4cb7f7..3358479f1 100644
--- a/server/src/controllers/catalog.ts
+++ b/server/src/controllers/catalog.ts
@@ -1,6 +1,7 @@
 import type { Request, Response } from "express";
 import { ok } from "../utils/responses.js";
 import { getCatalogCourse, listCatalog } from "../services/catalog/catalog.js";
+import { listCourseReviews } from "../services/courses/ratings.js";
 
 // GET /api/v1/catalog
 export async function list(req: Request, res: Response) {
@@ -14,3 +15,9 @@ export async function detail(req: Request, res: Response) {
     signedIn: Boolean(req.user),
   });
 }
+
+// GET /api/v1/catalog/:courseSlug/reviews
+export async function reviews(req: Request, res: Response) {
+  const { page, pageSize } = req.query as unknown as { page: number; pageSize: number };
+  ok(res, await listCourseReviews(req.params.courseSlug as string, { page, pageSize }));
+}
diff --git a/server/src/controllers/courses.ts b/server/src/controllers/courses.ts
index 633e02935..f9dffb186 100644
--- a/server/src/controllers/courses.ts
+++ b/server/src/controllers/courses.ts
@@ -7,6 +7,7 @@ import { prisma } from "../db/prisma.js";
 import { loadBlockState } from "../services/blocks/state.js";
 import { BadRequestError } from "../utils/errors.js";
 import { chooseCourseSpecialisation, chooseCourseVariant } from "../services/courses/track.js";
+import { saveCourseRating, getMyCourseRating, dismissCourseRatingPrompt } from "../services/courses/ratings.js";
 
 // GET /api/v1/courses/:courseSlug/continue
 export async function continueChapter(req: Request, res: Response) {
@@ -67,3 +68,19 @@ export async function chooseSpecialisation(req: Request, res: Response) {
 export async function upgradeCurriculum(req: Request, res: Response) {
   ok(res, await upgradeEnrollmentCurriculum(req.params.courseSlug as string, req.user!));
 }
+
+// PUT /api/v1/courses/:courseSlug/rating
+export async function putRating(req: Request, res: Response) {
+  const { rating, review } = req.body as { rating: number; review?: string | null };
+  ok(res, await saveCourseRating(req.user!, req.params.courseSlug as string, { rating, review }));
+}
+
+// GET /api/v1/courses/:courseSlug/rating
+export async function getRating(req: Request, res: Response) {
+  ok(res, { rating: await getMyCourseRating(req.user!, req.params.courseSlug as string) });
+}
+
+// POST /api/v1/courses/:courseSlug/rating/dismiss
+export async function dismissRating(req: Request, res: Response) {
+  ok(res, await dismissCourseRatingPrompt(req.user!, req.params.courseSlug as string));
+}
diff --git a/server/src/routes/v1/catalog.ts b/server/src/routes/v1/catalog.ts
index 4a293461c..785ebdab2 100644
--- a/server/src/routes/v1/catalog.ts
+++ b/server/src/routes/v1/catalog.ts
@@ -1,13 +1,14 @@
 import { Router } from "express";
 import * as catalog from "../../controllers/catalog.js";
 import { optionalAuth } from "../../middlewares/authenticate.js";
-import { validateParams } from "../../middlewares/validate.js";
-import { courseSlugParams } from "../../validations/courses.js";
+import { validateParams, validateQuery } from "../../middlewares/validate.js";
+import { courseReviewsQuery, courseSlugParams } from "../../validations/courses.js";
 
 const router = Router();
 
 // Published catalog summaries and curriculum outlines are public.
 router.get("/", optionalAuth, catalog.list);
 router.get("/:courseSlug", optionalAuth, validateParams(courseSlugParams), catalog.detail);
+router.get("/:courseSlug/reviews", optionalAuth, validateParams(courseSlugParams), validateQuery(courseReviewsQuery), catalog.reviews);
 
 export default router;
diff --git a/server/src/routes/v1/courses.ts b/server/src/routes/v1/courses.ts
index 68b5ebba6..8c51ad533 100644
--- a/server/src/routes/v1/courses.ts
+++ b/server/src/routes/v1/courses.ts
@@ -6,7 +6,7 @@ import { certificateClaimBody } from "../../validations/capstone.js";
 import { authenticate, optionalAuth } from "../../middlewares/authenticate.js";
 import { requireVerified } from "../../middlewares/require-verified.js";
 import { validateBody, validateParams } from "../../middlewares/validate.js";
-import { chapterPathParams, chooseSpecialisationBody, chooseVariantBody, courseSlugParams } from "../../validations/courses.js";
+import { chapterPathParams, chooseSpecialisationBody, chooseVariantBody, courseRatingBody, courseSlugParams } from "../../validations/courses.js";
 
 const router = Router();
 
@@ -14,6 +14,22 @@ router.get("/:courseSlug/continue", optionalAuth, validateParams(courseSlugParam
 router.get("/:courseSlug/certificate", authenticate, requireVerified, validateParams(courseSlugParams), certificates.mine);
 router.post("/:courseSlug/certificate", authenticate, requireVerified, validateParams(courseSlugParams), validateBody(certificateClaimBody), certificates.claim);
 router.get("/:courseSlug/overview", authenticate, requireVerified, validateParams(courseSlugParams), courses.overview);
+router.get("/:courseSlug/rating", authenticate, requireVerified, validateParams(courseSlugParams), courses.getRating);
+router.put(
+  "/:courseSlug/rating",
+  authenticate,
+  requireVerified,
+  validateParams(courseSlugParams),
+  validateBody(courseRatingBody),
+  courses.putRating
+);
+router.post(
+  "/:courseSlug/rating/dismiss",
+  authenticate,
+  requireVerified,
+  validateParams(courseSlugParams),
+  courses.dismissRating
+);
 router.get("/:courseSlug/chapters/:chapterSlug", authenticate, requireVerified, validateParams(chapterPathParams), courses.chapter);
 router.get("/:courseSlug/chapters/:chapterSlug/download", authenticate, requireVerified, validateParams(chapterPathParams), courses.downloadChapter);
 router.put(
diff --git a/server/src/services/catalog/catalog.ts b/server/src/services/catalog/catalog.ts
index 9c5c98f8c..89346a08d 100644
--- a/server/src/services/catalog/catalog.ts
+++ b/server/src/services/catalog/catalog.ts
@@ -19,6 +19,8 @@ const summarySelect = {
   priceCents: true,
   currency: true,
   mentor: { select: { name: true } },
+  ratingAverage: true,
+  ratingCount: true,
   _count: { select: { modules: { where: { archivedAt: null } }, chapters: { where: { archivedAt: null } } } },
 } as const;
 
diff --git a/server/src/services/courses/overview.ts b/server/src/services/courses/overview.ts
index 271a1af89..12c37e05d 100644
--- a/server/src/services/courses/overview.ts
+++ b/server/src/services/courses/overview.ts
@@ -60,7 +60,17 @@ export async function getCourseOverview(courseSlug: string, user: SessionUser):
   const enrollment = await prisma.enrollment.findUnique({
     where: { courseId_userId: { courseId: course.id, userId: user.id } },
   });
-  if (!enrollment) return { ...base, access: "none", enrollment: null, coupon: null, track: null, syllabus: null };
+  const myRatingRow = await prisma.courseRating.findUnique({
+    where: { courseId_userId: { courseId: course.id, userId: user.id } },
+    select: { rating: true, review: true, updatedAt: true },
+  });
+  const rating = myRatingRow
+    ? { rating: myRatingRow.rating, review: myRatingRow.review, updatedAt: myRatingRow.updatedAt.toISOString() }
+    : null;
+  const ratingDismissed = Boolean(enrollment?.ratingDismissedAt);
+  if (!enrollment) {
+    return { ...base, access: "none", enrollment: null, rating, ratingDismissed, coupon: null, track: null, syllabus: null };
+  }
 
   let curriculumUpgradeAvailable = false;
   if (activeReleaseId && enrollment.releaseId !== activeReleaseId) {
@@ -87,9 +97,10 @@ export async function getCourseOverview(courseSlug: string, user: SessionUser):
     percentComplete: enrollment.percentComplete,
     chaptersCompleted: enrollment.chaptersCompleted,
     pendingReviews: enrollment.pendingReviews,
+    status: enrollment.status,
   };
   if (!enrollmentGrantsContentAccess(enrollment.lifecycle)) {
-    return { ...base, access: "payment_required", enrollment: summary, coupon: null, track: null, syllabus: null };
+    return { ...base, access: "payment_required", enrollment: summary, rating, ratingDismissed, coupon: null, track: null, syllabus: null };
   }
 
   const coupon = await redeemCouponOnCourseOpen(enrollment.id);
@@ -106,6 +117,8 @@ export async function getCourseOverview(courseSlug: string, user: SessionUser):
     ...base,
     access: "active",
     enrollment: summary,
+    rating,
+    ratingDismissed,
     coupon,
     track: buildCourseTrack(variantFamily ? resolveCourseFamily(familySlug, variantFamily) : familySlug, enrollment, availableVariantSlugs),
     curriculumUpgradeAvailable,
diff --git a/server/src/services/courses/ratings.ts b/server/src/services/courses/ratings.ts
new file mode 100644
index 000000000..bb2fb5ff0
--- /dev/null
+++ b/server/src/services/courses/ratings.ts
@@ -0,0 +1,205 @@
+import { prisma } from "../../db/prisma.js";
+import { ForbiddenError, NotFoundError } from "../../utils/errors.js";
+import type { SessionUser } from "../../types/auth.js";
+
+// Course ratings are the macro signal: one per learner, only after the course is
+// complete, editable, never prompted again. Lesson-level problems go through the
+// help/report channel instead.
+
+export type CourseRatingView = {
+  rating: number;
+  review: string | null;
+  updatedAt: string;
+};
+
+export type CourseReviewItem = {
+  id: string;
+  rating: number;
+  review: string;
+  reviewer: string;
+  createdAt: string;
+};
+
+export type CourseReviewsView = {
+  average: number | null;
+  count: number;
+  distribution: Array<{ stars: number; count: number }>;
+  items: CourseReviewItem[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+async function publishedCourse(courseSlug: string) {
+  const course = await prisma.course.findUnique({
+    where: { slug: courseSlug },
+    select: { id: true, status: true },
+  });
+  if (!course || course.status !== "PUBLISHED") throw new NotFoundError("Course not found");
+  return course;
+}
+
+/** First name plus last initial, or the email prefix. Keeps reviews readable without exposing full identities. */
+function reviewerLabel(user: { name: string | null; email: string }): string {
+  const name = user.name?.trim();
+  if (!name) return user.email.split("@")[0] ?? "Learner";
+  const parts = name.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) return parts[0]!;
+  return `${parts[0]} ${parts[parts.length - 1]![0]!.toUpperCase()}.`;
+}
+
+export async function saveCourseRating(
+  user: SessionUser,
+  courseSlug: string,
+  input: { rating: number; review?: string | null },
+): Promise<CourseRatingView> {
+  const course = await publishedCourse(courseSlug);
+  const enrollment = await prisma.enrollment.findUnique({
+    where: { courseId_userId: { courseId: course.id, userId: user.id } },
+    select: { status: true },
+  });
+  if (!enrollment || enrollment.status !== "COMPLETED") {
+    throw new ForbiddenError("Complete the course before rating it.");
+  }
+
+  const review = input.review?.trim() || null;
+  const saved = await prisma.$transaction(async (tx) => {
+    const row = await tx.courseRating.upsert({
+      where: { courseId_userId: { courseId: course.id, userId: user.id } },
+      create: { courseId: course.id, userId: user.id, rating: input.rating, review },
+      update: { rating: input.rating, review },
+      select: { rating: true, review: true, updatedAt: true },
+    });
+    // Keep the catalog aggregate in the same transaction as the write.
+    const aggregate = await tx.courseRating.aggregate({
+      where: { courseId: course.id },
+      _avg: { rating: true },
+      _count: { _all: true },
+    });
+    await tx.course.update({
+      where: { id: course.id },
+      data: { ratingAverage: aggregate._avg.rating, ratingCount: aggregate._count._all },
+    });
+    return row;
+  });
+
+  return { rating: saved.rating, review: saved.review, updatedAt: saved.updatedAt.toISOString() };
+}
+
+export async function getMyCourseRating(
+  user: SessionUser,
+  courseSlug: string,
+): Promise<CourseRatingView | null> {
+  const course = await prisma.course.findUnique({
+    where: { slug: courseSlug },
+    select: { id: true },
+  });
+  if (!course) throw new NotFoundError("Course not found");
+  const row = await prisma.courseRating.findUnique({
+    where: { courseId_userId: { courseId: course.id, userId: user.id } },
+    select: { rating: true, review: true, updatedAt: true },
+  });
+  return row ? { rating: row.rating, review: row.review, updatedAt: row.updatedAt.toISOString() } : null;
+}
+
+export async function listCourseReviews(
+  courseSlug: string,
+  options: { page: number; pageSize: number },
+): Promise<CourseReviewsView> {
+  const course = await publishedCourse(courseSlug);
+  const where = { courseId: course.id, review: { not: null } };
+
+  const [rows, total, aggregate, groups] = await Promise.all([
+    prisma.courseRating.findMany({
+      where,
+      orderBy: { createdAt: "desc" },
+      skip: (options.page - 1) * options.pageSize,
+      take: options.pageSize,
+      select: {
+        id: true,
+        rating: true,
+        review: true,
+        createdAt: true,
+        user: { select: { name: true, email: true } },
+      },
+    }),
+    prisma.courseRating.count({ where }),
+    prisma.courseRating.aggregate({
+      where: { courseId: course.id },
+      _avg: { rating: true },
+      _count: { _all: true },
+    }),
+    prisma.courseRating.groupBy({
+      by: ["rating"],
+      where: { courseId: course.id },
+      _count: { _all: true },
+    }),
+  ]);
+
+  const byStars = new Map(groups.map((group) => [group.rating, group._count._all]));
+  return {
+    average: aggregate._avg.rating,
+    count: aggregate._count._all,
+    distribution: [5, 4, 3, 2, 1].map((stars) => ({ stars, count: byStars.get(stars) ?? 0 })),
+    items: rows
+      .filter((row): row is typeof row & { review: string } => Boolean(row.review))
+      .map((row) => ({
+        id: row.id,
+        rating: row.rating,
+        review: row.review,
+        reviewer: reviewerLabel(row.user),
+        createdAt: row.createdAt.toISOString(),
+      })),
+    total,
+    page: options.page,
+    pageSize: options.pageSize,
+  };
+}
+
+export type CourseRatingReport = {
+  average: number | null;
+  count: number;
+  distribution: Array<{ stars: number; count: number }>;
+  recent: Array<{ id: string; rating: number; review: string | null; reviewer: string; createdAt: string }>;
+};
+
+/** Instructor-facing summary: aggregate plus the latest written reviews. */
+export async function loadCourseRatingReport(courseId: string): Promise<CourseRatingReport> {
+  const [aggregate, groups, recent] = await Promise.all([
+    prisma.courseRating.aggregate({ where: { courseId }, _avg: { rating: true }, _count: { _all: true } }),
+    prisma.courseRating.groupBy({ by: ["rating"], where: { courseId }, _count: { _all: true } }),
+    prisma.courseRating.findMany({
+      where: { courseId },
+      orderBy: { createdAt: "desc" },
+      take: 5,
+      select: { id: true, rating: true, review: true, createdAt: true, user: { select: { name: true, email: true } } },
+    }),
+  ]);
+  const byStars = new Map(groups.map((group) => [group.rating, group._count._all]));
+  return {
+    average: aggregate._avg.rating,
+    count: aggregate._count._all,
+    distribution: [5, 4, 3, 2, 1].map((stars) => ({ stars, count: byStars.get(stars) ?? 0 })),
+    recent: recent.map((row) => ({
+      id: row.id,
+      rating: row.rating,
+      review: row.review,
+      reviewer: reviewerLabel(row.user),
+      createdAt: row.createdAt.toISOString(),
+    })),
+  };
+}
+
+/** The learner said "Not now": remember it so the full prompt never returns. */
+export async function dismissCourseRatingPrompt(
+  user: SessionUser,
+  courseSlug: string,
+): Promise<{ dismissed: true }> {
+  const course = await prisma.course.findUnique({ where: { slug: courseSlug }, select: { id: true } });
+  if (!course) throw new NotFoundError("Course not found");
+  await prisma.enrollment.updateMany({
+    where: { courseId: course.id, userId: user.id },
+    data: { ratingDismissedAt: new Date() },
+  });
+  return { dismissed: true };
+}
diff --git a/server/src/services/teach/reports.ts b/server/src/services/teach/reports.ts
index bbf4a0104..fb9805a22 100644
--- a/server/src/services/teach/reports.ts
+++ b/server/src/services/teach/reports.ts
@@ -5,6 +5,7 @@ import { resolveCourseFamily } from "../../shared/lib/course-tracks.js";
 import { toCsv } from "../../utils/csv.js";
 import type { SessionUser } from "../../types/auth.js";
 import { requireCourseBySlug } from "./access.js";
+import { loadCourseRatingReport } from "../courses/ratings.js";
 
 // Course insights (docs/06-reports.mdx). Cohort numbers come from the
 // denormalised Enrollment rollups; the chapter report reads BlockStats and
@@ -24,7 +25,7 @@ export async function loadCourseReport(user: SessionUser, courseSlug: string, ch
   const owned = await requireCourseBySlug(user, courseSlug);
   const now = Date.now();
 
-  const [course, enrollments, chapterProgress] = await Promise.all([
+  const [course, enrollments, chapterProgress, ratings] = await Promise.all([
     prisma.course.findUniqueOrThrow({
       where: { id: owned.id },
       select: {
@@ -38,6 +39,7 @@ export async function loadCourseReport(user: SessionUser, courseSlug: string, ch
     }),
     prisma.enrollment.findMany({ where: { courseId: owned.id }, orderBy: { createdAt: "asc" }, include: learnerInclude }),
     prisma.chapterProgress.findMany({ where: { enrollment: { courseId: owned.id } }, select: { enrollmentId: true, timeSpentSeconds: true } }),
+    loadCourseRatingReport(owned.id),
   ]);
 
   const studySeconds = new Map<string, number>();
@@ -86,6 +88,7 @@ export async function loadCourseReport(user: SessionUser, courseSlug: string, ch
       atRisk: isAtRisk(e),
     })),
     chapterReport: chapterId && chapterIds.has(chapterId) ? await loadChapterReport(owned.id, chapterId) : null,
+    ratings,
   };
 }
 
diff --git a/server/src/shared/api/catalog.ts b/server/src/shared/api/catalog.ts
index cc54281f9..369d47b56 100644
--- a/server/src/shared/api/catalog.ts
+++ b/server/src/shared/api/catalog.ts
@@ -1,4 +1,4 @@
-import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle } from "../domain/enums.js";
+import type { CourseCategory, CoursePricingType, CourseStatus, EnrollmentLifecycle, EnrollStatus } from "../domain/enums.js";
 import type { CourseTrack } from "../lib/course-tracks.js";
 import type { SyllabusModule } from "./syllabus.js";
 
@@ -23,6 +23,9 @@ export type CatalogCourseSummary = {
   instructorName: string | null;
   moduleCount: number;
   chapterCount: number;
+  /** Cached course rating; null until the first review lands. */
+  ratingAverage: number | null;
+  ratingCount: number;
   /** The caller's enrollment lifecycle in this course; null for anonymous visitors. */
   enrollmentLifecycle: EnrollmentLifecycle | null;
 };
@@ -60,7 +63,11 @@ export type CourseOverview = {
     instructorName: string | null;
   };
   access: "active" | "payment_required" | "none";
-  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number } | null;
+  enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
+  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  rating: { rating: number; review: string | null; updatedAt: string } | null;
+  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
   /** Variant and specialisation for a course in a family; null otherwise or without access. */
diff --git a/server/src/shared/api/teach.ts b/server/src/shared/api/teach.ts
index c251ca606..49c45737e 100644
--- a/server/src/shared/api/teach.ts
+++ b/server/src/shared/api/teach.ts
@@ -499,6 +499,12 @@ export type CourseReportView = {
   atRiskDays: number;
   enrollments: ReportEnrollmentRow[];
   chapterReport: ChapterReportView | null;
+  ratings: {
+    average: number | null;
+    count: number;
+    distribution: Array<{ stars: number; count: number }>;
+    recent: Array<{ id: string; rating: number; review: string | null; reviewer: string; createdAt: string }>;
+  };
 };
 
 export type CourseActivityView = {
diff --git a/server/src/validations/courses.ts b/server/src/validations/courses.ts
index e04e551b3..ae5fcf7e2 100644
--- a/server/src/validations/courses.ts
+++ b/server/src/validations/courses.ts
@@ -8,3 +8,16 @@ export const chapterPathParams = z.object({ courseSlug: id, chapterSlug: id });
 
 export const chooseVariantBody = z.object({ variantSlug: id });
 export const chooseSpecialisationBody = z.object({ specialisationSlug: id });
+
+export const courseRatingBody = z.object({
+  /** 1–5 stars. */
+  rating: z.number().int().min(1).max(5),
+  /** Optional written review, shown publicly on the course page. */
+  review: z.string().trim().max(1000).nullable().optional(),
+});
+export type CourseRatingBody = z.infer<typeof courseRatingBody>;
+
+export const courseReviewsQuery = z.object({
+  page: z.coerce.number().int().min(1).default(1),
+  pageSize: z.coerce.number().int().min(1).max(50).default(5),
+});
diff --git a/server/tests/api/course-ratings.test.ts b/server/tests/api/course-ratings.test.ts
new file mode 100644
index 000000000..3152a4b40
--- /dev/null
+++ b/server/tests/api/course-ratings.test.ts
@@ -0,0 +1,92 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import request from "supertest";
+import { createApp } from "../../src/app.js";
+import { prisma } from "../../src/db/prisma.js";
+import { createCourseFixture } from "../helpers/fixtures.js";
+
+const app = createApp();
+let fx: Awaited<ReturnType<typeof createCourseFixture>>;
+
+beforeAll(async () => {
+  fx = await createCourseFixture();
+});
+afterAll(async () => {
+  await prisma.courseRating.deleteMany({ where: { courseId: fx.course.id } });
+  await fx.cleanup();
+});
+
+const learner = () => ({ Authorization: `Bearer ${fx.learnerToken}` });
+
+describe("/api/v1/courses/:courseSlug/rating", () => {
+  it("refuses a rating before the course is complete", async () => {
+    const res = await request(app)
+      .put(`/api/v1/courses/${fx.course.slug}/rating`)
+      .set(learner())
+      .send({ rating: 5, review: "Great course." });
+    expect(res.status).toBe(403);
+  });
+
+  it("accepts one editable rating and updates the catalog aggregate", async () => {
+    await prisma.enrollment.update({
+      where: { id: fx.enrollment.id },
+      data: { status: "COMPLETED" },
+    });
+
+    const invalid = await request(app)
+      .put(`/api/v1/courses/${fx.course.slug}/rating`)
+      .set(learner())
+      .send({ rating: 6 });
+    expect(invalid.status).toBe(400);
+
+    const created = await request(app)
+      .put(`/api/v1/courses/${fx.course.slug}/rating`)
+      .set(learner())
+      .send({ rating: 5, review: "Clear, practical, and worth the time." });
+    expect(created.status).toBe(200);
+    expect(created.body.data).toMatchObject({ rating: 5, review: "Clear, practical, and worth the time." });
+
+    const mine = await request(app).get(`/api/v1/courses/${fx.course.slug}/rating`).set(learner());
+    expect(mine.body.data.rating).toMatchObject({ rating: 5 });
+
+    const catalog = await request(app).get(`/api/v1/catalog/${fx.course.slug}`);
+    expect(catalog.body.data).toMatchObject({ ratingAverage: 5, ratingCount: 1 });
+
+    const reviews = await request(app).get(`/api/v1/catalog/${fx.course.slug}/reviews`);
+    expect(reviews.status).toBe(200);
+    expect(reviews.body.data).toMatchObject({ count: 1, average: 5 });
+    expect(reviews.body.data.items[0]).toMatchObject({ rating: 5, reviewer: "Test L." });
+
+    // Editing must replace, not add a second rating.
+    const updated = await request(app)
+      .put(`/api/v1/courses/${fx.course.slug}/rating`)
+      .set(learner())
+      .send({ rating: 3, review: null });
+    expect(updated.status).toBe(200);
+
+    const after = await request(app).get(`/api/v1/courses/${fx.course.slug}/rating`).set(learner());
+    expect(after.body.data.rating).toMatchObject({ rating: 3, review: null });
+
+    const catalogAfter = await request(app).get(`/api/v1/catalog/${fx.course.slug}`);
+    expect(catalogAfter.body.data).toMatchObject({ ratingAverage: 3, ratingCount: 1 });
+  });
+
+  it("remembers a dismissed prompt so the full card does not return", async () => {
+    const res = await request(app)
+      .post(`/api/v1/courses/${fx.course.slug}/rating/dismiss`)
+      .set(learner());
+    expect(res.status).toBe(200);
+
+    const overview = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/overview`)
+      .set(learner());
+    expect(overview.body.data.ratingDismissed).toBe(true);
+  });
+
+  it("rejects an unverified learner", async () => {
+    const res = await request(app)
+      .put(`/api/v1/courses/${fx.course.slug}/rating`)
+      .set({ Authorization: `Bearer ${fx.unverifiedToken}` })
+      .send({ rating: 4 });
+    expect(res.status).toBe(403);
+  });
+});

From a728b9ba463d1388a04e10124279f293c6992c12 Mon Sep 17 00:00:00 2001
From: Faisal Misbah <faisalmisbah23@gmail.com>
Date: Fri, 6 Nov 2026 23:07:00 +0500
Subject: [PATCH 2/4] chore(db): order rating dismissal migration after main

---
 .../migration.sql                                                 | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename server/prisma/migrations/{20261106190000_add_rating_dismissed_at => 20261106200000_add_rating_dismissed_at}/migration.sql (100%)

diff --git a/server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql b/server/prisma/migrations/20261106200000_add_rating_dismissed_at/migration.sql
similarity index 100%
rename from server/prisma/migrations/20261106190000_add_rating_dismissed_at/migration.sql
rename to server/prisma/migrations/20261106200000_add_rating_dismissed_at/migration.sql

From 51c0afefe0164539b72270ec1bd3a1240c99b32a Mon Sep 17 00:00:00 2001
From: Aqib Nawab <aqib-nawab@users.noreply.github.com>
Date: Sat, 7 Nov 2026 16:23:31 +0500
Subject: [PATCH 3/4] feat(courses): prompt review on next chapter with happy
 Dot reaction

---
 .../(main)/courses/[courseSlug]/page.tsx      |  10 +-
 .../[courseSlug]/[chapterSlug]/page.tsx       |   1 +
 frontend/src/app/globals.css                  |  29 +-
 .../chapter-complete-celebration-modal.tsx    |  58 +---
 frontend/src/components/learn/chapter-nav.tsx |   1 -
 .../components/learn/chapter-reader-shell.tsx |   8 +
 .../components/learn/course-rating-card.tsx   |  12 +-
 .../components/learn/course-rating-link.tsx   |  98 ++-----
 .../components/learn/course-rating-modal.tsx  | 257 ++++++++++++++++++
 .../learn/mark-chapter-complete.tsx           |   4 -
 frontend/src/components/learn/star-rating.tsx |  19 +-
 frontend/src/shared/api/catalog.ts            |   4 +-
 frontend/src/shared/api/reader.ts             |   2 +
 .../tests/unit/learn/course-rating.test.ts    |  73 +++++
 .../learning-ui/src/shared/api/catalog.ts     |   4 +-
 server/src/services/chapters/reader.ts        |  13 +-
 server/src/services/courses/ratings.ts        |  12 +-
 server/src/shared/api/catalog.ts              |   4 +-
 server/src/shared/api/reader.ts               |   2 +
 server/tests/api/course-ratings.test.ts       |  49 +++-
 20 files changed, 491 insertions(+), 169 deletions(-)
 create mode 100644 frontend/src/components/learn/course-rating-modal.tsx
 create mode 100644 frontend/tests/unit/learn/course-rating.test.ts

diff --git a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
index 8dc432e76..e790d8cb7 100644
--- a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
+++ b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
@@ -118,13 +118,15 @@ export default async function CourseOverviewPage({
           await upgradeCourseCurriculumAction(course.slug);
         }}
         ratingLink={
-          enrollment.status === "COMPLETED" && !overview.rating && overview.ratingDismissed ? (
-            <CourseRatingLink courseSlug={course.slug} />
+          (enrollment.chaptersCompleted >= 1 || enrollment.status === "COMPLETED") &&
+          !overview.rating &&
+          overview.ratingDismissed ? (
+            <CourseRatingLink courseSlug={course.slug} courseTitle={course.title} />
           ) : null
         }
       />
-      {/* The completion modal asks first; this card is the full form or the edit surface. */}
-      {enrollment.status === "COMPLETED" &&
+      {/* Available once at least one chapter is completed; acts as the overview form or edit surface. */}
+      {(enrollment.chaptersCompleted >= 1 || enrollment.status === "COMPLETED") &&
       (overview.rating || !overview.ratingDismissed) ? (
         <CourseRatingCard
           courseSlug={course.slug}
diff --git a/frontend/src/app/(learn)/courses/[courseSlug]/[chapterSlug]/page.tsx b/frontend/src/app/(learn)/courses/[courseSlug]/[chapterSlug]/page.tsx
index bbc9bde62..47e20e20d 100644
--- a/frontend/src/app/(learn)/courses/[courseSlug]/[chapterSlug]/page.tsx
+++ b/frontend/src/app/(learn)/courses/[courseSlug]/[chapterSlug]/page.tsx
@@ -115,6 +115,7 @@ export default async function ChapterReaderPage({
         headingNotes={content.headingNotes}
         predictGate={content.predictGate}
         predictRevealed={content.predictRevealed}
+        promptCourseRating={Boolean(content.promptCourseRating)}
         helpThread={content.helpThread}
         narration={narration}
         user={user}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index b229a924a..b976f5870 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -718,6 +718,32 @@
   animation: mascot-steam 1600ms ease-in-out infinite;
 }
 
+@keyframes dot-yip-hop {
+  0%,
+  100% {
+    transform: translateY(0) scale(1, 1) rotate(0deg);
+  }
+  18% {
+    transform: translateY(-12px) scale(0.96, 1.06) rotate(-4deg);
+  }
+  36% {
+    transform: translateY(0) scale(1.06, 0.93) rotate(0deg);
+  }
+  54% {
+    transform: translateY(-10px) scale(0.97, 1.05) rotate(4deg);
+  }
+  72% {
+    transform: translateY(0) scale(1.04, 0.95) rotate(0deg);
+  }
+}
+
+.dot-yip {
+  transform-origin: 50% 92%;
+  animation:
+    mascot-enter 340ms cubic-bezier(0.34, 1.4, 0.64, 1) both,
+    dot-yip-hop 1100ms ease-in-out 280ms infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .mascot-enter,
   .mascot-motion-jump,
@@ -733,7 +759,8 @@
   .mascot-part-twinkle,
   .mascot-part-glow,
   .mascot-part-confetti,
-  .mascot-part-steam {
+  .mascot-part-steam,
+  .dot-yip {
     animation: none !important;
     opacity: 1 !important;
     transform: none !important;
diff --git a/frontend/src/components/learn/chapter-complete-celebration-modal.tsx b/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
index 1a9f6960d..a70278d3b 100644
--- a/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
+++ b/frontend/src/components/learn/chapter-complete-celebration-modal.tsx
@@ -1,13 +1,11 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import Link from "next/link";
 import { ArrowRight, CheckCircle2, X } from "lucide-react";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Progress, ProgressLabel } from "@/components/ui/progress";
-import { StarRatingInput } from "@/components/learn/star-rating";
-import { saveCourseRatingAction } from "@/server/actions/course-rating";
 
 export function ChapterCompleteCelebrationModal({
   open,
@@ -18,7 +16,6 @@ export function ChapterCompleteCelebrationModal({
   courseTotal,
   nextHref,
   nextTitle,
-  courseSlug,
 }: {
   open: boolean;
   onClose: () => void;
@@ -29,29 +26,12 @@ export function ChapterCompleteCelebrationModal({
   courseTotal: number;
   nextHref?: string;
   nextTitle?: string;
-  /** Enables the one-time rating prompt when the course is complete. */
-  courseSlug?: string;
 }) {
-  const [rating, setRating] = useState(0);
-  const [review, setReview] = useState("");
-  const [ratingPending, setRatingPending] = useState(false);
-  const [ratingSaved, setRatingSaved] = useState(false);
-  const [ratingError, setRatingError] = useState<string | null>(null);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const completed = Math.min(courseTotal, Math.max(0, courseCompleted));
   const percent = courseTotal > 0 ? Math.round((completed / courseTotal) * 100) : 0;
   const courseComplete = courseTotal > 0 && completed === courseTotal;
 
-  async function submitRating() {
-    if (!courseSlug || rating < 1) return;
-    setRatingPending(true);
-    setRatingError(null);
-    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
-    setRatingPending(false);
-    if (res.ok) setRatingSaved(true);
-    else setRatingError(res.error);
-  }
-
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
@@ -118,42 +98,6 @@ export function ChapterCompleteCelebrationModal({
             <p className="mt-2 text-xs text-muted-foreground">{percent}% complete</p>
           </div>
         ) : null}
-        {courseComplete && courseSlug ? (
-          <div className="mt-4 rounded-xl border border-border bg-muted/30 p-4">
-            {ratingSaved ? (
-              <p className="text-sm font-medium">Thanks for rating the course.</p>
-            ) : (
-              <>
-                <p className="text-sm font-semibold">How was the course?</p>
-                <p className="mt-0.5 text-xs text-muted-foreground">
-                  Your rating helps other learners decide.
-                </p>
-                <div className="mt-2">
-                  <StarRatingInput value={rating} onChange={setRating} disabled={ratingPending} />
-                </div>
-                <textarea
-                  value={review}
-                  onChange={(event) => setReview(event.target.value)}
-                  rows={2}
-                  maxLength={1000}
-                  placeholder="Add a few words (optional)"
-                  className="mt-2 w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
-                />
-                {ratingError ? <p className="mt-1 text-xs text-destructive">{ratingError}</p> : null}
-                <div className="mt-2 flex justify-end">
-                  <Button
-                    type="button"
-                    size="sm"
-                    onClick={submitRating}
-                    disabled={rating < 1 || ratingPending}
-                  >
-                    {ratingPending ? "Saving…" : "Submit rating"}
-                  </Button>
-                </div>
-              </>
-            )}
-          </div>
-        ) : null}
 
         <div className="mt-5 flex flex-col gap-2">
           {courseComplete ? (
diff --git a/frontend/src/components/learn/chapter-nav.tsx b/frontend/src/components/learn/chapter-nav.tsx
index 929cacc54..b188af7b9 100644
--- a/frontend/src/components/learn/chapter-nav.tsx
+++ b/frontend/src/components/learn/chapter-nav.tsx
@@ -206,7 +206,6 @@ export function ChapterNav({
         <div className="border-b border-border bg-muted/40 px-5 py-5 sm:px-6">
           <ChapterCompletionStrip
             chapterId={chapterId}
-            courseSlug={courseSlug}
             nextLocked={Boolean(nextLocked)}
             chapterComplete={chapterComplete}
             canMarkComplete={canMarkComplete}
diff --git a/frontend/src/components/learn/chapter-reader-shell.tsx b/frontend/src/components/learn/chapter-reader-shell.tsx
index 2254ee098..662ab21c8 100644
--- a/frontend/src/components/learn/chapter-reader-shell.tsx
+++ b/frontend/src/components/learn/chapter-reader-shell.tsx
@@ -28,6 +28,7 @@ import type { HelpThreadView } from "@/shared/api/help";
 import type { StreakMilestone } from "@/shared/lib/streak";
 import { HeadingNotesProvider } from "@/components/learn/heading-note";
 import { ChapterAudio } from "@/components/learn/chapter-audio";
+import { CourseRatingPrompt } from "@/components/learn/course-rating-modal";
 import { AskChapterPanel } from "@/components/learn/ask-chapter-panel";
 import { AskChapterProvider } from "@/components/learn/ask-chapter-context";
 import { AskAiFloating, AskAiHeaderButton } from "@/components/learn/ask-ai-floating";
@@ -85,6 +86,7 @@ export function ChapterReaderShell({
   headingNotes = {},
   predictGate = false,
   predictRevealed = true,
+  promptCourseRating = false,
   courseId,
   helpThread,
   narration = null,
@@ -117,6 +119,7 @@ export function ChapterReaderShell({
   headingNotes?: Record<string, string>;
   predictGate?: boolean;
   predictRevealed?: boolean;
+  promptCourseRating?: boolean;
   courseId: string;
   helpThread: HelpThreadView | null;
   /** Listen-along audio for this chapter, when its course has it. */
@@ -541,6 +544,11 @@ export function ChapterReaderShell({
 
         {focusMode && <ReaderFocusDock onExitFocus={() => void exitFocusMode()} />}
         <AskAiFloating focusMode={focusMode} />
+        <CourseRatingPrompt
+          courseSlug={courseSlug}
+          courseTitle={courseTitle}
+          shouldPrompt={promptCourseRating}
+        />
       </ReaderShellFade>
     </div>
     </AskChapterProvider>
diff --git a/frontend/src/components/learn/course-rating-card.tsx b/frontend/src/components/learn/course-rating-card.tsx
index 7cb47a648..2fc55b335 100644
--- a/frontend/src/components/learn/course-rating-card.tsx
+++ b/frontend/src/components/learn/course-rating-card.tsx
@@ -3,12 +3,12 @@
 import { useState } from "react";
 import { CheckCircle2, Pencil, Star } from "lucide-react";
 import { saveCourseRatingAction, dismissCourseRatingAction, type CourseRatingView } from "@/server/actions/course-rating";
-import { StarRating, StarRatingInput } from "@/components/learn/star-rating";
+import { RatingHappyDot, StarRating, StarRatingInput } from "@/components/learn/star-rating";
 import { cn } from "@/lib/utils";
 
 /**
- * One card, after the course is complete. Skippable, editable, never repeated.
- * The copy explains why the rating matters so it does not feel like a survey.
+ * One card on the course overview once the learner has completed at least one chapter.
+ * Skippable, editable, never repeated after dismissal.
  */
 export function CourseRatingCard({
   courseSlug,
@@ -98,6 +98,12 @@ export function CourseRatingCard({
               Your rating helps other learners decide and helps us fix the parts that did not work.
             </p>
 
+            {rating > 0 ? (
+              <div className="mt-3">
+                <RatingHappyDot rating={rating} size={68} />
+              </div>
+            ) : null}
+
             <div className="mt-3">
               <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
             </div>
diff --git a/frontend/src/components/learn/course-rating-link.tsx b/frontend/src/components/learn/course-rating-link.tsx
index f7eba1e4d..0a6a76098 100644
--- a/frontend/src/components/learn/course-rating-link.tsx
+++ b/frontend/src/components/learn/course-rating-link.tsx
@@ -1,48 +1,23 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Star, X } from "lucide-react";
-import { saveCourseRatingAction } from "@/server/actions/course-rating";
-import { StarRatingInput } from "@/components/learn/star-rating";
-import { Button } from "@/components/ui/button";
+import { Star } from "lucide-react";
+import { CourseRatingModal } from "@/components/learn/course-rating-modal";
 
 /**
  * The on-demand path left after the learner dismisses the full prompt.
- * Clicking it opens the form; it never expands on its own.
+ * Clicking it opens the rating modal; it never expands on its own.
  */
-export function CourseRatingLink({ courseSlug }: { courseSlug: string }) {
+export function CourseRatingLink({
+  courseSlug,
+  courseTitle,
+}: {
+  courseSlug: string;
+  courseTitle?: string;
+}) {
   const router = useRouter();
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const [open, setOpen] = useState(false);
-  const [rating, setRating] = useState(0);
-  const [review, setReview] = useState("");
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) dialog.showModal();
-    if (!open && dialog.open) dialog.close();
-  }, [open]);
-
-  async function submit() {
-    if (rating < 1) {
-      setError("Choose a star rating first.");
-      return;
-    }
-    setPending(true);
-    setError(null);
-    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
-    setPending(false);
-    if (res.ok) {
-      setOpen(false);
-      router.refresh();
-    } else {
-      setError(res.error);
-    }
-  }
 
   return (
     <>
@@ -54,51 +29,14 @@ export function CourseRatingLink({ courseSlug }: { courseSlug: string }) {
         <Star className="size-4" aria-hidden /> Rate this course
       </button>
 
-      <dialog
-        ref={dialogRef}
+      <CourseRatingModal
+        open={open}
         onClose={() => setOpen(false)}
-        onClick={(event) => {
-          if (event.target === event.currentTarget) setOpen(false);
-        }}
-        className="fixed inset-0 z-50 m-auto w-[calc(100%-2rem)] max-w-md rounded-2xl border border-border bg-card p-5 text-card-foreground backdrop:bg-foreground/30"
-        aria-labelledby="course-rating-title"
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <h2 id="course-rating-title" className="text-lg font-semibold">
-              Rate this course
-            </h2>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Your rating helps other learners decide.
-            </p>
-          </div>
-          <button type="button" onClick={() => setOpen(false)} aria-label="Close" className="rounded p-1 text-muted-foreground hover:text-foreground">
-            <X className="size-4" />
-          </button>
-        </div>
-
-        <div className="mt-3">
-          <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
-        </div>
-        <textarea
-          value={review}
-          onChange={(event) => setReview(event.target.value)}
-          rows={3}
-          maxLength={1000}
-          placeholder="Add a few words (optional)"
-          className="mt-3 w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
-        />
-        {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
-
-        <div className="mt-3 flex justify-end gap-2">
-          <Button type="button" variant="ghost" onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <Button type="button" onClick={submit} disabled={rating < 1 || pending}>
-            {pending ? "Saving…" : "Submit rating"}
-          </Button>
-        </div>
-      </dialog>
+        courseSlug={courseSlug}
+        courseTitle={courseTitle}
+        dismissLabel="Cancel"
+        onSubmitted={() => router.refresh()}
+      />
     </>
   );
 }
diff --git a/frontend/src/components/learn/course-rating-modal.tsx b/frontend/src/components/learn/course-rating-modal.tsx
new file mode 100644
index 000000000..184190026
--- /dev/null
+++ b/frontend/src/components/learn/course-rating-modal.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { dismissCourseRatingAction, saveCourseRatingAction } from "@/server/actions/course-rating";
+import { RatingHappyDot, StarRatingInput } from "@/components/learn/star-rating";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const PROMPT_OPEN_DELAY_MS = 280;
+
+function promptStorageKey(courseSlug: string) {
+  return `buildment:rating-prompt-handled:${courseSlug}`;
+}
+
+export function CourseRatingModal({
+  open,
+  onClose,
+  courseSlug,
+  courseTitle,
+  dismissLabel = "Cancel",
+  onSubmitted,
+}: {
+  open: boolean;
+  onClose: () => void;
+  courseSlug: string;
+  courseTitle?: string;
+  dismissLabel?: string;
+  onSubmitted?: () => void;
+}) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [rating, setRating] = useState(0);
+  const [review, setReview] = useState("");
+  const [pending, setPending] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+    return () => {
+      if (dialog.open) dialog.close();
+    };
+  }, [open]);
+
+  function handleClose() {
+    if (pending) return;
+    setRating(0);
+    setReview("");
+    setSaved(false);
+    setError(null);
+    onClose();
+  }
+
+  async function submit() {
+    if (rating < 1) {
+      setError("Choose a star rating first.");
+      return;
+    }
+    setPending(true);
+    setError(null);
+    const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
+    setPending(false);
+    if (res.ok) {
+      setSaved(true);
+      onSubmitted?.();
+    } else {
+      setError(res.error);
+    }
+  }
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={(event) => {
+        event.preventDefault();
+        handleClose();
+      }}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) handleClose();
+      }}
+      onKeyDown={(event) => {
+        if (event.key !== "Tab") return;
+        const controls = event.currentTarget.querySelectorAll<HTMLElement>(
+          "button:not(:disabled), textarea:not(:disabled), a[href]",
+        );
+        const first = controls[0];
+        const last = controls[controls.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }}
+      aria-labelledby="course-rating-title"
+      aria-describedby="course-rating-description"
+      className="fixed inset-0 z-50 m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md overflow-y-auto rounded-2xl border border-border bg-card p-0 text-card-foreground shadow-lg backdrop:bg-foreground/30"
+    >
+      {open ? (
+        <div className="p-5 sm:p-6">
+          {saved ? (
+            <div className="text-center">
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleClose}
+                  aria-label="Close"
+                  className="size-9"
+                >
+                  <X className="size-4" aria-hidden />
+                </Button>
+              </div>
+              <RatingHappyDot rating={rating || 5} size={84} />
+              <h2 id="course-rating-title" className="mt-4 text-xl font-semibold tracking-tight">
+                Thanks for your review!
+              </h2>
+              <p id="course-rating-description" className="mt-1.5 text-sm text-muted-foreground">
+                Your rating helps other learners decide and helps us improve the course.
+              </p>
+              <Button type="button" onClick={handleClose} className="mt-5 w-full min-h-11">
+                Continue learning
+              </Button>
+            </div>
+          ) : (
+            <>
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <h2 id="course-rating-title" className="text-lg font-semibold tracking-tight sm:text-xl">
+                    {courseTitle ? `How is ${courseTitle} so far?` : "Rate this course"}
+                  </h2>
+                  <p id="course-rating-description" className="mt-1 text-sm text-muted-foreground">
+                    Your rating helps other learners decide.
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleClose}
+                  aria-label="Close"
+                  className="size-9 shrink-0"
+                >
+                  <X className="size-4" aria-hidden />
+                </Button>
+              </div>
+
+              {rating > 0 ? (
+                <div className="mt-4">
+                  <RatingHappyDot rating={rating} size={76} />
+                </div>
+              ) : null}
+
+              <div className={cn("mt-4 flex justify-center", rating > 0 && "mt-3")}>
+                <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
+              </div>
+
+              <label className="mt-4 block text-sm">
+                <span className="sr-only">Review (optional)</span>
+                <textarea
+                  value={review}
+                  onChange={(event) => setReview(event.target.value)}
+                  rows={3}
+                  maxLength={1000}
+                  placeholder="Add a few words (optional)"
+                  className="w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
+                />
+              </label>
+
+              {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
+
+              <div className="mt-4 flex justify-end gap-2">
+                <Button type="button" variant="ghost" onClick={handleClose} disabled={pending}>
+                  {dismissLabel}
+                </Button>
+                <Button type="button" onClick={submit} disabled={rating < 1 || pending}>
+                  {pending ? "Saving…" : "Submit rating"}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      ) : null}
+    </dialog>
+  );
+}
+
+/**
+ * One-time pop-up shown after the learner completes a chapter and moves on to
+ * the next chapter. Dismissing or submitting remembers the choice so it never
+ * interrupts subsequent lessons.
+ */
+export function CourseRatingPrompt({
+  courseSlug,
+  courseTitle,
+  shouldPrompt,
+}: {
+  courseSlug: string;
+  courseTitle: string;
+  shouldPrompt: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const handledRef = useRef(false);
+  const submittedRef = useRef(false);
+
+  useEffect(() => {
+    if (!shouldPrompt || handledRef.current) return;
+    try {
+      if (window.sessionStorage.getItem(promptStorageKey(courseSlug)) === "1") {
+        handledRef.current = true;
+        return;
+      }
+    } catch {
+      // sessionStorage unavailable
+    }
+    const timer = window.setTimeout(() => {
+      setOpen(true);
+    }, PROMPT_OPEN_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [courseSlug, shouldPrompt]);
+
+  function markHandled() {
+    handledRef.current = true;
+    try {
+      window.sessionStorage.setItem(promptStorageKey(courseSlug), "1");
+    } catch {
+      // sessionStorage unavailable
+    }
+  }
+
+  function handleClose() {
+    setOpen(false);
+    markHandled();
+    if (!submittedRef.current) {
+      void dismissCourseRatingAction({ courseSlug });
+    }
+  }
+
+  return (
+    <CourseRatingModal
+      open={open}
+      onClose={handleClose}
+      courseSlug={courseSlug}
+      courseTitle={courseTitle}
+      dismissLabel="Not now"
+      onSubmitted={() => {
+        submittedRef.current = true;
+        markHandled();
+      }}
+    />
+  );
+}
diff --git a/frontend/src/components/learn/mark-chapter-complete.tsx b/frontend/src/components/learn/mark-chapter-complete.tsx
index 337dd9374..a69bf70a4 100644
--- a/frontend/src/components/learn/mark-chapter-complete.tsx
+++ b/frontend/src/components/learn/mark-chapter-complete.tsx
@@ -19,7 +19,6 @@ const MODAL_OPEN_DELAY_MS = 200;
 
 export function ChapterCompletionStrip(props: {
   chapterId: string;
-  courseSlug: string;
   nextLocked: boolean;
   chapterComplete: boolean;
   canMarkComplete: boolean;
@@ -40,7 +39,6 @@ type CelebrationPhase = "idle" | "burst" | "modal";
 
 function ChapterCompletionMoment({
   chapterId,
-  courseSlug,
   nextLocked,
   chapterComplete,
   canMarkComplete,
@@ -55,7 +53,6 @@ function ChapterCompletionMoment({
   streakMilestone = null,
 }: {
   chapterId: string;
-  courseSlug: string;
   nextLocked: boolean;
   chapterComplete: boolean;
   canMarkComplete: boolean;
@@ -245,7 +242,6 @@ function ChapterCompletionMoment({
         courseTotal={courseTotal}
         nextHref={nextLocked && !isComplete ? undefined : nextHref}
         nextTitle={nextTitle}
-        courseSlug={courseSlug}
       />
     </>
   );
diff --git a/frontend/src/components/learn/star-rating.tsx b/frontend/src/components/learn/star-rating.tsx
index d61fecb4f..235728b0b 100644
--- a/frontend/src/components/learn/star-rating.tsx
+++ b/frontend/src/components/learn/star-rating.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Star } from "lucide-react";
+import { Dot } from "@/components/brand/dot";
 import { cn } from "@/lib/utils";
 
 /** Read-only 1–5 stars with fractional fill for averages like 4.7. */
@@ -51,7 +52,7 @@ export function StarRatingInput({
           aria-checked={value === star}
           aria-label={`${star} star${star === 1 ? "" : "s"}`}
           disabled={disabled}
-          onClick={() => onChange(star)}
+          onClick={() => onChange(value === star ? 0 : star)}
           className={cn(
             "rounded p-0.5 transition-colors focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-brand-yellow",
             star <= value ? "text-amber-500 [&>svg]:fill-current" : "text-muted-foreground/40 hover:text-amber-500/70",
@@ -63,3 +64,19 @@ export function StarRatingInput({
     </div>
   );
 }
+
+/** For 1–5 stars, show Happy Dot yipping; for 0 stars, keep it simple. */
+export function RatingHappyDot({ rating, size = 76 }: { rating: number; size?: number }) {
+  if (rating < 1) return null;
+  return (
+    <div
+      key={rating}
+      data-testid="rating-happy-dot"
+      className="flex flex-col items-center justify-center rounded-xl bg-muted/40 py-3"
+    >
+      <div className="dot-yip">
+        <Dot mood="cheer" size={size} />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/shared/api/catalog.ts b/frontend/src/shared/api/catalog.ts
index 0ec461754..9979acbb8 100644
--- a/frontend/src/shared/api/catalog.ts
+++ b/frontend/src/shared/api/catalog.ts
@@ -65,9 +65,9 @@ export type CourseOverview = {
   };
   access: "active" | "payment_required" | "none";
   enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
-  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  /** The learner's own rating, once submitted. Drives the overview card and edit state. */
   rating: { rating: number; review: string | null; updatedAt: string } | null;
-  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  /** The learner dismissed the rating prompt; keep only the small on-demand link. */
   ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
diff --git a/frontend/src/shared/api/reader.ts b/frontend/src/shared/api/reader.ts
index 1b14ddb12..de41cd29f 100644
--- a/frontend/src/shared/api/reader.ts
+++ b/frontend/src/shared/api/reader.ts
@@ -27,6 +27,8 @@ export type ChapterReaderContent = {
   predictGate: boolean;
   predictRevealed: boolean;
   helpThread: HelpThreadView | null;
+  /** True when the learner completed a chapter, moved on, and has neither rated nor dismissed the prompt. */
+  promptCourseRating?: boolean;
 };
 
 export type ChapterReaderView = {
diff --git a/frontend/tests/unit/learn/course-rating.test.ts b/frontend/tests/unit/learn/course-rating.test.ts
new file mode 100644
index 000000000..fbecf4f84
--- /dev/null
+++ b/frontend/tests/unit/learn/course-rating.test.ts
@@ -0,0 +1,73 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { RatingHappyDot, StarRatingInput } from "@/components/learn/star-rating";
+import { CourseRatingModal } from "@/components/learn/course-rating-modal";
+import { CourseRatingCard } from "@/components/learn/course-rating-card";
+import { ChapterCompleteCelebrationModal } from "@/components/learn/chapter-complete-celebration-modal";
+
+vi.mock("@/server/actions/course-rating", () => ({
+  saveCourseRatingAction: vi.fn(),
+  dismissCourseRatingAction: vi.fn(),
+}));
+
+describe("course rating UI", () => {
+  it("keeps zero stars simple without rendering Dot", () => {
+    const dotHtml = renderToStaticMarkup(createElement(RatingHappyDot, { rating: 0 }));
+    expect(dotHtml).toBe("");
+
+    const modalHtml = renderToStaticMarkup(
+      createElement(CourseRatingModal, {
+        open: true,
+        onClose: () => undefined,
+        courseSlug: "system-design",
+        courseTitle: "System Design",
+        dismissLabel: "Not now",
+      }),
+    );
+    expect(modalHtml).toContain("How is System Design so far?");
+    expect(modalHtml).toContain("Not now");
+    expect(modalHtml).not.toContain("rating-happy-dot");
+    expect(modalHtml).not.toContain("Dot, cheer");
+
+    const cardHtml = renderToStaticMarkup(
+      createElement(CourseRatingCard, {
+        courseSlug: "system-design",
+        courseTitle: "System Design",
+        initialRating: null,
+      }),
+    );
+    expect(cardHtml).not.toContain("rating-happy-dot");
+  });
+
+  it("renders Happy Dot yipping for every star rating (1 through 5)", () => {
+    for (const stars of [1, 2, 3, 4, 5]) {
+      const html = renderToStaticMarkup(createElement(RatingHappyDot, { rating: stars }));
+      expect(html).toContain('data-testid="rating-happy-dot"');
+      expect(html).toContain("dot-yip");
+      expect(html).toContain('aria-label="Dot, cheer"');
+    }
+  });
+
+  it("renders StarRatingInput radio buttons cleanly", () => {
+    const html = renderToStaticMarkup(
+      createElement(StarRatingInput, { value: 4, onChange: () => undefined }),
+    );
+    expect(html).toContain('aria-label="4 stars"');
+    expect(html).toContain('aria-checked="true"');
+  });
+
+  it("does not ask for a course rating inside the chapter-end celebration modal", () => {
+    const html = renderToStaticMarkup(
+      createElement(ChapterCompleteCelebrationModal, {
+        open: true,
+        onClose: () => undefined,
+        courseCompleted: 5,
+        courseTotal: 5,
+      }),
+    );
+    expect(html).toContain("You completed the course");
+    expect(html).not.toContain("Submit rating");
+    expect(html).not.toContain("How was the course?");
+  });
+});
diff --git a/packages/learning-ui/src/shared/api/catalog.ts b/packages/learning-ui/src/shared/api/catalog.ts
index 0ec461754..9979acbb8 100644
--- a/packages/learning-ui/src/shared/api/catalog.ts
+++ b/packages/learning-ui/src/shared/api/catalog.ts
@@ -65,9 +65,9 @@ export type CourseOverview = {
   };
   access: "active" | "payment_required" | "none";
   enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
-  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  /** The learner's own rating, once submitted. Drives the overview card and edit state. */
   rating: { rating: number; review: string | null; updatedAt: string } | null;
-  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  /** The learner dismissed the rating prompt; keep only the small on-demand link. */
   ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
diff --git a/server/src/services/chapters/reader.ts b/server/src/services/chapters/reader.ts
index 2e19837eb..a07142d7c 100644
--- a/server/src/services/chapters/reader.ts
+++ b/server/src/services/chapters/reader.ts
@@ -144,7 +144,7 @@ export async function loadChapterReader(courseSlug: string, chapterSlug: string,
     return loadChapterReader(courseSlug, chapterSlug, user, 1, forDownload);
   }
 
-  const [content, currentProgress, helpThreadRow, habit, chapterResponses, predictBlocks, headingNotes] = await Promise.all([
+  const [content, currentProgress, helpThreadRow, habit, chapterResponses, predictBlocks, headingNotes, existingRating] = await Promise.all([
     prisma.chapter.findUnique({ where: { id: chapter.id }, select: { compiled: true, source: true } }),
     prisma.chapterProgress.findUnique({
       where: { enrollmentId_chapterId: { enrollmentId: enrollment.id, chapterId: chapter.id } },
@@ -162,6 +162,10 @@ export async function loadChapterReader(courseSlug: string, chapterSlug: string,
       select: { id: true },
     }),
     prisma.headingNote.findMany({ where: { userId: user.id, chapterId: chapter.id }, select: { headingId: true, body: true } }),
+    prisma.courseRating.findUnique({
+      where: { courseId_userId: { courseId: course.id, userId: user.id } },
+      select: { id: true },
+    }),
   ]);
   if (!content) throw new NotFoundError("Chapter not found");
 
@@ -189,6 +193,12 @@ export async function loadChapterReader(courseSlug: string, chapterSlug: string,
   const latest = latestChapterResponses(chapterResponses);
   const answeredIds = new Set(latest.map((response) => response.blockId));
   const predictGate = predictBlocks.length > 0;
+  const promptCourseRating =
+    !forDownload &&
+    startedEnrollment.chaptersCompleted >= 1 &&
+    !chapterComplete &&
+    !existingRating &&
+    !startedEnrollment.ratingDismissedAt;
 
   return {
     ...base,
@@ -215,6 +225,7 @@ export async function loadChapterReader(courseSlug: string, chapterSlug: string,
       predictGate,
       predictRevealed: !predictGate || predictBlocks.every((block) => answeredIds.has(block.id)),
       helpThread: serializeHelpThread(helpThreadRow),
+      promptCourseRating,
     },
   };
 }
diff --git a/server/src/services/courses/ratings.ts b/server/src/services/courses/ratings.ts
index bb2fb5ff0..4735ba61b 100644
--- a/server/src/services/courses/ratings.ts
+++ b/server/src/services/courses/ratings.ts
@@ -2,9 +2,9 @@ import { prisma } from "../../db/prisma.js";
 import { ForbiddenError, NotFoundError } from "../../utils/errors.js";
 import type { SessionUser } from "../../types/auth.js";
 
-// Course ratings are the macro signal: one per learner, only after the course is
-// complete, editable, never prompted again. Lesson-level problems go through the
-// help/report channel instead.
+// Course ratings are the macro signal: one per learner, available once at least
+// one chapter is complete, editable, and prompted once when moving to the next
+// chapter. Lesson-level problems go through the help/report channel instead.
 
 export type CourseRatingView = {
   rating: number;
@@ -56,10 +56,10 @@ export async function saveCourseRating(
   const course = await publishedCourse(courseSlug);
   const enrollment = await prisma.enrollment.findUnique({
     where: { courseId_userId: { courseId: course.id, userId: user.id } },
-    select: { status: true },
+    select: { status: true, chaptersCompleted: true },
   });
-  if (!enrollment || enrollment.status !== "COMPLETED") {
-    throw new ForbiddenError("Complete the course before rating it.");
+  if (!enrollment || (enrollment.chaptersCompleted < 1 && enrollment.status !== "COMPLETED")) {
+    throw new ForbiddenError("Complete at least one chapter before rating this course.");
   }
 
   const review = input.review?.trim() || null;
diff --git a/server/src/shared/api/catalog.ts b/server/src/shared/api/catalog.ts
index 369d47b56..2e0a19c39 100644
--- a/server/src/shared/api/catalog.ts
+++ b/server/src/shared/api/catalog.ts
@@ -64,9 +64,9 @@ export type CourseOverview = {
   };
   access: "active" | "payment_required" | "none";
   enrollment: { percentComplete: number; chaptersCompleted: number; pendingReviews: number; status: EnrollStatus } | null;
-  /** The learner's own rating, once completed. Drives the completion card and the edit link. */
+  /** The learner's own rating, once submitted. Drives the overview card and edit state. */
   rating: { rating: number; review: string | null; updatedAt: string } | null;
-  /** The learner dismissed the post-completion prompt; keep only the small link. */
+  /** The learner dismissed the rating prompt; keep only the small on-demand link. */
   ratingDismissed: boolean;
   /** Present when an org coupon unlocked or discounted this enrollment. */
   coupon: CourseCouponEntitlement | null;
diff --git a/server/src/shared/api/reader.ts b/server/src/shared/api/reader.ts
index fcc4a959e..4e7fdb7cb 100644
--- a/server/src/shared/api/reader.ts
+++ b/server/src/shared/api/reader.ts
@@ -26,6 +26,8 @@ export type ChapterReaderContent = {
   predictGate: boolean;
   predictRevealed: boolean;
   helpThread: HelpThreadView | null;
+  /** True when the learner completed a chapter, moved on, and has neither rated nor dismissed the prompt. */
+  promptCourseRating?: boolean;
 };
 
 export type ChapterReaderView = {
diff --git a/server/tests/api/course-ratings.test.ts b/server/tests/api/course-ratings.test.ts
index 3152a4b40..c4e1391b2 100644
--- a/server/tests/api/course-ratings.test.ts
+++ b/server/tests/api/course-ratings.test.ts
@@ -2,7 +2,7 @@ import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import request from "supertest";
 import { createApp } from "../../src/app.js";
 import { prisma } from "../../src/db/prisma.js";
-import { createCourseFixture } from "../helpers/fixtures.js";
+import { completeChapter, createCourseFixture } from "../helpers/fixtures.js";
 
 const app = createApp();
 let fx: Awaited<ReturnType<typeof createCourseFixture>>;
@@ -18,7 +18,13 @@ afterAll(async () => {
 const learner = () => ({ Authorization: `Bearer ${fx.learnerToken}` });
 
 describe("/api/v1/courses/:courseSlug/rating", () => {
-  it("refuses a rating before the course is complete", async () => {
+  it("refuses a rating before any chapter is complete and does not prompt on the first chapter", async () => {
+    const firstChapter = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterA.slug}`)
+      .set(learner());
+    expect(firstChapter.status).toBe(200);
+    expect(firstChapter.body.data.content.promptCourseRating).toBe(false);
+
     const res = await request(app)
       .put(`/api/v1/courses/${fx.course.slug}/rating`)
       .set(learner())
@@ -26,12 +32,27 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
     expect(res.status).toBe(403);
   });
 
-  it("accepts one editable rating and updates the catalog aggregate", async () => {
+  it("prompts on the next chapter after one chapter is completed and accepts mid-course ratings", async () => {
+    await completeChapter(fx.enrollment.id, fx.chapterA.id);
     await prisma.enrollment.update({
       where: { id: fx.enrollment.id },
-      data: { status: "COMPLETED" },
+      data: { chaptersCompleted: 1, status: "IN_PROGRESS" },
     });
 
+    // Does not prompt on the completed chapter itself (when ending the chapter).
+    const completedChapter = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterA.slug}`)
+      .set(learner());
+    expect(completedChapter.status).toBe(200);
+    expect(completedChapter.body.data.content.promptCourseRating).toBe(false);
+
+    // Prompts once the learner moves on to the next chapter.
+    const nextChapter = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .set(learner());
+    expect(nextChapter.status).toBe(200);
+    expect(nextChapter.body.data.content.promptCourseRating).toBe(true);
+
     const invalid = await request(app)
       .put(`/api/v1/courses/${fx.course.slug}/rating`)
       .set(learner())
@@ -45,6 +66,12 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
     expect(created.status).toBe(200);
     expect(created.body.data).toMatchObject({ rating: 5, review: "Clear, practical, and worth the time." });
 
+    // Once rated, the chapter reader no longer prompts.
+    const nextAfterRating = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .set(learner());
+    expect(nextAfterRating.body.data.content.promptCourseRating).toBe(false);
+
     const mine = await request(app).get(`/api/v1/courses/${fx.course.slug}/rating`).set(learner());
     expect(mine.body.data.rating).toMatchObject({ rating: 5 });
 
@@ -70,7 +97,14 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
     expect(catalogAfter.body.data).toMatchObject({ ratingAverage: 3, ratingCount: 1 });
   });
 
-  it("remembers a dismissed prompt so the full card does not return", async () => {
+  it("remembers a dismissed prompt so neither the chapter pop-up nor overview card returns", async () => {
+    await prisma.courseRating.deleteMany({ where: { courseId: fx.course.id, userId: fx.learner.id } });
+
+    const beforeDismiss = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .set(learner());
+    expect(beforeDismiss.body.data.content.promptCourseRating).toBe(true);
+
     const res = await request(app)
       .post(`/api/v1/courses/${fx.course.slug}/rating/dismiss`)
       .set(learner());
@@ -80,6 +114,11 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
       .get(`/api/v1/courses/${fx.course.slug}/overview`)
       .set(learner());
     expect(overview.body.data.ratingDismissed).toBe(true);
+
+    const afterDismiss = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .set(learner());
+    expect(afterDismiss.body.data.content.promptCourseRating).toBe(false);
   });
 
   it("rejects an unverified learner", async () => {

From 575f45084b9e978d4db98251967b2118e4476150 Mon Sep 17 00:00:00 2001
From: Aqib Nawab <aqib-nawab@users.noreply.github.com>
Date: Sat, 7 Nov 2026 16:52:01 +0500
Subject: [PATCH 4/4] feat(courses): unlock rating past halfway with sound
 effects and refined UI

---
 .../(main)/courses/[courseSlug]/page.tsx      |  29 +--
 .../components/learn/course-rating-card.tsx   | 143 ++++++++-----
 .../components/learn/course-rating-modal.tsx  | 202 +++++++++++-------
 frontend/src/components/learn/star-rating.tsx | 103 +++++++--
 frontend/src/lib/rating-sound.ts              | 108 ++++++++++
 frontend/src/shared/api/reader.ts             |   2 +-
 .../tests/unit/learn/course-rating.test.ts    |  27 ++-
 .../learn/course-overview-content.tsx         |   5 +-
 server/src/services/chapters/reader.ts        |   6 +-
 server/src/services/courses/ratings.ts        |  37 +++-
 server/src/shared/api/reader.ts               |   2 +-
 server/tests/api/course-ratings.test.ts       |  52 +++--
 12 files changed, 527 insertions(+), 189 deletions(-)
 create mode 100644 frontend/src/lib/rating-sound.ts

diff --git a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
index e790d8cb7..70472f1e3 100644
--- a/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
+++ b/frontend/src/app/(learn)/(main)/courses/[courseSlug]/page.tsx
@@ -108,6 +108,11 @@ export default async function CourseOverviewPage({
   // Enroll, sign-up and the variant picker send ?start=1: open the lesson to read next, like a player.
   if (start === "1" && continueHref) redirect(continueHref);
 
+  const canRateCourse =
+    enrollment.status === "COMPLETED" ||
+    enrollment.percentComplete > 50 ||
+    (syllabus.chapterCount > 0 && enrollment.chaptersCompleted * 2 > syllabus.chapterCount);
+
   return (
     <WebCourseNavigation>
       <CourseOverviewContent
@@ -118,23 +123,21 @@ export default async function CourseOverviewPage({
           await upgradeCourseCurriculumAction(course.slug);
         }}
         ratingLink={
-          (enrollment.chaptersCompleted >= 1 || enrollment.status === "COMPLETED") &&
-          !overview.rating &&
-          overview.ratingDismissed ? (
+          canRateCourse && !overview.rating && overview.ratingDismissed ? (
             <CourseRatingLink courseSlug={course.slug} courseTitle={course.title} />
           ) : null
         }
+        ratingBanner={
+          canRateCourse && (overview.rating || !overview.ratingDismissed) ? (
+            <CourseRatingCard
+              courseSlug={course.slug}
+              courseTitle={course.title}
+              initialRating={overview.rating}
+              initialDismissed={overview.ratingDismissed}
+            />
+          ) : null
+        }
       />
-      {/* Available once at least one chapter is completed; acts as the overview form or edit surface. */}
-      {(enrollment.chaptersCompleted >= 1 || enrollment.status === "COMPLETED") &&
-      (overview.rating || !overview.ratingDismissed) ? (
-        <CourseRatingCard
-          courseSlug={course.slug}
-          courseTitle={course.title}
-          initialRating={overview.rating}
-          initialDismissed={overview.ratingDismissed}
-        />
-      ) : null}
     </WebCourseNavigation>
   );
 }
diff --git a/frontend/src/components/learn/course-rating-card.tsx b/frontend/src/components/learn/course-rating-card.tsx
index 2fc55b335..84695f9cc 100644
--- a/frontend/src/components/learn/course-rating-card.tsx
+++ b/frontend/src/components/learn/course-rating-card.tsx
@@ -1,14 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { CheckCircle2, Pencil, Star } from "lucide-react";
-import { saveCourseRatingAction, dismissCourseRatingAction, type CourseRatingView } from "@/server/actions/course-rating";
+import { fireMiniConfetti } from "@buildment/learning-ui/components/learn/mini-confetti";
+import {
+  saveCourseRatingAction,
+  dismissCourseRatingAction,
+  type CourseRatingView,
+} from "@/server/actions/course-rating";
 import { RatingHappyDot, StarRating, StarRatingInput } from "@/components/learn/star-rating";
-import { cn } from "@/lib/utils";
+import { playRatingSubmitSound } from "@/lib/rating-sound";
+import { Button } from "@/components/ui/button";
 
 /**
- * One card on the course overview once the learner has completed at least one chapter.
- * Skippable, editable, never repeated after dismissal.
+ * Course overview rating bar, unlocked once the learner finishes more than half
+ * of the course. Skippable, editable, and kept simple at 0 stars with Happy Dot
+ * yipping once any star (1–5) is chosen.
  */
 export function CourseRatingCard({
   courseSlug,
@@ -21,6 +28,7 @@ export function CourseRatingCard({
   initialRating: CourseRatingView | null;
   initialDismissed?: boolean;
 }) {
+  const cardRef = useRef<HTMLDivElement>(null);
   const [rating, setRating] = useState(initialRating?.rating ?? 0);
   const [review, setReview] = useState(initialRating?.review ?? "");
   const [saved, setSaved] = useState<CourseRatingView | null>(initialRating);
@@ -47,6 +55,10 @@ export function CourseRatingCard({
     const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
     setPending(false);
     if (res.ok) {
+      playRatingSubmitSound();
+      if (cardRef.current) {
+        fireMiniConfetti(cardRef.current);
+      }
       setSaved(res.data);
       setEditing(false);
     } else {
@@ -56,11 +68,12 @@ export function CourseRatingCard({
 
   if (dismissed && !saved && !editing) {
     return (
-      <div className="mx-auto mt-6 w-full max-w-4xl px-6">
+      <div className="flex items-center justify-between gap-3 rounded-[12px] border border-border bg-card px-4 py-3 text-sm">
+        <span className="text-muted-foreground">Ready to share how this course is going?</span>
         <button
           type="button"
           onClick={() => setEditing(true)}
-          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+          className="inline-flex items-center gap-1.5 font-semibold text-primary hover:underline"
         >
           <Star className="size-4" aria-hidden /> Rate this course
         </button>
@@ -69,88 +82,116 @@ export function CourseRatingCard({
   }
 
   return (
-    <section className="mx-auto mt-6 w-full max-w-4xl px-6">
-      <div className="rounded-2xl border border-border bg-card p-5 shadow-sm sm:p-6">
+    <section aria-label="Course rating">
+      <div
+        ref={cardRef}
+        className="overflow-hidden rounded-[14px] border border-border bg-card p-5 text-card-foreground shadow-2xs sm:p-6"
+      >
         {saved && !editing ? (
-          <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="flex flex-wrap items-center justify-between gap-4">
             <div>
-              <p className="text-sm font-medium text-foreground">Your rating</p>
-              <div className="mt-1 flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2.5">
+                <span className="text-sm font-bold text-foreground">Your rating</span>
                 <StarRating value={saved.rating} size={18} />
-                <span className="text-sm text-muted-foreground">{saved.rating} / 5</span>
+                <span className="font-mono text-xs font-semibold tabular-nums text-muted-foreground">
+                  {saved.rating}.0 / 5
+                </span>
+                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                  <CheckCircle2 className="size-3.5 text-primary" aria-hidden /> Saved
+                </span>
               </div>
               {saved.review ? (
-                <p className="mt-2 max-w-2xl text-sm text-muted-foreground">&ldquo;{saved.review}&rdquo;</p>
+                <p className="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">
+                  &ldquo;{saved.review}&rdquo;
+                </p>
               ) : null}
             </div>
-            <button
+            <Button
               type="button"
+              variant="outline"
+              size="sm"
               onClick={() => setEditing(true)}
-              className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
+              className="gap-1.5 rounded-[10px]"
             >
               <Pencil className="size-3.5" aria-hidden /> Edit review
-            </button>
+            </Button>
           </div>
         ) : (
           <>
-            <h2 className="text-base font-semibold text-foreground">How was {courseTitle}?</h2>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Your rating helps other learners decide and helps us fix the parts that did not work.
-            </p>
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <h2 className="font-heading text-base font-bold tracking-tight text-foreground sm:text-lg">
+                  How is {courseTitle} going?
+                </h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  You&apos;re past the halfway mark — your rating helps other learners decide and helps us improve.
+                </p>
+              </div>
+              <div className="shrink-0">
+                <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
+              </div>
+            </div>
 
             {rating > 0 ? (
-              <div className="mt-3">
-                <RatingHappyDot rating={rating} size={68} />
+              <div className="mt-4">
+                <RatingHappyDot rating={rating} size={64} compact />
               </div>
             ) : null}
 
-            <div className="mt-3">
-              <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
-            </div>
-
-            <label className="mt-3 block text-sm">
+            <label className="mt-4 block text-sm">
               <span className="sr-only">Review (optional)</span>
               <textarea
                 value={review}
                 onChange={(event) => setReview(event.target.value)}
-                rows={3}
+                rows={2}
                 maxLength={1000}
                 placeholder="Anything you want to add? (optional)"
-                className="w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
+                className="w-full resize-y rounded-[12px] border border-border bg-background px-3.5 py-2.5 text-sm outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/15"
               />
             </label>
 
             {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
 
             <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
-              <button
-                type="button"
-                onClick={notNow}
-                disabled={pending}
-                className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted"
-              >
-                Not now
-              </button>
-              <button
+              {!saved ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={notNow}
+                  disabled={pending}
+                  className="rounded-[10px]"
+                >
+                  Not now
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setRating(saved.rating);
+                    setReview(saved.review ?? "");
+                    setEditing(false);
+                  }}
+                  disabled={pending}
+                  className="rounded-[10px]"
+                >
+                  Cancel
+                </Button>
+              )}
+              <Button
                 type="button"
+                size="sm"
                 onClick={submit}
                 disabled={pending || rating < 1}
-                className={cn(
-                  "inline-flex items-center gap-2 rounded-md bg-foreground px-4 py-1.5 text-sm font-medium text-background",
-                  (pending || rating < 1) && "opacity-60",
-                )}
+                className="rounded-[10px] font-semibold"
               >
-                {saved ? "Update rating" : "Submit rating"}
-              </button>
+                {pending ? "Saving…" : saved ? "Update review" : "Submit review"}
+              </Button>
             </div>
           </>
         )}
-
-        {saved && !editing ? (
-          <p className="mt-3 inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-            <CheckCircle2 className="size-3.5 text-primary" aria-hidden /> Thanks. You can change this any time.
-          </p>
-        ) : null}
       </div>
     </section>
   );
diff --git a/frontend/src/components/learn/course-rating-modal.tsx b/frontend/src/components/learn/course-rating-modal.tsx
index 184190026..ce083e443 100644
--- a/frontend/src/components/learn/course-rating-modal.tsx
+++ b/frontend/src/components/learn/course-rating-modal.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { X } from "lucide-react";
+import { Sparkles, Volume2, VolumeX, X } from "lucide-react";
+import { fireMiniConfetti } from "@buildment/learning-ui/components/learn/mini-confetti";
 import { dismissCourseRatingAction, saveCourseRatingAction } from "@/server/actions/course-rating";
 import { RatingHappyDot, StarRatingInput } from "@/components/learn/star-rating";
+import { playRatingPromptSound, playRatingSubmitSound, useRatingSound } from "@/lib/rating-sound";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-const PROMPT_OPEN_DELAY_MS = 280;
+const PROMPT_OPEN_DELAY_MS = 320;
 
 function promptStorageKey(courseSlug: string) {
   return `buildment:rating-prompt-handled:${courseSlug}`;
@@ -18,6 +20,7 @@ export function CourseRatingModal({
   onClose,
   courseSlug,
   courseTitle,
+  badgeLabel = "Course review",
   dismissLabel = "Cancel",
   onSubmitted,
 }: {
@@ -25,10 +28,13 @@ export function CourseRatingModal({
   onClose: () => void;
   courseSlug: string;
   courseTitle?: string;
+  badgeLabel?: string;
   dismissLabel?: string;
   onSubmitted?: () => void;
 }) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const confettiAnchorRef = useRef<HTMLDivElement>(null);
+  const [soundOn, setSoundOn] = useRatingSound();
   const [rating, setRating] = useState(0);
   const [review, setReview] = useState("");
   const [pending, setPending] = useState(false);
@@ -64,6 +70,10 @@ export function CourseRatingModal({
     const res = await saveCourseRatingAction({ courseSlug, rating, review: review.trim() || null });
     setPending(false);
     if (res.ok) {
+      playRatingSubmitSound();
+      if (confettiAnchorRef.current) {
+        fireMiniConfetti(confettiAnchorRef.current);
+      }
       setSaved(true);
       onSubmitted?.();
     } else {
@@ -98,92 +108,136 @@ export function CourseRatingModal({
       }}
       aria-labelledby="course-rating-title"
       aria-describedby="course-rating-description"
-      className="fixed inset-0 z-50 m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md overflow-y-auto rounded-2xl border border-border bg-card p-0 text-card-foreground shadow-lg backdrop:bg-foreground/30"
+      className="fixed inset-0 z-50 m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-[27rem] overflow-hidden rounded-[18px] border border-border bg-card p-0 text-card-foreground shadow-2xl backdrop:bg-foreground/40 backdrop:backdrop-blur-[2px] motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:duration-200"
     >
       {open ? (
-        <div className="p-5 sm:p-6">
-          {saved ? (
-            <div className="text-center">
-              <div className="flex justify-end">
-                <Button
+        <div ref={confettiAnchorRef} className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-y-auto">
+          <div className="h-1.5 w-full shrink-0 bg-primary" aria-hidden />
+
+          <div className="p-5 sm:p-6">
+            <div className="flex items-center justify-between gap-2">
+              <span className="inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-1 text-xs font-bold tracking-wide text-primary">
+                <Sparkles className="size-3.5" aria-hidden />
+                {badgeLabel}
+              </span>
+
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => setSoundOn(!soundOn)}
+                  aria-label={soundOn ? "Mute rating sound effects" : "Enable rating sound effects"}
+                  aria-pressed={soundOn}
+                  title={soundOn ? "Sound effects on" : "Sound effects muted"}
+                  className={cn(
+                    "grid size-8 place-items-center rounded-[8px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-brand-yellow",
+                    soundOn && "text-primary",
+                  )}
+                >
+                  {soundOn ? <Volume2 className="size-4" aria-hidden /> : <VolumeX className="size-4" aria-hidden />}
+                </button>
+                <button
                   type="button"
-                  variant="ghost"
-                  size="icon"
                   onClick={handleClose}
                   aria-label="Close"
-                  className="size-9"
+                  className="grid size-8 place-items-center rounded-[8px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-brand-yellow"
                 >
                   <X className="size-4" aria-hidden />
-                </Button>
+                </button>
               </div>
-              <RatingHappyDot rating={rating || 5} size={84} />
-              <h2 id="course-rating-title" className="mt-4 text-xl font-semibold tracking-tight">
-                Thanks for your review!
-              </h2>
-              <p id="course-rating-description" className="mt-1.5 text-sm text-muted-foreground">
-                Your rating helps other learners decide and helps us improve the course.
-              </p>
-              <Button type="button" onClick={handleClose} className="mt-5 w-full min-h-11">
-                Continue learning
-              </Button>
             </div>
-          ) : (
-            <>
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <h2 id="course-rating-title" className="text-lg font-semibold tracking-tight sm:text-xl">
-                    {courseTitle ? `How is ${courseTitle} so far?` : "Rate this course"}
+
+            {saved ? (
+              <div className="mt-4 text-center">
+                <RatingHappyDot rating={rating || 5} size={84} />
+                <h2
+                  id="course-rating-title"
+                  className="mt-4 font-heading text-xl font-bold tracking-tight text-foreground"
+                >
+                  Thanks for your review!
+                </h2>
+                <p id="course-rating-description" className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+                  Your rating helps future learners choose with confidence and helps us keep improving this course.
+                </p>
+                <Button type="button" onClick={handleClose} className="mt-5 min-h-11 w-full rounded-[10px] font-semibold">
+                  Continue learning
+                </Button>
+              </div>
+            ) : (
+              <>
+                <div className="mt-3.5">
+                  <h2
+                    id="course-rating-title"
+                    className="font-heading text-lg font-bold leading-snug tracking-tight text-foreground sm:text-[21px]"
+                  >
+                    {courseTitle ? `How is ${courseTitle} going?` : "Rate this course"}
                   </h2>
-                  <p id="course-rating-description" className="mt-1 text-sm text-muted-foreground">
-                    Your rating helps other learners decide.
+                  <p id="course-rating-description" className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+                    Your honest rating helps other learners decide and shapes future updates.
                   </p>
                 </div>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={handleClose}
-                  aria-label="Close"
-                  className="size-9 shrink-0"
+
+                {rating > 0 ? (
+                  <div className="mt-4">
+                    <RatingHappyDot rating={rating} size={76} />
+                  </div>
+                ) : null}
+
+                <div
+                  className={cn(
+                    "mt-4 flex flex-col items-center rounded-[14px] border border-border bg-muted/25 px-4 py-3.5",
+                    rating > 0 && "mt-3",
+                  )}
                 >
-                  <X className="size-4" aria-hidden />
-                </Button>
-              </div>
+                  <StarRatingInput value={rating} onChange={setRating} disabled={pending} size="lg" />
+                  {rating === 0 ? (
+                    <p className="mt-1.5 text-xs text-muted-foreground">Tap a star to rate</p>
+                  ) : null}
+                </div>
 
-              {rating > 0 ? (
                 <div className="mt-4">
-                  <RatingHappyDot rating={rating} size={76} />
+                  <div className="mb-1.5 flex items-center justify-between text-xs text-muted-foreground">
+                    <label htmlFor="course-rating-review" className="font-medium text-foreground/80">
+                      Written review <span className="font-normal text-muted-foreground">(optional)</span>
+                    </label>
+                    {review.length > 0 ? (
+                      <span className="font-mono tabular-nums">{review.length}/1000</span>
+                    ) : null}
+                  </div>
+                  <textarea
+                    id="course-rating-review"
+                    value={review}
+                    onChange={(event) => setReview(event.target.value)}
+                    rows={3}
+                    maxLength={1000}
+                    placeholder="What stood out, or what could be clearer?"
+                    className="w-full resize-y rounded-[12px] border border-border bg-background px-3.5 py-2.5 text-sm leading-relaxed outline-none transition-colors placeholder:text-muted-foreground/70 focus:border-primary focus:ring-2 focus:ring-primary/15"
+                  />
                 </div>
-              ) : null}
 
-              <div className={cn("mt-4 flex justify-center", rating > 0 && "mt-3")}>
-                <StarRatingInput value={rating} onChange={setRating} disabled={pending} />
-              </div>
+                {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
 
-              <label className="mt-4 block text-sm">
-                <span className="sr-only">Review (optional)</span>
-                <textarea
-                  value={review}
-                  onChange={(event) => setReview(event.target.value)}
-                  rows={3}
-                  maxLength={1000}
-                  placeholder="Add a few words (optional)"
-                  className="w-full resize-y rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
-                />
-              </label>
-
-              {error ? <p className="mt-2 text-sm text-destructive">{error}</p> : null}
-
-              <div className="mt-4 flex justify-end gap-2">
-                <Button type="button" variant="ghost" onClick={handleClose} disabled={pending}>
-                  {dismissLabel}
-                </Button>
-                <Button type="button" onClick={submit} disabled={rating < 1 || pending}>
-                  {pending ? "Saving…" : "Submit rating"}
-                </Button>
-              </div>
-            </>
-          )}
+                <div className="mt-5 flex items-center justify-end gap-2 border-t border-border pt-4">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={handleClose}
+                    disabled={pending}
+                    className="rounded-[10px]"
+                  >
+                    {dismissLabel}
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={submit}
+                    disabled={rating < 1 || pending}
+                    className="min-w-36 rounded-[10px] font-semibold"
+                  >
+                    {pending ? "Saving…" : "Submit review"}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
         </div>
       ) : null}
     </dialog>
@@ -191,9 +245,9 @@ export function CourseRatingModal({
 }
 
 /**
- * One-time pop-up shown after the learner completes a chapter and moves on to
- * the next chapter. Dismissing or submitting remembers the choice so it never
- * interrupts subsequent lessons.
+ * One-time pop-up shown once the learner has finished more than half of the
+ * course and moves on to the next chapter. Dismissing or submitting remembers
+ * the choice so it never interrupts subsequent lessons.
  */
 export function CourseRatingPrompt({
   courseSlug,
@@ -219,6 +273,7 @@ export function CourseRatingPrompt({
       // sessionStorage unavailable
     }
     const timer = window.setTimeout(() => {
+      playRatingPromptSound();
       setOpen(true);
     }, PROMPT_OPEN_DELAY_MS);
     return () => window.clearTimeout(timer);
@@ -247,6 +302,7 @@ export function CourseRatingPrompt({
       onClose={handleClose}
       courseSlug={courseSlug}
       courseTitle={courseTitle}
+      badgeLabel="Halfway milestone"
       dismissLabel="Not now"
       onSubmitted={() => {
         submittedRef.current = true;
diff --git a/frontend/src/components/learn/star-rating.tsx b/frontend/src/components/learn/star-rating.tsx
index 235728b0b..a88d5b88a 100644
--- a/frontend/src/components/learn/star-rating.tsx
+++ b/frontend/src/components/learn/star-rating.tsx
@@ -1,9 +1,19 @@
 "use client";
 
+import { useState } from "react";
 import { Star } from "lucide-react";
 import { Dot } from "@/components/brand/dot";
+import { playRatingStarSound } from "@/lib/rating-sound";
 import { cn } from "@/lib/utils";
 
+export const RATING_LABELS: Record<number, string> = {
+  1: "Needs work",
+  2: "Fair",
+  3: "Good",
+  4: "Really good",
+  5: "Loved it!",
+};
+
 /** Read-only 1–5 stars with fractional fill for averages like 4.7. */
 export function StarRating({
   value,
@@ -32,51 +42,100 @@ export function StarRating({
   );
 }
 
-/** Interactive 1–5 stars for the rating form. */
+/** Interactive 1–5 stars for the rating form with hover preview and tactile sound effects. */
 export function StarRatingInput({
   value,
   onChange,
   disabled,
+  size = "md",
 }: {
   value: number;
   onChange: (value: number) => void;
   disabled?: boolean;
+  size?: "md" | "lg";
 }) {
+  const [hovered, setHovered] = useState(0);
+  const activeCount = hovered > 0 ? hovered : value;
+
   return (
-    <div className="flex items-center gap-1" role="radiogroup" aria-label="Course rating">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <button
-          key={star}
-          type="button"
-          role="radio"
-          aria-checked={value === star}
-          aria-label={`${star} star${star === 1 ? "" : "s"}`}
-          disabled={disabled}
-          onClick={() => onChange(value === star ? 0 : star)}
-          className={cn(
-            "rounded p-0.5 transition-colors focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-brand-yellow",
-            star <= value ? "text-amber-500 [&>svg]:fill-current" : "text-muted-foreground/40 hover:text-amber-500/70",
-          )}
-        >
-          <Star className="size-7" aria-hidden />
-        </button>
-      ))}
+    <div
+      className="inline-flex items-center gap-1.5"
+      role="radiogroup"
+      aria-label="Course rating"
+      onMouseLeave={() => setHovered(0)}
+    >
+      {[1, 2, 3, 4, 5].map((star) => {
+        const filled = star <= activeCount;
+        const selected = star <= value;
+        return (
+          <button
+            key={star}
+            type="button"
+            role="radio"
+            aria-checked={value === star}
+            aria-label={`${star} star${star === 1 ? "" : "s"} — ${RATING_LABELS[star]}`}
+            disabled={disabled}
+            onMouseEnter={() => {
+              if (!disabled) setHovered(star);
+            }}
+            onClick={() => {
+              const next = value === star ? 0 : star;
+              playRatingStarSound(next);
+              onChange(next);
+            }}
+            className={cn(
+              "group relative grid place-items-center rounded-[10px] transition-all duration-150 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-brand-yellow",
+              size === "lg" ? "size-11" : "size-10",
+              !disabled && "hover:scale-110 active:scale-95",
+              selected
+                ? "text-amber-500 [&>svg]:fill-[#FFC933] [&>svg]:stroke-amber-500"
+                : filled
+                  ? "text-amber-400/85 [&>svg]:fill-[#FFC933]/65 [&>svg]:stroke-amber-500/80"
+                  : "text-muted-foreground/35 hover:text-amber-500/70",
+            )}
+          >
+            <Star className={cn(size === "lg" ? "size-8" : "size-7", "transition-transform")} aria-hidden />
+          </button>
+        );
+      })}
     </div>
   );
 }
 
 /** For 1–5 stars, show Happy Dot yipping; for 0 stars, keep it simple. */
-export function RatingHappyDot({ rating, size = 76 }: { rating: number; size?: number }) {
+export function RatingHappyDot({
+  rating,
+  size = 76,
+  compact = false,
+}: {
+  rating: number;
+  size?: number;
+  compact?: boolean;
+}) {
   if (rating < 1) return null;
+  const label = RATING_LABELS[rating] ?? "Great";
   return (
     <div
       key={rating}
       data-testid="rating-happy-dot"
-      className="flex flex-col items-center justify-center rounded-xl bg-muted/40 py-3"
+      className={cn(
+        "flex items-center justify-center gap-3 rounded-[14px] border border-primary/15 bg-secondary/60",
+        compact ? "px-3.5 py-2.5" : "flex-col px-4 py-3.5 text-center",
+      )}
     >
-      <div className="dot-yip">
+      <div className="dot-yip shrink-0">
         <Dot mood="cheer" size={size} />
       </div>
+      <div className={cn(compact ? "text-left" : "flex flex-col items-center")}>
+        <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-0.5 text-xs font-bold text-primary shadow-2xs">
+          <span>{rating}★</span>
+          <span aria-hidden>·</span>
+          <span>{label}</span>
+        </span>
+        <p className="mt-1 text-xs font-medium text-muted-foreground">
+          Yippee! Thanks for sharing how the course feels.
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/lib/rating-sound.ts b/frontend/src/lib/rating-sound.ts
new file mode 100644
index 000000000..1214a5ff1
--- /dev/null
+++ b/frontend/src/lib/rating-sound.ts
@@ -0,0 +1,108 @@
+"use client";
+
+import { useBrowserStorage } from "@/lib/use-browser-storage";
+import { isSoundEnabled, playFeedback } from "@/lib/sound-feedback";
+
+const SOUND_STORAGE_KEY = "buildment:sound";
+
+/** Reactive hook synced with the platform-wide `buildment:sound` preference. */
+export function useRatingSound(): [enabled: boolean, setEnabled: (enabled: boolean) => void] {
+  const [stored, setStored] = useBrowserStorage(SOUND_STORAGE_KEY, "on");
+  return [stored !== "off", (enabled) => setStored(enabled ? "on" : "off")];
+}
+
+/** Soft chime when the mid-course review pop-up opens. */
+export function playRatingPromptSound() {
+  playFeedback("notification");
+}
+
+/** Celebratory cue when the learner submits their review. */
+export function playRatingSubmitSound() {
+  playFeedback("celebration");
+}
+
+const STAR_NOTES_HZ = [523.25, 587.33, 659.25, 783.99, 880.0] as const; // C5, D5, E5, G5, A5
+
+/**
+ * Tactile star chime + cheerful two-hop "yip-yip!" chirp synced with Happy Dot
+ * when 1–5 stars are selected, or a quiet tick when cleared back to 0 stars.
+ */
+export function playRatingStarSound(star: number) {
+  if (typeof window === "undefined" || !isSoundEnabled()) return;
+
+  if (star < 1) {
+    playFeedback("tick");
+    return;
+  }
+
+  try {
+    const AudioContextClass = window.AudioContext ?? window.webkitAudioContext;
+    if (!AudioContextClass) {
+      playFeedback("check");
+      return;
+    }
+
+    const context = new AudioContextClass();
+    void context.resume();
+    const now = context.currentTime;
+    const master = context.createGain();
+    master.gain.value = 0.16;
+    master.connect(context.destination);
+
+    // 1. Warm star bell rising with 1..5 stars
+    const clampedIndex = Math.max(0, Math.min(4, star - 1));
+    const noteHz = STAR_NOTES_HZ[clampedIndex]!;
+    bellNote(context, master, now, noteHz, 0.14, 0.22);
+    bellNote(context, master, now + 0.03, noteHz * 1.5, 0.06, 0.18);
+
+    // 2. Happy Dot two-hop "yip-yip!" chirp matching the bounce animation
+    chirpYip(context, master, now + 0.05, 560, 880, 0.085, 0.11);
+    chirpYip(context, master, now + 0.18, 650, 1040, 0.095, 0.12);
+
+    window.setTimeout(() => void context.close(), 900);
+  } catch {
+    playFeedback("check");
+  }
+}
+
+function bellNote(
+  context: AudioContext,
+  master: GainNode,
+  start: number,
+  hz: number,
+  peak: number,
+  duration: number,
+) {
+  const osc = context.createOscillator();
+  const gain = context.createGain();
+  osc.type = "sine";
+  osc.frequency.setValueAtTime(hz, start);
+  gain.gain.setValueAtTime(0.0001, start);
+  gain.gain.exponentialRampToValueAtTime(peak, start + 0.012);
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + duration);
+  osc.connect(gain).connect(master);
+  osc.start(start);
+  osc.stop(start + duration + 0.02);
+}
+
+function chirpYip(
+  context: AudioContext,
+  master: GainNode,
+  start: number,
+  fromHz: number,
+  toHz: number,
+  duration: number,
+  peak: number,
+) {
+  const osc = context.createOscillator();
+  const gain = context.createGain();
+  osc.type = "triangle";
+  osc.frequency.setValueAtTime(fromHz, start);
+  osc.frequency.exponentialRampToValueAtTime(toHz, start + duration * 0.72);
+  gain.gain.setValueAtTime(0.0001, start);
+  gain.gain.exponentialRampToValueAtTime(peak, start + 0.015);
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + duration);
+  osc.connect(gain).connect(master);
+  osc.start(start);
+  osc.stop(start + duration + 0.02);
+}
diff --git a/frontend/src/shared/api/reader.ts b/frontend/src/shared/api/reader.ts
index de41cd29f..22d8f1d18 100644
--- a/frontend/src/shared/api/reader.ts
+++ b/frontend/src/shared/api/reader.ts
@@ -27,7 +27,7 @@ export type ChapterReaderContent = {
   predictGate: boolean;
   predictRevealed: boolean;
   helpThread: HelpThreadView | null;
-  /** True when the learner completed a chapter, moved on, and has neither rated nor dismissed the prompt. */
+  /** True when the learner finished more than half of the course, moved on, and has neither rated nor dismissed the prompt. */
   promptCourseRating?: boolean;
 };
 
diff --git a/frontend/tests/unit/learn/course-rating.test.ts b/frontend/tests/unit/learn/course-rating.test.ts
index fbecf4f84..e03e0c300 100644
--- a/frontend/tests/unit/learn/course-rating.test.ts
+++ b/frontend/tests/unit/learn/course-rating.test.ts
@@ -1,17 +1,18 @@
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
-import { RatingHappyDot, StarRatingInput } from "@/components/learn/star-rating";
+import { RatingHappyDot, RATING_LABELS, StarRatingInput } from "@/components/learn/star-rating";
 import { CourseRatingModal } from "@/components/learn/course-rating-modal";
 import { CourseRatingCard } from "@/components/learn/course-rating-card";
 import { ChapterCompleteCelebrationModal } from "@/components/learn/chapter-complete-celebration-modal";
+import { playRatingPromptSound, playRatingStarSound, playRatingSubmitSound } from "@/lib/rating-sound";
 
 vi.mock("@/server/actions/course-rating", () => ({
   saveCourseRatingAction: vi.fn(),
   dismissCourseRatingAction: vi.fn(),
 }));
 
-describe("course rating UI", () => {
+describe("course rating UI & sound effects", () => {
   it("keeps zero stars simple without rendering Dot", () => {
     const dotHtml = renderToStaticMarkup(createElement(RatingHappyDot, { rating: 0 }));
     expect(dotHtml).toBe("");
@@ -22,10 +23,13 @@ describe("course rating UI", () => {
         onClose: () => undefined,
         courseSlug: "system-design",
         courseTitle: "System Design",
+        badgeLabel: "Halfway milestone",
         dismissLabel: "Not now",
       }),
     );
-    expect(modalHtml).toContain("How is System Design so far?");
+    expect(modalHtml).toContain("How is System Design going?");
+    expect(modalHtml).toContain("Halfway milestone");
+    expect(modalHtml).toContain("Tap a star to rate");
     expect(modalHtml).toContain("Not now");
     expect(modalHtml).not.toContain("rating-happy-dot");
     expect(modalHtml).not.toContain("Dot, cheer");
@@ -46,15 +50,24 @@ describe("course rating UI", () => {
       expect(html).toContain('data-testid="rating-happy-dot"');
       expect(html).toContain("dot-yip");
       expect(html).toContain('aria-label="Dot, cheer"');
+      expect(html).toContain(RATING_LABELS[stars]!);
     }
   });
 
-  it("renders StarRatingInput radio buttons cleanly", () => {
+  it("renders StarRatingInput radio buttons and sound toggle cleanly", () => {
     const html = renderToStaticMarkup(
-      createElement(StarRatingInput, { value: 4, onChange: () => undefined }),
+      createElement(StarRatingInput, { value: 4, onChange: () => undefined, size: "lg" }),
     );
-    expect(html).toContain('aria-label="4 stars"');
+    expect(html).toContain('aria-label="4 stars — Really good"');
     expect(html).toContain('aria-checked="true"');
+
+    // Sound helpers safely no-op in non-browser/SSR environments without throwing.
+    expect(() => {
+      playRatingPromptSound();
+      playRatingStarSound(0);
+      playRatingStarSound(5);
+      playRatingSubmitSound();
+    }).not.toThrow();
   });
 
   it("does not ask for a course rating inside the chapter-end celebration modal", () => {
@@ -67,7 +80,7 @@ describe("course rating UI", () => {
       }),
     );
     expect(html).toContain("You completed the course");
-    expect(html).not.toContain("Submit rating");
+    expect(html).not.toContain("Submit review");
     expect(html).not.toContain("How was the course?");
   });
 });
diff --git a/packages/learning-ui/src/components/learn/course-overview-content.tsx b/packages/learning-ui/src/components/learn/course-overview-content.tsx
index cfbdce027..2063a03cf 100644
--- a/packages/learning-ui/src/components/learn/course-overview-content.tsx
+++ b/packages/learning-ui/src/components/learn/course-overview-content.tsx
@@ -10,12 +10,14 @@ import { VariantThemeScope, variantForTrack } from './variant-theme';
 import { LearnerBreadcrumb } from './learner-breadcrumb';
 
 /** The enrolled course page, shared by web and desktop. Hosts own access and navigation. */
-export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgradeCurriculum, ratingLink }: {
+export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgradeCurriculum, ratingLink, ratingBanner }: {
   overview: CourseOverview;
   onChooseSpecialisation: (data: FormData) => Promise<void>;
   onUpgradeCurriculum?: () => Promise<void> | void;
   /** Host-provided content under the hero's continue button (e.g. the rating link). */
   ratingLink?: ReactNode;
+  /** Host-provided rating bar shown directly beneath the course hero once unlocked. */
+  ratingBanner?: ReactNode;
 }) {
   const { course, enrollment, syllabus, track } = overview;
   if (!enrollment || !syllabus || overview.access !== 'active') return null;
@@ -25,6 +27,7 @@ export function CourseOverviewContent({ overview, onChooseSpecialisation, onUpgr
     <div className="mx-auto max-w-6xl space-y-8 px-5 py-8 sm:px-6 sm:py-10">
       <LearnerBreadcrumb courseSlug={course.slug} courseTitle={course.title} />
       <CourseOverviewHero {...course} {...enrollment} chaptersTotal={chapterCount} continueHref={continueHref} continueLabel={continueLabel} moduleCount={modules.length} chapterCount={chapterCount} ratingLink={ratingLink} />
+      {ratingBanner}
       {overview.curriculumUpgradeAvailable ? (
         <CourseCurriculumUpgradeBanner courseSlug={course.slug} onUpgrade={onUpgradeCurriculum} />
       ) : null}
diff --git a/server/src/services/chapters/reader.ts b/server/src/services/chapters/reader.ts
index a07142d7c..954aa6fd6 100644
--- a/server/src/services/chapters/reader.ts
+++ b/server/src/services/chapters/reader.ts
@@ -193,9 +193,13 @@ export async function loadChapterReader(courseSlug: string, chapterSlug: string,
   const latest = latestChapterResponses(chapterResponses);
   const answeredIds = new Set(latest.map((response) => response.blockId));
   const predictGate = predictBlocks.length > 0;
+  const moreThanHalfComplete =
+    startedEnrollment.status === "COMPLETED" ||
+    startedEnrollment.percentComplete > 50 ||
+    (flatChapters.length > 0 && startedEnrollment.chaptersCompleted * 2 > flatChapters.length);
   const promptCourseRating =
     !forDownload &&
-    startedEnrollment.chaptersCompleted >= 1 &&
+    moreThanHalfComplete &&
     !chapterComplete &&
     !existingRating &&
     !startedEnrollment.ratingDismissedAt;
diff --git a/server/src/services/courses/ratings.ts b/server/src/services/courses/ratings.ts
index 4735ba61b..3bf755078 100644
--- a/server/src/services/courses/ratings.ts
+++ b/server/src/services/courses/ratings.ts
@@ -1,10 +1,11 @@
 import { prisma } from "../../db/prisma.js";
 import { ForbiddenError, NotFoundError } from "../../utils/errors.js";
 import type { SessionUser } from "../../types/auth.js";
+import { releaseForEnrollment } from "./releases.js";
 
-// Course ratings are the macro signal: one per learner, available once at least
-// one chapter is complete, editable, and prompted once when moving to the next
-// chapter. Lesson-level problems go through the help/report channel instead.
+// Course ratings are the macro signal: one per learner, unlocked once the learner
+// has finished more than half of the course, editable, and prompted once when
+// moving to the next chapter. Lesson-level problems go through help/report instead.
 
 export type CourseRatingView = {
   rating: number;
@@ -33,7 +34,7 @@ export type CourseReviewsView = {
 async function publishedCourse(courseSlug: string) {
   const course = await prisma.course.findUnique({
     where: { slug: courseSlug },
-    select: { id: true, status: true },
+    select: { id: true, status: true, familySlug: true },
   });
   if (!course || course.status !== "PUBLISHED") throw new NotFoundError("Course not found");
   return course;
@@ -56,10 +57,32 @@ export async function saveCourseRating(
   const course = await publishedCourse(courseSlug);
   const enrollment = await prisma.enrollment.findUnique({
     where: { courseId_userId: { courseId: course.id, userId: user.id } },
-    select: { status: true, chaptersCompleted: true },
+    select: {
+      status: true,
+      chaptersCompleted: true,
+      percentComplete: true,
+      releaseId: true,
+      variantSlug: true,
+    },
   });
-  if (!enrollment || (enrollment.chaptersCompleted < 1 && enrollment.status !== "COMPLETED")) {
-    throw new ForbiddenError("Complete at least one chapter before rating this course.");
+  if (!enrollment) {
+    throw new ForbiddenError("Complete more than half of the course before rating it.");
+  }
+  if (enrollment.status !== "COMPLETED" && enrollment.percentComplete <= 50) {
+    const selected = await releaseForEnrollment(course.id, enrollment, course.familySlug);
+    const totalChapters = selected
+      ? selected.modules.reduce((sum, mod) => sum + mod.chapters.length, 0)
+      : await prisma.chapter.count({
+          where: {
+            courseId: course.id,
+            archivedAt: null,
+            publishedAt: { not: null },
+            module: { archivedAt: null },
+          },
+        });
+    if (totalChapters <= 0 || enrollment.chaptersCompleted * 2 <= totalChapters) {
+      throw new ForbiddenError("Complete more than half of the course before rating it.");
+    }
   }
 
   const review = input.review?.trim() || null;
diff --git a/server/src/shared/api/reader.ts b/server/src/shared/api/reader.ts
index 4e7fdb7cb..73d8b6cbf 100644
--- a/server/src/shared/api/reader.ts
+++ b/server/src/shared/api/reader.ts
@@ -26,7 +26,7 @@ export type ChapterReaderContent = {
   predictGate: boolean;
   predictRevealed: boolean;
   helpThread: HelpThreadView | null;
-  /** True when the learner completed a chapter, moved on, and has neither rated nor dismissed the prompt. */
+  /** True when the learner finished more than half of the course, moved on, and has neither rated nor dismissed the prompt. */
   promptCourseRating?: boolean;
 };
 
diff --git a/server/tests/api/course-ratings.test.ts b/server/tests/api/course-ratings.test.ts
index c4e1391b2..9b79a3353 100644
--- a/server/tests/api/course-ratings.test.ts
+++ b/server/tests/api/course-ratings.test.ts
@@ -6,9 +6,23 @@ import { completeChapter, createCourseFixture } from "../helpers/fixtures.js";
 
 const app = createApp();
 let fx: Awaited<ReturnType<typeof createCourseFixture>>;
+let chapterCSlug = "chapter-c";
 
 beforeAll(async () => {
   fx = await createCourseFixture();
+  const mod = await prisma.module.findFirstOrThrow({ where: { courseId: fx.course.id } });
+  const chC = await prisma.chapter.create({
+    data: {
+      courseId: fx.course.id,
+      moduleId: mod.id,
+      slug: "chapter-c",
+      title: "Chapter C",
+      order: 3,
+      source: "# C",
+      publishedAt: new Date(),
+    },
+  });
+  chapterCSlug = chC.slug;
 });
 afterAll(async () => {
   await prisma.courseRating.deleteMany({ where: { courseId: fx.course.id } });
@@ -18,37 +32,51 @@ afterAll(async () => {
 const learner = () => ({ Authorization: `Bearer ${fx.learnerToken}` });
 
 describe("/api/v1/courses/:courseSlug/rating", () => {
-  it("refuses a rating before any chapter is complete and does not prompt on the first chapter", async () => {
+  it("refuses ratings and does not prompt until the learner has finished more than half of the course", async () => {
     const firstChapter = await request(app)
       .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterA.slug}`)
       .set(learner());
     expect(firstChapter.status).toBe(200);
     expect(firstChapter.body.data.content.promptCourseRating).toBe(false);
 
-    const res = await request(app)
+    // 1 of 3 chapters complete (33% <= 50%): still under half, so do not prompt or accept a rating yet.
+    await completeChapter(fx.enrollment.id, fx.chapterA.id);
+    await prisma.enrollment.update({
+      where: { id: fx.enrollment.id },
+      data: { chaptersCompleted: 1, percentComplete: 33, status: "IN_PROGRESS" },
+    });
+
+    const secondChapter = await request(app)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .set(learner());
+    expect(secondChapter.status).toBe(200);
+    expect(secondChapter.body.data.content.promptCourseRating).toBe(false);
+
+    const earlyRes = await request(app)
       .put(`/api/v1/courses/${fx.course.slug}/rating`)
       .set(learner())
-      .send({ rating: 5, review: "Great course." });
-    expect(res.status).toBe(403);
+      .send({ rating: 5, review: "Great start." });
+    expect(earlyRes.status).toBe(403);
   });
 
-  it("prompts on the next chapter after one chapter is completed and accepts mid-course ratings", async () => {
-    await completeChapter(fx.enrollment.id, fx.chapterA.id);
+  it("prompts on the next chapter once more than half of the course is finished and accepts ratings", async () => {
+    // 2 of 3 chapters complete (67% > 50%): more than half of the course is finished.
+    await completeChapter(fx.enrollment.id, fx.chapterB.id);
     await prisma.enrollment.update({
       where: { id: fx.enrollment.id },
-      data: { chaptersCompleted: 1, status: "IN_PROGRESS" },
+      data: { chaptersCompleted: 2, percentComplete: 67, status: "IN_PROGRESS" },
     });
 
     // Does not prompt on the completed chapter itself (when ending the chapter).
     const completedChapter = await request(app)
-      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterA.slug}`)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
       .set(learner());
     expect(completedChapter.status).toBe(200);
     expect(completedChapter.body.data.content.promptCourseRating).toBe(false);
 
     // Prompts once the learner moves on to the next chapter.
     const nextChapter = await request(app)
-      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${chapterCSlug}`)
       .set(learner());
     expect(nextChapter.status).toBe(200);
     expect(nextChapter.body.data.content.promptCourseRating).toBe(true);
@@ -68,7 +96,7 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
 
     // Once rated, the chapter reader no longer prompts.
     const nextAfterRating = await request(app)
-      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${chapterCSlug}`)
       .set(learner());
     expect(nextAfterRating.body.data.content.promptCourseRating).toBe(false);
 
@@ -101,7 +129,7 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
     await prisma.courseRating.deleteMany({ where: { courseId: fx.course.id, userId: fx.learner.id } });
 
     const beforeDismiss = await request(app)
-      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${chapterCSlug}`)
       .set(learner());
     expect(beforeDismiss.body.data.content.promptCourseRating).toBe(true);
 
@@ -116,7 +144,7 @@ describe("/api/v1/courses/:courseSlug/rating", () => {
     expect(overview.body.data.ratingDismissed).toBe(true);
 
     const afterDismiss = await request(app)
-      .get(`/api/v1/courses/${fx.course.slug}/chapters/${fx.chapterB.slug}`)
+      .get(`/api/v1/courses/${fx.course.slug}/chapters/${chapterCSlug}`)
       .set(learner());
     expect(afterDismiss.body.data.content.promptCourseRating).toBe(false);
   });