diff --git a/assets/css/scene.css b/assets/css/scene.css
index 5d188d9..0a1ef53 100644
--- a/assets/css/scene.css
+++ b/assets/css/scene.css
@@ -12,3 +12,39 @@
   background-color: #f8f9fa;
   opacity: 0.7;
 }
+
+.btn-close-sidebar {
+  width: 100%;
+  padding: 10px;
+  background-color: #ff4081;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 0;
+}
+
+.btn-close-sidebar:hover {
+  background-color: #e03570;
+}
+
+.hide {
+  display: none;
+}
+
+.btn-open-sidebar {
+  z-index: 99999;
+  position: fixed;
+  width: 250px;
+  background-color: #40ffbe;
+  color: black;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 0;
+  opacity: 0.7;
+}
+
+.btn-open-sidebar:hover {
+  background-color: #0dffad;
+}
diff --git a/assets/js/scene.js b/assets/js/scene.js
index 3f40ef9..c0a6f48 100644
--- a/assets/js/scene.js
+++ b/assets/js/scene.js
@@ -80,18 +80,27 @@ async function loadSidebar(scene_id, destination) {
       p.appendChild(ul);
 
       var button = document.createElement("button");
-      button.setAttribute("class", "btn btn-primary");
+      button.setAttribute("class", "btn-close-sidebar");
       button.setAttribute("type", "button");
-      button.setAttribute("data-bs-toggle", "collapse");
-      button.setAttribute("data-bs-target", "#sceneSidebar");
-      button.setAttribute("aria-expanded", false);
-      button.setAttribute("aria-controls", "sceneSidebar");
-      button.textContent = "<";
+      button.setAttribute("id", "btnCloseSidebar");
+      button.textContent = "Close Sidebar";
 
-      //p.appendChild(button); // TODO: Make it prettier before enabling.
+      button.addEventListener("click", function () {
+        toggleSidebar();
+      });
 
+      sidebar.appendChild(button); // TODO: Make it prettier before enabling.
       sidebar.appendChild(p);
 
+      var reopenButton = document.createElement("button");
+      reopenButton.setAttribute("class", "btn-open-sidebar hide");
+      reopenButton.textContent = "Open Sidebar";
+      reopenButton.addEventListener("click", function () {
+        toggleSidebar();
+      });
+
+      destination.prepend(reopenButton);
+
       destination.prepend(sidebar);
     });
   });
@@ -271,6 +280,20 @@ async function loadScene(
   });
 }
 
+function toggleSidebar() {
+  const sidebar = document.getElementById("sceneSidebar");
+  const reopenButton = document.querySelector(".btn-open-sidebar");
+  
+  if (!sidebar.classList.contains("show")) {
+    sidebar.classList.add("show");
+    reopenButton.classList.add("hide");
+  } else {
+    sidebar.classList.remove("show");
+    reopenButton.classList.remove("hide");
+  }
+}
+
+
 window.loadScene = loadScene;
 
 export { loadScene };