diff --git a/codewit/client/src/pages/Home.tsx b/codewit/client/src/pages/Home.tsx
index d67875d..ab92f29 100644
--- a/codewit/client/src/pages/Home.tsx
+++ b/codewit/client/src/pages/Home.tsx
@@ -117,7 +117,7 @@ interface StudentCourseListProps {
 
 function StudentCourseList({ courses }: StudentCourseListProps) {
   return <div className="space-y-2">
-    <h2 className="border-b text-2xl pb-2">Attending</h2>
+    <h2 className="border-b text-2xl pb-2 text-highlight-500">Attending</h2>
     {courses.map(course => {
       return <div key={course.id} className="p-4 rounded-2xl bg-foreground-500 text-white">
         <h3 className="text-xl">
@@ -157,7 +157,7 @@ interface InstructorCourseListProps {
 
 function InstructorCourseList({ courses }: InstructorCourseListProps) {
   return <div className="space-y-2">
-    <h2 className="border-b text-2xl pb-2">Instructing</h2>
+    <h2 className="border-b text-2xl pb-2 text-highlight-500">Instructing</h2>
     {courses.map(course => {
       return <div key={course.id} className="p-4 rounded-2xl bg-foreground-500 text-white">
         <h3 className="text-xl">
diff --git a/codewit/client/src/pages/ImportExercisesPanel.tsx b/codewit/client/src/pages/ImportExercisesPanel.tsx
index e46a466..00443a4 100644
--- a/codewit/client/src/pages/ImportExercisesPanel.tsx
+++ b/codewit/client/src/pages/ImportExercisesPanel.tsx
@@ -46,7 +46,7 @@ export default function ImportExercisesPanel({
 
   return (
     <div className="bg-foreground-600 rounded-md p-4 space-y-3">
-      <h3 className="text-foreground-200 font-semibold">Import Exercises (CSV)</h3>
+      <h3 className="text-highlight-500 font-semibold">Import Exercises (CSV)</h3>
 
       <div className="flex flex-wrap gap-3 items-center">
         <label className="bg-background-500 text-foreground-200 border border-foreground-500 rounded px-2 py-1 cursor-pointer">
diff --git a/codewit/client/src/pages/Read.tsx b/codewit/client/src/pages/Read.tsx
index fc8e2e6..eb8b474 100644
--- a/codewit/client/src/pages/Read.tsx
+++ b/codewit/client/src/pages/Read.tsx
@@ -101,7 +101,7 @@ export default function Read() {
       <LeftPanel info={data} module_id={module_id} course_id={course_id}/>
       {data.demo.exercises.length === 0 ?
         <div className="flex flex-col items-center justify-center w-full">
-          <h3 className="text-xl">No Exercises</h3>
+          <h3 className="text-xl text-highlight-500">No Exercises</h3>
           <p>There are no exercises attached to this demo</p>
         </div>
         :
diff --git a/codewit/client/src/pages/course/TeacherView.tsx b/codewit/client/src/pages/course/TeacherView.tsx
index 43a2ab0..efbfbff 100644
--- a/codewit/client/src/pages/course/TeacherView.tsx
+++ b/codewit/client/src/pages/course/TeacherView.tsx
@@ -284,7 +284,7 @@ export default function TeacherView({ onCourseChange }: TeacherViewProps) {
       {/* ───────── progress table ───────── */}
       <div className="bg-foreground-600 w-3/4 rounded-md p-4">
         <div className="flex items-center justify-between mb-4">
-          <h1 className="font-bold text-foreground-200 text-[16px]">
+          <h1 className="font-bold text-highlight-500 text-[16px]">
             Student Progress
           </h1>
           <button
@@ -396,7 +396,7 @@ export default function TeacherView({ onCourseChange }: TeacherViewProps) {
       {/* ─── pending enrollment requests ─── */}
       {pending.length > 0 && (
         <div className="bg-foreground-600 w-3/4 rounded-md p-4">
-          <h2 className="font-bold text-foreground-200 text-[16px] mb-4">
+          <h2 className="font-bold text-highlight-500 text-[16px] mb-4">
             Pending Enrollment Requests ({pending.length})
           </h2>
           <PendingRequestsCard courseId={courseId} pending={pending} />
diff --git a/codewit/client/src/pages/create/exercise/exercise_id.tsx b/codewit/client/src/pages/create/exercise/exercise_id.tsx
index 26b4b73..6470b6d 100644
--- a/codewit/client/src/pages/create/exercise/exercise_id.tsx
+++ b/codewit/client/src/pages/create/exercise/exercise_id.tsx
@@ -304,7 +304,7 @@ function ExerciseEdit({
             }}>
                 <div className="flex flex-row flex-nowrap items-center gap-x-2 pb-2">
                     <form.ConfirmAway on_away={() => on_cancel()}/>
-                    <h2 className="text-4xl font-bold text-heading">
+                    <h2 className="text-4xl font-bold text-highlight-500">
                         {exercise != null ? "Edit Exercise" : "Create Exercise"}
                     </h2>
                     <div className="flex-1"/>
@@ -537,8 +537,8 @@ function ExerciseTest({
 
     return <div className="space-y-2">
         <div>
-            <h3 className="text-3xl font-bold text-heading">Test Exercise</h3>
-            <p className="text-body">Run a small test with the current exercise inputs to validate it will run as expected</p>
+            <h3 className="text-3xl font-bold text-highlight-500">Test Exercise</h3>
+            <p className="text-white">Run a small test with the current exercise inputs to validate it will run as expected</p>
         </div>
         <div className="flex flex-col gap-2">
             <Editor
@@ -556,7 +556,7 @@ function ExerciseTest({
                     Reset
                 </Button>
             </div>
-            <h4 className="text-2xl font-bold text-heading">Results</h4>
+            <h4 className="text-2xl font-bold text-highlight-500">Results</h4>
             <div className="px-4 w-full min-h-64 overflow-auto">
                 {data != null ?
                     <>