chore(release): Bumped to Version 2.24.0

Merge pull request #1334 from pateljannat/paid-certificate-on-courses
feat: paid certifications on courses
2025-02-26 04:50:44 +00:00 · 2025-02-25 14:47:07 +05:30 · 2025-02-25 14:33:53 +05:30 · 2025-02-25 12:46:35 +05:30 · 2025-02-25 10:50:30 +05:30 · 2025-02-25 01:05:38 +05:30
244 changed files with 23396 additions and 11648 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -0,0 +1,64 @@
 name: Build Container Image
 on:
  workflow_dispatch:
  push:
    branches:
      - main
    tags:
      - "*"
 jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    strategy:
      matrix:
        arch: [amd64, arm64]
    permissions:
      packages: write
    steps:
      - name: Checkout Entire Repository
        uses: actions/checkout@v4
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
        with:
          platforms: linux/${{ matrix.arch }}
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Set Branch
        run: |
          export APPS_JSON='[{"url": "https://github.com/frappe/lms","branch": "main"}]'
          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
          echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
      - name: Set Image Tag
        run: |
          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
      - uses: actions/checkout@v4
        with:
          repository: frappe/frappe_docker
          path: builds
      - name: Build and push
        uses: docker/build-push-action@v6
        with:
          push: true
          context: builds
          file: builds/images/layered/Containerfile
          tags: >
            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
          build-args: |
            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"
--- a/README.md
+++ b/README.md
@@ -106,9 +106,9 @@ wget https://frappe.io/easy-install.py
 python3 ./easy-install.py deploy \
    --project=learning_prod_setup \
    --email=your_email.example.com \
-    --image=ghcr.io/frappe/learning \
+    --image=ghcr.io/frappe/lms \
    --version=stable \
