diff --git a/public/favicon.svg b/public/favicon.svg
index f157bd1..82ab793 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48" fill="#1ed760">
+    <path
+        d="M360 196v-60h240v60H360Zm90 447h60V413h-60v230Zm30 332q-74 0-139.5-28.5T226 869q-49-49-77.5-114.5T120 615q0-74 28.5-139.5T226 361q49-49 114.5-77.5T480 255q67 0 126 22.5T711 340l51-51 42 42-51 51q36 40 61.5 97T840 615q0 74-28.5 139.5T734 869q-49 49-114.5 77.5T480 975Zm0-60q125 0 212.5-87.5T780 615q0-125-87.5-212.5T480 315q-125 0-212.5 87.5T180 615q0 125 87.5 212.5T480 915Zm0-299Z" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index c261c79..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,64 +0,0 @@
----
-export interface Props {
-  title: string;
-  body: string;
-  href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-  <a href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
-    <p>
-      {body}
-    </p>
-  </a>
-</li>
-<style>
-  .link-card {
-    list-style: none;
-    display: flex;
-    padding: 0.25rem;
-    background-color: white;
-    background-image: none;
-    background-size: 400%;
-    border-radius: 0.6rem;
-    background-position: 100%;
-    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  }
-
-  .link-card > a {
-    width: 100%;
-    text-decoration: none;
-    line-height: 1.4;
-    padding: 1rem 1.3rem;
-    border-radius: 0.35rem;
-    color: #111;
-    background-color: white;
-    opacity: 0.8;
-  }
-  h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    color: #444;
-  }
-  .link-card:is(:hover, :focus-within) {
-    background-position: 0;
-    background-image: var(--accent-gradient);
-  }
-  .link-card:is(:hover, :focus-within) h2 {
-    color: rgb(var(--accent));
-  }
-</style>
diff --git a/src/components/Center.astro b/src/components/Center.astro
new file mode 100644
index 0000000..117a7cd
--- /dev/null
+++ b/src/components/Center.astro
@@ -0,0 +1,14 @@
+---
+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/TestComp.vue b/src/components/TestComp.vue
deleted file mode 100644
index 8a9116a..0000000
--- a/src/components/TestComp.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="flex items-center justify-center flex-col w-page h-page gap-2">
-    <p class="text-blue-800">You clicked {{ count }} times</p>
-    <button @click="() => count++" class="text-2xl">+</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const count = ref(0);
-</script>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index ae3c145..fc1f8eb 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -15,29 +15,13 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body>
-    <main>
+  <body class="w-screen h-screen overflow-auto">
+    <main class="w-full h-full">
       <slot />
     </main>
   </body>
 </html>
-<style is:global>
-  :root {
-    --accent: 124, 58, 237;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      #da62c4 30%,
-      white 60%
-    );
-  }
 
-  html {
-    font-family: system-ui, sans-serif;
-    background-color: #f6f6f6;
-  }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-  }
+<style is:global>
+  @import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b2ee2f5..5f6f44d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,82 +1,10 @@
 ---
+import Center from "../components/Center.astro";
 import Page from "../layouts/Page.astro";
-import Card from "../components/Card.astro";
-import TestComp from "../components/TestComp.vue";
 ---
 
 <Page title="Index">
-  <TestComp client:load />
-  <!-- <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <p class="instructions">
-      To get started, open the directory <code>src/pages</code> in your project.<br
-      />
-      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-    </p>
-    <ul role="list" class="link-card-grid">
-      <Card
-        href="https://docs.astro.build/"
-        title="Documentation"
-        body="Learn how Astro works and explore the official API docs."
-      />
-      <Card
-        href="https://astro.build/integrations/"
-        title="Integrations"
-        body="Supercharge your project with new frameworks and libraries."
-      />
-      <Card
-        href="https://astro.build/themes/"
-        title="Themes"
-        body="Explore a galaxy of community-built starter themes."
-      />
-      <Card
-        href="https://astro.build/chat/"
-        title="Community"
-        body="Come say hi to our amazing Discord community. ❤️"
-      />
-    </ul> -->
+  <Center>
+    <h1>lmao</h1>
+  </Center>
 </Page>
-
-<style>
-  main {
-    margin: auto;
-    padding: 1.5rem;
-    max-width: 60ch;
-  }
-  h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0;
-  }
-  .text-gradient {
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-  }
-  .instructions {
-    line-height: 1.6;
-    margin: 1rem 0;
-    border: 1px solid rgba(var(--accent), 25%);
-    background-color: white;
-    padding: 1rem;
-    border-radius: 0.4rem;
-  }
-  .instructions code {
-    font-size: 0.875em;
-    font-weight: bold;
-    background: rgba(var(--accent), 12%);
-    color: rgb(var(--accent));
-    border-radius: 4px;
-    padding: 0.3em 0.45em;
-  }
-  .instructions strong {
-    color: rgb(var(--accent));
-  }
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 1rem;
-    padding: 0;
-  }
-</style>
diff --git a/src/pages/test1.astro b/src/pages/test1.astro
deleted file mode 100644
index 7fa057f..0000000
--- a/src/pages/test1.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-import Page from "../layouts/Page.astro";
----
-
-<Page title="Test 1">
-  <p>This is test 1 (astro)</p>
-</Page>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 71684a4..080ea94 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,14 +2,20 @@
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {
-      width: {
-        page: "100vw",
-      },
-      height: {
-        page: "100vh",
-      },
+    fontFamily: {
+      dm: ["DM Sans", "sans-serif"],
+      "dm-bold": ["DM Sans Bold", "sans-serif"],
     },
+    colors: {
+      transparent: "transparent",
+      primary: "#121212",
+      surface: "#232323",
+      accent: "#1ed760",
+      "on-primary": "#eeeeee",
+      "on-surface": "#e0e0e0",
+      "on-accent": "#121212",
+    },
+    extend: {},
   },
   plugins: [],
 };