diff --git a/docs/about.html b/docs/about.html
new file mode 100644
index 0000000..4c75133
--- /dev/null
+++ b/docs/about.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About – picsmics4</title>
+    <meta
+      name="description"
+      content="The story behind picsmics4 and the legendary Reptilia comment thread."
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav class="navbar">
+      <a
+        href="https://youtu.be/lW7vWfRI5oI?si=Sefj320BsIkgOKk0"
+        class="nav-logo"
+        >picsmics4</a
+      >
+      <div class="nav-links">
+        <a href="index.html" class="nav-link">Comments</a>
+        <a href="about.html" class="nav-link active">About</a>
+      </div>
+    </nav>
+    <div class="container">
+      <header class="hero">
+        <h1>About This Archive</h1>
+      </header>
+      <section class="about-content">
+        <h2>The Story</h2>
+        <p>
+          On Jan 2, 2008, a YouTube user named
+          <strong>DrazenXLive</strong> uploaded a video of themselves playing
+          <em>Reptilia</em> by The Strokes on Rock Band. It gained a few views,
+          but was otherwise just a gaming video in the early age of YouTube.
+        </p>
+        <p>
+          Then <strong>picsmics4</strong> started commenting. And never stopped.
+        </p>
+        <p>
+          For over 15 years, picsmics4 returned to this one video, leaving
+          comments that evolved into an unintentional diary, from documenting
+          high school whimsy, adulthood, hardships, and everything in between.
+          The thread, the optimism of picsmics4, and the wholesome reception
+          from the internet community has been selected to be preserved on this
+          site.
+        </p>
+
+        <h2>This Archive</h2>
+        <p>
+          I watched
+          <a
+            href="https://www.youtube.com/watch?v=PDVOaAKaMfg"
+            target="_blank"
+            rel="noopener"
+            >a video by ShaiiValle</a
+          >
+          and was inspired to make this site overnight, in an era where much of
+          our shared digital history is quietly disappearing. The world is
+          currently a mess, but it is the small things like this that let us go
+          on with our days.
+        </p>
+
+        <p>
+          This site preserves every comment from the video, and comments from
+          before <strong>January 1, 2026</strong> (at 6 minutes and 7 seconds)
+          are frozen exactly as they were for authenticity. Newer comments are
+          added periodically but the original archive remains untouched.
+        </p>
+
+        <h2>Links</h2>
+        <ul>
+          <li>
+            <a
+              href="https://www.youtube.com/watch?v=lW7vWfRI5oI"
+              target="_blank"
+              rel="noopener"
+              >The Original Video</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/DereC4/picsmics4"
+              target="_blank"
+              rel="noopener"
+              >GitHub Repository</a
+            >
+          </li>
+        </ul>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index 59e8bc8..8aa45c9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,22 +4,83 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>The picsmics4 Story</title>
-    <meta name="description" content="Memorializing the legendary comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Browse every comment and relive internet history." />
-    <meta name="keywords" content="picsmics4, DrazenXLive, Reptilia, The Strokes, Rock Band, comment thread, legendary comments, internet history, YouTube comments, archive" />
+    <meta
+      name="description"
+      content="Memorializing the legendary comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Browse every comment and relive internet history."
+    />
+    <meta
+      name="keywords"
+      content="picsmics4, DrazenXLive, Reptilia, The Strokes, Rock Band, comment thread, legendary comments, internet history, YouTube comments, archive"
+    />
     <meta name="author" content="DerexXD" />
