diff --git a/index.html b/index.html
index 3eb2b4f..c3861b0 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,37 @@
         .hidden {
             display: none;
         }
+
+        #gameCanvas {
+            border: 1px solid #333;
+            background: #000;
+        }
+
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #fff;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+            margin-bottom: 15px;
+        }
+
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        #loading {
+            text-align: center;
+        }
+
+        #loading p {
+            font-size: 18px;
+            color: #aaa;
+        }
     </style>
 </head>
 <body>
@@ -49,31 +80,82 @@
             <h1>Welkom bij I love X!</h1>
             <p class="start-message">Druk op SPATIE om te beginnen</p>
         </div>
+        <canvas id="gameCanvas" class="hidden"></canvas>
+        <div id="loading" class="hidden">
+            <div class="loader"></div>
+            <p>Loading... <span id="progress">0%</span></p>
+        </div>
     </div>
     
     <script>
         const { ipcRenderer } = require('electron');
         
-        // Game state
-        let gameState = 'welcome';
+        // Game states
+        const STATES = {
+            WELCOME: 'welcome',
+            LOADING: 'loading',
+            PLAYING: 'playing',
+            PAUSED: 'paused',
+            ERROR: 'error'
+        };
+        
+        let gameState = STATES.WELCOME;
+        let loadingProgress = 0;
+        
+        // Error handling
+        window.onerror = function(msg, url, line) {
+            console.error(`Error: ${msg}\nAt: ${url}:${line}`);
+            gameState = STATES.ERROR;
+            ipcRenderer.send('error:occurred', { msg, url, line });
+        };
         
         // Handle keyboard input
         document.addEventListener('keydown', (event) => {
-            if (event.code === 'Space' && gameState === 'welcome') {
+            if (event.code === 'Space' && gameState === STATES.WELCOME) {
                 startGame();
+            } else if (event.code === 'Escape' && gameState === STATES.PLAYING) {
+                pauseGame();
             }
         });
         
         // Start game
         function startGame() {
-            gameState = 'playing';
-            document.getElementById('welcome').classList.add('hidden');
+            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();
+        }
+
+        function pauseGame() {
+            gameState = STATES.PAUSED;
+            ipcRenderer.send('game:pause');
+        }
         
         // 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', () => {
@@ -83,6 +165,11 @@
         ipcRenderer.on('game:paused', () => {
             console.log('Game paused');
         });
+
+        ipcRenderer.on('error:engine', (event, error) => {
+            console.error('Engine error:', error);
+            gameState = STATES.ERROR;
+        });
     </script>
 </body>
 </html>
