diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index bcd985e8a..de1c1fa38 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -99,7 +99,7 @@ import { HasScrollbarDirective } from './utils/has-scrollbar.directive';
 import { RuleSetsListingScreenComponent } from './screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component';
 import { AddEditRuleSetDialogComponent } from './screens/admin/rule-sets-listing-screen/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component';
 import { RuleSetActionsComponent } from './components/rule-set-actions/rule-set-actions.component';
-import { RuleSetViewSwitchComponent } from './components/rule-set-view-switch/rule-set-view-switch.component';
+import { TabsComponent } from './components/rule-set-view-switch/tabs.component';
 import { MatSliderModule } from '@angular/material/slider';
 import { PendingChangesGuard } from './utils/can-deactivate.guard';
 import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component';
@@ -370,7 +370,7 @@ const matImports = [
         FileDownloadBtnComponent,
         ProjectListingActionsComponent,
         RuleSetActionsComponent,
-        RuleSetViewSwitchComponent,
+        TabsComponent,
         LicenseInformationScreenComponent,
         DefaultColorsScreenComponent,
         EditColorDialogComponent,
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html b/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html
deleted file mode 100644
index 810deb91e..000000000
--- a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-    <div class="red-input-group slider-row">
-        <mat-button-toggle-group [value]="screen" (change)="switchView($event)" appearance="legacy">
-            <mat-button-toggle [value]="'dictionaries'"> {{ 'dictionaries' | translate }}</mat-button-toggle>
-            <mat-button-toggle [value]="'rules'" *ngIf="userPreferenceService.areDevFeaturesEnabled"> {{ 'rule-editor' | translate }}</mat-button-toggle>
-            <mat-button-toggle [value]="'default-colors'"> {{ 'default-colors' | translate }}</mat-button-toggle>
-            <mat-button-toggle [value]="'watermark'"> {{ 'watermark' | translate }}</mat-button-toggle>
-        </mat-button-toggle-group>
-    </div>
-</div>
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss b/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html
new file mode 100644
index 000000000..0ffea530a
--- /dev/null
+++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html
@@ -0,0 +1,10 @@
+<ng-container *ngFor="let tab of tabs">
+    <div
+        class="red-tab"
+        *ngIf="!tab.onlyDevMode || userPreferenceService.areDevFeaturesEnabled"
+        (click)="switchView(tab.screen)"
+        [class.active]="tab.screen === screen"
+    >
+        {{ tab.label || tab.screen | translate }}
+    </div>
+</ng-container>
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss
new file mode 100644
index 000000000..e7a72018d
--- /dev/null
+++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss
@@ -0,0 +1,3 @@
+:host {
+    display: flex;
+}
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts
similarity index 55%
rename from apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts
rename to apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts
index 7ff1508c8..d73b195b5 100644
--- a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts
+++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts
@@ -4,13 +4,20 @@ import { AppStateService } from '../../state/app-state.service';
 import { UserPreferenceService } from '../../common/service/user-preference.service';
 
 @Component({
-    selector: 'redaction-rule-set-view-switch',
-    templateUrl: './rule-set-view-switch.component.html',
-    styleUrls: ['./rule-set-view-switch.component.scss']
+    selector: 'redaction-tabs',
+    templateUrl: './tabs.component.html',
+    styleUrls: ['./tabs.component.scss']
 })
-export class RuleSetViewSwitchComponent implements OnInit {
+export class TabsComponent implements OnInit {
     @Input() public screen: 'rules' | 'dictionaries' | 'watermark' | 'default-colors';
 
+    public tabs: { screen: string; onlyDevMode?: boolean; label?: string }[] = [
+        { screen: 'dictionaries' },
+        { screen: 'rules', onlyDevMode: true, label: 'rule-editor' },
+        { screen: 'default-colors' },
+        { screen: 'watermark' }
+    ];
+
     constructor(
         public readonly userPreferenceService: UserPreferenceService,
         private readonly _router: Router,
@@ -19,7 +26,7 @@ export class RuleSetViewSwitchComponent implements OnInit {
 
     ngOnInit(): void {}
 
-    public switchView($event) {
-        this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + $event.value]);
+    public switchView(screen: string) {
+        this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]);
     }
 }
diff --git a/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html b/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html
index f08b9cc43..f2eecf50f 100644
--- a/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html
@@ -2,7 +2,7 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
-        <redaction-rule-set-view-switch [screen]="'default-colors'"></redaction-rule-set-view-switch>
+        <redaction-tabs [screen]="'default-colors'"></redaction-tabs>
 
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
index d5dfaca40..d56e2703f 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
@@ -2,7 +2,7 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
-        <redaction-rule-set-view-switch [screen]="'dictionaries'"></redaction-rule-set-view-switch>
+        <redaction-tabs [screen]="'dictionaries'"></redaction-tabs>
 
         <div class="flex-1 actions">
             <redaction-rule-set-actions> </redaction-rule-set-actions>
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index 3fb484ad7..6966e1e74 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -2,7 +2,7 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
-        <redaction-rule-set-view-switch [screen]="'rules'"></redaction-rule-set-view-switch>
+        <redaction-tabs [screen]="'rules'"></redaction-tabs>
 
         <div class="flex-1 actions">
             <redaction-rule-set-actions></redaction-rule-set-actions>
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 6c13f2d92..ea6c8c85b 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -2,7 +2,7 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
 
-        <redaction-rule-set-view-switch [screen]="'watermark'"></redaction-rule-set-view-switch>
+        <redaction-tabs [screen]="'watermark'"></redaction-tabs>
 
         <div class="actions flex-1">
             <redaction-circle-button
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
index a279ebf3b..6877969c8 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss
@@ -51,10 +51,10 @@
             transition: background-color 0.2s;
 
             &.disabled {
-                cursor: default;
+                cursor: not-allowed;
             }
 
-            &:hover:not(.disabled) {
+            &:not(.disabled):not(.active):hover {
                 background-color: darken($grey-6, 2);
             }
 
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 1fff598d8..20e3f0d77 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
@@ -1,20 +1,31 @@
 <section *ngIf="appStateService.activeFile" [class.fullscreen]="fullScreen">
     <div class="page-header">
-        <div class="flex-1">
-            <div class="red-input-group slider-row">
-                <mat-button-toggle-group [value]="viewMode" (change)="switchView($event)" appearance="legacy">
-                    <mat-button-toggle [value]="'STANDARD'">
-                        <div [matTooltip]="'file-preview.standard-tooltip' | translate">{{ 'file-preview.standard' | translate }}</div>
-                    </mat-button-toggle>
-                    <mat-button-toggle [value]="'DELTA'" [disabled]="!canSwitchToDeltaView">
-                        <div [matTooltip]="'file-preview.delta-tooltip' | translate">{{ 'file-preview.delta' | translate }}</div>
-                    </mat-button-toggle>
-                    <mat-button-toggle [value]="'REDACTED'" [disabled]="canNotSwitchToRedactedView">
-                        <div [matTooltip]="'file-preview.redacted-tooltip' | translate">
-                            {{ 'file-preview.redacted' | translate }}
-                        </div>
-                    </mat-button-toggle>
-                </mat-button-toggle-group>
+        <div class="flex flex-1">
+            <div
+                class="red-tab"
+                [matTooltip]="'file-preview.standard-tooltip' | translate"
+                [class.active]="viewMode === 'STANDARD'"
+                (click)="switchView('STANDARD')"
+            >
+                {{ 'file-preview.standard' | translate }}
+            </div>
+            <div
+                class="red-tab"
+                [matTooltip]="'file-preview.delta-tooltip' | translate"
+                [class.active]="viewMode === 'DELTA'"
+                [class.disabled]="!canSwitchToDeltaView"
+                (click)="canSwitchToDeltaView && switchView('DELTA')"
+            >
+                {{ 'file-preview.delta' | translate }}
+            </div>
+            <div
+                class="red-tab"
+                [matTooltip]="'file-preview.redacted-tooltip' | translate"
+                [class.active]="viewMode === 'REDACTED'"
+                [class.disabled]="!canSwitchToRedactedView"
+                (click)="canSwitchToRedactedView && switchView('REDACTED')"
+            >
+                {{ 'file-preview.redacted' | translate }}
             </div>
         </div>
 
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 22853dd02..605826eee 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
@@ -89,8 +89,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         return this._instance?.docViewer?.getCurrentPage();
     }
 
-    get canNotSwitchToRedactedView() {
-        return this.permissionsService.fileRequiresReanalysis();
+    get canSwitchToRedactedView() {
+        return !this.permissionsService.fileRequiresReanalysis();
     }
 
     get canSwitchToDeltaView() {
@@ -715,8 +715,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
         }
     }
 
-    switchView($event: MatButtonToggleChange) {
-        this.viewMode = $event.value;
+    switchView(viewMode: ViewMode) {
+        this.viewMode = viewMode;
         this.updateViewMode();
     }
 
diff --git a/apps/red-ui/src/assets/styles/red-tabs.scss b/apps/red-ui/src/assets/styles/red-tabs.scss
new file mode 100644
index 000000000..8cbc5e753
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-tabs.scss
@@ -0,0 +1,29 @@
+@import './red-variables';
+
+.red-tab {
+    &:not(:last-child) {
+        margin-right: 2px;
+    }
+
+    height: 30px;
+    line-height: 30px;
+    padding: 0 14px;
+    border-radius: 17px;
+    transition: background-color 0.2s;
+    cursor: pointer;
+
+    &:not(.disabled):not(.active):hover {
+        background-color: $grey-6;
+    }
+
+    &.active {
+        background-color: rgba($primary, 0.1);
+        font-weight: 600;
+        color: $primary;
+    }
+
+    &.disabled {
+        color: rgba($grey-1, 0.3);
+        cursor: not-allowed;
+    }
+}
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index f7531a252..46008285d 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -26,3 +26,4 @@
 @import 'red-slider';
 @import 'red-loading';
 @import 'red-progress-bar';
+@import 'red-tabs';
diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss
index 07c95ccad..13bea0ab6 100644
--- a/apps/red-ui/src/assets/styles/red-toggle-button.scss
+++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss
@@ -12,11 +12,6 @@
             color: $grey-7;
         }
     }
-
-    .mat-button-toggle:not(:first-of-type):not(:last-of-type) {
-        border-left: 1px solid $white;
-        border-right: 1px solid $white;
-    }
 }
 
 .mat-button-toggle-disabled {