diff --git a/public/88x31.gif b/public/88x31.gif
new file mode 100644
index 0000000..01ef318
Binary files /dev/null and b/public/88x31.gif differ
diff --git a/public/88x31/7zip.gif b/public/88x31/7zip.gif
new file mode 100644
index 0000000..b44c2a9
Binary files /dev/null and b/public/88x31/7zip.gif differ
diff --git a/public/88x31/any88x31.gif b/public/88x31/any88x31.gif
new file mode 100644
index 0000000..a52935e
Binary files /dev/null and b/public/88x31/any88x31.gif differ
diff --git a/public/88x31/aperture.jpg b/public/88x31/aperture.jpg
new file mode 100644
index 0000000..6547d9f
Binary files /dev/null and b/public/88x31/aperture.jpg differ
diff --git a/public/88x31/archive.gif b/public/88x31/archive.gif
new file mode 100644
index 0000000..fd40751
Binary files /dev/null and b/public/88x31/archive.gif differ
diff --git a/public/88x31/archlinux.gif b/public/88x31/archlinux.gif
new file mode 100644
index 0000000..6fcc440
Binary files /dev/null and b/public/88x31/archlinux.gif differ
diff --git a/public/88x31/astro.png b/public/88x31/astro.png
new file mode 100644
index 0000000..8c7b4ef
Binary files /dev/null and b/public/88x31/astro.png differ
diff --git a/public/88x31/blends.gif b/public/88x31/blends.gif
new file mode 100644
index 0000000..f26fa25
Binary files /dev/null and b/public/88x31/blends.gif differ
diff --git a/public/88x31/button-flexbox.gif b/public/88x31/button-flexbox.gif
new file mode 100644
index 0000000..12efcf1
Binary files /dev/null and b/public/88x31/button-flexbox.gif differ
diff --git a/public/88x31/computer.jpg b/public/88x31/computer.jpg
new file mode 100644
index 0000000..732e607
Binary files /dev/null and b/public/88x31/computer.jpg differ
diff --git a/public/88x31/dream.gif b/public/88x31/dream.gif
new file mode 100644
index 0000000..28fd2c2
Binary files /dev/null and b/public/88x31/dream.gif differ
diff --git a/public/88x31/firefox.png b/public/88x31/firefox.png
new file mode 100644
index 0000000..06cfaa3
Binary files /dev/null and b/public/88x31/firefox.png differ
diff --git a/public/88x31/got_html.gif b/public/88x31/got_html.gif
new file mode 100644
index 0000000..f713730
Binary files /dev/null and b/public/88x31/got_html.gif differ
diff --git a/public/88x31/homer.gif b/public/88x31/homer.gif
new file mode 100644
index 0000000..b4d17f6
Binary files /dev/null and b/public/88x31/homer.gif differ
diff --git a/public/88x31/jellyfin.gif b/public/88x31/jellyfin.gif
new file mode 100644
index 0000000..90c48fb
Binary files /dev/null and b/public/88x31/jellyfin.gif differ
diff --git a/public/88x31/linux.gif b/public/88x31/linux.gif
new file mode 100644
index 0000000..89e3562
Binary files /dev/null and b/public/88x31/linux.gif differ
diff --git a/public/88x31/love_blahaj.gif b/public/88x31/love_blahaj.gif
new file mode 100644
index 0000000..0ceea38
Binary files /dev/null and b/public/88x31/love_blahaj.gif differ
diff --git a/public/88x31/miku.gif b/public/88x31/miku.gif
new file mode 100644
index 0000000..106c982
Binary files /dev/null and b/public/88x31/miku.gif differ
diff --git a/public/88x31/miku2.gif b/public/88x31/miku2.gif
new file mode 100644
index 0000000..8eec34f
Binary files /dev/null and b/public/88x31/miku2.gif differ
diff --git a/public/88x31/nyan.gif b/public/88x31/nyan.gif
new file mode 100644
index 0000000..b16ce86
Binary files /dev/null and b/public/88x31/nyan.gif differ
diff --git a/public/88x31/plasticlove.gif b/public/88x31/plasticlove.gif
new file mode 100644
index 0000000..3f23dcc
Binary files /dev/null and b/public/88x31/plasticlove.gif differ
diff --git a/public/88x31/qbittorrent.png b/public/88x31/qbittorrent.png
new file mode 100644
index 0000000..28d16fb
Binary files /dev/null and b/public/88x31/qbittorrent.png differ
diff --git a/public/88x31/responsive.png b/public/88x31/responsive.png
new file mode 100644
index 0000000..1ded64f
Binary files /dev/null and b/public/88x31/responsive.png differ
diff --git a/public/88x31/righttorepair.gif b/public/88x31/righttorepair.gif
new file mode 100644
index 0000000..a65eedf
Binary files /dev/null and b/public/88x31/righttorepair.gif differ
diff --git a/public/88x31/sites/daudix.gif b/public/88x31/sites/daudix.gif
new file mode 100644
index 0000000..9753c0d
Binary files /dev/null and b/public/88x31/sites/daudix.gif differ
diff --git a/public/88x31/sites/reduc_anim.gif b/public/88x31/sites/reduc_anim.gif
new file mode 100644
index 0000000..d9e25c8
Binary files /dev/null and b/public/88x31/sites/reduc_anim.gif differ
diff --git a/public/88x31/sourcemissing.gif b/public/88x31/sourcemissing.gif
new file mode 100644
index 0000000..783eb78
Binary files /dev/null and b/public/88x31/sourcemissing.gif differ
diff --git a/public/88x31/stardew-valley.gif b/public/88x31/stardew-valley.gif
new file mode 100644
index 0000000..0abb64b
Binary files /dev/null and b/public/88x31/stardew-valley.gif differ
diff --git a/public/88x31/tom-scott.webp b/public/88x31/tom-scott.webp
new file mode 100644
index 0000000..ac409a1
Binary files /dev/null and b/public/88x31/tom-scott.webp differ
diff --git a/public/88x31/ublock.png b/public/88x31/ublock.png
new file mode 100644
index 0000000..c82555b
Binary files /dev/null and b/public/88x31/ublock.png differ
diff --git a/public/88x31/vscodium.gif b/public/88x31/vscodium.gif
new file mode 100644
index 0000000..6b3d217
Binary files /dev/null and b/public/88x31/vscodium.gif differ
diff --git a/public/88x31/wii.gif b/public/88x31/wii.gif
new file mode 100644
index 0000000..5a95203
Binary files /dev/null and b/public/88x31/wii.gif differ
diff --git a/public/88x31/xp.gif b/public/88x31/xp.gif
new file mode 100644
index 0000000..a5e7e0d
Binary files /dev/null and b/public/88x31/xp.gif differ
diff --git a/public/88x31_alt.gif b/public/88x31_alt.gif
new file mode 100644
index 0000000..1a3362a
Binary files /dev/null and b/public/88x31_alt.gif differ
diff --git a/src/components/88x31.svelte b/src/components/88x31.svelte
new file mode 100644
index 0000000..806da67
--- /dev/null
+++ b/src/components/88x31.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	const coolSites = [
+		{ href: "https://melankorin.net/", src: "https://melankorin.net/assets/img/buttons/button-1.gif" },
+		{ href: "https://ellenthekat.nekoweb.org", src: "https://ellenthekat.nekoweb.org/Images/oc%20headshot%20style.png" },
+		{ href: "https://dimden.dev/", src: "https://dimden.dev/services/images/88x31.gif" },
+		{ href: "https://daudix.one", src: "/88x31/sites/daudix.gif" },
+		{ href: "https://reduxflakes.nekoweb.org/", src: "/88x31/sites/reduc_anim.gif" },
+	];
+
+	const miscButtons = [
+		{ href: "https://www.7-zip.org/", src: "/88x31/7zip.gif" },
+		{ href: "https://ec.crypton.co.jp/pages/prod/virtualsinger/cv01_us", src: "/88x31/miku.gif" },
+		{ href: "https://ublockorigin.com/", src: "/88x31/ublock.png" },
+		{ src: "/88x31/xp.gif" },
+		{ src: "/88x31/dream.gif" },
+		{ href: "https://astro.build/", src: "/88x31/astro.png" },
+		{ href: "https://jellyfin.org/", src: "/88x31/jellyfin.gif" },
+		{ href: "https://www.qbittorrent.org/", src: "/88x31/qbittorrent.png" },
+		{ src: "/88x31/responsive.png" },
+		{ src: "/88x31/any88x31.gif" },
+		{ src: "/88x31/aperture.jpg" },
+		{ href: "https://archive.org/", src: "/88x31/archive.gif" },
+		{ src: "/88x31/blends.gif" },
+		{ src: "/88x31/button-flexbox.gif" },
+		{ src: "/88x31/computer.jpg" },
+		{ href: "https://www.firefox.com/en-US/", src: "/88x31/firefox.png" },
+		{ src: "/88x31/got_html.gif" },
+		{ src: "/88x31/homer.gif" },
+		{ src: "/88x31/linux.gif" },
+		{ src: "/88x31/love_blahaj.gif" },
+		{ src: "/88x31/nyan.gif" },
+		{ src: "/88x31/righttorepair.gif" },
+		{ src: "/88x31/sourcemissing.gif" },
+		{ src: "/88x31/stardew-valley.gif" },
+		{ src: "/88x31/tom-scott.webp" },
+		{ href: "https://vscodium.com/", src: "/88x31/vscodium.gif" },
+		{ src: "/88x31/wii.gif" },
+		{ src: "/88x31/plasticlove.gif" },
+	];
+
+	const imgStyle = "image-rendering: crisp-edges;";
+</script>
+
+<div class="flex items-center gap-4 text-overlay2 text-sm font-medium my-4">
+	<hr class="grow border-surface0" />
+	<span>cool sites</span>
+	<hr class="grow border-surface0" />
+</div>
+
+<div class="button-container">
+	{#each coolSites as { href, src }}
+		<div>
+			{#if href}
+				<a target="_blank" {href}><img {src} width="88" height="31" alt="button" class="button-88x31" style={imgStyle} /></a>
+			{:else}
+				<img {src} width="88" height="31" alt="button" class="button-88x31" style={imgStyle} />
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<div class="flex items-center gap-4 text-overlay2 text-sm font-medium my-4">
+	<hr class="grow border-surface0" />
+	<span>misc</span>
+	<hr class="grow border-surface0" />
+</div>
+
+<div class="button-container">
+	{#each miscButtons as { href, src }}
+		<div>
+			{#if href}
+				<a target="_blank" {href}><img {src} width="88" height="31" alt="button" class="button-88x31" style={imgStyle} /></a>
+			{:else}
+				<img {src} width="88" height="31" alt="button" class="button-88x31" style={imgStyle} />
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style lang="postcss">
+	.button-container {
+		@apply flex justify-center flex-wrap;
+	}
+
+	.button-container div {
+		@apply hover:z-10;
+	}
+
+	.button-container div:nth-child(odd) .button-88x31 {
+		@apply hover:-rotate-2!;
+	}
+
+	.button-88x31 {
+		@apply hover:scale-125 hover:rotate-2 transition duration-200;
+	}
+
+	.button-container:hover .button-88x31:not(:hover) {
+		@apply opacity-50 brightness-50;
+	}
+</style>
diff --git a/src/components/CopyButton.svelte b/src/components/CopyButton.svelte
new file mode 100644
index 0000000..3738697
--- /dev/null
+++ b/src/components/CopyButton.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { scale } from "svelte/transition";
+
+	let button: HTMLButtonElement;
+	let hasCopied = false;
+
+	function handleCopy() {
+		navigator.clipboard.writeText(
+			'<a href="https://trafficlunar.net/" target="_blank"><img src="https://trafficlunar.net/88x31.gif" alt="trafficlunar" /></a>'
+		);
+		hasCopied = true;
+		button.setAttribute("data-tooltip", "Copied!");
+
+		setTimeout(() => {
+			hasCopied = false;
+			button.setAttribute("data-tooltip", "Copy");
+		}, 1000);
+	}
+</script>
+
+<div class="absolute right-2">
+	<button aria-label="Copy Button Code" data-tooltip="Copy" onclick={handleCopy} bind:this={button} class="cursor-pointer size-5.5">
+		{#if hasCopied}
+			<svg in:scale out:scale xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="absolute top-0 left-0"
+				><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z" /></svg
+			>
+		{:else}
+			<svg in:scale out:scale xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" class="absolute inset-0"
+				><g fill="none"
+					><path
+						fill="currentColor"
+						fill-opacity="0.16"
+						d="M18.6 9h-7.2A2.4 2.4 0 0 0 9 11.4v7.2a2.4 2.4 0 0 0 2.4 2.4h7.2a2.4 2.4 0 0 0 2.4-2.4v-7.2A2.4 2.4 0 0 0 18.6 9"
+					/><path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-miterlimit="10"
+						stroke-width="1.5"
+						d="M6 15h-.6C4.07 15 3 13.93 3 12.6V5.4C3 4.07 4.07 3 5.4 3h7.2C13.93 3 15 4.07 15 5.4V6m-3.6 3h7.2a2.4 2.4 0 0 1 2.4 2.4v7.2a2.4 2.4 0 0 1-2.4 2.4h-7.2A2.4 2.4 0 0 1 9 18.6v-7.2A2.4 2.4 0 0 1 11.4 9"
+					/></g
+				></svg
+			>
+		{/if}
+	</button>
+</div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index a58d963..a47cab2 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,6 +2,7 @@
 	const links = [
 		{ name: "home", url: "/" },
 		{ name: "status", url: "/status/" },
+		{ name: "buttons", url: "/buttons/" },
 	];
 
 	let pathname = $state("/");
@@ -25,11 +26,11 @@
 </script>
 
 <section class="p-1.5! mb-8 w-fit">
-	<div class="relative grid grid-cols-2 gap-1.5">
+	<div class="relative grid grid-cols-3 gap-1.5">
 		<!-- Animated background for active link -->
 		{#if activeIndex !== -1}
 			<div
-				class="absolute inset-0 bg-peach rounded w-[calc((100%/2)-0.25rem)] pointer-events-none z-10 transition-all duration-300 ease-out"
+				class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] pointer-events-none z-10 transition-all duration-300 ease-out"
 				style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem)) {isTransitioning ? 'scale(1.1)' : 'scale(1)'};"
 			></div>
 		{/if}
diff --git a/src/pages/buttons.astro b/src/pages/buttons.astro
new file mode 100644
index 0000000..701a8c0
--- /dev/null
+++ b/src/pages/buttons.astro
@@ -0,0 +1,40 @@
+---
+import Layout from "../layouts/Layout.astro";
+import CopyButton from "../components/CopyButton.svelte";
+import EightyEightyThirtyOne from "../components/88x31.svelte";
+---
+
+<Layout>
+	<section
+		class="mb-0! transition-all duration-300 delay-100 starting:opacity-0 starting:translate-y-4 text-[0.938rem] [&_img]:w-[88px] [&_img]:h-[31px]"
+	>
+		<legend>buttons</legend>
+
+		<p class="mb-1">
+			Welcome to my collection of 88x31 buttons, containing cool websites or just random buttons. Get my button below, hotlinking is perfectly fine:
+		</p>
+
+		<div class="flex">
+			<a href="https://trafficlunar.net/" target="_blank" class="shrink-0 mt-2 mr-2 h-min"
+				><img src="/88x31.gif" width="88" height="31" alt="trafficlunar" /></a
+			>
+
+			<div class="bg-mantle p-2.5 rounded-lg relative border border-surface0/75 shadow-sm mt-2">
+				<CopyButton client:load />
+
+				<code class="text-sm font-mono" style="font-variant-ligatures: none;">
+					<span class="text-teal">{"<"}</span><span class="text-blue">a</span>
+					<span class="text-yellow">href</span><span class="text-teal">=</span><span class="text-green">{'"https://trafficlunar.net/"'}</span>
+					<span class="text-yellow">target</span><span class="text-teal">=</span><span class="text-green">{'"_blank"'}</span><span class="text-teal"
+						>{"><"}</span
+					><span class="text-blue">img</span>
+					<span class="text-yellow">src</span><span class="text-teal">=</span><span class="text-green">{'"https://trafficlunar.net/88x31.gif"'}</span>
+					<span class="text-yellow">alt</span><span class="text-teal">=</span><span class="text-green">{'"trafficlunar"'}</span>
+					<span class="text-teal">{"/></"}</span><span class="text-blue">a</span><span class="text-teal">{">"}</span>
+				</code>
+			</div>
+		</div>
+
+		<EightyEightyThirtyOne />
+	</section>
+</Layout>