diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..9c613e8
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VM Aanvraag</title>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- SweetAlert2 voor confetti -->
+    <style>
+        #loading {
+            display: none;
+            text-align: center;
+        }
+        #loading img {
+            width: 150px; /* Pas de grootte aan naar wens */
+            height: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>VM Aanvraag Formulier</h1>
+    <form id="vmForm" method="POST" action="/create_vm">
+        <label for="vmnaam">VM Naam:</label>
+        <input type="text" id="vmnaam" name="vmnaam" required><br><br>
+
+        <label for="vmgebruiker">VM Gebruiker:</label>
+        <input type="text" id="vmgebruiker" name="vmgebruiker" required><br><br>
+
+        <label for="vmwachtwoord">VM Wachtwoord:</label>
+        <input type="password" id="vmwachtwoord" name="vmwachtwoord" required><br><br>
+
+        <label for="ssh_key">SSH Key (optioneel):</label>
+        <input type="text" id="ssh_key" name="ssh_key"><br><br>
+
+        <label for="vmdisk_size">VM Disk Size (GB):</label>
+        <input type="number" id="vmdisk_size" name="vmdisk_size" required><br><br>
+
+        <label for="network_bridge">Network Bridge:</label>
+        <select id="network_bridge" name="network_bridge" required>
+            {% for bridge in bridges %}
+                <option value="{{ bridge }}">{{ bridge }}</option>
+            {% else %}
+                <option value="">Geen bridges beschikbaar</option>
+            {% endfor %}
+        </select><br><br>
+
+        <label for="ram">RAM (MB):</label>
+        <input type="number" id="ram" name="ram" required><br><br>
+
+        <label for="vm_cores">Aantal Cores:</label>
+        <input type="number" id="vm_cores" name="vm_cores" required><br><br>
+
+        <label for="storage">Storage Type:</label>
+        <select id="storage" name="storage" required>
+            {% for storage in storage_types %}
+                <option value="{{ storage }}">{{ storage }}</option>
+            {% else %}
+                <option value="">Geen opslagtypes beschikbaar</option>
+            {% endfor %}
+        </select><br><br>
+
+        <label for="os">OS:</label>
+        <select id="os" name="os" required>
+            <option value="Debian11">Debian 11</option>
+            <option value="Debian12">Debian 12</option>
+            <option value="Ubuntu22.04">Ubuntu 22.04</option>
+            <option value="Ubuntu24.04">Ubuntu 24.04</option>
+            <option value="Almalinux9">AlmaLinux 9</option>
+        </select><br><br>
+
+        <button type="submit">Maak VM</button>
+    </form>
+
+    <!-- Laadanimatie -->
+    <div id="loading">
+        <img src="https://i.redd.it/zivj0410iigd1.gif" alt="Laad animatie">
+        <p>De VM wordt aangemaakt...</p>
+    </div>
+
+    <script>
+    document.getElementById('vmForm').addEventListener('submit', function(event) {
+        event.preventDefault();  // Voorkom dat het formulier meteen wordt verzonden
+
+        // Toon de laadanimatie
+        document.getElementById('loading').style.display = 'block';
+
+        // Maak een FormData object met de formuliergegevens
+        let formData = new FormData(this);
+
+        // Verstuur de gegevens met AJAX
+        fetch('/create_vm', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())  // Verwacht een JSON antwoord van de server
+        .then(data => {
+            console.log(data);  // Log de volledige response om te zien wat er gebeurt
+
+            if (data.success) {
+                // Start onmiddellijk de polling om de status van de VM te controleren
+                const vmnaam = formData.get('vmnaam');
+                const pollInterval = setInterval(function() {
+                    fetch(`/check_vm_status/${vmnaam}`)
+                        .then(response => response.json())
+                        .then(statusData => {
+                            console.log("Polling response:", statusData);  // Bekijk de serverresponse
+
+                            if (statusData.status === 'completed') {
+                                console.log("VM is completed, stopping polling...");
+
+                                // Stop de polling
+                                clearInterval(pollInterval);
+
+                                // Verberg de laadanimatie
+                                document.getElementById('loading').style.display = 'none';
+
+                                // Toon een succesmelding
+                                Swal.fire({
+                                    title: 'Hoera!',
+                                    text: 'De VM is succesvol aangemaakt!',
+                                    icon: 'success',
+                                    confirmButtonText: 'OK'
+                                }).then(() => {
+                                    // Toon de IP-adressen (indien beschikbaar)
+                                    if (data.ip_addresses && data.ip_addresses.length > 0) {
+                                        Swal.fire({
+                                            title: 'IP Adressen',
+                                            text: 'De volgende IP-adressen zijn toegewezen: ' + data.ip_addresses.join(', '),
+                                            icon: 'info',
+                                            confirmButtonText: 'OK'
+                                        });
+                                    }
+                                });
+
+                            }
+                            else if (statusData.status === 'failed') {
+                                console.log("VM creation failed, stopping polling...");
+
+                                // Stop de polling en toon een foutmelding als er iets misgaat
+                                clearInterval(pollInterval);
+
+                                // Toon de foutmelding
+                                Swal.fire({
+                                    title: 'Fout!',
+                                    text: 'Er is een probleem opgetreden bij het aanmaken van de VM.',
+                                    icon: 'error',
+                                    confirmButtonText: 'OK'
+                                });
+
+                                // Verberg de laadanimatie als er een probleem is
+                                document.getElementById('loading').style.display = 'none';
+                            }
+                        })
+                        .catch(error => {
+                            console.error("Polling error:", error);
+                        });
+                }, 5000); // Poll elke 5 seconden om de status te controleren
+            } else {
+                // Toon een foutmelding als de VM niet succesvol is aangemaakt
+                Swal.fire({
+                    title: 'Fout!',
+                    text: 'Er is een probleem opgetreden bij het aanmaken van de VM.',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
+
+                // Verberg de laadanimatie als er een probleem is
+                document.getElementById('loading').style.display = 'none';
+            }
+        })
+        .catch(error => {
+            // Verberg de laadanimatie als er een fout is
+            document.getElementById('loading').style.display = 'none';
+
+            // Toon een foutmelding
+            Swal.fire({
+                title: 'Fout!',
+                text: 'Er is een probleem opgetreden bij de aanvraag.',
+                icon: 'error',
+                confirmButtonText: 'OK'
+            });
+        });
+    });
+    </script>
+</body>
+</html>
