diff --git a/_includes/layouts/admins/admins.njk b/_includes/layouts/admins/admins.njk
index 5d69e57..b66da5c 100644
--- a/_includes/layouts/admins/admins.njk
+++ b/_includes/layouts/admins/admins.njk
@@ -1,17 +1,17 @@
 <!-- synth.download admins -->
 <article id="admins" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--user-cog"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler user-cog></icon-tabler>
+        </titlebar-icon>
         <a href="#Admins">Admins</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1><a href="#admins">Admins</a></h1>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 241d70e..7f9d60b 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -9,7 +9,6 @@ title: base
 </head>
 
 <body>
-
     <bg-gradient aria-hidden="true"></bg-gradient>
     <bg-image aria-hidden="true"></bg-image>
 
diff --git a/_includes/layouts/donate/base.njk b/_includes/layouts/donate/base.njk
index e9b4a66..c905d9d 100644
--- a/_includes/layouts/donate/base.njk
+++ b/_includes/layouts/donate/base.njk
@@ -10,15 +10,25 @@ title: base
 </head>
 
 <body>
+    <bg-gradient aria-hidden="true"></bg-gradient>
+    <bg-image aria-hidden="true"></bg-image>
 
     {% include "layouts/navbar.njk" %}
 
-    <main>
-        {{ content | safe }}
-    </main>
+    <!-- settings windows model -->
+    {% include "layouts/settings.njk" %}
 
-    {% include "layouts/footer.njk" %}
+    <!-- main content -->
+    <content-wrapper>
+        <main>
+            {{ content | safe }}
+        </main>
 
+        {% include "layouts/footer.njk" %}
+    </content-wrapper>
+
+    <!-- element used for our alt popup -->
+    <div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/_includes/layouts/donate/donate.njk b/_includes/layouts/donate/donate.njk
index 4f1dfa8..d87ffb5 100644
--- a/_includes/layouts/donate/donate.njk
+++ b/_includes/layouts/donate/donate.njk
@@ -1,17 +1,17 @@
 <!-- donation window -->
 <article id="donate" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--message-chatbot"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler message-chatbot></icon-tabler>
+        </titlebar-icon>
         <a href="#donate">donate</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <p>Hi! I'm <a href="https://sneexy.synth.download">Ruben</a>. Currently just a student running synth.download in my spare time because I like doing so.</p>
diff --git a/_includes/layouts/fediverse/iceshrimp/bubble.njk b/_includes/layouts/fediverse/iceshrimp/bubble.njk
index 6fb9030..46b6e68 100644
--- a/_includes/layouts/fediverse/iceshrimp/bubble.njk
+++ b/_includes/layouts/fediverse/iceshrimp/bubble.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#bubble">Bubble timeline</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#bubble">Bubble timeline</a></h2>
diff --git a/_includes/layouts/fediverse/iceshrimp/fe.njk b/_includes/layouts/fediverse/iceshrimp/fe.njk
index 10a6053..0bff7e1 100644
--- a/_includes/layouts/fediverse/iceshrimp/fe.njk
+++ b/_includes/layouts/fediverse/iceshrimp/fe.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#frontends">Alternative frontends</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#frontends">Alternative frontends</a></h2>
diff --git a/_includes/layouts/fediverse/iceshrimp/features.njk b/_includes/layouts/fediverse/iceshrimp/features.njk
index 2b0f7a9..1cc0ecf 100644
--- a/_includes/layouts/fediverse/iceshrimp/features.njk
+++ b/_includes/layouts/fediverse/iceshrimp/features.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#features">Features</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#features">Features</a></h2>
diff --git a/_includes/layouts/fediverse/iceshrimp/info.njk b/_includes/layouts/fediverse/iceshrimp/info.njk
index 2b67ed4..8c5a6a9 100644
--- a/_includes/layouts/fediverse/iceshrimp/info.njk
+++ b/_includes/layouts/fediverse/iceshrimp/info.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#information">Instance information</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#information">Instance information</a></h2>
diff --git a/_includes/layouts/fediverse/iceshrimp/intro.njk b/_includes/layouts/fediverse/iceshrimp/intro.njk
index 61b3d2f..c42a607 100644
--- a/_includes/layouts/fediverse/iceshrimp/intro.njk
+++ b/_includes/layouts/fediverse/iceshrimp/intro.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--universe"></span>
         </div>
         <a href="#iceshrimp">Icesynth!</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1 style="text-align:center;"><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
