diff --git a/tem/html/pages/about.html b/tem/html/pages/about.html
new file mode 100644
index 0000000..fcbf2e5
--- /dev/null
+++ b/tem/html/pages/about.html
@@ -0,0 +1,200 @@
+{{ template "head.html" .}}
+
+<div style="height: 64px; width: 100%;"></div>
+
+<p style='
+  line-height: 1.75;
+  color: white;
+  font-style: italic;
+  text-align: center;
+'>
+  An effort to open higher degrees of<br>
+  spatial interaction free<br>
+  to the world.
+</p>
+
+<div style="height: 12px; width: 100%;"></div>
+
+<img src='https://media.dof.dev/kit/logotype.svg?v22' width='256'>
+<p>degrees of freedom development</p>
+
+<div style="height: 12px; width: 100%;"></div>
+
+<div class='shuffle' style='
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+'>
+  <div style='color: white; font-size: 18px;'>
+    Ethan Merchant <span style="color: var(--col-01); font-size: 14px;">@spatialfree</span>
+    <a
+      href='https://ethanmerchant.com'
+      target="_blank"
+      style="text-decoration: none;"
+    >
+      🔗
+    </a>
+  </div>
+  <div style='color: white; font-size: 18px;'>
+    Niko Ryan <span style="color: var(--col-01); font-size: 14px;">@opendegree</span>
+    <a
+      href='https://nikoryan.com'
+      target="_blank"
+      style="text-decoration: none;"
+    >
+      🔗
+    </a>
+  </div>
+</div>
+
+<div style='
+  color: var(--col-06);
+  font-size: 48px;
+  padding: 12px;
+'>&times;</div>
+
+<div id='x'>
+{{ range .Data.Peers }}
+  <a
+    href='{{ .Project.Url }}'
+    title='{{ .Project.Name }}'
+    target='_blank'
+  >
+    <div style='
+      background-image: url("{{ .Project.Icon }}");
+    '></div>
+  </a>
+{{ end }}
+</div>
+
+<div style="flex: 1;"></div>
+
+<div style="display: block; position: relative; width: auto;">
+  <div style="display: block; position: relative;">
+    <img src="/public/img/knuckles_owo-removebg.png?v29" loading="lazy" height="360px" style="margin-right: 0;">
+    <div class="scene">
+      <div class="cube">
+        <img class="degree" src="/public/img/icons/degree.svg?v29">
+        <div class="cube__face cube__face--front">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
+        </div>
+        <div class="cube__face cube__face--back">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 000, 1), rgba(000, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 000, 1), rgba(000, 000, 000, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
+        </div>
+        <div class="cube__face cube__face--right">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 255, 1), rgba(255, 000, 000, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
+        </div>
+        <div class="cube__face cube__face--left">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(000, 255, 255, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
+        </div>
+        <div class="cube__face cube__face--top">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 255, 255, 1), rgba(000, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(255, 255, 000, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
+        </div>
+        <div class="cube__face cube__face--bottom">
+          <div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
+          <div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
+          <div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(255, 000, 000, 1));"></div>
+          <div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 000, 255, 1));"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display: block; position: absolute; bottom: 0; right: 0; padding: 10px;">
+    <a href="https://twitter.com/luciherzig" style="color: rgb(170 175 255);">@luciherzig</a>
+  </div>
+</div>
+
+<style>
+#x {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: center;
+  gap: 32px;
+  > a > div {
+    width: 64px;
+    height: 64px;
+    background-size: contain;
+    border-radius: 50%;
+  }
+}
+
+.scene {
+  position: absolute;
+  bottom: 184px;
+  right: 206px;
+
+  width: 32px;
+  height: 32px;
+  perspective: 120px;
+  perspective-origin: 32px 16px;
+  transform-style: preserve-3d;
+  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.666));
+}
+.degree {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+
+  animation: unspin 6s linear infinite;
+}
+@keyframes unspin {
+  0%   { transform: rotateY(460deg); }
+  50%  { transform: rotateY(280deg); }
+  100% { transform: rotateY(100deg); }
+}
+.cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  /* transform: translateZ(-20px); */
+  animation: spin 6s linear infinite;
+}
+@keyframes spin {
+  0%   { transform: translateY(0px) rotateY( 80deg); }
+  50%  { transform: translateY(5px) rotateY(260deg); }
+  100% { transform: translateY(0px) rotateY(440deg); }
+}
+.cube__face {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  /* background: rgba(204, 204, 204, 0.5); */
+}
+.edge {
+  border-radius: 3px;
+}
+.cube__face--front {
+  transform: rotateY(0deg) translateZ(16px);
+}
+.cube__face--right {
+  transform: rotateY(90deg) translateZ(16px);
+}
+.cube__face--back {
+  transform: rotateY(180deg) translateZ(16px);
+}
+.cube__face--left {
+  transform: rotateY(-90deg) translateZ(16px);
+}
+.cube__face--top {
+  transform: rotateX(90deg) translateZ(16px);
+}
+.cube__face--bottom {
+  transform: rotateX(-90deg) translateZ(16px);
+}
+</style>
\ No newline at end of file