diff --git a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
index 66fedff8448..24864f04589 100644
--- a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
+++ b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
@@ -1,4 +1,4 @@
-<h5 i18n>Choose the step(s) that you want to import, then select Submit.</h5>
+<h5 i18n>Choose the step(s) that you want to import, then select Next.</h5>
 <p fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
   <strong i18n>Selected unit: {{ project?.metadata.title }}</strong>
   <button
diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
index ecaf4bc2ffd..3af7217d4f2 100644
--- a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
+++ b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
@@ -10,18 +10,15 @@
     }
   </div>
 </ng-template>
-@if (importType === 'step') {
-  <h5 i18n>Choose a unit from which to import step(s).</h5>
-} @else {
-  <h5 i18n>Choose a unit from which to import component(s).</h5>
-}
+<h5 i18n>Choose a unit from which to import step(s).</h5>
 <mat-tab-group mat-stretch-tabs="false">
   <mat-tab label="My Units" i18n-label>
     @if (myProjects) {
       <ng-container
         [ngTemplateOutlet]="projects"
         [ngTemplateOutletContext]="{ projects: myProjects }"
-      />
+      >
+      </ng-container>
     }
   </mat-tab>
   <mat-tab label="Library Units" i18n-label>
@@ -29,15 +26,18 @@ <h5 i18n>Choose a unit from which to import component(s).</h5>
       <ng-container
         [ngTemplateOutlet]="projects"
         [ngTemplateOutletContext]="{ projects: libraryProjects }"
-      />
+      >
+      </ng-container>
     }
   </mat-tab>
 </mat-tab-group>
 <div class="nav-controls">
   <mat-divider />
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
-    <button mat-button color="primary" (click)="goBack()" i18n>Back</button>
+    <button mat-button color="primary" routerLink="../../choose-template" [state]="target" i18n>
+      Back
+    </button>
     <span fxFlex></span>
-    <button mat-button color="primary" (click)="cancel()" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>
 </div>
diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
index b3cb34b41b0..83014b33391 100644
--- a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
+++ b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
@@ -25,7 +25,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
   templateUrl: './choose-import-unit.component.html'
 })
 export class ChooseImportUnitComponent {
-  protected importType: 'step' | 'component';
   protected libraryProjects: any[];
   protected myProjects: any[];
   private subscriptions: Subscription = new Subscription();
@@ -39,13 +38,12 @@ export class ChooseImportUnitComponent {
   ) {}
 
   ngOnInit(): void {
-    this.importType = history.state.importType;
     this.target = history.state;
     this.myProjects = this.configService.getAuthorableProjects();
     this.subscriptions.add(
-      this.projectLibraryService
-        .getLibraryProjects()
-        .subscribe((libraryProjects) => (this.libraryProjects = libraryProjects))
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjects = libraryProjects;
+      })
     );
   }
 
@@ -55,19 +53,7 @@ export class ChooseImportUnitComponent {
 
   protected chooseProject(project: any): void {
     this.target.importProjectId = project.id;
-    this.navigate('../choose-component', '../choose-step');
-  }
-
-  protected goBack(): void {
-    this.navigate('../..', '../../choose-template');
-  }
-
-  protected cancel(): void {
-    this.navigate('../..', '../../..');
-  }
-
-  private navigate(componentUrl: string, stepUrl: string): void {
-    this.router.navigate([this.importType === 'component' ? componentUrl : stepUrl], {
+    this.router.navigate(['../choose-step'], {
       relativeTo: this.route,
       state: this.target
     });
diff --git a/src/app/services/cRaterService.spec.ts b/src/app/services/cRaterService.spec.ts
index 4c16723a510..ddc0728a75d 100644
--- a/src/app/services/cRaterService.spec.ts
+++ b/src/app/services/cRaterService.spec.ts
@@ -6,28 +6,16 @@ import { CRaterIdea } from '../../assets/wise5/components/common/cRater/CRaterId
 import { CRaterScore } from '../../assets/wise5/components/common/cRater/CRaterScore';
 import { RawCRaterResponse } from '../../assets/wise5/components/common/cRater/RawCRaterResponse';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { ProjectService } from '../../assets/wise5/services/projectService';
-import { ComponentContent } from '../../assets/wise5/common/ComponentContent';
 let service: CRaterService;
 let configService: ConfigService;
 let http: HttpTestingController;
-class MockProjectService {
-  getComponent(): ComponentContent {
-    return {} as ComponentContent;
-  }
-}
 
 describe('CRaterService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        ConfigService,
-        CRaterService,
-        { provide: ProjectService, useClass: MockProjectService },
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting()
-      ]
-    });
+    imports: [],
+    providers: [ConfigService, CRaterService, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+});
     http = TestBed.inject(HttpTestingController);
     configService = TestBed.inject(ConfigService);
     service = TestBed.inject(CRaterService);
@@ -35,7 +23,6 @@ describe('CRaterService', () => {
 
   makeCRaterScoringRequest();
   getCRaterItemId();
-  getCRaterRubric();
   isCRaterEnabled();
   isCRaterScoreOnEvent();
   getCRaterFeedbackTextByScore();
@@ -277,24 +264,3 @@ function getDataFromResponse() {
     });
   });
 }
-
-function getCRaterRubric() {
-  describe('getCRaterRubric', () => {
-    let projectService;
-    beforeEach(() => {
-      projectService = TestBed.inject(ProjectService);
-    });
-    it('should get CRater rubric when rubric exists on the component', () => {
-      spyOn(projectService, 'getComponent').and.returnValue({
-        cRaterRubric: { ideas: [{ name: '1', studentText: 'Idea 1' }] }
-      } as unknown as ComponentContent);
-      const cRaterRubric = service.getCRaterRubric('nodeId', 'componentId');
-      expect(cRaterRubric.getStudentTextForIdea('1')).toEqual('Idea 1');
-    });
-    it('should get an empty CRater rubric when rubric does not exists on the component', () => {
-      spyOn(projectService, 'getComponent').and.returnValue({} as unknown as ComponentContent);
-      const cRaterRubric = service.getCRaterRubric('nodeId', 'componentId');
-      expect(cRaterRubric.getStudentTextForIdea('1')).toEqual('1');
-    });
-  });
-}
diff --git a/src/app/student-teacher-common.module.ts b/src/app/student-teacher-common.module.ts
index 4e9e9bdb906..9b00d29d946 100644
--- a/src/app/student-teacher-common.module.ts
+++ b/src/app/student-teacher-common.module.ts
@@ -30,6 +30,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatChipsModule } from '@angular/material/chips';
 import { NotebookModule } from './notebook/notebook.module';
 import { MatSliderModule } from '@angular/material/slider';
+import { DialogResponseComponent } from '../assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component';
 import { DialogResponsesComponent } from '../assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { EditNotebookItemDialogModule } from '../assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.module';
