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-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index af9ee1b1..603203ff 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
@@ -68,7 +68,7 @@ <h3>
                       class="card-icon"
                       [src]="getBackgroundImage(type.name)"
                       [alt]="type.label" />
-                    <h4 class="text-center" style="color: black !important">
+                    <h4>
                       {{ type.label }}
                     </h4>
                   </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 fe19d8af..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
@@ -84,11 +84,15 @@ label.radio-card {
 
   .card-content {
     width: 100%;
+    text-align: center;
     img {
       margin-bottom: 10px;
       width: 100%;
       height: 110px;
     }
+    h4 {
+      color: #000;
+    }
   }
 }
 
@@ -128,3 +132,22 @@ mat-icon {
 ::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 cd80c6c0..97f53ac2 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,
diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss
index 9700ccc1..34159ead 100644
--- a/src/app/adf-user-management/adf-user-management.scss
+++ b/src/app/adf-user-management/adf-user-management.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   height: 100%;
-  margin: 25% 0;
+
   .user-management-card {
     padding: 16px 16px;
     margin: 0 auto;
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-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/shared/components/df-dynamic-field/df-dynamic-field.component.html b/src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html
index ab3104b6..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
@@ -85,4 +85,3 @@
     </mat-autocomplete>
   </mat-form-field>
 </div>
-