diff --git a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html
index 434775b2..1a671e56 100644
--- a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html
+++ b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.html
@@ -7,6 +7,8 @@
       (change)="uploadAdminList($event)"
       style="display: none" />
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'importList' | transloco"
@@ -14,6 +16,8 @@
       <fa-icon [icon]="faUpload" size="xl"></fa-icon>
     </button>
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'exportList' | transloco"
diff --git a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.scss b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.ts b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.ts
index 28672082..d39c1981 100644
--- a/src/app/adf-admins/df-manage-admins/df-manage-admins.component.ts
+++ b/src/app/adf-admins/df-manage-admins/df-manage-admins.component.ts
@@ -1,17 +1,18 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { DfManageAdminsTableComponent } from './df-manage-admins-table.component';
 import { EXPORT_TYPES } from 'src/app/shared/constants/supported-extensions';
 
-import { NgFor, UpperCasePipe } from '@angular/common';
+import { AsyncPipe, NgFor, UpperCasePipe } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
 import { faDownload, faUpload } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe } from '@ngneat/transloco';
-
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 @Component({
   selector: 'df-manage-admins',
   templateUrl: './df-manage-admins.component.html',
+  styleUrls: ['./df-manage-admins.component.scss'],
   standalone: true,
   imports: [
     DfManageAdminsTableComponent,
@@ -21,15 +22,17 @@ import { TranslocoPipe } from '@ngneat/transloco';
     NgFor,
     UpperCasePipe,
     TranslocoPipe,
+    AsyncPipe,
   ],
 })
 export class DfManageAdminsComponent {
+  themeService = inject(DfThemeService);
   faUpload = faUpload;
   faDownload = faDownload;
   exportTypes = EXPORT_TYPES;
   @ViewChild(DfManageAdminsTableComponent)
   manageAdminTableComponent: DfManageAdminsTableComponent;
-
+  isDarkMode = this.themeService.darkMode$;
   uploadAdminList(event: Event) {
     const input = event.target as HTMLInputElement;
     if (input.files) {
diff --git a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.html b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.html
index 0d250aed..797d62f8 100644
--- a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.html
+++ b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.html
@@ -1,8 +1,10 @@
-<div class="api-doc-button-container">
-  <button mat-raised-button (click)="goBackToList()">
+<div
+  class="api-doc-button-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <button class="cancel-btn" mat-raised-button (click)="goBackToList()">
     {{ 'goBack' | transloco }}
   </button>
-  <button mat-raised-button color="primary" (click)="downloadApiDoc()">
+  <button class="save-btn" mat-raised-button (click)="downloadApiDoc()">
     {{ 'apiDocs.downloadApiDoc' | transloco }}
   </button>
 </div>
diff --git a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts
index 54073781..d0e23a5d 100644
--- a/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts
+++ b/src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts
@@ -14,6 +14,8 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { DfUserDataService } from 'src/app/shared/services/df-user-data.service';
 import { SESSION_TOKEN_HEADER } from 'src/app/shared/constants/http-headers';
 import { mapCamelToSnake } from 'src/app/shared/utilities/case';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -21,7 +23,7 @@ import { mapCamelToSnake } from 'src/app/shared/utilities/case';
   templateUrl: './df-api-docs.component.html',
   styleUrls: ['./df-api-docs.component.scss'],
   standalone: true,
-  imports: [MatButtonModule, TranslocoModule],
+  imports: [MatButtonModule, TranslocoModule, AsyncPipe],
 })
 export class DfApiDocsComponent implements OnInit, AfterContentInit {
   @ViewChild('apiDocumentation', { static: true }) apiDocElement:
@@ -33,9 +35,10 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit {
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
-    private userDataService: DfUserDataService
+    private userDataService: DfUserDataService,
+    private themeService: DfThemeService
   ) {}
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ data }) => {
       if (data) {
diff --git a/src/app/adf-apps/df-app-details/df-app-details.component.html b/src/app/adf-apps/df-app-details/df-app-details.component.html
index ecedf517..2cad7acd 100644
--- a/src/app/adf-apps/df-app-details/df-app-details.component.html
+++ b/src/app/adf-apps/df-app-details/df-app-details.component.html
@@ -1,293 +1,307 @@
-<df-alert
-  [showAlert]="showAlert"
-  [alertType]="alertType"
-  (alertClosed)="showAlert = false">
-  {{ alertMsg }}
-</df-alert>
-<form [formGroup]="appForm" (ngSubmit)="save()" class="details-section">
-  <mat-form-field
-    appearance="outline"
-    subscriptSizing="dynamic"
-    class="dynamic-width">
-    <mat-label>
-      {{ 'apps.createApp.applicationName.label' | transloco }}
-    </mat-label>
-    <input
-      matInput
-      placeholder="{{ 'apps.createApp.applicationName.label' | transloco }}"
-      formControlName="name"
-      required />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'apps.createApp.applicationName.tooltip' | transloco" />
-    <mat-error *ngIf="appForm.controls['name'].hasError('required')">
-      {{ 'apps.createApp.applicationName.error' | transloco }}
-    </mat-error>
-  </mat-form-field>
-  <mat-form-field
-    appearance="outline"
-    subscriptSizing="dynamic"
-    class="dynamic-width">
-    <mat-label>{{ 'apps.createApp.defaultRole.label' | transloco }}</mat-label>
-    <input
-      #rolesInput
-      type="text"
-      placeholder="Pick one"
-      matInput
-      formControlName="defaultRole"
-      [matAutocomplete]="auto"
-      (input)="filter()"
-      (focus)="filter()" />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'apps.createApp.defaultRole.tooltip' | transloco" />
-    <mat-autocomplete
-      requireSelection
-      #auto="matAutocomplete"
-      [displayWith]="displayFn">
-      <mat-option *ngFor="let role of filteredRoles" [value]="role">
-        {{ role.name }}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-  <mat-form-field
-    appearance="outline"
-    subscriptSizing="dynamic"
-    class="full-width">
-    <mat-label>{{ 'apps.createApp.description.label' | transloco }}</mat-label>
-    <textarea
-      rows="1"
-      matInput
-      placeholder="{{ 'apps.createApp.description.label' | transloco }}"
-      formControlName="description"></textarea>
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'apps.createApp.description.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-slide-toggle
-    formControlName="active"
-    color="primary"
-    class="full-width"
-    >{{ 'apps.createApp.active' | transloco }}</mat-slide-toggle
-  >
-  <!-- API Card -->
-  <mat-card
-    *ngIf="editApp"
-    class="full-width api-card"
-    [style]="{ 'word-break': 'break-all' }">
-    <mat-card-header>
-      <mat-card-subtitle>{{
-        'apps.createApp.apiKey.label' | transloco
-      }}</mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      {{ editApp.apiKey }}
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-button type="button" (click)="copyApiKey()">
-        <fa-icon [icon]="faCopy"></fa-icon>
-
-        {{ 'apps.createApp.apiKey.copy' | transloco }}
-      </button>
-      <button
-        mat-button
-        type="button"
-        (click)="refreshApiKey()"
-        [disabled]="disableKeyRefresh">
-        <fa-icon [icon]="faRefresh"></fa-icon>
-
-        {{ 'apps.createApp.apiKey.refresh' | transloco }}
-      </button>
-    </mat-card-actions>
-  </mat-card>
-  <!-- app location -->
-  <div class="flex-col full-width">
-    <p>
-      {{ 'apps.createApp.appLocation.label' | transloco
-      }}<fa-icon
-        class="tool-tip-trigger"
-        matSuffix
-        [icon]="faCircleInfo"
-        [matTooltip]="'apps.createApp.appLocation.tooltip' | transloco" />
-    </p>
-    <mat-radio-group
-      color="primary"
-      class="flex-col"
-      color="primary"
-      aria-label="Select an option"
-      formControlName="appLocation">
-      <mat-radio-button value="0">{{
-        'apps.createApp.appLocation.options.noStorage' | transloco
-      }}</mat-radio-button>
-      <mat-radio-button value="1">{{
-        'apps.createApp.appLocation.options.fileStorage.label' | transloco
-      }}</mat-radio-button>
-      <mat-radio-button value="3">{{
-        'apps.createApp.appLocation.options.webServer.label' | transloco
-      }}</mat-radio-button>
-      <mat-radio-button value="2">{{
-        'apps.createApp.appLocation.options.remoteUrl.label' | transloco
-      }}</mat-radio-button>
-    </mat-radio-group>
-  </div>
-  <!-- conditional inputs -->
-  <div
-    *ngIf="
-      appForm.controls['appLocation'].value === '1' ||
-      appForm.controls['appLocation'].value === '2' ||
-      appForm.controls['appLocation'].value === '3'
-    "
-    class="full-width">
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <df-alert
+    [showAlert]="showAlert"
+    [alertType]="alertType"
+    (alertClosed)="showAlert = false">
+    {{ alertMsg }}
+  </df-alert>
+  <form [formGroup]="appForm" (ngSubmit)="save()" class="details-section">
     <mat-form-field
+      subscriptSizing="dynamic"
       appearance="outline"
-      *ngIf="appForm.controls['appLocation'].value === '1'">
-      <mat-label>{{
-        'apps.createApp.appLocation.options.fileStorage.storageService.label'
-          | transloco
-      }}</mat-label>
-      <mat-select formControlName="storageServiceId" name="defaultRole">
-        <mat-option [value]="3">
-          {{
-            'apps.createApp.appLocation.options.fileStorage.storageService.options.file'
-              | transloco
-          }}
-        </mat-option>
-        <mat-option [value]="4">
-          {{
-            'apps.createApp.appLocation.options.fileStorage.storageService.options.log'
-              | transloco
-          }}
-        </mat-option>
-      </mat-select>
-      <fa-icon
-        class="tool-tip-trigger"
-        matSuffix
-        [icon]="faCircleInfo"
-        [matTooltip]="
-          'apps.createApp.appLocation.options.fileStorage.storageService.tooltip'
-            | transloco
-        " />
-    </mat-form-field>
-    <mat-form-field
-      appearance="outline"
-      *ngIf="appForm.controls['appLocation'].value === '1'">
-      <mat-label>{{
-        'apps.createApp.appLocation.options.fileStorage.storageFolder.label'
-          | transloco
-      }}</mat-label>
+      class="dynamic-width">
+      <mat-label>
+        {{ 'apps.createApp.applicationName.label' | transloco }}
+      </mat-label>
       <input
         matInput
-        placeholder="{{
-          'apps.createApp.appLocation.options.fileStorage.storageFolder.placeholder'
-            | transloco
-        }}"
-        formControlName="storageContainer" />
+        placeholder="{{ 'apps.createApp.applicationName.label' | transloco }}"
+        formControlName="name"
+        required />
       <fa-icon
         class="tool-tip-trigger"
         matSuffix
         [icon]="faCircleInfo"
-        [matTooltip]="
-          'apps.createApp.appLocation.options.fileStorage.storageFolder.tooltip'
-            | transloco
-        " />
+        [matTooltip]="'apps.createApp.applicationName.tooltip' | transloco" />
+      <mat-error *ngIf="appForm.controls['name'].hasError('required')">
+        {{ 'apps.createApp.applicationName.error' | transloco }}
+      </mat-error>
     </mat-form-field>
-    <!-- shared path input -->
     <mat-form-field
+      subscriptSizing="dynamic"
       appearance="outline"
-      *ngIf="
-        appForm.controls['appLocation'].value === '1' ||
-        appForm.controls['appLocation'].value === '3'
-      ">
-      <mat-label *ngIf="appForm.controls['appLocation'].value === '1'">
-        {{
-          'apps.createApp.appLocation.options.fileStorage.launchPath.label'
-            | transloco
-        }}
-      </mat-label>
-      <mat-label *ngIf="appForm.controls['appLocation'].value === '3'">
-        {{
-          'apps.createApp.appLocation.options.webServer.pathToApp.label'
-            | transloco
-        }}
-      </mat-label>
+      class="dynamic-width">
+      <mat-label>{{
+        'apps.createApp.defaultRole.label' | transloco
+      }}</mat-label>
       <input
+        #rolesInput
+        type="text"
+        placeholder="Pick one"
         matInput
-        placeholder="{{
-          'apps.createApp.appLocation.options.fileStorage.launchPath.placeholder'
-            | transloco
-        }}"
-        formControlName="path" />
+        formControlName="defaultRole"
+        [matAutocomplete]="auto"
+        (input)="filter()"
+        (focus)="filter()" />
       <fa-icon
         class="tool-tip-trigger"
         matSuffix
         [icon]="faCircleInfo"
-        [matTooltip]="
-          'apps.createApp.appLocation.options.' +
-            (appForm.controls['appLocation'].value === '1'
-              ? 'fileStorage.launchPath'
-              : 'webServer.pathToApp') +
-            '.tooltip' | transloco
-        " />
+        [matTooltip]="'apps.createApp.defaultRole.tooltip' | transloco" />
+      <mat-autocomplete
+        requireSelection
+        #auto="matAutocomplete"
+        [displayWith]="displayFn">
+        <mat-option *ngFor="let role of filteredRoles" [value]="role">
+          {{ role.name }}
+        </mat-option>
+      </mat-autocomplete>
     </mat-form-field>
     <mat-form-field
+      subscriptSizing="dynamic"
       appearance="outline"
-      *ngIf="appForm.controls['appLocation'].value === '2'">
-      <mat-label>
-        {{ 'apps.createApp.appLocation.options.remoteUrl.label' | transloco }}
-      </mat-label>
-      <input
+      class="full-width">
+      <mat-label>{{
+        'apps.createApp.description.label' | transloco
+      }}</mat-label>
+      <textarea
+        rows="1"
         matInput
-        placeholder="{{
-          'apps.createApp.appLocation.options.fileStorage.launchPath.placeholder'
-            | transloco
-        }}"
-        formControlName="url" />
+        placeholder="{{ 'apps.createApp.description.label' | transloco }}"
+        formControlName="description"></textarea>
       <fa-icon
         class="tool-tip-trigger"
         matSuffix
         [icon]="faCircleInfo"
-        [matTooltip]="
-          'apps.createApp.appLocation.options.remoteUrl.url.tooltip' | transloco
-        " />
+        [matTooltip]="'apps.createApp.description.tooltip' | transloco" />
     </mat-form-field>
