diff --git a/html/common.tsx b/html/common.tsx
index 52abd38..9a1d269 100644
--- a/html/common.tsx
+++ b/html/common.tsx
@@ -1,3 +1,4 @@
+import { Html } from "./html.ts";
 import { Component } from "./jsx/jsx-runtime.ts";
 
 export const Main: Component = (attributes, children) => (
@@ -20,3 +21,15 @@ export const styles = (s: Record<string, string | number>): string =>
     Object.entries(s)
         .map(([rule, val]) => `${rule}: ${val};`)
         .join("");
+
+export const eggbug_emotions: Record<string, Html> = {
+    smiling: (
+        <img
+            class="eggbug"
+            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
+            alt="eggbug, smiling"
+        />
+    ),
+};
+
+export const EggbugImg: Component = ({ type }) => eggbug_emotions[type];
diff --git a/html/eggbug-spamclick-battle.tsx b/html/eggbug-spamclick-battle.tsx
index 98c4551..aa122a9 100644
--- a/html/eggbug-spamclick-battle.tsx
+++ b/html/eggbug-spamclick-battle.tsx
@@ -4,11 +4,7 @@ import { Component } from "./jsx/jsx-runtime.ts";
 
 const Eggbug: Component = () => (
     <HCenter>
-        <img
-            class="eggbug"
-            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
-            alt="eggbug, smiling"
-        />
+        <Eggbug type="smiling" />
     </HCenter>
 );