diff --git a/frontend/index.html b/frontend/index.html
index 2727c43..fb56fae 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -82,15 +82,25 @@
     </div>
   </div>
 
-  <div id="map" class="d-none d-md-block"></div>
-  <div id="card-container" class="shadow-lg bg-success-subtle">
-    <h1 class="fs-4 text-center m-2 mb-4">Klangkarte
-      <a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
-        <svg>
-          <use href="/icons.svg#info"></use>
-        </svg>
-      </a>
-    </h1>
+  <div id="map-container">
+    <button id="btn-show-list" class="btn btn-light btn-outline-success btn-sm" title="Liste anzeigen"
+      onclick="hideTab('map')">
+      zur Liste
+    </button>
+    <div id="map"></div>
+  </div>
+
+  <div id="list-container" class="hidden-tab shadow-lg bg-success-subtle">
+    <button id="btn-show-map" class="btn btn-light btn-outline-success btn-sm" title="Karte anzeigen"
+      onclick="hideTab('list')">
+      zur Karte
+    </button>
+    <a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
+      <svg>
+        <use href="/icons.svg#info"></use>
+      </svg>
+    </a>
+    <h1 class="fs-4 text-center m-2 mb-4">Klangkarte</h1>
     <div id="cards">
       <div id="card-template" class="card shadow-sm">
         <img class="card-img-top lozad" alt="Kein Bild">
diff --git a/frontend/script.js b/frontend/script.js
index 1415b63..b49f8f0 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -115,6 +115,12 @@ function showNotice(id) {
     return false;
 }
 
+function hideTab(tab) {
+    document.getElementById('map-container').classList.remove('hidden-tab');
+    document.getElementById('list-container').classList.remove('hidden-tab');
+    document.getElementById(tab + '-container').classList.add('hidden-tab');
+}
+
 // ---------------------
 // Initializer
 // ---------------------
diff --git a/frontend/style.css b/frontend/style.css
index e0eaf61..241b134 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2,15 +2,20 @@ html, body {
   height: 100%;
   margin: 0;
 }
-#map {
+#map-container {
   width: calc(100% - 316px);
   height: 100%;
+  position: relative;
+}
+#map {
+  width: 100%;
+  height: 100%;
 }
 #detail-map {
   width: 100%;
   height: 200px;
 }
-#card-container {
+#list-container {
   position: absolute;
   right: 0;
   top: 0;
@@ -20,13 +25,24 @@ html, body {
   overflow: auto;
   /* filter: drop-shadow(0 0 2px #000); */
 }
-#info svg {
-  width: .75em;
-  height: .75em;
+
+#btn-show-map {
+  margin: 8px;
+}
+#btn-show-list {
   position: absolute;
   top: 8px;
   right: 8px;
-  fill: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1));
+  z-index: 810;
+}
+
+#info svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  fill: rgba(var(--bs-success-rgb), var(--bs-link-opacity, 1));
 }
 
 .card {
@@ -96,10 +112,22 @@ html, body {
   width: 100%;
 }
 
-@media(max-width: 768px) {
-  #card-container {
+/* responsive toggle */
+
+#btn-show-map, #btn-show-list {
+  display: none;
+}
+
+@media(max-width: 600px) {
+  #btn-show-map, #btn-show-list {
+    display: unset;
+  }
+  #map-container, #list-container {
     width: 100%;
   }
+  .hidden-tab {
+    display: none;
+  }
   .card img {
     height: calc(100vw * 2/3);
     line-height: calc((100vw - 20px) * 2/3);