-
+    <mat-slide-toggle
+      formControlName="active"
+      color="primary"
+      class="full-width"
+      >{{ 'apps.createApp.active' | transloco }}</mat-slide-toggle
+    >
+    <!-- API Card -->
     <mat-card
-      class="location-card"
-      *ngIf="
-        appForm.controls['appLocation'].value === '1' ||
-        appForm.controls['appLocation'].value === '3'
-      ">
+      *ngIf="editApp"
+      class="full-width api-card"
+      [style]="{ 'word-break': 'break-all' }">
       <mat-card-header>
         <mat-card-subtitle>{{
-          'apps.createApp.appLocation.options.urlPath.label' | transloco
+          'apps.createApp.apiKey.label' | transloco
         }}</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        {{ getAppLocationUrl() }}
+        {{ editApp.apiKey }}
       </mat-card-content>
       <mat-card-actions>
-        <button mat-button type="button" (click)="copyAppUrl()">
-          <fa-icon [icon]="faCopy" class="copy-icon"></fa-icon>
+        <button
+          mat-button
+          class="copy-btn"
+          type="button"
+          (click)="copyApiKey()">
+          <fa-icon [icon]="faCopy"></fa-icon>
 
-          {{ 'apps.createApp.appLocation.options.urlPath.copy' | transloco }}
+          {{ 'apps.createApp.apiKey.copy' | transloco }}
+        </button>
+        <button
+          mat-button
+          class="refresh-btn"
+          type="button"
+          (click)="refreshApiKey()"
+          [disabled]="disableKeyRefresh">
+          <fa-icon [icon]="faRefresh"></fa-icon>
+
+          {{ 'apps.createApp.apiKey.refresh' | transloco }}
         </button>
       </mat-card-actions>
     </mat-card>
-  </div>
-  <!-- submit -->
-  <div class="full-width action-bar">
-    <button mat-flat-button type="button" class="cancel-btn" (click)="goBack()">
-      {{ 'cancel' | transloco }}
-    </button>
-    <button mat-flat-button class="save-btn">
-      <span *ngIf="editApp">{{ 'save' | transloco }}</span>
-      <span *ngIf="!editApp">{{ 'create' | transloco }}</span>
-    </button>
-  </div>
-</form>
+    <!-- app location -->
+    <div class="flex-col full-width">
+      <p>
+        {{ 'apps.createApp.appLocation.label' | transloco
+        }}<fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="'apps.createApp.appLocation.tooltip' | transloco" />
+      </p>
+      <mat-radio-group
+        class="flex-col"
+        aria-label="Select an option"
+        formControlName="appLocation">
+        <mat-radio-button value="0">{{
+          'apps.createApp.appLocation.options.noStorage' | transloco
+        }}</mat-radio-button>
+        <mat-radio-button value="1">{{
+          'apps.createApp.appLocation.options.fileStorage.label' | transloco
+        }}</mat-radio-button>
+        <mat-radio-button value="3">{{
+          'apps.createApp.appLocation.options.webServer.label' | transloco
+        }}</mat-radio-button>
+        <mat-radio-button value="2">{{
+          'apps.createApp.appLocation.options.remoteUrl.label' | transloco
+        }}</mat-radio-button>
+      </mat-radio-group>
+    </div>
+    <!-- conditional inputs -->
+    <div
+      *ngIf="
+        appForm.controls['appLocation'].value === '1' ||
+        appForm.controls['appLocation'].value === '2' ||
+        appForm.controls['appLocation'].value === '3'
+      "
+      class="full-width">
+      <mat-form-field
+        appearance="outline"
+        *ngIf="appForm.controls['appLocation'].value === '1'">
+        <mat-label>{{
+          'apps.createApp.appLocation.options.fileStorage.storageService.label'
+            | transloco
+        }}</mat-label>
+        <mat-select formControlName="storageServiceId" name="defaultRole">
+          <mat-option [value]="3">
+            {{
+              'apps.createApp.appLocation.options.fileStorage.storageService.options.file'
+                | transloco
+            }}
+          </mat-option>
+          <mat-option [value]="4">
+            {{
+              'apps.createApp.appLocation.options.fileStorage.storageService.options.log'
+                | transloco
+            }}
+          </mat-option>
+        </mat-select>
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="
+            'apps.createApp.appLocation.options.fileStorage.storageService.tooltip'
+              | transloco
+          " />
+      </mat-form-field>
+      <mat-form-field
+        appearance="outline"
+        *ngIf="appForm.controls['appLocation'].value === '1'">
+        <mat-label>{{
+          'apps.createApp.appLocation.options.fileStorage.storageFolder.label'
+            | transloco
+        }}</mat-label>
+        <input
+          matInput
+          placeholder="{{
+            'apps.createApp.appLocation.options.fileStorage.storageFolder.placeholder'
+              | transloco
+          }}"
+          formControlName="storageContainer" />
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="
+            'apps.createApp.appLocation.options.fileStorage.storageFolder.tooltip'
+              | transloco
+          " />
+      </mat-form-field>
+      <!-- shared path input -->
+      <mat-form-field
+        appearance="outline"
+        *ngIf="
+          appForm.controls['appLocation'].value === '1' ||
+          appForm.controls['appLocation'].value === '3'
+        ">
+        <mat-label *ngIf="appForm.controls['appLocation'].value === '1'">
+          {{
+            'apps.createApp.appLocation.options.fileStorage.launchPath.label'
+              | transloco
+          }}
+        </mat-label>
+        <mat-label *ngIf="appForm.controls['appLocation'].value === '3'">
+          {{
+            'apps.createApp.appLocation.options.webServer.pathToApp.label'
+              | transloco
+          }}
+        </mat-label>
+        <input
+          matInput
+          placeholder="{{
+            'apps.createApp.appLocation.options.fileStorage.launchPath.placeholder'
+              | transloco
+          }}"
+          formControlName="path" />
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="
+            'apps.createApp.appLocation.options.' +
+              (appForm.controls['appLocation'].value === '1'
+                ? 'fileStorage.launchPath'
+                : 'webServer.pathToApp') +
+              '.tooltip' | transloco
+          " />
+      </mat-form-field>
+      <mat-form-field
+        appearance="outline"
+        *ngIf="appForm.controls['appLocation'].value === '2'">
+        <mat-label>
+          {{ 'apps.createApp.appLocation.options.remoteUrl.label' | transloco }}
+        </mat-label>
+        <input
+          matInput
+          placeholder="{{
+            'apps.createApp.appLocation.options.fileStorage.launchPath.placeholder'
+              | transloco
+          }}"
+          formControlName="url" />
+        <fa-icon
+          class="tool-tip-trigger"
+          matSuffix
+          [icon]="faCircleInfo"
+          [matTooltip]="
+            'apps.createApp.appLocation.options.remoteUrl.url.tooltip'
+              | transloco
+          " />
+      </mat-form-field>
+
+      <mat-card
+        class="location-card"
+        *ngIf="
+          appForm.controls['appLocation'].value === '1' ||
+          appForm.controls['appLocation'].value === '3'
+        ">
+        <mat-card-header>
+          <mat-card-subtitle>{{
+            'apps.createApp.appLocation.options.urlPath.label' | transloco
+          }}</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+          {{ getAppLocationUrl() }}
+        </mat-card-content>
+        <mat-card-actions>
+          <button mat-button type="button" (click)="copyAppUrl()">
+            <fa-icon [icon]="faCopy" class="copy-icon"></fa-icon>
+
+            {{ 'apps.createApp.appLocation.options.urlPath.copy' | transloco }}
+          </button>
+        </mat-card-actions>
+      </mat-card>
+    </div>
+    <!-- submit -->
+    <div class="full-width action-bar">
+      <button
+        mat-flat-button
+        type="button"
+        class="cancel-btn"
+        (click)="goBack()">
+        {{ 'cancel' | transloco }}
+      </button>
+      <button mat-flat-button class="save-btn" color="primary">
+        <span *ngIf="editApp">{{ 'save' | transloco }}</span>
+        <span *ngIf="!editApp">{{ 'create' | transloco }}</span>
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/src/app/adf-apps/df-app-details/df-app-details.component.ts b/src/app/adf-apps/df-app-details/df-app-details.component.ts
index 9ac447f6..b23e2f77 100644
--- a/src/app/adf-apps/df-app-details/df-app-details.component.ts
+++ b/src/app/adf-apps/df-app-details/df-app-details.component.ts
@@ -24,7 +24,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatOptionModule } from '@angular/material/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { NgIf, NgFor } from '@angular/common';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import {
@@ -41,7 +41,7 @@ import { catchError, throwError } from 'rxjs';
 import { AlertType } from 'src/app/shared/components/df-alert/df-alert.component';
 import { DfAlertComponent } from 'src/app/shared/components/df-alert/df-alert.component';
 import { RoleType } from 'src/app/shared/types/role';
-
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-app-details',
@@ -65,6 +65,7 @@ import { RoleType } from 'src/app/shared/types/role';
     TranslocoPipe,
     MatTooltipModule,
     DfAlertComponent,
+    AsyncPipe,
   ],
 })
 export class DfAppDetailsComponent implements OnInit {
@@ -87,7 +88,8 @@ export class DfAppDetailsComponent implements OnInit {
     private appsService: DfBaseCrudService,
     private systemConfigDataService: DfSystemConfigDataService,
     private activatedRoute: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private themeService: DfThemeService
   ) {
     this.urlOrigin = window.location.origin;
 
@@ -103,7 +105,7 @@ export class DfAppDetailsComponent implements OnInit {
       url: [''], // type 2
     });
   }
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ roles, appData }) => {
       this.roles = roles.resource || [];
diff --git a/src/app/adf-config/df-cache/df-cache.component.html b/src/app/adf-config/df-cache/df-cache.component.html
index 2454499b..877468d7 100644
--- a/src/app/adf-config/df-cache/df-cache.component.html
+++ b/src/app/adf-config/df-cache/df-cache.component.html
@@ -6,7 +6,7 @@
     <ng-container topActions
       ><button
         mat-flat-button
-        color="primary"
+        class="save-btn"
         [attr.aria-label]="'importList' | transloco"
         (click)="flushSystemCache()">
         {{ 'cache.flushSystemCache' | transloco }}
diff --git a/src/app/adf-config/df-cors/df-cors-config-details.component.html b/src/app/adf-config/df-cors/df-cors-config-details.component.html
index d91b9eb5..246af75c 100644
--- a/src/app/adf-config/df-cors/df-cors-config-details.component.html
+++ b/src/app/adf-config/df-cors/df-cors-config-details.component.html
@@ -4,18 +4,29 @@
   (alertClosed)="showAlert = false">
   {{ alertMsg }}
 </df-alert>
-<div class="df-cors-config-container">
+<div
+  class="df-cors-config-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <h4>{{ 'cors.pageSubtitle' | transloco }}</h4>
   <form [formGroup]="corsForm" (ngSubmit)="onSubmit()" class="details-section">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'cors.formControls.path' | transloco }}</mat-label>
       <input matInput type="url" formControlName="path" />
     </mat-form-field>
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'cors.formControls.origins' | transloco }}</mat-label>
       <input matInput type="text" formControlName="origins" />
     </mat-form-field>
-    <mat-form-field subscriptSizing="dynamic" class="full-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="full-width">
       <mat-label>{{ 'cors.formControls.description' | transloco }}</mat-label>
       <textarea
         rows="1"
@@ -23,17 +34,26 @@ <h4>{{ 'cors.pageSubtitle' | transloco }}</h4>
         type="text"
         formControlName="description"></textarea>
     </mat-form-field>
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'cors.formControls.headers' | transloco }}</mat-label>
       <input matInput type="text" formControlName="headers" />
     </mat-form-field>
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{
         'cors.formControls.exposedHeaders' | transloco
       }}</mat-label>
       <input matInput type="text" formControlName="exposedHeaders" />
     </mat-form-field>
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'cors.formControls.maxAge' | transloco }}</mat-label>
       <input matInput type="number" formControlName="maxAge" />
     </mat-form-field>
@@ -44,19 +64,29 @@ <h4>{{ 'cors.pageSubtitle' | transloco }}</h4>
         label: 'cors.formControls.methods' | transloco
       }"
       type="verb_multiple"></df-verb-picker>
-    <mat-slide-toggle formControlName="credentials" class="dynamic-width">
+    <mat-slide-toggle
+      color="primary"
+      formControlName="credentials"
+      class="dynamic-width">
       {{ 'cors.formControls.supportsCredentials' | transloco }}
     </mat-slide-toggle>
 
-    <mat-slide-toggle formControlName="enabled" class="dynamic-width">
+    <mat-slide-toggle
+      color="primary"
+      formControlName="enabled"
+      class="dynamic-width">
       {{ 'cors.formControls.enabled' | transloco }}
     </mat-slide-toggle>
 
     <div class="full-width action-bar">
-      <button type="button" mat-flat-button (click)="onCancel()">
+      <button
+        class="cancel-btn"
+        type="button"
+        mat-flat-button
+        (click)="onCancel()">
         {{ 'cancel' | transloco }}
       </button>
-      <button mat-flat-button color="primary" type="submit">
+      <button class="save-btn" mat-flat-button color="primary" type="submit">
         {{ (type === 'create' ? 'create' : 'update') | transloco }}
       </button>
     </div>
diff --git a/src/app/adf-config/df-cors/df-cors-config-details.component.ts b/src/app/adf-config/df-cors/df-cors-config-details.component.ts
index a6c68dbe..321d6fb7 100644
--- a/src/app/adf-config/df-cors/df-cors-config-details.component.ts
+++ b/src/app/adf-config/df-cors/df-cors-config-details.component.ts
@@ -30,6 +30,8 @@ import {
   GenericUpdateResponse,
 } from 'src/app/shared/types/generic-http';
 import { catchError, throwError } from 'rxjs';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -52,6 +54,7 @@ import { catchError, throwError } from 'rxjs';
     TranslocoPipe,
     DfVerbPickerComponent,
     DfAlertComponent,
