diff --git a/frontend/src/lib/play/question.svelte b/frontend/src/lib/play/question.svelte
index 386e79c..2821496 100644
--- a/frontend/src/lib/play/question.svelte
+++ b/frontend/src/lib/play/question.svelte
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import type { Question } from '$lib/quiz_types';
 	import { QuizQuestionType } from '$lib/quiz_types';
 	import { socket } from '$lib/socket';
@@ -120,12 +120,12 @@ SPDX-License-Identifier: MPL-2.0
 		return _arr;
 	};
 	$: set_answer_if_not_set_range(timer_res);
-	let circular_prgoress = 0;
+	let circular_progress = 0;
 	$: {
 		try {
-			circular_prgoress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
+			circular_progress = 1 - ((100 / question.time) * parseInt(timer_res)) / 100;
 		} catch {
-			circular_prgoress = 0;
+			circular_progress = 0;
 		}
 	}
 
@@ -144,22 +144,22 @@ SPDX-License-Identifier: MPL-2.0
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 </script>
 
-<div class="h-screen w-screen">
+<div class='h-screen w-screen'>
 	{#if game_mode === 'normal'}
 		<div
-			class="flex flex-col justify-start"
+			class='flex flex-col justify-start'
 			style="height: {question.image ? '33.333333' : '16.666667'}%"
 		>
 			<h1
-				class="lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2"
+				class='lg:text-2xl text-lg text-center text-black dark:text-white mt-2 break-normal mb-2'
 			>
 				{@html question.question}
 			</h1>
 			{#if question.image !== null && game_mode !== 'kahoot'}
-				<div class="max-h-full">
+				<div class='max-h-full'>
 					<MediaComponent
 						src={question.image}
-						css_classes="object-cover mx-auto mb-8 max-h-[90%]"
+						css_classes='object-cover mx-auto mb-8 max-h-[90%]'
 					/>
 				</div>
 			{/if}
@@ -167,84 +167,94 @@ SPDX-License-Identifier: MPL-2.0
 	{/if}
 	{#if timer_res !== '0'}
 		{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.VOTING}
-			<div class="w-full relative h-full" style="height: {get_div_height()}%">
+			<div class='w-full relative h-full' style='height: {get_div_height()}%'>
 				<div
-					class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40"
+					class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
 				>
 					<CircularTimer
 						bind:text={timer_res}
-						bind:progress={circular_prgoress}
-						color="#ef4444"
+						bind:progress={circular_progress}
+						color='#ef4444'
 					/>
 				</div>
 
-				<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
+				<div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
 					{#each question.answers as answer, i}
 						<button
-							class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black"
-							style="background-color: {answer.color ??
+							class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black'
+							style='background-color: {answer.color ??
 								default_colors[i]}; color: {get_foreground_color(
 								answer.color ?? default_colors[i]
-							)}"
+							)}'
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(answer.answer)}
 						>
 							{#if game_mode === 'kahoot'}
 								<img
-									class="h-2/3 inline-block m-auto"
-									alt="Icon"
+									class='h-2/3 inline-block m-auto'
+									alt='Icon'
 									src={kahoot_icons[i]}
 								/>
 							{:else}
-								<p class="m-auto">{answer.answer}</p>
+								<p class='m-auto'>{answer.answer}</p>
 							{/if}
 						</button>
 					{/each}
 				</div>
 			</div>
 		{:else if question.type === QuizQuestionType.RANGE}
+			<span
+							class='fixed top-0 bg-red-500 h-8 transition-all'
+							style='width: {(100 / parseInt(question.time)) *
+			parseInt(timer_res)}vw'
+						/>
 			{#await import('svelte-range-slider-pips')}
 				<Spinner />
 			{:then c}
-				<div class:pointer-events-none={selected_answer !== undefined} class="mt-14">
+				<div class:pointer-events-none={selected_answer !== undefined} class='mt-24'>
 					<svelte:component
 						this={c.default}
 						bind:values={slider_value}
 						bind:min={question.answers.min}
 						bind:max={question.answers.max}
-						id="pips-slider"
+						id='pips-slider'
 						pips
 						float
-						all="label"
+						all='label'
 					/>
 				</div>
-				<div class="flex justify-center">
-					<div class="w-1/2">
+				<div class='flex justify-center'>
+					<div class='w-1/2'>
 						<BrownButton
 							disabled={selected_answer !== undefined}
 							on:click={() => selectAnswer(slider_value[0])}
-							>{$t('words.submit')}
+						>{$t('words.submit')}
 						</BrownButton>
 					</div>
 				</div>
 			{/await}
 		{:else if question.type === QuizQuestionType.TEXT}
-			<div class="flex justify-center">
-				<p class="text-black dark:text-white">Enter your answer</p>
+						<span
+							class='fixed top-0 bg-red-500 h-8 transition-all'
+							style='width: {(100 / parseInt(question.time)) *
+			parseInt(timer_res)}vw'
+						/>
+			<div class='flex justify-center mt-10'>
+				<p class='text-black dark:text-white'>Enter your answer</p>
 			</div>
