diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 46c9742..e426abd 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,6 +1,5 @@
-/* Base styles and theme variables */
+/* Base styles - Navy theme */
 :root {
-  /* Navy theme (default) */
   --text: #c8d4e3;
   --text-h: #e8eef5;
   --text-muted: #8fa3bd;
@@ -25,48 +24,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Light theme */
-[data-theme="light"] {
-  --text: #333;
-  --text-h: #111;
-  --text-muted: #666;
-  --bg: #fafafa;
-  --bg-secondary: #fff;
-  --card-bg: #fff;
-  --border: #e5e5e5;
-  --accent: #4f46e5;
-  --accent-hover: #4338ca;
-  --accent-label: #dc2626;
-}
-
-/* Dark theme */
-[data-theme="dark"] {
-  --text: #e5e5e5;
-  --text-h: #ffffff;
-  --text-muted: #888;
-  --bg: #0a0a0a;
-  --bg-secondary: #1a1a1a;
-  --card-bg: #1a1a1a;
-  --border: #2a2a2a;
-  --accent: #646cff;
-  --accent-hover: #535bf2;
-  --accent-label: #e63946;
-}
-
-/* Navy-blue pastel theme */
-[data-theme="navy"] {
-  --text: #c8d4e3;
-  --text-h: #e8eef5;
-  --text-muted: #8fa3bd;
-  --bg: #1a2332;
-  --bg-secondary: #232f42;
-  --card-bg: #232f42;
-  --border: #2d3d54;
-  --accent: #6b8cce;
-  --accent-hover: #5a7bc4;
-  --accent-label: #f0a3a3;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -90,27 +47,3 @@ h3 {
 button {
   font-family: inherit;
 }
-
-/* Theme toggle button styles */
-.theme-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 0.8125rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.theme-toggle:hover {
-  border-color: var(--accent);
-}
-
-.theme-toggle svg {
-  width: 16px;
-  height: 16px;
-}
diff --git a/apps/web/src/lib/theme.ts b/apps/web/src/lib/theme.ts
deleted file mode 100644
index e4502b3..0000000
--- a/apps/web/src/lib/theme.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Theme management with localStorage persistence
- *
- * Themes: system (follows OS), light, dark, navy (navy-blue pastel)
- */
-
-export type Theme = 'system' | 'light' | 'dark' | 'navy'
-
-const STORAGE_KEY = 'streamhut-theme'
-
-export function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'navy'
-  const stored = localStorage.getItem(STORAGE_KEY)
-  if (stored === 'light' || stored === 'dark' || stored === 'navy' || stored === 'system') {
-    return stored
-  }
-  return 'navy'
-}
-
-export function setStoredTheme(theme: Theme): void {
-  localStorage.setItem(STORAGE_KEY, theme)
-}
-
-export function getEffectiveTheme(theme: Theme): 'light' | 'dark' | 'navy' {
-  if (theme === 'system') {
-    if (typeof window === 'undefined') return 'navy'
-    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
-  }
-  return theme
-}
-
-export function applyTheme(theme: Theme): void {
-  const effective = getEffectiveTheme(theme)
-  document.documentElement.setAttribute('data-theme', effective)
-}
-
-// Initialize theme on load (call this early to prevent flash)
-export function initTheme(): void {
-  const theme = getStoredTheme()
-  applyTheme(theme)
-
-  // Listen for system theme changes when in system mode
-  if (theme === 'system') {
-    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => {
-      if (getStoredTheme() === 'system') {
-        applyTheme('system')
-      }
-    })
-  }
-}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 4b5b2b1..32f1620 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,15 +1,11 @@
 import { StrictMode, useState, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import { initTheme } from './lib/theme.ts'
 import { UI4Editorial } from './ui/UI4Editorial.tsx'
 import { ProfilePage } from './ui/ProfilePage.tsx'
 import { DocsPage } from './ui/DocsPage.tsx'
 import { onRouteChange, matchPath } from './router.ts'
 
-// Initialize theme before render to prevent flash
-initTheme()
-
 function Router() {
   const [route, setRoute] = useState(window.location.pathname)
 
diff --git a/apps/web/src/ui/ProfilePage.tsx b/apps/web/src/ui/ProfilePage.tsx
index a563c6d..b872b7e 100644
--- a/apps/web/src/ui/ProfilePage.tsx
+++ b/apps/web/src/ui/ProfilePage.tsx
@@ -11,32 +11,21 @@ const styles = `
 
 .profile-page {
   min-height: 100vh;
-  background: #fff;
-  color: #111;
+  background: var(--bg);
+  color: var(--text);
   font-family: 'Inter', system-ui, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-page {
-    background: #0a0a0a;
-    color: #f5f5f5;
-  }
-}
-
 .profile-header {
   padding: 1.5rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border);
   max-width: 1600px;
   margin: 0 auto;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-header { border-color: #222; }
-}
-
 .profile-logo {
   font-family: 'Instrument Serif', Georgia, serif;
   font-size: 1.75rem;
@@ -91,14 +80,10 @@ const styles = `
   height: 180px;
   border-radius: 50%;
   object-fit: cover;
-  background: #e5e5e5;
+  background: var(--border);
   flex-shrink: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-avatar { background: #222; }
-}
-
 .profile-avatar-fallback {
   width: 180px;
   height: 180px;
@@ -133,25 +118,17 @@ const styles = `
 
 .profile-handle {
   font-size: 1.125rem;
-  color: #666;
+  color: var(--text-muted);
   margin-bottom: 1.5rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-handle { color: #999; }
-}
-
 .profile-description {
   font-size: 1rem;
   line-height: 1.6;
-  color: #444;
+  color: var(--text);
   max-width: 600px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-description { color: #bbb; }
-}
-
 .profile-stats {
   display: flex;
   gap: 2rem;
@@ -175,22 +152,14 @@ const styles = `
 
 .profile-stat-label {
   font-size: 0.875rem;
-  color: #666;
-}
-
-@media (prefers-color-scheme: dark) {
-  .profile-stat-label { color: #999; }
+  color: var(--text-muted);
 }
 
 .profile-section {
   max-width: 1600px;
   margin: 0 auto;
   padding: 3rem 2rem;
-  border-top: 1px solid #eee;
-}
-
-@media (prefers-color-scheme: dark) {
-  .profile-section { border-color: #222; }
+  border-top: 1px solid var(--border);
 }
 
 .profile-section-title {
@@ -223,14 +192,10 @@ const styles = `
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 1rem;
-  background: #f5f5f5;
+  background: var(--bg-secondary);
   position: relative;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-card-media { background: #1a1a1a; }
-}
-
 .profile-card-img {
   width: 100%;
   height: 100%;
@@ -249,18 +214,11 @@ const styles = `
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  color: #fff;
+  background: var(--card-bg);
+  color: var(--text);
   gap: 0.75rem;
 }
 
-@media (prefers-color-scheme: light) {
-  .profile-card-fallback {
-    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
-    color: #333;
-  }
-}
-
 .profile-card-fallback-icon {
   font-size: 2rem;
   opacity: 0.5;
@@ -301,17 +259,13 @@ const styles = `
 
 .profile-card-meta {
   font-size: 0.8125rem;
-  color: #777;
+  color: var(--text-muted);
 }
 
 .profile-empty {
   text-align: center;
   padding: 4rem 2rem;
-  color: #666;
-}
-
-@media (prefers-color-scheme: dark) {
-  .profile-empty { color: #999; }
+  color: var(--text-muted);
 }
 
 .profile-empty-icon {
@@ -327,19 +281,12 @@ const styles = `
 }
 
 .profile-skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
   border-radius: 8px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .profile-skeleton {
-    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
-    background-size: 200% 100%;
-  }
-}
-
 .profile-skeleton-avatar {
   width: 180px;
   height: 180px;
diff --git a/apps/web/src/ui/UI4Editorial.tsx b/apps/web/src/ui/UI4Editorial.tsx
index 290816b..399704f 100644
--- a/apps/web/src/ui/UI4Editorial.tsx
+++ b/apps/web/src/ui/UI4Editorial.tsx
@@ -12,7 +12,6 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react"
 import { listVideos, batchCheckMetadata, batchGetProfiles, formatDuration, getPlaylistUrl, type Video, type VideoMetadata, type Profile } from "../api"
 import { sortByRecommendation, recordWatch, getContinueWatching } from "../lib/watchHistory"
-import { getStoredTheme, setStoredTheme, applyTheme, type Theme } from "../lib/theme"
 import { navigate } from "../router"
 import Hls from "hls.js"
 
@@ -856,6 +855,98 @@ const styles = `
   aspect-ratio: 4 / 3;
   border-radius: 8px;
 }
+
+/* Creators section */
+.editorial-creators-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+}
+
+@media (max-width: 1200px) {
+  .editorial-creators-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 800px) {
+  .editorial-creators-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 500px) {
+  .editorial-creators-grid { grid-template-columns: 1fr; }
+}
+
+.editorial-creator-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.editorial-creator-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+}
+
+.editorial-creator-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.editorial-creator-avatar-fallback {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Instrument Serif', Georgia, serif;
+  font-size: 1.5rem;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.editorial-creator-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.editorial-creator-name {
+  font-family: 'Instrument Serif', Georgia, serif;
+  font-size: 1.125rem;
+  font-weight: 400;
+  margin: 0 0 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editorial-creator-handle {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editorial-creator-stats {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.editorial-creator-stats strong {
+  color: var(--text);
+  font-weight: 600;
+}
 `
 
 interface CardProps {
@@ -1140,29 +1231,6 @@ function Player({ video, profile, relatedVideos, metadataMap, profileMap, onClos
   )
 }
 
-// Theme toggle component
-function ThemeToggle({ theme, onChange }: { theme: Theme; onChange: (t: Theme) => void }) {
-  const themes: { value: Theme; label: string; icon: string }[] = [
-    { value: 'system', label: 'System', icon: '💻' },
-    { value: 'light', label: 'Light', icon: '☀️' },
-    { value: 'dark', label: 'Dark', icon: '🌙' },
-    { value: 'navy', label: 'Navy', icon: '🌊' },
-  ]
-  const current = themes.find(t => t.value === theme) || themes[0]
-  const nextIndex = (themes.findIndex(t => t.value === theme) + 1) % themes.length
-
-  return (
-    <button
-      className="theme-toggle"
-      onClick={() => onChange(themes[nextIndex].value)}
-      title={`Theme: ${current.label}. Click to switch.`}
-    >
-      <span>{current.icon}</span>
-      <span>{current.label}</span>
-    </button>
-  )
-}
-
 export function UI4Editorial() {
   const [videos, setVideos] = useState<Video[]>([])
   const [metadataMap, setMetadataMap] = useState<Map<string, VideoMetadata>>(new Map())
@@ -1170,13 +1238,7 @@ export function UI4Editorial() {
   const [playing, setPlaying] = useState<Video | null>(null)
   const [continueWatching, setContinueWatching] = useState<Array<{ uri: string; progress: number }>>([])
   const [isLoading, setIsLoading] = useState(true)
-  const [theme, setThemeState] = useState<Theme>(getStoredTheme)
-
-  const handleThemeChange = useCallback((newTheme: Theme) => {
-    setThemeState(newTheme)
-    setStoredTheme(newTheme)
-    applyTheme(newTheme)
-  }, [])
+  const [activeTab, setActiveTab] = useState<'videos' | 'creators'>('videos')
 
   useEffect(() => {
     listVideos(50).then(async (r) => {
@@ -1219,6 +1281,22 @@ export function UI4Editorial() {
     [otherVideos]
   )
 
+  // Compute creators with video counts
+  const creators = useMemo(() => {
+    const creatorStats = new Map<string, { count: number; totalDuration: number }>()
+    for (const video of videos) {
+      if (!video.creator) continue
+      const existing = creatorStats.get(video.creator) || { count: 0, totalDuration: 0 }
+      creatorStats.set(video.creator, {
+        count: existing.count + 1,
+        totalDuration: existing.totalDuration + video.duration,
+      })
+    }
+    return [...creatorStats.entries()]
+      .map(([did, stats]) => ({ did, ...stats, profile: profileMap.get(did) }))
+      .sort((a, b) => b.count - a.count)
+  }, [videos, profileMap])
+
   const continueVideos = continueWatching
     .map(({ uri, progress }) => ({ video: videos.find((v) => v.uri === uri), progress }))
     .filter((x) => x.video) as Array<{ video: Video; progress: number }>
@@ -1229,155 +1307,225 @@ export function UI4Editorial() {
       <div className="editorial">
         <header className="editorial-header">
           <h1 className="editorial-logo">Streamhut</h1>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
-            <nav className="editorial-nav">
-              <a href="#" className="active">Videos</a>
-              <a href="#">Creators</a>
-            </nav>
-            <ThemeToggle theme={theme} onChange={handleThemeChange} />
-          </div>
+          <nav className="editorial-nav">
+            <a
+              href="#"
+              className={activeTab === 'videos' ? 'active' : ''}
+              onClick={(e) => { e.preventDefault(); setActiveTab('videos') }}
+            >
+              Videos
+            </a>
+            <a
+              href="#"
+              className={activeTab === 'creators' ? 'active' : ''}
+              onClick={(e) => { e.preventDefault(); setActiveTab('creators') }}
+            >
+              Creators
+            </a>
+            <a href="/docs" onClick={(e) => { e.preventDefault(); navigate('/docs') }}>
+              Docs
+            </a>
+          </nav>
         </header>
 
-        {continueVideos.length > 0 && (
-          <div className="editorial-continue">
-            <div className="editorial-continue-inner">
-              <span className="editorial-continue-label">Continue Watching</span>
-              <div className="editorial-continue-items">
-                {continueVideos.map(({ video, progress }) => {
-                  const meta = metadataMap.get(video.uri)
-                  const thumb = meta?.thumbnailUrl || null
-                  return (
+        {activeTab === 'videos' && (
+          <>
+            {continueVideos.length > 0 && (
+              <div className="editorial-continue">
+                <div className="editorial-continue-inner">
+                  <span className="editorial-continue-label">Continue Watching</span>
+                  <div className="editorial-continue-items">
+                    {continueVideos.map(({ video, progress }) => {
+                      const meta = metadataMap.get(video.uri)
+                      const thumb = meta?.thumbnailUrl || null
+                      return (
+                        <div
+                          key={video.uri}
+                          className="editorial-continue-item"
+                          onClick={() => setPlaying(video)}
+                        >
+                          {thumb ? (
+                            <img className="editorial-continue-thumb" src={thumb} alt="" />
+                          ) : (
+                            <div className="editorial-continue-thumb" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', opacity: 0.4 }}>▶</div>
+                          )}
+                          <div className="editorial-continue-info">
+                            <div className="editorial-continue-title">{video.title}</div>
+                            <div className="editorial-continue-progress">
+                              <div
+                                className="editorial-continue-progress-bar"
+                                style={{ width: `${progress * 100}%` }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {isLoading ? (
+              <div className="editorial-skeleton-hero">
+                <div className="editorial-skeleton-hero-content">
+                  <div className="editorial-skeleton editorial-skeleton-hero-label" />
+                  <div className="editorial-skeleton editorial-skeleton-hero-title" />
+                  <div className="editorial-skeleton editorial-skeleton-hero-excerpt" />
+                </div>
+                <div className="editorial-skeleton editorial-skeleton-hero-media" />
+              </div>
+            ) : featured && (
+              <section className="editorial-hero">
+                <div className="editorial-hero-content">
+                  <div className="editorial-hero-label">Featured</div>
+                  <h2 className="editorial-hero-title">{featured.title}</h2>
+                  <div className="editorial-hero-meta">
                     <div
-                      key={video.uri}
-                      className="editorial-continue-item"
-                      onClick={() => setPlaying(video)}
+                      className="editorial-hero-meta-link"
+                      onClick={() => featured.creator && navigate(`/profile/${featured.creator}`)}
                     >
-                      {thumb ? (
-                        <img className="editorial-continue-thumb" src={thumb} alt="" />
-                      ) : (
-                        <div className="editorial-continue-thumb" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', opacity: 0.4 }}>▶</div>
+                      {featuredProfile?.avatar && (
+                        <img className="editorial-hero-avatar" src={featuredProfile.avatar} alt="" />
                       )}
-                      <div className="editorial-continue-info">
-                        <div className="editorial-continue-title">{video.title}</div>
-                        <div className="editorial-continue-progress">
-                          <div
-                            className="editorial-continue-progress-bar"
-                            style={{ width: `${progress * 100}%` }}
-                          />
+                      <div>
+                        <div className="editorial-hero-author">
+                          {featuredProfile?.displayName || featuredProfile?.handle || "Creator"}
                         </div>
+                        <div>{formatDuration(featured.duration)}</div>
                       </div>
                     </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {isLoading ? (
-          <div className="editorial-skeleton-hero">
-            <div className="editorial-skeleton-hero-content">
-              <div className="editorial-skeleton editorial-skeleton-hero-label" />
-              <div className="editorial-skeleton editorial-skeleton-hero-title" />
-              <div className="editorial-skeleton editorial-skeleton-hero-excerpt" />
-            </div>
-            <div className="editorial-skeleton editorial-skeleton-hero-media" />
-          </div>
-        ) : featured && (
-          <section className="editorial-hero">
-            <div className="editorial-hero-content">
-              <div className="editorial-hero-label">Featured</div>
-              <h2 className="editorial-hero-title">{featured.title}</h2>
-              <div className="editorial-hero-meta">
-                <div
-                  className="editorial-hero-meta-link"
-                  onClick={() => featured.creator && navigate(`/profile/${featured.creator}`)}
-                >
-                  {featuredProfile?.avatar && (
-                    <img className="editorial-hero-avatar" src={featuredProfile.avatar} alt="" />
+                  </div>
+                </div>
+                <div className="editorial-hero-media" onClick={() => setPlaying(featured)}>
+                  {featuredMeta?.thumbnailUrl ? (
+                    <img
+                      className="editorial-hero-img"
+                      src={featuredMeta.thumbnailUrl}
+                      alt=""
+                    />
+                  ) : (
+                    <ThumbnailFallback title={featured.title} />
                   )}
-                  <div>
-                    <div className="editorial-hero-author">
-                      {featuredProfile?.displayName || featuredProfile?.handle || "Creator"}
-                    </div>
-                    <div>{formatDuration(featured.duration)}</div>
+                  <div className="editorial-hero-play">
+                    <div className="editorial-hero-play-btn">▶</div>
                   </div>
                 </div>
+              </section>
+            )}
+
+            <section className="editorial-section">
+              <div className="editorial-section-header">
+                <h2 className="editorial-section-title">Latest</h2>
               </div>
-            </div>
-            <div className="editorial-hero-media" onClick={() => setPlaying(featured)}>
-              {featuredMeta?.thumbnailUrl ? (
-                <img
-                  className="editorial-hero-img"
-                  src={featuredMeta.thumbnailUrl}
-                  alt=""
-                />
-              ) : (
-                <ThumbnailFallback title={featured.title} />
-              )}
-              <div className="editorial-hero-play">
-                <div className="editorial-hero-play-btn">▶</div>
+              <div className="editorial-grid">
+                {isLoading ? (
+                  <>
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                  </>
+                ) : (
+                  recent.map((video) => (
+                    <Card
+                      key={video.uri}
+                      video={video}
+                      metadata={metadataMap.get(video.uri)}
+                      profile={video.creator ? profileMap.get(video.creator) : undefined}
+                      onClick={() => setPlaying(video)}
+                    />
+                  ))
+                )}
               </div>
-            </div>
-          </section>
-        )}
+            </section>
 
-        <section className="editorial-section">
-          <div className="editorial-section-header">
-            <h2 className="editorial-section-title">Latest</h2>
-            <a href="#" className="editorial-section-link">View all →</a>
-          </div>
-          <div className="editorial-grid">
-            {isLoading ? (
-              <>
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-              </>
-            ) : (
-              recent.map((video) => (
-                <Card
-                  key={video.uri}
-                  video={video}
-                  metadata={metadataMap.get(video.uri)}
-                  profile={video.creator ? profileMap.get(video.creator) : undefined}
-                  onClick={() => setPlaying(video)}
-                />
-              ))
-            )}
-          </div>
-        </section>
+            <section className="editorial-section">
+              <div className="editorial-section-header">
+                <h2 className="editorial-section-title">Recommended For You</h2>
+              </div>
+              <div className="editorial-grid">
+                {isLoading ? (
+                  <>
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                    <SkeletonCard />
+                  </>
+                ) : (
+                  recommended.slice(0, 6).map((video) => (
+                    <Card
+                      key={video.uri}
+                      video={video}
+                      metadata={metadataMap.get(video.uri)}
+                      profile={video.creator ? profileMap.get(video.creator) : undefined}
+                      onClick={() => setPlaying(video)}
+                    />
+                  ))
+                )}
+              </div>
+            </section>
+          </>
+        )}
 
-        <section className="editorial-section">
-          <div className="editorial-section-header">
-            <h2 className="editorial-section-title">Recommended For You</h2>
-          </div>
-          <div className="editorial-grid">
+        {activeTab === 'creators' && (
+          <section className="editorial-section">
+            <div className="editorial-section-header">
+              <h2 className="editorial-section-title">Creators</h2>
+            </div>
             {isLoading ? (
-              <>
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-                <SkeletonCard />
-              </>
+              <div className="editorial-creators-grid">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="editorial-creator-card" style={{ opacity: 0.5 }}>
+                    <div className="editorial-skeleton" style={{ width: 64, height: 64, borderRadius: '50%' }} />
+                    <div className="editorial-creator-info">
+                      <div className="editorial-skeleton" style={{ height: '1.125rem', width: '70%', marginBottom: '0.5rem' }} />
+                      <div className="editorial-skeleton" style={{ height: '0.75rem', width: '50%' }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : creators.length > 0 ? (
+              <div className="editorial-creators-grid">
+                {creators.map(({ did, count, totalDuration, profile }) => {
+                  const displayName = profile?.displayName || profile?.handle || did.slice(0, 20) + '...'
+                  return (
+                    <div
+                      key={did}
+                      className="editorial-creator-card"
+                      onClick={() => navigate(`/profile/${did}`)}
+                    >
+                      {profile?.avatar ? (
+                        <img className="editorial-creator-avatar" src={profile.avatar} alt="" />
+                      ) : (
+                        <div className="editorial-creator-avatar-fallback">
+                          {displayName[0]?.toUpperCase()}
+                        </div>
+                      )}
+                      <div className="editorial-creator-info">
+                        <h3 className="editorial-creator-name">{displayName}</h3>
+                        {profile?.handle && (
+                          <div className="editorial-creator-handle">@{profile.handle}</div>
+                        )}
+                        <div className="editorial-creator-stats">
+                          <strong>{count}</strong> {count === 1 ? 'video' : 'videos'} · {formatDuration(totalDuration)}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
             ) : (
-              recommended.slice(0, 6).map((video) => (
-                <Card
-                  key={video.uri}
-                  video={video}
-                  metadata={metadataMap.get(video.uri)}
-                  profile={video.creator ? profileMap.get(video.creator) : undefined}
-                  onClick={() => setPlaying(video)}
-                />
-              ))
+              <p style={{ color: 'var(--text-muted)', textAlign: 'center', padding: '3rem' }}>
+                No creators found.
+              </p>
             )}
-          </div>
-        </section>
+          </section>
+        )}
 
         {playing && (
           <Player