diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..98218f358 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,9 +18,10 @@
 
 <body>
   <!-- NAVBAR -->
+   <section id="header">
   <nav>
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img src="./images/slack-logo.png" alt="Slack logo" class="slack-logo"/>
 
       <ul>
         <li>
@@ -40,11 +41,11 @@
 
     <div>
       <button>
-        <img src="./images/icon-search.png" alt="Search icon">
+        <img src="./images/icon-search.png" alt="Search icon" class="nav-bar-button">
       </button>
 
       <button>
-        <img src="./images/icon-menu.png" alt="Menu icon">
+        <img src="./images/icon-menu.png" alt="Menu icon" class="nav-bar-button">
       </button>
 
       <ul hidden>
@@ -64,40 +65,43 @@
     <div>
       <h1>Great teamwork starts with a digital HQ</h1>
 
-      <p>Slack is free to try for as long as you'd like.</p>
+      <p><span class="free-slack">Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="button-container">
+        <button class="mail-button">Sign up with email</button>
 
-        <button>
+        <button class="google-button">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
+          <div></div>
         </button>
       </div>
 
     </div>
 
     <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" class="product-img">
     </div>
   </header>
+</section> 
 
+  
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
-
-      <div>
-        <img src="./images/logo-airbnb.png" alt="Airbnb logo" />
-        <img src="./images/logo-nasa.png" alt="NASA logo" />
-        <img src="./images/logo-uber.png" alt="Uber logo" />
-        <img src="./images/logo-target.png" alt="Target logo" />
-        <img src="./images/logo-nyt.png" alt="New York Times logo" />
-        <img src="./images/logo-spotify.png" alt="Spotify logo" />
+    <section class="companies">
+      <h2>Trusted by companies all over the world</h2>
+
+      <div class="trusted-img">
+        <div><img src="./images/logo-airbnb.png" alt="Airbnb logo" /></div>
+        <div><img src="./images/logo-nasa.png" alt="NASA logo" /></div>
+        <div><img src="./images/logo-uber.png" alt="Uber logo" /></div>
+        <div><img src="./images/logo-target.png" alt="Target logo" /></div>
+        <div><img src="./images/logo-nyt.png" alt="New York Times logo" /></div>
+        <div><img src="./images/logo-spotify.png" alt="Spotify logo" /></div>
       </div>
 
     </section>
 
-    <section>
+    <section class="slack-stats">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..cde5f459a 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,191 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+
+
+/* @media screen and (max-width: 768px) { */
+
+/* img {
+    width: 10px;
+} */
+
+body, h1, h2, h3, h4, h5, p { 
+    font-family: sans-serif;
+    padding: 0;
+}
+
+h2 {
+    font-size: larger;
+    text-align: center;
+    line-height: 2em;
+    padding-top: 10px;
+}
+
+h3 {
+    font-size: x-large;
+    color: #540B51;
+    font-weight: bold;
+    text-align: center;
+    padding-top: 30px;
+}
+
+body {
+    background-color: #540B51;
+}
+
+
+nav {
+    margin: 15px 10px 20px 10px;
+    /* width: 100vw; */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+   
+
+}
+
+nav div button {
+    background-color: transparent;
+    border: none;
+}
+
+.nav-bar-button {
+    width:30px;
+}
+
+h1{
+    text-align: center;
+    font-size:70px;
+    color:white
+}
+.slack-logo {
+    width:40%;
+}
+
+nav ul { 
+    display: none;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+}
+
+.free-slack {
+    color:yellow;
+    font-weight: bold;
+}
+
+header p {
+    font-size: 1.5em;
+    text-align: center;
+    color: white;
+}
+
+.mail-button {
+    margin: 10px 20px;
+    width: 90%;
+    height:50px; 
+    font-size: 1.5em;
+    color: #540B51;
+    font-weight: 600;
+    text-align: center;
+    border-radius: 10px;
+    
+}
+.google-button{
+    margin: 10px 20px;
+    width:90%;
+    height:50px;
+    font-size:1.5em;
+    font-weight:600;
+    background-color:lightblue;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 10px;
+}
+
+.google-button img {
+    height: 90%;
+    width: auto;
+}
+
+.product-img {
+    width: 100%;
+    height: auto;
+    padding-top: 100px;
+}
+
+.companies {
+    background-color:#F3EAE2;
+}
+
+#header{
+    background-color: #540B51;
+}
+
+
+main {
+    background-color: #F3EAE2;
+    padding:0;
+    border: none;
+    width:100vw;
+}
+
+.trusted-img {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.trusted-img div{
+    width: calc(30% - 100px);
+    margin: 10px 50px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+main img {
+    width: 100%;
+    height: auto;
+}
+
+.slack-stats {
+    background-color: white;
+}
+
+.slack-stats p {
+    text-align: center;
+}
+
+.slack-stats span {
+    font-size: 5em;
+    text-align: center;
+    font-weight: 800;  
+    color:#540B51;         ;
+}
+
+.slack-stats ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  
+}
+.slack-stats li {
+    width: 30%;
+    list-style-type: none;
+    text-align: center;
+    padding-left: 0;
+    margin-left: 0;
+}   
+    
+/* } */
\ No newline at end of file
