diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
index 6b58f9763..6808a7419 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@@ -1,4 +1,4 @@
-<div class="red-top-bar">
+<div class="red-top-bar" [class.fullscreen]="fullScreenService.fullScreen">
     <div class="top-bar-row">
         <div class="menu visible-lt-lg">
             <button [matMenuTriggerFor]="menuNav" mat-flat-button>
@@ -64,6 +64,6 @@
     </div>
     <div class="divider"></div>
 </div>
-<div class="red-content">
+<div class="red-content" [class.fullscreen]="fullScreenService.fullScreen">
     <router-outlet></router-outlet>
 </div>
diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
index 25e165587..df11389e7 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
@@ -4,6 +4,7 @@ import { AppStateService } from '../../state/app-state.service';
 import { LanguageService } from '../../i18n/language.service';
 import { PermissionsService } from '../../common/service/permissions.service';
 import { UserPreferenceService } from '../../common/service/user-preference.service';
+import { FullScreenService } from '../../utils/full-screen.service';
 
 @Component({
     selector: 'redaction-base-screen',
@@ -15,6 +16,8 @@ export class BaseScreenComponent {
         public readonly appStateService: AppStateService,
         public readonly permissionsService: PermissionsService,
         public readonly userPreferenceService: UserPreferenceService,
+        public readonly fullScreenService: FullScreenService,
+
         private readonly _languageService: LanguageService,
         private readonly _userService: UserService
     ) {}
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index b7260aeb8..627bec482 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -66,6 +66,12 @@
             <div class="vertical-line"></div>
 
             <redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
+            <redaction-circle-button
+                (action)="fullScreenService.toggleFullScreen()"
+                icon="red:plus"
+                tooltip="common.fullscreen"
+                tooltipPosition="before"
+            ></redaction-circle-button>
             <redaction-circle-button
                 [routerLink]="['/ui/projects/' + appStateService.activeProjectId]"
                 class="ml-8"
@@ -76,7 +82,7 @@
         </div>
     </div>
 
-    <div class="flex red-content-inner">
+    <div class="flex red-content-inner" [class.fullscreen]="fullScreenService.fullScreen">
         <div class="left-container">
             <redaction-pdf-viewer
                 (annotationSelected)="handleAnnotationSelected($event)"
@@ -91,6 +97,13 @@
 
         <div class="right-fixed-container">
             <div class="right-title heading" translate="file-preview.tabs.annotations.label">
+                <redaction-circle-button
+                    *ngIf="fullScreenService.fullScreen"
+                    (action)="fullScreenService.toggleFullScreen()"
+                    icon="red:plus"
+                    tooltip="common.fullscreen"
+                    tooltipPosition="before"
+                ></redaction-circle-button>
                 <redaction-filter
                     (filtersChanged)="filtersChanged($event)"
                     [chevron]="true"
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 9a1a3afd4..aa754db60 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -4,11 +4,21 @@
 redaction-pdf-viewer {
     position: absolute;
     width: calc(100vw - #{$right-container-width});
-    height: calc(100vh - 110px);
-    top: 110px;
+    height: calc(100vh - 111px);
+    transition: height linear 0.2s;
     z-index: 2;
 }
 
+.red-content-inner.fullscreen {
+    redaction-pdf-viewer {
+        height: 100vh;
+    }
+
+    .right-content {
+        height: calc(100vh - 71px) !important;
+    }
+}
+
 .vertical-line {
     width: 1px;
     height: 30px;
@@ -48,7 +58,8 @@ redaction-pdf-viewer {
     }
 
     .right-content {
-        height: calc(100vh - 110px - 72px);
+        height: calc(100vh - 110px - 71px);
+        transition: height linear 0.2s;
         box-sizing: border-box;
         display: flex;
 
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index e964da94d..61d11a716 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -25,6 +25,7 @@ import { PermissionsService } from '../../../common/service/permissions.service'
 import { Subscription, timer } from 'rxjs';
 import { processFilters } from '../../../common/filter/utils/filter-utils';
 import { UserPreferenceService } from '../../../common/service/user-preference.service';
+import { FullScreenService } from '../../../utils/full-screen.service';
 
 const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
@@ -60,6 +61,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         public readonly appStateService: AppStateService,
         public readonly permissionsService: PermissionsService,
         public readonly userPreferenceService: UserPreferenceService,
+        public readonly fullScreenService: FullScreenService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _activatedRoute: ActivatedRoute,
         private readonly _dialogService: DialogService,
diff --git a/apps/red-ui/src/app/utils/full-screen.service.ts b/apps/red-ui/src/app/utils/full-screen.service.ts
new file mode 100644
index 000000000..b5ddf470f
--- /dev/null
+++ b/apps/red-ui/src/app/utils/full-screen.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FullScreenService {
+    public fullScreen = false;
+
+    constructor(private readonly _router: Router) {
+        this._router.events.subscribe((route) => {
+            if (route instanceof NavigationStart) {
+                if (route.url.indexOf('file') === -1) {
+                    this.fullScreen = false;
+                }
+            }
+        });
+    }
+
+    public toggleFullScreen() {
+        this.fullScreen = !this.fullScreen;
+    }
+}
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index de52c2284..5306079da 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -24,6 +24,7 @@ body {
     box-sizing: border-box;
     background-color: $white;
     z-index: 3;
+    transition: top linear 0.2s;
 
     .filters {
         gap: 2px;
@@ -54,55 +55,83 @@ body {
     }
 }
 
-.red-content-inner {
-    margin-top: 50px;
-}
+.red-content {
+    width: 100vw;
+    height: calc(100vh - 61px);
+    overflow: auto;
+    position: absolute;
+    transition: top linear 0.2s, height linear 0.2s;
+    top: 61px;
 
-.left-container {
-    height: calc(100vh - 61px - 50px);
-    transition: width ease-in-out 0.1s;
+    .red-content-inner {
+        position: absolute;
+        top: 50px;
 
-    &.extended {
-        width: calc(100vw - 60px) !important;
-    }
-}
+        .left-container {
+            transition: width linear 0.1s, height linear 0.2s;
 
-.right-fixed-container {
-    border-left: 1px solid $grey-4;
-    background: $white;
-    position: fixed;
-    right: 0;
-    z-index: 2;
-    transition: width ease-in-out 0.1s;
-
-    .collapsed-wrapper {
-        display: none;
-    }
-
-    &.collapsed {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        width: 60px !important;
-        display: flex;
-
-        div:not(.collapsed-wrapper) {
-            display: none;
+            &.extended {
+                width: calc(100vw - 60px) !important;
+            }
         }
 
-        .collapsed-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 60px;
+        .right-fixed-container {
+            border-left: 1px solid $grey-4;
+            background: $white;
+            position: fixed;
+            right: 0;
+            top: 111px;
+            z-index: 2;
+            transition: width linear 0.1s, top linear 0.2s, height linear 0.2s;
 
-            div {
-                display: initial;
+            .collapsed-wrapper {
+                display: none;
             }
 
-            .all-caps-label {
-                transform: rotate(90deg) translateX(50%);
-                white-space: nowrap;
-                margin-top: 10px;
+            &.collapsed {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+                width: 60px !important;
+                display: flex;
+
+                div:not(.collapsed-wrapper) {
+                    display: none;
+                }
+
+                .collapsed-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    width: 60px;
+
+                    div {
+                        display: initial;
+                    }
+
+                    .all-caps-label {
+                        transform: rotate(90deg) translateX(50%);
+                        white-space: nowrap;
+                        margin-top: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.fullscreen {
+        height: 100vh;
+        top: 0;
+
+        .page-header {
+            top: -51px;
+        }
+
+        .red-content-inner {
+            top: 0;
+
+            .right-fixed-container {
+                top: 0;
+                height: 100vh;
             }
         }
     }
@@ -155,10 +184,17 @@ body {
 
 .red-top-bar {
     height: 61px;
-    width: 100%;
+    position: absolute;
+    width: 100vw;
     max-height: 61px;
     display: flex;
     flex-direction: column;
+    top: 0;
+    transition: top linear 0.2s;
+
+    &.fullscreen {
+        top: -61px;
+    }
 
     .top-bar-row {
         height: 60px;
@@ -199,12 +235,6 @@ body {
     }
 }
 
-.red-content {
-    width: 100vw;
-    height: calc(100vh - 61px);
-    overflow: auto;
-}
-
 .hidden {
     display: none !important;
 }