diff --git a/workspaces/simon-game/src/app/components/App.tsx b/workspaces/simon-game/src/app/components/App.tsx
index 3eaddacc..895d9015 100644
--- a/workspaces/simon-game/src/app/components/App.tsx
+++ b/workspaces/simon-game/src/app/components/App.tsx
@@ -1,13 +1,19 @@
 import React from "react";
 
+import { Box } from "./Box.tsx";
+
 export function App() {
   return (
     <div>
-      <div
-        style={{ backgroundColor: "lightblue", height: 100, width: 100 }}
-      ></div>
-      <div style={{ backgroundColor: "orange", height: 100, width: 100 }}></div>
-      <div style={{ backgroundColor: "green", height: 100, width: 100 }}></div>
+      <Box color="red" />
+      <Box
+        color={
+          // cobalt blue
+          "#0050B5"
+        }
+      />
+      <Box color="green" />
+      <Box color="yellow" />
     </div>
   );
 }
diff --git a/workspaces/simon-game/src/app/components/Box.tsx b/workspaces/simon-game/src/app/components/Box.tsx
new file mode 100644
index 00000000..41032b28
--- /dev/null
+++ b/workspaces/simon-game/src/app/components/Box.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+type Props = {
+  color?: string;
+  height?: number;
+  width?: number;
+  margin?: number;
+};
+
+export function Box(props: Props) {
+  return (
+    <div
+      style={{
+        backgroundColor: props.color ?? "lightblue",
+        height: props.height ?? 100,
+        width: props.width ?? 100,
+        borderRadius: 20, // rounded corners
+        margin: props.margin, // spaces between boxes
+      }}
+    />
+  );
+}