diff --git a/src/app/+home-page/home-page-routing.module.ts b/src/app/+home-page/home-page-routing.module.ts
index ec6a547359..2a41c079da 100644
--- a/src/app/+home-page/home-page-routing.module.ts
+++ b/src/app/+home-page/home-page-routing.module.ts
@@ -20,6 +20,7 @@ import { ThemedHomePageComponent } from './themed-home-page.component';
               id: 'statistics_site',
               active: true,
               visible: true,
+              index: 2,
               model: {
                 type: MenuItemType.LINK,
                 text: 'menu.section.statistics',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 03cd819625..3d45ffbfc2 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component
 import { ThemedHeaderComponent } from './header/themed-header.component';
 import { ThemedFooterComponent } from './footer/themed-footer.component';
 import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
+import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -129,6 +130,7 @@ const DECLARATIONS = [
   HeaderComponent,
   ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
+  ThemedHeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index c1843318b8..f99070b738 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,4 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
     <ds-themed-header></ds-themed-header>
+    <ds-themed-navbar></ds-themed-navbar>
 </div>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index a2ebd0d41a..b297979fd0 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -5,7 +5,3 @@
         position: sticky;
     }
 }
-
-:host {
-  z-index: var(--ds-nav-z-index);
-}
diff --git a/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..db392096aa
--- /dev/null
+++ b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
@@ -0,0 +1,3 @@
+:host {
+  z-index: var(--ds-nav-z-index);
+}
diff --git a/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..7f9c181fe2
--- /dev/null
+++ b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component';
+
+/**
+ * Themed wrapper for BreadcrumbsComponent
+ */
+@Component({
+  selector: 'ds-themed-header-navbar-wrapper',
+  styleUrls: ['./themed-header-navbar-wrapper.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
+  protected getComponentName(): string {
+    return 'HeaderNavbarWrapperComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header-nav-wrapper/header-navbar-wrapper.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header-navbar-wrapper.component`);
+  }
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index dc0d066a4e..a1fa051610 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,24 +1,23 @@
-<header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
-    <div class="d-flex flex-grow-1">
-      <a class="navbar-brand m-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg" alt="logo"/>
+<header>
+  <div class="container">
+    <div class="d-flex flex-row justify-content-between">
+      <a class="navbar-brand my-2" routerLink="/home">
+        <img src="assets/images/dspace-logo.svg"/>
       </a>
-    </div>
-    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
-      <ds-search-navbar class="navbar-search"></ds-search-navbar>
-      <ds-lang-switch></ds-lang-switch>
-      <ds-auth-nav-menu></ds-auth-nav-menu>
-      <ds-impersonate-navbar></ds-impersonate-navbar>
-      <div class="pl-2">
-        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
-                aria-controls="collapsingNav"
-                aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
-        </button>
-      </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+      <nav class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+        <ds-search-navbar></ds-search-navbar>
+        <ds-lang-switch></ds-lang-switch>
+        <ds-auth-nav-menu></ds-auth-nav-menu>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <div class="pl-2">
+          <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+                  aria-controls="collapsingNav"
+                  aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
 </header>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index c85daf8516..922b2d02e1 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,19 +1,23 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  nav.navbar {
-    display: none;
-  }
-  .header {
-    background-color: var(--ds-header-bg);
+.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+  max-width: 100%;
+  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+    max-height: var(--ds-header-logo-height-xs);
   }
 }
 
-.navbar-brand img {
-    @media screen and (max-width: map-get($grid-breakpoints, md)) {
-        height: var(--ds-header-logo-height-xs);
-    }
-}
 .navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-    color: var(--bs-link-color);
+  background-image: none !important;
+  line-height: 1.5;
 }
+
+.navbar ::ng-deep {
+  a {
+    color: var(--ds-header-icon-color);
+
+    &:hover, &focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+  }
+}
+
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index a1c02bfa31..a7cf7c1856 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -1,4 +1,4 @@
-<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center"
+<li class="nav-item dropdown"
     (mouseenter)="activateSection($event)"
     (mouseleave)="deactivateSection($event)">
     <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index db25f58089..00461995bc 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,4 +1,4 @@
-<li class="nav-item h-100 d-flex flex-column justify-content-center">
+<li class="nav-item">
   <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
 </li>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 50e526b78b..2356077e43 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,24 +1,17 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}"
      [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     class="navbar navbar-expand-md navbar-light p-0 navbar-container"
-     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
-  <div class="container h-100">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" alt="logo"/>
-    </a>
-
-    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
-        <ng-container *ngFor="let section of (sections | async)">
-          <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-        </ng-container>
-      </ul>
+     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+    <div class="container">
+        <div class="reset-padding-md w-100">
+            <div id="collapsingNav">
+                <ul class="navbar-nav mr-auto shadow-none">
+                    <ng-container *ngFor="let section of (sections | async)">
+                        <ng-container
+                                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
     </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
-    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
-    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
-    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
-  </div>
 </nav>
 
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index be6e8ac55e..d131bf95bf 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,14 +1,12 @@
 nav.navbar {
-    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+    border-bottom: 1px var(--bs-gray-400) solid;
     align-items: baseline;
-    color: var(--ds-header-icon-color);
 }
 
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
-        width: 100%;
+        width: 100vw;
         background-color: var(--bs-white);
         position: absolute;
         overflow: hidden;
@@ -31,20 +29,9 @@ nav.navbar {
     @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .container {
             padding: 0 var(--bs-spacer);
-            a.navbar-brand {
-              display: none;
-            }
-            .navbar-collapsed {
-              display: none;
-            }
         }
         padding: 0;
     }
-    height: 80px;
-}
-
-a.navbar-brand img {
-    max-height: var(--ds-header-logo-height);
 }
 
 .navbar-nav {
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index ae5fb262ae..e741cea285 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -46,6 +46,7 @@ export class NavbarComponent extends MenuComponent {
         id: `browse_global_communities_and_collections`,
         active: false,
         visible: true,
+        index: 0,
         model: {
           type: MenuItemType.LINK,
           text: `menu.section.browse_global_communities_and_collections`,
@@ -57,11 +58,11 @@ export class NavbarComponent extends MenuComponent {
         id: 'browse_global',
         active: false,
         visible: true,
+        index: 1,
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.browse_global'
         } as TextMenuItemModel,
-        index: 0
       },
     ];
     // Read the different Browse-By types from config and add them to the browse menu
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index aef07d79f4..67d04f999f 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -4,7 +4,7 @@
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
-    <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
+    <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
 
     <ds-notifications-board
       [options]="notificationOptions">
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 298be09f67..dc76d772d1 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -20,7 +20,7 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
-  --ds-header-logo-height: 40px;
+  --ds-header-logo-height: 50px;
   --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$cyan};
   --ds-header-icon-color-hover: #{darken($white, 15%)};
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..875b5f69b8
--- /dev/null
+++ b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  // styleUrls: ['header-navbar-wrapper.component.scss'],
+  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  // templateUrl: 'header-navbar-wrapper.component.html',
+  templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 23fcf4c325..49b54cd850 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -78,6 +78,7 @@ import { NavbarComponent } from './app/navbar/navbar.component';
 import { HeaderComponent } from './app/header/header.component';
 import { FooterComponent } from './app/footer/footer.component';
 import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -117,6 +118,7 @@ const DECLARATIONS = [
   FooterComponent,
   HeaderComponent,
   NavbarComponent,
+  HeaderNavbarWrapperComponent,
   BreadcrumbsComponent
 ];
 
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
new file mode 100644
index 0000000000..091d152258
--- /dev/null
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -0,0 +1,3 @@
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+  <ds-themed-header></ds-themed-header>
+</div>
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..36e23e174a
--- /dev/null
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
new file mode 100644
index 0000000000..dc0d066a4e
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.html
@@ -0,0 +1,24 @@
+<header class="header">
+  <nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
+    <div class="d-flex flex-grow-1">
+      <a class="navbar-brand m-2" routerLink="/home">
+        <img src="assets/images/dspace-logo.svg" alt="logo"/>
+      </a>
+    </div>
+    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
+      <ds-search-navbar class="navbar-search"></ds-search-navbar>
+      <ds-lang-switch></ds-lang-switch>
+      <ds-auth-nav-menu></ds-auth-nav-menu>
+      <ds-impersonate-navbar></ds-impersonate-navbar>
+      <div class="pl-2">
+        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+                aria-controls="collapsingNav"
+                aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <ds-themed-navbar></ds-themed-navbar>
+
+</header>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
new file mode 100644
index 0000000000..ab418865f1
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -0,0 +1,19 @@
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  nav.navbar {
+    display: none;
+  }
+  .header {
+    background-color: var(--ds-header-bg);
+  }
+}
+
+.navbar-brand img {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    height: var(--ds-header-logo-height-xs);
+  }
+}
+.navbar-toggler .navbar-toggler-icon {
+  background-image: none !important;
+  line-height: 1.5;
+  color: var(--bs-link-color);
+}
diff --git a/src/themes/dspace/app/header/header.component.ts b/src/themes/dspace/app/header/header.component.ts
new file mode 100644
index 0000000000..6da89b47d5
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  styleUrls: ['header.component.scss'],
+  templateUrl: 'header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
new file mode 100644
index 0000000000..50e526b78b
--- /dev/null
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -0,0 +1,24 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+     class="navbar navbar-expand-md navbar-light p-0 navbar-container"
+     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
+  <div class="container h-100">
+    <a class="navbar-brand my-2" routerLink="/home">
+      <img src="assets/images/dspace-logo.svg" alt="logo"/>
+    </a>
+
+    <div id="collapsingNav" class="w-100 h-100">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+        <ng-container *ngFor="let section of (sections | async)">
+          <ng-container
+            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+        </ng-container>
+      </ul>
+    </div>
+    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
+    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
+    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
+    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+  </div>
+</nav>
+
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 463a4269ee..210847c1d9 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,5 +1,57 @@
-@import 'src/app/navbar/navbar.component.scss';
-
 nav.navbar {
+  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
   border-bottom: 5px var(--bs-green) solid;
+  align-items: baseline;
+  color: var(--ds-header-icon-color);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+  .navbar {
+    width: 100%;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+    }
+  }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .reset-padding-md {
+    margin-left: calc(var(--bs-spacer) / -2);
+    margin-right: calc(var(--bs-spacer) / -2);
+  }
+}
+
+/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+.navbar-expand-md.navbar-container {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    > .container {
+      padding: 0 var(--bs-spacer);
+      a.navbar-brand {
+        display: none;
+      }
+      .navbar-collapsed {
+        display: none;
+      }
+    }
+    padding: 0;
+  }
+  height: 80px;
+}
+
+a.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+}
+
+.navbar-nav {
+  ::ng-deep a.nav-link {
+    color: var(--ds-navbar-link-color);
+  }
+  ::ng-deep a.nav-link:hover {
+    color: var(--ds-navbar-link-color-hover);
+  }
 }
