diff --git a/next.config.ts b/next.config.ts
index eaadfdb..df2568c 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -34,6 +34,15 @@ const nextConfig: NextConfig = {
         source: "/api/:path*",
         headers: [{ key: "Cache-Control", value: "no-store, max-age=0" }],
       },
+      {
+        source: "/models/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
     ];
   },
 };
diff --git a/public/models/airplane.glb b/public/models/airplane.glb
new file mode 100644
index 0000000..f096201
Binary files /dev/null and b/public/models/airplane.glb differ
diff --git a/src/app/globals.css b/src/app/globals.css
index aadf696..b134686 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,6 +36,7 @@
 html,
 body {
   height: 100%;
+  height: 100dvh;
   margin: 0;
   padding: 0;
   overflow: hidden;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9eff7f6..81d2cee 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -61,6 +61,10 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, viewport-fit=cover"
+        />
         {GA_ID && /^G-[A-Z0-9]+$/.test(GA_ID) && (
           <>
             <Script
diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
index c79f1e4..cb0327c 100644
--- a/src/components/error-boundary.tsx
+++ b/src/components/error-boundary.tsx
@@ -13,7 +13,9 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, info: React.ErrorInfo) {
-    console.error("[aeris] Uncaught error:", error, info.componentStack);
+    if (process.env.NODE_ENV === "development") {
+      console.error("[aeris] Uncaught error:", error, info.componentStack);
+    }
   }
 
   render() {
diff --git a/src/components/flight-tracker.tsx b/src/components/flight-tracker.tsx
index 6a83c72..be06242 100644
--- a/src/components/flight-tracker.tsx
+++ b/src/components/flight-tracker.tsx
@@ -177,7 +177,7 @@ function FlightTrackerInner() {
   }, [activeCity.coordinates]);
 
   return (
-    <main className="relative h-screen w-screen overflow-hidden bg-black">
+    <main className="relative h-dvh w-screen overflow-hidden bg-black">
       <Map mapStyle={mapStyle.style} isDark={mapStyle.dark}>
         <CameraController city={activeCity} />
         <AirportLayer
@@ -202,11 +202,11 @@ function FlightTrackerInner() {
         data-map-theme={mapStyle.dark ? "dark" : "light"}
         className="pointer-events-none absolute inset-0 z-10"
       >
-        <div className="pointer-events-auto absolute left-4 top-4 flex items-center gap-3">
+        <div className="pointer-events-auto absolute left-3 top-3 flex items-center gap-3 sm:left-4 sm:top-4">
           <Brand isDark={mapStyle.dark} />
         </div>
 
-        <div className="pointer-events-auto absolute right-4 top-4 flex items-center gap-2">
+        <div className="pointer-events-auto absolute right-3 top-3 flex items-center gap-1.5 sm:right-4 sm:top-4 sm:gap-2">
           <a
             href={GITHUB_REPO_URL}
             target="_blank"
@@ -250,7 +250,7 @@ function FlightTrackerInner() {
           />
         </div>
 
-        <div className="pointer-events-auto absolute bottom-4 left-4">
+        <div className="pointer-events-auto absolute bottom-[env(safe-area-inset-bottom,0px)] left-3 mb-3 sm:bottom-4 sm:left-4 sm:mb-0">
           <StatusBar
             flightCount={flights.length}
             cityName={activeCity.name}
@@ -262,7 +262,7 @@ function FlightTrackerInner() {
           />
         </div>
 
-        <div className="pointer-events-auto absolute bottom-4 right-4">
+        <div className="pointer-events-auto absolute bottom-[env(safe-area-inset-bottom,0px)] right-3 mb-3 sm:bottom-4 sm:right-4 sm:mb-0">
           <AltitudeLegend />
         </div>
       </div>
diff --git a/src/components/map/flight-layers.tsx b/src/components/map/flight-layers.tsx
index 2503a52..bfc1824 100644
--- a/src/components/map/flight-layers.tsx
+++ b/src/components/map/flight-layers.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useCallback } from "react";
 import { MapboxOverlay } from "@deck.gl/mapbox";
 import { IconLayer, PathLayer } from "@deck.gl/layers";
+import { ScenegraphLayer } from "@deck.gl/mesh-layers";
 import { useMap } from "./map";
 import { altitudeToColor, altitudeToElevation } from "@/lib/flight-utils";
 import type { FlightState } from "@/lib/opensky";
@@ -13,11 +14,13 @@ const DEFAULT_ANIM_DURATION_MS = 30_000;
 const MIN_ANIM_DURATION_MS = 8_000;
 const MAX_ANIM_DURATION_MS = 45_000;
 const TELEPORT_THRESHOLD = 0.3;
-const TRAIL_BELOW_AIRCRAFT_METERS = 20;
+const TRAIL_BELOW_AIRCRAFT_METERS = 40;
 const STARTUP_TRAIL_POLLS = 3;
 const STARTUP_TRAIL_STEP_SEC = 12;
 const TRACK_DAMPING = 0.18;
 const TRAIL_SMOOTHING_ITERATIONS = 3;
+const AIRCRAFT_SCENEGRAPH_URL = "/models/airplane.glb";
+const AIRCRAFT_PX_PER_UNIT = 0.3;
 
 function buildStartupFallbackTrail(f: FlightState): [number, number][] {
   if (f.longitude == null || f.latitude == null) return [];
@@ -164,32 +167,60 @@ function createAircraftAtlas(): HTMLCanvasElement {
   canvas.height = size;
   const ctx = canvas.getContext("2d")!;
 
+  ctx.clearRect(0, 0, size, size);
   ctx.fillStyle = "#ffffff";
+
   ctx.beginPath();
-  ctx.moveTo(64, 12);
-  ctx.lineTo(72, 48);
-  ctx.lineTo(108, 72);
-  ctx.lineTo(104, 78);
-  ctx.lineTo(72, 66);
-  ctx.lineTo(70, 96);
+  ctx.moveTo(64, 6);
+  ctx.lineTo(71, 19);
+  ctx.lineTo(71, 33);
+  ctx.lineTo(100, 44);
+  ctx.lineTo(106, 52);
+  ctx.lineTo(80, 53);
+  ctx.lineTo(72, 56);
+  ctx.lineTo(72, 88);
+  ctx.lineTo(90, 101);
   ctx.lineTo(88, 108);
-  ctx.lineTo(86, 114);
-  ctx.lineTo(64, 104);
-  ctx.lineTo(42, 114);
+  ctx.lineTo(69, 99);
+  ctx.lineTo(69, 121);
+  ctx.lineTo(64, 126);
+  ctx.lineTo(59, 121);
+  ctx.lineTo(59, 99);
   ctx.lineTo(40, 108);
-  ctx.lineTo(58, 96);
-  ctx.lineTo(56, 66);
-  ctx.lineTo(24, 78);
-  ctx.lineTo(20, 72);
-  ctx.lineTo(56, 48);
+  ctx.lineTo(38, 101);
+  ctx.lineTo(56, 88);
+  ctx.lineTo(56, 56);
+  ctx.lineTo(48, 53);
+  ctx.lineTo(22, 52);
+  ctx.lineTo(28, 44);
+  ctx.lineTo(57, 33);
+  ctx.lineTo(57, 19);
   ctx.closePath();
   ctx.fill();
 
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.beginPath();
+  ctx.moveTo(64, 13);
+  ctx.lineTo(67, 19);
+  ctx.lineTo(64, 24);
+  ctx.lineTo(61, 19);
+  ctx.closePath();
+  ctx.fill();
+  ctx.globalCompositeOperation = "source-over";
+
   return canvas;
 }
 
 const AIRCRAFT_ICON_MAPPING = {
-  aircraft: { x: 0, y: 0, width: 128, height: 128, mask: true },
+  aircraft: {
+    x: 0,
+    y: 0,
+    width: 128,
+    height: 128,
+    anchorX: 64,
+    anchorY: 64,
+    mask: true,
+  },
 };
 
 let _atlasCache: string | undefined;
@@ -438,7 +469,7 @@ export function FlightLayers({
               data: interpolated,
               getPosition: (d) => [d.longitude!, d.latitude!, 0],
               getIcon: () => "aircraft",
-              getSize: 18,
+              getSize: 20,
               getColor: [0, 0, 0, 60],
               getAngle: (d) => 360 - (d.trueTrack ?? 0),
               iconAtlas: atlasUrl,
@@ -580,7 +611,7 @@ export function FlightLayers({
         }
 
         layers.push(
-          new IconLayer<FlightState>({
+          new ScenegraphLayer<FlightState>({
             id: "flight-aircraft",
             data: interpolated,
             getPosition: (d) => [
@@ -588,16 +619,20 @@ export function FlightLayers({
               d.latitude!,
               altitudeToElevation(d.baroAltitude),
             ],
-            getIcon: () => "aircraft",
-            getSize: 22,
+            getOrientation: (d) => {
+              const vr = d.verticalRate ?? 0;
+              const v = d.velocity ?? 0;
+              const pitch = v > 0 ? (-Math.atan2(vr, v) * 180) / Math.PI : 0;
+              const yaw = -(d.trueTrack ?? 0);
+              return [pitch, yaw, 90];
+            },
             getColor: (d) =>
               altColors ? altitudeToColor(d.baroAltitude) : defaultColor,
-            getAngle: (d) => 360 - (d.trueTrack ?? 0),
-            iconAtlas: atlasUrl,
-            iconMapping: AIRCRAFT_ICON_MAPPING,
-            billboard: false,
-            sizeUnits: "pixels",
-            sizeScale: 1,
+            scenegraph: AIRCRAFT_SCENEGRAPH_URL,
+            sizeScale: 25,
+            sizeMinPixels: AIRCRAFT_PX_PER_UNIT,
+            sizeMaxPixels: AIRCRAFT_PX_PER_UNIT,
+            _lighting: "pbr",
             pickable: true,
             onHover: handleHover,
             onClick: handleClick,
@@ -608,13 +643,15 @@ export function FlightLayers({
 
         overlay.setProps({ layers });
       } catch (err) {
-        console.error("[aeris] FlightLayers render error:", err);
+        if (process.env.NODE_ENV === "development") {
+          console.error("[aeris] FlightLayers render error:", err);
+        }
       }
     }
 
     buildAndPushLayers();
     return () => cancelAnimationFrame(animFrameRef.current);
-  }, [atlasUrl, handleHover, handleClick]);
+  }, [atlasUrl, handleHover, handleClick, map]);
 
   return null;
 }
diff --git a/src/components/ui/status-bar.tsx b/src/components/ui/status-bar.tsx
index e2d616d..760b667 100644
--- a/src/components/ui/status-bar.tsx
+++ b/src/components/ui/status-bar.tsx
@@ -50,7 +50,7 @@ export function StatusBar({
         )}
       </AnimatePresence>
 
-      <div className="flex items-center gap-2">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
         <motion.div
           initial={{ opacity: 0, y: 12 }}
           animate={{ opacity: 1, y: 0 }}
@@ -122,7 +122,7 @@ export function StatusBar({
             damping: 24,
             delay: 0.48,
           }}
-          className="flex items-center gap-1 rounded-xl border px-1.5 py-1.5 backdrop-blur-2xl"
+          className="flex items-center gap-1.5 rounded-xl border px-2.5 py-2 backdrop-blur-2xl"
           style={{
             borderColor: "rgb(var(--ui-fg) / 0.06)",
             backgroundColor: "rgb(var(--ui-bg) / 0.5)",
@@ -133,15 +133,19 @@ export function StatusBar({
             onClick={onNorthUp}
             aria-label="North up"
             title="North up"
-            className="rounded-lg px-2.5 py-1 text-[11px] font-medium tracking-wide transition-colors"
+            className="text-[11px] font-medium tracking-wide transition-colors"
             style={{ color: "rgb(var(--ui-fg) / 0.55)" }}
           >
-            <Compass className="h-3.5 w-3.5" />
+            <Compass className="h-3 w-3" />
           </button>
+          <div
+            className="h-3 w-px"
+            style={{ backgroundColor: "rgb(var(--ui-fg) / 0.08)" }}
+          />
           <button
             type="button"
             onClick={onResetView}
-            className="rounded-lg px-2.5 py-1 text-[11px] font-medium tracking-wide transition-colors"
+            className="text-[11px] font-medium tracking-wide transition-colors"
             style={{ color: "rgb(var(--ui-fg) / 0.55)" }}
           >
             Reset
