diff --git a/webclient/src/pages/index.vue b/webclient/src/pages/index.vue
index bf2fceb57..84d1f126d 100644
--- a/webclient/src/pages/index.vue
+++ b/webclient/src/pages/index.vue
@@ -1,212 +1,86 @@
 <script setup lang="ts">
-import "@/assets/spectre-all.scss";
 import { setTitle } from "@/composables/common";
 import { useFetch } from "@/composables/fetch";
 import type { components } from "@/api_types";
 import { useI18n } from "vue-i18n";
-import { ArrowRightIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
+import { MapPinIcon } from "@heroicons/vue/24/outline";
+import { ArrowRightIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
+import { ref } from "vue";
 type RootResponse = components["schemas"]["RootResponse"];
 
 const { t } = useI18n({ useScope: "local" });
 const { data } = useFetch<RootResponse>(`/api/get/root`, (d) => setTitle(d.name));
-
-function more(id: string) {
-  document.getElementById(`panel-${id}`)?.classList.add("open");
-}
-function less(id: string) {
-  document.getElementById(`panel-${id}`)?.classList.remove("open");
-}
+const openPanels = ref<(boolean | undefined)[]>([]);
 </script>
 
 <template>
-  <div v-if="data" id="view-main">
-    <div class="columns" style="margin-top: 25px">
-      <div class="column">
-        <h5>{{ t("sites") }}</h5>
-      </div>
-      <!-- <div class="column col-auto"><a href="#"><i class="icon icon-location" /> {{ t("overview_map") }}</a></div> -->
-    </div>
-    <div class="columns">
-      <div v-for="site in data.sites_overview" :key="site.id" class="col-6 col-xs-12 column">
-        <div class="panel" v-bind="{ id: `panel-${site.id}` }">
-          <div class="panel-header">
-            <RouterLink v-if="site.id" :to="'/view/' + site.id">
-              <div class="columns">
-                <div class="column">
-                  <div class="h6 panel-title">{{ site.name }}</div>
-                </div>
-                <div class="column col-auto">
-                  <button
-                    type="button"
-                    class="btn btn-link"
-                    :style="{ visibility: site.id ? undefined : 'hidden' }"
-                    :aria-label="`show the details for the campus '${site.name}'`"
-                  >
-                    <ArrowRightIcon class="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-            </RouterLink>
-            <div v-else class="columns">
-              <div class="column">
-                <div class="h6 panel-title">{{ site.name }}</div>
-              </div>
+  <div class="flex flex-row justify-between pt-14">
+    <div class="!text-xl font-semibold text-slate-600">{{ t("sites") }}</div>
+    <!-- <a href="#" class="flex flex-row"><MapPinIcon class="h-4 w-4" /> {{ t("overview_map") }}</a> -->
+  </div>
+  <div v-if="data" class="mt-5">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div
+        v-for="(site, siteIndex) in data.sites_overview"
+        :key="site.id"
+        class="flex flex-col gap-4 rounded-xl border-2 p-8"
+      >
+        <div>
+          <RouterLink
+            v-if="site.id"
+            :to="'/view/' + site.id"
+            :aria-label="`show the details for the campus '${site.name}'`"
+            class="flex grow-0 flex-row justify-between !no-underline"
+          >
+            <span class="text-xl font-semibold text-slate-700 hover:text-tumBlue-500">{{ site.name }}</span>
+            <ArrowRightIcon v-if="site.id" class="my-auto hidden md:block h-6 w-6" />
+          </RouterLink>
+          <div v-else class="text-xl font-semibold">{{ site.name }}</div>
+        </div>
+        <div class="flex flex-col gap-3">
+          {{ openPanels[siteIndex] }}?{{ site.children.length }}:{{ site.n_visible }}
+          <RouterLink
+            v-for="c in site.children.slice(0, openPanels[siteIndex] ? site.children.length : site.n_visible)"
+            :key="c.id"
+            :to="'/view/' + c.id"
+            :aria-label="`show the details for the building '${c.name}'`"
+            class="flex flex-row justify-between text-tumBlue-600 !no-underline hover:text-tumBlue-500"
+          >
+            <div class="flex flex-row gap-3">
+              <MapPinIcon class="my-auto h-4 w-4" />
+              <span class="text-lg">{{ c.name }}</span>
             </div>
-          </div>
-          <div class="panel-body">
-            <RouterLink
-              v-for="(c, i) in site.children"
-              :key="c.id"
-              :to="'/view/' + c.id"
-              :class="{ 'link-more': i >= site.n_visible }"
-              :aria-label="`show the details for the building '${c.name}'`"
+            <ChevronRightIcon class="h-5 w-5 hidden sm:block" />
+          </RouterLink>
+          <div v-if="site.children.length > site.n_visible" class="mt-2">
+            <button
+              v-if="openPanels[siteIndex]"
+              type="button"
+              :aria-label="t('less_aria')"
+              class="flex flex-row gap-2"
+              @click="() => (openPanels[siteIndex] = false)"
             >
-              <div class="tile tile-centered">
-                <div class="tile-icon">
-                  <div class="example-tile-icon">
-                    <i class="centered icon icon-location" />
-                  </div>
-                </div>
-                <div class="tile-content">
-                  <div class="tile-title">{{ c.name }}</div>
-                </div>
-                <div class="tile-action">
-                  <button
-                    type="button"
-                    class="btn btn-link"
-                    :aria-label="`show the details for the building '${c.name}'`"
-                  >
-                    <ChevronRightIcon class="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-            </RouterLink>
+              <ChevronUpIcon class="h-4 w-4" />
+              {{ t("less") }}
+            </button>
             <button
-              v-if="site.children.length > site.n_visible"
+              v-else
               type="button"
-              class="btn btn-link btn-more"
+              class="flex flex-row gap-2"
               :aria-label="t('more_aria')"
-              @click="more(site.id)"
+              @click="() => (openPanels[siteIndex] = true)"
             >
-              <div class="flex flex-row gap-2">
-                <ChevronDownIcon class="h-4 w-4" />
-                {{ t("more") }}
-              </div>
-            </button>
-            <button type="button" class="btn btn-less btn-link" :aria-label="t('less_aria')" @click="less(site.id)">
-              <div class="flex flex-row gap-2">
-                <ChevronUpIcon class="h-4 w-4" />
-                {{ t("less") }}
-              </div>
+              <ChevronDownIcon class="h-4 w-4 my-auto" />
+              {{ t("more") }}
             </button>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <div v-else>{{ t("Loading data...") }}</div>
 </template>
 
-<style lang="scss">
-@import "@/assets/variables";
-
-#view-main {
-  .panel {
-    border: 1px solid $card-border;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: $card-shadow-dark;
-    margin: 10px 0;
-    padding-bottom: 12px;
-
-    .panel-header {
-      width: 100%;
-      margin-bottom: 8px;
-
-      & > a {
-        text-decoration: none;
-
-        .h6 {
-          text-align: left;
-          color: $body-font-color;
-          transition: color 0.1s;
-
-          &:hover,
-          &:active {
-            color: $primary-color;
-          }
-        }
-
-        button {
-          margin-top: -7px;
-          margin-bottom: -7px;
-        }
-      }
-
-      a.btn {
-        margin: -8px 0;
-      }
-
-      .h6 {
-        font-weight: bold;
-      }
-    }
-
-    .panel-body {
-      & > a {
-        text-decoration: none;
-      }
-
-      .link-more {
-        opacity: 0.5;
-        transition: opacity 0.1s;
-
-        .tile {
-          display: none;
-        }
-      }
-
-      .tile-icon {
-        color: $body-font-color;
-        margin-top: -4px;
-      }
-
-      .tile-title {
-        padding-left: 8px;
-      }
-    }
-
-    .btn-more,
-    .btn-less {
-      margin-top: 5px;
-      padding-bottom: 0;
-      padding-left: 0;
-    }
-
-    .btn-less {
-      display: none;
-    }
-  }
-
-  .panel.open {
-    .panel-body .link-more {
-      opacity: 1;
-
-      .tile {
-        display: flex;
-      }
-    }
-
-    .btn-more {
-      display: none;
-    }
-
-    .btn-less {
-      display: inline-block;
-    }
-  }
-}
-</style>
-
 <i18n lang="yaml">
 de:
   less: weniger
@@ -215,6 +89,7 @@ de:
   more_aria: mehr Gebäude anzeigen
   overview_map: Übersichtskarte
   sites: Standorte
+  "Loading data...": Lädt daten...
 en:
   less: less
   less_aria: show more buildings
@@ -222,4 +97,5 @@ en:
   more_aria: show more buildings
   overview_map: Overview Map
   sites: Sites
+  "Loading data...": Loading data...
 </i18n>
diff --git a/webclient/src/pages/search.vue b/webclient/src/pages/search.vue
index c9eb5c4b4..153641d62 100644
--- a/webclient/src/pages/search.vue
+++ b/webclient/src/pages/search.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import "@/assets/spectre-all.scss";
+//import "@/assets/spectre-all.scss";
 import { useFetch } from "@/composables/fetch";
 import { computed } from "vue";
 import { setDescription, setTitle } from "@/composables/common";
@@ -10,6 +10,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 
 import type { components } from "@/api_types";
+import { MapPinIcon, MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 type SearchResponse = components["schemas"]["SearchResponse"];
 
 const { t } = useI18n({ useScope: "local" });
@@ -92,8 +93,8 @@ function genDescription(): string {
             <RouterLink :to="'/view/' + e.id" class="tile tile-centered">
               <div class="tile-icon">
                 <template v-if="e.type === 'room' || e.type === 'virtual_room'">
-                  <i v-if="e.parsed_id" class="icon icon-search" />
-                  <i v-else class="icon icon-location" />
+                  <MagnifyingGlassIcon v-if="e.parsed_id" class="h-4 w-4" />
+                  <MapPinIcon v-else class="h-4 w-4" />
                 </template>
                 <img v-else class="avatar avatar-sm" src="@/assets/thumb-building.webp" :alt="t('thumbnail_alt')" />
               </div>
diff --git a/webclient/src/pages/view/[id].vue b/webclient/src/pages/view/[id].vue
index 548f118b1..1d842ef68 100644
--- a/webclient/src/pages/view/[id].vue
+++ b/webclient/src/pages/view/[id].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import "@/assets/spectre-all.scss";
+//import "@/assets/spectre-all.scss";
 import ShareButton from "@/components/ShareButton.vue";
 import DetailsInteractiveMap from "@/components/DetailsInteractiveMap.vue";
 import DetailsRoomOverviewSection from "@/components/DetailsRoomOverviewSection.vue";