diff --git a/stylesheets/components/UsernameLinkModalBody.scss b/stylesheets/components/UsernameLinkModalBody.scss
index 11446925ec..0b16a7cbc2 100644
--- a/stylesheets/components/UsernameLinkModalBody.scss
+++ b/stylesheets/components/UsernameLinkModalBody.scss
@@ -71,8 +71,6 @@
 
     &__username {
       display: flex;
-      flex-direction: row;
-      gap: 4px;
       justify-content: center;
       margin-block: 12px 2px;
 
@@ -85,20 +83,26 @@
         text-align: center;
       }
 
-      &__copy {
-        @include button-reset;
-        @include button-focus-outline;
+      &__copy__button {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
 
-        flex-shrink: 0;
-        margin-top: 2px;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
+        i {
+          flex-shrink: 0;
+          margin-top: 2px;
+          display: inline-block;
+          width: 16px;
+          height: 16px;
 
-        @include color-svg(
-          '../images/icons/v3/copy/copy.svg',
-          var(--text-color)
-        );
+          @include color-svg(
+            '../images/icons/v3/copy/copy.svg',
+            var(--text-color)
+          );
+        }
+
+        @include button-reset;
+        @include button-focus-outline;
       }
     }
   }
diff --git a/ts/components/UsernameLinkModalBody.tsx b/ts/components/UsernameLinkModalBody.tsx
index 06d708375b..6762280269 100644
--- a/ts/components/UsernameLinkModalBody.tsx
+++ b/ts/components/UsernameLinkModalBody.tsx
@@ -808,15 +808,21 @@ export function UsernameLinkModalBody({
         >
           <div className={`${CLASS}__card__qr`}>{linkImage}</div>
           <div className={`${CLASS}__card__username`}>
-            {!showColors && (
+            {showColors ? (
+              <div className={`${CLASS}__card__username__text`}>{username}</div>
+            ) : (
               <button
-                className={classnames(`${CLASS}__card__username__copy`)}
+                className={`${CLASS}__card__username__copy__button`}
                 type="button"
                 onClick={onCopyUsername}
                 aria-label={i18n('icu:UsernameLinkModalBody__copy')}
-              />
+              >
+                <i />
+                <div className={`${CLASS}__card__username__text`}>
+                  {username}
+                </div>
+              </button>
             )}
-            <div className={`${CLASS}__card__username__text`}>{username}</div>
           </div>
         </div>