-			<div class="flex justify-center m-2">
+			<div class='flex justify-center m-2'>
 				<input
-					type="text"
+					type='text'
 					bind:value={text_input}
 					disabled={selected_answer}
-					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
+					class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed'
 				/>
 			</div>
 
-			<div class="flex justify-center mt-2">
-				<div class="w-1/3">
+			<div class='flex justify-center mt-2'>
+				<div class='w-1/3'>
 					<BrownButton
-						type="button"
+						type='button'
 						disabled={selected_answer}
 						on:click={() => {
 							selectAnswer(text_input);
@@ -258,9 +268,9 @@ SPDX-License-Identifier: MPL-2.0
 			{#if solution === undefined}
 				<Spinner />
 			{:else}
-				<p class="text-center">
+				<p class='text-center'>
 					Every number between {solution.answers.min_correct} and {solution.answers
-						.max_correct} was correct. You got {selected_answer}, so you have been
+					.max_correct} was correct. You got {selected_answer}, so you have been
 					{#if solution.answers.min_correct <= parseInt(selected_answer) && parseInt(selected_answer) <= solution.answers.max_correct}
 						correct
 					{:else}
@@ -272,10 +282,15 @@ SPDX-License-Identifier: MPL-2.0
 			<!--			{#if solution === undefined}
                             <Spinner />
                         {:else}-->
-			<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
+			<span
+				class='fixed top-0 bg-red-500 h-8 transition-all'
+				style='width: {(100 / parseInt(question.time)) *
+			parseInt(timer_res)}vw'
+			/>
+			<div class='flex flex-col w-full h-full gap-4 px-4 py-6 mt-10'>
 				{#each question.answers as answer, i (answer.id)}
 					<div
-						class="w-full h-fit flex-row rounded-lg p-2 align-middle"
+						class='w-full h-fit flex-row rounded-lg p-2 align-middle'
 						animate:flip={{ duration: 100 }}
 						style="background-color: {answer.color ?? '#b07156'}"
 					>
@@ -283,59 +298,59 @@ SPDX-License-Identifier: MPL-2.0
 							on:click={() => {
 								question.answers = swapArrayElements(question.answers, i, i - 1);
 							}}
-							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
-							type="button"
+							class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
+							type='button'
 							disabled={i === 0 || selected_answer}
 						>
 							<svg
-								class="w-8 h-8"
-								stroke-width="2"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-								color="currentColor"
+								class='w-8 h-8'
+								stroke-width='2'
+								viewBox='0 0 24 24'
+								fill='none'
+								xmlns='http://www.w3.org/2000/svg'
+								color='currentColor'
 							>
 								<path
-									d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
+									d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
+									stroke='currentColor'
+									stroke-width='2'
+									stroke-linecap='round'
+									stroke-linejoin='round'
 								/>
 							</svg>
 						</button>
-						<p class="w-full text-center p-2 text-2xl">{answer.answer}</p>
+						<p class='w-full text-center p-2 text-2xl'>{answer.answer}</p>
 
 						<button
 							on:click={() => {
 								question.answers = swapArrayElements(question.answers, i, i + 1);
 							}}
-							class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
-							type="button"
+							class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
+							type='button'
 							disabled={i === question.answers.length - 1 || selected_answer}
 						>
 							<svg
-								class="w-8 h-8"
-								stroke-width="2"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-								color="currentColor"
+								class='w-8 h-8'
+								stroke-width='2'
+								viewBox='0 0 24 24'
+								fill='none'
+								xmlns='http://www.w3.org/2000/svg'
+								color='currentColor'
 							>
 								<path
-									d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
+									d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
+									stroke='currentColor'
+									stroke-width='2'
+									stroke-linecap='round'
+									stroke-linejoin='round'
 								/>
 							</svg>
 						</button>
 					</div>
 				{/each}
-				<div class="w-full mt-2">
+				<div class='w-full mt-2'>
 					<BrownButton
-						type="button"
+						type='button'
 						disabled={selected_answer}
 						on:click={() => {
 							select_complex_answer(question.answers);
@@ -353,13 +368,15 @@ SPDX-License-Identifier: MPL-2.0
 					bind:question
 					bind:selected_answer
 					bind:game_mode
+					{timer_res}
+					{circular_progress}
 				/>
-				<div class="flex justify-center h-[5%]">
-					<div class="w-1/2">
+				<div class='flex justify-center h-[5%]'>
+					<div class='w-1/2'>
 						<BrownButton
 							disabled={!selected_answer}
 							on:click={() => selectAnswer(selected_answer)}
-							>{$t('words.submit')}
+						>{$t('words.submit')}
 						</BrownButton>
 					</div>
 				</div>
diff --git a/frontend/src/lib/play/questions/check.svelte b/frontend/src/lib/play/questions/check.svelte
index 7067b8d..917671e 100644
--- a/frontend/src/lib/play/questions/check.svelte
+++ b/frontend/src/lib/play/questions/check.svelte
@@ -4,15 +4,20 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
 SPDX-License-Identifier: MPL-2.0
 -->
 
-<script lang="ts">
+<script lang='ts'>
 	import type { Question } from '$lib/quiz_types';
 	import { get_foreground_color } from '$lib/helpers';
 	import { kahoot_icons } from '$lib/play/kahoot_mode_assets/kahoot_icons';
+	import CircularTimer from '$lib/play/circular_progress.svelte';
 	// import CircularTimer from '$lib/play/circular_progress.svelte';
 	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
 	export let question: Question;
 	export let selected_answer = '';
 	export let game_mode;
+
+	export let timer_res
+
+	export let circular_progress
 	let _selected_answers = [false, false, false, false];
 
 	const selectAnswer = (i: number) => {
@@ -28,7 +33,7 @@ SPDX-License-Identifier: MPL-2.0
 	};
 </script>
 
-<div class="w-full h-[95%]">
+<div class='w-full h-[95%]'>
 	<!--
         <div
             class="absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-50"
@@ -40,23 +45,33 @@ SPDX-License-Identifier: MPL-2.0
             />
         </div>
     -->
+	<div
+		class='absolute top-0 bottom-0 left-0 right-0 m-auto rounded-full h-fit w-fit border-2 border-black shadow-2xl z-40'
+	>
+		<CircularTimer
+			bind:text={timer_res}
+			bind:progress={circular_progress}
+			color='#ef4444'
+		/>
+	</div>
 
-	<div class="grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full">
+
+	<div class='grid grid-rows-2 grid-flow-col auto-cols-auto gap-2 w-full p-4 h-full'>
 		{#each question.answers as answer, i}
 			<button
-				class="rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all"
-				style="background-color: {answer.color ??
+				class='rounded-lg h-full flex align-middle justify-center disabled:opacity-60 p-3 border-2 border-black transition-all'
+				style='background-color: {answer.color ??
 					default_colors[i]}; color: {get_foreground_color(
 					answer.color ?? default_colors[i]
-				)}"
+				)}'
 				on:click={() => selectAnswer(i)}
 				class:opacity-100={_selected_answers[i]}
 				class:opacity-50={!_selected_answers[i]}
 			>
 				{#if game_mode === 'kahoot'}
-					<img class="h-2/3 inline-block m-auto" alt="Icon" src={kahoot_icons[i]} />
+					<img class='h-2/3 inline-block m-auto' alt='Icon' src={kahoot_icons[i]} />
 				{:else}
-					<p class="m-auto">{answer.answer}</p>
+					<p class='m-auto'>{answer.answer}</p>
 				{/if}
 			</button>
 		{/each}