diff --git a/ui/components/ui/qr-code-view/index.scss b/ui/components/ui/qr-code-view/index.scss
index 2087aa5a0943..0bb183297402 100644
--- a/ui/components/ui/qr-code-view/index.scss
+++ b/ui/components/ui/qr-code-view/index.scss
@@ -13,12 +13,6 @@
     color: var(--color-text-muted);
   }
 
-  &__message {
-    @include design-system.H7;
-
-    color: var(--color-warning-default);
-  }
-
   &__error {
     display: flex;
     justify-content: center;
@@ -37,14 +31,4 @@
       width: 100%;
     }
   }
-
-  &__address {
-    @include design-system.H7;
-
-    background-color: var(--color-background-alternative);
-    width: 76%;
-    padding: 8px 12px;
-    word-break: break-all;
-    text-align: center;
-  }
 }
diff --git a/ui/components/ui/qr-code-view/qr-code-view.tsx b/ui/components/ui/qr-code-view/qr-code-view.tsx
index f8a8cb4e1304..22b7e0f80205 100644
--- a/ui/components/ui/qr-code-view/qr-code-view.tsx
+++ b/ui/components/ui/qr-code-view/qr-code-view.tsx
@@ -12,6 +12,11 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import type { CombinedBackgroundAndReduxState } from '../../../store/store';
+import { Text } from '../../component-library';
+import {
+  TextVariant,
+  TextColor,
+} from '../../../helpers/constants/design-system';
 
 export default connect(mapStateToProps)(QrCodeView);
 
@@ -49,9 +54,13 @@ function QrCodeView({
       {Array.isArray(message) ? (
         <div className="qr-code__message-container">
           {message.map((msg, index) => (
-            <div className="qr_code__message" key={index}>
+            <Text
+              key={index}
+              variant={TextVariant.bodyXs}
+              color={TextColor.warningDefault}
+            >
               {msg}
-            </div>
+            </Text>
           ))}
         </div>
       ) : (