diff --git a/src/app/browse-by/abstract-browse-by-page.component.ts b/src/app/browse-by/abstract-browse-by-page.component.ts
new file mode 100644
index 00000000000..aa6eaa5aa4c
--- /dev/null
+++ b/src/app/browse-by/abstract-browse-by-page.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
+
+@Component({
+  selector: 'ds-abstract-browse-by-page',
+  template: '',
+})
+export class AbstractBrowseByPageComponent {
+
+  /**
+   * The {@link BrowseByDataType} of this Component
+   */
+  @Input() browseByType: BrowseByDataType;
+
+  /**
+   * Whether to show the browse by page as a standalone page or not
+   * This will have an effect on how the component is rendered for accessibility reasons
+   */
+  @Input() showAsStandalonePage: boolean;
+
+}
diff --git a/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
index 8eeae0c5de5..1cce25ed7f8 100644
--- a/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseByDatePageComponent } from './browse-by-date-page.component';
 import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
@@ -15,6 +15,16 @@ import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by
 @rendersBrowseBy(BrowseByDataType.Date)
 export class ThemedBrowseByDatePageComponent
   extends ThemedComponent<BrowseByDatePageComponent> {
+
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage: boolean;
+
+  inAndOutputNames: (keyof BrowseByDatePageComponent & keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
   protected getComponentName(): string {
     return 'BrowseByDatePageComponent';
   }
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
index bac74736cf0..e531128ffa3 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -1,15 +1,21 @@
-<div class="container">
+<div [class.container]="showAsStandalonePage">
   <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
-      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-        title="{{'browse.title' | translate:
+      <ng-container *ngVar="'browse.title' | translate:
         {
-          collection: dsoNameService.getName((parent$ | async)?.payload),
+          collection: showAsStandalonePage ? dsoNameService.getName((parent$ | async)?.payload) : '',
           field: 'browse.metadata.' + browseId | translate,
           startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
           value: (value)? '&quot;' + value + '&quot;': ''
-        } }}"
-        parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
+        } as title">
+        <h1 *ngIf="showAsStandalonePage" [ngClass]="{'sr-only': dsoNameService.getName((parent$ | async)?.payload) }">
+          {{ title }}
+        </h1>
+        <h3 *ngIf="!showAsStandalonePage" [ngClass]="{'sr-only': dsoNameService.getName((parent$ | async)?.payload) }">
+          {{ title }}
+        </h3>
+      </ng-container>
+      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
         [objects$]="(items$ !== undefined)? items$ : browseEntries$"
         [paginationConfig]="(currentPagination$ |async)"
         [sortConfig]="(currentSort$ |async)"
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
index bc017edae46..21fd51109d8 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
@@ -1,5 +1,5 @@
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
-import { Component, Inject, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -22,6 +22,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { Community } from '../../core/shared/community.model';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { AbstractBrowseByPageComponent } from '../abstract-browse-by-page.component';
 
 export const BBM_PAGINATION_ID = 'bbm';
 
@@ -36,7 +37,7 @@ export const BBM_PAGINATION_ID = 'bbm';
  * or multiple metadata fields.  An example would be 'author' for
  * 'dc.contributor.*'
  */
-export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
+export class BrowseByMetadataPageComponent extends AbstractBrowseByPageComponent implements OnInit, OnDestroy {
 
   /**
    * The list of browse-entries to display
@@ -130,7 +131,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
                      @Inject(APP_CONFIG) public appConfig: AppConfig,
                      public dsoNameService: DSONameService,
   ) {
-
+    super();
     this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
         id: BBM_PAGINATION_ID,
diff --git a/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
index b0679258e91..a602676b773 100644
--- a/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseByMetadataPageComponent } from './browse-by-metadata-page.component';
 import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
@@ -15,6 +15,16 @@ import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by
 @rendersBrowseBy(BrowseByDataType.Metadata)
 export class ThemedBrowseByMetadataPageComponent
   extends ThemedComponent<BrowseByMetadataPageComponent> {
+
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage: boolean;
+
+  inAndOutputNames: (keyof BrowseByMetadataPageComponent & keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
   protected getComponentName(): string {
     return 'BrowseByMetadataPageComponent';
   }
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.html b/src/app/browse-by/browse-by-page/browse-by-page.component.html
new file mode 100644
index 00000000000..5a358bcfa3d
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.html
@@ -0,0 +1,3 @@
+<ds-themed-browse-by-switcher [browseByType]="browseByDataType$ | async"
+                              [showAsStandalonePage]="true">
+</ds-themed-browse-by-switcher>
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.scss b/src/app/browse-by/browse-by-page/browse-by-page.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts b/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts
new file mode 100644
index 00000000000..ad2b9192a07
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowseByPageComponent } from './browse-by-page.component';
+
+describe('BrowseByPageComponent', () => {
+  let component: BrowseByPageComponent;
+  let fixture: ComponentFixture<BrowseByPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        BrowseByPageComponent,
+      ],
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BrowseByPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.ts b/src/app/browse-by/browse-by-page/browse-by-page.component.ts
new file mode 100644
index 00000000000..5999026c1c2
--- /dev/null
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Data } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'ds-browse-by-page',
+  templateUrl: './browse-by-page.component.html',
+  styleUrls: ['./browse-by-page.component.scss'],
+})
+export class BrowseByPageComponent implements OnInit {
+
+  browseByDataType$: Observable<BrowseByDataType>;
+
+  constructor(
+    protected route: ActivatedRoute,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.browseByDataType$ = this.route.data.pipe(
+      map((data: Data) => data?.browseDefinition),
+    );
+  }
+
+}
diff --git a/src/app/browse-by/browse-by-routing.module.ts b/src/app/browse-by/browse-by-routing.module.ts
index bb67dc65aed..32c64d7792a 100644
--- a/src/app/browse-by/browse-by-routing.module.ts
+++ b/src/app/browse-by/browse-by-routing.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { BrowseByGuard } from './browse-by-guard';
 import { BrowseByDSOBreadcrumbResolver } from './browse-by-dso-breadcrumb.resolver';
 import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.resolver';
-import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
 
 @NgModule({
   imports: [
@@ -18,7 +18,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
         children: [
           {
             path: ':id',
-            component: ThemedBrowseBySwitcherComponent,
+            component: BrowseByPageComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
             data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' }
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
index 11ff1cec288..90dd957bc62 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
@@ -1,10 +1,7 @@
 import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
-import {
-  DEFAULT_THEME,
-  resolveTheme
-} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { DEFAULT_THEME, resolveTheme } from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { AbstractBrowseByPageComponent } from '../abstract-browse-by-page.component';
 
 export enum BrowseByDataType {
   Title = 'title',
@@ -15,19 +12,19 @@ export enum BrowseByDataType {
 
 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
 
-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor<any>>('getComponentByBrowseByType', {
+export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType: BrowseByDataType, theme: string) => AbstractBrowseByPageComponent>('getComponentByBrowseByType', {
   providedIn: 'root',
   factory: () => getComponentByBrowseByType
 });
 
-const map = new Map();
+const map: Map<BrowseByDataType, Map<string, AbstractBrowseByPageComponent>> = new Map();
 
 /**
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
  * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
     if (hasNoValue(map.get(browseByType))) {
       map.set(browseByType, new Map());
@@ -45,8 +42,8 @@ export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
  * @param browseByType  The type of page
  * @param theme the theme to match
  */
-export function getComponentByBrowseByType(browseByType, theme) {
-  let themeMap = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType: BrowseByDataType, theme: string): AbstractBrowseByPageComponent {
+  let themeMap: Map<string, AbstractBrowseByPageComponent> = map.get(browseByType);
   if (hasNoValue(themeMap)) {
     themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
   }
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
index afe79cf2b10..2035dbadd08 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html
@@ -1 +1 @@
-<ng-container *ngComponentOutlet="browseByComponent | async"></ng-container>
+<ng-template dsDynamicComponentLoader></ng-template>
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index 35e4edf9005..84f8b3d6ec2 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -1,11 +1,11 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
+import { Component, OnInit, Input, ComponentRef, ViewChild, SimpleChanges, ViewContainerRef, OnChanges, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 import { ThemeService } from '../../shared/theme-support/theme.service';
+import { AbstractBrowseByPageComponent } from '../abstract-browse-by-page.component';
+import { DynamicComponentLoaderDirective } from './dynamic-component-loader-directive';
+import { hasValue, isNotEmpty, hasNoValue } from '../../shared/empty.util';
+import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
 
 @Component({
   selector: 'ds-browse-by-switcher',
@@ -13,26 +13,91 @@ import { ThemeService } from '../../shared/theme-support/theme.service';
 })
 /**
  * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
+ *
+ * TODO should extend AbstractComponentLoaderComponent once PR https://github.com/DSpace/dspace-angular/pull/2339 is
+ *  merged.
  */
-export class BrowseBySwitcherComponent implements OnInit {
+export class BrowseBySwitcherComponent implements OnInit, OnChanges {
+
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage = true;
+
+  /**
+   * Directive to determine where the dynamic child component is located
+   */
+  @ViewChild(DynamicComponentLoaderDirective, { static: true }) componentDirective: DynamicComponentLoaderDirective;
 
   /**
-   * Resolved browse-by component
+   * The reference to the dynamic component
    */
-  browseByComponent: Observable<any>;
+  protected compRef: ComponentRef<AbstractBrowseByPageComponent>;
 
-  public constructor(protected route: ActivatedRoute,
-                     protected themeService: ThemeService,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
+  subs: Subscription[] = [];
+
+  inputNames: (keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
+  public constructor(
+    protected themeService: ThemeService,
+    @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType: string, theme: string) => GenericConstructor<AbstractBrowseByPageComponent>,
+  ) {
   }
 
   /**
    * Fetch the correct browse-by component by using the relevant config from the route data
    */
   ngOnInit(): void {
-    this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName()))
+    this.instantiateComponent();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasNoValue(this.compRef)) {
+      // sometimes the component has not been initialized yet, so it first needs to be initialized
+      // before being called again
+      this.instantiateComponent(changes);
+    } else {
+      // if an input or output has changed
+      if (this.inputNames.some((name: any) => hasValue(changes[name]))) {
+        this.connectInputs();
+      }
+    }
+  }
+
+  public instantiateComponent(changes?: SimpleChanges): void {
+    const component: GenericConstructor<AbstractBrowseByPageComponent> = this.getComponent();
+
+    const viewContainerRef: ViewContainerRef = this.componentDirective.viewContainerRef;
+    viewContainerRef.clear();
+
+    this.compRef = viewContainerRef.createComponent(
+      component, {
+        index: 0,
+        injector: undefined,
+      },
     );
+
+    if (hasValue(changes)) {
+      this.ngOnChanges(changes);
+    } else {
+      this.connectInputs();
+    }
+  }
+
+  public getComponent(): GenericConstructor<AbstractBrowseByPageComponent> {
+    return this.getComponentByBrowseByType(this.browseByType, this.themeService.getThemeName());
   }
 
+
+  protected connectInputs(): void {
+    if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
+      this.inputNames.filter((name: any) => this[name] !== undefined).forEach((name: any) => {
+        this.compRef.setInput(name, this[name]);
+      });
+    }
+  }
+
+
 }
diff --git a/src/app/browse-by/browse-by-switcher/dynamic-component-loader-directive.ts b/src/app/browse-by/browse-by-switcher/dynamic-component-loader-directive.ts
new file mode 100644
index 00000000000..dc5e05e3e1d
--- /dev/null
+++ b/src/app/browse-by/browse-by-switcher/dynamic-component-loader-directive.ts
@@ -0,0 +1,17 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+/**
+ * Directive used as a hook to know where to inject the dynamic loaded component
+ * TODO should be removed once https://github.com/DSpace/dspace-angular/pull/2339 is merged
+ */
+@Directive({
+  selector: '[dsDynamicComponentLoader]'
+})
+export class DynamicComponentLoaderDirective {
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+  ) {
+  }
+
+}
diff --git a/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
index 0187d4e3c5e..961d4c51874 100644
--- a/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+import { BrowseByDataType } from './browse-by-decorator';
 
 /**
  * Themed wrapper for BrowseBySwitcherComponent
@@ -12,6 +13,16 @@ import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
   templateUrl: '../../shared/theme-support/themed.component.html'
 })
 export class ThemedBrowseBySwitcherComponent extends ThemedComponent<BrowseBySwitcherComponent> {
+
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage: boolean;
+
+  inAndOutputNames: (keyof BrowseBySwitcherComponent & keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
   protected getComponentName(): string {
     return 'BrowseBySwitcherComponent';
   }
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
index 0ae3da6847b..603f01cdb3c 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
+++ b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
@@ -1,4 +1,10 @@
-<div class="container">
+<div [class.container]="showAsStandalonePage">
+  <ng-container *ngVar="('browse.taxonomy.title') | translate:{
+      field: ('browse.metadata.' + vocabularyName) | translate
+    } as title">
+    <h1 *ngIf="showAsStandalonePage">{{ title }}</h1>
+    <h3 *ngIf="!showAsStandalonePage">{{ title }}</h3>
+  </ng-container>
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
index cf6345bf394..364a30e2911 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
@@ -9,6 +9,7 @@ import { BROWSE_BY_COMPONENT_FACTORY } from '../browse-by-switcher/browse-by-dec
 import { map } from 'rxjs/operators';
 import { ThemeService } from 'src/app/shared/theme-support/theme.service';
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
+import { AbstractBrowseByPageComponent } from '../abstract-browse-by-page.component';
 
 @Component({
   selector: 'ds-browse-by-taxonomy-page',
@@ -18,7 +19,7 @@ import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-bro
 /**
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
-export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
+export class BrowseByTaxonomyPageComponent extends AbstractBrowseByPageComponent implements OnInit, OnDestroy {
 
   /**
    * The {@link VocabularyOptions} object
@@ -60,9 +61,12 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
    */
   browseByComponentSubs: Subscription[] = [];
 
-  public constructor( protected route: ActivatedRoute,
-                      protected themeService: ThemeService,
-                      @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
+  public constructor(
+    protected route: ActivatedRoute,
+    protected themeService: ThemeService,
+    @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>
+  ) {
+    super();
   }
 
   ngOnInit(): void {
diff --git a/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
index 77fe5775f19..d3814e0ac5e 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { rendersBrowseBy, BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
 import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
@@ -14,6 +14,15 @@ import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.compone
 @rendersBrowseBy(BrowseByDataType.Hierarchy)
 export class ThemedBrowseByTaxonomyPageComponent extends ThemedComponent<BrowseByTaxonomyPageComponent>{
 
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage: boolean;
+
+  inAndOutputNames: (keyof BrowseByTaxonomyPageComponent & keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
   protected getComponentName(): string {
     return 'BrowseByTaxonomyPageComponent';
   }
diff --git a/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
index 4a1bcc0bc11..61d753cb00f 100644
--- a/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
+++ b/src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { BrowseByTitlePageComponent } from './browse-by-title-page.component';
 import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by-decorator';
@@ -15,6 +15,16 @@ import {BrowseByDataType, rendersBrowseBy} from '../browse-by-switcher/browse-by
 @rendersBrowseBy(BrowseByDataType.Title)
 export class ThemedBrowseByTitlePageComponent
   extends ThemedComponent<BrowseByTitlePageComponent> {
+
+  @Input() browseByType: BrowseByDataType;
+
+  @Input() showAsStandalonePage: boolean;
+
+  inAndOutputNames: (keyof BrowseByTitlePageComponent & keyof this)[] = [
+    'browseByType',
+    'showAsStandalonePage',
+  ];
+
   protected getComponentName(): string {
     return 'BrowseByTitlePageComponent';
   }
diff --git a/src/app/browse-by/browse-by.module.ts b/src/app/browse-by/browse-by.module.ts
index c0e2d3f9ff8..040f1848137 100644
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -14,9 +14,14 @@ import { ThemedBrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/t
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
+import { AbstractBrowseByPageComponent } from './abstract-browse-by-page.component';
+import { DynamicComponentLoaderDirective } from './browse-by-switcher/dynamic-component-loader-directive';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
+  AbstractBrowseByPageComponent,
+
   BrowseByTitlePageComponent,
   BrowseByMetadataPageComponent,
   BrowseByDatePageComponent,
@@ -28,6 +33,16 @@ const ENTRY_COMPONENTS = [
   ThemedBrowseByTaxonomyPageComponent,
 ];
 
+const DECLARATIONS = [
+  BrowseByPageComponent,
+  BrowseBySwitcherComponent,
+  ThemedBrowseBySwitcherComponent,
+];
+
+const DIRECTIVES = [
+  DynamicComponentLoaderDirective,
+];
+
 @NgModule({
   imports: [
     SharedBrowseByModule,
@@ -37,12 +52,14 @@ const ENTRY_COMPONENTS = [
     FormModule,
   ],
   declarations: [
-    BrowseBySwitcherComponent,
-    ThemedBrowseBySwitcherComponent,
-    ...ENTRY_COMPONENTS
+    ...DECLARATIONS,
+    ...ENTRY_COMPONENTS,
+    ...DIRECTIVES,
   ],
   exports: [
-    BrowseBySwitcherComponent
+    ...DECLARATIONS,
+    ...ENTRY_COMPONENTS,
+    ...DIRECTIVES,
   ]
 })
 export class BrowseByModule {
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index d6a00051739..49b00ddbc96 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,5 +1,4 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h3 [ngClass]="{'sr-only': parentname }">{{title | translate}}</h3>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
index 0dc20033f85..fd067123e1c 100644
--- a/src/app/shared/browse-by/browse-by.component.ts
+++ b/src/app/shared/browse-by/browse-by.component.ts
@@ -33,15 +33,6 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   viewMode: ViewMode = ViewMode.ListElement;
 
-  /**
-   * The i18n message to display as title
-   */
-  @Input() title: string;
-
-  /**
-   * The parent name
-   */
-  @Input() parentname: string;
   /**
    * The list of objects to display
    */
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6c91bae4c16..53083115a68 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -796,6 +796,8 @@
 
   "browse.metadata.title": "Title",
 
+  "browse.metadata.srsc": "Subject Category",
+
   "browse.metadata.author.breadcrumbs": "Browse by Author",
 
   "browse.metadata.dateissued.breadcrumbs": "Browse by Date",
@@ -860,6 +862,8 @@
 
   "browse.startsWith.input": "Filter",
 
+  "browse.taxonomy.title": "Browsing by {{ field }}",
+
   "browse.taxonomy.button": "Browse",
 
   "browse.title": "Browsing {{ collection }} by {{ field }}{{ startsWith }} {{ value }}",
diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts
index 74a05be3ef8..ae94e41a19a 100644
--- a/src/themes/custom/lazy-theme.module.ts
+++ b/src/themes/custom/lazy-theme.module.ts
@@ -301,6 +301,9 @@ const DECLARATIONS = [
     RequestCopyModule,
   ],
   declarations: DECLARATIONS,
+  exports: [
+    BrowseBySwitcherComponent
+  ]
 })
 
   /**