diff --git a/templates/media_list.pages.tmpl b/templates/media_list.pages.tmpl
index f63795b..9eb12da 100644
--- a/templates/media_list.pages.tmpl
+++ b/templates/media_list.pages.tmpl
@@ -1,17 +1,51 @@
-<div class="grid">
-  {{if .mediaItems}}
-    {{range .mediaItems}}
-    <div class="card">
-      <a href="/media/{{.MediaPartID}}">
-        <img src="{{.UserThumbURL}}" alt="{{.Title}}" class="thumb" />
-        <div class="infos">
-          <h3>{{.Title}}</h3>
-          {{with .Summary}}<p>{{.}}</p>{{end}}
+{{define "media_list"}}
+<div class="breadcrumb mb-4">
+  {{if .CurrentSub}}
+    <a 
+      href="/api/paths/{{.PathID}}/media"
+      hx-get="/api/paths/{{.PathID}}/media"
+      hx-target="#content"
+      hx-swap="innerHTML"
+    >🔙 Racine</a>
+    &nbsp;/&nbsp;{{.CurrentSub}}
+  {{end}}
+</div>
+
+<div class="dirs grid grid-cols-4 gap-4 mb-6">
+  {{range .Dirs}}
+  <div class="card p-3 rounded shadow">
+    <a 
+      hx-get="/api/paths/{{$.PathID}}/media?sub={{urlquery .SubPath}}"
+      hx-target="#content" hx-swap="innerHTML"
+    >
+      <i class="fas fa-folder fa-2x"></i>
+      <div>{{.Name}}</div>
+    </a>
+  </div>
+  {{end}}
+</div>
+
+<div class="media grid grid-cols-4 gap-4">
+  {{if .MediaItems}}
+    {{range .MediaItems}}
+    <div class="card p-2 rounded shadow">
+      <a 
+        href="#"
+        hx-get="/media/0?path={{urlquery .FilePath}}"
+        hx-target="#content" hx-swap="innerHTML"
+      >
+        <img src="{{.ThumbURL}}" alt="{{.Title}}" class="w-full h-32 object-cover rounded" />
+        <div class="mt-2">
+          <h3 class="text-sm font-semibold truncate">{{.Title}}</h3>
+          {{if .Duration}}
+            <small>{{printf "%d:%02d" (div .Duration 60) (mod .Duration 60)}}</small>
+          {{end}}
         </div>
       </a>
     </div>
     {{end}}
   {{else}}
-    <p>Aucun média trouvé dans ce dossier.</p>
+    <p>Aucun média dans ce dossier.</p>
   {{end}}
 </div>
+{{end}}