diff --git a/app/api/updateCourse/[id]/route.ts b/app/api/updateCourse/[id]/route.ts
index 33c230a..36cecc4 100644
--- a/app/api/updateCourse/[id]/route.ts
+++ b/app/api/updateCourse/[id]/route.ts
@@ -5,173 +5,167 @@ import { authOptions } from "@/lib/auth";
 import prisma from "@/lib/prisma";
 
 const updateSchema = z.object({
-  title: z.string().min(2),
-  color: z.string().length(7),
-  days: z.array(z.string()).min(1),
-  startTime: z.string(),
-  endTime: z.string(),
+    title: z.string().min(2),
+    color: z.string().length(7),
+    days: z.array(z.string()).min(1),
+    startTime: z.string(),
+    endTime: z.string(),
 });
 
 function getCourseId(request: Request): number {
-  const url = new URL(request.url);
-  const id = url.pathname.split('/').pop();
-  const courseId = parseInt(id ?? '');
-  
-  if (isNaN(courseId)) {
-    throw new Error('Invalid course ID');
-  }
-  return courseId;
+    const url = new URL(request.url);
+    const id = url.pathname.split("/").pop();
+    const courseId = parseInt(id ?? "");
+
+    if (isNaN(courseId)) {
+        throw new Error("Invalid course ID");
+    }
+    return courseId;
 }
 
 // PUT - Update Course
 export async function PUT(request: Request) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-
