diff --git a/public/styles/uno.css b/public/styles/uno.css
index b4645ba..92b091e 100644
--- a/public/styles/uno.css
+++ b/public/styles/uno.css
@@ -19,43 +19,89 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* layer: shortcuts */
+.container{width:100%;}
+@media (min-width: 640px){
+.container{max-width:640px;}
+}
+@media (min-width: 768px){
+.container{max-width:768px;}
+}
+@media (min-width: 1024px){
+.container{max-width:1024px;}
+}
+@media (min-width: 1280px){
+.container{max-width:1280px;}
+}
+@media (min-width: 1536px){
+.container{max-width:1536px;}
+}
 /* layer: default */
 .m-0{margin:0;}
-.m-auto{margin:auto;}
+.mx-auto{margin-left:auto;margin-right:auto;}
+.mb-4{margin-bottom:1rem;}
+.mb-6{margin-bottom:1.5rem;}
+.mt-2{margin-top:0.5rem;}
+.mt-4{margin-top:1rem;}
+.mt-6{margin-top:1.5rem;}
 .h-8{height:2rem;}
-.h-full{height:100%;}
+.h-auto{height:auto;}
+.max-w-4xl{max-width:56rem;}
+.min-h-screen{min-height:100vh;}
+.w-full{width:100%;}
 .flex{display:flex;}
-.flex-col{flex-direction:column;}
 .cursor-pointer{cursor:pointer;}
+.list-disc{list-style-type:disc;}
+.list-inside{list-style-position:inside;}
 .items-center{align-items:center;}
 .justify-center{justify-content:center;}
 .gap-3{gap:0.75rem;}
-.gap-8{gap:2rem;}
 .border{border-width:1px;}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
 .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
+.rounded{border-radius:0.25rem;}
+.rounded-lg{border-radius:0.5rem;}
 .rounded-md{border-radius:0.375rem;}
 .border-none{border-style:none;}
 .border-solid{border-style:solid;}
-.bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
-.bg-blue-200{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));}
 .bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}
-.bg-slate-200{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));}
+.bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}
+.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity));}
 .bg-transparent{background-color:transparent;}
+.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}
 .hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}
-.p-0{padding:0;}
-.px-10{padding-left:2.5rem;padding-right:2.5rem;}
+.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
+.from-blue-300{--un-gradient-from-position:0%;--un-gradient-from:rgb(147 197 253 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(147 197 253 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.via-purple-300{--un-gradient-via-position:50%;--un-gradient-to:rgb(216 180 254 / 0);--un-gradient-stops:var(--un-gradient-from), rgb(216 180 254 / var(--un-via-opacity, 1)) var(--un-gradient-via-position), var(--un-gradient-to);}
+.to-pink-300{--un-gradient-to-position:100%;--un-gradient-to:rgb(249 168 212 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
+.bg-gradient-to-br{--un-gradient-shape:to bottom right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
+.p-4{padding:1rem;}
+.p-8{padding:2rem;}
 .px-4{padding-left:1rem;padding-right:1rem;}
 .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
+.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
 .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
-.py-8{padding-top:2rem;padding-bottom:2rem;}
 .pl-3{padding-left:0.75rem;}
 .pr-10{padding-right:2.5rem;}
+.text-center{text-align:center;}
+.text-2xl{font-size:1.5rem;line-height:2rem;}
+.text-3xl{font-size:1.875rem;line-height:2.25rem;}
 .text-base{font-size:1rem;line-height:1.5rem;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
+.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));}
+.text-gray-900{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity));}
 .text-neutral-500{--un-text-opacity:1;color:rgb(115 115 115 / var(--un-text-opacity));}
+.text-pink-600{--un-text-opacity:1;color:rgb(219 39 119 / var(--un-text-opacity));}
+.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));}
 .text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity));}
+.text-teal-600{--un-text-opacity:1;color:rgb(13 148 136 / var(--un-text-opacity));}
+.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}
 .font-bold{font-weight:700;}
