diff --git a/css/filter.css b/css/filter.css
index 9750bdd..1bd6f5a 100644
--- a/css/filter.css
+++ b/css/filter.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   background-color: #e1e1e1;
   border-radius: 5px;
+  border: 1px solid #000;
   padding: 10px;
   top: 10px;
   right: 10px;
diff --git a/css/views.css b/css/views.css
index 86e4c0c..8c9cc7f 100644
--- a/css/views.css
+++ b/css/views.css
@@ -26,14 +26,32 @@
   top: 25%;
   left: 10px;
   width: fit-content;
-  height: 50%;
+  height: fit-content;
+  max-height: 50%;
   background-color: #e1e1e1;
   padding: 15px;
   border: 1px solid #000;
   border-radius: 5px;
 }
 
+#views-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#open-views {
+  display: none;
+}
+
+#views-menu-handler {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
 #view-selector {
+  margin-top: 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
diff --git a/img/close-left.svg b/img/close-left.svg
new file mode 100644
index 0000000..8fd678d
--- /dev/null
+++ b/img/close-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 16 16"><path fill="currentColor" d="M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771a.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0a.552.552 0 0 0 0-.771"/></svg>
\ No newline at end of file
diff --git a/img/open.svg b/img/open.svg
new file mode 100644
index 0000000..12924ca
--- /dev/null
+++ b/img/open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20v-7h1v5.312L18.312 5H13V4h7v7h-1V5.688L5.688 19H11v1H4Z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5167f9e..a2d762c 100644
--- a/index.html
+++ b/index.html
@@ -177,7 +177,13 @@ <h2 id="view-title-info"></h2>
   </div>
 
   <div id="views">
-    <p>Select a view:</p>
+    <div id="views-header">
+      <span>Select a view:</span>
+      <div id="views-menu-handler">
+        <img id="close-views" src="img/close-left.svg" alt="Close" width="20" height="20" />
+        <img id="open-views" src="img/open.svg" alt="Open" width="20" height="20" />
+      </div>
+    </div>
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
diff --git a/js/views/views.js b/js/views/views.js
index 8b05e1e..59b48d9 100644
--- a/js/views/views.js
+++ b/js/views/views.js
@@ -11,6 +11,20 @@ import { setRenderable } from "../draw/renderable.js";
 const currentView = {};
 
 const viewOptions = document.getElementById("view-selector");
+const openViewsButton = document.getElementById("open-views");
+const closeViewsButton = document.getElementById("close-views");
+
+openViewsButton.addEventListener("click", () => {
+  viewOptions.style.display = "flex";
+  openViewsButton.style.display = "none";
+  closeViewsButton.style.display = "block";
+});
+
+closeViewsButton.addEventListener("click", () => {
+  viewOptions.style.display = "none";
+  openViewsButton.style.display = "block";
+  closeViewsButton.style.display = "none";
+});
 
 export const scrollLocations = {};