diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss
index 35fb2b6db06..94ad7c16810 100644
--- a/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss
+++ b/src/dotnet/APIView/APIViewWeb/Client/css/shared/theme-colors.scss
@@ -134,6 +134,7 @@
     /*----Shadows and Glows------------------------------------------*/
     --outer-glow: #{tint-color($primary-color, 80%)};
     --shadow-color: rgba(#{$gray-100}, .15);
+    --shadow-color-primary: 0 0 0 0.15rem #{rgba($primary-color, 0.5)};
     --box-shadow: 0 .5rem 1rem #{rgba($gray-100, .15)};
     --box-shadow-sm: 0 .125rem .25rem #{rgba($gray-100, .075)};
     --box-shadow-lg: 0 1rem 3rem #{rgba($gray-100, .175)};
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html
index 154c2e19fcc..59cba2047a6 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.html
@@ -1,40 +1,55 @@
-
-<div *ngIf="review" class="input-group input-group-sm py-2" id="review-info-bar">
-    <span role="img" class="input-group-text">
-        <img src="assets/images/{{ review!.language | languageNames }}-original.svg" alt="{{ review!.language}}" width="25">
-    </span>
-    <span class="input-group-text">{{ review!.packageName }}</span>
-    <span *ngIf="review!.status == 'Approved'" class="input-group-text" data-bs-toggle="tooltip" title="Approved for First Release">
-        <i class="fa-regular fa-circle-check text-success"></i>
-    </span>
-    <button class="btn btn-outline-primary" type="button" (click)="showRevisionSidePanel()">Revision :</button>
-    <p-dropdown [options]="revisionsTypeDropDown" [(ngModel)]="selectedRevisionsType" (onChange)="onRevisionTypeChange($event)" optionLabel="name">
-        <ng-template pTemplate="selectedItem">
-            <div class="flex align-items-center gap-2" *ngIf="selectedRevisionsType">
-                <div><i class="{{ badgeClass.get(selectedRevisionsType.value) }} me-2"></i>{{ selectedRevisionsType.name }}</div>
-            </div>
-        </ng-template>
-        <ng-template let-revisionsTypeDropDown pTemplate="item">
-            <div class="flex align-items-center gap-2">
-                <div><i class="{{ badgeClass.get(revisionsTypeDropDown.value) }} me-2"></i>{{ revisionsTypeDropDown.name }}</div>
+<div class="row my-2">
+    <div class="col-11">
+        <div *ngIf="review" class="input-group input-group-sm" id="review-info-bar">
+            <button class="btn btn-outline-primary" type="button"><i class="bi bi-arrow-bar-left"></i></button>
+            <span role="img" class="input-group-text">
+                <img src="assets/images/{{ review!.language | languageNames }}-original.svg" alt="{{ review!.language}}" width="25">
+            </span>
+            <span class="input-group-text review-name">{{ review!.packageName }}</span>
+            <span *ngIf="review!.status == 'Approved'" class="input-group-text" data-bs-toggle="tooltip" title="Approved for First Release">
+                <i class="fa-regular fa-circle-check text-success"></i>
+            </span>
+            <button class="btn btn-outline-primary" type="button" (click)="showRevisionSidePanel()">Revision :</button>
+            <p-dropdown [options]="revisionsTypeDropDown" [(ngModel)]="selectedRevisionsType"
+                (onChange)="onRevisionTypeChange($event)" optionLabel="name">
+                <ng-template pTemplate="selectedItem">
+                    <div class="flex align-items-center gap-2" *ngIf="selectedRevisionsType">
+                        <div><i class="{{ badgeClass.get(selectedRevisionsType.value) }} me-2"></i>{{ selectedRevisionsType.name }}</div>
+                    </div>
+                </ng-template>
+                <ng-template let-revisionsTypeDropDown pTemplate="item">
+                    <div class="flex align-items-center gap-2">
+                        <div><i class="{{ badgeClass.get(revisionsTypeDropDown.value) }} me-2"></i>{{ revisionsTypeDropDown.name }}</div>
+                    </div>
+                </ng-template>
+            </p-dropdown>
+            <p-dropdown [options]="revisionsDropDown" [(ngModel)]="selectedRevisionsDropDown" optionLabel="name" [filter]="true" styleClass="revision-drop-down" filterBy="name"></p-dropdown>
+            <button class="btn btn-outline-primary" type="button">Diff :</button>
+        
+            <p-dropdown [options]="diffRevisionsTypeDropDown" [(ngModel)]="selectedDiffRevisionsType" (onChange)="onDiffRevisionTypeChange($event)" optionLabel="name">
+                <ng-template pTemplate="selectedItem">
+                    <div class="flex align-items-center gap-2" *ngIf="selectedDiffRevisionsType">
+                        <div><i class="{{ badgeClass.get(selectedDiffRevisionsType.value) }} me-2"></i>{{ selectedDiffRevisionsType.name }}</div>
+                    </div>
+                </ng-template>
+                <ng-template let-diffRevisionsTypeDropDown pTemplate="item">
+                    <div class="flex align-items-center gap-2">
+                        <div><i class="{{ badgeClass.get(diffRevisionsTypeDropDown.value) }} me-2"></i>{{ diffRevisionsTypeDropDown.name }}</div>
+                    </div>
+                </ng-template>
+            </p-dropdown>
+            <p-dropdown [options]="diffRevisionsDropDown" [(ngModel)]="selecteddiffRevisionsDropDown" optionLabel="name" [filter]="true" styleClass="revision-drop-down" filterBy="name"></p-dropdown>
+            <button class="btn btn-outline-primary" type="button">Conversations :</button>
+            <button class="btn btn-info" type="button"><span class="badge">0 / 0</span></button>
+            <button class="btn btn-outline-primary" type="button">Samples</button>
+        </div>
+    </div>
+    <div class="col-1 d-flex">
+        <div class="ms-auto">
+            <div class="input-group input-group-sm">
+                <button class="btn btn-outline-primary" type="button" style="padding-top: 0.4rem; padding-bottom: 0.4rem;"><i class="bi bi-arrow-bar-right"></i></button>
             </div>
-        </ng-template>
-    </p-dropdown>
-    <p-dropdown [options]="revisionsDropDown" [(ngModel)]="selectedRevisionsDropDown" optionLabel="name" [filter]="true" filterBy="name"></p-dropdown>
+        </div>
+    </div>
+</div>
 
-    <p-dropdown [options]="diffRevisionsTypeDropDown" [(ngModel)]="selectedDiffRevisionsType" (onChange)="onDiffRevisionTypeChange($event)" optionLabel="name">
-        <ng-template pTemplate="selectedItem">
-            <div class="flex align-items-center gap-2" *ngIf="selectedDiffRevisionsType">
-                <div><i class="{{ badgeClass.get(selectedDiffRevisionsType.value) }} me-2"></i>{{ selectedDiffRevisionsType.name }}</div>
-            </div>
-        </ng-template>
-        <ng-template let-diffRevisionsTypeDropDown pTemplate="item">
-            <div class="flex align-items-center gap-2">
-                <div><i class="{{ badgeClass.get(diffRevisionsTypeDropDown.value) }} me-2"></i>{{ diffRevisionsTypeDropDown.name }}</div>
-            </div>
-        </ng-template>
-    </p-dropdown>
-    <p-dropdown [options]="diffRevisionsDropDown" [(ngModel)]="selecteddiffRevisionsDropDown" optionLabel="name" [filter]="true" filterBy="name"></p-dropdown>
-    <button class="btn btn-outline-primary" type="button">Conversations</button>
-    <button class="btn btn-outline-primary" type="button">Samples</button>
-</div>
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss
index 67074028668..26dab6fad62 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.scss
@@ -17,4 +17,16 @@
         border-top-right-radius: 0px;
         border-top-left-radius: 0px;
     }
