diff --git a/src/client/src/lib/components/lesson/Container.svelte b/src/client/src/lib/components/lesson/Container.svelte
index 5233263d..3c4bd3e7 100644
--- a/src/client/src/lib/components/lesson/Container.svelte
+++ b/src/client/src/lib/components/lesson/Container.svelte
@@ -1,59 +1,59 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { type Call, type StreamVideoParticipant } from '@stream-io/video-client';
+	import { onMount } from 'svelte';
+	import { type Call, type StreamVideoParticipant } from '@stream-io/video-client';
 
-    import Participant from './Participant.svelte';
-    import ScreenShare from './ScreenShare.svelte';
+	import Participant from './Participant.svelte';
+	import ScreenShare from './ScreenShare.svelte';
 
-    export let call: Call;
+	export let call: Call;
 
-    let participants: StreamVideoParticipant[] = [];
+	let participants: StreamVideoParticipant[] = [];
 
-    import { screenShareEnabled } from '$lib/store/index';
+	import { screenShareEnabled } from '$lib/store/index';
 
-    onMount(() => {
-        const parentContainer = document.getElementById('participants');
+	onMount(() => {
+		const parentContainer = document.getElementById('participants');
 
-        if (parentContainer) call.setViewport(parentContainer);
+		if (parentContainer) call.setViewport(parentContainer);
 
-        call.state.participants$.subscribe((updatedParticipants) => {
-            participants = updatedParticipants;
-        });
-    });
+		call.state.participants$.subscribe((updatedParticipants) => {
+			participants = updatedParticipants;
+		});
+	});
 
-    function getParticipantClass(index: number): string {
-        const total = participants.length;
+	function getParticipantClass(index: number): string {
+		const total = participants.length;
 
-        if (total === 1) {
-            return 'w-full h-full';
-        } else if (total === 2) {
-            return 'w-1/2 h-full';
-        } else if (total === 3) {
-            return index === 0 ? 'w-1/2 h-1/2' : 'w-1/2 h-1/2';
-        } else if (total === 4) {
-            return 'w-1/2 h-1/2';
-        } else if (total <= 6) {
-            return 'w-1/3 h-1/2';
-        } else {
-            return 'w-1/4 h-1/4';
-        }
-    }
+		if (total === 1) {
+			return 'w-full h-full';
+		} else if (total === 2) {
+			return 'w-1/2 h-full';
+		} else if (total === 3) {
+			return index === 0 ? 'w-1/2 h-1/2' : 'w-1/2 h-1/2';
+		} else if (total === 4) {
+			return 'w-1/2 h-1/2';
+		} else if (total <= 6) {
+			return 'w-1/3 h-1/2';
+		} else {
+			return 'w-1/4 h-1/4';
+		}
+	}
 
+	let showScreenShare: boolean;
 
-    let showScreenShare:boolean;
-
-    screenShareEnabled.subscribe((value:boolean) => {
-		showScreenShare = value});
+	screenShareEnabled.subscribe((value: boolean) => {
+		showScreenShare = value;
+	});
 </script>
 
