diff --git a/Age Calculator/Age.html b/Age Calculator/Age.html
index 97afcedb9..68eecc915 100644
--- a/Age Calculator/Age.html	
+++ b/Age Calculator/Age.html	
@@ -1,29 +1,121 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Age Calculator</title>
-    <link href="style.css" rel="stylesheet">
-    <link type="image/png" sizes="32x32" rel="icon" href="icons8-puzzle-16.png">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Age Calculator</title>
+  <link href="style.css" rel="stylesheet" />
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
+    crossorigin="anonymous"
+  />
+  <link
+    type="image/png"
+    sizes="32x32"
+    rel="icon"
+    href="icons8-puzzle-16.png"
+  />
+  <style>
+    body {
+      background: #f8f9fa;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    .container {
+      max-width: 400px;
+      margin-top: 3rem;
+      padding: 2rem;
+      background: white;
+      border-radius: 0.75rem;
+      box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+    }
+    #age {
+      margin-top: 1rem;
+      font-weight: 600;
+      font-size: 1.25rem;
+      color: #0d6efd;
+    }
+    input {
+      text-align: center;
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+      border-radius: 0.375rem;
+      border: 1px solid #ced4da;
+      transition: border-color 0.3s ease;
+    }
+    input:focus {
+      border-color: #0d6efd;
+      box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
+      outline: none;
+    }
+    p.instructions {
+      font-weight: 500;
+      color: #6c757d;
+      margin-bottom: 1.5rem;
+    }
+    button#btn-start {
+      width: 100%;
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+    @media (max-width: 450px) {
+      .container {
+        margin: 2rem 1rem;
+        padding: 1.5rem;
+      }
+    }
+  </style>
 </head>
 <body>
-    <nav class="navbar navbar-dark bg-dark">
-        <div class="container-fluid">
-            <span class="navbar-brand mb-0 h1">Age Calculator</span>
-        </div>
-    </nav>
-    <div class="container">
-        <p id="currDate"> </p>
-        <p style="text-align: center;">Enter the DOB in format : (DD/MM/YYYY)</p><br>
-        <input type="text" id="date" placeholder="DD" required minlength="1" maxlength="2" ><br>
-        <input type="text" id="month" placeholder="MM" required minlength="1" maxlength="2" ><br>
-        <input type="text" id="year" placeholder="YYYY" required minlength="4" maxlength="4" ><br>
-        <button class="btn btn-primary" id="btn-start" onclick="return age()">Age</button><br>
-        <p id="age"></p>
+  <nav class="navbar navbar-dark bg-dark">
+    <div class="container-fluid">
+      <span class="navbar-brand mb-0 h1">Age Calculator</span>
     </div>
-    <script src="Age.js"></script>
+  </nav>
+  <div class="container shadow-sm">
+    <p class="instructions text-center">
+      Enter your Date of Birth in the format: <strong>DD / MM / YYYY</strong>
+    </p>
+    <div class="d-flex justify-content-between">
+      <input
+        type="text"
+        id="date"
+        placeholder="DD"
+        required
+        minlength="1"
+        maxlength="2"
+        class="form-control me-2"
+      />
+      <input
+        type="text"
+        id="month"
+        placeholder="MM"
+        required
+        minlength="1"
+        maxlength="2"
+        class="form-control me-2"
+      />
+      <input
+        type="text"
+        id="year"
+        placeholder="YYYY"
+        required
+        minlength="4"
+        maxlength="4"
+        class="form-control"
+      />
+    </div>
+    <button class="btn btn-primary mt-3" id="btn-start" onclick="return age()">
+      Calculate Age
+    </button>
+    <p id="age" class="text-center"></p>
+  </div>
+
+
+  
+  <script src="Age.js"></script>
 </body>
 </html>
diff --git a/Bakery Shop/index.html b/Bakery Shop/index.html
index 486499e18..2ad9561ac 100644
--- a/Bakery Shop/index.html	
+++ b/Bakery Shop/index.html	
@@ -8,158 +8,225 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
     <title>Sweet Art</title>
