diff --git a/starter_code/index.html b/starter_code/index.html
index 2f593610f..d3946b596 100644
--- a/starter_code/index.html
+++ b/starter_code/index.html
@@ -18,75 +18,53 @@
 
 <body>
   <!-- NAVBAR -->
-  <nav>
-    <div>
-      <img src="./images/slack-logo.png" alt="Slack logo" />
-
-      <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>
+  <nav class="navbar">
+    <div class="navbar-left">
+      <img src="./images/slack-logo.png" alt="Slack logo" class="logo" />
+      <ul class="nav-links">
+        <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>
     </div>
-
-    <div>
-      <button>
+    <div class="navbar-right">
+      <button class="search-btn">
         <img src="./images/icon-search.png" alt="Search icon">
       </button>
-
-      <button>
+      <button class="menu-btn">
         <img src="./images/icon-menu.png" alt="Menu icon">
       </button>
-
-      <ul hidden>
-        <li>
-          <a href="#">Sign in</a>
-        </li>
-        <li>
-          <a href="#">Try for free</a>
-        </li>
+      <ul class="auth-links" hidden>
+        <li><a href="#">Sign in</a></li>
+        <li><a href="#">Try for free</a></li>
       </ul>
     </div>
   </nav>
 
 
   <!-- HEADER -->
-  <header>
-    <div>
+  <header class="hero">
+    <div class="hero-content">
       <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>
+      <div class="hero-buttons">
+        <button class="email-btn">Sign up with email</button>
+        <button class="google-btn">
           <img src="./images/logo-google.png" alt="Google logo" />
           <span>Sign up with Google</span>
         </button>
       </div>
-
     </div>
-
-    <div>
+    <div class="hero-image">
       <img src="./images/hero-product-ui.png" alt="Slack app screenshot" />
     </div>
   </header>
 
   <main>
-    <section>
+    <section class="trusted-by">
       <p>Trusted by companies all over the world</p>
-
-      <div>
+      <div class="trusted-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" />
@@ -94,52 +72,37 @@ <h1>Great teamwork starts with a digital HQ</h1>
         <img src="./images/logo-nyt.png" alt="New York Times logo" />
         <img src="./images/logo-spotify.png" alt="Spotify logo" />
       </div>
-
     </section>
-
-    <section>
+    <section class="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>
-
-
-      <ul>
+      <ul class="stats-list">
         <li>
           <p><span>85%</span></p>
-          <p>
-            of users say Slack has improved communication
-            <sup>*</sup>
-          </p>
+          <p>of users say Slack has improved communication<sup>*</sup></p>
         </li>
-
         <li>
           <p><span>86%</span></p>
-          <p>
-            feel their ability to work remotely has improved has improved
-            <sup>*</sup>
-          </p>
+          <p>feel their ability to work remotely has improved<sup>*</sup></p>
         </li>
-
         <li>
           <p><span>88%</span></p>
-          <p>
-            feel more connected to their teams*
-            <sup>*</sup>
-          </p>
+          <p>feel more connected to their teams<sup>*</sup></p>
         </li>
       </ul>
     </section>
-
-    <section>
+    <section class="cta-section">
       <h3>Welcome to your new digital HQ</h3>
-
-      <button>Try for free</button>
-      <button>Talk to sales</button>
+      <div class="cta-buttons">
+        <button class="try-btn">Try for free</button>
+        <button class="sales-btn">Talk to sales</button>
+      </div>
     </section>
 
   </main>
 
-  <footer>
-    <ul>
+  <footer class="footer">
+    <ul class="footer-links">
       <li>Status</li>
       <li>Privacy</li>
       <li>Terms</li>
@@ -148,31 +111,18 @@ <h3>Welcome to your new digital HQ</h3>
       <li>Change Region</li>
       <li>Download Slack</li>
     </ul>
-
     <hr>
-
-    <ul>
-      <li>
-        <i class="fab fa-twitter"></i>
-      </li>
-      <li>
-        <i class="fab fa-facebook"></i>
-      </li>
-      <li>
-        <i class="fab fa-youtube"></i>
-      </li>
-      <li>
-        <i class="fab fa-linkedin"></i>
-      </li>
+    <ul class="footer-social">
+      <li><i class="fab fa-twitter"></i></li>
+      <li><i class="fab fa-facebook"></i></li>
+      <li><i class="fab fa-youtube"></i></li>
+      <li><i class="fab fa-linkedin"></i></li>
     </ul>
-
-    <div>
+    <div class="footer-copy">
       <small>
-        &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by
-        their respective owners.
+        &copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by their respective owners.
       </small>
     </div>
