diff --git a/src/src/lib/components/workspaces/workspace/Sidebar.svelte b/src/src/lib/components/workspaces/workspace/Sidebar.svelte
index ee6af70e..0f115d7d 100644
--- a/src/src/lib/components/workspaces/workspace/Sidebar.svelte
+++ b/src/src/lib/components/workspaces/workspace/Sidebar.svelte
@@ -19,12 +19,13 @@
 	type NavLink = { name: string; href: string };
 
 	interface LecturerLinks {
-		dashboard: NavLink[];
+		announcements: NavLink[];
 		management: NavLink[];
 		resources: NavLink[];
 	}
 
 	interface StudentLinks {
+		announcements: NavLink[];
 		courseWork: NavLink[];
 		additional: NavLink[];
 	}
@@ -36,25 +37,24 @@
 
 	const navLinks: NavLinks = {
 		lecturer: {
-			dashboard: [{ name: 'Dashboard', href: workspaceURL + '/dashboard' }],
+			announcements: [{ name: 'Announcements', href: workspaceURL + '/announcements' }],
 			management: [
 				{ name: 'Grade Center', href: workspaceURL + '/gradecenter' },
-				{ name: 'Announcements', href: workspaceURL + '/announcements' },
 				{ name: 'Materials', href: workspaceURL + '/materials' },
-				{ name: 'Lessons', href: workspaceURL + '/lessons' },
+				{ name: 'Live Sessions', href: workspaceURL + '/lessons' },
 				{ name: 'Quizzes', href: workspaceURL + '/quizzes' },
-				{ name: 'Interactive Lessons', href: workspaceURL + '/interactive' }
+				{ name: 'Practices', href: workspaceURL + '/interactive' }
 			],
 			resources: [{ name: 'Environments', href: workspaceURL + '/environments' }]
 		},
 		student: {
+			announcements: [{ name: 'Announcements', href: workspaceURL + '/announcements' }],
 			courseWork: [
-				{ name: 'Announcements', href: workspaceURL + '/announcements' },
 				{ name: 'Activities', href: workspaceURL + '/activities' },
 				{ name: 'Materials', href: workspaceURL + '/materials' },
-				{ name: 'Lessons', href: workspaceURL + '/lessons' },
+				{ name: 'Live Sessions', href: workspaceURL + '/lessons' },
 				{ name: 'Quizzes', href: workspaceURL + '/quizzes' },
-				{ name: 'Interactive Lessons', href: workspaceURL + '/interactive' }
+				{ name: 'Practices', href: workspaceURL + '/interactive' }
 			],
 			additional: [
 				{ name: 'Environments', href: workspaceURL + '/environments' },
@@ -66,7 +66,7 @@
 	$: currentLinks = navLinks[role];
 
 	function isLecturerLinks(links: LecturerLinks | StudentLinks): links is LecturerLinks {
-		return 'dashboard' in links;
+		return 'management' in links;
 	}
 
 	function isStudentLinks(links: LecturerLinks | StudentLinks): links is StudentLinks {
@@ -94,28 +94,15 @@
 		</NavBrand>
 		<NavHamburger />
 		<NavUl>
-			{#if isLecturerLinks(currentLinks)}
-				{#if currentLinks.dashboard.length > 1}
-					<NavLi class="nav-link cursor-pointer">
-						Dashboard<ChevronDownOutline
-							class="ms-2 inline h-6 w-6 text-primary-800 dark:text-white"
-						/>
-					</NavLi>
-					<Dropdown class="z-20 w-44">
-						{#each currentLinks.dashboard as { name, href }}
-							<DropdownItem {href}>{name}</DropdownItem>
-						{/each}
-					</Dropdown>
-				{:else}
-					<NavLi
-						class="nav-link"
-						href={currentLinks.dashboard[0].href}
-						active={activeUrl === currentLinks.dashboard[0].href}
-					>
-						{currentLinks.dashboard[0].name}
-					</NavLi>
-				{/if}
+			<NavLi
+				class="nav-link"
+				href={currentLinks.announcements[0].href}
+				active={activeUrl === currentLinks.announcements[0].href}
+			>
+				{currentLinks.announcements[0].name}
+			</NavLi>
 
+			{#if isLecturerLinks(currentLinks)}
 				{#if currentLinks.management.length > 1}
 					<NavLi class="nav-link cursor-pointer">
 						Management<ChevronDownOutline
diff --git a/src/src/routes/(app)/workspaces/[workspace]/interactive/+page.svelte b/src/src/routes/(app)/workspaces/[workspace]/interactive/+page.svelte
index 05b9b9d2..1fa942dd 100644
--- a/src/src/routes/(app)/workspaces/[workspace]/interactive/+page.svelte
+++ b/src/src/routes/(app)/workspaces/[workspace]/interactive/+page.svelte
@@ -14,23 +14,24 @@
 	<div class="sm:flex sm:items-center sm:justify-between">
 		<div>
 			<div class="flex items-center gap-x-3">
-				<h2 class="text-xl font-bold text-gray-800 dark:text-white">Interactive Lessons</h2>
+				<h2 class="text-xl font-bold text-gray-800 dark:text-white">Practice Material</h2>
 				<span
 					class="rounded-full bg-green-100 px-3 py-1 text-xs text-green-600 dark:bg-gray-800 dark:text-green-400"
 				>
-					{interactive.length} Interactive lessons
+					{interactive.length} Practice material
 				</span>
 			</div>
 		</div>
 		{#if role === 'lecturer'}
-			<Button size="sm" on:click={() => (isCreateModalOpen = true)}>Create Assesment</Button>
+			<Button size="sm" on:click={() => (isCreateModalOpen = true)}>Create Practice Material</Button
+			>
 		{/if}
 	</div>
 	<br />
 
 	{#if interactive.length === 0}
 		<p class="text-l text-gray-800 dark:text-white">
-			There are no Interactive lessons scheduled at the moment.
+			There are no practice material available at the moment.
 		</p>
 	{:else}
 		<InteractiveLessons lessons={interactive} {role} />
diff --git a/src/src/routes/(auth)/reset-password/[token]/+page.svelte b/src/src/routes/(auth)/reset-password/[token]/+page.svelte
index e9fcfd69..8506e794 100644
--- a/src/src/routes/(auth)/reset-password/[token]/+page.svelte
+++ b/src/src/routes/(auth)/reset-password/[token]/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { enhance } from '$app/forms';
-	import { Input, Label, Button, Spinner } from 'flowbite-svelte';
+	import { Button, Spinner } from 'flowbite-svelte';
 	import { EyeOutline, EyeSlashOutline } from 'flowbite-svelte-icons';
+	import { onMount } from 'svelte';
 
 	export let form;
 
@@ -11,6 +12,7 @@
 	let loading = false;
 	let successful = false;
 	let showPassword = false;
+	let darkMode = false;
 
 	function activateLoading() {
 		loading = true;
@@ -23,52 +25,112 @@
 			if (result.type === 'success') successful = true;
 		};
 	}
+
+	// Function to update theme
+	function updateTheme(isDark: boolean) {
+		darkMode = isDark;
+		if (darkMode) {
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+		}
+	}
+
+	// Initialize theme on mount and set up listener for changes
+	onMount(() => {
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		updateTheme(mediaQuery.matches);
+
+		// Listen for changes in color scheme preference
+		mediaQuery.addEventListener('change', (e) => updateTheme(e.matches));
+
+		// Cleanup listener on component destroy
+		return () => mediaQuery.removeEventListener('change', updateTheme);
+	});
+
+	// Function to generate random floating elements
+	const floatingElements = Array(20)
+		.fill()
+		.map(() => ({
+			size: Math.random() * 100 + 50,
+			left: Math.random() * 100,
+			top: Math.random() * 100,
+			duration: Math.random() * 10 + 5,
+			delay: Math.random() * 5
+		}));
 </script>
 
 <main
-	class="flex h-screen flex-col items-center justify-center bg-gradient-to-r from-green-300 to-green-600"
+	class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-green-400 via-green-500 to-emerald-600 p-4 transition-colors duration-300 dark:from-green-800 dark:via-green-900 dark:to-emerald-950 sm:p-6 md:p-8"
 >
-	<div class="align-center flex flex-col items-center justify-center rounded-xl bg-white">
-		<div class="m-4 flex items-center justify-center">
-			<img class="w-1/6" src="/images/class-connect-logo.png" alt="ClassConnect logo" />
-			<h1 class="font-roboto m-4 text-4xl font-bold">ClassConnect</h1>
-		</div>
+	<!-- Animated background elements -->
+	<div class="absolute inset-0 overflow-hidden">
+		{#each floatingElements as element}
+			<div
+				class="animate-float absolute rounded-full bg-white bg-opacity-10 dark:bg-gray-300 dark:bg-opacity-10"
+				style="width: {element.size}px; height: {element.size}px; left: {element.left}%; top: {element.top}%; animation-duration: {element.duration}s; animation-delay: {element.delay}s;"
+			/>
+		{/each}
+	</div>
 
-		{#if successful}
-			<div class="w-1/2 rounded-xl bg-white bg-opacity-80 p-4">
-				<div class="p-2 text-center">
-					<h1 class="text-center text-3xl font-bold">Password Reset</h1>
+	<!-- Main content -->
+	<div
+		class="w-full max-w-md rounded-xl border border-white border-opacity-20 bg-white bg-opacity-10 p-6 shadow-2xl backdrop-blur-lg transition-colors duration-300 dark:border-gray-700 dark:border-opacity-50 dark:bg-gray-800 dark:bg-opacity-30 sm:max-w-lg sm:p-8 md:max-w-xl md:p-10 lg:max-w-2xl lg:p-12"
+	>
+		<div class="mb-6 flex justify-center sm:mb-8">
+			<img
+				src="/images/class-connect-logo.png"
+				alt="ClassConnect Logo"
+				class="h-24 w-24 sm:h-32 sm:w-32 md:h-36 md:w-36 lg:h-40 lg:w-40"
+			/>
+		</div>
 
-					<p>Your password has been reset successfully.</p>
+		<h1
+			class="mb-4 text-center text-3xl font-bold text-white dark:text-gray-100 sm:mb-6 sm:text-4xl"
+		>
+			Reset Password
+		</h1>
 
-					<Button href="/signin" class="mt-4">Go back to Sign In</Button>
-				</div>
+		{#if successful}
+			<div class="text-center">
+				<p class="mb-8 text-lg text-gray-100 dark:text-gray-300 sm:mb-10 sm:text-xl">
+					Your password has been reset successfully.
+				</p>
+				<Button
+					href="/signin"
+					class="w-full transform rounded-lg bg-green-600 px-6 py-3 font-semibold text-white transition duration-300 ease-in-out hover:-translate-y-1 hover:bg-green-700 hover:shadow-xl dark:bg-green-700 dark:hover:bg-green-800 sm:w-2/3 md:w-1/2"
+				>
+					Go back to Sign In
+				</Button>
 			</div>
 		{:else}
-			<div class="w-1/2 rounded-xl bg-white bg-opacity-80 p-4">
-				<div class="p-2 text-center">
-					<h1 class="text-center text-3xl font-bold">Reset Password</h1>
-					<p>Enter your new password below.</p>
-				</div>
-
-				{#if form?.error}
-					<p class="mt-2 text-center text-red-500">{form.error}</p>
-				{/if}
-
-				<form method="POST" use:enhance={activateLoading}>
-					<input type="hidden" name="token" value={token} />
-
-					<Label for="password" class="mb-2 mt-2">New Password</Label>
+			<p class="mb-8 text-center text-lg text-gray-100 dark:text-gray-300 sm:mb-10 sm:text-xl">
+				Enter your new password below.
+			</p>
+
+			{#if form?.error}
+				<p class="mb-4 text-center text-red-500">{form.error}</p>
+			{/if}
+
+			<form method="POST" use:enhance={activateLoading} class="space-y-4">
+				<input type="hidden" name="token" value={token} />
+
+				<div>
+					<label
+						for="password"
+						class="mb-2 block text-sm font-medium text-gray-100 dark:text-gray-300"
+						>New Password</label
+					>
 					<div class="relative">
-						<Input
+						<input
 							type={showPassword ? 'text' : 'password'}
 							id="password"
 							name="password"
+							class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-green-500 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-green-500 dark:focus:ring-green-500"
 							placeholder="•••••••••"
 							disabled={loading}
 							required
 						/>
-
 						<button
 							type="button"
 							aria-label="Toggle password visibility"
@@ -82,29 +144,64 @@
 							{/if}
 						</button>
 					</div>
+				</div>
 
-					<Label for="confirmPassword" class="mb-2 mt-2">Confirm New Password</Label>
-					<div class="relative">
-						<Input
-							type="password"
-							id="confirmPassword"
-							name="confirmPassword"
-							placeholder="•••••••••"
-							disabled={loading}
-							required
-						/>
-					</div>
+				<div>
+					<label
+						for="confirmPassword"
+						class="mb-2 block text-sm font-medium text-gray-100 dark:text-gray-300"
+						>Confirm New Password</label
+					>
+					<input
+						type="password"
+						id="confirmPassword"
+						name="confirmPassword"
+						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-green-500 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-green-500 dark:focus:ring-green-500"
+						placeholder="•••••••••"
+						disabled={loading}
+						required
+					/>
+				</div>
 
-					{#if loading}
-						<Button disabled class="my-4 w-full">
-							<Spinner class="me-3" size="4" color="white" data-testid="spinner" />
-							Resetting Password
-						</Button>
-					{:else}
-						<Button type="submit" class="my-4 w-full">Reset Password</Button>
-					{/if}
-				</form>
-			</div>
+				{#if loading}
+					<Button disabled class="w-full">
+						<Spinner class="me-3" size="4" color="white" data-testid="spinner" />
+						Resetting Password
+					</Button>
+				{:else}
+					<Button
+						type="submit"
+						class="w-full transform rounded-lg bg-green-600 px-6 py-3 font-semibold text-white transition duration-300 ease-in-out hover:-translate-y-1 hover:bg-green-700 hover:shadow-xl dark:bg-green-700 dark:hover:bg-green-800"
+						>Reset Password</Button
+					>
+				{/if}
+			</form>
 		{/if}
 	</div>
 </main>
+
+<style>
+	@keyframes float {
+		0% {
+			transform: translateY(0px);
+		}
+		50% {
+			transform: translateY(-20px);
+		}
+		100% {
+			transform: translateY(0px);
+		}
+	}
+
+	.animate-float {
+		animation: float 3s ease-in-out infinite;
+	}
+
+	:global(body) {
+		overflow: auto;
+	}
+
+	:global(.dark) {
+		color-scheme: dark;
+	}
+</style>
diff --git a/src/src/tests/unit/page/reset-password.test.ts b/src/src/tests/unit/page/reset-password.test.ts
deleted file mode 100644
index e75481dd..00000000
--- a/src/src/tests/unit/page/reset-password.test.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, fireEvent, screen } from '@testing-library/svelte';
-
-import ResetPassword from '$src/routes/(auth)/reset-password/[token]/+page.svelte';
-
-vi.mock('$app/forms', () => ({
-	enhance: vi.fn()
-}));
-
-vi.mock('$app/stores', () => ({
-	page: {
-		subscribe: vi.fn((callback) => {
-			callback({ params: { token: 'mock-token' } });
-			return () => {};
-		})
-	}
-}));
-
-describe('ResetPassword Component', () => {
-	beforeEach(() => {
-		render(ResetPassword);
-	});
-
-	it('renders the component', () => {
-		expect(screen.getByText('ClassConnect')).toBeTruthy();
-	});
-
-	it('renders all form fields', () => {
-		expect(screen.getByLabelText('New Password')).toBeTruthy();
-		expect(screen.getByLabelText('Confirm New Password')).toBeTruthy();
-	});
-
-	it('toggles password visibility', async () => {
-		const passwordInput = screen.getByLabelText('New Password') as HTMLInputElement;
-		const toggleButton = screen.getByLabelText('Toggle password visibility');
-
-		expect(passwordInput.type).toBe('password');
-		await fireEvent.click(toggleButton);
-		expect(passwordInput.type).toBe('text');
-		await fireEvent.click(toggleButton);
-		expect(passwordInput.type).toBe('password');
-	});
-
-	it('displays loading spinner when form is submitted', async () => {
-		const submitButton = screen.getByRole('button', { name: 'Reset Password' });
-
-		expect(screen.queryByTestId('spinner')).toBeFalsy();
-
-		await fireEvent.click(submitButton);
-
-		expect(screen.queryByTestId('spinner')).toBeFalsy();
-	});
-
-	it('displays error message when form.error is present', () => {
-		render(ResetPassword, { props: { form: { error: 'Test error message' } } });
-		expect(screen.getByText('Test error message')).toBeTruthy();
-	});
-
-	it('renders the ClassConnect logo', () => {
-		const logo = screen.getByAltText('ClassConnect logo');
-		expect(logo).toBeTruthy();
-		expect(logo.getAttribute('src')).toBe('/images/class-connect-logo.png');
-	});
-});