diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..7dc674eb5 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -17,7 +17,36 @@
 </head>
 
 <body>
-  <!-- NAVBAR -->
+  
+  <!-- MOBILE NAVBAR -->
+<nav class="mobile-nav">
+  <div class="nav-header">
+    <img src="./images/slack-logo.png" alt="Slack logo" class="logo" />
+    <div class="mobile-actions">
+      <button class="search-icon">
+        <img src="./images/icon-search.png" alt="Search icon">
+      </button>
+      <button class="hamburger" onclick="toggleMenu()">☰</button>
+    </div>
+  </div>
+
+  <div class="nav-menu" hidden>
+    <ul>
+      <li><a href="#">Product</a></li>
+      <li><a href="#">Solutions</a></li>
+      <li><a href="#">Resources</a></li>
+      <li><a href="#">Pricing</a></li>
+    </ul>
+
+    <ul>
+      <li><a href="#">Sign in</a></li>
+      <li><a href="#">Try for free</a></li>
+    </ul>
+  </div>
+</nav>
+
+
+<!-- NAVBAR -->
   <nav>
     <div>
       <img src="./images/slack-logo.png" alt="Slack logo" />
@@ -60,33 +89,27 @@
 
 
   <!-- HEADER -->
-  <header>
-    <div>
-      <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>
-
-        <button>
-          <img src="./images/logo-google.png" alt="Google logo" />
-          <span>Sign up with Google</span>
-        </button>
-      </div>
-
-    </div>
-
-    <div>
-      <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
-    </div>
-  </header>
+  <header class="hero">
+  <div class="hero-content">
+    <h1>Great teamwork starts with a digital HQ</h1>
+    <p><span class="highlight">Slack is free to try</span> for as long as you'd like.</p>
+    <button>Sign up with email</button>
+    <button class="google">
+      <img class="logo-google" src="./images/logo-google.png" alt="Google logo" />
+      <span>Sign up with Google</span>
+    </button>
+  </div>
+
+  <div class="hero-image">
+    <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
+  </div>
+</header>
 
   <main>
-    <section>
-      <p>Trusted by companies all over the world</p>
+    <section style="background-color: #F3EAE2;">
+      <p><strong style="text-transform: uppercase">Trusted by companies all over the world</strong></p>
 
-      <div>
+      <div class="logo-grid">
         <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" />
@@ -98,13 +121,13 @@ <h1>Great teamwork starts with a digital HQ</h1>
     </section>
 
     <section>
-      <h3>Teams large and small rely on Slack</h3>
+      <h3 style="color: #611f69">Teams large and small rely on Slack</h3>
       <p>Slack securely scales up to support collaboration at the world’s biggest companies.</p>
 
 
-      <ul>
+      <ul class="data-list">
         <li>
-          <p><span>85%</span></p>
+          <p><span class="data-nums">85%</span></p>
           <p>
             of users say Slack has improved communication
             <sup>*</sup>
@@ -112,7 +135,7 @@ <h3>Teams large and small rely on Slack</h3>
         </li>
 
         <li>
-          <p><span>86%</span></p>
+          <p><span class="data-nums">86%</span></p>
           <p>
             feel their ability to work remotely has improved has improved
             <sup>*</sup>
@@ -120,7 +143,7 @@ <h3>Teams large and small rely on Slack</h3>
         </li>
 
         <li>
-          <p><span>88%</span></p>
+          <p><span class="data-nums">88%</span></p>
           <p>
             feel more connected to their teams*
             <sup>*</sup>
@@ -129,11 +152,14 @@ <h3>Teams large and small rely on Slack</h3>
       </ul>
     </section>
 
-    <section>
+    <section class="CTA">
       <h3>Welcome to your new digital HQ</h3>
 
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <div style="display: flex; flex-direction: column; align-items:stretch; gap: 1rem">
+        <button style="color:#540B51; text-transform: uppercase;">Try for free</button>
+        <button style="background-color: #540B51; color: white; border: 2px solid white; text-transform: uppercase">Talk to sales</button>
+      </div>
+      
     </section>
 
   </main>
