diff --git a/Gemfile b/Gemfile
index 85ec323..dea4159 100644
--- a/Gemfile
+++ b/Gemfile
@@ -28,3 +28,5 @@ end
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
+
+gem "webrick", "~> 1.7"
diff --git a/index.html b/index.html
index 62e1343..9bb92a9 100644
--- a/index.html
+++ b/index.html
@@ -8,23 +8,36 @@ summary: Listing all websites under 1MB in total size
     <h1>1MB Club</h1>
     <p>The internet has become a <em>bloated mess</em>. Massive javascript libraries. Countless client-side queries. Overly complex frontend frameworks.</p>
     <p>These things are a <strong>cancerous growth</strong> on the web.</p>
-    <p>But we can make a difference - no matter how small it may seem. <em>1MB Club</em> is a growing collection of performance-focused web pages found across the internet. The one and only rule for a web page to qualify as a member:</p>
+    <p>But we can make a difference - no matter how small it may seem. <em>1MB Club</em> is a growing collection of performance-focused web pages found across the internet.</p>
+    <p><strong>The one and only rule for a web page to qualify as a member:</strong></p>
     <ol>
         <li>Total website size (not <i>just</i> transfered data) must not exceed 1 megabyte</li>
     </ol>
-    <blockquote>
-        <h3>How to Submit</h3>
+    <hr>
+    <details>
+        <summary><strong>How can I submit a website?</strong></summary>
         <p>Please follow the instructions on the main <a target="_blank" href="https://github.com/bradleytaunt/1mb-club">Github project repo</a>.</p>
-    </blockquote>
-    <h3>Support</h3>
-    <p>If you are feeling generous, I would greatly appreciate any donations to help support the site.</p>
-    <ol>
-        <li>BTC: <strong><code>3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg</code></strong></li>
-        <li>Or simply <a href="https://www.buymeacoffee.com/WQTMtn7ir">buy me a coffee</a></li>
-    </ol>
-    <h3>Looking for a more <em>extreme</em> club?</h3>
-    <p>Take a look and checkout the even more exclusive membership collection at the <a href="https://xhtml.club">XHTML Club</a>.</p>
-    <br><hr><br>
+    </details>
+    <hr>
+    <details>
+        <summary><strong>How can I help support this project?</strong></summary>
+        <p>If you are feeling generous, I would greatly appreciate any donations to help support the site.</p>
+        <ol>
+            <li>BTC: <strong><code>3JGsvjgxamQHi4VCALER4rXvnvzdWUaQGg</code></strong></li>
+            <li>Or simply <a href="https://www.buymeacoffee.com/WQTMtn7ir">buy me a coffee</a></li>
+        </ol>
+    </details>
+    <hr>
+    <details>
+        <summary><strong>Looking for a <i>more extreme</i> club?</strong></summary>
+        <p>Take a look and checkout the even more exclusive membership collection at the <a href="https://xhtml.club">XHTML Club</a>.</p>
+    </details>
+    <hr>
+    <br>
+</header>
+
+<main>
+    <h2>Official Members</h2>
     <span>Jump to: &nbsp;</span>
     <a href="#50">&#60;50KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
     <a href="#100">&#60;100KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
@@ -32,74 +45,83 @@ summary: Listing all websites under 1MB in total size
     <a href="#512">&#60;512KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
     <a href="#700">&#60;700KB</a><span>&nbsp;&nbsp;&middot;&nbsp;</span>
     <a href="#1000"><em>Just Under</em> 1MB</a>
-</header>
-
-<main>
-    <ul>
+    <hr><br>
+    <table>
+        <thead align="left">
+            <tr>
+                <th>URL</th>
+                <th align="right">Size (KB)</th>
+            </tr>
+        </thead>
+        <tbody>
     {% assign site_items = site.site_listings | sort: 'size' %}
