diff --git a/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.html b/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.html
index 12172037..5aaabe69 100644
--- a/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+<mat-toolbar>
   <mat-toolbar-row mat-icon-button>
     <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
       <div>
diff --git a/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss b/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss
index a1190d46..97fa69ef 100644
--- a/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss
+++ b/packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss
@@ -106,13 +106,14 @@
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-  color: var(--app-nav-color);
 
   &:hover {
   }
 }
 
 .psdk-nav-oper-avatar {
+  border-radius: 100%;
+  background-color: var(--mat-sys-primary);
   margin: 0rem;
   padding: 0rem;
   min-width: 2.5rem;
@@ -128,6 +129,11 @@
   font-size: 1rem;
 }
 
+mat-toolbar {
+  margin-bottom: 5px;
+  background-color: var(--mat-sys-surface-variant);
+}
+
 mat-list {
   padding: 0;
 }