diff --git a/fragdenstaat_de/templates/header.html b/fragdenstaat_de/templates/header.html
index 9f6085118..25cda7330 100644
--- a/fragdenstaat_de/templates/header.html
+++ b/fragdenstaat_de/templates/header.html
@@ -12,240 +12,134 @@
 {% endif %}
 
 <header id="header">
-  <div class="container">
-    <nav class="navbar navbar-fds bg-body">
-      {% page_url "home" as home_url %}
-      <a href="{{ home_url|default:'/' }}" class="navbar-brand navbar-brand-fds">
-        {% render_svg "img/header_logo.svg" %}
-        <span class="visually-hidden visually-hidden-focusable">{% block nav_brand_name %}{{ SITE_NAME }}{% endblock %}</span>
-      </a>
-      {% url 'foirequest-list' as requests_url %}
-      {% block nav %}
-      <div class="navbar-expand-md">
-        <button class="navbar-toggler ms-auto position-relative z-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu" aria-controls="menu" aria-label="{% translate "Toggle main menu" %}">
-          <span class="navbar-toggler-icon"></span>
-          {% translate "Menu" %}
-        </button>
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="menu" aria-labelledby="menu-label">
-          <div class="offcanvas-header">
-            {% render_svg "img/header_logo.svg" %}
-            <h5 id="menu-label" class="visually-hidden">{% translate "Main Menu" %}</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate "Close" %}"></button>
-          </div>
-          <div class="offcanvas-body d-flex flex-column">
-            <ul class="navbar-nav navbar-nav-primary">
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle {% if request.path == requests_url %}active{% endif %}" href="#" data-bs-toggle="dropdown" aria-expanded="false">
-                  {% blocktrans %}Requests{% endblocktrans %}
-                </a>
-              
-                <ul class="dropdown-menu">
-                  <li>
-                    <a class="dropdown-item" href="{{ requests_url }}">
-                      {% blocktrans %}See requests{% endblocktrans %}
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="{% url 'foirequest-make_request' %}">
-                      {% blocktrans %}Make request{% endblocktrans %}
-                    </a>
-                  </li>
-                  {% page_url "beginnersguide" as beginners_url %}
-                  {% if beginners_url %}
-                    <li>
-                      <a class="dropdown-item" href="{{ beginners_url }}">
-                        {% blocktrans %}Beginner's guide{% endblocktrans %}
-                      </a>
-                    </li>
-                  {% endif %}
-                </ul>
-              </li>
-
-              {% page_url "campaigns" as campaigns_url %}                
-              <li class="nav-item">
-                <a class="nav-link {% if request.path == campaigns_url %}active{% endif %}" href="{{ campaigns_url|default:'/kampagnen/' }}">
-                  {% blocktrans %}Campaigns{% endblocktrans %}
-                </a>
-              </li>
-
-              {% page_url "blog" as blog_url %}
-              <li class="nav-item">
-                <a class="nav-link {% if request.path|startswith:blog_url %}active{% endif %}" href="{{ blog_url|default:'/blog/' }}">
-                  {% blocktrans %}Investigations{% endblocktrans %}
-                </a>
-              </li>
-
-              {% page_url "lawsuits" as lawsuits_url %}
-              {% if lawsuits_url %}
-                {% page_attribute "menu_title" "lawsuits" as lawsuits_title %}
-              {% endif %}
-              <li class="nav-item">
-                <a class="nav-link {% if request.path == lawsuits_url %}active{% endif %}" href="{{ lawsuits_url|default:'/klagen/' }}">
-                  {{ lawsuits_title }}
-                </a>
-              </li>
-
-            </ul>
-            <ul class="navbar-nav navbar-nav-secondary me-auto">
-
-              {% page_url "about" as about_url %}
-              {% if about_url %}
-                {% page_attribute "menu_title" "about" as about_title %}
-              {% endif %}
-              <li class="nav-item">
-                <a class="nav-link {% if request.path|startswith:about_url %}active{% endif %}" href="{{ about_url|default:"/ueber-uns/" }}">
-                  {{ about_title }}
-                </a>
-              </li>
-
-              {% page_url "newsletter" as newsletter_url %}
-              {% if newsletter_url %}
-                <li class="nav-item">
-                  <a class="nav-link {% if request.path|startswith:newsletter_url %}active{% endif %}" href="{{ newsletter_url }}">{% translate "Newsletter" %}</a>
-                </li>
-              {% endif %}
-
-              {# Show either donate or signin as last item #}
-              {% page_url "donate" as donate_url %}
-              {% if request.user.is_authenticated %}
-                <li class="nav-item logged-in">
-                  <a class="nav-link fw-bold text-danger" href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
-                    <i class="fa fa-heart" aria-hidden="true"></i>
-                    {% blocktrans %}Donate{% endblocktrans %}
-                  </a>
-                </li>
-              {% else %}
-                {% url 'account-login' as login_url %}
-                <li class="nav-item">
-                  <a class="nav-link {% if request.path|startswith:login_url %}active{% endif %}" href="{% url 'account-login' %}?next={{ request.path|urlencode }}">
-                    <i class="fa fa-sign-in" aria-hidden="true"></i>
-                    {% blocktrans %}Sign in{% endblocktrans %}
-                  </a>
-                </li>
-              {% endif %}
-            </ul>
-            <div class="d-md-none">
-              <hr/>
-              <form action="{{ requests_url }}" method="get">
-                <p>{% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %}</p>
-                <div class="input-group">
-                  <input type="text" name="q" class="form-control">
-                  <button type="submit" class="btn btn-outline-primary">
-                    {% translate "Search" %}
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-      {% endblock nav %}
-
-      <ul class="navbar-nav ms-auto d-flex flex-row">
-
-        {% block nav_search %}
-        <li class="nav-item {% block nav_search_class %}d-none {% if request.user.is_authenticated %}d-sm-block{% else %}d-md-block{% endif %}{% endblock nav_search_class %}">
-          <button class="nav-link fw-bold me-2" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{% translate "Search" %}" title="{% translate "Search" %}">
-            <i class="fa fa-search" aria-hidden="true"></i>
-            <span class="d-none d-lg-inline-block">{% translate "Search" %}</span>
+  <nav class="navbar navbar-fds bg-body">
+    <div class="container">
+      <ul class="nav-ul w-100">
+        <li class="d-md-none">
+          <button class="btn" id="toggle-mobile-nav">
+            <span class="navbar-toggler-icon"></span>
+            <span class="visually-hidden">{% trans "Menu" %}</span>
           </button>
         </li>
-        {% endblock nav_search %}
 
-        {% block nav_donate %}
-        <li class="nav-item ms-2 {% block nav_donate_class %}{% if request.user.is_authenticated %}d-md-none{% endif %}{% endblock nav_donate_class %}">
-          <a class="nav-link fw-bold text-danger" href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}" aria-label="{% translate "Donate" %}" title="{% translate "Donate" %}">
-            <i class="fa fa-heart" aria-hidden="true"></i>
-            <span class="d-none d-sm-inline">{% translate "Donate" %}</span>
+        {% page_url "home" as home_url %}
+        <li class="nav-logo">
+          <a href="{{ home_url|default:'/' }}"
+             class="navbar-brand navbar-brand-fds">
+            {% render_svg "img/header_logo.svg" %}
+            <span class="visually-hidden visually-hidden-focusable">
+              {% block nav_brand_name %}{{ SITE_NAME }}{% endblock %}
+            </span>
           </a>
         </li>
