diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index cc0c1f0..8f4cfbd 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -13,7 +13,7 @@
     </div>
   </app-header>
   <main>
-    <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
+    <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0;">
       <!--      TODO load player count from old api or backend?-->
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
@@ -50,7 +50,7 @@
     -->
     <section class="darkmodeSection">
       <div class="container">
-        <iframe id="discordwidget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
+        <iframe id="discord-widget" src="https://discordapp.com/widget?id=141644560005595136&theme=dark"></iframe>
         <div class="paragraph" id="discordp">
           <h2>Meet the Community</h2>
           <p>Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude
@@ -68,13 +68,13 @@
       </div>
     </section>
     <section id="section2">
-      <div class="customcontainer">
+      <div class="customContainer">
         <h2 style="color: white; padding-bottom: 35px; font-size:2.8em">Survival Shaped by You</h2>
         <p style="color: white; padding-bottom: 35px; margin: auto; font-size: 1.1em;">Altitude is built by the
           community, for the community. We've added features requested by our members and several custom plugins to
           create our "perfect" survival experience.</p>
-        <div id="customcontainer2">
-          <div class="customcontainer3">
+        <div class="survivalShapedContainerPlugins">
+          <div class="pluginColumn">
             <h2>McMMO & MyPet</h2>
             <p>Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based
               plugins!</p>
@@ -84,7 +84,7 @@
               </div>
             </a>
           </div>
-          <div class="customcontainer3">
+          <div class="pluginColumn">
             <h2>Dynamic map</h2>
             <p>See the world and the players around it in real-time! The map shows the entire survival world with claims
               and warps.</p>
@@ -94,7 +94,7 @@
               </div>
             </a>
           </div>
-          <div class="customcontainer3">
+          <div class="pluginColumn">
             <h2>Player Shops</h2>
             <p>Our economy is built on player shops, encouraging player interaction and putting the control in your
               hands.</p>
@@ -108,13 +108,15 @@
       </div>
     </section>
     <section class="removemobile darkmodeSection">
-      <div class="customcontainer">
-        <div id="slider-wrapper">
-          <div class="slider-content">
-            <div class="indexslider">
-              <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
-              <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show  next image -->
-              <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+      <div class="customContainer">
+        <div class="sliderWrapper">
+          <div class="sliderContent">
+            <div class="indexSlider">
+              <div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
+              <div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
+              <div class="display">
+                <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+              </div>
             </div>
             <!-- dots/indicators controls here from js-->
           </div>
@@ -122,7 +124,7 @@
       </div>
     </section>
     <section style="background: #202020;">
-      <div class="customcontainer">
+      <div class="customContainer">
         <h2 id="quote" style="color: white; font-family: 'minecraft-text',sans-serif; line-height: 1.3em;">"Great
           community, great people, great server all round . . . If it can bring back my love for minecraft, it could
           work wonders for you."</h2>
@@ -130,7 +132,7 @@
       </div>
     </section>
     <section class="darkmodeSection">
-      <div class="customcontainer">
+      <div class="customContainer">
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
diff --git a/frontend/src/app/home/home.component.scss b/frontend/src/app/home/home.component.scss
index 51e76e1..a145c1c 100644
--- a/frontend/src/app/home/home.component.scss
+++ b/frontend/src/app/home/home.component.scss
@@ -19,7 +19,30 @@
   background-size: cover;
 }
 
+main .container {
+  padding: 80px 0;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+// Discord Widget
+#discord-widget {
+  margin: 0 auto;
+  width: 40%;
+  max-width: 380px;
+  height: 400px;
+}
+
+//Scroll button/anchorpoint
 #scroll-button {
   position: absolute;
   bottom: 50px;
@@ -118,3 +141,215 @@
     opacity: 0;
   }
 }
