diff --git a/src/app/components/ResponsiveLayer/index.tsx b/src/app/components/ResponsiveLayer/index.tsx
index 3dad3203f1..edb3a69c1b 100644
--- a/src/app/components/ResponsiveLayer/index.tsx
+++ b/src/app/components/ResponsiveLayer/index.tsx
@@ -38,7 +38,7 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
     <Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
       <Box
         // Prevents Grommet flex overlap issue in smaller viewport
-        flex={{ shrink: 0 }}
+        flex={{ shrink: 0, grow: 1 }}
         style={{
           minHeight: isMobile ? '100dvh' : 'auto',
         }}
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
index 236ba9076f..5923734b06 100644
--- a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
+++ b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -18,6 +18,7 @@ import { LayerContainer } from './../LayerContainer'
 import { DeleteAccount } from './DeleteAccount'
 import { PrivateKeyFormatter } from '../../../PrivateKeyFormatter'
 import { RevealOverlayButton } from '../../../RevealOverlayButton'
+import styled from 'styled-components'
 
 interface FormValue {
   name: string
@@ -33,6 +34,13 @@ interface ManageableAccountDetailsProps {
   wallet: Wallet
 }
 
+const StyledForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-between;
+` as typeof Form
+
 export const ManageableAccountDetails = ({
   animation,
   closeHandler,
@@ -55,108 +63,106 @@ export const ManageableAccountDetails = ({
       <LayerContainer animation={animation} hideLayer={closeHandler}>
         <Tabs>
           <Tab title={t('toolbar.settings.myAccountsTab', 'My Accounts')}>
-            <Box flex="grow" justify="between">
-              <Form<FormValue>
-                onSubmit={({ value }) => {
-                  if (!editAccount) {
-                    return
+            <StyledForm<FormValue>
+              onSubmit={({ value }) => {
+                if (!editAccount) {
+                  return
+                }
+                editAccount(value.name)
+                closeHandler()
+              }}
+              value={value}
+              onChange={nextValue => setValue(nextValue)}
+            >
+              <Box gap="medium">
+                <FormField
+                  disabled={!editAccount}
+                  info={
+                    !editAccount ? (
+                      <span>
+                        <Trans
+                          i18nKey="toolbar.settings.accountNamingNotAvailable"
+                          t={t}
+                          components={{
+                            OpenWalletButton: (
+                              <Button
+                                color="link"
+                                onClick={() => {
+                                  closeParentHandler ? closeParentHandler() : closeHandler()
+                                  navigate('/open-wallet')
+                                }}
+                              />
+                            ),
+                          }}
+                          defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
+                        />
+                      </span>
+                    ) : undefined
                   }
-                  editAccount(value.name)
-                  closeHandler()
-                }}
-                value={value}
-                onChange={nextValue => setValue(nextValue)}
-              >
-                <Box gap="medium">
-                  <FormField
+                  name="name"
+                  validate={(name: string) =>
+                    name.trim().length > 16
+                      ? {
+                          message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
+                          status: 'error',
+                        }
+                      : undefined
+                  }
+                >
+                  <TextInput
                     disabled={!editAccount}
-                    info={
-                      !editAccount ? (
-                        <span>
-                          <Trans
-                            i18nKey="toolbar.settings.accountNamingNotAvailable"
-                            t={t}
-                            components={{
-                              OpenWalletButton: (
-                                <Button
-                                  color="link"
-                                  onClick={() => {
-                                    closeParentHandler ? closeParentHandler() : closeHandler()
-                                    navigate('/open-wallet')
-                                  }}
-                                />
-                              ),
-                            }}
-                            defaults="To name your account create a profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
-                          />
-                        </span>
-                      ) : undefined
-                    }
                     name="name"
-                    validate={(name: string) =>
-                      name.trim().length > 16
-                        ? {
-                            message: t('toolbar.settings.nameLengthError', 'No more than 16 characters'),
-                            status: 'error',
-                          }
-                        : undefined
-                    }
-                  >
-                    <TextInput
-                      disabled={!editAccount}
-                      name="name"
-                      placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
-                    />
-                  </FormField>
-                  <Box>
-                    <AddressBox address={wallet.address} border />
-                    <Text size="small" margin={'small'}>
-                      <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
-                    </Text>
-                  </Box>
-                  <Box justify="between" direction="row" gap="medium">
+                    placeholder={t('toolbar.settings.optionalName', 'Name (optional)')}
+                  />
+                </FormField>
+                <Box>
+                  <AddressBox address={wallet.address} border />
+                  <Text size="small" margin={'small'}>
+                    <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
+                  </Text>
+                </Box>
+                <Box justify="between" direction="row" gap="medium">
+                  <Button
+                    alignSelf="start"
+                    label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
+                    disabled={!wallet.privateKey}
+                    onClick={() => setLayerVisibility(true)}
+                  />
+
+                  {deleteAccount ? (
                     <Button
-                      alignSelf="start"
-                      label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
-                      disabled={!wallet.privateKey}
-                      onClick={() => setLayerVisibility(true)}
+                      plain
+                      color="status-error"
+                      label={t('toolbar.settings.delete.title', 'Delete Account')}
+                      onClick={() => setDeleteLayerVisibility(true)}
                     />
-
-                    {deleteAccount ? (
-                      <Button
-                        plain
-                        color="status-error"
-                        label={t('toolbar.settings.delete.title', 'Delete Account')}
-                        onClick={() => setDeleteLayerVisibility(true)}
-                      />
-                    ) : (
-                      <Tip
-                        content={t(
-                          'toolbar.settings.delete.tooltip',
-                          'You must have at least one account at all times.',
-                        )}
-                        dropProps={{ align: { bottom: 'top' } }}
-                      >
-                        <Box>
-                          <Button
-                            icon={<CircleInformation size="18px" color="status-error" />}
-                            disabled={true}
-                            plain
-                            color="status-error"
-                            label={t('toolbar.settings.delete.title', 'Delete Account')}
-                            onClick={() => setDeleteLayerVisibility(true)}
-                          />
-                        </Box>
-                      </Tip>
-                    )}
-                  </Box>
-                </Box>
-                <Box direction="row" justify="between" pad={{ top: 'large' }}>
-                  <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
-                  <Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
+                  ) : (
+                    <Tip
+                      content={t(
+                        'toolbar.settings.delete.tooltip',
+                        'You must have at least one account at all times.',
+                      )}
+                      dropProps={{ align: { bottom: 'top' } }}
+                    >
+                      <Box>
+                        <Button
+                          icon={<CircleInformation size="18px" color="status-error" />}
+                          disabled={true}
+                          plain
+                          color="status-error"
+                          label={t('toolbar.settings.delete.title', 'Delete Account')}
+                          onClick={() => setDeleteLayerVisibility(true)}
+                        />
+                      </Box>
+                    </Tip>
+                  )}
                 </Box>
-              </Form>
-            </Box>
+              </Box>
+              <Box direction="row" justify="between" pad={{ top: 'large' }}>
+                <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={closeHandler} />
+                <Button primary label={t('toolbar.settings.save', 'Save')} type="submit" />
+              </Box>
+            </StyledForm>
           </Tab>
         </Tabs>
       </LayerContainer>
@@ -164,30 +170,32 @@ export const ManageableAccountDetails = ({
         <LayerContainer hideLayer={hideLayer}>
           <Tabs>
             <Tab title={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}>
-              <Box flex="grow" justify="between" gap="medium">
-                <Text>
-                  {t(
-                    'toolbar.settings.exportPrivateKey.hint1',
-                    'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
-                  )}
-                </Text>
-                <Text>
-                  {t(
-                    'toolbar.settings.exportPrivateKey.hint2',
-                    'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
-                  )}
-                </Text>
-                <RevealOverlayButton
-                  label={t(
-                    'toolbar.settings.exportPrivateKey.confirm',
-                    'I understand, reveal my private key',
-                  )}
-                >
-                  <PrivateKeyFormatter privateKey={wallet.privateKey!} />
-                </RevealOverlayButton>
-              </Box>
-              <Box direction="row" justify="between" pad={{ top: 'large' }}>
-                <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
+              <Box flex="grow" justify="between">
+                <Box gap="medium">
+                  <Text>
+                    {t(
+                      'toolbar.settings.exportPrivateKey.hint1',
+                      'The private key consists of a string of characters. Anyone with access to your private key has direct access to the assets of that account.',
+                    )}
+                  </Text>
+                  <Text>
+                    {t(
+                      'toolbar.settings.exportPrivateKey.hint2',
+                      'Once the private key is lost, it cannot be retrieved. Please make sure to Backup the private key and keep it in a safe place.',
+                    )}
+                  </Text>
+                  <RevealOverlayButton
+                    label={t(
+                      'toolbar.settings.exportPrivateKey.confirm',
+                      'I understand, reveal my private key',
+                    )}
+                  >
+                    <PrivateKeyFormatter privateKey={wallet.privateKey!} />
+                  </RevealOverlayButton>
+                </Box>
+                <Box direction="row" justify="between" pad={{ top: 'large' }}>
+                  <Button secondary label={t('toolbar.settings.cancel', 'Cancel')} onClick={hideLayer} />
+                </Box>
               </Box>
             </Tab>
           </Tabs>
diff --git a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
index 9111adce56..9f4ca018f4 100644
--- a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
@@ -58,9 +58,9 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .c6 {
@@ -79,6 +79,9 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .c7 {
@@ -113,7 +116,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c11 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -133,7 +136,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   flex: 0 0 auto;
 }
 
-.c12 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -155,7 +158,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   overflow: visible;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,7 +178,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   padding-bottom: 6px;
 }
 
-.c18 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,23 +199,6 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   justify-content: center;
 }
 
-.c19 {
-  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 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
 .c20 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -266,7 +252,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   padding-top: 24px;
 }
 
-.c16 {
+.c17 {
   font-size: 18px;
   line-height: 24px;
   color: #0092f6;
@@ -329,7 +315,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c13 {
+.c14 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -347,40 +333,40 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   text-align: inherit;
 }
 
-.c13:focus {
+.c14:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c13:focus > circle,
-.c13:focus > ellipse,
-.c13:focus > line,
-.c13:focus > path,
-.c13:focus > polygon,
-.c13:focus > polyline,
-.c13:focus > rect {
+.c14:focus > circle,
+.c14:focus > ellipse,
+.c14:focus > line,
+.c14:focus > path,
+.c14:focus > polygon,
+.c14:focus > polyline,
+.c14:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c13:focus::-moz-focus-inner {
+.c14:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c13:focus:not(:focus-visible) {
+.c14:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c13:focus:not(:focus-visible) > circle,.c13:focus:not(:focus-visible) > ellipse,
-.c13:focus:not(:focus-visible) > line,.c13:focus:not(:focus-visible) > path,
-.c13:focus:not(:focus-visible) > polygon,.c13:focus:not(:focus-visible) > polyline,
-.c13:focus:not(:focus-visible) > rect {
+.c14:focus:not(:focus-visible) > circle,.c14:focus:not(:focus-visible) > ellipse,
+.c14:focus:not(:focus-visible) > line,.c14:focus:not(:focus-visible) > path,
+.c14:focus:not(:focus-visible) > polygon,.c14:focus:not(:focus-visible) > polyline,
+.c14:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c13:focus:not(:focus-visible)::-moz-focus-inner {
+.c14:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
@@ -521,12 +507,37 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c17 {
+.c18 {
   min-height: 0;
   padding-top: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
-.c15 {
+.c11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c16 {
   white-space: nowrap;
   margin-left: 12px;
   margin-right: 12px;
@@ -534,11 +545,11 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   margin-bottom: 3px;
 }
 
-.c15:hover {
+.c16:hover {
   color: #000000;
 }
 
-.c15:focus {
+.c16:focus {
   z-index: 1;
 }
 
@@ -725,27 +736,27 @@ exports[`<AddContact  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c14 {
+  .c15 {
     margin-left: 6px;
     margin-right: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c14 {
+  .c15 {
     margin-top: 2px;
     margin-bottom: 2px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c14 {
+  .c15 {
     border-bottom: solid 2px #0092f6;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c14 {
+  .c15 {
     padding-bottom: 3px;
   }
 }
@@ -866,28 +877,28 @@ exports[`<AddContact  /> should match snapshot 1`] = `
                 </button>
               </div>
               <div
-                class="c10 "
+                class="c10 c11"
               >
                 <div
-                  class="c11"
+                  class="c12"
                   role="tablist"
                 >
                   <div
-                    class="c12 "
+                    class="c13 "
                   >
                     <button
                       aria-expanded="true"
                       aria-selected="true"
-                      class="c13"
+                      class="c14"
                       role="tab"
                       style="text-transform: capitalize;"
                       type="button"
                     >
                       <div
-                        class="c14 c15"
+                        class="c15 c16"
                       >
                         <span
-                          class="c16"
+                          class="c17"
                         >
                           toolbar.contacts.add
                         </span>
@@ -897,17 +908,17 @@ exports[`<AddContact  /> should match snapshot 1`] = `
                 </div>
                 <div
                   aria-label="toolbar.contacts.add Tab Contents"
-                  class="c17"
+                  class="c18"
                   role="tabpanel"
                 >
                   <div
-                    class="c18"
+                    class="c19"
                   >
                     <form
                       style="display: flex; flex: 1; flex-direction: column;"
                     >
                       <div
-                        class="c19"
+                        class="c5"
                       >
                         <div
                           class="c20 "
diff --git a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap
index 94f6c93526..e7af5e9466 100644
--- a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,28 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   -webkit-font-smoothing: antialiased;
 }
 
-.c2 {
+.c1 {
+  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 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,12 +57,12 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c2:hover {
+.c3:hover {
   background-color: #0092f6;
   color: #FFFFFF;
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,7 +79,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex: 1 0 auto;
 }
 
-.c4 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -72,7 +93,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -86,7 +107,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -100,7 +121,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c9 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -118,7 +139,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c1 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -137,13 +158,23 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   overflow-y: auto;
 }
 
-.c5 {
+.c10 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  height: 24px;
+}
+
+.c6 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -169,48 +200,48 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c8:hover {
+.c9:hover {
   box-shadow: 0px 0px 0px 2px #0092f6;
 }
 
-.c8:focus {
+.c9:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c8:focus > circle,
-.c8:focus > ellipse,
-.c8:focus > line,
-.c8:focus > path,
-.c8:focus > polygon,
-.c8:focus > polyline,
-.c8:focus > rect {
+.c9:focus > circle,
+.c9:focus > ellipse,
+.c9:focus > line,
+.c9:focus > path,
+.c9:focus > polygon,
+.c9:focus > polyline,
+.c9:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c8:focus::-moz-focus-inner {
+.c9:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c8:focus:not(:focus-visible) {
+.c9:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible) > circle,.c8:focus:not(:focus-visible) > ellipse,
-.c8:focus:not(:focus-visible) > line,.c8:focus:not(:focus-visible) > path,
-.c8:focus:not(:focus-visible) > polygon,.c8:focus:not(:focus-visible) > polyline,
-.c8:focus:not(:focus-visible) > rect {
+.c9:focus:not(:focus-visible) > circle,.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c8:focus:not(:focus-visible)::-moz-focus-inner {
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c10 {
+.c12 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -239,44 +270,44 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   font-weight: bold;
 }
 
-.c10:hover {
+.c12:hover {
   box-shadow: 0px 0px 0px 2px #0092f6;
 }
 
-.c10:focus {
+.c12:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c10:focus > circle,
-.c10:focus > ellipse,
-.c10:focus > line,
-.c10:focus > path,
-.c10:focus > polygon,
-.c10:focus > polyline,
-.c10:focus > rect {
+.c12:focus > circle,
+.c12:focus > ellipse,
+.c12:focus > line,
+.c12:focus > path,
+.c12:focus > polygon,
+.c12:focus > polyline,
+.c12:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c10:focus::-moz-focus-inner {
+.c12:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c10:focus:not(:focus-visible) {
+.c12:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c10:focus:not(:focus-visible) > circle,.c10:focus:not(:focus-visible) > ellipse,
-.c10:focus:not(:focus-visible) > line,.c10:focus:not(:focus-visible) > path,
-.c10:focus:not(:focus-visible) > polygon,.c10:focus:not(:focus-visible) > polyline,
-.c10:focus:not(:focus-visible) > rect {
+.c12:focus:not(:focus-visible) > circle,.c12:focus:not(:focus-visible) > ellipse,
+.c12:focus:not(:focus-visible) > line,.c12:focus:not(:focus-visible) > path,
+.c12:focus:not(:focus-visible) > polygon,.c12:focus:not(:focus-visible) > polyline,
+.c12:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c10:focus:not(:focus-visible)::-moz-focus-inner {
+.c12:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
@@ -293,19 +324,19 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c2 {
+  .c3 {
     border: solid 1px #0092f6;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c2 {
+  .c3 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c6 {
+  .c7 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -324,20 +355,20 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
+  .c2 {
     margin-bottom: 24px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
+  .c2 {
     padding-top: 12px;
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c1 {
+  .c2 {
     padding-right: 6px;
   }
 }
@@ -346,78 +377,91 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+  .c10 {
+    height: 12px;
+  }
+}
+
 <div
   class="c0"
   style="min-height: 100dvh;"
 >
   <div
     class="c1"
-    style="max-height: 400px;"
   >
     <div
-      aria-checked="false"
       class="c2"
-      data-testid="account-choice"
-      role="checkbox"
-      tabindex="0"
+      style="max-height: 400px;"
     >
       <div
+        aria-checked="false"
         class="c3"
+        data-testid="account-choice"
+        role="checkbox"
+        tabindex="0"
       >
         <div
           class="c4"
-          data-testid="account-name"
         >
-          <span
+          <div
             class="c5"
+            data-testid="account-name"
           >
-            My Contact
-          </span>
-        </div>
-        <div
-          class="c4"
-        >
-          <span
+            <span
+              class="c6"
+            >
+              My Contact
+            </span>
+          </div>
+          <div
             class="c5"
           >
             <span
-              class="notranslate"
-              translate="no"
+              class="c6"
             >
-              oasis1qq2v...sv0d5eq4
+              <span
+                class="notranslate"
+                translate="no"
+              >
+                oasis1qq2v...sv0d5eq4
+              </span>
             </span>
-          </span>
-        </div>
-        <div
-          class="c6"
-        >
+          </div>
           <div
-            class="c3"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c4"
             >
-              <button
+              <div
                 class="c8"
-                type="button"
               >
-                Manage
-              </button>
+                <button
+                  class="c9"
+                  type="button"
+                >
+                  Manage
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="c9"
-  >
-    <button
+    <div
       class="c10"
-      type="button"
+    />
+    <div
+      class="c11"
     >
-      Add Contact
-    </button>
+      <button
+        class="c12"
+        type="button"
+      >
+        Add Contact
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/app/components/Toolbar/Features/Contacts/index.tsx b/src/app/components/Toolbar/Features/Contacts/index.tsx
index 58b295d810..80694d2fbf 100644
--- a/src/app/components/Toolbar/Features/Contacts/index.tsx
+++ b/src/app/components/Toolbar/Features/Contacts/index.tsx
@@ -1,26 +1,26 @@
-import { useState, useContext, ReactNode } from 'react'
+import { useState, ReactNode } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
-import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Inbox } from 'grommet-icons/es6/icons/Inbox'
 import { selectContactsList } from 'app/state/contacts/selectors'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
 import { ScrollableContainer } from '../ScrollableContainer'
-import { layerScrollableAreaHeight } from '../layer'
 
 type ContactsListEmptyStateProps = {
   children: ReactNode
 }
 
 const ContactsListEmptyState = ({ children }: ContactsListEmptyStateProps) => (
-  <Box gap="medium" align="center" pad={{ top: 'large' }}>
+  <Box flex="grow" gap="medium" align="center" pad={{ top: 'large' }}>
     <Inbox size="36px" color="currentColor" />
-    <Box pad="large">{children}</Box>
+    <Box flex="grow" pad="large">
+      {children}
+    </Box>
   </Box>
 )
 
@@ -33,7 +33,6 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
   const [layerVisibility, setLayerVisibility] = useState(false)
   const contacts = useSelector(selectContactsList)
   const unlockedStatus = useSelector(selectUnlockedStatus)
-  const isMobile = useContext(ResponsiveContext) === 'small'
   const isAvailable = unlockedStatus === 'unlockedProfile'
   const navigate = useNavigate()
 
@@ -63,13 +62,11 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
   }
 
   return (
-    <>
+    <Box flex="grow" justify="between" gap="medium">
       {!contacts.length && (
-        <Box justify="center" flex="grow" height={isMobile ? 'auto' : layerScrollableAreaHeight}>
-          <ContactsListEmptyState>
-            {t('toolbar.contacts.emptyList', 'You have no contacts yet.')}
-          </ContactsListEmptyState>
-        </Box>
+        <ContactsListEmptyState>
+          {t('toolbar.contacts.emptyList', 'You have no contacts yet.')}
+        </ContactsListEmptyState>
       )}
       {!!contacts.length && (
         <ScrollableContainer>
@@ -86,6 +83,6 @@ export const Contacts = ({ closeHandler }: ContactsProps) => {
         />
       </Box>
       {layerVisibility && <AddContact setLayerVisibility={setLayerVisibility} />}
-    </>
+    </Box>
   )
 }
diff --git a/src/app/components/Toolbar/Features/LayerContainer/index.tsx b/src/app/components/Toolbar/Features/LayerContainer/index.tsx
index 01cf984a4b..d844b82c87 100644
--- a/src/app/components/Toolbar/Features/LayerContainer/index.tsx
+++ b/src/app/components/Toolbar/Features/LayerContainer/index.tsx
@@ -29,7 +29,7 @@ export const LayerContainer = ({ animation, children, hideLayer }: LayerContaine
         minHeight: `min(${layerOverlayMinHeight}, 90dvh)`,
       }}
     >
-      <Box margin={{ top: 'small', bottom: 'medium', horizontal: 'medium' }}>
+      <Box flex="grow" margin={{ top: 'small', bottom: 'medium', horizontal: 'medium' }}>
         <Box align="end">
           <Button
             data-testid="close-settings-modal"
diff --git a/src/app/components/Toolbar/Features/ProfileModalButton/index.tsx b/src/app/components/Toolbar/Features/ProfileModalButton/index.tsx
index 91a5b1f4c9..39cb6b15ac 100644
--- a/src/app/components/Toolbar/Features/ProfileModalButton/index.tsx
+++ b/src/app/components/Toolbar/Features/ProfileModalButton/index.tsx
@@ -80,7 +80,7 @@ export const ProfileModalButton = memo(() => {
             </Tab>
           </Tabs>
           {isMobile && (
-            <Box direction="row" justify="between" margin={{ vertical: 'xlarge' }} gap="medium">
+            <Box direction="row" justify="between" margin={{ top: 'large', bottom: 'medium' }} gap="medium">
               <ButtonLink
                 icon={<Add a11yTitle={undefined} />}
                 label={t('menu.addAccounts', 'Add accounts')}
diff --git a/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
index 6745016814..a81a9ccefb 100644
--- a/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
@@ -26,9 +26,9 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .c6 {
diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
index e1f2df8e32..c8183150ca 100644
--- a/src/styles/theme/ThemeProvider.tsx
+++ b/src/styles/theme/ThemeProvider.tsx
@@ -222,8 +222,16 @@ const grommetCustomTheme: ThemeType = {
     panel: {
       extend: props => css`
         padding-top: ${props.theme.global?.edgeSize?.medium};
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
       `,
     },
+    extend: css`
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+    `,
   },
   layer: {
     /**