diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..3e8cd465f 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -19,10 +19,10 @@
 <body>
   <!-- NAVBAR -->
   <nav>
-    <div>
+    <div class="nav">
       <img src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul hidden>
         <li>
           <a href="#">Product</a>
         </li>
@@ -38,12 +38,12 @@
       </ul>
     </div>
 
-    <div>
-      <button>
+    <div class="nav-buttons">
+      <button class="icon-search">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
 
-      <button>
+      <button class="icon-menu">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
 
@@ -61,32 +61,32 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="header-section">
       <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>Slack is free to try</span> for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="mail-options">
+        <button class="email-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>
+          <span>SIGN UP WITH GOOGLE</span>
         </button>
       </div>
 
     </div>
 
-    <div>
+    <div class="hero-product-ui">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="companies">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="companies-images">
         <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" />
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..28170631a 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,109 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+body {
+  background-color: rgb(106, 1, 106);
+}
+
+/* Mobile screen max width 768px */
+@media screen and (max-width: 768px) {
+  /* nav bar */
+  nav {
+    display: flex;
+    flex-direction: row;
+    /* background-color: blue; */
+    justify-content: space-between;
+    margin: 10px;
+  }
+  .nav img {
+    width: 150px;
+    height: auto;
+  }
+  .icon-search {
+    background-color: rgb(106, 1, 106);
+    border: none;
+    width: 50px;
+    height: 40px;
+  }
+  .icon-menu {
+    background-color: rgb(106, 1, 106);
+    border: none;
+    width: 50px;
+    height: 40px;
+  }
+
+  /* Header Section */
+  .header-section {
+    text-align: center;
+  }
+  .header-section h1 {
+    font-size: 80px;
+    color: white;
+    font-family: sans-serif;
+  }
+
+  .header-section p {
+    font-size: 35px;
+    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+      "Lucida Sans", Arial, sans-serif;
+  }
+
+  .header-section p span {
+    color: rgb(226, 166, 14);
+  }
+  .mail-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .email-button {
+    width: 100%;
+    height: 60px;
+    font-size: 20px;
+    color: rgb(106, 1, 106);
+    font-weight: 600;
+    margin-bottom: 20px;
+    border: 1px solid white;
+    border-radius: 4px;
+  }
+  .google-button {
+    width: 100%;
+    background-color: rgb(54, 131, 247);
+    display: flex;
+    justify-content: center;
+    border: 1px solid rgb(54, 131, 247);
+    border-radius: 4px;
+    margin-bottom: 50px;
+  }
+  .google-button img {
+    width: 50px;
+    background-color: white;
+  }
+  .google-button span {
+    font-size: 20px;
+    color: white;
+  }
+
+  .hero-product-ui img {
+    width: 100%;
+    margin: 0px;
+  }
+  .companies {
+    background-color:rgb(222, 211, 193);
+    justify-items: center;
+    padding-top: 25px;
+    margin: 0px;
+  }
+  .companies p {
+    color: black;
+    font-size: 30px;
+  }
+  .companies .companies-images img {
+    width: 10%;
+    display: flex;
+    flex-direction: row;
+  }
+
+}