diff --git a/_includes/layouts/fediverse/iceshrimp/tips.njk b/_includes/layouts/fediverse/iceshrimp/tips.njk
index a2a1777..76b37ea 100644
--- a/_includes/layouts/fediverse/iceshrimp/tips.njk
+++ b/_includes/layouts/fediverse/iceshrimp/tips.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#tips">Tips & Tricks</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#tips">Tips & Tricks</a></h2>
diff --git a/_includes/layouts/fediverse/mastodon/features.njk b/_includes/layouts/fediverse/mastodon/features.njk
index 923b303..5743af3 100644
--- a/_includes/layouts/fediverse/mastodon/features.njk
+++ b/_includes/layouts/fediverse/mastodon/features.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#features">Features</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#features">Features</a></h2>
diff --git a/_includes/layouts/fediverse/mastodon/info.njk b/_includes/layouts/fediverse/mastodon/info.njk
index 1df7d56..273c9da 100644
--- a/_includes/layouts/fediverse/mastodon/info.njk
+++ b/_includes/layouts/fediverse/mastodon/info.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#information">Instance information</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#information">Instance information</a></h2>
diff --git a/_includes/layouts/fediverse/mastodon/intro.njk b/_includes/layouts/fediverse/mastodon/intro.njk
index def156e..1623b14 100644
--- a/_includes/layouts/fediverse/mastodon/intro.njk
+++ b/_includes/layouts/fediverse/mastodon/intro.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--universe"></span>
         </div>
         <a href="#mastodon">Merpstodon!</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1 style="text-align:center;"><a href="https://joinmastodon.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/mastodon.svg" alt="Mastodon's official website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Merpstodon!</h1>
diff --git a/_includes/layouts/fediverse/moderation.njk b/_includes/layouts/fediverse/moderation.njk
index 699f6ee..995b60f 100644
--- a/_includes/layouts/fediverse/moderation.njk
+++ b/_includes/layouts/fediverse/moderation.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#moderation">Moderation</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#moderation">Moderation</a></h2>
diff --git a/_includes/layouts/fediverse/rules.njk b/_includes/layouts/fediverse/rules.njk
index 89f5a08..7c093ea 100644
--- a/_includes/layouts/fediverse/rules.njk
+++ b/_includes/layouts/fediverse/rules.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#rules">Rules</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#rules">Rules</a></h2>
diff --git a/_includes/layouts/fediverse/sharkey/bubble.njk b/_includes/layouts/fediverse/sharkey/bubble.njk
index 99824e5..c906cff 100644
--- a/_includes/layouts/fediverse/sharkey/bubble.njk
+++ b/_includes/layouts/fediverse/sharkey/bubble.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#bubble">Bubble timeline</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#bubble">Bubble timeline</a></h2>
diff --git a/_includes/layouts/fediverse/sharkey/features.njk b/_includes/layouts/fediverse/sharkey/features.njk
index 807b668..9d53c48 100644
--- a/_includes/layouts/fediverse/sharkey/features.njk
+++ b/_includes/layouts/fediverse/sharkey/features.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#features">Features</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#features">Features</a></h2>
diff --git a/_includes/layouts/fediverse/sharkey/info.njk b/_includes/layouts/fediverse/sharkey/info.njk
index 9cecb9a..238577f 100644
--- a/_includes/layouts/fediverse/sharkey/info.njk
+++ b/_includes/layouts/fediverse/sharkey/info.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#information">Instance information</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#information">Instance information</a></h2>
diff --git a/_includes/layouts/fediverse/sharkey/intro.njk b/_includes/layouts/fediverse/sharkey/intro.njk
index 8791d19..0f93a4d 100644
--- a/_includes/layouts/fediverse/sharkey/intro.njk
+++ b/_includes/layouts/fediverse/sharkey/intro.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--universe"></span>
         </div>
         <a href="#sharkey">Beepkey!</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1 style="text-align:center;"><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/sharkey_sh.svg" alt="Sharkey's website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Beepkey!</h1>
diff --git a/_includes/layouts/fediverse/sharkey/tips.njk b/_includes/layouts/fediverse/sharkey/tips.njk
index dbb1837..20fd914 100644
--- a/_includes/layouts/fediverse/sharkey/tips.njk
+++ b/_includes/layouts/fediverse/sharkey/tips.njk
@@ -5,13 +5,13 @@
             <span class="icon tabler--info-circle"></span>
         </div>
         <a href="#tips">Tips & Tricks</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#tips">Tips & Tricks</a></h2>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
