diff --git a/test/e2e/tests/settings/auto-lock.spec.js b/test/e2e/tests/settings/auto-lock.spec.js
index 400f2d45aab8..bded29fa5f39 100644
--- a/test/e2e/tests/settings/auto-lock.spec.js
+++ b/test/e2e/tests/settings/auto-lock.spec.js
@@ -42,7 +42,9 @@ describe('Auto-Lock Timer', function () {
           '[data-testid="advanced-setting-auto-lock"] button',
         );
         // Verify the wallet is locked
-        const pageTitle = await driver.findElement('.unlock-page__title');
+        const pageTitle = await driver.findElement(
+          '[data-testid="unlock-page-title"]',
+        );
         const unlockButton = await driver.findElement('.unlock-page button');
         assert.equal(await pageTitle.getText(), 'Welcome back!');
         assert.equal(await unlockButton.isDisplayed(), true);
diff --git a/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap b/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
index beb7e82699be..0a572596aa2c 100644
--- a/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
+++ b/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
@@ -19,7 +19,8 @@ exports[`Unlock Page should match snapshot 1`] = `
         </div>
       </div>
       <h1
-        class="unlock-page__title"
+        class="mm-box mm-text mm-text--heading-lg mm-box--margin-top-1 mm-box--color-text-alternative"
+        data-testid="unlock-page-title"
       >
         Welcome back!
       </h1>
diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss
index abb1f837bdef..7d98b84f96a9 100644
--- a/ui/pages/unlock-page/index.scss
+++ b/ui/pages/unlock-page/index.scss
@@ -35,14 +35,6 @@
     }
   }
 
-  &__title {
-    @include design-system.H2;
-
-    margin-top: 5px;
-    font-weight: 800;
-    color: var(--color-text-alternative);
-  }
-
   &__form {
     width: 100%;
     margin: 56px 0 8px;
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index e97f0b2f3291..504873b1c1cc 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -1,6 +1,8 @@
 import { EventEmitter } from 'events';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Text } from '../../components/component-library';
+import { TextVariant, TextColor } from '../../helpers/constants/design-system';
 import Button from '../../components/ui/button';
 import TextField from '../../components/ui/text-field';
 import Mascot from '../../components/ui/mascot';
@@ -176,7 +178,15 @@ export default class UnlockPage extends Component {
               </div>
             ) : null}
           </div>
-          <h1 className="unlock-page__title">{t('welcomeBack')}</h1>
+          <Text
+            data-testid="unlock-page-title"
+            as="h1"
+            variant={TextVariant.headingLg}
+            marginTop={1}
+            color={TextColor.textAlternative}
+          >
+            {t('welcomeBack')}
+          </Text>
           <div>{t('unlockMessage')}</div>
           <form className="unlock-page__form" onSubmit={this.handleSubmit}>
             <TextField