diff --git a/_sass/main.scss b/_sass/main.scss
index b414efc..7d33ecb 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -44,7 +44,7 @@ body {
 // Make .page-content extend content-width
 .page-content { @extend %content-width; }
 
-.btn {
+.btn-primary {
   display: inline-block;
   text-align: center;
   text-decoration: none;
@@ -54,13 +54,38 @@ body {
   font-size: 24px;
   border-radius: 9px;
   margin: 0 auto;
-
+  &:hover {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    transform: translateY(-1px);
+  }
   &.-spaced-top {
     margin-top: 30px;
   }
 }
 
-.btn:hover { background-color: #888; }
+.btn-secondary {
+  background-color: #FCFCFC;
+  width: 210px;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  padding: 10px 20px;
+  color: #464646;
+  font-size: 24px;
+  border-radius: 9px;
+  margin: 0 auto;
+  border: 3px solid #464646;
+  box-sizing: border-box;
+  border-radius: 9px;
+  &.-spaced-top {
+    margin-top: 30px;
+  }
+  &:hover {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    transform: translateY(-1px);
+    
+  }
+}
 
 .logo-large { height: 130px; }
 .logo-med { height: 90px; }
@@ -71,18 +96,23 @@ body {
 }
 
 .hero-banner {
+  width: 81%;
+  margin: auto;
   padding-top: 30px;
   padding-bottom: 30px;
+  border-bottom: 10px solid $blue;
+  margin-bottom: 8px;
+}
 
-  h1 {
-    font-weight: normal;
-    font-size: 48px;
-    text-align: center;
-  }
+h1 {
+  font-weight: normal;
+  font-size: 48px;
+  text-align: center;
+}
 
-  h2 {
-    font-weight: normal;
-    font-size: 38px;
-    text-align: center;
-  }
+h2 {
+  font-weight: normal;
+  font-size: 38px;
+  text-align: center;
 }
+
diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss
index 457073b..a0e033b 100644
--- a/_sass/pages/_index.scss
+++ b/_sass/pages/_index.scss
@@ -4,7 +4,7 @@
 
   .three-buttons {
     position: absolute;
-    top: calc(100% - 80px);
+    top: calc(100% - 47px);
     width: 100%;
     text-align: center;
 
diff --git a/_sass/partials/_backgrounds.scss b/_sass/partials/_backgrounds.scss
index 80b94fe..ae9c4f6 100644
--- a/_sass/partials/_backgrounds.scss
+++ b/_sass/partials/_backgrounds.scss
@@ -1,20 +1,40 @@
-[class^="bkgd"] {
-  background-size: cover;
-  background-repeat: no-repeat;
-}
+// [class^="bkgd"] {
+//   background-size: cover;
+//   background-repeat: no-repeat;
+// }
 
 .bkgd-1 {
-  background-image: url(/assets/images/mobile-partition-left.png);
+  background: linear-gradient(292.39deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
+  border-top: 10px solid $yellow;
+  border-bottom: 10px solid $pink;
+  border-left: 20px solid $red;
+  border-right: 20px solid $green;
+  width: 70%;
+  margin: auto;
+  margin-bottom: 6px;
+}
 
-  @media (min-width: $desktop-min-width) {
-    background-image: url(/assets/images/partition-left.png);
-  }
+.bkgd-1b {
+  border-top: 10px solid $purple;
+  border-bottom: 10px solid $orange;
+  width: 73%;
+  margin: auto;
+  margin-bottom: 6px;
 }
 
 .bkgd-2 {
-  background-image: url(/assets/images/mobile-partition-right.png);
-
-  @media (min-width: $desktop-min-width) {
-    background-image: url(/assets/images/partition-right.png);
-  }
+  background: linear-gradient(57.07deg, #D1D1D1 0%, rgba(231, 231, 231, 0) 100%);
+  border-top: 10px solid $green;
+  border-bottom: 10px solid $brown;
+  border-left: 20px solid $blue;
+  border-right: 20px solid $purple;
+  width: 70%;
+  margin: auto;
+  margin-bottom: 6px;
 }
+
+.bkgd-2b {
+  border-top: 10px solid #1BA4E3;
+  width: 73%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/_sass/partials/_layout.scss b/_sass/partials/_layout.scss
index 7a7c788..00d7728 100644
--- a/_sass/partials/_layout.scss
+++ b/_sass/partials/_layout.scss
@@ -4,8 +4,9 @@
 .simple-cols {
   display: flex;
 
+
   &.-standard {
-    padding: 120px 60px;
+    padding: 60px 60px;
     align-items: center;
     justify-content: space-evenly;
   }
@@ -50,6 +51,16 @@
   font-size: 20px;
 }
 
+.index-mission {
+  border-top: 10px solid #493390;
+  margin-top: -34px;
+  margin-bottom: 6px;
+  padding: 130px 60px 60px 60px !important;
+}
+
+.three-buttons {
+  z-index: 1
+}
 /**
  * Desktop Only -  A class for elements that should only show up on desktop
  * devices.
diff --git a/_sass/variables/_colors.scss b/_sass/variables/_colors.scss
index 2af8d6b..117576f 100644
--- a/_sass/variables/_colors.scss
+++ b/_sass/variables/_colors.scss
@@ -14,3 +14,5 @@ $yellow:        #FEF035;
 $orange:        #F59331;
 $green:         #16A050;
 $pink:          #F18DB9;
+$red:           #DE1D41;
+$brown:         #74420B;;
diff --git a/in-your-city.html b/in-your-city.html
index 6b6f278..d1a3b8f 100644
--- a/in-your-city.html
+++ b/in-your-city.html
@@ -18,8 +18,8 @@ <h1>In Your City</h1>
   </p>
 </div>
 
-<div class="simple-cols -vertical -standard">
-    <a href="https://github.com/TransitTalk/Transit-Talk" class="btn">Visit our Github</a>
+<div class="bkgd-1b simple-cols -vertical -standard">
+    <a href="https://github.com/TransitTalk/Transit-Talk" class="btn-secondary">Visit our Github</a>
     <p class="hero-p">
       You don’t need to know what much about GTFS to create a version of <strong>Transit Talk</strong> for your city. Simply head over to out GitHub repository, create a fork of the app, and follow the instructions to build and install an instance of your own!
     </p>
diff --git a/index.html b/index.html
index 54c3349..14ffb83 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ <h2> Our Tool </h2>
   <div class="center-btn">
     <div class="vertical-cols -center">
       <img src="/assets/images/logo.png" alt="TransitTalk Logo" class="logo-large">
-      <a href="tool.html" class="btn -spaced-top">Learn More</a>
+      <a href="tool.html" class="btn-primary -spaced-top">Learn More</a>
     </div>
   </div>
   <p class="basic-p">
@@ -28,7 +28,7 @@ <h2> Our Tool </h2>
   </div>
 </div>
 
-<div class="simple-cols -standard">
+<div class="index-mission bkgd-1b simple-cols -standard">
   <div>
     <p class="basic-p">
       <strong>Transit Talk</strong> aims to create a transparent record of issues riders encounter, helping riders avoid problems on their commutes in real time while also helping transit agencies become more responsive to the needs of their customers.
@@ -36,14 +36,14 @@ <h2> Our Tool </h2>
   </div>
   <div class="center-text">
     <h2> Our Mission </h2>
-    <a href="mission.html" class="btn">More Info</a>
+    <a href="mission.html" class="btn-secondary">More Info</a>
   </div>
 </div>
 
 <div class="bkgd-2 simple-cols -standard">
   <div class="center-text">
     <h2> Our Team </h2>
-    <a href="team.html" class="btn">Meet Us</a>
+    <a href="team.html" class="btn-secondary">Meet Us</a>
   </div>
   <p class="basic-p">
     <strong>Transit Talk</strong> is a volunteer-run project that was created at Chi Hack Night, a weekly community event where people of all backgrounds come together to work on civic tech projects.
@@ -52,7 +52,7 @@ <h2> Our Team </h2>
 
 <div class="vertical-cols -center">
   <h2> Application to Other Cities </h2>
-  <a href="https://github.com/TransitTalk/Transit-Talk" class="btn">Visit our Github</a>
+  <a href="https://github.com/TransitTalk/Transit-Talk" class="btn-primary">Visit our Github</a>
   <p class="hero-p">
     <strong>Transit Talk</strong> is built for more than just Chicago. Through the use of GTFS, a universal data standard used by transit agencies around the world, Transit Talk can be implemented elsewhere easily. Visit our “In Your City” tab to learn more.
   </p>
diff --git a/mission.html b/mission.html
index 4781ef0..60c5158 100644
--- a/mission.html
+++ b/mission.html
@@ -16,7 +16,7 @@ <h2>Making Transit Better</h2>
   </p>
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-1b simple-cols -standard">
   <p class="hero-p">
     As a team of volunteers of varying transit-riding backgrounds, we understand the problems commuters face when using public transit. We aim to make everyone’s commute simpler, and to allow them to make educated choices on each trip.
   </p>
diff --git a/tool.html b/tool.html
index ed9892c..6764b6d 100644
--- a/tool.html
+++ b/tool.html
@@ -15,7 +15,7 @@ <h2>Rider-Powered Transit Information</h2>
   </p>
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-1b simple-cols -standard">
   <p class="basic-p">
     <strong>Transit Talk</strong> allows users to quickly submit issue reports, generating a real time, crowd-sourced map of issues that can ultimately be used by transit advocates, transit agencies, and transit riders.
   </p>
@@ -29,7 +29,7 @@ <h2>Rider-Powered Transit Information</h2>
     alt="TransitTalk Mobile Screenshot">
 </div>
 
-<div class="simple-cols -standard">
+<div class="bkgd-2b simple-cols -standard">
   <p class="basic-p">
     Users can save stops they frequent and check what’s going on before they head out for the day, understanding which routes (or even specific vehicles) to avoid to make their commute better and simpler.
   </p>