diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
index ebb38f8ecaf79087701cc9846a3e190c6859d082..8584782b1f4b399db8cc38906018dfe2123d1f23 100644
--- a/src/app/components/app/app_page.php
+++ b/src/app/components/app/app_page.php
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Global CSS -->
     <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css">
-    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css">
+
     <!-- Page CSS -->
     <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/home/Home.css">
+    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css">
     <!-- JavaScript Library -->
     <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.js" defer></script>
-    <script type="text/javascript" src="<?= BASE_URL ?>/javascript/dashboard/layout.js" defer></script>
+    <script type="module" src="<?= BASE_URL ?>/javascript/dashboard/layout.js" defer></script>
     <script type="text/javascript" src="<?= BASE_URL ?>/javascript/util/debounce.js" defer></script>
-    <script type="text/javascript" src="<?= BASE_URL ?>/javascript/search/search.js" defer></script>
     <script type="text/javascript" src="<?= BASE_URL ?>/javascript/app/app.js" defer></script>
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -21,12 +22,16 @@
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <title>Spotify</title>
 </head>
+
 <body>
-    <?php include(dirname(__DIR__) . "/common/sidebar.php")?>
-    <?php include(dirname(__DIR__) . "/common/profile.php")?>
+    <?php include(dirname(__DIR__) . "/common/toast.php") ?>
+
+    <?php include(dirname(__DIR__) . "/common/sidebar.php") ?>
+    <?php include(dirname(__DIR__) . "/common/profile.php") ?>
     <main id="main-section">
         <!-- Called by app.js -->
     </main>
-    <?php include(dirname(__DIR__) . "/common/player.php")?>
+    <?php include(dirname(__DIR__) . "/common/player.php") ?>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/app/components/common/player.php b/src/app/components/common/player.php
index 01085911bc924a2741351954de750735710a77f9..7fcb9cc9bfc1437e88465bddd3bb3aa6eec1dd29 100644
--- a/src/app/components/common/player.php
+++ b/src/app/components/common/player.php
@@ -1,58 +1,46 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.js" defer></script>
-    <title>Audio Player</title>
-</head>
-<body>
-    <div class="player">
-        <?php if (isset($this->data["title"])) :?>
-            <div class="podcast-details">
-                <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110">
-                <div class="podcast-info">
-                    <div class="b3"><?= $this->data["title"] ?></div>
-                    <div class="b4"><?= $this->data["podcast"] ?></div>
-                </div>
+<div class="player">
+    <?php if (isset($this->data["title"])) : ?>
+        <div class="podcast-details">
+            <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110">
+            <div class="podcast-info">
+                <div class="b3"><?= $this->data["title"] ?></div>
+                <div class="b4"><?= $this->data["podcast"] ?></div>
             </div>
-            <div class="audio-player">
-                <div class="audio-controller">
-                    <div class="prevButton">
-                        <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev">
-                    </div>
-                    <div class="button-player">
-                        <div class="play-button">
-                            <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause">    
-                        </div>
-                        <div class="pause-button">
-                            <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause">    
-                        </div>
+        </div>
+        <div class="audio-player">
+            <div class="audio-controller">
+                <div class="prevButton">
+                    <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev">
+                </div>
+                <div class="button-player">
+                    <div class="play-button">
+                        <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause">
                     </div>
-                    <div class="nextButton">
-                        <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next">
+                    <div class="pause-button">
+                        <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause">
                     </div>
                 </div>
-                <div class="progress-control">
-                    <div class="current-time">00.00</div>
-                    <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0">
-                    <div class="duration">00:00</div>
+                <div class="nextButton">
+                    <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next">
                 </div>
             </div>
-            <div class="volume-control">
-                <div></div>
-            </div>
-            <div class="hide-player">
-                <audio controls class="audio-player">
-                    <source src="<?= STORAGE_URL . $this->data["url_audio"]?>" type="audio/mpeg">
-                </audio>
-            </div>
-        <? else : ?>
-            <div class="sh3 caption">
-                play your favorite podcast!
+            <div class="progress-control">
+                <div class="current-time">00.00</div>
+                <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0">
+                <div class="duration">00:00</div>
             </div>
