diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
index 8584782b1f4b399db8cc38906018dfe2123d1f23..e74a7afc70728c6ee19126be6371533b3069db1d 100644
--- a/src/app/components/app/app_page.php
+++ b/src/app/components/app/app_page.php
@@ -10,11 +10,17 @@
     <!-- 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">
+
+    <!-- <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css"> -->
+    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/layout.css">
+    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/pages/main.css">
+    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/pages/episode.css">
+    <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/components/button.css">
     <!-- JavaScript Library -->
     <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.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/app/app.js" defer></script>
+    <script type="module" src="<?= BASE_URL ?>/javascript/dashboard/layout.mjs" defer></script>
+    <script type="module" src="<?= BASE_URL ?>/javascript/app/app.js" defer></script>
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/src/app/components/common/sidebar.php b/src/app/components/common/sidebar.php
index 114c2dc8fab2e09bd79c8e3b14dd8a1c851cf8e9..dde5e04197d174ff58af84be9d42dc833df4af5c 100644
--- a/src/app/components/common/sidebar.php
+++ b/src/app/components/common/sidebar.php
@@ -1,26 +1,26 @@
 <aside>
-    <div class="sidebar-container">            
-        <div class="sidebar-item" onclick="getPage('home')">
+    <div class="sidebar-container">
+        <div id="sidebar-home" class="sidebar-item">
             <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/home_icon.svg" alt="home">
             <div class="sh5">Home</div>
         </div>
-        <div class="sidebar-item" onclick="getPage('search')">
+        <div id="sidebar-search" class="sidebar-item">
             <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="search">
             <div class="sh5">Search</div>
         </div>
-        <div class="sidebar-item" onclick="getPage('library')">
+        <div id="sidebar-library" class="sidebar-item">
             <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/library_icon.svg" alt="library">
             <div class="sh5">Library</div>
         </div>
 
-        <?php if (isset($_SESSION["role_id"] )) :?>
-        <?php if ($_SESSION["role_id"] == 1) :?>
-            <div class="sidebar-item" onclick="getPage('dashboard')">
-                <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/fire_icon.svg" alt="dashboard">
-                <div class="sh5">Dashboard</div>
-            </div>
-        <?php endif;?>
-        <?php endif;?>
+        <?php if (isset($_SESSION["role_id"])) : ?>
+            <?php if ($_SESSION["role_id"] == 1) : ?>
+                <div id="sidebar-dashboard" class="sidebar-item">
+                    <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/fire_icon.svg" alt="dashboard">
+                    <div class="sh5">Dashboard</div>
+                </div>
+            <?php endif; ?>
+        <?php endif; ?>
 
     </div>
 </aside>
\ No newline at end of file
diff --git a/src/app/components/common/toast.php b/src/app/components/common/toast.php
index c588d6a6b3f98573868fb25b8c12c041ae7913b6..bc6eae1630dea48a1d467331e231730206daacc8 100644
--- a/src/app/components/common/toast.php
+++ b/src/app/components/common/toast.php
@@ -1,8 +1,8 @@
-<aside id="toast" class="hidden">
+<div id="toast" class="hidden">
   <p class="b3"></p>
   <button id="toast-close-btn">
     <img width="12" height="12" src="<?= BASE_URL ?>/images/dashboard/cross.svg" alt="close toast">
   </button>
-</aside>
+</div>
 
 <div id="overlay-toast" class="overlay hidden"></div>
\ No newline at end of file
diff --git a/src/app/components/dashboard/layout.php b/src/app/components/dashboard/layout.php
index 52c7fb2c9a81fd41b415b247f02471b928448bac..b642c54dce626674ae69fbabc9da9cd411dae995 100644
--- a/src/app/components/dashboard/layout.php
+++ b/src/app/components/dashboard/layout.php
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -16,7 +16,7 @@
   <title>Main Dashboard</title>
 </head>
 
-<body>
+<body> -->
   <?php include(dirname(__DIR__) . "/common/toast.php") ?>
 
   <div id="overlay-layout" class="overlay hidden"></div>
@@ -36,7 +36,7 @@
         <ul id="podcast-choices" class="hidden">
           <?php foreach ($this->data["podcasts"] as $podcast) : ?>
             <li>
-              <a href="/public/dashboard/main?id_podcast=<?= $podcast->id_podcast ?>">
+              <a href="/public/dashboard-main?id_podcast=<?= $podcast->id_podcast ?>">
                 <p class="b3"><?= $podcast->title ?></p>
               </a>
             </li>
