diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index bedcb8f..686dec1 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -7,7 +7,7 @@ import { Icon, type IconName } from './Icon'
 interface NavItem {
     name: string
     icon: IconName
-    path?: string
+    path: string
 }
 
 const NAV: NavItem[] = [
@@ -17,7 +17,6 @@ const NAV: NavItem[] = [
     { name: 'Payments', icon: 'send', path: '/payments' },
     { name: 'Decisions', icon: 'scale', path: '/decisions' },
     { name: 'Compliance', icon: 'shield', path: '/compliance/cases' },
-    { name: 'Audit', icon: 'book' },
 ]
 
 const SERVICES = ['postgres', 'redpanda', 'keycloak', 'redis']
@@ -69,30 +68,9 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
                 </div>
             </div>
 
-            <div style={{ padding: '12px 12px 8px' }}>
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 8,
-                        height: 28,
-                        padding: '0 10px',
-                        background: 'var(--bg)',
-                        border: '1px solid var(--border)',
-                        borderRadius: 4,
-                        color: 'var(--text-3)',
-                        fontSize: 12,
-                    }}
-                >
-                    <Icon name="search" size={13} />
-                    <span style={{ flex: 1 }}>Jump to...</span>
-                    <span className="kbd">Cmd K</span>
-                </div>
-            </div>
-
             <nav
                 style={{
-                    padding: '4px 8px',
+                    padding: '12px 8px 4px',
                     flex: 1,
                     display: 'flex',
                     flexDirection: 'column',
@@ -116,29 +94,16 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
                         paddingLeft: 8,
                         textDecoration: 'none',
                     }
-                    const content = (
-                        <>
-                            <Icon name={item.icon} size={14} />
-                            <span>{item.name}</span>
-                        </>
-                    )
-                    return item.path ? (
+                    return (
                         <Link
                             key={item.name}
                             to={item.path}
                             aria-current={isActive ? 'page' : undefined}
                             style={style}
                         >
-                            {content}
+                            <Icon name={item.icon} size={14} />
+                            <span>{item.name}</span>
                         </Link>
-                    ) : (
-                        <div
-                            key={item.name}
-                            aria-current={isActive ? 'page' : undefined}
-                            style={style}
-                        >
-                            {content}
-                        </div>
                     )
                 })}
             </nav>
@@ -226,7 +191,6 @@ export function Sidebar({ active = 'Overview' }: { active?: string }) {
                         acme-eu-prod
                     </div>
                 </div>
-                <Icon name="chevDown" size={12} />
             </div>
         </div>
     )