-        <? endif;?>
-    </div>
-
-</body>
-</html>
\ No newline at end of file
+        </div>
+        <div class="volume-control">
+            <div></div>
+        </div>
+        <div class="hide-player">
+            <audio controls class="audio-player">
+                <source src="<?= STORAGE_URL . $this->data["url_audio"] ?>" type="audio/mpeg">
+            </audio>
+        </div>
+    <? else : ?>
+        <div class="sh3 caption">
+            play your favorite podcast!
+        </div>
+    <? endif; ?>
+</div>
\ No newline at end of file
diff --git a/src/app/components/common/profile.php b/src/app/components/common/profile.php
index 1639fb1c5e61a28609facfc8460adee6a3be6b18..f6416c0e9ae9a32ba58097f21bd5a4b89a6c2ba9 100644
--- a/src/app/components/common/profile.php
+++ b/src/app/components/common/profile.php
@@ -1,20 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- script -->
-    <script type="text/javascript" src="<?= BASE_URL ?>/javascript/profile/profile.js" defer></script>
-    <title>Profile</title>
-</head>
-<body>
+<section>
     <?php if (!isset($this->data["username"])) : ?>
         <div class="profile-section login-button">
             <h5><a href="<?= BASE_URL ?>/login">LOGIN</a></h5>
         </div>
-    <?php else:?>
-        <div class="profile-section profile" >
-            <img class="profpic" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image" width="110" height="110">        
+    <?php else : ?>
+        <div class="profile-section profile">
+            <img class="profpic" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image" width="110" height="110">
             <div class="sh5"><?= substr($this->data["name"], 0, 10) ?></div>
         </div>
         <div class="profile-menu">
@@ -24,7 +15,7 @@
         <div class="edit-profile-back">
             <div class="edit-profile-container">
                 <div class="profile-detail">
-                    <img class="profpic-edit" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image">        
+                    <img class="profpic-edit" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image">
                     <div class="edit-info">
                         <div class="sh5">Nama</div>
                         <input type="text">
@@ -37,20 +28,20 @@
                 <button class="sh4">Submit</button>
             </div>
         </div>
