diff --git a/assets/media/avatar.webp b/assets/media/avatar.webp
new file mode 100644
index 0000000..b1216a7
Binary files /dev/null and b/assets/media/avatar.webp differ
diff --git a/css/fonts.css b/css/fonts.css
index b67fa4e..62b3302 100644
--- a/css/fonts.css
+++ b/css/fonts.css
@@ -1,43 +1,71 @@
 @font-face {
+<<<<<<< HEAD
   font-family: "Comic Code";
   src:
     url("https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2")
       format("woff2"),
     url("https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff")
       format("woff");
+=======
+  font-display: swap;
+  font-family: 'Comic Code';
+  src: url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2') format('woff2'),
+    url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff') format('woff');
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
+<<<<<<< HEAD
   font-family: "Comic Code";
   src:
     url("https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2")
       format("woff2"),
     url("https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff")
       format("woff");
+=======
+  font-display: swap;
+  font-family: 'Comic Code';
+  src: url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2') format('woff2'),
+    url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff') format('woff');
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
+<<<<<<< HEAD
   font-family: "Comic Code";
   src:
     url("https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2")
       format("woff2"),
     url("https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff")
       format("woff");
+=======
+  font-display: swap;
+  font-family: 'Comic Code';
+  src: url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2') format('woff2'),
+    url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff') format('woff');
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
+<<<<<<< HEAD
   font-family: "Comic Code";
   src:
     url("https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2")
       format("woff2"),
     url("https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff")
       format("woff");
+=======
+  font-display: swap;
+  font-family: 'Comic Code';
+  src: url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2') format('woff2'),
+    url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff') format('woff');
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
   font-weight: 700;
   font-style: normal;
 }
diff --git a/css/index.css b/css/index.css
index 576c120..aad0464 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,13 +1,13 @@
 /* IMPORTS */
-
-@import url("fonts.css");
+@import url(fonts.css);
+@import url(picker.css);
 @import url(theme-switcher.css);
-@import url("picker.css");
-@import url(themes/mocha.css);
-@import url(themes/macchiato.css);
 @import url(themes/frappe.css);
 @import url(themes/latte.css);
+@import url(themes/macchiato.css);
+@import url(themes/mocha.css);
 
+<<<<<<< HEAD
 /* Index.html */
 
 html,
@@ -47,6 +47,42 @@ html {
   z-index: 1;
   width: 100%;
   max-width: 460px;
+=======
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    width: 100%;
+    max-width: 100vw;
+    overflow-x: hidden;
+    font-family: 'Comic Code', sans-serif;
+    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
+    color: var(--text);
+
+    /* top-anchored, horizontally centered, scrollable */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: clamp(2.5rem, 9vh, 6rem) 1.25rem 5rem;
+}
+
+/* main content column */
+main.intro,
+.hub {
+    width: 100%;
+    max-width: 480px;
+    z-index: 1;
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 .pfp {
@@ -152,6 +188,7 @@ body::before {
 }
 
 @media (max-width: 600px) {
+<<<<<<< HEAD
   .intro {
     margin-top: 10vh;
     color: var(--text);
@@ -163,6 +200,22 @@ body::before {
     margin-top: 1vh;
     padding: 1vh;
   }
+=======
+    .intro {
+        color: var(--text);
+        text-align: center;
+        padding: 0;
+    }
+
+    .intro-text {
+        margin-top: 0.75rem;
+        padding: 0 0.25rem;
+    }
+
+    .hub-header h1 {
+        font-size: 1.7rem;
+    }
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 @media (min-width: 768px) {
@@ -175,19 +228,41 @@ body::before {
   }
 }
 
+.intro-text {
+    max-width: 42ch;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.6;
+    color: var(--subtext-1);
+    font-size: 0.98rem;
+}
+
 .gitgay-link {
-  background-color: var(--mauve);
-  border: none;
-  color: black;
-  padding: 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-  border-radius: 15px;
-  font-family: "Comic Code";
+    background-color: var(--mauve);
+    border: none;
+    color: black;
+    padding: 0.85rem 1.5rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 14px;
+    font-family: "Comic Code";
+    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+    box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.7);
+}
+
+.gitgay-link:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.05);
+    box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.8);
+}
+
+.gitgay-link:active {
+    transform: translateY(0);
 }
 
 .hub-header,
