diff --git a/playwright/tests/toolbar.spec.ts b/playwright/tests/toolbar.spec.ts
index 08187451c0..22bf637c20 100644
--- a/playwright/tests/toolbar.spec.ts
+++ b/playwright/tests/toolbar.spec.ts
@@ -53,3 +53,18 @@ test.describe('Profile tab', () => {
     await expect(page.getByText('Loading', { exact: true })).toBeHidden()
   })
 })
+
+test.describe('My Accounts tab', () => {
+  test('should set custom name', async ({ page }) => {
+    await page.goto('/open-wallet/private-key')
+    await fillPrivateKeyAndPassword(page)
+    await page.getByTestId('account-selector').click()
+    await page.getByText('Manage').click()
+    await page.getByPlaceholder('Name (Optional)').fill('My Custom Name')
+    await page.keyboard.press('Enter')
+    await page.getByTestId('close-settings-modal').click()
+    await expect(page.getByTestId('close-settings-modal')).not.toBeVisible()
+    await expect(page.getByText('My Custom Name')).toBeVisible()
+    await expect(page.getByText('oasis1 qz0k 5q8v jqvu 4s4n wxyj 406y lnfl kc4v rcjg huwk')).not.toBeVisible()
+  })
+})
diff --git a/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap
index f480cf9b63..860149f499 100644
--- a/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap
@@ -86,12 +86,12 @@ exports[`<AddressBox /> should render address properly 1`] = `
   max-width: 100%;
   min-width: 0;
   min-height: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
 }
 
 .c5 {
@@ -232,7 +232,7 @@ exports[`<AddressBox /> should render address properly 1`] = `
 `;
 
 exports[`<EditableNameBox /> should render name properly 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -243,28 +243,28 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   stroke: link;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -275,23 +275,23 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   stroke: currentColor;
 }
 
