diff --git a/index.html b/index.html
index 25bbdd3..bef1c0a 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
         <p>Email: cesium2349@protonmail.com (<a href=./pgp.txt>PGP Key</a>)
        <br>not an exhaustive list of my entire presence on the internet but stuff on this list is definitely me</p>
         
+       <div class=contacts>
         <div class=contact style="background-color: #475276; opacity:1; cursor: auto;">
             <h3>Discord</h3>
             <p>Cesium#5061</p>
@@ -49,6 +50,7 @@
             <p>cesium2349</p>
             <a title="Twitter" href="https://twitter.com/cesium2349"></a>
         </div>
+    </div>
         <p style="clear: left;text-align: center;"><a href="https://github.com/CesiumCs/cesium.one"><img src="assets/GitHub-Mark-Light.png" style="width:2em" alt="View on GitHub"></a></p>
     </body>
 </html>
diff --git a/styles.css b/styles.css
index f3c909a..9389d94 100644
--- a/styles.css
+++ b/styles.css
@@ -16,11 +16,22 @@ a {
 * { /* unfucks some stuff */
     box-sizing: border-box;
   }
+.contacts {
+  width: 550px;
+  margin:auto;
+  display: grid;
+  grid-template-areas: /* i know how to do it this way,    */
+    'one two three';   /* so shut up about the "right way" */
+  grid-gap: 10px;
+  padding: 10px;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+
+}
 .contact {
     float: left;
     width: 170px;
     padding: 15px;
-    margin: 0px 10px 10px 0px;
     background-color: #232629;
     border-radius: 10px;
     text-align: center;