diff --git a/index.html b/index.html
index 5fce015..d2bcdf9 100644
--- a/index.html
+++ b/index.html
@@ -7,218 +7,204 @@
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
-  <header class="hero">
-    <nav class="nav">
-      <div class="logo">ByteGeist</div>
-      <div class="nav-links">
-        <a href="#architecture">Architecture</a>
-        <a href="#operations">Operations</a>
-        <a href="#security">Security</a>
-        <a href="#development">CI/CD</a>
-        <a href="#recovery">Recovery</a>
-      </div>
+  <header class="site-header">
+    <a class="brand" href="#">
+      <img src="assets/images/bytegeist-logo.png" alt="ByteGeist logo" />
+      <span>ByteGeist</span>
+    </a>
+
+    <nav>
+      <a href="#architecture">Architecture</a>
+      <a href="#operations">Operations</a>
+      <a href="#security">Security</a>
+      <a href="#development">Development</a>
+      <a href="#platform">Platform</a>
+      <a href="#recovery">Recovery</a>
     </nav>
 
-    <section class="hero-grid">
-      <div class="hero-content">
-        <p class="eyebrow">Self-Hosted Infrastructure Platform</p>
-        <h1>Infrastructure, security, monitoring, and automation built from scratch.</h1>
-        <p class="subtext">
-          ByteGeist Cloud is a self-hosted homelab platform running on Ubuntu, Docker,
-          Authentik, Grafana, Loki, Prometheus, CrowdSec, Gitea, and Woodpecker CI.
-        </p>
-
-        <div class="buttons">
-          <a href="https://wiki.casko.dev" class="btn primary">View Documentation</a>
-          <a href="https://git.casko.dev" class="btn secondary">View Git Server</a>
-        </div>
-      </div>
-
-      <div class="hero-image">
-        <img src="assets/images/portfolio-grafana-operations.png" alt="ByteGeist Grafana operations dashboard" />
-      </div>
-    </section>
+    <a class="nav-button" href="https://wiki.casko.dev">Docs</a>
   </header>
 
   <main>
-    <section class="stats">
-      <div><span>26</span><p>Containers</p></div>
-      <div><span>20+</span><p>Services</p></div>
-      <div><span>SSO</span><p>Authentik</p></div>
-      <div><span>CI/CD</span><p>Woodpecker</p></div>
-    </section>
-
-    <section class="section intro">
-      <h2>What is ByteGeist?</h2>
-      <p>
-        ByteGeist Cloud is a self-hosted infrastructure platform built to practice real-world
-        Linux administration, Docker operations, networking, identity management, monitoring,
-        logging, security hardening, backup planning, disaster recovery, and CI/CD automation.
-      </p>
-    </section>
-
-    <section id="architecture" class="section">
-      <div class="section-heading">
-        <p class="eyebrow">Architecture</p>
-        <h2>Platform Design</h2>
+    <section class="hero">
+      <div class="hero-copy">
+        <p class="eyebrow">Self-Hosted Infrastructure Platform</p>
+        <h1>Infrastructure, security, monitoring, and automation <span>built from scratch.</span></h1>
         <p>
-          Traffic flows through Nginx Proxy Manager, authentication is centralized through
-          Authentik, and services are monitored, logged, backed up, and documented.
+          ByteGeist Cloud is a self-hosted infrastructure platform built on Ubuntu, Docker,
+          Authentik, Grafana, Loki, Prometheus, CrowdSec, Gitea, and Woodpecker CI.
         </p>
+
+        <div class="actions">
+          <a href="#architecture" class="button primary">Explore Architecture</a>
+          <a href="https://git.casko.dev" class="button secondary">View Git Server</a>
+        </div>
       </div>
 
-      <div class="feature-image wide">
+      <div class="hero-art">
+        <img src="assets/images/bytegeist-logo.png" alt="ByteGeist cyber ghost logo" />
+      </div>
+    </section>
+
+    <section class="stats">
+      <div><strong>26</strong><span>Containers</span></div>
+      <div><strong>20+</strong><span>Services</span></div>
+      <div><strong>11</strong><span>Protected Apps</span></div>
+      <div><strong>SSO</strong><span>Authentik</span></div>
+      <div><strong>CI/CD</strong><span>Woodpecker</span></div>
+    </section>
+
+    <section id="architecture" class="split-section">
+      <div class="panel large">
+        <p class="eyebrow">Architecture Overview</p>
+        <h2>Designed like a small production platform.</h2>
+        <p>
+          Traffic flows through Nginx Proxy Manager, access is controlled through Authentik,
+          and the environment is monitored, logged, secured, backed up, and documented.
+        </p>
         <img src="assets/images/bytegeist-architecture.png" alt="ByteGeist architecture diagram" />
       </div>
