diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
index 6e34f3b..4458b36 100644
--- a/devU-client/src/assets/global.scss
+++ b/devU-client/src/assets/global.scss
@@ -61,17 +61,11 @@
 
     --background: white;
     --text-color: black;
-    --text-color2: white;
     --text-color-secondary: #363636;
     --focus: var(--blue);
 
-    --primary-lighter: #41a8f7;
-
     --primary: var(--purple);
 
-    // --primary: #D9D9D9;
-
-    --primary-darker: #054272;
     --secondary-lighter: #cfd1d1;
     --secondary: #a8abab;
     --secondary-darker: #686b6b;
@@ -98,14 +92,21 @@
     --input-field-background: var(--grey-lightest);
     --input-field-label: var(--grey);
 
+    --table-row-even: var(--grey-lighter);
+    --table-row-odd: var(--grey-lightest);
+
+    --red-text: var(--red);
+    --yellow-text: var(--yellow-dark);
+
     // Non theme colors - will not update with light/dark toggle
     --grey-lightest: #e5e5e5;
     --grey-lighter: #c5c5c5;
     --grey: #555555;
-    --grey-dark: #333333; 
+    --grey-darker: #444444;
+    --grey-darkest: #333333; 
 
-    //--blue-lighter: #78B7FF;
-    //--blue: #1F3D7A;
+    --blue-lighter: #78B7FF;
+    --blue: #1F3D7A;
 
     --red-lighter: #FFA3A3;
     --red: #8A2626;
@@ -117,7 +118,7 @@
     --green-lighter: #B0EEA2;
     --green: #306025;
 
-    --yellow-lighter: #ffeaa7;
+    --yellow-dark: #664600;
     --yellow: #F8D487;
 
     transition: background-color 150ms linear;
@@ -127,16 +128,9 @@
     --background: #1e1e1e;
     --text-color: #FFF;
     --text-color-secondary: #9b9b9b;
-    --blue-darker: #2767a3;
-    --primary-lighter: #3796bc;
-    --primary: #5c36c3;
-   // --primary-darker: rgb(92, 54, 195);
+    --focus: var(--blue-lighter);
 
-    //--primary: #7257EB;
-//     --primary-darker: #2F2363;
-
-    // --primary: #636666;
-    --primary-darker: #133441;
+    --primary: #7257EB;
 
     --secondary-lighter: #636666;
     --secondary: #3d3f3f;
@@ -161,6 +155,12 @@
     --input-field-background: var(--grey);
     --input-field-label: var(--grey-lightest);
 
+    --table-row-even: var(--grey-darker);
+    --table-row-odd: var(--grey-darkest);
+
+    --red-text: var(--red-lighter);
+    --yellow-text: var(--yellow);
+
     background-color: var(--background);
     color: var(--text-color);
   }
diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss
index 496eb9b..1056e10 100644
--- a/devU-client/src/assets/variables.scss
+++ b/devU-client/src/assets/variables.scss
@@ -8,13 +8,8 @@
 $background: var(--background);
 $text-color: var(--text-color);
 $text-color-secondary: var(--text-color-secondary);
-$text-color2 : var(--text-color2);
-$primary-lighter: var(--primary-lighter);
-$primary: var(--primary);
-$primary-darker: var(--primary-darker);
-$blue-darker: var(--blue-darker);
-
 
+$primary: var(--primary);
 
 $secondary-lighter: var(--secondary-lighter);
 $secondary: var(--secondary);
@@ -22,7 +17,7 @@ $secondary-darker: var(--secondary-darker);
 
 $list-item-background: var(--list-item-background);
 $list-item-background-hover: var(--list-item-background-hover);
-$list-item-subtext: var(--list-item-subtext); 
+$list-item-subtext: var(--list-item-subtext);
 
 $list-simple-item-background: var(--list-simple-item-background);
 $list-simple-item-background-hover: var(--list-simple-item-background-hover);
@@ -31,6 +26,9 @@ $list-simple-item-subtext: var(--list-item-subtext);
 $input-field-background: var(--input-field-background);
 $input-field-label: var(--input-field-label);
 
+$table-row-even: var(--table-row-even);
+$table-row-odd: var(--table-row-odd);
+
 $focus: var(--focus);
 
 // These variables WILL NOT update with dark vs light theme
@@ -41,21 +39,22 @@ $grey: var(--grey);
 $blue-lighter: var(--blue-lighter);
 $blue: var(--blue);
 
