diff --git a/index.html b/index.html
index 887091c..30d08ab 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
+    <!--<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">-->
     <link rel="stylesheet" href="index.css">
     <title>thebread.dev</title>
 </head>
@@ -16,8 +16,7 @@
     </div>
   -->
   <div class="scroll-container">
-    <div class="page" first="true">
-      <div class="page-bar" bottom="true">
+      <div class="page-bar" top="true">
         <img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
         <h3 style="margin-left: 2em">thebread.dev</h3>
         <div style="margin-left: auto; margin-right: 2em">
@@ -27,7 +26,9 @@
           </label>
         </div>
       </div>
-      <div style="display: flex; justify-content: center; align-items: center">
+    <div class="page" first="true">
+      <div></div>
+      <div class="flex-h center-h center-v"> 
         <img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="width: 10vw; aspect-ratio: 1; margin-right: 5em">
         <div>
           <h2>Hi, I'm bread</h2>
@@ -37,7 +38,7 @@
             <li>Software Development</li>
             <li>Microelectronics and repairs</li>
           </ul>
-          <p>The languages I currently know (from best to worst):</p>
+          <p>The languages I can currently work with:</p>
           <ul class="h-list">
             <li>
               <span id="ts">&bull;</span>
@@ -56,8 +57,12 @@
               <span>Swift</span>
             </li>
             <li>
-              <span id="bash">&bull;</span>
-              <span>Bash</span>
+              <span id="sh">&bull;</span>
+              <span>Shell</span>
+            </li>
+            <li>
+              <span id="sql">&bull;</span>
+              <span>SQL</span>
             </li>
             <li>
               <span id="c">&bull;</span>
@@ -68,6 +73,17 @@
               <span>Nix</span>
             </li>
           </ul>
+          <p>Frameworks I'm comfortable with:</p>
+          <ul class="h-list">
+            <li>
+              <img alt="" src="https://api.iconify.design/logos:vue.svg" />
+              <span>Vue</span>
+            </li>
+            <li>
+              <img alt="" src="https://api.iconify.design/logos:nestjs.svg" />
+              <span>NestJS</span>
+            </li>
+          </ul>
         </div>
       </div>
       <div class="scroll-hint">
@@ -76,55 +92,79 @@
         <span>⏷</span>
       </div>
     </div>
-    <div class="page">
-      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+    <div class="page" wip="true">
+      <div class="flex-v center-v center-h">
         <h2>Gallery</h2>
-        <p>Most of my images are on my <a href="https://cdn.thebread.dev">cdn</a>, but I will try to showcase my images here as well.</p>
+        <p>Most of my images are on my <a href="https://cdn.thebread.dev">cdn</a>, but I will try to "showcase" my images here as well.</p>
       </div>
     </div>
     <div class="page">
-      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+      <div class="flex-v center-v center-h">
         <h2>Live Services</h2>
-        <div class="display: flex; flex-direction: row;">
-          <div class="product">
-            <div style="display: flex; align-items: center">
-              <h3>fxpixiv</h3>
-              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+        <div class="flex-h"> 
+          <a href="https://fixiv.net">
+            <div class="product">
+              <div class="flex-h center-v">
+                <h3>fxpixiv</h3>
+                <div class="product-placeholder-icon"></div>
+              </div>
+              <p>Pixiv embed helper</p>
             </div>
-            <p>Pixiv embed helper</p>
+          </a>
+          <div class="product" placeholder="true">
+            <div class="flex-h center-v">
+              <div class="product-placeholder-title"></div>
+              <div class="product-placeholder-icon"></div>
+            </div>
+              <div class="product-placeholder-description"></div>
           </div>
           <div class="product" placeholder="true">
-            <div style="display: flex; align-items: center">
-              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
-              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            <div class="flex-h center-v">
+              <div class="product-placeholder-title"></div>
+              <div class="product-placeholder-icon"></div>
             </div>
-              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
+              <div class="product-placeholder-description"></div>
           </div>
           <div class="product" placeholder="true">
-            <div style="display: flex; align-items: center">
-              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
-              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
+            <div class="flex-h center-v">
+              <div class="product-placeholder-title"></div>
+              <div class="product-placeholder-icon"></div>
             </div>
-              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
-          </div>
-          <div class="product" placeholder="true">
-            <div style="display: flex; align-items: center">
-              <div style="width: 70px; height: 16px; background-color: lightgray; border-radius: 4px; margin: 18.72px 0"></div>
-              <div style="width: 50px; height: 50px; background-color: lightgray; margin-left: auto; border-radius: 4px"></div>
-            </div>
-              <div style="width: 120px; height: 16px; background-color: lightgray; margin-right: auto; margin-top: 16px; margin-bottom: 16px; border-radius: 4px"></div>
+              <div class="product-placeholder-description"></div>
           </div>
         </div>
         <p>These are the services currently available for use.</p>
       </div>
     </div>
-    <div class="page">
+    <div class="page" wip="true">
       libs and planned stuff
     </div>
     <div class="page" first="true">
       <div></div>
-      others, references, social media
-      <div class="page-bar" top="true">
+      <div class="flex-v center-h center-v">
+        <div class="flex-h center-h center-v">
+          <div class="flex-v center-h center-v">
+            <h2>Friends</h2>
+            <ul class="h-list">
+              <li><a href="https://henhaa.art">Henrik</a></li>
+              <li><a href="https://emma.pizza">Emma</a></li>
+            </ul>
+          </div>
+          <div class="separator"></div>
+          <div class="socials">
+            <a href="https://mastodon.social/@thebreadco" class="socials-tile" variant="mastodon"></a>
+              <a href="https://git.thebread.dev/thebreadcompany" class="socials-tile" variant="git"></a>
+              <a href="https://discordapp.com/users/524238008623431680" class="socials-tile" variant="discord"></a>
+              <a href="mailto:contact@threbread.dev" class="socials-tile" variant="email"></a>
+          </div>
+        </div>
+      </div>
+      <div class="page-bar" bottom="true">
+        <div style="margin-left: 2em; margin-right: auto">(c) thebread.dev 2025</div>
+        <div style="margin-right: 2em;" class="flex-h txt-list">
+          <div>Impressum</div>
+          <div>Datenschutzerklärung</div>
+        </div>
       </div>
     </div>
   </div>