+    AsyncPipe,
   ],
 })
 export class DfCorsConfigDetailsComponent implements OnInit {
@@ -68,7 +71,8 @@ export class DfCorsConfigDetailsComponent implements OnInit {
     private corsConfigService: DfBaseCrudService,
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private themeService: DfThemeService
   ) {
     this.corsForm = this.formBuilder.group({
       path: ['', Validators.required],
@@ -82,6 +86,7 @@ export class DfCorsConfigDetailsComponent implements OnInit {
       enabled: [true],
     });
   }
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(data => {
diff --git a/src/app/adf-config/df-email-template-details/df-email-template-details.component.html b/src/app/adf-config/df-email-template-details/df-email-template-details.component.html
index 073fe00c..6f9a3762 100644
--- a/src/app/adf-config/df-email-template-details/df-email-template-details.component.html
+++ b/src/app/adf-config/df-email-template-details/df-email-template-details.component.html
@@ -6,12 +6,13 @@
 </df-alert>
 <div
   class="email-template-details-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
   [class.x-small]="breakpointService.isXSmallScreen | async">
   <form
     [formGroup]="emailTemplateForm"
     (ngSubmit)="onSubmit()"
     class="details-section">
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{
         'emailTemplates.templateName.label' | transloco
       }}</mat-label>
@@ -28,7 +29,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{
         'emailTemplates.templateDescription.label' | transloco
       }}</mat-label>
@@ -40,22 +41,22 @@
         }}" />
     </mat-form-field>
 
-    <mat-form-field class="third-width">
+    <mat-form-field appearance="outline" class="third-width">
       <mat-label>{{ 'emailTemplates.recipient.label' | transloco }}</mat-label>
       <input matInput formControlName="to" />
     </mat-form-field>
 
-    <mat-form-field class="third-width">
+    <mat-form-field appearance="outline" class="third-width">
       <mat-label>{{ 'emailTemplates.cc.label' | transloco }}</mat-label>
       <input matInput formControlName="cc" />
     </mat-form-field>
 
-    <mat-form-field class="third-width">
+    <mat-form-field appearance="outline" class="third-width">
       <mat-label>{{ 'emailTemplates.bcc.label' | transloco }}</mat-label>
       <input matInput formControlName="bcc" />
     </mat-form-field>
 
-    <mat-form-field subscriptSizing="dynamic">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label>{{ 'emailTemplates.subject.label' | transloco }}</mat-label>
       <input
         matInput
@@ -63,7 +64,7 @@
         placeholder="{{ 'emailTemplates.subject.placeholder' | transloco }}" />
     </mat-form-field>
 
-    <mat-form-field subscriptSizing="dynamic">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label>{{ 'emailTemplates.attachment.label' | transloco }}</mat-label>
       <input
         matInput
@@ -73,7 +74,7 @@
         }}" />
     </mat-form-field>
 
-    <mat-form-field subscriptSizing="dynamic">
+    <mat-form-field appearance="outline" subscriptSizing="dynamic">
       <mat-label>{{ 'emailTemplates.body' | transloco }}</mat-label>
       <textarea
         rows="1"
@@ -82,7 +83,7 @@
         class="email-template-body"></textarea>
     </mat-form-field>
 
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{ 'emailTemplates.senderName.label' | transloco }}</mat-label>
       <input
         matInput
@@ -92,7 +93,7 @@
         }}" />
     </mat-form-field>
 
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{
         'emailTemplates.senderEmail.label' | transloco
       }}</mat-label>
@@ -104,7 +105,7 @@
         }}" />
     </mat-form-field>
 
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{
         'emailTemplates.replyToName.label' | transloco
       }}</mat-label>
@@ -116,7 +117,7 @@
         }}" />
     </mat-form-field>
 
-    <mat-form-field class="dynamic-width">
+    <mat-form-field appearance="outline" class="dynamic-width">
       <mat-label>{{
         'emailTemplates.replyToEmail.label' | transloco
       }}</mat-label>
@@ -129,10 +130,14 @@
     </mat-form-field>
 
     <div class="full-width action-bar">
-      <button mat-flat-button type="button" (click)="goBack()">
+      <button
+        class="cancel-btn"
+        mat-flat-button
+        type="button"
+        (click)="goBack()">
         {{ 'cancel' | transloco }}
       </button>
-      <button mat-flat-button color="primary">
+      <button class="save-btn" mat-flat-button color="primary">
         <span *ngIf="editApp">{{ 'update' | transloco }}</span>
         <span *ngIf="!editApp">{{ 'save' | transloco }}</span>
       </button>
diff --git a/src/app/adf-config/df-email-template-details/df-email-template-details.component.ts b/src/app/adf-config/df-email-template-details/df-email-template-details.component.ts
index 9693c003..1e7225ef 100644
--- a/src/app/adf-config/df-email-template-details/df-email-template-details.component.ts
+++ b/src/app/adf-config/df-email-template-details/df-email-template-details.component.ts
@@ -26,6 +26,7 @@ import {
   DfAlertComponent,
 } from 'src/app/shared/components/df-alert/df-alert.component';
 import { catchError, throwError } from 'rxjs';
+import { DfThemeService } from '../../shared/services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -60,7 +61,8 @@ export class DfEmailTemplateDetailsComponent implements OnInit {
     private fb: FormBuilder,
     private router: Router,
     public breakpointService: DfBreakpointService,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private themeService: DfThemeService
   ) {
     this.emailTemplateForm = this.fb.group({
       name: ['', Validators.required],
@@ -78,7 +80,7 @@ export class DfEmailTemplateDetailsComponent implements OnInit {
       id: [null],
     });
   }
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit() {
     this.activatedRoute.data.subscribe(({ data }) => {
       this.editApp = data;
diff --git a/src/app/adf-config/df-global-lookup-keys/df-global-lookup-keys.component.html b/src/app/adf-config/df-global-lookup-keys/df-global-lookup-keys.component.html
index d9b2e5e4..27828ad6 100644
--- a/src/app/adf-config/df-global-lookup-keys/df-global-lookup-keys.component.html
+++ b/src/app/adf-config/df-global-lookup-keys/df-global-lookup-keys.component.html
@@ -4,7 +4,7 @@
     [showAccordion]="false"
     formArrayName="lookupKeys"></df-lookup-keys>
 
-  <button mat-flat-button color="primary" type="submit">
+  <button mat-flat-button class="save-btn" type="submit">
     {{ 'save' | transloco }}
   </button>
 </form>
diff --git a/src/app/adf-event-scripts/df-script-details/df-script-details.component.html b/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
index 7871e115..a7ba0424 100644
--- a/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
+++ b/src/app/adf-event-scripts/df-script-details/df-script-details.component.html
@@ -1,6 +1,13 @@
-<form [formGroup]="scriptForm" class="details-section" (ngSubmit)="submit()">
+<form
+  [formGroup]="scriptForm"
+  class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
+  (ngSubmit)="submit()">
   <ng-container *ngIf="type !== 'edit'; else editing">
-    <mat-form-field class="full-width" subscriptSizing="dynamic">
+    <mat-form-field
+      appearance="outline"
+      class="full-width"
+      subscriptSizing="dynamic">
       <mat-label>{{ 'service' | transloco }}</mat-label>
       <mat-select
         [(value)]="selectedServiceItem"
@@ -10,7 +17,10 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field class="half-width" subscriptSizing="dynamic">
+    <mat-form-field
+      appearance="outline"
+      class="half-width"
+      subscriptSizing="dynamic">
       <mat-label>{{ 'scripts.scriptType' | transloco }}</mat-label>
       <mat-select
         [(value)]="selectedEventItem"
@@ -30,7 +40,10 @@
       </mat-optgroup>
     </mat-autocomplete> -->
     </mat-form-field>
-    <mat-form-field class="half-width" subscriptSizing="dynamic">
+    <mat-form-field
+      appearance="outline"
+      class="half-width"
+      subscriptSizing="dynamic">
       <mat-label>{{ 'scripts.scriptMethod' | transloco }}</mat-label>
       <mat-select [(value)]="selectedRouteItem">
         <mat-option *ngFor="let item of ungroupedRouteOptions" [value]="item">
@@ -49,7 +62,10 @@
     </mat-autocomplete> -->
     </mat-form-field>
     <ng-container *ngIf="this.tableOptions">
-      <mat-form-field class="full-width" subscriptSizing="dynamic">
+      <mat-form-field
+        appearance="outline"
+        class="full-width"
+        subscriptSizing="dynamic">
         <mat-label>{{ 'scripts.tableName' | transloco }}</mat-label>
         <mat-select [(value)]="selectTable" (selectionChange)="selectedTable()">
           <mat-option *ngFor="let item of tableOptions" [value]="item">
@@ -59,19 +75,22 @@
       </mat-form-field>
     </ng-container>
     <ng-container *ngIf="this.completeScriptName">
-      <mat-form-field class="full-width">
+      <mat-form-field appearance="outline" class="full-width">
         <mat-label>{{ 'scripts.scriptName' | transloco }}</mat-label>
         <input matInput [value]="this.completeScriptName" />
       </mat-form-field>
     </ng-container>
   </ng-container>
   <ng-template #editing>
-    <mat-form-field class="full-width">
+    <mat-form-field appearance="outline" class="full-width">
       <mat-label>{{ 'scripts.tableName' | transloco }}</mat-label>
       <input matInput disabled [value]="this.completeScriptName" />
     </mat-form-field>
   </ng-template>
-  <mat-form-field class="full-width" subscriptSizing="dynamic">
+  <mat-form-field
+    appearance="outline"
+    class="full-width"
+    subscriptSizing="dynamic">
     <mat-label>{{ 'scriptType' | transloco }}</mat-label>
     <mat-select formControlName="type">
       <mat-option *ngFor="let type of types" [value]="type.value">
@@ -95,10 +114,10 @@
     [storagePath]="getControl('storagePath')"
     [content]="getControl('content')"></df-script-editor>
   <div class="full-width action-bar">
-    <button mat-flat-button type="button" (click)="goBack()">
+    <button class="cancel-btn" mat-flat-button type="button" (click)="goBack()">
       {{ 'cancel' | transloco }}
     </button>
-    <button mat-flat-button color="primary">
+    <button class="save-btn" mat-flat-button color="primary">
       {{ 'save' | transloco }}
     </button>
   </div>
diff --git a/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts b/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
index 50ad5ce8..a938a296 100644
--- a/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
+++ b/src/app/adf-event-scripts/df-script-details/df-script-details.component.ts
@@ -31,6 +31,7 @@ import {
 import { DfBaseCrudService } from 'src/app/shared/services/df-base-crud.service';
 import { Service, ServiceType } from 'src/app/shared/types/service';
 import { CommonModule } from '@angular/common';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -79,7 +80,8 @@ export class DfScriptDetailsComponent implements OnInit {
     private fb: FormBuilder,
     private router: Router,
     @Inject(EVENT_SCRIPT_SERVICE_TOKEN)
-    private eventScriptService: DfBaseCrudService
+    private eventScriptService: DfBaseCrudService,
+    private themeService: DfThemeService
   ) {
     this.storeServiceArray = [];
     this.ungroupedEventItems = [];
@@ -93,6 +95,7 @@ export class DfScriptDetailsComponent implements OnInit {
       allow_event_modification: [false],
     });
   }
+  isDarkMode = this.themeService.darkMode$;
 
   storageServices: Service;
   ngOnInit(): void {
diff --git a/src/app/adf-files/df-files/df-files.component.html b/src/app/adf-files/df-files/df-files.component.html
index 2ced6dc8..e911f756 100644
--- a/src/app/adf-files/df-files/df-files.component.html
+++ b/src/app/adf-files/df-files/df-files.component.html
@@ -1,6 +1,8 @@
 <df-files-table>
   <ng-container topActions>
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'files.createFolder' | transloco"
@@ -8,6 +10,8 @@
       <fa-icon [icon]="faFolderPlus" size="xl"></fa-icon>
     </button>
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'importList' | transloco"
diff --git a/src/app/adf-files/df-files/df-files.component.ts b/src/app/adf-files/df-files/df-files.component.ts
index f0195f33..f73ddec5 100644
--- a/src/app/adf-files/df-files/df-files.component.ts
+++ b/src/app/adf-files/df-files/df-files.component.ts
@@ -10,6 +10,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { DfFolderDialogComponent } from '../df-folder-dialog/df-folder-dialog.component';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-files',
@@ -36,8 +37,10 @@ export class DfFilesComponent {
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private themeService: DfThemeService
   ) {}
+  isDarkMode = this.themeService.darkMode$;
 
   uploadFile(event: Event): void {
     const input = event.target as HTMLInputElement;
diff --git a/src/app/adf-files/df-folder-dialog/df-folder-dialog.component.html b/src/app/adf-files/df-folder-dialog/df-folder-dialog.component.html
index 17c686d9..1ad58ce3 100644
--- a/src/app/adf-files/df-folder-dialog/df-folder-dialog.component.html
+++ b/src/app/adf-files/df-folder-dialog/df-folder-dialog.component.html
@@ -11,10 +11,10 @@ <h1 mat-dialog-title>{{ 'files.createFolder' | transloco }}</h1>
   </form>
 </div>
 <div mat-dialog-actions>
-  <button mat-flat-button type="button" mat-dialog-close>
+  <button class="cancel-btn" mat-flat-button type="button" mat-dialog-close>
     {{ 'cancel' | transloco }}
   </button>
-  <button mat-flat-button color="primary">
+  <button class="save-btn" mat-flat-button>
     {{ 'save' | transloco }}
   </button>
 </div>
diff --git a/src/app/adf-files/df-log-viewer/df-log-viewer.component.html b/src/app/adf-files/df-log-viewer/df-log-viewer.component.html
index 3c371132..c3777b98 100644
--- a/src/app/adf-files/df-log-viewer/df-log-viewer.component.html
+++ b/src/app/adf-files/df-log-viewer/df-log-viewer.component.html
@@ -1,5 +1,5 @@
 <div class="details-section">
-  <button mat-flat-button color="primary" (click)="goBack()">
+  <button mat-flat-button class="save-btn" (click)="goBack()">
     {{ 'goBack' | transloco }}
   </button>
   <df-ace-editor
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
index 08f6009a..73c94c84 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.scss
@@ -92,7 +92,4 @@ mat-card.notice-card {
       1003
     ) !important;
   }
-  .divider {
-    border-color: white !important;
-  }
 }
diff --git a/src/app/adf-limits/df-limit-details/df-limit-details.component.html b/src/app/adf-limits/df-limit-details/df-limit-details.component.html
index 8dc66853..f0c2ad00 100644
--- a/src/app/adf-limits/df-limit-details/df-limit-details.component.html
+++ b/src/app/adf-limits/df-limit-details/df-limit-details.component.html
@@ -4,8 +4,15 @@
   (alertClosed)="showAlert = false"
   >{{ alertMsg }}</df-alert
 >
-<form [formGroup]="formGroup" class="details-section" (ngSubmit)="onSubmit()">
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+<form
+  [formGroup]="formGroup"
+  class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
+  (ngSubmit)="onSubmit()">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{ 'limits.name' | transloco }}</mat-label>
     <input matInput type="text" formControlName="limitName" />
   </mat-form-field>
@@ -16,7 +23,10 @@
       label: 'limits.verb' | transloco,
       description: 'limits.verbTooltip' | transloco
     }"></df-verb-picker>
-  <mat-form-field subscriptSizing="dynamic" class="full-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="full-width">
     <mat-label>{{ 'limits.description' | transloco }}</mat-label>
     <textarea
       rows="1"
@@ -24,7 +34,10 @@
       type="text"
       formControlName="description"></textarea>
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{ 'limits.limitType' | transloco }}</mat-label>
     <mat-select formControlName="limitType">
       <mat-option value="instance"
@@ -60,7 +73,10 @@
     </mat-select>
   </mat-form-field>
   <ng-container *ngIf="this.formGroup.controls['serviceId']">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'limits.service' | transloco }}</mat-label>
       <mat-select formControlName="serviceId">
         <mat-option
