diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 5f30645cc..8d7b321bd 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -48,7 +48,7 @@ export default function Index() {
         {!shouldHideHeader && <Header />}
         <div className="flex flex-row w-full">
           <NavSidebar />
-          <div className="flex flex-1 flex-col overflow-x-hidden">
+          <div className="flex flex-1 flex-col overflow-x-hidden pb-footer-height md:pb-0">
             <ErrorBoundary>
               <Outlet />
             </ErrorBoundary>
diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js
index ee207d6c9..472af6805 100644
--- a/packages/app/tailwind.config.js
+++ b/packages/app/tailwind.config.js
@@ -21,6 +21,9 @@ module.exports = {
       spacing: {
         px: "1px",
       },
+      padding: {
+        'footer-height': 'calc(56px + env(safe-area-inset-bottom))',
+      },
     },
   },
   plugins: [],