diff --git a/src/App.css b/src/App.css
index 31dcfe2..93f623f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,17 @@
 .app {
   min-height: 100vh;
+  min-height: 100dvh;
   background: #0d0d0d;
   color: white;
   display: flex;
   flex-direction: column;
+  padding-top: env(safe-area-inset-top);
 }
 
 .main-content {
   flex: 1;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 }
 
 .loading-state {
diff --git a/src/components/Footer.css b/src/components/Footer.css
index 3a2f6a6..acd8e1a 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -2,6 +2,9 @@
   background: #1a1a1a;
   border-top: 1px solid #2a2a2a;
   padding: 0.75rem 1.5rem;
+  padding-left: max(1.5rem, env(safe-area-inset-left));
+  padding-right: max(1.5rem, env(safe-area-inset-right));
+  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
 }
 
 .footer-content {
diff --git a/src/components/Header.css b/src/components/Header.css
index ea79538..ed894dd 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -2,6 +2,8 @@
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 0 2rem;
+  padding-left: max(2rem, env(safe-area-inset-left));
+  padding-right: max(2rem, env(safe-area-inset-right));
   position: sticky;
   top: 0;
   z-index: 100;