diff --git a/frontend/components/Alert.jinja b/frontend/components/Alert.jinja
new file mode 100644
index 0000000..d4d51dc
--- /dev/null
+++ b/frontend/components/Alert.jinja
@@ -0,0 +1,13 @@
+{#def type="info", message="" #}
+<div role="alert" class="alert alert-{{ type }}">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
+    {% if type == "error" %}
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    {% elif type == "success" %}
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    {% else %}
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    {% endif %}
+  </svg>
+  <span>{{ message }}</span>
+</div>
\ No newline at end of file
diff --git a/frontend/components/Badge.jinja b/frontend/components/Badge.jinja
new file mode 100644
index 0000000..3271b0d
--- /dev/null
+++ b/frontend/components/Badge.jinja
@@ -0,0 +1,2 @@
+{#def label, variant="neutral" #}
+<span class="badge badge-{{ variant }}">{{ label }}</span>
\ No newline at end of file
diff --git a/frontend/components/Button.jinja b/frontend/components/Button.jinja
new file mode 100644
index 0000000..e650b6c
--- /dev/null
+++ b/frontend/components/Button.jinja
@@ -0,0 +1,16 @@
+{#def label, variant="primary", type="button", disabled=False,
+   hx_post="", hx_get="", hx_target="", hx_swap="innerHTML",
+   hx_indicator="", hx_encoding="" #}
+<button
+  type="{{ type }}"
+  class="btn btn-{{ variant }}"
+  {% if disabled %}disabled{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  hx-swap="{{ hx_swap }}"
+  {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
+  {% if hx_encoding %}hx-encoding="{{ hx_encoding }}"{% endif %}
+>
+  {{ label }}
+</button>
\ No newline at end of file
diff --git a/frontend/components/Card.jinja b/frontend/components/Card.jinja
new file mode 100644
index 0000000..fc72f2b
--- /dev/null
+++ b/frontend/components/Card.jinja
@@ -0,0 +1,9 @@
+{#def title="", class_extra="" #}
+<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>
\ No newline at end of file
diff --git a/frontend/components/CloudRow.jinja b/frontend/components/CloudRow.jinja
new file mode 100644
index 0000000..4e14029
--- /dev/null
+++ b/frontend/components/CloudRow.jinja
@@ -0,0 +1,37 @@
+{#def pc #}
+<tr id="row-{{ pc.id }}">
+  <td><code class="text-xs">{{ pc.id }}</code></td>
+  <td>
+    <Badge label="{{ pc.manifest.entry_type if pc.manifest and pc.manifest.entry_type else '?' }}" />
+  </td>
+  <td class="text-sm">{{ pc.size_mb }} MB</td>
+  <td class="text-sm text-base-content/60">
+    {% if pc.created %}{{ pc.created | datetimeformat }}{% else %}—{% endif %}
+  </td>
+  <td>
+    <div class="flex items-center gap-1">
+      <button
+        class="btn btn-ghost btn-xs"
+        hx-get="/viewer/{{ pc.id }}"
+        hx-target="#viewer-container"
+        hx-swap="innerHTML"
+        title="Visualiser"
+      >👁️</button>
+      <button
+        class="btn btn-ghost btn-xs"
+        hx-get="/admin/debug/{{ pc.id }}"
+        hx-target="#debug-panel"
+        hx-swap="innerHTML"
+        title="Debug"
+      >🔍</button>
+      <button
+        class="btn btn-ghost btn-xs text-error"
+        hx-delete="/admin/delete/{{ pc.id }}"
+        hx-target="#main-content"
+        hx-swap="innerHTML"
+        hx-confirm="Supprimer le nuage {{ pc.id }} ? Cette action est irréversible."
+        title="Supprimer"
+      >🗑️</button>
+    </div>
+  </td>
+</tr>
\ No newline at end of file