diff --git a/web/src/features/overview/ActivityFeed.tsx b/web/src/features/overview/ActivityFeed.tsx
index caacb9d..583f4cb 100644
--- a/web/src/features/overview/ActivityFeed.tsx
+++ b/web/src/features/overview/ActivityFeed.tsx
@@ -6,45 +6,78 @@ import { toneColor } from '@/lib/tone'
 import type { ActivityEvent } from '@/mock/types'
 
 export function ActivityFeed({ activity }: { activity: ActivityEvent[] }) {
-  return (
-    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontSize: 13, fontWeight: 500 }}>Recent activity</span>
-        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 0 4px rgba(20,184,166,0.15)' }} />
-        <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>live · last 12m</span>
-        <div style={{ flex: 1 }} />
-        <span style={{ fontSize: 11, color: 'var(--text-2)' }}>View all</span>
-      </div>
-      <div style={{ padding: '6px 18px 14px' }}>
-        {activity.map((event, i) => (
-          <div
-            key={`${event.type}-${i}`}
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '22px 1fr 80px 14px',
-              alignItems: 'center',
-              gap: 12,
-              padding: '10px 0',
-              borderBottom: i < activity.length - 1 ? '1px solid var(--border)' : 'none',
-            }}
-          >
-            <span style={{ color: toneColor(event.tone), display: 'inline-flex' }}>
-              <Icon name={event.icon} size={14} />
-            </span>
-            <div style={{ minWidth: 0 }}>
-              <div className="mono" style={{ fontSize: 11.5, color: toneColor(event.tone) }}>{event.type}</div>
-              <div
-                className="mono"
-                style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-              >
-                {event.detail}
-              </div>
+    return (
+        <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
+                style={{
+                    padding: '14px 18px',
+                    borderBottom: '1px solid var(--border)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                }}
+            >
+                <span style={{ fontSize: 13, fontWeight: 500 }}>Recent activity</span>
+                <span
+                    style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: '50%',
+                        background: 'var(--accent)',
+                        boxShadow: '0 0 0 4px rgba(20,184,166,0.15)',
+                    }}
+                />
+                <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>
+                    live · last 12m
+                </span>
             </div>
-            <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'right' }}>{event.ts}</span>
-            <Icon name="chevRight" size={12} />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+            <div style={{ padding: '6px 18px 14px' }}>
+                {activity.map((event, i) => (
+                    <div
+                        key={`${event.type}-${i}`}
+                        style={{
+                            display: 'grid',
+                            gridTemplateColumns: '22px 1fr 80px',
+                            alignItems: 'center',
+                            gap: 12,
+                            padding: '10px 0',
+                            borderBottom:
+                                i < activity.length - 1 ? '1px solid var(--border)' : 'none',
+                        }}
+                    >
+                        <span style={{ color: toneColor(event.tone), display: 'inline-flex' }}>
+                            <Icon name={event.icon} size={14} />
+                        </span>
+                        <div style={{ minWidth: 0 }}>
+                            <div
+                                className="mono"
+                                style={{ fontSize: 11.5, color: toneColor(event.tone) }}
+                            >
+                                {event.type}
+                            </div>
+                            <div
+                                className="mono"
+                                style={{
+                                    fontSize: 11,
+                                    color: 'var(--text-2)',
+                                    marginTop: 2,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }}
+                            >
+                                {event.detail}
+                            </div>
+                        </div>
+                        <span
+                            className="mono"
+                            style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'right' }}
+                        >
+                            {event.ts}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
 }
