diff --git a/src/app/components/side-bar/side-bar.component.html b/src/app/components/side-bar/side-bar.component.html
index 6e3baaf..150764a 100644
--- a/src/app/components/side-bar/side-bar.component.html
+++ b/src/app/components/side-bar/side-bar.component.html
@@ -1,4 +1,4 @@
-<nav class="wrapper  md-auto position-fixed ">
+<nav class="wrapper  md-auto position-fixed" [ngStyle]="{'background-color':backgroundColor}">
   <ul class="nav flex-column" id="sticky-sidebar">
     <li class="nav-item" ngbNavItem="maTeam" >
       <a routerLink="/compte" routerLinkActive="active-custom" class="nav-link">
diff --git a/src/app/components/side-bar/side-bar.component.scss b/src/app/components/side-bar/side-bar.component.scss
index b0cb2f5..6db9cb2 100644
--- a/src/app/components/side-bar/side-bar.component.scss
+++ b/src/app/components/side-bar/side-bar.component.scss
@@ -5,7 +5,7 @@
   width: auto;
   height: 100%;
   position: absolute;
-  background-color: #c3c3e7;
+  //background-color: #c3c3e7;
 }
 .nav{
   margin-top: 20px;
diff --git a/src/app/components/side-bar/side-bar.component.ts b/src/app/components/side-bar/side-bar.component.ts
index c158678..7fd706f 100644
--- a/src/app/components/side-bar/side-bar.component.ts
+++ b/src/app/components/side-bar/side-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-side-bar',
@@ -6,10 +6,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./side-bar.component.scss']
 })
 export class SideBarComponent implements OnInit {
+  @Input() backgroundColor!: string;
+  //@Input() backgroundColor = '#c3c3e7';
+
+  constructor() {}
 
-  constructor() { }
 
   ngOnInit(): void {
+    
   }
 
 }