diff --git a/_includes/layouts/services/chat.njk b/_includes/layouts/services/chat.njk
new file mode 100644
index 0000000..3633a8d
--- /dev/null
+++ b/_includes/layouts/services/chat.njk
@@ -0,0 +1,15 @@
+<details id="chat" class="styled">
+    <summary><span class="icon tabler--message-chatbot"></span> Chat <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="xmpp" class="card xmpp">
+            <h4><a href="#xmpp">XMPP</a> <span class="badge">Private</span></h4>
+            <p>Generic XMPP server ran by us, powered with ejabberd. Simply point your client to <code>synth.download</code>.</p>
+            <p style="margin-bottom:unset !important;"><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
+        </div>
+        <div id="xmpp" class="card last email">
+            <h4><a href="#email">Email</a> <span class="badge">Private</span></h4>
+            <p>A mailserver to get your own synth.download email. Mailserver run by us within a container, and probably blocked by Outlook. <small>Gmail <i>probably</i> works, though!... I hate email.</small></p>
+            <p>Can be used for <a href="https://delta.chat">Delta Chat</a>.</p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/frontends.njk b/_includes/layouts/services/frontends.njk
new file mode 100644
index 0000000..a18eeae
--- /dev/null
+++ b/_includes/layouts/services/frontends.njk
@@ -0,0 +1,10 @@
+<details id="frontends" class="styled">
+    <summary><span class="icon tabler--cloud-network"></span> Frontends <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="redlib" class="card last redlib">
+            <h4><a href="#redlib">Redlib</a></h4>
+            <p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
+            <p class="button-container"><a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/fun.njk b/_includes/layouts/services/fun.njk
new file mode 100644
index 0000000..3532f03
--- /dev/null
+++ b/_includes/layouts/services/fun.njk
@@ -0,0 +1,15 @@
+<details id="fun" class="styled">
+    <summary><span class="icon tabler--device-gamepad-2"></span> Fun <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="ask-js" class="card ask-js">
+            <h4><a href="#ask-js">Ask-js</a> <span class="badge">Private</span></h4>
+            <p>Platform for receiving and answering anonymous questions and answers.</p>
+            <p class="button-container"><a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+        <div id="dark-room" class="card last dark-room">
+            <h4><a href="#dark-room">A Dark Room</a></h4>
+            <p>Just a mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game</p>
+            <p class="button-container"><a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/other.njk b/_includes/layouts/services/other.njk
new file mode 100644
index 0000000..a76e907
--- /dev/null
+++ b/_includes/layouts/services/other.njk
@@ -0,0 +1,10 @@
+<details id="other" class="styled">
+    <summary><span class="icon tabler--server-cog"></span> Other <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="zitadel" class="card last zitadel">
+            <h4><a href="#zitadel">ZITADEL</a> <span class="badge">Private</span></h4>
+            <p>Our authenticator to access multiple services using one account... or an attempt to. Currently only used for FreshRSS and Forgejo, and hoping to expand more with this.</p>
+            <p class="button-container"><a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/personal.njk b/_includes/layouts/services/personal.njk
new file mode 100644
index 0000000..2ed0bdc
--- /dev/null
+++ b/_includes/layouts/services/personal.njk
@@ -0,0 +1,16 @@
+<details id="personal" class="styled">
+    <summary><span class="icon tabler--user-heart"></span> Personal <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="vaultwarden" class="card vaultwarden">
+            <h4><a href="#vaultwarden">Vaultwarden</a> <span class="badge">Private</span></h4>
+            <p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
+            <p class="button-container"><a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+        <div id="freshrss" class="card last freshrss">
+            <h4><a href="#freshrss">FreshRSS</a> <span class="badge">Private</span></h4>
+            <p>Online RSS and Atom compatible feed reader.</p>
+            <p class="info-box warn"><span class="icon tabler--alert-triangle"></span> Log in through ZITADEL.</p>
+            <p class="button-container"><a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/private.njk b/_includes/layouts/services/private.njk
deleted file mode 100644
index 453018d..0000000
--- a/_includes/layouts/services/private.njk
+++ /dev/null
@@ -1,74 +0,0 @@
-<section id="private">
-    <h2><a href="#private">Private</a></h2>
-    <p>Services that are private (require signup) mainly for close friends and other trusted individual. May still be publicly <i>accessible</i>, but not <i>usable</i>.</p>
-    <hr class="solid">
-    <h3 id="p-social"><a href="#p-social">Social</a></h3>
-    <section id="sharkey" class="card sharkey">
-        <h4><a href="#sharkey">Sharkey</a></h4>
-        <p>Advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), based on <a href="https://misskey-hub.net">Misskey</a> with <a href="https://docs.joinsharkey.org/docs/comparison/misskey">many improvements</a>.</p>
-        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@booping.synth.download</span></p>
-        <p class="button-container"><a class="button" href="/sharkey"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <section id="iceshrimp" class="card iceshrimp">
-        <h4><a href="#iceshrimp">Iceshrimp</a></h4>
-        <p>Another advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), provided as an alternative for those who dislike the Misskey experience or prefer the Mastodon compatibility.</p>
-        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@synth.download</span>, wherever supported.</p>
-        <p class="button-container"><a class="button" href="/iceshrimp"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <section id="mastodon" class="card mastodon">
-        <h4><a href="#mastodon">Mastodon</a></h4>
-        <p>Calmer social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), it's Mastodon. Running a <a href="https://github.com/melontini/mastodon">light fork</a> of <a href="https://github.com/TheEssem/mastodon">Chuckya</a> which includes features such as emoji reactions.</p>
-        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@merping.synth.download</span></p>
-        <p class="button-container"><a class="button" href="/mastodon"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://merping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <section id="pds" class="card pds">
-        <h4><a href="#pds">PDS</a></h4>
-        <p>Synth.download's <b>P</b>ersonal <b>D</b>ata <b>S</b>erver, to be used with the Atmosphere (<a href="https://atproto.com">ATProto</a>) and more specifically, <a href="https://bsky.app">Bluesky</a>.</p>
-        <p class="button-container"><a class="button" href="https://pds.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <hr class="solid">
-    <h3 id="p-chat"><a href="#p-chat">Chat</a></h3>
-    <section id="xmpp" class="card xmpp">
-        <h4><a href="#xmpp">XMPP</a></h4>
-        <p>Generic XMPP server ran by us, powered with ejabberd. Simply point your client to <code>synth.download</code>.</p>
-        <p style="margin-bottom:unset !important;"><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
-    </section>
-    <section id="email" class="card email">
-        <h4><a href="#email">Email</a></h4>
-        <p>A mailserver to get your own synth.download email. Mailserver run by us within a container, and probably blocked by Outlook. <small>Gmail <i>probably</i> works, though!... I hate email.</small></p>
-    </section>
-    <hr class="solid">
-    <h3 id="p-sharing"><a href="#p-sharing">Sharing</a></h3>
-    <section id="forgejo" class="card forgejo">
-        <h4><a href="#forgejo">Forgejo</a></h4>
-        <p>A home for all of your Git repositories.</p>
-        <p class="button-container"><a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <hr class="solid">
-    <h3 id="p-fun"><a href="#p-fun">Fun</a></h3>
-    <section id="ask-js" class="card ask-js">
-        <h4><a href="#ask-js">Ask-js</a></h4>
-        <p>Platform for receiving and answering anonymous questions and answers.</p>
-        <p class="button-container"><a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p></p>
-    </section>
-    <hr class="solid">
-    <h3 id="p-personal"><a href="#p-personal">Personal</a></h3>
-    <section id="vaultwarden" class="card vaultwarden">
-        <h4><a href="#vaultwarden">Vaultwarden</a></h4>
-        <p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
-        <p class="button-container"><a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <section id="freshrss" class="card freshrss">
-        <h4><a href="#freshrss">FreshRSS</a></h4>
-        <p>Online RSS and Atom compatible feed reader.</p>
-        <p class="info-box warn"><span class="icon tabler--alert-triangle"></span> Log in through ZITADEL.</p>
-        <p class="button-container"><a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-    <hr class="solid">
-    <h3 id="p-other"><a href="#p-other">Other</a></h3>
-    <section id="zitadel" class="card zitadel">
-        <h4><a href="#zitadel">ZITADEL</a></h4>
-        <p>Our authenticator to access multiple services using one account... or an attempt to. Currently only used for FreshRSS and Forgejo, and hoping to expand more with this.</p>
-        <p class="button-container"><a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </section>
-</section>
\ No newline at end of file
diff --git a/_includes/layouts/services/public.njk b/_includes/layouts/services/public.njk
deleted file mode 100644
index a0249e0..0000000
--- a/_includes/layouts/services/public.njk
+++ /dev/null
@@ -1,21 +0,0 @@
-<section id="public">
-    <h2><a href="#public">Public</a></h2>
-    <p>All services that are publicly accessible to everyone and doesn't require any registration/has restrictions to use.</p>
-    <hr class="solid">
-    <h3 id="alternative-frontends"><a href="#alternative-frontends">Alternative frontends</h3>
-    <div id="redlib" class="card redlib">
-        <h4><a href="#redlib">Redlib</a></h4>
-        <p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
-        <p class="button-container"><a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </div>
-    <h3 id="games"><a href="#games">Games</a></h3>
-    <div id="dark-room" class="card dark-room">
-        <h4><a href="#dark-room">A Dark Room</a></h4>
-        <p>Just a mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game</p>
-        <p class="button-container"><a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-    </div>
-    <hr class="solid">
-    <div class="card last">
-        <p>More soon.</p>
-    </div>
-</section>
\ No newline at end of file
diff --git a/_includes/layouts/services/services.njk b/_includes/layouts/services/services.njk
index b43da1a..5eba90a 100644
--- a/_includes/layouts/services/services.njk
+++ b/_includes/layouts/services/services.njk
@@ -16,11 +16,15 @@
     <section>
         <h1><a href="#services">Services</a></h1>
         <p>All of our services that we host on Synth.download will be listed here. If you have a suggestion for a service to possibly look into hosting, feel free to poke at <a href="/~sneexy">~sneexy</a>!</p>
