diff --git a/app/badges/page.tsx b/app/badges/page.tsx
new file mode 100644
index 0000000..c81c145
--- /dev/null
+++ b/app/badges/page.tsx
@@ -0,0 +1,18 @@
+import { getAuthUser } from "@/lib/auth";
+import AdminBadgesPage from "@/components/badges/AdminBadge";
+import UserBadgesPage from "@/components/badges/UserBadge";
+
+export default async function BadgesPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  const isAdmin = user?.organisation?.role === "admin";
+
+  if (isAdmin) {
+    return null;
+  }
+
+  return <UserBadgesPage />;
+}
diff --git a/app/organisation/page.tsx b/app/organisation/page.tsx
index b172f42..3eca01c 100644
--- a/app/organisation/page.tsx
+++ b/app/organisation/page.tsx
@@ -7,11 +7,12 @@ import ManageChannels from "@/components/organisation/settings/ManageChannels";
 import ManageLevels from "@/components/organisation/settings/ManageLevels";
 import OnboardingConfig from "@/components/organisation/settings/OnboardingConfig";
 import OrgSettings from "@/components/organisation/settings/OrgSettings";
+import AdminBadgesPage from "@/components/badges/AdminBadge";
 
 export default function OrganisationsPage() {
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<
-    "skills" | "channels" | "levels" | "onboarding" | "orgSettings"
+    "skills" | "channels" | "levels" | "onboarding" | "orgSettings" | "badges"
   >("skills");
 
   if (!user || !user.hasCompletedOnboarding) {
@@ -79,6 +80,16 @@ export default function OrganisationsPage() {
             >
               Onboarding Form
             </button>
+            <button
+              onClick={() => setActiveTab("badges")}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === "badges"
+                  ? "border-purple-500 text-purple-600"
+                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              }`}
+            >
+              Manage Badges
+            </button>
             <button
               onClick={() => setActiveTab("orgSettings")}
               className={`py-2 px-1 border-b-2 font-medium text-sm ${
@@ -99,6 +110,7 @@ export default function OrganisationsPage() {
       {activeTab === "levels" && <ManageLevels />}
       {activeTab === "onboarding" && <OnboardingConfig />}
       {activeTab === "orgSettings" && <OrgSettings />}
+      {activeTab === "badges" && <AdminBadgesPage />}
     </div>
   );
 }
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 8bccf94..289ef9d 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -11,6 +11,7 @@ import {
   MapIcon,
   ClockIcon,
   CogIcon,
+  StarIcon,
 } from "@heroicons/react/24/outline";
 import LogoutButton from "./auth/logout/LogoutButton";
 import { useAuth } from "@/context/AuthContext";
@@ -23,6 +24,7 @@ const menuSections = [
       { label: "My Roadmap", href: "/roadmap", icon: MapIcon },
       { label: "Courses", href: "/courses", icon: BookOpenIcon },
       { label: "Reports", href: "/reports", icon: ChartBarIcon },
+      { label: "Badges", href: "/badges", icon: StarIcon },
     ],
   },
   {
diff --git a/components/badges/AdminBadge.tsx b/components/badges/AdminBadge.tsx
new file mode 100644
index 0000000..c577711
--- /dev/null
+++ b/components/badges/AdminBadge.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
+interface FrequentBadge {
+  id: number;
+  name: string;
+  description: string;
+  numCoursesCompleted: number;
+}
+
+interface CourseBadge {
+  id: number;
+  name: string;
+  description: string;
+  courseId: number;
+}
+
+interface CreatedBadges {
+  coursesBadges: FrequentBadge[];
+  courseBadges: CourseBadge[];
+}
+
+interface Course {
+  id: number;
+  name: string;
+}
+
+export default function AdminBadgesPage() {
+  const [badges, setBadges] = useState<CreatedBadges>({
+    coursesBadges: [],
+    courseBadges: [],
+  });
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [freqName, setFreqName] = useState("");
+  const [freqDesc, setFreqDesc] = useState("");
+  const [freqCount, setFreqCount] = useState<number | "">("");
+
+  const [specName, setSpecName] = useState("");
+  const [specDesc, setSpecDesc] = useState("");
+  const [specCourseId, setSpecCourseId] = useState<number | "">("");
+
+  useEffect(() => {
+    fetchBadges();
+    fetchCourses();
+  }, []);
+
+  const fetchBadges = () => {
+    setLoading(true);
+    fetch("/api/badges/created-badges", { credentials: "include" })
+      .then((r) => {
+        if (!r.ok) throw new Error("Failed to load badges");
+        return r.json() as Promise<CreatedBadges>;
+      })
+      .then((data) => {
+        setBadges(data);
+        setError(null);
+      })
+      .catch((err) => {
+        console.error(err);
+        setError(err.message);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const fetchCourses = async () => {
+    try {
+      const res = await fetch("/api/courses", { credentials: "include" });
+      if (!res.ok) throw new Error("Failed to load courses");
+      const data = (await res.json()) as { courses: Course[] };
+      setCourses(data.courses);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const addFrequentBadge = async () => {
+    if (!freqName.trim() || freqCount === "" || freqCount < 0) {
+      alert("Name and non-negative course count are required");
+      return;
+    }
+    const res = await fetch("/api/badges/create-frequent", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: freqName.trim(),
+        description: freqDesc.trim(),
+        numCoursesCompleted: +freqCount,
+      }),
+    });
+    if (res.ok) {
+      setFreqName("");
+      setFreqDesc("");
+      setFreqCount("");
+      fetchBadges();
+    } else {
+      alert("Could not create badge");
+    }
+  };
+
+  const addCourseBadge = async () => {
+    if (!specName.trim() || specCourseId === "") {
+      alert("Name and course selection are required");
+      return;
+    }
+    const res = await fetch("/api/badges/create-specific-course", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: specName.trim(),
+        description: specDesc.trim(),
+        courseId: specCourseId,
+      }),
+    });
+    if (res.ok) {
+      setSpecName("");
+      setSpecDesc("");
+      setSpecCourseId("");
+      fetchBadges();
+    } else {
+      alert("Could not create badge");
+    }
+  };
+
+  const deleteFrequentBadge = async (id: number) => {
+    if (!confirm("Delete this badge?")) return;
+    const res = await fetch("/api/badges/frequent-badge", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ badgeId: id }),
+    });
+    if (res.ok) fetchBadges();
+    else alert("Failed to delete");
+  };
+
+  const deleteCourseBadge = async (id: number) => {
+    if (!confirm("Delete this badge?")) return;
+    const res = await fetch("/api/badges/course-specific-badge", {
+      method: "DELETE",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ badgeId: id }),
+    });
+    if (res.ok) fetchBadges();
+    else alert("Failed to delete");
+  };
+
+  return (
+    <div className="p-6 space-y-8">
+      <h1 className="text-3xl font-bold text-purple-600">Manage Badges</h1>
+      {error && (
+        <div className="text-red-600 bg-red-100 p-3 rounded">{error}</div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="p-4 border rounded-lg bg-white shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">
+            Add “Complete X Courses” Badge
+          </h2>
+          <input
+            type="text"
+            placeholder="Badge Name"
+            value={freqName}
+            onChange={(e) => setFreqName(e.target.value)}
+            className="w-full p-2 border rounded mb-2"
+          />
+          <textarea
+            placeholder="Description (optional)"
+            value={freqDesc}
+            onChange={(e) => setFreqDesc(e.target.value)}
+            className="w-full p-2 border rounded mb-2"
+            rows={2}
+          />
+          <input
+            type="number"
+            min={0}
+            placeholder="Number of courses"
+            value={freqCount}
+            onChange={(e) =>
+              setFreqCount(e.target.value === "" ? "" : +e.target.value)
+            }
+            className="w-full p-2 border rounded mb-4"
+          />
+          <button
+            onClick={addFrequentBadge}
+            className="px-4 py-2 bg-green-600 text-white rounded"
+          >
+            Create Badge
+          </button>
+        </div>
+
+        <div className="p-4 border rounded-lg bg-white shadow-sm">
+          <h2 className="text-xl font-semibold mb-2">
+            Add “Course-Specific” Badge
+          </h2>
+          <input
+            type="text"
+            placeholder="Badge Name"
+            value={specName}
+            onChange={(e) => setSpecName(e.target.value)}
+            className="w-full p-2 border rounded mb-2"
+          />
+          <textarea
+            placeholder="Description (optional)"
+            value={specDesc}
+            onChange={(e) => setSpecDesc(e.target.value)}
+            className="w-full p-2 border rounded mb-2"
+            rows={2}
+          />
+          <select
+            value={specCourseId}
+            onChange={(e) => setSpecCourseId(Number(e.target.value) || "")}
+            className="w-full p-2 border rounded mb-4"
+          >
+            <option value="">Select a course…</option>
+            {courses.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={addCourseBadge}
+            className="px-4 py-2 bg-green-600 text-white rounded"
+          >
+            Create Badge
+          </button>
+        </div>
+      </div>
+
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">Existing Badges</h2>
+
+        <h3 className="text-lg font-medium mb-2">Complete X Courses</h3>
+        {loading ? (
+          <p>Loading…</p>
+        ) : badges.coursesBadges.length === 0 ? (
+          <p className="text-gray-500">No frequent badges created.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {badges.coursesBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-3 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <div className="flex justify-between items-start">
+                  <span className="font-semibold">{b.name}</span>
+                  <button
+                    onClick={() => deleteFrequentBadge(b.id)}
+                    className="text-red-600"
+                  >
+                    ×
+                  </button>
+                </div>
+                <small className="italic text-sm">
+                  when you complete {b.numCoursesCompleted} courses
+                </small>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <h3 className="text-lg font-medium mt-6 mb-2">Course-Specific</h3>
+        {loading ? (
+          <p>Loading…</p>
+        ) : badges.courseBadges.length === 0 ? (
+          <p className="text-gray-500">No course-specific badges created.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {badges.courseBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-3 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <div className="flex justify-between items-start">
+                  <span className="font-semibold">{b.name}</span>
+                  <button
+                    onClick={() => deleteCourseBadge(b.id)}
+                    className="text-red-600"
+                  >
+                    ×
+                  </button>
+                </div>
+                <small className="italic text-sm">
+                  on completion of course #
+                  <Link
+                    href={`/courses/${b.courseId}`}
+                    className="text-blue-600 underline hover:text-blue-800"
+                  >
+                    {b.name}
+                  </Link>
+                </small>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/components/badges/UserBadge.tsx b/components/badges/UserBadge.tsx
new file mode 100644
index 0000000..f0a5435
--- /dev/null
+++ b/components/badges/UserBadge.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awardedAt: string;
+}
+
+interface BadgeDefinition {
+  id: number;
+  name: string;
+  description: string;
+}
+
+export default function UserBadgesPage() {
+  const [earned, setEarned] = useState<UserBadge[]>([]);
+  const [allBadges, setAllBadges] = useState<BadgeDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res1 = await fetch("/api/badges/user-badges", {
+          credentials: "include",
+        });
+        if (!res1.ok) throw new Error("Failed to load your badges");
+        const { badges } = (await res1.json()) as { badges: UserBadge[] };
+        setEarned(badges);
+
+        const res2 = await fetch("/api/badges/created-badges", {
+          credentials: "include",
+        });
+        if (!res2.ok) throw new Error("Failed to load badge catalog");
+        const data = (await res2.json()) as {
+          coursesBadges: BadgeDefinition[];
+          courseBadges: BadgeDefinition[];
+        };
+        setAllBadges([...data.coursesBadges, ...data.courseBadges]);
+      } catch (err: any) {
+        console.error(err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center">
+        <p>Loading your badges…</p>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="p-8">
+        <p className="text-red-600">Error: {error}</p>
+      </div>
+    );
+  }
+
+  const earnedIds = new Set(earned.map((b) => b.id));
+  const toEarn = allBadges.filter((b) => !earnedIds.has(b.id));
+
+  return (
+    <div className="p-8">
+      <h1 className="text-3xl font-bold mb-6 text-purple-600">Your Badges</h1>
+
+      {earned.length > 0 && (
+        <section className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Badges Earned</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {earned.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-purple-50 flex flex-col"
+              >
+                <h2 className="font-semibold text-lg">{b.name}</h2>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Awarded on{" "}
+                  {new Date(b.awardedAt).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {toEarn.length > 0 && (
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">Badges To Earn</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            {toEarn.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-gray-100 flex flex-col opacity-60"
+              >
+                <h2 className="font-semibold text-lg">{b.name}</h2>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">Locked</p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {earned.length === 0 && toEarn.length === 0 && (
+        <p className="text-gray-500">No badges available yet.</p>
+      )}
+    </div>
+  );
+}
diff --git a/components/dashboard/AdminDashboard.tsx b/components/dashboard/AdminDashboard.tsx
index 23b9c2a..c7076b9 100644
--- a/components/dashboard/AdminDashboard.tsx
+++ b/components/dashboard/AdminDashboard.tsx
@@ -26,6 +26,7 @@ interface Enrollment {
 
 interface AdminDashboardData {
   welcome: string;
+  organisationName: string;
   employees: Employee[];
   enrollments: Enrollment[];
 }
@@ -83,6 +84,7 @@ export default function AdminDashboard() {
   return (
     <div className="max-w-5xl mx-auto p-6 space-y-10">
       <h1 className="text-3xl font-bold text-gray-800 mb-6">{data.welcome}</h1>
+      <div className="text-lg text-gray-600 mb-4">{data.organisationName}</div>
 
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
         <DashboardStat label="Employees" value={totalEmployees} />
diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
index dbdb95c..4618527 100644
--- a/components/dashboard/UserDashboard.tsx
+++ b/components/dashboard/UserDashboard.tsx
@@ -13,6 +13,7 @@ interface Module {
 }
 interface DashboardData {
   welcome: string;
+  organisationName: string;
   currentCourse: Course | null;
   currentModule: Module | null;
   nextToLearn: Module[];
@@ -60,6 +61,7 @@ export default function UserDashboard() {
 
   const {
     welcome,
+    organisationName,
     currentCourse,
     currentModule,
     nextToLearn,
@@ -77,6 +79,9 @@ export default function UserDashboard() {
               <div className="text-3xl md:text-4xl font-bold text-purple-700 mb-2 tracking-tight">
                 {welcome}
               </div>
+              <div className="text-lg text-gray-600 mb-4">
+                {data.organisationName}
+              </div>
             </div>
 
             <div>
@@ -175,7 +180,6 @@ export default function UserDashboard() {
                 <div className="text-xs text-gray-500 mb-1">
                   {currentCourse?.name}
                 </div>
-                {/* Progress bar */}
                 <div className="w-full bg-purple-100 h-2 rounded-full">
                   <div
                     className="bg-purple-600 h-2 rounded-full transition-all duration-500"
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
index 2b3892c..7cff15a 100644
--- a/components/organisation/courses/CourseCard.tsx
+++ b/components/organisation/courses/CourseCard.tsx
@@ -81,6 +81,11 @@ export default function CourseCard({
   };
 
   const markNotCompleted = async () => {
+    const result = confirm(
+      "Are you sure you want to mark this course as not completed? You will lose corresponding badges."
+    );
+
+    if (!result) return;
     try {
       const response = await fetch("/api/courses/uncomplete-course", {
         method: "POST",
@@ -110,6 +115,29 @@ export default function CourseCard({
         body: JSON.stringify({ courseId: course.id }),
       });
       if (!res.ok) throw new Error("Failed to complete course");
+
+      const data = await res.json();
+      const { specificBadges = [], earnedBadges = [] } = data;
+
+      const msgs: string[] = [];
+      if (specificBadges.length) {
+        msgs.push(
+          `Course badge earned: ${specificBadges
+            .map((b: any) => b.name)
+            .join(", ")}`
+        );
+      }
+      if (earnedBadges.length) {
+        msgs.push(
+          `Milestone badge earned: ${earnedBadges
+            .map((b: any) => b.name)
+            .join(", ")}`
+        );
+      }
+      if (msgs.length) {
+        alert(msgs.join("\n"));
+      }
+
       window.location.reload();
     } catch (err) {
       console.error(err);
diff --git a/components/reports/AdminBasicReport.tsx b/components/reports/AdminBasicReport.tsx
index 85715c1..1d577b3 100644
--- a/components/reports/AdminBasicReport.tsx
+++ b/components/reports/AdminBasicReport.tsx
@@ -53,6 +53,13 @@ interface TagPerf {
   pct: number;
 }
 
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awarded_at: string;
+}
+
 interface EmployeeProgress {
   id: number;
   firstname: string;
@@ -63,6 +70,16 @@ interface EmployeeProgress {
   quizResults: QuizResult[];
   strengths: TagPerf[];
   weaknesses: TagPerf[];
+  badges: UserBadge[];
+}
+
+interface OrganisationBadges {
+  id: number;
+  name: string;
+  description: string;
+  course_id: number | null;
+  milestone: number | null;
+  earned_count: number;
 }
 
 interface OverviewData {
@@ -71,6 +88,7 @@ interface OverviewData {
     total: number;
     list: EmployeeProgress[];
   };
+  badges: OrganisationBadges[];
 }
 
 export default function AdminBasicReport() {
@@ -152,6 +170,33 @@ export default function AdminBasicReport() {
         </table>
       </section>
 
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">All Badges</h2>
+        {data.badges.length ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {data.badges.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-yellow-50 flex flex-col"
+              >
+                <h3 className="font-medium">{b.name}</h3>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Earned by {b.earned_count}{" "}
+                  {b.earned_count === 1 ? "employee" : "employees"}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No badges defined yet.</p>
+        )}
+      </section>
+
       <section className="space-y-6">
         <h2 className="text-2xl font-semibold">
           Employees Progress ({data.employees.total})
@@ -200,12 +245,10 @@ export default function AdminBasicReport() {
                   <p className="ml-4">None yet</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Modules Completed</h3>
                 <p className="ml-4">{emp.modulesDone}</p>
               </div>
-
               <div>
                 <h3 className="font-semibold">Quiz Results</h3>
                 {emp.quizResults.length ? (
@@ -235,7 +278,6 @@ export default function AdminBasicReport() {
                   <p className="ml-4">No quizzes taken</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Strengths</h3>
                 {emp.strengths.length ? (
@@ -250,7 +292,6 @@ export default function AdminBasicReport() {
                   <p className="ml-4">None identified</p>
                 )}
               </div>
-
               <div>
                 <h3 className="font-semibold">Areas to Improve</h3>
                 {emp.weaknesses.length ? (
@@ -264,6 +305,33 @@ export default function AdminBasicReport() {
                 ) : (
                   <p className="ml-4">None identified</p>
                 )}
+              </div>{" "}
+              <div>
+                <h3 className="font-semibold mb-4">Badges Earned</h3>
+                {emp.badges.length ? (
+                  <div className="ml-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {emp.badges.map((b) => (
+                      <div
+                        key={b.id}
+                        className="p-2 border rounded bg-yellow-50"
+                      >
+                        <p className="font-medium">{b.name}</p>
+                        <p className="text-xs text-gray-500">
+                          {new Date(b.awarded_at).toLocaleDateString(
+                            undefined,
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            }
+                          )}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="ml-4">None yet</p>
+                )}
               </div>
             </div>
           </details>
diff --git a/components/reports/BasicReport.tsx b/components/reports/BasicReport.tsx
index 4a01521..9b80336 100644
--- a/components/reports/BasicReport.tsx
+++ b/components/reports/BasicReport.tsx
@@ -39,12 +39,20 @@ interface TagPerf {
   pct: number;
 }
 
+interface UserBadge {
+  id: number;
+  name: string;
+  description: string;
+  awarded_at: string;
+}
+
 interface ProgressData {
   coursesDone: CourseDone[];
   modulesDone: number;
   quizResults: QuizResult[];
   strengths: TagPerf[];
   weaknesses: TagPerf[];
+  userBadges: UserBadge[];
 }
 
 export default function BasicReport() {
@@ -172,6 +180,36 @@ export default function BasicReport() {
           <p>No weaknesses detected yet.</p>
         )}
       </section>
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">Badges Earned</h2>
+        {data.userBadges.length ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {data.userBadges.map((b) => (
+              <div
+                key={b.id}
+                className="p-4 border rounded-lg bg-yellow-50 flex flex-col"
+              >
+                <h3 className="font-medium">{b.name}</h3>
+                {b.description && (
+                  <p className="text-gray-700 mt-1 line-clamp-2">
+                    {b.description}
+                  </p>
+                )}
+                <p className="text-sm text-gray-500 mt-auto">
+                  Awarded{" "}
+                  {new Date(b.awarded_at).toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>No badges earned yet.</p>
+        )}
+      </section>
     </div>
   );
 }