deleted file mode 100644
index a0533e4..0000000
--- a/_includes/layouts/post.njk
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: notebook
-layout: "layouts/base.njk"
-section: post
-permalink: "/notebook/{{ date }}-{{ title | slugify }}/"
----
-
-<!-- the post window -->
-<details open id="information" class="window">
-    <summary>
-        <div aria-hidden="true">
-            <span class="icon tabler--info-circle"></span>
-        </div>
-        <a href="#information">information</a>
-        <div aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
-    </summary>
-    <section class="post-info">
-        <p aria-hidden="true">---</p>
-        <p><span>title:</span> {{ title or metadata.title }}</p>
-        {%- set tagUrl %}/tags/{{ tags | slugify }}/{% endset %}
-        <p><span>tags:</span> {%- for tag in tags | filterTagList %} {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} <p class="tags-holder"><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</p>
-        <p aria-hidden="true">---</p>
-    </section>
-</details>
-
-<!-- the post window -->
-<details open id="post" class="window">
-    <summary>
-        <div aria-hidden="true">
-            <span class="icon tabler--article"></span>
-        </div>
-        <a href="#post">{{ title or metadata.title }}</a>
-        <div aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
-    </summary>
-    <main data-pagefind-body>
-        <h1>{{ title or metadata.title }}</h1>
-        {{ content | safe }}
-    </main>
-</details>
\ No newline at end of file
diff --git a/_includes/layouts/privacy.njk b/_includes/layouts/privacy.njk
index f5f6584..5238806 100644
--- a/_includes/layouts/privacy.njk
+++ b/_includes/layouts/privacy.njk
@@ -1,17 +1,17 @@
 <!-- privacy policy -->
 <article id="privacy" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--lock"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler lock></icon-tabler>
+        </titlebar-icon>
         <a href="#privacy">Privacy Policy</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1><a href="#privacy">Privacy Policy</a></h1>
@@ -28,8 +28,8 @@
         <p>We ourselves and the services we provide follow <a target="_blank" href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation">the GDPR</a> for storing and managing personal data, and allow for complete deletion of all personal data (if any is stored ourselves) whenever possible.</p>
         <p>This website <small>(the Synth.Download homepage, <a target="_blank" href="https://forged.synth.download/sd/site">source available here</a>)</small> does not make use of cookies or related technology. We store settings and preferences changed for our site with the menu available in the top right into your browser's local storage, which is otherwise unavailable/not possible if JavaScript is disabled by the client.</p>
         <hr class="solid">
-        <p>For registered users of any of our services, we will also store any extra information that is required by the service or otherwise optionally provided, such as email addresses <small>(for the case or need of verification or password resets)</small> and passwords <small>(securely stored and hashed)</small>. What information or data is required or otherwise provided varies from service to service.</p>
-        <p>As a transparency note, all provided data and information is accessible by <a href="/admins">all administrators</a> of Synth.Download, but will <i>not</i> be mishandled/misused for any purposes <i>except</i> for the cases of required moderation/administration actions on our end, for a need of emergency contact, or otherwise for any request asked by the user.</p>
+        <p>For registered users of any of our services, we will store any extra information that is required by the service or is otherwise optionally provided, such as email addresses <small>(for the case or need of verification or password resets)</small> and passwords <small>(securely stored and hashed)</small>. What information or data is required or otherwise provided varies from service to service.</p>
+        <p>As a transparency note, all provided data and information is accessible by <a href="/admins">all administrators</a> of Synth.Download, but will <i>not</i> be mishandled/misused for any purposes and will <i>only</i> be accessed for the cases of required moderation/administration actions on our end, for a need of emergency contact, or otherwise for any request asked by the user.</p>
         <p>Depending on the service, we may have easier access to specific, possibly personal information for account management or service moderation/administrative purposes.</p>
         <p>For some services, we utilize <a target="_blank" href="https://bunny.net">Bunny</a> as our public CDN and <a target="_blank" href="https://www.backblaze.com">Backblaze</a> for files and storing whole, encrypted, off-site system backups. Their privacy policies may also apply with our services.</p>
         <hr class="solid">
diff --git a/_includes/layouts/services/services.njk b/_includes/layouts/services/services.njk
index 25c301c..09a5992 100644
--- a/_includes/layouts/services/services.njk
+++ b/_includes/layouts/services/services.njk
@@ -1,17 +1,17 @@
 <!-- publics & private services -->
 <article id="services" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--server-cog"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler server-cog></icon-tabler>
+        </titlebar-icon>
         <a href="#services">Services</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1><a href="#services">Services</a></h1>
