diff --git a/views/assets/88x31/esoteric/gnu-linux.gif b/views/assets/88x31/esoteric/gnu-linux.gif
new file mode 100644
index 0000000..89e3562
Binary files /dev/null and b/views/assets/88x31/esoteric/gnu-linux.gif differ
diff --git a/views/assets/88x31/esoteric/html.gif b/views/assets/88x31/esoteric/html.gif
new file mode 100644
index 0000000..dd832a0
Binary files /dev/null and b/views/assets/88x31/esoteric/html.gif differ
diff --git a/views/assets/88x31/esoteric/vivaldi.gif b/views/assets/88x31/esoteric/vivaldi.gif
new file mode 100644
index 0000000..ba52da7
Binary files /dev/null and b/views/assets/88x31/esoteric/vivaldi.gif differ
diff --git a/views/assets/88x31/esoteric/xkcd.gif b/views/assets/88x31/esoteric/xkcd.gif
new file mode 100644
index 0000000..f484402
Binary files /dev/null and b/views/assets/88x31/esoteric/xkcd.gif differ
diff --git a/views/assets/88x31/freeplay_floof_company.png b/views/assets/88x31/freeplay_floof_company.png
new file mode 100644
index 0000000..5fbaf74
Binary files /dev/null and b/views/assets/88x31/freeplay_floof_company.png differ
diff --git a/views/assets/88x31/invoxiplaygames_uk.png b/views/assets/88x31/invoxiplaygames_uk.png
new file mode 100644
index 0000000..e64f0ab
Binary files /dev/null and b/views/assets/88x31/invoxiplaygames_uk.png differ
diff --git a/views/assets/88x31/ioletsgo_gay.gif b/views/assets/88x31/ioletsgo_gay.gif
new file mode 100644
index 0000000..8edb51c
Binary files /dev/null and b/views/assets/88x31/ioletsgo_gay.gif differ
diff --git a/views/assets/88x31/mae_wtf.png b/views/assets/88x31/mae_wtf.png
new file mode 100644
index 0000000..7a30c3d
Binary files /dev/null and b/views/assets/88x31/mae_wtf.png differ
diff --git a/views/assets/88x31/micro_pages_gay.png b/views/assets/88x31/micro_pages_gay.png
new file mode 100644
index 0000000..0c00824
Binary files /dev/null and b/views/assets/88x31/micro_pages_gay.png differ
diff --git a/views/assets/88x31/sneexy_pages_gay.gif b/views/assets/88x31/sneexy_pages_gay.gif
new file mode 100644
index 0000000..166ebf4
Binary files /dev/null and b/views/assets/88x31/sneexy_pages_gay.gif differ
diff --git a/views/assets/88x31/whois_slipfox_xyz.png b/views/assets/88x31/whois_slipfox_xyz.png
new file mode 100644
index 0000000..29e5e90
Binary files /dev/null and b/views/assets/88x31/whois_slipfox_xyz.png differ
diff --git a/views/assets/bg.jpg b/views/assets/bg.jpg
new file mode 100644
index 0000000..175cda8
Binary files /dev/null and b/views/assets/bg.jpg differ
diff --git a/views/branding/index.html b/views/branding/index.html
index 58c8406..f3dcd7b 100644
--- a/views/branding/index.html
+++ b/views/branding/index.html
@@ -7,10 +7,6 @@
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/style.css" />
     <style>
