diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index d515f62..35eb1dd 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,6 +2,5 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/sae-airwatch" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/old-sae-airwatch/src/app/ds-navbar/ds-navbar.stories.ts b/old-sae-airwatch/src/app/ds-navbar/ds-navbar.stories.ts
index d485cbc..4a816d3 100644
--- a/old-sae-airwatch/src/app/ds-navbar/ds-navbar.stories.ts
+++ b/old-sae-airwatch/src/app/ds-navbar/ds-navbar.stories.ts
@@ -4,6 +4,7 @@ import {DsNavbar} from './ds-navbar';
 import {CommonModule} from '@angular/common';
 import {Store, StoreModule} from '@ngrx/store';
 import {reducers} from '../reducers';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 
 const appReducer = reducers.app;
 
@@ -16,9 +17,20 @@ const meta: Meta<DsNavbar> = {
       imports: [
         CommonModule,
         StoreModule.forRoot({app: appReducer as any}),
+        RouterModule.forRoot([]),
       ],
       providers: [
-        Store
+        Store,
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get: () => null
+              }
+            }
+          }
+        }
       ]
     })
   ],
diff --git a/sae-csc/src/app/pages/main/main.html b/sae-csc/src/app/pages/main/main.html
index f906640..82d371a 100644
--- a/sae-csc/src/app/pages/main/main.html
+++ b/sae-csc/src/app/pages/main/main.html
@@ -11,7 +11,7 @@
     </h2>
     <!--  traduction de requête-->
     <div id="translation_request">
-
+      <sae-color-display></sae-color-display>
       <div class="helper">
         <span>
 
diff --git a/sae-csc/src/app/pages/main/main.ts b/sae-csc/src/app/pages/main/main.ts
index f44385e..5a7dcf6 100644
--- a/sae-csc/src/app/pages/main/main.ts
+++ b/sae-csc/src/app/pages/main/main.ts
@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
-import {TopNavigation} from '../../shared/navigation/top-navigation/top-navigation';
-import {TranslateTexts} from '../../../../../my-workspace/projects/sae-lib/translate-texts/translate-texts';
+import {Component} from '@angular/core';
+import {TranslateTexts} from 'sae-lib/inbox/translate-texts/translate-texts';
 import {FiltersGroup} from '../../../../../my-workspace/projects/sae-lib/filters/filters-group/filters-group';
 import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
+import {ColorDisplay} from 'sae-lib/colours/color-display/color-display';
 
 
 @Component({
@@ -10,7 +10,8 @@ import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom
   imports: [
     TranslateTexts,
     FiltersGroup,
-    BottomNavigation
+    BottomNavigation,
+    ColorDisplay
   ],
   templateUrl: './main.html',
   styleUrl: './main.scss'
diff --git a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
index 162ccb2..6ed8a87 100644
--- a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
+++ b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html
@@ -1,14 +1,14 @@
 <div class="top-navigation">
 
-  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <nav aria-label="main navigation" class="navbar" role="navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="https://cipherbliss.com">
 
-        <img src="safran_logo.svg" alt="logo">
+        <img alt="logo" src="safran_logo.svg">
       </a>
 
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
-         data-target="navbarBasicExample">
+      <a aria-expanded="false" aria-label="menu" class="navbar-burger" data-target="navbarBasicExample"
+         role="button">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -16,19 +16,19 @@
       </a>
     </div>
 
-    <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-menu" id="navbarBasicExample">
 
       <div class="navbar-start">
         <a class="navbar-item" routerLink="home" routerLinkActive="is-active">
-          <img src="csc_logo.svg" alt="logo">
+          <img alt="logo" src="csc_logo.svg">
           CSC Solution Matcher
         </a>
       </div>
       <div class="navbar-end">
 
-<!--        <a class="navbar-item">-->
-<!--          Home-->
-<!--        </a>-->
+        <!--        <a class="navbar-item">-->
+        <!--          Home-->
+        <!--        </a>-->
         <a class="navbar-item is-active">
           <i class="ri-admin-line"></i>
           Admin
@@ -43,7 +43,7 @@
           <!--  exit-->
           <i class="ri-door-line"></i>
         </a>
-        <a class="navbar-item">
+        <a class="navbar-item user-account-item">
           <!--  user -->
           <i class="ri-user-2-fill"></i>
           borhène
@@ -53,5 +53,5 @@
     </div>
   </nav>
 
-<!--  <app-alert-box></app-alert-box>-->
+  <!--  <app-alert-box></app-alert-box>-->
 </div>
diff --git a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.scss b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.scss
index 34b34c8..f27bf62 100644
--- a/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.scss
+++ b/sae-csc/src/app/shared/navigation/top-navigation/top-navigation.scss
@@ -1,9 +1,10 @@
 @use '../../../../styles/variables-barrel' as variables;
-.top-navigation{
+
+.top-navigation {
   background: variables.$bg-color-nav;
   color: white;
-  .is-active{
-  color: #7FB8E7;
 
+  .is-active, .user-account-item {
+    color: #7FB8E7;
   }
 }