diff --git a/packages/web-client/src/app.html b/packages/web-client/src/app.html
index 0d93d5317..7b138bcce 100644
--- a/packages/web-client/src/app.html
+++ b/packages/web-client/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -20,6 +20,15 @@
     data-sveltekit-preload-data="hover"
     style="overflow: hidden; background-color: black"
     class="h-screen">
+    <splash-screen
+      class="spacy-y-8 absolute z-[15] flex h-full w-full flex-col items-center justify-center space-y-10 bg-black">
+      <svg class="h-56 w-56">
+        <use xlink:href="/icons.sprite.svg#hot-or-not-logo"></use>
+      </svg>
+      <svg class="h-5 w-5 animate-spin-slow opacity-50">
+        <use xlink:href="/icons.sprite.svg#loading"></use>
+      </svg>
+    </splash-screen>
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/packages/web-client/src/components/layout/SplashScreen.svelte b/packages/web-client/src/components/layout/SplashScreen.svelte
index 5d57f45be..dcae977d7 100644
--- a/packages/web-client/src/components/layout/SplashScreen.svelte
+++ b/packages/web-client/src/components/layout/SplashScreen.svelte
@@ -1,19 +1,8 @@
 <script lang="ts">
-import { fade } from 'svelte/transition'
-import { hideSplashScreen, splashScreenPopup } from '$stores/popups'
+import { hideSplashScreen } from '$stores/popups'
 import { onMount } from 'svelte'
-import Icon from '$components/icon/Icon.svelte'
 
 onMount(() => {
   hideSplashScreen(5000)
 })
 </script>
-
-{#if $splashScreenPopup.show}
-  <splash-screen
-    out:fade|local={{ duration: 500 }}
-    class="spacy-y-8 absolute z-[15] flex h-full w-full flex-col items-center justify-center space-y-10 bg-black">
-    <Icon name="hot-or-not-logo" class="h-56 w-56" />
-    <Icon name="loading" class="h-5 w-5 animate-spin-slow opacity-50" />
-  </splash-screen>
-{/if}
diff --git a/packages/web-client/src/stores/popups.ts b/packages/web-client/src/stores/popups.ts
index fa43e2523..9db29b0f4 100644
--- a/packages/web-client/src/stores/popups.ts
+++ b/packages/web-client/src/stores/popups.ts
@@ -23,6 +23,10 @@ export function hideSplashScreen(timeoutMs: number = 2000) {
   if (get(splashScreenPopup).shown) return
   if (splashScreenTimeOut) clearTimeout(splashScreenTimeOut)
   splashScreenTimeOut = setTimeout(() => {
+    const el = document.getElementsByTagName('splash-screen')
+    if (el && el[0]) {
+      el[0].remove()
+    }
     splashScreenPopup.set({ show: false, shown: true })
   }, timeoutMs)
 }