+
+// Survival Shaped by You section
+.survivalShapedContainerPlugins {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pluginColumn {
+  width: 250px;
+}
+
+.pluginColumn div {
+  margin-top: 30px;
+}
+
+.pluginColumn h2 {
+  color: var(--white);
+  font-size: 1.4em;
+  margin-bottom: 10px;
+}
+
+.pluginColumn p {
+  color: var(--white);
+}
+
+// Community builds section, removed if on mobile
+.sliderWrapper, .sliderContent {
+  display: flex;
+  margin: auto;
+}
+
+.sliderContent {
+  position: relative;
+  box-shadow: 8px 8px 25px 0 rgba(0, 0, 0, 0.2);
+}
+
+.indexSlider {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.9);
+  font-size: 21px;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.goLeft, .goRight {
+  display: block;
+  text-align: center;
+  position: absolute;
+  width: 250px;
+}
+
+.goRight:hover, .goLeft:hover {
+  background: rgba(155, 155, 155, 0.3);
+  box-shadow: -2px 0 15px rgba(200, 200, 200, 0.5);
+  cursor: pointer;
+}
+
+.goLeft {
+  height: 100%;
+  color: white;
+  left: 0;
+}
+
+.goRight {
+  height: 100%;
+  color: white;
+  right: 0;
+}
+
+.slide {
+  border-radius: 5px;
+}
+
+.display > span {
+  animation: fadein 1.5s;
+}
+
+.display > span {
+  width: 700px;
+  height: 400px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.dots {
+  text-align: center;
+  position: absolute;
+  bottom: 3%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.dot {
+  position: relative;
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
+  border: 1px solid rgb(255, 255, 255);
+  opacity: 0.5;
+  margin: 0 5px;
+  border-radius: 50%;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+
+.dot:hover {
+  box-shadow: -2px 0 10px 5px rgba(200, 200, 200, 0.3);
+  background-color: rgba(200, 200, 200, 0.8);
+  border: 1px solid rgb(255, 255, 255);
+  transform: scale(1.2);
+}
+
+// Different resolution changes
+@media (max-width: 1150px) {
+  .container {
+    width: 90%;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  .title h2 {
+    font-size: 1em;
+  }
+
+  #homeh2 {
+    font-size: 1.6em;
+  }
+
+  .title {
+    height: calc(100% - 150px);
+    margin-top: 0;
+  }
+
+  .container, .customContainer {
+    width: 90%;
+  }
+
+  #header-img {
+    width: 45%;
+  }
+}
+
+@media (max-width: 900px) {
+  .removemobile {
+    display: none;
+  }
+}
+
+@media (max-width: 690px) {
+  #discordwidget {
+    margin: 0 auto;
+    width: 60%;
+    max-width: 380px;
+    height: 400px;
+  }
+
+  #discordp {
+    margin: 50px auto;
+  }
+
+  .title h2 {
+    font-size: 0.9em;
+  }
+
+  #homeh2 {
+    font-size: 1.4em;
+    width: 100%;
+  }
+
+  #header-img {
+    width: 65%;
+  }
+
+  .title {
+    height: calc(100% - 110px);
+    margin-top: 100px;
+  }
+
+  .columnContainer {
+    width: 100%;
+    text-align: center;
+  }
+
+  main .container {
+    text-align: center;
+    width: 90%;
+    padding: 30px 0;
+  }
+
+  .paragraph {
+    width: 80%;
+    margin: 0 auto 30px auto;
+  }
+
+  .survivalShapedContainerPlugins {
+    display: block;
+  }
+
+  .pluginColumn {
+    margin: 30px auto;
+  }
+
+  #quote {
+    font-size: 1em;
+  }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index ed268ec..3c983a8 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -299,6 +299,12 @@ tr {
   background: #8b8a8f;
 }
 
+// Everything for darkmode
+
+.darkmodeSection {
+  background-color: var(--color-secondary);
+  transition: 0.5s background ease;
+}
 
 @media (max-width: 1150px) {
   .container {
@@ -315,5 +321,3 @@ tr {
   }
 
 }
-
-/* main css end */