diff --git a/LICENSE b/LICENSE
index 6519eaf..6d4791d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 ImBadAtThisStuff
+Copyright (c) 2026 git.gay/ari
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/assets/media/favicon.png b/assets/media/favicon.png
new file mode 100644
index 0000000..28a7ca1
Binary files /dev/null and b/assets/media/favicon.png differ
diff --git a/assets/oneko/boop.mp3 b/assets/oneko/boop.mp3
new file mode 100644
index 0000000..7b678a1
Binary files /dev/null and b/assets/oneko/boop.mp3 differ
diff --git a/css/index.css b/css/index.css
index 504c966..894258b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2,121 +2,140 @@
 @import url(theme-switcher.css);
 @import url("picker.css");
 @import url(themes/mocha.css);
-@import url(themes/macciato.css);
+@import url(themes/macchiato.css);
 @import url(themes/frappe.css);
 @import url(themes/latte.css);
 
 
 
-html, body {
-    background-color: var(--base);
-    color: var(--text);
+html,
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.5rem 1rem;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
     font-family: 'Comic Code', sans-serif;
     overflow-x: hidden;
     max-width: 100vw;
     margin: 0;
     min-height: 100vh;
+    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
+    color: var(--text);
 }
 
 html {
+    background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%);
+}
+
 .hub {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  max-width: 460px;
+    position: auto;
+    z-index: 1;
+    width: 100%;
+    max-width: 460px;
 }
 
 .pfp {
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 3px solid var(--yellow);
-  box-shadow: 0 4px 18px rgba(245, 194, 231, 0.25);
-  margin-bottom: 0.75rem;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid var(--yellow);
+    box-shadow: 0 4px 18px rgba(245, 194, 231, 0.25);
+    margin-bottom: 0.75rem;
 }
 
 .hub-header {
-  text-align: center;
-  margin-bottom: 2.25rem;
+    text-align: center;
+    margin-bottom: 2.25rem;
 }
 
 .hub-header h1 {
-  margin: 0;
-  font-size: 2rem;
-  font-weight: 700;
-  color: rgb(var(--accent-rgb));
-  transition: color 0.6s ease;
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    transition: color 0.6s ease;
+}
+
+.hey {
+    color: #ffffff
+}
+
+.name {
+    color: rgb(var(--accent-rgb))
+}
+
+.name::before {
+    content: " ";
 }
 
 .tagline {
-  margin: 0.35rem 0 0;
-  color: var(--subtext-0);
-  font-size: 0.95rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+    margin: 0.35rem 0 0;
+    color: var(--subtext-0);
+    font-size: 0.95rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
 }
 
 .pronouns {
-  margin: 0.35rem 0 0;
-  color: var(--mauve);
-  font-size: 0.95rem;
-  letter-spacing: 0.04em;
-  text-transform: lowercase;
-}
-
-}
-body {
-    display: flex;
-    justify-content: center;
+    margin: 0.35rem 0 0;
+    color: var(--mauve);
+    font-size: 0.95rem;
+    letter-spacing: 0.04em;
+    text-transform: lowercase;
 }
 
 /* Estrogen watermark blended into the background */
 body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: url(/assets/theme/estrogen.svg) center / cover no-repeat;
-  filter: invert(86%) sepia(8%) saturate(900%) hue-rotate(190deg) brightness(105%);
-  opacity: 0.05;
-  pointer-events: none;
-  z-index: 0;
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: url(/assets/theme/estrogen.svg) center / cover no-repeat;
+    filter: invert(86%) sepia(8%) saturate(900%) hue-rotate(190deg) brightness(105%);
+    opacity: 0.05;
+    pointer-events: none;
+    z-index: 0;
 }
 
