diff --git a/frontend/src/components/Modals/AssignmentForm.vue b/frontend/src/components/Modals/AssignmentForm.vue
index f19b8114..ef442226 100644
--- a/frontend/src/components/Modals/AssignmentForm.vue
+++ b/frontend/src/components/Modals/AssignmentForm.vue
@@ -113,6 +113,14 @@ watch(
 	{ flush: 'post' }
 )
 
+watch(show, (newVal) => {
+	if (newVal && props.assignmentID === 'new') {
+		assignment.title = ''
+		assignment.type = ''
+		assignment.question = ''
+	}
+})
+
 const saveAssignment = () => {
 	if (props.assignmentID == 'new') {
 		assignments.value.insert.submit(
diff --git a/frontend/src/components/Modals/BatchStudentProgress.vue b/frontend/src/components/Modals/BatchStudentProgress.vue
index 8a5a96a4..7e3c442f 100644
--- a/frontend/src/components/Modals/BatchStudentProgress.vue
+++ b/frontend/src/components/Modals/BatchStudentProgress.vue
@@ -11,7 +11,7 @@
 					<Avatar :image="student.user_image" size="3xl" />
 					<div class="space-y-1">
 						<div class="flex items-center space-x-2">
-							<div class="text-xl font-semibold">
+							<div class="text-xl font-semibold text-ink-gray-9">
 								{{ student.full_name }}
 							</div>
 							<Badge
@@ -36,7 +36,9 @@
 						v-if="Object.keys(student.assessments).length"
 						class="space-y-2 text-sm"
 					>
-						<div class="flex items-center border-b pb-1 font-medium">
+						<div
+							class="flex items-center border-b pb-1 font-medium text-ink-gray-9"
+						>
 							<span class="flex-1">
 								{{ __('Assessment') }}
 							</span>
@@ -86,7 +88,9 @@
 						v-if="Object.keys(student.courses).length"
 						class="space-y-2 text-sm"
 					>
-						<div class="flex items-center border-b pb-1 font-medium">
+						<div
+							class="flex items-center border-b pb-1 font-medium text-ink-gray-9"
+						>
 							<span class="flex-1">
 								{{ __('Courses') }}
 							</span>
diff --git a/frontend/src/components/NoPermission.vue b/frontend/src/components/NoPermission.vue
index f88105b7..2afd0ee4 100644
--- a/frontend/src/components/NoPermission.vue
+++ b/frontend/src/components/NoPermission.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="border rounded-md w-1/3 mx-auto my-32">
-		<div class="border-b px-5 py-3 font-medium">
+		<div class="border-b px-5 py-3 font-medium text-ink-gray-9">
 			<span
 				class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:mr-2"
 			></span>
 			{{ __('Not Permitted') }}
 		</div>
 		<div v-if="user.data" class="px-5 py-3">
-			<div>
+			<div class="text-ink-gray-7">
 				{{ __('You do not have permission to access this page.') }}
 			</div>
 			<router-link
@@ -21,7 +21,7 @@
 			</router-link>
 		</div>
 		<div class="px-5 py-3">
-			<div>
+			<div class="text-ink-gray-7">
 				{{ __('Please login to access this page.') }}
 			</div>
 			<Button @click="redirectToLogin()" class="mt-4">
diff --git a/frontend/src/components/Quiz.vue b/frontend/src/components/Quiz.vue
index 7d08941f..a066459a 100644
--- a/frontend/src/components/Quiz.vue
+++ b/frontend/src/components/Quiz.vue
@@ -55,8 +55,8 @@
 
 		<div v-if="quiz.data.duration" class="flex flex-col space-x-1 my-4">
 			<div class="mb-2">
-				<span class=""> {{ __('Time') }}: </span>
-				<span class="font-semibold">
+				<span class="text-ink-gray-9"> {{ __('Time') }}: </span>
+				<span class="font-semibold text-ink-gray-9">
 					{{ formatTimer(timer) }}
 				</span>
 			</div>
@@ -165,14 +165,14 @@
 								</div>
 							</div>
 							<span
-								class="ml-2"
+								class="ml-2 text-ink-gray-9"
 								v-html="questionDetails.data[`option_${index}`]"
 							>
 							</span>
 						</label>
 						<div
 							v-if="questionDetails.data[`explanation_${index}`]"
-							class="mt-2 text-xs"
+							class="mt-2 text-xs text-ink-gray-7"
 							v-show="showAnswers.length"
 						>
 							{{ questionDetails.data[`explanation_${index}`] }}
@@ -260,7 +260,7 @@
 					)
 				}}
 			</div>
