chore: update POT file

2025-03-28 16:04:20 +00:00
160 changed files with 12278 additions and 29023 deletions
--- a/.github/workflows/linters.yml
+++ b/.github/workflows/linters.yml
@@ -7,27 +7,8 @@ on:
    branches: [ main ]

 jobs:
-  commit-lint:
-    name: 'Semantic Commits'
-    runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 200
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          check-latest: true
-
-      - name: Check commit titles
-        run: |
-          npm install @commitlint/cli @commitlint/config-conventional
-          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
-
  linters:
-    name: Semgrep Rules
+    name: Semantic Commits
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'

@@ -39,17 +20,8 @@ jobs:
        with:
          python-version: '3.10'

-      - name: Cache pip
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-            ${{ runner.os }}-
-
      - name: Install and Run Pre-commit
-        uses: pre-commit/action@v3.0.1
+        uses: pre-commit/action@v2.0.3

      - name: Download Semgrep rules
        run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules
--- a/.github/workflows/make_release_pr.yml
+++ b/.github/workflows/make_release_pr.yml
@@ -1,7 +1,8 @@
 name: Create weekly release
 on:
  schedule:
-    - cron: '30 4 15 * *'
+    # 13:00 UTC -> 7pm IST on every Wednesday
+    - cron: '30 4 * * 3'
  workflow_dispatch:

 jobs:
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -70,7 +70,7 @@ jobs:
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT

-      - uses: actions/cache@v4
+      - uses: actions/cache@v3
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
            ${{ runner.os }}-yarn-ui-

      - name: Cache cypress binary
-        uses: actions/cache@v4
+        uses: actions/cache@v3
        with:
          path: ~/.cache/Cypress
          key: ${{ runner.os }}-cypress
@@ -100,12 +100,11 @@ jobs:
          bench --site lms.test execute frappe.utils.install.complete_setup_wizard
          bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
          bench --site lms.test set-password frappe@example.com admin
-          bench --site lms.test execute lms.lms.utils.persona_captured

      - name: cypress pre-requisites
        run: |
          cd ~/frappe-bench/apps/lms
-          yarn add cypress@^10 --no-lockfile -W
+          yarn add cypress@^10 --no-lockfile

      - name: UI Tests
        run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,26 +0,0 @@
-export default {
-	parserPreset: "conventional-changelog-conventionalcommits",
-	rules: {
-		"subject-empty": [2, "never"],
-		"type-case": [2, "always", "lower-case"],
-		"type-empty": [2, "never"],
-		"type-enum": [
-			2,
-			"always",
-			[
-				"build",
-				"chore",
-				"ci",
-				"docs",
-				"feat",
-				"fix",
-				"perf",
-				"refactor",
-				"revert",
-				"style",
-				"test",
-				"deprecate", // deprecation decision
-			],
-		],
-	},
-};
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -1,6 +1,6 @@
-import { defineConfig } from "cypress";
+const { defineConfig } = require("cypress");

