diff --git a/public/catppuccin.png b/public/catppuccin.png
new file mode 100644
index 0000000..7d29e39
Binary files /dev/null and b/public/catppuccin.png differ
diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg
new file mode 100644
index 0000000..5d8d258
--- /dev/null
+++ b/src/assets/icons/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M3.283 10.94a1.5 1.5 0 0 0 0 2.12l5.656 5.658a1.5 1.5 0 1 0 2.122-2.122L7.965 13.5H19.5a1.5 1.5 0 0 0 0-3H7.965l3.096-3.096a1.5 1.5 0 1 0-2.122-2.121z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
new file mode 100644
index 0000000..c5f4517
--- /dev/null
+++ b/src/assets/icons/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="m15.06 5.283l5.657 5.657a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 0 1-2.122-2.122l3.096-3.096H4.5a1.5 1.5 0 0 1 0-3h11.535L12.94 7.404a1.5 1.5 0 0 1 2.122-2.121Z"/></g></svg>
\ No newline at end of file
diff --git a/src/components/Webring.astro b/src/components/Webring.astro
new file mode 100644
index 0000000..4a873da
--- /dev/null
+++ b/src/components/Webring.astro
@@ -0,0 +1,29 @@
+---
+import ArrowRightIcon from "../assets/icons/arrow-right.svg";
+import ArrowLeftIcon from "../assets/icons/arrow-left.svg";
+---
+
+<div class="w-full flex justify-center items-center">
+	<a href="https://ctp-webr.ing/trafficlunar/previous">
+		<ArrowLeftIcon
+			class="size-10.5 p-2 origin-right hover:scale-110 transition-all duration-300"
+			style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
+		/>
+	</a>
+
+	<a data-tooltip="Catppuccin Webring" href="https://ctp-webr.ing/">
+		<img
+			src="catppuccin.png"
+			alt="catppuccin webring"
+			class="size-12 opacity-65 hover:scale-110 transition-all duration-300"
+			style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
+		/>
+	</a>
+
+	<a href="https://ctp-webr.ing/trafficlunar/next">
+		<ArrowRightIcon
+			class="size-10.5 p-2 origin-left hover:scale-110 transition-all duration-300"
+			style="transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);"
+		/>
+	</a>
+</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f86c5cd..ed8adcf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,6 +7,7 @@ import "../style.css";
 import Socials from "../components/Socials.astro";
 import Clock from "../components/Clock.svelte";
 import Online from "../components/Online.svelte";
+import Webring from "../components/Webring.astro";
 import Header from "../components/Header.svelte";
 import Footer from "../components/Footer.astro";
 
@@ -39,19 +40,23 @@ import Lunar from "../assets/lunar.svg";
 		<Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
 
 		<div class="max-w-4xl w-full grid grid-cols-5 gap-4 py-8 max-[60rem]:grid-cols-1">
-			<div class="flex flex-col items-center gap-8 max-[60rem]:flex-row max-[60rem]:justify-center flex-wrap" transition:persist>
+			<div
+				class="flex flex-col max-[32rem]:flex-row lg:flex-col items-center gap-6 sm:gap-8 lg:gap-8 justify-center md:justify-start"
+				transition:persist
+			>
 				<a href="/">
 					<img
 						src="/pfp.png"
 						alt="profile picture"
-						class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40"
+						class="rounded-full animate-spin animate-duration-2s hover:animate-running not-hover:animate-pause max-h-40 max-w-40"
 					/>
 				</a>
 
-				<div class="flex flex-col flex-wrap justify-center w-full max-[60rem]:flex-row max-[60rem]:mt-0 max-[60rem]:gap-2">
+				<div class="flex flex-row sm:flex-row lg:flex-col flex-wrap justify-center items-start gap-2 sm:gap-3 lg:gap-0 w-auto lg:w-full lg:max-w-40">
 					<Socials />
 					<Clock client:only />
 					<Online client:only />
+					<Webring />
 				</div>
 			</div>