diff --git a/_includes/layouts/sneexy/about.njk b/_includes/layouts/sneexy/about.njk
index 50a4449..f26b475 100644
--- a/_includes/layouts/sneexy/about.njk
+++ b/_includes/layouts/sneexy/about.njk
@@ -1,17 +1,17 @@
 <!-- about me -->
 <article id="about-me" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--info-circle"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler info-circle></icon-tabler>
+        </titlebar-icon>
         <a href="#about-me">About me</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#about-me">about me</a></h2>
diff --git a/_includes/layouts/sneexy/base.njk b/_includes/layouts/sneexy/base.njk
index a6550ac..118b6e4 100644
--- a/_includes/layouts/sneexy/base.njk
+++ b/_includes/layouts/sneexy/base.njk
@@ -10,15 +10,25 @@ title: base
 </head>
 
 <body>
+    <bg-gradient aria-hidden="true"></bg-gradient>
+    <bg-image aria-hidden="true"></bg-image>
 
     {% include "layouts/navbar.njk" %}
 
-    <main>
-        {{ content | safe }}
-    </main>
+    <!-- settings windows model -->
+    {% include "layouts/settings.njk" %}
 
-    {% include "layouts/footer.njk" %}
+    <!-- main content -->
+    <content-wrapper>
+        <main>
+            {{ content | safe }}
+        </main>
 
+        {% include "layouts/footer.njk" %}
+    </content-wrapper>
+
+    <!-- element used for our alt popup -->
+    <div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/buttons.njk b/_includes/layouts/sneexy/buttons.njk
index ac5059b..aaef17b 100644
--- a/_includes/layouts/sneexy/buttons.njk
+++ b/_includes/layouts/sneexy/buttons.njk
@@ -1,17 +1,17 @@
 <!-- buttons -->
 <article id="buttons" class="window home">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--link"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler link></icon-tabler>
+        </titlebar-icon>
         <a href="#buttons">Buttons</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <span style="color: var(--red);">If any are broken and/or missing, poke me.</span>
diff --git a/_includes/layouts/sneexy/funfacts.njk b/_includes/layouts/sneexy/funfacts.njk
index 8aecf35..7d5828f 100644
--- a/_includes/layouts/sneexy/funfacts.njk
+++ b/_includes/layouts/sneexy/funfacts.njk
@@ -1,17 +1,17 @@
 <!-- "fun" facts -->
 <article id="fun-facts" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--mood-empty"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler mood-empty></icon-tabler>
+        </titlebar-icon>
         <a href="#fun-facts">"Fun" facts</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#fun-facts">"Fun" facts</a></h2>
diff --git a/_includes/layouts/sneexy/intro.njk b/_includes/layouts/sneexy/intro.njk
index f7dc3fc..cbf7bbe 100644
--- a/_includes/layouts/sneexy/intro.njk
+++ b/_includes/layouts/sneexy/intro.njk
@@ -1,17 +1,17 @@
 <!-- simple introduction -->
 <article id="sneexy" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--user"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler user></icon-tabler>
+        </titlebar-icon>
         <a href="#sneexy">Sneexy info</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <img id="logo" loading="lazy" src="/assets/sneexy/sneexy.webp" alt="Sneexy" /> <br>
diff --git a/_includes/layouts/sneexy/notebook.njk b/_includes/layouts/sneexy/notebook.njk
index 52de595..8bf2159 100644
--- a/_includes/layouts/sneexy/notebook.njk
+++ b/_includes/layouts/sneexy/notebook.njk
@@ -9,17 +9,17 @@ permalink: "/notebook/"
 <!-- notebook index -->
 <article id="notebook" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--article"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler article></icon-tabler>
+        </titlebar-icon>
         <a href="#notebook">Notebook</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
 
     <section data-pagefind-body>
diff --git a/_includes/layouts/sneexy/nsfw/intro.njk b/_includes/layouts/sneexy/nsfw/intro.njk
index 1917e76..a651c42 100644
--- a/_includes/layouts/sneexy/nsfw/intro.njk
+++ b/_includes/layouts/sneexy/nsfw/intro.njk
@@ -1,17 +1,17 @@
 <!-- content warned introduction -->
 <article id="warning" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--alert-triangle"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler alert-triangle></icon-tabler>
+        </titlebar-icon>
         <a href="#warning">Warning</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <div class="info-box warn">
