diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index e5d5f38971..e2ee33c760 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -6,7 +6,7 @@
       </a>
 
       <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-themed-search-navbar></ds-themed-search-navbar>
         <ds-lang-switch></ds-lang-switch>
         <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
diff --git a/src/app/search-navbar/themed-search-navbar.component.ts b/src/app/search-navbar/themed-search-navbar.component.ts
new file mode 100644
index 0000000000..a90e782194
--- /dev/null
+++ b/src/app/search-navbar/themed-search-navbar.component.ts
@@ -0,0 +1,24 @@
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { SearchNavbarComponent } from './search-navbar.component';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-themed-search-navbar',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedSearchNavbarComponent extends ThemedComponent<SearchNavbarComponent> {
+
+  protected getComponentName(): string {
+    return 'SearchNavbarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/search-navbar/search-navbar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./search-navbar.component`);
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index a5333d1a7d..488bfc495e 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -291,6 +291,7 @@ import { LinkMenuItemComponent } from './menu/menu-item/link-menu-item.component
 import { OnClickMenuItemComponent } from './menu/menu-item/onclick-menu-item.component';
 import { TextMenuItemComponent } from './menu/menu-item/text-menu-item.component';
 import { SearchNavbarComponent } from '../search-navbar/search-navbar.component';
+import { ThemedSearchNavbarComponent } from '../search-navbar/themed-search-navbar.component';
 import {
   ItemVersionsSummaryModalComponent
 } from './item/item-versions/item-versions-summary-modal/item-versions-summary-modal.component';
@@ -498,6 +499,7 @@ const COMPONENTS = [
   SearchNavbarComponent,
   ScopeSelectorModalComponent,
   ItemPageTitleFieldComponent,
+  ThemedSearchNavbarComponent,
 ];
 
 const ENTRY_COMPONENTS = [
diff --git a/src/themes/custom/app/search-navbar/search-navbar.component.html b/src/themes/custom/app/search-navbar/search-navbar.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/search-navbar/search-navbar.component.scss b/src/themes/custom/app/search-navbar/search-navbar.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/search-navbar/search-navbar.component.ts b/src/themes/custom/app/search-navbar/search-navbar.component.ts
new file mode 100644
index 0000000000..3e4da0af7e
--- /dev/null
+++ b/src/themes/custom/app/search-navbar/search-navbar.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { SearchNavbarComponent as BaseComponent } from '../../../../app/search-navbar/search-navbar.component';
+
+@Component({
+  selector: 'ds-search-navbar',
+  // styleUrls: ['./search-navbar.component.scss'],
+  styleUrls: ['../../../../app/search-navbar/search-navbar.component.scss'],
+  // templateUrl: './search-navbar.component.html'
+  templateUrl: '../../../../app/search-navbar/search-navbar.component.html'
+})
+export class SearchNavbarComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/eager-theme.module.ts b/src/themes/custom/eager-theme.module.ts
index 3d57f3e951..4e3c6f8b46 100644
--- a/src/themes/custom/eager-theme.module.ts
+++ b/src/themes/custom/eager-theme.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../app/shared/shared.module';
 import { HomeNewsComponent } from './app/home-page/home-news/home-news.component';
 import { NavbarComponent } from './app/navbar/navbar.component';
+import { SearchNavbarComponent } from './app/search-navbar/search-navbar.component';
 import { HeaderComponent } from './app/header/header.component';
 import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 import { SearchModule } from '../../app/shared/search/search.module';
@@ -65,6 +66,7 @@ const DECLARATIONS = [
   HeaderComponent,
   HeaderNavbarWrapperComponent,
   NavbarComponent,
+  SearchNavbarComponent,
   FooterComponent,
   CreateCollectionParentSelectorComponent,
   CreateCommunityParentSelectorComponent,