diff --git a/sites/main/src/components/Challenge.astro b/sites/main/src/components/Challenge.astro
new file mode 100644
index 0000000..4ffbd0a
--- /dev/null
+++ b/sites/main/src/components/Challenge.astro
@@ -0,0 +1,40 @@
+---
+
+import active from '../images/active.svg';
+import wip from '../images/wip.svg';
+import { Status } from './Project.astro';
+
+
+interface Props {
+    name: string,
+    url: string,
+    status: Status;
+}
+
+const { name, url, status } = Astro.props;
+
+let color: string;
+let icon: string;
+
+switch (status) {
+    case Status.Active: {
+        color = "bg-green";
+        icon = active.src;
+        break;
+    }
+	default:
+	case Status.Inactive:
+    case Status.WIP: {
+        color = "bg-yellow";
+        icon = wip.src;
+        break;
+    }
+}
+---
+
+<a href={url} class="w-max h-fit flex flex-col rounded-lg p-2 m-2 bg-surface0 shadow-md shadow-crust transition-transform hover:bg-surface1 hover:drop-shadow-md hover:-translate-y-1">
+    <div class="flex justify-between mr-1 mb-1 items-end gap-2">
+        <p class="text-text text-lg">{name}</p>
+		<img src={icon} alt="cross" class="h-8 self-start"/>
+    </div>
+</a>