@@ -72,7 +88,10 @@
     </mat-form-field>
   </ng-container>
   <ng-container *ngIf="this.formGroup.controls['roleId']">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'limits.role' | transloco }}</mat-label>
       <mat-select formControlName="roleId">
         <mat-option *ngFor="let role of roleDropdownOptions" [value]="role.id"
@@ -82,7 +101,10 @@
     </mat-form-field>
   </ng-container>
   <ng-container *ngIf="this.formGroup.controls['userId']">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'limits.user' | transloco }}</mat-label>
       <mat-select formControlName="userId">
         <mat-option *ngFor="let user of userDropdownOptions" [value]="user.id"
@@ -92,16 +114,25 @@
     </mat-form-field>
   </ng-container>
   <ng-container *ngIf="this.formGroup.controls['endpoint']">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{ 'limits.endpoint' | transloco }}</mat-label>
       <input matInput type="text" formControlName="endpoint" />
     </mat-form-field>
   </ng-container>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{ 'limits.limitRate' | transloco }}</mat-label>
     <input matInput type="number" formControlName="limitRate" />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{ 'limits.limitPeriod' | transloco }}</mat-label>
     <mat-select formControlName="limitPeriod">
       <mat-option value="minute"
@@ -122,15 +153,22 @@
     </mat-select>
   </mat-form-field>
   <ng-container>
-    <mat-slide-toggle class="full-width" formControlName="active">{{
-      'limits.active' | transloco
-    }}</mat-slide-toggle>
+    <mat-slide-toggle
+      color="primary"
+      class="full-width"
+      formControlName="active"
+      >{{ 'limits.active' | transloco }}</mat-slide-toggle
+    >
   </ng-container>
   <div class="full-width action-bar">
-    <button type="button" mat-flat-button (click)="onCancel()">
+    <button
+      class="cancel-btn"
+      type="button"
+      mat-flat-button
+      (click)="onCancel()">
       {{ 'cancel' | transloco }}
     </button>
-    <button mat-flat-button color="primary">
+    <button class="save-btn" mat-flat-button color="primary">
       {{ 'save' | transloco }}
     </button>
   </div>
diff --git a/src/app/adf-limits/df-limit-details/df-limit-details.component.ts b/src/app/adf-limits/df-limit-details/df-limit-details.component.ts
index 707647ea..2c2ecb22 100644
--- a/src/app/adf-limits/df-limit-details/df-limit-details.component.ts
+++ b/src/app/adf-limits/df-limit-details/df-limit-details.component.ts
@@ -34,6 +34,8 @@ import {
   GenericUpdateResponse,
 } from 'src/app/shared/types/generic-http';
 import { Service } from 'src/app/shared/types/service';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-limit',
@@ -53,6 +55,7 @@ import { Service } from 'src/app/shared/types/service';
     MatButtonModule,
     TranslocoPipe,
     DfVerbPickerComponent,
+    AsyncPipe,
   ],
 })
 export class DfLimitDetailsComponent implements OnInit {
@@ -78,7 +81,8 @@ export class DfLimitDetailsComponent implements OnInit {
     private router: Router,
     private activatedRoute: ActivatedRoute,
     private translateService: TranslocoService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private themeService: DfThemeService
   ) {
     this.formGroup = this.formBuilder.group({
       limitName: ['', Validators.required],
@@ -94,6 +98,7 @@ export class DfLimitDetailsComponent implements OnInit {
       active: [true],
     });
   }
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(resp => {
diff --git a/src/app/adf-limits/df-manage-limits/df-manage-limits.component.html b/src/app/adf-limits/df-manage-limits/df-manage-limits.component.html
index 1cf3fc2e..f8c7bb58 100644
--- a/src/app/adf-limits/df-manage-limits/df-manage-limits.component.html
+++ b/src/app/adf-limits/df-manage-limits/df-manage-limits.component.html
@@ -3,6 +3,7 @@
   <df-manage-limits-table>
     <ng-container topActions>
       <button
+        class="save-btn"
         mat-mini-fab
         color="primary"
         [attr.aria-label]="'clearLimitCounters' | transloco"
diff --git a/src/app/adf-roles/df-role-details/df-role-details.component.html b/src/app/adf-roles/df-role-details/df-role-details.component.html
index a5134279..517509c0 100644
--- a/src/app/adf-roles/df-role-details/df-role-details.component.html
+++ b/src/app/adf-roles/df-role-details/df-role-details.component.html
@@ -7,8 +7,15 @@
   (alertClosed)="showAlert = false">
   {{ alertMsg }}
 </df-alert>
-<form [formGroup]="roleForm" (ngSubmit)="onSubmit()" class="details-section">
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+<form
+  [formGroup]="roleForm"
+  (ngSubmit)="onSubmit()"
+  class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{ 'name' | transloco }}</mat-label>
     <input matInput formControlName="name" required />
     <mat-error *ngIf="roleForm.controls['name'].hasError('required')">
@@ -18,7 +25,7 @@
   <mat-slide-toggle formControlName="active" class="dynamic-width">{{
     'active' | transloco
   }}</mat-slide-toggle>
-  <mat-form-field subscriptSizing="dynamic">
+  <mat-form-field appearance="outline" subscriptSizing="dynamic">
     <mat-label>{{ 'description' | transloco }}</mat-label>
     <textarea rows="1" matInput formControlName="description"></textarea>
   </mat-form-field>
@@ -36,10 +43,10 @@
     class="full-width"></df-lookup-keys>
 
   <div class="full-width action-bar">
-    <button mat-flat-button type="button" (click)="goBack()">
+    <button class="cancel-btn" mat-flat-button type="button" (click)="goBack()">
       {{ 'cancel' | transloco }}
     </button>
-    <button mat-flat-button color="primary">
+    <button class="save-btn" mat-flat-button color="primary">
       <span *ngIf="type === 'create'">
         {{ 'save' | transloco }}
       </span>
diff --git a/src/app/adf-roles/df-role-details/df-role-details.component.ts b/src/app/adf-roles/df-role-details/df-role-details.component.ts
index 4b93e57b..92289889 100644
--- a/src/app/adf-roles/df-role-details/df-role-details.component.ts
+++ b/src/app/adf-roles/df-role-details/df-role-details.component.ts
@@ -30,6 +30,8 @@ import {
   DfAlertComponent,
 } from 'src/app/shared/components/df-alert/df-alert.component';
 import { catchError, throwError } from 'rxjs';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-role-details',
@@ -48,6 +50,7 @@ import { catchError, throwError } from 'rxjs';
     DfRolesAccessComponent,
     NgIf,
     DfAlertComponent,
+    AsyncPipe,
   ],
 })
 export class DfRoleDetailsComponent implements OnInit {
@@ -62,7 +65,8 @@ export class DfRoleDetailsComponent implements OnInit {
     private roleService: DfBaseCrudService,
     private fb: FormBuilder,
     private router: Router,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private themeService: DfThemeService
   ) {
     this.roleForm = this.fb.group({
       id: [null],
@@ -73,6 +77,7 @@ export class DfRoleDetailsComponent implements OnInit {
       lookupKeys: this.fb.array([]),
     });
   }
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ data, type }) => {
diff --git a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.html b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.html
index 139e6123..1605b74e 100644
--- a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.html
+++ b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.html
@@ -1,103 +1,129 @@
-<df-alert
-  [showAlert]="showAlert"
-  [alertType]="alertType"
-  (alertClosed)="showAlert = false">
-  {{ alertMsg }}
-</df-alert>
-<mat-tab-group dynamicHeight mat-stretch-tabs="false" mat-align-tabs="start">
-  <mat-tab label="Basic">
-    <h4>{{ 'scheduler.taskOverviewSubtitle' | transloco }}</h4>
-    <form
-      [formGroup]="formGroup"
-      (ngSubmit)="onSubmit()"
-      class="details-section">
-      <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
-        <mat-label>{{ 'scheduler.form.label.name' | transloco }}</mat-label>
-        <input matInput placeholder="Name" formControlName="name" />
-      </mat-form-field>
-      <mat-slide-toggle formControlName="active" class="dynamic-width">{{
-        'scheduler.form.label.active' | transloco
-      }}</mat-slide-toggle>
-      <mat-form-field subscriptSizing="dynamic" class="full-width">
-        <mat-label>{{
-          'scheduler.form.label.description' | transloco
-        }}</mat-label>
-        <textarea
-          rows="1"
-          matInput
-          placeholder="Description"
-          formControlName="description"></textarea>
-      </mat-form-field>
-      <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
-        <mat-label>{{ 'scheduler.form.label.service' | transloco }}</mat-label>
-        <mat-select formControlName="serviceId">
-          <mat-option
-            *ngFor="let service of userServicesDropdownOptions"
-            [value]="service.id">
-            {{ service.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field
-        subscriptSizing="dynamic"
-        *ngIf="componentDropdownOptions.length"
-        class="dynamic-width">
-        <mat-label>{{
-          'scheduler.form.label.component' | transloco
-        }}</mat-label>
-        <mat-select formControlName="component">
-          <mat-option
-            *ngFor="let item of componentDropdownOptions"
-            [value]="item"
-            >{{ item }}</mat-option
-          >
-        </mat-select>
-      </mat-form-field>
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <df-alert
+    [showAlert]="showAlert"
+    [alertType]="alertType"
+    (alertClosed)="showAlert = false">
+    {{ alertMsg }}
+  </df-alert>
+  <mat-tab-group dynamicHeight mat-stretch-tabs="false" mat-align-tabs="start">
+    <mat-tab label="Basic">
+      <h4>{{ 'scheduler.taskOverviewSubtitle' | transloco }}</h4>
+      <form
+        [formGroup]="formGroup"
+        (ngSubmit)="onSubmit()"
+        class="details-section">
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="dynamic-width">
+          <mat-label>{{ 'scheduler.form.label.name' | transloco }}</mat-label>
+          <input matInput placeholder="Name" formControlName="name" />
+        </mat-form-field>
+        <mat-slide-toggle
+          color="primary"
+          formControlName="active"
+          class="dynamic-width"
+          >{{ 'scheduler.form.label.active' | transloco }}</mat-slide-toggle
+        >
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width">
+          <mat-label>{{
+            'scheduler.form.label.description' | transloco
+          }}</mat-label>
+          <textarea
+            rows="1"
+            matInput
+            placeholder="Description"
+            formControlName="description"></textarea>
+        </mat-form-field>
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="dynamic-width">
+          <mat-label>{{
+            'scheduler.form.label.service' | transloco
+          }}</mat-label>
+          <mat-select formControlName="serviceId">
+            <mat-option
+              *ngFor="let service of userServicesDropdownOptions"
+              [value]="service.id">
+              {{ service.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field
+          subscriptSizing="dynamic"
+          *ngIf="componentDropdownOptions.length"
+          class="dynamic-width">
+          <mat-label>{{
+            'scheduler.form.label.component' | transloco
+          }}</mat-label>
+          <mat-select formControlName="component">
+            <mat-option
+              *ngFor="let item of componentDropdownOptions"
+              [value]="item"
+              >{{ item }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
 
-      <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
-        <mat-label>{{
-          'scheduler.form.label.frequency' | transloco
-        }}</mat-label>
-        <input matInput type="number" formControlName="frequency" />
-      </mat-form-field>
-      <ng-container *ngIf="this.formGroup.controls['payload']">
-        <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="dynamic-width">
           <mat-label>{{
-            'scheduler.form.label.payload' | transloco
+            'scheduler.form.label.frequency' | transloco
           }}</mat-label>
-          <textarea rows="1" matInput formControlName="payload"></textarea>
+          <input matInput type="number" formControlName="frequency" />
         </mat-form-field>
-      </ng-container>
-      <df-verb-picker
-        class="dynamic-width"
-        formControlName="method"
-        [schema]="{
-          label: 'scheduler.form.label.method' | transloco
-        }"></df-verb-picker>
-      <div class="full-width action-bar">
-        <button mat-flat-button type="button" (click)="onCancel()">
-          {{ 'cancel' | transloco }}
-        </button>
-        <button mat-flat-button color="primary">
-          {{ 'save' | transloco }}
+        <ng-container *ngIf="this.formGroup.controls['payload']">
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="dynamic-width">
+            <mat-label>{{
+              'scheduler.form.label.payload' | transloco
+            }}</mat-label>
+            <textarea rows="1" matInput formControlName="payload"></textarea>
+          </mat-form-field>
+        </ng-container>
+        <df-verb-picker
+          class="dynamic-width"
+          formControlName="method"
+          [schema]="{
+            label: 'scheduler.form.label.method' | transloco
+          }"></df-verb-picker>
+        <div class="full-width action-bar">
+          <button
+            class="cancel-btn"
+            mat-flat-button
+            type="button"
+            (click)="onCancel()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <button class="save-btn" mat-flat-button>
+            {{ 'save' | transloco }}
+          </button>
+        </div>
+      </form>
+    </mat-tab>
+    <mat-tab label="Log">
+      <div class="details-section">
+        <p>
+          {{ 'scheduler.logs.statusCode' | transloco }}:
+          {{ scheduleToEdit?.taskLogByTaskId?.statusCode }}
+        </p>
+        <df-ace-editor [readonly]="true" [value]="log" class="full-width" />
+        <button
+          type="button"
+          mat-flat-button
+          class="schema cancel-btn"
+          (click)="onCancel()">
+          {{ 'goBack' | transloco }}
         </button>
       </div>
-    </form>
-  </mat-tab>
-  <mat-tab label="Log">
-    <div class="details-section">
-      <p>
-        {{ 'scheduler.logs.statusCode' | transloco }}:
-        {{ scheduleToEdit?.taskLogByTaskId?.statusCode }}
-      </p>
-      <df-ace-editor [readonly]="true" [value]="log" class="full-width" />
-      <button
-        type="button"
-        mat-flat-button
-        color="primary"
-        (click)="onCancel()">
-        {{ 'goBack' | transloco }}
-      </button>
-    </div>
-  </mat-tab>
-</mat-tab-group>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts
index 4cf759ce..d0cb4684 100644
--- a/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts
+++ b/src/app/adf-scheduler/df-scheduler-details/df-scheduler-details.component.ts
@@ -30,6 +30,8 @@ import {
   AlertType,
   DfAlertComponent,
 } from 'src/app/shared/components/df-alert/df-alert.component';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+
 import { catchError, throwError } from 'rxjs';
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -75,9 +77,12 @@ export class DfSchedulerDetailsComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private router: Router,
     @Inject(BASE_SERVICE_TOKEN)
-    private accessListService: DfBaseCrudService
+    private accessListService: DfBaseCrudService,
+    private themeService: DfThemeService
   ) {}
 
+  isDarkMode = this.themeService.darkMode$;
+
   ngOnInit(): void {
     this.formGroup = this.formBuilder.group({
       name: ['', Validators.required],
diff --git a/src/app/adf-schema/df-field-details/df-field-details.component.html b/src/app/adf-schema/df-field-details/df-field-details.component.html
index e0342193..0cef71d1 100644
--- a/src/app/adf-schema/df-field-details/df-field-details.component.html
+++ b/src/app/adf-schema/df-field-details/df-field-details.component.html
@@ -1,9 +1,13 @@
 <form
   [formGroup]="fieldDetailsForm"
   class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
   (ngSubmit)="onSubmit()">
   <div class="full-width">
-    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    <mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{
         'schema.fieldDetailsForm.controls.name' | transloco
       }}</mat-label>
@@ -15,7 +19,10 @@
     </mat-form-field>
   </div>
 
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.alias.label' | transloco
     }}</mat-label>
@@ -28,7 +35,10 @@
         'schema.fieldDetailsForm.controls.alias.tooltip' | transloco
       " />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.label.label' | transloco
     }}</mat-label>
@@ -42,7 +52,10 @@
       " />
   </mat-form-field>
 
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.type.label' | transloco
     }}</mat-label>
