diff --git a/src/routes/_authenticated/classes.$id.tsx b/src/routes/_authenticated/classes.$id.tsx
new file mode 100644
index 0000000..7f20572
--- /dev/null
+++ b/src/routes/_authenticated/classes.$id.tsx
@@ -0,0 +1,46 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/hooks/use-auth";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { ArrowLeft, Lock, Loader2 } from "lucide-react";
+import { RosterManager, GradebookGrid, GradingConfigEditor } from "@/components/gradebook";
+
+export const Route = createFileRoute("/_authenticated/classes/$id")({
+  head: () => ({ meta: [{ title: "Class — School Portal" }] }),
+  component: ClassDetail,
+});
+
+function ClassDetail() {
+  const { id } = Route.useParams();
+  const { user, roles } = useAuth();
+  const isAdmin = roles.includes("admin");
+
+  const { data: cls, isLoading } = useQuery({
+    queryKey: ["class", id],
+    queryFn: async () => (await supabase.from("classes").select("*").eq("id", id).single()).data,
+  });
+  const isTeacher = !!cls && cls.teacher_id === user?.id;
+  const canEdit = isAdmin || isTeacher;
+
+  if (isLoading) return <div className="p-8"><Loader2 className="h-5 w-5 animate-spin text-muted-foreground" /></div>;
+  if (!canEdit) return <div className="p-8"><Lock className="h-6 w-6 text-muted-foreground" /><h1 className="mt-2 text-xl font-semibold">Not available</h1><p className="text-sm text-muted-foreground">You don't have access to this class.</p></div>;
+
+  return (
+    <div className="p-6 md:p-8 max-w-5xl">
+      <Link to="/classes" className="text-sm text-muted-foreground inline-flex items-center gap-1 mb-3"><ArrowLeft className="h-4 w-4" /> All classes</Link>
+      <h1 className="text-2xl font-semibold">{cls?.name}</h1>
+
+      <Tabs defaultValue="gradebook" className="mt-6">
+        <TabsList>
+          <TabsTrigger value="gradebook">Gradebook</TabsTrigger>
+          <TabsTrigger value="roster">Roster</TabsTrigger>
+          <TabsTrigger value="grading">Grading setup</TabsTrigger>
+        </TabsList>
+        <TabsContent value="gradebook" className="mt-4"><GradebookGrid classId={id} canEdit={canEdit} /></TabsContent>
+        <TabsContent value="roster" className="mt-4"><RosterManager classId={id} canAssign={isAdmin} /></TabsContent>
+        <TabsContent value="grading" className="mt-4"><GradingConfigEditor classId={id} /></TabsContent>
+      </Tabs>
+    </div>
+  );
+}