@@ -39,9 +40,9 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 @NgModule({
+  declarations: [DialogResponseComponent, DialogResponsesComponent],
   imports: [
     CommonModule,
-    DialogResponsesComponent,
     DragDropModule,
     EditNotebookItemDialogModule,
     EditorModule,
@@ -80,6 +81,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
   ],
   exports: [
     CommonModule,
+    DialogResponseComponent,
     DialogResponsesComponent,
     DragDropModule,
     EditorModule,
diff --git a/src/app/teacher/authoring-routing.module.ts b/src/app/teacher/authoring-routing.module.ts
index fbfd023edfb..9390f4f4e99 100644
--- a/src/app/teacher/authoring-routing.module.ts
+++ b/src/app/teacher/authoring-routing.module.ts
@@ -154,16 +154,7 @@ const routes: Routes = [
               },
               {
                 path: 'import-component',
-                children: [
-                  {
-                    path: 'choose-component',
-                    component: ChooseImportComponentComponent
-                  },
-                  {
-                    path: 'choose-unit',
-                    component: ChooseImportUnitComponent
-                  }
-                ]
+                children: [{ path: 'choose-component', component: ChooseImportComponentComponent }]
               }
             ]
           },
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
index 8b4f180fe20..c08cdf24dc0 100644
--- a/src/app/teacher/authoring-tool.module.ts
+++ b/src/app/teacher/authoring-tool.module.ts
@@ -13,6 +13,7 @@ import { StudentTeacherCommonModule } from '../student-teacher-common.module';
 import { RecoveryAuthoringComponent } from '../../assets/wise5/authoringTool/recovery-authoring/recovery-authoring.component';
 import { AddLessonConfigureComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component';
 import { ConcurrentAuthorsMessageComponent } from '../../assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component';
+import { ImportComponentModule } from '../../assets/wise5/authoringTool/importComponent/import-component-module';
 import { NodeAdvancedAuthoringModule } from '../../assets/wise5/authoringTool/node/advanced/node-advanced-authoring.module';
 import { NodeAuthoringComponent } from '../../assets/wise5/authoringTool/node/node-authoring/node-authoring.component';
 import { TeacherNodeIconComponent } from '../../assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component';
@@ -60,7 +61,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { AddComponentComponent } from '../../assets/wise5/authoringTool/node/add-component/add-component.component';
 import { SideMenuComponent } from '../../assets/wise5/common/side-menu/side-menu.component';
 import { MainMenuComponent } from '../../assets/wise5/common/main-menu/main-menu.component';
-import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component';
 
 @NgModule({
   declarations: [
@@ -93,7 +93,6 @@ import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool
     AuthoringToolBarComponent,
     ChooseAutomatedAssessmentComponent,
     ChooseCopyNodeLocationComponent,
-    ChooseImportComponentComponent,
     ChooseImportStepComponent,
     ChooseImportUnitComponent,
     ChooseNewNodeTemplateComponent,
@@ -109,6 +108,7 @@ import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool
     MatBadgeModule,
     MatChipsModule,
     MatExpansionModule,
+    ImportComponentModule,
     InsertNodeAfterButtonComponent,
     InsertNodeInsideButtonComponent,
     MainMenuComponent,
diff --git a/src/app/teacher/component-authoring.module.ts b/src/app/teacher/component-authoring.module.ts
index 8e4f0979a71..75a84f5d74a 100644
--- a/src/app/teacher/component-authoring.module.ts
+++ b/src/app/teacher/component-authoring.module.ts
@@ -11,7 +11,7 @@ import { GraphAuthoring } from '../../assets/wise5/components/graph/graph-author
 import { EditHTMLAdvancedComponent } from '../../assets/wise5/components/html/edit-html-advanced/edit-html-advanced.component';
 import { HtmlAuthoring } from '../../assets/wise5/components/html/html-authoring/html-authoring.component';
 import { LabelAuthoring } from '../../assets/wise5/components/label/label-authoring/label-authoring.component';
-import { MatchAuthoringComponent } from '../../assets/wise5/components/match/match-authoring/match-authoring.component';
+import { MatchAuthoring } from '../../assets/wise5/components/match/match-authoring/match-authoring.component';
 import { MultipleChoiceAuthoring } from '../../assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
 import { OpenResponseAuthoringComponent } from '../../assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component';
 import { EditOutsideUrlAdvancedComponent } from '../../assets/wise5/components/outsideURL/edit-outside-url-advanced/edit-outside-url-advanced.component';
@@ -158,6 +158,7 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no
     GraphAuthoring,
     HtmlAuthoring,
     LabelAuthoring,
+    MatchAuthoring,
     OutsideUrlAuthoring,
     PeerChatAuthoringComponent,
     ShowGroupWorkAuthoringComponent,
@@ -172,7 +173,6 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no
     EditComponentConstraintsComponent,
     EditComponentPrompt,
     EditComponentWidthComponent,
-    MatchAuthoringComponent,
     MultipleChoiceAuthoring,
     OpenResponseAuthoringComponent,
     PeerGroupingAuthoringModule,
@@ -244,7 +244,7 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no
     GraphAuthoring,
     HtmlAuthoring,
     LabelAuthoring,
-    MatchAuthoringComponent,
+    MatchAuthoring,
     MultipleChoiceAuthoring,
     OpenResponseAuthoringComponent,
     OutsideUrlAuthoring,
diff --git a/src/app/teacher/component-show-work.module.ts b/src/app/teacher/component-show-work.module.ts
index b33893a04d0..dca0377952b 100644
--- a/src/app/teacher/component-show-work.module.ts
+++ b/src/app/teacher/component-show-work.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { AnimationShowWorkModule } from '../../assets/wise5/components/animation/animation-show-work/animation-show-work.module';
 import { AudioOscillatorShowWorkModule } from '../../assets/wise5/components/audioOscillator/audio-oscillator-show-work/audio-oscillator-show-work.module';
 import { ConceptMapShowWorkModule } from '../../assets/wise5/components/conceptMap/concept-map-show-work/concept-map-show-work.module';
+import { DialogGuidanceShowWorkModule } from '../../assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.module';
 import { DiscussionShowWorkModule } from '../../assets/wise5/components/discussion/discussion-show-work/discussion-show-work.module';
 import { DrawShowWorkModule } from '../../assets/wise5/components/draw/draw-show-work/draw-show-work.module';
 import { EmbeddedShowWorkModule } from '../../assets/wise5/components/embedded/embedded-show-work/embedded-show-work.module';
@@ -11,14 +12,13 @@ import { MatchShowWorkModule } from '../../assets/wise5/components/match/match-s
 import { OpenResponseShowWorkModule } from '../../assets/wise5/components/openResponse/open-response-show-work/open-response-show-work.module';
 import { TableShowWorkModule } from '../../assets/wise5/components/table/table-show-work/table-show-work.module';
 import { MultipleChoiceShowWorkComponent } from '../../assets/wise5/components/multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component';
-import { DialogGuidanceShowWorkComponent } from '../../assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component';
 
 @NgModule({
   imports: [
     AnimationShowWorkModule,
     AudioOscillatorShowWorkModule,
     ConceptMapShowWorkModule,
-    DialogGuidanceShowWorkComponent,
+    DialogGuidanceShowWorkModule,
     DiscussionShowWorkModule,
     DrawShowWorkModule,
     EmbeddedShowWorkModule,
@@ -33,7 +33,7 @@ import { DialogGuidanceShowWorkComponent } from '../../assets/wise5/components/d
     AnimationShowWorkModule,
     AudioOscillatorShowWorkModule,
     ConceptMapShowWorkModule,
-    DialogGuidanceShowWorkComponent,
+    DialogGuidanceShowWorkModule,
     DiscussionShowWorkModule,
     DrawShowWorkModule,
     EmbeddedShowWorkModule,
diff --git a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html
index 4833283ac2e..a25172e603f 100644
--- a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html
+++ b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html
@@ -1,95 +1,132 @@
-<h5 i18n>Choose the component(s) that you want to import, then select Submit.</h5>
-<p fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
-  <strong i18n>Selected unit: {{ project?.metadata.title }}</strong>
-  <button
-    mat-raised-button
-    color="primary"
-    (click)="previewProject()"
-    matTooltip="Preview unit"
-    matTooltipPosition="above"
-    i18n-matTooltip
+<h4 i18n>Import Component(s)</h4>
+<div fxLayoutGap="20px">
+  <span i18n>Choose a unit to import from and then choose which component(s) to import</span>
+</div>
+<mat-form-field class="unit-select">
+  <mat-label i18n>My Units</mat-label>
+  <mat-select
+    [(ngModel)]="importMyProjectId"
+    (ngModelChange)="showMyImportProject(importMyProjectId)"
   >
-    <mat-icon>preview</mat-icon>
-  </button>
-</p>
-@for (item of projectIdToOrder; track item.order) {
-  <div
-    [ngClass]="{
-      groupHeader: item.node.type == 'group',
-      stepHeader: item.node.type != 'group'
-    }"
+    <mat-option *ngFor="let project of myProjectsList" [value]="project.id" i18n>
+      {{
+        project.id +
+          ' - ' +
+          project.name +
+          (project.runId ? ' (Run ID: ' + project.runId + ')' : '')
+      }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+<br />
+<mat-form-field class="unit-select">
+  <mat-label i18n>Library Units</mat-label>
+  <mat-select
+    [(ngModel)]="importLibraryProjectId"
+    (ngModelChange)="showLibraryImportProject(importLibraryProjectId)"
   >
-    @if (item.node.type == 'group') {
-      <h6>{{ item.stepNumber }}: {{ item.node.title }}</h6>
-    } @else {
-      <div fxLayout="row wrap" fxLayoutGap="8px">
-        <span class="step-title">{{ item.stepNumber }}: {{ item.node.title }}</span>
-        <button
-          mat-raised-button
-          color="primary"
-          class="mat-raised-button mat-primary"
-          style="margin-top: -5"
-          (click)="previewNode(item.node)"
-          matTooltip="Preview step"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>preview</mat-icon>
-        </button>
-      </div>
-      @for (component of item.node.components; track component.id; let i = $index) {
-        <div class="componentHeader">
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
-            <div>
-              <mat-checkbox [(ngModel)]="component.checked" color="primary">
-                <span>{{ i + 1 }}. {{ component.type }}</span>
-              </mat-checkbox>
-            </div>
-            <div>
-              <button
-                mat-raised-button
-                color="primary"
-                (click)="previewNode(item.node)"
-                matTooltip="Preview component"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              >
-                <mat-icon>preview</mat-icon>
-              </button>
-            </div>
-          </div>
-        </div>
-      }
-    }
-  </div>
-}
-<div class="nav-controls">
-  <mat-divider />
-  <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
+    <mat-option *ngFor="let project of libraryProjectsList" [value]="project.id" i18n>
+      {{
+        project.id +
+          ' - ' +
+          project.name +
+          (project.runId ? ' (Run ID: ' + project.runId + ')' : '')
+      }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+<br />
+<span *ngIf="importProject != null">
+  <div class="import-message-bar" fxLayoutGap="20px">
+    <span i18n
+      >After you have chosen the component(s) you want to import, click this button to import
+      them</span
+    >
     <button
-      mat-button
+      mat-raised-button
       color="primary"
-      routerLink="../choose-unit"
-      [state]="state"
-      aria-label="Back"
-      i18n-aria-label
-      i18n
+      (click)="importComponents()"
+      matTooltip="Import Component(s)"
+      matTooltipPosition="above"
+      i18n-matTooltip
     >
-      Back
+      <mat-icon>vertical_align_bottom</mat-icon>
     </button>
-    <span fxFlex></span>
-    <button mat-button color="primary" routerLink="../.." i18n>Cancel</button>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
+    <h4>{{ importProject.metadata.title }}</h4>
     <button
       mat-raised-button
       color="primary"
-      (click)="import()"
-      [disabled]="getSelectedComponentsToImport().length == 0 || submitting"
-      class="button--progress"
+      (click)="previewImportProject()"
+      matTooltip="Preview Project"
+      matTooltipPosition="above"
+      i18n-matTooltip
     >
-      @if (submitting) {
-        <mat-progress-bar mode="indeterminate" />
-      }
-      <ng-container i18n>Submit</ng-container>
+      <mat-icon>preview</mat-icon>
     </button>
   </div>
+  <div
+    *ngFor="let importItem of nodesInOrder"
+    [ngClass]="{
+      groupHeader: importItem.node.type === 'group',
+      stepHeader: importItem.node.type !== 'group'
+    }"
+  >
+    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
+      <h6 *ngIf="importItem.order !== 0">
+        {{ importItem.stepNumber }}: {{ importItem.node.title }}
+      </h6>
+      <button
+        mat-raised-button
+        color="primary"
+        *ngIf="importItem.node.type !== 'group'"
+        (click)="previewImportNode(importItem.node)"
+        matTooltip="Preview Step"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>preview</mat-icon>
+      </button>
+    </div>
+    <div
+      *ngFor="let component of importItem.node.components; let i = index"
+      class="componentHeader"
+    >
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px">
+        <div>
+          <mat-checkbox [(ngModel)]="component.checked" color="primary">
+            <span>{{ i + 1 }}. {{ component.type }}</span>
+          </mat-checkbox>
+        </div>
+        <div>
+          <button
+            mat-raised-button
+            color="primary"
+            *ngIf="importItem.node.type !== 'group'"
+            (click)="previewImportNode(importItem.node)"
+            matTooltip="Preview Component"
+            matTooltipPosition="above"
+            i18n-matTooltip
+          >
+            <mat-icon>preview</mat-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="importComponents()"
+    matTooltip="Import Component(s)"
+    matTooltipPosition="above"
+    i18n-matTooltip
+  >
+    <mat-icon>vertical_align_bottom</mat-icon>
+  </button>
+</span>
+<hr />
+<div fxLayout="row">
+  <button mat-button color="primary" (click)="cancel()" aria-label="Cancel" i18n>Cancel</button>
 </div>
diff --git a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.spec.ts b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.spec.ts
index 9cab403146b..d96f145d3a7 100644
--- a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.spec.ts
+++ b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.spec.ts
@@ -1,19 +1,24 @@
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { ChooseImportComponentComponent } from './choose-import-component.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { ConfigService } from '../../../services/configService';
 import { ProjectLibraryService } from '../../../services/projectLibraryService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherWebSocketService } from '../../../services/teacherWebSocketService';
+import { ClassroomStatusService } from '../../../services/classroomStatusService';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
 import { ImportComponentService } from '../../../services/importComponentService';
 import { CopyNodesService } from '../../../services/copyNodesService';
 import { InsertComponentService } from '../../../services/insertComponentService';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
+import { RouterTestingModule } from '@angular/router/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { provideRouter } from '@angular/router';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatButtonHarness } from '@angular/material/button/testing';
 
 let component: ChooseImportComponentComponent;
 const component1 = { id: 'component1', type: 'OpenResponse' };
@@ -24,12 +29,11 @@ const group1 = { id: 'group1', type: 'group', title: '', startId: 'node1', ids:
 const node1 = {
   id: 'node1',
   type: 'node',
-  title: 'First step',
+  title: '',
   components: [component1, component2]
 };
 const project: any = {
   startGroupId: 'group0',
-  metadata: { title: 'Project Title' },
   nodes: [group0, group1, node1],
   inactiveNodes: []
 };
@@ -38,12 +42,17 @@ let projectService: TeacherProjectService;
 describe('ChooseImportComponentComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        ChooseImportComponentComponent,
-        StudentTeacherCommonServicesModule
-      ],
-      providers: [
+    declarations: [ChooseImportComponentComponent],
+    imports: [BrowserAnimationsModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        RouterTestingModule,
+        StudentTeacherCommonServicesModule],
+    providers: [
+        ClassroomStatusService,
+        ConfigService,
         CopyNodesService,
         ImportComponentService,
         InsertComponentService,
@@ -53,37 +62,80 @@ describe('ChooseImportComponentComponent', () => {
         TeacherProjectService,
         TeacherWebSocketService,
         provideHttpClient(withInterceptorsFromDi()),
-        provideRouter([])
-      ]
-    }).compileComponents();
+        provideHttpClientTesting()
+    ]
+}).compileComponents();
   });
 
   beforeEach(() => {
     projectService = TestBed.inject(TeacherProjectService);
-    spyOn(projectService, 'retrieveProjectById').and.resolveTo(project);
-    window.history.pushState({ importType: 'component' }, '', '');
     fixture = TestBed.createComponent(ChooseImportComponentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
-  ngOnInit();
+
+  showMyImportProject();
+  showLibraryImportProject();
+  importComponents();
 });
 
-function ngOnInit() {
-  describe('ngOnInit()', () => {
-    it('should create', fakeAsync(async () => {
-      component.ngOnInit();
+function showMyImportProject() {
+  describe('showMyImportProject()', () => {
+    it('should set my import project', fakeAsync(() => {
+      spyOn(projectService, 'retrieveProjectById').and.returnValue(Promise.resolve(project));
+      component.importLibraryProjectId = 1;
+      component.showMyImportProject(2);
+      expect(component.importLibraryProjectId).toBeNull();
       tick();
-      expect(component).toBeTruthy();
-      const loader = TestbedHarnessEnvironment.loader(fixture);
-      const previewStepButton = await loader.getHarness(
-        MatButtonHarness.with({ selector: '[mattooltip="Preview step"]' })
-      );
-      expect(previewStepButton).toBeTruthy();
-      const previewComponentButton = await loader.getHarness(
-        MatButtonHarness.with({ selector: '[mattooltip="Preview component"]' })
-      );
-      expect(previewComponentButton).toBeTruthy();
+      expectNodesInOrder();
+      expectImportProjectItems();
     }));
   });
 }
+
+function showLibraryImportProject() {
+  describe('showLibraryImportProject()', () => {
+    it('should set library import project', fakeAsync(() => {
+      spyOn(projectService, 'retrieveProjectById').and.returnValue(Promise.resolve(project));
+      component.importMyProjectId = 1;
+      component.showLibraryImportProject(2);
+      expect(component.importMyProjectId).toBeNull();
+      tick();
+      expectNodesInOrder();
+      expectImportProjectItems();
+    }));
+  });
+}
+
+function expectNodesInOrder() {
+  expect(component.nodesInOrder).toEqual([
+    { order: 0, node: group0, stepNumber: '' },
+    { order: 1, node: group1, stepNumber: '1' },
+    { order: 2, node: node1, stepNumber: '1.1' }
+  ]);
+}
+
+function expectImportProjectItems() {
+  expect(component.importProjectItems).toEqual([{ order: 2, node: node1, stepNumber: '1.1' }]);
+}
+
+function importComponents() {
+  describe('importComponents()', () => {
+    it('when no components are selected, should alert message', () => {
+      const alertSpy = spyOn(window, 'alert');
+      component.importComponents();
+      expect(alertSpy).toHaveBeenCalledWith('Please select a component to import.');
+    });
+
+    xit('when a component is selected, should import component', () => {
+      const importProjectId = 1;
+      const spy = spyOn(TestBed.inject(ImportComponentService), 'importComponents').and.stub();
+      component.importProjectId = importProjectId;
+      const node = JSON.parse(JSON.stringify(node1));
+      node.components[0].checked = true;
+      component.importProjectItems = [{ order: 2, node: node, stepNumber: '1.1' }];
+      component.importComponents();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+}
diff --git a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
index 8b876fdc044..acae617ce3f 100644
--- a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
+++ b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
@@ -1,105 +1,136 @@
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ConfigService } from '../../../services/configService';
 import { TeacherDataService } from '../../../services/teacherDataService';
+import { ProjectLibraryService } from '../../../services/projectLibraryService';
 import { Component, OnInit } from '@angular/core';
 import { ImportComponentService } from '../../../services/importComponentService';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
-  imports: [
-    CommonModule,
-    FormsModule,
-    FlexLayoutModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatIconModule,
-    MatProgressBarModule,
-    MatTooltipModule,
-    RouterModule
-  ],
   selector: 'choose-import-component',
-  standalone: true,
-  styleUrl: './choose-import-component.component.scss',
-  templateUrl: './choose-import-component.component.html'
+  templateUrl: './choose-import-component.component.html',
+  styleUrls: ['./choose-import-component.component.scss']
 })
 export class ChooseImportComponentComponent implements OnInit {
+  importLibraryProjectId: number;
+  importMyProjectId: number;
   protected importProject: any = null;
-  private importProjectId: number;
+  importProjectId: number;
+  importProjectItems: any = [];
+  protected libraryProjectsList: any = [];
   protected myProjectsList: any = [];
-  protected project: any;
-  protected projectIdToOrder: any;
-  private projectItems: any[] = [];
-  protected state: any;
-  protected submitting: boolean;
+  nodesInOrder: any[] = [];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
     private dataService: TeacherDataService,
     private importComponentService: ImportComponentService,
     private projectAssetService: ProjectAssetService,
+    private projectLibraryService: ProjectLibraryService,
     private projectService: TeacherProjectService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
 
   ngOnInit(): void {
-    this.state = history.state;
-    this.importProjectId = this.state.importProjectId;
-    this.projectService.retrieveProjectById(this.importProjectId).then((projectJSON) => {
-      this.project = projectJSON;
-      const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.project);
-      this.projectIdToOrder = Object.values(nodeOrderOfProject.idToOrder)
-        .slice(1)
-        .filter((item: any) => item.node.components?.length > 0);
-      this.projectItems = nodeOrderOfProject.nodes;
-    });
+    this.importProjectItems = [];
+    this.importMyProjectId = null;
+    this.importLibraryProjectId = null;
+    this.importProjectId = null;
+    this.importProject = null;
+    this.myProjectsList = this.configService.getAuthorableProjects();
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjectsList = libraryProjects;
+      })
+    );
   }
 
-  protected previewProject(): void {
-    window.open(`${this.project.previewProjectURL}`);
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
-  protected previewNode(node: any): void {
-    window.open(`${this.project.previewProjectURL}/${node.id}`);
+  showMyImportProject(importProjectId: number): void {
+    this.importLibraryProjectId = null;
+    this.showImportProject(importProjectId);
   }
 
-  protected import(): void {
-    this.importComponentService
-      .importComponents(
-        this.getSelectedComponentsToImport(),
-        this.importProjectId,
-        this.dataService.getCurrentNodeId(),
-        history.state.insertAfterComponentId
-      )
-      .subscribe((newComponents) => {
-        this.projectService.saveProject();
-        // refresh the project assets in case any of the imported components also imported assets
-        this.projectAssetService.retrieveProjectAssets();
-        this.router.navigate(['../..'], {
-          relativeTo: this.route,
-          state: {
-            projectId: this.configService.getProjectId(),
-            nodeId: this.dataService.getCurrentNodeId(),
-            newComponents: newComponents
-          }
-        });
+  showLibraryImportProject(importProjectId: number): void {
+    this.importMyProjectId = null;
+    this.showImportProject(importProjectId);
+  }
+
+  private showImportProject(importProjectId: number): void {
+    this.importProjectId = importProjectId;
+    this.projectService.retrieveProjectById(this.importProjectId).then((projectJSON: any) => {
+      this.importProject = projectJSON;
+      const orderData = this.projectService.getNodeOrderOfProject(this.importProject);
+      this.nodesInOrder = Object.values(orderData.idToOrder);
+      this.importProjectItems = orderData.nodes.filter((nodeOrder: any) => {
+        return nodeOrder.node.type !== 'group';
       });
+    });
+  }
+
+  importComponents(): void {
+    const selectedComponents = this.getSelectedComponentsToImport();
+    if (selectedComponents.length === 0) {
+      alert($localize`Please select a component to import.`);
+    } else {
+      this.importComponentService
+        .importComponents(
+          selectedComponents,
+          this.importProjectId,
+          this.dataService.getCurrentNodeId(),
+          history.state.insertAfterComponentId
+        )
+        .subscribe((newComponents) => {
+          this.projectService.saveProject();
+          // refresh the project assets in case any of the imported components also imported assets
+          this.projectAssetService.retrieveProjectAssets();
+          this.router.navigate(['../..'], {
+            relativeTo: this.route,
+            state: {
+              projectId: this.configService.getProjectId(),
+              nodeId: this.dataService.getCurrentNodeId(),
+              newComponents: newComponents
+            }
+          });
+        });
+    }
   }
 
-  protected getSelectedComponentsToImport(): any[] {
-    return this.projectItems
-      .flatMap((item) => item.node.components)
-      .filter((component) => component?.checked);
+  private getSelectedComponentsToImport(): any[] {
+    const selectedComponents = [];
+    for (const item of this.importProjectItems) {
+      for (const component of item.node.components) {
+        if (component.checked) {
+          delete component.checked;
+          selectedComponents.push(component);
+        }
+      }
+    }
+    return selectedComponents;
+  }
+
+  protected previewImportProject(): void {
+    window.open(`${this.importProject.previewProjectURL}`);
+  }
+
+  protected previewImportNode(node: any): void {
+    window.open(`${this.importProject.previewProjectURL}/${node.id}`);
+  }
+
+  protected cancel(): void {
+    this.router.navigate(['../..'], {
+      relativeTo: this.route,
+      state: {
+        projectId: this.configService.getProjectId(),
+        nodeId: this.dataService.getCurrentNodeId()
+      }
+    });
   }
 }
diff --git a/src/assets/wise5/authoringTool/importComponent/import-component-module.ts b/src/assets/wise5/authoringTool/importComponent/import-component-module.ts
new file mode 100644
index 00000000000..0acdfaf080e
--- /dev/null
+++ b/src/assets/wise5/authoringTool/importComponent/import-component-module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { ChooseImportComponentComponent } from './choose-import-component/choose-import-component.component';
+import { StudentTeacherCommonModule } from '../../../../app/student-teacher-common.module';
+
+@NgModule({
+  declarations: [ChooseImportComponentComponent],
+  exports: [ChooseImportComponentComponent],
+  imports: [StudentTeacherCommonModule]
+})
+export class ImportComponentModule {}
diff --git a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts
index 31530be756e..0ba5b9c0ab9 100644
--- a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts
+++ b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.ts
@@ -64,10 +64,9 @@ export class AddComponentButtonComponent {
       .pipe(filter((componentType) => componentType != null))
       .subscribe(({ action, componentType }) => {
         if (action === 'import') {
-          this.router.navigate(['import-component/choose-unit'], {
+          this.router.navigate(['import-component/choose-component'], {
             relativeTo: this.route,
             state: {
-              importType: 'component',
               insertAfterComponentId: afterComponent
             }
           });
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component.ts
index 5654a18f6bb..2718bad6ee2 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component.ts
@@ -14,6 +14,7 @@ import { AiChatGradingModule } from '../../components/aiChat/ai-chat-grading/ai-
 import { AnimationGradingModule } from '../../components/animation/animation-grading/animation-grading.module';
 import { AudioOscillatorGradingModule } from '../../components/audioOscillator/audio-oscillator-grading/audio-oscillator-grading.module';
 import { ConceptMapGradingModule } from '../../components/conceptMap/concept-map-grading/concept-map-grading.module';
+import { DialogGuidanceGradingModule } from '../../components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.module';
 import { DiscussionGradingModule } from '../../components/discussion/discussion-grading/discussion-grading.module';
 import { DrawGradingModule } from '../../components/draw/draw-grading/draw-grading.module';
 import { EmbeddedGradingModule } from '../../components/embedded/embedded-grading/embedded-grading.module';
@@ -26,7 +27,6 @@ import { ShowGroupWorkGradingModule } from '../../components/showGroupWork/show-
 import { TableGradingModule } from '../../components/table/table-grading/table-grading.module';
 import { ShowMyWorkGradingModule } from '../../components/showMyWork/show-my-work-grading/show-my-work-grading.module';
 import { MultipleChoiceGradingComponent } from '../../components/multipleChoice/multiple-choice-grading/multiple-choice-grading.component';
-import { DialogGuidanceGradingComponent } from '../../components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component';
 
 @Component({
   imports: [
@@ -34,7 +34,7 @@ import { DialogGuidanceGradingComponent } from '../../components/dialogGuidance/
     AnimationGradingModule,
     AudioOscillatorGradingModule,
     ConceptMapGradingModule,
-    DialogGuidanceGradingComponent,
+    DialogGuidanceGradingModule,
     DiscussionGradingModule,
     DrawGradingModule,
     EmbeddedGradingModule,
diff --git a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
index 2bcbe50c1b9..126e8ea742b 100644
--- a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
+++ b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
@@ -49,7 +49,7 @@
         <tbody>
           @for (student of sortedStudents; track $index) {
             @if (isWorkgroupShown(student)) {
-              <tr class="workgroup-row button" (click)="showStudentGradingView(student)">
+              <tr class="list-item workgroup-row button" (click)="showStudentGradingView(student)">
                 <td class="center">{{ student.workgroupId }}</td>
                 @if (permissions.canViewStudentNames) {
                   <td class="heavy td--max-width">{{ student.firstName }}</td>
diff --git a/src/assets/wise5/common/ComponentContent.ts b/src/assets/wise5/common/ComponentContent.ts
index a9b7e3789b9..423a719bd0d 100644
--- a/src/assets/wise5/common/ComponentContent.ts
+++ b/src/assets/wise5/common/ComponentContent.ts
@@ -1,4 +1,3 @@
-import { CRaterRubric } from '../components/common/cRater/CRaterRubric';
 import { QuestionBank } from '../components/peerChat/peer-chat-question-bank/QuestionBank';
 import { DynamicPrompt } from '../directives/dynamic-prompt/DynamicPrompt';
 
@@ -6,7 +5,6 @@ export interface ComponentContent {
   id: string;
   connectedComponents?: any[];
   constraints?: any[];
-  cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
   maxScore?: number;
diff --git a/src/assets/wise5/components/Components.ts b/src/assets/wise5/components/Components.ts
index f9c3553ab3a..3441ebfae9d 100644
--- a/src/assets/wise5/components/Components.ts
+++ b/src/assets/wise5/components/Components.ts
@@ -30,7 +30,7 @@ import { HtmlStudentComponent } from './html/html-student/html-student.component
 import { LabelAuthoring } from './label/label-authoring/label-authoring.component';
 import { LabelGradingComponent } from './label/label-grading/label-grading.component';
 import { LabelStudentComponent } from './label/label-student/label-student.component';
-import { MatchAuthoringComponent } from './match/match-authoring/match-authoring.component';
+import { MatchAuthoring } from './match/match-authoring/match-authoring.component';
 import { MatchGradingComponent } from './match/match-grading/match-grading.component';
 import { MatchStudent } from './match/match-student/match-student.component';
 import { MultipleChoiceAuthoring } from './multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
@@ -100,11 +100,7 @@ export const components = {
     grading: LabelGradingComponent,
     student: LabelStudentComponent
   },
-  Match: {
-    authoring: MatchAuthoringComponent,
-    grading: MatchGradingComponent,
-    student: MatchStudent
-  },
+  Match: { authoring: MatchAuthoring, grading: MatchGradingComponent, student: MatchStudent },
   MultipleChoice: {
     authoring: MultipleChoiceAuthoring,
     grading: MultipleChoiceGradingComponent,
diff --git a/src/assets/wise5/components/common/cRater/CRaterIdea.ts b/src/assets/wise5/components/common/cRater/CRaterIdea.ts
index 4f7077254ac..dbf299056d9 100644
--- a/src/assets/wise5/components/common/cRater/CRaterIdea.ts
+++ b/src/assets/wise5/components/common/cRater/CRaterIdea.ts
@@ -2,7 +2,6 @@ export class CRaterIdea {
   name: string;
   detected: boolean;
   characterOffsets: any[];
-  studentText?: string;
 
   constructor(name: string, detected: boolean) {
     this.name = name;
diff --git a/src/assets/wise5/components/common/cRater/CRaterRubric.ts b/src/assets/wise5/components/common/cRater/CRaterRubric.ts
deleted file mode 100644
index c4e6df869a7..00000000000
--- a/src/assets/wise5/components/common/cRater/CRaterRubric.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CRaterIdea } from './CRaterIdea';
-
-export class CRaterRubric {
-  private ideas: CRaterIdea[] = [];
-
-  constructor(rubric: any = { ideas: [] }) {
-    this.ideas = rubric.ideas;
-  }
-
-  getStudentTextForIdea(ideaId: string): string {
-    return this.ideas.find((idea) => idea.name === ideaId)?.studentText ?? ideaId;
-  }
-}
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.html b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.html
new file mode 100644
index 00000000000..70ffa0d88fc
--- /dev/null
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.html
@@ -0,0 +1,7 @@
+<dialog-guidance-show-work
+  [nodeId]="nodeId"
+  [componentId]="componentId"
+  [componentState]="componentState"
+  [isRevision]="isRevision"
+>
+</dialog-guidance-show-work>
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.ts
index cc0b6aa45bd..131ee51659b 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component.ts
@@ -1,16 +1,8 @@
 import { Component } from '@angular/core';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
-import { DialogGuidanceShowWorkComponent } from '../dialog-guidance-show-work/dialog-guidance-show-work.component';
 
 @Component({
-  imports: [DialogGuidanceShowWorkComponent],
   selector: 'dialog-guidance-grading',
-  standalone: true,
-  template: `<dialog-guidance-show-work
-    [nodeId]="nodeId"
-    [componentId]="componentId"
-    [componentState]="componentState"
-    [isRevision]="isRevision"
-  />`
+  templateUrl: 'dialog-guidance-grading.component.html'
 })
 export class DialogGuidanceGradingComponent extends ComponentShowWorkDirective {}
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.module.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.module.ts
new file mode 100644
index 00000000000..17ac3bc1211
--- /dev/null
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { DialogGuidanceShowWorkModule } from '../dialog-guidance-show-work/dialog-guidance-show-work.module';
+import { DialogGuidanceGradingComponent } from './dialog-guidance-grading.component';
+
+@NgModule({
+  declarations: [DialogGuidanceGradingComponent],
+  imports: [DialogGuidanceShowWorkModule],
+  exports: [DialogGuidanceGradingComponent]
+})
+export class DialogGuidanceGradingModule {}
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.html b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.html
new file mode 100644
index 00000000000..cb713371d44
--- /dev/null
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.html
@@ -0,0 +1,3 @@
+<mat-card appearance="outlined" class="mat-elevation-z2">
+  <dialog-responses [responses]="responses" [computerAvatar]="computerAvatar"></dialog-responses>
+</mat-card>
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.spec.ts
index 70aa7c55c22..6444959a3f3 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.spec.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.spec.ts
@@ -1,5 +1,9 @@
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
 import { DialogGuidanceShowWorkComponent } from './dialog-guidance-show-work.component';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
@@ -9,9 +13,11 @@ describe('DialogGuidanceShowWorkComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DialogGuidanceShowWorkComponent, StudentTeacherCommonServicesModule],
-      providers: [provideHttpClient(withInterceptorsFromDi())]
-    }).compileComponents();
+    declarations: [DialogGuidanceShowWorkComponent, DialogResponsesComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
+    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+}).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts
index afa7c66b92f..97858bde2f8 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts
@@ -4,28 +4,19 @@ import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
-import { MatCardModule } from '@angular/material/card';
-import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
+import { DialogResponse } from '../DialogResponse';
 
 @Component({
-  imports: [DialogResponsesComponent, MatCardModule],
   selector: 'dialog-guidance-show-work',
-  standalone: true,
+  templateUrl: './dialog-guidance-show-work.component.html',
   styleUrls: [
     '../dialog-guidance-student/dialog-guidance-student.component.scss',
     './dialog-guidance-show-work.component.scss'
-  ],
-  template: `
-    <mat-card appearance="outlined" class="mat-elevation-z2">
-      <dialog-responses
-        [computerAvatar]="computerAvatar"
-        [responses]="componentState.studentData.responses"
-      />
-    </mat-card>
-  `
+  ]
 })
 export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective {
-  protected computerAvatar: ComputerAvatar;
+  computerAvatar: ComputerAvatar;
+  responses: DialogResponse[];
 
   constructor(
     private computerAvatarService: ComputerAvatarService,
@@ -36,6 +27,7 @@ export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective
   }
 
   ngOnInit(): void {
+    this.responses = this.componentState.studentData.responses;
     this.computerAvatar = this.computerAvatarService.getAvatar(
       this.componentState.studentData.computerAvatarId
     );
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.module.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.module.ts
new file mode 100644
index 00000000000..b2648aefb96
--- /dev/null
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { StudentTeacherCommonModule } from '../../../../../app/student-teacher-common.module';
+import { DialogGuidanceShowWorkComponent } from './dialog-guidance-show-work.component';
+
+@NgModule({
+  declarations: [DialogGuidanceShowWorkComponent],
+  imports: [StudentTeacherCommonModule],
+  exports: [DialogGuidanceShowWorkComponent]
+})
+export class DialogGuidanceShowWorkModule {}
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts
index 18082d85aa8..60e47ef040a 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.spec.ts
@@ -50,27 +50,20 @@ function createDialogGuidanceComponent(isComputerAvatarEnabled: boolean): Dialog
 describe('DialogGuidanceStudentComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DialogGuidanceStudentComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      imports: [
-        BrowserAnimationsModule,
+    declarations: [DialogGuidanceStudentComponent, DialogResponsesComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [BrowserAnimationsModule,
         ChatInputComponent,
         ComponentHeaderComponent,
-        DialogResponsesComponent,
         FormsModule,
         MatCardModule,
         MatDialogModule,
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
-        StudentTeacherCommonServicesModule
-      ],
-      providers: [
-        DialogGuidanceFeedbackService,
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting()
-      ]
-    }).compileComponents();
+        StudentTeacherCommonServicesModule],
+    providers: [DialogGuidanceFeedbackService, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+}).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html
index a377fff49a6..a28c6b8eace 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html
+++ b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html
@@ -1,5 +1,5 @@
 <div fxLayoutAlign="{{ isStudent ? 'end' : 'start' }} start" fxLayoutGap="4px">
-  @if (isStudent) {
+  <ng-container *ngIf="isStudent">
     <mat-icon
       class="mat-36"
       [ngStyle]="{ color: avatarColor }"
@@ -8,8 +8,9 @@
       fxFlexOrder="2"
       >account_circle</mat-icon
     >
-  } @else {
-    @if (computerAvatar == null) {
+  </ng-container>
+  <ng-container *ngIf="!isStudent">
+    <ng-container *ngIf="computerAvatar == null">
       <mat-icon
         class="mat-36"
         color="accent"
@@ -17,15 +18,16 @@
         i18n-aria-label
         >smart_toy</mat-icon
       >
-    } @else {
+    </ng-container>
+    <ng-container *ngIf="computerAvatar != null">
       <img
         [src]="computerAvatarImageSrc"
         class="computer-avatar"
         aria-label="Automated guidance response"
         i18n-aria-label
       />
-    }
-  }
+    </ng-container>
+  </ng-container>
   <div fxFlex fxLayoutAlign="{{ isStudent ? 'end' : 'start' }}">
     <div
       class="response-text"
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts
index 7e6c41ac93e..f3bf4d55f77 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.spec.ts
@@ -1,5 +1,8 @@
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { DialogResponse } from '../DialogResponse';
 import { DialogResponseComponent } from './dialog-response.component';
@@ -11,9 +14,13 @@ describe('DialogResponseComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DialogResponseComponent, StudentTeacherCommonServicesModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-    }).compileComponents();
+    declarations: [DialogResponseComponent],
+    imports: [FlexLayoutModule,
+        MatDialogModule,
+        MatIconModule,
+        StudentTeacherCommonServicesModule],
+    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+}).compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts
index d9442372bca..af309977649 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.ts
@@ -6,25 +6,24 @@ import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { ConfigService } from '../../../services/configService';
 import { DialogResponse } from '../DialogResponse';
 import { getAvatarColorForWorkgroupId } from '../../../common/workgroup/workgroup';
-import { CommonModule } from '@angular/common';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  imports: [CommonModule, FlexLayoutModule, MatIconModule],
   selector: 'dialog-response',
-  standalone: true,
-  styleUrl: './dialog-response.component.scss',
-  templateUrl: './dialog-response.component.html'
+  templateUrl: './dialog-response.component.html',
+  styleUrls: ['./dialog-response.component.scss']
 })
 export class DialogResponseComponent implements OnInit {
-  protected avatarColor: string;
-  @Input() computerAvatar: ComputerAvatar;
-  protected computerAvatarImageSrc: string;
-  protected displayNames: string;
-  protected isStudent: boolean;
-  @Input() response: DialogResponse;
-  protected text: SafeHtml = '';
+  @Input()
+  computerAvatar: ComputerAvatar;
+
+  @Input()
+  response: DialogResponse;
+
+  avatarColor: string;
+  computerAvatarImageSrc: string;
+  displayNames: string;
+  isStudent: boolean;
+  text: SafeHtml = '';
 
   constructor(
     private computerAvatarService: ComputerAvatarService,
@@ -33,19 +32,20 @@ export class DialogResponseComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.text = this.wiseLinkService.generateHtmlWithWiseLink(this.response.text);
     this.isStudent = this.response.user === 'Student';
     if (this.isStudent) {
-      this.displayNames = this.configService
-        .getStudentFirstNamesByWorkgroupId(this.response.workgroupId)
-        .join(', ');
       this.avatarColor = getAvatarColorForWorkgroupId(this.response.workgroupId);
+      const firstNames = this.configService.getStudentFirstNamesByWorkgroupId(
+        this.response.workgroupId
+      );
+      this.displayNames = firstNames.join(', ');
     } else {
       this.displayNames = this.computerAvatar.name;
-      if (this.computerAvatar != null) {
-        this.computerAvatarImageSrc =
-          this.computerAvatarService.getAvatarsPath() + this.computerAvatar.image;
-      }
     }
+    if (this.computerAvatar != null) {
+      this.computerAvatarImageSrc =
+        this.computerAvatarService.getAvatarsPath() + this.computerAvatar.image;
+    }
+    this.text = this.wiseLinkService.generateHtmlWithWiseLink(this.response.text);
   }
 }
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.html b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.html
index d1f65b41f34..0514dd4b28e 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.html
+++ b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.html
@@ -1,6 +1,12 @@
-@for (response of responses; track response) {
-  <dialog-response [response]="response" [computerAvatar]="computerAvatar" />
-}
-@if (isWaitingForComputerResponse) {
-  <dialog-response [response]="{ text: '...' }" [computerAvatar]="computerAvatar" />
-}
+<dialog-response
+  *ngFor="let response of responses"
+  [response]="response"
+  [computerAvatar]="computerAvatar"
+>
+</dialog-response>
+<dialog-response
+  *ngIf="isWaitingForComputerResponse"
+  [response]="{ text: '...' }"
+  [computerAvatar]="computerAvatar"
+>
+</dialog-response>
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.spec.ts
index 00e0a9c4e9b..7379406f3ac 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.spec.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.spec.ts
@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { DialogResponsesComponent } from './dialog-responses.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('DialogResponsesComponent', () => {
   let component: DialogResponsesComponent;
@@ -7,7 +9,9 @@ describe('DialogResponsesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DialogResponsesComponent]
+      declarations: [DialogResponsesComponent],
+      imports: [ComponentHeaderComponent],
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
 
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.ts
index a3658fd6125..6c1290c8c5f 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component.ts
@@ -1,18 +1,23 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ComputerAvatar } from '../../../common/computer-avatar/ComputerAvatar';
 import { DialogResponse } from '../DialogResponse';
-import { DialogResponseComponent } from '../dialog-response/dialog-response.component';
-import { CommonModule } from '@angular/common';
 
 @Component({
-  imports: [CommonModule, DialogResponseComponent],
   selector: 'dialog-responses',
-  standalone: true,
-  styleUrl: './dialog-responses.component.scss',
-  templateUrl: './dialog-responses.component.html'
+  templateUrl: './dialog-responses.component.html',
+  styleUrls: ['./dialog-responses.component.scss']
 })
-export class DialogResponsesComponent {
-  @Input() computerAvatar: ComputerAvatar;
-  @Input() isWaitingForComputerResponse: boolean;
-  @Input() responses: DialogResponse[] = [];
+export class DialogResponsesComponent implements OnInit {
+  @Input()
+  computerAvatar: ComputerAvatar;
+
+  @Input()
+  responses: DialogResponse[] = [];
+
+  @Input()
+  isWaitingForComputerResponse: boolean = false;
+
+  constructor() {}
+
+  ngOnInit(): void {}
 }
diff --git a/src/assets/wise5/components/match/edit-match-advanced/edit-match-advanced.component.ts b/src/assets/wise5/components/match/edit-match-advanced/edit-match-advanced.component.ts
index d965a35a4ee..b5f3dbef4f2 100644
--- a/src/assets/wise5/components/match/edit-match-advanced/edit-match-advanced.component.ts
+++ b/src/assets/wise5/components/match/edit-match-advanced/edit-match-advanced.component.ts
@@ -8,6 +8,6 @@ import { MatchContent } from '../MatchContent';
   styleUrls: ['edit-match-advanced.component.scss']
 })
 export class EditMatchAdvancedComponent extends EditAdvancedComponentComponent {
-  allowedConnectedComponentTypes = ['DialogGuidance', 'Match'];
+  allowedConnectedComponentTypes = ['Match'];
   componentContent: MatchContent;
 }
diff --git a/src/assets/wise5/components/match/match-authoring/match-authoring.component.html b/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
index 28611ff2d44..707943cc1e6 100644
--- a/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
+++ b/src/assets/wise5/components/match/match-authoring/match-authoring.component.html
@@ -1,7 +1,7 @@
 <edit-component-prompt
   [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
-/>
+></edit-component-prompt>
 <p>
   <mat-checkbox
     color="primary"
@@ -10,7 +10,7 @@
     (ngModelChange)="componentChanged()"
     i18n
   >
-    Show source and target buckets side-by-side
+    Show Source and Target Buckets Side-by-Side
   </mat-checkbox>
 </p>
 <p>
@@ -21,7 +21,7 @@
     (ngModelChange)="componentChanged()"
     i18n
   >
-    Show choices after target buckets
+    Show Choices After Target Buckets
   </mat-checkbox>
 </p>
 <p>
@@ -42,161 +42,180 @@
     color="primary"
     class="authoring-button add-button"
     (click)="addChoice()"
-    matTooltip="Add choice"
+    matTooltip="Add Choice"
     matTooltipPosition="above"
     i18n-matTooltip
+    aria-label="Add"
+    i18n-aria-label
   >
     <mat-icon>add</mat-icon>
   </button>
-  @if (componentContent.choices.length === 0) {
-    <div i18n>There are no choices. Click the "Add choice" button to add a choice.</div>
-  }
-  @for (
-    choice of componentContent.choices;
-    track choice.id;
-    let choiceIndex = $index, isFirst = $first, isLast = $last
-  ) {
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <translatable-input
-        [content]="choice"
-        key="value"
-        label="Choice name"
-        i18n-label
-        placeholder="Type text or choose an image"
-        i18n-placeholder
-        (defaultLanguageTextChanged)="inputChange.next($event)"
-        class="name"
-      />
-      <translatable-asset-chooser
-        [content]="choice"
-        key="value"
-        [processAsset]="processSelectedAsset"
-        (defaultLanguageTextChanged)="componentChanged()"
-      />
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        [disabled]="isFirst"
-        (click)="moveChoiceUp(choiceIndex)"
-        matTooltip="Move up"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        [disabled]="isLast"
-        (click)="moveChoiceDown(choiceIndex)"
-        matTooltip="Move down"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        (click)="deleteChoice(choiceIndex)"
-        matTooltip="Delete choice"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-  }
+  <div *ngIf="componentContent.choices.length === 0" i18n>
+    There are no choices. Click the "Add Choice" button to add a choice.
+  </div>
+  <div
+    *ngFor="
+      let choice of componentContent.choices;
+      index as choiceIndex;
+      first as isFirst;
+      last as isLast
+    "
+    fxLayout="row"
+    fxLayoutAlign="start center"
+  >
+    <translatable-input
+      [content]="choice"
+      key="value"
+      label="Choice Name"
+      i18n-label
+      placeholder="Type text or choose an image"
+      i18n-placeholder
+      (defaultLanguageTextChanged)="inputChange.next($event)"
+      class="name"
+    />
+    <translatable-asset-chooser
+      [content]="choice"
+      key="value"
+      [processAsset]="processSelectedAsset"
+      (defaultLanguageTextChanged)="componentChanged()"
+    />
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      [disabled]="isFirst"
+      (click)="moveChoiceUp(choiceIndex)"
+      matTooltip="Move Up"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Up"
+      i18n-aria-label
+    >
+      <mat-icon>arrow_upward</mat-icon>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      [disabled]="isLast"
+      (click)="moveChoiceDown(choiceIndex)"
+      matTooltip="Move Down"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Down"
+      i18n-aria-label
+    >
+      <mat-icon>arrow_downward</mat-icon>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      (click)="deleteChoice(choiceIndex)"
+      matTooltip="Delete Choice"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Delete"
+      i18n-aria-label
+    >
+      <mat-icon>delete</mat-icon>
+    </button>
+  </div>
 </div>
 <div class="section">
   <translatable-input
     [content]="componentContent"
     key="choicesLabel"
-    label="Source bucket name"
+    label="Source Bucket Name"
     i18n-label
     (defaultLanguageTextChanged)="inputChange.next($event)"
-    class="name"
-  />
+    class="name"/>
   <br />
-  <span i18n>Target buckets</span>
+  <span i18n>Target Buckets</span>
   <button
     mat-raised-button
     color="primary"
     class="authoring-button add-button"
     (click)="addBucket()"
-    matTooltip="Add target bucket"
+    matTooltip="Add Target Bucket"
     matTooltipPosition="above"
     i18n-matTooltip
+    aria-label="Add"
+    i18n-aria-label
   >
     <mat-icon>add</mat-icon>
   </button>
-  @if (componentContent.buckets.length === 0) {
-    <div i18n>
-      There are no target buckets. Click the "Add target bucket" button to add a bucket.
-    </div>
-  }
-  @for (
-    bucket of componentContent.buckets;
-    track bucket.id;
-    let bucketIndex = $index, isFirst = $first, isLast = $last
-  ) {
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <translatable-input
-        [content]="bucket"
-        key="value"
-        label="Target bucket name"
-        i18n-label
-        placeholder="Type text or choose an image"
-        i18n-placeholder
-        (defaultLanguageTextChanged)="inputChange.next($event)"
-        class="name"
-      />
-      <translatable-asset-chooser
-        [content]="bucket"
-        key="value"
-        [processAsset]="processSelectedAsset"
-        (defaultLanguageTextChanged)="componentChanged()"
-      />
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        [disabled]="isFirst"
-        (click)="moveBucketUp(bucketIndex)"
-        matTooltip="Move up"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        [disabled]="isLast"
-        (click)="moveBucketDown(bucketIndex)"
-        matTooltip="Move down"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button
-        mat-raised-button
-        color="primary"
-        class="authoring-button"
-        (click)="deleteBucket(bucketIndex)"
-        matTooltip="Delete bucket"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-  }
+  <div *ngIf="componentContent.buckets.length === 0" i18n>
+    There are no target buckets. Click the "Add Target Bucket" button to add a bucket.
+  </div>
+  <div
+    *ngFor="
+      let bucket of componentContent.buckets;
+      index as bucketIndex;
+      first as isFirst;
+      last as isLast
+    "
+    fxLayout="row"
+    fxLayoutAlign="start center"
+  >
+    <translatable-input
+      [content]="bucket"
+      key="value"
+      label="Target Bucket Name"
+      i18n-label
+      placeholder="Type text or choose an image"
+      i18n-placeholder
+      (defaultLanguageTextChanged)="inputChange.next($event)"
+      class="name"
+    />
+    <translatable-asset-chooser
+      [content]="bucket"
+      key="value"
+      [processAsset]="processSelectedAsset"
+      (defaultLanguageTextChanged)="componentChanged()"
+    />
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      [disabled]="isFirst"
+      (click)="moveBucketUp(bucketIndex)"
+      matTooltip="Move Up"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Up"
+      i18n-aria-label
+    >
+      <mat-icon>arrow_upward</mat-icon>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      [disabled]="isLast"
+      (click)="moveBucketDown(bucketIndex)"
+      matTooltip="Move Down"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Down"
+      i18n-aria-label
+    >
+      <mat-icon>arrow_downward</mat-icon>
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      class="authoring-button"
+      (click)="deleteBucket(bucketIndex)"
+      matTooltip="Delete Bucket"
+      matTooltipPosition="above"
+      i18n-matTooltip
+      aria-label="Delete"
+      i18n-aria-label
+    >
+      <mat-icon>delete</mat-icon>
+    </button>
+  </div>
 </div>
 <div class="section">
   <div class="choice-ordered-checkbox">
@@ -210,54 +229,51 @@
       Choices need to be ordered within buckets
     </mat-checkbox>
   </div>
-  @for (bucketFeedback of componentContent.feedback; track $index) {
-    <div class="section">
-      <p i18n>Bucket name: {{ getBucketNameById(bucketFeedback.bucketId) }}</p>
-      @for (choiceFeedback of bucketFeedback.choices; track $index) {
-        <div class="choice-feedback-container notice-bg-bg">
-          <span i18n> Choice: {{ getChoiceTextById(choiceFeedback.choiceId) }} </span>
-          <div fxLayout="row">
-            <translatable-input
-              [content]="choiceFeedback"
-              key="feedback"
-              label="Feedback"
-              i18n-label
-              (defaultLanguageTextChanged)="feedbackChange.next($event)"
-              class="feedback"
-            />
-            <mat-checkbox
-              color="primary"
-              [(ngModel)]="choiceFeedback.isCorrect"
-              (ngModelChange)="isCorrectClicked(choiceFeedback)"
-              layout="row"
-              i18n
-            >
-              Is correct
-            </mat-checkbox>
-          </div>
-          @if (componentContent.ordered && choiceFeedback.isCorrect) {
-            <div fxLayout="row" fxLayoutAlign="start start">
-              <mat-form-field class="position">
-                <mat-label i18n>Position</mat-label>
-                <input
-                  matInput
-                  type="number"
-                  [(ngModel)]="choiceFeedback.position"
-                  (ngModelChange)="feedbackChange.next($event)"
-                />
-              </mat-form-field>
-              <translatable-input
-                [content]="choiceFeedback"
-                key="incorrectPositionFeedback"
-                label="Incorrect position feedback"
-                i18n-label
-                (defaultLanguageTextChanged)="feedbackChange.next($event)"
-                class="incorrect-position-feedback"
-              />
-            </div>
-          }
-        </div>
-      }
+  <div *ngFor="let bucketFeedback of componentContent.feedback" class="section">
+    <p i18n>Bucket Name: {{ getBucketNameById(bucketFeedback.bucketId) }}</p>
+    <div
+      *ngFor="let choiceFeedback of bucketFeedback.choices"
+      class="choice-feedback-container notice-bg-bg"
+    >
+      <span i18n> Choice: {{ getChoiceTextById(choiceFeedback.choiceId) }} </span>
+      <div fxLayout="row">
+        <translatable-input
+          [content]="choiceFeedback"
+          key="feedback"
+          label="Feedback"
+          i18n-label
+          (defaultLanguageTextChanged)="feedbackChange.next($event)"
+          class="feedback"
+        />
+        <mat-checkbox
+          color="primary"
+          [(ngModel)]="choiceFeedback.isCorrect"
+          (ngModelChange)="isCorrectClicked(choiceFeedback)"
+          layout="row"
+          i18n
+        >
+          Is Correct
+        </mat-checkbox>
+      </div>
+      <div *ngIf="componentContent.ordered && choiceFeedback.isCorrect" fxLayout="row" fxLayoutAlign="start start">
+        <mat-form-field class="position">
+          <mat-label i18n>Position</mat-label>
+          <input
+            matInput
+            type="number"
+            [(ngModel)]="choiceFeedback.position"
+            (ngModelChange)="feedbackChange.next($event)"
+          />
+        </mat-form-field>
+        <translatable-input
+          [content]="choiceFeedback"
+          key="incorrectPositionFeedback"
+          label="Incorrect Position Feedback"
+          i18n-label
+          (defaultLanguageTextChanged)="feedbackChange.next($event)"
+          class="incorrect-position-feedback"
+        />
+      </div>
     </div>
-  }
+  </div>
 </div>
diff --git a/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts b/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
index d6007b2ec9b..a38c7334792 100644
--- a/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
+++ b/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
@@ -1,42 +1,31 @@
-import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { Component } from '@angular/core';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component';
-import { FormsModule } from '@angular/forms';
-import { generateRandomKey } from '../../../common/string/string';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { Subject } from 'rxjs';
-import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component';
-import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
+import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
+import { generateRandomKey } from '../../../common/string/string';
+import { ConfigService } from '../../../services/configService';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { MatchService } from '../matchService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
-  imports: [
-    CommonModule,
-    EditComponentPrompt,
-    FlexLayoutModule,
-    FormsModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatIconModule,
-    MatTooltipModule,
-    TranslatableAssetChooserComponent,
-    TranslatableInputComponent
-  ],
-  standalone: true,
-  styleUrl: 'match-authoring.component.scss',
-  templateUrl: 'match-authoring.component.html'
+  selector: 'match-authoring',
+  templateUrl: 'match-authoring.component.html',
+  styleUrls: ['match-authoring.component.scss']
 })
-export class MatchAuthoringComponent extends AbstractComponentAuthoring {
-  private defaultSourceBucketId: string = '0';
-  protected feedbackChange: Subject<string> = new Subject<string>();
-
-  ngOnInit(): void {
-    super.ngOnInit();
+export class MatchAuthoring extends AbstractComponentAuthoring {
+  defaultSourceBucketId: string = '0';
+  feedbackChange: Subject<string> = new Subject<string>();
+
+  constructor(
+    protected configService: ConfigService,
+    private matchService: MatchService,
+    protected nodeService: TeacherNodeService,
+    protected projectAssetService: ProjectAssetService,
+    protected projectService: TeacherProjectService
+  ) {
+    super(configService, nodeService, projectAssetService, projectService);
     this.subscriptions.add(
       this.feedbackChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
         this.turnOnSubmitButtonIfFeedbackExists();
@@ -45,13 +34,13 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     );
   }
 
-  private turnOnSubmitButtonIfFeedbackExists() {
+  turnOnSubmitButtonIfFeedbackExists() {
     if (this.componentHasFeedback()) {
       this.setShowSubmitButtonValue(true);
     }
   }
 
-  protected addChoice(): void {
+  addChoice(): void {
     const newChoice = {
       id: generateRandomKey(),
       value: ''
@@ -61,7 +50,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     this.componentChanged();
   }
 
-  protected addBucket(): void {
+  addBucket(): void {
     const newBucket = {
       id: generateRandomKey(),
       value: '',
@@ -72,7 +61,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     this.componentChanged();
   }
 
-  protected moveChoiceUp(index: number): void {
+  moveChoiceUp(index: number): void {
     if (index != 0) {
       this.moveChoiceUpInChoices(index);
       this.moveChoiceUpInAllBucketFeedback(index);
@@ -80,7 +69,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  protected moveChoiceDown(index: number): void {
+  moveChoiceDown(index: number): void {
     if (index < this.componentContent.choices.length - 1) {
       this.moveChoiceDownInChoices(index);
       this.moveChoiceDownInAllBucketFeedback(index);
@@ -88,29 +77,29 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private moveChoiceUpInChoices(index: number) {
+  moveChoiceUpInChoices(index: number) {
     this.moveChoiceInChoices(index, -1);
   }
 
-  private moveChoiceDownInChoices(index: number) {
+  moveChoiceDownInChoices(index: number) {
     this.moveChoiceInChoices(index, 1);
   }
 
-  private moveChoiceInChoices(index: number, amountToShift: number) {
+  moveChoiceInChoices(index: number, amountToShift: number) {
     const choice = this.componentContent.choices[index];
     this.componentContent.choices.splice(index, 1);
     this.componentContent.choices.splice(index + amountToShift, 0, choice);
   }
 
-  private moveChoiceUpInAllBucketFeedback(index: number) {
+  moveChoiceUpInAllBucketFeedback(index: number) {
     this.moveChoiceInAllBucketFeedback(index, -1);
   }
 
-  private moveChoiceDownInAllBucketFeedback(index: number) {
+  moveChoiceDownInAllBucketFeedback(index: number) {
     this.moveChoiceInAllBucketFeedback(index, 1);
   }
 
-  private moveChoiceInAllBucketFeedback(index: number, amountToShift: number) {
+  moveChoiceInAllBucketFeedback(index: number, amountToShift: number) {
     const feedback = this.componentContent.feedback;
     for (const bucketFeedbackObj of feedback) {
       const bucketFeedbackChoices = bucketFeedbackObj.choices;
@@ -120,7 +109,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  protected deleteChoice(index: number): void {
+  deleteChoice(index: number): void {
     if (confirm($localize`Are you sure you want to delete this choice?`)) {
       const deletedChoice = this.componentContent.choices.splice(index, 1);
       this.removeChoiceFromFeedback(deletedChoice[0].id);
@@ -128,7 +117,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  protected moveBucketUp(index: number): void {
+  moveBucketUp(index: number): void {
     if (index > 0) {
       this.moveBucketUpInBuckets(index);
       this.moveBucketUpInBucketFeedback(index);
@@ -136,7 +125,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  protected moveBucketDown(index: number): void {
+  moveBucketDown(index: number): void {
     if (index < this.componentContent.buckets.length - 1) {
       this.moveBucketDownInBuckets(index);
       this.moveBucketDownInBucketFeedback(index);
@@ -144,29 +133,29 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private moveBucketUpInBuckets(index: number) {
+  moveBucketUpInBuckets(index: number) {
     this.moveBucketInBuckets(index, -1);
   }
 
-  private moveBucketDownInBuckets(index: number) {
+  moveBucketDownInBuckets(index: number) {
     this.moveBucketInBuckets(index, 1);
   }
 
-  private moveBucketInBuckets(index: number, amountToShift: number) {
+  moveBucketInBuckets(index: number, amountToShift: number) {
     const bucket = this.componentContent.buckets[index];
     this.componentContent.buckets.splice(index, 1);
     this.componentContent.buckets.splice(index + amountToShift, 0, bucket);
   }
 
-  private moveBucketUpInBucketFeedback(index: number) {
+  moveBucketUpInBucketFeedback(index: number) {
     this.moveBucketInBucketFeedback(index, -1);
   }
 
-  private moveBucketDownInBucketFeedback(index: number) {
+  moveBucketDownInBucketFeedback(index: number) {
     this.moveBucketInBucketFeedback(index, 1);
   }
 
-  private moveBucketInBucketFeedback(index: number, amountToShift: number) {
+  moveBucketInBucketFeedback(index: number, amountToShift: number) {
     // the bucket feedback index for authored buckets starts at 1 because the source bucket is at 0
     const bucketFeedbackIndex = index + 1;
     const bucketFeedbackObj = this.componentContent.feedback[bucketFeedbackIndex];
@@ -178,7 +167,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     );
   }
 
-  protected deleteBucket(index: number): void {
+  deleteBucket(index: number): void {
     if (confirm($localize`Are you sure you want to delete this bucket?`)) {
       const deletedBucket = this.componentContent.buckets.splice(index, 1);
       if (deletedBucket != null && deletedBucket.length > 0) {
@@ -188,7 +177,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private addChoiceToFeedback(choiceId: string): void {
+  addChoiceToFeedback(choiceId: string): void {
     const feedback = this.componentContent.feedback;
     for (const bucketFeedback of feedback) {
       const feedbackText = '';
@@ -197,7 +186,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private addBucketToFeedback(bucketId: string): void {
+  addBucketToFeedback(bucketId: string): void {
     const feedback = this.componentContent.feedback;
     const bucket = {
       bucketId: bucketId,
@@ -213,7 +202,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     feedback.push(bucket);
   }
 
-  private createFeedbackObject(
+  createFeedbackObject(
     choiceId: string,
     feedback: string,
     isCorrect: boolean,
@@ -229,7 +218,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     };
   }
 
-  private removeChoiceFromFeedback(choiceId: string): void {
+  removeChoiceFromFeedback(choiceId: string): void {
     for (const bucketFeedback of this.componentContent.feedback) {
       bucketFeedback.choices = bucketFeedback.choices.filter((choice) => {
         return choice.choiceId !== choiceId;
@@ -237,7 +226,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private removeBucketFromFeedback(bucketId: string): void {
+  removeBucketFromFeedback(bucketId: string): void {
     const feedback = this.componentContent.feedback;
     for (let f = 0; f < feedback.length; f++) {
       const bucketFeedback = feedback[f];
@@ -250,7 +239,7 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     }
   }
 
-  private componentHasFeedback(): boolean {
+  componentHasFeedback(): boolean {
     for (const feedback of this.componentContent.feedback) {
       for (const choice of feedback.choices) {
         if (choice.isCorrect || this.isNonEmpty(choice.feedback)) {
@@ -261,11 +250,11 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     return false;
   }
 
-  private isNonEmpty(str: string): boolean {
+  isNonEmpty(str: string): boolean {
     return str != null && str != '';
   }
 
-  protected isCorrectClicked(feedback: any): void {
+  isCorrectClicked(feedback: any): void {
     if (!feedback.isCorrect) {
       delete feedback.position;
       delete feedback.incorrectPositionFeedback;
@@ -274,11 +263,11 @@ export class MatchAuthoringComponent extends AbstractComponentAuthoring {
     this.componentChanged();
   }
 
-  protected processSelectedAsset(value: string): string {
+  processSelectedAsset(value: string): string {
     return `<img src="${value}" alt="${value}" />`;
   }
 
-  protected getChoiceTextById(choiceId: string): string {
+  getChoiceTextById(choiceId: string): string {
     const choice = this.componentContent.choices.find((choice) => choice.id === choiceId);
     return choice ? choice.value : null;
   }
diff --git a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html
index 23373e264c7..65ba48f5dcf 100644
--- a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html
+++ b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html
@@ -1,29 +1,37 @@
 <mat-card appearance="outlined" class="match-item">
-  <div fxLayout="row" fxLayoutGap="4px" fxLayoutAlign="start center">
-    <mat-icon *ngIf="!isDisabled" class="text-disabled">drag_indicator</mat-icon>
+  <div fxLayout="row" fxLayoutGap="4px">
+    @if (!isDisabled) {
+      <mat-icon class="text-disabled">drag_indicator</mat-icon>
+    }
     <div class="item-content" [innerHTML]="item.value"></div>
-    <span fxFlex *ngIf="item.studentCreated"></span>
-    <delete-choice-button
-      *ngIf="item.studentCreated"
-      [buckets]="buckets"
-      [isDisabled]="isDisabled"
-      [item]="item"
-      (onItemDeleted)="onStudentDataChanged.next()"
-    />
-  </div>
-  <div
-    *ngIf="item.feedback"
-    class="feedback mat-small text-secondary-bg"
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    fxLayoutGap="4px"
-    [ngClass]="{
-      'success-bg': item.status === 'correct',
-      'info-bg': item.status === 'warn',
-      'warn-bg': item.status === 'incorrect'
-    }"
-  >
-    <match-status-icon *ngIf="item.status" [status]="item.status" />
-    <div [innerHTML]="item.feedback"></div>
+    @if (item.studentCreated) {
+      <span fxFlex></span>
+    }
+    @if (item.studentCreated) {
+      <delete-choice-button
+        [buckets]="buckets"
+        [isDisabled]="isDisabled"
+        [item]="item"
+        (onItemDeleted)="onStudentDataChanged.next()"
+      />
+    }
   </div>
+  @if (item.feedback) {
+    <div
+      class="feedback mat-small text-secondary-bg"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="4px"
+      [ngClass]="{
+        'success-bg': item.status === 'correct',
+        'info-bg': item.status === 'warn',
+        'warn-bg': item.status === 'incorrect'
+      }"
+    >
+      @if (item.status) {
+        <match-status-icon [status]="item.status" />
+      }
+      <div [innerHTML]="item.feedback"></div>
+    </div>
+  }
 </mat-card>
diff --git a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.scss b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.scss
index cfa498eda48..ce679ff5d9e 100644
--- a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.scss
+++ b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.scss
@@ -4,6 +4,8 @@
   }
 
   .item-content {
+    margin-top: 2px;
+
     img {
       max-width: 100%;
       height: auto;
@@ -20,8 +22,4 @@
   match-status-icon {
     display: inherit;
   }
-
-  delete-choice-button {
-    display: inline-flex;
-  }
 }
\ No newline at end of file
diff --git a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts
index b57269a07f1..d2d10e85aab 100644
--- a/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts
+++ b/src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts
@@ -1,24 +1,30 @@
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { DeleteChoiceButtonComponent } from '../delete-choice-button/delete-choice-button.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatchStatusIconComponent } from '../match-status-icon/match-status-icon.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { CommonModule } from '@angular/common';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    DeleteChoiceButtonComponent,
+    FlexLayoutModule,
+    MatCardModule,
+    MatchStatusIconComponent,
+    MatIconModule
+  ],
   selector: 'match-choice-item',
-  templateUrl: 'match-choice-item.component.html',
-  styleUrls: ['match-choice-item.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: 'match-choice-item.component.scss',
+  templateUrl: 'match-choice-item.component.html'
 })
-export class MatchChoiceItem {
-  @Input()
-  buckets: any;
-
-  @Input()
-  hasCorrectAnswer: boolean;
-
-  @Input()
-  isDisabled: boolean;
-
-  @Input()
-  item: any;
-
-  @Output()
-  onStudentDataChanged = new EventEmitter();
+export class MatchChoiceItemComponent {
+  @Input() buckets: any;
+  @Input() hasCorrectAnswer: boolean;
+  @Input() isDisabled: boolean;
+  @Input() item: any;
+  @Output() onStudentDataChanged = new EventEmitter();
 }
diff --git a/src/assets/wise5/components/match/match-common.module.ts b/src/assets/wise5/components/match/match-common.module.ts
index 0356ca3c2ce..bbd138313ff 100644
--- a/src/assets/wise5/components/match/match-common.module.ts
+++ b/src/assets/wise5/components/match/match-common.module.ts
@@ -1,3 +1,4 @@
+import { DeleteChoiceButtonComponent } from './delete-choice-button/delete-choice-button.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
@@ -5,18 +6,16 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatchChoiceItemComponent } from './match-choice-item/match-choice-item.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { DeleteChoiceButtonComponent } from './delete-choice-button/delete-choice-button.component';
-import { MatchChoiceItem } from './match-choice-item/match-choice-item.component';
 import { MatchStatusIconComponent } from './match-status-icon/match-status-icon.component';
 import { MatchFeedbackSectionComponent } from './match-student/match-feedback-section/match-feedback-section.component';
 
 @NgModule({
-  declarations: [MatchChoiceItem],
   imports: [
     CommonModule,
     DeleteChoiceButtonComponent,
@@ -24,6 +23,7 @@ import { MatchFeedbackSectionComponent } from './match-student/match-feedback-se
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatDialogModule,
@@ -41,7 +41,7 @@ import { MatchFeedbackSectionComponent } from './match-student/match-feedback-se
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
-    MatchChoiceItem,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatFormFieldModule,
diff --git a/src/assets/wise5/components/match/match-show-work/match-show-work.component.html b/src/assets/wise5/components/match/match-show-work/match-show-work.component.html
index b5fbd8cbd9c..0076471a3fa 100644
--- a/src/assets/wise5/components/match/match-show-work/match-show-work.component.html
+++ b/src/assets/wise5/components/match/match-show-work/match-show-work.component.html
@@ -29,7 +29,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="sourceBucket.value"></h3>
               [item]="item"
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="true"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>
@@ -68,7 +68,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
                 [item]="item"
                 [hasCorrectAnswer]="hasCorrectAnswer"
                 [isDisabled]="true"
-              ></match-choice-item>
+              />
             </li>
           </ul>
         </div>
diff --git a/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html b/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html
index d079ae60246..b3dcf2f4964 100644
--- a/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html
+++ b/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html
@@ -2,14 +2,20 @@
   <h2 mat-dialog-title i18n>Enter Item Text</h2>
   <mat-dialog-content>
     <mat-form-field style="width: 100%">
-      <input matInput name="choiceText" formControlName="choiceText" (keydown.enter)="save()" />
-      @if (addChoiceFormGroup.controls['choiceText'].hasError('required')) {
-      <mat-error i18n>Item Text required</mat-error>
-      }
+      <input
+        matInput
+        id="choiceText"
+        name="choiceText"
+        formControlName="choiceText"
+        (keydown.enter)="save()"
+      />
+      <mat-error *ngIf="addChoiceFormGroup.controls['choiceText'].hasError('required')" i18n
+        >Item Text required</mat-error
+      >
     </mat-form-field>
   </mat-dialog-content>
   <mat-dialog-actions align="end">
-    <button mat-button type="button" (click)="closeDialog()" i18n>Cancel</button>
+    <button mat-button mat-dialog-close i18n>Cancel</button>
     <button
       mat-flat-button
       color="primary"
diff --git a/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.ts b/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.ts
index cc85c3eacea..b948fd2d194 100644
--- a/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.ts
+++ b/src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.ts
@@ -1,46 +1,22 @@
 import { Component } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-  ReactiveFormsModule
-} from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { MatError, MatFormField } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
-  imports: [
-    MatButtonModule,
-    MatDialogModule,
-    MatError,
-    MatFormField,
-    MatInputModule,
-    ReactiveFormsModule
-  ],
-  standalone: true,
+  selector: 'add-match-choice-dialog',
   templateUrl: 'add-match-choice-dialog.html'
 })
-export class AddMatchChoiceDialogComponent {
-  protected addChoiceFormGroup: FormGroup = this.fb.group({
+export class AddMatchChoiceDialog {
+  addChoiceFormGroup: FormGroup = this.fb.group({
     choiceText: new FormControl('', [Validators.required])
   });
 
-  constructor(
-    private fb: FormBuilder,
-    private dialogRef: MatDialogRef<AddMatchChoiceDialogComponent>
-  ) {}
+  constructor(private fb: FormBuilder, private dialogRef: MatDialogRef<AddMatchChoiceDialog>) {}
 
   protected save(): void {
     const choiceText: string = this.addChoiceFormGroup.get('choiceText').value;
     if (choiceText) {
-      this.closeDialog(choiceText);
+      this.dialogRef.close(choiceText);
     }
   }
-
-  protected closeDialog(text?: string): void {
-    this.dialogRef.close(text);
-  }
 }
diff --git a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html
index 865abc0aa8e..b9953c4e561 100644
--- a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html
+++ b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html
@@ -40,7 +40,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="buckets[0].value"></h3>
             [hasCorrectAnswer]="hasCorrectAnswer"
             [isDisabled]="isDisabled"
             (onStudentDataChanged)="studentDataChanged()"
-          ></match-choice-item>
+          />
         </li>
       </ul>
     </div>
@@ -91,7 +91,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="isDisabled"
               (onStudentDataChanged)="studentDataChanged()"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>
diff --git a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.spec.ts b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.spec.ts
index ae7d4a588e8..cbdaced46a5 100644
--- a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.spec.ts
+++ b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.spec.ts
@@ -134,7 +134,6 @@ describe('MatchStudentDefaultComponent', () => {
   checkAnswer();
   checkAnswerAndDisplayFeedback();
   createComponentStateObject();
-  createMergedComponentState();
   isAuthorHasSpecifiedACorrectPosition();
   getFeedbackObject();
   getCleanedValue();
@@ -446,39 +445,6 @@ function createComponentStateObject() {
   });
 }
 
-function createMergedComponentState() {
-  describe('createMergedComponentState()', () => {
-    it('should add detected ideas to source bucket if componentType is DialogGuidance', () => {
-      const componentState = {
-        componentType: 'DialogGuidance',
-        studentData: {
-          responses: [
-            {
-              ideas: [
-                { name: '1', detected: true },
-                { name: '2', detected: false },
-                { name: '3', detected: false }
-              ]
-            },
-            {
-              ideas: [
-                { name: '1', detected: false },
-                { name: '2', detected: false },
-                { name: '3', detected: true }
-              ]
-            }
-          ]
-        }
-      };
-      expect(component.buckets[0].items.length).toEqual(3);
-      component.createMergedComponentState([componentState]);
-      expect(component.buckets[0].items.length).toEqual(5);
-      expect(component.buckets[0].items[3].value).toEqual('1');
-      expect(component.buckets[0].items[4].value).toEqual('3');
-    });
-  });
-}
-
 function isAuthorHasSpecifiedACorrectPosition() {
   describe('isAuthorHasSpecifiedACorrectPosition', () => {
     it(`should check if author has specified the choice has a correct position when it does
diff --git a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts
index 89a32afd058..47dc8d614bc 100644
--- a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts
+++ b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts
@@ -20,15 +20,13 @@ import { ComponentStudent } from '../../../component-student.component';
 import { ComponentService } from '../../../componentService';
 import { Choice, createChoiceFromNotebookItem } from '../../choice';
 import { MatchService } from '../../matchService';
-import { AddMatchChoiceDialogComponent } from '../add-match-choice-dialog/add-match-choice-dialog';
+import { AddMatchChoiceDialog } from '../add-match-choice-dialog/add-match-choice-dialog';
 import { copy } from '../../../../common/object/object';
 import { MatchCdkDragDrop } from '../MatchCdkDragDrop';
 import { Container } from '../container';
 import { Item } from '../item';
 import { hasConnectedComponent } from '../../../../common/ComponentContent';
 import { Bucket, mergeBucket } from '../../bucket';
-import { CRaterService } from '../../../../services/cRaterService';
-import { CRaterRubric } from '../../../common/cRater/CRaterRubric';
 
 @Component({
   templateUrl: 'match-student-default.component.html',
@@ -52,7 +50,6 @@ export class MatchStudentDefault extends ComponentStudent {
     protected assetService: StudentAssetService,
     protected componentService: ComponentService,
     protected configService: ConfigService,
-    private craterService: CRaterService,
     protected dataService: StudentDataService,
     protected dialog: MatDialog,
     protected matchService: MatchService,
@@ -570,18 +567,11 @@ export class MatchStudentDefault extends ComponentStudent {
 
   createMergedComponentState(componentStates: any[]): any[] {
     const mergedBuckets = [];
-    componentStates.forEach((componentState) => {
-      if (componentState.componentType === 'Match') {
-        for (const bucket of componentState.studentData.buckets) {
-          mergeBucket(mergedBuckets, bucket);
-        }
-      } else if (componentState.componentType === 'DialogGuidance') {
-        this.addIdeasToSourceBucket(
-          componentState.studentData.responses,
-          this.craterService.getCRaterRubric(componentState.nodeId, componentState.componentId)
-        );
+    for (const componentState of componentStates) {
+      for (const bucket of componentState.studentData.buckets) {
+        mergeBucket(mergedBuckets, bucket);
       }
-    });
+    }
     const mergedComponentState: any = this.createNewComponentState();
     mergedComponentState.studentData = {
       buckets: mergedBuckets
@@ -589,23 +579,9 @@ export class MatchStudentDefault extends ComponentStudent {
     return mergedComponentState;
   }
 
-  private addIdeasToSourceBucket(responses: any[], rubric: CRaterRubric): void {
-    responses.forEach((response) => {
-      response.ideas
-        ?.filter((idea) => idea.detected)
-        .forEach((idea) => {
-          if (!this.choices.some((c) => c.id === idea.name)) {
-            const choice = new Choice(idea.name, rubric.getStudentTextForIdea(idea.name));
-            this.choices.push(choice);
-            this.getBucketById(this.sourceBucketId).items.push(choice);
-          }
-        });
-    });
-  }
-
   protected addChoice(): void {
     this.dialog
-      .open(AddMatchChoiceDialogComponent, {
+      .open(AddMatchChoiceDialog, {
         panelClass: 'dialog-sm'
       })
       .afterClosed()
diff --git a/src/assets/wise5/components/match/match-student/match-student.module.ts b/src/assets/wise5/components/match/match-student/match-student.module.ts
index 24fbab686ad..2484abb95bd 100644
--- a/src/assets/wise5/components/match/match-student/match-student.module.ts
+++ b/src/assets/wise5/components/match/match-student/match-student.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { AddChoiceButtonComponent } from './add-choice-button/add-choice-button.component';
-import { AddMatchChoiceDialogComponent } from './add-match-choice-dialog/add-match-choice-dialog';
+import { AddMatchChoiceDialog } from './add-match-choice-dialog/add-match-choice-dialog';
 import { MatchStudent } from './match-student.component';
 import { StudentComponentModule } from '../../../../../app/student/student.component.module';
 import { MatchCommonModule } from '../match-common.module';
@@ -8,13 +8,17 @@ import { MatchStudentChoiceReuse } from './match-student-choice-reuse/match-stud
 import { MatchStudentDefault } from './match-student-default/match-student-default.component';
 
 @NgModule({
-  declarations: [MatchStudent, MatchStudentDefault, MatchStudentChoiceReuse],
+  declarations: [ 
+    AddMatchChoiceDialog,
+    MatchStudent,
+    MatchStudentDefault,
+    MatchStudentChoiceReuse
+  ],
   imports: [
-    AddChoiceButtonComponent,
-    MatchCommonModule,
-    StudentComponentModule,
-    AddMatchChoiceDialogComponent
+    AddChoiceButtonComponent, 
+    MatchCommonModule, 
+    StudentComponentModule
   ],
-  exports: [MatchStudent, AddMatchChoiceDialogComponent]
+  exports: [MatchStudent]
 })
 export class MatchStudentModule {}
diff --git a/src/assets/wise5/components/showWork/show-work-student/show-work-student.component.html b/src/assets/wise5/components/showWork/show-work-student/show-work-student.component.html
index 7465569d17e..905af73f74e 100644
--- a/src/assets/wise5/components/showWork/show-work-student/show-work-student.component.html
+++ b/src/assets/wise5/components/showWork/show-work-student/show-work-student.component.html
@@ -25,7 +25,8 @@
     [nodeId]="nodeId"
     [componentId]="componentId"
     [componentState]="studentWork"
-  />
+  >
+  </dialog-guidance-show-work>
   <discussion-student
     *ngSwitchCase="'Discussion'"
     [nodeId]="nodeId"
diff --git a/src/assets/wise5/components/showWork/show-work-student/show-work-student.module.ts b/src/assets/wise5/components/showWork/show-work-student/show-work-student.module.ts
index 333aba4d6b2..0741ed4b27a 100644
--- a/src/assets/wise5/components/showWork/show-work-student/show-work-student.module.ts
+++ b/src/assets/wise5/components/showWork/show-work-student/show-work-student.module.ts
@@ -3,6 +3,7 @@ import { StudentTeacherCommonModule } from '../../../../../app/student-teacher-c
 import { AnimationShowWorkModule } from '../../animation/animation-show-work/animation-show-work.module';
 import { AudioOscillatorShowWorkModule } from '../../audioOscillator/audio-oscillator-show-work/audio-oscillator-show-work.module';
 import { ConceptMapShowWorkModule } from '../../conceptMap/concept-map-show-work/concept-map-show-work.module';
+import { DialogGuidanceShowWorkModule } from '../../dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.module';
 import { DiscussionStudentModule } from '../../discussion/discussion-student/discussion-student.module';
 import { DrawShowWorkModule } from '../../draw/draw-show-work/draw-show-work.module';
 import { EmbeddedShowWorkModule } from '../../embedded/embedded-show-work/embedded-show-work.module';
@@ -13,7 +14,6 @@ import { OpenResponseShowWorkModule } from '../../openResponse/open-response-sho
 import { TableShowWorkModule } from '../../table/table-show-work/table-show-work.module';
 import { ShowWorkStudentComponent } from './show-work-student.component';
 import { MultipleChoiceShowWorkComponent } from '../../multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component';
-import { DialogGuidanceShowWorkComponent } from '../../dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component';
 
 @NgModule({
   declarations: [ShowWorkStudentComponent],
@@ -22,7 +22,7 @@ import { DialogGuidanceShowWorkComponent } from '../../dialogGuidance/dialog-gui
     AnimationShowWorkModule,
     AudioOscillatorShowWorkModule,
     ConceptMapShowWorkModule,
-    DialogGuidanceShowWorkComponent,
+    DialogGuidanceShowWorkModule,
     DiscussionStudentModule,
     DrawShowWorkModule,
     EmbeddedShowWorkModule,
diff --git a/src/assets/wise5/services/cRaterService.ts b/src/assets/wise5/services/cRaterService.ts
index acd24400161..46a802d8118 100644
--- a/src/assets/wise5/services/cRaterService.ts
+++ b/src/assets/wise5/services/cRaterService.ts
@@ -8,16 +8,10 @@ import { CRaterIdea } from '../components/common/cRater/CRaterIdea';
 import { CRaterScore } from '../components/common/cRater/CRaterScore';
 import { CRaterResponse } from '../components/common/cRater/CRaterResponse';
 import { RawCRaterResponse } from '../components/common/cRater/RawCRaterResponse';
-import { CRaterRubric } from '../components/common/cRater/CRaterRubric';
-import { ProjectService } from './projectService';
 
 @Injectable()
 export class CRaterService {
-  constructor(
-    protected http: HttpClient,
-    protected configService: ConfigService,
-    private projectService: ProjectService
-  ) {}
+  constructor(protected http: HttpClient, protected configService: ConfigService) {}
 
   /**
    * Make a CRater request to score student response
@@ -266,8 +260,4 @@ export class CRaterService {
     }
     return ideas;
   }
-
-  getCRaterRubric(nodeId: string, componentId: string): CRaterRubric {
-    return new CRaterRubric(this.projectService.getComponent(nodeId, componentId).cRaterRubric);
-  }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
index 410c6938919..9afc49f6bf5 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -481,7 +481,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">81</context>
+          <context context-type="linenumber">131</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/peer-grouping/create-new-peer-grouping-dialog/create-new-peer-grouping-dialog.component.html</context>
@@ -541,7 +541,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html</context>
-          <context context-type="linenumber">12</context>
+          <context context-type="linenumber">18</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/dismiss-ambient-notification-dialog/dismiss-ambient-notification-dialog.component.html</context>
@@ -615,6 +615,14 @@
           <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
           <context context-type="linenumber">565</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">88</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">183</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
           <context context-type="linenumber">83</context>
@@ -666,6 +674,14 @@
           <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
           <context context-type="linenumber">579</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">102</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">197</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
           <context context-type="linenumber">95</context>
@@ -769,6 +785,14 @@
           <context context-type="sourcefile">src/assets/wise5/components/label/label-student/label-student.component.html</context>
           <context context-type="linenumber">42</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">118</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">213</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
           <context context-type="linenumber">106</context>
@@ -1202,14 +1226,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
           <context context-type="linenumber">129</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">82</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">169</context>
-        </context-group>
       </trans-unit>
       <trans-unit id="7a91e24cda07c3ccff6a84d88c25de674bf288f0" datatype="html">
         <source>Move down</source>
@@ -1229,14 +1245,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
           <context context-type="linenumber">139</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">94</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">181</context>
-        </context-group>
       </trans-unit>
       <trans-unit id="28b0236983b8c9cde819e9f8dc2f3b85fa419168" datatype="html">
         <source>Add a new rule at the end</source>
@@ -1390,8 +1398,8 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">34</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="c95b122e952942dd5bb4ed9ce932d9b5f23e2453" datatype="html">
-        <source>Choose the step(s) that you want to import, then select Submit.</source>
+      <trans-unit id="aebe90fbb61e57f4a4ea689e1f155a3f58cea25a" datatype="html">
+        <source>Choose the step(s) that you want to import, then select Next.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">1</context>
@@ -1403,10 +1411,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">3</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">3</context>
-        </context-group>
       </trans-unit>
       <trans-unit id="76176dda9f079e8ab3c78d6975eee76b8b3eddad" datatype="html">
         <source>Preview Unit</source>
@@ -1429,6 +1433,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">37</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">85</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="cda31dbd724cf5f4fa7a4274d9120651490c8a8c" datatype="html">
         <source>Back</source>
@@ -1436,14 +1444,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">55</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">39</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">74</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
           <context context-type="linenumber">7</context>
@@ -1487,6 +1487,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">58,60</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
+          <context context-type="linenumber">37,39</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component.html</context>
           <context context-type="linenumber">40,42</context>
@@ -1499,10 +1503,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/configure-automated-assessment/configure-automated-assessment.component.html</context>
           <context context-type="linenumber">31,33</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">77,79</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/structure/jigsaw/jigsaw.component.html</context>
           <context context-type="linenumber">21,23</context>
@@ -1582,10 +1582,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-branch/edit-branch.component.html</context>
           <context context-type="linenumber">58</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">92</context>
-        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/structure/jigsaw/jigsaw.component.html</context>
           <context context-type="linenumber">34</context>
@@ -1630,26 +1626,23 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Choose a unit from which to import step(s).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">14</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="b19d914474f892407ba0da88fef235cef896f171" datatype="html">
-        <source>Choose a unit from which to import component(s).</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c4058ff063f874b650aca76a5d972f11323bb6fb" datatype="html">
         <source>My Units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">15</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library-details.html</context>
           <context context-type="linenumber">1</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
           <context context-type="linenumber">55</context>
@@ -1659,7 +1652,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Library Units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">27</context>
+          <context context-type="linenumber">24</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">23</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e78170d2eb79d84d7927b8df23950715263ae478" datatype="html">
@@ -7819,6 +7816,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
           <context context-type="linenumber">496</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">48</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">143</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html</context>
           <context context-type="linenumber">116</context>
@@ -9839,11 +9844,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">203</context>
+          <context context-type="linenumber">222</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">223</context>
+          <context context-type="linenumber">243</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
@@ -10633,11 +10638,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.ts</context>
-          <context context-type="linenumber">289</context>
+          <context context-type="linenumber">278</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts</context>
-          <context context-type="linenumber">107</context>
+          <context context-type="linenumber">104</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1944363997751399240" datatype="html">
@@ -10963,32 +10968,70 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">162</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="b1ab0950f9676641e46e363ff6a5767fb4c333ef" datatype="html">
-        <source>Choose the component(s) that you want to import, then select Submit.</source>
+      <trans-unit id="549db7a4a511ef9e23b17fa3cd8781e3d8ef45d4" datatype="html">
+        <source>Import Component(s)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
           <context context-type="linenumber">1</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">49</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">122</context>
+        </context-group>
       </trans-unit>
-      <trans-unit id="80a6d9b67649d0c8c4d2eadbced9d10ff7a7ab15" datatype="html">
-        <source>Preview unit</source>
+      <trans-unit id="49ec12864452b1c9eacceae061885c6a935d0235" datatype="html">
+        <source>Choose a unit to import from and then choose which component(s) to import</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="af6b86e1f2a86d77c7134ee5691c9fbba1be335b" datatype="html">
-        <source>Preview step</source>
+      <trans-unit id="8a564c577184aa5b7fda023e8150f397a9ccf2b4" datatype="html">
+        <source> <x id="INTERPOLATION" equiv-text="{{
+        project.id +
+          &apos; - &apos; +
+          project.name +
+          (project.runId ? &apos; (Run ID: &apos; + project.runId + &apos;)&apos; : &apos;&apos;)
+      }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">33</context>
+          <context context-type="linenumber">11,18</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">28,35</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="592715f579b88977a98d277b9d6099afcd72a6fc" datatype="html">
-        <source>Preview component</source>
+      <trans-unit id="007d097a175986bba7109ee6bc1b8d3a644467d6" datatype="html">
+        <source>After you have chosen the component(s) you want to import, click this button to import them</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">42,43</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="ecef2eaad0b70f5bda647b521aa8549d1d0d697c" datatype="html">
+        <source>Preview Project</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">62</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="929954f6e28805c5a7c03aac44c9e48cad2ab3e3" datatype="html">
+        <source>Preview Component</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.html</context>
+          <context context-type="linenumber">108</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3282250240446159022" datatype="html">
+        <source>Please select a component to import.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts</context>
+          <context context-type="linenumber">81</context>
         </context-group>
       </trans-unit>
       <trans-unit id="22f5f4e7d0b3708e7ffceeea8b93b27e8f09ed7b" datatype="html">
@@ -15721,11 +15764,11 @@ Are you sure you want to proceed?</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">17</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/dialogGuidance/dialog-response/dialog-response.component.html</context>
-          <context context-type="linenumber">24</context>
+          <context context-type="linenumber">26</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1b0a0a5ebead467dd5858f68e3eb638d5e92244a" datatype="html">
@@ -15921,6 +15964,14 @@ Are you sure you want to proceed?</source>
           <context context-type="sourcefile">src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html</context>
           <context context-type="linenumber">270</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">91</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">186</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html</context>
           <context context-type="linenumber">163</context>
@@ -15947,6 +15998,14 @@ Are you sure you want to proceed?</source>
           <context context-type="sourcefile">src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html</context>
           <context context-type="linenumber">284</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">105</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
+          <context context-type="linenumber">200</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html</context>
           <context context-type="linenumber">177</context>
@@ -16602,14 +16661,14 @@ Are you ready to receive feedback on this answer?</source>
         <source>Are you sure you want to delete this feedback?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">76</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7484685939884481783" datatype="html">
         <source>Are you sure you want to delete this feedback rule?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">83</context>
         </context-group>
       </trans-unit>
       <trans-unit id="82efdf880fe90640388310171d05401a6fc62663" datatype="html">
@@ -19254,15 +19313,15 @@ Warning: This will delete all existing choices and buckets in this component.</s
           <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="d4049faeed9a3a52b259d48ede97e0993edfb731" datatype="html">
-        <source> Show source and target buckets side-by-side </source>
+      <trans-unit id="8c68a63de4f583b88a1c98b4ba22fe0ef73663fa" datatype="html">
+        <source> Show Source and Target Buckets Side-by-Side </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
           <context context-type="linenumber">12,14</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="9ad09753f4b982ab1cd64c6409d06f640bbafc99" datatype="html">
-        <source> Show choices after target buckets </source>
+      <trans-unit id="407cd2fc9f0a9ea384be98092666895a0b9b9891" datatype="html">
+        <source> Show Choices After Target Buckets </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
           <context context-type="linenumber">23,25</context>
@@ -19286,138 +19345,146 @@ Warning: This will delete all existing choices and buckets in this component.</s
           <context context-type="linenumber">16</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="148e354b0437e7c96b1478d6bf11203207acee63" datatype="html">
-        <source>Add choice</source>
+      <trans-unit id="1fc2618c7ca4b3722929d8739dbf6d9ab4f7dacf" datatype="html">
+        <source>Add Choice</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
           <context context-type="linenumber">45</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7c3ce7a82094034514a489394c6eb1ccfe57b6ad" datatype="html">
-        <source>There are no choices. Click the &quot;Add choice&quot; button to add a choice.</source>
+      <trans-unit id="c43ba5af6629102fd00304401a313ea8a1f8489e" datatype="html">
+        <source> There are no choices. Click the &quot;Add Choice&quot; button to add a choice. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">52</context>
+          <context context-type="linenumber">53,55</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
+          <context context-type="linenumber">29,31</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="9c3d6d0801bea77c2029048d4179d67c398bf63d" datatype="html">
-        <source>Choice name</source>
+      <trans-unit id="3e20a6ecefca9c87d5dedc6e425a571629d232c5" datatype="html">
+        <source>Choice Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">63</context>
+          <context context-type="linenumber">69</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6b4a8fd4b52fd563b4963ab19f34658e069382d7" datatype="html">
         <source>Type text or choose an image</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">65</context>
+          <context context-type="linenumber">71</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">152</context>
+          <context context-type="linenumber">166</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
           <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="039ba2be4fc38b7a69699f1c65ecf3635e60771d" datatype="html">
-        <source>Delete choice</source>
+      <trans-unit id="b75de65916c3254e808d6757d451c2c9abe56d06" datatype="html">
+        <source>Delete Choice</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">105</context>
+          <context context-type="linenumber">115</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7550566c3ceacff96858ee2e038982cbf6ee3849" datatype="html">
-        <source>Source bucket name</source>
+      <trans-unit id="1bc6e061f99432db1b8eec4ff9950d9a1d4db009" datatype="html">
+        <source>Source Bucket Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">118</context>
+          <context context-type="linenumber">129</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="eaa7bf7cd6d20290d7b1f14c520993ccdbc50909" datatype="html">
-        <source>Target buckets</source>
+      <trans-unit id="7d67cd1ec9de433aecc989c79d8dbe6e46bed75e" datatype="html">
+        <source>Target Buckets</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">124</context>
+          <context context-type="linenumber">134</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="07cfa90c45a503a5b15ad58b69877013f33942fa" datatype="html">
-        <source>Add target bucket</source>
+      <trans-unit id="bfa7f4834e7d273288f8e9cab9e1417a5ad0659d" datatype="html">
+        <source>Add Target Bucket</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">130</context>
+          <context context-type="linenumber">140</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="0201acca621879050b2182b214248dedd2274cf4" datatype="html">
-        <source> There are no target buckets. Click the &quot;Add target bucket&quot; button to add a bucket. </source>
+      <trans-unit id="f19596381eebb477dab97b17c96d92468fbebced" datatype="html">
+        <source> There are no target buckets. Click the &quot;Add Target Bucket&quot; button to add a bucket. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">137,139</context>
+          <context context-type="linenumber">148,150</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="089a2071981859c315d5e8e1d6c07305a688488e" datatype="html">
-        <source>Target bucket name</source>
+      <trans-unit id="e36f8feebf8f84ea6d1a1d5db05acaf38556e1f8" datatype="html">
+        <source>Target Bucket Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">150</context>
+          <context context-type="linenumber">164</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="ec05a088b9de10e4b0aa68b79ca83d38b2f8206a" datatype="html">
-        <source>Delete bucket</source>
+      <trans-unit id="b2f29bd0840c2702dc0fc7fb9c0d90b405b5a21d" datatype="html">
+        <source>Delete Bucket</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">192</context>
+          <context context-type="linenumber">210</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f3540227c398d8d2a32067863ec5ad68a4bb8274" datatype="html">
         <source> Choices need to be ordered within buckets </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">209,211</context>
+          <context context-type="linenumber">228,230</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="60fdd129b2bc856bfd0a74e2bfe268336839fe55" datatype="html">
-        <source>Bucket name: <x id="INTERPOLATION" equiv-text="{{ getBucketNameById(bucketFeedback.bucketId) }}"/></source>
+      <trans-unit id="e90158c0cc39ddf1bfd591227d3be680d90b08ed" datatype="html">
+        <source>Bucket Name: <x id="INTERPOLATION" equiv-text="{{ getBucketNameById(bucketFeedback.bucketId) }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">215</context>
+          <context context-type="linenumber">233</context>
         </context-group>
       </trans-unit>
       <trans-unit id="45d72e3062a6f44cf4ba11188a15a1464c298f2e" datatype="html">
         <source> Choice: <x id="INTERPOLATION" equiv-text="{{ getChoiceTextById(choiceFeedback.choiceId) }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">218</context>
+          <context context-type="linenumber">238</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7cdf75961266a52b89f5b5af5ab2e68d4e98efc4" datatype="html">
-        <source> Is correct </source>
+      <trans-unit id="d691ea4cc55c019d5f51686544e8a4976f67e376" datatype="html">
+        <source> Is Correct </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">234,236</context>
+          <context context-type="linenumber">254,256</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
+          <context context-type="linenumber">60,62</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1ba7568bba29f8d8e352f93e67002d0b548eb838" datatype="html">
         <source>Position</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">241</context>
+          <context context-type="linenumber">260</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="d8848ae72b5cdaa6c6a69fb1527324e5f86899dd" datatype="html">
-        <source>Incorrect position feedback</source>
+      <trans-unit id="9f8ca6981e65ef1902817fd074bb92aa4f3cf085" datatype="html">
+        <source>Incorrect Position Feedback</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.html</context>
-          <context context-type="linenumber">252</context>
+          <context context-type="linenumber">271</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2258610804716750608" datatype="html">
         <source>Are you sure you want to delete this choice?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.ts</context>
-          <context context-type="linenumber">124</context>
+          <context context-type="linenumber">113</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts</context>
@@ -19428,7 +19495,7 @@ Warning: This will delete all existing choices and buckets in this component.</s
         <source>Are you sure you want to delete this bucket?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-authoring/match-authoring.component.ts</context>
-          <context context-type="linenumber">182</context>
+          <context context-type="linenumber">171</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3db39135c783da4bb320d5826f4de893f62c7e1b" datatype="html">
@@ -19487,14 +19554,14 @@ Warning: This will delete all existing choices and buckets in this component.</s
         <source>Item Text required</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
       <trans-unit id="20fc98888baf65b5ba9fe9622dc036fa8dec6a5f" datatype="html">
         <source> OK </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/add-match-choice-dialog/add-match-choice-dialog.html</context>
-          <context context-type="linenumber">19,21</context>
+          <context context-type="linenumber">25,27</context>
         </context-group>
       </trans-unit>
       <trans-unit id="ea732b6a6a9d9e2200b82c721f1f0817fe0aa23e" datatype="html">
@@ -19515,14 +19582,14 @@ Warning: This will delete all existing choices and buckets in this component.</s
         <source>Correct bucket but wrong position</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts</context>
-          <context context-type="linenumber">434</context>
+          <context context-type="linenumber">431</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7841430672042223267" datatype="html">
         <source>Correct</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts</context>
-          <context context-type="linenumber">441</context>
+          <context context-type="linenumber">438</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
@@ -19537,7 +19604,7 @@ Warning: This will delete all existing choices and buckets in this component.</s
         <source>Incorrect</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts</context>
-          <context context-type="linenumber">441</context>
+          <context context-type="linenumber">438</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
@@ -19614,13 +19681,6 @@ Warning: This will delete all existing choices in this component.</source>
           <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="c43ba5af6629102fd00304401a313ea8a1f8489e" datatype="html">
-        <source> There are no choices. Click the &quot;Add Choice&quot; button to add a choice. </source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">29,31</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="3f2b2b4a6ec318a31f7f5f9b526480846a27547a" datatype="html">
         <source>Choice Text</source>
         <context-group purpose="location">
@@ -19635,13 +19695,6 @@ Warning: This will delete all existing choices in this component.</source>
           <context context-type="linenumber">58</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="d691ea4cc55c019d5f51686544e8a4976f67e376" datatype="html">
-        <source> Is Correct </source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html</context>
-          <context context-type="linenumber">60,62</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="5317cde482fdb766008de3e1ae09cf0610366abc" datatype="html">
         <source>Optional</source>
         <context-group purpose="location">