diff --git a/examples/index.tsx b/examples/index.tsx
index 32ffbc3..eaf35dc 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,82 +1,77 @@
+import { define } from '../src'
+
+import { Layout } from './helpers'
+
+const P = define('P', {
+  color: '#6b7280',
+  fontSize: 18,
+  marginBottom: 48,
+})
+
+const ExamplesGrid = define('ExamplesGrid', {
+  display: 'grid',
+  gap: 20,
+  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
+})
+
+const ExampleCard = define('ExampleCard', {
+  base: 'a',
+
+  background: 'white',
+  padding: 24,
+  borderRadius: 12,
+  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+  textDecoration: 'none',
+  transition: 'all 0.2s ease',
+  display: 'block',
+
+  states: {
+    hover: {
+      transform: 'translateY(-2px)',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
+    }
+  },
+
+  parts: {
+    H2: {
+      color: '#111827',
+      margin: '0 0 8px 0',
+      fontSize: 20,
+    },
+    P: {
+      color: '#6b7280',
+      margin: 0,
+      fontSize: 14,
+    }
+  },
+
+  render({ props: { title, desc }, parts: { Root, H2, P } }) {
+    return <Root>
+      <H2>{title}</H2>
+      <P>{desc}</P>
+    </Root>
+  }
+})
+
 export const IndexPage = () => (
-  <html>
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Forge Examples</title>
-      <style dangerouslySetInnerHTML={{
-        __html: `
-        body {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          margin: 0;
-          padding: 40px 20px;
-          background: #f9fafb;
-        }
-        .container {
-          max-width: 800px;
-          margin: 0 auto;
-        }
-        h1 {
-          color: #111827;
-          margin-bottom: 16px;
-        }
-        p {
-          color: #6b7280;
-          font-size: 18px;
-          margin-bottom: 48px;
-        }
-        .examples-grid {
-          display: grid;
-          gap: 20px;
-          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        }
-        .example-card {
-          background: white;
-          padding: 24px;
-          border-radius: 12px;
-          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-          text-decoration: none;
-          transition: all 0.2s ease;
-          display: block;
-        }
-        .example-card:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        }
-        .example-card h2 {
-          color: #111827;
-          margin: 0 0 8px 0;
-          font-size: 20px;
-        }
-        .example-card p {
-          color: #6b7280;
-          margin: 0;
-          font-size: 14px;
-        }
-      `}} />
-    </head>
-    <body>
-      <div class="container">
-        <h1>Forge Examples</h1>
-        <p>Explore component examples built with Forge</p>
+  <Layout title="Forge Examples">
+    <P>Explore component examples built with Forge</P>
 
-        <div class="examples-grid">
-          <a href="/profile" class="example-card">
-            <h2>Profile Card</h2>
-            <p>User profile component with variants for size, theme, and verified status</p>
-          </a>
+    <ExamplesGrid>
+      <ExampleCard href="/profile"
+        title="Profile Card"
+        desc="User profile component with variants for size, theme, and verified status"
+      />
 
-          <a href="/buttons" class="example-card">
-            <h2>Buttons</h2>
-            <p>Button component with intent, size, and disabled variants</p>
-          </a>
+      <ExampleCard href="/buttons"
+        title="Buttons"
+        desc="Button component with intent, size, and disabled variants"
+      />
 
-          <a href="/navigation" class="example-card">
-            <h2>Navigation</h2>
-            <p>Navigation patterns including tabs, pills, vertical nav, and breadcrumbs</p>
-          </a>
-        </div>
-      </div>
-    </body>
-  </html>
+      <ExampleCard href="/navigation"
+        title="Navigation"
+        desc="Navigation patterns including tabs, pills, vertical nav, and breadcrumbs"
+      />
+    </ExamplesGrid>
+  </Layout>
 )
