diff --git a/index.html b/index.html
index 54b6ac3..2588b13 100644
--- a/index.html
+++ b/index.html
@@ -11,19 +11,83 @@
       sizes="32x32"
       href="/images/favicon-32x32.png"
     />
-    <link rel="stylesheet" href="styles.css" />
+
+    <style>
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base {
+        @font-face {
+          font-weight: 100 900;
+          src: url("/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+          font-family: "Inter";
+        }
+      }
+    </style>
   </head>
   <body>
-    <p>Jessica Randall</p>
-    <p>London, United Kingdom</p>
-    <p>"Front-end developer and avid reader."</p>
+    <div class="flex min-h-screen items-center justify-center bg-black p-6">
+      <main
+        class="flex w-full max-w-sm flex-col items-center gap-6 rounded-xl bg-dark-grey p-6 text-white sm:p-10"
+      >
+        <img
+          class="rounded-full"
+          width="88"
+          height="88"
+          src="/images/avatar-jessica.jpeg"
+          alt="Jessica's picture"
+        />
 
-    <ul>
-      <li>GitHub</li>
-      <li>Frontend Mentor</li>
-      <li>LinkedIn</li>
-      <li>Twitter</li>
-      <li>Instagram</li>
-    </ul>
+        <div class="flex flex-col items-center gap-1">
+          <p class="text-heading">Jessica Randall</p>
+          <p class="text-body-bold text-neon-green">London, United Kingdom</p>
+        </div>
+
+        <p class="text-body-regular">"Front-end developer and avid reader."</p>
+
+        <ul class="w-full space-y-4">
+          <li>
+            <a
+              class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
+            >
+              GitHub
+            </a>
+          </li>
+
+          <li>
+            <a
+              class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
+            >
+              Frontend Mentor
+            </a>
+          </li>
+
+          <li>
+            <a
+              class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
+            >
+              LinkedIn
+            </a>
+          </li>
+
+          <li>
+            <a
+              class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
+            >
+              Twitter
+            </a>
+          </li>
+
+          <li>
+            <a
+              class="block cursor-pointer rounded-lg bg-grey py-3 text-center text-body-bold hover:bg-neon-green hover:text-grey"
+            >
+              Instagram
+            </a>
+          </li>
+        </ul>
+      </main>
+    </div>
   </body>
 </html>
diff --git a/package.json b/package.json
index 4e14e53..42a64ed 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,11 @@
     "tailwindcss": "^3.4.4",
     "vite": "^5.3.2"
   },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  },
   "postcss": {
     "plugins": {
       "tailwindcss": {},
diff --git a/tailwind.config.js b/tailwind.config.js
index 8d8e5ab..fc6e6d0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,38 @@
 export default {
   content: ["index.html"],
   theme: {
-    extend: {},
+    colors: {
+      "dark-grey": "#1F1F1F",
+      "neon-green": "#C4F82A",
+      black: "#141414",
+      grey: "#333333",
+      white: "#FFFFFF",
+    },
+    fontFamily: {
+      sans: ["Inter", "sans-serif"],
+    },
+    fontSize: {
+      heading: [
+        "1.5rem",
+        {
+          lineHeight: "150%",
+          fontWeight: "600",
+        },
+      ],
+      "body-regular": [
+        "0.875rem",
+        {
+          lineHeight: "150%",
+          fontWeight: "400",
+        },
+      ],
+      "body-bold": [
+        "0.875rem",
+        {
+          lineHeight: "150%",
+          fontWeight: "700",
+        },
+      ],
+    },
   },
-  plugins: [],
 };
