diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html
index dffde8abbd6..431b51b8644 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html
@@ -1,5 +1,16 @@
-<div class="component-summary mat-elevation-z1 app-background flex flex-col p-3">
-  <div class="notice !text-start flex justify-between gap-4">
+<ng-template #expandSummaryTpl let-type="type">
+  <button
+    matIconButton
+    class="!absolute top-0 end-0"
+    title="Expand summary"
+    i18n-title
+    (click)="expandSummary(type)"
+  >
+    <mat-icon>fullscreen</mat-icon>
+  </button>
+</ng-template>
+<div class="component-summary notice flex flex-col p-3">
+  <div class="flex justify-between gap-4">
     <div>
       <div i18n>Prompt</div>
       @if (component.prompt) {
@@ -19,59 +30,69 @@
     <peer-group-button [node]="node" [component]="component" />
   </div>
   @if (hasSummaryData) {
-    <div class="flex flex-col sm:flex-row mt-3 gap-3">
+    <div class="flex flex-col md:flex-row mt-3 gap-3">
       @if (hasScoresSummary && hasScoreAnnotation) {
-        <teacher-summary-display
-          [nodeId]="node.id"
-          [componentId]="component.id"
-          [periodId]="periodId"
-          [studentDataType]="'scores'"
-          [source]="source"
-          [chartType]="'column'"
-          [doRender]="true"
-          class="w-full md:w-1/2"
-        />
+        <div class="summary-graph">
+          <teacher-summary-display
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'scores'"
+            [source]="source"
+            [chartType]="'column'"
+            [doRender]="true"
+            class="summary"
+          />
+        </div>
       }
       @if (component?.type === 'MultipleChoice' && hasStudentWork) {
-        <teacher-summary-display
-          [nodeId]="node.id"
-          [componentId]="component.id"
-          [periodId]="periodId"
-          [studentDataType]="'responses'"
-          [source]="source"
-          [highlightCorrectAnswer]="hasCorrectAnswer"
-          [chartType]="component.choiceType === 'multiple' ? 'columnn' : 'pie'"
-          [doRender]="true"
-          class="w-full md:w-1/2"
-        />
+        <div class="summary-graph">
+          <teacher-summary-display
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'responses'"
+            [source]="source"
+            [highlightCorrectAnswer]="hasCorrectAnswer"
+            [chartType]="component.choiceType === 'multiple' ? 'columnn' : 'pie'"
+            [doRender]="true"
+            class="summary"
+          />
+        </div>
       }
       @if (hasIdeaRubricData) {
-        <mat-card appearance="outlined" class="w-full">
-          <mat-card-content>
-            <ideas-summary
-              [nodeId]="node.id"
-              [componentId]="component.id"
-              [periodId]="periodId"
-              [studentDataType]="'responses'"
-              [source]="source"
-              [doRender]="true"
-              [componentType]="component.type"
-            />
-          </mat-card-content>
-        </mat-card>
+        <div class="summary-content">
+          <ng-container
+            [ngTemplateOutlet]="expandSummaryTpl"
+            [ngTemplateOutletContext]="{ type: 'ideas' }"
+          />
+          <ideas-summary
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'responses'"
+            [source]="source"
+            [doRender]="true"
+            [componentType]="component.type"
+            class="summary"
+          />
+        </div>
       }
       @if (component?.type === 'Match') {
-        <mat-card appearance="outlined" class="w-full">
-          <mat-card-content>
-            <match-summary-display
-              [nodeId]="node.id"
-              [componentId]="component.id"
-              [periodId]="periodId"
-              [source]="source"
-              [doRender]="true"
-            />
-          </mat-card-content>
-        </mat-card>
+        <div class="summary-content">
+          <ng-container
+            [ngTemplateOutlet]="expandSummaryTpl"
+            [ngTemplateOutletContext]="{ type: 'match' }"
+          />
+          <match-summary-display
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [source]="source"
+            [doRender]="true"
+            class="summary"
+          />
+        </div>
       }
     </div>
   }
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.scss b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.scss
index c45924fdabe..91d80a8de82 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.scss
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.scss
@@ -1,28 +1,40 @@
-.component-summary {
-  .notice {
-    max-width: none;
-    margin: 0;
-  }
-
-  .mat-body-1 {
-    margin-bottom: 0;
-  }
-
-  .mat-mdc-card-content:last-child {
-    padding-bottom: 12px;
-  }
-
-  .mat-mdc-card-content:first-child {
-    padding-top: 12px;
-  }
-
-  .mat-mdc-card-content {
-    padding: 0 12px;
-  }
-
-  milestone-report-button > *,
-  peer-group-button > * {
-    margin-top: 12px;
-    margin-inline-end: 8px;
-  }
+@use "tailwindcss";
+
+.notice {
+  @apply m-3 !max-w-none !text-start;
+}
+
+.mat-body-1 {
+  margin-bottom: 0;
+}
+
+.mat-mdc-card-content:last-child {
+  padding-bottom: 12px;
+}
+
+.mat-mdc-card-content:first-child {
+  padding-top: 12px;
+}
+
+.mat-mdc-card-content {
+  padding: 0 12px;
 }
+
+milestone-report-button > *,
+peer-group-button > * {
+  margin-top: 12px;
+  margin-inline-end: 8px;
+}
+
+.summary {
+  @apply rounded-md p-3 overflow-hidden bg-white block;
+}
+
+.summary-graph {
+  @apply w-full md:w-1/2 lg:w-1/3;
+}
+
+.summary-content {
+  @apply w-full md:w-auto md:grow-2 relative;
+}
+
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts
index 8ce1d6f55b0..d1f7a810035 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, Input, ViewEncapsulation } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { TeacherSummaryDisplayComponent } from '../../../directives/teacher-summary-display/teacher-summary-display.component';
 import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
 import { SummaryService } from '../../../components/summary/summaryService';
@@ -14,21 +15,31 @@ import { IdeasSummaryComponent } from '../../../directives/teacher-summary-displ
 import { MatchSummaryDisplayComponent } from '../../../directives/teacher-summary-display/match-summary-display/match-summary-display.component';
 import { MatCardModule } from '@angular/material/card';
 import { CRaterService } from '../../../services/cRaterService';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogContent,
+  MatDialogRef
+} from '@angular/material/dialog';
 
 @Component({
   imports: [
     ComponentCompletionComponent,
     IdeasSummaryComponent,
+    MatButtonModule,
     MatCardModule,
+    MatIconModule,
     MatchSummaryDisplayComponent,
     MilestoneReportButtonComponent,
+    NgTemplateOutlet,
     PeerGroupButtonComponent,
     TeacherSummaryDisplayComponent
   ],
   selector: 'component-summary',
   styleUrl: './component-summary.component.scss',
-  templateUrl: './component-summary.component.html',
-  encapsulation: ViewEncapsulation.None
+  templateUrl: './component-summary.component.html'
 })
 export class ComponentSummaryComponent {
   protected avgScore: number;
@@ -48,6 +59,7 @@ export class ComponentSummaryComponent {
     private componentServiceLookupService: ComponentServiceLookupService,
     private cRaterService: CRaterService,
     private dataService: TeacherDataService,
+    private dialog: MatDialog,
     private summaryService: SummaryService
   ) {}
 
@@ -113,4 +125,43 @@ export class ComponentSummaryComponent {
         return soFar;
       }, []);
   }
