diff --git a/renders/renders.go b/renders/renders.go
index 17b35d6..cefb1e8 100644
--- a/renders/renders.go
+++ b/renders/renders.go
@@ -10,6 +10,7 @@ import (
 	"io"
 	"log"
 	"net/http"
+	"net/url"
 	"os"
 	"os/exec"
 	"path/filepath"
@@ -35,6 +36,7 @@ func init() {
         "ext": func(name string) string {
             return strings.TrimPrefix(filepath.Ext(name), ".")
         },
+		"urlquery": func(s string) string { return url.QueryEscape(s) },
         "split":      strings.Split,
         "trimPrefix": strings.TrimPrefix,
         // nouveau helper pour convertir bytes -> kilobytes
diff --git a/templates/media_list.pages.tmpl b/templates/media_list.pages.tmpl
index 3f8d4d6..0321a05 100644
--- a/templates/media_list.pages.tmpl
+++ b/templates/media_list.pages.tmpl
@@ -1,19 +1,65 @@
-<div class="media grid grid-cols-4 gap-4">
-  {{range .MediaItems}}
-  <div class="card p-2 rounded shadow">
+
+
+<!-- 1) Breadcrumb -->
+<div class="mb-4 text-sm">
+  {{if .CurrentSub}}
     <a 
-      href="#"
-      hx-get="/media/0?path={{urlquery .FilePath}}"
-      hx-target="#content" hx-swap="innerHTML"
+      hx-get="/api/paths/{{.PathID}}/media"
+      hx-target="#content"
+      hx-swap="innerHTML"
+    >🔙 Racine</a>
+    &nbsp;/&nbsp;{{.CurrentSub}}
+  {{end}}
+</div>
+
+<!-- 2) Sous-dossiers -->
+{{if .Dirs}}
+<div class="grid grid-cols-4 gap-4 mb-6">
+  {{range .Dirs}}
+  <div class="card p-3 rounded shadow hover:shadow-lg transition">
+    <a
+      hx-get="/api/paths/{{$.PathID}}/media?sub={{.SubPath | urlquery}}"
+      hx-target="#content"
+      hx-swap="innerHTML"
+      class="flex flex-col items-center text-center"
     >
-      <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>{{.DurationFmt}}</small>
-        {{end}}
-      </div>
+      <i class="fas fa-folder fa-2x mb-2"></i>
+      <span class="truncate">{{.Name}}</span>
     </a>
   </div>
   {{end}}
 </div>
+{{end}}
+
+<!-- 3) Médias -->
+{{if .MediaItems}}
+<div class="grid grid-cols-4 gap-4">
+  {{range .MediaItems}}
+  <div class="card p-2 rounded shadow hover:shadow-lg transition">
+    <a
+      hx-get="/media/{{.MediaPartID}}?path={{.FilePath | urlquery}}"
+      hx-target="#content"
+      hx-swap="innerHTML"
+      class="block"
+    >
+      <img 
+        src="{{.ThumbURL}}" 
+        alt="{{.Title}}" 
+        class="w-full h-32 object-cover rounded mb-2" 
+      />
+      <h3 class="text-sm font-semibold truncate">{{.Title}}</h3>
+      {{if .DurationFmt}}
+        <small class="text-xs text-gray-500">{{.DurationFmt}}</small>
+      {{end}}
+    </a>
+  </div>
+  {{end}}
+</div>
+{{end}}
+
+<!-- 4) Pas de contenu -->
+{{if not .Dirs}}{{if not .MediaItems}}
+  <p class="text-center text-gray-500">Aucun dossier ni média dans ce répertoire.</p>
+{{end}}{{end}}
+
+