+
+      <div class="panel about">
+        <p class="eyebrow">About ByteGeist</p>
+        <h2>Built to prove real infrastructure skills.</h2>
+        <ul>
+          <li>Centralized SSO and 2FA</li>
+          <li>Monitoring and log aggregation</li>
+          <li>Automated CI/CD pipelines</li>
+          <li>Threat detection and response</li>
+          <li>Backups and disaster recovery</li>
+          <li>Technical documentation</li>
+        </ul>
+      </div>
     </section>
 
     <section id="operations" class="section">
-      <div class="section-heading">
-        <p class="eyebrow">Operations</p>
-        <h2>Monitoring & Logging</h2>
-        <p>
-          Grafana, Prometheus, Loki, Alloy, Node Exporter, and cAdvisor provide visibility
-          into system health, container workloads, and infrastructure logs.
-        </p>
-      </div>
-
-      <div class="screenshot-grid">
-        <article class="screenshot-card">
+      <p class="eyebrow">Operations</p>
+      <h2>Monitoring & Logging</h2>
+      <div class="card-grid two">
+        <article class="card">
           <img src="assets/images/portfolio-grafana-operations.png" alt="Grafana operations dashboard" />
-          <div>
-            <h3>Infrastructure Monitoring</h3>
-            <p>System health, uptime, memory, CPU, disk usage, and container metrics in Grafana.</p>
-          </div>
+          <h3>Infrastructure Monitoring</h3>
+          <p>Grafana dashboards show uptime, CPU, memory, disk, container metrics, and system health.</p>
         </article>
 
-        <article class="screenshot-card">
+        <article class="card">
           <img src="assets/images/portfolio-grafana-logs.png" alt="Grafana logs dashboard" />
-          <div>
-            <h3>Centralized Logging</h3>
-            <p>Loki and Grafana provide searchable logs for containers and infrastructure troubleshooting.</p>
-          </div>
+          <h3>Centralized Logging</h3>
+          <p>Loki and Grafana provide searchable logs for containers and infrastructure troubleshooting.</p>
         </article>
       </div>
     </section>
 
-    <section id="security" class="section dark">
-      <div class="section-heading">
-        <p class="eyebrow">Security</p>
-        <h2>Identity & Threat Detection</h2>
-        <p>
-          Authentik provides single sign-on and access control while Fail2Ban and CrowdSec
-          detect and block hostile traffic.
-        </p>
-      </div>
-
-      <div class="screenshot-grid">
-        <article class="screenshot-card">
+    <section id="security" class="section">
+      <p class="eyebrow">Security</p>
+      <h2>Identity & Threat Protection</h2>
+      <div class="card-grid two">
+        <article class="card">
           <img src="assets/images/portfolio-authentik-applications.png" alt="Authentik application portal" />
-          <div>
-            <h3>Centralized Identity</h3>
-            <p>SSO, OAuth2, OIDC, Forward Auth, and 2FA protect access to internal services.</p>
-          </div>
+          <h3>Centralized Identity</h3>
+          <p>Authentik provides SSO, OAuth2, OIDC, Forward Auth, access control, and 2FA.</p>
         </article>
 
-        <article class="screenshot-card">
-          <img src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec security decisions" />
-          <div>
-            <h3>Threat Detection</h3>
-            <p>CrowdSec detects brute-force behavior and creates firewall decisions to block attackers.</p>
-          </div>
+        <article class="card">
+          <img src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec decisions list" />
+          <h3>Threat Detection & Response</h3>
+          <p>CrowdSec detects malicious SSH activity and creates firewall decisions to block attackers.</p>
         </article>
       </div>
     </section>
 
     <section id="development" class="section">
-      <div class="section-heading">
-        <p class="eyebrow">Development</p>
-        <h2>Git Hosting & CI/CD</h2>
-        <p>
-          Gitea hosts the code and infrastructure repositories while Woodpecker CI runs automated
-          pipelines triggered by repository activity.
-        </p>
-      </div>
-
-      <div class="screenshot-grid">
-        <article class="screenshot-card">
+      <p class="eyebrow">Development</p>
+      <h2>Git Hosting & CI/CD</h2>
+      <div class="card-grid two">
+        <article class="card">
           <img src="assets/images/portfolio-gitea-dashboard.png" alt="Gitea dashboard" />
-          <div>
-            <h3>Self-Hosted Git</h3>
-            <p>Gitea manages source code, project history, documentation, and infrastructure repositories.</p>
-          </div>
+          <h3>Self-Hosted Git</h3>
+          <p>Gitea hosts infrastructure code, documentation, project files, and portfolio development.</p>
         </article>
 
-        <article class="screenshot-card">
+        <article class="card">
           <img src="assets/images/portfolio-woodpecker-pipeline.png" alt="Woodpecker successful pipeline" />
-          <div>
-            <h3>CI/CD Automation</h3>
-            <p>Woodpecker successfully runs automated pipelines connected to Gitea repositories.</p>
-          </div>
+          <h3>CI/CD Automation</h3>
+          <p>Woodpecker runs automated pipelines connected to Gitea repositories.</p>
         </article>
       </div>
     </section>
 
