diff --git a/index.html b/index.html
index 3311b69..0a67f20 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <meta charset="utf-8" />
 <title>noe</title>
 <style>
@@ -33,29 +33,37 @@
 
     display: flex;
     align-items: center;
-    
+
     h1 {
       margin: 0;
       padding: 1rem;
       font-size: 3em;
 
-      
       text-shadow: -2px 1px 0 var(--l1), 2px 1px 3px var(--l4);
-      
+
       .meka {
         color: var(--l2);
       }
     }
   }
 
-  .monospace { font-family: monospace; }
-  
+  .monospace {
+    font-family: monospace;
+  }
+
   .circlething {
     width: 3em;
     height: 3em;
     background-color: red;
     border-radius: 100%;
-    background: radial-gradient(circle, var(--l3) 20%, var(--l1) 30%, var(--l2) 50%, var(--l0) 80%, var(--l0) 100%);
+    background: radial-gradient(
+      circle,
+      var(--l3) 20%,
+      var(--l1) 30%,
+      var(--l2) 50%,
+      var(--l0) 80%,
+      var(--l0) 100%
+    );
     border: 3px solid var(--l0);
     box-shadow: 0 0 2px 5px var(--l2);
     margin-left: 1em;
@@ -74,66 +82,117 @@
       margin: 0;
     }
   }
-  
+
   .friends {
     display: inline-flex;
     text-align: center;
     flex-direction: column;
 
     .divider {
-      border-top: 1px dashed var(--l2); 
+      border-top: 1px dashed var(--l2);
       margin: 0.7em 2em 1em 2em;
     }
   }
-
 </style>
 <body>
   <div class="container">
     <header>
       <div class="circlething"></div>
       <h1><span class="meka">meka</span><span class="noe">noe</span></h1>