-
-
-
 $red-lighter: var(--red-lighter);
 $red: var(--red);
 
 $purple-lighter: var(--purple-lighter);
 $purple: var(--purple);
+$purple-darker: var(--purple-darker);
 
 $green-lighter: var(--green-lighter);
 $green: var(--green);
 
-$yellow-lighter: var(--yellow-lighter);
+$yellow-dark: var(--yellow-dark);
 $yellow: var(--yellow);
 
+$redText: var(--red-text);
+$yellowText: var(--yellow-text);
+
 // Non color CSS variables
 $border-radius: 3px;
 
@@ -72,4 +71,4 @@ $extreme: 780px;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
-}
+}
\ No newline at end of file
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss
index 60ed99e..88232e0 100644
--- a/devU-client/src/components/misc/globalToolbar.scss
+++ b/devU-client/src/components/misc/globalToolbar.scss
@@ -16,8 +16,8 @@ $font-size: 16px;
   @extend .flex;
 
   text-decoration: none;
+  color: #FFF;
 
-  color: #d9d9d9;
   font-size: $font-size;
 
   //height: $bar-height;
@@ -40,23 +40,16 @@ $font-size: 16px;
   @extend .link;
   font-size: 40px;
   border-radius: 30px;
-  color: #D9D9D9;
   font-weight: 550;
   //font-size: 2em;
   //font-weight: bold;
 }
 
 .bar {
-  height: 80px;
-  background-color: $purple;
-  //height: $bar-height;
-
+  height: 60px;
+  background-color: $primary;
   font-size: 40px;
-  border-radius: 30px;
-  color: #D9D9D9;
-  font-weight: 550;
-
-
+  color: #FFF;
   @extend .flex;
   justify-content: space-between;
 }
@@ -73,7 +66,7 @@ $font-size: 16px;
 
 // Controls turning the menu options into a sidebar
 // As well as whether or not that sidebar is being shown