-      :root {
-        --base-color: 0, 0%;
-      }
-
       .chip {
         background-color: var(--mainColor);
         display: inline-block;
diff --git a/views/domain/index.html b/views/domain/index.html
index bf4c09f..c5f4ba3 100644
--- a/views/domain/index.html
+++ b/views/domain/index.html
@@ -6,11 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/style.css" />
-    <style>
-      :root {
-        --base-color: 15, 100%;
-      }
-    </style>
+    <style></style>
   </head>
   <body>
     <$ loader.html $>
diff --git a/views/index.html b/views/index.html
index 38c7fd7..a052fe4 100755
--- a/views/index.html
+++ b/views/index.html
@@ -7,23 +7,62 @@
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/windows.css" />
     <link rel="stylesheet" href="/styles/style.css" />
+    <link rel="stylesheet" href="./styles/buttonroll.css" />
     <style>
-      :root {
-        --base-color: 195, 100%;
+      .header {
+        width: 100%;
+        aspect-ratio: 3 / 1;
+        background: url("/assets/bg.jpg");
+        background-position: center;
+        background-size: cover;
+        text-align: center;
+        color: white;
+        text-shadow: 0 0.1em 0.5em black;
+        box-shadow: 0 0 1em var(--accent-color);
+        font-size: 1.5em;
+        border-radius: 2rem;
+
+        overflow: hidden;
+
+        display: grid;
+        align-items: center;
+        justify-content: center;
+
+        margin: 0.5em 0;
+        margin-bottom: 1em;
+        user-select: none;
+      }
+      .header h1 {
+        line-height: 1em;
+        margin-bottom: 0.35em;
+        border: none;
+        padding: 0;
+      }
+      .horizontal {
+        display: grid;
+        grid-auto-flow: column;
+        gap: 1em;
       }
     </style>
   </head>
   <body>
     <header>
-      <section>
-        <h1>ABTMTR.LINK</h1>
+      <section class="header" title="Image attribution: Celeste">
+        <div>
+          <small>⸻ welcome to ⸻</small>
+          <h1>ABTMTR.LINK</h1>
+        </div>
       </section>
       <$ nav.html $>
       <section id="accessibility" hidden></section>
+      <div id="buttonroll" hidden></div>
     </header>
     <main>
       <section>
-        <h2>Welcome! 👋</h2>
+        <h1>
+          Hey!
+          <span class="rs">👋</span>
+        </h1>
         <section id="data_whoami">
           <p>
             I'm...
@@ -48,16 +87,19 @@
             ></small
           >
         </p>
+        <button id="buttonflags" disabled>Cool Flags</button>
+      </section>
+      <section class="horizontal">
+        <section id="status"></section>
+        <section id="about"></section>
       </section>
-      <section id="status"></section>
-      <section id="about"></section>
-      <button id="buttonflags" disabled>Cool Flags</button>
       <section id="fields"></section>
     </main>
     <div id="WindowHolder"></div>
     <script src="/scripts/windows.js"></script>
     <script src="/scripts/accessibility.js"></script>
     <script src="./scripts/data_get_whoami.js"></script>
+    <script src="./scripts/roll_buttons.js"></script>
     <script src="/projects/item/hex/scripts/index.js"></script>
     <script>
       window.manager = new WindowManager(
diff --git a/views/links/index.html b/views/links/index.html
index 93026da..c553b2c 100644
--- a/views/links/index.html
+++ b/views/links/index.html
@@ -6,11 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/style.css" />
-    <style>
-      :root {
-        --base-color: 270, 100%;
-      }
-    </style>
+    <style></style>
   </head>
   <body>
     <$ loader.html $>
diff --git a/views/projects/index.html b/views/projects/index.html
index 3bd30b1..30bf7fa 100755
--- a/views/projects/index.html
+++ b/views/projects/index.html
@@ -7,11 +7,7 @@
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/windows.css" />
     <link rel="stylesheet" href="/styles/style.css" />
-    <style>
-      :root {
-        --base-color: 15, 100%;
-      }
-    </style>
+    <style></style>
   </head>
   <body>
     <$ loader.html $>
diff --git a/views/scripts/accessibility.js b/views/scripts/accessibility.js
index c6c5c6a..71110f6 100755
--- a/views/scripts/accessibility.js
+++ b/views/scripts/accessibility.js
@@ -13,7 +13,7 @@ var accBase;
 var propagateStyles = propagateStyles ?? null;
 
 const FONTS = [
-  ["Lexend Deca"],
+  ["Lexend Deca", ""],
   ["Renogare"],
   ["OpenDyslexic"],
   // ["Mojangles", "Minecraft"],
@@ -265,6 +265,7 @@ function changeWidth(width) {
 
 function changeFont(font) {
   document.documentElement.style.setProperty("--font-family", font);
+  document.documentElement.style.setProperty("--header-font-family", font);
 }
 
 const baseColor = getComputedStyle(document.documentElement)
diff --git a/views/scripts/roll_buttons.js b/views/scripts/roll_buttons.js
new file mode 100644
index 0000000..56cd5ab
--- /dev/null
+++ b/views/scripts/roll_buttons.js
@@ -0,0 +1,106 @@
+const buttonroll = document.getElementById("buttonroll");
+const buttons = [
+  {
+    href: "https://freeplay.floof.company/",
+    img: "/assets/88x31/freeplay_floof_company.png",
+    alt: "freeplay.floof.company",
+  },
+  {
+    href: "https://invoxiplaygames.uk/",
+    img: "/assets/88x31/invoxiplaygames_uk.png",
+    alt: "invoxiplaygames.uk",
+  },
+  {
+    href: "https://ioletsgo.gay/",
+    img: "/assets/88x31/ioletsgo_gay.gif",
+    alt: "ioletsgo.gay",
+  },
+  {
+    href: "https://mae.wtf/",
+    img: "/assets/88x31/mae_wtf.png",
+    alt: "mae.wtf",
+  },
+  {
+    href: "https://micro.pages.gay/",
+    img: "/assets/88x31/micro_pages_gay.png",
+    alt: "micro.pages.gay",
+  },
+  {
+    href: "https://sneexy.pages.gay/",
+    img: "/assets/88x31/sneexy_pages_gay.gif",
+    alt: "sneexy.pages.gay",
+  },
+  {
+    href: "https://whois.slipfox.xyz/",
+    img: "/assets/88x31/whois_slipfox_xyz.png",
+    alt: "whois.slipfox.xyz",
+  },
+  {
+    href: "https://ultramarine-linux.org/",
+    img: "/assets/88x31/esoteric/gnu-linux.gif",
+    alt: "Made on GNU/Linux",
+  },
+  {
+    href: "https://abtmtr.link/projects/item/normalize",
+    img: "/assets/88x31/esoteric/html.gif",
+    alt: "<HTML> - Learn it today!",
+  },
+  {
+    href: "https://vivaldi.com",
+    img: "/assets/88x31/esoteric/vivaldi.gif",
+    alt: "I use Vivaldi",
+  },
+  {
+    href: "https://channelstore.roku.com/details/7da3fa0c2209746730df8a4e21e83b02",
+    img: "/assets/88x31/esoteric/xkcd.gif",
+    alt: "xkcd",
+  },
+];
+
+function initializeButtons() {
+  buttonroll.innerHTML += buttons.reduce(
+    (pv, cv) =>
+      pv +
+      `<a href="${cv.href}" target="_blank"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
+    ""
+  );
+}
+
+buttonroll.hidden = false;
+overflowButtons();
+initializeButtons();
+overflowButtons();
+overflowButtons();
+
+function overflowButtons() {
+  buttonroll.innerHTML += buttons.reduce(
+    (pv, cv) =>
+      pv +
+      `<a href="${cv.href}" target="_blank" class="overflow"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
+    ""
+  );
+}
+
+let isHovering = false;
+buttonroll.addEventListener("mouseenter", () => (isHovering = true));
+buttonroll.addEventListener("mouseleave", () => (isHovering = false));
+
+let curAnim;
+let endTime = performance.now();
+let unit = 88;
+let gap = 8;
+let scrollX = (unit + gap) * buttons.length * 2;
+let speed = 50;
+let max = (unit + gap) * buttons.length;
+function scrollButtons(startTime) {
+  let deltaTime = (startTime - endTime) / 1000;
+
+  if (!isHovering) {
+    scrollX += speed * deltaTime;
+  } else scrollX = buttonroll.scrollLeft;
+  buttonroll.scrollLeft = (scrollX % max) + max;
+
+  endTime = startTime;
+  curAnim = window.requestAnimationFrame(scrollButtons);
+}
+curAnim = window.requestAnimationFrame(scrollButtons);
diff --git a/views/site/index.html b/views/site/index.html
index ab6138d..1270d01 100644
--- a/views/site/index.html
+++ b/views/site/index.html
@@ -6,11 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
     <link rel="stylesheet" href="/styles/style.css" />
-    <style>
-      :root {
-        --base-color: 125, 100%;
-      }
-    </style>
+    <style></style>
   </head>
   <body>
     <header>
diff --git a/views/styles/buttonroll.css b/views/styles/buttonroll.css
new file mode 100644
index 0000000..f8be730
--- /dev/null
+++ b/views/styles/buttonroll.css
@@ -0,0 +1,27 @@
+#buttonroll {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  gap: 8px;
+  max-width: 50em;
+  margin: auto;
+}
+#buttonroll img {
+  display: inline-block;
+  width: 88px;
+  height: 31px;
+  max-width: none;
+}
+
+/* #buttonroll .overflow {
+  opacity: 0.5;
+} */
+
+#buttonroll::-webkit-scrollbar {
+  display: none;
+}
+
+#buttonroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
diff --git a/views/styles/style.css b/views/styles/style.css
index 5004d09..e4802b9 100644
--- a/views/styles/style.css
+++ b/views/styles/style.css
@@ -19,7 +19,12 @@
   src: url("/assets/fonts/OpenDyslexic/Regular.otf");
 }
 :root {
+  --header-font-family: "Renogare";
+  --header-font-weight: 400;
   --font-family: "Lexend Deca";
+  --border-width: calc(2rem / 16);
+  --base-color: 311, 32%;
+  --border-radius: calc(4rem / 16);
 }
 
 #accessibility {
@@ -61,3 +66,18 @@ html.base .nav {
 html.base .nav p a {
   text-align: start;
 }
+
+h1,
+h2 {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  padding-bottom: 0.25em;
+}
+
+h1 a,
+h2 a {
+  text-decoration: none !important;
+}
+
+.rs {
+  float: inline-end;
+}
