diff --git a/frontend/components/Button.html b/frontend/components/Button.html
new file mode 100644
index 0000000..ae04128
--- /dev/null
+++ b/frontend/components/Button.html
@@ -0,0 +1,14 @@
+<button
+  type="{{ type or 'button' }}"
+  class="btn {{ class_extra or '' }}"
+  {% if onclick %}onclick="{{ onclick }}"{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_put %}hx-put="{{ hx_put }}"{% endif %}
+  {% if hx_delete %}hx-delete="{{ hx_delete }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if disabled %}disabled{% endif %}
+>
+  {{ label }}
+</button>
diff --git a/frontend/components/Card.html b/frontend/components/Card.html
new file mode 100644
index 0000000..3092c52
--- /dev/null
+++ b/frontend/components/Card.html
@@ -0,0 +1,8 @@
+<div class="card bg-base-100 shadow {{ class_extra }}">
+  <div class="card-body">
+    {% if title %}
+    <h2 class="card-title text-base mb-2">{{ title }}</h2>
+    {% endif %}
+    {{ content }}
+  </div>
+</div>
diff --git a/frontend/components/CloudRow.html b/frontend/components/CloudRow.html
new file mode 100644
index 0000000..eb10056
--- /dev/null
+++ b/frontend/components/CloudRow.html
@@ -0,0 +1,25 @@
+<div class="card bg-base-100 shadow">
+  <div class="card-body">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="avatar">
+          <div class="w-10 rounded-full">
+            <img src="{{ cloud_url }}" alt="{{ cloud_name }}">
+          </div>
+        </div>
+        <div>
+          <h3 class="font-medium">{{ cloud_name }}</h3>
+          <p class="text-sm text-base-content/60">{{ cloud_path }}</p>
+        </div>
+      </div>
+      <div class="flex gap-2">
+        <a href="{{ cloud_url }}" class="btn btn-sm btn-ghost" target="_blank">
+          📂 Ouvrir
+        </a>
+        <a href="{{ cloud_url }}/viewer" class="btn btn-sm">
+          👁️ Visualiser
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/components/Layout.html b/frontend/components/Layout.html
new file mode 100644
index 0000000..21a452c
--- /dev/null
+++ b/frontend/components/Layout.html
@@ -0,0 +1,17 @@
+<!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>{{ title }}</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>
+</head>
+<body class="bg-base-200 min-h-screen">
+  <Navbar active_tab="{{ active_tab }}" />
+  <div class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
+    {{ content }}
+  </div>
+</body>
+</html>
diff --git a/frontend/components/Navbar.html b/frontend/components/Navbar.html
new file mode 100644
index 0000000..b59c113
--- /dev/null
+++ b/frontend/components/Navbar.html
@@ -0,0 +1,35 @@
+<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="/"
+    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="px-4">
+  {{ content }}
+</div>
