diff --git a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
index e10cdb476f5c..9071358fd3f6 100644
--- a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
+++ b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap
@@ -15,16 +15,16 @@ exports[`Transaction Confirmed should match snapshot 1`] = `
           class="mm-box mm-icon mm-icon--size-xl mm-box--display-inline-block mm-box--color-success-default"
           style="mask-image: url('./images/icons/check.svg');"
         />
-        <div
-          class="transaction-confirmed__title"
+        <h3
+          class="mm-box mm-text mm-text--heading-md mm-text--font-weight-medium mm-text--text-align-center mm-box--color-text-default"
         >
           [confirmed]!
-        </div>
-        <div
-          class="transaction-confirmed__description"
+        </h3>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--color-text-default"
         >
           [initialTransactionConfirmed]
-        </div>
+        </p>
       </div>
     </div>
     <div
diff --git a/ui/components/app/modals/transaction-confirmed/index.scss b/ui/components/app/modals/transaction-confirmed/index.scss
index 075dd5bab688..559bb314e1e3 100644
--- a/ui/components/app/modals/transaction-confirmed/index.scss
+++ b/ui/components/app/modals/transaction-confirmed/index.scss
@@ -1,20 +1,6 @@
 @use "design-system";
 
 .transaction-confirmed {
-  &__title {
-    @include design-system.H3;
-
-    font-weight: 500;
-    padding: 16px 0;
-    text-align: center;
-  }
-
-  &__description {
-    @include design-system.H6;
-
-    text-align: center;
-  }
-
   &__content {
     overflow-y: auto;
     flex: 1;
diff --git a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
index c5f112eefd91..1fdedee8dd43 100644
--- a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -1,8 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../modal';
-import { Icon, IconName, IconSize } from '../../../component-library';
-import { IconColor } from '../../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize, Text } from '../../../component-library';
+import {
+  IconColor,
+  TextVariant,
+  TextAlign,
+  FontWeight,
+} from '../../../../helpers/constants/design-system';
 
 export default class TransactionConfirmed extends PureComponent {
   static contextTypes = {
@@ -35,12 +40,16 @@ export default class TransactionConfirmed extends PureComponent {
             color={IconColor.successDefault}
             size={IconSize.Xl}
           />
-          <div className="transaction-confirmed__title">
+          <Text
+            variant={TextVariant.headingMd}
+            fontWeight={FontWeight.Medium}
+            textAlign={TextAlign.Center}
+          >
             {`${t('confirmed')}!`}
-          </div>
-          <div className="transaction-confirmed__description">
+          </Text>
+          <Text textAlign={TextAlign.Center}>
             {t('initialTransactionConfirmed')}
-          </div>
+          </Text>
         </div>
       </Modal>
     );