diff --git a/projects/assets-library/assets/styles/_interaction.scss b/projects/assets-library/assets/styles/_interaction.scss
index e96018a25..db75ce1d9 100644
--- a/projects/assets-library/assets/styles/_interaction.scss
+++ b/projects/assets-library/assets/styles/_interaction.scss
@@ -99,3 +99,18 @@
     cursor: not-allowed;
   }
 }
+
+@mixin nav-primary-background {
+  background: $blue-6;
+  opacity: 0.95;
+}
+
+@mixin nav-primary-background-hover {
+  background: $blue-8;
+  opacity: 0.95;
+}
+
+@mixin nav-secondary-background {
+  background: $blue-9;
+  opacity: 0.95;
+}
diff --git a/projects/components/src/navigation/nav-item/nav-item.component.scss b/projects/components/src/navigation/nav-item/nav-item.component.scss
index de4529059..db06ec638 100644
--- a/projects/components/src/navigation/nav-item/nav-item.component.scss
+++ b/projects/components/src/navigation/nav-item/nav-item.component.scss
@@ -10,10 +10,15 @@
   justify-content: flex-start;
   align-items: center;
 
-  border-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
 
+  &.collapsed {
+    border-radius: 0;
+  }
+
   .label-container {
     flex-grow: 1;
     margin-left: 14px;
@@ -27,40 +32,37 @@
   }
 
   .icon {
-    color: $gray-4;
+    color: $gray-1;
   }
 
   .label {
     flex: 1;
-    @include body-1-medium($gray-6);
+    @include body-1-medium($gray-2);
   }
 
   &.active {
-    background-color: $gray-2;
+    @include nav-primary-background;
 
-    .label {
-      color: $gray-9;
+    &:hover {
+      background-color: $blue-5;
     }
 
-    .icon {
-      color: $gray-6;
+    .label {
+      color: white;
     }
 
-    &:hover {
-      background-color: $gray-1;
+    .icon {
+      color: white;
     }
   }
 
   &:hover {
-    background-color: $gray-1;
+    @include nav-primary-background;
   }
 
   .soon-container {
     flex: 0;
-    display: flex;
-    flex-direction: row;
-    vertical-align: center;
-    align-items: center;
+    @include center-contents;
   }
 
   .soon {
@@ -71,6 +73,36 @@
     font-weight: 600;
     padding: 2px 4px;
   }
+
+  &:not(.navigation-dark) {
+    border-radius: 4px;
+    .icon {
+      color: $gray-4;
+    }
+    .label {
+      @include body-1-medium($gray-6);
+    }
+
+    &:hover {
+      background-color: $gray-1;
+    }
+
+    &.active {
+      background-color: $gray-2;
+
+      .label {
+        color: $gray-9;
+      }
+
+      .icon {
+        color: $gray-6;
+      }
+
+      &:hover {
+        background-color: $gray-1;
+      }
+    }
+  }
 }
 
 :hover {
diff --git a/projects/components/src/navigation/nav-item/nav-item.component.ts b/projects/components/src/navigation/nav-item/nav-item.component.ts
index 47c9c2664..f201a573c 100644
--- a/projects/components/src/navigation/nav-item/nav-item.component.ts
+++ b/projects/components/src/navigation/nav-item/nav-item.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
-import { NavItemLinkConfig } from '../navigation.config';
+import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';
 
 @Component({
   selector: 'ht-nav-item',
@@ -13,7 +13,7 @@ import { NavItemLinkConfig } from '../navigation.config';
       <div
         *htIfFeature="this.config.featureState$ | async as featureState"
         class="nav-item"
-        [ngClass]="{ active: this.active }"
+        [ngClass]="[this.active ? 'active' : '', this.navItemViewStyle ?? '', this.collapsed ? 'collapsed' : '']"
       >
         <ht-icon
           class="icon"
@@ -54,6 +54,9 @@ export class NavItemComponent {
   @Input()
   public collapsed: boolean = true;
 
+  @Input()
+  public readonly navItemViewStyle?: NavViewStyle;
+
   public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
     navType: NavigationParamsType.InApp,
     path: item.matchPaths[0],
diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss
index 6d3a7b9ac..3ffb3ef32 100644
--- a/projects/components/src/navigation/navigation-list.component.scss
+++ b/projects/components/src/navigation/navigation-list.component.scss
@@ -1,7 +1,7 @@
-@import 'color-palette';
-@import 'font';
+@import 'mixins';
 
 .navigation-list {
+  @include nav-secondary-background;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -12,7 +12,8 @@
 
   .content {
     overflow-y: auto;
-    padding: 18px 12px;
+    overflow-x: hidden;
+    padding: 18px 0 12px 12px;
 
     .nav-header {
       padding-top: 24px;
@@ -23,7 +24,7 @@
       align-items: center;
 
       .label {
-        @include overline($gray-9);
+        @include overline($blue-2);
       }
 
       .beta {
@@ -33,6 +34,7 @@
   }
 
   .resize-tab-button {
+    @include nav-secondary-background;
     position: absolute;
     display: flex;
     align-items: center;
@@ -40,12 +42,9 @@
     right: -12px;
     height: 28px;
     width: 12px;
-    border: 1px solid $gray-2;
-    border-left-color: white;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
-    color: $gray-7;
-    background: white;
+    color: white;
 
     &:hover {
       color: $gray-4;
@@ -58,31 +57,100 @@
   }
 
   .footer {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    margin-left: 6px;
     color: $gray-5;
     padding: 8px 12px 18px;
 
     .footer-item {
       display: flex;
       align-items: center;
-      margin-left: 12px;
+      justify-content: center;
+
+      .nav-group-icon {
+        height: 190px;
+        opacity: 0.15;
+        color: $blue-gray-4;
+      }
+
+      .nav-group-label {
+        margin: 10px auto 0 0;
+        padding-right: 20px;
+        font-size: 24px;
+        font-weight: bold;
+        color: $gray-4;
+      }
 
       .link {
+        margin-right: auto;
         @include link;
         @include footnote($gray-5);
       }
     }
 
     .nav-divider {
-      position: absolute;
-      top: 0;
-      left: 24px;
-      margin: 0;
+      margin: 12px auto 8px 0;
       height: 1px;
       width: 16px;
-      background-color: $gray-2;
-      border: none;
+      background-color: $gray-4;
+    }
+  }
+
+  &:not(.expanded) {
+    .footer .footer-item .link {
+      margin-right: 0;
+    }
+
+    .footer .nav-divider {
+      margin: 8px auto;
+    }
+
+    .content {
+      padding: 18px 0 12px 0;
+    }
+  }
+
+  &:not(.navigation-dark) {
+    background: white;
+
+    .content {
+      padding: 18px 12px;
+    }
+    &:not(.expanded) {
+      .content {
+        padding: 18px 12px;
+      }
+    }
+
+    .content .nav-header .label {
+      @include overline($gray-9);
+    }
+
+    .footer {
+      margin-left: 6px;
+
+      .footer-item {
+        margin-left: 12px;
+        justify-content: unset;
+      }
+      .nav-divider {
+        position: absolute;
+        top: 0;
+        left: 24px;
+        margin: 0;
+        height: 1px;
+        width: 16px;
+        background-color: $gray-2;
+        border: none;
+      }
+    }
+
+    .resize-tab-button {
+      border: 1px solid $gray-2;
+      border-left-color: white;
+      color: $gray-7;
+      background: white;
     }
   }
 }
diff --git a/projects/components/src/navigation/navigation-list.component.test.ts b/projects/components/src/navigation/navigation-list.component.test.ts
index 6da7161c4..ac60c0288 100644
--- a/projects/components/src/navigation/navigation-list.component.test.ts
+++ b/projects/components/src/navigation/navigation-list.component.test.ts
@@ -144,4 +144,52 @@ describe('Navigation List Component', () => {
     expect(spectator.queryAll('.nav-header')).toHaveLength(1);
     expect(spectator.queryAll('.nav-header .label')[0]).toHaveText('header 1');
   });
+
+  test('should render nav group label and icon if provided', () => {
+    const navItems: NavItemConfig[] = [
+      {
+        type: NavItemType.Header,
+        label: 'header 1',
+        isVisible$: of(true)
+      },
+      {
+        type: NavItemType.Link,
+        icon: 'icon',
+        label: 'label',
+        matchPaths: ['']
+      }
+    ];
+    const footerItems: FooterItemConfig[] = [
+      {
+        url: 'http://test',
+        label: 'Footer item',
+        icon: 'icon'
+      }
+    ];
+    const navGroup = {
+      label: 'TEST LABEL',
+      icon: IconType.StatusCode,
+      displayNavList: true,
+      navItems: navItems
+    };
+    spectator = createHost(
+      `<ht-navigation-list [navGroup]="navGroup" [navItems]="navItems" [footerItems]="footerItems"></ht-navigation-list>`,
+      {
+        hostProps: { navItems: navItems, navGroup: navGroup, footerItems: footerItems },
+        providers: [
+          mockProvider(ActivatedRoute, activatedRoute),
+          mockProvider(NavigationListComponentService, {
+            resolveFeaturesAndUpdateVisibilityForNavItems: jest.fn().mockReturnValue(navItems)
+          }),
+          mockProvider(NavigationService, {
+            navigation$: EMPTY,
+            navigateWithinApp: jest.fn(),
+            getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute))
+          })
+        ]
+      }
+    );
+    expect(spectator.query('.nav-group-icon')).toExist();
+    expect(spectator.query('.nav-group-label')).toExist();
+  });
 });
diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts
index 6b330f578..ba7238b5a 100644
--- a/projects/components/src/navigation/navigation-list.component.ts
+++ b/projects/components/src/navigation/navigation-list.component.ts
@@ -6,15 +6,23 @@ import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
 import { NavigationListComponentService } from './navigation-list-component.service';
-import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from './navigation.config';
+import {
+  FooterItemConfig,
+  NavItemConfig,
+  NavItemGroup,
+  NavItemLinkConfig,
+  NavItemType,
+  NavViewStyle
+} from './navigation.config';
 
 @Component({
   selector: 'ht-navigation-list',
   styleUrls: ['./navigation-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <nav class="navigation-list" [ngClass]="{ expanded: !this.collapsed }">
+    <nav class="navigation-list" [ngClass]="[!this.collapsed ? 'expanded' : '', this.navViewStyle ?? '']">
       <div class="content" *htLetAsync="this.activeItem$ as activeItem" [htLayoutChangeTrigger]="this.collapsed">
+        <ng-content></ng-content>
         <ng-container *ngFor="let item of this.navItems; let id = index">
           <ng-container [ngSwitch]="item.type">
             <div *ngIf="!this.collapsed">
@@ -30,6 +38,7 @@ import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from
 
             <ng-container *ngSwitchCase="'${NavItemType.Link}'">
               <ht-nav-item
+                [navItemViewStyle]="this.navViewStyle"
                 (click)="this.navItemClick.emit(item)"
                 [config]="item"
                 [active]="item === activeItem"
@@ -45,8 +54,15 @@ import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from
       </div>
 
       <div class="footer" *ngIf="this.footerItems">
-        <hr class="nav-divider" />
+        <div class="footer-item" *ngIf="this.navGroup && !this.collapsed">
+          <ht-icon class="nav-group-icon" [icon]="this.navGroup?.icon" [size]="'${IconSize.Inherit}'"></ht-icon>
+        </div>
 
+        <div class="footer-item" *ngIf="this.navGroup && !this.collapsed">
+          <ht-label class="nav-group-label" [label]="this.navGroup?.label" [wrap]="true"></ht-label>
+        </div>
+
+        <hr class="nav-divider" />
         <div *ngFor="let footerItem of footerItems" class="footer-item">
           <ht-link class="link" [paramsOrUrl]="footerItem.url">
             <ht-icon *ngIf="this.collapsed" [icon]="footerItem.icon" size="${IconSize.Small}"></ht-icon>
@@ -58,6 +74,9 @@ import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from
   `
 })
 export class NavigationListComponent implements OnChanges {
+  @Input()
+  public navGroup?: NavItemGroup;
+
   @Input()
   public navItems: NavItemConfig[] = [];
 
@@ -73,6 +92,9 @@ export class NavigationListComponent implements OnChanges {
   @Output()
   public readonly collapsedChange: EventEmitter<boolean> = new EventEmitter();
 
+  @Input()
+  public readonly navViewStyle?: NavViewStyle;
+
   @Output()
   public readonly navItemClick: EventEmitter<NavItemLinkConfig> = new EventEmitter();
 
diff --git a/projects/components/src/navigation/navigation.config.ts b/projects/components/src/navigation/navigation.config.ts
index 6426fa69f..3327f1c4d 100644
--- a/projects/components/src/navigation/navigation.config.ts
+++ b/projects/components/src/navigation/navigation.config.ts
@@ -47,3 +47,14 @@ export const enum NavItemType {
   Divider = 'divider',
   Footer = 'footer'
 }
+
+export interface NavItemGroup {
+  label: string;
+  icon: string;
+  navItems: NavItemConfig[];
+  displayNavList: boolean;
+}
+
+export const enum NavViewStyle {
+  DarkViewStyleClass = 'navigation-dark'
+}