@@ -61,7 +74,10 @@
         'schema.fieldDetailsForm.controls.type.tooltip' | transloco
       " />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.databaseType.label' | transloco
     }}</mat-label>
@@ -74,63 +90,128 @@
         'schema.fieldDetailsForm.controls.databaseType.tooltip' | transloco
       " />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.length' | transloco
     }}</mat-label>
     <input type="number" matInput formControlName="length" />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.precision' | transloco
     }}</mat-label>
     <input type="number" matInput formControlName="precision" />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.scale' | transloco
     }}</mat-label>
     <input type="number" matInput formControlName="scale" />
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.defaultValue' | transloco
     }}</mat-label>
     <input matInput formControlName="default" />
   </mat-form-field>
-  <mat-slide-toggle class="dynamic-width" formControlName="isVirtual">{{
-    'schema.fieldDetailsForm.controls.isVirtual' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="isAggregate">{{
-    'schema.fieldDetailsForm.controls.isAggregate' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="fixedLength">{{
-    'schema.fieldDetailsForm.controls.fixedLength' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="supportsMultibyte">{{
-    'schema.fieldDetailsForm.controls.supportsMultibyte' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="allowNull">{{
-    'schema.fieldDetailsForm.controls.allowNull' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="autoIncrement">{{
-    'schema.fieldDetailsForm.controls.autoIncrement' | transloco
-  }}</mat-slide-toggle>
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isVirtual"
+    >{{
+      'schema.fieldDetailsForm.controls.isVirtual' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isAggregate"
+    >{{
+      'schema.fieldDetailsForm.controls.isAggregate' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="fixedLength"
+    >{{
+      'schema.fieldDetailsForm.controls.fixedLength' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="supportsMultibyte"
+    >{{
+      'schema.fieldDetailsForm.controls.supportsMultibyte' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="allowNull"
+    >{{
+      'schema.fieldDetailsForm.controls.allowNull' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="autoIncrement"
+    >{{
+      'schema.fieldDetailsForm.controls.autoIncrement' | transloco
+    }}</mat-slide-toggle
+  >
 
-  <mat-slide-toggle class="dynamic-width" formControlName="isIndex">{{
-    'schema.fieldDetailsForm.controls.isIndex' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="isUnique">{{
-    'schema.fieldDetailsForm.controls.isUnique' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="isPrimaryKey">{{
-    'schema.fieldDetailsForm.controls.isPrimaryKey' | transloco
-  }}</mat-slide-toggle>
-  <mat-slide-toggle class="dynamic-width" formControlName="isForeignKey">{{
-    'schema.fieldDetailsForm.controls.isForeignKey' | transloco
-  }}</mat-slide-toggle>
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isIndex"
+    >{{
+      'schema.fieldDetailsForm.controls.isIndex' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isUnique"
+    >{{
+      'schema.fieldDetailsForm.controls.isUnique' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isPrimaryKey"
+    >{{
+      'schema.fieldDetailsForm.controls.isPrimaryKey' | transloco
+    }}</mat-slide-toggle
+  >
+  <mat-slide-toggle
+    color="primary"
+    class="dynamic-width"
+    formControlName="isForeignKey"
+    >{{
+      'schema.fieldDetailsForm.controls.isForeignKey' | transloco
+    }}</mat-slide-toggle
+  >
 
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.refTable' | transloco
     }}</mat-label>
@@ -142,7 +223,10 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="dynamic-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.refField' | transloco
     }}</mat-label>
@@ -154,7 +238,10 @@
       >
     </mat-select>
   </mat-form-field>
-  <mat-form-field subscriptSizing="dynamic" class="full-width">
+  <mat-form-field
+    appearance="outline"
+    subscriptSizing="dynamic"
+    class="full-width">
     <mat-label>{{
       'schema.fieldDetailsForm.controls.validation.label' | transloco
     }}</mat-label>
@@ -181,7 +268,10 @@
     formArrayName="dbFunction"
     class="full-width"></df-function-use>
   <ng-container *ngIf="this.fieldDetailsForm.controls['picklist']"
-    ><mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+    ><mat-form-field
+      appearance="outline"
+      subscriptSizing="dynamic"
+      class="dynamic-width">
       <mat-label>{{
         'schema.fieldDetailsForm.controls.picklist' | transloco
       }}</mat-label>
@@ -193,8 +283,14 @@
     </mat-error>
   </ng-container>
   <div class="full-width action-bar">
-    <button type="button" mat-flat-button (click)="onCancel()">Cancel</button>
-    <button mat-flat-button color="primary">
+    <button
+      class="cancel-btn"
+      type="button"
+      mat-flat-button
+      (click)="onCancel()">
+      Cancel
+    </button>
+    <button class="save-btn" mat-flat-button>
       {{ (databaseFieldToEdit ? 'save' : 'create') | transloco }}
     </button>
   </div>
diff --git a/src/app/adf-schema/df-field-details/df-field-details.component.ts b/src/app/adf-schema/df-field-details/df-field-details.component.ts
index 197319b4..287f3e1f 100644
--- a/src/app/adf-schema/df-field-details/df-field-details.component.ts
+++ b/src/app/adf-schema/df-field-details/df-field-details.component.ts
@@ -26,6 +26,7 @@ import { DatabaseSchemaFieldType } from './df-field-details.types';
 import { CsvValidator } from '../validators/csv.validator';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 @Component({
   selector: 'df-field-details',
@@ -95,7 +96,8 @@ export class DfFieldDetailsComponent implements OnInit {
     private service: DfBaseCrudService,
     private formBuilder: FormBuilder,
     private activatedRoute: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private themeService: DfThemeService
   ) {
     this.fieldDetailsForm = this.formBuilder.group({
       name: ['', Validators.required],
@@ -125,6 +127,8 @@ export class DfFieldDetailsComponent implements OnInit {
     });
   }
 
+  isDarkMode = this.themeService.darkMode$;
+
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(data => {
       this.type = data['type'];
diff --git a/src/app/adf-schema/df-table-details/df-table-details.component.html b/src/app/adf-schema/df-table-details/df-table-details.component.html
index 1f46bc4a..cf805796 100644
--- a/src/app/adf-schema/df-table-details/df-table-details.component.html
+++ b/src/app/adf-schema/df-table-details/df-table-details.component.html
@@ -1,83 +1,93 @@
-<mat-tab-group
-  dynamicHeight
-  mat-stretch-tabs="false"
-  mat-align-tabs="start"
-  animationDuration="0ms">
-  <mat-tab label="{{ 'schema.table' | transloco }}">
-    <form
-      [formGroup]="tableDetailsForm"
-      (ngSubmit)="save()"
-      class="details-section"
-      [class.x-small]="breakpointService.isXSmallScreen | async">
-      <mat-form-field class="dynamic-width">
-        <mat-label>
-          {{ 'schema.tableName' | transloco }}
-        </mat-label>
-        <input matInput formControlName="name" required />
-        <mat-error
-          *ngIf="tableDetailsForm.controls['name'].hasError('required')">
-          {{ 'schema.alerts.tableNameError' | transloco }}
-        </mat-error>
-      </mat-form-field>
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <mat-tab-group
+    dynamicHeight
+    mat-stretch-tabs="false"
+    mat-align-tabs="start"
+    animationDuration="0ms">
+    <mat-tab label="{{ 'schema.table' | transloco }}">
+      <form
+        [formGroup]="tableDetailsForm"
+        (ngSubmit)="save()"
+        class="details-section"
+        [class.x-small]="breakpointService.isXSmallScreen | async">
+        <mat-form-field appearance="outline" class="dynamic-width">
+          <mat-label>
+            {{ 'schema.tableName' | transloco }}
+          </mat-label>
+          <input matInput formControlName="name" required />
+          <mat-error
+            *ngIf="tableDetailsForm.controls['name'].hasError('required')">
+            {{ 'schema.alerts.tableNameError' | transloco }}
+          </mat-error>
+        </mat-form-field>
 
-      <mat-form-field class="dynamic-width">
-        <mat-label>
-          {{ 'schema.alias' | transloco }}
-        </mat-label>
-        <input matInput formControlName="alias" />
-      </mat-form-field>
-      <mat-form-field class="dynamic-width">
-        <mat-label>
-          {{ 'schema.label' | transloco }}
-        </mat-label>
-        <input matInput formControlName="label" />
-      </mat-form-field>
-      <mat-form-field class="dynamic-width">
-        <mat-label> {{ 'schema.plural' | transloco }} </mat-label>
-        <input matInput formControlName="plural" />
-      </mat-form-field>
-      <mat-form-field subscriptSizing="dynamic">
-        <mat-label> {{ 'schema.description' | transloco }} </mat-label>
-        <input matInput formControlName="description" />
-      </mat-form-field>
+        <mat-form-field appearance="outline" class="dynamic-width">
+          <mat-label>
+            {{ 'schema.alias' | transloco }}
+          </mat-label>
+          <input matInput formControlName="alias" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="dynamic-width">
+          <mat-label>
+            {{ 'schema.label' | transloco }}
+          </mat-label>
+          <input matInput formControlName="label" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="dynamic-width">
+          <mat-label> {{ 'schema.plural' | transloco }} </mat-label>
+          <input matInput formControlName="plural" />
+        </mat-form-field>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <mat-label> {{ 'schema.description' | transloco }} </mat-label>
+          <input matInput formControlName="description" />
+        </mat-form-field>
 
-      <div class="full-width" *ngIf="type === 'edit'">
-        <h2>{{ 'schema.fields' | transloco }}</h2>
-        <df-fields-table [tableData]="tableFields"></df-fields-table>
-      </div>
+        <div class="full-width" *ngIf="type === 'edit'">
+          <h2>{{ 'schema.fields' | transloco }}</h2>
+          <df-fields-table [tableData]="tableFields"></df-fields-table>
+        </div>
 
-      <div *ngIf="type === 'edit'" class="full-width margin-2-0">
-        <h2>{{ 'schema.relationships.heading' | transloco }}</h2>
-        <df-relationships-table
-          [tableData]="tableRelated"></df-relationships-table>
-      </div>
+        <div *ngIf="type === 'edit'" class="full-width margin-2-0">
+          <h2>{{ 'schema.relationships.heading' | transloco }}</h2>
+          <df-relationships-table
+            [tableData]="tableRelated"></df-relationships-table>
+        </div>
 
+        <div class="full-width action-bar">
+          <button
+            class="cancel-btn"
+            mat-flat-button
+            type="button"
+            (click)="goBack()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <button class="save-btn" mat-flat-button>
+            <span *ngIf="type === 'edit'">{{ 'update' | transloco }}</span>
+            <span *ngIf="type === 'create'">{{ 'save' | transloco }}</span>
+          </button>
+        </div>
+      </form>
+    </mat-tab>
+    <mat-tab label="JSON">
+      <df-ace-editor
+        [mode]="AceEditorMode.JSON"
+        [formControl]="jsonData"></df-ace-editor>
       <div class="full-width action-bar">
-        <button mat-flat-button type="button" (click)="goBack()">
+        <button
+          class="cancel-btn"
+          mat-flat-button
+          type="button"
+          (click)="goBack()">
           {{ 'cancel' | transloco }}
         </button>
-        <button mat-flat-button color="primary">
+        <button
+          class="save-btn"
+          mat-flat-button
+          (click)="save(jsonData.getRawValue())">
           <span *ngIf="type === 'edit'">{{ 'update' | transloco }}</span>
           <span *ngIf="type === 'create'">{{ 'save' | transloco }}</span>
         </button>
       </div>
-    </form>
-  </mat-tab>
-  <mat-tab label="JSON">
-    <df-ace-editor
-      [mode]="AceEditorMode.JSON"
-      [formControl]="jsonData"></df-ace-editor>
-    <div class="full-width action-bar">
-      <button mat-flat-button type="button" (click)="goBack()">
-        {{ 'cancel' | transloco }}
-      </button>
-      <button
-        mat-flat-button
-        color="primary"
-        (click)="save(jsonData.getRawValue())">
-        <span *ngIf="type === 'edit'">{{ 'update' | transloco }}</span>
-        <span *ngIf="type === 'create'">{{ 'save' | transloco }}</span>
-      </button>
-    </div>
-  </mat-tab>
-</mat-tab-group>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/src/app/adf-schema/df-table-details/df-table-details.component.ts b/src/app/adf-schema/df-table-details/df-table-details.component.ts
index b0676ef1..df09dcf0 100644
--- a/src/app/adf-schema/df-table-details/df-table-details.component.ts
+++ b/src/app/adf-schema/df-table-details/df-table-details.component.ts
@@ -23,6 +23,8 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { AceEditorMode } from 'src/app/shared/types/scripts';
 import { GenericListResponse } from 'src/app/shared/types/generic-http';
 import { TableDetailsType } from './df-table-details.types';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-table-details',
@@ -59,7 +61,8 @@ export class DfTableDetailsComponent implements OnInit {
     private fb: FormBuilder,
     private activatedRoute: ActivatedRoute,
     public breakpointService: DfBreakpointService,
-    private router: Router
+    private router: Router,
+    private themeService: DfThemeService
   ) {
     this.tableDetailsForm = this.fb.group({
       name: ['', Validators.required],
@@ -69,6 +72,7 @@ export class DfTableDetailsComponent implements OnInit {
       description: [null],
     });
   }
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(data => {
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index be8d81cb..af9ee1b1 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -1,4 +1,8 @@
-<form [formGroup]="serviceForm" class="details-section" (ngSubmit)="save()">
+<form
+  [formGroup]="serviceForm"
+  class="details-section"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
+  (ngSubmit)="save()">
   <ng-container *ngIf="this.isDatabase && !this.edit; else notDatabase">
     <mat-stepper linear #stepper>
       <mat-step errorMessage="Service Type is required." [editable]="true">
@@ -64,7 +68,9 @@ <h3>
                       class="card-icon"
                       [src]="getBackgroundImage(type.name)"
                       [alt]="type.label" />
-                    <h4 class="text-center">{{ type.label }}</h4>
+                    <h4 class="text-center" style="color: black !important">
+                      {{ type.label }}
+                    </h4>
                   </div>
                 </div>
               </label>
@@ -84,7 +90,9 @@ <h4 class="text-center">{{ type.label }}</h4>
                       class="card-icon"
                       [src]="getBackgroundImage(type.name)"
                       [alt]="type.label" />
-                    <h4 class="text-center">{{ type.label }}</h4>
+                    <h4 class="text-center" style="color: black !important">
+                      {{ type.label }}
+                    </h4>
                   </div>
                 </div>
                 <ng-container *ngIf="type.class === 'not-included'">
@@ -164,6 +172,7 @@ <h4 class="text-center">{{ type.label }}</h4>
           </mat-form-field>
           <div class="action-container">
             <mat-slide-toggle
+              color="primary"
               formControlName="isActive"
               *ngIf="!subscriptionRequired"
               >{{ 'active' | transloco }}</mat-slide-toggle
@@ -238,10 +247,14 @@ <h4 class="text-center">{{ type.label }}</h4>
           </ng-container>
         </ng-container>
         <div class="full-width action-bar" *ngIf="!subscriptionRequired">
-          <button mat-flat-button type="button" (click)="goBack()">
+          <button
+            class="cancel-btn"
+            mat-flat-button
+            type="button"
+            (click)="goBack()">
             {{ 'cancel' | transloco }}
           </button>
-          <button mat-flat-button color="primary">
+          <button class="save-btn" mat-flat-button color="primary">
             {{ 'save' | transloco }}
           </button>
         </div>
@@ -329,7 +342,7 @@ <h4 class="text-center">{{ type.label }}</h4>
       formControlName="isActive"
       color="primary"
       *ngIf="!subscriptionRequired"
-      >{{ 'active' | transloco }}</mat-slide-toggle
+      ><span>{{ 'active' | transloco }}</span></mat-slide-toggle
     >
     <ng-container *ngIf="viewSchema && !subscriptionRequired">
       <ng-container formGroupName="config">
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index 3db27dc7..fe19d8af 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -120,14 +120,11 @@ mat-icon {
 .action-bar {
   display: flex;
   justify-content: flex-end;
-  .save-btn {
-    background-color: mat.get-color-from-palette($df-purple-palette, 500);
-    color: white;
-    border-radius: 20px;
-  }
-  .cancel-btn {
-    color: mat.get-color-from-palette($df-purple-palette, 1001);
-    border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001);
-    border-radius: 20px;
-  }
+}
+
+::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after {
+  color: unset !important;
+}
+::ng-deep .mat-mdc-select-arrow {
+  color: unset !important;
 }
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index 5dd15a3f..cd80c6c0 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/src/app/adf-services/df-service-details/df-service-details.component.ts
@@ -49,6 +49,7 @@ import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -104,7 +105,8 @@ export class DfServiceDetailsComponent implements OnInit {
     private router: Router,
     private systemConfigDataService: DfSystemConfigDataService,
     private http: HttpClient,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private themeService: DfThemeService
   ) {
     this.serviceForm = this.fb.group({
       type: ['', Validators.required],
@@ -118,7 +120,7 @@ export class DfServiceDetailsComponent implements OnInit {
       this.edit = true;
     }
   }
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     this.http
       .get<Array<ImageObject>>('assets/img/databaseImages.json')
diff --git a/src/app/adf-users/df-manage-users/df-manage-users.component.html b/src/app/adf-users/df-manage-users/df-manage-users.component.html
index c13e202d..31561647 100644
--- a/src/app/adf-users/df-manage-users/df-manage-users.component.html
+++ b/src/app/adf-users/df-manage-users/df-manage-users.component.html
@@ -7,6 +7,8 @@
       (change)="uploadUserList($event)"
       style="display: none" />
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'importList' | transloco"
@@ -14,6 +16,8 @@
       <fa-icon [icon]="faUpload" size="xl"></fa-icon>
     </button>
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'exportList' | transloco"
diff --git a/src/app/adf-users/df-manage-users/df-manage-users.component.scss b/src/app/adf-users/df-manage-users/df-manage-users.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/adf-users/df-manage-users/df-manage-users.component.ts b/src/app/adf-users/df-manage-users/df-manage-users.component.ts
index 49d1a668..fd8ec585 100644
--- a/src/app/adf-users/df-manage-users/df-manage-users.component.ts
+++ b/src/app/adf-users/df-manage-users/df-manage-users.component.ts
@@ -1,17 +1,19 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { EXPORT_TYPES } from 'src/app/shared/constants/supported-extensions';
 import { DfManageUsersTableComponent } from './df-manage-users-table.component';
 
-import { NgFor, UpperCasePipe } from '@angular/common';
+import { AsyncPipe, NgFor, UpperCasePipe } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
 import { faDownload, faUpload } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe } from '@ngneat/transloco';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 @Component({
   selector: 'df-manage-users',
   templateUrl: './df-manage-users.component.html',
+  styleUrls: ['./df-manage-users.component.scss'],
   standalone: true,
   imports: [
     DfManageUsersTableComponent,
@@ -21,14 +23,17 @@ import { TranslocoPipe } from '@ngneat/transloco';
     NgFor,
     UpperCasePipe,
     TranslocoPipe,
+    AsyncPipe,
   ],
 })
 export class DfManageUsersComponent {
+  themeService = inject(DfThemeService);
   faUpload = faUpload;
   faDownload = faDownload;
   exportTypes = EXPORT_TYPES;
   @ViewChild(DfManageUsersTableComponent)
   manageUserTableComponent!: DfManageUsersTableComponent;
+  isDarkMode = this.themeService.darkMode$;
 
   uploadUserList(event: Event) {
     const input = event.target as HTMLInputElement;
diff --git a/src/app/shared/components/df-ace-editor/df-ace-editor.component.html b/src/app/shared/components/df-ace-editor/df-ace-editor.component.html
index 26ad66cf..51b97310 100644
--- a/src/app/shared/components/df-ace-editor/df-ace-editor.component.html
+++ b/src/app/shared/components/df-ace-editor/df-ace-editor.component.html
@@ -1 +1,4 @@
-<div #editor class="editor"></div>
+<div
+  #editor
+  class="editor"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"></div>
diff --git a/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts b/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts
index 11518bb3..ab8b84f8 100644
--- a/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts
+++ b/src/app/shared/components/df-ace-editor/df-ace-editor.component.ts
@@ -11,15 +11,18 @@ import {
   SimpleChanges,
   ViewChild,
   forwardRef,
+  inject,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AceEditorMode } from '../../types/scripts';
-
+import { DfThemeService } from '../../services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 @Component({
   selector: 'df-ace-editor',
   templateUrl: './df-ace-editor.component.html',
   styleUrls: ['./df-ace-editor.component.scss'],
   standalone: true,
+  imports: [AsyncPipe],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -42,6 +45,8 @@ export class DfAceEditorComponent
 
   onChange: (value: string) => void;
   onTouched: () => void;
+  themeService = inject(DfThemeService);
+  isDarkMode = this.themeService.darkMode$;
 
   ngAfterViewInit(): void {
     this.init(this.elementRef, this.mode);
diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
index 51cb6cbe..ab3104b6 100644
--- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
+++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
@@ -1,85 +1,88 @@
-<mat-form-field
-  subscriptSizing="dynamic"
-  appearance="outline"
-  *ngIf="
-    [
-      'integer',
-      'password',
-      'string',
-      'string',
-      'picklist',
-      'multi_picklist',
-      'text'
-    ].includes(schema.type)
-  ">
-  <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
-  <input
-    *ngIf="['integer', 'string', 'password', 'text'].includes(schema.type)"
-    matInput
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <mat-form-field
+    subscriptSizing="dynamic"
+    appearance="outline"
+    *ngIf="
+      [
+        'integer',
+        'password',
+        'string',
+        'string',
+        'picklist',
+        'multi_picklist',
+        'text'
+      ].includes(schema.type)
+    ">
+    <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
+    <input
+      *ngIf="['integer', 'string', 'password', 'text'].includes(schema.type)"
+      matInput
+      [formControl]="control"
+      [type]="
+        schema.type === 'integer'
+          ? 'number'
+          : schema.type === 'password'
+          ? 'password'
+          : 'text'
+      "
+      [attr.aria-label]="schema.label" />
+    <mat-select
+      *ngIf="['picklist', 'multi_picklist'].includes(schema.type)"
+      [multiple]="schema.type === 'multi_picklist'"
+      [formControl]="control">
+      <mat-option *ngFor="let option of schema.values" [value]="option.name">
+        {{ option.label }}
+      </mat-option>
+    </mat-select>
+    <fa-icon
+      *ngIf="schema.description"
+      class="tool-tip-trigger"
+      matSuffix
+      [icon]="faCircleInfo"
+      [matTooltip]="schema.description" />
+  </mat-form-field>
+  <ng-container *ngIf="schema.type === 'file_certificate'"
+    ><input
+      type="file"
+      #fileInput
+      (change)="handleFileInput($event)"
+      style="display: none" />
+    <button
+      mat-flat-button
+      color="primary"
+      (click)="fileInput.click()"
+      [matTooltip]="schema.description ?? ''">
+      {{ schema.label }}
+    </button>
+    {{ control.value ? control.value.name : ('noFileSelected' | transloco) }}
+  </ng-container>
+  <mat-slide-toggle
+    *ngIf="schema.type === 'boolean'"
     [formControl]="control"
-    [type]="
-      schema.type === 'integer'
-        ? 'number'
-        : schema.type === 'password'
-        ? 'password'
-        : 'text'
-    "
-    [attr.aria-label]="schema.label" />
-  <mat-select
-    *ngIf="['picklist', 'multi_picklist'].includes(schema.type)"
-    [multiple]="schema.type === 'multi_picklist'"
-    [formControl]="control">
-    <mat-option *ngFor="let option of schema.values" [value]="option.name">
-      {{ option.label }}
-    </mat-option>
-  </mat-select>
-  <fa-icon
-    *ngIf="schema.description"
-    class="tool-tip-trigger"
-    matSuffix
-    [icon]="faCircleInfo"
-    [matTooltip]="schema.description" />
-</mat-form-field>
-<ng-container *ngIf="schema.type === 'file_certificate'"
-  ><input
-    type="file"
-    #fileInput
-    (change)="handleFileInput($event)"
-    style="display: none" />
-  <button
-    mat-flat-button
     color="primary"
-    (click)="fileInput.click()"
-    [matTooltip]="schema.description ?? ''">
-    {{ schema.label }}
-  </button>
-  {{ control.value ? control.value.name : ('noFileSelected' | transloco) }}
-</ng-container>
-<mat-slide-toggle
-  *ngIf="schema.type === 'boolean'"
-  [formControl]="control"
-  color="primary"
-  [matTooltip]="schema.description ?? ''"
-  [attr.aria-label]="schema.label"
-  ><ng-container *ngIf="showLabel">{{
-    schema.label
-  }}</ng-container></mat-slide-toggle
->
-<mat-form-field
-  *ngIf="schema.type === 'event_picklist'"
-  subscriptSizing="dynamic">
-  <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
-  <input
-    type="text"
-    matInput
-    [formControl]="control"
-    [matAutocomplete]="auto"
-    [attr.aria-label]="schema.label" />
-  <mat-autocomplete #auto="matAutocomplete">
-    <mat-option
-      *ngFor="let option of filteredEventList | async"
-      [value]="option">
-      {{ option }}
-    </mat-option>
-  </mat-autocomplete>
-</mat-form-field>
+    [matTooltip]="schema.description ?? ''"
+    [attr.aria-label]="schema.label"
+    ><ng-container *ngIf="showLabel"
+      ><span>{{ schema.label }}</span></ng-container
+    ></mat-slide-toggle
+  >
+  <mat-form-field
+    *ngIf="schema.type === 'event_picklist'"
+    subscriptSizing="dynamic">
+    <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
+    <input
+      type="text"
+      matInput
+      [formControl]="control"
+      [matAutocomplete]="auto"
+      [attr.aria-label]="schema.label" />
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option
+        *ngFor="let option of filteredEventList | async"
+        [value]="option">
+        {{ option }}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</div>
+
diff --git a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts
index 813c1831..abc28bb4 100644
--- a/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts
+++ b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts
@@ -29,6 +29,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { Observable, map, startWith } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { addGroupEntries } from '../../utilities/eventScripts';
+import { DfThemeService } from '../../services/df-theme.service';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-dynamic-field',
@@ -62,13 +63,15 @@ export class DfDynamicFieldComponent implements OnInit, DoCheck {
 
   constructor(
     @Optional() @Self() public controlDir: NgControl,
-    private activedRoute: ActivatedRoute
+    private activedRoute: ActivatedRoute,
+    private themeService: DfThemeService
   ) {
     controlDir.valueAccessor = this;
   }
 
   eventList: string[];
   filteredEventList: Observable<string[]>;
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     if (this.schema.type === 'event_picklist') {
diff --git a/src/app/shared/components/df-field-array/df-array-field.component.html b/src/app/shared/components/df-field-array/df-array-field.component.html
index 0ccec4a5..f3d0cc98 100644
--- a/src/app/shared/components/df-field-array/df-array-field.component.html
+++ b/src/app/shared/components/df-field-array/df-array-field.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <mat-card-header *ngIf="this.schema.items !== 'string'"
     >{{ schema.label
     }}<fa-icon
@@ -22,7 +22,10 @@
           [matTooltip]="schema.description" />
       </th>
       <td mat-cell *matCellDef="let row; let i = index">
-        <mat-form-field subscriptSizing="dynamic" class="full-width">
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="full-width">
           <input
             matInput
             [formControl]="controls[i]"
@@ -58,7 +61,6 @@
       <th mat-header-cell *matHeaderCellDef>
         <button
           type="button"
-          class="add-btn"
           mat-mini-fab
           color="primary"
           (click)="add()"
diff --git a/src/app/shared/components/df-field-array/df-array-field.component.ts b/src/app/shared/components/df-field-array/df-array-field.component.ts
index 4aca066a..0506ca93 100644
--- a/src/app/shared/components/df-field-array/df-array-field.component.ts
+++ b/src/app/shared/components/df-field-array/df-array-field.component.ts
@@ -1,4 +1,4 @@
-import { NgFor, NgIf } from '@angular/common';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component, Input, OnInit, forwardRef } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -28,6 +28,7 @@ import { TranslocoPipe } from '@ngneat/transloco';
 import { DfVerbPickerComponent } from '../df-verb-picker/df-verb-picker.component';
 import { MatSelectModule } from '@angular/material/select';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { DfThemeService } from '../../services/df-theme.service';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-array-field',
@@ -56,6 +57,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
     TranslocoPipe,
     DfVerbPickerComponent,
     MatSelectModule,
+    AsyncPipe,
   ],
 })
 export class DfArrayFieldComponent implements OnInit, ControlValueAccessor {
@@ -73,8 +75,12 @@ export class DfArrayFieldComponent implements OnInit, ControlValueAccessor {
     this.dataSource = new MatTableDataSource(this.fieldArray.controls);
   }
 
-  constructor(private fb: FormBuilder) {}
+  constructor(
+    private fb: FormBuilder,
+    private themeService: DfThemeService
+  ) {}
 
+  isDarkMode = this.themeService.darkMode$;
   get controls() {
     return this.fieldArray.controls as FormControl[];
   }
diff --git a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.html b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.html
index 1e055433..160c8a30 100644
--- a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.html
+++ b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.html
@@ -1,4 +1,6 @@
-<div class="lookup-keys-accordion">
+<div
+  class="lookup-keys-accordion"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <mat-accordion *ngIf="showAccordion; else lookupKeys">
     <mat-expansion-panel>
       <mat-expansion-panel-header>
@@ -20,7 +22,7 @@
               {{ 'name' | transloco }}
             </mat-header-cell>
             <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-              <mat-form-field subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
                 <mat-label>{{ 'name' | transloco }}</mat-label>
                 <input matInput formControlName="name" />
               </mat-form-field>
@@ -32,7 +34,7 @@
               {{ 'value' | transloco }}
             </mat-header-cell>
             <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-              <mat-form-field subscriptSizing="dynamic">
+              <mat-form-field appearance="outline" subscriptSizing="dynamic">
                 <mat-label>{{ 'value' | transloco }}</mat-label>
                 <input matInput formControlName="value" />
               </mat-form-field>
@@ -45,6 +47,7 @@
             </mat-header-cell>
             <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
               <mat-slide-toggle
+                color="primary"
                 formControlName="private"
                 [attr.aria-label]="'name' | transloco"></mat-slide-toggle>
             </mat-cell>
@@ -53,7 +56,7 @@
             <mat-header-cell *matHeaderCellDef>
               <button
                 mat-mini-fab
-                color="primary"
+                class="save-btn"
                 [attr.aria-label]="'newEntry' | transloco"
                 type="button"
                 (click)="add()">
@@ -61,7 +64,11 @@
               </button>
             </mat-header-cell>
             <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-              <button mat-icon-button (click)="remove(i)" type="button">
+              <button
+                class="remove-btn"
+                mat-icon-button
+                (click)="remove(i)"
+                type="button">
                 <fa-icon [icon]="faTrashCan" size="xs"></fa-icon>
               </button>
             </mat-cell>
diff --git a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts
index dd480bf7..76304fe6 100644
--- a/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts
+++ b/src/app/shared/components/df-lookup-keys/df-lookup-keys.component.ts
@@ -19,6 +19,9 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe } from '@ngneat/transloco';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-lookup-keys',
@@ -38,6 +41,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
     FontAwesomeModule,
     MatExpansionModule,
     TranslocoPipe,
+    AsyncPipe,
   ],
 })
 export class DfLookupKeysComponent implements OnInit {
@@ -49,8 +53,11 @@ export class DfLookupKeysComponent implements OnInit {
   faPlus = faPlus;
   @Input() showAccordion = true;
 
-  constructor(private rootFormGroup: FormGroupDirective) {}
-
+  constructor(
+    private rootFormGroup: FormGroupDirective,
+    private themeService: DfThemeService
+  ) {}
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit() {
     this.rootForm = this.rootFormGroup.control;
     this.rootFormGroup.ngSubmit.subscribe(() => {
diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.html b/src/app/shared/components/df-manage-table/df-manage-table.component.html
index a4880881..480fd08c 100644
--- a/src/app/shared/components/df-manage-table/df-manage-table.component.html
+++ b/src/app/shared/components/df-manage-table/df-manage-table.component.html
@@ -1,8 +1,8 @@
-<div class="top-action-bar">
+<div class="top-action-bar" [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <button
     *ngIf="allowCreate"
     mat-mini-fab
-    color="primary"
+    class="save-btn"
     [attr.aria-label]="'newEntry' | transloco"
     (click)="createRow()"
     type="button">
@@ -13,12 +13,13 @@
   <mat-form-field
     *ngIf="allowFilter && tableLength > 0"
     class="search-input"
+    appearance="outline"
     subscriptSizing="dynamic">
     <mat-label>{{ 'search' | transloco }}</mat-label>
     <input matInput [formControl]="currentFilter" />
   </mat-form-field>
 </div>
-<div class="table-container">
+<div class="table-container" [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <table
     mat-table
     [dataSource]="dataSource"
@@ -75,9 +76,9 @@
             <ng-container
               *ngIf="actions.additional.length === 1; else multiple">
               <button
+                class="action-btn"
                 *ngIf="actions.additional[0].icon; else regular"
                 mat-icon-button
-                color="primary"
                 [attr.aria-label]="
                   actions.additional[0].ariaLabel.key
                     | transloco
diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.scss b/src/app/shared/components/df-manage-table/df-manage-table.component.scss
index 5116d6c9..eb4e21d6 100644
--- a/src/app/shared/components/df-manage-table/df-manage-table.component.scss
+++ b/src/app/shared/components/df-manage-table/df-manage-table.component.scss
@@ -20,7 +20,9 @@ $red-palette: mat.define-palette(mat.$red-palette);
   align-items: center;
   gap: 12px;
   padding-bottom: 12px;
+
   .search-input {
+    height: 80% !important;
     max-width: 300px !important;
   }
 }
diff --git a/src/app/shared/components/df-manage-table/df-manage-table.component.ts b/src/app/shared/components/df-manage-table/df-manage-table.component.ts
index 0612c5d9..6f748c64 100644
--- a/src/app/shared/components/df-manage-table/df-manage-table.component.ts
+++ b/src/app/shared/components/df-manage-table/df-manage-table.component.ts
@@ -2,6 +2,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 import {
   AfterViewInit,
   Component,
+  inject,
   Input,
   OnInit,
   ViewChild,
@@ -34,6 +35,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { Actions, AdditonalAction, Column } from 'src/app/shared/types/table';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 export const DfManageTableModules = [
   NgIf,
@@ -108,7 +110,9 @@ export abstract class DfManageTableComponent<T>
     private translateService: TranslocoService,
     public dialog: MatDialog
   ) {}
+  themeService = inject(DfThemeService);
 
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     if (!this.tableData) {
       this.activatedRoute.data.subscribe(({ data }) => {
diff --git a/src/app/shared/components/df-profile-details/df-profile-details.component.html b/src/app/shared/components/df-profile-details/df-profile-details.component.html
index f4596c2a..d7ab4c13 100644
--- a/src/app/shared/components/df-profile-details/df-profile-details.component.html
+++ b/src/app/shared/components/df-profile-details/df-profile-details.component.html
@@ -1,6 +1,9 @@
-<ng-container name="user-details-section" [formGroup]="rootForm">
+<ng-container
+  name="user-details-section"
+  [formGroup]="rootForm"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <ng-container formGroupName="profileDetailsGroup">
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="outline">
       <mat-label
         >{{ 'userManagement.controls.username.altLabel' | transloco
         }}{{
@@ -23,7 +26,7 @@
         {{ 'userManagement.controls.username.errors.minLength' | transloco }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="outline">
       <mat-label>
         {{ 'userManagement.controls.email.label' | transloco }}</mat-label
       >
@@ -43,7 +46,7 @@
         {{ 'userManagement.controls.email.errors.required' | transloco }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="outline">
       <mat-label>
         {{ 'userManagement.controls.firstName.label' | transloco }}</mat-label
       >
@@ -55,7 +58,7 @@
         {{ 'userManagement.controls.firstName.errors.required' | transloco }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="outline">
       <mat-label>{{
         'userManagement.controls.lastName.label' | transloco
       }}</mat-label>
@@ -68,7 +71,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field appearance="fill">
+    <mat-form-field appearance="outline">
       <mat-label>{{
         'userManagement.controls.displayName.label' | transloco
       }}</mat-label>
@@ -79,7 +82,7 @@
       </mat-error>
     </mat-form-field>
     <mat-form-field
-      appearance="fill"
+      appearance="outline"
       *ngIf="controlExists('profileDetailsGroup.phone')">
       <mat-label>{{
         'userManagement.controls.phone.label' | transloco
diff --git a/src/app/shared/components/df-profile-details/df-profile-details.component.ts b/src/app/shared/components/df-profile-details/df-profile-details.component.ts
index 0a2d9560..76de559b 100644
--- a/src/app/shared/components/df-profile-details/df-profile-details.component.ts
+++ b/src/app/shared/components/df-profile-details/df-profile-details.component.ts
@@ -11,7 +11,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslocoPipe } from '@ngneat/transloco';
 import { UntilDestroy } from '@ngneat/until-destroy';
-
+import { DfThemeService } from '../../services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-profile-details',
@@ -24,11 +25,16 @@ import { UntilDestroy } from '@ngneat/until-destroy';
     ReactiveFormsModule,
     TranslocoPipe,
     NgIf,
+    AsyncPipe,
   ],
 })
 export class DfProfileDetailsComponent implements OnInit {
   rootForm: FormGroup;
-  constructor(private rootFormGroup: FormGroupDirective) {}
+  constructor(
+    private rootFormGroup: FormGroupDirective,
+    private themeService: DfThemeService
+  ) {}
+  isDarkMode = this.themeService.darkMode$;
 
   ngOnInit() {
     this.rootForm = this.rootFormGroup.control;
diff --git a/src/app/shared/components/df-script-editor/df-script-editor.component.html b/src/app/shared/components/df-script-editor/df-script-editor.component.html
index 9732478c..91779b97 100644
--- a/src/app/shared/components/df-script-editor/df-script-editor.component.html
+++ b/src/app/shared/components/df-script-editor/df-script-editor.component.html
@@ -1,4 +1,4 @@
-<div class="details-section">
+<div class="details-section" [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <div class="actions full-width">
     <input
       type="file"
@@ -9,7 +9,7 @@
     <button
       type="button"
       mat-flat-button
-      color="primary"
+      class="save-btn"
       (click)="fileInput.click()"
       [disabled]="storageServiceId.getRawValue()">
       {{ 'desktopFile' | transloco }}
@@ -17,7 +17,7 @@
     <button
       type="button"
       mat-flat-button
-      color="primary"
+      class="save-btn"
       (click)="githubImport()"
       [disabled]="storageServiceId.getRawValue()">
       {{ 'githubFile' | transloco }}
diff --git a/src/app/shared/components/df-script-editor/df-script-editor.component.ts b/src/app/shared/components/df-script-editor/df-script-editor.component.ts
index 5c563215..dfa6f48a 100644
--- a/src/app/shared/components/df-script-editor/df-script-editor.component.ts
+++ b/src/app/shared/components/df-script-editor/df-script-editor.component.ts
@@ -18,6 +18,8 @@ import { DfScriptsGithubDialogComponent } from '../df-scripts-github-dialog/df-s
 import { DfAceEditorComponent } from '../df-ace-editor/df-ace-editor.component';
 import { Service, ServiceType } from '../../types/service';
 import { switchMap } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { DfThemeService } from '../../services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -35,6 +37,7 @@ import { switchMap } from 'rxjs';
     MatDialogModule,
     MatInputModule,
     DfAceEditorComponent,
+    AsyncPipe,
     ReactiveFormsModule,
   ],
 })
@@ -51,7 +54,8 @@ export class DfScriptEditorComponent implements OnInit {
     private dialog: MatDialog,
     @Inject(BASE_SERVICE_TOKEN) private fileService: DfBaseCrudService,
     @Inject(CACHE_SERVICE_TOKEN) private cacheService: DfBaseCrudService,
-    @Inject(BASE_SERVICE_TOKEN) private baseService: DfBaseCrudService
+    @Inject(BASE_SERVICE_TOKEN) private baseService: DfBaseCrudService,
+    private themeService: DfThemeService
   ) {
     this.baseService
       .getAll<{
@@ -69,7 +73,7 @@ export class DfScriptEditorComponent implements OnInit {
         this.storageServices = res.services;
       });
   }
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     if (this.storageServiceId.getRawValue()) {
       this.storagePath.addValidators([Validators.required]);
diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.html b/src/app/shared/components/df-search-dialog/df-search-dialog.component.html
index d7f4496b..a4749c25 100644
--- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.html
+++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.html
@@ -1,4 +1,4 @@
-<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+<div class="search-dialog">
   <div mat-dialog-title class="search-bar">
     <mat-form-field
       class="search-input"
@@ -45,6 +45,8 @@
     </ng-template>
   </div>
   <div mat-dialog-actions class="search-action">
-    <button mat-button [mat-dialog-close]>{{ 'close' | transloco }}</button>
+    <button class="close-btn" mat-button [mat-dialog-close]>
+      {{ 'close' | transloco }}
+    </button>
   </div>
 </div>
diff --git a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss
index ab47520d..8afd2627 100644
--- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss
+++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.scss
@@ -1,6 +1,9 @@
 @use '@angular/material' as mat;
 @use 'src/theme' as theme;
 $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+.search-dialog {
+  padding-top: 20px;
+}
 
 .search-bar {
   min-width: 275px;
@@ -25,9 +28,11 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 }
 
 .dark-theme {
-  .search-bar,
-  .search-container,
-  .search-action {
-    // background-color: mat.get-color-from-palette($df-purple-palette, 1003)!important;
+  &.search-dialog {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+    border: 1px solid white;
   }
 }
diff --git a/src/app/shared/components/df-user-details/df-user-details-base.component.html b/src/app/shared/components/df-user-details/df-user-details-base.component.html
index 85aa4bd7..9f09dc47 100644
--- a/src/app/shared/components/df-user-details/df-user-details-base.component.html
+++ b/src/app/shared/components/df-user-details/df-user-details-base.component.html
@@ -4,11 +4,15 @@
   (alertClosed)="showAlert = false">
   {{ alertMsg }}
 </df-alert>
-<form name="admin-form" [formGroup]="userForm" (ngSubmit)="save()">
+<form
+  name="admin-form"
+  [formGroup]="userForm"
+  (ngSubmit)="save()"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <div class="user-details" [class.small]="isSmallScreen | async">
     <df-profile-details formGroupName="profileDetailsGroup" />
     <div class="additional-info">
-      <mat-slide-toggle formControlName="isActive">{{
+      <mat-slide-toggle color="primary" formControlName="isActive">{{
         'active' | transloco
       }}</mat-slide-toggle>
       <ng-container *ngIf="type === 'create'; else editMode">
@@ -62,7 +66,7 @@
           userForm.get('pass-invite')?.value === 'password' ||
           userForm.get('setPassword')?.value
         ">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.password.label' | transloco
           }}</mat-label>
@@ -78,7 +82,7 @@
             {{ 'userManagement.controls.password.errors.length' | transloco }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.confirmPassword.label' | transloco
           }}</mat-label>
@@ -152,10 +156,14 @@ <h3>{{ userType + '.accessByTabs' | transloco }}</h3>
     [roles]="roles"></df-user-app-roles>
   <df-lookup-keys formArrayName="lookupKeys"></df-lookup-keys>
   <div class="full-width action-bar">
-    <button mat-flat-button type="button" [routerLink]="cancelRoute">
+    <button
+      class="cancel-btn"
+      mat-flat-button
+      type="button"
+      [routerLink]="cancelRoute">
       {{ 'cancel' | transloco }}
     </button>
-    <button mat-flat-button color="primary" type="submit">
+    <button class="save-btn" mat-flat-button color="primary" type="submit">
       {{ (type === 'create' ? 'create' : 'update') | transloco }}
     </button>
   </div>
diff --git a/src/app/shared/components/df-user-details/df-user-details-base.component.ts b/src/app/shared/components/df-user-details/df-user-details-base.component.ts
index 9fc251f6..4e766353 100644
--- a/src/app/shared/components/df-user-details/df-user-details-base.component.ts
+++ b/src/app/shared/components/df-user-details/df-user-details-base.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   FormArray,
   FormBuilder,
@@ -21,6 +21,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { DfPaywallService } from '../../services/df-paywall.service';
 import { of, switchMap } from 'rxjs';
+import { DfThemeService } from '../../services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -77,6 +78,8 @@ export abstract class DfUserDetailsBaseComponent<T> implements OnInit {
       appRoles: this.fb.array([]),
     });
   }
+  themeService = inject(DfThemeService);
+  isDarkMode = this.themeService.darkMode$;
 
   get cancelRoute() {
     let route = `/${ROUTES.ADMIN_SETTINGS}/`;
diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html
index 5c94abaf..bae179a9 100644
--- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.html
+++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.html
@@ -1,17 +1,19 @@
-<mat-form-field subscriptSizing="dynamic">
-  <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
-  <mat-select
-    [formControl]="control"
-    [multiple]="this.type === 'verb_multiple' || this.type === 'number'"
-    [attr.aria-label]="schema.label">
-    <mat-option *ngFor="let verb of verbs" [value]="verb.value">
-      {{ verb.label }}
-    </mat-option>
-  </mat-select>
-  <fa-icon
-    *ngIf="schema.description"
-    class="tool-tip-trigger"
-    matSuffix
-    [icon]="faCircleInfo"
-    [matTooltip]="schema.description" />
-</mat-form-field>
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label *ngIf="showLabel">{{ schema.label }}</mat-label>
+    <mat-select
+      [formControl]="control"
+      [multiple]="this.type === 'verb_multiple' || this.type === 'number'"
+      [attr.aria-label]="schema.label">
+      <mat-option *ngFor="let verb of verbs" [value]="verb.value">
+        {{ verb.label }}
+      </mat-option>
+    </mat-select>
+    <fa-icon
+      *ngIf="schema.description"
+      class="tool-tip-trigger"
+      matSuffix
+      [icon]="faCircleInfo"
+      [matTooltip]="schema.description" />
+  </mat-form-field>
+</div>
diff --git a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts
index 9b75b3ff..941b51c7 100644
--- a/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts
+++ b/src/app/shared/components/df-verb-picker/df-verb-picker.component.ts
@@ -15,7 +15,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy } from '@ngneat/until-destroy';
-
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -31,6 +32,7 @@ type Verb = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
     NgIf,
     MatTooltipModule,
     FontAwesomeModule,
+    AsyncPipe,
   ],
 })
 export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck {
@@ -71,9 +73,13 @@ export class DfVerbPickerComponent implements ControlValueAccessor, DoCheck {
   onChange: (value: number | Verb | Array<Verb>) => void;
   onTouched: () => void;
 
-  constructor(@Self() public controlDir: NgControl) {
+  constructor(
+    @Self() public controlDir: NgControl,
+    private themeService: DfThemeService
+  ) {
     controlDir.valueAccessor = this;
   }
+  isDarkMode = this.themeService.darkMode$;
 
   ngDoCheck(): void {
     if (
diff --git a/src/dark-style.scss b/src/dark-style.scss
new file mode 100644
index 00000000..1c57a7d9
--- /dev/null
+++ b/src/dark-style.scss
@@ -0,0 +1,247 @@
+/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+
+.dark-theme {
+  // Font
+  .breadcrumb-link > span {
+    color: mat.get-color-from-palette($df-purple-palette, 500) !important;
+  }
+
+  // Divider
+  .mat-divider {
+    border-color: white !important;
+  }
+  .system-info-container
+    .system-info-instance
+    .system-info-packages
+    .package-header {
+    border-bottom-color: white !important;
+  }
+  .system-info-container .system-info-instance .system-info-packages {
+    border-left-color: white !important;
+  }
+
+  // Step
+  .mat-stepper-horizontal {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border: 1px solid white !important;
+  }
+  .mat-step-icon {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      300
+    ) !important;
+  }
+  .mat-step-icon-selected {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      700
+    ) !important;
+  }
+  .mat-step-icon-state-edit {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      700
+    ) !important;
+  }
+  .mat-stepper-horizontal-line {
+    border-top-color: white !important;
+  }
+
+  .mat-step-label {
+    color: white !important;
+  }
+
+  // Radio Button
+  .mat-mdc-radio-button
+    .mdc-radio
+    .mdc-radio__native-control
+    + .mdc-radio__background
+    .mdc-radio__outer-circle {
+    border-color: white !important;
+  }
+  // Checkbox
+  .mat-mdc-checkbox .mdc-checkbox__background,
+  .mdc-checkbox__ripple {
+    border-color: white !important;
+  }
+
+  // Form Element
+  .mdc-notched-outline > * {
+    border-color: white !important;
+  }
+
+  mat-label,
+  mat-select,
+  mat-option,
+  input,
+  textarea,
+  button,
+  span {
+    color: white !important;
+  }
+  .mat-mdc-form-field-required-marker {
+    color: white !important;
+  }
+  .mdc-form-field > label {
+    color: white !important;
+  }
+  .mat-mdc-select-disabled {
+    color: #a3a1a1 !important;
+  }
+  // Button
+  .save-btn {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      600
+    ) !important;
+    color: mat.get-color-from-palette($df-purple-palette, 700) !important;
+  }
+  .cancel-btn {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    color: mat.get-color-from-palette($df-purple-palette, 200) !important;
+    border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important;
+  }
+  .copy-btn {
+    color: white !important;
+  }
+  .refresh-btn {
+    color: #a3a1a1 !important;
+  }
+  .close-btn {
+    color: mat.get-color-from-palette($df-purple-palette, 200) !important;
+    border: 1px solid mat.get-color-from-palette($df-purple-palette, 200) !important;
+  }
+
+  // Card
+  .mat-mdc-card {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    color: white !important;
+    border: 1px solid white !important;
+  }
+  .mat-mdc-card-header {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    color: white !important;
+  }
+  .mat-mdc-card-subtitle {
+    color: #a3a1a1 !important;
+  }
+
+  .mat-expansion-panel {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border: 1px soild white !important;
+    color: white !important;
+  }
+  .mat-expansion-panel-header {
+    color: white !important;
+  }
+
+  .mat-accordion .mat-expansion-panel {
+    border: 1px solid white !important;
+  }
+  .mat-expansion-panel-header-title,
+  .mat-expansion-indicator::after {
+    color: white;
+  }
+  .mat-expansion-panel-header-description {
+    color: #a3a1a1;
+  }
+
+  // Table
+  table,
+  .mat-mdc-table {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    .mat-mdc-header-row {
+      .mat-mdc-header-cell {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          1002
+        ) !important;
+        color: white !important;
+        border-color: white !important;
+      }
+    }
+    .mat-mdc-row {
+      .mat-mdc-cell {
+        color: white !important;
+        border-color: white !important;
+      }
+    }
+    .action-btn {
+      color: mat.get-color-from-palette($df-purple-palette, 700) !important;
+    }
+  }
+  .no-data-row td {
+    color: white !important;
+  }
+
+  .clickable {
+    &.mat-mdc-row:focus,
+    &.mat-mdc-row:focus-within {
+      .mat-mdc-cell:first-child {
+        border-left: 2px solid
+          mat.get-color-from-palette($df-purple-palette, 800) !important;
+      }
+    }
+
+    &.mat-mdc-row:focus,
+    &.mat-mdc-row:focus-within,
+    &.mat-mdc-row:hover {
+      .mat-mdc-cell {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          600
+        ) !important;
+      }
+    }
+  }
+
+  // Swagger
+  .swagger-ui .info .title,
+  .swagger-ui .renderedMarkdown p {
+    color: white !important;
+  }
+
+  .swagger-ui .scheme-container {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border: 1px solid white !important;
+    color: white !important;
+  }
+  .swagger-ui .model-toggle::after {
+    background-color: white !important;
+  }
+
+  // Editor
+  .editor {
+    color: unset !important;
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border: 1px solid white;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 8669e712..123f7800 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 @use '@angular/material' as mat;
 @use 'src/theme' as theme;
-
+@import 'src/dark-style.scss';
 $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 
 html,
@@ -145,3 +145,88 @@ fa-icon.mat-mdc-tooltip-trigger {
   padding: 8px;
   height: 100%;
 }
+
+// light mode
+a {
+  color: mat.get-color-from-palette($df-purple-palette, 600);
+}
+
+// Step
+.mat-step-icon-selected {
+  background-color: mat.get-color-from-palette(
+    $df-purple-palette,
+    400
+  ) !important;
+}
+.mat-step-icon-state-edit {
+  background-color: mat.get-color-from-palette(
+    $df-purple-palette,
+    400
+  ) !important;
+}
+
+// Radio Button
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control
+  + .mdc-radio__background
+  .mdc-radio__outer-circle {
+  border-color: black !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled:checked
+  + .mdc-radio__background
+  .mdc-radio__outer-circle {
+  border-color: mat.get-color-from-palette($df-purple-palette, 600) !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled
+  + .mdc-radio__background
+  .mdc-radio__inner-circle {
+  border-color: mat.get-color-from-palette($df-purple-palette, 600) !important;
+}
+
+// Checkbox
+.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,
+.mdc-checkbox__ripple {
+  background-color: mat.get-color-from-palette(
+    $df-purple-palette,
+    600
+  ) !important;
+  border-color: mat.get-color-from-palette($df-purple-palette, 600) !important;
+}
+
+// Button
+.save-btn {
+  background-color: mat.get-color-from-palette(
+    $df-purple-palette,
+    400
+  ) !important;
+  color: white !important;
+  border-radius: 20px !important;
+}
+.cancel-btn {
+  color: mat.get-color-from-palette($df-purple-palette, 1001) !important;
+  border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important;
+  border-radius: 20px !important;
+}
+.action-btn {
+  color: mat.get-color-from-palette($df-purple-palette, 500) !important;
+}
+// Select
+.mat-mdc-select-arrow {
+  color: unset !important;
+}
+// Tab
+.mat-mdc-tab .mdc-tab-indicator__content--underline {
+  border-color: mat.get-color-from-palette($df-purple-palette, 500) !important;
+}
+
+// Swagger
+.swagger-ui .opblock .opblock-section-header {
+  background: unset !important;
+}