diff --git a/apps/website/src/index.html b/apps/website/src/index.html
index dfd610b..22e93dd 100644
--- a/apps/website/src/index.html
+++ b/apps/website/src/index.html
@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="assets/favicon.ico" />
     <link rel="stylesheet" href="style.css" />
     <title>Title</title>
   </head>
-  <body style="margin: 0">
+  <body>
     <script type="module" src="index.ts"></script>
     <div id="nanoforge-loader">
       <img id="loader-logo" src="assets/logo.png" alt="logo" />
@@ -23,10 +24,6 @@
         </div>
       </div>
     </div>
-    <div
-      id="nanoforge-container"
-      hidden
-      style="width: 100%; height: 100%; position: absolute; left: 0; top: 0"
-    ></div>
+    <div id="nanoforge-container" hidden></div>
   </body>
 </html>
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index ca24238..ddc7070 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -1,12 +1,17 @@
-#nanoforge-loader {
-  height: 100%;
+html,
+body {
   width: 100%;
-  left: 0;
-  top: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#nanoforge-loader {
+  inset: 0;
   background-color: oklch(0.21 0.034 264.665);
   font-weight: bold;
   color: white;
-  position: absolute;
+  position: fixed;
   z-index: 1000;
   display: flex;
   flex-direction: column;
@@ -15,6 +20,15 @@
   gap: 20px;
 }
 
+#nanoforge-loader[hidden] {
+  display: none !important;
+}
+
+#nanoforge-container {
+  position: fixed;
+  inset: 0;
+}
+
 #loader-logo {
   height: 125px;
   width: 125px;
@@ -34,7 +48,7 @@
 
 #loading-bar {
   height: 12px;
-  width: 500px;
+  width: min(500px, 80vw);
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.2);
   overflow: hidden;
diff --git a/apps/website/src/window.ts b/apps/website/src/window.ts
index b4a3996..5cdbb5c 100644
--- a/apps/website/src/window.ts
+++ b/apps/website/src/window.ts
@@ -6,18 +6,26 @@ import { Logger } from "./utils/logger.utils";
 const logger: Logger = new Logger("Window");
 let totalFiles = 0;
 
+const FADE_OUT_DURATION_MS = 1000;
+
 export const changeWindowToGame = async () => {
-  setHiddenStatusOnId(IDS.loader, true);
   setHiddenStatusOnId(IDS.container, false);
   await delay(500);
   const loader = document.getElementById(IDS.loader);
   if (loader) loader.classList.add("fade-out");
+  await delay(FADE_OUT_DURATION_MS);
+  setHiddenStatusOnId(IDS.loader, true);
   logger.info("Change window to game");
 };
 
-export const changeWindowToLoader = async () => {
+const showLoader = () => {
   setHiddenStatusOnId(IDS.container, true);
+  document.getElementById(IDS.loader)?.classList.remove("fade-out");
   setHiddenStatusOnId(IDS.loader, false);
+};
+
+export const changeWindowToLoader = async () => {
+  showLoader();
   logger.info("Change window to loader");
 };
 
@@ -44,8 +52,7 @@ export const setError = (error: string | Error | unknown) => {
   const errorMessage = error instanceof Error ? error.message : String(error);
   loaderErrorMessage.innerText = errorMessage;
 
-  setHiddenStatusOnId(IDS.container, true);
-  setHiddenStatusOnId(IDS.loader, false);
+  showLoader();
 
   setHiddenStatusOnId(IDS.loadingStatus, true);
   setHiddenStatusOnId(IDS.loaderError, false);