-<div id="participants" class="flex flex-wrap justify-center h-full">
-    {#each participants as participant, index}
-        <div class={`participant ${getParticipantClass(index)} flex items-center justify-center p-2`}>
-            {#if showScreenShare}
-                <ScreenShare {call} {participant} />
-            {:else}
-            <Participant {call} {participant} />
-            {/if}
-        </div>
-    {/each}
-</div>
\ No newline at end of file
+<div id="participants" class="flex h-full flex-wrap justify-center">
+	{#each participants as participant, index}
+		<div class={`participant ${getParticipantClass(index)} flex items-center justify-center p-2`}>
+			{#if showScreenShare}
+				<ScreenShare {call} {participant} />
+			{:else}
+				<Participant {call} {participant} />
+			{/if}
+		</div>
+	{/each}
+</div>
diff --git a/src/client/src/lib/components/lesson/ControlPanel.svelte b/src/client/src/lib/components/lesson/ControlPanel.svelte
index b9d5e351..778c7a4f 100644
--- a/src/client/src/lib/components/lesson/ControlPanel.svelte
+++ b/src/client/src/lib/components/lesson/ControlPanel.svelte
@@ -2,23 +2,30 @@
 	import { type Call } from '@stream-io/video-client';
 	import { goto } from '$app/navigation';
 	import { Button } from 'flowbite-svelte';
-	import { MicrophoneOutline, MicrophoneSlashOutline, VideoCameraOutline, ArrowUpFromBracketOutline, PhoneHangupOutline } from 'flowbite-svelte-icons';
+	import {
+		MicrophoneOutline,
+		MicrophoneSlashOutline,
+		VideoCameraOutline,
+		ArrowUpFromBracketOutline,
+		PhoneHangupOutline
+	} from 'flowbite-svelte-icons';
 	import { writable } from 'svelte/store';
-	import {screenShareEnabled} from '$lib/store/index'
+	import { screenShareEnabled } from '$lib/store/index';
 
 	export let call: Call;
 
 	const microphoneEnabled = writable(false);
 	const cameraEnabled = writable(false);
-	
-	let screenShare
-	screenShareEnabled.subscribe((value:boolean) => {
-		screenShare = value
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	let screenShare;
+	screenShareEnabled.subscribe((value: boolean) => {
+		screenShare = value;
 	});
 
 	function toggleMicrophone() {
 		call.microphone.toggle();
-		microphoneEnabled.update(enabled => !enabled);
+		microphoneEnabled.update((enabled) => !enabled);
 	}
 
 	function toggleCamera() {
@@ -27,7 +34,7 @@
 
 	function toggleScreenShare() {
 		call.screenShare.toggle();
-		screenShareEnabled.update(enabled => !enabled);
+		screenShareEnabled.update((enabled) => !enabled);
 	}
 
 	function endCall() {
@@ -36,40 +43,65 @@
 	}
 </script>
 
-<div class="flex justify-around items-center h-full bg-gray-300 dark:bg-gray-800 p-4">
-
-		{#if $microphoneEnabled}
-		<Button pill={true} on:click={toggleMicrophone} class="bg-green-500 text-white hover:bg-green-700">
+<div class="flex h-full items-center justify-around bg-gray-300 p-4 dark:bg-gray-800">
+	{#if $microphoneEnabled}
+		<Button
+			pill={true}
+			on:click={toggleMicrophone}
+			class="bg-green-500 text-white hover:bg-green-700"
+		>
 			<MicrophoneOutline class="h-6 w-6" />
 		</Button>
-		{:else}
-		<Button pill={true} on:click={toggleMicrophone} class="bg-green-500 text-white hover:bg-green-700">
+	{:else}
+		<Button
+			pill={true}
+			on:click={toggleMicrophone}
+			class="bg-green-500 text-white hover:bg-green-700"
+		>
 			<MicrophoneSlashOutline class="h-6 w-6" />
 		</Button>
-		{/if}
-
-
+	{/if}
 
 	{#if $cameraEnabled}
-		<Button pill={true} on:click={toggleCamera} class="bg-green-500 dark:bg-green-500 dark:hover:bg-green-700 text-white hover:bg-green-700">
+		<Button
+			pill={true}
+			on:click={toggleCamera}
+			class="bg-green-500 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-700"
+		>
 			<VideoCameraOutline class="h-6 w-6" />
 		</Button>
 	{:else}
-		<Button pill={true} on:click={toggleCamera} class="bg-gray-500  text-white dark:hover:bg-gray-700  hover:bg-gray-700  dark:bg-gray-500">
+		<Button
+			pill={true}
+			on:click={toggleCamera}
+			class="bg-gray-500  text-white hover:bg-gray-700  dark:bg-gray-500  dark:hover:bg-gray-700"
+		>
 			<VideoCameraOutline class="h-6 w-6" />
 		</Button>
 	{/if}
-	
+
 	{#if $screenShareEnabled}
-	<Button pill={true} on:click={toggleScreenShare} class="bg-green-500 text-white hover:bg-green-700">
-		<ArrowUpFromBracketOutline class="h-6 w-6" />
-	</Button>
+		<Button
+			pill={true}
+			on:click={toggleScreenShare}
+			class="bg-green-500 text-white hover:bg-green-700"
+		>
+			<ArrowUpFromBracketOutline class="h-6 w-6" />
+		</Button>
 	{:else}
-	<Button pill={true} on:click={toggleScreenShare} class="bg-gray-500 text-white hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-700">
-		<ArrowUpFromBracketOutline class="h-6 w-6" />
-	</Button>
+		<Button
+			pill={true}
+			on:click={toggleScreenShare}
+			class="bg-gray-500 text-white hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-700"
+		>
+			<ArrowUpFromBracketOutline class="h-6 w-6" />
+		</Button>
 	{/if}
-	<Button pill={true} on:click={endCall} class="bg-red-500 text-white dark:bg-red-500 hover:bg-red-700 dark:hover:bg-red-700">
+	<Button
+		pill={true}
+		on:click={endCall}
+		class="bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700"
+	>
 		<PhoneHangupOutline class="h-6 w-6" />
 	</Button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/client/src/lib/components/lesson/Participant.svelte b/src/client/src/lib/components/lesson/Participant.svelte
index aa575b23..e83818ed 100644
--- a/src/client/src/lib/components/lesson/Participant.svelte
+++ b/src/client/src/lib/components/lesson/Participant.svelte
@@ -7,7 +7,7 @@
 	export let participant: StreamVideoParticipant;
 </script>
 
-<div class="w-full h-full bg-gray-300 dark:bg-gray-400 flex items-center rounded-lg justify-center">
+<div class="flex h-full w-full items-center justify-center rounded-lg bg-gray-300 dark:bg-gray-400">
 	<Video {call} {participant} />
 	<Audio {call} {participant} />
-</div>
\ No newline at end of file
+</div>
diff --git a/src/client/src/lib/components/lesson/ScreenShare.svelte b/src/client/src/lib/components/lesson/ScreenShare.svelte
index 43b1060e..66d57bd5 100644
--- a/src/client/src/lib/components/lesson/ScreenShare.svelte
+++ b/src/client/src/lib/components/lesson/ScreenShare.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
 
-    export let call: Call;
-    export let participant: StreamVideoParticipant;
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
 
-    let videoEl: HTMLVideoElement;
+	let videoEl: HTMLVideoElement;
 
-    onMount(() => {
-        const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'screenShareTrack');
-        const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'screenShareTrack');
+	onMount(() => {
+		const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'screenShareTrack');
+		const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'screenShareTrack');
 
-        return () => {
-            if (unbind) unbind();
-            untrack();
-        };
-    });
+		return () => {
+			if (unbind) unbind();
+			untrack();
+		};
+	});
 </script>
 
-<div class="w-full h-full flex items-center justify-center">
-    <video bind:this={videoEl} data-session-id={participant.sessionId} class="w-full h-full object-contain">
-        <track kind="captions" />
-    </video>
-</div>
\ No newline at end of file
+<div class="flex h-full w-full items-center justify-center">
+	<video
+		bind:this={videoEl}
+		data-session-id={participant.sessionId}
+		class="h-full w-full object-contain"
+	>
+		<track kind="captions" />
+	</video>
+</div>
diff --git a/src/client/src/lib/components/lesson/Video.svelte b/src/client/src/lib/components/lesson/Video.svelte
index 3090507a..537af3fc 100644
--- a/src/client/src/lib/components/lesson/Video.svelte
+++ b/src/client/src/lib/components/lesson/Video.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
 
-    export let call: Call;
-    export let participant: StreamVideoParticipant;
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
 
-    let videoEl: HTMLVideoElement;
+	let videoEl: HTMLVideoElement;
 
-    onMount(() => {
-        const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'videoTrack');
-        const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'videoTrack');
+	onMount(() => {
+		const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'videoTrack');
+		const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'videoTrack');
 
-        return () => {
-            if (unbind) unbind();
-            untrack();
-        };
-    });
+		return () => {
+			if (unbind) unbind();
+			untrack();
+		};
+	});
 </script>
 
-<div class="w-full h-full flex items-center justify-center">
-    <video bind:this={videoEl} data-session-id={participant.sessionId} class="w-full h-full object-cover">
-        <track kind="captions" />
-    </video>
-</div>
\ No newline at end of file
+<div class="flex h-full w-full items-center justify-center">
+	<video
+		bind:this={videoEl}
+		data-session-id={participant.sessionId}
+		class="h-full w-full object-cover"
+	>
+		<track kind="captions" />
+	</video>
+</div>
diff --git a/src/client/src/lib/store/index.ts b/src/client/src/lib/store/index.ts
index c72319d7..d6e52a28 100644
--- a/src/client/src/lib/store/index.ts
+++ b/src/client/src/lib/store/index.ts
@@ -43,4 +43,4 @@ export const userInfo = writable<any>({
 	workspaces: []
 });
 
-export const screenShareEnabled = writable(false);
\ No newline at end of file
+export const screenShareEnabled = writable(false);
diff --git a/src/client/src/routes/lecturer/classroom/[id]/+page.svelte b/src/client/src/routes/lecturer/classroom/[id]/+page.svelte
index d82abd5d..f3546882 100644
--- a/src/client/src/routes/lecturer/classroom/[id]/+page.svelte
+++ b/src/client/src/routes/lecturer/classroom/[id]/+page.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { onMount, onDestroy } from 'svelte';
-    import { StreamVideoClient, type Call } from '@stream-io/video-client';
-
-    import { userInfo } from '$lib/store/index';
-    import Container from '$lib/components/lesson/Container.svelte';
-    import ControlPanel from '$lib/components/lesson/ControlPanel.svelte';
-
-    export let data;
-    const { apiKey, token } = data;
-
-    let call: Call;
-    let client: StreamVideoClient;
-
-    onMount(async () => {
-        client = new StreamVideoClient({
-            apiKey,
-            token,
-            user: { id: $userInfo.username, name: $userInfo.name }
-        });
-
-        call = client.call('default', $page.params.id);
-
-        await call.camera.disable();
-        await call.microphone.disable();
-        await call.join({ create: true });
-    });
-
-    onDestroy((): void => {
-        if (call) call.leave();
-        if (client) client.disconnectUser();
-    });
+	import { page } from '$app/stores';
+	import { onMount, onDestroy } from 'svelte';
+	import { StreamVideoClient, type Call } from '@stream-io/video-client';
+
+	import { userInfo } from '$lib/store/index';
+	import Container from '$lib/components/lesson/Container.svelte';
+	import ControlPanel from '$lib/components/lesson/ControlPanel.svelte';
+
+	export let data;
+	const { apiKey, token } = data;
+
+	let call: Call;
+	let client: StreamVideoClient;
+
+	onMount(async () => {
+		client = new StreamVideoClient({
+			apiKey,
+			token,
+			user: { id: $userInfo.username, name: $userInfo.name }
+		});
+
+		call = client.call('default', $page.params.id);
+
+		await call.camera.disable();
+		await call.microphone.disable();
+		await call.join({ create: true });
+	});
+
+	onDestroy((): void => {
+		if (call) call.leave();
+		if (client) client.disconnectUser();
+	});
 </script>
 
-<main class="flex flex-col h-screen">
-    {#if call}
-        <div class="flex-1 overflow-hidden">
-            <Container {call} />
-        </div>
-        <div class="h-20">
-            <ControlPanel {call} />
-        </div>
-    {/if}
-</main>
\ No newline at end of file
+<main class="flex h-screen flex-col">
+	{#if call}
+		<div class="flex-1 overflow-hidden">
+			<Container {call} />
+		</div>
+		<div class="h-20">
+			<ControlPanel {call} />
+		</div>
+	{/if}
+</main>