diff --git a/src/components/Center.astro b/src/components/Center.astro
deleted file mode 100644
index 117a7cd..0000000
--- a/src/components/Center.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-export interface Props {
-  direction: "row" | "column" | "row-reverse" | "column-reverse";
-}
-
-const { direction = "column" } = Astro.props;
----
-
-<div
-  class="w-full h-full flex items-center justify-center"
-  style={`flex-direction: ${direction};`}
->
-  <slot />
-</div>
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..4c2ebc3
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    :data-state="state"
+    :data-error="error"
+    class="w-full h-full flex items-center justify-center flex-col group data-[state=false]:bg-primary data-[state=true]:bg-accent data-[error=true]:!bg-error"
+  >
+    <p v-if="error" class="text-on-accent text-xl">You pressed too early</p>
+    <p
+      v-else-if="!captured"
+      class="group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-xl"
+    >
+      When the background turns green, press
+      <code class="font-dm-bold">Space</code>
+    </p>
+    <p v-else class="text-on-accent text-xl">You took {{ captured }} ms</p>
+
+    <p
+      class="fixed bottom-4 right-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
+    >
+      Press <code class="font-dm-bold">R</code> to restart
+    </p>
+
+    <a
+      href="https://github.com/Streamer272/reaction"
+      class="fixed bottom-4 left-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent hover:scale-125 transition-transform text-xl"
+    >
+      repo
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+let start = Date.now();
+let time = Math.floor(Math.random() * 5_000) + 1_000;
+const state = ref(false);
+const error = ref(false);
+const captured = ref();
+let timeoutId: number | undefined;
+
+onMounted(() => {
+  timeoutId = setTimeout(() => {
+    state.value = true;
+  }, time);
+
+  document.addEventListener("keydown", (e) => {
+    if (e.code === "Space" && !captured.value) {
+      if (state.value && !error.value) {
+        captured.value = Date.now() - start - time;
+      } else {
+        error.value = true;
+      }
+    } else if (e.code === "KeyR") {
+      start = Date.now();
+      time = Math.floor(Math.random() * 5_000) + 1_000;
+      state.value = false;
+      error.value = false;
+      captured.value = undefined;
+
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        state.value = true;
+      }, time);
+    }
+  });
+});
+</script>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index fc1f8eb..a3b7cb4 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -15,10 +15,8 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body class="w-screen h-screen overflow-auto">
-    <main class="w-full h-full">
-      <slot />
-    </main>
+  <body class="w-screen h-screen overflow-auto font-dm">
+    <slot />
   </body>
 </html>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5f6f44d..5dd397d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,8 @@
 ---
-import Center from "../components/Center.astro";
+import Home from "../components/Home.vue";
 import Page from "../layouts/Page.astro";
 ---
 
-<Page title="Index">
-  <Center>
-    <h1>lmao</h1>
-  </Center>
+<Page title="Reaction">
+  <Home client:load />
 </Page>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 080ea94..b3d6ba1 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,14 +3,15 @@ module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     fontFamily: {
-      dm: ["DM Sans", "sans-serif"],
-      "dm-bold": ["DM Sans Bold", "sans-serif"],
+      dm: ["'DM Sans'", "sans-serif"],
+      "dm-bold": ["'DM Sans Bold'", "sans-serif"],
     },
     colors: {
       transparent: "transparent",
       primary: "#121212",
       surface: "#232323",
       accent: "#1ed760",
+      error: "#ff1245",
       "on-primary": "#eeeeee",
       "on-surface": "#e0e0e0",
       "on-accent": "#121212",
