diff --git a/Aroma/images/coffee.png b/Aroma/images/coffee.png
new file mode 100644
index 0000000..de513dc
Binary files /dev/null and b/Aroma/images/coffee.png differ
diff --git a/Aroma/images/cup.png b/Aroma/images/cup.png
new file mode 100644
index 0000000..50039e8
Binary files /dev/null and b/Aroma/images/cup.png differ
diff --git a/Aroma/images/special.png b/Aroma/images/special.png
new file mode 100644
index 0000000..8ff2087
Binary files /dev/null and b/Aroma/images/special.png differ
diff --git a/Aroma/images/tea.png b/Aroma/images/tea.png
new file mode 100644
index 0000000..8922efa
Binary files /dev/null and b/Aroma/images/tea.png differ
diff --git a/Aroma/index.html b/Aroma/index.html
index ecd2f95..aef34af 100644
--- a/Aroma/index.html
+++ b/Aroma/index.html
@@ -9,31 +9,57 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
 </head>
 <body>
-    <header>
-        <nav>
-            <div class="logo">
-                <img src="logo-placeholder.png" alt="Aroma Logo">
-            </div>
-            <ul class="nav-links">
-                <li><a href="#home">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#menu">Menu</a></li>
-                <li><a href="#contact">Contact</a></li>
-            </ul>
-            <!-- Dark Mode Toggle Icon (Sun/Moon) -->
-            <div class="dark-mode-toggle" id="dark-mode-toggle">
-                <i class="fas fa-sun" id="dark-mode-icon"></i> <!-- Sun Icon by default -->
-            </div>
-        </nav>
+
+
+    <nav class="navbar">
+        <div class="logo">Aroma </div>
+        <ul class="nav-links">
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Menu</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+    </nav>
+
+     <!-- Hero Section -->
+     <header class="hero">
+        <div class="content">
+            <h1 class="fade-in">The Fragrance of Happiness in a Cup</h1>
+            <p class="fade-in">Where Every Sip Tells a Story</p>
+            <button class="btn glow-on-hover" id="explore-btn">Discover More</button>
+        </div>
+        <div class="steam-container">
+            <div class="steam steam-1"></div>
+            <div class="steam steam-2"></div>
+            <div class="steam steam-3"></div>
+            <div class="steam steam-4"></div>
+        </div>
+        <div class="cup-container">
+            <img src="images/cup.png" alt="Aroma Pragna Cup" class="cup">
+        </div>
+        
+        
     </header>
 
-    <section id="home" class="hero">
-        <div class="hero-text">
-            <h1>Welcome to Aroma</h1>
-            <h5> The Fragrance of Happiness in a Cup.Where Every Sip Tells a Story</h5>
+    <!-- Featured Section -->
+    <section class="featured">
+        <h2>Our Special Brews</h2>
+        <div class="cards">
+            <div class="card">
+                <img src="images/coffee.png" alt="Rich Coffee">
+                <h3>Rich Coffee</h3>
+            </div>
+            <div class="card">
+                <img src="images/tea.png" alt="Herbal Tea">
+                <h3>Herbal Tea</h3>
+            </div>
+            <div class="card">
+                <img src="images/special.png" alt="Signature Blends">
+                <h3>Signature Blends</h3>
+            </div>
         </div>
     </section>
-
+  
     <footer>
         <p class="copyright">Aroma - Created By Seetha Pragna❤️ | ©
             <script>
