diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss
index 7297b2d5..d4bd9e4a 100644
--- a/devU-client/src/components/pages/gradebook/gradebookPage.scss
+++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss
@@ -1,11 +1,12 @@
 @import 'variables';
 
-
+// Category Styling
 .categoryName {
   color: $text-color;
   font-size: 1.25rem;
 }
 
+// Table Wrapper for layout consistency
 .tableWrapper {
   padding: 0 100px;
 }
@@ -16,12 +17,11 @@
 }
 
 table {
-  border-radius: 20px;
-  // margin: 15px auto;
-  border-collapse: collapse;
   width: 100%;
+  border-collapse: collapse;
 }
 
+// Alternating Row Colors
 tr.evenRow {
   background-color: $table-row-even;
 }
@@ -30,18 +30,19 @@ tr.oddRow {
   background-color: $table-row-odd;
 }
 
+// Table Header & Cell Styling
 th {
-  background-color: $primary;
-  color: #FFF;
-  font-weight: 600;
+  background-color: #5a3d8a;
+  color: white;
 }
 
-td,
-th {
+th, td {
   padding: 10px;
-  text-align: center;
+  border-bottom: 1px solid #ccc;
+  text-align: left;
 }
 
+// Table Borders & Rounded Corners
 th:first-of-type {
   border-top-left-radius: 10px;
 }
@@ -58,12 +59,20 @@ tr:last-of-type td:last-of-type {
   border-bottom-right-radius: 10px;
 }
 
+// Table Options Section
 .tableOptions {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.topSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Text Colors for Status Indicators
 .tableOptions span:first-child,
 span.yellow {
   color: $yellowText;
@@ -74,37 +83,153 @@ span.red {
   color: $redText;
 }
 
-// STUDENT GRADEBOOK STYLING
-
-// .header {
-//   color: $text-color;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   // margin-bottom: 20px;
-// }
-
+// Student Gradebook Styling
 .assignmentName {
   text-align: left;
 }
 
-.gradebook-container {
+.gradebookContainer {
   display: flex;
+  flex-direction: column;
   gap: 20px;
-  flex-wrap: wrap;
 }
 
-.category {
-  width: calc(100%/3 - 14px);
+// Section Styling
+.section {
+  background-color: white;
+  padding: -3px;
+  border-radius: 10px;
+  border: 2px solid #5a3d8a;
+}
+
+.categoryRow {
+  font-weight: bold;
 }
 
+.categoryValue {
+  text-align: right;
+  padding-right: 10px;  // 🟢 Fix: Align value to the left
+}
+
+.categoryText {
+  text-align: left;
+  padding-left: 10px;  // 🟢 Fix: Align "Category Average" text to the right
+}
+
+// Assignment Link Styling
+.assignmentLink {
+  color: blue;
+  text-decoration: underline;
+}
+
+// Category Average Styling (Adjusted for spacing)
+.categoryAverage {
+  font-size: 14px;
+  text-align: right;
+  padding: 10px;
+  font-weight: bold;
+  margin-top: 10px;  // 🟢 FIX: Added spacing so it doesn’t overlap
+}
+
+// Page Wrapper & Title
+.pageWrapper {
+  padding: 20px;
+}
+
+.gradebookTitle {
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+// 🟢 FIX: "Back to Course" Button Alignment
+.backToCourseButton {
+  background-color: #5a3d8a;
+  color: white;
+  padding: 8px 15px;
+  border-radius: 30px;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 137px;
+  right: 30px;
+}
+
+// Section Headers (Purple Background)
+.sectionHeader {
+  background-color: #5a3d8a;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px 8px 0 0;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;  // 🟢 FIX: Ensures Late Days & Score are in the same row
+  align-items: center;
+}
+
+.headerRight {
+  display: flex;
+  gap: 20px;  // 🟢 FIX: Adds spacing between Late Days and Score
+}
+
+// Gradebook Layout (Using Grid)
+.gradebookGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+  width: 100%;  // 🟢 FIX: Ensures the grid container spans full width
+}
+
+// 🟢 FIX: Project Section Width Adjusted
+.sectionLeft {
+  grid-column: 1;
+}
+
+.sectionRight {
+  grid-column: 2;
+}
+
+.sectionFull {
+  grid-column: 1 / span 1;  // 🟢 FIX: Project is same width as Homeworks
+}
+
+// Empty Assignments Text
+.noAssignments {
+  text-align: center;
+  padding: 10px;
+  font-style: italic;
+}
+
+// Course Average Box Styling
+.courseAverage {
+  border: 2px solid #5a3d8a;
+  padding: 14px;
+  display: flex;
+  justify-content: space-between;  // 🟢 FIX: Pushes the value to the rightmost side
+  font-weight: bold;
+  width: 99.01%;
+  grid-column: span 2;
+  margin-top: 20px;
+  border-radius: 13px;
+}
+
+// 🟢 FIX: Mobile Responsive Adjustments
 @media (max-width: 650px) {
   .pageWrapper {
     padding: 0 20px;
   }
 
   .category {
-    width: calc(100%/2 - 14px);
+    width: calc(100% / 2 - 14px);
+  }
+
+  .gradebookGrid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .section {
+    width: 100%;
   }
 }
 
@@ -112,4 +237,9 @@ span.red {
   .category {
     width: 100%;
   }
+
+  .backToCourseButton {
+    position: relative;  // 🟢 FIX: Prevents it from overlapping content on small screens
+    margin-top: 10px;
+  }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
index c7c4c2e6..75f090c0 100644
--- a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
+++ b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { useAppSelector } from 'redux/hooks';
 
-import { Assignment, AssignmentScore } from 'devu-shared-modules';
+import { Assignment, AssignmentScore, Course } from 'devu-shared-modules';
 
 import PageWrapper from 'components/shared/layouts/pageWrapper';
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay';
@@ -21,7 +21,7 @@ const GradebookStudentPage = () => {
     const { courseId } = useParams<{ courseId: string }>();
     const userId = useAppSelector((store) => store.user.id);
     const history = useHistory();
-
+    const [courseName, setCourseName] = useState<string>(""); 
 
     useEffect(() => {
         fetchData();
@@ -34,7 +34,10 @@ const GradebookStudentPage = () => {
 
             const assignmentScores = await RequestService.get<AssignmentScore[]>(`/api/course/${courseId}/assignment-scores/user/${userId}`);
             setAssignmentScores(assignmentScores);
-
+            
+            const courseData = await RequestService.get<Course>(`/api/courses/${courseId}`);
+            setCourseName(courseData.name);
+        
         } catch (error: any) {
             setError(error);
         } finally {
@@ -45,50 +48,125 @@ const GradebookStudentPage = () => {
     if (loading) return <LoadingOverlay delay={250} />;
     if (error) return <ErrorPage error={error} />;
 
-    const categories = [...new Set(assignments.map(a => a.categoryName))];
+    // Categorize assignments
+    const homeworks = assignments.filter(a => a.categoryName === "Homework");
+    const lectureQuestions = assignments.filter(a => a.categoryName === "Lecture Questions");
+    const projects = assignments.filter(a => a.categoryName === "Project");
+
+    const calculateAverage = () => {
+        if (assignmentScores.length === 0) return 0.0;
+        const total = assignmentScores.reduce((sum, a) => sum + (a.score || 0), 0);
+        return (total / assignmentScores.length).toFixed(1);
+    };
+
+    const calculateHomeworkAverage = () => {
+        if (homeworks.length === 0) return "N/A";
+        const totalScore = homeworks.reduce((sum, assignment) => sum + (assignmentScores.find(a => a.assignmentId === assignment.id)?.score || 0), 0);
+        return (totalScore / homeworks.length).toFixed(1);
+    };
 
     return (
         <PageWrapper className={styles.pageWrapper}>
-            <div className={styles.header}>
-                <h1>Student Gradebook</h1>
+            {/* Top Section with Back to Course Button */}
+            <div className={styles.topSection}>
+                <h1 className={styles.gradebookTitle}>{courseName} Gradebook</h1> 
                 {role.isInstructor() && (
-                    <button className='btnSecondary' onClick={() => {
-                        history.push(`/course/${courseId}/gradebook/instructor`)
-                    }}>Instructor View
+                    <button className={styles.backToCourseButton} onClick={() => history.push(`/course/${courseId}/courses`)}>
+                        Back to Course
                     </button>
                 )}
             </div>
-            <div className={styles['gradebook-container']}>
-                {categories.map(category => (
-                    <div key={category} className={styles.category}>
-                        <h2>{category}</h2>
-                        {/* <table className={styles.table}> Add table class */}
-                        <table>
-                            <thead>
-                                {/* <tr className={styles.headerRow}> Add class for purple header */}
-                                    <th>Assignment</th>
-                                    <th>Score</th>
-                                {/* </tr> */}
-                            </thead>
+
+            <div className={styles.gradebookGrid}>
+                {/* Homework - Left Column */}
+                <div className={styles.section}>
+                    <div className={styles.sectionHeader}>
+                        <span>Homeworks</span>
+                        <span className={styles.headerRight}>
+                            <span>Late Days</span>
+                            <span>Score</span>
+                        </span>
+                    </div>
+                    <table className={styles.gradeTable}>
+                        <tbody>
+                            {homeworks.length > 0 ? (
+                                homeworks.map((assignment) => (
+                                    <tr key={assignment.id}>
+                                        <td><a href={`/assignment/${assignment.id}`} className={styles.assignmentLink}>{assignment.name}</a></td>
+                                        <td>0</td>
+                                        <td>{assignmentScores.find(a => a.assignmentId === assignment.id)?.score ?? 'N/A'}</td>
+                                    </tr>
+                                ))
+                            ) : (
+                                <tr>
+                                    <td colSpan={3} className={styles.noAssignments}>No assignments yet</td>
+                                </tr>
+                            )}
+                            <tr className={styles.categoryRow}>
+                                <td colSpan={2} className={styles.categoryText}>Category Average</td>
+                                <td className={styles.categoryValue}>{calculateHomeworkAverage()}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Lecture Questions Section */}
+                <div className={styles.section}>
+                    <div className={styles.sectionHeader}>
+                        <span>Lecture Questions</span>
+                        <span className={styles.headerRight}>
+                            <span>Late Days</span>
+                            <span>Score</span>
+                        </span>
+                    </div>
+                    {lectureQuestions.length > 0 ? (
+                        <table className={styles.gradeTable}>
                             <tbody>
-                                {assignments.filter(a => a.categoryName === category).map((assignment, index) => (
-                                    <tr key={assignment.id} className={index % 2 === 0 ? styles.evenRow : styles.oddRow}>
-                                        <td>
-                                            <div className={styles.assignmentName}>
-                                                {assignment.name}
-                                            </div>
-                                        </td>
-                                        <td>
-                                            {/* <div className={styles.content}> */}
-                                                {assignmentScores.find(aScore => aScore.assignmentId === assignment.id)?.score ?? 'N/A'}
-                                            {/* </div> */}
-                                        </td>
+                                {lectureQuestions.map((assignment) => (
+                                    <tr key={assignment.id}>
+                                        <td>{assignment.name}</td>
+                                        <td>0</td>
+                                        <td>{assignmentScores.find(a => a.assignmentId === assignment.id)?.score ?? 'N/A'}</td>
                                     </tr>
                                 ))}
                             </tbody>
                         </table>
+                    ) : (
+                        <div className={styles.noAssignments}>No assignments yet</div>
+                    )}
+                </div>
+
+                {/* Project Section */}
+                <div className={styles.section}>
+                    <div className={styles.sectionHeader}>
+                        <span>Project</span>
+                        <span className={styles.headerRight}>
+                            <span>Late Days</span>
+                            <span>Score</span>
+                        </span>
                     </div>
-                ))}
+                    {projects.length > 0 ? (
+                        <table className={styles.gradeTable}>
+                            <tbody>
+                                {projects.map((assignment) => (
+                                    <tr key={assignment.id}>
+                                        <td>{assignment.name}</td>
+                                        <td>0</td>
+                                        <td>{assignmentScores.find(a => a.assignmentId === assignment.id)?.score ?? 'N/A'}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    ) : (
+                        <div className={styles.noAssignments}>No assignments yet</div>
+                    )}
+                </div>
+
+                {/* Course Average Section */}
+                <div className={styles.courseAverage}>
+                    <span>Course Average</span>
+                    <span>{calculateAverage()}</span>
+                </div>
             </div>
         </PageWrapper>
     );