diff --git a/src/app/student/vle/student-vle.module.ts b/src/app/student/vle/student-vle.module.ts
index 07214d01fd8..6748b24b1b4 100644
--- a/src/app/student/vle/student-vle.module.ts
+++ b/src/app/student/vle/student-vle.module.ts
@@ -14,7 +14,6 @@ import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { StudentDataService } from '../../../assets/wise5/services/studentDataService';
 import { NavigationComponent } from '../../../assets/wise5/themes/default/navigation/navigation.component';
 import { StepToolsComponent } from '../../../assets/wise5/themes/default/themeComponents/stepTools/step-tools.component';
-import { NavItemComponent } from '../../../assets/wise5/vle/nav-item/nav-item.component';
 import { NodeModule } from '../../../assets/wise5/vle/node/node.module';
 import { StudentAssetsDialogModule } from '../../../assets/wise5/vle/studentAsset/student-assets-dialog/student-assets-dialog.module';
 import { VLEComponent } from '../../../assets/wise5/vle/vle.component';
@@ -41,7 +40,6 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
     ChooseBranchPathDialogComponent,
     GenerateImageDialogComponent,
     GroupTabsComponent,
-    NavigationComponent,
     NodeNavigationComponent,
     RunEndedAndLockedMessageComponent,
     SafeUrl,
@@ -54,7 +52,7 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
     CommonModule,
     ComponentStudentModule,
     MatDialogModule,
-    NavItemComponent,
+    NavigationComponent,
     NodeModule,
     NodeStatusIconComponent,
     SimpleDialogModule,
diff --git a/src/assets/wise5/themes/default/navigation/navigation.component.spec.ts b/src/assets/wise5/themes/default/navigation/navigation.component.spec.ts
index 83dd9211f89..621edb7d40d 100644
--- a/src/assets/wise5/themes/default/navigation/navigation.component.spec.ts
+++ b/src/assets/wise5/themes/default/navigation/navigation.component.spec.ts
@@ -1,15 +1,12 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { VLEProjectService } from '../../../vle/vleProjectService';
 import { NavigationComponent } from './navigation.component';
 
 class MockVLEProjectService {
-  rootNode = { ids: [] };
-
   getProjectRootNode() {
-    return this.rootNode;
+    return { ids: [] };
   }
 }
 
@@ -19,8 +16,7 @@ describe('NavigationComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, MatDialogModule, StudentTeacherCommonServicesModule],
-      declarations: [NavigationComponent],
+      imports: [HttpClientTestingModule, NavigationComponent, StudentTeacherCommonServicesModule],
       providers: [{ provide: VLEProjectService, useClass: MockVLEProjectService }]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/themes/default/navigation/navigation.component.ts b/src/assets/wise5/themes/default/navigation/navigation.component.ts
index 2ec7238fef5..e41ec2bb9f0 100644
--- a/src/assets/wise5/themes/default/navigation/navigation.component.ts
+++ b/src/assets/wise5/themes/default/navigation/navigation.component.ts
@@ -2,28 +2,30 @@ import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { StudentDataService } from '../../../services/studentDataService';
 import { VLEProjectService } from '../../../vle/vleProjectService';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NavItemComponent } from '../../../vle/nav-item/nav-item.component';
 
 @Component({
+  imports: [CommonModule, FlexLayoutModule, NavItemComponent],
   selector: 'navigation',
-  templateUrl: './navigation.component.html',
-  styleUrls: ['./navigation.component.scss']
+  standalone: true,
+  styleUrl: './navigation.component.scss',
+  templateUrl: './navigation.component.html'
 })
 export class NavigationComponent implements OnInit {
-  navItemIsExpanded: any = {};
-  navItemIsExpandedSubscription: Subscription;
-  rootNode: any;
+  protected navItemIsExpanded: { [nodeId: string]: boolean } = {};
+  private navItemIsExpandedSubscription: Subscription;
+  protected rootNode: any;
 
-  constructor(
-    private projectService: VLEProjectService,
-    private studentDataService: StudentDataService
-  ) {}
+  constructor(private dataService: StudentDataService, private projectService: VLEProjectService) {}
 
   ngOnInit(): void {
     this.rootNode = this.projectService.getProjectRootNode();
   }
 
   ngAfterViewInit(): void {
-    this.navItemIsExpandedSubscription = this.studentDataService.navItemIsExpanded$.subscribe(
+    this.navItemIsExpandedSubscription = this.dataService.navItemIsExpanded$.subscribe(
       ({ nodeId, isExpanded }) => {
         this.navItemIsExpanded[nodeId] = isExpanded;
       }
diff --git a/src/assets/wise5/vle/vle.component.spec.ts b/src/assets/wise5/vle/vle.component.spec.ts
index 18ed246c5a3..4285db07751 100644
--- a/src/assets/wise5/vle/vle.component.spec.ts
+++ b/src/assets/wise5/vle/vle.component.spec.ts
@@ -51,13 +51,13 @@ describe('VLEComponent', () => {
         MatToolbarModule,
         MatSelectModule,
         MatSidenavModule,
+        NavigationComponent,
         NodeIconComponent,
         NodeStatusIconComponent,
         StudentTeacherCommonServicesModule,
         TopBarComponent
       ],
       declarations: [
-        NavigationComponent,
         NodeComponent,
         NotebookNotesComponent,
         SafeUrl,