+
+    .btn-outline-primary  {
+        border-color: var(--border-color);
+    }
+    
+    .revision-drop-down {
+        max-width: 15vw;
+    }
+
+    .review-name {
+        max-width: 10vw;
+    }
 }
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts
index 9b831ca722b..954499ba04e 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-info/review-info.component.ts
@@ -76,7 +76,7 @@ export class ReviewInfoComponent {
   getReviewRevisionsDropDown(selectedType : any) {
     const revisions : any[] = [];
     this.reviewRevisions.get(selectedType.value)?.forEach((revision: { label: any; id: any; }) => {
-      revisions.push({ name: revision.label, value: revision.id });
+      revisions.push({ name: revision.label ?? revision.id, value: revision.id });
     });
     return revisions;
   }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html
index bc9adb51bfd..7b955d1cfe0 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.html
@@ -1 +1 @@
-<p-tabMenu [model]="menuItems" [activeItem]="activeItem"></p-tabMenu>
\ No newline at end of file
+<p-tree *ngIf="navigationTree.length > 0" [value]="navigationTree"></p-tree>
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss
index e69de29bb2d..5878008a2bf 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.scss
@@ -0,0 +1,18 @@
+:host ::ng-deep {
+    .p-tree {
+        border: 0px;
+        padding: 0.1rem;
+        max-height: 100%;
+        width: 100%;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .p-tree .p-tree-container .p-treenode .p-treenode-content {
+        display: block;
+        padding: 0.15rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts
index 17e226d7faf..3defed407db 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-nav/review-nav.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { MenuItem } from 'primeng/api';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { NavigationItem } from 'src/app/_models/review';
+import { TreeNode } from 'primeng/api'
 
 @Component({
   selector: 'app-review-nav',
@@ -7,37 +8,28 @@ import { MenuItem } from 'primeng/api';
   styleUrls: ['./review-nav.component.scss']
 })
 export class ReviewNavComponent {
-  menuItems : MenuItem[] | undefined = [];
-  activeItem: MenuItem | undefined;
+  @Input() navigation : NavigationItem[] | null = null;
+  navigationTree : TreeNode[] = [];
 
-  ngOnInit() {
-    this.menuItems = this.setDockItems();
-    this.activeItem = this.menuItems[0];
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['navigation'].previousValue){
+      this.navigation?.forEach(navigationItem => {
+        this.navigationTree.push(this.parseNavigationItemsToTreeNodes(navigationItem));
+      });
+    }
   }
 
-  setDockItems() {
-    return [
-      {
-        label: 'API',
-        icon: 'bi bi-braces',
-        expanded: false
-      },
-      {
-        label: 'Revisions',
-        icon: 'bi bi-clock-history',
-        expanded: true
-      },
-      {
-        label: 'Conversiation',
-        icon: 'fa-regular fa-message',
-        expanded: true
-      },
-      {
-        label: 'Samples',
-        icon: 'bi bi-puzzle',
-        expanded: true
-      },
-    ]
+  parseNavigationItemsToTreeNodes(navigationItem : NavigationItem) {
+    let treeNode : TreeNode = {
+      label: navigationItem.text,
+      data: navigationItem.navigationId,
+      expanded: true
+    }
+    let children : TreeNode[] = [];
+    navigationItem.childItems.forEach(child => {
+      children.push(this.parseNavigationItemsToTreeNodes(child));
+    });
+    treeNode.children = children;
+    return treeNode;
   }
-
 }
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
index 02a2acc573a..b35bf2b62e0 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.html
@@ -3,9 +3,9 @@
     <app-review-info [review]="review" [reviewRevisions]="reviewRevisions" (revisionsSidePanel)="showRevisionsPanel($event)"></app-review-info>
     <p-splitter 
         [panelSizes]="[15, 70, 15]" 
-        [style]="{ height: 'calc(100vh - 145px)' }">
+        [style]="{ height: 'calc(100vh - 124px)' }">
         <ng-template pTemplate>
-            <div class="col flex align-items-center justify-content-center">Panel 1</div>
+            <app-review-nav [navigation]="navigation"></app-review-nav>
         </ng-template>
         <ng-template pTemplate>
             <div class="col flex align-items-center justify-content-center">
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss
index e46007f8e43..a41fc9606a3 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page/review-page.component.scss
@@ -2,4 +2,9 @@
     .p-sidebar-right {
         width: 70dvw;
     }
+
+    .p-splitter-panel-nested {
+        display: block;
+        min-width: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
index eef1cf32725..3ec4b5c5e56 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
+++ b/src/dotnet/APIView/ClientSPA/src/app/app.module.ts
@@ -33,8 +33,8 @@ import { SplitterModule } from 'primeng/splitter';
 import { CodePanelComponent } from './_components/code-panel/code-panel.component';
 import { VirtualScrollerModule } from 'primeng/virtualscroller';
 import { ReviewInfoComponent } from './_components/review-info/review-info.component';
-import { ReviewNavComponent } from './_components/review-nav/review-nav.component';
 import { RevisionsListComponent } from './_components/revisions-list/revisions-list.component';
+import { ReviewNavComponent } from './_components/review-nav/review-nav.component';
 
 @NgModule({
   declarations: [
@@ -47,8 +47,8 @@ import { RevisionsListComponent } from './_components/revisions-list/revisions-l
     ReviewPageComponent,
     CodePanelComponent,
     ReviewInfoComponent,
-    ReviewNavComponent,
-    RevisionsListComponent
+    RevisionsListComponent,
+    ReviewNavComponent
   ],
   imports: [
     AppRoutingModule,
diff --git a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
index a06df42cfe3..bd16c8103be 100644
--- a/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
+++ b/src/dotnet/APIView/ClientSPA/src/ng-prime-overrides.scss
@@ -148,8 +148,8 @@
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-    color: var(--primary-btn-color);
-    background: var(--link-active);
+    color: var(--base-text-color);
+    background: var(--base-bg-color);
 }
 
 .p-dropdown:not(.p-disabled):hover {
@@ -157,7 +157,7 @@
 }
 
 .p-dropdown:not(.p-disabled).p-focus {
-    box-shadow: 0 0 0 0.2rem var(--outer-glow);
+    box-shadow: var(--shadow-color-primary);
     border-color: var(--primary-btn-color);
 }
 
@@ -175,7 +175,7 @@
 }
 
 .p-inputtext:enabled:focus {
-    box-shadow: 0 0 0 0.2rem var(--outer-glow);
+    box-shadow: var(--shadow-color-primary);
     border-color: var(--primary-btn-color);
 }
 
@@ -215,7 +215,7 @@
 }
 
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-    box-shadow: inset 0 0 0 0.15rem var(--outer-glow);
+    box-shadow: var(--shadow-color-primary);
 }
 
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
@@ -228,7 +228,7 @@
 }
 
 .p-multiselect:not(.p-disabled).p-focus {
-    box-shadow: 0 0 0 0.2rem var(--outer-glow);
+    box-shadow: var(--shadow-color-primary);
     border-color: var(--primary-btn-color);
 }
 
@@ -238,7 +238,7 @@
 }
 
 .p-datatable .p-sortable-column:focus {
-    box-shadow: inset 0 0 0 0.15rem var(--outer-glow);
+    box-shadow: var(--shadow-color-primary);
 }
 
 .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
@@ -274,4 +274,26 @@
     color: var(--base-text-color);
     padding-top: 2px;
     padding-bottom: 2px;
+}
+
+.p-tree {
+    border: 1px solid var(--border-color);
+    background: var(--base-fg-color);
+    color: var(--base-text-color);
+}
+
+.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    color: var(--base-text-color);
+}
+
+.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: var(--base-text-color);
+}
+
+.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    box-shadow: inset var(--shadow-color-primary);
+}
+
+.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus {
+    box-shadow: var(--shadow-color-primary);
 }
\ No newline at end of file