diff --git a/app/globals.css b/app/globals.css
index 12cbbb5..12ed325 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -18,7 +18,6 @@
 .analysis-layout{display:grid;grid-template-columns:195px minmax(0,1fr);min-height:100vh}.analysis-sidebar{position:sticky;top:0;height:100vh;padding:22px 12px;border-right:1px solid rgba(203,213,225,.78);background:rgba(255,255,255,.58);backdrop-filter:blur(18px);display:flex;flex-direction:column}.analysis-brand{display:flex;align-items:center;gap:10px;padding:0 10px 24px;font-weight:700;font-size:16px}.analysis-brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#251b62,#5544ba);box-shadow:0 8px 20px rgba(67,52,157,.22)}.analysis-side-nav{display:grid;gap:6px}.analysis-side-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:#667085;font-size:13px;font-weight:500;text-decoration:none;transition:.18s}.analysis-side-nav a:hover{background:rgba(79,70,229,.06);color:#2d246f}.analysis-side-nav a.is-active{color:#312783;background:linear-gradient(90deg,rgba(79,70,229,.12),rgba(79,70,229,.04));font-weight:650}.analysis-side-footer{margin-top:auto;border-top:1px solid rgba(203,213,225,.72);padding:16px 10px 0;color:#7b8798;font-size:11px}
 
 .analysis-page{min-width:0;padding:18px 28px 28px}.analysis-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px}.analysis-title-row{display:flex;align-items:center;gap:10px}.analysis-title-row h1{font-size:24px;line-height:1.1;letter-spacing:-.035em;font-weight:750}.analysis-sync{font-size:11px;color:#7b8798;display:flex;align-items:center;gap:6px}.analysis-top-actions{display:flex;gap:10px}.analysis-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:10px 16px;background:linear-gradient(135deg,#241d58,#45369d);color:#fff;font-size:13px;font-weight:600;box-shadow:0 8px 18px rgba(49,39,120,.14)}.analysis-primary:disabled{opacity:.55}.analysis-raw-button{display:inline-flex;align-items:center;gap:.55rem;border:1px solid #dfe5ec;border-radius:.8rem;padding:.55rem .9rem;background:rgba(255,255,255,.8);color:#344054;font-size:.8rem;font-weight:600;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:.15s ease}.analysis-raw-button:hover{background:#fff;transform:translateY(-1px);text-decoration:none}
-/* Attendance currently renders Raw Data in the top action slot; visually place that same link in the shared sidebar. */
 .analysis-top-actions>.analysis-raw-button{position:fixed;left:24px;top:174px;width:147px;min-height:42px;padding:11px 12px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:#667085;font-size:13px;font-weight:500;z-index:20}.analysis-top-actions>.analysis-raw-button:hover{transform:none;background:rgba(79,70,229,.06);color:#2d246f}.analysis-top-actions>.analysis-raw-button span:first-child:before{content:"↓";display:inline-grid;place-items:center;width:18px;margin-right:9px;color:#667085;font-size:16px}.analysis-top-actions>.analysis-raw-button span:last-child{display:none}
 
 .subject-analysis-nav{margin-bottom:16px}.subject-analysis-nav__rail{display:flex;gap:4px;padding:5px 10px;border:1px solid rgba(203,213,225,.78);border-radius:14px;background:rgba(255,255,255,.5);box-shadow:0 8px 22px rgba(15,23,42,.035);overflow-x:auto}.subject-analysis-nav__item{display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:9px;color:#667085;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}.subject-analysis-nav__item:hover{background:#fff;color:#2d246f}.subject-analysis-nav__item.is-active{color:#3d2ea0;background:rgba(79,70,229,.08);border-bottom-color:#5141bd}
@@ -30,9 +29,13 @@
 .analysis-panel{border:1px solid rgba(203,213,225,.72);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(248,249,251,.74));box-shadow:0 12px 34px rgba(15,23,42,.045)}.analysis-settings{padding:20px;margin-bottom:18px}.analysis-settings h3{font-size:14px;font-weight:700}.analysis-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;margin-top:14px}.analysis-settings label{display:block;margin-bottom:7px;font-size:11px;font-weight:600;color:#667085}.analysis-settings input,.analysis-settings select{height:40px;background:rgba(255,255,255,.76)}.analysis-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid rgba(147,197,253,.28);border-radius:9px;background:rgba(239,246,255,.52);color:#52637a;font-size:11px}
 .analysis-content-grid{display:grid;grid-template-columns:minmax(520px,1.08fr) minmax(400px,.92fr);gap:16px}.analysis-table-panel{padding:18px}.analysis-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.analysis-panel-head h3{font-size:14px;font-weight:700}.analysis-count{padding:4px 8px;border-radius:999px;background:#f1f3f7;color:#667085;font-size:10px}.analysis-table-wrap{max-height:500px;overflow:auto;scrollbar-gutter:stable}.analysis-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.analysis-table th{padding:10px 8px;text-align:left;color:#7b8798;font-size:10px;font-weight:700;border-bottom:1px solid #e9edf2}.analysis-table td{padding:10px 8px;border-bottom:1px solid #edf0f4;color:#566174}.analysis-table tr:hover td{background:rgba(79,70,229,.025)}.student-cell{display:flex;align-items:center;gap:9px;color:#172033!important;font-weight:500}.student-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#edf1ff;color:#4f46a8;font-size:9px;font-weight:700}.change-up{color:#15803d!important;font-weight:700}.change-down{color:#dc2626!important;font-weight:700}.trend-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px}.trend-up{background:#ecfdf3;color:#15803d}.trend-down{background:#fef2f2;color:#dc2626}.trend-stable{background:#f2f4f7;color:#667085}.analysis-right-stack{display:grid;gap:16px}.analysis-chart-panel{padding:18px}.analysis-chart-panel p{margin-top:4px;color:#98a2b3;font-size:10px}.analysis-chart{height:220px;margin-top:10px}.analysis-chart .recharts-cartesian-grid line{stroke:#e3e7ed}.analysis-chart .recharts-text{fill:#667085}.analysis-insight{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:16px}.analysis-insight-copy h4{font-size:13px;font-weight:700}.analysis-insight-copy p{margin-top:4px;font-size:11px;color:#667085}.analysis-insight-actions{display:flex;gap:10px;margin-left:auto}.analysis-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);color:#344054;border-radius:9px;padding:9px 14px;font-size:12px;font-weight:600}
 
-/* Academic dashboard */
 .academic-content-grid{align-items:start}.academic-table-wrap{height:620px;max-height:620px}.academic-stats-panel{padding:16px;display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.academic-highest{padding:12px 14px;border:1px solid #edf0f4;border-radius:12px;background:rgba(255,255,255,.58);display:flex;flex-direction:column;gap:5px}.academic-highest span,.academic-tier-card span{font-size:11px;color:#667085}.academic-highest strong{font-size:26px;line-height:1;color:#172033}.academic-highest p{margin:0;color:#475467;font-size:12px;line-height:1.35}.academic-tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.academic-tier-card{min-height:70px;padding:10px 12px;border:1px solid;border-radius:12px;background:rgba(255,255,255,.52);display:flex;flex-direction:column;justify-content:space-between}.academic-tier-card strong{font-size:21px;line-height:1}.academic-rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.academic-rank-panel{padding:16px;min-width:0}.academic-rank-panel h3{font-size:14px;font-weight:700;margin-bottom:10px}.academic-rank-row{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf0f4}.academic-rank-row:last-child{border-bottom:0}.academic-rank-row>span{font-size:11px;color:#98a2b3}.academic-rank-row p{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#475467}.academic-rank-row strong{justify-self:end;font-size:13px;color:#172033}.academic-rank-row strong.is-negative{color:#dc2626}.academic-table-panel .analysis-table td:first-child{min-width:210px}.academic-table-panel .analysis-table th:not(:first-child),.academic-table-panel .analysis-table td:not(:first-child){text-align:center}.academic-table-panel .student-cell{white-space:nowrap}.academic-content-grid .analysis-chart{height:190px}
 
 .recharts-tooltip-wrapper .recharts-default-tooltip{border-radius:12px!important;border:1px solid #e2e8f0!important;box-shadow:0 12px 28px rgba(15,23,42,.1)!important;background:rgba(255,255,255,.97)!important}.analysis-stat-card,.analysis-ranked-list,.analysis-grade-badge{border-color:#e2e8f0}
-@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}}
-@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}}
+
+/* Overall > At Risk */
+.at-risk-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"filter filter" "table side";gap:12px;align-items:start}.at-risk-filter{grid-area:filter}.at-risk-table{grid-area:table;min-width:0}.at-risk-side-stack{grid-area:side;display:grid;gap:12px;min-width:0}.at-risk-side-stack>section:first-child{min-height:250px}.at-risk-filter-inner{padding:12px}.at-risk-filter-title{min-width:0;padding:0 2px}.at-risk-filter-title h3{font-size:14px;font-weight:700;color:#172033}.at-risk-filter-title p{margin-top:3px;font-size:10px;color:#667085}.at-risk-filter-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-top:10px}.at-risk-filter label{display:block;min-width:0}.at-risk-filter label>span{display:block;margin:0 0 5px 2px;font-size:10px;font-weight:600;color:#667085}.at-risk-filter select,.at-risk-filter input{height:38px}.at-risk-apply{height:38px;padding:0 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#251b62,#4637a3);color:#fff;font-size:12px;font-weight:600;box-shadow:0 7px 16px rgba(49,39,120,.14);white-space:nowrap}.at-risk-apply:hover{filter:brightness(1.03)}.at-risk-table table th,.at-risk-table table td{white-space:nowrap}.at-risk-table tbody tr:hover{background:rgba(79,70,229,.025)}.at-risk-side-stack>section{min-width:0}.at-risk-side-stack .recharts-pie-sector{cursor:pointer}.at-risk-side-stack .recharts-text{font-size:9px}.at-risk-side-stack>section:first-child{min-height:280px}.at-risk-table .bg-emerald-50.text-emerald-700,.at-risk-side-stack .bg-emerald-50.text-emerald-700{background:#eff6ff!important;color:#2563eb!important}
+
+@media(max-width:1100px){.analysis-hero{grid-template-columns:1fr 1fr}.analysis-hero-copy{grid-column:1/-1}.analysis-content-grid{grid-template-columns:1fr}.analysis-settings-grid{grid-template-columns:1fr 1fr}.analysis-sidebar{position:fixed;transform:translateX(-100%)}.analysis-layout{grid-template-columns:1fr}.analysis-page{padding:18px}.academic-table-wrap{height:500px;max-height:500px}.analysis-top-actions>.analysis-raw-button{position:static;width:auto;min-height:0;border:1px solid #dfe5ec;background:rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.04)}.analysis-top-actions>.analysis-raw-button span:first-child:before{display:none}.at-risk-layout{grid-template-columns:minmax(0,1fr) 280px}.at-risk-filter-controls{grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px}.at-risk-filter-title p{white-space:nowrap}}
+@media(max-width:800px){.at-risk-layout{grid-template-columns:1fr;grid-template-areas:"filter" "table" "side"}.at-risk-filter-controls{grid-template-columns:1fr 1fr}.at-risk-apply{width:100%}.at-risk-side-stack{grid-template-columns:1fr 1fr}.at-risk-side-stack>section:first-child{min-height:0}}
+@media(max-width:700px){.analysis-topbar{align-items:flex-start;flex-direction:column}.analysis-title-row h1{font-size:21px}.analysis-top-actions{width:100%}.analysis-settings-grid{grid-template-columns:1fr}.analysis-hero{grid-template-columns:1fr}.analysis-content-grid{grid-template-columns:1fr}.analysis-page{padding:14px}.analysis-insight{align-items:flex-start;flex-direction:column}.analysis-insight-actions{margin-left:0;flex-wrap:wrap}.subject-analysis-nav__item{padding:9px 12px}.analysis-chart{height:200px}.academic-stats-panel,.academic-rank-grid{grid-template-columns:1fr}.academic-tier-grid{grid-template-columns:1fr 1fr}.academic-table-wrap{height:440px;max-height:440px}.at-risk-filter-controls{grid-template-columns:1fr}.at-risk-filter-title{grid-column:auto}.at-risk-side-stack{grid-template-columns:1fr}.at-risk-filter-title p{white-space:normal}}
diff --git a/components/AnalysisNav.tsx b/components/AnalysisNav.tsx
index e345a09..dc2679d 100644
--- a/components/AnalysisNav.tsx
+++ b/components/AnalysisNav.tsx
@@ -1,51 +1,33 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { BarChart3, FileText, GraduationCap, LayoutDashboard } from "lucide-react";
 
-type Props = {
-  sectionId: string;
-};
+type Props = { sectionId: string };
+
+const items = [
+  { label: "Attendance", icon: BarChart3, path: "attendance" },
+  { label: "Academic", icon: GraduationCap, path: "academic" },
+  { label: "Overall", icon: LayoutDashboard, path: "overall" },
+  { label: "Student Report", icon: FileText, path: "students" },
+];
 
 export default function AnalysisNav({ sectionId }: Props) {
   const router = useRouter();
 
-  const items = [
-    {
-      label: "Attendance",
-      href: `/section-analysis/${sectionId}/attendance`,
-    },
-    {
-      label: "Academic",
-      href: `/section-analysis/${sectionId}/academic`,
-    },
-    {
-      label: "Overall",
-      href: `/section-analysis/${sectionId}/overall`,
-    },
-    {
-      label: "Student Report",
-      href: `/section-analysis/${sectionId}/students`,
-    },
-  ];
-
   return (
-    <nav className="flex gap-1 border-b border-gray-200 mb-8 overflow-x-auto">
-      {items.map((item) => {
-        const active = router.asPath === item.href;
-
-        return (
-          <Link
-            key={item.href}
-            href={item.href}
-            className={`px-4 py-3 text-sm whitespace-nowrap border-b-2 transition-colors ${
-              active
-                ? "border-gray-900 text-gray-900 font-medium"
-                : "border-transparent text-gray-500 hover:text-gray-900"
-            }`}
-          >
-            {item.label}
-          </Link>
-        );
-      })}
+    <nav className="subject-analysis-nav" aria-label="Class analysis sections">
+      <div className="subject-analysis-nav__rail">
+        {items.map(({ label, icon: Icon, path }) => {
+          const href = `/section-analysis/${sectionId}/${path}`;
+          const active = router.pathname.endsWith(`/${path}`);
+          return (
+            <Link key={path} href={href} className={`subject-analysis-nav__item ${active ? "is-active" : ""}`}>
+              <Icon size={17} strokeWidth={1.8} />
+              <span>{label}</span>
+            </Link>
+          );
+        })}
+      </div>
     </nav>
   );
-}
\ No newline at end of file
+}
diff --git a/components/AnalysisWidgets.tsx b/components/AnalysisWidgets.tsx
index f343979..c62ae87 100644
--- a/components/AnalysisWidgets.tsx
+++ b/components/AnalysisWidgets.tsx
@@ -44,7 +44,16 @@ export function RawDataButton({ sheetId }: { sheetId: string | null }) {
       return;
     }
 
-    if (!window.location.pathname.startsWith("/subject-analysis/")) return;
+    // Class Analysis uses its own sidebar markup, so attach Raw Data to the
+    // same navigation by locating its Class Analysis link.
+    const classAnalysisLink = document.querySelector<HTMLElement>('nav a[href="/class-analysis"]');
+    const classAnalysisNav = classAnalysisLink?.closest("nav") as HTMLElement | null;
+    if (classAnalysisNav) {
+      setSideNav(classAnalysisNav);
+      return;
+    }
+
+    if (!window.location.pathname.startsWith("/subject-analysis/") && !window.location.pathname.startsWith("/section-analysis/")) return;
 
     const root = document.querySelector<HTMLElement>("#\\_\\_next > div.min-h-screen.max-w-\\[1900px\\]")
       || document.querySelector<HTMLElement>("div.min-h-screen.max-w-\\[1900px\\]")
@@ -78,7 +87,7 @@ export function RawDataButton({ sheetId }: { sheetId: string | null }) {
       </div>
       <nav className="analysis-side-nav analysis-standalone-nav">
         <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
+        <a href="/class-analysis"><BookOpen size={18} />Class Analysis</a>
         <a className="is-active" href={window.location.pathname}><GraduationCap size={18} />Subject Analysis</a>
         {rawLink}
       </nav>
diff --git a/lib/access.ts b/lib/access.ts
index 12eedaa..51324e3 100644
--- a/lib/access.ts
+++ b/lib/access.ts
@@ -36,20 +36,18 @@ export async function assertTeacherCanViewClass(userId: string, role: string, cl
   return !!teaches;
 }
 
-// Section access: the class proctor, or anyone teaching a subject within
-// this specific section.
+// Section-based analysis pages are used by Class Analysis, whose purpose is
+// to show the complete class/section view across all subjects. A teacher who
+// has access to the class (as proctor or by teaching any subject in it) must
+// therefore be allowed to open the section analysis pages as well.
 export async function assertTeacherCanViewSection(userId: string, role: string, sectionId: string) {
   if (role === "ADMIN") return true;
-  const section = await prisma.section.findUnique({ where: { id: sectionId } });
+  const section = await prisma.section.findUnique({ where: { id: sectionId }, select: { classId: true } });
   if (!section) return false;
+  return assertTeacherCanViewClass(userId, role, section.classId);
+}
 
-  const proctorMatch = await prisma.class.findFirst({
-    where: { id: section.classId, proctorId: userId },
-  });
-  if (proctorMatch) return true;
-
-  const teaches = await prisma.assignment.findFirst({
-    where: { teacherId: userId, subject: { sectionId } },
-  });
-  return !!teaches;
+// Kept as an explicit alias for class-level overall analysis callers.
+export async function assertTeacherCanViewOverall(userId: string, role: string, sectionId: string) {
+  return assertTeacherCanViewSection(userId, role, sectionId);
 }
diff --git a/package.json b/package.json
index eab309f..c1f2e97 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "start": "next start",
     "prisma:migrate": "prisma migrate dev",
     "prisma:studio": "prisma studio",
-    "seed": "ts-node prisma/seed.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts && ts-node prisma/seed-ece2-sem7-students.ts"
   },
   "dependencies": {
     "@prisma/client": "^5.18.0",
@@ -35,6 +35,6 @@
     "wait-on": "^9.1.0"
   },
   "prisma": {
-    "seed": "ts-node prisma/seed.ts"
+    "seed": "ts-node prisma/seed.ts && ts-node prisma/fix-geetanjali-assignments.ts && ts-node prisma/seed-ece2-sem7-students.ts"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5e55630..2e8a26c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,7 @@ import GlobalButtonLoading from "../components/GlobalButtonLoading";
 import "../styles/globals.css";
 import "../app/globals.css";
 import "../styles/overall-analysis-fixes.css";
+import "../styles/academic-table-fix.css";
 
 export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (
diff --git a/pages/api/analysis/section/[sectionId].ts b/pages/api/analysis/section/[sectionId].ts
index 57f680f..c8c9191 100644
--- a/pages/api/analysis/section/[sectionId].ts
+++ b/pages/api/analysis/section/[sectionId].ts
@@ -1,119 +1,87 @@
-import {
-  NextApiRequest,
-  NextApiResponse,
-} from "next";
-
+import { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "../../../../lib/prisma";
+import { requireSession, assertTeacherCanViewSection } from "../../../../lib/access";
+import { fetchClassRawData } from "../../../../lib/googleSheetsClass";
+import { computeSectionAnalysis } from "../../../../lib/analysisClass";
 
-import {
-  requireSession,
-  assertTeacherCanViewSection,
-} from "../../../../lib/access";
-
-import {
-  fetchClassRawData,
-} from "../../../../lib/googleSheetsClass";
-
-import {
-  computeSectionAnalysis,
-} from "../../../../lib/analysisClass";
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const session = await requireSession(
-    req,
-    res
-  );
-
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const session = await requireSession(req, res);
   if (!session) return;
 
-  const sectionId =
-    req.query.sectionId as string;
-
-  const userId =
-    (session.user as any).id;
+  const requestedId = req.query.sectionId as string;
+  const userId = (session.user as any).id;
+  const role = (session.user as any).role;
+
+  // The analysis UI is section-based, but older dashboard/class-analysis links
+  // may still provide a class id. Resolve a direct section id first. If the id
+  // is a class id, resolve to a section the current teacher is actually allowed
+  // to view instead of blindly selecting the first section in that class.
+  let resolvedSection = await prisma.section.findUnique({
+    where: { id: requestedId },
+  });
+
+  if (!resolvedSection) {
+    if (role === "ADMIN") {
+      resolvedSection = await prisma.section.findFirst({
+        where: { classId: requestedId },
+      });
+    } else {
+      resolvedSection = await prisma.section.findFirst({
+        where: {
+          classId: requestedId,
+          OR: [
+            { class: { proctorId: userId } },
+            {
+              subjects: {
+                some: {
+                  assignments: {
+                    some: { teacherId: userId },
+                  },
+                },
+              },
+            },
+          ],
+        },
+      });
+    }
+  }
 
-  const role =
-    (session.user as any).role;
+  if (!resolvedSection) {
+    return res.status(404).json({ error: "Section not found or not assigned to you" });
+  }
 
-  const allowed =
-    await assertTeacherCanViewSection(
-      userId,
-      role,
-      sectionId
-    );
+  const sectionId = resolvedSection.id;
 
+  // Keep the existing authorization check for direct section URLs as the final
+  // guard. This does not weaken access; it only fixes legacy class-id routing.
+  const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) {
-    return res.status(403).json({
-      error:
-        "Not authorized for this section",
-    });
+    return res.status(403).json({ error: "Not authorized for this section" });
   }
 
-  const forceSync =
-    req.query.sync === "1";
+  const forceSync = req.query.sync === "1";
+  const previousMonth = typeof req.query.previousMonth === "string" ? req.query.previousMonth : undefined;
+  const currentMonth = typeof req.query.currentMonth === "string" ? req.query.currentMonth : undefined;
 
-  const previousMonth =
-    typeof req.query.previousMonth ===
-    "string"
-      ? req.query.previousMonth
-      : undefined;
-
-  const currentMonth =
-    typeof req.query.currentMonth ===
-    "string"
-      ? req.query.currentMonth
-      : undefined;
-
-  // Accept both names so the frontend and API
-  // cannot get out of sync again.
   const criteriaValue =
     typeof req.query.criteria === "string"
       ? req.query.criteria
-      : typeof req.query.trendCriteria ===
-        "string"
-      ? req.query.trendCriteria
-      : undefined;
-
-  const criteria =
-    criteriaValue !== undefined
-      ? Number(criteriaValue)
-      : undefined;
-
-  const hasCustomTrendSettings =
-    previousMonth !== undefined ||
-    currentMonth !== undefined ||
-    criteria !== undefined;
-
-  const link =
-    await prisma.sheetLink.findUnique({
-      where: { sectionId },
-    });
+      : typeof req.query.trendCriteria === "string"
+        ? req.query.trendCriteria
+        : undefined;
+  const criteria = criteriaValue !== undefined ? Number(criteriaValue) : undefined;
+  const hasCustomTrendSettings = previousMonth !== undefined || currentMonth !== undefined || criteria !== undefined;
 
+  const link = await prisma.sheetLink.findUnique({ where: { sectionId } });
   if (!link) {
-    return res.status(404).json({
-      error:
-        "No combined Google Sheet linked to this section yet",
-    });
+    return res.status(404).json({ error: "No combined Google Sheet linked to this section yet" });
   }
 
-  // Use cache only for the ordinary overview request.
-  // Custom month comparisons always calculate from
-  // the latest Google Sheet data.
-  if (
-    !forceSync &&
-    !hasCustomTrendSettings
-  ) {
-    const latest =
-      await prisma.analysisSnapshot.findFirst({
-        where: { sectionId },
-        orderBy: {
-          computedAt: "desc",
-        },
-      });
-
+  if (!forceSync && !hasCustomTrendSettings) {
+    const latest = await prisma.analysisSnapshot.findFirst({
+      where: { sectionId },
+      orderBy: { computedAt: "desc" },
+    });
     if (latest) {
       return res.status(200).json({
         cached: true,
@@ -125,52 +93,24 @@ export default async function handler(
   }
 
   try {
-    const raw =
-      await fetchClassRawData(
-        link.sheetId
-      );
-
-    const analysis =
-      computeSectionAnalysis(raw, {
-        previousMonth,
-        currentMonth,
-        criteria,
-      });
-
-    const snapshot =
-      await prisma.analysisSnapshot.create({
-        data: {
-          sectionId,
-          data: analysis as any,
-        },
-      });
-
-    await prisma.sheetLink.update({
-      where: { sectionId },
-      data: {
-        lastSyncAt: new Date(),
-      },
+    const raw = await fetchClassRawData(link.sheetId);
+    const analysis = computeSectionAnalysis(raw, { previousMonth, currentMonth, criteria });
+    const snapshot = await prisma.analysisSnapshot.create({
+      data: { sectionId, data: analysis as any },
     });
+    await prisma.sheetLink.update({ where: { sectionId }, data: { lastSyncAt: new Date() } });
 
     return res.status(200).json({
       cached: false,
-      computedAt:
-        snapshot.computedAt,
+      computedAt: snapshot.computedAt,
       sheetId: link.sheetId,
       data: analysis,
     });
   } catch (err: any) {
-    console.error(
-      "Section analysis sync failed:",
-      err
-    );
-
+    console.error("Section analysis sync failed:", err);
     return res.status(502).json({
-      error:
-        "Failed to sync from Google Sheets.",
-      detail:
-        err?.message ||
-        "Unknown Google Sheets error.",
+      error: "Failed to sync from Google Sheets.",
+      detail: err?.message || "Unknown Google Sheets error.",
     });
   }
-}
\ No newline at end of file
+}
diff --git a/pages/api/analysis/section/[sectionId]/overall.ts b/pages/api/analysis/section/[sectionId]/overall.ts
index 60a363a..abc18a6 100644
--- a/pages/api/analysis/section/[sectionId]/overall.ts
+++ b/pages/api/analysis/section/[sectionId]/overall.ts
@@ -8,64 +8,93 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const session = await requireSession(req, res);
   if (!session) return;
 
-  const sectionId = req.query.sectionId as string;
+  const requestedId = req.query.sectionId as string;
   const userId = (session.user as any).id;
   const role = (session.user as any).role;
 
+  let resolvedSection = await prisma.section.findUnique({ where: { id: requestedId } });
+  if (!resolvedSection) {
+    if (role === "ADMIN") {
+      resolvedSection = await prisma.section.findFirst({ where: { classId: requestedId }, orderBy: { name: "asc" } });
+    } else {
+      resolvedSection = await prisma.section.findFirst({
+        where: {
+          classId: requestedId,
+          OR: [
+            { class: { proctorId: userId } },
+            { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
+          ],
+        },
+        orderBy: { name: "asc" },
+      });
+    }
+  }
+
+  if (!resolvedSection) return res.status(404).json({ error: "Section not found or not assigned to you" });
+
+  const sectionId = resolvedSection.id;
   const allowed = await assertTeacherCanViewSection(userId, role, sectionId);
   if (!allowed) return res.status(403).json({ error: "Not authorized for this section" });
 
-  const forceSync = req.query.sync === "1";
-
-  const subjects = await prisma.subject.findMany({ where: { sectionId } });
-  if (subjects.length === 0) {
-    return res.status(404).json({ error: "No subjects exist for this section yet" });
-  }
+  const subjects = await prisma.subject.findMany({ where: { sectionId, type: "THEORY" }, orderBy: { code: "asc" } });
+  if (subjects.length === 0) return res.status(404).json({ error: "No theory subjects exist for this section yet" });
 
   const link = await prisma.sheetLink.findUnique({ where: { sectionId } });
   if (!link) return res.status(404).json({ error: "No combined Google Sheet linked to this section yet" });
 
-  if (!forceSync) {
+  const theoryIds = new Set(subjects.map((s) => s.id));
+  const theoryCodes = new Set(subjects.map((s) => s.code));
+
+  if (req.query.sync !== "1") {
     const latest = await prisma.analysisSnapshot.findFirst({
       where: { sectionId, data: { path: ["kind"], equals: "overall" } as any },
       orderBy: { computedAt: "desc" },
     });
     if (latest) {
-      return res
-        .status(200)
-        .json({ cached: true, computedAt: latest.computedAt, sheetId: link.sheetId, data: latest.data });
+      const cached = latest.data as any;
+      const cachedSubjects = Array.isArray(cached.subjects)
+        ? cached.subjects.filter((s: any) => theoryIds.has(s.id) || theoryCodes.has(s.code))
+        : subjects.map((s) => ({ id: s.id, name: s.name, code: s.code }));
+      const data = {
+        ...cached,
+        subjects: cachedSubjects,
+        students: Array.isArray(cached.students)
+          ? cached.students.map((student: any) => ({
+              ...student,
+              subjects: Array.isArray(student.subjects)
+                ? student.subjects.filter((s: any) => theoryIds.has(s.subjectId) || theoryCodes.has(s.code))
+                : [],
+            }))
+          : [],
+      };
+      return res.status(200).json({ cached: true, computedAt: latest.computedAt, sheetId: link.sheetId, data });
     }
   }
 
   try {
     const raw = await fetchClassRawData(link.sheetId);
-    const subjectAnalyses = computeAllSubjectAnalyses(
-      raw,
-      subjects.map((s) => s.code)
-    );
-
-    // Combine per student across every subject.
-    const studentMap = new Map<
-      string,
-      {
-        enrollmentNo: string;
+    const subjectAnalyses = computeAllSubjectAnalyses(raw, subjects.map((s) => s.code));
+
+    const studentMap = new Map<string, {
+      enrollmentNo: string;
+      name: string;
+      email: string;
+      subjects: {
+        subjectId: string;
+        code: string;
         name: string;
-        email: string;
-        subjects: {
-          subjectId: string;
-          code: string;
-          name: string;
-          attendance: number;
-          midsem1: number;
-          midsem2: number;
-          combined: number;
-          basicInternal: number;
-          moderatedInternal: number;
-          basicMax: number;
-          grade: string;
-        }[];
-      }
-    >();
+        attendance: number;
+        midsem1: number;
+        midsem2: number;
+        combined: number;
+        assignment: { submitted: number; total: number; mark: number };
+        presentation: { raw: number; mark: number };
+        basicInternal: number;
+        moderatedInternal: number;
+        basicMax: number;
+        grade: string;
+      }[];
+    }>();
 
     subjects.forEach((subject) => {
       const analysis = subjectAnalyses[subject.code];
@@ -73,19 +102,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       analysis.students.forEach((s) => {
         if (!studentMap.has(s.enrollmentNo)) {
-          studentMap.set(s.enrollmentNo, {
-            enrollmentNo: s.enrollmentNo,
-            name: s.name,
-            email: s.email,
-            subjects: [],
-          });
+          studentMap.set(s.enrollmentNo, { enrollmentNo: s.enrollmentNo, name: s.name, email: s.email, subjects: [] });
         }
 
-        // Subject's own "full marks" for its internal score: assignment
-        // total + presentation (out of 10) + midsem (out of 30) — used to
-        // turn each subject's basic marks into a percentage so subjects
-        // with different assignment totals can be averaged fairly.
-        const basicMax = (s.assignment.total || 0) + 10 + 30;
+        const assignmentMark = s.assignment.total > 0 ? round1((s.assignment.submitted / s.assignment.total) * 5) : 0;
+        const presentationMark = round1((s.presentation / 10) * 5);
+        const basicMax = 40;
 
         studentMap.get(s.enrollmentNo)!.subjects.push({
           subjectId: subject.id,
@@ -95,22 +117,22 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           midsem1: s.midsem.first,
           midsem2: s.midsem.second,
           combined: s.midsem.combined,
+          assignment: { submitted: s.assignment.submitted, total: s.assignment.total, mark: assignmentMark },
+          presentation: { raw: s.presentation, mark: presentationMark },
           basicInternal: s.internalMarks.basic,
           moderatedInternal: s.internalMarks.moderated,
           basicMax,
-          grade: s.midsem.grade,
+          grade: gradeFor(s.internalMarks.basic, basicMax),
         });
       });
     });
 
     const students = Array.from(studentMap.values()).map((student) => {
-      const percentages = student.subjects.map((sub) =>
-        sub.basicMax > 0 ? (sub.basicInternal / sub.basicMax) * 100 : 0
-      );
-      const overallPct = percentages.length
-        ? round1(percentages.reduce((a, b) => a + b, 0) / percentages.length)
-        : 0;
-      const attendancePercentages = student.subjects.map((sub) => sub.attendance);
+      const sixSubjects = student.subjects.slice(0, 6);
+      const total = sixSubjects.reduce((sum, sub) => sum + sub.basicInternal, 0);
+      const average = sixSubjects.length ? total / sixSubjects.length : 0;
+      const overallPct = round1((average / 40) * 100);
+      const attendancePercentages = sixSubjects.map((sub) => sub.attendance);
       const overallAttendance = attendancePercentages.length
         ? round1(attendancePercentages.reduce((a, b) => a + b, 0) / attendancePercentages.length)
         : 0;
@@ -119,7 +141,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         ...student,
         overallPct,
         overallAttendance,
-        overallGrade: gradeFor(overallPct, 100),
+        overallGrade: gradeFor(average, 40),
       };
     });
 
@@ -127,18 +149,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       kind: "overall" as const,
       subjects: subjects.map((s) => ({ id: s.id, name: s.name, code: s.code })),
       students,
-      classAverageOverallPct: students.length
-        ? round1(students.reduce((a, s) => a + s.overallPct, 0) / students.length)
-        : 0,
+      classAverageOverallPct: students.length ? round1(students.reduce((a, s) => a + s.overallPct, 0) / students.length) : 0,
     };
 
-    const snapshot = await prisma.analysisSnapshot.create({
-      data: { sectionId, data: data as any },
-    });
-
-    return res
-      .status(200)
-      .json({ cached: false, computedAt: snapshot.computedAt, sheetId: link.sheetId, data });
+    const snapshot = await prisma.analysisSnapshot.create({ data: { sectionId, data: data as any } });
+    return res.status(200).json({ cached: false, computedAt: snapshot.computedAt, sheetId: link.sheetId, data });
   } catch (err: any) {
     console.error(err);
     return res.status(502).json({
diff --git a/pages/class-analysis/[classId].tsx b/pages/class-analysis/[classId].tsx
index dccc470..603e92e 100644
--- a/pages/class-analysis/[classId].tsx
+++ b/pages/class-analysis/[classId].tsx
@@ -1,87 +1,70 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
+import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
 
-interface ClassAnalysisResponse {
-  className: string;
-  totalStudents: number;
-  subjects: {
-    subjectId: string;
-    subjectName: string;
-    section: string;
-    classAverage: number | null;
-    passRate: number | null;
-    computedAt: string | null;
-  }[];
-}
+// Class Analysis is a class-level entry point into the existing section-based
+// analysis UI. A class can contain multiple sections, so never blindly pick
+// the first section: resolve the section the signed-in user is actually
+// allowed to view.
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const classId = typeof ctx.params?.classId === "string" ? ctx.params.classId : "";
+
+  const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  if (!session?.user) {
+    return { redirect: { destination: "/login", permanent: false } };
+  }
+
+  if (!classId) {
+    return { notFound: true };
+  }
+
+  const userId = (session.user as any).id as string;
+  const role = (session.user as any).role as string;
+
+  if (role === "ADMIN") {
+    const section = await prisma.section.findFirst({
+      where: { classId },
+      orderBy: { name: "asc" },
+      select: { id: true },
+    });
+
+    if (!section) return { notFound: true };
 
-export default function ClassAnalysisPage() {
-  const router = useRouter();
-  const { classId } = router.query;
-  const [data, setData] = useState<ClassAnalysisResponse | null>(null);
-  const [error, setError] = useState("");
+    return {
+      redirect: {
+        destination: `/section-analysis/${section.id}/attendance`,
+        permanent: false,
+      },
+    };
+  }
 
-  useEffect(() => {
-    if (!classId) return;
-    fetch(`/api/analysis/class/${classId}`)
-      .then(async (res) => {
-        const json = await res.json();
-        if (!res.ok) throw new Error(json.error);
-        setData(json);
-      })
-      .catch((e) => setError(e.message));
-  }, [classId]);
+  // Prefer a section the teacher teaches. This is important when a class has
+  // multiple sections: the section-analysis API enforces section-level access.
+  const assignedSection = await prisma.section.findFirst({
+    where: {
+      classId,
+      OR: [
+        { class: { proctorId: userId } },
+        { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
+      ],
+    },
+    orderBy: { name: "asc" },
+    select: { id: true },
+  });
 
-  return (
-    <div className="min-h-screen max-w-5xl mx-auto px-6 py-10">
-      <h1 className="text-lg font-semibold text-gray-900 mb-1">Class Analysis</h1>
-      {data && <p className="text-sm text-gray-500 mb-6">{data.className} · {data.totalStudents} students</p>}
+  if (!assignedSection) {
+    return { notFound: true };
+  }
 
-      {error && (
-        <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">
-          {error}
-        </div>
-      )}
+  return {
+    redirect: {
+      destination: `/section-analysis/${assignedSection.id}/attendance`,
+      permanent: false,
+    },
+  };
+};
 
-      {data && (
-        <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="text-left text-gray-400 border-b border-gray-100">
-                <th className="py-3 px-4">Subject</th>
-                <th className="py-3 px-4">Section</th>
-                <th className="py-3 px-4">Class Average</th>
-                <th className="py-3 px-4">Pass Rate</th>
-                <th className="py-3 px-4">Last Synced</th>
-                <th className="py-3 px-4"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.subjects.map((s) => (
-                <tr key={s.subjectId} className="border-b border-gray-50">
-                  <td className="py-3 px-4 text-gray-900">{s.subjectName}</td>
-                  <td className="py-3 px-4 text-gray-500">{s.section}</td>
-                  <td className="py-3 px-4">
-                    {s.classAverage !== null ? `${s.classAverage}%` : "—"}
-                  </td>
-                  <td className="py-3 px-4">{s.passRate !== null ? `${s.passRate}%` : "—"}</td>
-                  <td className="py-3 px-4 text-gray-400">
-                    {s.computedAt ? new Date(s.computedAt).toLocaleDateString() : "Never"}
-                  </td>
-                  <td className="py-3 px-4">
-                    <Link
-                      href={`/subject-analysis/${s.subjectId}`}
-                      className="text-gray-900 underline"
-                    >
-                      View →
-                    </Link>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
+export default function ClassAnalysisRedirect() {
+  return null;
 }
diff --git a/pages/class-analysis/index.tsx b/pages/class-analysis/index.tsx
new file mode 100644
index 0000000..e808e41
--- /dev/null
+++ b/pages/class-analysis/index.tsx
@@ -0,0 +1,44 @@
+import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, BarChart3, BookOpen, CalendarDays, LayoutDashboard, LogOut, UserRoundPlus } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+type ClassOption = { id: string; label: string };
+type Props = { classes: ClassOption[]; teacherName: string };
+
+function formatClassLabel(department: string, semester: number, classNumber: string) {
+  return `${department}-${classNumber} Sem ${semester}`;
+}
+
+export default function ClassAnalysisIndex({ classes, teacherName }: Props) {
+  const initials = teacherName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "T";
+
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6"><span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials}</span><div className="min-w-0"><p className="truncate text-sm font-semibold">{teacherName}</p><p className="text-xs text-[#7a8295]">Faculty</p></div></div>
+        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><LayoutDashboard size={18} /> Dashboard</Link><Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><UserRoundPlus size={18} /> Attendance Agent</Link><Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><CalendarDays size={18} /> Timetable</Link><Link href="/class-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BarChart3 size={18} /> Class Analysis</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link></nav>
+        <div className="mt-auto px-4 pb-5"><button onClick={() => signOut({ callbackUrl: "/login" })} className="flex w-full items-center gap-3 border-t border-[#eeeeeb] px-3 pt-5 text-sm font-medium text-[#626b80] hover:text-[#17223b]"><LogOut size={18} /> Sign out</button></div>
+      </aside>
+      <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1200px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+        <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
+        <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Class Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class assigned to you to open its analysis.</p></div>
+        <section className="mt-8 min-h-[430px] rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><div className="space-y-3">{classes.map((classOption) => <Link key={classOption.id} href={`/class-analysis/${classOption.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e4e4e8] bg-white px-5 py-4 transition hover:-translate-y-0.5 hover:border-[#cfc7ff] hover:bg-[#fcfbff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#f0edff] text-[#6b55df]"><BookOpen size={21} /></span><span className="min-w-0 flex-1"><span className="block text-[16px] font-bold text-[#17223b]">{classOption.label}</span><span className="mt-1 block text-xs text-[#7a8295]">Open attendance, academic and student analysis</span></span><ArrowRight size={19} className="text-[#747d91] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}{!classes.length && <div className="rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-6 text-sm text-[#747d91]">No classes are assigned to you.</div>}</div></section>
+      </div></div></main>
+    </div>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  if (!session?.user) return { redirect: { destination: "/login", permanent: false } };
+  const userId = (session.user as any).id; const role = (session.user as any).role;
+  const sections = await prisma.section.findMany({ where: role === "ADMIN" ? undefined : { OR: [{ class: { proctorId: userId } }, { subjects: { some: { assignments: { some: { teacherId: userId } } } } }] }, include: { class: { include: { department: true } } } });
+  const classes = new Map<string, ClassOption>();
+  for (const section of sections) classes.set(section.class.id, { id: section.class.id, label: formatClassLabel(section.class.department.name, section.class.semester, section.name) });
+  return { props: { classes: Array.from(classes.values()), teacherName: session.user.name || session.user.email } };
+};
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index e6b4e5f..22718a2 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -4,6 +4,22 @@ import { authOptions } from "../lib/authOptions";
 import { prisma } from "../lib/prisma";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
+import {
+  ArrowRight,
+  BarChart3,
+  Bell,
+  BookOpen,
+  CalendarDays,
+  CheckCircle2,
+  Clock3,
+  Database,
+  FileText,
+  HelpCircle,
+  LayoutDashboard,
+  LogOut,
+  Menu,
+  UserRoundPlus,
+} from "lucide-react";
 
 interface Props {
   teacherName: string;
@@ -11,116 +27,52 @@ interface Props {
   subjects: { id: string; label: string }[];
 }
 
-export default function Dashboard({ teacherName, sections, subjects }: Props) {
-  return (
-    <div className="min-h-screen">
-      <header className="border-b border-gray-100 bg-white">
-        <div className="max-w-[1700px] mx-auto px-8 py-4 flex items-center justify-between">
-          <div>
-            <h1 className="font-semibold text-gray-900">ClassPulse</h1>
-            <p className="text-sm text-gray-500">Welcome, {teacherName}</p>
-          </div>
-          <button
-            onClick={() => signOut({ callbackUrl: "/login" })}
-            className="text-sm text-gray-500 hover:text-gray-900"
-          >
-            Sign out
-          </button>
-        </div>
-      </header>
+const quickActions = [
+  { title: "Attendance Agent", description: "Take attendance for your current class", href: "/attendance-agent", icon: UserRoundPlus, tone: "bg-[#eef1ff] text-[#4b6bff]" },
+  { title: "Timetable", description: "View your full class schedule", href: "/timetable", icon: CalendarDays, tone: "bg-[#eef7ff] text-[#4388d8]" },
+  { title: "Class Analysis", description: "Analyze performance of a class/section", href: "/class-analysis", icon: BarChart3, tone: "bg-[#eaf9f1] text-[#159b62]" },
+  { title: "Subject Analysis", description: "Deep dive into a subject in a section", href: "/subject-analysis", icon: BookOpen, tone: "bg-[#fff5e7] text-[#ee9412]" },
+];
 
-      <main className="max-w-[1700px] mx-auto px-8 py-10">
-        <h2 className="text-lg font-medium text-gray-900 mb-1">What would you like to do today?</h2>
-        <p className="text-sm text-gray-500 mb-8">Choose an option below to view and analyze your data.</p>
+const todaySchedule = [
+  { time: "10:00 AM", end: "11:00 AM", subject: "Data Analysis (DA 338 T)", section: "Section A", room: "Room 104", active: true },
+  { time: "11:15 AM", end: "12:15 PM", subject: "Discrete Structures (CS 203)", section: "Section B", room: "Room 203" },
+  { time: "1:00 PM", end: "2:00 PM", subject: "Computer Networks (CS 302)", section: "Section A", room: "Room 105" },
+  { time: "3:00 PM", end: "4:00 PM", subject: "Data Analysis (DA 338 T)", section: "Section B", room: "Room 104" },
+];
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-1">Class Analysis</h3>
-            <p className="text-sm text-gray-500 mb-4">
-              Combined attendance and exam performance for a whole class/section.
-            </p>
-            <div className="space-y-2">
-              {sections.map((s) => (
-                <Link
-                  key={s.id}
-                  href={`/section-analysis/${s.id}`}
-                  className="block text-sm rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50"
-                >
-                  {s.label}
-                </Link>
-              ))}
-              {sections.length === 0 && (
-                <p className="text-sm text-gray-400">No classes assigned yet.</p>
-              )}
-            </div>
-          </section>
+const recentActivity = [
+  { icon: CheckCircle2, tone: "text-[#159b62] bg-[#eaf9f1]", text: "Attendance recorded for DA 338 T — Section A", time: "10:05 AM" },
+  { icon: FileText, tone: "text-[#6c55e8] bg-[#f0edff]", text: "Midsem marks updated for DA 338 T — Section A", time: "Yesterday, 4:30 PM" },
+  { icon: CheckCircle2, tone: "text-[#159b62] bg-[#eaf9f1]", text: "Attendance recorded for CS 203 — Section B", time: "Aug 28, 12:20 PM" },
+  { icon: BarChart3, tone: "text-[#ee9412] bg-[#fff5e7]", text: "Class analysis viewed for ECE — B.Tech ECE, Sem 7", time: "Aug 28, 11:15 AM" },
+  { icon: CalendarDays, tone: "text-[#4388d8] bg-[#eef7ff]", text: "Timetable updated", time: "Aug 27, 3:45 PM" },
+];
 
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-1">Subject Analysis</h3>
-            <p className="text-sm text-gray-500 mb-4">
-              Detailed attendance, marks, and student reports for one subject.
-            </p>
-            <div className="space-y-2">
-              {subjects.map((s) => (
-                <Link
-                  key={s.id}
-                  href={`/subject-analysis/${s.id}`}
-                  className="block text-sm rounded-lg border border-gray-100 px-3 py-2 hover:bg-gray-50"
-                >
-                  {s.label}
-                </Link>
-              ))}
-              {subjects.length === 0 && (
-                <p className="text-sm text-gray-400">No subjects assigned yet.</p>
-              )}
-            </div>
-          </section>
-        </div>
-      </main>
+export default function Dashboard({ teacherName, sections, subjects }: Props) {
+  const initials = teacherName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <div className="mx-5 mt-7 flex items-center gap-3 border-b border-[#eeeeeb] pb-6"><span className="grid h-10 w-10 place-items-center rounded-full bg-[#eeeaff] text-sm font-bold text-[#4b36a7]">{initials || "T"}</span><div className="min-w-0"><p className="truncate text-sm font-semibold">{teacherName}</p><p className="text-xs text-[#7a8295]">Faculty</p></div></div>
+        <nav className="mt-5 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><LayoutDashboard size={18} /> Dashboard</Link><Link href="/attendance-agent" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><UserRoundPlus size={18} /> Attendance Agent</Link><Link href="/timetable" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><CalendarDays size={18} /> Timetable</Link><Link href="/class-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BarChart3 size={18} /> Class Analysis</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link><Link href="/raw-data" className="flex items-center gap-3 rounded-xl px-3 py-3 transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><Database size={18} /> Raw Data</Link><button type="button" className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition hover:bg-[#f6f4ff] hover:text-[#38258e]"><Bell size={18} /> Notifications</button></nav>
+        <div className="mt-auto px-4 pb-5"><div className="rounded-2xl border border-[#ded8ff] bg-[#faf9ff] p-4"><div className="flex items-start gap-3"><span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-white text-[#5842e8]"><HelpCircle size={18} /></span><div><p className="text-xs font-bold">Need Help?</p><p className="mt-1 text-[11px] leading-5 text-[#7a8295]">Visit our help center or contact support.</p></div></div><button type="button" className="mt-3 w-full rounded-lg border border-[#9d91ff] bg-white px-3 py-2 text-xs font-semibold text-[#5842e8]">Help Center <ArrowRight size={13} className="ml-1 inline" /></button></div><button onClick={() => signOut({ callbackUrl: "/login" })} className="mt-5 flex w-full items-center gap-3 border-t border-[#eeeeeb] px-3 pt-5 text-sm font-medium text-[#626b80] hover:text-[#17223b]"><LogOut size={18} /> Sign out</button></div>
+      </aside>
+      <main className="w-full lg:ml-[220px]"><div className="mx-auto max-w-[1500px] px-5 py-6 sm:px-8 lg:px-10 lg:py-8"><header className="flex items-start justify-between gap-4"><div><div className="flex items-center gap-3 lg:hidden"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white"><BarChart3 size={20} /></span><span className="text-lg font-extrabold">ClassPulse</span></div><h1 className="mt-5 text-[28px] font-extrabold tracking-[-1.2px] sm:text-[32px] lg:mt-0">Welcome back, {teacherName}</h1><p className="mt-1 text-sm text-[#6f7890]">Here&apos;s an overview of your day.</p></div><div className="flex items-center gap-3"><button type="button" className="relative grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] shadow-sm"><Bell size={19} /><span className="absolute -right-1 -top-1 grid h-5 w-5 place-items-center rounded-full bg-[#ef4b4b] text-[10px] font-bold text-white">3</span></button><div className="hidden items-center gap-2 rounded-xl border border-[#e3e3df] bg-white px-4 py-3 text-sm font-medium text-[#3e465b] shadow-sm sm:flex"><CalendarDays size={17} className="text-[#5b4ee6]" />{new Date().toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}</div><button type="button" className="grid h-11 w-11 place-items-center rounded-xl border border-[#e3e3df] bg-white text-[#566078] sm:hidden"><Menu size={19} /></button></div></header>
+        <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-5 shadow-[0_8px_25px_rgba(31,35,49,0.04)] sm:p-6"><div className="mb-5"><h2 className="text-lg font-bold">Quick Actions</h2><p className="mt-1 text-xs text-[#7b8498]">Jump straight into the tools you use most.</p></div><div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">{quickActions.map((action) => { const Icon = action.icon; return <Link key={action.title} href={action.href} className="group flex min-h-[116px] items-center gap-4 rounded-xl border border-[#e6e6e5] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className={`grid h-12 w-12 shrink-0 place-items-center rounded-full ${action.tone}`}><Icon size={23} strokeWidth={2} /></span><span className="min-w-0 flex-1"><span className="block text-sm font-bold text-[#17223b]">{action.title}</span><span className="mt-1 block text-xs leading-5 text-[#747d91]">{action.description}</span></span><ArrowRight size={18} className="shrink-0 text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>; })}</div></section>
+        <section className="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-[1fr_1.18fr]"><div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]"><div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6"><div><h2 className="text-lg font-bold">Today&apos;s Timetable</h2><p className="mt-1 text-xs text-[#7b8498]">Your scheduled classes for today.</p></div><Link href="/timetable" className="text-xs font-semibold text-[#5b4ee6] hover:underline">View full timetable <ArrowRight size={13} className="ml-1 inline" /></Link></div><div className="p-5 sm:px-6">{todaySchedule.map((item, index) => <div key={`${item.time}-${item.subject}`} className="relative flex gap-4 pb-5 last:pb-0"><div className="flex w-[66px] shrink-0 flex-col text-right text-xs font-medium text-[#667088]"><span>{item.time}</span><span className="mt-1 text-[11px] text-[#9aa1af]">{item.end}</span></div><div className="relative flex-1 border-b border-[#eeeeeb] pb-5 pl-5 last:border-0"><span className={`absolute left-0 top-1 h-2.5 w-2.5 -translate-x-1/2 rounded-full ring-4 ring-white ${item.active ? "bg-[#5b4ee6]" : "bg-[#c8c3f5]"}`} />{index < todaySchedule.length - 1 && <span className="absolute left-0 top-3 h-full w-px -translate-x-1/2 bg-[#ddd9fb]" />}<p className="text-sm font-bold">{item.subject}</p><p className="mt-1 text-xs text-[#737d92]">{item.section} <span className="mx-1">•</span> {item.room}</p>{item.active && <span className="mt-2 inline-flex items-center gap-1 rounded-full bg-[#f0edff] px-2 py-1 text-[10px] font-semibold text-[#5b4ee6]"><Clock3 size={11} /> Next class</span>}</div></div>)}</div></div>
+        <div className="rounded-2xl border border-[#e5e4e1] bg-white shadow-[0_8px_25px_rgba(31,35,49,0.04)]"><div className="flex items-center justify-between border-b border-[#eeeeeb] px-5 py-5 sm:px-6"><div><h2 className="text-lg font-bold">Recent Activity</h2><p className="mt-1 text-xs text-[#7b8498]">Your latest activity.</p></div></div><div className="divide-y divide-[#eeeeeb]">{recentActivity.map((item) => { const Icon = item.icon; return <div key={item.text} className="flex items-center gap-4 px-5 py-4 sm:px-6"><span className={`grid h-9 w-9 shrink-0 place-items-center rounded-full ${item.tone}`}><Icon size={17} /></span><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium text-[#31394d]">{item.text}</p><p className="mt-1 text-[11px] text-[#8a92a3]">{item.time}</p></div></div>; })}</div></div></section>
+      </div></main>
     </div>
   );
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const session = await getServerSession(ctx.req, ctx.res, authOptions);
-  if (!session?.user) {
-    return { redirect: { destination: "/login", permanent: false } };
-  }
-
-  const userId = (session.user as any).id;
-  const role = (session.user as any).role;
-
-  // Sections the teacher can view: they proctor the class, or teach a
-  // subject within that section.
-  const sectionsRaw =
-    role === "ADMIN"
-      ? await prisma.section.findMany({ include: { class: { include: { department: true } } } })
-      : await prisma.section.findMany({
-          where: {
-            OR: [
-              { class: { proctorId: userId } },
-              { subjects: { some: { assignments: { some: { teacherId: userId } } } } },
-            ],
-          },
-          include: { class: { include: { department: true } } },
-        });
-
-  const subjectsRaw = await prisma.subject.findMany({
-    where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } },
-    include: { section: { include: { class: true } } },
-  });
-
-  return {
-    props: {
-      teacherName: session.user.name || session.user.email,
-      sections: sectionsRaw.map((s) => ({
-        id: s.id,
-        label: `${s.class.department.name} — ${s.class.program}, Sem ${s.class.semester}, Section ${s.name}`,
-      })),
-      subjects: subjectsRaw.map((s) => ({
-        id: s.id,
-        label: `${s.name} (${s.code}) — Section ${s.section.name}`,
-      })),
-    },
-  };
+  if (!session?.user) return { redirect: { destination: "/login", permanent: false } };
+  const userId = (session.user as any).id; const role = (session.user as any).role;
+  const sections = await prisma.section.findMany({ where: role === "ADMIN" ? undefined : { OR: [{ class: { proctorId: userId } }, { subjects: { some: { assignments: { some: { teacherId: userId } } } } }] }, include: { class: { include: { department: true } } } });
+  const subjects = await prisma.subject.findMany({ where: role === "ADMIN" ? undefined : { assignments: { some: { teacherId: userId } } }, include: { section: { include: { class: true } } } });
+  return { props: { sections: sections.map((s) => ({ id: s.id, label: `${s.class.department.name} — B.Tech ${s.class.department.name}, Sem ${s.class.semester}, Section ${s.name}` })), subjects: subjects.map((s) => ({ id: s.id, label: `${s.code} — ${s.name}` })), teacherName: session.user.name || session.user.email } };
 };
diff --git a/pages/section-analysis/[sectionId]/academic.tsx b/pages/section-analysis/[sectionId]/academic.tsx
index acf4eb9..286a459 100644
--- a/pages/section-analysis/[sectionId]/academic.tsx
+++ b/pages/section-analysis/[sectionId]/academic.tsx
@@ -1,680 +1,116 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  CartesianGrid,
-  PieChart,
-  Pie,
-  Cell,
-} from "recharts";
-
+import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
 import AnalysisNav from "../../../components/AnalysisNav";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 import { SectionAnalysis } from "../../../lib/analysisClass";
-import { RawDataButton, StatCard, GradeBadge, RankedList } from "../../../components/AnalysisWidgets";
 
-type AcademicView = "midsem1" | "midsem2" | "combined" | "summary";
-type ExamKey = "midsem1" | "midsem2" | "combined" | "max";
+type AcademicView = "midsem1" | "midsem2" | "combined";
+type ScoreBasis = "midsem1" | "midsem2" | "combined" | "max";
+type SortOrder = "none" | "highToLow" | "lowToHigh";
+type Tier = "Excellent" | "Good" | "Needs Attention" | "Critical Risk";
 
-const TIER_COLORS: Record<string, string> = {
-  Excellent: "#10b981",
-  Good: "#3b82f6",
-  "Needs Attention": "#f59e0b",
-  "Critical Risk": "#ef4444",
-};
+const TIER_COLORS: Record<Tier, string> = { Excellent: "#2563eb", Good: "#15966a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const round1 = (n: number) => Math.round(n * 10) / 10;
+const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 
-function median(values: number[]): number {
-  if (values.length === 0) return 0;
-  const sorted = [...values].sort((a, b) => a - b);
-  const mid = Math.floor(sorted.length / 2);
-  return sorted.length % 2 !== 0 ? sorted[mid] : round1((sorted[mid - 1] + sorted[mid]) / 2);
-}
+function median(values: number[]) { if (!values.length) return 0; const sorted = [...values].sort((a, b) => a - b); const middle = Math.floor(sorted.length / 2); return sorted.length % 2 ? sorted[middle] : round1((sorted[middle - 1] + sorted[middle]) / 2); }
+function tierFor(marks: number, max: number): Tier { if (max <= 0) return "Critical Risk"; const percentage = (marks / max) * 100; if (percentage >= 80) return "Excellent"; if (percentage >= 60) return "Good"; if (percentage >= 40) return "Needs Attention"; return "Critical Risk"; }
+function gradeFor(marks: number, max: number): Tier { return tierFor(marks, max); }
 
-function round1(n: number) {
-  return Math.round(n * 10) / 10;
-}
-
-// Grades a single exam score against its own max, same thresholds used
-// throughout the app (Excellent/Good/Needs Attention/Critical Risk).
-function gradeFor(marks: number, max: number): string {
-  if (max <= 0) return "Critical Risk";
-  const pct = (marks / max) * 100;
-  if (pct >= 80) return "Excellent";
-  if (pct >= 60) return "Good";
-  if (pct >= 40) return "Needs Attention";
-  return "Critical Risk";
-}
+function Metric({ label, value, detail }: { label: string; value: string | number; detail: string }) { return <div className="rounded-2xl border border-[#e6e5e2] bg-white px-5 py-4 shadow-[0_8px_28px_rgba(31,35,49,0.04)]"><div className="text-[11px] font-semibold text-[#6f7890]">{label}</div><div className="mt-1 text-[25px] font-extrabold tracking-[-1px] text-[#17223b]">{value}</div><div className="mt-1 text-[10px] text-[#98a2b3]">{detail}</div></div>; }
 
 export default function AcademicPage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [view, setView] = useState<AcademicView>("midsem1");
-
+  const [scoreBasis, setScoreBasis] = useState<ScoreBasis>("combined");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("none");
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
+  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
 
-  // Combined view controls
-  const [gradeBasis, setGradeBasis] = useState<ExamKey>("combined");
-  const [sortDir, setSortDir] = useState<"desc" | "asc" | "none">("desc");
-
-  // Summary (filter) view controls
-  const [filterExam, setFilterExam] = useState<"midsem1" | "midsem2" | "both">("both");
-  const [lowerBound, setLowerBound] = useState(0);
-  const [upperBound, setUpperBound] = useState(100);
-
-  async function loadAnalysis() {
+  async function loadAnalysis(sync = false) {
     if (!sectionId || typeof sectionId !== "string") return;
-    setLoading(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/analysis/section/${sectionId}`);
-      const json = await res.json();
-      if (!res.ok) {
-        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load academic analysis");
-        return;
-      }
-      setData(json.data);
-      setComputedAt(json.computedAt);
-      setSheetId(json.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to load academic analysis");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function syncAnalysis() {
-    if (!sectionId || typeof sectionId !== "string") return;
-    setSyncing(true);
-    setError("");
-    try {
-      const res = await fetch(`/api/analysis/section/${sectionId}?sync=1`);
-      const json = await res.json();
-      if (!res.ok) {
-        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to sync analysis");
-        return;
-      }
-      setData(json.data);
-      setComputedAt(json.computedAt);
-      setSheetId(json.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to sync analysis");
-    } finally {
-      setSyncing(false);
-    }
+    sync ? setSyncing(true) : setLoading(true); setError("");
+    try { const res = await fetch(`/api/analysis/section/${sectionId}${sync ? "?sync=1" : ""}`); const json = await res.json(); if (!res.ok) throw new Error(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load academic analysis"); setData(json.data); setComputedAt(json.computedAt || ""); setSheetId(json.sheetId || null); }
+    catch (e: any) { setError(e.message || "Failed to load academic analysis"); }
+    finally { setLoading(false); setSyncing(false); }
   }
 
-  useEffect(() => {
-    loadAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionId]);
-
+  useEffect(() => { loadAnalysis(); }, [sectionId]);
+  useEffect(() => { setSelectedTier(null); setSortOrder("none"); }, [view]);
   const students = data?.students || [];
 
-  // ---------- Single-exam view (MidSem 1 / MidSem 2) ----------
-  function useSingleExamStats(examKey: "midsem1" | "midsem2") {
-    return useMemo(() => {
-      const rows = students
-        .map((s: any) => ({
-          enrollmentNo: s.enrollmentNo,
-          name: s.name,
-          marks: examKey === "midsem1" ? s.examMarks.midsem1 : s.examMarks.midsem2,
-          max: examKey === "midsem1" ? s.examMarks.midsem1Max : s.examMarks.midsem2Max,
-          subjects: examKey === "midsem1" ? s.examMarks.midsem1Subjects : s.examMarks.midsem2Subjects,
-        }))
-        .filter((r: any) => r.marks !== null);
-
-      const marksList = rows.map((r: any) => r.marks as number);
-      const max = rows[0]?.max || 1;
-      const subjectCodes: string[] = rows[0]?.subjects?.map((s: any) => s.code) || [];
-
-      const classAverage = marksList.length ? round1(marksList.reduce((a, b) => a + b, 0) / marksList.length) : 0;
-      const classMedian = median(marksList);
-      const highest = marksList.length ? Math.max(...marksList) : 0;
-      // Pass = at least 40% of the exam's total max marks (consistent with the
-      // 12/30-per-subject rule, scaled up across however many subjects this exam has).
-      const passRate = marksList.length
-        ? Math.round((rows.filter((r: any) => r.marks >= max * 0.4).length / marksList.length) * 100)
-        : 0;
-
-      const tiers = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record<string, number>;
-      rows.forEach((r: any) => {
-        tiers[gradeFor(r.marks, max)]++;
-      });
-
-      const sorted = [...rows].sort((a: any, b: any) => b.marks - a.marks);
-
-      return { rows, max, subjectCodes, classAverage, classMedian, highest, passRate, tiers, sorted };
-    }, [students, examKey]);
-  }
-
-  const midsem1Stats = useSingleExamStats("midsem1");
-  const midsem2Stats = useSingleExamStats("midsem2");
-
-  function renderSingleExamView(examLabel: string, stats: ReturnType<typeof useSingleExamStats>) {
-    const pieData = Object.entries(stats.tiers).map(([name, value]) => ({
-      name,
-      value,
-      color: TIER_COLORS[name],
-    }));
-
-    return (
-      <>
-        <div className="mb-6">
-          <h2 className="text-xl font-semibold text-gray-900">{examLabel}</h2>
-          <p className="text-sm text-gray-500 mt-1">Marks, class stats, and top/at-risk students for {examLabel}.</p>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <section className="bg-white rounded-2xl border border-gray-100 p-6">
-            <h3 className="font-medium text-gray-900 mb-4">Data Sheet</h3>
-            <p className="text-xs text-gray-400 mb-3">Pass mark per subject: 12/30 (40%)</p>
-            <div className="max-h-[650px] overflow-y-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="text-left text-gray-400 border-b border-gray-100">
-                    <th className="py-2 pr-3 sticky left-0 bg-white">Name</th>
-                    {stats.subjectCodes.map((code: string) => (
-                      <th key={code} className="py-2 pr-3 whitespace-nowrap">
-                        {code}
-                      </th>
-                    ))}
-                    <th className="py-2 pr-3 whitespace-nowrap">Total</th>
-                    <th className="py-2">%age</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {stats.rows.map((r: any) => {
-                    const pct = stats.max > 0 ? Math.round((r.marks / stats.max) * 100) : 0;
-                    return (
-                      <tr key={r.enrollmentNo} className="border-b border-gray-50">
-                        <td className="py-2 pr-3 text-gray-900 whitespace-nowrap sticky left-0 bg-white">
-                          {r.name}
-                        </td>
-                        {(r.subjects || []).map((s: any) => (
-                          <td
-                            key={s.code}
-                            className={`py-2 pr-3 ${
-                              s.marks === null ? "text-gray-400" : s.pass ? "text-emerald-600" : "text-red-500"
-                            }`}
-                          >
-                            {s.marks === null ? "—" : s.marks}
-                          </td>
-                        ))}
-                        <td className="py-2 pr-3 font-medium text-gray-900">{r.marks}</td>
-                        <td className="py-2">{pct}%</td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </section>
-
-          <div className="space-y-6">
-            <div className="grid grid-cols-2 gap-4">
-              <StatCard label="Class Average" value={stats.classAverage} />
-              <StatCard label="Class Median" value={stats.classMedian} />
-              <StatCard label="Highest Score" value={stats.highest} />
-              <StatCard label="Pass Rate" value={`${stats.passRate}%`} />
-            </div>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Performance Tier</h3>
-              <div className="grid grid-cols-2 gap-3 mb-4">
-                {Object.entries(stats.tiers).map(([name, count]) => (
-                  <div
-                    key={name}
-                    className="rounded-lg p-3 text-center"
-                    style={{ backgroundColor: `${TIER_COLORS[name]}22` }}
-                  >
-                    <p className="text-xs text-gray-600">{name}</p>
-                    <p className="text-lg font-semibold" style={{ color: TIER_COLORS[name] }}>
-                      {count}
-                    </p>
-                  </div>
-                ))}
-              </div>
-              <ResponsiveContainer width="100%" height={200}>
-                <PieChart>
-                  <Pie data={pieData} dataKey="value" nameKey="name" innerRadius={50} outerRadius={80} paddingAngle={2}>
-                    {pieData.map((entry, i) => (
-                      <Cell key={i} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip />
-                </PieChart>
-              </ResponsiveContainer>
-            </section>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Top 5 Highest Scorers"
-                  positive
-                  items={stats.sorted.slice(0, 5).map((r: any) => ({ name: r.name, marks: r.marks }))}
-                />
-              </section>
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Bottom 5 At-Risk Students"
-                  positive={false}
-                  items={[...stats.sorted]
-                    .reverse()
-                    .slice(0, 5)
-                    .map((r: any) => ({ name: r.name, marks: r.marks }))}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  // ---------- Combined view ----------
-  const combinedRows = useMemo(() => {
-    return students.map((s: any) => {
-      const values: Record<ExamKey, number> = {
-        midsem1: s.examMarks.midsem1 ?? 0,
-        midsem2: s.examMarks.midsem2 ?? 0,
-        combined: s.examMarks.combined,
-        max: s.examMarks.max,
-      };
-      const basisValue = values[gradeBasis];
-      const basisMax = Math.max(s.examMarks.midsem1Max, s.examMarks.midsem2Max) || 1;
-      return {
-        enrollmentNo: s.enrollmentNo,
-        name: s.name,
-        email: s.email,
-        midsem1: s.examMarks.midsem1,
-        midsem2: s.examMarks.midsem2,
-        combined: s.examMarks.combined,
-        max: s.examMarks.max,
-        grade: gradeFor(basisValue, basisMax),
-        sortValue: basisValue,
-      };
-    });
-  }, [students, gradeBasis]);
-
-  const sortedCombinedRows = useMemo(() => {
-    if (sortDir === "none") return combinedRows;
-    const sorted = [...combinedRows].sort((a, b) => a.sortValue - b.sortValue);
-    return sortDir === "desc" ? sorted.reverse() : sorted;
-  }, [combinedRows, sortDir]);
-
-  const combinedGradeCounts = useMemo(() => {
-    const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record<string, number>;
-    combinedRows.forEach((r) => counts[r.grade]++);
-    return counts;
-  }, [combinedRows]);
-
-  const combinedTop5 = useMemo(
-    () => [...combinedRows].sort((a, b) => b.sortValue - a.sortValue).slice(0, 5),
-    [combinedRows]
-  );
-
-  const combinedBottom5 = useMemo(
-    () => [...combinedRows].sort((a, b) => a.sortValue - b.sortValue).slice(0, 5),
-    [combinedRows]
-  );
-
-  // ---------- Summary (filter) view ----------
-  // Per-subject filter: for each student, check every subject's mark (in
-  // whichever exam(s) are selected) against the bounds. One result row per
-  // matching student+subject+exam — a student can appear more than once if
-  // they fall in range on multiple subjects.
-  const filteredSummaryRows = useMemo(() => {
-    const rows: { enrollmentNo: string; name: string; exam: string; subject: string; marks: number }[] = [];
-
-    students.forEach((s: any) => {
-      const examsToCheck: { label: string; subjects: any[] }[] = [];
-      if (filterExam === "midsem1" || filterExam === "both") {
-        examsToCheck.push({ label: "Midsem 1", subjects: s.examMarks.midsem1Subjects || [] });
-      }
-      if (filterExam === "midsem2" || filterExam === "both") {
-        examsToCheck.push({ label: "Midsem 2", subjects: s.examMarks.midsem2Subjects || [] });
-      }
-
-      examsToCheck.forEach((exam) => {
-        exam.subjects.forEach((subj: any) => {
-          if (subj.marks === null) return;
-          if (subj.marks >= lowerBound && subj.marks <= upperBound) {
-            rows.push({
-              enrollmentNo: s.enrollmentNo,
-              name: s.name,
-              exam: exam.label,
-              subject: subj.code,
-              marks: subj.marks,
-            });
-          }
+  const activeStats = useMemo(() => {
+    const rows = students.map((student: any) => {
+      if (view === "combined") {
+        const combinedMarks = student.examMarks?.combined ?? null;
+        // Combined is the average of the two exams, so its maximum is the
+        // exam maximum itself (not the student's higher score).
+        const combinedMax = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0);
+        const midsem1Subjects = student.examMarks?.midsem1Subjects || [];
+        const midsem2Subjects = student.examMarks?.midsem2Subjects || [];
+        const subjectMap = new Map<string, { code: string; marks: number | null; max: number; pass: boolean }>();
+        [...midsem1Subjects, ...midsem2Subjects].forEach((subject: any) => {
+          const existing = subjectMap.get(subject.code);
+          if (!existing) { subjectMap.set(subject.code, { code: subject.code, marks: subject.marks ?? null, max: subject.max || 0, pass: subject.pass !== false }); return; }
+          const values = [existing.marks, subject.marks].filter((value): value is number => value !== null && value !== undefined);
+          const subjectCombined = values.length ? round1(values.reduce((a, b) => a + b, 0) / values.length) : null;
+          subjectMap.set(subject.code, { code: subject.code, marks: subjectCombined, max: Math.max(existing.max || 0, subject.max || 0), pass: subjectCombined === null ? true : subjectCombined >= Math.max(existing.max || 0, subject.max || 0) * 0.4 });
         });
-      });
-    });
-
-    return rows;
-  }, [students, filterExam, lowerBound, upperBound]);
-
-  const summaryStats = useMemo(() => {
-    const combinedValues = students.map((s: any) => s.examMarks.combined);
-    const overallAverage = combinedValues.length
-      ? round1(combinedValues.reduce((a: number, b: number) => a + b, 0) / combinedValues.length)
-      : 0;
-    const highest = combinedValues.length ? Math.max(...combinedValues) : 0;
-    const lowest = combinedValues.length ? Math.min(...combinedValues) : 0;
-    const passCount = combinedValues.filter((v: number) => v > 0).length;
-    const passRate = combinedValues.length ? Math.round((passCount / combinedValues.length) * 100) : 0;
-
-    const midsem1Values = students.map((s: any) => s.examMarks.midsem1 ?? 0);
-    const midsem2Values = students.map((s: any) => s.examMarks.midsem2 ?? 0);
-    const midsem1Avg = midsem1Values.length
-      ? round1(midsem1Values.reduce((a: number, b: number) => a + b, 0) / midsem1Values.length)
-      : 0;
-    const midsem2Avg = midsem2Values.length
-      ? round1(midsem2Values.reduce((a: number, b: number) => a + b, 0) / midsem2Values.length)
-      : 0;
-
-    const changes = students
-      .map((s: any) => ({
-        name: s.name,
-        change: round1((s.examMarks.midsem2 ?? 0) - (s.examMarks.midsem1 ?? 0)),
-      }))
-      .sort((a, b) => b.change - a.change);
-
-    return {
-      overallAverage,
-      highest,
-      lowest,
-      passRate,
-      midsem1Avg,
-      midsem2Avg,
-      increases: changes.slice(0, 5),
-      decreases: [...changes].reverse().slice(0, 5),
-    };
-  }, [students]);
-
-  return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && (
-            <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
-          <button
-            onClick={syncAnalysis}
-            disabled={syncing}
-            className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50"
-          >
-            {syncing ? "Syncing..." : "Sync now"}
-          </button>
-        </div>
-      </div>
-
+        let marks = combinedMarks; let max = combinedMax;
+        if (scoreBasis === "midsem1") { marks = student.examMarks?.midsem1 ?? null; max = student.examMarks?.midsem1Max || 0; }
+        else if (scoreBasis === "midsem2") { marks = student.examMarks?.midsem2 ?? null; max = student.examMarks?.midsem2Max || 0; }
+        else if (scoreBasis === "max") { const midsem1 = student.examMarks?.midsem1; const midsem2 = student.examMarks?.midsem2; const available = [midsem1, midsem2].filter((value: any): value is number => value !== null && value !== undefined); marks = available.length ? Math.max(...available) : null; max = Math.max(student.examMarks?.midsem1Max || 0, student.examMarks?.midsem2Max || 0); }
+        return { enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects: Array.from(subjectMap.values()) };
+      }
+      const exam = view === "midsem1" ? "midsem1" : "midsem2";
+      const marks = student.examMarks?.[exam] ?? null; const max = student.examMarks?.[`${exam}Max`] || 0; const subjects = student.examMarks?.[`${exam}Subjects`] || [];
+      return { enrollmentNo: student.enrollmentNo, name: student.name, marks, max, subjects };
+    }).filter((row: any) => row.marks !== null);
+    const marks = rows.map((row: any) => Number(row.marks)); const max = rows[0]?.max || 0;
+    const counts = { Excellent: 0, Good: 0, "Needs Attention": 0, "Critical Risk": 0 } as Record<Tier, number>;
+    rows.forEach((row: any) => counts[tierFor(Number(row.marks), Number(row.max) || max)]++);
+    const subjectCodes = Array.from(new Set(rows.flatMap((row: any) => (row.subjects || []).map((subject: any) => subject.code))));
+    return { rows, max, subjectCodes, average: marks.length ? round1(marks.reduce((a, b) => a + b, 0) / marks.length) : 0, median: median(marks), highest: marks.length ? Math.max(...marks) : 0, passRate: marks.length ? Math.round(rows.filter((row: any) => Number(row.marks) >= (Number(row.max) || max) * 0.4).length / marks.length * 100) : 0, counts, sorted: [...rows].sort((a: any, b: any) => Number(b.marks) - Number(a.marks)) };
+  }, [students, view, scoreBasis]);
+
+  const filteredRows = selectedTier ? activeStats.rows.filter((row: any) => tierFor(Number(row.marks), Number(row.max) || activeStats.max) === selectedTier) : activeStats.rows;
+  const displayedRows = useMemo(() => { if (sortOrder === "highToLow") return [...filteredRows].sort((a: any, b: any) => Number(b.marks) - Number(a.marks)); if (sortOrder === "lowToHigh") return [...filteredRows].sort((a: any, b: any) => Number(a.marks) - Number(b.marks)); return filteredRows; }, [filteredRows, sortOrder]);
+  const showRank = sortOrder !== "none";
+  const totalStudents = students.length;
+  const activeLabel = view === "midsem1" ? "Midsem 1" : view === "midsem2" ? "Midsem 2" : "Combined";
+  const tierEntries = Object.entries(activeStats.counts) as [Tier, number][];
+  const highestNames = activeStats.rows.filter((row: any) => Number(row.marks) === activeStats.highest).map((row: any) => row.name);
+
+  return <div className="analysis-layout min-h-screen bg-[#fffdf8] text-[#17223b]">
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a className="is-active" href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "#"}><BookOpen size={18} />Class Analysis</a><a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a></nav><RawDataButton sheetId={sheetId} /><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
+    <main className="analysis-page">
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
       {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-      <div className="flex gap-2 mb-8 flex-wrap">
-        {(
-          [
-            { key: "midsem1", label: "Midsem 1" },
-            { key: "midsem2", label: "Midsem 2" },
-            { key: "combined", label: "Combined" },
-            { key: "summary", label: "Summary" },
-          ] as { key: AcademicView; label: string }[]
-        ).map((tab) => (
-          <button
-            key={tab.key}
-            onClick={() => setView(tab.key)}
-            className={`text-sm px-4 py-2 rounded-lg font-medium ${
-              view === tab.key ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading academic analysis...</div>}
-
-      {data && view === "midsem1" && renderSingleExamView("Midsem 1", midsem1Stats)}
-      {data && view === "midsem2" && renderSingleExamView("Midsem 2", midsem2Stats)}
-
-      {data && view === "combined" && (
-        <>
-          <div className="mb-6 flex items-end justify-between flex-wrap gap-4">
-            <div>
-              <h2 className="text-xl font-semibold text-gray-900">Midsem Combined</h2>
-              <p className="text-sm text-gray-500 mt-1">
-                Choose which numbers grade students, then sort to see who's ahead or behind.
-              </p>
-            </div>
-            <div className="flex gap-3">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Grade / Sort By</label>
-                <select
-                  value={gradeBasis}
-                  onChange={(e) => setGradeBasis(e.target.value as ExamKey)}
-                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                >
-                  <option value="midsem1">Midsem 1</option>
-                  <option value="midsem2">Midsem 2</option>
-                  <option value="combined">Combined (average)</option>
-                  <option value="max">Max (better of the two)</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-1">Order</label>
-                <select
-                  value={sortDir}
-                  onChange={(e) => setSortDir(e.target.value as "desc" | "asc" | "none")}
-                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                >
-                  <option value="none">No Sort (Enrollment Order)</option>
-                  <option value="desc">Highest to Lowest</option>
-                  <option value="asc">Lowest to Highest</option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">All Students</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      {sortDir !== "none" && <th className="py-2 pr-3 w-10">Rank</th>}
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">1st</th>
-                      <th className="py-2 pr-3">2nd</th>
-                      <th className="py-2 pr-3">Combined</th>
-                      <th className="py-2 pr-3">Max</th>
-                      <th className="py-2">Grade</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sortedCombinedRows.map((r, i) => (
-                      <tr key={r.enrollmentNo} className="border-b border-gray-50">
-                        {sortDir !== "none" && (
-                          <td className="py-2 pr-3 text-gray-400 font-medium">{i + 1}</td>
-                        )}
-                        <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{r.name}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.midsem1 ?? "—"}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.midsem2 ?? "—"}</td>
-                        <td className="py-2 pr-3">{r.combined}</td>
-                        <td className="py-2 pr-3">{r.max}</td>
-                        <td className="py-2">
-                          <GradeBadge grade={r.grade} />
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </section>
-
-            <div className="space-y-6">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Grade Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart
-                    data={Object.entries(combinedGradeCounts).map(([name, count]) => ({ name, count }))}
-                  >
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-                      {Object.keys(combinedGradeCounts).map((name, i) => (
-                        <Cell key={i} fill={TIER_COLORS[name]} />
-                      ))}
-                    </Bar>
-                  </BarChart>
-                </ResponsiveContainer>
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Top 5 Highest Scorers"
-                  positive
-                  items={combinedTop5.map((r) => ({ name: r.name, marks: r.sortValue }))}
-                />
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <RankedList
-                  title="Bottom 5"
-                  positive={false}
-                  items={combinedBottom5.map((r) => ({ name: r.name, marks: r.sortValue }))}
-                />
-              </section>
-            </div>
-          </div>
-        </>
-      )}
-
-      {data && view === "summary" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Academic Summary</h2>
-            <p className="text-sm text-gray-500 mt-1">Filter students by marks range, and see who's improving.</p>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <div className="space-y-6">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Filter Criteria</h3>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Exam</label>
-                    <select
-                      value={filterExam}
-                      onChange={(e) => setFilterExam(e.target.value as any)}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm bg-white"
-                    >
-                      <option value="both">Both Midsem 1 &amp; 2</option>
-                      <option value="midsem1">Midsem 1</option>
-                      <option value="midsem2">Midsem 2</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Lower Bound</label>
-                    <input
-                      type="number"
-                      value={lowerBound}
-                      onChange={(e) => setLowerBound(Number(e.target.value))}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-gray-500 mb-2">Upper Bound</label>
-                    <input
-                      type="number"
-                      value={upperBound}
-                      onChange={(e) => setUpperBound(Number(e.target.value))}
-                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm"
-                    />
-                  </div>
-                </div>
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">
-                  Filtered Results <span className="text-gray-400 font-normal">({filteredSummaryRows.length})</span>
-                </h3>
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">Subject</th>
-                      <th className="py-2 pr-3">Exam</th>
-                      <th className="py-2">Marks</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {filteredSummaryRows.map((r, i) => (
-                      <tr key={`${r.enrollmentNo}-${r.exam}-${r.subject}-${i}`} className="border-b border-gray-50">
-                        <td className="py-2 pr-3 text-gray-900">{r.name}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.subject}</td>
-                        <td className="py-2 pr-3 text-gray-500">{r.exam}</td>
-                        <td className="py-2">{r.marks}</td>
-                      </tr>
-                    ))}
-                    {filteredSummaryRows.length === 0 && (
-                      <tr>
-                        <td colSpan={4} className="py-6 text-center text-gray-400">
-                          No students match this filter.
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </section>
-            </div>
-
-            <div className="space-y-6">
-              <div className="grid grid-cols-2 gap-4">
-                <StatCard label="Overall Class Average" value={summaryStats.overallAverage} />
-                <StatCard label="Highest Combined Score" value={summaryStats.highest} />
-                <StatCard label="Lowest Combined Score" value={summaryStats.lowest} />
-                <StatCard label="Overall Pass Rate" value={`${summaryStats.passRate}%`} />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <StatCard label="Midsem 1 Average" value={summaryStats.midsem1Avg} />
-                <StatCard label="Midsem 2 Average" value={summaryStats.midsem2Avg} />
-              </div>
-
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                  <RankedList title="Marks Increase (Top 5)" positive items={summaryStats.increases.map((s) => ({ name: s.name, marks: s.change }))} />
-                </section>
-                <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                  <RankedList
-                    title="Marks Decrease (Top 5)"
-                    positive={false}
-                    items={summaryStats.decreases.map((s) => ({ name: s.name, marks: s.change }))}
-                  />
-                </section>
-              </div>
-            </div>
+      <div className="analysis-view-switch"><button className={view === "midsem1" ? "is-active" : ""} onClick={() => setView("midsem1")}>Midsem 1</button><button className={view === "midsem2" ? "is-active" : ""} onClick={() => setView("midsem2")}>Midsem 2</button><button className={view === "combined" ? "is-active" : ""} onClick={() => setView("combined")}>Combined</button></div>
+      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
+      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
+      {data && <>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>{view === "combined" ? "Combined Midsem 1 and Midsem 2 performance across all subjects." : "Marks across all subjects, class statistics, and performance tiers."}</p></div><Metric label="Class Average" value={`${activeStats.average}/${activeStats.max || 0}`} detail="class average across subjects" /><Metric label="Class Median" value={`${activeStats.median}/${activeStats.max || 0}`} detail="middle class score" /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students at or above 40%" /></section>
+        <section className="analysis-content-grid academic-content-grid">
+          <section className="analysis-panel analysis-table-panel">
+            <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 40%{selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div>{view === "combined" && <div className="flex items-end gap-3"><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Score<select value={scoreBasis} onChange={(e) => setScoreBasis(e.target.value as ScoreBasis)} className="h-9 min-w-[125px] rounded-xl border border-[#e1e4ea] bg-white px-3 text-[11px] font-semibold normal-case tracking-normal text-[#344054] outline-none focus:border-[#5b4ee6]"><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="combined">Combined</option><option value="max">Max</option></select></label><label className="flex flex-col gap-1 text-[9px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">Sort<select value={sortOrder} onChange={(e) => setSortOrder(e.target.value as SortOrder)} className="h-9 min-w-[125px] rounded-xl border border-[#e1e4ea] bg-white px-3 text-[11px] font-semibold normal-case tracking-normal text-[#344054] outline-none focus:border-[#5b4ee6]"><option value="none">No Sort</option><option value="highToLow">High to Low</option><option value="lowToHigh">Low to High</option></select></label></div>}{selectedTier && <button className="analysis-secondary" onClick={() => setSelectedTier(null)}>Clear filter</button>}</div>
+            <div className="max-h-[500px] overflow-y-auto overflow-x-hidden"><table className="w-full min-w-0 table-fixed border-collapse text-[11px]"><colgroup>{showRank && <col className="w-[40px]" />}<col className="w-[160px]" />{activeStats.subjectCodes.map((code: string) => <col key={code} className="w-[48px]" />)}<col className="w-[55px]" /><col className="w-[55px]" /><col className="w-[92px]" /></colgroup><thead><tr className="border-b border-[#edf0f4] text-left text-[10px] font-bold uppercase tracking-[0.2px] text-[#7b8498]">{showRank && <th className="sticky left-0 top-0 z-20 bg-white px-2 py-3 text-center">Rank</th>}<th className={`sticky ${showRank ? "left-[40px]" : "left-0"} top-0 z-20 bg-white px-2 py-3`}>Student Name</th>{activeStats.subjectCodes.map((code: string) => <th key={code} className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">{code}</th>)}<th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Total</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">%age</th><th className="sticky top-0 z-10 whitespace-nowrap bg-white px-1.5 py-3">Grade</th></tr></thead><tbody>
+              {displayedRows.map((row: any, index: number) => { const rowMax = Number(row.max) || activeStats.max; const pct = rowMax > 0 ? Math.round(Number(row.marks) / rowMax * 100) : 0; const tier = tierFor(Number(row.marks), rowMax); const grade = gradeFor(Number(row.marks), rowMax); return <tr key={row.enrollmentNo} className="border-b border-[#f0f1f3] last:border-0">{showRank && <td className="sticky left-0 z-10 bg-white px-2 py-3 text-center font-semibold text-[#626b80]">{index + 1}</td>}<td className={`sticky ${showRank ? "left-[40px]" : "left-0"} z-10 bg-white px-2 py-3 font-semibold text-[#17223b]`}><div className="flex items-center gap-2"><span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#eeebff] text-[9px] font-extrabold text-[#5b4ee6]">{initials(row.name)}</span><span className="truncate">{row.name}</span></div></td>{activeStats.subjectCodes.map((code: string) => { const subject = (row.subjects || []).find((item: any) => item.code === code); return <td key={code} className={`px-1.5 py-3 ${subject?.marks === null || subject?.marks === undefined ? "text-[#98a2b3]" : subject.pass === false ? "font-semibold text-[#ef4444]" : "text-[#15966a]"}`}>{subject?.marks ?? "—"}</td>; })}<td className="px-1.5 py-3 font-bold text-[#17223b]">{row.marks}</td><td className="px-1.5 py-3 text-[#626b80]">{pct}%</td><td className="px-1.5 py-3"><button onClick={() => setSelectedTier(tier)} className="inline-flex max-w-full whitespace-nowrap rounded-full px-2 py-1 text-[9px] font-bold" style={{ backgroundColor: `${TIER_COLORS[grade]}18`, color: TIER_COLORS[grade] }}>{grade}</button></td></tr>; })}
+            </tbody></table></div>
+          </section>
+          <div className="space-y-5"><div className="grid grid-cols-2 gap-4"><Metric label="Class Average" value={activeStats.average} detail={`out of ${activeStats.max || 0}`} /><Metric label="Class Median" value={activeStats.median} detail="middle class score" /><Metric label="Highest Score" value={activeStats.highest} detail={highestNames.length ? highestNames[0] : "top score"} /><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail={`${activeStats.rows.length} students assessed`} /></div>
+            <section className="analysis-panel p-5"><div className="mb-4 flex items-center justify-between"><div><h3>Performance Tier</h3><p className="mt-1 text-[10px] text-[#98a2b3]">Click a tier to filter the data sheet.</p></div><span className="text-[10px] text-[#98a2b3]">{totalStudents} Students</span></div><div className="space-y-2.5">{tierEntries.map(([tier, count]) => <button key={tier} onClick={() => setSelectedTier(selectedTier === tier ? null : tier)} className={`flex w-full items-center justify-between rounded-xl border px-3 py-2.5 text-left transition ${selectedTier === tier ? "border-[#cfc7ff] bg-[#f6f4ff]" : "border-[#edf0f4] bg-white hover:bg-[#fafaff]"}`}><span className="flex items-center gap-2.5"><span className="h-2.5 w-2.5 rounded-full" style={{ background: TIER_COLORS[tier] }} /><span className="text-[11px] font-semibold text-[#344054]">{tier}</span></span><span className="text-[12px] font-extrabold" style={{ color: TIER_COLORS[tier] }}>{count}</span></button>)}</div><div className="mt-5 h-3 overflow-hidden rounded-full bg-[#f0f1f4]">{tierEntries.map(([tier, count]) => <span key={tier} className="inline-block h-full" style={{ width: `${activeStats.rows.length ? count / activeStats.rows.length * 100 : 0}%`, background: TIER_COLORS[tier] }} />)}</div></section>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2"><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Top 5 Highest Scorers</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(0, 5).map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#15966a]">{row.marks}</span></div>)}</div></section><section className="analysis-panel p-5"><h3 className="text-[13px] font-bold text-[#17223b]">Bottom 5 At-Risk Students</h3><div className="mt-3 space-y-2">{activeStats.sorted.slice(-5).reverse().map((row: any, index: number) => <div key={row.enrollmentNo} className="flex items-center justify-between border-b border-[#f0f1f3] pb-2 last:border-0"><span className="text-[10px] font-semibold text-[#344054]">{index + 1}. {row.name}</span><span className="text-[10px] font-extrabold text-[#ef4444]">{row.marks}</span></div>)}</div></section></div>
           </div>
-        </>
-      )}
-    </div>
-  );
+        </section>
+      </>}
+    </main>
+  </div>;
 }
diff --git a/pages/section-analysis/[sectionId]/attendance.tsx b/pages/section-analysis/[sectionId]/attendance.tsx
index ca20956..900a4bd 100644
--- a/pages/section-analysis/[sectionId]/attendance.tsx
+++ b/pages/section-analysis/[sectionId]/attendance.tsx
@@ -1,710 +1,88 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useRouter } from "next/router";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  CartesianGrid,
-  PieChart,
-  Pie,
-  Cell,
-  Legend,
-} from "recharts";
-
+import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { AlertCircle, BarChart3, BookOpen, Download, Gauge, GraduationCap, LayoutDashboard, Mail, RefreshCw, Search, SlidersHorizontal, Sparkles, Users } from "lucide-react";
 import AnalysisNav from "../../../components/AnalysisNav";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 import { SectionAnalysis } from "../../../lib/analysisClass";
-import { RawDataButton, StatCard } from "../../../components/AnalysisWidgets";
-
-type AttendanceView = "trend" | "risk" | "summary";
 
-const BUCKET_COLORS = {
-  above75: "#10b981", // Good Standing
-  to74: "#3b82f6", // Satisfactory
-  to49: "#f59e0b", // Needs Attention
-  below30: "#ef4444", // Critical Risk
-};
+type AttendanceView = "trend" | "risk";
+const round1 = (n: number) => Math.round(n * 10) / 10;
+const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 
-export default function AttendancePage() {
+export default function ClassAttendancePage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [view, setView] = useState<AttendanceView>("trend");
-
   const [data, setData] = useState<SectionAnalysis | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
-
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
-
-  // Month selection (Trend tab)
   const [previousMonth, setPreviousMonth] = useState("");
   const [currentMonth, setCurrentMonth] = useState("");
   const [trendCriteria, setTrendCriteria] = useState(5);
-
-  // At Risk filter state
+  const [search, setSearch] = useState("");
   const [lowerBound, setLowerBound] = useState(0);
   const [upperBound, setUpperBound] = useState(100);
   const [riskTrendFilter, setRiskTrendFilter] = useState("All");
   const [riskMonth, setRiskMonth] = useState<"previous" | "current">("current");
+  const [copied, setCopied] = useState(false);
 
-  async function loadAnalysis(selectedPrevious?: string, selectedCurrent?: string, criteria?: number) {
+  async function loadAnalysis(sync = false, previous = previousMonth, current = currentMonth, criteria = trendCriteria) {
     if (!sectionId || typeof sectionId !== "string") return;
-
-    setLoading(true);
+    sync ? setSyncing(true) : setLoading(true);
     setError("");
-
     try {
       const params = new URLSearchParams();
-      if (selectedPrevious) params.set("previousMonth", selectedPrevious);
-      if (selectedCurrent) params.set("currentMonth", selectedCurrent);
-      if (criteria !== undefined) params.set("trendCriteria", String(criteria));
-
-      const query = params.toString();
-      const res = await fetch(`/api/analysis/section/${sectionId}${query ? `?${query}` : ""}`);
-      const json = await res.json();
-
-      if (!res.ok) {
-        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load attendance analysis");
-        return;
-      }
-
-      setData(json.data);
-      setComputedAt(json.computedAt);
-      setSheetId(json.sheetId || null);
-
-      if (json.data?.monthsUsed) {
-        if (!previousMonth && json.data.monthsUsed.previous) setPreviousMonth(json.data.monthsUsed.previous);
-        if (!currentMonth && json.data.monthsUsed.current) setCurrentMonth(json.data.monthsUsed.current);
-      }
-    } catch (e: any) {
-      setError(e.message || "Failed to load attendance analysis");
-    } finally {
-      setLoading(false);
-    }
+      if (sync) params.set("sync", "1");
+      if (previous) params.set("previousMonth", previous);
+      if (current) params.set("currentMonth", current);
+      params.set("trendCriteria", String(criteria));
+      const response = await fetch(`/api/analysis/section/${sectionId}?${params.toString()}`);
+      const json = await response.json();
+      if (!response.ok) throw new Error(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load attendance analysis");
+      setData(json.data); setComputedAt(json.computedAt || ""); setSheetId(json.sheetId || null);
+      setPreviousMonth(previous || json.data?.monthsUsed?.previous || ""); setCurrentMonth(current || json.data?.monthsUsed?.current || "");
+    } catch (e: any) { setError(e.message || "Failed to load attendance analysis"); }
+    finally { setLoading(false); setSyncing(false); }
   }
 
-  async function syncAnalysis() {
-    if (!sectionId || typeof sectionId !== "string") return;
-
-    setSyncing(true);
-    setError("");
-
-    try {
-      const params = new URLSearchParams({
-        sync: "1",
-        previousMonth,
-        currentMonth,
-        trendCriteria: String(trendCriteria),
-      });
-
-      const res = await fetch(`/api/analysis/section/${sectionId}?${params.toString()}`);
-      const json = await res.json();
-
-      if (!res.ok) {
-        setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to sync analysis");
-        return;
-      }
-
-      setData(json.data);
-      setComputedAt(json.computedAt);
-      setSheetId(json.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to sync analysis");
-    } finally {
-      setSyncing(false);
-    }
-  }
-
-  function applyTrendSettings() {
-    loadAnalysis(previousMonth, currentMonth, trendCriteria);
-  }
-
-  useEffect(() => {
-    loadAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sectionId]);
-
+  useEffect(() => { loadAnalysis(); }, [sectionId]);
+  const students = data?.students || [];
   const availableMonths = data?.availableMonths || [];
-
-  const trendData = data
-    ? [
-        { name: "Increasing", count: data.trendCounts?.increasing || 0 },
-        { name: "Decreasing", count: data.trendCounts?.decreasing || 0 },
-        { name: "Stable", count: data.trendCounts?.stable || 0 },
-      ]
-    : [];
-
-  const attendanceBuckets = data?.attendanceBuckets ?? {
-    below30: 0,
-    to49: 0,
-    to74: 0,
-    above75: 0,
-  };
-
-  const attendanceDistribution = data
-    ? [
-        { name: "Below 30%", count: attendanceBuckets.below30 },
-        { name: "30% to 49%", count: attendanceBuckets.to49 },
-        { name: "50% to 74%", count: attendanceBuckets.to74 },
-        { name: "75% and above", count: attendanceBuckets.above75 },
-      ]
-    : [];
-
-  // ---- At Risk: filtered students ----
-  const riskResults = useMemo(() => {
-    if (!data) return [];
-    return data.students.filter((s: any) => {
-      const pct = riskMonth === "current" ? s.attendancePct?.currMonth ?? 0 : s.attendancePct?.prevMonth ?? 0;
-      const inBounds = pct >= lowerBound && pct <= upperBound;
-      const trendMatches = riskTrendFilter === "All" || (s.attendancePct?.trend || "Stable") === riskTrendFilter;
-      return inBounds && trendMatches;
-    });
-  }, [data, lowerBound, upperBound, riskTrendFilter, riskMonth]);
-
-  const riskEmails = riskResults.map((s: any) => s.email).filter(Boolean);
-  const riskEmailsText = riskEmails.join("; ");
-
-  const [copied, setCopied] = useState(false);
-  async function copyEmails() {
-    try {
-      await navigator.clipboard.writeText(riskEmailsText);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // clipboard API unavailable — the textarea below still lets them select+copy manually
-    }
-  }
-
-  const mailtoHref = `mailto:?bcc=${encodeURIComponent(riskEmails.join(","))}&subject=${encodeURIComponent(
-    "Attendance Alert"
-  )}&body=${encodeURIComponent(
-    "This is a reminder regarding your recent attendance. Please make sure to attend upcoming classes."
-  )}`;
-
-  // ---- Summary: top movers (by attendance change), computed client-side ----
-  const topMovers = useMemo(() => {
-    if (!data) return { improved: [], declined: [] };
-    const withChange = data.students.map((s: any) => ({
-      name: s.name,
-      change: round1((s.attendancePct?.currMonth ?? 0) - (s.attendancePct?.prevMonth ?? 0)),
-    }));
-    const sorted = [...withChange].sort((a, b) => b.change - a.change);
-    return {
-      improved: sorted.slice(0, 5),
-      declined: [...sorted].reverse().slice(0, 5),
-    };
-  }, [data]);
-
-  function round1(n: number) {
-    return Math.round(n * 10) / 10;
-  }
-
-  const donutData = data
-    ? [
-        {
-          name: "Good Standing (75%+)",
-          value: attendanceBuckets.above75,
-          color: BUCKET_COLORS.above75,
-        },
-        {
-          name: "Satisfactory (50-74%)",
-          value: attendanceBuckets.to74,
-          color: BUCKET_COLORS.to74,
-        },
-        {
-          name: "Needs Attention (30-49%)",
-          value: attendanceBuckets.to49,
-          color: BUCKET_COLORS.to49,
-        },
-        {
-          name: "Critical Risk (<30%)",
-          value: attendanceBuckets.below30,
-          color: BUCKET_COLORS.below30,
-        },
-      ]
-    : [];
-
-  const compareBarData = data
-    ? [
-        { name: data.monthsUsed?.previous || "Previous", value: data.classAveragePrevMonth },
-        { name: data.monthsUsed?.current || "Current", value: data.classAverageCurrMonth },
-      ]
-    : [];
-
-  return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      {/* HEADER */}
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && (
-            <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
-          <button
-            onClick={syncAnalysis}
-            disabled={syncing}
-            className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50"
-          >
-            {syncing ? "Syncing..." : "Sync now"}
-          </button>
-        </div>
-      </div>
-
+  const previousAverage = students.length ? round1(students.reduce((sum, s) => sum + s.attendancePct.prevMonth, 0) / students.length) : 0;
+  const currentAverage = students.length ? round1(students.reduce((sum, s) => sum + s.attendancePct.currMonth, 0) / students.length) : 0;
+  const averageChange = round1(currentAverage - previousAverage);
+  const improvingCount = students.filter((s) => s.attendancePct.trend === "Increasing").length;
+  const filteredStudents = useMemo(() => students.filter((s) => s.name.toLowerCase().includes(search.toLowerCase())), [students, search]);
+  const riskResults = useMemo(() => students.filter((s) => { const attendance = riskMonth === "current" ? s.attendancePct.currMonth : s.attendancePct.prevMonth; return attendance >= lowerBound && attendance <= upperBound && (riskTrendFilter === "All" || s.attendancePct.trend === riskTrendFilter); }), [students, lowerBound, upperBound, riskTrendFilter, riskMonth]);
+  const riskEmails = riskResults.map((s) => s.email).filter(Boolean);
+  const riskLowCount = riskResults.filter((s) => (riskMonth === "current" ? s.attendancePct.currMonth : s.attendancePct.prevMonth) < 50).length;
+  const riskDecreasingCount = riskResults.filter((s) => s.attendancePct.trend === "Decreasing").length;
+  const trendData = [{ name: "Increasing", count: data?.trendCounts.increasing || 0, color: "#16a56a" }, { name: "Decreasing", count: data?.trendCounts.decreasing || 0, color: "#ef4444" }, { name: "Stable", count: data?.trendCounts.stable || 0, color: "#4d75d0" }];
+  const attendanceDistribution = [{ name: "Below 30%", count: data?.attendanceBuckets.below30 || 0, color: "#ef4444" }, { name: "30% to 49%", count: data?.attendanceBuckets.to49 || 0, color: "#f97316" }, { name: "50% to 74%", count: data?.attendanceBuckets.to74 || 0, color: "#f59e0b" }, { name: "75% and above", count: data?.attendanceBuckets.above75 || 0, color: "#15966a" }];
+  function openRisk(options: { trend?: string; lower?: number; upper?: number }) { setRiskTrendFilter(options.trend || "All"); setLowerBound(options.lower ?? 0); setUpperBound(options.upper ?? 100); setView("risk"); }
+  async function copyEmails() { try { await navigator.clipboard.writeText(riskEmails.join("; ")); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch {} }
+
+  return <div className="analysis-layout">
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a className="is-active" href={typeof sectionId === "string" ? `/section-analysis/${sectionId}/attendance` : "#"}><BookOpen size={18} />Class Analysis</a><a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a></nav><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
+    <main className="analysis-page">
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Class / Section Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><RawDataButton sheetId={sheetId} /><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
       {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-      {/* ATTENDANCE SUB-NAV: Trend / At Risk / Summary */}
-      <div className="flex gap-2 mb-8">
-        {(["trend", "risk", "summary"] as AttendanceView[]).map((v) => (
-          <button
-            key={v}
-            onClick={() => setView(v)}
-            className={`text-sm px-4 py-2 rounded-lg font-medium capitalize ${
-              view === v ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
-            }`}
-          >
-            {v === "risk" ? "At Risk" : v}
-          </button>
-        ))}
-      </div>
-
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading attendance analysis...</div>}
-
-      {data && view === "trend" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Attendance Trend</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Compare attendance between two months and identify increasing, decreasing, and stable students.
-            </p>
-          </div>
-
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-5">Trend Comparison Settings</h3>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">First Month</label>
-                <select
-                  value={previousMonth}
-                  onChange={(e) => setPreviousMonth(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="">Select month</option>
-                  {availableMonths.map((m: string) => (
-                    <option key={m} value={m}>
-                      {m}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Second Month</label>
-                <select
-                  value={currentMonth}
-                  onChange={(e) => setCurrentMonth(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="">Select month</option>
-                  {availableMonths.map((m: string) => (
-                    <option key={m} value={m}>
-                      {m}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Trend Criteria (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={trendCriteria}
-                  onChange={(e) => setTrendCriteria(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <button
-                onClick={applyTrendSettings}
-                disabled={!previousMonth || !currentMonth || previousMonth === currentMonth}
-                className="bg-gray-900 text-white rounded-lg px-4 py-2 text-sm disabled:opacity-40"
-              >
-                Apply Comparison
-              </button>
-            </div>
-            <div className="mt-5 pt-4 border-t border-gray-100">
-              <p className="text-xs text-gray-500">
-                Trend calculation: a change of{" "}
-                <span className="font-semibold text-gray-700">±{trendCriteria} percentage points</span> or more is
-                classified as Increasing or Decreasing. Smaller changes are classified as Stable.
-              </p>
-            </div>
-          </section>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 order-2 lg:order-1 lg:col-span-1">
-              <h3 className="font-medium text-gray-900 mb-4">Student Trend Analysis</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-3 pr-3">Name</th>
-                      <th className="py-3 pr-3">{data.monthsUsed?.previous || "Month 1"}</th>
-                      <th className="py-3 pr-3">{data.monthsUsed?.current || "Month 2"}</th>
-                      <th className="py-3 pr-3">Change</th>
-                      <th className="py-3">Trend</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {data.students.map((student: any) => {
-                      const previous = student.attendancePct?.prevMonth ?? 0;
-                      const current = student.attendancePct?.currMonth ?? 0;
-                      const change = round1(current - previous);
-                      const trend = student.attendancePct?.trend || "Stable";
-                      return (
-                        <tr key={student.enrollmentNo} className="border-b border-gray-50">
-                          <td className="py-3 pr-3 text-gray-900 whitespace-nowrap">{student.name}</td>
-                          <td className="py-3 pr-3 text-gray-500">{previous}%</td>
-                          <td className="py-3 pr-3 text-gray-500">{current}%</td>
-                          <td
-                            className={`py-3 pr-3 font-medium ${
-                              change > 0 ? "text-emerald-600" : change < 0 ? "text-red-500" : "text-gray-500"
-                            }`}
-                          >
-                            {change > 0 ? "+" : ""}
-                            {change}%
-                          </td>
-                          <td className="py-3">
-                            <span
-                              className={`text-xs px-2.5 py-1 rounded-full ${
-                                trend === "Increasing"
-                                  ? "bg-emerald-50 text-emerald-700"
-                                  : trend === "Decreasing"
-                                  ? "bg-red-50 text-red-600"
-                                  : "bg-gray-100 text-gray-600"
-                              }`}
-                            >
-                              {trend}
-                            </span>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </section>
-
-            <div className="space-y-6 order-1 lg:order-2 lg:col-span-1">
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Trend Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart data={trendData}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" fill="#2563eb" radius={[4, 4, 0, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
-              </section>
-
-              <section className="bg-white rounded-2xl border border-gray-100 p-6">
-                <h3 className="font-medium text-gray-900 mb-4">Attendance Distribution</h3>
-                <ResponsiveContainer width="100%" height={220}>
-                  <BarChart data={attendanceDistribution}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="name" fontSize={11} />
-                    <YAxis fontSize={12} allowDecimals={false} />
-                    <Tooltip />
-                    <Bar dataKey="count" fill="#111827" radius={[4, 4, 0, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
-              </section>
-            </div>
-          </div>
-        </>
-      )}
-
-      {data && view === "risk" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">At Risk Students</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Filter students by attendance range and trend, then copy or email the list directly.
-            </p>
-          </div>
-
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-5">Filter Criteria</h3>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Lower Bound (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={lowerBound}
-                  onChange={(e) => setLowerBound(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Upper Bound (%)</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  value={upperBound}
-                  onChange={(e) => setUpperBound(Number(e.target.value))}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
-                />
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Trend</label>
-                <select
-                  value={riskTrendFilter}
-                  onChange={(e) => setRiskTrendFilter(e.target.value)}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="All">All</option>
-                  <option value="Increasing">Increasing</option>
-                  <option value="Decreasing">Decreasing</option>
-                  <option value="Stable">Stable</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-xs font-medium text-gray-500 mb-2">Month</label>
-                <select
-                  value={riskMonth}
-                  onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")}
-                  className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900 bg-white"
-                >
-                  <option value="current">{data.monthsUsed?.current || "Current month"}</option>
-                  <option value="previous">{data.monthsUsed?.previous || "Previous month"}</option>
-                </select>
-              </div>
-            </div>
-            <p className="text-xs text-gray-400 mt-4">
-              Note: filtering only works across the two months currently loaded in Trend settings above — pick a
-              different pair there first if you need a different month here.
-            </p>
-          </section>
-
-          <section className="bg-white rounded-2xl border border-gray-100 p-6 mb-6">
-            <h3 className="font-medium text-gray-900 mb-4">
-              Filtered Students <span className="text-gray-400 font-normal">({riskResults.length})</span>
-            </h3>
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="text-left text-gray-400 border-b border-gray-100">
-                  <th className="py-2 pr-3">Enrollment</th>
-                  <th className="py-2 pr-3">Name</th>
-                  <th className="py-2 pr-3">Email</th>
-                  <th className="py-2 pr-3">Attendance</th>
-                  <th className="py-2">Trend</th>
-                </tr>
-              </thead>
-              <tbody>
-                {riskResults.map((s: any) => (
-                  <tr key={s.enrollmentNo} className="border-b border-gray-50">
-                    <td className="py-2 pr-3 text-gray-500">{s.enrollmentNo}</td>
-                    <td className="py-2 pr-3 text-gray-900">{s.name}</td>
-                    <td className="py-2 pr-3 text-gray-500">{s.email || "—"}</td>
-                    <td className="py-2 pr-3">
-                      {riskMonth === "current" ? s.attendancePct?.currMonth : s.attendancePct?.prevMonth}%
-                    </td>
-                    <td className="py-2">{s.attendancePct?.trend}</td>
-                  </tr>
-                ))}
-                {riskResults.length === 0 && (
-                  <tr>
-                    <td colSpan={5} className="py-6 text-center text-gray-400">
-                      No students match this filter.
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </section>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-3">Copy to Mail</h3>
-              <textarea
-                readOnly
-                value={riskEmailsText}
-                rows={5}
-                className="w-full text-xs text-gray-700 border border-gray-200 rounded-lg p-3 bg-gray-50"
-              />
-              <button
-                onClick={copyEmails}
-                disabled={riskEmails.length === 0}
-                className="mt-3 text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-40"
-              >
-                {copied ? "Copied!" : "Copy Emails"}
-              </button>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-3">Send Alert Emails</h3>
-              <p className="text-sm text-gray-500 mb-4">
-                Opens your default email app with all {riskEmails.length} filtered students BCC'd, and a starter
-                subject/message you can edit before sending.
-              </p>
-              <a
-                href={mailtoHref}
-                className={`inline-block text-sm rounded-lg px-4 py-2 text-white ${
-                  riskEmails.length === 0 ? "bg-gray-300 pointer-events-none" : "bg-red-600 hover:bg-red-700"
-                }`}
-              >
-                Send Alert Emails ↗
-              </a>
-            </section>
-          </div>
-        </>
-      )}
-
-      {data && view === "summary" && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Attendance Summary</h2>
-            <p className="text-sm text-gray-500 mt-1">Overall class attendance health at a glance.</p>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-            <StatCard label="Total Students" value={data.totalStudents} />
-            <StatCard label="Class Average (Current)" value={`${data.classAverageCurrMonth}%`} />
-            <StatCard label="Class Average (Previous)" value={`${data.classAveragePrevMonth}%`} />
-            <StatCard
-              label="Overall Trend"
-              value={`${data.overallTrendPct > 0 ? "+" : ""}${data.overallTrendPct}%`}
-              positive={data.overallTrendPct >= 0}
-            />
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Attendance Breakdown</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <PieChart>
-                  <Pie data={donutData} dataKey="value" nameKey="name" innerRadius={60} outerRadius={95} paddingAngle={2}>
-                    {donutData.map((entry, i) => (
-                      <Cell key={i} fill={entry.color} />
-                    ))}
-                  </Pie>
-                  <Tooltip />
-                  <Legend wrapperStyle={{ fontSize: 11 }} />
-                </PieChart>
-              </ResponsiveContainer>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Class Average: Previous vs Current</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <BarChart data={compareBarData}>
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                  <XAxis dataKey="name" fontSize={12} />
-                  <YAxis fontSize={12} />
-                  <Tooltip />
-                  <Bar dataKey="value" fill="#2563eb" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </section>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Core Summary</h3>
-              <table className="w-full text-sm">
-                <tbody>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Good Standing (≥75%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.above75}</td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Satisfactory (50-74%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.to74}</td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Needs Attention (30-49%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.to49}</td>
-                  </tr>
-                  <tr>
-                    <td className="py-2 text-gray-600">Critical Risk (&lt;30%)</td>
-                    <td className="py-2 text-right font-medium">{data.attendanceBuckets.below30}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Attendance Shifts</h3>
-              <table className="w-full text-sm">
-                <tbody>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Improving Students</td>
-                    <td className="py-2 text-right font-medium text-emerald-600">
-                      {data.trendCounts?.increasing ?? 0}
-                    </td>
-                  </tr>
-                  <tr className="border-b border-gray-50">
-                    <td className="py-2 text-gray-600">Declining Students</td>
-                    <td className="py-2 text-right font-medium text-red-600">{data.trendCounts?.decreasing ?? 0}</td>
-                  </tr>
-                  <tr>
-                    <td className="py-2 text-gray-600">Stable Students</td>
-                    <td className="py-2 text-right font-medium text-gray-600">{data.trendCounts?.stable ?? 0}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Top 5 Most Improved</h3>
-              <ol className="text-sm space-y-2">
-                {topMovers.improved.map((s, i) => (
-                  <li key={s.name} className="flex justify-between">
-                    <span>
-                      {i + 1}. {s.name}
-                    </span>
-                    <span className="text-emerald-600 font-medium">
-                      {s.change > 0 ? "+" : ""}
-                      {s.change}%
-                    </span>
-                  </li>
-                ))}
-              </ol>
-            </section>
-
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Top 5 Critical Decliners</h3>
-              <ol className="text-sm space-y-2">
-                {topMovers.declined.map((s, i) => (
-                  <li key={s.name} className="flex justify-between">
-                    <span>
-                      {i + 1}. {s.name}
-                    </span>
-                    <span className="text-red-600 font-medium">
-                      {s.change > 0 ? "+" : ""}
-                      {s.change}%
-                    </span>
-                  </li>
-                ))}
-              </ol>
-            </section>
-          </div>
-        </>
-      )}
-    </div>
-  );
+      <div className="analysis-view-switch"><button className={view === "trend" ? "is-active" : ""} onClick={() => setView("trend")}>Trend</button><button className={view === "risk" ? "is-active" : ""} onClick={() => setView("risk")}>At Risk</button></div>
+      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318", display: "flex", gap: 8 }}><AlertCircle size={17} />{error}</div>}
+      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading attendance analysis...</div>}
+      {data && view === "trend" && <>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>Attendance Trend</h2><p>Compare attendance between two months and identify increasing, decreasing, and stable students.</p></div><Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} change={averageChange} /><Metric icon={<Gauge size={19} />} label={`Class Average (${currentMonth || "Current"})`} value={`${currentAverage}%`} change={averageChange} /><Metric icon={<Sparkles size={19} />} label="Students Improving" value={improvingCount} detail={`${students.length ? round1((improvingCount / students.length) * 100) : 0}% of total students`} /></section>
+        <section className="analysis-panel analysis-settings"><h3>Trend Comparison Settings</h3><div className="analysis-settings-grid"><div><label>First Month</label><select value={previousMonth} onChange={(e) => setPreviousMonth(e.target.value)}>{availableMonths.map((month) => <option key={month}>{month}</option>)}</select></div><div><label>Second Month</label><select value={currentMonth} onChange={(e) => setCurrentMonth(e.target.value)}>{availableMonths.map((month) => <option key={month}>{month}</option>)}</select></div><div><label>Trend Criteria (%)</label><input type="number" min="0" max="100" value={trendCriteria} onChange={(e) => setTrendCriteria(Number(e.target.value))} /></div><button className="analysis-primary" onClick={() => loadAnalysis(false, previousMonth, currentMonth, trendCriteria)} disabled={loading || !previousMonth || !currentMonth || previousMonth === currentMonth}><SlidersHorizontal size={15} />{loading ? "Applying..." : "Apply Comparison"}</button></div><div className="analysis-note"><AlertCircle size={14} />Trend calculation: a change of <strong>±{trendCriteria} percentage points</strong> or more is Increasing or Decreasing.</div></section>
+        <section className="analysis-content-grid"><div className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div style={{ display: "flex", alignItems: "center", gap: 8 }}><h3>Student Trend Analysis</h3><span className="analysis-count">{students.length} Students</span></div><div style={{ position: "relative" }}><Search size={15} style={{ position: "absolute", left: 10, top: 11, color: "#98a2b3" }} /><input placeholder="Search student..." value={search} onChange={(e) => setSearch(e.target.value)} style={{ paddingLeft: 32, width: 200, height: 38 }} /></div></div><div className="analysis-table-wrap"><table className="analysis-table"><thead><tr><th>Student Name</th><th>{data.monthsUsed.previous || "Month 1"}</th><th>{data.monthsUsed.current || "Month 2"}</th><th>Change</th><th>Trend</th></tr></thead><tbody>{filteredStudents.map((student) => { const previous = student.attendancePct.prevMonth; const current = student.attendancePct.currMonth; const change = round1(current - previous); const trend = student.attendancePct.trend; return <tr key={student.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(student.name)}</span>{student.name}</span></td><td>{previous}%</td><td>{current}%</td><td className={change > 0 ? "change-up" : change < 0 ? "change-down" : ""}>{change > 0 ? "+" : ""}{change}%</td><td><span className={`trend-badge ${trend === "Increasing" ? "trend-up" : trend === "Decreasing" ? "trend-down" : "trend-stable"}`}>{trend === "Increasing" ? "↑ " : trend === "Decreasing" ? "↓ " : "− "}{trend}</span></td></tr>; })}</tbody></table></div></div><div className="analysis-right-stack"><ChartPanel title="Trend Distribution" subtitle="Click a column to filter those students in At Risk." data={trendData} onBarClick={(entry) => openRisk({ trend: entry?.name || "All" })} /><ChartPanel title="Attendance Distribution" subtitle="Click a column to open that attendance range in At Risk." data={attendanceDistribution} onBarClick={(entry) => { if (entry?.name === "Below 30%") openRisk({ lower: 0, upper: 29.999 }); else if (entry?.name === "30% to 49%") openRisk({ lower: 30, upper: 49.999 }); else if (entry?.name === "50% to 74%") openRisk({ lower: 50, upper: 74.999 }); else openRisk({ lower: 75, upper: 100 }); }} /></div></section>
+      </>}
+      {data && view === "risk" && <><section className="analysis-hero"><div className="analysis-hero-copy"><h2>At Risk Students</h2><p>Find students needing attention using attendance range and trend filters.</p></div><Metric icon={<Users size={19} />} label="Matching Students" value={riskResults.length} detail="Current filter result" /><Metric icon={<AlertCircle size={19} />} label="Below 50% Attendance" value={riskLowCount} detail="Within selected result" /><Metric icon={<Gauge size={19} />} label="Decreasing Trend" value={riskDecreasingCount} detail="Students whose attendance fell" /></section><section className="analysis-panel analysis-settings"><div className="analysis-panel-head" style={{ marginBottom: 18 }}><div><h3>Filter Criteria</h3><p style={{ margin: "5px 0 0", color: "#667085", fontSize: 12 }}>Narrow the list before copying addresses or sending alerts.</p></div><button className="analysis-secondary" onClick={() => { setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}><RefreshCw size={14} />Reset</button></div><div className="analysis-settings-grid"><div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div><div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div><div><label>Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div><div><label>Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div></div></section><section className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div style={{ display: "flex", alignItems: "center", gap: 8 }}><h3>Filtered Students</h3><span className="analysis-count">{riskResults.length} Students</span></div></div><div className="analysis-table-wrap"><table className="analysis-table"><thead><tr><th>Student</th><th>Enrollment</th><th>Attendance</th><th>Trend</th><th>Email</th></tr></thead><tbody>{riskResults.length ? riskResults.map((student) => { const attendance = riskMonth === "current" ? student.attendancePct.currMonth : student.attendancePct.prevMonth; const trend = student.attendancePct.trend; return <tr key={student.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(student.name)}</span>{student.name}</span></td><td>{student.enrollmentNo}</td><td className={attendance < 50 ? "change-down" : ""}>{attendance}%</td><td><span className={`trend-badge ${trend === "Increasing" ? "trend-up" : trend === "Decreasing" ? "trend-down" : "trend-stable"}`}>{trend}</span></td><td>{student.email || "—"}</td></tr>; }) : <tr><td colSpan={5} style={{ textAlign: "center", padding: 36, color: "#667085" }}>No students match the current filters.</td></tr>}</tbody></table></div><div className="analysis-insight-actions" style={{ marginTop: 16, justifyContent: "flex-end" }}><button className="analysis-secondary" onClick={copyEmails} disabled={!riskEmails.length}><Download size={15} />{copied ? "Copied" : "Copy Emails"}</button><a className="analysis-primary" href={`mailto:?bcc=${encodeURIComponent(riskEmails.join(","))}`} style={{ pointerEvents: riskEmails.length ? "auto" : "none", opacity: riskEmails.length ? 1 : 0.55 }}><Mail size={15} />Send Alert Emails</a></div></section></>}
+    </main>
+  </div>;
 }
+
+function Metric({ icon, label, value, change, detail }: { icon: ReactNode; label: string; value: string | number; change?: number; detail?: string }) { const changeClass = change !== undefined && change > 0 ? "change-up" : change !== undefined && change < 0 ? "change-down" : ""; return <div className="analysis-metric"><div className="analysis-metric-icon">{icon}</div><div className="analysis-metric-content"><span className="analysis-metric-label">{label}</span><div className="analysis-metric-value-row"><strong>{value}</strong>{change !== undefined && <small className={changeClass}>{change > 0 ? "↑ +" : change < 0 ? "↓ " : ""}{change}%</small>}</div>{detail && <small className="analysis-metric-detail">{detail}</small>}</div></div>; }
+function ChartPanel({ title, subtitle, data, onBarClick }: { title: string; subtitle: string; data: { name: string; count: number; color: string }[]; onBarClick: (entry: { name: string } | undefined) => void }) { return <div className="analysis-panel analysis-chart-panel"><div className="analysis-chart-head"><div><h3>{title}</h3><p>{subtitle}</p></div></div><div style={{ height: 220 }}><ResponsiveContainer width="100%" height="100%"><BarChart data={data} margin={{ top: 18, right: 8, left: -14, bottom: 0 }}><CartesianGrid vertical={false} strokeDasharray="3 3" /><XAxis dataKey="name" tick={{ fontSize: 11 }} /><YAxis allowDecimals={false} tick={{ fontSize: 11 }} /><Tooltip cursor={{ fill: "rgba(79,70,229,0.05)" }} /><Bar dataKey="count" radius={[4, 4, 0, 0]} onClick={(_, index) => onBarClick(data[index])}>{data.map((entry) => <Cell key={entry.name} fill={entry.color} />)}</Bar></BarChart></ResponsiveContainer></div></div>; }
diff --git a/pages/section-analysis/[sectionId]/overall.tsx b/pages/section-analysis/[sectionId]/overall.tsx
index 2f84118..c56fb3d 100644
--- a/pages/section-analysis/[sectionId]/overall.tsx
+++ b/pages/section-analysis/[sectionId]/overall.tsx
@@ -1,65 +1,86 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  CartesianGrid,
-  Cell,
-} from "recharts";
-
+import { BarChart3, BookOpen, GraduationCap, LayoutDashboard, RefreshCw } from "lucide-react";
 import AnalysisNav from "../../../components/AnalysisNav";
-import { RawDataButton, StatCard, GradeBadge } from "../../../components/AnalysisWidgets";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 
-interface OverallStudent {
+type SortDirection = "none" | "asc" | "desc";
+type Subject = { id: string; name: string; code: string };
+type SubjectScore = {
+  subjectId: string;
+  code: string;
+  name: string;
+  attendance: number;
+  midsem1: number;
+  midsem2: number;
+  combined: number;
+  basicInternal: number;
+  moderatedInternal: number;
+  basicMax: number;
+  grade: string;
+};
+type Student = {
   enrollmentNo: string;
   name: string;
   email: string;
+  subjects: SubjectScore[];
   overallPct: number;
   overallAttendance: number;
   overallGrade: string;
-  subjects: {
-    subjectId: string;
-    code: string;
-    name: string;
-    attendance: number;
-    combined: number;
-    basicInternal: number;
-    grade: string;
-  }[];
-}
-
-interface OverallData {
-  subjects: { id: string; name: string; code: string }[];
-  students: OverallStudent[];
-  classAverageOverallPct: number;
-}
+};
+type OverallData = { subjects: Subject[]; students: Student[]; classAverageOverallPct: number };
+type RowSubject = Subject & { mark: number; max: number; pct: number; grade: string };
+type Row = Student & {
+  originalIndex: number;
+  subjects: RowSubject[];
+  total: number;
+  totalMax: number;
+  average: number;
+  averageMax: number;
+  overallPct: number;
+  tier: string;
+};
 
 const TIER_COLORS: Record<string, string> = {
-  Excellent: "#10b981",
-  Good: "#3b82f6",
+  Excellent: "#2563eb",
+  Good: "#16a34a",
   "Needs Attention": "#f59e0b",
   "Critical Risk": "#ef4444",
 };
 
+const tierForPct = (pct: number) =>
+  pct >= 80 ? "Excellent" : pct >= 60 ? "Good" : pct >= 40 ? "Needs Attention" : "Critical Risk";
+
+const tierClass = (tier: string) =>
+  tier === "Excellent"
+    ? "bg-blue-50 text-blue-700"
+    : tier === "Good"
+      ? "bg-green-50 text-green-700"
+      : tier === "Needs Attention"
+        ? "bg-amber-50 text-amber-700"
+        : "bg-red-50 text-red-600";
+
+const formatMark = (mark: number) => (Number.isInteger(mark) ? mark : mark.toFixed(1));
+
 export default function SectionOverallPage() {
   const router = useRouter();
   const { sectionId } = router.query;
-
   const [data, setData] = useState<OverallData | null>(null);
   const [sheetId, setSheetId] = useState<string | null>(null);
   const [computedAt, setComputedAt] = useState("");
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
+  const [lower, setLower] = useState(0);
+  const [upper, setUpper] = useState(40);
+  const [draftLower, setDraftLower] = useState(0);
+  const [draftUpper, setDraftUpper] = useState(40);
+  const [sortDirection, setSortDirection] = useState<SortDirection>("none");
+  const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
   async function loadAnalysis(sync = false) {
-    if (!sectionId || typeof sectionId !== "string") return;
-    if (sync) setSyncing(true);
-    else setLoading(true);
+    if (typeof sectionId !== "string") return;
+    sync ? setSyncing(true) : setLoading(true);
     setError("");
     try {
       const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
@@ -69,7 +90,7 @@ export default function SectionOverallPage() {
         return;
       }
       setData(json.data);
-      setComputedAt(json.computedAt);
+      setComputedAt(json.computedAt || "");
       setSheetId(json.sheetId || null);
     } catch (e: any) {
       setError(e.message || "Failed to load overall analysis");
@@ -81,115 +102,364 @@ export default function SectionOverallPage() {
 
   useEffect(() => {
     loadAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sectionId]);
 
-  const tierCounts = data
-    ? data.students.reduce(
-        (acc, s) => {
-          acc[s.overallGrade] = (acc[s.overallGrade] || 0) + 1;
-          return acc;
-        },
-        {} as Record<string, number>
-      )
-    : {};
+  // The API already returns only THEORY subjects. Keep the subject identity from
+  // the database/Google-Sheets analysis instead of hard-coding abbreviations here.
+  const theorySubjects = useMemo(() => data?.subjects.slice(0, 6) || [], [data]);
+
+  const rows = useMemo<Row[]>(() => {
+    if (!data) return [];
+
+    return data.students.map((student, originalIndex) => {
+      const subjects: RowSubject[] = theorySubjects.map((subject) => {
+        const score = student.subjects.find(
+          (item) => item.subjectId === subject.id || item.code === subject.code
+        );
+        const mark = Number(score?.basicInternal || 0);
+        const max = Number(score?.basicMax || 0);
+        const pct = max > 0 ? (mark / max) * 100 : 0;
+        return {
+          ...subject,
+          mark,
+          max,
+          pct,
+          grade: tierForPct(pct),
+        };
+      });
+
+      const total = subjects.reduce((sum, subject) => sum + subject.mark, 0);
+      const totalMax = subjects.reduce((sum, subject) => sum + subject.max, 0);
+      const average = subjects.length ? total / subjects.length : 0;
+      const averageMax = subjects.length ? totalMax / subjects.length : 0;
+      const overallPct = averageMax > 0 ? (average / averageMax) * 100 : 0;
+
+      return {
+        ...student,
+        originalIndex,
+        subjects,
+        total,
+        totalMax,
+        average,
+        averageMax,
+        overallPct,
+        tier: tierForPct(overallPct),
+      };
+    });
+  }, [data, theorySubjects]);
+
+  const filteredRows = useMemo(() => {
+    const lo = Math.max(0, Math.min(40, Math.min(lower, upper)));
+    const hi = Math.max(0, Math.min(40, Math.max(lower, upper)));
+    const result = rows.filter((row) => row.average >= lo && row.average <= hi);
+
+    if (sortDirection === "none") {
+      return [...result].sort((a, b) => a.originalIndex - b.originalIndex);
+    }
+
+    return [...result].sort((a, b) =>
+      sortDirection === "asc"
+        ? a.average - b.average || a.name.localeCompare(b.name)
+        : b.average - a.average || a.name.localeCompare(b.name)
+    );
+  }, [rows, lower, upper, sortDirection]);
+
+  const tierCounts = useMemo(
+    () =>
+      rows.reduce((acc, row) => {
+        acc[row.tier] = (acc[row.tier] || 0) + 1;
+        return acc;
+      }, {} as Record<string, number>),
+    [rows]
+  );
+
+  const classAveragePct = rows.length
+    ? rows.reduce((sum, row) => sum + row.overallPct, 0) / rows.length
+    : 0;
+  const passRate = rows.length
+    ? Math.round((rows.filter((row) => row.overallPct >= 40).length / rows.length) * 100)
+    : 0;
+  const topFive = [...rows]
+    .sort((a, b) => b.overallPct - a.overallPct || a.originalIndex - b.originalIndex)
+    .slice(0, 5);
+
+  function applyFilters() {
+    const nextLower = Math.max(0, Math.min(40, Math.min(draftLower, draftUpper)));
+    const nextUpper = Math.max(0, Math.min(40, Math.max(draftLower, draftUpper)));
+    setLower(nextLower);
+    setUpper(nextUpper);
+    setDraftLower(nextLower);
+    setDraftUpper(nextUpper);
+    setSortDirection(draftSortDirection);
+  }
+
+  function resetFilter() {
+    setDraftLower(0);
+    setDraftUpper(40);
+    setLower(0);
+    setUpper(40);
+    setDraftSortDirection("none");
+    setSortDirection("none");
+  }
 
   return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
-        </div>
-        <div className="flex items-center gap-2">
-          <RawDataButton sheetId={sheetId} />
-          <button onClick={() => loadAnalysis(true)} disabled={syncing} className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50">
-            {syncing ? "Syncing..." : "Sync now"}
-          </button>
+    <div className="analysis-layout">
+      <aside className="analysis-sidebar">
+        <div className="analysis-brand">
+          <span className="analysis-brand__mark"><BarChart3 size={18} /></span>
+          <span>ClassPulse</span>
         </div>
-      </div>
+        <nav className="analysis-side-nav">
+          <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
+          <a
+            className="is-active"
+            href={typeof sectionId === "string" ? `/class-analysis/${sectionId}` : "/class-analysis"}
+          >
+            <BookOpen size={18} />Class Analysis
+          </a>
+          <a href="/subject-analysis"><GraduationCap size={18} />Subject Analysis</a>
+        </nav>
+        <RawDataButton sheetId={sheetId} />
+        <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
+      </aside>
 
-      {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
+      <main className="analysis-page">
+        <header className="analysis-topbar">
+          <div className="analysis-title-row">
+            <h1>Class / Section Analysis</h1>
+            {computedAt && (
+              <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>
+            )}
+          </div>
+          <div className="analysis-top-actions">
+            <button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}>
+              <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
+              {syncing ? "Syncing..." : "Sync now"}
+            </button>
+          </div>
+        </header>
 
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading overall analysis...</div>}
+        {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
 
-      {data && (
-        <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Overall Analysis</h2>
-            <p className="text-sm text-gray-500 mt-1">
-              Internal marks combined across all {data.subjects.length} subjects: {data.subjects.map((s) => s.name).join(", ")}.
-            </p>
+        {error && (
+          <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>
+            {error}
           </div>
+        )}
+        {loading && !data && (
+          <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>
+        )}
 
-          <div className="bg-amber-50 border border-amber-100 text-amber-800 text-xs rounded-lg p-3 mb-6">
-            Note: each subject's tier/moderation rules aren't configured yet, so this uses each subject's basic
-            internal marks (as a percentage of that subject's own max) averaged across all subjects.
-          </div>
+        {data && (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Class Average</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{classAveragePct.toFixed(1)}%</p>
+                <p className="mt-1 text-[10px] text-slate-400">across all 6 theory subjects</p>
+              </section>
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Students</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{rows.length}</p>
+                <p className="mt-1 text-[10px] text-slate-400">students assessed</p>
+              </section>
+              <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+                <p className="text-xs text-slate-500">Pass Rate</p>
+                <p className="mt-1 text-[28px] font-extrabold text-slate-900">{passRate}%</p>
+                <p className="mt-1 text-[10px] text-slate-400">students at or above 40%</p>
+              </section>
+            </div>
 
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-            <StatCard label="Total Students" value={data.students.length} />
-            <StatCard label="Subjects" value={data.subjects.length} />
-            <StatCard label="Class Average" value={`${data.classAverageOverallPct}%`} />
-            <StatCard label="Excellent Students" value={tierCounts["Excellent"] || 0} positive />
-          </div>
+            <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
+              <div className="at-risk-filter-inner">
+                <div className="at-risk-filter-title">
+                  <h3>Filters</h3>
+                  <p>Filter by average marks and sort.</p>
+                </div>
+                <div className="at-risk-filter-controls">
+                  <label>
+                    <span>Lower bound</span>
+                    <input
+                      type="number"
+                      min="0"
+                      max="40"
+                      value={draftLower}
+                      onChange={(e) => setDraftLower(Math.min(40, Math.max(0, Number(e.target.value))))}
+                    />
+                  </label>
+                  <label>
+                    <span>Upper bound</span>
+                    <input
+                      type="number"
+                      min="0"
+                      max="40"
+                      value={draftUpper}
+                      onChange={(e) => setDraftUpper(Math.min(40, Math.max(0, Number(e.target.value))))}
+                    />
+                  </label>
+                  <label>
+                    <span>Sort</span>
+                    <select
+                      value={draftSortDirection}
+                      onChange={(e) => setDraftSortDirection(e.target.value as SortDirection)}
+                    >
+                      <option value="none">No sort</option>
+                      <option value="desc">High to Low</option>
+                      <option value="asc">Low to High</option>
+                    </select>
+                  </label>
+                  <button type="button" onClick={applyFilters} className="at-risk-apply">Apply</button>
+                </div>
+              </div>
+            </section>
+
+            <div className="at-risk-layout mt-4">
+              <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between">
+                  <div>
+                    <h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3>
+                    <p className="text-[10px] text-slate-500 mt-0.5">
+                      Showing {filteredRows.length} of {rows.length} students.
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">
+                      6 Theory Subjects
+                    </span>
+                    <button type="button" onClick={resetFilter} className="text-[10px] font-semibold text-[#4a35b3]">
+                      Reset
+                    </button>
+                  </div>
+                </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-2 overflow-x-auto">
-              <h3 className="font-medium text-gray-900 mb-4">All Students</h3>
-              <div className="max-h-[600px] overflow-y-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="text-left text-gray-400 border-b border-gray-100">
-                      <th className="py-2 pr-3">Name</th>
-                      <th className="py-2 pr-3">Attendance</th>
-                      <th className="py-2 pr-3">Overall %</th>
-                      <th className="py-2">Grade</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {[...data.students]
-                      .sort((a, b) => b.overallPct - a.overallPct)
-                      .map((s) => (
-                        <tr key={s.enrollmentNo} className="border-b border-gray-50">
-                          <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{s.name}</td>
-                          <td className="py-2 pr-3 text-gray-500">{s.overallAttendance}%</td>
-                          <td className="py-2 pr-3">{s.overallPct}%</td>
-                          <td className="py-2">
-                            <GradeBadge grade={s.overallGrade} />
+                <div className="max-h-[560px] overflow-y-auto overflow-x-hidden">
+                  <table className="w-full table-fixed text-[10px] border-collapse">
+                    <colgroup>
+                      {sortDirection !== "none" && <col className="w-[5%]" />}
+                      <col className="w-[18%]" />
+                      {theorySubjects.map((subject) => <col key={subject.id} className="w-[7%]" />)}
+                      <col className="w-[9%]" />
+                      <col className="w-[9%]" />
+                      <col className="w-[8%]" />
+                      <col className="w-[12%]" />
+                    </colgroup>
+                    <thead className="sticky top-0 bg-white z-10">
+                      <tr className="border-b border-slate-200 text-slate-500">
+                        {sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}
+                        <th className="text-left px-2 py-2">Student</th>
+                        {theorySubjects.map((subject) => (
+                          <th key={subject.id} className="text-center px-1 py-2" title={subject.name}>
+                            {subject.code || subject.name}
+                          </th>
+                        ))}
+                        <th className="text-center px-1 py-2">Total</th>
+                        <th className="text-center px-1 py-2">Average</th>
+                        <th className="text-center px-1 py-2">%AGE</th>
+                        <th className="text-center px-1 py-2">Grade</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredRows.map((row, index) => (
+                        <tr
+                          key={row.enrollmentNo}
+                          className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"
+                        >
+                          {sortDirection !== "none" && (
+                            <td className="text-center px-1 py-2 text-slate-500 tabular-nums">{index + 1}</td>
+                          )}
+                          <td className="px-2 py-2 font-medium text-slate-800 truncate" title={row.name}>
+                            {row.name}
+                          </td>
+                          {row.subjects.map((subject) => (
+                            <td
+                              key={subject.id}
+                              className="text-center px-1 py-2 tabular-nums font-medium"
+                              style={{ color: TIER_COLORS[subject.grade] }}
+                              title={`${formatMark(subject.mark)}/${formatMark(subject.max)} · ${subject.grade}`}
+                            >
+                              {formatMark(subject.mark)}
+                            </td>
+                          ))}
+                          <td className="text-center px-1 py-2 font-semibold tabular-nums text-slate-900">
+                            {formatMark(row.total)}
+                          </td>
+                          <td
+                            className="text-center px-1 py-2 font-semibold tabular-nums"
+                            style={{ color: TIER_COLORS[row.tier] }}
+                            title={`Average out of ${formatMark(row.averageMax)}`}
+                          >
+                            {formatMark(row.average)}
+                          </td>
+                          <td
+                            className="text-center px-1 py-2 font-semibold tabular-nums"
+                            style={{ color: TIER_COLORS[row.tier] }}
+                          >
+                            {row.overallPct.toFixed(0)}%
+                          </td>
+                          <td className="text-center px-1 py-2">
+                            <span
+                              className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${tierClass(row.tier)}`}
+                            >
+                              {row.tier}
+                            </span>
                           </td>
                         </tr>
                       ))}
-                  </tbody>
-                </table>
-              </div>
-            </section>
+                    </tbody>
+                  </table>
+                </div>
+              </section>
 
-            <section className="bg-white rounded-2xl border border-gray-100 p-6">
-              <h3 className="font-medium text-gray-900 mb-4">Grade Distribution</h3>
-              <ResponsiveContainer width="100%" height={260}>
-                <BarChart
-                  data={["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name) => ({
-                    name,
-                    count: tierCounts[name] || 0,
-                  }))}
-                >
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                  <XAxis dataKey="name" fontSize={10} />
-                  <YAxis fontSize={12} allowDecimals={false} />
-                  <Tooltip />
-                  <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-                    {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((name, i) => (
-                      <Cell key={i} fill={TIER_COLORS[name]} />
-                    ))}
-                  </Bar>
-                </BarChart>
-              </ResponsiveContainer>
-            </section>
-          </div>
-        </>
-      )}
+              <aside className="at-risk-side-stack">
+                <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
+                  <h3 className="text-sm font-semibold text-slate-900">Distribution</h3>
+                  <p className="mt-0.5 text-[10px] text-slate-500">
+                    Overall performance across the six theory subjects.
+                  </p>
+                  <div className="mt-3 space-y-2">
+                    {["Excellent", "Good", "Needs Attention", "Critical Risk"].map((tier) => {
+                      const count = tierCounts[tier] || 0;
+                      const width = rows.length ? Math.max(2, (count / rows.length) * 100) : 0;
+                      return (
+                        <div key={tier}>
+                          <div className="flex items-center justify-between text-[10px] text-slate-600">
+                            <span>{tier}</span>
+                            <span>{count}</span>
+                          </div>
+                          <div className="mt-1 h-2 rounded-full bg-slate-100 overflow-hidden">
+                            <div
+                              className="h-full rounded-full"
+                              style={{ width: `${width}%`, backgroundColor: TIER_COLORS[tier] }}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </section>
+
+                <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                  <div className="px-3 py-2 border-b border-slate-100">
+                    <h3 className="text-sm font-semibold text-slate-900">Top Students</h3>
+                    <p className="text-[10px] text-slate-500 mt-0.5">Highest overall percentages.</p>
+                  </div>
+                  {topFive.map((row) => (
+                    <div
+                      key={row.enrollmentNo}
+                      className="px-3 py-2.5 flex items-center justify-between gap-3 border-b border-slate-100"
+                    >
+                      <div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div>
+                      <div className="text-sm font-medium" style={{ color: TIER_COLORS[row.tier] }}>
+                        {row.overallPct.toFixed(1)}%
+                      </div>
+                    </div>
+                  ))}
+                </section>
+              </aside>
+            </div>
+          </>
+        )}
+      </main>
     </div>
   );
 }
diff --git a/pages/section-analysis/[sectionId]/students.tsx b/pages/section-analysis/[sectionId]/students.tsx
index 06e9b5e..32f4689 100644
--- a/pages/section-analysis/[sectionId]/students.tsx
+++ b/pages/section-analysis/[sectionId]/students.tsx
@@ -1,37 +1,93 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
+import {
+  Award,
+  BarChart3,
+  CalendarCheck,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
 
 import AnalysisNav from "../../../components/AnalysisNav";
-import { RawDataButton, StatCard, GradeBadge } from "../../../components/AnalysisWidgets";
+import { RawDataButton } from "../../../components/AnalysisWidgets";
 
-interface OverallStudent {
+const SUBJECT_COUNT = 6;
+const SUBJECT_MAX = 40;
+const TOTAL_MAX = SUBJECT_COUNT * SUBJECT_MAX;
+
+const GRADE_ORDER = ["Excellent", "Good", "Needs Attention", "Critical Risk"] as const;
+type Grade = (typeof GRADE_ORDER)[number];
+
+const GRADE_TONE: Record<Grade, { text: string; bg: string; border: string; dot: string }> = {
+  Excellent: { text: "text-blue-700", bg: "bg-blue-50", border: "border-blue-100", dot: "bg-blue-500" },
+  Good: { text: "text-emerald-700", bg: "bg-emerald-50", border: "border-emerald-100", dot: "bg-emerald-500" },
+  "Needs Attention": { text: "text-amber-700", bg: "bg-amber-50", border: "border-amber-100", dot: "bg-amber-500" },
+  "Critical Risk": { text: "text-red-700", bg: "bg-red-50", border: "border-red-100", dot: "bg-red-500" },
+};
+
+interface SubjectScore {
+  subjectId: string;
+  code: string;
+  name: string;
+  attendance: number;
+  midsem1: number;
+  midsem2: number;
+  combined: number;
+  assignment?: { submitted: number; total: number; mark: number };
+  presentation?: { raw: number; mark: number };
+  basicInternal: number;
+  moderatedInternal: number;
+  basicMax: number;
+  grade: string;
+}
+
+interface Student {
   enrollmentNo: string;
   name: string;
   email: string;
   overallPct: number;
   overallAttendance: number;
   overallGrade: string;
-  subjects: {
-    subjectId: string;
-    code: string;
-    name: string;
-    attendance: number;
-    midsem1: number;
-    midsem2: number;
-    combined: number;
-    basicInternal: number;
-    moderatedInternal: number;
-    basicMax: number;
-    grade: string;
-  }[];
+  subjects: SubjectScore[];
 }
 
 interface OverallData {
   subjects: { id: string; name: string; code: string }[];
-  students: OverallStudent[];
+  students: Student[];
   classAverageOverallPct: number;
 }
 
+const formatNumber = (value: number) => (Number.isInteger(value) ? String(value) : value.toFixed(1));
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+function studentAverage(student: Student) {
+  const subjects = student.subjects.slice(0, SUBJECT_COUNT);
+  return subjects.length
+    ? subjects.reduce((sum, subject) => sum + (Number(subject.basicInternal) || 0), 0) / subjects.length
+    : 0;
+}
+
+function gradeFromAverage(average: number): Grade {
+  const pct = (average / SUBJECT_MAX) * 100;
+  if (pct >= 80) return "Excellent";
+  if (pct >= 60) return "Good";
+  if (pct >= 40) return "Needs Attention";
+  return "Critical Risk";
+}
+
+function GradePill({ grade, large = false }: { grade: Grade; large?: boolean }) {
+  const tone = GRADE_TONE[grade];
+  return (
+    <span className={`inline-flex items-center gap-1.5 rounded-full border ${tone.border} ${tone.bg} ${tone.text} ${large ? "px-3 py-1.5 text-xs" : "px-2.5 py-1 text-[10px]"} font-semibold`}>
+      <span className={`h-1.5 w-1.5 rounded-full ${tone.dot}`} />
+      {grade}
+    </span>
+  );
+}
+
 export default function SectionStudentReportPage() {
   const router = useRouter();
   const { sectionId } = router.query;
@@ -43,13 +99,14 @@ export default function SectionStudentReportPage() {
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [search, setSearch] = useState("");
-  const [selectedEnrollment, setSelectedEnrollment] = useState<string>("");
+  const [gradeFilter, setGradeFilter] = useState<Grade | "All">("All");
+  const [selectedEnrollment, setSelectedEnrollment] = useState("");
 
   async function loadAnalysis(sync = false) {
-    if (!sectionId || typeof sectionId !== "string") return;
-    if (sync) setSyncing(true);
-    else setLoading(true);
+    if (typeof sectionId !== "string") return;
+    sync ? setSyncing(true) : setLoading(true);
     setError("");
+
     try {
       const res = await fetch(`/api/analysis/section/${sectionId}/overall${sync ? "?sync=1" : ""}`);
       const json = await res.json();
@@ -57,10 +114,22 @@ export default function SectionStudentReportPage() {
         setError(json.detail ? `${json.error}: ${json.detail}` : json.error || "Failed to load student report");
         return;
       }
+
+      const needsDetailedData = !sync && json.data?.students?.some((student: Student) =>
+        student.subjects?.some((subject) => !subject.assignment || !subject.presentation)
+      );
+
+      if (needsDetailedData) {
+        await loadAnalysis(true);
+        return;
+      }
+
       setData(json.data);
-      setComputedAt(json.computedAt);
+      setComputedAt(json.computedAt || "");
       setSheetId(json.sheetId || null);
-      if (json.data?.students?.[0]) setSelectedEnrollment(json.data.students[0].enrollmentNo);
+      if (json.data?.students?.length && !selectedEnrollment) {
+        setSelectedEnrollment(json.data.students[0].enrollmentNo);
+      }
     } catch (e: any) {
       setError(e.message || "Failed to load student report");
     } finally {
@@ -76,126 +145,301 @@ export default function SectionStudentReportPage() {
 
   const students = data?.students || [];
 
-  const filteredList = useMemo(() => {
-    if (!search.trim()) return students;
-    const q = search.trim().toLowerCase();
-    return students.filter((s) => s.name.toLowerCase().includes(q) || s.enrollmentNo.includes(q));
-  }, [students, search]);
+  const studentsWithGrades = useMemo(
+    () => students.map((student) => ({
+      ...student,
+      reportAverage: studentAverage(student),
+      reportGrade: gradeFromAverage(studentAverage(student)),
+    })),
+    [students]
+  );
+
+  const classGradeCounts = useMemo(() => {
+    return GRADE_ORDER.reduce((acc, grade) => {
+      acc[grade] = studentsWithGrades.filter((student) => student.reportGrade === grade).length;
+      return acc;
+    }, {} as Record<Grade, number>);
+  }, [studentsWithGrades]);
+
+  const filteredStudents = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return studentsWithGrades.filter((student) => {
+      const matchesSearch = !query || student.name.toLowerCase().includes(query) || student.enrollmentNo.includes(query);
+      const matchesGrade = gradeFilter === "All" || student.reportGrade === gradeFilter;
+      return matchesSearch && matchesGrade;
+    });
+  }, [studentsWithGrades, search, gradeFilter]);
+
+  useEffect(() => {
+    if (!selectedEnrollment && students[0]) setSelectedEnrollment(students[0].enrollmentNo);
+    if (selectedEnrollment && !students.some((student) => student.enrollmentNo === selectedEnrollment) && students[0]) {
+      setSelectedEnrollment(students[0].enrollmentNo);
+    }
+  }, [students, selectedEnrollment]);
+
+  const selected = studentsWithGrades.find((student) => student.enrollmentNo === selectedEnrollment) || filteredStudents[0];
+
+  const studentStats = useMemo(() => {
+    if (!selected) return null;
+
+    const subjects = selected.subjects.slice(0, SUBJECT_COUNT).map((subject) => {
+      const assignment = subject.assignment?.mark ?? 0;
+      const presentation = subject.presentation?.mark ?? 0;
+      const attendance = clamp(((Number(subject.attendance) || 0) / 100) * 10, 0, 10);
+      const midsem1 = clamp(((Number(subject.midsem1) || 0) / 30) * 10, 0, 10);
+      const midsem2 = clamp(((Number(subject.midsem2) || 0) / 30) * 10, 0, 10);
+      const basicInternal = Number(subject.basicInternal) || assignment + presentation + attendance + midsem1 + midsem2;
+      const moderatedInternal = Number(subject.moderatedInternal);
+
+      return {
+        ...subject,
+        assignment,
+        presentation,
+        attendanceMark: attendance,
+        midsem1Mark: midsem1,
+        midsem2Mark: midsem2,
+        basicInternal,
+        moderatedInternal: Number.isFinite(moderatedInternal) ? moderatedInternal : basicInternal,
+        grade: gradeFromAverage(basicInternal),
+      };
+    });
 
-  const selected = students.find((s) => s.enrollmentNo === selectedEnrollment);
+    const total = subjects.reduce((sum, subject) => sum + subject.basicInternal, 0);
+    const average = subjects.length ? total / subjects.length : 0;
+
+    const ranked = [...studentsWithGrades].sort(
+      (a, b) => b.reportAverage - a.reportAverage || a.name.localeCompare(b.name)
+    );
+    const rankIndex = Math.max(0, ranked.findIndex((item) => item.enrollmentNo === selected.enrollmentNo));
+
+    const highest = [...subjects].sort((a, b) => b.basicInternal - a.basicInternal)[0];
+    const lowest = [...subjects].sort((a, b) => a.basicInternal - b.basicInternal)[0];
+
+    return {
+      subjects,
+      total,
+      average,
+      averagePct: (average / SUBJECT_MAX) * 100,
+      rank: rankIndex + 1,
+      highest,
+      lowest,
+      grade: gradeFromAverage(average),
+    };
+  }, [selected, studentsWithGrades]);
+
+  const navigateStudent = (direction: -1 | 1) => {
+    if (!filteredStudents.length || !selected) return;
+    const index = filteredStudents.findIndex((student) => student.enrollmentNo === selected.enrollmentNo);
+    const nextIndex = Math.min(filteredStudents.length - 1, Math.max(0, index + direction));
+    setSelectedEnrollment(filteredStudents[nextIndex].enrollmentNo);
+  };
 
   return (
-    <div className="min-h-screen max-w-[1700px] mx-auto px-8 py-10">
-      <div className="flex items-start justify-between mb-6">
+    <div className="min-h-screen max-w-[1900px] mx-auto px-6 lg:px-8 py-7 text-slate-900">
+      <div className="flex items-start justify-between mb-5">
         <div>
-          <h1 className="text-lg font-semibold text-gray-900">Class / Section Analysis</h1>
-          {computedAt && <p className="text-xs text-gray-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
+          <h1 className="text-xl lg:text-2xl font-semibold tracking-tight">Class / Section Analysis</h1>
+          {computedAt && <p className="text-xs text-slate-400 mt-1">Last synced {new Date(computedAt).toLocaleString()}</p>}
         </div>
         <div className="flex items-center gap-2">
           <RawDataButton sheetId={sheetId} />
-          <button onClick={() => loadAnalysis(true)} disabled={syncing} className="text-sm bg-gray-900 text-white rounded-lg px-4 py-2 disabled:opacity-50">
+          <button
+            onClick={() => loadAnalysis(true)}
+            disabled={syncing}
+            className="inline-flex items-center gap-2 rounded-xl bg-[#3f2a8f] px-4 py-2.5 text-sm font-medium text-white shadow-[0_8px_22px_rgba(63,42,143,.18)] disabled:opacity-60"
+          >
+            <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
             {syncing ? "Syncing..." : "Sync now"}
           </button>
         </div>
       </div>
 
       {typeof sectionId === "string" && <AnalysisNav sectionId={sectionId} />}
-
-      {error && <div className="bg-red-50 border border-red-100 text-red-700 text-sm rounded-lg p-4 mb-6">{error}</div>}
-      {loading && !data && <div className="text-sm text-gray-500 py-10">Loading student report...</div>}
+      {error && <div className="mt-5 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">{error}</div>}
+      {loading && !data && <div className="py-14 text-center text-sm text-slate-500">Loading student report...</div>}
 
       {data && (
         <>
-          <div className="mb-6">
-            <h2 className="text-xl font-semibold text-gray-900">Student Report</h2>
-            <p className="text-sm text-gray-500 mt-1">Full report card across all {data.subjects.length} subjects for one student.</p>
+          <div className="mt-5 mb-5">
+            <h2 className="text-xl font-semibold">Student Report</h2>
+            <p className="text-sm text-slate-500 mt-1">Individual performance report across {Math.min(SUBJECT_COUNT, data.subjects.length)} theory subjects.</p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-1">
-              <input
-                type="text"
-                placeholder="Search by name or enrollment no."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm mb-4"
-              />
-              <div className="max-h-[600px] overflow-y-auto space-y-1">
-                {filteredList.map((s) => (
+          <div className="grid grid-cols-1 xl:grid-cols-[290px_minmax(0,1fr)] gap-4 items-start">
+            <aside className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden xl:sticky xl:top-5">
+              <div className="p-4 border-b border-slate-100">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="font-semibold">Students</h3>
+                  <span className="text-xs text-slate-400">{students.length}</span>
+                </div>
+                <div>
+                  <input
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Search by name or enrollment no."
+                    className="w-full rounded-lg border border-slate-200 px-3 py-2.5 text-xs outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                  />
+                </div>
+                <div className="flex gap-1.5 mt-3 overflow-x-auto pb-1">
+                  <FilterPill active={gradeFilter === "All"} onClick={() => setGradeFilter("All")} label={`All ${students.length}`} />
+                  {GRADE_ORDER.map((grade) => (
+                    <FilterPill
+                      key={grade}
+                      active={gradeFilter === grade}
+                      onClick={() => setGradeFilter(grade)}
+                      label={`${grade} ${classGradeCounts[grade] || 0}`}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div className="max-h-[650px] overflow-y-auto p-2">
+                {filteredStudents.map((student) => (
                   <button
-                    key={s.enrollmentNo}
-                    onClick={() => setSelectedEnrollment(s.enrollmentNo)}
-                    className={`w-full text-left text-sm px-3 py-2 rounded-lg ${
-                      s.enrollmentNo === selectedEnrollment ? "bg-gray-900 text-white" : "hover:bg-gray-50 text-gray-700"
-                    }`}
+                    key={student.enrollmentNo}
+                    onClick={() => setSelectedEnrollment(student.enrollmentNo)}
+                    className={`w-full rounded-xl px-3 py-3 text-left transition ${student.enrollmentNo === selected?.enrollmentNo ? "bg-[#4a32a0] text-white shadow-sm" : "hover:bg-slate-50 text-slate-700"}`}
                   >
-                    {s.name}
-                    <span className={`block text-xs ${s.enrollmentNo === selectedEnrollment ? "text-gray-300" : "text-gray-400"}`}>
-                      {s.enrollmentNo} · {s.overallGrade}
-                    </span>
+                    <div className="flex items-center gap-3">
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-xs font-semibold">{student.name}</span>
+                        <span className={`block text-[10px] mt-1 ${student.enrollmentNo === selected?.enrollmentNo ? "text-violet-100" : "text-slate-400"}`}>{student.enrollmentNo}</span>
+                      </span>
+                      <GradePill grade={student.reportGrade} />
+                    </div>
                   </button>
                 ))}
-                {filteredList.length === 0 && <p className="text-sm text-gray-400 py-4 text-center">No matches.</p>}
+                {!filteredStudents.length && <p className="py-10 text-center text-xs text-slate-400">No students match the current filters.</p>}
+              </div>
+              <div className="flex items-center justify-center gap-2 border-t border-slate-100 p-3">
+                <button onClick={() => navigateStudent(-1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50"><ChevronLeft size={15} /></button>
+                <span className="text-[10px] text-slate-400">{filteredStudents.length ? "Student list" : "No results"}</span>
+                <button onClick={() => navigateStudent(1)} className="rounded-lg border border-slate-200 p-1.5 text-slate-500 hover:bg-slate-50"><ChevronRight size={15} /></button>
               </div>
-            </section>
+            </aside>
 
-            <section className="bg-white rounded-2xl border border-gray-100 p-6 lg:col-span-2">
-              {!selected && <p className="text-sm text-gray-400">Select a student to see their report card.</p>}
-              {selected && (
-                <div>
-                  <div className="flex items-center justify-between mb-1">
-                    <h3 className="text-lg font-semibold text-gray-900">{selected.name}</h3>
-                    <GradeBadge grade={selected.overallGrade} />
-                  </div>
-                  <p className="text-sm text-gray-400 mb-6">
-                    {selected.enrollmentNo} · {selected.email || "no email on file"}
-                  </p>
-
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
-                    <StatCard label="Overall Attendance" value={`${selected.overallAttendance}%`} />
-                    <StatCard label="Overall Internal %" value={`${selected.overallPct}%`} />
-                    <StatCard label="Overall Grade" value={selected.overallGrade} />
+            {selected && studentStats && (
+              <main className="min-w-0 space-y-4">
+                <section className="rounded-2xl border border-slate-200 bg-white p-5 lg:p-6 shadow-sm">
+                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
+                    <div className="flex items-center gap-4 min-w-0">
+                      <div className="grid h-14 w-14 shrink-0 place-items-center rounded-full bg-violet-100 text-lg font-semibold text-violet-700">
+                        {selected.name.split(/\s+/).map((part) => part[0]).slice(0, 2).join("").toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <h3 className="text-xl font-semibold truncate">{selected.name}</h3>
+                        <p className="text-xs text-slate-400 mt-1 truncate">Student report · {Math.min(SUBJECT_COUNT, selected.subjects.length)} theory subjects</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-6 lg:gap-8">
+                      <div className="text-right">
+                        <GradePill grade={studentStats.grade} large />
+                        <p className="text-[10px] text-slate-400 mt-2">Rank by average</p>
+                        <p className="text-sm font-semibold">{studentStats.rank} / {students.length}</p>
+                      </div>
+                    </div>
                   </div>
+                </section>
 
-                  <h4 className="text-sm font-medium text-gray-900 mb-3">Per-Subject Breakdown</h4>
+                <section className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3">
+                  <Metric icon={<BarChart3 size={17} />} label="Average" value={`${formatNumber(studentStats.average)} / 40`} sub={`${studentStats.averagePct.toFixed(1)}%`} />
+                  <Metric icon={<Award size={17} />} label="Total" value={`${formatNumber(studentStats.total)} / ${TOTAL_MAX}`} sub="6 subjects × 40" />
+                  <Metric icon={<TrendingUp size={17} />} label="Highest Subject" value={studentStats.highest ? formatNumber(studentStats.highest.basicInternal) : "—"} sub={studentStats.highest?.name || "—"} />
+                  <Metric icon={<TrendingDown size={17} />} label="Lowest Subject" value={studentStats.lowest ? formatNumber(studentStats.lowest.basicInternal) : "—"} sub={studentStats.lowest?.name || "—"} />
+                  <Metric icon={<CalendarCheck size={17} />} label="Overall Attendance" value={`${selected.overallAttendance}%`} sub="Current attendance" />
+                </section>
+
+                <section className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+                  <div className="px-5 py-4 border-b border-slate-100">
+                    <h3 className="font-semibold">Subject Performance <span className="text-xs font-normal text-slate-400">(Theory Subjects)</span></h3>
+                    <p className="text-[10px] text-slate-400 mt-1">Internal marks distribution for each subject. Every subject contributes 40 marks.</p>
+                  </div>
                   <div className="overflow-x-auto">
-                    <table className="w-full text-sm">
+                    <table className="w-full min-w-[1100px] text-xs table-fixed">
+                      <colgroup>
+                        <col className="w-[22%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[9%]" />
+                        <col className="w-[11%]" />
+                        <col className="w-[12%]" />
+                        <col className="w-[10%]" />
+                      </colgroup>
                       <thead>
-                        <tr className="text-left text-gray-400 border-b border-gray-100">
-                          <th className="py-2 pr-3">Subject</th>
-                          <th className="py-2 pr-3">Attendance</th>
-                          <th className="py-2 pr-3">Midsem 1</th>
-                          <th className="py-2 pr-3">Midsem 2</th>
-                          <th className="py-2 pr-3">Combined</th>
-                          <th className="py-2 pr-3">Internal (Basic)</th>
-                          <th className="py-2">Grade</th>
+                        <tr className="border-b border-slate-100 bg-slate-50/60 text-[10px] text-slate-500">
+                          <th className="px-5 py-3 text-left font-semibold">Subject</th>
+                          <th className="px-2 py-3 text-center font-semibold">Assignment / 5</th>
+                          <th className="px-2 py-3 text-center font-semibold">Presentation / 5</th>
+                          <th className="px-2 py-3 text-center font-semibold">Attendance / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Midsem 1 / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Midsem 2 / 10</th>
+                          <th className="px-2 py-3 text-center font-semibold">Basic Internal / 40</th>
+                          <th className="px-2 py-3 text-center font-semibold">Moderated Internal / 40</th>
+                          <th className="px-2 py-3 text-center font-semibold">Grade</th>
                         </tr>
                       </thead>
                       <tbody>
-                        {selected.subjects.map((sub) => (
-                          <tr key={sub.subjectId} className="border-b border-gray-50">
-                            <td className="py-2 pr-3 text-gray-900 whitespace-nowrap">{sub.name}</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.attendance}%</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.midsem1}</td>
-                            <td className="py-2 pr-3 text-gray-500">{sub.midsem2}</td>
-                            <td className="py-2 pr-3">{sub.combined}</td>
-                            <td className="py-2 pr-3">
-                              {sub.basicInternal}/{sub.basicMax}
-                            </td>
-                            <td className="py-2">
-                              <GradeBadge grade={sub.grade} />
-                            </td>
+                        {studentStats.subjects.map((subject) => (
+                          <tr key={subject.subjectId} className="border-b border-slate-50 last:border-0 hover:bg-slate-50/50">
+                            <td className="px-5 py-3.5 font-medium text-slate-800 leading-snug">{subject.name}</td>
+                            <MarkCell value={subject.assignment} max={5} />
+                            <MarkCell value={subject.presentation} max={5} />
+                            <MarkCell value={subject.attendanceMark} max={10} />
+                            <MarkCell value={subject.midsem1Mark} max={10} />
+                            <MarkCell value={subject.midsem2Mark} max={10} />
+                            <td className="px-2 py-3.5 text-center tabular-nums font-semibold text-slate-800">{formatNumber(subject.basicInternal)} / 40</td>
+                            <td className="px-2 py-3.5 text-center tabular-nums font-semibold text-violet-700">{formatNumber(subject.moderatedInternal)} / 40</td>
+                            <td className="px-2 py-3.5 text-center"><GradePill grade={subject.grade} /></td>
                           </tr>
                         ))}
                       </tbody>
                     </table>
                   </div>
-                </div>
-              )}
-            </section>
+                  <div className="px-5 py-3 border-t border-slate-100 text-[9px] text-slate-400">
+                    Assignment, presentation, attendance, Midsem 1 and Midsem 2 are shown as their weighted contribution to the 40-mark internal total. Moderated Internal is shown separately from the basic internal marks.
+                  </div>
+                </section>
+              </main>
+            )}
           </div>
         </>
       )}
     </div>
   );
 }
+
+function FilterPill({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium ${active ? "border-violet-200 bg-violet-50 text-violet-700" : "border-slate-200 text-slate-500 hover:bg-slate-50"}`}
+    >
+      {label}
+    </button>
+  );
+}
+
+function MarkCell({ value, max }: { value: number; max: number }) {
+  return (
+    <td className="px-2 py-3.5 text-center tabular-nums">
+      <span className="font-semibold text-slate-800">{formatNumber(value)}</span>
+      <span className="text-[9px] text-slate-400"> / {max}</span>
+    </td>
+  );
+}
+
+function Metric({ icon, label, value, sub }: { icon: React.ReactNode; label: string; value: string; sub: string }) {
+  return (
+    <div className="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm min-w-0 text-center">
+      <div className="flex flex-col items-center justify-center gap-2 text-slate-500">
+        <span className="grid h-8 w-8 place-items-center rounded-lg bg-violet-50 text-violet-600">{icon}</span>
+        <span className="text-[10px] font-medium leading-tight">{label}</span>
+      </div>
+      <p className="text-lg font-semibold mt-3 truncate">{value}</p>
+      <p className="text-[10px] text-slate-400 mt-1 truncate">{sub}</p>
+    </div>
+  );
+}
diff --git a/pages/subject-analysis/[subjectId]/academic.tsx b/pages/subject-analysis/[subjectId]/academic.tsx
index 36e2e65..5e1225c 100644
--- a/pages/subject-analysis/[subjectId]/academic.tsx
+++ b/pages/subject-analysis/[subjectId]/academic.tsx
@@ -16,7 +16,7 @@ type SummarySort = "none" | "desc" | "asc";
 
 const MAX = 30;
 const TIERS: Tier[] = ["Excellent", "Good", "Needs Attention", "Critical Risk"];
-const COLORS: Record<Tier, string> = { Excellent: "#15966a", Good: "#4d75d0", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
+const COLORS: Record<Tier, string> = { Excellent: "#2563eb", Good: "#15966a", "Needs Attention": "#f59e0b", "Critical Risk": "#ef4444" };
 const round1 = (n: number) => Math.round(n * 10) / 10;
 const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 
@@ -59,11 +59,18 @@ export default function SubjectAcademicPage() {
   const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
   const [combinedSort, setCombinedSort] = useState<CombinedSort>("combined");
   const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [combinedSortDraft, setCombinedSortDraft] = useState<CombinedSort>("combined");
+  const [sortOrderDraft, setSortOrderDraft] = useState<SortOrder>("desc");
   const [summaryExam, setSummaryExam] = useState<SummaryExam>("combined");
   const [summaryTier, setSummaryTier] = useState<Tier | "all">("all");
   const [summaryLower, setSummaryLower] = useState("0");
   const [summaryUpper, setSummaryUpper] = useState("30");
   const [summarySort, setSummarySort] = useState<SummarySort>("none");
+  const [summaryExamDraft, setSummaryExamDraft] = useState<SummaryExam>("combined");
+  const [summaryTierDraft, setSummaryTierDraft] = useState<Tier | "all">("all");
+  const [summaryLowerDraft, setSummaryLowerDraft] = useState("0");
+  const [summaryUpperDraft, setSummaryUpperDraft] = useState("30");
+  const [summarySortDraft, setSummarySortDraft] = useState<SummarySort>("none");
 
   async function loadAnalysis(sync = false) {
     if (!subjectId || typeof subjectId !== "string") return;
@@ -73,15 +80,9 @@ export default function SubjectAcademicPage() {
       const r = await fetch(`/api/analysis/subject/${subjectId}${sync ? "?sync=1" : ""}`);
       const j = await r.json();
       if (!r.ok) throw new Error(j.detail ? `${j.error}: ${j.detail}` : j.error || "Failed to load academic analysis");
-      setData(j.data);
-      setComputedAt(j.computedAt || "");
-      setSheetId(j.sheetId || null);
-    } catch (e: any) {
-      setError(e.message || "Failed to load academic analysis");
-    } finally {
-      setLoading(false);
-      setSyncing(false);
-    }
+      setData(j.data); setComputedAt(j.computedAt || ""); setSheetId(j.sheetId || null);
+    } catch (e: any) { setError(e.message || "Failed to load academic analysis"); }
+    finally { setLoading(false); setSyncing(false); }
   }
 
   useEffect(() => { loadAnalysis(); }, [subjectId]);
@@ -89,280 +90,101 @@ export default function SubjectAcademicPage() {
 
   const students = data?.students || [];
   const statsFor = (exam: "midsem1" | "midsem2") => {
-    const rows = students.map((s: any) => ({ enrollmentNo: s.enrollmentNo, name: s.name, marks: valueFor(s, exam) }));
-    const marks = rows.map((r) => r.marks);
+    const baseRows = students.map((s: any, index: number) => ({ sno: index + 1, enrollmentNo: s.enrollmentNo, name: s.name, marks: valueFor(s, exam) }));
+    const rankByEnrollment = new Map<string, number>();
+    [...baseRows].sort((a, b) => b.marks - a.marks || a.name.localeCompare(b.name)).forEach((row, index, sorted) => {
+      const previous = index > 0 ? sorted[index - 1].marks : null;
+      rankByEnrollment.set(row.enrollmentNo, previous === row.marks ? (rankByEnrollment.get(sorted[index - 1].enrollmentNo) || index + 1) : index + 1);
+    });
+    const rows = baseRows.map(row => ({ ...row, rank: rankByEnrollment.get(row.enrollmentNo) || 0 }));
+    const marks = rows.map(r => r.marks);
     const highest = marks.length ? Math.max(...marks) : 0;
     const counts = TIERS.reduce((r, t) => ({ ...r, [t]: 0 }), {} as Record<Tier, number>);
-    rows.forEach((r) => counts[tierFor(r.marks)]++);
-    return {
-      rows,
-      average: marks.length ? round1(marks.reduce((a, b) => a + b, 0) / marks.length) : 0,
-      median: median(marks),
-      highest,
-      highestNames: rows.filter((r) => r.marks === highest).map((r) => r.name),
-      passRate: marks.length ? Math.round(rows.filter((r) => r.marks >= 12).length / marks.length * 100) : 0,
-      counts,
-      sorted: [...rows].sort((a, b) => b.marks - a.marks),
-    };
+    rows.forEach(r => counts[tierFor(r.marks)]++);
+    return { rows, average: marks.length ? round1(marks.reduce((a,b) => a+b, 0) / marks.length) : 0, median: median(marks), highest, highestNames: rows.filter(r => r.marks === highest).map(r => r.name), passRate: marks.length ? Math.round(rows.filter(r => r.marks >= 12).length / marks.length * 100) : 0, counts, sorted: [...rows].sort((a,b) => b.marks-a.marks) };
   };
 
   const midsem1 = useMemo(() => statsFor("midsem1"), [students]);
   const midsem2 = useMemo(() => statsFor("midsem2"), [students]);
-  const combinedRows = useMemo(() => students.map((s: any) => ({
-    enrollmentNo: s.enrollmentNo,
-    name: s.name,
-    first: valueFor(s, "midsem1"),
-    second: valueFor(s, "midsem2"),
-    combined: valueFor(s, "combined"),
-    max: valueFor(s, "max"),
-  })), [students]);
-
-  const combinedCounts = useMemo(() => {
-    const r = TIERS.reduce((a, t) => ({ ...a, [t]: 0 }), {} as Record<Tier, number>);
-    combinedRows.forEach((row) => r[tierFor(row.combined)]++);
-    return r;
-  }, [combinedRows]);
-
+  const combinedRows = useMemo(() => students.map((s:any, index:number) => ({ sno:index+1, enrollmentNo:s.enrollmentNo, name:s.name, first:valueFor(s,"midsem1"), second:valueFor(s,"midsem2"), combined:valueFor(s,"combined"), max:valueFor(s,"max") })), [students]);
+  const combinedCounts = useMemo(() => { const r=TIERS.reduce((a,t)=>({...a,[t]:0}),{} as Record<Tier,number>); combinedRows.forEach(row=>r[tierFor(row.combined)]++); return r; }, [combinedRows]);
   const activeStats = view === "midsem2" ? midsem2 : midsem1;
   const activeLabel = view === "midsem2" ? "Midsem 2" : "Midsem 1";
-  const activePie = TIERS.map((name) => ({ name, value: activeStats.counts[name], color: COLORS[name] }));
-  const displayedRows = selectedTier ? activeStats.rows.filter((r) => tierFor(r.marks) === selectedTier) : activeStats.rows;
-
-  const filteredCombinedRows = useMemo(
-    () => selectedTier ? combinedRows.filter((row) => tierFor(row.combined) === selectedTier) : combinedRows,
-    [combinedRows, selectedTier]
-  );
-
+  const activePie = TIERS.map(name => ({name,value:activeStats.counts[name],color:COLORS[name]}));
+  const displayedRows = selectedTier ? activeStats.rows.filter(r => tierFor(r.marks) === selectedTier) : activeStats.rows;
+  const filteredCombinedRows = useMemo(() => selectedTier ? combinedRows.filter(row => tierFor(row.combined) === selectedTier) : combinedRows, [combinedRows, selectedTier]);
   const sortedCombinedRows = useMemo(() => {
     if (sortOrder === "none") return [...filteredCombinedRows];
-    const getValue = (row: typeof combinedRows[number]) => {
-      if (combinedSort === "midsem1") return row.first;
-      if (combinedSort === "midsem2") return row.second;
-      if (combinedSort === "max") return row.max;
-      return row.combined;
-    };
-    return [...filteredCombinedRows].sort((a, b) => {
-      const diff = getValue(a) - getValue(b);
-      if (diff !== 0) return sortOrder === "asc" ? diff : -diff;
-      return a.name.localeCompare(b.name);
-    });
+    const getValue = (row:any) => combinedSort === "midsem1" ? row.first : combinedSort === "midsem2" ? row.second : combinedSort === "max" ? row.max : row.combined;
+    return [...filteredCombinedRows].sort((a,b) => { const diff=getValue(a)-getValue(b); return diff ? (sortOrder === "asc" ? diff : -diff) : a.name.localeCompare(b.name); });
   }, [filteredCombinedRows, combinedSort, sortOrder]);
-
-  const combinedRankRows = useMemo(() => [...combinedRows].sort((a, b) => b.combined - a.combined), [combinedRows]);
-  const combinedAverage = combinedRows.length ? round1(combinedRows.reduce((sum, row) => sum + row.combined, 0) / combinedRows.length) : 0;
-  const combinedHighest = combinedRows.length ? Math.max(...combinedRows.map((row) => row.combined)) : 0;
-  const combinedHighestNames = combinedRows.filter((row) => row.combined === combinedHighest).map((row) => row.name);
-
-  const summaryRows = useMemo(() => combinedRows.map((row) => {
-    const marks = summaryExam === "midsem1" ? row.first : summaryExam === "midsem2" ? row.second : summaryExam === "max" ? row.max : row.combined;
-    return { ...row, marks, tier: tierFor(marks), change: round1(row.second - row.first) };
-  }).filter((row) => {
-    const lower = Number(summaryLower);
-    const upper = Number(summaryUpper);
-    return row.marks >= (Number.isFinite(lower) ? lower : 0) && row.marks <= (Number.isFinite(upper) ? upper : MAX) && (summaryTier === "all" || row.tier === summaryTier);
-  }).sort((a, b) => {
-    if (summarySort === "none") return 0;
-    return summarySort === "desc" ? b.marks - a.marks : a.marks - b.marks;
-  }), [combinedRows, summaryExam, summaryTier, summaryLower, summaryUpper, summarySort]);
-
-  const summaryAverage = combinedRows.length ? round1(combinedRows.reduce((sum, row) => sum + row.combined, 0) / combinedRows.length) : 0;
-  const summaryPassRate = combinedRows.length ? Math.round(combinedRows.filter((row) => row.combined >= 12).length / combinedRows.length * 100) : 0;
-  const midsem1Average = midsem1.average;
-  const midsem2Average = midsem2.average;
-  const increases = [...combinedRows].map((row) => ({ ...row, change: round1(row.second - row.first) })).filter((row) => row.change > 0).sort((a, b) => b.change - a.change).slice(0, 5);
-  const decreases = [...combinedRows].map((row) => ({ ...row, change: round1(row.second - row.first) })).filter((row) => row.change < 0).sort((a, b) => a.change - b.change).slice(0, 5);
+  const combinedRankRows = useMemo(() => [...combinedRows].sort((a,b)=>b.combined-a.combined), [combinedRows]);
+  const combinedAverage = combinedRows.length ? round1(combinedRows.reduce((s,r)=>s+r.combined,0)/combinedRows.length) : 0;
+  const combinedHighest = combinedRows.length ? Math.max(...combinedRows.map(r=>r.combined)) : 0;
+  const combinedHighestNames = combinedRows.filter(r=>r.combined===combinedHighest).map(r=>r.name);
+  const summaryRows = useMemo(() => combinedRows.map(row => { const marks=summaryExam === "midsem1" ? row.first : summaryExam === "midsem2" ? row.second : summaryExam === "max" ? row.max : row.combined; return {...row,marks,tier:tierFor(marks),change:round1(row.second-row.first)}; }).filter(row => { const lower=Number(summaryLower), upper=Number(summaryUpper); return row.marks >= (Number.isFinite(lower)?lower:0) && row.marks <= (Number.isFinite(upper)?upper:MAX) && (summaryTier === "all" || row.tier === summaryTier); }).sort((a,b)=>summarySort === "none" ? 0 : summarySort === "desc" ? b.marks-a.marks : a.marks-b.marks), [combinedRows,summaryExam,summaryTier,summaryLower,summaryUpper,summarySort]);
+  const summaryAverage = combinedRows.length ? round1(combinedRows.reduce((s,r)=>s+r.combined,0)/combinedRows.length) : 0;
+  const summaryPassRate = combinedRows.length ? Math.round(combinedRows.filter(r=>r.combined>=12).length/combinedRows.length*100) : 0;
+  const increases = [...combinedRows].map(r=>({...r,change:round1(r.second-r.first)})).filter(r=>r.change>0).sort((a,b)=>b.change-a.change).slice(0,5);
+  const decreases = [...combinedRows].map(r=>({...r,change:round1(r.second-r.first)})).filter(r=>r.change<0).sort((a,b)=>a.change-b.change).slice(0,5);
+  const applyCombinedControls=()=>{setCombinedSort(combinedSortDraft);setSortOrder(sortOrderDraft);};
+  const resetSummaryControls=()=>{setSummaryExam("combined");setSummaryTier("all");setSummaryLower("0");setSummaryUpper("30");setSummarySort("none");setSummaryExamDraft("combined");setSummaryTierDraft("all");setSummaryLowerDraft("0");setSummaryUpperDraft("30");setSummarySortDraft("none");};
+  const applySummaryControls=()=>{setSummaryExam(summaryExamDraft);setSummaryTier(summaryTierDraft);setSummaryLower(summaryLowerDraft);setSummaryUpper(summaryUpperDraft);setSummarySort(summarySortDraft);};
 
   return <div className="analysis-layout">
-    <aside className="analysis-sidebar">
-      <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
-      <nav className="analysis-side-nav">
-        <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
-        <a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/academic` : "#"}><GraduationCap size={18} />Subject Analysis</a>
-      </nav>
-      <RawDataButton sheetId={sheetId} />
-      <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
-    </aside>
-
+    <aside className="analysis-sidebar"><div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18}/></span><span>ClassPulse</span></div><nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18}/>Dashboard</a><a href="/classes"><BookOpen size={18}/>Class Analysis</a><a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/academic` : "#"}><GraduationCap size={18}/>Subject Analysis</a></nav><RawDataButton sheetId={sheetId}/><div className="analysis-side-footer">ClassPulse Teacher Portal</div></aside>
     <main className="analysis-page">
-      <header className="analysis-topbar">
-        <div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
-        <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
-      </header>
-
-      {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId} />}
-      <div className="analysis-view-switch">
-        {([["midsem1", "Midsem 1"], ["midsem2", "Midsem 2"], ["combined", "Combined"], ["summary", "Summary"]] as [AcademicView, string][]).map(([k, l]) => <button key={k} className={view === k ? "is-active" : ""} onClick={() => setView(k)}>{l}</button>)}
-      </div>
-
-      {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
-      {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading academic analysis...</div>}
-
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={()=>loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing?"animate-spin":""}/>{syncing?"Syncing...":"Sync now"}</button></div></header>
+      {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId}/>}<div className="analysis-view-switch">{([["midsem1","Midsem 1"],["midsem2","Midsem 2"],["combined","Combined"],["summary","Summary"]] as [AcademicView,string][]).map(([k,l])=><button key={k} className={view===k?"is-active":""} onClick={()=>setView(k)}>{l}</button>)}</div>
+      {error && <div className="analysis-panel" style={{padding:14,marginBottom:16,color:"#b42318"}}>{error}</div>}{loading&&!data&&<div style={{padding:40,color:"#667085",fontSize:13}}>Loading academic analysis...</div>}
       {data && (view === "midsem1" || view === "midsem2") && <>
-        <section className="analysis-hero">
-          <div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>Raw Midsem marks out of 30, class statistics, and performance tiers.</p></div>
-          <Metric label="Class Average" value={activeStats.average} detail="out of 30 marks" />
-          <Metric label="Class Median" value={activeStats.median} detail="middle class score" />
-          <Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students scoring 12 or more" />
-        </section>
-        <section className="analysis-content-grid academic-content-grid">
-          <section className="analysis-panel analysis-table-panel">
-            <div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Pass mark: 12/30 (40%){selectedTier ? ` · Filtered: ${selectedTier}` : ""}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{displayedRows.length} Students</span></div></div>
-            <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table"><thead><tr><th>Student</th><th>Marks</th><th>Percentage</th><th>Status</th></tr></thead><tbody>{displayedRows.map(row => { const pass = row.marks >= 12, p = Math.round(row.marks / MAX * 100); return <tr key={row.enrollmentNo}><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={pass ? "change-up" : "change-down"}>{row.marks}</td><td>{p}%</td><td><span className={`trend-badge ${pass ? "trend-up" : "trend-down"}`}>{pass ? "Pass" : "Fail"}</span></td></tr>; })}</tbody></table></div>
-          </section>
-          <div className="analysis-right-stack">
-            <section className="analysis-panel academic-stats-panel"><div className="academic-highest"><span>Highest Score</span><strong>{activeStats.highest}</strong><p>{activeStats.highestNames.join(", ") || "—"}</p></div><div className="academic-tier-grid">{TIERS.map(t => <button key={t} type="button" className="academic-tier-card" onClick={() => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}><span>{t}</span><strong style={{ color: COLORS[t] }}>{activeStats.counts[t]}</strong></button>)}</div></section>
-            <section className="analysis-panel analysis-chart-panel"><h3>Performance Tier</h3><p>Click a chart segment to filter the student table.</p><div className="analysis-chart"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={activePie} dataKey="value" nameKey="name" innerRadius={54} outerRadius={82} paddingAngle={3} onClick={(entry: any) => { const t = entry?.name as Tier | undefined; if (t && TIERS.includes(t)) setSelectedTier(selectedTier === t ? null : t); }}>{activePie.map(e => <Cell key={e.name} fill={e.color} cursor="pointer" opacity={!selectedTier || selectedTier === e.name ? 1 : .35} />)}</Pie><Tooltip /></PieChart></ResponsiveContainer></div></section>
-            <div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{activeStats.sorted.slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong>{r.marks}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...activeStats.sorted].reverse().slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong className="is-negative">{r.marks}</strong></div>)}</section></div>
-          </div>
-        </section>
-      </>}
-
-      {data && view === "combined" && <>
-        <section className="analysis-hero combined-hero">
-          <div className="analysis-hero-copy"><h2>Midsem Combined</h2><p>Compare both Midsem examinations in one view.</p></div>
-          <Metric label="Students" value={combinedRows.length} detail="combined records" />
-          <Metric label="Class Average" value={combinedAverage} detail="combined average" />
-          <Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ") || "best individual result"} />
-        </section>
-        <section className="combined-controls-bar">
-          <div className="combined-control"><label htmlFor="combined-sort-field">Grade / Sort By</label><select id="combined-sort-field" value={combinedSort} onChange={(e) => setCombinedSort(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></div>
-          <div className="combined-control"><label htmlFor="combined-sort-order">Order</label><select id="combined-sort-order" value={sortOrder} onChange={(e) => setSortOrder(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></div>
-        </section>
-        <section className="combined-layout">
-          <section className="analysis-panel analysis-table-panel combined-table-panel">
-            <div className="analysis-panel-head"><div><h3>All Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>{selectedTier ? `Filtered: ${selectedTier}` : "Combined Midsem results"}</p></div><div style={{ display: "flex", alignItems: "center", gap: 8 }}>{selectedTier && <button className="analysis-secondary" style={{ padding: "5px 8px" }} onClick={() => setSelectedTier(null)}><X size={13} />Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div>
-            <div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row, index) => { const tier = tierFor(row.combined); const rank = combinedRankRows.findIndex(r => r.enrollmentNo === row.enrollmentNo) + 1; return <tr key={row.enrollmentNo}><td>{sortOrder === "none" ? rank : index + 1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(tierFor(row.first))}`}>{row.first}</td><td className={`tier-mark ${gradeClass(tierFor(row.second))}`}>{row.second}</td><td className={`tier-mark ${gradeClass(tier)}`}><strong>{row.combined}</strong></td><td className={`tier-mark ${gradeClass(tierFor(row.max))}`}>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={() => setSelectedTier(selectedTier === tier ? null : tier)}>{tier}</button></td></tr>; })}{!sortedCombinedRows.length && <tr><td colSpan={7} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match the selected filter.</td></tr>}</tbody></table></div>
-          </section>
-          <div className="combined-right-column">
-            <section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t => ({ name: t, count: combinedCounts[t] }))} onClick={(state: any) => { const tier = state?.activeLabel as Tier | undefined; if (tier && TIERS.includes(tier)) setSelectedTier(selectedTier === tier ? null : tier); }}><CartesianGrid strokeDasharray="3 3" vertical={false} /><XAxis dataKey="name" fontSize={10} /><YAxis allowDecimals={false} fontSize={11} /><Tooltip /><Bar dataKey="count" radius={[6, 6, 0, 0]}>{TIERS.map(t => <Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier || selectedTier === t ? 1 : .35} />)}</Bar></BarChart></ResponsiveContainer></div></section>
-            <section className="analysis-panel combined-tier-panel"><h3>Performance Tiers</h3><div className="academic-tier-grid">{TIERS.map(t => <button key={t} type="button" className="academic-tier-card" onClick={() => setSelectedTier(selectedTier === t ? null : t)} style={{ borderColor: `${COLORS[t]}55`, cursor: "pointer", boxShadow: selectedTier === t ? `0 0 0 2px ${COLORS[t]}33` : undefined }}><span>{t}</span><strong style={{ color: COLORS[t] }}>{combinedCounts[t]}</strong></button>)}</div></section>
-            <div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{combinedRankRows.slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong>{r.combined}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...combinedRankRows].reverse().slice(0, 5).map((r, i) => <div className="academic-rank-row" key={r.enrollmentNo}><span>{i + 1}</span><p>{r.name}</p><strong className="is-negative">{r.combined}</strong></div>)}</section></div>
-          </div>
-        </section>
-      </>}
-
-      {data && view === "summary" && <>
-        <section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section>
-        <section className="summary-filter-panel analysis-panel">
-          <div className="summary-filter-title"><div><h3>Filter Criteria</h3><p>Narrow the student list by examination, performance tier, marks range, and order.</p></div><button className="analysis-secondary" onClick={() => { setSummaryExam("combined"); setSummaryTier("all"); setSummaryLower("0"); setSummaryUpper("30"); setSummarySort("none"); }}>Reset</button></div>
-          <div className="summary-filter-grid">
-            <label><span>Exam</span><select value={summaryExam} onChange={(e) => setSummaryExam(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label>
-            <label><span>Performance Tier</span><select value={summaryTier} onChange={(e) => setSummaryTier(e.target.value as Tier | "all")}><option value="all">All Tiers</option>{TIERS.map(t => <option key={t} value={t}>{t}</option>)}</select></label>
-            <label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLower} onChange={(e) => setSummaryLower(e.target.value)} /></label>
-            <label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpper} onChange={(e) => setSummaryUpper(e.target.value)} /></label>
-            <label><span>Sort</span><select value={summarySort} onChange={(e) => setSummarySort(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label>
-          </div>
-        </section>
-
-        <section className="summary-metric-grid">
-          <Metric label="Overall Class Average" value={summaryAverage} detail="combined average" />
-          <Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0] || "—"} />
-          <Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more" />
-          <Metric label="Midsem 1 Average" value={midsem1Average} detail="out of 30 marks" />
-          <Metric label="Midsem 2 Average" value={midsem2Average} detail="out of 30 marks" />
-        </section>
-
-        <section className="summary-main-grid">
-          <section className="analysis-panel summary-student-panel">
-            <div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{ marginTop: 4, color: "#98a2b3", fontSize: 11 }}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div>
-            <div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row => <tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><button type="button" className={`analysis-grade-badge ${gradeClass(row.tier)}`} onClick={() => setSummaryTier(summaryTier === row.tier ? "all" : row.tier)}>{row.tier}</button></td></tr>)}{!summaryRows.length && <tr><td colSpan={4} style={{ textAlign: "center", padding: 32, color: "#667085" }}>No students match these filters.</td></tr>}</tbody></table></div>
-          </section>
-
-          <div className="summary-right-column">
-            <section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length ? increases.map((row, i) => <div className="summary-rank-row" key={row.enrollmentNo}><span>{i + 1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>) : <p className="summary-empty">No increases.</p>}</section>
-            <section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length ? decreases.map((row, i) => <div className="summary-rank-row" key={row.enrollmentNo}><span>{i + 1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>) : <p className="summary-empty">No decreases.</p>}</section>
-          </div>
-        </section>
+        <section className="analysis-hero"><div className="analysis-hero-copy"><h2>{activeLabel}</h2><p>Raw Midsem marks out of 30, class statistics, and performance tiers.</p></div><Metric label="Class Average" value={activeStats.average} detail="out of 30 marks"/><Metric label="Class Median" value={activeStats.median} detail="middle class score"/><Metric label="Pass Rate" value={`${activeStats.passRate}%`} detail="students scoring 12 or more"/></section>
+        <section className="analysis-content-grid academic-content-grid"><section className="analysis-panel analysis-table-panel"><div className="analysis-panel-head"><div><h3>Data Sheet</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Pass mark: 12/30 (40%){selectedTier?` · Filtered: ${selectedTier}`:""}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{displayedRows.length} Students</span></div></div>
+          <div className="analysis-table-wrap academic-table-wrap"><table className="analysis-table academic-student-table"><colgroup><col className="academic-sno-col"/><col className="academic-enrollment-col"/><col className="academic-name-col"/><col className="academic-marks-col"/><col className="academic-status-col"/><col className="academic-rank-col"/></colgroup><thead><tr><th>S.No.</th><th>Enrollment No.</th><th>Student</th><th>Marks</th><th>Status</th><th>Rank</th></tr></thead><tbody>{displayedRows.map(row=>{const pass=row.marks>=12;return <tr key={row.enrollmentNo}><td>{row.sno}</td><td className="academic-enrollment-cell">{row.enrollmentNo}</td><td>{row.name}</td><td className={pass?"change-up":"change-down"}>{row.marks}</td><td><span className={`trend-badge ${pass?"trend-up":"trend-down"}`}>{pass?"Pass":"Fail"}</span></td><td>{row.rank}</td></tr>;})}</tbody></table></div>
+        </section><div className="analysis-right-stack"><section className="analysis-panel academic-stats-panel"><div className="academic-highest"><span>Highest Score</span><strong>{activeStats.highest}</strong><p>{activeStats.highestNames.join(", ")||"—"}</p></div><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{activeStats.counts[t]}</strong></button>)}</div></section><section className="analysis-panel analysis-chart-panel"><h3>Performance Tier</h3><p>Click a chart segment to filter the student table.</p><div className="analysis-chart"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={activePie} dataKey="value" nameKey="name" innerRadius={54} outerRadius={82} paddingAngle={3} onClick={(entry:any)=>{const t=entry?.name as Tier|undefined;if(t&&TIERS.includes(t))setSelectedTier(selectedTier===t?null:t);}}>{activePie.map(e=><Cell key={e.name} fill={e.color} cursor="pointer" opacity={!selectedTier||selectedTier===e.name?1:.35}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{activeStats.sorted.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.marks}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...activeStats.sorted].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.marks}</strong></div>)}</section></div></div></section>
       </>}
+      {data && view === "combined" && <><section className="analysis-hero combined-hero"><div className="analysis-hero-copy"><h2>Midsem Combined</h2><p>Compare both Midsem examinations in one view.</p></div><Metric label="Students" value={combinedRows.length} detail="combined records"/><Metric label="Class Average" value={combinedAverage} detail="combined average"/><Metric label="Best Score" value={combinedHighest} detail={combinedHighestNames.join(", ")||"best individual result"}/></section><section className="combined-layout"><section className="analysis-panel analysis-table-panel combined-table-panel"><div className="combined-table-toolbar"><div className="analysis-panel-head"><div><h3>All Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>{selectedTier?`Filtered: ${selectedTier}`:"Combined Midsem results"}</p></div><div style={{display:"flex",alignItems:"center",gap:8}}>{selectedTier&&<button className="analysis-secondary" style={{padding:"5px 8px"}} onClick={()=>setSelectedTier(null)}><X size={13}/>Clear</button>}<span className="analysis-count">{sortedCombinedRows.length} Students</span></div></div><div className="combined-inline-controls"><label><span>Grade / Sort By</span><select value={combinedSortDraft} onChange={e=>setCombinedSortDraft(e.target.value as CombinedSort)}><option value="combined">Combined (average)</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Maximum score</option></select></label><label><span>Order</span><select value={sortOrderDraft} onChange={e=>setSortOrderDraft(e.target.value as SortOrder)}><option value="desc">High to Low</option><option value="asc">Low to High</option><option value="none">No Sort</option></select></label><button className="analysis-primary combined-apply-button" onClick={applyCombinedControls}>Apply</button></div></div><div className="analysis-table-wrap combined-table-wrap"><table className="analysis-table"><thead><tr><th>Rank</th><th>Student</th><th>Midsem 1</th><th>Midsem 2</th><th>Combined</th><th>Max</th><th>Grade</th></tr></thead><tbody>{sortedCombinedRows.map((row,index)=>{const tier=tierFor(row.combined);return <tr key={row.enrollmentNo}><td>{sortOrder==="none"?"":index+1}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td>{row.first}</td><td>{row.second}</td><td><strong>{row.combined}</strong></td><td>{row.max}</td><td><button type="button" className={`analysis-grade-badge ${gradeClass(tier)}`} onClick={()=>setSelectedTier(selectedTier===tier?null:tier)}>{tier}</button></td></tr>})}{!sortedCombinedRows.length&&<tr><td colSpan={7} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match the selected filter.</td></tr>}</tbody></table></div></section><div className="combined-right-column"><section className="analysis-panel combined-chart-panel"><div className="combined-panel-title"><div><h3>Grade Distribution</h3><p>Click a bar to filter the table by performance tier.</p></div><span><strong>{combinedRows.length}</strong> Students</span></div><div className="combined-chart"><ResponsiveContainer width="100%" height="100%"><BarChart data={TIERS.map(t=>({name:t,count:combinedCounts[t]}))} onClick={(state:any)=>{const tier=state?.activeLabel as Tier|undefined;if(tier&&TIERS.includes(tier))setSelectedTier(selectedTier===tier?null:tier);}}><CartesianGrid strokeDasharray="3 3" vertical={false}/><XAxis dataKey="name" fontSize={10}/><YAxis allowDecimals={false} fontSize={11}/><Tooltip/><Bar dataKey="count" radius={[6,6,0,0]}>{TIERS.map(t=><Cell key={t} fill={COLORS[t]} cursor="pointer" opacity={!selectedTier||selectedTier===t?1:.35}/>)}</Bar></BarChart></ResponsiveContainer></div></section><section className="analysis-panel combined-tier-panel"><h3>Performance Tiers</h3><div className="academic-tier-grid">{TIERS.map(t=><button key={t} type="button" className="academic-tier-card" onClick={()=>setSelectedTier(selectedTier===t?null:t)} style={{borderColor:`${COLORS[t]}55`,cursor:"pointer",boxShadow:selectedTier===t?`0 0 0 2px ${COLORS[t]}33`:undefined}}><span>{t}</span><strong style={{color:COLORS[t]}}>{combinedCounts[t]}</strong></button>)}</div></section><div className="academic-rank-grid"><section className="analysis-panel academic-rank-panel"><h3>Top 5 Highest Scorers</h3>{combinedRankRows.slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong>{r.combined}</strong></div>)}</section><section className="analysis-panel academic-rank-panel"><h3>Bottom 5 At-Risk Students</h3>{[...combinedRankRows].reverse().slice(0,5).map((r,i)=><div className="academic-rank-row" key={r.enrollmentNo}><span>{i+1}</span><p>{r.name}</p><strong className="is-negative">{r.combined}</strong></div>)}</section></div></div></section></>}
+      {data && view === "summary" && <><section className="summary-heading"><div><h2>Academic Summary</h2><p>Compare Midsem 1 and Midsem 2 with the same ClassPulse academic analysis theme.</p></div></section><section className="summary-metric-grid"><Metric label="Overall Class Average" value={summaryAverage} detail="combined average"/><Metric label="Highest Combined Score" value={combinedHighest} detail={combinedHighestNames[0]||"—"}/><Metric label="Overall Pass Rate" value={`${summaryPassRate}%`} detail="students scoring 12 or more"/><Metric label="Midsem 1 Average" value={midsem1.average} detail="out of 30 marks"/><Metric label="Midsem 2 Average" value={midsem2.average} detail="out of 30 marks"/></section><section className="summary-main-grid"><section className="analysis-panel summary-student-panel"><div className="summary-table-toolbar"><div className="analysis-panel-head"><div><h3>Filtered Students</h3><p style={{marginTop:4,color:"#98a2b3",fontSize:11}}>Showing {summaryRows.length} of {students.length} students</p></div><span className="analysis-count">{summaryRows.length} Students</span></div><div className="summary-inline-controls"><label><span>Exam</span><select value={summaryExamDraft} onChange={e=>setSummaryExamDraft(e.target.value as SummaryExam)}><option value="combined">Combined</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option><option value="max">Max</option></select></label><label><span>Performance Tier</span><select value={summaryTierDraft} onChange={e=>setSummaryTierDraft(e.target.value as Tier|"all")}><option value="all">All Tiers</option>{TIERS.map(t=><option key={t} value={t}>{t}</option>)}</select></label><label><span>Lower Bound</span><input type="number" min="0" max="30" value={summaryLowerDraft} onChange={e=>setSummaryLowerDraft(e.target.value)}/></label><label><span>Upper Bound</span><input type="number" min="0" max="30" value={summaryUpperDraft} onChange={e=>setSummaryUpperDraft(e.target.value)}/></label><label><span>Sort</span><select value={summarySortDraft} onChange={e=>setSummarySortDraft(e.target.value as SummarySort)}><option value="none">No Sort</option><option value="desc">High to Low</option><option value="asc">Low to High</option></select></label><button className="analysis-primary summary-apply-button" onClick={applySummaryControls}>Apply</button><button className="analysis-secondary summary-reset-button" onClick={resetSummaryControls}>Reset</button></div></div><div className="analysis-table-wrap summary-table-wrap"><table className="analysis-table"><thead><tr><th>Enrollment</th><th>Student</th><th>Marks</th><th>Tier</th></tr></thead><tbody>{summaryRows.map(row=><tr key={row.enrollmentNo}><td>{row.enrollmentNo}</td><td><span className="student-cell"><span className="student-avatar">{initials(row.name)}</span>{row.name}</span></td><td className={`tier-mark ${gradeClass(row.tier)}`}><strong>{row.marks}</strong></td><td><span className={`analysis-grade-badge ${gradeClass(row.tier)}`}>{row.tier}</span></td></tr>)}{!summaryRows.length&&<tr><td colSpan={4} style={{textAlign:"center",padding:32,color:"#667085"}}>No students match these filters.</td></tr>}</tbody></table></div></section><div className="summary-right-column"><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Increase (Top 5)</h3><p>Students whose Midsem 2 score improved.</p></div></div>{increases.length?increases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-up">+{row.change}</strong></div>):<p className="summary-empty">No increases.</p>}</section><section className="analysis-panel summary-rank-panel"><div className="summary-rank-title"><div><h3>Marks Decrease (Top 5)</h3><p>Students whose Midsem 2 score fell.</p></div></div>{decreases.length?decreases.map((row,i)=><div className="summary-rank-row" key={row.enrollmentNo}><span>{i+1}.</span><p>{row.name}</p><strong className="change-down">{row.change}</strong></div>):<p className="summary-empty">No decreases.</p>}</section></div></section></section></>}
     </main>
-
     <style jsx global>{`
-      .combined-controls-bar { display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; margin: 0 0 18px; }
-      .combined-control { min-width: 190px; }
-      .combined-control label { display: block; margin-bottom: 7px; color: #667085; font-size: 11px; font-weight: 600; }
-      .combined-control select { width: 100%; height: 40px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 12px; font-size: 13px; outline: none; }
-      .combined-control select:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
-      .combined-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .95fr); gap: 16px; align-items: start; }
-      .combined-table-wrap { min-height: 560px; max-height: 560px; }
-      .combined-table-panel .analysis-table { table-layout: fixed; }
-      .combined-table-panel .analysis-table th, .combined-table-panel .analysis-table td { white-space: nowrap; }
-      .combined-table-panel .analysis-table th:nth-child(1), .combined-table-panel .analysis-table td:nth-child(1) { width: 55px; }
-      .combined-table-panel .analysis-table th:nth-child(2), .combined-table-panel .analysis-table td:nth-child(2) { width: 28%; }
-      .combined-table-panel .analysis-table th:nth-child(3), .combined-table-panel .analysis-table td:nth-child(3), .combined-table-panel .analysis-table th:nth-child(4), .combined-table-panel .analysis-table td:nth-child(4), .combined-table-panel .analysis-table th:nth-child(5), .combined-table-panel .analysis-table td:nth-child(5), .combined-table-panel .analysis-table th:nth-child(6), .combined-table-panel .analysis-table td:nth-child(6) { width: 11%; }
-      .combined-table-panel .analysis-table th:nth-child(7), .combined-table-panel .analysis-table td:nth-child(7) { width: 16%; }
-      .combined-table-panel .analysis-table th:not(:nth-child(2)), .combined-table-panel .analysis-table td:not(:nth-child(2)) { text-align: center; }
-      .combined-right-column { display: grid; gap: 16px; }
-      .combined-chart-panel { padding: 18px; }
-      .combined-panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
-      .combined-panel-title h3 { margin: 0; }
-      .combined-panel-title p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }
-      .combined-panel-title > span { color: #98a2b3; font-size: 11px; white-space: nowrap; }
-      .combined-panel-title > span strong { color: #344054; }
-      .combined-chart { height: 300px; margin-top: 10px; }
-      .combined-tier-panel { padding: 18px; }
-      .tier-mark { font-weight: 700; }
-      .tier-mark.excellent { color: #15966a !important; }
-      .tier-mark.good { color: #4d75d0 !important; }
-      .tier-mark.attention { color: #f59e0b !important; }
-      .tier-mark.risk { color: #ef4444 !important; }
-      .combined-hero .analysis-metric:nth-child(2), .summary-metric-grid .analysis-metric:nth-child(1) { border-top: 3px solid #4d75d0; }
-      .combined-hero .analysis-metric:nth-child(3), .summary-metric-grid .analysis-metric:nth-child(2) { border-top: 3px solid #15966a; }
-      .combined-hero .analysis-metric:nth-child(4), .summary-metric-grid .analysis-metric:nth-child(3) { border-top: 3px solid #f59e0b; }
-      .summary-metric-grid .analysis-metric:nth-child(4) { border-top: 3px solid #4d75d0; }
-      .summary-metric-grid .analysis-metric:nth-child(5) { border-top: 3px solid #15966a; }
-
-      .summary-heading { margin: 4px 0 18px; }
-      .summary-heading h2 { margin: 0; font-size: 22px; }
-      .summary-heading p { margin: 6px 0 0; color: #667085; font-size: 13px; }
-      .summary-filter-panel { padding: 18px; margin-bottom: 16px; }
-      .summary-filter-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
-      .summary-filter-title h3 { margin: 0; }
-      .summary-filter-title p { margin: 5px 0 0; color: #98a2b3; font-size: 11px; }
-      .summary-filter-grid { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr .8fr 1fr; gap: 12px; }
-      .summary-filter-grid label { display: block; }
-      .summary-filter-grid label > span { display: block; margin: 0 0 7px; color: #667085; font-size: 11px; font-weight: 600; }
-      .summary-filter-grid select, .summary-filter-grid input { width: 100%; height: 40px; border: 1px solid #d8e0ea; border-radius: 9px; background: #fff; color: #344054; padding: 0 12px; font-size: 13px; outline: none; box-sizing: border-box; }
-      .summary-filter-grid select:focus, .summary-filter-grid input:focus { border-color: #4b2e91; box-shadow: 0 0 0 2px rgba(75,46,145,.12); }
-      .summary-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
-      .summary-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); gap: 16px; align-items: start; }
-      .summary-student-panel { min-width: 0; }
-      .summary-table-wrap { max-height: 650px; min-height: 650px; overflow: auto; }
-      .summary-table-wrap .analysis-table { table-layout: fixed; }
-      .summary-table-wrap .analysis-table th, .summary-table-wrap .analysis-table td { white-space: nowrap; }
-      .summary-table-wrap .analysis-table th:nth-child(1), .summary-table-wrap .analysis-table td:nth-child(1) { width: 24%; }
-      .summary-table-wrap .analysis-table th:nth-child(2), .summary-table-wrap .analysis-table td:nth-child(2) { width: 40%; }
-      .summary-table-wrap .analysis-table th:nth-child(3), .summary-table-wrap .analysis-table td:nth-child(3) { width: 16%; text-align: center; }
-      .summary-table-wrap .analysis-table th:nth-child(4), .summary-table-wrap .analysis-table td:nth-child(4) { width: 20%; text-align: center; }
-      .summary-right-column { display: grid; gap: 16px; }
-      .summary-rank-panel { padding: 18px; }
-      .summary-rank-title h3 { margin: 0; }
-      .summary-rank-title p { margin: 5px 0 12px; color: #98a2b3; font-size: 11px; }
-      .summary-rank-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef1f5; font-size: 12px; }
-      .summary-rank-row:last-child { border-bottom: 0; }
-      .summary-rank-row > span { color: #667085; }
-      .summary-rank-row p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; }
-      .summary-rank-row strong { font-size: 12px; }
-      .summary-empty { color: #98a2b3; font-size: 12px; margin: 10px 0 0; }
-
-      @media (max-width: 1200px) {
-        .combined-layout, .summary-main-grid { grid-template-columns: 1fr; }
-        .combined-right-column { grid-template-columns: 1fr 1fr; }
-        .combined-right-column .academic-rank-grid { grid-column: 1 / -1; }
-        .summary-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-        .summary-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-      }
-      @media (max-width: 800px) {
-        .combined-controls-bar { justify-content: flex-start; }
-        .combined-layout, .summary-main-grid { grid-template-columns: 1fr; }
-        .combined-right-column, .summary-metric-grid, .summary-filter-grid { grid-template-columns: 1fr; }
-        .combined-control { min-width: 0; flex: 1; }
-        .combined-table-wrap, .summary-table-wrap { min-height: 480px; max-height: 480px; }
-      }
-      @media (max-width: 600px) {
-        .combined-controls-bar { flex-direction: column; align-items: stretch; }
-        .summary-filter-title { flex-direction: column; }
-      }
+      .academic-student-table { table-layout: fixed; }
+      .academic-student-table th, .academic-student-table td { padding: 10px 12px !important; vertical-align: middle; white-space: nowrap; }
+      .academic-student-table th { font-size: 10px; }
+      .academic-student-table td { font-size: 11px; }
+      .academic-sno-col { width: 5%; }
+      .academic-enrollment-col { width: 21%; }
+      .academic-name-col { width: 34%; }
+      .academic-marks-col { width: 14%; }
+      .academic-status-col { width: 14%; }
+      .academic-rank-col { width: 12%; }
+      .academic-student-table th:not(:nth-child(3)), .academic-student-table td:not(:nth-child(3)) { text-align: center; }
+      .academic-student-table th:nth-child(3), .academic-student-table td:nth-child(3) { text-align: left; }
+      .academic-enrollment-cell { color: #667085; font-variant-numeric: tabular-nums; }
+      .combined-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr); gap:16px; align-items:start; }
+      .combined-table-toolbar,.summary-table-toolbar { display:grid; gap:12px; }
+      .combined-inline-controls { display:grid; grid-template-columns:1.35fr 1fr auto; gap:10px; align-items:end; }
+      .summary-inline-controls { display:grid; grid-template-columns:1.05fr 1.1fr .75fr .75fr .95fr auto auto; gap:8px; align-items:end; }
+      .combined-inline-controls label,.summary-inline-controls label { min-width:0; }
+      .combined-inline-controls label>span,.summary-inline-controls label>span { display:block; margin:0 0 6px; color:#667085; font-size:10px; font-weight:600; }
+      .combined-inline-controls select,.summary-inline-controls select,.summary-inline-controls input { width:100%; height:38px; border:1px solid #d8e0ea; border-radius:9px; background:#fff; color:#344054; padding:0 10px; font-size:12px; outline:none; box-sizing:border-box; }
+      .combined-inline-controls select:focus,.summary-inline-controls select:focus,.summary-inline-controls input:focus { border-color:#4b2e91; box-shadow:0 0 0 2px rgba(75,46,145,.12); }
+      .combined-apply-button,.summary-apply-button,.summary-reset-button { height:38px; white-space:nowrap; }
+      .combined-table-wrap { min-height:560px; max-height:560px; }
+      .combined-table-panel .analysis-table { table-layout:fixed; }
+      .combined-table-panel .analysis-table th,.combined-table-panel .analysis-table td { white-space:nowrap; }
+      .combined-table-panel .analysis-table th:nth-child(1),.combined-table-panel .analysis-table td:nth-child(1) { width:55px; }
+      .combined-table-panel .analysis-table th:nth-child(2),.combined-table-panel .analysis-table td:nth-child(2) { width:28%; }
+      .combined-table-panel .analysis-table th:nth-child(3),.combined-table-panel .analysis-table td:nth-child(3),.combined-table-panel .analysis-table th:nth-child(4),.combined-table-panel .analysis-table td:nth-child(4),.combined-table-panel .analysis-table th:nth-child(5),.combined-table-panel .analysis-table td:nth-child(5),.combined-table-panel .analysis-table th:nth-child(6),.combined-table-panel .analysis-table td:nth-child(6) { width:11%; }
+      .combined-table-panel .analysis-table th:nth-child(7),.combined-table-panel .analysis-table td:nth-child(7) { width:16%; }
+      .combined-table-panel .analysis-table th:not(:nth-child(2)),.combined-table-panel .analysis-table td:not(:nth-child(2)) { text-align:center; }
+      .combined-right-column { display:grid; gap:16px; }
+      .combined-chart-panel { padding:18px; }
+      .combined-panel-title { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
+      .combined-panel-title h3 { margin:0; }.combined-panel-title p { margin:5px 0 0; color:#98a2b3; font-size:11px; }.combined-panel-title>span { color:#98a2b3; font-size:11px; white-space:nowrap; }.combined-panel-title>span strong { color:#344054; }.combined-chart { height:300px; margin-top:10px; }.combined-tier-panel { padding:18px; }
+      .tier-mark { font-weight:700; }.tier-mark.excellent { color:#2563eb!important; }.tier-mark.good { color:#15966a!important; }.tier-mark.attention { color:#f59e0b!important; }.tier-mark.risk { color:#ef4444!important; }
+      .summary-heading { margin:4px 0 18px; }.summary-heading h2 { margin:0; font-size:22px; }.summary-heading p { margin:6px 0 0; color:#667085; font-size:13px; }.summary-metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.summary-main-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr); gap:16px; align-items:start; }.summary-student-panel { min-width:0; }.summary-table-wrap { max-height:650px; min-height:650px; overflow:auto; }.summary-table-wrap .analysis-table { table-layout:fixed; }.summary-table-wrap .analysis-table th,.summary-table-wrap .analysis-table td { white-space:nowrap; }.summary-table-wrap .analysis-table th:nth-child(1),.summary-table-wrap .analysis-table td:nth-child(1) { width:24%; }.summary-table-wrap .analysis-table th:nth-child(2),.summary-table-wrap .analysis-table td:nth-child(2) { width:40%; }.summary-table-wrap .analysis-table th:nth-child(3),.summary-table-wrap .analysis-table td:nth-child(3) { width:16%; text-align:center; }.summary-table-wrap .analysis-table th:nth-child(4),.summary-table-wrap .analysis-table td:nth-child(4) { width:20%; text-align:center; }.summary-right-column { display:grid; gap:16px; }.summary-rank-panel { padding:18px; }.summary-rank-title h3 { margin:0; }.summary-rank-title p { margin:5px 0 12px; color:#98a2b3; font-size:11px; }.summary-rank-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eef1f5; font-size:12px; }.summary-rank-row:last-child { border-bottom:0; }.summary-rank-row>span { color:#667085; }.summary-rank-row p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#344054; }.summary-rank-row strong { font-size:12px; }.summary-empty { color:#98a2b3; font-size:12px; margin:10px 0 0; }
+      @media (max-width:1200px) { .combined-layout,.summary-main-grid { grid-template-columns:1fr; }.combined-right-column { grid-template-columns:1fr 1fr; }.combined-right-column .academic-rank-grid { grid-column:1/-1; }.summary-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.combined-inline-controls { grid-template-columns:1fr 1fr auto; }.summary-inline-controls { grid-template-columns:repeat(4,minmax(0,1fr)); } }
+      @media (max-width:800px) { .combined-right-column,.summary-metric-grid { grid-template-columns:1fr; }.combined-inline-controls,.summary-inline-controls { grid-template-columns:1fr; }.combined-table-wrap,.summary-table-wrap { min-height:480px; max-height:480px; }.academic-student-table { min-width:760px; } }
     `}</style>
   </div>;
 }
diff --git a/pages/subject-analysis/[subjectId]/attendance.tsx b/pages/subject-analysis/[subjectId]/attendance.tsx
index 2575d36..7f58f1c 100644
--- a/pages/subject-analysis/[subjectId]/attendance.tsx
+++ b/pages/subject-analysis/[subjectId]/attendance.tsx
@@ -29,6 +29,10 @@ export default function SubjectAttendancePage() {
   const [upperBound, setUpperBound] = useState(100);
   const [riskTrendFilter, setRiskTrendFilter] = useState("All");
   const [riskMonth, setRiskMonth] = useState<"previous" | "current">("current");
+  const [draftLowerBound, setDraftLowerBound] = useState(0);
+  const [draftUpperBound, setDraftUpperBound] = useState(100);
+  const [draftRiskTrendFilter, setDraftRiskTrendFilter] = useState("All");
+  const [draftRiskMonth, setDraftRiskMonth] = useState<"previous" | "current">("current");
   const [copied, setCopied] = useState(false);
 
   async function loadAnalysis(sync = false, previous = previousMonth, current = currentMonth, criteria = trendCriteria) {
@@ -87,12 +91,38 @@ export default function SubjectAttendancePage() {
   ];
 
   function openRisk(options: { trend?: string; lower?: number; upper?: number }) {
-    setRiskTrendFilter(options.trend || "All");
-    setLowerBound(options.lower ?? 0);
-    setUpperBound(options.upper ?? 100);
+    const nextTrend = options.trend || "All";
+    const nextLower = options.lower ?? 0;
+    const nextUpper = options.upper ?? 100;
+    setDraftRiskTrendFilter(nextTrend);
+    setDraftLowerBound(nextLower);
+    setDraftUpperBound(nextUpper);
+    setRiskTrendFilter(nextTrend);
+    setLowerBound(nextLower);
+    setUpperBound(nextUpper);
     setView("risk");
   }
 
+  function applyRiskFilters() {
+    const lo = Math.max(0, Math.min(100, Math.min(draftLowerBound, draftUpperBound)));
+    const hi = Math.max(0, Math.min(100, Math.max(draftLowerBound, draftUpperBound)));
+    setLowerBound(lo);
+    setUpperBound(hi);
+    setRiskTrendFilter(draftRiskTrendFilter);
+    setRiskMonth(draftRiskMonth);
+  }
+
+  function resetRiskFilters() {
+    setLowerBound(0);
+    setUpperBound(100);
+    setRiskTrendFilter("All");
+    setRiskMonth("current");
+    setDraftLowerBound(0);
+    setDraftUpperBound(100);
+    setDraftRiskTrendFilter("All");
+    setDraftRiskMonth("current");
+  }
+
   async function copyEmails() {
     try {
       await navigator.clipboard.writeText(riskEmails.join("; "));
@@ -142,7 +172,7 @@ export default function SubjectAttendancePage() {
             <h2>Attendance Trend</h2>
             <p>Compare attendance between two months and identify increasing, decreasing, and stable students.</p>
           </div>
-          <Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} change={averageChange} />
+          <Metric icon={<Users size={19} />} label={`Class Average (${previousMonth || "Previous"})`} value={`${previousAverage}%`} />
           <Metric icon={<Gauge size={19} />} label={`Class Average (${currentMonth || "Current"})`} value={`${currentAverage}%`} change={averageChange} />
           <Metric icon={<Sparkles size={19} />} label="Students Improving" value={improvingCount} detail={`${students.length ? round1((improvingCount / students.length) * 100) : 0}% of total students`} good />
         </section>
@@ -212,13 +242,14 @@ export default function SubjectAttendancePage() {
         <section className="analysis-panel analysis-settings">
           <div className="analysis-panel-head" style={{ marginBottom: 18 }}>
             <div><h3>Filter Criteria</h3><p style={{ margin: "5px 0 0", color: "#667085", fontSize: 12 }}>Narrow the list before copying addresses or sending alerts.</p></div>
-            <button className="analysis-secondary" onClick={() => { setLowerBound(0); setUpperBound(100); setRiskTrendFilter("All"); setRiskMonth("current"); }}><RefreshCw size={14} />Reset</button>
+            <button className="analysis-secondary" onClick={resetRiskFilters}><RefreshCw size={14} />Reset</button>
           </div>
           <div className="analysis-settings-grid">
-            <div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={lowerBound} onChange={(e) => setLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
-            <div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={upperBound} onChange={(e) => setUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
-            <div><label>Trend</label><select value={riskTrendFilter} onChange={(e) => setRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div>
-            <div><label>Month</label><select value={riskMonth} onChange={(e) => setRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div>
+            <div><label>Lower Bound (%)</label><input type="number" min="0" max="100" value={draftLowerBound} onChange={(e) => setDraftLowerBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
+            <div><label>Upper Bound (%)</label><input type="number" min="0" max="100" value={draftUpperBound} onChange={(e) => setDraftUpperBound(Math.max(0, Math.min(100, Number(e.target.value))))} /></div>
+            <div><label>Trend</label><select value={draftRiskTrendFilter} onChange={(e) => setDraftRiskTrendFilter(e.target.value)}><option>All</option><option>Increasing</option><option>Decreasing</option><option>Stable</option></select></div>
+            <div><label>Month</label><select value={draftRiskMonth} onChange={(e) => setDraftRiskMonth(e.target.value as "previous" | "current")}><option value="current">{currentMonth}</option><option value="previous">{previousMonth}</option></select></div>
+            <button className="analysis-primary" onClick={applyRiskFilters}><SlidersHorizontal size={15} />Apply</button>
           </div>
         </section>
 
diff --git a/pages/subject-analysis/[subjectId]/overall.tsx b/pages/subject-analysis/[subjectId]/overall.tsx
index 48ebeb7..8c97dff 100644
--- a/pages/subject-analysis/[subjectId]/overall.tsx
+++ b/pages/subject-analysis/[subjectId]/overall.tsx
@@ -66,6 +66,18 @@ function scoreClass(value: number, max = 40) {
   if (ratio >= 0.6) return "text-amber-600 font-semibold";
   return "text-red-500 font-semibold";
 }
+function riskScoreClass(value: number) {
+  if (value > 32) return "text-blue-600 font-semibold";
+  if (value >= 24) return "text-green-600 font-semibold";
+  if (value >= 16) return "text-amber-600 font-semibold";
+  return "text-red-500 font-semibold";
+}
+function riskStatus(value: number) {
+  if (value > 32) return { label: "Excellent", className: "bg-blue-50 text-blue-700" };
+  if (value >= 24) return { label: "Good", className: "bg-green-50 text-green-700" };
+  if (value >= 16) return { label: "Needs Attention", className: "bg-amber-50 text-amber-700" };
+  return { label: "Critical Risk", className: "bg-red-50 text-red-600" };
+}
 
 export default function SubjectOverallPage() {
   const router = useRouter();
@@ -88,6 +100,10 @@ export default function SubjectOverallPage() {
   const [riskColumn, setRiskColumn] = useState<ColumnKey>("basic");
   const [riskLower, setRiskLower] = useState(0);
   const [riskUpper, setRiskUpper] = useState(40);
+  const [draftRiskColumn, setDraftRiskColumn] = useState<ColumnKey>("basic");
+  const [draftRiskLower, setDraftRiskLower] = useState(0);
+  const [draftRiskUpper, setDraftRiskUpper] = useState(40);
+  const [draftSortDirection, setDraftSortDirection] = useState<SortDirection>("none");
 
   async function loadAnalysis(sync = false) {
     if (!subjectId || typeof subjectId !== "string") return;
@@ -103,7 +119,6 @@ export default function SubjectOverallPage() {
   useEffect(() => { loadAnalysis(); }, [subjectId]);
 
   const selectedTotal = useMemo(() => round1(draftBasicColumns.reduce((sum, key) => sum + draftWeights[key], 0)), [draftBasicColumns, draftWeights]);
-
   const baseRows = useMemo(() => {
     const preliminary = (data?.students || []).map((s: any, originalIndex: number) => ({
       enrollmentNo: s.enrollmentNo, name: s.name, originalIndex,
@@ -136,93 +151,83 @@ export default function SubjectOverallPage() {
     if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
     return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[sortColumn] - b[sortColumn] : b[sortColumn] - a[sortColumn]) || a.name.localeCompare(b.name)));
   }, [baseRows, sortColumn, sortDirection]);
-  const filteredRiskRows = useMemo(() => { const lo = Math.min(riskLower, riskUpper); const hi = Math.max(riskLower, riskUpper); return baseRows.filter(row => { const value = columnValue(row, riskColumn); return value >= lo && value <= hi; }); }, [baseRows, riskColumn, riskLower, riskUpper]);
-  const topFive = useMemo(() => [...filteredRiskRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn)).slice(0, 5), [filteredRiskRows, riskColumn]);
+  const filteredRiskRows = useMemo(() => {
+    const lo = Math.min(riskLower, riskUpper); const hi = Math.max(riskLower, riskUpper);
+    const rows = baseRows.filter(row => { const value = columnValue(row, riskColumn); return value >= lo && value <= hi; });
+    if (sortDirection === "none") return rows.sort((a, b) => a.originalIndex - b.originalIndex);
+    return rows.sort((a: any, b: any) => ((sortDirection === "asc" ? a[riskColumn] - b[riskColumn] : b[riskColumn] - a[riskColumn]) || a.name.localeCompare(b.name)));
+  }, [baseRows, riskColumn, riskLower, riskUpper, sortDirection]);
+  const topFive = useMemo(() => [...baseRows].sort((a, b) => columnValue(b, riskColumn) - columnValue(a, riskColumn) || a.originalIndex - b.originalIndex).slice(0, 5), [baseRows, riskColumn]);
   const riskDistribution = useMemo(() => [
-    { name: "Above 32", value: baseRows.filter(r => r.basic > 32).length },
-    { name: "24–32", value: baseRows.filter(r => r.basic >= 24 && r.basic <= 32).length },
-    { name: "16–24", value: baseRows.filter(r => r.basic >= 16 && r.basic < 24).length },
-    { name: "Below 16", value: baseRows.filter(r => r.basic < 16).length },
-  ], [baseRows]);
+    { name: "Excellent", value: baseRows.filter(r => columnValue(r, riskColumn) > 32).length, lower: 32.0001, upper: 40 },
+    { name: "Good", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 24 && v <= 32; }).length, lower: 24, upper: 32 },
+    { name: "Needs Attention", value: baseRows.filter(r => { const v = columnValue(r, riskColumn); return v >= 16 && v < 24; }).length, lower: 16, upper: 23.9999 },
+    { name: "Critical Risk", value: baseRows.filter(r => columnValue(r, riskColumn) < 16).length, lower: 0, upper: 15.9999 },
+  ], [baseRows, riskColumn]);
 
   function updateWeight(key: WeightKey, value: string) { setDraftWeights(current => ({ ...current, [key]: num(value, current[key]) })); }
-  function toggleBasic(key: WeightKey) {
-    setDraftBasicColumns(current => {
-      if (current.includes(key)) return current.filter(x => x !== key);
-      if (key === "attendance") return [...current.filter(x => x !== "moderatedAttendance"), key];
-      if (key === "moderatedAttendance") return [...current.filter(x => x !== "attendance"), key];
-      return [...current, key];
-    });
-  }
-  function applyWeights() {
-    if (selectedTotal <= 0) return;
-    setApplyingWeights(true);
-    const applied = normalize(draftBasicColumns, draftWeights);
-    setBasicColumns(draftBasicColumns); setWeights(applied); setDraftWeights(applied);
-    window.setTimeout(() => setApplyingWeights(false), 250);
-  }
+  function toggleBasic(key: WeightKey) { setDraftBasicColumns(current => { if (current.includes(key)) return current.filter(x => x !== key); if (key === "attendance") return [...current.filter(x => x !== "moderatedAttendance"), key]; if (key === "moderatedAttendance") return [...current.filter(x => x !== "attendance"), key]; return [...current, key]; }); }
+  function applyWeights() { if (selectedTotal <= 0) return; setApplyingWeights(true); const applied = normalize(draftBasicColumns, draftWeights); setBasicColumns(draftBasicColumns); setWeights(applied); setDraftWeights(applied); window.setTimeout(() => setApplyingWeights(false), 250); }
   function updateCriteria(i: number, field: keyof Criteria, value: string) {
-    setCriteria(current => {
-      const next = current.map(row => ({ ...row })); const parsed = num(value, next[i][field]);
-      if (field === "from") return current;
-      if (field === "to") next[i].to = Math.max(next[i].from, Math.floor(parsed)); else next[i][field] = parsed;
-      next[0].from = 1;
-      for (let index = 1; index < next.length; index++) { next[index].from = next[index - 1].to + 1; if (next[index].to < next[index].from) next[index].to = next[index].from; }
-      return next;
-    });
+    setCriteria(current => { const next = current.map(row => ({ ...row })); const parsed = num(value, next[i][field]); if (field === "from") return current; if (field === "to") next[i].to = Math.max(next[i].from, Math.floor(parsed)); else next[i][field] = parsed; next[0].from = 1; for (let index = 1; index < next.length; index++) { next[index].from = next[index - 1].to + 1; if (next[index].to < next[index].from) next[index].to = next[index].from; } return next; });
   }
-  function selectRiskRange(index: number) {
-    setRiskColumn("basic");
-    if (index === 0) { setRiskLower(32.1); setRiskUpper(40); }
-    if (index === 1) { setRiskLower(24); setRiskUpper(32); }
-    if (index === 2) { setRiskLower(16); setRiskUpper(23.9); }
-    if (index === 3) { setRiskLower(0); setRiskUpper(15.9); }
+  function applyRiskFilters() {
+    const lo = Math.min(draftRiskLower, draftRiskUpper);
+    const hi = Math.max(draftRiskLower, draftRiskUpper);
+    setRiskColumn(draftRiskColumn);
+    setRiskLower(lo);
+    setRiskUpper(hi);
+    setSortDirection(draftSortDirection);
+  }
+  function selectDistributionBucket(index: number) {
+    const bucket = riskDistribution[index];
+    if (!bucket) return;
+    setDraftRiskLower(bucket.lower);
+    setDraftRiskUpper(bucket.upper);
   }
 
   return <div className="analysis-layout">
     <aside className="analysis-sidebar">
       <div className="analysis-brand"><span className="analysis-brand__mark"><BarChart3 size={18} /></span><span>ClassPulse</span></div>
-      <nav className="analysis-side-nav">
-        <a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a>
-        <a href="/classes"><BookOpen size={18} />Class Analysis</a>
-        <a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/overall` : "#"}><GraduationCap size={18} />Subject Analysis</a>
-      </nav>
+      <nav className="analysis-side-nav"><a href="/dashboard"><LayoutDashboard size={18} />Dashboard</a><a href="/classes"><BookOpen size={18} />Class Analysis</a><a className="is-active" href={typeof subjectId === "string" ? `/subject-analysis/${subjectId}/overall` : "#"}><GraduationCap size={18} />Subject Analysis</a></nav>
       <RawDataButton sheetId={sheetId} />
       <div className="analysis-side-footer">ClassPulse Teacher Portal</div>
     </aside>
-
     <main className="analysis-page">
-      <header className="analysis-topbar">
-        <div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div>
-        <div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div>
-      </header>
-
+      <header className="analysis-topbar"><div className="analysis-title-row"><h1>Subject Analysis</h1>{computedAt && <span className="analysis-sync">• Last synced {new Date(computedAt).toLocaleString()}</span>}</div><div className="analysis-top-actions"><button className="analysis-primary" onClick={() => loadAnalysis(true)} disabled={syncing}><RefreshCw size={15} className={syncing ? "animate-spin" : ""} />{syncing ? "Syncing..." : "Sync now"}</button></div></header>
       {typeof subjectId === "string" && <SubjectAnalysisNav subjectId={subjectId}/>} 
-      <div className="analysis-view-switch">
-        <button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button>
-        <button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button>
-      </div>
-
+      <div className="analysis-view-switch"><button onClick={() => setView("internal")} className={view === "internal" ? "is-active" : ""}>Internal Marks</button><button onClick={() => setView("risk")} className={view === "risk" ? "is-active" : ""}>At Risk</button></div>
       {error && <div className="analysis-panel" style={{ padding: 14, marginBottom: 16, color: "#b42318" }}>{error}</div>}
       {loading && !data && <div style={{ padding: 40, color: "#667085", fontSize: 13 }}>Loading overall analysis...</div>}
-
       {data && view === "internal" ? <>
         <div className="grid grid-cols-1 xl:grid-cols-[0.82fr_1fr] gap-2 mb-2 items-start">
-          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm">
-            <div className="flex items-center justify-between mb-2"><div><h3 className="text-sm font-semibold text-slate-900">Applied Components Summary</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose components and set their weightage.</p></div><span className={`text-[11px] font-semibold ${selectedTotal === TARGET ? "text-emerald-600" : "text-amber-600"}`}>Selected total: {selectedTotal}/40</span></div>
-            <div className="grid grid-cols-3 grid-rows-2 gap-1.5">{COMPONENTS.map(({ key, label }) => { const checked = draftBasicColumns.includes(key); return <label key={key} className={`min-w-0 rounded-lg border p-1.5 cursor-pointer transition ${checked ? "border-violet-200 bg-violet-50/60" : "border-slate-200 bg-white"}`}><div className="flex items-center gap-1.5 min-w-0"><input type="checkbox" checked={checked} onChange={() => toggleBasic(key)} className="h-3.5 w-3.5 accent-[#4a35b3] shrink-0"/><span className="text-[11px] font-medium text-slate-700 truncate">{label}</span></div><input aria-label={`${label} weightage`} type="number" min="0" step="0.1" value={draftWeights[key]} onChange={e => updateWeight(key, e.target.value)} className="mt-1 w-full rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 outline-none focus:border-violet-400"/></label>; })}</div>
-            <div className="flex items-center justify-between mt-2 gap-2"><p className="text-[10px] leading-3.5 text-slate-400">Only checked components count. Weightage is normalized to exactly 40 when applied.</p><button onClick={applyWeights} disabled={applyingWeights || selectedTotal <= 0} className="shrink-0 bg-[#3d2aa0] text-white text-xs font-semibold rounded-lg px-3 py-1.5 shadow-sm disabled:opacity-50">{applyingWeights ? "Applying..." : "Apply"}</button></div>
+          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-center justify-between mb-2"><div><h3 className="text-sm font-semibold text-slate-900">Applied Components Summary</h3><p className="text-[10px] text-slate-500 mt-0.5">Choose components and set their weightage.</p></div><span className={`text-[11px] font-semibold ${selectedTotal === TARGET ? "text-emerald-600" : "text-amber-600"}`}>Selected total: {selectedTotal}/40</span></div><div className="grid grid-cols-3 grid-rows-2 gap-1.5">{COMPONENTS.map(({ key, label }) => { const checked = draftBasicColumns.includes(key); return <label key={key} className={`min-w-0 rounded-lg border p-1.5 cursor-pointer transition ${checked ? "border-violet-200 bg-violet-50/60" : "border-slate-200 bg-white"}`}><div className="flex items-center gap-1.5 min-w-0"><input type="checkbox" checked={checked} onChange={() => toggleBasic(key)} className="h-3.5 w-3.5 accent-[#4a35b3] shrink-0"/><span className="text-[11px] font-medium text-slate-700 truncate">{label}</span></div><input aria-label={`${label} weightage`} type="number" min="0" step="0.1" value={draftWeights[key]} onChange={e => updateWeight(key, e.target.value)} className="mt-1 w-full rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 outline-none focus:border-violet-400"/></label>; })}</div><div className="flex items-center justify-between mt-2 gap-2"><p className="text-[10px] leading-3.5 text-slate-400">Only checked components count. Weightage is normalized to exactly 40 when applied.</p><button onClick={applyWeights} disabled={applyingWeights || selectedTotal <= 0} className="shrink-0 bg-[#3d2aa0] text-white text-xs font-semibold rounded-lg px-3 py-1.5 shadow-sm disabled:opacity-50">{applyingWeights ? "Applying..." : "Apply"}</button></div></section>
+          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm"><div className="flex items-start justify-between gap-2 mb-1.5"><div><h3 className="text-sm font-semibold text-slate-900">Moderated Marks Criteria</h3><p className="text-[10px] leading-3.5 text-slate-500 mt-0.5">Rank ranges map continuously to a marks range. Marks are defined from and to.</p></div><div className="flex gap-1.5 shrink-0"><select value="Moderate" onChange={() => undefined} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option>Moderate</option></select><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div></div><div className="grid grid-cols-2 gap-1.5">{criteria.map((tier, index) => <div key={index} className="rounded-lg border border-slate-200 overflow-hidden"><div className="bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-slate-800">Tier {index + 1}</div><div className="grid grid-cols-4 divide-x divide-slate-200">{(["from","to","minMarks","maxMarks"] as const).map(field => <div key={field} className="p-1"><label className="block text-[8px] uppercase tracking-wide text-slate-400 mb-0.5">{field === "minMarks" ? "Marks from" : field === "maxMarks" ? "Marks to" : field}</label><input type="number" value={tier[field]} onChange={e => updateCriteria(index, field, e.target.value)} className="w-full min-w-0 rounded-md border border-slate-200 px-1.5 py-1.5 text-[11px] text-slate-800"/></div>)}</div></div>)}</div></section>
+        </div>
+        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${riskScoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderated}</td></tr>)}</tbody></table></div></section>
+      </> : data && <>
+        <div className="at-risk-layout">
+          <section className="at-risk-filter rounded-xl border border-slate-200 bg-white shadow-sm">
+            <div className="at-risk-filter-inner">
+              <div className="at-risk-filter-title"><h3>At-Risk Filters</h3><p>Choose a mark column, range and sort.</p></div>
+              <div className="at-risk-filter-controls">
+                <label><span>Column</span><select value={draftRiskColumn} onChange={e => setDraftRiskColumn(e.target.value as ColumnKey)}><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="moderatedAttendance">Moderated Att.</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></label>
+                <label><span>Lower bound</span><input type="number" min="0" max="40" value={draftRiskLower} onChange={e => setDraftRiskLower(num(e.target.value,draftRiskLower))}/></label>
+                <label><span>Upper bound</span><input type="number" min="0" max="40" value={draftRiskUpper} onChange={e => setDraftRiskUpper(num(e.target.value,draftRiskUpper))}/></label>
+                <label><span>Sort</span><select value={draftSortDirection} onChange={e => setDraftSortDirection(e.target.value as SortDirection)}><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></label>
+                <button type="button" onClick={applyRiskFilters} className="at-risk-apply">Apply</button>
+              </div>
+            </div>
           </section>
-          <section className="rounded-xl border border-slate-200 bg-white p-2.5 shadow-sm">
-            <div className="flex items-start justify-between gap-2 mb-1.5"><div><h3 className="text-sm font-semibold text-slate-900">Moderated Marks Criteria</h3><p className="text-[10px] leading-3.5 text-slate-500 mt-0.5">Rank ranges map continuously to a marks range. Marks are defined from and to.</p></div><div className="flex gap-1.5 shrink-0"><select value="Moderate" onChange={() => undefined} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option>Moderate</option></select><select value={sortDirection} onChange={e => setSortDirection(e.target.value as SortDirection)} className="border border-slate-200 rounded-lg px-2 py-1.5 text-[11px] text-slate-700 bg-white"><option value="none">No sort</option><option value="asc">Low to high</option><option value="desc">High to low</option></select></div></div>
-            <div className="grid grid-cols-2 gap-1.5">{criteria.map((tier, index) => <div key={index} className="rounded-lg border border-slate-200 overflow-hidden"><div className="bg-violet-50 px-2.5 py-1 text-[11px] font-semibold text-slate-800">Tier {index + 1}</div><div className="grid grid-cols-4 divide-x divide-slate-200">{(["from","to","minMarks","maxMarks"] as const).map(field => <div key={field} className="p-1"><label className="block text-[8px] uppercase tracking-wide text-slate-400 mb-0.5">{field === "minMarks" ? "Marks from" : field === "maxMarks" ? "Marks to" : field}</label><input type="number" value={tier[field]} onChange={e => updateCriteria(index, field, e.target.value)} className="w-full min-w-0 rounded-md border border-slate-200 px-1.5 py-1.5 text-[11px] text-slate-800"/></div>)}</div></div>)}</div>
+          <section className="at-risk-table rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+            <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-sm font-semibold text-slate-900">Filtered Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-[10px] rounded-full bg-slate-100 px-2 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div>
+            <div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[10px] border-collapse"><colgroup>{sortDirection !== "none" && <col className="w-[7%]"/>}<col className="w-[18%]"/><col className="w-[27%]"/><col className="w-[13%]"/><col className="w-[13%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500">{sortDirection !== "none" && <th className="text-center px-1 py-2">Rank</th>}<th className="text-left px-2 py-2">Enrollment</th><th className="text-left px-2 py-2">Student</th><th className="text-center px-1 py-2">Marks</th><th className="text-center px-1 py-2">Moderated</th><th className="text-center px-1 py-2">Status</th></tr></thead><tbody>{filteredRiskRows.map((row,index)=>{ const status = riskStatus(columnValue(row,riskColumn)); return <tr key={row.enrollmentNo} className="border-b border-slate-100">{sortDirection !== "none" && <td className="text-center px-1 py-1.5 text-slate-600">{index + 1}</td>}<td className="px-2 py-1.5 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-2 py-1.5 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-1 py-1.5 ${riskScoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</td><td className="text-center px-1 py-1.5 text-slate-700">{row.moderated}</td><td className="text-center px-1 py-1.5"><span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] ${status.className}`}>{status.label}</span></td></tr>})}</tbody></table></div>
           </section>
+          <aside className="at-risk-side-stack">
+            <section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-sm font-semibold text-slate-900">Distribution</h3><p className="mt-0.5 text-[10px] text-slate-500">Click a segment to stage that score range in the filters.</p><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`} labelLine={false} onClick={(_, index) => selectDistributionBucket(index)}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]} cursor="pointer"/>)}</Pie><Tooltip formatter={(value: number) => [`${value} students`, "Count"]}/></PieChart></ResponsiveContainer></div></section>
+            <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Top Students</h3><p className="text-[10px] text-slate-500 mt-0.5">Highest scores overall for the selected mark column.</p></div><div className="grid grid-cols-1 divide-y divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="px-3 py-2.5 flex items-center justify-between gap-3"><div className="text-[10px] font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-sm shrink-0 ${riskScoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
+          </aside>
         </div>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-3 py-2 border-b border-slate-100"><h3 className="text-sm font-semibold text-slate-900">Internal Marks Data</h3><p className="text-[10px] text-slate-500 mt-0.5">Basic marks use the selected components. Moderated marks are calculated from the configured rank criteria.</p></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed border-collapse text-[10px]"><colgroup><col className="w-[2.5%]"/><col className="w-[16%]"/><col className="w-[13%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[7.5%]"/><col className="w-[7.5%]"/><col className="w-[9%]"/><col className="w-[10%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-center px-0.5 py-2 font-semibold">#</th><th className="text-left px-1.5 py-2 font-semibold">Name</th><th className="text-center px-1 py-2 font-semibold">Enrollment</th>{HEADERS.map(h => <th key={h.key} className="text-center px-0.5 py-2 font-semibold leading-3">{h.label}</th>)}</tr></thead><tbody>{sortedRows.map((row,index) => <tr key={row.enrollmentNo} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/70"><td className="text-center px-0.5 py-1.5 text-slate-400 tabular-nums">{index+1}</td><td className="px-1.5 py-1.5 text-slate-800 font-medium truncate" title={row.name}>{row.name}</td><td className="text-center px-1 py-1.5 text-slate-500 truncate tabular-nums">{row.enrollmentNo}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.assignment}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.presentation}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.attendance}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.moderatedAttendanceWeighted}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem1}</td><td className="text-center px-0.5 py-1.5 text-slate-700 tabular-nums">{row.midsem2}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.basic)} tabular-nums`}>{row.basic}</td><td className={`text-center px-0.5 py-1.5 ${scoreClass(row.moderated)} tabular-nums`}>{row.moderated}</td></tr>)}</tbody></table></div></section>
-      </> : data && <>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4"><section className="lg:col-span-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm"><div className="flex items-center justify-between mb-3"><div><h3 className="text-base font-semibold text-slate-900">At-Risk Filters</h3><p className="text-xs text-slate-500 mt-0.5">Filter students by any calculated internal-mark value.</p></div><select value={riskColumn} onChange={e => setRiskColumn(e.target.value as ColumnKey)} className="border border-slate-200 rounded-lg px-2.5 py-2 text-xs"><option value="basic">Basic</option><option value="moderated">Moderated</option><option value="assignment">Assignment</option><option value="presentation">Presentation</option><option value="attendance">Attendance</option><option value="midsem1">Midsem 1</option><option value="midsem2">Midsem 2</option></select></div><div className="grid grid-cols-2 gap-3 max-w-sm"><label className="text-xs text-slate-500">Lower bound<input type="number" min="0" max="40" value={riskLower} onChange={e => setRiskLower(num(e.target.value,riskLower))} className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"/></label><label className="text-xs text-slate-500">Upper bound<input type="number" min="0" max="40" value={riskUpper} onChange={e => setRiskUpper(num(e.target.value,riskUpper))} className="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"/></label></div><div className="grid grid-cols-4 gap-2 mt-4">{riskDistribution.map((item,index)=><button key={item.name} onClick={()=>selectRiskRange(index)} className="rounded-lg border border-slate-200 p-2.5 text-left hover:bg-slate-50"><div className="text-xs text-slate-500">{item.name}</div><div className="text-lg font-semibold text-slate-900 mt-0.5">{item.value}</div></button>)}</div></section><section className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"><h3 className="text-base font-semibold text-slate-900">Distribution</h3><div className="h-52 mt-1"><ResponsiveContainer width="100%" height="100%"><PieChart><Pie data={riskDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70}>{riskDistribution.map((_,i)=><Cell key={i} fill={COLORS[i]}/>)}</Pie><Tooltip/></PieChart></ResponsiveContainer></div></section></div>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden"><div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between"><div><h3 className="text-base font-semibold text-slate-900">Filtered Students</h3><p className="text-xs text-slate-500 mt-0.5">Showing {filteredRiskRows.length} of {baseRows.length} students.</p></div><span className="text-xs rounded-full bg-slate-100 px-2.5 py-1 text-slate-600">{filteredRiskRows.length} Students</span></div><div className="max-h-[620px] overflow-y-auto overflow-x-hidden"><table className="w-full table-fixed text-[11px] border-collapse"><colgroup><col className="w-[16%]"/><col className="w-[20%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[12%]"/><col className="w-[14%]"/><col className="w-[14%]"/></colgroup><thead className="sticky top-0 bg-white z-10"><tr className="border-b border-slate-200 text-slate-500"><th className="text-left px-3 py-2.5">Enrollment</th><th className="text-left px-3 py-2.5">Student</th><th className="text-center px-2 py-2.5">Marks</th><th className="text-center px-2 py-2.5">Moderated</th><th className="text-center px-2 py-2.5">Rank</th><th className="text-center px-2 py-2.5">Tier</th><th className="text-center px-2 py-2.5">Status</th></tr></thead><tbody>{filteredRiskRows.map(row=><tr key={row.enrollmentNo} className="border-b border-slate-100"><td className="px-3 py-2 text-slate-500 truncate">{row.enrollmentNo}</td><td className="px-3 py-2 font-medium text-slate-800 truncate">{row.name}</td><td className={`text-center px-2 py-2 ${scoreClass(row.basic)}`}>{row.basic}</td><td className={`text-center px-2 py-2 ${scoreClass(row.moderated)}`}>{row.moderated}</td><td className="text-center px-2 py-2 text-slate-600">{row.rank}</td><td className="text-center px-2 py-2 text-slate-600">{criteria.findIndex(c=>row.rank>=c.from&&row.rank<=c.to)+1||"—"}</td><td className="text-center px-2 py-2"><span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] ${row.basic<16?"bg-red-50 text-red-600":row.basic<24?"bg-amber-50 text-amber-700":"bg-emerald-50 text-emerald-700"}`}>{row.basic<16?"Critical Risk":row.basic<24?"Needs Attention":"Good"}</span></td></tr>)}</tbody></table></div></section>
-        <section className="rounded-xl border border-slate-200 bg-white shadow-sm mt-3 overflow-hidden"><div className="px-4 py-3 border-b border-slate-100"><h3 className="text-base font-semibold text-slate-900">Top Students in Filter</h3></div><div className="grid grid-cols-1 sm:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">{topFive.map(row=><div key={row.enrollmentNo} className="p-3"><div className="text-xs font-semibold text-slate-800 truncate">{row.name}</div><div className={`text-lg mt-1 ${scoreClass(columnValue(row,riskColumn))}`}>{columnValue(row,riskColumn)}</div></div>)}</div></section>
       </>}
     </main>
   </div>;
diff --git a/pages/subject-analysis/index.tsx b/pages/subject-analysis/index.tsx
new file mode 100644
index 0000000..13dfe92
--- /dev/null
+++ b/pages/subject-analysis/index.tsx
@@ -0,0 +1,45 @@
+import { GetServerSideProps } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "../../lib/authOptions";
+import { prisma } from "../../lib/prisma";
+import Link from "next/link";
+import { useState } from "react";
+import { BookOpen, ArrowLeft, ArrowRight, BarChart3 } from "lucide-react";
+
+interface SubjectOption { id: string; sectionId: string; name: string; code: string; }
+interface ClassOption { id: string; label: string; }
+interface Props { teacherName: string; classes: ClassOption[]; subjects: SubjectOption[]; }
+
+function formatClassLabel(department: string, classNumber: string, semester: number) {
+  return `${department}-${classNumber} Sem ${semester}`;
+}
+
+export default function SubjectAnalysisChooser({ teacherName, classes, subjects }: Props) {
+  const [selectedClass, setSelectedClass] = useState(classes[0]?.id || "");
+  const selectedSubjects = subjects.filter((subject) => subject.sectionId === selectedClass);
+  return (
+    <div className="min-h-screen bg-[#fffdf8] text-[#17223b] lg:flex">
+      <aside className="hidden w-[220px] shrink-0 border-r border-[#e8e7e3] bg-white lg:flex lg:min-h-screen lg:flex-col lg:fixed lg:inset-y-0 lg:left-0">
+        <div className="px-5 pt-6"><Link href="/dashboard" className="flex items-center gap-3"><span className="grid h-10 w-10 place-items-center rounded-xl bg-[#39268f] text-white shadow-[0_10px_25px_rgba(57,38,143,0.2)]"><BarChart3 size={21} strokeWidth={2.2} /></span><span className="text-[20px] font-extrabold tracking-[-0.7px]">ClassPulse</span></Link></div>
+        <nav className="mt-8 space-y-1 px-3 text-sm font-medium text-[#626b80]"><Link href="/dashboard" className="flex items-center gap-3 rounded-xl px-3 py-3 hover:bg-[#f6f4ff] hover:text-[#38258e]"><BarChart3 size={18} /> Dashboard</Link><Link href="/subject-analysis" className="flex items-center gap-3 rounded-xl bg-[#eeeaff] px-3 py-3 font-semibold text-[#38258e]"><BookOpen size={18} /> Subject Analysis</Link></nav>
+      </aside>
+      <main className="w-full lg:ml-[220px]"><div className="relative min-h-screen overflow-hidden"><div className="pointer-events-none absolute right-0 top-0 h-[330px] w-[650px] opacity-70" style={{ background: "radial-gradient(circle at 70% 20%, rgba(111,91,231,.16), transparent 48%), linear-gradient(145deg, transparent 35%, rgba(111,91,231,.07) 75%, transparent)" }} /><div className="relative mx-auto max-w-[1100px] px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
+        <Link href="/dashboard" className="inline-flex items-center gap-2 text-sm font-semibold text-[#5b4ee6] hover:underline"><ArrowLeft size={16} /> Back to Dashboard</Link>
+        <div className="mt-8"><p className="text-sm font-semibold text-[#5b4ee6]">Subject Analysis</p><h1 className="mt-2 text-[34px] font-extrabold tracking-[-1.4px] sm:text-[40px]">Choose a class and subject</h1><p className="mt-2 max-w-[650px] text-sm leading-6 text-[#6f7890]">Select a class you are assigned to, then choose one of your assigned subjects for that class.</p></div>
+        <section className="mt-8 rounded-2xl border border-[#e5e4e1] bg-white p-6 shadow-[0_8px_30px_rgba(31,35,49,0.05)] sm:p-8"><label htmlFor="class" className="block text-sm font-bold">Class</label><select id="class" value={selectedClass} onChange={(event) => setSelectedClass(event.target.value)} className="mt-2 w-full rounded-xl border border-[#dfe2e8] bg-white px-4 py-3 text-sm outline-none focus:border-[#6b5be7] focus:ring-2 focus:ring-[#6b5be7]/10">{classes.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}</select>
+          <div className="mt-7"><div className="flex items-center justify-between"><label className="text-sm font-bold">Assigned Subjects</label><span className="text-xs text-[#8991a2]">{selectedSubjects.length} available</span></div>{selectedSubjects.length === 0 ? <div className="mt-3 rounded-xl border border-dashed border-[#dfe2e8] bg-[#fafafa] p-5 text-sm text-[#747d91]">No subjects are assigned to you for this class.</div> : <div className="mt-3 grid gap-3 sm:grid-cols-2">{selectedSubjects.map((subject) => <Link key={subject.id} href={`/subject-analysis/${subject.id}`} className="group flex items-center gap-4 rounded-xl border border-[#e5e4e1] bg-white p-4 transition hover:-translate-y-0.5 hover:border-[#d9d2ff] hover:shadow-[0_8px_24px_rgba(57,38,143,0.08)]"><span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[#fff5e7] text-[#ee9412]"><BookOpen size={20} /></span><span className="min-w-0 flex-1"><span className="block text-sm font-bold">{subject.name}</span><span className="mt-1 block text-xs text-[#7a8295]">{subject.code}</span></span><ArrowRight size={18} className="text-[#626b80] transition group-hover:translate-x-1 group-hover:text-[#4b36a7]" /></Link>)}</div>}</div>
+        </section><p className="mt-5 text-xs text-[#8991a2]">Signed in as {teacherName}. Only your assigned classes and subjects are shown.</p>
+      </div></div></main>
+    </div>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  if (!session?.user) return { redirect: { destination: "/login", permanent: false } };
+  const userId = (session.user as any).id; const role = (session.user as any).role;
+  const subjectsRaw = await prisma.subject.findMany({ where: role === "ADMIN" ? {} : { assignments: { some: { teacherId: userId } } }, include: { section: { include: { class: { include: { department: true } } } } }, orderBy: [{ section: { class: { semester: "asc" } } }, { name: "asc" }] });
+  const classMap = new Map<string, ClassOption>();
+  for (const subject of subjectsRaw) { const c = subject.section.class; classMap.set(c.id, { id: c.id, label: formatClassLabel(c.department.name, subject.section.name, c.semester) }); }
+  return { props: { teacherName: session.user.name || session.user.email, classes: Array.from(classMap.values()), subjects: subjectsRaw.map((subject) => ({ id: subject.id, sectionId: subject.section.class.id, name: subject.name, code: subject.code })) } };
+};
diff --git a/prisma/fix-geetanjali-assignments.ts b/prisma/fix-geetanjali-assignments.ts
new file mode 100644
index 0000000..b594f62
--- /dev/null
+++ b/prisma/fix-geetanjali-assignments.ts
@@ -0,0 +1,56 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  const teacher = await prisma.user.findUnique({
+    where: { email: "geetanjali@demo.edu" },
+  });
+
+  if (!teacher) {
+    throw new Error("Dr. Geetanjali Sharma was not found.");
+  }
+
+  const cls = await prisma.class.findFirst({
+    where: {
+      program: "B.Tech ECE 2",
+      academicYear: "2026-27",
+      semester: 7,
+    },
+    include: { sections: true },
+  });
+
+  const section = cls?.sections.find((item) => item.name === "A");
+  if (!section) {
+    console.log("ECE 2 Sem 7 Section A not found; nothing to fix.");
+    return;
+  }
+
+  // DA 338 T belongs to the old Sem 6 data and must not appear in
+  // Geetanjali's ECE 2 Sem 7 subject assignments.
+  const legacySubject = await prisma.subject.findFirst({
+    where: {
+      sectionId: section.id,
+      code: "DA 338 T",
+    },
+  });
+
+  if (legacySubject) {
+    const result = await prisma.assignment.deleteMany({
+      where: {
+        teacherId: teacher.id,
+        subjectId: legacySubject.id,
+      },
+    });
+    console.log(`Removed ${result.count} legacy DA assignment(s) from Geetanjali's ECE 2 Sem 7.`);
+  }
+
+  console.log("Geetanjali ECE 2 Sem 7 assignment fix complete.");
+}
+
+main()
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  })
+  .finally(async () => prisma.$disconnect());
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 9959b4c..47ca37c 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -12,6 +12,11 @@ enum Role {
   TEACHER
 }
 
+enum SubjectType {
+  THEORY
+  LAB
+}
+
 model College {
   id          String       @id @default(cuid())
   name        String
@@ -89,6 +94,7 @@ model Subject {
   id           String       @id @default(cuid())
   name         String
   code         String
+  type         SubjectType  @default(THEORY)
   section      Section      @relation(fields: [sectionId], references: [id])
   sectionId    String
   sheetLink    SheetLink?
diff --git a/prisma/seed-ece2-sem7-students.ts b/prisma/seed-ece2-sem7-students.ts
new file mode 100644
index 0000000..e16a081
--- /dev/null
+++ b/prisma/seed-ece2-sem7-students.ts
@@ -0,0 +1,117 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+const students = [
+  ["5215002823", "Pranay Bhardwaj", "pranay.bhardwaj20090040@gmail.com"],
+  ["5315002823", "kunal jotwani", "kunalye80@gmail.com"],
+  ["5415002823", "Sanchit Sharma", "sanchitsharma917@gmail.com"],
+  ["5515002823", "Sajal Singhal", "specialsajal@gmail.com"],
+  ["5615002823", "Khyati Kakkar", "kkakkar5k@gmail.com"],
+  ["5715002823", "chetan kumar", "ck769825@gmail.com"],
+  ["5815002823", "Manish", "officialmanishsingh03@gmail.com"],
+  ["5915002823", "ISHA JHA", "ishujha360@gmail.com"],
+  ["6015002823", "Omar Rizwan", "omarrizwan22424@gmail.com"],
+  ["6115002823", "ASHISH SHARMA", "ashishsharma23042004@gmail.com"],
+  ["6215002823", "Harsh rautela", "HARSH.RAUTELA15@GMAIL.COM"],
+  ["6315002823", "SATYAJEET KUMAR", "KUMARSATYAJEETANAND@GMAIL.COM"],
+  ["6415002823", "piyush kumar singh", "piyushsingh22617@gmail.com"],
+  ["6515002823", "Arpit Singh", "arpitsingh221972@gmail.com"],
+  ["6615002823", "Syed Faizaan Ahmad", "Syedashffaizaan1999@gmail.com"],
+  ["6715002823", "Abhimanyu", "abhimanyu3704@gmail.com"],
+  ["6815002823", "UTTAM KUMAR", "uttamkumar192006@gmail.com"],
+  ["6915002823", "Aastha Raj Singh", "aastharsingh2004@gmail.com"],
+  ["7015002823", "Zishan Afzal", "zishanafzal26182@gmail.com"],
+  ["7115002823", "Saksham Shaurya", "SAKSHAMSHAURYAEXAM@GMAIL.COM"],
+  ["7215002823", "NEERAJ", "neerajbeniwal2015@gmail.com"],
+  ["7315002823", "Kartikey Bhardwaj", "kartikeybhardwaj2428@gmail.com"],
+  ["7415002823", "Harsh Jindal", "hjinal018@gmail.com"],
+  ["7515002823", "Karan Vasisth", "kvasisth2000@gmail.com"],
+  ["7615002823", "MANISH KUMAR", "manish0o09955@gmail.com"],
+  ["7715002823", "SHIVAM TIWARI", "shivamtiwari020505@gmail.com"],
+  ["7815002823", "Ayush Uniyal", "unialayush2@gmail.com"],
+  ["7915002823", "Divesh", "keindivesh@gmail.com"],
+  ["8015002823", "DAKSH TIWARI", "daksh.tiwari23@gmail.com"],
+  ["8215002823", "Rishabh", "rishabh06x@gmail.com"],
+  ["8315002823", "Vivek Das", "dasv3125@gmail.com"],
+  ["8415002823", "UDIT RATHORE", "uditrathore0602@gmail.com"],
+  ["8515002823", "Pranav Mittal", "ppvm.0112@gmail.com"],
+  ["8715002823", "Aditya Jha", "adityajha9313@gmail.com"],
+  ["8815002823", "kushagra pandey", "kushagrapande302004@gmail.com"],
+  ["8915002823", "Rohit", "rk9104593@gmail.com"],
+  ["9015002823", "Gaurav kumar", "gouravkm314@gmail.com"],
+  ["9115002823", "APARMIT SRIVASTAVA", "aparmitsrivastava1@gmail.com"],
+  ["9215002823", "Prashant", "kumarp89180@gmail.com"],
+  ["9315002823", "Sarthak Gupta", "sarthakgupta.1105@gmail.com"],
+  ["9415002823", "saunak sharma", "saunaksharma@gmail.com"],
+  ["9515002823", "Rohan Kumar", "rohan.kumar52003@gmail.com"],
+  ["9615002823", "YASHWANT KUMAR BEDIA", "yash613948@gmail.com"],
+  ["9715002823", "Khushal", "officialkhushal22@gmail.com"],
+  ["9815002823", "Abhi Rana", "Abhirajput25106@gmail.com"],
+  ["10015002823", "MOHD SHAHABUDDIN", "mohdshahabuddin039@gmail.com"],
+  ["10115002823", "Suraj Kumar", "suraj2004ksmile@gmail.com"],
+  ["70115002823", "Radhika Garg", "grgradhika18@gmail.com"],
+  ["35215002823", "RAHUL SHARMA", "rahul.0703bkn@gmail.com"],
+  ["35315002823", "TANISHA ROSE", "tanisharose91365@gmail.com"],
+  ["35415002823", "VINIT MEHLAWAT", "vinitmehlawat07@gmail.com"],
+  ["35615002823", "VRINDA DIXIT", "dixitvrinda1704@gmail.com"],
+  ["35715002823", "SHINJINI DATTA", "shinjini.005@gmail.com"],
+  ["35915002823", "YASHASWINI NARULA", "yashaswininarula@gmail.com"],
+  ["75215002823", "Yaksh Verma", "bryant23.yv@gmail.com"],
+  ["20115002823", "Abhishek", "ag8882138469@gmail.com"],
+  ["20315002823", "Ansh Raj", "anshrajjee3@gmail.com"],
+  ["20515002823", "Sneha Juyal", "snehajuyal20@gmail.com"],
+  ["20615002823", "Richa", "richabaghel25@gmail.com"],
+  ["60915002824", "Raj Gandhi", "rg7065455@gmail.com"],
+  ["60215002824", "Gaurav", "gauravkukreja914@gmail.com"],
+  ["60815002824", "Sweta Kumari", "swetachandra1212@gmail.com"],
+  ["60415002824", "CH Hareesh", "chhareesh11@gmail.com"],
+  ["60715002824", "Kunal Kumar", "KKUNAL10169@GMAIL.COM"],
+  ["6815002822", "Anant Pratap Singh", "ss4479279@gmail.com"],
+] as const;
+
+async function main() {
+  const department = await prisma.department.findFirst({
+    where: { name: "ECE", college: { id: "demo-college" } },
+  });
+  if (!department) throw new Error("ECE department not found.");
+
+  const cls = await prisma.class.findFirst({
+    where: {
+      departmentId: department.id,
+      academicYear: "2026-27",
+      semester: 7,
+      OR: [{ program: "B.Tech ECE 2" }, { program: "B.Tech ECE" }],
+    },
+  });
+  if (!cls) throw new Error("ECE 2 Semester 7 class not found.");
+
+  const section = await prisma.section.findFirst({
+    where: { classId: cls.id, name: "A" },
+  });
+  if (!section) throw new Error("ECE 2 Semester 7 Section A not found.");
+
+  for (const [enrollmentNo, name, email] of students) {
+    await prisma.student.upsert({
+      where: { sectionId_enrollmentNo: { sectionId: section.id, enrollmentNo } },
+      update: { name, email },
+      create: { sectionId: section.id, enrollmentNo, name, email },
+    });
+  }
+
+  await prisma.section.update({
+    where: { id: section.id },
+    data: { strength: students.length },
+  });
+
+  console.log(`Seeded ${students.length} students into ECE 2 Sem 7 Section A.`);
+}
+
+main()
+  .catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });
diff --git a/styles/academic-table-fix.css b/styles/academic-table-fix.css
new file mode 100644
index 0000000..f5e3af7
--- /dev/null
+++ b/styles/academic-table-fix.css
@@ -0,0 +1,28 @@
+.academic-content-grid {
+  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr) !important;
+}
+
+.academic-content-grid .analysis-table-panel {
+  min-width: 0;
+}
+
+.academic-content-grid .analysis-table-panel > .overflow-auto {
+  overflow-x: hidden;
+}
+
+.academic-content-grid .analysis-table-panel table {
+  width: 100%;
+  min-width: 0 !important;
+  table-layout: fixed;
+}
+
+.academic-content-grid .analysis-table-panel th:first-child,
+.academic-content-grid .analysis-table-panel td:first-child {
+  width: 24%;
+}
+
+@media (max-width: 1100px) {
+  .academic-content-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}