diff --git a/apps/matrix/apps/web/src/app.css b/apps/matrix/apps/web/src/app.css
index 2466c3026..f12be897d 100644
--- a/apps/matrix/apps/web/src/app.css
+++ b/apps/matrix/apps/web/src/app.css
@@ -78,3 +78,37 @@
 	@apply bg-white/90 dark:bg-white/20 backdrop-blur-sm border border-black/10 dark:border-white/20
 	       hover:bg-white dark:hover:bg-white/30 hover:shadow-lg transition-all duration-200;
 }
+
+/* iOS Safe Area Insets for PWA */
+.safe-area-top {
+	padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-bottom {
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-area-left {
+	padding-left: env(safe-area-inset-left, 0px);
+}
+
+.safe-area-right {
+	padding-right: env(safe-area-inset-right, 0px);
+}
+
+.safe-area-x {
+	padding-left: env(safe-area-inset-left, 0px);
+	padding-right: env(safe-area-inset-right, 0px);
+}
+
+.safe-area-y {
+	padding-top: env(safe-area-inset-top, 0px);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-area-all {
+	padding-top: env(safe-area-inset-top, 0px);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-left: env(safe-area-inset-left, 0px);
+	padding-right: env(safe-area-inset-right, 0px);
+}
diff --git a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
index 5b53cfc15..8cd02e0cf 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -349,7 +349,7 @@
 	}
 </script>
 
-<div class="p-3 pb-4 lg:pb-20">
+<div class="p-3 pb-4 lg:pb-20 safe-area-bottom">
 	<!-- Reply/Edit Preview -->
 	{#if replyTo || editMessage}
 		<div
diff --git a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
index 27418c5ee..584b39728 100644
--- a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
@@ -217,7 +217,9 @@
 
 {#if loading}
 	<!-- Loading State -->
-	<div class="flex h-screen flex-col items-center justify-center gap-4 bg-background">
+	<div
+		class="flex h-screen flex-col items-center justify-center gap-4 bg-background safe-area-top safe-area-bottom"
+	>
 		<CircleNotch class="h-12 w-12 animate-spin text-primary" />
 		<div class="text-center">
 			<p class="font-medium text-foreground">Connecting to Matrix...</p>
@@ -236,7 +238,9 @@
 	</div>
 {:else if initError}
 	<!-- Error State -->
-	<div class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background">
+	<div
+		class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background safe-area-top safe-area-bottom"
+	>
 		<div class="rounded-full bg-red-500/10 p-4">
 			<WarningCircle class="h-12 w-12 text-red-500" />
 		</div>
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
index 658d1af52..cb3965c76 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
@@ -136,10 +136,10 @@
 
 {#if isMobile}
 	<!-- Mobile: Full-screen room list -->
-	<div class="flex flex-col h-full bg-background">
+	<div class="flex flex-col h-full bg-background safe-area-bottom">
 		<!-- User Info / Status Bar -->
 		<div
-			class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl"
+			class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl safe-area-top"
 		>
 			<div class="flex items-center justify-between">
 				<div>
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
index 73abd5b7d..550b5fb2f 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
@@ -114,7 +114,7 @@
 </script>
 
 <!-- Full-screen chat view for mobile -->
-<div class="flex flex-col h-full bg-background">
+<div class="flex flex-col h-full bg-background safe-area-top">
 	{#if matrixStore.currentRoom}
 		<!-- Room Header with back button -->
 		<RoomHeader
diff --git a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
index 66cf3053c..c4950042b 100644
--- a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
@@ -339,8 +339,8 @@
 
 	.theme-toggle {
 		position: absolute;
-		top: 1rem;
-		left: 1rem;
+		top: calc(1rem + env(safe-area-inset-top, 0px));
+		left: calc(1rem + env(safe-area-inset-left, 0px));
 		z-index: 50;
 		display: flex;
 		align-items: center;
@@ -381,7 +381,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 3rem 1rem 1.5rem;
+		padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
 		animation: fadeInScale 0.5s ease-out both;
 	}
 
@@ -428,7 +428,7 @@
 		flex: 1;
 		display: flex;
 		justify-content: center;
-		padding: 1rem 1rem 2rem;
+		padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
 	}
 
 	.form-card {