diff --git a/src/themes/dspace/app/navbar/navbar.component.ts b/src/themes/dspace/app/navbar/navbar.component.ts
index e375011683..321351a933 100644
--- a/src/themes/dspace/app/navbar/navbar.component.ts
+++ b/src/themes/dspace/app/navbar/navbar.component.ts
@@ -8,7 +8,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
 @Component({
   selector: 'ds-navbar',
   styleUrls: ['./navbar.component.scss'],
-  templateUrl: '../../../../app/navbar/navbar.component.html',
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends BaseComponent {
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
index 1fb60b64a2..72fac11156 100644
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -3,7 +3,7 @@
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
 
-.facet-filter,.setting-option {
+.facet-filter, .setting-option {
   background-color: var(--bs-light);
   border-radius: var(--bs-border-radius);
 
@@ -21,3 +21,13 @@
     font-size: 1.1rem
   }
 }
+
+header {
+  ds-navbar-section > li,
+  ds-expandable-navbar-section > li {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+}
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 2a61babdb7..e4b4b61f45 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -1,6 +1,7 @@
 // Override or add CSS variables for your theme here
 
 :root {
+  --ds-header-logo-height: 40px;
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
   --ds-home-news-link-color: #{$green};
diff --git a/src/themes/dspace/theme.module.ts b/src/themes/dspace/theme.module.ts
index ed840c2e25..40138aa490 100644
--- a/src/themes/dspace/theme.module.ts
+++ b/src/themes/dspace/theme.module.ts
@@ -41,9 +41,13 @@ import { CollectionPageModule } from '../../app/+collection-page/collection-page
 import { SubmissionModule } from '../../app/submission/submission.module';
 import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
 import { NavbarComponent } from './app/navbar/navbar.component';
+import { HeaderComponent } from './app/header/header.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomeNewsComponent,
+  HeaderComponent,
+  HeaderNavbarWrapperComponent,
   NavbarComponent
 ];