diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..65d049304 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -20,7 +20,7 @@
   <!-- NAVBAR -->
   <nav>
     <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
+      <img id="logo" src="./images/slack-logo.png" alt="Slack logo" />
 
       <ul>
         <li>
@@ -61,29 +61,30 @@
 
   <!-- HEADER -->
   <header>
-    <div>
+    <div class="header">
       <h1>Great teamwork starts with a digital HQ</h1>
 
       <p>Slack is free to try for as long as you'd like.</p>
 
-      <div>
+      <div class="buttons">
         <button>Sign up with email</button>
 
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
+        <button class="google">
+          <img id="googlelogo" 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" />
-    </div>
+   
+      <img class="screenshot" src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+    
   </header>
 
   <main>
-    <section>
+    
       <p>Trusted by companies all over the world</p>
 
       <div>
@@ -95,7 +96,6 @@ <h1>Great teamwork starts with a digital HQ</h1>
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
 
-    </section>
 
     <section>
       <h3>Teams large and small rely on Slack</h3>
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..d1602aa98 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -8,3 +8,94 @@ paragraph yellow: #ECB12F
 links blue: #2E71A6
 footer links grey: #454245
 */
+
+ /* 
+background purple: #540B51
+background ivory: #F3EAE2
+button blue: #4285F4
+titles black: #191817
+paragraph black: #000000
+paragraph yellow: #ECB12F
+links blue: #2E71A6
+footer links grey: #454245
+*/
+
+* {
+    margin: 0;
+    padding : 0 ;
+    box-sizing: border-box;
+}
+
+nav {
+    display: flex ;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: #540B51;
+    padding: 10px;
+    width: 100%;
+    
+}
+nav button {
+    background-color: #540B51;
+    border: none;
+    padding: 5px;
+}
+
+nav ul {
+    display: none;
+}
+
+#logo {
+    width: 30%;
+}
+
+header {
+    background-color: #540B51;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+header button {
+    padding: 10px;
+    border-radius: 5px;
+    width: 100%;
+    margin: 10px;
+    border: none;
+}
+
+.google{
+    background-color: #4285F4;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color:white;
+    width: 100%;
+    border: none;
+}
+
+
+#googlelogo {
+    width: 5%;
+    background-color: white;
+}
+
+.screenshot {
+    width:  100%;
+}
+
+.companies img {
+    width: 100px;
+}