-export default defineConfig({
+module.exports = defineConfig({
 	projectId: "vandxn",
 	adminPassword: "admin",
 	testUser: "frappe@example.com",
@@ -13,6 +13,6 @@ export default defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://pertest:8000",
+		baseUrl: "http://testui:8000",
 	},
 });
--- a/cypress/e2e/course_creation.cy.js
+++ b/cypress/e2e/course_creation.cy.js
@@ -19,16 +19,12 @@ describe("Course Creation", () => {
 		);

 		cy.fixture("profile.png", "base64").then((fileContent) => {
-			cy.get("div")
-				.contains("Course Image")
-				.siblings("div")
-				.children('input[type="file"]')
-				.attachFile({
-					fileContent,
-					fileName: "profile.png",
-					mimeType: "image/png",
-					encoding: "base64",
-				});
+			cy.get('input[type="file"]').attachFile({
+				fileContent,
+				fileName: "profile.png",
+				mimeType: "image/png",
+				encoding: "base64",
+			});
 		});

 		cy.get("label")
--- a/docker/init.sh
+++ b/docker/init.sh
@@ -16,9 +16,9 @@ cd frappe-bench

 # Use containers instead of localhost
 bench set-mariadb-host mariadb
-bench set-redis-cache-host redis://redis:6379
-bench set-redis-queue-host redis://redis:6379
-bench set-redis-socketio-host redis://redis:6379
+bench set-redis-cache-host redis:6379
+bench set-redis-queue-host redis:6379
+bench set-redis-socketio-host redis:6379

 # Remove redis, watch from Procfile
 sed -i '/redis/d' ./Procfile
--- a/1
+++ b/1
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -16,7 +16,6 @@ declare module 'vue' {
    AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
    Assessments: typeof import('./src/components/Assessments.vue')['default']
    Assignment: typeof import('./src/components/Assignment.vue')['default']
-    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
    BatchCard: typeof import('./src/components/BatchCard.vue')['default']
@@ -47,7 +46,6 @@ declare module 'vue' {
    Discussions: typeof import('./src/components/Discussions.vue')['default']
    EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
    EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
-    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
    EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
    Evaluators: typeof import('./src/components/Evaluators.vue')['default']
    Event: typeof import('./src/components/Modals/Event.vue')['default']
@@ -70,9 +68,9 @@ declare module 'vue' {
    NoPermission: typeof import('./src/components/NoPermission.vue')['default']
    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
    NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
+    OnboardingBanner: typeof import('./src/components/OnboardingBanner.vue')['default']
    PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
    PaymentSettings: typeof import('./src/components/PaymentSettings.vue')['default']
-    Play: typeof import('./src/components/Icons/Play.vue')['default']
    ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
    Question: typeof import('./src/components/Modals/Question.vue')['default']
    Quiz: typeof import('./src/components/Quiz.vue')['default']
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="{{ favicon }}" />
+		<link rel="icon" href="{{ favicon or '/assets/lms/frontend/favicon.png' }}" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>{{ title }}</title>
+		<title>Frappe Learning</title>
 		<meta name="title" content="{{ meta.title }}" />
 		<meta name="image" content="{{ meta.image }}" />
 		<meta name="description" content="{{ meta.description }}" />
@@ -23,10 +23,26 @@
 				<p>
 					{{ meta.description }}
 				</p>
+				<p>
+					The content here is just for seo purposes. The actual content will be loaded in a few seconds.
+				</p>
+				<p>
+					Seo checks if a page has more than 300 words. So, here are some more words to make it more than 300 words.
+					Page descriptions are the HTML meta tags that provide a brief summary of a web page.
+					Search engines use meta descriptions to help identify the page's topic - they don't use them to rank the page, but they do use them to determine whether or not to display the page in search results.
+					Meta descriptions are important because they're often the first thing people see when they're deciding which search result to click on.
+					They're also important because they can help improve your click-through rate (CTR) from search results.
+					A good meta description can entice people to click on your page instead of someone else's.
+				</p>
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
+		<div id="modals"></div>
+		<div id="popovers"></div>
+
 		<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
@@ -2,7 +2,6 @@
  "name": "frappe-ui-frontend",
  "private": true,
  "version": "0.0.0",
-  "type": "module",
  "scripts": {
    "dev": "vite",
    "serve": "vite preview",
@@ -27,12 +26,11 @@
    "codemirror-editor-vue3": "^2.8.0",
    "dayjs": "^1.11.6",
    "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.143",
+    "frappe-ui": "^0.1.122",
    "highlight.js": "^11.11.1",
    "lucide-vue-next": "^0.383.0",
    "markdown-it": "^14.0.0",
    "pinia": "^2.0.33",
-    "plyr": "^3.7.8",
    "socket.io-client": "^4.7.2",
    "tailwindcss": "3.4.15",
    "typescript": "^5.7.2",
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},
--- a/frontend/public/learning.svg
+++ b/frontend/public/learning.svg
@@ -1,4 +0,0 @@
-<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z" fill="#0E7159"/>
-<path d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z" fill="white"/>
-</svg>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,12 @@
 <template>
-	<FrappeUIProvider>
-		<Layout>
-			<router-view />
-		</Layout>
-		<Dialogs />
-	</FrappeUIProvider>
+	<Layout>
+		<router-view />
+	</Layout>
+	<Dialogs />
+	<Toasts />
 </template>
 <script setup>
-import { FrappeUIProvider } from 'frappe-ui'
+import { Toasts } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
@@ -25,7 +24,7 @@ const router = useRouter()
 const noSidebar = ref(false)

 router.beforeEach((to, from, next) => {
-	if (to.query.fromLesson || to.path === '/persona') {
+	if (to.query.fromLesson) {
 		noSidebar.value = true
 	} else {
 		noSidebar.value = false
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -39,11 +39,7 @@
 							{{ __('More') }}
 						</span>
 					</div>
-					<Button
-						v-if="isModerator && !readOnlyMode"
-						variant="ghost"
-						@click="openPageModal()"
-					>
+					<Button v-if="isModerator" variant="ghost" @click="openPageModal()">
 						<template #icon>
 							<Plus class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
 						</template>
@@ -67,16 +63,6 @@
 			</div>
 		</div>
 		<div class="m-2 flex flex-col gap-1">
-			<div
-				v-if="readOnlyMode && !sidebarStore.isSidebarCollapsed"
-				class="z-10 m-2 bg-surface-modal py-2.5 px-3 text-xs text-ink-gray-7 leading-5 rounded-md"
-			>
-				{{
-					__(
-						'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
-					)
-				}}
-			</div>
 			<TrialBanner
 				v-if="
 					userResource.data?.is_system_manager && userResource.data?.is_fc_site
@@ -88,69 +74,43 @@
 				:isSidebarCollapsed="sidebarStore.isSidebarCollapsed"
 				appName="learning"
 			/>
-
-			<div
-				class="flex items-center mt-4"
-				:class="
-					sidebarStore.isSidebarCollapsed ? 'flex-col space-y-3' : 'flex-row'
+			<SidebarLink
+				v-if="isOnboardingStepsCompleted"
+				:link="{
+					label: __('Help'),
+				}"
+				:isCollapsed="sidebarStore.isSidebarCollapsed"
+				@click="
+					() => {
+						showHelpModal = minimize ? true : !showHelpModal
+						minimize = !showHelpModal
+					}
 				"
 			>
-				<div
-					class="flex items-center flex-1"
-					:class="
-						sidebarStore.isSidebarCollapsed
-							? 'flex-col space-y-3'
-							: 'flex-row space-x-3'
-					"
-				>
-					<Tooltip v-if="readOnlyMode && sidebarStore.isSidebarCollapsed">
-						<CircleAlert
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
+				<template #icon>
+					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+						<CircleHelp class="h-4 w-4 stroke-1.5" />
+					</span>
+				</template>
+			</SidebarLink>
+			<SidebarLink
+				:link="{
+					label: sidebarStore.isSidebarCollapsed ? 'Expand' : 'Collapse',
+				}"
+				:isCollapsed="sidebarStore.isSidebarCollapsed"
+				@click="toggleSidebar()"
+			>
+				<template #icon>
+					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
+						<CollapseSidebar
+							class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
+							:class="{
+								'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
+							}"
 						/>
-						<template #body>
-							<div
-								class="max-w-[30ch] rounded bg-surface-gray-7 px-2 py-1 text-center text-p-xs text-ink-white shadow-xl"
-							>
-								{{
-									__(
-										'This site is being updated. You will not be able to make any changes. Full access will be restored shortly.'
-									)
-								}}
-							</div>
-						</template>
-					</Tooltip>
-					<Tooltip :text="__('Powered by Learning')">
-						<Zap
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
-							@click="redirectToWebsite()"
-						/>
-					</Tooltip>
-					<Tooltip v-if="showOnboarding" :text="__('Help')">
-						<CircleHelp
-							class="size-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
-							@click="
-								() => {
-									showHelpModal = minimize ? true : !showHelpModal
-									minimize = !showHelpModal
-								}
-							"
-						/>
-					</Tooltip>
-				</div>
-				<Tooltip
-					:text="
-						sidebarStore.isSidebarCollapsed ? __('Expand') : __('Collapse')
-					"
-				>
-					<CollapseSidebar
-						class="size-4 text-ink-gray-7 duration-300 stroke-1.5 ease-in-out cursor-pointer"
-						:class="{
-							'[transform:rotateY(180deg)]': sidebarStore.isSidebarCollapsed,
-						}"
-						@click="toggleSidebar()"
-					/>
-				</Tooltip>
-			</div>
+					</span>
+				</template>
+			</SidebarLink>
 		</div>
 		<HelpModal
 			v-if="showOnboarding && showHelpModal"
@@ -188,7 +148,7 @@ import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
-import { Button, createResource, Tooltip } from 'frappe-ui'
+import { Button, createResource } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 import { capture } from '@/telemetry'
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
@@ -196,7 +156,6 @@ import { useRouter } from 'vue-router'
 import InviteIcon from './Icons/InviteIcon.vue'
 import {
 	BookOpen,
-	CircleAlert,
 	ChevronRight,
 	Plus,
 	CircleHelp,
@@ -205,7 +164,6 @@ import {
 	UserPlus,
 	Users,
 	BookText,
-	Zap,
 } from 'lucide-vue-next'
 import {
 	TrialBanner,
@@ -234,7 +192,6 @@ const currentStep = ref({})
 const router = useRouter()
 let onboardingDetails
 let isOnboardingStepsCompleted = false
-const readOnlyMode = window.read_only_mode
 const iconProps = {
 	strokeWidth: 1.5,
 	width: 16,
@@ -621,8 +578,4 @@ watch(userResource, () => {
 		setUpOnboarding()
 	}
 })
-
-const redirectToWebsite = () => {
-	window.open('https://frappe.io/learning', '_blank')
-}
 </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-ink-gray-7 hover:bg-surface-gray-2',
+					'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()"
 			>
--- a/frontend/src/components/Assessments.vue
+++ b/frontend/src/components/Assessments.vue
@@ -4,7 +4,7 @@
 			<div class="text-lg font-semibold text-ink-gray-9">
 				{{ __('Assessments') }}
 			</div>
-			<Button v-if="canAddAssessments()" @click="showModal = true">
+			<Button v-if="canSeeAddButton()" @click="showModal = true">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -100,7 +100,6 @@ import { Plus, Trash2 } from 'lucide-vue-next'

 const user = inject('$user')
 const showModal = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	batch: {
@@ -182,8 +181,7 @@ const getRowRoute = (row) => {
 	}
 }

-const canAddAssessments = () => {
-	if (readOnlyMode) return false
+const canSeeAddButton = () => {
 	return user.data?.is_moderator || user.data?.is_evaluator
 }

--- a/frontend/src/components/Assignment.vue
+++ b/frontend/src/components/Assignment.vue
@@ -191,11 +191,10 @@ import {
 	FileUploader,
 	FormControl,
 	TextEditor,
-	toast,
 } from 'frappe-ui'
 import { computed, inject, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize } from '@/utils'
+import { showToast, getFileSize } from '@/utils'
 import { useRouter } from 'vue-router'

 const submissionFile = ref(null)
@@ -285,7 +284,7 @@ const submissionResource = createDocumentResource({
 	doctype: 'LMS Assignment Submission',
 	name: props.submissionName,
 	onError(err) {
-		toast.error(err.messages?.[0] || err)
+		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 	},
 	auto: false,
 	cache: [user.data?.name, props.assignmentID],
@@ -339,7 +338,7 @@ const submitAssignment = () => {
 			},
 			{
 				onSuccess(data) {
-					toast.success(__('Changes saved successfully'))
+					showToast(__('Success'), __('Changes saved successfully'), 'check')
 				},
 			}
 		)
@@ -353,7 +352,7 @@ const addNewSubmission = () => {
 		{},
 		{
 			onSuccess(data) {
-				toast.success(__('Assignment submitted successfully'))
+				showToast('Success', 'Assignment submitted successfully.', 'check')
 				if (router.currentRoute.value.name == 'AssignmentSubmission') {
 					router.push({
 						name: 'AssignmentSubmission',
@@ -371,7 +370,7 @@ const addNewSubmission = () => {
 				submissionResource.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col border hover:border-outline-gray-4 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 text-ink-gray-9">
--- a/frontend/src/components/BatchCourses.vue
+++ b/frontend/src/components/BatchCourses.vue
@@ -86,10 +86,9 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	toast,
 } from 'frappe-ui'
 import { Plus, Trash2 } from 'lucide-vue-next'
-const readOnlyMode = window.read_only_mode
+import { showToast } from '@/utils'

 const showCourseModal = ref(false)
 const user = inject('$user')
@@ -152,7 +151,7 @@ const removeCourses = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				courses.reload()
-				toast.success(__('Courses deleted successfully'))
+				showToast(__('Success'), __('Courses deleted successfully'), 'check')
 				unselectAll()
 			},
 		}
@@ -160,9 +159,6 @@ const removeCourses = (selections, unselectAll) => {
 }

 const canSeeAddButton = () => {
-	if (readOnlyMode) {
-		return false
-	}
 	return user.data?.is_moderator || user.data?.is_evaluator
 }
 </script>
--- a/frontend/src/components/BatchFeedback.vue
+++ b/frontend/src/components/BatchFeedback.vue
@@ -111,6 +111,7 @@ import {
 	FormControl,
 	ListView,
 	ListHeader,
+	ListHeaderItem,
 	ListRows,
 	ListRow,
 	ListRowItem,
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -2,12 +2,7 @@
 	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
 		<div
 			v-if="batch.data.seat_count && seats_left > 0"
-			class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
-			:class="
-				batch.data.amount || batch.data.courses.length
-					? 'float-right'
-					: 'w-fit mb-4'
-			"
+			class="text-xs bg-green-100 text-green-700 float-right px-2 py-0.5 rounded-md"
 		>
 			{{ seats_left }}
 			<span v-if="seats_left > 1">
@@ -29,10 +24,7 @@
 		>
 			{{ formatNumberIntoCurrency(batch.data.amount, batch.data.currency) }}
 		</div>
-		<div
-			v-if="batch.data.courses.length"
-			class="flex items-center mb-3 text-ink-gray-7"
-		>
+		<div class="flex items-center mb-3 text-ink-gray-7">
 			<BookOpen class="h-4 w-4 stroke-1.5 mr-2" />
 			<span> {{ batch.data.courses.length }} {{ __('Courses') }} </span>
 		</div>
@@ -54,83 +46,81 @@
 				{{ batch.data.timezone }}
 			</span>
 		</div>
-		<div v-if="!readOnlyMode">
-			<router-link
-				v-if="isModerator || isStudent"
-				:to="{
-					name: 'Batch',
-					params: {
-						batchName: batch.data.name,
-					},
-				}"
-			>
-				<Button variant="solid" class="w-full mt-4">
-					<span>
-						{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
-					</span>
-				</Button>
-			</router-link>
-			<router-link
-				:to="{
-					name: 'Billing',
-					params: {
-						type: 'batch',
-						name: batch.data.name,
-					},
-				}"
-				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>
-						{{ __('Register Now') }}
-					</span>
-				</Button>
-			</router-link>
-			<Button
-				variant="solid"
-				class="w-full mt-2"
-				v-else-if="
-					batch.data.allow_self_enrollment &&
-					batch.data.seats_left &&
-					batch.data.accept_enrollments
-				"
-				@click="enrollInBatch()"
-			>
-				{{ __('Enroll Now') }}
+		<router-link
+			v-if="isModerator || isStudent"
+			:to="{
+				name: 'Batch',
+				params: {
+					batchName: batch.data.name,
+				},
+			}"
+		>
+			<Button variant="solid" class="w-full mt-4">
+				<span>
+					{{ isModerator ? __('Manage Batch') : __('Visit Batch') }}
+				</span>
 			</Button>
-			<router-link
-				v-if="isModerator"
-				:to="{
-					name: 'BatchForm',
-					params: {
-						batchName: batch.data.name,
-					},
-				}"
-			>
-				<Button class="w-full mt-2">
-					<span>
-						{{ __('Edit') }}
-					</span>
-				</Button>
-			</router-link>
-		</div>
+		</router-link>
+		<router-link
+			:to="{
+				name: 'Billing',
+				params: {
+					type: 'batch',
+					name: batch.data.name,
+				},
+			}"
+			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>
+					{{ __('Register Now') }}
+				</span>
+			</Button>
+		</router-link>
+		<Button
+			variant="solid"
+			class="w-full mt-2"
+			v-else-if="
+				batch.data.allow_self_enrollment &&
+				batch.data.seats_left &&
+				batch.data.accept_enrollments
+			"
+			@click="enrollInBatch()"
+		>
+			{{ __('Enroll Now') }}
+		</Button>
+		<router-link
+			v-if="isModerator"
+			:to="{
+				name: 'BatchForm',
+				params: {
+					batchName: batch.data.name,
+				},
+			}"
+		>
+			<Button class="w-full mt-2">
+				<span>
+					{{ __('Edit') }}
+				</span>
+			</Button>
+		</router-link>
 	</div>
 </template>
 <script setup>
 import { inject, computed } from 'vue'
-import { Badge, Button, createResource, toast } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
 import { BookOpen, Clock, Globe } from 'lucide-vue-next'
-import { formatNumberIntoCurrency, formatTime } from '@/utils'
+import { formatNumberIntoCurrency, formatTime, showToast } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'
 import { useRouter } from 'vue-router'

 const router = useRouter()
 const user = inject('$user')
-const readOnlyMode = window.read_only_mode
+const dayjs = inject('$dayjs')

 const props = defineProps({
 	batch: {
@@ -156,7 +146,11 @@ const enrollInBatch = () => {
 		{},
 		{
 			onSuccess(data) {
-				toast.success(__('You have been enrolled in this batch'))
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this batch'),
+					'check'
+				)
 				router.push({
 					name: 'Batch',
 					params: {
--- a/frontend/src/components/BatchStudents.vue
+++ b/frontend/src/components/BatchStudents.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="batch.data" class="">
+	<div class="">
 		<div class="w-full flex items-center justify-between pb-4">
 			<div class="font-medium text-ink-gray-7">
 				{{ __('Statistics') }}
@@ -46,7 +46,7 @@
 				</div>
 				<div class="flex items-center space-x-2">
 					<span class="font-semibold">
-						{{ batch.data.courses?.length }}
+						{{ batch.courses?.length }}
 					</span>
 					<span>
 						{{ __('Courses') }}
@@ -110,7 +110,7 @@
 			<div class="text-ink-gray-7 font-medium">
 				{{ __('Students') }}
 			</div>
-			<Button v-if="!readOnlyMode" @click="openStudentModal()">
+			<Button @click="openStudentModal()">
 				<template #prefix>
 					<Plus class="h-4 w-4" />
 				</template>
@@ -201,10 +201,9 @@
 	</div>

 	<StudentModal
-		:batch="props.batch.data.name"
+		:batch="props.batch.name"
 		v-model="showStudentModal"
 		v-model:reloadStudents="students"
-		v-model:batchModal="props.batch"
 	/>
 	<BatchStudentProgress
 		:student="selectedStudent"
@@ -224,7 +223,6 @@ import {
 	ListRows,
 	ListView,
 	ListRowItem,
-	toast,
 } from 'frappe-ui'
 import {
 	BookOpen,
@@ -236,6 +234,7 @@ import {
 } 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'
@@ -248,7 +247,6 @@ const chartData = ref(null)
 const chartOptions = ref(null)
 const showProgressChart = ref(false)
 const assessmentCount = ref(0)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	batch: {
@@ -259,15 +257,15 @@ const props = defineProps({

 const students = createResource({
 	url: 'lms.lms.utils.get_batch_students',
+	cache: ['students', props.batch.name],
 	params: {
-		batch: props.batch?.data?.name,
+		batch: props.batch?.name,
 	},
 	auto: true,
 	onSuccess(data) {
 		chartData.value = getChartData()
 		showProgressChart.value =
-			data.length &&
-			(props.batch?.data?.courses?.length || assessmentCount.value)
+			data.length && (props.batch?.courses?.length || assessmentCount.value)
 	},
 })

@@ -324,8 +322,7 @@ const removeStudents = (selections, unselectAll) => {
 		{
 			onSuccess(data) {
 				students.reload()
-				props.batch.reload()
-				toast.success(__('Students deleted successfully'))
+				showToast(__('Success'), __('Students deleted successfully'), 'check')
 				unselectAll()
 			},
 		}
@@ -436,7 +433,7 @@ const certificationCount = createResource({
 	params: {
 		doctype: 'LMS Certificate',
 		filters: {
-			batch_name: props.batch?.data?.name,
+			batch_name: props.batch.name,
 		},
 	},
 	auto: true,
--- a/frontend/src/components/Categories.vue
+++ b/frontend/src/components/Categories.vue
@@ -5,11 +5,10 @@
 				{{ label }}
 			</div>
 			<Button @click="() => showCategoryForm()">
-				<template #prefix>
+				<template #icon>
 					<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
 					<X v-else class="h-3 w-3 stroke-1.5" />
 				</template>
-				{{ showForm ? __('Close') : __('New') }}
 			</Button>
 		</div>

@@ -29,11 +28,12 @@
 		</div>

 		<div class="overflow-y-scroll">
-			<div class="text-base space-y-2">
+			<div class="text-base divide-y space-y-2">
 				<FormControl
 					:value="cat.category"
 					type="text"
 					v-for="cat in categories.data"
+					class=""
 					@change.stop="(e) => update(cat.name, e.target.value)"
 				/>
 			</div>
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -28,7 +28,9 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2">
+					<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"
@@ -47,7 +49,7 @@
 								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
 								@click="selectedValue = null"
 							>
-								<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
+								<X class="h-4 w-4 stroke-1.5" />
 							</button>
 						</div>
 						<ComboboxOptions
@@ -87,15 +89,12 @@
 											name="item-label"
 											v-bind="{ active, selected, option }"
 										>
-											<div class="flex flex-col space-y-1 text-ink-gray-8">
+											<div class="flex flex-col space-y-1">
 												<div>
 													{{ option.label }}
 												</div>
 												<div
-													v-if="
-														option.description &&
-														option.description != option.label
-													"
+													v-if="option.description"
 													class="text-xs text-ink-gray-7"
 													v-html="option.description"
 												></div>
--- a/frontend/src/components/Controls/CodeEditor.vue
+++ b/frontend/src/components/Controls/CodeEditor.vue
@@ -146,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) {
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -34,7 +34,7 @@
 					<Button
 						variant="ghost"
 						class="w-full !justify-start"
-						:label="__('Create New')"
+						label="Create New"
 						@click="attrs.onCreate(value, close)"
 					>
 						<template #prefix>
--- a/frontend/src/components/Controls/MultiSelect.vue
+++ b/frontend/src/components/Controls/MultiSelect.vue
@@ -4,91 +4,78 @@
 			{{ label }}
 			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
-		<div class="w-full">
-			<Combobox v-model="selectedValue" nullable>
-				<Popover class="w-full" v-model:show="showOptions">
-					<template #target="{ togglePopover }">
-						<ComboboxInput
-							ref="search"
-							class="search-input form-input w-full focus-visible:!ring-0"
-							type="text"
-							:value="query"
-							@change="
-								(e) => {
-									query = e.target.value
-									showOptions = true
-								}
-							"
-							autocomplete="off"
-							@focus="() => togglePopover()"
-							@keydown.delete.capture.stop="removeLastValue"
-						/>
-					</template>
-					<template #body="{ isOpen, close }">
-						<div v-show="isOpen">
-							<div
-								class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
-							>
-								<ComboboxOptions
-									class="my-1 min-h-[6rem] max-h-[12rem] overflow-y-auto px-1.5"
-									static
-								>
-									<ComboboxOption
-										v-for="option in options"
-										:key="option.value"
-										:value="option"
-										v-slot="{ active }"
-									>
-										<li
-											:class="[
-												'flex cursor-pointer items-center rounded px-2 py-1 text-base',
-												{ 'bg-surface-gray-2': active },
-											]"
-										>
-											<div class="flex flex-col gap-1 p-1">
-												<div class="text-base font-medium text-ink-gray-8">
-													{{ option.description }}
-												</div>
-												<div class="text-sm text-ink-gray-5">
-													{{ option.value }}
-												</div>
-											</div>
-										</li>
-									</ComboboxOption>
-									<div
-										v-if="attrs.onCreate"
-										class="absolute bottom-2 left-1 w-[98%] pt-2 bg-white border-t"
-									>
-										<Button
-											variant="ghost"
-											class="w-full !justify-start"
-											:label="__('Create New')"
-											@click="attrs.onCreate(close)"
-										>
-											<template #prefix>
-												<Plus class="h-4 w-4 stroke-1.5" />
-											</template>
-										</Button>
-									</div>
-								</ComboboxOptions>
-							</div>
-						</div>
-					</template>
-				</Popover>
-			</Combobox>
-		</div>
-		<div v-if="values.length" class="grid grid-cols-2 gap-2 mt-1">
-			<div
+		<div class="grid grid-cols-3 gap-1">
+			<Button
+				ref="emails"
 				v-for="value in values"
-				class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 word-wrap p-2 rounded-md mr-2"
+				:key="value"
+				:label="value"
+				theme="gray"
+				variant="subtle"
+				class="rounded-md"
+				@keydown.delete.capture.stop="removeLastValue"
 			>
-				<span class="break-all">
-					{{ value }}
-				</span>
-				<X
-					class="size-4 stroke-1.5 cursor-pointer"
-					@click="removeValue(value)"
-				/>
+				<template #suffix>
+					<X @click="removeValue(value)" class="h-4 w-4 stroke-1.5" />
+				</template>
+			</Button>
+			<div class="">
+				<Combobox v-model="selectedValue" nullable>
+					<Popover class="w-full" v-model:show="showOptions">
+						<template #target="{ togglePopover }">
+							<ComboboxInput
+								ref="search"
+								class="search-input form-input w-full focus-visible:!ring-0"
+								type="text"
+								:value="query"
+								@change="
+									(e) => {
+										query = e.target.value
+										showOptions = true
+									}
+								"
+								autocomplete="off"
+								@focus="() => togglePopover()"
+								@keydown.delete.capture.stop="removeLastValue"
+							/>
+						</template>
+						<template #body="{ isOpen }">
+							<div v-show="isOpen">
+								<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
+									>
+										<ComboboxOption
+											v-for="option in options"
+											:key="option.value"
+											:value="option"
+											v-slot="{ active }"
+										>
+											<li
+												:class="[
+													'flex cursor-pointer items-center rounded px-2 py-1 text-base',
+													{ '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-ink-gray-5">
+														{{ option.value }}
+													</div>
+												</div>
+											</li>
+										</ComboboxOption>
+									</ComboboxOptions>
+								</div>
+							</div>
+						</template>
+					</Popover>
+				</Combobox>
 			</div>
 		</div>
 		<!-- <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" /> -->
@@ -103,9 +90,9 @@ import {
 	ComboboxOption,
 } from '@headlessui/vue'
 import { createResource, Popover, Button } from 'frappe-ui'
-import { ref, computed, nextTick, useAttrs } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { watchDebounced } from '@vueuse/core'
-import { X, Plus } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'

 const props = defineProps({
 	label: {
@@ -137,7 +124,7 @@ const props = defineProps({
 })

 const values = defineModel()
-const attrs = useAttrs()
+
 const emails = ref([])
 const search = ref(null)
 const error = ref(null)
--- a/frontend/src/components/CourseCard.vue
+++ b/frontend/src/components/CourseCard.vue
@@ -9,20 +9,16 @@
 			:class="{ 'default-image': !course.image }"
 			:style="{ backgroundImage: 'url(\'' + encodeURI(course.image) + '\')' }"
 		>
-			<div class="flex items-center flex-wrap relative top-4 px-2 w-fit">
-				<Badge
-					v-if="course.featured"
-					variant="subtle"
-					theme="green"
-					size="md"
-					class="mb-1 mr-1"
-				>
+			<div
+				class="flex items-center flex-wrap space-x-1 relative top-4 px-2 w-fit"
+			>
+				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
 				<div
 					v-if="course.tags"
 					v-for="tag in course.tags?.split(', ')"
-					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md mb-1 mr-1"
+					class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md"
 				>
 					{{ tag }}
 				</div>
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -9,94 +9,88 @@
 			<div v-if="course.data.paid_course" class="text-2xl font-semibold mb-3">
 				{{ course.data.price }}
 			</div>
-			<div v-if="!readOnlyMode">
-				<div v-if="course.data.membership" class="space-y-2">
-					<router-link
-						:to="{
-							name: 'Lesson',
-							params: {
-								courseName: course.name,
-								chapterNumber: course.data.current_lesson
-									? course.data.current_lesson.split('-')[0]
-									: 1,
-								lessonNumber: course.data.current_lesson
-									? course.data.current_lesson.split('-')[1]
-									: 1,
-							},
-						}"
-					>
-						<Button variant="solid" size="md" class="w-full">
-							<span>
-								{{ __('Continue Learning') }}
-							</span>
-						</Button>
-					</router-link>
-					<CertificationLinks :courseName="course.data.name" class="w-full" />
-				</div>
+			<div v-if="course.data.membership" class="space-y-2">
 				<router-link
-					v-else-if="course.data.paid_course"
 					:to="{
-						name: 'Billing',
+						name: 'Lesson',
 						params: {
-							type: 'course',
-							name: course.data.name,
+							courseName: course.name,
+							chapterNumber: course.data.current_lesson
+								? course.data.current_lesson.split('-')[0]
+								: 1,
+							lessonNumber: course.data.current_lesson
+								? course.data.current_lesson.split('-')[1]
+								: 1,
 						},
 					}"
 				>
 					<Button variant="solid" size="md" class="w-full">
 						<span>
-							{{ __('Buy this course') }}
+							{{ __('Continue Learning') }}
 						</span>
 					</Button>
 				</router-link>
-				<Badge
-					v-else-if="course.data.disable_self_learning"
-					theme="blue"
-					size="lg"
-				>
-					{{ __('Contact the Administrator to enroll for this course.') }}
-				</Badge>
-				<Button
-					v-else
-					@click="enrollStudent()"
-					variant="solid"
-					class="w-full"
-					size="md"
-				>
+				<CertificationLinks :courseName="course.data.name" class="w-full" />
+			</div>
+			<router-link
+				v-else-if="course.data.paid_course"
+				:to="{
+					name: 'Billing',
+					params: {
+						type: 'course',
+						name: course.data.name,
+					},
+				}"
+			>
+				<Button variant="solid" size="md" class="w-full">
 					<span>
-						{{ __('Start Learning') }}
+						{{ __('Buy this course') }}
 					</span>
 				</Button>
-				<Button
-					v-if="canGetCertificate"
-					@click="fetchCertificate()"
-					variant="subtle"
-					class="w-full mt-2"
-					size="md"
-				>
-					{{ __('Get Certificate') }}
-				</Button>
-				<router-link
-					v-if="user?.data?.is_moderator || is_instructor()"
-					:to="{
-						name: 'CourseForm',
-						params: {
-							courseName: course.data.name,
-						},
-					}"
-				>
-					<Button variant="subtle" class="w-full mt-2" size="md">
-						<span>
-							{{ __('Edit') }}
-						</span>
-					</Button>
-				</router-link>
+			</router-link>
+			<div
+				v-else-if="course.data.disable_self_learning"
+				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>
+			<Button
+				v-else
+				@click="enrollStudent()"
+				variant="solid"
+				class="w-full"
+				size="md"
+			>
+				<span>
+					{{ __('Start Learning') }}
+				</span>
+			</Button>
+			<Button
+				v-if="canGetCertificate"
+				@click="fetchCertificate()"
+				variant="subtle"
+				class="w-full mt-2"
+				size="md"
+			>
+				{{ __('Get Certificate') }}
+			</Button>
+			<router-link
+				v-if="user?.data?.is_moderator || is_instructor()"
+				:to="{
+					name: 'CourseForm',
+					params: {
+						courseName: course.data.name,
+					},
+				}"
+			>
+				<Button variant="subtle" class="w-full mt-2" size="md">
+					<span>
+						{{ __('Edit') }}
+					</span>
+				</Button>
+			</router-link>
 			<div class="space-y-4">
-				<div
-					class="font-medium text-ink-gray-9"
-					:class="{ 'mt-8': !readOnlyMode }"
-				>
+				<div class="mt-8 font-medium text-ink-gray-9">
 					{{ __('This course has:') }}
 				</div>
 				<div class="flex items-center text-ink-gray-9">
@@ -146,15 +140,14 @@
 <script setup>
 import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Badge, Button, createResource, toast } from 'frappe-ui'
-import { formatAmount } from '@/utils/'
+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')
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	course: {
@@ -172,10 +165,14 @@ const video_link = computed(() => {

 function enrollStudent() {
 	if (!user.data) {
-		toast.success(__('You need to login first to enroll for this course'))
+		showToast(
+			__('Please Login'),
+			__('You need to login first to enroll for this course'),
+			'alert-circle'
+		)
 		setTimeout(() => {
 			window.location.href = `/login?redirect-to=${window.location.pathname}`
-		}, 1000)
+		}, 2000)
 	} else {
 		const enrollStudentResource = createResource({
 			url: 'lms.lms.doctype.lms_enrollment.lms_enrollment.create_membership',
@@ -188,7 +185,11 @@ function enrollStudent() {
 				capture('enrolled_in_course', {
 					course: props.course.data.name,
 				})
-				toast.success(__('You have been enrolled in this course'))
+				showToast(
+					__('Success'),
+					__('You have been enrolled in this course'),
+					'check'
+				)
 				setTimeout(() => {
 					router.push({
 						name: 'Lesson',
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="">
+	<div class="h-full">
 		<div
 			v-if="title && (outline.data?.length || allowEdit)"
 			class="flex items-center justify-between space-x-2 mb-4 px-2"
@@ -17,6 +17,9 @@
 			<Button size="sm" v-if="allowEdit" @click="openChapterModal()">
 				{{ __('Add Chapter') }}
 			</Button>
+			<!-- <span class="font-medium cursor-pointer" @click="expandAllChapters()">
+				{{ expandAll ? __("Collapse all chapters") : __("Expand all chapters") }}
+			</span> -->
 		</div>
 		<div
 			:class="{
@@ -139,7 +142,6 @@
 		</div>
 	</div>
 	<ChapterModal
-		v-if="user.data"
 		v-model="showChapterModal"
 		v-model:outline="outline"
 		:course="courseName"
@@ -147,7 +149,7 @@
 	/>
 </template>
 <script setup>
-import { Button, createResource, Tooltip, toast } from 'frappe-ui'
+import { Button, createResource, Tooltip } from 'frappe-ui'
 import { getCurrentInstance, inject, ref } from 'vue'
 import Draggable from 'vuedraggable'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
@@ -162,6 +164,7 @@ import {
 } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
 import ChapterModal from '@/components/Modals/ChapterModal.vue'
+import { showToast } from '@/utils'

 const route = useRoute()
 const router = useRouter()
@@ -214,7 +217,7 @@ const deleteLesson = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		toast.success(__('Lesson deleted successfully'))
+		showToast('Success', 'Lesson deleted successfully', 'check')
 	},
 })

@@ -229,7 +232,7 @@ const updateLessonIndex = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Lesson moved successfully'))
+		showToast('Success', 'Lesson moved successfully', 'check')
 	},
 })

@@ -287,7 +290,7 @@ const deleteChapter = createResource({
 	},
 	onSuccess() {
 		outline.reload()
-		toast.success(__('Chapter deleted successfully'))
+		showToast('Success', 'Chapter deleted successfully', 'check')
 	},
 })

@@ -316,7 +319,11 @@ const redirectToChapter = (chapter) => {
 	event.preventDefault()
 	if (props.allowEdit) return
 	if (!user.data) {
-		toast.success(__('Please enroll for this course to view this lesson'))
+		showToast(
+			__('You are not enrolled'),
+			__('Please enroll for this course to view this lesson'),
+			'alert-circle'
+		)
 		return
 	}

--- a/frontend/src/components/DiscussionReplies.vue
+++ b/frontend/src/components/DiscussionReplies.vue
@@ -27,9 +27,7 @@
 						</span>
 					</div>
 					<Dropdown
-						v-if="
-							user.data.name == reply.owner && !reply.editable && !readOnlyMode
-						"
+						v-if="user.data.name == reply.owner && !reply.editable"
 						:options="[
 							{
 								label: 'Edit',
@@ -73,7 +71,7 @@
 		</div>

 		<TextEditor
-			v-if="renderEditor && !readOnlyMode"
+			v-if="renderEditor"
 			class="mt-5"
 			:content="newReply"
 			:mentions="mentionUsers"
@@ -82,7 +80,7 @@
 			: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-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 v-if="!readOnlyMode" class="flex justify-between mt-2">
+		<div class="flex justify-between mt-2">
 			<span> </span>
 			<Button @click="postReply()">
 				<span>
@@ -93,11 +91,12 @@
 	</div>
 </template>
 <script setup>
-import { createResource, TextEditor, Button, Dropdown, toast } from 'frappe-ui'
+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 } from 'vue'
+import { createToast } from '../utils'

 const showTopics = defineModel('showTopics')
 const newReply = ref('')
@@ -106,7 +105,6 @@ const user = inject('$user')
 const allUsers = inject('$allUsers')
 const mentionUsers = ref([])
 const renderEditor = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	topic: {
@@ -191,7 +189,14 @@ const postReply = () => {
 				replies.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				createToast({
+					title: 'Error',
+					text: err.messages?.[0] || err,
+					icon: 'x',
+					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
@@ -1,10 +1,6 @@
 <template>
 	<div>
-		<Button
-			v-if="!singleThread && !readOnlyMode"
-			class="float-right"
-			@click="openTopicModal()"
-		>
+		<Button v-if="!singleThread" class="float-right" @click="openTopicModal()">
 			{{ __('New {0}').format(singularize(title)) }}
 		</Button>
 		<div class="text-xl font-semibold text-ink-gray-9">
@@ -81,7 +77,6 @@ const currentTopic = ref(null)
 const socket = inject('$socket')
 const user = inject('$user')
 const showTopicModal = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	title: {
--- a/frontend/src/components/EmptyState.vue
+++ b/frontend/src/components/EmptyState.vue
@@ -1,24 +0,0 @@
-<template>
-	<div class="flex flex-col items-center justify-center mt-60">
-		<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
-		<div class="text-lg font-semibold text-ink-gray-7 mb-2.5">
-			{{ __('No {0}').format(type?.toLowerCase()) }}
-		</div>
-		<div
-			class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
-		>
-			{{
-				__(
-					'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
-				).format(type?.toLowerCase())
-			}}
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { BookOpen, GraduationCap } from 'lucide-vue-next'
-
-const props = defineProps({
-	type: String,
-})
-</script>
--- a/frontend/src/components/Evaluators.vue
+++ b/frontend/src/components/Evaluators.vue
@@ -17,11 +17,10 @@
 					:debounce="300"
 				/>
 				<Button @click="() => (showForm = !showForm)">
-					<template #prefix>
-						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
-						<X v-else class="size-4 stroke-1.5" />
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
 					</template>
-					{{ showForm ? __('Close') : __('New') }}
 				</Button>
 			</div>
 		</div>
@@ -98,7 +97,7 @@ const evaluators = createResource({
 		return {
 			doctype: 'Course Evaluator',
 			fields: ['evaluator', 'full_name', 'user_image', 'username'],
-			filters: search.value ? { evaluator: ['like', `%${search.value}%`] } : {},
+			filters: search.value ? [['evaluator', 'like', search.value]] : [],
 		}
 	},
 	auto: true,
--- a/frontend/src/components/Icons/LMSLogo.vue
+++ b/frontend/src/components/Icons/LMSLogo.vue
@@ -1,18 +1,36 @@
 <template>
 	<svg
-		width="80"
-		height="79"
-		viewBox="0 0 80 79"
+		width="118"
+		height="118"
+		viewBox="0 0 118 118"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
 	>
 		<path
-			d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z"
-			fill="#0E7159"
+			d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+			fill="url(#paint0_radial_174_336)"
 		/>
 		<path
-			d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z"
-			fill="white"
+			d="M93.9278 0H23.1013C10.3428 0 0 10.3428 0 23.1013V93.9278C0 106.686 10.3428 117.029 23.1013 117.029H93.9278C106.686 117.029 117.029 106.686 117.029 93.9278V23.1013C117.029 10.3428 106.686 0 93.9278 0Z"
+			fill="#0B3D3D"
+			fill-opacity="0.8"
 		/>
+		<path
+			d="M95.1879 33.1294L91.4077 32.0268C80.1721 28.7716 67.9389 30.9242 58.5409 37.7496C52.083 33.0769 43.9975 30.5042 36.1746 30.5042H21.8938V41.0048H36.2796C42.2649 41.0048 48.1978 42.9999 52.923 46.6226L58.5934 50.9279L64.2637 46.6226C70.144 42.1599 77.5469 40.2698 84.7923 41.2673V76.1818C75.5518 75.2367 66.2063 77.7044 58.6459 83.2172C51.0854 77.7044 41.6349 75.2367 32.4994 76.1818V52.8705H21.9988V86.4724H95.3454V33.1294H95.1879Z"
+			fill="#58FF9B"
+		/>
+		<defs>
+			<radialGradient
+				id="paint0_radial_174_336"
+				cx="0"
+				cy="0"
+				r="1"
+				gradientUnits="userSpaceOnUse"
+				gradientTransform="translate(117.24 -101.5) rotate(105.042) scale(226.282)"
+			>
+				<stop offset="0.445162" stop-color="#1F7676" />
+				<stop offset="1" stop-color="#0A4B4B" />
+			</radialGradient>
+		</defs>
 	</svg>
 </template>
--- a/frontend/src/components/Icons/Play.vue
+++ b/frontend/src/components/Icons/Play.vue
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		width="20"
-		height="20"
-		viewBox="0 0 68 75"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M0 6.78182C0 1.60212 5.5742 -1.65958 10.09 0.879521L64.09 31.2545C68.6916 33.8443 68.6916 40.4693 64.09 43.0595L10.09 73.4345C5.5744 75.9736 0 72.7119 0 67.5322V6.78182ZM26.2695 38.5201C26.2695 37.3248 25.2265 37.9342 26.2695 38.5201C27.332 39.1178 27.332 37.9225 26.2695 38.5201Z"
-			fill="white"
-		/>
-	</svg>
-</template>
--- a/frontend/src/components/JobCard.vue
+++ b/frontend/src/components/JobCard.vue
@@ -1,52 +1,41 @@
 <template>
-	<div
-		class="flex flex-col border rounded-md p-3 h-full hover:border-outline-gray-4"
-	>
-		<div class="flex space-x-4 mb-4">
-			<div class="flex flex-col space-y-2 flex-1">
-				<div class="text-lg font-semibold text-ink-gray-9">
-					{{ job.company_name }}
-				</div>
-				<span class="font-medium text-ink-gray-7 leading-5">
+	<div class="flex space-x-4 border rounded-md p-2">
+		<img :src="job.company_logo" class="size-10 rounded-full object-contain" />
+		<div class="flex flex-col space-y-2 flex-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-ink-gray-9">
 					{{ job.job_title }}
 				</span>
-				<div class="flex items-center space-x-1 text-sm text-ink-gray-7">
-					<MapPin class="size-3" />
-					<span>
-						{{ job.location }}{{ job.country ? `, ${job.country}` : '' }}
-					</span>
-				</div>
-				<div
-					v-if="job.applicants"
-					class="flex items-center space-x-1 text-sm text-ink-gray-7"
-				>
-					<User class="size-3" />
-					<span>
-						{{ job.applicants }}
-						{{ job.applicants > 1 ? __('applicants') : __('applicant') }}
-					</span>
-				</div>
 			</div>
-			<!-- <img :src="job.company_logo" alt="Company Logo" class="size-8  rounded-full object-contain  bg-white" /> -->
+			<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 class="flex items-center space-x-2 text-ink-gray-5">
+				<Shapes class="w-4 h-4 stroke-1.5" />
+				<span>
+					{{ job.type }}
+				</span>
+			</div>
+			<div class="flex items-center space-x-2 text-ink-gray-5">
+				<Calendar class="w-4 h-4 stroke-1.5" />
+				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
+			</div>
 		</div>
-		<div class="space-x-2 mt-auto">
-			<Badge>
-				{{ job.type }}
-			</Badge>
-			<Badge>
-				{{ dayjs(job.creation).fromNow() }}
-			</Badge>
-		</div>
-		<!-- <div
-			class="description text-ink-gray-9 text-sm"
-			v-html="job.description"
-		></div> -->
 	</div>
 </template>
 <script setup>
+import { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { inject } from 'vue'
-import { Badge } from 'frappe-ui'
-import { MapPin, User } from 'lucide-vue-next'
+import { Avatar } from 'frappe-ui'

 const dayjs = inject('$dayjs')
 const props = defineProps({
@@ -56,15 +45,3 @@ const props = defineProps({
 	},
 })
 </script>
-<style>
-.description {
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	text-overflow: ellipsis;
-	width: 100%;
-	overflow: hidden;
-	margin-top: auto;
-	line-height: 1.5;
-}
-</style>
--- a/frontend/src/components/LiveClass.vue
+++ b/frontend/src/components/LiveClass.vue
@@ -3,7 +3,7 @@
 		<div class="text-lg font-semibold text-ink-gray-9">
 			{{ __('Live Class') }}
 		</div>
-		<Button v-if="canCreateClass()" @click="openLiveClassModal">
+		<Button v-if="user.data.is_moderator" @click="openLiveClassModal">
 			<template #prefix>
 				<Plus class="h-4 w-4" />
 			</template>
@@ -87,7 +87,6 @@ import { formatTime } from '@/utils/'
 const user = inject('$user')
 const showLiveClassModal = ref(false)
 const dayjs = inject('$dayjs')
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	batch: {
@@ -117,11 +116,6 @@ const liveClasses = createListResource({
 const openLiveClassModal = () => {
 	showLiveClassModal.value = true
 }
-
-const canCreateClass = () => {
-	if (readOnlyMode) return false
-	return user.data?.is_moderator || user.data?.is_evaluator
-}
 </script>
 <style>
 .short-introduction {
--- a/frontend/src/components/Members.vue
+++ b/frontend/src/components/Members.vue
@@ -17,11 +17,10 @@
 					:debounce="300"
 				/>
 				<Button @click="() => (showForm = !showForm)">
-					<template #prefix>
-						<Plus v-if="!showForm" class="size-4 stroke-1.5" />
-						<X v-else class="size-4 stroke-1.5" />
+					<template #icon>
+						<Plus v-if="!showForm" class="h-3 w-3 stroke-1.5" />
+						<X v-else class="h-3 w-3 stroke-1.5" />
 					</template>
-					{{ showForm ? __('Close') : __('New') }}
 				</Button>
 			</div>
 		</div>
@@ -119,23 +118,6 @@ import { ref, watch, reactive, inject } from 'vue'
 import { RefreshCw, Plus, X } from 'lucide-vue-next'
 import { useOnboarding } from 'frappe-ui/frappe'

-interface User {
-	data: {
-		email: string
-		name: string
-		enabled: boolean
-		user_image: string
-		full_name: string
-		user_type: ['System User', 'Website User']
-		username: string
-		is_moderator: boolean
-		is_system_manager: boolean
-		is_evaluator: boolean
-		is_instructor: boolean
-		is_fc_site: boolean
-	}
-}
-
 const router = useRouter()
 const show = defineModel('show')
 const search = ref('')
@@ -144,7 +126,6 @@ const memberList = ref([])
 const hasNextPage = ref(false)
 const showForm = ref(false)
 const dayjs = inject('$dayjs')
-const user = inject<User | null>('$user')
 const { updateOnboardingStep } = useOnboarding('learning')

 const member = reactive({
@@ -206,9 +187,7 @@ const newMember = createResource({
 	auto: false,
 	onSuccess(data) {
 		show.value = false
-
-		if (user?.data?.is_system_manager) updateOnboardingStep('invite_students')
-
+		updateOnboardingStep('invite_students')
 		router.push({
 			name: 'Profile',
 			params: {
--- a/frontend/src/components/Modals/AnnouncementModal.vue
+++ b/frontend/src/components/Modals/AnnouncementModal.vue
@@ -31,7 +31,6 @@
 				<div class="mb-4">
 					<div class="mb-1.5 text-sm text-ink-gray-5">
 						{{ __('Announcement') }}
-						<span class="text-ink-red-3">*</span>
 					</div>
 					<TextEditor
 						:fixedMenu="true"
@@ -44,8 +43,9 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Input, TextEditor, createResource, toast } from 'frappe-ui'
+import { Dialog, Input, TextEditor, createResource } from 'frappe-ui'
 import { reactive } from 'vue'
+import { showToast } from '@/utils/'

 const show = defineModel()

@@ -87,21 +87,22 @@ const makeAnnouncement = (close) => {
 		{
 			validate() {
 				if (!props.students.length) {
-					return __('No students in this batch')
+					return 'No students in this batch'
 				}
 				if (!announcement.subject) {
-					return __('Subject is required')
-				}
-				if (!announcement.announcement) {
-					return __('Announcement is required')
+					return 'Subject is required'
 				}
 			},
 			onSuccess() {
 				close()
-				toast.success(__('Announcement has been sent successfully'))
+				showToast(
+					__('Success'),
+					__('Announcement has been sent successfully'),
+					'check'
+				)
 			},
 			onError(err) {
-				toast.error(__(err.messages?.[0] || err))
+				showToast(__('Error'), __(err.messages?.[0] || err), 'alert-circle')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/AssessmentModal.vue
+++ b/frontend/src/components/Modals/AssessmentModal.vue
@@ -25,39 +25,21 @@
 					v-model="assessment"
 					:doctype="assessmentType"
 					:label="__('Assessment')"
-					:onCreate="
-						(value, close) => {
-							close()
-							if (assessmentType === 'LMS Quiz') {
-								router.push({
-									name: 'QuizForm',
-									params: {
-										quizID: 'new',
-									},
-								})
-							} else if (assessmentType === 'LMS Assignment') {
-								router.push({
-									name: 'Assignments',
-								})
-							}
-						}
-					"
 				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, createResource, toast } from 'frappe-ui'
+import { Dialog, FormControl, createResource } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { showToast } from '@/utils'

 const show = defineModel()
 const assessmentType = ref(null)
 const assessment = ref(null)
 const assessments = defineModel('assessments')
-const router = useRouter()

 const props = defineProps({
 	batch: {
@@ -88,7 +70,7 @@ const addAssessment = (close) => {
 		{
 			onSuccess(data) {
 				assessments.value.reload()
-				toast.success(__('Assessment added successfully'))
+				showToast(__('Success'), __('Assessment added successfully'), 'check')
 				close()
 			},
 		}
--- a/frontend/src/components/Modals/AssignmentForm.vue
+++ b/frontend/src/components/Modals/AssignmentForm.vue
@@ -1,154 +0,0 @@
-<template>
-	<Dialog
-		v-model="show"
-		:options="{
-			size: 'lg',
-		}"
-	>
-		<template #body>
-			<div class="p-5 text-base max-h-[75vh] overflow-y-auto">
-				<div class="text-lg text-ink-gray-9 font-semibold mb-5">
-					{{
-						assignmentID === 'new'
-							? __('Create an Assignment')
-							: __('Edit Assignment')
-					}}
-				</div>
-				<div class="space-y-4">
-					<FormControl
-						v-model="assignment.title"
-						:label="__('Title')"
-						:required="true"
-					/>
-					<FormControl
-						v-model="assignment.type"
-						type="select"
-						:options="assignmentOptions"
-						:label="__('Submission Type')"
-						:required="true"
-					/>
-					<div>
-						<div class="text-xs text-ink-gray-5 mb-2">
-							{{ __('Question') }}
-							<span class="text-ink-red-3">*</span>
-						</div>
-						<TextEditor
-							:content="assignment.question"
-							@change="(val) => (assignment.question = val)"
-							:editable="true"
-							:fixedMenu="true"
-							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
-						/>
-					</div>
-				</div>
-
-				<div class="flex justify-end space-x-2 mt-5">
-					<router-link
-						:to="{
-							name: 'AssignmentSubmissionList',
-							query: {
-								assignmentID: assignmentID,
-							},
-						}"
-					>
-						<Button v-if="assignmentID !== 'new'" variant="subtle">
-							{{ __('Check Submissions') }}
-						</Button>
-					</router-link>
-					<Button variant="solid" @click="saveAssignment">
-						{{ __('Save') }}
-					</Button>
-				</div>
-			</div>
-		</template>
-	</Dialog>
-</template>
-<script setup lang="ts">
-import { Button, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
-import { computed, reactive, watch } from 'vue'
-
-const show = defineModel()
-const assignments = defineModel<Assignments>('assignments')
-
-interface Assignment {
-	title: string
-	type: string
-	question: string
-}
-
-interface Assignments {
-	data: Assignment[]
-	get: (params: { doctype: string; name: string }) => Promise<Assignment>
-	insert: {
-		submit: (params: Assignment, options: { onSuccess: () => void }) => void
-	}
-}
-
-const assignment = reactive({
-	title: '',
-	type: '',
-	question: '',
-})
-
-const props = defineProps({
-	assignmentID: {
-		type: String,
-		default: 'new',
-	},
-})
-
-watch(
-	() => props.assignmentID,
-	(val) => {
-		if (val !== 'new') {
-			assignments.value?.data.forEach((row) => {
-				if (row.name === val) {
-					assignment.title = row.title
-					assignment.type = row.type
-					assignment.question = row.question
-				}
-			})
-		}
-	},
-	{ flush: 'post' }
-)
-
-const saveAssignment = () => {
-	if (props.assignmentID == 'new') {
-		assignments.value.insert.submit(
-			{
-				...assignment,
-			},
-			{
-				onSuccess() {
-					show.value = false
-					toast.success(__('Assignment created successfully'))
-				},
-			}
-		)
-	} else {
-		assignments.value.setValue.submit(
-			{
-				...assignment,
-				name: props.assignmentID,
-			},
-			{
-				onSuccess() {
-					show.value = false
-					toast.success(__('Assignment updated successfully'))
-				},
-			}
-		)
-	}
-}
-
-const assignmentOptions = computed(() => {
-	return [
-		{ label: 'PDF', value: 'PDF' },
-		{ label: 'Image', value: 'Image' },
-		{ label: 'Document', value: 'Document' },
-		{ label: 'Text', value: 'Text' },
-		{ label: 'URL', value: 'URL' },
-	]
-})
-</script>
--- a/frontend/src/components/Modals/BatchCourseModal.vue
+++ b/frontend/src/components/Modals/BatchCourseModal.vue
@@ -19,43 +19,31 @@
 				v-model="course"
 				:label="__('Course')"
 				:required="true"
-				:onCreate="
-					(value, close) => {
-						close()
-						router.push({
-							name: 'CourseForm',
-							params: {
-								courseName: 'new',
-							},
-						})
-					}
-				"
 			/>
 			<Link
 				doctype="Course Evaluator"
 				v-model="evaluator"
 				:label="__('Evaluator')"
-				:onCreate="(value, close) => openSettings('Evaluators', close)"
+				:onCreate="(value, close) => openSettings(close)"
 				class="mt-4"
 			/>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, toast } from 'frappe-ui'
-import { ref, inject } from 'vue'
+import { Dialog, createResource } from 'frappe-ui'
+import { ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { openSettings } from '@/utils'
-import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'

 const show = defineModel()
 const course = ref(null)
 const evaluator = ref(null)
-const user = inject('$user')
 const courses = defineModel('courses')
-const router = useRouter()
 const { updateOnboardingStep } = useOnboarding('learning')
+const settingsStore = useSettings()

 const props = defineProps({
 	batch: {
@@ -85,18 +73,22 @@ const addCourse = (close) => {
 		{},
 		{
 			onSuccess() {
-				if (user.data?.is_system_manager)
-					updateOnboardingStep('add_batch_course')
-
-				close()
 				courses.value.reload()
+				updateOnboardingStep('add_batch_course')
+				close()
 				course.value = null
 				evaluator.value = null
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.message[0] || err, 'x')
 			},
 		}
 	)
 }
+
+const openSettings = (close) => {
+	close()
+	settingsStore.activeTab = 'Evaluators'
+	settingsStore.isSettingsOpen = true
+}
 </script>
--- a/frontend/src/components/Modals/BatchStudentProgress.vue
+++ b/frontend/src/components/Modals/BatchStudentProgress.vue
@@ -14,13 +14,7 @@
 							<div class="text-xl font-semibold">
 								{{ student.full_name }}
 							</div>
-							<Badge
-								v-if="
-									Object.keys(student.assessments).length ||
-									Object.keys(student.courses).length
-								"
-								:theme="student.progress === 100 ? 'green' : 'red'"
-							>
+							<Badge :theme="student.progress === 100 ? 'green' : 'red'">
 								{{ student.progress }}% {{ __('Complete') }}
 							</Badge>
 						</div>
@@ -32,10 +26,7 @@

 				<div class="space-y-8">
 					<!-- Assessments -->
-					<div
-						v-if="Object.keys(student.assessments).length"
-						class="space-y-2 text-sm"
-					>
+					<div class="space-y-2 text-sm">
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Assessment') }}
@@ -82,10 +73,7 @@
 					</div>

 					<!-- Courses -->
-					<div
-						v-if="Object.keys(student.courses).length"
-						class="space-y-2 text-sm"
-					>
+					<div class="space-y-2 text-sm">
 						<div class="flex items-center border-b pb-1 font-medium">
 							<span class="flex-1">
 								{{ __('Courses') }}
--- a/frontend/src/components/Modals/BulkCertificates.vue
+++ b/frontend/src/components/Modals/BulkCertificates.vue
@@ -62,8 +62,9 @@
 </template>
 <script setup>
 import { inject, reactive } from 'vue'
-import { createResource, Dialog, FormControl, Switch, toast } from 'frappe-ui'
+import { createResource, Dialog, FormControl, Switch } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'

 const show = defineModel()
 const dayjs = inject('$dayjs')
@@ -111,13 +112,13 @@ const generateCertificates = (close) => {
 			},
 			{
 				onError(err) {
-					toast.error(err.messages?.[0] || err)
+					showToast(__('Error'), err.messages?.[0] || err, 'x')
 				},
 			}
 		)
 	})
 	close()
-	toast.success(__('Certificates generated successfully'))
+	showToast(__('Success'), __('Certificates generated successfully'), 'check')
 }

 const getCourses = () => {
--- a/frontend/src/components/Modals/ChapterModal.vue
+++ b/frontend/src/components/Modals/ChapterModal.vue
@@ -38,7 +38,7 @@
 							<div class="mb-4">
 								<Button @click="openFileSelector" :loading="uploading">
 									{{
-										uploading ? `Uploading ${progress}%` : 'Upload an ZIP file'
+										uploading ? `Uploading ${progress}%` : 'Upload an zip file'
 									}}
 								</Button>
 							</div>
@@ -76,17 +76,15 @@ import {
 	FileUploader,
 	FormControl,
 	Switch,
-	toast,
 } from 'frappe-ui'
-import { reactive, watch, inject } from 'vue'
-import { getFileSize } from '@/utils/'
+import { reactive, watch } from 'vue'
+import { showToast, getFileSize } from '@/utils/'
 import { capture } from '@/telemetry'
 import { FileText, X } from 'lucide-vue-next'
 import { useOnboarding } from 'frappe-ui/frappe'

 const show = defineModel()
 const outline = defineModel('outline')
-const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')

 const props = defineProps({
@@ -141,27 +139,29 @@ const addChapter = async (close) => {
 				return validateChapter()
 			},
 			onSuccess: (data) => {
-				if (user.data?.is_system_manager)
-					updateOnboardingStep('create_first_chapter')
-
 				capture('chapter_created')
+				updateOnboardingStep('create_first_chapter')
 				chapterReference.submit(
 					{ name: data.name },
 					{
 						onSuccess(data) {
 							cleanChapter()
 							outline.value.reload()
-							toast.success(__('Chapter added successfully'))
+							showToast(
+								__('Success'),
+								__('Chapter added successfully'),
+								'check'
+							)
 						},
 						onError(err) {
-							toast.error(err.messages?.[0] || err)
+							showToast(__('Error'), err.messages?.[0] || err, 'x')
 						},
 					}
 				)
 				close()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -193,11 +193,11 @@ const editChapter = (close) => {
 			},
 			onSuccess() {
 				outline.value.reload()
-				toast.success(__('Chapter updated successfully'))
+				showToast(__('Success'), __('Chapter updated successfully'), 'check')
 				close()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/DiscussionModal.vue
+++ b/frontend/src/components/Modals/DiscussionModal.vue
@@ -34,15 +34,9 @@
 	</Dialog>
 </template>
 <script setup>
-import {
-	Dialog,
-	FormControl,
-	TextEditor,
-	createResource,
-	toast,
-} from 'frappe-ui'
+import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
 import { reactive } from 'vue'
-import { singularize } from '@/utils'
+import { showToast, singularize } from '@/utils'

 const topics = defineModel('reloadTopics')

@@ -121,7 +115,7 @@ const submitTopic = (close) => {
 				)
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.message, 'x')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/EditProfile.vue
+++ b/frontend/src/components/Modals/EditProfile.vue
@@ -93,11 +93,10 @@ import {
 	Button,
 	createResource,
 	TextEditor,
-	toast,
 } from 'frappe-ui'
 import { reactive, watch } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { getFileSize, escapeHTML } from '@/utils'
+import { getFileSize, showToast, escapeHTML } from '@/utils'

 const reloadProfile = defineModel('reloadProfile')

@@ -156,7 +155,7 @@ const saveProfile = (close) => {
 				reloadProfile.value.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/EvaluationModal.vue
+++ b/frontend/src/components/Modals/EvaluationModal.vue
@@ -42,11 +42,10 @@
 					<div class="grid grid-cols-2 gap-2">
 						<div v-for="slot in slots.data">
 							<div
-								class="text-base text-center border rounded-md text-ink-gray-8 bg-surface-gray-3 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-outline-gray-4':
-										evaluation.start_time == slot.start_time,
+									'border-gray-900': evaluation.start_time == slot.start_time,
 								}"
 							>
 								{{ formatTime(slot.start_time) }} -
@@ -68,7 +67,7 @@
 <script setup>
 import { Dialog, createResource, Select, FormControl } from 'frappe-ui'
 import { reactive, watch, inject } from 'vue'
-import { formatTime } from '@/utils/'
+import { createToast, formatTime } from '@/utils/'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -148,7 +147,14 @@ function submitEvaluation(close) {
 				unavailabilityMessage = false
 			}

-			toast.warning(__('Evaluator is unavailable'))
+			createToast({
+				title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
+				text: message,
+				icon: unavailabilityMessage ? 'alert-circle' : 'x',
+				iconClasses: 'bg-yellow-600 text-ink-white rounded-md p-px',
+				position: 'top-center',
+				timeout: 10,
+			})
 		},
 	})
 }
--- a/frontend/src/components/Modals/Event.vue
+++ b/frontend/src/components/Modals/Event.vue
@@ -144,7 +144,6 @@ import {
 	Tabs,
 	Tooltip,
 	Textarea,
-	toast,
 } from 'frappe-ui'
 import {
 	User,
@@ -158,7 +157,7 @@ import {
 	ClipboardList,
 } from 'lucide-vue-next'
 import { inject, reactive, watch, ref, computed } from 'vue'
-import { formatTime } from '@/utils'
+import { formatTime, showToast } from '@/utils'
 import Rating from '@/components/Controls/Rating.vue'
 import Link from '@/components/Controls/Link.vue'

@@ -253,7 +252,7 @@ const saveEvaluation = () => {
 				} else {
 					show.value = false
 				}
-				toast.success(__('Evaluation saved successfully'))
+				showToast(__('Success'), __('Evaluation saved successfully'), 'check')
 			},
 		}
 	)
@@ -308,7 +307,7 @@ const saveCertificate = () => {
 		{},
 		{
 			onSuccess: () => {
-				toast.success(__('Certificate saved successfully'))
+				showToast(__('Success'), __('Certificate saved successfully'), 'check')
 			},
 		}
 	)
--- a/frontend/src/components/Modals/JobApplicationModal.vue
+++ b/frontend/src/components/Modals/JobApplicationModal.vue
@@ -64,10 +64,10 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FileUploader, Button, createResource, toast } from 'frappe-ui'
+import { Dialog, FileUploader, Button, createResource } from 'frappe-ui'
 import { FileText } from 'lucide-vue-next'
 import { ref, inject } from 'vue'
-import { getFileSize } from '@/utils/'
+import { createToast, getFileSize } from '@/utils/'

 const resume = ref(null)
 const show = defineModel()
@@ -112,12 +112,24 @@ const submitResume = (close) => {
 				}
 			},
 			onSuccess() {
-				toast.success('Your application has been submitted successfully')
+				createToast({
+					title: 'Success',
+					text: 'Your application has been submitted',
+					icon: 'check',
+					iconClasses: 'bg-surface-green-3 text-ink-white rounded-md p-px',
+				})
 				application.value.reload()
 				close()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				createToast({
+					title: 'Error',
+					text: err.messages?.[0] || err,
+					icon: 'x',
+					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
@@ -94,10 +94,9 @@ import {
 	Tooltip,
 	FormControl,
 	Autocomplete,
-	toast,
 } from 'frappe-ui'
 import { reactive, inject, onMounted } from 'vue'
-import { getTimezones, getUserTimezone } from '@/utils/'
+import { getTimezones, createToast, getUserTimezone } from '@/utils/'

 const liveClasses = defineModel('reloadLiveClasses')
 const show = defineModel()
@@ -203,7 +202,14 @@ const submitLiveClass = (close) => {
 			close()
 		},
 		onError(err) {
-			toast.error(err.messages?.[0] || err)
+			createToast({
+				title: 'Error',
+				text: err.messages?.[0] || err,
+				icon: 'x',
+				iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
+				position: 'top-center',
+				timeout: 10,
+			})
 		},
 	})
 }
--- a/frontend/src/components/Modals/PageModal.vue
+++ b/frontend/src/components/Modals/PageModal.vue
@@ -30,10 +30,11 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, toast } from 'frappe-ui'
+import { Dialog, createResource } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
 import { reactive, watch } from 'vue'
 import IconPicker from '@/components/Controls/IconPicker.vue'
+import { showToast } from '@/utils'

 const sidebar = defineModel('reloadSidebar')
 const show = defineModel()
@@ -77,10 +78,10 @@ const addWebPage = (close) => {
 			onSuccess() {
 				sidebar.value.reload()
 				close()
-				toast.success(__('Web page added to sidebar'))
+				showToast('Success', 'Web page added to sidebar', 'check')
 			},
 			onError(err) {
-				toast.error(err.message[0] || err)
+				showToast('Error', err.message[0] || err, 'x')
 				close()
 			},
 		}
--- a/frontend/src/components/Modals/Question.vue
+++ b/frontend/src/components/Modals/Question.vue
@@ -1,27 +1,38 @@
 <template>
-	<Dialog
-		v-model="show"
-		:options="{
-			size: '3xl',
-		}"
-	>
-		<template #body>
-			<div class="p-5 space-y-5">
-				<div class="text-lg font-semibold text-ink-gray-9 mb-5">
-					{{ __(props.title) }}
-				</div>
+	<Dialog v-model="show" :options="dialogOptions">
+		<template #body-content>
+			<div class="space-y-4">
 				<div
 					v-if="!editMode"
 					class="flex items-center text-xs text-ink-gray-7 space-x-5"
 				>
-					<Switch
-						size="sm"
-						:label="__('Choose an existing question')"
-						v-model="chooseFromExisting"
-						class="!p-0"
-					/>
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="existing"
+							value="existing"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="existing" class="cursor-pointer">
+							{{ __('Add an existing question') }}
+						</label>
+					</div>
+
+					<div class="flex items-center space-x-2">
+						<input
+							type="radio"
+							id="new"
+							value="new"
+							v-model="questionType"
+							class="w-3 h-3 cursor-pointer"
+						/>
+						<label for="new" class="cursor-pointer">
+							{{ __('Create a new question') }}
+						</label>
+					</div>
 				</div>
-				<div v-if="!chooseFromExisting || editMode" class="space-y-2">
+				<div v-if="questionType == 'new' || editMode" class="space-y-2">
 					<div>
 						<label class="block text-xs text-ink-gray-5 mb-1">
 							{{ __('Question') }}
@@ -34,34 +45,20 @@
 							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 class="grid grid-cols-2 gap-4">
-						<FormControl
-							v-model="question.marks"
-							:label="__('Marks')"
-							type="number"
-						/>
-						<FormControl
-							:label="__('Type')"
-							v-model="question.type"
-							type="select"
-							:options="['Choices', 'User Input', 'Open Ended']"
-							class="pb-2"
-							:required="true"
-						/>
-					</div>
-					<div
-						v-if="question.type == 'Choices'"
-						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
-					>
-						{{ __('Options') }}
-					</div>
-					<div
-						v-else-if="question.type == 'User Input'"
-						class="text-base font-semibold text-ink-gray-9 mb-5 mt-5"
-					>
-						{{ __('Possibilities') }}
-					</div>
-					<div v-if="question.type == 'Choices'" class="grid grid-cols-2 gap-4">
+					<FormControl
+						v-model="question.marks"
+						:label="__('Marks')"
+						type="number"
+					/>
+					<FormControl
+						:label="__('Type')"
+						v-model="question.type"
+						type="select"
+						:options="['Choices', 'User Input', 'Open Ended']"
+						class="pb-2"
+						:required="true"
+					/>
+					<div v-if="question.type == 'Choices'" class="divide-y border-t">
 						<div v-for="n in 4" class="space-y-4 py-2">
 							<FormControl
 								:label="__('Option') + ' ' + n"
@@ -81,18 +78,17 @@
 					</div>
 					<div
 						v-else-if="question.type == 'User Input'"
-						class="grid grid-cols-2 gap-4 py-2"
+						v-for="n in 4"
+						class="space-y-2"
 					>
-						<div v-for="n in 4">
-							<FormControl
-								:label="__('Possibility') + ' ' + n"
-								v-model="question[`possibility_${n}`]"
-								:required="n == 1 ? true : false"
-							/>
-						</div>
+						<FormControl
+							:label="__('Possibility') + ' ' + n"
+							v-model="question[`possibility_${n}`]"
+							:required="n == 1 ? true : false"
+						/>
 					</div>
 				</div>
-				<div v-else-if="chooseFromExisting" class="space-y-2">
+				<div v-else-if="questionType == 'existing'" class="space-y-2">
 					<Link
 						v-model="existingQuestion.question"
 						:label="__('Select a question')"
@@ -104,39 +100,26 @@
 						type="number"
 					/>
 				</div>
-				<div class="flex items-center justify-end space-x-2 mt-5">
-					<Button variant="solid" @click="submitQuestion()">
-						{{ __('Submit') }}
-					</Button>
-				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import {
-	Dialog,
-	FormControl,
-	TextEditor,
-	createResource,
-	Switch,
-	Button,
-	toast,
-} from 'frappe-ui'
-import { computed, watch, reactive, ref, inject } from 'vue'
+import { Dialog, FormControl, TextEditor, createResource } from 'frappe-ui'
+import { computed, watch, reactive, ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'

 const show = defineModel()
 const quiz = defineModel('quiz')
-const chooseFromExisting = ref(false)
+const questionType = ref(null)
 const editMode = ref(false)
-const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')

 const existingQuestion = reactive({
 	question: '',
-	marks: 1,
+	marks: 0,
 })
 const question = reactive({
 	question: '',
@@ -198,12 +181,11 @@ watch(show, () => {
 		editMode.value = false
 		if (props.questionDetail.question) questionData.fetch()
 		else {
-			question.question = ''
-			question.marks = 1
+			;(question.question = ''), (question.marks = 0)
 			question.type = 'Choices'
 			existingQuestion.question = ''
-			existingQuestion.marks = 1
-			chooseFromExisting.value = false
+			existingQuestion.marks = 0
+			questionType.value = null
 			populateFields()
 		}

@@ -238,53 +220,57 @@ const questionCreation = createResource({
 	},
 })

-const submitQuestion = () => {
-	if (props.questionDetail?.question) updateQuestion()
-	else addQuestion()
+const submitQuestion = (close) => {
+	if (props.questionDetail?.question) updateQuestion(close)
+	else addQuestion(close)
 }

-const addQuestion = () => {
-	if (chooseFromExisting.value) {
-		addQuestionRow({
-			question: existingQuestion.question,
-			marks: existingQuestion.marks,
-		})
+const addQuestion = (close) => {
+	if (questionType.value == 'existing') {
+		addQuestionRow(
+			{
+				question: existingQuestion.question,
+				marks: existingQuestion.marks,
+			},
+			close
+		)
 	} else {
 		questionCreation.submit(
 			{},
 			{
 				onSuccess(data) {
-					addQuestionRow({
-						question: data.name,
-						marks: question.marks,
-					})
+					addQuestionRow(
+						{
+							question: data.name,
+							marks: question.marks,
+						},
+						close
+					)
 				},
 				onError(err) {
-					toast.error(err.messages?.[0] || err)
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 				},
 			}
 		)
 	}
 }

-const addQuestionRow = (question) => {
+const addQuestionRow = (question, close) => {
 	questionRow.submit(
 		{
 			...question,
 		},
 		{
 			onSuccess() {
-				if (user.data?.is_system_manager)
-					updateOnboardingStep('create_first_quiz')
-
 				show.value = false
-				toast.success(__('Question added successfully'))
+				updateOnboardingStep('create_first_quiz')
+				showToast(__('Success'), __('Question added successfully'), 'check')
 				quiz.value.reload()
-				show.value = false
+				close()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
-				show.value = false
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				close()
 			},
 		}
 	)
@@ -318,7 +304,7 @@ const marksUpdate = createResource({
 	},
 })

-const updateQuestion = () => {
+const updateQuestion = (close) => {
 	questionUpdate.submit(
 		{},
 		{
@@ -328,18 +314,39 @@ const updateQuestion = () => {
 					{
 						onSuccess() {
 							show.value = false
-							toast.success(__('Question updated successfully'))
+							showToast(
+								__('Success'),
+								__('Question updated successfully'),
+								'check'
+							)
 							quiz.value.reload()
+							close()
 						},
 					}
 				)
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)
 }
+
+const dialogOptions = computed(() => {
+	return {
+		title: __(props.title),
+		size: 'xl',
+		actions: [
+			{
+				label: __('Submit'),
+				variant: 'solid',
+				onClick: (close) => {
+					submitQuestion(close)
+				},
+			},
+		],
+	}
+})
 </script>
 <style>
 input[type='radio']:checked {
--- a/frontend/src/components/Modals/ReviewModal.vue
+++ b/frontend/src/components/Modals/ReviewModal.vue
@@ -32,9 +32,10 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, Textarea, createResource, toast } from 'frappe-ui'
+import { Dialog, Textarea, createResource } from 'frappe-ui'
 import { reactive } from 'vue'
 import Rating from '@/components/Controls/Rating.vue'
+import { createToast } from '@/utils/'

 const show = defineModel()
 const reviews = defineModel('reloadReviews')
@@ -77,7 +78,11 @@ function submitReview(close) {
 			hasReviewed.value.reload()
 		},
 		onError(err) {
-			toast.error(err.messages?.[0] || err)
+			createToast({
+				text: err.messages?.[0] || err,
+				icon: 'x',
+				iconClasses: 'text-ink-red-4 bg-surface-red-4',
+			})
 		},
 	})
 	close()
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '5xl' }">
+	<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-surface-gray-2 p-2">
@@ -315,6 +315,12 @@ const tabsStructure = computed(() => {
 							doctype: 'Email Template',
 							type: 'Link',
 						},
+						{
+							label: 'Assignment Submission Template',
+							name: 'assignment_submission_template',
+							doctype: 'Email Template',
+							type: 'Link',
+						},
 					],
 				},
 				{
@@ -322,52 +328,18 @@ const tabsStructure = computed(() => {
 					icon: 'LogIn',
 					fields: [
 						{
-							label: 'Identify User Category',
-							name: 'user_category',
-							type: 'checkbox',
-							description:
-								'Enable this option to identify the user category during signup.',
-						},
-						{
-							label: 'Disable signup',
-							name: 'disable_signup',
-							type: 'checkbox',
-							description:
-								'New users will have to be manually registered by Admins.',
-						},
-						{
-							label: 'Signup Consent HTML',
+							label: 'Custom Content',
 							name: 'custom_signup_content',
 							type: 'Code',
 							mode: 'htmlmixed',
 							rows: 10,
 						},
-					],
-				},
-				{
-					label: 'SEO',
-					icon: 'Search',
-					fields: [
 						{
-							label: 'Meta Description',
-							name: 'meta_description',
-							type: 'textarea',
-							rows: 4,
+							label: 'Ask for Occupation',
+							name: 'user_category',
+							type: 'checkbox',
 							description:
-								"This description will be shown on lists and pages that don't have meta description",
-						},
-						{
-							label: 'Meta Keywords',
-							name: 'meta_keywords',
-							type: 'textarea',
-							rows: 4,
-							description:
-								'Keywords for search engines to find your website. Separated by commas.',
-						},
-						{
-							label: 'Meta Image',
-							name: 'meta_image',
-							type: 'Upload',
+								'Enable this option to ask users to select their occupation during the signup process.',
 						},
 					],
 				},
--- a/frontend/src/components/Modals/StudentModal.vue
+++ b/frontend/src/components/Modals/StudentModal.vue
@@ -19,27 +19,20 @@
 					doctype="User"
 					v-model="student"
 					:filters="{ ignore_user_type: 1 }"
-					:onCreate="
-						(value, close) => {
-							openSettings('Members', close)
-						}
-					"
 				/>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, toast } from 'frappe-ui'
-import { ref, inject } from 'vue'
+import { Dialog, createResource } from 'frappe-ui'
+import { ref } from 'vue'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils'
 import { useOnboarding } from 'frappe-ui/frappe'
-import { openSettings } from '@/utils'

 const students = defineModel('reloadStudents')
-const batchModal = defineModel('batchModal')
 const student = ref()
-const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')
 const show = defineModel()

@@ -68,16 +61,13 @@ const addStudent = (close) => {
 		{},
 		{
 			onSuccess() {
-				if (user.data?.is_system_manager)
-					updateOnboardingStep('add_batch_student')
-
 				students.value.reload()
-				batchModal.value.reload()
 				student.value = null
+				updateOnboardingStep('add_batch_student')
 				close()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)
--- a/frontend/src/components/OnboardingBanner.vue
+++ b/frontend/src/components/OnboardingBanner.vue
@@ -0,0 +1,159 @@
+<template>
+	<div v-if="showOnboardingBanner && onboardingDetails.data">
+		<Tooltip :text="__('Skip Onboarding')" placement="left">
+			<X
+				class="w-4 h-4 stroke-1 absolute top-2 right-2 cursor-pointer mr-1"
+				@click="skipOnboarding.reload()"
+			/>
+		</Tooltip>
+		<div class="flex items-center justify-evenly bg-surface-gray-2 p-10">
+			<div
+				@click="redirectToCourseForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.course_created?.length"
+					class="py-1 px-1 bg-surface-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-ink-green-3" />
+				</span>
+				<span
+					v-else
+					class="font-semibold bg-surface-white px-2 py-1 rounded-full"
+				>
+					1
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Create a course') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToChapterForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						!onboardingDetails.data.chapter_created?.length,
+					'text-ink-gray-3': !onboardingDetails.data.course_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.chapter_created?.length"
+					class="py-1 px-1 bg-surface-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-ink-green-3" />
+				</span>
+				<span
+					v-else
+					class="font-semibold bg-surface-white px-2 py-1 rounded-full"
+				>
+					2
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a chapter') }}
+				</span>
+			</div>
+			<div
+				@click="redirectToLessonForm()"
+				class="flex items-center space-x-2"
+				:class="{
+					'cursor-pointer':
+						onboardingDetails.data.course_created?.length &&
+						onboardingDetails.data.chapter_created?.length,
+					'text-ink-gray-3':
+						!onboardingDetails.data.course_created?.length ||
+						!onboardingDetails.data.chapter_created?.length,
+				}"
+			>
+				<span
+					v-if="onboardingDetails.data.lesson_created?.length"
+					class="py-1 px-1 bg-surface-white rounded-full"
+				>
+					<Check class="h-4 w-4 stroke-2 text-ink-green-3" />
+				</span>
+				<span class="font-semibold bg-surface-white px-2 py-1 rounded-full">
+					3
+				</span>
+				<span class="text-lg font-semibold">
+					{{ __('Add a lesson') }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Check, X } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import { useSettings } from '@/stores/settings'
+import { createResource, Tooltip } from 'frappe-ui'
+
+const showOnboardingBanner = ref(false)
+const settings = useSettings()
+const onboardingDetails = settings.onboardingDetails
+const router = useRouter()
+
+watch(onboardingDetails, () => {
+	if (!onboardingDetails.data?.is_onboarded) {
+		showOnboardingBanner.value = true
+	} else {
+		showOnboardingBanner.value = false
+	}
+})
+
+const redirectToCourseForm = () => {
+	if (onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({ name: 'CourseForm', params: { courseName: 'new' } })
+	}
+}
+
+const redirectToChapterForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'CourseForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+			},
+		})
+	}
+}
+
+const redirectToLessonForm = () => {
+	if (!onboardingDetails.data?.course_created.length) {
+		return
+	} else if (!onboardingDetails.data?.chapter_created.length) {
+		return
+	} else {
+		router.push({
+			name: 'LessonForm',
+			params: {
+				courseName: onboardingDetails.data?.first_course,
+				chapterNumber: 1,
+				lessonNumber: 1,
+			},
+		})
+	}
+}
+
+const skipOnboarding = createResource({
+	url: 'frappe.client.set_value',
+	makeParams() {
+		return {
+			doctype: 'LMS Settings',
+			name: 'LMS Settings',
+			fieldname: 'is_onboarding_complete',
+			value: 1,
+		}
+	},
+	onSuccess(data) {
+		onboardingDetails.reload()
+	},
+})
+</script>
--- a/frontend/src/components/Quiz.vue
+++ b/frontend/src/components/Quiz.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="quiz.data">
 		<div
-			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-3"
+			class="bg-surface-blue-2 space-y-1 py-2 px-2 mb-4 rounded-md text-sm text-ink-blue-2"
 		>
 			<div class="leading-5">
 				{{
@@ -291,9 +291,9 @@ import {
 	ListView,
 	TextEditor,
 	FormControl,
-	toast,
 } from 'frappe-ui'
 import { ref, watch, reactive, inject, computed } from 'vue'
+import { createToast, showToast } from '@/utils/'
 import { CheckCircle, XCircle, MinusCircle } from 'lucide-vue-next'
 import { timeAgo } from '@/utils'
 import { useRouter } from 'vue-router'
@@ -494,7 +494,12 @@ const getAnswers = () => {
 const checkAnswer = () => {
 	let answers = getAnswers()
 	if (!answers.length) {
-		toast.warning(__('Please select an option'))
+		createToast({
+			title: 'Please select an option',
+			icon: 'alert-circle',
+			iconClasses: 'text-yellow-600 bg-yellow-100 rounded-full',
+			position: 'top-center',
+		})
 		return
 	}

@@ -584,7 +589,7 @@ const createSubmission = () => {
 				const errorTitle = err?.message || ''
 				if (errorTitle.includes('MaximumAttemptsExceededError')) {
 					const errorMessage = err.messages?.[0] || err
-					toast.error(__(errorMessage))
+					showToast(__('Error'), __(errorMessage), 'x')
 					setTimeout(() => {
 						window.location.reload()
 					}, 3000)
@@ -648,8 +653,3 @@ const getSubmissionColumns = () => {
 	]
 }
 </script>
-<style>
-p {
-	line-height: 1.5rem;
-}
-</style>
--- a/frontend/src/components/SettingDetails.vue
+++ b/frontend/src/components/SettingDetails.vue
@@ -27,8 +27,9 @@
 </template>

 <script setup>
-import { Button, Badge, toast } from 'frappe-ui'
+import { Button, Badge } from 'frappe-ui'
 import SettingFields from '@/components/SettingFields.vue'
+import { showToast } from '@/utils'

 const props = defineProps({
 	fields: {
@@ -50,9 +51,7 @@ const props = defineProps({

 const update = () => {
 	props.fields.forEach((f) => {
-		if (f.type == 'Upload') {
-			props.data.doc[f.name] = f.value ? f.value.file_url : null
-		} else if (f.type != 'Column Break') {
+		if (f.type != 'Column Break') {
 			props.data.doc[f.name] = f.value
 		}
 	})
@@ -60,7 +59,7 @@ const update = () => {
 		{},
 		{
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
--- a/frontend/src/components/SettingFields.vue
+++ b/frontend/src/components/SettingFields.vue
@@ -54,30 +54,21 @@
 						<div v-else>
 							<div class="flex items-center text-sm space-x-2">
 								<div
-									class="flex items-center justify-center rounded border border-outline-gray-modals bg-white w-[10rem] py-2"
+									class="flex items-center justify-center rounded border border-outline-gray-modals w-[10rem] py-5"
 								>
-									<img
-										:src="data[field.name]?.file_url || data[field.name]"
-										class="w-[80%] rounded"
-									/>
+									<img :src="data[field.name]?.file_url" class="h-6 rounded" />
 								</div>
 								<div class="flex flex-col flex-wrap">
 									<span class="break-all text-ink-gray-9">
-										{{
-											data[field.name]?.file_name ||
-											data[field.name].split('/').pop()
-										}}
+										{{ data[field.name]?.file_name }}
 									</span>
-									<span
-										v-if="data[field.name]?.file_size"
-										class="text-sm text-ink-gray-5 mt-1"
-									>
+									<span class="text-sm text-ink-gray-5 mt-1">
 										{{ getFileSize(data[field.name]?.file_size) }}
 									</span>
 								</div>
 								<X
 									@click="data[field.name] = null"
-									class="border text-ink-gray-7 border-outline-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+									class="bg-surface-gray-5 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
 								/>
 							</div>
 						</div>
--- a/frontend/src/components/UpcomingEvaluations.vue
+++ b/frontend/src/components/UpcomingEvaluations.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="flex items-center justify-between mb-4">
-			<div class="text-lg text-ink-gray-9 font-semibold">
+			<div class="text-lg font-semibold">
 				{{ __('Upcoming Evaluations') }}
 			</div>
 			<Button
@@ -17,9 +17,9 @@
 		<div v-if="upcoming_evals.data?.length">
 			<div class="grid grid-cols-3 gap-4">
 				<div v-for="evl in upcoming_evals.data">
-					<div class="border text-ink-gray-7 rounded-md p-3">
+					<div class="border rounded-md p-3">
 						<div class="flex justify-between mb-3">
-							<span class="font-semibold text-ink-gray-9 leading-5">
+							<span class="font-semibold leading-5">
 								{{ evl.course_title }}
 							</span>
 							<Menu
@@ -42,7 +42,7 @@
 									leave-to-class="transform scale-95 opacity-0"
 								>
 									<MenuItems
-										class="absolute mt-2 w-32 rounded-md bg-surface-white border p-1.5"
+										class="absolute mt-2 w-32 rounded-md bg-white shadow-lg p-1.5"
 									>
 										<MenuItem v-slot="{ active }">
 											<Button
@@ -82,11 +82,12 @@
 								{{ evl.evaluator_name }}
 							</span>
 						</div>
-						<div
-							v-if="evl.google_meet_link"
-							class="flex items-center justify-between space-x-2 mt-4"
-						>
-							<Button @click="openEvalCall(evl)" class="w-full">
+						<div class="flex items-center justify-between space-x-2 mt-4">
+							<Button
+								v-if="evl.google_meet_link"
+								@click="openEvalCall(evl)"
+								class="w-full"
+							>
 								<template #prefix>
 									<HeadsetIcon class="w-4 h-4 stroke-1.5" />
 								</template>
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -36,7 +36,7 @@
 						<span v-else> Learning </span>
 					</div>
 					<div
-						v-if="userResource.data"
+						v-if="userResource"
 						class="mt-1 text-sm text-ink-gray-7 leading-none"
 					>
 						{{ convertToTitleCase(userResource.data?.full_name) }}
@@ -194,6 +194,18 @@ const userDropdownOptions = computed(() => {
 						)
 					},
 				},
+			],
+		},
+		{
+			group: '',
+			items: [
+				{
+					icon: Zap,
+					label: 'Powered by Learning',
+					onClick: () => {
+						window.open('https://frappe.io/learning', '_blank')
+					},
+				},
 				{
 					icon: LogOut,
 					label: 'Log out',
--- a/frontend/src/components/VideoBlock.vue
+++ b/frontend/src/components/VideoBlock.vue
@@ -1,53 +1,32 @@
 <template>
-	<div ref="videoContainer" class="video-block relative group">
+	<div ref="videoContainer" class="video-block group relative">
 		<video
 			@timeupdate="updateTime"
 			@ended="videoEnded"
 			@click="togglePlay"
 			oncontextmenu="return false"
-			class="rounded-md border border-gray-100 cursor-pointer"
+			class="rounded-lg border border-gray-100 group cursor-pointer"
 			ref="videoRef"
 		>
 			<source :src="fileURL" :type="type" />
 		</video>
 		<div
-			v-if="!playing"
-			class="absolute inset-0 flex items-center justify-center cursor-pointer"
-			@click="playVideo"
-		>
-			<div
-				class="rounded-full p-4 pl-4.5"
-				style="
-					background: radial-gradient(
-						circle,
-						rgba(0, 0, 0, 0.3) 0%,
-						rgba(0, 0, 0, 0.4) 50%
-					);
-				"
-			>
-				<Play />
-			</div>
-		</div>
-		<div
-			class="flex items-center space-x-2 py-2 px-1 text-ink-white bg-gradient-to-b from-transparent to-black/75 absolute bottom-0 left-0 right-0 mx-auto rounded-md"
-			:class="{
-				'invisible group-hover:visible': playing,
-			}"
+			class="flex items-center space-x-2 bg-surface-gray-3 rounded-md p-0.5 absolute bottom-3 w-[98%] left-0 right-0 mx-auto invisible group-hover:visible"
 		>
 			<Button variant="ghost">
 				<template #icon>
 					<Play
 						v-if="!playing"
 						@click="playVideo"
-						class="size-4 text-ink-gray-9"
+						class="w-4 h-4 text-ink-gray-9"
 					/>
-					<Pause v-else @click="pauseVideo" class="size-5 text-ink-white" />
+					<Pause v-else @click="pauseVideo" class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 			<Button variant="ghost" @click="toggleMute">
 				<template #icon>
-					<Volume2 v-if="!muted" class="size-5 text-ink-white" />
-					<VolumeX v-else class="size-5 text-ink-white" />
+					<Volume2 v-if="!muted" class="w-4 h-4 text-ink-gray-9" />
+					<VolumeX v-else class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 			<input
@@ -59,12 +38,12 @@
 				@input="changeCurrentTime"
 				class="duration-slider w-full h-1"
 			/>
-			<span class="text-sm font-semibold">
+			<span class="text-xs font-medium">
 				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
 			</span>
 			<Button variant="ghost" @click="toggleFullscreen">
 				<template #icon>
-					<Maximize class="size-5 text-ink-white" />
+					<Maximize class="w-4 h-4 text-ink-gray-9" />
 				</template>
 			</Button>
 		</div>
@@ -72,9 +51,8 @@
 </template>
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
+import { Play, Pause, Maximize, Volume2, VolumeX } from 'lucide-vue-next'
 import { Button } from 'frappe-ui'
-import Play from '@/components/Icons/Play.vue'

 const videoRef = ref(null)
 const videoContainer = ref(null)
@@ -169,6 +147,7 @@ const toggleFullscreen = () => {
 <style scoped>
 .video-block {
 	width: 100%;
+	max-width: 900px;
 	margin: 0 auto;
 }

@@ -186,16 +165,15 @@ iframe {
 	flex: 1;
 	-webkit-appearance: none;
 	appearance: none;
-	border-radius: 10px;
-	background-color: theme('colors.gray.100');
+	background-color: theme('colors.gray.400');
 	cursor: pointer;
 }

 .duration-slider::-webkit-slider-thumb {
-	width: 2px;
-	border-radius: 50%;
+	height: 10px;
+	width: 10px;
 	-webkit-appearance: none;
-	background-color: theme('colors.gray.500');
+	background-color: theme('colors.gray.900');
 }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -208,7 +186,7 @@ iframe {
 	input[type='range']::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		cursor: pointer;
-		box-shadow: -500px 0 0 500px theme('colors.gray.600');
+		box-shadow: -500px 0 0 500px theme('colors.gray.900');
 	}
 }
 </style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -26,6 +26,5 @@ app.mount('#app')
 const { userResource, allUsers } = usersStore()
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
-
 app.config.globalProperties.$user = userResource
 app.config.globalProperties.$dialog = createDialog
--- a/frontend/src/pages/AssignmentForm.vue
+++ b/frontend/src/pages/AssignmentForm.vue
@@ -0,0 +1,191 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs :items="breadcrumbs" />
+		<div class="space-x-2">
+			<router-link
+				v-if="assignment.doc?.name"
+				:to="{
+					name: 'AssignmentSubmissionList',
+					query: {
+						assignmentID: assignment.doc.name,
+					},
+				}"
+			>
+				<Button>
+					{{ __('Submission List') }}
+				</Button>
+			</router-link>
+			<Button variant="solid" @click="saveAssignment()">
+				{{ __('Save') }}
+			</Button>
+		</div>
+	</header>
+	<div class="w-3/4 mx-auto py-5">
+		<div class="font-semibold mb-4">
+			{{ __('Details') }}
+		</div>
+		<div class="grid grid-cols-2 gap-5 mt-4 mb-8">
+			<FormControl
+				v-model="model.title"
+				:label="__('Title')"
+				:required="true"
+			/>
+			<FormControl
+				v-model="model.type"
+				type="select"
+				:options="assignmentOptions"
+				:label="__('Type')"
+				:required="true"
+			/>
+		</div>
+		<div>
+			<div class="text-xs text-ink-gray-5 mb-2">
+				{{ __('Question') }}
+				<span class="text-ink-red-3">*</span>
+			</div>
+			<TextEditor
+				:content="model.question"
+				@change="(val) => (model.question = val)"
+				:editable="true"
+				:fixedMenu="true"
+				editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
+			/>
+		</div>
+	</div>
+</template>
+<script setup>
+import {
+	Breadcrumbs,
+	Button,
+	createDocumentResource,
+	createResource,
+	FormControl,
+	TextEditor,
+} from 'frappe-ui'
+import {
+	computed,
+	inject,
+	onMounted,
+	onBeforeUnmount,
+	reactive,
+	watch,
+} from 'vue'
+import { showToast } from '@/utils'
+import { useRouter } from 'vue-router'
+
+const user = inject('$user')
+const router = useRouter()
+
+const props = defineProps({
+	assignmentID: {
+		type: String,
+		required: true,
+	},
+})
+
+const model = reactive({
+	title: '',
+	type: 'PDF',
+	question: '',
+})
+
+onMounted(() => {
+	if (
+		props.assignmentID == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
+		router.push({ name: 'Courses' })
+	}
+	if (props.assignmentID !== 'new') {
+		assignment.reload()
+	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+		saveAssignment()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
+const assignment = createDocumentResource({
+	doctype: 'LMS Assignment',
+	name: props.assignmentID,
+	auto: false,
+})
+
+const newAssignment = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Assignment',
+				...values,
+			},
+		}
+	},
+	onSuccess(data) {
+		router.push({ name: 'AssignmentForm', params: { assignmentID: data.name } })
+	},
+	onError(err) {
+		showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+	},
+})
+
+const saveAssignment = () => {
+	if (props.assignmentID == 'new') {
+		newAssignment.submit({
+			...model,
+		})
+	} else {
+		assignment.setValue.submit(
+			{
+				...model,
+			},
+			{
+				onSuccess(data) {
+					showToast(__('Success'), __('Assignment saved successfully'), 'check')
+					assignment.reload()
+				},
+				onError(err) {
+					showToast(__('Error'), __(err.messages?.[0] || err), 'x')
+				},
+			}
+		)
+	}
+}
+
+watch(assignment, () => {
+	Object.keys(assignment.doc).forEach((key) => {
+		model[key] = assignment.doc[key]
+	})
+})
+
+const breadcrumbs = computed(() => [
+	{
+		label: __('Assignments'),
+		route: { name: 'Assignments' },
+	},
+	{
+		label: assignment.doc ? assignment.doc.title : __('New Assignment'),
+	},
+])
+
+const assignmentOptions = computed(() => {
+	return [
+		{ label: 'PDF', value: 'PDF' },
+		{ label: 'Image', value: 'Image' },
+		{ label: 'Document', value: 'Document' },
+		{ label: 'Text', value: 'Text' },
+		{ label: 'URL', value: 'URL' },
+	]
+})
+</script>
--- a/frontend/src/pages/AssignmentSubmission.vue
+++ b/frontend/src/pages/AssignmentSubmission.vue
@@ -14,14 +14,12 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createResource, usePageMeta } from 'frappe-ui'
-import { computed, inject, onMounted, ref } from 'vue'
-import { sessionStore } from '../stores/session'
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue'
 import Assignment from '@/components/Assignment.vue'

 const user = inject('$user')
 const fromLesson = ref(false)
-const { brand } = sessionStore()

 const props = defineProps({
 	assignmentID: {
@@ -74,11 +72,4 @@ const breadcrumbs = computed(() => {
 	]
 	return crumbs
 })
-
-usePageMeta(() => {
-	return {
-		title: title.data?.title,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/AssignmentSubmissionList.vue
+++ b/frontend/src/pages/AssignmentSubmissionList.vue
@@ -84,17 +84,14 @@ import {
 	ListRows,
 	ListRow,
 	ListRowItem,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Pencil } from 'lucide-vue-next'
-import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
-const { brand } = sessionStore()
 const router = useRouter()
 const assignmentID = ref('')
 const member = ref('')
@@ -217,11 +214,4 @@ const breadcrumbs = computed(() => {
 		},
 	]
 })
-
-usePageMeta(() => {
-	return {
-		title: __('Assignment Submissions'),
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Assignments.vue
+++ b/frontend/src/pages/Assignments.vue
@@ -3,46 +3,32 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<Button
-			v-if="!readOnlyMode"
-			variant="solid"
-			@click="
-				() => {
-					assignmentID = 'new'
-					showAssignmentForm = true
-				}
-			"
+		<router-link
+			:to="{
+				name: 'AssignmentForm',
+				params: {
+					assignmentID: 'new',
+				},
+			}"
 		>
-			<template #prefix>
-				<Plus class="w-4 h-4" />
-			</template>
-			{{ __('New') }}
-		</Button>
+			<Button variant="solid">
+				<template #prefix>
+					<Plus class="w-4 h-4" />
+				</template>
+				{{ __('New') }}
+			</Button>
+		</router-link>
 	</header>

 	<div class="md:w-3/4 md:mx-auto py-5 mx-5">
-		<div class="flex items-center justify-between mb-5">
-			<div
-				v-if="assignmentCount"
-				class="text-xl font-semibold text-ink-gray-7 mb-4"
-			>
-				{{ __('{0} Assignments').format(assignmentCount) }}
-			</div>
-			<div
-				v-if="assignments.data?.length || assigmentCount > 0"
-				class="grid grid-cols-2 gap-5"
-			>
-				<FormControl
-					v-model="titleFilter"
-					:placeholder="__('Search by title')"
-				/>
-				<FormControl
-					v-model="typeFilter"
-					type="select"
-					:options="assignmentTypes"
-					:placeholder="__('Type')"
-				/>
-			</div>
+		<div class="grid grid-cols-3 gap-5 mb-5">
+			<FormControl v-model="titleFilter" :placeholder="__('Search by title')" />
+			<FormControl
+				v-model="typeFilter"
+				type="select"
+				:options="assignmentTypes"
+				:placeholder="__('Type')"
+			/>
 		</div>
 		<ListView
 			v-if="assignments.data?.length"
@@ -52,15 +38,31 @@
 			:options="{
 				showTooltip: false,
 				selectable: false,
-				onRowClick: (row) => {
-					if (readOnlyMode) return
-					assignmentID = row.name
-					showAssignmentForm = true
-				},
+				getRowRoute: (row) => ({
+					name: 'AssignmentForm',
+					params: {
+						assignmentID: row.name,
+					},
+				}),
 			}"
 		>
 		</ListView>
-		<EmptyState v-else type="Assignments" />
+		<div
+			v-else
+			class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+		>
+			<Pencil class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<div class="text-xl font-medium">
+				{{ __('No assignments found') }}
+			</div>
+			<div class="leading-5">
+				{{
+					__(
+						'You have not created any assignments yet. To create a new assignment, click on the "New" button above.'
+					)
+				}}
+			</div>
+		</div>
 		<div
 			v-if="assignments.data && assignments.hasNextPage"
 			class="flex justify-center my-5"
@@ -70,45 +72,30 @@
 			</Button>
 		</div>
 	</div>
-	<AssignmentForm
-		v-model="showAssignmentForm"
-		v-model:assignments="assignments"
-		:assignmentID="assignmentID"
-	/>
 </template>
 <script setup>
 import {
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	FormControl,
 	ListView,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus } from 'lucide-vue-next'
+import { Plus, Pencil } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '../stores/session'
-import AssignmentForm from '@/components/Modals/AssignmentForm.vue'
-import EmptyState from '@/components/EmptyState.vue'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
 const titleFilter = ref('')
 const typeFilter = ref('')
-const showAssignmentForm = ref(false)
-const assignmentID = ref('new')
-const assignmentCount = ref(0)
-const { brand } = sessionStore()
 const router = useRouter()
-const readOnlyMode = window.read_only_mode

 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
-	getAssignmentCount()
+
 	titleFilter.value = router.currentRoute.value.query.title
 	typeFilter.value = router.currentRoute.value.query.type
 })
@@ -146,7 +133,7 @@ const assignmentFilter = computed(() => {

 const assignments = createListResource({
 	doctype: 'LMS Assignment',
-	fields: ['name', 'title', 'type', 'creation', 'question'],
+	fields: ['name', 'title', 'type', 'creation'],
 	orderBy: 'modified desc',
 	cache: ['assignments'],
 	transform(data) {
@@ -176,19 +163,11 @@ const assignmentColumns = computed(() => {
 			label: __('Created'),
 			key: 'creation',
 			width: 1,
-			align: 'right',
+			align: 'center',
 		},
 	]
 })

-const getAssignmentCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Assignment',
-	}).then((data) => {
-		assignmentCount.value = data
-	})
-}
-
 const assignmentTypes = computed(() => {
 	let types = ['', 'Document', 'Image', 'PDF', 'URL', 'Text']
 	return types.map((type) => {
@@ -205,11 +184,4 @@ const breadcrumbs = computed(() => [
 		route: { name: 'Assignments' },
 	},
 ])
-
-usePageMeta(() => {
-	return {
-		title: __('Assignments'),
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Badge.vue
+++ b/frontend/src/pages/Badge.vue
@@ -24,12 +24,10 @@
 	</div>
 </template>
 <script setup>
-import { createResource, usePageMeta } from 'frappe-ui'
+import { createDocumentResource, createResource } from 'frappe-ui'
 import { computed, inject } from 'vue'
-import { sessionStore } from '../stores/session'

 const dayjs = inject('$dayjs')
-const { brand } = sessionStore()

 const props = defineProps({
 	badgeName: {
@@ -72,11 +70,4 @@ const breadcrumbs = computed(() => {
 		},
 	]
 })
-
-usePageMeta(() => {
-	return {
-		title: badge.data.badge,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -11,7 +11,7 @@
 				>
 					{{ __('Generate Certificates') }}
 				</Button>
-				<Button v-if="canMakeAnnouncement()" @click="openAnnouncementModal()">
+				<Button v-if="user.data?.is_moderator" @click="openAnnouncementModal()">
 					<span>
 						{{ __('Make an Announcement') }}
 					</span>
@@ -67,7 +67,7 @@
 								<BatchDashboard :batch="batch" :isStudent="isStudent" />
 							</div>
 							<div v-else-if="tab.label == 'Dashboard'">
-								<BatchStudents :batch="batch" />
+								<BatchStudents :batch="batch.data" />
 							</div>
 							<div v-else-if="tab.label == 'Classes'">
 								<LiveClass :batch="batch.data.name" />
@@ -199,14 +199,9 @@
 <script setup>
 import { computed, inject, ref, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import {
-	Breadcrumbs,
-	Button,
-	createResource,
-	Tabs,
-	Badge,
-	usePageMeta,
-} from 'frappe-ui'
+import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
+import CourseInstructors from '@/components/CourseInstructors.vue'
+import UserAvatar from '@/components/UserAvatar.vue'
 import {
 	Clock,
 	LayoutDashboard,
@@ -219,10 +214,7 @@ import {
 	Globe,
 	ClipboardPen,
 } from 'lucide-vue-next'
-import { formatTime } from '@/utils'
-import { sessionStore } from '@/stores/session'
-import CourseInstructors from '@/components/CourseInstructors.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
+import { formatTime, updateDocumentTitle } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
 import BatchCourses from '@/components/BatchCourses.vue'
 import LiveClass from '@/components/LiveClass.vue'
@@ -240,9 +232,7 @@ const showAnnouncementModal = ref(false)
 const openCertificateDialog = ref(false)
 const route = useRoute()
 const router = useRouter()
-const { brand } = sessionStore()
 const tabIndex = ref(0)
-const readOnlyMode = window.read_only_mode

 const tabs = computed(() => {
 	let batchTabs = []
@@ -355,18 +345,12 @@ watch(tabIndex, () => {
 	}
 })

-const canMakeAnnouncement = () => {
-	if (readOnlyMode) return false
-
-	if (!batch.data?.students?.length) return false
-
-	return user.data?.is_moderator || user.data?.is_evaluator
-}
-
-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: batch?.data?.title,
-		icon: brand.favicon,
+		title: batch.data?.title,
+		description: batch.data?.description,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -6,45 +6,64 @@
 			<Breadcrumbs :items="breadcrumbs" />
 		</header>
 		<div class="m-5 pb-10">
-			<div class="flex justify-between w-full">
-				<div class="md:w-2/3">
-					<div class="text-3xl font-semibold text-ink-gray-9">
-						{{ batch.data.title }}
-					</div>
-					<div class="my-3 leading-6 text-ink-gray-7">
-						{{ batch.data.description }}
-					</div>
-					<div class="flex avatar-group overlap">
-						<div
-							class="h-6 mr-1"
-							:class="{
-								'avatar-group overlap': batch.data.instructors.length > 1,
-							}"
-						>
-							<UserAvatar
-								v-for="instructor in batch.data.instructors"
-								:user="instructor"
-							/>
-						</div>
-						<CourseInstructors :instructors="batch.data.instructors" />
-					</div>
-					<div
-						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 mt-10"
-						v-html="batch.data.batch_details"
-					></div>
+			<div>
+				<div class="text-3xl font-semibold text-ink-gray-9">
+					{{ batch.data.title }}
 				</div>
-				<div class="hidden md:block">
-					<BatchOverlay :batch="batch" />
+				<div class="my-3 leading-6 text-ink-gray-7">
+					{{ batch.data.description }}
+				</div>
+				<div
+					class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center justify-between lg:w-1/2"
+				>
+					<div class="flex items-center text-ink-gray-7">
+						<BookOpen class="h-4 w-4 mr-2" />
+						<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
+					</div>
+					<span class="hidden lg:block" v-if="batch.data.courses"
+						>&middot;</span
+					>
+					<DateRange
+						:startDate="batch.data.start_date"
+						:endDate="batch.data.end_date"
+					/>
+					<span class="hidden lg:block" v-if="batch.data.start_date"
+						>&middot;</span
+					>
+					<div class="flex items-center text-ink-gray-7">
+						<Clock class="h-4 w-4 mr-2" />
+						<span>
+							{{ formatTime(batch.data.start_time) }} -
+							{{ formatTime(batch.data.end_time) }}
+						</span>
+					</div>
+				</div>
+				<div class="flex avatar-group overlap mt-3">
+					<div
+						class="h-6 mr-1"
+						:class="{
+							'avatar-group overlap': batch.data.instructors.length > 1,
+						}"
+					>
+						<UserAvatar
+							v-for="instructor in batch.data.instructors"
+							:user="instructor"
+						/>
+					</div>
+					<CourseInstructors :instructors="batch.data.instructors" />
 				</div>
 			</div>
-			<!-- <div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
+			<div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
 				<div class="order-2 lg:order-none">
-					
+					<div
+						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 mt-6"
+						v-html="batch.data.batch_details"
+					></div>
 				</div>
 				<div class="order-1 lg:order-none">
 					<BatchOverlay :batch="batch" />
 				</div>
-			</div> -->
+			</div>
 			<div v-if="batch.data.courses.length">
 				<div class="flex items-center mt-10">
 					<div class="text-2xl font-semibold">
@@ -83,9 +102,8 @@
 import { computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { BookOpen, Clock } from 'lucide-vue-next'
-import { formatTime } from '@/utils'
-import { Breadcrumbs, createResource, usePageMeta } from 'frappe-ui'
-import { sessionStore } from '@/stores/session'
+import { formatTime, updateDocumentTitle } from '@/utils'
+import { Breadcrumbs, createResource } from 'frappe-ui'
 import CourseCard from '@/components/CourseCard.vue'
 import BatchOverlay from '@/components/BatchOverlay.vue'
 import DateRange from '../components/Common/DateRange.vue'
@@ -94,7 +112,6 @@ import UserAvatar from '@/components/UserAvatar.vue'

 const user = inject('$user')
 const router = useRouter()
-const { brand } = sessionStore()

 const props = defineProps({
 	batchName: {
@@ -135,12 +152,14 @@ const breadcrumbs = computed(() => {
 	return items
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: batch?.data?.title,
-		icon: brand.favicon,
+		title: batch.data?.title,
+		description: batch.data?.description,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .batch-description p {
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -8,68 +8,99 @@
 				{{ __('Save') }}
 			</Button>
 		</header>
-		<div class="py-5">
-			<div class="px-20 pb-5 space-y-5 border-b mb-5">
-				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
+		<div class="w-1/2 mx-auto py-5">
+			<div class="">
+				<div class="text-lg font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-5">
-					<div class="space-y-5">
+				<div class="space-y-4 mb-4">
+					<FormControl
+						v-model="batch.title"
+						:label="__('Title')"
+						:required="true"
+						class="w-full"
+					/>
+					<div class="flex items-center space-x-5">
 						<FormControl
-							v-model="batch.title"
-							:label="__('Title')"
-							:required="true"
-							class="w-full"
+							v-model="batch.published"
+							type="checkbox"
+							:label="__('Published')"
 						/>
-						<MultiSelect
-							v-model="instructors"
-							doctype="User"
-							:label="__('Instructors')"
-							:required="true"
-							:onCreate="(close) => openSettings('Members', close)"
-							:filters="{ ignore_user_type: 1 }"
+						<FormControl
+							v-model="batch.allow_self_enrollment"
+							type="checkbox"
+							:label="__('Allow self enrollment')"
+						/>
+						<FormControl
+							v-model="batch.certification"
+							type="checkbox"
+							:label="__('Certification')"
 						/>
 					</div>
-					<FormControl
-						v-model="batch.description"
-						:label="__('Short Description')"
-						type="textarea"
-						:rows="8"
-						:placeholder="__('Short description of the batch')"
-						:required="true"
-					/>
 				</div>
 			</div>
-
-			<div class="px-20 pb-5 space-y-5 border-b mb-5">
-				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
-					{{ __('Settings') }}
+			<div class="mb-4">
+				<div class="text-xs text-ink-gray-5 mb-2">
+					{{ __('Meta Image') }}
 				</div>
-				<div class="grid grid-cols-3 gap-5">
-					<FormControl
-						v-model="batch.published"
-						type="checkbox"
-						:label="__('Published')"
-					/>
-					<FormControl
-						v-model="batch.allow_self_enrollment"
-						type="checkbox"
-						:label="__('Allow self enrollment')"
-					/>
-					<FormControl
-						v-model="batch.certification"
-						type="checkbox"
-						:label="__('Certification')"
-					/>
+				<FileUploader
+					v-if="!batch.image"
+					:fileTypes="['image/*']"
+					:validateFile="validateFile"
+					@success="(file) => saveImage(file)"
+				>
+					<template v-slot="{ file, progress, uploading, openFileSelector }">
+						<div class="flex items-center">
+							<div class="border rounded-md w-fit py-5 px-20">
+								<Image class="size-5 stroke-1 text-ink-gray-7" />
+							</div>
+							<div class="ml-4">
+								<Button @click="openFileSelector">
+									{{ __('Upload') }}
+								</Button>
+								<div class="mt-2 text-ink-gray-5 text-sm">
+									{{
+										__(
+											'Appears when the batch URL is shared on any online platform'
+										)
+									}}
+								</div>
+							</div>
+						</div>
+					</template>
+				</FileUploader>
+				<div v-else class="mb-4">
+					<div class="flex items-center">
+						<img :src="batch.image.file_url" class="border rounded-md w-40" />
+						<div class="ml-4">
+							<Button @click="removeImage()">
+								{{ __('Remove') }}
+							</Button>
+							<div class="mt-2 text-ink-gray-5 text-sm">
+								{{
+									__(
+										'Appears when the batch URL is shared on any online platform'
+									)
+								}}
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
+			<MultiSelect
+				v-model="instructors"
+				doctype="User"
+				:label="__('Instructors')"
+				:required="true"
+				:filters="{ ignore_user_type: 1 }"
+			/>

-			<div class="px-20 pb-5 space-y-5 border-b mb-5">
-				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
+			<div class="my-10">
+				<div class="text-lg font-semibold mb-4">
 					{{ __('Date and Time') }}
 				</div>
-				<div class="grid grid-cols-3 gap-10">
-					<div class="space-y-5">
+				<div class="grid grid-cols-2 gap-10">
+					<div>
 						<FormControl
 							v-model="batch.start_date"
 							:label="__('Start Date')"
@@ -84,8 +115,16 @@
 							class="mb-4"
 							:required="true"
 						/>
+						<FormControl
+							v-model="batch.timezone"
+							:label="__('Timezone')"
+							type="text"
+							:placeholder="__('Example: IST (+5:30)')"
+							class="mb-4"
+							:required="true"
+						/>
 					</div>
-					<div class="space-y-5">
+					<div>
 						<FormControl
 							v-model="batch.start_time"
 							:label="__('Start Time')"
@@ -101,47 +140,15 @@
 							:required="true"
 						/>
 					</div>
-					<div class="space-y-5">
-						<FormControl
-							v-model="batch.timezone"
-							:label="__('Timezone')"
-							type="text"
-							:placeholder="__('Example: IST (+5:30)')"
-							class="mb-4"
-							:required="true"
-						/>
-						<FormControl
-							v-model="batch.evaluation_end_date"
-							:label="__('Evaluation End Date')"
-							type="date"
-							class="mb-4"
-						/>
-					</div>
 				</div>
 			</div>

-			<div class="px-20 pb-5 space-y-5 border-b mb-5">
-				<div>
-					<label class="block text-sm text-ink-gray-5 mb-1">
-						{{ __('Batch Details') }}
-						<span class="text-ink-red-3">*</span>
-					</label>
-					<TextEditor
-						:content="batch.batch_details"
-						@change="(val) => (batch.batch_details = val)"
-						:editable="true"
-						:fixedMenu="true"
-						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
-					/>
+			<div class="mb-10">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Settings') }}
 				</div>
-			</div>
-
-			<div class="px-20 pb-5 space-y-5 border-b mb-5">
-				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
-					{{ __('Configurations') }}
-				</div>
-				<div class="grid grid-cols-3 gap-10">
-					<div class="space-y-5">
+				<div class="grid grid-cols-2 gap-10">
+					<div>
 						<FormControl
 							v-model="batch.seat_count"
 							:label="__('Seat Count')"
@@ -149,13 +156,19 @@
 							class="mb-4"
 							:placeholder="__('Number of seats available')"
 						/>
+						<FormControl
+							v-model="batch.evaluation_end_date"
+							:label="__('Evaluation End Date')"
+							type="date"
+							class="mb-4"
+						/>
 						<Link
 							doctype="Email Template"
 							:label="__('Email Template')"
 							v-model="batch.confirmation_email_template"
 						/>
 					</div>
-					<div class="space-y-5">
+					<div>
 						<FormControl
 							v-model="batch.medium"
 							type="select"
@@ -176,79 +189,26 @@
 							doctype="LMS Category"
 							:label="__('Category')"
 							v-model="batch.category"
-							:onCreate="(value, close) => openSettings('Categories', close)"
 						/>
 					</div>
-					<div class="space-y-5">
-						<div>
-							<div class="text-xs text-ink-gray-5">
-								{{ __('Meta Image') }}
-							</div>
-							<FileUploader
-								v-if="!batch.image"
-								:fileTypes="['image/*']"
-								:validateFile="validateFile"
-								@success="(file) => saveImage(file)"
-							>
-								<template
-									v-slot="{ file, progress, uploading, openFileSelector }"
-								>
-									<div class="flex items-center">
-										<div class="border rounded-md w-fit py-5 px-20">
-											<Image class="size-5 stroke-1 text-ink-gray-7" />
-										</div>
-										<div class="ml-4">
-											<Button @click="openFileSelector">
-												{{ __('Upload') }}
-											</Button>
-											<div class="mt-1 text-ink-gray-5 text-sm leading-5">
-												{{
-													__('Appears when the batch URL is shared on socials')
-												}}
-											</div>
-										</div>
-									</div>
-								</template>
-							</FileUploader>
-							<div v-else class="mb-4">
-								<div class="flex items-center">
-									<img
-										:src="batch.image.file_url"
-										class="border rounded-md w-40"
-									/>
-									<div class="ml-4">
-										<Button @click="removeImage()">
-											{{ __('Remove') }}
-										</Button>
-										<div class="mt-2 text-ink-gray-5 text-sm">
-											{{
-												__(
-													'Appears when the batch URL is shared on any online platform'
-												)
-											}}
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
 				</div>
 			</div>

-			<div class="px-20 pb-5 space-y-5">
-				<div class="text-lg text-ink-gray-9 font-semibold">
-					{{ __('Pricing') }}
+			<div class="">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Payment') }}
 				</div>
-				<FormControl
-					v-model="batch.paid_batch"
-					type="checkbox"
-					:label="__('Paid Batch')"
-				/>
-				<div v-if="batch.paid_batch" class="grid grid-cols-3 gap-5">
+				<div>
+					<FormControl
+						v-model="batch.paid_batch"
+						type="checkbox"
+						:label="__('Paid Batch')"
+					/>
 					<FormControl
 						v-model="batch.amount"
 						:label="__('Amount')"
 						type="number"
+						class="my-4"
 					/>
 					<Link
 						doctype="Currency"
@@ -258,6 +218,33 @@
 					/>
 				</div>
 			</div>
+
+			<div class="my-10">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Description') }}
+				</div>
+				<FormControl
+					v-model="batch.description"
+					:label="__('Short Description')"
+					type="textarea"
+					class="my-4"
+					:placeholder="__('Short description of the batch')"
+					:required="true"
+				/>
+				<div>
+					<label class="block text-sm text-ink-gray-5 mb-1">
+						{{ __('Batch Details') }}
+						<span class="text-ink-red-3">*</span>
+					</label>
+					<TextEditor
+						:content="batch.batch_details"
+						@change="(val) => (batch.batch_details = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
@@ -277,21 +264,17 @@ import {
 	Button,
 	TextEditor,
 	createResource,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
 import { useRouter } from 'vue-router'
+import { showToast } from '@/utils'
 import { Image } from 'lucide-vue-next'
 import { capture } from '@/telemetry'
-import { useOnboarding } from 'frappe-ui/frappe'
-import { sessionStore } from '../stores/session'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
-import Link from '@/components/Controls/Link.vue'
-import { openSettings } from '@/utils'
+import { useOnboarding } from 'frappe-ui/frappe'

 const router = useRouter()
 const user = inject('$user')
-const { brand } = sessionStore()
 const { updateOnboardingStep } = useOnboarding('learning')

 const props = defineProps({
@@ -444,13 +427,10 @@ const createNewBatch = () => {
 		{},
 		{
 			onSuccess(data) {
-				if (user.data?.is_system_manager) {
-					updateOnboardingStep('create_first_batch', true, false, () => {
-						localStorage.setItem('firstBatch', data.name)
-					})
-				}
-
 				capture('batch_created')
+				updateOnboardingStep('create_first_batch', true, false, () => {
+					localStorage.setItem('firstBatch', data.name)
+				})
 				router.push({
 					name: 'BatchDetail',
 					params: {
@@ -459,7 +439,7 @@ const createNewBatch = () => {
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -478,7 +458,7 @@ const editBatchDetails = () => {
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -525,11 +505,4 @@ const breadcrumbs = computed(() => {
 	})
 	return crumbs
 })
-
-usePageMeta(() => {
-	return {
-		title: props.batchName == 'new' ? 'New Batch' : batchDetail.data?.title,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -4,7 +4,7 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
-			v-if="canCreateBatch()"
+			v-if="user.data?.is_moderator"
 			:to="{
 				name: 'BatchForm',
 				params: { batchName: 'new' },
@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="batchCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Batches') }}
 			</div>
 			<div
-				v-if="batches.data?.length || batchCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons
@@ -72,8 +70,22 @@
 				<BatchCard :batch="batch" />
 			</router-link>
 		</div>
-		<EmptyState v-else-if="!batches.list.loading" type="Batches" />
-
+		<div
+			v-else-if="!batches.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-48"
+		>
+			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No batches found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{
+					__(
+						'There are no batches matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
+					)
+				}}
+			</div>
+		</div>
 		<div
 			v-if="!batches.list.loading && batches.hasNextPage"
 			class="flex justify-center mt-5"
@@ -88,22 +100,18 @@
 import {
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	FormControl,
 	Select,
 	TabButtons,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus } from 'lucide-vue-next'
-import { sessionStore } from '@/stores/session'
+import { BookOpen, Plus } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'
 import BatchCard from '@/components/BatchCard.vue'
-import EmptyState from '@/components/EmptyState.vue'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
-const { brand } = sessionStore()
 const start = ref(0)
 const pageLength = ref(20)
 const categories = ref([])
@@ -114,13 +122,10 @@ const filters = ref({})
 const is_student = computed(() => user.data?.is_student)
 const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
 const orderBy = ref('start_date')
-const readOnlyMode = window.read_only_mode
-const batchCount = ref(0)

 onMounted(() => {
 	setFiltersFromQuery()
 	updateBatches()
-	getBatchCount()
 	categories.value = [
 		{
 			label: '',
@@ -292,20 +297,6 @@ const batchTabs = computed(() => {
 	return tabs
 })

-const canCreateBatch = () => {
-	if (readOnlyMode) return false
-	if (user.data?.is_moderator || user.data?.is_instructor) return true
-	return false
-}
-
-const getBatchCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Batch',
-	}).then((data) => {
-		batchCount.value = data
-	})
-}
-
 const breadcrumbs = computed(() => [
 	{
 		label: __('Batches'),
@@ -313,10 +304,12 @@ const breadcrumbs = computed(() => [
 	},
 ])

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: __('Batches'),
-		icon: brand.favicon,
+		title: 'Batches',
+		description: 'All upcoming batches.',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/Billing.vue
+++ b/frontend/src/pages/Billing.vue
@@ -151,20 +151,19 @@
 </template>
 <script setup>
 import {
+	Input,
 	Button,
 	createResource,
 	FormControl,
 	Breadcrumbs,
-	usePageMeta,
-	toast,
+	Tooltip,
 } from 'frappe-ui'
 import { reactive, inject, onMounted, computed } from 'vue'
-import { sessionStore } from '../stores/session'
 import Link from '@/components/Controls/Link.vue'
 import NotPermitted from '@/components/NotPermitted.vue'
+import { showToast } from '@/utils/'

 const user = inject('$user')
-const { brand } = sessionStore()

 onMounted(() => {
 	const script = document.createElement('script')
@@ -259,7 +258,7 @@ const generatePaymentLink = () => {
 				window.location.href = data
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -333,7 +332,14 @@ const validateAddress = () => {
 }

 const showError = (err) => {
-	toast.error(err.messages?.[0] || err)
+	createToast({
+		title: 'Error',
+		text: err.messages?.[0] || err,
+		icon: 'x',
+		iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
+		position: 'top-center',
+		timeout: 10,
+	})
 }

 const changeCurrency = (country) => {
@@ -350,11 +356,4 @@ const redirectTo = computed(() => {
 		return `/lms/courses/${props.name}/certification`
 	}
 })
-
-usePageMeta(() => {
-	return {
-		title: __('Billing Details'),
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/CertifiedParticipants.vue
+++ b/frontend/src/pages/CertifiedParticipants.vue
@@ -3,7 +3,7 @@
 		class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<router-link :to="{ name: 'Batches', query: { certification: true } }">
+		<router-link :to="{ name: 'Batches' }">
 			<Button>
 				<template #prefix>
 					<GraduationCap class="h-4 w-4 stroke-1.5" />
@@ -12,13 +12,12 @@
 			</Button>
 		</router-link>
 	</header>
-	<div
-		v-if="participants.data?.length"
-		class="mx-auto w-full max-w-4xl pt-6 pb-10"
-	>
-		<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
-			<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
-				{{ memberCount }} {{ __('certified members') }}
+	<div class="p-5 lg:w-3/4 mx-auto">
+		<div
+			class="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 justify-between mb-5"
+		>
+			<div class="text-lg text-ink-gray-9 font-semibold">
+				{{ __('All Certified Participants') }}
 			</div>
 			<div class="grid grid-cols-2 gap-2">
 				<FormControl
@@ -41,90 +40,76 @@
 				</div>
 			</div>
 		</div>
-		<div class="divide-y">
-			<template v-for="participant in participants.data">
+		<div v-if="participants.data?.length">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
 				<router-link
+					v-for="participant in participants.data"
 					:to="{
 						name: 'ProfileCertificates',
-						params: {
-							username: participant.username,
-						},
+						params: { username: participant.username },
 					}"
-					class="flex sm:rounded px-3 py-2 sm:h-15 hover:bg-surface-gray-2"
 				>
-					<div class="flex items-center w-full space-x-3">
+					<div
+						class="flex items-center space-x-2 border rounded-md hover:bg-surface-menu-bar p-2 text-ink-gray-7"
+					>
 						<Avatar
 							:image="participant.user_image"
-							class="size-8 rounded-full object-contain"
 							:label="participant.full_name"
 							size="2xl"
 						/>
-						<div class="flex flex-col md:flex-row w-full">
-							<div class="flex-1">
-								<div class="text-base font-medium text-ink-gray-8">
-									{{ participant.full_name }}
-								</div>
-								<div
-									v-if="participant.headline"
-									class="mt-1.5 text-base text-ink-gray-5"
-								>
-									{{ participant.headline }}
-								</div>
+						<div class="flex flex-col space-y-2">
+							<div class="font-medium">
+								{{ participant.full_name }}
 							</div>
 							<div
-								class="flex items-center space-x-3 md:space-x-24 text-sm md:text-base mt-1.5"
+								v-if="participant.headline"
+								class="headline text-sm text-ink-gray-7"
 							>
-								<div class="text-ink-gray-5">
-									{{ participant.certificate_count }}
-									{{
-										participant.certificate_count > 1
-											? __('certificates')
-											: __('certificate')
-									}}
-								</div>
-								<span class="text-ink-gray-4 md:hidden">·</span>
-								<div class="text-ink-gray-5">
-									{{ dayjs(participant.issue_date).format('DD MMM YYYY') }}
-								</div>
+								{{ participant.headline }}
 							</div>
 						</div>
 					</div>
 				</router-link>
-			</template>
+			</div>
+			<div
+				v-if="!participants.list.loading && participants.hasNextPage"
+				class="flex justify-center mt-5"
+			>
+				<Button @click="participants.next()">
+					{{ __('Load More') }}
+				</Button>
+			</div>
 		</div>
 		<div
-			v-if="!participants.list.loading && participants.hasNextPage"
-			class="flex justify-center mt-5"
+			v-else-if="!participants.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
 		>
-			<Button @click="participants.next()">
-				{{ __('Load More') }}
-			</Button>
+			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No participants found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{ __('There are no participants matching this criteria.') }}
+			</div>
 		</div>
 	</div>
-	<EmptyState v-else type="Certified Members" />
 </template>
 <script setup>
 import {
 	Avatar,
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	FormControl,
 	Select,
-	usePageMeta,
 } from 'frappe-ui'
-import { computed, inject, onMounted, ref } from 'vue'
-import { GraduationCap } from 'lucide-vue-next'
-import { sessionStore } from '../stores/session'
-import EmptyState from '@/components/EmptyState.vue'
+import { computed, onMounted, ref } from 'vue'
+import { updateDocumentTitle } from '@/utils'
+import { BookOpen, GraduationCap } from 'lucide-vue-next'

 const currentCategory = ref('')
 const filters = ref({})
 const nameFilter = ref('')
-const { brand } = sessionStore()
-const memberCount = ref(0)
-const dayjs = inject('$dayjs')

 onMounted(() => {
 	updateParticipants()
@@ -138,12 +123,6 @@ const participants = createListResource({
 	pageLength: 30,
 })

-const count = call('lms.lms.api.get_count_of_certified_members').then(
-	(data) => {
-		memberCount.value = data
-	}
-)
-
 const categories = createListResource({
 	doctype: 'LMS Certificate',
 	url: 'lms.lms.api.get_certification_categories',
@@ -179,17 +158,18 @@ const updateFilters = () => {

 const breadcrumbs = computed(() => [
 	{
-		label: __('Certified Members'),
+		label: __('Certified Participants'),
 		route: { name: 'CertifiedParticipants' },
 	},
 ])

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: __('Certified Members'),
-		icon: brand.favicon,
+		title: 'Certified Participants',
+		description: 'All participants that have been certified.',
 	}
 })
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .headline {
--- a/frontend/src/pages/CourseCertification.vue
+++ b/frontend/src/pages/CourseCertification.vue
@@ -36,14 +36,12 @@
 </template>
 <script setup>
 import { computed, inject, onMounted, ref } from 'vue'
-import { Breadcrumbs, call, createResource, usePageMeta } from 'frappe-ui'
+import { Breadcrumbs, call, createResource } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '../stores/session'
 import UpcomingEvaluations from '@/components/UpcomingEvaluations.vue'

 const courseTitle = ref(null)
 const evaluator = ref(null)
-const { brand } = sessionStore()
 const courses = ref([])
 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -135,11 +133,4 @@ const breadcrumbs = computed(() => [
 		label: __('Certification'),
 	},
 ])
-
-usePageMeta(() => {
-	return {
-		title: courseTitle.value,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/CourseDetail.vue
+++ b/frontend/src/pages/CourseDetail.vue
@@ -56,7 +56,7 @@
 							<CourseInstructors :instructors="course.data.instructors" />
 						</div>
 					</div>
-					<div v-if="course.data.tags" class="flex my-4 w-fit">
+					<div v-if="course.data.tags" class="flex mt-4 w-fit">
 						<Badge
 							theme="gray"
 							size="lg"
@@ -69,7 +69,7 @@
 					<CourseCardOverlay :course="course" class="md:hidden mb-4" />
 					<div
 						v-html="course.data.description"
-						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 mt-10"
+						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 mt-4"
 					></div>
 					<div class="mt-10">
 						<CourseOutline
@@ -92,24 +92,16 @@
 	</div>
 </template>
 <script setup>
-import {
-	createResource,
-	Breadcrumbs,
-	Badge,
-	Tooltip,
-	usePageMeta,
-} from 'frappe-ui'
+import { createResource, Breadcrumbs, Badge, Tooltip } from 'frappe-ui'
 import { computed } from 'vue'
 import { Users, Star } from 'lucide-vue-next'
-import { sessionStore } from '@/stores/session'
 import CourseCardOverlay from '@/components/CourseCardOverlay.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import CourseReviews from '@/components/CourseReviews.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { updateDocumentTitle } from '@/utils'
 import CourseInstructors from '@/components/CourseInstructors.vue'

-const { brand } = sessionStore()
-
 const props = defineProps({
 	courseName: {
 		type: String,
@@ -135,12 +127,14 @@ const breadcrumbs = computed(() => {
 	return items
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: course?.data?.title,
-		icon: brand.favicon,
+		description: course?.data?.short_introduction,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .avatar-group {
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -3,11 +3,15 @@
 		<div class="grid md:grid-cols-[70%,30%] h-full">
 			<div>
 				<header
-					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
+					class="sticky top-0 z-10 group flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 				>
 					<Breadcrumbs class="h-7" :items="breadcrumbs" />
 					<div class="flex items-center mt-3 md:mt-0">
-						<Button v-if="courseResource.data?.name" @click="trashCourse()">
+						<Button
+							v-if="courseResource.data?.name"
+							@click="trashCourse()"
+							class="invisible group-hover:visible"
+						>
 							<template #icon>
 								<Trash2 class="w-4 h-4 stroke-1.5" />
 							</template>
@@ -19,112 +23,62 @@
 						</Button>
 					</div>
 				</header>
-				<div class="mt-5 mb-5">
-					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
+				<div class="mt-5 mb-10">
+					<div class="container mb-5">
 						<div class="text-lg font-semibold mb-4">
 							{{ __('Details') }}
 						</div>
-						<div class="grid grid-cols-2 gap-5">
-							<FormControl
-								v-model="course.title"
-								:label="__('Title')"
-								:required="true"
-							/>
-							<Link
-								doctype="LMS Category"
-								v-model="course.category"
-								:label="__('Category')"
-								:onCreate="(value, close) => openSettings('Categories', close)"
-							/>
-						</div>
-						<div class="grid grid-cols-2 gap-5">
-							<MultiSelect
-								v-model="instructors"
-								doctype="User"
-								:label="__('Instructors')"
-								:filters="{ ignore_user_type: 1 }"
-								:onCreate="(close) => openSettings('Members', close)"
-								:required="true"
-							/>
-							<div>
-								<div class="mb-1.5 text-xs text-ink-gray-5">
-									{{ __('Tags') }}
-								</div>
-								<div class="flex items-center">
-									<div
-										v-if="course.tags"
-										v-for="tag in course.tags?.split(', ')"
-										class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md mr-2"
-									>
-										{{ tag }}
-										<X
-											class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
-											@click="removeTag(tag)"
-										/>
-									</div>
-									<FormControl
-										v-model="newTag"
-										:placeholder="__('Add a keyword and then press enter')"
-										class="w-full"
-										@keyup.enter="updateTags()"
-										id="tags"
-									/>
-								</div>
+						<FormControl
+							v-model="course.title"
+							:label="__('Title')"
+							class="mb-4"
+							:required="true"
+						/>
+						<FormControl
+							v-model="course.short_introduction"
+							:label="__('Short Introduction')"
+							:placeholder="
+								__(
+									'A one line introduction to the course that appears on the course card'
+								)
+							"
+							class="mb-4"
+							:required="true"
+						/>
+						<div class="mb-4">
+							<div class="mb-1.5 text-sm text-ink-gray-5">
+								{{ __('Course Description') }}
+								<span class="text-ink-red-3">*</span>
 							</div>
-						</div>
-						<div class="grid grid-cols-2 gap-5">
-							<FormControl
-								v-model="course.short_introduction"
-								type="textarea"
-								:rows="4"
-								:label="__('Short Introduction')"
-								:placeholder="
-									__(
-										'A one line introduction to the course that appears on the course card'
-									)
-								"
-								:required="true"
+							<TextEditor
+								:content="course.description"
+								@change="(val) => (course.description = val)"
+								:editable="true"
+								:fixedMenu="true"
+								editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 							/>
-							<div class="mb-4">
-								<div class="text-xs text-ink-gray-5 mb-2">
-									{{ __('Course Image') }}
-									<span class="text-ink-red-3">*</span>
-								</div>
-								<FileUploader
-									v-if="!course.course_image"
-									:fileTypes="['image/*']"
-									:validateFile="validateFile"
-									@success="(file) => saveImage(file)"
+						</div>
+						<div class="mb-4">
+							<div class="text-xs text-ink-gray-5 mb-2">
+								{{ __('Course Image') }}
+								<span class="text-ink-red-3">*</span>
+							</div>
+							<FileUploader
+								v-if="!course.course_image"
+								:fileTypes="['image/*']"
+								:validateFile="validateFile"
+								@success="(file) => saveImage(file)"
+							>
+								<template
+									v-slot="{ file, progress, uploading, openFileSelector }"
 								>
-									<template
-										v-slot="{ file, progress, uploading, openFileSelector }"
-									>
-										<div class="flex items-center">
-											<div class="border rounded-md w-fit py-5 px-20">
-												<Image class="size-5 stroke-1 text-ink-gray-7" />
-											</div>
-											<div class="ml-4">
-												<Button @click="openFileSelector">
-													{{ __('Upload') }}
-												</Button>
-												<div class="mt-1 text-ink-gray-5 text-sm leading-5">
-													{{
-														__('Appears on the course card in the course list')
-													}}
-												</div>
-											</div>
-										</div>
-									</template>
-								</FileUploader>
-								<div v-else class="mb-4">
 									<div class="flex items-center">
-										<img
-											:src="course.course_image.file_url"
-											class="border rounded-md w-40"
-										/>
+										<div class="border rounded-md w-fit py-5 px-20">
+											<Image class="size-5 stroke-1 text-ink-gray-7" />
+										</div>
 										<div class="ml-4">
-											<Button @click="removeImage()">
-												{{ __('Remove') }}
+											<Button @click="openFileSelector">
+												{{ __('Upload') }}
 											</Button>
 											<div class="mt-2 text-ink-gray-5 text-sm">
 												{{
@@ -133,17 +87,85 @@
 											</div>
 										</div>
 									</div>
+								</template>
+							</FileUploader>
+							<div v-else class="mb-4">
+								<div class="flex items-center">
+									<img
+										:src="course.course_image.file_url"
+										class="border rounded-md w-40"
+									/>
+									<div class="ml-4">
+										<Button @click="removeImage()">
+											{{ __('Remove') }}
+										</Button>
+										<div class="mt-2 text-ink-gray-5 text-sm">
+											{{ __('Appears on the course card in the course list') }}
+										</div>
+									</div>
 								</div>
 							</div>
 						</div>
+						<FormControl
+							v-model="course.video_link"
+							:label="__('Preview Video')"
+							:placeholder="
+								__(
+									'Paste the youtube link of a short video introducing the course'
+								)
+							"
+							class="mb-4"
+						/>
+						<div class="mb-4">
+							<div class="mb-1.5 text-xs text-ink-gray-5">
+								{{ __('Tags') }}
+							</div>
+							<div class="flex items-center">
+								<div
+									v-if="course.tags"
+									v-for="tag in course.tags?.split(', ')"
+									class="flex items-center bg-surface-gray-2 text-ink-gray-7 p-2 rounded-md mr-2"
+								>
+									{{ tag }}
+									<X
+										class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
+										@click="removeTag(tag)"
+									/>
+								</div>
+								<FormControl
+									v-model="newTag"
+									:placeholder="__('Add a keyword and then press enter')"
+									class="w-72"
+									@keyup.enter="updateTags()"
+									id="tags"
+								/>
+							</div>
+						</div>
+						<div class="w-1/2 mb-4">
+							<Link
+								doctype="LMS Category"
+								v-model="course.category"
+								:label="__('Category')"
+								:onCreate="(value, close) => openSettings(close)"
+							/>
+						</div>
+						<MultiSelect
+							v-model="instructors"
+							doctype="User"
+							:label="__('Instructors')"
+							:filters="{ ignore_user_type: 1 }"
+							:required="true"
+						/>
 					</div>
-
-					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
-						<div class="text-lg font-semibold">
+					<div class="container border-t">
+						<div class="text-lg font-semibold mt-5 mb-4">
 							{{ __('Settings') }}
 						</div>
-						<div class="grid grid-cols-2 gap-5">
-							<div class="flex flex-col space-y-5">
+						<div class="grid grid-cols-2 gap-10 mb-4">
+							<div
+								v-if="user.data?.is_moderator"
+								class="flex flex-col space-y-4"
+							>
 								<FormControl
 									type="checkbox"
 									v-model="course.published"
@@ -153,9 +175,10 @@
 									v-model="course.published_on"
 									:label="__('Published On')"
 									type="date"
+									class="mb-5"
 								/>
 							</div>
-							<div class="flex flex-col space-y-5">
+							<div class="flex flex-col space-y-3">
 								<FormControl
 									type="checkbox"
 									v-model="course.upcoming"
@@ -174,34 +197,7 @@
 							</div>
 						</div>
 					</div>
-
-					<div class="px-10 pb-5 mb-5 space-y-5 border-b">
-						<div class="">
-							<div class="mb-1.5 text-sm text-ink-gray-5">
-								{{ __('Course Description') }}
-								<span class="text-ink-red-3">*</span>
-							</div>
-							<TextEditor
-								:content="course.description"
-								@change="(val) => (course.description = val)"
-								:editable="true"
-								:fixedMenu="true"
-								editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
-							/>
-						</div>
-
-						<FormControl
-							v-model="course.video_link"
-							:label="__('Preview Video')"
-							:placeholder="
-								__(
-									'Paste the youtube link of a short video introducing the course'
-								)
-							"
-						/>
-					</div>
-
-					<div class="px-10 pb-5 space-y-5">
+					<div class="container border-t space-y-4">
 						<div class="text-lg font-semibold mt-5">
 							{{ __('Pricing and Certification') }}
 						</div>
@@ -222,31 +218,19 @@
 								:label="__('Paid Certificate')"
 							/>
 						</div>
-						<div class="grid grid-cols-2 gap-5">
-							<div class="space-y-5">
-								<FormControl
-									v-if="course.paid_course || course.paid_certificate"
-									v-model="course.course_price"
-									:label="__('Amount')"
-								/>
-								<Link
-									v-if="course.paid_certificate"
-									doctype="Course Evaluator"
-									v-model="course.evaluator"
-									:label="__('Evaluator')"
-									:onCreate="
-										(value, close) => openSettings('Evaluators', close)
-									"
-								/>
-							</div>
-							<Link
-								v-if="course.paid_course || course.paid_certificate"
-								doctype="Currency"
-								v-model="course.currency"
-								:filters="{ enabled: 1 }"
-								:label="__('Currency')"
-							/>
-						</div>
+						<FormControl v-model="course.course_price" :label="__('Amount')" />
+						<Link
+							doctype="Currency"
+							v-model="course.currency"
+							:filters="{ enabled: 1 }"
+							:label="__('Currency')"
+						/>
+						<Link
+							v-if="course.paid_certificate"
+							doctype="Course Evaluator"
+							v-model="course.evaluator"
+							:label="__('Evaluator')"
+						/>
 					</div>
 				</div>
 			</div>
@@ -269,8 +253,6 @@ import {
 	createResource,
 	FormControl,
 	FileUploader,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import {
 	inject,
@@ -282,21 +264,21 @@ import {
 	watch,
 	getCurrentInstance,
 } from 'vue'
+import { showToast, updateDocumentTitle } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
 import { Image, Trash2, X } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
-import { capture } from '@/telemetry'
-import { useOnboarding } from 'frappe-ui/frappe'
-import { sessionStore } from '../stores/session'
-import { openSettings } from '@/utils'
-import Link from '@/components/Controls/Link.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
+import { capture } from '@/telemetry'
+import { useOnboarding } from 'frappe-ui/frappe'
+import { useSettings } from '@/stores/settings'

 const user = inject('$user')
 const newTag = ref('')
-const { brand } = sessionStore()
 const router = useRouter()
 const instructors = ref([])
+const settingsStore = useSettings()
 const app = getCurrentInstance()
 const { updateOnboardingStep } = useOnboarding('learning')
 const { $dialog } = app.appContext.config.globalProperties
@@ -329,7 +311,11 @@ const course = reactive({
 })

 onMounted(() => {
-	if (!user.data?.is_moderator && !user.data?.is_instructor) {
+	if (
+		props.courseName == 'new' &&
+		!user.data?.is_moderator &&
+		!user.data?.is_instructor
+	) {
 		router.push({ name: 'Courses' })
 	}

@@ -415,7 +401,7 @@ const courseResource = createResource({
 			'paid_course',
 			'featured',
 			'enable_certification',
-			'paid_certificate',
+			'paid_certifiate',
 		]
 		for (let idx in checkboxes) {
 			let key = checkboxes[idx]
@@ -448,31 +434,28 @@ const submitCourse = () => {
 			},
 			{
 				onSuccess() {
-					toast.success(__('Course updated successfully'))
+					showToast('Success', 'Course updated successfully', 'check')
 				},
 				onError(err) {
-					toast.error(err.messages?.[0] || err)
+					showToast('Error', err.messages?.[0] || err, 'x')
 				},
 			}
 		)
 	} else {
 		courseCreationResource.submit(course, {
 			onSuccess(data) {
-				if (user.data?.is_system_manager) {
-					updateOnboardingStep('create_first_course', true, false, () => {
-						localStorage.setItem('firstCourse', data.name)
-					})
-				}
-
 				capture('course_created')
-				toast.success(__('Course created successfully'))
+				showToast('Success', 'Course created successfully', 'check')
+				updateOnboardingStep('create_first_course', true, false, () => {
+					localStorage.setItem('firstCourse', data.name)
+				})
 				router.push({
 					name: 'CourseForm',
 					params: { courseName: data.name },
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		})
 	}
@@ -486,7 +469,7 @@ const deleteCourse = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Course deleted successfully'))
+		showToast(__('Success'), __('Course deleted successfully'), 'check')
 		router.push({ name: 'Courses' })
 	},
 })
@@ -550,6 +533,12 @@ const removeImage = () => {
 	course.course_image = null
 }

+const openSettings = (close) => {
+	close()
+	settingsStore.activeTab = 'Categories'
+	settingsStore.isSettingsOpen = true
+}
+
 const check_permission = () => {
 	let user_is_instructor = false
 	if (user.data?.is_moderator) return
@@ -585,10 +574,12 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: courseResource.data?.title || __('New Course'),
-		icon: brand.favicon,
+		title: 'Create a Course',
+		description: 'Create or edit a course for your learning system.',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -4,7 +4,7 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
-			v-if="canCreateCourse()"
+			v-if="user.data?.is_moderator"
 			:to="{
 				name: 'CourseForm',
 				params: { courseName: 'new' },
@@ -20,14 +20,12 @@
 	</header>
 	<div class="p-5 pb-10">
 		<div
-			v-if="courseCount"
 			class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 		>
 			<div class="text-lg text-ink-gray-9 font-semibold">
 				{{ __('All Courses') }}
 			</div>
 			<div
-				v-if="courses.data?.length || courseCount"
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
 				<TabButtons :buttons="courseTabs" v-model="currentTab" />
@@ -59,7 +57,7 @@
 		</div>
 		<div
 			v-if="courses.data?.length"
-			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4"
+			class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-5"
 		>
 			<router-link
 				v-for="course in courses.data"
@@ -68,7 +66,22 @@
 				<CourseCard :course="course" />
 			</router-link>
 		</div>
-		<EmptyState v-else-if="!courses.list.loading" type="Courses" />
+		<div
+			v-else-if="!courses.list.loading"
+			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+		>
+			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+			<div class="text-lg font-medium mb-1">
+				{{ __('No courses found') }}
+			</div>
+			<div class="leading-5 w-2/5 text-center">
+				{{
+					__(
+						'There are no courses matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
+					)
+				}}
+			</div>
+		</div>
 		<div
 			v-if="!courses.list.loading && courses.hasNextPage"
 			class="flex justify-center mt-5"
@@ -83,20 +96,15 @@
 import {
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	FormControl,
 	Select,
 	TabButtons,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref, watch } from 'vue'
-import { Plus } from 'lucide-vue-next'
-import { sessionStore } from '@/stores/session'
-import { canCreateCourse } from '@/utils'
+import { BookOpen, Plus } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'
 import CourseCard from '@/components/CourseCard.vue'
-import EmptyState from '@/components/EmptyState.vue'
-import router from '../router'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
@@ -108,13 +116,10 @@ const title = ref('')
 const certification = ref(false)
 const filters = ref({})
 const currentTab = ref('Live')
-const { brand } = sessionStore()
-const courseCount = ref(0)

 onMounted(() => {
 	setFiltersFromQuery()
 	updateCourses()
-	getCourseCount()
 	categories.value = [
 		{
 			label: '',
@@ -137,49 +142,16 @@ const courses = createListResource({
 	pageLength: pageLength.value,
 	start: start.value,
 	onSuccess(data) {
-		setCategories(data)
+		let allCategories = data.map((course) => course.category)
+		allCategories = allCategories.filter(
+			(category, index) => allCategories.indexOf(category) === index && category
+		)
+		if (categories.value.length <= allCategories.length) {
+			updateCategories(data)
+		}
 	},
 })

-const setCategories = (data) => {
-	let allCategories = data.map((course) => course.category)
-	allCategories = allCategories.filter(
-		(category, index) => allCategories.indexOf(category) === index && category
-	)
-	if (categories.value.length <= allCategories.length) {
-		updateCategories(data)
-	}
-}
-
-const isPersonaCaptured = async () => {
-	let persona = await call('frappe.client.get_single_value', {
-		doctype: 'LMS Settings',
-		field: 'persona_captured',
-	})
-	return persona
-}
-
-const identifyUserPersona = async () => {
-	if (user.data?.is_system_manager && !user.data?.developer_mode) {
-		let personaCaptured = await isPersonaCaptured()
-		if (personaCaptured) return
-		if (!courseCount.value) {
-			router.push({
-				name: 'PersonaForm',
-			})
-		}
-	}
-}
-
-const getCourseCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Course',
-	}).then((data) => {
-		courseCount.value = data
-		identifyUserPersona()
-	})
-}
-
 const updateCourses = () => {
 	updateFilters()
 	courses.update({
@@ -331,10 +303,12 @@ const breadcrumbs = computed(() => [
 	},
 ])

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: __('Courses'),
-		icon: brand.favicon,
+		title: 'Courses',
+		description: 'All published courses.',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="max-w-3xl py-12 mx-auto">
+		<Button
+			icon-left="code"
+			@click="$resources.ping.fetch"
+			:loading="$resources.ping.loading"
+		>
+			Click to send 'ping' request
+		</Button>
+		<div>
+			{{ $resources.ping.data }}
+		</div>
+		<pre>{{ $resources.ping }}</pre>
+
+		<Button @click="showDialog = true">Open Dialog</Button>
+		<Dialog title="Title" v-model="showDialog"> Dialog content </Dialog>
+	</div>
+</template>
+
+<script>
+import { Dialog } from 'frappe-ui'
+
+export default {
+	name: 'Home',
+	data() {
+		return {
+			showDialog: false,
+		}
+	},
+	resources: {
+		ping: {
+			url: 'ping',
+		},
+	},
+	components: {
+		Dialog,
+	},
+}
+</script>
--- a/frontend/src/pages/JobCreation.vue
+++ b/frontend/src/pages/JobCreation.vue
@@ -9,39 +9,34 @@
 			</Button>
 		</header>
 		<div class="py-5">
-			<div class="container border-b mb-4 pb-5">
+			<div class="container border-b mb-4 pb-4">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Job Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-5">
-					<div class="space-y-4">
+				<div class="grid grid-cols-2 gap-4">
+					<div>
 						<FormControl
 							v-model="job.job_title"
 							:label="__('Title')"
+							class="mb-4"
 							:required="true"
 						/>
+						<FormControl
+							v-model="job.location"
+							:label="__('Location')"
+							:required="true"
+						/>
+					</div>
+					<div>
 						<FormControl
 							v-model="job.type"
 							:label="__('Type')"
 							type="select"
 							:options="jobTypes"
-							:required="true"
-						/>
-					</div>
-					<div class="space-y-4">
-						<FormControl
-							v-model="job.location"
-							:label="__('City')"
-							:required="true"
-						/>
-						<Link
-							v-model="job.country"
-							doctype="Country"
-							:label="__('Country')"
+							class="mb-4"
 							:required="true"
 						/>
 						<FormControl
-							v-if="jobName != 'new'"
 							v-model="job.status"
 							:label="__('Status')"
 							type="select"
@@ -50,12 +45,25 @@
 						/>
 					</div>
 				</div>
+				<div class="mt-4">
+					<label class="block text-ink-gray-5 text-xs mb-1">
+						{{ __('Description') }}
+						<span class="text-ink-red-3">*</span>
+					</label>
+					<TextEditor
+						:content="job.description"
+						@change="(val) => (job.description = val)"
+						:editable="true"
+						:fixedMenu="true"
+						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
+					/>
+				</div>
 			</div>
-			<div class="container border-b mb-4 pb-5">
+			<div class="container mb-4 pb-4">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Company Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-5">
+				<div class="grid grid-cols-2 gap-4">
 					<div>
 						<FormControl
 							v-model="job.company_name"
@@ -120,19 +128,6 @@
 					</div>
 				</div>
 			</div>
-			<div class="container mt-4">
-				<label class="block text-ink-gray-5 text-xs mb-1">
-					{{ __('Description') }}
-					<span class="text-ink-red-3">*</span>
-				</label>
-				<TextEditor
-					:content="job.description"
-					@change="(val) => (job.description = val)"
-					:editable="true"
-					:fixedMenu="true"
-					editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
-				/>
-			</div>
 		</div>
 	</div>
 </template>
@@ -144,18 +139,14 @@ import {
 	Button,
 	TextEditor,
 	FileUploader,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import { computed, onMounted, reactive, inject } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
-import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
-import { getFileSize } from '@/utils'
+import { getFileSize, showToast } from '../utils'

 const user = inject('$user')
 const router = useRouter()
-const { brand } = sessionStore()

 const props = defineProps({
 	jobName: {
@@ -223,7 +214,6 @@ const imageResource = createResource({
 const job = reactive({
 	job_title: '',
 	location: '',
-	country: '',
 	type: 'Full Time',
 	status: 'Open',
 	company_name: '',
@@ -260,7 +250,7 @@ const createNewJob = () => {
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -279,7 +269,7 @@ const editJobDetails = () => {
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -324,16 +314,9 @@ const breadcrumbs = computed(() => {
 		},
 		{
 			label: props.jobName == 'new' ? 'New Job' : 'Edit Job',
-			route: { name: 'JobForm' },
+			route: { name: 'JobCreation' },
 		},
 	]
 	return crumbs
 })
-
-usePageMeta(() => {
-	return {
-		title: props.jobName == 'new' ? 'New Job' : jobDetail.data?.title,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -16,30 +16,21 @@
 					},
 				]"
 			/>
-			<div
-				v-if="user.data?.name && !readOnlyMode"
-				class="flex items-center space-x-2"
-			>
+			<div v-if="user.data?.name" class="flex">
 				<router-link
 					v-if="user.data.name == job.data?.owner"
 					:to="{
-						name: 'JobForm',
+						name: 'JobCreation',
 						params: { jobName: job.data?.name },
 					}"
 				>
-					<Button>
+					<Button class="mr-2">
 						<template #prefix>
 							<Pencil class="h-4 w-4 stroke-1.5" />
 						</template>
 						{{ __('Edit') }}
 					</Button>
 				</router-link>
-				<Button @click="redirectToWebsite(job.data?.company_website)">
-					<template #prefix>
-						<SquareArrowOutUpRight class="h-4 w-4 stroke-1.5" />
-					</template>
-					{{ __('Visit Website') }}
-				</Button>
 				<Button
 					v-if="!jobApplication.data?.length"
 					variant="solid"
@@ -50,14 +41,8 @@
 					</template>
 					{{ __('Apply') }}
 				</Button>
-				<Badge v-else variant="subtle" theme="green" size="lg">
-					<template #prefix>
-						<Check class="h-4 w-4" />
-					</template>
-					{{ __('You have applied') }}
-				</Badge>
 			</div>
-			<div v-else-if="!readOnlyMode">
+			<div v-else>
 				<Button @click="redirectToLogin(job.data?.name)">
 					<span>
 						{{ __('Login to apply') }}
@@ -65,63 +50,87 @@
 				</Button>
 			</div>
 		</header>
-		<div v-if="job.data" class="max-w-3xl mx-auto pt-5">
+		<div v-if="job.data" class="max-w-3xl mx-auto">
 			<div class="p-4">
-				<div class="space-y-5 mb-12">
-					<div class="flex">
+				<div class="space-y-5 mb-10">
+					<div class="flex items-center">
 						<img
 							:src="job.data.company_logo"
-							class="size-10 rounded-lg object-contain cursor-pointer mr-4"
+							class="w-16 h-16 rounded-lg object-contain mr-4"
 							:alt="job.data.company_name"
-							@click="redirectToWebsite(job.data.company_website)"
 						/>
-						<div class="">
-							<div class="text-2xl text-ink-gray-9 font-semibold mb-1">
-								{{ job.data.job_title }}
+						<div class="text-2xl text-ink-gray-9 font-semibold mb-4">
+							{{ job.data.job_title }}
+						</div>
+					</div>
+					<div>
+						<div
+							class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
+						>
+							<div class="flex items-center space-x-4">
+								<Building2 class="h-4 w-4 text-ink-green-2" />
+								<div class="flex flex-col space-y-2 text-ink-gray-7">
+									<span class="text-xs text-ink-gray-5 font-medium uppercase">
+										{{ __('Organisation') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ job.data.company_name }}
+									</span>
+								</div>
 							</div>
-							<div class="text-sm text-ink-gray-5 font-semibold">
-								{{ job.data.company_name }} - {{ job.data.location }},
-								{{ job.data.country }}
+							<div class="flex items-center space-x-4">
+								<MapPin class="size-4 text-ink-red-3" />
+								<div class="flex flex-col space-y-2 text-ink-gray-7">
+									<span class="text-xs font-medium uppercase">
+										{{ __('Location') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ job.data.location }}
+									</span>
+								</div>
+							</div>
+							<div class="flex items-center space-x-4">
+								<ClipboardType class="h-4 w-4 text-yellow-500" />
+								<div class="flex flex-col space-y-2 text-ink-gray-7">
+									<span class="text-xs font-medium uppercase">
+										{{ __('Category') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ job.data.type }}
+									</span>
+								</div>
+							</div>
+							<div class="flex items-center space-x-4">
+								<CalendarDays class="h-4 w-4 text-ink-blue-2" />
+								<div class="flex flex-col space-y-2 text-ink-gray-7">
+									<span class="text-xs font-medium uppercase">
+										{{ __('Posted on') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ dayjs(job.data.creation).format('DD MMM YYYY') }}
+									</span>
+								</div>
+							</div>
+							<div
+								v-if="applicationCount.data"
+								class="flex items-center space-x-4"
+							>
+								<SquareUserRound class="h-4 w-4 text-purple-500" />
+								<div class="flex flex-col space-y-2 text-ink-gray-7">
+									<span class="text-xs font-medium uppercase">
+										{{ __('Applications Received') }}
+									</span>
+									<span class="text-sm font-semibold">
+										{{ applicationCount.data }}
+									</span>
+								</div>
 							</div>
 						</div>
 					</div>
-
-					<div class="space-x-5">
-						<Badge size="lg">
-							<template #prefix>
-								<CalendarDays class="size-3 stroke-2 text-ink-gray-7" />
-							</template>
-							{{ dayjs(job.data.creation).fromNow() }}
-						</Badge>
-						<Badge size="lg">
-							<template #prefix>
-								<ClipboardType class="size-3 stroke-2 text-ink-gray-7" />
-							</template>
-							{{ job.data.type }}
-						</Badge>
-						<Badge v-if="applicationCount.data" size="lg">
-							<template #prefix>
-								<SquareUserRound class="size-3 stroke-2 text-ink-gray-7" />
-							</template>
-							{{ applicationCount.data }}
-							{{
-								applicationCount.data == 1 ? __('applicant') : __('applicants')
-							}}
-						</Badge>
-					</div>
 				</div>
-
-				<div class="flex items-center justify-between">
-					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
-					<div>
-						<FileText class="size-3 stroke-1 text-ink-gray-5" />
-					</div>
-					<div class="bg-surface-gray-2 h-px m-1 w-1/2"></div>
-				</div>
-
 				<p
 					v-html="job.data.description"
-					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 mt-12"
+					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 mt-6"
 				></p>
 			</div>
 			<JobApplicationModal
@@ -133,32 +142,23 @@
 	</div>
 </template>
 <script setup>
-import {
-	Badge,
-	Button,
-	Breadcrumbs,
-	createResource,
-	usePageMeta,
-} from 'frappe-ui'
-import { inject, ref } from 'vue'
-import { sessionStore } from '../stores/session'
+import { Button, Breadcrumbs, createResource } from 'frappe-ui'
+import { inject, ref, computed } from 'vue'
+import { updateDocumentTitle } from '@/utils'
 import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 import {
-	Check,
+	MapPin,
 	SendHorizonal,
 	Pencil,
+	Building2,
 	CalendarDays,
-	SquareUserRound,
-	SquareArrowOutUpRight,
-	FileText,
 	ClipboardType,
+	SquareUserRound,
 } from 'lucide-vue-next'

 const user = inject('$user')
 const dayjs = inject('$dayjs')
-const { brand } = sessionStore()
 const showApplicationModal = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	job: {
@@ -215,23 +215,12 @@ const redirectToLogin = (job) => {
 	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }

-const redirectToWebsite = (url) => {
-	window.open(url, '_blank')
-}
-
-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: job.data?.job_title,
-		icon: brand.favicon,
+		description: job.data?.description,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
-<style>
-p {
-	margin-bottom: 0.5rem !important;
-	line-height: 1.5;
-}
-p span {
-	line-height: 1.5;
-}
-</style>
--- a/frontend/src/pages/Jobs.vue
+++ b/frontend/src/pages/Jobs.vue
@@ -10,13 +10,13 @@
 			<router-link
 				v-if="user.data?.name"
 				:to="{
-					name: 'JobForm',
+					name: 'JobCreation',
 					params: {
 						jobName: 'new',
 					},
 				}"
 			>
-				<Button v-if="!readOnlyMode" variant="solid">
+				<Button variant="solid">
 					<template #prefix>
 						<Plus class="h-4 w-4" />
 					</template>
@@ -25,50 +25,43 @@
 			</router-link>
 		</header>
 		<div>
-			<div
-				v-if="jobCount"
-				class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto p-5"
-			>
-				<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
-					{{ __('{0} Open Jobs').format(jobCount) }}
+			<div class="lg:w-3/4 mx-auto p-5">
+				<div
+					class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
+				>
+					<div class="text-xl text-ink-gray-9 font-semibold">
+						{{ __('Find the perfect job for you') }}
+					</div>
+					<div class="grid grid-cols-2 gap-2">
+						<FormControl
+							type="text"
+							:placeholder="__('Search')"
+							v-model="searchQuery"
+							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+							@input="updateJobs"
+						>
+							<template #prefix>
+								<Search
+									class="w-4 h-4 stroke-1.5 text-ink-gray-5"
+									name="search"
+								/>
+							</template>
+						</FormControl>
+						<FormControl
+							v-model="jobType"
+							type="select"
+							:options="jobTypes"
+							class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+							:placeholder="__('Type')"
+							@change="updateJobs"
+						/>
+					</div>
 				</div>

 				<div
-					v-if="jobs.data?.length || jobCount > 0"
-					class="grid grid-cols-1 md:grid-cols-3 gap-2"
+					v-if="jobs.data?.length"
+					class="grid grid-cols-1 lg:grid-cols-2 gap-5"
 				>
-					<FormControl
-						type="text"
-						:placeholder="__('Search')"
-						v-model="searchQuery"
-						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-						@input="updateJobs"
-					>
-						<template #prefix>
-							<Search
-								class="w-4 h-4 stroke-1.5 text-ink-gray-5"
-								name="search"
-							/>
-						</template>
-					</FormControl>
-					<Link
-						doctype="Country"
-						v-model="country"
-						:placeholder="__('Country')"
-						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-					/>
-					<FormControl
-						v-model="jobType"
-						type="select"
-						:options="jobTypes"
-						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
-						:placeholder="__('Type')"
-						@change="updateJobs"
-					/>
-				</div>
-			</div>
-			<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">
-				<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 					<router-link
 						v-for="job in jobs.data"
 						:to="{
@@ -80,36 +73,25 @@
 						<JobCard :job="job" />
 					</router-link>
 				</div>
+				<div v-else class="text-ink-gray-7 italic p-5 w-fit mx-auto">
+					{{ __('No jobs posted') }}
+				</div>
 			</div>
-			<EmptyState v-else type="Job Openings" />
 		</div>
 	</div>
 </template>
 <script setup>
-import {
-	Button,
-	Breadcrumbs,
-	call,
-	createResource,
-	FormControl,
-	usePageMeta,
-} from 'frappe-ui'
+import { Button, Breadcrumbs, createResource, FormControl } from 'frappe-ui'
 import { Plus, Search } from 'lucide-vue-next'
-import { sessionStore } from '../stores/session'
-import { inject, computed, ref, onMounted, watch } from 'vue'
+import { inject, computed, ref, onMounted } from 'vue'
 import JobCard from '@/components/JobCard.vue'
-import Link from '@/components/Controls/Link.vue'
-import EmptyState from '@/components/EmptyState.vue'
+import { updateDocumentTitle } from '@/utils'

 const user = inject('$user')
 const jobType = ref(null)
-const { brand } = sessionStore()
 const searchQuery = ref('')
-const country = ref(null)
 const filters = ref({})
 const orFilters = ref({})
-const jobCount = ref(0)
-const readOnlyMode = window.read_only_mode

 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -117,7 +99,6 @@ onMounted(() => {
 		jobType.value = queries.get('type')
 	}
 	updateJobs()
-	getJobCount()
 })

 const jobs = createResource({
@@ -155,30 +136,8 @@ const updateFilters = () => {
 	} else {
 		orFilters.value = {}
 	}
-
-	if (country.value) {
-		filters.value.country = country.value
-	} else {
-		delete filters.value.country
-	}
 }

-const getJobCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'Job Opportunity',
-		filters: {
-			status: 'Open',
-			disabled: 0,
-		},
-	}).then((data) => {
-		jobCount.value = data
-	})
-}
-
-watch(country, (val) => {
-	updateJobs()
-})
-
 const jobTypes = computed(() => {
 	return [
 		'',
@@ -188,11 +147,12 @@ const jobTypes = computed(() => {
 		{ label: __('Freelance'), value: 'Freelance' },
 	]
 })
-
-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: __('Jobs'),
-		icon: brand.favicon,
+		title: 'Jobs',
+		description: 'An open job board for the community',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/Lesson.vue
+++ b/frontend/src/pages/Lesson.vue
@@ -4,237 +4,166 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<div class="flex items-center space-x-2">
-				<Tooltip v-if="canGoZen()" :text="__('Zen Mode')">
-					<Button @click="goFullScreen()">
-						<template #icon>
-							<Focus class="w-4 h-4 stroke-2" />
-						</template>
-					</Button>
-				</Tooltip>
-				<CertificationLinks :courseName="courseName" />
-			</div>
+			<CertificationLinks :courseName="courseName" />
 		</header>
 		<div class="grid md:grid-cols-[70%,30%] h-screen">
-			<div v-if="lesson.data.no_preview" class="border-r">
-				<div class="shadow rounded-md w-3/4 mt-10 mx-auto text-center p-4">
-					<div class="flex items-center justify-center mt-4 space-x-2">
-						<LockKeyholeIcon class="size-4 stroke-2 text-ink-gray-5" />
-						<div class="text-lg font-semibold text-ink-gray-7">
-							{{ __('This lesson is locked') }}
-						</div>
-					</div>
-					<div class="mt-1 mb-4 text-ink-gray-7">
-						{{
-							__(
-								'This lesson is not available for preview. Please enroll in the course to access it.'
-							)
-						}}
-					</div>
-					<Button
-						v-if="user.data && !lesson.data.disable_self_learning"
-						@click="enrollStudent()"
-						variant="solid"
-					>
-						{{ __('Start Learning') }}
-					</Button>
-					<Badge
-						theme="blue"
-						size="lg"
-						v-else-if="lesson.data.disable_self_learning"
-						class="mt-2"
-					>
-						{{ __('Contact the Administrator to enroll for this course.') }}
-					</Badge>
-					<Button v-else @click="redirectToLogin()">
-						<template #prefix>
-							<LogIn class="w-4 h-4 stroke-1" />
-						</template>
-						{{ __('Login') }}
-					</Button>
-				</div>
-			</div>
 			<div
-				v-else
-				ref="lessonContainer"
-				class="bg-surface-white"
-				:class="{
-					'overflow-y-auto': zenModeEnabled,
-				}"
+				v-if="lesson.data.no_preview"
+				class="border-r text-center pt-10 px-5 md:px-0 pb-10"
 			>
-				<div
-					class="border-r container pt-5 pb-10 px-5 h-full"
-					:class="{
-						'w-full md:w-3/4 mx-auto border-none !pt-10': zenModeEnabled,
-					}"
-				>
-					<div
-						class="flex flex-col md:flex-row md:items-center justify-between"
-					>
-						<div class="flex flex-col">
-							<div class="text-3xl font-semibold text-ink-gray-9">
-								{{ lesson.data.title }}
-							</div>
-
-							<div
-								v-if="zenModeEnabled"
-								class="relative flex items-center space-x-2 text-sm mt-1 text-ink-gray-7 group w-fit mt-2"
-							>
-								<span>
-									{{ lesson.data.chapter_title }} -
-									{{ lesson.data.course_title }}
-								</span>
-								<Info class="size-3" />
-								<div
-									class="hidden group-hover:block rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-xl absolute left-0 top-full mt-2"
-								>
-									{{ Math.ceil(lesson.data.membership.progress) }}%
-									{{ __('completed') }}
-								</div>
-							</div>
-						</div>
-
-						<div class="flex items-center space-x-2 mt-2 md:mt-0">
-							<Button v-if="zenModeEnabled" @click="showDiscussionsInZenMode()">
-								<template #icon>
-									<MessageCircleQuestion class="w-4 h-4 stroke-1.5" />
-								</template>
-							</Button>
-							<router-link
-								v-if="lesson.data.prev"
-								:to="{
-									name: 'Lesson',
-									params: {
-										courseName: courseName,
-										chapterNumber: lesson.data.prev.split('.')[0],
-										lessonNumber: lesson.data.prev.split('.')[1],
-									},
-								}"
-							>
-								<Button>
-									<template #prefix>
-										<ChevronLeft class="w-4 h-4 stroke-1" />
-									</template>
-									<span>
-										{{ __('Previous') }}
-									</span>
-								</Button>
-							</router-link>
-							<router-link
-								v-if="allowEdit()"
-								:to="{
-									name: 'LessonForm',
-									params: {
-										courseName: courseName,
-										chapterNumber: props.chapterNumber,
-										lessonNumber: props.lessonNumber,
-									},
-								}"
-							>
-								<Button>
-									{{ __('Edit') }}
-								</Button>
-							</router-link>
-							<router-link
-								v-if="lesson.data.next"
-								:to="{
-									name: 'Lesson',
-									params: {
-										courseName: courseName,
-										chapterNumber: lesson.data.next.split('.')[0],
-										lessonNumber: lesson.data.next.split('.')[1],
-									},
-								}"
-							>
-								<Button>
-									<template #suffix>
-										<ChevronRight class="w-4 h-4 stroke-1" />
-									</template>
-									<span>
-										{{ __('Next') }}
-									</span>
-								</Button>
-							</router-link>
-							<router-link
-								v-else
-								:to="{
-									name: 'CourseDetail',
-									params: { courseName: courseName },
-								}"
-							>
-								<Button>
-									{{ __('Back to Course') }}
-								</Button>
-							</router-link>
-						</div>
+				<p class="mb-4">
+					{{
+						__(
+							'This lesson is not available for preview. Please enroll in the course to access it.'
+						)
+					}}
+				</p>
+				<Button v-if="user.data" @click="enrollStudent()" variant="solid">
+					{{ __('Start Learning') }}
+				</Button>
+				<Button v-else @click="redirectToLogin()">
+					{{ __('Login') }}
+				</Button>
+			</div>
+			<div v-else class="border-r container pt-5 pb-10 px-5">
+				<div class="flex flex-col md:flex-row md:items-center justify-between">
+					<div class="text-3xl font-semibold text-ink-gray-9">
+						{{ lesson.data.title }}
 					</div>
-
-					<div v-if="!zenModeEnabled" class="flex items-center mt-2">
-						<span
-							class="h-6 mr-1"
-							:class="{
-								'avatar-group overlap': lesson.data.instructors?.length > 1,
+					<div class="flex items-center mt-2 md:mt-0">
+						<router-link
+							v-if="lesson.data.prev"
+							:to="{
+								name: 'Lesson',
+								params: {
+									courseName: courseName,
+									chapterNumber: lesson.data.prev.split('.')[0],
+									lessonNumber: lesson.data.prev.split('.')[1],
+								},
 							}"
 						>
-							<UserAvatar
-								v-for="instructor in lesson.data.instructors"
-								:user="instructor"
-							/>
-						</span>
-						<CourseInstructors
-							v-if="lesson.data?.instructors"
-							:instructors="lesson.data.instructors"
-						/>
+							<Button class="mr-2">
+								<template #prefix>
+									<ChevronLeft class="w-4 h-4 stroke-1" />
+								</template>
+								<span>
+									{{ __('Previous') }}
+								</span>
+							</Button>
+						</router-link>
+						<router-link
+							v-if="allowEdit()"
+							:to="{
+								name: 'LessonForm',
+								params: {
+									courseName: courseName,
+									chapterNumber: props.chapterNumber,
+									lessonNumber: props.lessonNumber,
+								},
+							}"
+						>
+							<Button class="mr-2">
+								{{ __('Edit') }}
+							</Button>
+						</router-link>
+						<router-link
+							v-if="lesson.data.next"
+							:to="{
+								name: 'Lesson',
+								params: {
+									courseName: courseName,
+									chapterNumber: lesson.data.next.split('.')[0],
+									lessonNumber: lesson.data.next.split('.')[1],
+								},
+							}"
+						>
+							<Button>
+								<template #suffix>
+									<ChevronRight class="w-4 h-4 stroke-1" />
+								</template>
+								<span>
+									{{ __('Next') }}
+								</span>
+							</Button>
+						</router-link>
+						<router-link
+							v-else
+							:to="{
+								name: 'CourseDetail',
+								params: { courseName: courseName },
+							}"
+						>
+							<Button>
+								{{ __('Back to Course') }}
+							</Button>
+						</router-link>
 					</div>
+				</div>

-					<div
-						v-if="
-							lesson.data.instructor_content &&
-							JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
-							allowInstructorContent()
-						"
-						class="bg-surface-gray-2 p-3 rounded-md mt-6"
+				<div class="flex items-center mt-2">
+					<span
+						class="h-6 mr-1"
+						:class="{
+							'avatar-group overlap': lesson.data.instructors?.length > 1,
+						}"
 					>
-						<div class="text-ink-gray-5 font-medium">
-							{{ __('Instructor Notes') }}
-						</div>
-						<div
-							id="instructor-content"
-							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
-						v-else-if="lesson.data.instructor_notes"
-						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 mt-8"
-					>
-						<LessonContent :content="lesson.data.instructor_notes" />
-					</div>
-					<div
-						v-if="lesson.data.content"
-						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 mt-8"
-					>
-						<div id="editor"></div>
-					</div>
-					<div
-						v-else
-						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 mt-8"
-					>
-						<LessonContent
-							v-if="lesson.data?.body"
-							:content="lesson.data.body"
-							:youtube="lesson.data.youtube"
-							:quizId="lesson.data.quiz_id"
-						/>
-					</div>
-					<div class="mt-20" ref="discussionsContainer">
-						<Discussions
-							v-if="allowDiscussions"
-							:title="'Questions'"
-							:doctype="'Course Lesson'"
-							:docname="lesson.data.name"
-							:key="lesson.data.name"
+						<UserAvatar
+							v-for="instructor in lesson.data.instructors"
+							:user="instructor"
 						/>
+					</span>
+					<CourseInstructors
+						v-if="lesson.data?.instructors"
+						:instructors="lesson.data.instructors"
+					/>
+				</div>
+				<div
+					v-if="
+						lesson.data.instructor_content &&
+						JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
+						allowInstructorContent()
+					"
+					class="bg-surface-gray-2 p-3 rounded-md mt-6"
+				>
+					<div class="text-ink-gray-5 font-medium">
+						{{ __('Instructor Notes') }}
 					</div>
+					<div
+						id="instructor-content"
+						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
+					v-else-if="lesson.data.instructor_notes"
+					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 mt-6"
+				>
+					<LessonContent :content="lesson.data.instructor_notes" />
+				</div>
+				<div
+					v-if="lesson.data.content"
+					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 mt-5"
+				>
+					<div id="editor"></div>
+				</div>
+				<div
+					v-else
+					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 mt-5"
+				>
+					<LessonContent
+						v-if="lesson.data?.body"
+						:content="lesson.data.body"
+						:youtube="lesson.data.youtube"
+						:quizId="lesson.data.quiz_id"
+					/>
+				</div>
+				<div class="mt-20">
+					<Discussions
+						v-if="allowDiscussions"
+						:title="'Questions'"
+						:doctype="'Course Lesson'"
+						:docname="lesson.data.name"
+						:key="lesson.data.name"
+					/>
 				</div>
 			</div>
 			<div class="sticky top-10">
@@ -264,38 +193,14 @@
 	</div>
 </template>
 <script setup>
-import {
-	createResource,
-	Badge,
-	Breadcrumbs,
-	Button,
-	Tooltip,
-	usePageMeta,
-} from 'frappe-ui'
-import {
-	computed,
-	watch,
-	inject,
-	ref,
-	onMounted,
-	onBeforeUnmount,
-	nextTick,
-} from 'vue'
+import { createResource, Breadcrumbs, Button } from 'frappe-ui'
+import { computed, watch, inject, ref, onMounted, onBeforeUnmount } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRouter, useRoute } from 'vue-router'
-import {
-	ChevronLeft,
-	ChevronRight,
-	LockKeyholeIcon,
-	LogIn,
-	Focus,
-	Info,
-	MessageCircleQuestion,
-} from 'lucide-vue-next'
+import { ChevronLeft, ChevronRight, GraduationCap } from 'lucide-vue-next'
 import Discussions from '@/components/Discussions.vue'
-import { getEditorTools, enablePlyr } from '@/utils'
-import { sessionStore } from '@/stores/session'
+import { getEditorTools, updateDocumentTitle } from '../utils'
 import EditorJS from '@editorjs/editorjs'
 import LessonContent from '@/components/LessonContent.vue'
 import CourseInstructors from '@/components/CourseInstructors.vue'
@@ -309,12 +214,7 @@ const allowDiscussions = ref(false)
 const editor = ref(null)
 const instructorEditor = ref(null)
 const lessonProgress = ref(0)
-const lessonContainer = ref(null)
-const zenModeEnabled = ref(false)
-const hasQuiz = ref(false)
-const discussionsContainer = ref(null)
 const timer = ref(0)
-const { brand } = sessionStore()
 let timerInterval

 const props = defineProps({
@@ -334,27 +234,11 @@ const props = defineProps({

 onMounted(() => {
 	startTimer()
-	document.addEventListener('fullscreenchange', attachFullscreenEvent)
-})
-
-const attachFullscreenEvent = () => {
-	if (document.fullscreenElement) {
-		zenModeEnabled.value = true
-		allowDiscussions.value = false
-	} else {
-		zenModeEnabled.value = false
-		if (!hasQuiz.value) {
-			allowDiscussions.value = true
-		}
-	}
-}
-
-onBeforeUnmount(() => {
-	document.removeEventListener('fullscreenchange', attachFullscreenEvent)
 })

 const lesson = createResource({
 	url: 'lms.lms.utils.get_lesson',
+	cache: ['lesson', props.courseName, props.chapterNumber, props.lessonNumber],
 	makeParams(values) {
 		return {
 			course: props.courseName,
@@ -363,36 +247,35 @@ const lesson = createResource({
 		}
 	},
 	auto: true,
-})
-
-const setupLesson = (data) => {
-	if (Object.keys(data).length === 0) {
-		router.push({
-			name: 'CourseDetail',
-			params: { courseName: props.courseName },
-		})
-		return
-	}
-	lessonProgress.value = data.membership?.progress
-	if (data.content) editor.value = renderEditor('editor', data.content)
-	if (
-		data.instructor_content &&
-		JSON.parse(data.instructor_content)?.blocks?.length > 1
-	)
-		instructorEditor.value = renderEditor(
-			'instructor-content',
-			data.instructor_content
+	onSuccess(data) {
+		if (Object.keys(data).length === 0) {
+			router.push({
+				name: 'CourseDetail',
+				params: { courseName: props.courseName },
+			})
+			return
+		}
+		lessonProgress.value = data.membership?.progress
+		if (data.content) editor.value = renderEditor('editor', data.content)
+		if (
+			data.instructor_content &&
+			JSON.parse(data.instructor_content)?.blocks?.length > 1
 		)
-	editor.value?.isReady.then(() => {
-		checkIfDiscussionsAllowed()
-	})
+			instructorEditor.value = renderEditor(
+				'instructor-content',
+				data.instructor_content
+			)
+		editor.value?.isReady.then(() => {
+			checkIfDiscussionsAllowed()
+		})

-	if (!editor.value && data.body) {
-		const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
-		hasQuiz.value = quizRegex.test(data.body)
-		if (!hasQuiz.value && !zenModeEnabled) allowDiscussions.value = true
-	}
-}
+		if (!editor.value && data.body) {
+			const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
+			const hasQuiz = quizRegex.test(data.body)
+			if (!hasQuiz) allowDiscussions.value = true
+		}
+	},
+})

 const renderEditor = (holder, content) => {
 	// empty the holder
@@ -463,19 +346,10 @@ watch(
 			clearInterval(timerInterval)
 			timer.value = 0
 			startTimer()
-			enablePlyr()
 		}
 	}
 )

-watch(
-	() => lesson.data,
-	(data) => {
-		setupLesson(data)
-		enablePlyr()
-	}
-)
-
 const startTimer = () => {
 	timerInterval = setInterval(() => {
 		timer.value++
@@ -491,13 +365,13 @@ onBeforeUnmount(() => {
 })

 const checkIfDiscussionsAllowed = () => {
+	let quizPresent = false
 	JSON.parse(lesson.data?.content)?.blocks?.forEach((block) => {
-		if (block.type === 'quiz') hasQuiz.value = true
+		if (block.type === 'quiz') quizPresent = true
 	})

 	if (
-		!hasQuiz.value &&
-		!zenModeEnabled.value &&
+		!quizPresent &&
 		(lesson.data?.membership ||
 			user.data?.is_moderator ||
 			user.data?.is_instructor)
@@ -506,7 +380,6 @@ const checkIfDiscussionsAllowed = () => {
 }

 const allowEdit = () => {
-	if (window.read_only_mode) return false
 	if (user.data?.is_moderator) return true
 	if (lesson.data?.instructors?.includes(user.data?.name)) return true
 	return false
@@ -542,58 +415,18 @@ const enrollStudent = () => {
 	)
 }

-const canGoZen = () => {
-	if (
-		user.data?.is_moderator ||
-		user.data?.is_instructor ||
-		user.data?.is_evaluator
-	)
-		return false
-	if (lesson.data?.membership) return true
-	return false
-}
-
-const goFullScreen = () => {
-	if (lessonContainer.value.requestFullscreen) {
-		lessonContainer.value.requestFullscreen()
-	} else if (lessonContainer.value.mozRequestFullScreen) {
-		lessonContainer.value.mozRequestFullScreen()
-	} else if (lessonContainer.value.webkitRequestFullscreen) {
-		lessonContainer.value.webkitRequestFullscreen()
-	} else if (lessonContainer.value.msRequestFullscreen) {
-		lessonContainer.value.msRequestFullscreen()
-	}
-}
-
-const showDiscussionsInZenMode = () => {
-	if (allowDiscussions.value) {
-		allowDiscussions.value = false
-	} else {
-		allowDiscussions.value = true
-		scrollDiscussionsIntoView()
-	}
-}
-
-const scrollDiscussionsIntoView = () => {
-	nextTick(() => {
-		discussionsContainer.value?.scrollIntoView({
-			behavior: 'smooth',
-			block: 'center',
-			inline: 'nearest',
-		})
-	})
-}
-
 const redirectToLogin = () => {
 	window.location.href = `/login?redirect-to=/lms/courses/${props.courseName}`
 }

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: lesson?.data?.title,
-		icon: brand.favicon,
+		title: lesson.data?.title,
+		description: lesson.data?.course,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .avatar-group {
@@ -757,30 +590,4 @@ usePageMeta(() => {
 .tc-table {
 	border-left: 1px solid #e8e8eb;
 }
-
-.plyr__volume input[type='range'] {
-	display: none;
-}
-
-.plyr__control--overlaid {
-	background: radial-gradient(
-		circle,
-		rgba(0, 0, 0, 0.4) 0%,
-		rgba(0, 0, 0, 0.5) 50%
-	);
-}
-
-.plyr__control:hover {
-	background: none;
-}
-
-.plyr--video {
-	border: 1px solid theme('colors.gray.200');
-	border-radius: 8px;
-}
-
-:root {
-	--plyr-range-fill-background: white;
-	--plyr-video-control-background-hover: transparent;
-}
 </style>
--- a/frontend/src/pages/LessonForm.vue
+++ b/frontend/src/pages/LessonForm.vue
@@ -78,14 +78,7 @@
 	</div>
 </template>
 <script setup>
-import {
-	Breadcrumbs,
-	Button,
-	createResource,
-	FormControl,
-	usePageMeta,
-	toast,
-} from 'frappe-ui'
+import { Breadcrumbs, Button, createResource, FormControl } from 'frappe-ui'
 import {
 	computed,
 	reactive,
@@ -94,15 +87,13 @@ import {
 	ref,
 	onBeforeUnmount,
 } from 'vue'
-import { sessionStore } from '../stores/session'
 import EditorJS from '@editorjs/editorjs'
 import LessonHelp from '@/components/LessonHelp.vue'
 import { ChevronRight } from 'lucide-vue-next'
-import { getEditorTools, enablePlyr } from '@/utils'
+import { updateDocumentTitle, createToast, getEditorTools } from '@/utils'
 import { capture } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'

-const { brand } = sessionStore()
 const editor = ref(null)
 const instructorEditor = ref(null)
 const user = inject('$user')
@@ -134,7 +125,6 @@ onMounted(() => {
 	editor.value = renderEditor('content')
 	instructorEditor.value = renderEditor('instructor-notes')
 	window.addEventListener('keydown', keyboardShortcut)
-	enablePlyr()
 })

 const renderEditor = (holder) => {
@@ -143,9 +133,6 @@ const renderEditor = (holder) => {
 		tools: getEditorTools(true),
 		autofocus: true,
 		defaultBlock: 'markdown',
-		onChange: async (api, event) => {
-			enablePlyr()
-		},
 	})
 }

@@ -407,18 +394,16 @@ const createNewLesson = () => {
 					{ lesson: data.name },
 					{
 						onSuccess() {
-							if (user.data?.is_system_manager)
-								updateOnboardingStep('create_first_lesson')
-
 							capture('lesson_created')
-							toast.success(__('Lesson created successfully'))
+							updateOnboardingStep('create_first_lesson')
+							showToast('Success', 'Lesson created successfully', 'check')
 							lessonDetails.reload()
 						},
 					}
 				)
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.message, 'x')
 			},
 		}
 	)
@@ -435,11 +420,11 @@ const editCurrentLesson = () => {
 			},
 			onSuccess() {
 				showSuccessMessage
-					? toast.success(__('Lesson updated successfully'))
+					? showToast('Success', 'Lesson updated successfully', 'check')
 					: ''
 			},
 			onError(err) {
-				toast.error(err.message)
+				showToast('Error', err.message, 'x')
 			},
 		}
 	)
@@ -454,6 +439,20 @@ const validateLesson = () => {
 	}
 }

+const showToast = (title, text, icon) => {
+	createToast({
+		title: title,
+		text: text,
+		icon: icon,
+		iconClasses:
+			icon == 'check'
+				? 'bg-surface-green-3 text-ink-white rounded-md p-px'
+				: 'bg-surface-red-5 text-ink-white rounded-md p-px',
+		position: icon == 'check' ? 'bottom-right' : 'top-center',
+		timeout: icon == 'check' ? 5 : 10,
+	})
+}
+
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
@@ -493,14 +492,14 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: lessonDetails?.data?.lesson
-			? lessonDetails.data.lesson.title
-			: 'New Lesson',
-		icon: brand.favicon,
+		title: 'Lesson Editor',
+		description: 'Create and edit lessons for your course',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .embed-tool__caption,
@@ -615,7 +614,8 @@ usePageMeta(() => {
 }

 iframe {
-	border: none !important;
+	border-top: 3px solid theme('colors.gray.700');
+	border-bottom: 3px solid theme('colors.gray.700');
 }

 .tc-table {
@@ -629,30 +629,4 @@ iframe {
 .ce-popover-item[data-item-name='markdown'] {
 	display: none !important;
 }
-
-.plyr__volume input[type='range'] {
-	display: none;
-}
-
-.plyr__control--overlaid {
-	background: radial-gradient(
-		circle,
-		rgba(0, 0, 0, 0.4) 0%,
-		rgba(0, 0, 0, 0.5) 50%
-	);
-}
-
-.plyr__control:hover {
-	background: none;
-}
-
-.plyr--video {
-	border: 1px solid theme('colors.gray.200');
-	border-radius: 8px;
-}
-
-:root {
-	--plyr-range-fill-background: white;
-	--plyr-video-control-background-hover: transparent;
-}
 </style>
--- a/frontend/src/pages/Notifications.vue
+++ b/frontend/src/pages/Notifications.vue
@@ -65,14 +65,12 @@ import {
 	TabButtons,
 	Button,
 	Tooltip,
-	usePageMeta,
 } from 'frappe-ui'
-import { sessionStore } from '../stores/session'
 import { computed, inject, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { X } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'

-const { brand } = sessionStore()
 const user = inject('$user')
 const socket = inject('$socket')
 const activeTab = ref('Unread')
@@ -147,12 +145,14 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: 'Notifications',
-		icon: brand.favicon,
+		description: 'All your notifications in one place.',
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
 <style>
 .notification strong {
--- a/frontend/src/pages/PersonaForm.vue
+++ b/frontend/src/pages/PersonaForm.vue
@@ -1,154 +0,0 @@
-<template>
-	<div class="flex h-screen overflow-hidden sm:bg-gray-50">
-		<div class="relative h-full z-10 mx-auto sm:w-max pt-40">
-			<div class="mx-auto flex items-center justify-center space-x-2">
-				<LMSLogo class="size-7" />
-				<span
-					class="select-none text-xl font-semibold tracking-tight text-gray-900"
-				>
-					Learning
-				</span>
-			</div>
-			<div
-				class="mx-auto w-full h-fit bg-white py-8 sm:mt-6 sm:w-96 sm:rounded-lg sm:px-8 sm:shadow-xl"
-			>
-				<div class="font-medium text-center mb-8">
-					{{ __('Help us understand your needs') }}
-				</div>
-
-				<div class="mb-5">
-					<div class="text-sm text-gray-700 mb-2">
-						{{ __('What is your use case for Frappe Learning?') }}
-					</div>
-					<FormControl
-						v-model="persona.useCase"
-						type="select"
-						:options="useCaseOptions"
-					/>
-				</div>
-
-				<div class="mb-5">
-					<div class="text-sm text-gray-700 mb-2">
-						{{ __('What best describes your role?') }}
-					</div>
-					<FormControl
-						v-model="persona.role"
-						type="select"
-						:options="roleOptions"
-					/>
-				</div>
-
-				<div class="flex w-full">
-					<Button variant="solid" class="mx-auto" @click="submitPersona()">
-						{{ __('Submit and Continue') }}
-					</Button>
-				</div>
-			</div>
-			<div
-				class="text-center absolute bottom-0 right-0 left-0 mx-auto cursor-pointer text-sm pb-4"
-				@click="skipPersonaForm()"
-			>
-				{{ __('Skip') }}
-			</div>
-		</div>
-	</div>
-</template>
-<script setup>
-import LMSLogo from '@/components/Icons/LMSLogo.vue'
-import { Button, call, FormControl, usePageMeta } from 'frappe-ui'
-import { computed, inject, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { sessionStore } from '@/stores/session'
-
-const user = inject('$user')
-const router = useRouter()
-const { brand } = sessionStore()
-
-const persona = reactive({
-	role: null,
-	useCase: null,
-})
-
-const submitPersona = () => {
-	let responses = {
-		site: user.data?.sitename,
-		no_of_students: persona.noOfStudents,
-		use_case: persona.useCase,
-	}
-	call('lms.lms.api.capture_user_persona', {
-		responses: JSON.stringify(responses),
-	}).then(() => {
-		router.push({
-			name: 'Courses',
-		})
-	})
-}
-
-const skipPersonaForm = () => {
-	call('frappe.client.set_value', {
-		doctype: 'LMS Settings',
-		name: null,
-		fieldname: 'persona_captured',
-		value: 1,
-	}).then(() => {
-		router.push({
-			name: 'Courses',
-		})
-	})
-}
-
-const roleOptions = computed(() => {
-	const options = [
-		'Trainer / Instructor',
-		'Freelancer / Consultant',
-		'HR / L&D Professional',
-		'School / University Admin',
-		'Software Developer',
-		'Community Manager',
-		'Business Owner / Team Lead',
-		'Other',
-	]
-
-	return options.map((option) => ({
-		label: option,
-		value: option,
-	}))
-})
-
-const noOfStudentsOptions = computed(() => {
-	const options = [
-		'Less than 50',
-		'50-200',
-		'200-1000',
-		'1000+',
-		'Not sure yet',
-	]
-
-	return options.map((option) => ({
-		label: option,
-		value: option,
-	}))
-})
-
-const useCaseOptions = computed(() => {
-	const options = [
-		'Teaching students in a school/university',
-		'Training employees in my company',
-		'Onboarding and educating my users/community',
-		'Selling courses and earning income',
-		'Other',
-	]
-
-	return options.map((option) => ({
-		label: option,
-		value: option,
-	}))
-})
-
-usePageMeta(() => {
-	return {
-		title: 'Persona',
-		icon: brand.favicon,
-	}
-})
-</script>
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -25,11 +25,7 @@
 					@select="(imageUrl) => coverImage.submit({ url: imageUrl })"
 				>
 					<template v-slot="{ togglePopover }">
-						<Button
-							v-if="!readOnlyMode"
-							variant="outline"
-							@click="togglePopover()"
-						>
+						<Button variant="outline" @click="togglePopover()">
 							<template #prefix>
 								<Edit class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
 							</template>
@@ -62,7 +58,7 @@
 					</div>
 				</div>
 				<Button
-					v-if="isSessionUser() && !readOnlyMode"
+					v-if="isSessionUser()"
 					class="mt-3 sm:mt-0 md:ml-auto"
 					@click="editProfile()"
 				>
@@ -90,30 +86,23 @@
 	/>
 </template>
 <script setup>
-import {
-	Breadcrumbs,
-	createResource,
-	Button,
-	TabButtons,
-	usePageMeta,
-} from 'frappe-ui'
+import { Breadcrumbs, createResource, Button, TabButtons } from 'frappe-ui'
 import { computed, inject, watch, ref, onMounted, watchEffect } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { Edit } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute, useRouter } from 'vue-router'
 import NoPermission from '@/components/NoPermission.vue'
-import { convertToTitleCase } from '@/utils'
+import { convertToTitleCase, updateDocumentTitle } from '@/utils'
 import EditProfile from '@/components/Modals/EditProfile.vue'
 import EditCoverImage from '@/components/Modals/EditCoverImage.vue'

-const { user, brand } = sessionStore()
+const { user } = sessionStore()
 const $user = inject('$user')
 const route = useRoute()
 const router = useRouter()
 const activeTab = ref('')
 const showProfileModal = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	username: {
@@ -226,10 +215,12 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: profile.data?.full_name,
-		icon: brand.favicon,
+		description: profile.data?.headline,
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/ProfileEvaluator.vue
+++ b/frontend/src/pages/ProfileEvaluator.vue
@@ -4,150 +4,134 @@
 			{{ __('My availability') }}
 		</h2>

-		<div
-			v-if="readOnlyMode"
-			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
-		>
-			<CircleAlert class="size-4 stroke-1.5" />
-			<span>
-				{{
-					__(
-						'You cannot change the availability when the site is being updated.'
-					)
-				}}
-			</span>
+		<div class="">
+			<div
+				class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
+			>
+				<div>
+					{{ __('Day') }}
+				</div>
+				<div>
+					{{ __('Start Time') }}
+				</div>
+				<div>
+					{{ __('End Time') }}
+				</div>
+			</div>
+
+			<div
+				v-if="evaluator.data"
+				v-for="slot in evaluator.data.slots.schedule"
+				class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
+			>
+				<FormControl
+					type="select"
+					:options="days"
+					v-model="slot.day"
+					@focusout.stop="update(slot.name, 'day', slot.day)"
+				/>
+				<FormControl
+					type="time"
+					v-model="slot.start_time"
+					@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
+				/>
+				<FormControl
+					type="time"
+					v-model="slot.end_time"
+					@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
+				/>
+				<X
+					@click="deleteRow(slot.name)"
+					class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
+				/>
+			</div>
+
+			<div
+				class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
+				v-show="showSlotsTemplate"
+			>
+				<FormControl
+					type="select"
+					:options="days"
+					v-model="newSlot.day"
+					@focusout.stop="add()"
+				/>
+				<FormControl
+					type="time"
+					v-model="newSlot.start_time"
+					@focusout.stop="add()"
+				/>
+				<FormControl
+					type="time"
+					v-model="newSlot.end_time"
+					@focusout.stop="add()"
+				/>
+			</div>
+
+			<Button @click="showSlotsTemplate = 1">
+				<template #prefix>
+					<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
+				</template>
+				{{ __('Add Slot') }}
+			</Button>
 		</div>
-		<div v-else>
-			<div>
-				<div
-					class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
-				>
-					<div>
-						{{ __('Day') }}
-					</div>
-					<div>
-						{{ __('Start Time') }}
-					</div>
-					<div>
-						{{ __('End Time') }}
-					</div>
-				</div>
-
-				<div
-					v-if="evaluator.data"
-					v-for="slot in evaluator.data.slots.schedule"
-					class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4 group"
-				>
-					<FormControl
-						type="select"
-						:options="days"
-						v-model="slot.day"
-						@focusout.stop="update(slot.name, 'day', slot.day)"
-					/>
-					<FormControl
-						type="time"
-						v-model="slot.start_time"
-						@focusout.stop="update(slot.name, 'start_time', slot.start_time)"
-					/>
-					<FormControl
-						type="time"
-						v-model="slot.end_time"
-						@focusout.stop="update(slot.name, 'end_time', slot.end_time)"
-					/>
-					<X
-						@click="deleteRow(slot.name)"
-						class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
-					/>
-				</div>
-
-				<div
-					class="grid grid-cols-3 md:grid-cols-4 gap-4 mb-4"
-					v-show="showSlotsTemplate"
-				>
-					<FormControl
-						type="select"
-						:options="days"
-						v-model="newSlot.day"
-						@focusout.stop="add()"
-					/>
-					<FormControl
-						type="time"
-						v-model="newSlot.start_time"
-						@focusout.stop="add()"
-					/>
-					<FormControl
-						type="time"
-						v-model="newSlot.end_time"
-						@focusout.stop="add()"
-					/>
-				</div>
-
-				<Button @click="showSlotsTemplate = 1">
-					<template #prefix>
-						<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
-					</template>
-					{{ __('Add Slot') }}
-				</Button>
+		<div class="my-10">
+			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+				{{ __('I am unavailable') }}
+			</h2>
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+				<FormControl
+					type="date"
+					:label="__('From')"
+					v-model="from"
+					@blur="
+						() => {
+							updateUnavailability.submit({
+								field: 'unavailable_from',
+								value: from,
+							})
+						}
+					"
+				/>
+				<FormControl
+					type="date"
+					:label="__('To')"
+					v-model="to"
+					@blur="
+						() => {
+							updateUnavailability.submit({
+								field: 'unavailable_to',
+								value: to,
+							})
+						}
+					"
+				/>
 			</div>
-			<div class="my-10">
-				<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
-					{{ __('I am unavailable') }}
-				</h2>
-				<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-					<FormControl
-						type="date"
-						:label="__('From')"
-						v-model="from"
-						@blur="
-							() => {
-								updateUnavailability.submit({
-									field: 'unavailable_from',
-									value: from,
-								})
-							}
-						"
-					/>
-					<FormControl
-						type="date"
-						:label="__('To')"
-						v-model="to"
-						@blur="
-							() => {
-								updateUnavailability.submit({
-									field: 'unavailable_to',
-									value: to,
-								})
-							}
-						"
-					/>
-				</div>
-			</div>
-			<div>
-				<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
-					{{ __('My calendar') }}
-				</h2>
-				<div
-					v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
-					class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
-				>
-					<Check class="h-4 w-4 stroke-1.5 mr-2" />
-					{{ __('Your calendar is set.') }}
-				</div>
-				<Button @click="() => authorizeCalendar.submit()">
-					{{ __('Authorize Google Calendar Access') }}
-				</Button>
+		</div>
+		<div>
+			<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
+				{{ __('My calendar') }}
+			</h2>
+			<div
+				v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
+				class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
+			>
+				<Check class="h-4 w-4 stroke-1.5 mr-2" />
+				{{ __('Your calendar is set.') }}
 			</div>
+			<Button @click="() => authorizeCalendar.submit()">
+				{{ __('Authorize Google Calendar Access') }}
+			</Button>
 		</div>
 	</div>
 </template>
 <script setup>
-import { createResource, FormControl, Button, Badge, toast } from 'frappe-ui'
+import { createResource, FormControl, Button } from 'frappe-ui'
 import { computed, reactive, ref, onMounted, inject } from 'vue'
-import { convertToTitleCase } from '@/utils'
-import { Plus, X, Check, CircleAlert } from 'lucide-vue-next'
+import { showToast, convertToTitleCase } from '@/utils'
+import { Plus, X, Check } from 'lucide-vue-next'

 const user = inject('$user')
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	profile: {
@@ -198,7 +182,7 @@ const createSlot = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Slot added successfully'))
+		showToast('Success', 'Slot added successfully', 'check')
 		evaluator.reload()
 		showSlotsTemplate.value = 0
 		newSlot.day = ''
@@ -206,7 +190,7 @@ const createSlot = createResource({
 		newSlot.end_time = ''
 	},
 	onError(err) {
-		toast.error(err.messages?.[0] || err)
+		showToast('Error', err.messages?.[0] || err, 'x')
 	},
 })

@@ -221,10 +205,10 @@ const updateSlot = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Availability updated successfully'))
+		showToast('Success', 'Availability updated successfully', 'check')
 	},
 	onError(err) {
-		toast.error(err.messages?.[0] || err)
+		showToast('Error', err.messages?.[0] || err, 'x')
 	},
 })

@@ -237,11 +221,11 @@ const deleteSlot = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Slot deleted successfully'))
+		showToast('Success', 'Slot deleted successfully', 'check')
 		evaluator.reload()
 	},
 	onError(err) {
-		toast.error(err.messages?.[0] || err)
+		showToast('Error', err.messages?.[0] || err, 'x')
 	},
 })

@@ -256,10 +240,10 @@ const updateUnavailability = createResource({
 		}
 	},
 	onSuccess() {
-		toast.success(__('Unavailability updated successfully'))
+		showToast('Success', 'Unavailability updated successfully', 'check')
 	},
 	onError(err) {
-		toast.error(err.messages?.[0] || err)
+		showToast('Error', err.messages?.[0] || err, 'x')
 	},
 })

--- a/frontend/src/pages/ProfileRoles.vue
+++ b/frontend/src/pages/ProfileRoles.vue
@@ -4,16 +4,6 @@
 			{{ __('Settings') }}
 		</h2>
 		<div
-			v-if="readOnlyMode"
-			class="flex items-center space-x-2 text-sm text-ink-gray-7 bg-surface-gray-1 px-3 py-2 rounded-md w-full text-center"
-		>
-			<CircleAlert class="size-4 stroke-1.5" />
-			<span>
-				{{ __('You cannot change the roles in read-only mode.') }}
-			</span>
-		</div>
-		<div
-			v-else
 			class="flex flex-col md:flex-row gap-4 md:gap-0 justify-between w-3/4 mt-5"
 		>
 			<FormControl
@@ -44,16 +34,14 @@
 	</div>
 </template>
 <script setup>
-import { FormControl, createResource, toast } from 'frappe-ui'
+import { FormControl, createResource } from 'frappe-ui'
 import { ref } from 'vue'
-import { convertToTitleCase } from '@/utils'
-import { CircleAlert } from 'lucide-vue-next'
+import { showToast, convertToTitleCase } from '@/utils'

 const moderator = ref(false)
 const course_creator = ref(false)
 const batch_evaluator = ref(false)
 const lms_student = ref(false)
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	profile: {
@@ -102,7 +90,7 @@ const changeRole = (role) => {
 		},
 		{
 			onSuccess(data) {
-				toast.success(__('Role updated successfully'))
+				showToast('Success', 'Role updated successfully', 'check')
 			},
 		}
 	)
--- a/frontend/src/pages/ProgramForm.vue
+++ b/frontend/src/pages/ProgramForm.vue
@@ -13,7 +13,7 @@
 		<!-- Courses -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg text-ink-gray-9 font-semibold">
+				<div class="text-lg font-semibold">
 					{{ __('Program Courses') }}
 				</div>
 				<Button
@@ -75,7 +75,7 @@
 		<!-- Members -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg text-ink-gray-9 font-semibold">
+				<div class="text-lg font-semibold">
 					{{ __('Program Members') }}
 				</div>
 				<Button
@@ -168,7 +168,6 @@
 					ignore_user_type: 1,
 				}"
 				:label="__('Program Member')"
-				:onCreate="(value, close) => openSettings('Members', close)"
 			/>
 		</template>
 	</Dialog>
@@ -187,18 +186,14 @@ import {
 	ListHeader,
 	ListHeaderItem,
 	ListSelectBanner,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import { computed, ref } from 'vue'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-import { sessionStore } from '@/stores/session'
-import { openSettings } from '@/utils'
-import Draggable from 'vuedraggable'
 import Link from '@/components/Controls/Link.vue'
+import { showToast } from '@/utils/'
+import Draggable from 'vuedraggable'
+import { useRouter } from 'vue-router'

-const { brand } = sessionStore()
 const showDialog = ref(false)
 const currentForm = ref(null)
 const course = ref(null)
@@ -231,11 +226,11 @@ const addProgramCourse = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				course.value = null
-				toast.success(__('Course added to program'))
+				showToast(__('Success'), __('Course added to program'), 'check')
 				program.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -253,11 +248,11 @@ const addProgramMember = () => {
 			onSuccess(data) {
 				showDialog.value = false
 				member.value = null
-				toast.success(__('Member added to program'))
+				showToast(__('Success'), __('Member added to program'), 'check')
 				program.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -274,11 +269,11 @@ const remove = (selections, unselectAll, doctype) => {
 		{
 			onSuccess(data) {
 				unselectAll()
-				toast.success(__('Items removed successfully'))
+				showToast(__('Success'), __('Items removed successfully'), 'check')
 				program.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -300,11 +295,11 @@ const updateOrder = (e) => {
 		},
 		{
 			onSuccess(data) {
-				toast.success(__('Course moved successfully'))
+				showToast(__('Success'), __('Course moved successfully'), 'check')
 				program.reload()
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		}
 	)
@@ -369,11 +364,4 @@ const breadbrumbs = computed(() => {
 		},
 	]
 })
-
-usePageMeta(() => {
-	return {
-		title: program.doc?.title,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Programs.vue
+++ b/frontend/src/pages/Programs.vue
@@ -4,7 +4,7 @@
 	>
 		<Breadcrumbs :items="breadbrumbs" />
 		<Button
-			v-if="canCreateProgram()"
+			v-if="user.data?.is_moderator || user.data?.is_instructor"
 			@click="showDialog = true"
 			variant="solid"
 		>
@@ -46,7 +46,7 @@
 							params: { programName: program.name },
 						}"
 					>
-						<Button v-if="!readOnlyMode">
+						<Button>
 							<template #prefix>
 								<Edit class="h-4 w-4 stroke-1.5" />
 							</template>
@@ -82,7 +82,22 @@
 			</div>
 		</div>
 	</div>
-	<EmptyState v-else type="Programs" />
+	<div
+		v-else
+		class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+	>
+		<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+		<div class="text-xl font-medium">
+			{{ __('No programs found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'There are no programs available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+				)
+			}}
+		</div>
+	</div>

 	<Dialog
 		v-model="showDialog"
@@ -111,24 +126,19 @@ import {
 	createResource,
 	Dialog,
 	FormControl,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'
-import { Edit, Plus, LockKeyhole } from 'lucide-vue-next'
+import { BookOpen, Edit, Plus, LockKeyhole } from 'lucide-vue-next'
 import CourseCard from '@/components/CourseCard.vue'
-import EmptyState from '@/components/EmptyState.vue'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '../stores/session'
+import { showToast } from '@/utils'
 import { useSettings } from '@/stores/settings'

-const { brand } = sessionStore()
 const user = inject('$user')
 const showDialog = ref(false)
 const router = useRouter()
 const title = ref('')
 const settings = useSettings()
-const readOnlyMode = window.read_only_mode

 onMounted(() => {
 	if (
@@ -184,7 +194,7 @@ const enrollMember = (program, course) => {
 			}
 		})
 		.catch((err) => {
-			toast.error(err.messages?.[0] || err)
+			showToast('Error', err.messages?.[0] || err, 'x')
 		})
 }

@@ -195,22 +205,9 @@ const lockCourse = (course) => {
 	return true
 }

-const canCreateProgram = () => {
-	if (readOnlyMode) return false
-	if (user.data?.is_moderator || user.data?.is_instructor) return true
-	return false
-}
-
 const breadbrumbs = computed(() => [
 	{
-		label: __('Programs'),
+		label: 'Programs',
 	},
 ])
-
-usePageMeta(() => {
-	return {
-		title: __('Programs'),
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/QuizForm.vue
+++ b/frontend/src/pages/QuizForm.vue
@@ -3,7 +3,7 @@
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
-		<div v-if="!readOnlyMode" class="space-x-2">
+		<div class="space-x-2">
 			<router-link
 				v-if="quizDetails.data?.name"
 				:to="{
@@ -38,7 +38,7 @@
 	<div class="w-3/4 mx-auto py-5">
 		<!-- Details -->
 		<div class="mb-8">
-			<div class="font-semibold text-ink-gray-9 mb-4">
+			<div class="font-semibold mb-4">
 				{{ __('Details') }}
 			</div>
 			<FormControl
@@ -75,7 +75,7 @@

 				<!-- Settings -->
 				<div class="mb-8">
-					<div class="font-semibold text-ink-gray-9 mb-4">
+					<div class="font-semibold mb-4">
 						{{ __('Settings') }}
 					</div>
 					<div class="grid grid-cols-3 gap-5 my-4">
@@ -93,7 +93,7 @@
 				</div>

 				<div class="mb-8">
-					<div class="font-semibold text-ink-gray-9 mb-4">
+					<div class="font-semibold mb-4">
 						{{ __('Shuffle Settings') }}
 					</div>
 					<div class="grid grid-cols-3">
@@ -113,10 +113,10 @@
 				<!-- Questions -->
 				<div>
 					<div class="flex items-center justify-between mb-4">
-						<div class="font-semibold text-ink-gray-9">
+						<div class="font-semibold">
 							{{ __('Questions') }}
 						</div>
-						<Button v-if="!readOnlyMode" @click="openQuestionModal()">
+						<Button @click="openQuestionModal()">
 							<template #prefix>
 								<Plus class="w-4 h-4" />
 							</template>
@@ -197,8 +197,6 @@ import {
 	ListRowItem,
 	ListSelectBanner,
 	Button,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import {
 	computed,
@@ -209,13 +207,11 @@ import {
 	onBeforeUnmount,
 	watch,
 } from 'vue'
-import { sessionStore } from '../stores/session'
 import { Plus, Trash2 } from 'lucide-vue-next'
-import { updateDocumentTitle } from '@/utils'
-import { useRouter } from 'vue-router'
 import Question from '@/components/Modals/Question.vue'
+import { showToast, updateDocumentTitle } from '@/utils'
+import { useRouter } from 'vue-router'

-const { brand } = sessionStore()
 const showQuestionModal = ref(false)
 const currentQuestion = reactive({
 	question: '',
@@ -224,7 +220,6 @@ const currentQuestion = reactive({
 })
 const user = inject('$user')
 const router = useRouter()
-const readOnlyMode = window.read_only_mode

 const props = defineProps({
 	quizID: {
@@ -341,14 +336,14 @@ const createQuiz = () => {
 		{},
 		{
 			onSuccess(data) {
-				toast.success(__('Quiz created successfully'))
+				showToast(__('Success'), __('Quiz created successfully'), 'check')
 				router.push({
 					name: 'QuizForm',
 					params: { quizID: data.name },
 				})
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)
@@ -360,10 +355,10 @@ const updateQuiz = () => {
 		{
 			onSuccess(data) {
 				quiz.total_marks = data.total_marks
-				toast.success(__('Quiz updated successfully'))
+				showToast(__('Success'), __('Quiz updated successfully'), 'check')
 			},
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)
@@ -429,7 +424,7 @@ const deleteQuestions = (selections, unselectAll) => {
 		},
 		{
 			onSuccess() {
-				toast.success(__('Questions deleted successfully'))
+				showToast(__('Success'), __('Questions deleted successfully'), 'check')
 				quizDetails.reload()
 				unselectAll()
 			},
@@ -446,7 +441,11 @@ const breadcrumbs = computed(() => {
 			},
 		},
 	]
-
+	/* if (quizDetails.data) {
+		crumbs.push({
+			label: quiz.title,
+		})
+	} */
 	crumbs.push({
 		label: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
 		route: { name: 'QuizForm', params: { quizID: props.quizID } },
@@ -454,10 +453,12 @@ const breadcrumbs = computed(() => {
 	return crumbs
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
-		icon: brand.favicon,
+		description: __('Form to create and edit quizzes'),
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/QuizPage.vue
+++ b/frontend/src/pages/QuizPage.vue
@@ -14,12 +14,11 @@
 </template>
 <script setup>
 import Quiz from '@/components/Quiz.vue'
-import { createResource, Breadcrumbs, usePageMeta } from 'frappe-ui'
+import { createResource, Breadcrumbs } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '../stores/session'
+import { updateDocumentTitle } from '@/utils'

-const { brand } = sessionStore()
 const user = inject('$user')
 const router = useRouter()
 const fromLesson = ref(false)
@@ -57,10 +56,12 @@ const breadcrumbs = computed(() => {
 	return [{ label: __('Quiz Submission') }, { label: title.data?.title }]
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: `${title.data?.title}`,
-		icon: brand.favicon,
+		title: title.data?.title,
+		description: __('Quiz Submission'),
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/QuizSubmission.vue
+++ b/frontend/src/pages/QuizSubmission.vue
@@ -2,10 +2,10 @@
 	<header
 		class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
-		<Breadcrumbs v-if="submissionDetails.doc" :items="breadcrumbs" />
+		<Breadcrumbs v-if="submisisonDetails.doc" :items="breadcrumbs" />
 		<div class="space-x-2">
 			<Badge
-				v-if="submissionDetails.isDirty"
+				v-if="submisisonDetails.isDirty"
 				:label="__('Not Saved')"
 				variant="subtle"
 				theme="orange"
@@ -15,19 +15,19 @@
 			</Button>
 		</div>
 	</header>
-	<div v-if="submissionDetails.doc" class="w-2/3 border-x mx-auto py-5">
-		<div class="text-xl px-10 font-semibold text-ink-gray-9 mb-5">
-			{{ submissionDetails.doc.member_name }}
+	<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-5">
+		<div class="text-xl font-semibold text-ink-gray-9">
+			{{ submisisonDetails.doc.member_name }}
 		</div>
-		<div class="space-y-4 border-b pb-5 px-10">
+		<div class="space-y-4 border p-5 rounded-md">
 			<div class="grid grid-cols-2 gap-5">
 				<FormControl
-					v-model="submissionDetails.doc.quiz_title"
+					v-model="submisisonDetails.doc.quiz_title"
 					:label="__('Quiz')"
 					:disabled="true"
 				/>
 				<FormControl
-					v-model="submissionDetails.doc.member_name"
+					v-model="submisisonDetails.doc.member_name"
 					:label="__('Member')"
 					:disabled="true"
 				/>
@@ -35,39 +35,39 @@

 			<div class="grid grid-cols-2 gap-5">
 				<FormControl
-					v-model="submissionDetails.doc.score"
+					v-model="submisisonDetails.doc.score"
 					:label="__('Score')"
 					:disabled="true"
 				/>
 				<FormControl
-					v-model="submissionDetails.doc.percentage"
+					v-model="submisisonDetails.doc.percentage"
 					:label="__('Percentage')"
 					:disabled="true"
 				/>
 			</div>
 		</div>

-		<div class="divide-y">
-			<div
-				v-for="(row, index) in submissionDetails.doc.result"
-				class="py-5 px-10 space-y-4"
-			>
-				<div class="text-ink-gray-9">
-					<span class="font-semibold"> {{ __('Question') }}: </span>
-					<span class="leading-5" v-html="row.question"> </span>
-				</div>
-				<div class="">
-					<span class="font-semibold"> {{ __('Answer') }} </span>
-					<span class="leading-5" v-html="row.answer"></span>
-				</div>
-				<div class="grid grid-cols-2 gap-5">
-					<FormControl v-model="row.marks" :label="__('Marks')" />
-					<FormControl
-						v-model="row.marks_out_of"
-						:label="__('Marks out of')"
-						:disabled="true"
-					/>
-				</div>
+		<div
+			v-for="(row, index) in submisisonDetails.doc.result"
+			class="border p-5 rounded-md space-y-4"
+		>
+			<div class="flex items-start space-x-1 font-semibold text-ink-gray-9">
+				<!-- <span>
+					{{ index + 1 }}.
+				</span> -->
+				<span class="leading-5" v-html="row.question"> </span>
+			</div>
+			<div class="leading-5 text-ink-gray-7 space-x-1">
+				<span> {{ __('Answer') }}: </span>
+				<span v-html="row.answer"></span>
+			</div>
+			<div class="grid grid-cols-2 gap-5">
+				<FormControl v-model="row.marks" :label="__('Marks')" />
+				<FormControl
+					v-model="row.marks_out_of"
+					:label="__('Marks out of')"
+					:disabled="true"
+				/>
 			</div>
 		</div>
 	</div>
@@ -79,14 +79,11 @@ import {
 	FormControl,
 	Button,
 	Badge,
-	usePageMeta,
-	toast,
 } from 'frappe-ui'
 import { computed, onBeforeUnmount, onMounted, inject } from 'vue'
 import { useRouter } from 'vue-router'
-import { sessionStore } from '@/stores/session'
+import { showToast } from '@/utils'

-const { brand } = sessionStore()
 const router = useRouter()
 const user = inject('$user')

@@ -119,7 +116,7 @@ const props = defineProps({
 	},
 })

-const submissionDetails = createDocumentResource({
+const submisisonDetails = createDocumentResource({
 	doctype: 'LMS Quiz Submission',
 	name: props.submission,
 	auto: true,
@@ -132,31 +129,24 @@ const breadcrumbs = computed(() => {
 			route: {
 				name: 'QuizSubmissionList',
 				params: {
-					quizID: submissionDetails.doc.quiz,
+					quizID: submisisonDetails.doc.quiz,
 				},
 			},
 		},
 		{
-			label: submissionDetails.doc.quiz_title,
+			label: submisisonDetails.doc.quiz_title,
 		},
 	]
 })

 const saveSubmission = () => {
-	submissionDetails.save.submit(
+	submisisonDetails.save.submit(
 		{},
 		{
 			onError(err) {
-				toast.error(err.messages?.[0] || err)
+				showToast(__('Error'), __(err.messages?.[0] || err), 'x')
 			},
 		}
 	)
 }
-
-usePageMeta(() => {
-	return {
-		title: `${submissionDetails.doc?.quiz_title}`,
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/QuizSubmissionList.vue
+++ b/frontend/src/pages/QuizSubmissionList.vue
@@ -40,7 +40,6 @@
 			</Button>
 		</div>
 	</div>
-	<EmptyState v-else />
 </template>
 <script setup>
 import {
@@ -52,14 +51,10 @@ import {
 	ListRows,
 	ListHeader,
 	ListHeaderItem,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, onMounted, inject } from 'vue'
-import { sessionStore } from '../stores/session'
 import { useRouter } from 'vue-router'
-import EmptyState from '@/components/EmptyState.vue'

-const { brand } = sessionStore()
 const router = useRouter()
 const user = inject('$user')

@@ -110,11 +105,4 @@ const quizColumns = computed(() => {
 const breadcrumbs = computed(() => {
 	return [{ label: __('Quiz Submissions') }]
 })
-
-usePageMeta(() => {
-	return {
-		title: __('Quiz Submissions'),
-		icon: brand.favicon,
-	}
-})
 </script>
--- a/frontend/src/pages/Quizzes.vue
+++ b/frontend/src/pages/Quizzes.vue
@@ -4,7 +4,6 @@
 	>
 		<Breadcrumbs :items="breadcrumbs" />
 		<router-link
-			v-if="!readOnlyMode"
 			:to="{
 				name: 'QuizForm',
 				params: {
@@ -21,9 +20,6 @@
 		</router-link>
 	</header>
 	<div v-if="quizzes.data?.length" class="md:w-3/4 md:mx-auto py-5 mx-5">
-		<div v-if="quizCount" class="text-xl font-semibold text-ink-gray-7 mb-4">
-			{{ __('{0} Quizzes').format(quizCount) }}
-		</div>
 		<ListView
 			:columns="quizColumns"
 			:rows="quizzes.data"
@@ -56,38 +52,46 @@
 			</Button>
 		</div>
 	</div>
-	<EmptyState v-else type="Quizzes" />
+	<div
+		v-else
+		class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+	>
+		<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
+		<div class="text-xl font-medium">
+			{{ __('No quizzes found') }}
+		</div>
+		<div class="leading-5">
+			{{
+				__(
+					'You have not created any quizzes yet. To create a new quiz, click on the "New Quiz" button above.'
+				)
+			}}
+		</div>
+	</div>
 </template>
 <script setup>
 import {
 	Breadcrumbs,
 	Button,
-	call,
 	createListResource,
 	ListView,
 	ListRows,
 	ListRow,
 	ListHeader,
 	ListHeaderItem,
-	usePageMeta,
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
-import { computed, inject, onMounted, ref } from 'vue'
-import { Plus } from 'lucide-vue-next'
-import { sessionStore } from '@/stores/session'
-import EmptyState from '@/components/EmptyState.vue'
+import { computed, inject, onMounted } from 'vue'
+import { BookOpen, Plus } from 'lucide-vue-next'
+import { updateDocumentTitle } from '@/utils'

-const { brand } = sessionStore()
 const user = inject('$user')
 const router = useRouter()
-const quizCount = ref(0)
-const readOnlyMode = window.read_only_mode

 onMounted(() => {
 	if (!user.data?.is_moderator && !user.data?.is_instructor) {
 		router.push({ name: 'Courses' })
 	}
-	getQuizCount()
 })

 const quizFilter = computed(() => {
@@ -106,14 +110,6 @@ const quizzes = createListResource({
 	orderBy: 'modified desc',
 })

-const getQuizCount = () => {
-	call('frappe.client.get_count', {
-		doctype: 'LMS Quiz',
-	}).then((data) => {
-		quizCount.value = data
-	})
-}
-
 const quizColumns = computed(() => {
 	return [
 		{
@@ -147,10 +143,12 @@ const breadcrumbs = computed(() => {
 	]
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
 		title: __('Quizzes'),
-		icon: brand.favicon,
+		description: __('List of quizzes'),
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/frontend/src/pages/SCORMChapter.vue
+++ b/frontend/src/pages/SCORMChapter.vue
@@ -39,13 +39,11 @@ import {
 	createDocumentResource,
 	createListResource,
 	createResource,
-	usePageMeta,
 } from 'frappe-ui'
 import { computed, inject, onBeforeMount, ref } from 'vue'
 import { useSidebar } from '@/stores/sidebar'
-import { sessionStore } from '../stores/session'
+import { updateDocumentTitle } from '@/utils'

-const { brand } = sessionStore()
 const sidebarStore = useSidebar()
 const user = inject('$user')
 const readyToRender = ref(false)
@@ -197,10 +195,14 @@ const breadcrumbs = computed(() => {
 	]
 })

-usePageMeta(() => {
+const pageMeta = computed(() => {
 	return {
-		title: chapter.doc?.title,
-		icon: brand.favicon,
+		title: chapter?.doc?.title,
+		description: __('This is a chapter in the course {0}').format(
+			chapter?.doc?.course_title
+		),
 	}
 })
+
+updateDocumentTitle(pageMeta)
 </script>
--- a/Show More
+++ b/Show More