diff --git a/web/src/features/overview/SystemLinks.tsx b/web/src/features/overview/SystemLinks.tsx
index 5fda2bf..ad3e20d 100644
--- a/web/src/features/overview/SystemLinks.tsx
+++ b/web/src/features/overview/SystemLinks.tsx
@@ -5,33 +5,54 @@ import { Icon } from '@/components/Icon'
 import type { SystemLink } from '@/mock/types'
 
 export function SystemLinks({ links }: { links: SystemLink[] }) {
-  return (
-    <div className="grid grid-cols-1 gap-[18px] md:grid-cols-3">
-      {links.map((link) => (
-        <div key={link.title} className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
-          <span
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: 8,
-              background: 'var(--bg-2)',
-              border: '1px solid var(--border)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              color: 'var(--accent)',
-            }}
-          >
-            <Icon name={link.icon} size={16} />
-          </span>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 13, fontWeight: 500 }}>{link.title}</div>
-            <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>{link.url}</div>
-            <div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 4 }}>{link.sub}</div>
-          </div>
-          <Icon name="chevRight" size={14} />
+    return (
+        <div className="grid grid-cols-1 gap-[18px] md:grid-cols-3">
+            {links.map((link) => (
+                <a
+                    key={link.title}
+                    href={link.url.startsWith('http') ? link.url : `http://${link.url}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="card"
+                    style={{
+                        padding: 16,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 14,
+                        textDecoration: 'none',
+                        color: 'inherit',
+                    }}
+                >
+                    <span
+                        style={{
+                            width: 36,
+                            height: 36,
+                            borderRadius: 8,
+                            background: 'var(--bg-2)',
+                            border: '1px solid var(--border)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: 'var(--accent)',
+                        }}
+                    >
+                        <Icon name={link.icon} size={16} />
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 13, fontWeight: 500 }}>{link.title}</div>
+                        <div
+                            className="mono"
+                            style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}
+                        >
+                            {link.url}
+                        </div>
+                        <div style={{ fontSize: 11, color: 'var(--text-2)', marginTop: 4 }}>
+                            {link.sub}
+                        </div>
+                    </div>
+                    <Icon name="chevRight" size={14} />
+                </a>
+            ))}
         </div>
-      ))}
-    </div>
-  )
+    )
 }
diff --git a/web/src/features/overview/TryTheApi.tsx b/web/src/features/overview/TryTheApi.tsx
index ed052c5..9168156 100644
--- a/web/src/features/overview/TryTheApi.tsx
+++ b/web/src/features/overview/TryTheApi.tsx
@@ -5,68 +5,83 @@ import { Icon } from '@/components/Icon'
 import type { ApiExample } from '@/mock/types'
 
 export function TryTheApi({ examples }: { examples: ApiExample[] }) {
-  return (
-    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontSize: 13, fontWeight: 500 }}>Try the API</span>
-        <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>· in-page playground</span>
-        <div style={{ flex: 1 }} />
-        <span style={{ fontSize: 11, color: 'var(--text-2)' }}>Swagger</span>
-      </div>
-      <div className="grid grid-cols-1 gap-3 p-[18px] sm:grid-cols-2" style={{ flex: 1 }}>
-        {examples.map((example) => (
-          <div
-            key={example.title}
-            style={{
-              padding: 14,
-              border: '1px solid var(--border)',
-              borderRadius: 6,
-              background: 'var(--bg-2)',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 10,
-            }}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <span
+    return (
+        <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
                 style={{
-                  width: 28,
-                  height: 28,
-                  borderRadius: 6,
-                  background: 'var(--surface)',
-                  border: '1px solid var(--border)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  color: 'var(--accent)',
+                    padding: '14px 18px',
+                    borderBottom: '1px solid var(--border)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
                 }}
-              >
-                <Icon name={example.icon} size={14} />
-              </span>
-              <div style={{ flex: 1 }}>
-                <div style={{ fontSize: 12.5, fontWeight: 500 }}>{example.title}</div>
-                <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>{example.endpoint}</div>
-              </div>
-            </div>
-            <pre
-              className="mono"
-              style={{
-                margin: 0,
-                padding: 10,
-                background: 'var(--bg)',
-                border: '1px solid var(--border)',
-                borderRadius: 4,
-                fontSize: 10.5,
-                color: 'var(--text-2)',
-                lineHeight: 1.5,
-                whiteSpace: 'pre-wrap',
-              }}
             >
-              {example.curl}
-            </pre>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+                <span style={{ fontSize: 13, fontWeight: 500 }}>Try the API</span>
+                <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>
+                    · in-page playground
+                </span>
+            </div>
+            <div className="grid grid-cols-1 gap-3 p-[18px] sm:grid-cols-2" style={{ flex: 1 }}>
+                {examples.map((example) => (
+                    <div
+                        key={example.title}
+                        style={{
+                            padding: 14,
+                            border: '1px solid var(--border)',
+                            borderRadius: 6,
+                            background: 'var(--bg-2)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 10,
+                        }}
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                            <span
+                                style={{
+                                    width: 28,
+                                    height: 28,
+                                    borderRadius: 6,
+                                    background: 'var(--surface)',
+                                    border: '1px solid var(--border)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: 'var(--accent)',
+                                }}
+                            >
+                                <Icon name={example.icon} size={14} />
+                            </span>
+                            <div style={{ flex: 1 }}>
+                                <div style={{ fontSize: 12.5, fontWeight: 500 }}>
+                                    {example.title}
+                                </div>
+                                <div
+                                    className="mono"
+                                    style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}
+                                >
+                                    {example.endpoint}
+                                </div>
+                            </div>
+                        </div>
+                        <pre
+                            className="mono"
+                            style={{
+                                margin: 0,
+                                padding: 10,
+                                background: 'var(--bg)',
+                                border: '1px solid var(--border)',
+                                borderRadius: 4,
+                                fontSize: 10.5,
+                                color: 'var(--text-2)',
+                                lineHeight: 1.5,
+                                whiteSpace: 'pre-wrap',
+                            }}
+                        >
+                            {example.curl}
+                        </pre>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
 }