diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 8f4ed9d..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "next/typescript"],
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module"
-  },
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true,
-    "jest": true
-  },
-  "rules": {},
-  "ignorePatterns": [
-    "node_modules/",
-    ".next/",
-    "out/",
-    "build/",
-    "dist/",
-    "coverage/",
-    "*.config.js",
-    "*.config.mjs"
-  ]
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..a7bffc9
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,57 @@
+import js from '@eslint/js';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: {
+      '@typescript-eslint': typescriptPlugin,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        React: 'readonly',
+        JSX: 'readonly',
+        NodeJS: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        exports: 'readonly',
+        document: 'readonly',
+        window: 'readonly',
+        navigator: 'readonly',
+        fetch: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      'no-undef': 'off', // TypeScript handles this
+    },
+  },
+  {
+    ignores: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'dist/**',
+      'coverage/**',
+      '*.config.js',
+      '*.config.mjs',
+      'jest.config.js',
+    ],
+  },
+];
diff --git a/package-lock.json b/package-lock.json
index 806eb61..9e5e910 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,8 @@
         "shiki": "^3.20.0"
       },
       "devDependencies": {
+        "@eslint/eslintrc": "^3.3.3",
+        "@eslint/js": "^9.39.2",
         "@tailwindcss/postcss": "^4.1.18",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^14.3.1",
@@ -29,6 +31,8 @@
         "@types/node": "^20.19.27",
         "@types/react": "^18.3.27",
         "@types/react-dom": "^18.3.7",
+        "@typescript-eslint/eslint-plugin": "^8.50.1",
+        "@typescript-eslint/parser": "^8.50.1",
         "autoprefixer": "^10.4.23",
         "eslint": "^9.15.0",
         "eslint-config-next": "^16.1.1",
diff --git a/package.json b/package.json
index 7c245d9..308617e 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "next build",
     "build:search": "tsx scripts/build-search-index.ts",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,json,css}\"",
     "typecheck": "tsc --noEmit",
     "test": "jest --passWithNoTests",
@@ -28,6 +28,8 @@
     "shiki": "^3.20.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
     "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.3.1",
