diff --git a/View/Pages/Lagu.php b/View/Pages/Lagu.php
index 9d2869b6630e41d7c44f4cee6adcece33a586a57..1e132b0340536c7e22d1dbb189f7ed78c709bd0f 100644
--- a/View/Pages/Lagu.php
+++ b/View/Pages/Lagu.php
@@ -8,25 +8,39 @@ $this->layout("Templates/PageTemplate", [
   "auth" => $auth,
   "page" => "lagu",
   "styles" => [
-    "/static/css/form.css"
+    "/static/css/form.css",
+    "/static/css/lagu.css"
   ],
 ]);
 ?>
 <p id="status"><?= $status ?? ""?></p>
-<div id="imageContainer">
-  <img src="<?= $image_path ?>" alt="<?= $title ?> by <?= $singer_name ?>" id="image">
+<div>
+
+</div>
+<div class="container__lagu">
+  <div id="imageContainer">
+    <img src="<?= $image_path ?>" alt="<?= $title ?> by <?= $singer_name ?>" id="image">
+  </div>
+  <div class="detail">
+    <p id="title">Judul: <?= $title ?></p>
+    <audio controls>
+      <source src="<?= $audio_path ?>" type="<?= $sound_type ?>" id="audio">
+    </audio>
+
+    <div>
+      <p id="singer_name">Penyanyi: <?= $singer_name ?></p>
+      <p id="release_date" data-date-type="<?= $date ?>">Tanggal Rilis: <?= $release_date ?></p>
+      <p id="genre">Genre: <?= $genre ?></p>
+      <p id="duration">Durasi: <?= $duration ?></p>
+    </div>
+    <div>
+      <?php if (isset($auth) && $auth->is_admin) {
+        echo <<<XYZ
+          <button id="edit">Edit Lagu</button>
+          XYZ;
+        }?>
+    </div>
+  </div>
+
 </div>
-<audio controls>
-  <source src="<?= $audio_path ?>" type="<?= $sound_type ?>" id="audio">
-</audio>
-<p id="title">Judul: <?= $title ?></p>
-<p id="singer_name">Penyanyi: <?= $singer_name ?></p>
-<p id="release_date" data-date-type="<?= $date ?>">Tanggal Rilis: <?= $release_date ?></p>
-<p id="genre">Genre: <?= $genre ?></p>
-<p id="duration">Durasi: <?= $duration ?></p>
-<?php if (isset($auth) && $auth->is_admin) {
-  echo <<<XYZ
-    <button id="edit">Edit Lagu</button>
-    XYZ;
-  }?>
 <input type="hidden" name="id" value=<?= $id ?>>
\ No newline at end of file
diff --git a/static/css/lagu.css b/static/css/lagu.css
new file mode 100644
index 0000000000000000000000000000000000000000..2e99593bf9942bcf57cd35d778cf6ff072e1473c
--- /dev/null
+++ b/static/css/lagu.css
@@ -0,0 +1,29 @@
+.container__lagu {
+  display: flex;
+  width: 100%;
+  gap: 1.5rem;
+}
+
+#imageContainer {
+  width: 200px;
+}
+
+.inner-detail {
+  margin: 10px 0;
+}
+
+#image {
+  border-radius: 10px;
+  width: 100%;
+}
+
+.container__lagu button {
+  margin: 10px;
+  background-color: #33373b;
+  color: white;
+}
+
+.container__lagu button:hover {
+  background-color: #036496;
+  color: white;
+}