@@ -202,31 +277,32 @@ body::before {
 
 /* ---- 88x31 button wall (always visible on desktop) ---- */
 .button-wall {
-  position: fixed;
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 5;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.5rem;
-  max-width: min(90vw, 480px);
+    position: fixed;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+    max-width: min(90vw, 480px);
 }
 
 /* hide on mobile */
 @media (max-width: 768px) {
-  .button-wall {
-    display: none;
-  }
+    .button-wall {
+        display: none;
+    }
 }
 
 .button-wall a {
-  display: block;
-  line-height: 0;
+    display: block;
+    line-height: 0;
 }
 
 .button-wall img {
+<<<<<<< HEAD
   width: 88px;
   height: 31px;
   image-rendering: pixelated;
@@ -235,11 +311,19 @@ body::before {
   transition:
     transform 0.12s ease,
     border-color 0.12s ease;
+=======
+    width: 88px;
+    height: 31px;
+    image-rendering: pixelated;
+    border: 1px solid var(--surface-1);
+    border-radius: 2px;
+    transition: transform 0.12s ease, border-color 0.12s ease;
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 .button-wall a:hover img {
-  transform: translateY(-2px);
-  border-color: rgb(var(--accent-rgb));
+    transform: translateY(-2px);
+    border-color: rgb(var(--accent-rgb));
 }
 
 /* Coffee/index.html */
@@ -259,6 +343,7 @@ body.message-page {
 }
 
 .message-card {
+<<<<<<< HEAD
   background: var(--surface0);
   padding: 2.5rem;
   border-radius: 12px;
@@ -269,6 +354,18 @@ body.message-page {
   line-height: 1.6;
   color: var(--text);
   border: 1px solid var(--surface1);
+=======
+    background: var(--surface-0);
+    padding: 2.5rem;
+    border-radius: 12px;
+    max-width: 520px;
+    width: 100%;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
+    text-align: center;
+    line-height: 1.6;
+    color: var(--text);
+    border: 1px solid var(--surface-1);
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 .message-card h1 {
@@ -278,7 +375,11 @@ body.message-page {
 }
 
 .message-card p {
+<<<<<<< HEAD
   color: var(--subtext1);
+=======
+    color: var(--subtext-1);
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 .message-card .ok {
@@ -292,9 +393,15 @@ body.message-page {
 }
 
 .message-card .muted {
+<<<<<<< HEAD
   color: var(--overlay1);
   font-size: 0.9rem;
   margin-top: 1.5rem;
+=======
+    color: var(--overlay-1);
+    font-size: 0.9rem;
+    margin-top: 1.5rem;
+>>>>>>> 6b0bc5fa96491155661b1597bd88fedf1bace6b8
 }
 
 .message-card code {
diff --git a/index.html b/index.html
index 32c1c90..40672b7 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
     <!-- Page Title -->
     <title>Ari</title>
     <link rel="icon" type="image/png" href="/assets/media/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css">
     <script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
 
     <!-- SEO Meta Tags -->
@@ -75,14 +76,12 @@
     <meta name="twitter:card" content="summary_image" />
     <meta name="twitter:title" content="Ari Stuff" />
     <meta name="twitter:description" content="Personal Site for Ari on git.gay" />
-    <link href="css/index.css" rel="stylesheet" />
-    <link href="css/picker.css" rel="stylesheet" />
 </head>
 
 <body>
     <main class="intro">
         <header class="hub-header">
-            <img class="pfp" src="assets/media/avatar.png" alt="Ari avatar">
+            <img class="pfp" src="assets/media/avatar.webp" alt="Ari avatar" width="96" height="96" fetchpriority="high">
             <div>
                 <h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
             </div>
@@ -92,7 +91,7 @@
                 and just tries to help out whenever she can.
             </div>
             <div>
-                <a href="https://git.gay/Ari" target="_blank"><button class="gitgay-link">Check out my Git.Gay</button></a>
+                <a class="gitgay-link" href="https://git.gay/Ari" target="_blank" rel="noopener">Check out my Git.Gay</a>
             </div>
         </header>
 
@@ -106,15 +105,15 @@
         <img src="/assets/88x31/gitgay.png" alt="GitGay" loading="lazy">
         <img src="/assets/88x31/blink.gif" alt="Blink" loading="lazy">
         <img src="/assets/88x31/firefox.gif" alt="Firefox" loading="lazy">
-        <img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
-        <img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
-        <img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
-        <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
-
-    </aside>
-</body>
-<script src="js/index.js"></script>
-<script src="js/flavors.js"></script>
-<script src="js/cat.js"></script>
-
-</html>
\ No newline at end of file
+	    <img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
+	    <img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
+	    <img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
+	    <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
+	
+	    </aside>
+	</body>
+	<script src="js/index.js"></script>
+	<script src="js/flavors.js"></script>
+	<script src="js/cat.js"></script>
+	
+	</html>
\ No newline at end of file