diff --git a/index.html b/index.html
index c3861b0..31dd3b7 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
             align-items: center;
             height: 100vh;
             font-family: Arial, sans-serif;
+            overflow: hidden;
         }
         
         #game {
@@ -45,12 +46,17 @@
         #gameCanvas {
             border: 1px solid #333;
             background: #000;
+            width: 100vw;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
         }
 
         .loader {
             width: 48px;
             height: 48px;
-            border: 5px solid #fff;
+            border: 5px solid #ffffff;
             border-bottom-color: transparent;
             border-radius: 50%;
             display: inline-block;
@@ -72,6 +78,50 @@
             font-size: 18px;
             color: #aaa;
         }
+
+        #pauseMenu {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            padding: 30px;
+            border-radius: 10px;
+            border: 1px solid #333;
+            text-align: center;
+            z-index: 1000;
+        }
+
+        #pauseMenu h2 {
+            font-size: 32px;
+            margin-bottom: 20px;
+            color: #fff;
+        }
+
+        .menu-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .menu-buttons button {
+            background: #333;
+            color: #fff;
+            border: none;
+            padding: 15px 30px;
+            font-size: 18px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .menu-buttons button:hover {
+            background: #444;
+        }
+
+        .menu-buttons button:active {
+            background: #555;
+        }
     </style>
 </head>
 <body>
@@ -85,6 +135,14 @@
             <div class="loader"></div>
             <p>Loading... <span id="progress">0%</span></p>
         </div>
+        <div id="pauseMenu" class="hidden">
+            <h2>Pauze</h2>
+            <div class="menu-buttons">
+                <button onclick="resumeGame()">Doorgaan</button>
+                <button onclick="restartGame()">Opnieuw</button>
+                <button onclick="quitGame()">Afsluiten</button>
+            </div>
+        </div>
     </div>
     
     <script>
@@ -120,42 +178,54 @@
         
         // Start game
         function startGame() {
-            showLoading();
             gameState = STATES.LOADING;
-            ipcRenderer.send('game:start');
-        }
-
-        function showLoading() {
             document.getElementById('welcome').classList.add('hidden');
             document.getElementById('loading').classList.remove('hidden');
-            startLoadingProgress();
-        }
-
-        function startLoadingProgress() {
-            const progressElement = document.getElementById('progress');
-            const updateProgress = () => {
-                if (loadingProgress < 100 && gameState === STATES.LOADING) {
-                    loadingProgress += 1;
-                    progressElement.textContent = `${loadingProgress}%`;
-                    setTimeout(updateProgress, 50);
-                }
-            };
-            updateProgress();
+            // Start met een korte vertraging om de engine tijd te geven
+            setTimeout(() => {
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('gameCanvas').classList.remove('hidden');
+                gameState = STATES.PLAYING;
+            }, 1000); // 1 seconde loading screen
         }
 
         function pauseGame() {
             gameState = STATES.PAUSED;
+            document.getElementById('pauseMenu').classList.remove('hidden');
             ipcRenderer.send('game:pause');
         }
+
+        function resumeGame() {
+            gameState = STATES.PLAYING;
+            document.getElementById('pauseMenu').classList.add('hidden');
+            ipcRenderer.send('game:resume');
+        }
+
+        function restartGame() {
+            gameState = STATES.PLAYING;
+            document.getElementById('pauseMenu').classList.add('hidden');
+            ipcRenderer.send('game:restart');
+        }
+
+        function quitGame() {
+            // Reset game state
+            gameState = STATES.WELCOME;
+            loadingProgress = 0;
+            
+            // Verberg game canvas en pauze menu
+            document.getElementById('gameCanvas').classList.add('hidden');
+            document.getElementById('pauseMenu').classList.add('hidden');
+            
+            // Toon welkomstscherm
+            document.getElementById('welcome').classList.remove('hidden');
+            
+            // Stuur event naar main process
+            ipcRenderer.send('game:return-to-welcome');
+        }
         
         // Listen for engine events
         ipcRenderer.on('engine:ready', (event, data) => {
             console.log('Engine ready:', data);
-            if (gameState === STATES.LOADING) {
-                document.getElementById('loading').classList.add('hidden');
-                document.getElementById('gameCanvas').classList.remove('hidden');
-                gameState = STATES.PLAYING;
-            }
         });
         
         ipcRenderer.on('game:started', () => {
