diff --git a/index.html b/index.html
index 8ab9a89..0bc9107 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,11 @@
 
     <div class="pixel-corners">
         <div class="intro-box">
-            <header class="intro-info">
-                <div class="pixel-corners--wrapper">
-                    <div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
-                </div>
+            <div class="pixel-corners--wrapper">
+                <div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
+            </div>
+
+            <header class="intro-text">
                 <h1 class="site-intro">hey, i'm ruben.</h1>
                 <h2 class="site-subtitle">welcome to my site.</h2>
                 <nav>
@@ -30,7 +31,42 @@
     <div class="pixel-corners">
         <article class="links-n-socials">
             <h1>~/links-n-socials</h1>
-            <p>wip xdd</p>
+            <p>(in order of most prefered to least prefered!)</p>
+
+            <section class="social-lists">
+                <section class="social-links">
+                    <h2>socials</h2>
+                    <ul>
+                        <li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
+                        <li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
+                        <li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
+                        <li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
+                        <li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
+                    </ul>
+                </section>
+
+                <section class="social-links">
+                    <h2>others</h2>
+                    <ul>
+                        <li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
+                        <li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
+                        <li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
+                        <li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
+                        <li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
+                    </ul>
+                </section>
+
+                <section class="social-links">
+                    <h2>misc.</h2>
+                    <ul>
+                        <li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
+                        <li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
+                        <li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
+                        <li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
+                        <li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
+                    </ul>
+                </section>
+            </section>
         </article>
     </div>
 
diff --git a/style.css b/style.css
index 7808278..6beb6fa 100644
--- a/style.css
+++ b/style.css
@@ -333,7 +333,7 @@ a {
     background-color: var(--bg);
 }
 
-.intro-info, .links-n-socials, .about-me, .fun-facts {
+.intro-text, .links-n-socials, .about-me, .fun-facts {
     flex-direction: column;
 }
 
@@ -341,23 +341,39 @@ a {
     justify-content: space-evenly;
 }
 
-.links-n-socials .links-list {
-    flex-direction: row;
-}
-
 .pfp {
     width: 150px;
     height: 150px;
 }
 
-.intro-info {
+.intro-text {
     text-align: center;
     transform: translateY(4%)
 }
 
-.links-n-socials {
-    position: relative;
+/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
+.social-lists {
+    display: flex;
 }
+
+.social-links {
+    display: grid;
+    margin-right: auto;
+    align-content: start;
+}
+
+.social-links > h2 {
+    margin-bottom: -7px;
+}
+
+.social-links > ul {
+    margin-left: -22px;
+}
+
+.fedi > small > a, .revolt > small > a, .matrix > small > a, .xmpp > small > a, .shitcord > small > a {
+    font-size: 16px;
+}
+/* -- end of puke code -- */
 /* -- end of styling the rest of the elements -- */
 
 /* -- shirnk cards if screen is small -- */
@@ -368,10 +384,24 @@ a {
         transform: translate(4%, -3%);
     }
 
-    .pfp, .intro-box {
-        display: grid;
+    .intro-box {
+        display: flex;
         justify-content: center;
         align-content: center;
+        flex-direction: column;
+    }
+
+    .pfp, .pixel-corners--wrapper {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .pixel-corners--wrapper {
+        margin-bottom: 20px;
+    }
+
+    .social-lists {
+        flex-direction: column;
     }
 }
 /* -- yea -- */
\ No newline at end of file