diff --git a/src/assets/home/blue-graident-background.png b/src/assets/home/blue-graident-background.png
deleted file mode 100644
index d5a4b0e..0000000
Binary files a/src/assets/home/blue-graident-background.png and /dev/null differ
diff --git a/src/assets/home/bot-moderation.png b/src/assets/home/bot-moderation.png
new file mode 100644
index 0000000..3966390
Binary files /dev/null and b/src/assets/home/bot-moderation.png differ
diff --git a/src/assets/home/bot-music.png b/src/assets/home/bot-music.png
new file mode 100644
index 0000000..e678fe9
Binary files /dev/null and b/src/assets/home/bot-music.png differ
diff --git a/src/assets/home/bot-profile.png b/src/assets/home/bot-profile.png
deleted file mode 100644
index 76e45dc..0000000
Binary files a/src/assets/home/bot-profile.png and /dev/null differ
diff --git a/src/components/footer.tmpl b/src/components/footer.tmpl
index da55537..e1b77af 100644
--- a/src/components/footer.tmpl
+++ b/src/components/footer.tmpl
@@ -1,6 +1,6 @@
 {{ define "footer" }}
 <footer>
   <h2>MBot</h2>
-  <p>Discord.js</p>
+  <p>Developed by Keyemail.</p>
 </footer>
 {{ end }}
diff --git a/src/pages/home.tmpl b/src/pages/home.tmpl
index 99e2bcc..0efa04d 100644
--- a/src/pages/home.tmpl
+++ b/src/pages/home.tmpl
@@ -16,9 +16,26 @@
       </div>
     </div>
   </header>
-  <div id="what-about">
-    <h2>What is MBot?</h2>
-    <p>MBot is a Discord bot powered by Discord.js to help the user in moderation of their server, this bot can help ban, kick any user (as long as it has permission to do so) to help fight off anyone who could be doing anything against what the server goes for! It can also clear messages incase any big chunks of unwanted messages appear. If you want music for your server this is the bot for that! This bot is able to play about any music you want as long as it is a public link.</p>
-  </div>
+  <ul id="what-about">
+    <li>
+      <div>
+        <h2>Powerful Moderation!</h2>
+        <p>Moderate your server with ban or kick commands, this will get rid of any naughty people that break your server rules! You can also manage messages using the clear command, this will get rid of big chunk messages that you may not want on your server.</p>
+      </div>
+      <img src="/src/assets/home/bot-moderation.png">
+    </li>
+    <li>
+      <img src="/src/assets/home/bot-music.png">
+      <div>
+        <h2>Music!</h2>
+        <p>Play music from youtube with our bot for free! Control your music how youd like by skipping, pausing, or stopping the queue entirely to play what you want on your server! You may also look at what the queue is storing for your server.</p>
+      </div>
+    </li>
+    <li>
+      <div class="shift-center">
+        <h2>More features coming soon!</h2>
+      </div>
+    </li>
+  </ul>
   {{ end }}
 </body>
diff --git a/src/styles/home.css b/src/styles/home.css
index e7fe746..a957ce9 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -1,25 +1,19 @@
 header {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
-  left: 0;
-  top: 0;
-  margin: -20px -20px 0;
-  width: calc(100% + 40px);
+  margin: calc(-1 * var(--pad));
+  margin-bottom: 0;
+  width: calc(100% + 2 * var(--pad));
   height: 600px;
-  background-image: url(/src/assets/home/background.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  background: #103161 no-repeat center / cover url(/src/assets/home/background.svg);
 
   #header-wrapped-content {
     display: flex;
     position: relative;
     align-items: center;
     justify-content: space-between;
-    max-width: 1920px;
     width: 100%;
     padding: 20px 100px;
 
@@ -41,12 +35,10 @@ header {
 
   #header-wrapped-profile {
     border-radius: 50% !important;
-    overflow: hidden;
+    overflow: clip;
     height: 300px !important;
     width: 300px !important;
-    border-style: solid;
-    border-color: white;
-    border-width: 3px;
+    border: #fff solid 3px;
     aspect-ratio: 1 / 1;
 
     img {
@@ -54,18 +46,58 @@ header {
       height: 100%;
       object-fit: cover;
       image-rendering: pixelated;
+      user-select: none;
     }
   }
 }
 
 #what-about {
-    margin-top: 30px; 
+  display: inline;
+  list-style: none;
+  max-width: 1200px;
+  margin: auto;
 
-    h2 {
-      font-size: 3rem;
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 180px;
+    gap: 200px; 
+
+    div {
+      h2 {
+        font-size: 3rem;
+      }
+      p{
+        font-size: 1.3rem;
+      } 
     }
-    p{
-      font-size: 1.3rem;
-      max-width: 800px;
+    img {
+      border-radius: 20px;
+      border: #fff solid 3px;
+      user-select: none;
+      width: 400px;
     }
+  }
 }
+
+.shift-right {
+  margin-left: auto; 
+}
+
+.shift-center {
+  margin: auto;
+}
+
+@media only screen and (max-width: 1100px) {
+  header {
+    height: 750px;
+  }
+  #header-wrapped-content {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+  #header-wrapped-profile {
+    margin-bottom: 30px;
+  }
+} 
diff --git a/src/styles/main.css b/src/styles/main.css
index be2c295..3a15754 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: Poppins;
   src: url(/src/fonts/poppins/Poppins-Medium.ttf);
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @font-face {
@@ -17,7 +17,8 @@
 }
 
 :root {
-  --font: 'Poppins', sans-serif; 
+  --font: 'Poppins', sans-serif;
+  --pad: 20px;
 }
 
 * {
@@ -32,12 +33,12 @@ body {
   justify-content: space-between;
   max-width: 1920px;
   margin: auto;
-  padding: 20px;
+  padding: var(--pad);
   min-height: 100vh;
   background-color: #121212;
-  color: white;
+  color: #fff;
   font-family: var(--font);
-  font-weight: 500;
+  font-weight: 400;
 }
 
 a {
@@ -51,7 +52,7 @@ nav {
   align-items: center;
   justify-content: space-between;
   z-index: 999;
-  width: calc(100% - 40px);
+  width: calc(100% - calc(var(--pad) + var(--pad)));
 
   h1 {
     font-size: 2rem;
@@ -66,7 +67,11 @@ nav {
     li {
       display: inline;
       cursor: pointer;
-      font-weight: 200;
+      font-weight: 500;
+      transition: border 0.15s;
+    }
+    li:hover {
+      border-bottom: 2px solid #fff;
     }
   }
 }