diff --git a/frontend/templates/index.html b/frontend/templates/index.html
new file mode 100644
index 0000000..20671cb
--- /dev/null
+++ b/frontend/templates/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PointCloud Viewer</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
+</head>
+<body class="bg-base-200 min-h-screen">
+  <!-- Navbar -->
+  <div class="navbar bg-base-100 shadow-md px-6 mb-2">
+    <div class="flex-1">
+      <span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
+    </div>
+    <div class="flex-none gap-4 items-center">
+      <div
+        id="health-indicator"
+        hx-get="/health-check"
+        hx-trigger="load"
+        hx-swap="innerHTML"
+        class="text-sm text-base-content/50"
+      >vérification…</div>
+    </div>
+  </div>
+
+  <div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'upload' %}tab-active{% endif %}"
+      hx-get="/upload"
+      hx-target="#main-content"
+      hx-push-url="/"
+    >📤 Upload</a>
+    <a
+      role="tab"
+      class="tab {% if active_tab == 'admin' %}tab-active{% endif %}"
+      hx-get="/viewer/list"
+      hx-target="#main-content"
+      hx-push-url="/viewer"
+    >🗂️ Admin</a>
+  </div>
+
+  <div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+      <!-- Colonne gauche : upload -->
+      <div class="lg:col-span-1 flex flex-col gap-4">
+        <!-- Configuration Backend -->
+        <div id="backend-config-panel" hx-get="/admin/backend-config" hx-target="#backend-config-panel" hx-swap="innerHTML">
+          {% include "partials/backend_config.html" %}
+        </div>
+        
+        <div class="card bg-base-100 shadow">
+          <div class="card-body">
+            <h2 class="card-title text-base mb-2">📤 Upload</h2>
+            <p class="text-sm text-base-content/60 mb-3">
+              Formats acceptés : LAS, LAZ, PLY, XYZ, PTS
+            </p>
+            <form
+              hx-post="/upload"
+              hx-target="#upload-result"
+              hx-swap="innerHTML"
+              hx-encoding="multipart/form-data"
+              hx-indicator="#upload-spinner"
+            >
+              <input
+                type="file"
+                name="file"
+                accept=".las,.laz,.ply,.xyz,.pts"
+                class="file-input file-input-bordered w-full mb-4"
+                required
+              >
+              <div class="flex items-center gap-3">
+                <button
+                  type="submit"
+                  class="btn"
+                  hx_indicator="#upload-spinner"
+                >
+                  📤 Uploader & convertir
+                </button>
+                <div id="upload-spinner" class="loading loading-spinner loading-sm"></div>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <div id="upload-result"></div>
+      </div>
+
+      <!-- Colonne droite : viewer -->
+      <div class="lg:col-span-2">
+        <div
+          id="viewer-container"
+          class="card bg-base-100 shadow min-h-[600px] flex items-center justify-center"
+        >
+          <p class="text-base-content/40 text-sm">
+            Uploadez un fichier pour lancer la visualisation
+          </p>
+        </div>
+        <div
+          id="viewer-panel"
+          class="card bg-base-100 shadow mt-4"
+          hx-get="/viewer/list"
+          hx-target="#viewer-panel"
+          hx-swap="innerHTML"
+          hx-trigger="load"
+        >
+          {% include "partials/cloud_list.html" %}
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+</body>
+</html>
