diff --git a/apps/web/src/components/AppNav.tsx b/apps/web/src/components/AppNav.tsx
new file mode 100644
index 0000000..c273d71
--- /dev/null
+++ b/apps/web/src/components/AppNav.tsx
@@ -0,0 +1,185 @@
+import React, { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { colors, fonts } from '@homelab-stackdoc/renderer'
+import { UserMenu } from './UserMenu'
+
+interface AppNavProps {
+  title?: string
+  kicker?: string
+  primaryAction?: React.ReactNode
+}
+
+const NavLink: React.FC<{ to: string; children: React.ReactNode }> = ({ to, children }) => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const active = location.pathname === to
+
+  return (
+    <button
+      onClick={() => navigate(to)}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.color = colors.primary
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.color = active ? colors.primary : colors.textSecondary
+      }}
+      style={{
+        background: 'transparent',
+        border: 'none',
+        color: active ? colors.primary : colors.textSecondary,
+        fontFamily: fonts.mono,
+        fontSize: 11,
+        letterSpacing: '0.04em',
+        cursor: 'pointer',
+        padding: '4px 0',
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
+const ExternalNavLink: React.FC<{ href: string; children: React.ReactNode }> = ({
+  href,
+  children,
+}) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    onMouseEnter={(e) => {
+      e.currentTarget.style.color = colors.primary
+    }}
+    onMouseLeave={(e) => {
+      e.currentTarget.style.color = colors.textSecondary
+    }}
+    style={{
+      color: colors.textSecondary,
+      fontFamily: fonts.mono,
+      fontSize: 11,
+      letterSpacing: '0.04em',
+      textDecoration: 'none',
+      padding: '4px 0',
+    }}
+  >
+    {children}
+  </a>
+)
+
+const DefaultNewDiagramButton: React.FC = () => {
+  const navigate = useNavigate()
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <button
+      onClick={() => navigate('/editor')}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: '5px 12px',
+        background: hovered ? 'rgba(0, 229, 255, 0.1)' : 'transparent',
+        border: `1px solid ${colors.primary}`,
+        borderRadius: 5,
+        color: colors.primary,
+        cursor: 'pointer',
+        fontFamily: fonts.mono,
+        fontSize: 10,
+        fontWeight: 700,
+        letterSpacing: '0.06em',
+        transition: 'background 0.15s',
+      }}
+    >
+      NEW DIAGRAM
+    </button>
+  )
+}
+
+export const AppNav: React.FC<AppNavProps> = ({ title, kicker, primaryAction }) => (
+  <header
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 24,
+      padding: '14px 28px',
+      borderBottom: `1px solid ${colors.border}`,
+      background: 'rgba(8, 15, 30, 0.92)',
+      backdropFilter: 'blur(8px)',
+      position: 'sticky',
+      top: 0,
+      zIndex: 50,
+    }}
+  >
+    {/* Brand — anchor, not navigate(), so middle-click opens a new tab. */}
+    <a
+      href="/"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        textDecoration: 'none',
+        color: colors.textPrimary,
+        fontSize: 13,
+        fontWeight: 700,
+        letterSpacing: '0.04em',
+      }}
+    >
+      <span style={{ color: colors.primary }}>&gt;_</span>
+      stackdoc
+    </a>
+
+    <span
+      style={{
+        padding: '2px 6px',
+        border: `1px solid ${colors.green}40`,
+        borderRadius: 3,
+        color: colors.green,
+        fontSize: 8,
+        fontWeight: 700,
+        letterSpacing: '0.1em',
+      }}
+    >
+      LIVE
+    </span>
+
+    {title && (
+      <span
+        style={{
+          color: colors.textPrimary,
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: '0.04em',
+        }}
+      >
+        {title}
+      </span>
+    )}
+
+    {kicker && (
+      <span
+        style={{
+          color: colors.textMuted,
+          fontSize: 11,
+          fontWeight: 400,
+          letterSpacing: 0,
+        }}
+      >
+        {kicker}
+      </span>
+    )}
+
+    <div style={{ flex: 1 }} />
+
+    <nav style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
+      <NavLink to="/templates">templates</NavLink>
+      <NavLink to="/gallery">gallery</NavLink>
+      <ExternalNavLink href="https://github.com/meetKazuki/infra-stackdoc">github</ExternalNavLink>
+    </nav>
+
+    {primaryAction ?? <DefaultNewDiagramButton />}
+
+    <UserMenu />
+  </header>
+)
diff --git a/apps/web/src/components/PreviewPane.tsx b/apps/web/src/components/PreviewPane.tsx
index 4bd19c4..fe7b953 100644
--- a/apps/web/src/components/PreviewPane.tsx
+++ b/apps/web/src/components/PreviewPane.tsx
@@ -1,16 +1,13 @@
-import html2canvas from 'html2canvas'
-import React, { useRef, useState, useCallback } from 'react'
+import React from 'react'
 import { TopologyCanvas } from '@homelab-stackdoc/renderer'
 import type { PositionedGraph, ValidationError, Device, Connection } from '@homelab-stackdoc/core'
