diff --git a/src/app/[handle]/[collection]/[rkey]/page.tsx b/src/app/[handle]/[collection]/[rkey]/page.tsx
index 7630d35..b31a19a 100644
--- a/src/app/[handle]/[collection]/[rkey]/page.tsx
+++ b/src/app/[handle]/[collection]/[rkey]/page.tsx
@@ -82,8 +82,8 @@ export default function RecordPage() {
 
   if (isLoading) {
     return (
-      <div className="container-narrow" style={{ padding: '4rem 2rem' }}>
-        <Header simple />
+      <div className="container-narrow" style={{ padding: '2rem 2rem 4rem' }}>
+        <Header compact />
         {/* Show a post skeleton by default, as most records are posts */}
         <PostPreviewSkeleton />
       </div>
@@ -92,7 +92,8 @@ export default function RecordPage() {
 
   if (error || !parsed || parsed.type === 'unknown') {
     return (
-      <div className="container-narrow" style={{ padding: '4rem 2rem', textAlign: 'center' }}>
+      <div className="container-narrow" style={{ padding: '2rem 2rem 4rem', textAlign: 'center' }}>
+        <Header compact />
         <h1 style={{ marginBottom: '1rem', color: 'var(--text-primary)' }}>Error</h1>
         <p style={{ color: 'var(--text-secondary)' }}>{error || 'Invalid or unsupported URI'}</p>
       </div>
@@ -100,9 +101,9 @@ export default function RecordPage() {
   }
 
   return (
-    <div className="container-narrow" style={{ padding: '4rem 2rem' }}>
-      {/* Site Header */}
-      <Header simple />
+    <div className="container-narrow" style={{ padding: '2rem 2rem 4rem' }}>
+      {/* Site Header - Compact Mode */}
+      <Header compact />
 
       {/* Record Preview */}
       {recordData && (
diff --git a/src/app/[handle]/page.tsx b/src/app/[handle]/page.tsx
index 33e64d1..bba0963 100644
--- a/src/app/[handle]/page.tsx
+++ b/src/app/[handle]/page.tsx
@@ -62,8 +62,8 @@ export default function ProfilePage() {
 
   if (isLoading) {
     return (
-      <div className="container-narrow" style={{ padding: '4rem 2rem' }}>
-        <Header simple />
+      <div className="container-narrow" style={{ padding: '2rem 2rem 4rem' }}>
+        <Header compact />
         <ProfilePreviewSkeleton />
       </div>
     );
@@ -71,7 +71,8 @@ export default function ProfilePage() {
 
   if (error) {
     return (
-      <div className="container-narrow" style={{ padding: '4rem 2rem', textAlign: 'center' }}>
+      <div className="container-narrow" style={{ padding: '2rem 2rem 4rem', textAlign: 'center' }}>
+        <Header compact />
         <h1 style={{ marginBottom: '1rem', color: 'var(--text-primary)' }}>Error</h1>
         <p style={{ color: 'var(--text-secondary)' }}>{error}</p>
       </div>
@@ -81,9 +82,9 @@ export default function ProfilePage() {
   const parsed = parseURI(handle);
 
   return (
-    <div className="container-narrow" style={{ padding: '4rem 2rem' }}>
-      {/* Site Header */}
-      <Header simple />
+    <div className="container-narrow" style={{ padding: '2rem 2rem 4rem' }}>
+      {/* Site Header - Compact Mode */}
+      <Header compact />
 
       {/* Profile Preview */}
       {profileData && (
diff --git a/src/app/globals.css b/src/app/globals.css
index a389502..ef76eff 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -192,6 +192,56 @@ a:hover {
   transform: scale(1.1) rotate(-5deg);
 }
 
+/* Compact Navigation Links - for dropdown menu */
+.compact-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.75rem 1rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  font-weight: 400;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.compact-nav-link::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--text-accent);
+  transform: scaleY(0);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.compact-nav-link:hover {
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border-color: var(--border-medium);
+  transform: translateX(4px);
+}
+
+.compact-nav-link:hover::before {
+  transform: scaleY(1);
+}
+
+.compact-nav-link svg {
+  color: var(--text-accent);
+  transition: all 0.3s ease;
+}
+
+.compact-nav-link:hover svg {
+  color: var(--text-primary);
+  transform: scale(1.15) rotate(-5deg);
+}
+
 /* Buttons */
 button {
   font-family: var(--font-serif);
@@ -607,6 +657,16 @@ html {
   will-change: transform;
 }
 
+/* Preview cards - subtle organic rotation on hover */
+.card:not(.feature-card-primary):not(.feature-card-secondary):not(.cta-card) {
+  will-change: transform;
+}
+
+.card:not(.feature-card-primary):not(.feature-card-secondary):not(.cta-card):hover {
+  transform: rotate(0deg) scale(1.005) !important;
+  box-shadow: 0 4px 40px var(--glow-subtle);
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   html {
@@ -640,7 +700,8 @@ html {
   .feature-card-primary,
   .feature-card-secondary,
   .example-link,
-  .cta-card {
+  .cta-card,
+  .card {
     transform: none !important;
   }
   
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index edb3057..815248c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,11 +1,133 @@
+'use client';
+
+import { useState } from 'react';
 import Link from 'next/link';
-import { Home, Link2, Code } from 'lucide-react';
+import { Home, Link2, Code, Leaf } from 'lucide-react';
 
 interface HeaderProps {
   simple?: boolean; // If true, shows a smaller version without the tagline
+  compact?: boolean; // If true, shows ultra-compact inline header with expandable menu
 }
 
-export default function Header({ simple = false }: HeaderProps) {
+export default function Header({ simple = false, compact = false }: HeaderProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Ultra-compact mode for link preview pages
+  if (compact) {
+    return (
+      <header
+        style={{
+          position: 'relative',
+          marginBottom: '2rem',
+          paddingTop: '1rem',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '1rem',
+            padding: '0.75rem 1rem',
+            background: 'var(--bg-secondary)',
+            border: '1px solid var(--border-medium)',
+            transform: 'rotate(-0.2deg)',
+            transition: 'all 0.3s ease',
+          }}
+        >
+          {/* Logo/Wordmark */}
+          <Link
+            href="/"
+            style={{
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            <span
+              style={{
+                fontSize: '1.25rem',
+                fontWeight: 300,
+                letterSpacing: '-0.01em',
+                background: 'linear-gradient(135deg, var(--text-primary) 0%, var(--text-accent) 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                backgroundClip: 'text',
+              }}
+            >
+              aturi.to
+            </span>
+          </Link>
+
+          {/* Expandable menu button */}
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            style={{
+              padding: '0.5rem',
+              background: 'var(--bg-tertiary)',
+              border: '1px solid var(--border-medium)',
+              color: 'var(--text-accent)',
+              transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
+              transform: isExpanded ? 'rotate(90deg) scale(1.1)' : 'rotate(0deg)',
+            }}
+            aria-label="Toggle menu"
+            aria-expanded={isExpanded}
+          >
+            <Leaf size={18} style={{
+              transition: 'all 0.3s ease',
+              opacity: isExpanded ? 0.6 : 1,
+            }} />
+          </button>
+        </div>
+
+        {/* Expanding organic nav panel */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            right: 0,
+            marginTop: '0.5rem',
+            background: 'var(--bg-secondary)',
+            border: '1px solid var(--border-medium)',
+            transformOrigin: 'top center',
+            transform: isExpanded
+              ? 'scaleY(1) translateY(0) rotate(0.3deg)'
+              : 'scaleY(0) translateY(-10px) rotate(0deg)',
+            opacity: isExpanded ? 1 : 0,
+            transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
+            pointerEvents: isExpanded ? 'auto' : 'none',
+            zIndex: 50,
+            overflow: 'hidden',
+          }}
+        >
+          <nav
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.25rem',
+              padding: '0.75rem',
+            }}
+          >
+            <Link href="/" className="compact-nav-link">
+              <Home size={16} />
+              <span>about</span>
+            </Link>
+            <Link href="/create" className="compact-nav-link">
+              <Link2 size={16} />
+              <span>create link</span>
+            </Link>
+            <Link href="/integrate" className="compact-nav-link">
+              <Code size={16} />
+              <span>integrate</span>
+            </Link>
+          </nav>
+        </div>
+      </header>
+    );
+  }
+  
   if (simple) {
     return (
       <header
diff --git a/src/components/PostPreview.tsx b/src/components/PostPreview.tsx
index 8cd9e9b..373de89 100644
--- a/src/components/PostPreview.tsx
+++ b/src/components/PostPreview.tsx
@@ -123,7 +123,10 @@ export default function PostPreview({ post }: PostPreviewProps) {
         padding: '1.5rem',
         background: 'var(--bg-secondary)',
         border: '1px solid var(--border-medium)',
+        transform: 'rotate(0.4deg)',
+        transition: 'all 0.4s ease',
       }}
+      className="card"
     >
       {/* Author Info */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '1rem' }}>
diff --git a/src/components/PostPreviewSkeleton.tsx b/src/components/PostPreviewSkeleton.tsx
index a555d52..b05bb10 100644
--- a/src/components/PostPreviewSkeleton.tsx
+++ b/src/components/PostPreviewSkeleton.tsx
@@ -22,6 +22,7 @@ export default function PostPreviewSkeleton({
         padding: '1.5rem',
         background: 'var(--bg-secondary)',
         border: '1px solid var(--border-medium)',
+        transform: 'rotate(0.4deg)',
       }}
     >
       {/* Author Info skeleton */}
diff --git a/src/components/ProfilePreview.tsx b/src/components/ProfilePreview.tsx
index 1c01e0e..34ef551 100644
--- a/src/components/ProfilePreview.tsx
+++ b/src/components/ProfilePreview.tsx
@@ -63,7 +63,10 @@ export default function ProfilePreview({ profile }: ProfilePreviewProps) {
         overflow: 'hidden',
         background: 'var(--bg-secondary)',
         border: '1px solid var(--border-medium)',
+        transform: 'rotate(-0.3deg)',
+        transition: 'all 0.4s ease',
       }}
+      className="card"
     >
       {/* Banner */}
       {banner ? (
diff --git a/src/components/ProfilePreviewSkeleton.tsx b/src/components/ProfilePreviewSkeleton.tsx
index ad85275..5bafe1a 100644
--- a/src/components/ProfilePreviewSkeleton.tsx
+++ b/src/components/ProfilePreviewSkeleton.tsx
@@ -15,6 +15,7 @@ export default function ProfilePreviewSkeleton() {
         overflow: 'hidden',
         background: 'var(--bg-secondary)',
         border: '1px solid var(--border-medium)',
+        transform: 'rotate(-0.3deg)',
       }}
     >
       {/* Banner skeleton */}
diff --git a/src/components/RecordPreview.tsx b/src/components/RecordPreview.tsx
index f457042..2a572d1 100644
--- a/src/components/RecordPreview.tsx
+++ b/src/components/RecordPreview.tsx
@@ -64,7 +64,10 @@ export default function RecordPreview({ record, collection, handle, rkey }: Reco
           background: 'var(--bg-secondary)',
           border: '1px solid var(--border-medium)',
           overflow: 'hidden',
+          transform: 'rotate(0.2deg)',
+          transition: 'all 0.4s ease',
         }}
+        className="card"
       >
         {/* Header: URI Structure */}
         <div
@@ -218,69 +221,106 @@ export default function RecordPreview({ record, collection, handle, rkey }: Reco
           style={{
             position: 'fixed',
             inset: 0,
-            background: 'rgba(0, 0, 0, 0.85)',
-            backdropFilter: 'blur(8px)',
+            background: 'rgba(10, 10, 10, 0.75)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
             zIndex: 1000,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             padding: '2rem',
-            animation: 'modal-fade-in 0.2s ease-out',
+            animation: 'modal-fade-in 0.3s ease-out',
           }}
           onClick={() => setShowJsonModal(false)}
         >
           <div
             style={{
               width: '100%',
-              maxWidth: '800px',
-              maxHeight: '90vh',
-              background: 'var(--bg-secondary)',
+              maxWidth: '900px',
+              maxHeight: '85vh',
+              background: 'linear-gradient(145deg, rgba(21, 21, 21, 0.95) 0%, rgba(26, 26, 26, 0.98) 100%)',
               border: '1px solid var(--border-medium)',
+              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px var(--glow-subtle)',
               display: 'flex',
               flexDirection: 'column',
-              animation: 'modal-slide-up 0.3s ease-out',
+              animation: 'modal-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
+              position: 'relative',
+              overflow: 'hidden',
             }}
             onClick={(e) => e.stopPropagation()}
           >
+            {/* Ambient glow effect */}
+            <div
+              style={{
+                position: 'absolute',
+                top: '-50%',
+                left: '-20%',
+                width: '140%',
+                height: '100%',
+                background: 'radial-gradient(circle at 30% 40%, var(--glow-medium) 0%, transparent 50%)',
+                opacity: 0.3,
+                pointerEvents: 'none',
+                animation: 'breathe 8s ease-in-out infinite',
+              }}
+            />
+
             {/* Modal Header */}
             <div
               style={{
-                padding: '1.25rem 1.5rem',
-                borderBottom: '1px solid var(--border-medium)',
+                padding: '1.75rem 2rem',
+                borderBottom: '1px solid var(--border-subtle)',
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 justifyContent: 'space-between',
-                background: 'var(--bg-tertiary)',
+                background: 'rgba(26, 26, 26, 0.4)',
+                position: 'relative',
+                zIndex: 1,
               }}
             >
-              <div>
-                <div style={{ fontSize: '1.125rem', fontWeight: '400', color: 'var(--text-primary)', marginBottom: '0.25rem' }}>
+              <div style={{ flex: 1, paddingRight: '1rem' }}>
+                <div style={{ 
+                  fontSize: '1.25rem', 
+                  fontWeight: '300', 
+                  color: 'var(--text-primary)', 
+                  marginBottom: '0.5rem',
+                  letterSpacing: '-0.01em',
+                }}>
                   Full Record Data
                 </div>
-                <div style={{ fontSize: '0.8125rem', color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>
+                <div style={{ 
+                  fontSize: '0.8125rem', 
+                  color: 'var(--text-tertiary)', 
+                  fontFamily: 'var(--font-mono)',
+                  wordBreak: 'break-all',
+                }}>
                   {displayType}
                 </div>
               </div>
               <button
                 onClick={() => setShowJsonModal(false)}
                 style={{
-                  padding: '0.5rem',
-                  background: 'none',
-                  border: 'none',
+                  padding: '0.625rem',
+                  background: 'rgba(26, 26, 26, 0.6)',
+                  border: '1px solid var(--border-subtle)',
                   color: 'var(--text-tertiary)',
                   cursor: 'pointer',
                   display: 'flex',
                   alignItems: 'center',
-                  transition: 'color 0.2s ease',
+                  transition: 'all 0.2s ease',
+                  flexShrink: 0,
                 }}
                 onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'var(--bg-tertiary)';
                   e.currentTarget.style.color = 'var(--text-primary)';
+                  e.currentTarget.style.borderColor = 'var(--border-medium)';
                 }}
                 onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'rgba(26, 26, 26, 0.6)';
                   e.currentTarget.style.color = 'var(--text-tertiary)';
+                  e.currentTarget.style.borderColor = 'var(--border-subtle)';
                 }}
               >
-                <X size={24} />
+                <X size={20} />
               </button>
             </div>
 
@@ -289,24 +329,41 @@ export default function RecordPreview({ record, collection, handle, rkey }: Reco
               style={{
                 flex: 1,
                 overflow: 'auto',
-                padding: '1.5rem',
+                padding: '2rem',
+                position: 'relative',
+                zIndex: 1,
               }}
             >
               <pre
                 style={{
                   margin: 0,
-                  padding: '1.25rem',
-                  background: 'var(--bg-tertiary)',
+                  padding: '1.5rem',
+                  background: 'rgba(26, 26, 26, 0.6)',
                   border: '1px solid var(--border-subtle)',
                   fontSize: '0.875rem',
-                  lineHeight: '1.6',
+                  lineHeight: '1.7',
                   color: 'var(--text-primary)',
                   fontFamily: 'var(--font-mono)',
+                  boxShadow: 'inset 0 0 40px rgba(0, 0, 0, 0.3)',
                 }}
               >
                 {JSON.stringify(value, null, 2)}
               </pre>
             </div>
+
+            {/* Subtle bottom fade */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: '60px',
+                background: 'linear-gradient(to top, rgba(21, 21, 21, 0.95), transparent)',
+                pointerEvents: 'none',
+                zIndex: 2,
+              }}
+            />
           </div>
         </div>
       )}
diff --git a/src/components/RecordPreviewSkeleton.tsx b/src/components/RecordPreviewSkeleton.tsx
index 69b0b79..3efeb9d 100644
--- a/src/components/RecordPreviewSkeleton.tsx
+++ b/src/components/RecordPreviewSkeleton.tsx
@@ -14,6 +14,7 @@ export default function RecordPreviewSkeleton() {
         padding: '1.5rem',
         background: 'var(--bg-secondary)',
         border: '1px solid var(--border-medium)',
+        transform: 'rotate(0.2deg)',
       }}
     >
       {/* Record Type Header */}