+    <style>
+        /* Responsive Navigation and Basic Styling */
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .navbar {
+            background-color: #f8bbd0;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+        }
+
+        .navbar h1 {
+            margin: 0;
+        }
+
+        .navbar ul {
+            list-style: none;
+            display: flex;
+            gap: 1rem;
+        }
+
+        .navbar ul li a {
+            text-decoration: none;
+            color: #333;
+            font-weight: bold;
+        }
+
+        .hamburger {
+            display: none;
+            cursor: pointer;
+        }
+
+        .menu {
+            display: none;
+            position: absolute;
+            top: 60px;
+            right: 20px;
+            background: #fff;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .menu.open {
+            display: block;
+        }
+
+        .menu-links li {
+            padding: 10px 20px;
+        }
+
+        .menu-links li a {
+            text-decoration: none;
+            color: #000;
+        }
+
+        header, section {
+            padding: 2rem;
+            text-align: center;
+        }
+
+        .about, .container {
+            max-width: 800px;
+            margin: auto;
+        }
+
+        .img {
+            max-width: 100%;
+            height: auto;
+            margin: 1rem 0;
+        }
+
+        .cont {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+        }
+
+        .product img {
+            width: 200px;
+            height: 200px;
+            object-fit: cover;
+            border-radius: 10px;
+        }
+
+        footer {
+            background: #f1f1f1;
+            text-align: center;
+            padding: 1rem;
+            margin-top: 2rem;
+        }
+
+        .social .icon {
+            margin: 0 5px;
+            color: #333;
+        }
+
+        @media (max-width: 768px) {
+            .navbar ul {
+                display: none;
+            }
+
+            .hamburger {
+                display: block;
+            }
+        }
+    </style>
 </head>
 
 <body>
     <nav class="navbar">
         <h1>Sweet <span>Art</span></h1>
         <ul>
-            <li><a href="#home"> Home</a></li>
-            <li><a href="#about"> About</a></li>
-            <li><a href="#products"> Featured Products</a> </li>
-            <li><a href="#contact"> Contact Us</a> </li>
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#products">Featured Products</a></li>
+            <li><a href="#contact">Contact Us</a></li>
+        </ul>
+        <div class="hamburger" id="ham">
+            <i class="fas fa-bars"></i>
+        </div>
+    </nav>
+
+    <div class="menu" id="menu">
+        <ul class="menu-links">
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#products">Featured Products</a></li>
+            <li><a href="#contact">Contact Us</a></li>
         </ul>
-    <div class="hamburger" id="ham">
-      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg>
     </div>
-  </nav>
-  <div class="menu" id="menu">
-    <ul class="menu-links">
-      <li><a href="#home"  class="active"> Home</a></li>
-      <li><a href="#about" > About</a></li>
-      <li><a href="#products"> Featured Products</a> </li>
-      <li><a href="#contact"> Contact Us</a> </li>
-  </ul>
-</div>
+
     <header id="home">
-        <h1>Welcome to <span>Sweet Art</span> </h1>
-        <p>We are excited to cook for you!!!</p>
-      
+        <h1>Welcome to <span>Sweet Art</span></h1>
+        <p>We are excited to cook for you!</p>
     </header>
 
     <section id="about">
-        <h1> ABOUT</h1>
+        <h1>ABOUT</h1>
         <img class="img" src="/Bakery Shop/Images/about.jpg" alt="">
-        <div class="about">We follow a fairly simple philosophy – offer a product of outstanding quality and ensure
-            customer loyalty.<br>We specialize in wide range of Bakery products, savory snacks, Breads and Eggless 100% Veg Cakes.<br><br>
-
-         We  make Brownies & Macaroons, Donuts, Cupcakes with Icing & Mousse, Tea Time Slice Cakes & Muffins,
-            Puffs & Croissant, Rolls & Sandwiches, Stuffed Buns, Pizza & Calzone, Quiche & Pies, Danish Pastry, Cookies,
-            Kharis & Toast, Breadsticks & Lavash.</div>
-           
+        <div class="about">
+            We specialize in a wide range of bakery products: Eggless Cakes, Donuts, Macaroons, Puffs, and more.<br>
+            Outstanding quality and customer loyalty are our key philosophies.
+        </div>
     </section>
-    <hr class="one">
-   
+
     <section id="products">
         <h1>Featured Products</h1>
-<div class="cont">
-        <div class="product">
-            <img src="/Bakery Shop/Images/pastry.jpg" alt="">
-        </div>
-        <div class="product">
-            <img src="/Bakery Shop/Images/doughnut.jpg" alt="">
-        </div>
-        <div class="product">
-            <img src="/Bakery Shop/Images/cake.jpg" alt="">
+        <div class="cont">
+            <div class="product"><img src="/Bakery Shop/Images/pastry.jpg" alt=""></div>
+            <div class="product"><img src="/Bakery Shop/Images/doughnut.jpg" alt=""></div>
+            <div class="product"><img src="/Bakery Shop/Images/cake.jpg" alt=""></div>
+            <div class="product"><img src="/Bakery Shop/Images/macron.jpg" alt=""></div>
         </div>
-        <div class="product">
-            <img src="/Bakery Shop/Images/macron.jpg" alt="">
-        </div>
-    </div>
     </section>
-    <hr>
+
     <section id="contact">
         <h1>Contact Us</h1>
         <div class="container">
             <div class="content">
-              <div class="left-side">
-                <div class="address details">
-                  <i class="fas fa-map-marker-alt"></i>
-                  <div class="topic">Address</div>
-                  <div class="text-one">Sarojini Park</div>
-                  <div class="text-two">Delhi</div>
-                </div>
-                <div class="phone details">
-                  <i class="fas fa-phone-alt"></i>
-                  <div class="topic">Phone</div>
-                  <div class="text-one">+0098 9893 5647</div>
-                  <div class="text-two">+0096 3434 5678</div>
-                </div>
-                <div class="email details">
-                  <i class="fas fa-envelope"></i>
-                  <div class="topic">Email</div>
-                  <div class="text-one">sweetart@gmail.com</div>
-                  <div class="text-two">info.aweetart@gmail.com</div>
-                </div>
-              </div>
-              <div class="right-side">
-                <div class="topic-text">Send us a message</div>
-                <p>If you have any work from me or any types of quries related to my tutorial, you can send me message from here. It's my pleasure to help you.</p>
-              <form action="#">
-                <div class="input-box">
-                  <input type="text" placeholder="Enter your name">
-                </div>
-                <div class="input-box">
-                  <input type="text" placeholder="Enter your email">
+                <div class="left-side">
+                    <div class="address details">
+                        <i class="fas fa-map-marker-alt"></i>
+                        <div class="topic">Address</div>
+                        <div class="text-one">Sarojini Park</div>
+                        <div class="text-two">Delhi</div>
+                    </div>
+                    <div class="phone details">
+                        <i class="fas fa-phone-alt"></i>
+                        <div class="topic">Phone</div>
+                        <div class="text-one">+0098 9893 5647</div>
+                        <div class="text-two">+0096 3434 5678</div>
+                    </div>
+                    <div class="email details">
+                        <i class="fas fa-envelope"></i>
+                        <div class="topic">Email</div>
+                        <div class="text-one">sweetart@gmail.com</div>
+                        <div class="text-two">info.sweetart@gmail.com</div>
+                    </div>
                 </div>
-                <div class="input-box message-box">
-                    <input type="text" placeholder="Enter message">
+                <div class="right-side">
+                    <div class="topic-text">Send us a message</div>
+                    <form action="#">
+                        <div class="input-box"><input type="text" placeholder="Enter your name"></div>
+                        <div class="input-box"><input type="text" placeholder="Enter your email"></div>
+                        <div class="input-box message-box"><input type="text" placeholder="Enter message"></div>
+                        <div class="button"><input type="button" value="Send Now"></div>
+                    </form>
                 </div>
-                <div class="button">
-                  <input type="button" value="Send Now" >
-                </div>
-              </form>
-            </div>
             </div>
-          </div>
+        </div>
     </section>
+
     <footer>
-      <span>Created By <a href="https://vanshita.co/" target="_blank"
-        style="color: #040404; text-decoration: none;"> Vanshita
-        Mathur </a>| <span class="far fa-copyright"></span> 2022 All rights reserved.</span>
-        <a class="social" href="https://www.linkedin.com/in/vanshita-mathur-04a558224" target="_blank">
-          <span class="icon"><i class="fab fa-linkedin"></i></span>
-      </a>
-      <a class="social" href="https://www.instagram.com/vanshita_mathur23/" target="_blank">
-          <span class="icon"><i class="fab fa-instagram"></i></span>
-      </a>
-      <a class="social" href="https://github.com/Vanshiii203" target="_blank">
-          <span class="icon"><i class="fab fa-github-square"></i></span>
-      </a>
-      <a class="social" href="https://twitter.com/VanshitaMathur7" target="_blank">
-          <span class="icon"><i class="fab fa-twitter-square"></i></span>
-      </a>
+        <span>Created By <a href="https://vanshita.co/" target="_blank">Vanshita Mathur</a> | &copy; 2022 All rights reserved.</span>
+        <div>
+            <a class="social" href="https://www.linkedin.com/in/vanshita-mathur-04a558224" target="_blank"><i class="fab fa-linkedin"></i></a>
+            <a class="social" href="https://www.instagram.com/vanshita_mathur23/" target="_blank"><i class="fab fa-instagram"></i></a>
+            <a class="social" href="https://github.com/Vanshiii203" target="_blank"><i class="fab fa-github"></i></a>
+            <a class="social" href="https://twitter.com/VanshitaMathur7" target="_blank"><i class="fab fa-twitter"></i></a>
+        </div>
     </footer>
+
     <script>
-      const ham = document.getElementById("ham");
-      const menu = document.getElementById("menu");
-      const close = document.querySelectorAll('.close');
-      const closeMenu = () => {
-        if (menu.classList.contains("open")) {
-          menu.classList.remove("open");
-          
-          console.log("open");
-        }
-        ham.innerHTML = '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg>'
-      }
-
-      const toggleMenu = () => {
-        if (menu.classList.contains("open")) {
-          menu.classList.remove("open");
-          ham.innerHTML = '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg>'
-          console.log("open");
-        } else {
-          menu.classList.add("open");
-          ham.innerHTML = '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>'
-          console.log("close");
-        }
-      };
-      ham.addEventListener("click", toggleMenu);
-      close.forEach(ele => {
-        ele.addEventListener("click", closeMenu);
-      }
-      )
+        const ham = document.getElementById("ham");
+        const menu = document.getElementById("menu");
+
+        ham.addEventListener("click", () => {
+            menu.classList.toggle("open");
+        });
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/Online Calculator/index.html b/Online Calculator/index.html
index 21d8e2583..458577c41 100644
--- a/Online Calculator/index.html	
+++ b/Online Calculator/index.html	
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Calculator</title>
     <link rel="stylesheet" href="src/index.css">
-  <!-- Getting error while using this jquery func.(will be solved soon)  <script href="src/index.js"></script>-->
+  <!-- Getting error while using this jquery func.(will be solved soon)  <script src="src/index.js"></script>-->
 </head>
 <body>
     <div class="center">
diff --git a/Quiz-App/index.html b/Quiz-App/index.html
index a8d17c27e..cddd2999d 100644
--- a/Quiz-App/index.html
+++ b/Quiz-App/index.html
@@ -4,39 +4,43 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Quiz-app using js</title>
+    <title>Quiz App using JS</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div class="container">
       <h1 class="heading">Quiz</h1>
       <div class="main-dev">
-      <div class="inner-section">
-        <h2 class="question">Question came here</h2>
-        <ul>
-          <li>
-            <input type="radio" name="answer" id="ans-1" class="answer"/>
-            <label for="name" id="option-1">Option 1 </label>
-          </li>
-          <li>
-            <input type="radio" name="answer" id="ans-2" class="answer"/>
-            <label for="name" id="option-2">Option 2 </label>
-          </li>
-          <li>
-            <input type="radio" name="answer" id="ans-3" class="answer"/>
-            <label for="name" id="option-3">Option 3 </label>
-          </li>
-          <li>
-            <input type="radio" name="answer" id="ans-4"class="answer" />
-            <label for="name" id="option-4">Option 4 </label>
-          </li>
-        </ul>
-        <button id="submit">Submit</button>
-        <div id="showScore" class="scoreArea"></div>
+        <div class="inner-section">
+          <form id="quiz-form">
+            <fieldset>
+              <legend class="question">Question came here</legend>
+              <ul>
+                <li>
+                  <input type="radio" name="answer" id="ans-1" class="answer" />
+                  <label for="ans-1" id="option-1">Option 1</label>
+                </li>
+                <li>
+                  <input type="radio" name="answer" id="ans-2" class="answer" />
+                  <label for="ans-2" id="option-2">Option 2</label>
+                </li>
+                <li>
+                  <input type="radio" name="answer" id="ans-3" class="answer" />
+                  <label for="ans-3" id="option-3">Option 3</label>
+                </li>
+                <li>
+                  <input type="radio" name="answer" id="ans-4" class="answer" />
+                  <label for="ans-4" id="option-4">Option 4</label>
+                </li>
+              </ul>
+              <button type="submit" id="submit">Submit</button>
+            </fieldset>
+          </form>
+          <div id="showScore" class="scoreArea"></div>
+        </div>
       </div>
     </div>
-</div>
     <footer class="footer">Code by :- Rishika Vishnoi 😊 ⭐</footer>
+    <script src="script.js"></script>
   </body>
-  <script src="script.js"></script>
 </html>
diff --git a/Quote Generator/index.html b/Quote Generator/index.html
index f10c8aa68..36645fbfa 100644
--- a/Quote Generator/index.html	
+++ b/Quote Generator/index.html	
@@ -1,35 +1,88 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="styles.css">
-    <title>Document</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>JavaScript Quote Generator</title>
+  <link rel="stylesheet" href="styles.css" />
+  <style>
+    /* Quick UI improvements, add more in styles.css if you want */
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #f0f4f8;
+      color: #333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      padding: 20px;
+      flex-direction: column;
+      text-align: center;
+    }
+    .heading {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-bottom: 1.5rem;
+      color: #2c3e50;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+    }
+    .main-content {
+      background: white;
+      padding: 2rem 3rem;
+      border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+      max-width: 600px;
+      width: 100%;
+    }
+    blockquote {
+      font-style: italic;
+      font-size: 1.5rem;
+      margin: 0 0 1rem 0;
+      color: #555;
+      line-height: 1.4;
+    }
+    .person {
+      font-weight: 600;
+      font-size: 1.25rem;
+      margin-bottom: 2rem;
+      color: #888;
+    }
+    button.generator {
+      background: #3498db;
+      border: none;
+      color: white;
+      padding: 0.75rem 2rem;
+      font-size: 1.1rem;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+    }
+    button.generator:hover {
+      background: #2980b9;
+      box-shadow: 0 6px 16px rgba(41, 128, 185, 0.5);
+    }
+    button.generator:focus {
+      outline: 3px solid #2980b9;
+      outline-offset: 2px;
+    }
+  </style>
 </head>
 <body>
 
-    <div class="heading">
-        JavaScript Quote Generator
-    </div>
+  <header class="heading" role="banner">JavaScript Quote Generator</header>
 
-    <div class="main-content">
-        <div class="text-area">
-            <span class="quote">
-       "At his best, man is the noblest of all animals; separated from law and justice he is the worst."
-            </span>
-        </div>
-        <div class="person">
-          - Aristotle
-        </div>
-        <button class="generator">Generate New Quote</button>
-    </div>
+  <main class="main-content" role="main" aria-live="polite" aria-atomic="true">
+    <blockquote class="text-area quote" id="quote">
+      "At his best, man is the noblest of all animals; separated from law and justice he is the worst."
+    </blockquote>
+    <div class="person" id="author">- Aristotle</div>
+    <button class="generator" id="generateBtn">Generate New Quote</button>
+  </main>
 
-
-
-<script src="Script.js">
-
-</script>
+  <script src="Script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