@@ -145,13 +171,21 @@ <h3>Welcome to your new digital HQ</h3>
       <li>Terms</li>
       <li>Cookie Preferences</li>
       <li>Contact Us</li>
-      <li>Change Region</li>
-      <li>Download Slack</li>
+      <div class="bullet">
+        <img src="./images/icon-region.png" alt="region icon" class="footer-icon" />
+        <li>Change Region</li>
+      </div>
+      <div class="bullet">
+        <img src="./images/icon-download.png" alt="region icon" class="footer-icon" />
+        <li style="color: #2E71A6">Download Slack</li>
+      </div>
+  
+      
     </ul>
 
     <hr>
 
-    <ul>
+    <ul style="flex-direction: row; justify-content: space-between;">
       <li>
         <i class="fab fa-twitter"></i>
       </li>
@@ -174,6 +208,13 @@ <h3>Welcome to your new digital HQ</h3>
     </div>
 
   </footer>
+  <script>
+    function toggleMenu() {
+      const menu = document.querySelector('.nav-menu');
+      menu.hidden = !menu.hidden;
+    }
+  </script>
+  
 </body>
 
 </html>
\ No newline at end of file
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..532234dc3 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -1,10 +1,437 @@
-/*
-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
+/* Color Palette
+--------------------------
+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;
+  }
+  
+  body {
+    font-family: "Helvetica", sans-serif;
+    line-height: 1.6;
+    background-color: #ffffff;
+    overflow-x: hidden;
+  }
+  
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  ul {
+    list-style: none;
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  ul.data-list{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  ul.p{
+    margin-block-end: 0rem;
+  }
+  
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+ 
+  nav img.logo {
+    height: 30px;
+    width: auto;
+  }
+
+  span.data-nums{
+    font-size: 4rem;
+  }
+  
+  
+  /* -------------------
+    Mobile Navigation
+  -------------------- */
+  .mobile-nav {
+    background-color: #540B51;
+    color: white;
+    padding: 1rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%
+  }
+  
+  .mobile-nav .nav-header {
+    display: flex;
+    flex-direction: row;
+    justify-content:space-between;
+    gap: 2rem;
+    align-items: center;
+    align-content: center;
+    width: 100%
+  }
+  
+  .mobile-nav . {
+    height: 30px;
+  }
+  
+  .mobile-nav .hamburger {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+  }
+  
+  .mobile-nav .nav-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+  
+  .mobile-nav ul {
+    flex-direction: column;
+  }
+  .mobile-nav .nav-menu a {
+    color: white;
+    font-weight: bold;
+  }
+  
+  .mobile-nav .nav-menu[hidden] {
+    display: none;
+  }
+
+  .mobile-nav .mobile-actions {
+    display: flex;
+    flex-direction: row;
+  }
+  
+  /* -------------------
+    Header
+  -------------------- */
+  header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 3rem 2rem;
+    background: #540B51;
+    text-align: center;
+  }
+  
+  header > div {
+    padding: 1rem;
+  }
+  
+  header h1 {
+    font-size: 2.5rem;
+    color: white;
+    margin-bottom: 1rem;
+  }
+  
+  header p {
+    font-size: 1.2rem;
+    color: white;
+    margin-bottom: 2rem;
+  }
+  
+  header button {
+    padding: 0.8rem 1.2rem;
+    margin: 0.5rem auto;
+    border: none;
+    border-radius: 4px;
+    background-color: white;
+    color: #540B51;
+    font-weight: bold;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: block;
+    width: 100%;
+  }
+  
+  header button img {
+    height: 20px;
+    width: auto;
+  }
+  
+  /* -------------------
+    Main Content
+  -------------------- */
+  /* main {
+    padding: 3rem 2rem;
+  } */
+  
+  main section {
+    margin-bottom: 3rem;
+    text-align: center;
+    padding: 3rem 2rem;
+  }
+  
+  main h3 {
+    margin-bottom: 1rem;
+    color: #191817;
+  }
+  
+  main p {
+    max-width: 800px;
+    margin: 0 auto 2rem;
+    color: #000000;
+  }
+  
+  main ul {
+    justify-content: center;
+    gap: 2rem;
+  }
+  
+  main li span {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #611f69;
+  }
+  main section.CTA {
+    background-color: #540B51;
+  }  
+  main section.CTA h3 {
+    color: white
+  }
+  /* main section.CTA button {
+    background-color: transparent;
+    border: 1px;
+    border-color: white;
+  } */
+ 
+  
+  /* -------------------
+    Section Buttons
+  -------------------- */
+  /* section button {
+    margin: 0.5rem;
+    padding: 0.8rem 1.5rem;
+    background-color: #611f69;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+  } */
+  button {
+    display: flex;                
+    align-items: center;         
+    justify-content: center;      
+    gap: 10px;                    
+    padding: 0.8rem 1.2rem;       
+    border: none;                 
+    color: white;
+    background-color: white;                 
+    border-radius: 4px;           
+    font-weight: bold;            
+    cursor: pointer;             
+  }
+
+  button img {
+    height: 20px;  
+    width: auto;   
+  }
+
+  button span {
+    text-align: center;  
+  }
+
+  button.google {
+    display: flex;                
+    align-items: center;          
+    justify-content: center;      
+    background-color: #4285F4;    
+    color: white;                 
+    padding: 8px 16px;            
+    border: none;                 
+    border-radius: 4px;           
+    cursor: pointer;             
+  }
+
+  button.google img.logo-google {
+    height: 35px;                 
+    width: auto;                  
+    border-radius: 2px;           
+    padding: 4px;                
+    background-color: white;      
+    margin-right: 12px;           
+  }
+
+  button.google span {
+    text-align: center;           
+    flex-grow: 1;
+  }
+ 
+
+  /* Style for the search button */
+  button.search-icon {
+    background: transparent;  
+    border: none;            
+    padding: 0;               
+    cursor: pointer;        
+  }
+  
+  button.search-icon img {
+    width: 20px;   
+    height: 20px;  
+  }
+
+   /* -------------------
+    imgs
+  -------------------- */
+
+.logo-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+   
+  }
+  
+  .logo-grid img {
+    max-height: 40px;
+    object-fit: contain;
+  }
+  
+  /* -------------------
+    Footer
+  -------------------- */
+  footer {
+    padding: 2rem;
+    text-align: center;
+  }
+  
+  footer ul {
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  footer hr {
+    border: 0.5px solid #ccc;
+    margin: 1rem 0;
+  }
+  
+  footer i {
+    font-size: 1.5rem;
+    margin: 0 0.5rem;
+  }
+  
+  footer small {
+    display: block;
+    margin-top: 1rem;
+    font-size: 0.8rem;
+    color: #555;
+  }
+
+  footer img.footer-icon {
+    display:block; 
+    contain:center; 
+    object-fit:contain; 
+    margin:auto;
+  }
+  footer ul div.bullet{
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    gap: 8px;
+  }
+  
+  /* -------------------
+    Default Nav (Hidden)
+  -------------------- */
+  nav:not(.mobile-nav) {
+    display: none;
+  }
+  
+  /* -------------------
+    Media Queries
+  -------------------- */
+  @media (min-width: 768px) {
+    /* Show desktop nav */
+    .mobile-nav {
+      display: none;
+    }
+  
+    nav:not(.mobile-nav) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+      background-color: #540B51;
+      color: white;
+      flex-wrap: wrap;
+    }
+  
+    nav:not(.mobile-nav) ul {
+      gap: 1rem;
+    }
+  
+    nav:not(.mobile-nav) a {
+      color: white;
+      font-weight: bold;
+    }
+  
+    nav:not(.mobile-nav) img {
+      height: 30px;
+    }
+  
+    header {
+      flex-direction: row;
+      text-align: left;
+    }
+  
+    header button {
+      display: inline-block;
+      width: auto;
+      margin-right: 1rem;
+    }
+  
+    main ul {
+      flex-direction: row;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    header h1 {
+      font-size: 1.8rem;
+    }
+  
+    main h3 {
+      font-size: 30px;
+    }
+  
+    nav {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    nav > div {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    footer ul {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        font-weight: bold;
+    }
+ 
+  }
+  
\ No newline at end of file
