diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts
index fe326ddcf7..1c6cd83e9c 100644
--- a/src/app/+item-page/item-page.module.ts
+++ b/src/app/+item-page/item-page.module.ts
@@ -27,6 +27,10 @@ import { JournalEntitiesModule } from '../entity-groups/journal-entities/journal
 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
@@ -54,6 +58,9 @@ const DECLARATIONS = [
   ItemComponent,
   UploadBitstreamComponent,
   AbstractIncrementalListComponent,
+  MediaViewerComponent,
+  MediaViewerVideoComponent,
+  MediaViewerImageComponent
 ];
 
 @NgModule({
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index b79cf52fbb..07eadee391 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -36,7 +36,7 @@ body {
 }
 
 ds-header-navbar-wrapper {
-  z-index: var(--ds-nav-z-index);
+  z-index: 0;
 }
 
 ds-admin-sidebar {
@@ -47,3 +47,12 @@ ds-admin-sidebar {
 .ds-full-screen-loader {
   height: 100vh;
 }
+
+.media-viewer
+  .change-gallery
+  .ngx-gallery
+  ngx-gallery-preview.ngx-gallery-active {
+  right: 0;
+  left: auto;
+  width: 96%;
+}