diff --git a/src/app/app.component.html b/src/app/app.component.html
index 90c6b64..8f5491e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,37 @@
-<router-outlet></router-outlet>
\ No newline at end of file
+<router-outlet></router-outlet>
+<div class=" fixed-plugin">
+    <div class=" show-dropdown" ngbDropdown>
+      <a data-toggle="dropdown" ngbDropdownToggle>
+        <i class="fa fa-cog fa-2x"></i>
+      </a>
+      <ul ngbDropdownMenu>
+        <li class=" header-title">Sidebar Background</li>
+        <li class=" adjustments-line">
+          <a class=" switch-trigger background-color" href="javascript:void(0)">
+            <div class=" badge-colors text-center">
+              <span
+                class=" badge filter badge-danger"
+                [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
+              >
+              </span>
+              <span
+                class=" badge filter badge-primary"
+                [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
+              >
+              </span>
+              <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
+              <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
+              </span>
+            </div>
+            <div class=" clearfix"></div>
+          </a>
+        </li>
+        <li class=" adjustments-line text-center color-change">
+          <span class=" color-label"> LIGHT MODE </span>
+          <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+          <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+          <span class=" color-label"> DARK MODE </span>
+        </li>
+      </ul>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e9f6ffa..3c119c7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,4 +5,38 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {}
+export class AppComponent {
+  changeSidebarColor(color){
+    var sidebar = document.getElementsByClassName('sidebar')[0];
+    var mainPanel = document.getElementsByClassName('main-panel')[0];
+
+    this.sidebarColor = color;
+
+    if(sidebar != undefined){
+        sidebar.setAttribute('data',color);
+    }
+    if(mainPanel != undefined){
+        mainPanel.setAttribute('data',color);
+    }
+  }
+  changeDashboardColor(color){
+    var body = document.getElementsByTagName('body')[0];
+    if (body && color === 'white-content') {
+        body.classList.add(color);
+    }
+    else if(body.classList.contains('white-content')) {
+      body.classList.remove('white-content');
+    }
+  }
+  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+   updateColor = () => {
+   var navbar = document.getElementsByClassName('navbar')[0];
+     if (window.innerWidth < 993 && !this.isCollapsed) {
+       navbar.classList.add('bg-white');
+       navbar.classList.remove('navbar-transparent');
+     } else {
+       navbar.classList.remove('bg-white');
+       navbar.classList.add('navbar-transparent');
+     }
+   };
+}