@@ -54,6 +54,6 @@
 
     <section id="dashboard-section"></section>
   </main>
-</body>
+<!-- </body>
 
-</html>
\ No newline at end of file
+</html> -->
\ No newline at end of file
diff --git a/src/app/components/dashboard/pages/dash_form.php b/src/app/components/dashboard/pages/dash_form.php
index 32eef95dcbc1665120081b22322b45e332b14a8a..84741e792141863425383428bc59f9e82174bf0a 100644
--- a/src/app/components/dashboard/pages/dash_form.php
+++ b/src/app/components/dashboard/pages/dash_form.php
@@ -19,7 +19,7 @@
   <?php include(dirname(__DIR__) . "/../common/toast.php") ?>
 
   <main>
-    <a class="back-link" href="<?= BASE_URL ?>/dashboard/main?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>">
+    <a class="back-link" href="<?= BASE_URL ?>/dashboard-main?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>">
       <img src="<?= BASE_URL ?>/images/dashboard/right_arrow.svg" alt="">
       <p class="sh4">Kembali Ke Dashboard</p>
     </a>
diff --git a/src/app/components/dashboard/pages/episode.php b/src/app/components/dashboard/pages/episode.php
index 3952f958b8511bd8b0dd85b1153c7d5c0ce171a4..b054d7e897f363d997516781f35ab62cfd5e728a 100644
--- a/src/app/components/dashboard/pages/episode.php
+++ b/src/app/components/dashboard/pages/episode.php
@@ -33,7 +33,7 @@
 
   <ul style="display: flex; gap: 8px; justify-content: center">
     <?php foreach ($this->data["page_count"] as $idx => $episode) : ?>
-      <li style="padding: 0; border: none;"><a style="padding: 8px; background-color: red" href="<?= BASE_URL ?>/dashboard/episode?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>&page=<?= $idx + 1 ?>"><?= $idx + 1 ?></a></li>
+      <li style="padding: 0; border: none;"><a style="padding: 8px; background-color: red" href="<?= BASE_URL ?>/dashboard-episode?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>&page=<?= $idx + 1 ?>"><?= $idx + 1 ?></a></li>
     <?php endforeach; ?>
   </ul>
 </section>
\ No newline at end of file
diff --git a/src/app/core/app.php b/src/app/core/app.php
index b1a9253c72be63c3259e4b762105bd6df4fc597c..72ddb53ecfd2ceb5af10dffc6c0145098b628e38 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -15,7 +15,9 @@ class App
     $router->get("public/library", new AppController());
     $router->get("public/playlist", new AppController());
     $router->get("public/dashboard", new AppController());
-    
+    $router->get("public/dashboard-main", new AppController());
+    $router->get("public/dashboard-episode", new AppController());
+  
     $router->get("public/components/home", new GetHomeController());
     $router->get("public/components/search", new GetSearchController());
     $router->get("public/components/library", new GetLibraryController());
@@ -23,16 +25,17 @@ class App
 
     // Dashboard page routes
     $router->get("public/components/dashboard", new GetDashboardLayoutController());
-    $router->get("public/dashboard/main", new GetDashboardLayoutController());
-    $router->get("public/dashboard/episode", new GetDashboardLayoutController());
+    $router->get("public/components/dashboard-main", new GetDashboardLayoutController());
+    $router->get("public/components/dashboard-episode", new GetDashboardLayoutController());
+
     $router->get("public/dashboard/add-episode", new GetAddEpisodeController());
     $router->get("public/dashboard/add-podcast", new GetAddPodcastController());
     $router->get("public/dashboard/edit-episode", new GetEditEpisodeController());
     $router->get("public/dashboard/edit-podcast", new GetEditPodcastController());
 
     // Dashboard data-fetching routes
