diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 953cb10706618a..c5dff51ccf116b 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -23,8 +23,12 @@ export default function KeepMountedModal() {
         keepMounted
       >
         <ModalContent sx={style}>
-          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
+          <h2 id="keep-mounted-modal-title" className="modal-title">
+            Text in a modal
+          </h2>
+          <p id="keep-mounted-modal-description" className="modal-description">
+            Aliquid amet deserunt earum!
+          </p>
         </ModalContent>
       </Modal>
     </div>
@@ -98,7 +102,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
-  width: 400,
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -107,20 +114,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index e37e91cf258e1d..7e9f218edd44ee 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -22,8 +22,12 @@ export default function KeepMountedModal() {
         keepMounted
       >
         <ModalContent sx={style}>
-          <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-          <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
+          <h2 id="keep-mounted-modal-title" className="modal-title">
+            Text in a modal
+          </h2>
+          <p id="keep-mounted-modal-description" className="modal-description">
+            Aliquid amet deserunt earum!
+          </p>
         </ModalContent>
       </Modal>
     </div>
@@ -95,7 +99,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
-  width: 400,
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -104,20 +111,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx.preview b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
deleted file mode 100644
index 4ef1d15ad243f9..00000000000000
--- a/docs/data/base/components/modal/KeepMountedModal.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-<TriggerButton type="button" onClick={handleOpen}>
-  Open modal
-</TriggerButton>
-<Modal
-  aria-labelledby="keep-mounted-modal-title"
-  aria-describedby="keep-mounted-modal-description"
-  open={open}
-  onClose={handleClose}
-  slots={{ backdrop: StyledBackdrop }}
-  keepMounted
->
-  <ModalContent sx={style}>
-    <h2 id="keep-mounted-modal-title">Text in a modal</h2>
-    <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-  </ModalContent>
-</Modal>
\ No newline at end of file
diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
index 0ab1f9865a68ea..4d85d01c983d46 100644
--- a/docs/data/base/components/modal/ModalUnstyled.js
+++ b/docs/data/base/components/modal/ModalUnstyled.js
@@ -22,9 +22,9 @@ export default function ModalUnstyled() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={style}>
-          <h3 id="unstyled-modal-title" className="modal-title">
+          <h2 id="unstyled-modal-title" className="modal-title">
             Text in a modal
-          </h3>
+          </h2>
           <p id="unstyled-modal-description" className="modal-description">
             Aliquid amet deserunt earum!
           </p>
@@ -95,6 +95,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -103,20 +107,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
index fcc7dda30cc5fa..053da92f2e9118 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -21,9 +21,9 @@ export default function ModalUnstyled() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={style}>
-          <h3 id="unstyled-modal-title" className="modal-title">
+          <h2 id="unstyled-modal-title" className="modal-title">
             Text in a modal
-          </h3>
+          </h2>
           <p id="unstyled-modal-description" className="modal-description">
             Aliquid amet deserunt earum!
           </p>
@@ -92,6 +92,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -100,20 +104,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index 381b204959e057..bb928c4f1ea5eb 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -25,9 +25,9 @@ export default function NestedModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={style}>
-          <h3 id="parent-modal-title" className="modal-title">
+          <h2 id="parent-modal-title" className="modal-title">
             Text in a modal
-          </h3>
+          </h2>
           <p id="parent-modal-description" className="modal-description">
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
@@ -58,9 +58,9 @@ function ChildModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={[style, { width: '240px' }]}>
-          <h3 id="child-modal-title" className="modal-title">
+          <h2 id="child-modal-title" className="modal-title">
             Text in a child modal
-          </h3>
+          </h2>
           <p id="child-modal-description" className="modal-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
@@ -136,6 +136,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -144,20 +148,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
@@ -190,12 +188,11 @@ const TriggerButton = styled(Button)(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
   
-  &.active {
-    background-color: ${blue[700]};
-    box-shadow: none;
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
   
-  &.focusVisible {
+  &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
@@ -224,7 +221,8 @@ const ModalButton = styled(Button)(
   }
 
   &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
@@ -232,7 +230,7 @@ const ModalButton = styled(Button)(
     outline: none;
   }
 
-  &.disabled {
+  &:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     box-shadow: none;
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 9595aaff2f925d..2db265d191b9a3 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -24,9 +24,9 @@ export default function NestedModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={style}>
-          <h3 id="parent-modal-title" className="modal-title">
+          <h2 id="parent-modal-title" className="modal-title">
             Text in a modal
-          </h3>
+          </h2>
           <p id="parent-modal-description" className="modal-description">
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
@@ -57,9 +57,9 @@ function ChildModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <ModalContent sx={[style, { width: '240px' }]}>
-          <h3 id="child-modal-title" className="modal-title">
+          <h2 id="child-modal-title" className="modal-title">
             Text in a child modal
-          </h3>
+          </h2>
           <p id="child-modal-description" className="modal-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
@@ -133,6 +133,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -141,20 +145,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
@@ -187,12 +185,11 @@ const TriggerButton = styled(Button)(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
   
-  &.active {
-    background-color: ${blue[700]};
-    box-shadow: none;
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
   
-  &.focusVisible {
+  &:focus-visible {
     box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
@@ -221,7 +218,8 @@ const ModalButton = styled(Button)(
   }
 
   &:active {
-    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+    background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
@@ -229,7 +227,7 @@ const ModalButton = styled(Button)(
     outline: none;
   }
 
-  &.disabled {
+  &:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     box-shadow: none;
diff --git a/docs/data/base/components/modal/ServerModal.js b/docs/data/base/components/modal/ServerModal.js
index c9ea2ba26cc30e..a2adcdf71cad97 100644
--- a/docs/data/base/components/modal/ServerModal.js
+++ b/docs/data/base/components/modal/ServerModal.js
@@ -30,9 +30,9 @@ export default function ServerModal() {
         container={() => rootRef.current}
       >
         <ModalContent sx={style}>
-          <h3 id="server-modal-title" className="modal-title">
+          <h2 id="server-modal-title" className="modal-title">
             Server-side modal
-          </h3>
+          </h2>
           <span id="server-modal-description" className="modal-description">
             If you disable JavaScript, you will still see me.
           </span>
@@ -55,12 +55,6 @@ const grey = {
   900: '#1C2025',
 };
 
-const blue = {
-  200: '#99CCF3',
-  300: '#66B2FF',
-  700: '#0059B2',
-};
-
 const Modal = styled(BaseModal)`
   position: fixed;
   z-index: 1300;
@@ -68,35 +62,45 @@ const Modal = styled(BaseModal)`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  background: inherit;
-  font-family: 'IBM Plex Sans', sans-serif;
+
+  &.MuiModal-hidden {
+    visibility: hidden;
+  }
 `;
 
 const style = {
-  position: 'relative',
   width: 400,
-  height: 120,
 };
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 16px;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+  }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
   }
   `,
 );
diff --git a/docs/data/base/components/modal/ServerModal.tsx b/docs/data/base/components/modal/ServerModal.tsx
index 0469e68926339f..a2593b10ebaa73 100644
--- a/docs/data/base/components/modal/ServerModal.tsx
+++ b/docs/data/base/components/modal/ServerModal.tsx
@@ -30,9 +30,9 @@ export default function ServerModal() {
         container={() => rootRef.current}
       >
         <ModalContent sx={style}>
-          <h3 id="server-modal-title" className="modal-title">
+          <h2 id="server-modal-title" className="modal-title">
             Server-side modal
-          </h3>
+          </h2>
           <span id="server-modal-description" className="modal-description">
             If you disable JavaScript, you will still see me.
           </span>
@@ -55,12 +55,6 @@ const grey = {
   900: '#1C2025',
 };
 
-const blue = {
-  200: '#99CCF3',
-  300: '#66B2FF',
-  700: '#0059B2',
-};
-
 const Modal = styled(BaseModal)`
   position: fixed;
   z-index: 1300;
@@ -68,35 +62,45 @@ const Modal = styled(BaseModal)`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px;
-  background: inherit;
-  font-family: 'IBM Plex Sans', sans-serif;
+
+  &.MuiModal-hidden {
+    visibility: hidden;
+  }
 `;
 
 const style = {
-  position: 'relative',
   width: 400,
-  height: 120,
 };
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 8px 16px;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
-  color: white;
-  transition: all 150ms ease;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 16px;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+  }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
-    outline: none;
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
   }
   `,
 );
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
index 583759e5869158..751ff3c29e55cb 100644
--- a/docs/data/base/components/modal/SpringModal.js
+++ b/docs/data/base/components/modal/SpringModal.js
@@ -23,9 +23,9 @@ export default function SpringModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="spring-modal-title" className="modal-title">
+            <h2 id="spring-modal-title" className="modal-title">
               Text in a modal
-            </h3>
+            </h2>
             <span id="spring-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
@@ -125,6 +125,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -133,20 +137,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index 2feed8e27a2174..80a3395dcab5f8 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -22,9 +22,9 @@ export default function SpringModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="spring-modal-title" className="modal-title">
+            <h2 id="spring-modal-title" className="modal-title">
               Text in a modal
-            </h3>
+            </h2>
             <span id="spring-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
@@ -124,6 +124,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -132,20 +136,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
index 8140b5b16f0265..02a8ed807ad7f9 100644
--- a/docs/data/base/components/modal/TransitionsModal.js
+++ b/docs/data/base/components/modal/TransitionsModal.js
@@ -23,9 +23,9 @@ export default function TransitionsModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="transition-modal-title" className="modal-title">
+            <h2 id="transition-modal-title" className="modal-title">
               Text in a child modal
-            </h3>
+            </h2>
             <p id="transition-modal-description" className="modal-description">
               Lorem ipsum, dolor sit amet consectetur adipisicing elit.
             </p>
@@ -98,6 +98,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -106,20 +110,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
index 391e87bd23a281..dad0ab9bb8b4ba 100644
--- a/docs/data/base/components/modal/TransitionsModal.tsx
+++ b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -22,9 +22,9 @@ export default function TransitionsModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="transition-modal-title" className="modal-title">
+            <h2 id="transition-modal-title" className="modal-title">
               Text in a child modal
-            </h3>
+            </h2>
             <p id="transition-modal-description" className="modal-description">
               Lorem ipsum, dolor sit amet consectetur adipisicing elit.
             </p>
@@ -95,6 +95,10 @@ const style = {
 
 const ModalContent = styled(Box)(
   ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -103,20 +107,14 @@ const ModalContent = styled(Box)(
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: 0px 4px 12px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.20)'
   };
-  padding: 1rem;
+  padding: 16px;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
-
 
   & .modal-title {
     margin: 0;
     line-height: 1.5rem;
-    margin-right: 0.5rem;
   }
 
   & .modal-description {
diff --git a/docs/data/base/components/modal/UseModal.js b/docs/data/base/components/modal/UseModal.js
index 722b332f46dea0..8746d9d6569bd8 100644
--- a/docs/data/base/components/modal/UseModal.js
+++ b/docs/data/base/components/modal/UseModal.js
@@ -26,9 +26,9 @@ export default function UseModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="transition-modal-title" className="modal-title">
+            <h2 id="transition-modal-title" className="modal-title">
               Text in a modal
-            </h3>
+            </h2>
             <span id="transition-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
diff --git a/docs/data/base/components/modal/UseModal.tsx b/docs/data/base/components/modal/UseModal.tsx
index be41ba00f45120..8caa9e766b1090 100644
--- a/docs/data/base/components/modal/UseModal.tsx
+++ b/docs/data/base/components/modal/UseModal.tsx
@@ -25,9 +25,9 @@ export default function UseModal() {
       >
         <Fade in={open}>
           <ModalContent sx={style}>
-            <h3 id="transition-modal-title" className="modal-title">
+            <h2 id="transition-modal-title" className="modal-title">
               Text in a modal
-            </h3>
+            </h2>
             <span id="transition-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>