-.c10 g {
+.c11 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c10 *:not([stroke])[fill='none'] {
+.c11 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c10 *[stroke*='#'],.c10 *[STROKE*='#'] {
+.c11 *[stroke*='#'],.c11 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c10 *[fill-rule],
-.c10 *[FILL-RULE],
-.c10 *[fill*='#'],.c10 *[FILL*='#'] {
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*='#'],.c11 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -342,6 +342,23 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
 }
 
 .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -353,12 +370,10 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  padding-left: 12px;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -380,7 +395,7 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   justify-content: center;
 }
 
-.c9 {
+.c10 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -390,14 +405,14 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   width: 12px;
 }
 
-.c3 {
+.c4 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
   word-break: break-word;
 }
 
-.c4 {
+.c5 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -417,44 +432,44 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   padding: 12px;
 }
 
-.c4:focus {
+.c5:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus > circle,
-.c4:focus > ellipse,
-.c4:focus > line,
-.c4:focus > path,
-.c4:focus > polygon,
-.c4:focus > polyline,
-.c4:focus > rect {
+.c5:focus > circle,
+.c5:focus > ellipse,
+.c5:focus > line,
+.c5:focus > path,
+.c5:focus > polygon,
+.c5:focus > polyline,
+.c5:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c4:focus::-moz-focus-inner {
+.c5:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c4:focus:not(:focus-visible) {
+.c5:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c4:focus:not(:focus-visible) > circle,.c4:focus:not(:focus-visible) > ellipse,
-.c4:focus:not(:focus-visible) > line,.c4:focus:not(:focus-visible) > path,
-.c4:focus:not(:focus-visible) > polygon,.c4:focus:not(:focus-visible) > polyline,
-.c4:focus:not(:focus-visible) > rect {
+.c5:focus:not(:focus-visible) > circle,.c5:focus:not(:focus-visible) > ellipse,
+.c5:focus:not(:focus-visible) > line,.c5:focus:not(:focus-visible) > path,
+.c5:focus:not(:focus-visible) > polygon,.c5:focus:not(:focus-visible) > polyline,
+.c5:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c4:focus:not(:focus-visible)::-moz-focus-inner {
+.c5:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c6 {
+.c7 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -479,48 +494,48 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   transition-timing-function: ease-in-out;
 }
 
-.c6:hover {
+.c7:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c6:focus {
+.c7:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c6:focus > circle,
-.c6:focus > ellipse,
-.c6:focus > line,
-.c6:focus > path,
-.c6:focus > polygon,
-.c6:focus > polyline,
-.c6:focus > rect {
+.c7:focus > circle,
+.c7:focus > ellipse,
+.c7:focus > line,
+.c7:focus > path,
+.c7:focus > polygon,
+.c7:focus > polyline,
+.c7:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c6:focus::-moz-focus-inner {
+.c7:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c6:focus:not(:focus-visible) {
+.c7:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c6:focus:not(:focus-visible) > circle,.c6:focus:not(:focus-visible) > ellipse,
-.c6:focus:not(:focus-visible) > line,.c6:focus:not(:focus-visible) > path,
-.c6:focus:not(:focus-visible) > polygon,.c6:focus:not(:focus-visible) > polyline,
-.c6:focus:not(:focus-visible) > rect {
+.c7:focus:not(:focus-visible) > circle,.c7:focus:not(:focus-visible) > ellipse,
+.c7:focus:not(:focus-visible) > line,.c7:focus:not(:focus-visible) > path,
+.c7:focus:not(:focus-visible) > polygon,.c7:focus:not(:focus-visible) > polyline,
+.c7:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c6:focus:not(:focus-visible)::-moz-focus-inner {
+.c7:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c7 {
+.c8 {
   background-color: background-custom-2;
   border-width: 1px;
   color: text-custom;
@@ -550,6 +565,12 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c3 {
+    padding-left: 6px;
+  }
+}
+
 <div>
   <div
     class="c0"
@@ -560,47 +581,51 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
       <div
         class="c2"
       >
-        <span
+        <div
           class="c3"
-          style="display: inline-flex; align-items: center; justify-content: space-between; flex: 1;"
-        >
-          My Wallet
-        </span>
-        <button
-          class="c4"
-          type="button"
         >
-          <svg
-            aria-label="Edit"
+          <span
+            class="c4"
+            style="display: inline-flex; align-items: center; justify-content: space-between; flex: 1;"
+          >
+            My Wallet
+          </span>
+          <button
             class="c5"
-            data-testid="editable-name-edit-button"
-            viewBox="0 0 24 24"
+            type="button"
           >
-            <path
-              d="m14 4 6 6-6-6zm8.294 1.294c.39.39.387 1.025-.008 1.42L9 20l-7 2 2-7L17.286 1.714a1 1 0 0 1 1.42-.008l3.588 3.588zM3 19l2 2m2-4 8-8"
-              fill="none"
-              stroke="#000"
-              stroke-width="2"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-label="Edit"
+              class="c6"
+              data-testid="editable-name-edit-button"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="m14 4 6 6-6-6zm8.294 1.294c.39.39.387 1.025-.008 1.42L9 20l-7 2 2-7L17.286 1.714a1 1 0 0 1 1.42-.008l3.588 3.588zM3 19l2 2m2-4 8-8"
+                fill="none"
+                stroke="#000"
+                stroke-width="2"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
     <button
-      class="c6 c7"
+      class="c7 c8"
       data-testid="copy-address-button"
       type="button"
     >
       <div
-        class="c8"
+        class="c9"
       >
         oasis1qq...7ftqph
         <div
-          class="c9"
+          class="c10"
         />
         <svg
           aria-label="Copy"
-          class="c10"
+          class="c11"
           viewBox="0 0 24 24"
         >
           <path
diff --git a/src/app/components/AddressBox/index.tsx b/src/app/components/AddressBox/index.tsx
index 6b39ae109b..2527372670 100644
--- a/src/app/components/AddressBox/index.tsx
+++ b/src/app/components/AddressBox/index.tsx
@@ -76,9 +76,7 @@ const Container = ({ address, border, children, copyToClipboard, separator }: Co
         {copyToClipboard === 'icon' && (
           <Button onClick={() => copyAddress()} icon={<Copy size="18px" />} data-testid="copy-address-icon" />
         )}
-        <Box direction="row" flex={{ grow: 1 }}>
-          {children}
-        </Box>
+        <Box flex>{children}</Box>
       </Box>
 
       {copyToClipboard === 'button' && (
@@ -155,10 +153,12 @@ interface EditableNameBoxProps extends EditableAddressBoxProps {
 
 export const EditableNameBox = ({ address, openEditModal, name }: EditableNameBoxProps) => (
   <Container address={address} copyToClipboard="button" separator>
-    <TextWrapper>{name}</TextWrapper>
-    <Button
-      onClick={openEditModal}
-      icon={<Edit color="link" size="16px" data-testid="editable-name-edit-button" />}
-    />
+    <Box direction="row" pad={{ left: 'small' }}>
+      <TextWrapper>{name}</TextWrapper>
+      <Button
+        onClick={openEditModal}
+        icon={<Edit color="link" size="16px" data-testid="editable-name-edit-button" />}
+      />
+    </Box>
   </Container>
 )
diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
index 6e9405e567..6e5322689c 100644
--- a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -166,12 +166,12 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   max-width: 100%;
   min-width: 0;
   min-height: 0;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
 }
 
 .c24 {