-			<div v-else>
+			<div v-else class="text-ink-gray-7">
 				{{
 					__(
 						'You got {0}% correct answers with a score of {1} out of {2}'
diff --git a/frontend/src/components/StudentHeatmap.vue b/frontend/src/components/StudentHeatmap.vue
index ba1f21e3..a3587a44 100644
--- a/frontend/src/components/StudentHeatmap.vue
+++ b/frontend/src/components/StudentHeatmap.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-if="heatmap.data">
-		<div class="text-lg font-semibold mb-2">
+		<div class="text-lg font-semibold mb-2 text-ink-gray-9">
 			{{ heatmap.data.total_activities }}
 			{{
 				heatmap.data.total_activities > 1 ? __('activities') : __('activity')
diff --git a/frontend/src/pages/BatchDetail.vue b/frontend/src/pages/BatchDetail.vue
index 0165cc5d..c3982870 100644
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -40,7 +40,7 @@
 			</div>
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
-					<div class="text-2xl font-semibold">
+					<div class="text-2xl font-semibold text-ink-gray-9">
 						{{ __('Courses') }}
 					</div>
 				</div>
diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index 563937bc..a2492e3a 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -10,7 +10,7 @@
 		</header>
 		<div class="py-5">
 			<div class="container border-b mb-4 pb-5">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
 					{{ __('Job Details') }}
 				</div>
 				<div class="grid grid-cols-2 gap-5">
@@ -59,7 +59,7 @@
 				</div>
 			</div>
 			<div class="container border-b mb-4 pb-5">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg font-semibold mb-4 text-ink-gray-9">
 					{{ __('Company Details') }}
 				</div>
 				<div class="grid grid-cols-2 gap-5">
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
index 7af89541..0563e7bb 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseSubmission.vue
@@ -21,7 +21,7 @@
 	</div>
 	<div class="grid grid-cols-2 h-[calc(100vh_-_3rem)]">
 		<div class="border-r py-5 px-8 h-full">
-			<div class="font-semibold mb-2">
+			<div class="font-semibold mb-2 text-ink-gray-9">
 				{{ __('Problem Statement') }}
 			</div>
 			<div
@@ -31,7 +31,7 @@
 		</div>
 		<div>
 			<div class="flex items-center justify-between p-2 bg-surface-gray-2">
-				<div class="font-semibold">
+				<div class="font-semibold text-ink-gray-9">
 					{{ exercise.doc?.language }}
 				</div>
 				<div class="space-x-2">
@@ -89,7 +89,9 @@
 						class="py-3"
 					>
 						<div class="flex items-center mb-3">
-							<span class=""> {{ __('Test {0}').format(index + 1) }} - </span>
+							<span class="text-ink-gray-9">
+								{{ __('Test {0}').format(index + 1) }} -
+							</span>
 							<span
 								class="font-semibold ml-2 mr-1"
 								:class="
@@ -112,13 +114,13 @@
 								<div class="text-xs text-ink-gray-7">
 									{{ __('Input') }}
 								</div>
-								<div>{{ testCase.input }}</div>
+								<div class="text-ink-gray-9">{{ testCase.input }}</div>
 							</div>
 							<div class="space-y-2">
 								<div class="text-xs text-ink-gray-7">
 									{{ __('Your Output') }}
 								</div>
-								<div>
+								<div class="text-ink-gray-9">
 									{{ testCase.output }}
 								</div>
 							</div>
@@ -126,7 +128,9 @@
 								<div class="text-xs text-ink-gray-7">
 									{{ __('Expected Output') }}
 								</div>
-								<div>{{ testCase.expected_output }}</div>
+								<div class="text-ink-gray-9">
+									{{ testCase.expected_output }}
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/frontend/src/pages/QuizForm.vue b/frontend/src/pages/QuizForm.vue
index 2d73df88..da61eb23 100644
--- a/frontend/src/pages/QuizForm.vue
+++ b/frontend/src/pages/QuizForm.vue
@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div v-if="!readOnlyMode" class="space-x-2">
+		<div v-if="!readOnlyMode" class="flex items-center space-x-2">
 			<Badge v-if="quizDetails.isDirty" theme="orange">
 				{{ __('Not Saved') }}
 			</Badge>
diff --git a/frontend/src/pages/QuizSubmission.vue b/frontend/src/pages/QuizSubmission.vue
index 8ce00bee..e217648a 100644
--- a/frontend/src/pages/QuizSubmission.vue
+++ b/frontend/src/pages/QuizSubmission.vue
@@ -56,8 +56,8 @@
 					<span class="font-semibold"> {{ __('Question') }}: </span>
 					<span class="leading-5" v-html="row.question"> </span>
 				</div>
-				<div class="">
-					<span class="font-semibold"> {{ __('Answer') }} </span>
+				<div class="text-ink-gray-9">
+					<span class="font-semibold"> {{ __('Answer') }}: </span>
 					<span class="leading-5" v-html="row.answer"></span>
 				</div>
 				<div class="grid grid-cols-2 gap-5">
diff --git a/frontend/src/pages/QuizSubmissionList.vue b/frontend/src/pages/QuizSubmissionList.vue
index 0c240c76..edfe9858 100644
--- a/frontend/src/pages/QuizSubmissionList.vue
+++ b/frontend/src/pages/QuizSubmissionList.vue
@@ -5,7 +5,7 @@
 		<Breadcrumbs :items="breadcrumbs" />
 	</header>
 	<div v-if="submissions.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
-		<div class="text-xl font-semibold mb-5">
+		<div class="text-xl font-semibold mb-5 text-ink-gray-9">
 			{{ submissions.data[0].quiz_title }}
 		</div>
 		<ListView