-    <section class="section">
-      <div class="section-heading">
-        <p class="eyebrow">Service Portal</p>
-        <h2>Centralized Dashboard</h2>
-        <p>
-          Dashy acts as the launchpad for the environment, organizing infrastructure,
-          observability, development, security, tools, and user services.
-        </p>
-      </div>
-
-      <div class="screenshot-grid">
-        <article class="screenshot-card">
-          <img src="assets/images/portfolio-cloud-dashboard-overview.png" alt="Dashy dashboard overview" />
-          <div>
-            <h3>Operations Portal</h3>
-            <p>Quick access to core infrastructure, observability, and development services.</p>
-          </div>
+    <section id="platform" class="section">
+      <p class="eyebrow">Platform</p>
+      <h2>Service Portal</h2>
+      <div class="card-grid two">
+        <article class="card">
+          <img src="assets/images/portfolio-cloud-dashboard-overview.png" alt="Dashy overview" />
+          <h3>Operations Portal</h3>
+          <p>Dashy provides quick access to infrastructure, observability, and development services.</p>
         </article>
 
-        <article class="screenshot-card">
-          <img src="assets/images/portfolio-cloud-dashboard-services.png" alt="Dashy service catalog" />
-          <div>
-            <h3>Service Catalog</h3>
-            <p>Organized access to security tools, utilities, file management, and public sites.</p>
-          </div>
+        <article class="card">
+          <img src="assets/images/portfolio-cloud-dashboard-services.png" alt="Dashy services" />
+          <h3>Service Catalog</h3>
+          <p>Organized access to security tools, utilities, file management, and public sites.</p>
         </article>
       </div>
     </section>
 
-    <section id="recovery" class="section dark">
-      <div class="section-heading">
-        <p class="eyebrow">Recovery</p>
-        <h2>Documentation & Disaster Recovery</h2>
-        <p>
-          ByteGeist includes documented restore procedures, backup validation, service inventory,
-          DNS information, and recovery priorities.
-        </p>
-      </div>
-
-      <div class="feature-image">
-        <img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="ByteGeist disaster recovery documentation" />
+    <section id="recovery" class="section">
+      <p class="eyebrow">Recovery</p>
+      <h2>Documentation & Disaster Recovery</h2>
+      <div class="feature-card">
+        <img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="Disaster recovery documentation" />
+        <div>
+          <h3>Recovery Planning</h3>
+          <p>
+            ByteGeist includes documented restore procedures, backup validation, service inventory,
+            DNS information, recovery priorities, and full environment rebuild planning.
+          </p>
+        </div>
       </div>
     </section>
 
-    <section class="section skills">
-      <h2>Skills Demonstrated</h2>
-      <div class="skills-grid">
+    <section class="section challenges">
+      <p class="eyebrow">Technical Challenges</p>
+      <h2>Problems Solved</h2>
+      <div class="challenge-grid">
+        <div>
+          <h3>OIDC Integration</h3>
+          <p>Resolved redirect URI mismatches, user provisioning, and authorization issues.</p>
+        </div>
+        <div>
+          <h3>Forward Auth</h3>
+          <p>Integrated Authentik Forward Auth with reverse proxy protected services.</p>
+        </div>
+        <div>
+          <h3>Observability</h3>
+          <p>Built centralized metrics and logging using Grafana, Prometheus, Loki, and Alloy.</p>
+        </div>
+        <div>
+          <h3>Security Hardening</h3>
+          <p>Implemented SSH key-only login, Fail2Ban, CrowdSec, UFW, TLS, and SSO.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="skills">
+      <h2>Core Skills Demonstrated</h2>
+      <div class="skills-list">
         <span>Linux Administration</span>
-        <span>Docker</span>
-        <span>Docker Compose</span>
+        <span>Docker & Compose</span>
         <span>Reverse Proxies</span>
-        <span>SSL/TLS</span>
-        <span>DNS</span>
-        <span>SSO</span>
-        <span>OAuth2 / OIDC</span>
-        <span>Monitoring</span>
+        <span>Networking</span>
+        <span>TLS / SSL</span>
+        <span>DNS Management</span>
+        <span>Identity Management</span>
+        <span>SSO / OAuth2 / OIDC</span>
+        <span>Monitoring & Observability</span>
         <span>Centralized Logging</span>
-        <span>CI/CD</span>
+        <span>CI/CD Automation</span>
         <span>Security Hardening</span>
-        <span>Threat Detection</span>
+        <span>Threat Detection & Response</span>
         <span>Backup Strategy</span>
         <span>Disaster Recovery</span>
         <span>Technical Documentation</span>
@@ -227,7 +213,8 @@
   </main>
 
   <footer>
-    <p>ByteGeist Cloud • Built and maintained by Keith Casko</p>
+    <span>ByteGeist Cloud</span>
+    <p>Built and maintained by Keith Casko</p>
   </footer>
 </body>
 </html>
\ No newline at end of file