-import { SharePanel } from './SharePanel'
 
 interface PreviewPaneProps {
   graph: PositionedGraph | null
   errors: ValidationError[]
   deviceMap: Map<string, Device>
   connections: Connection[]
-  yaml: string
-  editingSlug?: string
+  captureRef: React.RefObject<HTMLDivElement>
 }
 
 export const PreviewPane: React.FC<PreviewPaneProps> = ({
@@ -18,35 +15,8 @@ export const PreviewPane: React.FC<PreviewPaneProps> = ({
   errors,
   deviceMap,
   connections,
-  yaml,
-  editingSlug,
+  captureRef,
 }) => {
-  const captureRef = useRef<HTMLDivElement>(null)
-  const [isExporting, setIsExporting] = useState(false)
-
-  const handleExportPng = useCallback(async () => {
-    if (!captureRef.current || !graph) return
-    setIsExporting(true)
-    try {
-      const canvas = await html2canvas(captureRef.current, {
-        backgroundColor: '#080f1e',
-        scale: 2,
-        useCORS: true,
-        logging: false,
-        width: captureRef.current.offsetWidth,
-        height: captureRef.current.offsetHeight,
-      })
-      const link = document.createElement('a')
-      link.download = `homelab-topology-${Date.now()}.png`
-      link.href = canvas.toDataURL('image/png')
-      link.click()
-    } catch (err) {
-      console.error('PNG export failed:', err)
-    } finally {
-      setIsExporting(false)
-    }
-  }, [graph])
-
   if (errors.some((e) => e.severity === 'error') || !graph) {
     return (
       <div
@@ -76,12 +46,6 @@ export const PreviewPane: React.FC<PreviewPaneProps> = ({
       <div ref={captureRef} style={{ height: '100%' }}>
         <TopologyCanvas graph={graph} deviceMap={deviceMap} connections={connections} />
       </div>
-      <SharePanel
-        yaml={yaml}
-        onExportPng={handleExportPng}
-        isExporting={isExporting}
-        editingSlug={editingSlug}
-      />
     </div>
   )
 }
diff --git a/apps/web/src/components/SharePanel.tsx b/apps/web/src/components/SharePanel.tsx
index 5b159fd..afbfb22 100644
--- a/apps/web/src/components/SharePanel.tsx
+++ b/apps/web/src/components/SharePanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { createConfig, updateConfig } from '../lib/api'
 import { useAuth } from '../context/AuthContext'
 
@@ -116,6 +116,18 @@ export const SharePanel: React.FC<SharePanelProps> = ({
   const [justShared, setJustShared] = useState(false)
   const [shareResult, setShareResult] = useState<string | null>(null)
   const [shareError, setShareError] = useState<string | null>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onClick = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onClick)
+    return () => document.removeEventListener('mousedown', onClick)
+  }, [open])
 
   const publicUrl = editingSlug ? `${window.location.origin}/s/${editingSlug}` : shareResult
 
@@ -216,11 +228,10 @@ export const SharePanel: React.FC<SharePanelProps> = ({
 
   return (
     <div
+      ref={wrapperRef}
       style={{
-        position: 'absolute',
-        top: 52,
-        right: 16,
-        zIndex: 20,
+        position: 'relative',
+        display: 'inline-flex',
       }}
     >
       {/* Toggle button */}
@@ -264,6 +275,7 @@ export const SharePanel: React.FC<SharePanelProps> = ({
             position: 'absolute',
             top: 40,
             right: 0,
+            zIndex: 30,
             width: 320,
             padding: 8,
             background: colors.background,
diff --git a/apps/web/src/pages/EditorPage.tsx b/apps/web/src/pages/EditorPage.tsx
index 8b019ea..e06d7b9 100644
--- a/apps/web/src/pages/EditorPage.tsx
+++ b/apps/web/src/pages/EditorPage.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useMemo, useCallback } from 'react'
+import html2canvas from 'html2canvas'
+import React, { useState, useMemo, useCallback, useRef } from 'react'
 import { parse, layout } from '@homelab-stackdoc/core'
+import { AppNav } from '../components/AppNav'
 import { buildDeviceMap } from '../lib/device'
 import { PreviewPane } from '../components/PreviewPane'
 import SAMPLE_YAML from '../sample.yaml?raw'
-import { UserMenu } from '../components/UserMenu'
+import { SharePanel } from '../components/SharePanel'
 import { YamlEditor } from '../components/YamlEditor'
 
 interface EditorPageProps {
@@ -38,6 +40,9 @@ export const EditorPage: React.FC<EditorPageProps> = ({ initialYaml, editingSlug
   const [resizing, setResizing] = useState(false)
   const [editorVisible, setEditorVisible] = useState(true)
 
+  const captureRef = useRef<HTMLDivElement>(null)
+  const [isExporting, setIsExporting] = useState(false)
+
   const { graph, errors, deviceMap, connections, networkCount } = useMemo(() => {
     const result = parse(yaml)
     if (!result.ok) {
@@ -92,88 +97,114 @@ export const EditorPage: React.FC<EditorPageProps> = ({ initialYaml, editingSlug
     window.addEventListener('mouseup', onUp)
   }, [])
 
+  const handleExportPng = useCallback(async () => {
+    if (!captureRef.current || !graph) return
+    setIsExporting(true)
+    try {
+      const canvas = await html2canvas(captureRef.current, {
+        backgroundColor: '#080f1e',
+        scale: 2,
+        useCORS: true,
+        logging: false,
+        width: captureRef.current.offsetWidth,
+        height: captureRef.current.offsetHeight,
+      })
+      const link = document.createElement('a')
+      link.download = `homelab-topology-${Date.now()}.png`
+      link.href = canvas.toDataURL('image/png')
+      link.click()
+    } catch (err) {
+      console.error('PNG export failed:', err)
+    } finally {
+      setIsExporting(false)
+    }
+  }, [graph])
+
+  const title = editingSlug ? `EDITING: ${editingSlug}` : 'EDITOR'
+
   return (
     <div
       style={{
         display: 'flex',
+        flexDirection: 'column',
         height: '100vh',
         width: '100vw',
         overflow: 'hidden',
         background: '#080f1e',
       }}
     >
-      {/* Editor pane */}
-      {editorVisible && (
-        <>
-          <div style={{ width: `${splitRatio * 100}%`, height: '100%' }}>
-            <YamlEditor
-              value={yaml}
-              onChange={setYaml}
-              errors={errors}
-              networkCount={networkCount}
-              deviceCount={deviceMap.size}
-              connectionCount={connections.length}
-            />
-          </div>
-          <div
-            onMouseDown={onResizeStart}
-            style={{
-              width: 5,
-              cursor: 'col-resize',
-              flexShrink: 0,
-              background: resizing ? 'rgba(0,229,255,0.3)' : 'rgba(0,229,255,0.08)',
-              transition: 'background 0.15s',
-            }}
+      <AppNav
+        title={title}
+        primaryAction={
+          <SharePanel
+            yaml={yaml}
+            onExportPng={handleExportPng}
+            isExporting={isExporting}
+            editingSlug={editingSlug}
           />
-        </>
-      )}
+        }
+      />
 
-      {/* Canvas pane */}
-      <div style={{ flex: 1, height: '100%', position: 'relative' }}>
-        {/* Editor toggle button */}
-        <button
-          onClick={() => setEditorVisible((v) => !v)}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.35)'
-            e.currentTarget.style.color = '#00e5ff'
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.12)'
-            e.currentTarget.style.color = '#78909c'
-          }}
-          title={editorVisible ? 'Hide editor' : 'Show editor'}
-          style={toggleButtonStyle}
-        >
-          <svg width={16} height={16} viewBox="0 0 24 24" fill="currentColor">
-            {editorVisible ? (
-              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-            ) : (
-              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-            )}
-          </svg>
-        </button>
+      <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+        {/* Editor pane */}
+        {editorVisible && (
+          <>
+            <div style={{ width: `${splitRatio * 100}%`, height: '100%' }}>
+              <YamlEditor
+                value={yaml}
+                onChange={setYaml}
+                errors={errors}
+                networkCount={networkCount}
+                deviceCount={deviceMap.size}
+                connectionCount={connections.length}
+              />
+            </div>
+            <div
+              onMouseDown={onResizeStart}
+              style={{
+                width: 5,
+                cursor: 'col-resize',
+                flexShrink: 0,
+                background: resizing ? 'rgba(0,229,255,0.3)' : 'rgba(0,229,255,0.08)',
+                transition: 'background 0.15s',
+              }}
+            />
+          </>
+        )}
 
-        {/* User menu — sits below the canvas top header (which contains the
-            legend) and below the SharePanel button so neither overlaps. */}
-        <div
-          style={{
-            position: 'absolute',
-            top: 96,
-            right: 16,
-            zIndex: 25,
-          }}
-        >
-          <UserMenu />
-        </div>
+        {/* Canvas pane */}
+        <div style={{ flex: 1, height: '100%', position: 'relative' }}>
+          {/* Editor toggle button */}
+          <button
+            onClick={() => setEditorVisible((v) => !v)}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.35)'
+              e.currentTarget.style.color = '#00e5ff'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(0, 229, 255, 0.12)'
+              e.currentTarget.style.color = '#78909c'
+            }}
+            title={editorVisible ? 'Hide editor' : 'Show editor'}
+            style={toggleButtonStyle}
+          >
+            <svg width={16} height={16} viewBox="0 0 24 24" fill="currentColor">
+              {editorVisible ? (
+                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+              ) : (
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+              )}
+            </svg>
+          </button>
 
-        <PreviewPane
-          graph={graph}
-          errors={errors}
-          deviceMap={deviceMap}
-          connections={connections}
-          yaml={yaml}
-          editingSlug={editingSlug}
-        />
+          <PreviewPane
+            graph={graph}
+            errors={errors}
+            deviceMap={deviceMap}
+            connections={connections}
+            captureRef={captureRef}
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/apps/web/src/pages/GalleryPage.tsx b/apps/web/src/pages/GalleryPage.tsx
index 7fb1cc4..9d82cf9 100644
--- a/apps/web/src/pages/GalleryPage.tsx
+++ b/apps/web/src/pages/GalleryPage.tsx
@@ -1,14 +1,9 @@
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
+import { AppNav } from '../components/AppNav'
 import { Gallery } from '../components/Gallery'
-import { UserMenu } from '../components/UserMenu'
 
 const colors = {
   background: '#080f1e',
-  border: 'rgba(0, 229, 255, 0.12)',
-  textPrimary: '#e0f7fa',
-  textSecondary: '#78909c',
-  textMuted: '#455a64',
 }
 
 const fonts = {
@@ -16,8 +11,6 @@ const fonts = {
 }
 
 export const GalleryPage: React.FC = () => {
-  const navigate = useNavigate()
-
   return (
     <div
       style={{
@@ -26,62 +19,7 @@ export const GalleryPage: React.FC = () => {
         fontFamily: fonts.mono,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '14px 20px',
-          borderBottom: `1px solid ${colors.border}`,
-          background: 'rgba(8, 15, 30, 0.92)',
-          backdropFilter: 'blur(8px)',
-          position: 'sticky',
-          top: 0,
-          zIndex: 10,
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <button
-            onClick={() => navigate('/editor')}
-            style={{
-              padding: '6px 12px',
-              background: 'transparent',
-              border: `1px solid ${colors.border}`,
-              borderRadius: 6,
-              color: colors.textSecondary,
-              cursor: 'pointer',
-              fontFamily: fonts.mono,
-              fontSize: 11,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            ← EDITOR
-          </button>
-          <h1
-            style={{
-              margin: 0,
-              color: colors.textPrimary,
-              fontSize: 14,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            GALLERY
-          </h1>
-          <span
-            style={{
-              color: colors.textMuted,
-              fontSize: 11,
-              fontWeight: 400,
-              letterSpacing: 0,
-            }}
-          >
-            // what the community is running
-          </span>
-        </div>
-        <UserMenu />
-      </div>
+      <AppNav title="GALLERY" kicker="// what the community is running" />
 
       <div
         style={{
diff --git a/apps/web/src/pages/LandingPage.tsx b/apps/web/src/pages/LandingPage.tsx
index 301b24c..000627b 100644
--- a/apps/web/src/pages/LandingPage.tsx
+++ b/apps/web/src/pages/LandingPage.tsx
@@ -3,64 +3,10 @@ import { useNavigate } from 'react-router-dom'
 import { parse, layout } from '@homelab-stackdoc/core'
 import { TopologyCanvas, colors, fonts } from '@homelab-stackdoc/renderer'
 import type { PositionedGraph, Device, Connection } from '@homelab-stackdoc/core'
+import { AppNav } from '../components/AppNav'
 import { buildDeviceMap } from '../lib/device'
-import { UserMenu } from '../components/UserMenu'
 import SAMPLE_YAML from '../sample.yaml?raw'
 
-const NavLink: React.FC<{ to: string; children: React.ReactNode }> = ({ to, children }) => {
-  const navigate = useNavigate()
-  return (
-    <button
-      onClick={() => navigate(to)}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.color = colors.primary
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.color = colors.textSecondary
-      }}
-      style={{
-        background: 'transparent',
-        border: 'none',
-        color: colors.textSecondary,
-        fontFamily: fonts.mono,
-        fontSize: 11,
-        letterSpacing: '0.04em',
-        cursor: 'pointer',
-        padding: '4px 0',
-      }}
-    >
-      {children}
-    </button>
-  )
-}
-
-const ExternalNavLink: React.FC<{ href: string; children: React.ReactNode }> = ({
-  href,
-  children,
-}) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-    onMouseEnter={(e) => {
-      e.currentTarget.style.color = colors.primary
-    }}
-    onMouseLeave={(e) => {
-      e.currentTarget.style.color = colors.textSecondary
-    }}
-    style={{
-      color: colors.textSecondary,
-      fontFamily: fonts.mono,
-      fontSize: 11,
-      letterSpacing: '0.04em',
-      textDecoration: 'none',
-      padding: '4px 0',
-    }}
-  >
-    {children}
-  </a>
-)
-
 const Badge: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <span
     style={{
@@ -131,7 +77,6 @@ export const LandingPage: React.FC = () => {
   const navigate = useNavigate()
   const [primaryCtaHovered, setPrimaryCtaHovered] = useState(false)
   const [ghostCtaHovered, setGhostCtaHovered] = useState(false)
-  const [newDiagramHovered, setNewDiagramHovered] = useState(false)
 
   return (
     <div
@@ -142,88 +87,7 @@ export const LandingPage: React.FC = () => {
         fontFamily: fonts.mono,
       }}
     >
-      {/* Nav strip */}
-      <header
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 24,
-          padding: '14px 28px',
-          borderBottom: `1px solid ${colors.border}`,
-          background: 'rgba(8, 15, 30, 0.92)',
-          backdropFilter: 'blur(8px)',
-          position: 'sticky',
-          top: 0,
-          zIndex: 10,
-        }}
-      >
-        <a
-          href="/"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            textDecoration: 'none',
-            color: colors.textPrimary,
-            fontSize: 13,
-            fontWeight: 700,
-            letterSpacing: '0.04em',
-          }}
-        >
-          <span style={{ color: colors.primary }}>&gt;_</span>
-          stackdoc
-        </a>
-
-        <span
-          style={{
-            padding: '2px 6px',
-            border: `1px solid ${colors.green}40`,
-            borderRadius: 3,
-            color: colors.green,
-            fontSize: 8,
-            fontWeight: 700,
-            letterSpacing: '0.1em',
-          }}
-        >
-          LIVE
-        </span>
-
-        <div style={{ flex: 1 }} />
-
-        <nav style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
-          <NavLink to="/templates">templates</NavLink>
-          <NavLink to="/gallery">gallery</NavLink>
-          <ExternalNavLink href="https://github.com/meetKazuki/infra-stackdoc">
-            github
-          </ExternalNavLink>
-        </nav>
-
-        <button
-          onClick={() => navigate('/editor')}
-          onMouseEnter={() => setNewDiagramHovered(true)}
-          onMouseLeave={() => setNewDiagramHovered(false)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 5,
-            padding: '5px 12px',
-            background: newDiagramHovered ? 'rgba(0, 229, 255, 0.1)' : 'transparent',
-            border: `1px solid ${colors.primary}`,
-            borderRadius: 5,
-            color: colors.primary,
-            cursor: 'pointer',
-            fontFamily: fonts.mono,
-            fontSize: 10,
-            fontWeight: 700,
-            letterSpacing: '0.06em',
-            transition: 'background 0.15s',
-          }}
-        >
-          NEW DIAGRAM
-        </button>
-
-        <UserMenu />
-      </header>
+      <AppNav />
 
       {/* Hero */}
       <main
diff --git a/apps/web/src/pages/MyConfigsPage.tsx b/apps/web/src/pages/MyConfigsPage.tsx
index a5f431a..789db46 100644
--- a/apps/web/src/pages/MyConfigsPage.tsx
+++ b/apps/web/src/pages/MyConfigsPage.tsx
@@ -2,14 +2,10 @@ import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { MyConfigs } from '../components/MyConfigs'
 import { useAuth } from '../context/AuthContext'
-import { UserMenu } from '../components/UserMenu'
+import { AppNav } from '../components/AppNav'
 
 const colors = {
   background: '#080f1e',
-  border: 'rgba(0, 229, 255, 0.12)',
-  primary: '#00e5ff',
-  textPrimary: '#e0f7fa',
-  textSecondary: '#78909c',
   textMuted: '#455a64',
 }
 
@@ -54,55 +50,8 @@ export const MyConfigsPage: React.FC = () => {
         fontFamily: fonts.mono,
       }}
     >
-      {/* Header */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '14px 20px',
-          borderBottom: `1px solid ${colors.border}`,
-          background: 'rgba(8, 15, 30, 0.92)',
-          backdropFilter: 'blur(8px)',
-          position: 'sticky',
-          top: 0,
-          zIndex: 10,
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <button
-            onClick={() => navigate('/editor')}
-            style={{
-              padding: '6px 12px',
-              background: 'transparent',
-              border: `1px solid ${colors.border}`,
-              borderRadius: 6,
-              color: colors.textSecondary,
-              cursor: 'pointer',
-              fontFamily: fonts.mono,
-              fontSize: 11,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            ← EDITOR
-          </button>
-          <h1
-            style={{
-              margin: 0,
-              color: colors.textPrimary,
-              fontSize: 14,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            MY CONFIGS
-          </h1>
-        </div>
-        <UserMenu />
-      </div>
+      <AppNav title="MY CONFIGS" />
 
-      {/* Body */}
       <div
         style={{
           maxWidth: 800,
diff --git a/apps/web/src/pages/SharedViewPage.tsx b/apps/web/src/pages/SharedViewPage.tsx
index 1caf50d..3f115d7 100644
--- a/apps/web/src/pages/SharedViewPage.tsx
+++ b/apps/web/src/pages/SharedViewPage.tsx
@@ -2,10 +2,10 @@ import React, { useEffect, useState, useMemo, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { parse, layout } from '@homelab-stackdoc/core'
 import { TopologyCanvas } from '@homelab-stackdoc/renderer'
+import { AppNav } from '../components/AppNav'
 import { buildDeviceMap } from '../lib/device'
 import { fetchConfig, forkConfig, deleteConfig } from '../lib/api'
 import { useAuth } from '../context/AuthContext'
-import { UserMenu } from '../components/UserMenu'
 import type { SharedConfig } from '../lib/api.types'
 
 const colors = {
@@ -25,6 +25,35 @@ const fonts = {
   mono: "'JetBrains Mono', 'Fira Code', 'SF Mono', monospace",
 }
 
+const EditNavButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
+  const [hovered, setHovered] = useState(false)
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: '5px 12px',
+        background: hovered ? 'rgba(0, 229, 255, 0.1)' : 'transparent',
+        border: `1px solid ${colors.primary}`,
+        borderRadius: 5,
+        color: colors.primary,
+        cursor: 'pointer',
+        fontFamily: fonts.mono,
+        fontSize: 10,
+        fontWeight: 700,
+        letterSpacing: '0.06em',
+        transition: 'background 0.15s',
+      }}
+    >
+      EDIT
+    </button>
+  )
+}
+
 export const SharedView: React.FC = () => {
   const { slug } = useParams<{ slug: string }>()
   const navigate = useNavigate()
@@ -81,7 +110,7 @@ export const SharedView: React.FC = () => {
   }, [slug, navigate])
 
   const handleOpenInEditor = useCallback(() => {
-    navigate('/', { state: { yaml: config?.yaml } })
+    navigate('/editor', { state: { yaml: config?.yaml } })
   }, [config, navigate])
 
   const handleEditOwnConfig = useCallback(() => {
@@ -104,22 +133,35 @@ export const SharedView: React.FC = () => {
     }
   }, [slug, config, navigate])
 
+  // Nav primary action: owners see EDIT (jumps to /edit/<slug>); visitors get
+  // the AppNav's default NEW DIAGRAM button via the unset prop.
+  const navPrimaryAction = isOwner ? <EditNavButton onClick={handleEditOwnConfig} /> : undefined
+
   // Loading state
   if (loading) {
     return (
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
+          minHeight: '100vh',
           background: colors.background,
           fontFamily: fonts.mono,
-          color: colors.textMuted,
-          fontSize: 13,
+          display: 'flex',
+          flexDirection: 'column',
         }}
       >
-        Loading topology...
+        <AppNav />
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: colors.textMuted,
+            fontSize: 13,
+          }}
+        >
+          Loading topology...
+        </div>
       </div>
     )
   }
@@ -129,35 +171,29 @@ export const SharedView: React.FC = () => {
     return (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
+          minHeight: '100vh',
           background: colors.background,
           fontFamily: fonts.mono,
-          color: colors.textMuted,
-          fontSize: 13,
-          gap: 16,
+          display: 'flex',
+          flexDirection: 'column',
         }}
       >
-        <div style={{ fontSize: 32, opacity: 0.4 }}>404</div>
-        <div>{error || 'Config not found'}</div>
-        <button
-          onClick={() => navigate('/editor')}
+        <AppNav />
+        <div
           style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            border: `1px solid ${colors.border}`,
-            borderRadius: 6,
-            color: colors.primary,
-            cursor: 'pointer',
-            fontFamily: fonts.mono,
-            fontSize: 12,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: colors.textMuted,
+            fontSize: 13,
+            gap: 16,
           }}
         >
-          Go to Editor
-        </button>
+          <div style={{ fontSize: 32, opacity: 0.4 }}>404</div>
+          <div>{error || 'Config not found'}</div>
+        </div>
       </div>
     )
   }
@@ -167,35 +203,44 @@ export const SharedView: React.FC = () => {
     return (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
+          minHeight: '100vh',
           background: colors.background,
           fontFamily: fonts.mono,
-          color: colors.textMuted,
-          fontSize: 13,
-          gap: 16,
+          display: 'flex',
+          flexDirection: 'column',
         }}
       >
-        <div style={{ fontSize: 32, opacity: 0.4 }}>⚠</div>
-        <div>This config has invalid YAML</div>
-        <button
-          onClick={isOwner ? handleEditOwnConfig : handleOpenInEditor}
+        <AppNav primaryAction={navPrimaryAction} />
+        <div
           style={{
-            padding: '8px 16px',
-            background: 'transparent',
-            border: `1px solid ${colors.border}`,
-            borderRadius: 6,
-            color: colors.primary,
-            cursor: 'pointer',
-            fontFamily: fonts.mono,
-            fontSize: 12,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: colors.textMuted,
+            fontSize: 13,
+            gap: 16,
           }}
         >
-          {isOwner ? 'Edit to Fix' : 'Open in Editor to Fix'}
-        </button>
+          <div style={{ fontSize: 32, opacity: 0.4 }}>⚠</div>
+          <div>This config has invalid YAML</div>
+          <button
+            onClick={isOwner ? handleEditOwnConfig : handleOpenInEditor}
+            style={{
+              padding: '8px 16px',
+              background: 'transparent',
+              border: `1px solid ${colors.border}`,
+              borderRadius: 6,
+              color: colors.primary,
+              cursor: 'pointer',
+              fontFamily: fonts.mono,
+              fontSize: 12,
+            }}
+          >
+            {isOwner ? 'Edit to Fix' : 'Open in Editor to Fix'}
+          </button>
+        </div>
       </div>
     )
   }
@@ -211,6 +256,8 @@ export const SharedView: React.FC = () => {
         flexDirection: 'column',
       }}
     >
+      <AppNav primaryAction={navPrimaryAction} />
+
       {/* Topology canvas — takes remaining vertical space. The canvas's own
           bottom-anchored controls (zoom, fit, reset) now clear the shared
           bottom bar because they're positioned within this flex item, not
@@ -223,19 +270,6 @@ export const SharedView: React.FC = () => {
         }}
       >
         <TopologyCanvas graph={graph} deviceMap={deviceMap} connections={connections} />
-
-        {/* User menu — sits below the canvas top header so the legend keeps
-            its full width. */}
-        <div
-          style={{
-            position: 'absolute',
-            top: 56,
-            right: 16,
-            zIndex: 15,
-          }}
-        >
-          <UserMenu />
-        </div>
       </div>
 
       {/* Bottom bar — shared config info */}
diff --git a/apps/web/src/pages/TemplatesPage.tsx b/apps/web/src/pages/TemplatesPage.tsx
index a8ede7c..811fe78 100644
--- a/apps/web/src/pages/TemplatesPage.tsx
+++ b/apps/web/src/pages/TemplatesPage.tsx
@@ -1,13 +1,9 @@
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
+import { AppNav } from '../components/AppNav'
 import { Templates } from '../components/Templates'
-import { UserMenu } from '../components/UserMenu'
 
 const colors = {
   background: '#080f1e',
-  border: 'rgba(0, 229, 255, 0.12)',
-  textPrimary: '#e0f7fa',
-  textSecondary: '#78909c',
 }
 
 const fonts = {
@@ -15,8 +11,6 @@ const fonts = {
 }
 
 export const TemplatesPage: React.FC = () => {
-  const navigate = useNavigate()
-
   return (
     <div
       style={{
@@ -25,52 +19,7 @@ export const TemplatesPage: React.FC = () => {
         fontFamily: fonts.mono,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '14px 20px',
-          borderBottom: `1px solid ${colors.border}`,
-          background: 'rgba(8, 15, 30, 0.92)',
-          backdropFilter: 'blur(8px)',
-          position: 'sticky',
-          top: 0,
-          zIndex: 10,
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <button
-            onClick={() => navigate('/editor')}
-            style={{
-              padding: '6px 12px',
-              background: 'transparent',
-              border: `1px solid ${colors.border}`,
-              borderRadius: 6,
-              color: colors.textSecondary,
-              cursor: 'pointer',
-              fontFamily: fonts.mono,
-              fontSize: 11,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            ← EDITOR
-          </button>
-          <h1
-            style={{
-              margin: 0,
-              color: colors.textPrimary,
-              fontSize: 14,
-              fontWeight: 600,
-              letterSpacing: '0.04em',
-            }}
-          >
-            TEMPLATES
-          </h1>
-        </div>
-        <UserMenu />
-      </div>
+      <AppNav title="TEMPLATES" />
 
       <div
         style={{