diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 7a77e3dc..75031a23 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -61,7 +61,7 @@ export default function Index() {
         <div className="w-full max-w-screen-xl">
           <div className="flex flex-row">
             <NavSidebar />
-            <div className="flex flex-1 flex-col pb-safe-area w-full md:w-1/3">
+            <div className="flex flex-1 flex-col pb-safe-area-plus-footer w-full md:w-1/3">
               {!shouldHideHeader && <Header />}
               <ErrorBoundary>
                 <Outlet />
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index b516bfbc..5aee52e0 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -930,6 +930,12 @@ svg.repeat {
   padding-bottom: env(safe-area-inset-bottom);
 }
 
+@media (max-width: 768px) {
+  .pb-safe-area-plus-footer {
+    padding-bottom: calc(env(safe-area-inset-bottom) + 56px);
+  }
+}
+
 .active > .icon-outline {
   display: none;
 }