diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
index b7df2a90d57..359f20452eb 100644
--- a/src/app/teacher/classroom-monitor.module.ts
+++ b/src/app/teacher/classroom-monitor.module.ts
@@ -3,7 +3,6 @@ import { NavItemScoreComponent } from '../../assets/wise5/classroomMonitor/class
 import { AlertStatusCornerComponent } from '../classroom-monitor/alert-status-corner/alert-status-corner.component';
 import { ComponentNewWorkBadgeComponent } from '../classroom-monitor/component-new-work-badge/component-new-work-badge.component';
 import { ComponentSelectComponent } from '../classroom-monitor/component-select/component-select.component';
-import { StepInfoComponent } from '../classroom-monitor/step-info/step-info.component';
 import { PeerGroupGradingModule } from './peer-group-grading.module';
 import { TeacherSummaryDisplayComponent } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
 import { HighchartsChartModule } from 'highcharts-angular';
@@ -45,7 +44,6 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     NodeProgressViewComponent,
     NotebookGradingComponent,
     NotebookWorkgroupGradingComponent,
-    StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
     ToolBarComponent
@@ -70,7 +68,7 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     SaveIndicatorComponent,
     SelectPeriodComponent,
     ShowNodeInfoDialogComponent,
-    StepInfoComponent,
+    StepItemComponent,
     StudentProgressComponent,
     StudentTeacherCommonModule,
     TeacherSummaryDisplayComponent,
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.html
index 21d6fb75b69..eb5bb8523c1 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.html
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.html
@@ -26,35 +26,40 @@
       <div fxFlex="{{ showScore ? 30 : 20 }}" fxLayout="row" fxLayoutAlign="center center">
         <workgroup-node-status [statusText]="statusText" [statusClass]="statusClass" />
       </div>
-      <div *ngIf="showScore" fxFlex="20" fxLayout="row" fxLayoutAlign="center center">
-        <workgroup-node-score [score]="score" [maxScore]="maxScore" />
-      </div>
+      @if (showScore) {
+        <div fxFlex="20" fxLayout="row" fxLayoutAlign="center center">
+          <workgroup-node-score [score]="score" [maxScore]="maxScore" />
+        </div>
+      }
     </button>
   </div>
-  <mat-list-item *ngIf="expand && !disabled" class="grading__item-container">
-    <div class="grading__item">
-      <ng-container *ngFor="let component of components; let index = index">
-        <div
-          *ngIf="componentIdToIsVisible[component.id]"
-          id="component_{{ component.id }}_{{ workgroupId }}"
-          class="component component--grading"
-        >
-          <h3 class="accent-1 strong gray-lightest-bg component__header">
-            {{ index + 1 + '. ' + getComponentTypeLabel(component.type) }}&nbsp;
-            <component-new-work-badge
-              [componentId]="component.id"
-              [workgroupId]="workgroupId"
-              [nodeId]="nodeId"
-            />
-          </h3>
-          <workgroup-component-grading
-            class="component--grading__response__content"
-            [componentId]="component.id"
-            [workgroupId]="workgroupId"
-            [nodeId]="nodeId"
-          />
-        </div>
-      </ng-container>
-    </div>
-  </mat-list-item>
+  @if (expand && !disabled) {
+    <mat-list-item class="grading__item-container">
+      <div class="grading__item">
+        @for (component of components; track component.id; let i = $index) {
+          @if (componentIdToIsVisible[component.id]) {
+            <div
+              id="component_{{ component.id }}_{{ workgroupId }}"
+              class="component component--grading"
+            >
+              <h3 class="accent-1 strong gray-lightest-bg component__header">
+                {{ i + 1 + '. ' + getComponentTypeLabel(component.type) }}&nbsp;
+                <component-new-work-badge
+                  [componentId]="component.id"
+                  [workgroupId]="workgroupId"
+                  [nodeId]="nodeId"
+                />
+              </h3>
+              <workgroup-component-grading
+                class="component--grading__response__content"
+                [componentId]="component.id"
+                [workgroupId]="workgroupId"
+                [nodeId]="nodeId"
+              />
+            </div>
+          }
+        }
+      </div>
+    </mat-list-item>
+  }
 </div>
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.spec.ts
index 76760e64471..6290d391b8b 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.spec.ts
@@ -2,19 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
 import { StepItemComponent } from './step-item.component';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 let component: StepItemComponent;
 let fixture: ComponentFixture<StepItemComponent>;
 let teacherProjectService: TeacherProjectService;
-
 describe('StepItemComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [StepItemComponent],
-      imports: [ClassroomMonitorTestingModule],
-      providers: [TeacherProjectService],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [ClassroomMonitorTestingModule, StepItemComponent],
+      providers: [TeacherProjectService]
     }).compileComponents();
   });
 
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts
index f8b961032d6..406804c0526 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts
@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   SimpleChanges,
   ViewEncapsulation
@@ -11,33 +10,54 @@ import { copy } from '../../../../common/object/object';
 import { ComponentServiceLookupService } from '../../../../services/componentServiceLookupService';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { calculateComponentVisibility } from '../../shared/grading-helpers/grading-helpers';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { StepInfoComponent } from '../../../../../../app/classroom-monitor/step-info/step-info.component';