diff --git a/Aroma/script.js b/Aroma/script.js
index 361f70e..aa4bfbf 100644
--- a/Aroma/script.js
+++ b/Aroma/script.js
@@ -1,20 +1,30 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const navLinks = document.querySelectorAll(".nav-links a");
-    const darkModeToggle = document.getElementById("dark-mode-toggle");
-    const darkModeIcon = document.getElementById("dark-mode-icon");
-
-    // Smooth scrolling
-    navLinks.forEach(link => {
-        link.addEventListener("click", (event) => {
-            event.preventDefault();
-            const targetSection = document.querySelector(link.getAttribute("href"));
-            
-            if (targetSection) {
-                targetSection.scrollIntoView({
-                    behavior: "smooth"
-                });
-            }
-        });
+    // Scroll effect when clicking "Discover More"
+   document.getElementById("explore-btn").addEventListener("click", () => {
+       document.querySelector(".featured").scrollIntoView({ behavior: "smooth" });
+   });
+});
+
+document.getElementById("menu-toggle").addEventListener("click", function () {
+   document.getElementById("nav-links").classList.toggle("show");
+});
+
+const navLinks = document.querySelectorAll(".nav-links a");
+const darkModeToggle = document.getElementById("dark-mode-toggle");
+const darkModeIcon = document.getElementById("dark-mode-icon");
+
+// Smooth scrolling
+navLinks.forEach(link => {
+    link.addEventListener("click", (event) => {
+        event.preventDefault();
+        const targetSection = document.querySelector(link.getAttribute("href"));
+        
+        if (targetSection) {
+            targetSection.scrollIntoView({
+                behavior: "smooth"
+            });
+        }
+
     });
 
     // Dark mode toggle
@@ -32,3 +42,18 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 });
+
+// Dark mode toggle
+darkModeToggle.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+    document.querySelector("nav").classList.toggle("dark-mode");
+    document.querySelector(".hero").classList.toggle("dark-mode");
+    document.querySelector("footer").classList.toggle("dark-mode");
+
+    // Toggle the dark mode icon (sun/moon)
+    if (document.body.classList.contains("dark-mode")) {
+        darkModeIcon.src = "moon-icon.png"; // Replace with moon icon for dark mode
+    } else {
+        darkModeIcon.src = "sun-icon.png"; // Replace with sun icon for light mode
+    }
+});
\ No newline at end of file
diff --git a/Aroma/styles.css b/Aroma/styles.css
index d27fa30..b1019db 100644
--- a/Aroma/styles.css
+++ b/Aroma/styles.css
@@ -1,44 +1,95 @@
-/* General Reset */
-* {
+/* General Styles */
+body {
+    font-family: "Poppins", sans-serif;
     margin: 0;
     padding: 0;
+    background: #d9c2a5;
+    color: #4a2d19;
+    text-align: center;
+    transition: background 0.5s, color 0.5s;
+
     box-sizing: border-box;
 }
 
-body {
-    font-family: Arial, sans-serif;
-    background-color: #e2dcdc;
-    transition: background-color 0.3s ease, color 0.3s ease;
-}
+
 
 /* Navigation Bar */
-nav {
+.navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #6F4E37;
-    padding: 1rem 2rem;
+    padding: 15px 5%;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+    box-sizing: border-box;
 }
 
+
+/* Logo */
+.navbar .logo {
+    font-size: 1.8rem;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+
 .nav-links {
     list-style: none;
     display: flex;
+    gap: 30px;
+    margin: 0;
+    padding: 0;
 }
 
 .nav-links li {
-    margin: 0 15px;
+    display: inline-block;
 }
 
 .nav-links a {
-    color: white;
     text-decoration: none;
-    font-weight: bold;
-    font-size: 16px;
-    transition: color 0.3s ease-in-out;
+    color: white;
+    font-size: 1.1rem;
+    transition: color 0.3s;
+    padding: 10px 15px;
 }
 
 .nav-links a:hover {
-    color: #FFD700; /* Gold hover effect */
+    color: #ffcc80;
+}
+
+/* Responsive Fixes */
+@media (max-width: 1024px) {
+    .nav-links {
+        gap: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .nav-links {
+        flex-direction: column;
+        text-align: center;
+        width: 100%;
+    }
+
+    .nav-links li {
+        padding: 10px 0;
+    }
+}
+
+.theme-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
 }
 
 /* Dark Mode Styles */
@@ -65,25 +116,20 @@ footer.dark-mode {
 
 /* Hero Section */
 .hero {
-    background: url('light-hero-bg.jpg') no-repeat center center/cover;
-    height: 100vh;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: white;
-    text-align: center;
-    padding: 0 20px;
+    height: 100vh;
+    background: url('hero-bg.jpg') no-repeat center center/cover;
+    position: relative;
+    text-shadow: 2px 2px 5px black;
+    padding-top: 20px;
 }
 
 .hero h1 {
     font-size: 3rem;
     margin-bottom: 10px;
-    color: #333;
-}
-
-.hero h5 {
-    margin-bottom: 10px;
-    color: #333;
 }
 
 .hero p {
@@ -91,13 +137,151 @@ footer.dark-mode {
     margin-bottom: 20px;
 }
 
+.btn {
+    background-color: #d2691e;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.3s, background 0.3s;
+}
+
+.btn:hover {
+    transform: scale(1.1);
+    background: #ff8c00;
+}
+
+/* Glow Button */
+.glow-on-hover {
+    animation: glow 1.5s infinite alternate;
+}
+
+@keyframes glow {
+    from { box-shadow: 0 0 5px #ff8c00; }
+    to { box-shadow: 0 0 20px #ff8c00; }
+}
+
+/* Steam Animation */
+
+.steam-container {
+    position: absolute;
+    bottom: 120px; /* Adjusted height to rise from the cup */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+}
+
+/* Individual Steam Waves */
+.steam {
+    width: 15px;
+    height: 80px;
+    background: rgba(150, 75, 0, 0.4); /* Light coffee brown steam */
+    border-radius: 50%;
+    opacity: 0;
+    filter: blur(12px);
+    position: absolute;
+    animation: steam-rise 4s infinite ease-in-out;
+}
+
+/* Adjust each steam line's delay and width */
+.steam-1 {
+    left: 10%;
+    animation-delay: 0s;
+}
+.steam-2 {
+    left: 30%;
+    animation-delay: 1s;
+}
+.steam-3 {
+    left: 50%;
+    animation-delay: 2s;
+}
+.steam-4 {
+    left: 70%;
+    animation-delay: 3s;
+}
+
+/* Keyframes for Steam Rising */
+@keyframes steam-rise {
+    0% {
+        transform: translateY(20px) scaleX(1);
+        opacity: 0;
+    }
+    30% {
+        opacity: 0.6;
+    }
+    50% {
+        transform: translateY(-50px) scaleX(1.3) translateX(-5px); /* Slight wave */
+        opacity: 0.8;
+    }
+    75% {
+        transform: translateY(-80px) scaleX(0.9) translateX(5px); /* Wavy motion */
+        opacity: 0.4;
+    }
+    100% {
+        transform: translateY(-120px) scaleX(1.1) translateX(-3px);
+        opacity: 0;
+    }
+}
+
+
+/* Featured Section */
+.featured {
+    padding: 60px 20px;
+}
+
+.featured h2 {
+    font-size: 2rem;
+    margin-bottom: 20px;
+}
+
+.cards {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.card {
+    background: white;
+    color: #5e3a1d;
+    padding: 20px;
+    border-radius: 10px;
+    width: 200px;
+    font-weight: bold;
+    transition: transform 0.3s;
+    text-align: center;
+}
+
+.card img {
+    width: 100%;
+    border-radius: 8px;
+}
+
+.card:hover {
+    transform: scale(1.1);
+    background: #ff8c00;
+    color: white;
+}
+
+
 /* Footer */
 footer {
-    background: #333;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 20px;
     color: white;
-    text-align: center;
-    padding: 1rem 0;
-    font-size: 14px;
+    margin-top: 30px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 /* Dark Mode Toggle (Icon) */
