diff --git a/_data/config-nav.csv b/_data/config-nav.csv
index ba0e1b78..f1475a13 100644
--- a/_data/config-nav.csv
+++ b/_data/config-nav.csv
@@ -1,13 +1,6 @@
 display_name,stub,dropdown_parent,external_link
-Sammlung,,,
-Durchsuchen,/browse.html,Sammlung,
-Themen,/subjects.html,Sammlung,
-Zeitachse,/timeline.html,Sammlung,
-Epochen,/eras.html,Sammlung,
+Sammlung,/browse.html,,
 Bibliografie,https://www.zotero.org/groups/5004193/stadt.geschichte.basel/library,,true
-Daten,,,
-Metadaten,/data.html,Daten,
-Datenarchiv,https://zenodo.org/communities/stadt-geschichte-basel/,Daten,true
-Quellcode,https://github.com/Stadt-Geschichte-Basel/,Daten,true
+Daten,/data.html,,
 Portal,https://stadtgeschichtebasel.ch/,,true
 Über,/about.html,,
diff --git a/_data/translations.yml b/_data/translations.yml
index 4b2b83c5..ec8cf81e 100644
--- a/_data/translations.yml
+++ b/_data/translations.yml
@@ -426,6 +426,22 @@ _includes:
         de: "Element anzeigen"
     modal-hash-js.html:
     table-js.html:
+      download:
+        en: "Download"
+        es: "Descargar"
+        de: "Herunterladen"
+      filtered_metadata_excel:
+        en: "Filtered Metadata (Excel)"
+        es: "Metadatos Filtrados (Excel)"
+        de: "Gefilterte Metadaten (Excel)"
+      filtered_metadata_csv:
+        en: "Filtered Metadata (CSV)"
+        es: "Metadatos Filtrados (CSV)"
+        de: "Gefilterte Metadaten (CSV)"
+      more_exports:
+        en: "More Exports"
+        es: "Más Exportaciones"
+        de: "Weitere Exporte"
     timeline-js.html:
   collection-banner.html:
     featured-items:
@@ -607,6 +623,37 @@ _layouts:
       en: "Loading"
       es: "Cargando"
       de: "Laden"
+    objects:
+      en: "Objects"
+      de: "Objekte"
+    timeline:
+      en: "Timeline"
+      es: "Línea de tiempo"
+      de: "Zeitachse"
+    subjects:
+      en: "Subjects"
+      es: "Temas"
+      de: "Themen"
+    eras:
+      en: "Eras"
+      es: "Épocas"
+      de: "Epochen"
+    view-objects:
+      en: "Show object view"
+      de: "Zeige Objektansicht"
+    view-timeline:
+      en: "Show objects on timeline"
+      de: "Zeige Objekte auf einer Zeitachse"
+    view-subjects:
+      en: "Show list of subjects"
+      de: "Zeige Liste mit Schlagwörtern"
+    view-eras:
+      en: "Show list of eras"
+      de: "Zeige Liste der Epochen"
+    switch-view:
+      en: "Switch view"
+      es: "Cambiar Vista"
+      de: "Ansicht wechseln"
   cloud.html:
   data.html:
     link:
diff --git a/_includes/js/switch-view-js.html b/_includes/js/switch-view-js.html
new file mode 100644
index 00000000..f72e7213
--- /dev/null
+++ b/_includes/js/switch-view-js.html
@@ -0,0 +1,38 @@
+<script>
+  const switchView = document.getElementById('switch-view');
+  const buttons = Array.from(switchView ? switchView.children : []);
+
+  function toggleButtonView() {
+    if (!switchView) return;
+
+    switchView.classList.add('btn-group-vertical');
+    switchView.classList.remove('btn-group');
+
+    // Hide last button (toggle) from vertical display
+    buttons.forEach((button, index) => {
+      button.style.display = index === buttons.length - 1 ? 'none' : 'block';
+    });
+  }
+
+  // Resizing with debounce
+  const debounce = (fn, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => fn(...args), delay);
+    };
+  };
+
+  const handleResize = () => {
+    if (!switchView) return;
+
+    if (window.innerWidth > 576) {
+      switchView.classList.add('btn-group', 'btn-group-toggle', 'd-flex');
+      switchView.classList.remove('btn-group-vertical');
+
+      buttons.forEach((button) => (button.style.display = ''));
+    }
+  };
+
+  window.addEventListener('resize', debounce(handleResize, 250));
+</script>
diff --git a/_includes/js/table-js.html b/_includes/js/table-js.html
index a7fe43ac..af91cbf2 100644
--- a/_includes/js/table-js.html
+++ b/_includes/js/table-js.html
@@ -1,5 +1,17 @@
 {% assign fcount = site.data['config-table'] | size %}
 {% assign lang = site.lang %}
