diff --git a/index.php b/index.php
new file mode 100644
index 0000000..b052416
--- /dev/null
+++ b/index.php
@@ -0,0 +1,100 @@
+<?php
+  include 'include/include_header.php';
+
+  // Templates inlezen uit de map
+  $templateDir = __DIR__ . "/templates";
+  $templates = [];
+  if (is_dir($templateDir)) {
+      foreach (glob($templateDir . "/*.json.tpl") as $file) {
+          $basename = basename($file, ".json.tpl"); // bv. "pump"
+          // Je kunt hier de naam formatteren zoals je wil
+          $templates[$basename] = ucfirst($basename) . " flow";
+      }
+  }
+?>
+
+<main class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-6">
+      <div class="card p-4">
+        <h1 class="h4 mb-3 text-primary">Genereer een Node-RED flow</h1>
+        <form method="post" action="generate.php">
+          
+          <!-- Template keuze -->
+          <div class="mb-3">
+            <label for="template" class="form-label">Kies template</label>
+            <select name="template" id="template" class="form-select" required>
+              <option value="">-- kies --</option>
+              <?php foreach ($templates as $value => $label): ?>
+                <option value="<?= htmlspecialchars($value) ?>">
+                  <?= htmlspecialchars($label) ?>
+                </option>
+              <?php endforeach; ?>
+            </select>
+          </div>
+
+          <!-- Asset live search -->
+          <div class="mb-3 position-relative">
+            <label for="asset_search" class="form-label">Zoek asset</label>
+            <input type="text" id="asset_search" class="form-control" placeholder="Type om te zoeken...">
+            <input type="hidden" name="asset_id" id="asset_id">
+            <div id="results" class="list-group search-results d-none"></div>
+          </div>
+
+          <button class="btn btn-primary w-100">Genereer & Deploy</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</main>
+
+<footer class="text-center">
+  <div class="container">
+    <p>© <?= date("Y") ?> FlowManager</p>
+  </div>
+</footer>
+
+<script>
+  const searchInput = document.getElementById("asset_search");
+  const resultsBox = document.getElementById("results");
+  const assetIdField = document.getElementById("asset_id");
+
+  searchInput.addEventListener("keyup", async () => {
+    const q = searchInput.value.trim();
+    if (q.length < 2) { 
+      resultsBox.classList.add("d-none");
+      return; 
+    }
+
+    try {
+      const res = await fetch("https://pimmoerman.nl/rdlab/tagcode.app/v2.1/api/asset/get_all_assets.php");
+      const json = await res.json();
+
+      if (json.success) {
+        const matches = json.data.filter(a =>
+          (a.asset_name && a.asset_name.toLowerCase().includes(q.toLowerCase())) ||
+          (a.asset_tag_number && a.asset_tag_number.toLowerCase().includes(q.toLowerCase()))
+        );
+
+        resultsBox.innerHTML = "";
+        matches.forEach(asset => {
+          const item = document.createElement("a");
+          item.className = "list-group-item list-group-item-action";
+          item.textContent = asset.asset_tag_number + " – " + asset.asset_name;
+          item.onclick = () => {
+            searchInput.value = asset.asset_tag_number + " – " + asset.asset_name;
+            assetIdField.value = asset.asset_id;
+            resultsBox.classList.add("d-none");
+          };
+          resultsBox.appendChild(item);
+        });
+
+        resultsBox.classList.toggle("d-none", matches.length === 0);
+      }
+    } catch (e) {
+      console.error("API error", e);
+    }
+  });
+</script>
+</body>
+</html>