diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..3a73c021a 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -22,7 +22,7 @@
     <div>
       <img src="./images/slack-logo.png" alt="Slack logo" />
 
-      <ul>
+      <ul class="nav-list">
         <li>
           <a href="#">Product</a>
         </li>
@@ -61,32 +61,33 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="main-title">
       <h1>Great teamwork starts with a digital HQ</h1>
 
       <p>Slack is free to try for as long as you'd like.</p>
 
-      <div>
-        <button>Sign up with email</button>
+      <div class="header-buttons">
+        <button class="email-button box-buttons">Sign up with email</button>
 
-        <button>
+        <button class="google-button box-buttons">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
+          <span> </span>
         </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" id="big-image"/>
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="companies-logo">
       <p>Trusted by companies all over the world</p>
 
-      <div>
+      <div class="logos">
         <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" />
@@ -97,7 +98,7 @@ <h1>Great teamwork starts with a digital HQ</h1>
 
     </section>
 
-    <section>
+    <section class="teams-part">
       <h3>Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
@@ -129,7 +130,7 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section class="welcome-digital">
       <h3>Welcome to your new digital HQ</h3>
 
       <button>Try for free</button>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..745c14e77 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,89 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+img {
+    max-width: 80vw;
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+header {
+    background-color: #540B51;
+    color: white;
+}
+.box-buttons{
+    width: 100%;
+    
+}
+.logos img {
+    width: 8%;
+}
+.google-button {
+    background-color: #4285F4;
+}
+
+.companies-logo {
+    background-color: #F3EAE2;
+}
+
+.welcome-digital {
+    background-color: #540B51;
+}
+@media (max-width: 1024px) {
+
+nav {
+    display: flex;
+    flex-direction: row;
+    background-color: #540B51;
+    justify-content: space-between;
+}
+nav img {
+    width: 50px;
+}
+nav button img {
+    width: 8px;
+}
+.nav-list {
+    display: none;
+}
+.main-title{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.main-title h1 {
+    align-content: center;
+}
+.header-buttons {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.email-button,.google-button {
+    margin: 10px;
+}
+.google-button {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.google-button img {
+    height: 20px;
+    background-color: white;
+}
+.companies-logo {
+    display: flex;
+    flex-direction: column;
+
+}
+.teams-part {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.teams-parth3,.teams-part ul {
+    justify-content: center;
+}
+}
\ No newline at end of file