diff --git a/frontend/public/index.html b/frontend/public/index.html
index f7f1078..fe0cb73 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
     <meta name="theme-color" content="#FFDC00" />
     <meta
       name="description"
diff --git a/frontend/src/components/ChatInterface.css b/frontend/src/components/ChatInterface.css
index fe946dd..4408824 100644
--- a/frontend/src/components/ChatInterface.css
+++ b/frontend/src/components/ChatInterface.css
@@ -4,16 +4,25 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
+  height: 100dvh;
+  height: 100svh;
+  min-height: 100vh;
+  min-height: 100dvh;
+  min-height: 100lvh;
+  min-height: -webkit-fill-available;
   max-width: 800px;
+  width: 100%;
   margin: 0 auto;
   background-color: #ffffff;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
 }
 
 /* Header */
 .chat-header {
   background: linear-gradient(135deg, #ffdc00 0%, #ffb700 100%);
   padding: 20px;
+  padding-top: calc(20px + env(safe-area-inset-top));
   text-align: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -88,6 +97,7 @@
   flex: 1;
   overflow-y: auto;
   padding: 20px;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
   background-color: #f5f5f5;
 }
 
@@ -193,6 +203,7 @@
   display: flex;
   gap: 10px;
   padding: 16px 20px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
   background-color: #fff;
   border-top: 1px solid #e0e0e0;
 }
@@ -244,6 +255,7 @@
   position: fixed;
   top: 20px;
   right: 20px;
+  top: max(20px, env(safe-area-inset-top));
   background-color: #c62828;
   color: white;
   border: none;
@@ -268,6 +280,12 @@
     max-width: 100%;
     border-radius: 0;
     box-shadow: none;
+    height: 100vh;
+    height: 100dvh;
+    min-height: 100vh;
+    min-height: 100dvh;
+    min-height: 100lvh;
+    min-height: -webkit-fill-available;
   }
 
   .message {
@@ -279,13 +297,57 @@
   }
 
   .quick-exit {
-    top: 10px;
+    top: 12px;
+    top: max(12px, env(safe-area-inset-top));
     right: 10px;
     padding: 8px 16px;
     font-size: 12px;
   }
 }
 
+@media (max-width: 600px) {
+  .chat-header {
+    padding: 12px 16px;
+    padding-top: calc(12px + env(safe-area-inset-top));
+  }
+
+  .chat-header h1 {
+    font-size: 20px;
+  }
+
+  .chat-header p {
+    font-size: 13px;
+  }
+
+  .progress-bar {
+    margin-top: 10px;
+    height: 16px;
+  }
+
+  .progress-text {
+    font-size: 10px;
+  }
+
+  .chat-messages {
+    padding: 12px 14px;
+  }
+
+  .chat-input-form {
+    gap: 8px;
+    padding: 12px 14px;
+  }
+
+  .chat-input {
+    padding: 10px 14px;
+    font-size: 14px;
+  }
+
+  .send-btn {
+    padding: 10px 18px;
+    font-size: 14px;
+  }
+}
+
 /* Scrollbar Styling */
 .chat-messages::-webkit-scrollbar {
   width: 6px;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4a1df4d..b8ed223 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,11 @@
+html {
+  height: 100%;
+}
+
 body {
   margin: 0;
+  min-height: 100%;
+  min-height: -webkit-fill-available;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
@@ -7,6 +13,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root {
+  min-height: 100%;
+  min-height: -webkit-fill-available;
+  display: flex;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
