diff --git a/index.html b/index.html
index 4b89e27..673ac78 100644
--- a/index.html
+++ b/index.html
@@ -10,20 +10,37 @@
     <body>
         <h1>Cesium</h1>
         <p>i think "nutte sac" is really really funny</p>
-        <h2>stuff i check a lot</h2>
-        <p>
-            Discord: Cesium#5061 (230659159450845195)
-        <br>Email: cesium2349@protonmail.com (<a href=./pgp.txt>PGP Key</a>)
-        <br>GitHub: <a href="https://github.com/CesiumCs">CesiumCs</a>
-        </p>
-        <h2>other stuff</h2>
+        <h2>Contact</h2>
+        <p>Email: cesium2349@protonmail.com (<a href=./pgp.txt>PGP Key</a>)</p>
         <p>not an exhaustive list of my entire presence on the internet but stuff on this list is definitely me</p>
-        <p>
-            Instagram: <a href="https://instagram.com/c.es.ium/">c.es.ium</a>
-        <br>Youtube: <a href="https://www.youtube.com/channel/UCXPFpgA9G9_wtlyDeT7QAig">Cesium</a>
-        <br>Reddit: <a href="https://www.reddit.com/user/unfunnycesium">unfunnycesium</a>
-        <br>Keybase: <a href="https://keybase.io/cesium2349/">cesium2349</a>
-        <br>Twitter: <a href="https://twitter.com/cesium2349">cesium2349</a>
-        </p>
+        
+        <div class=contact>
+            <h3>Discord</h3>
+            <p>Cesium#5061</p>
+        </div>
+        <div class=contact>
+            <h3>GitHub</h3>
+            <p><a href="https://github.com/CesiumCs">CesiumCs</a></p>
+        </div>
+        <div class=contact>
+            <h3>Instagram</h3>
+            <p><a href="https://instagram.com/c.es.ium/">c.es.ium</a></p>
+        </div>
+        <div class=contact>
+            <h3>YouTube</h3>
+            <p><a href="https://www.youtube.com/channel/UCXPFpgA9G9_wtlyDeT7QAig">Cesium</a></p>
+        </div>
+        <div class=contact>
+            <h3>Reddit</h3>
+            <p><a href="https://www.reddit.com/user/unfunnycesium">unfunnycesium</a></p>
+        </div>
+        <div class=contact>
+            <h3>Keybase</h3>
+            <p><a href="https://keybase.io/cesium2349/">cesium2349</a></p>
+        </div>
+        <div class=contact>
+            <h3>Twitter</h3>
+            <p><a href="https://twitter.com/cesium2349">cesium2349</a></p>
+        </div>
     </body>
 </html>
diff --git a/styles.css b/styles.css
index d0ec45d..94de09a 100644
--- a/styles.css
+++ b/styles.css
@@ -2,7 +2,7 @@
     font-family: "Open Sans";
     background-color: #0f1011;
     color: white;
-    width: 69vw; /* nice */
+    width: 69%;
     margin: auto;
 }
 a {
@@ -14,4 +14,22 @@ a {
     font-family: "Open Sans";
     src: url(assets/OpenSans-Regular.ttf);
 }
+* { /* unfucks some stuff */
+    box-sizing: border-box;
+  }
+.contact {
+    float: left;
+    min-width: 150px;
+    width: 10%;
+    padding: 15px;
+    margin: 5px;
+    background-color: #232629;
+    border-radius: 10px;
+    text-align: center;
+}
+@media screen and (max-width:500px) {
+    .contact {
+      width: 100%;
+    }
+  }
 /* TODO: make it not bad */
