diff --git a/src/app/adf-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss
index a72e3dab..c8ecdfff 100644
--- a/src/app/adf-user-management/adf-user-management.scss
+++ b/src/app/adf-user-management/adf-user-management.scss
@@ -40,7 +40,7 @@
 }
 
 .user-management-card-container {
-  margin-top: 30%;
+  margin-top: 20vh;
 
   &.dark-theme {
     background-color: #1e1e1e;
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
index 8103aa5a..fa8385ca 100644
--- 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
@@ -1,4 +1,4 @@
 <mat-slide-toggle
   color="primary"
-  checked="true"
+  [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
index 23407c1e..40249dcd 100644
--- 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
@@ -2,15 +2,15 @@ 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],
+  imports: [MatSlideToggleModule, AsyncPipe],
 })
 export class DfThemeToggleComponent {
-  isDarkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  isDarkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
   themeService = inject(DfThemeService);
 
   toggle() {