-    <h3 id="50"><50KB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="50">&lt;50KB</td><td></td></tr>
     {% for item in site_items %}
         {% if item.size <= 50 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
 
-    <h3 id="100"><100KB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="100">&lt;100KB</td><td></td></tr>
     {% for item in site_items %}
-        {% if item.size >= 50 and item.size <=100 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+        {% if item.size >= 50.1 and item.size <=100 %}
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
 
-    <h3 id="250"><250KB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="250">&lt;250KB</td><td></td></tr>
     {% for item in site_items %}
-        {% if item.size >= 100 and item.size <=250 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+        {% if item.size >= 100.1 and item.size <=250 %}
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
 
-    <h3 id="512"><512KB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="512">&lt;512KB</td><td></td></tr>
     {% for item in site_items %}
-        {% if item.size >= 250 and item.size <=512 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+        {% if item.size >= 250.1 and item.size <=512 %}
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
 
-    <h3 id="700"><700KB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="700">&lt;700KB</td><td></td></tr>
     {% for item in site_items %}
-        {% if item.size >= 512 and item.size <=700 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+        {% if item.size >= 512.1 and item.size <=700 %}
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
 
-    <h3 id="1000"><em>Just Under</em> 1MB</h3>
+    <tr><td><br></td><td><br></td></tr>
+    <tr><td id="1000"><i>Just Under</i> 1MB</td><td></td></tr>
     {% for item in site_items %}
-        {% if item.size >= 700 and item.size <=1000 %}
-            <li>
-                <span class="before" style="--data-size:{{ item.size }};"></span>
-                <span class="after">{{ item.size }} KB</span>
-                <a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a>
-            </li>
+        {% if item.size >= 700.1 and item.size <=1000 %}
+            <tr>
+                <td><a href="https://{{ item.pageurl }}">{{ item.pageurl }}</a></td>
+                <td align="right"><span>{{ item.size }}</span></td>
+            </tr>
         {% endif %}
     {% endfor %}
+        </tbody>
+        </table>
 </main>
+<br>
+<hr>
diff --git a/style.css b/style.css
index 4d71a8b..27ff41c 100644
--- a/style.css
+++ b/style.css
@@ -1,134 +1,3 @@
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font: 18px/1.5 "Helvetica", "Arial", sans-serif;
-    margin: 0 0 4rem 0;
-    padding: 0 10px;
-}
-
-h1,h2,h3,h4,h5,h6 {
-    line-height: 1.2;
-}
-
-header,main,footer {
-    margin: 0 auto;
-    max-width: 800px;
-    width: 100%;
-}
-
-a,a:visited {
-    color: currentColor;
-}
-a:hover,a:focus {
-    color: blue;
-}
-
-.referral {
-    background: #27ae60;
-    color: white;
-    margin: 1rem 0 2rem;
-    padding: 10px;
-    text-align: center;
-}
-.referral p {
-    margin: 0;
-    padding: 0;
-}
-.referral a, .referral a:visited {
-    color: white;
-    font-weight: 600;
-}
-.referral a:hover, .referral a:focus {
-    color: black;
-}
-
-ul {
-    list-style: none;
-    margin: 3rem 0 0 0;
-    padding: 0;
-}
-ul li {
-    background: rgba(0,0,0,0.05);
-    line-height: 1;
-    margin: 0 0 0.5rem 0;
-    padding: 15px 10px 12px;
-    position: relative;
-}
-ul li span.before,
-ul li span.after {
-    left: 0;
-    position: absolute;
-    top: 0;
-}
-ul li span.before {
-    background: rgba(0,0,0,0.1);
-    height: 100%;
-    width: calc(var(--data-size)/1000 * 100%);
-    z-index: 0;
-}
-ul li span.after {
-    left: auto;
-    opacity: 0.6;
-    right: 10px;
-    top: auto;
-}
-ul li a {
-    font-weight: bold;
-    position: relative;
-    z-index: 2;
-}
-
-blockquote {
-    background: blanchedalmond;
-    border-left: 5px solid burlywood;
-    margin: 3rem 0 2rem;
-    padding: 20px;
-}
-blockquote h3 {
-    margin-top: 0;
-}
-blockquote p {
-    margin: 0;
-}
-
-main h3 {
-    margin-top: 3rem;
-    padding-top: 1rem;
-}
-
-footer {
-    border-top: 1px solid lightgrey;
-    margin: 3rem auto 0;
-    padding: 0.5rem 0 0;
-}
-footer p {
-    font-size: 85%;
-}
-
-/* Dark Theme */
 @media (prefers-color-scheme: dark) {
-    body {
-        background: #2d2d2d;
-        color: white;
-    }
-    blockquote {
-        background: #191919;
-        border-left: 5px solid black;
-    }
-    ul li {
-        background: rgba(0,0,0,0.2);
-    }
-    ul li span.before {
-        background: rgba(0,0,0,0.5);
-    }
-}
-
-@media(max-width:500px) {
-    body {
-        font: 16px/1.5 "Helvetica", "Arial", sans-serif;
-        margin: 0 0 4rem 0;
-        padding: 0 10px;
-    }
+    body{background:#191919;filter:invert(1);}
 }