-.font-lato{font-family:"Lato";}
+.font-semibold{font-weight:600;}
+.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
+.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
-.outline{outline-style:solid;}
\ No newline at end of file
+.hover\:shadow-xl:hover{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.outline{outline-style:solid;}
+.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6327285..4c6f0f7 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,10 @@
-type Props = {
+export type LayoutProps = {
   title: string;
   currentPath?: string;
   children: any;
 };
 
-export default function Layout({ title, children }: Props) {
+export default function Layout({ title, children }: LayoutProps) {
   return (
     <html lang="en" hx-boost="true" hx-swap="outerHTML transition:true">
       <head>
@@ -21,9 +21,10 @@ export default function Layout({ title, children }: Props) {
         <script>htmx.config.globalViewTransitions = true</script>
         <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
       </head>
-
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
-      <body class="font-lato m-0 bg-blue-100 p-0 text-base">{children}</body>
+      <body class="font-sans m-0 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 text-gray-900 min-h-screen">
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/server.tsx b/src/server.tsx
index 926e5dd..3e14d46 100644
--- a/src/server.tsx
+++ b/src/server.tsx
@@ -1,6 +1,7 @@
 import { Hono } from "hono";
 import { serveStatic } from "hono/bun";
 import { logger } from "hono/logger";
+import Button from "./components/Button.tsx";
 import Layout from "./components/Layout.tsx";
 
 const app = new Hono();
@@ -8,25 +9,84 @@ const app = new Hono();
 app.use("/styles/*", serveStatic({ root: "./public/" }));
 app.use("*", logger());
 
-app.get("/", (c) =>
-  c.html(
-    <Layout title="hyperwave">
-      <main class="m-auto flex h-full flex-col items-center gap-8 px-10 py-8">
-        <h1>🌊 welcome to hyperwave</h1>
-        <pre class="rounded-md bg-blue-200 px-4 py-2">
-          ⌨️ edit <code class="bg-slate-200">src/server.tsx</code>
-        </pre>
-        <pre class="rounded-md bg-blue-200 px-4 py-2">
-          📚 read the{" "}
-          <a href="https://github.com/tireymorris/hyperwave?tab=readme-ov-file#hyperwave-">
-            friendy manual
-          </a>
-          !
-        </pre>
+app.get("/", async (c) => {
+  return c.html(
+    <Layout title="Hyperwave">
+      <main class="container mx-auto py-10 px-4">
+        <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8 transition-all hover:shadow-xl">
+          <h1 class="text-3xl font-bold text-center mb-6">
+            🌊 Welcome to Hyperwave
+          </h1>
+          <section class="mb-6">
+            <h2 class="text-2xl font-semibold text-blue-600 mb-4">
+              What is Hyperwave?
+            </h2>
+            <p class="mb-4">
+              Hyperwave is a server-side framework for building web
+              applications.
+            </p>
+            <ul class="list-disc list-inside">
+              <li>
+                Fast: Tiny payloads with no bloated client-side rendering.
+              </li>
+              <li>
+                Productive: Build <em>really</em> fast with HTMX, Tailwind, TSX,
+                Hyperscript.
+              </li>
+              <li>
+                Ergonomic: Best tooling of modern tooling combined with
+                rock-solid app architecture.
+              </li>
+              <li>Portable: Compile a binary to deploy anywhere.</li>
+            </ul>
+          </section>
+          <section class="mb-6">
+            <h2 class="text-2xl font-semibold text-purple-600 mb-4">
+              Motivation
+            </h2>
+            <p>
+              Drastically reduce time from idea to rendered UI with very little
+              cognitive friction after the initial learning curve.
+            </p>
+          </section>
+          <section class="mb-6">
+            <h2 class="text-2xl font-semibold text-pink-600 mb-4">Setup</h2>
+            <pre class="bg-gray-200 rounded p-4">bun dev</pre>
+            <p class="mt-2">
+              Visit port 1234 and edit <code>server.tsx</code>
+            </p>
+          </section>
+          <Button
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 transition-colors"
+            hx-get="/comparison"
+            hx-target="#content"
+            hx-swap="innerHTML"
+          >
+            See Comparison
+          </Button>
+          <div id="content" class="mt-6"></div>
+        </div>
       </main>
     </Layout>,
-  ),
-);
+  );
+});
+
+app.get("/comparison", async (c) => {
+  return c.html(
+    <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8 transition-all hover:shadow-xl">
+      <h2 class="text-2xl font-semibold text-teal-600 mb-4">Comparison</h2>
+      <img
+        src="https://github.com/tireymorris/hyperwave/assets/3528600/561b5536-5660-469d-b80a-9883f45ab676"
+        alt="Comparison"
+        class="mb-4 rounded w-full h-auto"
+      />
+      <p>
+        Hyperwave stands out in terms of speed, simplicity, developer
+        experience, and architectural benefits.
+      </p>
+    </div>,
+  );
+});
 
 export default {
   port: process.env.PORT || 1234,