-        {% endblock nav_donate %}
 
-        {% block nav_account_login %}
+        <li class="d-md-none">
           {% if request.user.is_authenticated %}
-            <li class="nav-item ms-2 align-self-center">
-              <button class="btn py-0 pe-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#user-menu" aria-controls="user-menu" aria-label="{% translate "Toggle account menu" %}">
-                {% if request.user.profile_photo %}
-                  <img width="32" height="32" src="{% thumbnail request.user.profile_photo 64x64 %}" alt="{{ request.user.get_full_name }}" class="img-fluid rounded-circle">
-                {% else %}
-                  <div class="rounded-circle text-bg-callout d-flex justify-content-center align-items-center" style="aspect-ratio: 1/1; height: 32px">
-                    <i class="fa fa-user" aria-hidden="true"></i>
-                    <span class="visually-hidden">{{ request.user.first_name }}</span>
-                  </div>
-                {% endif %}
-              </button>      
-            </li>
-          {% endif %}
-        {% endblock %}
-      </ul>
-      {% if request.user.is_authenticated %}
-        <div class="offcanvas offcanvas-end" tabindex="-1" id="user-menu" aria-labelledby="user-menu-label">
-          <div class="offcanvas-header text-bg-callout">
-            <h5 id="user-menu-label" class="visually-hidden">{% translate "Account Menu" %}</h5>
             {% if request.user.profile_photo %}