-    $router->get("public/dashboard/internal/main", new GetDashboardMainController());
-    $router->get("public/dashboard/internal/episode", new GetDashboardEpisodeController());
+    $router->get("public/dashboard/internal/dashboard-main", new GetDashboardMainController());
+    $router->get("public/dashboard/internal/dashboard-episode", new GetDashboardEpisodeController());
     $router->post("public/dashboard/add-episode", new PostAddEpisodeController());
     $router->post("public/dashboard/edit-episode", new PostEditEpisodeController());
     $router->get("public/dashboard/user-podcast", new GetUserPodcastController());
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
index 8ac2668abdee1d7d5925f8426aab3ff28ccb64a7..ac4d4093e4cea57b5d262ee7be35c69f3744d76f 100644
--- a/src/public/javascript/app/app.js
+++ b/src/public/javascript/app/app.js
@@ -1,29 +1,46 @@
-const mainSection = document.querySelector('#main-section');
-const sidebar = document.querySelector('.sidebar');
+import { handleDashboard } from "../dashboard/layout.mjs";
+
+const mainSection = document.querySelector("#main-section");
+const sidebar = document.querySelector(".sidebar");
+
+const sidebarHome = document.getElementById("sidebar-home");
+const sidebarSearch = document.getElementById("sidebar-search");
+const sidebarLibrary = document.getElementById("sidebar-library");
+const sidebarDashboard = document.getElementById("sidebar-dashboard");
 
 const urls = window.location.href.split("?")[0].split("/");
 let lastURL = urls[urls.length - 1];
 
+const queryParam = window.location.href.split("?")[1] || "";
+
 window.onload = () => {
-    getPage(lastURL);
-}
-
-getPage = (page) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', `/public/components/${page}`, true);
-
-    xhr.onreadystatechange = () => {
-        if(xhr.readyState == 4 && xhr.status == 200) {
-            mainSection.innerHTML = xhr.responseText;
-            // handleSearch();
-            // handleDashboard();
-        }
+  getPage(lastURL, queryParam);
+};
+
+const getPage = (page, queryParam) => {
+  const query = queryParam !== "" ? "?" + queryParam : queryParam;
+
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", `/public/components/${page}${query}`, true);
+
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      mainSection.innerHTML = xhr.responseText;
+      // handleSearch();
+      if (window.location.href.includes("dashboard")) {
+        handleDashboard();
+      }
     }
+  };
+
+  xhr.send();
+  history.pushState({}, "", `http://localhost:8080/public/${page}${query}`);
+};
 
