diff --git a/cypress/e2e/batch_creation.cy.js b/cypress/e2e/batch_creation.cy.js
index 653a70a2..12a50d3a 100644
--- a/cypress/e2e/batch_creation.cy.js
+++ b/cypress/e2e/batch_creation.cy.js
@@ -128,12 +128,9 @@ describe("Batch Creation", () => {
 					.should("be.visible");
 				cy.get("span").contains("IST").should("be.visible");
 				cy.get("a").contains("Evaluator").should("be.visible");
-				cy.get("div")
-					.contains("10")
-					.should("be.visible")
-					.get("span")
-					.contains("Seats Left")
-					.should("be.visible");
+				cy.contains("div:visible", "10 Seats Left").should(
+					"be.visible"
+				);
 			});
 			cy.get(`a[href='/lms/batches/details/${batchName}'`).click();
 		});
diff --git a/frontend/src/components/Assignment.vue b/frontend/src/components/Assignment.vue
index 32697bd6..356da1bf 100644
--- a/frontend/src/components/Assignment.vue
+++ b/frontend/src/components/Assignment.vue
@@ -141,7 +141,7 @@
 						:uploadArgs="{
 							private: true,
 						}"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
 				</div>
 
@@ -190,7 +190,7 @@
 							:uploadArgs="{
 								private: true,
 							}"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index ac619982..d002134e 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -6,24 +6,26 @@
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<div
+		<Badge
 			v-if="batch.seat_count && batch.seats_left > 0"
