diff --git a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
index c9b212ab..bc4ddf44 100644
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
@@ -41,7 +41,7 @@
     </a>
 
     <ng-template #itemContent>
-        <mat-icon class="nav-link-icon secondary-text" *ngIf="item.icon">{{item.icon}}</mat-icon>
+        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
         <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
diff --git a/src/@fuse/components/navigation/vertical/item/item.component.html b/src/@fuse/components/navigation/vertical/item/item.component.html
index 1cedfb65..a90e4f99 100644
--- a/src/@fuse/components/navigation/vertical/item/item.component.html
+++ b/src/@fuse/components/navigation/vertical/item/item.component.html
@@ -35,7 +35,7 @@
     </a>
 
     <ng-template #itemContent>
-        <mat-icon class="nav-link-icon secondary-text" *ngIf="item.icon">{{item.icon}}</mat-icon>
+        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
         <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
diff --git a/src/@fuse/scss/partials/_navigation.scss b/src/@fuse/scss/partials/_navigation.scss
index 468add93..df7b1be2 100644
--- a/src/@fuse/scss/partials/_navigation.scss
+++ b/src/@fuse/scss/partials/_navigation.scss
@@ -72,14 +72,9 @@
             }
 
             &.active {
-                //background-color: mat-color($accent);
 
-                .mat-ripple-element {
-                    //background-color: mat-color($accent, default-contrast, 0.1);
-                }
-
-                &, .nav-link-icon {
-                    //color: mat-color($accent, default-contrast);
+                .nav-link-icon {
+                    opacity: 1;
                 }
 
                 .nav-link-badge {
@@ -90,6 +85,7 @@
 
             .nav-link-icon {
                 margin-right: 16px;
+                opacity: 0.7;
             }
 
             .nav-link-icon,
diff --git a/src/app/main/apps/file-manager/sidebars/main/main.component.html b/src/app/main/apps/file-manager/sidebars/main/main.component.html
index a9cd68c4..4b1eccb2 100644
--- a/src/app/main/apps/file-manager/sidebars/main/main.component.html
+++ b/src/app/main/apps/file-manager/sidebars/main/main.component.html
@@ -2,7 +2,7 @@
 <div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
 
     <div class="logo" fxLayout="row" fxLayoutAlign="start center">
-        <mat-icon class="logo-icon secondary-text mr-16">folder</mat-icon>
+        <mat-icon class="logo-icon secondary-text s-36 mr-16">folder</mat-icon>
         <span class="logo-text h1">File Manager</span>
     </div>
 
@@ -16,35 +16,35 @@
 
         <div class="nav-item" aria-label="inbox">
             <a class="nav-link" matRipple>
-                <mat-icon class="nav-link-icon secondary-text">folder</mat-icon>
+                <mat-icon class="nav-link-icon">folder</mat-icon>
                 <span class="title">My Files</span>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
             <a class="nav-link" matRipple>
-                <mat-icon class="nav-link-icon secondary-text">star</mat-icon>
+                <mat-icon class="nav-link-icon">star</mat-icon>
                 <div class="title">Starred</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
             <a class="nav-link" matRipple>
-                <mat-icon class="nav-link-icon secondary-text">folder_shared</mat-icon>
+                <mat-icon class="nav-link-icon">folder_shared</mat-icon>
                 <div class="title">Sharred with me</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
             <a class="nav-link" matRipple>
-                <mat-icon class="nav-link-icon secondary-text">access_time</mat-icon>
+                <mat-icon class="nav-link-icon">access_time</mat-icon>
                 <div class="title">Recent</div>
             </a>
         </div>
 
         <div class="nav-item" aria-label="starred">
             <a class="nav-link" matRipple>
-                <mat-icon class="nav-link-icon secondary-text">not_interested</mat-icon>
+                <mat-icon class="nav-link-icon">not_interested</mat-icon>
                 <div class="title">Offline</div>
             </a>
         </div>
diff --git a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html
index 5cd40a1e..952081db 100644
--- a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html
+++ b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html
@@ -41,7 +41,7 @@
         <div class="nav-item" *ngFor="let folder of (folders$ | async)">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle"
                [routerLinkActive]="['active', 'mat-accent-bg']">
-                <mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
                 <span>{{folder.title}}</span>
             </a>
         </div>
diff --git a/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html b/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html
index ab6185c6..4b9022a7 100644
--- a/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html
+++ b/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html
@@ -42,7 +42,7 @@
         <div class="nav-item" *ngFor="let folder of folders">
             <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle"
                [routerLinkActive]="['active', 'mat-accent-bg']">
-                <mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
                 <span>{{folder.title}}</span>
             </a>
         </div>
diff --git a/src/app/main/apps/todo/sidebars/main/main-sidebar.component.html b/src/app/main/apps/todo/sidebars/main/main-sidebar.component.html
index a756b646..bbfab7ab 100644
--- a/src/app/main/apps/todo/sidebars/main/main-sidebar.component.html
+++ b/src/app/main/apps/todo/sidebars/main/main-sidebar.component.html
@@ -40,7 +40,7 @@
         <div class="nav-item">
             <a class="nav-link" matRipple [routerLink]="'/apps/todo/all'"
                [routerLinkActive]="['active', 'mat-accent-bg']">
-                <mat-icon class="nav-link-icon secondary-text">view_headline</mat-icon>
+                <mat-icon class="nav-link-icon">view_headline</mat-icon>
                 <span>All</span>
             </a>
         </div>
@@ -50,7 +50,7 @@
         <div class="nav-item" *ngFor="let filter of filters">
             <a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle"
                [routerLinkActive]="['active', 'mat-accent-bg']">
-                <mat-icon class="nav-link-icon secondary-text" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
+                <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
                 <span>{{filter.title}}</span>
             </a>
         </div>