-      <p aria-hidden="true" class="monospace">_[#41666H;&: <span class="under">n,s,h</span>]$ ~></p>
+      <p aria-hidden="true" class="monospace">
+        _[#41666H;&amp;: <span class="under">n,s,h</span>]$ ~>
+      </p>
       <p aria-hidden="true" class="monospace">
         <span id="js-timething">
-          // multishot; unknown target; tracking... *** ||--->> waiting... ||-->>
+          // multishot; unknown target; tracking... *** ||--->> waiting...
+          ||-->>
         </span>
       </p>
     </header>
     <main>
       <section>
         <h2>about</h2>
-        <p>this one is noe <a href="/pronouns/">(it/its, 3rd person preferred, alt: she/her)</a></p>
-        <p>derelict combat doll; hacker; cyberpunk; nd; &; queer; empty spaces;;</p>
-        <p>nixos, devops/sre/sysadmin, rev-eng, electronics, personal evs, writing, cats, plants</p>
+        <p>
+          this one is noe
+          <a href="/pronouns/">(it/its, 3rd person preferred, alt: she/her)</a>
+        </p>
+        <p>
+          derelict combat doll; hacker; cyberpunk; nd;
+          <a href="/system.html">&amp;</a>; queer; empty spaces;;
+        </p>
+        <p>
+          nixos, devops/sre/sysadmin, rev-eng, electronics, personal evs,
+          writing, cats, plants
+        </p>
       </section>
 
       <section>
         <h2>where to find</h2>
         <ul>
-          <li><b>federal space</b> - <a href="https://sapphic.engineer/noe" rel="me"><!--email off-->@noe@sapphic.engineer<!--/email off--></a> || 
-          <a href="https://porcelain.doll.repair/noe" rel="me"><!--email off-->@noe@porcelain.doll.repair<!--/email off--></a> ||
-          <a href="https://void.rehab/noe" rel="me"><!--email off-->@noe@void.rehab<!--/email off--></a></li>
-          <li><b>cold storage</b> - <a href="https://codeberg.org/noe" rel="me"><!--email off-->@noe@codeberg.org<!--/email off--></a></li>
-          <li><b>legacy code</b> - <a href="https://github.com/mekanoe" rel="me"><!--email off-->@mekanoe@github.com<!--/email off--></a></li>
-          <li><b>the matrix</b> - <a href="https://matrix.to/#/@noe:sapphic.engineer" rel="me"><!--email off-->@noe:sapphic.engineer<!--/email off--></a></li>
+          <li>
+            <b>federal space</b> -
+            <a href="https://sapphic.engineer/noe" rel="me"
+              ><!--email off-->@noe@sapphic.engineer<!--/email off--></a
+            >
+            ||
+            <a href="https://porcelain.doll.repair/noe" rel="me"
+              ><!--email off-->@noe@porcelain.doll.repair<!--/email off--></a
+            >
+            ||
+            <a href="https://void.rehab/noe" rel="me"
+              ><!--email off-->@noe@void.rehab<!--/email off--></a
+            >
+          </li>
+          <li>
+            <b>cold storage</b> -
+            <a href="https://codeberg.org/noe" rel="me"
+              ><!--email off-->@noe@codeberg.org<!--/email off--></a
+            >
+          </li>
+          <li>
+            <b>legacy code</b> -
+            <a href="https://github.com/mekanoe" rel="me"
+              ><!--email off-->@mekanoe@github.com<!--/email off--></a
+            >
+          </li>
+          <li>
+            <b>the matrix</b> -
+            <a href="https://matrix.to/#/@noe:sapphic.engineer" rel="me"
+              ><!--email off-->@noe:sapphic.engineer<!--/email off--></a
+            >
+          </li>
         </ul>
         <h3>art webbed sites</h3>
         <ul>
-          <li><a href="https://art.mekanoe.com">art.mekanoe.com</a> (requires javascript)</li>
-          <li><a href="https://doll.repair">doll.repair</a> (warning: empty spaces; trauma-driven art therapy)</li>
+          <li>
+            <a href="https://art.mekanoe.com">art.mekanoe.com</a> (requires
+            javascript)
+          </li>
+          <li>
+            <a href="https://doll.repair">doll.repair</a> (warning: empty
+            spaces; trauma-driven art therapy)
+          </li>
         </ul>
       </section>
 
       <section>
         <h2>reading</h2>
-        <p>this one writes for many reasons; please heed the content warnings where they exist. your mental health is important.</p>
+        <p>
+          this one writes for many reasons; please heed the content warnings
+          where they exist. your mental health is important.
+        </p>
         <h3>technical</h3>
         <ul>
           <li><i>(standby)</i></li>
         </ul>
         <h3>fictional</h3>
         <ul>
-          <li><a href="https://sapphic.engineer/notice/AdTGYQsbo8EkYbZMDA">story story unit#001</a> - she fixes you</li>
+          <li>
+            <a href="https://sapphic.engineer/notice/AdTGYQsbo8EkYbZMDA"
+              >story story unit#001</a
+            >
+            - she fixes you
+          </li>
         </ul>
       </section>
     </main>
@@ -144,16 +203,39 @@
         <div class="friends">
           <!-- Others -->
           <div>
-            <a href="https://stardust.elysium.gay" target="_blank"><img src="/88x31/stardust.png" width="88" height="31" alt="Stardust" /></a>
-            <a href="https://sneexy.pages.gay" target="_blank"><img src="/88x31/sneexy.gif" alt="Sneexy"></a>
+            <a href="https://stardust.elysium.gay" target="_blank"
+              ><img
+                src="/88x31/stardust.png"
+                width="88"
+                height="31"
+                alt="Stardust"
+            /></a>
+            <a href="https://sneexy.pages.gay" target="_blank"
+              ><img src="/88x31/sneexy.gif" alt="Sneexy"
+            /></a>
           </div>
           <!-- self row (hi, please feel free to use these <3) -->
           <div class="divider"></div>
           <div>
-            <a href="https://noe.sh" target="_blank"><img src="/yay/88x31.png" width="88" height="31" alt="noe" /></a>
-            <a href="https://noe.sh/pronouns/" target="_blank"><img src="/yay/88x31-vp.png" width="88" height="31" alt="it/its" /></a>
-            <img src="/yay/88x31-nap.png" width="88" height="31" alt="not a person" />
-            <a href="https://sapphic.engineer" target="_blank"><img src="/yay/88x31-se.png" width="88" height="31" alt="sapphic.engineer" /></a>
+            <a href="https://noe.sh" target="_blank"
+              ><img src="/yay/88x31.png" width="88" height="31" alt="noe"
+            /></a>
+            <a href="https://noe.sh/pronouns/" target="_blank"
+              ><img src="/yay/88x31-vp.png" width="88" height="31" alt="it/its"
+            /></a>
+            <img
+              src="/yay/88x31-nap.png"
+              width="88"
+              height="31"
+              alt="not a person"
+            />
+            <a href="https://sapphic.engineer" target="_blank"
+              ><img
+                src="/yay/88x31-se.png"
+                width="88"
+                height="31"
+                alt="sapphic.engineer"
+            /></a>
           </div>
         </div>
       </section>
diff --git a/shell.nix b/shell.nix
index 3ee9262..b430652 100644
--- a/shell.nix
+++ b/shell.nix
@@ -1,5 +1,6 @@
 { pkgs ? import <nixpkgs> {} }: pkgs.mkShell {
   buildInputs = with pkgs; [
     nodePackages.serve
+    nodePackages.prettier
   ];
 }
