diff --git a/app/src/lib/components/TopBar.svelte b/app/src/lib/components/TopBar.svelte
index 016a20a..cd393b6 100644
--- a/app/src/lib/components/TopBar.svelte
+++ b/app/src/lib/components/TopBar.svelte
@@ -2,7 +2,7 @@
     import MdiHamburgerMenu from '~icons/mdi/hamburger-menu';
 </script>
 
-<div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
+<div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
 	<div class="flex gap-2 p-2">
         <a href="/">
             <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
diff --git a/app/src/lib/components/toasts/Toast.svelte b/app/src/lib/components/toasts/Toast.svelte
index 13b1ee9..ff5151e 100644
--- a/app/src/lib/components/toasts/Toast.svelte
+++ b/app/src/lib/components/toasts/Toast.svelte
@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div class="toast toast-end mr-4">
+<div class="toast toast-end mr-4 z-20">
 	{#each $notifications as notification (notification.id)}
 		<div
 			animate:flip={{ duration: 400 }}
diff --git a/app/src/routes/controller/+layout.svelte b/app/src/routes/controller/+layout.svelte
index 6e10505..8e65b97 100644
--- a/app/src/routes/controller/+layout.svelte
+++ b/app/src/routes/controller/+layout.svelte
@@ -5,12 +5,11 @@
 </script>
 <div>
     {#if !$socket}
-    <div class="flex flex-col h-full justify-center items-center">
-        <Spinner/>
+        <div class="absolute left-0 flex flex-col w-screen h-screen justify-center items-center backdrop-blur-sm z-10">
+            <Spinner/>
             <h2>Waiting for connection</h2>
         </div>
-    {:else}
-        <Controls />
-        <slot/>
     {/if}
+    <Controls />
+    <slot/>
 </div>