-    --app=learning \
+    --app=lms \
    --sitename subdomain.domain.tld
 ```
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://lms1:8000",
+		baseUrl: "http://testui:8000",
 	},
 });
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -5,7 +5,7 @@ describe("Course Creation", () => {
 		cy.visit("/lms/courses");
 		// Create a course
-		cy.get("header").children().last().children().last().click();
+		cy.get("button").contains("New").click();
 		cy.wait(1000);
 		cy.url().should("include", "/courses/new/edit");
@@ -84,9 +84,8 @@ describe("Course Creation", () => {
 		cy.wait(1000);
 		cy.get("label").contains("Title").type("Test Lesson");
 		cy.get("#content .ce-block").type(
-			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+			"{enter}This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
 		cy.button("Save").click();
--- a/2
+++ b/2
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Frappe Learning</title>
 		<meta name="title" content="{{ meta.title }}" />
@@ -42,6 +42,7 @@
 		<script>
 			window.csrf_token = '{{ csrf_token }}'
 			window.setup_complete = '{{ setup_complete }}'
 			document.getElementById('seo-content').style.display = 'none';
 		</script>
 		<script type="module" src="/src/main.js"></script>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,12 +19,14 @@
    "@editorjs/paragraph": "^2.11.3",
    "@editorjs/simple-image": "^1.6.0",
    "@editorjs/table": "^2.4.2",
    "@vueuse/router": "^12.7.0",
    "ace-builds": "^1.36.2",
    "apexcharts": "^4.3.0",
    "chart.js": "^4.4.1",
    "codemirror-editor-vue3": "^2.8.0",
    "dayjs": "^1.11.6",
    "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.89",
+    "frappe-ui": "^0.1.109",
    "lucide-vue-next": "^0.383.0",
    "markdown-it": "^14.0.0",
    "pinia": "^2.0.33",
@@ -35,6 +37,7 @@
    "vue-chartjs": "^5.3.0",
    "vue-draggable-next": "^2.2.1",
    "vue-router": "^4.0.12",
    "vue3-apexcharts": "^1.8.0",
    "vuedraggable": "4.1.0"
  },
  "devDependencies": {
--- a/frontend/src/assets/Inter/Inter-Black.woff
+++ b/frontend/src/assets/Inter/Inter-Black.woff
--- a/frontend/src/assets/Inter/Inter-Black.woff2
+++ b/frontend/src/assets/Inter/Inter-Black.woff2
--- a/frontend/src/assets/Inter/Inter-BlackItalic.woff
+++ b/frontend/src/assets/Inter/Inter-BlackItalic.woff
--- a/frontend/src/assets/Inter/Inter-BlackItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-BlackItalic.woff2
--- a/frontend/src/assets/Inter/Inter-Bold.woff
+++ b/frontend/src/assets/Inter/Inter-Bold.woff
--- a/frontend/src/assets/Inter/Inter-Bold.woff2
+++ b/frontend/src/assets/Inter/Inter-Bold.woff2
--- a/frontend/src/assets/Inter/Inter-BoldItalic.woff
+++ b/frontend/src/assets/Inter/Inter-BoldItalic.woff
--- a/frontend/src/assets/Inter/Inter-BoldItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-BoldItalic.woff2
--- a/frontend/src/assets/Inter/Inter-ExtraBold.woff
+++ b/frontend/src/assets/Inter/Inter-ExtraBold.woff
--- a/frontend/src/assets/Inter/Inter-ExtraBold.woff2
+++ b/frontend/src/assets/Inter/Inter-ExtraBold.woff2
--- a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff
+++ b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff
--- a/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-ExtraBoldItalic.woff2
--- a/frontend/src/assets/Inter/Inter-ExtraLight.woff
+++ b/frontend/src/assets/Inter/Inter-ExtraLight.woff
--- a/frontend/src/assets/Inter/Inter-ExtraLight.woff2
+++ b/frontend/src/assets/Inter/Inter-ExtraLight.woff2
--- a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff
+++ b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff
--- a/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-ExtraLightItalic.woff2
--- a/frontend/src/assets/Inter/Inter-Italic.woff
+++ b/frontend/src/assets/Inter/Inter-Italic.woff
--- a/frontend/src/assets/Inter/Inter-Italic.woff2
+++ b/frontend/src/assets/Inter/Inter-Italic.woff2
--- a/frontend/src/assets/Inter/Inter-Light.woff
+++ b/frontend/src/assets/Inter/Inter-Light.woff
--- a/frontend/src/assets/Inter/Inter-Light.woff2
+++ b/frontend/src/assets/Inter/Inter-Light.woff2
--- a/frontend/src/assets/Inter/Inter-LightItalic.woff
+++ b/frontend/src/assets/Inter/Inter-LightItalic.woff
--- a/frontend/src/assets/Inter/Inter-LightItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-LightItalic.woff2
--- a/frontend/src/assets/Inter/Inter-Medium.woff
+++ b/frontend/src/assets/Inter/Inter-Medium.woff
--- a/frontend/src/assets/Inter/Inter-Medium.woff2
+++ b/frontend/src/assets/Inter/Inter-Medium.woff2
--- a/frontend/src/assets/Inter/Inter-MediumItalic.woff
+++ b/frontend/src/assets/Inter/Inter-MediumItalic.woff
--- a/frontend/src/assets/Inter/Inter-MediumItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-MediumItalic.woff2
--- a/frontend/src/assets/Inter/Inter-Regular.woff
+++ b/frontend/src/assets/Inter/Inter-Regular.woff
--- a/frontend/src/assets/Inter/Inter-Regular.woff2
+++ b/frontend/src/assets/Inter/Inter-Regular.woff2
--- a/frontend/src/assets/Inter/Inter-SemiBold.woff
+++ b/frontend/src/assets/Inter/Inter-SemiBold.woff
--- a/frontend/src/assets/Inter/Inter-SemiBold.woff2
+++ b/frontend/src/assets/Inter/Inter-SemiBold.woff2
--- a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff
+++ b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff
--- a/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-SemiBoldItalic.woff2
--- a/frontend/src/assets/Inter/Inter-Thin.woff
+++ b/frontend/src/assets/Inter/Inter-Thin.woff
--- a/frontend/src/assets/Inter/Inter-Thin.woff2
+++ b/frontend/src/assets/Inter/Inter-Thin.woff2
--- a/frontend/src/assets/Inter/Inter-ThinItalic.woff
+++ b/frontend/src/assets/Inter/Inter-ThinItalic.woff
--- a/frontend/src/assets/Inter/Inter-ThinItalic.woff2
+++ b/frontend/src/assets/Inter/Inter-ThinItalic.woff2
--- a/frontend/src/assets/Inter/Inter-italic.var.woff2
+++ b/frontend/src/assets/Inter/Inter-italic.var.woff2
--- a/frontend/src/assets/Inter/Inter-roman.var.woff2
+++ b/frontend/src/assets/Inter/Inter-roman.var.woff2
--- a/frontend/src/assets/Inter/Inter.var.woff2
+++ b/frontend/src/assets/Inter/Inter.var.woff2
--- a/frontend/src/components/Annoucements.vue
+++ b/frontend/src/components/Annoucements.vue
@@ -5,7 +5,7 @@
 				<div class="flex items-center justify-between mb-2">
 					<div class="flex items-center">
 						<Avatar :label="comm.sender_full_name" size="lg" />
-						<div class="ml-2">
+						<div class="ml-2 text-ink-gray-7">
 							{{ comm.sender_full_name }}
 						</div>
 					</div>
@@ -14,13 +14,13 @@
 					</div>
 				</div>
 				<div
-					class="prose prose-sm bg-gray-50 !min-w-full px-4 py-2 rounded-md"
+					class="prose prose-sm bg-surface-menu-bar !min-w-full px-4 py-2 rounded-md"
 					v-html="comm.content"
 				></div>
 			</div>
 		</div>
 	</div>
-	<div v-else class="text-sm italic text-gray-600">
+	<div v-else class="text-sm italic text-ink-gray-5">
 		{{ __('No announcements') }}
 	</div>
 </template>
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out border-r bg-surface-menu-bar"
 		:class="sidebarStore.isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
@@ -23,16 +23,16 @@
 				<div
 					class="flex items-center justify-between pr-2 cursor-pointer"
 					:class="sidebarStore.isSidebarCollapsed ? 'pl-3' : 'pl-4'"
-					@click="showWebPages = !showWebPages"
+					@click="toggleWebPages"
 				>
 					<div
 						v-if="!sidebarStore.isSidebarCollapsed"
-						class="flex items-center text-sm text-gray-600 my-1"
+						class="flex items-center text-sm text-ink-gray-5 my-1"
 					>
 						<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 							<ChevronRight
-								class="h-4 w-4 stroke-1.5 text-gray-900 transition-all duration-300 ease-in-out"
+								class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
-								:class="{ 'rotate-90': showWebPages }"
+								:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
 							/>
 						</span>
 						<span class="ml-2">
@@ -41,14 +41,14 @@
 					</div>
 					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
 						<template #icon>
-							<Plus class="h-4 w-4 text-gray-700 stroke-1.5" />
+							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
 						</template>
 					</Button>
 				</div>
 				<div
 					v-if="sidebarSettings.data?.web_pages?.length"
 					class="flex flex-col transition-all duration-300 ease-in-out"
-					:class="showWebPages ? 'block' : 'hidden'"
+					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
 				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
@@ -62,6 +62,14 @@
 				</div>
 			</div>
 		</div>
 		<div>
 			<TrialBanner
 				v-if="
 					userResource.data?.user_type == 'System User' &&
 					userResource.data?.is_fc_site
 				"
 				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
 			/>
 			<SidebarLink
 				:link="{
 					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
@@ -73,7 +81,7 @@
 				<template #icon>
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 						<CollapseSidebar
-						class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+							class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
 							:class="{
 								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
 							}"
@@ -82,6 +90,7 @@
 				</template>
 			</SidebarLink>
 		</div>
 	</div>
 	<PageModal
 		v-model="showPageModal"
 		v-model:reloadSidebar="sidebarSettings"
@@ -101,7 +110,7 @@ import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
-import { createResource, Button } from 'frappe-ui'
+import { Button, createResource, TrialBanner } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 const { user, sidebarSettings } = sessionStore()
@@ -114,7 +123,6 @@ const showPageModal = ref(false)
 const isModerator = ref(false)
 const isInstructor = ref(false)
 const pageToEdit = ref(null)
 const showWebPages = ref(false)
 const settingsStore = useSettings()
 onMounted(() => {
@@ -185,6 +193,17 @@ const addQuizzes = () => {
 	}
 }
 const addAssignments = () => {
 	if (isInstructor.value || isModerator.value) {
 		sidebarLinks.value.push({
 			label: 'Assignments',
 			icon: 'Pencil',
 			to: 'Assignments',
 			activeFor: ['Assignments', 'AssignmentForm'],
 		})
 	}
 }
 const addPrograms = () => {
 	let activeFor = ['Programs', 'ProgramForm']
 	let index = 1
@@ -247,12 +266,25 @@ watch(userResource, () => {
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor
 		addQuizzes()
 		addPrograms()
 		addQuizzes()
 		addAssignments()
 	}
 })
 const toggleSidebar = () => {
 	sidebarStore.isSidebarCollapsed = !sidebarStore.isSidebarCollapsed
 	localStorage.setItem(
 		'isSidebarCollapsed',
 		JSON.stringify(sidebarStore.isSidebarCollapsed)
 	)
 }
 const toggleWebPages = () => {
 	sidebarStore.isWebpagesCollapsed = !sidebarStore.isWebpagesCollapsed
 	localStorage.setItem(
 		'isWebpagesCollapsed',
 		JSON.stringify(sidebarStore.isWebpagesCollapsed)
 	)
 }
 </script>
--- a/frontend/src/components/Apps.vue
+++ b/frontend/src/components/Apps.vue
@@ -3,7 +3,7 @@
 		<template #target="{ togglePopover }">
 			<button
 				:class="[
-					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+					'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-8 hover:bg-surface-gray-2',
 				]"
 				@click.prevent="togglePopover()"
 			>
@@ -18,15 +18,15 @@
 		</template>
 		<template #body>
 			<div
-				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+				class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
 			>
 				<div v-for="app in apps.data" key="name">
 					<a
 						:href="app.route"
-						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+						class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-surface-gray-2"
 					>
 						<img class="size-8" :src="app.logo" />
-						<div class="text-sm" @click="app.onClick">
+						<div class="text-sm text-ink-gray-7" @click="app.onClick">
 							{{ app.title }}
 						</div>
 					</a>
--- a/frontend/src/components/AssessmentPlugin.vue
+++ b/frontend/src/components/AssessmentPlugin.vue
@@ -0,0 +1,75 @@
 <template>
 	<Dialog
 		v-model="show"
 		:options="{
 			size: 'xl',
 		}"
 	>
 		<template #body>
 			<div class="p-5 space-y-4">
 				<div v-if="type == 'quiz'" class="text-lg font-semibold">
 					{{ __('Add a quiz to your lesson') }}
 				</div>
 				<div v-else class="text-lg font-semibold">
 					{{ __('Add an assignment to your lesson') }}
 				</div>
 				<div>
 					<Link
 						v-if="type == 'quiz'"
 						v-model="quiz"
 						doctype="LMS Quiz"
 						:label="__('Select a quiz')"
 						:onCreate="(value, close) => redirectToForm()"
 					/>
 					<Link
 						v-else
 						v-model="assignment"
 						doctype="LMS Assignment"
 						:label="__('Select an assignment')"
 						:onCreate="(value, close) => redirectToForm()"
 					/>
 				</div>
 				<div class="flex justify-end space-x-2">
 					<Button variant="solid" @click="addAssessment()">
 						{{ __('Save') }}
 					</Button>
 				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
 import { Dialog, Button } from 'frappe-ui'
 import { onMounted, ref, nextTick } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 const show = ref(false)
 const quiz = ref(null)
 const assignment = ref(null)
 const props = defineProps({
 	type: {
 		type: String,
 		required: true,
 	},
 	onAddition: {
 		type: Function,
 		required: true,
 	},
 })
 onMounted(async () => {
 	await nextTick()
 	show.value = true
 })
 const addAssessment = () => {
 	props.onAddition(props.type == 'quiz' ? quiz.value : assignment.value)
 	show.value = false
 }
 const redirectToForm = () => {
 	if (props.type == 'quiz') window.open('/lms/quizzes/new', '_blank')
 	else window.open('/lms/assignments/new', '_blank')
 }
 </script>
--- a/frontend/src/components/Assessments.vue
+++ b/frontend/src/components/Assessments.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Assessments') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="showModal = true">
@@ -11,7 +11,7 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
-		<div v-if="assessments.data?.length">
+		<div v-if="assessments.data?.length" class="text-sm">
 			<ListView
 				:columns="getAssessmentColumns()"
 				:rows="assessments.data"
@@ -19,10 +19,11 @@
 				:options="{
 					showTooltip: false,
 					getRowRoute: (row) => getRowRoute(row),
 					selectable: user.data?.is_student ? false : true,
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getAssessmentColumns()">
 						<template #prefix="{ item }">
@@ -41,6 +42,14 @@
 								<div v-if="column.key == 'assessment_type'">
 									{{ row[column.key] == 'LMS Quiz' ? 'Quiz' : 'Assignment' }}
 								</div>
 								<div v-else-if="column.key == 'title'">
 									{{ row[column.key] }}
 								</div>
 								<div v-else-if="isNaN(row[column.key])">
 									<Badge :theme="getStatusTheme(row[column.key])">
 										{{ row[column.key] }}
 									</Badge>
 								</div>
 								<div v-else>
 									{{ row[column.key] }}
 								</div>
@@ -62,7 +71,7 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-		<div v-else class="text-sm italic text-gray-600">
+		<div v-else class="text-sm italic text-ink-gray-5">
 			{{ __('No Assessments') }}
 		</div>
 	</div>
@@ -83,6 +92,7 @@ import {
 	ListSelectBanner,
 	createResource,
 	Button,
 	Badge,
 } from 'frappe-ui'
 import { inject, ref } from 'vue'
 import AssessmentModal from '@/components/Modals/AssessmentModal.vue'
@@ -148,7 +158,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: row.submission.name,
 				},
 			}
@@ -156,7 +166,7 @@ const getRowRoute = (row) => {
 			return {
 				name: 'AssignmentSubmission',
 				params: {
-					assignmentName: row.assessment_name,
+					assignmentID: row.assessment_name,
 					submissionName: 'new',
 				},
 			}
@@ -180,23 +190,33 @@ const getAssessmentColumns = () => {
 		{
 			label: 'Assessment',
 			key: 'title',
-			width: '30rem',
+			width: '25rem',
 		},
 		{
 			label: 'Type',
 			key: 'assessment_type',
-			width: '10rem',
+			width: '15rem',
 		},
 	]
 	if (!user.data?.is_moderator) {
 		columns.push({
-			label: 'Status/Score',
+			label: 'Status/Percentage',
 			key: 'status',
-			align: 'center',
+			align: 'left',
 			width: '10rem',
 		})
 	}
 	return columns
 }
 const getStatusTheme = (status) => {
 	if (status === 'Pass') {
 		return 'green'
 	} else if (status === 'Not Graded') {
 		return 'orange'
 	} else {
 		return 'red'
 	}
 }
 </script>
--- a/frontend/src/components/Assignment.vue
+++ b/frontend/src/components/Assignment.vue
@@ -0,0 +1,468 @@
 <template>
 	<div
 		v-if="assignment.data"
 		class="grid grid-cols-[65%,35%] h-full"
 		:class="{ 'border rounded-lg': !showTitle }"
 	>
 		<div class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]">
 			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
 				<div v-if="submissionName === 'new'">
 					{{ __('Submission by') }} {{ user.data?.full_name }}
 				</div>
 				<div v-else>
 					{{ __('Submission by') }} {{ submissionResource.doc?.member_name }}
 				</div>
 			</div>
 			<div class="text-sm text-ink-gray-7 font-medium mb-2">
 				{{ __('Question') }}:
 			</div>
 			<div
 				v-html="assignment.data.question"
 				class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
 			></div>
 		</div>
 		<div class="flex flex-col">
 			<div class="p-5">
 				<div class="flex items-center justify-between mb-4">
 					<div class="font-semibold text-ink-gray-9">
 						{{ __('Submission') }}
 					</div>
 					<div class="flex items-center space-x-2">
 						<Badge v-if="isDirty" theme="orange">
 							{{ __('Not Saved') }}
 						</Badge>
 						<Badge
 							v-else-if="submissionResource.doc?.status"
 							:theme="statusTheme"
 							size="lg"
 						>
 							{{ submissionResource.doc?.status }}
 						</Badge>
 						<Button variant="solid" @click="submitAssignment()">
 							{{ __('Save') }}
 						</Button>
 					</div>
 				</div>
 				<div
 					v-if="
 						submissionName != 'new' &&
 						!['Pass', 'Fail'].includes(submissionResource.doc?.status) &&
 						submissionResource.doc?.owner == user.data?.name
 					"
 					class="bg-surface-blue-2 p-3 rounded-md leading-5 text-sm mb-4"
 				>
 					{{ __("You've successfully submitted the assignment.") }}
 					{{
 						__(
 							"Once the moderator grades your submission, you'll find the details here."
 						)
 					}}
 					{{ __('Feel free to make edits to your submission if needed.') }}
 				</div>
 				<div v-if="showUploader()">
 					<div class="text-xs text-ink-gray-5 mt-1 mb-2">
 						{{ __('Add your assignment as {0}').format(assignment.data.type) }}
 					</div>
 					<FileUploader
 						v-if="!submissionFile"
 						:fileTypes="getType()"
 						:validateFile="validateFile"
 						@success="(file) => saveSubmission(file)"
 					>
 						<template #default="{ uploading, progress, openFileSelector }">
 							<Button @click="openFileSelector" :loading="uploading">
 								{{
 									uploading
 										? __('Uploading {0}%').format(progress)
 										: __('Upload File')
 								}}
 							</Button>
 						</template>
 					</FileUploader>
 					<div v-else>
 						<div class="flex text-ink-gray-7">
 							<div class="border self-start rounded-md p-2 mr-2">
 								<FileText class="h-5 w-5 stroke-1.5" />
 							</div>
 							<a
 								:href="submissionFile.file_url"
 								target="_blank"
 								class="flex flex-col cursor-pointer !no-underline"
 							>
 								<span class="text-sm leading-5">
 									{{ submissionFile.file_name }}
 								</span>
 								<span class="text-sm text-ink-gray-5 mt-1">
 									{{ getFileSize(submissionFile.file_size) }}
 								</span>
 							</a>
 							<X
 								v-if="canModifyAssignment"
 								@click="removeSubmission()"
 								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 							/>
 						</div>
 					</div>
 				</div>
 				<div v-else-if="assignment.data.type == 'URL'">
 					<div class="text-xs text-ink-gray-5 mb-1">
 						{{ __('Enter a URL') }}
 					</div>
 					<FormControl
 						v-model="answer"
 						type="text"
 						:readonly="!canModifyAssignment"
 					/>
 				</div>
 				<div v-else>
 					<div class="text-sm mb-4">
 						{{ __('Write your answer here') }}
 					</div>
 					<TextEditor
 						:content="answer"
 						@change="(val) => (answer = 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]"
 					/>
 				</div>
 				<div
 					v-if="
 						user.data?.name == submissionResource.doc?.owner &&
 						submissionResource.doc?.comments
 					"
 					class="mt-8 p-3 bg-surface-blue-2 rounded-md"
 				>
 					<div class="text-sm text-ink-gray-5 font-medium mb-2">
 						{{ __('Comments by Evaluator') }}:
 					</div>
 					<div class="leading-5">
 						{{ submissionResource.doc.comments }}
 					</div>
 				</div>
 				<!-- Grading -->
 				<div v-if="canGradeSubmission" class="mt-8 space-y-4">
 					<div class="font-semibold mb-2 text-ink-gray-9">
 						{{ __('Grading') }}
 					</div>
 					<FormControl
 						v-if="submissionResource.doc"
 						v-model="submissionResource.doc.status"
 						:label="__('Grade')"
 						type="select"
 						:options="submissionStatusOptions"
 					/>
 					<div>
 						<div class="text-sm text-ink-gray-5 mb-1">
 							{{ __('Comments') }}
 						</div>
 						<TextEditor
 							:content="comments"
 							@change="
 								(val) => {
 									comments = val
 									isDirty = true
 								}
 							"
 							: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]"
 						/>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import {
 	Badge,
 	Button,
 	call,
 	createResource,
 	createDocumentResource,
 	FileUploader,
 	FormControl,
 	TextEditor,
 } from 'frappe-ui'
 import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
 import { showToast, getFileSize } from '@/utils'
 import { useRouter } from 'vue-router'
 const submissionFile = ref(null)
 const answer = ref(null)
 const comments = ref(null)
 const router = useRouter()
 const user = inject('$user')
 const showTitle = router.currentRoute.value.name == 'AssignmentSubmission'
 const isDirty = ref(false)
 const props = defineProps({
 	assignmentID: {
 		type: String,
 		required: true,
 	},
 	submissionName: {
 		type: String,
 		default: 'new',
 	},
 })
 onMounted(() => {
 	window.addEventListener('keydown', keyboardShortcut)
 })
 const keyboardShortcut = (e) => {
 	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
 		submitAssignment()
 		e.preventDefault()
 	}
 }
 onBeforeUnmount(() => {
 	window.removeEventListener('keydown', keyboardShortcut)
 })
 const assignment = createResource({
 	url: 'frappe.client.get',
 	params: {
 		doctype: 'LMS Assignment',
 		name: props.assignmentID,
 	},
 	auto: true,
 	onSuccess(data) {
 		if (props.submissionName != 'new') {
 			submissionResource.reload()
 		}
 	},
 })
 const newSubmission = createResource({
 	url: 'frappe.client.insert',
 	makeParams(values) {
 		let doc = {
 			doctype: 'LMS Assignment Submission',
 			assignment: props.assignmentID,
 			member: user.data?.name,
 		}
 		if (showUploader()) {
 			doc.assignment_attachment = submissionFile.value.file_url
 		} else {
 			doc.answer = answer.value
 		}
 		return {
 			doc: doc,
 		}
 	},
 })
 const imageResource = createResource({
 	url: 'lms.lms.api.get_file_info',
 	makeParams(values) {
 		return {
 			file_url: values.image,
 		}
 	},
 	auto: false,
 	onSuccess(data) {
 		submissionFile.value = data
 	},
 })
 const submissionResource = createDocumentResource({
 	doctype: 'LMS Assignment Submission',
 	name: props.submissionName,
 	onError(err) {
 		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 	},
 	auto: false,
 	cache: [user.data?.name, props.assignmentID],
 })
 watch(submissionResource, () => {
 	if (submissionResource.doc) {
 		if (submissionResource.doc.assignment_attachment) {
 			imageResource.reload({
 				image: submissionResource.doc.assignment_attachment,
 			})
 		}
 		if (submissionResource.doc.answer) {
 			answer.value = submissionResource.doc.answer
 		}
 		if (submissionResource.doc.comments) {
 			comments.value = submissionResource.doc.comments
 		}
 		if (submissionResource.isDirty) {
 			isDirty.value = true
 		} else if (showUploader() && !submissionFile.value) {
 			isDirty.value = true
 		} else if (!showUploader() && !answer.value) {
 			isDirty.value = true
 		} else {
 			isDirty.value = false
 		}
 	}
 })
 watch(submissionFile, () => {
 	if (props.submissionName == 'new' && submissionFile.value) {
 		isDirty.value = true
 	}
 })
 const submitAssignment = () => {
 	if (props.submissionName != 'new') {
 		let evaluator =
 			submissionResource.doc && submissionResource.doc.owner != user.data?.name
 				? user.data?.name
 				: null
 		submissionResource.setValue.submit(
 			{
 				...submissionResource.doc,
 				assignment_attachment: submissionFile.value?.file_url,
 				evaluator: evaluator,
 				comments: comments.value,
 				answer: answer.value,
 			},
 			{
 				onSuccess(data) {
 					showToast(__('Success'), __('Changes saved successfully'), 'check')
 				},
 			}
 		)
 	} else {
 		addNewSubmission()
 	}
 }
 const addNewSubmission = () => {
 	newSubmission.submit(
 		{},
 		{
 			onSuccess(data) {
 				showToast('Success', 'Assignment submitted successfully.', 'check')
 				if (router.currentRoute.value.name == 'AssignmentSubmission') {
 					router.push({
 						name: 'AssignmentSubmission',
 						params: {
 							assignmentID: props.assignmentID,
 							submissionName: data.name,
 						},
 					})
 				} else {
 					markLessonProgress()
 					router.go()
 				}
 				submissionResource.name = data.name
 				submissionResource.reload()
 			},
 			onError(err) {
 				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
 }
 const saveSubmission = (file) => {
 	isDirty.value = true
 	submissionFile.value = file
 }
 const markLessonProgress = () => {
 	if (router.currentRoute.value.name == 'Lesson') {
 		let courseName = router.currentRoute.value.params.courseName
 		let chapterNumber = router.currentRoute.value.params.chapterNumber
 		let lessonNumber = router.currentRoute.value.params.lessonNumber
 		call('lms.lms.api.mark_lesson_progress', {
 			course: courseName,
 			chapter_number: chapterNumber,
 			lesson_number: lessonNumber,
 		})
 	}
 }
 const getType = () => {
 	const type = assignment.data?.type
 	if (type == 'Image') {
 		return ['image/*']
 	} else if (type == 'Document') {
 		return [
 			'.doc',
 			'.docx',
 			'.xml',
 			'application/msword',
 			'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
 		]
 	} else if (type == 'PDF') {
 		return ['.pdf']
 	}
 }
 const validateFile = (file) => {
 	let type = assignment.data?.type
 	let extension = file.name.split('.').pop().toLowerCase()
 	if (type == 'Image' && !['jpg', 'jpeg', 'png'].includes(extension)) {
 		return 'Only image file is allowed.'
 	} else if (
 		type == 'Document' &&
 		!['doc', 'docx', 'xml'].includes(extension)
 	) {
 		return 'Only document file is allowed.'
 	} else if (type == 'PDF' && !['pdf'].includes(extension)) {
 		return 'Only PDF file is allowed.'
 	}
 }
 const removeSubmission = () => {
 	isDirty.value = true
 	submissionFile.value = null
 }
 const canGradeSubmission = computed(() => {
 	return (
 		(user.data?.is_moderator ||
 			user.data?.is_evaluator ||
 			user.data?.is_instructor) &&
 		props.submissionName != 'new' &&
 		router.currentRoute.value.name == 'AssignmentSubmission'
 	)
 })
 const canModifyAssignment = computed(() => {
 	return (
 		!submissionResource.doc ||
 		(submissionResource.doc?.owner == user.data?.name &&
 			submissionResource.doc?.status == 'Not Graded')
 	)
 })
 const submissionStatusOptions = computed(() => {
 	return [
 		{ label: 'Not Graded', value: 'Not Graded' },
 		{ label: 'Pass', value: 'Pass' },
 		{ label: 'Fail', value: 'Fail' },
 	]
 })
 const statusTheme = computed(() => {
 	if (!submissionResource.doc) {
 		return 'orange'
 	} else if (submissionResource.doc.status == 'Pass') {
 		return 'green'
 	} else if (submissionResource.doc.status == 'Not Graded') {
 		return 'blue'
 	} else {
 		return 'red'
 	}
 })
 const showUploader = () => {
 	return ['PDF', 'Image', 'Document'].includes(assignment.data?.type)
 }
 </script>
--- a/frontend/src/components/AssignmentBlock.vue
+++ b/frontend/src/components/AssignmentBlock.vue
@@ -0,0 +1,46 @@
 <template>
 	<Assignment
 		v-if="user.data && submission.data"
 		:assignmentID="assignmentID"
 		:submissionName="submission.data?.name || 'new'"
 	/>
 	<div v-else class="border rounded-md text-center py-20">
 		<div>
 			{{ __('Please login to access the assignment.') }}
 		</div>
 		<Button @click="redirectToLogin()" class="mt-2">
 			<span>
 				{{ __('Login') }}
 			</span>
 		</Button>
 	</div>
 </template>
 <script setup>
 import { inject, watch } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import Assignment from '@/components/Assignment.vue'
 const user = inject('$user')
 const props = defineProps({
 	assignmentID: {
 		type: String,
 		required: true,
 	},
 })
 const submission = createResource({
 	url: 'frappe.client.get_value',
 	makeParams(values) {
 		return {
 			doctype: 'LMS Assignment Submission',
 			fieldname: 'name',
 			filters: {
 				assignment: props.assignmentID,
 				member: user.data?.name,
 			},
 		}
 	},
 	auto: true,
 })
 </script>
--- a/frontend/src/components/AudioBlock.vue
+++ b/frontend/src/components/AudioBlock.vue
@@ -9,8 +9,8 @@
 		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
-					<Play v-if="!isPlaying" class="w-4 h-4 text-gray-900" />
+					<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />
-					<Pause v-else class="w-4 h-4 text-gray-900" />
+					<Pause v-else class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 			<input
@@ -22,13 +22,13 @@
 				@input="changeCurrentTime"
 				class="duration-slider w-full h-1"
 			/>
-			<span class="text-xs text-gray-900 font-medium">
+			<span class="text-xs text-ink-gray-9 font-medium">
 				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
 			</span>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!isMuted" class="w-4 h-4 text-gray-900" />
+					<Volume2 v-if="!isMuted" class="w-4 h-4 text-ink-gray-9" />
-					<VolumeX v-else class="w-4 h-4 text-gray-900" />
+					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 		</div>
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -1,50 +1,52 @@
 <template>
 	<div
-		class="flex flex-col shadow hover:bg-gray-100 rounded-md p-4 h-full"
+		class="flex flex-col border-2 hover:bg-surface-gray-2 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
-		<div class="text-lg leading-5 font-semibold mb-2">
+		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<Badge
+		<div
 			v-if="batch.seat_count && batch.seats_left > 0"
-			theme="green"
+			class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
 			class="self-start mb-2"
 		>
 			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
+			<span v-if="batch.seats_left > 1">
-			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
+				{{ __('Seats Left') }}
-		</Badge>
+			</span>
-		<Badge
+			<span v-else-if="batch.seats_left == 1">
 				{{ __('Seat Left') }}
 			</span>
 		</div>
 		<div
 			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			theme="red"
+			class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
 			class="self-start mb-2"
 		>
 			{{ __('Sold Out') }}
-		</Badge>
+		</div>
-		<div class="short-introduction text-sm text-gray-700">
+		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>
-		<div v-if="batch.amount" class="font-semibold mb-4">
+		<div v-if="batch.amount" class="font-semibold text-ink-gray-9 mb-4">
 			{{ batch.price }}
 		</div>
 		<div class="flex flex-col space-y-2 mt-auto">
 			<DateRange
 				:startDate="batch.start_date"
 				:endDate="batch.end_date"
-				class="text-sm text-gray-700"
+				class="text-sm text-ink-gray-7"
 			/>
-			<div class="flex items-center text-sm text-gray-700">
+			<div class="flex items-center text-sm text-ink-gray-7">
-				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<Clock class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-7" />
 				<span>
 					{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
 				</span>
 			</div>
 			<div
 				v-if="batch.timezone"
-				class="flex items-center text-sm text-gray-700"
+				class="flex items-center text-sm text-ink-gray-7"
 			>
-				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-600" />
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-ink-gray-5" />
 				<span>
 					{{ batch.timezone }}
 				</span>
--- a/frontend/src/components/BatchCourses.vue
+++ b/frontend/src/components/BatchCourses.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg font-semibold">
+			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Courses') }}
 			</div>
 			<Button v-if="canSeeAddButton()" @click="openCourseModal()">
@@ -18,6 +18,7 @@
 				row-key="batch_course"
 				:options="{
 					showTooltip: false,
 					selectable: user.data?.is_student ? false : true,
 					getRowRoute: (row) => ({
 						name: 'CourseDetail',
 						params: { courseName: row.name },
@@ -25,7 +26,7 @@
 				}"
 			>
 				<ListHeader
-					class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem :item="item" v-for="item in getCoursesColumns()">
 						<template #prefix="{ item }">
--- a/frontend/src/components/BatchDashboard.vue
+++ b/frontend/src/components/BatchDashboard.vue
@@ -1,17 +1,18 @@
 <template>
-	<div>
+	<div class="space-y-10">
 		<UpcomingEvaluations
 			:batch="batch.data.name"
 			:endDate="batch.data.evaluation_end_date"
 			:courses="batch.data.courses"
 			:isStudent="isStudent"
 		/>
 		<Assessments :batch="batch.data.name" />
 		<StudentHeatmap />
 	</div>
 </template>
 <script setup>
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'
 import Assessments from '@/components/Assessments.vue'
 import StudentHeatmap from '@/components/StudentHeatmap.vue'
 const props = defineProps({
 	batch: {
--- a/frontend/src/components/BatchFeedback.vue
+++ b/frontend/src/components/BatchFeedback.vue
@@ -0,0 +1,245 @@
 <template>
 	<div v-if="user.data?.is_student">
 		<div
 			v-if="feedbackList.data?.length"
 			class="bg-surface-blue-2 text-blue-700 p-2 rounded-md mb-5"
 		>
 			{{ __('Thank you for providing your feedback!') }}
 		</div>
 		<div v-else class="flex justify-between items-center mb-5">
 			<div class="text-lg font-semibold">
 				{{ __('Help Us Improve') }}
 			</div>
 			<Button @click="submitFeedback()">
 				{{ __('Submit') }}
 			</Button>
 		</div>
 		<div class="space-y-8">
 			<div class="flex items-center justify-between">
 				<Rating
 					v-for="key in ratingKeys"
 					v-model="feedback[key]"
 					:label="__(convertToTitleCase(key))"
 					:readonly="readOnly"
 				/>
 			</div>
 			<FormControl
 				v-model="feedback.feedback"
 				type="textarea"
 				:label="__('Feedback')"
 				:rows="7"
 				:readonly="readOnly"
 			/>
 		</div>
 	</div>
 	<div v-else-if="feedbackList.data?.length">
 		<div class="text-lg font-semibold mb-5">
 			{{ __('Average of Feedback Received') }}
 		</div>
 		<div class="flex items-center justify-between mb-10">
 			<Rating
 				v-for="key in ratingKeys"
 				v-model="average[key]"
 				:label="__(convertToTitleCase(key))"
 				:readonly="true"
 			/>
 		</div>
 		<div class="text-lg font-semibold mb-5">
 			{{ __('All Feedback') }}
 		</div>
 		<ListView
 			:columns="feedbackColumns"
 			:rows="feedbackList.data"
 			row-key="name"
 			:options="{
 				showTooltip: false,
 				rowHeight: 'h-16',
 				selectable: false,
 			}"
 		>
 			<ListHeader
 				class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 			></ListHeader>
 			<ListRows>
 				<ListRow
 					:row="row"
 					v-for="row in feedbackList.data"
 					class="group cursor-pointer feedback-list"
 				>
 					<template #default="{ column, item }">
 						<ListRowItem
 							:item="row[column.key]"
 							:align="column.align"
 							class="text-sm"
 						>
 							<template #prefix>
 								<div v-if="column.key == 'member_name'">
 									<Avatar
 										class="flex"
 										:image="row['member_image']"
 										:label="item"
 										size="sm"
 									/>
 								</div>
 							</template>
 							<div v-if="ratingKeys.includes(column.key)">
 								<Rating v-model="row[column.key]" :readonly="true" />
 							</div>
 							<div v-else class="leading-5">
 								{{ row[column.key] }}
 							</div>
 						</ListRowItem>
 					</template>
 				</ListRow>
 			</ListRows>
 		</ListView>
 	</div>
 	<div v-else class="text-sm italic text-center text-ink-gray-7 mt-5">
 		{{ __('No feedback received yet.') }}
 	</div>
 </template>
 <script setup>
 import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
 import {
 	Avatar,
 	Button,
 	createListResource,
 	FormControl,
 	ListView,
 	ListHeader,
 	ListHeaderItem,
 	ListRows,
 	ListRow,
 	ListRowItem,
 	Rating,
 } from 'frappe-ui'
 const user = inject('$user')
 const ratingKeys = ['content', 'instructors', 'value']
 const readOnly = ref(false)
 const average = reactive({})
 const feedback = reactive({})
 const props = defineProps({
 	batch: {
 		type: String,
 		required: true,
 	},
 })
 onMounted(() => {
 	let filters = {
 		batch: props.batch,
 	}
 	if (user.data?.is_student) {
 		filters['member'] = user.data?.name
 	}
 	feedbackList.update({
 		filters: filters,
 	})
 	feedbackList.reload()
 })
 const feedbackList = createListResource({
 	doctype: 'LMS Batch Feedback',
 	filters: {
 		batch: props.batch,
 	},
 	fields: [
 		'content',
 		'instructors',
 		'value',
 		'feedback',
 		'name',
 		'member',
 		'member_name',
 		'member_image',
 	],
 	cache: ['feedbackList', props.batch, user.data?.name],
 })
 watch(
 	() => feedbackList.data,
 	() => {
 		if (feedbackList.data.length) {
 			let data = feedbackList.data
 			readOnly.value = true
 			ratingKeys.forEach((key) => {
 				average[key] = 0
 			})
 			data.forEach((row) => {
 				Object.keys(row).forEach((key) => {
 					if (ratingKeys.includes(key)) row[key] = row[key] * 5
 					feedback[key] = row[key]
 				})
 				ratingKeys.forEach((key) => {
 					average[key] += row[key]
 				})
 			})
 			Object.keys(average).forEach((key) => {
 				average[key] = average[key] / data.length
 			})
 		}
 	}
 )
 const submitFeedback = () => {
 	ratingKeys.forEach((key) => {
 		feedback[key] = feedback[key] / 5
 	})
 	feedbackList.insert.submit(
 		{
 			member: user.data?.name,
 			batch: props.batch,
 			...feedback,
 		},
 		{
 			onSuccess: () => {
 				feedbackList.reload()
 			},
 		}
 	)
 }
 const feedbackColumns = computed(() => {
 	return [
 		{
 			label: 'Member',
 			key: 'member_name',
 			width: '10rem',
 		},
 		{
 			label: 'Feedback',
 			key: 'feedback',
 			width: '15rem',
 		},
 		{
 			label: 'Content',
 			key: 'content',
 			width: '9rem',
 		},
 		{
 			label: 'Instructors',
 			key: 'instructors',
 			width: '9rem',
 		},
 		{
 			label: 'Value',
 			key: 'value',
 			width: '9rem',
 		},
 	]
 })
 </script>
 <style>
 .feedback-list > button > div {
 	align-items: start;
 	padding: 0.15rem 0;
 }
 </style>
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -1,25 +1,31 @@
 <template>
-	<div v-if="batch.data" class="shadow rounded-md p-5 lg:w-72">
+	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
-		<Badge
+		<div
 			v-if="batch.data.seat_count && seats_left > 0"
-			theme="green"
+			class="text-xs bg-green-100 text-green-700 float-right px-2 py-0.5 rounded-md"
 			class="self-start mb-2 float-right"
 		>
-			{{ seats_left }} <span v-if="seats_left > 1">{{ __('Seats Left') }}</span
+			{{ seats_left }}
-			><span v-else-if="seats_left == 1">{{ __('Seat Left') }}</span>
+			<span v-if="seats_left > 1">
-		</Badge>
+				{{ __('Seats Left') }}
-		<Badge
+			</span>
 			<span v-else-if="seats_left == 1">
 				{{ __('Seat Left') }}
 			</span>
 		</div>
 		<div
 			v-else-if="batch.data.seat_count && seats_left <= 0"
-			theme="red"
+			class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
 			class="self-start mb-2 float-right"
 		>
 			{{ __('Sold Out') }}
-		</Badge>
+		</div>
-		<div v-if="batch.data.amount" class="text-lg font-semibold mb-3">
+		<div
 			v-if="batch.data.amount"
 			class="text-lg font-semibold mb-3 text-ink-gray-9"
 		>
 			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
 		</div>
-		<div class="flex items-center mb-3">
+		<div class="flex items-center mb-3 text-ink-gray-7">
-			<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<BookOpen class="h-4 w-4 stroke-1.5 mr-2" />
 			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 		</div>
 		<DateRange
@@ -27,15 +33,15 @@
 			:endDate="batch.data.end_date"
 			class="mb-3"
 		/>
-		<div class="flex items-center mb-3">
+		<div class="flex items-center mb-3 text-ink-gray-7">
-			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<Clock class="h-4 w-4 stroke-1.5 mr-2" />
 			<span>
 				{{ formatTime(batch.data.start_time) }} -
 				{{ formatTime(batch.data.end_time) }}
 			</span>
 		</div>
-		<div v-if="batch.data.timezone" class="flex items-center">
+		<div v-if="batch.data.timezone" class="flex items-center text-ink-gray-7">
-			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<Globe class="h-4 w-4 stroke-1.5 mr-2" />
 			<span>
 				{{ batch.data.timezone }}
 			</span>
@@ -63,7 +69,11 @@
 					name: batch.data.name,
 				},
 			}"
-			v-else-if="batch.data.paid_batch && batch.data.seats_left"
+			v-else-if="
 				batch.data.paid_batch &&
 				batch.data.seats_left > 0 &&
 				batch.data.accept_enrollments
 			"
 		>
 			<Button v-if="!isStudent" class="w-full mt-4" variant="solid">
 				<span>
@@ -74,7 +84,11 @@
 		<Button
 			variant="solid"
 			class="w-full mt-2"
-			v-else-if="batch.data.allow_self_enrollment && batch.data.seats_left"
+			v-else-if="
 				batch.data.allow_self_enrollment &&
 				batch.data.seats_left &&
 				batch.data.accept_enrollments
 			"
 			@click="enrollInBatch()"
 		>
 			{{ __('Enroll Now') }}
@@ -106,6 +120,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const props = defineProps({
 	batch: {
--- a/frontend/src/components/BatchStudents.vue
+++ b/frontend/src/components/BatchStudents.vue
@@ -1,6 +1,113 @@
 <template>
 	<div class="">
 		<div class="w-full flex items-center justify-between pb-4">
 			<div class="font-medium text-ink-gray-7">
 				{{ __('Statistics') }}
 			</div>
 		</div>
 		<div class="grid grid-cols-4 gap-5 mb-8">
 			<div
 				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
 			>
 				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
 					<User class="w-5 h-5 stroke-1.5" />
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
 						{{ students.data?.length }}
 					</span>
 					<span class="">
 						{{ __('Students') }}
 					</span>
 				</div>
 			</div>
 			<div
 				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
 			>
 				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
 					<GraduationCap class="w-5 h-5 stroke-1.5" />
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
 						{{ certificationCount.data }}
 					</span>
 					<span class="">
 						{{ __('Certified') }}
 					</span>
 				</div>
 			</div>
 			<div
 				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
 			>
 				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
 					<BookOpen class="w-5 h-5 stroke-1.5" />
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
 						{{ batch.courses?.length }}
 					</span>
 					<span>
 						{{ __('Courses') }}
 					</span>
 				</div>
 			</div>
 			<div
 				class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
 			>
 				<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
 					<ShieldCheck class="w-5 h-5 stroke-1.5" />
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
 						{{ assessmentCount }}
 					</span>
 					<span>
 						{{ __('Assessments') }}
 					</span>
 				</div>
 			</div>
 		</div>
 		<div v-if="showProgressChart" class="mb-8">
 			<div class="text-ink-gray-7 font-medium">
 				{{ __('Progress') }}
 			</div>
 			<ApexChart
 				:options="chartOptions"
 				:series="chartData"
 				type="bar"
 				:height="chartData[0].data.length * 30 + 100"
 			/>
 			<div
 				class="flex items-center justify-center text-sm text-ink-gray-7 space-x-4"
 			>
 				<div class="flex items-center space-x-2">
 					<div
 						class="w-3 h-3 rounded-sm"
 						:style="{ 'background-color': theme.colors.green[600] }"
 					></div>
 					<div>
 						{{ __('Courses') }}
 					</div>
 				</div>
 				<div class="flex items-center space-x-2">
 					<div
 						class="w-3 h-3 rounded-sm"
 						:style="{ 'background-color': theme.colors.blue[600] }"
 					></div>
 					<div>
 						{{ __('Assessments') }}
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-		<div class="text-lg font-semibold">
+			<div class="text-ink-gray-7 font-medium">
 				{{ __('Students') }}
 			</div>
 			<Button @click="openStudentModal()">
@@ -10,15 +117,18 @@
 				{{ __('Add') }}
 			</Button>
 		</div>
 		<div v-if="students.data?.length">
 			<ListView
 				:columns="getStudentColumns()"
 				:rows="students.data"
 				row-key="name"
-			:options="{ showTooltip: false }"
+				:options="{
 					showTooltip: false,
 				}"
 			>
 				<ListHeader
-				class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
 					<ListHeaderItem
 						:item="item"
@@ -35,9 +145,18 @@
 					</ListHeaderItem>
 				</ListHeader>
 				<ListRows>
-				<ListRow :row="row" v-for="row in students.data">
+					<ListRow
 						:row="row"
 						v-for="row in students.data"
 						class="group cursor-pointer"
 						@click="openStudentProgressModal(row)"
 					>
 						<template #default="{ column, item }">
-						<ListRowItem :item="row[column.key]" :align="column.align">
+							<ListRowItem
 								:item="row[column.key]"
 								:align="column.align"
 								class="text-sm"
 							>
 								<template #prefix>
 									<div v-if="column.key == 'full_name'">
 										<Avatar
@@ -48,21 +167,15 @@
 										/>
 									</div>
 								</template>
-							<div v-if="column.key == 'courses'">
+								<div
-								{{ row[column.key] }}
+									v-if="column.key == 'progress'"
-							</div>
+									class="flex items-center space-x-4 w-full"
 							<div v-else-if="column.icon == 'book-open'">
 								{{ Math.ceil(row.courses[column.key]) }}
 							</div>
 							<div v-else-if="column.icon == 'help-circle'">
 								<Badge
 									v-if="isAssignment(row.assessments[column.key])"
 									:theme="getStatusTheme(row.assessments[column.key])"
 									class="text-xs"
 								>
-									{{ row.assessments[column.key] }}
+									<ProgressBar :progress="row[column.key]" size="sm" />
-								</Badge>
+									<div class="text-xs">{{ row[column.key] }}%</div>
-								<div v-else>{{ parseInt(row.assessments[column.key]) }}</div>
+								</div>
 								<div v-else>
 									{{ row[column.key] }}
 								</div>
 							</ListRowItem>
 						</template>
@@ -82,19 +195,24 @@
 				</ListSelectBanner>
 			</ListView>
 		</div>
-	<div v-else class="text-sm italic text-gray-600">
+		<div v-else class="text-sm italic text-ink-gray-5">
 			{{ __('There are no students in this batch.') }}
 		</div>
 	</div>
 	<StudentModal
-		:batch="props.batch"
+		:batch="props.batch.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
 	/>
 	<BatchStudentProgress
 		:student="selectedStudent"
 		v-model="showStudentProgressModal"
 	/>
 </template>
 <script setup>
 import {
 	Avatar,
 	Badge,
 	Button,
 	createResource,
 	FeatherIcon,
@@ -106,27 +224,48 @@ import {
 	ListView,
 	ListRowItem,
 } from 'frappe-ui'
-import { Trash2, Plus } from 'lucide-vue-next'
+import {
-import { ref } from 'vue'
+	BookOpen,
 	GraduationCap,
 	Plus,
 	ShieldCheck,
 	Trash2,
 	User,
 } from 'lucide-vue-next'
 import { ref, watch } from 'vue'
 import StudentModal from '@/components/Modals/StudentModal.vue'
 import { showToast } from '@/utils'
 import ProgressBar from '@/components/ProgressBar.vue'
 import BatchStudentProgress from '@/components/Modals/BatchStudentProgress.vue'
 import ApexChart from 'vue3-apexcharts'
 import { theme } from '@/utils/theme'
 const showStudentModal = ref(false)
 const showStudentProgressModal = ref(false)
 const selectedStudent = ref(null)
 const chartData = ref(null)
 const chartOptions = ref(null)
 const showProgressChart = ref(false)
 const assessmentCount = ref(0)
 const props = defineProps({
 	batch: {
-		type: String,
+		type: Object,
 		default: null,
 	},
 })
 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
-	cache: ['students', props.batch],
+	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch,
+		batch: props.batch?.name,
 	},
 	auto: true,
 	onSuccess(data) {
 		chartData.value = getChartData()
 		showProgressChart.value = data.length && true
 	},
 })
 const getStudentColumns = () => {
@@ -134,36 +273,24 @@ const getStudentColumns = () => {
 		{
 			label: 'Full Name',
 			key: 'full_name',
 			width: '20rem',
 			icon: 'user',
 		},
 		{
 			label: 'Progress',
 			key: 'progress',
 			width: '15rem',
 			icon: 'activity',
 		},
 		{
 			label: 'Last Active',
 			key: 'last_active',
 			width: '10rem',
 			align: 'center',
 			icon: 'clock',
 		},
 	]
 	if (students.data?.[0].assessments) {
 		Object.keys(students.data?.[0].assessments).forEach((assessment) => {
 			columns.push({
 				label: assessment,
 				key: assessment,
 				width: '10rem',
 				icon: 'help-circle',
 				align: isAssignment(students.data?.[0].assessments[assessment])
 					? 'left'
 					: 'center',
 			})
 		})
 	}
 	if (students.data?.[0].courses) {
 		Object.keys(students.data?.[0].courses).forEach((course) => {
 			columns.push({
 				label: course,
 				key: course,
 				width: '10rem',
 				icon: 'book-open',
 				align: 'center',
 			})
 		})
 	}
 	return columns
 }
@@ -171,11 +298,16 @@ const openStudentModal = () => {
 	showStudentModal.value = true
 }
 const openStudentProgressModal = (row) => {
 	showStudentProgressModal.value = true
 	selectedStudent.value = row
 }
 const deleteStudents = createResource({
 	url: 'lms.lms.api.delete_documents',
 	makeParams(values) {
 		return {
-			doctype: 'Batch Student',
+			doctype: 'LMS Batch Enrollment',
 			documents: values.students,
 		}
 	},
@@ -196,17 +328,118 @@ const removeStudents = (selections, unselectAll) => {
 	)
 }
-const getStatusTheme = (status) => {
+const getChartData = () => {
-	if (status === 'Pass') {
+	let categories = {}
-		return 'green'
+
-	} else if (status == 'Not Graded') {
+	if (!students.data?.length) return []
-		return 'orange'
+
-	} else {
+	Object.keys(students.data[0].courses).forEach((course) => {
-		return 'red'
+		categories[course] = {
 			value: 0,
 			type: 'course',
 			label: course,
 		}
 	})
 	Object.keys(students.data?.[0].assessments).forEach((assessment) => {
 		categories[assessment] = {
 			value: 0,
 			type: 'assessment',
 			label: assessment,
 		}
 	})
 	students.data.forEach((student) => {
 		Object.keys(student.courses).forEach((course) => {
 			if (student.courses[course] === 100) {
 				categories[course].value += 1
 			}
 		})
 		Object.keys(student.assessments).forEach((assessment) => {
 			if (student.assessments[assessment].result === 'Pass') {
 				categories[assessment].value += 1
 			}
 		})
 	})
 	chartOptions.value = getChartOptions(categories)
 	return [
 		{
 			name: __('Completed by Students'),
 			data: Object.values(categories).map((item) => item.value),
 		},
 	]
 }
 const getChartOptions = (categories) => {
 	const courseColor = theme.colors.green[700]
 	const assessmentColor = theme.colors.blue[700]
 	const maxY =
 		students.data?.length % 5
 			? students.data?.length + (5 - (students.data?.length % 5))
 			: students.data?.length
 	return {
 		chart: {
 			type: 'bar',
 			toolbar: {
 				show: false,
 			},
 		},
 		plotOptions: {
 			bar: {
 				distributed: true,
 				borderRadius: 3,
 				borderRadiusApplication: 'end',
 				horizontal: true,
 				barHeight: '40%',
 			},
 		},
 		colors: Object.values(categories).map((item) =>
 			item.type === 'course' ? courseColor : assessmentColor
 		),
 		xaxis: {
 			categories: Object.values(categories).map((item) => item.label),
 			labels: {
 				style: {
 					fontSize: '10px',
 				},
 				rotate: 0,
 				formatter: function (value) {
 					return value.length > 30 ? `${value.substring(0, 30)}...` : value
 				},
 			},
 		},
 		yaxis: {
 			max: maxY,
 			min: 0,
 			stepSize: 10,
 			tickAmount: maxY / 5,
 			/* reversed: true */
 		},
 	}
 }
-const isAssignment = (value) => {
+watch(students, () => {
-	return isNaN(value)
+	if (students.data?.length) {
 		assessmentCount.value = Object.keys(students.data?.[0].assessments).length
 	}
 })
 const certificationCount = createResource({
 	url: 'frappe.client.get_count',
 	params: {
 		doctype: 'LMS Certificate',
 		filters: {
 			batch_name: props.batch.name,
 		},
 	},
 	auto: true,
 })
 </script>
 <style>
 .apexcharts-legend {
 	display: none !important;
 }
 </style>
--- a/frontend/src/components/BrandSettings.vue
+++ b/frontend/src/components/BrandSettings.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col justify-between min-h-0">
 		<div>
 			<div class="flex items-center justify-between">
-				<div class="font-semibold mb-1">
+				<div class="font-semibold mb-1 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
 				<Badge
@@ -12,7 +12,7 @@
 					theme="orange"
 				/>
 			</div>
-			<div class="text-xs text-gray-600">
+			<div class="text-xs text-ink-gray-5">
 				{{ __(description) }}
 			</div>
 		</div>
--- a/frontend/src/components/Categories.vue
+++ b/frontend/src/components/Categories.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col min-h-0">
 		<div class="flex items-center justify-between">
-			<div class="text-xl font-semibold mb-1">
+			<div class="text-xl font-semibold mb-5 text-ink-gray-9">
 				{{ label }}
 			</div>
 			<Button @click="() => showCategoryForm()">
@@ -28,12 +28,12 @@
 		</div>
 		<div class="overflow-y-scroll">
-			<div class="text-base divide-y">
+			<div class="text-base divide-y space-y-2">
 				<FormControl
 					:value="cat.category"
 					type="text"
 					v-for="cat in categories.data"
-					class="form-control"
+					class=""
 					@change.stop="(e) => update(cat.name, e.target.value)"
 				/>
 			</div>
@@ -128,24 +128,3 @@ const update = (name, value) => {
 	)
 }
 </script>
 <style>
 .form-control input {
 	padding: 1.25rem 0;
 	border-color: transparent;
 	background: white;
 }
 .form-control input:focus {
 	outline: transparent;
 	background: white;
 	box-shadow: none;
 	border-color: transparent;
 }
 .form-control input:hover {
 	outline: transparent;
 	background: white;
 	box-shadow: none;
 	border-color: transparent;
 }
 </style>
--- a/frontend/src/components/CertificationLinks.vue
+++ b/frontend/src/components/CertificationLinks.vue
@@ -0,0 +1,67 @@
 <template>
 	<div
 		v-if="
 			certification.data &&
 			certification.data.membership &&
 			certification.data.paid_certificate &&
 			user.data?.is_student
 		"
 	>
 		<router-link
 			v-if="!certification.data.membership.purchased_certificate"
 			:to="{
 				name: 'Billing',
 				params: {
 					type: 'certificate',
 					name: courseName,
 				},
 			}"
 		>
 			<Button class="w-full">
 				<template #prefix>
 					<GraduationCap class="size-4 stroke-1.5" />
 				</template>
 				{{ __('Get Certified') }}
 			</Button>
 		</router-link>
 		<router-link
 			v-else-if="!certification.data.membership.certficate"
 			:to="{
 				name: 'CourseCertification',
 				params: {
 					courseName: courseName,
 				},
 			}"
 		>
 			<Button class="w-full">
 				<template #prefix>
 					<GraduationCap class="size-4 stroke-1.5" />
 				</template>
 				{{ __('Get Certified') }}
 			</Button>
 		</router-link>
 	</div>
 </template>
 <script setup>
 import { Button, createResource } from 'frappe-ui'
 import { inject } from 'vue'
 import { GraduationCap } from 'lucide-vue-next'
 const user = inject('$user')
 const props = defineProps({
 	courseName: {
 		type: String,
 		required: true,
 	},
 })
 const certification = createResource({
 	url: 'lms.lms.api.get_certification_details',
 	params: {
 		course: props.courseName,
 	},
 	auto: true,
 	cache: ['certificationData', user.data?.name],
 })
 </script>
--- a/frontend/src/components/Common/DateRange.vue
+++ b/frontend/src/components/Common/DateRange.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="flex items-center">
+	<div class="flex items-center text-ink-gray-7">
-		<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+		<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
 		<span>
 			{{ getFormattedDateRange(props.startDate, props.endDate) }}
 		</span>
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -17,7 +17,7 @@
 								>
 									{{ displayValue(selectedValue) }}
 								</span>
-								<span class="text-base leading-5 text-gray-500" v-else>
+								<span class="text-base leading-5 text-ink-gray-4" v-else>
 									{{ placeholder || '' }}
 								</span>
 							</div>
@@ -28,7 +28,9 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+					<div
 						class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
 					>
 						<div class="relative px-1.5 pt-0.5">
 							<ComboboxInput
 								ref="search"
@@ -62,7 +64,7 @@
 							>
 								<div
 									v-if="group.group && !group.hideLabel"
-									class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+									class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
 								>
 									{{ group.group }}
 								</div>
@@ -76,7 +78,7 @@
 									<li
 										:class="[
 											'flex items-center rounded px-2.5 py-2 text-base',
-											{ 'bg-gray-100': active },
+											{ 'bg-surface-gray-2': active },
 										]"
 									>
 										<slot
@@ -93,7 +95,7 @@
 												</div>
 												<div
 													v-if="option.description"
-													class="text-xs text-gray-700"
+													class="text-xs text-ink-gray-7"
 													v-html="option.description"
 												></div>
 											</div>
@@ -103,7 +105,7 @@
 							</div>
 							<li
 								v-if="groups.length == 0"
-								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
+								class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
 							>
 								No results found
 							</li>
@@ -243,7 +245,7 @@ watch(showOptions, (val) => {
 })
 const textColor = computed(() => {
-	return props.disabled ? 'text-gray-600' : 'text-gray-800'
+	return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
 })
 const inputClasses = computed(() => {
@@ -264,12 +266,14 @@ const inputClasses = computed(() => {
 	let variant = props.disabled ? 'disabled' : props.variant
 	let variantClasses = {
 		subtle:
-			'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+			'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',
 		outline:
-			'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
+			'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: [
-			'border bg-gray-50 placeholder-gray-400',
+			'border bg-surface-menu-bar placeholder-ink-gray-3',
-			props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
+			props.variant === 'outline'
 				? 'border-outline-gray-2'
 				: 'border-transparent',
 		],
 	}[variant]
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -5,7 +5,7 @@
 			height: height,
 		}"
 	>
-		<span class="text-xs" v-if="label">
+		<span class="text-xs text-ink-gray-7" v-if="label">
 			{{ label }}
 		</span>
 		<div
@@ -13,7 +13,7 @@
 			class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900"
 		/>
 		<span
-			class="mt-1 text-xs text-gray-600"
+			class="mt-1 text-xs text-ink-gray-5"
 			v-show="description"
 			v-html="description"
 		></span>
@@ -27,7 +27,6 @@
 	</div>
 </template>
 <script setup lang="ts">
 import { useDark } from '@vueuse/core'
 import ace from 'ace-builds'
 import 'ace-builds/src-min-noconflict/ext-searchbox'
 import 'ace-builds/src-min-noconflict/theme-chrome'
@@ -35,9 +34,7 @@ import 'ace-builds/src-min-noconflict/theme-twilight'
 import { PropType, onMounted, ref, watch } from 'vue'
 import { Button } from 'frappe-ui'
-const isDark = useDark({
+const isDark = ref(false)
 	attribute: 'data-theme',
 })
 const props = defineProps({
 	modelValue: {
@@ -82,6 +79,7 @@ const editor = ref<HTMLElement | null>(null)
 let aceEditor = null as ace.Ace.Editor | null
 onMounted(() => {
 	isDark.value = localStorage.getItem('theme') === 'dark'
 	setupEditor()
 })
@@ -148,6 +146,7 @@ function resetEditor(value: string, resetHistory = false) {
 	value = getModelValue()
 	aceEditor?.setValue(value)
 	aceEditor?.clearSelection()
 	console.log(isDark.value)
 	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
 	props.autofocus && aceEditor?.focus()
 	if (resetHistory) {
@@ -156,6 +155,7 @@ function resetEditor(value: string, resetHistory = false) {
 }
 watch(isDark, () => {
 	console.log(isDark.value)
 	aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
 })
@@ -175,30 +175,3 @@ watch(
 defineExpose({ resetEditor })
 </script>
 <style scoped>
 .editor .ace_editor {
 	height: 100%;
 	width: 100%;
 	border-radius: 5px;
 	overscroll-behavior: none;
 }
 .editor :deep(.ace_scrollbar-h) {
 	display: none;
 }
 .editor :deep(.ace_search) {
 	@apply dark:bg-gray-800 dark:text-gray-200;
 	@apply dark:border-gray-800;
 }
 .editor :deep(.ace_searchbtn) {
 	@apply dark:bg-gray-800 dark:text-gray-200;
 	@apply dark:border-gray-800;
 }
 .editor :deep(.ace_button) {
 	@apply dark:bg-gray-800 dark:text-gray-200;
 }
 .editor :deep(.ace_search_field) {
 	@apply dark:bg-gray-900 dark:text-gray-200;
 	@apply dark:border-gray-800;
 }
 </style>
--- a/frontend/src/components/Controls/IconPicker.vue
+++ b/frontend/src/components/Controls/IconPicker.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1.5">
-		<label class="block text-xs text-gray-600">
+		<label class="block text-xs text-ink-gray-5">
 			{{ label }}
 		</label>
 		<div class="w-full">
@@ -8,22 +8,22 @@
 				<template #target="{ togglePopover }">
 					<button
 						@click="openPopover(togglePopover)"
-						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
 					>
 						<component
 							v-if="selectedIcon"
-							class="w-4 h-4 text-gray-700 stroke-1.5"
+							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
 							:is="icons[selectedIcon]"
 						/>
 						<component
 							v-else
-							class="w-4 h-4 text-gray-700 stroke-1.5"
+							class="w-4 h-4 text-ink-gray-7 stroke-1.5"
 							:is="icons.Folder"
 						/>
 						<span v-if="selectedIcon">
 							{{ selectedIcon }}
 						</span>
-						<span v-else class="text-gray-600">
+						<span v-else class="text-ink-gray-5">
 							{{ __('Choose an icon') }}
 						</span>
 					</button>
@@ -40,7 +40,7 @@
 							<div v-for="(iconComponent, iconName) in filteredIcons">
 								<component
 									:is="iconComponent"
-									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
+									class="h-4 w-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
 									@click="setIcon(iconName, close)"
 								/>
 							</div>
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -2,7 +2,7 @@
 	<div class="space-y-1.5">
 		<label class="block" :class="labelClasses" v-if="attrs.label">
 			{{ attrs.label }}
-			<span class="text-red-500" v-if="attrs.required">*</span>
+			<span class="text-ink-red-3" v-if="attrs.required">*</span>
 		</label>
 		<Autocomplete
 			ref="autocomplete"
@@ -29,8 +29,8 @@
 				<slot name="item-label" v-bind="{ active, selected, option }" />
 			</template>
-			<template v-if="attrs.onCreate" #footer="{ value, close }">
+			<template #footer="{ value, close }">
-				<div>
+				<div v-if="attrs.onCreate">
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
@@ -42,9 +42,21 @@
 						</template>
 					</Button>
 				</div>
 				<div>
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
 						:label="__('Clear')"
 						@click="() => clearValue(close)"
 					>
 						<template #prefix>
 							<X class="h-4 w-4 stroke-1.5" />
 						</template>
 					</Button>
 				</div>
 			</template>
 		</Autocomplete>
-		<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
+		<p v-if="description" class="text-sm text-ink-gray-5">{{ description }}</p>
 	</div>
 </template>
@@ -52,7 +64,7 @@
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import { watchDebounced } from '@vueuse/core'
 import { createResource, Button } from 'frappe-ui'
-import { Plus } from 'lucide-vue-next'
+import { Plus, X } from 'lucide-vue-next'
 import { useAttrs, computed, ref } from 'vue'
 const props = defineProps({
@@ -75,9 +87,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue', 'change'])
 const attrs = useAttrs()
 const valuePropPassed = computed(() => 'value' in attrs)
 const value = computed({
@@ -131,7 +141,7 @@ const options = createResource({
 	},
 })
-function reload(val) {
+const reload = (val) => {
 	options.update({
 		params: {
 			txt: val,
@@ -142,13 +152,18 @@ function reload(val) {
 	options.reload()
 }
 const clearValue = (close) => {
 	emit(valuePropPassed.value ? 'change' : 'update:modelValue', '')
 	close()
 }
 const labelClasses = computed(() => {
 	return [
 		{
 			sm: 'text-xs',
 			md: 'text-base',
 		}[attrs.size || 'sm'],
-		'text-gray-600',
+		'text-ink-gray-5',
 	]
 })
 </script>
--- a/frontend/src/components/Controls/MultiSelect.vue
+++ b/frontend/src/components/Controls/MultiSelect.vue
@@ -2,7 +2,7 @@
 	<div>
 		<label class="block mb-1" :class="labelClasses" v-if="label">
 			{{ label }}
-			<span class="text-red-500" v-if="required">*</span>
+			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
 		<div class="grid grid-cols-3 gap-1">
 			<Button
@@ -41,7 +41,9 @@
 						</template>
 						<template #body="{ isOpen }">
 							<div v-show="isOpen">
-								<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
+								<div
 									class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
 								>
 									<ComboboxOptions
 										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
 										static
@@ -55,14 +57,14 @@
 											<li
 												:class="[
 													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-													{ 'bg-gray-100': active },
+													{ 'bg-surface-gray-2': active },
 												]"
 											>
 												<div class="flex flex-col gap-1 p-1">
 													<div class="text-base font-medium">
 														{{ option.description }}
 													</div>
-													<div class="text-sm text-gray-600">
+													<div class="text-sm text-ink-gray-5">
 														{{ option.value }}
 													</div>
 												</div>
@@ -240,7 +242,7 @@ const labelClasses = computed(() => {
 			sm: 'text-xs',
 			md: 'text-base',
 		}[props.size || 'sm'],
-		'text-gray-600',
+		'text-ink-gray-5',
 	]
 })
 </script>
--- a/frontend/src/components/Controls/Rating.vue
+++ b/frontend/src/components/Controls/Rating.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="space-y-1">
-		<label class="block text-xs text-gray-600" v-if="props.label">
+		<label class="block text-xs text-ink-gray-5" v-if="props.label">
 			{{ props.label }}
 		</label>
 		<div class="flex text-center">
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md shadow-md text-base overflow-auto"
+		class="flex flex-col h-full rounded-md border-2 overflow-auto"
 		style="min-height: 350px"
 	>
 		<div
@@ -15,14 +15,12 @@
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
-				<Badge
+				<div
 					variant="subtle"
 					theme="gray"
 					size="md"
 					v-for="tag in course.tags"
 					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
 				>
 					{{ tag }}
-				</Badge>
+				</div>
 			</div>
 			<div v-if="!course.image" class="image-placeholder">
 				{{ course.title[0] }}
@@ -32,8 +30,8 @@
 			<div class="flex items-center justify-between mb-2">
 				<div v-if="course.lessons">
 					<Tooltip :text="__('Lessons')">
-						<span class="flex items-center">
+						<span class="flex items-center text-ink-gray-7">
-							<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							<BookOpen class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.lessons }}
 						</span>
 					</Tooltip>
@@ -41,8 +39,8 @@
 				<div v-if="course.enrollments">
 					<Tooltip :text="__('Enrolled Students')">
-						<span class="flex items-center">
+						<span class="flex items-center text-ink-gray-7">
-							<Users class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							<Users class="h-4 w-4 stroke-1. mr-1" />
 							{{ course.enrollments }}
 						</span>
 					</Tooltip>
@@ -50,8 +48,8 @@
 				<div v-if="course.rating">
 					<Tooltip :text="__('Average Rating')">
-						<span class="flex items-center">
+						<span class="flex items-center text-ink-gray-7">
-							<Star class="h-4 w-4 stroke-1.5 text-gray-700 mr-1" />
+							<Star class="h-4 w-4 stroke-1.5 mr-1" />
 							{{ course.rating }}
 						</span>
 					</Tooltip>
@@ -68,11 +66,11 @@
 				</div>
 			</div>
-			<div class="text-xl font-semibold leading-6">
+			<div class="text-xl font-semibold leading-6 text-ink-gray-9">
 				{{ course.title }}
 			</div>
-			<div class="short-introduction text-gray-700 text-sm">
+			<div class="short-introduction text-ink-gray-7 text-sm">
 				{{ course.short_introduction }}
 			</div>
@@ -81,7 +79,10 @@
 				:progress="course.membership.progress"
 			/>
-			<div v-if="user && course.membership" class="text-sm mb-4">
+			<div
 				v-if="user && course.membership"
 				class="text-sm text-ink-gray-7 mt-2 mb-4"
 			>
 				{{ Math.ceil(course.membership.progress) }}% completed
 			</div>
@@ -99,9 +100,15 @@
 					<CourseInstructors :instructors="course.instructors" />
 				</div>
-				<div class="font-semibold">
+				<div v-if="course.paid_course" class="font-semibold">
 					{{ course.price }}
 				</div>
 				<div
 					v-if="course.paid_certificate || course.enable_certification"
 					class="text-xs text-ink-blue-3 bg-surface-blue-1 py-0.5 px-1 rounded-md"
 				>
 					{{ __('Certification') }}
 				</div>
 			</div>
 		</div>
 	</div>
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -1,16 +1,16 @@
 <template>
-	<div class="shadow rounded-md min-w-80">
+	<div class="border-2 rounded-md min-w-80">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"
 			class="rounded-t-md min-h-56 w-full"
 		/>
 		<div class="p-5">
-			<div v-if="course.data.price" class="text-2xl font-semibold mb-3">
+			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
 			<div v-if="course.data.membership" class="space-y-2">
 				<router-link
 				v-if="course.data.membership"
 					:to="{
 						name: 'Lesson',
 						params: {
@@ -30,6 +30,8 @@
 						</span>
 					</Button>
 				</router-link>
 				<CertificationLinks :courseName="course.data.name" />
 			</div>
 			<router-link
 				v-else-if="course.data.paid_course"
 				:to="{
@@ -48,7 +50,7 @@
 			</router-link>
 			<div
 				v-else-if="course.data.disable_self_learning"
-				class="bg-blue-100 text-blue-900 text-sm rounded-md py-1 px-3"
+				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
 			>
 				{{ __('Contact the Administrator to enroll for this course.') }}
 			</div>
@@ -87,36 +89,62 @@
 					</span>
 				</Button>
 			</router-link>
-			<div class="mt-8 mb-4 font-medium">
+			<div class="space-y-4">
 				<div class="mt-8 font-medium text-ink-gray-9">
 					{{ __('This course has:') }}
 				</div>
-			<div class="flex items-center mb-3">
+				<div class="flex items-center text-ink-gray-9">
-				<BookOpen class="h-5 w-5 stroke-1.5 text-gray-600" />
+					<BookOpen class="h-4 w-4 stroke-1.5" />
 					<span class="ml-2">
 						{{ course.data.lessons }} {{ __('Lessons') }}
 					</span>
 				</div>
-			<div class="flex items-center mb-3">
+				<div class="flex items-center text-ink-gray-9">
-				<Users class="h-5 w-5 stroke-1.5 text-gray-600" />
+					<Users class="h-4 w-4 stroke-1.5" />
 					<span class="ml-2">
 						{{ formatAmount(course.data.enrollments) }}
 						{{ __('Enrolled Students') }}
 					</span>
 				</div>
-			<div class="flex items-center">
+				<div
-				<Star class="h-5 w-5 stroke-1.5 fill-orange-500 text-gray-50" />
+					v-if="parseInt(course.data.rating) > 0"
-				<span class="ml-2"> {{ course.data.rating }} {{ __('Rating') }} </span>
+					class="flex items-center text-ink-gray-9"
 				>
 					<Star class="h-4 w-4 stroke-1.5 fill-orange-500 text-gray-50" />
 					<span class="ml-2">
 						{{ course.data.rating }} {{ __('Rating') }}
 					</span>
 				</div>
 				<div
 					v-if="course.data.enable_certification"
 					class="flex items-center font-semibold text-ink-gray-9"
 				>
 					<GraduationCap class="h-4 w-4 stroke-2" />
 					<span class="ml-2">
 						{{ __('Certificate of Completion') }}
 					</span>
 				</div>
 				<div
 					v-if="course.data.paid_certificate"
 					class="flex items-center font-semibold text-ink-gray-9"
 				>
 					<GraduationCap class="h-4 w-4 stroke-2" />
 					<span class="ml-2">
 						{{ __('Paid Certificate after Evaluation') }}
 					</span>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup>
-import { BookOpen, Users, Star } from 'lucide-vue-next'
+import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource } from 'frappe-ui'
+import { Button, createResource, Tooltip } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
 import CertificationLinks from '@/components/CertificationLinks.vue'
 const router = useRouter()
 const user = inject('$user')
--- a/frontend/src/components/CourseInstructors.vue
+++ b/frontend/src/components/CourseInstructors.vue
@@ -1,4 +1,5 @@
 <template>
 	<div class="text-ink-gray-7">
 		<span v-if="instructors?.length == 1">
 			<router-link
 				:to="{
@@ -39,6 +40,7 @@
 			</router-link>
 			and {{ instructors?.length - 1 }} others
 		</span>
 	</div>
 </template>
 <script setup>
 const props = defineProps({
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -4,7 +4,7 @@
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="grid grid-cols-[70%,30%] mb-4 px-2"
 		>
-			<div class="font-semibold text-lg leading-5">
+			<div class="font-semibold text-lg leading-5 text-ink-gray-9">
 				{{ __(title) }}
 			</div>
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
@@ -16,7 +16,7 @@
 		</div>
 		<div
 			:class="{
-				'shadow rounded-md py-2 px-2': showOutline && outline.data?.length,
+				'border-2 rounded-md py-2 px-2': showOutline && outline.data?.length,
 			}"
 		>
 			<Disclosure
@@ -33,10 +33,10 @@
 							hidden: chapter.is_scorm_package,
 							open: index == 1,
 						}"
-						class="h-4 w-4 text-gray-900 stroke-1"
+						class="h-4 w-4 text-ink-gray-9 stroke-1"
 					/>
 					<div
-						class="text-base text-left font-medium leading-5 ml-2"
+						class="text-base text-left text-ink-gray-9 font-medium leading-5 ml-2"
 						@click="redirectToChapter(chapter)"
 					>
 						{{ chapter.title }}
@@ -46,14 +46,14 @@
 							<FilePenLine
 								v-if="allowEdit"
 								@click.prevent="openChapterModal(chapter)"
-								class="h-4 w-4 text-gray-900 invisible group-hover:visible"
+								class="h-4 w-4 text-ink-gray-9 invisible group-hover:visible"
 							/>
 						</Tooltip>
 						<Tooltip :text="__('Delete Chapter')" placement="bottom">
 							<Trash2
 								v-if="allowEdit"
 								@click.prevent="trashChapter(chapter.name)"
-								class="h-4 w-4 text-red-500 invisible group-hover:visible"
+								class="h-4 w-4 text-ink-red-3 invisible group-hover:visible"
 							/>
 						</Tooltip>
 					</div>
@@ -69,7 +69,12 @@
 						:data-chapter="chapter.name"
 					>
 						<template #item="{ element: lesson }">
-							<div class="outline-lesson pl-8 py-2 pr-4">
+							<div
 								class="outline-lesson pl-8 py-2 pr-4 text-ink-gray-9"
 								:class="
 									isActiveLesson(lesson.number) ? 'bg-surface-selected' : ''
 								"
 							>
 								<router-link
 									:to="{
 										name: allowEdit ? 'LessonForm' : 'Lesson',
@@ -83,21 +88,21 @@
 									<div class="flex items-center text-sm leading-5 group">
 										<MonitorPlay
 											v-if="lesson.icon === 'icon-youtube'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 stroke-1 mr-2"
 										/>
 										<HelpCircle
 											v-else-if="lesson.icon === 'icon-quiz'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 stroke-1 mr-2"
 										/>
 										<FileText
 											v-else-if="lesson.icon === 'icon-list'"
-											class="h-4 w-4 text-gray-900 stroke-1 mr-2"
+											class="h-4 w-4 text-ink-gray-9 stroke-1 mr-2"
 										/>
 										{{ lesson.title }}
 										<Trash2
 											v-if="allowEdit"
 											@click.prevent="trashLesson(lesson.name, chapter.name)"
-											class="h-4 w-4 text-red-500 ml-auto invisible group-hover:visible"
+											class="h-4 w-4 text-ink-red-3 ml-auto invisible group-hover:visible"
 										/>
 										<Check
 											v-if="lesson.is_complete"
@@ -323,9 +328,11 @@ const redirectToChapter = (chapter) => {
 		},
 	})
 }
-</script>
+
-<style>
+const isActiveLesson = (lessonNumber) => {
-.outline-lesson:has(.router-link-active) {
+	return (
-	background-color: theme('colors.gray.100');
+		route.params.chapterNumber == lessonNumber.split('.')[0] &&
 		route.params.lessonNumber == lessonNumber.split('.')[1]
 	)
 }
-</style>
+</script>
--- a/frontend/src/components/CourseReviews.vue
+++ b/frontend/src/components/CourseReviews.vue
@@ -7,7 +7,7 @@
 		>
 			{{ __('Write a Review') }}
 		</Button>
-		<div class="flex items-center font-semibold text-2xl">
+		<div class="flex items-center font-semibold text-2xl text-ink-gray-9">
 			{{ __('Student Reviews') }}
 		</div>
 		<div class="grid gap-8 mt-10">
@@ -28,17 +28,17 @@
 								params: { username: review.owner_details.username },
 							}"
 						>
-							<span class="text-lg font-medium mr-4">
+							<span class="text-lg font-medium mr-4 text-ink-gray-7">
 								{{ review.owner_details.full_name }}
 							</span>
 						</router-link>
-						<span>
+						<span class="text-ink-gray-7">
 							{{ review.creation }}
 						</span>
 						<div class="flex mt-2">
 							<Star
 								v-for="index in 5"
-								class="h-5 w-5 text-gray-100 bg-gray-200 rounded-sm mr-2"
+								class="h-5 w-5 text-ink-gray-1 rounded-sm mr-2"
 								:class="
 									index <= Math.ceil(review.rating)
 										? 'fill-orange-500'
@@ -48,7 +48,7 @@
 						</div>
 					</div>
 				</div>
-				<div v-if="review.review" class="mt-4 leading-5">
+				<div v-if="review.review" class="mt-4 leading-5 text-ink-gray-7">
 					{{ review.review }}
 				</div>
 			</div>
--- a/frontend/src/components/CreateOutline.vue
+++ b/frontend/src/components/CreateOutline.vue
@@ -6,7 +6,7 @@
 		<div v-if="course.chapters.length">
 			{{ course.chapters }}
 		</div>
-		<div v-else class="border bg-white rounded-md p-5 text-center mt-4">
+		<div v-else class="border bg-surface-white rounded-md p-5 text-center mt-4">
 			<div>
 				{{
 					__(
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="relative flex h-full flex-col">
 		<div class="h-full flex-1">
-			<div class="flex h-screen text-base">
+			<div class="flex h-screen text-base bg-surface-white">
 				<div
 					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
 				>
--- a/frontend/src/components/DiscussionReplies.vue
+++ b/frontend/src/components/DiscussionReplies.vue
@@ -3,10 +3,10 @@
 		<div v-if="!singleThread" class="flex items-center mb-5">
 			<Button variant="outline" @click="showTopics = true">
 				<template #icon>
-					<ChevronLeft class="w-5 h-5 stroke-1.5 text-gray-700" />
+					<ChevronLeft class="w-5 h-5 stroke-1.5 text-ink-gray-7" />
 				</template>
 			</Button>
-			<span class="text-lg font-semibold ml-2">
+			<span class="text-lg font-semibold ml-2 text-ink-gray-9">
 				{{ topic.title }}
 			</span>
 		</div>
@@ -17,7 +17,7 @@
 				:class="{ 'border-b': index + 1 != replies.data.length }"
 			>
 				<div class="flex items-center justify-between mb-2">
-					<div class="flex items-center">
+					<div class="flex items-center text-ink-gray-5">
 						<UserAvatar :user="reply.user" class="mr-2" />
 						<span>
 							{{ reply.user.full_name }}
@@ -63,7 +63,7 @@
 					:fixedMenu="reply.editable || false"
 					:editorClass="
 						reply.editable
-							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none'
+							? 'ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none'
 							: 'prose-sm'
 					"
 				/>
@@ -71,13 +71,14 @@
 		</div>
 		<TextEditor
 			v-if="renderEditor"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
 			@change="(val) => (newReply = val)"
 			placeholder="Type your reply here..."
 			:fixedMenu="true"
-			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none border border-gray-300 rounded-b-md min-h-[7rem] py-1 px-2"
+			editorClass="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none border border-outline-gray-2 rounded-b-md min-h-[7rem] py-1 px-2"
 		/>
 		<div class="flex justify-between mt-2">
 			<span> </span>
@@ -94,7 +95,7 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted, computed } from 'vue'
+import { ref, inject, onMounted } from 'vue'
 import { createToast } from '../utils'
 const showTopics = defineModel('showTopics')
@@ -102,6 +103,8 @@ const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
 const allUsers = inject('$allUsers')
 const mentionUsers = ref([])
 const renderEditor = ref(false)
 const props = defineProps({
 	topic: {
@@ -124,6 +127,7 @@ onMounted(() => {
 	socket.on('delete_message', (data) => {
 		replies.reload()
 	})
 	fetchMentionUsers()
 })
 const replies = createResource({
@@ -150,15 +154,26 @@ const newReplyResource = createResource({
 	},
 })
-const mentionUsers = computed(() => {
+const fetchMentionUsers = () => {
-	let users = Object.values(allUsers.data).map((user) => {
+	if (user.data?.is_student) {
 		renderEditor.value = true
 	} else {
 		allUsers.reload(
 			{},
 			{
 				onSuccess(data) {
 					mentionUsers.value = Object.values(data).map((user) => {
 						return {
 							value: user.name,
 							label: user.full_name,
 						}
 					})
-	return users
+					renderEditor.value = true
-})
+				},
 			}
 		)
 	}
 }
 const postReply = () => {
 	newReplyResource.submit(
@@ -178,7 +193,7 @@ const postReply = () => {
 					title: 'Error',
 					text: err.messages?.[0] || err,
 					icon: 'x',
-					iconClasses: 'bg-red-600 text-white rounded-md p-px',
+					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
 					position: 'top-center',
 					timeout: 10,
 				})
--- a/frontend/src/components/Discussions.vue
+++ b/frontend/src/components/Discussions.vue
@@ -3,7 +3,7 @@
 		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
 			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
-		<div class="text-xl font-semibold">
+		<div class="text-xl font-semibold text-ink-gray-9">
 			{{ __(title) }}
 		</div>
 	</div>
@@ -16,10 +16,10 @@
 			>
 				<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
 				<div>
-					<div class="text-lg font-semibold mb-1">
+					<div class="text-lg font-semibold mb-1 text-ink-gray-7">
 						{{ topic.title }}
 					</div>
-					<div class="flex items-center">
+					<div class="flex items-center text-ink-gray-5">
 						<span>
 							{{ topic.user.full_name }}
 						</span>
@@ -44,12 +44,12 @@
 		v-else
 		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
 	>
-		<MessageSquareText class="w-7 h-7 text-gray-500 stroke-1.5 mr-2" />
+		<MessageSquareText class="w-7 h-7 text-ink-gray-4 stroke-1.5 mr-2" />
 		<div class="">
 			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div class="text-gray-600">
+			<div class="text-ink-gray-5">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>
--- a/frontend/src/components/JobCard.vue
+++ b/frontend/src/components/JobCard.vue
@@ -1,71 +1,41 @@
 <template>
-	<div class="flex rounded p-1 lg:px-2 lg:py-2.5 hover:bg-gray-100">
+	<div class="flex space-x-4 border rounded-md p-2">
-		<div class="flex w-3/5 md:w-2/5">
+		<img :src="job.company_logo" class="size-10 rounded-full object-contain" />
-			<img
+		<div class="flex flex-col space-y-2 flex-1">
-				:src="job.company_logo"
+			<div class="flex items-center justify-between">
-				class="w-12 h-12 rounded-lg object-contain mr-4"
+				<span class="font-semibold text-ink-gray-9">
 				:alt="job.company_name"
 			/>
 			<div>
 				<div class="font-medium mb-1">
 					{{ job.job_title }}
 				</span>
 			</div>
-				<div class="text-gray-700">
+			<div class="flex items-center space-x-2 text-ink-gray-5">
 				<Building2 class="w-4 h-4 stroke-1.5" />
 				<span>
 					{{ job.company_name }}
 				</span>
 			</div>
 			<div class="flex items-center space-x-2 text-ink-gray-5">
 				<MapPin class="w-4 h-4 stroke-1.5" />
 				<span>
 					{{ job.location }}
 				</span>
 			</div>
-		</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
-		<div class="flex justify-end w-1/5 text-gray-700">
+				<Shapes class="w-4 h-4 stroke-1.5" />
-			{{ job.location.replace(',', '').split(' ')[0] }}
+				<span>
 		</div>
 		<div
 			class="flex justify-end w-1/5 text-gray-700 text-right hidden md:block"
 		>
 					{{ job.type }}
 		</div>
 		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">
 			{{ dayjs(job.creation).format('DD MMM YYYY') }}
 		</div>
 	</div>
 	<!-- <div class="flex flex-col shadow rounded-md p-4 h-full">
 		<div class="flex justify-between">
 			<div>
 				<div class="text-xl font-semibold mb-2">
 					{{ job.job_title }}
 				</div>
 				<div>
 					{{ __("posted by") }}
 					<span class="font-medium">
 						{{ job.company_name }}
 				</span>
 			</div>
-			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
-			<img
+				<Calendar class="w-4 h-4 stroke-1.5" />
-				:src="job.company_logo"
+				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
-				class="w-12 h-12 rounded-lg object-contain"
+			</div>
 			/>
 		</div>
 		<div class="flex justify-between mt-8">
 			<div class="flex items-center">
 				<Badge :label="job.type" theme="green" size="lg" class="mr-4"/>
 				<Badge :label="job.location" theme="gray" size="lg">
 					<template #prefix>
 						<MapPin class="h-4 w-4 stroke-1.5" />
 					</template>
 				</Badge>
 			</div>
 			<div>
 				<span class="font-medium">
 					{{ dayjs(job.creation).format('DD MMM YYYY') }}
 				</span>
 		</div>
 	</div>
 	</div> -->
 </template>
 <script setup>
-import { MapPin } from 'lucide-vue-next'
+import { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { Badge } from 'frappe-ui'
 import { inject } from 'vue'
 import { Avatar } from 'frappe-ui'
 const dayjs = inject('$dayjs')
 const props = defineProps({
--- a/frontend/src/components/LessonHelp.vue
+++ b/frontend/src/components/LessonHelp.vue
@@ -1,5 +1,20 @@
 <template>
-	<div class="space-y-5">
+	<div class="space-y-5 text-ink-gray-9">
 		<div class="space-y-2">
 			<div class="flex items-center text-sm font-medium space-x-2">
 				<span>
 					{{ __('What does include in preview mean?') }}
 				</span>
 			</div>
 			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'If Include in Preview is enabled for a lesson then the lesson will also be accessible to non logged in users.'
 					)
 				}}
 			</div>
 		</div>
 		<div class="space-y-2">
 			<div
 				class="flex items-center text-sm font-medium space-x-2 cursor-pointer"
@@ -8,9 +23,9 @@
 				<span>
 					{{ __('How to add a Quiz?') }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'Click on the add icon in the editor and select Quiz from the menu. It opens up a dialog, where you can either select a quiz from the list or create a new quiz. When you select the Create New option it redirects you to the quiz creation page.'
@@ -27,9 +42,9 @@
 				<span class="leading-5">
 					{{ __(contentMap['upload']) }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'To upload Image, Video, Audio or PDF from your system, click on the add icon and select upload from the menu. Then choose the file you want to add to the lesson and it gets added to your lesson.'
@@ -46,9 +61,9 @@
 				<span>
 					{{ __(contentMap['youtube']) }}
 				</span>
-				<Info class="w-3 h-3 text-gray-700" />
+				<Info class="w-3 h-3 text-ink-gray-7" />
 			</div>
-			<div class="text-xs text-gray-600 mb-1 leading-5">
+			<div class="text-xs text-ink-gray-5 mb-1 leading-5">
 				{{
 					__(
 						'Copy the URL of the video from YouTube and paste it in the editor.'
@@ -56,21 +71,6 @@
 				}}
 			</div>
 		</div>
 		<div class="space-y-2">
 			<div class="flex items-center text-sm font-medium space-x-2">
 				<span>
 					{{ __('What does include in preview mean?') }}
 				</span>
 			</div>
 			<div class="text-xs text-gray-600 mb-1 leading-5">
 				{{
 					__(
 						'If Include in Preview is enabled for a lesson then the lesson will also be accessible to non logged in users.'
 					)
 				}}
 			</div>
 		</div>
 	</div>
 	<ExplanationVideos v-model="showExplanation" :title="title" :type="type" />
 </template>
--- a/frontend/src/components/LiveClass.vue
+++ b/frontend/src/components/LiveClass.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex items-center justify-between mb-5">
-		<div class="text-lg font-semibold">
+		<div class="text-lg font-semibold text-ink-gray-9">
 			{{ __('Live Class') }}
 		</div>
 		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
@@ -15,49 +15,59 @@
 	<div v-if="liveClasses.data?.length" class="grid grid-cols-2 gap-5">
 		<div
 			v-for="cls in liveClasses.data"
-			class="flex flex-col border rounded-md h-full text-sm text-gray-700 p-3"
+			class="flex flex-col border rounded-md h-full text-ink-gray-7 p-3"
 		>
-			<div class="font-semibold text-gray-900 text-lg mb-4">
+			<div class="font-semibold text-ink-gray-9 text-lg mb-1">
 				{{ cls.title }}
 			</div>
-			<div class="leading-5 text-gray-700 text-sm mb-4">
+			<div class="short-introduction">
 				{{ cls.description }}
 			</div>
-			<div class="flex items-center mb-2">
+			<div class="space-y-3">
-				<Calendar class="w-4 h-4 stroke-1.5 text-gray-700" />
+				<div class="flex items-center space-x-2">
-				<span class="ml-2">
+					<Calendar class="w-4 h-4 stroke-1.5" />
 					<span>
 						{{ dayjs(cls.date).format('DD MMMM YYYY') }}
 					</span>
 				</div>
-			<div class="flex items-center mb-5">
+				<div class="flex items-center space-x-2">
 					<Clock class="w-4 h-4 stroke-1.5" />
-				<span class="ml-2">
+					<span>
 						{{ formatTime(cls.time) }}
 					</span>
 				</div>
-			<div class="flex items-center space-x-2 text-gray-900 mt-auto">
+				<div
 					v-if="cls.date >= dayjs().format('YYYY-MM-DD')"
 					class="flex items-center space-x-2 text-ink-gray-9 mt-auto"
 				>
 					<a
 						v-if="user.data?.is_moderator || user.data?.is_evaluator"
 						:href="cls.start_url"
 						target="_blank"
-					class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+						class="w-1/2 cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
 					>
 						<Monitor class="h-4 w-4 stroke-1.5" />
 						{{ __('Start') }}
 					</a>
 					<a
 					v-if="cls.date <= dayjs().format('YYYY-MM-DD')"
 						:href="cls.join_url"
 						target="_blank"
-					class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-gray-800 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring focus-visible:ring-gray-400 h-7 text-base px-2 rounded"
+						class="w-full cursor-pointer inline-flex items-center justify-center gap-2 transition-colors focus:outline-none text-ink-gray-8 bg-surface-gray-2 hover:bg-surface-gray-3 active:bg-surface-gray-4 focus-visible:ring focus-visible:ring-outline-gray-3 h-7 text-base px-2 rounded"
 					>
 						<Video class="h-4 w-4 stroke-1.5" />
 						{{ __('Join') }}
 					</a>
 				</div>
 				<div v-else class="flex items-center space-x-2 text-yellow-700">
 					<Info class="w-4 h-4 stroke-1.5" />
 					<span>
 						{{ __('This class has ended') }}
 					</span>
 				</div>
 			</div>
-	<div v-else class="text-sm italic text-gray-600">
+		</div>
 	</div>
 	<div v-else class="text-sm italic text-ink-gray-5">
 		{{ __('No live classes scheduled') }}
 	</div>
 	<LiveClassModal
@@ -68,7 +78,7 @@
 </template>
 <script setup>
 import { createListResource, Button } from 'frappe-ui'
-import { Plus, Clock, Calendar, Video, Monitor } from 'lucide-vue-next'
+import { Plus, Clock, Calendar, Video, Monitor, Info } from 'lucide-vue-next'
 import { inject } from 'vue'
 import LiveClassModal from '@/components/Modals/LiveClassModal.vue'
 import { ref } from 'vue'
@@ -107,3 +117,15 @@ const openLiveClassModal = () => {
 	showLiveClassModal.value = true
 }
 </script>
 <style>
 .short-introduction {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	text-overflow: ellipsis;
 	width: 100%;
 	overflow: hidden;
 	margin: 0.25rem 0 1.5rem;
 	line-height: 1.5;
 }
 </style>
--- a/frontend/src/components/Members.vue
+++ b/frontend/src/components/Members.vue
@@ -2,10 +2,10 @@
 	<div class="flex min-h-0 flex-col text-base">
 		<div class="flex items-center justify-between">
 			<div>
-				<div class="text-xl font-semibold mb-1">
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
 					{{ __(label) }}
 				</div>
-				<!-- <div class="text-xs text-gray-600">
+				<!-- <div class="text-xs text-ink-gray-5">
 					{{ __(description) }}
 				</div> -->
 			</div>
@@ -36,7 +36,7 @@
 			<FormControl
 				v-model="member.first_name"
 				:placeholder="__('First Name')"
-				type="test"
+				type="text"
 				class="w-full"
 			/>
 			<Button @click="addMember()" variant="subtle">
@@ -63,7 +63,7 @@
 							/>
 							<div class="space-y-1">
 								<div class="flex">
-									<div class="text-gray-900">
+									<div class="text-ink-gray-9">
 										{{ member.full_name }}
 									</div>
 									<div
@@ -81,12 +81,14 @@
 										</Badge>
 									</div>
 								</div>
-								<div class="text-sm text-gray-700">
+								<div class="text-sm text-ink-gray-7">
 									{{ member.name }}
 								</div>
 							</div>
 						</div>
-						<div class="flex items-center justify-center text-gray-700 text-sm">
+						<div
 							class="flex items-center justify-center text-ink-gray-7 text-sm"
 						>
 							<div v-if="member.last_active">
 								{{ dayjs(member.last_active).format('DD MMM, YYYY HH:mm a') }}
 							</div>
--- a/frontend/src/components/MobileLayout.vue
+++ b/frontend/src/components/MobileLayout.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div
 			v-if="sidebarSettings.data"
-			class="fixed flex items-center justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
+			class="fixed flex items-center justify-around border-t border-outline-gray-2 bottom-0 z-10 w-full bg-surface-white standalone:pb-4"
 			:style="{
 				gridTemplateColumns: `repeat(${
 					sidebarLinks.length + 1
@@ -22,7 +22,7 @@
 				<component
 					:is="icons[tab.icon]"
 					class="h-6 w-6 stroke-1.5"
-					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
+					:class="[isActive(tab) ? 'text-ink-gray-9' : 'text-ink-gray-5']"
 				/>
 			</button>
 			<Popover
@@ -33,7 +33,7 @@
 				<template #target>
 					<component
 						:is="icons['List']"
-						class="h-6 w-6 stroke-1.5 text-gray-600"
+						class="h-6 w-6 stroke-1.5 text-ink-gray-5"
 					/>
 				</template>
 				<template #body-main>
@@ -46,7 +46,7 @@
 						>
 							<component
 								:is="icons[link.icon]"
-								class="h-4 w-4 stroke-1.5 text-gray-600"
+								class="h-4 w-4 stroke-1.5 text-ink-gray-5"
 							/>
 							<div>
 								{{ link.label }}
--- a/frontend/src/components/Modals/AnnouncementModal.vue
+++ b/frontend/src/components/Modals/AnnouncementModal.vue
@@ -16,26 +16,26 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div class="">
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Subject') }}
-						<span class="text-red-500">*</span>
+						<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-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Reply To') }}
 					</div>
 					<Input type="text" v-model="announcement.replyTo" />
 				</div>
 				<div class="mb-4">
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Announcement') }}
 					</div>
 					<TextEditor
-						:bubbleMenu="true"
+						:fixedMenu="true"
 						@change="(val) => (announcement.announcement = val)"
-						editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
 					/>
 				</div>
 			</div>
@@ -102,7 +102,7 @@ const makeAnnouncement = (close) => {
 				)
 			},
 			onError(err) {
-				showToast(__('Error'), __(err.messages?.[0] || err), 'check')
+				showToast(__('Error'), __(err.messages?.[0] || err), 'alert-circle')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/BatchCourseModal.vue
+++ b/frontend/src/components/Modals/BatchCourseModal.vue
@@ -31,7 +31,7 @@
 </template>
 <script setup>
 import { Dialog, createResource } from 'frappe-ui'
-import { ref, defineModel } from 'vue'
+import { ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 import { showToast } from '@/utils'
--- a/frontend/src/components/Modals/BatchStudentProgress.vue
+++ b/frontend/src/components/Modals/BatchStudentProgress.vue
@@ -0,0 +1,130 @@
 <template>
 	<Dialog
 		v-model="show"
 		:options="{
 			size: 'xl',
 		}"
 	>
 		<template #body>
 			<div class="p-5 space-y-10 text-base">
 				<div class="flex items-center space-x-2">
 					<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">
 								{{ student.full_name }}
 							</div>
 							<Badge :theme="student.progress === 100 ? 'green' : 'red'">
 								{{ student.progress }}% {{ __('Complete') }}
 							</Badge>
 						</div>
 						<div class="text-sm text-ink-gray-7">
 							{{ student.email }}
 						</div>
 					</div>
 				</div>
 				<div class="space-y-8">
 					<!-- Assessments -->
 					<div class="space-y-2 text-sm">
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Assessment') }}
 							</span>
 							<span>
 								{{ __('Percentage/Status') }}
 							</span>
 						</div>
 						<router-link
 							v-for="assessment in Object.keys(student.assessments)"
 							class="flex items-center text-ink-gray-7 font-medium"
 							:to="{
 								name:
 									student.assessments[assessment].type == 'LMS Assignment'
 										? 'AssignmentSubmission'
 										: '',
 								params:
 									student.assessments[assessment].type == 'LMS Assignment'
 										? {
 												assignmentID:
 													student.assessments[assessment].assessment,
 												submissionName:
 													student.assessments[assessment].submission,
 										  }
 										: {},
 							}"
 						>
 							<span class="flex-1">
 								{{ assessment }}
 							</span>
 							<span v-if="isAssignment(student.assessments[assessment].status)">
 								<Badge
 									:theme="
 										getStatusTheme(student.assessments[assessment].status)
 									"
 								>
 									{{ student.assessments[assessment].status }}
 								</Badge>
 							</span>
 							<span v-else>
 								{{ student.assessments[assessment].status }}
 							</span>
 						</router-link>
 					</div>
 					<!-- Courses -->
 					<div class="space-y-2 text-sm">
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Courses') }}
 							</span>
 							<span>
 								{{ __('Progress') }}
 							</span>
 						</div>
 						<div
 							v-for="course in Object.keys(student.courses)"
 							class="flex items-center text-ink-gray-7 font-medium"
 						>
 							<span class="flex-1">
 								{{ course }}
 							</span>
 							<span>
 								{{ Math.floor(student.courses[course]) }}
 							</span>
 						</div>
 					</div>
 				</div>
 				<!-- Heatmap -->
 				<StudentHeatmap :member="student.email" :days="120" />
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
 import { Avatar, Badge, Dialog } from 'frappe-ui'
 import StudentHeatmap from '@/components/StudentHeatmap.vue'
 const show = defineModel()
 const props = defineProps({
 	student: {
 		type: Object,
 		default: null,
 	},
 })
 const isAssignment = (value) => {
 	return isNaN(value)
 }
 const getStatusTheme = (status) => {
 	if (status === 'Pass') {
 		return 'green'
 	} else if (status == 'Not Graded') {
 		return 'orange'
 	} else {
 		return 'red'
 	}
 }
 </script>
--- a/frontend/src/components/Modals/BulkCertificates.vue
+++ b/frontend/src/components/Modals/BulkCertificates.vue
@@ -17,12 +17,6 @@
 	>
 		<template #body-content>
 			<div class="space-y-4">
 				<FormControl
 					type="select"
 					v-model="details.course"
 					:label="__('Course')"
 					:options="getCourses()"
 				/>
 				<Link
 					v-model="details.evaluator"
 					:label="__('Evaluator')"
@@ -38,6 +32,12 @@
 					v-model="details.expiry_date"
 					:label="__('Expiry Date')"
 				/>
 				<FormControl
 					type="select"
 					v-model="details.course"
 					:label="__('Course')"
 					:options="getCourses()"
 				/>
 				<Link
 					v-model="details.template"
 					:label="__('Template')"
@@ -94,7 +94,7 @@ const createCertificate = createResource({
 				template: details.template,
 				published: details.published,
 				course: values.course,
-				batch: values.batch,
+				batch_name: values.batch,
 				member: values.member,
 				evaluator: details.evaluator,
 			},
--- a/frontend/src/components/Modals/ChapterModal.vue
+++ b/frontend/src/components/Modals/ChapterModal.vue
@@ -47,19 +47,19 @@
 					<div v-else class="">
 						<div class="flex items-center">
 							<div class="border rounded-md p-2 mr-2">
-								<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+								<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 							</div>
 							<div class="flex flex-col">
 								<span>
 									{{ chapter.scorm_package.file_name }}
 								</span>
-								<span class="text-sm text-gray-500 mt-1">
+								<span class="text-sm text-ink-gray-4 mt-1">
 									{{ getFileSize(chapter.scorm_package.file_size) }}
 								</span>
 							</div>
 							<X
 								@click="() => (chapter.scorm_package = null)"
-								class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 							/>
 						</div>
 					</div>
@@ -77,7 +77,7 @@ import {
 	FormControl,
 	Switch,
 } from 'frappe-ui'
-import { defineModel, reactive, watch } from 'vue'
+import { reactive, watch } from 'vue'
 import { showToast, getFileSize } from '@/utils/'
 import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
@@ -145,9 +145,9 @@ const addChapter = async (close) => {
 					{
 						onSuccess(data) {
 							cleanChapter()
-							if (!settingsStore.onboardingDetails.data?.is_onboarded) {
+							/* if (!settingsStore.onboardingDetails.data?.is_onboarded) {
 								settingsStore.onboardingDetails.reload()
-							}
+							} */
 							outline.value.reload()
 							showToast(
 								__('Success'),
--- a/frontend/src/components/Modals/DiscussionModal.vue
+++ b/frontend/src/components/Modals/DiscussionModal.vue
@@ -18,7 +18,7 @@
 					<FormControl v-model="topic.title" :label="__('Title')" type="text" />
 				</div>
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Details') }}
 					</div>
 					<TextEditor
@@ -26,7 +26,7 @@
 						@change="(val) => (topic.reply = val)"
 						:editable="true"
 						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
 				</div>
 			</div>
@@ -35,7 +35,7 @@
 </template>
 <script setup>
 import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
-import { reactive, defineModel } from 'vue'
+import { reactive } from 'vue'
 import { showToast, singularize } from '@/utils'
 const topics = defineModel('reloadTopics')
--- a/frontend/src/components/Modals/EditCoverImage.vue
+++ b/frontend/src/components/Modals/EditCoverImage.vue
@@ -5,7 +5,7 @@
 		</template>
 		<template #body>
 			<div
-				class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
+				class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
 			>
 				<div
 					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
@@ -35,7 +35,7 @@
 						</FileUploader>
 					</div>
 					<div
-						class="relative mt-2 grid w-[25.5rem] gap-2 bg-white lg:grid-cols-2"
+						class="relative mt-2 grid w-[25.5rem] gap-2 bg-surface-white lg:grid-cols-2"
 					>
 						<button
 							v-for="image in images.data"
@@ -53,7 +53,7 @@
 					</div>
 					<div
 						v-if="images.data"
-						class="mt-2 text-center text-sm text-gray-500"
+						class="mt-2 text-center text-sm text-ink-gray-4"
 					>
 						{{ __('Image search powered by') }}
 						<a class="underline" target="_blank" href="https://unsplash.com">
--- a/frontend/src/components/Modals/EditProfile.vue
+++ b/frontend/src/components/Modals/EditProfile.vue
@@ -33,24 +33,24 @@
 					</template>
 				</FileUploader>
 				<div v-else class="mb-4">
-					<div class="text-xs text-gray-600 mb-1">
+					<div class="text-xs text-ink-gray-5 mb-1">
 						{{ __('Profile Image') }}
 					</div>
 					<div class="flex items-center">
 						<div class="border rounded-md p-2 mr-2">
-							<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+							<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 						</div>
 						<div class="text-base flex flex-col">
 							<span>
 								{{ profile.image.file_name }}
 							</span>
-							<span class="text-sm text-gray-500 mt-1">
+							<span class="text-sm text-ink-gray-4 mt-1">
 								{{ getFileSize(profile.image.file_size) }}
 							</span>
 						</div>
 						<X
 							@click="removeImage()"
-							class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+							class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 						/>
 					</div>
 				</div>
@@ -71,14 +71,14 @@
 				/>
 				<div class="mb-4">
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Bio') }}
 					</div>
 					<TextEditor
 						:fixedMenu="true"
 						@change="(val) => (profile.bio = val)"
 						:content="profile.bio"
-						editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-md bg-surface-gray-3"
 					/>
 				</div>
 			</div>
@@ -94,9 +94,9 @@ import {
 	createResource,
 	TextEditor,
 } from 'frappe-ui'
-import { reactive, watch, defineModel } from 'vue'
+import { reactive, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize, showToast } from '@/utils'
+import { getFileSize, showToast, escapeHTML } from '@/utils'
 const reloadProfile = defineModel('reloadProfile')
@@ -131,6 +131,7 @@ const imageResource = createResource({
 const updateProfile = createResource({
 	url: 'frappe.client.set_value',
 	makeParams(values) {
 		profile.bio = escapeHTML(profile.bio)
 		return {
 			doctype: 'User',
 			name: props.profile.data.name,
--- a/frontend/src/components/Modals/EvaluationModal.vue
+++ b/frontend/src/components/Modals/EvaluationModal.vue
@@ -16,25 +16,33 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Course') }}
 					</div>
 					<Select v-model="evaluation.course" :options="getCourses()" />
 				</div>
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Date') }}
 					</div>
-					<FormControl type="date" v-model="evaluation.date" />
+					<FormControl
 						type="date"
 						v-model="evaluation.date"
 						:min="
 							dayjs()
 								.add(dayjs.duration({ days: 1 }))
 								.format('YYYY-MM-DD')
 						"
 					/>
 				</div>
 				<div v-if="slots.data?.length">
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Select a slot') }}
 					</div>
 					<div class="grid grid-cols-2 gap-2">
 						<div v-for="slot in slots.data">
 							<div
-								class="text-base text-center border rounded-md bg-gray-200 p-2 cursor-pointer"
+								class="text-base text-center border rounded-md bg-surface-gray-3 p-2 cursor-pointer"
 								@click="saveSlot(slot)"
 								:class="{
 									'border-gray-900': evaluation.start_time == slot.start_time,
@@ -48,7 +56,7 @@
 				</div>
 				<div
 					v-else-if="evaluation.course && evaluation.date"
-					class="text-sm italic text-red-600"
+					class="text-sm italic text-ink-red-4"
 				>
 					{{ __('No slots available for this date.') }}
 				</div>
@@ -58,7 +66,7 @@
 </template>
 <script setup>
 import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
-import { defineModel, reactive, watch, inject } from 'vue'
+import { reactive, watch, inject } from 'vue'
 import { createToast, formatTime } from '@/utils/'
 const user = inject('$user')
@@ -143,7 +151,7 @@ function submitEvaluation(close) {
 				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
 				text: message,
 				icon: unavailabilityMessage ? 'alert-circle' : 'x',
-				iconClasses: 'bg-yellow-600 text-white rounded-md p-px',
+				iconClasses: 'bg-yellow-600 text-ink-white rounded-md p-px',
 				position: 'top-center',
 				timeout: 10,
 			})
@@ -161,6 +169,11 @@ const getCourses = () => {
 			})
 		}
 	}
 	if (courses.length == 1) {
 		evaluation.course = courses[0].value
 	}
 	return courses
 }
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -12,7 +12,7 @@
 						{{ event.title }}
 					</div>
-					<div class="flex flex-col space-y-4 text-sm text-gray-800">
+					<div class="flex flex-col space-y-4 text-sm text-ink-gray-8">
 						<Tooltip :text="__('Email ID')">
 							<div class="flex items-center space-x-2 w-fit">
 								<User class="h-4 w-4 stroke-1.5" />
--- a/frontend/src/components/Modals/FCVerfiyCodeModal.vue
+++ b/frontend/src/components/Modals/FCVerfiyCodeModal.vue
@@ -0,0 +1,94 @@
 <template>
 	<Dialog
 		v-model="show"
 		:options="{
 			size: 'xl',
 			title: __('Login to Frappe Cloud'),
 			actions: [
 				{
 					label: __('Verify'),
 					variant: 'solid',
 					onClick: (close) => {
 						verifyCode(close)
 					},
 				},
 			],
 		}"
 	>
 		<template #body-content>
 			<div>
 				<p>
 					{{ __('We have sent the verificaton code to your email id ') }}
 					<b>{{ props.email }}</b>
 				</p>
 				<FormControl
 					v-model="code"
 					:label="__('Verification Code')"
 					class="mb-4"
 				/>
 				<p>
 					{{ __("Didn't receive the code?") }}
 					<a href="#" @click="resendCode">{{ __('Resend') }}</a>
 				</p>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
 import { call, Dialog } from 'frappe-ui'
 import { showToast } from '@/utils'
 const show = defineModel()
 const code = ref('')
 const props = defineProps({
 	email: {
 		type: String,
 		required: true,
 	},
 })
 const verifyCode = (close) => {
 	if (!code.value) {
 		return
 	}
 	call(
 		'frappe.integrations.frappe_providers.frappecloud_billing.verify_verification_code',
 		{
 			verification_code: code.value,
 			route: window.route,
 		}
 	)
 		.then((data) => {
 			if (data.message.login_token) {
 				close()
 				window.open(
 					`${frappeCloudBaseEndpoint}/api/method/press.api.developer.saas.login_to_fc?token=${data.message.login_token}`,
 					'_blank'
 				)
 				showToast(
 					__('Frappe Cloud Login Successful'),
 					`<p>${__('You will be redirected to Frappe Cloud soon.')}</p><p>${__(
 						"If you haven't been redirected,"
 					)} <a href="${frappeCloudBaseEndpoint}/api/method/press.api.developer.saas.login_to_fc?token=${
 						data.message.login_token
 					}" target="_blank">${__('Click here to login')}</a></p>`,
 					'check'
 				)
 			} else {
 				showToast(__('Login failed'), __('Please try again'), 'x')
 			}
 		})
 		.catch((err) => {
 			showToast(__('Login failed'), __('Please try again'), 'x')
 		})
 }
 const resendCode = () => {
 	call(
 		'frappe.integrations.frappe_providers.frappecloud_billing.send_verification_code'
 	).catch((err) => {
 		showToast(__('Failed to resend code'), __('Please try again'), 'x')
 	})
 }
 </script>
--- a/frontend/src/components/Modals/JobApplicationModal.vue
+++ b/frontend/src/components/Modals/JobApplicationModal.vue
@@ -48,13 +48,13 @@
 				</div>
 				<div v-else class="flex items-center">
 					<div class="border rounded-md p-2 mr-2">
-						<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+						<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
 					</div>
 					<div class="flex flex-col">
 						<span>
 							{{ resume.file_name }}
 						</span>
-						<span class="text-sm text-gray-500 mt-1">
+						<span class="text-sm text-ink-gray-4 mt-1">
 							{{ getFileSize(resume.file_size) }}
 						</span>
 					</div>
@@ -66,7 +66,7 @@
 <script setup>
 import { Dialog, FileUploader, Button, createResource } from 'frappe-ui'
 import { FileText } from 'lucide-vue-next'
-import { ref, inject, defineModel } from 'vue'
+import { ref, inject } from 'vue'
 import { createToast, getFileSize } from '@/utils/'
 const resume = ref(null)
@@ -116,7 +116,7 @@ const submitResume = (close) => {
 					title: 'Success',
 					text: 'Your application has been submitted',
 					icon: 'check',
-					iconClasses: 'bg-green-600 text-white rounded-md p-px',
+					iconClasses: 'bg-surface-green-3 text-ink-white rounded-md p-px',
 				})
 				application.value.reload()
 				close()
@@ -126,7 +126,7 @@ const submitResume = (close) => {
 					title: 'Error',
 					text: err.messages?.[0] || err,
 					icon: 'x',
-					iconClasses: 'bg-red-600 text-white rounded-md p-px',
+					iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
 					position: 'top-center',
 					timeout: 10,
 				})
--- a/frontend/src/components/Modals/LiveClassModal.vue
+++ b/frontend/src/components/Modals/LiveClassModal.vue
@@ -200,7 +200,7 @@ const submitLiveClass = (close) => {
 				title: 'Error',
 				text: err.messages?.[0] || err,
 				icon: 'x',
-				iconClasses: 'bg-red-600 text-white rounded-md p-px',
+				iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
 				position: 'top-center',
 				timeout: 10,
 			})
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -4,7 +4,7 @@
 			<div class="space-y-4">
 				<div
 					v-if="!editMode"
-					class="flex items-center text-xs text-gray-700 space-x-5"
+					class="flex items-center text-xs text-ink-gray-7 space-x-5"
 				>
 					<div class="flex items-center space-x-2">
 						<input
@@ -34,7 +34,7 @@
 				</div>
 				<div v-if="questionType == 'new' || editMode" class="space-y-2">
 					<div>
-						<label class="block text-xs text-gray-600 mb-1">
+						<label class="block text-xs text-ink-gray-5 mb-1">
 							{{ __('Question') }}
 						</label>
 						<TextEditor
@@ -42,7 +42,7 @@
 							@change="(val) => (question.question = val)"
 							:editable="true"
 							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
+							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 						/>
 					</div>
 					<FormControl
--- a/frontend/src/components/Modals/ReviewModal.vue
+++ b/frontend/src/components/Modals/ReviewModal.vue
@@ -16,13 +16,13 @@
 		<template #body-content>
 			<div class="flex flex-col gap-4">
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Rating') }}
 					</div>
 					<Rating v-model="review.rating" />
 				</div>
 				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
+					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Review') }}
 					</div>
 					<Textarea type="text" size="md" rows="5" v-model="review.review" />
@@ -33,7 +33,7 @@
 </template>
 <script setup>
 import { Dialog, Textarea, createResource } from 'frappe-ui'
-import { defineModel, reactive } from 'vue'
+import { reactive } from 'vue'
 import Rating from '@/components/Controls/Rating.vue'
 import { createToast } from '@/utils/'
@@ -81,7 +81,7 @@ function submitReview(close) {
 			createToast({
 				text: err.messages?.[0] || err,
 				icon: 'x',
-				iconClasses: 'text-red-600 bg-red-300',
+				iconClasses: 'text-ink-red-4 bg-surface-red-4',
 			})
 		},
 	})
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -2,14 +2,14 @@
 	<Dialog v-model="show" :options="{ size: '4xl' }">
 		<template #body>
 			<div class="flex h-[calc(100vh_-_8rem)]">
-				<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
+				<div class="flex w-52 shrink-0 flex-col bg-surface-gray-2 p-2">
-					<h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
+					<h1 class="mb-3 px-2 pt-2 text-lg font-semibold text-ink-gray-9">
 						{{ __('Settings') }}
 					</h1>
 					<div v-for="tab in tabs" :key="tab.label">
 						<div
 							v-if="!tab.hideLabel"
-							class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
+							class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
 						>
 							<span>{{ __(tab.label) }}</span>
 						</div>
@@ -21,8 +21,8 @@
 								class="w-full"
 								:class="
 									activeTab?.label == item.label
-										? 'bg-white shadow-sm'
+										? 'bg-surface-selected shadow-sm'
-										: 'hover:bg-gray-100'
+										: 'hover:bg-surface-gray-2'
 								"
 								@click="activeTab = item"
 							/>
@@ -32,7 +32,7 @@
 				<div
 					v-if="activeTab && data.doc"
 					:key="activeTab.label"
-					class="flex flex-1 flex-col px-10 py-8"
+					class="flex flex-1 flex-col px-10 py-8 bg-surface-modal"
 				>
 					<Members
 						v-if="activeTab.label === 'Members'"
@@ -118,6 +118,13 @@ const tabsStructure = computed(() => {
 								'This will enforce students to go through programs assigned to them in the correct order.',
 							type: 'checkbox',
 						},
 						{
 							label: 'Allow Guest Access',
 							name: 'allow_guest_access',
 							description:
 								'If enabled, users can access the course and batch lists without logging in.',
 							type: 'checkbox',
 						},
 						{
 							label: 'Send calendar invite for evaluations',
 							name: 'send_calendar_invite_for_evaluations',
@@ -130,7 +137,7 @@ const tabsStructure = computed(() => {
 							name: 'unsplash_access_key',
 							description:
 								'Optional. If this is set, students can pick a cover image from the unsplash library for their profile page. https://unsplash.com/documentation#getting-started.',
-							type: 'text',
+							type: 'password',
 						},
 					],
 				},
--- a/Show More
+++ b/Show More