diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9d7c894..17235f6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,7 +21,7 @@
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[jsonc]": {
+  "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
   }
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d10aed9..28b5ed0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -4,8 +4,33 @@ import Layout from "src/layout";
 export default function Home() {
   return (
     <Layout title="Welcome to My Website">
-      <div class="flex min-h-screen flex-col items-center justify-center bg-gray-100">
-        <h1 class="font-bold text-4xl">Welcome to My Website</h1>
+      <div class="flex min-h-screen flex-col items-center justify-center gap-5 bg-steel-grey p-20 font-mono">
+        <header class="mx-auto my-2 mb-10 max-w-[510px] border-8 border-violet font-bold">
+          <h1 class="border-b-8 p-2 text-5xl text-violet">Katastema.</h1>
+          <p class="bg-violet p-2 text-right text-2xl text-steel-grey">
+            Simplicity and power
+          </p>
+        </header>
+
+        <p class="z-10 max-w-xl text-center text-gold text-lg">
+          Start editing <span class="font-bold">src/pages/index.tsx</span>
+        </p>
+
+        <a href="https://github.com/fTrestour/katastema" class="h-5 text-gold">
+          <svg
+            viewBox="0 0 98 96"
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-full"
+          >
+            <title>Github</title>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+              class="fill-gold"
+            />
+          </svg>
+        </a>
       </div>
     </Layout>
   );
diff --git a/src/styles.css b/src/styles.css
index b5c61c9..837d18d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 54331dc..12b1d25 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,16 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
+    fontFamily: {
+      mono: ["Fira Code"],
+    },
+    colors: {
+      "steel-grey": "#262335",
+      mirage: "#241C2F",
+      gold: "#F7DD71",
+      violet: "#EE84D6",
+      "light-coral": "#F77E72",
+    },
     extend: {},
   },
   plugins: [],