-  try {
-    const courseId = getCourseId(request);
-
-    // Verify user has permission
-    const userCourse = await prisma.userCourse.findUnique({
-      where: {
-        userId_courseId: {
-          userId: session.user.id,
-          courseId,
-        },
-      },
-    });
-
-    if (!userCourse || userCourse.role !== "LECTURER") {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-    // Validate request body
-    const body: unknown = await request.json();
-    const parsed = updateSchema.safeParse(body);
-    if (!parsed.success) {
-      return NextResponse.json(
-        { error: "Invalid input", details: parsed.error.flatten() },
-        { status: 400 }
-      );
-    }
+    try {
+        const courseId = getCourseId(request);
 
-    const { title, color, days, startTime, endTime } = parsed.data;
-
-    // Update course and schedule in transaction
-    const [updatedCourse] = await prisma.$transaction([
-      prisma.course.update({
-        where: { id: courseId },
-        data: { title, color },
-      }),
-      prisma.schedule.updateMany({
-        where: { courseId },
-        data: { dayOfWeek: days, startTime, endTime },
-      }),
-    ]);
-
-    return NextResponse.json(updatedCourse);
-  } catch (error) {
-    if (error instanceof Error && error.message === 'Invalid course ID') {
-      return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        // Verify user has permission
+        const userCourse = await prisma.userCourse.findUnique({
+            where: {
+                userId_courseId: {
+                    userId: session.user.id,
+                    courseId,
+                },
+            },
+        });
+
+        if (!userCourse || userCourse.role !== "LECTURER") {
+            return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+        }
+
+        // Validate request body
+        const body: unknown = await request.json();
+        const parsed = updateSchema.safeParse(body);
+        if (!parsed.success) {
+            return NextResponse.json(
+                { error: "Invalid input", details: parsed.error.flatten() },
+                { status: 400 },
+            );
+        }
+
+        const { title, color, days, startTime, endTime } = parsed.data;
+
+        // Update course and schedule in transaction
+        const [updatedCourse] = await prisma.$transaction([
+            prisma.course.update({
+                where: { id: courseId },
+                data: { title, color },
+            }),
+            prisma.schedule.updateMany({
+                where: { courseId },
+                data: { dayOfWeek: days, startTime, endTime },
+            }),
+        ]);
+
+        return NextResponse.json(updatedCourse);
+    } catch (error) {
+        if (error instanceof Error && error.message === "Invalid course ID") {
+            return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        }
+
+        console.error("Error updating course:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
     }
-    
-    console.error("Error updating course:", error);
-    return NextResponse.json(
-      { error: "Internal Server Error" },
-      { status: 500 }
-    );
-  }
 }
 
 // DELETE - Delete Course
 export async function DELETE(request: Request) {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-  }
-
-  try {
-    const courseId = getCourseId(request);
-
-    // Verify user has permission
-    const userCourse = await prisma.userCourse.findUnique({
-      where: {
-        userId_courseId: {
-          userId: session.user.id,
-          courseId,
-        },
-      },
-    });
-
-    if (!userCourse) {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    const session = await getServerSession(authOptions);
+    if (!session?.user) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
     }
 
-    if (userCourse.role === "LECTURER") {
-      // Lecturer - delete all related records in proper order
-      await prisma.$transaction([
-        prisma.response.deleteMany({
-          where: {
-            question: {
-              session: {
-                courseId,
-              },
-            },
-          },
-        }),
-        prisma.option.deleteMany({
-          where: {
-            question: {
-              session: {
-                courseId,
-              },
-            },
-          },
-        }),
-        prisma.question.deleteMany({
-          where: {
-            session: {
-              courseId,
-            },
-          },
-        }),
-        prisma.courseSession.deleteMany({
-          where: { courseId },
-        }),
-        prisma.schedule.deleteMany({
-          where: { courseId },
-        }),
-        prisma.userCourse.deleteMany({
-          where: { courseId },
-        }),
-        prisma.course.delete({
-          where: { id: courseId },
-        }),
-      ]);
-    } else {
-      // Student - only remove their association
-      await prisma.userCourse.delete({
-        where: {
-          userId_courseId: {
-            userId: session.user.id,
-            courseId,
-          },
-        },
-      });
-    }
+    try {
+        const courseId = getCourseId(request);
 
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    if (error instanceof Error && error.message === 'Invalid course ID') {
-      return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        // Verify user has permission
+        const userCourse = await prisma.userCourse.findUnique({
+            where: {
+                userId_courseId: {
+                    userId: session.user.id,
+                    courseId,
+                },
+            },
+        });
+
+        if (!userCourse) {
+            return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+        }
+
+        if (userCourse.role === "LECTURER") {
+            // Lecturer - delete all related records in proper order
+            await prisma.$transaction([
+                prisma.response.deleteMany({
+                    where: {
+                        question: {
+                            session: {
+                                courseId,
+                            },
+                        },
+                    },
+                }),
+                prisma.option.deleteMany({
+                    where: {
+                        question: {
+                            session: {
+                                courseId,
+                            },
+                        },
+                    },
+                }),
+                prisma.question.deleteMany({
+                    where: {
+                        session: {
+                            courseId,
+                        },
+                    },
+                }),
+                prisma.courseSession.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.schedule.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.userCourse.deleteMany({
+                    where: { courseId },
+                }),
+                prisma.course.delete({
+                    where: { id: courseId },
+                }),
+            ]);
+        } else {
+            // Student - only remove their association
+            await prisma.userCourse.delete({
+                where: {
+                    userId_courseId: {
+                        userId: session.user.id,
+                        courseId,
+                    },
+                },
+            });
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        if (error instanceof Error && error.message === "Invalid course ID") {
+            return NextResponse.json({ error: "Invalid course ID" }, { status: 400 });
+        }
+
+        console.error("Error deleting course:", error);
+        return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
     }
-    
-    console.error("Error deleting course:", error);
-    return NextResponse.json(
-      { error: "Internal Server Error" },
-      { status: 500 }
-    );
-  }
-}
\ No newline at end of file
+}
diff --git a/app/dashboard/course/[courseId]/(courseInfo)/analytics/page.tsx b/app/dashboard/course/[courseId]/(courseInfo)/analytics/page.tsx
new file mode 100644
index 0000000..4004be7
--- /dev/null
+++ b/app/dashboard/course/[courseId]/(courseInfo)/analytics/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
+import AttendanceLineChart from "@/components/ui/AttendanceLineChart";
+import PerformanceData from "@/components/ui/PerformanceData";
+import StudentTable from "@/components/ui/StudentTable";
+import { analyticsPages } from "@/lib/constants";
+
+export default function Page() {
+    const params = useParams();
+    const courseId = parseInt((params.courseId as string) ?? "0");
+    const [page, setPage] = useState<string>("Performance");
+
+    return (
+        <div className="w-full flex flex-col">
+            <div className="flex flex-row gap-2 bg-slate-200 h-fit w-fit p-1 rounded-md mb-4">
+                {analyticsPages.map((pageTitle: string) => (
+                    <button
+                        key={pageTitle}
+                        className={`p-2 h-fit px-4 rounded-md transition-colors duration-300 ease-in-out ${
+                            page === pageTitle
+                                ? "bg-white text-[#1441DB]"
+                                : "bg-slate-200 text-slate-500"
+                        }`}
+                        onClick={() => {
+                            setPage(pageTitle);
+                        }}
+                    >
+                        {pageTitle}
+                    </button>
+                ))}
+            </div>
+            {/* Performance and Attendance Data */}
+            <div className="flex flex-col md:flex-row justify-center md:justify-between items-center md:items-stretch bg-white overflow-auto h-96 max-h-96 w-full rounded-[20px] border border-[#A5A5A5]">
+                {page === "Performance" ? (
+                    <PerformanceData courseId={courseId} />
+                ) : (
+                    <AttendanceLineChart courseId={courseId} />
+                )}
+            </div>
+            <div className="flex flex-row justify-between mt-8 pl-1">
+                <h1 className="text-2xl font-normal">Student Data</h1>
+                <button className="h-10 w-40 px-3 bg-[hsl(var(--primary))] text-white rounded-lg focus:outline-none">
+                    Export CSV
+                </button>
+            </div>
+            {/* Student Data Table */}
+            <StudentTable courseId={courseId} />
+        </div>
+    );
+}
diff --git a/app/dashboard/course/[courseId]/(courseInfo)/layout.tsx b/app/dashboard/course/[courseId]/(courseInfo)/layout.tsx
new file mode 100644
index 0000000..8ffdf91
--- /dev/null
+++ b/app/dashboard/course/[courseId]/(courseInfo)/layout.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useParams, usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { GlobalLoadingSpinner } from "@/components/ui/global-loading-spinner";
+import useAccess from "@/hooks/use-access";
+import { useToast } from "@/hooks/use-toast";
+import { coursePages } from "@/lib/constants";
+import { getCourseWithId } from "@/services/course";
+
+export default function CourseInfoLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    const router = useRouter();
+    const params = useParams();
+    const path = usePathname();
+    const courseId = parseInt(params.courseId as string);
+    const { hasAccess, isLoading: isAccessLoading } = useAccess({ courseId, role: "LECTURER" });
+    const { toast } = useToast();
+    const [courseInfo, setCourseInfo] = useState<{ name: string; code: string }>({
+        name: "",
+        code: "",
+    });
+
+    useEffect(() => {
+        if (isAccessLoading) {
+            return;
+        }
+        if (!isAccessLoading && !hasAccess) {
+            toast({ variant: "destructive", description: "Access denied!" });
+            router.push("/dashboard");
+            return;
+        }
+        const fetchCourseName = async () => {
+            try {
+                const res = await getCourseWithId(courseId);
+                if ("error" in res) {
+                    return toast({
+                        variant: "destructive",
+                        description: "Unable to fetch course information",
+                    });
+                } else {
+                    setCourseInfo({ name: res.title, code: res.code });
+                }
+            } catch (err) {
+                console.error(err);
+                toast({
+                    variant: "destructive",
+                    description: "Unknown error occurred.",
+                });
+            }
+        };
+        void fetchCourseName();
+    }, [isAccessLoading, hasAccess, courseId]);
+
+    if (isAccessLoading || !hasAccess) {
+        return <GlobalLoadingSpinner />;
+    }
+
+    return (
+        <>
+            <h1 className="text-2xl font-normal">{`${courseInfo?.name} (${courseInfo?.code})`} </h1>
+            <div className="border-b border-gray-200 flex flex-row gap-4 mt-6 mb-4">
+                {coursePages.map((tab) => (
+                    <button
+                        key={tab}
+                        onClick={() => {
+                            if (tab === "Analytics") {
+                                router.push(`/dashboard/course/${courseId}/analytics`);
+                            } else {
+                                router.push(`/dashboard/course/${courseId}/questionnaire`);
+                            }
+                        }}
+                        className={`pb-2 text-base font-medium ${
+                            path.includes(tab.toLowerCase()) ? "text-[#1441DB]" : "text-slate-600"
+                        }`}
+                    >
+                        {tab}
+                    </button>
+                ))}
+            </div>
+            <main className="flex-1 bg-gray-50 overflow-y-auto">{children}</main>
+        </>
+    );
+}
diff --git a/app/dashboard/course/[courseId]/questionnaire/page.tsx b/app/dashboard/course/[courseId]/(courseInfo)/questionnaire/page.tsx
similarity index 75%
rename from app/dashboard/course/[courseId]/questionnaire/page.tsx
rename to app/dashboard/course/[courseId]/(courseInfo)/questionnaire/page.tsx
index 7b56b38..6881adf 100644
--- a/app/dashboard/course/[courseId]/questionnaire/page.tsx
+++ b/app/dashboard/course/[courseId]/(courseInfo)/questionnaire/page.tsx
@@ -9,40 +9,27 @@ import BeginPollDialog from "@/components/BeginPollDialog";
 import SlidingCalendar from "@/components/ui/SlidingCalendar";
 import { Button } from "@/components/ui/button";
 import { GlobalLoadingSpinner } from "@/components/ui/global-loading-spinner";
-import useAccess from "@/hooks/use-access";
 import { useToast } from "@/hooks/use-toast";
 import { formatDateToISO } from "@/lib/utils";
-import { getCourseWithId } from "@/services/course";
 import { getCourseSessionByDate } from "@/services/session";
 
 export default function Page() {
     const params = useParams();
     const courseId = parseInt((params.courseId as string) ?? "0");
-    const [courseInfo, setCourseInfo] = useState<{ name: string; code: string }>();
     const [hasActiveSession, setHasActiveSession] = useState<boolean>(false);
     const [isLoading, setIsLoading] = useState(true);
     const router = useRouter();
     const { toast } = useToast();
-    const { hasAccess, isLoading: isAccessLoading } = useAccess({ courseId, role: "LECTURER" });
     const [refreshCalendar, setRefreshCalendar] = useState(false);
     const handleQuestionUpdate = () => {
-        setRefreshCalendar(prev => !prev);
+        setRefreshCalendar((prev) => !prev);
     };
 
     useEffect(() => {
-        if (isAccessLoading) {
-            return;
-        }
-        if (!isAccessLoading && !hasAccess) {
-            toast({ variant: "destructive", description: "Access denied!" });
-            router.push("/dashboard");
-            return;
-        }
-        const getCourseName = async () => {
+        const getCourseInfo = async () => {
             setHasActiveSession(false);
             setIsLoading(true);
             try {
-                const course = await getCourseWithId(courseId);
                 const courseSession = await getCourseSessionByDate(
                     courseId,
                     formatDateToISO(new Date()),
@@ -50,7 +37,6 @@ export default function Page() {
                 if (courseSession?.activeQuestionId) {
                     setHasActiveSession(true);
                 }
-                setCourseInfo({ name: course.title, code: course.code });
             } catch (error) {
                 toast({ variant: "destructive", description: "Could not get course information." });
                 console.error("Failed to fetch course:", error);
@@ -59,19 +45,16 @@ export default function Page() {
                 setIsLoading(false);
             }
         };
-        void getCourseName();
-    }, [courseId, hasAccess, isAccessLoading]);
+        void getCourseInfo();
+    }, [courseId]);
 
-    if (isAccessLoading || !hasAccess || isLoading) {
+    if (isLoading) {
         return <GlobalLoadingSpinner />;
     }
 
     return (
         <div className="w-full mx-auto flex flex-col gap-8 justify-center items-center">
             <section className="w-full flex flex-col items-start">
-                <h1 className="text-2xl font-normal">
-                    {`${courseInfo?.name} (${courseInfo?.code})`}{" "}
-                </h1>
                 <div className="flex flex-row gap-6 items-center mt-4 ml-auto">
                     <AddEditQuestionForm
                         defaultDate={new Date(formatDateToISO(new Date()))}
diff --git a/app/dashboard/course/[courseId]/start-session/page.tsx b/app/dashboard/course/[courseId]/start-session/page.tsx
index 11784e3..4700d7f 100644
--- a/app/dashboard/course/[courseId]/start-session/page.tsx
+++ b/app/dashboard/course/[courseId]/start-session/page.tsx
@@ -53,8 +53,6 @@ export default function StartSession() {
     const [showResults, setShowResults] = useState(DEFAULT_SHOW_RESULTS);
     const [isChangingQuestion, setIsChangingQuestion] = useState(false); // New state for question navigation
 
-    
-
     useEffect(() => {
         async function fetchSessionData() {
             const session = await getCourseSessionByDate(courseId, utcDate);
diff --git a/components/AddEditCourseForm.tsx b/components/AddEditCourseForm.tsx
index 0745b16..5b88ef5 100644
--- a/components/AddEditCourseForm.tsx
+++ b/components/AddEditCourseForm.tsx
@@ -62,7 +62,6 @@ export const AddEditCourseForm = ({
         },
     });
 
-
     const handleSubmit = async (values: z.infer<typeof schema>) => {
         const { title, color, days, endTime, startTime } = values;
         setLoading(true);
diff --git a/components/AddEditQuestionForm.tsx b/components/AddEditQuestionForm.tsx
index d6d7d1d..250a96d 100644
--- a/components/AddEditQuestionForm.tsx
+++ b/components/AddEditQuestionForm.tsx
@@ -130,7 +130,6 @@ export const AddEditQuestionForm: React.FC<Props> = ({
             });
         }
     }, [prevData]);
-    
 
     useEffect(() => {
         if (!defaultDate) return;
diff --git a/components/ui/AttendanceLineChart.tsx b/components/ui/AttendanceLineChart.tsx
new file mode 100644
index 0000000..9e1d02b
--- /dev/null
+++ b/components/ui/AttendanceLineChart.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { ChartContainer } from "@/components/ui/chart";
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import dayjs from "dayjs";
+import { attendanceChartConfig } from "@/lib/constants";
+import { calculateWeekAttendance } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+import LoaderComponent from "./loader";
+
+interface Props {
+    courseId: number;
+}
+
+export default function AttendanceLineChart({ courseId }: Props) {
+    const [weekStart, setWeekStart] = useState<Date>(dayjs().startOf("week").toDate());
+    const [isLoading, setIsLoading] = useState(false);
+    const [chartData, setChartData] = useState<{ date: string; attendance: number }[]>();
+    const { toast } = useToast();
+
+    const fetchWeekData = useCallback(
+        async (start: Date) => {
+            setIsLoading(true);
+            await calculateWeekAttendance(start, courseId)
+                .then((res) => {
+                    if (res && "error" in res) {
+                        toast({
+                            variant: "destructive",
+                            description: res.error ?? "Unknown error occurred",
+                        });
+                    } else {
+                        setChartData(res);
+                    }
+                    setIsLoading(false);
+                })
+                .catch((err: unknown) => {
+                    console.error(err);
+                    toast({ variant: "destructive", description: "Unknown error occurred" });
+                    setIsLoading(false);
+                });
+        },
+        [courseId],
+    );
+
+    useEffect(() => {
+        fetchWeekData(weekStart);
+    }, [weekStart]);
+
+    const handleNextWeek = () => {
+        setWeekStart(dayjs(weekStart).add(7, "day").toDate());
+    };
+    const handlePrevWeek = () => {
+        setWeekStart(dayjs(weekStart).subtract(7, "day").toDate());
+    };
+
+    return (
+        <div className="flex flex-row justify-center items-end px-auto w-full p-3">
+            <button
+                onClick={handlePrevWeek}
+                disabled={isLoading}
+                className="h-8 min-w-24 px-3 bg-primary text-white rounded-lg focus:outline-none"
+            >
+                Previous
+            </button>
+            {isLoading ? (
+                <LoaderComponent size={56} />
+            ) : (
+                <ChartContainer config={attendanceChartConfig} className="w-full h-80">
+                    <ResponsiveContainer width="100%" height={"250px"}>
+                        <LineChart
+                            data={chartData}
+                            margin={{
+                                left: 12,
+                                right: 12,
+                            }}
+                        >
+                            <CartesianGrid vertical={false} />
+                            <XAxis
+                                dataKey="date"
+                                tick={{ fontSize: 14 }}
+                                tickLine={false}
+                                axisLine={false}
+                                tickMargin={8}
+                                tickFormatter={(value) => `${value}`}
+                            />
+                            <YAxis
+                                domain={[0, 100]}
+                                tick={{ fontSize: 14 }}
+                                tickLine={false}
+                                axisLine={false}
+                                tickMargin={2}
+                                tickFormatter={(value) => `${value}%`}
+                            />
+                            <Line
+                                dataKey="attendance"
+                                type="linear"
+                                stroke="#3ce0d5"
+                                strokeWidth={2}
+                                dot={{
+                                    fill: "#3ce0d5",
+                                }}
+                            />
+                        </LineChart>
+                    </ResponsiveContainer>
+                </ChartContainer>
+            )}
+            <button
+                onClick={handleNextWeek}
+                disabled={isLoading}
+                className="h-8 min-w-24 px-3 bg-[hsl(var(--primary))] text-white rounded-lg focus:outline-none ml-6"
+            >
+                Next
+            </button>
+        </div>
+    );
+}
diff --git a/components/ui/CourseCard.tsx b/components/ui/CourseCard.tsx
index a3ab2d5..0ff6e98 100644
--- a/components/ui/CourseCard.tsx
+++ b/components/ui/CourseCard.tsx
@@ -5,187 +5,186 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { MoreVertical, Edit, Trash2 } from "lucide-react";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { AddEditCourseForm } from "@/components/AddEditCourseForm";
 import { dayLabels } from "@/lib/constants";
 
 export type CourseCardProps = {
-  color: string;
-  days: string[];
-  title: string;
-  timeStart: string;
-  timeEnd: string;
-  code: string;
-  role: Role;
-  id: number;
-  onEdit?: () => void;
-  onDelete?: () => void;
+    color: string;
+    days: string[];
+    title: string;
+    timeStart: string;
+    timeEnd: string;
+    code: string;
+    role: Role;
+    id: number;
+    onEdit?: () => void;
+    onDelete?: () => void;
 };
 
 export default function CourseCard({
-  color,
-  days,
-  title,
-  timeStart,
-  timeEnd,
-  code,
-  role,
-  id,
-  onEdit,
-  onDelete,
+    color,
+    days,
+    title,
+    timeStart,
+    timeEnd,
+    code,
+    role,
+    id,
+    onEdit,
+    onDelete,
 }: CourseCardProps) {
-  const router = useRouter();
-  const [isEditOpen, setIsEditOpen] = useState(false);
+    const router = useRouter();
+    const [isEditOpen, setIsEditOpen] = useState(false);
 
-  const shortDays = days
-    .map((fullDay) => {
-      const entry = Object.entries(dayLabels).find(([, label]) => label === fullDay);
-      return entry ? entry[0] : undefined;
-    })
-    .filter(Boolean) as ("M" | "T" | "W" | "Th" | "F")[];
+    const shortDays = days
+        .map((fullDay) => {
+            const entry = Object.entries(dayLabels).find(([, label]) => label === fullDay);
+            return entry ? entry[0] : undefined;
+        })
+        .filter(Boolean) as ("M" | "T" | "W" | "Th" | "F")[];
 
-  const handleCardClick = () => {
-    if (!isEditOpen) {
-      router.push(
-        role === "LECTURER"
-          ? `/dashboard/course/${id}/questionnaire`
-          : `/dashboard/course/${id}/live-poll`
-      );
-    }
-  };
+    const handleCardClick = () => {
+        if (!isEditOpen) {
+            router.push(
+                role === "LECTURER"
+                    ? `/dashboard/course/${id}/questionnaire`
+                    : `/dashboard/course/${id}/live-poll`,
+            );
+        }
+    };
 
-  const handleEdit = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsEditOpen(true);
-  };
+    const handleEdit = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsEditOpen(true);
+    };
 
-  const handleDelete = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDelete?.();
-  };
+    const handleDelete = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onDelete?.();
+    };
 
-  const handleEditClose = () => {
-    setIsEditOpen(false);
-    onEdit?.();
-  };
+    const handleEditClose = () => {
+        setIsEditOpen(false);
+        onEdit?.();
+    };
 
-  const CardContent = () => (
-    <>
-      <div
-        className="min-h-[40%] w-full rounded-t-md"
-        style={{ backgroundColor: color }}
-      />
-      <div className="h-[60%] pt-3 px-6 flex flex-col gap-2 items-start justify-start">
-        <p className="text-xs text-[#434343]">
-          Time: {timeStart} - {timeEnd}
-        </p>
-        <p className="text-lg text-left leading-tight">{title}</p>
-        <span className="inline-flex gap-4">
-          <p className="text-sm">
-            Code:{" "}
-            <em>
-              {(+code).toLocaleString("en-US", {
-                minimumIntegerDigits: 6,
-                useGrouping: false,
-              })}
-            </em>
-          </p>
-          <p className="text-sm capitalize">
-            Role: <em>{role.toLocaleLowerCase()}</em>
-          </p>
-        </span>
-        <p className="text-xs text-left text-[#434343]">{days.join(", ")}</p>
-      </div>
-    </>
-  );
+    const CardContent = () => (
+        <>
+            <div className="min-h-[40%] w-full rounded-t-md" style={{ backgroundColor: color }} />
+            <div className="h-[60%] pt-3 px-6 flex flex-col gap-2 items-start justify-start">
+                <p className="text-xs text-[#434343]">
+                    Time: {timeStart} - {timeEnd}
+                </p>
+                <p className="text-lg text-left leading-tight">{title}</p>
+                <span className="inline-flex gap-4">
+                    <p className="text-sm">
+                        Code:{" "}
+                        <em>
+                            {(+code).toLocaleString("en-US", {
+                                minimumIntegerDigits: 6,
+                                useGrouping: false,
+                            })}
+                        </em>
+                    </p>
+                    <p className="text-sm capitalize">
+                        Role: <em>{role.toLocaleLowerCase()}</em>
+                    </p>
+                </span>
+                <p className="text-xs text-left text-[#434343]">{days.join(", ")}</p>
+            </div>
+        </>
+    );
 
-  const MobileCardContent = () => (
-    <>
-      <div style={{ backgroundColor: color }} className="mt-4 h-4 w-full" />
-      <div className="min-h-[60%] py-3 px-6 flex flex-col gap-2 items-start justify-start">
-        <p className="text-xs text-[#18328D]">
-          Time: {timeStart} - {timeEnd}
-        </p>
-        <p className="text-xl text-left leading-tight">{title}</p>
-      </div>
-      <p className="px-6 text-xs text-[#585858]">{days.join(", ")}</p>
-    </>
-  );
+    const MobileCardContent = () => (
+        <>
+            <div style={{ backgroundColor: color }} className="mt-4 h-4 w-full" />
+            <div className="min-h-[60%] py-3 px-6 flex flex-col gap-2 items-start justify-start">
+                <p className="text-xs text-[#18328D]">
+                    Time: {timeStart} - {timeEnd}
+                </p>
+                <p className="text-xl text-left leading-tight">{title}</p>
+            </div>
+            <p className="px-6 text-xs text-[#585858]">{days.join(", ")}</p>
+        </>
+    );
 
-  const MenuDropdown = () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          className="absolute top-2 right-2 z-10 p-1 rounded-full hover:bg-gray-200 focus:outline-none"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <MoreVertical className="h-4 w-4" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="z-50">
-        {role === "LECTURER" && (
-          <DropdownMenuItem
-            onSelect={(event) => {
-              event.preventDefault();
-              handleEdit(event as unknown as React.MouseEvent);
-            }}
-          >
-            <Edit className="mr-2 h-4 w-4" />
-            <span>Edit</span>
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuItem onSelect={(event) => handleDelete(event as unknown as React.MouseEvent)}>
-          <Trash2 className="mr-2 h-4 w-4" />
-          <span>{role === "LECTURER" ? "Delete" : "Leave"}</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+    const MenuDropdown = () => (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <button
+                    className="absolute top-2 right-2 z-10 p-1 rounded-full hover:bg-gray-200 focus:outline-none"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <MoreVertical className="h-4 w-4" />
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="z-50">
+                {role === "LECTURER" && (
+                    <DropdownMenuItem
+                        onSelect={(event) => {
+                            event.preventDefault();
+                            handleEdit(event as unknown as React.MouseEvent);
+                        }}
+                    >
+                        <Edit className="mr-2 h-4 w-4" />
+                        <span>Edit</span>
+                    </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                    onSelect={(event) => handleDelete(event as unknown as React.MouseEvent)}
+                >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    <span>{role === "LECTURER" ? "Delete" : "Leave"}</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 
-  return (
-    <>
-      {/* Mobile View */}
-      <div className="md:hidden relative w-80 h-40 border border-black rounded-xl shadow-lg">
-        <MenuDropdown />
-        <button
-          onClick={handleCardClick}
-          className="w-full h-full text-left"
-          disabled={isEditOpen}
-        >
-          <MobileCardContent />
-        </button>
-      </div>
+    return (
+        <>
+            {/* Mobile View */}
+            <div className="md:hidden relative w-80 h-40 border border-black rounded-xl shadow-lg">
+                <MenuDropdown />
+                <button
+                    onClick={handleCardClick}
+                    className="w-full h-full text-left"
+                    disabled={isEditOpen}
+                >
+                    <MobileCardContent />
+                </button>
+            </div>
 
-      {/* Desktop View */}
-      <div className="hidden md:flex relative w-80 h-56 rounded-md shadow-lg">
-        <MenuDropdown />
-        <button
-          onClick={handleCardClick}
-          className="w-full h-full text-left"
-          disabled={isEditOpen}
-        >
-          <CardContent />
-        </button>
-      </div>
+            {/* Desktop View */}
+            <div className="hidden md:flex relative w-80 h-56 rounded-md shadow-lg">
+                <MenuDropdown />
+                <button
+                    onClick={handleCardClick}
+                    className="w-full h-full text-left"
+                    disabled={isEditOpen}
+                >
+                    <CardContent />
+                </button>
+            </div>
 
-      <AddEditCourseForm
-        mode="edit"
-        courseId={id}
-        isOpen={isEditOpen}
-        onOpenChange={(open: boolean) => !open && handleEditClose()}
-        defaultValues={{
-          title,
-          color,
-          days: shortDays,
-          startTime: timeStart,
-          endTime: timeEnd,
-        }}
-        onSuccess={handleEditClose}
-      />
-    </>
-  );
-}
\ No newline at end of file
+            <AddEditCourseForm
+                mode="edit"
+                courseId={id}
+                isOpen={isEditOpen}
+                onOpenChange={(open: boolean) => !open && handleEditClose()}
+                defaultValues={{
+                    title,
+                    color,
+                    days: shortDays,
+                    startTime: timeStart,
+                    endTime: timeEnd,
+                }}
+                onSuccess={handleEditClose}
+            />
+        </>
+    );
+}
diff --git a/components/ui/DonutChart.tsx b/components/ui/DonutChart.tsx
new file mode 100644
index 0000000..629efc2
--- /dev/null
+++ b/components/ui/DonutChart.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Label, Pie, PieChart } from "recharts";
+
+interface Props {
+    chartData: {}[];
+    chartConfig: ChartConfig;
+    dataKey: string;
+    nameKey: string;
+    description: string;
+    descriptionStatistic: number;
+}
+
+export default function DonutChart({
+    chartData,
+    chartConfig,
+    dataKey,
+    nameKey,
+    description,
+    descriptionStatistic,
+}: Props) {
+    return (
+        <ChartContainer config={chartConfig} className="aspect-square max-h-[330px]">
+            <PieChart>
+                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                <Pie
+                    data={chartData}
+                    dataKey={dataKey}
+                    nameKey={nameKey}
+                    innerRadius={"65%"}
+                    strokeWidth={15}
+                >
+                    <Label
+                        content={({ viewBox }) => {
+                            if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                return (
+                                    <text
+                                        x={viewBox.cx}
+                                        y={viewBox.cy}
+                                        textAnchor="middle"
+                                        dominantBaseline="middle"
+                                    >
+                                        <tspan
+                                            x={viewBox.cx}
+                                            y={viewBox.cy}
+                                            className="fill-foreground text-3xl font-bold"
+                                        >
+                                            {`${descriptionStatistic}%`}
+                                        </tspan>
+                                        <tspan
+                                            x={viewBox.cx}
+                                            y={(viewBox.cy || 0) + 24}
+                                            className="fill-muted-foreground"
+                                        >
+                                            {description}
+                                        </tspan>
+                                    </text>
+                                );
+                            }
+                        }}
+                    />
+                </Pie>
+            </PieChart>
+        </ChartContainer>
+    );
+}
diff --git a/components/ui/PerformanceData.tsx b/components/ui/PerformanceData.tsx
new file mode 100644
index 0000000..504aafb
--- /dev/null
+++ b/components/ui/PerformanceData.tsx
@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DonutChart from "@/components/ui/DonutChart";
+import {
+    dataKey,
+    description,
+    nameKey,
+    performanceChartConfig,
+    questionTypeColors,
+    questionTypeMap,
+} from "@/lib/constants";
+import { useToast } from "@/hooks/use-toast";
+import { getLimitedPastQuestions, getResponses } from "@/services/question";
+import { getIncorrectAndCorrectResponseCounts, getQuestionsWithAverageScore } from "@/lib/utils";
+import { GlobalLoadingSpinner } from "./global-loading-spinner";
+
+interface Props {
+    courseId: number;
+}
+export default function PerformanceData({ courseId }: Props) {
+    const [pastQuestions, setPastQuestions] = useState<
+        { type: keyof typeof questionTypeMap; title: string; average: number }[]
+    >([]);
+    const [responseStatistics, setResponseStatistics] = useState<{
+        incorrect: number;
+        correct: number;
+    }>({
+        incorrect: 0,
+        correct: 0,
+    });
+    const { toast } = useToast();
+    const [isLoading, setIsLoading] = useState(false);
+
+    const performanceChartData = [
+        { result: "correct", count: responseStatistics.correct, fill: "#BAFF7E" },
+        { result: "incorrect", count: responseStatistics.incorrect, fill: "#CCCCCC" },
+    ];
+
+    const fetchCourseStatistics = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            const pastQuestionsRes = await getLimitedPastQuestions(courseId, 2);
+            if ("error" in pastQuestionsRes) {
+                return toast({
+                    variant: "destructive",
+                    description: pastQuestionsRes?.error ?? "Unknown error occurred.",
+                });
+            } else {
+                setPastQuestions(getQuestionsWithAverageScore(pastQuestionsRes));
+            }
+
+            const responses = await getResponses(courseId);
+            if (!responses || (typeof responses !== "number" && "error" in responses)) {
+                return toast({
+                    variant: "destructive",
+                    description: responses?.error ?? "Unknown error occurred.",
+                });
+            } else if (responses) {
+                setResponseStatistics(getIncorrectAndCorrectResponseCounts(responses));
+            }
+        } catch (err) {
+            console.error(err);
+            toast({
+                variant: "destructive",
+                description: "Unknown error occurred.",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    }, [courseId]);
+
+    useEffect(() => {
+        void fetchCourseStatistics();
+    }, []);
+
+    if (isLoading) {
+        return <GlobalLoadingSpinner />;
+    }
+
+    return (
+        <>
+            <div className="max-h-full md:max-w-1/2 flex my-6 mx-auto">
+                {/* Donut Chart */}
+                {responseStatistics.correct + responseStatistics.incorrect === 0 ? (
+                    <span className="h-[330px] w-[330px] flex items-center justify-center">
+                        No Responses
+                    </span>
+                ) : (
+                    <DonutChart
+                        chartData={performanceChartData}
+                        chartConfig={performanceChartConfig}
+                        dataKey={dataKey}
+                        nameKey={nameKey}
+                        description={description}
+                        descriptionStatistic={
+                            responseStatistics.correct + responseStatistics.incorrect !== 0
+                                ? Math.trunc(
+                                      (responseStatistics.correct /
+                                          (responseStatistics.correct +
+                                              responseStatistics.incorrect)) *
+                                          100,
+                                  )
+                                : 0
+                        }
+                    />
+                )}
+            </div>
+            {/* Past Questions */}
+            <div className="hidden md:flex flex-col justify-center items-center w-full md:min-w-[22vw] md:max-w-1/2 h-full gap-3 pr-5">
+                {pastQuestions.map((question, idx) => (
+                    <div
+                        key={idx}
+                        className="min-h-28 h-fit w-full p-4 bg-slate-50/10 shadow-md rounded-lg border border-slate-400"
+                    >
+                        <div className="flex flex-row justify-between">
+                            <p
+                                className="rounded-sm p-1 px-2 text-sm border"
+                                style={{
+                                    background: questionTypeColors[question.type]?.bg,
+                                    color: questionTypeColors[question.type]?.fg,
+                                    borderColor: questionTypeColors[question.type]?.fg,
+                                }}
+                            >
+                                {questionTypeMap[question.type]}
+                            </p>
+                            <p className="text-lg font-semibold">{question.average}</p>
+                        </div>
+                        <p className="text-base pt-2">{question.title}</p>
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+}
diff --git a/components/ui/SlidingCalendar.tsx b/components/ui/SlidingCalendar.tsx
index f5252ef..82aa56c 100644
--- a/components/ui/SlidingCalendar.tsx
+++ b/components/ui/SlidingCalendar.tsx
@@ -253,7 +253,11 @@ function SlidingCalendar({ courseId, refreshTrigger }: Props) {
                                                             courseId={courseId}
                                                             location="page"
                                                             questionId={question.id}
-                                                            onUpdate={() => fetchQuestions(selectedDate.toDate())}
+                                                            onUpdate={() =>
+                                                                fetchQuestions(
+                                                                    selectedDate.toDate(),
+                                                                )
+                                                            }
                                                             prevData={{
                                                                 question: question.text,
                                                                 selectedQuestionType:
diff --git a/components/ui/StudentTable.tsx b/components/ui/StudentTable.tsx
new file mode 100644
index 0000000..3d8b479
--- /dev/null
+++ b/components/ui/StudentTable.tsx
@@ -0,0 +1,154 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { useToast } from "@/hooks/use-toast";
+import { getStudents } from "@/services/userCourse";
+import { getAllSessionIds } from "@/services/session";
+import { getStudentsWithScores } from "@/lib/utils";
+import LoaderComponent from "./loader";
+
+interface Props {
+    courseId: number;
+}
+export default function StudentTable({ courseId }: Props) {
+    const [students, setStudents] = useState<
+        {
+            name: string;
+            email: string | null;
+            attendance: number;
+            pollScore: number;
+        }[]
+    >([]);
+    const [studentQuery, setStudentQuery] = useState<string | undefined>(undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const { toast } = useToast();
+
+    const fetchStudentData = useCallback(async () => {
+        setIsLoading(true);
+        await getStudents(courseId, studentQuery)
+            .then(async (studentData) => {
+                if ("error" in studentData)
+                    return toast({
+                        variant: "destructive",
+                        description: studentData?.error ?? "Unknown error occurred.",
+                    });
+                else {
+                    await getAllSessionIds(courseId).then((sessions) => {
+                        if ("error" in sessions) {
+                            return toast({
+                                variant: "destructive",
+                                description: sessions?.error ?? "Unknown error occurred.",
+                            });
+                        } else {
+                            setStudents(getStudentsWithScores(studentData, sessions));
+                        }
+                    });
+                }
+            })
+            .catch((err: unknown) => {
+                console.error(err);
+                return toast({
+                    variant: "destructive",
+                    description: "Unknown error occurred.",
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, [courseId, studentQuery]);
+
+    useEffect(() => {
+        void fetchStudentData();
+    }, [studentQuery]);
+
+    return (
+        <div className="bg-white h-fit max-h-96 rounded-[20px] border border-[#A5A5A5] mt-4 overflow-y-auto">
+            <Table className="relative rounded-[20px] w-full mb-5">
+                <TableHeader className="h-14">
+                    <TableRow>
+                        <TableHead key={"name"} className="pl-6 w-4/12">
+                            Student
+                        </TableHead>
+                        <TableHead key={"attendance"} className="w-2/12">
+                            Attendance
+                        </TableHead>
+                        <TableHead key={"score"} className="w-3/12">
+                            Poll Score
+                        </TableHead>
+                        <TableHead key={"activity"} className="w-1/2 pr-6">
+                            <input
+                                onChange={(e) => {
+                                    setStudentQuery(e.target.value);
+                                }}
+                                type="text"
+                                placeholder="Search student..."
+                                className="h-8 w-full md:max-w-[12vw] px-3 bg-white text-black border border-slate-300 rounded-lg focus:outline-none"
+                            />
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                {isLoading ? (
+                    <TableCaption>
+                        <LoaderComponent size={56} />
+                    </TableCaption>
+                ) : students?.length === 0 ? (
+                    <TableCaption>No students enrolled</TableCaption>
+                ) : (
+                    <TableBody>
+                        {students.map((student, idx) => (
+                            <TableRow key={idx}>
+                                <TableCell className="max-w-1/3 pl-6 truncate">
+                                    <p className="text-base">{student.name}</p>
+                                    <p className="text-medium">
+                                        {student.email ?? "No email provided"}
+                                    </p>
+                                </TableCell>
+                                <TableCell className="max-w-1/6 truncate">
+                                    <p
+                                        className={`rounded-sm p-1 px-2 w-fit text-sm ${
+                                            student.attendance <= 50
+                                                ? "bg-[#FFA1A1]"
+                                                : student.attendance > 50 &&
+                                                    student.attendance <= 75
+                                                  ? "bg-[#F8ECA1]"
+                                                  : "bg-[#BFF2A6]"
+                                        }`}
+                                    >
+                                        {student.attendance}%
+                                    </p>
+                                </TableCell>
+                                <TableCell className="max-w-1/4 truncate">
+                                    <p
+                                        className={`rounded-sm p-1 px-2 w-fit text-sm ${
+                                            student.pollScore <= 50
+                                                ? "bg-[#FFA1A1]"
+                                                : student.pollScore > 50 && student.pollScore <= 75
+                                                  ? "bg-[#F8ECA1]"
+                                                  : "bg-[#BFF2A6]"
+                                        }`}
+                                    >
+                                        {student.pollScore}%
+                                    </p>
+                                </TableCell>
+                                <TableCell>
+                                    <div className="w-1/2 pr-6">
+                                        <button className="w-32 h-8 bg-white border border-[#A5A5A5] hover:bg-slate-100 rounded-md">
+                                            View Activity →
+                                        </button>
+                                    </div>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                )}
+            </Table>
+        </div>
+    );
+}
diff --git a/components/ui/answerOptions.tsx b/components/ui/answerOptions.tsx
index ecd56f8..9467497 100644
--- a/components/ui/answerOptions.tsx
+++ b/components/ui/answerOptions.tsx
@@ -16,7 +16,6 @@ interface AnswerOptionsProps {
     onSelectionChange: (value: number | number[]) => void;
 }
 
-
 const AnswerOptions: React.FC<AnswerOptionsProps> = ({
     options,
     questionType,
diff --git a/components/ui/loader.tsx b/components/ui/loader.tsx
new file mode 100644
index 0000000..14f131c
--- /dev/null
+++ b/components/ui/loader.tsx
@@ -0,0 +1,11 @@
+import { Loader } from "lucide-react";
+
+const LoaderComponent = ({ size = 40 }: { size: number }) => {
+    return (
+        <div className="w-full h-full flex justify-center items-center">
+            <Loader height={size} width={size} className="animate-spin" />
+        </div>
+    );
+};
+
+export default LoaderComponent;
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..f42ae52
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+    ({ className, ...props }, ref) => (
+        <div className="relative w-full overflow-auto">
+            <table
+                ref={ref}
+                className={cn("w-full caption-bottom text-sm", className)}
+                {...props}
+            />
+        </div>
+    ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+        {...props}
+    />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+    ({ className, ...props }, ref) => (
+        <tr
+            ref={ref}
+            className={cn(
+                "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+                className,
+            )}
+            {...props}
+        />
+    ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className,
+        )}
+        {...props}
+    />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn(
+            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+            className,
+        )}
+        {...props}
+    />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/hooks/use-debounce.tsx b/hooks/use-debounce.tsx
new file mode 100644
index 0000000..534768f
--- /dev/null
+++ b/hooks/use-debounce.tsx
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}
+
+export default useDebounce;
diff --git a/lib/constants.ts b/lib/constants.ts
index f74448d..9daa0eb 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -1,3 +1,6 @@
+import { $Enums } from "@prisma/client";
+import { ChartConfig } from "@/components/ui/chart";
+
 export const questionTypes = ["Multiple Choice", "Select All"] as const;
 export const colorOptions = ["#ED9D9D", "#F3AB7E", "#EEF583", "#94ED79", "#8E87F2"];
 
@@ -16,4 +19,88 @@ export const questionTypeMap = {
     MCQ: "Multiple Choice",
 };
 
+export const questionTypeColors = {
+    MSQ: { bg: "#FFFED3", fg: "#58560B" },
+    MCQ: { bg: "#EBCFFF", fg: "#602E84" },
+};
+
+// donut chart config
+export const dataKey = "count";
+export const nameKey = "result";
+export const description = "Class Average";
+export const performanceChartConfig = {
+    count: {
+        label: "Count",
+    },
+    correct: {
+        label: "Correct",
+        color: "green",
+    },
+    incorrect: {
+        label: "Incorrect",
+        color: "gray",
+    },
+} satisfies ChartConfig;
+
+export const attendanceChartConfig = {
+    attendance: {
+        label: "Attendance",
+        color: "black",
+    },
+} satisfies ChartConfig;
+
+export const analyticsPages = ["Performance", "Attendance Rate"];
+export const coursePages = ["Questionnaire", "Analytics"];
+
 export const DEFAULT_SHOW_RESULTS = false;
+
+export type QuestionWithResponesAndOptions = {
+    options: {
+        isCorrect: boolean;
+        text: string;
+        id: number;
+        questionId: number;
+    }[];
+    responses: {
+        userId: string;
+        questionId: number;
+        optionId: number;
+        answeredAt: Date;
+    }[];
+} & {
+    text: string;
+    id: number;
+    type: $Enums.QuestionType;
+    sessionId: number;
+    position: number;
+};
+
+export type Response = {
+    options: {
+        isCorrect: boolean;
+        id: number;
+        text: string;
+        questionId: number;
+    }[];
+    responses: {
+        optionId: number;
+        questionId: number;
+        userId: string;
+        answeredAt: Date;
+    }[];
+};
+
+export type Student = {
+    id: string;
+    responses: {
+        question: {
+            sessionId: number;
+            options: {
+                isCorrect: boolean;
+            }[];
+        };
+    }[];
+    email: string | null;
+    firstName: string;
+    lastName: string | null;
+};
diff --git a/lib/utils.ts b/lib/utils.ts
index 012c43a..5d3281b 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,7 +1,9 @@
 import { clsx } from "clsx";
 import type { ClassValue } from "clsx";
+import dayjs from "dayjs";
 import { twMerge } from "tailwind-merge";
-
+import { QuestionWithResponesAndOptions, Response, Student } from "./constants";
+import { getAttendanceCount, getStudentCount } from "@/services/userCourse";
 /**
  * A utility function that merges tailwind classes with conditional classes combining functionalities of twMerge and clsx.
  *
@@ -32,7 +34,6 @@ export function formatDateToISO(date: Date) {
     return new Date(date.setHours(0, 0, 0, 0)).toISOString();
 }
 
-
 export function shuffleArray<T>(array: T[]): T[] {
     const copy = [...array];
     for (let i = copy.length - 1; i > 0; i--) {
@@ -41,3 +42,133 @@ export function shuffleArray<T>(array: T[]): T[] {
     }
     return copy;
 }
+
+export function getQuestionsWithAverageScore(questions: QuestionWithResponesAndOptions[]) {
+    const questionsWithScores = [];
+
+    for (const question of questions) {
+        // get the IDs of the correct options
+        const correctOptionIds = question.options
+            .filter((option) => option.isCorrect)
+            .map((option) => option.id);
+
+        // check if at least one option is correct
+        let correctCount = 0;
+        question.responses.forEach((response) => {
+            if (correctOptionIds.includes(response.optionId)) {
+                correctCount++;
+            }
+        });
+
+        // add question and score information to result
+        questionsWithScores.push({
+            type: question.type,
+            title: question.text,
+            average:
+                question.responses.length === 0
+                    ? 0
+                    : Math.trunc((correctCount / question.responses.length) * 100),
+        });
+    }
+
+    return questionsWithScores;
+}
+
+export function getIncorrectAndCorrectResponseCounts(responses: Response[]) {
+    let correctResponses = 0;
+    let incorrectReponses = 0;
+
+    for (const question of responses) {
+        // get the IDs of the correct options
+        const correctOptionIds = question.options
+            .filter((option) => option.isCorrect)
+            .map((option) => option.id);
+
+        // increment correctResponses if the option is correct, else increment incorrect responses
+        question.responses.forEach((response) => {
+            if (correctOptionIds.includes(response.optionId)) {
+                correctResponses++;
+            } else {
+                incorrectReponses++;
+            }
+        });
+    }
+
+    return { incorrect: incorrectReponses, correct: correctResponses };
+}
+
+export function getStudentsWithScores(students: Student[], sessionIds: number[]) {
+    const studentData = students.map((student) => {
+        // get total number of sessions
+        const totalSessions = sessionIds.length;
+
+        // get all student responses for this course
+        const studentResponses = student.responses.filter((response) =>
+            sessionIds.includes(response.question.sessionId),
+        );
+
+        // get number of sessions attended
+        const attendedSessions = new Set(
+            studentResponses.map((response) => response.question.sessionId),
+        ).size;
+
+        // get number of correct responses
+        const correctResponses = studentResponses.filter((response) =>
+            response.question.options.some((option) => option.isCorrect),
+        ).length;
+
+        // calculate attendance and poll score
+        const attendance =
+            totalSessions > 0 ? Math.trunc((attendedSessions / totalSessions) * 100) : 0;
+
+        const pollScore =
+            studentResponses.length > 0
+                ? Math.trunc((correctResponses / studentResponses.length) * 100)
+                : 0;
+
+        return {
+            name: String(student.firstName) + " " + String(student.lastName),
+            email: student.email,
+            attendance,
+            pollScore,
+        };
+    });
+
+    return studentData;
+}
+
+export function calculateDayAttendance(attendanceCount: number, totalStudentsCount: number) {
+    if (totalStudentsCount === 0) {
+        return 0;
+    }
+    return Math.trunc((attendanceCount / totalStudentsCount) * 100);
+}
+
+export async function calculateWeekAttendance(start: Date, courseId: number) {
+    try {
+        const promises = Array.from({ length: 7 }).map(async (_, i) => {
+            const day = dayjs(start).add(i, "day");
+            try {
+                const studentCount = await getStudentCount(courseId);
+                if (typeof studentCount !== "number") {
+                    throw Error();
+                }
+                const attendanceCount = await getAttendanceCount(courseId, day.toDate());
+                if (typeof attendanceCount !== "number") {
+                    throw Error();
+                }
+                const attendance = calculateDayAttendance(attendanceCount, studentCount);
+                return { date: day.format("M/D"), attendance };
+            } catch (err) {
+                console.error(err);
+                throw Error();
+            }
+        });
+
+        const weekData = await Promise.all(promises);
+        return weekData;
+    } catch (err: unknown) {
+        console.error(err);
+        return { error: "Error calculating attendance" };
+    }
+}
diff --git a/services/course.ts b/services/course.ts
index 544a326..9ef88b4 100644
--- a/services/course.ts
+++ b/services/course.ts
@@ -115,7 +115,7 @@ type UpdateCourseParams = {
 
 export async function updateCourse(
     courseId: number,
-    data: UpdateCourseParams
+    data: UpdateCourseParams,
 ): Promise<Course | { error: string }> {
     try {
         // First update the course details
@@ -148,10 +148,8 @@ export async function updateCourse(
         return updatedCourse;
     } catch (error) {
         console.error("Error updating course:", error);
-        return { 
-            error: error instanceof Error 
-                ? error.message 
-                : "Failed to update course" 
+        return {
+            error: error instanceof Error ? error.message : "Failed to update course",
         };
     }
-}
\ No newline at end of file
+}
diff --git a/services/question.ts b/services/question.ts
index f3575b6..2e1165d 100644
--- a/services/question.ts
+++ b/services/question.ts
@@ -119,3 +119,54 @@ export async function deleteQuestion(questionId: number) {
         return { error: "Error deleting question." };
     }
 }
+
+export async function getLimitedPastQuestions(courseId: number, limit: number) {
+    try {
+        const questions = await prisma.question.findMany({
+            where: {
+                session: {
+                    courseId,
+                },
+            },
+            orderBy: [
+                {
+                    session: {
+                        startTime: "desc",
+                    },
+                },
+                { position: "desc" },
+            ],
+            take: limit,
+            include: {
+                responses: true,
+                options: true,
+            },
+        });
+
+        return questions;
+    } catch (err) {
+        console.error(err);
+        return { error: "Error fetching past questions." };
+    }
+}
+
+export async function getResponses(courseId: number) {
+    try {
+        const responses = await prisma.question.findMany({
+            where: {
+                session: {
+                    courseId,
+                },
+            },
+            include: {
+                responses: true,
+                options: true,
+            },
+        });
+
+        return responses;
+    } catch (err) {
+        console.error(err);
+        return { error: "Error calculating class average." };
+    }
+}
diff --git a/services/session.ts b/services/session.ts
index 57b9768..7dd598a 100644
--- a/services/session.ts
+++ b/services/session.ts
@@ -94,3 +94,51 @@ export async function getQuestionById(questionId: number) {
         throw error;
     }
 }
+
+export async function getAllSessionIds(courseId: number) {
+    try {
+        const sessions = await prisma.courseSession.findMany({
+            where: {
+                courseId,
+            },
+            select: {
+                id: true,
+            },
+        });
+
+        return sessions.map((session) => session.id);
+    } catch (error) {
+        console.error(error);
+        return { error: "Error fetching sessions" };
+    }
+}
+
+export async function getSessionIdsByDate(courseId: number, date: Date) {
+    try {
+        const dayStart = new Date(date);
+        dayStart.setHours(0, 0, 0, 0);
+
+        const dayEnd = new Date(date);
+        dayEnd.setHours(23, 59, 59, 999);
+
+        const sessions = await prisma.courseSession
+            .findMany({
+                where: {
+                    courseId,
+                    startTime: {
+                        gte: dayStart,
+                        lte: dayEnd,
+                    },
+                },
+                select: {
+                    id: true,
+                },
+            })
+            .then((res) => res.map((session) => session.id));
+
+        return sessions;
+    } catch (error) {
+        console.error(error);
+        return { error: "Error fetching session information" };
+    }
+}
diff --git a/services/userCourse.ts b/services/userCourse.ts
index deb9dc5..1df2936 100644
--- a/services/userCourse.ts
+++ b/services/userCourse.ts
@@ -1,5 +1,6 @@
 "use server";
 import { Role } from "@prisma/client";
+import { getSessionIdsByDate } from "./session";
 import prisma from "@/lib/prisma";
 
 export async function addUserToCourse(courseId: number, userId: string, role: Role = "STUDENT") {
@@ -96,3 +97,128 @@ export async function addUserToCourseByEmail(
         return { error: "User is already enrolled in this course" };
     }
 }
+
+export async function getStudents(courseId: number, query: string | undefined) {
+    try {
+        const students = await prisma.user.findMany({
+            where: {
+                courses: {
+                    some: {
+                        courseId,
+                        role: "STUDENT",
+                    },
+                },
+                ...(query
+                    ? {
+                          OR: [
+                              {
+                                  email: {
+                                      contains: query,
+                                      mode: "insensitive",
+                                  },
+                              },
+                              {
+                                  firstName: {
+                                      contains: query,
+                                      mode: "insensitive",
+                                  },
+                              },
+                              {
+                                  lastName: {
+                                      contains: query,
+                                      mode: "insensitive",
+                                  },
+                              },
+                          ],
+                      }
+                    : {}),
+            },
+            select: {
+                id: true,
+                firstName: true,
+                lastName: true,
+                email: true,
+                responses: {
+                    select: {
+                        question: {
+                            select: {
+                                sessionId: true,
+                                options: {
+                                    select: {
+                                        isCorrect: true,
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        });
+
+        return students;
+    } catch (err) {
+        console.error(err);
+        return { error: "Error fetching students." };
+    }
+}
+
+export async function getStudentCount(courseId: number) {
+    try {
+        const totalStudents = await prisma.user.count({
+            where: {
+                courses: {
+                    some: {
+                        courseId,
+                        role: "STUDENT",
+                    },
+                },
+            },
+        });
+
+        return totalStudents;
+    } catch (err) {
+        console.error(err);
+        return { error: "Error fetching student information" };
+    }
+}
+
+export async function getAttendanceCount(courseId: number, date: Date) {
+    try {
+        const sessionIds = await getSessionIdsByDate(courseId, date);
+
+        if ("error" in sessionIds) {
+            throw Error();
+        }
+
+        if (sessionIds.length === 0) {
+            return 0;
+        }
+
+        const attendedStudents = await prisma.response.findMany({
+            where: {
+                question: {
+                    sessionId: {
+                        in: sessionIds,
+                    },
+                },
+                user: {
+                    courses: {
+                        some: {
+                            courseId,
+                            role: "STUDENT",
+                        },
+                    },
+                },
+            },
+            distinct: ["userId"],
+            select: {
+                userId: true,
+            },
+        });
+
+        return attendedStudents.length;
+    } catch (err) {
+        console.error(err);
+        return { error: "Error fetching student information" };
+    }
+}