-<?php endif;?>
-</body>
-        <script>
-            const logoutBtn = document.getElementById("logout");
-            logoutBtn.addEventListener("click", (e) => {
-                e.preventDefault();
-                const xhr = new XMLHttpRequest();
-                xhr.open("POST", "/public/logout");
-                xhr.send()
-                xhr.onreadystatechange = function() {
-                    if (this.readyState === 4 && this.status === 200) {
-                        window.location.replace("/public/login")
-                    }
-                }
-            })
-            </script>
-</html>
\ No newline at end of file
+    <?php endif; ?>
+</section>
+<script type="text/javascript" src="<?= BASE_URL ?>/javascript/profile/profile.js" defer></script>
+<script>
+    const logoutBtn = document.getElementById("logout");
+    logoutBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/public/logout");
+        xhr.send()
+        xhr.onreadystatechange = function() {
+            if (this.readyState === 4 && this.status === 200) {
+                window.location.replace("/public/login")
+            }
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/src/app/components/home/home_page.php b/src/app/components/home/home_page.php
index 2ae5877b96be04fefe9bdb25181be5050ac0c11d..4b7afcd6090337705d1c0ae2a7eb49d827af9a18 100644
--- a/src/app/components/home/home_page.php
+++ b/src/app/components/home/home_page.php
@@ -1,9 +1,9 @@
 <section>
     <div class="comedy-content">
         <h4>COMEDY</h4>
-        <div class="podcast-list">
+        <div class="home-podcast-list">
             <?php if (isset($this->data["tech_podcasts"])) : ?>
-                <div class="podcast-list">
+                <div class="home-podcast-list">
                     <?php foreach ($this->data["tech_podcasts"] as $podcast) : ?>
                         <div class="podcast">
                             <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="image">
diff --git a/src/app/components/search/search_page.php b/src/app/components/search/search_page.php
index a3a3a5feab73908a161429df11357ca3461e9285..9dafe1d7fe6ce1644e8f78db3538e7b7864dc048 100644
--- a/src/app/components/search/search_page.php
+++ b/src/app/components/search/search_page.php
@@ -1,7 +1,7 @@
 <navbar>
     <!-- SEARCH BAR -->
     <div class="search-bar">
-            <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px">
+        <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px">
         <input id="search-input" type="text">
     </div>
 
@@ -32,15 +32,15 @@
                 <img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px">
             </button>
             <div class="dropdown-content eps-content">
-                <div class="item eps-option" >All episodes</div>
-                <div class="item eps-option" >Less than 20 episodes</div>
-                <div class="item eps-option" >20-50 episodes</div>
-                <div class="item eps-option" >50-100 episodes</div>
-                <div class="item eps-option" >More than 100 episodes</div>
+                <div class="item eps-option">All episodes</div>
+                <div class="item eps-option">Less than 20 episodes</div>
+                <div class="item eps-option">20-50 episodes</div>
+                <div class="item eps-option">50-100 episodes</div>
+                <div class="item eps-option">More than 100 episodes</div>
             </div>
         </div>
     </div>
-    
+
     <!-- SORTING -->
     <div class="dropdown date" id="sort">
         <button class="dropbtn sort-button">
@@ -56,5 +56,6 @@
     </div>
 </navbar>
 <div class="result-container">
-    <?php include(dirname(__DIR__) . "/search/result.php")?>
+    <?php include(dirname(__DIR__) . "/search/result.php") ?>
 </div>
+<script type="text/javascript" src="<?= BASE_URL ?>/javascript/search/search.js" defer></script>
\ No newline at end of file
diff --git a/src/app/controllers/app/app_controller.php b/src/app/controllers/app/app_controller.php
index 03b558a60e1ef71beff3b15efb5bbda7926f1d81..5c8d734c32d1b6d8a47921335bfa6d68faed11e2 100644
--- a/src/app/controllers/app/app_controller.php
+++ b/src/app/controllers/app/app_controller.php
@@ -2,68 +2,69 @@
 
 class AppController
 {
-    public function call()
-    {
-        // Session validation
-        session_start();
+  public function call()
+  {
+    // Session validation
+    session_start();
 
-        if (isset($_SESSION["is_premium"]) && $_SESSION["is_premium"]) {
-          http_response_code(403);
-          header("Location: http://localhost:5173");
-          return;
-        }
-        
-        if (!isset($_SESSION["user_id"])) {
-            http_response_code(403);
-            header("Location: " . BASE_URL . "/login");
-            return;
-        }
+    if (isset($_SESSION["is_premium"]) && $_SESSION["is_premium"]) {
+      http_response_code(403);
+      header("Location: http://localhost:5173");
+      return;
+    }
+
+    if (!isset($_SESSION["user_id"])) {
+      session_destroy();
+      http_response_code(403);
+      header("Location: " . BASE_URL . "/login");
+      return;
+    }
 
-        if ($_SESSION["expire"] < time()) {
-          session_destroy();
-          http_response_code(403);
-          header('Location: ' . BASE_URL . "/login");
-          return;
-        }
+    if ($_SESSION["expire"] < time()) {
+      session_destroy();
+      http_response_code(403);
+      header('Location: ' . BASE_URL . "/login");
+      return;
+    }
 
 
-        // Get id_episode from session
-        $epsId = "";
-        if (isset($_SESSION["eps_id"])) {
-            $epsId = $_SESSION["eps_id"];
-        }
+    // Get id_episode from session
+    $epsId = "";
+    if (isset($_SESSION["eps_id"])) {
+      $epsId = $_SESSION["eps_id"];
+    }
 
-        // Get id_user from session
-        $userId = "";
-        if (isset($_SESSION["user_id"])) {
-          $userId = $_SESSION["user_id"];
-        }
+    // Get id_user from session
+    $userId = "";
+    if (isset($_SESSION["user_id"])) {
+      $userId = $_SESSION["user_id"];
+    }
 
-        $data = [];
-        
-        // Data Player
-        $podcastModel = new PodcastModel();
-        $podcastInfo = $podcastModel->getPodcastInfo($epsId);
-        if ($podcastInfo){
-          $data["title"] = $podcastInfo->title;
-          $data["url_thumbnail"] = $podcastInfo->url_thumbnail;
-          $data["podcast"] = $podcastInfo->name;
-          $data["url_audio"] = $podcastInfo->url_audio;
-        }
+    $data = [];
 
-        // Data Profile
-        $userModel = new UserModel();
-        $userInfo = $userModel->getUserInfo($userId);
-        if ($userInfo) {
-            $data["name"] = $userInfo->name;
-            $data["username"] = $userInfo->username;
-            $data["url_profpic"] = $userInfo->url_profpic ?? "/images/default-profpic.jpeg";
-            $data["is_admin"] = $userInfo->is_admin;
-          }
+    // Data Player
+    $podcastModel = new PodcastModel();
+    $podcastInfo = $podcastModel->getPodcastInfo($epsId);
+    if ($podcastInfo) {
+      $data["title"] = $podcastInfo->title;
+      $data["url_thumbnail"] = $podcastInfo->url_thumbnail;
+      $data["podcast"] = $podcastInfo->name;
+      $data["url_audio"] = $podcastInfo->url_audio;
+    }
 
-        // App View
-        require_once __DIR__ . "/../../views/app/app_view.php";
-        $appView = new AppView($data);
-        $appView->render();
+    // Data Profile
+    $userModel = new UserModel();
+    $userInfo = $userModel->getUserInfo($userId);
+    if ($userInfo) {
+      $data["name"] = $userInfo->name;
+      $data["username"] = $userInfo->username;
+      $data["url_profpic"] = $userInfo->url_profpic ?? "/images/default-profpic.jpeg";
+      $data["is_admin"] = $userInfo->is_admin;
     }
-}
\ No newline at end of file
+
+    // App View
+    require_once __DIR__ . "/../../views/app/app_view.php";
+    $appView = new AppView($data);
+    $appView->render();
+  }
+}
diff --git a/src/app/controllers/login/get_login.php b/src/app/controllers/login/get_login.php
index 7d60ec202c37317ec5533bf1ae844afb459bc603..69fcc89eb46eb790e746c900c897ba093b19c70e 100644
--- a/src/app/controllers/login/get_login.php
+++ b/src/app/controllers/login/get_login.php
@@ -9,9 +9,10 @@ class GetLoginController
     session_start();
 
     if (isset($_SESSION['user_id']) && $_SESSION["expire"] >= time()) {
-
       header("Location: " . BASE_URL . "/home?user_id=" . $_SESSION["user_id"]);
     } else {
+      session_destroy();
+
       $data = [];
       $view = new LoginView($data);
       $view->render();
diff --git a/src/app/controllers/login/post_login.php b/src/app/controllers/login/post_login.php
index 6af4226a2cf70eec82d7d6617675c92497505a0f..7a54b65eddcf81c3429f032464d329746adb8b5c 100644
--- a/src/app/controllers/login/post_login.php
+++ b/src/app/controllers/login/post_login.php
@@ -23,7 +23,8 @@ class PostLoginController
                 } else {
                     if (password_verify($password, $user['password'])) {
                         $_SESSION["start"] = time();
-                        $_SESSION["expire"] = time() + 60;
+                        $_SESSION["expire"] = time() + 60 * 5;
+                        $_SESSION["user_id"] = $user['id_user'];
 
                         if ($username == "premium") {
                             $ch = curl_init();
@@ -35,7 +36,7 @@ class PostLoginController
                             curl_setopt(
                                 $ch,
                                 CURLOPT_POSTFIELDS,
-                                http_build_query(array('username' => $_POST["username"]))
+                                http_build_query(array('idUser' => $user["id_user"]))
                             );
                             curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                             curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
@@ -47,14 +48,13 @@ class PostLoginController
                             $jwtToken = json_decode($output, TRUE)["token"];
 
                             $_SESSION["is_premium"] = true;
-                            
+
                             http_response_code(201);
                             header('Content-type: application/json');
                             echo json_encode(["redirect_url" => "http://localhost:5173/?token=" . $jwtToken]);
                             exit;
                         }
 
-                        $_SESSION["user_id"] = $user['id_user'];
                         $_SESSION["eps_id"] = "";
                         $_SESSION["role_id"] = $user['is_admin'];
                         $_SESSION["is_premium"] = false;
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
index 67c843ee10af3dcd38dbb506df9b6c893f7fa418..8ac2668abdee1d7d5925f8426aab3ff28ccb64a7 100644
--- a/src/public/javascript/app/app.js
+++ b/src/public/javascript/app/app.js
@@ -15,8 +15,8 @@ getPage = (page) => {
     xhr.onreadystatechange = () => {
         if(xhr.readyState == 4 && xhr.status == 200) {
             mainSection.innerHTML = xhr.responseText;
-            handleSearch();
-            handleDashboard();
+            // handleSearch();
+            // handleDashboard();
         }
     }
 
diff --git a/src/public/javascript/profile/profile.js b/src/public/javascript/profile/profile.js
index 7bb60726c0194c2a1bf80e24badc17f20cbe5b76..9ff5d5761ba20e1a791353291686f235e6958915 100644
--- a/src/public/javascript/profile/profile.js
+++ b/src/public/javascript/profile/profile.js
@@ -1,31 +1,29 @@
-const profile = document.querySelector('.profile');
-const profileMenu = document.querySelector('.profile-menu');
+const profile = document.querySelector(".profile");
+const profileMenu = document.querySelector(".profile-menu");
+console.log("masuk");
+profile &&
+  profile.addEventListener("click", (e) => {
+    profileMenu.style.display = "flex";
+  });
 
-console.log("masokkdf");
-profile && 
-    profile.addEventListener('click', (e) => {
-        profileMenu.style.display = 'flex'; 
+window.addEventListener("click", function (e) {
+  if (!profileMenu.contains(e.target) && !profile.contains(e.target)) {
+    profileMenu.style.display = "none";
+  }
 });
-    
-window.addEventListener('click', function(e){   
-    if (!profileMenu.contains(e.target) && !profile.contains(e.target)){
-        profileMenu.style.display = 'none'; 
-    } 
-});
-
 
-const editProfile = document.querySelector('.edit-profile-back');
-const menuProfile = document.getElementById('menu-profile');
-const editSection = document.querySelector('.edit-profile-container');
+const editProfile = document.querySelector(".edit-profile-back");
+const menuProfile = document.getElementById("menu-profile");
+const editSection = document.querySelector(".edit-profile-container");
 
 menuProfile &&
-    menuProfile.addEventListener('click', (e) => {
-        console.log("keklik cok");
-        editProfile.style.display = 'flex';
-});
+  menuProfile.addEventListener("click", (e) => {
+    console.log("keklik cok");
+    editProfile.style.display = "flex";
+  });
 
-window.addEventListener('click', function(e){   
-    if (!editSection.contains(e.target) && !menuProfile.contains(e.target)){
-        editProfile.style.display = 'none'; 
-    } 
-});
\ No newline at end of file
+window.addEventListener("click", function (e) {
+  if (!editSection.contains(e.target) && !menuProfile.contains(e.target)) {
+    editProfile.style.display = "none";
+  }
+});
diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js
index a4859bf6688b11d89716bef56aff4568185848ed..f7d852b6b7aa695985708c1a69ab276459a52cba 100644
--- a/src/public/javascript/search/search.js
+++ b/src/public/javascript/search/search.js
@@ -1,165 +1,174 @@
-const handleSearch = () => {
-
-    const searchInput = document.getElementById('search-input');
-    const resultContainer = document.querySelector('.result-container');
-
-    const genreDisplay = document.querySelector('.genre-display');
-    const genreOptions = document.querySelectorAll('.genre-option');
-    const genreButton = document.querySelector('.genre-button');
-    const genreContent = document.querySelector('.genre-content');
-
-    const epsDisplay = document.querySelector('.eps-display');
-    const epsOptions = document.querySelectorAll('.eps-option');
-    const epsButton = document.querySelector('.eps-button');
-    const epsContent = document.querySelector('.eps-content');
-
-    const sortDisplay = document.querySelector('.sort-display');
-    const sortOptions = document.querySelectorAll('.sort-option');
-    const sortButton = document.querySelector('.sort-button');
-    const sortContent = document.querySelector('.sort-content');
-
-
-    const defaultGenre = "";
-    const defaultEps = "";
-    const defaultSort = "";
-    const defaultIsAsc = "true";
-    
-    var keyword = "";
-    var genre = defaultGenre;
-    var sort = defaultSort;
-    var eps = defaultEps;
-    var isAsc = defaultIsAsc;
-
-    searchInput && 
-        searchInput.addEventListener(
-            "keyup",
-            debounce(()=> {
-                keyword = searchInput.value;
-                const ajax = new XMLHttpRequest();
-
-                ajax.onreadystatechange = () => {
-                    if(ajax.readyState == 4 && ajax.status == 200) {
-                        resultContainer.innerHTML = ajax.responseText;
-                        console.log("ajax amsterdam");
-                    }
-                }
-
-                ajax.open('GET', 
-                `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
-                ajax.send();
-                
-            }, DEBOUNCE_TIMEOUT)
-            );
-            
-            // FILTER BY GENRE
-            genreButton.addEventListener('click', function() {
-                genreContent.style.display = "block";
-            })
-
-            genreOptions.forEach(option => {
-                option.addEventListener('click', function() {
-                // Get the selected genre value
-                const selectedGenre = option.innerHTML;
-                
-                // Update the button text with the selected genre
-                genreDisplay.textContent = selectedGenre;
-                if (selectedGenre === "All genre") {
-                    genre = "";
-                } else {
-                    genre = selectedGenre;
-                }
-                const ajax = new XMLHttpRequest();
-
-                ajax.onreadystatechange = () => {
-                    if(ajax.readyState == 4 && ajax.status == 200) {
-                        resultContainer.innerHTML = ajax.responseText;
-                    }
-                }
-                
-                ajax.open('GET', 
-                `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
-                ajax.send();
-
-                genreContent.style.display = "none";
-            });
+// const handleSearch = () => {
+  const searchInput = document.getElementById("search-input");
+  const resultContainer = document.querySelector(".result-container");
+
+  const genreDisplay = document.querySelector(".genre-display");
+  const genreOptions = document.querySelectorAll(".genre-option");
+  const genreButton = document.querySelector(".genre-button");
+  const genreContent = document.querySelector(".genre-content");
+
+  const epsDisplay = document.querySelector(".eps-display");
+  const epsOptions = document.querySelectorAll(".eps-option");
+  const epsButton = document.querySelector(".eps-button");
+  const epsContent = document.querySelector(".eps-content");
+
+  const sortDisplay = document.querySelector(".sort-display");
+  const sortOptions = document.querySelectorAll(".sort-option");
+  const sortButton = document.querySelector(".sort-button");
+  const sortContent = document.querySelector(".sort-content");
+
+  const defaultGenre = "";
+  const defaultEps = "";
+  const defaultSort = "";
+  const defaultIsAsc = "true";
+
+  var keyword = "";
+  var genre = defaultGenre;
+  var sort = defaultSort;
+  var eps = defaultEps;
+  var isAsc = defaultIsAsc;
+
+  searchInput &&
+    searchInput.addEventListener(
+      "keyup",
+      debounce(() => {
+        keyword = searchInput.value;
+        const ajax = new XMLHttpRequest();
+
+        ajax.onreadystatechange = () => {
+          if (ajax.readyState == 4 && ajax.status == 200) {
+            resultContainer.innerHTML = ajax.responseText;
+            console.log("ajax amsterdam");
+          }
+        };
+
+        ajax.open(
+          "GET",
+          `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`,
+          true
+        );
+        ajax.send();
+      }, DEBOUNCE_TIMEOUT)
+    );
+
+  // FILTER BY GENRE
+  genreButton &&
+    genreButton.addEventListener("click", function () {
+      genreContent.style.display = "block";
     });
 
+  genreOptions.forEach((option) => {
+    option.addEventListener("click", function () {
+      // Get the selected genre value
+      const selectedGenre = option.innerHTML;
+
+      // Update the button text with the selected genre
+      genreDisplay.textContent = selectedGenre;
+      if (selectedGenre === "All genre") {
+        genre = "";
+      } else {
+        genre = selectedGenre;
+      }
+      const ajax = new XMLHttpRequest();
+
+      ajax.onreadystatechange = () => {
+        if (ajax.readyState == 4 && ajax.status == 200) {
+          resultContainer.innerHTML = ajax.responseText;
+        }
+      };
 
+      ajax.open(
+        "GET",
+        `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`,
+        true
+      );
+      ajax.send();
 
-    // FILTER BY EPS
-    epsOptions.forEach(option => {
-        option.addEventListener('click', function() {
-            // Get the selected eps value
-            const selectedEps = option.innerHTML;
-            
-            // Update the button text with the selected eps
-            epsDisplay.textContent = selectedEps;
-            
-            if (selectedEps === "All eps") {
-                eps = "";
-            } else {
-                eps = selectedEps;
-            }
-            const ajax = new XMLHttpRequest();
-
-            ajax.onreadystatechange = () => {
-                if(ajax.readyState == 4 && ajax.status == 200) {
-                    resultContainer.innerHTML = ajax.responseText;
-                }
-            }
-            
-            ajax.open('GET', 
-            `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
-            ajax.send();
-
-            epsContent.style.display = "none";
-        });
+      genreContent.style.display = "none";
     });
+  });
+
+  // FILTER BY EPS
+  epsOptions.forEach((option) => {
+    option.addEventListener("click", function () {
+      // Get the selected eps value
+      const selectedEps = option.innerHTML;
+
+      // Update the button text with the selected eps
+      epsDisplay.textContent = selectedEps;
+
+      if (selectedEps === "All eps") {
+        eps = "";
+      } else {
+        eps = selectedEps;
+      }
+      const ajax = new XMLHttpRequest();
+
+      ajax.onreadystatechange = () => {
+        if (ajax.readyState == 4 && ajax.status == 200) {
+          resultContainer.innerHTML = ajax.responseText;
+        }
+      };
 
-    epsButton.addEventListener('click', function() {
-        epsContent.style.display = "block";
-    })
-
-    // FILTER BY EPS
-    sortOptions.forEach(option => {
-        option.addEventListener('click', function() {
-            // Get the selected sort value
-            const selectedSort = option.innerHTML;
-            
-            // Update the button text with the selected sort
-            sortDisplay.textContent = selectedSort;
-            
-            
-            sort = selectedSort;
-            const ajax = new XMLHttpRequest();
-
-            ajax.onreadystatechange = () => {
-                if(ajax.readyState == 4 && ajax.status == 200) {
-                    resultContainer.innerHTML = ajax.responseText;
-                }
-            }
-            
-            ajax.open('GET', 
-            `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
-            ajax.send();
-
-            sortContent.style.display = "none";
-        });
+      ajax.open(
+        "GET",
+        `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`,
+        true
+      );
+      ajax.send();
+
+      epsContent.style.display = "none";
     });
+  });
 
-    sortButton.addEventListener('click', function() {
-        sortContent.style.display = "block";
-    })
+  epsButton &&
+    epsButton.addEventListener("click", function () {
+      epsContent.style.display = "block";
+    });
 
-    window.addEventListener('click', function(e) { 
-        if (!genreButton.contains(e.target)){
-            genreContent.style.display = "none";
-        }
-        if (!epsButton.contains(e.target)){
-            epsContent.style.display = "none";
-        }
-        if (!sortButton.contains(e.target)){
-            sortContent.style.display = "none";
+  // FILTER BY EPS
+  sortOptions.forEach((option) => {
+    option.addEventListener("click", function () {
+      // Get the selected sort value
+      const selectedSort = option.innerHTML;
+
+      // Update the button text with the selected sort
+      sortDisplay.textContent = selectedSort;
+
+      sort = selectedSort;
+      const ajax = new XMLHttpRequest();
+
+      ajax.onreadystatechange = () => {
+        if (ajax.readyState == 4 && ajax.status == 200) {
+          resultContainer.innerHTML = ajax.responseText;
         }
+      };
+
+      ajax.open(
+        "GET",
+        `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`,
+        true
+      );
+      ajax.send();
+
+      sortContent.style.display = "none";
     });
-}
\ No newline at end of file
+  });
+
+  sortButton &&
+    sortButton.addEventListener("click", function () {
+      sortContent.style.display = "block";
+    });
+
+  window.addEventListener("click", function (e) {
+    if (!genreButton.contains(e.target)) {
+      genreContent.style.display = "none";
+    }
+    if (!epsButton.contains(e.target)) {
+      epsContent.style.display = "none";
+    }
+    if (!sortButton.contains(e.target)) {
+      sortContent.style.display = "none";
+    }
+  });
+// };
diff --git a/src/public/styles/home/Home.css b/src/public/styles/home/Home.css
index 5fdd9122f2b95b2d781af0e6b9b093dbddecf466..b8adaf9718f4476d2a687c2bec6e3d0eb8850f49 100644
--- a/src/public/styles/home/Home.css
+++ b/src/public/styles/home/Home.css
@@ -4,7 +4,7 @@
     padding: 100px 100px;
 }
 
-.podcast-list {
+.home-podcast-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;