diff --git a/README.md b/README.md
index 7d9ee34..08e6e0f 100644
--- a/README.md
+++ b/README.md
@@ -1,57 +1,77 @@
 # Maperick
-![Workflow](https://github.com/schlunsen/maperick/actions/workflows/ci-tests.yml/badge.svg)
 
-Show active TCP connections on a TUI world map. Still WIP, but it's gonna be good.
+[![CI](https://github.com/schlunsen/maperick/actions/workflows/ci-tests.yml/badge.svg)](https://github.com/schlunsen/maperick/actions/workflows/ci-tests.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
-![](.github/screenshot.png)
-![](.github/screenshot2.png)
+**Visualize your active TCP connections on a world map — right in your terminal.**
 
+Maperick resolves every outgoing TCP connection to a geographic location and plots it on an ASCII world map. Drill down by server or by process to see exactly where your traffic is going.
 
-## Setup
+<p align="center">
+  <img src="screenshots/map.png" alt="World map view" width="100%">
+</p>
 
-```
-git clone git@github.com:schlunsen/maperick.git
-cd maperick/
+## Features
 
-# Download mmdb city file
-wget https://git.io/GeoLite2-City.mmdb
+- **World map** — see all connections plotted on an ASCII globe
+- **Server view** — browse connected IPs with location, process, and connection count
+- **Process view** — group connections by process with a per-process mini-map
+- **Auto-updating GeoIP** — automatically downloads and caches the MaxMind GeoLite2 database
+- **Lightweight** — pure Rust TUI built with [Ratatui](https://github.com/ratatui/ratatui)
+
+<p align="center">
+  <img src="screenshots/servers.png" alt="Servers view" width="49%">
+  <img src="screenshots/processes.png" alt="Processes view" width="49%">
+</p>
+
+## Mac App
 
-# Run maperick
-cargo run -- -e -p GeoLite2-City.mmdb
+Maperick also ships as a **native macOS menu-bar app** built with SwiftUI and SceneKit. It lives in your menu bar and features a 3D interactive globe showing your connections in real time. Find it in the `mac_app/` directory.
 
-# build maperick
+## Installation
+
+### From source (Rust)
+
+```sh
+git clone https://github.com/schlunsen/maperick.git
+cd maperick
 cargo build --release
+```
+
+### Run
 
-# See https://github.com/P3TERX/GeoLite.mmdb for mmdb files
-./target/release/maperick -e -p GeoLite2-City.mmdb 
+```sh
+# Maperick auto-downloads the GeoLite2 database on first run
+cargo run
+
+# Or run the release binary directly
+./target/release/maperick
 ```
 
-[See this repo for mmdb files](https://github.com/P3TERX/GeoLite.mmdb)
----
+### Manual GeoIP database
+
+If you prefer to supply your own MaxMind database:
 
+```sh
+wget https://git.io/GeoLite2-City.mmdb
+./target/release/maperick -p GeoLite2-City.mmdb
+```
 
+See [P3TERX/GeoLite.mmdb](https://github.com/P3TERX/GeoLite.mmdb) for alternative mmdb downloads.
 
-Dependencies
-------------
-* Maxmind
-* rs-tui
-* netstat rust
+## Usage
 
+```
+maperick [OPTIONS]
+
+Options:
+  -e            Resolve process names for each connection
+  -p <PATH>     Path to a GeoLite2-City.mmdb file
+  -h, --help    Print help
+```
 
+Navigate between tabs with **Tab** / **Shift+Tab** or click the menu items. Use **arrow keys** to scroll through server and process lists.
 
-### Todo
+## License
 
-- [x] Base setup
-- [x] Replace argh with clap
-- [x] Add netstat retrieval of open connections and their ip
-- [x] Error handling maxdb
-- [x] Add maxmind geolookup
-- [x] Refactor netstats methods to module
-- [x] Display connected ips in table
-- [ ] Refactor on_tick code into modules
-- [ ] Enable copy/paste
-- [ ] Fix drawing of lines to exit from host location
-- [ ] Add new tab with configuration options
-- [ ] Add host public_ip as different marker on map
-- [ ] Add ip's to ignore in configuration
-- [ ] Add to Brew Formulae
+[MIT](LICENSE)
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/css/style.css b/docs/css/style.css
index 47ec1a4..487925b 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1,5 +1,6 @@
 /* ============================================
    Maperick Landing Page — Style System
+   Full-width desktop design
    ============================================ */
 
 /* ---------- Reset & Base ---------- */
@@ -44,25 +45,31 @@ body {
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
-  --container-max: 1100px;
   --section-pad: 120px;
+  --edge-pad: clamp(24px, 5vw, 80px);
 }
 
 /* ---------- Utility ---------- */
 .container {
-  max-width: var(--container-max);
+  width: 100%;
+  padding: 0 var(--edge-pad);
+}
+
+.container--narrow {
+  max-width: 800px;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 var(--edge-pad);
 }
 
 /* ---------- Section Common ---------- */
 .section {
   padding: var(--section-pad) 0;
   position: relative;
+  scroll-margin-top: 64px;
 }
 
 .section-title {
-  font-size: 2.25rem;
+  font-size: clamp(2rem, 3.5vw, 2.75rem);
   font-weight: 700;
   text-align: center;
   margin-bottom: 12px;
@@ -77,11 +84,153 @@ body {
   text-align: center;
   color: var(--text-secondary);
   font-size: 1.1rem;
-  max-width: 540px;
+  max-width: 560px;
   margin: 0 auto 56px;
   font-weight: 400;
 }
 
+/* ============================================
+   SITE HEADER
+   ============================================ */
+.site-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 0 var(--edge-pad);
+  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+  border-bottom: 1px solid transparent;
+}
+
+.site-header--scrolled {
+  background: rgba(10, 10, 26, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom-color: var(--border-subtle);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+
+.header-logo {
+  font-weight: 700;
+  font-size: 1.15rem;
+  color: #ffffff;
+  text-decoration: none;
+  letter-spacing: -0.02em;
+  transition: color 0.2s;
+}
+
+.header-logo:hover {
+  color: var(--accent-green);
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-nav__link {
+  font-size: 0.875rem;
+  font-weight: 450;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 6px 14px;
+  border-radius: 8px;
+  transition: color 0.2s, background 0.2s;
+}
+
+.header-nav__link:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.header-nav__link.active {
+  color: var(--accent-green);
+}
+
+.header-nav__download {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+  padding: 6px 16px;
+  border-radius: 100px;
+  font-weight: 600;
+  color: #0a0a1a !important;
+  background: var(--accent-green);
+}
+
+.header-nav__download:hover {
+  background: #33ffaa !important;
+  color: #0a0a1a !important;
+  transform: translateY(-1px);
+}
+
+.header-nav__download svg {
+  flex-shrink: 0;
+}
+
+.header-nav__github {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 4px;
+  padding: 6px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 100px;
+  font-weight: 500;
+}
+
+.header-nav__github:hover {
+  border-color: var(--border-glow);
+  color: var(--accent-green);
+  background: var(--accent-green-dim);
+}
+
+.header-nav__github svg {
+  flex-shrink: 0;
+}
+
+/* Mobile hamburger */
+.header-mobile-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  padding: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.header-mobile-toggle span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--text-secondary);
+  border-radius: 2px;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.header-mobile-toggle.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.header-mobile-toggle.open span:nth-child(2) {
+  opacity: 0;
+}
+
+.header-mobile-toggle.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
 /* ============================================
    HERO
    ============================================ */
@@ -160,7 +309,7 @@ body {
   display: flex;
   gap: 12px;
   justify-content: center;
-  margin-bottom: 48px;
+  margin-bottom: 32px;
   flex-wrap: wrap;
 }
 
@@ -182,6 +331,56 @@ body {
   background: var(--accent-green-dim);
 }
 
+/* Hero CTA buttons */
+.hero-cta {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 48px;
+  flex-wrap: wrap;
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #0a0a1a;
+  background: var(--accent-green);
+  text-decoration: none;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 0 24px rgba(0, 255, 136, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 32px rgba(0, 255, 136, 0.45);
+}
+
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border-subtle);
+  text-decoration: none;
+  transition: color 0.2s, border-color 0.2s, transform 0.2s;
+}
+
+.btn-secondary:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+}
+
 /* Scroll indicator */
 .scroll-indicator {
   display: inline-flex;
@@ -202,7 +401,7 @@ body {
 }
 
 /* ============================================
-   FEATURES
+   FEATURES — full-width grid
    ============================================ */
 .features {
   background: var(--bg-primary);
@@ -212,8 +411,7 @@ body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
-  max-width: 1100px;
-  margin: 0 auto;
+  padding: 0 var(--edge-pad);
 }
 
 .feature-card {
@@ -243,7 +441,7 @@ body {
   background: var(--accent-green-dim);
 }
 
-.feature-card:nth-child(2) .feature-icon {
+.feature-card:nth-child(even) .feature-icon {
   background: var(--accent-cyan-dim);
 }
 
@@ -262,7 +460,7 @@ body {
 }
 
 /* ============================================
-   DEMO / SCREENSHOT
+   DEMO / SCREENSHOTS — edge-to-edge
    ============================================ */
 .demo {
   background: var(--bg-surface);
@@ -275,8 +473,6 @@ body {
   box-shadow:
     0 4px 24px rgba(0, 0, 0, 0.4),
     0 0 0 1px rgba(255, 255, 255, 0.03);
-  max-width: 900px;
-  margin: 0 auto;
 }
 
 .terminal-header {
@@ -329,13 +525,12 @@ body {
   font-style: italic;
 }
 
-/* Screenshots Grid */
+/* Screenshots Grid — full width */
 .screenshots-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 0 var(--edge-pad);
 }
 
 .screenshot-item {
@@ -361,22 +556,167 @@ body {
   font-size: 0.85rem;
 }
 
-@media (max-width: 900px) {
-  .screenshots-grid {
-    grid-template-columns: 1fr;
-    max-width: 600px;
-  }
+/* ============================================
+   PLATFORMS — full-width two-column
+   ============================================ */
+.platforms {
+  background: var(--bg-primary);
+}
+
+.platforms-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+  padding: 0 var(--edge-pad);
+}
+
+.platform-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 44px 36px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.platform-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--border-glow);
+  box-shadow: 0 12px 48px rgba(0, 255, 136, 0.08);
+}
+
+.platform-card--mac:hover {
+  border-color: rgba(0, 204, 255, 0.3);
+  box-shadow: 0 12px 48px rgba(0, 204, 255, 0.08);
+}
+
+.platform-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 100px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+  background: var(--accent-green-dim);
+  border: 1px solid rgba(0, 255, 136, 0.2);
+  margin-bottom: 24px;
+}
+
+.platform-badge--mac {
+  color: var(--accent-cyan);
+  background: var(--accent-cyan-dim);
+  border-color: rgba(0, 204, 255, 0.2);
+}
+
+.platform-icon {
+  margin-bottom: 20px;
+}
+
+.platform-card h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 12px;
+  letter-spacing: -0.02em;
+}
+
+.platform-desc {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-bottom: 24px;
+}
+
+.platform-highlights {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+.platform-highlights li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+.platform-highlights li svg {
+  flex-shrink: 0;
+}
+
+.platform-install {
+  background: var(--bg-terminal);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 14px 20px;
+}
+
+.platform-install code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.875rem;
+  color: var(--accent-green);
+}
+
+.platform-download {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba(0, 204, 255, 0.15), rgba(0, 204, 255, 0.05));
+  border: 1px solid rgba(0, 204, 255, 0.3);
+  text-decoration: none;
+  transition: background 0.2s, border-color 0.2s, transform 0.2s;
+}
+
+.platform-download:hover {
+  background: linear-gradient(135deg, rgba(0, 204, 255, 0.25), rgba(0, 204, 255, 0.1));
+  border-color: var(--accent-cyan);
+  transform: translateY(-2px);
 }
 
 /* ============================================
    CODE WINDOWS (Installation & Usage)
+   Side-by-side on desktop
    ============================================ */
-.installation {
-  background: var(--bg-primary);
+.install-usage-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+  padding: 0 var(--edge-pad);
 }
 
-.usage {
-  background: var(--bg-surface);
+.install-usage-row .section-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.install-usage-row .section-col-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #ffffff 0%, #aaaacc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.install-usage-row .section-col-sub {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  margin-bottom: 24px;
 }
 
 .code-window {
@@ -384,8 +724,6 @@ body {
   overflow: hidden;
   border: 1px solid var(--border-subtle);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-  max-width: 700px;
-  margin: 0 auto;
 }
 
 .code-header {
@@ -421,34 +759,17 @@ body {
 }
 
 /* Syntax highlight classes */
-.code-comment {
-  color: #555577;
-  font-style: italic;
-}
-
-.code-cmd {
-  color: var(--accent-green);
-  font-weight: 500;
-}
-
-.code-flag {
-  color: var(--accent-cyan);
-}
-
-.code-arg {
-  color: #ffbd2e;
-}
-
-.code-heading {
-  color: #ffffff;
-  font-weight: 600;
-}
+.code-comment { color: #555577; font-style: italic; }
+.code-cmd { color: var(--accent-green); font-weight: 500; }
+.code-flag { color: var(--accent-cyan); }
+.code-arg { color: #ffbd2e; }
+.code-heading { color: #ffffff; font-weight: 600; }
 
 /* ============================================
-   FOOTER
+   FOOTER — full width
    ============================================ */
 .footer {
-  padding: 40px 0;
+  padding: 40px var(--edge-pad);
   border-top: 1px solid var(--border-subtle);
   background: var(--bg-primary);
 }
@@ -512,58 +833,6 @@ body {
   font-size: 0.875rem;
 }
 
-/* ============================================
-   STICKY HEADER
-   ============================================ */
-.sticky-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 32px;
-  background: rgba(10, 10, 26, 0.75);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-bottom: 1px solid var(--border-subtle);
-  transform: translateY(-100%);
-  opacity: 0;
-  transition: transform 0.35s ease, opacity 0.35s ease;
-  pointer-events: none;
-}
-
-.sticky-header--visible {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.sticky-header__logo {
-  font-weight: 700;
-  font-size: 1rem;
-  color: #ffffff;
-  text-decoration: none;
-  letter-spacing: -0.02em;
-}
-
-.sticky-header__logo:hover {
-  color: var(--accent-green);
-}
-
-.sticky-header__github {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.sticky-header__github:hover {
-  color: var(--accent-green);
-}
-
 /* ============================================
    TYPING CURSOR
    ============================================ */
@@ -603,14 +872,32 @@ body {
 /* ============================================
    RESPONSIVE
    ============================================ */
+
+/* Tablet */
 @media (max-width: 900px) {
   :root {
     --section-pad: 80px;
   }
 
   .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .screenshots-grid {
     grid-template-columns: 1fr;
-    max-width: 480px;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .platforms-grid {
+    grid-template-columns: 1fr;
+    max-width: 560px;
+    margin: 0 auto;
+  }
+
+  .install-usage-row {
+    grid-template-columns: 1fr;
+    max-width: 600px;
     margin: 0 auto;
   }
 
@@ -624,11 +911,16 @@ body {
   }
 }
 
+/* Mobile */
 @media (max-width: 600px) {
   :root {
     --section-pad: 60px;
   }
 
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
   .hero-title {
     font-size: 2.75rem;
   }
@@ -638,7 +930,12 @@ body {
   }
 
   .hero-badges {
-    margin-bottom: 36px;
+    margin-bottom: 24px;
+  }
+
+  .hero-cta {
+    flex-direction: column;
+    align-items: center;
   }
 
   .code-block {
@@ -659,6 +956,46 @@ body {
     flex-direction: column;
     gap: 8px;
   }
+
+  .header-nav {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    background: rgba(10, 10, 26, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 16px 24px;
+    gap: 4px;
+    transform: translateY(-120%);
+    opacity: 0;
+    transition: transform 0.35s ease, opacity 0.35s ease;
+    pointer-events: none;
+  }
+
+  .header-nav--open {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .header-nav__link {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 1rem;
+  }
+
+  .header-nav__github {
+    margin-left: 0;
+    justify-content: center;
+    margin-top: 8px;
+  }
+
+  .header-mobile-toggle {
+    display: flex;
+  }
 }
 
 /* ---------- Selection ---------- */
diff --git a/docs/index.html b/docs/index.html
index 1931ed8..bbc054f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,7 +12,8 @@
   <meta property="og:title" content="Maperick — Real-time TCP Connection Visualizer">
   <meta property="og:description" content="Visualize your network connections on a world map — right in your terminal. Built with Rust.">
   <meta property="og:type" content="website">
-  <meta property="og:image" content=".github/screenshot.png">
+  <meta property="og:image" content="https://raw.githubusercontent.com/schlunsen/maperick/main/.github/screenshot.png">
+  <meta property="og:url" content="https://schlunsen.github.io/maperick/">
 
   <!-- Favicon: globe emoji as SVG data URI -->
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌍</text></svg>">
@@ -26,6 +27,38 @@
 </head>
 <body>
 
+  <!-- ========== HEADER / NAV ========== -->
+  <header class="site-header" id="site-header">
+    <div class="header-inner">
+      <a href="#" class="header-logo">Maperick</a>
+      <nav class="header-nav">
+        <a href="#features" class="header-nav__link">Features</a>
+        <a href="#demo" class="header-nav__link">Screenshots</a>
+        <a href="#platforms" class="header-nav__link">Platforms</a>
+        <a href="#installation" class="header-nav__link">Install</a>
+        <a href="https://github.com/schlunsen/maperick/releases/latest" class="header-nav__link header-nav__download" target="_blank" rel="noopener noreferrer">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+          Download
+        </a>
+        <a href="https://github.com/schlunsen/maperick" class="header-nav__link header-nav__github" target="_blank" rel="noopener noreferrer">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          GitHub
+        </a>
+      </nav>
+      <button class="header-mobile-toggle" id="mobile-toggle" aria-label="Toggle menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+    </div>
+  </header>
+
   <!-- ========== HERO ========== -->
   <section id="hero" class="hero">
     <div id="globe-container"></div>
@@ -35,6 +68,18 @@ <h1 class="hero-title">Maperick</h1>
       <div class="hero-badges">
         <span class="badge">Built with Rust</span>
         <span class="badge badge-accent">Real-time TUI</span>
+        <span class="badge">Native Mac App</span>
+      </div>
+      <div class="hero-cta">
+        <a href="https://github.com/schlunsen/maperick/releases/latest" class="btn-primary" target="_blank" rel="noopener noreferrer">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+          Download Latest Release
+        </a>
+        <a href="#platforms" class="btn-secondary">See all platforms</a>
       </div>
       <a href="#features" class="scroll-indicator" aria-label="Scroll down">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -46,194 +91,266 @@ <h1 class="hero-title">Maperick</h1>
 
   <!-- ========== FEATURES ========== -->
   <section id="features" class="section features">
-    <div class="container">
-      <h2 class="section-title">Features</h2>
-      <p class="section-subtitle">Everything you need to understand your network at a glance.</p>
-      <div class="features-grid">
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10"></circle>
-              <polyline points="12 6 12 12 16 14"></polyline>
-            </svg>
-          </div>
-          <h3>Real-time Monitoring</h3>
-          <p>Tracks active TCP connections continuously with configurable refresh intervals. Watch connections appear and disappear as your system communicates with the world.</p>
+    <h2 class="section-title">Features</h2>
+    <p class="section-subtitle">Everything you need to understand your network at a glance.</p>
+    <div class="features-grid">
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
         </div>
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="2" y1="12" x2="22" y2="12"></line>
-              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-            </svg>
-          </div>
-          <h3>Geolocation Mapping</h3>
-          <p>Pinpoints server locations using MaxMind GeoLite2 databases. Every connection is resolved to a geographic coordinate and rendered on the world map.</p>
+        <h3>Real-time Monitoring</h3>
+        <p>Tracks active TCP connections continuously with configurable refresh intervals. Watch connections appear and disappear as your system communicates with the world.</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="2" y1="12" x2="22" y2="12"></line>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+          </svg>
         </div>
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 20h9"></path>
-              <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
-            </svg>
-          </div>
-          <h3>Connection History</h3>
-          <p>Persists all-time connection statistics in a local SQLite database. Track which IPs you've connected to, when, and how often &mdash; across sessions.</p>
+        <h3>Geolocation Mapping</h3>
+        <p>Pinpoints server locations using MaxMind GeoLite2 databases. Every connection is resolved to a geographic coordinate and rendered on the world map.</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 20h9"></path>
+            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+          </svg>
         </div>
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-              <line x1="8" y1="21" x2="16" y2="21"></line>
-              <line x1="12" y1="17" x2="12" y2="21"></line>
-            </svg>
-          </div>
-          <h3>Interactive TUI</h3>
-          <p>Navigate with keyboard shortcuts, switch between multiple tabs, and view color-coded connection statuses. A full terminal UI powered by Ratatui.</p>
+        <h3>Connection History</h3>
+        <p>Persists all-time connection statistics in a local SQLite database. Track which IPs you've connected to, when, and how often &mdash; across sessions.</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+            <line x1="8" y1="21" x2="16" y2="21"></line>
+            <line x1="12" y1="17" x2="12" y2="21"></line>
+          </svg>
         </div>
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="3" width="7" height="7"></rect>
-              <rect x="14" y="3" width="7" height="7"></rect>
-              <rect x="14" y="14" width="7" height="7"></rect>
-              <rect x="3" y="14" width="7" height="7"></rect>
-            </svg>
-          </div>
-          <h3>Per-Process Tracking</h3>
-          <p>See which processes are making connections. The Processes tab shows a split view with per-process connection maps and statistics.</p>
+        <h3>Interactive TUI</h3>
+        <p>Navigate with keyboard shortcuts, switch between multiple tabs, and view color-coded connection statuses. A full terminal UI powered by Ratatui.</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+          </svg>
         </div>
-        <div class="feature-card fade-in">
-          <div class="feature-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-              <polyline points="7 10 12 15 17 10"></polyline>
-              <line x1="12" y1="15" x2="12" y2="3"></line>
-            </svg>
-          </div>
-          <h3>Auto GeoIP Download</h3>
-          <p>Automatically downloads the GeoLite2 database on first run. No manual setup required &mdash; just run and start exploring your network.</p>
+        <h3>Per-Process Tracking</h3>
+        <p>See which processes are making connections. The Processes tab shows a split view with per-process connection maps and statistics.</p>
+      </div>
+      <div class="feature-card fade-in">
+        <div class="feature-icon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
         </div>
+        <h3>Auto GeoIP Download</h3>
+        <p>Automatically downloads the GeoLite2 database on first run. No manual setup required &mdash; just run and start exploring your network.</p>
       </div>
     </div>
   </section>
 
   <!-- ========== DEMO / SCREENSHOT ========== -->
   <section id="demo" class="section demo">
-    <div class="container">
-      <h2 class="section-title">See it in action</h2>
-      <p class="section-subtitle">A full-featured network visualization running entirely in your terminal.</p>
-
-      <!-- Screenshots Grid -->
-      <div class="screenshots-grid fade-in">
-        <div class="screenshot-item">
-          <div class="terminal-window">
-            <div class="terminal-header">
-              <div class="terminal-dots">
-                <span class="dot dot-red"></span>
-                <span class="dot dot-yellow"></span>
-                <span class="dot dot-green"></span>
-              </div>
-              <span class="terminal-title">maperick &mdash; Map Tab</span>
-            </div>
-            <div class="terminal-body">
-              <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/map.png" alt="Map view showing TCP connections on a world map" class="screenshot">
+    <h2 class="section-title">See it in action</h2>
+    <p class="section-subtitle">A full-featured network visualization running entirely in your terminal.</p>
+    <div class="screenshots-grid fade-in">
+      <div class="screenshot-item">
+        <div class="terminal-window">
+          <div class="terminal-header">
+            <div class="terminal-dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
             </div>
+            <span class="terminal-title">maperick &mdash; Map Tab</span>
+          </div>
+          <div class="terminal-body">
+            <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/map.png" alt="Map view showing TCP connections on a world map" class="screenshot">
           </div>
-          <p class="caption">World map view with geolocated connections</p>
         </div>
-
-        <div class="screenshot-item">
-          <div class="terminal-window">
-            <div class="terminal-header">
-              <div class="terminal-dots">
-                <span class="dot dot-red"></span>
-                <span class="dot dot-yellow"></span>
-                <span class="dot dot-green"></span>
-              </div>
-              <span class="terminal-title">maperick &mdash; Servers Tab</span>
-            </div>
-            <div class="terminal-body">
-              <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/servers.png" alt="Servers view with connection statistics" class="screenshot">
+        <p class="caption">World map view with geolocated connections</p>
+      </div>
+      <div class="screenshot-item">
+        <div class="terminal-window">
+          <div class="terminal-header">
+            <div class="terminal-dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
             </div>
+            <span class="terminal-title">maperick &mdash; Servers Tab</span>
+          </div>
+          <div class="terminal-body">
+            <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/servers.png" alt="Servers view with connection statistics" class="screenshot">
           </div>
-          <p class="caption">Server statistics with all-time history</p>
         </div>
-
-        <div class="screenshot-item">
-          <div class="terminal-window">
-            <div class="terminal-header">
-              <div class="terminal-dots">
-                <span class="dot dot-red"></span>
-                <span class="dot dot-yellow"></span>
-                <span class="dot dot-green"></span>
-              </div>
-              <span class="terminal-title">maperick &mdash; Processes Tab</span>
-            </div>
-            <div class="terminal-body">
-              <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/processes.png" alt="Processes view showing per-process connections" class="screenshot">
+        <p class="caption">Server statistics with all-time history</p>
+      </div>
+      <div class="screenshot-item">
+        <div class="terminal-window">
+          <div class="terminal-header">
+            <div class="terminal-dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
             </div>
+            <span class="terminal-title">maperick &mdash; Processes Tab</span>
+          </div>
+          <div class="terminal-body">
+            <img src="https://raw.githubusercontent.com/schlunsen/maperick/main/screenshots/processes.png" alt="Processes view showing per-process connections" class="screenshot">
           </div>
-          <p class="caption">Per-process connection tracking</p>
         </div>
+        <p class="caption">Per-process connection tracking</p>
       </div>
     </div>
   </section>
 
-  <!-- ========== INSTALLATION ========== -->
-  <section id="installation" class="section installation">
-    <div class="container">
-      <h2 class="section-title">Installation</h2>
-      <p class="section-subtitle">Get up and running in under a minute.</p>
-      <div class="code-window fade-in">
-        <div class="code-header">
-          <div class="terminal-dots">
-            <span class="dot dot-red"></span>
-            <span class="dot dot-yellow"></span>
-            <span class="dot dot-green"></span>
-          </div>
-          <span class="code-lang">bash</span>
+  <!-- ========== PLATFORMS ========== -->
+  <section id="platforms" class="section platforms">
+    <h2 class="section-title">Two ways to explore your network</h2>
+    <p class="section-subtitle">A lightweight CLI for power users and a native macOS app for everyone else.</p>
+    <div class="platforms-grid">
+      <!-- CLI Card -->
+      <div class="platform-card fade-in">
+        <div class="platform-badge">CLI</div>
+        <div class="platform-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="4 17 10 11 4 5"></polyline>
+            <line x1="12" y1="19" x2="20" y2="19"></line>
+          </svg>
+        </div>
+        <h3>Terminal App</h3>
+        <p class="platform-desc">A single binary with zero runtime dependencies. Built in Rust for minimal memory usage and instant startup. Runs on Linux, macOS, and Windows.</p>
+        <ul class="platform-highlights">
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            Small footprint &mdash; single static binary
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            Cross-platform: Linux, macOS, Windows
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            Interactive TUI powered by Ratatui
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff88" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            SSH-friendly &mdash; works over remote sessions
+          </li>
+        </ul>
+        <div class="platform-install">
+          <code>cargo install maperick</code>
+        </div>
+      </div>
+      <!-- Mac App Card -->
+      <div class="platform-card platform-card--mac fade-in">
+        <div class="platform-badge platform-badge--mac">macOS</div>
+        <div class="platform-icon">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"></path>
+            <path d="M2 12h20"></path>
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+          </svg>
         </div>
-        <pre class="code-block"><code><span class="code-comment"># Clone and build</span>
+        <h3>Native Mac App</h3>
+        <p class="platform-desc">A full SwiftUI application with a 3D globe visualization, menu bar integration, and native macOS look and feel. Installable via DMG.</p>
+        <ul class="platform-highlights">
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            Native SwiftUI interface
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            3D globe with SceneKit
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            Menu bar quick-access widget
+          </li>
+          <li>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ccff" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            DMG installer on GitHub Releases
+          </li>
+        </ul>
+        <a href="https://github.com/schlunsen/maperick/releases/latest" class="platform-download" target="_blank" rel="noopener noreferrer">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+          Download DMG
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== INSTALLATION & USAGE — side by side ========== -->
+  <section id="installation" class="section" style="background: var(--bg-surface);">
+    <h2 class="section-title">Get started</h2>
+    <p class="section-subtitle">Clone, build, and run &mdash; or just use cargo install.</p>
+    <div class="install-usage-row">
+      <div class="section-col fade-in">
+        <h3 class="section-col-title">Installation</h3>
+        <p class="section-col-sub">Get up and running in under a minute.</p>
+        <div class="code-window">
+          <div class="code-header">
+            <div class="terminal-dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
+            </div>
+            <span class="code-lang">bash</span>
+          </div>
+          <pre class="code-block"><code><span class="code-comment"># Clone and build</span>
 <span class="code-cmd">git clone</span> https://github.com/schlunsen/maperick.git
 <span class="code-cmd">cd</span> maperick
 <span class="code-cmd">cargo build</span> --release
 
 <span class="code-comment"># Run with your GeoLite2 database</span>
 <span class="code-cmd">./target/release/maperick</span> -e -p GeoLite2-City.mmdb</code></pre>
+        </div>
       </div>
-    </div>
-  </section>
-
-  <!-- ========== CLI USAGE ========== -->
-  <section id="usage" class="section usage">
-    <div class="container">
-      <h2 class="section-title">CLI Usage</h2>
-      <p class="section-subtitle">Simple, focused command-line interface.</p>
-      <div class="code-window fade-in">
-        <div class="code-header">
-          <div class="terminal-dots">
-            <span class="dot dot-red"></span>
-            <span class="dot dot-yellow"></span>
-            <span class="dot dot-green"></span>
+      <div class="section-col fade-in">
+        <h3 class="section-col-title">CLI Usage</h3>
+        <p class="section-col-sub">Simple, focused command-line interface.</p>
+        <div class="code-window">
+          <div class="code-header">
+            <div class="terminal-dots">
+              <span class="dot dot-red"></span>
+              <span class="dot dot-yellow"></span>
+              <span class="dot dot-green"></span>
+            </div>
+            <span class="code-lang">terminal</span>
           </div>
-          <span class="code-lang">terminal</span>
-        </div>
-        <pre class="code-block"><code><span class="code-cmd">maperick</span> [OPTIONS]
+          <pre class="code-block"><code><span class="code-cmd">maperick</span> [OPTIONS]
 
 <span class="code-heading">Options:</span>
   <span class="code-flag">-t, --tick-rate</span> <span class="code-arg">&lt;ms&gt;</span>       Update interval <span class="code-comment">(default: 250)</span>
   <span class="code-flag">-p, --path</span> <span class="code-arg">&lt;PATH&gt;</span>          Path to GeoLite2 MMDB file
   <span class="code-flag">-e, --enhanced-graphics</span>    Enable Unicode symbols
   <span class="code-flag">-h, --help</span>                 Print help</code></pre>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- ========== FOOTER ========== -->
   <footer class="footer">
-    <div class="container footer-inner">
+    <div class="footer-inner">
       <div class="footer-brand">
         <span class="footer-logo">Maperick</span>
         <span class="footer-rust">Built with Rust 🦀</span>
@@ -251,6 +368,16 @@ <h2 class="section-title">CLI Usage</h2>
     </div>
   </footer>
 
+  <!-- Import map so Three.js sub-modules can resolve bare "three" specifier -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+    }
+  }
+  </script>
+
   <!-- Main entry: globe + animations -->
   <script type="module">
     import { initGlobe } from './js/globe.js';
@@ -270,7 +397,6 @@ <h2 class="section-title">CLI Usage</h2>
           const globeScroll = createGlobeScrollHandler({
             globeElement: container,
             setRotationSpeed: (factor) => {
-              // Adjust the auto-rotation based on scroll
               globe.globeGroup.userData.rotationFactor = factor;
             },
           });
@@ -283,7 +409,7 @@ <h2 class="section-title">CLI Usage</h2>
       // Init all scroll animations
       initAnimations();
 
-      // Also handle the .fade-in elements (from CSS agent)
+      // Handle .fade-in elements
       const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
diff --git a/docs/js/animations.js b/docs/js/animations.js
index f38b436..9152a9a 100644
--- a/docs/js/animations.js
+++ b/docs/js/animations.js
@@ -105,36 +105,53 @@ function initHeroParallax() {
 }
 
 // ---------------------------------------------------------------------------
-// 3. Sticky header
+// 3. Site header (scroll background + active nav highlighting + mobile toggle)
 // ---------------------------------------------------------------------------
 
-function initStickyHeader() {
-  let header = document.querySelector('.sticky-header');
-
-  // If no sticky header exists in the DOM, create one
-  if (!header) {
-    header = document.createElement('header');
-    header.className = 'sticky-header';
-    header.setAttribute('aria-hidden', 'true');
-    header.innerHTML = `
-      <a href="#" class="sticky-header__logo">Maperick</a>
-      <a href="https://github.com/schlunsen/maperick"
-         class="sticky-header__github"
-         target="_blank"
-         rel="noopener noreferrer">
-        GitHub
-      </a>
-    `;
-    document.body.prepend(header);
-  }
+function initSiteHeader() {
+  const header = document.getElementById('site-header');
+  if (!header) return;
 
-  const hero = document.querySelector('.hero');
-  const triggerOffset = hero ? hero.offsetHeight * 0.6 : 400;
+  const navLinks = header.querySelectorAll('.header-nav__link[href^="#"]');
+  const sections = [];
+  navLinks.forEach((link) => {
+    const id = link.getAttribute('href');
+    const section = document.querySelector(id);
+    if (section) sections.push({ link, section });
+  });
+
+  // Mobile toggle
+  const toggle = document.getElementById('mobile-toggle');
+  const nav = header.querySelector('.header-nav');
+  if (toggle && nav) {
+    toggle.addEventListener('click', () => {
+      toggle.classList.toggle('open');
+      nav.classList.toggle('header-nav--open');
+    });
+    // Close mobile nav when a link is clicked
+    navLinks.forEach((link) => {
+      link.addEventListener('click', () => {
+        toggle.classList.remove('open');
+        nav.classList.remove('header-nav--open');
+      });
+    });
+  }
 
   function onScroll(scrollY) {
-    const show = scrollY > triggerOffset;
-    header.classList.toggle('sticky-header--visible', show);
-    header.setAttribute('aria-hidden', String(!show));
+    // Background on scroll
+    header.classList.toggle('site-header--scrolled', scrollY > 50);
+
+    // Active section highlighting
+    let current = null;
+    for (let i = sections.length - 1; i >= 0; i--) {
+      const rect = sections[i].section.getBoundingClientRect();
+      if (rect.top <= 120) {
+        current = sections[i];
+        break;
+      }
+    }
+    sections.forEach(({ link }) => link.classList.remove('active'));
+    if (current) current.link.classList.add('active');
   }
 
   scrollHandlers.push(onScroll);
@@ -211,7 +228,9 @@ function initSmoothScroll() {
     if (!target) return;
 
     e.preventDefault();
-    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    const headerHeight = 64;
+    const top = target.getBoundingClientRect().top + window.scrollY - headerHeight;
+    window.scrollTo({ top, behavior: 'smooth' });
 
     // Update URL without jumping
     if (history.pushState) {
@@ -302,7 +321,7 @@ export function initAnimations() {
 
   initScrollFadeIns();
   initHeroParallax();
-  initStickyHeader();
+  initSiteHeader();
   initTypingEffect();
   initSmoothScroll();
 
diff --git a/docs/js/globe.js b/docs/js/globe.js
index fc6b091..9c3b564 100644
--- a/docs/js/globe.js
+++ b/docs/js/globe.js
@@ -1,75 +1,138 @@
 /**
- * Maperick — Interactive Three.js Globe Visualization
+ * Maperick — Realistic Earth Globe with NASA Textures & Custom Shaders
  *
- * Renders a wireframe earth globe with animated network-connection arcs,
- * glowing endpoint dots, and travelling particles.  Designed as an ambient,
- * dark-themed "hacker map" aesthetic background for the GitHub Pages site.
- *
- * Usage:
- *   import { initGlobe } from './globe.js';
- *   initGlobe(document.getElementById('globe-canvas'));
+ * Uses the same NASA Blue Marble day map and night city-lights texture
+ * as the native Mac app, rendered with a custom GLSL shader that blends
+ * day/night based on a sun direction and adds atmospheric fresnel glow.
  */
 
 import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
-import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';
 
 // ---------------------------------------------------------------------------
-// Constants & palette
+// Constants
 // ---------------------------------------------------------------------------
 
+const GLOBE_RADIUS = 2;
+const DOT_COUNT = 28;
+const ARC_COUNT = 14;
+const ARC_SEGMENTS = 64;
+const PARTICLE_COUNT_PER_ARC = 3;
+const AUTO_ROTATE_SPEED = 0.0006;
+
 const PALETTE = {
   background: 0x0a0a1a,
-  wireframe: 0x1a3a4a,
   dot: 0x00ff88,
   arc: 0x00ccff,
   glow: 0x00ccff,
-  atmosphereInner: 0x0a2a3a,
 };
 
-const GLOBE_RADIUS = 2;
-const DOT_COUNT = 22;
-const ARC_COUNT = 12;
-const ARC_SEGMENTS = 64;
-const PARTICLE_COUNT_PER_ARC = 3;
-const AUTO_ROTATE_SPEED = 0.0008;
+// ---------------------------------------------------------------------------
+// Earth shader — day/night blend + atmosphere rim
+// ---------------------------------------------------------------------------
+
+const earthVertexShader = /* glsl */ `
+  varying vec2 vUv;
+  varying vec3 vNormal;
+  varying vec3 vPosition;
+  varying vec3 vWorldNormal;
+
+  void main() {
+    vUv = uv;
+    vNormal = normalize(normalMatrix * normal);
+    vWorldNormal = normalize((modelMatrix * vec4(normal, 0.0)).xyz);
+    vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const earthFragmentShader = /* glsl */ `
+  uniform sampler2D uDayMap;
+  uniform sampler2D uNightMap;
+  uniform vec3 uSunDirection;
+  uniform float uTime;
+
+  varying vec2 vUv;
+  varying vec3 vNormal;
+  varying vec3 vPosition;
+  varying vec3 vWorldNormal;
+
+  void main() {
+    vec3 viewDir = normalize(-vPosition);
+
+    // Sample textures
+    vec3 dayColor = texture2D(uDayMap, vUv).rgb;
+    vec3 nightColor = texture2D(uNightMap, vUv).rgb;
+
+    // Sun illumination factor based on world-space normal vs sun direction
+    float sunDot = dot(vWorldNormal, uSunDirection);
+
+    // Smooth day/night transition (-0.15 to 0.2 = twilight zone)
+    float dayFactor = smoothstep(-0.15, 0.2, sunDot);
+
+    // Darken day side to fit dark theme, brighten slightly on sun-facing side
+    vec3 dayLit = dayColor * mix(0.25, 0.65, dayFactor);
+
+    // Night side: city lights with warm glow
+    vec3 nightLit = nightColor * vec3(1.0, 0.85, 0.6) * 1.2;
+
+    // Blend day and night
+    vec3 color = mix(nightLit, dayLit, dayFactor);
+
+    // Rim lighting — atmospheric edge glow
+    float rimPower = 1.0 - max(dot(vNormal, viewDir), 0.0);
+
+    // Blue atmosphere on the lit side rim
+    vec3 atmosphereColor = vec3(0.2, 0.5, 1.0);
+    float atmosRim = pow(rimPower, 2.5);
+    color += atmosphereColor * atmosRim * dayFactor * 0.5;
+
+    // Green/cyan accent on the dark side rim (hacker aesthetic)
+    vec3 darkRimColor = vec3(0.0, 0.8, 0.5);
+    color += darkRimColor * pow(rimPower, 3.5) * (1.0 - dayFactor) * 0.3;
+
+    // General subtle rim glow (always visible)
+    vec3 generalRim = vec3(0.1, 0.4, 0.7);
+    color += generalRim * pow(rimPower, 3.0) * 0.25;
+
+    // Very subtle pulsing brightness
+    float pulse = 1.0 + sin(uTime * 0.5) * 0.02;
+    color *= pulse;
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
 
 // ---------------------------------------------------------------------------
-// Fake location data for tooltips
+// Atmosphere shader — outer glow halo
 // ---------------------------------------------------------------------------
 
-const LOCATIONS = [
-  { ip: '142.250.80.46', city: 'Mountain View', country: 'US' },
-  { ip: '151.101.1.140', city: 'San Francisco', country: 'US' },
-  { ip: '104.16.132.229', city: 'Toronto', country: 'CA' },
-  { ip: '185.199.108.153', city: 'Amsterdam', country: 'NL' },
-  { ip: '13.107.42.14', city: 'Redmond', country: 'US' },
-  { ip: '93.184.216.34', city: 'London', country: 'GB' },
-  { ip: '198.41.30.2', city: 'Paris', country: 'FR' },
-  { ip: '216.58.214.206', city: 'Zurich', country: 'CH' },
-  { ip: '172.217.14.110', city: 'Frankfurt', country: 'DE' },
-  { ip: '31.13.70.36', city: 'Stockholm', country: 'SE' },
-  { ip: '157.240.1.35', city: 'Singapore', country: 'SG' },
-  { ip: '52.84.150.11', city: 'Tokyo', country: 'JP' },
-  { ip: '103.235.46.39', city: 'Hong Kong', country: 'HK' },
-  { ip: '203.208.41.37', city: 'Sydney', country: 'AU' },
-  { ip: '200.174.9.12', city: 'São Paulo', country: 'BR' },
-  { ip: '154.120.80.11', city: 'Cape Town', country: 'ZA' },
-  { ip: '41.206.32.10', city: 'Nairobi', country: 'KE' },
-  { ip: '178.238.11.6', city: 'Mumbai', country: 'IN' },
-  { ip: '223.5.5.5', city: 'Beijing', country: 'CN' },
-  { ip: '121.78.90.2', city: 'Seoul', country: 'KR' },
-  { ip: '176.32.103.205', city: 'Dublin', country: 'IE' },
-  { ip: '82.98.86.174', city: 'Helsinki', country: 'FI' },
-  { ip: '190.93.240.10', city: 'Buenos Aires', country: 'AR' },
-  { ip: '185.70.41.35', city: 'Moscow', country: 'RU' },
-  { ip: '45.55.99.72', city: 'New York', country: 'US' },
-];
+const atmosphereVertexShader = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vPosition;
+
+  void main() {
+    vNormal = normalize(normalMatrix * normal);
+    vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const atmosphereFragmentShader = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vPosition;
+
+  void main() {
+    vec3 viewDir = normalize(-vPosition);
+    float intensity = pow(0.7 - dot(vNormal, viewDir), 3.0);
+    vec3 color = vec3(0.12, 0.45, 0.85);
+    gl_FragColor = vec4(color, 1.0) * intensity * 0.6;
+  }
+`;
 
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Convert latitude / longitude (degrees) to a Vec3 on the sphere. */
 function latLonToVec3(lat, lon, radius) {
   const phi = (90 - lat) * (Math.PI / 180);
   const theta = (lon + 180) * (Math.PI / 180);
@@ -80,14 +143,12 @@ function latLonToVec3(lat, lon, radius) {
   );
 }
 
-/** Generate a random latitude / longitude pair with uniform sphere distribution. */
 function randomLatLon() {
   const lat = (Math.acos(2 * Math.random() - 1) / Math.PI) * 180 - 90;
   const lon = Math.random() * 360 - 180;
   return { lat, lon };
 }
 
-/** Quadratic bezier arc between two surface points, lifted above the globe. */
 function createArcCurve(start, end, globeRadius) {
   const mid = new THREE.Vector3().addVectors(start, end).multiplyScalar(0.5);
   const dist = start.distanceTo(end);
@@ -96,7 +157,6 @@ function createArcCurve(start, end, globeRadius) {
   return new THREE.QuadraticBezierCurve3(start, mid, end);
 }
 
-/** Create a radial-gradient canvas texture for glow sprites. */
 function createGlowTexture(color, opacity) {
   const canvas = document.createElement('canvas');
   canvas.width = 64;
@@ -108,6 +168,7 @@ function createGlowTexture(color, opacity) {
   const g = (c.g * 255) | 0;
   const b = (c.b * 255) | 0;
   gradient.addColorStop(0, `rgba(${r},${g},${b},${opacity})`);
+  gradient.addColorStop(0.4, `rgba(${r},${g},${b},${opacity * 0.4})`);
   gradient.addColorStop(1, 'rgba(0,0,0,0)');
   ctx.fillStyle = gradient;
   ctx.fillRect(0, 0, 64, 64);
@@ -115,87 +176,128 @@ function createGlowTexture(color, opacity) {
 }
 
 // ---------------------------------------------------------------------------
-// Globe wireframe grid
+// Location data for tooltip
 // ---------------------------------------------------------------------------
 
-function buildGlobe(scene) {
-  const group = new THREE.Group();
-
-  const gridMaterial = new THREE.LineBasicMaterial({
-    color: PALETTE.wireframe,
-    transparent: true,
-    opacity: 0.35,
-  });
+const LOCATIONS = [
+  { ip: '142.250.80.46', city: 'Mountain View', country: 'US' },
+  { ip: '151.101.1.140', city: 'San Francisco', country: 'US' },
+  { ip: '104.16.132.229', city: 'Toronto', country: 'CA' },
+  { ip: '185.199.108.153', city: 'Amsterdam', country: 'NL' },
+  { ip: '13.107.42.14', city: 'Redmond', country: 'US' },
+  { ip: '93.184.216.34', city: 'London', country: 'GB' },
+  { ip: '198.41.30.2', city: 'Paris', country: 'FR' },
+  { ip: '216.58.214.206', city: 'Zurich', country: 'CH' },
+  { ip: '172.217.14.110', city: 'Frankfurt', country: 'DE' },
+  { ip: '31.13.70.36', city: 'Stockholm', country: 'SE' },
+  { ip: '157.240.1.35', city: 'Singapore', country: 'SG' },
+  { ip: '52.84.150.11', city: 'Tokyo', country: 'JP' },
+  { ip: '103.235.46.39', city: 'Hong Kong', country: 'HK' },
+  { ip: '203.208.41.37', city: 'Sydney', country: 'AU' },
+  { ip: '200.174.9.12', city: 'Sao Paulo', country: 'BR' },
+  { ip: '154.120.80.11', city: 'Cape Town', country: 'ZA' },
+  { ip: '41.206.32.10', city: 'Nairobi', country: 'KE' },
+  { ip: '178.238.11.6', city: 'Mumbai', country: 'IN' },
+  { ip: '223.5.5.5', city: 'Beijing', country: 'CN' },
+  { ip: '121.78.90.2', city: 'Seoul', country: 'KR' },
+  { ip: '176.32.103.205', city: 'Dublin', country: 'IE' },
+  { ip: '82.98.86.174', city: 'Helsinki', country: 'FI' },
+  { ip: '190.93.240.10', city: 'Buenos Aires', country: 'AR' },
+  { ip: '185.70.41.35', city: 'Moscow', country: 'RU' },
+  { ip: '45.55.99.72', city: 'New York', country: 'US' },
+  { ip: '103.21.244.0', city: 'Jakarta', country: 'ID' },
+  { ip: '197.234.240.1', city: 'Lagos', country: 'NG' },
+  { ip: '185.180.12.1', city: 'Warsaw', country: 'PL' },
+];
 
-  // Latitude rings
-  for (let lat = -80; lat <= 80; lat += 20) {
-    const pts = [];
-    for (let lon = 0; lon <= 360; lon += 2) {
-      pts.push(latLonToVec3(lat, lon, GLOBE_RADIUS));
-    }
-    const geo = new THREE.BufferGeometry().setFromPoints(pts);
-    group.add(new THREE.Line(geo, gridMaterial));
-  }
+// ---------------------------------------------------------------------------
+// Build Earth
+// ---------------------------------------------------------------------------
 
-  // Longitude lines
-  for (let lon = 0; lon < 360; lon += 20) {
-    const pts = [];
-    for (let lat = -90; lat <= 90; lat += 2) {
-      pts.push(latLonToVec3(lat, lon, GLOBE_RADIUS));
-    }
-    const geo = new THREE.BufferGeometry().setFromPoints(pts);
-    group.add(new THREE.Line(geo, gridMaterial));
+function buildEarth(scene) {
+  const group = new THREE.Group();
+  const loader = new THREE.TextureLoader();
+
+  // Load both textures
+  const dayMap = loader.load('textures/earth_daymap.jpg');
+  const nightMap = loader.load('textures/earth_night.jpg');
+
+  // Improve texture quality
+  for (const tex of [dayMap, nightMap]) {
+    tex.colorSpace = THREE.SRGBColorSpace;
+    tex.anisotropy = 8;
+    tex.minFilter = THREE.LinearMipmapLinearFilter;
+    tex.magFilter = THREE.LinearFilter;
   }
 
-  // Subtle inner atmosphere shell
-  const atmosphereGeo = new THREE.SphereGeometry(GLOBE_RADIUS * 1.015, 48, 48);
-  const atmosphereMat = new THREE.MeshBasicMaterial({
-    color: PALETTE.atmosphereInner,
-    transparent: true,
-    opacity: 0.08,
-    side: THREE.FrontSide,
+  // Sun direction — angled so roughly half the globe is lit
+  const sunDir = new THREE.Vector3(1.0, 0.3, 0.8).normalize();
+
+  // Earth sphere with day/night shader
+  const earthGeo = new THREE.SphereGeometry(GLOBE_RADIUS, 96, 96);
+  const earthMat = new THREE.ShaderMaterial({
+    uniforms: {
+      uDayMap: { value: dayMap },
+      uNightMap: { value: nightMap },
+      uSunDirection: { value: sunDir },
+      uTime: { value: 0 },
+    },
+    vertexShader: earthVertexShader,
+    fragmentShader: earthFragmentShader,
+    transparent: false,
   });
-  group.add(new THREE.Mesh(atmosphereGeo, atmosphereMat));
-
-  // Outer glow shell (fresnel-style shader)
-  const outerGeo = new THREE.SphereGeometry(GLOBE_RADIUS * 1.06, 48, 48);
-  const outerMat = new THREE.ShaderMaterial({
-    vertexShader: `
-      varying vec3 vNormal;
-      void main() {
-        vNormal = normalize(normalMatrix * normal);
-        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }
-    `,
-    fragmentShader: `
+  const earthMesh = new THREE.Mesh(earthGeo, earthMat);
+  group.add(earthMesh);
+
+  // Inner atmosphere rim (additive, front-face)
+  const innerAtmoGeo = new THREE.SphereGeometry(GLOBE_RADIUS * 1.004, 64, 64);
+  const innerAtmoMat = new THREE.ShaderMaterial({
+    vertexShader: atmosphereVertexShader,
+    fragmentShader: /* glsl */ `
       varying vec3 vNormal;
+      varying vec3 vPosition;
       void main() {
-        float intensity = pow(0.65 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 3.0);
-        gl_FragColor = vec4(0.1, 0.5, 0.7, 1.0) * intensity * 0.4;
+        vec3 viewDir = normalize(-vPosition);
+        float rim = 1.0 - max(dot(vNormal, viewDir), 0.0);
+        float intensity = pow(rim, 3.5);
+        vec3 color = mix(vec3(0.0, 0.7, 0.4), vec3(0.15, 0.45, 0.9), rim);
+        gl_FragColor = vec4(color, intensity * 0.3);
       }
     `,
     blending: THREE.AdditiveBlending,
+    side: THREE.FrontSide,
+    transparent: true,
+    depthWrite: false,
+  });
+  group.add(new THREE.Mesh(innerAtmoGeo, innerAtmoMat));
+
+  // Outer atmosphere halo (back-side, larger sphere)
+  const outerAtmoGeo = new THREE.SphereGeometry(GLOBE_RADIUS * 1.18, 64, 64);
+  const outerAtmoMat = new THREE.ShaderMaterial({
+    vertexShader: atmosphereVertexShader,
+    fragmentShader: atmosphereFragmentShader,
+    blending: THREE.AdditiveBlending,
     side: THREE.BackSide,
     transparent: true,
     depthWrite: false,
   });
-  group.add(new THREE.Mesh(outerGeo, outerMat));
+  group.add(new THREE.Mesh(outerAtmoGeo, outerAtmoMat));
 
   scene.add(group);
-  return group;
+  return { group, earthMat };
 }
 
 // ---------------------------------------------------------------------------
 // Connection dots
 // ---------------------------------------------------------------------------
 
-function buildDots(scene) {
+function buildDots(group) {
   const positions = [];
   const dotData = [];
 
   for (let i = 0; i < DOT_COUNT; i++) {
     const { lat, lon } = randomLatLon();
-    const pos = latLonToVec3(lat, lon, GLOBE_RADIUS * 1.005);
+    const pos = latLonToVec3(lat, lon, GLOBE_RADIUS * 1.008);
     positions.push(pos.x, pos.y, pos.z);
     dotData.push({
       position: pos,
@@ -207,10 +309,9 @@ function buildDots(scene) {
   geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
 
   const texture = createGlowTexture(PALETTE.dot, 1.0);
-
   const mat = new THREE.PointsMaterial({
     color: PALETTE.dot,
-    size: 0.07,
+    size: 0.08,
     map: texture,
     transparent: true,
     opacity: 0.9,
@@ -220,7 +321,7 @@ function buildDots(scene) {
   });
 
   const points = new THREE.Points(geo, mat);
-  scene.add(points);
+  group.add(points);
 
   return { points, dotData };
 }
@@ -229,21 +330,20 @@ function buildDots(scene) {
 // Arcs & travelling particles
 // ---------------------------------------------------------------------------
 
-function buildArcs(scene, dotData) {
+function buildArcs(group, dotData) {
   const arcs = [];
   const usedPairs = new Set();
 
   const arcMaterial = new THREE.LineBasicMaterial({
     color: PALETTE.arc,
     transparent: true,
-    opacity: 0.18,
+    opacity: 0.2,
     blending: THREE.AdditiveBlending,
     depthWrite: false,
   });
 
-  // Pick random unique pairs of dots
   let attempts = 0;
-  while (arcs.length < ARC_COUNT && attempts < 200) {
+  while (arcs.length < ARC_COUNT && attempts < 300) {
     attempts++;
     const a = (Math.random() * dotData.length) | 0;
     const b = (Math.random() * dotData.length) | 0;
@@ -252,27 +352,22 @@ function buildArcs(scene, dotData) {
     if (usedPairs.has(key)) continue;
     usedPairs.add(key);
 
-    const curve = createArcCurve(
-      dotData[a].position,
-      dotData[b].position,
-      GLOBE_RADIUS,
-    );
+    const curve = createArcCurve(dotData[a].position, dotData[b].position, GLOBE_RADIUS);
     const pts = curve.getPoints(ARC_SEGMENTS);
     const geo = new THREE.BufferGeometry().setFromPoints(pts);
-    const line = new THREE.Line(geo, arcMaterial);
-    scene.add(line);
-
+    const line = new THREE.Line(geo, arcMaterial.clone());
+    group.add(line);
     arcs.push({ curve, line });
   }
 
-  // Particles travelling along each arc
+  // Travelling particles
   const particlePositions = [];
   const particleMeta = [];
 
   for (let ai = 0; ai < arcs.length; ai++) {
     for (let p = 0; p < PARTICLE_COUNT_PER_ARC; p++) {
       const t = Math.random();
-      const speed = 0.001 + Math.random() * 0.002;
+      const speed = 0.0008 + Math.random() * 0.0018;
       const pt = arcs[ai].curve.getPoint(t);
       particlePositions.push(pt.x, pt.y, pt.z);
       particleMeta.push({ arcIndex: ai, t, speed });
@@ -280,29 +375,58 @@ function buildArcs(scene, dotData) {
   }
 
   const particleGeo = new THREE.BufferGeometry();
-  particleGeo.setAttribute(
-    'position',
-    new THREE.Float32BufferAttribute(particlePositions, 3),
-  );
+  particleGeo.setAttribute('position', new THREE.Float32BufferAttribute(particlePositions, 3));
 
   const particleTex = createGlowTexture(PALETTE.glow, 1.0);
   const particleMat = new THREE.PointsMaterial({
     color: PALETTE.glow,
-    size: 0.045,
+    size: 0.055,
     map: particleTex,
     transparent: true,
-    opacity: 0.85,
+    opacity: 0.9,
     blending: THREE.AdditiveBlending,
     depthWrite: false,
     sizeAttenuation: true,
   });
 
   const particlePoints = new THREE.Points(particleGeo, particleMat);
-  scene.add(particlePoints);
+  group.add(particlePoints);
 
   return { arcs, particlePoints, particleMeta };
 }
 
+// ---------------------------------------------------------------------------
+// Star field
+// ---------------------------------------------------------------------------
+
+function buildStars(scene) {
+  const count = 2000;
+  const positions = new Float32Array(count * 3);
+
+  for (let i = 0; i < count; i++) {
+    const r = 30 + Math.random() * 50;
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.acos(2 * Math.random() - 1);
+    positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+    positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+    positions[i * 3 + 2] = r * Math.cos(phi);
+  }
+
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+
+  const mat = new THREE.PointsMaterial({
+    color: 0x9999cc,
+    size: 0.06,
+    transparent: true,
+    opacity: 0.5,
+    sizeAttenuation: true,
+    depthWrite: false,
+  });
+
+  scene.add(new THREE.Points(geo, mat));
+}
+
 // ---------------------------------------------------------------------------
 // Tooltip
 // ---------------------------------------------------------------------------
@@ -312,18 +436,18 @@ function createTooltip() {
   el.style.cssText = [
     'position: fixed',
     'pointer-events: none',
-    'background: rgba(10, 10, 26, 0.88)',
+    'background: rgba(10, 10, 26, 0.92)',
     'border: 1px solid rgba(0, 204, 255, 0.35)',
-    'border-radius: 4px',
-    'padding: 6px 10px',
+    'border-radius: 6px',
+    'padding: 8px 12px',
     "font-family: 'JetBrains Mono', 'Fira Code', monospace",
     'font-size: 11px',
     'color: #00ff88',
-    'line-height: 1.45',
+    'line-height: 1.5',
     'display: none',
     'z-index: 1000',
-    'backdrop-filter: blur(4px)',
-    'box-shadow: 0 0 12px rgba(0, 204, 255, 0.15)',
+    'backdrop-filter: blur(8px)',
+    'box-shadow: 0 0 16px rgba(0, 204, 255, 0.15), 0 4px 12px rgba(0,0,0,0.4)',
   ].join(';');
   document.body.appendChild(el);
   return el;
@@ -339,7 +463,7 @@ export function initGlobe(canvas) {
     return null;
   }
 
-  // -- Renderer -------------------------------------------------------------
+  // Renderer
   const renderer = new THREE.WebGLRenderer({
     canvas,
     antialias: true,
@@ -347,36 +471,27 @@ export function initGlobe(canvas) {
   });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
   renderer.setClearColor(PALETTE.background, 1);
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
 
   const scene = new THREE.Scene();
 
-  // -- Camera ---------------------------------------------------------------
-  const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
-  camera.position.set(0, 0, 5.5);
-
-  // -- Controls -------------------------------------------------------------
-  const controls = new OrbitControls(camera, canvas);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.06;
-  controls.rotateSpeed = 0.4;
-  controls.enablePan = false;
-  controls.minDistance = 3.2;
-  controls.maxDistance = 9;
-  controls.enableZoom = true;
-
-  // -- Build scene ----------------------------------------------------------
-  const globeGroup = buildGlobe(scene);
-  const { points: dotPoints, dotData } = buildDots(scene);
-  const { arcs, particlePoints, particleMeta } = buildArcs(scene, dotData);
-
-  // Attach everything to the globe group so auto-rotation moves them together
-  globeGroup.add(dotPoints);
-  for (const arc of arcs) {
-    globeGroup.add(arc.line);
-  }
-  globeGroup.add(particlePoints);
+  // Camera — slightly above center for a nice angle
+  const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 200);
+  camera.position.set(0, 0.8, 5.2);
+
+  // Stars
+  buildStars(scene);
 
-  // -- Tooltip & raycasting -------------------------------------------------
+  // Earth
+  const { group: globeGroup, earthMat } = buildEarth(scene);
+  const { points: dotPoints, dotData } = buildDots(globeGroup);
+  const { arcs, particlePoints, particleMeta } = buildArcs(globeGroup, dotData);
+
+  // Tilt globe slightly
+  globeGroup.rotation.x = 0.15;
+  globeGroup.rotation.z = -0.05;
+
+  // Tooltip & raycasting
   const tooltip = createTooltip();
   const raycaster = new THREE.Raycaster();
   raycaster.params.Points.threshold = 0.12;
@@ -397,7 +512,7 @@ export function initGlobe(canvas) {
     hoveredIndex = -1;
   });
 
-  // -- Resize handler -------------------------------------------------------
+  // Resize
   function resize() {
     const parent = canvas.parentElement || document.body;
     const w = parent.clientWidth;
@@ -409,27 +524,27 @@ export function initGlobe(canvas) {
   window.addEventListener('resize', resize);
   resize();
 
-  // -- Interaction state ----------------------------------------------------
-  let isUserInteracting = false;
-  controls.addEventListener('start', () => { isUserInteracting = true; });
-  controls.addEventListener('end', () => { isUserInteracting = false; });
-
+  // Animation
   let dotPulse = 0;
+  const clock = new THREE.Clock();
 
-  // -- Animation loop -------------------------------------------------------
   function animate() {
     requestAnimationFrame(animate);
 
-    // Auto-rotate when idle
-    if (!isUserInteracting) {
-      globeGroup.rotation.y += AUTO_ROTATE_SPEED;
-    }
+    const elapsed = clock.getElapsedTime();
+    const rotationFactor = globeGroup.userData.rotationFactor ?? 1;
 
-    // Subtle dot brightness pulse
+    // Auto-rotate
+    globeGroup.rotation.y += AUTO_ROTATE_SPEED * rotationFactor;
+
+    // Update shader uniforms
+    earthMat.uniforms.uTime.value = elapsed;
+
+    // Dot pulse
     dotPulse += 0.02;
     dotPoints.material.opacity = 0.7 + Math.sin(dotPulse) * 0.2;
 
-    // Move particles along their arcs
+    // Move particles along arcs
     const posAttr = particlePoints.geometry.getAttribute('position');
     for (let i = 0; i < particleMeta.length; i++) {
       const meta = particleMeta[i];
@@ -440,6 +555,12 @@ export function initGlobe(canvas) {
     }
     posAttr.needsUpdate = true;
 
+    // Arc opacity pulse
+    for (let i = 0; i < arcs.length; i++) {
+      const phase = elapsed * 0.8 + i * 0.5;
+      arcs[i].line.material.opacity = 0.12 + Math.sin(phase) * 0.08;
+    }
+
     // Tooltip raycasting
     raycaster.setFromCamera(mouse, camera);
     const intersects = raycaster.intersectObject(dotPoints);
@@ -458,22 +579,18 @@ export function initGlobe(canvas) {
       hoveredIndex = -1;
     }
 
-    controls.update();
     renderer.render(scene, camera);
   }
 
   animate();
 
-  // -- Return public handle -------------------------------------------------
   return {
     scene,
     camera,
     renderer,
-    controls,
     globeGroup,
     dispose() {
       window.removeEventListener('resize', resize);
-      controls.dispose();
       renderer.dispose();
       tooltip.remove();
     },
diff --git a/docs/textures/earth_daymap.jpg b/docs/textures/earth_daymap.jpg
new file mode 100644
index 0000000..55b715d
Binary files /dev/null and b/docs/textures/earth_daymap.jpg differ
diff --git a/docs/textures/earth_night.jpg b/docs/textures/earth_night.jpg
new file mode 100644
index 0000000..1b77b43
Binary files /dev/null and b/docs/textures/earth_night.jpg differ