diff --git a/Frontend/grader-frontend/src/app/instructor/class/[class_id]/assignments/[assignment_id]/page.tsx b/Frontend/grader-frontend/src/app/instructor/class/[class_id]/assignments/[assignment_id]/page.tsx
index 74cd64e7..5a354e6c 100644
--- a/Frontend/grader-frontend/src/app/instructor/class/[class_id]/assignments/[assignment_id]/page.tsx
+++ b/Frontend/grader-frontend/src/app/instructor/class/[class_id]/assignments/[assignment_id]/page.tsx
@@ -1,17 +1,28 @@
-'use client';
+"use client";
 
-import { AssignmentForm, AssignmentFormResult } from "@/components/assignment-form";
+import {
+  AssignmentForm,
+  AssignmentFormResult,
+} from "@/components/assignment-form";
 import { api } from "@/lib/api";
 import { UpdateAssignmentPayload } from "@/lib/api/type";
 import { parseDateTime } from "@internationalized/date";
-import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { use } from "react";
 import { useClassData } from "../../class-data-context";
 
-export default function Page({ params }: { params: Promise<{ assignment_id: string; }>; }) {
+export default function Page({
+  params,
+}: {
+  params: Promise<{ assignment_id: string }>;
+}) {
   const { assignment_id } = use(params);
   const { classData } = useClassData();
   const t = useTranslations();
@@ -21,7 +32,7 @@ export default function Page({ params }: { params: Promise<{ assignment_id: stri
   const queryClient = useQueryClient();
 
   const { data: assignment } = useSuspenseQuery({
-    queryKey: ['class', classData.id, 'assignment', assignmentId],
+    queryKey: ["class", classData.id, "assignment", assignmentId],
     queryFn: () => api.assignments.getByIdI(assignmentId),
   });
 
@@ -59,9 +70,11 @@ export default function Page({ params }: { params: Promise<{ assignment_id: stri
       const promises: Promise<any>[] = [];
 
       if (data.toRemoveExistingFileIds.length > 0) {
-        promises.push(...data.toRemoveExistingFileIds.map(fileId =>
-          api.assignments.removeFile(fileId)
-        ));
+        promises.push(
+          ...data.toRemoveExistingFileIds.map((fileId) =>
+            api.assignments.removeFile(fileId)
+          )
+        );
       }
 
       promises.push(api.assignments.update(assignmentId, payload));
@@ -69,19 +82,20 @@ export default function Page({ params }: { params: Promise<{ assignment_id: stri
       await Promise.all(promises);
     },
     onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ['class', classData.id, 'assignment'] });
-      toast.success(t('assignment.form.messages.updateSuccess'));
+      await queryClient.invalidateQueries({
+        queryKey: ["class", classData.id, "assignment"],
+      });
+      toast.success(t("assignment.form.messages.updateSuccess"));
       router.push(`/instructor/class/${classData.id}/assignments`);
     },
     onError: (error) => {
       console.error(error);
-      toast.error(t('assignment.form.messages.updateError'), {
+      toast.error(t("assignment.form.messages.updateError"), {
         description: error.message,
       });
     },
   });
 
-
   function submit(data: AssignmentFormResult) {
     mutation.mutate(data);
   }
@@ -96,14 +110,21 @@ export default function Page({ params }: { params: Promise<{ assignment_id: stri
         classId={classData.id}
         isPending={mutation.isPending}
         submit={submit}
-        cancel={() => router.push(`/instructor/class/${classData.id}/assignments`)}
-        existingFiles={assignment.additionalFileIds?.map(id => ({ id, name: `File ${id}` })) || []}
+        cancel={() =>
+          router.push(`/instructor/class/${classData.id}/assignments`)
+        }
+        existingFiles={
+          assignment.additionalFileIds?.map((id) => ({
+            id,
+            name: `File ${id}`,
+          })) || []
+        }
         prefill={{
           name: assignment.name,
           number: assignment.number,
           publish: assignment.publish.toString(),
           due: assignment.due.toString(),
-          languageIds: assignment.languages.map(it => it.id),
+          languageIds: assignment.languages.map((it) => it.id),
           examMode: assignment.examMode,
           allowLateSubmission: !assignment.closeOnDue,
           showScoreOnLock: assignment.showScoreOnLock,
@@ -111,7 +132,7 @@ export default function Page({ params }: { params: Promise<{ assignment_id: stri
           assignedGroupIds: assignment.assignedGroupIds,
           testCode: assignment.testCode,
           secretTestCode: assignment.secretTestCode,
-          questions: assignment.questions.map(q => ({
+          questions: assignment.questions.map((q) => ({
             name: q.name,
             description: q.description,
             template: q.template,
diff --git a/Frontend/grader-frontend/src/app/student/[class_id]/assignment/page.tsx b/Frontend/grader-frontend/src/app/student/[class_id]/assignment/page.tsx
index d6610c40..1a825ee1 100644
--- a/Frontend/grader-frontend/src/app/student/[class_id]/assignment/page.tsx
+++ b/Frontend/grader-frontend/src/app/student/[class_id]/assignment/page.tsx
@@ -1,10 +1,16 @@
-'use client';
+"use client";
 
 import { Badge } from "@/components/ui/badge";
 import { api } from "@/lib/api";
 import type { StudentAssignment, AssignmentStatus } from "@/lib/api/type";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { AlertCircle, Calendar, CheckCircle, Clock, XCircle } from "lucide-react";
+import {
+  AlertCircle,
+  Calendar,
+  CheckCircle,
+  Clock,
+  XCircle,
+} from "lucide-react";
 import { useLocale } from "next-intl";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -16,7 +22,7 @@ export default function Page() {
   // const classId = 420;
   const assignmentsQuery = useSuspenseQuery({
     queryKey: ["student", "class", classId, "assignments"],
-    queryFn: () => api.assignments.listByClass(classId)
+    queryFn: () => api.assignments.listByClass(classId),
   });
 
   return (
@@ -38,34 +44,45 @@ function StudentAssignmentList({
   const processedAssignments = useMemo(() => {
     const now = new Date();
 
-    return assignments.map(assignment => {
-      const publishDate = assignment.publish.toDate(Intl.DateTimeFormat().resolvedOptions().timeZone);
-      const dueDate = assignment.due.toDate(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    return assignments
+      .map((assignment) => {
+        const publishDate = assignment.publish.toDate(
+          Intl.DateTimeFormat().resolvedOptions().timeZone
+        );
+        const dueDate = assignment.due.toDate(
+          Intl.DateTimeFormat().resolvedOptions().timeZone
+        );
 
-      // Determine if assignment is available
-      const isAvailable = publishDate <= now;
-      const isOverdue = dueDate < now;
-      const isDueSoon = !isOverdue && dueDate.getTime() - now.getTime() < 24 * 60 * 60 * 1000; // 24 hours
+        // Determine if assignment is available
+        const isAvailable = publishDate <= now;
+        const isOverdue = dueDate < now;
+        const isDueSoon =
+          !isOverdue && dueDate.getTime() - now.getTime() < 24 * 60 * 60 * 1000; // 24 hours
 
-      return {
-        ...assignment,
-        publishDate,
-        dueDate,
-        isAvailable,
-        isOverdue,
-        isDueSoon,
-      };
-    }).sort((a, b) => {
-      // Sort by due date, with available assignments first
-      if (a.isAvailable !== b.isAvailable) {
-        return a.isAvailable ? -1 : 1;
-      }
-      return a.dueDate.getTime() - b.dueDate.getTime();
-    });
+        return {
+          ...assignment,
+          publishDate,
+          dueDate,
+          isAvailable,
+          isOverdue,
+          isDueSoon,
+        };
+      })
+      .sort((a, b) => {
+        // Sort by due date, with available assignments first
+        if (a.isAvailable !== b.isAvailable) {
+          return a.isAvailable ? -1 : 1;
+        }
+        return a.dueDate.getTime() - b.dueDate.getTime();
+      });
   }, [assignments]);
 
-  const todoAssignments = processedAssignments.filter(a => a.isAvailable && a.status !== "completed");
-  const doneAssignments = processedAssignments.filter(a => a.status === "completed");
+  const todoAssignments = processedAssignments.filter(
+    (a) => a.isAvailable && a.status !== "completed"
+  );
+  const doneAssignments = processedAssignments.filter(
+    (a) => a.status === "completed"
+  );
 
   return (
     <div className="space-y-8">
@@ -82,18 +99,20 @@ function StudentAssignmentList({
               <div>Dates</div>
               <div>Score</div>
             </div>
-          </div>          <div className="space-y-3">            {todoAssignments.map((assignment) => (
-            <StudentAssignmentCard
-              key={assignment.id}
-              assignment={assignment}
-              borderColor="border-l-blue-500"
-              isOverdue={assignment.isOverdue}
-            />
-          ))}
+          </div>{" "}
+          <div className="space-y-3">
+            {" "}
+            {todoAssignments.map((assignment) => (
+              <StudentAssignmentCard
+                key={assignment.id}
+                assignment={assignment}
+                borderColor="border-l-blue-500"
+                isOverdue={assignment.isOverdue}
+              />
+            ))}
           </div>
         </section>
       )}
-
       {/* Done Assignments */}
       {doneAssignments.length > 0 && (
         <section>
@@ -107,21 +126,27 @@ function StudentAssignmentList({
               <div>Dates</div>
               <div>Score</div>
             </div>
-          </div>          <div className="space-y-3">            {doneAssignments.map((assignment) => (
-            <StudentAssignmentCard
-              key={assignment.id}
-              assignment={assignment}
-              borderColor="border-l-green-500"
-              isOverdue={false}
-            />
-          ))}
+          </div>{" "}
+          <div className="space-y-3">
+            {" "}
+            {doneAssignments.map((assignment) => (
+              <StudentAssignmentCard
+                key={assignment.id}
+                assignment={assignment}
+                borderColor="border-l-green-500"
+                isOverdue={false}
+              />
+            ))}
           </div>
         </section>
-      )}      {/* Empty State */}
+      )}{" "}
+      {/* Empty State */}
       {assignments.length === 0 && (
         <div className="text-center py-12">
           <div className="text-gray-500 text-lg">No assignments available</div>
-          <div className="text-gray-400 text-sm mt-2">Check back later for new assignments</div>
+          <div className="text-gray-400 text-sm mt-2">
+            Check back later for new assignments
+          </div>
         </div>
       )}
     </div>
@@ -139,7 +164,7 @@ type ProcessedAssignment = StudentAssignment & {
 function StudentAssignmentCard({
   assignment,
   borderColor,
-  isOverdue
+  isOverdue,
 }: {
   assignment: ProcessedAssignment;
   borderColor: string;
@@ -149,12 +174,12 @@ function StudentAssignmentCard({
 
   const formatDateTime = (date: Date) => {
     return new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
     }).format(date);
   };
   const getStatusInfo = (assignment: ProcessedAssignment) => {
@@ -163,7 +188,7 @@ function StudentAssignmentCard({
         icon: <Clock className="w-4 h-4" />,
         text: "Not Available",
         variant: "secondary" as const,
-        color: "text-gray-600"
+        color: "text-gray-600",
       };
     }
 
@@ -172,7 +197,7 @@ function StudentAssignmentCard({
         icon: <XCircle className="w-4 h-4" />,
         text: "Missing",
         variant: "destructive" as const,
-        color: "text-red-600"
+        color: "text-red-600",
       };
     }
 
@@ -181,7 +206,7 @@ function StudentAssignmentCard({
         icon: <AlertCircle className="w-4 h-4" />,
         text: "Due Soon",
         variant: "outline" as const,
-        color: "text-orange-600"
+        color: "text-orange-600",
       };
     }
 
@@ -192,59 +217,66 @@ function StudentAssignmentCard({
           icon: <CheckCircle className="w-4 h-4" />,
           text: "Submitted",
           variant: "default" as const,
-          color: "text-green-600"
+          color: "text-green-600",
         };
       case "partially-completed":
         return {
           icon: <AlertCircle className="w-4 h-4" />,
           text: "Draft",
           variant: "outline" as const,
-          color: "text-blue-600"
+          color: "text-blue-600",
         };
       case "new":
         return {
           icon: <Clock className="w-4 h-4" />,
           text: "Assigned",
           variant: "outline" as const,
-          color: "text-gray-600"
+          color: "text-gray-600",
         };
       case "lated":
         return {
           icon: <XCircle className="w-4 h-4" />,
           text: "Missing",
           variant: "destructive" as const,
-          color: "text-red-600"
+          color: "text-red-600",
         };
       case "due-soon":
         return {
           icon: <AlertCircle className="w-4 h-4" />,
           text: "Due Soon",
           variant: "outline" as const,
-          color: "text-orange-600"
+          color: "text-orange-600",
         };
       default:
         return {
           icon: <Clock className="w-4 h-4" />,
           text: "Available",
           variant: "outline" as const,
-          color: "text-gray-600"
+          color: "text-gray-600",
         };
     }
   };
 
   const statusInfo = getStatusInfo(assignment);
-  const actualBorderColor = isOverdue ? 'border-l-red-500' : borderColor;
+  const actualBorderColor = isOverdue ? "border-l-red-500" : borderColor;
 
   return (
     <Link href={`./assignment/${assignment.id}`} className="block">
-      <div className={`flex gap-4 items-center rounded-lg overflow-clip border shadow-sm transition-all hover:shadow-md border-l-4 ${actualBorderColor} ${isOverdue ? 'opacity-80' : ''}`}>
+      <div
+        className={`flex gap-4 items-center rounded-lg overflow-clip border shadow-sm transition-all hover:shadow-md border-l-4 ${actualBorderColor} ${
+          isOverdue ? "opacity-80" : ""
+        }`}
+      >
         <div className="flex items-center self-stretch justify-center w-12 mr-12 bg-secondary font-semibold text-lg">
           {assignment.number}
         </div>
         <div className="flex-1 grid grid-cols-4 gap-4 items-center py-4">
           <div className="font-medium">{assignment.name}</div>
           <div className="flex items-center gap-2">
-            <Badge variant={statusInfo.variant} className="flex items-center gap-1">
+            <Badge
+              variant={statusInfo.variant}
+              className="flex items-center gap-1"
+            >
               {statusInfo.icon}
               {statusInfo.text}
             </Badge>
@@ -255,13 +287,21 @@ function StudentAssignmentCard({
               {formatDateTime(assignment.publishDate)}
             </div>
             <div className="flex items-center gap-1 mt-1">
-              <Clock className={`w-3 h-3 ${assignment.isDueSoon || assignment.isOverdue ? 'text-red-500' : 'text-gray-500'}`} />
+              <Clock
+                className={`w-3 h-3 ${
+                  assignment.isDueSoon || assignment.isOverdue
+                    ? "text-red-500"
+                    : "text-gray-500"
+                }`}
+              />
               {formatDateTime(assignment.dueDate)}
             </div>
           </div>
           <div className="text-sm">
             <div className="font-medium">{assignment.score || 0} points</div>
-            <div className={`text-xs ${statusInfo.color}`}>{statusInfo.text}</div>
+            <div className={`text-xs ${statusInfo.color}`}>
+              {statusInfo.text}
+            </div>
           </div>
         </div>
       </div>
diff --git a/Frontend/grader-frontend/src/app/student/[class_id]/layout.tsx b/Frontend/grader-frontend/src/app/student/[class_id]/layout.tsx
index 49c67b64..5fb7a26b 100644
--- a/Frontend/grader-frontend/src/app/student/[class_id]/layout.tsx
+++ b/Frontend/grader-frontend/src/app/student/[class_id]/layout.tsx
@@ -7,17 +7,91 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
+import { api } from "@/lib/api";
+import { notFound } from "next/navigation";
+
+import LayoutHeader from "./layoutHeader";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+
+interface ClassData {
+  id: number;
+  name: string;
+  courseId: string;
+  year: number;
+  semester: string;
+  headerImageUrl?: string;
+}
+
+// async function getClassDetails(classId: number): Promise<ClassData> {
+//   const target = await api.classes.getById(classId);
+//   if (!target) {
+//     notFound();
+//   }
+//   return {
+//     // ...target,
+//     id: classId,
+//     name: target.courseName,
+//     semester: "1",
+//     year: 2025,
+//     headerImageUrl: target.imageUrl,
+//     courseId: String(target.courseId),
+//   };
+// }
 
 export default function StudentLayout({ children }: { children: ReactNode }) {
   const pathname = usePathname();
+  const params = useParams();
+  const classId = parseInt(params.class_id as string);
 
   const t = useTranslations("student");
 
+  const classInfoQuery = useSuspenseQuery({
+    queryKey: ["classInfo", classId],
+    queryFn: async () => {
+      try {
+        return await api.classes.getById(classId);
+      } catch (e) {
+        console.error("Class not found:", e);
+        // Mock Data -> api.class.getById cannot fetch data
+        return {
+          // ...target,
+          id: classId,
+          name: "Programming",
+          semester: "1",
+          year: 2025,
+          headerImageUrl: "Image.url",
+          courseId: "1",
+        };
+      }
+    },
+  });
+
+  // const classInfoQuery = useSuspenseQuery({
+  //   queryKey: ["classInfo"],
+  //   queryFn: async () => {
+  //     try {
+  //       return await getClassDetails(classId);
+  //     } catch (err) {
+  //       console.error(err);
+  //       notFound();
+  //     }
+  //   },
+  // });
+
+  // console.log(JSON.stringify(classInfoQuery, null, 2));
+
   return (
     <div className="flex min-h-screen">
       <div className="w-full border-gray-300 flex flex-col items-center">
-        <div className="w-full h-full p-4">
-          <div className="flex border-b mb-4 px-20">
+        <LayoutHeader
+          className="Programming"
+          classYear="2025"
+          classSem="1"
+          courseId="1"
+        />
+        <div className="w-full h-full p-4 mx-100">
+          <div className="flex border-b mb-4 px-5 mx-60">
             <Tabs>
               <TabsList className="w-full grid-cols-4 space-x-10">
                 <TabsTrigger value="Assignment" asChild>
@@ -52,7 +126,7 @@ export default function StudentLayout({ children }: { children: ReactNode }) {
               </TabsList>
             </Tabs>
           </div>
-          <div>{children}</div>
+          <div className="mx-60 flex justify-center">{children}</div>
         </div>
       </div>
     </div>
diff --git a/Frontend/grader-frontend/src/app/student/[class_id]/layoutHeader.tsx b/Frontend/grader-frontend/src/app/student/[class_id]/layoutHeader.tsx
new file mode 100644
index 00000000..e54f0293
--- /dev/null
+++ b/Frontend/grader-frontend/src/app/student/[class_id]/layoutHeader.tsx
@@ -0,0 +1,73 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Settings, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+interface Props {
+  className: string;
+  classSem: string;
+  classYear: string;
+  courseId: string;
+}
+
+export default function layoutHeader({
+  className,
+  classSem,
+  classYear,
+  courseId,
+}: Props) {
+  return (
+    <div className="w-full">
+      <div className="h-60 relative">
+        <div className="bg-blue-500 absolute inset-0"></div>
+        <nav className="absolute z-30 top-6 right-6">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="secondary"
+                size="icon"
+                className="size-10 rounded-full backdrop-blur-lg bg-black/15 hover:bg-black/15 text-white"
+              >
+                <Settings className="size-5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <Link href="" className="">
+                <DropdownMenuItem>
+                  <Settings className="text-foreground" />
+                  <span>Settings</span>
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuItem>
+                <Trash2 className="text-destructive hover:text-destructive" />
+                <span className="text-destructive hover:text-destructive">
+                  Delete
+                </span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </nav>
+        <img
+          src="./placeholder.png"
+          alt="Class header image"
+          className="absolute inset-0 object-cover h-full w-full"
+        />
+        <div className="absolute flex h-full items-center">
+          <div className="bg-background p-8 py-5 pr-16 rounded-r-3xl leading-5">
+            <h1 className="text-2xl font-medium">
+              {" "}
+              {className} ({classYear}/{classSem}){" "}
+            </h1>
+            <h2 className="text-primary"> {courseId} </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/Frontend/grader-frontend/src/app/student/[class_id]/profile/ProfleTab.tsx b/Frontend/grader-frontend/src/app/student/[class_id]/profile/ProfleTab.tsx
index 0be39c2b..e0ee1ca9 100644
--- a/Frontend/grader-frontend/src/app/student/[class_id]/profile/ProfleTab.tsx
+++ b/Frontend/grader-frontend/src/app/student/[class_id]/profile/ProfleTab.tsx
@@ -33,14 +33,13 @@ export default function ProflieTab() {
   return (
     <>
       <div className="w-full h-full mt-5">
-        <div className="w-full h-[45%] flex flex-col pl-20 pr-8">
-          <h1 className="px-4 mb-3">{t("scoreSum")}</h1>
+        <div className="w-full h-[45%] flex flex-col pl-2 pr-8">
           <div className="h-full w-full flex flex-row">
             <ScoreCard />
           </div>
         </div>
 
-        <div className="w-full h-1/2 flex flex-col pl-20 pr-8 mt-7">
+        <div className="w-full h-1/2 flex flex-col pl-2 pr-8 mt-7">
           <h1 className="px-4 mb-3">{t("ranking")}</h1>
           <div className="h-full w-full flex-row flex justify-center items-center">
             <div className="h-full w-1/3 flex flex-col items-center justify-center gap-y-5">
diff --git a/Frontend/grader-frontend/src/app/student/[class_id]/profile/scoreCard.tsx b/Frontend/grader-frontend/src/app/student/[class_id]/profile/scoreCard.tsx
index d7b55185..394856d8 100644
--- a/Frontend/grader-frontend/src/app/student/[class_id]/profile/scoreCard.tsx
+++ b/Frontend/grader-frontend/src/app/student/[class_id]/profile/scoreCard.tsx
@@ -9,7 +9,7 @@ export default function scoreCard() {
 
   return (
     <>
-      <Card className="w-[45%] gap-2 h-80 pt-2 border border-solid">
+      <Card className="w-[60%] gap-2 h-80 pt-2 border border-solid">
         <CardHeader>
           <h1 className="text-lg">{t("scoreSum")}</h1>
         </CardHeader>
diff --git a/Frontend/grader-frontend/src/app/student/studentCard.tsx b/Frontend/grader-frontend/src/app/student/studentCard.tsx
index 8ddc38e3..088032ab 100644
--- a/Frontend/grader-frontend/src/app/student/studentCard.tsx
+++ b/Frontend/grader-frontend/src/app/student/studentCard.tsx
@@ -68,9 +68,7 @@ function studentCard({ class_id, class_name, image, semester }: Props) {
   const router = useRouter();
 
   const toAssignmentPage = () => {
-    router.push(
-      `/student/${class_id}/${semester.replace("/", "-")}/1/assignment`
-    );
+    router.push(`/student/${class_id}/assignment`);
   };
 
   const [progress, setProgress] = React.useState(13);
@@ -101,7 +99,7 @@ function studentCard({ class_id, class_name, image, semester }: Props) {
           <div className="flex h-[55%] w-full m-0 p-0 flex-col">
             <div className="flex flex-row items-end min-w-full space-x-19 pl-4 pt-2">
               <h1
-                className="text-md py-1 font-bold"
+                className="text-md py-1 font-semibold"
                 onClick={() => toAssignmentPage()} // Temporary Change to test the Popover
               >
                 {class_name} ({semester})
diff --git a/Frontend/grader-frontend/src/components/assignment-form.tsx b/Frontend/grader-frontend/src/components/assignment-form.tsx
index d82231c0..5b6c3dbe 100644
--- a/Frontend/grader-frontend/src/components/assignment-form.tsx
+++ b/Frontend/grader-frontend/src/components/assignment-form.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 // 99% of this is by sonnet 4
 
@@ -14,7 +14,15 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
@@ -28,6 +36,9 @@ import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useState } from "react";
 import { Control, useFieldArray, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
+import { useRouter } from "next/navigation";
+
+import { cn } from "@/lib/utils";
 
 const createSchemas = (t: ReturnType<typeof useTranslations>) => {
   const testcaseSchema = z.object({
@@ -36,10 +47,14 @@ const createSchemas = (t: ReturnType<typeof useTranslations>) => {
   });
 
   const questionSchema = z.object({
-    name: z.string().min(1, t('assignment.form.validation.question.name.required')),
+    name: z
+      .string()
+      .min(1, t("assignment.form.validation.question.name.required")),
     description: z.string(),
     template: z.string(),
-    maxScore: z.coerce.number().min(0, t('assignment.form.validation.question.maxScore.min')),
+    maxScore: z.coerce
+      .number()
+      .min(0, t("assignment.form.validation.question.maxScore.min")),
     answer: z.string(),
     testCode: z.string(),
     secretTestCode: z.string(),
@@ -48,11 +63,17 @@ const createSchemas = (t: ReturnType<typeof useTranslations>) => {
   });
 
   const assignmentSchema = z.object({
-    name: z.string().min(1, t('assignment.form.validation.name.required')),
-    number: z.coerce.number().min(1, t('assignment.form.validation.number.min')),
-    publish: z.string().min(1, t('assignment.form.validation.publish.required')),
-    due: z.string().min(1, t('assignment.form.validation.due.required')),
-    languageIds: z.array(z.number()).min(1, t('assignment.form.validation.languages.min')),
+    name: z.string().min(1, t("assignment.form.validation.name.required")),
+    number: z.coerce
+      .number()
+      .min(1, t("assignment.form.validation.number.min")),
+    publish: z
+      .string()
+      .min(1, t("assignment.form.validation.publish.required")),
+    due: z.string().min(1, t("assignment.form.validation.due.required")),
+    languageIds: z
+      .array(z.number())
+      .min(1, t("assignment.form.validation.languages.min")),
     examMode: z.boolean(),
     allowLateSubmission: z.boolean(),
     showScoreOnLock: z.boolean(),
@@ -60,30 +81,38 @@ const createSchemas = (t: ReturnType<typeof useTranslations>) => {
     assignedGroupIds: z.array(z.string()),
     testCode: z.string(),
     secretTestCode: z.string(),
-    questions: z.array(questionSchema).min(1, t('assignment.form.validation.questions.min')),
+    questions: z
+      .array(questionSchema)
+      .min(1, t("assignment.form.validation.questions.min")),
   });
 
   return { assignmentSchema, questionSchema, testcaseSchema };
 };
 
 // Define the form data type using the schema inference from createSchemas
-type AssignmentFormData = z.infer<ReturnType<typeof createSchemas>['assignmentSchema']>;
+type AssignmentFormData = z.infer<
+  ReturnType<typeof createSchemas>["assignmentSchema"]
+>;
 
-function AssignmentName({ control }: { control: Control<AssignmentFormData>; }) {
+function AssignmentName({ control }: { control: Control<AssignmentFormData> }) {
   const name = useWatch({
     control,
-    name: 'name',
-    defaultValue: ""
+    name: "name",
+    defaultValue: "",
   });
 
   return <h2 className="font-medium">{name.length === 0 ? "Name" : name}</h2>;
 }
 
-function AssignmentNumber({ control }: { control: Control<AssignmentFormData>; }) {
+function AssignmentNumber({
+  control,
+}: {
+  control: Control<AssignmentFormData>;
+}) {
   const number = useWatch({
     control,
-    name: 'number',
-    defaultValue: 1
+    name: "number",
+    defaultValue: 1,
   });
 
   return <p className="text-sm">Lab {number}</p>;
@@ -111,24 +140,29 @@ export interface AttachmentMetadata {
   // size maybe
 }
 
-export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles = [], isPending }: AssignmentFormProps) {
+export function AssignmentForm({
+  submit,
+  cancel,
+  classId,
+  prefill,
+  existingFiles = [],
+  isPending,
+}: AssignmentFormProps) {
   const t = useTranslations();
 
-  const [
-    { data: supportedLanguages },
-    { data: availableGroups }
-  ] = useSuspenseQueries({
-    queries: [
-      {
-        queryKey: ['supportedLanguages'],
-        queryFn: () => api.supportedLanguages.list(),
-      },
-      {
-        queryKey: ['groups', classId],
-        queryFn: () => api.groups.listByClassId(classId),
-      }
-    ]
-  });
+  const [{ data: supportedLanguages }, { data: availableGroups }] =
+    useSuspenseQueries({
+      queries: [
+        {
+          queryKey: ["supportedLanguages"],
+          queryFn: () => api.supportedLanguages.list(),
+        },
+        {
+          queryKey: ["groups", classId],
+          queryFn: () => api.groups.listByClassId(classId),
+        },
+      ],
+    });
 
   const { assignmentSchema } = useMemo(() => createSchemas(t), [t]);
 
@@ -187,6 +221,7 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
 
   const [showDiscardDialog, setShowDiscardDialog] = useState(false);
   const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const router = useRouter();
 
   // we shuold move this out
 
@@ -194,7 +229,7 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
     submit({
       ...data,
       toRemoveExistingFileIds,
-      additionalFiles: [...attachmentDropzone.files] as File[]
+      additionalFiles: [...attachmentDropzone.files] as File[],
     });
   }
 
@@ -212,8 +247,9 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
   };
 
   const confirmDiscard = () => {
-    setShowDiscardDialog(false);
+    router.push(`/instructor/class/${classId}/assignments`); // For now since cancel() is not working
     cancel();
+    setShowDiscardDialog(false);
   };
 
   const addQuestion = () => {
@@ -230,14 +266,20 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
     });
   };
 
-  const [toRemoveExistingFileIds, setToRemoveExistingFileIds] = useState([] as number[]);
-  const filteredExistingFiles = existingFiles.filter(it => !toRemoveExistingFileIds.includes(it.id));
+  const [toRemoveExistingFileIds, setToRemoveExistingFileIds] = useState(
+    [] as number[]
+  );
+  const filteredExistingFiles = existingFiles.filter(
+    (it) => !toRemoveExistingFileIds.includes(it.id)
+  );
   function removeExistingFile(fileId: number) {
     setToRemoveExistingFileIds([...toRemoveExistingFileIds, fileId]);
   }
 
   // This run like shit,
   // const name = form.watch("name");
+  const isExamMode = form.watch("examMode");
+  console.log(isExamMode);
 
   return (
     <>
@@ -249,42 +291,63 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
           </div>
 
           <div className="flex gap-2">
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              {t("assignment.form.buttons.cancel")}
+            </Button>
             <Button
-              type="button"
-              variant="outline"
-              onClick={handleCancel}
+              className={
+                isExamMode ? "bg-[#0F1C48] hover:bg-blue-900" : "bg-primary"
+              }
+              onClick={handleSave}
+              disabled={isPending}
             >
-              {t('assignment.form.buttons.cancel')}
-            </Button>
-            <Button onClick={handleSave} disabled={isPending}>
               <Save className="w-4 h-4 mr-2" />
               {isPending
-                ? (prefill ? t('assignment.form.buttons.saving') : t('assignment.form.buttons.creating'))
-                : (prefill ? t('assignment.form.buttons.save') : t('assignment.form.buttons.create'))
-              }
+                ? prefill
+                  ? t("assignment.form.buttons.saving")
+                  : t("assignment.form.buttons.creating")
+                : prefill
+                ? t("assignment.form.buttons.save")
+                : t("assignment.form.buttons.create")}
             </Button>
           </div>
         </div>
-        <div className="h-2 bg-primary border-b">
-        </div>
+        <div
+          className={`h-2 border-b ${
+            isExamMode ? "bg-[#0F1C48]" : "bg-primary"
+          }`}
+        ></div>
       </nav>
-      <Form {...form} >
-        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6 p-12">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex flex-col gap-6 p-12"
+        >
           {/* Basic Information */}
           <section className="border rounded-xl overflow-clip flex flex-col gap-8">
-
             {/* Lab name */}
             <div className="border-b">
-              <div className="h-4 bg-primary border-b">
-              </div>
+              <div
+                className={`h-4 border-b  ${
+                  isExamMode ? "bg-[#0F1C48]" : "bg-primary"
+                }`}
+              ></div>
               <FormField
                 control={form.control}
                 name="name"
                 render={({ field }) => (
                   <FormItem className="p-8">
-                    <FormLabel>{t('assignment.form.fields.name.label')}</FormLabel>
+                    <FormLabel>
+                      {t("assignment.form.fields.name.label")}
+                    </FormLabel>
                     <FormControl>
-                      <input className="text-3xl outline-offset-8 placeholder:text-muted-foreground/50" placeholder={t('assignment.form.fields.name.placeholder')} {...field} />
+                      <input
+                        className="text-3xl outline-offset-8 placeholder:text-muted-foreground/50"
+                        placeholder={t(
+                          "assignment.form.fields.name.placeholder"
+                        )}
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -299,9 +362,16 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                   name="number"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('assignment.form.fields.number.label')}</FormLabel>
+                      <FormLabel>
+                        {t("assignment.form.fields.number.label")}
+                      </FormLabel>
                       <FormControl>
-                        <Input className="w-36" type="number" min="1" {...field} />
+                        <Input
+                          className="w-36"
+                          type="number"
+                          min="1"
+                          {...field}
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -315,33 +385,29 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                     name="publish"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>{t('assignment.form.fields.publish.label')}</FormLabel>
+                        <FormLabel>
+                          {t("assignment.form.fields.publish.label")}
+                        </FormLabel>
                         <FormControl>
-                          <Input
-                            type="datetime-local"
-                            {...field}
-                          />
+                          <Input type="datetime-local" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
 
-                  <div className="self-start mt-7">
-                    dots
-                  </div>
+                  <div className="self-start mt-7">dots</div>
 
                   <FormField
                     control={form.control}
                     name="due"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>{t('assignment.form.fields.due.label')}</FormLabel>
+                        <FormLabel>
+                          {t("assignment.form.fields.due.label")}
+                        </FormLabel>
                         <FormControl>
-                          <Input
-                            type="datetime-local"
-                            {...field}
-                          />
+                          <Input type="datetime-local" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -361,9 +427,16 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                         <Switch
                           checked={field.value}
                           onCheckedChange={field.onChange}
+                          className={cn(
+                            "transition",
+                            "data-[state=checked]:bg-[#0F1C48]",
+                            "data-[state=unchecked]:bg-gray-300"
+                          )}
                         />
                       </FormControl>
-                      <FormLabel>{t('assignment.form.fields.examMode.label')}</FormLabel>
+                      <FormLabel>
+                        {t("assignment.form.fields.examMode.label")}
+                      </FormLabel>
                     </FormItem>
                   )}
                 />
@@ -374,17 +447,21 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                     name="examPin"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>{t('assignment.form.fields.examPin.label')}</FormLabel>
+                        <FormLabel>
+                          {t("assignment.form.fields.examPin.label")}
+                        </FormLabel>
                         <FormControl>
                           <Input
-                            placeholder={t('assignment.form.fields.examPin.placeholder')}
+                            placeholder={t(
+                              "assignment.form.fields.examPin.placeholder"
+                            )}
                             maxLength={6}
                             pattern="[0-9]{6}"
                             {...field}
                           />
                         </FormControl>
                         <FormDescription>
-                          {t('assignment.form.fields.examPin.description')}
+                          {t("assignment.form.fields.examPin.description")}
                         </FormDescription>
                         <FormMessage />
                       </FormItem>
@@ -396,7 +473,9 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
               <div className="col-span-3 flex flex-col gap-8">
                 {/* Assigned Groups */}
                 <div className="space-y-4">
-                  <h2 className="text-lg font-medium">{t('assignment.form.sections.assignedGroups')}</h2>
+                  <h2 className="text-lg font-medium">
+                    {t("assignment.form.sections.assignedGroups")}
+                  </h2>
                   <FormField
                     control={form.control}
                     name="assignedGroupIds"
@@ -419,12 +498,15 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                                         checked={field.value?.includes(group)}
                                         onCheckedChange={(checked) => {
                                           return checked
-                                            ? field.onChange([...field.value, group])
+                                            ? field.onChange([
+                                                ...field.value,
+                                                group,
+                                              ])
                                             : field.onChange(
-                                              field.value?.filter(
-                                                (value) => value !== group
-                                              )
-                                            );
+                                                field.value?.filter(
+                                                  (value) => value !== group
+                                                )
+                                              );
                                         }}
                                       />
                                     </FormControl>
@@ -445,7 +527,9 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
 
                 {/* Languages */}
                 <div className="space-y-4">
-                  <h2 className="text-lg font-medium">{t('assignment.form.sections.languages')}</h2>
+                  <h2 className="text-lg font-medium">
+                    {t("assignment.form.sections.languages")}
+                  </h2>
                   <FormField
                     control={form.control}
                     name="languageIds"
@@ -465,15 +549,21 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                                   >
                                     <FormControl>
                                       <Checkbox
-                                        checked={field.value?.includes(language.id)}
+                                        checked={field.value?.includes(
+                                          language.id
+                                        )}
                                         onCheckedChange={(checked) => {
                                           return checked
-                                            ? field.onChange([...field.value, language.id])
+                                            ? field.onChange([
+                                                ...field.value,
+                                                language.id,
+                                              ])
                                             : field.onChange(
-                                              field.value?.filter(
-                                                (value) => value !== language.id
-                                              )
-                                            );
+                                                field.value?.filter(
+                                                  (value) =>
+                                                    value !== language.id
+                                                )
+                                              );
                                         }}
                                       />
                                     </FormControl>
@@ -504,9 +594,18 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                             <Switch
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className={cn(
+                                "transition-color", // smooth change
+                                "data-[state=unchecked]:!bg-gray-300",
+                                isExamMode ? "!bg-[#0F1C48]" : "bg-primary"
+                              )}
                             />
                           </FormControl>
-                          <FormLabel>{t('assignment.form.fields.allowLateSubmission.label')}</FormLabel>
+                          <FormLabel>
+                            {t(
+                              "assignment.form.fields.allowLateSubmission.label"
+                            )}
+                          </FormLabel>
                         </FormItem>
                       )}
                     />
@@ -520,35 +619,45 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                             <Switch
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className={cn(
+                                "transition-all", // smooth change
+                                "data-[state=unchecked]:!bg-gray-300",
+                                isExamMode ? "!bg-[#0F1C48]" : "bg-primary"
+                              )}
                             />
                           </FormControl>
-                          <FormLabel>{t('assignment.form.fields.showScoreOnLock.label')}</FormLabel>
+                          <FormLabel>
+                            {t("assignment.form.fields.showScoreOnLock.label")}
+                          </FormLabel>
                         </FormItem>
                       )}
                     />
                   </div>
-
                 </div>
-
               </div>
-
             </div>
 
             {/* Test Code */}
             <div className="space-y-4 px-12">
-              <h2 className="text-lg font-medium">{t('assignment.form.sections.globalTestCode')}</h2>
+              <h2 className="text-lg font-medium">
+                {t("assignment.form.sections.globalTestCode")}
+              </h2>
 
-              <div className="grid grid-cols-2 gap-6 items-start">
+              <div className="grid grid-cols-1 gap-6 items-start">
                 <FormField
                   control={form.control}
                   name="testCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('assignment.form.fields.testCode.label')}</FormLabel>
+                      <FormLabel>
+                        {t("assignment.form.fields.testCode.label")}
+                      </FormLabel>
                       <FormControl>
                         <Textarea
-                          placeholder={t('assignment.form.fields.testCode.placeholder')}
-                          className="font-mono h-36 resize-y"
+                          placeholder={t(
+                            "assignment.form.fields.testCode.placeholder"
+                          )}
+                          className="font-mono w-[76%] h-36 resize-y"
                           rows={6}
                           disabled={isMultipleLanguages}
                           {...field}
@@ -556,9 +665,10 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                       </FormControl>
                       <FormDescription>
                         {isMultipleLanguages
-                          ? t('assignment.form.fields.testCode.disabledMultipleLanguages')
-                          : t('assignment.form.fields.testCode.description')
-                        }
+                          ? t(
+                              "assignment.form.fields.testCode.disabledMultipleLanguages"
+                            )
+                          : t("assignment.form.fields.testCode.description")}
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
@@ -570,11 +680,15 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                   name="secretTestCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('assignment.form.fields.secretTestCode.label')}</FormLabel>
+                      <FormLabel>
+                        {t("assignment.form.fields.secretTestCode.label")}
+                      </FormLabel>
                       <FormControl>
                         <Textarea
-                          placeholder={t('assignment.form.fields.secretTestCode.placeholder')}
-                          className="font-mono h-36 resize-y"
+                          placeholder={t(
+                            "assignment.form.fields.secretTestCode.placeholder"
+                          )}
+                          className="font-mono w-[76%] h-36 resize-y"
                           rows={6}
                           disabled={isMultipleLanguages}
                           {...field}
@@ -582,25 +696,31 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                       </FormControl>
                       <FormDescription>
                         {isMultipleLanguages
-                          ? t('assignment.form.fields.secretTestCode.disabledMultipleLanguages')
-                          : t('assignment.form.fields.secretTestCode.description')
-                        }
+                          ? t(
+                              "assignment.form.fields.secretTestCode.disabledMultipleLanguages"
+                            )
+                          : t(
+                              "assignment.form.fields.secretTestCode.description"
+                            )}
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               </div>
-
             </div>
 
             {/* File Attachments */}
             <div className="px-12 pb-12 flex flex-col gap-4">
-              <h2 className="text-lg font-medium">{t('assignment.form.sections.attachments')}</h2>
+              <h2 className="text-lg font-medium">
+                {t("assignment.form.sections.attachments")}
+              </h2>
 
               <div className="grid grid-cols-2 gap-6">
-
-                <div className="rounded-lg p-4 border-dashed border-2 cursor-pointer flex items-center justify-center min-h-48" {...attachmentDropzone.getRootProps()}>
+                <div
+                  className="rounded-lg p-4 border-dashed border-2 cursor-pointer flex items-center justify-center min-h-48"
+                  {...attachmentDropzone.getRootProps()}
+                >
                   <div className="flex flex-col items-center text-muted-foreground gap-3 text-sm">
                     <Paperclip />
                     <p className="text-center leading-4">
@@ -634,15 +754,14 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                 </div>
               </div>
             </div>
-
           </section>
 
           <div className="space-y-4">
-
             {/* Questions */}
             <div className="space-y-4">
               {questionFields.map((question, questionIndex) => (
-                <QuestionForm
+                // To Change Back: change QuestionFormFigma --> QuestionForm
+                <QuestionFormFigma
                   key={question.id}
                   questionIndex={questionIndex}
                   form={form}
@@ -652,31 +771,49 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
                 />
               ))}
 
-              <Button onClick={() => addQuestion()} type="button">
-                Add question (todo: style this)
-              </Button>
+              <div className="relative my-8 h-10 w-full">
+                <div
+                  className={`absolute top-1/2 left-0 w-full h-[3px] ${
+                    isExamMode ? "bg-[#0F1C48]" : "bg-primary"
+                  }`}
+                />
+                <Button
+                  onClick={() => addQuestion()}
+                  type="button"
+                  className={`h-7 w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white rounded px-3 py-1 shadow ${
+                    isExamMode ? "bg-[#0F1C48] hover:bg-blue-900" : "bg-primary"
+                  }`}
+                >
+                  +
+                </Button>
+              </div>
             </div>
 
             {/* Submit */}
             <div className="flex gap-2 pt-4">
-              <Button type="submit" disabled={isPending}>
+              <Button
+                className={
+                  isExamMode ? "bg-[#0F1C48] hover:bg-blue-900" : "bg-primary"
+                }
+                type="submit"
+                disabled={isPending}
+              >
                 <Save className="w-4 h-4 mr-2" />
                 {isPending
-                  ? (prefill ? t('assignment.form.buttons.saving') : t('assignment.form.buttons.creating'))
-                  : (prefill ? t('assignment.form.buttons.save') : t('assignment.form.buttons.create'))
-                }
+                  ? prefill
+                    ? t("assignment.form.buttons.saving")
+                    : t("assignment.form.buttons.creating")
+                  : prefill
+                  ? t("assignment.form.buttons.save")
+                  : t("assignment.form.buttons.create")}
               </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleCancel}
-              >
-                {t('assignment.form.buttons.cancel')}
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                {t("assignment.form.buttons.cancel")}
               </Button>
             </div>
           </div>
         </form>
-      </Form >
+      </Form>
 
       {/* Discard Changes Dialog */}
       <AlertDialog open={showDiscardDialog} onOpenChange={setShowDiscardDialog}>
@@ -684,13 +821,14 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
           <AlertDialogHeader>
             <AlertDialogTitle>Discard changes?</AlertDialogTitle>
             <AlertDialogDescription>
-              You have unsaved changes.
-              Are you sure you want to discard them?
+              You have unsaved changes. Are you sure you want to discard them?
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Keep Editing</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDiscard}>Discard</AlertDialogAction>
+            <AlertDialogAction onClick={confirmDiscard}>
+              Discard
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -703,7 +841,9 @@ export function AssignmentForm({ submit, cancel, classId, prefill, existingFiles
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Keep editing</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmSave}>See lab list</AlertDialogAction>
+            <AlertDialogAction onClick={confirmSave}>
+              See lab list
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -719,8 +859,13 @@ interface QuestionFormProps {
   t: any;
 }
 
-
-function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionFormProps) {
+function QuestionForm({
+  questionIndex,
+  form,
+  onRemove,
+  canRemove,
+  t,
+}: QuestionFormProps) {
   const {
     fields: testcaseFields,
     append: appendTestcase,
@@ -743,14 +888,11 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
     <section className="border rounded-xl overflow-clip flex flex-col gap-8">
       {/* Question name */}
       <div className="border-b">
-        <div className="h-4 bg-muted-foreground/50 border-b">
-        </div>
+        <div className="h-4 bg-muted-foreground/50 border-b"></div>
 
         <div className="flex">
           <div className="p-8">
-            <Label>
-              {t('assignment.form.question.no')}
-            </Label>
+            <Label>{t("assignment.form.question.no")}</Label>
             <div className="text-center text-3xl mt-4">
               {questionIndex + 1}.
             </div>
@@ -761,9 +903,13 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
             name={`questions.${questionIndex}.name`}
             render={({ field }) => (
               <FormItem className="p-8 flex-1">
-                <FormLabel>{t('assignment.form.question.title')}</FormLabel>
+                <FormLabel>{t("assignment.form.question.title")}</FormLabel>
                 <FormControl>
-                  <input className="text-3xl outline-offset-8 placeholder:text-muted-foreground/50" placeholder={t('assignment.form.question.titlePlaceholder')} {...field} />
+                  <input
+                    className="text-3xl outline-offset-8 placeholder:text-muted-foreground/50"
+                    placeholder={t("assignment.form.question.titlePlaceholder")}
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -785,18 +931,22 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           )}
         </div>
       </div>
-
       <div className="grid grid-cols-3 gap-6 px-12 items-start">
         <FormField
           control={form.control}
           name={`questions.${questionIndex}.description`}
           render={({ field }) => (
             <FormItem className="col-span-2">
-              <FormLabel>{t('assignment.form.question.fields.description.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.description.label")}
+              </FormLabel>
               <FormControl>
                 <Textarea
                   className="min-h-24 resize-y"
-                  placeholder={t('assignment.form.question.fields.description.placeholder')}
+                  // original min-h-24
+                  placeholder={t(
+                    "assignment.form.question.fields.description.placeholder"
+                  )}
                   rows={6}
                   {...field}
                 />
@@ -812,7 +962,9 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           name={`questions.${questionIndex}.maxScore`}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('assignment.form.question.fields.maxScore.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.maxScore.label")}
+              </FormLabel>
               <FormControl>
                 <Input type="number" min="0" {...field} />
               </FormControl>
@@ -821,18 +973,22 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           )}
         />
       </div>
-
       <div className="px-12 flex flex-col gap-8">
         <FormField
           control={form.control}
           name={`questions.${questionIndex}.answer`}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('assignment.form.question.fields.answer.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.answer.label")}
+              </FormLabel>
               <FormControl>
                 <Textarea
-                  placeholder={t('assignment.form.question.fields.answer.placeholder')}
+                  placeholder={t(
+                    "assignment.form.question.fields.answer.placeholder"
+                  )}
                   className="font-mono resize-y min-h-24"
+                  // original min-h-24, w-full (Not put in)
                   rows={4}
                   {...field}
                 />
@@ -847,10 +1003,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           name={`questions.${questionIndex}.template`}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('assignment.form.question.fields.template.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.template.label")}
+              </FormLabel>
               <FormControl>
                 <Textarea
-                  placeholder={t('assignment.form.question.fields.template.placeholder')}
+                  placeholder={t(
+                    "assignment.form.question.fields.template.placeholder"
+                  )}
                   className="font-mono resize-y min-h-24"
                   rows={4}
                   {...field}
@@ -861,17 +1021,46 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           )}
         />
       </div>
-
+      {/* Pre Function Define */}
+      {/* <div className="px-12 flex flex-col gap-8">
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.answer`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("assignment.form.question.fields.answer.label")}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder={t(
+                    "assignment.form.question.fields.answer.placeholder"
+                  )}
+                  className="font-mono resize-y min-h-48 w-[70%]"
+                  rows={4}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div> */}
       <div className="px-12 grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Original => "px-12 grid grid-cols-1 md:grid-cols-2 gap-4" */}
         <FormField
           control={form.control}
           name={`questions.${questionIndex}.testCode`}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('assignment.form.question.fields.testCode.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.testCode.label")}
+              </FormLabel>
               <FormControl>
                 <Textarea
-                  placeholder={t('assignment.form.question.fields.testCode.placeholder')}
+                  placeholder={t(
+                    "assignment.form.question.fields.testCode.placeholder"
+                  )}
                   className="font-mono resize-y min-h-24"
                   rows={4}
                   {...field}
@@ -887,10 +1076,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           name={`questions.${questionIndex}.secretTestCode`}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>{t('assignment.form.question.fields.secretTestCode.label')}</FormLabel>
+              <FormLabel>
+                {t("assignment.form.question.fields.secretTestCode.label")}
+              </FormLabel>
               <FormControl>
                 <Textarea
-                  placeholder={t('assignment.form.question.fields.secretTestCode.placeholder')}
+                  placeholder={t(
+                    "assignment.form.question.fields.secretTestCode.placeholder"
+                  )}
                   className="font-mono resize-y min-h-24"
                   rows={4}
                   {...field}
@@ -901,11 +1094,12 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           )}
         />
       </div>
-
-      {/* Testcases */}
+      Testcases
       <div className="px-12 space-y-4">
         <div className="flex items-center justify-between">
-          <h4 className="text-lg font-semibold text-foreground">{t('assignment.form.question.testCases.title')}</h4>
+          <h4 className="text-lg font-semibold text-foreground">
+            {t("assignment.form.question.testCases.title")}
+          </h4>
           <Button
             type="button"
             size="sm"
@@ -913,14 +1107,21 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
             onClick={() => appendTestcase({ input: "", output: "" })}
           >
             <Plus className="w-4 h-4 mr-2" />
-            {t('assignment.form.question.testCases.add')}
+            {t("assignment.form.question.testCases.add")}
           </Button>
         </div>
 
         {testcaseFields.map((testcase, testcaseIndex) => (
-          <div key={testcase.id} className="bg-muted/30 border rounded-lg p-4 space-y-3">
+          <div
+            key={testcase.id}
+            className="bg-muted/30 border rounded-lg p-4 space-y-3"
+          >
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-muted-foreground">{t('assignment.form.question.testCases.testCase', { number: testcaseIndex + 1 })}</span>
+              <span className="text-sm font-medium text-muted-foreground">
+                {t("assignment.form.question.testCases.testCase", {
+                  number: testcaseIndex + 1,
+                })}
+              </span>
               <Button
                 type="button"
                 variant="ghost"
@@ -937,10 +1138,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
                 name={`questions.${questionIndex}.testcases.${testcaseIndex}.input`}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('assignment.form.question.testCases.input')}</FormLabel>
+                    <FormLabel>
+                      {t("assignment.form.question.testCases.input")}
+                    </FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder={t('assignment.form.question.testCases.inputPlaceholder')}
+                        placeholder={t(
+                          "assignment.form.question.testCases.inputPlaceholder"
+                        )}
                         className="font-mono resize-y min-h-24"
                         rows={2}
                         {...field}
@@ -955,10 +1160,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
                 name={`questions.${questionIndex}.testcases.${testcaseIndex}.output`}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('assignment.form.question.testCases.output')}</FormLabel>
+                    <FormLabel>
+                      {t("assignment.form.question.testCases.output")}
+                    </FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder={t('assignment.form.question.testCases.outputPlaceholder')}
+                        placeholder={t(
+                          "assignment.form.question.testCases.outputPlaceholder"
+                        )}
                         className="font-mono resize-y min-h-24"
                         rows={2}
                         {...field}
@@ -972,11 +1181,12 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
           </div>
         ))}
       </div>
-
       {/* Secret Testcases */}
       <div className="px-12 pb-12 space-y-4">
         <div className="flex items-center justify-between">
-          <h4 className="text-lg font-semibold text-foreground">{t('assignment.form.question.secretTestCases.title')}</h4>
+          <h4 className="text-lg font-semibold text-foreground">
+            {t("assignment.form.question.secretTestCases.title")}
+          </h4>
           <Button
             type="button"
             size="sm"
@@ -984,14 +1194,21 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
             onClick={() => appendSecretTestcase({ input: "", output: "" })}
           >
             <Plus className="w-4 h-4 mr-2" />
-            {t('assignment.form.question.secretTestCases.add')}
+            {t("assignment.form.question.secretTestCases.add")}
           </Button>
         </div>
 
         {secretTestcaseFields.map((testcase, testcaseIndex) => (
-          <div key={testcase.id} className="bg-muted/30 border rounded-lg p-4 space-y-3">
+          <div
+            key={testcase.id}
+            className="bg-muted/30 border rounded-lg p-4 space-y-3"
+          >
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-muted-foreground">{t('assignment.form.question.secretTestCases.testCase', { number: testcaseIndex + 1 })}</span>
+              <span className="text-sm font-medium text-muted-foreground">
+                {t("assignment.form.question.secretTestCases.testCase", {
+                  number: testcaseIndex + 1,
+                })}
+              </span>
               <Button
                 type="button"
                 variant="ghost"
@@ -1008,10 +1225,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
                 name={`questions.${questionIndex}.secretTestCases.${testcaseIndex}.input`}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('assignment.form.question.secretTestCases.input')}</FormLabel>
+                    <FormLabel>
+                      {t("assignment.form.question.secretTestCases.input")}
+                    </FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder={t('assignment.form.question.secretTestCases.inputPlaceholder')}
+                        placeholder={t(
+                          "assignment.form.question.secretTestCases.inputPlaceholder"
+                        )}
                         className="font-mono resize-y min-h-24"
                         rows={2}
                         {...field}
@@ -1026,10 +1247,14 @@ function QuestionForm({ questionIndex, form, onRemove, canRemove, t }: QuestionF
                 name={`questions.${questionIndex}.secretTestCases.${testcaseIndex}.output`}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('assignment.form.question.secretTestCases.output')}</FormLabel>
+                    <FormLabel>
+                      {t("assignment.form.question.secretTestCases.output")}
+                    </FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder={t('assignment.form.question.secretTestCases.outputPlaceholder')}
+                        placeholder={t(
+                          "assignment.form.question.secretTestCases.outputPlaceholder"
+                        )}
                         className="font-mono resize-y min-h-24"
                         rows={2}
                         {...field}
@@ -1054,27 +1279,218 @@ interface FileCardProps {
 }
 
 function FileCard({ name, remove, size }: FileCardProps) {
-  return <div
-    className="flex items-center justify-between p-3 bg-muted/30 border rounded-lg"
-  >
-    <div className="flex items-center gap-2">
-      <FileIcon className="w-4 h-4 text-muted-foreground" />
-      <span className="text-sm font-medium">{name}</span>
-      {
-        size &&
-        <span className="text-xs text-muted-foreground">
-          ({(size / 1024).toFixed(1)} KB)
-        </span>
-      }
+  return (
+    <div className="flex items-center justify-between p-3 bg-muted/30 border rounded-lg">
+      <div className="flex items-center gap-2">
+        <FileIcon className="w-4 h-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{name}</span>
+        {size && (
+          <span className="text-xs text-muted-foreground">
+            ({(size / 1024).toFixed(1)} KB)
+          </span>
+        )}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => remove()}
+        className="text-destructive hover:text-destructive hover:bg-destructive/10"
+      >
+        <X className="w-4 h-4" />
+      </Button>
     </div>
-    <Button
-      type="button"
-      variant="ghost"
-      size="sm"
-      onClick={() => remove()}
-      className="text-destructive hover:text-destructive hover:bg-destructive/10"
-    >
-      <X className="w-4 h-4" />
-    </Button>
-  </div>;
+  );
+}
+
+function QuestionFormFigma({
+  questionIndex,
+  form,
+  onRemove,
+  canRemove,
+  t,
+}: QuestionFormProps) {
+  const {
+    fields: testcaseFields,
+    append: appendTestcase,
+    remove: removeTestcase,
+  } = useFieldArray({
+    control: form.control,
+    name: `questions.${questionIndex}.testcases`,
+  });
+
+  const {
+    fields: secretTestcaseFields,
+    append: appendSecretTestcase,
+    remove: removeSecretTestcase,
+  } = useFieldArray({
+    control: form.control,
+    name: `questions.${questionIndex}.secretTestCases`,
+  });
+
+  return (
+    <section className="border rounded-xl overflow-clip flex flex-col gap-8">
+      {/* Question name */}
+      <div className="border-b">
+        <div className="h-4 bg-muted-foreground/50 border-b"></div>
+
+        <div className="flex">
+          <div className="p-8">
+            <Label>{t("assignment.form.question.no")}</Label>
+            <div className="text-center text-3xl mt-4">
+              {questionIndex + 1}.
+            </div>
+          </div>
+
+          <FormField
+            control={form.control}
+            name={`questions.${questionIndex}.name`}
+            render={({ field }) => (
+              <FormItem className="p-8 flex-1">
+                <FormLabel>{t("assignment.form.question.title")}</FormLabel>
+                <FormControl>
+                  <input
+                    className="text-3xl outline-offset-8 placeholder:text-muted-foreground/50"
+                    placeholder={t("assignment.form.question.titlePlaceholder")}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {canRemove && (
+            <div className="flex items-center justify-between p-3 ">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={onRemove}
+                className="size-fit p-3 text-destructive hover:text-destructive hover:bg-destructive/10"
+              >
+                <X className="size-6" />
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-6 px-12 items-start">
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.description`}
+          render={({ field }) => (
+            <FormItem className="col-span-2">
+              <FormLabel>
+                {t("assignment.form.question.fields.description.label")}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  className="min-h-42 resize-y"
+                  // original min-h-24
+                  placeholder={t(
+                    "assignment.form.question.fields.description.placeholder"
+                  )}
+                  rows={6}
+                  {...field}
+                />
+              </FormControl>
+              <p>todo: md editor</p>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.maxScore`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("assignment.form.question.fields.maxScore.label")}
+              </FormLabel>
+              <FormControl>
+                <Input type="number" min="0" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+      <div className="px-12 flex flex-col gap-8">
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.answer`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("assignment.form.question.fields.answer.label")}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder={t(
+                    "assignment.form.question.fields.answer.placeholder"
+                  )}
+                  className="font-mono resize-y min-h-48 w-[70%]"
+                  // original min-h-24, w-full (Not put in)
+                  rows={4}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+      {/* Pre Function Define */}
+      <div className="px-12 flex flex-col gap-8">
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.answer`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("assignment.form.question.fields.answer.label")}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder={t(
+                    "assignment.form.question.fields.answer.placeholder"
+                  )}
+                  className="font-mono resize-y min-h-48 w-[70%]"
+                  rows={4}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+      <div className="px-12 pb-12 grid grid-cols-1 gap-4">
+        <FormField
+          control={form.control}
+          name={`questions.${questionIndex}.testCode`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {t("assignment.form.question.fields.testCode.label")}
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder={t(
+                    "assignment.form.question.fields.testCode.placeholder"
+                  )}
+                  className="font-mono resize-y min-h-48 w-[70%]"
+                  rows={4}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </section>
+  );
 }
diff --git a/Frontend/grader-frontend/src/components/class-card.tsx b/Frontend/grader-frontend/src/components/class-card.tsx
index e5547c2d..8435fe0c 100644
--- a/Frontend/grader-frontend/src/components/class-card.tsx
+++ b/Frontend/grader-frontend/src/components/class-card.tsx
@@ -45,8 +45,8 @@ function Menu({ items }: MenuProps) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem>Profile</DropdownMenuItem>
-        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuItem>Setting</DropdownMenuItem>
+        <DropdownMenuItem>Delete Class</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );