diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index 53a9ecb2ab..056e186661 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -62,11 +62,11 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
-              private variableService: CSSVariableService,
-              private authService: AuthService,
-              private modalService: NgbModal,
-              private authorizationService: AuthorizationDataService,
-              private scriptDataService: ScriptDataService,
+              protected variableService: CSSVariableService,
+              protected authService: AuthService,
+              protected modalService: NgbModal,
+              protected authorizationService: AuthorizationDataService,
+              protected scriptDataService: ScriptDataService,
   ) {
     super(menuService, injector);
   }
diff --git a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
new file mode 100644
index 0000000000..f2f35725e8
--- /dev/null
+++ b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminSidebarComponent } from './admin-sidebar.component';
+
+/**
+ * Themed wrapper for AdminSidebarComponent
+ */
+@Component({
+  selector: 'ds-themed-admin-sidebar',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
+  protected getComponentName(): string {
+    return 'AdminSidebarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-sidebar/admin-sidebar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-sidebar.component');
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 131e6c6b58..bd6bfc11c7 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -52,6 +52,7 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 
 import { UUIDService } from './core/shared/uuid.service';
 import { CookieService } from './core/services/cookie.service';
+import { ThemedAdminSidebarComponent } from './admin/admin-sidebar/themed-admin-sidebar.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -158,6 +159,7 @@ const DECLARATIONS = [
   HeaderNavbarWrapperComponent,
   ThemedHeaderNavbarWrapperComponent,
   AdminSidebarComponent,
+  ThemedAdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 898074352c..0fcc169681 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -1,5 +1,5 @@
 <div class="outer-wrapper" *ngIf="!shouldShowFullscreenLoader; else fullScreenLoader">
-  <ds-admin-sidebar></ds-admin-sidebar>
+  <ds-themed-admin-sidebar></ds-themed-admin-sidebar>
   <div class="inner-wrapper"  [@slideSidebarPadding]="{
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}