diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 592329e..f242a9e 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -7,7 +7,7 @@ repos:
       - id: trailing-whitespace
       - id: end-of-file-fixer
       - id: check-yaml
-      - id: check-added-large-files
+#      - id: check-added-large-files
 
   - repo: https://github.com/psf/black
     rev: 22.8.0
diff --git a/frontend/src/lib/assets/music/1-128.mp3 b/frontend/src/lib/assets/music/1-128.mp3
new file mode 100644
index 0000000..af1c0ae
Binary files /dev/null and b/frontend/src/lib/assets/music/1-128.mp3 differ
diff --git a/frontend/src/lib/assets/music/1_original.mp3 b/frontend/src/lib/assets/music/1_original.mp3
new file mode 100644
index 0000000..088da92
Binary files /dev/null and b/frontend/src/lib/assets/music/1_original.mp3 differ
diff --git a/frontend/src/lib/dashboard/main_slider.svelte b/frontend/src/lib/dashboard/main_slider.svelte
index fae683d..70ba792 100644
--- a/frontend/src/lib/dashboard/main_slider.svelte
+++ b/frontend/src/lib/dashboard/main_slider.svelte
@@ -12,6 +12,7 @@
 	import { QuizQuestionType } from '$lib/quiz_types.js';
 	import { getLocalization } from '../i18n';
 	import StartGamePopup from './start_game.svelte';
+	import { onMount } from 'svelte';
 
 	let start_game = null;
 	const { t } = getLocalization();
@@ -26,6 +27,14 @@
 		});
 		window.location.reload();
 	};
+	const close_start_game_if_esc_is_pressed = (key: KeyboardEvent) => {
+		if (key.code === 'Escape') {
+			start_game = null;
+		}
+	};
+	onMount(() => {
+		document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
+	});
 </script>
 
 <div class="w-screen p-8">
diff --git a/frontend/src/lib/dashboard/start_game.svelte b/frontend/src/lib/dashboard/start_game.svelte
index 3502ce0..540c925 100644
--- a/frontend/src/lib/dashboard/start_game.svelte
+++ b/frontend/src/lib/dashboard/start_game.svelte
@@ -7,6 +7,7 @@
 	import { alertModal } from '$lib/stores';
 	import { captcha_enabled } from '$lib/config';
 	import StartGameBackground from './start_game_background.svg';
+	import { fade } from 'svelte/transition';
 
 	export let quiz_id;
 	let captcha_selected = false;
@@ -48,7 +49,10 @@
 	};
 </script>
 
-<div class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50">
+<div
+	class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50"
+	transition:fade={{ duration: 100 }}
+>
 	<div
 		class="w-5/6 h-5/6 bg-black m-auto rounded-lg shadow-lg p-4 flex flex-col"
 		style="background-image: url({StartGameBackground}); background-color: #DFDBE5;"
diff --git a/frontend/src/lib/play/audio_player.svelte b/frontend/src/lib/play/audio_player.svelte
new file mode 100644
index 0000000..6c33f8a
--- /dev/null
+++ b/frontend/src/lib/play/audio_player.svelte
@@ -0,0 +1,79 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import Audio1 from '$lib/assets/music/1-128.mp3';
+
+	export let play = false;
+	let volume = 100;
+
+	const audio = new Audio(Audio1);
+	const control_audio = (play_audio: boolean) => {
+		if (play_audio) {
+			audio.play();
+			audio.loop = true;
+		} else {
+			audio.pause();
+		}
+	};
+	$: audio.volume = volume / 100;
+	$: control_audio(play);
+</script>
+
+<div class="fixed top-0 left-0">
+	{#if play}
+		<button
+			on:click={() => {
+				play = false;
+			}}
+		>
+			<!-- heroicons/volume-up -->
+			<svg
+				class="w-6 h-6"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+				/>
+			</svg>
+		</button>
+	{:else}
+		<button
+			on:click={() => {
+				play = true;
+			}}
+		>
+			<!-- heroicons/volume-off -->
+			<svg
+				class="w-6 h-6"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+					clip-rule="evenodd"
+				/>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+				/>
+			</svg>
+		</button>
+	{/if}
+	<input type="range" class="vertical_input" bind:value={volume} min="0" max="100" />
+</div>
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index b2a04ea..6967a66 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -11,6 +11,7 @@
 	import { navbarVisible } from '$lib/stores';
 	import type { PlayerAnswer, Player } from '$lib/admin.ts';
 	import SomeAdminScreen from '$lib/admin.svelte';
+	import AudioPlayer from '$lib/play/audio_player.svelte';
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
 
@@ -36,6 +37,7 @@
 	let success = false;
 	let dataexport_download_a;
 	let warnToLeave = true;
+	let play_music = false;
 
 	const connect = async () => {
 		socket.emit('register_as_admin', {
@@ -128,37 +130,40 @@
 		<p class="text-red-700">{errorMessage}</p>
 	{/if}
 {:else if !game_started}
-	<img
-		alt="QR code to join the game"
-		src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
-		class="block mx-auto w-1/6"
-	/>
-	<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
-	<div class="flex justify-center w-full mt-4">
-		<ul class="list-disc pl-8">
-			{#if players.length > 0}
-				{#each players as player}
-					<li>
-						<span>{player.username}</span>
-						<!--					<button>{$t('words.kick')}</button>-->
-					</li>
-				{/each}
-			{/if}
-		</ul>
-	</div>
-	{#if players.length > 0}
+	<div class="w-full h-full">
+		<AudioPlayer bind:play={play_music} />
+		<img
+			alt="QR code to join the game"
+			src="/api/v1/utils/qr/{quiz_data.game_pin}?dark_mode={darkMode}"
+			class="block mx-auto w-1/6"
+		/>
+		<p class="text-3xl text-center ">{$t('words.pin')}: {quiz_data.game_pin}</p>
 		<div class="flex justify-center w-full mt-4">
-			<button
-				class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-				id="startGame"
-				on:click={() => {
-					socket.emit('start_game', '');
-					game_started = true;
-				}}
-				>{$t('admin_page.start_game')}
-			</button>
+			<ul class="list-disc pl-8">
+				{#if players.length > 0}
+					{#each players as player}
+						<li>
+							<span>{player.username}</span>
+							<!--					<button>{$t('words.kick')}</button>-->
+						</li>
+					{/each}
+				{/if}
+			</ul>
 		</div>
-	{/if}
+		{#if players.length > 0}
+			<div class="flex justify-center w-full mt-4">
+				<button
+					class="ml-4 px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+					id="startGame"
+					on:click={() => {
+						socket.emit('start_game', '');
+						game_started = true;
+					}}
+					>{$t('admin_page.start_game')}
+				</button>
+			</div>
+		{/if}
+	</div>
 {:else}
 	<SomeAdminScreen
 		bind:final_results