diff --git a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html
index 47f37ea2c55..0366965dc59 100644
--- a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html
+++ b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html
@@ -4,41 +4,53 @@
       <div class="mat-body-2" [innerHtml]="computerAvatarSettings.prompt"></div>
       <mat-divider />
     }
-    @if (avatars.length === 1) {
-      <div class="mat-subtitle-2 accent" i18n>Your {{ label }}:</div>
-    } @else {
+    @if (selectedAvatar == null) {
       <div class="mat-subtitle-2 accent" i18n>Choose Your {{ label }}:</div>
+      <div class="flex flex-wrap mt-2">
+        @for (avatar of avatars; track avatar.id) {
+          <button
+            class="avatar-button"
+            matButton
+            [value]="avatar"
+            (click)="selectedAvatar = avatar"
+            aria-label="{{ avatar.name }}"
+          >
+            <img [src]="avatarsPath + avatar.image" alt="{{ avatar.name }}" class="avatar-image" />
+            <div class="name">
+              <b>{{ avatar.name }}</b>
+            </div>
+          </button>
+        }
+      </div>
+    } @else {
+      <div class="mat-subtitle-2 accent" i18n>Your {{ label }}:</div>
+      <span class="flex flex-col items-center">
+        <img
+          [src]="avatarsPath + selectedAvatar.image"
+          alt="{{ selectedAvatar.name }}"
+          class="selected-avatar-image"
+        />
+        <div class="selected-avatar-name">
+          <b>{{ selectedAvatar.name }}</b>
+        </div>
+      </span>
     }
-    <mat-button-toggle-group
-      [(ngModel)]="selectedAvatar"
-      [disabled]="avatars.length === 1"
-      class="flex flex-wrap"
-      aria-label="Selected avatar"
-      i18n-aria-label
-    >
-      @for (avatar of avatars; track avatar.id) {
-        <mat-button-toggle
-          [value]="avatar"
-          (click)="selectedAvatar = avatar"
-          aria-label="{{ avatar.name }}"
-        >
-          <img [src]="avatarsPath + avatar.image" alt="{{ avatar.name }}" class="avatar-image" />
-          <div class="name">
-            <b>{{ avatar.name }}</b>
-          </div>
-        </mat-button-toggle>
-      }
-    </mat-button-toggle-group>
   </mat-card-content>
-  <mat-card-actions align="end">
-    <button
-      mat-flat-button
-      color="primary"
-      [disabled]="selectedAvatar == null"
-      (click)="chooseAvatarEvent.emit(this.selectedAvatar)"
-      i18n
-    >
-      Continue
-    </button>
-  </mat-card-actions>
+  @if (selectedAvatar != null) {
+    <mat-card-actions class="flex justify-end">
+      @if (avatars.length > 1) {
+        <button mat-flat-button (click)="selectedAvatar = null" i18n>Back</button>
+        <span class="flex-grow"></span>
+      }
+      <button
+        mat-flat-button
+        color="primary"
+        class="motion-safe:animate-bounce"
+        (click)="chooseAvatarEvent.emit(this.selectedAvatar)"
+        i18n
+      >
+        Chat with {{ selectedAvatar.name }}
+      </button>
+    </mat-card-actions>
+  }
 </mat-card>
diff --git a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
index 1adac3c5791..7ada7dd1fca 100644
--- a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
+++ b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
@@ -11,36 +11,45 @@
   }
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-.mat-button-toggle-group {
-  border: 0 none;
-  margin-top: 16px;
+.avatar-button{
+  height: auto;
+  text-transform: none;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-.mat-button-toggle-group-appearance-standard {
-  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-  .mat-button-toggle, .mat-button-toggle + .mat-button-toggle {
-    border-left: 0 none;
-    border-radius: variables.$card-border-radius;
-    margin: 4px;
-  }
+.avatar-image {
+  width: 88px;
+  height: auto;
+  border-radius: 50%;
+  padding: 8px 0;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-.mat-button-toggle-disabled.mat-button-toggle-checked {
-  background-color: transparent;
+.name {
+  line-height: 1;
+  padding-bottom: 8px;
 }
 
-.avatar-image {
-  width: 88px;
+
+.selected-avatar-image {
+  width: 168px;
   height: auto;
   border-radius: 50%;
   padding: 8px 0;
 }
 
-.name {
+.selected-avatar-name {
   line-height: 1;
   padding-bottom: 8px;
 }
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.06);
+  }
+}
+
+.pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
diff --git a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.spec.ts b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.spec.ts
index a69385a3b4c..a7e63bae3c9 100644
--- a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.spec.ts
+++ b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.spec.ts
@@ -33,13 +33,45 @@ describe('ComputerAvatarSelectorComponent', () => {
 
   ngOnInit();
   selectAvatar();
+  onlyOneAvatar();
 });
 
+function onlyOneAvatar() {
+  describe('only one avatar', () => {
+    beforeEach(() => {
+      component.computerAvatarSettings.ids = ['robot'];
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should automatically select the avatar and only show the continue button', () => {
+      expect(fixture.debugElement.queryAll(By.css('.avatar-button')).length).toEqual(0);
+      expect(fixture.debugElement.query(By.css('.selected-avatar-image'))).toBeTruthy();
+      expect(
+        fixture.debugElement.query(By.css('.selected-avatar-name')).nativeElement.textContent.trim()
+      ).toEqual('Robot');
+
+      const backButton = fixture.debugElement
+        .queryAll(By.css('button'))
+        .find((btn) => btn.nativeElement.textContent.includes('Back'));
+
+      expect(getContinueButton()).toBeTruthy();
+      expect(backButton).toBeUndefined();
+    });
+
+    it('clicking continue should emit selected avatar', () => {
+      const spy = spyOn(component.chooseAvatarEvent, 'emit');
+      getContinueButton().nativeElement.click();
+      fixture.detectChanges();
+      expect(spy).toHaveBeenCalledWith(avatars[0]);
+    });
+  });
+}
+
 function ngOnInit() {
   describe('ngOnInit()', () => {
-    it('should show avatars and the continue button should be disabled', () => {
-      expect(fixture.debugElement.queryAll(By.css('mat-button-toggle')).length).toEqual(2);
-      expect(getContinueButton().nativeElement.disabled).toBeTrue();
+    it('should show avatars', () => {
+      expect(fixture.debugElement.queryAll(By.css('.avatar-button')).length).toEqual(2);
     });
   });
 }
@@ -47,7 +79,7 @@ function ngOnInit() {
 function selectAvatar() {
   describe('select avatar', () => {
     beforeEach(() => {
-      fixture.debugElement.queryAll(By.css('mat-button-toggle'))[0].nativeElement.click();
+      fixture.debugElement.queryAll(By.css('.avatar-button'))[0].nativeElement.click();
       fixture.detectChanges();
     });
     it('should enable the continue button', () => {
@@ -72,5 +104,5 @@ function clickContinueButton_shouldEmitAvatar() {
 function getContinueButton() {
   return fixture.debugElement
     .queryAll(By.css('button'))
-    .find((buttonDebugEl) => buttonDebugEl.nativeElement.textContent.includes('Continue'));
+    .find((buttonDebugEl) => buttonDebugEl.nativeElement.textContent.includes('Chat with'));
 }
diff --git a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.ts b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.ts
index a981d63392c..c300dc8c907 100644
--- a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.ts
+++ b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.ts
@@ -2,14 +2,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatDividerModule } from '@angular/material/divider';
 import { ComputerAvatar } from '../../common/computer-avatar/ComputerAvatar';
 import { ComputerAvatarService } from '../../services/computerAvatarService';
 import { ComputerAvatarSettings } from '../../common/computer-avatar/ComputerAvatarSettings';
 
 @Component({
-  imports: [FormsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDividerModule],
+  imports: [FormsModule, MatButtonModule, MatCardModule, MatDividerModule],
   selector: 'computer-avatar-selector',
   styleUrl: './computer-avatar-selector.component.scss',
   templateUrl: './computer-avatar-selector.component.html'
diff --git a/src/messages.xlf b/src/messages.xlf
index ac72758374c..53fc1c833a4 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1551,6 +1551,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.html</context>
           <context context-type="linenumber">7,10</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
+          <context context-type="linenumber">42,46</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="8132424293432274889" datatype="html">
         <source> Back </source>
@@ -23258,32 +23262,25 @@ If this problem continues, let your teacher know and move on to the next activit
           <context context-type="linenumber">70,73</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="5926207769041293626" datatype="html">
-        <source>Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
-          <context context-type="linenumber">8,9</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="2670863509967113900" datatype="html">
         <source>Choose Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
-          <context context-type="linenumber">10,12</context>
+          <context context-type="linenumber">8,9</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="4626694020452925586" datatype="html">
-        <source>Selected avatar</source>
+      <trans-unit id="5926207769041293626" datatype="html">
+        <source>Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
-          <context context-type="linenumber">16,19</context>
+          <context context-type="linenumber">26,27</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2917314929120683887" datatype="html">
-        <source> Continue </source>
+      <trans-unit id="962551360143606449" datatype="html">
+        <source> Chat with <x id="INTERPOLATION" equiv-text="{{ selectedAvatar.name }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
-          <context context-type="linenumber">41,45</context>
+          <context context-type="linenumber">52,54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1098411996448900439" datatype="html">