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-user-management/adf-user-management.scss b/src/app/adf-user-management/adf-user-management.scss
index 34159ead..a72e3dab 100644
--- a/src/app/adf-user-management/adf-user-management.scss
+++ b/src/app/adf-user-management/adf-user-management.scss
@@ -38,3 +38,12 @@
     }
   }
 }
+
+.user-management-card-container {
+  margin-top: 30%;
+
+  &.dark-theme {
+    background-color: #1e1e1e;
+    color: #fff;
+  }
+}
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.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/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
index 6318f803..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
@@ -183,6 +183,7 @@ $red-palette: mat.define-palette(mat.$red-palette);
     padding: 8px 20px 24px;
     background: #f6f2fa;
     .content-wrapper {
+      height: 100%;
       padding: 2px;
       border: 1px solid #f6f2fa;
       background-color: #f6f2fa;
@@ -248,7 +249,8 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .breadcrumb-link {
-  color: white;
+  color: inherit;
+  text-decoration: none;
 }
 
 .dark-theme {