diff --git a/index.js b/index.js
index 94f2a19..11d0f73 100644
--- a/index.js
+++ b/index.js
@@ -31,11 +31,9 @@ app.get("/", (req, res) => {
             const activity = lanyardData.activities[index];
             console.log(activity)
             if (activity.type == 2) {
-                addedHTML += `<p>Listening to on <span style="color: limegreen">${activity.name}</span>: ${activity.details} (by ${activity.state})</p>`
+                addedHTML += `<p class="chip">Listening to on <span style="color: limegreen">${activity.name}</span>: ${activity.details} (by ${activity.state})</p>`
             } else if (activity.type == 4) {
                 addedHTML += `<p><em><span style="color: lightgray">"${lanyardData.activities[0].state}"</span> - ${lanyardData.discord_user.display_name} ${new Date(Date.now()).getFullYear()}</em></p>`
-            } else if (activity.type == 0) {
-                addedHTML += `<p>Playing: ${activity.name}</p>`
             }
         }
 
@@ -59,13 +57,14 @@ app.get("/", (req, res) => {
         }
         var statusData = statuses[lanyardData.discord_status]
 
-        addedHTML += `<p style="color: ${statusData.color}">${statusData.text}</p>`
         addedHTML += `<style>.pfp { border-color: ${statusData.color} !important }</style>`
 
         console.log(lanyardData.activities)
     }
 
-    html = html.replace("{LANYARD}", addedHTML + "</p>")
+    html = html.replace("{LANYARD_STATUS}", `<p style="color: ${statusData.color}">${statusData.text}</p>`)
+
+    html = html.replace("{LANYARD}", addedHTML)
 
     res.send(html)
 })
diff --git a/resources/mainPage.html b/resources/mainPage.html
index 407f2b3..a6ba5c6 100644
--- a/resources/mainPage.html
+++ b/resources/mainPage.html
@@ -5,8 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
-        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/style.css">
 
     <title>Violet's Purgatory</title>
@@ -22,16 +21,18 @@
 </head>
 
 <body>
-    <div class="fadediv" style="display: flex; justify-content: center; align-items: center; width: 100%; height: 85%;">
+    <h1>Welcome to Violet's Purgatory</h1>
+    <div class="fadediv">
         <div class="container-fluid row" id="card">
             <h2>Violet</h2>
-            <div class="col-sm-6" style="display: flex; justify-content: center; align-items: center;">
+            <div class="col-sm-12" style="display: flex; justify-content: center; align-items: center;">
                 <img src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
-            </div>
-            <div class="col-sm-6">
-                <p>Pronouns: They/Them</p>
-                <p>Gender: Non-binary</p>
-                <p>Game & web developer</p>
+                <div>
+                    <p>They/Them</p>
+                    <p>Non-binary</p>
+                    <p>Game & web developer</p>
+                    {LANYARD_STATUS}
+                </div>
             </div>
             <div class="col-sm-12">
                 <hr>
@@ -39,15 +40,15 @@
                 <p class="chip"><a href="/hosted">Stuff i'm hosting!</a></p>
                 <p class="chip"><a href="/socials">Socials</a></p>
                 <p class="chip"><a href="/pronouns">Pronouns</a></p>
-                <br>
-                <!-- <p class="d-sm-inline-block d-none">Fediverse: <a rel="me"
-                        href="https://tech.lgbt/@Bingus_Violet">@Bingus_Violet@tech.lgbt</a></p>
-                <p class="d-sm-inline-block d-none" style="border-color: red;">Ko-Fi: <a
-                        href="https://ko-fi.com/bingus_violet" style="color: rgb(255, 0, 0)">bingus_violet</a> - Please
-                    donate!</p> -->
+                <hr>
                 {LANYARD}
             </div>
         </div>
+        <p><em>The world's worst developer</em></p>
+        <noscript>
+            <p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done
+                server-side, so enjoy :D <br> P.S. Your really cool, I look up to people like u :> (Atleast, assuming you disabled javascript urself...)</p>
+        </noscript>
     </div>
 </body>
 
diff --git a/static/style.css b/static/style.css
index b06c131..c58bf6c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,9 +1,10 @@
-/* @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
 
-:root {
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
+* {
+    font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
     text-align: center;
+    line-height: 1.5rem;
 }
 
 h1 {
@@ -14,19 +15,23 @@ h1 {
 
 h2 {
     color: white;
-    font-size: 2rem;
 }
 
 body, html {
     overflow-x: hidden;
     margin: auto;
     background-color: rgb(20, 5, 60);
+    background: linear-gradient(rgb(25, 5, 75), black);
     width: 100vw;
     height: 100vh;
     margin: 0;
     padding: 0;
 }
 
+body {
+    padding: 5%;
+}
+
 .fadediv {
     animation-name: fade-in;
     animation-duration: .75s;
@@ -90,16 +95,15 @@ hr {
     color: white;
     opacity: 0.25;
     border-width: 2px;
-    margin: 20px 10%;
+    margin: 15px 10%;
 }
 
 #card {
     background-color: rgb(75, 25, 100);
     padding: 15px;
     border: 2px white solid;
-    margin: auto;
-    max-width: 1000px;
-    width: 98%;
+    margin: 25px auto;
+    width: 95%;
     
 }
 