-			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">
-				{{ __('Seats Left') }}
-			</span>
-			<span v-else-if="batch.seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
+			variant="subtle"
+			theme="green"
+			size="md"
+			class="self-start"
+			:label="
+				batch.seats_left +
+				' ' +
+				(batch.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="self-start"
+			:label="__('Sold Out')"
+		/>
 		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
@@ -70,6 +72,7 @@
 	</div>
 </template>
 <script setup>
+import { Badge } from 'frappe-ui'
 import { formatTime } from '@/utils'
 import { Clock, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index 9324d6a9..8af1e293 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -1,28 +1,29 @@
 <template>
 	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
-		<div
+		<Badge
 			v-if="batch.data.seat_count && batch.data.seats_left > 0"
-			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
+			variant="subtle"
+			theme="green"
+			size="md"
 			:class="
 				batch.data.amount || batch.data.courses.length
 					? 'float-right'
 					: 'w-fit mb-4'
 			"
-		>
-			{{ batch.data.seats_left }}
-			<span v-if="batch.data.seats_left > 1">
-				{{ __('Seats Left') }}
-			</span>
-			<span v-else-if="batch.data.seats_left == 1">
-				{{ __('Seat Left') }}
-			</span>
-		</div>
-		<div
+			:label="
+				batch.data.seats_left +
+				' ' +
+				(batch.data.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
+			"
+		/>
+		<Badge
 			v-else-if="batch.data.seat_count && batch.data.seats_left <= 0"
-			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
-		>
-			{{ __('Sold Out') }}
-		</div>
+			variant="subtle"
+			theme="red"
+			size="md"
+			class="float-right"
+			:label="__('Sold Out')"
+		/>
 		<div
 			v-if="batch.data.amount"
 			class="text-lg font-semibold mb-3 text-ink-gray-9"
@@ -136,7 +137,7 @@
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Button, createResource, toast } from 'frappe-ui'
+import { Badge, Button, createResource, toast } from 'frappe-ui'
 import {
 	BookOpen,
 	Clock,
diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 79fbd5b7..b744a122 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -19,7 +19,7 @@
 
 				<!-- Dropdown -->
 				<ComboboxOptions
-					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-white py-1 text-base border-2 shadow-lg"
+					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal py-1 text-base border-2 border-outline-gray-modals shadow-lg"
 				>
 					<input
 						ref="search"
@@ -76,7 +76,10 @@
 					</div>
 
 					<!-- Footer -->
-					<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+					<div
+						v-if="slots.footer"
+						class="border-t border-outline-gray-modals p-1.5 pb-0.5"
+					>
 						<slot
 							name="footer"
 							v-bind="{
@@ -100,7 +103,6 @@ import {
 	ComboboxButton,
 } from '@headlessui/vue'
 import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
-import { ChevronDown, X } from 'lucide-vue-next'
 import { watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
@@ -225,7 +227,7 @@ const inputClasses = computed(() => {
 
 	const variantClasses = {
 		subtle:
-			'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+			'border border-outline-gray-modals bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		outline:
 			'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		disabled: [
diff --git a/frontend/src/components/Controls/ChildTable.vue b/frontend/src/components/Controls/ChildTable.vue
index 5e6ef47e..55e9fd4d 100644
--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -3,10 +3,10 @@
 		<div class="text-xs text-ink-gray-5 mb-2">
 			{{ label }}
 		</div>
-		<div class="overflow-visible border rounded-md">
+		<div class="overflow-visible border border-outline-gray-modals rounded-md">
 			<div class="overflow-x-auto">
 				<div
-					class="grid items-center space-x-4 p-2 border-b"
+					class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
 					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
 					<div
@@ -28,7 +28,7 @@
 						<input
 							v-if="showKey(key)"
 							v-model="row[key]"
-							class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
+							class="py-1.5 px-2 w-full border-none bg-transparent text-ink-gray-8 focus:ring-0 focus:border focus:border-outline-gray-3 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
 						/>
 					</template>
 
@@ -47,7 +47,7 @@
 						<div
 							v-if="menuOpenIndex === rowIndex"
 							ref="menuRef"
-							class="absolute right-0 w-32 z-50 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
 							:class="
 								rowIndex == (rows?.length ?? 0) - 1
 									? 'bottom-full mb-1'
diff --git a/frontend/src/components/Controls/MultiSelect.vue b/frontend/src/components/Controls/MultiSelect.vue
index 063dea4a..ba7261aa 100644
--- a/frontend/src/components/Controls/MultiSelect.vue
+++ b/frontend/src/components/Controls/MultiSelect.vue
@@ -22,7 +22,7 @@
 				<ComboboxOptions
 					v-show="open"
 					static
-					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-white border-2 max-h-[13rem] flex flex-col"
+					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal border-2 border-outline-gray-modals max-h-[13rem] flex flex-col"
 				>
 					<div
 						class="flex-1 my-1 overflow-y-auto px-1.5"
diff --git a/frontend/src/components/Modals/AnnouncementModal.vue b/frontend/src/components/Modals/AnnouncementModal.vue
index 175ce086..0fb51191 100644
--- a/frontend/src/components/Modals/AnnouncementModal.vue
+++ b/frontend/src/components/Modals/AnnouncementModal.vue
@@ -15,20 +15,18 @@
 	>
 		<template #body-content>
 			<div class="flex flex-col gap-4">
-				<div class="">
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Subject') }}
-						<span class="text-ink-red-3">*</span>
-					</div>
-					<Input type="text" v-model="announcement.subject" />
-				</div>
-				<div class="">
-					<div class="mb-1.5 text-sm text-ink-gray-5">
-						{{ __('Reply To') }}
-						<span class="text-ink-red-3">*</span>
-					</div>
-					<Input type="text" v-model="announcement.replyTo" />
-				</div>
+				<FormControl
+					:label="__('Subject')"
+					type="text"
+					v-model="announcement.subject"
+					:required="true"
+				/>
+				<FormControl
+					:label="__('Reply To')"
+					type="text"
+					v-model="announcement.replyTo"
+					:required="true"
+				/>
 				<div class="mb-4">
 					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Announcement') }}
@@ -45,7 +43,13 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Input, TextEditor, createResource, toast } from 'frappe-ui'
+import {
+	Dialog,
+	FormControl,
+	TextEditor,
+	createResource,
+	toast,
+} from 'frappe-ui'
 import { reactive } from 'vue'
 
 const show = defineModel()
diff --git a/frontend/src/components/Modals/AssignmentForm.vue b/frontend/src/components/Modals/AssignmentForm.vue
index 2b06d96c..8064727b 100644
--- a/frontend/src/components/Modals/AssignmentForm.vue
+++ b/frontend/src/components/Modals/AssignmentForm.vue
@@ -43,7 +43,7 @@
 							@change="(val) => (assignment.question = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/components/Modals/DiscussionModal.vue b/frontend/src/components/Modals/DiscussionModal.vue
index a625b37e..e5ad5210 100644
--- a/frontend/src/components/Modals/DiscussionModal.vue
+++ b/frontend/src/components/Modals/DiscussionModal.vue
@@ -26,7 +26,7 @@
 						@change="(val) => (topic.reply = val)"
 						:editable="true"
 						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index b41468b8..1d92678a 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -67,7 +67,7 @@
 								'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
 							)
 						"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/components/Modals/Question.vue b/frontend/src/components/Modals/Question.vue
index 221ac0ee..0fac3063 100644
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -31,7 +31,7 @@
 							@change="(val) => (question.question = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 					<div class="grid grid-cols-2 gap-8 mt-4">
diff --git a/frontend/src/components/Quiz.vue b/frontend/src/components/Quiz.vue
index a066459a..83282cbf 100644
--- a/frontend/src/components/Quiz.vue
+++ b/frontend/src/components/Quiz.vue
@@ -205,7 +205,7 @@
 							@change="(val) => (possibleAnswer = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 					<div class="flex items-center justify-between mt-4">
diff --git a/frontend/src/components/Settings/Categories.vue b/frontend/src/components/Settings/Categories.vue
index be4247ec..c29979eb 100644
--- a/frontend/src/components/Settings/Categories.vue
+++ b/frontend/src/components/Settings/Categories.vue
@@ -45,7 +45,7 @@
 		</div>
 
 		<div class="overflow-y-scroll">
-			<div class="divide-y space-y-2">
+			<div class="divide-y divide-outline-gray-modals space-y-2">
 				<div
 					v-for="(cat, index) in categories.data"
 					:key="cat.name"
@@ -53,7 +53,7 @@
 				>
 					<div
 						v-if="editing?.name !== cat.name"
-						class="flex items-center justify-between group text-sm"
+						class="flex items-center justify-between group text-sm text-ink-gray-9"
 					>
 						<div class="text-ink-gray-9" @dblclick="allowEdit(cat, index)">
 							{{ cat.category }}
diff --git a/frontend/src/components/Settings/Evaluators.vue b/frontend/src/components/Settings/Evaluators.vue
index 53eac690..d6228d83 100644
--- a/frontend/src/components/Settings/Evaluators.vue
+++ b/frontend/src/components/Settings/Evaluators.vue
@@ -32,7 +32,7 @@
 				</template>
 			</FormControl>
 			<div class="overflow-auto h-[60vh]">
-				<div class="divide-y">
+				<div class="divide-y divide-outline-gray-modals">
 					<div
 						v-for="evaluator in evaluators.data"
 						:key="evaluator.evaluator"
diff --git a/frontend/src/components/Settings/Members.vue b/frontend/src/components/Settings/Members.vue
index 5c79926f..c9b9db45 100644
--- a/frontend/src/components/Settings/Members.vue
+++ b/frontend/src/components/Settings/Members.vue
@@ -32,7 +32,7 @@
 				</template>
 			</FormControl>
 			<div class="overflow-y-scroll h-[60vh]">
-				<ul class="divide-y">
+				<ul class="divide-y divide-outline-gray-modals">
 					<li
 						v-for="member in memberList"
 						class="flex items-center justify-between py-2 cursor-pointer"
@@ -58,7 +58,7 @@
 							</div>
 						</div>
 						<div
-							class="flex items-center space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
+							class="flex items-center text-ink-gray-9 space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
 							v-if="member.role && member.role !== 'LMS Student'"
 						>
 							<Shield class="size-4 stroke-1.5" />
diff --git a/frontend/src/components/Settings/SettingFields.vue b/frontend/src/components/Settings/SettingFields.vue
index eb622e36..7dfacb3d 100644
--- a/frontend/src/components/Settings/SettingFields.vue
+++ b/frontend/src/components/Settings/SettingFields.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="mb-5 divide-y overflow-y-auto">
+	<div class="mb-5 divide-y divide-outline-gray-modals overflow-y-auto">
 		<div v-for="(section, index) in sections" class="py-5">
 			<div v-if="section.label" class="font-semibold text-ink-gray-9 mb-4">
 				{{ section.label }}
diff --git a/frontend/src/components/Sidebar/Apps.vue b/frontend/src/components/Sidebar/Apps.vue
index 74b1e62a..35ef2ae6 100644
--- a/frontend/src/components/Sidebar/Apps.vue
+++ b/frontend/src/components/Sidebar/Apps.vue
@@ -17,7 +17,7 @@
 		</template>
 		<template #body>
 			<div
-				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
 			>
 				<div v-for="app in apps.data" key="name">
 					<a
diff --git a/frontend/src/components/Sidebar/Configuration.vue b/frontend/src/components/Sidebar/Configuration.vue
index 25fe6c51..550c4174 100644
--- a/frontend/src/components/Sidebar/Configuration.vue
+++ b/frontend/src/components/Sidebar/Configuration.vue
@@ -1,26 +1,48 @@
 <template>
-	<div class="grid grid-cols-3 justify-between bg-surface-white">
-		<div key="name" class="py-1 px-2 hover:bg-surface-gray-2 rounded">
-			<router-link
-				:to="{
-					name: 'DataImportList',
-					query: {
-						step: 'list',
-					},
-				}"
+	<Popover placement="right-start" trigger="hover" class="flex w-full">
+		<template #target="{ togglePopover }">
+			<button
+				:class="[
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
+				]"
 			>
-				<div class="flex flex-col items-center space-y-1">
-					<ArrowDownToLine
-						class="size-9 text-ink-gray-7 p-2 bg-surface-gray-2 rounded-md"
-					/>
-					<div class="text-sm text-ink-gray-7">
-						{{ __('Import') }}
-					</div>
+				<div class="flex gap-2">
+					<Wrench class="size-4 stroke-1.5" />
+					<span class="whitespace-nowrap">
+						{{ __('Configuration') }}
+					</span>
 				</div>
-			</router-link>
-		</div>
-	</div>
+				<ChevronRight class="h-4 w-4 stroke-1.5" />
+			</button>
+		</template>
+		<template #body>
+			<div
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
+			>
+				<div key="name" class="py-1 px-2 hover:bg-surface-gray-2 rounded">
+					<router-link
+						:to="{
+							name: 'DataImportList',
+							query: {
+								step: 'list',
+							},
+						}"
+					>
+						<div class="flex flex-col items-center space-y-1">
+							<ArrowDownToLine
+								class="size-9 text-ink-gray-7 p-2 bg-surface-gray-2 rounded-md"
+							/>
+							<div class="text-sm text-ink-gray-7">
+								{{ __('Import') }}
+							</div>
+						</div>
+					</router-link>
+				</div>
+			</div>
+		</template>
+	</Popover>
 </template>
 <script setup lang="ts">
-import { ArrowDownToLine } from 'lucide-vue-next'
+import { Popover } from 'frappe-ui'
+import { ArrowDownToLine, Wrench, ChevronRight } from 'lucide-vue-next'
 </script>
diff --git a/frontend/src/components/Sidebar/UserDropdown.vue b/frontend/src/components/Sidebar/UserDropdown.vue
index 99d037be..1daef339 100644
--- a/frontend/src/components/Sidebar/UserDropdown.vue
+++ b/frontend/src/components/Sidebar/UserDropdown.vue
@@ -85,7 +85,6 @@ import {
 	User,
 	Settings,
 	Sun,
-	Wrench,
 	Zap,
 } from 'lucide-vue-next'
 
@@ -171,13 +170,7 @@ const userDropdownOptions = computed(() => {
 					},
 				},
 				{
-					label: 'Configuration',
-					icon: Wrench,
-					submenu: [
-						{
-							component: markRaw(Configuration),
-						},
-					],
+					component: markRaw(Configuration),
 					condition: () => {
 						return userResource.data?.is_moderator
 					},
diff --git a/frontend/src/pages/BatchForm.vue b/frontend/src/pages/BatchForm.vue
index 96bc9c6d..6ee78ea7 100644
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -138,7 +138,7 @@
 						@change="(val) => (batch.batch_details = val)"
 						:editable="true"
 						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
+						editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
 					/>
 				</div>
 			</div>
diff --git a/frontend/src/pages/Courses/CourseDashboard.vue b/frontend/src/pages/Courses/CourseDashboard.vue
index a2c96dbe..3354a410 100644
--- a/frontend/src/pages/Courses/CourseDashboard.vue
+++ b/frontend/src/pages/Courses/CourseDashboard.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="p-5">
-		<div class="grid grid-cols-4 gap-5 mb-5">
+		<div class="grid grid-cols-4 gap-5 mb-5 text-ink-gray-9">
 			<NumberChartGraph
 				:title="__('Enrolled')"
 				:value="formatAmount(course.data?.enrollments)"
@@ -129,7 +129,9 @@
 					<div class="text-ink-gray-5 mb-4">
 						{{ __('Progress Summary') }}
 					</div>
-					<div class="grid grid-cols-[2fr_1fr] items-center justify-between">
+					<div
+						class="grid grid-cols-[2fr_1fr] items-center justify-between text-ink-gray-9"
+					>
 						<div class="flex flex-col space-y-4 flex-1 text-sm">
 							<div
 								class="flex items-center text-ink-gray-7"
@@ -211,10 +213,12 @@
 							class="!w-32"
 						/>
 					</div>
-					<div class="divide-y max-h-[43vh] text-ink-gray-7 overflow-y-auto">
+					<div
+						class="divide-y max-h-[43vh divide-outline-gray-modals text-ink-gray-7 overflow-y-auto"
+					>
 						<div
 							v-for="progress in lessonProgress.data"
-							class="flex justify-between text-sm py-2 my-1"
+							class="flex justify-between text-sm py-2 my-1 text-ink-gray-9"
 						>
 							<div class="">
 								<span class="mr-3 text-xs">
diff --git a/frontend/src/pages/Courses/CourseForm.vue b/frontend/src/pages/Courses/CourseForm.vue
index 000b7461..6746a727 100644
--- a/frontend/src/pages/Courses/CourseForm.vue
+++ b/frontend/src/pages/Courses/CourseForm.vue
@@ -155,7 +155,7 @@
 								"
 								:editable="true"
 								:fixedMenu="true"
-								editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+								editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 							/>
 						</div>
 
diff --git a/frontend/src/pages/Courses/NewCourseModal.vue b/frontend/src/pages/Courses/NewCourseModal.vue
index 6e153f2a..24fbf6cb 100644
--- a/frontend/src/pages/Courses/NewCourseModal.vue
+++ b/frontend/src/pages/Courses/NewCourseModal.vue
@@ -58,7 +58,7 @@
 							@change="(val: string) => (course.description = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[10rem]"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[10rem]"
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/pages/JobApplications.vue b/frontend/src/pages/JobApplications.vue
index 7a66d22c..acd34eb3 100644
--- a/frontend/src/pages/JobApplications.vue
+++ b/frontend/src/pages/JobApplications.vue
@@ -141,7 +141,7 @@
 							@change="(val) => (emailForm.message = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index f02b3c11..6337d5a0 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -101,7 +101,7 @@
 					@change="(val) => (job.description = val)"
 					:editable="true"
 					:fixedMenu="true"
-					editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
+					editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
 				/>
 			</div>
 		</div>
diff --git a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
index 2248ca47..c7a036f4 100644
--- a/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
+++ b/frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
@@ -51,7 +51,7 @@
 							@change="(val: string) => (exercise.problem_statement = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[21rem] overflow-y-auto"
+							editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[21rem] overflow-y-auto"
 						/>
 					</div>
 				</div>