diff --git a/dist.zip b/dist.zip
deleted file mode 100644
index ccf80b20..00000000
Binary files a/dist.zip and /dev/null differ
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-table.component.ts b/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts
index 9c034b9a..25f7a0a1 100644
--- a/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts
+++ b/src/app/adf-api-docs/df-api-docs/df-api-docs-table.component.ts
@@ -90,7 +90,8 @@ export class DfApiDocsTableComponent extends DfManageTableComponent<ApiDocsRowDa
   }
 
   override mapDataToTable(data: Service[]): ApiDocsRowData[] {
-    return data.map(val => {
+    const sortedData = data.sort((a, b) => a.id - b.id);
+    return sortedData.map(val => {
       const type = this.getServiceType(val.type);
       return {
         name: val.name,
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..f9ebe5e8 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,17 +35,17 @@ 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) {
-        this.apiDocJson = mapCamelToSnake(data);
+        this.apiDocJson = { ...data, paths: mapCamelToSnake(data.paths) };
       }
     });
   }
-
   ngAfterContentInit(): void {
     const apiDocumentation = this.apiDocJson;
     SwaggerUI({
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 8d734272..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,271 +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 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 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 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" class="full-width">{{
-    'apps.createApp.active' | transloco
-  }}</mat-slide-toggle>
-  <!-- API Card -->
-  <mat-card
-    *ngIf="editApp"
-    class="full-width"
-    [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
-      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="half-width">
-    <mat-form-field *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 *ngIf="appForm.controls['appLocation'].value === '1'">
-      <mat-label>{{
-        'apps.createApp.appLocation.options.fileStorage.storageFolder.label'
-          | transloco
-      }}</mat-label>
+<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"
+      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
-      *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>
+      subscriptSizing="dynamic"
+      appearance="outline"
+      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 *ngIf="appForm.controls['appLocation'].value === '2'">
-      <mat-label>
-        {{ 'apps.createApp.appLocation.options.remoteUrl.label' | transloco }}
-      </mat-label>
-      <input
+    <mat-form-field
+      subscriptSizing="dynamic"
+      appearance="outline"
+      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
-      *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.apiKey.copy' | transloco }}
+        </button>
+        <button
+          mat-button
+          class="refresh-btn"
+          type="button"
+          (click)="refreshApiKey()"
+          [disabled]="disableKeyRefresh">
+          <fa-icon [icon]="faRefresh"></fa-icon>
 
-          {{ 'apps.createApp.appLocation.options.urlPath.copy' | transloco }}
+          {{ '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" (click)="goBack()">
-      {{ 'cancel' | transloco }}
-    </button>
-    <button mat-flat-button color="primary">
-      <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.scss b/src/app/adf-apps/df-app-details/df-app-details.component.scss
index aa1a659f..fc684160 100644
--- a/src/app/adf-apps/df-app-details/df-app-details.component.scss
+++ b/src/app/adf-apps/df-app-details/df-app-details.component.scss
@@ -1,3 +1,15 @@
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+
 mat-card {
   word-wrap: break-word;
 }
+.api-card,
+.location-card {
+  background-color: mat.get-color-from-palette($df-purple-palette, 100);
+}
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+}
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-table.component.ts b/src/app/adf-config/df-cache/df-cache-table.component.ts
index fe49d22d..84d1c415 100644
--- a/src/app/adf-config/df-cache/df-cache-table.component.ts
+++ b/src/app/adf-config/df-cache/df-cache-table.component.ts
@@ -27,7 +27,7 @@ import { Actions } from 'src/app/shared/types/table';
 export class DfCacheTableComponent extends DfManageTableComponent<CacheRow> {
   constructor(
     @Inject(CACHE_SERVICE_TOKEN)
-    private cacheService: DfBaseCrudService,
+    cacheService: DfBaseCrudService,
     router: Router,
     activatedRoute: ActivatedRoute,
     liveAnnouncer: LiveAnnouncer,
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-icon-card-link/df-icon-card-link.component.html b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.html
index c20f05c1..7422240b 100644
--- a/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.html
+++ b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.html
@@ -3,6 +3,7 @@
     href="{{ linkInfo.url }}"
     target="_blank"
     class="icon-link-container"
+    [class]="(isDarkMode | async) ? 'dark-theme' : ''"
     [class.x-small]="breakpointService.isXSmallScreen | async"
     aria-labelledby="link-label">
     <mat-card class="icon-link-card">
diff --git a/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.scss b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.scss
index 1b605138..cd9d0e9f 100644
--- a/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.scss
+++ b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.scss
@@ -1,3 +1,6 @@
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 .icon-link-container {
   display: flex;
   flex-direction: column;
@@ -33,3 +36,15 @@ a {
 .label {
   margin-top: 15px;
 }
+
+.dark-theme {
+  .icon-link-card {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+  }
+  .label {
+    color: white !important;
+  }
+}
diff --git a/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.ts b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.ts
index 60da1b6e..71546d40 100644
--- a/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.ts
+++ b/src/app/adf-home/df-icon-card-link/df-icon-card-link.component.ts
@@ -4,6 +4,7 @@ import { DfBreakpointService } from 'src/app/shared/services/df-breakpoint.servi
 import { AsyncPipe, NgIf } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { TranslocoPipe } from '@ngneat/transloco';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 interface LinkInfo {
   name: string;
@@ -19,7 +20,11 @@ interface LinkInfo {
   imports: [MatCardModule, AsyncPipe, TranslocoPipe, NgIf],
 })
 export class DfIconCardLinkComponent {
-  constructor(public breakpointService: DfBreakpointService) {}
+  constructor(
+    public breakpointService: DfBreakpointService,
+    private themeService: DfThemeService
+  ) {}
 
   @Input() linkInfo: LinkInfo;
+  isDarkMode = this.themeService.darkMode$;
 }
diff --git a/src/app/adf-home/df-icon-link/df-icon-link.component.scss b/src/app/adf-home/df-icon-link/df-icon-link.component.scss
index dd6f077e..e5c3f06c 100644
--- a/src/app/adf-home/df-icon-link/df-icon-link.component.scss
+++ b/src/app/adf-home/df-icon-link/df-icon-link.component.scss
@@ -1,4 +1,9 @@
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+
 .plain-icon-link {
+  color: mat.get-color-from-palette($df-purple-palette, 600);
   display: flex;
   justify-content: flex-start;
   align-items: center;
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 894521bc..ab3fdd8f 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -1,104 +1,91 @@
-<section
-  class="two-column-flex-container"
-  [class.mobile]="breakpointService.isSmallScreen | async">
-  <article class="flex-column">
-    <div class="video-link">
-      <a
-        href="https://youtu.be/FOSOm88RxPw"
-        target="_blank"
-        aria-labelledby="video-link-description">
-        <img class="video-image" src="assets/img/macbook-hp-df-1.png" alt="" />
-        <div class="video-overlay">
-          <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
-          <span id="video-link-description">{{
-            'home.welcomePage.watchVideoCta' | transloco
-          }}</span>
-        </div>
-      </a>
-    </div>
-
-    <article>
-      <h2>
-        {{ 'home.welcomePage.welcomeHeading' | transloco }}
-      </h2>
-      <p id="get-started-links">
-        {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
-      </p>
-      <ul aria-labelledby="get-started-links">
-        <li *ngFor="let resource of welcomePageResources">
-          <df-icon-link [linkItem]="resource"></df-icon-link>
-        </li>
-      </ul>
+<div [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <section
+    class="two-column-flex-container"
+    [class.mobile]="breakpointService.isSmallScreen | async">
+    <article class="flex-column">
+      <article>
+        <h2>
+          {{ 'home.welcomePage.welcomeHeading' | transloco }}
+        </h2>
+        <p id="get-started-links">
+          {{ 'home.welcomePage.welcomeSubHeading' | transloco }}
+        </p>
+        <ul aria-labelledby="get-started-links">
+          <li *ngFor="let resource of welcomePageResources">
+            <df-icon-link [linkItem]="resource"></df-icon-link>
+          </li>
+        </ul>
+      </article>
+      <div class="video-link">
+        <a
+          href="https://youtu.be/FOSOm88RxPw"
+          target="_blank"
+          aria-labelledby="video-link-description">
+          <img
+            class="video-image"
+            src="assets/img/macbook-hp-df-1.png"
+            alt="" />
+          <div class="video-overlay">
+            <fa-icon [icon]="faCirclePlay" class="fa-4x play-icon"></fa-icon>
+            <span id="video-link-description">{{
+              'home.welcomePage.watchVideoCta' | transloco
+            }}</span>
+          </div>
+        </a>
+      </div>
     </article>
-  </article>
-
-  <aside class="flex-column">
-    <mat-card class="notice-card">
-      <h3>
-        <fa-icon
-          [icon]="faHeart"
-          class="pre-heading-icon"
-          aria-hidden="true"></fa-icon
-        >{{ 'home.welcomePage.ossUsersHeading' | transloco }}
-      </h3>
-      <p [innerHtml]="'home.welcomePage.ossUsersText' | transloco"></p>
-    </mat-card>
-
-    <mat-card class="notice-card">
-      <h3>
-        <fa-icon
-          [icon]="faComment"
-          class="pre-heading-icon"
-          aria-hidden="true"></fa-icon
-        >{{ 'home.welcomePage.hearFromYouHeading' | transloco }}
-      </h3>
-      <p [innerHtml]="'home.welcomePage.hearFromYouText' | transloco"></p>
-    </mat-card>
-  </aside>
-</section>
+    <aside class="flex-column">
+      <mat-card class="notice-card">
+        <h3>
+          <fa-icon
+            [icon]="faHeart"
+            class="pre-heading-icon"
+            aria-hidden="true"></fa-icon
+          >{{ 'home.welcomePage.ossUsersHeading' | transloco }}
+        </h3>
+        <p [innerHtml]="'home.welcomePage.ossUsersText' | transloco"></p>
+      </mat-card>
 
-<!-- <mat-divider></mat-divider>
+      <mat-card class="notice-card">
+        <h3>
+          <fa-icon
+            [icon]="faComment"
+            class="pre-heading-icon"
+            aria-hidden="true"></fa-icon
+          >{{ 'home.welcomePage.hearFromYouHeading' | transloco }}
+        </h3>
+        <p [innerHtml]="'home.welcomePage.hearFromYouText' | transloco"></p>
+      </mat-card>
+    </aside>
+  </section>
 
-<section class="platforms-section">
-  <h3>
-    {{ 'home.quickstartPage.quickstartSubHeading' | transloco }}
-  </h3>
+  <!-- <mat-divider></mat-divider>
 
-  <ol aria-labelledby="quickstart-instructions-heading">
-    <li>{{ 'home.quickstartPage.quickstartSteps.stepOne' | transloco }}</li>
-    <li>{{ 'home.quickstartPage.quickstartSteps.stepTwo' | transloco }}</li>
-    <li>{{ 'home.quickstartPage.quickstartSteps.stepThree' | transloco }}</li>
-  </ol>
+  <section class="platforms-section">
+    <h3>
+      {{ 'home.quickstartPage.quickstartSubHeading' | transloco }}
+    </h3>
 
-  <article>
-    <h4 id="native-examples-heading">
-      {{ 'home.welcomePage.nativeExamplesHeading' | transloco }}
-    </h4>
-
-    <ul
-      class="flex-list-container"
-      [class.x-small]="breakpointService.isXSmallScreen | async"
-      aria-labelledby="native-examples-heading">
-      <li *ngFor="let link of nativeExampleLinks">
-        <df-icon-card-link [linkInfo]="link"></df-icon-card-link>
-      </li>
-    </ul>
-  </article>
-
-  <article>
-    <h4 id="javascript-examples-heading">
-      {{ 'home.welcomePage.javaScriptExamplesHeading' | transloco }}
-    </h4>
+    <ol aria-labelledby="quickstart-instructions-heading">
+      <p>{{ 'home.quickstartPage.quickstartSteps.stepOne' | transloco }}</p>
+      <p>{{ 'home.quickstartPage.quickstartSteps.stepTwo' | transloco }}</p>
+      <p>{{ 'home.quickstartPage.quickstartSteps.stepThree' | transloco }}</p>
+    </ol>
+    <article>
+      <h4 id="javascript-examples-heading">
+        {{ 'home.welcomePage.javaScriptExamplesHeading' | transloco }}
+      </h4>
 
-    <ul
-      class="flex-list-container"
-      [class.x-small]="breakpointService.isXSmallScreen | async"
-      aria-labelledby="javascript-examples-heading">
-      <li *ngFor="let link of javaScriptExampleLinks">
-        <df-icon-card-link [linkInfo]="link"></df-icon-card-link>
-      </li>
-    </ul>
-  </article>
-</section>
-<mat-divider></mat-divider>
-<df-download-page></df-download-page> -->
+      <ul
+        class="flex-list-container"
+        [class.x-small]="breakpointService.isXSmallScreen | async"
+        aria-labelledby="javascript-examples-heading">
+        <li *ngFor="let link of javaScriptExampleLinks">
+          <df-icon-card-link [linkInfo]="link"></df-icon-card-link>
+        </li>
+      </ul>
+    </article>
+  </section>
+  <mat-divider></mat-divider>
+  <df-download-page></df-download-page> -->
+</div>
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 29732888..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
@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'src/theme' as theme;
 @import '../adf-home.module.scss';
-
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 $df-coral-palette: mat.define-palette(theme.$df-coral-palette);
 
 .two-column-flex-container {
@@ -53,7 +53,6 @@ $df-coral-palette: mat.define-palette(theme.$df-coral-palette);
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgba(255, 255, 255, 0.5);
   pointer-events: none;
 }
 
@@ -70,9 +69,27 @@ $df-coral-palette: mat.define-palette(theme.$df-coral-palette);
 mat-card.notice-card {
   padding: 30px;
   margin-bottom: 40px;
+  p {
+    a {
+      color: mat.get-color-from-palette($df-purple-palette, 600);
+    }
+  }
 }
 
 .pre-heading-icon {
   margin-right: 10px;
-  color: mat.get-color-from-palette($df-coral-palette, 300);
+  color: mat.get-color-from-palette($df-purple-palette, 600);
+}
+
+.dark-theme {
+  h2,
+  p {
+    color: white;
+  }
+  .notice-card {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
 }
diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
index fe24a5a7..f52189a5 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.ts
@@ -22,6 +22,7 @@ import { TranslocoPipe } from '@ngneat/transloco';
 import { DfQuickstartPageComponent } from '../df-quickstart-page/df-quickstart-page.component';
 import { DfResourcesPageComponent } from '../df-resources-page/df-resources-page.component';
 import { DfDownloadPageComponent } from '../df-download-page/df-download-page.component';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 
 @Component({
   selector: 'df-welcome-page',
@@ -51,5 +52,9 @@ export class DfWelcomePageComponent {
   nativeExampleLinks = nativeExampleLinks;
   javaScriptExampleLinks = javaScriptExampleLinks;
 
-  constructor(public breakpointService: DfBreakpointService) {}
+  constructor(
+    public breakpointService: DfBreakpointService,
+    private themeService: DfThemeService
+  ) {}
+  isDarkMode = this.themeService.darkMode$;
 }
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-profile/df-profile/df-profile.component.html b/src/app/adf-profile/df-profile/df-profile.component.html
index e3592829..227fd8b7 100644
--- a/src/app/adf-profile/df-profile/df-profile.component.html
+++ b/src/app/adf-profile/df-profile/df-profile.component.html
@@ -17,7 +17,7 @@
         [formGroup]="profileForm"
         (ngSubmit)="updateProfile()">
         <df-profile-details formGroupName="profileDetailsGroup" />
-        <mat-form-field appearance="fill" *ngIf="needPassword">
+        <mat-form-field appearance="outline" *ngIf="needPassword">
           <mat-label>{{
             'userManagement.controls.currentPassword.label' | transloco
           }}</mat-label>
@@ -48,13 +48,13 @@
         name="security-question-form"
         [formGroup]="securityQuestionForm"
         (ngSubmit)="updateSecurityQuestion()">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.securityQuestion.label' | transloco
           }}</mat-label>
           <input matInput formControlName="securityQuestion" />
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.securityAnswer.label' | transloco
           }}</mat-label>
@@ -84,7 +84,7 @@
           (alertClosed)="showAlert = false"
           >{{ alertMsg }}</df-alert
         >
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.oldPassword.label' | transloco
           }}</mat-label>
@@ -96,7 +96,7 @@
             }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.password.label' | transloco
           }}</mat-label>
@@ -112,7 +112,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>
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-manage-tables-table/df-manage-tables-table.component.ts b/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts
index 08ba6e71..f109e6d4 100644
--- a/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts
+++ b/src/app/adf-schema/df-manage-tables-table/df-manage-tables-table.component.ts
@@ -66,12 +66,17 @@ export class DfManageTablesTableComponent extends DfManageTableComponent<Databas
       };
     });
   }
-  refreshTable(limit?: number, offset?: number, filter?: string): void {
+  refreshTable(
+    limit?: number,
+    offset?: number,
+    filter?: string,
+    refresh?: boolean
+  ): void {
     const dbName = this._activatedRoute.snapshot.paramMap.get('name');
-
     this.service
       .get(`${dbName}/_schema`, {
         fields: ['name', 'label'].join(','),
+        refresh: refresh,
         limit,
         offset,
         filter,
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-manage-services/df-manage-services-table.component.ts b/src/app/adf-services/df-manage-services/df-manage-services-table.component.ts
index 4a578c17..c30065cd 100644
--- a/src/app/adf-services/df-manage-services/df-manage-services-table.component.ts
+++ b/src/app/adf-services/df-manage-services/df-manage-services-table.component.ts
@@ -110,7 +110,8 @@ export class DfManageServicesTableComponent extends DfManageTableComponent<Servi
   refreshTable(
     limit?: number | undefined,
     offset?: number | undefined,
-    filter?: string | undefined
+    filter?: string | undefined,
+    refresh?: true
   ): void {
     if (this.serviceTypes && this.serviceTypes.length !== 0) {
       filter = `${filter ? `${filter} and ` : ''}(type in ("${this.serviceTypes
@@ -120,12 +121,12 @@ export class DfManageServicesTableComponent extends DfManageTableComponent<Servi
     filter = `${filter ? `${filter} and ` : ''}(created_by_id is${
       !this.system ? ' not ' : ' '
     }null)`;
-
     this.serviceService
       .getAll<GenericListResponse<Service>>({
         limit,
         offset,
         filter,
+        refresh,
       })
       .subscribe(data => {
         this.dataSource.data = this.mapDataToTable(data.resource);
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 d8e1032a..72800520 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>
+                      {{ 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>
@@ -300,7 +313,7 @@ <h4 class="text-center">{{ type.label }}</h4>
     <mat-form-field
       subscriptSizing="dynamic"
       appearance="outline"
-      class="dynamic-width"
+      class="full-width"
       *ngIf="!subscriptionRequired">
       <mat-label>{{ 'services.controls.label.label' | transloco }}</mat-label>
       <input matInput formControlName="label" />
@@ -327,17 +340,50 @@ <h4 class="text-center">{{ type.label }}</h4>
     </mat-form-field>
     <mat-slide-toggle
       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">
         <mat-accordion class="full-width">
           <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
             <mat-expansion-panel-header
-              >{{ 'services.options' | transloco }}
+              >{{ 'services.options' | transloco }}s
             </mat-expansion-panel-header>
             <div class="details-section">
+              <ng-container *ngIf="this.isNetworkService">
+                <mat-button-toggle-group
+                  aria-label="Service Definition Type"
+                  [(ngModel)]="serviceDefinitionType"
+                  [ngModelOptions]="{ standalone: true }"
+                  (change)="
+                    onServiceDefinitionTypeChange(serviceDefinitionType)
+                  ">
+                  <mat-button-toggle value="0">JSON</mat-button-toggle>
+                  <mat-button-toggle value="1">YAML</mat-button-toggle>
+                </mat-button-toggle-group>
+                <mat-form-field class="full-width" appearance="outline">
+                  <mat-label>Service Definition</mat-label>
+                  <textarea
+                    matInput
+                    rows="10"
+                    [(ngModel)]="serviceDefinition"
+                    [ngModelOptions]="{ standalone: true }"></textarea>
+                </mat-form-field>
+              </ng-container>
+
+              <!-- <ng-container *ngIf="this.isNetworkService">
+                <df-script-editor
+                  [type]="getControl('type')"
+                  formControlName="content"
+                  [storageServiceId]="getConfigControl('storageServiceId')"
+                  [storagePath]="getConfigControl('storagePath')"
+                  [content]="getConfigControl('content')"
+                  [cache]="serviceData ? serviceData.name : ''"
+                  class="full-width"></df-script-editor
+              ></ng-container> -->
+
               <ng-container *ngFor="let item of viewSchema">
                 <ng-container
                   *ngIf="
@@ -366,6 +412,7 @@ <h4 class="text-center">{{ type.label }}</h4>
                         'file_certificate'
                       ].includes(item.type)
                     "
+                    color="primary"
                     [schema]="item"
                     [formControl]="getConfigControl(item.name)"
                     [class.dynamic-width]="item.type !== 'file_certificate'"
@@ -385,10 +432,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
+        mat-flat-button
+        class="cancel-btn"
+        type="button"
+        (click)="goBack()">
         {{ 'cancel' | transloco }}
       </button>
-      <button mat-flat-button color="primary">
+      <button mat-flat-button class="save-btn" color="primary">
         {{ 'save' | transloco }}
       </button>
     </div>
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 aa697ac7..6b1b750b 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
@@ -1,3 +1,7 @@
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+
 .grid-wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -80,11 +84,15 @@ label.radio-card {
 
   .card-content {
     width: 100%;
+    text-align: center;
     img {
       margin-bottom: 10px;
       width: 100%;
       height: 110px;
     }
+    h4 {
+      color: #000;
+    }
   }
 }
 
@@ -112,3 +120,34 @@ mat-icon {
   right: -55px;
   color: red;
 }
+
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+::ng-deep .mat-expansion-panel-header > .mat-expansion-indicator::after {
+  color: unset !important;
+}
+::ng-deep .mat-mdc-select-arrow {
+  color: unset !important;
+}
+
+.dark-theme {
+  label.radio-card {
+    .card-content-wrapper {
+      background: #000;
+      border: 1px solid #fff;
+    }
+
+    .check-icon {
+      border: solid 2px #2d2d2d;
+    }
+
+    .card-content {
+      h4 {
+        color: #fff;
+      }
+    }
+  }
+}
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 b6e3b073..ad09f635 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
@@ -39,7 +39,7 @@ import { Service } from 'src/app/shared/types/files';
 import { AceEditorMode } from 'src/app/shared/types/scripts';
 import { DfScriptEditorComponent } from 'src/app/shared/components/df-script-editor/df-script-editor.component';
 import { DfSystemConfigDataService } from 'src/app/shared/services/df-system-config-data.service';
-import { forkJoin, map, switchMap } from 'rxjs';
+import { map, switchMap } from 'rxjs';
 import {
   GOLD_SERVICES,
   SILVER_SERVICES,
@@ -49,6 +49,8 @@ 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';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -80,11 +82,13 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
     MatStepperModule,
     CommonModule,
     MatIconModule,
+    MatButtonToggleModule,
   ],
 })
 export class DfServiceDetailsComponent implements OnInit {
   edit = false;
   isDatabase = false;
+  isNetworkService = false;
   serviceTypes: Array<ServiceType>;
   notIncludedServices: Array<ServiceType>;
   serviceForm: FormGroup;
@@ -93,6 +97,8 @@ export class DfServiceDetailsComponent implements OnInit {
   configSchema: Array<ConfigSchema>;
   images: Array<ImageObject>;
   search = '';
+  serviceDefinition: string;
+  serviceDefinitionType: string;
 
   systemEvents: Array<{ label: string; value: string }>;
 
@@ -104,7 +110,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],
@@ -112,13 +119,17 @@ export class DfServiceDetailsComponent implements OnInit {
       label: [''],
       description: [''],
       isActive: [true],
+      service_doc_by_service_id: this.fb.group({
+        format: [],
+        content: [''],
+      }),
     });
     const id = this.activatedRoute.snapshot.paramMap.get('id');
     if (id) {
       this.edit = true;
     }
   }
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     this.http
       .get<Array<ImageObject>>('assets/img/databaseImages.json')
@@ -135,6 +146,12 @@ export class DfServiceDetailsComponent implements OnInit {
         if (route['groups'] && route['groups'][0] === 'Database') {
           this.isDatabase = true;
         }
+        if (
+          (route['groups'] && route['groups'][0] === 'Remote Service') ||
+          (route['groups'] && route['groups'][0] === 'Script')
+        ) {
+          this.isNetworkService = true;
+        }
         const { data, serviceTypes, groups } = route;
         const licenseType = env.platform?.license;
         this.serviceTypes = serviceTypes;
@@ -181,7 +198,8 @@ export class DfServiceDetailsComponent implements OnInit {
             ...data,
             config: data.config,
           });
-          this.serviceForm.controls['type'].disable();
+          (this.serviceDefinition = data?.serviceDocByServiceId.content),
+            this.serviceForm.controls['type'].disable();
         } else {
           this.serviceForm.controls['type'].valueChanges.subscribe(value => {
             this.serviceForm.removeControl('config');
@@ -190,11 +208,13 @@ export class DfServiceDetailsComponent implements OnInit {
           });
         }
       });
-    this.serviceForm.controls['type'].valueChanges.subscribe(value => {
-      this.serviceForm.patchValue({
-        label: value,
+    if (this.isDatabase) {
+      this.serviceForm.controls['type'].valueChanges.subscribe(value => {
+        this.serviceForm.patchValue({
+          label: value,
+        });
       });
-    });
+    }
   }
 
   initializeConfig() {
@@ -205,12 +225,12 @@ export class DfServiceDetailsComponent implements OnInit {
         if (control.required) {
           validator.push(Validators.required);
         }
-        config.addControl(
+        config?.addControl(
           control.name,
           new FormControl(control.default, validator)
         );
       });
-      this.serviceForm.addControl('config', config);
+      this.serviceForm?.addControl('config', config);
     }
   }
 
@@ -264,6 +284,28 @@ export class DfServiceDetailsComponent implements OnInit {
       return;
     }
     const data = this.serviceForm.getRawValue();
+    data.service_doc_by_service_id.content = this.serviceDefinition;
+    data.service_doc_by_service_id.format = Number(this.serviceDefinitionType);
+    type Params = {
+      snackbarError: string;
+      snackbarSuccess: string;
+      fields?: string;
+      related?: string;
+    };
+
+    let params: Params = {
+      snackbarError: 'server',
+      snackbarSuccess: 'services.createSuccessMsg',
+    };
+
+    if (this.isNetworkService) {
+      params = {
+        ...params,
+        fields: '*',
+        related: 'service_doc_by_service_id',
+      };
+    }
+
     if (this.edit) {
       this.servicesService
         .update(this.serviceData.id, data, {
@@ -276,11 +318,10 @@ export class DfServiceDetailsComponent implements OnInit {
     } else {
       this.servicesService
         .create(
-          { resource: [data] },
           {
-            snackbarError: 'server',
-            snackbarSuccess: 'services.createSuccessMsg',
-          }
+            resource: [data],
+          },
+          params
         )
         .subscribe(() => {
           this.router.navigate([`/api-connections/api-docs/${data.name}`]);
@@ -292,8 +333,8 @@ export class DfServiceDetailsComponent implements OnInit {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
 
-  getBackgroundImage(typeLable: string) {
-    const image = this.images?.find(img => img.label == typeLable);
+  getBackgroundImage(typeLabel: string) {
+    const image = this.images?.find(img => img.label == typeLabel);
     if (!image) {
       return '';
     }
@@ -315,8 +356,11 @@ export class DfServiceDetailsComponent implements OnInit {
 
   openDialog() {
     const dialogRef = this.dialog.open(DfPaywallModal);
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    dialogRef.afterClosed().subscribe(result => {});
+    dialogRef.afterClosed().subscribe();
+  }
+
+  onServiceDefinitionTypeChange(value: string) {
+    this.serviceDefinitionType = value;
   }
 }
 interface ImageObject {
diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss
index 07253a51..c8ecdfff 100644
--- a/src/app/adf-user-management/adf-user-management.scss
+++ b/src/app/adf-user-management/adf-user-management.scss
@@ -3,11 +3,16 @@
   flex-direction: column;
   justify-content: center;
   height: 100%;
+
   .user-management-card {
     padding: 16px 16px;
     margin: 0 auto;
     min-width: 300px;
     max-width: 445px;
+    box-shadow: var(--mdc-elevated-card-container-elevation);
+    --mdc-elevated-card-container-shape: 4px;
+    --mdc-outlined-card-container-shape: 4px;
+    --mdc-outlined-card-outline-width: 1px;
     mat-card-header {
       padding-bottom: 16px;
     }
@@ -33,3 +38,12 @@
     }
   }
 }
+
+.user-management-card-container {
+  margin-top: 20vh;
+
+  &.dark-theme {
+    background-color: #1e1e1e;
+    color: #fff;
+  }
+}
diff --git a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html
index 63ad0d6f..8ddbccc2 100644
--- a/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html
+++ b/src/app/adf-user-management/df-forgot-password/df-forgot-password.component.html
@@ -18,7 +18,7 @@
         [formGroup]="forgetPasswordForm"
         (ngSubmit)="requestReset()"
         *ngIf="!hasSecurityQuestion">
-        <mat-form-field appearance="fill" *ngIf="loginAttribute === 'email'">
+        <mat-form-field appearance="outline" *ngIf="loginAttribute === 'email'">
           <mat-label>
             {{ 'userManagement.controls.email.label' | transloco }}</mat-label
           >
@@ -39,7 +39,9 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" *ngIf="loginAttribute === 'username'">
+        <mat-form-field
+          appearance="outline"
+          *ngIf="loginAttribute === 'username'">
           <mat-label>{{
             'userManagement.controls.username.altLabel' | transloco
           }}</mat-label>
@@ -58,7 +60,7 @@
         [formGroup]="securityQuestionForm"
         (ngSubmit)="resetPassword()"
         *ngIf="hasSecurityQuestion">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>
             {{
               'userManagement.controls.securityQuestion.label' | transloco
@@ -70,7 +72,7 @@
             formControlName="securityQuestion"
             [readonly]="true" />
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>
             {{
               'userManagement.controls.securityAnswer.label' | transloco
@@ -85,7 +87,7 @@
             }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.password.label' | transloco
           }}</mat-label>
@@ -104,7 +106,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.confirmPassword.label' | transloco
           }}</mat-label>
diff --git a/src/app/adf-user-management/df-login/df-login.component.html b/src/app/adf-user-management/df-login/df-login.component.html
index 3c134266..6c5c73cc 100644
--- a/src/app/adf-user-management/df-login/df-login.component.html
+++ b/src/app/adf-user-management/df-login/df-login.component.html
@@ -1,4 +1,6 @@
-<div class="user-management-card-container">
+<div
+  class="user-management-card-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
   <div class="left-panel">
     <img
       src="../../../assets/img/logo.png"
diff --git a/src/app/adf-user-management/df-login/df-login.component.scss b/src/app/adf-user-management/df-login/df-login.component.scss
index dec15026..065f48d7 100644
--- a/src/app/adf-user-management/df-login/df-login.component.scss
+++ b/src/app/adf-user-management/df-login/df-login.component.scss
@@ -2,6 +2,7 @@
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 16px;
 }
 
 .left-panel img {
diff --git a/src/app/adf-user-management/df-login/df-login.component.ts b/src/app/adf-user-management/df-login/df-login.component.ts
index 5771cd4b..6b71263a 100644
--- a/src/app/adf-user-management/df-login/df-login.component.ts
+++ b/src/app/adf-user-management/df-login/df-login.component.ts
@@ -29,6 +29,8 @@ import { MatCardModule } from '@angular/material/card';
 import { TranslocoPipe } from '@ngneat/transloco';
 import { AuthService, LdapService } from 'src/app/shared/types/service';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { CommonModule } from '@angular/common';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-user-login',
@@ -51,6 +53,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
     RouterLink,
     FontAwesomeModule,
     TranslocoPipe,
+    CommonModule,
   ],
 })
 export class DfLoginComponent implements OnInit {
@@ -65,12 +68,15 @@ export class DfLoginComponent implements OnInit {
 
   fpRoute = `/${ROUTES.AUTH}/${ROUTES.FORGOT_PASSWORD}`;
 
+  isDarkMode = this.themeService.darkMode$;
+
   loginForm: FormGroup;
   constructor(
     private fb: FormBuilder,
     private systemConfigDataService: DfSystemConfigDataService,
     private authService: DfAuthService,
-    private router: Router
+    private router: Router,
+    private themeService: DfThemeService
   ) {
     this.loginForm = this.fb.group({
       services: [''],
diff --git a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html
index ad49d609..e06e7bf4 100644
--- a/src/app/adf-user-management/df-password-reset/df-password-reset.component.html
+++ b/src/app/adf-user-management/df-password-reset/df-password-reset.component.html
@@ -24,7 +24,7 @@
         name="reset-password-form"
         [formGroup]="passwordResetForm"
         (ngSubmit)="resetPassword()">
-        <mat-form-field appearance="fill" *ngIf="loginAttribute === 'email'">
+        <mat-form-field appearance="outline" *ngIf="loginAttribute === 'email'">
           <mat-label>
             {{ 'userManagement.controls.email.label' | transloco }}</mat-label
           >
@@ -45,7 +45,9 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" *ngIf="loginAttribute === 'username'">
+        <mat-form-field
+          appearance="outline"
+          *ngIf="loginAttribute === 'username'">
           <mat-label>{{
             'userManagement.controls.username.altLabel' | transloco
           }}</mat-label>
@@ -56,7 +58,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>
             {{
               'userManagement.controls.confirmationCode.label' | transloco
@@ -71,7 +73,7 @@
             }}
           </mat-error>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.password.' +
               (type === 'reset' ? 'label' : 'altLabel') | transloco
@@ -87,7 +89,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="outline">
           <mat-label>{{
             'userManagement.controls.confirmPassword.' +
               (type === 'reset' ? 'label' : 'altLabel') | transloco
diff --git a/src/app/adf-user-management/services/df-password.service.ts b/src/app/adf-user-management/services/df-password.service.ts
index 48e33754..8ee0ba56 100644
--- a/src/app/adf-user-management/services/df-password.service.ts
+++ b/src/app/adf-user-management/services/df-password.service.ts
@@ -35,9 +35,14 @@ export class DfPasswordService {
   }
 
   updatePassword(data: UpdatePasswordRequest) {
-    const url = this.userDataService.userData?.isSysAdmin
-      ? URLS.ADMIN_PASSWORD
-      : URLS.USER_PASSWORD;
+    let isSysAdmin = false;
+    // const url = this.userDataService.userData?.isSysAdmin
+    //   ? URLS.ADMIN_PASSWORD
+    //   : URLS.USER_PASSWORD;
+    this.userDataService.userData$.subscribe(userData => {
+      isSysAdmin = !!userData?.isSysAdmin;
+    });
+    const url = isSysAdmin ? URLS.ADMIN_PASSWORD : URLS.USER_PASSWORD;
     return this.http
       .post<UpdatePasswordResponse>(url, data, {
         headers: SHOW_LOADING_HEADER,
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 afde76ea..66d3c07c 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,84 +1,87 @@
-<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"
-  [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 ba307f30..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]"
@@ -68,6 +71,7 @@
       <td mat-cell *matCellDef="let row; let i = index">
         <button
           type="button"
+          class="remove-btn"
           mat-mini-fab
           (click)="remove(i)"
           [attr.aria-label]="'deleteRow' | transloco: { id: i }">
diff --git a/src/app/shared/components/df-field-array/df-array-field.component.scss b/src/app/shared/components/df-field-array/df-array-field.component.scss
index 73c57b6b..85499b98 100644
--- a/src/app/shared/components/df-field-array/df-array-field.component.scss
+++ b/src/app/shared/components/df-field-array/df-array-field.component.scss
@@ -1,3 +1,7 @@
+@use '@angular/material' as mat;
+@use 'src/theme' as theme;
+$df-purple-palette: mat.define-palette(theme.$df-purple-palette);
+
 .mat-column-actions {
   width: 50px;
   padding: 0 8px;
@@ -14,3 +18,7 @@
 .mat-mdc-card {
   overflow-y: auto;
 }
+
+.add-btn {
+  background-color: mat.get-color-from-palette($df-purple-palette, 500);
+}
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..13a9f982 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,24 +1,34 @@
-<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">
     <fa-icon [icon]="faPlus" size="xl"></fa-icon>
   </button>
+  <button
+    *ngIf="schema"
+    mat-mini-fab
+    color="alternate"
+    [attr.aria-label]="'importList' | transloco"
+    (click)="refreshSchema()"
+    type="button">
+    <fa-icon [icon]="faRefresh" size="xl"></fa-icon>
+  </button>
   <ng-content select="[topActions]"></ng-content>
   <div class="spacer"></div>
   <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 +85,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 dc8d4a73..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;
   }
 }
@@ -59,3 +61,12 @@ $red-palette: mat.define-palette(mat.$red-palette);
     }
   }
 }
+
+.dark-theme {
+  .search {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1004
+    ) !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..ebc557d0 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,
@@ -21,6 +22,7 @@ import {
   faTriangleExclamation,
   faCheckCircle,
   faXmarkCircle,
+  faRefresh,
 } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe, TranslocoService } from '@ngneat/transloco';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -34,6 +36,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,
@@ -69,9 +72,11 @@ export abstract class DfManageTableComponent<T>
   faPlus = faPlus;
   faEllipsisV = faEllipsisV;
   faTriangleExclamation = faTriangleExclamation;
+  faRefresh = faRefresh;
   allowCreate = true;
   allowFilter = true;
   currentFilter = new FormControl('');
+  schema = false;
 
   abstract columns: Array<Column<T>>;
 
@@ -100,6 +105,7 @@ export abstract class DfManageTableComponent<T>
       },
     ],
   };
+  cacheService: any;
 
   constructor(
     protected router: Router,
@@ -108,10 +114,13 @@ 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 }) => {
+        this.schema = this.router.url.includes('schema');
         if (data && data.resource) {
           this.dataSource.data = this.mapDataToTable(data.resource);
         }
@@ -175,7 +184,12 @@ export abstract class DfManageTableComponent<T>
 
   abstract mapDataToTable(data: Array<any>): Array<T>;
 
-  abstract refreshTable(limit?: number, offset?: number, filter?: string): void;
+  abstract refreshTable(
+    limit?: number,
+    offset?: number,
+    filter?: string,
+    refresh?: true
+  ): void;
 
   abstract filterQuery(value: string): string;
 
@@ -243,4 +257,8 @@ export abstract class DfManageTableComponent<T>
         !this.actions.default.disabled)
     );
   }
+
+  refreshSchema() {
+    this.refreshTable(undefined, undefined, undefined, true);
+  }
 }
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 9e455461..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
         }}{{
@@ -16,8 +19,14 @@
         ">
         {{ 'userManagement.controls.username.errors.required' | transloco }}
       </mat-error>
+      <mat-error
+        *ngIf="
+          rootForm.get('profileDetailsGroup.username')?.errors?.['minlength']
+        ">
+        {{ '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
       >
@@ -37,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
       >
@@ -49,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>
@@ -62,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>
@@ -73,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 cc582fd2..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,45 +1,52 @@
-<div mat-dialog-title class="search-bar">
-  <mat-form-field class="search-input" subscriptSizing="dynamic">
-    <mat-label>{{ 'search' | transloco }}</mat-label>
-    <input matInput [formControl]="search" />
-  </mat-form-field>
-</div>
-<div
-  mat-dialog-content
-  class="search-container"
-  [class.small]="smallScreen$ | async">
-  <ng-container *ngIf="search.value; else recent">
-    <ng-component
-      *ngTemplateOutlet="results; context: { resultArray: results$ | async }">
-    </ng-component>
-  </ng-container>
-  <ng-template #recent>
-    <ng-component
-      *ngTemplateOutlet="results; context: { resultArray: recents$ | async }">
-    </ng-component>
-  </ng-template>
-  <ng-template #results let-resultArray="resultArray">
-    <ul *ngFor="let result of resultArray" class="result-groups">
-      <li>
-        {{ getTranslationKey(result.path) | transloco }}
-        <ul>
-          <li *ngFor="let item of result.items">
-            <button
-              color="primary"
-              class="result-item"
-              mat-stroked-button
-              (click)="navigate(result.path + '/' + item.segment)">
-              <fa-icon
-                *ngIf="item.segment === 'create'"
-                [icon]="faPlus"></fa-icon>
-              {{ item.label }}
-            </button>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </ng-template>
-</div>
-<div mat-dialog-actions>
-  <button mat-button [mat-dialog-close]>{{ 'close' | transloco }}</button>
+<div class="search-dialog">
+  <div mat-dialog-title class="search-bar">
+    <mat-form-field
+      class="search-input"
+      appearance="outline"
+      subscriptSizing="dynamic">
+      <mat-label>{{ 'search' | transloco }}</mat-label>
+      <input matInput [formControl]="search" />
+    </mat-form-field>
+  </div>
+  <div
+    mat-dialog-content
+    class="search-container"
+    [class.small]="smallScreen$ | async">
+    <ng-container *ngIf="search.value; else recent">
+      <ng-component
+        *ngTemplateOutlet="results; context: { resultArray: results$ | async }">
+      </ng-component>
+    </ng-container>
+    <ng-template #recent>
+      <ng-component
+        *ngTemplateOutlet="results; context: { resultArray: recents$ | async }">
+      </ng-component>
+    </ng-template>
+    <ng-template #results let-resultArray="resultArray">
+      <ul *ngFor="let result of resultArray" class="result-groups">
+        <li>
+          {{ getTranslationKey(result.path) | transloco }}
+          <ul>
+            <li *ngFor="let item of result.items">
+              <button
+                color="primary"
+                class="result-item"
+                mat-stroked-button
+                (click)="navigate(result.path + '/' + item.segment)">
+                <fa-icon
+                  *ngIf="item.segment === 'create'"
+                  [icon]="faPlus"></fa-icon>
+                {{ item.label }}
+              </button>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </ng-template>
+  </div>
+  <div mat-dialog-actions class="search-action">
+    <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 bfb572fc..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,5 +1,11 @@
+@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 {
-  margin-top: 16px;
   min-width: 275px;
 }
 .search-container {
@@ -20,3 +26,13 @@
   justify-content: left;
   margin: 2px 0;
 }
+
+.dark-theme {
+  &.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-search-dialog/df-search-dialog.component.ts b/src/app/shared/components/df-search-dialog/df-search-dialog.component.ts
index 62d62b29..014d1910 100644
--- a/src/app/shared/components/df-search-dialog/df-search-dialog.component.ts
+++ b/src/app/shared/components/df-search-dialog/df-search-dialog.component.ts
@@ -13,6 +13,7 @@ import { DfSearchService } from '../../services/df-search.service';
 import { DfBreakpointService } from '../../services/df-breakpoint.service';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { DfThemeService } from '../../services/df-theme.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -46,9 +47,12 @@ export class DfSearchDialogComponent implements OnInit {
     public dialogRef: MatDialogRef<DfSearchDialogComponent>,
     private searchService: DfSearchService,
     private router: Router,
-    private breakpointService: DfBreakpointService
+    private breakpointService: DfBreakpointService,
+    private themeService: DfThemeService
   ) {}
 
+  isDarkMode = this.themeService.darkMode$;
+
   getTranslationKey(path: string) {
     return `nav.${path.replaceAll('/', '.')}.nav`;
   }
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html
index 45f0ed49..6dcc6016 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.html
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html
@@ -1,16 +1,29 @@
 <div
   class="app-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
   [class.small]="isSmallScreen | async"
   [class.logged-in]="isLoggedIn$ | async">
   <ng-container *ngIf="isLoggedIn$ | async">
-    <mat-toolbar>
-      <button
-        mat-icon-button
-        (click)="sideNav.toggle()"
-        [attr.aria-label]="'toggleNav' | transloco">
-        <fa-icon [icon]="faBars"></fa-icon>
-      </button>
-      <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+    <mat-toolbar class="tool-bar">
+      <div class="button-wrapper">
+        <button
+          mat-icon-button
+          (click)="sideNav.toggle()"
+          [attr.aria-label]="'toggleNav' | transloco"
+          class="toggle-icon">
+          <fa-icon [icon]="faBars" class="toggle-icon"></fa-icon>
+        </button>
+        <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+      </div>
+      <div class="search-bar">
+        <fa-icon [icon]="faMagnifyingGlass" class="search-icon"></fa-icon>
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Search"
+          [formControl]="search"
+          (keydown.enter)="onSubmit()" />
+      </div>
       <span class="spacer"></span>
       <ng-container *ngIf="availableLanguages.length > 1">
         <button
@@ -28,6 +41,7 @@
           </button>
         </mat-menu>
       </ng-container>
+      <df-theme-toggle></df-theme-toggle>
       <button mat-button [matMenuTriggerFor]="profileMenu" class="profile-icon">
         <fa-icon [icon]="faUser"></fa-icon> {{ (userData$ | async)?.name }}
       </button>
@@ -85,12 +99,6 @@ <h3>API Scripting</h3>
         </div>
       </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
-        <button class="search-btn" mat-button (click)="handleSearchClick()">
-          {{ 'searchFeatures' | transloco }}
-          <span>
-            <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-          </span>
-        </button>
         <ng-container
           *ngTemplateOutlet="
             navList;
@@ -99,36 +107,38 @@ <h3>API Scripting</h3>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content class="sidenav-content">
-      <ng-container *ngIf="isLoggedIn$ | async">
-        <div class="banner" *ngIf="(hasError$ | async) === false">
-          <h1 class="page-header">
-            <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
-              <ng-container *ngIf="breadcrumb.path; else current">
-                <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
-                  ><ng-component
-                    *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-                </a>
-              </ng-container>
-
-              <ng-template #current>
-                <ng-component
-                  *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-              </ng-template>
-              <ng-template #breadcrumbLabel>
-                <ng-container *ngIf="breadcrumb.translationKey; else label">
-                  <span>{{ breadcrumb.translationKey | transloco }}</span>
+      <div class="content-wrapper">
+        <ng-container *ngIf="isLoggedIn$ | async">
+          <div class="banner" *ngIf="(hasError$ | async) === false">
+            <h1 class="page-header">
+              <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
+                <ng-container *ngIf="breadcrumb.path; else current">
+                  <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
+                    ><ng-component
+                      *ngTemplateOutlet="breadcrumbLabel"></ng-component>
+                  </a>
                 </ng-container>
-                <ng-template #label>
-                  <span>{{ breadcrumb.label }}</span>
+
+                <ng-template #current>
+                  <ng-component
+                    *ngTemplateOutlet="breadcrumbLabel"></ng-component>
                 </ng-template>
-              </ng-template>
-              <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
-            </ng-container>
-          </h1>
+                <ng-template #breadcrumbLabel>
+                  <ng-container *ngIf="breadcrumb.translationKey; else label">
+                    <span>{{ breadcrumb.translationKey | transloco }}</span>
+                  </ng-container>
+                  <ng-template #label>
+                    <span>{{ breadcrumb.label }}</span>
+                  </ng-template>
+                </ng-template>
+                <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
+              </ng-container>
+            </h1>
+          </div>
+        </ng-container>
+        <div class="main" [class.no-error]="(hasError$ | async) === false">
+          <ng-content></ng-content>
         </div>
-      </ng-container>
-      <div class="main" [class.no-error]="(hasError$ | async) === false">
-        <ng-content></ng-content>
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
@@ -142,15 +152,25 @@ <h1 class="page-header">
         class="nav-item"
         [class.active]="isActive(item)"
         (click)="handleNavClick(item)">
-        {{ navLabel(item.path) | transloco }}
+        <span class="nav-item">
+          <ng-container *ngIf="item?.icon">
+            <img [src]="item.icon" [alt]="item.path" />
+          </ng-container>
+          {{ navLabel(item.path) | transloco }}
+        </span>
       </button>
     </div>
     <ng-template #subRoutes>
       <mat-expansion-panel
+        class="expansion-panel"
         [class.mat-elevation-z0]="true"
         [expanded]="isActive(item)">
         <mat-expansion-panel-header class="parent-route">
-          {{ navLabel(item.path) | transloco }}
+          <span class="nav-item">
+            <ng-container *ngIf="item?.icon">
+              <img [src]="item.icon" [alt]="item.path" /> </ng-container
+            >{{ navLabel(item.path) | transloco }}
+          </span>
         </mat-expansion-panel-header>
         <mat-nav-list>
           <ng-container
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
index 4cff73a2..b648f954 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
@@ -4,7 +4,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 $red-palette: mat.define-palette(mat.$red-palette);
 
 .logo {
-  height: 30px;
+  height: 40px;
   cursor: pointer;
 }
 
@@ -16,7 +16,48 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .mat-toolbar {
-  min-height: 64px;
+  background-color: #f6f2fa;
+  padding: 16px;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+
+  .button-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    img {
+      margin-bottom: -4px;
+    }
+  }
+
+  .search-bar {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    border: 1px solid #ebe7ef;
+    border-radius: 50px;
+    background-color: #ebe7ef;
+    overflow: hidden;
+    width: 300px;
+    height: 50px;
+    font-size: 24px;
+  }
+  .search-input {
+    border: none;
+    background-color: #ebe7ef;
+    color: #47464f;
+    font-size: 20px;
+    &:focus {
+      outline: none;
+    }
+  }
+  .search-icon {
+    color: #47464f;
+    padding-left: 14px;
+  }
 }
 
 .search-btn {
@@ -42,9 +83,10 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .sidenav-container {
+  background-color: #f6f2fa;
   flex: 1 1 auto;
   .sidenav {
-    background-color: mat.get-color-from-palette($df-purple-palette, 900);
+    background-color: #0f0761;
     min-width: 40%;
     border: none;
     transition: min-width 0.3s ease-out;
@@ -84,7 +126,7 @@ $red-palette: mat.define-palette(mat.$red-palette);
     }
     .logged-in & {
       min-width: 20%;
-      background-color: white;
+      background-color: #f6f2fa;
     }
     .logged-in.small & {
       min-width: 40%;
@@ -94,21 +136,43 @@ $red-palette: mat.define-palette(mat.$red-palette);
       font-weight: 400;
       height: 48px;
       padding: 0 16px;
+      gap: 4px;
+      background: #f6f2fa;
     }
     ::ng-deep {
       .mat-expansion-panel-body {
         padding: 0 0 0 16px !important;
+        background: #f6f2fa;
       }
     }
     .nav-item {
+      // background-color: #f6f2fa;
       height: 48px;
       width: 100%;
       font-size: 1.6rem;
       font-weight: 400;
       border-radius: 0;
       justify-content: left;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      ::ng-deep .mat-mdc-button-touch-target {
+        background-color: #f6f2fa;
+      }
       &.active {
-        background-color: mat.get-color-from-palette($df-purple-palette, 200);
+        ::ng-deep .mat-mdc-button-touch-target {
+          background-color: #e3dfff;
+          border-top-right-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+        background-color: #e3dfff !important;
+        border-top-right-radius: 50px;
+        border-bottom-right-radius: 50px;
+        border-top-left-radius: 0;
+        width: 95%;
+      }
+      .expansion-panel {
+        background-color: #f6f2fa;
       }
     }
   }
@@ -116,29 +180,36 @@ $red-palette: mat.define-palette(mat.$red-palette);
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 8px 20px 24px;
+    background: #f6f2fa;
+    .content-wrapper {
+      height: 100%;
+      padding: 2px;
+      border: 1px solid #f6f2fa;
+      background-color: #f6f2fa;
+      border-radius: 6px !important;
+    }
     .banner {
       flex-shrink: 0;
       width: 100%;
-      padding-bottom: 60px;
-      background-color: mat.get-color-from-palette($df-purple-palette, 900);
+      padding-bottom: 40px;
+      background-color: #fff;
       .page-header {
-        color: white;
         padding: 32px 16px 0 16px;
       }
     }
     .main {
-      // height: 100%;
       flex-grow: 1;
       &.no-error {
         .logged-in & {
-          margin: -60px 16px 0 16px;
-          padding: 16px 24px;
+          margin-top: -60px;
+          padding: 16px 20px;
           background-color: white;
         }
         .logged-in.small & {
           margin: 0;
           margin-top: -60px;
-          padding: 16px 16px 0 16px;
+          padding: 16px 20px;
         }
       }
     }
@@ -160,6 +231,9 @@ $red-palette: mat.define-palette(mat.$red-palette);
   .mat-expansion-panel-body {
     overflow-x: auto;
   }
+  .mat-expansion-panel {
+    background: #f6f2fa;
+  }
 }
 
 .license-expired {
@@ -175,5 +249,94 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .breadcrumb-link {
-  color: white;
+  color: inherit;
+  text-decoration: none;
+}
+
+.dark-theme {
+  .tool-bar,
+  .sidenav-container,
+  .sidenav,
+  .nav-item,
+  .expansion-panel {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
+
+  .parent-route {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
+
+  .nav-item {
+    ::ng-deep .mat-mdc-button-touch-target {
+      background-color: mat.get-color-from-palette(
+        $df-purple-palette,
+        1003
+      ) !important;
+    }
+  }
+  &.active {
+    ::ng-deep .mat-mdc-button-touch-target {
+      background-color: #e3dfff;
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px;
+    }
+  }
+
+  .nav-item {
+    &.active {
+      ::ng-deep .mat-mdc-button-touch-target {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          600
+        ) !important;
+      }
+      ::ng-deep .mdc-button__label > span {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          600
+        ) !important;
+      }
+    }
+
+    img {
+      filter: invert(1) !important;
+    }
+  }
+  .banner,
+  .main {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    color: white;
+    .page-header {
+      color: mat.get-color-from-palette($df-purple-palette, 10) !important;
+    }
+  }
+  .sidenav-content {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+    color: white;
+    .page-header {
+      color: mat.get-color-from-palette($df-purple-palette, 10) !important;
+    }
+  }
+
+  .content-wrapper {
+    padding: 2px;
+    border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important;
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border-radius: 6px !important;
+  }
 }
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.ts b/src/app/shared/components/df-side-nav/df-side-nav.component.ts
index 6535fed8..61f7d108 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.ts
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.ts
@@ -10,12 +10,16 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DfAuthService } from 'src/app/adf-user-management/services/df-auth.service';
 import { DfBreakpointService } from 'src/app/shared/services/df-breakpoint.service';
 import { DfUserDataService } from 'src/app/shared/services/df-user-data.service';
+import { DfThemeService } from '../../services/df-theme.service';
+
 import {
   faAngleDown,
   faBars,
   faLanguage,
   faMagnifyingGlass,
   faUser,
+  faRefresh,
+  faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 import { routes } from 'src/app/routes';
 import {
@@ -28,11 +32,16 @@ import { TranslocoPipe, TranslocoService } from '@ngneat/transloco';
 import { AsyncPipe, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { DfErrorService } from 'src/app/shared/services/df-error.service';
 import { DfLicenseCheckService } from '../../services/df-license-check.service';
-import { of, switchMap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, of, switchMap } from 'rxjs';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { DfSearchDialogComponent } from '../df-search-dialog/df-search-dialog.component';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { CommonModule } from '@angular/common';
+import { DfSearchService } from '../../services/df-search.service';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DfThemeToggleComponent } from '../df-theme-toggle/df-theme-toggle.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-side-nav',
@@ -55,6 +64,10 @@ import { CommonModule } from '@angular/common';
     NgTemplateOutlet,
     MatDialogModule,
     CommonModule,
+    MatFormFieldModule,
+    DfThemeToggleComponent,
+    ReactiveFormsModule,
+    MatInputModule,
   ],
 })
 export class DfSideNavComponent implements OnInit {
@@ -69,7 +82,11 @@ export class DfSideNavComponent implements OnInit {
   faMagnifyingGlass = faMagnifyingGlass;
   faUser = faUser;
   faLanguage = faLanguage;
-
+  search = new FormControl();
+  results$ = this.searchService.results$;
+  smallScreen$ = this.breakpointService.isSmallScreen;
+  faPlus = faPlus;
+  faRefresh = faRefresh;
   constructor(
     private breakpointService: DfBreakpointService,
     private userDataService: DfUserDataService,
@@ -78,7 +95,9 @@ export class DfSideNavComponent implements OnInit {
     private errorService: DfErrorService,
     private licenseCheckService: DfLicenseCheckService,
     private dialog: MatDialog,
-    private transloco: TranslocoService
+    private transloco: TranslocoService,
+    private themeService: DfThemeService,
+    private searchService: DfSearchService
   ) {}
 
   ngOnInit(): void {
@@ -118,8 +137,19 @@ export class DfSideNavComponent implements OnInit {
           this.nav = transformRoutes(routes);
         }
       });
+    this.search.valueChanges
+      .pipe(
+        debounceTime(1000),
+        distinctUntilChanged(),
+        switchMap(value => this.searchService.search(value))
+      )
+      .subscribe(() => {
+        this.dialog.open(DfSearchDialogComponent, {
+          position: { top: '60px' },
+        });
+      });
   }
-
+  isDarkMode = this.themeService.darkMode$;
   logout() {
     this.authService.logout();
   }
@@ -151,6 +181,12 @@ export class DfSideNavComponent implements OnInit {
     localStorage.setItem('language', language);
   }
 
+  onSubmit() {
+    this.searchService.search(this.search.value).subscribe(() => {
+      this.dialog.open(DfSearchDialogComponent, { position: { top: '60px' } });
+    });
+  }
+
   get activeLanguage() {
     return this.transloco.getActiveLang();
   }
diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.html b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.html
new file mode 100644
index 00000000..fa8385ca
--- /dev/null
+++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.html
@@ -0,0 +1,4 @@
+<mat-slide-toggle
+  color="primary"
+  [checked]="isDarkMode$ | async"
+  (change)="toggle()"></mat-slide-toggle>
diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts
new file mode 100644
index 00000000..40249dcd
--- /dev/null
+++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts
@@ -0,0 +1,22 @@
+import { Component, inject } from '@angular/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { DfThemeService } from '../../services/df-theme.service';
+import { BehaviorSubject } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+@Component({
+  selector: 'df-theme-toggle',
+  templateUrl: './df-theme-toggle.component.html',
+  standalone: true,
+  imports: [MatSlideToggleModule, AsyncPipe],
+})
+export class DfThemeToggleComponent {
+  isDarkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+  themeService = inject(DfThemeService);
+
+  toggle() {
+    this.isDarkMode$.subscribe(isDarkMode => {
+      this.themeService.setThemeMode(!isDarkMode);
+    });
+    this.isDarkMode$.next(!this.isDarkMode$.value);
+  }
+}
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 665541b5..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({
@@ -64,7 +65,7 @@ export abstract class DfUserDetailsBaseComponent<T> implements OnInit {
   ) {
     this.userForm = this.fb.group({
       profileDetailsGroup: this.fb.group({
-        username: [''],
+        username: ['', Validators.minLength(6)],
         email: ['', Validators.email],
         firstName: [''],
         lastName: [''],
@@ -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/app/shared/services/df-base-crud.service.ts b/src/app/shared/services/df-base-crud.service.ts
index 4dfe2f62..7bd2c4de 100644
--- a/src/app/shared/services/df-base-crud.service.ts
+++ b/src/app/shared/services/df-base-crud.service.ts
@@ -183,6 +183,9 @@ export class DfBaseCrudService {
     if (options.includeCount !== undefined) {
       params.include_count = options.includeCount;
     }
+    if (options.refresh) {
+      params.refresh = options.refresh;
+    }
 
     if (options.additionalParams) {
       options.additionalParams.forEach(param => {
diff --git a/src/app/shared/services/df-theme.service.ts b/src/app/shared/services/df-theme.service.ts
new file mode 100644
index 00000000..eb288357
--- /dev/null
+++ b/src/app/shared/services/df-theme.service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DfThemeService {
+  darkMode$ = new BehaviorSubject<boolean>(false);
+
+  constructor() {
+    this.loadInitialTheme();
+  }
+
+  setThemeMode(isDarkMode: boolean): void {
+    this.darkMode$.next(isDarkMode);
+    localStorage.setItem('isDarkMode', JSON.stringify(isDarkMode));
+  }
+
+  loadInitialTheme(): void {
+    const storedTheme = localStorage.getItem('isDarkMode');
+    if (storedTheme) {
+      this.darkMode$.next(JSON.parse(storedTheme));
+    }
+  }
+}
diff --git a/src/app/shared/types/generic-http.ts b/src/app/shared/types/generic-http.ts
index 917eea33..d8457131 100644
--- a/src/app/shared/types/generic-http.ts
+++ b/src/app/shared/types/generic-http.ts
@@ -41,6 +41,7 @@ export interface RequestOptions {
   additionalParams: KeyValuePair[];
   additionalHeaders: KeyValuePair[];
   includeCacheControl: boolean;
+  refresh: boolean;
 }
 
 export type GenericCreateResponse = GenericListResponse<{ id: number }>;
diff --git a/src/app/shared/types/nav.ts b/src/app/shared/types/nav.ts
index 6599c37c..c3a125c0 100644
--- a/src/app/shared/types/nav.ts
+++ b/src/app/shared/types/nav.ts
@@ -3,6 +3,7 @@ import { ROUTES } from './routes';
 export interface Nav {
   path: string;
   route: ROUTES;
+  icon?: string;
   subRoutes?: Nav[];
   serviceGroups?: Array<string>;
 }
diff --git a/src/app/shared/types/service.ts b/src/app/shared/types/service.ts
index 55c5c452..868efa62 100644
--- a/src/app/shared/types/service.ts
+++ b/src/app/shared/types/service.ts
@@ -79,6 +79,7 @@ export interface Service {
   lastModifiedById: number | null;
   config: any;
   serviceDocByServiceId: number | null;
+  refresh: boolean;
 }
 
 export interface ServiceRow {
diff --git a/src/app/shared/utilities/route.ts b/src/app/shared/utilities/route.ts
index bf15fbdb..489d2f19 100644
--- a/src/app/shared/utilities/route.ts
+++ b/src/app/shared/utilities/route.ts
@@ -13,6 +13,14 @@ const filteredFromNav = [
   ROUTES.LICENSE_EXPIRED,
 ];
 
+const navIcons = [
+  'home',
+  'admin-settings',
+  'api-connections',
+  'api-security',
+  'system-settings',
+];
+
 export function transformRoutes(routes: Routes, root = ''): Array<Nav> {
   return routes
     .filter(
@@ -31,15 +39,25 @@ export function transformRoutes(routes: Routes, root = ''): Array<Nav> {
           path: `${root}/${route.path}`,
           subRoutes: subRoutes.length ? subRoutes : undefined,
           route: route.path as ROUTES,
+          icon: findIconForRoute(route as string),
         };
       }
       return {
         path: `${root}/${route.path}`,
         route: route.path as ROUTES,
+        icon: findIconForRoute(route as string),
       };
     });
 }
 
+const findIconForRoute = (routeName: any) => {
+  if (navIcons.includes(routeName.path)) {
+    return `assets/img/nav/${routeName?.path}.svg`;
+  } else {
+    return '';
+  }
+};
+
 export function accessibleRoutes(
   navs: Array<Nav>,
   allowedTabs: Array<string>
diff --git a/src/assets/i18n/userManagement/en.json b/src/assets/i18n/userManagement/en.json
index 04ee5e67..9beaf463 100644
--- a/src/assets/i18n/userManagement/en.json
+++ b/src/assets/i18n/userManagement/en.json
@@ -22,7 +22,8 @@
       "altLabel": "Enter Username",
       "optional": "(Optional, defaults to email address)",
       "errors": {
-        "required": "Username is required"
+        "required": "Username is required",
+        "minLength": "Username must be at least 6 characters long"
       }
     },
     "email": {
diff --git a/src/assets/img/nav/admin-settings.svg b/src/assets/img/nav/admin-settings.svg
new file mode 100644
index 00000000..f2cc3c89
--- /dev/null
+++ b/src/assets/img/nav/admin-settings.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_56907_1156" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_56907_1156)">
+<path d="M17 16.9999C17.4166 16.9999 17.7708 16.8541 18.0625 16.5624C18.3541 16.2707 18.5 15.9166 18.5 15.4999C18.5 15.0832 18.3541 14.7291 18.0625 14.4374C17.7708 14.1457 17.4166 13.9999 17 13.9999C16.5833 13.9999 16.2291 14.1457 15.9375 14.4374C15.6458 14.7291 15.5 15.0832 15.5 15.4999C15.5 15.9166 15.6458 16.2707 15.9375 16.5624C16.2291 16.8541 16.5833 16.9999 17 16.9999ZM17 19.9999C17.5231 19.9999 17.9997 19.8807 18.4298 19.6422C18.8599 19.4038 19.2115 19.0845 19.4846 18.6845C19.1115 18.4615 18.7166 18.2916 18.3 18.1749C17.8833 18.0582 17.45 17.9999 17 17.9999C16.55 17.9999 16.1166 18.0582 15.7 18.1749C15.2833 18.2916 14.8884 18.4615 14.5154 18.6845C14.7884 19.0845 15.14 19.4038 15.5702 19.6422C16.0003 19.8807 16.4769 19.9999 17 19.9999ZM12 21.4806C9.83716 20.8909 8.04646 19.6178 6.62787 17.6614C5.20929 15.705 4.5 13.5178 4.5 11.0999V6.59609C4.5 6.21789 4.60962 5.87655 4.82885 5.57206C5.04808 5.26756 5.33013 5.04673 5.675 4.90956L11.3673 2.78456C11.5814 2.70765 11.7923 2.66919 12 2.66919C12.2077 2.66919 12.4186 2.70765 12.6327 2.78456L18.325 4.90956C18.6698 5.04673 18.9519 5.26756 19.1711 5.57206C19.3903 5.87655 19.5 6.21789 19.5 6.59609V11.0115C19.2666 10.9166 19.0218 10.831 18.7654 10.7548C18.5089 10.6785 18.2538 10.6185 18 10.5749V6.60187C18 6.53775 17.9823 6.48005 17.9471 6.42876C17.9118 6.37748 17.8621 6.33902 17.798 6.31337L12.1058 4.18839C12.0737 4.17556 12.0384 4.16914 12 4.16914C11.9615 4.16914 11.9263 4.17556 11.8942 4.18839L6.20193 6.31337C6.13781 6.33902 6.08812 6.37748 6.05287 6.42876C6.01761 6.48005 5.99997 6.53775 5.99997 6.60187V11.0999C5.99997 11.9858 6.12497 12.8509 6.37497 13.6951C6.62497 14.5394 6.96953 15.3285 7.40865 16.0624C7.84775 16.7964 8.37243 17.4554 8.9827 18.0394C9.59297 18.6233 10.2552 19.0897 10.9693 19.4384L10.9981 19.4288C11.1302 19.7954 11.3013 20.1467 11.5116 20.4826C11.7218 20.8185 11.9609 21.1236 12.2288 21.3979C12.1865 21.4108 12.1484 21.4246 12.1144 21.4393C12.0804 21.454 12.0423 21.4678 12 21.4806ZM17 21.4999C15.7513 21.4999 14.6891 21.0621 13.8135 20.1864C12.9378 19.3108 12.5 18.2486 12.5 16.9999C12.5 15.7512 12.9378 14.689 13.8135 13.8134C14.6891 12.9378 15.7513 12.4999 17 12.4999C18.2487 12.4999 19.3109 12.9378 20.1865 13.8134C21.0621 14.689 21.5 15.7512 21.5 16.9999C21.5 18.2486 21.0621 19.3108 20.1865 20.1864C19.3109 21.0621 18.2487 21.4999 17 21.4999Z" fill="#47464F"/>
+</g>
+</svg>
diff --git a/src/assets/img/nav/api-connections.svg b/src/assets/img/nav/api-connections.svg
new file mode 100644
index 00000000..f48716dd
--- /dev/null
+++ b/src/assets/img/nav/api-connections.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_56907_1126" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_56907_1126)">
+<path d="M15.25 19.2308V17.75H13.0577C12.559 17.75 12.133 17.5734 11.7798 17.2202C11.4266 16.867 11.25 16.441 11.25 15.9423V7.74995H8.74995V9.23075C8.74995 9.65255 8.6022 10.0112 8.3067 10.3067C8.0112 10.6022 7.65255 10.75 7.23075 10.75H3.7692C3.3474 10.75 2.98875 10.6022 2.69325 10.3067C2.39775 10.0112 2.25 9.65255 2.25 9.23075V4.7692C2.25 4.3474 2.39775 3.98875 2.69325 3.69325C2.98875 3.39775 3.3474 3.25 3.7692 3.25H7.23075C7.65255 3.25 8.0112 3.39775 8.3067 3.69325C8.6022 3.98875 8.74995 4.3474 8.74995 4.7692V6.25H15.25V4.7692C15.25 4.3474 15.3978 3.98875 15.6933 3.69325C15.9888 3.39775 16.3474 3.25 16.7692 3.25H20.2308C20.6526 3.25 21.0112 3.39775 21.3067 3.69325C21.6022 3.98875 21.75 4.3474 21.75 4.7692V9.23075C21.75 9.65255 21.6022 10.0112 21.3067 10.3067C21.0112 10.6022 20.6526 10.75 20.2308 10.75H16.7692C16.3474 10.75 15.9888 10.6022 15.6933 10.3067C15.3978 10.0112 15.25 9.65255 15.25 9.23075V7.74995H12.75V15.9423C12.75 16.032 12.7788 16.1058 12.8365 16.1635C12.8942 16.2212 12.9679 16.25 13.0577 16.25H15.25V14.7692C15.25 14.3474 15.3978 13.9888 15.6933 13.6933C15.9888 13.3978 16.3474 13.25 16.7692 13.25H20.2308C20.6526 13.25 21.0112 13.3978 21.3067 13.6933C21.6022 13.9888 21.75 14.3474 21.75 14.7692V19.2308C21.75 19.6526 21.6022 20.0112 21.3067 20.3067C21.0112 20.6022 20.6526 20.75 20.2308 20.75H16.7692C16.3474 20.75 15.9888 20.6022 15.6933 20.3067C15.3978 20.0112 15.25 19.6526 15.25 19.2308ZM16.75 9.25H20.25V4.74995H16.75V9.25ZM16.75 19.25H20.25V14.75H16.75V19.25ZM3.74995 9.25H7.25V4.74995H3.74995V9.25Z" fill="#47464F"/>
+</g>
+</svg>
diff --git a/src/assets/img/nav/api-security.svg b/src/assets/img/nav/api-security.svg
new file mode 100644
index 00000000..fe1befb9
--- /dev/null
+++ b/src/assets/img/nav/api-security.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_56907_1136" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_56907_1136)">
+<path d="M10.0192 15.8271H13.9808C14.2368 15.8271 14.4515 15.7404 14.6247 15.5672C14.798 15.394 14.8846 15.1793 14.8846 14.9232V11.9617C14.8846 11.7056 14.798 11.4909 14.6247 11.3177C14.4515 11.1445 14.2368 11.0579 13.9808 11.0579H13.8942V10.0579C13.8942 9.53349 13.7112 9.0883 13.3451 8.72228C12.9791 8.35627 12.5339 8.17326 12.0096 8.17326C11.4852 8.17326 11.04 8.35627 10.674 8.72228C10.308 9.0883 10.125 9.53349 10.125 10.0579V11.0579H10.0192C9.76312 11.0579 9.54846 11.1445 9.37523 11.3177C9.20199 11.4909 9.11538 11.7056 9.11538 11.9617V14.9232C9.11538 15.1793 9.20199 15.394 9.37523 15.5672C9.54846 15.7404 9.76312 15.8271 10.0192 15.8271ZM11.0096 11.0579V10.0579C11.0096 9.77453 11.1054 9.53702 11.2971 9.34536C11.4888 9.15369 11.7263 9.05786 12.0096 9.05786C12.2929 9.05786 12.5304 9.15369 12.7221 9.34536C12.9138 9.53702 13.0096 9.77453 13.0096 10.0579V11.0579H11.0096ZM12 21.3713C11.8961 21.3713 11.7942 21.3629 11.6942 21.3463C11.5942 21.3296 11.4973 21.3046 11.4036 21.2713C9.29479 20.5213 7.61698 19.1915 6.3702 17.2819C5.1234 15.3723 4.5 13.3117 4.5 11.1002V6.59633C4.5 6.21648 4.60922 5.87462 4.82765 5.57073C5.04608 5.26685 5.32853 5.04654 5.675 4.90981L11.3673 2.78481C11.5814 2.70789 11.7923 2.66943 12 2.66943C12.2077 2.66943 12.4186 2.70789 12.6327 2.78481L18.325 4.90981C18.6714 5.04654 18.9539 5.26685 19.1723 5.57073C19.3907 5.87462 19.5 6.21648 19.5 6.59633V11.1002C19.5 13.3117 18.8765 15.3723 17.6297 17.2819C16.383 19.1915 14.7052 20.5213 12.5963 21.2713C12.5026 21.3046 12.4057 21.3296 12.3057 21.3463C12.2057 21.3629 12.1038 21.3713 12 21.3713ZM12 19.9002C13.7333 19.3502 15.1666 18.2502 16.3 16.6002C17.4333 14.9502 18 13.1168 18 11.1002V6.58671C18 6.52261 17.9823 6.46492 17.9471 6.41363C17.9118 6.36233 17.8621 6.32387 17.798 6.29823L12.1057 4.17323C12.0737 4.16042 12.0384 4.15401 12 4.15401C11.9615 4.15401 11.9263 4.16042 11.8942 4.17323L6.20192 6.29823C6.13781 6.32387 6.08812 6.36233 6.05287 6.41363C6.01761 6.46492 5.99997 6.52261 5.99997 6.58671V11.1002C5.99997 13.1168 6.56664 14.9502 7.69997 16.6002C8.83331 18.2502 10.2666 19.3502 12 19.9002Z" fill="#47464F"/>
+</g>
+</svg>
diff --git a/src/assets/img/nav/home.svg b/src/assets/img/nav/home.svg
new file mode 100644
index 00000000..266f0db7
--- /dev/null
+++ b/src/assets/img/nav/home.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_56907_1119" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_56907_1119)">
+<path d="M6.05 19.0001H8.77117V13.9616C8.77117 13.6222 8.89112 13.3325 9.13102 13.0926C9.37092 12.8527 9.66059 12.7328 10 12.7328H14C14.3394 12.7328 14.6291 12.8527 14.869 13.0926C15.1089 13.3325 15.2288 13.6222 15.2288 13.9616V19.0001H17.95V10.2039C17.95 10.1527 17.9388 10.1062 17.9163 10.0645C17.8939 10.0228 17.8635 9.98599 17.825 9.95394L12.1827 5.72509C12.1314 5.68022 12.0705 5.65779 12 5.65779C11.9295 5.65779 11.8686 5.68022 11.8173 5.72509L6.175 9.95394C6.13655 9.98599 6.1061 10.0228 6.08365 10.0645C6.06122 10.1062 6.05 10.1527 6.05 10.2039V19.0001ZM3.90002 19.0001V10.2039C3.90002 9.81382 3.9884 9.44424 4.16515 9.09519C4.34188 8.74612 4.5862 8.45866 4.8981 8.23281L10.5404 3.99436C10.9896 3.67 11.4756 3.50781 11.9984 3.50781C12.5213 3.50781 13.0083 3.67 13.4596 3.99436L19.1019 8.23281C19.4138 8.45866 19.6581 8.74612 19.8348 9.09519C20.0116 9.44424 20.1 9.81382 20.1 10.2039V19.0001C20.1 19.6091 19.8939 20.1196 19.4817 20.5318C19.0695 20.944 18.559 21.1501 17.95 21.1501H14.3077C13.9683 21.1501 13.6786 21.0301 13.4387 20.7902C13.1988 20.5503 13.0788 20.2606 13.0788 19.9212V14.8827H10.9211V19.9212C10.9211 20.2606 10.8012 20.5503 10.5613 20.7902C10.3214 21.0301 10.0317 21.1501 9.6923 21.1501H6.05C5.44103 21.1501 4.93047 20.944 4.5183 20.5318C4.10612 20.1196 3.90002 19.6091 3.90002 19.0001Z" fill="#47464F"/>
+</g>
+</svg>
diff --git a/src/assets/img/nav/system-settings.svg b/src/assets/img/nav/system-settings.svg
new file mode 100644
index 00000000..dbc4cf46
--- /dev/null
+++ b/src/assets/img/nav/system-settings.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_56907_1146" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_56907_1146)">
+<path d="M10.8923 21.5C10.5513 21.5 10.2567 21.3868 10.0087 21.1605C9.76059 20.9342 9.60963 20.6557 9.55578 20.325L9.31156 18.4538C9.04361 18.3641 8.76893 18.2384 8.48751 18.0769C8.20609 17.9153 7.95448 17.7422 7.73269 17.5576L5.99998 18.2942C5.68588 18.4326 5.37018 18.4461 5.05288 18.3346C4.73558 18.223 4.48912 18.0205 4.31348 17.7269L3.18656 15.773C3.01093 15.4794 2.96028 15.1689 3.03463 14.8413C3.109 14.5138 3.27951 14.2436 3.54616 14.0308L5.04426 12.9058C5.02118 12.757 5.00483 12.6077 4.99521 12.4577C4.98559 12.3077 4.98078 12.1583 4.98078 12.0096C4.98078 11.8673 4.98559 11.7227 4.99521 11.5759C5.00483 11.4291 5.02118 11.2686 5.04426 11.0942L3.54616 9.96918C3.27951 9.75636 3.1106 9.48458 3.03943 9.15383C2.96828 8.82306 3.02053 8.51088 3.19618 8.2173L4.31348 6.2923C4.48912 6.00513 4.73558 5.80418 5.05288 5.68943C5.37018 5.57469 5.68588 5.58655 5.99998 5.725L7.72306 6.45195C7.96409 6.26092 8.22147 6.08623 8.49519 5.9279C8.76892 5.76955 9.03783 5.6423 9.30193 5.54615L9.55578 3.67498C9.60963 3.34423 9.76059 3.06571 10.0087 2.83943C10.2567 2.61314 10.5513 2.5 10.8923 2.5H13.1077C13.4487 2.5 13.7432 2.61314 13.9913 2.83943C14.2394 3.06571 14.3903 3.34423 14.4442 3.67498L14.6884 5.55578C14.9884 5.66474 15.2599 5.79198 15.5029 5.9375C15.7458 6.08302 15.991 6.2545 16.2384 6.45195L18.0096 5.725C18.3237 5.58655 18.6394 5.57469 18.9567 5.68943C19.274 5.80418 19.5205 6.00513 19.6961 6.2923L20.8134 8.22693C20.989 8.52051 21.0397 8.83108 20.9653 9.15863C20.891 9.48618 20.7205 9.75636 20.4538 9.96918L18.9173 11.123C18.9532 11.2846 18.9727 11.4355 18.9759 11.5759C18.9791 11.7163 18.9807 11.8577 18.9807 12C18.9807 12.1359 18.9775 12.274 18.9711 12.4144C18.9647 12.5548 18.9416 12.7154 18.9019 12.8962L20.4096 14.0308C20.6762 14.2436 20.8483 14.5138 20.9259 14.8413C21.0035 15.1689 20.9544 15.4794 20.7788 15.773L19.6461 17.7173C19.4705 18.0108 19.2224 18.2134 18.9019 18.325C18.5814 18.4365 18.2641 18.423 17.95 18.2846L16.2384 17.548C15.991 17.7455 15.7384 17.9201 15.4807 18.0721C15.223 18.224 14.9589 18.348 14.6884 18.4442L14.4442 20.325C14.3903 20.6557 14.2394 20.9342 13.9913 21.1605C13.7432 21.3868 13.4487 21.5 13.1077 21.5H10.8923ZM11 20H12.9654L13.325 17.3211C13.8352 17.1878 14.3016 16.9984 14.724 16.7529C15.1464 16.5074 15.5538 16.1917 15.9461 15.8058L18.4308 16.85L19.4154 15.15L17.2461 13.5154C17.3295 13.2564 17.3862 13.0025 17.4163 12.7538C17.4465 12.5051 17.4615 12.2538 17.4615 12C17.4615 11.7397 17.4465 11.4884 17.4163 11.2461C17.3862 11.0038 17.3295 10.7564 17.2461 10.5038L19.4346 8.84998L18.45 7.14998L15.9365 8.2096C15.6019 7.8519 15.201 7.53588 14.7336 7.26153C14.2663 6.98716 13.7936 6.79293 13.3154 6.67883L13 3.99998H11.0154L10.6846 6.6692C10.1743 6.78972 9.70319 6.97433 9.27113 7.22305C8.83908 7.47177 8.42691 7.79228 8.03461 8.1846L5.54998 7.14998L4.56536 8.84998L6.72498 10.4596C6.64165 10.6968 6.58332 10.9436 6.54998 11.2C6.51665 11.4564 6.49998 11.7263 6.49998 12.0096C6.49998 12.2699 6.51665 12.525 6.54998 12.775C6.58332 13.025 6.63844 13.2718 6.71536 13.5154L4.56536 15.15L5.54998 16.85L8.02498 15.8C8.40447 16.1897 8.81023 16.509 9.24228 16.7577C9.67433 17.0064 10.1519 17.1974 10.675 17.3308L11 20ZM12.0115 15C12.8436 15 13.5516 14.708 14.1355 14.124C14.7195 13.54 15.0115 12.832 15.0115 12C15.0115 11.1679 14.7195 10.4599 14.1355 9.87595C13.5516 9.29198 12.8436 9 12.0115 9C11.1692 9 10.4587 9.29198 9.87981 9.87595C9.30098 10.4599 9.01156 11.1679 9.01156 12C9.01156 12.832 9.30098 13.54 9.87981 14.124C10.4587 14.708 11.1692 15 12.0115 15Z" fill="#47464F"/>
+</g>
+</svg>
diff --git a/src/dark-style.scss b/src/dark-style.scss
new file mode 100644
index 00000000..f361b0a5
--- /dev/null
+++ b/src/dark-style.scss
@@ -0,0 +1,259 @@
+/* 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;
+  }
+  .parent-route,
+  .mat-expansion-panel-body {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
+  .nav-item .active > .mdc-button__label > .mat-mdc-button-touch-target {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      700
+    ) !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 d13f49c6..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,
@@ -19,6 +19,10 @@ body {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
+a {
+  color: mat.get-color-from-palette($df-purple-palette, 600);
+}
+
 .flex-col {
   display: flex;
   flex-direction: column;
@@ -141,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;
+}
diff --git a/src/theme.scss b/src/theme.scss
index bfe34e2c..ca77c1c5 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -19,6 +19,7 @@ $df-typography-config: mat.define-typography-config(
 //   $subtitle-2: mat.define-typography-level(20px, 28px, 300),
 
 $df-purple-palette: (
+  10: #e5e1e9,
   50: #f1f0f6,
   100: #e2e1ed,
   200: #c6c4db,
@@ -29,6 +30,10 @@ $df-purple-palette: (
   700: #423c89,
   800: #29227a,
   900: #0f0761,
+  1001: #1c1b21,
+  1002: #0f0e13,
+  1003: #1c1b20,
+  1004: #2a292f,
   contrast: (
     50: #000000,
     100: #000000,