diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index fb17a43575..0b5b3f9d8c 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -80,6 +80,19 @@ jobs:
           docker-compose -f ./docker/cli.yml -f ./docker/cli.assetstore.yml run --rm dspace-cli
           docker container ls
 
+      # Wait until the REST API returns a 200 response (or for a max of 30 seconds)
+      # https://github.com/nev7n/wait_for_response
+      - name: Wait for DSpace REST Backend to be ready (for e2e tests)
+        uses: nev7n/wait_for_response@v1
+        with:
+            # We use the 'sites' endpoint to also ensure the database is ready
+            url: 'http://localhost:8080/server/api/core/sites'
+            responseCode: 200
+            timeout: 30000
+
+      - name: Get DSpace REST Backend info/properties
+        run: curl http://localhost:8080/server/api
+
       - name: Run e2e tests (integration tests)
         run: yarn run e2e:ci
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ccdda087eb..e8522b85d7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
-    "typescript.check.workspaceVersion": false
+    "typescript.check.workspaceVersion": false,
+    "i18n-ally.localesPaths": [
+        "src/assets/i18n",
+        "src/app/core/locale"
+    ]
 }
\ No newline at end of file
diff --git a/e2e/src/search-navbar/search-navbar.po.ts b/e2e/src/search-navbar/search-navbar.po.ts
index 7401e881e7..c1ac817fd2 100644
--- a/e2e/src/search-navbar/search-navbar.po.ts
+++ b/e2e/src/search-navbar/search-navbar.po.ts
@@ -14,22 +14,22 @@ export class ProtractorPage {
   }
 
   getCurrentQuery(): promise.Promise<string> {
-    return element(by.css('#search-navbar-container form input')).getAttribute('value');
+    return element(by.css('.navbar-container #search-navbar-container form input')).getAttribute('value');
   }
 
   expandAndFocusSearchBox() {
-    element(by.css('#search-navbar-container form a')).click();
+    element(by.css('.navbar-container #search-navbar-container form a')).click();
   }
 
   setCurrentQuery(query: string) {
-    element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(query);
+    element(by.css('.navbar-container #search-navbar-container form input[name="query"]')).sendKeys(query);
   }
 
   submitNavbarSearchForm() {
-    element(by.css('#search-navbar-container form .submit-icon')).click();
+    element(by.css('.navbar-container #search-navbar-container form .submit-icon')).click();
   }
 
   submitByPressingEnter() {
-    element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
+    element(by.css('.navbar-container #search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
   }
 }
diff --git a/package.json b/package.json
index 3aa7c04ad3..4008bb0ac3 100644
--- a/package.json
+++ b/package.json
@@ -119,10 +119,11 @@
     "rxjs": "^6.6.3",
     "rxjs-spy": "^7.5.3",
     "sass-resources-loader": "^2.1.1",
-    "sortablejs": "1.10.1",
+    "sortablejs": "1.13.0",
     "tslib": "^2.0.0",
     "webfontloader": "1.6.28",
-    "zone.js": "^0.10.3"
+    "zone.js": "^0.10.3",
+    "@kolkov/ngx-gallery": "^1.2.3"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "10.0.1",
diff --git a/scripts/set-env.ts b/scripts/set-env.ts
index 5eee22a4be..b3516ae68f 100644
--- a/scripts/set-env.ts
+++ b/scripts/set-env.ts
@@ -10,7 +10,7 @@ const targetPath = './src/environments/environment.ts';
 const colors = require('colors');
 require('dotenv').config();
 const merge = require('deepmerge');
-
+const mergeOptions = { arrayMerge: (destinationArray, sourceArray, options) => sourceArray };
 const environment = process.argv[2];
 let environmentFilePath;
 let production = false;
@@ -45,10 +45,10 @@ const processEnv = {
 } as GlobalConfig;
 
 import(environmentFilePath)
-  .then((file) => generateEnvironmentFile(merge.all([commonEnv, file.environment, processEnv])))
+  .then((file) => generateEnvironmentFile(merge.all([commonEnv, file.environment, processEnv], mergeOptions)))
   .catch(() => {
     console.log(colors.yellow.bold(`No specific environment file found for ` + environment));
-    generateEnvironmentFile(merge(commonEnv, processEnv))
+    generateEnvironmentFile(merge(commonEnv, processEnv, mergeOptions))
   });
 
 function generateEnvironmentFile(file: GlobalConfig): void {
@@ -65,7 +65,7 @@ function generateEnvironmentFile(file: GlobalConfig): void {
 }
 
 // allow to override a few important options by environment variables
-function createServerConfig(host?: string,  port?: string, nameSpace?: string, ssl?: string): ServerConfig {
+function createServerConfig(host?: string, port?: string, nameSpace?: string, ssl?: string): ServerConfig {
   const result = {} as any;
   if (hasValue(host)) {
     result.host = host;
diff --git a/src/app/+admin/admin-access-control/admin-access-control-routing.module.ts b/src/app/+admin/admin-access-control/admin-access-control-routing.module.ts
deleted file mode 100644
index 10ac117b0f..0000000000
--- a/src/app/+admin/admin-access-control/admin-access-control-routing.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
-import { GroupFormComponent } from './group-registry/group-form/group-form.component';
-import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
-import { GROUP_EDIT_PATH } from './admin-access-control-routing-paths';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: 'epeople', component: EPeopleRegistryComponent, data: { title: 'admin.access-control.epeople.title' } },
-      { path: GROUP_EDIT_PATH, component: GroupsRegistryComponent, data: { title: 'admin.access-control.groups.title' } },
-      {
-        path: `${GROUP_EDIT_PATH}/:groupId`,
-        component: GroupFormComponent,
-        data: {title: 'admin.access-control.groups.title.singleGroup'}
-      },
-      {
-        path: `${GROUP_EDIT_PATH}/newGroup`,
-        component: GroupFormComponent,
-        data: {title: 'admin.access-control.groups.title.addGroup'}
-      },
-    ])
-  ]
-})
-/**
- * Routing module for the AccessControl section of the admin sidebar
- */
-export class AdminAccessControlRoutingModule {
-
-}
diff --git a/src/app/+admin/admin-routing-paths.ts b/src/app/+admin/admin-routing-paths.ts
index 11eac49fe2..3168ea93c9 100644
--- a/src/app/+admin/admin-routing-paths.ts
+++ b/src/app/+admin/admin-routing-paths.ts
@@ -2,12 +2,7 @@ import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getAdminModuleRoute } from '../app-routing-paths';
 
 export const REGISTRIES_MODULE_PATH = 'registries';
-export const ACCESS_CONTROL_MODULE_PATH = 'access-control';
 
 export function getRegistriesModuleRoute() {
   return new URLCombiner(getAdminModuleRoute(), REGISTRIES_MODULE_PATH).toString();
 }
-
-export function getAccessControlModuleRoute() {
-  return new URLCombiner(getAdminModuleRoute(), ACCESS_CONTROL_MODULE_PATH).toString();
-}
diff --git a/src/app/+admin/admin-routing.module.ts b/src/app/+admin/admin-routing.module.ts
index 6c44af8190..ee5cb8737b 100644
--- a/src/app/+admin/admin-routing.module.ts
+++ b/src/app/+admin/admin-routing.module.ts
@@ -6,7 +6,7 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
 import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow-page.component';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { AdminCurationTasksComponent } from './admin-curation-tasks/admin-curation-tasks.component';
-import { ACCESS_CONTROL_MODULE_PATH, REGISTRIES_MODULE_PATH } from './admin-routing-paths';
+import { REGISTRIES_MODULE_PATH } from './admin-routing-paths';
 
 @NgModule({
   imports: [
@@ -16,11 +16,6 @@ import { ACCESS_CONTROL_MODULE_PATH, REGISTRIES_MODULE_PATH } from './admin-rout
         loadChildren: () => import('./admin-registries/admin-registries.module')
           .then((m) => m.AdminRegistriesModule),
       },
-      {
-        path: ACCESS_CONTROL_MODULE_PATH,
-        loadChildren: () => import('./admin-access-control/admin-access-control.module')
-          .then((m) => m.AdminAccessControlModule),
-      },
       {
         path: 'search',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
index 13158204c5..1ab8fee8c2 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts
@@ -61,7 +61,7 @@ export class ItemAdminSearchResultGridElementComponent extends SearchResultGridE
   }
 
   /**
-   * Fetch the component depending on the item's relationship type, view mode and context
+   * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(): GenericConstructor<Component> {
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
index 218cbc0ca2..56e25264cf 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.spec.ts
@@ -11,6 +11,8 @@ import { Collection } from '../../../../../core/shared/collection.model';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { getCollectionEditRoute } from '../../../../../+collection-page/collection-page-routing-paths';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 describe('CollectionAdminSearchResultListElementComponent', () => {
   let component: CollectionAdminSearchResultListElementComponent;
@@ -33,7 +35,8 @@ describe('CollectionAdminSearchResultListElementComponent', () => {
         RouterTestingModule.withRoutes([])
       ],
       declarations: [CollectionAdminSearchResultListElementComponent],
-      providers: [{ provide: TruncatableService, useValue: {} }],
+      providers: [{ provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
index 69fe8856dd..29d9925326 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.spec.ts
@@ -11,6 +11,8 @@ import { CommunityAdminSearchResultListElementComponent } from './community-admi
 import { CommunitySearchResult } from '../../../../../shared/object-collection/shared/community-search-result.model';
 import { Community } from '../../../../../core/shared/community.model';
 import { getCommunityEditRoute } from '../../../../../+community-page/community-page-routing-paths';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 describe('CommunityAdminSearchResultListElementComponent', () => {
   let component: CommunityAdminSearchResultListElementComponent;
@@ -33,7 +35,8 @@ describe('CommunityAdminSearchResultListElementComponent', () => {
         RouterTestingModule.withRoutes([])
       ],
       declarations: [CommunityAdminSearchResultListElementComponent],
-      providers: [{ provide: TruncatableService, useValue: {} }],
+      providers: [{ provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();
diff --git a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
index 1d2f25c2eb..3774a07757 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
+++ b/src/app/+admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.spec.ts
@@ -8,6 +8,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
 import { ItemAdminSearchResultListElementComponent } from './item-admin-search-result-list-element.component';
 import { Item } from '../../../../../core/shared/item.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 describe('ItemAdminSearchResultListElementComponent', () => {
   let component: ItemAdminSearchResultListElementComponent;
@@ -30,7 +32,8 @@ describe('ItemAdminSearchResultListElementComponent', () => {
         RouterTestingModule.withRoutes([])
       ],
       declarations: [ItemAdminSearchResultListElementComponent],
-      providers: [{ provide: TruncatableService, useValue: {} }],
+      providers: [{ provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents();
diff --git a/src/app/+admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html b/src/app/+admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
index 2ee828e870..fbbbbb255c 100644
--- a/src/app/+admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
+++ b/src/app/+admin/admin-search-page/admin-search-results/item-admin-search-result-actions.component.html
@@ -1,27 +1,28 @@
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
-    <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
+<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
+  <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
 </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-light my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
-    <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
-</a>
-
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-light my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
-    <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
-</a>
-
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-light my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
+<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isDiscoverable" class="btn btn-secondary my-1 private-link" [routerLink]="[getPrivateRoute()]" [title]="'admin.search.item.make-private' | translate">
     <i class="fa fa-eye-slash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-private" | translate}}</span>
 </a>
 
-<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-light my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
+<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isDiscoverable" class="btn btn-secondary my-1 public-link" [routerLink]="[getPublicRoute()]" [title]="'admin.search.item.make-public' | translate">
     <i class="fa fa-eye"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.make-public" | translate}}</span>
 </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
+<a [ngClass]="{'btn-sm': small}" class="btn btn-secondary my-1 edit-link" [routerLink]="[getEditRoute()]" [title]="'admin.search.item.edit' | translate">
+  <i class="fa fa-edit"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.edit" | translate}}</span>
+</a>
+
+<a [ngClass]="{'btn-sm': small}" *ngIf="item && !item.isWithdrawn" class="btn btn-warning t my-1 withdraw-link" [routerLink]="[getWithdrawRoute()]" [title]="'admin.search.item.withdraw' | translate">
+  <i class="fa fa-ban"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.withdraw" | translate}}</span>
+</a>
+
+<a [ngClass]="{'btn-sm': small}" *ngIf="item && item.isWithdrawn" class="btn btn-warning my-1 reinstate-link" [routerLink]="[getReinstateRoute()]" [title]="'admin.search.item.reinstate' | translate">
+  <i class="fa fa-undo"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.reinstate" | translate}}</span>
+</a>
+
+<a [ngClass]="{'btn-sm': small}" class="btn btn-danger my-1 delete-link" [routerLink]="[getDeleteRoute()]" [title]="'admin.search.item.delete' | translate">
     <i class="fa fa-trash"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.delete" | translate}}</span>
 </a>
 
-<a [ngClass]="{'btn-sm': small}" class="btn btn-light my-1 move-link" [routerLink]="[getMoveRoute()]" [title]="'admin.search.item.move' | translate">
-    <i class="fa fa-arrow-circle-right"></i><span *ngIf="!small" class="d-none d-sm-inline"> {{"admin.search.item.move" | translate}}</span>
-</a>
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index eb06df3630..4c13c7c570 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,11 +1,11 @@
 <li class="sidebar-section">
-    <a class="nav-item nav-link shortcut-icon" [routerLink]="itemModel.link">
-        <i class="fas fa-{{section.icon}} fa-fw" [title]="('menu.section.icon.' + section.id) | translate"></i>
+    <a class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link">
+        <i class="fas fa-{{section.icon}} fa-fw"></i>
     </a>
     <div class="sidebar-collapsible">
-            <span class="section-header-text">
-        <ng-container
-                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-            </span>
+        <span id="sidebarName-{{section.id}}" class="section-header-text">
+          <ng-container
+            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+        </span>
     </div>
 </li>
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
index 357ed058d1..4dddc89920 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
@@ -1,11 +1,12 @@
 <nav @slideHorizontal class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
-     value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
-     params: {sidebarWidth: (sidebarWidth | async)}
-    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)"
+      value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
+      params: {sidebarWidth: (sidebarWidth | async)}
+     }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)"
      *ngIf="menuVisible | async" (mouseenter)="expandPreview($event)"
-     (mouseleave)="collapsePreview($event)">
+     (mouseleave)="collapsePreview($event)"
+     role="navigation" [attr.aria-label]="'menu.header.admin.description' |translate">
     <div class="sidebar-top-level-items">
         <ul class="navbar-nav">
             <li class="admin-menu-header sidebar-section">
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
index ec571ff3d5..0a9ef512d7 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -16,6 +16,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import createSpy = jasmine.createSpy;
 
 describe('AdminSidebarComponent', () => {
   let comp: AdminSidebarComponent;
@@ -170,4 +172,150 @@ describe('AdminSidebarComponent', () => {
       expect(menuService.collapseMenuPreview).toHaveBeenCalled();
     }));
   });
+
+  describe('menu', () => {
+    beforeEach(() => {
+      spyOn(menuService, 'addSection');
+    });
+
+    describe('for regular user', () => {
+      beforeEach(() => {
+        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake(() => {
+          return observableOf(false);
+        });
+      });
+
+      beforeEach(() => {
+        comp.createMenu();
+      });
+
+      it('should not show site admin section', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'admin_search', visible: false,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'registries', visible: false,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          parentID: 'registries', visible: false,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'curation_tasks', visible: false,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'workflow', visible: false,
+        }));
+      });
+
+      it('should not show edit_community', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'edit_community', visible: false,
+        }));
+
+      });
+
+      it('should not show edit_collection', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'edit_collection', visible: false,
+        }));
+      });
+
+      it('should not show access control section', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          id: 'access_control', visible: false,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+          parentID: 'access_control', visible: false,
+        }));
+
+      });
+    });
+
+    describe('for site admin', () => {
+      beforeEach(() => {
+        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
+          return observableOf(featureID === FeatureID.AdministratorOf);
+        });
+      });
+
+      beforeEach(() => {
+        comp.createMenu();
+      });
+
+      it('should contain site admin section', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'admin_search', visible: true,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'registries', visible: true,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            parentID: 'registries', visible: true,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'curation_tasks', visible: true,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'workflow', visible: true,
+        }));
+      });
+    });
+
+    describe('for community admin', () => {
+      beforeEach(() => {
+        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
+          return observableOf(featureID === FeatureID.IsCommunityAdmin);
+        });
+      });
+
+      beforeEach(() => {
+        comp.createMenu();
+      });
+
+      it('should show edit_community', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'edit_community', visible: true,
+        }));
+      });
+    });
+
+    describe('for collection admin', () => {
+      beforeEach(() => {
+        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
+          return observableOf(featureID === FeatureID.IsCollectionAdmin);
+        });
+      });
+
+      beforeEach(() => {
+        comp.createMenu();
+      });
+
+      it('should show edit_collection', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'edit_collection', visible: true,
+        }));
+      });
+    });
+
+    describe('for group admin', () => {
+      beforeEach(() => {
+        authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID: FeatureID) => {
+          return observableOf(featureID === FeatureID.CanManageGroups);
+        });
+      });
+
+      beforeEach(() => {
+        comp.createMenu();
+      });
+
+      it('should show access control section', () => {
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            id: 'access_control', visible: true,
+        }));
+        expect(menuService.addSection).toHaveBeenCalledWith(comp.menuID, jasmine.objectContaining({
+            parentID: 'access_control', visible: true,
+        }));
+      });
+    });
+  });
 });
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index bfc36cea24..a9c0a6648d 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,6 +1,6 @@
 import { Component, Injector, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { combineLatest, combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { first, map, take } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
@@ -76,9 +76,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     this.createMenu();
-    this.createSiteAdministratorMenuSections();
-    this.createExportMenuSections();
-    this.createImportMenuSections();
     super.ngOnInit();
     this.sidebarWidth = this.variableService.getVariable('sidebarItemsWidth');
     this.authService.isAuthenticated()
@@ -102,192 +99,210 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * Initialize all menu sections and items for this menu
    */
   createMenu() {
-    const menuList = [
-      /* News */
-      {
-        id: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.new'
-        } as TextMenuItemModel,
-        icon: 'plus-circle',
-        index: 0
-      },
-      {
-        id: 'new_community',
-        parentID: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.new_community',
-          function: () => {
-            this.modalService.open(CreateCommunityParentSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
-      {
-        id: 'new_collection',
-        parentID: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.new_collection',
-          function: () => {
-            this.modalService.open(CreateCollectionParentSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
-      {
-        id: 'new_item',
-        parentID: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.new_item',
-          function: () => {
-            this.modalService.open(CreateItemParentSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
-      {
-        id: 'new_process',
-        parentID: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.new_process',
-          link: '/processes/new'
-        } as LinkMenuItemModel,
-      },
-      {
-        id: 'new_item_version',
-        parentID: 'new',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.new_item_version',
-          link: ''
-        } as LinkMenuItemModel,
-      },
+    this.createMainMenuSections();
+    this.createSiteAdministratorMenuSections();
+    this.createExportMenuSections();
+    this.createImportMenuSections();
+    this.createAccessControlMenuSections();
+  }
 
-      /* Edit */
-      {
-        id: 'edit',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.edit'
-        } as TextMenuItemModel,
-        icon: 'pencil-alt',
-        index: 1
-      },
-      {
-        id: 'edit_community',
-        parentID: 'edit',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.edit_community',
-          function: () => {
-            this.modalService.open(EditCommunitySelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
-      {
-        id: 'edit_collection',
-        parentID: 'edit',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.edit_collection',
-          function: () => {
-            this.modalService.open(EditCollectionSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
-      {
-        id: 'edit_item',
-        parentID: 'edit',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.ONCLICK,
-          text: 'menu.section.edit_item',
-          function: () => {
-            this.modalService.open(EditItemSelectorComponent);
-          }
-        } as OnClickMenuItemModel,
-      },
+  /**
+   * Initialize the main menu sections.
+   * edit_community / edit_collection is only included if the current user is a Community or Collection admin
+   */
+  createMainMenuSections() {
+    combineLatest([
+      this.authorizationService.isAuthorized(FeatureID.IsCollectionAdmin),
+      this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin),
+      this.authorizationService.isAuthorized(FeatureID.AdministratorOf)
+    ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin]) => {
+      const menuList = [
+        /* News */
+        {
+          id: 'new',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.new'
+          } as TextMenuItemModel,
+        icon: 'plus',
+          index: 0
+        },
+        {
+          id: 'new_community',
+          parentID: 'new',
+          active: false,
+          visible: isCommunityAdmin,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.new_community',
+            function: () => {
+              this.modalService.open(CreateCommunityParentSelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
+        {
+          id: 'new_collection',
+          parentID: 'new',
+          active: false,
+          visible: isCommunityAdmin,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.new_collection',
+            function: () => {
+              this.modalService.open(CreateCollectionParentSelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
+        {
+          id: 'new_item',
+          parentID: 'new',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.new_item',
+            function: () => {
+              this.modalService.open(CreateItemParentSelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
+        {
+          id: 'new_process',
+          parentID: 'new',
+          active: false,
+          visible: isCollectionAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.new_process',
+            link: '/processes/new'
+          } as LinkMenuItemModel,
+        },
+        {
+          id: 'new_item_version',
+          parentID: 'new',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.new_item_version',
+            link: ''
+          } as LinkMenuItemModel,
+        },
 
-      /* Curation tasks */
-      {
-        id: 'curation_tasks',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.curation_task',
-          link: ''
-        } as LinkMenuItemModel,
-        icon: 'filter',
-        index: 7
-      },
+        /* Edit */
+        {
+          id: 'edit',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.edit'
+          } as TextMenuItemModel,
+          icon: 'pencil-alt',
+          index: 1
+        },
+        {
+          id: 'edit_community',
+          parentID: 'edit',
+          active: false,
+          visible: isCommunityAdmin,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.edit_community',
+            function: () => {
+              this.modalService.open(EditCommunitySelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
+        {
+          id: 'edit_collection',
+          parentID: 'edit',
+          active: false,
+          visible: isCollectionAdmin,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.edit_collection',
+            function: () => {
+              this.modalService.open(EditCollectionSelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
+        {
+          id: 'edit_item',
+          parentID: 'edit',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.ONCLICK,
+            text: 'menu.section.edit_item',
+            function: () => {
+              this.modalService.open(EditItemSelectorComponent);
+            }
+          } as OnClickMenuItemModel,
+        },
 
-      /* Statistics */
-      {
-        id: 'statistics_task',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.statistics_task',
-          link: ''
-        } as LinkMenuItemModel,
-        icon: 'chart-bar',
-        index: 8
-      },
+        /* Curation tasks */
+        {
+          id: 'curation_tasks',
+          active: false,
+          visible: isCollectionAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.curation_task',
+            link: ''
+          } as LinkMenuItemModel,
+          icon: 'filter',
+          index: 7
+        },
 
-      /* Control Panel */
-      {
-        id: 'control_panel',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.control_panel',
-          link: ''
-        } as LinkMenuItemModel,
-        icon: 'cogs',
-        index: 9
-      },
+        /* Statistics */
+        {
+          id: 'statistics_task',
+          active: false,
+          visible: true,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.statistics_task',
+            link: ''
+          } as LinkMenuItemModel,
+          icon: 'chart-bar',
+          index: 8
+        },
 
-      /* Processes */
-      {
-        id: 'processes',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.processes',
-          link: '/processes'
-        } as LinkMenuItemModel,
-        icon: 'terminal',
-        index: 10
-      },
-    ];
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-      shouldPersistOnRouteChange: true
-    })));
+        /* Control Panel */
+        {
+          id: 'control_panel',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.control_panel',
+            link: ''
+          } as LinkMenuItemModel,
+          icon: 'cogs',
+          index: 9
+        },
+
+        /* Processes */
+        {
+          id: 'processes',
+          active: false,
+          visible: isSiteAdmin,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.processes',
+            link: '/processes'
+          } as LinkMenuItemModel,
+          icon: 'terminal',
+          index: 10
+        },
+      ];
+      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
+        shouldPersistOnRouteChange: true
+      })));
+    });
   }
 
   /**
@@ -305,7 +320,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
           type: MenuItemType.TEXT,
           text: 'menu.section.export'
         } as TextMenuItemModel,
-        icon: 'sign-out-alt',
+        icon: 'file-export',
         index: 3,
         shouldPersistOnRouteChange: true
       },
@@ -388,7 +403,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
           type: MenuItemType.TEXT,
           text: 'menu.section.import'
         } as TextMenuItemModel,
-        icon: 'sign-in-alt',
+        icon: 'file-import',
         index: 2
       },
       {
@@ -436,51 +451,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   createSiteAdministratorMenuSections() {
     this.authorizationService.isAuthorized(FeatureID.AdministratorOf).subscribe((authorized) => {
       const menuList = [
-        /* Access Control */
-        {
-          id: 'access_control',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.TEXT,
-            text: 'menu.section.access_control'
-          } as TextMenuItemModel,
-          icon: 'key',
-          index: 4
-        },
-        {
-          id: 'access_control_people',
-          parentID: 'access_control',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_people',
-            link: '/admin/access-control/epeople'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'access_control_groups',
-          parentID: 'access_control',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_groups',
-            link: '/admin/access-control/groups'
-          } as LinkMenuItemModel,
-        },
-        {
-          id: 'access_control_authorizations',
-          parentID: 'access_control',
-          active: false,
-          visible: authorized,
-          model: {
-            type: MenuItemType.LINK,
-            text: 'menu.section.access_control_authorizations',
-            link: ''
-          } as LinkMenuItemModel,
-        },
         /*  Admin Search */
         {
           id: 'admin_search',
@@ -564,6 +534,65 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
     });
   }
 
+  /**
+   * Create menu sections dependent on whether or not the current user can manage access control groups
+   */
+  createAccessControlMenuSections() {
+    this.authorizationService.isAuthorized(FeatureID.CanManageGroups).subscribe((authorized) => {
+      const menuList = [
+        /* Access Control */
+        {
+          id: 'access_control_people',
+          parentID: 'access_control',
+          active: false,
+          visible: authorized,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.access_control_people',
+            link: '/access-control/epeople'
+          } as LinkMenuItemModel,
+        },
+        {
+          id: 'access_control_groups',
+          parentID: 'access_control',
+          active: false,
+          visible: authorized,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.access_control_groups',
+            link: '/access-control/groups'
+          } as LinkMenuItemModel,
+        },
+        {
+          id: 'access_control_authorizations',
+          parentID: 'access_control',
+          active: false,
+          visible: authorized,
+          model: {
+            type: MenuItemType.LINK,
+            text: 'menu.section.access_control_authorizations',
+            link: ''
+          } as LinkMenuItemModel,
+        },
+        {
+          id: 'access_control',
+          active: false,
+          visible: authorized,
+          model: {
+            type: MenuItemType.TEXT,
+            text: 'menu.section.access_control'
+          } as TextMenuItemModel,
+          icon: 'key',
+          index: 4
+        },
+      ];
+
+      menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
+        shouldPersistOnRouteChange: true,
+      })));
+    });
+  }
+
   /**
    * Method to change this.collapsed to false when the slide animation ends and is sliding open
    * @param event The animation event
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index d9869ddf1f..8854dea216 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -3,14 +3,14 @@
      value: ((expanded | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg | async)}}">
     <div class="icon-wrapper">
-        <a class="nav-item nav-link shortcut-icon" (click)="toggleSection($event)" href="#">
-            <i class="fas fa-{{section.icon}} fa-fw" [title]="('menu.section.icon.' + section.id) | translate"></i>
+        <a class="nav-item nav-link shortcut-icon" attr.aria.labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" (click)="toggleSection($event)" href="#">
+            <i class="fas fa-{{section.icon}} fa-fw"></i>
         </a>
     </div>
     <div class="sidebar-collapsible">
         <a class="nav-item nav-link" href="#"
            (click)="toggleSection($event)">
-            <span class="section-header-text">
+            <span id="sidebarName-{{section.id}}" class="section-header-text">
                 <ng-container
                         *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
             </span>
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index e3a807a14f..8670cf19aa 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -16,4 +16,8 @@
         display: flex;
         flex-direction: column;
     }
+
+    li.sidebar-section.expanded {
+      background-color: var(--ds-admin-sidebar-active-bg) !important;
+    }
 }
diff --git a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
index cf5746391c..68f10916d5 100644
--- a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
+++ b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts
@@ -96,7 +96,7 @@ export class WorkflowItemSearchResultAdminWorkflowGridElementComponent extends S
   }
 
   /**
-   * Fetch the component depending on the item's relationship type, view mode and context
+   * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor<Component>}
    */
   private getComponent(item: Item): GenericConstructor<Component> {
diff --git a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
index 47907999a2..a792a606e9 100644
--- a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
+++ b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.spec.ts
@@ -16,6 +16,8 @@ import { Item } from '../../../../../core/shared/item.model';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
 import { getMockLinkService } from '../../../../../shared/mocks/link-service.mock';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 describe('WorkflowItemAdminWorkflowListElementComponent', () => {
   let component: WorkflowItemSearchResultAdminWorkflowListElementComponent;
@@ -49,6 +51,7 @@ describe('WorkflowItemAdminWorkflowListElementComponent', () => {
         providers: [
           { provide: TruncatableService, useValue: mockTruncatableService },
           { provide: LinkService, useValue: linkService },
+          { provide: DSONameService, useClass: DSONameServiceMock }
         ],
         schemas: [NO_ERRORS_SCHEMA]
       })
diff --git a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
index 80225db09f..3dd17faf25 100644
--- a/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
+++ b/src/app/+admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.ts
@@ -12,6 +12,7 @@ import { Item } from '../../../../../core/shared/item.model';
 import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { WorkflowItemSearchResult } from '../../../../../shared/object-collection/shared/workflow-item-search-result.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent(WorkflowItemSearchResult, ViewMode.ListElement, Context.AdminWorkflowSearch)
 @Component({
@@ -29,8 +30,11 @@ export class WorkflowItemSearchResultAdminWorkflowListElementComponent extends S
    */
   public item$: Observable<Item>;
 
-  constructor(private linkService: LinkService, protected truncatableService: TruncatableService) {
-    super(truncatableService);
+  constructor(private linkService: LinkService,
+              protected truncatableService: TruncatableService,
+              protected dsoNameService: DSONameService
+  ) {
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/+admin/admin.module.ts b/src/app/+admin/admin.module.ts
index 494edd71eb..25cdd67dcf 100644
--- a/src/app/+admin/admin.module.ts
+++ b/src/app/+admin/admin.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
-import { AdminAccessControlModule } from './admin-access-control/admin-access-control.module';
+import { AccessControlModule } from '../access-control/access-control.module';
 import { MetadataImportPageComponent } from './admin-import-metadata-page/metadata-import-page.component';
 import { AdminRegistriesModule } from './admin-registries/admin-registries.module';
 import { AdminRoutingModule } from './admin-routing.module';
@@ -21,7 +21,7 @@ const ENTRY_COMPONENTS = [
   imports: [
     AdminRoutingModule,
     AdminRegistriesModule,
-    AdminAccessControlModule,
+    AccessControlModule,
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
     SharedModule,
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
new file mode 100644
index 0000000000..e92fe30ba9
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/themed-browse-by-switcher.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+
+/**
+ * Themed wrapper for BrowseBySwitcherComponent
+ */
+@Component({
+  selector: 'ds-themed-browse-by-switcher',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html'
+})
+export class ThemedBrowseBySwitcherComponent extends ThemedComponent<BrowseBySwitcherComponent> {
+  protected getComponentName(): string {
+    return 'BrowseBySwitcherComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+browse-by/+browse-by-switcher/browse-by-switcher.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./browse-by-switcher.component`);
+  }
+
+
+}
diff --git a/src/app/+browse-by/browse-by-routing.module.ts b/src/app/+browse-by/browse-by-routing.module.ts
index a686e7007e..8cf989695a 100644
--- a/src/app/+browse-by/browse-by-routing.module.ts
+++ b/src/app/+browse-by/browse-by-routing.module.ts
@@ -1,9 +1,9 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { BrowseByGuard } from './browse-by-guard';
-import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
 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';
 
 @NgModule({
   imports: [
@@ -14,7 +14,7 @@ import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.reso
         children: [
           {
             path: ':id',
-            component: BrowseBySwitcherComponent,
+            component: ThemedBrowseBySwitcherComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
             data: { title: 'browse.title', breadcrumbKey: 'browse.metadata' }
diff --git a/src/app/+browse-by/browse-by.module.ts b/src/app/+browse-by/browse-by.module.ts
index 60574f4074..08b6c5739b 100644
--- a/src/app/+browse-by/browse-by.module.ts
+++ b/src/app/+browse-by/browse-by.module.ts
@@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module';
 import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
+import { ThemedBrowseBySwitcherComponent } from './+browse-by-switcher/themed-browse-by-switcher.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -20,6 +21,7 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     BrowseBySwitcherComponent,
+    ThemedBrowseBySwitcherComponent,
     ...ENTRY_COMPONENTS
   ],
   exports: [
diff --git a/src/app/+collection-page/collection-form/collection-form.component.ts b/src/app/+collection-page/collection-form/collection-form.component.ts
index 59433e49a0..e8b368a25f 100644
--- a/src/app/+collection-page/collection-form/collection-form.component.ts
+++ b/src/app/+collection-page/collection-form/collection-form.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@ng-dynamic-forms/core';
 import { Collection } from '../../core/shared/collection.model';
 import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
-import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CommunityDataService } from '../../core/data/community-data.service';
@@ -76,14 +75,13 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
     }),
   ];
 
-  public constructor(protected location: Location,
-                     protected formService: DynamicFormService,
+  public constructor(protected formService: DynamicFormService,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
                      protected authService: AuthService,
                      protected dsoService: CommunityDataService,
                      protected requestService: RequestService,
                      protected objectCache: ObjectCacheService) {
-    super(location, formService, translate, notificationsService, authService, requestService, objectCache);
+    super(formService, translate, notificationsService, authService, requestService, objectCache);
   }
 }
diff --git a/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html b/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html
index 8cdd99e70f..cc4b0c22a1 100644
--- a/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html
+++ b/src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html
@@ -31,6 +31,7 @@
                                 [scope]="(searchOptions$ | async)?.scope"
                                 [currentUrl]="'./'"
                                 [inPlaceSearch]="true"
+                                [searchPlaceholder]="'collection.edit.item-mapper.search-form.placeholder' | translate"
                                 (submitSearch)="performedSearch = true">
                 </ds-search-form>
               </div>
diff --git a/src/app/+collection-page/collection-page-routing-paths.ts b/src/app/+collection-page/collection-page-routing-paths.ts
index 4f165bb51c..2eebe31e1c 100644
--- a/src/app/+collection-page/collection-page-routing-paths.ts
+++ b/src/app/+collection-page/collection-page-routing-paths.ts
@@ -24,6 +24,10 @@ export function getCollectionEditRolesRoute(id) {
   return new URLCombiner(getCollectionPageRoute(id), COLLECTION_EDIT_PATH, COLLECTION_EDIT_ROLES_PATH).toString();
 }
 
+export function getCollectionItemTemplateRoute(id) {
+  return new URLCombiner(getCollectionPageRoute(id), ITEMTEMPLATE_PATH).toString();
+}
+
 export const COLLECTION_CREATE_PATH = 'create';
 export const COLLECTION_EDIT_PATH = 'edit';
 export const COLLECTION_EDIT_ROLES_PATH = 'roles';
diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts
index 7e44883a53..5879e523af 100644
--- a/src/app/+collection-page/collection-page-routing.module.ts
+++ b/src/app/+collection-page/collection-page-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { CollectionPageComponent } from './collection-page.component';
 import { CollectionPageResolver } from './collection-page.resolver';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -21,6 +20,7 @@ import {
 import { CollectionPageAdministratorGuard } from './collection-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 
 @NgModule({
   imports: [
@@ -62,7 +62,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
           },
           {
             path: '',
-            component: CollectionPageComponent,
+            component: ThemedCollectionPageComponent,
             pathMatch: 'full',
           }
         ],
diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html
index 5fe1c7e427..9d598a3b69 100644
--- a/src/app/+collection-page/collection-page.component.html
+++ b/src/app/+collection-page/collection-page.component.html
@@ -35,7 +35,7 @@
                   </ds-comcol-page-content>
                 </header>
                 <div class="pl-2">
-                  <ds-dso-page-edit-button [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
+                  <ds-dso-page-edit-button *ngIf="isCollectionAdmin$ | async"  [pageRoute]="collectionPageRoute$ | async" [dso]="collection" [tooltipMsg]="'collection.page.edit'"></ds-dso-page-edit-button>
                 </div>
               </div>
               <section class="comcol-page-browse-section">
diff --git a/src/app/+collection-page/collection-page.component.ts b/src/app/+collection-page/collection-page.component.ts
index 4e1504b593..9eba2e4ab2 100644
--- a/src/app/+collection-page/collection-page.component.ts
+++ b/src/app/+collection-page/collection-page.component.ts
@@ -27,6 +27,8 @@ import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { AuthService } from '../core/auth/auth.service';
 import { PaginationService } from '../core/pagination/pagination.service';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 
 @Component({
@@ -50,6 +52,11 @@ export class CollectionPageComponent implements OnInit {
     sortConfig: SortOptions
   }>;
 
+  /**
+   * Whether the current user is a Community admin
+   */
+  isCollectionAdmin$: Observable<boolean>;
+
   /**
    * Route to the community page
    */
@@ -63,7 +70,7 @@ export class CollectionPageComponent implements OnInit {
     private router: Router,
     private authService: AuthService,
     private paginationService: PaginationService,
-
+    private authorizationDataService: AuthorizationDataService,
   ) {
     this.paginationConfig = new PaginationComponentOptions();
     this.paginationConfig.id = 'cp';
@@ -83,6 +90,7 @@ export class CollectionPageComponent implements OnInit {
       filter((collection: Collection) => hasValue(collection)),
       mergeMap((collection: Collection) => collection.logo)
     );
+    this.isCollectionAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCollectionAdmin);
 
     this.paginationChanges$ = new BehaviorSubject({
       paginationConfig: this.paginationConfig,
diff --git a/src/app/+collection-page/collection-page.module.ts b/src/app/+collection-page/collection-page.module.ts
index 83ba12f037..7946e7a1a4 100644
--- a/src/app/+collection-page/collection-page.module.ts
+++ b/src/app/+collection-page/collection-page.module.ts
@@ -13,6 +13,7 @@ import { CollectionItemMapperComponent } from './collection-item-mapper/collecti
 import { SearchService } from '../core/shared/search/search.service';
 import { StatisticsModule } from '../statistics/statistics.module';
 import { CollectionFormModule } from './collection-form/collection-form.module';
+import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { CollectionFormModule } from './collection-form/collection-form.module';
   ],
   declarations: [
     CollectionPageComponent,
+    ThemedCollectionPageComponent,
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     EditItemTemplatePageComponent,
diff --git a/src/app/+collection-page/create-collection-page/create-collection-page.component.html b/src/app/+collection-page/create-collection-page/create-collection-page.component.html
index 800d285846..5100f606c0 100644
--- a/src/app/+collection-page/create-collection-page/create-collection-page.component.html
+++ b/src/app/+collection-page/create-collection-page/create-collection-page.component.html
@@ -4,5 +4,7 @@
             <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: (parentRD$| async)?.payload.name } }}</h2>
         </div>
     </div>
-    <ds-collection-form (submitForm)="onSubmit($event)" (finish)="navigateToNewPage()"></ds-collection-form>
+    <ds-collection-form (submitForm)="onSubmit($event)"
+                        (back)="navigateToHome()"
+                        (finish)="navigateToNewPage()"></ds-collection-form>
 </div>
diff --git a/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
index cfd09f2bbd..737c40264b 100644
--- a/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
@@ -2,15 +2,18 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate
-                    }}</h2>
+                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
-                <button class="btn btn-primary mr-2" (click)="onConfirm(dso)">
-                    {{'community.delete.confirm' |
-                    translate}}
-                </button>
-                <button class="btn btn-primary" (click)="onCancel(dso)">{{'community.delete.cancel' | translate}}
-                </button>
+                <div class="form-group row">
+                  <div class="col text-right">
+                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)">
+                      <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
+                    </button>
+                    <button class="btn btn-danger mr-2" (click)="onConfirm(dso)">
+                      <i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}
+                    </button>
+                  </div>
+                </div>
             </div>
         </ng-container>
 
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index b4eaf46bfb..9818813e32 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -16,9 +16,7 @@
     </button>
   </div>
 </div>
-<ds-collection-form (submitForm)="onSubmit($event)"
-                    [dso]="(dsoRD$ | async)?.payload"
+<ds-collection-form [dso]="(dsoRD$ | async)?.payload"
+                    (submitForm)="onSubmit($event)"
+                    (back)="navigateToHomePage()"
                     (finish)="navigateToHomePage()"></ds-collection-form>
-<a class="btn btn-danger"
-   [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'collection.edit.delete'
-  | translate}}</a>
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 2c2dbf57dd..06b6246792 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -15,6 +15,7 @@ import { Collection } from '../../../core/shared/collection.model';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
@@ -35,11 +36,13 @@ describe('CollectionMetadataComponent', () => {
       self: { href: 'collection-selflink' }
     }
   });
+  const collectionTemplateHref = 'rest/api/test/collections/template';
 
-  const itemTemplateServiceStub = Object.assign({
-    findByCollectionID: () => createSuccessfulRemoteDataObject$(template),
-    create: () => createSuccessfulRemoteDataObject$(template),
-    deleteByCollectionID: () => observableOf(true)
+  const itemTemplateServiceStub = jasmine.createSpyObj('itemTemplateService', {
+    findByCollectionID: createSuccessfulRemoteDataObject$(template),
+    create: createSuccessfulRemoteDataObject$(template),
+    deleteByCollectionID: observableOf(true),
+    getCollectionEndpoint: observableOf(collectionTemplateHref),
   });
 
   const notificationsService = jasmine.createSpyObj('notificationsService', {
@@ -50,7 +53,7 @@ describe('CollectionMetadataComponent', () => {
     remove: {}
   });
   const requestService = jasmine.createSpyObj('requestService', {
-    removeByHrefSubstring: {}
+    setStaleByHrefSubstring: {}
   });
 
   beforeEach(waitForAsync(() => {
@@ -87,14 +90,14 @@ describe('CollectionMetadataComponent', () => {
     it('should navigate to the collection\'s itemtemplate page', () => {
       spyOn(router, 'navigate');
       comp.addItemTemplate();
-      expect(router.navigate).toHaveBeenCalledWith(['collections', collection.uuid, 'itemtemplate']);
+      expect(router.navigate).toHaveBeenCalledWith([getCollectionItemTemplateRoute(collection.uuid)]);
     });
   });
 
   describe('deleteItemTemplate', () => {
     describe('when delete returns a success', () => {
       beforeEach(() => {
-        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(true));
+        (itemTemplateService.deleteByCollectionID as jasmine.Spy).and.returnValue(observableOf(true));
         comp.deleteItemTemplate();
       });
 
@@ -103,14 +106,15 @@ describe('CollectionMetadataComponent', () => {
       });
 
       it('should reset related object and request cache', () => {
-        expect(objectCache.remove).toHaveBeenCalledWith(template.self);
-        expect(requestService.removeByHrefSubstring).toHaveBeenCalledWith(collection.self);
+        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(collectionTemplateHref);
+        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(template.self);
+        expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(collection.self);
       });
     });
 
     describe('when delete returns a failure', () => {
       beforeEach(() => {
-        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(false));
+        (itemTemplateService.deleteByCollectionID as jasmine.Spy).and.returnValue(observableOf(false));
         comp.deleteItemTemplate();
       });
 
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index e8198f49b7..8cb10775ac 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -7,12 +7,13 @@ import { ItemTemplateDataService } from '../../../core/data/item-template-data.s
 import { combineLatest as combineLatestObservable, Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Item } from '../../../core/shared/item.model';
-import { getRemoteDataPayload, getFirstSucceededRemoteData } from '../../../core/shared/operators';
-import { switchMap, take } from 'rxjs/operators';
+import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { switchMap, tap } from 'rxjs/operators';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { RequestService } from '../../../core/data/request.service';
+import { getCollectionItemTemplateRoute } from '../../collection-page-routing-paths';
 
 /**
  * Component for editing a collection's metadata
@@ -53,8 +54,7 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
    */
   initTemplateItem() {
     this.itemTemplateRD$ = this.dsoRD$.pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
+      getFirstSucceededRemoteDataPayload(),
       switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid))
     );
   }
@@ -64,19 +64,20 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
    */
   addItemTemplate() {
     const collection$ = this.dsoRD$.pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      take(1)
+      getFirstSucceededRemoteDataPayload(),
     );
     const template$ = collection$.pipe(
-      switchMap((collection: Collection) => this.itemTemplateService.create(new Item(), collection.uuid)),
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      take(1)
+      switchMap((collection: Collection) => this.itemTemplateService.create(new Item(), collection.uuid).pipe(
+        getFirstSucceededRemoteDataPayload(),
+      )),
+    );
+    const templateHref$ = collection$.pipe(
+      switchMap((collection) => this.itemTemplateService.getCollectionEndpoint(collection.id)),
     );
 
-    combineLatestObservable(collection$, template$).subscribe(([collection, template]) => {
-      this.router.navigate(['collections', collection.uuid, 'itemtemplate']);
+    combineLatestObservable(collection$, template$, templateHref$).subscribe(([collection, template, templateHref]) => {
+      this.requestService.setStaleByHrefSubstring(templateHref);
+      this.router.navigate([getCollectionItemTemplateRoute(collection.uuid)]);
     });
   }
 
@@ -85,23 +86,30 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
    */
   deleteItemTemplate() {
     const collection$ = this.dsoRD$.pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      take(1)
+      getFirstSucceededRemoteDataPayload(),
     );
     const template$ = collection$.pipe(
-      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid)),
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      take(1)
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid).pipe(
+        getFirstSucceededRemoteDataPayload(),
+      )),
+    );
+    const templateHref$ = collection$.pipe(
+      switchMap((collection) => this.itemTemplateService.getCollectionEndpoint(collection.id)),
     );
 
-    combineLatestObservable(collection$, template$).pipe(
-      switchMap(([collection, template]) => {
-        const success$ = this.itemTemplateService.deleteByCollectionID(template, collection.uuid);
-        this.objectCache.remove(template.self);
-        this.requestService.removeByHrefSubstring(collection.self);
-        return success$;
+    combineLatestObservable(collection$, template$, templateHref$).pipe(
+      switchMap(([collection, template, templateHref]) => {
+        return this.itemTemplateService.deleteByCollectionID(template, collection.uuid).pipe(
+          tap((success: boolean) => {
+            if (success) {
+              this.objectCache.remove(templateHref);
+              this.objectCache.remove(template.self);
+              this.requestService.setStaleByHrefSubstring(template.self);
+              this.requestService.setStaleByHrefSubstring(templateHref);
+              this.requestService.setStaleByHrefSubstring(collection.self);
+            }
+          })
+        );
       })
     ).subscribe((success: boolean) => {
       if (success) {
diff --git a/src/app/+collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
index da26e2b451..401065a661 100644
--- a/src/app/+collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-roles/collection-roles.component.spec.ts
@@ -11,6 +11,7 @@ import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { RequestService } from '../../../core/data/request.service';
 import { RouterTestingModule } from '@angular/router/testing';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('CollectionRolesComponent', () => {
 
@@ -67,6 +68,7 @@ describe('CollectionRolesComponent', () => {
         SharedModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot(),
+        NoopAnimationsModule
       ],
       declarations: [
         CollectionRolesComponent,
diff --git a/src/app/+collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/+collection-page/edit-collection-page/collection-source/collection-source.component.html
index 4192922c7e..de7f0b4708 100644
--- a/src/app/+collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/+collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -31,6 +31,7 @@
          [formModel]="formModel"
          [formLayout]="formLayout"
          [displaySubmit]="false"
+         [displayCancel]="false"
          (dfChange)="onChange($event)"
          (submitForm)="onSubmit()"
          (cancel)="onCancel()"></ds-form>
diff --git a/src/app/+collection-page/edit-collection-page/edit-collection-page.component.spec.ts b/src/app/+collection-page/edit-collection-page/edit-collection-page.component.spec.ts
index 37adf4dece..00f05f50c0 100644
--- a/src/app/+collection-page/edit-collection-page/edit-collection-page.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/edit-collection-page.component.spec.ts
@@ -18,7 +18,14 @@ describe('EditCollectionPageComponent', () => {
       dso: { payload: {} }
     }),
     routeConfig: {
-      children: []
+      children: [
+        {
+          path: 'mockUrl',
+          data: {
+            hideReturnButton: false
+          }
+        }
+      ]
     },
     snapshot: {
       firstChild: {
diff --git a/src/app/+collection-page/edit-collection-page/edit-collection-page.routing.module.ts b/src/app/+collection-page/edit-collection-page/edit-collection-page.routing.module.ts
index e41f0ebda4..92fc6efeff 100644
--- a/src/app/+collection-page/edit-collection-page/edit-collection-page.routing.module.ts
+++ b/src/app/+collection-page/edit-collection-page/edit-collection-page.routing.module.ts
@@ -12,6 +12,7 @@ import { ResourcePolicyTargetResolver } from '../../shared/resource-policies/res
 import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/create/resource-policy-create.component';
 import { ResourcePolicyResolver } from '../../shared/resource-policies/resolvers/resource-policy.resolver';
 import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit/resource-policy-edit.component';
+import { CollectionAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard';
 
 /**
  * Routing module that handles the routing for the Edit Collection page administrator functionality
@@ -26,6 +27,7 @@ import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit
         },
         data: { breadcrumbKey: 'collection.edit' },
         component: EditCollectionPageComponent,
+        canActivate: [CollectionAdministratorGuard],
         children: [
           {
             path: '',
@@ -91,7 +93,7 @@ import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit
           {
             path: 'mapper',
             component: CollectionItemMapperComponent,
-            data: { title: 'collection.edit.tabs.item-mapper.title', showBreadcrumbs: true }
+            data: { title: 'collection.edit.tabs.item-mapper.title', hideReturnButton: true, showBreadcrumbs: true }
           },
         ]
       }
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
index 5b0f83fa22..f8c5c92e96 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -1,9 +1,13 @@
 <div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
   <div class="row">
-    <div class="col-12">
-      <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
-      <ds-item-metadata [updateService]="itemTemplateService"></ds-item-metadata>
-      <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
+    <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
+      <ng-container *ngIf="itemRD?.hasSucceeded">
+        <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
+        <ds-item-metadata [updateService]="itemTemplateService" [item]="itemRD?.payload"></ds-item-metadata>
+        <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
+      </ng-container>
+      <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
+      <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
     </div>
   </div>
 </div>
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
index 81bb7ea867..72b776dd7d 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -9,7 +9,7 @@ import { ActivatedRoute } from '@angular/router';
 import { of as observableOf } from 'rxjs';
 import { Collection } from '../../core/shared/collection.model';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { getCollectionEditRoute } from '../collection-page-routing-paths';
 
 describe('EditItemTemplatePageComponent', () => {
@@ -24,11 +24,14 @@ describe('EditItemTemplatePageComponent', () => {
       id: 'collection-id',
       name: 'Fake Collection'
     });
+    itemTemplateService = jasmine.createSpyObj('itemTemplateService', {
+      findByCollectionID: createSuccessfulRemoteDataObject$({})
+    });
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
       declarations: [EditItemTemplatePageComponent],
       providers: [
-        { provide: ItemTemplateDataService, useValue: {} },
+        { provide: ItemTemplateDataService, useValue: itemTemplateService },
         { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -38,7 +41,6 @@ describe('EditItemTemplatePageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(EditItemTemplatePageComponent);
     comp = fixture.componentInstance;
-    itemTemplateService = (comp as any).itemTemplateService;
     fixture.detectChanges();
   });
 
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
index 077623f970..5d29eb7f73 100644
--- a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -3,9 +3,12 @@ import { Observable } from 'rxjs';
 import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
 import { ActivatedRoute } from '@angular/router';
-import { first, map } from 'rxjs/operators';
+import { first, map, switchMap } from 'rxjs/operators';
 import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
 import { getCollectionEditRoute } from '../collection-page-routing-paths';
+import { Item } from '../../core/shared/item.model';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { AlertType } from '../../shared/alert/aletr-type';
 
 @Component({
   selector: 'ds-edit-item-template-page',
@@ -21,12 +24,27 @@ export class EditItemTemplatePageComponent implements OnInit {
    */
   collectionRD$: Observable<RemoteData<Collection>>;
 
+  /**
+   * The template item
+   */
+  itemRD$: Observable<RemoteData<Item>>;
+
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  AlertTypeEnum = AlertType;
+
   constructor(protected route: ActivatedRoute,
               public itemTemplateService: ItemTemplateDataService) {
   }
 
   ngOnInit(): void {
     this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.dso));
+    this.itemRD$ = this.collectionRD$.pipe(
+      getFirstSucceededRemoteDataPayload(),
+      switchMap((collection) => this.itemTemplateService.findByCollectionID(collection.id)),
+    );
   }
 
   /**
diff --git a/src/app/+collection-page/themed-collection-page.component.ts b/src/app/+collection-page/themed-collection-page.component.ts
new file mode 100644
index 0000000000..4ad9ed87e3
--- /dev/null
+++ b/src/app/+collection-page/themed-collection-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CollectionPageComponent } from './collection-page.component';
+
+/**
+ * Themed wrapper for CollectionPageComponent
+ */
+@Component({
+  selector: 'ds-themed-community-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedCollectionPageComponent extends ThemedComponent<CollectionPageComponent> {
+  protected getComponentName(): string {
+    return 'CollectionPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+collection-page/collection-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./collection-page.component`);
+  }
+
+}
diff --git a/src/app/+community-page/community-form/community-form.component.ts b/src/app/+community-page/community-form/community-form.component.ts
index e9bd2f66c8..59480e8f68 100644
--- a/src/app/+community-page/community-form/community-form.component.ts
+++ b/src/app/+community-page/community-form/community-form.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@ng-dynamic-forms/core';
 import { Community } from '../../core/shared/community.model';
 import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
-import { Location } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CommunityDataService } from '../../core/data/community-data.service';
@@ -68,14 +67,13 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
     }),
   ];
 
-  public constructor(protected location: Location,
-                     protected formService: DynamicFormService,
+  public constructor(protected formService: DynamicFormService,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
                      protected authService: AuthService,
                      protected dsoService: CommunityDataService,
                      protected requestService: RequestService,
                      protected objectCache: ObjectCacheService) {
-    super(location, formService, translate, notificationsService, authService, requestService, objectCache);
+    super(formService, translate, notificationsService, authService, requestService, objectCache);
   }
 }
diff --git a/src/app/+community-page/community-page-routing.module.ts b/src/app/+community-page/community-page-routing.module.ts
index 571bff7413..ad1b1fd2f2 100644
--- a/src/app/+community-page/community-page-routing.module.ts
+++ b/src/app/+community-page/community-page-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { CommunityPageComponent } from './community-page.component';
 import { CommunityPageResolver } from './community-page.resolver';
 import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
@@ -14,6 +13,7 @@ import { COMMUNITY_EDIT_PATH, COMMUNITY_CREATE_PATH } from './community-page-rou
 import { CommunityPageAdministratorGuard } from './community-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedCommunityPageComponent } from './themed-community-page.component';
 
 @NgModule({
   imports: [
@@ -45,7 +45,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
           },
           {
             path: '',
-            component: CommunityPageComponent,
+            component: ThemedCommunityPageComponent,
             pathMatch: 'full',
           }
         ],
diff --git a/src/app/+community-page/community-page.component.html b/src/app/+community-page/community-page.component.html
index 1b4f90a52b..cf7282eb4b 100644
--- a/src/app/+community-page/community-page.component.html
+++ b/src/app/+community-page/community-page.component.html
@@ -21,7 +21,7 @@
           </ds-comcol-page-content>
         </header>
         <div class="pl-2">
-          <ds-dso-page-edit-button [pageRoute]="communityPageRoute$ | async" [dso]="communityPayload" [tooltipMsg]="'community.page.edit'"></ds-dso-page-edit-button>
+          <ds-dso-page-edit-button *ngIf="isCommunityAdmin$ | async" [pageRoute]="communityPageRoute$ | async" [dso]="communityPayload" [tooltipMsg]="'community.page.edit'"></ds-dso-page-edit-button>
         </div>
       </div>
       <section class="comcol-page-browse-section">
diff --git a/src/app/+community-page/community-page.component.ts b/src/app/+community-page/community-page.component.ts
index 7ba8dfc6c0..70259a599b 100644
--- a/src/app/+community-page/community-page.component.ts
+++ b/src/app/+community-page/community-page.component.ts
@@ -15,6 +15,8 @@ import { fadeInOut } from '../shared/animations/fade';
 import { hasValue } from '../shared/empty.util';
 import { getAllSucceededRemoteDataPayload, redirectOn4xx } from '../core/shared/operators';
 import { AuthService } from '../core/auth/auth.service';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCommunityPageRoute } from './community-page-routing-paths';
 
 @Component({
@@ -33,6 +35,11 @@ export class CommunityPageComponent implements OnInit {
    */
   communityRD$: Observable<RemoteData<Community>>;
 
+  /**
+   * Whether the current user is a Community admin
+   */
+  isCommunityAdmin$: Observable<boolean>;
+
   /**
    * The logo of this community
    */
@@ -49,6 +56,7 @@ export class CommunityPageComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService,
+    private authorizationDataService: AuthorizationDataService
   ) {
 
   }
@@ -66,6 +74,6 @@ export class CommunityPageComponent implements OnInit {
       getAllSucceededRemoteDataPayload(),
       map((community) => getCommunityPageRoute(community.id))
     );
+    this.isCommunityAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCommunityAdmin);
   }
-
 }
diff --git a/src/app/+community-page/community-page.module.ts b/src/app/+community-page/community-page.module.ts
index a9eaef033d..3ae75f166c 100644
--- a/src/app/+community-page/community-page.module.ts
+++ b/src/app/+community-page/community-page.module.ts
@@ -11,6 +11,14 @@ import { CreateCommunityPageComponent } from './create-community-page/create-com
 import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
 import { StatisticsModule } from '../statistics/statistics.module';
 import { CommunityFormModule } from './community-form/community-form.module';
+import { ThemedCommunityPageComponent } from './themed-community-page.component';
+
+const DECLARATIONS = [CommunityPageComponent,
+  ThemedCommunityPageComponent,
+  CommunityPageSubCollectionListComponent,
+  CommunityPageSubCommunityListComponent,
+  CreateCommunityPageComponent,
+  DeleteCommunityPageComponent];
 
 @NgModule({
   imports: [
@@ -21,11 +29,10 @@ import { CommunityFormModule } from './community-form/community-form.module';
     CommunityFormModule
   ],
   declarations: [
-    CommunityPageComponent,
-    CommunityPageSubCollectionListComponent,
-    CommunityPageSubCommunityListComponent,
-    CreateCommunityPageComponent,
-    DeleteCommunityPageComponent
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS
   ]
 })
 
diff --git a/src/app/+community-page/create-community-page/create-community-page.component.html b/src/app/+community-page/create-community-page/create-community-page.component.html
index 4f75771f6d..71a580b0aa 100644
--- a/src/app/+community-page/create-community-page/create-community-page.component.html
+++ b/src/app/+community-page/create-community-page/create-community-page.component.html
@@ -7,5 +7,7 @@
       </ng-container>
     </div>
   </div>
-  <ds-community-form (submitForm)="onSubmit($event)" (finish)="navigateToNewPage()"></ds-community-form>
+  <ds-community-form (submitForm)="onSubmit($event)"
+                     (back)="navigateToHome()"
+                     (finish)="navigateToNewPage()"></ds-community-form>
 </div>
diff --git a/src/app/+community-page/delete-community-page/delete-community-page.component.html b/src/app/+community-page/delete-community-page/delete-community-page.component.html
index cfd09f2bbd..85aa8b1bce 100644
--- a/src/app/+community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/+community-page/delete-community-page/delete-community-page.component.html
@@ -2,18 +2,20 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate
-                    }}</h2>
+                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
-                <button class="btn btn-primary mr-2" (click)="onConfirm(dso)">
-                    {{'community.delete.confirm' |
-                    translate}}
-                </button>
-                <button class="btn btn-primary" (click)="onCancel(dso)">{{'community.delete.cancel' | translate}}
-                </button>
+                <div class="form-group row">
+                    <div class="col text-right">
+                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)">
+                            <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
+                        </button>
+                        <button class="btn btn-danger mr-2" (click)="onConfirm(dso)">
+                            <i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}
+                        </button>
+                    </div>
+                </div>
             </div>
         </ng-container>
-
     </div>
 
 </div>
diff --git a/src/app/+community-page/edit-community-page/community-metadata/community-metadata.component.html b/src/app/+community-page/edit-community-page/community-metadata/community-metadata.component.html
index 6b441dbabd..2ca5b768e4 100644
--- a/src/app/+community-page/edit-community-page/community-metadata/community-metadata.component.html
+++ b/src/app/+community-page/edit-community-page/community-metadata/community-metadata.component.html
@@ -1,6 +1,5 @@
-<ds-community-form (submitForm)="onSubmit($event)"
-                   [dso]="(dsoRD$ | async)?.payload"
+<ds-community-form [dso]="(dsoRD$ | async)?.payload"
+                   (submitForm)="onSubmit($event)"
+                   (back)="navigateToHomePage()"
                    (finish)="navigateToHomePage()"></ds-community-form>
-<a class="btn btn-danger"
-   [routerLink]="'/communities/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'community.edit.delete'
-  | translate}}</a>
+
diff --git a/src/app/+community-page/edit-community-page/community-roles/community-roles.component.spec.ts b/src/app/+community-page/edit-community-page/community-roles/community-roles.component.spec.ts
index b5229143ff..b61705126c 100644
--- a/src/app/+community-page/edit-community-page/community-roles/community-roles.component.spec.ts
+++ b/src/app/+community-page/edit-community-page/community-roles/community-roles.component.spec.ts
@@ -11,6 +11,7 @@ import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { SharedModule } from '../../../shared/shared.module';
 import { RouterTestingModule } from '@angular/router/testing';
 import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('CommunityRolesComponent', () => {
 
@@ -52,6 +53,7 @@ describe('CommunityRolesComponent', () => {
         SharedModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot(),
+        NoopAnimationsModule
       ],
       declarations: [
         CommunityRolesComponent,
diff --git a/src/app/+community-page/edit-community-page/edit-community-page.component.spec.ts b/src/app/+community-page/edit-community-page/edit-community-page.component.spec.ts
index bea310c8fb..3a4c3351c3 100644
--- a/src/app/+community-page/edit-community-page/edit-community-page.component.spec.ts
+++ b/src/app/+community-page/edit-community-page/edit-community-page.component.spec.ts
@@ -18,7 +18,14 @@ describe('EditCommunityPageComponent', () => {
       dso: { payload: {} }
     }),
     routeConfig: {
-      children: []
+      children: [
+        {
+          path: 'mockUrl',
+          data: {
+            hideReturnButton: false
+          }
+        }
+      ]
     },
     snapshot: {
       firstChild: {
diff --git a/src/app/+community-page/edit-community-page/edit-community-page.routing.module.ts b/src/app/+community-page/edit-community-page/edit-community-page.routing.module.ts
index 440fa01a30..faebb1ef2e 100644
--- a/src/app/+community-page/edit-community-page/edit-community-page.routing.module.ts
+++ b/src/app/+community-page/edit-community-page/edit-community-page.routing.module.ts
@@ -10,6 +10,7 @@ import { ResourcePolicyTargetResolver } from '../../shared/resource-policies/res
 import { ResourcePolicyCreateComponent } from '../../shared/resource-policies/create/resource-policy-create.component';
 import { ResourcePolicyResolver } from '../../shared/resource-policies/resolvers/resource-policy.resolver';
 import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit/resource-policy-edit.component';
+import { CommunityAdministratorGuard } from '../../core/data/feature-authorization/feature-authorization-guard/community-administrator.guard';
 
 /**
  * Routing module that handles the routing for the Edit Community page administrator functionality
@@ -24,6 +25,7 @@ import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit
         },
         data: { breadcrumbKey: 'community.edit' },
         component: EditCommunityPageComponent,
+        canActivate: [CommunityAdministratorGuard],
         children: [
           {
             path: '',
diff --git a/src/app/+community-page/themed-community-page.component.ts b/src/app/+community-page/themed-community-page.component.ts
new file mode 100644
index 0000000000..97dd59821c
--- /dev/null
+++ b/src/app/+community-page/themed-community-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityPageComponent } from './community-page.component';
+
+/**
+ * Themed wrapper for CommunityPageComponent
+ */
+@Component({
+  selector: 'ds-themed-community-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityPageComponent extends ThemedComponent<CommunityPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+community-page/community-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page.component`);
+  }
+
+}
diff --git a/src/app/+home-page/home-news/home-news.component.html b/src/app/+home-page/home-news/home-news.component.html
index 28e10c5804..812c38f798 100644
--- a/src/app/+home-page/home-news/home-news.component.html
+++ b/src/app/+home-page/home-news/home-news.component.html
@@ -1,7 +1,6 @@
 <div class="jumbotron jumbotron-fluid">
   <div class="container">
     <div class="d-flex flex-wrap">
-      <img class="mr-4 dspace-logo" src="assets/images/dspace-logo.svg" alt="" />
       <div>
         <h1 class="display-3">Welcome to the DSpace 7 Preview</h1>
         <p class="lead">DSpace is the world leading open source repository platform that enables organisations to:</p>
diff --git a/src/app/+home-page/home-news/home-news.component.scss b/src/app/+home-page/home-news/home-news.component.scss
index e58dd08ccf..9ab24daa25 100644
--- a/src/app/+home-page/home-news/home-news.component.scss
+++ b/src/app/+home-page/home-news/home-news.component.scss
@@ -8,7 +8,14 @@
     word-break: break-word;
 }
 
-.dspace-logo {
-    height: 110px;
-    width: 110px;
+.jumbotron {
+  background-color: var(--ds-home-news-background-color);
+}
+
+a {
+  color: var(--ds-home-news-link-color);
+
+  @include hover {
+    color: var(--ds-home-news-link-hover-color);
+  }
 }
diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html
index 5902fa30af..0f7db182f0 100644
--- a/src/app/+home-page/home-page.component.html
+++ b/src/app/+home-page/home-page.component.html
@@ -3,6 +3,6 @@
   <ng-container *ngIf="(site$ | async) as site">
     <ds-view-tracker [object]="site"></ds-view-tracker>
   </ng-container>
-  <ds-search-form [inPlaceSearch]="false"></ds-search-form>
+  <ds-search-form [inPlaceSearch]="false" [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-search-form>
   <ds-top-level-community-list></ds-top-level-community-list>
 </div>
diff --git a/src/app/+import-external-page/import-external-routing.module.ts b/src/app/+import-external-page/import-external-routing.module.ts
index 91cdbf9877..e5c6da5b21 100644
--- a/src/app/+import-external-page/import-external-routing.module.ts
+++ b/src/app/+import-external-page/import-external-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionImportExternalComponent } from '../submission/import-external/submission-import-external.component';
+import { ThemedSubmissionImportExternalComponent } from '../submission/import-external/themed-submission-import-external.component';
 
 @NgModule({
   imports: [
@@ -9,7 +9,7 @@ import { SubmissionImportExternalComponent } from '../submission/import-external
       {
         canActivate: [ AuthenticatedGuard ],
         path: '',
-        component: SubmissionImportExternalComponent,
+        component: ThemedSubmissionImportExternalComponent,
         pathMatch: 'full',
         data: {
           title: 'submission.import-external.page.title'
diff --git a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
index c6a8d1827c..17ec0ff133 100644
--- a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
+++ b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import {
   FieldUpdate,
   FieldUpdates
@@ -30,7 +30,7 @@ export class AbstractItemUpdateComponent extends AbstractTrackableComponent impl
   /**
    * The item to display the edit page for
    */
-  item: Item;
+  @Input() item: Item;
   /**
    * The current values and updates for all this item's fields
    * Should be initialized in the initializeUpdates method of the child component
@@ -63,22 +63,24 @@ export class AbstractItemUpdateComponent extends AbstractTrackableComponent impl
    * Initialize common properties between item-update components
    */
   ngOnInit(): void {
-    this.itemUpdateSubscription = observableCombineLatest([this.route.data, this.route.parent.data]).pipe(
-      map(([data, parentData]: [Data, Data]) => Object.assign({}, data, parentData)),
-      map((data: any) => data.dso),
-      tap((rd: RemoteData<Item>) => {
-        this.item = rd.payload;
-      }),
-      switchMap((rd: RemoteData<Item>) => {
-        return this.itemService.findByHref(rd.payload._links.self.href, true, true, ...ITEM_PAGE_LINKS_TO_FOLLOW);
-      }),
-      getAllSucceededRemoteData()
-    ).subscribe((rd: RemoteData<Item>) => {
-      this.item = rd.payload;
-      this.itemPageRoute = getItemPageRoute(this.item);
-      this.postItemInit();
-      this.initializeUpdates();
-    });
+    if (hasValue(this.item)) {
+      this.setItem(this.item);
+    } else {
+      // The item wasn't provided through an input, retrieve it from the route instead.
+      this.itemUpdateSubscription = observableCombineLatest([this.route.data, this.route.parent.data]).pipe(
+        map(([data, parentData]: [Data, Data]) => Object.assign({}, data, parentData)),
+        map((data: any) => data.dso),
+        tap((rd: RemoteData<Item>) => {
+          this.item = rd.payload;
+        }),
+        switchMap((rd: RemoteData<Item>) => {
+          return this.itemService.findByHref(rd.payload._links.self.href, true, true, ...ITEM_PAGE_LINKS_TO_FOLLOW);
+        }),
+        getAllSucceededRemoteData()
+      ).subscribe((rd: RemoteData<Item>) => {
+        this.setItem(rd.payload);
+      });
+    }
 
     this.discardTimeOut = environment.item.edit.undoTimeout;
     this.url = this.router.url;
@@ -97,6 +99,13 @@ export class AbstractItemUpdateComponent extends AbstractTrackableComponent impl
     this.initializeUpdates();
   }
 
+  setItem(item: Item) {
+    this.item = item;
+    this.itemPageRoute = getItemPageRoute(this.item);
+    this.postItemInit();
+    this.initializeUpdates();
+  }
+
   ngOnDestroy() {
     if (hasValue(this.itemUpdateSubscription)) {
       this.itemUpdateSubscription.unsubscribe();
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.component.html b/src/app/+item-page/edit-item-page/edit-item-page.component.html
index ca1c809cd9..28cc4277dc 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/+item-page/edit-item-page/edit-item-page.component.html
@@ -5,18 +5,29 @@
             <div class="pt-2">
                 <ul class="nav nav-tabs justify-content-start">
                     <li *ngFor="let page of pages" class="nav-item">
-                        <a class="nav-link"
-                           [ngClass]="{'active' : page === currentPage}"
-                           [routerLink]="['./' + page]">
-                            {{'item.edit.tabs.' + page + '.head' | translate}}
+                        <a *ngIf="(page.enabled | async)"
+                           class="nav-link"
+                           [ngClass]="{'active' : page.page === currentPage}"
+                           [routerLink]="['./' + page.page]">
+                            {{'item.edit.tabs.' + page.page + '.head' | translate}}
                         </a>
+                        <span [ngbTooltip]="'item.edit.tabs.disabled.tooltip' | translate">
+                            <button *ngIf="!(page.enabled | async)"
+                                 class="nav-link disabled">
+                                {{'item.edit.tabs.' + page.page + '.head' | translate}}
+                            </button>
+                        </span>
                     </li>
                 </ul>
                 <div class="tab-pane active">
                     <div class="mb-4">
                         <router-outlet></router-outlet>
                     </div>
-                    <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" class="btn btn-outline-secondary">Cancel</a>
+                    <div class="button-row bottom">
+                      <div class="text-right">
+                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary mr-1"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
+                      </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.component.spec.ts b/src/app/+item-page/edit-item-page/edit-item-page.component.spec.ts
new file mode 100644
index 0000000000..cff9104c01
--- /dev/null
+++ b/src/app/+item-page/edit-item-page/edit-item-page.component.spec.ts
@@ -0,0 +1,107 @@
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { EditItemPageComponent } from './edit-item-page.component';
+import { Observable, of as observableOf } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+import { Item } from '../../core/shared/item.model';
+
+describe('ItemPageComponent', () => {
+  let comp: EditItemPageComponent;
+  let fixture: ComponentFixture<EditItemPageComponent>;
+
+  class AcceptAllGuard implements CanActivate {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      return observableOf(true);
+    }
+  }
+
+  // tslint:disable-next-line:max-classes-per-file
+  class AcceptNoneGuard implements CanActivate {
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      console.log('BLA');
+      return observableOf(false);
+    }
+  }
+
+  const accesiblePages = ['accessible'];
+  const inaccesiblePages = ['inaccessible', 'inaccessibleDoubleGuard'];
+  const mockRoute = {
+    snapshot: {
+      firstChild: {
+        routeConfig: {
+          path: accesiblePages[0]
+        }
+      },
+      routerState: {
+        snapshot: undefined
+      }
+    },
+    routeConfig: {
+      children: [
+        {
+          path: accesiblePages[0],
+          canActivate: [AcceptAllGuard]
+        }, {
+          path: inaccesiblePages[0],
+          canActivate: [AcceptNoneGuard]
+        }, {
+          path: inaccesiblePages[1],
+          canActivate: [AcceptAllGuard, AcceptNoneGuard]
+        },
+      ]
+    },
+    data: observableOf({dso: createSuccessfulRemoteDataObject(new Item())})
+  };
+
+  const mockRouter = {
+    routerState: {
+      snapshot: undefined
+    },
+    events: observableOf(undefined)
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [EditItemPageComponent],
+      providers: [
+        { provide: ActivatedRoute, useValue: mockRoute },
+        { provide: Router, useValue: mockRouter },
+        AcceptAllGuard,
+        AcceptNoneGuard,
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(EditItemPageComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+
+  beforeEach(waitForAsync(() => {
+    fixture = TestBed.createComponent(EditItemPageComponent);
+    comp = fixture.componentInstance;
+    spyOn((comp as any).injector, 'get').and.callFake((a) => new a());
+    fixture.detectChanges();
+  }));
+
+  describe('ngOnInit', () => {
+    it('should enable tabs that the user can activate', fakeAsync(() => {
+      const enabledItems = fixture.debugElement.queryAll(By.css('a.nav-link'));
+      expect(enabledItems.length).toBe(accesiblePages.length);
+    }));
+
+    it('should disable tabs that the user can not activate', () => {
+      const disabledItems = fixture.debugElement.queryAll(By.css('button.nav-link.disabled'));
+      expect(disabledItems.length).toBe(inaccesiblePages.length);
+    });
+  });
+});
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.component.ts b/src/app/+item-page/edit-item-page/edit-item-page.component.ts
index ec7cdb022d..652b85916e 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.component.ts
+++ b/src/app/+item-page/edit-item-page/edit-item-page.component.ts
@@ -1,12 +1,13 @@
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
+import { ActivatedRoute, CanActivate, Route, Router } from '@angular/router';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
-import { Observable } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { isNotEmpty } from '../../shared/empty.util';
 import { getItemPageRoute } from '../item-page-routing-paths';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
 
 @Component({
   selector: 'ds-edit-item-page',
@@ -35,18 +36,29 @@ export class EditItemPageComponent implements OnInit {
   /**
    * All possible page outlet strings
    */
-  pages: string[];
+  pages: { page: string, enabled: Observable<boolean> }[];
 
-  constructor(private route: ActivatedRoute, private router: Router) {
-    this.router.events.subscribe(() => {
-      this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
-    });
+  constructor(private route: ActivatedRoute, private router: Router, private injector: Injector) {
+    this.router.events.subscribe(() => this.initPageParamsByRoute());
   }
 
   ngOnInit(): void {
+    this.initPageParamsByRoute();
     this.pages = this.route.routeConfig.children
-      .map((child: any) => child.path)
-      .filter((path: string) => isNotEmpty(path)); // ignore reroutes
+      .filter((child: Route) => isNotEmpty(child.path))
+      .map((child: Route) => {
+        let enabled = observableOf(true);
+        if (isNotEmpty(child.canActivate)) {
+          enabled = observableCombineLatest(child.canActivate.map((guardConstructor: GenericConstructor<CanActivate>) => {
+              const guard: CanActivate = this.injector.get<CanActivate>(guardConstructor);
+              return guard.canActivate(this.route.snapshot, this.router.routerState.snapshot);
+            })
+          ).pipe(
+            map((canActivateOutcomes: any[]) => canActivateOutcomes.every((e) => e === true))
+          );
+        }
+        return { page: child.path, enabled: enabled };
+      }); // ignore reroutes
     this.itemRD$ = this.route.data.pipe(map((data) => data.dso));
   }
 
@@ -57,4 +69,11 @@ export class EditItemPageComponent implements OnInit {
   getItemPage(item: Item): string {
     return getItemPageRoute(item);
   }
+
+  /**
+   * Set page params depending on the route
+   */
+  initPageParamsByRoute() {
+    this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
+  }
 }
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts b/src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts
index da10d33add..b7d650d8c3 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts
+++ b/src/app/+item-page/edit-item-page/edit-item-page.routing.module.ts
@@ -22,15 +22,17 @@ import { ResourcePolicyEditComponent } from '../../shared/resource-policies/edit
 import { I18nBreadcrumbsService } from '../../core/breadcrumbs/i18n-breadcrumbs.service';
 import {
   ITEM_EDIT_AUTHORIZATIONS_PATH,
-  ITEM_EDIT_MOVE_PATH,
   ITEM_EDIT_DELETE_PATH,
-  ITEM_EDIT_PUBLIC_PATH,
+  ITEM_EDIT_MOVE_PATH,
   ITEM_EDIT_PRIVATE_PATH,
+  ITEM_EDIT_PUBLIC_PATH,
   ITEM_EDIT_REINSTATE_PATH,
   ITEM_EDIT_WITHDRAW_PATH
 } from './edit-item-page.routing-paths';
 import { ItemPageReinstateGuard } from './item-page-reinstate.guard';
 import { ItemPageWithdrawGuard } from './item-page-withdraw.guard';
+import { ItemPageEditMetadataGuard } from '../item-page-edit-metadata.guard';
+import { ItemPageAdministratorGuard } from '../item-page-administrator.guard';
 
 /**
  * Routing module that handles the routing for the Edit Item page administrator functionality
@@ -57,22 +59,26 @@ import { ItemPageWithdrawGuard } from './item-page-withdraw.guard';
               {
                 path: 'status',
                 component: ItemStatusComponent,
-                data: { title: 'item.edit.tabs.status.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.status.title', showBreadcrumbs: true },
+                canActivate: [ItemPageAdministratorGuard]
               },
               {
                 path: 'bitstreams',
                 component: ItemBitstreamsComponent,
-                data: { title: 'item.edit.tabs.bitstreams.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.bitstreams.title', showBreadcrumbs: true },
+                canActivate: [ItemPageAdministratorGuard]
               },
               {
                 path: 'metadata',
                 component: ItemMetadataComponent,
-                data: { title: 'item.edit.tabs.metadata.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.metadata.title', showBreadcrumbs: true },
+                canActivate: [ItemPageEditMetadataGuard]
               },
               {
                 path: 'relationships',
                 component: ItemRelationshipsComponent,
-                data: { title: 'item.edit.tabs.relationships.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.relationships.title', showBreadcrumbs: true },
+                canActivate: [ItemPageEditMetadataGuard]
               },
               /* TODO - uncomment & fix when view page exists
               {
@@ -89,12 +95,14 @@ import { ItemPageWithdrawGuard } from './item-page-withdraw.guard';
               {
                 path: 'versionhistory',
                 component: ItemVersionHistoryComponent,
-                data: { title: 'item.edit.tabs.versionhistory.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.versionhistory.title', showBreadcrumbs: true },
+                canActivate: [ItemPageAdministratorGuard]
               },
               {
                 path: 'mapper',
                 component: ItemCollectionMapperComponent,
-                data: { title: 'item.edit.tabs.item-mapper.title', showBreadcrumbs: true }
+                data: { title: 'item.edit.tabs.item-mapper.title', showBreadcrumbs: true },
+                canActivate: [ItemPageAdministratorGuard]
               }
             ]
           },
@@ -165,7 +173,9 @@ import { ItemPageWithdrawGuard } from './item-page-withdraw.guard';
     ResourcePolicyResolver,
     ResourcePolicyTargetResolver,
     ItemPageReinstateGuard,
-    ItemPageWithdrawGuard
+    ItemPageWithdrawGuard,
+    ItemPageAdministratorGuard,
+    ItemPageEditMetadataGuard,
   ]
 })
 export class EditItemPageRoutingModule {
diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 9ab2029896..315498378a 100644
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -5,22 +5,22 @@
             class="fas fa-upload"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
     </button>
-    <button class="btn btn-danger mr-1" *ngIf="!(isReinstatable() | async)"
-            [disabled]="!(hasChanges() | async) || submitting"
-            (click)="discard()"><i
-            class="fas fa-times"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
-    </button>
     <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
             (click)="reinstate()"><i
             class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
     </button>
-    <button class="btn btn-primary" [disabled]="!(hasChanges() | async) || submitting"
+    <button class="btn btn-primary mr-1" [disabled]="!(hasChanges() | async) || submitting"
             (click)="submit()"><i
             class="fas fa-save"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
     </button>
+    <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+            [disabled]="!(hasChanges() | async) || submitting"
+            (click)="discard()"><i
+            class="fas fa-times"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
+    </button>
   </div>
 
   <div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4">
@@ -48,12 +48,6 @@
 
   <div class="button-row bottom">
     <div class="mt-4 float-right">
-      <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-              [disabled]="!(hasChanges() | async) || submitting"
-              (click)="discard()"><i
-        class="fas fa-times"></i>
-        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
-      </button>
       <button class="btn btn-warning" *ngIf="isReinstatable() | async"
               (click)="reinstate()"><i
         class="fas fa-undo-alt"></i>
@@ -64,6 +58,12 @@
         class="fas fa-save"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
       </button>
+      <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+              [disabled]="!(hasChanges() | async) || submitting"
+              (click)="discard()"><i
+        class="fas fa-times"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html b/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
index a65111eaec..589981d3c9 100644
--- a/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
+++ b/src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
@@ -29,6 +29,7 @@
                                 [query]="(searchOptions$ | async)?.query"
                                 [currentUrl]="'./'"
                                 [inPlaceSearch]="true"
+                                [searchPlaceholder]="'item.edit.item-mapper.search-form.placeholder' | translate"
                                 (submitSearch)="performedSearch = true">
                 </ds-search-form>
               </div>
diff --git a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
index 116a0feb21..ea78767df5 100644
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
@@ -173,6 +173,19 @@ describe('ItemDeleteComponent', () => {
         .toHaveBeenCalledWith(mockItem.id, types.filter((type) => typesSelection[type]).map((type) => type.id));
       expect(comp.notify).toHaveBeenCalled();
     });
+
+    it('should call delete function from the ItemDataService with empty types', () => {
+
+      spyOn(comp, 'notify');
+      jasmine.getEnv().allowRespy(true);
+      spyOn(entityTypeService, 'getEntityTypeRelationships').and.returnValue([]);
+      comp.ngOnInit();
+
+      comp.performAction();
+
+      expect(mockItemDataService.delete).toHaveBeenCalledWith(mockItem.id, []);
+      expect(comp.notify).toHaveBeenCalled();
+    });
   });
   describe('notify', () => {
     it('should navigate to the homepage on successful deletion of the item', () => {
diff --git a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts
index 366b22bec7..0249422c8e 100644
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
+import {defaultIfEmpty, filter, map, switchMap, take} from 'rxjs/operators';
 import { AbstractSimpleItemActionComponent } from '../simple-item-action/abstract-simple-item-action.component';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import {
@@ -112,7 +112,7 @@ export class ItemDeleteComponent
     super.ngOnInit();
     this.url = this.router.url;
 
-    const label = this.item.firstMetadataValue('relationship.type');
+    const label = this.item.firstMetadataValue('dspace.entity.type');
     if (label !== undefined) {
       this.types$ = this.entityTypeService.getEntityTypeByLabel(label).pipe(
         getFirstSucceededRemoteData(),
@@ -121,8 +121,11 @@ export class ItemDeleteComponent
         getFirstSucceededRemoteData(),
         getRemoteDataPayload(),
         map((relationshipTypes) => relationshipTypes.page),
-        switchMap((types) =>
-          combineLatest(types.map((type) => this.getRelationships(type))).pipe(
+        switchMap((types) => {
+          if (types.length === 0) {
+            return observableOf(types);
+          }
+          return combineLatest(types.map((type) => this.getRelationships(type))).pipe(
             map((relationships) =>
               types.reduce<RelationshipType[]>((includedTypes, type, index) => {
                 if (!includedTypes.some((includedType) => includedType.id === type.id)
@@ -133,8 +136,8 @@ export class ItemDeleteComponent
                 }
               }, [])
             ),
-          )
-        ),
+          );
+        })
       );
     } else {
       this.types$ = observableOf([]);
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
index b743ef2745..008708d3fb 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -5,12 +5,6 @@
                 class="fas fa-plus"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.add-button" | translate}}</span>
         </button>
-        <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                [disabled]="!(hasChanges() | async)"
-                (click)="discard()"><i
-                class="fas fa-times"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-        </button>
         <button class="btn btn-warning" *ngIf="isReinstatable() | async"
                 (click)="reinstate()"><i
                 class="fas fa-undo-alt"></i>
@@ -21,6 +15,12 @@
                 class="fas fa-save"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
+        <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
+                [disabled]="!(hasChanges() | async)"
+                (click)="discard()"><i
+                class="fas fa-times"></i>
+            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+        </button>
     </div>
     <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
         <tbody>
@@ -47,20 +47,20 @@
       <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
     </div>
     <div class="button-row bottom">
-          <div class="float-right">
-              <button class="btn btn-danger mr-1" *ngIf="!(isReinstatable() | async)"
+      <div class="mt-2 float-right">
+              <button class="btn btn-warning" *ngIf="isReinstatable() | async"
+                      (click)="reinstate()"><i
+                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
+              </button>
+              <button class="btn btn-primary mr-0" [disabled]="!(hasChanges() | async)"
+                      (click)="submit()"><i
+                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
+              </button>
+              <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
                       [disabled]="!(hasChanges() | async)"
                       (click)="discard()"><i
                       class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
               </button>
-              <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
-                      (click)="reinstate()"><i
-                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
-              </button>
-              <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
-                      (click)="submit()"><i
-                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
-              </button>
           </div>
       </div>
 </div>
diff --git a/src/app/+item-page/edit-item-page/item-operation/item-operation.component.html b/src/app/+item-page/edit-item-page/item-operation/item-operation.component.html
index 3a52fd0d12..e3989f02f3 100644
--- a/src/app/+item-page/edit-item-page/item-operation/item-operation.component.html
+++ b/src/app/+item-page/edit-item-page/item-operation/item-operation.component.html
@@ -4,7 +4,7 @@
       </span>
 </div>
 <div *ngIf="!operation.disabled" class="col-9 float-left action-button">
-  <a class="btn btn-outline-secondary" [routerLink]="operation.operationUrl">
+  <a class="btn btn-outline-primary" [routerLink]="operation.operationUrl">
     {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
   </a>
 </div>
@@ -12,4 +12,4 @@
   <span class="btn btn-danger">
     {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
   </span>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.ts b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.ts
index 785d548860..1c5ed3c02b 100644
--- a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.ts
+++ b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.ts
@@ -75,7 +75,7 @@ export class ItemRelationshipsComponent extends AbstractItemUpdateComponent {
    */
   public initializeUpdates(): void {
 
-    const label = this.item.firstMetadataValue('relationship.type');
+    const label = this.item.firstMetadataValue('dspace.entity.type');
     if (label !== undefined) {
 
       this.entityType$ = this.entityTypeService.getEntityTypeByLabel(label).pipe(
diff --git a/src/app/+item-page/full/full-item-page.component.ts b/src/app/+item-page/full/full-item-page.component.ts
index 741f1e76a7..aea350e58e 100644
--- a/src/app/+item-page/full/full-item-page.component.ts
+++ b/src/app/+item-page/full/full-item-page.component.ts
@@ -18,9 +18,8 @@ import { hasValue } from '../../shared/empty.util';
 import { AuthService } from '../../core/auth/auth.service';
 
 /**
- * This component renders a simple item page.
+ * This component renders a full item page.
  * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
  */
 
 @Component({
diff --git a/src/app/+item-page/full/themed-full-item-page.component.ts b/src/app/+item-page/full/themed-full-item-page.component.ts
new file mode 100644
index 0000000000..c184d0a4e4
--- /dev/null
+++ b/src/app/+item-page/full/themed-full-item-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { FullItemPageComponent } from './full-item-page.component';
+
+/**
+ * Themed wrapper for FullItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-full-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+export class ThemedFullItemPageComponent extends ThemedComponent<FullItemPageComponent> {
+  protected getComponentName(): string {
+    return 'FullItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+item-page/full/full-item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./full-item-page.component`);
+  }
+}
diff --git a/src/app/+item-page/item-page-edit-metadata.guard.ts b/src/app/+item-page/item-page-edit-metadata.guard.ts
new file mode 100644
index 0000000000..a9b870b1cd
--- /dev/null
+++ b/src/app/+item-page/item-page-edit-metadata.guard.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
+import { ItemPageResolver } from './item-page.resolver';
+import { Item } from '../core/shared/item.model';
+import { DsoPageFeatureGuard } from '../core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../core/data/feature-authorization/feature-id';
+import { AuthService } from '../core/auth/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+/**
+ * Guard for preventing unauthorized access to certain {@link Item} pages requiring edit metadata rights
+ */
+export class ItemPageEditMetadataGuard extends DsoPageFeatureGuard<Item> {
+  constructor(protected resolver: ItemPageResolver,
+              protected authorizationService: AuthorizationDataService,
+              protected router: Router,
+              protected authService: AuthService) {
+    super(resolver, authorizationService, router, authService);
+  }
+
+  /**
+   * Check edit metadata authorization rights
+   */
+  getFeatureID(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID> {
+    return observableOf(FeatureID.CanEditMetadata);
+  }
+}
diff --git a/src/app/+item-page/item-page-routing-paths.ts b/src/app/+item-page/item-page-routing-paths.ts
index 8ad5583269..43b37f954a 100644
--- a/src/app/+item-page/item-page-routing-paths.ts
+++ b/src/app/+item-page/item-page-routing-paths.ts
@@ -10,11 +10,11 @@ export function getItemModuleRoute() {
 
 /**
  * Get the route to an item's page
- * Depending on the item's relationship type, the route will either start with /items or /entities
+ * Depending on the item's entity type, the route will either start with /items or /entities
  * @param item  The item to retrieve the route for
  */
 export function getItemPageRoute(item: Item) {
-  const type = item.firstMetadataValue('relationship.type');
+  const type = item.firstMetadataValue('dspace.entity.type');
   return getEntityPageRoute(type, item.uuid);
 }
 
diff --git a/src/app/+item-page/item-page-routing.module.ts b/src/app/+item-page/item-page-routing.module.ts
index b04a783b2f..f2d0a23935 100644
--- a/src/app/+item-page/item-page-routing.module.ts
+++ b/src/app/+item-page/item-page-routing.module.ts
@@ -1,18 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { ItemPageComponent } from './simple/item-page.component';
-import { FullItemPageComponent } from './full/full-item-page.component';
 import { ItemPageResolver } from './item-page.resolver';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
 import { ItemBreadcrumbResolver } from '../core/breadcrumbs/item-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
 import { LinkService } from '../core/cache/builders/link.service';
 import { UploadBitstreamComponent } from './bitstreams/upload/upload-bitstream.component';
-import { UPLOAD_BITSTREAM_PATH, ITEM_EDIT_PATH } from './item-page-routing-paths';
+import { ITEM_EDIT_PATH, UPLOAD_BITSTREAM_PATH } from './item-page-routing-paths';
 import { ItemPageAdministratorGuard } from './item-page-administrator.guard';
 import { MenuItemType } from '../shared/menu/initial-menus-state';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
 
 @NgModule({
   imports: [
@@ -27,18 +26,17 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
         children: [
           {
             path: '',
-            component: ItemPageComponent,
+            component: ThemedItemPageComponent,
             pathMatch: 'full',
           },
           {
             path: 'full',
-            component: FullItemPageComponent,
+            component: ThemedFullItemPageComponent,
           },
           {
             path: ITEM_EDIT_PATH,
             loadChildren: () => import('./edit-item-page/edit-item-page.module')
               .then((m) => m.EditItemPageModule),
-            canActivate: [ItemPageAdministratorGuard]
           },
           {
             path: UPLOAD_BITSTREAM_PATH,
@@ -68,7 +66,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
     ItemBreadcrumbResolver,
     DSOBreadcrumbsService,
     LinkService,
-    ItemPageAdministratorGuard
+    ItemPageAdministratorGuard,
   ]
 
 })
diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts
index ed8d872b36..1c6cd83e9c 100644
--- a/src/app/+item-page/item-page.module.ts
+++ b/src/app/+item-page/item-page.module.ts
@@ -25,6 +25,12 @@ import { AbstractIncrementalListComponent } from './simple/abstract-incremental-
 import { UntypedItemComponent } from './simple/item-types/untyped-item/untyped-item.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedItemPageComponent } from './simple/themed-item-page.component';
+import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
+import { MediaViewerComponent } from './media-viewer/media-viewer.component';
+import { MediaViewerVideoComponent } from './media-viewer/media-viewer-video/media-viewer-video.component';
+import { MediaViewerImageComponent } from './media-viewer/media-viewer-image/media-viewer-image.component';
+import { NgxGalleryModule } from '@kolkov/ngx-gallery';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -34,7 +40,9 @@ const ENTRY_COMPONENTS = [
 
 const DECLARATIONS = [
   ItemPageComponent,
+  ThemedItemPageComponent,
   FullItemPageComponent,
+  ThemedFullItemPageComponent,
   MetadataUriValuesComponent,
   ItemPageAuthorFieldComponent,
   ItemPageDateFieldComponent,
@@ -50,6 +58,9 @@ const DECLARATIONS = [
   ItemComponent,
   UploadBitstreamComponent,
   AbstractIncrementalListComponent,
+  MediaViewerComponent,
+  MediaViewerVideoComponent,
+  MediaViewerImageComponent
 ];
 
 @NgModule({
@@ -60,7 +71,8 @@ const DECLARATIONS = [
     EditItemPageModule,
     StatisticsModule.forRoot(),
     JournalEntitiesModule.withEntryComponents(),
-    ResearchEntitiesModule.withEntryComponents()
+    ResearchEntitiesModule.withEntryComponents(),
+     NgxGalleryModule,
   ],
   declarations: [
     ...DECLARATIONS
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html
new file mode 100644
index 0000000000..bafc6f079c
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.html
@@ -0,0 +1,7 @@
+<div [class.change-gallery]="isAuthenticated$ | async">
+  <ngx-gallery
+    class="ngx-gallery"
+    [options]="galleryOptions"
+    [images]="galleryImages"
+  ></ngx-gallery>
+</div>
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
new file mode 100644
index 0000000000..72ce4b04d9
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.scss
@@ -0,0 +1,6 @@
+.ngx-gallery {
+  display: inline-block;
+  margin-bottom: 20px;
+  width: 340px !important;
+  height: 279px !important;
+}
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts
new file mode 100644
index 0000000000..1f1fed789f
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.spec.ts
@@ -0,0 +1,89 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgxGalleryOptions } from '@kolkov/ngx-gallery';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { MockBitstreamFormat1 } from '../../../shared/mocks/item.mock';
+
+import { MediaViewerImageComponent } from './media-viewer-image.component';
+
+import { of as observableOf } from 'rxjs';
+import { AuthService } from '../../../core/auth/auth.service';
+
+describe('MediaViewerImageComponent', () => {
+  let component: MediaViewerImageComponent;
+  let fixture: ComponentFixture<MediaViewerImageComponent>;
+
+  const authService = jasmine.createSpyObj('authService', {
+    isAuthenticated: observableOf(false)
+  });
+
+  const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
+    sizeBytes: 10201,
+    content:
+      'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+    format: observableOf(MockBitstreamFormat1),
+    bundleName: 'ORIGINAL',
+    _links: {
+      self: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713',
+      },
+      content: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+      },
+    },
+    id: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    uuid: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    type: 'bitstream',
+    metadata: {
+      'dc.title': [
+        {
+          language: null,
+          value: 'test_word.docx',
+        },
+      ],
+    },
+  });
+
+  const mockMediaViewerItems: MediaViewerItem[] = Object.assign(
+    new Array<MediaViewerItem>(),
+    [
+      { bitstream: mockBitstream, format: 'image', thumbnail: null },
+      { bitstream: mockBitstream, format: 'image', thumbnail: null },
+    ]
+  );
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports:[],
+      declarations: [MediaViewerImageComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        { provide: AuthService, useValue: authService },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerImageComponent);
+    component = fixture.componentInstance;
+    component.galleryOptions = [new NgxGalleryOptions({})];
+    component.galleryImages = component.convertToGalleryImage(
+      mockMediaViewerItems
+    );
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should contain a gallery options', () => {
+    expect(component.galleryOptions.length).toBeGreaterThan(0);
+  });
+
+  it('should contain an image array', () => {
+    expect(component.galleryImages.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
new file mode 100644
index 0000000000..0c32b5603d
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-image/media-viewer-image.component.ts
@@ -0,0 +1,88 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { NgxGalleryAnimation } from '@kolkov/ngx-gallery';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../core/auth/auth.service';
+
+/**
+ * This componenet render an image gallery for the image viewer
+ */
+@Component({
+  selector: 'ds-media-viewer-image',
+  templateUrl: './media-viewer-image.component.html',
+  styleUrls: ['./media-viewer-image.component.scss'],
+})
+export class MediaViewerImageComponent implements OnInit {
+  @Input() images: MediaViewerItem[];
+  @Input() preview?: boolean;
+  @Input() image?: string;
+
+  loggedin: boolean;
+
+  galleryOptions: NgxGalleryOptions[];
+  galleryImages: NgxGalleryImage[];
+
+  /**
+   * Whether or not the current user is authenticated
+   */
+  isAuthenticated$: Observable<boolean>;
+
+  constructor(private authService: AuthService) {}
+
+  /**
+   * Thi method sets up the gallery settings and data
+   */
+  ngOnInit(): void {
+    this.isAuthenticated$ = this.authService.isAuthenticated();
+    this.galleryOptions = [
+      {
+        preview: this.preview !== undefined ? this.preview : true,
+        image: true,
+        imageSize: 'contain',
+        thumbnails: false,
+        imageArrows: false,
+        startIndex: 0,
+        imageAnimation: NgxGalleryAnimation.Slide,
+        previewCloseOnEsc: true,
+        previewZoom: true,
+        previewRotate: true,
+        previewFullscreen: true,
+      },
+    ];
+
+    if (this.image) {
+      this.galleryImages = [
+        {
+          small: this.image,
+          medium: this.image,
+          big: this.image,
+        },
+      ];
+    } else {
+      this.galleryImages = this.convertToGalleryImage(this.images);
+    }
+  }
+
+  /**
+   * This method convert an array of MediaViewerItem into NgxGalleryImage array
+   * @param medias input NgxGalleryImage array
+   */
+  convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] {
+    const mappadImages = [];
+    for (const image of medias) {
+      if (image.format === 'image') {
+        mappadImages.push({
+          small: image.thumbnail
+            ? image.thumbnail
+            : './assets/images/replacement_image.svg',
+          medium: image.thumbnail
+            ? image.thumbnail
+            : './assets/images/replacement_image.svg',
+          big: image.bitstream._links.content.href,
+        });
+      }
+    }
+    return mappadImages;
+  }
+}
diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
new file mode 100644
index 0000000000..a4493e36fc
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
@@ -0,0 +1,47 @@
+<video
+  #media
+  [src]="filteredMedias[currentIndex].bitstream._links.content.href"
+  id="singleVideo"
+  [poster]="
+    filteredMedias[currentIndex].thumbnail ||
+    replacements[filteredMedias[currentIndex].format]
+  "
+  preload="none"
+  controls
+></video>
+<div class="buttons" *ngIf="filteredMedias?.length > 1">
+  <button
+    class="btn btn-primary previous"
+    [disabled]="currentIndex === 0"
+    (click)="prevMedia()"
+  >
+    {{ "media-viewer.previous" | translate }}
+  </button>
+
+  <button
+    class="btn btn-primary next"
+    [disabled]="currentIndex === filteredMedias.length - 1"
+    (click)="nextMedia()"
+  >
+    {{ "media-viewer.next" | translate }}
+  </button>
+  <div ngbDropdown class="d-inline-block">
+    <button
+      class="btn btn-outline-primary playlist"
+      id="dropdownBasic1"
+      ngbDropdownToggle
+    >
+      {{ "media-viewer.playlist" | translate }}
+    </button>
+    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+      <button
+        ngbDropdownItem
+        *ngFor="let item of filteredMedias; index as indexOfelement"
+        class="list-element"
+        (click)="selectedMedia(indexOfelement)"
+      >
+        {{ item.bitstream.name }}
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
new file mode 100644
index 0000000000..7702da7361
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.scss
@@ -0,0 +1,4 @@
+video {
+  width: 340px;
+  height: 279px;
+}
diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
new file mode 100644
index 0000000000..88138a252f
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.spec.ts
@@ -0,0 +1,145 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { of as observableOf } from 'rxjs';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { FileSizePipe } from '../../../shared/utils/file-size-pipe';
+import { VarDirective } from '../../../shared/utils/var.directive';
+import { MetadataFieldWrapperComponent } from '../../field-components/metadata-field-wrapper/metadata-field-wrapper.component';
+import { MockBitstreamFormat1 } from '../../../shared/mocks/item.mock';
+import { MediaViewerVideoComponent } from './media-viewer-video.component';
+import { By } from '@angular/platform-browser';
+
+describe('MediaViewerVideoComponent', () => {
+  let component: MediaViewerVideoComponent;
+  let fixture: ComponentFixture<MediaViewerVideoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }),
+        BrowserAnimationsModule,
+      ],
+      declarations: [
+        MediaViewerVideoComponent,
+        VarDirective,
+        FileSizePipe,
+        MetadataFieldWrapperComponent,
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
+    sizeBytes: 10201,
+    content:
+      'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+    format: observableOf(MockBitstreamFormat1),
+    bundleName: 'ORIGINAL',
+    _links: {
+      self: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713',
+      },
+      content: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+      },
+    },
+    id: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    uuid: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    type: 'bitstream',
+    metadata: {
+      'dc.title': [
+        {
+          language: null,
+          value: 'test_word.docx',
+        },
+      ],
+    },
+  });
+
+  const mockMediaViewerItems: MediaViewerItem[] = Object.assign(
+    new Array<MediaViewerItem>(),
+    [
+      { bitstream: mockBitstream, format: 'video', thumbnail: null },
+      { bitstream: mockBitstream, format: 'video', thumbnail: null },
+    ]
+  );
+  const mockMediaViewerItem: MediaViewerItem[] = Object.assign(
+    new Array<MediaViewerItem>(),
+    [{ bitstream: mockBitstream, format: 'video', thumbnail: null }]
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerVideoComponent);
+    component = fixture.componentInstance;
+    component.medias = mockMediaViewerItem;
+    component.filteredMedias = mockMediaViewerItem;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('should show controller buttons when the having mode then one video', () => {
+    beforeEach(() => {
+      component.medias = mockMediaViewerItems;
+      component.filteredMedias = mockMediaViewerItems;
+      fixture.detectChanges();
+    });
+
+    it('should show buttons', () => {
+      const controllerButtons = fixture.debugElement.query(By.css('.buttons'));
+      expect(controllerButtons).toBeTruthy();
+    });
+
+    describe('when the "Next" button is clicked', () => {
+      beforeEach(() => {
+        component.currentIndex = 0;
+        fixture.detectChanges();
+      });
+
+      it('should increase the index', () => {
+        const viewMore = fixture.debugElement.query(By.css('.next'));
+        viewMore.triggerEventHandler('click', null);
+        expect(component.currentIndex).toBe(1);
+      });
+    });
+
+    describe('when the "Previous" button is clicked', () => {
+      beforeEach(() => {
+        component.currentIndex = 1;
+        fixture.detectChanges();
+      });
+
+      it('should decrease the index', () => {
+        const viewMore = fixture.debugElement.query(By.css('.previous'));
+        viewMore.triggerEventHandler('click', null);
+        expect(component.currentIndex).toBe(0);
+      });
+    });
+
+    describe('when the "Playlist element" button is clicked', () => {
+      beforeEach(() => {
+        component.isCollapsed = true;
+        fixture.detectChanges();
+      });
+
+      it('should set the the index with the selected one', () => {
+        const viewMore = fixture.debugElement.query(By.css('.list-element'));
+        viewMore.triggerEventHandler('click', null);
+        expect(component.currentIndex).toBe(0);
+      });
+    });
+  });
+});
diff --git a/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
new file mode 100644
index 0000000000..4c578a51bb
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
@@ -0,0 +1,55 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+
+/**
+ * This componenet renders a video viewer and playlist for the media viewer
+ */
+@Component({
+  selector: 'ds-media-viewer-video',
+  templateUrl: './media-viewer-video.component.html',
+  styleUrls: ['./media-viewer-video.component.scss'],
+})
+export class MediaViewerVideoComponent implements OnInit {
+  @Input() medias: MediaViewerItem[];
+
+  filteredMedias: MediaViewerItem[];
+
+  isCollapsed: boolean;
+  currentIndex = 0;
+
+  replacements = {
+    video: './assets/images/replacement_video.svg',
+    audio: './assets/images/replacement_audio.svg',
+  };
+
+  replacementThumbnail: string;
+
+  ngOnInit() {
+    this.isCollapsed = false;
+    this.filteredMedias = this.medias.filter(
+      (media) => media.format === 'audio' || media.format === 'video'
+    );
+  }
+
+  /**
+   * This method sets the reviced index into currentIndex
+   * @param index Selected index
+   */
+  selectedMedia(index: number) {
+    this.currentIndex = index;
+  }
+
+  /**
+   * This method increade the number of the currentIndex
+   */
+  nextMedia() {
+    this.currentIndex++;
+  }
+
+  /**
+   * This method decrese the number of the currentIndex
+   */
+  prevMedia() {
+    this.currentIndex--;
+  }
+}
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.html b/src/app/+item-page/media-viewer/media-viewer.component.html
new file mode 100644
index 0000000000..b79b91629f
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer.component.html
@@ -0,0 +1,36 @@
+<ng-container *ngVar="mediaList$ | async as mediaList">
+  <ds-loading
+    *ngIf="isLoading"
+    message="{{ 'loading.default' | translate }}"
+    [showMessage]="false"
+  ></ds-loading>
+  <div class="media-viewer" *ngIf="!isLoading">
+    <ng-container *ngIf="mediaList.length > 0">
+      <ng-container *ngIf="videoOptions">
+        <ng-container
+          *ngIf="
+            mediaList[0]?.format === 'video' || mediaList[0]?.format === 'audio'
+          "
+        >
+          <ds-media-viewer-video [medias]="mediaList"></ds-media-viewer-video>
+        </ng-container>
+      </ng-container>
+        <ng-container *ngIf="mediaList[0]?.format === 'image'">
+          <ds-media-viewer-image [images]="mediaList"></ds-media-viewer-image>
+        </ng-container>
+    </ng-container>
+    <ng-container
+      *ngIf="
+        ((mediaList[0]?.format !== 'image') &&
+          (!videoOptions || mediaList[0]?.format !== 'video') &&
+          (!videoOptions || mediaList[0]?.format !== 'audio')) ||
+        mediaList.length === 0
+      "
+    >
+      <ds-media-viewer-image
+        [image]="mediaList[0]?.thumbnail || thumbnailPlaceholder"
+        [preview]="false"
+      ></ds-media-viewer-image>
+    </ng-container>
+  </div>
+</ng-container>
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.scss b/src/app/+item-page/media-viewer/media-viewer.component.scss
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.spec.ts b/src/app/+item-page/media-viewer/media-viewer.component.spec.ts
new file mode 100644
index 0000000000..ebea703ec8
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer.component.spec.ts
@@ -0,0 +1,143 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+import { of as observableOf } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { MediaViewerComponent } from './media-viewer.component';
+import { MockBitstreamFormat1 } from '../../shared/mocks/item.mock';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BitstreamDataService } from '../../core/data/bitstream-data.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { MetadataFieldWrapperComponent } from '../field-components/metadata-field-wrapper/metadata-field-wrapper.component';
+import { FileSizePipe } from '../../shared/utils/file-size-pipe';
+
+describe('MediaViewerComponent', () => {
+  let comp: MediaViewerComponent;
+  let fixture: ComponentFixture<MediaViewerComponent>;
+
+  const mockBitstream: Bitstream = Object.assign(new Bitstream(), {
+    sizeBytes: 10201,
+    content:
+      'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+    format: observableOf(MockBitstreamFormat1),
+    bundleName: 'ORIGINAL',
+    _links: {
+      self: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713',
+      },
+      content: {
+        href:
+          'https://dspace7.4science.it/dspace-spring-rest/api/core/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/content',
+      },
+    },
+    id: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    uuid: 'cf9b0c8e-a1eb-4b65-afd0-567366448713',
+    type: 'bitstream',
+    metadata: {
+      'dc.title': [
+        {
+          language: null,
+          value: 'test_word.docx',
+        },
+      ],
+    },
+  });
+
+  const bitstreamDataService = jasmine.createSpyObj('bitstreamDataService', {
+    findAllByItemAndBundleName: createSuccessfulRemoteDataObject$(
+      createPaginatedList([mockBitstream])
+    ),
+  });
+
+  const mockMediaViewerItem: MediaViewerItem = Object.assign(
+    new MediaViewerItem(),
+    { bitstream: mockBitstream, format: 'image', thumbnail: null }
+  );
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }),
+        BrowserAnimationsModule,
+      ],
+      declarations: [
+        MediaViewerComponent,
+        VarDirective,
+        FileSizePipe,
+        MetadataFieldWrapperComponent,
+      ],
+      providers: [
+        { provide: BitstreamDataService, useValue: bitstreamDataService },
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaViewerComponent);
+    comp = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('when the bitstreams are loading', () => {
+    beforeEach(() => {
+      comp.mediaList$.next([mockMediaViewerItem]);
+      comp.videoOptions = true;
+      comp.isLoading = true;
+      fixture.detectChanges();
+    });
+
+    it('should call the createMediaViewerItem', () => {
+      const mediaItem = comp.createMediaViewerItem(
+        mockBitstream,
+        MockBitstreamFormat1,
+        undefined
+      );
+      expect(mediaItem).toBeTruthy();
+      expect(mediaItem.thumbnail).toBe(null);
+    });
+
+    it('should display a loading component', () => {
+      const loading = fixture.debugElement.query(By.css('ds-loading'));
+      expect(loading.nativeElement).toBeDefined();
+    });
+  });
+
+  describe('when the bitstreams loading is failed', () => {
+    beforeEach(() => {
+      comp.mediaList$.next([]);
+      comp.videoOptions = true;
+      comp.isLoading = false;
+      fixture.detectChanges();
+    });
+
+    it('should call the createMediaViewerItem', () => {
+      const mediaItem = comp.createMediaViewerItem(
+        mockBitstream,
+        MockBitstreamFormat1,
+        undefined
+      );
+      expect(mediaItem).toBeTruthy();
+      expect(mediaItem.thumbnail).toBe(null);
+    });
+
+    it('should display a default, thumbnail', () => {
+      const defaultThumbnail = fixture.debugElement.query(
+        By.css('ds-media-viewer-image')
+      );
+      expect(defaultThumbnail.nativeElement).toBeDefined();
+    });
+  });
+});
diff --git a/src/app/+item-page/media-viewer/media-viewer.component.ts b/src/app/+item-page/media-viewer/media-viewer.component.ts
new file mode 100644
index 0000000000..3f9de8ed3e
--- /dev/null
+++ b/src/app/+item-page/media-viewer/media-viewer.component.ts
@@ -0,0 +1,114 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
+import { BitstreamDataService } from '../../core/data/bitstream-data.service';
+import { PaginatedList } from '../../core/data/paginated-list.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { Item } from '../../core/shared/item.model';
+import { MediaViewerItem } from '../../core/shared/media-viewer-item.model';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { hasValue } from '../../shared/empty.util';
+import { followLink } from '../../shared/utils/follow-link-config.model';
+
+/**
+ * This componenet renders the media viewers
+ */
+
+@Component({
+  selector: 'ds-media-viewer',
+  templateUrl: './media-viewer.component.html',
+  styleUrls: ['./media-viewer.component.scss'],
+})
+export class MediaViewerComponent implements OnInit {
+  @Input() item: Item;
+  @Input() videoOptions: boolean;
+
+  mediaList$: BehaviorSubject<MediaViewerItem[]>;
+
+  isLoading: boolean;
+
+  thumbnailPlaceholder = './assets/images/replacement_document.svg';
+
+  constructor(protected bitstreamDataService: BitstreamDataService) {}
+
+  /**
+   * This metod loads all the Bitstreams and Thumbnails and contert it to media item
+   */
+  ngOnInit(): void {
+    this.mediaList$ = new BehaviorSubject([]);
+    this.isLoading = true;
+    this.loadRemoteData('ORIGINAL').subscribe((bitstreamsRD) => {
+      if (bitstreamsRD.payload.page.length === 0) {
+        this.isLoading = false;
+        this.mediaList$.next([]);
+      } else {
+        this.loadRemoteData('THUMBNAIL').subscribe((thumbnailsRD) => {
+          for (
+            let index = 0;
+            index < bitstreamsRD.payload.page.length;
+            index++
+          ) {
+            bitstreamsRD.payload.page[index].format
+              .pipe(getFirstSucceededRemoteDataPayload())
+              .subscribe((format) => {
+                const current = this.mediaList$.getValue();
+                const mediaItem = this.createMediaViewerItem(
+                  bitstreamsRD.payload.page[index],
+                  format,
+                  thumbnailsRD.payload && thumbnailsRD.payload.page[index]
+                );
+                this.mediaList$.next([...current, mediaItem]);
+              });
+          }
+          this.isLoading = false;
+        });
+      }
+    });
+  }
+
+  /**
+   * This method will retrieve the next page of Bitstreams from the external BitstreamDataService call.
+   * @param bundleName Bundle name
+   */
+  loadRemoteData(
+    bundleName: string
+  ): Observable<RemoteData<PaginatedList<Bitstream>>> {
+    return this.bitstreamDataService
+      .findAllByItemAndBundleName(
+        this.item,
+        bundleName,
+        {},
+        true,
+        true,
+        followLink('format')
+      )
+      .pipe(
+        filter(
+          (bitstreamsRD: RemoteData<PaginatedList<Bitstream>>) =>
+            hasValue(bitstreamsRD) &&
+            (hasValue(bitstreamsRD.errorMessage) || hasValue(bitstreamsRD.payload))
+        ),
+        take(1)
+      );
+  }
+
+  /**
+   * This method create MediaViewerItem from incoming bitstreams
+   * @param original original remote data bitstream
+   * @param format original bitstream format
+   * @param thumbnail trunbnail remote data bitstream
+   */
+  createMediaViewerItem(
+    original: Bitstream,
+    format: BitstreamFormat,
+    thumbnail: Bitstream
+  ): MediaViewerItem {
+    const mediaItem = new MediaViewerItem();
+    mediaItem.bitstream = original;
+    mediaItem.format = format.mimetype.split('/')[0];
+    mediaItem.thumbnail = thumbnail ? thumbnail._links.content.href : null;
+    return mediaItem;
+  }
+}
diff --git a/src/app/+item-page/simple/field-components/specific-field/title/item-page-title-field.component.html b/src/app/+item-page/simple/field-components/specific-field/title/item-page-title-field.component.html
index 43bd20d0f6..12987dc6d3 100644
--- a/src/app/+item-page/simple/field-components/specific-field/title/item-page-title-field.component.html
+++ b/src/app/+item-page/simple/field-components/specific-field/title/item-page-title-field.component.html
@@ -1,5 +1,5 @@
 <h2 class="item-page-title-field">
-  <div *ngIf="item.firstMetadataValue('relationship.type') as type">
+  <div *ngIf="item.firstMetadataValue('dspace.entity.type') as type">
     {{ type.toLowerCase() + '.page.titleprefix' | translate }}
   </div>
   <ds-metadata-values [mdValues]="item?.allMetadata(fields)"></ds-metadata-values>
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html
index fc8d06ac10..73219cbb8f 100644
--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -8,9 +8,14 @@
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
-    </ds-metadata-field-wrapper>
+    <ng-container *ngIf="!mediaViewer.image">
+      <ds-metadata-field-wrapper>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      </ds-metadata-field-wrapper>
+    </ng-container>
+    <ng-container *ngIf="mediaViewer.image">
+      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+    </ng-container>
     <ds-item-page-file-section [item]="object"></ds-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-item-page-author-field [item]="object"></ds-item-page-author-field>
@@ -74,8 +79,8 @@
     </ds-item-page-uri-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
-        {{"item.page.link.full" | translate}}
+      <a class="btn btn-outline-primary" role="button" [routerLink]="[itemPageRoute + '/full']">
+        <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
       </a>
     </div>
   </div>
diff --git a/src/app/+item-page/simple/item-types/shared/item.component.ts b/src/app/+item-page/simple/item-types/shared/item.component.ts
index a8119c8565..120eda930f 100644
--- a/src/app/+item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
+import { environment } from '../../../../../environments/environment';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
@@ -20,6 +21,7 @@ export class ItemComponent implements OnInit {
    * Route to the item page
    */
   itemPageRoute: string;
+  mediaViewer = environment.mediaViewer;
 
   constructor(protected bitstreamDataService: BitstreamDataService) {
   }
diff --git a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
index 241696f688..8d46a2c5a9 100644
--- a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -8,9 +8,14 @@
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
-    </ds-metadata-field-wrapper>
+    <ng-container *ngIf="!mediaViewer.image">
+      <ds-metadata-field-wrapper>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      </ds-metadata-field-wrapper>
+    </ng-container>
+    <ng-container *ngIf="mediaViewer.image">
+      <ds-media-viewer [item]="object" [videoOptions]="mediaViewer.video"></ds-media-viewer>
+    </ng-container>
     <ds-item-page-file-section [item]="object"></ds-item-page-file-section>
     <ds-item-page-date-field [item]="object"></ds-item-page-date-field>
     <ds-item-page-author-field [item]="object"></ds-item-page-author-field>
@@ -59,8 +64,8 @@
     </ds-item-page-uri-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
-        {{"item.page.link.full" | translate}}
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button">
+        <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
       </a>
     </div>
   </div>
diff --git a/src/app/+item-page/simple/themed-item-page.component.ts b/src/app/+item-page/simple/themed-item-page.component.ts
new file mode 100644
index 0000000000..3d04f04acd
--- /dev/null
+++ b/src/app/+item-page/simple/themed-item-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ItemPageComponent } from './item-page.component';
+
+/**
+ * Themed wrapper for ItemPageComponent
+ */
+@Component({
+  selector: 'ds-themed-item-page',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html',
+})
+
+export class ThemedItemPageComponent extends ThemedComponent<ItemPageComponent> {
+  protected getComponentName(): string {
+    return 'ItemPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+item-page/simple/item-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-page.component`);
+  }
+
+}
diff --git a/src/app/+login-page/login-page-routing.module.ts b/src/app/+login-page/login-page-routing.module.ts
index 9fa4a9e5ad..3a48852625 100644
--- a/src/app/+login-page/login-page-routing.module.ts
+++ b/src/app/+login-page/login-page-routing.module.ts
@@ -1,14 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LoginPageComponent } from './login-page.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: LoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
+      { path: '', pathMatch: 'full', component: ThemedLoginPageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'login', title: 'login.title' } }
     ])
   ],
   providers: [
diff --git a/src/app/+login-page/login-page.component.html b/src/app/+login-page/login-page.component.html
index 84059877f4..2a95e0ce1c 100644
--- a/src/app/+login-page/login-page.component.html
+++ b/src/app/+login-page/login-page.component.html
@@ -1,7 +1,7 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-center">
     <div>
-      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png" alt="{{'repository.image.logo' | translate}}">
       <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
       <ds-log-in
       [isStandalonePage]="true"></ds-log-in>
diff --git a/src/app/+login-page/login-page.module.ts b/src/app/+login-page/login-page.module.ts
index 4d3f726c40..4facc82df1 100644
--- a/src/app/+login-page/login-page.module.ts
+++ b/src/app/+login-page/login-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LoginPageComponent } from './login-page.component';
 import { LoginPageRoutingModule } from './login-page-routing.module';
+import { ThemedLoginPageComponent } from './themed-login-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LoginPageRoutingModule } from './login-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LoginPageComponent
+    LoginPageComponent,
+    ThemedLoginPageComponent
   ]
 })
 export class LoginPageModule {
diff --git a/src/app/+login-page/themed-login-page.component.ts b/src/app/+login-page/themed-login-page.component.ts
new file mode 100644
index 0000000000..cdf5932802
--- /dev/null
+++ b/src/app/+login-page/themed-login-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LoginPageComponent } from './login-page.component';
+
+/**
+ * Themed wrapper for LoginPageComponent
+ */
+@Component({
+  selector: 'ds-themed-login-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLoginPageComponent extends ThemedComponent<LoginPageComponent> {
+  protected getComponentName(): string {
+    return 'LoginPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+login-page/login-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./login-page.component`);
+  }
+}
diff --git a/src/app/+logout-page/logout-page-routing.module.ts b/src/app/+logout-page/logout-page-routing.module.ts
index 64894c1f87..a5df0fe580 100644
--- a/src/app/+logout-page/logout-page-routing.module.ts
+++ b/src/app/+logout-page/logout-page-routing.module.ts
@@ -1,8 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { LogoutPageComponent } from './logout-page.component';
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -10,7 +9,7 @@ import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
       {
         canActivate: [AuthenticatedGuard],
         path: '',
-        component: LogoutPageComponent,
+        component: ThemedLogoutPageComponent,
         data: { title: 'logout.title' }
       }
     ])
diff --git a/src/app/+logout-page/logout-page.module.ts b/src/app/+logout-page/logout-page.module.ts
index b085a5117b..59a5459e7f 100644
--- a/src/app/+logout-page/logout-page.module.ts
+++ b/src/app/+logout-page/logout-page.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { LogoutPageComponent } from './logout-page.component';
 import { LogoutPageRoutingModule } from './logout-page-routing.module';
+import { ThemedLogoutPageComponent } from './themed-logout-page.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { LogoutPageRoutingModule } from './logout-page-routing.module';
     SharedModule,
   ],
   declarations: [
-    LogoutPageComponent
+    LogoutPageComponent,
+    ThemedLogoutPageComponent
   ]
 })
 export class LogoutPageModule {
diff --git a/src/app/+logout-page/themed-logout-page.component.ts b/src/app/+logout-page/themed-logout-page.component.ts
new file mode 100644
index 0000000000..19e1e2d1d1
--- /dev/null
+++ b/src/app/+logout-page/themed-logout-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { LogoutPageComponent } from './logout-page.component';
+
+/**
+ * Themed wrapper for LogoutPageComponent
+ */
+@Component({
+  selector: 'ds-themed-logout-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedLogoutPageComponent extends ThemedComponent<LogoutPageComponent> {
+  protected getComponentName(): string {
+    return 'LogoutPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+logout-page/logout-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./logout-page.component`);
+  }
+}
diff --git a/src/app/+lookup-by-id/lookup-by-id-routing.module.ts b/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
index 76c90ed6d4..52a7c8a358 100644
--- a/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
+++ b/src/app/+lookup-by-id/lookup-by-id-routing.module.ts
@@ -1,8 +1,8 @@
 import { LookupGuard } from './lookup-guard';
 import { NgModule } from '@angular/core';
 import { RouterModule, UrlSegment } from '@angular/router';
-import { ObjectNotFoundComponent } from './objectnotfound/objectnotfound.component';
 import { isNotEmpty } from '../shared/empty.util';
+import { ThemedObjectNotFoundComponent } from './objectnotfound/themed-objectnotfound.component';
 
 @NgModule({
   imports: [
@@ -10,7 +10,7 @@ import { isNotEmpty } from '../shared/empty.util';
       {
         matcher: urlMatcher,
         canActivate: [LookupGuard],
-        component: ObjectNotFoundComponent  }
+        component: ThemedObjectNotFoundComponent  }
     ])
   ],
   providers: [
diff --git a/src/app/+lookup-by-id/lookup-by-id.module.ts b/src/app/+lookup-by-id/lookup-by-id.module.ts
index 1b070c1279..0202a43033 100644
--- a/src/app/+lookup-by-id/lookup-by-id.module.ts
+++ b/src/app/+lookup-by-id/lookup-by-id.module.ts
@@ -4,6 +4,7 @@ import { SharedModule } from '../shared/shared.module';
 import { LookupRoutingModule } from './lookup-by-id-routing.module';
 import { ObjectNotFoundComponent } from './objectnotfound/objectnotfound.component';
 import { DsoRedirectDataService } from '../core/data/dso-redirect-data.service';
+import { ThemedObjectNotFoundComponent } from './objectnotfound/themed-objectnotfound.component';
 
 @NgModule({
   imports: [
@@ -12,7 +13,8 @@ import { DsoRedirectDataService } from '../core/data/dso-redirect-data.service';
     SharedModule,
   ],
   declarations: [
-    ObjectNotFoundComponent
+    ObjectNotFoundComponent,
+    ThemedObjectNotFoundComponent
   ],
   providers: [
     DsoRedirectDataService
diff --git a/src/app/+lookup-by-id/lookup-guard.spec.ts b/src/app/+lookup-by-id/lookup-guard.spec.ts
index 9c98e13bd3..63bb68884e 100644
--- a/src/app/+lookup-by-id/lookup-guard.spec.ts
+++ b/src/app/+lookup-by-id/lookup-guard.spec.ts
@@ -22,7 +22,7 @@ describe('LookupGuard', () => {
       }
     };
     guard.canActivate(scopedRoute as any, undefined);
-    expect(dsoService.findByIdAndIDType).toHaveBeenCalledWith('123456789/1234', IdentifierType.HANDLE);
+    expect(dsoService.findByIdAndIDType).toHaveBeenCalledWith('hdl:123456789/1234', IdentifierType.HANDLE);
   });
 
   it('should call findByIdAndIDType with handle params', () => {
@@ -33,7 +33,7 @@ describe('LookupGuard', () => {
       }
     };
     guard.canActivate(scopedRoute as any, undefined);
-    expect(dsoService.findByIdAndIDType).toHaveBeenCalledWith('123456789%2F1234', IdentifierType.HANDLE);
+    expect(dsoService.findByIdAndIDType).toHaveBeenCalledWith('hdl:123456789%2F1234', IdentifierType.HANDLE);
   });
 
   it('should call findByIdAndIDType with UUID params', () => {
diff --git a/src/app/+lookup-by-id/lookup-guard.ts b/src/app/+lookup-by-id/lookup-guard.ts
index 0df10d2b31..2146e56245 100644
--- a/src/app/+lookup-by-id/lookup-guard.ts
+++ b/src/app/+lookup-by-id/lookup-guard.ts
@@ -35,11 +35,11 @@ export class LookupGuard implements CanActivate {
       type = IdentifierType.HANDLE;
       const prefix = route.params.idType;
       const handleId = route.params.id;
-      id = `${prefix}/${handleId}`;
+      id = `hdl:${prefix}/${handleId}`;
 
     } else if (route.params.idType === IdentifierType.HANDLE) {
       type = IdentifierType.HANDLE;
-      id = route.params.id;
+      id = 'hdl:' + route.params.id;
 
     } else {
       type = IdentifierType.UUID;
diff --git a/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
new file mode 100644
index 0000000000..e1bec33dfd
--- /dev/null
+++ b/src/app/+lookup-by-id/objectnotfound/themed-objectnotfound.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ObjectNotFoundComponent } from './objectnotfound.component';
+
+/**
+ * Themed wrapper for ObjectNotFoundComponent
+ */
+@Component({
+  selector: 'ds-themed-objnotfound',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedObjectNotFoundComponent extends ThemedComponent<ObjectNotFoundComponent> {
+  protected getComponentName(): string {
+    return 'ObjectNotFoundComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+lookup-by-id/objectnotfound/objectnotfound.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./objectnotfound.component`);
+  }
+
+}
diff --git a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html
index 9ae38a2205..028b7df5a5 100644
--- a/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html
+++ b/src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.html
@@ -8,12 +8,12 @@
 
   </div>
   <div class="add">
-    <button class="btn btn-lg btn-primary mt-1 ml-2" (click)="openDialog()" role="button" title="{{'mydspace.new-submission' | translate}}">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+    <button class="btn btn-lg btn-primary mt-1 ml-2" (click)="openDialog()" attr.aria-label="'mydspace.new-submission' | translate" title="{{'mydspace.new-submission' | translate}}">
+      <i class="fa fa-plus" aria-hidden="true"></i>
     </button>
   </div>
   <div class="add">
-    <a class="btn btn-lg btn-primary mt-1 ml-2" [routerLink]="['/import-external']" role="button" title="{{'mydspace.new-submission-external' | translate}}">
+    <a class="btn btn-lg btn-outline-primary mt-1 ml-2" [routerLink]="['/import-external']" role="button" attr.aria-label="{{'mydspace.new-submission-external' | translate}}" title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
     </a>
   </div>
diff --git a/src/app/+my-dspace-page/my-dspace-page-routing.module.ts b/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
index d70a007e3a..6894194344 100644
--- a/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
+++ b/src/app/+my-dspace-page/my-dspace-page-routing.module.ts
@@ -1,16 +1,19 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { MyDSpacePageComponent } from './my-dspace-page.component';
 import { MyDSpaceGuard } from './my-dspace.guard';
+import { ThemedMyDSpacePageComponent } from './themed-my-dspace-page.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: MyDSpacePageComponent,
-        data: { title: 'mydspace.title' },
+        component: ThemedMyDSpacePageComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'mydspace.title', breadcrumbKey: 'mydspace' },
         canActivate: [
           MyDSpaceGuard
         ]
diff --git a/src/app/+my-dspace-page/my-dspace-page.component.html b/src/app/+my-dspace-page/my-dspace-page.component.html
index 55d1e304d0..c911e2c319 100644
--- a/src/app/+my-dspace-page/my-dspace-page.component.html
+++ b/src/app/+my-dspace-page/my-dspace-page.component.html
@@ -14,7 +14,8 @@
                           [scope]="(searchOptions$ | async)?.scope"
                           [currentUrl]="getSearchLink()"
                           [scopes]="(scopeListRD$ | async)"
-                          [inPlaceSearch]="inPlaceSearch">
+                          [inPlaceSearch]="inPlaceSearch"
+                          [searchPlaceholder]="'mydspace.search-form.placeholder' | translate">
           </ds-search-form>
           <ds-search-labels [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
           <div class="row">
diff --git a/src/app/+my-dspace-page/my-dspace-page.module.ts b/src/app/+my-dspace-page/my-dspace-page.module.ts
index 40bbcc903c..52c80c90b0 100644
--- a/src/app/+my-dspace-page/my-dspace-page.module.ts
+++ b/src/app/+my-dspace-page/my-dspace-page.module.ts
@@ -11,6 +11,15 @@ import { MyDSpaceGuard } from './my-dspace.guard';
 import { MyDSpaceConfigurationService } from './my-dspace-configuration.service';
 import { CollectionSelectorComponent } from './collection-selector/collection-selector.component';
 import { MyDspaceSearchModule } from './my-dspace-search.module';
+import { ThemedMyDSpacePageComponent } from './themed-my-dspace-page.component';
+
+const DECLARATIONS = [
+  MyDSpacePageComponent,
+  ThemedMyDSpacePageComponent,
+  MyDSpaceResultsComponent,
+  MyDSpaceNewSubmissionComponent,
+  CollectionSelectorComponent
+];
 
 @NgModule({
   imports: [
@@ -19,16 +28,12 @@ import { MyDspaceSearchModule } from './my-dspace-search.module';
     MyDspacePageRoutingModule,
     MyDspaceSearchModule.withEntryComponents()
   ],
-  declarations: [
-    MyDSpacePageComponent,
-    MyDSpaceResultsComponent,
-    MyDSpaceNewSubmissionComponent,
-    CollectionSelectorComponent
-  ],
+  declarations: DECLARATIONS,
   providers: [
     MyDSpaceGuard,
     MyDSpaceConfigurationService
-  ]
+  ],
+  exports: DECLARATIONS,
 })
 
 /**
diff --git a/src/app/+my-dspace-page/themed-my-dspace-page.component.ts b/src/app/+my-dspace-page/themed-my-dspace-page.component.ts
new file mode 100644
index 0000000000..47275496ca
--- /dev/null
+++ b/src/app/+my-dspace-page/themed-my-dspace-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { MyDSpacePageComponent } from './my-dspace-page.component';
+
+/**
+ * Themed wrapper for MyDSpacePageComponent
+ */
+@Component({
+  selector: 'ds-themed-my-dspace-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedMyDSpacePageComponent extends ThemedComponent<MyDSpacePageComponent> {
+  protected inAndOutputNames: (keyof MyDSpacePageComponent & keyof this)[];
+
+  protected getComponentName(): string {
+    return 'MyDSpacePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+my-dspace-page/my-dspace-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./my-dspace-page.component`);
+  }
+}
diff --git a/src/app/+search-page/search-page-routing.module.ts b/src/app/+search-page/search-page-routing.module.ts
index f71c7b45ee..9e39ad1bc9 100644
--- a/src/app/+search-page/search-page-routing.module.ts
+++ b/src/app/+search-page/search-page-routing.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { ConfigurationSearchPageGuard } from './configuration-search-page.guard';
-import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
-import { SearchPageComponent } from './search-page.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { SearchPageModule } from './search-page.module';
+import { ThemedSearchPageComponent } from './themed-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from './themed-configuration-search-page.component';
 
 @NgModule({
   imports: [
@@ -15,8 +15,8 @@ import { SearchPageModule } from './search-page.module';
         path: '',
         resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { title: 'search.title', breadcrumbKey: 'search' },
         children: [
-          { path: '', component: SearchPageComponent },
-          { path: ':configuration', component: ConfigurationSearchPageComponent, canActivate: [ConfigurationSearchPageGuard] }
+          { path: '', component: ThemedSearchPageComponent },
+          { path: ':configuration', component: ThemedConfigurationSearchPageComponent, canActivate: [ConfigurationSearchPageGuard] }
         ]
       }]
     )
diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts
index 286f1d12be..0cf6164f8a 100644
--- a/src/app/+search-page/search-page.module.ts
+++ b/src/app/+search-page/search-page.module.ts
@@ -13,11 +13,13 @@ import { SearchFilterService } from '../core/shared/search/search-filter.service
 import { SearchConfigurationService } from '../core/shared/search/search-configuration.service';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedSearchPageComponent } from './themed-search-page.component';
 
 const components = [
   SearchPageComponent,
   SearchComponent,
-  SearchTrackerComponent
+  SearchTrackerComponent,
+  ThemedSearchPageComponent
 ];
 
 @NgModule({
diff --git a/src/app/+search-page/search.component.html b/src/app/+search-page/search.component.html
index ee96f703f2..7cb16caebe 100644
--- a/src/app/+search-page/search.component.html
+++ b/src/app/+search-page/search.component.html
@@ -45,7 +45,8 @@
                     [scope]="(searchOptions$ | async)?.scope"
                     [currentUrl]="searchLink"
                     [scopes]="(scopeListRD$ | async)"
-                    [inPlaceSearch]="inPlaceSearch">
+                    [inPlaceSearch]="inPlaceSearch"
+                    [searchPlaceholder]="'search.search-form.placeholder' | translate">
     </ds-search-form>
     <div class="row mb-3 mb-md-1">
         <div class="labels col-sm-9 offset-sm-3">
diff --git a/src/app/+search-page/themed-configuration-search-page.component.ts b/src/app/+search-page/themed-configuration-search-page.component.ts
new file mode 100644
index 0000000000..9f7277be0e
--- /dev/null
+++ b/src/app/+search-page/themed-configuration-search-page.component.ts
@@ -0,0 +1,72 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ConfigurationSearchPageComponent } from './configuration-search-page.component';
+import { Observable } from 'rxjs';
+import { Context } from '../core/shared/context.model';
+
+/**
+ * Themed wrapper for ConfigurationSearchPageComponent
+ */
+@Component({
+  selector: 'ds-themed-configuration-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedConfigurationSearchPageComponent extends ThemedComponent<ConfigurationSearchPageComponent> {
+  /**
+   * The configuration to use for the search options
+   * If empty, the configuration will be determined by the route parameter called 'configuration'
+   */
+  @Input() configuration: string;
+
+  /**
+   * The actual query for the fixed filter.
+   * If empty, the query will be determined by the route parameter called 'filter'
+   */
+  @Input() fixedFilterQuery: string;
+
+  /**
+   * True when the search component should show results on the current page
+   */
+  @Input() inPlaceSearch = true;
+
+  /**
+   * Whether or not the search bar should be visible
+   */
+  @Input()
+  searchEnabled = true;
+
+  /**
+   * The width of the sidebar (bootstrap columns)
+   */
+  @Input()
+  sideBarWidth = 3;
+
+  /**
+   * The currently applied configuration (determines title of search)
+   */
+  @Input()
+  configuration$: Observable<string>;
+
+  /**
+   * The current context
+   */
+  @Input()
+  context: Context;
+
+  protected inAndOutputNames: (keyof ConfigurationSearchPageComponent & keyof this)[] =
+    ['configuration', 'fixedFilterQuery', 'inPlaceSearch', 'searchEnabled', 'sideBarWidth', 'configuration$', 'context'];
+
+  protected getComponentName(): string {
+    return 'ConfigurationSearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+search-page/configuration-search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./configuration-search-page.component`);
+  }
+
+}
diff --git a/src/app/+search-page/themed-search-page.component.ts b/src/app/+search-page/themed-search-page.component.ts
new file mode 100644
index 0000000000..0b2f673373
--- /dev/null
+++ b/src/app/+search-page/themed-search-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { SearchPageComponent } from './search-page.component';
+
+/**
+ * Themed wrapper for SearchPageComponent
+ */
+@Component({
+  selector: 'ds-themed-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedSearchPageComponent extends ThemedComponent<SearchPageComponent> {
+
+  protected getComponentName(): string {
+    return 'SearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/+search-page/search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./search-page.component`);
+  }
+}
diff --git a/src/app/+submit-page/submit-page-routing.module.ts b/src/app/+submit-page/submit-page-routing.module.ts
index 7a123bfc31..1572580b6a 100644
--- a/src/app/+submit-page/submit-page-routing.module.ts
+++ b/src/app/+submit-page/submit-page-routing.module.ts
@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionSubmitComponent } from '../submission/submit/submission-submit.component';
+import { ThemedSubmissionSubmitComponent } from '../submission/submit/themed-submission-submit.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -11,8 +12,11 @@ import { SubmissionSubmitComponent } from '../submission/submit/submission-submi
         canActivate: [AuthenticatedGuard],
         path: '',
         pathMatch: 'full',
-        component: SubmissionSubmitComponent,
-        data: { title: 'submission.submit.title' }
+        component: ThemedSubmissionSubmitComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'submission.submit.title', breadcrumbKey: 'submission.submit' }
       }
     ])
   ]
diff --git a/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts b/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts
new file mode 100644
index 0000000000..498975075f
--- /dev/null
+++ b/src/app/+workflowitems-edit-page/workflow-item-delete/themed-workflow-item-delete.component.ts
@@ -0,0 +1,26 @@
+import { WorkflowItemDeleteComponent } from './workflow-item-delete.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { Component } from '@angular/core';
+
+/**
+ * Themed wrapper for WorkflowItemDeleteComponent
+ */
+
+@Component({
+  selector: 'ds-themed-workflow-item-delete',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedWorkflowItemDeleteComponent extends ThemedComponent<WorkflowItemDeleteComponent> {
+  protected getComponentName(): string {
+    return 'WorkflowItemDeleteComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./workflow-item-delete.component`);
+  }
+}
diff --git a/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts b/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts
new file mode 100644
index 0000000000..a2cc68ac74
--- /dev/null
+++ b/src/app/+workflowitems-edit-page/workflow-item-send-back/themed-workflow-item-send-back.component.ts
@@ -0,0 +1,26 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { Component } from '@angular/core';
+import { WorkflowItemSendBackComponent } from './workflow-item-send-back.component';
+
+/**
+ * Themed wrapper for WorkflowItemActionPageComponent
+ */
+
+@Component({
+  selector: 'ds-themed-workflow-item-send-back',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedWorkflowItemSendBackComponent extends ThemedComponent<WorkflowItemSendBackComponent> {
+  protected getComponentName(): string {
+    return 'WorkflowItemSendBackComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./workflow-item-send-back.component`);
+  }
+}
diff --git a/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts b/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
index 27b7fe1199..733eebecc2 100644
--- a/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
+++ b/src/app/+workflowitems-edit-page/workflowitems-edit-page-routing.module.ts
@@ -2,15 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionEditComponent } from '../submission/edit/submission-edit.component';
-import { WorkflowItemDeleteComponent } from './workflow-item-delete/workflow-item-delete.component';
 import { WorkflowItemPageResolver } from './workflow-item-page.resolver';
-import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflow-item-send-back.component';
 import {
-  WORKFLOW_ITEM_SEND_BACK_PATH,
   WORKFLOW_ITEM_DELETE_PATH,
-  WORKFLOW_ITEM_EDIT_PATH
+  WORKFLOW_ITEM_EDIT_PATH,
+  WORKFLOW_ITEM_SEND_BACK_PATH
 } from './workflowitems-edit-page-routing-paths';
+import { ThemedSubmissionEditComponent } from '../submission/edit/themed-submission-edit.component';
+import { ThemedWorkflowItemDeleteComponent } from './workflow-item-delete/themed-workflow-item-delete.component';
+import { ThemedWorkflowItemSendBackComponent } from './workflow-item-send-back/themed-workflow-item-send-back.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -22,20 +23,29 @@ import {
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_EDIT_PATH,
-            component: SubmissionEditComponent,
-            data: { title: 'submission.edit.title' }
+            component: ThemedSubmissionEditComponent,
+            resolve: {
+              breadcrumb: I18nBreadcrumbResolver
+            },
+            data: { title: 'workflow-item.edit.title', breadcrumbKey: 'workflow-item.edit' }
           },
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_DELETE_PATH,
-            component: WorkflowItemDeleteComponent,
-            data: { title: 'workflow-item.delete.title' }
+            component: ThemedWorkflowItemDeleteComponent,
+            resolve: {
+              breadcrumb: I18nBreadcrumbResolver
+            },
+            data: { title: 'workflow-item.delete.title', breadcrumbKey: 'workflow-item.edit' }
           },
           {
             canActivate: [AuthenticatedGuard],
             path: WORKFLOW_ITEM_SEND_BACK_PATH,
-            component: WorkflowItemSendBackComponent,
-            data: { title: 'workflow-item.send-back.title' }
+            component: ThemedWorkflowItemSendBackComponent,
+            resolve: {
+              breadcrumb: I18nBreadcrumbResolver
+            },
+            data: { title: 'workflow-item.send-back.title', breadcrumbKey: 'workflow-item.edit' }
           }
         ]
       }]
diff --git a/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts b/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
index ef1e49abf5..6e4b3212e8 100644
--- a/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
+++ b/src/app/+workflowitems-edit-page/workflowitems-edit-page.module.ts
@@ -5,6 +5,8 @@ import { WorkflowItemsEditPageRoutingModule } from './workflowitems-edit-page-ro
 import { SubmissionModule } from '../submission/submission.module';
 import { WorkflowItemDeleteComponent } from './workflow-item-delete/workflow-item-delete.component';
 import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflow-item-send-back.component';
+import { ThemedWorkflowItemDeleteComponent } from './workflow-item-delete/themed-workflow-item-delete.component';
+import { ThemedWorkflowItemSendBackComponent } from './workflow-item-send-back/themed-workflow-item-send-back.component';
 
 @NgModule({
   imports: [
@@ -13,7 +15,7 @@ import { WorkflowItemSendBackComponent } from './workflow-item-send-back/workflo
     SharedModule,
     SubmissionModule,
   ],
-  declarations: [WorkflowItemDeleteComponent, WorkflowItemSendBackComponent]
+  declarations: [WorkflowItemDeleteComponent, ThemedWorkflowItemDeleteComponent, WorkflowItemSendBackComponent, ThemedWorkflowItemSendBackComponent]
 })
 /**
  * This module handles all modules that need to access the workflowitems edit page.
diff --git a/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts b/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
index d10c53e138..1a58417d0c 100644
--- a/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
+++ b/src/app/+workspaceitems-edit-page/workspaceitems-edit-page-routing.module.ts
@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
-import { SubmissionEditComponent } from '../submission/edit/submission-edit.component';
+import { ThemedSubmissionEditComponent } from '../submission/edit/themed-submission-edit.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 @NgModule({
   imports: [
@@ -11,8 +12,11 @@ import { SubmissionEditComponent } from '../submission/edit/submission-edit.comp
       {
         canActivate: [AuthenticatedGuard],
         path: ':id/edit',
-        component: SubmissionEditComponent,
-        data: { title: 'submission.edit.title' }
+        component: ThemedSubmissionEditComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'submission.edit.title', breadcrumbKey: 'submission.edit' }
       }
     ])
   ]
diff --git a/src/app/+admin/admin-access-control/admin-access-control-routing-paths.ts b/src/app/access-control/access-control-routing-paths.ts
similarity index 56%
rename from src/app/+admin/admin-access-control/admin-access-control-routing-paths.ts
rename to src/app/access-control/access-control-routing-paths.ts
index 2080cb14a7..d229d12bd2 100644
--- a/src/app/+admin/admin-access-control/admin-access-control-routing-paths.ts
+++ b/src/app/access-control/access-control-routing-paths.ts
@@ -1,5 +1,5 @@
-import { URLCombiner } from '../../core/url-combiner/url-combiner';
-import { getAccessControlModuleRoute } from '../admin-routing-paths';
+import { URLCombiner } from '../core/url-combiner/url-combiner';
+import { getAccessControlModuleRoute } from '../app-routing-paths';
 
 export const GROUP_EDIT_PATH = 'groups';
 
diff --git a/src/app/access-control/access-control-routing.module.ts b/src/app/access-control/access-control-routing.module.ts
new file mode 100644
index 0000000000..cac49938a9
--- /dev/null
+++ b/src/app/access-control/access-control-routing.module.ts
@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
+import { GroupFormComponent } from './group-registry/group-form/group-form.component';
+import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
+import { GROUP_EDIT_PATH } from './access-control-routing-paths';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'epeople',
+        component: EPeopleRegistryComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' }
+      },
+      {
+        path: GROUP_EDIT_PATH,
+        component: GroupsRegistryComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' }
+      },
+      {
+        path: `${GROUP_EDIT_PATH}/newGroup`,
+        component: GroupFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'admin.access-control.groups.title.addGroup', breadcrumbKey: 'admin.access-control.groups.addGroup' }
+      },
+      {
+        path: `${GROUP_EDIT_PATH}/:groupId`,
+        component: GroupFormComponent,
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' }
+      }
+    ])
+  ]
+})
+/**
+ * Routing module for the AccessControl section of the admin sidebar
+ */
+export class AccessControlRoutingModule {
+
+}
diff --git a/src/app/+admin/admin-access-control/admin-access-control.module.ts b/src/app/access-control/access-control.module.ts
similarity index 82%
rename from src/app/+admin/admin-access-control/admin-access-control.module.ts
rename to src/app/access-control/access-control.module.ts
index 04051ff46c..0e872458bd 100644
--- a/src/app/+admin/admin-access-control/admin-access-control.module.ts
+++ b/src/app/access-control/access-control.module.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { SharedModule } from '../../shared/shared.module';
-import { AdminAccessControlRoutingModule } from './admin-access-control-routing.module';
+import { SharedModule } from '../shared/shared.module';
+import { AccessControlRoutingModule } from './access-control-routing.module';
 import { EPeopleRegistryComponent } from './epeople-registry/epeople-registry.component';
 import { EPersonFormComponent } from './epeople-registry/eperson-form/eperson-form.component';
 import { GroupFormComponent } from './group-registry/group-form/group-form.component';
@@ -15,7 +15,7 @@ import { GroupsRegistryComponent } from './group-registry/groups-registry.compon
     CommonModule,
     SharedModule,
     RouterModule,
-    AdminAccessControlRoutingModule
+    AccessControlRoutingModule
   ],
   declarations: [
     EPeopleRegistryComponent,
@@ -29,6 +29,6 @@ import { GroupsRegistryComponent } from './group-registry/groups-registry.compon
 /**
  * This module handles all components related to the access control pages
  */
-export class AdminAccessControlModule {
+export class AccessControlModule {
 
 }
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.actions.ts b/src/app/access-control/epeople-registry/epeople-registry.actions.ts
similarity index 91%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.actions.ts
rename to src/app/access-control/epeople-registry/epeople-registry.actions.ts
index 000dc48263..b8b1044362 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.actions.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.actions.ts
@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
-import { EPerson } from '../../../core/eperson/models/eperson.model';
-import { type } from '../../../shared/ngrx/type';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { type } from '../../shared/ngrx/type';
 
 /**
  * For each action type in an action group, make a simple
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
similarity index 77%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.html
rename to src/app/access-control/epeople-registry/epeople-registry.component.html
index 8466ff1817..7ef02a76cf 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -1,46 +1,53 @@
 <div class="container">
   <div class="epeople-registry row">
     <div class="col-12">
+      <div class="d-flex justify-content-between border-bottom mb-3">
+        <h2 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h2>
 
-      <h2 id="header" class="border-bottom pb-2">{{labelPrefix + 'head' | translate}}</h2>
-
-      <ds-eperson-form *ngIf="isEPersonFormShown" (submitForm)="reset()"
-                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>
-
-      <div *ngIf="!isEPersonFormShown">
-        <div class="button-row top d-flex pb-2">
+        <div *ngIf="!isEPersonFormShown">
           <button class="mr-auto btn btn-success addEPerson-button"
                   (click)="isEPersonFormShown = true">
             <i class="fas fa-plus"></i>
             <span class="d-none d-sm-inline">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
         </div>
+      </div>
 
+      <ds-eperson-form *ngIf="isEPersonFormShown" (submitForm)="reset()"
+                       (cancelForm)="isEPersonFormShown = false"></ds-eperson-form>
+
+      <div *ngIf="!isEPersonFormShown">
         <h3 id="search" class="border-bottom pb-2">{{labelPrefix + 'search.head' | translate}}
-          <button (click)="clearFormAndResetResult();"
-                  class="btn btn-primary float-right">{{labelPrefix + 'button.see-all' | translate}}</button>
+
         </h3>
-        <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
-          <div class="col-12 col-sm-3">
+        <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
+          <div>
             <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
               <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
               <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
             </select>
           </div>
-          <div class="col-sm-9 col-12">
+          <div class="flex-grow-1 mr-3 ml-3">
             <div class="form-group input-group">
               <input type="text" name="query" id="query" formControlName="query"
-                    class="form-control" aria-label="Search input">
+                    class="form-control" attr.aria-label="{{labelPrefix + 'search.placeholder' | translate}}"
+                     [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
               <span class="input-group-append">
-              <button type="submit"
-                      class="search-button btn btn-secondary">{{ labelPrefix + 'search.button' | translate }}</button>
-          </span>
+                <button type="submit" class="search-button btn btn-primary">
+                  <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
+                </button>
+              </span>
             </div>
           </div>
+          <div>
+            <button (click)="clearFormAndResetResult();"
+                    class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
+          </div>
         </form>
 
+        <ds-loading *ngIf="searching$ | async"></ds-loading>
         <ds-pagination
-          *ngIf="(pageInfoState$ | async)?.totalElements > 0"
+          *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
           [paginationOptions]="config"
           [pageInfoState]="pageInfoState$"
           [collectionSize]="(pageInfoState$ | async)?.totalElements"
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.spec.ts b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
similarity index 87%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.spec.ts
rename to src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
index 57070a9e88..29baba4409 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.spec.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
@@ -7,24 +7,24 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../core/data/remote-data';
-import { FindListOptions } from '../../../core/data/request.models';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
-import { EPerson } from '../../../core/eperson/models/eperson.model';
-import { PageInfo } from '../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { FindListOptions } from '../../core/data/request.models';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { EPeopleRegistryComponent } from './epeople-registry.component';
-import { EPersonMock, EPersonMock2 } from '../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { RouterStub } from '../../../shared/testing/router.stub';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { RequestService } from '../../../core/data/request.service';
+import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock';
+import { getMockTranslateService } from '../../shared/mocks/translate.service.mock';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { RouterStub } from '../../shared/testing/router.stub';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { RequestService } from '../../core/data/request.service';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
@@ -113,7 +113,7 @@ describe('EPeopleRegistryComponent', () => {
         // empty
       },
       getEPeoplePageRouterLink(): string {
-        return '/admin/access-control/epeople';
+        return '/access-control/epeople';
       }
     };
     authorizationService = jasmine.createSpyObj('authorizationService', {
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.ts b/src/app/access-control/epeople-registry/epeople-registry.component.ts
similarity index 84%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.ts
rename to src/app/access-control/epeople-registry/epeople-registry.component.ts
index 365a62bd4e..3ec8efa940 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.component.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.ts
@@ -4,22 +4,22 @@ import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../core/data/remote-data';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
-import { EPerson } from '../../../core/eperson/models/eperson.model';
-import { hasValue } from '../../../shared/empty.util';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { EpersonDtoModel } from '../../../core/eperson/models/eperson-dto.model';
-import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { getAllSucceededRemoteData, getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { hasValue } from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { EpersonDtoModel } from '../../core/eperson/models/eperson-dto.model';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { getAllSucceededRemoteData, getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RequestService } from '../../../core/data/request.service';
-import { PageInfo } from '../../../core/shared/page-info.model';
-import { NoContent } from '../../../core/shared/NoContent.model';
+import { RequestService } from '../../core/data/request.service';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 
 @Component({
@@ -49,6 +49,11 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    */
   pageInfoState$: BehaviorSubject<PageInfo> = new BehaviorSubject<PageInfo>(undefined);
 
+  /**
+   * A boolean representing if a search is pending
+   */
+  searching$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   /**
    * Pagination config used to display the list of epeople
    */
@@ -105,6 +110,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    * This method will initialise the page
    */
   initialisePage() {
+    this.searching$.next(true);
     this.isEPersonFormShown = false;
     this.search({scope: this.currentSearchScope, query: this.currentSearchQuery});
     this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
@@ -132,7 +138,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
           return [epeople];
         }
       })).subscribe((value: PaginatedList<EpersonDtoModel>) => {
-      this.ePeopleDto$.next(value);
+      this.searching$.next(false);this.ePeopleDto$.next(value);
       this.pageInfoState$.next(value.pageInfo);
     }));
   }
@@ -142,6 +148,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
    * @param data  Contains scope and query param
    */
   search(data: any) {
+    this.searching$.next(true);
     if (hasValue(this.findListOptionsSub)) {
       this.findListOptionsSub.unsubscribe();
     }
@@ -150,14 +157,14 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
           const query: string = data.query;
           const scope: string = data.scope;
           if (query != null && this.currentSearchQuery !== query) {
-            this.router.navigate([], {
+            this.router.navigate(this.epersonService.getEPeoplePageRouterLink(), {
               queryParamsHandling: 'merge'
             });
             this.currentSearchQuery = query;
             this.paginationService.resetPage(this.config.id);
           }
           if (scope != null && this.currentSearchScope !== scope) {
-            this.router.navigate([], {
+            this.router.navigate(this.epersonService.getEPeoplePageRouterLink(), {
               queryParamsHandling: 'merge'
             });
             this.currentSearchScope = scope;
@@ -223,6 +230,8 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
       modalRef.componentInstance.confirmLabel = 'confirmation-modal.delete-eperson.confirm';
+      modalRef.componentInstance.brandColor = 'danger';
+      modalRef.componentInstance.confirmIcon = 'fas fa-trash';
       modalRef.componentInstance.response.pipe(take(1)).subscribe((confirm: boolean) => {
         if (confirm) {
           if (hasValue(ePerson.id)) {
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.spec.ts b/src/app/access-control/epeople-registry/epeople-registry.reducers.spec.ts
similarity index 96%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.spec.ts
rename to src/app/access-control/epeople-registry/epeople-registry.reducers.spec.ts
index 87ab70a942..7158acc79b 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.spec.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.reducers.spec.ts
@@ -1,6 +1,6 @@
 import { EPeopleRegistryCancelEPersonAction, EPeopleRegistryEditEPersonAction } from './epeople-registry.actions';
 import { ePeopleRegistryReducer, EPeopleRegistryState } from './epeople-registry.reducers';
-import { EPersonMock } from '../../../shared/testing/eperson.mock';
+import { EPersonMock } from '../../shared/testing/eperson.mock';
 
 const initialState: EPeopleRegistryState = {
   editEPerson: null,
diff --git a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.ts b/src/app/access-control/epeople-registry/epeople-registry.reducers.ts
similarity index 93%
rename from src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.ts
rename to src/app/access-control/epeople-registry/epeople-registry.reducers.ts
index 42b31d61e9..1e0319f3ba 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/epeople-registry.reducers.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.reducers.ts
@@ -1,4 +1,4 @@
-import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { EPerson } from '../../core/eperson/models/eperson.model';
 import {
   EPeopleRegistryAction,
   EPeopleRegistryActionTypes,
diff --git a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
similarity index 62%
rename from src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.html
rename to src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
index 3f744240e5..c613cfdcad 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -12,19 +12,27 @@
          [formModel]="formModel"
          [formGroup]="formGroup"
          [formLayout]="formLayout"
-         (cancel)="onCancel()"
+         [displayCancel]="false"
          (submitForm)="onSubmit()">
-  <button class="btn btn-light" [disabled]="!(canReset$ | async)">
-    <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
-  </button>
-  <button class="btn btn-light delete-button" [disabled]="!(canDelete$ | async)" (click)="delete()">
-    <i class="fa fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
-  </button>
-  <button *ngIf="!isImpersonated" class="btn btn-light" [ngClass]="{'d-none' : !(canImpersonate$ | async)}" (click)="impersonate()">
-    <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
-  </button>
-  <button *ngIf="isImpersonated" class="btn btn-light" (click)="stopImpersonating()">
-    <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
+  <div before class="btn-group">
+    <button (click)="onCancel()"
+            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+  </div>
+  <div between class="btn-group">
+    <button class="btn btn-primary" [disabled]="!(canReset$ | async)">
+      <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
+    </button>
+  </div>
+  <div between class="btn-group ml-1">
+    <button *ngIf="!isImpersonated" class="btn btn-primary" [ngClass]="{'d-none' : !(canImpersonate$ | async)}" (click)="impersonate()">
+      <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
+    </button>
+    <button *ngIf="isImpersonated" class="btn btn-primary" (click)="stopImpersonating()">
+      <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
+    </button>
+  </div>
+  <button after class="btn btn-danger delete-button" [disabled]="!(canDelete$ | async)" (click)="delete()">
+    <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
   </button>
 </ds-form>
 
diff --git a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
similarity index 87%
rename from src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
rename to src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
index 94aab9809a..66f633ceef 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
@@ -6,26 +6,26 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { FindListOptions } from '../../../../core/data/request.models';
-import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
-import { EPerson } from '../../../../core/eperson/models/eperson.model';
-import { PageInfo } from '../../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { FindListOptions } from '../../../core/data/request.models';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { PageInfo } from '../../../core/shared/page-info.model';
+import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { EPersonFormComponent } from './eperson-form.component';
-import { EPersonMock, EPersonMock2 } from '../../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
-import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
-import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
-import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
-import { AuthService } from '../../../../core/auth/auth.service';
-import { AuthServiceStub } from '../../../../shared/testing/auth-service.stub';
-import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
-import { GroupDataService } from '../../../../core/eperson/group-data.service';
-import { createPaginatedList } from '../../../../shared/testing/utils.test';
-import { RequestService } from '../../../../core/data/request.service';
+import { EPersonMock, EPersonMock2 } from '../../../shared/testing/eperson.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { AuthService } from '../../../core/auth/auth.service';
+import { AuthServiceStub } from '../../../shared/testing/auth-service.stub';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
+import { createPaginatedList } from '../../../shared/testing/utils.test';
+import { RequestService } from '../../../core/data/request.service';
 import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
diff --git a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
similarity index 91%
rename from src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.ts
rename to src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
index f2b18ab638..faf3b34454 100644
--- a/src/app/+admin/admin-access-control/epeople-registry/eperson-form/eperson-form.component.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
@@ -9,28 +9,28 @@ import {
 import { TranslateService } from '@ngx-translate/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
 import { switchMap, take } from 'rxjs/operators';
-import { PaginatedList } from '../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../../core/eperson/group-data.service';
-import { EPerson } from '../../../../core/eperson/models/eperson.model';
-import { Group } from '../../../../core/eperson/models/group.model';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
+import { EPerson } from '../../../core/eperson/models/eperson.model';
+import { Group } from '../../../core/eperson/models/group.model';
 import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
   getRemoteDataPayload
-} from '../../../../core/shared/operators';
-import { hasValue } from '../../../../shared/empty.util';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
-import { AuthService } from '../../../../core/auth/auth.service';
-import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
-import { ConfirmationModalComponent } from '../../../../shared/confirmation-modal/confirmation-modal.component';
+} from '../../../core/shared/operators';
+import { hasValue } from '../../../shared/empty.util';
+import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { AuthService } from '../../../core/auth/auth.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
+import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RequestService } from '../../../../core/data/request.service';
-import { NoContent } from '../../../../core/shared/NoContent.model';
+import { RequestService } from '../../../core/data/request.service';
+import { NoContent } from '../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 
 @Component({
@@ -456,6 +456,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
         modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
         modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';
         modalRef.componentInstance.confirmLabel = 'confirmation-modal.delete-eperson.confirm';
+        modalRef.componentInstance.brandColor = 'danger';
+        modalRef.componentInstance.confirmIcon = 'fas fa-trash';
         modalRef.componentInstance.response.pipe(take(1)).subscribe((confirm: boolean) => {
           if (confirm) {
             if (hasValue(eperson.id)) {
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html
similarity index 71%
rename from src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.html
rename to src/app/access-control/group-registry/group-form/group-form.component.html
index a0d8a45255..0fc5a574b7 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.html
+++ b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -1,11 +1,6 @@
 <div class="container">
   <div class="group-form row">
     <div class="col-12">
-      <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
-                [content]="messagePrefix + '.alert.permanent'"></ds-alert>
-      <ds-alert *ngIf="!(canEdit$ | async) && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
-                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: (getLinkedDSO(groupBeingEdited) | async)?.payload?.name, comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
-      </ds-alert>
 
       <div *ngIf="groupDataService.getActiveGroup() | async; then editheader; else createHeader"></div>
 
@@ -17,29 +12,38 @@
         <h2 class="border-bottom pb-2">{{messagePrefix + '.head.edit' | translate}}</h2>
       </ng-template>
 
+      <ds-alert *ngIf="groupBeingEdited?.permanent" [type]="AlertTypeEnum.Warning"
+                [content]="messagePrefix + '.alert.permanent'"></ds-alert>
+      <ds-alert *ngIf="!(canEdit$ | async) && (groupDataService.getActiveGroup() | async)" [type]="AlertTypeEnum.Warning"
+                [content]="(messagePrefix + '.alert.workflowGroup' | translate:{ name: (getLinkedDSO(groupBeingEdited) | async)?.payload?.name, comcol: (getLinkedDSO(groupBeingEdited) | async)?.payload?.type, comcolEditRolesRoute: (getLinkedEditRolesRoute(groupBeingEdited) | async) })">
+      </ds-alert>
+
       <ds-form [formId]="formId"
                [formModel]="formModel"
                [formGroup]="formGroup"
                [formLayout]="formLayout"
-               (cancel)="onCancel()"
+               [displayCancel]="false"
                (submitForm)="onSubmit()">
-        <div *ngIf="groupBeingEdited != null" class="row">
-          <button class="btn btn-light delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
+        <div before class="btn-group">
+          <button (click)="onCancel()"
+                  class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+        </div>
+        <div after *ngIf="groupBeingEdited != null" class="btn-group">
+          <button class="btn btn-danger delete-button" [disabled]="!(canEdit$ | async) || groupBeingEdited.permanent"
                   (click)="delete()">
             <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
           </button>
         </div>
       </ds-form>
 
-      <ds-members-list *ngIf="groupBeingEdited != null"
-                       [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+      <div class="mb-5">
+        <ds-members-list *ngIf="groupBeingEdited != null"
+                         [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+      </div>
       <ds-subgroups-list *ngIf="groupBeingEdited != null"
                          [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
 
-      <div>
-        <button [routerLink]="[this.groupDataService.getGroupRegistryRouterLink()]"
-                class="btn btn-primary">{{messagePrefix + '.return' | translate}}</button>
-      </div>
+
 
     </div>
   </div>
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.spec.ts b/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
similarity index 77%
rename from src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.spec.ts
rename to src/app/access-control/group-registry/group-form/group-form.component.spec.ts
index fd5edf0354..d213a071d7 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.spec.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.spec.ts
@@ -9,30 +9,30 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
-import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
-import { ObjectCacheService } from '../../../../core/cache/object-cache.service';
-import { DSOChangeAnalyzer } from '../../../../core/data/dso-change-analyzer.service';
-import { DSpaceObjectDataService } from '../../../../core/data/dspace-object-data.service';
-import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
-import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../../core/eperson/group-data.service';
-import { Group } from '../../../../core/eperson/models/group.model';
-import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
-import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
-import { PageInfo } from '../../../../core/shared/page-info.model';
-import { UUIDService } from '../../../../core/shared/uuid.service';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
+import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { DSOChangeAnalyzer } from '../../../core/data/dso-change-analyzer.service';
+import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
+import { Group } from '../../../core/eperson/models/group.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
+import { PageInfo } from '../../../core/shared/page-info.model';
+import { UUIDService } from '../../../core/shared/uuid.service';
+import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { GroupMock, GroupMock2 } from '../../../shared/testing/group-mock';
 import { GroupFormComponent } from './group-form.component';
-import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
-import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
-import { RouterMock } from '../../../../shared/mocks/router.mock';
-import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
+import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
+import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
+import { RouterMock } from '../../../shared/mocks/router.mock';
+import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
 import { Operation } from 'fast-json-patch';
 
 describe('GroupFormComponent', () => {
@@ -75,7 +75,7 @@ describe('GroupFormComponent', () => {
         return observableOf(this.activeGroup);
       },
       getGroupRegistryRouterLink(): string {
-        return '/admin/access-control/groups';
+        return '/access-control/groups';
       },
       editGroup(group: Group) {
         this.activeGroup = group;
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.ts b/src/app/access-control/group-registry/group-form/group-form.component.ts
similarity index 89%
rename from src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.ts
rename to src/app/access-control/group-registry/group-form/group-form.component.ts
index 7984fc50d1..9b74d26fe8 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/group-form.component.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.ts
@@ -17,32 +17,32 @@ import {
   Subscription
 } from 'rxjs';
 import { catchError, map, switchMap, take } from 'rxjs/operators';
-import { getCollectionEditRolesRoute } from '../../../../+collection-page/collection-page-routing-paths';
-import { getCommunityEditRolesRoute } from '../../../../+community-page/community-page-routing-paths';
-import { DSpaceObjectDataService } from '../../../../core/data/dspace-object-data.service';
-import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
-import { PaginatedList } from '../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../core/data/remote-data';
-import { RequestService } from '../../../../core/data/request.service';
-import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../../core/eperson/group-data.service';
-import { Group } from '../../../../core/eperson/models/group.model';
-import { Collection } from '../../../../core/shared/collection.model';
-import { Community } from '../../../../core/shared/community.model';
-import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { getCollectionEditRolesRoute } from '../../../+collection-page/collection-page-routing-paths';
+import { getCommunityEditRolesRoute } from '../../../+community-page/community-page-routing-paths';
+import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { RequestService } from '../../../core/data/request.service';
+import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../core/eperson/group-data.service';
+import { Group } from '../../../core/eperson/models/group.model';
+import { Collection } from '../../../core/shared/collection.model';
+import { Community } from '../../../core/shared/community.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import {
   getRemoteDataPayload,
   getFirstSucceededRemoteData,
   getFirstCompletedRemoteData
-} from '../../../../core/shared/operators';
-import { AlertType } from '../../../../shared/alert/aletr-type';
-import { ConfirmationModalComponent } from '../../../../shared/confirmation-modal/confirmation-modal.component';
-import { hasValue, isNotEmpty, hasValueOperator } from '../../../../shared/empty.util';
-import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../shared/notifications/notifications.service';
-import { followLink } from '../../../../shared/utils/follow-link-config.model';
-import { NoContent } from '../../../../core/shared/NoContent.model';
+} from '../../../core/shared/operators';
+import { AlertType } from '../../../shared/alert/aletr-type';
+import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
+import { hasValue, isNotEmpty, hasValueOperator } from '../../../shared/empty.util';
+import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { followLink } from '../../../shared/utils/follow-link-config.model';
+import { NoContent } from '../../../core/shared/NoContent.model';
 import { Operation } from 'fast-json-patch';
 
 @Component({
@@ -368,6 +368,8 @@ export class GroupFormComponent implements OnInit, OnDestroy {
       modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-group.modal.info';
       modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-group.modal.cancel';
       modalRef.componentInstance.confirmLabel = this.messagePrefix + '.delete-group.modal.confirm';
+      modalRef.componentInstance.brandColor = 'danger';
+      modalRef.componentInstance.confirmIcon = 'fas fa-trash';
       modalRef.componentInstance.response.pipe(take(1)).subscribe((confirm: boolean) => {
         if (confirm) {
           if (hasValue(group.id)) {
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
similarity index 91%
rename from src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.html
rename to src/app/access-control/group-registry/group-form/members-list/members-list.component.html
index 54308a82ed..51282b49c0 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.html
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -2,26 +2,29 @@
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
   <h4 id="search" class="border-bottom pb-2">{{messagePrefix + '.search.head' | translate}}
-    <button (click)="clearFormAndResetResult();"
-            class="btn btn-primary float-right">{{messagePrefix + '.button.see-all' | translate}}</button>
+
   </h4>
-  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
-    <div class="col-12 col-sm-3">
+  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
+    <div>
       <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
         <option value="metadata">{{messagePrefix + '.search.scope.metadata' | translate}}</option>
         <option value="email">{{messagePrefix + '.search.scope.email' | translate}}</option>
       </select>
     </div>
-    <div class="col-sm-9 col-12">
+    <div class="flex-grow-1 mr-3 ml-3">
       <div class="form-group input-group">
         <input type="text" name="query" id="query" formControlName="query"
                class="form-control" aria-label="Search input">
         <span class="input-group-append">
-            <button type="submit"
-                    class="search-button btn btn-secondary">{{ messagePrefix + '.search.button' | translate }}</button>
+            <button type="submit" class="search-button btn btn-primary">
+              <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}</button>
         </span>
       </div>
     </div>
+    <div>
+      <button (click)="clearFormAndResetResult();"
+              class="btn btn-secondary">{{messagePrefix + '.button.see-all' | translate}}</button>
+    </div>
   </form>
 
   <ds-pagination *ngIf="(ePeopleSearchDtos | async)?.totalElements > 0"
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.spec.ts b/src/app/access-control/group-registry/group-form/members-list/members-list.component.spec.ts
similarity index 85%
rename from src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.spec.ts
rename to src/app/access-control/group-registry/group-form/members-list/members-list.component.spec.ts
index 8a9cc94e13..186cfb713b 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.spec.ts
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.spec.ts
@@ -7,25 +7,25 @@ import { Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
-import { RestResponse } from '../../../../../core/cache/response.models';
-import { buildPaginatedList, PaginatedList } from '../../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../../core/data/remote-data';
-import { EPersonDataService } from '../../../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../../../core/eperson/group-data.service';
-import { EPerson } from '../../../../../core/eperson/models/eperson.model';
-import { Group } from '../../../../../core/eperson/models/group.model';
-import { PageInfo } from '../../../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../../../shared/testing/group-mock';
+import { RestResponse } from '../../../../core/cache/response.models';
+import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { EPerson } from '../../../../core/eperson/models/eperson.model';
+import { Group } from '../../../../core/eperson/models/group.model';
+import { PageInfo } from '../../../../core/shared/page-info.model';
+import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
 import { MembersListComponent } from './members-list.component';
-import { EPersonMock, EPersonMock2 } from '../../../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-data.utils';
-import { getMockTranslateService } from '../../../../../shared/mocks/translate.service.mock';
-import { getMockFormBuilderService } from '../../../../../shared/mocks/form-builder-service.mock';
-import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../../../shared/testing/notifications-service.stub';
-import { RouterMock } from '../../../../../shared/mocks/router.mock';
+import { EPersonMock, EPersonMock2 } from '../../../../shared/testing/eperson.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
+import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
+import { RouterMock } from '../../../../shared/mocks/router.mock';
 import { PaginationComponentOptions } from '../../../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../../../core/cache/models/sort-options.model';
 import { FindListOptions } from '../../../../../core/data/request.models';
@@ -72,7 +72,7 @@ describe('MembersListComponent', () => {
         // empty
       },
       getEPeoplePageRouterLink(): string {
-        return '/admin/access-control/epeople';
+        return '/access-control/epeople';
       }
     };
     groupsDataServiceStub = {
@@ -103,7 +103,7 @@ describe('MembersListComponent', () => {
         // empty
       },
       getGroupEditPageRouterLink(group: Group): string {
-        return '/admin/access-control/groups/' + group.id;
+        return '/access-control/groups/' + group.id;
       },
       deleteMemberFromGroup(parentGroup, epersonToDelete: EPerson): Observable<RestResponse> {
         this.epersonMembers = this.epersonMembers.find((eperson: EPerson) => {
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.ts b/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
similarity index 92%
rename from src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.ts
rename to src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
index 1156921bc3..b4032520e0 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/members-list/members-list.component.ts
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
@@ -11,21 +11,20 @@ import {
   ObservedValueOf,
 } from 'rxjs';
 import { map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { buildPaginatedList, PaginatedList } from '../../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../../core/data/remote-data';
-import { EPersonDataService } from '../../../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../../../core/eperson/group-data.service';
-import { EPerson } from '../../../../../core/eperson/models/eperson.model';
-import { Group } from '../../../../../core/eperson/models/group.model';
+import {buildPaginatedList, PaginatedList} from '../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { EPersonDataService } from '../../../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { EPerson } from '../../../../core/eperson/models/eperson.model';
+import { Group } from '../../../../core/eperson/models/group.model';
 import {
   getFirstSucceededRemoteData,
-  getFirstCompletedRemoteData,
-  getAllCompletedRemoteData, getRemoteDataPayload
-} from '../../../../../core/shared/operators';
-import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../../../shared/pagination/pagination-component-options.model';
+  getFirstCompletedRemoteData, getAllCompletedRemoteData, getRemoteDataPayload
+} from '../../../../core/shared/operators';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 import { PaginationService } from '../../../../../core/pagination/pagination.service';
-import { EpersonDtoModel } from '../../../../../core/eperson/models/eperson-dto.model';
+import {EpersonDtoModel} from '../../../../core/eperson/models/eperson-dto.model';
 
 /**
  * Keys to keep track of specific subscriptions
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
similarity index 90%
rename from src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
rename to src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
index 93d968e126..5b87045e78 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
@@ -2,20 +2,26 @@
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
   <h4 id="search" class="border-bottom pb-2">{{messagePrefix + '.search.head' | translate}}
-    <button (click)="clearFormAndResetResult();"
-            class="btn btn-primary float-right">{{messagePrefix + '.button.see-all' | translate}}</button>
+
   </h4>
-  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
-    <div class="col-12">
-      <div class="form-group input-group">
+  <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
+    <div class="flex-grow-1 mr-3">
+      <div class="form-group input-group mr-3">
         <input type="text" name="query" id="query" formControlName="query"
                class="form-control" aria-label="Search input">
         <span class="input-group-append">
-            <button type="submit"
-                    class="search-button btn btn-secondary">{{ messagePrefix + '.search.button' | translate }}</button>
+            <button type="submit" class="search-button btn btn-primary">
+              <i class="fas fa-search"></i> {{ messagePrefix + '.search.button' | translate }}
+            </button>
         </span>
+
       </div>
     </div>
+    <div>
+      <button (click)="clearFormAndResetResult();" class="btn btn-secondary float-right">
+        {{messagePrefix + '.button.see-all' | translate}}
+      </button>
+    </div>
   </form>
 
   <ds-pagination *ngIf="(searchResults$ | async)?.payload?.totalElements > 0"
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts
similarity index 87%
rename from src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts
rename to src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts
index 087b9ebc39..af54a60da6 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.spec.ts
@@ -15,25 +15,25 @@ import { Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
-import { RestResponse } from '../../../../../core/cache/response.models';
-import { buildPaginatedList, PaginatedList } from '../../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../../core/data/remote-data';
-import { GroupDataService } from '../../../../../core/eperson/group-data.service';
-import { Group } from '../../../../../core/eperson/models/group.model';
-import { PageInfo } from '../../../../../core/shared/page-info.model';
-import { FormBuilderService } from '../../../../../shared/form/builder/form-builder.service';
-import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../../../shared/testing/group-mock';
+import { RestResponse } from '../../../../core/cache/response.models';
+import { buildPaginatedList, PaginatedList } from '../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { Group } from '../../../../core/eperson/models/group.model';
+import { PageInfo } from '../../../../core/shared/page-info.model';
+import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { GroupMock, GroupMock2 } from '../../../../shared/testing/group-mock';
 import { SubgroupsListComponent } from './subgroups-list.component';
 import {
   createSuccessfulRemoteDataObject$,
   createSuccessfulRemoteDataObject
-} from '../../../../../shared/remote-data.utils';
-import { RouterMock } from '../../../../../shared/mocks/router.mock';
-import { getMockFormBuilderService } from '../../../../../shared/mocks/form-builder-service.mock';
-import { getMockTranslateService } from '../../../../../shared/mocks/translate.service.mock';
-import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../../../shared/testing/notifications-service.stub';
+} from '../../../../shared/remote-data.utils';
+import { RouterMock } from '../../../../shared/mocks/router.mock';
+import { getMockFormBuilderService } from '../../../../shared/mocks/form-builder-service.mock';
+import { getMockTranslateService } from '../../../../shared/mocks/translate.service.mock';
+import { TranslateLoaderMock } from '../../../../shared/testing/translate-loader.mock';
+import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../../../core/cache/models/sort-options.model';
@@ -76,7 +76,7 @@ describe('SubgroupsListComponent', () => {
         );
       },
       getGroupEditPageRouterLink(group: Group): string {
-        return '/admin/access-control/groups/' + group.id;
+        return '/access-control/groups/' + group.id;
       },
       searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
         if (query === '') {
diff --git a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts
similarity index 93%
rename from src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts
rename to src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts
index 13d89d2ce1..1aee7048f7 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.ts
@@ -4,18 +4,18 @@ import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs';
 import { map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { PaginatedList } from '../../../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../../../core/data/remote-data';
-import { GroupDataService } from '../../../../../core/eperson/group-data.service';
-import { Group } from '../../../../../core/eperson/models/group.model';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { Group } from '../../../../core/eperson/models/group.model';
 import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
   getRemoteDataPayload
-} from '../../../../../core/shared/operators';
-import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../../../shared/pagination/pagination-component-options.model';
-import { NoContent } from '../../../../../core/shared/NoContent.model';
+} from '../../../../core/shared/operators';
+import { NotificationsService } from '../../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { NoContent } from '../../../../core/shared/NoContent.model';
 import { PaginationService } from '../../../../../core/pagination/pagination.service';
 
 /**
diff --git a/src/app/+admin/admin-access-control/group-registry/group-registry.actions.ts b/src/app/access-control/group-registry/group-registry.actions.ts
similarity index 91%
rename from src/app/+admin/admin-access-control/group-registry/group-registry.actions.ts
rename to src/app/access-control/group-registry/group-registry.actions.ts
index b5ba3bc4b5..bc1c0b97a6 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-registry.actions.ts
+++ b/src/app/access-control/group-registry/group-registry.actions.ts
@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
-import { Group } from '../../../core/eperson/models/group.model';
-import { type } from '../../../shared/ngrx/type';
+import { Group } from '../../core/eperson/models/group.model';
+import { type } from '../../shared/ngrx/type';
 
 /**
  * For each action type in an action group, make a simple
diff --git a/src/app/+admin/admin-access-control/group-registry/group-registry.reducers.spec.ts b/src/app/access-control/group-registry/group-registry.reducers.spec.ts
similarity index 96%
rename from src/app/+admin/admin-access-control/group-registry/group-registry.reducers.spec.ts
rename to src/app/access-control/group-registry/group-registry.reducers.spec.ts
index 6c9f9d327a..de5b65f5ba 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-registry.reducers.spec.ts
+++ b/src/app/access-control/group-registry/group-registry.reducers.spec.ts
@@ -1,4 +1,4 @@
-import { GroupMock } from '../../../shared/testing/group-mock';
+import { GroupMock } from '../../shared/testing/group-mock';
 import { GroupRegistryCancelGroupAction, GroupRegistryEditGroupAction } from './group-registry.actions';
 import { groupRegistryReducer, GroupRegistryState } from './group-registry.reducers';
 
diff --git a/src/app/+admin/admin-access-control/group-registry/group-registry.reducers.ts b/src/app/access-control/group-registry/group-registry.reducers.ts
similarity index 93%
rename from src/app/+admin/admin-access-control/group-registry/group-registry.reducers.ts
rename to src/app/access-control/group-registry/group-registry.reducers.ts
index eca6c282a7..8e288b7f3a 100644
--- a/src/app/+admin/admin-access-control/group-registry/group-registry.reducers.ts
+++ b/src/app/access-control/group-registry/group-registry.reducers.ts
@@ -1,4 +1,4 @@
-import { Group } from '../../../core/eperson/models/group.model';
+import { Group } from '../../core/eperson/models/group.model';
 import { GroupRegistryAction, GroupRegistryActionTypes, GroupRegistryEditGroupAction } from './group-registry.actions';
 
 /**
diff --git a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
similarity index 65%
rename from src/app/+admin/admin-access-control/group-registry/groups-registry.component.html
rename to src/app/access-control/group-registry/groups-registry.component.html
index a760423fc5..e5e25ae944 100644
--- a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -1,43 +1,48 @@
 <div class="container">
   <div class="groups-registry row">
     <div class="col-12">
-
-      <h2 id="header" class="border-bottom pb-2">{{messagePrefix + 'head' | translate}}</h2>
-
-      <div class="button-row top d-flex pb-2">
-        <button class="mr-auto btn btn-success"
-                [routerLink]="['newGroup']">
-          <i class="fas fa-plus"></i>
-          <span class="d-none d-sm-inline">{{messagePrefix + 'button.add' | translate}}</span>
-        </button>
+      <div class="d-flex justify-content-between border-bottom mb-3">
+        <h2 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h2>
+        <div>
+          <button class="mr-auto btn btn-success"
+                  [routerLink]="['newGroup']">
+            <i class="fas fa-plus"></i>
+            <span class="d-none d-sm-inline">{{messagePrefix + 'button.add' | translate}}</span>
+          </button>
+        </div>
       </div>
 
-      <h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}
-        <button (click)="clearFormAndResetResult();"
-                class="btn btn-primary float-right">{{messagePrefix + 'button.see-all' | translate}}</button>
-      </h3>
-      <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="row">
-        <div class="col-12">
+      <h3 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h3>
+      <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
+        <div class="flex-grow-1 mr-3">
           <div class="form-group input-group">
             <input type="text" name="query" id="query" formControlName="query"
-                   class="form-control" aria-label="Search input">
+                   class="form-control" attr.aria-label="{{messagePrefix + 'search.placeholder' | translate}}"
+                   [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
             <span class="input-group-append">
-            <button type="submit"
-                    class="search-button btn btn-secondary">{{ messagePrefix + 'search.button' | translate }}</button>
-        </span>
+              <button type="submit" class="search-button btn btn-primary">
+                <i class="fas fa-search"></i> {{ messagePrefix + 'search.button' | translate }}
+              </button>
+            </span>
           </div>
         </div>
+        <div>
+          <button (click)="clearFormAndResetResult();" class="btn btn-secondary">
+            {{messagePrefix + 'button.see-all' | translate}}
+          </button>
+        </div>
       </form>
 
+      <ds-loading *ngIf="searching$ | async"></ds-loading>
       <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0"
+        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
         [paginationOptions]="config"
         [pageInfoState]="pageInfoState$"
         [collectionSize]="(pageInfoState$ | async)?.totalElements"
         [hideGear]="true"
         [hidePagerWhenSinglePage]="true">
 
-        <div class="table-responsive">
+        <div  class="table-responsive">
           <table id="groups" class="table table-striped table-hover table-bordered">
             <thead>
             <tr>
diff --git a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.spec.ts b/src/app/access-control/group-registry/groups-registry.component.spec.ts
similarity index 81%
rename from src/app/+admin/admin-access-control/group-registry/groups-registry.component.spec.ts
rename to src/app/access-control/group-registry/groups-registry.component.spec.ts
index 88f2a53b3c..b0b954c4e4 100644
--- a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.spec.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.spec.ts
@@ -7,27 +7,27 @@ import { Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
-import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../core/data/remote-data';
-import { RequestService } from '../../../core/data/request.service';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../core/eperson/group-data.service';
-import { EPerson } from '../../../core/eperson/models/eperson.model';
-import { Group } from '../../../core/eperson/models/group.model';
-import { RouteService } from '../../../core/services/route.service';
-import { DSpaceObject } from '../../../core/shared/dspace-object.model';
-import { PageInfo } from '../../../core/shared/page-info.model';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { GroupMock, GroupMock2 } from '../../../shared/testing/group-mock';
+import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { RequestService } from '../../core/data/request.service';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../core/eperson/group-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { Group } from '../../core/eperson/models/group.model';
+import { RouteService } from '../../core/services/route.service';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { GroupMock, GroupMock2 } from '../../shared/testing/group-mock';
 import { GroupsRegistryComponent } from './groups-registry.component';
-import { EPersonMock, EPersonMock2 } from '../../../shared/testing/eperson.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
-import { TranslateLoaderMock } from '../../../shared/testing/translate-loader.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { routeServiceStub } from '../../../shared/testing/route-service.stub';
-import { RouterMock } from '../../../shared/mocks/router.mock';
+import { EPersonMock, EPersonMock2 } from '../../shared/testing/eperson.mock';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { TranslateLoaderMock } from '../../shared/testing/translate-loader.mock';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { routeServiceStub } from '../../shared/testing/route-service.stub';
+import { RouterMock } from '../../shared/mocks/router.mock';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
 import { FindListOptions } from '../../../core/data/request.models';
@@ -104,10 +104,10 @@ describe('GroupRegistryComponent', () => {
         }
       },
       getGroupEditPageRouterLink(group: Group): string {
-        return '/admin/access-control/groups/' + group.id;
+        return '/access-control/groups/' + group.id;
       },
       getGroupRegistryRouterLink(): string {
-        return '/admin/access-control/groups';
+        return '/access-control/groups';
       },
       searchGroups(query: string): Observable<RemoteData<PaginatedList<Group>>> {
         if (query === '') {
diff --git a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.ts b/src/app/access-control/group-registry/groups-registry.component.ts
similarity index 83%
rename from src/app/+admin/admin-access-control/group-registry/groups-registry.component.ts
rename to src/app/access-control/group-registry/groups-registry.component.ts
index cb55f0f2cd..f7834949e0 100644
--- a/src/app/+admin/admin-access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -10,30 +10,30 @@ import {
   Subscription
 } from 'rxjs';
 import { catchError, map, switchMap, take } from 'rxjs/operators';
-import { DSpaceObjectDataService } from '../../../core/data/dspace-object-data.service';
-import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
-import { buildPaginatedList, PaginatedList } from '../../../core/data/paginated-list.model';
-import { RemoteData } from '../../../core/data/remote-data';
-import { RequestService } from '../../../core/data/request.service';
-import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
-import { GroupDataService } from '../../../core/eperson/group-data.service';
-import { EPerson } from '../../../core/eperson/models/eperson.model';
-import { GroupDtoModel } from '../../../core/eperson/models/group-dto.model';
-import { Group } from '../../../core/eperson/models/group.model';
-import { RouteService } from '../../../core/services/route.service';
-import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { buildPaginatedList, PaginatedList } from '../../core/data/paginated-list.model';
+import { RemoteData } from '../../core/data/remote-data';
+import { RequestService } from '../../core/data/request.service';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { GroupDataService } from '../../core/eperson/group-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { GroupDtoModel } from '../../core/eperson/models/group-dto.model';
+import { Group } from '../../core/eperson/models/group.model';
+import { RouteService } from '../../core/services/route.service';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import {
   getAllSucceededRemoteData,
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
   getRemoteDataPayload
-} from '../../../core/shared/operators';
-import { PageInfo } from '../../../core/shared/page-info.model';
-import { hasValue } from '../../../shared/empty.util';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { NoContent } from '../../../core/shared/NoContent.model';
+} from '../../core/shared/operators';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { hasValue } from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { NoContent } from '../../core/shared/NoContent.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 
 @Component({
@@ -72,6 +72,11 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
   // The search form
   searchForm;
 
+  /**
+   * A boolean representing if a search is pending
+   */
+  searching$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   // Current search in groups registry
   currentSearchQuery: string;
 
@@ -113,6 +118,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param data  Contains query param
    */
   search(data: any) {
+    this.searching$.next(true);
     if (hasValue(this.searchSub)) {
       this.searchSub.unsubscribe();
       this.subs = this.subs.filter((sub: Subscription) => sub !== this.searchSub);
@@ -162,6 +168,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     ).subscribe((value: PaginatedList<GroupDtoModel>) => {
       this.groupsDto$.next(value);
       this.pageInfoState$.next(value.pageInfo);
+      this.searching$.next(false);
     });
 
     this.subs.push(this.searchSub);
diff --git a/src/app/app-routing-paths.ts b/src/app/app-routing-paths.ts
index 24108dadd5..08f7b9585f 100644
--- a/src/app/app-routing-paths.ts
+++ b/src/app/app-routing-paths.ts
@@ -74,3 +74,9 @@ export const INFO_MODULE_PATH = 'info';
 export function getInfoModulePath() {
   return `/${INFO_MODULE_PATH}`;
 }
+
+export const ACCESS_CONTROL_MODULE_PATH = 'access-control';
+
+export function getAccessControlModuleRoute() {
+  return `/${ACCESS_CONTROL_MODULE_PATH}`;
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5e5c5f5413..ffbd993e8c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
-import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
 import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
+  ACCESS_CONTROL_MODULE_PATH,
   ADMIN_MODULE_PATH,
   BITSTREAM_MODULE_PATH,
   FORBIDDEN_PATH,
@@ -13,7 +13,7 @@ import {
   INFO_MODULE_PATH,
   PROFILE_MODULE_PATH,
   REGISTER_PATH,
-  WORKFLOW_ITEM_MODULE_PATH
+  WORKFLOW_ITEM_MODULE_PATH,
 } from './app-routing-paths';
 import { COLLECTION_MODULE_PATH } from './+collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from './+community-page/community-page-routing-paths';
@@ -22,7 +22,9 @@ import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
 import { ReloadGuard } from './core/reload/reload.guard';
 import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-user-agreement-current-user.guard';
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
-import { ForbiddenComponent } from './forbidden/forbidden.component';
+import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
+import { GroupAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
 
 @NgModule({
   imports: [
@@ -30,7 +32,7 @@ import { ForbiddenComponent } from './forbidden/forbidden.component';
       path: '', canActivate: [AuthBlockingGuard],
         children: [
           { path: '', redirectTo: '/home', pathMatch: 'full' },
-          { path: 'reload/:rnd', component: PageNotFoundComponent, pathMatch: 'full', canActivate: [ReloadGuard] },
+          { path: 'reload/:rnd', component: ThemedPageNotFoundComponent, pathMatch: 'full', canActivate: [ReloadGuard] },
           {
             path: 'home',
             loadChildren: () => import('./+home-page/home-page.module')
@@ -173,14 +175,19 @@ import { ForbiddenComponent } from './forbidden/forbidden.component';
           },
           {
             path: FORBIDDEN_PATH,
-            component: ForbiddenComponent
+            component: ThemedForbiddenComponent
           },
           {
             path: 'statistics',
             loadChildren: () => import('./statistics-page/statistics-page-routing.module')
               .then((m) => m.StatisticsPageRoutingModule),
           },
-          { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
+          {
+            path: ACCESS_CONTROL_MODULE_PATH,
+            loadChildren: () => import('./access-control/access-control.module').then((m) => m.AccessControlModule),
+            canActivate: [GroupAdministratorGuard],
+          },
+          { path: '**', pathMatch: 'full', component: ThemedPageNotFoundComponent },
       ]}
     ],{
       onSameUrlNavigation: 'reload',
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index c092362c7e..3f2dc45ce7 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -35,6 +35,7 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
+import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -45,47 +46,54 @@ const initialState = {
 
 describe('App component', () => {
 
+  let breadcrumbsServiceSpy;
+
   function getMockLocaleService(): LocaleService {
     return jasmine.createSpyObj('LocaleService', {
       setCurrentLanguageCode: jasmine.createSpy('setCurrentLanguageCode')
     });
   }
 
-  const defaultTestBedConf = {
-    imports: [
-      CommonModule,
-      StoreModule.forRoot(authReducer, storeModuleConfig),
-      TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      }),
-    ],
-    declarations: [AppComponent], // declare the test component
-    providers: [
-      { provide: NativeWindowService, useValue: new NativeWindowRef() },
-      { provide: MetadataService, useValue: new MetadataServiceMock() },
-      { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsProviderMock() },
-      { provide: Angulartics2DSpace, useValue: new AngularticsProviderMock() },
-      { provide: AuthService, useValue: new AuthServiceMock() },
-      { provide: Router, useValue: new RouterMock() },
-      { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
-      { provide: MenuService, useValue: menuService },
-      { provide: CSSVariableService, useClass: CSSVariableServiceStub },
-      { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
-      { provide: LocaleService, useValue: getMockLocaleService() },
-      { provide: ThemeService, useValue: getMockThemeService() },
-      provideMockStore({ initialState }),
-      AppComponent,
-      RouteService
-    ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  const getDefaultTestBedConf = () => {
+    breadcrumbsServiceSpy = jasmine.createSpyObj(['listenForRouteChanges']);
+
+    return {
+      imports: [
+        CommonModule,
+        StoreModule.forRoot(authReducer, storeModuleConfig),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [AppComponent], // declare the test component
+      providers: [
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: MetadataService, useValue: new MetadataServiceMock() },
+        { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsProviderMock() },
+        { provide: Angulartics2DSpace, useValue: new AngularticsProviderMock() },
+        { provide: AuthService, useValue: new AuthServiceMock() },
+        { provide: Router, useValue: new RouterMock() },
+        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
+        { provide: MenuService, useValue: menuService },
+        { provide: CSSVariableService, useClass: CSSVariableServiceStub },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: LocaleService, useValue: getMockLocaleService() },
+        { provide: ThemeService, useValue: getMockThemeService() },
+        { provide: BreadcrumbsService, useValue: breadcrumbsServiceSpy },
+        provideMockStore({ initialState }),
+        AppComponent,
+        RouteService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    };
   };
 
   // waitForAsync beforeEach
   beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule(defaultTestBedConf);
+    return TestBed.configureTestingModule(getDefaultTestBedConf());
   }));
 
   // synchronous beforeEach
@@ -120,13 +128,19 @@ describe('App component', () => {
 
   });
 
+  describe('the constructor', () => {
+    it('should call breadcrumbsService.listenForRouteChanges', () => {
+      expect(breadcrumbsServiceSpy.listenForRouteChanges).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('when GoogleAnalyticsService is provided', () => {
     let googleAnalyticsSpy;
 
     beforeEach(() => {
       // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
       TestBed.resetTestingModule();
-      TestBed.configureTestingModule(defaultTestBedConf);
+      TestBed.configureTestingModule(getDefaultTestBedConf());
       googleAnalyticsSpy = jasmine.createSpyObj('googleAnalyticsService', [
         'addTrackingIdToPage',
       ]);
@@ -154,7 +168,7 @@ describe('App component', () => {
     beforeEach(() => {
       // NOTE: Cannot override providers once components have been compiled, so TestBed needs to be reset
       TestBed.resetTestingModule();
-      TestBed.configureTestingModule(defaultTestBedConf);
+      TestBed.configureTestingModule(getDefaultTestBedConf());
       TestBed.overrideProvider(ThemeService, {useValue: getMockThemeService('custom')});
       document = TestBed.inject(DOCUMENT);
       headSpy = jasmine.createSpyObj('head', ['appendChild']);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8a38d14fe3..a596ba56cd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -36,6 +36,7 @@ import { DOCUMENT } from '@angular/common';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
 import { DEFAULT_THEME_CONFIG } from './shared/theme-support/theme.effects';
+import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 
 @Component({
   selector: 'ds-app',
@@ -73,6 +74,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private menuService: MenuService,
     private windowService: HostWindowService,
     private localeService: LocaleService,
+    private breadcrumbsService: BreadcrumbsService,
     @Optional() private cookiesService: KlaroService,
     @Optional() private googleAnalyticsService: GoogleAnalyticsService,
   ) {
@@ -106,6 +108,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     angulartics2DSpace.startTracking();
 
     metadata.listenForRouteChange();
+    breadcrumbsService.listenForRouteChanges();
 
     if (environment.debug) {
       console.info(environment);
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cc428483c9..03cd819625 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,14 +15,11 @@ import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sideb
 import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
 import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { AppRoutingModule } from './app-routing.module';
-
 import { AppComponent } from './app.component';
-
 import { appEffects } from './app.effects';
 import { appMetaReducers, debugMetaReducers } from './app.metareducers';
 import { appReducers, AppState, storeModuleConfig } from './app.reducer';
 import { CheckAuthenticationTokenAction } from './core/auth/auth.actions';
-
 import { CoreModule } from './core/core.module';
 import { ClientCookieService } from './core/services/client-cookie.service';
 import { FooterComponent } from './footer/footer.component';
@@ -30,8 +27,6 @@ import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar
 import { HeaderComponent } from './header/header.component';
 import { NavbarModule } from './navbar/navbar.module';
 import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
-import { SearchNavbarComponent } from './search-navbar/search-navbar.component';
-
 import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
 import { NotificationComponent } from './shared/notifications/notification/notification.component';
 import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
@@ -46,6 +41,11 @@ import { XsrfInterceptor } from './core/xsrf/xsrf.interceptor';
 import { RootComponent } from './root/root.component';
 import { ThemedRootComponent } from './root/themed-root.component';
 import { ThemedEntryComponentModule } from '../themes/themed-entry-component.module';
+import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
+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';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -127,17 +127,21 @@ const DECLARATIONS = [
   RootComponent,
   ThemedRootComponent,
   HeaderComponent,
+  ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,
+  ThemedFooterComponent,
   PageNotFoundComponent,
+  ThemedPageNotFoundComponent,
   NotificationComponent,
   NotificationsBoardComponent,
-  SearchNavbarComponent,
   BreadcrumbsComponent,
+  ThemedBreadcrumbsComponent,
   ForbiddenComponent,
+  ThemedForbiddenComponent,
 ];
 
 const EXPORTS = [
diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index 5dffda5e94..5abc378702 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -3,11 +3,11 @@ import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store'
 import {
   ePeopleRegistryReducer,
   EPeopleRegistryState
-} from './+admin/admin-access-control/epeople-registry/epeople-registry.reducers';
+} from './access-control/epeople-registry/epeople-registry.reducers';
 import {
   groupRegistryReducer,
   GroupRegistryState
-} from './+admin/admin-access-control/group-registry/group-registry.reducers';
+} from './access-control/group-registry/group-registry.reducers';
 import {
   metadataRegistryReducer,
   MetadataRegistryState
diff --git a/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts b/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
index 0ff8fc5033..cc9277ee50 100644
--- a/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
+++ b/src/app/breadcrumbs/breadcrumb/breadcrumb-config.model.ts
@@ -1,4 +1,4 @@
-import { BreadcrumbsService } from '../../core/breadcrumbs/breadcrumbs.service';
+import { BreadcrumbsProviderService } from '../../core/breadcrumbs/breadcrumbsProviderService';
 
 /**
  * Interface for breadcrumb configuration objects
@@ -7,7 +7,7 @@ export interface BreadcrumbConfig<T> {
     /**
      * The service used to calculate the breadcrumb object
      */
-    provider: BreadcrumbsService<T>;
+    provider: BreadcrumbsProviderService<T>;
 
     /**
      * The key that is used to calculate the breadcrumb display value
diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index 1f142526e2..beb5039178 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
-    <nav *ngIf="showBreadcrumbs" aria-label="breadcrumb">
-        <ol class="breadcrumb">
+    <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
+        <ol class="container breadcrumb">
             <ng-container
                     *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
             <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index e69de29bb2..6967b53de1 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -0,0 +1,22 @@
+.nav-breadcrumb {
+  background-color: var(--ds-breadcrumb-bg);
+}
+
+.breadcrumb {
+  border-radius: 0;
+  margin-top: calc(-1 * var(--ds-content-spacing));
+  padding-bottom: var(--ds-content-spacing / 3);
+  padding-top: var(--ds-content-spacing / 3);
+  background-color: var(--ds-breadcrumb-bg);
+}
+
+li.breadcrumb-item > a {
+  color: var(--ds-breadcrumb-link-color) !important;
+}
+li.breadcrumb-item.active {
+  color: var(--ds-breadcrumb-link-active-color) !important;
+}
+
+.breadcrumb-item+ .breadcrumb-item::before {
+  content: quote("•") !important;
+}
diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
index f7f8789144..dd08a74f23 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
@@ -1,115 +1,78 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { BreadcrumbsComponent } from './breadcrumbs.component';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Observable, of as observableOf } from 'rxjs';
-import { RouterTestingModule } from '@angular/router/testing';
+import { BreadcrumbsService } from './breadcrumbs.service';
+import { Breadcrumb } from './breadcrumb/breadcrumb.model';
+import { VarDirective } from '../shared/utils/var.directive';
+import { By } from '@angular/platform-browser';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock';
-import { BreadcrumbConfig } from './breadcrumb/breadcrumb-config.model';
-import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
-import { Breadcrumb } from './breadcrumb/breadcrumb.model';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { VarDirective } from '../shared/utils/var.directive';
-import { getTestScheduler } from 'jasmine-marbles';
-
-class TestBreadcrumbsService implements BreadcrumbsService<string> {
-  getBreadcrumbs(key: string, url: string): Observable<Breadcrumb[]> {
-    return observableOf([new Breadcrumb(key, url)]);
-  }
-}
+import { RouterTestingModule } from '@angular/router/testing';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { DebugElement } from '@angular/core';
 
 describe('BreadcrumbsComponent', () => {
   let component: BreadcrumbsComponent;
   let fixture: ComponentFixture<BreadcrumbsComponent>;
-  let router: any;
-  let route: any;
-  let breadcrumbProvider;
-  let breadcrumbConfigA: BreadcrumbConfig<string>;
-  let breadcrumbConfigB: BreadcrumbConfig<string>;
-  let expectedBreadcrumbs;
+  let breadcrumbsServiceMock: BreadcrumbsService;
 
-  function init() {
-    breadcrumbProvider = new TestBreadcrumbsService();
+  const expectBreadcrumb = (listItem: DebugElement, text: string, url: string) => {
+    const anchor = listItem.query(By.css('a'));
 
-    breadcrumbConfigA = { provider: breadcrumbProvider, key: 'example.path', url: 'example.com' };
-    breadcrumbConfigB = { provider: breadcrumbProvider, key: 'another.path', url: 'another.com' };
-
-    route = {
-      root: {
-        snapshot: {
-          data: { breadcrumb: breadcrumbConfigA },
-          routeConfig: { resolve: { breadcrumb: {} } }
-        },
-        firstChild: {
-          snapshot: {
-            // Example without resolver should be ignored
-            data: { breadcrumb: breadcrumbConfigA },
-          },
-          firstChild: {
-            snapshot: {
-              data: { breadcrumb: breadcrumbConfigB },
-              routeConfig: { resolve: { breadcrumb: {} } }
-            }
-          }
-        }
-      }
-    };
-
-    expectedBreadcrumbs = [
-      new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
-      new Breadcrumb(breadcrumbConfigB.key, breadcrumbConfigB.url)
-    ];
-
-  }
+    if (url == null) {
+      expect(anchor).toBeNull();
+      expect(listItem.nativeElement.innerHTML).toEqual(text);
+    } else {
+      expect(anchor).toBeInstanceOf(DebugElement);
+      expect(anchor.attributes.href).toEqual(url);
+      expect(anchor.nativeElement.innerHTML).toEqual(text);
+    }
+  };
 
   beforeEach(waitForAsync(() => {
-    init();
-    TestBed.configureTestingModule({
-      declarations: [BreadcrumbsComponent, VarDirective],
-      imports: [RouterTestingModule.withRoutes([]), TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      }), NgbModule],
-      providers: [
-        {provide: ActivatedRoute, useValue: route}
-      ], schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+    breadcrumbsServiceMock = {
+      breadcrumbs$: observableOf([
+        // NOTE: a root breadcrumb is automatically rendered
+        new Breadcrumb('bc 1', 'example.com'),
+        new Breadcrumb('bc 2', 'another.com'),
+      ]),
+      showBreadcrumbs$: observableOf(true),
+    } as BreadcrumbsService;
+
+    TestBed.configureTestingModule({
+      declarations: [
+        BreadcrumbsComponent,
+        VarDirective,
+      ],
+      imports: [
+        RouterTestingModule.withRoutes([]),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          }
+        }),
+      ],
+      providers: [
+        { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock },
+      ],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(BreadcrumbsComponent);
     component = fixture.componentInstance;
-    router = TestBed.inject(Router);
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('ngOnInit', () => {
-    beforeEach(() => {
-      spyOn(component, 'resolveBreadcrumbs').and.returnValue(observableOf([]));
-    });
-
-    it('should call resolveBreadcrumb on init', () => {
-      router.events = observableOf(new NavigationEnd(0, '', ''));
-      component.ngOnInit();
-      fixture.detectChanges();
-
-      expect(component.resolveBreadcrumbs).toHaveBeenCalledWith(route.root);
-    });
+  it('should render the breadcrumbs', () => {
+    const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
+    expect(breadcrumbs.length).toBe(3);
+    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
+    expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
+    expectBreadcrumb(breadcrumbs[2], 'bc 2', null);
   });
 
-  describe('resolveBreadcrumbs', () => {
-    it('should return the correct breadcrumbs', () => {
-      const breadcrumbs = component.resolveBreadcrumbs(route.root);
-      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: expectedBreadcrumbs });
-    });
-  });
 });
diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts
index 234720d5ca..488fd37a2c 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.ts
@@ -1,9 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Component } from '@angular/core';
 import { Breadcrumb } from './breadcrumb/breadcrumb.model';
-import { hasNoValue, hasValue, isUndefined } from '../shared/empty.util';
-import { filter, map, switchMap, tap } from 'rxjs/operators';
-import { combineLatest, Observable, of as observableOf } from 'rxjs';
+import { BreadcrumbsService } from './breadcrumbs.service';
+import { Observable } from 'rxjs/internal/Observable';
 
 /**
  * Component representing the breadcrumbs of a page
@@ -13,7 +11,8 @@ import { combineLatest, Observable, of as observableOf } from 'rxjs';
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.scss']
 })
-export class BreadcrumbsComponent implements OnInit {
+export class BreadcrumbsComponent {
+
   /**
    * Observable of the list of breadcrumbs for this page
    */
@@ -22,61 +21,13 @@ export class BreadcrumbsComponent implements OnInit {
   /**
    * Whether or not to show breadcrumbs on this page
    */
-  showBreadcrumbs: boolean;
+  showBreadcrumbs$: Observable<boolean>;
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router
+    private breadcrumbsService: BreadcrumbsService,
   ) {
+    this.breadcrumbs$ = breadcrumbsService.breadcrumbs$;
+    this.showBreadcrumbs$ = breadcrumbsService.showBreadcrumbs$;
   }
 
-  /**
-   * Sets the breadcrumbs on init for this page
-   */
-  ngOnInit(): void {
-    this.breadcrumbs$ = this.router.events.pipe(
-      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-      tap(() => this.reset()),
-      switchMap(() => this.resolveBreadcrumbs(this.route.root)),
-    );
-  }
-
-  /**
-   * Method that recursively resolves breadcrumbs
-   * @param route The route to get the breadcrumb from
-   */
-  resolveBreadcrumbs(route: ActivatedRoute): Observable<Breadcrumb[]> {
-    const data = route.snapshot.data;
-    const routeConfig = route.snapshot.routeConfig;
-
-    const last: boolean = hasNoValue(route.firstChild);
-    if (last) {
-      if (hasValue(data.showBreadcrumbs)) {
-        this.showBreadcrumbs = data.showBreadcrumbs;
-      } else if (isUndefined(data.breadcrumb)) {
-        this.showBreadcrumbs = false;
-      }
-    }
-
-    if (
-      hasValue(data) && hasValue(data.breadcrumb) &&
-      hasValue(routeConfig) && hasValue(routeConfig.resolve) && hasValue(routeConfig.resolve.breadcrumb)
-    ) {
-      const { provider, key, url } = data.breadcrumb;
-      if (!last) {
-        return combineLatest(provider.getBreadcrumbs(key, url), this.resolveBreadcrumbs(route.firstChild))
-          .pipe(map((crumbs) => [].concat.apply([], crumbs)));
-      } else {
-        return provider.getBreadcrumbs(key, url);
-      }
-    }
-    return !last ? this.resolveBreadcrumbs(route.firstChild) : observableOf([]);
-  }
-
-  /**
-   * Resets the state of the breadcrumbs
-   */
-  reset() {
-    this.showBreadcrumbs = true;
-  }
 }
diff --git a/src/app/breadcrumbs/breadcrumbs.service.spec.ts b/src/app/breadcrumbs/breadcrumbs.service.spec.ts
new file mode 100644
index 0000000000..11b8bace39
--- /dev/null
+++ b/src/app/breadcrumbs/breadcrumbs.service.spec.ts
@@ -0,0 +1,171 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BreadcrumbsService } from './breadcrumbs.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { Observable, of as observableOf, Subject } from 'rxjs';
+import { BreadcrumbConfig } from './breadcrumb/breadcrumb-config.model';
+import { BreadcrumbsProviderService } from '../core/breadcrumbs/breadcrumbsProviderService';
+import { Breadcrumb } from './breadcrumb/breadcrumb.model';
+import { cold } from 'jasmine-marbles';
+
+class TestBreadcrumbsService implements BreadcrumbsProviderService<string> {
+  getBreadcrumbs(key: string, url: string): Observable<Breadcrumb[]> {
+    return observableOf([new Breadcrumb(key, url)]);
+  }
+}
+
+describe('BreadcrumbsService', () => {
+  let service: BreadcrumbsService;
+  let routerEventsObs: Subject<any>;
+  let routerMock: Router;
+  let activatedRouteMock: Partial<ActivatedRoute>;
+  let currentRootRoute: Partial<ActivatedRoute>;
+  let breadcrumbProvider;
+  let breadcrumbConfigA: BreadcrumbConfig<string>;
+  let breadcrumbConfigB: BreadcrumbConfig<string>;
+
+  /**
+   * Init breadcrumb variables, see beforeEach
+   */
+  const initBreadcrumbs = () => {
+    breadcrumbProvider = new TestBreadcrumbsService();
+    breadcrumbConfigA = { provider: breadcrumbProvider, key: 'example.path', url: 'example.com' };
+    breadcrumbConfigB = { provider: breadcrumbProvider, key: 'another.path', url: 'another.com' };
+  };
+
+  const changeActivatedRoute = (newRootRoute: any) => {
+    // update the ActivatedRoute that the service will receive
+    currentRootRoute = newRootRoute;
+
+    // the pipeline of BreadcrumbsService#listenForRouteChanges needs a NavigationEnd event,
+    // but the actual payload does not matter, since ActivatedRoute is mocked too.
+    routerEventsObs.next(new NavigationEnd(0, '', ''));
+  };
+
+  beforeEach(() => {
+    initBreadcrumbs();
+
+    routerEventsObs = new Subject<any>();
+
+    // BreadcrumbsService uses Router#events
+    routerMock = jasmine.createSpyObj([], {
+      events: routerEventsObs,
+    });
+
+    // BreadcrumbsService uses ActivatedRoute#root
+    activatedRouteMock = {
+      get root() {
+        return currentRootRoute as ActivatedRoute;
+      },
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: Router, useValue: routerMock },
+        { provide: ActivatedRoute, useValue: activatedRouteMock },
+      ],
+    });
+    service = TestBed.inject(BreadcrumbsService);
+
+    // this is done by AppComponent under regular circumstances
+    service.listenForRouteChanges();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('breadcrumbs$', () => {
+    it('should return a breadcrumb corresponding to the current route', () => {
+      const route1 = {
+        snapshot: {
+          data: { breadcrumb: breadcrumbConfigA },
+          routeConfig: { resolve: { breadcrumb: {} } }
+        }
+      };
+
+      const expectation1 = [
+        new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
+      ];
+
+      changeActivatedRoute(route1);
+      expect(service.breadcrumbs$).toBeObservable(cold('a', { a: expectation1 }));
+
+      const route2 = {
+        snapshot: {
+          data: { breadcrumb: breadcrumbConfigA },
+          routeConfig: { resolve: { breadcrumb: {} } }
+        },
+        firstChild: {
+          snapshot: {
+            // Example without resolver should be ignored
+            data: { breadcrumb: breadcrumbConfigA },
+          },
+          firstChild: {
+            snapshot: {
+              data: { breadcrumb: breadcrumbConfigB },
+              routeConfig: { resolve: { breadcrumb: {} } }
+            }
+          }
+        }
+      };
+
+      const expectation2 = [
+        new Breadcrumb(breadcrumbConfigA.key, breadcrumbConfigA.url),
+        new Breadcrumb(breadcrumbConfigB.key, breadcrumbConfigB.url),
+      ];
+
+      changeActivatedRoute(route2);
+      expect(service.breadcrumbs$).toBeObservable(cold('a', { a: expectation2 }));
+    });
+  });
+
+  describe('showBreadcrumbs$', () => {
+    describe('when the last part of the route has showBreadcrumbs in its data', () => {
+      it('should return that value', () => {
+        const route1 = {
+          snapshot: {
+            data: {
+              breadcrumb: breadcrumbConfigA,
+              showBreadcrumbs: false, // explicitly hide breadcrumbs
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route1);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: false }));
+
+        const route2 = {
+          snapshot: {
+            data: {
+              breadcrumb: breadcrumbConfigA,
+              showBreadcrumbs: true, // explicitly show breadcrumbs
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route2);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: true }));
+      });
+    });
+
+    describe('when the last part of the route has no breadcrumb in its data', () => {
+      it('should return false', () => {
+        const route1 = {
+          snapshot: {
+            data: {
+              // no breadcrumbs set - always hide
+            },
+            routeConfig: { resolve: { breadcrumb: {} } }
+          }
+        };
+
+        changeActivatedRoute(route1);
+        expect(service.showBreadcrumbs$).toBeObservable(cold('a', { a: false }));
+      });
+    });
+  });
+
+});
diff --git a/src/app/breadcrumbs/breadcrumbs.service.ts b/src/app/breadcrumbs/breadcrumbs.service.ts
new file mode 100644
index 0000000000..a7be030c12
--- /dev/null
+++ b/src/app/breadcrumbs/breadcrumbs.service.ts
@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import {combineLatest, Observable, of as observableOf, ReplaySubject} from 'rxjs';
+import {Breadcrumb} from './breadcrumb/breadcrumb.model';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter, map, switchMap, tap} from 'rxjs/operators';
+import {hasNoValue, hasValue, isUndefined} from '../shared/empty.util';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BreadcrumbsService {
+
+  /**
+   * Observable of the list of breadcrumbs for this page
+   */
+  breadcrumbs$: ReplaySubject<Breadcrumb[]> = new ReplaySubject(1);
+
+  /**
+   * Whether or not to show breadcrumbs on this page
+   */
+  showBreadcrumbs$: ReplaySubject<boolean> = new ReplaySubject(1);
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
+
+  /**
+   * Called by {@link AppComponent#constructor} (i.e. before routing)
+   * such that no routing events are missed.
+   */
+  listenForRouteChanges() {
+    // supply events to this.breadcrumbs$
+    this.router.events.pipe(
+      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+      tap(() => this.reset()),
+      switchMap(() => this.resolveBreadcrumbs(this.route.root)),
+    ).subscribe(this.breadcrumbs$);
+  }
+
+  /**
+   * Method that recursively resolves breadcrumbs
+   * @param route The route to get the breadcrumb from
+   */
+  private resolveBreadcrumbs(route: ActivatedRoute): Observable<Breadcrumb[]> {
+    const data = route.snapshot.data;
+    const routeConfig = route.snapshot.routeConfig;
+
+    const last: boolean = hasNoValue(route.firstChild);
+    if (last) {
+      if (hasValue(data.showBreadcrumbs)) {
+        this.showBreadcrumbs$.next(data.showBreadcrumbs);
+      } else if (isUndefined(data.breadcrumb)) {
+        this.showBreadcrumbs$.next(false);
+      }
+    }
+
+    if (
+      hasValue(data) && hasValue(data.breadcrumb) &&
+      hasValue(routeConfig) && hasValue(routeConfig.resolve) && hasValue(routeConfig.resolve.breadcrumb)
+    ) {
+      const { provider, key, url } = data.breadcrumb;
+      if (!last) {
+        return combineLatest(provider.getBreadcrumbs(key, url), this.resolveBreadcrumbs(route.firstChild))
+          .pipe(map((crumbs) => [].concat.apply([], crumbs)));
+      } else {
+        return provider.getBreadcrumbs(key, url);
+      }
+    }
+    return !last ? this.resolveBreadcrumbs(route.firstChild) : observableOf([]);
+  }
+
+  /**
+   * Resets the state of the breadcrumbs
+   */
+  private reset() {
+    this.showBreadcrumbs$.next(true);
+  }
+
+}
diff --git a/src/app/breadcrumbs/themed-breadcrumbs.component.ts b/src/app/breadcrumbs/themed-breadcrumbs.component.ts
new file mode 100644
index 0000000000..1869a440b9
--- /dev/null
+++ b/src/app/breadcrumbs/themed-breadcrumbs.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+/**
+ * Themed wrapper for BreadcrumbsComponent
+ */
+@Component({
+  selector: 'ds-themed-breadcrumbs',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedBreadcrumbsComponent extends ThemedComponent<BreadcrumbsComponent> {
+  protected getComponentName(): string {
+    return 'BreadcrumbsComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/breadcrumbs/breadcrumbs.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./breadcrumbs.component`);
+  }
+}
diff --git a/src/app/community-list-page/community-list-page.module.ts b/src/app/community-list-page/community-list-page.module.ts
index 57b016bc6e..3b009e227c 100644
--- a/src/app/community-list-page/community-list-page.module.ts
+++ b/src/app/community-list-page/community-list-page.module.ts
@@ -4,7 +4,14 @@ import { SharedModule } from '../shared/shared.module';
 import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListPageRoutingModule } from './community-list-page.routing.module';
 import { CommunityListComponent } from './community-list/community-list.component';
+import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
 
+
+const DECLARATIONS = [
+  CommunityListPageComponent,
+  CommunityListComponent,
+  ThemedCommunityListPageComponent
+];
 /**
  * The page which houses a title and the community list, as described in community-list.component
  */
@@ -15,9 +22,11 @@ import { CommunityListComponent } from './community-list/community-list.componen
     CommunityListPageRoutingModule
   ],
   declarations: [
-    CommunityListPageComponent,
-    CommunityListComponent
-  ]
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
 })
 export class CommunityListPageModule {
 
diff --git a/src/app/community-list-page/community-list-page.routing.module.ts b/src/app/community-list-page/community-list-page.routing.module.ts
index fe250cb96d..1754b1b7cf 100644
--- a/src/app/community-list-page/community-list-page.routing.module.ts
+++ b/src/app/community-list-page/community-list-page.routing.module.ts
@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CdkTreeModule } from '@angular/cdk/tree';
 
-import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListService } from './community-list-service';
+import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 /**
  * RouterModule to help navigate to the page with the community list tree
@@ -13,9 +14,12 @@ import { CommunityListService } from './community-list-service';
     RouterModule.forChild([
       {
         path: '',
-        component: CommunityListPageComponent,
+        component: ThemedCommunityListPageComponent,
         pathMatch: 'full',
-        data: { title: 'communityList.tabTitle' }
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'communityList.tabTitle', breadcrumbKey: 'communityList' }
       }
     ]),
     CdkTreeModule,
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index ab28baaa36..f441dfa36e 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -9,8 +9,8 @@
       </button>
       <div class="align-middle pt-2">
         <a *ngIf="node!==loadingNode" [routerLink]="" (click)="getNextPage(node)"
-           class="btn btn-outline-secondary btn-sm">
-          {{ 'communityList.showMore' | translate }}
+           class="btn btn-outline-primary btn-sm" role="button">
+           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </a>
         <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-loading"></ds-loading>
       </div>
@@ -25,6 +25,7 @@
                  class="example-tree-node expandable-node">
     <div class="btn-group">
       <button type="button" class="btn btn-default" cdkTreeNodeToggle
+              [title]="'toggle ' + node.name"
               [attr.aria-label]="'toggle ' + node.name"
               (click)="toggleExpanded(node)"
               [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'">
diff --git a/src/app/community-list-page/themed-community-list-page.component.ts b/src/app/community-list-page/themed-community-list-page.component.ts
new file mode 100644
index 0000000000..20fa97bedd
--- /dev/null
+++ b/src/app/community-list-page/themed-community-list-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { CommunityListPageComponent } from './community-list-page.component';
+
+/**
+ * Themed wrapper for CommunityListPageComponent
+ */
+@Component({
+  selector: 'ds-themed-community-list-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityListPageComponent extends ThemedComponent<CommunityListPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityListPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/community-list-page/community-list-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-list-page.component`);
+  }
+
+}
diff --git a/src/app/core/auth/auth.interceptor.ts b/src/app/core/auth/auth.interceptor.ts
index 31de304665..7b9a08de92 100644
--- a/src/app/core/auth/auth.interceptor.ts
+++ b/src/app/core/auth/auth.interceptor.ts
@@ -102,7 +102,7 @@ export class AuthInterceptor implements HttpInterceptor {
   private parseLocation(header: string): string {
     let location = header.trim();
     location = location.replace('location="', '');
-    location = location.replace('"', '');
+    location = location.replace('"', ''); /* lgtm [js/incomplete-sanitization] */
     let re = /%3A%2F%2F/g;
     location = location.replace(re, '://');
     re = /%3A/g;
diff --git a/src/app/core/breadcrumbs/breadcrumbs.service.ts b/src/app/core/breadcrumbs/breadcrumbsProviderService.ts
similarity index 90%
rename from src/app/core/breadcrumbs/breadcrumbs.service.ts
rename to src/app/core/breadcrumbs/breadcrumbsProviderService.ts
index f274485d5d..4f5dd0a583 100644
--- a/src/app/core/breadcrumbs/breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/breadcrumbsProviderService.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 /**
  * Service to calculate breadcrumbs for a single part of the route
  */
-export interface BreadcrumbsService<T> {
+export interface BreadcrumbsProviderService<T> {
 
   /**
    * Method to calculate the breadcrumbs for a part of the route
diff --git a/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts b/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
index f822a953a8..23fff18537 100644
--- a/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/dso-breadcrumbs.service.ts
@@ -1,5 +1,5 @@
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
-import { BreadcrumbsService } from './breadcrumbs.service';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
 import { DSONameService } from './dso-name.service';
 import { Observable, of as observableOf } from 'rxjs';
 import { ChildHALResource } from '../shared/child-hal-resource.model';
@@ -18,7 +18,7 @@ import { getDSORoute } from '../../app-routing-paths';
 @Injectable({
   providedIn: 'root'
 })
-export class DSOBreadcrumbsService implements BreadcrumbsService<ChildHALResource & DSpaceObject> {
+export class DSOBreadcrumbsService implements BreadcrumbsProviderService<ChildHALResource & DSpaceObject> {
   constructor(
     private linkService: LinkService,
     private dsoNameService: DSONameService
diff --git a/src/app/core/breadcrumbs/dso-name.service.spec.ts b/src/app/core/breadcrumbs/dso-name.service.spec.ts
index 5dd02032b9..7a399ce748 100644
--- a/src/app/core/breadcrumbs/dso-name.service.spec.ts
+++ b/src/app/core/breadcrumbs/dso-name.service.spec.ts
@@ -45,7 +45,7 @@ describe(`DSONameService`, () => {
       }
     });
 
-    service = new DSONameService();
+    service = new DSONameService({ instant: (a) => a } as any);
   });
 
   describe(`getName`, () => {
diff --git a/src/app/core/breadcrumbs/dso-name.service.ts b/src/app/core/breadcrumbs/dso-name.service.ts
index 7f8af2352b..38363d1989 100644
--- a/src/app/core/breadcrumbs/dso-name.service.ts
+++ b/src/app/core/breadcrumbs/dso-name.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { hasValue } from '../../shared/empty.util';
 import { DSpaceObject } from '../shared/dspace-object.model';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Returns a name for a {@link DSpaceObject} based
@@ -11,6 +12,10 @@ import { DSpaceObject } from '../shared/dspace-object.model';
 })
 export class DSONameService {
 
+  constructor(private translateService: TranslateService) {
+
+  }
+
   /**
    * Functions to generate the specific names.
    *
@@ -29,7 +34,7 @@ export class DSONameService {
     },
     Default: (dso: DSpaceObject): string => {
       // If object doesn't have dc.title metadata use name property
-      return dso.firstMetadataValue('dc.title') || dso.name;
+      return dso.firstMetadataValue('dc.title') || dso.name || this.translateService.instant('dso.name.untitled');
     }
   };
 
diff --git a/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts b/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
index b774b58126..15563bdde8 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumbs.service.ts
@@ -1,5 +1,5 @@
 import { Breadcrumb } from '../../breadcrumbs/breadcrumb/breadcrumb.model';
-import { BreadcrumbsService } from './breadcrumbs.service';
+import { BreadcrumbsProviderService } from './breadcrumbsProviderService';
 import { Observable, of as observableOf } from 'rxjs';
 import { Injectable } from '@angular/core';
 
@@ -14,7 +14,7 @@ export const BREADCRUMB_MESSAGE_POSTFIX = '.breadcrumbs';
 @Injectable({
   providedIn: 'root'
 })
-export class I18nBreadcrumbsService implements BreadcrumbsService<string> {
+export class I18nBreadcrumbsService implements BreadcrumbsProviderService<string> {
 
   /**
    * Method to calculate the breadcrumbs
diff --git a/src/app/core/data/comcol-data.service.spec.ts b/src/app/core/data/comcol-data.service.spec.ts
index 94b050855a..864c583dc2 100644
--- a/src/app/core/data/comcol-data.service.spec.ts
+++ b/src/app/core/data/comcol-data.service.spec.ts
@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Store } from '@ngrx/store';
-import { cold, getTestScheduler, hot } from 'jasmine-marbles';
+import { cold } from 'jasmine-marbles';
 import { Observable, of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
@@ -13,16 +13,15 @@ import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { ComColDataService } from './comcol-data.service';
 import { CommunityDataService } from './community-data.service';
 import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
-import { FindListOptions, GetRequest } from './request.models';
-import { RequestEntry } from './request.reducer';
+import { FindListOptions } from './request.models';
 import { RequestService } from './request.service';
 import {
   createFailedRemoteDataObject$,
-  createNoContentRemoteDataObject$,
-  createSuccessfulRemoteDataObject$
+  createSuccessfulRemoteDataObject$,
+  createFailedRemoteDataObject,
+  createSuccessfulRemoteDataObject
 } from '../../shared/remote-data.utils';
 import { BitstreamDataService } from './bitstream-data.service';
-import { take } from 'rxjs/operators';
 
 const LINK_NAME = 'test';
 
@@ -50,8 +49,8 @@ class TestService extends ComColDataService<any> {
   }
 }
 
+// tslint:disable:no-shadowed-variable
 describe('ComColDataService', () => {
-  let scheduler: TestScheduler;
   let service: TestService;
   let requestService: RequestService;
   let cds: CommunityDataService;
@@ -59,6 +58,8 @@ describe('ComColDataService', () => {
   let halService: any = {};
   let bitstreamDataService: BitstreamDataService;
   let rdbService: RemoteDataBuildService;
+  let testScheduler: TestScheduler;
+  let topEndpoint: string;
 
   const store = {} as Store<CoreState>;
   const notificationsService = {} as NotificationsService;
@@ -69,17 +70,9 @@ describe('ComColDataService', () => {
   const options = Object.assign(new FindListOptions(), {
     scopeID: scopeID
   });
-  const getRequestEntry$ = (successful: boolean) => {
-    return observableOf({
-      response: { isSuccessful: successful } as any
-    } as RequestEntry);
-  };
-
   const communitiesEndpoint = 'https://rest.api/core/communities';
   const communityEndpoint = `${communitiesEndpoint}/${scopeID}`;
   const scopedEndpoint = `${communityEndpoint}/${LINK_NAME}`;
-  const serviceEndpoint = `https://rest.api/core/${LINK_NAME}`;
-  const authHeader = 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJlaWQiOiJhNjA4NmIzNC0zOTE4LTQ1YjctOGRkZC05MzI5YTcwMmEyNmEiLCJzZyI6W10sImV4cCI6MTUzNDk0MDcyNX0.RV5GAtiX6cpwBN77P_v16iG9ipeyiO7faNYSNMzq_sQ';
 
   const mockHalService = {
     getEndpoint: (linkPath) => observableOf(communitiesEndpoint)
@@ -98,8 +91,8 @@ describe('ComColDataService', () => {
   }
 
   function initMockCommunityDataService(): CommunityDataService {
-    return jasmine.createSpyObj('responseCache', {
-      getEndpoint: hot('--a-', { a: communitiesEndpoint }),
+    return jasmine.createSpyObj('cds', {
+      getEndpoint: cold('--a-', { a: communitiesEndpoint }),
       getIDHref: communityEndpoint
     });
   }
@@ -134,7 +127,15 @@ describe('ComColDataService', () => {
     );
   }
 
+  const initTestScheduler = (): TestScheduler => {
+    return new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  };
+
   beforeEach(() => {
+    topEndpoint = 'https://rest.api/core/communities/search/top';
+    testScheduler = initTestScheduler();
     cds = initMockCommunityDataService();
     requestService = getMockRequestService();
     objectCache = initMockObjectCacheService();
@@ -145,113 +146,94 @@ describe('ComColDataService', () => {
   });
 
   describe('getBrowseEndpoint', () => {
-    beforeEach(() => {
-      scheduler = getTestScheduler();
-    });
-
-    it('should send a new FindByIDRequest for the scope Community', () => {
-      cds = initMockCommunityDataService();
-      requestService = getMockRequestService(getRequestEntry$(true));
-      objectCache = initMockObjectCacheService();
-      service = initTestService();
-
-      const expected = new GetRequest(requestService.generateRequestId(), communityEndpoint);
-
-      scheduler.schedule(() => service.getBrowseEndpoint(options).subscribe());
-      scheduler.flush();
-
-      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    it(`should call createAndSendGetRequest with the scope Community's self link`, () => {
+      testScheduler.run(({ cold, flush, expectObservable }) => {
+        (cds.getEndpoint as jasmine.Spy).and.returnValue(cold('a', { a: communitiesEndpoint }));
+        (rdbService.buildSingle as jasmine.Spy).and.returnValue(cold('a', { a: createFailedRemoteDataObject() }));
+        spyOn(service as any, 'createAndSendGetRequest');
+        service.getBrowseEndpoint(options);
+        flush();
+        expectObservable((service as any).createAndSendGetRequest.calls.argsFor(0)[0]).toBe('(a|)', { a: communityEndpoint });
+        expect((service as any).createAndSendGetRequest.calls.argsFor(0)[1]).toBeTrue();
+      });
     });
 
     describe('if the scope Community can\'t be found', () => {
       it('should throw an error', () => {
-        const result = service.getBrowseEndpoint(options).pipe(take(1));
-        const expected = cold('--#-', undefined, new Error(`The Community with scope ${scopeID} couldn't be retrieved`));
-
-        expect(result).toBeObservable(expected);
-      });
-    });
-
-    describe('cache refresh', () => {
-      let communityWithoutParentHref;
-      let data;
-
-      beforeEach(() => {
-        spyOn(halService, 'getEndpoint').and.returnValue(observableOf('https://rest.api/core/communities/search/top'));
-      });
-
-      describe('cache refreshed top level community', () => {
-        beforeEach(() => {
-          (rdbService.buildSingle as jasmine.Spy).and.returnValue(createNoContentRemoteDataObject$());
-          data = {
-            dso: Object.assign(new Community(), {
-              metadata: [{
-                key: 'dc.title',
-                value: 'top level community'
-              }]
-            }),
-            _links: {
-              parentCommunity: {
-                href: 'topLevel/parentCommunity'
-              }
-            }
-          };
-          communityWithoutParentHref = {
-            dso: Object.assign(new Community(), {
-              metadata: [{
-                key: 'dc.title',
-                value: 'top level community'
-              }]
-            }),
-            _links: {}
-          };
-        });
-        it('top level community cache refreshed', () => {
-          scheduler.schedule(() => (service as any).refreshCache(data));
-          scheduler.flush();
-          expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('https://rest.api/core/communities/search/top');
-        });
-        it('top level community without parent link, cache not refreshed', () => {
-          scheduler.schedule(() => (service as any).refreshCache(communityWithoutParentHref));
-          scheduler.flush();
-          expect(requestService.setStaleByHrefSubstring).not.toHaveBeenCalled();
-        });
-      });
-
-      describe('cache refreshed child community', () => {
-        beforeEach(() => {
-          const parentCommunity = Object.assign(new Community(), {
-            uuid: 'a20da287-e174-466a-9926-f66as300d399',
-            id: 'a20da287-e174-466a-9926-f66as300d399',
-            metadata: [{
-              key: 'dc.title',
-              value: 'parent community'
-            }],
-            _links: {}
-          });
-          (rdbService.buildSingle as jasmine.Spy).and.returnValue(createSuccessfulRemoteDataObject$(parentCommunity));
-          data = {
-            dso: Object.assign(new Community(), {
-              metadata: [{
-                key: 'dc.title',
-                value: 'child community'
-              }]
-            }),
-            _links: {
-              parentCommunity: {
-                href: 'child/parentCommunity'
-              }
-            }
-          };
-        });
-        it('child level community cache refreshed', () => {
-          scheduler.schedule(() => (service as any).refreshCache(data));
-          scheduler.flush();
-          expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('a20da287-e174-466a-9926-f66as300d399');
+        testScheduler.run(({ cold, expectObservable }) => {
+          // spies re-defined here to use the "cold" function from rxjs's TestScheduler
+          // rather than the one imported from jasmine-marbles.
+          // Mixing the two seems to lead to unpredictable results
+          (cds.getEndpoint as jasmine.Spy).and.returnValue(cold('a', { a: communitiesEndpoint }));
+          (rdbService.buildSingle as jasmine.Spy).and.returnValue(cold('a', { a: createFailedRemoteDataObject() }));
+          const expectedError = new Error(`The Community with scope ${scopeID} couldn't be retrieved`);
+          expectObservable(service.getBrowseEndpoint(options)).toBe('#', undefined, expectedError);
         });
       });
     });
 
   });
 
+  describe('cache refresh', () => {
+    let communityWithoutParentHref;
+    let communityWithParentHref;
+
+    beforeEach(() => {
+      communityWithParentHref = {
+        _links: {
+          parentCommunity: {
+            href: 'topLevel/parentCommunity'
+          }
+        }
+      } as Community;
+      communityWithoutParentHref = {
+        _links: {}
+      } as Community;
+    });
+
+    describe('cache refreshed top level community', () => {
+      it(`should refresh the top level community cache when the dso has a parent link that can't be resolved`, () => {
+        testScheduler.run(({ flush, cold }) => {
+          spyOn(halService, 'getEndpoint').and.returnValue(cold('a', { a: topEndpoint }));
+          spyOn(service, 'findByHref').and.returnValue(cold('a', { a: createSuccessfulRemoteDataObject({}) }));
+          service.refreshCache(communityWithParentHref);
+          flush();
+          expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith(topEndpoint);
+        });
+      });
+      it(`shouldn't do anything when the dso doesn't have a parent link`, () => {
+        testScheduler.run(({ flush, cold }) => {
+          spyOn(halService, 'getEndpoint').and.returnValue(cold('a', { a: topEndpoint }));
+          spyOn(service, 'findByHref').and.returnValue(cold('a', { a: createSuccessfulRemoteDataObject({}) }));
+          service.refreshCache(communityWithoutParentHref);
+          flush();
+          expect(requestService.setStaleByHrefSubstring).not.toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('cache refreshed child community', () => {
+      let parentCommunity: Community;
+      beforeEach(() => {
+        parentCommunity = Object.assign(new Community(), {
+          uuid: 'a20da287-e174-466a-9926-f66as300d399',
+          id: 'a20da287-e174-466a-9926-f66as300d399',
+          metadata: [{
+            key: 'dc.title',
+            value: 'parent community'
+          }],
+          _links: {}
+        });
+      });
+      it('should refresh a specific cached community when the parent link can be resolved', () => {
+        testScheduler.run(({ flush, cold }) => {
+          spyOn(halService, 'getEndpoint').and.returnValue(cold('a', { a: topEndpoint }));
+          spyOn(service, 'findByHref').and.returnValue(cold('a', { a: createSuccessfulRemoteDataObject(parentCommunity) }));
+          service.refreshCache(communityWithParentHref);
+          flush();
+          expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('a20da287-e174-466a-9926-f66as300d399');
+        });
+      });
+    });
+  });
 });
diff --git a/src/app/core/data/data.service.spec.ts b/src/app/core/data/data.service.spec.ts
index a8bbfa79a0..88b15754af 100644
--- a/src/app/core/data/data.service.spec.ts
+++ b/src/app/core/data/data.service.spec.ts
@@ -20,6 +20,9 @@ import { getMockRequestService } from '../../shared/mocks/request.service.mock';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { RequestParam } from '../cache/models/request-param.model';
 import { getMockRemoteDataBuildService } from '../../shared/mocks/remote-data-build.service.mock';
+import { TestScheduler } from 'rxjs/testing';
+import { RemoteData } from './remote-data';
+import { RequestEntryState } from './request.reducer';
 
 const endpoint = 'https://rest.api/core';
 
@@ -63,6 +66,10 @@ describe('DataService', () => {
   let comparator;
   let objectCache;
   let store;
+  let selfLink;
+  let linksToFollow;
+  let testScheduler;
+  let remoteDataMocks;
 
   function initTestService(): TestService {
     requestService = getMockRequestService();
@@ -81,6 +88,34 @@ describe('DataService', () => {
       }
     } as any;
     store = {} as Store<CoreState>;
+    selfLink = 'https://rest.api/endpoint/1698f1d3-be98-4c51-9fd8-6bfedcbd59b7';
+    linksToFollow = [
+      followLink('a'),
+      followLink('b')
+    ];
+
+    testScheduler = new TestScheduler((actual, expected) => {
+      // asserting the two objects are equal
+      // e.g. using chai.
+      expect(actual).toEqual(expected);
+    });
+
+    const timeStamp = new Date().getTime();
+    const msToLive = 15 * 60 * 1000;
+    const payload = { foo: 'bar' };
+    const statusCodeSuccess = 200;
+    const statusCodeError = 404;
+    const errorMessage = 'not found';
+    remoteDataMocks = {
+      RequestPending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
+      ResponsePending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+      Success: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Success, undefined, payload, statusCodeSuccess),
+      SuccessStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.SuccessStale, undefined, payload, statusCodeSuccess),
+      Error: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Error, errorMessage, undefined, statusCodeError),
+      ErrorStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.ErrorStale, errorMessage, undefined, statusCodeError),
+    };
+
+
     return new TestService(
       requestService,
       rdbService,
@@ -307,14 +342,12 @@ describe('DataService', () => {
 
   describe('update', () => {
     let operations;
-    let selfLink;
     let dso;
     let dso2;
     const name1 = 'random string';
     const name2 = 'another random string';
     beforeEach(() => {
       operations = [{ op: 'replace', path: '/0/value', value: name2 } as Operation];
-      selfLink = 'https://rest.api/endpoint/1698f1d3-be98-4c51-9fd8-6bfedcbd59b7';
 
       dso = Object.assign(new DSpaceObject(), {
         _links: { self: { href: selfLink } },
@@ -340,5 +373,452 @@ describe('DataService', () => {
       expect(objectCache.addPatch).not.toHaveBeenCalled();
     });
   });
+
+  describe(`reRequestStaleRemoteData`, () => {
+    let callback: jasmine.Spy<jasmine.Func>;
+
+    beforeEach(() => {
+      callback = jasmine.createSpy();
+    });
+
+
+    describe(`when shouldReRequest is false`, () => {
+      it(`shouldn't do anything`, () => {
+        testScheduler.run(({ cold, expectObservable, flush }) => {
+          const expected = 'a-b-c-d-e-f';
+          const values = {
+            a: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.Success,
+            d: remoteDataMocks.SuccessStale,
+            e: remoteDataMocks.Error,
+            f: remoteDataMocks.ErrorStale,
+          };
+
+          expectObservable((service as any).reRequestStaleRemoteData(false, callback)(cold(expected, values))).toBe(expected, values);
+          // since the callback happens in a tap(), flush to ensure it has been executed
+          flush();
+          expect(callback).not.toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe(`when shouldReRequest is true`, () => {
+      it(`should call the callback for stale RemoteData objects, but still pass the source observable unmodified`, () => {
+        testScheduler.run(({ cold, expectObservable, flush }) => {
+          const expected = 'a-b';
+          const values = {
+            a: remoteDataMocks.SuccessStale,
+            b: remoteDataMocks.ErrorStale,
+          };
+
+          expectObservable((service as any).reRequestStaleRemoteData(true, callback)(cold(expected, values))).toBe(expected, values);
+          // since the callback happens in a tap(), flush to ensure it has been executed
+          flush();
+          expect(callback).toHaveBeenCalledTimes(2);
+        });
+      });
+
+      it(`should only call the callback for stale RemoteData objects if something is subscribed to it`, (done) => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          const expected = 'a';
+          const values = {
+            a: remoteDataMocks.SuccessStale,
+          };
+
+          const result$ = (service as any).reRequestStaleRemoteData(true, callback)(cold(expected, values));
+          expectObservable(result$).toBe(expected, values);
+          expect(callback).not.toHaveBeenCalled();
+          result$.subscribe(() => {
+            expect(callback).toHaveBeenCalled();
+            done();
+          });
+        });
+      });
+
+      it(`shouldn't do anything for RemoteData objects that aren't stale`, () => {
+        testScheduler.run(({ cold, expectObservable, flush }) => {
+          const expected = 'a-b-c-d';
+          const values = {
+            a: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.Success,
+            d: remoteDataMocks.Error,
+          };
+
+          expectObservable((service as any).reRequestStaleRemoteData(true, callback)(cold(expected, values))).toBe(expected, values);
+          // since the callback happens in a tap(), flush to ensure it has been executed
+          flush();
+          expect(callback).not.toHaveBeenCalled();
+        });
+      });
+    });
+
+  });
+
+  describe(`findByHref`, () => {
+    beforeEach(() => {
+      spyOn(service as any, 'createAndSendGetRequest').and.callFake((href$) => { href$.subscribe().unsubscribe(); });
+    });
+
+    it(`should call buildHrefFromFindOptions with href and linksToFollow`, () => {
+      testScheduler.run(({ cold }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findByHref(selfLink, true, true, ...linksToFollow);
+        expect(service.buildHrefFromFindOptions).toHaveBeenCalledWith(selfLink, {}, [], ...linksToFollow);
+      });
+    });
+
+    it(`should call createAndSendGetRequest with the result from buildHrefFromFindOptions and useCachedVersionIfAvailable`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findByHref(selfLink, true, true, ...linksToFollow);
+        expect((service as any).createAndSendGetRequest).toHaveBeenCalledWith(jasmine.anything(), true);
+        expectObservable(rdbService.buildSingle.calls.argsFor(0)[0]).toBe('(a|)', { a: 'bingo!' });
+
+        service.findByHref(selfLink, false, true, ...linksToFollow);
+        expect((service as any).createAndSendGetRequest).toHaveBeenCalledWith(jasmine.anything(), false);
+        expectObservable(rdbService.buildSingle.calls.argsFor(1)[0]).toBe('(a|)', { a: 'bingo!' });
+      });
+    });
+
+    it(`should call rdbService.buildSingle with the result from buildHrefFromFindOptions and linksToFollow`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findByHref(selfLink, true, true, ...linksToFollow);
+        expect(rdbService.buildSingle).toHaveBeenCalledWith(jasmine.anything() as any, ...linksToFollow);
+        expectObservable(rdbService.buildSingle.calls.argsFor(0)[0]).toBe('(a|)', { a: 'bingo!' });
+      });
+    });
+
+    it(`should return a the output from reRequestStaleRemoteData`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: 'bingo!' }));
+        const expected = 'a';
+        const values = {
+          a: 'bingo!',
+        };
+
+        expectObservable(service.findByHref(selfLink, true, true, ...linksToFollow)).toBe(expected, values);
+      });
+    });
+
+    it(`should call reRequestStaleRemoteData with reRequestOnStale and the exact same findByHref call as a callback`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(rdbService, 'buildSingle').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.SuccessStale }));
+
+        service.findByHref(selfLink, true, true, ...linksToFollow);
+        expect((service as any).reRequestStaleRemoteData.calls.argsFor(0)[0]).toBeTrue();
+        spyOn(service, 'findByHref').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
+        // prove that the spy we just added hasn't been called yet
+        expect(service.findByHref).not.toHaveBeenCalled();
+        // call the callback passed to reRequestStaleRemoteData
+        (service as any).reRequestStaleRemoteData.calls.argsFor(0)[1]();
+        // verify that findByHref _has_ been called now, with the same params as the original call
+        expect(service.findByHref).toHaveBeenCalledWith(jasmine.anything(), true, true, ...linksToFollow);
+        // ... except for selflink, which will have been turned in to an observable.
+        expectObservable((service.findByHref as jasmine.Spy).calls.argsFor(0)[0]).toBe('(a|)', { a: selfLink });
+      });
+    });
+
+    describe(`when useCachedVersionIfAvailable is true`, () => {
+      beforeEach(() => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(service as any, 'reRequestStaleRemoteData').and.callFake(() => (source) => source);
+      });
+
+      it(`should emit a cached completed RemoteData immediately, and keep emitting if it gets rerequested`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b-c-d-e';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findByHref(selfLink, true, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+      it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.SuccessStale,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findByHref(selfLink, true, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+    });
+
+    describe(`when useCachedVersionIfAvailable is false`, () => {
+      beforeEach(() => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(service as any, 'reRequestStaleRemoteData').and.callFake(() => (source) => source);
+      });
+
+
+      it(`should not emit a cached completed RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findByHref(selfLink, false, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+      it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.SuccessStale,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findByHref(selfLink, false, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+    });
+
+  });
+
+  describe(`findAllByHref`, () => {
+    let findListOptions;
+    beforeEach(() => {
+      findListOptions = { currentPage: 5 };
+      spyOn(service as any, 'createAndSendGetRequest').and.callFake((href$) => { href$.subscribe().unsubscribe(); });
+    });
+
+    it(`should call buildHrefFromFindOptions with href and linksToFollow`, () => {
+      testScheduler.run(({ cold }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow);
+        expect(service.buildHrefFromFindOptions).toHaveBeenCalledWith(selfLink, findListOptions, [], ...linksToFollow);
+      });
+    });
+
+    it(`should call createAndSendGetRequest with the result from buildHrefFromFindOptions and useCachedVersionIfAvailable`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow);
+        expect((service as any).createAndSendGetRequest).toHaveBeenCalledWith(jasmine.anything(), true);
+        expectObservable(rdbService.buildList.calls.argsFor(0)[0]).toBe('(a|)', { a: 'bingo!' });
+
+        service.findAllByHref(selfLink, findListOptions, false, true, ...linksToFollow);
+        expect((service as any).createAndSendGetRequest).toHaveBeenCalledWith(jasmine.anything(), false);
+        expectObservable(rdbService.buildList.calls.argsFor(1)[0]).toBe('(a|)', { a: 'bingo!' });
+      });
+    });
+
+    it(`should call rdbService.buildList with the result from buildHrefFromFindOptions and linksToFollow`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.Success }));
+
+        service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow);
+        expect(rdbService.buildList).toHaveBeenCalledWith(jasmine.anything() as any, ...linksToFollow);
+        expectObservable(rdbService.buildList.calls.argsFor(0)[0]).toBe('(a|)', { a: 'bingo!' });
+      });
+    });
+
+    it(`should call reRequestStaleRemoteData with reRequestOnStale and the exact same findAllByHref call as a callback`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue('bingo!');
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: remoteDataMocks.SuccessStale }));
+
+        service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow);
+        expect((service as any).reRequestStaleRemoteData.calls.argsFor(0)[0]).toBeTrue();
+        spyOn(service, 'findAllByHref').and.returnValue(cold('a', { a: remoteDataMocks.SuccessStale }));
+        // prove that the spy we just added hasn't been called yet
+        expect(service.findAllByHref).not.toHaveBeenCalled();
+        // call the callback passed to reRequestStaleRemoteData
+        (service as any).reRequestStaleRemoteData.calls.argsFor(0)[1]();
+        // verify that findAllByHref _has_ been called now, with the same params as the original call
+        expect(service.findAllByHref).toHaveBeenCalledWith(jasmine.anything(), findListOptions, true, true, ...linksToFollow);
+        // ... except for selflink, which will have been turned in to an observable.
+        expectObservable((service.findAllByHref as jasmine.Spy).calls.argsFor(0)[0]).toBe('(a|)', { a: selfLink });
+      });
+    });
+
+    it(`should return a the output from reRequestStaleRemoteData`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(rdbService, 'buildList').and.returnValue(cold('a', { a: remoteDataMocks.Success }));
+        spyOn(service as any, 'reRequestStaleRemoteData').and.returnValue(() => cold('a', { a: 'bingo!' }));
+        const expected = 'a';
+        const values = {
+          a: 'bingo!',
+        };
+
+        expectObservable(service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
+      });
+    });
+
+    describe(`when useCachedVersionIfAvailable is true`, () => {
+      beforeEach(() => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(service as any, 'reRequestStaleRemoteData').and.callFake(() => (source) => source);
+      });
+
+      it(`should emit a cached completed RemoteData immediately, and keep emitting if it gets rerequested`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b-c-d-e';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+      it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.SuccessStale,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findAllByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+    });
+
+    describe(`when useCachedVersionIfAvailable is false`, () => {
+      beforeEach(() => {
+        spyOn(service, 'buildHrefFromFindOptions').and.returnValue(selfLink);
+        spyOn(service as any, 'reRequestStaleRemoteData').and.callFake(() => (source) => source);
+      });
+
+
+      it(`should not emit a cached completed RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findAllByHref(selfLink, findListOptions, false, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+      it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.SuccessStale,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.findAllByHref(selfLink, findListOptions, false, true, ...linksToFollow)).toBe(expected, values);
+        });
+      });
+
+    });
+  });
 });
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index 814c281a37..6bad02e776 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -12,6 +12,7 @@ import {
   takeWhile,
   switchMap,
   tap,
+  skipWhile,
 } from 'rxjs/operators';
 import { hasValue, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
 import { NotificationOptions } from '../../shared/notifications/models/notification-options.model';
@@ -45,29 +46,6 @@ import { UpdateDataService } from './update-data.service';
 import { GenericConstructor } from '../shared/generic-constructor';
 import { NoContent } from '../shared/NoContent.model';
 
-/**
- * An operator that will call the given function if the incoming RemoteData is stale and
- * shouldReRequest is true
- *
- * @param shouldReRequest  Whether or not to call the re-request function if the RemoteData is stale
- * @param requestFn        The function to call if the RemoteData is stale and shouldReRequest is
- *                         true
- */
-export const reRequestStaleRemoteData = <T>(shouldReRequest: boolean, requestFn: () => Observable<RemoteData<T>>) =>
-  (source: Observable<RemoteData<T>>): Observable<RemoteData<T>> => {
-    if (shouldReRequest === true) {
-      return source.pipe(
-        tap((remoteData: RemoteData<T>) => {
-          if (hasValue(remoteData) && remoteData.isStale) {
-            requestFn();
-          }
-        })
-      );
-    } else {
-      return source;
-    }
-  };
-
 export abstract class DataService<T extends CacheableObject> implements UpdateDataService<T> {
   protected abstract requestService: RequestService;
   protected abstract rdbService: RemoteDataBuildService;
@@ -332,6 +310,30 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
     return this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
 
+  /**
+   * An operator that will call the given function if the incoming RemoteData is stale and
+   * shouldReRequest is true
+   *
+   * @param shouldReRequest  Whether or not to call the re-request function if the RemoteData is stale
+   * @param requestFn        The function to call if the RemoteData is stale and shouldReRequest is
+   *                         true
+   */
+  protected reRequestStaleRemoteData<O>(shouldReRequest: boolean, requestFn: () => Observable<RemoteData<O>>) {
+    return (source: Observable<RemoteData<O>>): Observable<RemoteData<O>> => {
+      if (shouldReRequest === true) {
+        return source.pipe(
+          tap((remoteData: RemoteData<O>) => {
+            if (hasValue(remoteData) && remoteData.isStale) {
+              requestFn();
+            }
+          })
+        );
+      } else {
+        return source;
+      }
+    };
+  }
+
   /**
    * Returns an observable of {@link RemoteData} of an object, based on an href, with a list of
    * {@link FollowLinkConfig}, to automatically resolve {@link HALLink}s of the object
@@ -358,7 +360,12 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
     this.createAndSendGetRequest(requestHref$, useCachedVersionIfAvailable);
 
     return this.rdbService.buildSingle<T>(requestHref$, ...linksToFollow).pipe(
-      reRequestStaleRemoteData(reRequestOnStale, () =>
+      // This skip ensures that if a stale object is present in the cache when you do a
+      // call it isn't immediately returned, but we wait until the remote data for the new request
+      // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
+      // cached completed object
+      skipWhile((rd: RemoteData<T>) => useCachedVersionIfAvailable ? rd.isStale : rd.hasCompleted),
+      this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow))
     );
   }
@@ -390,7 +397,12 @@ export abstract class DataService<T extends CacheableObject> implements UpdateDa
     this.createAndSendGetRequest(requestHref$, useCachedVersionIfAvailable);
 
     return this.rdbService.buildList<T>(requestHref$, ...linksToFollow).pipe(
-      reRequestStaleRemoteData(reRequestOnStale, () =>
+      // This skip ensures that if a stale object is present in the cache when you do a
+      // call it isn't immediately returned, but we wait until the remote data for the new request
+      // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
+      // cached completed object
+      skipWhile((rd: RemoteData<PaginatedList<T>>) => useCachedVersionIfAvailable ? rd.isStale : rd.hasCompleted),
+      this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findAllByHref(href$, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow))
     );
   }
diff --git a/src/app/core/data/dso-redirect-data.service.spec.ts b/src/app/core/data/dso-redirect-data.service.spec.ts
index 43489fbf6d..d64f37ad78 100644
--- a/src/app/core/data/dso-redirect-data.service.spec.ts
+++ b/src/app/core/data/dso-redirect-data.service.spec.ts
@@ -120,7 +120,7 @@ describe('DsoRedirectDataService', () => {
     it('should navigate to entities route with the corresponding entity type', () => {
       remoteData.payload.type = 'item';
       remoteData.payload.metadata =  {
-        'relationship.type': [
+        'dspace.entity.type': [
           {
             language: 'en_US',
             value: 'Publication'
diff --git a/src/app/core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard.ts b/src/app/core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard.ts
new file mode 100644
index 0000000000..bc39397ed9
--- /dev/null
+++ b/src/app/core/data/feature-authorization/feature-authorization-guard/collection-administrator.guard.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { FeatureAuthorizationGuard } from './feature-authorization.guard';
+import { AuthorizationDataService } from '../authorization-data.service';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../../../auth/auth.service';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../feature-id';
+
+/**
+ * Prevent unauthorized activating and loading of routes when the current authenticated user
+ * isn't a Collection administrator
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CollectionAdministratorGuard extends FeatureAuthorizationGuard {
+  constructor(protected authorizationService: AuthorizationDataService, protected router: Router, protected authService: AuthService) {
+    super(authorizationService, router, authService);
+  }
+
+  /**
+   * Check group management rights
+   */
+  getFeatureID(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID> {
+    return observableOf(FeatureID.IsCollectionAdmin);
+  }
+}
diff --git a/src/app/core/data/feature-authorization/feature-authorization-guard/community-administrator.guard.ts b/src/app/core/data/feature-authorization/feature-authorization-guard/community-administrator.guard.ts
new file mode 100644
index 0000000000..afb1fea63d
--- /dev/null
+++ b/src/app/core/data/feature-authorization/feature-authorization-guard/community-administrator.guard.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { FeatureAuthorizationGuard } from './feature-authorization.guard';
+import { AuthorizationDataService } from '../authorization-data.service';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../../../auth/auth.service';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../feature-id';
+
+/**
+ * Prevent unauthorized activating and loading of routes when the current authenticated user
+ * isn't a Community administrator
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CommunityAdministratorGuard extends FeatureAuthorizationGuard {
+  constructor(protected authorizationService: AuthorizationDataService, protected router: Router, protected authService: AuthService) {
+    super(authorizationService, router, authService);
+  }
+
+  /**
+   * Check group management rights
+   */
+  getFeatureID(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID> {
+    return observableOf(FeatureID.IsCommunityAdmin);
+  }
+}
diff --git a/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.spec.ts b/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.spec.ts
index 4041e588ed..f98e3f1837 100644
--- a/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.spec.ts
+++ b/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.spec.ts
@@ -32,6 +32,8 @@ describe('DsoPageAdministratorGuard', () => {
   let authService: AuthService;
   let resolver: Resolve<RemoteData<any>>;
   let object: DSpaceObject;
+  let route;
+  let parentRoute;
 
   function init() {
     object = {
@@ -50,6 +52,16 @@ describe('DsoPageAdministratorGuard', () => {
     authService = jasmine.createSpyObj('authService', {
       isAuthenticated: observableOf(true)
     });
+    parentRoute = {
+      params: {
+        id: '3e1a5327-dabb-41ff-af93-e6cab9d032f0'
+      }
+    };
+    route = {
+      params: {
+      },
+      parent: parentRoute
+    };
     guard = new DsoPageFeatureGuardImpl(resolver, authorizationService, router, authService, undefined);
   }
 
@@ -59,10 +71,17 @@ describe('DsoPageAdministratorGuard', () => {
 
   describe('getObjectUrl', () => {
     it('should return the resolved object\'s selflink', (done) => {
-      guard.getObjectUrl(undefined, undefined).subscribe((selflink) => {
+      guard.getObjectUrl(route, undefined).subscribe((selflink) => {
         expect(selflink).toEqual(object.self);
         done();
       });
     });
   });
+
+  describe('getRouteWithDSOId', () => {
+    it('should return the route that has the UUID of the DSO', () => {
+      const foundRoute = (guard as any).getRouteWithDSOId(route);
+      expect(foundRoute).toBe(parentRoute);
+    });
+  });
 });
diff --git a/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.ts b/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.ts
index c9ac7155d4..c50dd7f95d 100644
--- a/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.ts
+++ b/src/app/core/data/feature-authorization/feature-authorization-guard/dso-page-feature.guard.ts
@@ -7,6 +7,7 @@ import { map } from 'rxjs/operators';
 import { DSpaceObject } from '../../../shared/dspace-object.model';
 import { FeatureAuthorizationGuard } from './feature-authorization.guard';
 import { AuthService } from '../../../auth/auth.service';
+import { hasNoValue, hasValue } from '../../../../shared/empty.util';
 
 /**
  * Abstract Guard for preventing unauthorized access to {@link DSpaceObject} pages that require rights for a specific feature
@@ -24,9 +25,22 @@ export abstract class DsoPageFeatureGuard<T extends DSpaceObject> extends Featur
    * Check authorization rights for the object resolved using the provided resolver
    */
   getObjectUrl(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
-    return (this.resolver.resolve(route, state) as Observable<RemoteData<T>>).pipe(
+    const routeWithObjectID = this.getRouteWithDSOId(route);
+    return (this.resolver.resolve(routeWithObjectID, state) as Observable<RemoteData<T>>).pipe(
       getAllSucceededRemoteDataPayload(),
       map((dso) => dso.self)
     );
   }
+
+  /**
+   * Method to resolve resolve (parent) route that contains the UUID of the DSO
+   * @param route The current route
+   */
+  protected getRouteWithDSOId(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot {
+    let routeWithDSOId = route;
+    while (hasNoValue(routeWithDSOId.params.id) && hasValue(routeWithDSOId.parent)) {
+      routeWithDSOId = routeWithDSOId.parent;
+    }
+    return routeWithDSOId;
+  }
 }
diff --git a/src/app/core/data/feature-authorization/feature-authorization-guard/group-administrator.guard.ts b/src/app/core/data/feature-authorization/feature-authorization-guard/group-administrator.guard.ts
new file mode 100644
index 0000000000..3fee767fdc
--- /dev/null
+++ b/src/app/core/data/feature-authorization/feature-authorization-guard/group-administrator.guard.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { FeatureAuthorizationGuard } from './feature-authorization.guard';
+import { AuthorizationDataService } from '../authorization-data.service';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { AuthService } from '../../../auth/auth.service';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../feature-id';
+
+/**
+ * Prevent unauthorized activating and loading of routes when the current authenticated user doesn't have group
+ * management rights
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupAdministratorGuard extends FeatureAuthorizationGuard {
+  constructor(protected authorizationService: AuthorizationDataService, protected router: Router, protected authService: AuthService) {
+    super(authorizationService, router, authService);
+  }
+
+  /**
+   * Check group management rights
+   */
+  getFeatureID(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID> {
+    return observableOf(FeatureID.CanManageGroups);
+  }
+}
diff --git a/src/app/core/data/feature-authorization/feature-id.ts b/src/app/core/data/feature-authorization/feature-id.ts
index 3c17f43cb1..e3473a895e 100644
--- a/src/app/core/data/feature-authorization/feature-id.ts
+++ b/src/app/core/data/feature-authorization/feature-id.ts
@@ -9,4 +9,7 @@ export enum FeatureID {
   WithdrawItem = 'withdrawItem',
   ReinstateItem = 'reinstateItem',
   EPersonRegistration = 'epersonRegistration',
+  CanManageGroups = 'canManageGroups',
+  IsCollectionAdmin = 'isCollectionAdmin',
+  IsCommunityAdmin = 'isCommunityAdmin',
 }
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
index 64f22d8aa5..19e6941385 100644
--- a/src/app/core/data/item-template-data.service.ts
+++ b/src/app/core/data/item-template-data.service.ts
@@ -22,6 +22,7 @@ import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { NoContent } from '../shared/NoContent.model';
 import { hasValue } from '../../shared/empty.util';
 import { Operation } from 'fast-json-patch';
+import { getFirstCompletedRemoteData } from '../shared/operators';
 
 /* tslint:disable:max-classes-per-file */
 /**
@@ -57,15 +58,23 @@ class DataServiceImpl extends ItemDataService {
     super(requestService, rdbService, store, bs, objectCache, halService, notificationsService, http, comparator, bundleService);
   }
 
+  /**
+   * Get the endpoint based on a collection
+   * @param collectionID  The ID of the collection to base the endpoint on
+   */
+  public getCollectionEndpoint(collectionID: string): Observable<string> {
+    return this.collectionService.getIDHrefObs(collectionID).pipe(
+      switchMap((href: string) => this.halService.getEndpoint(this.collectionLinkPath, href))
+    );
+  }
+
   /**
    * Set the endpoint to be based on a collection
    * @param collectionID  The ID of the collection to base the endpoint on
    */
   private setCollectionEndpoint(collectionID: string) {
     this.collectionEndpoint = true;
-    this.endpoint$ = this.collectionService.getIDHrefObs(collectionID).pipe(
-      switchMap((href: string) => this.halService.getEndpoint(this.collectionLinkPath, href))
-    );
+    this.endpoint$ = this.getCollectionEndpoint(collectionID);
   }
 
   /**
@@ -130,6 +139,7 @@ class DataServiceImpl extends ItemDataService {
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
     this.setRegularEndpoint();
     return super.delete(item.uuid).pipe(
+      getFirstCompletedRemoteData(),
       map((response: RemoteData<NoContent>) => hasValue(response) && response.hasSucceeded)
     );
   }
@@ -209,5 +219,13 @@ export class ItemTemplateDataService implements UpdateDataService<Item> {
   deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
     return this.dataService.deleteByCollectionID(item, collectionID);
   }
+
+  /**
+   * Get the endpoint based on a collection
+   * @param collectionID  The ID of the collection to base the endpoint on
+   */
+  getCollectionEndpoint(collectionID: string): Observable<string> {
+    return this.dataService.getCollectionEndpoint(collectionID);
+  }
 }
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/core/eperson/eperson-data.service.spec.ts b/src/app/core/eperson/eperson-data.service.spec.ts
index 3af02b267b..cd7b664379 100644
--- a/src/app/core/eperson/eperson-data.service.spec.ts
+++ b/src/app/core/eperson/eperson-data.service.spec.ts
@@ -10,7 +10,7 @@ import { TestScheduler } from 'rxjs/testing';
 import {
   EPeopleRegistryCancelEPersonAction,
   EPeopleRegistryEditEPersonAction
-} from '../../+admin/admin-access-control/epeople-registry/epeople-registry.actions';
+} from '../../access-control/epeople-registry/epeople-registry.actions';
 import { RequestParam } from '../cache/models/request-param.model';
 import { CoreState } from '../core.reducers';
 import { ChangeAnalyzer } from '../data/change-analyzer';
diff --git a/src/app/core/eperson/eperson-data.service.ts b/src/app/core/eperson/eperson-data.service.ts
index 79df246833..bceb38f163 100644
--- a/src/app/core/eperson/eperson-data.service.ts
+++ b/src/app/core/eperson/eperson-data.service.ts
@@ -7,8 +7,8 @@ import { find, map, take } from 'rxjs/operators';
 import {
   EPeopleRegistryCancelEPersonAction,
   EPeopleRegistryEditEPersonAction
-} from '../../+admin/admin-access-control/epeople-registry/epeople-registry.actions';
-import { EPeopleRegistryState } from '../../+admin/admin-access-control/epeople-registry/epeople-registry.reducers';
+} from '../../access-control/epeople-registry/epeople-registry.actions';
+import { EPeopleRegistryState } from '../../access-control/epeople-registry/epeople-registry.reducers';
 import { AppState } from '../../app.reducer';
 import { hasValue, hasNoValue } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -269,7 +269,7 @@ export class EPersonDataService extends DataService<EPerson> {
         this.editEPerson(ePerson);
       }
     });
-    return '/admin/access-control/epeople';
+    return '/access-control/epeople';
   }
 
   /**
@@ -277,7 +277,7 @@ export class EPersonDataService extends DataService<EPerson> {
    * @param ePerson New EPerson to edit
    */
   public getEPeoplePageRouterLink(): string {
-    return '/admin/access-control/epeople';
+    return '/access-control/epeople';
   }
 
   /**
diff --git a/src/app/core/eperson/group-data.service.spec.ts b/src/app/core/eperson/group-data.service.spec.ts
index f77c831b55..378c3c9667 100644
--- a/src/app/core/eperson/group-data.service.spec.ts
+++ b/src/app/core/eperson/group-data.service.spec.ts
@@ -8,7 +8,7 @@ import { compare, Operation } from 'fast-json-patch';
 import {
   GroupRegistryCancelGroupAction,
   GroupRegistryEditGroupAction
-} from '../../+admin/admin-access-control/group-registry/group-registry.actions';
+} from '../../access-control/group-registry/group-registry.actions';
 import { GroupMock, GroupMock2 } from '../../shared/testing/group-mock';
 import { RequestParam } from '../cache/models/request-param.model';
 import { CoreState } from '../core.reducers';
diff --git a/src/app/core/eperson/group-data.service.ts b/src/app/core/eperson/group-data.service.ts
index dc5fd97d9a..5b8f474d1a 100644
--- a/src/app/core/eperson/group-data.service.ts
+++ b/src/app/core/eperson/group-data.service.ts
@@ -7,8 +7,8 @@ import { filter, map, take } from 'rxjs/operators';
 import {
   GroupRegistryCancelGroupAction,
   GroupRegistryEditGroupAction
-} from '../../+admin/admin-access-control/group-registry/group-registry.actions';
-import { GroupRegistryState } from '../../+admin/admin-access-control/group-registry/group-registry.reducers';
+} from '../../access-control/group-registry/group-registry.actions';
+import { GroupRegistryState } from '../../access-control/group-registry/group-registry.reducers';
 import { AppState } from '../../app.reducer';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
@@ -209,7 +209,7 @@ export class GroupDataService extends DataService<Group> {
   }
 
   public getGroupRegistryRouterLink(): string {
-    return '/admin/access-control/groups';
+    return '/access-control/groups';
   }
 
   /**
@@ -240,7 +240,7 @@ export class GroupDataService extends DataService<Group> {
    * @param groupID Group ID we want edit page for
    */
   public getGroupEditPageRouterLinkWithID(groupId: string): string {
-    return '/admin/access-control/groups/' + groupId;
+    return '/access-control/groups/' + groupId;
   }
 
   /**
diff --git a/src/app/core/locale/locale.service.spec.ts b/src/app/core/locale/locale.service.spec.ts
index 5fbeceb37a..cee2945253 100644
--- a/src/app/core/locale/locale.service.spec.ts
+++ b/src/app/core/locale/locale.service.spec.ts
@@ -8,6 +8,8 @@ import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { LANG_COOKIE, LANG_ORIGIN, LocaleService } from './locale.service';
 import { AuthService } from '../auth/auth.service';
 import { NativeWindowRef } from '../services/window.service';
+import { RouteService } from '../services/route.service';
+import { routeServiceStub } from '../../shared/testing/route-service.stub';
 
 describe('LocaleService test suite', () => {
   let service: LocaleService;
@@ -18,6 +20,7 @@ describe('LocaleService test suite', () => {
   let spyOnGet;
   let spyOnSet;
   let authService;
+  let routeService;
 
   authService = jasmine.createSpyObj('AuthService', {
     isAuthenticated: jasmine.createSpy('isAuthenticated'),
@@ -38,7 +41,8 @@ describe('LocaleService test suite', () => {
       ],
       providers: [
         { provide: CookieService, useValue: new CookieServiceMock() },
-        { provide: AuthService, userValue: authService }
+        { provide: AuthService, userValue: authService },
+        { provide: RouteService, useValue: routeServiceStub },
       ]
     });
   }));
@@ -46,8 +50,9 @@ describe('LocaleService test suite', () => {
   beforeEach(() => {
     cookieService = TestBed.inject(CookieService);
     translateService = TestBed.inject(TranslateService);
+    routeService = TestBed.inject(RouteService);
     window = new NativeWindowRef();
-    service = new LocaleService(window, cookieService, translateService, authService);
+    service = new LocaleService(window, cookieService, translateService, authService, routeService);
     serviceAsAny = service;
     spyOnGet = spyOn(cookieService, 'get');
     spyOnSet = spyOn(cookieService, 'set');
diff --git a/src/app/core/locale/locale.service.ts b/src/app/core/locale/locale.service.ts
index 22e0285e6d..c73b297e40 100644
--- a/src/app/core/locale/locale.service.ts
+++ b/src/app/core/locale/locale.service.ts
@@ -9,6 +9,7 @@ import { AuthService } from '../auth/auth.service';
 import { combineLatest, Observable, of as observableOf } from 'rxjs';
 import { map, mergeMap, take } from 'rxjs/operators';
 import { NativeWindowRef, NativeWindowService } from '../services/window.service';
+import { RouteService } from '../services/route.service';
 
 export const LANG_COOKIE = 'dsLanguage';
 
@@ -36,7 +37,8 @@ export class LocaleService {
     @Inject(NativeWindowService) protected _window: NativeWindowRef,
     protected cookie: CookieService,
     protected translate: TranslateService,
-    protected authService: AuthService) {
+    protected authService: AuthService,
+    protected routeService: RouteService) {
   }
 
   /**
@@ -183,9 +185,12 @@ export class LocaleService {
    * Refresh route navigated
    */
   public refreshAfterChangeLanguage() {
-    // Hard redirect to the reload page with a unique number behind it
-    // so that all state is definitely lost
-    this._window.nativeWindow.location.href = `/reload/${new Date().getTime()}`;
+    this.routeService.getCurrentUrl().pipe(take(1)).subscribe((currentURL) => {
+      // Hard redirect to the reload page with a unique number behind it
+      // so that all state is definitely lost
+      this._window.nativeWindow.location.href = `/reload/${new Date().getTime()}?redirect=` + encodeURIComponent(currentURL);
+    });
+
   }
 
 }
diff --git a/src/app/core/metadata/metadata.service.spec.ts b/src/app/core/metadata/metadata.service.spec.ts
index bc323decfd..25165aba79 100644
--- a/src/app/core/metadata/metadata.service.spec.ts
+++ b/src/app/core/metadata/metadata.service.spec.ts
@@ -8,8 +8,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { Store, StoreModule } from '@ngrx/store';
 
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { EmptyError, Observable } from 'rxjs';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { EmptyError, Observable, of } from 'rxjs';
 
 import { RemoteData } from '../data/remote-data';
 import { Item } from '../shared/item.model';
@@ -94,6 +94,7 @@ describe('MetadataService', () => {
   let itemDataService: ItemDataService;
   let authService: AuthService;
   let rootService: RootDataService;
+  let translateService: TranslateService;
 
   let location: Location;
   let router: Router;
@@ -195,6 +196,7 @@ describe('MetadataService', () => {
     itemDataService = TestBed.inject(ItemDataService);
     metadataService = TestBed.inject(MetadataService);
     authService = TestBed.inject(AuthService);
+    translateService = TestBed.inject(TranslateService);
 
     router = TestBed.inject(Router);
     location = TestBed.inject(Location);
@@ -236,14 +238,15 @@ describe('MetadataService', () => {
 
   it('other navigation should add title, description and Generator', fakeAsync(() => {
     spyOn(itemDataService, 'findById').and.returnValue(mockRemoteData(ItemMock));
+    spyOn(translateService, 'get').and.returnValues(of('DSpace :: '), of('Dummy Title'), of('This is a dummy item component for testing!'));
     router.navigate(['/items/0ec7ff22-f211-40ab-a69e-c819b0b1f357']);
     tick();
     expect(tagStore.size).toBeGreaterThan(0);
     router.navigate(['/other']);
     tick();
     expect(tagStore.size).toEqual(3);
-    expect(title.getTitle()).toEqual('Dummy Title');
-    expect(tagStore.get('title')[0].content).toEqual('Dummy Title');
+    expect(title.getTitle()).toEqual('DSpace :: Dummy Title');
+    expect(tagStore.get('title')[0].content).toEqual('DSpace :: Dummy Title');
     expect(tagStore.get('description')[0].content).toEqual('This is a dummy item component for testing!');
     expect(tagStore.get('Generator')[0].content).toEqual('mock-dspace-version');
   }));
diff --git a/src/app/core/metadata/metadata.service.ts b/src/app/core/metadata/metadata.service.ts
index 414fb13a88..dac0a787fb 100644
--- a/src/app/core/metadata/metadata.service.ts
+++ b/src/app/core/metadata/metadata.service.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
 
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { catchError, distinctUntilKeyChanged, filter, first, map, take } from 'rxjs/operators';
 
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
@@ -83,9 +83,11 @@ export class MetadataService {
       this.clearMetaTags();
     }
     if (routeInfo.data.value.title) {
-      this.translate.get(routeInfo.data.value.title, routeInfo.data.value).pipe(take(1)).subscribe((translatedTitle: string) => {
-        this.addMetaTag('title', translatedTitle);
-        this.title.setTitle(translatedTitle);
+      const titlePrefix = this.translate.get('repository.title.prefix');
+      const title = this.translate.get(routeInfo.data.value.title, routeInfo.data.value);
+      combineLatest([titlePrefix, title]).pipe(take(1)).subscribe(([translatedTitlePrefix, translatedTitle]: [string, string]) => {
+        this.addMetaTag('title', translatedTitlePrefix + translatedTitle);
+        this.title.setTitle(translatedTitlePrefix + translatedTitle);
       });
     }
     if (routeInfo.data.value.description) {
diff --git a/src/app/core/registry/registry.service.spec.ts b/src/app/core/registry/registry.service.spec.ts
index fdfe1c9fac..5f2f123f01 100644
--- a/src/app/core/registry/registry.service.spec.ts
+++ b/src/app/core/registry/registry.service.spec.ts
@@ -326,6 +326,25 @@ describe('RegistryService', () => {
     });
   });
 
+  describe('when createMetadataField is called with a blank qualifier', () => {
+    let result: Observable<MetadataField>;
+    let metadataField: MetadataField;
+
+    beforeEach(() => {
+      metadataField = mockFieldsList[0];
+      metadataField.qualifier = '';
+      result = registryService.createMetadataField(metadataField, mockSchemasList[0]);
+    });
+
+    it('should return the created metadata field with a null qualifier', (done) => {
+      metadataField.qualifier = null;
+      result.subscribe((field: MetadataField) => {
+        expect(field).toEqual(metadataField);
+        done();
+      });
+    });
+  });
+
   describe('when updateMetadataField is called', () => {
     let result: Observable<MetadataField>;
 
@@ -341,6 +360,25 @@ describe('RegistryService', () => {
     });
   });
 
+  describe('when updateMetadataField is called with a blank qualifier', () => {
+    let result: Observable<MetadataField>;
+    let metadataField: MetadataField;
+
+    beforeEach(() => {
+      metadataField = mockFieldsList[0];
+      metadataField.qualifier = '';
+      result = registryService.updateMetadataField(metadataField);
+    });
+
+    it('should return the updated metadata field with a null qualifier', (done) => {
+      metadataField.qualifier = null;
+      result.subscribe((field: MetadataField) => {
+        expect(field).toEqual(metadataField);
+        done();
+      });
+    });
+  });
+
   describe('when deleteMetadataSchema is called', () => {
     let result: Observable<RemoteData<NoContent>>;
 
diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts
index 9ac849bdd3..b7b35c6a5a 100644
--- a/src/app/core/registry/registry.service.ts
+++ b/src/app/core/registry/registry.service.ts
@@ -245,6 +245,9 @@ export class RegistryService {
    * @param schema   The MetadataSchema to create the field in
    */
   public createMetadataField(field: MetadataField, schema: MetadataSchema): Observable<MetadataField> {
+    if (!field.qualifier) {
+      field.qualifier = null;
+    }
     return this.metadataFieldService.create(field, new RequestParam('schemaId', schema.id)).pipe(
       getFirstSucceededRemoteDataPayload(),
       hasValueOperator(),
@@ -260,6 +263,9 @@ export class RegistryService {
    * @param field    The MetadataField to update
    */
   public updateMetadataField(field: MetadataField): Observable<MetadataField> {
+    if (!field.qualifier) {
+      field.qualifier = null;
+    }
     return this.metadataFieldService.put(field).pipe(
       getFirstSucceededRemoteDataPayload(),
       hasValueOperator(),
diff --git a/src/app/core/services/route.service.spec.ts b/src/app/core/services/route.service.spec.ts
index c4b2aebcb1..18a916753a 100644
--- a/src/app/core/services/route.service.spec.ts
+++ b/src/app/core/services/route.service.spec.ts
@@ -153,4 +153,32 @@ describe('RouteService', () => {
       });
     });
   });
+
+  describe('getCurrentUrl', () => {
+    it('should return an observable with the current url', () => {
+      serviceAsAny.store = observableOf({
+        core: {
+          history: ['url', 'newurl']
+        }
+      });
+
+      service.getCurrentUrl().subscribe((history) => {
+        expect(history).toEqual('newurl');
+      });
+    });
+  });
+
+  describe('getCurrentUrl', () => {
+    it('should return an observable with the previous url', () => {
+      serviceAsAny.store = observableOf({
+        core: {
+          history: ['url', 'newurl']
+        }
+      });
+
+      service.getPreviousUrl().subscribe((history) => {
+        expect(history).toEqual('url');
+      });
+    });
+  });
 });
diff --git a/src/app/core/services/route.service.ts b/src/app/core/services/route.service.ts
index 8aee755e3b..23b7ccec85 100644
--- a/src/app/core/services/route.service.ts
+++ b/src/app/core/services/route.service.ts
@@ -172,6 +172,18 @@ export class RouteService {
     return this.store.pipe(select(historySelector));
   }
 
+  /**
+   * Return the current url retrieved from history
+   */
+  public getCurrentUrl(): Observable<string> {
+    return this.getHistory().pipe(
+      map((history: string[]) => history[history.length - 1] || '')
+    );
+  }
+
+  /**
+   * Return the current url retrieved from history
+   */
   public getPreviousUrl(): Observable<string> {
     return this.getHistory().pipe(
       map((history: string[]) => history[history.length - 2] || '')
diff --git a/src/app/core/shared/item.model.ts b/src/app/core/shared/item.model.ts
index 10b723c202..53eb5e3ce2 100644
--- a/src/app/core/shared/item.model.ts
+++ b/src/app/core/shared/item.model.ts
@@ -104,7 +104,7 @@ export class Item extends DSpaceObject implements ChildHALResource {
    * Method that returns as which type of object this object should be rendered
    */
   getRenderTypes(): (string | GenericConstructor<ListableObject>)[] {
-    const entityType = this.firstMetadataValue('relationship.type');
+    const entityType = this.firstMetadataValue('dspace.entity.type');
     if (isEmpty(entityType)) {
       return super.getRenderTypes();
     }
diff --git a/src/app/core/shared/media-viewer-item.model.ts b/src/app/core/shared/media-viewer-item.model.ts
new file mode 100644
index 0000000000..cd3a31bd0b
--- /dev/null
+++ b/src/app/core/shared/media-viewer-item.model.ts
@@ -0,0 +1,21 @@
+import { Bitstream } from './bitstream.model';
+
+/**
+ * Model representing a media viewer item
+ */
+export class MediaViewerItem {
+  /**
+   * Incoming Bitsream
+   */
+  bitstream: Bitstream;
+
+  /**
+   * Incoming Bitsream format type
+   */
+  format: string;
+
+  /**
+   * Incoming Bitsream thumbnail
+   */
+  thumbnail: string;
+}
diff --git a/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.spec.ts b/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.spec.ts
index 791fc43fbe..b46dab7180 100644
--- a/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.spec.ts
+++ b/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.spec.ts
@@ -24,7 +24,7 @@ describe('ItemMetadataRepresentation', () => {
   for (const metadataField of Object.keys(item.metadata)) {
     describe(`when creating an ItemMetadataRepresentation`, () => {
       beforeEach(() => {
-        item.metadata['relationship.type'] = [
+        item.metadata['dspace.entity.type'] = [
           Object.assign(new MetadataValue(), {
             value: itemType
           })
@@ -41,7 +41,7 @@ describe('ItemMetadataRepresentation', () => {
       });
 
       it('should return the correct item type', () => {
-        expect(itemMetadataRepresentation.itemType).toEqual(item.firstMetadataValue('relationship.type'));
+        expect(itemMetadataRepresentation.itemType).toEqual(item.firstMetadataValue('dspace.entity.type'));
       });
     });
   }
diff --git a/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.ts b/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.ts
index b688673b65..8c50e0b597 100644
--- a/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.ts
+++ b/src/app/core/shared/metadata-representation/item/item-metadata-representation.model.ts
@@ -21,7 +21,7 @@ export class ItemMetadataRepresentation extends Item implements MetadataRepresen
    * The type of item this item can be represented as
    */
   get itemType(): string {
-    return this.firstMetadataValue('relationship.type');
+    return this.firstMetadataValue('dspace.entity.type');
   }
 
   /**
diff --git a/src/app/core/shared/metadata.utils.spec.ts b/src/app/core/shared/metadata.utils.spec.ts
index ec0b3dd3ba..bc91d0585e 100644
--- a/src/app/core/shared/metadata.utils.spec.ts
+++ b/src/app/core/shared/metadata.utils.spec.ts
@@ -20,6 +20,7 @@ const dcTitle0 = mdValue('Title 0');
 const dcTitle1 = mdValue('Title 1');
 const dcTitle2 = mdValue('Title 2', 'en_US');
 const bar = mdValue('Bar');
+const test = mdValue('Test');
 
 const singleMap = { 'dc.title': [dcTitle0] };
 
@@ -30,6 +31,11 @@ const multiMap = {
   'foo': [bar]
 };
 
+const regexTestMap = {
+  'foolbar.baz': [test],
+  'foo.bard': [test],
+};
+
 const multiViewModelList = [
   { key: 'dc.description', ...dcDescription, order: 0 },
   { key: 'dc.description.abstract', ...dcAbstract, order: 0 },
@@ -98,6 +104,9 @@ describe('Metadata', () => {
       testAll([multiMap, singleMap], 'dc.*', [dcDescription, dcAbstract, dcTitle1, dcTitle2]);
       testAll([multiMap, singleMap], ['dc.title', 'dc.*'], [dcTitle1, dcTitle2, dcDescription, dcAbstract]);
     });
+    describe('with regexTestMap', () => {
+      testAll(regexTestMap, 'foo.bar.*', []);
+    });
   });
 
   describe('allValues method', () => {
diff --git a/src/app/core/shared/metadata.utils.ts b/src/app/core/shared/metadata.utils.ts
index 612fba1d4a..3fbeb205d2 100644
--- a/src/app/core/shared/metadata.utils.ts
+++ b/src/app/core/shared/metadata.utils.ts
@@ -156,7 +156,7 @@ export class Metadata {
     const outputKeys: string[] = [];
     for (const inputKey of inputKeys) {
       if (inputKey.includes('*')) {
-        const inputKeyRegex = new RegExp('^' + inputKey.replace('.', '\.').replace('*', '.*') + '$');
+        const inputKeyRegex = new RegExp('^' + inputKey.replace(/\./g, '\\.').replace(/\*/g, '.*') + '$');
         for (const mapKey of Object.keys(mdMap)) {
           if (!outputKeys.includes(mapKey) && inputKeyRegex.test(mapKey)) {
             outputKeys.push(mapKey);
diff --git a/src/app/core/tasks/tasks.service.ts b/src/app/core/tasks/tasks.service.ts
index f23c71e65e..7aeb522170 100644
--- a/src/app/core/tasks/tasks.service.ts
+++ b/src/app/core/tasks/tasks.service.ts
@@ -110,7 +110,6 @@ export abstract class TasksService<T extends CacheableObject> extends DataServic
       find((href: string) => hasValue(href)),
       mergeMap((href) => this.findByHref(href, false, true).pipe(
         getAllCompletedRemoteData(),
-        filter((rd: RemoteData<T>) => !rd.isSuccessStale),
         tap(() => this.requestService.setStaleByHrefSubstring(href)))
       )
     );
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
index 0e783a4843..fa4c06d36a 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
@@ -1,11 +1,11 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead"
-            [innerHTML]="firstMetadataValue('dc.title')"></a>
+            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead"
-          [innerHTML]="firstMetadataValue('dc.title')"></span>
+          class="lead item-list-title"
+          [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['publicationvolume.volumeNumber']).length > 0"
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts
index 9f15cc9816..b47a767be2 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { JournalIssueSearchResultListElementComponent } from './journal-issue-se
 import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let journalIssueListElementComponent: JournalIssueSearchResultListElementComponent;
 let fixture: ComponentFixture<JournalIssueSearchResultListElementComponent>;
@@ -60,7 +62,8 @@ describe('JournalIssueSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [JournalIssueSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
index 9bdb9a30cd..71aeb79c35 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
@@ -1,11 +1,11 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead"
-            [innerHTML]="firstMetadataValue('dc.title')"></a>
+            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead"
-          [innerHTML]="firstMetadataValue('dc.title')"></span>
+          class="lead item-list-title"
+          [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['journal.title']).length > 0"
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts
index b39129fbd2..d03bc29d6b 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { Item } from '../../../../../core/shared/item.model';
 import { JournalVolumeSearchResultListElementComponent } from './journal-volume-search-result-list-element.component';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let journalVolumeListElementComponent: JournalVolumeSearchResultListElementComponent;
 let fixture: ComponentFixture<JournalVolumeSearchResultListElementComponent>;
@@ -59,7 +61,8 @@ describe('JournalVolumeSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [JournalVolumeSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock },
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
index 9692d30192..05db5b8702 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
@@ -1,11 +1,11 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead"
-            [innerHTML]="firstMetadataValue('dc.title')"></a>
+            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead"
-          [innerHTML]="firstMetadataValue('dc.title')"></span>
+          class="lead item-list-title"
+          [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['creativeworkseries.issn']).length > 0"
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts
index 5ab60e97b7..9aca414ec6 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let journalListElementComponent: JournalSearchResultListElementComponent;
 let fixture: ComponentFixture<JournalSearchResultListElementComponent>;
@@ -55,7 +57,8 @@ describe('JournalSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [JournalSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock },
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts
index 29bb069121..d116b2ade7 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { ItemSearchResult } from '../../../../../shared/object-collection/shared/item-search-result.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let orgUnitListElementComponent: OrgUnitSearchResultListElementComponent;
 let fixture: ComponentFixture<OrgUnitSearchResultListElementComponent>;
@@ -53,7 +55,8 @@ describe('OrgUnitSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ OrgUnitSearchResultListElementComponent , TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [ NO_ERRORS_SCHEMA ]
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts
index 08fdf821d3..2acb02da7d 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { PersonSearchResultListElementComponent } from './person-search-result-l
 import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let personListElementComponent: PersonSearchResultListElementComponent;
 let fixture: ComponentFixture<PersonSearchResultListElementComponent>;
@@ -53,7 +55,8 @@ describe('PersonSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [PersonSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
index 4f82e78739..ae1d8c7510 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
@@ -1,11 +1,11 @@
 <ds-truncatable [id]="dso.id">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead"
-       [innerHTML]="firstMetadataValue('dc.title')"></a>
+       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead"
-          [innerHTML]="firstMetadataValue('dc.title')"></span>
+          class="lead item-list-title"
+          [innerHTML]="dsoTitle"></span>
     <!--<span class="text-muted">-->
     <!--<ds-truncatable-part [id]="dso.id" [minLines]="1">-->
     <!--<span *ngIf="dso.allMetadata(['project.identifier.status']).length > 0"-->
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts
index 1d45d98281..8b27a86f6d 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts
@@ -6,6 +6,8 @@ import { ProjectSearchResultListElementComponent } from './project-search-result
 import { Item } from '../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let projectListElementComponent: ProjectSearchResultListElementComponent;
 let fixture: ComponentFixture<ProjectSearchResultListElementComponent>;
@@ -53,7 +55,8 @@ describe('ProjectSearchResultListElementComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ProjectSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/person/person-sidebar-search-list-element.component.ts b/src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/person/person-sidebar-search-list-element.component.ts
index ade080f2e2..281f22ddb4 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/person/person-sidebar-search-list-element.component.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/sidebar-search-list-elements/person/person-sidebar-search-list-element.component.ts
@@ -9,6 +9,7 @@ import { isNotEmpty } from '../../../../../shared/empty.util';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { TranslateService } from '@ngx-translate/core';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement, Context.SideBarSearchModal)
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement, Context.SideBarSearchModalCurrent)
@@ -23,8 +24,10 @@ import { TranslateService } from '@ngx-translate/core';
 export class PersonSidebarSearchListElementComponent extends SidebarSearchListElementComponent<ItemSearchResult, Item> {
   constructor(protected truncatableService: TruncatableService,
               protected linkService: LinkService,
-              protected translateService: TranslateService) {
-    super(truncatableService, linkService);
+              protected translateService: TranslateService,
+              protected dsoNameService: DSONameService
+  ) {
+    super(truncatableService, linkService, dsoNameService);
   }
 
   /**
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.spec.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.spec.ts
index ff74c6554f..13a307e18f 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.spec.ts
@@ -27,6 +27,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../../shared/remote-
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { TruncatePipe } from '../../../../../shared/utils/truncate.pipe';
 import { OrgUnitSearchResultListSubmissionElementComponent } from './org-unit-search-result-list-submission-element.component';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../../shared/mocks/dso-name.service.mock';
 
 let personListElementComponent: OrgUnitSearchResultListSubmissionElementComponent;
 let fixture: ComponentFixture<OrgUnitSearchResultListSubmissionElementComponent>;
@@ -115,6 +117,7 @@ describe('OrgUnitSearchResultListSubmissionElementComponent', () => {
         { provide: DSOChangeAnalyzer, useValue: {} },
         { provide: DefaultChangeAnalyzer, useValue: {} },
         { provide: BitstreamDataService, useValue: mockBitstreamDataService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.ts
index 0c6d2b450c..e3cc8fccd3 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.ts
@@ -19,6 +19,7 @@ import { MetadataValue } from '../../../../../core/shared/metadata.models';
 import { ItemDataService } from '../../../../../core/data/item-data.service';
 import { SelectableListService } from '../../../../../shared/object-list/selectable-list/selectable-list.service';
 import { NameVariantModalComponent } from '../../name-variant-modal/name-variant-modal.component';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.EntitySearchModal)
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement, Context.EntitySearchModalWithNameVariants)
@@ -44,8 +45,10 @@ export class OrgUnitSearchResultListSubmissionElementComponent extends SearchRes
               private modalService: NgbModal,
               private itemDataService: ItemDataService,
               private bitstreamDataService: BitstreamDataService,
-              private selectableListService: SelectableListService) {
-    super(truncatableService);
+              private selectableListService: SelectableListService,
+              protected dsoNameService: DSONameService
+  ) {
+    super(truncatableService, dsoNameService);
   }
 
   ngOnInit() {
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.ts b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.ts
index 96be3d1b4e..64cf73cfb9 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.ts
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.ts
@@ -19,6 +19,7 @@ import { NameVariantModalComponent } from '../../name-variant-modal/name-variant
 import { MetadataValue } from '../../../../../core/shared/metadata.models';
 import { ItemDataService } from '../../../../../core/data/item-data.service';
 import { SelectableListService } from '../../../../../shared/object-list/selectable-list/selectable-list.service';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement, Context.EntitySearchModalWithNameVariants)
 @Component({
@@ -42,8 +43,10 @@ export class PersonSearchResultListSubmissionElementComponent extends SearchResu
               private modalService: NgbModal,
               private itemDataService: ItemDataService,
               private bitstreamDataService: BitstreamDataService,
-              private selectableListService: SelectableListService) {
-    super(truncatableService);
+              private selectableListService: SelectableListService,
+              protected dsoNameService: DSONameService
+  ) {
+    super(truncatableService, dsoNameService);
   }
 
   ngOnInit() {
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 6d30302f80..3756bce188 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,21 +1,75 @@
-<footer class="footer">
-    <div class="container-fluid content-container-fluid">
-        <img src="assets/images/dspace-logo.png"/>
-        <p>
-            <a href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
-            {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
-            <a href="http://www.duraspace.org/">{{ 'footer.link.duraspace' | translate}}</a>
-        </p>
-        <ul class="list-unstyled small d-flex justify-content-center mb-0 text-secondary">
-            <li>
-                <a href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
-            </li>
-            <li>
-                <a routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
-            </li>
-            <li>
-                <a routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
-            </li>
+<footer class="top-footer  text-lg-start">
+  <!-- Grid container -->
+  <div *ngIf="showTopFooter" 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>
+
+        <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 row-->
+  </div>
+  <!-- Grid container -->
+
+  <!-- Copyright -->
+  <div class="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>
+        {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
+        <a class="text-white" href="http://www.duraspace.org/">{{ 'footer.link.duraspace' | 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>
+        </li>
+        <li>
+          <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>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- Copyright -->
 </footer>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 5020ae17b1..3f6ccb58e7 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,42 +1,42 @@
 :host {
-  --ds-footer-bg: var(--bs-gray-100);
-  --ds-footer-border: 1px solid var(--bs-gray-300);
-  --ds-footer-padding: calc(var(--bs-spacer) * 1.5);
-  --ds-footer-logo-height: 55px;
 
-  .footer {
-    background-color: var(--ds-footer-bg);
+  .top-footer {
+    background-color: var(--ds-top-footer-bg);
     border-top: var(--ds-footer-border);
     text-align: center;
     padding: var(--ds-footer-padding);
-    padding-bottom: var(--bs-spacer);
+    z-index: var(--ds-footer-z-index);
 
     p {
       margin: 0;
     }
 
-    img {
+    div > img {
       height: var(--ds-footer-logo-height);
     }
 
-    ul {
-      padding-top: calc(var(--bs-spacer) * 0.5);
+    .footer {
+      background-color: var(--ds-footer-bg);
 
-      li {
-        display: inline-flex;
-        a {
-          padding: 0 calc(var(--bs-spacer) / 2);
-          color: inherit
-        }
-
-        &:not(:last-child) {
-          &:after {
-            content: '';
-            border-right: 1px var(--bs-secondary) solid;
+      ul {
+        li {
+          display: inline-flex;
+          a {
+            padding: 0 calc(var(--bs-spacer) / 2);
+            color: inherit
           }
 
+          &:not(:last-child) {
+            &:after {
+              content: '';
+              border-right: 1px var(--bs-secondary) solid;
+            }
+
+          }
         }
       }
     }
   }
 }
+
+
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
index 6ece2cf08b..c43a0ae85d 100644
--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
@@ -10,6 +10,11 @@ import { KlaroService } from '../shared/cookies/klaro.service';
 export class FooterComponent {
   dateObj: number = Date.now();
 
+  /**
+   * A boolean representing if to show or not the top footer container
+   */
+  showTopFooter = false;
+
   constructor(@Optional() private cookies: KlaroService) {
   }
 
diff --git a/src/app/footer/themed-footer.component.ts b/src/app/footer/themed-footer.component.ts
new file mode 100644
index 0000000000..c52a0af29f
--- /dev/null
+++ b/src/app/footer/themed-footer.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { FooterComponent } from './footer.component';
+
+/**
+ * Themed wrapper for FooterComponent
+ */
+@Component({
+  selector: 'ds-themed-footer',
+  styleUrls: ['footer.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedFooterComponent extends ThemedComponent<FooterComponent> {
+  protected getComponentName(): string {
+    return 'FooterComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/footer/footer.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./footer.component`);
+  }
+}
diff --git a/src/app/forbidden/themed-forbidden.component.ts b/src/app/forbidden/themed-forbidden.component.ts
new file mode 100644
index 0000000000..830529c8fa
--- /dev/null
+++ b/src/app/forbidden/themed-forbidden.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ForbiddenComponent } from './forbidden.component';
+
+/**
+ * Themed wrapper for ForbiddenComponent
+ */
+@Component({
+  selector: 'ds-themed-forbidden',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedForbiddenComponent extends ThemedComponent<ForbiddenComponent> {
+  protected getComponentName(): string {
+    return 'ForbiddenComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/forbidden/forbidden.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forbidden.component`);
+  }
+
+}
diff --git a/src/app/forgot-password/forgot-password-email/forgot-email.component.scss b/src/app/forgot-password/forgot-password-email/forgot-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/forgot-password/forgot-password-email/forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
index 5e18aff113..af482bdb67 100644
--- a/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
+++ b/src/app/forgot-password/forgot-password-email/forgot-email.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-forgot-email',
+  styleUrls: ['./forgot-email.component.scss'],
   templateUrl: './forgot-email.component.html'
 })
 /**
diff --git a/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
new file mode 100644
index 0000000000..da3848db1d
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotEmailComponent } from './forgot-email.component';
+
+/**
+ * Themed wrapper for ForgotEmailComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-email',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotEmailComponent extends ThemedComponent<ForgotEmailComponent> {
+  protected getComponentName(): string {
+    return 'ForgotEmailComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/forgot-password/forgot-password-email/forgot-email.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-email.component`);
+  }
+
+}
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.scss b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
index 8bfed0b2eb..98188a07e8 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -14,6 +14,7 @@ import { EPerson } from '../../core/eperson/models/eperson.model';
 
 @Component({
   selector: 'ds-forgot-password-form',
+  styleUrls: ['./forgot-password-form.component.scss'],
   templateUrl: './forgot-password-form.component.html'
 })
 /**
diff --git a/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
new file mode 100644
index 0000000000..3fb1b67e01
--- /dev/null
+++ b/src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ForgotPasswordFormComponent } from './forgot-password-form.component';
+
+/**
+ * Themed wrapper for ForgotPasswordFormComponent
+ */
+@Component({
+  selector: 'ds-themed-forgot-password-form',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedForgotPasswordFormComponent extends ThemedComponent<ForgotPasswordFormComponent> {
+  protected getComponentName(): string {
+    return 'ForgotPasswordFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/forgot-password/forgot-password-form/forgot-password-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./forgot-password-form.component`);
+  }
+}
diff --git a/src/app/forgot-password/forgot-password-routing.module.ts b/src/app/forgot-password/forgot-password-routing.module.ts
index 702de03a9d..2496c4eec6 100644
--- a/src/app/forgot-password/forgot-password-routing.module.ts
+++ b/src/app/forgot-password/forgot-password-routing.module.ts
@@ -2,27 +2,27 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
-import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
-import { ForgotEmailComponent } from './forgot-password-email/forgot-email.component';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: ForgotEmailComponent,
+        component: ThemedForgotEmailComponent,
         data: {title: 'forgot-password.title'},
       },
       {
         path: ':token',
-        component: ForgotPasswordFormComponent,
+        component: ThemedForgotPasswordFormComponent,
         resolve: {registration: RegistrationResolver}
       }
     ])
   ],
   providers: [
     RegistrationResolver,
-    ItemPageResolver
+    ItemPageResolver,
   ]
 })
 /**
diff --git a/src/app/forgot-password/forgot-password.module.ts b/src/app/forgot-password/forgot-password.module.ts
index 94fb482db9..593149d2a5 100644
--- a/src/app/forgot-password/forgot-password.module.ts
+++ b/src/app/forgot-password/forgot-password.module.ts
@@ -6,6 +6,8 @@ import { ForgotPasswordRoutingModule } from './forgot-password-routing.module';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ForgotPasswordFormComponent } from './forgot-password-form/forgot-password-form.component';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedForgotPasswordFormComponent } from './forgot-password-form/themed-forgot-password-form.component';
+import { ThemedForgotEmailComponent } from './forgot-password-email/themed-forgot-email.component';
 
 @NgModule({
   imports: [
@@ -17,7 +19,9 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     ForgotEmailComponent,
-    ForgotPasswordFormComponent
+    ThemedForgotEmailComponent,
+    ForgotPasswordFormComponent,
+    ThemedForgotPasswordFormComponent,
   ],
   providers: []
 })
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 931ab36749..c1843318b8 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,3 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
-    <ds-header></ds-header>
-    <ds-navbar></ds-navbar>
-</div>
\ No newline at end of file
+    <ds-themed-header></ds-themed-header>
+</div>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 5ce0cdb410..dc0d066a4e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,11 +1,12 @@
-<header>
-  <div class="container">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg"/>
-    </a>
-
-    <nav class="navbar navbar-light navbar-expand-md float-right px-0">
-      <ds-search-navbar></ds-search-navbar>
+<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>
@@ -16,6 +17,8 @@
           <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
         </button>
       </div>
-    </nav>
-  </div>
+    </div>
+  </nav>
+  <ds-themed-navbar></ds-themed-navbar>
+
 </header>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 0263a566cc..c85daf8516 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,21 +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 {
-    height: var(--ds-header-logo-height);
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+    @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);
 }
-
-.navbar ::ng-deep {
-  a {
-    color: var(--ds-header-icon-color);
-
-    &:hover, &focus {
-      color: var(--ds-header-icon-color-hover);
-    }
-  }
-}
-
diff --git a/src/app/header/themed-header.component.ts b/src/app/header/themed-header.component.ts
new file mode 100644
index 0000000000..51c817b63d
--- /dev/null
+++ b/src/app/header/themed-header.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HeaderComponent } from './header.component';
+
+/**
+ * Themed wrapper for HeaderComponent
+ */
+@Component({
+  selector: 'ds-themed-header',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderComponent extends ThemedComponent<HeaderComponent> {
+  protected getComponentName(): string {
+    return 'HeaderComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header/header.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header.component`);
+  }
+}
diff --git a/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
new file mode 100644
index 0000000000..74eb545b8a
--- /dev/null
+++ b/src/app/info/end-user-agreement/themed-end-user-agreement.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { EndUserAgreementComponent } from './end-user-agreement.component';
+
+/**
+ * Themed wrapper for EndUserAgreementComponent
+ */
+@Component({
+  selector: 'ds-themed-end-user-agreement',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedEndUserAgreementComponent extends ThemedComponent<EndUserAgreementComponent> {
+
+  protected getComponentName(): string {
+    return 'EndUserAgreementComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/info/end-user-agreement/end-user-agreement.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./end-user-agreement.component`);
+  }
+
+}
diff --git a/src/app/info/info-routing.module.ts b/src/app/info/info-routing.module.ts
index 799572f9b9..f76fb47ff0 100644
--- a/src/app/info/info-routing.module.ts
+++ b/src/app/info/info-routing.module.ts
@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { EndUserAgreementComponent } from './end-user-agreement/end-user-agreement.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { PrivacyComponent } from './privacy/privacy.component';
 import { PRIVACY_PATH, END_USER_AGREEMENT_PATH } from './info-routing-paths';
+import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
+import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: END_USER_AGREEMENT_PATH,
-        component: EndUserAgreementComponent,
+        component: ThemedEndUserAgreementComponent,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         data: { title: 'info.end-user-agreement.title', breadcrumbKey: 'info.end-user-agreement' }
       }
@@ -18,7 +18,7 @@ import { PRIVACY_PATH, END_USER_AGREEMENT_PATH } from './info-routing-paths';
     RouterModule.forChild([
       {
         path: PRIVACY_PATH,
-        component: PrivacyComponent,
+        component: ThemedPrivacyComponent,
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         data: { title: 'info.privacy.title', breadcrumbKey: 'info.privacy' }
       }
diff --git a/src/app/info/info.module.ts b/src/app/info/info.module.ts
index ae8ef89b27..84ba5a62db 100644
--- a/src/app/info/info.module.ts
+++ b/src/app/info/info.module.ts
@@ -6,6 +6,17 @@ import { InfoRoutingModule } from './info-routing.module';
 import { EndUserAgreementContentComponent } from './end-user-agreement/end-user-agreement-content/end-user-agreement-content.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { PrivacyContentComponent } from './privacy/privacy-content/privacy-content.component';
+import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
+import { ThemedPrivacyComponent } from './privacy/themed-privacy.component';
+
+const DECLARATIONS = [
+  EndUserAgreementComponent,
+  ThemedEndUserAgreementComponent,
+  EndUserAgreementContentComponent,
+  PrivacyComponent,
+  PrivacyContentComponent,
+  ThemedPrivacyComponent
+];
 
 @NgModule({
   imports: [
@@ -14,10 +25,10 @@ import { PrivacyContentComponent } from './privacy/privacy-content/privacy-conte
     InfoRoutingModule
   ],
   declarations: [
-    EndUserAgreementComponent,
-    EndUserAgreementContentComponent,
-    PrivacyComponent,
-    PrivacyContentComponent
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS
   ]
 })
 export class InfoModule {
diff --git a/src/app/info/privacy/themed-privacy.component.ts b/src/app/info/privacy/themed-privacy.component.ts
new file mode 100644
index 0000000000..7f2ee80ffc
--- /dev/null
+++ b/src/app/info/privacy/themed-privacy.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { PrivacyComponent } from './privacy.component';
+
+/**
+ * Themed wrapper for PrivacyComponent
+ */
+@Component({
+  selector: 'ds-themed-privacy',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedPrivacyComponent extends ThemedComponent<PrivacyComponent> {
+  protected getComponentName(): string {
+    return 'PrivacyComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/info/privacy/privacy.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./privacy.component`);
+  }
+
+}
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 a7cf7c1856..a1c02bfa31 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"
+<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center"
     (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 00461995bc..db25f58089 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">
+<li class="nav-item h-100 d-flex flex-column justify-content-center">
   <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 2356077e43..50e526b78b 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,17 +1,24 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}"
      [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     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>
+     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/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index cca6284b72..be6e8ac55e 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,6 +1,8 @@
 nav.navbar {
-    border-bottom: 1px var(--bs-gray-400) solid;
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
+    color: var(--ds-header-icon-color);
 }
 
 /** Mobile menu styling **/
@@ -29,7 +31,27 @@ 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 {
+  ::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/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 1a306ea932..ae5fb262ae 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -41,6 +41,17 @@ export class NavbarComponent extends MenuComponent {
    */
   createMenu() {
     const menuList: any[] = [
+      /* Communities & Collections tree */
+      {
+        id: `browse_global_communities_and_collections`,
+        active: false,
+        visible: true,
+        model: {
+          type: MenuItemType.LINK,
+          text: `menu.section.browse_global_communities_and_collections`,
+          link: `/community-list`
+        } as LinkMenuItemModel
+      },
       /* News */
       {
         id: 'browse_global',
@@ -52,18 +63,6 @@ export class NavbarComponent extends MenuComponent {
         } as TextMenuItemModel,
         index: 0
       },
-      /* Communities & Collections tree */
-      {
-        id: `browse_global_communities_and_collections`,
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: `menu.section.browse_global_communities_and_collections`,
-          link: `/community-list`
-        } as LinkMenuItemModel
-      },
     ];
     // Read the different Browse-By types from config and add them to the browse menu
     const types = environment.browseBy.types;
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
index 5e1e11d10f..6591cd3453 100644
--- a/src/app/navbar/navbar.module.ts
+++ b/src/app/navbar/navbar.module.ts
@@ -9,7 +9,9 @@ import { NavbarSectionComponent } from './navbar-section/navbar-section.componen
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
 import { NavbarComponent } from './navbar.component';
 import { MenuModule } from '../shared/menu/menu.module';
+import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
+import { ThemedNavbarComponent } from './themed-navbar.component';
 
 const effects = [
   NavbarEffects
@@ -24,6 +26,7 @@ const ENTRY_COMPONENTS = [
 @NgModule({
   imports: [
     CommonModule,
+    SharedModule,
     MenuModule,
     FormsModule,
     EffectsModule.forFeature(effects),
@@ -31,6 +34,7 @@ const ENTRY_COMPONENTS = [
   ],
   declarations: [
     NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ],
@@ -42,7 +46,7 @@ const ENTRY_COMPONENTS = [
     ExpandableNavbarSectionComponent
   ],
   exports: [
-    NavbarComponent,
+    ThemedNavbarComponent,
     NavbarSectionComponent,
     ExpandableNavbarSectionComponent
   ]
diff --git a/src/app/navbar/themed-navbar.component.ts b/src/app/navbar/themed-navbar.component.ts
new file mode 100644
index 0000000000..43efdc181e
--- /dev/null
+++ b/src/app/navbar/themed-navbar.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { NavbarComponent } from './navbar.component';
+
+/**
+ * Themed wrapper for NavbarComponent
+ */
+@Component({
+  selector: 'ds-themed-navbar',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedNavbarComponent  extends ThemedComponent<NavbarComponent> {
+  protected getComponentName(): string {
+    return 'NavbarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/navbar/navbar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./navbar.component`);
+  }
+}
diff --git a/src/app/pagenotfound/themed-pagenotfound.component.ts b/src/app/pagenotfound/themed-pagenotfound.component.ts
new file mode 100644
index 0000000000..e6ef9eb700
--- /dev/null
+++ b/src/app/pagenotfound/themed-pagenotfound.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { PageNotFoundComponent } from './pagenotfound.component';
+
+/**
+ * Themed wrapper for PageNotFoundComponent
+ */
+@Component({
+  selector: 'ds-themed-search-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedPageNotFoundComponent extends ThemedComponent<PageNotFoundComponent> {
+
+  protected getComponentName(): string {
+    return 'PageNotFoundComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/pagenotfound/pagenotfound.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./pagenotfound.component`);
+  }
+}
diff --git a/src/app/process-page/process-breadcrumbs.service.ts b/src/app/process-page/process-breadcrumbs.service.ts
index ffd289e04e..26b0787a53 100644
--- a/src/app/process-page/process-breadcrumbs.service.ts
+++ b/src/app/process-page/process-breadcrumbs.service.ts
@@ -1,6 +1,6 @@
 import { Observable, of as observableOf } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { BreadcrumbsProviderService } from '../core/breadcrumbs/breadcrumbsProviderService';
 import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
 import { Process } from './processes/process.model';
 
@@ -8,7 +8,7 @@ import { Process } from './processes/process.model';
  * Service to calculate process breadcrumbs for a single part of the route
  */
 @Injectable()
-export class ProcessBreadcrumbsService implements BreadcrumbsService<Process> {
+export class ProcessBreadcrumbsService implements BreadcrumbsProviderService<Process> {
 
   /**
    * Method to calculate the breadcrumbs
diff --git a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.html b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.html
index c1c1cff0f3..b9142fa2c6 100644
--- a/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.html
+++ b/src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.html
@@ -2,5 +2,6 @@
          [formId]="'profile-page-metadata-form-id'"
          [formModel]="formModel"
          [formGroup]="formGroup"
-         [displaySubmit]="false">
+         [displaySubmit]="false"
+         [displayCancel]="false">
 </ds-form>
diff --git a/src/app/profile-page/profile-page-routing.module.ts b/src/app/profile-page/profile-page-routing.module.ts
index 4b9f2b7fff..695a78837f 100644
--- a/src/app/profile-page/profile-page-routing.module.ts
+++ b/src/app/profile-page/profile-page-routing.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
-import { ProfilePageComponent } from './profile-page.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', pathMatch: 'full', component: ProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
+      { path: '', pathMatch: 'full', component: ThemedProfilePageComponent, resolve: { breadcrumb: I18nBreadcrumbResolver }, data: { breadcrumbKey: 'profile', title: 'profile.title' } }
     ])
   ]
 })
diff --git a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.html b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.html
index ad9f768297..cdaa3ce31c 100644
--- a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.html
+++ b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.html
@@ -3,7 +3,8 @@
          [formId]="FORM_PREFIX"
          [formModel]="formModel"
          [formGroup]="formGroup"
-         [displaySubmit]="false">
+         [displaySubmit]="false"
+         [displayCancel]="false">
 </ds-form>
 <div id="notLongEnough" class="container-fluid text-danger" *ngIf="formGroup.hasError('notLongEnough')">{{FORM_PREFIX + 'error.password-length' | translate}}</div>
 <div id="notSame" class="container-fluid text-danger" *ngIf="formGroup.hasError('notSame')">{{FORM_PREFIX + 'error.matching-passwords' | translate}}</div>
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index ab8f1ce026..619e4a2411 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -17,7 +17,9 @@
         ></ds-profile-page-security-form>
       </div>
     </div>
-    <button class="btn btn-outline-primary" (click)="updateProfile()">{{'profile.form.submit' | translate}}</button>
+    <div class="col-12 text-right pr-0">
+      <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
+    </div>
 
     <ng-container *ngVar="(groupsRD$ | async)?.payload?.page as groups">
       <div *ngIf="groups">
diff --git a/src/app/profile-page/profile-page.component.scss b/src/app/profile-page/profile-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/profile-page/profile-page.component.ts b/src/app/profile-page/profile-page.component.ts
index 5b7697ed48..e9c4dec832 100644
--- a/src/app/profile-page/profile-page.component.ts
+++ b/src/app/profile-page/profile-page.component.ts
@@ -21,6 +21,7 @@ import { Operation } from 'fast-json-patch';
 
 @Component({
   selector: 'ds-profile-page',
+  styleUrls: ['./profile-page.component.scss'],
   templateUrl: './profile-page.component.html'
 })
 /**
diff --git a/src/app/profile-page/profile-page.module.ts b/src/app/profile-page/profile-page.module.ts
index 54b59c97ce..6fd0c8e4aa 100644
--- a/src/app/profile-page/profile-page.module.ts
+++ b/src/app/profile-page/profile-page.module.ts
@@ -5,6 +5,7 @@ import { ProfilePageRoutingModule } from './profile-page-routing.module';
 import { ProfilePageComponent } from './profile-page.component';
 import { ProfilePageMetadataFormComponent } from './profile-page-metadata-form/profile-page-metadata-form.component';
 import { ProfilePageSecurityFormComponent } from './profile-page-security-form/profile-page-security-form.component';
+import { ThemedProfilePageComponent } from './themed-profile-page.component';
 
 @NgModule({
   imports: [
@@ -17,6 +18,7 @@ import { ProfilePageSecurityFormComponent } from './profile-page-security-form/p
   ],
   declarations: [
     ProfilePageComponent,
+    ThemedProfilePageComponent,
     ProfilePageMetadataFormComponent,
     ProfilePageSecurityFormComponent
   ]
diff --git a/src/app/profile-page/themed-profile-page.component.ts b/src/app/profile-page/themed-profile-page.component.ts
new file mode 100644
index 0000000000..2348d416cf
--- /dev/null
+++ b/src/app/profile-page/themed-profile-page.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { ProfilePageComponent } from './profile-page.component';
+
+/**
+ * Themed wrapper for ProfilePageComponent
+ */
+@Component({
+  selector: 'ds-themed-profile-page',
+  styleUrls: [],
+  templateUrl: './../shared/theme-support/themed.component.html'
+})
+export class ThemedProfilePageComponent extends ThemedComponent<ProfilePageComponent> {
+  protected getComponentName(): string {
+    return 'ProfilePageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/profile-page/profile-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./profile-page.component`);
+  }
+}
diff --git a/src/app/register-page/create-profile/create-profile.component.scss b/src/app/register-page/create-profile/create-profile.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register-page/create-profile/create-profile.component.ts b/src/app/register-page/create-profile/create-profile.component.ts
index 5f02556248..790e1d6fc5 100644
--- a/src/app/register-page/create-profile/create-profile.component.ts
+++ b/src/app/register-page/create-profile/create-profile.component.ts
@@ -26,6 +26,7 @@ import { getFirstCompletedRemoteData } from '../../core/shared/operators';
  */
 @Component({
   selector: 'ds-create-profile',
+  styleUrls: ['./create-profile.component.scss'],
   templateUrl: './create-profile.component.html'
 })
 export class CreateProfileComponent implements OnInit {
diff --git a/src/app/register-page/create-profile/themed-create-profile.component.ts b/src/app/register-page/create-profile/themed-create-profile.component.ts
new file mode 100644
index 0000000000..cc968bfbe2
--- /dev/null
+++ b/src/app/register-page/create-profile/themed-create-profile.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { CreateProfileComponent } from './create-profile.component';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+
+/**
+ * Themed wrapper for CreateProfileComponent
+ */
+@Component({
+  selector: 'ds-themed-create-profile',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedCreateProfileComponent extends ThemedComponent<CreateProfileComponent> {
+  protected getComponentName(): string {
+    return 'CreateProfileComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/register-page/create-profile/create-profile.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./create-profile.component`);
+  }
+}
diff --git a/src/app/register-page/register-email/register-email.component.scss b/src/app/register-page/register-email/register-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register-page/register-email/register-email.component.ts b/src/app/register-page/register-email/register-email.component.ts
index ac221c109a..7b7b0f631b 100644
--- a/src/app/register-page/register-email/register-email.component.ts
+++ b/src/app/register-page/register-email/register-email.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-register-email',
+  styleUrls: ['./register-email.component.scss'],
   templateUrl: './register-email.component.html'
 })
 /**
diff --git a/src/app/register-page/register-page-routing.module.ts b/src/app/register-page/register-page-routing.module.ts
index 7954d7963a..f623643a8d 100644
--- a/src/app/register-page/register-page-routing.module.ts
+++ b/src/app/register-page/register-page-routing.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { RegisterEmailComponent } from './register-email/register-email.component';
-import { CreateProfileComponent } from './create-profile/create-profile.component';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
 import { RegistrationResolver } from '../register-email-form/registration.resolver';
 import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user-agreement-cookie.guard';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -16,7 +16,7 @@ import { EndUserAgreementCookieGuard } from '../core/end-user-agreement/end-user
       },
       {
         path: ':token',
-        component: CreateProfileComponent,
+        component: ThemedCreateProfileComponent,
         resolve: {registration: RegistrationResolver},
         canActivate: [EndUserAgreementCookieGuard]
       }
diff --git a/src/app/register-page/register-page.module.ts b/src/app/register-page/register-page.module.ts
index 34f890afe8..b13dbb6afb 100644
--- a/src/app/register-page/register-page.module.ts
+++ b/src/app/register-page/register-page.module.ts
@@ -6,6 +6,7 @@ import { RegisterEmailComponent } from './register-email/register-email.componen
 import { CreateProfileComponent } from './create-profile/create-profile.component';
 import { RegisterEmailFormModule } from '../register-email-form/register-email-form.module';
 import { ProfilePageModule } from '../profile-page/profile-page.module';
+import { ThemedCreateProfileComponent } from './create-profile/themed-create-profile.component';
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { ProfilePageModule } from '../profile-page/profile-page.module';
   ],
   declarations: [
     RegisterEmailComponent,
-    CreateProfileComponent
+    CreateProfileComponent,
+    ThemedCreateProfileComponent
   ],
   providers: []
 })
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 96439cd999..aef07d79f4 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -10,17 +10,17 @@
       [options]="notificationOptions">
     </ds-notifications-board>
     <main class="main-content">
-      <div class="container">
-        <ds-breadcrumbs></ds-breadcrumbs>
-      </div>
+      <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
 
-      <div class="container" *ngIf="isLoading">
-        <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
+      <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="isLoading">
+        <ds-loading [showMessage]="false"></ds-loading>
+      </div>
+      <div [class.d-none]="isLoading">
+        <router-outlet></router-outlet>
       </div>
-      <router-outlet></router-outlet>
     </main>
 
-    <ds-footer></ds-footer>
+    <ds-themed-footer></ds-themed-footer>
   </div>
 </div>
 <ng-template #authLoader>
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 13d792c80f..3ce1215a0c 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -4,7 +4,7 @@
       <input #searchInput [@toggleAnimation]="isExpanded" id="query" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
-      <a class="sticky-top submit-icon" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+      <a class="submit-icon" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </a>
     </form>
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index dfebd2c94d..34a9257af9 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -12,14 +12,18 @@ input[type="text"] {
 
 a.submit-icon {
   cursor: pointer;
+  position: sticky;
+  top: 0;
 }
 
-
-
-@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
   #query:focus {
     max-width: 250px !important;
     width: 40vw !important;
   }
+
+  a.submit-icon {
+    color: var(--bs-link-color);
+  }
 }
 
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index fa92939e0f..59fd1ccb01 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -12,22 +12,24 @@
     </div>
   </li>
   <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a id="loginLink" routerLink="/login" routerLinkActive="active" class="px-1">{{ 'nav.login' | translate }}<span
-      class="sr-only">(current)</span></a>
+    <a id="loginLink" routerLink="/login" routerLinkActive="active" class="px-1">
+      {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
+    </a>
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="#" id="dropdownUser" (click)="$event.preventDefault()" class="px-1" ngbDropdownToggle><i
-        class="fas fa-user-circle fa-lg fa-fw" [title]="'nav.logout' | translate"></i></a>
+      <a href="#" id="dropdownUser" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" ngbDropdownToggle>
+        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
       <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
         <ds-user-menu></ds-user-menu>
       </div>
     </div>
   </li>
   <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a id="logoutLink" routerLink="/logout" routerLinkActive="active" class="px-1"><i
-      class="fas fa-user-circle fa-lg fa-fw" [title]="'nav.logout' | translate"></i><span
-      class="sr-only">(current)</span></a>
+    <a id="logoutLink" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="px-1">
+      <i class="fas fa-user-circle fa-lg fa-fw"></i>
+      <span class="sr-only">(current)</span>
+    </a>
   </li>
 </ul>
 
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index 7b7e7af12f..11baa4b116 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -11,3 +11,11 @@
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: transparent !important;
 }
+
+.dropdown-toggle {
+  color: var(--ds-header-icon-color) !important;
+
+  &:hover, &focus {
+    color: var(--ds-header-icon-color-hover);
+  }
+}
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index 09d3cd3d60..c133324681 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -13,7 +13,7 @@
       <div class="row">
         <div class="col-12">
           <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
-            <button class="btn btn-outline-primary" id="paginationControls" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary" id="paginationControls" [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
             <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
               <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
               <button class="dropdown-item page-size-change" *ngFor="let item of paginationConfig?.pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != paginationConfig?.pageSize}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
@@ -29,8 +29,8 @@
         </li>
       </ul>
       <div>
-        <button id="nav-prev" type="button" class="btn btn-outline-secondary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><<</button>
-        <button id="nav-next" type="button" class="btn btn-outline-secondary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages">>></button>
+        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><i class="fas fa-angle-left"></i> {{'browse.previous.button' |translate}}</button>
+        <button id="nav-next" type="button" class="btn btn-outline-primary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages"><i class="fas fa-angle-right"></i> {{'browse.next.button' |translate}}</button>
       </div>
     </div>
   </div>
diff --git a/src/app/shared/chips/chips.component.html b/src/app/shared/chips/chips.component.html
index 74006c80ca..b9cad31761 100644
--- a/src/app/shared/chips/chips.component.html
+++ b/src/app/shared/chips/chips.component.html
@@ -15,7 +15,7 @@
           (dragend)="onDragEnd(i)"
           (mouseover)="showTooltip(t, i)"
           (mouseout)="t.close()">
-        <a class="flex-sm-fill text-sm-center nav-link active"
+        <a class="flex-sm-fill text-sm-center nav-link active bg-info"
            href="#"
            [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}"
            (click)="chipsSelected($event, i);">
@@ -42,7 +42,8 @@
         </a>
       </li>
     </ng-container>
-
-    <ng-content></ng-content>
+    <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
+      <ng-content ></ng-content>
+    </div>
   </ul>
 </div>
diff --git a/src/app/shared/chips/chips.component.scss b/src/app/shared/chips/chips.component.scss
index a79deb0f2f..a894448730 100644
--- a/src/app/shared/chips/chips.component.scss
+++ b/src/app/shared/chips/chips.component.scss
@@ -1,5 +1,5 @@
 .chip-selected {
-  background-color: var(--bs-info) !important;
+  background-color: var(--bs-secondary) !important;
 }
 
 .chip-label {
diff --git a/src/app/shared/chips/chips.component.ts b/src/app/shared/chips/chips.component.ts
index 9c836a6d58..1dc7641c25 100644
--- a/src/app/shared/chips/chips.component.ts
+++ b/src/app/shared/chips/chips.component.ts
@@ -8,6 +8,7 @@ import { ChipsItem } from './models/chips-item.model';
 import { UploaderService } from '../uploader/uploader.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Options } from 'sortablejs';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 
 @Component({
   selector: 'ds-chips',
@@ -25,6 +26,7 @@ export class ChipsComponent implements OnChanges {
   @Output() remove: EventEmitter<number> = new EventEmitter<number>();
   @Output() change: EventEmitter<any> = new EventEmitter<any>();
 
+  isDragging: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   options: Options;
   dragged = -1;
   tipText: string[];
@@ -73,6 +75,7 @@ export class ChipsComponent implements OnChanges {
   }
 
   onDragStart(index) {
+    this.isDragging.next(true);
     this.uploaderService.overrideDragOverPage();
     this.dragged = index;
   }
@@ -81,6 +84,7 @@ export class ChipsComponent implements OnChanges {
     this.uploaderService.allowDragOverPage();
     this.dragged = -1;
     this.chips.updateOrder();
+    this.isDragging.next(false);
   }
 
   showTooltip(tooltip: NgbTooltip, index, field?) {
diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
index 6d0a0f90be..5d7b092f74 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
@@ -11,10 +11,14 @@
           </div>
           <div class="col-4 d-inline-block">
             <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
-              <button *ngIf="!markLogoForDeletion" type="button" class="btn btn-danger" (click)="deleteLogo()">
+              <button *ngIf="!markLogoForDeletion" type="button" class="btn btn-danger"
+                      title="{{type.value + '.edit.logo.delete.title' | translate}}"
+                      (click)="deleteLogo()">
                 <i class="fas fa-trash" aria-hidden="true"></i>
               </button>
-              <button *ngIf="markLogoForDeletion" type="button" class="btn btn-warning" (click)="undoDeleteLogo()">
+              <button *ngIf="markLogoForDeletion" type="button" class="btn btn-warning"
+                      title="{{type.value + '.edit.logo.delete-undo.title' | translate}}"
+                      (click)="undoDeleteLogo()">
                 <i class="fas fa-undo" aria-hidden="true"></i>
               </button>
             </div>
@@ -35,4 +39,10 @@
 </div>
 <ds-form *ngIf="formModel"
          [formId]="'comcol-form-id'"
-         [formModel]="formModel" (submitForm)="onSubmit()" (cancel)="onCancel()"></ds-form>
+         [formModel]="formModel"
+         [displayCancel]="false"
+         (submitForm)="onSubmit()">
+  <button before (click)="back.emit()" class="btn btn-outline-secondary">
+    <i class="fas fa-arrow-left"></i> {{ type.value + '.edit.return' | translate }}
+  </button>
+</ds-form>
diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts
index 4ee2c1c1b1..c7c6e2e5e7 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.spec.ts
@@ -153,13 +153,6 @@ describe('ComColFormComponent', () => {
       });
     });
 
-    describe('onCancel', () => {
-      it('should call the back method on the Location service', () => {
-        comp.onCancel();
-        expect(locationStub.back).toHaveBeenCalled();
-      });
-    });
-
     describe('onCompleteItem', () => {
       beforeEach(() => {
         spyOn(comp.finish, 'emit');
diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
index c60879f84d..ef7a5e55e8 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts
@@ -1,4 +1,3 @@
-import { Location } from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -99,6 +98,11 @@ export class ComColFormComponent<T extends Collection | Community> implements On
     operations: Operation[],
   }> = new EventEmitter();
 
+  /**
+   * Event emitted on back
+   */
+  @Output() back: EventEmitter<any> = new EventEmitter();
+
   /**
    * Fires an event when the logo has finished uploading (with or without errors) or was removed
    */
@@ -126,8 +130,7 @@ export class ComColFormComponent<T extends Collection | Community> implements On
    */
   protected dsoService: ComColDataService<Community | Collection>;
 
-  public constructor(protected location: Location,
-                     protected formService: DynamicFormService,
+  public constructor(protected formService: DynamicFormService,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
                      protected authService: AuthService,
@@ -300,13 +303,6 @@ export class ComColFormComponent<T extends Collection | Community> implements On
     this.finish.emit();
   }
 
-  /**
-   * Cancel the form and return to the previous page
-   */
-  onCancel() {
-    this.location.back();
-  }
-
   /**
    * Unsubscribe from open subscriptions
    */
diff --git a/src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts b/src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts
index 92c0c47728..b1be5ae9be 100644
--- a/src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts
+++ b/src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts
@@ -103,6 +103,13 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
       });
   }
 
+  /**
+   * Navigate to home page
+   */
+  navigateToHome() {
+    this.router.navigate(['/home']);
+  }
+
   /**
    * Navigate to the page of the newly created object
    */
diff --git a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
index 9bfb12a381..b0a319b4ff 100644
--- a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
+++ b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
@@ -3,13 +3,16 @@
   <div class="card-body d-flex flex-column"
        *ngVar="group$ | async as group">
 
-    <div class="d-flex flex-md-row flex-column">
+    <h5 class="w-100">
+      {{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.name' | translate}}
+    </h5>
 
-      <h5 class="w-100 ">
-        {{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.name' | translate}}
-      </h5>
+    <div class="mt-2 mb-2">
+      <ds-alert [type]="'alert-info'" >{{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.description' | translate}}</ds-alert>
+    </div>
 
-      <div class="w-100">
+    <div class="d-flex flex-md-row justify-content-between flex-column">
+      <div class="w-100 d-flex align-items-center">
         <ds-loading *ngIf="!(groupRD$ | async)"></ds-loading>
         <div *ngIf="hasNoGroup$ | async">
           {{'comcol-role.edit.no-group' | translate}}
@@ -23,29 +26,26 @@
         </a>
       </div>
 
-      <div class="ml-md-auto pl-md-2 ml-0 pl-0 pt-2">
-        <div *ngIf="hasNoGroup$ | async"
-             class="btn btn-outline-dark create"
+      <div class="flex-shrink-0">
+        <button *ngIf="hasNoGroup$ | async"
+             class="btn btn-primary create"
              (click)="create()">
-          {{'comcol-role.edit.create' | translate}}
-        </div>
-        <div *ngIf="hasAnonymousGroup$ | async"
-             class="btn btn-outline-dark restrict"
+          <i class="fas fa-plus" aria-hidden="true"></i> {{'comcol-role.edit.create' | translate}}
+        </button>
+        <button *ngIf="hasAnonymousGroup$ | async"
+             class="btn btn-primary restrict"
              (click)="create()">
           {{'comcol-role.edit.restrict' | translate}}
-        </div>
-        <div *ngIf="hasCustomGroup$ | async"
-             class="btn btn-outline-dark delete"
+        </button>
+        <button *ngIf="hasCustomGroup$ | async"
+             class="btn btn-danger delete"
              (click)="delete()">
-          {{'comcol-role.edit.delete' | translate}}
-        </div>
+          <i class="fas fa-trash" aria-hidden="true"></i> {{'comcol-role.edit.delete' | translate}}
+        </button>
       </div>
 
     </div>
 
-    <div class="mt-2">
-      {{'comcol-role.edit.' + (comcolRole$ | async)?.name + '.description' | translate}}
-    </div>
 
   </div>
 
diff --git a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts
index eb7d9e637f..cc5b64b9b5 100644
--- a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts
+++ b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.spec.ts
@@ -9,6 +9,7 @@ import { RequestService } from '../../../../core/data/request.service';
 import { of as observableOf } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
 import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../../../remote-data.utils';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ComcolRoleComponent', () => {
 
@@ -34,6 +35,7 @@ describe('ComcolRoleComponent', () => {
         SharedModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot(),
+        NoopAnimationsModule
       ],
       providers: [
         { provide: GroupDataService, useValue: groupService },
diff --git a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts
index 7ec422e69d..4eb364a3cc 100644
--- a/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts
+++ b/src/app/shared/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.ts
@@ -9,7 +9,7 @@ import { getAllCompletedRemoteData, getFirstCompletedRemoteData } from '../../..
 import { RequestService } from '../../../../core/data/request.service';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { HALLink } from '../../../../core/shared/hal-link.model';
-import { getGroupEditRoute } from '../../../../+admin/admin-access-control/admin-access-control-routing-paths';
+import { getGroupEditRoute } from '../../../../access-control/access-control-routing-paths';
 import { hasNoValue, hasValue } from '../../../empty.util';
 import { NoContent } from '../../../../core/shared/NoContent.model';
 
@@ -96,6 +96,7 @@ export class ComcolRoleComponent implements OnInit {
     this.groupService.createComcolGroup(this.dso, this.comcolRole.name, this.groupLink).pipe(
       getFirstCompletedRemoteData()
     ).subscribe((rd: RemoteData<Group>) => {
+
       if (rd.hasSucceeded) {
         this.groupService.clearGroupsRequests();
         this.requestService.setStaleByHrefSubstring(this.comcolRole.href);
diff --git a/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
index ad270aab80..819d080f89 100644
--- a/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
+++ b/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -1,7 +1,14 @@
 <div class="container">
   <div class="row">
     <div class="col-12">
-      <h2 class="border-bottom">{{ type + '.edit.head' | translate }}</h2>
+      <div class="d-flex justify-content-between border-bottom">
+        <h2>{{ type + '.edit.head' | translate }}</h2>
+        <div>
+          <a class="btn btn-danger"
+             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'">
+            <i class="fas fa-trash"></i> {{type + '.edit.delete' | translate}}</a>
+        </div>
+      </div>
       <div class="pt-2">
         <ul class="nav nav-tabs justify-content-start mb-2">
           <li *ngFor="let page of pages" class="nav-item">
@@ -16,8 +23,10 @@
           <div class="mb-4">
             <router-outlet></router-outlet>
           </div>
-          <div class="col-12">
-            <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">{{ type + '.edit.return' | translate }}</a>
+          <div class="col-12 text-right">
+            <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
+              <i class="fas fa-arrow-left"></i> {{ type + '.edit.return' | translate }}
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts b/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts
index 2fa05fa28b..793065096f 100644
--- a/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts
+++ b/src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts
@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+
 import { Observable } from 'rxjs';
+import { first, map } from 'rxjs/operators';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { RemoteData } from '../../../core/data/remote-data';
 import { isNotEmpty } from '../../empty.util';
-import { first, map } from 'rxjs/operators';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 
 /**
@@ -43,14 +45,11 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
     protected router: Router,
     protected route: ActivatedRoute
   ) {
-    this.router.events.subscribe(() => {
-      this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
-      this.hideReturnButton = this.route.routeConfig.children
-        .find((child: any) => child.path === this.currentPage).data.hideReturnButton;
-    });
+    this.router.events.subscribe(() => this.initPageParamsByRoute());
   }
 
   ngOnInit(): void {
+    this.initPageParamsByRoute();
     this.pages = this.route.routeConfig.children
       .map((child: any) => child.path)
       .filter((path: string) => isNotEmpty(path)); // ignore reroutes
@@ -65,4 +64,13 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
   getPageUrl(dso: TDomain): string {
     return this.router.url;
   }
+
+  /**
+   * Set page params depending on the route
+   */
+  initPageParamsByRoute() {
+    this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
+    this.hideReturnButton = this.route.routeConfig.children
+      .find((child: any) => child.path === this.currentPage).data.hideReturnButton;
+  }
 }
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.html b/src/app/shared/confirmation-modal/confirmation-modal.component.html
index bb67213ed3..82c70b662b 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.html
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.html
@@ -6,11 +6,13 @@
   </div>
   <div class="modal-body">
     <p>{{ infoLabel | translate:{dsoName: dso?.name} }}</p>
-    <button type="button" class="cancel btn btn-secondary" (click)="cancelPressed()" aria-label="Cancel">
-      {{ cancelLabel | translate:{dsoName: dso?.name} }}
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="cancel btn btn-outline-secondary" (click)="cancelPressed()" aria-label="Cancel">
+      <i class="fas fa-times"></i> {{ cancelLabel | translate:{dsoName: dso?.name} }}
     </button>
-    <button type="button" class="confirm btn btn-primary" (click)="confirmPressed()" aria-label="Confirm" ngbAutofocus>
-      {{ confirmLabel | translate:{dsoName: dso?.name} }}
+    <button type="button" class="confirm btn btn-{{brandColor}}" (click)="confirmPressed()" aria-label="Confirm" ngbAutofocus>
+      <i *ngIf="confirmIcon" class="{{confirmIcon}}"></i> {{ confirmLabel | translate:{dsoName: dso?.name} }}
     </button>
   </div>
 </div>
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.ts b/src/app/shared/confirmation-modal/confirmation-modal.component.ts
index c4e185a511..c18025427a 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.ts
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.ts
@@ -12,6 +12,12 @@ export class ConfirmationModalComponent {
   @Input() infoLabel: string;
   @Input() cancelLabel: string;
   @Input() confirmLabel: string;
+  @Input() confirmIcon: string;
+  /**
+   * The brand color of the confirm button
+   */
+  @Input() brandColor = 'primary';
+
   @Input() dso: DSpaceObject;
 
   /**
diff --git a/src/app/shared/dso-page/dso-page-edit-button/dso-page-edit-button.component.html b/src/app/shared/dso-page/dso-page-edit-button/dso-page-edit-button.component.html
index 36661c895a..d680c140d8 100644
--- a/src/app/shared/dso-page/dso-page-edit-button/dso-page-edit-button.component.html
+++ b/src/app/shared/dso-page/dso-page-edit-button/dso-page-edit-button.component.html
@@ -1,6 +1,7 @@
 <a *ngIf="isAuthorized$ | async"
-   [routerLink]="[pageRoute, 'edit']"
-   class="edit-button btn btn-dark text-light btn-sm"
-   [ngbTooltip]="tooltipMsg | translate">
+   [routerLink]="[pageRoute, 'edit', 'metadata']"
+   class="edit-button btn btn-dark btn-sm"
+   [ngbTooltip]="tooltipMsg | translate"
+   role="button" [title]="tooltipMsg |translate" [attr.aria-label]="tooltipMsg |translate">
   <i class="fas fa-pencil-alt fa-fw"></i>
 </a>
diff --git a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
index 4b315617ac..24aa1704c6 100644
--- a/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.ts
@@ -53,6 +53,7 @@ export class ExportMetadataSelectorComponent extends DSOSelectorModalWrapperComp
       modalRef.componentInstance.infoLabel = 'confirmation-modal.export-metadata.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.export-metadata.cancel';
       modalRef.componentInstance.confirmLabel = 'confirmation-modal.export-metadata.confirm';
+      modalRef.componentInstance.confirmIcon = 'fas fa-file-export';
       const resp$ =  modalRef.componentInstance.response.pipe(switchMap((confirm: boolean) => {
         if (confirm) {
           const startScriptSucceeded$ = this.startScriptNotifyAndRedirect(dso, dso.handle);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 7473f894fa..bfa9c214e9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -11,12 +11,15 @@
                       'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
         <div [ngClass]="getClass('grid', 'control')">
             <ng-container #componentViewContainer></ng-container>
-            <small *ngIf="hasHint && (model.repeatable === false || context?.index === 0) && (!showErrorMessages || errorMessages.length === 0)"
-                   class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+          <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+                 class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+          <!-- In case of repeatable fields show empty space for all elements except the first -->
+          <div *ngIf="context?.index !== null
+              && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
 
-            <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-                <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
-            </div>
+          <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+          </div>
 
         </div>
         <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
@@ -32,12 +35,12 @@
                 <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
             </select>
         </div>
-        <div *ngIf="isRelationship" class="col-auto text-center" [class.invisible]="context?.index > 0">
+        <div *ngIf="isRelationship && !isVirtual()" class="col-auto text-center">
             <button class="btn btn-secondary"
                     type="button"
                     ngbTooltip="{{'form.lookup-help' | translate}}"
                     placement="top"
-                    (click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
+                    (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
             </button>
         </div>
     </div>
@@ -65,6 +68,9 @@
                 [relationshipOptions]="model.relationship"
         >
         </ds-existing-relation-list-element>
+        <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+             class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+        <div class="clearfix w-100 mb-2"></div>
     </ng-container>
     <ng-content></ng-content>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
index 014c25e189..fd403561e9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -37,7 +37,6 @@ import {
   DynamicFormControl,
   DynamicFormControlContainerComponent,
   DynamicFormControlEvent,
-  DynamicFormControlEventType,
   DynamicFormControlModel,
   DynamicFormLayout,
   DynamicFormLayoutService,
@@ -91,10 +90,10 @@ import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-di
 import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
 import {
   getAllSucceededRemoteData,
+  getFirstSucceededRemoteData,
   getFirstSucceededRemoteDataPayload,
   getPaginatedListPayload,
-  getRemoteDataPayload,
-  getFirstSucceededRemoteData
+  getRemoteDataPayload
 } from '../../../../core/shared/operators';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { Item } from '../../../../core/shared/item.model';
@@ -374,6 +373,15 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     }
   }
 
+  hasRelationship() {
+    return isNotEmpty(this.model) && this.model.hasOwnProperty('relationship') && isNotEmpty(this.model.relationship);
+  }
+
+  isVirtual() {
+    const value: FormFieldMetadataValueObject = this.model.metadataValue;
+    return isNotEmpty(value) && value.isVirtual;
+  }
+
   public hasResultsSelected(): Observable<boolean> {
     return this.model.value.pipe(map((list: SearchResult<DSpaceObject>[]) => isNotEmpty(list)));
   }
@@ -385,6 +393,11 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
       size: 'lg'
     });
+
+    if (hasValue(this.model.value)) {
+      this.submissionService.dispatchSave(this.model.submissionId);
+    }
+
     const modalComp = this.modalRef.componentInstance;
 
     if (hasValue(this.model.value) && !this.model.readOnly) {
@@ -395,18 +408,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
       }
     }
 
-    if (hasValue(this.model.value)) {
-      this.model.value = '';
-      this.onChange({
-        $event: { previousIndex: 0 },
-        context: { index: 0 },
-        control: this.control,
-        model: this.model,
-        type: DynamicFormControlEventType.Change
-      });
-    }
-    this.submissionService.dispatchSave(this.model.submissionId);
-
     modalComp.repeatable = this.model.repeatable;
     modalComp.listId = this.listId;
     modalComp.relationshipOptions = this.model.relationship;
@@ -437,6 +438,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
       .forEach((sub) => sub.unsubscribe());
   }
 
+  get hasHint(): boolean {
+    return isNotEmpty(this.model.hint) && this.model.hint !== '&nbsp;';
+  }
+
   /**
    *  Initialize this.item$ based on this.model.submissionId
    */
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
index 57ab7d66d8..07ea131a00 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -8,6 +8,7 @@
         </ng-container>
     </span>
     <button type="button" class="btn btn-secondary"
+            title="{{'form.remove' | translate}}"
             (click)="removeSelection()">
         <i class="fas fa-trash" aria-hidden="true"></i>
     </button>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts
index c606145c03..3a5623cfdd 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts
@@ -14,6 +14,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils
 import { RemoveRelationshipAction } from '../relation-lookup-modal/relationship.actions';
 import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
 import { of as observableOf } from 'rxjs';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../testing/translate-loader.mock';
 
 describe('ExistingMetadataListElementComponent', () => {
   let component: ExistingMetadataListElementComponent;
@@ -65,6 +67,14 @@ describe('ExistingMetadataListElementComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
       declarations: [ExistingMetadataListElementComponent],
       providers: [
         { provide: SelectableListService, useValue: selectionService },
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index 7cd153ef5c..fe0c65ea73 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -2,44 +2,42 @@
     <div [id]="id"
          [formArrayName]="model.id"
          [ngClass]="getClass('element', 'control')">
-        <div role="group"
-             formGroupName="0" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
-            <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model.groups[0]"></ng-container>
-            <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: 0}"></ng-container>
-            <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
-        </div>
-        <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
-            <div *ngFor="let groupModel of model.groups; let idx = index"
-                 [ngClass]="{'pt-2 pb-2': idx > 0}" cdkDrag cdkDragHandle>
-                <div [formGroupName]="idx"
-                     [class]="getClass('element', 'group') + ' ' + getClass('grid', 'group')"
-                     [ngClass]="{'d-flex align-items-center': idx > 0}"
-                >
-                <ng-container *ngIf="idx > 0">
-                    <i class="drag-icon fas fa-grip-vertical fa-fw"></i>
-                    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
-                    <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
-                    <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
-                </ng-container>
-                </div>
-            </div>
+
+      <!-- Draggable Container -->
+      <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
+        <!-- Draggable Items -->
+        <div *ngFor="let groupModel of model.groups; let idx = index"
+             role="group"
+             [formGroupName]="idx"
+             [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
+             cdkDrag
+             cdkDragHandle
+             [cdkDragDisabled]="dragDisabled"
+             [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
+          <!-- Item content -->
+          <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="dragDisabled"></i>
+          <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
+          <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
+                                             [bindId]="false"
+                                             [formGroup]="group"
+                                             [context]="groupModel"
+                                             [group]="control.get([idx])"
+                                             [hidden]="_model.hidden"
+                                             [layout]="formLayout"
+                                             [model]="_model"
+                                             [templates]="templates"
+                                             [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
+                                             (dfBlur)="onBlur($event)"
+                                             (dfChange)="onChange($event)"
+                                             (dfFocus)="onFocus($event)"
+                                             (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
+
+          <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
         </div>
+      </div>
+
+
+
     </div>
+
 </ng-container>
-
-
-<ng-template #controlContainer let-idx>
-    <ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
-                                       [bindId]="false"
-                                       [context]="model.groups[idx]"
-                                       [group]="control.get([idx])"
-                                       [hidden]="_model.hidden"
-                                       [layout]="formLayout"
-                                       [model]="_model"
-                                       [templates]="templates"
-                                       [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
-                                       (dfBlur)="update($event, idx)"
-                                       (dfChange)="update($event, idx)"
-                                       (dfFocus)="onFocus($event)"
-                                       (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
-</ng-template>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
index 8fb13f9c55..634a197123 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
@@ -5,48 +5,41 @@
 }
 
 .cdk-drag {
-    margin-left: calc(-2 * var(--bs-spacer));
-    margin-right: calc(-0.5 * var(--bs-spacer));
-    padding-right: calc(0.5 * var(--bs-spacer));
-    .drag-icon {
-        visibility: hidden;
-        width: calc(2 * var(--bs-spacer));
-        color: var(--bs-gray-600);
-        margin: var(--bs-btn-padding-y) 0;
-        line-height: var(--bs-btn-line-height);
-        text-indent: calc(0.5 * var(--bs-spacer))
-    }
+  margin-left: calc(-2.3 * var(--bs-spacer));
+  margin-right: calc(-0.5 * var(--bs-spacer));
+  padding-right: calc(0.5 * var(--bs-spacer));
+  .drag-icon {
+    visibility: hidden;
+    width: calc(2 * var(--bs-spacer));
+    color: var(--bs-gray-600);
+    margin: var(--bs-btn-padding-y) 0;
+    line-height: var(--bs-btn-line-height);
+    text-indent: calc(0.5 * var(--bs-spacer))
+  }
 
-    &:hover, &:focus {
-        cursor: grab;
-        .drag-icon {
-            visibility: visible;
-        }
+  &:hover, &:focus {
+    cursor: grab;
+    .drag-icon {
+      visibility: visible;
     }
+  }
 
 }
 
 .cdk-drop-list-dragging {
-    .cdk-drag {
-        cursor: grabbing;
-        .drag-icon {
-            visibility: hidden;
-        }
+  .cdk-drag {
+    cursor: grabbing;
+    .drag-icon {
+      visibility: hidden;
     }
+  }
 }
 
 .cdk-drag-preview {
-    background-color: white;
-    border-radius: var(--bs-border-radius-sm);
-    margin-left: 0;
-    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    .drag-icon {
-        visibility: visible;
-    }
+  margin: 0;
+  padding: 0;
 }
 
 .cdk-drag-placeholder {
-    opacity: 0;
+  opacity: 0;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
index 80b6e000b8..8ab38454a7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -5,15 +5,15 @@ import {
   DynamicFormArrayComponent,
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
-  DynamicFormControlEventType,
-  DynamicFormControlLayout, DynamicFormLayout,
+  DynamicFormControlLayout,
+  DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService,
   DynamicTemplateDirective
 } from '@ng-dynamic-forms/core';
 import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
-import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
 import { hasValue } from '../../../../../empty.util';
+import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
 
 @Component({
   selector: 'ds-dynamic-form-array',
@@ -25,7 +25,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   @Input() formLayout: DynamicFormLayout;
   @Input() group: FormGroup;
   @Input() layout: DynamicFormControlLayout;
-  @Input() model: DynamicRowArrayModel;
+  @Input() model: DynamicRowArrayModel;// DynamicRow?
   @Input() templates: QueryList<DynamicTemplateDirective> | undefined;
 
   /* tslint:disable:no-output-rename */
@@ -43,22 +43,25 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   }
 
   moveSelection(event: CdkDragDrop<Relationship>) {
+
+    // prevent propagating events generated releasing on the same position
+    if (event.previousIndex === event.currentIndex) {
+      return;
+    }
+
     this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
-    const prevIndex = event.previousIndex - 1;
-    const index = event.currentIndex - 1;
+    const prevIndex = event.previousIndex;
+    const index = event.currentIndex;
 
     if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
-      const $event = {
-        $event: { previousIndex: prevIndex },
-        context: { index },
-        control: (this.control as any).controls[index],
-        group: this.group,
+      this.onCustomEvent({
+        previousIndex: prevIndex,
+        index,
+        arrayModel: this.model,
         model: this.model.groups[index].group[0],
-        type: DynamicFormControlEventType.Change
-      };
-
-      this.onChange($event);
-      }
+        control: (this.control as any).controls[index]
+      }, 'move');
+    }
   }
 
   update(event: any, index: number) {
@@ -68,4 +71,11 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
     this.onChange($event);
   }
+
+  /**
+   * If the drag feature is disabled for this DynamicRowArrayModel.
+   */
+  get dragDisabled(): boolean {
+    return this.model.groups.length === 1 || !this.model.isDraggable;
+  }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
index 8925d8fd87..d0b07de885 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
@@ -9,6 +9,7 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
   metadataKey: string;
   metadataFields: string[];
   hasSelectableMetadata: boolean;
+  isDraggable: boolean;
 }
 
 export class DynamicRowArrayModel extends DynamicFormArrayModel {
@@ -19,6 +20,7 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
   @serializable() metadataKey: string;
   @serializable() metadataFields: string[];
   @serializable() hasSelectableMetadata: boolean;
+  @serializable() isDraggable: boolean;
   isRowArray = true;
 
   constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
@@ -30,5 +32,6 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
     this.metadataKey = config.metadataKey;
     this.metadataFields = config.metadataFields;
     this.hasSelectableMetadata = config.hasSelectableMetadata;
+    this.isDraggable = config.isDraggable;
   }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
index f584a75611..84bc0f4ffe 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
@@ -22,6 +22,7 @@
              [formId]="formId"
              [formModel]="formModel"
              [displaySubmit]="false"
+             [displayCancel]="false"
              [emitChange]="false"
              (dfBlur)="onBlur($event)"
              (dfFocus)="onFocus($event)"></ds-form>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index c0c5c3f424..4bc85c5656 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -9,7 +9,7 @@
             [wrapperClass]="'border-bottom border-light'">
 
   <input *ngIf="!model.hasAuthority"
-         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1 chips-sort-ignore"
+         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
          type="text"
          [class.pl-3]="chips.hasItems()"
          [placeholder]="model.placeholder"
@@ -22,7 +22,7 @@
 
 
   <input *ngIf="model.hasAuthority"
-         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1 chips-sort-ignore"
+         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
          type="text"
          [(ngModel)]="currentValue"
          [attr.autoComplete]="model.autoComplete"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index 3442ddb1ba..339f6f278d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -6,7 +6,8 @@
     </button>
 </div>
 <div class="modal-body">
-    <ngb-tabset>
+    <ds-loading *ngIf="!item || !collection"></ds-loading>
+    <ngb-tabset *ngIf="item && collection">
         <ngb-tab [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : {count: (totalInternal$ | async)}">
             <ng-template ngbTabContent>
                 <ds-dynamic-lookup-relation-search-tab
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
index 88763b011c..47dd857d53 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -21,6 +21,10 @@ import { createPaginatedList } from '../../../../testing/utils.test';
 import { ExternalSourceService } from '../../../../../core/data/external-source.service';
 import { LookupRelationService } from '../../../../../core/data/lookup-relation.service';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
+import { SubmissionService } from '../../../../../submission/submission.service';
+import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
+import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
+import { Collection } from '../../../../../core/shared/collection.model';
 
 describe('DsDynamicLookupRelationModalComponent', () => {
   let component: DsDynamicLookupRelationModalComponent;
@@ -28,6 +32,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
   let item;
   let item1;
   let item2;
+  let testWSI;
   let searchResult1;
   let searchResult2;
   let listID;
@@ -41,6 +46,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
   let lookupRelationService;
   let rdbService;
   let submissionId;
+  let submissionService;
+  let submissionObjectDataService;
 
   const externalSources = [
     Object.assign(new ExternalSource(), {
@@ -56,11 +63,16 @@ describe('DsDynamicLookupRelationModalComponent', () => {
   ];
   const totalLocal = 10;
   const totalExternal = 8;
+  const collection: Collection = new Collection();
+
 
   function init() {
     item = Object.assign(new Item(), { uuid: '7680ca97-e2bd-4398-bfa7-139a8673dc42', metadata: {} });
     item1 = Object.assign(new Item(), { uuid: 'e1c51c69-896d-42dc-8221-1d5f2ad5516e' });
     item2 = Object.assign(new Item(), { uuid: 'c8279647-1acc-41ae-b036-951d5f65649b' });
+    testWSI = new WorkspaceItem();
+    testWSI.item = createSuccessfulRemoteDataObject$(item);
+    testWSI.collection = createSuccessfulRemoteDataObject$(collection);
     searchResult1 = Object.assign(new ItemSearchResult(), { indexableObject: item1 });
     searchResult2 = Object.assign(new ItemSearchResult(), { indexableObject: item2 });
     listID = '6b0c8221-fcb4-47a8-b483-ca32363fffb3';
@@ -87,6 +99,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
     rdbService = jasmine.createSpyObj('rdbService', {
       aggregate: createSuccessfulRemoteDataObject$(externalSources)
     });
+    submissionService = jasmine.createSpyObj('SubmissionService', {
+      dispatchSave: jasmine.createSpy('dispatchSave')
+    });
+    submissionObjectDataService = jasmine.createSpyObj('SubmissionObjectDataService', {
+      findById: createSuccessfulRemoteDataObject$(testWSI)
+    });
     submissionId = '1234';
   }
 
@@ -111,6 +129,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
         },
         { provide: RelationshipTypeService, useValue: {} },
         { provide: RemoteDataBuildService, useValue: rdbService },
+        { provide: SubmissionService, useValue: submissionService },
+        { provide: SubmissionObjectDataService, useValue: submissionObjectDataService },
         {
           provide: Store, useValue: {
             // tslint:disable-next-line:no-empty
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
index 83b756157c..4ed972b2fa 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
@@ -11,7 +11,11 @@ import { ListableObject } from '../../../../object-collection/shared/listable-ob
 import { RelationshipOptions } from '../../models/relationship-options.model';
 import { SearchResult } from '../../../../search/search-result.model';
 import { Item } from '../../../../../core/shared/item.model';
-import { getAllSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
+import {
+  getAllSucceededRemoteData,
+  getAllSucceededRemoteDataPayload,
+  getRemoteDataPayload
+} from '../../../../../core/shared/operators';
 import { AddRelationshipAction, RemoveRelationshipAction, UpdateRelationshipNameVariantAction } from './relationship.actions';
 import { RelationshipService } from '../../../../../core/data/relationship.service';
 import { RelationshipTypeService } from '../../../../../core/data/relationship-type.service';
@@ -23,6 +27,12 @@ import { ExternalSource } from '../../../../../core/shared/external-source.model
 import { ExternalSourceService } from '../../../../../core/data/external-source.service';
 import { Router } from '@angular/router';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
+import { followLink } from '../../../../utils/follow-link-config.model';
+import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { SubmissionService } from '../../../../../submission/submission.service';
+import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
+import { RemoteData } from '../../../../../core/data/remote-data';
 
 @Component({
   selector: 'ds-dynamic-lookup-relation-modal',
@@ -112,6 +122,11 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
    */
   totalExternal$: Observable<number[]>;
 
+  /**
+   * List of subscriptions to unsubscribe from
+   */
+  private subs: Subscription[] = [];
+
   constructor(
     public modal: NgbActiveModal,
     private selectableListService: SelectableListService,
@@ -121,14 +136,17 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
     private lookupRelationService: LookupRelationService,
     private searchConfigService: SearchConfigurationService,
     private rdbService: RemoteDataBuildService,
+    private submissionService: SubmissionService,
+    private submissionObjectService: SubmissionObjectDataService,
     private zone: NgZone,
     private store: Store<AppState>,
-    private router: Router,
+    private router: Router
   ) {
 
   }
 
   ngOnInit(): void {
+    this.setItem();
     this.selection$ = this.selectableListService
       .getSelectableList(this.listId)
       .pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []));
@@ -188,6 +206,24 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
       });
   }
 
+  /**
+   *  Initialize this.item$ based on this.model.submissionId
+   */
+  private setItem() {
+    const submissionObject$ = this.submissionObjectService
+      .findById(this.submissionId, true, true, followLink('item'), followLink('collection')).pipe(
+        getAllSucceededRemoteData(),
+        getRemoteDataPayload()
+      );
+
+    const item$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
+    const collection$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.collection as Observable<RemoteData<Collection>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
+
+    this.subs.push(item$.subscribe((item) => this.item = item));
+    this.subs.push(collection$.subscribe((collection) => this.collection = collection));
+
+  }
+
   /**
    * Add a subscription updating relationships with name variants
    * @param sri The search result to track name variants for
@@ -243,5 +279,8 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
   ngOnDestroy() {
     this.router.navigate([], {});
     Object.values(this.subMap).forEach((subscription) => subscription.unsubscribe());
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
   }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
index ba83b7b98b..d55cdbffed 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
@@ -4,7 +4,10 @@
     <ds-page-size-selector></ds-page-size-selector>
   </div>
   <div class="col-8">
-    <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query" [inPlaceSearch]="true"></ds-search-form>
+    <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
+                    [inPlaceSearch]="true"
+                    [searchPlaceholder]="'submission.sections.describe.relationship-lookup.selection-tab.search-form.placeholder' | translate">
+    </ds-search-form>
     <div>
       <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.title.' + externalSource.id | translate}}</h3>
       <ng-container *ngVar="(entriesRD$ | async) as entriesRD">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.spec.ts
index 432ac44859..5e2ffd30fb 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.spec.ts
@@ -66,12 +66,12 @@ describe('RelationshipEffects', () => {
 
     leftItem = Object.assign(new Item(), {
       uuid: testUUID1,
-      metadata: { 'relationship.type': [leftTypeMD] }
+      metadata: { 'dspace.entity.type': [leftTypeMD] }
     });
 
     rightItem = Object.assign(new Item(), {
       uuid: testUUID2,
-      metadata: { 'relationship.type': [rightTypeMD] }
+      metadata: { 'dspace.entity.type': [rightTypeMD] }
     });
 
     relationshipType = Object.assign(new RelationshipType(), {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.ts
index e68152f74d..5a20ed8b51 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.ts
@@ -167,8 +167,8 @@ export class RelationshipEffects {
   }
 
   private addRelationship(item1: Item, item2: Item, relationshipType: string, submissionId: string, nameVariant?: string) {
-    const type1: string = item1.firstMetadataValue('relationship.type');
-    const type2: string = item2.firstMetadataValue('relationship.type');
+    const type1: string = item1.firstMetadataValue('dspace.entity.type');
+    const type2: string = item2.firstMetadataValue('dspace.entity.type');
     return this.relationshipTypeService.getRelationshipTypeByLabelAndTypes(relationshipType, type1, type2)
       .pipe(
         mergeMap((type: RelationshipType) => {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
index a1b1561e36..9cd856c013 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
@@ -3,7 +3,10 @@
                        [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
                        [inPlaceSearch]="true" [showViewModes]="false"></ds-search-sidebar>
     <div class="col-8">
-        <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query" [inPlaceSearch]="true"></ds-search-form>
+        <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
+                        [inPlaceSearch]="true"
+                        [searchPlaceholder]="'submission.sections.describe.relationship-lookup.search-tab.search-form.placeholder' | translate">
+        </ds-search-form>
 
         <ds-search-labels [inPlaceSearch]="true"></ds-search-labels>
 
diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts
index b81bb3285b..cea4d7df6e 100644
--- a/src/app/shared/form/builder/form-builder.service.spec.ts
+++ b/src/app/shared/form/builder/form-builder.service.spec.ts
@@ -295,6 +295,7 @@ describe('FormBuilderService test suite', () => {
           notRepeatable: false,
           relationshipConfig: undefined,
           submissionId: '1234',
+          isDraggable: true,
           groupFactory: () => {
             return [
               new DynamicInputModel({ id: 'testFormRowArrayGroupInput' })
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index a8f6fa374c..85d70f20dc 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -28,9 +28,10 @@ import { DynamicRelationGroupModel } from './ds-dynamic-form-ui/models/relation-
 import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
 import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
-import { isNgbDateStruct } from '../../date.util';
+import { dateToString, isNgbDateStruct } from '../../date.util';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/ds-dynamic-form-constants';
 import { CONCAT_GROUP_SUFFIX, DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';
 
 @Injectable()
 export class FormBuilderService extends DynamicFormService {
@@ -121,8 +122,15 @@ export class FormBuilderService extends DynamicFormService {
 
     const normalizeValue = (controlModel, controlValue, controlModelIndex) => {
       const controlLanguage = (controlModel as DsDynamicInputModel).hasLanguages ? (controlModel as DsDynamicInputModel).language : null;
+
+      if (controlModel?.metadataValue?.authority?.includes(VIRTUAL_METADATA_PREFIX)) {
+        return controlModel.metadataValue;
+      }
+
       if (isString(controlValue)) {
         return new FormFieldMetadataValueObject(controlValue, controlLanguage, null, null, controlModelIndex);
+      } else if (isNgbDateStruct(controlValue)) {
+        return new FormFieldMetadataValueObject(dateToString(controlValue));
       } else if (isObject(controlValue)) {
         const authority = (controlValue as any).authority || (controlValue as any).id || null;
         const place = controlModelIndex || (controlValue as any).place;
@@ -240,7 +248,7 @@ export class FormBuilderService extends DynamicFormService {
   }
 
   hasArrayGroupValue(model: DynamicFormControlModel): boolean {
-    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG || model.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY);
+    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
   }
 
   hasMappedGroupValue(model: DynamicFormControlModel): boolean {
@@ -310,7 +318,7 @@ export class FormBuilderService extends DynamicFormService {
     let tempModel: DynamicFormControlModel;
 
     if (this.isArrayGroup(model as DynamicFormControlModel)) {
-      return hasValue((model as any).metadataKey) ? (model as any).metadataKey : model.index.toString();
+      return model.index.toString();
     } else if (this.isModelInCustomGroup(model as DynamicFormControlModel)) {
       tempModel = (model as any).parent;
     } else {
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index 09a3f53c58..8085924422 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -58,8 +58,20 @@ export class ConcatFieldParser extends FieldParser {
     concatGroup.group = [];
     concatGroup.separator = this.separator;
 
-    const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, false, false);
-    const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, false, false);
+    const input1ModelConfig: DynamicInputModelConfig = this.initModel(
+      id + CONCAT_FIRST_INPUT_SUFFIX,
+      false,
+      true,
+      true,
+      false
+    );
+    const input2ModelConfig: DynamicInputModelConfig = this.initModel(
+      id + CONCAT_SECOND_INPUT_SUFFIX,
+      false,
+      true,
+      true,
+      false
+    );
 
     if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
       concatGroup.hint = input1ModelConfig.hint;
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index b623a98078..da304ca267 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -15,6 +15,8 @@ import { setLayout } from './parser.utils';
 import { ParserOptions } from './parser-options';
 import { RelationshipOptions } from '../models/relationship-options.model';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
+import { ParserType } from './parser-type';
+import { isNgbDateStruct } from '../../../date.util';
 
 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -37,9 +39,8 @@ export abstract class FieldParser {
 
   public parse() {
     if (((this.getInitValueCount() > 1 && !this.configData.repeatable) || (this.configData.repeatable))
-      && (this.configData.input.type !== 'list')
-      && (this.configData.input.type !== 'tag')
-      && (this.configData.input.type !== 'group')
+      && (this.configData.input.type !== ParserType.List)
+      && (this.configData.input.type !== ParserType.Tag)
     ) {
       let arrayCounter = 0;
       let fieldArrayCounter = 0;
@@ -49,6 +50,11 @@ export abstract class FieldParser {
       if (Array.isArray(this.configData.selectableMetadata) && this.configData.selectableMetadata.length === 1) {
         metadataKey = this.configData.selectableMetadata[0].metadata;
       }
+
+      let isDraggable = true;
+      if (this.configData.input.type === ParserType.Onebox && this.configData?.selectableMetadata?.length > 1) {
+        isDraggable = false;
+      }
       const config = {
         id: uniqueId() + '_array',
         label: this.configData.label,
@@ -60,6 +66,7 @@ export abstract class FieldParser {
         metadataKey,
         metadataFields: this.getAllFieldIds(),
         hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata),
+        isDraggable,
         groupFactory: () => {
           let model;
           if ((arrayCounter === 0)) {
@@ -69,19 +76,13 @@ export abstract class FieldParser {
             const fieldArrayOfValueLength = this.getInitValueCount(arrayCounter - 1);
             let fieldValue = null;
             if (fieldArrayOfValueLength > 0) {
-              if (fieldArrayCounter === 0) {
-                fieldValue = '';
-              } else {
-                fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter - 1);
-              }
-              fieldArrayCounter++;
-              if (fieldArrayCounter === fieldArrayOfValueLength + 1) {
+              fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter++);
+              if (fieldArrayCounter === fieldArrayOfValueLength) {
                 fieldArrayCounter = 0;
                 arrayCounter++;
               }
             }
             model = this.modelFactory(fieldValue, false);
-            model.id = `${model.id}_${fieldArrayCounter}`;
           }
           setLayout(model, 'element', 'host', 'col');
           if (model.hasLanguages || isNotEmpty(model.relationship)) {
@@ -130,7 +131,9 @@ export abstract class FieldParser {
         return;
       }
 
-      if (typeof fieldValue === 'object') {
+      if (isNgbDateStruct(fieldValue)) {
+        modelConfig.value = fieldValue;
+      } else if (typeof fieldValue === 'object') {
         modelConfig.metadataValue = fieldValue;
         modelConfig.language = fieldValue.language;
         modelConfig.place = fieldValue.place;
@@ -210,10 +213,9 @@ export abstract class FieldParser {
   }
 
   protected getInitArrayIndex() {
-    let fieldCount = 0;
     const fieldIds: any = this.getAllFieldIds();
     if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
-      fieldCount = this.initFormValues[fieldIds].filter((value) => hasValue(value) && hasValue(value.value)).length;
+      return this.initFormValues[fieldIds].length;
     } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
       let counter = 0;
       fieldIds.forEach((id) => {
@@ -221,9 +223,10 @@ export abstract class FieldParser {
           counter = counter + this.initFormValues[id].length;
         }
       });
-      fieldCount = counter;
+      return (counter === 0) ? 1 : counter;
+    } else {
+      return 1;
     }
-    return (fieldCount === 0) ? 1 : fieldCount + 1;
   }
 
   protected getFieldId(): string {
@@ -245,7 +248,7 @@ export abstract class FieldParser {
     }
   }
 
-  protected initModel(id?: string, label = true, setErrors = true, hint = true) {
+  protected initModel(id?: string, label = true, labelEmpty = false, setErrors = true, hint = true) {
 
     const controlModel = Object.create(null);
 
@@ -316,7 +319,7 @@ export abstract class FieldParser {
 
   protected setLabel(controlModel, label = true, labelEmpty = false) {
     if (label) {
-      controlModel.label = this.configData.label;
+      controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
     }
   }
 
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index b9ac531c68..3dafa4eebd 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -59,7 +59,7 @@ export class OneboxFieldParser extends FieldParser {
       this.setLabel(inputSelectGroup, label);
       inputSelectGroup.required = isNotEmpty(this.configData.mandatory);
 
-      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false);
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false, false);
       selectModelConfig.hint = null;
       this.setOptions(selectModelConfig);
       if (isNotEmpty(fieldValue)) {
@@ -67,7 +67,7 @@ export class OneboxFieldParser extends FieldParser {
       }
       inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
 
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false);
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
       inputModelConfig.hint = null;
       this.setValues(inputModelConfig, fieldValue);
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 97879cc025..39ccda360f 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -1,57 +1,73 @@
 <div class="container-fluid">
-    <form class="form-horizontal" [formGroup]="formGroup">
+  <form class="form-horizontal" [formGroup]="formGroup">
 
-        <ds-dynamic-form
-                [formId]="formId"
-                [formGroup]="formGroup"
-                [formModel]="formModel"
-                [formLayout]="formLayout"
-                (change)="$event.stopPropagation();"
-                (dfBlur)="onBlur($event)"
-                (dfChange)="onChange($event)"
-                (dfFocus)="onFocus($event)">
-            <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
-                <!--Array with repeatable items-->
-                <div *ngIf="context.hasSelectableMetadata && !context.notRepeatable && index < 1"
-                     class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-                    <div class="btn-group" role="group" aria-label="Add and remove button">
-                        <button type="button" class="btn btn-secondary"
-                                [disabled]="isItemReadOnly(context, index)"
-                                (click)="insertItem($event, group.context, group.index)">
-                            <span aria-label="Add">{{'form.add' | translate}}</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!--Array with non repeatable items - Only delete button-->
-                <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || index > 0 && !(group.group[0]?.value?.isVirtual || group.group[0]?.metadataValue?.isVirtual)"
-                     class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-                    <div class="btn-group" role="group" aria-label="Remove button">
-                        <button type="button" class="btn btn-secondary"
-                                (click)="removeItem($event, context, index)"
-                                [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
-                            <i class="fas fa-trash" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </ng-template>
-
-        </ds-dynamic-form>
-
-        <ng-content></ng-content>
-
-    <div *ngIf="displaySubmit">
-            <hr>
-            <div class="form-group row">
-                <div class="col text-right">
-                    <button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
-                    <button type="submit" class="btn btn-primary" (click)="onSubmit()"
-                            [disabled]="!(isValid() | async)">{{submitLabel | translate}}
-                    </button>
-                </div>
-            </div>
+    <ds-dynamic-form
+      [formId]="formId"
+      [formGroup]="formGroup"
+      [formModel]="formModel"
+      [formLayout]="formLayout"
+      (change)="$event.stopPropagation();"
+      (dfBlur)="onBlur($event)"
+      (dfChange)="onChange($event)"
+      (dfFocus)="onFocus($event)"
+      (ngbEvent)="onCustomEvent($event)">
+      <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
+        <!--Array with repeatable items-->
+        <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index)"
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+            <button type="button" class="btn btn-secondary"
+                    title="{{'form.remove' | translate}}"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <span attr.aria-label="{{'form.remove' | translate}}"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+        </div>
+        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1)" class="clearfix pl-4 w-100">
+          <div class="btn-group" role="group" aria-label="remove button">
+            <button type="button" class="ds-form-add-more btn btn-link"
+                    title="{{'form.add' | translate}}"
+                    [disabled]="isItemReadOnly(context, index)"
+                    (click)="insertItem($event, group.context, group.context.groups.length)">
+              <span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+            </button>
+          </div>
         </div>
 
-    </form>
+        <!--Array with non repeatable items - Only discard button-->
+        <div *ngIf="context.notRepeatable && context.showButtons && group.context.groups.length > 1"
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+          <div class="btn-group" role="group" aria-label="Remove button">
+            <button type="button" class="btn btn-secondary"
+                    title="{{'form.discard' | translate}}"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+    </ds-dynamic-form>
+
+        <ng-content *ngIf="!displaySubmit && !displayCancel"></ng-content>
+
+    <div *ngIf="displaySubmit || displayCancel">
+      <hr>
+      <div class="form-group row">
+        <div class="col text-right">
+                    <ng-content select="[before]"></ng-content>
+                    <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
+                      <i class="fa fa-times"></i> {{cancelLabel | translate}}
+          </button>
+                    <ng-content select="[between]"></ng-content>
+                    <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
+                            [disabled]="!(isValid() | async)"><i class="fas fa-save"></i> {{submitLabel | translate}}
+                    </button>
+                    <ng-content select="[after]"></ng-content>
+        </div>
+      </div>
+    </div>
+
+  </form>
 
 </div>
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
index 33f34fdc3c..dc37d46515 100644
--- a/src/app/shared/form/form.component.scss
+++ b/src/app/shared/form/form.component.scss
@@ -15,6 +15,11 @@
   box-shadow: none !important;
 }
 
+button.ds-form-add-more:focus {
+  outline: none;
+  box-shadow: none !important;
+}
+
 .ds-form-input-value {
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index aa004b3f87..2f3be3fded 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -170,7 +170,8 @@ describe('FormComponent test suite', () => {
         <ds-form *ngIf="formModel" #formRef="formComponent"
                  [formId]="formId"
                  [formModel]="formModel"
-                 [displaySubmit]="displaySubmit"></ds-form>`;
+                 [displaySubmit]="displaySubmit"
+                 [displayCancel]="displayCancel"></ds-form>`;
 
       testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
       testComp = testFixture.componentInstance;
@@ -197,6 +198,7 @@ describe('FormComponent test suite', () => {
       formComp.formId = 'testForm';
       formComp.formModel = TEST_FORM_MODEL;
       formComp.displaySubmit = false;
+      formComp.displayCancel = false;
       form = new BehaviorSubject(formState);
       valid = new BehaviorSubject(false);
       spyOn((formComp as any).formService, 'getForm').and.returnValue(form);
@@ -388,6 +390,7 @@ describe('FormComponent test suite', () => {
       formComp.formId = 'testFormArray';
       formComp.formModel = TEST_FORM_MODEL_WITH_ARRAY;
       formComp.displaySubmit = false;
+      formComp.displayCancel = false;
       formFixture.detectChanges();
       spyOn(store, 'dispatch');
     });
@@ -418,7 +421,7 @@ describe('FormComponent test suite', () => {
     }));
 
     it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
-      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
 
       expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
     }));
@@ -426,7 +429,7 @@ describe('FormComponent test suite', () => {
     it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
       spyOn(formComp.removeArrayItem, 'emit');
 
-      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
 
       expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
     }));
@@ -443,6 +446,7 @@ class TestComponent {
   public formId;
   public formModel: DynamicFormControlModel[];
   public displaySubmit = false;
+  public displayCancel = false;
 
   constructor() {
     this.formId = 'testForm';
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index a4af407a55..42469ddba2 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -2,6 +2,7 @@ import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 
+import { Observable, Subscription } from 'rxjs';
 import {
   DynamicFormArrayModel,
   DynamicFormControlEvent,
@@ -9,15 +10,14 @@ import {
   DynamicFormGroupModel,
   DynamicFormLayout,
 } from '@ng-dynamic-forms/core';
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { findIndex } from 'lodash';
+
 import { FormBuilderService } from './builder/form-builder.service';
-import { Observable, Subscription } from 'rxjs';
 import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { FormEntry, FormError } from './form.reducer';
-import { QUALDROP_GROUP_SUFFIX } from './builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
-
-const QUALDROP_GROUP_REGEX = new RegExp(`${QUALDROP_GROUP_SUFFIX}_\\d+$`);
+import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
 
 /**
  * The default form component.
@@ -34,10 +34,15 @@ export class FormComponent implements OnDestroy, OnInit {
   private formValid: boolean;
 
   /**
-   * A boolean that indicate if to display form's submit and cancel buttons
+   * A boolean that indicate if to display form's submit button
    */
   @Input() displaySubmit = true;
 
+  /**
+   * A boolean that indicate if to display form's cancel button
+   */
+  @Input() displayCancel = true;
+
   /**
    * A boolean that indicate if to emit a form change event
    */
@@ -70,6 +75,7 @@ export class FormComponent implements OnDestroy, OnInit {
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   /* tslint:enable:no-output-rename */
   @Output() addArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output() removeArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -87,9 +93,9 @@ export class FormComponent implements OnDestroy, OnInit {
   @Output() submitForm: EventEmitter<Observable<any>> = new EventEmitter<Observable<any>>();
 
   /**
-   * An object of FormGroup type
+   * Reference to NgbModal
    */
-  // public formGroup: FormGroup;
+  modalRef: NgbModalRef;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
@@ -166,7 +172,6 @@ export class FormComponent implements OnDestroy, OnInit {
         filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors))),
         map((formState) => formState.errors),
         distinctUntilChanged())
-      // .delay(100) // this terrible delay is here to prevent the detection change error
         .subscribe((errors: FormError[]) => {
           const { formGroup, formModel } = this;
           errors
@@ -187,7 +192,6 @@ export class FormComponent implements OnDestroy, OnInit {
               if (field) {
                 const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
                 this.formService.addErrorToField(field, model, error.message);
-                // this.formService.validateAllFormFields(formGroup);
                 this.changeDetectorRef.detectChanges();
 
               }
@@ -252,6 +256,10 @@ export class FormComponent implements OnDestroy, OnInit {
     this.blur.emit(event);
   }
 
+  onCustomEvent(event: any) {
+    this.customEvent.emit(event);
+  }
+
   onFocus(event: DynamicFormControlEvent): void {
     this.formService.setTouched(this.formId, this.formModel, event);
     this.focus.emit(event);
@@ -300,58 +308,25 @@ export class FormComponent implements OnDestroy, OnInit {
 
   removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
-    this.removeArrayItem.emit(this.getEvent($event, arrayContext, index - 1, 'remove'));
+    const event = this.getEvent($event, arrayContext, index, 'remove');
     this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
     this.formService.changeForm(this.formId, this.formModel);
+    this.removeArrayItem.emit(event);
   }
 
   insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
-
-    // First emit the new value so it can be sent to the server
-    const value = formArrayControl.controls[0].value;
-    const event = this.getEvent($event, arrayContext, 0, 'add');
-    this.addArrayItem.emit(event);
-    this.change.emit(event);
-
-    // Next: update the UI so the user sees the changes
-    // without having to wait for the server's reply
-
-    // add an empty new field at the bottom
-    this.formBuilderService.addFormArrayGroup(formArrayControl, arrayContext);
-
-    // set that field to the new value
-    const model = arrayContext.groups[arrayContext.groups.length - 1].group[0] as any;
-    if (model.hasAuthority) {
-      model.value = Object.values(value)[0];
-      const ctrl = formArrayControl.controls[formArrayControl.length - 1];
-      const ctrlValue = ctrl.value;
-      const ctrlValueKey = Object.keys(ctrlValue)[0];
-      ctrl.setValue({
-        [ctrlValueKey]: model.value
-      });
-    } else if (this.formBuilderService.isQualdropGroup(model)) {
-      const ctrl = formArrayControl.controls[formArrayControl.length - 1];
-      const ctrlKey = Object.keys(ctrl.value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
-      const valueKey = Object.keys(value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
-      if (ctrlKey !== valueKey) {
-        Object.defineProperty(value, ctrlKey, Object.getOwnPropertyDescriptor(value, valueKey));
-        delete value[valueKey];
-      }
-      ctrl.setValue(value);
-    } else {
-      formArrayControl.controls[formArrayControl.length - 1].setValue(value);
-    }
-
-    // Clear the topmost field by removing the filled out version and inserting a new, empty version.
-    // Doing it this way ensures an empty value of the correct type is added without a bunch of ifs here
-    this.formBuilderService.removeFormArrayGroup(0, formArrayControl, arrayContext);
-    this.formBuilderService.insertFormArrayGroup(0, formArrayControl, arrayContext);
-
-    // Tell the formService that it should rerender.
+    this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
+    this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
     this.formService.changeForm(this.formId, this.formModel);
   }
 
+  isVirtual(arrayContext: DynamicFormArrayModel, index: number) {
+    const context = arrayContext.groups[index];
+    const value: FormFieldMetadataValueObject = (context.group[0] as any).metadataValue;
+    return isNotEmpty(value) && value.isVirtual;
+  }
+
   protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
     const context = arrayContext.groups[index];
     const itemGroupModel = context.context;
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index b61ec5592e..b60a107a0b 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,6 +1,6 @@
-<div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage">
-  <a href="#" id="dropdownLang" role="button" class="px-1" (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle>
-    <i class="fas fa-globe-asia fa-lg fa-fw" [title]="'nav.language' | translate"></i>
+<div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
+  <a href="#" id="dropdownLang" role="button" [attr.aria-label]="'nav.language' |translate" [title]="'nav.language' | translate" class="px-1" (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle>
+    <i class="fas fa-globe-asia fa-lg fa-fw"></i>
   </a>
   <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLang">
     <li class="dropdown-item" #langSelect *ngFor="let lang of translate.getLangs()"
diff --git a/src/app/shared/lang-switch/lang-switch.component.scss b/src/app/shared/lang-switch/lang-switch.component.scss
index 666ba2d49d..efa7a55c44 100644
--- a/src/app/shared/lang-switch/lang-switch.component.scss
+++ b/src/app/shared/lang-switch/lang-switch.component.scss
@@ -1,3 +1,13 @@
 .dropdown-toggle::after {
   display:none;
 }
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .dropdown-toggle {
+    color: var(--ds-header-icon-color) !important;
+
+    &:hover, &focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+  }
+}
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index 16f42a1e16..fc4f22c342 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -24,5 +24,5 @@
        @fadeOut>{{ (message | async) | translate }}</div>
 
   <button class="btn btn-lg btn-primary btn-block mt-3" type="submit"
-          [disabled]="!form.valid">{{"login.form.submit" | translate}}</button>
+          [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>
diff --git a/src/app/shared/log-in/methods/shibboleth/log-in-shibboleth.component.html b/src/app/shared/log-in/methods/shibboleth/log-in-shibboleth.component.html
index 713970f05b..3a3b935cfa 100644
--- a/src/app/shared/log-in/methods/shibboleth/log-in-shibboleth.component.html
+++ b/src/app/shared/log-in/methods/shibboleth/log-in-shibboleth.component.html
@@ -1,7 +1,3 @@
-<button class="btn btn-lg btn-primary btn-block mt-2 text-white" (click)="redirectToShibboleth()" role="button">
-  {{"login.form.shibboleth" | translate}}
+<button class="btn btn-lg btn-primary btn-block mt-2 text-white" (click)="redirectToShibboleth()">
+  <i class="fas fa-sign-in-alt"></i> {{"login.form.shibboleth" | translate}}
 </button>
-
-
-
-
diff --git a/src/app/shared/log-out/log-out.component.html b/src/app/shared/log-out/log-out.component.html
index d522fc6fb9..1c2361099a 100644
--- a/src/app/shared/log-out/log-out.component.html
+++ b/src/app/shared/log-out/log-out.component.html
@@ -2,5 +2,5 @@
 
   <div *ngIf="(error | async)" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()">{{"logout.form.submit" | translate}}</button>
+  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
 </div>
diff --git a/src/app/shared/metadata-representation/metadata-representation-loader.component.ts b/src/app/shared/metadata-representation/metadata-representation-loader.component.ts
index 40fae2e5a6..976dfdbda8 100644
--- a/src/app/shared/metadata-representation/metadata-representation-loader.component.ts
+++ b/src/app/shared/metadata-representation/metadata-representation-loader.component.ts
@@ -14,7 +14,7 @@ import { ThemeService } from '../theme-support/theme.service';
   templateUrl: './metadata-representation-loader.component.html'
 })
 /**
- * Component for determining what component to use depending on the item's relationship type (relationship.type), its metadata representation and, optionally, its context
+ * Component for determining what component to use depending on the item's entity type (dspace.entity.type), its metadata representation and, optionally, its context
  */
 export class MetadataRepresentationLoaderComponent implements OnInit {
   private componentRefInstance: MetadataRepresentationListElementComponent;
@@ -64,7 +64,7 @@ export class MetadataRepresentationLoaderComponent implements OnInit {
   }
 
   /**
-   * Fetch the component depending on the item's relationship type, metadata representation type and context
+   * Fetch the component depending on the item's entity type, metadata representation type and context
    * @returns {string}
    */
   private getComponent(): GenericConstructor<MetadataRepresentationListElementComponent> {
diff --git a/src/app/shared/mocks/dso-name.service.mock.ts b/src/app/shared/mocks/dso-name.service.mock.ts
new file mode 100644
index 0000000000..f4947cc860
--- /dev/null
+++ b/src/app/shared/mocks/dso-name.service.mock.ts
@@ -0,0 +1,9 @@
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+
+export const UNDEFINED_NAME = 'Undefined';
+
+export class DSONameServiceMock {
+  public getName(dso: DSpaceObject) {
+    return UNDEFINED_NAME;
+  }
+}
diff --git a/src/app/shared/mocks/dspace-rest/mocks/mock-publication-response.json b/src/app/shared/mocks/dspace-rest/mocks/mock-publication-response.json
index d298812e5d..cc4cb5fa46 100644
--- a/src/app/shared/mocks/dspace-rest/mocks/mock-publication-response.json
+++ b/src/app/shared/mocks/dspace-rest/mocks/mock-publication-response.json
@@ -157,7 +157,7 @@
         "place": 0
       }
     ],
-    "relationship.type": [
+    "dspace.entity.type": [
       {
         "value": "Publication",
         "language": null,
diff --git a/src/app/shared/mocks/form-models.mock.ts b/src/app/shared/mocks/form-models.mock.ts
index 739de944f0..c43138fa25 100644
--- a/src/app/shared/mocks/form-models.mock.ts
+++ b/src/app/shared/mocks/form-models.mock.ts
@@ -80,6 +80,7 @@ const rowArrayQualdropConfig = {
   id: 'row_QUALDROP_GROUP',
   initialCount: 1,
   notRepeatable: true,
+  isDraggable: false,
   relationshipConfig: undefined,
   groupFactory: () => {
     return [MockQualdropModel];
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index c5afdd5758..e8b3d37b5f 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -16,10 +16,10 @@
     <div class="d-flex flex-column justify-content-center align-items-center">
       <div class="notification-icon d-flex justify-content-center"><i
         [ngClass]="{'fas fa-2x': true,
-      'fa-check': notification.type == 'alert-success',
+      'fa-check-circle': notification.type == 'alert-success',
       'fa-times-circle': notification.type == 'alert-danger',
       'fa-exclamation-triangle': notification.type == 'alert-warning',
-      'fa-info': notification.type == 'alert-info'
+      'fa-info-circle': notification.type == 'alert-info'
       }"></i></div>
     </div>
     <div class="d-flex flex-column justify-content-center align-content-stretch">
diff --git a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
index b02ab3cfeb..30ad91c1e2 100644
--- a/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
+++ b/src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts
@@ -27,7 +27,7 @@ import { ThemeService } from '../../../theme-support/theme.service';
   templateUrl: './listable-object-component-loader.component.html'
 })
 /**
- * Component for determining what component to use depending on the item's relationship type (relationship.type)
+ * Component for determining what component to use depending on the item's entity type (dspace.entity.type)
  */
 export class ListableObjectComponentLoaderComponent implements OnInit, OnDestroy {
   /**
@@ -179,7 +179,7 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnDestroy
   }
 
   /**
-   * Fetch the component depending on the item's relationship type, view mode and context
+   * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor<Component>}
    */
   getComponent(renderTypes: (string | GenericConstructor<ListableObject>)[],
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/pool-search-result/pool-search-result-detail-element.component.spec.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/pool-search-result/pool-search-result-detail-element.component.spec.ts
index f5f19fc041..8e0458d49f 100644
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/pool-search-result/pool-search-result-detail-element.component.spec.ts
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/pool-search-result/pool-search-result-detail-element.component.spec.ts
@@ -15,6 +15,8 @@ import { VarDirective } from '../../../utils/var.directive';
 import { LinkService } from '../../../../core/cache/builders/link.service';
 import { getMockLinkService } from '../../../mocks/link-service.mock';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: PoolSearchResultDetailElementComponent;
 let fixture: ComponentFixture<PoolSearchResultDetailElementComponent>;
@@ -67,7 +69,8 @@ describe('PoolSearchResultDetailElementComponent', () => {
       providers: [
         { provide: 'objectElementProvider', useValue: (mockResultObject) },
         { provide: 'indexElementProvider', useValue: (compIndex) },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(PoolSearchResultDetailElementComponent, {
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.spec.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.spec.ts
index 8745697fbe..536bd6d0bb 100644
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.spec.ts
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.spec.ts
@@ -12,6 +12,8 @@ import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
 import { WorkflowItemSearchResult } from '../../../object-collection/shared/workflow-item-search-result.model';
 import { getMockLinkService } from '../../../mocks/link-service.mock';
 import { LinkService } from '../../../../core/cache/builders/link.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: WorkflowItemSearchResultDetailElementComponent;
 let fixture: ComponentFixture<WorkflowItemSearchResultDetailElementComponent>;
@@ -62,7 +64,8 @@ describe('WorkflowItemSearchResultDetailElementComponent', () => {
       providers: [
         { provide: 'objectElementProvider', useValue: (mockResultObject) },
         { provide: 'indexElementProvider', useValue: (compIndex) },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(WorkflowItemSearchResultDetailElementComponent, {
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.spec.ts b/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.spec.ts
index 1662e033d7..00a20b006a 100644
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.spec.ts
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.spec.ts
@@ -12,6 +12,8 @@ import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
 import { WorkflowItemSearchResult } from '../../../object-collection/shared/workflow-item-search-result.model';
 import { getMockLinkService } from '../../../mocks/link-service.mock';
 import { LinkService } from '../../../../core/cache/builders/link.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: WorkspaceItemSearchResultDetailElementComponent;
 let fixture: ComponentFixture<WorkspaceItemSearchResultDetailElementComponent>;
@@ -62,7 +64,8 @@ describe('WorkspaceItemSearchResultDetailElementComponent', () => {
       providers: [
         { provide: 'objectElementProvider', useValue: (mockResultObject) },
         { provide: 'indexElementProvider', useValue: (compIndex) },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(WorkspaceItemSearchResultDetailElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.spec.ts
index e56999472e..b85b31c8ba 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.spec.ts
@@ -15,6 +15,8 @@ import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { MyDspaceItemStatusType } from '../../../../object-collection/shared/mydspace-item-status/my-dspace-item-status-type';
 import { ClaimedApprovedTaskSearchResult } from '../../../../object-collection/shared/claimed-approved-task-search-result.model';
 import { ClaimedApprovedSearchResultListElementComponent } from './claimed-approved-search-result-list-element.component';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../mocks/dso-name.service.mock';
 
 let component: ClaimedApprovedSearchResultListElementComponent;
 let fixture: ComponentFixture<ClaimedApprovedSearchResultListElementComponent>;
@@ -64,7 +66,8 @@ describe('ClaimedApprovedSearchResultListElementComponent', () => {
       declarations: [ClaimedApprovedSearchResultListElementComponent, VarDirective],
       providers: [
         { provide: TruncatableService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ClaimedApprovedSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts
index 36e468808a..5571782ce2 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts
@@ -12,6 +12,7 @@ import { followLink } from '../../../../utils/follow-link-config.model';
 import { SearchResultListElementComponent } from '../../../search-result-list-element/search-result-list-element.component';
 import { ClaimedTaskSearchResult } from '../../../../object-collection/shared/claimed-task-search-result.model';
 import { ClaimedTask } from '../../../../../core/tasks/models/claimed-task-object.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * This component renders claimed task approved object for the search result in the list view.
@@ -41,9 +42,10 @@ export class ClaimedApprovedSearchResultListElementComponent extends SearchResul
 
   public constructor(
     protected linkService: LinkService,
-    protected truncatableService: TruncatableService
+    protected truncatableService: TruncatableService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declided-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declided-search-result-list-element.component.spec.ts
index 8a8d542063..291c8244b7 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declided-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declided-search-result-list-element.component.spec.ts
@@ -15,6 +15,8 @@ import { VarDirective } from '../../../../utils/var.directive';
 import { TruncatableService } from '../../../../truncatable/truncatable.service';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
 import { MyDspaceItemStatusType } from '../../../../object-collection/shared/mydspace-item-status/my-dspace-item-status-type';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../../mocks/dso-name.service.mock';
 
 let component: ClaimedDeclinedSearchResultListElementComponent;
 let fixture: ComponentFixture<ClaimedDeclinedSearchResultListElementComponent>;
@@ -64,7 +66,8 @@ describe('ClaimedDeclinedSearchResultListElementComponent', () => {
       declarations: [ClaimedDeclinedSearchResultListElementComponent, VarDirective],
       providers: [
         { provide: TruncatableService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ClaimedDeclinedSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts
index 7db12c1725..630aa699a7 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts
@@ -13,6 +13,7 @@ import { followLink } from '../../../../utils/follow-link-config.model';
 import { SearchResultListElementComponent } from '../../../search-result-list-element/search-result-list-element.component';
 import { ClaimedTaskSearchResult } from '../../../../object-collection/shared/claimed-task-search-result.model';
 import { ClaimedTask } from '../../../../../core/tasks/models/claimed-task-object.model';
+import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * This component renders claimed task declined object for the search result in the list view.
@@ -42,9 +43,10 @@ export class ClaimedDeclinedSearchResultListElementComponent extends SearchResul
 
   public constructor(
     protected linkService: LinkService,
-    protected truncatableService: TruncatableService
+    protected truncatableService: TruncatableService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.spec.ts
index 5dad421f68..7896061a73 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.spec.ts
@@ -16,6 +16,8 @@ import { VarDirective } from '../../../utils/var.directive';
 import { LinkService } from '../../../../core/cache/builders/link.service';
 import { getMockLinkService } from '../../../mocks/link-service.mock';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: ClaimedSearchResultListElementComponent;
 let fixture: ComponentFixture<ClaimedSearchResultListElementComponent>;
@@ -65,7 +67,8 @@ describe('ClaimedSearchResultListElementComponent', () => {
       declarations: [ClaimedSearchResultListElementComponent, VarDirective],
       providers: [
         { provide: TruncatableService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ClaimedSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.ts
index cef1056401..dae3272889 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.ts
@@ -12,6 +12,7 @@ import { WorkflowItem } from '../../../../core/submission/models/workflowitem.mo
 import { followLink } from '../../../utils/follow-link-config.model';
 import { SearchResultListElementComponent } from '../../search-result-list-element/search-result-list-element.component';
 import { ClaimedTask } from '../../../../core/tasks/models/claimed-task-object.model';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-claimed-search-result-list-element',
@@ -38,9 +39,10 @@ export class ClaimedSearchResultListElementComponent extends SearchResultListEle
 
   public constructor(
     protected linkService: LinkService,
-    protected truncatableService: TruncatableService
+    protected truncatableService: TruncatableService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts
index 9aec785f08..023b51a8dd 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts
@@ -57,7 +57,7 @@ const mockItemWithEntityType: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'relationship.type': [
+    'dspace.entity.type': [
       {
         language: null,
         value: 'Publication'
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.spec.ts
index e2017e8748..d1871d0996 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.spec.ts
@@ -10,6 +10,8 @@ import { ItemSearchResult } from '../../../object-collection/shared/item-search-
 import { ItemSearchResultListElementSubmissionComponent } from './item-search-result-list-element-submission.component';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: ItemSearchResultListElementSubmissionComponent;
 let fixture: ComponentFixture<ItemSearchResultListElementSubmissionComponent>;
@@ -54,6 +56,7 @@ describe('ItemMyDSpaceResultListElementComponent', () => {
       declarations: [ItemSearchResultListElementSubmissionComponent],
       providers: [
         { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemSearchResultListElementSubmissionComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts
index e55b45aed7..18db9abd67 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts
@@ -16,6 +16,8 @@ import { VarDirective } from '../../../utils/var.directive';
 import { LinkService } from '../../../../core/cache/builders/link.service';
 import { getMockLinkService } from '../../../mocks/link-service.mock';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: PoolSearchResultListElementComponent;
 let fixture: ComponentFixture<PoolSearchResultListElementComponent>;
@@ -65,7 +67,8 @@ describe('PoolSearchResultListElementComponent', () => {
       declarations: [PoolSearchResultListElementComponent, VarDirective],
       providers: [
         { provide: TruncatableService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(PoolSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.ts
index b130d5001c..fe4fa715ee 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.ts
@@ -13,6 +13,7 @@ import { SearchResultListElementComponent } from '../../search-result-list-eleme
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { followLink } from '../../../utils/follow-link-config.model';
 import { LinkService } from '../../../../core/cache/builders/link.service';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * This component renders pool task object for the search result in the list view.
@@ -48,9 +49,10 @@ export class PoolSearchResultListElementComponent extends SearchResultListElemen
 
   constructor(
     protected linkService: LinkService,
-    protected truncatableService: TruncatableService
+    protected truncatableService: TruncatableService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts
index 3743a9bd22..61337b0cb3 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts
@@ -16,6 +16,8 @@ import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { WorkflowItemSearchResultListElementComponent } from './workflow-item-search-result-list-element.component';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: WorkflowItemSearchResultListElementComponent;
 let fixture: ComponentFixture<WorkflowItemSearchResultListElementComponent>;
@@ -67,6 +69,7 @@ describe('WorkflowItemSearchResultListElementComponent', () => {
         { provide: TruncatableService, useValue: {} },
         { provide: ItemDataService, useValue: {} },
         { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(WorkflowItemSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts
index 432f69f28c..836a3ee268 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts
@@ -15,6 +15,7 @@ import { WorkflowItemSearchResult } from '../../../object-collection/shared/work
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { followLink } from '../../../utils/follow-link-config.model';
 import { SearchResultListElementComponent } from '../../search-result-list-element/search-result-list-element.component';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * This component renders workflowitem object for the search result in the list view.
@@ -40,9 +41,10 @@ export class WorkflowItemSearchResultListElementComponent extends SearchResultLi
 
   constructor(
     protected truncatableService: TruncatableService,
-    protected linkService: LinkService
+    protected linkService: LinkService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts
index b1f2a2aeb9..87f5fd3733 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts
@@ -16,6 +16,8 @@ import { createSuccessfulRemoteDataObject } from '../../../remote-data.utils';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { WorkspaceItemSearchResultListElementComponent } from './workspace-item-search-result-list-element.component';
 import { By } from '@angular/platform-browser';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let component: WorkspaceItemSearchResultListElementComponent;
 let fixture: ComponentFixture<WorkspaceItemSearchResultListElementComponent>;
@@ -66,6 +68,7 @@ describe('WorkspaceItemSearchResultListElementComponent', () => {
         { provide: TruncatableService, useValue: {} },
         { provide: ItemDataService, useValue: {} },
         { provide: LinkService, useValue: linkService },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(WorkspaceItemSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts
index b9d89ef6ab..5edfc1929e 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts
@@ -15,6 +15,7 @@ import { WorkspaceItemSearchResult } from '../../../object-collection/shared/wor
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { followLink } from '../../../utils/follow-link-config.model';
 import { SearchResultListElementComponent } from '../../search-result-list-element/search-result-list-element.component';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 /**
  * This component renders workspaceitem object for the search result in the list view.
@@ -40,9 +41,10 @@ export class WorkspaceItemSearchResultListElementComponent extends SearchResultL
 
   constructor(
     protected truncatableService: TruncatableService,
-    protected linkService: LinkService
+    protected linkService: LinkService,
+    protected dsoNameService: DSONameService
   ) {
-    super(truncatableService);
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
index 1c081e2805..c98003cd1d 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
@@ -1,4 +1,4 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="firstMetadataValue('dc.title')"></a>
-<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="firstMetadataValue('dc.title')"></span>
+<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
 <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
index d50fdccb80..bdfe825c82 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Collection } from '../../../../core/shared/collection.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let collectionSearchResultListElementComponent: CollectionSearchResultListElementComponent;
 let fixture: ComponentFixture<CollectionSearchResultListElementComponent>;
@@ -47,6 +49,7 @@ describe('CollectionSearchResultListElementComponent', () => {
       declarations: [CollectionSearchResultListElementComponent, TruncatePipe],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(CollectionSearchResultListElementComponent, {
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
index 08b02d123a..e0f0319ffc 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
@@ -1,4 +1,4 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="firstMetadataValue('dc.title')"></a>
-<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="firstMetadataValue('dc.title')"></span>
+<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
 <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
index c5588f5371..529594671c 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { TruncatableService } from '../../../truncatable/truncatable.service';
 import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../../mocks/dso-name.service.mock';
 
 let communitySearchResultListElementComponent: CommunitySearchResultListElementComponent;
 let fixture: ComponentFixture<CommunitySearchResultListElementComponent>;
@@ -47,6 +49,7 @@ describe('CommunitySearchResultListElementComponent', () => {
       declarations: [CommunitySearchResultListElementComponent, TruncatePipe],
       providers: [
         { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
index 01a026eec9..80a4fd81fd 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
@@ -2,10 +2,10 @@
 
 <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead"
-       [innerHTML]="firstMetadataValue('dc.title')"></a>
-    <span *ngIf="linkType == linkTypes.None" class="lead"
-          [innerHTML]="firstMetadataValue('dc.title')"></span>
+       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [innerHTML]="dsoTitle"></a>
+    <span *ngIf="linkType == linkTypes.None" class="lead item-list-title"
+          [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
       <ds-truncatable-part [id]="dso.id" [minLines]="1">
         <ng-container *ngIf="dso.firstMetadataValue('dc.publisher') || dso.firstMetadataValue('dc.date.issued')">
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts
index f8a8be415d..d32ac8058d 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts
@@ -7,6 +7,8 @@ import { Item } from '../../../../../../core/shared/item.model';
 import { TruncatePipe } from '../../../../../utils/truncate.pipe';
 import { TruncatableService } from '../../../../../truncatable/truncatable.service';
 import { ItemSearchResult } from '../../../../../object-collection/shared/item-search-result.model';
+import { DSONameService } from '../../../../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock, UNDEFINED_NAME } from '../../../../../mocks/dso-name.service.mock';
 
 let publicationListElementComponent: ItemSearchResultListElementComponent;
 let fixture: ComponentFixture<ItemSearchResultListElementComponent>;
@@ -53,23 +55,18 @@ const mockItemWithoutMetadata: ItemSearchResult = Object.assign(new ItemSearchRe
   indexableObject:
     Object.assign(new Item(), {
       bundles: observableOf({}),
-      metadata: {
-        'dc.title': [
-          {
-            language: 'en_US',
-            value: 'This is just another title'
-          }
-        ]
-      }
+      metadata: {}
     })
 });
 
+
 describe('ItemListElementComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ItemSearchResultListElementComponent, TruncatePipe],
       providers: [
-        { provide: TruncatableService, useValue: {} }
+        { provide: TruncatableService, useValue: {} },
+        { provide: DSONameService, useClass: DSONameServiceMock }
       ],
 
       schemas: [NO_ERRORS_SCHEMA]
@@ -179,4 +176,16 @@ describe('ItemListElementComponent', () => {
       expect(abstractField).toBeNull();
     });
   });
+
+  describe('When the item has no title', () => {
+    beforeEach(() => {
+      publicationListElementComponent.object = mockItemWithoutMetadata;
+      fixture.detectChanges();
+    });
+
+    it('should show the fallback untitled translation', () => {
+      const titleField = fixture.debugElement.query(By.css('.item-list-title'));
+      expect(titleField.nativeElement.textContent.trim()).toEqual(UNDEFINED_NAME);
+    });
+  });
 });
diff --git a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
index 3ad4f5e7e6..afd0363e7a 100644
--- a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
@@ -7,6 +7,7 @@ import { hasValue } from '../../empty.util';
 import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
 import { TruncatableService } from '../../truncatable/truncatable.service';
 import { Metadata } from '../../../core/shared/metadata.utils';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-search-result-list-element',
@@ -17,8 +18,9 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
    * The DSpaceObject of the search result
    */
   dso: K;
+  dsoTitle: string;
 
-  public constructor(protected truncatableService: TruncatableService) {
+  public constructor(protected truncatableService: TruncatableService, protected dsoNameService: DSONameService) {
     super();
   }
 
@@ -28,6 +30,7 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
   ngOnInit(): void {
     if (hasValue(this.object)) {
       this.dso = this.object.indexableObject;
+      this.dsoTitle = this.dsoNameService.getName(this.dso);
     }
   }
 
diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.spec.ts b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.spec.ts
index 3d402ca0e4..31ad68ec63 100644
--- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.spec.ts
+++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.spec.ts
@@ -10,6 +10,8 @@ import { LinkService } from '../../../core/cache/builders/link.service';
 import { createSuccessfulRemoteDataObject$ } from '../../remote-data.utils';
 import { HALResource } from '../../../core/shared/hal-resource.model';
 import { ChildHALResource } from '../../../core/shared/child-hal-resource.model';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { DSONameServiceMock } from '../../mocks/dso-name.service.mock';
 
 export function createSidebarSearchListElementTests(
   componentClass: any,
@@ -38,6 +40,7 @@ export function createSidebarSearchListElementTests(
         providers: [
           { provide: TruncatableService, useValue: {} },
           { provide: LinkService, useValue: linkService },
+          { provide: DSONameService, useClass: DSONameServiceMock },
           ...extraProviders
         ],
         schemas: [NO_ERRORS_SCHEMA]
diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts
index 478bf50771..a0d70a43c7 100644
--- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts
+++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts
@@ -12,6 +12,7 @@ import { followLink } from '../../utils/follow-link-config.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { of as observableOf } from 'rxjs';
 import { Context } from '../../../core/shared/context.model';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-sidebar-search-list-element',
@@ -39,8 +40,10 @@ export class SidebarSearchListElementComponent<T extends SearchResult<K>, K exte
   description: string;
 
   public constructor(protected truncatableService: TruncatableService,
-                     protected linkService: LinkService) {
-    super(truncatableService);
+                     protected linkService: LinkService,
+                     protected dsoNameService: DSONameService
+  ) {
+    super(truncatableService, dsoNameService);
   }
 
   /**
diff --git a/src/app/shared/object-list/type-badge/type-badge.component.spec.ts b/src/app/shared/object-list/type-badge/type-badge.component.spec.ts
index a8659e28ac..9a7e22c551 100644
--- a/src/app/shared/object-list/type-badge/type-badge.component.spec.ts
+++ b/src/app/shared/object-list/type-badge/type-badge.component.spec.ts
@@ -12,10 +12,10 @@ let fixture: ComponentFixture<TypeBadgeComponent>;
 
 const type = 'authorOfPublication';
 
-const mockItemWithRelationshipType = Object.assign(new Item(), {
+const mockItemWithEntityType = Object.assign(new Item(), {
   bundles: observableOf({}),
   metadata: {
-    'relationship.type': [
+    'dspace.entity.type': [
       {
         language: 'en_US',
         value: type
@@ -24,7 +24,7 @@ const mockItemWithRelationshipType = Object.assign(new Item(), {
   }
 });
 
-const mockItemWithoutRelationshipType = Object.assign(new Item(), {
+const mockItemWithoutEntityType = Object.assign(new Item(), {
   bundles: observableOf({}),
   metadata: {
     'dc.title': [
@@ -52,21 +52,21 @@ describe('ItemTypeBadgeComponent', () => {
     comp = fixture.componentInstance;
   }));
 
-  describe('When the item has a relationship type', () => {
+  describe('When the item has an entity type', () => {
     beforeEach(() => {
-      comp.object = mockItemWithRelationshipType;
+      comp.object = mockItemWithEntityType;
       fixture.detectChanges();
     });
 
-    it('should show the relationship type badge', () => {
+    it('should show the entity type badge', () => {
       const badge = fixture.debugElement.query(By.css('span.badge'));
       expect(badge.nativeElement.textContent).toContain(type.toLowerCase());
     });
   });
 
-  describe('When the item has no relationship type', () => {
+  describe('When the item has no entity type', () => {
     beforeEach(() => {
-      comp.object = mockItemWithoutRelationshipType;
+      comp.object = mockItemWithoutEntityType;
       fixture.detectChanges();
     });
 
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index c8a0c4b879..27ebcd9643 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -30,12 +30,12 @@
   <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
   <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
   <div *ngVar="(selectedIds$ | async) as selectedIds">
-    <button class="btn btn-outline-secondary collection-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button class="btn collection-confirm float-right"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
             [disabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
-      {{confirmButton | translate}}
+      <i class="fas fa-trash"></i> {{confirmButton | translate}}
     </button>
+    <button class="btn btn-outline-secondary collection-cancel float-right mr-1" (click)="onCancel()"><i class="fas fa-times"></i> {{cancelButton | translate}}</button>
   </div>
 </ng-container>
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index e8382c2eb4..5f002e55d3 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -7,7 +7,7 @@
       </div>
       <div class="col">
         <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
-          <button class="btn btn-outline-primary" id="paginationControls" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
+          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate"><i class="fas fa-cog" aria-hidden="true"></i></button>
           <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
             <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
             <button class="dropdown-item" *ngFor="let item of pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != (pageSize$|async)}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
diff --git a/src/app/shared/resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component.html b/src/app/shared/resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component.html
index 0d130c723c..fb330a536a 100644
--- a/src/app/shared/resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component.html
+++ b/src/app/shared/resource-policies/form/eperson-group-list/eperson-search-box/eperson-search-box.component.html
@@ -12,8 +12,8 @@
       <input type="text" name="query" id="query" formControlName="query"
              class="form-control" aria-label="Search input">
       <span class="input-group-append">
-        <button type="submit" class="search-button btn btn-secondary">
-          {{ labelPrefix + 'search.button' | translate }}
+        <button type="submit" class="search-button btn btn-primary">
+          <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
         </button>
       </span>
     </div>
diff --git a/src/app/shared/resource-policies/form/eperson-group-list/group-search-box/group-search-box.component.html b/src/app/shared/resource-policies/form/eperson-group-list/group-search-box/group-search-box.component.html
index 418996c564..e5a3e1a876 100644
--- a/src/app/shared/resource-policies/form/eperson-group-list/group-search-box/group-search-box.component.html
+++ b/src/app/shared/resource-policies/form/eperson-group-list/group-search-box/group-search-box.component.html
@@ -6,8 +6,8 @@
       <input type="text" name="query" id="query" formControlName="query"
              class="form-control" aria-label="Search input">
       <span class="input-group-append">
-        <button type="submit" class="search-button btn btn-secondary">
-          {{ labelPrefix + 'search.button' | translate }}
+        <button type="submit" class="search-button btn btn-primary">
+          <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
         </button>
       </span>
     </div>
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.html b/src/app/shared/resource-policies/form/resource-policy-form.component.html
index bdfb9ce3e6..5a082d9ba3 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.html
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.html
@@ -3,7 +3,8 @@
            #formRef="formComponent"
            [formId]="formId"
            [formModel]="formModel"
-           [displaySubmit]="false"></ds-form>
+           [displaySubmit]="false"
+           [displayCancel]="false"></ds-form>
   <div class="container-fluid">
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
     <input id="ResourcePolicyObject" class="form-control mb-3" type="text" readonly [value]="resourcePolicyTargetName$ | async">
diff --git a/src/app/shared/resource-policies/resource-policies.component.ts b/src/app/shared/resource-policies/resource-policies.component.ts
index d52d7a0799..30bd7ce45b 100644
--- a/src/app/shared/resource-policies/resource-policies.component.ts
+++ b/src/app/shared/resource-policies/resource-policies.component.ts
@@ -31,9 +31,8 @@ import { RequestService } from '../../core/data/request.service';
 import { NotificationsService } from '../notifications/notifications.service';
 import { dateToString, stringToNgbDateStruct } from '../date.util';
 import { followLink } from '../utils/follow-link-config.model';
-import { ADMIN_MODULE_PATH } from '../../app-routing-paths';
-import { GROUP_EDIT_PATH } from '../../+admin/admin-access-control/admin-access-control-routing-paths';
-import { ACCESS_CONTROL_MODULE_PATH } from '../../+admin/admin-routing-paths';
+import { ACCESS_CONTROL_MODULE_PATH } from '../../app-routing-paths';
+import { GROUP_EDIT_PATH } from '../../access-control/access-control-routing-paths';
 
 interface ResourcePolicyCheckboxEntry {
   id: string;
@@ -317,7 +316,7 @@ export class ResourcePoliciesComponent implements OnInit, OnDestroy {
         getFirstSucceededRemoteDataPayload(),
         map((group: Group) => group.id)
       ).subscribe((groupUUID) => {
-        this.router.navigate([ADMIN_MODULE_PATH, ACCESS_CONTROL_MODULE_PATH, GROUP_EDIT_PATH, groupUUID]);
+        this.router.navigate([ACCESS_CONTROL_MODULE_PATH, GROUP_EDIT_PATH, groupUUID]);
       })
     );
   }
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 19c6f8f1ac..bb75f449ff 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -7,9 +7,10 @@
 </div>
     <div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
     <div class="form-group input-group">
-        <input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
+        <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}"
+               [placeholder]="searchPlaceholder">
         <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-secondary">{{ ('search.form.search' | translate) }}</button>
+            <button type="submit" class="search-button btn btn-{{brandColor}}"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
         </span>
     </div>
     </div>
diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts
index 1c9aadf03d..fd1abde057 100644
--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -16,7 +16,6 @@ import { SearchConfigurationService } from '../../core/shared/search/search-conf
 @Component({
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
-  // templateUrl: './search-form.component.html',
   templateUrl: './search-form.component.html'
 })
 
@@ -57,6 +56,11 @@ export class SearchFormComponent {
    */
   @Input() brandColor = 'primary';
 
+  /**
+   * The placeholder of the search input
+   */
+  @Input() searchPlaceholder: string;
+
   /**
    * Output the search data on submit
    */
diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
index a03a0de451..eb2105f4e7 100644
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
@@ -4,7 +4,9 @@
       {{'search.filters.filter.' + filter.name + '.head'| translate}}
     </h5>
     <span class="filter-toggle fas float-right"
-          [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'">
+          [ngClass]="(collapsed$ | async) ? 'fa-plus' : 'fa-minus'"
+          [title]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate"
+          [attr.aria-label]="((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate">
     </span>
   </div>
   <div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'"
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
index 71d19dbdf8..2b5029fce2 100644
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -25,4 +25,8 @@
             outline: none;
         }
     }
+
+  .noUi-connect {
+      background: var(--ds-slider-color);
+  }
 }
diff --git a/src/app/shared/search/search-filters/search-filters.component.html b/src/app/shared/search/search-filters/search-filters.component.html
index 53bdf06907..488ae7b517 100644
--- a/src/app/shared/search/search-filters/search-filters.component.html
+++ b/src/app/shared/search/search-filters/search-filters.component.html
@@ -4,4 +4,4 @@
         <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-filter>
     </div>
 </div>
-<a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>
+<a class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button"><i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}</a>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 1065d82833..e9f9d69918 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -232,6 +232,8 @@ import { ConfigurationSearchPageComponent } from '../+search-page/configuration-
 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 { ThemedConfigurationSearchPageComponent } from '../+search-page/themed-configuration-search-page.component';
+import { SearchNavbarComponent } from '../search-navbar/search-navbar.component';
 
 /**
  * Declaration needed to make sure all decorator functions are called in time
@@ -457,6 +459,7 @@ const COMPONENTS = [
   PublicationSidebarSearchListElementComponent,
   CollectionSidebarSearchListElementComponent,
   CommunitySidebarSearchListElementComponent,
+  SearchNavbarComponent
 ];
 
 const ENTRY_COMPONENTS = [
@@ -516,7 +519,8 @@ const ENTRY_COMPONENTS = [
 ];
 
 const SHARED_SEARCH_PAGE_COMPONENTS = [
-  ConfigurationSearchPageComponent
+  ConfigurationSearchPageComponent,
+  ThemedConfigurationSearchPageComponent
 ];
 
 const SHARED_ITEM_PAGE_COMPONENTS = [
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.html b/src/app/shared/starts-with/date/starts-with-date.component.html
index 3f024c3254..b350d9896c 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.html
+++ b/src/app/shared/starts-with/date/starts-with-date.component.html
@@ -4,7 +4,7 @@
       {{'browse.startsWith.jump' | translate}}
     </span>
     <div class="col-6 col-md-2">
-      <select id="year-select" class="form-control" (change)="setStartsWithYearEvent($event)">
+      <select id="year-select" class="form-control" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
         <option [value]="-1" [selected]="!startsWithYear">
           {{'browse.startsWith.choose_year' | translate}}
         </option>
@@ -16,7 +16,7 @@
       </select>
     </div>
     <div class="col-6 col-md-2">
-      <select id="month-select" class="form-control" (change)="setStartsWithMonthEvent($event)">
+      <select id="month-select" class="form-control" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
         <option *ngFor="let option of monthOptions"
                 [value]="option"
                 [selected]="option === startsWithMonth ? 'selected': null">
@@ -25,9 +25,9 @@
       </select>
     </div>
     <div class="form-group input-group col-12 col-md-6 pt-1 pt-md-0">
-      <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''" />
+      <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''" />
       <span class="input-group-append">
-        <button class="btn btn-secondary" type="submit">{{'browse.startsWith.submit' | translate}}</button>
+        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
       </span>
     </div>
   </div>
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.html b/src/app/shared/starts-with/text/starts-with-text.component.html
index dd7f4de278..7a93adf7ac 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.html
+++ b/src/app/shared/starts-with/text/starts-with-text.component.html
@@ -22,7 +22,7 @@
     <div class="form-group input-group col-8 col-sm-12 col-md-6">
       <input class="form-control" placeholder="{{'browse.startsWith.type_text' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
       <span class="input-group-append">
-        <button class="btn btn-secondary" type="submit">{{'browse.startsWith.submit' | translate}}</button>
+        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
       </span>
     </div>
   </div>
diff --git a/src/app/shared/testing/menu-service.stub.ts b/src/app/shared/testing/menu-service.stub.ts
index 1b6824c8ee..4f2828a7e1 100644
--- a/src/app/shared/testing/menu-service.stub.ts
+++ b/src/app/shared/testing/menu-service.stub.ts
@@ -52,7 +52,7 @@ export class MenuServiceStub {
   deactivateSection(): void { /***/
   }
 
-  addSection(): void { /***/
+  addSection(menuID: MenuID, section: MenuSection): void { /***/
   }
 
   removeSection(): void { /***/
diff --git a/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
new file mode 100644
index 0000000000..dab96aef04
--- /dev/null
+++ b/src/app/statistics-page/collection-statistics-page/themed-collection-statistics-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CollectionStatisticsPageComponent } from './collection-statistics-page.component';
+
+/**
+ * Themed wrapper for CollectionStatisticsPageComponent
+ */
+@Component({
+  selector: 'ds-themed-collection-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCollectionStatisticsPageComponent extends ThemedComponent<CollectionStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'CollectionStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/collection-statistics-page/collection-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./collection-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
new file mode 100644
index 0000000000..17f185f786
--- /dev/null
+++ b/src/app/statistics-page/community-statistics-page/themed-community-statistics-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityStatisticsPageComponent } from './community-statistics-page.component';
+
+/**
+ * Themed wrapper for CommunityStatisticsPageComponent
+ */
+@Component({
+  selector: 'ds-themed-collection-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityStatisticsPageComponent extends ThemedComponent<CommunityStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'CommunityStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/community-statistics-page/community-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
new file mode 100644
index 0000000000..50e26329a9
--- /dev/null
+++ b/src/app/statistics-page/item-statistics-page/themed-item-statistics-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ItemStatisticsPageComponent } from './item-statistics-page.component';
+
+/**
+ * Themed wrapper for ItemStatisticsPageComponent
+ */
+@Component({
+  selector: 'ds-themed-item-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedItemStatisticsPageComponent extends ThemedComponent<ItemStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'ItemStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/item-statistics-page/item-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./item-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
new file mode 100644
index 0000000000..3f841163ed
--- /dev/null
+++ b/src/app/statistics-page/site-statistics-page/themed-site-statistics-page.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SiteStatisticsPageComponent } from './site-statistics-page.component';
+
+/**
+ * Themed wrapper for SiteStatisticsPageComponent
+ */
+@Component({
+  selector: 'ds-themed-site-statistics-page',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedSiteStatisticsPageComponent extends ThemedComponent<SiteStatisticsPageComponent> {
+  protected getComponentName(): string {
+    return 'SiteStatisticsPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/statistics-page/site-statistics-page/site-statistics-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./site-statistics-page.component`);
+  }
+
+}
diff --git a/src/app/statistics-page/statistics-page-routing.module.ts b/src/app/statistics-page/statistics-page-routing.module.ts
index 44943b94d2..6a133fc9ac 100644
--- a/src/app/statistics-page/statistics-page-routing.module.ts
+++ b/src/app/statistics-page/statistics-page-routing.module.ts
@@ -3,13 +3,13 @@ import { RouterModule } from '@angular/router';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { I18nBreadcrumbsService } from '../core/breadcrumbs/i18n-breadcrumbs.service';
 import { StatisticsPageModule } from './statistics-page.module';
-import { SiteStatisticsPageComponent } from './site-statistics-page/site-statistics-page.component';
 import { ItemPageResolver } from '../+item-page/item-page.resolver';
-import { ItemStatisticsPageComponent } from './item-statistics-page/item-statistics-page.component';
 import { CollectionPageResolver } from '../+collection-page/collection-page.resolver';
-import { CollectionStatisticsPageComponent } from './collection-statistics-page/collection-statistics-page.component';
 import { CommunityPageResolver } from '../+community-page/community-page.resolver';
-import { CommunityStatisticsPageComponent } from './community-statistics-page/community-statistics-page.component';
+import { ThemedCollectionStatisticsPageComponent } from './collection-statistics-page/themed-collection-statistics-page.component';
+import { ThemedCommunityStatisticsPageComponent } from './community-statistics-page/themed-community-statistics-page.component';
+import { ThemedItemStatisticsPageComponent } from './item-statistics-page/themed-item-statistics-page.component';
+import { ThemedSiteStatisticsPageComponent } from './site-statistics-page/themed-site-statistics-page.component';
 
 @NgModule({
   imports: [
@@ -27,7 +27,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
           children: [
             {
               path: '',
-              component: SiteStatisticsPageComponent,
+              component: ThemedSiteStatisticsPageComponent,
             },
           ]
         },
@@ -41,7 +41,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: ItemStatisticsPageComponent,
+          component: ThemedItemStatisticsPageComponent,
         },
         {
           path: `collections/:id`,
@@ -53,7 +53,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: CollectionStatisticsPageComponent,
+          component: ThemedCollectionStatisticsPageComponent,
         },
         {
           path: `communities/:id`,
@@ -65,7 +65,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
             title: 'statistics.title',
             breadcrumbKey: 'statistics'
           },
-          component: CommunityStatisticsPageComponent,
+          component: ThemedCommunityStatisticsPageComponent,
         },
       ]
     )
@@ -75,6 +75,7 @@ import { CommunityStatisticsPageComponent } from './community-statistics-page/co
     I18nBreadcrumbsService,
     CollectionPageResolver,
     CommunityPageResolver,
+    ItemPageResolver
   ]
 })
 export class StatisticsPageRoutingModule {
diff --git a/src/app/statistics-page/statistics-page.module.ts b/src/app/statistics-page/statistics-page.module.ts
index 9957d4b0d7..863e17fcb5 100644
--- a/src/app/statistics-page/statistics-page.module.ts
+++ b/src/app/statistics-page/statistics-page.module.ts
@@ -10,13 +10,21 @@ import { StatisticsTableComponent } from './statistics-table/statistics-table.co
 import { ItemStatisticsPageComponent } from './item-statistics-page/item-statistics-page.component';
 import { CollectionStatisticsPageComponent } from './collection-statistics-page/collection-statistics-page.component';
 import { CommunityStatisticsPageComponent } from './community-statistics-page/community-statistics-page.component';
+import { ThemedCollectionStatisticsPageComponent } from './collection-statistics-page/themed-collection-statistics-page.component';
+import { ThemedCommunityStatisticsPageComponent } from './community-statistics-page/themed-community-statistics-page.component';
+import { ThemedItemStatisticsPageComponent } from './item-statistics-page/themed-item-statistics-page.component';
+import { ThemedSiteStatisticsPageComponent } from './site-statistics-page/themed-site-statistics-page.component';
 
 const components = [
   StatisticsTableComponent,
   SiteStatisticsPageComponent,
   ItemStatisticsPageComponent,
   CollectionStatisticsPageComponent,
-  CommunityStatisticsPageComponent
+  CommunityStatisticsPageComponent,
+  ThemedCollectionStatisticsPageComponent,
+  ThemedCommunityStatisticsPageComponent,
+  ThemedItemStatisticsPageComponent,
+  ThemedSiteStatisticsPageComponent
 ];
 
 @NgModule({
diff --git a/src/app/submission/edit/themed-submission-edit.component.ts b/src/app/submission/edit/themed-submission-edit.component.ts
new file mode 100644
index 0000000000..bbaf432c13
--- /dev/null
+++ b/src/app/submission/edit/themed-submission-edit.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Themed wrapper for SubmissionEditComponent
+ */
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionEditComponent } from './submission-edit.component';
+
+@Component({
+  selector: 'ds-themed-submission-edit',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionEditComponent extends ThemedComponent<SubmissionEditComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionEditComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/edit/submission-edit.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-edit.component`);
+  }
+}
diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html
index 459241ae1c..9771e34cec 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -1,6 +1,6 @@
 <div class="row" *ngIf="!!submissionId">
   <div class="col">
-    <button *ngIf="(showDepositAndDiscard | async)" type="button" class="btn btn-danger" (click)="$event.preventDefault();confirmDiscard(content)">{{'submission.general.discard.submit' | translate}}</button>
+    <!-- a class="btn btn-outline-primary" role="button" href="#"><i class="fas fa-times"></i> {{'submission.general.cancel' |translate}}</a -->
   </div>
   <div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
     <div class="progress w-75">
@@ -10,24 +10,32 @@
   </div>
   <div *ngIf="!(processingSaveStatus | async) && !(processingDepositStatus | async)" class="col text-right">
     <button type="button"
-            class="btn btn-info"
+            class="btn btn-secondary"
             id="save"
             [disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
             (click)="save($event)">
-      <span>{{'submission.general.save' | translate}}</span>
+      <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
     </button>
     <button type="button"
-            class="btn btn-info"
+            [class.btn-primary]="!(showDepositAndDiscard | async)"
+            [class.btn-secondary]="(showDepositAndDiscard | async)"
+            class="btn"
             id="saveForLater"
             [disabled]="(processingSaveStatus | async)"
             (click)="saveLater($event)">
-      <span>{{'submission.general.save-later' | translate}}</span>
+      <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
     </button>
     <button *ngIf="(showDepositAndDiscard | async)"
             type="button"
             class="btn btn-primary"
             [disabled]="(submissionIsInvalid | async)" (click)="deposit($event)">
-      <span>{{'submission.general.deposit' | translate}}</span>
+      <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
+    </button>
+    <button *ngIf="(showDepositAndDiscard | async)"
+            type="button"
+            class="btn btn-danger"
+            (click)="$event.preventDefault();confirmDiscard(content)">
+      <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
     </button>
   </div>
 </div>
diff --git a/src/app/submission/import-external/themed-submission-import-external.component.ts b/src/app/submission/import-external/themed-submission-import-external.component.ts
new file mode 100644
index 0000000000..698a64842d
--- /dev/null
+++ b/src/app/submission/import-external/themed-submission-import-external.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionImportExternalComponent } from './submission-import-external.component';
+
+/**
+ * Themed wrapper for SubmissionImportExternalComponent
+ */
+@Component({
+  selector: 'ds-themed-submission-import-external',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionImportExternalComponent extends ThemedComponent<SubmissionImportExternalComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionImportExternalComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/import-external/submission-import-external.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-import-external.component`);
+  }
+}
diff --git a/src/app/submission/sections/form/section-form-operations.service.spec.ts b/src/app/submission/sections/form/section-form-operations.service.spec.ts
index 580e3a9928..c76a15abcb 100644
--- a/src/app/submission/sections/form/section-form-operations.service.spec.ts
+++ b/src/app/submission/sections/form/section-form-operations.service.spec.ts
@@ -1,4 +1,4 @@
-import { waitForAsync, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import {
@@ -35,10 +35,10 @@ describe('SectionFormOperationsService test suite', () => {
   let serviceAsAny: any;
 
   const jsonPatchOpBuilder: any = jasmine.createSpyObj('jsonPatchOpBuilder', {
-    add: jasmine.createSpy('add'),
-    replace: jasmine.createSpy('replace'),
-    remove: jasmine.createSpy('remove'),
-  });
+      add: jasmine.createSpy('add'),
+      replace: jasmine.createSpy('replace'),
+      remove: jasmine.createSpy('remove'),
+    });
   const pathCombiner = new JsonPatchOperationPathCombiner('sections', 'test');
 
   const dynamicFormControlChangeEvent: DynamicFormControlEvent = {
diff --git a/src/app/submission/sections/form/section-form-operations.service.ts b/src/app/submission/sections/form/section-form-operations.service.ts
index d019663d6c..a1bb99e3cd 100644
--- a/src/app/submission/sections/form/section-form-operations.service.ts
+++ b/src/app/submission/sections/form/section-form-operations.service.ts
@@ -6,18 +6,10 @@ import {
   DYNAMIC_FORM_CONTROL_TYPE_GROUP,
   DynamicFormArrayGroupModel,
   DynamicFormControlEvent,
-  DynamicFormControlModel
+  DynamicFormControlModel, isDynamicFormControlEvent
 } from '@ng-dynamic-forms/core';
 
-import {
-  hasNoValue,
-  hasValue,
-  isNotEmpty,
-  isNotNull,
-  isNotUndefined,
-  isNull,
-  isUndefined
-} from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { FormFieldPreviousValueObject } from '../../../shared/form/builder/models/form-field-previous-value-object';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
@@ -30,6 +22,8 @@ import { DynamicQualdropModel } from '../../../shared/form/builder/ds-dynamic-fo
 import { DynamicRelationGroupModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { deepClone } from 'fast-json-patch';
+import { dateToString, isNgbDateStruct } from '../../../shared/date.util';
+import { DynamicRowArrayModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
 
 /**
  * The service handling all form section operations
@@ -71,8 +65,8 @@ export class SectionFormOperationsService {
       case 'change':
         this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue);
         break;
-      case 'add':
-        this.dispatchOperationsFromAddEvent(pathCombiner, event);
+      case 'move':
+        this.dispatchOperationsFromMoveEvent(pathCombiner, event, previousValue);
         break;
       default:
         break;
@@ -83,20 +77,29 @@ export class SectionFormOperationsService {
    * Return index if specified field is part of fields array
    *
    * @param event
-   *    the [[DynamicFormControlEvent]] for the specified operation
+   *    the [[DynamicFormControlEvent]] | CustomEvent for the specified operation
    * @return number
    *    the array index is part of array, zero otherwise
    */
-  public getArrayIndexFromEvent(event: DynamicFormControlEvent): number {
+  public getArrayIndexFromEvent(event: DynamicFormControlEvent | any): number {
     let fieldIndex: number;
+
     if (isNotEmpty(event)) {
-      if (isNull(event.context)) {
-        // Check whether model is part of an Array of group
-        if (this.isPartOfArrayOfGroup(event.model)) {
-          fieldIndex = (event.model.parent as any).parent.index;
+      if (isDynamicFormControlEvent(event)) {
+        // This is the case of a default insertItem/removeItem event
+
+        if (isNull(event.context)) {
+          // Check whether model is part of an Array of group
+          if (this.isPartOfArrayOfGroup(event.model)) {
+            fieldIndex = (event.model.parent as any).parent.index;
+          }
+        } else {
+          fieldIndex = event.context.index;
         }
+
       } else {
-        fieldIndex = event.context.index;
+        // This is the case of a custom event which contains indexes information
+        fieldIndex = event.index as any;
       }
     }
 
@@ -245,6 +248,8 @@ export class SectionFormOperationsService {
         // Language without Authority (input, textArea)
         fieldValue = new FormFieldMetadataValueObject(value, language);
       }
+    } else if (isNgbDateStruct(value)) {
+      fieldValue = new FormFieldMetadataValueObject(dateToString(value));
     } else if (value instanceof FormFieldLanguageValueObject || value instanceof VocabularyEntry
       || value instanceof VocabularyEntryDetail || isObject(value)) {
       fieldValue = value;
@@ -291,11 +296,19 @@ export class SectionFormOperationsService {
   protected dispatchOperationsFromRemoveEvent(pathCombiner: JsonPatchOperationPathCombiner,
                                               event: DynamicFormControlEvent,
                                               previousValue: FormFieldPreviousValueObject): void {
+
+    if (event.context && event.context instanceof DynamicFormArrayGroupModel) {
+      // Model is a DynamicRowArrayModel
+      this.handleArrayGroupPatch(pathCombiner, event, (event as any).context.context);
+      return;
+    }
+
     const path = this.getFieldPathFromEvent(event);
     const value = this.getFieldValueFromChangeEvent(event);
+    console.log(value);
     if (this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
       this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
-    } else if (isNotEmpty(value)) {
+    } else if ((isNotEmpty(value) && typeof value === 'string') || (isNotEmpty(value) && value instanceof FormFieldMetadataValueObject && value.hasValue())) {
       this.operationsBuilder.remove(pathCombiner.getPath(path));
     }
   }
@@ -352,17 +365,25 @@ export class SectionFormOperationsService {
                                               event: DynamicFormControlEvent,
                                               previousValue: FormFieldPreviousValueObject,
                                               hasStoredValue: boolean): void {
+
+   if (event.context && event.context instanceof DynamicFormArrayGroupModel) {
+      // Model is a DynamicRowArrayModel
+      this.handleArrayGroupPatch(pathCombiner, event, (event as any).context.context);
+      return;
+    }
+
     const path = this.getFieldPathFromEvent(event);
     const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(event);
     const value = this.getFieldValueFromChangeEvent(event);
     // Detect which operation must be dispatched
-    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)) {
+    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)
+      || this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
       // It's a qualdrup model
       this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
     } else if (this.formBuilder.isRelationGroup(event.model)) {
       // It's a relation model
       this.dispatchOperationsFromMap(this.getValueMap(value), pathCombiner, event, previousValue);
-    } else if (this.formBuilder.hasArrayGroupValue(event.model) && hasNoValue((event.model as any).relationshipConfig)) {
+    } else if (this.formBuilder.hasArrayGroupValue(event.model)) {
       // Model has as value an array, so dispatch an add operation with entire block of values
       this.operationsBuilder.add(
         pathCombiner.getPath(segmentedPath),
@@ -398,13 +419,21 @@ export class SectionFormOperationsService {
           value);
       }
       previousValue.delete();
-    } else if (value.hasValue() && (isUndefined(this.getArrayIndexFromEvent(event))
-        || this.getArrayIndexFromEvent(event) === 0)) {
+    } else if (value.hasValue()) {
+      // Here model has no previous value but a new one
+      if (isUndefined(this.getArrayIndexFromEvent(event))   || this.getArrayIndexFromEvent(event) === 0) {
         // Model is single field or is part of an array model but is the first item,
         // so dispatch an add operation that initialize the values of a specific metadata
         this.operationsBuilder.add(
           pathCombiner.getPath(segmentedPath),
           value, true);
+      } else {
+        // Model is part of an array model but is not the first item,
+        // so dispatch an add operation that add a value to an existent metadata
+        this.operationsBuilder.add(
+          pathCombiner.getPath(path),
+          value);
+      }
     }
   }
 
@@ -454,4 +483,38 @@ export class SectionFormOperationsService {
 
     previousValue.delete();
   }
+
+  /**
+   * Handle form move operations
+   *
+   * @param pathCombiner
+   *    the [[JsonPatchOperationPathCombiner]] object for the specified operation
+   * @param event
+   *    the [[DynamicFormControlEvent]] for the specified operation
+   * @param previousValue
+   *    the [[FormFieldPreviousValueObject]] for the specified operation
+   */
+  private dispatchOperationsFromMoveEvent(pathCombiner: JsonPatchOperationPathCombiner,
+                                          event: DynamicFormControlEvent,
+                                          previousValue: FormFieldPreviousValueObject) {
+
+    return this.handleArrayGroupPatch(pathCombiner, event.$event, (event as any).$event.arrayModel);
+  }
+
+  /**
+   * Specific patch handler for a DynamicRowArrayModel.
+   * Configure a Patch ADD with the current array value.
+   * @param pathCombiner
+   * @param event
+   * @param model
+   */
+  private handleArrayGroupPatch(pathCombiner: JsonPatchOperationPathCombiner,
+                                event,
+                                model: DynamicRowArrayModel) {
+    const arrayValue = this.formBuilder.getValueFromModel([model]);
+    const segmentedPath2 = this.getFieldPathSegmentedFromChangeEvent(event);
+    this.operationsBuilder.add(
+      pathCombiner.getPath(segmentedPath2),
+      arrayValue[segmentedPath2], false);
+  }
 }
diff --git a/src/app/submission/sections/form/section-form.component.html b/src/app/submission/sections/form/section-form.component.html
index 166e52675b..cd7b45bb00 100644
--- a/src/app/submission/sections/form/section-form.component.html
+++ b/src/app/submission/sections/form/section-form.component.html
@@ -3,7 +3,9 @@
          [formId]="formId"
          [formModel]="formModel"
          [displaySubmit]="false"
+         [displayCancel]="false"
          (dfChange)="onChange($event)"
          (dfFocus)="onFocus($event)"
          (remove)="onRemove($event)"
+         (ngbEvent)="onCustomEvent($event)"
          (removeArrayItem)="onRemove($event)"></ds-form>
diff --git a/src/app/submission/sections/form/section-form.component.ts b/src/app/submission/sections/form/section-form.component.ts
index c3d4575148..99a2e12b47 100644
--- a/src/app/submission/sections/form/section-form.component.ts
+++ b/src/app/submission/sections/form/section-form.component.ts
@@ -19,7 +19,7 @@ import { FormComponent } from '../../../shared/form/form.component';
 import { FormService } from '../../../shared/form/form.service';
 import { SectionModelComponent } from '../models/section.model';
 import { SubmissionFormsConfigService } from '../../../core/config/submission-forms-config.service';
-import { hasNoValue, hasValue, isNotEmpty, isUndefined } from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../../../shared/empty.util';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { SubmissionFormsModel } from '../../../core/config/models/config-submission-forms.model';
 import { SubmissionSectionError, SubmissionSectionObject } from '../../objects/submission-objects.reducer';
@@ -359,19 +359,16 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
    *    the [[DynamicFormControlEvent]] emitted
    */
   onChange(event: DynamicFormControlEvent): void {
-    // don't handle change events for things with an index < 0, those are template rows.
-    if (hasNoValue(event.context) || hasNoValue(event.context.index) || event.context.index >= 0) {
-      this.formOperationsService.dispatchOperationsFromEvent(
-        this.pathCombiner,
-        event,
-        this.previousValue,
-        this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event)));
-      const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
-      const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
+    this.formOperationsService.dispatchOperationsFromEvent(
+      this.pathCombiner,
+      event,
+      this.previousValue,
+      this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event)));
+    const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
+    const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
 
-      if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) {
-        this.submissionService.dispatchSave(this.submissionId);
-      }
+    if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) {
+      this.submissionService.dispatchSave(this.submissionId);
     }
   }
 
@@ -451,4 +448,17 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
   isFieldToRemove(fieldId, index) {
     return this.fieldsOnTheirWayToBeRemoved.has(fieldId) && this.fieldsOnTheirWayToBeRemoved.get(fieldId).includes(index);
   }
+
+  /**
+   * Handle the customEvent (ex. drag-drop move event).
+   * The customEvent is stored inside event.$event
+   * @param $event
+   */
+  onCustomEvent(event: DynamicFormControlEvent) {
+    this.formOperationsService.dispatchOperationsFromEvent(
+      this.pathCombiner,
+      event,
+      this.previousValue,
+      null);
+  }
 }
diff --git a/src/app/submission/sections/license/section-license.component.html b/src/app/submission/sections/license/section-license.component.html
index 7b0faad5e3..b8d0f601d2 100644
--- a/src/app/submission/sections/license/section-license.component.html
+++ b/src/app/submission/sections/license/section-license.component.html
@@ -5,4 +5,5 @@
          [formModel]="formModel"
          [formLayout]="formLayout"
          [displaySubmit]="displaySubmit"
+         [displayCancel]="false"
          (dfChange)="onChange($event)"></ds-form>
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
index bfb322052c..f6e0646974 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
@@ -4,5 +4,6 @@
            [formId]="formId"
            [formModel]="formModel"
            [displaySubmit]="false"
+           [displayCancel]="false"
            (dfChange)="onChange($event)"></ds-form>
 </div>
diff --git a/src/app/submission/submission.module.ts b/src/app/submission/submission.module.ts
index 32c11d6673..13cf2016dd 100644
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -34,6 +34,36 @@ import { SubmissionImportExternalCollectionComponent } from './import-external/i
 import { SubmissionSectionCcLicensesComponent } from './sections/cc-license/submission-section-cc-licenses.component';
 import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from '../entity-groups/research-entities/research-entities.module';
+import { ThemedSubmissionEditComponent } from './edit/themed-submission-edit.component';
+import { ThemedSubmissionSubmitComponent } from './submit/themed-submission-submit.component';
+import { ThemedSubmissionImportExternalComponent } from './import-external/themed-submission-import-external.component';
+
+const DECLARATIONS = [
+  SubmissionSectionUploadAccessConditionsComponent,
+  SubmissionSectionUploadComponent,
+  SubmissionSectionformComponent,
+  SubmissionSectionLicenseComponent,
+  SubmissionSectionCcLicensesComponent,
+  SectionsDirective,
+  SubmissionEditComponent,
+  ThemedSubmissionEditComponent,
+  SubmissionFormSectionAddComponent,
+  SubmissionFormCollectionComponent,
+  SubmissionFormComponent,
+  SubmissionFormFooterComponent,
+  SubmissionSubmitComponent,
+  ThemedSubmissionSubmitComponent,
+  SubmissionUploadFilesComponent,
+  SubmissionSectionContainerComponent,
+  SubmissionSectionUploadFileComponent,
+  SubmissionSectionUploadFileEditComponent,
+  SubmissionSectionUploadFileViewComponent,
+  SubmissionImportExternalComponent,
+  ThemedSubmissionImportExternalComponent,
+  SubmissionImportExternalSearchbarComponent,
+  SubmissionImportExternalPreviewComponent,
+  SubmissionImportExternalCollectionComponent
+];
 
 @NgModule({
   imports: [
@@ -45,35 +75,8 @@ import { ResearchEntitiesModule } from '../entity-groups/research-entities/resea
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
   ],
-  declarations: [
-    SubmissionSectionUploadAccessConditionsComponent,
-    SubmissionSectionUploadComponent,
-    SubmissionSectionformComponent,
-    SubmissionSectionLicenseComponent,
-    SubmissionSectionCcLicensesComponent,
-    SectionsDirective,
-    SubmissionEditComponent,
-    SubmissionFormSectionAddComponent,
-    SubmissionFormCollectionComponent,
-    SubmissionFormComponent,
-    SubmissionFormFooterComponent,
-    SubmissionSubmitComponent,
-    SubmissionUploadFilesComponent,
-    SubmissionSectionContainerComponent,
-    SubmissionSectionUploadFileComponent,
-    SubmissionSectionUploadFileEditComponent,
-    SubmissionSectionUploadFileViewComponent,
-    SubmissionImportExternalComponent,
-    SubmissionImportExternalSearchbarComponent,
-    SubmissionImportExternalPreviewComponent,
-    SubmissionImportExternalCollectionComponent
-  ],
-  exports: [
-    SubmissionEditComponent,
-    SubmissionFormComponent,
-    SubmissionSubmitComponent,
-    SubmissionImportExternalComponent
-  ],
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
   providers: [
     SectionUploadService,
     SectionsService,
diff --git a/src/app/submission/submit/themed-submission-submit.component.ts b/src/app/submission/submit/themed-submission-submit.component.ts
new file mode 100644
index 0000000000..328113252f
--- /dev/null
+++ b/src/app/submission/submit/themed-submission-submit.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { SubmissionSubmitComponent } from './submission-submit.component';
+
+/**
+ * Themed wrapper for SubmissionSubmitComponent
+ */
+@Component({
+  selector: 'ds-themed-submission-submit',
+  styleUrls: [],
+  templateUrl: './../../shared/theme-support/themed.component.html'
+})
+export class ThemedSubmissionSubmitComponent extends ThemedComponent<SubmissionSubmitComponent> {
+  protected getComponentName(): string {
+    return 'SubmissionSubmitComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/submission/submit/submission-submit.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./submission-submit.component`);
+  }
+}
diff --git a/src/assets/i18n/ar.json5 b/src/assets/i18n/ar.json5
index c4ea2a0d9e..8383c440cd 100644
--- a/src/assets/i18n/ar.json5
+++ b/src/assets/i18n/ar.json5
@@ -3180,9 +3180,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/cs.json5 b/src/assets/i18n/cs.json5
index 9bc6ea36ed..2c7ca09930 100644
--- a/src/assets/i18n/cs.json5
+++ b/src/assets/i18n/cs.json5
@@ -3120,9 +3120,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/de.json5 b/src/assets/i18n/de.json5
index 4a5b799c29..306f1fcc51 100644
--- a/src/assets/i18n/de.json5
+++ b/src/assets/i18n/de.json5
@@ -2789,9 +2789,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Speichern",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index a16d41a9e3..2924a3a47e 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -106,7 +106,7 @@
 
   "admin.registries.bitstream-formats.table.name": "Name",
 
-  "admin.registries.bitstream-formats.table.return": "Return",
+  "admin.registries.bitstream-formats.table.return": "Back",
 
   "admin.registries.bitstream-formats.table.supportLevel.KNOWN": "Known",
 
@@ -116,7 +116,7 @@
 
   "admin.registries.bitstream-formats.table.supportLevel.head": "Support Level",
 
-  "admin.registries.bitstream-formats.title": "DSpace Angular :: Bitstream Format Registry",
+  "admin.registries.bitstream-formats.title": "Bitstream Format Registry",
 
 
 
@@ -144,7 +144,7 @@
 
   "admin.registries.metadata.schemas.table.namespace": "Namespace",
 
-  "admin.registries.metadata.title": "DSpace Angular :: Metadata Registry",
+  "admin.registries.metadata.title": "Metadata Registry",
 
 
 
@@ -194,9 +194,9 @@
 
   "admin.registries.schema.notification.success": "Success",
 
-  "admin.registries.schema.return": "Return",
+  "admin.registries.schema.return": "Back",
 
-  "admin.registries.schema.title": "DSpace Angular :: Metadata Schema Registry",
+  "admin.registries.schema.title": "Metadata Schema Registry",
 
 
 
@@ -208,7 +208,9 @@
 
   "admin.access-control.epeople.actions.stop-impersonating": "Stop impersonating EPerson",
 
-  "admin.access-control.epeople.title": "DSpace Angular :: EPeople",
+  "admin.access-control.epeople.breadcrumbs": "EPeople",
+
+  "admin.access-control.epeople.title": "EPeople",
 
   "admin.access-control.epeople.head": "EPeople",
 
@@ -222,6 +224,8 @@
 
   "admin.access-control.epeople.search.button": "Search",
 
+  "admin.access-control.epeople.search.placeholder": "Search people...",
+
   "admin.access-control.epeople.button.add": "Add EPerson",
 
   "admin.access-control.epeople.table.id": "ID",
@@ -254,6 +258,8 @@
 
   "admin.access-control.epeople.form.requireCertificate": "Requires certificate",
 
+  "admin.access-control.epeople.form.return": "Back",
+
   "admin.access-control.epeople.form.notification.created.success": "Successfully created EPerson \"{{name}}\"",
 
   "admin.access-control.epeople.form.notification.created.failure": "Failed to create EPerson \"{{name}}\"",
@@ -286,11 +292,17 @@
 
 
 
-  "admin.access-control.groups.title": "DSpace Angular :: Groups",
+  "admin.access-control.groups.title": "Groups",
 
-  "admin.access-control.groups.title.singleGroup": "DSpace Angular :: Edit Group",
+  "admin.access-control.groups.breadcrumbs": "Groups",
 
-  "admin.access-control.groups.title.addGroup": "DSpace Angular :: New Group",
+  "admin.access-control.groups.singleGroup.breadcrumbs": "Edit Group",
+
+  "admin.access-control.groups.title.singleGroup": "Edit Group",
+
+  "admin.access-control.groups.title.addGroup": "New Group",
+
+  "admin.access-control.groups.addGroup.breadcrumbs": "New Group",
 
   "admin.access-control.groups.head": "Groups",
 
@@ -302,6 +314,8 @@
 
   "admin.access-control.groups.search.button": "Search",
 
+  "admin.access-control.groups.search.placeholder": "Search groups...",
+
   "admin.access-control.groups.table.id": "ID",
 
   "admin.access-control.groups.table.name": "Name",
@@ -442,7 +456,7 @@
 
   "admin.access-control.groups.form.subgroups-list.no-subgroups-yet": "No subgroups in group yet.",
 
-  "admin.access-control.groups.form.return": "Return to groups",
+  "admin.access-control.groups.form.return": "Back",
 
 
 
@@ -497,7 +511,7 @@
 
   "admin.metadata-import.page.dropMsgReplace": "Drop to replace the metadata CSV to import",
 
-  "admin.metadata-import.page.button.return": "Return",
+  "admin.metadata-import.page.button.return": "Back",
 
   "admin.metadata-import.page.button.proceed": "Proceed",
 
@@ -576,10 +590,16 @@
 
   "browse.metadata.title.breadcrumbs": "Browse by Title",
 
+  "browse.next.button": "Next",
+
+  "browse.previous.button": "Previous",
+
   "browse.startsWith.choose_start": "(Choose start)",
 
   "browse.startsWith.choose_year": "(Choose year)",
 
+  "browse.startsWith.choose_year.label": "Choose the issue year",
+
   "browse.startsWith.jump": "Jump to a point in the index:",
 
   "browse.startsWith.months.april": "April",
@@ -602,17 +622,21 @@
 
   "browse.startsWith.months.none": "(Choose month)",
 
+  "browse.startsWith.months.none.label": "Choose the issue month",
+
   "browse.startsWith.months.november": "November",
 
   "browse.startsWith.months.october": "October",
 
   "browse.startsWith.months.september": "September",
 
-  "browse.startsWith.submit": "Go",
+  "browse.startsWith.submit": "Browse",
 
-  "browse.startsWith.type_date": "Or type in a date (year-month):",
+  "browse.startsWith.type_date": "Or type in a date (year-month) and click 'Browse'",
 
-  "browse.startsWith.type_text": "Or enter first few letters:",
+  "browse.startsWith.type_date.label": "Or type in a date (year-month) and click on the Browse button",
+
+  "browse.startsWith.type_text": "Type the first few letters and click on the Browse button",
 
   "browse.title": "Browsing {{ collection }} by {{ field }} {{ value }}",
 
@@ -685,12 +709,18 @@
 
   "collection.edit.item-mapper.remove": "Remove selected item mappings",
 
+  "collection.edit.item-mapper.search-form.placeholder": "Search items...",
+
   "collection.edit.item-mapper.tabs.browse": "Browse mapped items",
 
   "collection.edit.item-mapper.tabs.map": "Map new items",
 
 
 
+  "collection.edit.logo.delete.title": "Delete logo",
+
+  "collection.edit.logo.delete-undo.title": "Undo delete",
+
   "collection.edit.logo.label": "Collection logo",
 
   "collection.edit.logo.notifications.add.error": "Uploading Collection logo failed. Please verify the content before retrying.",
@@ -709,7 +739,7 @@
 
   "collection.edit.notifications.success": "Successfully edited the Collection",
 
-  "collection.edit.return": "Return",
+  "collection.edit.return": "Back",
 
 
 
@@ -777,10 +807,14 @@
 
   "collection.edit.template.edit-button": "Edit",
 
+  "collection.edit.template.error": "An error occurred retrieving the template item",
+
   "collection.edit.template.head": "Edit Template Item for Collection \"{{ collection }}\"",
 
   "collection.edit.template.label": "Template item",
 
+  "collection.edit.template.loading": "Loading template item...",
+
   "collection.edit.template.notifications.delete.error": "Failed to delete the item template",
 
   "collection.edit.template.notifications.delete.success": "Successfully deleted the item template",
@@ -839,7 +873,9 @@
 
 
 
-  "communityList.tabTitle": "DSpace - Community List",
+  "communityList.breadcrumbs": "Community List",
+
+  "communityList.tabTitle": "Community List",
 
   "communityList.title": "List of Communities",
 
@@ -874,6 +910,10 @@
   "community.edit.breadcrumbs": "Edit Community",
 
 
+  "community.edit.logo.delete.title": "Delete logo",
+
+  "community.edit.logo.delete-undo.title": "Undo delete",
+
   "community.edit.logo.label": "Community logo",
 
   "community.edit.logo.notifications.add.error": "Uploading Community logo failed. Please verify the content before retrying.",
@@ -896,7 +936,7 @@
 
   "community.edit.notifications.error": "An error occured while editing the Community",
 
-  "community.edit.return": "Return",
+  "community.edit.return": "Back",
 
 
 
@@ -1098,6 +1138,10 @@
 
 
 
+  "dso.name.untitled": "Untitled",
+
+
+
   "dso-selector.create.collection.head": "New collection",
 
   "dso-selector.create.collection.sub-level": "Create a new collection in",
@@ -1215,7 +1259,7 @@
 
   "forgot-email.form.email.hint": "This address will be verified and used as your login name.",
 
-  "forgot-email.form.submit": "Submit",
+  "forgot-email.form.submit": "Save",
 
   "forgot-email.form.success.head": "Verification email sent",
 
@@ -1259,7 +1303,7 @@
 
 
 
-  "form.add": "Add",
+  "form.add": "Add more",
 
   "form.add-help": "Click here to add the current entry and to add another one",
 
@@ -1269,6 +1313,8 @@
 
   "form.clear-help": "Click here to remove the selected value",
 
+  "form.discard": "Discard",
+
   "form.edit": "Edit",
 
   "form.edit-help": "Click here to edit the selected value",
@@ -1307,15 +1353,18 @@
 
   "form.search-help": "Click here to look for an existing correspondence",
 
-  "form.submit": "Submit",
+  "form.submit": "Save",
 
+  "form.repeatable.sort.tip": "Drop the item in the new position",
 
 
   "home.description": "",
 
   "home.breadcrumbs": "Home",
 
-  "home.title": "DSpace Angular :: Home",
+  "home.search-form.placeholder": "Search the repository ...",
+
+  "home.title": "Home",
 
   "home.top-level-communities.head": "Communities in DSpace",
 
@@ -1467,6 +1516,8 @@
 
   "item.edit.breadcrumbs": "Edit Item",
 
+  "item.edit.tabs.disabled.tooltip": "You don't have permission to access this tab",
+
 
   "item.edit.tabs.mapper.head": "Collection Mapper",
 
@@ -1502,6 +1553,8 @@
 
   "item.edit.item-mapper.notifications.remove.success.head": "Removal of mapping completed",
 
+  "item.edit.item-mapper.search-form.placeholder": "Search collections...",
+
   "item.edit.item-mapper.tabs.browse": "Browse mapped collections",
 
   "item.edit.item-mapper.tabs.map": "Map new collections",
@@ -1658,9 +1711,11 @@
 
   "item.edit.relationships.save-button": "Save",
 
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
 
 
+  "item.edit.return": "Back",
+
 
   "item.edit.tabs.bitstreams.head": "Bitstreams",
 
@@ -1768,7 +1823,7 @@
 
   "item.search.results.head": "Item Search Results",
 
-  "item.search.title": "DSpace Angular :: Item Search",
+  "item.search.title": "Item Search",
 
 
 
@@ -1866,7 +1921,7 @@
 
   "item.version.history.head": "Version History",
 
-  "item.version.history.return": "Return",
+  "item.version.history.return": "Back",
 
   "item.version.history.selected": "Selected version",
 
@@ -1902,7 +1957,7 @@
 
   "journal.search.results.head": "Journal Search Results",
 
-  "journal.search.title": "DSpace Angular :: Journal Search",
+  "journal.search.title": "Journal Search",
 
 
 
@@ -2008,10 +2063,12 @@
 
 
 
-  "menu.header.admin": "Admin",
+  "menu.header.admin": "Management",
 
   "menu.header.image.logo": "Repository logo",
 
+  "menu.header.admin.description": "Management menu",
+
 
 
   "menu.section.access_control": "Access Control",
@@ -2178,6 +2235,8 @@
   "menu.section.workflow": "Administer Workflow",
 
 
+  "mydspace.breadcrumbs": "MyDSpace",
+
   "mydspace.description": "",
 
   "mydspace.general.text-here": "here",
@@ -2232,6 +2291,8 @@
 
   "mydspace.results.no-uri": "No Uri",
 
+  "mydspace.search-form.placeholder": "Search in mydspace...",
+
   "mydspace.show.workflow": "All tasks",
 
   "mydspace.show.workspace": "Your Submissions",
@@ -2270,7 +2331,9 @@
 
   "nav.login": "Log In",
 
-  "nav.logout": "Log Out",
+  "nav.logout": "User profile menu and Log Out",
+
+  "nav.main.description": "Main navigation bar",
 
   "nav.mydspace": "MyDSpace",
 
@@ -2282,6 +2345,8 @@
 
   "nav.stop-impersonating": "Stop impersonating EPerson",
 
+  "nav.user.description" : "User profile bar",
+
 
 
   "orgunit.listelement.badge": "Organizational Unit",
@@ -2302,6 +2367,8 @@
 
 
 
+  "pagination.options.description": "Pagination options",
+
   "pagination.results-per-page": "Results Per Page",
 
   "pagination.showing.detail": "{{ range }} of {{ total }}",
@@ -2338,7 +2405,7 @@
 
   "person.search.results.head": "Person Search Results",
 
-  "person.search.title": "DSpace Angular :: Person Search",
+  "person.search.title": "Person Search",
 
 
 
@@ -2346,7 +2413,7 @@
 
   "process.new.cancel": "Cancel",
 
-  "process.new.submit": "Submit",
+  "process.new.submit": "Save",
 
   "process.new.select-script": "Script",
 
@@ -2439,7 +2506,7 @@
 
   "profile.card.security": "Security",
 
-  "profile.form.submit": "Update Profile",
+  "profile.form.submit": "Save",
 
   "profile.groups.head": "Authorization groups you belong to",
 
@@ -2533,7 +2600,14 @@
 
   "publication.search.results.head": "Publication Search Results",
 
-  "publication.search.title": "DSpace Angular :: Publication Search",
+  "publication.search.title": "Publication Search",
+
+
+  "media-viewer.next": "Next",
+
+  "media-viewer.previous": "Previous",
+
+  "media-viewer.playlist": "Playlist",
 
 
   "register-email.title": "New user registration",
@@ -2642,6 +2716,10 @@
   "relationships.isContributorOf": "Contributors",
 
 
+  "repository.image.logo": "Repository logo",
+
+  "repository.title.prefix": "DSpace Angular :: ",
+
 
   "resource-policies.add.button": "Add",
 
@@ -2749,10 +2827,12 @@
 
   "search.switch-configuration.title": "Show",
 
-  "search.title": "DSpace Angular :: Search",
+  "search.title": "Search",
 
   "search.breadcrumbs": "Search",
 
+  "search.search-form.placeholder": "Search the repository ...",
+
 
   "search.filters.applied.f.author": "Author",
 
@@ -2794,6 +2874,8 @@
 
   "search.filters.filter.birthDate.placeholder": "Birth Date",
 
+  "search.filters.filter.collapse": "Collapse filter",
+
   "search.filters.filter.creativeDatePublished.head": "Date Published",
 
   "search.filters.filter.creativeDatePublished.placeholder": "Date Published",
@@ -2828,6 +2910,8 @@
 
   "search.filters.filter.entityType.placeholder": "Item Type",
 
+  "search.filters.filter.expand": "Expand filter",
+
   "search.filters.filter.has_content_in_original_bundle.head": "Has files",
 
   "search.filters.filter.itemtype.head": "Type",
@@ -2907,9 +2991,7 @@
 
   "search.form.search": "Search",
 
-  "search.form.search_dspace": "Search DSpace",
-
-  "search.form.search_mydspace": "Search MyDSpace",
+  "search.form.search_dspace": "All repository",
 
 
 
@@ -2983,8 +3065,12 @@
 
 
 
+  "submission.edit.breadcrumbs": "Edit Submission",
+
   "submission.edit.title": "Edit Submission",
 
+  "submission.general.cancel": "Cancel",
+
   "submission.general.cannot_submit": "You have not the privilege to make a new submission.",
 
   "submission.general.deposit": "Deposit",
@@ -3118,6 +3204,8 @@
 
   "submission.sections.describe.relationship-lookup.search-tab.search": "Go",
 
+  "submission.sections.describe.relationship-lookup.search-tab.search-form.placeholder": "Search...",
+
   "submission.sections.describe.relationship-lookup.search-tab.select-all": "Select all",
 
   "submission.sections.describe.relationship-lookup.search-tab.select-page": "Select page",
@@ -3165,6 +3253,8 @@
 
   "submission.sections.describe.relationship-lookup.search-tab.tab-title.isChildOrgUnitOf": "Search for Organizational Units",
 
+  "submission.sections.describe.relationship-lookup.selection-tab.search-form.placeholder": "Search...",
+
   "submission.sections.describe.relationship-lookup.selection-tab.tab-title": "Current Selection ({{ count }})",
 
   "submission.sections.describe.relationship-lookup.title.isJournalIssueOfPublication": "Journal Issues",
@@ -3361,7 +3451,9 @@
 
 
 
-  "submission.submit.title": "Submission",
+  "submission.submit.breadcrumbs": "New submission",
+
+  "submission.submit.title": "New submission",
 
 
 
@@ -3467,6 +3559,10 @@
 
 
 
+  "workflow-item.edit.breadcrumbs": "Edit workflowitem",
+
+  "workflow-item.edit.title": "Edit workflowitem",
+
   "workflow-item.delete.notification.success.title": "Deleted",
 
   "workflow-item.delete.notification.success.content": "This workflow item was successfully deleted",
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
index dedf74d32d..5edaaf0cf1 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -2861,9 +2861,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Guardar",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/fi.json5 b/src/assets/i18n/fi.json5
index 4932e49bbc..89d5955725 100644
--- a/src/assets/i18n/fi.json5
+++ b/src/assets/i18n/fi.json5
@@ -2625,9 +2625,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Tallenna",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/fr.json5 b/src/assets/i18n/fr.json5
index 42fad7c682..7b43330e10 100644
--- a/src/assets/i18n/fr.json5
+++ b/src/assets/i18n/fr.json5
@@ -2864,9 +2864,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Sauvegarder",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/hu.json5 b/src/assets/i18n/hu.json5
index 6fec12cf21..15b05c93e8 100644
--- a/src/assets/i18n/hu.json5
+++ b/src/assets/i18n/hu.json5
@@ -2430,8 +2430,8 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Mentés",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
-  "item.edit.relationships.no-entity-type": "Adja hozzá a 'relationship.type' metaadatot ezen elem hivatkozásánek engedélyezéséhez",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Adja hozzá a 'dspace.entity.type' metaadatot ezen elem hivatkozásánek engedélyezéséhez",
   
   
   
diff --git a/src/assets/i18n/ja.json5 b/src/assets/i18n/ja.json5
index c4ea2a0d9e..8383c440cd 100644
--- a/src/assets/i18n/ja.json5
+++ b/src/assets/i18n/ja.json5
@@ -3180,9 +3180,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/lv.json5 b/src/assets/i18n/lv.json5
index 898b8db31a..ff998ab774 100644
--- a/src/assets/i18n/lv.json5
+++ b/src/assets/i18n/lv.json5
@@ -2620,9 +2620,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Saglabāt",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/nl.json5 b/src/assets/i18n/nl.json5
index b831dbb3ad..8acbe901f0 100644
--- a/src/assets/i18n/nl.json5
+++ b/src/assets/i18n/nl.json5
@@ -2860,9 +2860,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Opslaan",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/pl.json5 b/src/assets/i18n/pl.json5
index c4ea2a0d9e..8383c440cd 100644
--- a/src/assets/i18n/pl.json5
+++ b/src/assets/i18n/pl.json5
@@ -3180,9 +3180,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
index 3b152196bd..4c7d75e11a 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -2818,9 +2818,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Salvar",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/pt-PT.json5 b/src/assets/i18n/pt-PT.json5
index 3b152196bd..4c7d75e11a 100644
--- a/src/assets/i18n/pt-PT.json5
+++ b/src/assets/i18n/pt-PT.json5
@@ -2818,9 +2818,9 @@
   // "item.edit.relationships.save-button": "Save",
   "item.edit.relationships.save-button": "Salvar",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/sw.json5 b/src/assets/i18n/sw.json5
index c4ea2a0d9e..8383c440cd 100644
--- a/src/assets/i18n/sw.json5
+++ b/src/assets/i18n/sw.json5
@@ -3180,9 +3180,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/i18n/tr.json5 b/src/assets/i18n/tr.json5
index c4ea2a0d9e..8383c440cd 100644
--- a/src/assets/i18n/tr.json5
+++ b/src/assets/i18n/tr.json5
@@ -3180,9 +3180,9 @@
   // TODO New key - Add a translation
   "item.edit.relationships.save-button": "Save",
   
-  // "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  // "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   // TODO New key - Add a translation
-  "item.edit.relationships.no-entity-type": "Add 'relationship.type' metadata to enable relationships for this item",
+  "item.edit.relationships.no-entity-type": "Add 'dspace.entity.type' metadata to enable relationships for this item",
   
   
   
diff --git a/src/assets/images/replacement_audio.svg b/src/assets/images/replacement_audio.svg
new file mode 100644
index 0000000000..03899914c9
--- /dev/null
+++ b/src/assets/images/replacement_audio.svg
@@ -0,0 +1,9 @@
+<svg width="240" height="180" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="240" height="180" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00416667 0.00555556)"/>
+</pattern>
+<image id="image0" width="240" height="180" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAC0CAYAAACqnKHoAAAHbUlEQVR4nO3dD0/TWhzG8Sp3YFgMZLKgy4R44/t/RcSJLMjCrowgRFjQm6dxxr/sd2rX9lm/n8TkJuoFKl9Oe85p+2h2cfElA2DpMf9sgC8CBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwY+4d/PMh8Ps8+ffqU//eTJ0+yTqfDcTFAwMhml5fZ6enpDweiu72d9Xq97OnTpxygBiPglru5ufklXrm+ucl/bXY62V6/n+3u7LT9UDUS18At99+HDw8egLv5PA/8+Pg4jx3NQsAt9/n+PnQANBq/PT7OJpNJdh/8O1g9AkYSjdij0ejbhBfqRcAtV2S2WafVb0ajfPIL9SLgltNMc1G6Nv7dBBiq82h2cfGF4+1N16SXl5ffrk273W62vb0d/pqurq7yEO8/fy50HDRDvb+/n21sbKz/wW4YAjana1HNEP8cn9Zxh8NhUlQ6JZ6en+enyKm0+ePw4ICIK0bAxv4U78KzXi8fGVMVDVkj8WAwaPW/SdW4Bja1LF6ZzWaFvjiF+Pr166y/t5f09363owurRcCGIvFK0WvahX6/n/376lV+ehyliD8s2RyC8hCwmWi8ZVlc26bsiT6bTFgnrggBG6k63gVNTL0cDpP2Q4/HY3ZsVYCATdQV7/c0QRWNWBNg0+m0qk+ttQjYQBPiXUiJWNsuuQFitQi44ZoU74Iijl4T63oYq0PADdbEeBcGL16EZqf1NbBnenUIuKGqilfrtkUC08SWIo7QphCsBgE3UJUj7/y7G/ZTZ401Akc2e2hCi1F4NQi4Yeo6bdYN+0dHR8nrt9rssRm4JfGy4K4wPIyAG6Tua1593CKPztEzs5bRD4h5gZsk8DAealcyfZPq9jzFmPoNq79T94SVPv7JyUl2eHgY3kKpZaXIzQ/aYlnk5gr8GQGXSNd5k7OzRs4ap1iMxLqhIXp7oEbhZTcy6AcbAZeLU+iSaLRdh3gX9HVoO2SURuGNxw9/O9199/B4lIOAS6Jb99Yl3gVdt6bMHkc2d7Azq1wEXJJ1naBJWcONBHxNwKUi4JKsa8Apa7gKeNlp9M31dUmfGTICRkTKGu6ymWtdZnCbYXkIGEulrOFGnoZ5e3vLQS8JASMkeu0aWTsu8tRL/B4BI+Q2uPwTWTee391x0EtCwAiJrt+mPFAef4+AAWMEDBgjYMAYAQPGCBgwRsAIid4bzM0K1SJghGwFA45sk+xsbnLQS0LACOkG13cj68WRZ2ghhoCxlOLtBKOLnEJvbW1x0EtCwFhqZ3c3fJCWjcAafXmLf3kIuCTREcqNgou+C0nPvFr2VJLotTRiCLgkKS/BdhJ5ZOyCAl4mei2NGAIuSeRpFG4UW8o7gSMBc7NDuQi4JDqF3n/+fG0i1tcxHA7Df16P3Vl2+qzT8XU9U6kLz4UukUYrjVr5tWCBx8bowedNeLKl4tWD3VMmmyIPv4u+khRxBFwyjcS9Xq/Q/1Tf4HW/TnQRb8pIqdE38pSNoscFf8YpdIMomnzkq+k0vEi8WXD0TVlLRhwBN0xdEWv016tUUuM9D7wTKUtcS0YcATdQlRHrY70cDvNfqRsstGnjfDpd+udS1pKRhoAbqqqI9bKxIpNLmqQ7ff8+9GdT1pKRhoAbrO5r4oco3siNC/oaGH1Xh4AbrokR6zWikU0b8pzXia4UARtoUsSKN/qupGe9HjuvVoyATTQh4pR4NXG1t7e38s+p7QjYSF0Ra8LqZDxOelfwsMCsNtIRsJnUiP/2taeaqDp+9y58zZt9ve5lz3M1CNhQNGL9/t/sftImjTejUfi1KtnX/eBsmawOAZuKRLxbcPeTTpWPjo5CmzR++Hg7O9lgMFiDo+vj0ezi4kvbD4IzjY7j8fiX7YxFYlK40+DWyJ/lP1AODrjurRgBrwFNMl19/PjttZ3dbjdp+UbXt5phLnoXlH5YaEcX8VaP2wnXgMIputtJI7hmmIvitLleBNxyeohAUQqXbZL1IuCWK7LMpE0aWudlqah+BIwk2h6pHVZc7zYDAbfc42CIeqJGv99nb3PDEHDLaUR9aJdVvqe53+dat6FYRkK+/js5O/thGYkR1wMBA8bYSgkYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBowRMGCMgAFjBAwYI2DAGAEDxggYMEbAgDECBlxlWfY/kg/To/rpY0MAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/src/assets/images/replacement_document.svg b/src/assets/images/replacement_document.svg
new file mode 100644
index 0000000000..f684ca9597
--- /dev/null
+++ b/src/assets/images/replacement_document.svg
@@ -0,0 +1,9 @@
+<svg width="240" height="180" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="240" height="180" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00416667 0.00555556)"/>
+</pattern>
+<image id="image0" width="240" height="180" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAC0CAYAAACqnKHoAAAESElEQVR4nO3dX2saWQDG4dNYFzFIQ7YhVLoV8v0/z/bamxBp1yiiSEPTclyE0otl0ZiZ13ke8H5mnJ9z5s8Z3yweH38UINKFrw1yCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCCRiCvfXltctiuSyb9bo8PT2d3boNh8MyGo3KYDBowdKchzeLx8cfXd8IbbBarcpsNivfzjDc310Oh2U8Hpd+v9+uBQsk4Bao4f4zn3dqnXsXF2UymTgaH8k5cMPqkLlr8Vbfn5/LdDo9y1OF1yTgBtWdd/bw0Nn1rxHf39+3YElyCbhB8/l8txN32XqzKdvtttPb4BgCblC9cIXtcAwBN6gLV5z/j81m0/6FbCkBQzABQzABQzABQzABQzCTGYLcvH9fbm5uWr/Af3/+3IKl6AZHYAgmYAgmYAjmHPhAdSbN+j+eIKpzXut0OTglR2AIJmAIJmAI5hw4yJevX3cf2HMEhmAChmAChmAChmAChmAChmAChmDuAwepz1fXPwhrO/eqX4+Ag9R4Eyb0C/j1GEJDMAFDMAFDMAFDMAFDMAFDMLeRgtQ/BPdPfvxKwEEWy+XuA3uG0BBMwBBMwBBMwBBMwBBMwBBMwBDMfeAgV+/elaurq5Mu8MNsVrbb7ZltufMl4CD9fv/kb+ToXRiUJfFtQTABQzABQzABQzABQzABQzC3kYIsl8uTT+h3DziLgIN8e3rafWDPEBqCCRiCCRiCCRiCCbhBJg78q07S4DD2oAYNLy87u+6/sh0OJ+AG/Xl93dl13/uj39/Nc+YwAm5Qnds7Go06u/7V7e1tC5Yil4AbNv7woQwGg06uex2BdP0H7FgCbliv1yuTT586tSPXi3fj8djR9wV4lLIFasR/ffy4e855sViU1WpVvj8/n9161vPd+kN1fX3tyvMLEXCL1HPiU7/zivNiCA3BBAzBBAzBBAzBBAzBBAzBBAzB3Ac+kfpyuOl0epbr9rvJZNKuBeoQAZ9IfZJqfeI3SIIh9IE8MUUbCPhAZtHQBgI+UJ0CeOkoTMMEfIQ6Jc57rWiSve8IdUpcvQIrYppizztSHUrf3d0ZTtMIt5FewP5IXO/91sn4p/4DMtgT8AuqR+Ouvt+KZhhCQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQ6pSyk/71rEEHrIkFQAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/src/assets/images/replacement_image.svg b/src/assets/images/replacement_image.svg
new file mode 100644
index 0000000000..b6817cf7fc
--- /dev/null
+++ b/src/assets/images/replacement_image.svg
@@ -0,0 +1,9 @@
+<svg width="240" height="180" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="240" height="180" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00416667 0.00555556)"/>
+</pattern>
+<image id="image0" width="240" height="180" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAC0CAYAAACqnKHoAAAE5UlEQVR4nO3d70pbSRzH4eNaxKB06RLJ4iIVBO//hrwAqWysWOIbcZlAwLX+SeIkZ745z/OmFmoxYz6e8xsnunc7nT51QKQ/fNogl4AhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAhmIAh2BefvM15fHzs7n/96h5ms/nbs9lsVx/q/4xGo25/f787HI2646Oj+dtshoA35Pr6uvtxczMPd2jKF62FEu/JeNxNJpPBrcM27N1Op0+7/zC3pwR7dXXVzR4ehvKQlzI6POwuLi5cjSszA1cm3teVNSlrQ10CrqjcNov3bWVtyhpRj4ArKbfOZeblfUPdF9gUAVdSNm48MT+22JmnDgFX8jCQbxHVYK3qEXAlrr70QcCVDOWQBm0RMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMAQTMHN/fftmIQJ9GfoC0HV/TybdZDKZ/4rUn3d3ViSIK/DA/fn16zze4uzsrDs4OBj6kkQR8ICVWEu0C/v7+9359+9DX5YoAh6oRazlz+dGo1H3z+np0JcnhoAH6vT0dB7ra8bj8fzWmvYJOMDo8LDqB1l2nD/adTYPZxBw48qV8PLyslrE5f95Pve+xTycQcANex7bxcXFp6+I8yjPz5f+9+bh9gm4USW2Eu9ik+mtTadVlPdf9YuAebhtAm7Ua5tM5e/L3P6+phzWOD4+Xut9zcPtEnCDTsbjNzeZytVw1dva54c11mEebpeAG1Pm3tMPAh2/E/hLLw9rrMs83CYBN6Rc6cpm1TJKlB/tTNeYm58zD7dHwA1ZNbaPdqbfO6yxLvNwWwTciHJ7uuom03tX2GUOa6zDPNwWATeg3JaW29N1vLYzvexhjXWZh9sh4J7ViO35zvSqhzXWZR5ug4B79PKwxmcsdqa3OaOah/sn4B7V3mQqQW3zqmge7p+Ae/LeYY0k5uF+CbgHyxzWSGIe7o+At2yVwxpJzMP9EPCW1TwZ1RLzcD/8WNktWsy89/f3O/0Y/51OG/hIhkHAW1Se2J7c1OQWGoIJGIIJGIIJuJLaL9uDZQi4kl381hDtE3Alh67AS7NW9Qi4kuOjI1fhJZQ1cuyyHgFXUp6YJ2u+KH9IrFFdAq6o/OjW2r/HaJeUtfnMj7fldwKurLxQQcS/K2uyiy/i6Nve7XT6NOwl2Izr6+vux81N9/j4uIsPb2mL0cKVdzMEvGE/7+66h9lspx/jW8pusw2rzRIwBDMDQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQzABQ6qu6/4DYMqyrZ0wRgUAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/src/assets/images/replacement_video.svg b/src/assets/images/replacement_video.svg
new file mode 100644
index 0000000000..1972b25eca
--- /dev/null
+++ b/src/assets/images/replacement_video.svg
@@ -0,0 +1,9 @@
+<svg width="240" height="180" viewBox="0 0 240 180" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="240" height="180" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00416667 0.00555556)"/>
+</pattern>
+<image id="image0" width="240" height="180" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAC0CAYAAACqnKHoAAAFZ0lEQVR4nO3dbU/UWByH4QqLMRCQQBACMfL9v5JZYiRr0AkPgQwxEHTzn41GdxfsYGeYX3tdiS98Y9oDt+2ZOT19dnF+/rUBIi35sUEuAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUMwAUOwP/zwHu/29ra5vLpqvtzdNZ8/f27u7u5ST2WulpeXmxcvXjRLy8vNxvp6s7KyMqCz79azi/Pzr306oXmocD+NRs3FxUX/T3YONjc3m1c7O0J+BAFPqa607969a+6+fIk67kW3vLTUHB4eTq7MtGcOPAXxzk6NaY1tjTHtCXgKf334IN4ZqrGtMaY9Abd0dXXl6jAHNcY11rQj4JYu/VLNjQ8H2xNwS9fjccRx9oE7nfYE3NLN7W3EcfaBsW7PQo6O1cKEnZ0dX4f8S11VR6ORqUjHXIE7VAsSXr9+Ld7/UWNSY1NjRHcE3JFaiLC3u9uLc5mlGqMaK7phJDtSV5ha48vDvq2DphsC7sja2lovzoMsAoZgAoZgAoZgAoZgAoZgAoZgllIGqqd1Ts/OJssTa1HE+saGLWkGSsBh6oH3Hx+3q4fg6+9Xl5fN9vZ2s7W1ZUHJgLiFDjIej+99VrZCro32jo6OPE87IAIOcn19/cuDrUfx6iptf6lhEHCQaYIcX183fx4d/bOPl/2qe8scOMhjQvxxflzPKdMvrsAD8G1+/PbtWxvG9YyAB6Tmx++Pj82Pe0TAA2R+3B/mwANmfpzPFXjgfpwfu63OI2Aman58fHzsljqMgPmuIvYpdRYB85Nbm6pHETAEEzA/WV1dNSBBBMx39dYE2+Nm8T0wE9tbW83e3p7BCCPggVtbXW0ODg7s5hFKwAP1fGWl2d/fd8scTsADU3to7bx6NbllJp+AB6SirTXP9szqDwEPgHlufwk4yLRXTvPc/hNwkHqv7mWLtcrmucMh4CC10OL09HTyCOB9zHOHRcBBag5biy1OTk7+E7F57jAJOMy35Y51K10P4Nc8t9Yvm+cOk4AD1VXW/JbGwwyQTcAQTMAQTMAQTMAQTMAdubEZHE9AwB25vbnpxXmQRcAdqfcN2ZL112qMxi1eVE47Au7Qe282eFCNTY0R3bESq0O1tLHeMVTLHdfX13tzXl2oNz7Uy9QeehCD6Qm4Y/ULenp2NvnD49TjkLRjpFqqZ3Ex1otGwC2teWPB3Ai4PQG3VC/BxlgvGgG35BG++agxtilBewKeQm1V4/Zudmpsa4xpT8BTqH2mDt+8aTZ8RdS5GtMaW3t5TefZxfn516QDXhT1vean0Wjy3S+PVx8O1pzX9+aPI+DfVKuLZhXxycePT/4fRN3W7u3uzuzfdsX9PRZy/Kb6BZzVhnKLsKChjsGGeYvLHBiCCRiCCRiCCXiBrTx//uQHtwjHwP0EvMA2X7588oNbhGPgfgJeYPXp78H+/pMd4IFXky483wMHqG1o6mH4eapNCaxJXnwChmBuoSGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCGYgCFV0zR/A9c/gdi8GSXTAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/src/config/global-config.interface.ts b/src/config/global-config.interface.ts
index c197a1407c..8ca11e4a8c 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/global-config.interface.ts
@@ -12,6 +12,7 @@ import { CollectionPageConfig } from './collection-page-config.interface';
 import { ThemeConfig } from './theme.model';
 import { AuthConfig } from './auth-config.interfaces';
 import { UIServerConfig } from './ui-server-config.interface';
+import { MediaViewerConfig } from './media-viewer-config.interface';
 
 export interface GlobalConfig extends Config {
   ui: UIServerConfig;
@@ -32,4 +33,5 @@ export interface GlobalConfig extends Config {
   collection: CollectionPageConfig;
   themes: ThemeConfig[];
   rewriteDownloadUrls: boolean;
+  mediaViewer: MediaViewerConfig;
 }
diff --git a/src/config/media-viewer-config.interface.ts b/src/config/media-viewer-config.interface.ts
new file mode 100644
index 0000000000..8a6a163872
--- /dev/null
+++ b/src/config/media-viewer-config.interface.ts
@@ -0,0 +1,6 @@
+import { Config } from './config.interface';
+
+export interface MediaViewerConfig extends Config {
+  image: boolean;
+  video: boolean;
+}
diff --git a/src/environments/environment.common.ts b/src/environments/environment.common.ts
index c6ae9858e5..b8248890fc 100644
--- a/src/environments/environment.common.ts
+++ b/src/environments/environment.common.ts
@@ -263,4 +263,11 @@ export const environment: GlobalConfig = {
   ],
   // Whether the UI should rewrite file download URLs to match its domain. Only necessary to enable when running UI and REST API on separate domains
   rewriteDownloadUrls: false,
+  // Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with "image" or "video").  
+  // For images, this enables a gallery viewer where you can zoom or page through images. 
+  // For videos, this enables embedded video streaming
+  mediaViewer: {
+    image: false,
+    video: false,
+  },
 };
diff --git a/src/environments/mock-environment.ts b/src/environments/mock-environment.ts
index 4f321c01d4..8de5b187ad 100644
--- a/src/environments/mock-environment.ts
+++ b/src/environments/mock-environment.ts
@@ -217,4 +217,8 @@ export const environment: Partial<GlobalConfig> = {
       name: 'base',
     },
   ],
+  mediaViewer: {
+    image: true,
+    video: true
+  },
 };
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index ee997f4d8a..58f599c516 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -1,5 +1,3 @@
-// @import '_themed_bootstrap_variables';
-
 /** Help Variables **/
 $fa-fixed-width: 1.25rem !default;
 $icon-padding: 1rem !default;
@@ -22,12 +20,12 @@ $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
 $gray-100: lighten($gray-base, 93.5%) !default; // #eee
 
 /* Reassign color vars to semantic color scheme */
-$blue:      #2B4E72 !default;
-$green: #94BA65 !default;
-$cyan: #2790B0 !default;
+$blue:   #2B4E72 !default;
+$green:  #94BA65 !default;
+$cyan:   #006666 !default;
 $yellow: #ec9433 !default;
-$red: #CF4444 !default;
-$dark: darken($blue, 17%) !default;
+$red:    #CF4444 !default;
+$dark:   darken($blue, 17%) !default;
 
 $theme-colors: (
         primary: $blue,
@@ -49,12 +47,4 @@ $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox
 
 $enable-shadows: true !default;
 
-$grid-breakpoints: (
-        xs: 0,
-        sm: (576px - $collapsed-sidebar-width),
-        md: (768px - $collapsed-sidebar-width),
-        lg: (992px - $collapsed-sidebar-width),
-        xl: (1200px - $collapsed-sidebar-width)
-) !default;
-
 $yiq-contrasted-threshold:  165 !default;
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 04db184a3d..56cf4abca9 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -14,14 +14,20 @@
   --ds-submission-header-z-index: 1001;
   --ds-submission-footer-z-index: 999;
 
-  --ds-main-z-index: 0;
+  --ds-main-z-index: 1;
   --ds-nav-z-index: 10;
+  --ds-footer-z-index: 0;
   --ds-sidebar-z-index: 20;
 
-  --ds-header-logo-height: 80px;
+  --ds-header-bg: #{$white};
+  --ds-header-logo-height: 40px;
   --ds-header-logo-height-xs: 50px;
-  --ds-header-icon-color: #{$link-color};
-  --ds-header-icon-color-hover: #{darken($link-color, 15%)};
+  --ds-header-icon-color: #{$cyan};
+  --ds-header-icon-color-hover: #{darken($white, 15%)};
+  --ds-header-navbar-border-top-color: #{$white};
+  --ds-header-navbar-border-bottom-color: #{$gray-400};
+  --ds-navbar-link-color: #{$cyan};
+  --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
 
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
@@ -54,4 +60,22 @@
   --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width};
   --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-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;
+
+  $home-news-link-color: $cyan;
+  --ds-home-news-link-color: #{$home-news-link-color};
+  --ds-home-news-link-hover-color: #{darken($home-news-link-color, 15%)};
+  --ds-home-news-background-color: #{$gray-200};
+
+  --ds-breadcrumb-bg: #{$gray-200} !important;
+  --ds-breadcrumb-link-color: #{$cyan};
+  --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
+
+  --ds-slider-color: #{$green};
 }
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index b79cf52fbb..d151bb3ba7 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -35,10 +35,6 @@ body {
   margin: 0;
 }
 
-ds-header-navbar-wrapper {
-  z-index: var(--ds-nav-z-index);
-}
-
 ds-admin-sidebar {
   position: fixed;
   z-index: var(--ds-sidebar-z-index);
@@ -47,3 +43,23 @@ ds-admin-sidebar {
 .ds-full-screen-loader {
   height: 100vh;
 }
+
+.sticky-top {
+  z-index: 0;
+}
+
+.media-viewer
+  .change-gallery
+  .ngx-gallery
+  ngx-gallery-preview.ngx-gallery-active {
+  right: 0;
+  left: auto;
+  width: calc(100% - 53px);
+}
+
+.ds-submission-reorder-dragging {
+  .ds-hint,
+  button {
+    display: none;
+  }
+}
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.scss b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
new file mode 100644
index 0000000000..58fee73779
--- /dev/null
+++ b/src/themes/custom/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BrowseBySwitcherComponent as BaseComponent } from '../../../../../app/+browse-by/+browse-by-switcher/browse-by-switcher.component';
+
+@Component({
+  selector: 'ds-browse-by-switcher',
+  // styleUrls: ['./browse-by-switcher.component.scss'],
+  // templateUrl: './browse-by-switcher.component.html'
+  templateUrl: '../../../../../app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html'
+})
+
+/**
+ * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
+ */
+export class BrowseBySwitcherComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.html b/src/themes/custom/app/+collection-page/collection-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.scss b/src/themes/custom/app/+collection-page/collection-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+collection-page/collection-page.component.ts b/src/themes/custom/app/+collection-page/collection-page.component.ts
new file mode 100644
index 0000000000..9d1d5f03f9
--- /dev/null
+++ b/src/themes/custom/app/+collection-page/collection-page.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CollectionPageComponent as BaseComponent} from '../../../../app/+collection-page/collection-page.component';
+import { fadeIn, fadeInOut } from '../../../../app/shared/animations/fade';
+
+
+@Component({
+  selector: 'ds-collection-page',
+  // templateUrl: './collection-page.component.html',
+  templateUrl: '../../../../app/+collection-page/collection-page.component.html',
+  // styleUrls: ['./collection-page.component.scss']
+  styleUrls: ['../../../../app/+collection-page/collection-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    fadeIn,
+    fadeInOut
+  ]
+})
+/**
+ * This component represents a detail page for a single collection
+ */
+export class CollectionPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+community-page/community-page.component.html b/src/themes/custom/app/+community-page/community-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+community-page/community-page.component.scss b/src/themes/custom/app/+community-page/community-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+community-page/community-page.component.ts b/src/themes/custom/app/+community-page/community-page.component.ts
new file mode 100644
index 0000000000..54e9352eb8
--- /dev/null
+++ b/src/themes/custom/app/+community-page/community-page.component.ts
@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommunityPageComponent as BaseComponent} from '../../../../app/+community-page/community-page.component';
+import { fadeInOut } from '../../../../app/shared/animations/fade';
+
+
+@Component({
+  selector: 'ds-community-page',
+  // templateUrl: './community-page.component.html',
+  templateUrl: '../../../../app/+community-page/community-page.component.html',
+  // styleUrls: ['./community-page.component.scss']
+  styleUrls: ['../../../../app/+community-page/community-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
+})
+/**
+ * This component represents a detail page for a single community
+ */
+export class CommunityPageComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.html b/src/themes/custom/app/+item-page/full/full-item-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.scss b/src/themes/custom/app/+item-page/full/full-item-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/full/full-item-page.component.ts b/src/themes/custom/app/+item-page/full/full-item-page.component.ts
new file mode 100644
index 0000000000..1e6230132b
--- /dev/null
+++ b/src/themes/custom/app/+item-page/full/full-item-page.component.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { fadeInOut } from '../../../../../app/shared/animations/fade';
+import { FullItemPageComponent as BaseComponent } from '../../../../../app/+item-page/full/full-item-page.component';
+
+/**
+ * This component renders a full item page.
+ * The route parameter 'id' is used to request the item it represents.
+ */
+
+@Component({
+  selector: 'ds-full-item-page',
+  // styleUrls: ['./full-item-page.component.scss'],
+  styleUrls: ['../../../../../app/+item-page/full/full-item-page.component.scss'],
+  // templateUrl: './full-item-page.component.html',
+  templateUrl: '../../../../../app/+item-page/full/full-item-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
+})
+export class FullItemPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.html b/src/themes/custom/app/+item-page/simple/item-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.scss b/src/themes/custom/app/+item-page/simple/item-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+item-page/simple/item-page.component.ts b/src/themes/custom/app/+item-page/simple/item-page.component.ts
new file mode 100644
index 0000000000..dfd792b3e2
--- /dev/null
+++ b/src/themes/custom/app/+item-page/simple/item-page.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ItemPageComponent as BaseComponent } from '../../../../../app/+item-page/simple/item-page.component';
+import { fadeInOut } from '../../../../../app/shared/animations/fade';
+
+/**
+ * This component renders a simple item page.
+ * The route parameter 'id' is used to request the item it represents.
+ * All fields of the item that should be displayed, are defined in its template.
+ */
+@Component({
+  selector: 'ds-item-page',
+  // styleUrls: ['./item-page.component.scss'],
+  styleUrls: ['../../../../../app/+item-page/simple/item-page.component.scss'],
+  // templateUrl: './item-page.component.html',
+  templateUrl: '../../../../../app/+item-page/simple/item-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInOut]
+})
+export class ItemPageComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/+login-page/login-page.component.html b/src/themes/custom/app/+login-page/login-page.component.html
new file mode 100644
index 0000000000..84059877f4
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.html
@@ -0,0 +1,10 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-center">
+    <div>
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
+      <ds-log-in
+      [isStandalonePage]="true"></ds-log-in>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/+login-page/login-page.component.scss b/src/themes/custom/app/+login-page/login-page.component.scss
new file mode 100644
index 0000000000..d628a5089f
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.scss
@@ -0,0 +1,4 @@
+.login-logo {
+  height: var(--ds-login-logo-height);
+  width: var(--ds-login-logo-width);
+}
diff --git a/src/themes/custom/app/+login-page/login-page.component.ts b/src/themes/custom/app/+login-page/login-page.component.ts
new file mode 100644
index 0000000000..4c5922c8fd
--- /dev/null
+++ b/src/themes/custom/app/+login-page/login-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { LoginPageComponent as BaseComponent } from '../../../../app/+login-page/login-page.component';
+
+/**
+ * This component represents the login page
+ */
+@Component({
+  selector: 'ds-login-page',
+  // styleUrls: ['./login-page.component.scss'],
+  styleUrls: ['../../../../app/+login-page/login-page.component.scss'],
+  // templateUrl: './login-page.component.html'
+  templateUrl: '../../../../app/+login-page/login-page.component.html'
+})
+export class LoginPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.html b/src/themes/custom/app/+logout-page/logout-page.component.html
new file mode 100644
index 0000000000..b5012ed53b
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.html
@@ -0,0 +1,9 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-md-center">
+    <div class="mx-auto">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
+      <ds-log-out></ds-log-out>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.scss b/src/themes/custom/app/+logout-page/logout-page.component.scss
new file mode 100644
index 0000000000..7e594c0d9b
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.scss
@@ -0,0 +1 @@
+@import '../+login-page/login-page.component.scss';
diff --git a/src/themes/custom/app/+logout-page/logout-page.component.ts b/src/themes/custom/app/+logout-page/logout-page.component.ts
new file mode 100644
index 0000000000..5b94d906c0
--- /dev/null
+++ b/src/themes/custom/app/+logout-page/logout-page.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { LogoutPageComponent as BaseComponent} from '../../../../app/+logout-page/logout-page.component';
+
+@Component({
+  selector: 'ds-logout-page',
+  // styleUrls: ['./logout-page.component.scss'],
+  styleUrls: ['../../../../app/+logout-page/logout-page.component.scss'],
+  // templateUrl: './logout-page.component.html'
+  templateUrl: '../../../../app/+logout-page/logout-page.component.html'
+})
+export class LogoutPageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.html b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.scss b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
new file mode 100644
index 0000000000..2c10ddde53
--- /dev/null
+++ b/src/themes/custom/app/+lookup-by-id/objectnotfound/objectnotfound.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ObjectNotFoundComponent as BaseComponent } from '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component';
+
+@Component({
+  selector: 'ds-objnotfound',
+  // styleUrls: ['./objectnotfound.component.scss'],
+  styleUrls: ['../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.scss'],
+  // templateUrl: './objectnotfound.component.html',
+  templateUrl: '../../../../../app/+lookup-by-id/objectnotfound/objectnotfound.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
+})
+
+/**
+ * This component representing the `PageNotFound` DSpace page.
+ */
+export class ObjectNotFoundComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.html b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.scss b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts
new file mode 100644
index 0000000000..8ea24a041d
--- /dev/null
+++ b/src/themes/custom/app/+my-dspace-page/my-dspace-page.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { pushInOut } from '../../../../app/shared/animations/push';
+import { MyDSpacePageComponent as BaseComponent, SEARCH_CONFIG_SERVICE } from '../../../../app/+my-dspace-page/my-dspace-page.component';
+import { MyDSpaceConfigurationService } from '../../../../app/+my-dspace-page/my-dspace-configuration.service';
+
+/**
+ * This component represents the whole mydspace page
+ */
+@Component({
+  selector: 'ds-my-dspace-page',
+  // styleUrls: ['./my-dspace-page.component.scss'],
+  styleUrls: ['../../../../app/+my-dspace-page/my-dspace-page.component.scss'],
+  // templateUrl: './my-dspace-page.component.html',
+  templateUrl: '../../../../app/+my-dspace-page/my-dspace-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [pushInOut],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: MyDSpaceConfigurationService
+    }
+  ]
+})
+export class MyDSpacePageComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.html b/src/themes/custom/app/+search-page/configuration-search-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.scss b/src/themes/custom/app/+search-page/configuration-search-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/configuration-search-page.component.ts b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
new file mode 100644
index 0000000000..42e8dbf2d0
--- /dev/null
+++ b/src/themes/custom/app/+search-page/configuration-search-page.component.ts
@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { pushInOut } from '../../../../app/shared/animations/push';
+import { SEARCH_CONFIG_SERVICE } from '../../../../app/+my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../../app/core/shared/search/search-configuration.service';
+import { ConfigurationSearchPageComponent as BaseComponent } from '../../../../app/+search-page/configuration-search-page.component';
+
+@Component({
+  selector: 'ds-configuration-search-page',
+  // styleUrls: ['./configuration-search-page.component.scss'],
+  styleUrls: ['../../../../app/+search-page/search.component.scss'],
+  // templateUrl: './configuration-search-page.component.html'
+  templateUrl: '../../../../app/+search-page/search.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [pushInOut],
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
+})
+
+/**
+ * This component renders a search page using a configuration as input.
+ */
+export class ConfigurationSearchPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+search-page/search-page.component.html b/src/themes/custom/app/+search-page/search-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/search-page.component.scss b/src/themes/custom/app/+search-page/search-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+search-page/search-page.component.ts b/src/themes/custom/app/+search-page/search-page.component.ts
new file mode 100644
index 0000000000..c9bcd65349
--- /dev/null
+++ b/src/themes/custom/app/+search-page/search-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { SearchPageComponent as BaseComponent } from '../../../../app/+search-page/search-page.component';
+
+@Component({
+  selector: 'ds-search-page',
+  // styleUrls: ['./search-page.component.scss'],
+  // templateUrl: './search-page.component.html'
+  templateUrl: '../../../../app/+search-page/search-page.component.html'
+})
+
+/**
+ * This component represents the whole search page
+ * It renders search results depending on the current search options
+ */
+export class SearchPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.html b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.scss b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts
new file mode 100644
index 0000000000..c9c140835a
--- /dev/null
+++ b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { WorkflowItemDeleteComponent as BaseComponent } from '../../../../../app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
+
+@Component({
+  selector: 'ds-workflow-item-delete',
+  // styleUrls: ['workflow-item-delete.component.scss'],
+  // templateUrl: './workflow-item-delete.component.html'
+  templateUrl: '../../../../../app/+workflowitems-edit-page/workflow-item-action-page.component.html'
+})
+/**
+ * Component representing a page to delete a workflow item
+ */
+export class WorkflowItemDeleteComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.html b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.scss b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts
new file mode 100644
index 0000000000..343faf765c
--- /dev/null
+++ b/src/themes/custom/app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { WorkflowItemSendBackComponent as BaseComponent } from '../../../../../app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
+
+@Component({
+  selector: 'ds-workflow-item-send-back',
+  // styleUrls: ['workflow-item-send-back.component.scss'],
+  // templateUrl: './workflow-item-send-back.component.html'
+  templateUrl: '../../../../../app/+workflowitems-edit-page/workflow-item-action-page.component.html'
+})
+/**
+ * Component representing a page to send back a workflow item to the submitter
+ */
+export class WorkflowItemSendBackComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.html b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.scss b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts
new file mode 100644
index 0000000000..32d00fc8b6
--- /dev/null
+++ b/src/themes/custom/app/breadcrumbs/breadcrumbs.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { BreadcrumbsComponent as BaseComponent } from '../../../../app/breadcrumbs/breadcrumbs.component';
+
+/**
+ * Component representing the breadcrumbs of a page
+ */
+@Component({
+  selector: 'ds-breadcrumbs',
+  // templateUrl: './breadcrumbs.component.html',
+  templateUrl: '../../../../app/breadcrumbs/breadcrumbs.component.html',
+  // styleUrls: ['./breadcrumbs.component.scss']
+  styleUrls: ['../../../../app/breadcrumbs/breadcrumbs.component.scss']
+})
+export class BreadcrumbsComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.html b/src/themes/custom/app/community-list-page/community-list-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.scss b/src/themes/custom/app/community-list-page/community-list-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/community-list-page/community-list-page.component.ts b/src/themes/custom/app/community-list-page/community-list-page.component.ts
new file mode 100644
index 0000000000..1dbfa15b40
--- /dev/null
+++ b/src/themes/custom/app/community-list-page/community-list-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CommunityListPageComponent as BaseComponent } from '../../../../app/community-list-page/community-list-page.component';
+
+@Component({
+  selector: 'ds-community-list-page',
+  // styleUrls: ['./community-list-page.component.scss'],
+  // templateUrl: './community-list-page.component.html'
+  templateUrl: '../../../../app/community-list-page/community-list-page.component.html'
+})
+
+/**
+ * Page with title and the community list tree, as described in community-list.component;
+ * navigated to with community-list.page.routing.module
+ */
+export class CommunityListPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/footer/footer.component.html b/src/themes/custom/app/footer/footer.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/footer/footer.component.scss b/src/themes/custom/app/footer/footer.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/footer/footer.component.ts b/src/themes/custom/app/footer/footer.component.ts
new file mode 100644
index 0000000000..de80ceb311
--- /dev/null
+++ b/src/themes/custom/app/footer/footer.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { FooterComponent as BaseComponent } from '../../../../app/footer/footer.component';
+
+@Component({
+  selector: 'ds-footer',
+  // styleUrls: ['footer.component.scss'],
+  styleUrls: ['../../../../app/footer/footer.component.scss'],
+  // templateUrl: 'footer.component.html'
+  templateUrl: '../../../../app/footer/footer.component.html'
+})
+export class FooterComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/forbidden/forbidden.component.html b/src/themes/custom/app/forbidden/forbidden.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forbidden/forbidden.component.scss b/src/themes/custom/app/forbidden/forbidden.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forbidden/forbidden.component.ts b/src/themes/custom/app/forbidden/forbidden.component.ts
new file mode 100644
index 0000000000..915cf651cb
--- /dev/null
+++ b/src/themes/custom/app/forbidden/forbidden.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ForbiddenComponent as BaseComponent } from '../../../../app/forbidden/forbidden.component';
+
+
+@Component({
+  selector: 'ds-forbidden',
+  // templateUrl: './forbidden.component.html',
+  templateUrl: '../../../../app/forbidden/forbidden.component.html',
+  // styleUrls: ['./forbidden.component.scss']
+  styleUrls: ['../../../../app/forbidden/forbidden.component.scss']
+})
+/**
+ * This component representing the `Forbidden` DSpace page.
+ */
+export class ForbiddenComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.html b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.scss b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts
new file mode 100644
index 0000000000..8eaa2bb0fa
--- /dev/null
+++ b/src/themes/custom/app/forgot-password/forgot-password-email/forgot-email.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ForgotEmailComponent as BaseComponent } from '../../../../../app/forgot-password/forgot-password-email/forgot-email.component';
+
+@Component({
+  selector: 'ds-forgot-email',
+  // styleUrls: ['./forgot-email.component.scss'],
+  styleUrls: ['../../../../../app/forgot-password/forgot-password-email/forgot-email.component.scss'],
+  // templateUrl: './forgot-email.component.html'
+  templateUrl: '../../../../../app/forgot-password/forgot-password-email/forgot-email.component.html'
+})
+/**
+ * Component responsible the forgot password email step
+ */
+export class ForgotEmailComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.scss b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
new file mode 100644
index 0000000000..d64d925f71
--- /dev/null
+++ b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ForgotPasswordFormComponent as BaseComponent } from '../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component';
+
+@Component({
+  selector: 'ds-forgot-password-form',
+  // styleUrls: ['./forgot-password-form.component.scss'],
+  styleUrls: ['../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component.scss'],
+  // templateUrl: './forgot-password-form.component.html'
+  templateUrl: '../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component.html'
+})
+/**
+ * Component for a user to enter a new password for a forgot token.
+ */
+export class ForgotPasswordFormComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/header/header.component.html b/src/themes/custom/app/header/header.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header/header.component.scss b/src/themes/custom/app/header/header.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header/header.component.ts b/src/themes/custom/app/header/header.component.ts
new file mode 100644
index 0000000000..866072f3b6
--- /dev/null
+++ b/src/themes/custom/app/header/header.component.ts
@@ -0,0 +1,15 @@
+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'],
+  styleUrls: ['../../../../app/header/header.component.scss'],
+  // templateUrl: 'header.component.html',
+  templateUrl: '../../../../app/header/header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.html b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.scss b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
new file mode 100644
index 0000000000..e3e5ac8d19
--- /dev/null
+++ b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { EndUserAgreementComponent as BaseComponent } from '../../../../../app/info/end-user-agreement/end-user-agreement.component';
+
+@Component({
+  selector: 'ds-home-news',
+  // styleUrls: ['./end-user-agreement.component.scss'],
+  styleUrls: ['../../../../../app/info/end-user-agreement/end-user-agreement.component.scss'],
+  // templateUrl: './end-user-agreement.component.html'
+  templateUrl: '../../../../../app/info/end-user-agreement/end-user-agreement.component.html'
+})
+
+/**
+ * Component displaying the End User Agreement and an option to accept it
+ */
+export class EndUserAgreementComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/info/privacy/privacy.component.html b/src/themes/custom/app/info/privacy/privacy.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/privacy/privacy.component.scss b/src/themes/custom/app/info/privacy/privacy.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/info/privacy/privacy.component.ts b/src/themes/custom/app/info/privacy/privacy.component.ts
new file mode 100644
index 0000000000..f261c64c14
--- /dev/null
+++ b/src/themes/custom/app/info/privacy/privacy.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { PrivacyComponent as BaseComponent } from '../../../../../app/info/privacy/privacy.component';
+
+@Component({
+  selector: 'ds-privacy',
+  // styleUrls: ['./privacy.component.scss'],
+  styleUrls: ['../../../../../app/info/privacy/privacy.component.scss'],
+  // templateUrl: './privacy.component.html'
+  templateUrl: '../../../../../app/info/privacy/privacy.component.html'
+})
+
+/**
+ * Component displaying the Privacy Statement
+ */
+export class PrivacyComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/navbar/navbar.component.html b/src/themes/custom/app/navbar/navbar.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/navbar.component.scss b/src/themes/custom/app/navbar/navbar.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/navbar/navbar.component.ts b/src/themes/custom/app/navbar/navbar.component.ts
new file mode 100644
index 0000000000..e163f096e9
--- /dev/null
+++ b/src/themes/custom/app/navbar/navbar.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
+
+/**
+ * Component representing the public navbar
+ */
+@Component({
+  selector: 'ds-navbar',
+  // styleUrls: ['./navbar.component.scss'],
+  styleUrls: ['../../../../app/navbar/navbar.component.scss'],
+  // templateUrl: './navbar.component.html',
+  templateUrl: '../../../../app/navbar/navbar.component.html',
+  animations: [slideMobileNav]
+})
+export class NavbarComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.html b/src/themes/custom/app/pagenotfound/pagenotfound.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.scss b/src/themes/custom/app/pagenotfound/pagenotfound.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/pagenotfound/pagenotfound.component.ts b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
new file mode 100644
index 0000000000..71dc7332d4
--- /dev/null
+++ b/src/themes/custom/app/pagenotfound/pagenotfound.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PageNotFoundComponent as BaseComponent } from '../../../../app/pagenotfound/pagenotfound.component';
+
+@Component({
+  selector: 'ds-pagenotfound',
+  // styleUrls: ['./pagenotfound.component.scss'],
+  styleUrls: ['../../../../app/pagenotfound/pagenotfound.component.scss'],
+  // templateUrl: './pagenotfound.component.html'
+  templateUrl: '../../../../app/pagenotfound/pagenotfound.component.html',
+  changeDetection: ChangeDetectionStrategy.Default
+})
+
+/**
+ * This component representing the `PageNotFound` DSpace page.
+ */
+export class PageNotFoundComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/profile-page/profile-page.component.html b/src/themes/custom/app/profile-page/profile-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/profile-page/profile-page.component.scss b/src/themes/custom/app/profile-page/profile-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/profile-page/profile-page.component.ts b/src/themes/custom/app/profile-page/profile-page.component.ts
new file mode 100644
index 0000000000..fe25f0685b
--- /dev/null
+++ b/src/themes/custom/app/profile-page/profile-page.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ProfilePageComponent as BaseComponent } from '../../../../app/profile-page/profile-page.component';
+
+@Component({
+  selector: 'ds-profile-page',
+  styleUrls: ['./profile-page.component.scss'],
+  templateUrl: './profile-page.component.html'
+})
+/**
+ * Component for a user to edit their profile information
+ */
+export class ProfilePageComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.html b/src/themes/custom/app/register-page/create-profile/create-profile.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.scss b/src/themes/custom/app/register-page/create-profile/create-profile.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.ts b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
new file mode 100644
index 0000000000..0cffa3288d
--- /dev/null
+++ b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CreateProfileComponent as BaseComponent } from '../../../../../app/register-page/create-profile/create-profile.component';
+
+/**
+ * Component that renders the create profile page to be used by a user registering through a token
+ */
+@Component({
+  selector: 'ds-create-profile',
+  // styleUrls: ['./create-profile.component.scss'],
+  styleUrls: ['../../../../../app/register-page/create-profile/create-profile.component.scss'],
+  // templateUrl: './create-profile.component.html'
+  templateUrl: '../../../../../app/register-page/create-profile/create-profile.component.html'
+})
+export class CreateProfileComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.html b/src/themes/custom/app/register-page/register-email/register-email.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.scss b/src/themes/custom/app/register-page/register-email/register-email.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/register-page/register-email/register-email.component.ts b/src/themes/custom/app/register-page/register-email/register-email.component.ts
new file mode 100644
index 0000000000..66becd1b6b
--- /dev/null
+++ b/src/themes/custom/app/register-page/register-email/register-email.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RegisterEmailComponent as BaseComponent } from '../../../../../app/register-page/register-email/register-email.component';
+
+@Component({
+  selector: 'ds-register-email',
+  // styleUrls: ['./register-email.component.scss'],
+  styleUrls: ['../../../../../app/register-page/register-email/register-email.component.scss'],
+  // templateUrl: './register-email.component.html'
+  templateUrl: '../../../../../app/register-page/register-email/register-email.component.html'
+})
+/**
+ * Component responsible the email registration step when registering as a new user
+ */
+export class RegisterEmailComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.html b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
new file mode 100644
index 0000000000..f3fa9d3e42
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/collection-statistics-page/collection-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CollectionStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/collection-statistics-page/collection-statistics-page.component';
+
+@Component({
+  selector: 'ds-collection-statistics-page',
+  // styleUrls: ['./collection-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/collection-statistics-page/collection-statistics-page.component.scss'],
+  // templateUrl: './collection-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component representing the statistics page for a collection.
+ */
+export class CollectionStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.html b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.scss b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
new file mode 100644
index 0000000000..76aac6aa15
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/community-statistics-page/community-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CommunityStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/community-statistics-page/community-statistics-page.component';
+
+@Component({
+  selector: 'ds-collection-statistics-page',
+  // styleUrls: ['./community-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/community-statistics-page/community-statistics-page.component.scss'],
+  // templateUrl: './community-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component representing the statistics page for a community.
+ */
+export class CommunityStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.html b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.scss b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
new file mode 100644
index 0000000000..f2adbc9c21
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/item-statistics-page/item-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { ItemStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/item-statistics-page/item-statistics-page.component';
+
+@Component({
+  selector: 'ds-item-statistics-page',
+  // styleUrls: ['./item-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/item-statistics-page/item-statistics-page.component.scss'],
+  // templateUrl: './item-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component representing the statistics page for an item.
+ */
+export class ItemStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.html b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.scss b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
new file mode 100644
index 0000000000..30dc6502ea
--- /dev/null
+++ b/src/themes/custom/app/statistics-page/site-statistics-page/site-statistics-page.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { SiteStatisticsPageComponent as BaseComponent } from '../../../../../app/statistics-page/site-statistics-page/site-statistics-page.component';
+
+@Component({
+  selector: 'ds-site-statistics-page',
+  // styleUrls: ['./site-statistics-page.component.scss'],
+  styleUrls: ['../../../../../app/statistics-page/site-statistics-page/site-statistics-page.component.scss'],
+  // templateUrl: './site-statistics-page.component.html',
+  templateUrl: '../../../../../app/statistics-page/statistics-page/statistics-page.component.html'
+})
+
+/**
+ * Component representing the site-wide statistics page.
+ */
+export class SiteStatisticsPageComponent extends BaseComponent {}
+
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.html b/src/themes/custom/app/submission/edit/submission-edit.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.scss b/src/themes/custom/app/submission/edit/submission-edit.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/edit/submission-edit.component.ts b/src/themes/custom/app/submission/edit/submission-edit.component.ts
new file mode 100644
index 0000000000..88559d30b4
--- /dev/null
+++ b/src/themes/custom/app/submission/edit/submission-edit.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SubmissionEditComponent as BaseComponent } from '../../../../../app/submission/edit/submission-edit.component';
+
+/**
+ * This component allows to edit an existing workspaceitem/workflowitem.
+ */
+@Component({
+  selector: 'ds-submission-edit',
+  // styleUrls: ['./submission-edit.component.scss'],
+  styleUrls: ['../../../../../app/submission/edit/submission-edit.component.scss'],
+  // templateUrl: './submission-edit.component.html'
+  templateUrl: '../../../../../app/submission/edit/submission-edit.component.html'
+})
+export class SubmissionEditComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.html b/src/themes/custom/app/submission/import-external/submission-import-external.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.scss b/src/themes/custom/app/submission/import-external/submission-import-external.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/import-external/submission-import-external.component.ts b/src/themes/custom/app/submission/import-external/submission-import-external.component.ts
new file mode 100644
index 0000000000..cf541b85c9
--- /dev/null
+++ b/src/themes/custom/app/submission/import-external/submission-import-external.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { fadeIn } from '../../../../../app/shared/animations/fade';
+import { SubmissionImportExternalComponent as BaseComponent } from '../../../../../app/submission/import-external/submission-import-external.component';
+
+/**
+ * This component allows to submit a new workspaceitem importing the data from an external source.
+ */
+@Component({
+  selector: 'ds-submission-import-external',
+  // styleUrls: ['./submission-import-external.component.scss'],
+  styleUrls: ['../../../../../app/submission/import-external/submission-import-external.component.scss'],
+  // templateUrl: './submission-import-external.component.html',
+  templateUrl: '../../../../../app/submission/import-external/submission-import-external.component.html',
+  animations: [fadeIn]
+})
+export class SubmissionImportExternalComponent extends BaseComponent {
+
+}
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.html b/src/themes/custom/app/submission/submit/submission-submit.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.scss b/src/themes/custom/app/submission/submit/submission-submit.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/submission/submit/submission-submit.component.ts b/src/themes/custom/app/submission/submit/submission-submit.component.ts
new file mode 100644
index 0000000000..05c3389cb7
--- /dev/null
+++ b/src/themes/custom/app/submission/submit/submission-submit.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { SubmissionSubmitComponent as BaseComponent } from '../../../../../app/submission/submit/submission-submit.component';
+
+/**
+ * This component allows to submit a new workspaceitem.
+ */
+@Component({
+  selector: 'ds-submission-submit',
+  // styleUrls: ['./submission-submit.component.scss'],
+  styleUrls: ['../../../../../app/submission/submit/submission-submit.component.scss'],
+  // templateUrl: './submission-submit.component.html'
+  templateUrl: '../../../../../app/submission/submit/submission-submit.component.html'
+})
+export class SubmissionSubmitComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 1f451df1bc..23fcf4c325 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AdminAccessControlModule } from '../../app/+admin/admin-access-control/admin-access-control.module';
 import { AdminRegistriesModule } from '../../app/+admin/admin-registries/admin-registries.module';
 import { AdminSearchModule } from '../../app/+admin/admin-search-page/admin-search.module';
 import { AdminWorkflowModuleModule } from '../../app/+admin/admin-workflow-page/admin-workflow.module';
@@ -37,17 +36,93 @@ import { AppModule } from '../../app/app.module';
 import { PublicationComponent } from './app/+item-page/simple/item-types/publication/publication.component';
 import { ItemPageModule } from '../../app/+item-page/item-page.module';
 import { RouterModule } from '@angular/router';
+import { AccessControlModule } from '../../app/access-control/access-control.module';
+import { BrowseBySwitcherComponent } from './app/+browse-by/+browse-by-switcher/browse-by-switcher.component';
+import { CommunityListPageComponent } from './app/community-list-page/community-list-page.component';
+import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module';
+import { SearchPageComponent } from './app/+search-page/search-page.component';
+import { InfoModule } from '../../app/info/info.module';
+import { EndUserAgreementComponent } from './app/info/end-user-agreement/end-user-agreement.component';
+import { PageNotFoundComponent } from './app/pagenotfound/pagenotfound.component';
+import { ObjectNotFoundComponent } from './app/+lookup-by-id/objectnotfound/objectnotfound.component';
+import { ForbiddenComponent } from './app/forbidden/forbidden.component';
+import { PrivacyComponent } from './app/info/privacy/privacy.component';
+import { CollectionStatisticsPageComponent } from './app/statistics-page/collection-statistics-page/collection-statistics-page.component';
+import { CommunityStatisticsPageComponent } from './app/statistics-page/community-statistics-page/community-statistics-page.component';
+import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module';
+import { ItemStatisticsPageComponent } from './app/statistics-page/item-statistics-page/item-statistics-page.component';
+import { SiteStatisticsPageComponent } from './app/statistics-page/site-statistics-page/site-statistics-page.component';
+import { CommunityPageComponent } from './app/+community-page/community-page.component';
+import { CollectionPageComponent } from './app/+collection-page/collection-page.component';
+import { CommunityPageModule } from '../../app/+community-page/community-page.module';
+import { CollectionPageModule } from '../../app/+collection-page/collection-page.module';
+import { ConfigurationSearchPageComponent } from './app/+search-page/configuration-search-page.component';
+import { ItemPageComponent } from './app/+item-page/simple/item-page.component';
+import { FullItemPageComponent } from './app/+item-page/full/full-item-page.component';
+import { LoginPageComponent } from './app/+login-page/login-page.component';
+import { LogoutPageComponent } from './app/+logout-page/logout-page.component';
+import { CreateProfileComponent } from './app/register-page/create-profile/create-profile.component';
+import { ForgotEmailComponent } from './app/forgot-password/forgot-password-email/forgot-email.component';
+import { ForgotPasswordFormComponent } from './app/forgot-password/forgot-password-form/forgot-password-form.component';
+import { ProfilePageComponent } from './app/profile-page/profile-page.component';
+import { RegisterEmailComponent } from './app/register-page/register-email/register-email.component';
+import { SubmissionEditComponent } from './app/submission/edit/submission-edit.component';
+import { SubmissionImportExternalComponent } from './app/submission/import-external/submission-import-external.component';
+import { SubmissionSubmitComponent } from './app/submission/submit/submission-submit.component';
+import { MyDSpacePageComponent } from './app/+my-dspace-page/my-dspace-page.component';
+import { WorkflowItemSendBackComponent } from './app/+workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
+import { WorkflowItemDeleteComponent } from './app/+workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component';
+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 { FooterComponent } from './app/footer/footer.component';
+import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
 
 const DECLARATIONS = [
   HomePageComponent,
   HomeNewsComponent,
   RootComponent,
-  PublicationComponent
+  PublicationComponent,
+  BrowseBySwitcherComponent,
+  CommunityListPageComponent,
+  SearchPageComponent,
+  ConfigurationSearchPageComponent,
+  EndUserAgreementComponent,
+  PageNotFoundComponent,
+  ObjectNotFoundComponent,
+  ForbiddenComponent,
+  PrivacyComponent,
+  CollectionStatisticsPageComponent,
+  CommunityStatisticsPageComponent,
+  ItemStatisticsPageComponent,
+  SiteStatisticsPageComponent,
+  CommunityPageComponent,
+  CollectionPageComponent,
+  ItemPageComponent,
+  FullItemPageComponent,
+  LoginPageComponent,
+  LogoutPageComponent,
+  CreateProfileComponent,
+  ForgotEmailComponent,
+  ForgotPasswordFormComponent,
+  ProfilePageComponent,
+  RegisterEmailComponent,
+  MyDSpacePageComponent,
+  SubmissionEditComponent,
+  SubmissionImportExternalComponent,
+  SubmissionSubmitComponent,
+  WorkflowItemDeleteComponent,
+  WorkflowItemSendBackComponent,
+  FooterComponent,
+  HeaderComponent,
+  NavbarComponent,
+  BreadcrumbsComponent
 ];
 
 @NgModule({
   imports: [
-    AdminAccessControlModule,
+    AccessControlModule,
     AdminRegistriesModule,
     AdminSearchModule,
     AdminWorkflowModuleModule,
@@ -55,8 +130,11 @@ const DECLARATIONS = [
     BitstreamFormatsModule,
     BrowseByModule,
     CollectionFormModule,
+    CollectionPageModule,
     CommonModule,
     CommunityFormModule,
+    CommunityListPageModule,
+    CommunityPageModule,
     CoreModule,
     DragDropModule,
     ItemPageModule,
@@ -65,6 +143,7 @@ const DECLARATIONS = [
     HomePageModule,
     HttpClientModule,
     IdlePreloadModule,
+    InfoModule,
     JournalEntitiesModule,
     MenuModule,
     MyDspaceSearchModule,
@@ -78,19 +157,23 @@ const DECLARATIONS = [
     SearchPageModule,
     SharedModule,
     StatisticsModule,
+    StatisticsPageModule,
     StoreModule,
     StoreRouterConnectingModule,
     TranslateModule,
+    SubmissionModule,
+    MyDSpacePageModule,
+    MyDspaceSearchModule,
   ],
   declarations: DECLARATIONS
 })
 
-/**
- * This module serves as an index for all the components in this theme.
- * It should import all other modules, so the compiler knows where to find any components referenced
- * from a component in this theme
- * It is purposefully not exported, it should never be imported anywhere else, its only purpose is
- * to give lazily loaded components a context in which they can be compiled successfully
- */
+  /**
+   * This module serves as an index for all the components in this theme.
+   * It should import all other modules, so the compiler knows where to find any components referenced
+   * from a component in this theme
+   * It is purposefully not exported, it should never be imported anywhere else, its only purpose is
+   * to give lazily loaded components a context in which they can be compiled successfully
+   */
 class ThemeModule {
 }
diff --git a/yarn.lock b/yarn.lock
index f042076b0d..29e0ee4648 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1247,6 +1247,11 @@
     merge-source-map "^1.1.0"
     schema-utils "^2.7.0"
 
+"@kolkov/ngx-gallery@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@kolkov/ngx-gallery/-/ngx-gallery-1.2.3.tgz#bb15d4b64a5c03905677aa4ca741835aabe41f43"
+  integrity sha512-Dpnhwq3DGPSXrNt65gexo+/Smb2L0bne14A0WONN04+racETtcY33fqFvNWfRw5Nvk2Eza+sq95eEA0NbgF/6g==
+
 "@ng-bootstrap/ng-bootstrap@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-7.0.0.tgz#3bfa62eb52fdb891b1ce693ea11c39127e2d1ab7"
@@ -10621,10 +10626,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sortablejs@1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.1.tgz#3d52b00f871be00f00f84d99a60d120bf3dfe52c"
-  integrity sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ==
+sortablejs@1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
+  integrity sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
 
 source-list-map@^2.0.0:
   version "2.0.1"