diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 4593549ea..70483cc45 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -6,7 +6,6 @@ import { AppStateGuard } from '@state/app-state.guard';
 import { DictionaryListingScreenComponent } from './screens/dictionary-listing/dictionary-listing-screen.component';
 import { DictionaryOverviewScreenComponent } from './screens/dictionary-overview/dictionary-overview-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { RulesScreenComponent } from './screens/rules/rules-screen.component';
 import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
 import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
@@ -72,12 +71,13 @@ const routes: Routes = [
                     },
                     {
                         path: 'rules',
-                        component: RulesScreenComponent,
+                        component: BaseDossierTemplateScreenComponent,
                         canActivate: [CompositeRouteGuard],
                         canDeactivate: [PendingChangesGuard],
                         data: {
                             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
                         },
+                        loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
                     },
                     {
                         path: 'file-attributes',
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index aee060360..b8a1d2616 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
-import { RulesScreenComponent } from './screens/rules/rules-screen.component';
 import { SharedModule } from '@shared/shared.module';
 import { AuditScreenComponent } from './screens/audit/audit-screen.component';
 import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
@@ -66,7 +65,6 @@ const dialogs = [
 ];
 
 const screens = [
-    RulesScreenComponent,
     AuditScreenComponent,
     DefaultColorsScreenComponent,
     DictionaryListingScreenComponent,
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
deleted file mode 100644
index 8f63c3a6d..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <div class="flex-1 actions">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="editor-container">
-            <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-        </div>
-        <div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
-            <iqser-icon-button
-                (action)="save()"
-                [label]="'rules-screen.save-changes' | translate"
-                [type]="iconButtonTypes.primary"
-                icon="iqser:check"
-            ></iqser-icon-button>
-            <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
-        </div>
-    </div>
-</section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss
deleted file mode 100644
index 2a5860784..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.editor-container {
-    width: 100%;
-    padding-top: 15px;
-    padding-left: 15px;
-}
-
-ngx-monaco-editor {
-    height: 100%;
-    width: 100%;
-}
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html
new file mode 100644
index 000000000..91cb6eac3
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html
@@ -0,0 +1,11 @@
+<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
+
+<div *ngIf="changed && permissionsService.isAdmin() && !isLeaving" class="changes-box">
+    <iqser-icon-button
+        (action)="save()"
+        [label]="'rules-screen.save-changes' | translate"
+        [type]="iconButtonTypes.primary"
+        icon="iqser:check"
+    ></iqser-icon-button>
+    <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
+</div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss
new file mode 100644
index 000000000..72374e679
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss
@@ -0,0 +1,10 @@
+:host {
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 15px 0 0 15px;
+}
+
+ngx-monaco-editor {
+    height: 100%;
+    width: 100%;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
similarity index 98%
rename from apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
rename to apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
index 56592d0f0..17daa1aa7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
@@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { saveAs } from 'file-saver';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
-import { RulesService } from '../../services/rules.service';
+import { RulesService } from '../../../services/rules.service';
 import { firstValueFrom } from 'rxjs';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
new file mode 100644
index 000000000..e2824d79e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '../../../shared/shared.module';
+import { RulesScreenComponent } from './rules-screen/rules-screen.component';
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+
+const routes = [{ path: '', component: RulesScreenComponent }];
+
+@NgModule({
+    declarations: [RulesScreenComponent],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule],
+})
+export class RulesModule {}