diff --git a/html/common.tsx b/html/common.tsx
new file mode 100644
index 0000000..9d32c21
--- /dev/null
+++ b/html/common.tsx
@@ -0,0 +1,7 @@
+import { Component } from "./jsx/jsx-runtime.ts";
+
+export const Main: Component = (attributes, children) => (
+    <div {...attributes} id="main">
+        {...children}
+    </div>
+);
diff --git a/html/coq.tsx b/html/coq.tsx
index ccdf536..50b132c 100644
--- a/html/coq.tsx
+++ b/html/coq.tsx
@@ -1,3 +1,4 @@
+import { Main } from "./common.tsx";
 import { reify_dialogue } from "./dialogue.tsx";
 import { debug_render } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
@@ -250,8 +251,8 @@ const dialogue = reify_dialogue([
 ]);
 
 debug_render(
-    <div class="main">
+    <Main>
         <div class="gradient">{dialogue}</div>
         <div class="scanlines"></div>
-    </div>
+    </Main>
 );
diff --git a/html/dialogue.tsx b/html/dialogue.tsx
index 14476cd..44d1608 100644
--- a/html/dialogue.tsx
+++ b/html/dialogue.tsx
@@ -1,5 +1,4 @@
-import { Html, debug_render } from "./html.ts";
-import { Component } from "./jsx/jsx-runtime.ts";
+import { Html } from "./html.ts";
 
 type DOption = [Html, Dialogue];
 type Dialogue = Html | [Html, ...DOption[]];
diff --git a/html/hot_people_who_eat_croissants_are_dangerous.tsx b/html/hot_people_who_eat_croissants_are_dangerous.tsx
new file mode 100644
index 0000000..66521ec
--- /dev/null
+++ b/html/hot_people_who_eat_croissants_are_dangerous.tsx
@@ -0,0 +1,68 @@
+import { Html, debug_render } from "./html.ts";
+import { Component } from "./jsx/jsx-runtime.ts";
+
+const wheel = (...items: Html[]): Html => (
+    <div class="wheel">
+        {...items.map(i => <div class="wheel-item">{i} people</div>)}
+    </div>
+);
+
+const Take: Component = ({ subjects, objects, adjectives }, _) => (
+    <div class="take">
+        {wheel(...subjects)} who eat {wheel(...objects)} are{" "}
+        {wheel(...adjectives)}
+    </div>
+);
+
+// might want to have the final item be seperate
+debug_render(
+    <Take
+        subjects={[
+            "poor",
+            "fat",
+            "dumb",
+            "tall",
+            "short",
+            "poor",
+            "fat",
+            "dumb",
+            "tall",
+            "hot",
+        ]}
+        objects={[
+            "apples",
+            "bread",
+            "pasta",
+            "candy",
+            "rice",
+            "beans",
+            "apples",
+            "bread",
+            "candy",
+            "rice",
+            "beans",
+            "apples",
+            "bread",
+            "pasta",
+            "candy",
+            "rice",
+            "croissants",
+        ]}
+        adjectives={[
+            "vibes",
+            "mean",
+            "dumb",
+            "cool",
+            "hot",
+            "stupid",
+            "funny",
+            "vibes",
+            "mean",
+            "dumb",
+            "cool",
+            "hot",
+            "stupid",
+            "dangerous",
+        ]}
+    />
+);