diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9da80d4..29fee38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable user-visible changes are recorded here. Versions follow [Semantic Ve
 
 ## Unreleased
 
+### Changed
+
+- Redrew the landing page phone frame with a titanium-style band, Dynamic
+  Island, iOS status bar, physical side buttons and a home indicator.
+
 ## [0.15.1] — 2026-09-14
 
 ### Changed
diff --git a/web/landing.css b/web/landing.css
index 7960431..ab56ba7 100644
--- a/web/landing.css
+++ b/web/landing.css
@@ -625,47 +625,121 @@
 
 .phone-device {
   position: relative;
-  padding: 9px;
-  border: 1px solid #30343d;
-  border-radius: 46px;
-  background: #111319;
+  padding: 3px;
+  border-radius: 54px;
+  background:
+    linear-gradient(160deg, #62666e 0%, #2c2f36 22%, #1c1f25 50%, #33363d 78%, #5d616a 100%);
   box-shadow:
     0 48px 100px rgb(30 39 24 / 24%),
     0 10px 26px rgb(30 39 24 / 17%),
-    inset 0 0 0 1px rgb(255 255 255 / 7%);
+    0 1px 0 rgb(255 255 255 / 45%),
+    inset 0 0 0 1px rgb(255 255 255 / 10%);
 }
 
-.phone-device::before,
-.phone-device::after {
-  position: absolute;
-  width: 3px;
-  border-radius: 3px 0 0 3px;
-  background: #292d35;
-  content: "";
+.phone-bezel {
+  padding: 9px;
+  border-radius: 51px;
+  background: #050609;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
 }
 
-.phone-device::before {
-  height: 70px;
-  top: 118px;
-  left: -4px;
+/* physical buttons: action + volume on the left, side button on the right */
+.phone-btn {
+  position: absolute;
+  width: 4px;
+  border-radius: 2px 0 0 2px;
+  background: linear-gradient(90deg, #6a6e76, #3a3d44 45%, #24272d);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), -1px 0 0 rgb(0 0 0 / 30%);
 }
 
-.phone-device::after {
-  height: 92px;
-  top: 145px;
+.phone-btn-action { height: 24px; top: 118px; left: -4px; }
+.phone-btn-vol-up { height: 56px; top: 164px; left: -4px; }
+.phone-btn-vol-down { height: 56px; top: 232px; left: -4px; }
+
+.phone-btn-power {
+  height: 96px;
+  top: 196px;
   right: -4px;
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 2px 2px 0;
+  background: linear-gradient(270deg, #6a6e76, #3a3d44 45%, #24272d);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 1px 0 0 rgb(0 0 0 / 30%);
 }
 
 .hero-phone-screen {
   display: grid;
+  position: relative;
   width: 100%;
   min-height: 650px;
   overflow: hidden;
-  border-radius: 37px;
+  border-radius: 42px;
   background: #0c0f14;
   color: #f1f3f6;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto auto 1fr auto;
+}
+
+/* iOS status bar with the Dynamic Island notch */
+.phone-status {
+  display: grid;
+  height: 48px;
+  padding: 0 28px;
+  background: #11151c;
+  color: #f1f3f6;
+  font: 600 13px/1 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
+  letter-spacing: -.01em;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+
+.phone-status > span:first-child {
+  grid-column: 1;
+}
+
+.phone-status > span:last-child {
+  display: flex;
+  grid-column: 2;
+  justify-content: end;
+  align-items: center;
+  gap: 6px;
+}
+
+.phone-status svg {
+  display: block;
+  fill: currentcolor;
+}
+
+.phone-island {
+  position: absolute;
+  top: 11px;
+  left: 50%;
+  width: 88px;
+  height: 27px;
+  border-radius: 14px;
+  background: #000;
+  box-shadow: 0 0 0 1px rgb(255 255 255 / 3%);
+  transform: translateX(-50%);
+}
+
+.phone-island::after {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 35%, #2b3552, #0a0d16 60%);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
+  content: "";
+}
+
+.phone-home {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  width: 118px;
+  height: 5px;
+  border-radius: 3px;
+  background: rgb(241 243 246 / 80%);
+  transform: translateX(-50%);
 }
 
 .hero-phone-head {
@@ -850,7 +924,7 @@
 
 .hero-phone-keys {
   display: grid;
-  padding: 11px 10px 16px;
+  padding: 11px 10px 26px;
   border-top: 1px solid #292d35;
   background: #11151c;
   grid-template-columns: repeat(8, minmax(0, 1fr));
@@ -2874,6 +2948,14 @@
     width: min(310px, 88%);
   }
 
+  .phone-status {
+    padding: 0 24px;
+  }
+
+  .phone-island {
+    width: 80px;
+  }
+
   .hero-phone-screen {
     min-height: 610px;
   }
diff --git a/web/main.ts b/web/main.ts
index fc50c31..c50ea25 100644
--- a/web/main.ts
+++ b/web/main.ts
@@ -203,7 +203,21 @@ function renderLanding(): void {
             <div class="demo-aura" aria-hidden="true"></div>
             <figure class="real-phone-demo">
               <div class="phone-device">
+                <span class="phone-btn phone-btn-action" aria-hidden="true"></span>
+                <span class="phone-btn phone-btn-vol-up" aria-hidden="true"></span>
+                <span class="phone-btn phone-btn-vol-down" aria-hidden="true"></span>
+                <span class="phone-btn phone-btn-power" aria-hidden="true"></span>
+                <div class="phone-bezel">
                 <div class="hero-phone-screen">
+                  <div class="phone-status" aria-hidden="true">
+                    <span>9:41</span>
+                    <span class="phone-island"></span>
+                    <span>
+                      <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="4.5" y="5" width="3" height="6" rx="1"/><rect x="9" y="2.5" width="3" height="8.5" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
+                      <svg width="17" height="12" viewBox="0 0 18 13" fill="none" stroke="currentcolor" stroke-width="1.6" stroke-linecap="round"><path d="M1.58 5.58A10.5 10.5 0 0 1 16.42 5.58"/><path d="M3.84 7.84A7.3 7.3 0 0 1 14.16 7.84"/><path d="M6.1 10.1A4.1 4.1 0 0 1 11.9 10.1"/><circle cx="9" cy="11.6" r="1.3" fill="currentcolor" stroke="none"/></svg>
+                      <svg width="27" height="12" viewBox="0 0 27 12"><rect x=".5" y=".5" width="23" height="11" rx="3" fill="none" stroke="currentcolor" stroke-opacity=".4"/><rect x="2" y="2" width="20" height="8" rx="1.8"/><path d="M25 4v4a2 2 0 0 0 0-4Z" fill-opacity=".4"/></svg>
+                    </span>
+                  </div>
                   <div class="hero-phone-head">
                     <strong>shell.online</strong>
                     <span class="hero-phone-latency"><i></i> 22 ms</span>
@@ -225,6 +239,8 @@ function renderLanding(): void {
                   <div class="hero-phone-keys" aria-hidden="true">
                     <span>esc</span><span>tab</span><span>←</span><span>↑</span><span>↓</span><span>→</span><span>enter</span><span>ctrl-c</span>
                   </div>
+                  <span class="phone-home" aria-hidden="true"></span>
+                </div>
                 </div>
               </div>
               <figcaption><span><i></i> Interactive in any browser</span><strong>Claude Code · live via shell.online</strong></figcaption>