diff --git a/_includes/layouts/sneexy/nsfw/nsfw.njk b/_includes/layouts/sneexy/nsfw/nsfw.njk
index 0a2bbde..e0631e0 100644
--- a/_includes/layouts/sneexy/nsfw/nsfw.njk
+++ b/_includes/layouts/sneexy/nsfw/nsfw.njk
@@ -1,17 +1,17 @@
 <!-- nsfw -->
 <article id="nsfw" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--user"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler user></icon-tabler>
+        </titlebar-icon>
         <a href="#nsfw">"the slosh zone"</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#nsfw">"the slosh zone"</a></h2>
diff --git a/_includes/layouts/sneexy/ruben/features.njk b/_includes/layouts/sneexy/ruben/features.njk
index a2c0670..34d33cd 100644
--- a/_includes/layouts/sneexy/ruben/features.njk
+++ b/_includes/layouts/sneexy/ruben/features.njk
@@ -1,17 +1,17 @@
 <!-- features -->
 <article id="features" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--notes"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler notes></icon-tabler>
+        </titlebar-icon>
         <a href="#features">features</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2>features (general)</h2>
diff --git a/_includes/layouts/sneexy/ruben/intro.njk b/_includes/layouts/sneexy/ruben/intro.njk
index 95b170e..bed9ba9 100644
--- a/_includes/layouts/sneexy/ruben/intro.njk
+++ b/_includes/layouts/sneexy/ruben/intro.njk
@@ -1,17 +1,17 @@
 <!-- intro -->
 <article id="intro" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--robot-face"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler robot-face></icon-tabler>
+        </titlebar-icon>
         <a href="#intro">ruben's introduction</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h1>ruben</h1>
diff --git a/_includes/layouts/sneexy/ruben/personality.njk b/_includes/layouts/sneexy/ruben/personality.njk
index 30a3389..91144a9 100644
--- a/_includes/layouts/sneexy/ruben/personality.njk
+++ b/_includes/layouts/sneexy/ruben/personality.njk
@@ -1,17 +1,17 @@
 <!-- personality -->
 <article id="personality" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--mood-look-up"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler mood-look-up></icon-tabler>
+        </titlebar-icon>
         <a href="#personality">personality</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2>personality</h2>
diff --git a/_includes/layouts/sneexy/socials.njk b/_includes/layouts/sneexy/socials.njk
index 132ca03..e58a480 100644
--- a/_includes/layouts/sneexy/socials.njk
+++ b/_includes/layouts/sneexy/socials.njk
@@ -1,17 +1,17 @@
 <!-- socials -->
 <article id="links" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--link"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler link></icon-tabler>
+        </titlebar-icon>
         <a href="#links">links</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#links">Links</a></h2>
diff --git a/_includes/layouts/tos.njk b/_includes/layouts/tos.njk
index ff1dd61..1a17489 100644
--- a/_includes/layouts/tos.njk
+++ b/_includes/layouts/tos.njk
@@ -1,17 +1,17 @@
 <!-- terms of service -->
 <article id="tos" class="window">
     <div class="header">
-        <div class="titlebar-icon" aria-hidden="true">
-            <span class="icon tabler--rosette-discount-check"></span>
-        </div>
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler rosette-discount-check></icon-tabler>
+        </titlebar-icon>
         <a href="#tos">Terms of Service</a>
-        <div class="window-buttons" aria-hidden="true">
-            <span class="icon tabler--minimize"></span>
-            <span class="icon tabler--maximize"></span>
-        </div>
-        <div class="close-button" aria-hidden="true">
-            <span class="icon tabler--x"></span>
-        </div>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
     </div>
     <section>
         <h2><a href="#tos">Terms of Service</a></h2>
diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index 8a9ea13..9de45ee 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -52,7 +52,7 @@ bg-image {
 content-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
+    gap: 3rem;
     margin-bottom: 4rem;
     margin-left: auto;
     margin-right: auto;
@@ -67,10 +67,22 @@ content-wrapper {
         translate: 0 1rem;
     }
 
+    main {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+    }
+
     @media screen and (max-width: 60rem) {
-        gap: 1.5rem;
-        margin-bottom: 1rem;
-        margin-top: 3.4rem;
+        & { 
+            gap: 2rem !important;
+            margin-bottom: 1rem;
+            margin-top: 3.4rem;
+        }
+
+        main {
+            gap: 1.5rem !important;
+        }
     }
 }
 
diff --git a/_includes/styles/footer.css b/_includes/styles/footer.css
index a48a847..e0645b2 100644
--- a/_includes/styles/footer.css
+++ b/_includes/styles/footer.css
@@ -11,7 +11,6 @@ footer {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 3rem;
     width: 50rem;
 
     .header {