-              <img width="32" height="32" src="{% thumbnail request.user.profile_photo 64x64 %}" alt="{{ request.user.get_full_name }}" class="img-fluid rounded-circle">
+              <button class="btn user-profile p-0 rounded-circle">
+                <img width="32"
+                     height="32"
+                     src="{% thumbnail request.user.profile_photo 64x64 %}"
+                     alt="{{ request.user.get_full_name }}"
+                     class="w-100 h-100 rounded-circle">
+              </button>
+            {% else %}
+              <button class="btn rounded-circle text-bg-subtle d-flex justify-content-center align-items-center user-profile">
+                <i class="fa fa-user" aria-hidden="true"></i>
+                <span class="visually-hidden">{{ request.user.first_name }}</span>
+              </button>
             {% endif %}
-            <div class="flex-column">
-              <span class="d-block text-truncate">{{ request.user.get_full_name }}</span>
-              <small class="d-block text-truncate">{{ request.user.email }}</small>
-            </div>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate "Close" %}"></button>
-          </div>
-          <div class="offcanvas-body">
-            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-              {% for menu_item in menu_items.before_request %}
-                <li class="nav-item">
-                  <a class="nav-link" href="{{ menu_item.url }}">
-                    {{ menu_item.label }}
-                  </a>
-                </li>
-              {% endfor %}
-              {% for menu_item in menu_items.before_settings %}
-                <li class="nav-item">
-                  <a class="nav-link" href="{{ menu_item.url }}">
-                    {{ menu_item.label }}
-                  </a>
-                </li>
-              {% endfor %}
-              {% for menu_item in menu_items.after_settings %}
-                <li class="nav-item">
-                  <a class="nav-link" href="{{ menu_item.url }}">
-                    {{ menu_item.label }}
-                  </a>
-                </li>
-              {% endfor %}
-              <li class="nav-item">
-                <hr/>
-                <form action="{% url 'account-logout' %}" method="post">
-                  {% csrf_token %}
-                  <button type="submit" class="nav-link">
-                    {% blocktrans %}Log out{% endblocktrans %}
-                  </button>
-                </form>
+          </button>
+        {% else %}
+          {% url 'account-login' as login_url %}
+          {% page_url "donate" as donate_url %}
+          <a class="btn text-danger"
+             href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
+            <i class="fa fa-heart" aria-hidden="true"></i>
+            <span class="visually-hidden">{% blocktrans %}Donate{% endblocktrans %}</span>
+          </a>
+        {% endif %}
+      </li>
+
+      <ul class="nav-menu" id="nav-menu">
+        {% page_url "about" as about_url %}
+        {% if about_url %}
+          {% page_attribute "menu_title" "about" as about_title %}
+          <li class="ms-md-auto nav-sm">
+            <a href="{{ about_url|default:"/ueber-uns/" }}">{{ about_title }}</a>
+          </li>
+        {% endif %}
+        {% page_url "newsletter" as newsletter_url %}
+        {% if newsletter_url %}
+          <li class="nav-sm">
+            <a class="" href="{{ newsletter_url }}">{% translate "Newsletter" %}</a>
+          </li>
+        {% endif %}
+        {# Show either donate or signin as last item #}
+        {% page_url "donate" as donate_url %}
+        <li class="nav-sm">
+          <a class="text-danger"
+             href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
+            <i class="fa fa-heart" aria-hidden="true"></i>
+            {% blocktrans %}Donate{% endblocktrans %}
+          </a>
+        </li>
+
+        <li class="nav-break" aria-hidden="true"></li>
+
+        {% url 'foirequest-list' as requests_url %}
+        <li class="">
+          <a class="dropdown-toggle {% if request.path == requests_url %}active{% endif %}"
+             href="#"
+             data-bs-toggle="dropdown"
+             aria-expanded="false">{% blocktrans %}Requests{% endblocktrans %}</a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item" href="{{ requests_url }}">{% blocktrans %}See requests{% endblocktrans %}</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="{% url 'foirequest-make_request' %}">{% blocktrans %}Make request{% endblocktrans %}</a>
+            </li>
+            {% page_url "beginnersguide" as beginners_url %}
+            {% if beginners_url %}
+              <li>
+                <a class="dropdown-item" href="{{ beginners_url }}">{% blocktrans %}Beginner's guide{% endblocktrans %}</a>
               </li>
-            </ul>
-          </div>
+            {% endif %}
+          </ul>
+        </li>
+        {% page_url "campaigns" as campaigns_url %}
+        <li class="">
+          <a class="" href="{{ campaigns_url|default:'/kampagnen/' }}">{% blocktrans %}Campaigns{% endblocktrans %}</a>
+        </li>
+        {% page_url "blog" as blog_url %}
+        <li class="">
+          <a class="" href="{{ blog_url|default:'/blog/' }}">{% blocktrans %}Investigations{% endblocktrans %}</a>
+        </li>
+        {% page_url "lawsuits" as lawsuits_url %}
+        {% if lawsuits_url %}
+          {% page_attribute "menu_title" "lawsuits" as lawsuits_title %}
         {% endif %}
-      </div>
-    </nav>
-  </div>
-  <div class="modal" tabindex="-1" id="search-modal">
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-body">
-          <form action="{% block nav_search_url %}{% url 'foirequest-list' %}{% endblock nav_search_url %}" method="get">
-            <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="{% translate "Close" %}"></button>
-            <p>{% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %}</p>
+        <li>
+          <a class="" href="{{ lawsuits_url|default:'/klagen/' }}">{{ lawsuits_title }}</a>
+        </li>
+
+        <li class="ms-md-auto nav-search">
+          <form action="{{ requests_url }}" method="get">
             <div class="input-group">
-              <input type="text" name="q" class="form-control" data-focus="true">
+              <input type="search"
+                     name="q"
+                     class="form-control"
+                     placeholder="{% translate "Search" %}">
               <button type="submit" class="btn btn-outline-primary">
-                {% translate "Search" %}
+                <i class="fa fa-search" aria-hidden="true"></i>
+                <span class="sr-only">{% translate "Search" %}</span>
               </button>
             </div>
           </form>
-        </div>
-      </div>
-    </div>
+        </li>
+      </ul>
+    </ul>
   </div>
-  
+</nav>
 </header>
diff --git a/frontend/javascript/main.ts b/frontend/javascript/main.ts
index 96461e16c..53e93244e 100644
--- a/frontend/javascript/main.ts
+++ b/frontend/javascript/main.ts
@@ -11,6 +11,7 @@ import 'froide/frontend/javascript/snippets/color-mode'
 import './donation-form'
 import './magnifier'
 import './misc'
+import './navbar'
 import './slider.js'
 import './smooth-scroll'
 import './top-banner'
diff --git a/frontend/javascript/navbar.ts b/frontend/javascript/navbar.ts
new file mode 100644
index 000000000..c048ff104
--- /dev/null
+++ b/frontend/javascript/navbar.ts
@@ -0,0 +1,3 @@
+document.querySelector('#toggle-mobile-nav')?.addEventListener('click', () => {
+  document.querySelector('#nav-menu')?.classList.toggle('show')
+})
diff --git a/frontend/styles/header.scss b/frontend/styles/header.scss
index 56b2e0484..891f2cd9c 100644
--- a/frontend/styles/header.scss
+++ b/frontend/styles/header.scss
@@ -1,65 +1,117 @@
-.navbar-fds {
-  padding-top: 0.5rem;
+@use 'sass:map';
 
-  @include media-breakpoint-up(md) {
-    padding-top: 2.25rem;
+$c: map.get($container-max-widths, 'xxl');
+
+nav.navbar {
+  padding: $spacer 0;
+  margin-bottom: $spacer;
+
+  ul.nav-ul,
+  ul.nav-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
   }
 
-  .nav-link:active {
-    color: var(--#{$prefix}navbar-active-color);
+  ul.nav-ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
   }
-}
-.navbar-brand-fds {
-  position: relative;
-  top: -0.25rem;
-  
-  @include media-breakpoint-up(md) {
-    top: -0.5rem;
+
+  li a {
+    font-weight: 600;
+    color: var(--bs-emphasis-color);
+
+    &:hover {
+      text-decoration: none;
+      color: var(--bs-link-color);
+    }
   }
 
-  svg {
-    width: 55px;
-    
-    .brand-name {
-      display: block;
+  .user-profile {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    border-bottom: 1px var(--bs-border-color-translucent) solid;
+
+    ul.nav-ul {
+      justify-content: space-between;
     }
 
-    @include media-breakpoint-up(md) {
-      width: auto;
+    ul.nav-menu {
+      display: flex;
+      opacity: 0;
+      flex-direction: column;
+      gap: $spacer * 0.5 0;
+      position: absolute;
+      top: calc(100% + $spacer + 1px); // to show the navbar border
+      left: calc(var(--bs-gutter-x) * -0.5);
+      padding: var(--bs-gutter-x);
+      background-color: var(--bs-body-bg);
+      width: calc(100% + var(--bs-gutter-x));
+      pointer-events: none;
+      transition: opacity 0.2s linear;
 
-      .brand-name {
-        display: block;
+      &.show {
+        opacity: 1;
+        pointer-events: unset;
       }
     }
-  }
-}
 
-.navbar-nav-primary {
-  .navbar-link {
-    font-weight: bold;
+    li.nav-sm {
+      order: 99;
+    }
+
+    li.nav-search {
+      padding-top: $spacer;
+      padding-bottom: $spacer * 2;
+      margin-bottom: $spacer;
+      border-bottom: 1px var(--bs-border-color-translucent) solid;
+    }
+
+    .dropdown-menu {
+      position: static;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      border: none;
+      box-shadow: none;
+    }
+
+    .dropdown-item {
+      padding: $spacer * 0.25 $spacer;
+      color: var(--bs-link-color);
+
+      &:active {
+        background-color: transparent;
+      }
+    }
   }
-}
 
-.navbar-nav-secondary {
   @include media-breakpoint-up(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
+    overflow-x: hidden;
 
-    .nav-link {
-      font-size: 0.85rem !important;
-      font-weight: normal;
+    ul.nav-ul {
+      flex-direction: row;
+      gap: 0 1rem;
     }
-    .nav-item:last-child .nav-link {
-      padding-right: 0;
+
+    ul.nav-menu {
+      display: contents;
     }
-  }
-}
 
-.navbar-fds .dropdown-menu {
-  @include media-breakpoint-down(md) {
-    border: none;
-    @include border-radius(0);
-    @include box-shadow(none);
+    .nav-break {
+      width: 100%;
+      margin-top: $spacer * 1.5;
+      margin-bottom: $spacer;
+      background-color: var(--bs-border-color-translucent);
+      height: 1px;
+      transform: scaleX(250%);
+    }
   }
 }