+import { ComponentNewWorkBadgeComponent } from '../../../../../../app/classroom-monitor/component-new-work-badge/component-new-work-badge.component';
+import { WorkgroupNodeStatusComponent } from '../../../../../../app/classroom-monitor/workgroup-node-status/workgroup-node-status.component';
+import { WorkgroupNodeScoreComponent } from '../../shared/workgroupNodeScore/workgroup-node-score.component';
+import { WorkgroupComponentGradingComponent } from '../../workgroup-component-grading/workgroup-component-grading.component';
 
 @Component({
+  imports: [
+    CommonModule,
+    ComponentNewWorkBadgeComponent,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    StepInfoComponent,
+    WorkgroupComponentGradingComponent,
+    WorkgroupNodeStatusComponent,
+    WorkgroupNodeScoreComponent
+  ],
   selector: 'step-item',
+  standalone: true,
   templateUrl: './step-item.component.html',
-  styleUrls: ['./step-item.component.scss'],
+  styleUrl: './step-item.component.scss',
   encapsulation: ViewEncapsulation.None
 })
-export class StepItemComponent implements OnInit {
-  componentIdToHasWork: { [componentId: string]: boolean } = {};
-  componentIdToIsVisible: { [componentId: string]: boolean } = {};
-  components: any[];
-  disabled: boolean;
+export class StepItemComponent {
+  protected componentIdToIsVisible: { [componentId: string]: boolean } = {};
+  protected components: any[];
+  protected disabled: boolean;
   @Input() expand: boolean;
-  hasAlert: boolean;
-  hasNewAlert: boolean;
-  hasNewWork: boolean;
+  protected hasAlert: boolean;
+  protected hasNewAlert: boolean;
+  protected hasNewWork: boolean;
   @Input() inView: boolean;
   @Input() maxScore: number;
   @Input() nodeId: string;
   @Output() onUpdateExpand: any = new EventEmitter();
-  score: any;
+  protected score: any;
   @Input() showScore: boolean;
-  status: any;
-  statusClass: string;
-  statusText: string = '';
+  private status: any;
+  protected statusClass: string;
+  protected statusText: string = '';
   @Input() stepData: any;
-  title: string;
   @Input() workgroupId: number;
 
   constructor(
@@ -45,8 +65,6 @@ export class StepItemComponent implements OnInit {
     private projectService: TeacherProjectService
   ) {}
 
-  ngOnInit(): void {}
-
   ngOnChanges(changesObj: SimpleChanges): void {
     if (changesObj.maxScore) {
       this.maxScore =
@@ -54,24 +72,20 @@ export class StepItemComponent implements OnInit {
     }
     if (changesObj.stepData) {
       const stepData = copy(changesObj.stepData.currentValue);
-      this.title = stepData.title;
       this.hasAlert = stepData.hasAlert;
       this.hasNewAlert = stepData.hasNewAlert;
       this.status = stepData.completionStatus;
       this.score = stepData.score >= 0 ? stepData.score : '-';
       this.components = this.projectService.getComponents(this.nodeId);
-      this.componentIdToHasWork = this.projectService.calculateComponentIdToHasWork(
-        this.components
-      );
       this.componentIdToIsVisible = calculateComponentVisibility(
-        this.componentIdToHasWork,
+        this.projectService.calculateComponentIdToHasWork(this.components),
         stepData.nodeStatus.componentStatuses
       );
     }
     this.update();
   }
 
-  update(): void {
+  private update(): void {
     switch (this.status) {
       case -1:
         this.statusClass = ' ';
@@ -103,14 +117,14 @@ export class StepItemComponent implements OnInit {
     this.disabled = this.status === -1;
   }
 
-  toggleExpand(): void {
+  protected toggleExpand(): void {
     if (this.showScore) {
       const expand = !this.expand;
       this.onUpdateExpand.emit({ nodeId: this.nodeId, value: expand });
     }
   }
 
-  getComponentTypeLabel(type: string): string {
+  protected getComponentTypeLabel(type: string): string {
     return this.componentServiceLookupService.getService(type).getComponentTypeLabel();
   }
 }
diff --git a/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html b/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
index b37720c6455..41e217dd0e0 100644
--- a/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
+++ b/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
@@ -120,8 +120,7 @@ <h2 class="content-head__item">
             [workgroupId]="workgroupId"
             (onUpdateExpand)="onUpdateExpand($event)"
             (waIntersectionObservee)="onIntersection(node.id, $event)"
-          >
-          </step-item>
+          />
         </ng-container>
       </div>
     </mat-list>
diff --git a/src/messages.xlf b/src/messages.xlf
index 22787893513..487aac2186b 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -14009,7 +14009,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">78</context>
+          <context context-type="linenumber">92</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1161299114153631702" datatype="html">
@@ -14024,7 +14024,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">83</context>
+          <context context-type="linenumber">97</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5725893165169390019" datatype="html">
@@ -14039,7 +14039,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">90</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7460018954969135567" datatype="html">
@@ -14061,7 +14061,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">95</context>
+          <context context-type="linenumber">109</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f6081cf997fb77d65144cb8b834506ef855ea13b" datatype="html">
@@ -14153,7 +14153,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">85</context>
+          <context context-type="linenumber">99</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6699405178343319429" datatype="html">
@@ -14164,7 +14164,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
-          <context context-type="linenumber">97</context>
+          <context context-type="linenumber">111</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b9311730cc705aa91140b247c6e4fb58a10174dd" datatype="html">