-/* this is the weird css */
-.intro {
-    margin-top: 20vh;
-    color: var(--text);
-    text-align: center;
-    padding: 5vh
+.badges {
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.4rem;
+    pointer-events: none;
+    z-index: 5;
 }
 
-.intro-header {
-    font-size: 2.5rem;
-    font-weight: 700;
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.3rem 0.6rem;
+    border-radius: 999px;
+    background: var(--surface-0);
+    border: 1px solid rgba(var(--accent-rgb), 0.45);
+    color: var(--subtext-1);
+    font-size: 0.75rem;
+    white-space: nowrap;
+    transition: border-color 0.6s ease, box-shadow 0.6s ease;
 }
 
-.HiIm {
-    color: var(--text);
-    display: inline-block;
+.badge:hover {
+    border-color: rgb(var(--accent-rgb));
+    box-shadow: 0 4px 14px -6px rgba(var(--accent-rgb), 0.5);
 }
 
-.name {
-    color: var(--mauve);
-    display: inline-block;
+.badge-icon {
+    width: 15px;
+    height: 15px;
+    filter: invert(78%) sepia(36%) saturate(640%) hue-rotate(280deg) brightness(105%);
 }
 
-.pronouns {
-    font-size: 1.6rem;
-    color: var(--overlay-1);
-    display: inline-block;
-
-
-}
-
-.intro-text {
-    padding: 1vh;
-}
 
 
 @media (max-width: 600px) {
@@ -133,10 +152,6 @@ body::before {
     }
 }
 
-.desktop-break {
-    display: none;
-}
-
 @media (min-width: 768px) {
     .desktop-break {
         display: block;
diff --git a/css/picker.css b/css/picker.css
index 11e25cb..8c8868c 100644
--- a/css/picker.css
+++ b/css/picker.css
@@ -3,63 +3,333 @@
 
 /* https://github.com/doughmination/oneko.clove.is-a.dev/releases/tag/v1.0.0 */
 
-#oneko { position: fixed; width: 32px; height: 32px; image-rendering: pixelated;
-  z-index: 2147483647; pointer-events: none; }
+#oneko {
+  position: fixed;
+  width: 32px;
+  height: 32px;
+  image-rendering: pixelated;
+  z-index: 2147483647;
+  pointer-events: none;
+}
 
 .cat-picker {
-  position: fixed; inset: 0; z-index: 2147483646;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(17, 17, 27, 0.72); backdrop-filter: blur(4px); padding: 20px;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 17, 27, 0.72);
+  backdrop-filter: blur(4px);
+  padding: 20px;
 }
-.cat-picker[hidden] { display: none; }
+
+.cat-picker[hidden] {
+  display: none;
+}
+
 .cat-picker-panel {
-  background: #181825; color: #cdd6f4; border: 1px solid #313244;
-  border-radius: 14px; width: min(720px, 100%); max-height: 82vh;
-  display: flex; flex-direction: column; font-family: system-ui, sans-serif;
-  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
+  background: #181825;
+  color: #cdd6f4;
+  border: 1px solid #313244;
+  border-radius: 14px;
+  width: min(720px, 100%);
+  max-height: 82vh;
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui, sans-serif;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
 }
+
 .cat-picker-head {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 16px 20px; border-bottom: 1px solid #313244; font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #313244;
+  font-weight: 700;
 }
+
 .cat-picker-close {
-  background: none; border: none; color: #a6adc8; font-size: 1.5rem;
-  line-height: 1; cursor: pointer; padding: 0 4px;
+  background: none;
+  border: none;
+  color: #a6adc8;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
 }
-.cat-picker-close:hover { color: #f38ba8; }
-.cat-grid { overflow-y: auto; padding: 18px 20px; }
-.cat-section { margin-bottom: 18px; }
+
+.cat-picker-close:hover {
+  color: #f38ba8;
+}
+
+.cat-grid {
+  overflow-y: auto;
+  padding: 18px 20px;
+}
+
+.cat-section {
+  margin-bottom: 18px;
+}
+
 .cat-section-title {
-  margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase;
-  letter-spacing: 0.06em; color: #cba6f7;
+  margin: 0 0 10px;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #cba6f7;
 }
+
 .cat-section-items {
-  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
 }
+
 .cat-option {
-  background: #1e1e2e; border: 1px solid #313244; border-radius: 10px;
-  padding: 10px 6px 8px; cursor: pointer; color: inherit;
-  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  background: #1e1e2e;
+  border: 1px solid #313244;
+  border-radius: 10px;
+  padding: 10px 6px 8px;
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
   transition: border-color .12s, transform .1s, background .12s;
 }
-.cat-option:hover { border-color: #cba6f7; transform: translateY(-2px); background: #313244; }
-.cat-option.current { border-color: #cba6f7; background: #313244; box-shadow: inset 0 0 0 1px #cba6f7; }
+
+.cat-option:hover {
+  border-color: #cba6f7;
+  transform: translateY(-2px);
+  background: #313244;
+}
+
+.cat-option.current {
+  border-color: #cba6f7;
+  background: #313244;
+  box-shadow: inset 0 0 0 1px #cba6f7;
+}
+
 .cat-option .cat-preview {
-  width: 32px; height: 32px; image-rendering: pixelated;
-  background-repeat: no-repeat; border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  image-rendering: pixelated;
+  background-repeat: no-repeat;
+  border-radius: 4px;
 }
-.cat-option .cat-name { font-size: 0.68rem; color: #bac2de; text-align: center; line-height: 1.1; word-break: break-word; }
-.cat-hint { margin: 0; padding: 12px 20px; border-top: 1px solid #313244;
-  font-size: 0.78rem; color: #a6adc8; text-align: center; }
-.cat-hide-btn { background: none; border: none; color: #f38ba8; cursor: pointer;
-  font-size: 0.78rem; padding: 0; }
-.cat-hide-btn:hover { text-decoration: underline; }
+
+.cat-option .cat-name {
+  font-size: 0.68rem;
+  color: #bac2de;
+  text-align: center;
+  line-height: 1.1;
+  word-break: break-word;
+}
+
+.cat-hint {
+  margin: 0;
+  padding: 12px 20px;
+  border-top: 1px solid #313244;
+  font-size: 0.78rem;
+  color: #a6adc8;
+  text-align: center;
+}
+
+.cat-hide-btn {
+  background: none;
+  border: none;
+  color: #f38ba8;
+  cursor: pointer;
+  font-size: 0.78rem;
+  padding: 0;
+}
+
+.cat-hide-btn:hover {
+  text-decoration: underline;
+}
+
 .oneko-show-btn {
-  position: fixed; left: 14px; bottom: 14px; z-index: 2147483646;
-  background: #1e1e2e; color: #bac2de; border: 1px solid #313244; border-radius: 999px;
-  padding: 7px 14px; font-size: 0.8rem; cursor: pointer; opacity: 0.85;
-  box-shadow: 0 6px 18px rgba(0,0,0,0.35); font-family: system-ui, sans-serif;
+  position: fixed;
+  left: 14px;
+  bottom: 14px;
+  z-index: 2147483646;
+  background: #1e1e2e;
+  color: #bac2de;
+  border: 1px solid #313244;
+  border-radius: 999px;
+  padding: 7px 14px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  opacity: 0.85;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  font-family: system-ui, sans-serif;
 }
-.oneko-show-btn:hover { opacity: 1; border-color: #cba6f7; color: #cdd6f4; }
-kbd { background:#313244; border:1px solid #585b70; border-bottom-width:2px;
-  border-radius:6px; padding:.05em .45em; font-size:.85em; }
+
+.oneko-show-btn:hover {
+  opacity: 1;
+  border-color: #cba6f7;
+  color: #cdd6f4;
+}
+
+kbd {
+  background: #313244;
+  border: 1px solid #585b70;
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  padding: .05em .45em;
+  font-size: .85em;
+}
+
+.cat-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 4.5rem;
+  transform: translateX(-50%) translateY(8px);
+  z-index: 2147483647;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  background: var(--crust);
+  border: 1px solid var(--pink);
+  color: var(--text);
+  font-size: 0.8rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.cat-toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.cat-picker {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(17, 17, 27, 0.65);
+  backdrop-filter: blur(2px);
+}
+
+.cat-picker[hidden] {
+  display: none;
+}
+
+.cat-picker-panel {
+  width: min(94vw, 430px);
+  max-height: 82vh;
+  overflow-y: auto;
+  background: var(--base);
+  border: 1px solid var(--surface-1);
+  border-radius: 16px;
+  padding: 1rem;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+}
+
+.cat-picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.85rem;
+  font-weight: 700;
+  color: var(--pink);
+}
+
+.cat-picker-close {
+  background: none;
+  border: none;
+  color: var(--subtext-0);
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 0.25rem;
+}
+
+.cat-picker-close:hover {
+  color: var(--text);
+}
+
+.cat-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cat-section-title {
+  margin: 0 0 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mauve);
+  border-bottom: 1px solid var(--surface-1);
+  padding-bottom: 0.3rem;
+}
+
+.cat-section-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.6rem;
+}
+
+.cat-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.75rem 0.4rem 0.6rem;
+  border-radius: 12px;
+  background: var(--surface-0);
+  border: 1px solid var(--surface-1);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.74rem;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.cat-option:hover:not(.locked) {
+  transform: translateY(-2px);
+  border-color: var(--pink);
+}
+
+.cat-option.current {
+  border-color: var(--pink);
+  box-shadow: inset 0 0 0 1px var(--pink);
+}
+
+.cat-option.locked {
+  cursor: default;
+  opacity: 0.75;
+}
+
+.cat-preview {
+  /* 30px window + the -97px,-97px position = the idle frame inset 1px on
+     every side, so no preview can catch pixels from neighbouring frames */
+  width: 30px;
+  height: 30px;
+  margin: 7px 1px 11px;
+  background-repeat: no-repeat;
+  image-rendering: pixelated;
+  transform: scale(1.7);
+  transform-origin: center;
+}
+
+.cat-name {
+  font-weight: 500;
+}
+
+.cat-hint {
+  margin: 0.85rem 0 0;
+  font-size: 0.68rem;
+  color: var(--subtext-0);
+  text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 64b1fb4..3794a9c 100644
--- a/index.html
+++ b/index.html
@@ -1,55 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
-    
+
     <!-- Page Title -->
     <title>Ari</title>
-    
+    <link rel="icon" type="image/png" href="/assets/media/favicon.png" />
+    <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 -->
     <meta name="description" content="Personal Site for Ari on git.gay" />
     <meta name="keywords" content="Portfolio, Personal, Developer" />
     <meta name="author" content="Ari" />
     <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-    
+
     <!-- Canonical URL -->
     <link rel="canonical" href="https://ari.pages.gay" />
-    
+
     <!-- Alternate for mobile -->
     <link rel="alternate" media="only screen and (max-width: 640px)" href="https://ari.pages.gay" />
-  
+
     <!-- Theme Color -->
     <meta name="theme-color" content="#cba6f7" />
 
     <!-- Open Graph / Discord / Facebook -->
+    <meta property="og:image" content="/assets/media/favicon.png" />
     <meta property="og:site_name" content="Ari">
     <meta property="og:title" content="Ari" />
     <meta property="og:description" content="Personal Site for Ari on git.gay" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://ari.pages.gay" />
     <meta property="og:locale" content="en_GB" />
-  
+
     <!-- Twitter Card -->
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="/assets/media/favicon.png">
+    <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>
     <div class="intro">
         <header class="hub-header">
             <img class="pfp" src="assets/media/avatar.png" alt="Ari avatar">
-            <div class="HiIm">Hi, I'm</div> <h1>Ari</h1>
+            <div>
+                <h1 class="hey">Hi, I'm<span class="name">Ari</span></h1>
+            </div>
             <h2 class="pronouns">(She/They)</h2>
             <div class="intro-text">
-                A 17 Year Old developer from <b>England, United Kingdom</b> who rarely actually does development work, and just tries to help out whenever she can.
+                A 17 Year Old developer from <b>England, United Kingdom</b> who rarely actually does development work,
+                and just tries to help out whenever she can.
             </div>
         </header>
-       
+    </div>
+
 </body>
-    <script src="js/index.js"></script>
-    <script src="js/flavors.js"></script>
-    <script src="js/cat.js"></script>
-</html>
+<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
diff --git a/js/cat.js b/js/cat.js
index 1708ed0..3748902 100644
--- a/js/cat.js
+++ b/js/cat.js
@@ -86,7 +86,7 @@
   };
 
   function init() {
-    let nekoFile = "./oneko.gif"
+    let nekoFile = "/assets/oneko/classics/classic.png"
     const curScript = document.currentScript
     if (curScript && curScript.dataset.cat) {
       nekoFile = curScript.dataset.cat