diff --git a/src/app/components/ResponsiveLayer/index.tsx b/src/app/components/ResponsiveLayer/index.tsx
index 39bec2464d..3dad3203f1 100644
--- a/src/app/components/ResponsiveLayer/index.tsx
+++ b/src/app/components/ResponsiveLayer/index.tsx
@@ -36,7 +36,15 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
 
   return (
     <Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
-      <Box fill={isMobile}>{props.children}</Box>
+      <Box
+        // Prevents Grommet flex overlap issue in smaller viewport
+        flex={{ shrink: 0 }}
+        style={{
+          minHeight: isMobile ? '100dvh' : 'auto',
+        }}
+      >
+        {props.children}
+      </Box>
     </Layer>
   )
 }
diff --git a/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
index 15a97f4dcc..66d24b3c60 100644
--- a/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -141,12 +141,12 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  margin-bottom: 48px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: 90%;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 12px;
@@ -309,6 +309,10 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     border: solid 1px #0092f6;
@@ -346,6 +350,12 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 24px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c1 {
     padding-top: 12px;
@@ -371,6 +381,7 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
     >
       <div
         class="c1"
+        style="max-height: 400px;"
       >
         <div
           aria-checked="false"
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 06fa35ae74..c26e671b97 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
@@ -26,8 +26,9 @@ exports[`<AddContact  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .c6 {
@@ -724,6 +725,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
           />
           <div
             class="c5"
+            style="min-height: 100dvh;"
           >
             <div
               class="c6"
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 3bca05f20a..b0dc047412 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
@@ -125,12 +125,12 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  margin-bottom: 48px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: 90%;
   padding-top: 24px;
   padding-bottom: 24px;
   padding-right: 12px;
@@ -288,6 +288,10 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 
 }
 
+@media only screen and (max-width:768px) {
+
+}
+
 @media only screen and (max-width:768px) {
   .c2 {
     border: solid 1px #0092f6;
@@ -319,6 +323,12 @@ exports[`<Contacts  /> should match snapshot 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c1 {
+    margin-bottom: 24px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c1 {
     padding-top: 12px;
@@ -342,6 +352,7 @@ exports[`<Contacts  /> should match snapshot 1`] = `
 >
   <div
     class="c1"
+    style="max-height: 400px;"
   >
     <div
       aria-checked="false"
diff --git a/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx b/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx
index 83d2144241..a14d430502 100644
--- a/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx
+++ b/src/app/components/Toolbar/Features/ScrollableContainer/index.tsx
@@ -1,7 +1,7 @@
 import { useContext, ReactNode } from 'react'
 import { Box } from 'grommet/es6/components/Box'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import { mobileScrollableAreaHeight, layerScrollableAreaHeight } from '../layer'
+import { layerScrollableAreaHeight } from '../layer'
 
 interface ScrollableContainerProps {
   children: ReactNode
@@ -15,7 +15,8 @@ export const ScrollableContainer = ({ children }: ScrollableContainerProps) => {
       gap="small"
       pad={{ vertical: 'medium', right: 'small' }}
       overflow={{ vertical: 'auto' }}
-      height={isMobile ? mobileScrollableAreaHeight : layerScrollableAreaHeight}
+      style={{ maxHeight: layerScrollableAreaHeight }}
+      margin={{ bottom: isMobile ? 'large' : 'none' }}
     >
       {children}
     </Box>
diff --git a/src/app/components/Toolbar/Features/layer.ts b/src/app/components/Toolbar/Features/layer.ts
index b38ef95a66..ab2316903f 100644
--- a/src/app/components/Toolbar/Features/layer.ts
+++ b/src/app/components/Toolbar/Features/layer.ts
@@ -1,3 +1,2 @@
-export const mobileScrollableAreaHeight = '90%'
 export const layerScrollableAreaHeight = '400px'
 export const layerOverlayMinHeight = '435px' // Keep child modals height in sync with parent modal
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 ea78699c97..6745016814 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,8 +26,9 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 
 .c6 {
@@ -645,6 +646,7 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
           />
           <div
             class="c5"
+            style="min-height: 100dvh;"
           >
             <form
               autocapitalize="off"