diff --git a/View/Pages/SearchLagu.php b/View/Pages/SearchLagu.php
index 16f0338a88cc90e03a3f37ebcf857631e8e7d39d..19ab51589fd18a533be0b52ac088c0bd35fc796e 100644
--- a/View/Pages/SearchLagu.php
+++ b/View/Pages/SearchLagu.php
@@ -13,17 +13,7 @@
   ]);
 ?>
 
-<?php
-  //$this->layout("Templates/HtmlTemplate", [
-    //"title" => "Halaman X | Webtune",
-    //"styles" => [
-   // ],
-  //  "scripts" => [
-//
- //   ],
-//  ]);
-?>
-<!--<button class="primary" id="searchButton">CARI LAGU</button>-->
+
 <label for="jenisSort">SORT HASIL</label>
   <select id="sortsType" name="sortsType">
     <option value="titleASC" <?php if($sortsType==="titleASC")echo "selected"?> >Abjad Menaik(A-Z)</option>
@@ -33,25 +23,32 @@
 </select>
 <label for="filterGenre">Filter</label>
 <select id="filteredGenre" name = "filteredGenre">
-  <?php 
-  if($selectedGenre==="nofilter"){
-    echo "<option value='nofilter' selected >Tidak Difilter</option>";
-  }
-  else{
-    echo "<option value='nofilter' >Tidak Difilter</option>";
-  }
-    foreach($genreList as $_genre){
-      if($selectedGenre===$_genre){
-        echo "<option value='".$_genre["genre"]."' selected >".$_genre["genre"]."</option>";
-      }
-      else{
-        echo "<option value='".$_genre["genre"]."'>".$_genre["genre"]."</option>";
-      }
-    }
-  ?>
+    <option value='nofilter' 
+    <?php if($selectedGenre==="nofilter"){ ?>   
+      selected 
+    <?php } ?>
+    >Tidak Difilter</option>  
+
+  <?php foreach($genreList as $_genre){ ?>
+     <option 
+      value="<?=$_genre["genre"]?>" 
+    <?php if($selectedGenre===$_genre){ ?>
+      selected
+    <?php } ?>
+    >
+    <?=$_genre["genre"]?></option>
+  <?php } ?>
 </select>
+<div>
+<!-- header -->
+
+<div id="heading">
+  <h1 class="heading__item" id="judul_">Judul</h1>
+  <h1 class="heading__item">Tahun Rilis</h1>
+</div>
+<div id='list__container'>
+
 <?php
-    echo "<div id='list__container'>";
     foreach($songs as $song){
         $imagePath = $song["image_path"];
         $title = $song["title"];
@@ -60,24 +57,21 @@
         $year = strlen($release_date)>0 ? explode('-',$release_date)[0]: "";
         $genre = $song["genre"]?? "";
         $id = $song["song_id"];
-
-        $html = <<<XYZ
-        <a href='/lagu/$id' class="list__item">
-        <div class="list__item__picture">
-        <img src='$imagePath' alt="$title by $singer  Cover Image" />
-        </div>
-        <div class="list__item__content">
-          <h1 class="list__item__title">$title</h1>
-          <h2 class="list__item__year">$year</h2>
-          <p class="list__item__author">$singer</p>
-          <p class="list__item__genre" >$genre</p>
-        </div>
-        </a>
-        XYZ;
-        echo $html;
-    }
-    echo "</div>";
 ?>
+  <a href='/lagu/<?=$id?>' class="list__item">
+    <div class="list__item__picture">
+      <img src='<?=$imagePath?>' alt="<?=$title?> by <?=$singer?>  Cover Image" />
+    </div>
+    <div class="list__item__content">
+      <h1 class="list__item__title"><?=$title?></h1>
+      <h2 class="list__item__year"><?=$year?></h2>
+      <p class="list__item__author"><?=$singer?></p>
+      <p class="list__item__genre" ><?=$genre?></p>
+    </div>
+  </a>
+  <?php } ?>
+</div>
+</div>
 <?php 
   $this->component("Component/Pagination", [
     "page_number" => $page,
diff --git a/static/css/lagu.css b/static/css/lagu.css
index 2e99593bf9942bcf57cd35d778cf6ff072e1473c..48402febc8317cbdda1d2ac3e39bed5696efe7d4 100644
--- a/static/css/lagu.css
+++ b/static/css/lagu.css
@@ -1,5 +1,6 @@
 .container__lagu {
   display: flex;
+  flex-direction: column;
   width: 100%;
   gap: 1.5rem;
 }
diff --git a/static/css/search.css b/static/css/search.css
index 5142059c46845f81e1d3e4e57146d4750a0af9b9..75156860cadd4d6873fd61510fee85702dd84934 100644
--- a/static/css/search.css
+++ b/static/css/search.css
@@ -2,12 +2,13 @@
     display: flex;
     margin: 1.5rem 0;
     flex-direction: column;
+    width:80vw;
   }
   
   .list__item {
     display: flex;
     flex-direction: row;
-    width: 70vw;
+    width: 85vw;
     padding: 15px;
     text-decoration: none;
     color: white;
@@ -15,9 +16,11 @@
     transition: 100ms ease-in-out;
   }
   .list__item__content {
+    margin-left:10vw;
     display: grid;
     width:100%;
     grid-template-columns: 40vw 8vw;
+    grid-column-gap:5vw;
   }
   
   .list__item:hover {
@@ -53,4 +56,25 @@
   .list__item__genre {
     margin: 0.7em 0 0.5em 3.3em;
   }
-  
\ No newline at end of file
+  
+#heading{
+  margin-top:2vh;
+  column-gap: 5vw;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  width: 85vw;
+  padding: 15px;
+  text-decoration: none;
+  color: white;
+  justify-content: space-around;
+}
+
+.heading__item{
+  column-gap: 5vw;
+}
+
+#judul_{
+
+  margin-left:15vw;
+}
\ No newline at end of file