diff --git a/social_links/links/static/cover.css b/social_links/links/static/cover.css
new file mode 100644
index 0000000..83eb249
--- /dev/null
+++ b/social_links/links/static/cover.css
@@ -0,0 +1,79 @@
+/*
+ * Globals
+ */
+
+
+/* Custom default button */
+.btn-light,
+.btn-light:hover,
+.btn-light:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritance from `body` */
+}
+
+
+/*
+ * Base structure
+ */
+
+body {
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+
+.cover-container {
+  max-width: 42em;
+}
+
+
+/*
+ * Header
+ */
+
+.nav-masthead .nav-link {
+  color: rgba(255, 255, 255, .5);
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+.cover-heading img {
+  border-radius: 32%;
+  -webkit-box-shadow: 0 8px 6px -6px black;
+  -moz-box-shadow: 0 8px 6px -6px black;
+  box-shadow: 0 8px 6px -6px black;
+}
+
+@media (min-width: 48em) {
+  .masthead-brand {
+    float: left;
+    /* margin-top: -2rem; */
+    /* margin-left: -8rem; */
+    margin-top: -2.5rem;
+    margin-left: -4rem;
+  }
+}
+
+.masthead-brand {
+  margin-bottom: 0;
+}
+
+.masthead-brand img {
+  width: 12rem;
+}
+
+main {
+  margin-top: -5.5rem;
+}
diff --git a/social_links/links/templates/links/index.html b/social_links/links/templates/links/index.html
new file mode 100644
index 0000000..0de7be2
--- /dev/null
+++ b/social_links/links/templates/links/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" class="h-100">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="{{ author }}" />
+    <title>{{ title }}</title>
+    <link rel="icon" type="image/png" href="{{ favicon }}" />
+
+    {% load django_bootstrap5 %}
+    {% bootstrap_css %}
+
+    {% load static %}
+    <link href="{% static 'cover.css' %}" rel="stylesheet">
+</head>
+<body class="d-flex h-100 text-center text-bg-dark">
+
+    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+        <header class="mb-auto">
+            <div>
+                <h3 class="masthead-brand float-md-start mb-0"><a href="https://c0de.fox.pet"><img style="width: 12rem;" src="https://c0defox.es/paw-tail.svg" /></a></h3>
+                <nav class="nav nav-masthead justify-content-center float-md-end">
+                    <a class="nav-link fw-bold py-1 px-0 active" href="https://c0defox.es"><i class="fas fa-home"></i> Home</a>
+                    <a class="nav-link fw-bold py-1 px-0" href="https://storage.c0de.cloud" title="Personal cloud"><i class="fal fa-cloud"></i> c0de.cloud</a>
+                    <a class="nav-link fw-bold py-1 px-0" href="https://lob.li" title="Link Shortener"><i class="fas fa-compress-alt"></i> lob.li</a>
+                    <a class="nav-link fw-bold py-1 px-0" href="https://xn--l3h7012o.ws" title="foxcloud :3">🦊☁️</a>
+                </nav>
+            </div>
+        </header>
+
+        {% bootstrap_alert "Something went wrong" alert_type="danger" %}
+
+        <main role="main" class="px-3">
+            <h1 class="cover-heading"><a href="https://c0de.fox.pet"><img src="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d?s=200" /></a></h1>
+            <h1 class="cover-heading">c0de</h1>
+            <p class="lead">Some weird fox on the internet</p>
+            <p class="lead"></p>
+            <p class="lead">Here's some ways to get in touch with me</p>
+            <p class="lead">
+                <a href="https://teitter.com/foxyc0de" class="btn btn-secondary"><i class="bi bi-twitter"></i> Twitter</a>
+                <a href="https://t.me/c0defox" class="btn btn-secondary"><i class="bi bi-telegram"></i> Telegram</a>
+                <a href="https://github.com/alopexc0de" class="btn btn-secondary"><i class="bi bi-github"></i> Github</a>
+                <a href="https://keybase.io/alopexc0de" class="btn btn-secondary"><i class="bi bi-keycdn"></i> Keybase</a>
+                <a href="https://www.reddit.com/user/alopexc0de" class="btn btn-secondary"><i class="bi bi-reddit"></i> Reddit</a>
+                <a href="https://discord.com/users/c0de#0689" class="btn btn-secondary"><i class="bi bi-discord"></i> Discord</a>
+                <a href="http://steamcommunity.com/id/c0defox" class="btn btn-secondary"><i class="bi bi-steam"></i> Steam</a>
+            </p>
+        </main>
+
+        <footer class="mt-auto text-white-50">
+            <p>I'm apparently unique enough to have a name that others don't; ask one of my known accounts if unsure.</p>
+        </footer>
+    </div>
+
+    {% bootstrap_javascript %}
+</body>
+</html>