@@ -37,6 +39,8 @@
     "@types/node": "^20.19.27",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
     "autoprefixer": "^10.4.23",
     "eslint": "^9.15.0",
     "eslint-config-next": "^16.1.1",
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
index 1b35537..d6125dd 100644
--- a/src/app/docs/[...slug]/page.tsx
+++ b/src/app/docs/[...slug]/page.tsx
@@ -115,7 +115,7 @@ export default async function DocPage({ params }: PageProps) {
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
-                  code({ node, inline, className, children, ...props }: any) {
+                  code({ inline, className, children, ...props }: any) {
                     const match = /language-(\w+)/.exec(className || '');
                     const language = match ? match[1] : 'text';
 
@@ -136,16 +136,16 @@ export default async function DocPage({ params }: PageProps) {
                   },
                   // Skip markdown h1 to avoid duplicate with page title
                   h1: () => null,
-                  h2: ({ node, ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h3: ({ node, ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h4: ({ node, ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h5: ({ node, ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h6: ({ node, ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  p: ({ node, ...props }: any) => <p {...props} />,
-                  ul: ({ node, ...props }: any) => <ul {...props} />,
-                  ol: ({ node, ...props }: any) => <ol {...props} />,
-                  li: ({ node, ...props }: any) => <li {...props} />,
-              a: ({ node, ...props }: any) => <a {...props} />,
+                  h2: ({ ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h3: ({ ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h4: ({ ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h5: ({ ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h6: ({ ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  p: ({ ...props }: any) => <p {...props} />,
+                  ul: ({ ...props }: any) => <ul {...props} />,
+                  ol: ({ ...props }: any) => <ol {...props} />,
+                  li: ({ ...props }: any) => <li {...props} />,
+              a: ({ ...props }: any) => <a {...props} />,
             }}
           >
             {body}
@@ -190,7 +190,7 @@ export async function generateStaticParams() {
           files.push(slug);
         }
       }
-    } catch (error) {
+    } catch {
       // continue
     }
     return files;
diff --git a/src/app/docs/docs.css b/src/app/docs/docs.css
index 5ecd3fe..402d3ed 100644
--- a/src/app/docs/docs.css
+++ b/src/app/docs/docs.css
@@ -1,5 +1,90 @@
 /* EmberDocs Documentation Pages - Matching ui-mockup-01-documentation-page.html */
 
+/* Header - Exact mockup match */
+.header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+}
+
+.header-content {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--text);
+}
+
+.logo-mark {
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, var(--purple), var(--amber));
+  border-radius: 6px;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: var(--text);
+}
+
+.search-trigger {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 200px;
+  font-family: inherit;
+}
+
+.search-trigger:hover {
+  border-color: var(--purple);
+  background: var(--surface);
+}
+
+.kbd {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
 /* Ensure docs pages use the correct color scheme */
 .docs-layout {
   background: var(--bg);
@@ -33,6 +118,16 @@
   margin-bottom: 8px;
 }
 
+.sidebar-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-nav li {
+  margin-bottom: 2px;
+}
+
 .sidebar-link {
   display: block;
   padding: 8px 24px;
@@ -215,7 +310,7 @@
 }
 
 /* Table of Contents */
-.docs-toc {
+.toc {
   padding: 48px 24px;
   height: calc(100vh - 64px);
   position: sticky;
@@ -285,7 +380,7 @@
     grid-template-columns: 280px 1fr;
   }
 
-  .docs-toc {
+  .toc {
     display: none;
   }
 }
@@ -401,22 +496,22 @@
 
 /* Scrollbar styling for dark theme */
 .docs-sidebar::-webkit-scrollbar,
-.docs-toc::-webkit-scrollbar {
+.toc::-webkit-scrollbar {
   width: 8px;
 }
 
 .docs-sidebar::-webkit-scrollbar-track,
-.docs-toc::-webkit-scrollbar-track {
+.toc::-webkit-scrollbar-track {
   background: transparent;
 }
 
 .docs-sidebar::-webkit-scrollbar-thumb,
-.docs-toc::-webkit-scrollbar-thumb {
+.toc::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }
 
 .docs-sidebar::-webkit-scrollbar-thumb:hover,
-.docs-toc::-webkit-scrollbar-thumb:hover {
+.toc::-webkit-scrollbar-thumb:hover {
   background: var(--surface-hover);
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 800cf6d..3740918 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,53 +1,51 @@
 'use client';
 
 import Link from 'next/link';
-import { ThemeToggle } from './ThemeToggle';
-import { VersionSwitcher } from './VersionSwitcher';
 import { EMBERDOCS_BASE_ROUTE } from '@/lib/config';
-import type { Version } from '@/lib/types';
 
 interface HeaderProps {
-  versions?: Version[];
-  currentVersion?: string;
+  showSearch?: boolean;
 }
 
-export function Header({ versions = [], currentVersion }: HeaderProps): JSX.Element {
+export function Header({ showSearch = true }: HeaderProps): JSX.Element {
+  const handleSearchClick = () => {
+    // Trigger search palette (will be handled by SearchPalette component)
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      metaKey: true,
+      bubbles: true,
+    });
+    document.dispatchEvent(event);
+  };
+
   return (
-    <header className="sticky top-0 z-100 border-b border-[var(--border)] bg-[rgba(15,23,42,0.8)] backdrop-blur-[10px] py-6">
-      <div className="max-w-[1280px] mx-auto px-8">
-        <nav className="flex items-center justify-between">
-          <Link href="/" className="flex items-center gap-3 text-[20px] font-bold text-[var(--text)] no-underline">
-            <div className="w-8 h-8 rounded-md bg-gradient-to-br from-[var(--purple)] to-[var(--amber)]" />
-            EmberDocs
+    <header className="header">
+      <div className="header-content">
+        <Link href="/" className="logo">
+          <div className="logo-mark"></div>
+          EmberDocs
+        </Link>
+        <nav className="header-nav">
+          <Link href={EMBERDOCS_BASE_ROUTE as any} className="nav-link">
+            Docs
           </Link>
-          <ul className="flex items-center gap-8 list-none m-0 p-0">
-            <li>
-              <a href="#features" className="font-medium text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors no-underline">
-                Features
-              </a>
-            </li>
-            <li>
-              <Link href={EMBERDOCS_BASE_ROUTE as any} className="font-medium text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors no-underline">
-                Docs
-              </Link>
-            </li>
-            <li>
-              <a
-                href="https://github.com/sturdy-barnacle/emberdocs"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-medium text-[var(--text-secondary)] hover:text-[var(--text)] transition-colors no-underline"
-              >
-                GitHub
-              </a>
-            </li>
-          </ul>
-          <Link
-            href={`${EMBERDOCS_BASE_ROUTE}/getting-started/introduction` as any}
-            className="px-6 py-3 bg-[var(--purple)] text-white rounded-[8px] font-semibold hover:translate-y-[-1px] hover:shadow-[0_4px_12px_rgba(139,92,246,0.4)] transition-all text-base no-underline"
+          <a href="/#features" className="nav-link">
+            Examples
+          </a>
+          <a
+            href="https://github.com/sturdy-barnacle/emberdocs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="nav-link"
           >
-            Get Started →
-          </Link>
+            GitHub
+          </a>
+          {showSearch && (
+            <button className="search-trigger" onClick={handleSearchClick}>
+              <span>Search...</span>
+              <kbd className="kbd">⌘K</kbd>
+            </button>
+          )}
         </nav>
       </div>
     </header>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4a7aed1..c9d1c0c 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -59,42 +59,33 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
     const isExpanded = expandedFolders.has(node.id);
     const isCurrentlyActive = isActive(node.path);
 
-    return (
-      <div key={node.id}>
-        {isFolder ? (
+    if (isFolder && node.children && node.children.length > 0) {
+      return (
+        <li key={node.id}>
           <button
             onClick={() => toggleFolder(node.id)}
-            className={`sidebar-link ${isCurrentlyActive ? 'active' : ''} ${level > 0 ? 'nested' : ''} flex items-center gap-2 w-full`}
-          >
-            <span className="inline-block w-4">
-              {node.children && node.children.length > 0 && (
-                <svg
-                  className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              )}
-            </span>
-            <span className="flex-1">{node.title}</span>
-          </button>
-        ) : (
-          <Link
-            href={`${EMBERDOCS_BASE_ROUTE}${node.path}` as any}
             className={`sidebar-link ${isCurrentlyActive ? 'active' : ''} ${level > 0 ? 'nested' : ''}`}
           >
             {node.title}
-          </Link>
-        )}
+          </button>
+          {isExpanded && (
+            <ul className="sidebar-nav">
+              {node.children.map((child) => renderNode(child, level + 1))}
+            </ul>
+          )}
+        </li>
+      );
+    }
 
-        {isFolder && isExpanded && node.children && node.children.length > 0 && (
-          <div>
-            {node.children.map((child) => renderNode(child, level + 1))}
-          </div>
-        )}
-      </div>
+    return (
+      <li key={node.id}>
+        <Link
+          href={`${EMBERDOCS_BASE_ROUTE}${node.path}` as any}
+          className={`sidebar-link ${isCurrentlyActive ? 'active' : ''} ${level > 0 ? 'nested' : ''}`}
+        >
+          {node.title}
+        </Link>
+      </li>
     );
   };
 
@@ -106,7 +97,9 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
             {node.title}
           </div>
           <nav>
-            {node.children.map((child) => renderNode(child))}
+            <ul className="sidebar-nav">
+              {node.children.map((child) => renderNode(child))}
+            </ul>
           </nav>
         </div>
       );
diff --git a/src/components/TableOfContents.test.tsx b/src/components/TableOfContents.test.tsx
index 66ea846..f7ffd2b 100644
--- a/src/components/TableOfContents.test.tsx
+++ b/src/components/TableOfContents.test.tsx
@@ -117,13 +117,11 @@ describe('TableOfContents', () => {
     const { container } = render(<TableOfContents toc={toc} />);
 
     const buttons = container.querySelectorAll('button');
-    
-    // Level 1 should have paddingLeft: '0'
-    expect(buttons[0]).toHaveStyle({ paddingLeft: '0px' });
-    
-    // Level 2 and 3 should have paddingLeft: '12px'
-    expect(buttons[1]).toHaveStyle({ paddingLeft: '12px' });
-    expect(buttons[2]).toHaveStyle({ paddingLeft: '12px' });
+
+    // Check that level-2 class is applied to nested items
+    expect(buttons[0]).not.toHaveClass('level-2');
+    expect(buttons[1]).toHaveClass('level-2');
+    expect(buttons[2]).not.toHaveClass('level-2'); // Level 3 doesn't get level-2 class
   });
 
   it('should handle scrollToHeading when element is not found', () => {
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index e5cd91a..7c9011c 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -34,24 +34,24 @@ export function TableOfContents({ toc }: TableOfContentsProps): JSX.Element {
   };
 
   return (
-    <div className="docs-toc">
-      <div className="toc-title">
-        On This Page
-      </div>
-      <ul className="toc-nav">
-        {toc.map((item) => (
-          <li key={item.slug}>
-            <button
-              onClick={() => scrollToHeading(item.slug)}
-              className={`toc-link ${activeId === item.slug ? 'active' : ''} ${item.level === 2 ? 'level-2' : item.level === 3 ? 'level-3' : ''}`}
-              aria-current={activeId === item.slug ? 'location' : undefined}
-              title={item.title}
-            >
-              {item.title}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <aside className="toc">
+      <div className="toc-title">On This Page</div>
+      <nav aria-label="Table of contents">
+        <ul className="toc-nav">
+          {toc.map((item) => (
+            <li key={item.slug}>
+              <button
+                onClick={() => scrollToHeading(item.slug)}
+                className={`toc-link ${activeId === item.slug ? 'active' : ''} ${item.level === 2 ? 'level-2' : ''}`}
+                aria-current={activeId === item.slug ? 'location' : undefined}
+                title={item.title}
+              >
+                {item.title}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
   );
 }
diff --git a/tests/smoke.test.tsx b/tests/smoke.test.tsx
index 78138b9..14499e3 100644
--- a/tests/smoke.test.tsx
+++ b/tests/smoke.test.tsx
@@ -4,12 +4,12 @@ import HomePage from '@/app/page';
 describe('HomePage', () => {
   it('renders headline and features', () => {
     render(<HomePage />);
-    // Check for h1 heading with EmberDocs text
+    // Check for h1 heading with "Build docs" text
     const h1Headings = screen.getAllByRole('heading', { level: 1 });
-    expect(h1Headings.some(h => h.textContent?.includes('EmberDocs'))).toBe(true);
-    // Check for h2 heading (Built for Developers section)
+    expect(h1Headings.some(h => h.textContent?.includes('Build docs'))).toBe(true);
+    // Check for h2 heading (Built for developers section)
     const h2Headings = screen.getAllByRole('heading', { level: 2 });
-    expect(h2Headings.some(h => h.textContent?.includes('Built for Developers'))).toBe(true);
+    expect(h2Headings.some(h => h.textContent?.includes('Built for developers'))).toBe(true);
     // Check for tech stack items (h4 headings in tech cards)
     const techHeadings = screen.getAllByRole('heading', { level: 4 });
     expect(techHeadings.length).toBeGreaterThanOrEqual(4);