diff --git a/ScriptBeeClient/src/app/components/instance-manager/instance-manager.component.scss b/ScriptBeeClient/src/app/components/instance-manager/instance-manager.component.scss
index e3baa8db..90d1b031 100644
--- a/ScriptBeeClient/src/app/components/instance-manager/instance-manager.component.scss
+++ b/ScriptBeeClient/src/app/components/instance-manager/instance-manager.component.scss
@@ -12,6 +12,7 @@
 
 .instance-button-text {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
 
diff --git a/ScriptBeeClient/src/app/pages/projects/project-details/analysis/scripts-content/selected-script/run-script-loading/run-script-loading.component.scss b/ScriptBeeClient/src/app/pages/projects/project-details/analysis/scripts-content/selected-script/run-script-loading/run-script-loading.component.scss
index 2d226b6a..c95b45d6 100644
--- a/ScriptBeeClient/src/app/pages/projects/project-details/analysis/scripts-content/selected-script/run-script-loading/run-script-loading.component.scss
+++ b/ScriptBeeClient/src/app/pages/projects/project-details/analysis/scripts-content/selected-script/run-script-loading/run-script-loading.component.scss
@@ -13,7 +13,8 @@
 }
 
 .loading-container {
-  background-color: white;
+  background-color: var(--mat-sys-surface-container-high);
+  color: var(--mat-sys-on-surface);
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
diff --git a/ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.html b/ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.html
index 0261142c..c8fde1e0 100644
--- a/ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.html
+++ b/ScriptBeeClient/src/app/pages/projects/project-details/model/project-model-page.component.html
@@ -23,28 +23,28 @@ <h2>No Instance Selected</h2>
         </mat-card>
       </div>
     } @else if (!currentInstance()) {
-      <app-centered-spinner text="Synchronizing and finding selected instance..."/>
+      <app-centered-spinner text="Synchronizing and finding selected instance..." />
     } @else {
       <mat-card class="project-details-card" appearance="outlined">
-        <app-instance-info [instanceInfo]="currentInstance()!"/>
+        <app-instance-info [instanceInfo]="currentInstance()!" />
 
-        <app-upload-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id"/>
+        <app-upload-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id" />
 
-        <mat-divider/>
+        <mat-divider />
 
-        <app-load-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id"/>
+        <app-load-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id" />
 
-        <mat-divider/>
+        <mat-divider />
 
-        <app-link-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id"/>
+        <app-link-models [projectId]="projectId()!" [instanceId]="currentInstance()!.id" />
 
-        <mat-divider/>
+        <mat-divider />
 
-        <app-currently-loaded-models [instanceId]="currentInstance()!.id"/>
+        <app-currently-loaded-models [instanceId]="currentInstance()!.id" />
 
-        <mat-divider/>
+        <mat-divider />
 
-        <app-project-context [projectId]="projectId()!" [instanceId]="currentInstance()!.id"/>
+        <app-project-context [projectId]="projectId()!" [instanceId]="currentInstance()!.id" />
       </mat-card>
     }
   </div>
diff --git a/ScriptBeeClient/src/app/services/theme/theme.service.ts b/ScriptBeeClient/src/app/services/theme/theme.service.ts
index e6bbcddd..9b2d1558 100644
--- a/ScriptBeeClient/src/app/services/theme/theme.service.ts
+++ b/ScriptBeeClient/src/app/services/theme/theme.service.ts
@@ -1,16 +1,17 @@
-import { effect, Injectable, signal } from '@angular/core';
+import { DOCUMENT, effect, inject, Injectable, signal } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ThemeService {
+  private readonly document = inject(DOCUMENT);
   private darkModeSignal = signal(localStorage.getItem('theme') === 'Dark');
   readonly darkMode = this.darkModeSignal.asReadonly();
 
   constructor() {
     effect(() => {
       localStorage.setItem('theme', this.darkModeSignal() ? 'Dark' : 'Light');
-      document.body.classList.toggle('darkMode', this.darkModeSignal());
+      this.document.documentElement.classList.toggle('darkMode', this.darkModeSignal());
     });
   }
 
diff --git a/ScriptBeeClient/src/styles.scss b/ScriptBeeClient/src/styles.scss
index cd79a42a..970ec844 100644
--- a/ScriptBeeClient/src/styles.scss
+++ b/ScriptBeeClient/src/styles.scss
@@ -3,24 +3,22 @@
 @use 'themes/yellow_deep-orange_theme-colors';
 
 html {
+  color-scheme: light;
   @include mat.theme(
     (
       color: (
-        theme-type: light,
         primary: yellow_deep-orange_theme-colors.$primary-palette,
         tertiary: yellow_deep-orange_theme-colors.$tertiary-palette,
       ),
-      typography: Roboto,
-      density: 0,
     )
   );
 }
 
-.darkMode {
+html.darkMode {
+  color-scheme: dark;
   @include mat.theme(
     (
       color: (
-        theme-type: dark,
         primary: yellow_deep-orange_theme-colors.$primary-palette,
         tertiary: yellow_deep-orange_theme-colors.$tertiary-palette,
       ),