-    xhr.send();
-    history.pushState(
-        {},
-        "",
-        `http://localhost:8080/public/${page}`
-    );
-}   
+sidebarHome && sidebarHome.addEventListener("click", () => getPage("home", ""));
+sidebarSearch &&
+  sidebarSearch.addEventListener("click", () => getPage("search", ""));
+sidebarLibrary &&
+  sidebarLibrary.addEventListener("click", () => getPage("library", ""));
+sidebarDashboard &&
+  sidebarDashboard.addEventListener("click", () => getPage("dashboard", ""));
diff --git a/src/public/javascript/dashboard/inputForm.js b/src/public/javascript/dashboard/inputForm.js
index 7e9172f7f2bb614aaf527ab034c7ddca8622ead1..0fa4c2be74dad4b2a16ea88784ecb3c5c4467c26 100644
--- a/src/public/javascript/dashboard/inputForm.js
+++ b/src/public/javascript/dashboard/inputForm.js
@@ -227,7 +227,7 @@ saveButtonEl.addEventListener("click", (e) => {
           showSuccessToast("Episode added successfully!");
           setTimeout(() => {
             window.location.replace(
-              `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}`
+              `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}`
             );
           }, 1000);
         }
@@ -262,7 +262,7 @@ saveButtonEl.addEventListener("click", (e) => {
           showSuccessToast("Episode updated successfully!");
           setTimeout(() => {
             window.location.replace(
-              `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}`
+              `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}`
             );
           }, 1000);
         }
@@ -341,7 +341,7 @@ saveButtonEl.addEventListener("click", (e) => {
           showSuccessToast("Podcast updated successfully!");
           setTimeout(() => {
             window.location.replace(
-              `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}`
+              `http://localhost:8080/public/dashboard-main?id_podcast=${idPodcast}`
             );
           }, 1000);
         }
diff --git a/src/public/javascript/dashboard/layout.js b/src/public/javascript/dashboard/layout.mjs
similarity index 88%
rename from src/public/javascript/dashboard/layout.js
rename to src/public/javascript/dashboard/layout.mjs
index bc717f2dbe0a0d70d86a89f24ec43d108ffbd588..bd6b475741668298f6d22f1e14e629ec9b60aaad 100644
--- a/src/public/javascript/dashboard/layout.js
+++ b/src/public/javascript/dashboard/layout.mjs
@@ -1,8 +1,7 @@
-import { showSuccessToast } from "../toast.mjs";
-const handleDashboard = () => {
-  "use strict";
-
+"use strict";
 
+import { showSuccessToast } from "../toast.mjs";
+export function handleDashboard() {
   // Get DOM elements
   const dashboardLink = document.getElementById("dashboard-link");
   const episodeLink = document.getElementById("episode-link");
@@ -40,10 +39,10 @@ const handleDashboard = () => {
       }
 
       if (lastURL === "dashboard") {
-        lastURL = "main";
+        lastURL = "dashboard-main";
       }
 
-      if (lastURL === "main") {
+      if (lastURL === "dashboard-main") {
         dashboardLink.classList.add("nav-active");
       } else {
         episodeLink.classList.add("nav-active");
@@ -54,7 +53,7 @@ const handleDashboard = () => {
       xhr2.open(
         "GET",
         `/public/dashboard/internal/${lastURL}?id_podcast=${idPodcast}${
-          lastURL === "episode" ? `&page=${page || 1}` : ""
+          lastURL === "dashboard-episode" ? `&page=${page || 1}` : ""
         }`
       );
       xhr2.send(null);
@@ -83,8 +82,8 @@ const handleDashboard = () => {
       history.pushState(
         {},
         "",
-        `/public/dashboard/${lastURL}?id_podcast=${idPodcast}${
-          lastURL === "episode" ? `&page=${page || 1}` : ""
+        `/public/${lastURL}?id_podcast=${idPodcast}${
+          lastURL === "dashboard-episode" ? `&page=${page || 1}` : ""
         }`
       );
     }
@@ -112,7 +111,7 @@ const handleDashboard = () => {
     history.pushState(
       {},
       "",
-      `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}&page=1`
+      `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}&page=1`
     );
 
     dashboardLink.classList.toggle("nav-active");
@@ -121,7 +120,7 @@ const handleDashboard = () => {
     const xhr = new XMLHttpRequest();
     xhr.open(
       "GET",
-      `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
+      `/public/dashboard/internal/dashboard-episode?id_podcast=${idPodcast}&page=1`
     );
     xhr.send(null);
 
@@ -148,14 +147,14 @@ const handleDashboard = () => {
     history.pushState(
       {},
       "",
-      `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}`
+      `http://localhost:8080/public/dashboard-main?id_podcast=${idPodcast}`
     );
 
     dashboardLink.classList.toggle("nav-active");
     episodeLink.classList.toggle("nav-active");
 
     const xhr1 = new XMLHttpRequest();
-    xhr1.open("GET", `/public/dashboard/internal/main?id_podcast=${idPodcast}`);
+    xhr1.open("GET", `/public/dashboard/internal/dashboard-main?id_podcast=${idPodcast}`);
     xhr1.send(null);
 
     xhr1.onreadystatechange = function () {
@@ -186,7 +185,7 @@ const handleDashboard = () => {
         const xhr2 = new XMLHttpRequest();
         xhr2.open(
           "GET",
-          `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
+          `/public/dashboard/internal/dashboard-episode?id_podcast=${idPodcast}&page=1`
         );
         xhr2.send(null);
 
@@ -209,4 +208,4 @@ const handleDashboard = () => {
       }
     };
   }
-}
\ No newline at end of file
+}
diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js
index f7d852b6b7aa695985708c1a69ab276459a52cba..677aa6dc04169a733809b08616a70f6a3ec217d0 100644
--- a/src/public/javascript/search/search.js
+++ b/src/public/javascript/search/search.js
@@ -1,4 +1,4 @@
-// const handleSearch = () => {
+export const handleSearch = () => {
   const searchInput = document.getElementById("search-input");
   const resultContainer = document.querySelector(".result-container");
 
@@ -171,4 +171,4 @@
       sortContent.style.display = "none";
     }
   });
-// };
+};
diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css
index f7951e9ea118c840b231903f3a08a6f324945d1e..030ccbdd3637ad689ffd1fc0b1e30287c6a8dfdc 100644
--- a/src/public/styles/globals.css
+++ b/src/public/styles/globals.css
@@ -198,7 +198,7 @@ aside .sidebar-item {
   padding-top: 4px;
   padding-bottom: 4px;
   border-radius: 20px;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 /* Bottom Bar and Audio Player */
@@ -331,6 +331,7 @@ aside .sidebar-item {
   padding: 10px 24px 12px;
   transform: translateX(-50%);
   z-index: 110;
+  /* height: 50px; */
 }
 #toast > button > img {
   margin-top: 6px;