+{% assign download_dropdown = site.data.translations._includes.js['table-js.html'].download[site.lang]
+  | default: 'Download'
+%}
+{% assign excel_export = site.data.translations._includes.js['table-js.html'].filtered_metadata_excel[site.lang]
+  | default: 'Filtered Metadata (Excel)'
+%}
+{% assign csv_export = site.data.translations._includes.js['table-js.html'].filtered_metadata_csv[site.lang]
+  | default: 'Filtered Metadata (CSV)'
+%}
+{% assign more_exports = site.data.translations._includes.js['table-js.html'].more_exports[site.lang]
+  | default: 'More Exports'
+%}
 {% include data-download-modal.html show_button=false %}
 <!-- load DataTables with jquery bundled -->
 <script
@@ -23,28 +35,27 @@
           "paging": true,
           "lengthMenu": [[ 25, 50, 100, -1], [ 25, 50, 100, "∞"]],
           // add download features
-          dom: 'B<"row mt-2"<"col-md-6"l><"col-md-6"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
+          dom: 'B<"d-flex justify-content-between align-items-center flex-nowrap mt-2"<"pagination-controls"l><"search-box"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
           buttons: [
               {
                   extend: 'collection',
-                  text: 'Tabelle exportieren',
+                  text: '{{ download_dropdown }}',
                   className: 'btn btn-outline-primary',
                   buttons: [
-
                       {
-                          text: 'Gefilterte Metadaten (Excel)',
+                          text: '{{ excel_export }}',
                           extend: 'excelHtml5',
                           className: 'btn btn-outline-primary'
                       },
                       {
-                          text: 'Gefilterte Metadaten (CSV)',
+                          text: '{{ csv_export }}',
                           extend: 'csvHtml5',
                           className: 'btn btn-outline-primary'
                       }
                   ]
               },
               {
-                  text: 'Sammlungsmetadaten',
+                  text: '{{ more_exports }}',
                   action: function ( e, dt, node, config ) {
                           $('#dataModal').modal('show');
                       },
diff --git a/_layouts/browse.html b/_layouts/browse.html
index 274c2c69..95420011 100644
--- a/_layouts/browse.html
+++ b/_layouts/browse.html
@@ -5,73 +5,96 @@
 ---
 {{ content }}
 
-<div class="row mb-3 justify-content-center">
-  <div class="col-md-8 text-center">
-    <form role="search" id="lunrSearch" onsubmit="submitFilter(); return false;">
-      <div class="input-group input-group-lg">
-        <input
-          type="text"
-          class="form-control"
-          id="filterTextBox"
-          placeholder="{{ site.data.translations['_layouts']['browse.html']['filter'][site.lang] | default: 'Filter' }} ..."
-          aria-label="{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}"
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center mb-2 mb-lg-0">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
         >
-        <button
-          class="btn btn-secondary"
-          type="submit"
-          title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}"
-          id="filterButton"
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
         >
-          {{ site.data.translations._layouts['browse.html'].search[site.lang] | default: 'Search' }}
-        </button>
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
         <button
-          class="btn btn-outline-secondary text-dark filter"
-          onclick="resetFilter(); return false;"
-          data-filter=""
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
         >
-          {{ site.data.translations._layouts['browse.html'].reset[site.lang] | default: 'Reset' }}
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
         </button>
       </div>
-    </form>
-    <div class="h2" id="numberOf"></div>
+    </div>
+
+    <div class="col align-self-end">
+      <form class="d-flex" role="search" id="lunrSearch" onsubmit="event.preventDefault(); submitFilter();">
+        <div class="input-group input-group-lg flex-nowrap">
+          <input
+            type="text"
+            class="form-control flex-nowrap"
+            id="filterTextBox"
+            placeholder="{{ site.data.translations['_layouts']['browse.html']['filter'][site.lang] | default: 'Filter' }} ..."
+            aria-label="{{ site.data.translations['_layouts']['browse.html']['search'][site.lang] | default: 'Search' }}"
+          >
+          <button
+            class="btn btn-secondary"
+            type="submit"
+            title="{{ site.data.translations['_layouts']['browse.html']['filter-items'][site.lang] | default: 'Filter items' }}"
+            id="filterButton"
+          >
+            {{ site.data.translations._layouts['browse.html'].search[site.lang] | default: 'Search' }}
+          </button>
+          <button
+            class="btn btn-outline-secondary text-dark filter d-none d-sm-flex"
+            type="reset"
+            onclick="event.preventDefault(); resetFilter();"
+            data-filter=""
+          >
+            {{ site.data.translations._layouts['browse.html'].reset[site.lang] | default: 'Reset' }}
+          </button>
+        </div>
+      </form>
+    </div>
   </div>
-  <div class="col-md-2">
-    <div class="dropdown">
-      <button
-        class="btn btn-outline-primary mt-1 dropdown-toggle"
-        type="button"
-        id="browseSortButton"
-        data-bs-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
+
+  {% include js/switch-view-js.html %}
+
+  <div class="h2 mt-2 text-center" id="numberOf"></div>
+
+  <div id="loadingIcon" class="text-center">
+    <div class="spinner-border text-dark" role="status">
+      <span class="visually-hidden">
+        {{- site.data.translations._layouts['browse.html'].loading[site.lang] | default: 'Loading' }}...</span
       >
-        {{ site.data.translations._layouts['browse.html']['sort-by'][site.lang] | default: 'Sort by' }}
-        <span id="sortFilter">
-          {{- site.data.translations._layouts['browse.html'].random[site.lang] | default: 'Random' -}}
-        </span>
-      </button>
-      <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
-        <button class="dropdown-item browse-sort-item" data-filter="random">
-          {{ site.data.translations._layouts['browse.html'].random[site.lang] | default: 'Random' }}
-        </button>
-        <button class="dropdown-item browse-sort-item" data-filter="title">
-          {{ site.data.translations._layouts['browse.html'].title[site.lang] | default: 'Title' }}
-        </button>
-        {% assign sort_options = site.data['config-browse'] | where_exp: 'i', 'i.sort_name != nil' %}
-        {% for o in sort_options %}
-          <button class="dropdown-item browse-sort-item" data-filter="{{ o.field | escape }}">{{ o.sort_name }}</button>
-        {% endfor %}
-      </div>
     </div>
   </div>
-</div>
 
-<div id="loadingIcon" class="text-center">
-  <div class="spinner-border text-dark" role="status">
-    <span class="visually-hidden">
-      {{- site.data.translations._layouts['browse.html'].loading[site.lang] | default: 'Loading' }}...</span
-    >
-  </div>
+  <div class="row" id="browseItems"></div>
 </div>
-
-<div class="row" id="browseItems"></div>
diff --git a/_layouts/cloud.html b/_layouts/cloud.html
index eda75ef2..742227e0 100644
--- a/_layouts/cloud.html
+++ b/_layouts/cloud.html
@@ -6,6 +6,58 @@
 ---
 {{ content }}
 
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center mb-2 mb-lg-0">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
+        <button
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
+        >
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% include js/switch-view-js.html %}
+
 {%- comment -%}
   Figure out default "Subjects" and "Locations" page cloud values as configured in in "theme.yml",
   and set default values for cloud include.