-@media (max-width: 300px) {
+@media (max-width: 410px) {
   .flex {
     gap: 1rem;
    
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss
index 78b039b..6efc4d2 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.scss
+++ b/devU-client/src/components/pages/courses/courseDetailPage.scss
@@ -17,8 +17,8 @@
 
 
 .color{
-    background-color: $purple;
-    color: $text-color2;
+    background-color: $primary;
+    color: #FFF; // always white against purple bg
     width: 100%;
     padding: 20px;
     text-align: center;
diff --git a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
index 44575ab..e1440dd 100644
--- a/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
+++ b/devU-client/src/components/pages/gradebook/gradebookInstructorPage.tsx
@@ -1,15 +1,16 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 
-import {Assignment, AssignmentScore, User, UserCourse} from 'devu-shared-modules'
+import { Assignment, AssignmentScore, User, UserCourse } from 'devu-shared-modules'
 
 import PageWrapper from 'components/shared/layouts/pageWrapper'
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
+import TextField from 'components/shared/inputs/textField'
 import ErrorPage from '../errorPage/errorPage'
 
 import RequestService from 'services/request.service'
 
 import styles from './gradebookPage.scss'
-import {useParams} from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
 type TableProps = {
     users: User[]
@@ -18,21 +19,29 @@ type TableProps = {
     assignmentScores: AssignmentScore[]
 }
 type RowProps = {
-    index: Number
+    index: number
     user: User
     userCourse: UserCourse
     assignments: Assignment[]
     assignmentScores: AssignmentScore[]
 }
 
-const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowProps) => {
+const TableRow = ({ index, user, userCourse, assignments, assignmentScores }: RowProps) => {
+    // style table row to alternating colors based on index odd?even
+    const rowClass = index % 2 === 0 ? 'evenRow' : 'oddRow';
+
+    // dont show row if dropped
+    if (userCourse.dropped) {
+        return (<></>)
+    }
+
     return (
-        <tr>
+        <tr className={styles[rowClass]}>
             <td>{index}</td>
             <td>{user.email}</td>
-            <td>{user.externalId}</td>
+            {/* <td>{user.externalId}</td> */}
             <td>{user.preferredName}</td>
-            <td>{userCourse.dropped.toString()}</td>
+            {/* <td>{userCourse.dropped.toString()}</td> */}
             {assignments.map(a => (
                 <td>{assignmentScores.find(as => as.assignmentId === a.id)?.score ?? 'N/A'}</td>
             ))}
@@ -40,16 +49,16 @@ const TableRow = ({index, user, userCourse, assignments, assignmentScores}: RowP
     )
 }
 
-const GradebookTable = ({users, userCourses, assignments, assignmentScores}: TableProps) => {
+const GradebookTable = ({ users, userCourses, assignments, assignmentScores }: TableProps) => {
     return (
-        <table>
-            <th>#</th> 
+        <table className={styles.instrGradesTable}>
+            <th>#</th>
             <th>Email</th>
-            <th>External ID</th>
+            {/* <th>External ID</th> */}
             <th>Preferred Name</th>
-            <th>Dropped</th>
+            {/* <th>Dropped</th> */}
             {assignments.map((a) => {
-                return ( <th>{a.name}</th> )
+                return (<th>{a.name}</th>)
             })}
             {users.map((u, index) => (
                 <TableRow
@@ -72,13 +81,13 @@ const GradebookInstructorPage = () => {
     const [userCourses, setUserCourses] = useState(new Array<UserCourse>()) //All user-course connections for the course
     const [assignments, setAssignments] = useState(new Array<Assignment>()) //All assignments in the course
     const [assignmentScores, setAssignmentScores] = useState(new Array<AssignmentScore>()) //All assignment scores for assignments in the course
-    
-    const { courseId } = useParams<{courseId: string}>()
-    
+
+    const { courseId } = useParams<{ courseId: string }>()
+
     useEffect(() => {
         fetchData()
-      }, [])
-    
+    }, [])
+
     const fetchData = async () => {
         try {
             const userCourses = await RequestService.get<UserCourse[]>(`/api/course/${courseId}/user-courses/`)
@@ -86,12 +95,12 @@ const GradebookInstructorPage = () => {
 
             const users = await RequestService.get<User[]>(`/api/users/course/${courseId}`)
             setUsers(users)
-            
-            const assignments = await RequestService.get<Assignment[]>( `/api/course/${courseId}/assignments` )
+
+            const assignments = await RequestService.get<Assignment[]>(`/api/course/${courseId}/assignments`)
             assignments.sort((a, b) => (Date.parse(a.startDate) - Date.parse(b.startDate))) //Sort by assignment's start date
             setAssignments(assignments)
 
-            const assignmentScores = await RequestService.get<AssignmentScore[]>( `/api/course/${courseId}/assignment-scores` )
+            const assignmentScores = await RequestService.get<AssignmentScore[]>(`/api/course/${courseId}/assignment-scores`)
             setAssignmentScores(assignmentScores)
 
         } catch (error: any) {
@@ -104,13 +113,28 @@ const GradebookInstructorPage = () => {
     if (loading) return <LoadingOverlay delay={250} />
     if (error) return <ErrorPage error={error} />
 
+    const handleStudentSearch = () => {
+        
+    }
+
     return (
         <PageWrapper>
-            <div className={styles.header}>
-                <h1>Instructor Gradebook</h1>
-            </div>
-            <div>
-                <GradebookTable 
+            {/* <div className={styles.header}> */}
+            <h1>Instructor Gradebook</h1>
+            {/* </div> */}
+            <div className={styles.tableWrapper}>
+                <div className={styles.tableOptions}>
+                    <p>Key: <span>! = late</span>, <span>- = no submission</span></p>
+                    <div>
+                        <TextField
+                            onChange={handleStudentSearch}
+                            label='Search'
+                            id='preferredName'
+                            placeholder='search students'
+                        />
+                    </div>
+                </div>
+                <GradebookTable
                     users={users}
                     userCourses={userCourses}
                     assignments={assignments}
diff --git a/devU-client/src/components/pages/gradebook/gradebookPage.scss b/devU-client/src/components/pages/gradebook/gradebookPage.scss
index 9af830c..d4763a2 100644
--- a/devU-client/src/components/pages/gradebook/gradebookPage.scss
+++ b/devU-client/src/components/pages/gradebook/gradebookPage.scss
@@ -1,15 +1,12 @@
 @import 'variables';
 
-
-
-
 .categoryName {
     color: $text-color;
     font-size: 1.25rem;
 }
 
 .assignmentName {
-    color: $blue-darker
+    color: $focus;
 }
 
 .smallLine {
@@ -25,6 +22,66 @@
   margin-right: 10px; /* add this line to create some space between the line and the button */
 }
 
+.tableWrapper {
+  padding: 0 100px;
+}
+
+table {
+  border-radius: 20px;
+  margin: 15px auto;
+  border-collapse: collapse;
+}
+
+tr.evenRow {
+  background-color: $table-row-even;
+}
+
+tr.oddRow {
+  background-color: $table-row-odd;
+}
+
+th {
+  background-color: $primary;
+  color: #FFF;
+  font-weight: 600;
+}
+
+td, th {
+  padding: 10px;
+  text-align: center;
+}
+
+th:first-of-type {
+  border-top-left-radius: 10px;
+}
+
+th:last-of-type {
+  border-top-right-radius: 10px;
+}
+
+tr:last-of-type td:first-of-type {
+  border-bottom-left-radius: 10px;
+}
+
+tr:last-of-type td:last-of-type {
+  border-bottom-right-radius: 10px;
+}
+
+.tableOptions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tableOptions span:first-child, span.yellow {
+  color: $yellowText;
+}
+
+.tableOptions span:last-child, span.red {
+  color: $redText; 
+}
+
+// STUDENT GRADEBOOK STYLING
 
 .header {
   color: $text-color;
@@ -45,8 +102,9 @@
   border-radius: 20px !important;
   transform: translateZ(0);
 }
+
 .table {
-  color: $blue-darker;
+  color: $text-color;
   width: 100%;
   overflow: hidden;
   border-collapse: collapse;
@@ -73,11 +131,13 @@
   }
 
   .evenRow {
-    background-color: if(type-of($secondary-lighter) == 'color', lighten($secondary-lighter, 5%), #e0e0e0); // Fallback to #e0e0e0
+    // background-color: if(type-of($secondary-lighter) == 'color', lighten($secondary-lighter, 5%), #e0e0e0); // Fallback to #e0e0e0
+    background-color: $table-row-even;
   }
 
   .oddRow {
-    background-color: if(type-of($secondary-lighter) == 'color', darken($secondary-lighter, 5%), #d0d0d0); // Fallback to #d0d0d0
+    // background-color: if(type-of($secondary-lighter) == 'color', darken($secondary-lighter, 5%), #d0d0d0); // Fallback to #d0d0d0
+    background-color: $table-row-odd;
   }
 
 }
@@ -105,3 +165,4 @@
 
 }
 
+
diff --git a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
index 9414f0c..3a4448f 100644
--- a/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
+++ b/devU-client/src/components/pages/gradebook/gradebookStudentPage.tsx
@@ -9,7 +9,6 @@ import LoadingOverlay from 'components/shared/loaders/loadingOverlay';
 import ErrorPage from '../errorPage/errorPage';
 
 import RequestService from 'services/request.service';
-//import Button from '@mui/material/Button';
 
 import styles from './gradebookPage.scss';
 
diff --git a/devU-client/src/components/utils/userOptionsDropdown.scss b/devU-client/src/components/utils/userOptionsDropdown.scss
index 26d2325..6db877b 100644
--- a/devU-client/src/components/utils/userOptionsDropdown.scss
+++ b/devU-client/src/components/utils/userOptionsDropdown.scss
@@ -89,7 +89,7 @@
   text-decoration: none;
 
   &:hover {
-    background: $primary-darker;
+    background: $purple-darker;
   }
 }
 
diff --git a/devU-client/src/utils/theme.utils.ts b/devU-client/src/utils/theme.utils.ts
index 95691c3..7c4bf4f 100644
--- a/devU-client/src/utils/theme.utils.ts
+++ b/devU-client/src/utils/theme.utils.ts
@@ -52,7 +52,6 @@ export function getCssVariables() {
     background: body.getPropertyValue('--background'),
 
     primary: body.getPropertyValue('--primary'),
-    primaryDarker: body.getPropertyValue('--primary-darker'),
 
     secondary: body.getPropertyValue('--secondary'),
     secondaryDarker: body.getPropertyValue('--secondary-darker'),
@@ -76,11 +75,12 @@ export function getCssVariables() {
 
     purpleLighter: body.getPropertyValue('--purple-lighter'),
     purple: body.getPropertyValue('--purple'),
+    purpleDarker: body.getPropertyValue('--purple-darker'),
 
     greenLighter: body.getPropertyValue('--green-lighter'),
     green: body.getPropertyValue('--green'),
 
-    yellowLighter: body.getPropertyValue('--yellow-lighter'),
+    yellowDark: body.getPropertyValue('--yellow-dark'),
     yellow: body.getPropertyValue('--yellow'),
   }
 }