diff --git a/app/(app)/_layout/BottomNav.tsx b/app/(app)/_layout/BottomNav.tsx
index 8dc7dfc..a0d45b0 100644
--- a/app/(app)/_layout/BottomNav.tsx
+++ b/app/(app)/_layout/BottomNav.tsx
@@ -43,6 +43,7 @@ export default function BottomNav() {
             />
           </Link>
         ))}
+        <div className="standalone:block hidden h-[20px] w-full"></div>
       </div>
     </footer>
   );
diff --git a/app/globals.css b/app/globals.css
index ecdb627..03b0858 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -55,6 +55,14 @@
     --header-height: 72px;
     --bottom-nav-height: 56px;
   }
+  @media all and (display-mode: standalone) {
+    :root {
+      --bottom-nav-height: 76px;
+    }
+    .dark {
+      --bottom-nav-height: 76px;
+    }
+  }
 }
 
 @layer base {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e49271a..f20308f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -104,6 +104,9 @@ module.exports = {
         3: 3,
         4: 4,
       },
+      screens: {
+        standalone: { raw: "(display-mode: standalone)" },
+      },
     },
   },
   plugins: [