diff --git a/_layouts/list.html b/_layouts/list.html
index b31fab42..1fc85cc9 100644
--- a/_layouts/list.html
+++ b/_layouts/list.html
@@ -24,27 +24,84 @@
   {% assign stopwords = page['field-stopwords'] %}
 {%- endif -%}
 
-{% assign list_id = 'list-div-' | append: fields | slugify %}
-<div class="dropdown">
-  <button
-    class="btn btn-outline-primary mt-1 dropdown-toggle"
-    type="button"
-    id="browseSortButton"
-    data-bs-toggle="dropdown"
-    aria-haspopup="true"
-    aria-expanded="false"
-  >
-    {{ site.data.translations._layouts['list.html']['sort-by'][site.lang] | default: 'Sort by' }}
-    <span id="sortFilter">{{ site.data.translations._layouts['list.html'].count[site.lang] | default: 'Count' }}</span>
-  </button>
-  <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
-    <button class="dropdown-item list-sort-item active" data-filter="count">
-      {{ site.data.translations._layouts['list.html'].count[site.lang] | default: 'Count' }}
-    </button>
-    <button class="dropdown-item list-sort-item" data-filter="term">
-      {{ site.data.translations._layouts['list.html'].term[site.lang] | default: 'Term' }}
-    </button>
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center mb-2">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
+        <button
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
+        >
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="col-12 col-md-auto text-center mb-2 ms-md-auto">
+      <div class="dropdown">
+        <button
+          class="btn btn-outline-primary dropdown-toggle"
+          type="button"
+          id="browseSortButton"
+          data-bs-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          {{ site.data.translations._layouts['list.html']['sort-by'][site.lang] | default: 'Sort by' }}
+          <span id="sortFilter">
+            {{- site.data.translations._layouts['list.html'].count[site.lang] | default: 'Count' -}}
+          </span>
+        </button>
+        <div class="dropdown-menu browse-sort-menu" aria-labelledby="browseSortButton">
+          <button class="dropdown-item list-sort-item active" data-filter="count">
+            {{ site.data.translations._layouts['list.html'].count[site.lang] | default: 'Count' }}
+          </button>
+          <button class="dropdown-item list-sort-item" data-filter="term">
+            {{ site.data.translations._layouts['list.html'].term[site.lang] | default: 'Term' }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
-<div id="{{ list_id }}" class="text-center my-4 bg-{{ page.background | default: 'light' }} border rounded p-1"></div>
+
+{% include js/switch-view-js.html %}
+
+{% assign list_id = 'list-div-' | append: fields | slugify %}
+<div id="{{ list_id }}" class="text-center bg-{{ page.background | default: 'light' }} border rounded p-1"></div>
 {% include js/list-js.html id=list_id fields=fields min=min stopwords=stopwords %}
diff --git a/_layouts/timeline_edtf.html b/_layouts/timeline_edtf.html
index 77b44218..987324b1 100644
--- a/_layouts/timeline_edtf.html
+++ b/_layouts/timeline_edtf.html
@@ -24,33 +24,88 @@
 {%- if t == 0 -%}{{ i }}{% unless forloop.last %};{% endunless %}{% endif %}{% endfor %}{%- endcapture -%}
   {%- assign navYears = navYears | split: ';' -%}
 {%- endif -%}
-{%- if navYears -%}
-  <div class="dropdown float-end" id="year-nav">
-    <button
-      class="btn btn-outline-primary dropdown-toggle"
-      type="button"
-      id="yearButton"
-      data-bs-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
-      {{ years }}
-    </button>
-    <div class="dropdown-menu" aria-labelledby="yearButton">
-      {% for y in navYears %}
-        {% assign year_parts = y | split: ':' %}
-        {% if year_parts.size >= 2 %}
-          <a class="dropdown-item" href="#y{{ year_parts[1] }}">{{ year_parts[0] }}</a>
-        {% else %}
-          <a class="dropdown-item" href="#" onclick="scrollToYear(event, {{ y }})">{{ y }}</a>
-        {% endif %}
-      {% endfor %}
-    </div>
-  </div>
-{%- endif -%}
 
 {{ content }}
 
+<div class="container-fluid px-0">
+  <div class="row align-items-center">
+    <div class="col-12 col-md-auto text-center text-md-center mb-2 mb-lg-0">
+      <div
+        id="switch-view"
+        class="btn-group btn-group-toggle d-flex justify-content-center"
+        data-toggle="buttons"
+        role="group"
+      >
+        <a
+          href="{{ '/browse.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-pressed="true"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-objects[site.lang] | default: 'Show object view' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].objects[site.lang] | default: 'Objects' }}
+        </a>
+        <a
+          href="{{ '/timeline.html' | relative_url }}"
+          class="btn btn-primary btn-lg active"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-timeline[site.lang] | default: 'Show objects on timeline' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].timeline[site.lang] | default: 'Timeline' }}
+        </a>
+        <a
+          href="{{ '/subjects.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-subjects[site.lang] | default: 'Show list of subjects' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].subjects[site.lang] | default: 'Subjects' }}
+        </a>
+        <a
+          href="{{ '/eras.html' | relative_url }}"
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].view-eras[site.lang] | default: 'Show list of eras' }}"
+        >
+          {{ site.data.translations._layouts['browse.html'].eras[site.lang] | default: 'Eras' }}
+        </a>
+        <button
+          class="btn btn-outline-primary btn-lg"
+          aria-label="{{ site.data.translations['_layouts']['browse.html'].switch-view[site.lang] | default: 'Switch view' }}"
+          onclick="toggleButtonView()"
+        >
+          {{ site.data.translations._layouts['browse.html']['switch-view'][site.lang] | default: 'Switch View' }}
+        </button>
+      </div>
+    </div>
+
+    {% include js/switch-view-js.html %}
+
+    {%- if navYears -%}
+      <div class="col-12 col-md-auto text-center mb-2 mb-lg-0 ms-md-auto">
+        <div class="dropdown">
+          <button
+            class="btn btn-outline-primary dropdown-toggle"
+            type="button"
+            id="yearButton"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            {{ years }}
+          </button>
+          <div class="dropdown-menu" aria-labelledby="yearButton">
+            {% for y in navYears %}
+              {% assign year_parts = y | split: ':' %}
+              {% if year_parts.size >= 2 %}
+                <a class="dropdown-item" href="#y{{ year_parts[1] }}">{{ year_parts[0] }}</a>
+              {% else %}
+                <a class="dropdown-item" href="#" onclick="scrollToYear(event, {{ y }})">{{ y }}</a>
+              {% endif %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {%- endif -%}
+  </div>
+</div>
+
 <script>
   function scrollToYear(event, year) {
     // Prevent the default link behavior
@@ -112,7 +167,7 @@ <h2>
   </h2>
 {% endcomment %}
 
-<table id="timeline" class="table table-striped">
+<table id="timeline" class="table table-striped mt-lg-2">
   <tbody>
     {% for date in sorted_years %}
       {% assign year = date | split: ':' %}
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index 74f877a4..b523382b 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -90,14 +90,21 @@ a {
     }
 }
 
-.form-control {    
+.form-control {   
+    border-color: #ffe880; 
     &:focus {
         border-width: 1px;
         border-color: #ffe880;
-        box-shadow:0 0 0 .25rem #ffe880;
+        box-shadow:inset 0 0 0 .15rem #ffe880;
     }
 }
 
+#site-search {
+    border-color: #3a1e3e;
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+}
+
 .page-link {
     color: #3a1e3e !important;
     &:hover {
@@ -145,6 +152,15 @@ a {
     border-bottom-right-radius: 0;
 }
 
+.btn-group .btn:active {
+    box-shadow: none;
+}
+
+.btn-primary.active {
+    color: #ffe880;
+    background-color: #3a1e3e;
+}
+
 .datatable-border {
     border-color: #ffe880 !important;
     border-width: 6.5px !important;
@@ -227,4 +243,62 @@ a {
     &:focus {
         box-shadow:0 0 0 .25rem #3a1e3e;
     }
+}
+
+.pagination-controls, .search-box {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+/* Toggle Collection View for Small Screens */
+
+@media screen and (min-width: 577px) {
+
+    #switch-view .btn:last-child {
+        display: none;
+    }
+    
+    #switch-view .btn:nth-last-child(2) {
+        border-top-right-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    #switch-view .btn {
+        display: none;
+    }
+
+    #switch-view .btn.active,
+    #switch-view .btn:last-child {
+        display: block;
+        width: 100%;
+        align-content: center;
+
+        &:active {
+            color: #ffe880;
+        }
+    }
+
+    #switch-view .btn:nth-last-child(2) {
+        border-bottom-left-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+    }
+
+    #switch-view .btn.active:not(.btn-group-vertical .btn) {
+        border-top-left-radius: .25rem;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: .25rem;
+        border-bottom-right-radius: 0;
+    }
+
+    .btn-group-vertical .btn.active {
+        color: #ffe880;
+    }
+
+    #filterButton {
+        border-top-right-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+    }
 }