+        <p>Any service with <span class="badge">Private</span> listed next to its name means that it's an invite-only service, and/or requires an account for accessibility/complete usage. <small>To boil it down, almost all services will be <span class="badge">Private</span> unless it's a service that has no need for an account such an alternative frontend.</small></p>
         {% include "layouts/services/toc.njk" %}
-        <div class="flex-container">
-            {% include "layouts/services/public.njk" %}
-            <hr class="solid">
-            {% include "layouts/services/private.njk" %}
-        </div>
+        <hr class=solid>
+        {% include "layouts/services/frontends.njk" %}
+        {% include "layouts/services/social.njk" %}
+        {% include "layouts/services/chat.njk" %}
+        {% include "layouts/services/sharing.njk" %}
+        {% include "layouts/services/fun.njk" %}
+        {% include "layouts/services/personal.njk" %}
+        {% include "layouts/services/other.njk" %}
     </section>
 </article>
\ No newline at end of file
diff --git a/_includes/layouts/services/sharing.njk b/_includes/layouts/services/sharing.njk
new file mode 100644
index 0000000..007ece0
--- /dev/null
+++ b/_includes/layouts/services/sharing.njk
@@ -0,0 +1,10 @@
+<details id="sharing" class="styled">
+    <summary><span class="icon tabler--database-share"></span> Sharing <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="forgejo" class="card last forgejo">
+            <h4><a href="#forgejo">Forgejo</a> <span class="badge">Private</span></h4>
+            <p>A home for all of your Git repositories.</p>
+            <p class="button-container"><a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/social.njk b/_includes/layouts/services/social.njk
new file mode 100644
index 0000000..e2cbbc5
--- /dev/null
+++ b/_includes/layouts/services/social.njk
@@ -0,0 +1,28 @@
+<details id="social" class="styled">
+    <summary><span class="icon tabler--universe"></span> Social <span class="icon tabler--arrow-autofit-height"></span></summary>
+    <section>
+        <div id="sharkey" class="card sharkey">
+            <h4><a href="#sharkey">Sharkey</a> <span class="badge">Private</span></h4>
+            <p>Advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), based on <a href="https://misskey-hub.net">Misskey</a> with <a href="https://docs.joinsharkey.org/docs/comparison/misskey">many improvements</a>.</p>
+            <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@booping.synth.download</span></p>
+            <p class="button-container"><a class="button" href="/sharkey"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+        <div id="iceshrimp" class="card iceshrimp">
+            <h4><a href="#iceshrimp">Iceshrimp</a> <span class="badge">Private</span></h4>
+            <p>Another advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), provided as an alternative for those who dislike the Misskey experience or prefer the Mastodon compatibility.</p>
+            <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@synth.download</span>, wherever supported.</p>
+            <p class="button-container"><a class="button" href="/iceshrimp"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+        <div id="mastodon" class="card mastodon">
+            <h4><a href="#mastodon">Mastodon</a> <span class="badge">Private</span></h4>
+            <p>Calmer social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), it's Mastodon. Running a <a href="https://github.com/melontini/mastodon">light fork</a> of <a href="https://github.com/TheEssem/mastodon">Chuckya</a> which includes features such as emoji reactions.</p>
+            <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@merping.synth.download</span></p>
+            <p class="button-container"><a class="button" href="/mastodon"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://merping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+        <div id="pds" class="card last pds">
+            <h4><a href="#pds">PDS</a> <span class="badge">Private</span></h4>
+            <p>Synth.download's <b>P</b>ersonal <b>D</b>ata <b>S</b>erver, to be used with the Atmosphere (<a href="https://atproto.com">ATProto</a>) and more specifically, <a href="https://bsky.app">Bluesky</a>.</p>
+            <p class="button-container"><a class="button" href="https://pds.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+        </div>
+    </section>
+</details>
\ No newline at end of file
diff --git a/_includes/layouts/services/toc.njk b/_includes/layouts/services/toc.njk
index b12814c..dc04466 100644
--- a/_includes/layouts/services/toc.njk
+++ b/_includes/layouts/services/toc.njk
@@ -6,53 +6,78 @@
     <section>
         <ul>
             <li>
