diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 44ca0de80..b78bbd374 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -20,11 +20,6 @@
     margin: 8px;
   }
 
-  .profile-name {
-    font-size: larger;
-    text-align: center;
-  }
-
   .title-text {
     font-size: large;
     text-align: center;
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index b759ca720..254138017 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -146,92 +146,6 @@
   }
 }
 
-.edit-profile-dialog {
-  .session-modal__header__title {
-    font-size: var(--font-size-lg);
-  }
-
-  .session-modal {
-    width: $session-modal-size-md;
-
-    &__header {
-      height: 68.45px;
-    }
-  }
-
-  .avatar-center-inner {
-    position: relative;
-
-    .qr-view-button {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      height: 34px;
-      width: 34px;
-      border-radius: 50%;
-      background-color: var(--white-color);
-      transition: var(--default-duration);
-
-      &:hover {
-        filter: brightness(90%);
-      }
-
-      .session-icon-button {
-        opacity: 1;
-      }
-    }
-  }
-
-  .session-id-section {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    .session-button {
-      width: 148px;
-    }
-  }
-
-  .profile-name {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--margins-lg);
-
-    input {
-      height: 38px;
-      border-radius: 5px;
-      text-align: center;
-      font-size: $session-font-md;
-    }
-
-    &-uneditable {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      p {
-        font-size: $session-font-md;
-        padding: 0px var(--margins-sm);
-      }
-
-      .session-icon-button {
-        padding: 0px;
-      }
-    }
-  }
-
-  .edit-profile-default {
-    .session-modal {
-      .session-modal__body {
-        overflow: initial;
-      }
-    }
-  }
-}
-
 .reaction-list-modal {
   .session-confirm-wrapper {
     .session-modal__body {
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 02b7323be..dc7e20ea5 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -105,7 +105,7 @@ $session-font-md: 15px;
 
 @mixin text-highlight($color) {
   background-color: $color;
-  padding: $session-margin-xs $session-margin-sm;
+  padding: var(--margins-xs) var(--margins-sm);
   border-radius: 3px;
   display: inline-block;
 }
@@ -137,21 +137,6 @@ $session-subtle-factor: 0.6;
   @return rgba($color, $session-subtle-factor);
 }
 
-// //////////////////////////////////////////////
-// ////////////////// Sizing ////////////////////
-// //////////////////////////////////////////////
-
-// Various Components
-$session-modal-size-sm: 220px;
-$session-modal-size-md: 400px;
-$session-modal-size-lg: 650px;
-
-// Spacing
-$session-margin-xs: 5px;
-$session-margin-sm: 10px;
-$session-margin-md: 15px;
-$session-margin-lg: 20px;
-
 // Animations
 
 @keyframes fadein {
diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx
index 89ff334ef..18b31d2eb 100644
--- a/ts/components/basic/YourSessionIDPill.tsx
+++ b/ts/components/basic/YourSessionIDPill.tsx
@@ -12,7 +12,7 @@ const StyledPillDividerLine = styled.div`
 const StyledPillSpan = styled.span`
   padding: 6px 15px 5px;
   border-radius: 50px;
-  color: var(--text-primary-color);
+  color: var(--text-secondary-color);
   border: 1px solid var(--border-color);
 `;
 
@@ -20,7 +20,7 @@ const StyledPillDivider = styled.div`
   width: 100%;
   text-align: center;
   display: flex;
-  margin: 35px 0;
+  margin: 0;
 `;
 
 export const YourSessionIDPill = () => {
diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx
index 6b1c9df7d..6af6d16ad 100644
--- a/ts/components/dialog/EditProfileDialog.tsx
+++ b/ts/components/dialog/EditProfileDialog.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 
 import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
@@ -16,10 +17,74 @@ import { getThemeValue } from '../../themes/globals';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
 import { SessionQRCode } from '../SessionQRCode';
 import { SessionWrapperModal } from '../SessionWrapperModal';
-import { SessionButton, SessionButtonType } from '../basic/SessionButton';
+import { Flex } from '../basic/Flex';
+import { SessionButton } from '../basic/SessionButton';
+import { Spacer2XL, Spacer3XL, SpacerLG, SpacerSM, SpacerXL, SpacerXS } from '../basic/Text';
 import { SessionIconButton } from '../icon';
 import { SessionSpinner } from '../loading';
 
+const StyledEditProfileDialog = styled.div`
+  .session-modal {
+    width: 468px;
+    .session-modal__body {
+      overflow: initial;
+    }
+  }
+
+  .avatar-center-inner {
+    position: relative;
+
+    .qr-view-button {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      height: 34px;
+      width: 34px;
+      border-radius: 50%;
+      background-color: var(--white-color);
+      transition: var(--default-duration);
+
+      &:hover {
+        filter: brightness(90%);
+      }
+
+      .session-icon-button {
+        opacity: 1;
+      }
+    }
+  }
+`;
+
+const StyledProfileName = styled(Flex)`
+  input {
+    height: 38px;
+    border-radius: 5px;
+    text-align: center;
+    font-size: var(--font-size-md);
+  }
+
+  &.uneditable {
+    p {
+      margin: 0;
+      padding: 0px var(--margins-lg) 0 var(--margins-sm);
+    }
+
+    .session-icon-button {
+      padding: 0px;
+    }
+  }
+`;
+
+const StyledSessionIdSection = styled(Flex)`
+  .session-button {
+    width: 160px;
+  }
+`;
+
 const QRView = ({ sessionID }: { sessionID: string }) => {
   const theme = useSelector(getTheme);
 
@@ -208,17 +273,28 @@ export const EditProfileDialog = () => {
     /* The <div> element has a child <input> element that allows keyboard interaction
     We use edit-profile-default class to prevent the qr icon on the avatar from clipping
     */
-    <div className="edit-profile-dialog" data-testid="edit-profile-dialog" onKeyUp={handleOnKeyUp}>
+    <StyledEditProfileDialog
+      className="edit-profile-dialog"
+      data-testid="edit-profile-dialog"
+      onKeyUp={handleOnKeyUp}
+    >
       <SessionWrapperModal
         title={window.i18n('editProfileModalTitle')}
         onClose={closeDialog}
         headerIconButtons={backButton}
+        headerReverse={true}
         showExitIcon={true}
         additionalClassName={mode === 'default' ? 'edit-profile-default' : undefined}
       >
-        {mode === 'qr' && <QRView sessionID={ourId} />}
+        {mode === 'qr' && (
+          <>
+            <QRView sessionID={ourId} />
+            <SpacerXS />
+          </>
+        )}
         {mode === 'default' && (
           <>
+            <SpacerSM />
             <ProfileHeader
               avatarPath={avatarPath}
               profileName={profileName}
@@ -226,17 +302,24 @@ export const EditProfileDialog = () => {
               onClick={handleProfileHeaderClick}
               setMode={setMode}
             />
-            <div className="profile-name-uneditable">
-              <p data-testid="your-profile-name">{updatedProfileName || profileName}</p>
+            <SpacerXL />
+            <StyledProfileName
+              container={true}
+              justifyContent="center"
+              alignItems="center"
+              className="uneditable"
+            >
               <SessionIconButton
                 iconType="pencil"
-                iconSize="medium"
+                iconSize="large"
                 onClick={() => {
                   setMode('edit');
                 }}
                 dataTestId="edit-profile-icon"
               />
-            </div>
+              <p data-testid="your-profile-name">{updatedProfileName || profileName}</p>
+            </StyledProfileName>
+            <Spacer3XL />
           </>
         )}
         {mode === 'edit' && (
@@ -248,10 +331,10 @@ export const EditProfileDialog = () => {
               onClick={handleProfileHeaderClick}
               setMode={setMode}
             />
-            <div className="profile-name">
+            <StyledProfileName container={true} justifyContent="center" alignItems="center">
+              {/* TODO swap with new session input */}
               <input
                 type="text"
-                className="profile-name-input"
                 value={profileName}
                 placeholder={window.i18n('displayName')}
                 onChange={onNameEdited}
@@ -261,39 +344,63 @@ export const EditProfileDialog = () => {
                 aria-required={true}
                 data-testid="profile-name-input"
               />
-            </div>
+            </StyledProfileName>
           </>
         )}
 
-        <div className="session-id-section">
+        <StyledSessionIdSection
+          container={true}
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          width="calc(100% - 80px)"
+        >
+          <SpacerLG />
           <YourSessionIDPill />
+          <SpacerLG />
           <YourSessionIDSelectable />
 
           <SessionSpinner loading={loading} />
+          <Spacer2XL />
 
           {mode === 'default' || mode === 'qr' ? (
-            <SessionButton
-              text={window.i18n('editMenuCopy')}
-              buttonType={SessionButtonType.Simple}
-              onClick={() => {
-                window.clipboard.writeText(ourId);
-                ToastUtils.pushCopiedToClipBoard();
-              }}
-              dataTestId="copy-button-profile-update"
-            />
+            <Flex
+              container={true}
+              justifyContent={mode === 'default' ? 'space-between' : 'center'}
+              alignItems="center"
+              width={'100%'}
+            >
+              <SessionButton
+                text={window.i18n('editMenuCopy')}
+                onClick={() => {
+                  window.clipboard.writeText(ourId);
+                  ToastUtils.pushCopiedToClipBoard();
+                }}
+                dataTestId="copy-button-profile-update"
+              />
+              {mode === 'default' ? (
+                <SessionButton
+                  text={window.i18n('qrView')}
+                  onClick={() => {
+                    setMode('qr');
+                  }}
+                  dataTestId="qr-view-profile-update"
+                />
+              ) : null}
+            </Flex>
           ) : (
             !loading && (
               <SessionButton
                 text={window.i18n('save')}
-                buttonType={SessionButtonType.Simple}
                 onClick={onClickOK}
                 disabled={loading}
                 dataTestId="save-button-profile-update"
               />
             )
           )}
-        </div>
+          <SpacerSM />
+        </StyledSessionIdSection>
       </SessionWrapperModal>
-    </div>
+    </StyledEditProfileDialog>
   );
 };
diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx
index 66f1c091f..9b758b12c 100644
--- a/ts/components/icon/Icons.tsx
+++ b/ts/components/icon/Icons.tsx
@@ -372,8 +372,8 @@ export const icons: Record<SessionIconType, IconProps> = {
     ratio: 1,
   },
   pencil: {
-    path: 'M4,16.4142136 L4,20 L7.58578644,20 L19.5857864,8 L16,4.41421356 L4,16.4142136 Z M16.7071068,2.29289322 L21.7071068,7.29289322 C22.0976311,7.68341751 22.0976311,8.31658249 21.7071068,8.70710678 L8.70710678,21.7071068 C8.5195704,21.8946432 8.26521649,22 8,22 L3,22 C2.44771525,22 2,21.5522847 2,21 L2,16 C2,15.7347835 2.10535684,15.4804296 2.29289322,15.2928932 L15.2928932,2.29289322 C15.6834175,1.90236893 16.3165825,1.90236893 16.7071068,2.29289322 Z',
-    viewBox: '1 1 21 21',
+    path: 'M19.19 40.92c.6-.22 1.12-.57 1.53-1.03l21.44-24a3.59 3.59 0 0 0-.7-5.31L36.7 6.93a4.5 4.5 0 0 0-4.5-.56c-.49.22-.92.53-1.27.92l-21.44 24c-.4.45-.68 1-.8 1.59l-1.6 7.67c-.09.47-.05.96.1 1.41.2.54.55 1.02 1.02 1.38.43.34.95.56 1.5.65a3.4 3.4 0 0 0 1.67-.15l7.81-2.92Zm14.74-31.5a.6.6 0 0 1 .43.14l4.77 3.65c.1.07.18.17.22.29a.22.22 0 0 1 0 .22l-3.5 3.91-5.53-4.26 3.5-3.92a.22.22 0 0 1 .06-.04h.05ZM12.28 33.45 27.88 16l5.53 4.26-15.6 17.44-.05.05-6.94 2.56 1.46-6.86Z',
+    viewBox: '1 1 50 50',
     ratio: 1,
   },
   phone: {