\ No newline at end of file
diff --git a/pages/data.md b/pages/data.md
index 1dfca139..e7716ed8 100644
--- a/pages/data.md
+++ b/pages/data.md
@@ -1,12 +1,18 @@
 ---
-title: Metadaten
+title: Forschungsdaten
 layout: data
 permalink: /data.html
 ---
 
-# Metadaten der Sammlung
+# Datenarchiv
 
-Die folgende Tabelle ermöglicht die Sortierung und eine einfache Suche nach dem Inhalt der Sammlung.
-Über die Schaltfläche "Tabelle exportieren" können Sie die gefilterten Metadaten als Excel- oder CSV-Datei herunterladen.
-Verwenden Sie alternativ die Schaltfläche "Sammlungsmetadaten", um die Metadaten der vollständigen Sammlung in verschiedenen Formaten anzuzeigen.
-Die Metadaten wurden auf der Grundlage des [Handbuchs zur Erstellung diskriminierungsfreier Metadaten für historische Quellen und Forschungsdaten](https://maehr.github.io/diskriminierungsfreie-metadaten/){:target="\_blank"} erstellt.
+Die Stadt.Geschichte.Basel macht projektbezogene Daten in verschiedenen Formaten zugänglich. Verfügbar sind wissenschaftliche Publikationen mit Projektbezug einerseits, sowie die Metadaten zu den auf dieser Plattform bereitgestellten Quellen und historischen Forschungsdaten andererseits. Diese Metadaten sind auf der Grundlage des [Handbuchs zur Erstellung diskriminierungsfreier Metadaten für historische Quellen und Forschungsdaten](https://maehr.github.io/diskriminierungsfreie-metadaten/){:target="\_blank"} erstellt und aufbereitet worden.
+
+## Projektbezogene Publikationen
+
+Wissenschaftliche Veröffentlichungen, die im Zusammenhang mit dem Forschungsprojekt stehen, sind [auf Zenodo archiviert](https://zenodo.org/communities/stadt-geschichte-basel){:target="\_blank"}. Die im Rahmen von Konferenzen und Workshops publizierten Beiträge des Teams für Forschungsdatenmanagement und Public History befassen sich mit der Entwicklung dieser Plattform und übergreifend mit (digitalem) Forschungsdatenmanagement und Public History in den Geschichtswissenschaften.
+
+## Metadaten der Sammlung
+
+Die folgende Tabelle ermöglicht die Sortierung und eine einfache Suche nach dem Inhalt der auf dieser Plattform verfügbaren Sammlung. Über die Schaltfläche "Herunterladen" können Sie die gefilterte Metadatentabelle als Excel- oder CSV-Datei herunterladen.
+Verwenden Sie alternativ die Schaltfläche "Weitere Exporte", um die Metadaten der vollständigen Sammlung in verschiedenen Formaten anzuzeigen und zu exportieren.
diff --git a/pages/eras.md b/pages/eras.md
index 406ffd82..b6aecb34 100644
--- a/pages/eras.md
+++ b/pages/eras.md
@@ -7,4 +7,4 @@ permalink: /eras.html
 cloud-fields: era
 ---
 
-# Epochen durchsuchen
+# Sammlung durchsuchen
diff --git a/pages/subjects.md b/pages/subjects.md
index 1d5f6c11..68527dce 100644
--- a/pages/subjects.md
+++ b/pages/subjects.md
@@ -7,4 +7,4 @@ permalink: /subjects.html
 fields: site.data.theme.subjects-fields
 ---
 
-# Themen durchsuchen
+# Sammlung durchsuchen
diff --git a/pages/timeline.md b/pages/timeline.md
index fb1f7d0f..635f7b9f 100644
--- a/pages/timeline.md
+++ b/pages/timeline.md
@@ -4,4 +4,4 @@ layout: timeline_edtf
 permalink: /timeline.html
 ---
 
-# Zeitachse der Daten
+# Sammlung durchsuchen