diff --git a/templates/head.pages.tmpl b/templates/head.pages.tmpl
index 3badaf5..74f5426 100644
--- a/templates/head.pages.tmpl
+++ b/templates/head.pages.tmpl
@@ -21,6 +21,7 @@
     <script src="/templates/assets/js/json-enc.js"></script>
     <script src="/templates/assets/js/ws.js"></script>  
     <script src="/templates/assets/js/function/functions.js"></script>
+    <script src="https://unpkg.com/hls.js@1.4.0"></script>
     <title>Login</title>
 </head>
 
diff --git a/templates/media_detail.pages.tmpl b/templates/media_detail.pages.tmpl
index d03fd9e..73beeec 100644
--- a/templates/media_detail.pages.tmpl
+++ b/templates/media_detail.pages.tmpl
@@ -1,39 +1,28 @@
-<div class="detail p-4">
-  <h1 class="text-2xl font-bold mb-4">{{.item.Title}}</h1>
-  {{with .item.Summary}}<p class="mb-4">{{.}}</p>{{end}}
-  {{with .item.DurationFmt}}<small class="text-gray-500">{{.}}</small>{{end}}
-  <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" class="cover mb-4 rounded shadow" />
-
-  <!-- 1) Le bouton Play -->
-  <button 
-    id="play-btn" 
-    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-  >▶ Play</button>
-
-  <!-- 2) Container vide pour le player -->
-  <div id="player-container" class="mt-4"></div>
-
-  <script src="https://unpkg.com/hls.js@1.4.0"></script>
-  <script>
-    document.getElementById('play-btn').addEventListener('click', function(){
-      const url = "{{.item.HLSURL}}";
-      const container = document.getElementById('player-container');
-      // injecte la balise video
-      container.innerHTML = '<video id="video-player" controls autoplay width="100%" class="rounded shadow"></video>';
-      const video = document.getElementById('video-player');
-
-      // si hls.js est supporté, on l’utilise
-      if (Hls.isSupported()) {
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-      } else {
-        // sinon on pose directement la source (Chrome & Safari gèrent nativement HLS)
-        video.src = url;
-      }
-
-      // cache le bouton
-      this.style.display = 'none';
-    });
-  </script>
-</div>
+<section class="section">
+  <div class="container">
+    <div class="box">
+      <div class="columns is-vcentered">
+        <!-- Thumbnail column -->
+        <div class="column is-one-third">
+          <figure class="image is-3by4">
+            <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
+          </figure>
+        </div>
+        <!-- Details & Play button -->
+        <div class="column">
+          <h1 class="title">{{.item.Title}}</h1>
+          {{with .item.Summary}}
+          <p class="content">{{.}}</p>
+          {{end}}
+          {{with .item.DurationFmt}}
+          <p class="subtitle is-6">Durée : {{.}}</p>
+          {{end}}
+          <button class="button is-primary" onclick="window.open('{{.item.HLSURL}}', '_blank', 'noopener')">
+            <span class="icon"><i class="fas fa-play"></i></span>
+            <span>Play</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>