diff --git a/public/style/index.css b/public/style/index.css
index b970c17..8e20435 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -332,3 +332,31 @@ div#web-buttons {
 .live-viewers {
     opacity: .5;
 }
+
+.webring {
+    display: flex;
+    flex-direction: row;
+}
+.webring a {
+    border: 1px solid var(--links);
+    height: 1.5em;
+    padding: 0 0.5em;
+    text-align: center;
+    line-height: 1.7em;
+    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
+}
+.webring a:nth-child(1) {
+    border-radius: 2px 0 0 2px;
+    border-right: none;
+}
+.webring a:nth-child(3) {
+    border-radius: 0 2px 2px 0;
+    border-left: none;
+}
+.webring a:hover {
+    color: #eee;
+    border-color: #eee;
+    background-color: var(--links) !important;
+    text-decoration: none;
+    box-shadow: 0 0 1em var(--links);
+}
diff --git a/templates/html/index.html b/templates/html/index.html
index 5255196..fbe1b18 100644
--- a/templates/html/index.html
+++ b/templates/html/index.html
@@ -273,5 +273,15 @@
         </a>
         <img src="/img/buttons/misc/blink.gif" alt="closeup anime blink" width="88" height="31">
     </div>
+
+    <h2 class="typeout">
+        ## webring
+    </h2>
+
+    <div class="webring">
+        <a href="https://melon-ring.pathetic.systems/arimelody/previous">◀</a>
+        <a href="https://melon-ring.pathetic.systems">melon-ring</a>
+        <a href="https://melon-ring.pathetic.systems/arimelody/next">▶</a>
+    </div>
 </main>
 {{end}}