-                <a href="#public">Public</a>
+                <a href="#frontends">Frontends</a>
             </li>
             <ul>
                 <li>
-                    <a href="#alternative-frontends">Alternative frontends</a>
+                    <a href="#redlib">Redlib</a>
                 </li>
-                <ul>
-                    <li><a href="#redlib">Redlib</a></li>
-                </ul>
-                <li><a href="#games">Games</a></li>
-                <ul>
-                    <li><a href="#dark-room">A Dark Room</a></li>
-                </ul>
             </ul>
             <li>
-                <a href="#private">Private</a>
+                <a href="#social">Social</a>
             </li>
             <ul>
-                <li><a href="#p-social">Social</a></li>
-                <ul>
-                    <li><a href="#sharkey">Sharkey</a></li>
-                    <li><a href="#iceshrimp">Iceshrimp</a></li>
-                    <li><a href="#mastodon">Mastodon</a></li>
-                    <li><a href="#pds">PDS</a></li>
-                </ul>
-                <li><a href="#p-chat">Chat</a></li>
-                <ul>
-                    <li><a href="#xmpp">XMPP</a></li>
-                    <li><a href="#email">Email</a></li>
-                </ul>
-                <li><a href="#p-sharing">Sharing</a></li>
-                <ul>
-                    <li><a href="#forgejo">Forgejo</a></li>
-                </ul>
-                <li><a href="#p-fun">Fun</a></li>
-                <ul>
-                    <li><a href="#ask-js">Ask-js</a></li>
-                </ul>
-                <li><a href="#p-personal">Personal</a></li>
-                <ul>
-                    <li><a href="#vaultwarden">Vaultwarden</a></li>
-                    <li><a href="#freshrss">FreshRSS</a></li>
-                </ul>
-                <li><a href="#p-other">Other</a></li>
-                <ul>
-                    <li><a href="#zitadel">ZITADEL</a></li>
-                </ul>
+                <li>
+                    <a href="#sharkey">Sharkey</a>
+                </li>
+                <li>
+                    <a href="#iceshrimp">Iceshrimp</a>
+                </li>
+                <li>
+                    <a href="#mastodon">Mastodon</a>
+                </li>
+                <li>
+                    <a href="#pds">PDS</a>
+                </li>
+            </ul>
+            <li>
+                <a href="#chat">Chat</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#xmpp">XMPP</a>
+                </li>
+                <li>
+                    <a href="#email">Email</a>
+                </li>
+            </ul>
+            <li>
+                <a href="#sharing">Sharing</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#forgejo">Forgejo</a>
+                </li>
+            </ul>
+            <li>
+                <a href="#fun">Fun</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#ask-js">Ask-js</a>
+                </li>
+                <li>
+                    <a href="#dark-room">A Dark Room</a>
+                </li>
+            </ul>
+            <li>
+                <a href="#personal">Personal</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#vaultwarden">Vaultwarden</a>
+                </li>
+                <li>
+                    <a href="#freshrss">FreshRSS</a>
+                </li>
+            </ul>
+            <li>
+                <a href="#other">Other</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#zitadel">ZITADEL</a>
+                </li>
             </ul>
         </ul>
     </section>
diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index 109740c..a2cd011 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -350,10 +350,10 @@ details.styled {
             margin-left: auto;
         }
 
-        background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
+        background: linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
         border-bottom: unset !important;
         cursor: pointer;
-        padding: .5rem;
+        padding: .65rem;
     }
 
     section {
@@ -369,10 +369,10 @@ details.styled {
         margin-bottom: .8rem;
     }
 
-    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
+    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
     border-radius: .8rem .4rem .8rem .4rem;
-    border: .15rem solid var(--accent);
-    margin-top: 1rem;
+    border: .13rem solid var(--accent);
+    margin-top: 1.3rem;
     overflow: clip;
 }
 
@@ -382,6 +382,16 @@ details.styled[open] {
     }
 }
 
+/* badge text styling */
+.badge {
+    border-radius: .2rem;
+    border: .1rem solid var(--accent);
+    color: var(--link);
+    font-size: .8rem;
+    font-weight: normal;
+    padding: .15rem;
+}
+
 /* card styling */
 .card {
     background-color: color-mix(in srgb, var(--background) 95%, white);
diff --git a/_includes/styles/icons.css b/_includes/styles/icons.css
index f9bb9cb..c5f09e3 100644
--- a/_includes/styles/icons.css
+++ b/_includes/styles/icons.css
@@ -28,7 +28,6 @@
 .tabler--arrow-left { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); }
 .tabler--arrow-right { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); }
 .tabler--article { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
-.tabler--article { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
 .tabler--battery-filled { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); }
 .tabler--bell { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }
 .tabler--brand-git { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); }
@@ -39,8 +38,11 @@
 .tabler--brand-tabler { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--building-bank { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); }
 .tabler--bulb { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); }
+.tabler--cloud-network { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); }
 .tabler--corner-down-right { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); }
 .tabler--currency-dollar { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); }
+.tabler--database-share { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); }
+.tabler--device-gamepad-2 { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--device-mobile { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); }
 .tabler--external-link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); }
 .tabler--grid-dots { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); }
@@ -50,7 +52,6 @@
 .tabler--info-circle { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--letter-case { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); }
 .tabler--link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); }
-.tabler--link { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); }
 .tabler--list-tree { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); }
 .tabler--login { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");}
 .tabler--mail { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); }