diff --git a/src/app/xtream-tauri/navigation/navigation.component.html b/src/app/xtream-tauri/navigation/navigation.component.html
index d40a6bbef..14f208c7c 100644
--- a/src/app/xtream-tauri/navigation/navigation.component.html
+++ b/src/app/xtream-tauri/navigation/navigation.component.html
@@ -41,83 +41,78 @@
         </div>
     </div>
 </div>
-<mat-nav-list>
-    <!-- <a
-        mat-list-item
-        routerLink="/"
-        routerLinkActive="active"
-        [routerLinkActiveOptions]="{ exact: true }"
-    >
-        <mat-icon matListItemIcon>home</mat-icon>
-        <span matListItemTitle>Home</span>
-    </a> -->
 
-    <a
-        mat-list-item
-        (click)="xtreamStore.setSelectedContentType('live')"
-        routerLink="./live"
-        [class.active]="isContentTypeActive('live')"
-    >
-        <mat-icon matListItemIcon>live_tv</mat-icon>
-        <span matListItemTitle>Live TV</span>
-    </a>
+<div class="nav-section">
+    <div class="nav-group-label">Main</div>
+    <mat-nav-list>
+        <a
+            mat-list-item
+            (click)="xtreamStore.setSelectedContentType('vod')"
+            routerLink="./vod"
+            [class.active]="isContentTypeActive('vod')"
+        >
+            <mat-icon matListItemIcon>movie</mat-icon>
+            <span matListItemTitle>Movies</span>
+        </a>
+        <a
+            mat-list-item
+            (click)="xtreamStore.setSelectedContentType('live')"
+            routerLink="./live"
+            [class.active]="isContentTypeActive('live')"
+        >
+            <mat-icon matListItemIcon>live_tv</mat-icon>
+            <span matListItemTitle>Live TV</span>
+        </a>
+        <a
+            mat-list-item
+            routerLink="./series"
+            (click)="xtreamStore.setSelectedContentType('series')"
+            [class.active]="isContentTypeActive('series')"
+        >
+            <mat-icon matListItemIcon>tv</mat-icon>
+            <span matListItemTitle>TV Series</span>
+        </a>
+    </mat-nav-list>
+</div>
 
-    <a
-        mat-list-item
-        (click)="xtreamStore.setSelectedContentType('vod')"
-        routerLink="./vod"
-        [class.active]="isContentTypeActive('vod')"
-    >
-        <mat-icon matListItemIcon>movie</mat-icon>
-        <span matListItemTitle>Movies</span>
-    </a>
+<div class="nav-section">
+    <div class="nav-group-label">Library</div>
+    <mat-nav-list>
+        <a
+            mat-list-item
+            routerLink="./search"
+            routerLinkActive="active"
+            (click)="xtreamStore.setSelectedContentType(undefined)"
+        >
+            <mat-icon matListItemIcon>search</mat-icon>
+            <span matListItemTitle>Search</span>
+        </a>
+        <a
+            mat-list-item
+            routerLink="./recent"
+            routerLinkActive="active"
+            (click)="xtreamStore.setSelectedContentType(undefined)"
+        >
+            <mat-icon matListItemIcon>history</mat-icon>
+            <span matListItemTitle>Recent</span>
+        </a>
+        <a
+            mat-list-item
+            routerLink="./favorites"
+            routerLinkActive="active"
+            (click)="xtreamStore.setSelectedContentType(undefined)"
+        >
+            <mat-icon matListItemIcon>favorite</mat-icon>
+            <span matListItemTitle>Favorites</span>
+        </a>
+    </mat-nav-list>
+</div>
 
-    <a
-        mat-list-item
-        routerLink="./series"
-        (click)="xtreamStore.setSelectedContentType('series')"
-        [class.active]="isContentTypeActive('series')"
-    >
-        <mat-icon matListItemIcon>tv</mat-icon>
-        <span matListItemTitle>TV Series</span>
-    </a>
-
-    <mat-divider />
-
-    <a
-        mat-list-item
-        routerLink="./search"
-        routerLinkActive="active"
-        (click)="xtreamStore.setSelectedContentType(undefined)"
-    >
-        <mat-icon matListItemIcon>search</mat-icon>
-        <span matListItemTitle>Search</span>
-    </a>
-
-    <a
-        mat-list-item
-        routerLink="./recent"
-        routerLinkActive="active"
-        (click)="xtreamStore.setSelectedContentType(undefined)"
-    >
-        <mat-icon matListItemIcon>history</mat-icon>
-        <span matListItemTitle>Recent</span>
-    </a>
-
-    <a
-        mat-list-item
-        routerLink="./favorites"
-        routerLinkActive="active"
-        (click)="xtreamStore.setSelectedContentType(undefined)"
-    >
-        <mat-icon matListItemIcon>favorite</mat-icon>
-        <span matListItemTitle>Favorites</span>
-    </a>
-</mat-nav-list>
-
-<mat-nav-list class="navigation-bottom">
-    <a mat-list-item (click)="openSettings()">
-        <mat-icon matListItemIcon>settings</mat-icon>
-        <span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
-    </a>
-</mat-nav-list>
+<div class="navigation-bottom">
+    <mat-nav-list>
+        <a mat-list-item (click)="openSettings()">
+            <mat-icon matListItemIcon>settings</mat-icon>
+            <span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
+        </a>
+    </mat-nav-list>
+</div>
diff --git a/src/app/xtream-tauri/navigation/navigation.component.scss b/src/app/xtream-tauri/navigation/navigation.component.scss
index c04b8cc0e..df0293da2 100644
--- a/src/app/xtream-tauri/navigation/navigation.component.scss
+++ b/src/app/xtream-tauri/navigation/navigation.component.scss
@@ -10,6 +10,7 @@
 }
 
 .navigation-bottom {
+    border-top: 1px solid #333;
     margin-top: auto;
     padding-bottom: 16px;
 }
@@ -173,6 +174,24 @@ mat-icon {
     }
 }
 
-.navigation-bottom {
-    padding-bottom: 16px;
-}
\ No newline at end of file
+
+.nav-section {
+    margin: 10px 0;
+    padding: 5px 0;
+
+    .nav-group-label {
+        padding: 0 16px 0;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .mat-nav-list {
+        padding: 0;
+        background: rgba(255, 255, 255, 0.03);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+}