-    <meta property="og:title" content="picsmics4 – The Legendary Reptilia Comment Thread" />
-    <meta property="og:description" content="An archive memorializing the iconic comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Browse every comment ever left." />
+    <meta
+      property="og:title"
+      content="picsmics4 – The Legendary Reptilia Comment Thread"
+    />
+    <meta
+      property="og:description"
+      content="An archive memorializing the iconic comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Browse every comment ever left."
+    />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="picsmics4" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="picsmics4 – The Legendary Reptilia Comment Thread" />
-    <meta name="twitter:description" content="Archive of the legendary comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Internet history preserved forever." />
+    <meta
+      name="twitter:title"
+      content="picsmics4 – The Legendary Reptilia Comment Thread"
+    />
+    <meta
+      name="twitter:description"
+      content="Archive of the legendary comment thread on DrazenXLive's Reptilia – The Strokes, Rock Band video. Internet history preserved forever."
+    />
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
+    <nav class="navbar">
+      <a
+        href="https://youtu.be/lW7vWfRI5oI?si=Sefj320BsIkgOKk0"
+        class="nav-logo"
+        >picsmics4</a
+      >
+      <div class="nav-links">
+        <a href="index.html" class="nav-link active">Comments</a>
+        <a href="about.html" class="nav-link">About</a>
+      </div>
+    </nav>
     <div class="container">
-        <ul id="comments-list"></ul>
+      <header class="hero">
+        <h1>The Comment Thread</h1>
+        <p class="subtitle">
+          Every comment from
+          <a
+            href="https://www.youtube.com/watch?v=lW7vWfRI5oI"
+            target="_blank"
+            rel="noopener"
+            >DrazenXLive's video</a
+          >
+        </p>
+        <p class="meta" id="comment-count"></p>
+      </header>
+      <ul id="comments-list"></ul>
     </div>
+    <h2>Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://www.youtube.com/watch?v=lW7vWfRI5oI"
+          target="_blank"
+          rel="noopener"
+          >The Original Video</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/DereC4/picsmics4"
+          target="_blank"
+          rel="noopener"
+          >GitHub Repository</a
+        >
+      </li>
+    </ul>
     <script src="commentsLoader.js"></script>
   </body>
 </html>
diff --git a/docs/styles.css b/docs/styles.css
index eef055a..b8cecde 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -176,3 +176,156 @@ li[style*="--nested: true"] {
     background: #ffe7e7;
     color: #c41e3a;
 }
+
+/* Navbar */
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  background: #0d0d0d;
+  border-bottom: 1px solid #222;
+}
+
+.nav-logo {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #fff;
+  text-decoration: none;
+  letter-spacing: 0.5px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.nav-link {
+  color: #888;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: #fff;
+}
+
+/* Layout */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #111;
+  color: #ddd;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+/* Hero */
+.hero {
+  text-align: center;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #222;
+}
+
+.hero h1 {
+  font-size: 1.6rem;
+  color: #fff;
+  margin-bottom: 0.4rem;
+}
+
+.hero .subtitle {
+  color: #888;
+  font-size: 0.95rem;
+}
+
+.hero .subtitle a {
+  color: #6ea8fe;
+  text-decoration: none;
+}
+
+.hero .meta {
+  color: #555;
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+}
+
+/* Comments */
+#comments-list {
+  list-style: none;
+}
+
+#comments-list li {
+  padding: 1rem 0;
+  border-bottom: 1px solid #1a1a1a;
+}
+
+#comments-list .comment-author {
+  font-weight: 600;
+  color: #fff;
+  font-size: 0.9rem;
+}
+
+#comments-list .comment-date {
+  color: #555;
+  font-size: 0.8rem;
+  margin-left: 0.5rem;
+}
+
+#comments-list .comment-text {
+  margin-top: 0.3rem;
+  color: #ccc;
+  font-size: 0.95rem;
+  white-space: pre-wrap;
+}
+
+#comments-list .comment-likes {
+  color: #555;
+  font-size: 0.8rem;
+  margin-top: 0.3rem;
+}
+
+/* About */
+.about-content {
+  line-height: 1.8;
+}
+
+.about-content h2 {
+  color: #fff;
+  font-size: 1.2rem;
+  margin: 2rem 0 0.75rem;
+}
+
+.about-content p {
+  margin-bottom: 1rem;
+  color: #bbb;
+}
+
+.about-content a {
+  color: #6ea8fe;
+  text-decoration: none;
+}
+
+.about-content ul {
+  list-style: none;
+  padding: 0;
+}
+
+.about-content ul li {
+  margin-bottom: 0.5rem;
+}
\ No newline at end of file
