diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
index 51180c8044..93bf7f3301 100644
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -69,7 +69,6 @@ exports.config = {
   plugins: [{
     path: '../node_modules/protractor-istanbul-plugin'
   }],
-
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
@@ -85,7 +84,7 @@ exports.config = {
   onPrepare: function () {
     jasmine.getEnv().addReporter(new SpecReporter({
       spec: {
-        displayStacktrace: true
+        displayStacktrace: 'pretty'
       }
     }));
   }
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/footer/footer.component.html b/src/app/footer/footer.component.html
index bc407c2a97..4990290037 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,72 +1,79 @@
-<footer class="top-footer  text-lg-start">
-  <!-- Grid container -->
-  <div *ngIf="showTopFooter" class="container p-4">
-    <!--Grid row-->
-    <div class="row">
+<footer class="text-lg-start">
+  <div *ngIf="showTopFooter" class="top-footer">
+    <!-- Grid container -->
+    <div class=" container p-4">
+      <!--Grid row-->
+      <div class="row">
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Lorem ipsum</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Ut facilisis</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Aenean sit</a>
-          </li>
-        </ul>
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Lorem ipsum</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Ut facilisis</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Aenean sit</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Suspendisse potenti</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+            voluptatem veniam, est atque cumque eum delectus sint!
+          </p>
+        </div>
+        <!--Grid column-->
       </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Suspendisse potenti</a>
-          </li>
-        </ul>
-      </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
-          molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
-          voluptatem veniam, est atque cumque eum delectus sint!
-        </p>
-      </div>
-      <!--Grid column-->
+      <!--Grid row-->
     </div>
-    <!--Grid row-->
   </div>
   <!-- Grid container -->
 
   <!-- Copyright -->
-  <div class="footer p-1 d-flex justify-content-center align-items-center text-white">
+  <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
     <div class="content-container">
       <p class="m-0">
-        <a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        <a class="text-white"
+           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
-        <a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+        <a class="text-white"
+           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
         <li>
-          <a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+          <a class="text-white" href="#"
+             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
       </ul>
     </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 3f6ccb58e7..350295b870 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,11 +1,10 @@
 :host {
-
-  .top-footer {
-    background-color: var(--ds-top-footer-bg);
-    border-top: var(--ds-footer-border);
+  footer {
+    background-color: var(--ds-footer-bg);
     text-align: center;
-    padding: var(--ds-footer-padding);
     z-index: var(--ds-footer-z-index);
+    border-top: var(--ds-footer-border);
+    padding: var(--ds-footer-padding);
 
     p {
       margin: 0;
@@ -15,12 +14,18 @@
       height: var(--ds-footer-logo-height);
     }
 
-    .footer {
-      background-color: var(--ds-footer-bg);
 
+    .top-footer {
+      background-color: var(--ds-top-footer-bg);
+      padding: var(--ds-footer-padding);
+      margin: calc(var(--ds-footer-padding) * -1);
+    }
+
+    .bottom-footer {
       ul {
         li {
           display: inline-flex;
+
           a {
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit
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..c7b979d266 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" [attr.alt]="'menu.header.image.logo' | translate"/>
       </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 role="navigation" [attr.aria-label]="'nav.user.description' | translate" 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" [attr.aria-label]="'nav.toggle' | translate">
+            <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..3fa7598e74 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,24 +1,18 @@
 <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"
+     role="navigation" [attr.aria-label]="'nav.main.description' | translate">    <!-- 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 8b84fabf14..898074352c 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/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4c3317a0c0..5bd08dfbc8 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2353,6 +2353,8 @@
 
   "nav.stop-impersonating": "Stop impersonating EPerson",
 
+  "nav.toggle" : "Toggle navigation",
+
   "nav.user.description" : "User profile bar",
 
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 298be09f67..51195b50a1 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%)};
@@ -61,12 +61,12 @@
   --ds-sidebar-items-width: #{$sidebar-items-width};
   --ds-total-sidebar-width: #{$total-sidebar-width};
 
-  --ds-top-footer-bg: #{$gray-200} !important;
-  --ds-footer-bg: #{theme-color('primary')} !important;
+  --ds-top-footer-bg: #{$gray-200};
+  --ds-footer-bg: #{theme-color('primary')};
   --ds-footer-border: 1px solid var(--bs-gray-400);
-  --ds-footer-padding: 0 !important;
-  --ds-footer-padding-bottom: 0 !important;
-  --ds-footer-logo-height: 50px !important;
+  --ds-footer-padding: 0;
+  --ds-footer-padding-bottom: 0;
+  --ds-footer-logo-height: 50px;
 
   $home-news-link-color: $cyan;
   --ds-home-news-link-color: #{$home-news-link-color};
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/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index 1e5d0f0520..9f69b17ebd 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -3,14 +3,31 @@
 // still uses Sass variables internally. So if you want to override bootstrap (or other sass
 // variables) you can do so here. Their CSS counterparts will include the changes you make here
 
-// $blue:    #007bff !default;
-// $indigo:  #6610f2 !default;
-// $purple:  #6f42c1 !default;
-// $pink:    #e83e8c !default;
-// $red:     #dc3545 !default;
-// $orange:  #fd7e14 !default;
-// $yellow:  #ffc107 !default;
-// $green:   #28a745 !default;
-// $teal:    #20c997 !default;
-// $cyan:    #17a2b8 !default;
-
+// $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+//
+// $gray-base: #000 !default;
+// $gray-900: lighten($gray-base, 13.5%) !default; // #222
+// $gray-800: lighten($gray-base, 26.6%) !default; // #444
+// $gray-700: lighten($gray-base, 46.6%) !default; // #777
+// $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
+// $gray-100: lighten($gray-base, 93.5%) !default; // #eee
+//
+// $blue:   #2B4E72 !default;
+// $green:  #94BA65 !default;
+// $cyan:   #006666 !default;
+// $yellow: #ec9433 !default;
+// $red:    #CF4444 !default;
+// $dark:   darken($blue, 17%) !default;
+//
+// $theme-colors: (
+//   primary: $blue,
+//   secondary: $gray-700,
+//   success: $green,
+//   info: $cyan,
+//   warning: $yellow,
+//   danger: $red,
+//   light: $gray-100,
+//   dark: $dark
+// ) !default;
+//
+// $link-color: map-get($theme-colors, info) !default;
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/+home-page/home-news/home-news.component.scss b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
index b5a070e51e..5e89f6b62f 100644
--- a/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
+++ b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
@@ -6,12 +6,8 @@
     color: white;
     background-color: var(--bs-info);
     position: relative;
-    background-position-y: -200px;
     background-image: url('/assets/dspace/images/banner.jpg');
     background-size: cover;
-    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-      background-position-y: 0;
-    }
 
     .container {
       position: relative;
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..cf691ea6c4
--- /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" [attr.alt]="'menu.header.image.logo' | translate"/>
+      </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" [attr.aria-label]="'nav.toggle' | translate">
+          <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..5af30db632
--- /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" [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" [attr.alt]="'menu.header.image.logo' | translate"/>
+    </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
 ];