diff --git a/static/css/layout.css b/static/css/layout.css
index a00a62c..f555ba4 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -6,6 +6,7 @@ body {
 
 body {
   display: flex;
+  flex-direction: column;
 
   min-height: 100vh;
   align-items: center;
@@ -67,3 +68,8 @@ h3 {
 p {
   margin: 0.5em 0;
 }
+
+.webring-container {
+  margin-top: 1em;
+  width: calc(60ch + 2em);
+}
diff --git a/static/index.html b/static/index.html
index ae50622..91d75cc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -15,6 +15,11 @@
 
     <link rel="stylesheet" href="/inter/inter.css" />
 
+    <link
+      rel="stylesheet"
+      href="https://lavender.software/webring/webring-0.2.0.css"
+    />
+
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://char.lt" />
     <meta property="og:title" content="charlotte ✨" />
@@ -33,7 +38,7 @@
   </head>
 
   <body>
-    <div class="page-wrapper">
+    <article class="page-wrapper">
       <header>
         <aside>
           <h1><abbr title="charlotte athena som">charlotte ✨</abbr></h1>
@@ -133,6 +138,15 @@
       </main>
 
       <footer>a site by <a href="https://som.codes">charlotte som</a></footer>
-    </div>
+    </article>
+
+    <article class="webring-container">
+      <script
+        src="https://lavender.software/webring/webring-0.2.0.js"
+        data-site-id="charlotte"
+        crossorigin="anonymous"
+        integrity="sha512-wWgLGI60d62wrvLSoSeA3zLAUl8QeWjwVshCY7QYaWai6Mrt/4ar1E5ET4SvJ8yFU3Vmb5uVsmA8auRNQQyEXg=="
+      ></script>
+    </article>
   </body>
 </html>
