diff --git a/static/controls.js b/static/controls.js
index 9748f64..7d373d2 100644
--- a/static/controls.js
+++ b/static/controls.js
@@ -21,6 +21,45 @@ const control_volume_down = document.getElementById("control-volume-down");
 const queue_table = document.querySelector("#queue tbody");
 const control_track = document.getElementById("control-track");
 const control_time = document.getElementById("control-time");
+const tabs = document.getElementById("tabs");
+const tab_browser = document.getElementById("tab-browser");
+const tab_search = document.getElementById("tab-search");
+const tab_playlists = document.getElementById("tab-playlists");
+
+// UI controls
+
+tab_browser.addEventListener("click", e => {
+  if (!tab_browser.classList.contains("active")) {
+    tab_browser.classList.add("active");
+    tab_search.classList.remove("active")
+    tab_playlists.classList.remove("active")
+    document.getElementById("file-browser").style.display = "block";
+    document.getElementById("search").style.display = "none";
+    document.getElementById("playlist-browser").style.display = "none";
+  }
+});
+
+tab_search.addEventListener("click", e => {
+  if (!tab_search.classList.contains("active")) {
+    tab_browser.classList.remove("active");
+    tab_search.classList.add("active")
+    tab_playlists.classList.remove("active")
+    document.getElementById("file-browser").style.display = "none";
+    document.getElementById("search").style.display = "block";
+    document.getElementById("playlist-browser").style.display = "none";
+  }
+});
+
+tab_playlists.addEventListener("click", e => {
+  if (!tab_playlists.classList.contains("active")) {
+    tab_browser.classList.remove("active");
+    tab_search.classList.remove("active")
+    tab_playlists.classList.add("active")
+    document.getElementById("file-browser").style.display = "none";
+    document.getElementById("search").style.display = "none";
+    document.getElementById("playlist-browser").style.display = "block";
+  }
+});
 
 // Add API calls to controls
 
diff --git a/static/index.html b/static/index.html
index 2387fb9..c923696 100644
--- a/static/index.html
+++ b/static/index.html
@@ -79,8 +79,53 @@
       <tbody></tbody>
     </table>
   </div>
-  <div id="browser">browser</div>
-  <div id="result">result</div>
+  <div id="browser">
+    <div id="tabs">
+      <a id="tab-browser" class="active" href="#">File Browser</a>
+      <a id="tab-search" href="#">Search</a>
+      <a id="tab-playlists" href="#">Playlists</a>
+    </div>
+    <div id="file-browser">
+      <div>
+        file browser
+      </div>
+      <div>
+        actions
+      </div>
+    </div>
+    <div id="search" style="display: none">
+      <div>
+        <label for="control-search"></label>
+        <input type="text" id="control-search" name="search" />
+        <button>Search</button>
+      </div>
+      <div>
+        actions
+      </div>
+    </div>
+    <div id="playlist-browser" style="display: none">
+      <div>
+        playlist browser
+      </div>
+      <div>
+        actions
+      </div>
+    </div>
+  </div>
+  <div id="result">
+    <table>
+      <thead>
+      <tr>
+        <th>Artist</th>
+        <th>Title</th>
+        <th>Album</th>
+        <th>Genre</th>
+        <th>Time</th>
+      </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
   <footer>
     <a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
   </footer>
diff --git a/static/style.css b/static/style.css
index 9e16773..ccad8a0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,7 +16,7 @@ main {
   display: grid;
   grid-auto-columns: 1fr;
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: 150px 1fr 1fr;
+  grid-template-rows: 100px 1fr 1fr;
   gap: 0 0;
   grid-template-areas: "nav nav" "queue queue" "browser result" "footer footer";
 }
@@ -191,6 +191,15 @@ input[type=text] {
   border-bottom-color: #545454;
 }
 
+#nav {
+  padding: 5px;
+  background: linear-gradient(0deg, rgba(3,7,11,1) 0%, rgba(14,27,43,1) 4%, rgba(41,55,74,1) 6%, rgba(18,35,56,1) 94%, rgba(40,68,104,1) 96%, rgba(168,182,200,1) 100%);
+}
+
+#nav > div {
+  border-right: 1px solid black;
+}
+
 thead {
   background: rgb(15,29,47);
   background: linear-gradient(0deg, rgba(15,29,47,1) 0%, rgba(15,29,47,1) 50%, rgba(7,14,23,1) 100%);
@@ -260,6 +269,37 @@ table tr:hover td {
   background-color: #354158 !important; /* TODO: remove !important */
 }
 
+#tabs {
+  display: flex;
+}
+
+#tabs a {
+  width: 50%;
+  padding: 3pt;
+  display: inline-block;
+  text-align: center;
+  background-color: #28374a;
+  color: #bbb;
+  border: 1px solid #545454;
+  border-top-left-radius: 5pt;
+  border-top-right-radius: 5pt;
+}
+
+#tabs a.active {
+  background-color: #1a1a1a;
+  color: #bbb;
+  border-bottom: none;
+  /*border-top-color: #1a1a1a;*/
+  /*border-right-color: #545454;*/
+  /*border-bottom-color: #545454;*/
+  /*border-left-color: #1a1a1a;*/
+}
+
+#browser {
+  background-color: #171812;
+  border-right: 4px ridge #3a506b;
+}
+
 footer svg {
   color: white;
   width: 12pt;