-
   </footer>
 </body>
 
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css
index 59f4a7798..8dd2ca033 100644
--- a/starter_code/stylesheets/style.css
+++ b/starter_code/stylesheets/style.css
@@ -1,10 +1,252 @@
-/*
-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
-*/
+
+/* COLORS */
+:root {
+	--purple: #540B51;
+	--ivory: #F3EAE2;
+	--blue: #4285F4;
+	--black: #191817;
+	--yellow: #ECB12F;
+	--link-blue: #2E71A6;
+	--footer-grey: #454245;
+}
+
+body {
+	margin: 0;
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	background: var(--ivory);
+	color: var(--black);
+}
+
+/* NAVBAR */
+.navbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--purple);
+	padding: 1.2rem 2rem;
+}
+.navbar-left {
+	display: flex;
+	align-items: center;
+}
+.logo {
+	height: 40px;
+	margin-right: 2rem;
+}
+.nav-links {
+	display: flex;
+	gap: 1.5rem;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.nav-links a {
+	color: #fff;
+	text-decoration: none;
+	font-weight: 500;
+}
+.navbar-right {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+.search-btn, .menu-btn {
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+/* HERO SECTION */
+.hero {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--purple);
+	color: #fff;
+	padding: 3rem 2rem 2rem 2rem;
+	flex-wrap: wrap;
+}
+.hero-content {
+	max-width: 400px;
+	margin-right: 3rem;
+}
+.hero-content h1 {
+	font-size: 2.5rem;
+	margin-bottom: 1rem;
+}
+.hero-content p {
+	font-size: 1.2rem;
+	margin-bottom: 2rem;
+}
+.hero-buttons {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+.email-btn {
+	background: #fff;
+	color: var(--purple);
+	border: none;
+	padding: 0.8rem 1.2rem;
+	border-radius: 4px;
+	font-size: 1rem;
+	font-weight: bold;
+	cursor: pointer;
+}
+.google-btn {
+	display: flex;
+	align-items: center;
+	background: var(--blue);
+	color: #fff;
+	border: none;
+	padding: 0.8rem 1.2rem;
+	border-radius: 4px;
+	font-size: 1rem;
+	font-weight: bold;
+	cursor: pointer;
+	gap: 0.5rem;
+}
+.hero-image img {
+	max-width: 350px;
+	width: 100%;
+	border-radius: 10px;
+	box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+}
+
+/* TRUSTED BY */
+.trusted-by {
+	text-align: center;
+	margin: 2rem 0 1rem 0;
+}
+.trusted-logos {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 2rem;
+	flex-wrap: wrap;
+	margin-top: 1rem;
+}
+.trusted-logos img {
+	height: 40px;
+	max-width: 120px;
+}
+
+/* STATS SECTION */
+.stats {
+	background: #fff;
+	margin: 2rem auto;
+	padding: 2rem 1rem;
+	border-radius: 10px;
+	max-width: 900px;
+	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+	text-align: center;
+}
+.stats-list {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+	list-style: none;
+	padding: 0;
+	margin: 2rem 0 0 0;
+}
+.stats-list li {
+	background: var(--ivory);
+	border-radius: 8px;
+	padding: 1.2rem 2rem;
+	min-width: 160px;
+}
+.stats-list span {
+	color: var(--yellow);
+	font-size: 2rem;
+	font-weight: bold;
+}
+
+/* CTA SECTION */
+.cta-section {
+	text-align: center;
+	margin: 2rem 0 3rem 0;
+}
+.cta-buttons {
+	display: flex;
+	justify-content: center;
+	gap: 1.5rem;
+	margin-top: 1rem;
+}
+.try-btn, .sales-btn {
+	background: var(--purple);
+	color: #fff;
+	border: none;
+	padding: 0.8rem 1.5rem;
+	border-radius: 4px;
+	font-size: 1rem;
+	font-weight: bold;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+.try-btn:hover, .sales-btn:hover {
+	background: #3a0736;
+}
+
+/* FOOTER */
+.footer {
+	background: #fff;
+	color: var(--footer-grey);
+	padding: 2rem 1rem 1rem 1rem;
+	text-align: center;
+	border-top: 1px solid #eee;
+}
+.footer-links {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+	list-style: none;
+	padding: 0;
+	margin: 0 0 1rem 0;
+}
+.footer-social {
+	display: flex;
+	justify-content: center;
+	gap: 1.5rem;
+	list-style: none;
+	padding: 0;
+	margin: 1rem 0;
+	font-size: 1.5rem;
+}
+.footer-copy {
+	margin-top: 1rem;
+	font-size: 0.9rem;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid #eee;
+	margin: 1.5rem 0;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+	.hero {
+		flex-direction: column;
+		text-align: center;
+	}
+	.hero-content {
+		margin-right: 0;
+		margin-bottom: 2rem;
+	}
+	.stats-list {
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+	}
+	.cta-buttons {
+		flex-direction: column;
+		gap: 1rem;
+	}
+	.trusted-logos {
+		gap: 1rem;
+	}
+	.footer-links {
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+}
diff --git a/starter_code/summary.md b/starter_code/summary.md
new file mode 100644
index 000000000..c07ab96da
--- /dev/null
+++ b/starter_code/summary.md
@@ -0,0 +1,30 @@
+# Slack Flexbox Clone – Lesson Summary
+
+## Key Learnings
+
+- **Semantic HTML Structure:**
+  - Organize content using nav, header, main, and footer for clarity and accessibility.
+
+- **Flexbox Layout:**
+  - Use Flexbox (`display: flex`, `justify-content`, `align-items`, etc.) to align and distribute elements efficiently.
+  - Build responsive layouts that adapt to different screen sizes.
+
+- **CSS Styling:**
+  - Apply consistent colors, spacing, and fonts to match a professional design.
+  - Use variables and comments for maintainable code.
+
+- **Images & Icons:**
+  - Integrate images and Font Awesome icons to enhance the interface.
+
+- **Responsiveness:**
+  - Use media queries and flexible units to ensure the site works on all devices.
+
+- **Best Practices:**
+  - Separate structure (HTML) from style (CSS).
+  - Write clean, readable, and well-commented code.
+
+---
+
+## Thank You
+
+Thank you, Ironhack, for the opportunity to learn and grow as a web developer. Special thanks to Professor Jorge for his guidance and support throughout the course. Project by goldmonkey.studio Elder Miranda.