+
+  protected expandSummary(type: 'ideas' | 'match'): void {
+    this.dialog.open(SummaryDialogComponent, {
+      data: {
+        type: type,
+        node: this.node,
+        component: this.component,
+        periodId: this.periodId,
+        source: this.source,
+        componentType: this.component.type
+      },
+      panelClass: 'summary-dialog'
+    });
+  }
+}
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    IdeasSummaryComponent,
+    MatchSummaryDisplayComponent,
+    MatButtonModule,
+    MatDialogContent,
+    MatIconModule
+  ],
+  styles: `
+    @import 'tailwindcss';
+
+    .summary-dialog {
+      @apply w-full h-full !max-w-[120rem];
+    }
+  `,
+  templateUrl: './summary-dialog.component.html'
+})
+class SummaryDialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<SummaryDialogComponent>
+  ) {}
 }
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/summary-dialog.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/summary-dialog.component.html
new file mode 100644
index 00000000000..75848b81c42
--- /dev/null
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/summary-dialog.component.html
@@ -0,0 +1,24 @@
+<mat-dialog-content>
+  <button matIconButton (click)="dialogRef.close()" class="!absolute top-0 end-0">
+    <mat-icon>fullscreen_exit</mat-icon>
+  </button>
+  @if (data.type === 'ideas') {
+    <ideas-summary
+      [nodeId]="data.node.id"
+      [componentId]="data.component.id"
+      [periodId]="data.periodId"
+      [studentDataType]="'responses'"
+      [source]="data.source"
+      [doRender]="true"
+      [componentType]="data.componentType"
+    />
+  } @else if (data.type === 'match') {
+    <match-summary-display
+      [nodeId]="data.node.id"
+      [componentId]="data.component.id"
+      [periodId]="data.periodId"
+      [source]="data.source"
+      [doRender]="true"
+    />
+  }
+</mat-dialog-content>
diff --git a/src/messages.xlf b/src/messages.xlf
index 1f3d0eb76a0..aa743761f82 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -988,7 +988,7 @@ 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/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html</context>
-          <context context-type="linenumber">4,6</context>
+          <context context-type="linenumber">15,17</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7561343662252105417" datatype="html">
@@ -13837,6 +13837,13 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">12,14</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6063735713364961693" datatype="html">
+        <source>Expand summary</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html</context>
+          <context context-type="linenumber">5,9</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="4977425233945972011" datatype="html">
         <source> No feedback given for this version </source>
         <context-group purpose="location">