code-dot-org · levadadenys · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026 · Feb 11, 2026
diff --git a/apps/src/levelbuilder/rubrics/EvidenceDescriptions.jsx b/apps/src/levelbuilder/rubrics/EvidenceDescriptions.jsx
@@ -1,4 +1,4 @@
-import {Heading6} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -14,13 +14,15 @@ export default function EvidenceDescriptions({
   return (
     <div>
       <div style={styles.grid}>
-        <Heading6 style={styles.columnHeaders}>Evidence level</Heading6>
-        <Heading6 style={styles.columnHeaders}>
+        <Typography style={styles.columnHeaders} variant="h6" gutterBottom>
+          Evidence level
+        </Typography>
+        <Typography style={styles.columnHeaders} variant="h6" gutterBottom>
           Description for external viewers
-        </Heading6>
-        <Heading6 style={styles.columnHeaders}>
+        </Typography>
+        <Typography style={styles.columnHeaders} variant="h6" gutterBottom>
           Description for AI generated evaluation
-        </Heading6>
+        </Typography>
       </div>
       <EvidenceDescriptionsRow
         isAiEnabled={learningGoalData.aiEnabled}

diff --git a/apps/src/levelbuilder/rubrics/LinkToRubricEditor.tsx b/apps/src/levelbuilder/rubrics/LinkToRubricEditor.tsx
@@ -1,9 +1,5 @@
 import {LinkButton} from '@code-dot-org/component-library/button';
-import {
-  BodyThreeText,
-  BodyTwoText,
-  Heading5,
-} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import React from 'react';
 
 import moduleStyles from './link-to-rubric-editor.module.scss';
@@ -20,19 +16,21 @@ interface LinkToRubricEditorProps {
 export default function LinkToRubricEditor({lessons}: LinkToRubricEditorProps) {
   return (
     <div className={moduleStyles.linkContainer}>
-      <Heading5>Add or Edit Rubrics</Heading5>
-      <BodyThreeText>
+      <Typography variant="h5" gutterBottom>
+        Add or Edit Rubrics
+      </Typography>
+      <Typography variant="body3" gutterBottom>
         Rubrics are defined on the lesson. The level the rubric is assigned to
         must be submittable. Below are links to the lessons that this level is a
         part of. You must make this level submittable and save it before you
         will be able to assign a rubric to it. The edit/add links will open in a
         new tab.
-      </BodyThreeText>
+      </Typography>
       {lessons.length === 0 && (
-        <BodyTwoText>
+        <Typography variant="body2" gutterBottom>
           This level is not in any lessons. Assign it to a lesson to add or edit
           the rubric for the lesson.
-        </BodyTwoText>
+        </Typography>
       )}
       <div className={moduleStyles.rubricButtonContainer}>
         {lessons.map(lesson => (
@@ -52,10 +50,14 @@ export default function LinkToRubricEditor({lessons}: LinkToRubricEditorProps) {
                 size={'s'}
               />
             )}
-            <BodyTwoText className={moduleStyles.lessonText}>
+            <Typography
+              className={moduleStyles.lessonText}
+              variant="body2"
+              gutterBottom
+            >
               <b>Script:</b> {lesson.script_name || 'NONE'}, <b>Lesson:</b>{' '}
               {lesson.name}
-            </BodyTwoText>
+            </Typography>
           </div>
         ))}
       </div>

diff --git a/apps/src/levelbuilder/rubrics/RubricsContainer.jsx b/apps/src/levelbuilder/rubrics/RubricsContainer.jsx
@@ -1,8 +1,4 @@
-import {
-  BodyThreeText,
-  BodyTwoText,
-  Heading1,
-} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 
@@ -173,10 +169,12 @@ export default function RubricsContainer({
 
   return (
     <div>
-      <Heading1>{pageHeader}</Heading1>
+      <Typography variant="h1" gutterBottom>
+        {pageHeader}
+      </Typography>
       {hasSubmittableLevels && (
         <div>
-          <BodyTwoText>
+          <Typography variant="body2" gutterBottom>
             This rubric will be used for {unitName}, lesson {lessonNumber}.
             <br />
             In legacy labs, the rubric will be shown on all levels in the
@@ -190,7 +188,7 @@ export default function RubricsContainer({
             choice level. The same rubric will be shared for all choice levels
             under that parent, as well as any levels that share project template
             levels with those choice levels.
-          </BodyTwoText>
+          </Typography>
           <div style={styles.containerStyle}>
             <label htmlFor="rubric_level_id">
               Choose a level for this rubric to be evaluated on
@@ -221,19 +219,21 @@ export default function RubricsContainer({
             />
           </div>
           <div style={styles.bottomRow}>
-            <BodyThreeText>{saveNotificationText}</BodyThreeText>
+            <Typography variant="body3" gutterBottom>
+              {saveNotificationText}
+            </Typography>
           </div>
         </div>
       )}
       {!hasSubmittableLevels && (
         <div>
-          <BodyTwoText>
+          <Typography variant="body2" gutterBottom>
             {unitName}, lesson {lessonNumber} currently has no submittable
             levels. To create or modify a rubric, there must be a submittable
             level connected to the rubric. Go back to the lesson landing page
             and either add a new submittable level or modify an existing level
             to be submittable.
-          </BodyTwoText>
+          </Typography>
         </div>
       )}
     </div>

diff --git a/apps/src/music/views/AdvancedControls.tsx b/apps/src/music/views/AdvancedControls.tsx
@@ -1,5 +1,5 @@
 import Checkbox from '@code-dot-org/component-library/checkbox';
-import {Heading5} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import classNames from 'classnames';
 import React, {useCallback} from 'react';
 
@@ -69,7 +69,9 @@ const AdvancedControls: React.FunctionComponent = () => {
 
   return (
     <div className={moduleStyles.container}>
-      <Heading5 className={moduleStyles.title}>Advanced Controls</Heading5>
+      <Typography className={moduleStyles.title} variant="h5" gutterBottom>
+        Advanced Controls
+      </Typography>
       <div className={moduleStyles.section}>
         <div className={moduleStyles.row}>
           <div>BPM: {bpm}</div>

diff --git a/apps/src/music/views/HeaderButtons.tsx b/apps/src/music/views/HeaderButtons.tsx
@@ -1,6 +1,6 @@
 import {Button} from '@code-dot-org/component-library/button';
 import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
-import Typography from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import classNames from 'classnames';
 import React, {memo, useCallback, useContext} from 'react';
 import {useSelector} from 'react-redux';
@@ -47,7 +47,7 @@ const CurrentPack: React.FunctionComponent<CurrentPackProps> = ({
           alt=""
         />
       )}
-      <Typography semanticTag="p" visualAppearance="body-four" noMargin>
+      <Typography variant="body4">
         {packFolder.name} &bull; {packFolder.artist}
       </Typography>
     </div>

diff --git a/apps/src/music/views/MusicPlayView.tsx b/apps/src/music/views/MusicPlayView.tsx
@@ -1,8 +1,5 @@
 import {Button} from '@code-dot-org/component-library/button';
-import {
-  Heading2,
-  BodyTwoText,
-} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import React, {memo, useCallback, useContext, useMemo} from 'react';
 
 import {queryParams} from '@cdo/apps/code-studio/utils';
@@ -94,10 +91,20 @@ const MusicPlayView: React.FunctionComponent<MusicPlayViewProps> = ({
         />
         <div className={moduleStyles.card}>
           <div className={moduleStyles.infoSection}>
-            <Heading2 className={moduleStyles.infoText}>{projectName}</Heading2>
-            <BodyTwoText className={moduleStyles.infoText}>
+            <Typography
+              className={moduleStyles.infoText}
+              variant="h2"
+              gutterBottom
+            >
+              {projectName}
+            </Typography>
+            <Typography
+              className={moduleStyles.infoText}
+              variant="body2"
+              gutterBottom
+            >
               {musicI18n.builtWithMusicLab()}
-            </BodyTwoText>
+            </Typography>
           </div>
           <div className={moduleStyles.playSection}>
             <Button

diff --git a/apps/src/music/views/MusicProjectBar.tsx b/apps/src/music/views/MusicProjectBar.tsx
@@ -1,8 +1,5 @@
 import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
-import {
-  BodyFourText,
-  BodyThreeText,
-} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -49,11 +46,13 @@ const MusicProjectBar: React.FC<{
         )
       )}
       <div className={styles.text}>
-        <BodyThreeText>{isLoading ? 'Loading...' : title}</BodyThreeText>
+        <Typography variant="body3" gutterBottom>
+          {isLoading ? 'Loading...' : title}
+        </Typography>
         {packFolder && (
-          <BodyFourText>
+          <Typography variant="body4" gutterBottom>
             {`${packFolder.name} - ${packFolder.artist}`}
-          </BodyFourText>
+          </Typography>
         )}
       </div>
     </div>

diff --git a/apps/src/music/views/PackDialog.tsx b/apps/src/music/views/PackDialog.tsx
@@ -1,6 +1,6 @@
 import {Button} from '@code-dot-org/component-library/button';
 import SegmentedButtons from '@code-dot-org/component-library/segmentedButtons';
-import Typography from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import classNames from 'classnames';
 import React, {
   useCallback,
@@ -260,9 +260,10 @@ const PackDialog: React.FunctionComponent<PackDialogProps> = ({
         <div id="pack-dialog" className={styles.packDialog}>
           <div id="hidden-item" tabIndex={0} role="button" />
           <Typography
-            semanticTag="h1"
-            visualAppearance="heading-lg"
             className={styles.heading}
+            component="h1"
+            variant="h3"
+            gutterBottom
           >
             {musicI18n.packDialogTitle()}
           </Typography>

diff --git a/apps/src/pythonlab/components/ProjectTypePicker.tsx b/apps/src/pythonlab/components/ProjectTypePicker.tsx
@@ -1,10 +1,7 @@
 import ActionBlock from '@code-dot-org/component-library/actionBlock';
 import {useTheme} from '@code-dot-org/component-library/common/contexts';
 import {CustomDialog} from '@code-dot-org/component-library/dialog';
-import {
-  BodyThreeText,
-  Heading2,
-} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import React from 'react';
 
 import pythonlabI18n from '@cdo/apps/pythonlab/locale';
@@ -36,20 +33,20 @@ const ProjectTypePicker: React.FunctionComponent<ProjectTypePickerProps> = ({
         aria-labelledby="project-picker-title"
         onClose={currentProjectType ? closeDialog : undefined}
       >
-        <Heading2 id="project-picker-title">
+        <Typography id="project-picker-title" variant="h2" gutterBottom>
           {currentProjectType
             ? pythonlabI18n.switchProjectTypeTitle()
             : pythonlabI18n.projectPickerTitle()}
-        </Heading2>
+        </Typography>
         <div id="dsco-dialog-description">
           {(isNeighborhood || isConsole) && (
-            <BodyThreeText>
+            <Typography variant="body3" gutterBottom>
               <span className={moduleStyles.boldWarning}>
                 {pythonlabI18n.projectPickerReplaceWarning()}
               </span>
               <br />
               {pythonlabI18n.projectPickerReplaceRestoreInfo()}
-            </BodyThreeText>
+            </Typography>
           )}
           <div className={moduleStyles.pickerContainer}>
             <ActionBlock

diff --git a/apps/src/signUpFlow/AccountType.tsx b/apps/src/signUpFlow/AccountType.tsx
@@ -1,6 +1,6 @@
 import Button from '@code-dot-org/component-library/button';
 import FontAwesomeV6Icon from '@code-dot-org/component-library/fontAwesomeV6Icon';
-import {Heading2} from '@code-dot-org/component-library/typography';
+import {Typography} from '@mui/material';
 import React, {useState, useEffect} from 'react';
 
 import {studio} from '@cdo/apps/lib/util/urlHelpers';
@@ -145,9 +145,9 @@ const AccountType: React.FunctionComponent<{
         />
         <div className={style.freeCurriculumWrapper}>
           <FontAwesomeV6Icon iconName={'book-open-cover'} />
-          <Heading2 visualAppearance="heading-xs">
+          <Typography component="h2" variant="h6" gutterBottom>
             {locale.free_curriculum_forever()}
-          </Heading2>
+          </Typography>
           <Button
             className={style.dialogButton}
             size="s"