diff --git a/000-boilerplate/favicon.ico b/000-boilerplate/favicon.ico
new file mode 100644
index 0000000..8e43528
Binary files /dev/null and b/000-boilerplate/favicon.ico differ
diff --git a/000-boilerplate/index.html b/000-boilerplate/index.html
index c1ff5cb..77ed9ee 100644
--- a/000-boilerplate/index.html
+++ b/000-boilerplate/index.html
@@ -13,7 +13,9 @@
     <title>My Project</title>
   </head>
   <body>
-    <h1>My Project</h1>
+    <!-- Replace <h1>My Project</h1> with a styled <div> for quick visual testing. -->
+    <!-- <h1>My Project</h1> -->
+    <div></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/000-boilerplate/style.css b/000-boilerplate/style.css
index b35d72c..264790f 100644
--- a/000-boilerplate/style.css
+++ b/000-boilerplate/style.css
@@ -1,11 +1,12 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+/* Replace Roboto with a font you like. */
+@import url("https://fonts.googleapis.com/css2?family=Newspaper:wght@400;700&display=swap");
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: "Newspaper", sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -14,3 +15,9 @@ body {
   overflow: hidden;
   margin: 0;
 }
+
+div {
+  background-color: blue;
+  width: 200px;
+  height: 200px;
+}
diff --git a/001-expanding cards/index.html b/001-expanding cards/index.html
index a8ff5d0..8ecfe23 100644
--- a/001-expanding cards/index.html	
+++ b/001-expanding cards/index.html	
@@ -9,6 +9,8 @@
       integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
       crossorigin="anonymous"
     /> -->
+    <!-- Add a favicon. -->
+    <link rel="icon" href="favicon.ico" />
     <link rel="stylesheet" href="style.css" />
     <title>Expanding cards</title>
   </head>
@@ -20,7 +22,8 @@
           background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <!-- Change the Card Titles -->
+        <h3>Canada</h3>
       </div>
       <div
         class="panel"
@@ -28,7 +31,7 @@ <h3>Explore the world</h3>
           background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Argentina</h3>
       </div>
       <div
         class="panel"
@@ -36,7 +39,7 @@ <h3>Explore the world</h3>
           background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Paris</h3>
       </div>
       <div
         class="panel"
@@ -44,7 +47,7 @@ <h3>Explore the world</h3>
           background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Tokyo</h3>
       </div>
       <div
         class="panel"
@@ -52,7 +55,16 @@ <h3>Explore the world</h3>
           background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Brazil</h3>
+      </div>
+      <!-- Add a New Panel -->
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1746105625407-5d49d69a2a47?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+        "
+      >
+        <h3>Vietnam</h3>
       </div>
     </div>
     <script src="script.js"></script>
diff --git a/001-expanding cards/style.css b/001-expanding cards/style.css
index d2568ea..005f81b 100644
--- a/001-expanding cards/style.css	
+++ b/001-expanding cards/style.css	
@@ -24,14 +24,16 @@ body {
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
-  border-radius: 50px;
+  /* Adjust Card Corner Style */
+  border-radius: 0px;
   color: #fff;
   cursor: pointer;
   flex: 0.5;
   margin: 10px;
   position: relative;
-  transition: flex 0.7s ease-in;
-  -webkit-transition: all 700ms ease-in;
+  /* Modify Transition Speed */
+  transition: flex 0.2s ease-in;
+  -webkit-transition: all 200ms ease-in;
 }
 
 .panel h3 {
@@ -50,6 +52,8 @@ body {
 .panel.active h3 {
   opacity: 1;
   transition: opacity 0.3s ease-in 0.4s;
+  /* Change Active Panel Text Color */
+  color: silver;
 }
 
 @media (max-width: 480px) {
diff --git a/002-progress steps/index.html b/002-progress steps/index.html
index b6c0e27..407fe0c 100644
--- a/002-progress steps/index.html	
+++ b/002-progress steps/index.html	
@@ -14,9 +14,12 @@
         <div class="step">2</div>
         <div class="step">3</div>
         <div class="step">4</div>
+        <!-- Add a Fifth Step -->
+        <div class="step">5</div>
       </div>
-      <button class="btn" id="prev" disabled>Prev</button>
-      <button class="btn" id="next">Next</button>
+      <!-- Customize Button Text -->
+      <button class="btn" id="prev" disabled>Back</button>
+      <button class="btn" id="next">Continue</button>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/002-progress steps/script.js b/002-progress steps/script.js
index 2bd502f..ac13715 100644
--- a/002-progress steps/script.js	
+++ b/002-progress steps/script.js	
@@ -3,7 +3,8 @@ const prev = document.getElementById("prev");
 const next = document.getElementById("next");
 const steps = document.querySelectorAll(".step");
 
-let currentActive = 1;
+// Start at Step 2
+let currentActive = 2;
 
 next.addEventListener("click", () => {
   currentActive++;
@@ -32,3 +33,5 @@ const update = () => {
     next.disabled = false;
   }
 };
+
+update();
diff --git a/002-progress steps/style.css b/002-progress steps/style.css
index 78c4f1c..0319d01 100644
--- a/002-progress steps/style.css	
+++ b/002-progress steps/style.css	
@@ -1,7 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
 
 :root {
-  --line-border-fill: #3498db;
+  /* Change the Active Step Color */
+  --line-border-fill: #e67e22;
   --line-border-empty: #e0e0e0;
 }
 
@@ -58,8 +59,9 @@ body {
 }
 
 .step {
-  background-color: #fff;
-  color: #999;
+  /* Style Inactive Steps */
+  background-color: #fbfbfb;
+  color: #716969;
   border-radius: 50%;
   height: 30px;
   width: 30px;
diff --git a/003-rotating navigation/index.html b/003-rotating navigation/index.html
index b695be1..8e5fe97 100644
--- a/003-rotating navigation/index.html	
+++ b/003-rotating navigation/index.html	
@@ -17,10 +17,11 @@
       <div class="circle-container">
         <div class="circle">
           <button id="close">
-            <i class="fas fa-times"></i>
+            <!-- Change Menu Icons -->
+            <i class="fas fa-minus"></i>
           </button>
           <button id="open">
-            <i class="fas fa-bars"></i>
+            <i class="fas fa-plus"></i>
           </button>
         </div>
       </div>
@@ -63,6 +64,8 @@ <h2>My Subtitle</h2>
         <li><i class="fas fa-home"></i> Home</li>
         <li><i class="fas fa-user-alt"></i> About</li>
         <li><i class="fas fa-envelope"></i> Contact</li>
+        <!-- Add a Portfolio Link -->
+        <li><i class="fas fa-briefcase"></i> Portfolio</li>
       </ul>
     </nav>
     <script src="script.js"></script>
diff --git a/003-rotating navigation/style.css b/003-rotating navigation/style.css
index 043507a..2175852 100644
--- a/003-rotating navigation/style.css	
+++ b/003-rotating navigation/style.css	
@@ -22,7 +22,9 @@ body {
 }
 
 .container.show-nav {
-  transform: rotate(-20deg);
+  /* Change the Rotation Angle */
+  /* transform: rotate(-15deg); */
+  transform: rotate(-30deg);
 }
 
 .circle-container {
@@ -92,10 +94,14 @@ nav ul li {
   color: #fff;
   margin: 40px 0;
   transform: translateX(-100%);
-  transition: transform 0.4s ease-in;
+  /* Adjust Menu Item Transition Speed */
+  transition: transform 0.2s ease-in;
+  /* transition: transform 0.6s ease-in; */
 }
 
 nav ul li i {
+  /* Highlight Navigation Icons */
+  color: #ff7979;
   font-size: 20px;
   margin-right: 10px;
 }
@@ -110,6 +116,12 @@ nav ul li + li + li {
   transform: translateX(-200%);
 }
 
+/* Add a Portfolio Link */
+nav ul li + li + li + li {
+  margin-left: 45px;
+  transform: translateX(-250%);
+}
+
 .content {
   max-width: 1000px;
   margin: 50px auto;
diff --git a/004-hidden search widget/index.html b/004-hidden search widget/index.html
index 3c8792a..af83cd7 100644
--- a/004-hidden search widget/index.html	
+++ b/004-hidden search widget/index.html	
@@ -13,8 +13,10 @@
   </head>
   <body>
     <div class="search">
-      <input type="text" class="input" placeholder="Search..." />
-      <button class="btn"><i class="fas fa-search"></i></button>
+      <!-- Change Placeholder Text -->
+      <input type="text" class="input" placeholder="Type and hit enter..." />
+      <!-- Change the Search Icon -->
+      <button class="btn"><i class="fas fa-search-plus"></i></button>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/004-hidden search widget/script.js b/004-hidden search widget/script.js
index 3f3ff9f..2572788 100644
--- a/004-hidden search widget/script.js	
+++ b/004-hidden search widget/script.js	
@@ -1,8 +1,12 @@
 const search = document.querySelector(".search");
 const btn = document.querySelector(".btn");
 const input = document.querySelector(".input");
+// Animate Button Icon Change
+const icon = document.querySelector(".fas");
 
 btn.addEventListener("click", () => {
   search.classList.toggle("active");
+  icon.classList.toggle("fa-search-plus", !search.classList.contains("active"));
+  icon.classList.toggle("fa-times", search.classList.contains("active"));
   input.focus();
 });
diff --git a/004-hidden search widget/style.css b/004-hidden search widget/style.css
index 820b47f..3f35e09 100644
--- a/004-hidden search widget/style.css	
+++ b/004-hidden search widget/style.css	
@@ -48,10 +48,16 @@ body {
   outline: none;
 }
 
+/* Change Background Color on Focus */
+.input:focus {
+  background-color: #f0f0f0;
+}
+
 .search.active .input {
-  width: 200px;
+  /* Modify Expansion Width */
+  width: 300px;
 }
 
 .search.active .btn {
-  transform: translateX(198px);
+  transform: translateX(298px);
 }
diff --git a/005-blurry loading/script.js b/005-blurry loading/script.js
index 32b58ce..e29d59e 100644
--- a/005-blurry loading/script.js	
+++ b/005-blurry loading/script.js	
@@ -7,8 +7,11 @@ const blurring = () => {
   load++;
   if (load > 99) clearInterval(int);
   loadText.innerText = `${load}%`;
-  loadText.style.opacity = scale(load, 0, 100, 1, 0);
-  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
+  // Control When the Loading Text Fades Out
+  loadText.style.opacity = scale(load, 0, 50, 1, 0);
+  // loadText.style.opacity = scale(load, 0, 90, 1, 0);
+  // Change the Initial Blur Amount
+  bg.style.filter = `blur(${scale(load, 0, 100, 10, 0)}px)`;
 };
 
 // For reference: https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
@@ -16,4 +19,5 @@ const scale = (num, in_min, in_max, out_min, out_max) => {
   return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
 };
 
-let int = setInterval(blurring, 30);
+// Adjust the Loading Speed
+let int = setInterval(blurring, 10);
diff --git a/005-blurry loading/style.css b/005-blurry loading/style.css
index 99ac86a..44b8c47 100644
--- a/005-blurry loading/style.css	
+++ b/005-blurry loading/style.css	
@@ -15,7 +15,8 @@ body {
 }
 
 .bg {
-  background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
+  /* Use a Different Background Image */
+  background: url("https://images.unsplash.com/photo-1734779336398-167995aeaf1c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
     no-repeat center center / cover;
   position: absolute;
   top: -30px;
@@ -27,5 +28,6 @@ body {
 
 .loading-text {
   font-size: 50px;
-  color: #a3b1c3;
+  /* Change the Loading Text Color */
+  color: #403d47;
 }
diff --git a/006-scroll animation/index.html b/006-scroll animation/index.html
index a677be4..7e644c0 100644
--- a/006-scroll animation/index.html	
+++ b/006-scroll animation/index.html	
@@ -8,18 +8,19 @@
   </head>
   <body>
     <h1>Scroll to see the animation</h1>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
-    <div class="box"><h2>Content</h2></div>
+    <!-- Give Each Box Unique Content -->
+    <div class="box"><h2>Introduction</h2></div>
+    <div class="box"><h2>Getting Started</h2></div>
+    <div class="box"><h2>Basic Concepts</h2></div>
+    <div class="box"><h2>Advanced Features</h2></div>
+    <div class="box"><h2>Best Practices</h2></div>
+    <div class="box"><h2>Common Pitfalls</h2></div>
+    <div class="box"><h2>Troubleshooting</h2></div>
+    <div class="box"><h2>Performance Tips</h2></div>
+    <div class="box"><h2>Examples</h2></div>
+    <div class="box"><h2>Resources</h2></div>
+    <div class="box"><h2>Community</h2></div>
+    <div class="box"><h2>Conclusion</h2></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/006-scroll animation/script.js b/006-scroll animation/script.js
index 7249e3b..4b12416 100644
--- a/006-scroll animation/script.js	
+++ b/006-scroll animation/script.js	
@@ -1,7 +1,8 @@
 const boxes = document.querySelectorAll(".box");
 
 const checkBoxes = () => {
-  const triggerBottom = (window.innerHeight / 5) * 4;
+  // Change When Boxes Appear on Scroll
+  const triggerBottom = (window.innerHeight / 5) * 3.9;
   boxes.forEach((box) => {
     const boxTop = box.getBoundingClientRect().top;
     if (boxTop < triggerBottom) box.classList.add("show");
diff --git a/006-scroll animation/style.css b/006-scroll animation/style.css
index 6f7006c..d3d9a33 100644
--- a/006-scroll animation/style.css	
+++ b/006-scroll animation/style.css	
@@ -30,16 +30,23 @@ h1 {
   margin: 10px;
   border-radius: 10px;
   box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
-  transform: translateX(400%);
-  transition: transform 0.4s ease;
+  /* Make All Boxes Slide Up from the Bottom */
+  transform: translateY(100%);
+  /* Create a Fade In Animation */
+  opacity: 0;
+  /* transition: transform 0.4s ease; */
+  transition: transform 0.4s ease, opacity 0.4s ease;
 }
 
-.box:nth-of-type(even) {
-  transform: translateX(-400%);
-}
+/* .box:nth-of-type(even) {
+  transform: translateX(400%);
+} */
 
 .box.show {
-  transform: translateX(0);
+  transform: translateY(0);
+  /* Change Box Background Color When Shown */
+  background-color: #34113f;
+  opacity: 1;
 }
 
 .box h2 {
diff --git a/007-split landing page/index.html b/007-split landing page/index.html
index b783e39..cc48f47 100644
--- a/007-split landing page/index.html	
+++ b/007-split landing page/index.html	
@@ -7,16 +7,18 @@
     <title>Split Landing Page</title>
   </head>
   <body>
-    <div class="container">
-      <div class="split left">
-        <h1>PlayStation 5</h1>
-        <a href="#" class="btn">Buy Now</a>
-      </div>
-      <div class="split right">
-        <h1>Xbox Series X</h1>
-        <a href="#" class="btn">Buy Now</a>
-      </div>
-    </div>
+    <main class="container">
+      <section class="split left">
+        <!-- Update Section Titles -->
+        <h1>Ocean Breeze</h1>
+        <!-- Customize Button Text and Style -->
+        <a href="#" class="btn">Dive In</a>
+      </section>
+      <section class="split right">
+        <h1>Mountain View</h1>
+        <a href="#" class="btn">Explore Peaks</a>
+      </section>
+    </main>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/007-split landing page/style.css b/007-split landing page/style.css
index 074a8ee..07b83a3 100644
--- a/007-split landing page/style.css	
+++ b/007-split landing page/style.css	
@@ -1,13 +1,16 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 
 :root {
-  --left-bg-color: rgba(87, 84, 236, 0.7);
-  --right-bg-color: rgba(43, 43, 43, 0.8);
-  --left-btn-hover-color: rgba(87, 84, 236, 1);
-  --right-btn-hover-color: rgba(28, 122, 28, 1);
-  --hover-width: 75%;
-  --minimize-width: 25%;
-  --transition-speed: 1s;
+  --left-bg-color: rgba(97, 135, 160, 0.7);
+  --right-bg-color: rgba(97, 96, 50, 0.8);
+  /* Customize Button Text and Style */
+  --left-btn-hover-color: rgba(40, 61, 74, 1);
+  --right-btn-hover-color: rgba(24, 24, 13, 1);
+  /* Change Hover Widths */
+  --hover-width: 60%;
+  --minimize-width: 40%;
+  /* Adjust Transition Speed */
+  --transition-speed: 0.5s;
 }
 
 * {
@@ -40,7 +43,8 @@ h1 {
   left: 50%;
   top: 40%;
   transform: translateX(-50%);
-  border: #fff solid 0.2rem;
+  /* Customize Button Text and Style */
+  border: rgba(255, 255, 255, 0.25) solid 0.2rem;
   text-decoration: none;
   font-size: 1rem;
   font-weight: bold;
@@ -75,7 +79,8 @@ h1 {
 
 .split.left {
   left: 0;
-  background: url("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+  /* Use New Background Images */
+  background: url("https://images.unsplash.com/photo-1542914119-8da84e777eb4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80")
     no-repeat center / cover;
 }
 
@@ -89,7 +94,8 @@ h1 {
 
 .split.right {
   right: 0;
-  background: url("https://images.unsplash.com/photo-1607853827120-6847830b38b0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80")
+  /* Use New Background Images */
+  background: url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
     no-repeat center / cover;
 }
 
diff --git a/008-form wave animation/index.html b/008-form wave animation/index.html
index 0daeece..8a367d6 100644
--- a/008-form wave animation/index.html	
+++ b/008-form wave animation/index.html	
@@ -8,17 +8,23 @@
   </head>
   <body>
     <div class="container">
-      <h1>Please Login</h1>
+      <!-- Change the Main Title -->
+      <h1>Welcome Back</h1>
       <form>
         <div class="form-control">
           <input type="text" required />
           <label>Email</label>
         </div>
+        <!-- Add a New Input Field -->
+        <div class="form-control">
+          <input type="text" required />
+          <label>Username</label>
+        </div>
         <div class="form-control">
           <input type="password" required />
           <label>Password</label>
         </div>
-        <button class="btn">Login</button>
+        <button class="btn">Sign In</button>
         <p class="text">Don't have an account? <a href="#">Register</a></p>
       </form>
     </div>
diff --git a/008-form wave animation/script.js b/008-form wave animation/script.js
index 0b28a83..adbaa44 100644
--- a/008-form wave animation/script.js	
+++ b/008-form wave animation/script.js	
@@ -5,7 +5,8 @@ function createWaveLabel(text) {
     .split("")
     .map(
       (letter, idx) =>
-        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
+        // Adjust Wave Animation Speed
+        `<span style="transition-delay:${idx * 25}ms">${letter}</span>`
     )
     .join("");
 }
diff --git a/008-form wave animation/style.css b/008-form wave animation/style.css
index 81eba3b..8fd386b 100644
--- a/008-form wave animation/style.css	
+++ b/008-form wave animation/style.css	
@@ -30,14 +30,15 @@ body {
 
 .container a {
   text-decoration: none;
-  color: lightblue;
+  color: #59a96a;
 }
 
 .btn {
   cursor: pointer;
   display: inline-block;
   width: 100%;
-  background: lightblue;
+  /* Modify Button Appearance */
+  background: #59a96a;
   padding: 15px;
   font-family: inherit;
   font-size: 16px;
@@ -77,7 +78,7 @@ body {
 .form-control input:focus,
 .form-control input:valid {
   outline: 0;
-  border-bottom-color: lightblue;
+  border-bottom-color: #13293d;
 }
 
 .form-control label {
@@ -96,6 +97,7 @@ body {
 
 .form-control input:focus + label span,
 .form-control input:valid + label span {
-  color: lightblue;
+  /* Change Label Color on Focus */
+  color: #59a96a;
   transform: translateY(-30px);
 }
diff --git a/009-sound board/index.html b/009-sound board/index.html
index 27d9be7..0934440 100644
--- a/009-sound board/index.html	
+++ b/009-sound board/index.html	
@@ -13,6 +13,8 @@
     <audio src="sounds/tada.mp3" id="tada"></audio>
     <audio src="sounds/victory.mp3" id="victory"></audio>
     <audio src="sounds/wrong.mp3" id="wrong"></audio>
+    <!-- Add a New Sound -->
+    <audio src="sounds/joke.mp3" id="joke"></audio>
     <div id="buttons"></div>
     <script src="script.js"></script>
   </body>
diff --git a/009-sound board/script.js b/009-sound board/script.js
index f1050a1..47e180e 100644
--- a/009-sound board/script.js	
+++ b/009-sound board/script.js	
@@ -1,4 +1,5 @@
-const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];
+// Add a New Sound
+const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong", "joke"];
 const buttons = document.getElementById("buttons");
 
 const stopSounds = () => {
@@ -7,15 +8,25 @@ const stopSounds = () => {
     currentSound.pause();
     currentSound.currentTime = 0;
   });
+  document
+    .querySelectorAll(".btn")
+    .forEach((btn) => btn.classList.remove("is-playing"));
 };
 
 sounds.forEach((sound) => {
   const btn = document.createElement("button");
   btn.classList.add("btn");
-  btn.innerText = sound;
+  // Change Button Text
+  btn.innerText = btn.innerText = "Play " + sound.toUpperCase();
+  const audio = document.getElementById(sound);
   btn.addEventListener("click", () => {
     stopSounds();
-    document.getElementById(sound).play();
+    // Add Visual Feedback When Playing
+    btn.classList.add("is-playing");
+    audio.play();
+    audio.onended = () => {
+      btn.classList.remove("is-playing");
+    };
   });
   buttons.appendChild(btn);
 });
diff --git a/009-sound board/sounds/joke.mp3 b/009-sound board/sounds/joke.mp3
new file mode 100644
index 0000000..5bc9465
Binary files /dev/null and b/009-sound board/sounds/joke.mp3 differ
diff --git a/009-sound board/style.css b/009-sound board/style.css
index a1b897b..83936d0 100644
--- a/009-sound board/style.css	
+++ b/009-sound board/style.css	
@@ -18,8 +18,10 @@ body {
 }
 
 .btn {
-  background-color: rebeccapurple;
-  border-radius: 5px;
+  /* Adjust Button Styling */
+  background-color: #2e1c2b;
+  color: #eaeaea;
+  border-radius: 10px;
   border: none;
   color: #fff;
   margin: 1rem;
@@ -36,3 +38,8 @@ body {
 .btn:focus {
   outline: none;
 }
+
+/* Add Visual Feedback When Playing */
+.btn.is-playing {
+  background-color: rebeccapurple;
+}
diff --git a/010-dad jokes/index.html b/010-dad jokes/index.html
index 555bcdc..d3bfd28 100644
--- a/010-dad jokes/index.html	
+++ b/010-dad jokes/index.html	
@@ -9,7 +9,11 @@
   <body>
     <div class="container">
       <h3>Don't Laugh Challenge</h3>
-      <div id="joke" class="joke">// Joke goes here</div>
+      <!-- Handle Network Failure Gracefully -->
+      <!-- <div id="joke" class="joke">// Joke goes here</div> -->
+      <div id="joke" class="joke">
+        Hmm, our joke delivery service seems to be on a coffee break
+      </div>
       <button id="jokeBtn" class="btn">Get Another Joke</button>
     </div>
     <script src="script.js"></script>
diff --git a/010-dad jokes/script.js b/010-dad jokes/script.js
index 2e385ec..8389861 100644
--- a/010-dad jokes/script.js	
+++ b/010-dad jokes/script.js	
@@ -1,13 +1,29 @@
 const jokeEl = document.getElementById("joke");
 const jokeBtn = document.getElementById("jokeBtn");
 
+function setButtonState(isLoading) {
+  jokeBtn.disabled = isLoading;
+  jokeBtn.innerText = isLoading ? "Loading..." : "Get Another Joke";
+}
+
 const generateJoke = async () => {
+  // Prevent Multiple Clicks
+  // jokeBtn.disabled = true;
+  // jokeBtn.innerHTML = "Loading...";
+  setButtonState(true);
+
   const config = {
     headers: { Accept: "application/json" },
   };
   const res = await fetch("https://icanhazdadjoke.com/", config);
+  // Check API Response Status
+  // const res = await fetch("https://icanhazdadjoke.com/nonexistent", config);
   const data = await res.json();
-  jokeEl.innerHTML = data.joke;
+  jokeEl.innerHTML = res.status === 200 ? data.joke : "No joke found!";
+
+  // jokeBtn.disabled = false;
+  // jokeBtn.innerHTML = "Get Another Joke";
+  setButtonState(false);
 
   // Fetching with .then()
   //   fetch("https://icanhazdadjoke.com/", config)
diff --git a/010-dad jokes/style.css b/010-dad jokes/style.css
index 1a86a1f..3b18a50 100644
--- a/010-dad jokes/style.css	
+++ b/010-dad jokes/style.css	
@@ -34,9 +34,11 @@ h3 {
 }
 
 .joke {
-  font-size: 30px;
+  /* Style the Joke Text */
+  font-size: 1.875rem;
   letter-spacing: 1px;
-  line-height: 40px;
+  line-height: 1.4;
+  color: #333;
   margin: 50px auto;
   max-width: 600px;
 }
@@ -59,3 +61,9 @@ h3 {
 .btn:focus {
   outline: 0;
 }
+
+/* Prevent Multiple Clicks */
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
diff --git a/011-event KeyCodes/script.js b/011-event KeyCodes/script.js
index 68de762..e075dc4 100644
--- a/011-event KeyCodes/script.js	
+++ b/011-event KeyCodes/script.js	
@@ -1,9 +1,14 @@
 const insert = document.getElementById("insert");
 
 window.addEventListener("keydown", (event) => {
+  // Add a Visual Key Press Effect
+  document.body.classList.add("active");
+  setTimeout(() => document.body.classList.remove("active"), 100);
+  // Update the Spacebar Label
+  // Show More Keyboard Event Details
   insert.innerHTML = `
     <div class="key">
-        ${event.key === " " ? "Space" : event.key}
+        ${event.key === " " ? "Spacebar" : event.key}
         <small>event.key</small>
       </div>
       <div class="key red">
@@ -13,5 +18,13 @@ window.addEventListener("keydown", (event) => {
       <div class="key green">
         ${event.code}
         <small>event.code (new)</small>
+      </div>
+      <div class="key ${event.shiftKey ? "green" : "red"}">
+        ${event.shiftKey}
+        <small>event.shiftKey</small>
+      </div>
+      <div class="key ${event.ctrlKey ? "green" : "red"}">
+        ${event.ctrlKey}
+        <small>event.ctrlKey</small>
       </div>`;
 });
diff --git a/011-event KeyCodes/style.css b/011-event KeyCodes/style.css
index c0de461..4cd8727 100644
--- a/011-event KeyCodes/style.css	
+++ b/011-event KeyCodes/style.css	
@@ -14,14 +14,21 @@ body {
   height: 100vh;
   overflow: hidden;
   margin: 0;
+  transition: background-color 0.3s ease;
+}
+
+/* Add a Visual Key Press Effect */
+body.active {
+  background-color: #d0d0cc;
 }
 
 .key {
-  background-color: #eee;
+  /* Style the Initial Message */
+  background-color: #d5d5d5;
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
   display: inline-flex;
   align-items: center;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: bold;
   padding: 20px;
   flex-direction: column;
@@ -40,6 +47,7 @@ body {
   font-size: 14px;
 }
 
+/* Show More Keyboard Event Details */
 .red {
   color: #ab5052;
 }
diff --git a/012-FAQ collapse/index.html b/012-FAQ collapse/index.html
index d45266b..0667b2c 100644
--- a/012-FAQ collapse/index.html	
+++ b/012-FAQ collapse/index.html	
@@ -19,8 +19,9 @@ <h1>Frequently Asked Questions</h1>
         <h3 class="faq-title">Why shouldn't we trust atoms?</h3>
         <p class="faq-text">They make up everything</p>
         <button class="faq-toggle">
-          <i class="fas fa-chevron-down"></i>
-          <i class="fas fa-times"></i>
+          <!-- Change the Toggle Icons -->
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
         </button>
       </div>
       <div class="faq">
@@ -29,8 +30,8 @@ <h3 class="faq-title">
         </h3>
         <p class="faq-text">Nobody knows.</p>
         <button class="faq-toggle">
-          <i class="fas fa-chevron-down"></i>
-          <i class="fas fa-times"></i>
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
         </button>
       </div>
 
@@ -40,8 +41,8 @@ <h3 class="faq-title">
         </h3>
         <p class="faq-text">Inheritance.</p>
         <button class="faq-toggle">
-          <i class="fas fa-chevron-down"></i>
-          <i class="fas fa-times"></i>
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
         </button>
       </div>
 
@@ -51,8 +52,8 @@ <h3 class="faq-title">
         </h3>
         <p class="faq-text">Ten-tickles!</p>
         <button class="faq-toggle">
-          <i class="fas fa-chevron-down"></i>
-          <i class="fas fa-times"></i>
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
         </button>
       </div>
 
@@ -60,8 +61,18 @@ <h3 class="faq-title">
         <h3 class="faq-title">What is: 1 + 1?</h3>
         <p class="faq-text">Depends on who are you asking.</p>
         <button class="faq-toggle">
-          <i class="fas fa-chevron-down"></i>
-          <i class="fas fa-times"></i>
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
+        </button>
+      </div>
+
+      <!-- Add a New FAQ -->
+      <div class="faq">
+        <h3 class="faq-title">Why don't scientists trust stairs?</h3>
+        <p class="faq-text">Because they're always up to something!</p>
+        <button class="faq-toggle">
+          <i class="fas fa-plus"></i>
+          <!-- <i class="fas fa-minus"></i> -->
         </button>
       </div>
     </div>
diff --git a/012-FAQ collapse/script.js b/012-FAQ collapse/script.js
index a630e75..25e3e01 100644
--- a/012-FAQ collapse/script.js	
+++ b/012-FAQ collapse/script.js	
@@ -1,8 +1,18 @@
 const faqContainer = document.querySelector(".faq-container");
 const toggles = faqContainer.querySelectorAll(".faq-toggle");
 
+function toggleActive(selectedToggle) {
+  // Only One FAQ Open at a Time
+  toggles.forEach((toggle) => {
+    if (toggle !== selectedToggle) {
+      toggle.parentNode.classList.remove("active");
+    }
+  });
+  selectedToggle.parentNode.classList.toggle("active");
+}
+
 toggles.forEach((toggle) => {
   toggle.addEventListener("click", () => {
-    toggle.parentNode.classList.toggle("active");
+    toggleActive(toggle);
   });
 });
diff --git a/012-FAQ collapse/style.css b/012-FAQ collapse/style.css
index cc69ce5..5d21420 100644
--- a/012-FAQ collapse/style.css	
+++ b/012-FAQ collapse/style.css	
@@ -29,9 +29,9 @@ h1 {
   overflow: hidden;
   transition: 0.3 ease;
 }
-
 .faq.active {
-  background-color: #fff;
+  /* Adjust the Active Background Color */
+  background-color: #f9f9f9;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 
@@ -89,17 +89,24 @@ h1 {
   outline: 0;
 }
 
-.faq-toggle .fa-times {
+/* Change the Toggle Icons */
+/* .faq-toggle .fa-minus {
   display: none;
 }
 
-.faq.active .faq-toggle .fa-times {
+.faq.active .faq-toggle .fa-minus {
   color: #fff;
   display: block;
+} */
+
+/* Animate the Plus Icon */
+.faq-toggle .fa-plus {
+  transition: transform 0.3s ease;
 }
 
-.faq.active .faq-toggle .fa-chevron-down {
-  display: none;
+.faq.active .faq-toggle .fa-plus {
+  /* display: none; */
+  transform: rotate(45deg);
 }
 
 .faq.active .faq-toggle {
diff --git a/013-random choice picker/index.html b/013-random choice picker/index.html
index 094d059..6c37dd4 100644
--- a/013-random choice picker/index.html	
+++ b/013-random choice picker/index.html	
@@ -8,9 +8,10 @@
   </head>
   <body>
     <div class="container">
+      <!-- Make the Instructions Friendlier -->
       <h3>
-        Enter all of the choices divided by a comma (',').<br />
-        Press enter when you're done
+        Can't decide? Enter your options below, separated by commas (", ").<br />
+        Press Enter and let us pick for you!
       </h3>
       <textarea placeholder="Enter choices here..." id="textarea"></textarea>
     </div>
diff --git a/013-random choice picker/script.js b/013-random choice picker/script.js
index a3244e2..6ce83c4 100644
--- a/013-random choice picker/script.js	
+++ b/013-random choice picker/script.js	
@@ -2,10 +2,12 @@ const tagsElements = document.getElementById("tags");
 const textarea = document.getElementById("textarea");
 
 const createTags = (input) => {
-  const tags = input
+  // Remove Duplicate Choices
+  const tagsArray = input
     .split(",")
     .filter((tag) => tag.trim() !== "")
     .map((tag) => tag.trim());
+  const tags = [...new Set(tagsArray)];
   tagsElements.innerHTML = "";
   tags.forEach((tag) => {
     const tagElement = document.createElement("span");
@@ -25,22 +27,24 @@ const unHighlightTag = (tag) => tag.classList.remove("highlight");
 
 const randomSelect = () => {
   const tags = tagsElements.querySelectorAll(".tag");
-  const times = 30;
+  // Change the Animation Speed
+  const times = 15;
+  const animationSpeed = 200;
   const interval = setInterval(() => {
     const randomTag = pickRandomTag(tags);
     highlightTag(randomTag);
     setTimeout(() => {
       unHighlightTag(randomTag);
-    }, 100);
-  }, 100);
+    }, animationSpeed);
+  }, animationSpeed);
 
   setTimeout(() => {
     clearInterval(interval);
     setTimeout(() => {
       const randomTag = pickRandomTag(tags);
       highlightTag(randomTag);
-    }, 100);
-  }, times * 100);
+    }, animationSpeed);
+  }, times * animationSpeed);
 };
 
 textarea.focus();
diff --git a/013-random choice picker/style.css b/013-random choice picker/style.css
index cafd803..4a841af 100644
--- a/013-random choice picker/style.css	
+++ b/013-random choice picker/style.css	
@@ -42,7 +42,8 @@ textarea:focus {
 }
 
 .tag {
-  background-color: #f0932b;
+  /* Change the Tag Colors */
+  background-color: #353535;
   color: #fff;
   border-radius: 50px;
   padding: 10px 20px;
@@ -52,5 +53,5 @@ textarea:focus {
 }
 
 .tag.highlight {
-  background-color: #273c75;
+  background-color: #6f2dbd;
 }
diff --git a/014-animated navigation/index.html b/014-animated navigation/index.html
index 34d1554..fa84830 100644
--- a/014-animated navigation/index.html	
+++ b/014-animated navigation/index.html	
@@ -11,6 +11,8 @@
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Works</a></li>
+        <!-- Add a "Services" Menu Item -->
+        <li><a href="#">Services</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
diff --git a/014-animated navigation/style.css b/014-animated navigation/style.css
index babc091..6e00ff2 100644
--- a/014-animated navigation/style.css	
+++ b/014-animated navigation/style.css	
@@ -1,17 +1,24 @@
 @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
 
+/* Adjust Animation Timing */
+:root {
+  --animation-duration: 1s;
+  --animation-easing: ease-in-out;
+}
+
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #eafbff;
+  /* Customize the Navigation Colors */
+  background-color: #262626;
   background-image: linear-gradient(
     to bottom,
-    #eafbff 0%,
-    #eafbff 50%,
-    #5290f9 50%,
-    #5290f9 100%
+    #262626 0%,
+    #262626 50%,
+    #2c2c54 50%,
+    #2c2c54 100%
   );
   font-family: "Muli", sans-serif;
   display: flex;
@@ -22,20 +29,20 @@ body {
 }
 
 nav {
-  background-color: #fff;
+  background-color: #2d2d2d;
   padding: 20px;
   width: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  transition: width 0.6s linear;
-  overflow-x: hidden;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+  transition: width var(--animation-duration) var(--animation-easing);
 }
 
+/* Add a "Services" Menu Item */
 nav.active {
-  width: 350px;
+  width: 430px;
 }
 
 nav ul {
@@ -44,7 +51,8 @@ nav ul {
   padding: 0;
   margin: 0;
   width: 0;
-  transition: width 0.6s linear;
+  transition: width var(--animation-duration) var(--animation-easing);
+  overflow-x: hidden;
   gap: 20px;
 }
 
@@ -55,7 +63,8 @@ nav.active ul {
 nav ul li {
   transform: rotateY(0deg);
   opacity: 0;
-  transition: transform 0.6s linear, opacity 0.6s linear;
+  transition: transform var(--animation-duration) var(--animation-easing),
+    opacity var(--animation-duration) var(--animation-easing);
 }
 
 nav.active ul li {
@@ -65,12 +74,12 @@ nav.active ul li {
 
 nav ul a {
   position: relative;
-  color: #000;
+  color: #e0e0e0;
   text-decoration: none;
 }
 
 .icon {
-  background-color: #fff;
+  background-color: #2d2d2d;
   border: 0;
   cursor: pointer;
   padding: 0;
@@ -84,13 +93,13 @@ nav ul a {
 }
 
 .icon .line {
-  background-color: #5290f9;
+  background-color: #6c7ae0;
   height: 2px;
   width: 20px;
   position: absolute;
   top: 10px;
   left: 5px;
-  transition: transform 0.6s linear;
+  transition: transform var(--animation-duration) var(--animation-easing);
 }
 
 .icon .line2 {
@@ -98,18 +107,20 @@ nav ul a {
   bottom: 10px;
 }
 
+/* Change the Icon Animation Style */
+
 nav.active .icon .line1 {
-  transform: rotate(-765deg) translateY(5.5px);
+  transform: rotate(-45deg) translateY(5.5px);
 }
 
 nav.active .icon .line2 {
-  transform: rotate(765deg) translateY(-5.5px);
+  transform: rotate(45deg) translateY(-5.5px);
 }
 
-@media (max-width: 350px) {
+@media (max-width: 430px) {
   nav.active {
     width: 100%;
-    height: 150px;
+    height: 180px;
   }
 
   nav.active ul {
diff --git a/015-incrementing counter/index.html b/015-incrementing counter/index.html
index 8197666..323c07a 100644
--- a/015-incrementing counter/index.html	
+++ b/015-incrementing counter/index.html	
@@ -15,18 +15,23 @@
   <body>
     <article class="counter-container">
       <i class="fab fa-instagram fa-3x"></i>
-      <div class="counter" data-target="12000"></div>
+      <div class="counter" data-target="12500"></div>
       <span>Instagram Followers</span>
     </article>
     <article class="counter-container">
       <i class="fab fa-youtube fa-3x"></i>
-      <div class="counter" data-target="5000"></div>
+      <div class="counter" data-target="5500"></div>
       <span>YouTube Subscribers</span>
     </article>
     <article class="counter-container">
-      <i class="fab fa-facebook fa-3x"></i>
-      <div class="counter" data-target="7500"></div>
-      <span>Facebook Fans</span>
+      <i class="fab fa-linkedin fa-3x"></i>
+      <div class="counter" data-target="8000"></div>
+      <span>LinkedIn Followers</span>
+    </article>
+    <article class="counter-container">
+      <i class="fab fa-github fa-3x"></i>
+      <div class="counter" data-target="9500"></div>
+      <span>GitHub Stars</span>
     </article>
     <script src="script.js"></script>
   </body>
diff --git a/015-incrementing counter/script.js b/015-incrementing counter/script.js
index 10669b2..b0195bc 100644
--- a/015-incrementing counter/script.js	
+++ b/015-incrementing counter/script.js	
@@ -1,15 +1,20 @@
 const counters = document.querySelectorAll(".counter");
 
-counters.forEach((counter) => {
+counters.forEach((counter, index) => {
   counter.innerText = "0";
+
   const updateCounter = () => {
     const target = +counter.getAttribute("data-target");
     const count = +counter.innerText;
-    const increment = target / 200;
+    // Adjust the Animation Speed
+    // const increment = target / 100; // Faster Animation
+    const increment = target / 500; // Slower Animation
     if (count < target) {
       counter.innerText = `${Math.ceil(count + increment)}`;
       setTimeout(updateCounter, 1);
     } else counter.innerText = target;
   };
-  updateCounter();
+
+  // Animate Counters Sequentially
+  setTimeout(updateCounter, index * 2500);
 });
diff --git a/016-drink water/index.html b/016-drink water/index.html
index 7c0ea32..56c1d79 100644
--- a/016-drink water/index.html	
+++ b/016-drink water/index.html	
@@ -8,7 +8,8 @@
   </head>
   <body>
     <h1>Drink Water</h1>
-    <h2>Goal: 2 liters</h2>
+    <!-- Update the Daily Goal -->
+    <h2>Goal: 3 liters</h2>
     <div class="cup">
       <div class="remained" id="remained">
         <span id="liters"></span>
@@ -26,6 +27,10 @@ <h2>Goal: 2 liters</h2>
       <div class="cup cup-small">250 ml</div>
       <div class="cup cup-small">250 ml</div>
       <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
+      <div class="cup cup-small">250 ml</div>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/016-drink water/script.js b/016-drink water/script.js
index 979376c..4a0f239 100644
--- a/016-drink water/script.js	
+++ b/016-drink water/script.js	
@@ -3,6 +3,8 @@ const liters = document.getElementById("liters");
 const percentage = document.getElementById("percentage");
 const remained = document.getElementById("remained");
 
+const savedFullCups = localStorage.getItem("fullCups") || 0;
+
 const updateBigCup = () => {
   const fullCups = document.querySelectorAll(".cup-small.full").length;
   const totalCups = smallCups.length;
@@ -12,14 +14,18 @@ const updateBigCup = () => {
   } else {
     percentage.style.visibility = "visible";
     percentage.style.height = `${(fullCups / totalCups) * 330}px`;
-    percentage.innerText = `${(fullCups / totalCups) * 100}%`;
+    percentage.innerText = `${Math.round((fullCups / totalCups) * 100)}%`;
   }
   if (fullCups === totalCups) {
     remained.style.visibility = "hidden";
     remained.style.height = 0;
   } else {
     percentage.style.visibility = "visible";
-    liters.innerText = `${2 - (250 * fullCups) / 1000}L`;
+    // Fix the Remaining Water Display Bug
+    remained.style.visibility = "visible";
+    remained.style.height = "auto";
+    // Update the Daily Goal
+    liters.innerText = `${3 - (250 * fullCups) / 1000}L`;
   }
 };
 
@@ -36,6 +42,8 @@ const highlightCups = (index) => {
     else cup.classList.remove("full");
   });
   updateBigCup();
+  // Save Progress with Local Storage
+  localStorage.setItem("fullCups", index);
 };
 
 smallCups.forEach((cup, index) =>
@@ -43,3 +51,7 @@ smallCups.forEach((cup, index) =>
 );
 
 updateBigCup();
+
+if (savedFullCups) {
+  highlightCups(+savedFullCups);
+}
diff --git a/016-drink water/style.css b/016-drink water/style.css
index b7f322b..d927d46 100644
--- a/016-drink water/style.css	
+++ b/016-drink water/style.css	
@@ -1,7 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
 
 :root {
-  --border-color: #144fc6;
+  /* Change the Water Color */
+  --border-color: #272727;
   --fill-color: #6ab3f8;
 }
 
@@ -70,7 +71,8 @@ h2 {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  width: 280px;
+  /* Update the Daily Goal */
+  max-width: 360px;
 }
 
 .remained {
diff --git a/017-movie app/index.html b/017-movie app/index.html
index ec5d744..11ebd9a 100644
--- a/017-movie app/index.html	
+++ b/017-movie app/index.html	
@@ -4,19 +4,25 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Movie App</title>
+    <!-- Personalize the Header, Search, and Page Title -->
+    <title>My Movie Finder</title>
   </head>
   <body>
     <header>
-      <h1>Should I watch it?</h1>
+      <h1>My Movie Finder</h1>
       <form id="form">
-        <input type="text" placeholder="Search" id="search" class="search" />
+        <input
+          type="text"
+          placeholder="Search for a movie..."
+          id="search"
+          class="search"
+        />
       </form>
     </header>
     <main id="main"></main>
     <footer class="footer">
       <p>
-        This project uses the TMDb API but is not endorsed or certified by TMDb.
+        This project uses the TMDB API but is not endorsed or certified by TMDB.
       </p>
     </footer>
     <script src="script.js"></script>
diff --git a/017-movie app/script.js b/017-movie app/script.js
index 551fc87..b1e1e28 100644
--- a/017-movie app/script.js	
+++ b/017-movie app/script.js	
@@ -10,25 +10,37 @@ const form = document.getElementById("form");
 const search = document.getElementById("search");
 
 const getClassByRate = (vote) => {
-  if (vote >= 7.5) return "green";
-  else if (vote >= 7) return "orange";
+  // Change Rating Color Thresholds
+  if (vote > 8) return "green";
+  else if (vote >= 6) return "orange";
   else return "red";
 };
 
 const showMovies = (movies) => {
   main.innerHTML = "";
+  // Show a Message When No Search Results
+  if (movies.length === 0) {
+    main.innerHTML =
+      '<h1 class="no-movies-message">No movies found. Please try another search.</h1>';
+    return;
+  }
   movies.forEach((movie) => {
-    const { title, poster_path, vote_average, overview } = movie;
+    // Display the Movie's Release Year
+    const { title, poster_path, vote_average, overview, release_date } = movie;
+    const year = new Date(release_date).getFullYear();
     const movieElement = document.createElement("div");
     movieElement.classList.add("movie");
+    // Handle Missing Movie Posters
+    // Format Movie Ratings
     movieElement.innerHTML = `
-    <img
-      src="${IMG_PATH + poster_path}"
-      alt="${title}"
-    />
+    <img src="${
+      IMG_PATH + poster_path
+    }" alt="${title}" onerror="this.src='https://placehold.co/1280x1920/058ED9/FFF?text=${title}&font=poppins'" />
     <div class="movie-info">
-      <h3>${title}</h3>
-      <span class="${getClassByRate(vote_average)}">${vote_average}</span>
+      <h3>${title} <span class="release-date">(${year})</span></h3>
+      <span class="${getClassByRate(vote_average)}">${vote_average.toFixed(
+      1
+    )}</span>
     </div>
     <div class="overview">
       <h3>Overview</h3>
diff --git a/017-movie app/style.css b/017-movie app/style.css
index f160946..c3ed04d 100644
--- a/017-movie app/style.css	
+++ b/017-movie app/style.css	
@@ -55,6 +55,14 @@ main {
   justify-content: center;
 }
 
+/* Show a Message When No Search Results */
+.no-movies-message {
+  color: #eee;
+  text-align: center;
+  margin: 2rem;
+  font-size: 1.2rem;
+}
+
 .movie {
   width: 300px;
   margin: 1rem;
@@ -89,6 +97,14 @@ main {
   font-weight: bold;
 }
 
+/* Display the Movie's Release Year */
+.movie-info span.release-date {
+  background-color: inherit;
+  padding: 0;
+  font-size: 0.9rem;
+  font-weight: lighter;
+}
+
 .movie-info span.green {
   color: lightgreen;
 }
diff --git a/018-background slider/index.html b/018-background slider/index.html
index d290c17..dd9a2ea 100644
--- a/018-background slider/index.html	
+++ b/018-background slider/index.html	
@@ -44,12 +44,21 @@
           background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
         "
       ></div>
+      <!-- Add Another Slide -->
+      <div
+        class="slide"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
+        "
+      ></div>
       <button class="arrow left-arrow" id="left">
         <i class="fas fa-arrow-left"></i>
       </button>
       <button class="arrow right-arrow" id="right">
         <i class="fas fa-arrow-right"></i>
       </button>
+      <!-- Add Indicator Dots -->
+      <div class="dots-container" id="dots-container"></div>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/018-background slider/script.js b/018-background slider/script.js
index 81d9b36..8308acb 100644
--- a/018-background slider/script.js	
+++ b/018-background slider/script.js	
@@ -2,8 +2,32 @@ const body = document.body;
 const slides = document.querySelectorAll(".slide");
 const leftButton = document.getElementById("left");
 const rightButton = document.getElementById("right");
+const dotsContainer = document.getElementById("dots-container");
 
 let activeSlide = 0;
+let autoplayInterval;
+let autoplayStarted = false;
+
+// Add Indicator Dots
+const createDots = () => {
+  for (let i = 0; i < slides.length; i++) {
+    const dot = document.createElement("div");
+    dot.classList.add("dot");
+    if (i === 0) dot.classList.add("active");
+
+    dot.addEventListener("click", () => {
+      activeSlide = i;
+      setBackground();
+      setActiveSlide();
+      setActiveDot();
+
+      stopAutoplay();
+      startAutoplay();
+    });
+
+    dotsContainer.appendChild(dot);
+  }
+};
 
 const setBackground = () => {
   body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
@@ -14,11 +38,42 @@ const setActiveSlide = () => {
   slides[activeSlide].classList.add("active");
 };
 
+const setActiveDot = () => {
+  const dots = document.querySelectorAll(".dot");
+  dots.forEach((dot) => dot.classList.remove("active"));
+  dots[activeSlide].classList.add("active");
+};
+
+const startAutoplay = () => {
+  if (autoplayStarted) {
+    autoplayInterval = setInterval(() => {
+      rightButton.click();
+    }, 5000);
+  }
+};
+
+const stopAutoplay = () => {
+  clearInterval(autoplayInterval);
+};
+
+slides.forEach((slide) => {
+  slide.addEventListener("mouseover", stopAutoplay);
+  slide.addEventListener("mouseout", startAutoplay);
+});
+
 rightButton.addEventListener("click", () => {
   activeSlide++;
   if (activeSlide > slides.length - 1) activeSlide = 0;
   setBackground();
   setActiveSlide();
+  setActiveDot();
+
+  // Enable Autoplay
+  if (!autoplayStarted) {
+    autoplayStarted = true;
+  }
+  stopAutoplay();
+  startAutoplay();
 });
 
 leftButton.addEventListener("click", () => {
@@ -26,6 +81,11 @@ leftButton.addEventListener("click", () => {
   if (activeSlide < 0) activeSlide = slides.length - 1;
   setBackground();
   setActiveSlide();
+  setActiveDot();
+
+  stopAutoplay();
+  startAutoplay();
 });
 
+createDots();
 setBackground();
diff --git a/018-background slider/style.css b/018-background slider/style.css
index dfd243e..e298a0b 100644
--- a/018-background slider/style.css	
+++ b/018-background slider/style.css	
@@ -59,7 +59,11 @@ body::before {
   padding: 20px;
   font-size: 30px;
   color: #fff;
-  border: 2px solid orange;
+  /* Style the Arrow Buttons */
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  color: #f8f8f8;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
@@ -76,3 +80,26 @@ body::before {
 .right-arrow {
   right: calc(15vw - 65px);
 }
+
+/* Add Indicator Dots */
+.dots-container {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.dot.active {
+  background-color: white;
+}
diff --git a/019-theme clock/index.html b/019-theme clock/index.html
index 285fee1..88ae44a 100644
--- a/019-theme clock/index.html	
+++ b/019-theme clock/index.html	
@@ -3,11 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Theme Clock</title>
   </head>
   <body>
     <button class="toggle">Dark mode</button>
+    <button class="sound-toggle">
+      <i class="fas fa-volume-mute"></i>
+    </button>
     <section class="clock-container">
       <figure class="clock" aria-label="Analog clock">
         <span class="needle hour"></span>
@@ -18,6 +27,8 @@
       <time class="time" aria-live="polite"></time>
       <div class="date"></div>
     </section>
+    <!-- Add a Ticking Sound with a Toggle -->
+    <audio class="tick-sound" src="sounds/tick.mp3"></audio>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/019-theme clock/script.js b/019-theme clock/script.js
index 2af40a4..276c5a2 100644
--- a/019-theme clock/script.js	
+++ b/019-theme clock/script.js	
@@ -4,8 +4,12 @@ const secondElement = document.querySelector(".second");
 const timeElement = document.querySelector(".time");
 const dateElement = document.querySelector(".date");
 const toggle = document.querySelector(".toggle");
+const soundToggle = document.querySelector(".sound-toggle");
+const tickSound = document.querySelector(".tick-sound");
 const html = document.querySelector("html");
 
+let audioEnabled = false;
+
 const days = [
   "Sunday",
   "Monday",
@@ -30,13 +34,41 @@ const months = [
   "Dec",
 ];
 
+const loadSavedTheme = () => {
+  const savedTheme = localStorage.getItem("theme");
+  if (savedTheme === "dark") {
+    html.classList.add("dark");
+    toggle.innerHTML = "Light mode";
+  } else {
+    html.classList.remove("dark");
+    toggle.innerHTML = "Dark mode";
+  }
+};
+
+soundToggle.addEventListener("click", () => {
+  audioEnabled = !audioEnabled;
+  const icon = soundToggle.querySelector("i");
+  if (audioEnabled) {
+    icon.className = "fas fa-volume-up";
+    soundToggle.title = "Disable sound";
+  } else {
+    icon.className = "fas fa-volume-mute";
+    soundToggle.title = "Enable sound";
+    tickSound.pause();
+    tickSound.currentTime = 0;
+  }
+});
+
 toggle.addEventListener("click", (e) => {
   if (html.classList.contains("dark")) {
     html.classList.remove("dark");
     e.target.innerHTML = "Dark mode";
+    // Remember the User's Theme Choice
+    localStorage.setItem("theme", "light");
   } else {
     html.classList.add("dark");
     e.target.innerHTML = "Light mode";
+    localStorage.setItem("theme", "dark");
   }
 });
 
@@ -82,8 +114,16 @@ const setTime = () => {
     minutes < 10 ? `0${minutes}` : minutes
   } ${ampm}`;
   dateElement.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
+
+  // Add a Ticking Sound with a Toggle
+  if (audioEnabled) {
+    tickSound.currentTime = 0;
+    tickSound.play().catch((e) => console.log("Audio play failed:", e));
+  }
 };
 
+loadSavedTheme();
+
 setTime();
 
 setInterval(setTime, 1000);
diff --git a/019-theme clock/sounds/tick.mp3 b/019-theme clock/sounds/tick.mp3
new file mode 100644
index 0000000..640e8d5
Binary files /dev/null and b/019-theme clock/sounds/tick.mp3 differ
diff --git a/019-theme clock/style.css b/019-theme clock/style.css
index 9292fc1..2890a2b 100644
--- a/019-theme clock/style.css	
+++ b/019-theme clock/style.css	
@@ -4,9 +4,12 @@
   box-sizing: border-box;
 }
 
+/* Customize the Theme Colors */
 :root {
-  --primary-color: #000;
-  --secondary-color: #fff;
+  --primary-color: #0f0f26;
+  --secondary-color: #f2f0f0;
+  /* Use a CSS Variable for the Accent Color */
+  --accent-color: #3498db;
 }
 
 html {
@@ -14,8 +17,8 @@ html {
 }
 
 html.dark {
-  --primary-color: #fff;
-  --secondary-color: #333;
+  --primary-color: #f2f0f0;
+  --secondary-color: #0f0f26;
   background-color: #111;
   color: var(--primary-color);
 }
@@ -30,7 +33,34 @@ body {
   margin: 0;
 }
 
+/* Add a Ticking Sound with a Toggle */
+.toggle,
+.sound-toggle {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  border: 0;
+  border-radius: 4px;
+  padding: 8px 12px;
+  position: absolute;
+  cursor: pointer;
+}
+
 .toggle {
+  top: 10px;
+  right: 10px;
+}
+
+.sound-toggle {
+  bottom: 10px;
+  left: 10px;
+}
+
+.toggle:focus,
+.sound-toggle:focus {
+  outline: none;
+}
+
+/* .toggle {
   background-color: var(--primary-color);
   color: var(--secondary-color);
   border: 0;
@@ -46,6 +76,22 @@ body {
   outline: none;
 }
 
+.sound-toggle {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  border: 0;
+  border-radius: 4px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  cursor: pointer;
+} 
+  
+.sound-toggle:focus {
+  outline: none;
+} */
+
 .clock-container {
   display: flex;
   flex-direction: column;
@@ -79,14 +125,15 @@ body {
   height: 100px;
 }
 
+/* Use a CSS Variable for the Accent Color */
 .needle.second {
-  background-color: #e74c3c;
+  background-color: var(--accent-color);
   transform: translate(-50%, -100%) rotate(0deg);
   height: 100px;
 }
 
 .center-point {
-  background-color: #e74c3c;
+  background-color: var(--accent-color);
   width: 10px;
   height: 10px;
   position: absolute;
diff --git a/020-button ripple effect/index.html b/020-button ripple effect/index.html
index bb7bc6b..2aa6c54 100644
--- a/020-button ripple effect/index.html	
+++ b/020-button ripple effect/index.html	
@@ -7,7 +7,16 @@
     <title>Button Ripple Effect</title>
   </head>
   <body>
-    <button class="ripple">Click Me <span class="circle"></span></button>
+    <!-- Apply the Ripple Effect to More Elements -->
+    <h1 class="ripple">
+      <a href="#">Portfolio Dashboard</a> <span class="circle"></span>
+    </h1>
+    <button class="card ripple">
+      <h3>User Profile Settings</h3>
+      <p>Manage your account preferences and personal information</p>
+      <span class="circle"></span>
+    </button>
+    <button class="ripple">Save Changes<span class="circle"></span></button>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/020-button ripple effect/style.css b/020-button ripple effect/style.css
index 95a898f..a7c4cbf 100644
--- a/020-button ripple effect/style.css	
+++ b/020-button ripple effect/style.css	
@@ -16,37 +16,71 @@ body {
   margin: 0;
 }
 
+/* Apply the Effect to More Elements */
+.ripple {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+/* Restyle the Button */
 button {
-  background-color: purple;
-  color: #fff;
-  border: 1px purple solid;
-  font-size: 14px;
+  background-color: #2c3e50;
+  color: #ecf0f1;
+  border: 1px solid #34495e;
+  border-radius: 25px;
+  font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 2px;
   padding: 20px 30px;
-  overflow: hidden;
   margin: 10px 0;
-  position: relative;
-  cursor: pointer;
 }
 
 button:focus {
   outline: none;
 }
 
-button .circle {
+h1 {
+  font-size: 2rem;
+  margin: 20px 0;
+  padding: 15px 25px;
+  border-radius: 10px;
+  background-color: #34495e;
+}
+
+h1 a {
+  color: #ecf0f1;
+  text-decoration: none;
+}
+
+.card {
+  background-color: #2c3e50;
+  color: #ecf0f1;
+  padding: 30px;
+  border-radius: 15px;
+  margin: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  min-width: 250px;
+  text-align: center;
+}
+
+/* Apply the Ripple Effect to More Elements */
+.ripple .circle {
   position: absolute;
-  background-color: #fff;
+  /* Change the Ripple's Color */
+  background-color: rgba(255, 255, 255, 0.5);
   width: 100px;
   height: 100px;
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(0);
-  animation: ripple 0.5s ease-out;
+  /* Customize the Ripple Animation */
+  animation: ripple 1s ease-out;
+  pointer-events: none;
 }
 
 @keyframes ripple {
   to {
-    transform: translate(-50%, -50%) scale(3);
+    transform: translate(-50%, -50%) scale(5);
     opacity: 0;
   }
 }
diff --git a/021-drag n drop/script.js b/021-drag n drop/script.js
index 7585007..3f119a5 100644
--- a/021-drag n drop/script.js	
+++ b/021-drag n drop/script.js	
@@ -24,9 +24,40 @@ const dragLeave = function () {
   this.className = "empty";
 };
 
-const dragDrop = function () {
+const dragDrop = function (e) {
+  e.preventDefault();
   this.className = "empty";
   this.append(fill);
+  // Allow Dropping Image Files
+  const uploadedImage = e.dataTransfer.files[0];
+
+  if (uploadedImage) {
+    if (uploadedImage.type.startsWith("image/")) {
+      fill.innerHTML = ``;
+      const reader = new FileReader();
+      reader.onload = () => {
+        fill.style.backgroundImage = `url(${reader.result})`;
+        fill.style.backgroundSize = "contain";
+        fill.style.backgroundRepeat = "no-repeat";
+        fill.style.backgroundPosition = "center";
+      };
+      reader.readAsDataURL(uploadedImage);
+      // Show a PDF Icon for Dropped PDF Files
+    } else if (uploadedImage.type === "application/pdf") {
+      fill.style.backgroundImage = "none";
+      fill.innerHTML = `
+        <div class="pdf-icon">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 48px; height: 48px; margin-bottom: 8px;">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" stroke="#e74c3c" stroke-width="2" fill="#f8f9fa"/>
+        <polyline points="14,2 14,8 20,8" stroke="#e74c3c" stroke-width="2" fill="none"/>
+        <text x="12" y="16" text-anchor="middle" fill="#e74c3c" font-family="Arial" font-size="4" font-weight="bold">PDF</text>
+          </svg>
+          <div class="filename">${uploadedImage.name}</div>
+        </div>`;
+    } else {
+      alert("Please upload a valid image or PDF file.");
+    }
+  }
 };
 
 fill.addEventListener("dragstart", dragStart);
diff --git a/021-drag n drop/style.css b/021-drag n drop/style.css
index 7ba918c..0296da3 100644
--- a/021-drag n drop/style.css	
+++ b/021-drag n drop/style.css	
@@ -21,14 +21,34 @@ body {
 }
 
 .fill {
-  background-image: url("https://picsum.photos/150/150");
+  /* Change the Draggable Image */
+  background-image: url("https://images.unsplash.com/photo-1484723091739-30a097e8f929?w=150&dpr=1&h=150&auto=format&fit=crop&q=60&ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNzUwODUzMzI4fA&ixlib=rb-4.1.0");
   height: 145px;
   width: 145px;
   cursor: pointer;
 }
 
+/* Show a PDF Icon for Dropped PDF Files */
+.pdf-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
+.filename {
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  max-width: 100%;
+  word-break: break-word;
+}
+
 .hold {
-  border: solid 5px #ccc;
+  /* Make the Dragging Style Stand Out */
+  border: dashed 5px red;
 }
 
 .hovered {
diff --git a/022-drawing app/index.html b/022-drawing app/index.html
index 88a1cbc..203ff84 100644
--- a/022-drawing app/index.html	
+++ b/022-drawing app/index.html	
@@ -13,6 +13,22 @@
       <span id="size">10</span>
       <button id="increase">+</button>
       <input type="color" id="color" />
+      <!-- Add Quick-Access Color Swatches -->
+      <div class="color-swatch" style="--swatch-color: #2c3e50"></div>
+      <div class="color-swatch" style="--swatch-color: #e74c3c"></div>
+      <div class="color-swatch" style="--swatch-color: #27ae60"></div>
+      <div class="color-swatch" style="--swatch-color: #3498db"></div>
+      <div class="color-swatch" style="--swatch-color: #f39c12"></div>
+      <div class="color-swatch" style="--swatch-color: #9b59b6"></div>
+      <div class="color-swatch" style="--swatch-color: #1abc9c"></div>
+      <div
+        class="color-swatch"
+        style="--swatch-color: #ecf0f1; border: 1px solid #bdc3c7"
+      ></div>
+      <!-- Add an Eraser Tool -->
+      <button class="eraser" id="eraser">🧽</button>
+      <!-- Save Your Drawing -->
+      <button id="save">💾</button>
       <button id="clear">X</button>
     </div>
     <script src="script.js"></script>
diff --git a/022-drawing app/script.js b/022-drawing app/script.js
index 1aec187..8ac7bc4 100644
--- a/022-drawing app/script.js	
+++ b/022-drawing app/script.js	
@@ -4,11 +4,19 @@ const increaseButton = document.getElementById("increase");
 const decreaseButton = document.getElementById("decrease");
 const sizeElement = document.getElementById("size");
 const colorElement = document.getElementById("color");
+const eraserButton = document.getElementById("eraser");
+const saveButton = document.getElementById("save");
 const clearElement = document.getElementById("clear");
+const colorSwatches = document.querySelectorAll(".color-swatch");
+const swatchColors = Array.from(colorSwatches).map((swatch) =>
+  getComputedStyle(swatch).getPropertyValue("--swatch-color").trim()
+);
 const ctx = canvas.getContext("2d");
 
 let size = 10;
-let color = "black";
+// Set the Default Drawing Color
+let color = "#000000";
+colorElement.value = color;
 let x;
 let y;
 let isPressed = false;
@@ -29,6 +37,23 @@ const drawLine = (x1, y1, x2, y2) => {
   ctx.stroke();
 };
 
+function activateColorSwatch(selectedColor) {
+  colorSwatches.forEach((swatch, index) => {
+    if (swatchColors[index] === selectedColor) {
+      swatch.classList.add("active");
+    } else {
+      swatch.classList.remove("active");
+    }
+  });
+}
+
+function setActiveColor(selectedColor) {
+  color = selectedColor;
+  colorElement.value = selectedColor;
+  activateColorSwatch(selectedColor);
+  eraserButton.classList.remove("active");
+}
+
 const updateSizeOnScreen = () => (sizeElement.innerText = size);
 
 canvas.addEventListener("mousedown", (e) => {
@@ -54,20 +79,49 @@ canvas.addEventListener("mousemove", (e) => {
   }
 });
 
+// Fine-Tune Brush Size Controls
 increaseButton.addEventListener("click", () => {
-  size += 5;
-  if (size > 50) size = 50;
+  size += 2;
+  if (size > 60) size = 60;
   updateSizeOnScreen();
 });
 
 decreaseButton.addEventListener("click", () => {
-  size -= 5;
-  if (size < 5) size = 5;
+  size -= 2;
+  if (size < 2) size = 2;
   updateSizeOnScreen();
 });
 
-colorElement.addEventListener("change", (e) => (color = e.target.value));
+colorElement.addEventListener("change", (e) => {
+  setActiveColor(e.target.value);
+});
 
 clearElement.addEventListener("click", () =>
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 );
+
+// Add an Eraser Tool
+eraserButton.addEventListener("click", () => {
+  const isActive = eraserButton.classList.toggle("active");
+  color = isActive ? "#f5f5f5" : colorElement.value;
+  if (isActive) {
+    colorSwatches.forEach((s) => s.classList.remove("active"));
+  } else {
+    activateColorSwatch(color);
+  }
+});
+
+// Save Your Drawing
+saveButton.addEventListener("click", () => {
+  const link = document.createElement("a");
+  link.download = "my-masterpiece.png";
+  link.href = canvas.toDataURL();
+  link.click();
+});
+
+// Add Quick-Access Color Swatches
+colorSwatches.forEach((swatch, index) => {
+  swatch.addEventListener("click", () => {
+    setActiveColor(swatchColors[index]);
+  });
+});
diff --git a/022-drawing app/style.css b/022-drawing app/style.css
index 2b7a5a1..bcc6d09 100644
--- a/022-drawing app/style.css	
+++ b/022-drawing app/style.css	
@@ -44,3 +44,22 @@ canvas {
 .toolbox > *:last-child {
   margin-left: auto;
 }
+
+/* Add Quick-Access Color Swatches */
+.color-swatch {
+  cursor: pointer;
+  background-color: var(--swatch-color, #fff);
+  border-radius: 50%;
+  transition: transform 0.1s ease;
+}
+
+.color-swatch:hover {
+  transform: scale(1.1);
+}
+
+/* Add an Eraser Tool */
+.color-swatch.active,
+.eraser.active {
+  transform: scale(0.9);
+  box-shadow: 0 0 0 4px #504136;
+}
diff --git a/023-kinetic loader/style.css b/023-kinetic loader/style.css
index 9e1309a..ca456fe 100644
--- a/023-kinetic loader/style.css	
+++ b/023-kinetic loader/style.css	
@@ -1,3 +1,11 @@
+/* Use CSS Variables for Easy Customization */
+:root {
+  --loader-color: #228cdb;
+  --loader-size: 50px;
+  --animation-speed: 4s;
+  --animation-delay: calc(var(--animation-speed) / 4);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -26,14 +34,21 @@ body {
   left: 0;
   height: 0;
   width: 0;
-  border: 50px solid transparent;
-  border-bottom-color: #fff;
-  animation: rotationA 2s linear infinite 0.5s;
+  border: var(--loader-size) solid transparent;
+  /* Change the Loader's Color */
+  border-bottom-color: var(--loader-color);
+  /* Experiment with Different Loader Shapes */
+  /* border: var(--loader-size) solid var(--loader-color);
+  border-top: var(--loader-size) solid transparent;
+  border-right: var(--loader-size) solid transparent; */
+  /* Adjust the Animation Speed */
+  animation: rotationA var(--animation-speed) ease-in-out infinite
+    var(--animation-delay);
 }
 
 .kinetic::before {
   transform: rotate(90deg);
-  animation: rotationB 2s linear infinite;
+  animation: rotationB var(--animation-speed) ease-in-out infinite;
 }
 
 @keyframes rotationA {
diff --git a/024-content placeholder/script.js b/024-content placeholder/script.js
index 1af040b..1cb54cd 100644
--- a/024-content placeholder/script.js	
+++ b/024-content placeholder/script.js	
@@ -23,24 +23,74 @@ const monthNames = [
 const animated_bgs = document.querySelectorAll(".animated-bg");
 const animated_bg_texts = document.querySelectorAll(".animated-bg-text");
 
-const getData = () => {
-  header.innerHTML =
-    '<img src="https://images.unsplash.com/photo-1610751399547-46ad575447cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />';
-  title.innerHTML = "Lorem ipsum dolor sit amet";
-  excerpt.innerHTML =
-    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis";
-  profile_img.innerHTML =
-    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />';
-  name.innerHTML = "John Doe";
-  date.innerHTML = `${
-    monthNames[today.getMonth()]
-  } ${today.getDate()}, ${today.getFullYear()}`;
-  animated_bgs.forEach((background) =>
-    background.classList.remove("animated-bg")
-  );
-  animated_bg_texts.forEach((background) =>
-    background.classList.remove("animated-bg-text")
-  );
+//   // Change the "Loaded" Content
+// const getData = () => {
+//   header.innerHTML =
+//     '<img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />';
+//   title.innerHTML = "The Future of Web Development";
+//   excerpt.innerHTML =
+//     "Exploring emerging technologies and trends that will shape how we build websites";
+//   profile_img.innerHTML =
+//     '<img src="https://randomuser.me/api/portraits/women/24.jpg" alt="" />';
+//   name.innerHTML = "Ana Smith";
+//   date.innerHTML = `${
+//     monthNames[today.getMonth()]
+//   } ${today.getDate()}, ${today.getFullYear()}`;
+//   animated_bgs.forEach((background) =>
+//     background.classList.remove("animated-bg")
+//   );
+//   animated_bg_texts.forEach((background) =>
+//     background.classList.remove("animated-bg-text")
+//   );
+// };
+
+// Fetch Real Data from an API
+const getData = async () => {
+  try {
+    const response = await fetch("https://dev.to/api/articles/2622588");
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    header.innerHTML = `<img src="${data.cover_image}" alt="" />`;
+
+    const shortenText = (text, maxLength) => {
+      if (text.length <= maxLength) {
+        return text;
+      }
+      const lastSpaceIndex = text.lastIndexOf(" ", maxLength);
+      return text.substring(0, lastSpaceIndex) + "...";
+    };
+
+    title.innerHTML = shortenText(data.title, 29);
+    excerpt.innerHTML = shortenText(data.description, 84);
+    profile_img.innerHTML = `<img src="${data.user.profile_image_90}" alt="" />`;
+    name.innerHTML = data.user.name;
+    date.innerHTML = data.readable_publish_date;
+
+    // Make the Card Clickable
+    const card = document.querySelector(".card");
+    const cardLink = document.createElement("a");
+    cardLink.href = data.url;
+    cardLink.target = "_blank";
+    cardLink.rel = "noopener noreferrer";
+    cardLink.title = "Read full article: " + data.title;
+    card.parentNode.insertBefore(cardLink, card);
+    cardLink.appendChild(card);
+
+    animated_bgs.forEach((background) =>
+      background.classList.remove("animated-bg")
+    );
+    animated_bg_texts.forEach((background) =>
+      background.classList.remove("animated-bg-text")
+    );
+  } catch (error) {
+    console.error("Failed to fetch article data:", error);
+  }
 };
 
-setTimeout(getData, 2500);
+// getData();
+
+setTimeout(getData, 500);
diff --git a/024-content placeholder/style.css b/024-content placeholder/style.css
index e9e250d..2230645 100644
--- a/024-content placeholder/style.css	
+++ b/024-content placeholder/style.css	
@@ -15,6 +15,23 @@ body {
   margin: 0;
 }
 
+/* Make the Card Clickable */
+a {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+a:hover .card {
+  transform: translateY(-8px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+a:hover .card-title {
+  color: #3498db;
+}
+
 img {
   max-width: 100%;
 }
@@ -24,6 +41,8 @@ img {
   border-radius: 10px;
   overflow: hidden;
   width: 350px;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .card-header {
@@ -76,15 +95,16 @@ img {
 }
 
 .animated-bg {
+  /* Customize the Placeholder Animation */
   background-image: linear-gradient(
     to right,
-    #f6f7f8 0%,
-    #edeef1 10%,
-    #f6f7f8 20%,
-    #f6f7f8 100%
+    #f5f7fa 0%,
+    #c3cfe2 10%,
+    #f5f7fa 20%,
+    #f5f7fa 100%
   );
   background-size: 200% 100%;
-  animation: bgPos 1s linear infinite;
+  animation: bgPos 2s linear infinite;
 }
 
 .animated-bg-text {
diff --git a/025-sticky navigation/index.html b/025-sticky navigation/index.html
index 36ae472..5a49a23 100644
--- a/025-sticky navigation/index.html	
+++ b/025-sticky navigation/index.html	
@@ -11,10 +11,10 @@
       <div class="container">
         <h1 class="logo"><a href="#">My Website</a></h1>
         <ul>
-          <li><a href="#" class="current">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Services</a></li>
-          <li><a href="#">Contact</a></li>
+          <li><a href="#home" class="current">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#contact">Contact</a></li>
         </ul>
       </div>
     </nav>
@@ -28,7 +28,7 @@ <h1>Welcome To My Website</h1>
       </div>
     </div>
     <section class="container content">
-      <h2>Content One</h2>
+      <h2 id="home">Content One</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est numquam
         alias dolorem pariatur iusto porro doloribus sint? Enim deleniti dolore
@@ -43,7 +43,7 @@ <h2>Content One</h2>
         dolorem inventore ea recusandae corrupti! Ut delectus hic maiores
         maxime.
       </p>
-      <h3>Content Two</h3>
+      <h3 id="about">Content Two</h3>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga illum odit
         culpa error sunt exercitationem. Ea itaque, exercitationem aperiam ullam
@@ -52,6 +52,103 @@ <h3>Content Two</h3>
         quam. Est obcaecati dolores, alias corporis voluptatem doloremque odio
         porro qui!
       </p>
+      <!-- Highlight Active Link on Scroll -->
+      <h3 id="services">Content Three</h3>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
+        voluptatum, cumque, asperiores, incidunt quisquam enim nobis
+        exercitationem dicta laboriosam fuga magnam. Quisquam, cumque
+        necessitatibus! Doloremque, voluptatibus. Quasi, doloremque. Doloribus
+        voluptatum, cumque, asperiores incidunt quisquam enim nobis
+        exercitationem dicta laboriosam fuga magnam. Quisquam, cumque
+        necessitatibus! Doloremque, voluptatibus.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, quas.
+        Vitae consequatur mollitia nam. Quas, nobis magni quia magnam sunt
+        quaerat molestiae cum, possimus quis rerum facere, dolorem saepe quo
+        iure praesentium. Minus dolores repudiandae nulla hic sunt sit,
+        consequatur veniam laboriosam reprehenderit eum sequi similique
+        voluptatibus voluptatem dignissimos deleniti iure ducimus saepe eligendi
+        delectus. Quae reiciendis est voluptatibus laudantium eaque quos velit
+        dolorem natus fugit eius quam, assumenda similique beatae ad harum optio
+        quibusdam nesciunt ducimus sequi rerum voluptas facilis neque! Ex
+        impedit, alias, placeat, consectetur deleniti velit nulla quisquam autem
+        nobis quod illum perferendis in numquam architecto dolore!
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nisi
+        nostrum ut soluta odit numquam corrupti voluptate distinctio odio
+        explicabo optio, tempora minima maiores incidunt eligendi velit ullam
+        sit. Tempore provident rerum quas! Repudiandae at ipsa incidunt non.
+        Aperiam consequatur maxime facilis repellat animi modi aut natus
+        possimus dolore totam, velit eveniet distinctio enim at nobis iusto
+        ipsum ex architecto nulla, cupiditate temporibus asperiores perferendis
+        repudiandae adipisci. Dignissimos, omnis necessitatibus! Exercitationem
+        cumque tempora, pariatur itaque commodi sed esse aspernatur! Corporis
+        soluta, distinctio alias nobis velit dolor consequatur sed tempore
+        accusamus dolorem eos natus officiis perspiciatis asperiores nesciunt
+        perferendis autem facere ex. Excepturi facere earum labore quasi illum
+        dignissimos ab ipsam cum corporis odio blanditiis distinctio vel dicta,
+        repellat ex sint maxime magni necessitatibus aperiam amet dolorem
+        corrupti quod fugiat! Magni quasi quis modi iusto provident. Reiciendis
+        fugit atque illo ullam, quae blanditiis vel quam, quasi a odio, voluptas
+        dolores porro.
+      </p>
+      <h3 id="contact">Content Four</h3>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
+        voluptatum, cumque, asperiores incidunt quisquam enim nobis
+        exercitationem dicta laboriosam fuga magnam. Quisquam, cumque
+        necessitatibus! Doloremque, voluptatibus. Doloribus voluptatum, cumque,
+        asperiores incidunt quisquam enim nobis exercitationem dicta laboriosam
+        fuga magnam. Quisquam, cumque necessitatibus! Doloremque, voluptatibus.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsum
+        itaque cupiditate eum perferendis ad laboriosam at, harum repellendus
+        quidem a alias aperiam dolorum cumque aut eveniet dicta. Similique
+        officia natus magni adipisci, ullam pariatur eos, libero aut iure
+        doloribus aperiam provident minima repellendus sed consequuntur ipsa cum
+        nemo quos tempora alias! Eaque laudantium recusandae, consequatur iste
+        tenetur veniam odio tempora quasi provident quibusdam voluptates, cum
+        eligendi velit hic id quod veritatis dolor repellat quos facilis illum
+        quae error. Dolorum voluptates ipsum provident laboriosam excepturi
+        molestias libero facere repudiandae numquam necessitatibus delectus
+        deleniti, perferendis veniam amet odit optio tenetur aspernatur
+        recusandae eum aliquid beatae voluptatum pariatur mollitia inventore.
+        Culpa aliquam perspiciatis unde dolorum magnam sunt! Illo, cupiditate
+        aperiam. Et eum sed, dicta, cupiditate hic accusantium officia maxime
+        dolorem dolores earum nostrum labore consectetur doloremque fugit
+        adipisci. Saepe incidunt illum, iste maiores libero consequatur
+        blanditiis tempora deleniti odit consectetur? Repellendus nesciunt ut
+        aspernatur soluta saepe ullam explicabo, quam iusto numquam reiciendis
+        neque ratione voluptatibus veritatis a velit ducimus possimus rerum sit
+        maiores quaerat, harum, vel cum vero perferendis? Vel dicta quibusdam
+        molestiae numquam quasi quos consectetur, temporibus suscipit est rem id
+        voluptatibus placeat quidem corrupti quaerat eveniet itaque ratione aut.
+        Iusto.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos tempora
+        iste sapiente dolor molestias animi aspernatur at, inventore, sint odit,
+        unde reprehenderit. Eius, repudiandae inventore odit cupiditate
+        voluptate adipisci enim quas? Officiis totam omnis voluptatem sequi
+        tempora similique quas sit adipisci, explicabo, ex odit consequuntur,
+        rem quisquam assumenda et amet eius doloribus? Perspiciatis, officia ex
+        veritatis cumque commodi itaque fugit laborum eligendi unde deleniti
+        inventore nesciunt impedit vero id quas eius. Recusandae illo in harum
+        necessitatibus iure. Doloribus, dolorem voluptates! Voluptatibus
+        voluptatem quos molestias, sit iste quis esse est expedita minima optio
+        harum mollitia tempore numquam temporibus deleniti. Maiores,
+        consectetur.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quam,
+        facere dolor architecto quasi dolorem. Quam odio architecto, officia,
+        provident repellat atque, corporis sequi libero consectetur alias fugiat
+        iusto sint?
+      </p>
     </section>
     <script src="script.js"></script>
   </body>
diff --git a/025-sticky navigation/script.js b/025-sticky navigation/script.js
index 9319ad5..f082808 100644
--- a/025-sticky navigation/script.js	
+++ b/025-sticky navigation/script.js	
@@ -1,8 +1,58 @@
 const nav = document.querySelector(".nav");
+const sections = document.querySelectorAll("h2[id], h3[id]");
+const navLinks = document.querySelectorAll(".nav ul a[href^='#']");
+
+let isThrottled = false;
+
+// Highlight Active Link on Scroll
+const updateActiveLink = () => {
+  const scrollPosition = window.scrollY + 100;
+  let currentSection = "home";
+  sections.forEach((section) => {
+    if (section.offsetTop <= scrollPosition) {
+      currentSection = section.id;
+    }
+  });
+  navLinks.forEach((link) => {
+    link.classList.remove("current");
+    if (link.getAttribute("href") === "#" + currentSection) {
+      link.classList.add("current");
+    }
+  });
+};
 
 const fixNav = () => {
-  if (window.scrollY > nav.offsetHeight + 150) nav.classList.add("active");
+  // Adjust the Scroll Trigger Point
+  if (window.scrollY > nav.offsetHeight + 50) nav.classList.add("active");
   else nav.classList.remove("active");
+  updateActiveLink();
 };
 
-window.addEventListener("scroll", fixNav);
+// Optimize Scroll Performance with Throttling
+const throttledFixNav = () => {
+  if (isThrottled) return;
+  isThrottled = true;
+  fixNav();
+  setTimeout(() => {
+    isThrottled = false;
+  }, 100);
+};
+
+// window.addEventListener("scroll", fixNav);
+window.addEventListener("scroll", throttledFixNav);
+
+// Smooth Scrolling for Nav Links
+navLinks.forEach((link) => {
+  link.addEventListener("click", (e) => {
+    e.preventDefault();
+    const targetId = e.target.getAttribute("href").substring(1);
+    const targetSection = document.getElementById(targetId);
+    if (targetSection) {
+      window.scrollTo({
+        top: targetSection.offsetTop - nav.offsetHeight - 20,
+        behavior: "smooth",
+      });
+      history.pushState(null, null, "#" + targetId);
+    }
+  });
+});
diff --git a/025-sticky navigation/style.css b/025-sticky navigation/style.css
index 1e3eae3..ca7d703 100644
--- a/025-sticky navigation/style.css	
+++ b/025-sticky navigation/style.css	
@@ -48,13 +48,18 @@ body {
   transition: all 0.3s ease-in-out;
 }
 
+/* Customize the Active Nav Style */
 .nav.active {
-  background-color: #fff;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  /* background-color: #5f758e; */
+  /* background: linear-gradient(135deg, #49110b 0%, #040403 100%); */
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
 .nav.active a {
-  color: #000;
+  color: #222;
 }
 
 .nav.active .container {
diff --git a/026-double vertical slider/index.html b/026-double vertical slider/index.html
index 1372898..68dabda 100644
--- a/026-double vertical slider/index.html	
+++ b/026-double vertical slider/index.html	
@@ -15,42 +15,43 @@
   <body>
     <div class="slider-container">
       <div class="left-slide">
-        <div style="background-color: #b99f8a">
-          <h1>Pareos</h1>
-          <p>new collection</p>
+        <!-- Customize Slide Content -->
+        <div style="background-color: #19202d">
+          <h1>Paris</h1>
+          <p>The City of Lights</p>
         </div>
-        <div style="background-color: #354f32">
-          <h1>Swimsuits</h1>
-          <p>new collection</p>
+        <div style="background-color: #79573e">
+          <h1>New York</h1>
+          <p>The Big Apple</p>
         </div>
-        <div style="background-color: #657e85">
-          <h1>Crop Tops</h1>
-          <p>new collection</p>
+        <div style="background-color: #304e61">
+          <h1>Tokyo</h1>
+          <p>Land of the Rising Sun</p>
         </div>
-        <div style="background-color: #2b2e32">
-          <h1>Accessories</h1>
-          <p>new collection</p>
+        <div style="background-color: #434b52">
+          <h1>Sydney</h1>
+          <p>Harbour City</p>
         </div>
       </div>
       <div class="right-slide">
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1528072164453-f4e8ef0d475a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
+            background-image: url('https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
         <div
           style="
-            background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
+            background-image: url('https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
           "
         ></div>
       </div>
diff --git a/026-double vertical slider/script.js b/026-double vertical slider/script.js
index 9a21986..699bf30 100644
--- a/026-double vertical slider/script.js	
+++ b/026-double vertical slider/script.js	
@@ -28,3 +28,23 @@ const changeSlide = (direction) => {
 
 upButton.addEventListener("click", () => changeSlide("up"));
 downButton.addEventListener("click", () => changeSlide("down"));
+
+// Enable Keyboard Navigation
+window.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowUp") {
+    changeSlide("down");
+  } else if (event.key === "ArrowDown") {
+    changeSlide("up");
+  }
+});
+
+// Implement Autoplay
+let autoplayInterval = setInterval(() => changeSlide("up"), 5000);
+
+slideRight.addEventListener("mouseover", () => {
+  clearInterval(autoplayInterval);
+});
+
+slideRight.addEventListener("mouseout", () => {
+  autoplayInterval = setInterval(() => changeSlide("up"), 5000);
+});
diff --git a/026-double vertical slider/style.css b/026-double vertical slider/style.css
index e8b392d..2b29427 100644
--- a/026-double vertical slider/style.css	
+++ b/026-double vertical slider/style.css	
@@ -1,5 +1,11 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
 
+/* Adjust Slide Transition Speed */
+:root {
+  --slider-transition-speed: 1s;
+  --transition: transform var(--slider-transition-speed) ease-in-out;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -24,7 +30,7 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  transition: transform 0.5s ease-in-out;
+  transition: var(--transition);
 }
 
 .left-slide > div {
@@ -49,7 +55,7 @@ body {
   top: 0;
   left: 35%;
   width: 65%;
-  transition: transform 0.5s ease-in-out;
+  transition: var(--transition);
 }
 
 .right-slide > div {
diff --git a/027-toast notification/index.html b/027-toast notification/index.html
index 39d4e7a..8dad0c3 100644
--- a/027-toast notification/index.html	
+++ b/027-toast notification/index.html	
@@ -3,6 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Add Notification Types with Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Toast Notification</title>
   </head>
diff --git a/027-toast notification/script.js b/027-toast notification/script.js
index 4952894..c5e8466 100644
--- a/027-toast notification/script.js	
+++ b/027-toast notification/script.js	
@@ -1,26 +1,59 @@
 const button = document.getElementById("button");
 const toasts = document.getElementById("toasts");
 
+// Customize Notification Messages
+// const messages = [
+//   "Login successful",
+//   "Item added to cart",
+//   "Profile updated",
+//   "Password changed",
+// ];
+// const types = ["info", "success", "error"];
+
+// const getRandomMessage = () =>
+//   messages[Math.floor(Math.random() * messages.length)];
+
+// const getRandomType = () => types[Math.floor(Math.random() * types.length)];
+
+// Add Notification Types with Icons
 const messages = [
-  "Message One",
-  "Message Two",
-  "Message Three",
-  "Message Four",
+  { text: "Login successful", type: "success" },
+  { text: "Item added to cart", type: "info" },
+  { text: "Profile updated", type: "success" },
+  { text: "Password changed", type: "success" },
+  { text: "An error occurred", type: "error" },
+  { text: "Invalid input", type: "error" },
+  { text: "Welcome back!", type: "info" },
 ];
-const types = ["info", "success", "error"];
 
 const getRandomMessage = () =>
   messages[Math.floor(Math.random() * messages.length)];
 
-const getRandomType = () => types[Math.floor(Math.random() * types.length)];
+const getIcon = (type) => {
+  if (type === "success") return '<i class="fas fa-check-circle"></i> ';
+  if (type === "error") return '<i class="fas fa-exclamation-circle"></i> ';
+  return '<i class="fas fa-info-circle"></i> ';
+};
 
 const createNotification = (message = null, type = null) => {
   const notif = document.createElement("div");
   notif.classList.add("toast");
-  notif.classList.add(type ? type : getRandomType());
-  notif.innerText = message ? message : getRandomMessage();
+  // notif.classList.add(type ? type : getRandomType());
+  // notif.innerText = message ? message : getRandomMessage();
+  const messageObject = message || getRandomMessage();
+  notif.classList.add(messageObject.type);
+  notif.innerHTML = getIcon(messageObject.type) + messageObject.text;
+  // Create a Close Button for Toasts
+  const closeButton = document.createElement("button");
+  closeButton.innerHTML = '<i class="fas fa-times"></i>';
+  closeButton.classList.add("close-button");
+  const timeoutId = setTimeout(() => notif.remove(), 3000);
+  closeButton.addEventListener("click", () => {
+    clearTimeout(timeoutId);
+    notif.remove();
+  });
+  notif.appendChild(closeButton);
   toasts.appendChild(notif);
-  setTimeout(() => notif.remove(), 3000);
 };
 
 button.addEventListener("click", () => createNotification());
diff --git a/027-toast notification/style.css b/027-toast notification/style.css
index 970f75b..3fb3807 100644
--- a/027-toast notification/style.css	
+++ b/027-toast notification/style.css	
@@ -35,13 +35,17 @@ body {
   transform: scale(0.98);
 }
 
+/* Change Notification Position */
 #toasts {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
+  /* bottom: 10px; */
+  top: 10px;
+  /* right: 10px; */
+  left: 10px;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  /* align-items: flex-end; */
+  align-items: start;
 }
 
 .toast {
@@ -49,6 +53,7 @@ body {
   border-radius: 5px;
   padding: 1rem 2rem;
   margin: 0.5rem;
+  position: relative;
 }
 
 .toast.info {
@@ -62,3 +67,20 @@ body {
 .toast.error {
   color: red;
 }
+
+/* Add Notification Types with Icons */
+.toast i {
+  margin-right: 0.25rem;
+}
+
+/* Create a Close Button for Toasts */
+.close-button {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  position: absolute;
+  top: 0.25rem;
+  right: 0;
+}
diff --git a/028-github profiles/script.js b/028-github profiles/script.js
index 63ddd92..143d754 100644
--- a/028-github profiles/script.js	
+++ b/028-github profiles/script.js	
@@ -40,18 +40,21 @@ const createErrorCard = (message) => {
 
 const addReposToCard = (repos) => {
   const reposElement = document.getElementById("repos");
-  repos.slice(0, 5).forEach((repo) => {
+  // Change the Number of Repos Displayed
+  repos.slice(0, 10).forEach((repo) => {
     const repoElement = document.createElement("a");
     repoElement.classList.add("repo");
     repoElement.href = repo.html_url;
     repoElement.target = "_blank";
-    repoElement.innerText = repo.name;
+    repoElement.innerHTML = `${repo.name} <span class="star-count">★ ${repo.stargazers_count}</span>`;
     reposElement.appendChild(repoElement);
   });
 };
 
 const getUser = async (username) => {
   try {
+    // Add a Loading State
+    main.innerHTML = '<div class="loader"></div>';
     const { data } = await axios(APIURL + username);
     createUserCard(data);
     getRepos(username);
@@ -64,6 +67,8 @@ const getUser = async (username) => {
 const getRepos = async (username) => {
   try {
     const { data } = await axios(APIURL + username + "/repos?sort=created");
+    // Sort Repositories by Popularity
+    data.sort((a, b) => b.stargazers_count - a.stargazers_count);
     addReposToCard(data);
   } catch (error) {
     createErrorCard("Problem fetching repos");
diff --git a/028-github profiles/style.css b/028-github profiles/style.css
index 694ec08..2619c07 100644
--- a/028-github profiles/style.css	
+++ b/028-github profiles/style.css	
@@ -1,12 +1,25 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
 
+/* Customize the Color Scheme */
+:root {
+  --color-bg: #1b263b;
+  --color-card: #415a77;
+  --color-text: #fff;
+  --color-star: #afc4da;
+  --color-placeholder: #e0e1dd;
+  --color-shadow1: rgba(154, 160, 185, 0.05);
+  --color-shadow2: rgba(0, 0, 0, 0.1);
+  --color-repo-bg: #0d1b2a;
+  --color-user-info: #eee;
+}
+
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #2a2a72;
-  color: #fff;
+  background-color: var(--color-bg);
+  color: var(--color-text);
   font-family: "Poppins", sans-serif;
   display: flex;
   flex-direction: column;
@@ -25,16 +38,15 @@ body {
 .user-form input {
   width: 100%;
   display: block;
-  background-color: #4c2885;
+  background-color: var(--color-card);
   border: none;
   border-radius: 10px;
-  color: #fff;
+  color: var(--color-text);
   padding: 1rem;
   margin-bottom: 2rem;
   font-family: inherit;
   font-size: 1rem;
-  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
-    0 15px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 5px 10px var(--color-shadow1), 0 15px 40px var(--color-shadow2);
 }
 
 .user-form input:focus {
@@ -42,15 +54,14 @@ body {
 }
 
 .user-form input::placeholder {
-  color: #bbb;
+  color: var(--color-placeholder);
 }
 
 .card {
   max-width: 800px;
-  background-color: #4c2885;
+  background-color: var(--color-card);
   border-radius: 20px;
-  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
-    0 15px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 5px 10px var(--color-shadow1), 0 15px 40px var(--color-shadow2);
   display: flex;
   padding: 3rem;
   margin: 0 1.5rem;
@@ -58,13 +69,13 @@ body {
 
 .avatar {
   border-radius: 50%;
-  border: 10px solid #2a2a72;
+  border: 10px solid var(--color-bg);
   height: 150px;
   width: 150px;
 }
 
 .user-info {
-  color: #eee;
+  color: var(--color-user-info);
   margin-left: 2rem;
 }
 
@@ -92,8 +103,8 @@ body {
 
 .repo {
   text-decoration: none;
-  color: #fff;
-  background-color: #212a72;
+  color: var(--color-text);
+  background-color: var(--color-repo-bg);
   font-size: 0.7rem;
   padding: 0.25rem 0.5rem;
   margin-right: 0.5rem;
@@ -101,6 +112,35 @@ body {
   display: inline-block;
 }
 
+/* Sort Repositories by Popularity */
+
+.star-count {
+  color: var(--color-star);
+  margin-left: 0.25rem;
+}
+
+/* Add a Loading State */
+
+.loader {
+  /* border: 4px solid #415a77;
+  border-top: 4px solid #fff; */
+  border: 4px solid var(--color-card);
+  border-top: 4px solid var(--color-text);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media (max-width: 500px) {
   .card {
     flex-direction: column;
diff --git a/029-double click heart/index.html b/029-double click heart/index.html
index ee32d56..162a497 100644
--- a/029-double click heart/index.html	
+++ b/029-double click heart/index.html	
@@ -10,10 +10,11 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
-    <title>Double Click Heart</title>
+    <title>Double Click Thumbs Up</title>
   </head>
   <body>
-    <h3>Double click on the image to <i class="fas fa-heart"></i> it</h3>
+    <!-- Change the Heart Icon and Color -->
+    <h3>Double click on the image to <i class="fas fa-thumbs-up"></i> it</h3>
     <small>You liked it <span id="times">0</span> times</small>
     <div class="loveMe"></div>
     <script src="script.js"></script>
diff --git a/029-double click heart/script.js b/029-double click heart/script.js
index 7729961..0a4fcba 100644
--- a/029-double click heart/script.js	
+++ b/029-double click heart/script.js	
@@ -1,13 +1,14 @@
 const loveMe = document.querySelector(".loveMe");
 const times = document.querySelector("#times");
 
-let clickTime = 0;
+// let clickTime = 0;
 let timesClicked = 0;
 
 const createHeart = (e) => {
   const heart = document.createElement("i");
   heart.classList.add("fas");
-  heart.classList.add("fa-heart");
+  // Change the Heart Icon and Color
+  heart.classList.add("fa-thumbs-up");
   const x = e.clientX;
   const y = e.clientY;
   const leftOffset = e.target.offsetLeft;
@@ -21,13 +22,18 @@ const createHeart = (e) => {
   setTimeout(() => heart.remove(), 1000);
 };
 
-loveMe.addEventListener("click", (e) => {
-  // you can use dblclick: https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
-  if (clickTime === 0) clickTime = new Date().getTime();
-  else {
-    if (new Date().getTime() - clickTime < 800) {
-      createHeart(e);
-      clickTime = 0;
-    } else clickTime = new Date().getTime();
-  }
+// loveMe.addEventListener("click", (e) => {
+//   // you can use dblclick: https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
+//   if (clickTime === 0) clickTime = new Date().getTime();
+//   else {
+//     if (new Date().getTime() - clickTime < 800) {
+//       createHeart(e);
+//       clickTime = 0;
+//     } else clickTime = new Date().getTime();
+//   }
+// });
+
+// Use the Native Double-Click Event
+loveMe.addEventListener("dblclick", (e) => {
+  createHeart(e);
 });
diff --git a/029-double click heart/style.css b/029-double click heart/style.css
index c10dd0e..39dafe3 100644
--- a/029-double click heart/style.css	
+++ b/029-double click heart/style.css	
@@ -22,8 +22,19 @@ small {
   text-align: center;
 }
 
-.fa-heart {
-  color: red;
+/* Prevent Text Selection on Double-Click */
+h3,
+small {
+  user-select: none;
+}
+
+/* Change the Heart Icon and Color */
+/* .fa-heart {
+  color: gold;
+} */
+
+.fa-thumbs-up {
+  color: #5aa9e6;
 }
 
 .loveMe {
@@ -38,15 +49,16 @@ small {
   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
-.loveMe .fa-heart {
+.loveMe .fa-thumbs-up {
   position: absolute;
   animation: grow 0.6s linear;
   transform: translate(-50%, -50%) scale(0);
 }
 
+/* Adjust the Animation Size */
 @keyframes grow {
   to {
-    transform: translate(-50%, -50%) scale(10);
+    transform: translate(-50%, -50%) scale(5);
     opacity: 0;
   }
 }
diff --git a/030-auto text effect/index.html b/030-auto text effect/index.html
index b3c4310..e37cb42 100644
--- a/030-auto text effect/index.html	
+++ b/030-auto text effect/index.html	
@@ -10,11 +10,12 @@
     <h1 id="text">Starting...</h1>
     <div>
       <label for="speed">Speed:</label>
+      <!-- Adjust the Default Speed -->
       <input
         type="number"
         name="speed"
         id="speed"
-        value="2"
+        value="3"
         min="1"
         max="5"
         step="1"
diff --git a/030-auto text effect/script.js b/030-auto text effect/script.js
index 8ffeafc..a71c1a3 100644
--- a/030-auto text effect/script.js	
+++ b/030-auto text effect/script.js	
@@ -1,13 +1,33 @@
 const textElement = document.getElementById("text");
 const speedElement = document.getElementById("speed");
-const text = "We Love Programming!";
+// Change the Typing Text
+// const text = "Keep calm and code on.";
+
+// Type Multiple Phrases
+const textArray = [
+  "Hello, world!",
+  "Practice makes perfect.",
+  "Keep calm and code on.",
+  "Debugging is fun.",
+  "Always write clean code.",
+  "Never stop learning.",
+];
+let phraseIndex = 0;
 let index = 1;
 let speed = 300 / speedElement.value;
 
 const writeText = () => {
-  textElement.innerText = text.slice(0, index);
+  // textElement.innerText = text.slice(0, index);
+  // index++;
+  // if (index > text.length) index = 1;
+  // setTimeout(writeText, speed);
+  const currentPhrase = textArray[phraseIndex];
+  textElement.innerText = currentPhrase.slice(0, index);
   index++;
-  if (index > text.length) index = 1;
+  if (index > currentPhrase.length) {
+    phraseIndex = (phraseIndex + 1) % textArray.length;
+    index = 1;
+  }
   setTimeout(writeText, speed);
 };
 
diff --git a/030-auto text effect/style.css b/030-auto text effect/style.css
index fe8792c..da3caa2 100644
--- a/030-auto text effect/style.css	
+++ b/030-auto text effect/style.css	
@@ -36,3 +36,16 @@ input {
 input:focus {
   outline: none;
 }
+
+/* Add a Blinking Cursor */
+
+h1::after {
+  content: "_";
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
diff --git a/031-password generator/index.html b/031-password generator/index.html
index f53a149..a45df7d 100644
--- a/031-password generator/index.html	
+++ b/031-password generator/index.html	
@@ -21,6 +21,8 @@ <h2>Password Generator</h2>
           <i class="far fa-copy"></i>
         </button>
       </div>
+      <!-- Add a Password Strength Indicator -->
+      <div id="strength" class="strength"></div>
       <div class="settings">
         <div class="setting">
           <label for="length">Password Length</label>
diff --git a/031-password generator/script.js b/031-password generator/script.js
index f2269b7..a677ea4 100644
--- a/031-password generator/script.js	
+++ b/031-password generator/script.js	
@@ -6,6 +6,7 @@ const numbersElement = document.getElementById("numbers");
 const symbolsElement = document.getElementById("symbols");
 const generateElement = document.getElementById("generate");
 const clipboardElement = document.getElementById("clipboard");
+const strengthElement = document.getElementById("strength");
 
 // Random functions
 // fromCharCode: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
@@ -20,7 +21,13 @@ const getRandomNumber = () =>
   String.fromCharCode(Math.floor(Math.random() * 10) + 48);
 
 const getRandomSymbol = () => {
-  const symbols = "!@#$%^&*(){}[]=<>/,.";
+  // Refactor Random Symbol Generation
+  // const symbols = "!@#$%^&*(){}[]=<>/,.";
+  const symbolCodes = [
+    33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 58, 59, 60, 61,
+    62, 63, 64, 91, 92, 93, 94, 95, 96, 123, 124, 125, 126,
+  ];
+  const symbols = String.fromCharCode(...symbolCodes);
   return symbols[Math.floor(Math.random() * symbols.length)];
 };
 
@@ -46,27 +53,41 @@ clipboardElement.addEventListener("click", () => {
   textarea.value = password;
   document.body.appendChild(textarea);
   textarea.select();
-  document.execCommand("copy");
+  // Modernize Clipboard Functionality
+  // document.execCommand("copy");
+  navigator.clipboard
+    .writeText(textarea.value)
+    .then(() => {
+      createNotification("Password copied to clipboard!");
+    })
+    .catch((err) => {
+      createNotification("Failed to copy password: ", err);
+    });
   textarea.remove();
-  createNotification("Password copied to clipboard!");
 });
 
 generateElement.addEventListener("click", () => {
-  const length = +lengthElement.value;
-  const hasLower = lowercaseElement.checked;
-  const hasUpper = uppercaseElement.checked;
-  const hasNumber = numbersElement.checked;
-  const hasSymbol = symbolsElement.checked;
-  resultElement.innerText = generatePassword(
-    hasLower,
-    hasUpper,
-    hasNumber,
-    hasSymbol,
-    length
-  );
+  // Refactor with a Configuration Object
+  // const length = +lengthElement.value;
+  // const hasLower = lowercaseElement.checked;
+  // const hasUpper = uppercaseElement.checked;
+  // const hasNumber = numbersElement.checked;
+  // const hasSymbol = symbolsElement.checked;
+  const settings = {
+    lower: lowercaseElement.checked,
+    upper: uppercaseElement.checked,
+    number: numbersElement.checked,
+    symbol: symbolsElement.checked,
+    length: +lengthElement.value,
+  };
+  resultElement.innerText = generatePassword(settings);
+  // Show password strength
+  const { label, className } = checkPasswordStrength(settings);
+  strengthElement.textContent = label;
+  strengthElement.className = "strength " + className;
 });
 
-const generatePassword = (lower, upper, number, symbol, length) => {
+const generatePassword = ({ lower, upper, number, symbol, length }) => {
   let generatedPassword = "";
   const typesCount = lower + upper + number + symbol;
   const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
@@ -80,5 +101,44 @@ const generatePassword = (lower, upper, number, symbol, length) => {
     });
   }
   const finalPassword = generatedPassword.slice(0, length);
-  return finalPassword;
+  // Shuffle the Generated Password
+  const shuffled = shuffle(finalPassword.split(""));
+  return shuffled.join("");
+};
+
+// Reference: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+const shuffle = (array) => {
+  let currentIndex = array.length;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+    // Pick a remaining element...
+    let randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+  return array;
 };
+
+// Add a Password Strength Indicator
+function checkPasswordStrength({ lower, upper, number, symbol, length }) {
+  let strength = 0;
+  if (length >= 8) strength++;
+  if (upper) strength++;
+  if (lower) strength++;
+  if (number) strength++;
+  if (symbol) strength++;
+
+  if (strength <= 2) {
+    return { label: "Weak", className: "weak" };
+  } else if (strength === 3 || strength === 4) {
+    return { label: "Medium", className: "medium" };
+  } else {
+    return { label: "Strong", className: "strong" };
+  }
+}
diff --git a/031-password generator/style.css b/031-password generator/style.css
index b9cafef..a34e0fd 100644
--- a/031-password generator/style.css	
+++ b/031-password generator/style.css	
@@ -89,3 +89,23 @@ h2 {
   padding: 1rem 2rem;
   margin: 0.5rem;
 }
+
+/* Add a Password Strength Indicator */
+
+.strength {
+  margin-top: 0.5rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.weak {
+  color: #e74c3c;
+}
+
+.medium {
+  color: #f1c40f;
+}
+
+.strong {
+  color: #2ecc40;
+}
diff --git a/032-good cheap fast/index.html b/032-good cheap fast/index.html
index fdc4280..038f934 100644
--- a/032-good cheap fast/index.html	
+++ b/032-good cheap fast/index.html	
@@ -23,6 +23,10 @@ <h2>How do you want your project to be?</h2>
       <label for="fast" class="label"><div class="ball"></div></label>
       <span>Fast</span>
     </div>
+    <!-- Display the Current Selection -->
+    <h3 id="selection" class="selection">
+      You haven't chosen two options yet.
+    </h3>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/032-good cheap fast/script.js b/032-good cheap fast/script.js
index a405a18..5d5b4f9 100644
--- a/032-good cheap fast/script.js	
+++ b/032-good cheap fast/script.js	
@@ -2,15 +2,57 @@ const toggles = document.querySelectorAll(".toggle");
 const good = document.getElementById("good");
 const cheap = document.getElementById("cheap");
 const fast = document.getElementById("fast");
+const selection = document.getElementById("selection");
+
+// Manage State with an Object
+let state = { good: false, cheap: false, fast: false };
+
+// Add a Visual Indicator for Disabled Option
+const highlight = (toggle) => {
+  toggle.classList.add("highlight");
+  setTimeout(() => toggle.classList.remove("highlight"), 400);
+};
 
 const doTheTrick = (theClickedOne) => {
-  if (good.checked && cheap.checked && fast.checked) {
-    if (good === theClickedOne) fast.checked = false;
-    if (cheap === theClickedOne) good.checked = false;
-    if (fast === theClickedOne) cheap.checked = false;
+  if (state.good && state.cheap && state.fast) {
+    if (good === theClickedOne) {
+      fast.checked = false;
+      state.fast = false;
+      highlight(fast.parentElement);
+    }
+    if (cheap === theClickedOne) {
+      good.checked = false;
+      state.good = false;
+      highlight(good.parentElement);
+    }
+    if (fast === theClickedOne) {
+      cheap.checked = false;
+      state.cheap = false;
+      highlight(cheap.parentElement);
+    }
   }
+  updateSelectionMessage();
 };
 
+// Display the Current Selection
+function updateSelectionMessage() {
+  const selected = [];
+  if (state.good) selected.push("Good");
+  if (state.cheap) selected.push("Cheap");
+  if (state.fast) selected.push("Fast");
+
+  if (selected.length === 2) {
+    selection.textContent = `You chose: ${selected[0]} and ${selected[1]}`;
+  } else if (selected.length === 1) {
+    selection.textContent = `You chose: ${selected[0]}`;
+  } else {
+    selection.textContent = "You haven't chosen two options yet.";
+  }
+}
+
 toggles.forEach((toggle) =>
-  toggle.addEventListener("change", (e) => doTheTrick(e.target))
+  toggle.addEventListener("change", (e) => {
+    state[e.target.id] = e.target.checked;
+    doTheTrick(e.target);
+  })
 );
diff --git a/032-good cheap fast/style.css b/032-good cheap fast/style.css
index c64ac57..b382a69 100644
--- a/032-good cheap fast/style.css	
+++ b/032-good cheap fast/style.css	
@@ -20,6 +20,12 @@ body {
   align-items: center;
   margin: 10px 0;
   width: 200px;
+  transition: all 0.3s ease;
+}
+
+/* Add a Visual Indicator for Disabled Option */
+.toggle-container.highlight {
+  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 .toggle {
@@ -37,10 +43,20 @@ body {
   position: relative;
 }
 
+.label + span {
+  transition: all 0.3s ease;
+}
+
 .toggle:checked + .label {
   background-color: #8e44ad;
 }
 
+/* Animate the Label Text */
+.toggle:checked + .label + span {
+  color: #8e44ad;
+  font-weight: bold;
+}
+
 .ball {
   background: #fff;
   height: 34px;
@@ -58,6 +74,29 @@ body {
   animation: slideOn 0.3s linear forwards;
 }
 
+@keyframes shake {
+  10%,
+  90% {
+    transform: translateX(-2px);
+  }
+  20%,
+  80% {
+    transform: translateX(4px);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translateX(-8px);
+  }
+  40%,
+  60% {
+    transform: translateX(8px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 @keyframes slideOn {
   0% {
     transform: translateX(0) scale(1);
diff --git a/033-notes app/index.html b/033-notes app/index.html
index 879752d..423e53b 100644
--- a/033-notes app/index.html	
+++ b/033-notes app/index.html	
@@ -13,6 +13,8 @@
     <title>Notes App</title>
   </head>
   <body>
+    <!-- Implement Search/Filter Functionality -->
+    <input type="search" class="search" id="search" placeholder="Search..." />
     <button class="add" id="add"><i class="fas fa-plus"></i> Add note</button>
 
     <script
diff --git a/033-notes app/script.js b/033-notes app/script.js
index c50134f..3239c1d 100644
--- a/033-notes app/script.js	
+++ b/033-notes app/script.js	
@@ -1,18 +1,30 @@
 const addButton = document.getElementById("add");
+const searchInput = document.getElementById("search");
 const notes = JSON.parse(localStorage.getItem("notes"));
 
 const updateLocalStorage = () => {
   const notesText = document.querySelectorAll("textarea");
+  // Add a "Last Edited" Timestamp
+  const notesTimestamps = document.querySelectorAll(".timestamp");
   const notes = [];
-  notesText.forEach((note) => notes.push(note.value));
+  notesText.forEach((note) => {
+    notes.push({
+      text: note.value,
+      timestamp: +notesTimestamps[notes.length].getAttribute("data-timestamp"),
+    });
+  });
   localStorage.setItem("notes", JSON.stringify(notes));
 };
 
-const addNewNote = (text = "") => {
+const addNewNote = (noteObj = {}) => {
+  const { text = "", timestamp = Date.now() } = noteObj;
   const note = document.createElement("div");
   note.classList.add("note");
   note.innerHTML = `
   <div class="tools">
+        <span class="timestamp" data-timestamp="${timestamp}">
+          ${new Date(timestamp).toLocaleString("en-US")}
+        </span>
         <button class="edit"><i class="fas fa-edit"></i></button>
         <button class="delete"><i class="fas fa-trash-alt"></i></button>
   </div>
@@ -27,12 +39,28 @@ const addNewNote = (text = "") => {
   main.innerHTML = marked(text);
 
   deleteButton.addEventListener("click", () => {
-    note.remove();
-    updateLocalStorage();
+    // Confirm Before Deleting
+    if (confirm("Are you sure?")) {
+      note.remove();
+      updateLocalStorage();
+    }
   });
   editButton.addEventListener("click", () => {
     main.classList.toggle("hidden");
     textArea.classList.toggle("hidden");
+    // Auto-focus on Edit
+    if (!textArea.classList.contains("hidden")) {
+      textArea.focus();
+    } else {
+      main.innerHTML = marked(textArea.value);
+      const newTimestamp = Date.now();
+      const timestampSpan = note.querySelector(".timestamp");
+      timestampSpan.setAttribute("data-timestamp", newTimestamp);
+      timestampSpan.textContent = new Date(newTimestamp).toLocaleString(
+        "en-US"
+      );
+      updateLocalStorage();
+    }
   });
   textArea.addEventListener("input", (e) => {
     const { value } = e.target;
@@ -47,3 +75,17 @@ addButton.addEventListener("click", () => addNewNote());
 if (notes) {
   notes.forEach((note) => addNewNote(note));
 }
+
+// Implement Search/Filter Functionality
+searchInput.addEventListener("input", (e) => {
+  const searchTerm = e.target.value.toLowerCase();
+  const noteElements = document.querySelectorAll(".note");
+  noteElements.forEach((note) => {
+    const main = note.querySelector(".main");
+    if (main.innerText.toLowerCase().includes(searchTerm)) {
+      note.style.display = "block";
+    } else {
+      note.style.display = "none";
+    }
+  });
+});
diff --git a/033-notes app/style.css b/033-notes app/style.css
index b8eee3a..39fb5f5 100644
--- a/033-notes app/style.css	
+++ b/033-notes app/style.css	
@@ -25,6 +25,18 @@ body {
   cursor: pointer;
 }
 
+/* Implement Search/Filter Functionality */
+.search {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  padding: 0.5rem;
+  border-radius: 3px;
+  border: none;
+  font-family: inherit;
+  color: #2d4a0f;
+}
+
 .note {
   background-color: #fff;
   box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
@@ -50,6 +62,11 @@ body {
   margin-left: 0.5rem;
 }
 
+/* Add a "Last Edited" Timestamp */
+.note .tools .timestamp {
+  color: #2d4a0f;
+}
+
 .note textarea {
   outline: none;
   font-family: inherit;
diff --git a/034-animated countdown/index.html b/034-animated countdown/index.html
index a532c2a..045c480 100644
--- a/034-animated countdown/index.html	
+++ b/034-animated countdown/index.html	
@@ -7,9 +7,16 @@
     <title>Animated Countdown</title>
   </head>
   <body>
+    <!-- Add a Start Overlay -->
+    <div id="startOverlay">
+      <button id="start">Start</button>
+    </div>
     <div class="counter">
       <div class="nums">
-        <span class="in">3</span>
+        <!-- Change the Countdown Numbers -->
+        <span class="in">5</span>
+        <span>4</span>
+        <span>3</span>
         <span>2</span>
         <span>1</span>
         <span>0</span>
@@ -20,6 +27,9 @@ <h4>Get Ready</h4>
       <h1>GO</h1>
       <button id="replay">Replay</button>
     </div>
+    <!-- Add Sound Effects -->
+    <audio id="tickSound" src="sounds/tick.mp3"></audio>
+    <audio id="goSound" src="sounds/go.mp3"></audio>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/034-animated countdown/script.js b/034-animated countdown/script.js
index d81370e..550c819 100644
--- a/034-animated countdown/script.js	
+++ b/034-animated countdown/script.js	
@@ -1,7 +1,13 @@
-const nums = document.querySelectorAll(".nums span");
+const numsContainer = document.querySelector(".nums");
+const countdownStart = 5;
+let nums = "";
 const counter = document.querySelector(".counter");
 const finalMessage = document.querySelector(".final");
 const replay = document.querySelector("#replay");
+const tickSound = document.querySelector("#tickSound");
+const goSound = document.querySelector("#goSound");
+const startOverlay = document.getElementById("startOverlay");
+const start = document.querySelector("#start");
 
 const resetDOM = () => {
   counter.classList.remove("hide");
@@ -10,6 +16,20 @@ const resetDOM = () => {
   nums[0].classList.add("in");
 };
 
+// Make the Countdown Configurable
+const setupCountdown = (startNumber) => {
+  numsContainer.innerHTML = "";
+  for (let i = startNumber; i >= 0; i--) {
+    const span = document.createElement("span");
+    span.textContent = i;
+    if (i === startNumber) {
+      span.classList.add("in");
+    }
+    numsContainer.appendChild(span);
+  }
+  nums = numsContainer.querySelectorAll("span");
+};
+
 const runAnimation = () => {
   nums.forEach((num, index) => {
     const nextToLast = nums.length - 1;
@@ -17,17 +37,33 @@ const runAnimation = () => {
       if (e.animationName === "goIn" && index !== nextToLast) {
         num.classList.remove("in");
         num.classList.add("out");
+        // Add Sound Effects
+        tickSound.currentTime = 0;
+        tickSound.play();
       } else if (e.animationName === "goOut" && num.nextElementSibling) {
         num.nextElementSibling.classList.add("in");
-      } else {
+      } else if (index === nextToLast) {
         counter.classList.add("hide");
         finalMessage.classList.add("show");
+        tickSound.pause();
+        goSound.currentTime = 0;
+        goSound.play();
       }
     });
   });
 };
 
-runAnimation();
+// setupCountdown(countdownStart);
+// runAnimation();
+
+// Add a Start Overlay
+const startCountdown = () => {
+  startOverlay.style.display = "none";
+  setupCountdown(countdownStart);
+  runAnimation();
+};
+
+start.addEventListener("click", startCountdown);
 
 replay.addEventListener("click", () => {
   resetDOM();
diff --git a/034-animated countdown/sounds/go.mp3 b/034-animated countdown/sounds/go.mp3
new file mode 100644
index 0000000..52a6a40
Binary files /dev/null and b/034-animated countdown/sounds/go.mp3 differ
diff --git a/034-animated countdown/sounds/tick.mp3 b/034-animated countdown/sounds/tick.mp3
new file mode 100644
index 0000000..8e998a4
Binary files /dev/null and b/034-animated countdown/sounds/tick.mp3 differ
diff --git a/034-animated countdown/style.css b/034-animated countdown/style.css
index 5ec6931..d8f6c8a 100644
--- a/034-animated countdown/style.css	
+++ b/034-animated countdown/style.css	
@@ -83,11 +83,12 @@ h4 {
 
 .nums span.in {
   transform: translate(-50%, -50%) rotate(0deg);
-  animation: goIn 0.5s ease-in-out;
+  /* Adjust Animation Timing */
+  animation: goIn 0.35s ease-in-out;
 }
 
 .nums span.out {
-  animation: goOut 0.5s ease-in-out;
+  animation: goOut 0.35s ease-in-out;
 }
 
 @keyframes goIn {
@@ -117,7 +118,8 @@ h4 {
   }
 }
 
-#replay {
+#replay,
+#start {
   background-color: #3498db;
   text-transform: uppercase;
   color: #fff;
@@ -128,3 +130,15 @@ h4 {
   padding: 0.5rem;
   cursor: pointer;
 }
+
+/* Add a Start Overlay */
+
+#startOverlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  z-index: 1;
+}
diff --git a/035-image carousel/script.js b/035-image carousel/script.js
index 9f57acf..ec68b6d 100644
--- a/035-image carousel/script.js	
+++ b/035-image carousel/script.js	
@@ -2,13 +2,31 @@ const images = document.getElementById("images");
 const leftButton = document.getElementById("left");
 const rightButton = document.getElementById("right");
 
-const imagesList = document.querySelectorAll("#images img");
-let index = 0;
+// Implement Infinite Loop with Cloning
+let imagesList = document.querySelectorAll("#images img");
 
-const changeImage = () => {
-  if (index > imagesList.length - 1) index = 0;
-  else if (index < 0) index = imagesList.length - 1;
-  images.style.transform = `translateX(${-index * 500}px)`;
+const firstClone = imagesList[0].cloneNode(true);
+const lastClone = imagesList[imagesList.length - 1].cloneNode(true);
+firstClone.id = "first-clone";
+lastClone.id = "last-clone";
+images.appendChild(firstClone);
+images.insertBefore(lastClone, imagesList[0]);
+
+imagesList = document.querySelectorAll("#images img");
+
+let index = 1;
+
+const setTransition = (enable) => {
+  images.style.transition = enable ? "transform 0.5s ease-in-out" : "none";
+};
+
+const changeImage = (withTransition = true) => {
+  // if (index > imagesList.length - 1) index = 0;
+  // else if (index < 0) index = imagesList.length - 1;
+  setTransition(withTransition);
+  // Refactor Image Sizing
+  const imageWidth = imagesList[0].offsetWidth;
+  images.style.transform = `translateX(${-index * imageWidth}px)`;
 };
 
 const run = () => {
@@ -16,13 +34,15 @@ const run = () => {
   changeImage();
 };
 
+// Adjust Automatic Slide Interval
+const duration = 1500;
+let interval = setInterval(run, duration);
+
 const resetInterval = () => {
   clearInterval(interval);
-  interval = setInterval(run, 2000);
+  interval = setInterval(run, duration);
 };
 
-let interval = setInterval(run, 2000);
-
 rightButton.addEventListener("click", () => {
   index++;
   changeImage();
@@ -34,3 +54,31 @@ leftButton.addEventListener("click", () => {
   changeImage();
   resetInterval();
 });
+
+// Make the Carousel Responsive
+window.addEventListener("resize", () => {
+  changeImage(false);
+});
+
+// Fix Carousel Sync When Switching Tabs
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "hidden") {
+    clearInterval(interval);
+  } else if (document.visibilityState === "visible") {
+    resetInterval();
+    changeImage(false);
+  }
+});
+
+images.addEventListener("transitionend", () => {
+  if (imagesList[index].id === "first-clone") {
+    index = 1;
+    changeImage(false);
+  }
+  if (imagesList[index].id === "last-clone") {
+    index = imagesList.length - 2;
+    changeImage(false);
+  }
+});
+
+changeImage(false);
diff --git a/035-image carousel/style.css b/035-image carousel/style.css
index 710e2a9..dbce030 100644
--- a/035-image carousel/style.css	
+++ b/035-image carousel/style.css	
@@ -14,7 +14,8 @@ body {
 }
 
 img {
-  width: 500px;
+  /* Refactor Image Sizing */
+  width: 100%;
   height: 500px;
   object-fit: cover;
 }
@@ -22,7 +23,9 @@ img {
 .carousel {
   box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
   height: 530px;
-  width: 500px;
+  /* Make the Carousel Responsive */
+  width: 90vw;
+  max-width: 500px;
   overflow: hidden;
 }
 
diff --git a/036-hoverboard/script.js b/036-hoverboard/script.js
index 77987d1..484907f 100644
--- a/036-hoverboard/script.js
+++ b/036-hoverboard/script.js
@@ -1,6 +1,8 @@
 const container = document.getElementById("container");
-const colors = ["#056CF2", "#05AFF2", "#F2E205", "#F28705", "#A62103"];
-const SQUARES = 500;
+// Customize the Color Palette
+const colors = ["#D63BD9", "#7B6CD9", "#363159", "#05AFF2", "#05C7F2"];
+// Adjust the Board Size
+const SQUARES = 800;
 
 const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];
 
@@ -11,14 +13,28 @@ const setColor = (square) => {
 };
 
 const removeColor = (square) => {
-  square.style.background = "#1d1d1d";
-  square.style.boxShadow = "0 0 2px #000";
+  // Refactor with CSS Variables
+  square.style.background = "";
+  square.style.boxShadow = "";
 };
 
 for (let i = 0; i < SQUARES; i++) {
   const square = document.createElement("div");
   square.classList.add("square");
-  square.addEventListener("mouseover", () => setColor(square));
-  square.addEventListener("mouseout", () => removeColor(square));
+  // square.addEventListener("mouseover", () => setColor(square));
+  // square.addEventListener("mouseout", () => removeColor(square));
   container.appendChild(square);
 }
+
+// Optimize with Event Delegation
+container.addEventListener("mouseover", (event) => {
+  if (event.target.classList.contains("square")) {
+    setColor(event.target);
+  }
+});
+
+container.addEventListener("mouseout", (event) => {
+  if (event.target.classList.contains("square")) {
+    removeColor(event.target);
+  }
+});
diff --git a/036-hoverboard/style.css b/036-hoverboard/style.css
index 1283d2e..622e081 100644
--- a/036-hoverboard/style.css
+++ b/036-hoverboard/style.css
@@ -1,3 +1,8 @@
+:root {
+  --default-bg: #1d1d1d;
+  --default-shadow: #000;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -17,12 +22,14 @@ body {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 400px;
+  /* Adjust the Board Size */
+  max-width: 640px;
 }
 
 .square {
-  background-color: #1d1d1d;
-  box-shadow: 0 0 2px #000;
+  /* Refactor with CSS Variables */
+  background-color: var(--default-bg);
+  box-shadow: 0 0 2px var(--default-shadow);
   height: 16px;
   width: 16px;
   margin: 2px;
diff --git a/037-pokedex/script.js b/037-pokedex/script.js
index eebc611..fa2e2b6 100644
--- a/037-pokedex/script.js
+++ b/037-pokedex/script.js
@@ -1,5 +1,6 @@
 const pokeContainer = document.getElementById("poke-container");
-const pokemonCount = 150;
+// Change the Number of Pokémon Fetched
+const pokemonCount = 251;
 const colors = {
   fire: "#FDDFDF",
   grass: "#DEFDE0",
@@ -15,6 +16,12 @@ const colors = {
   flying: "#F5F5F5",
   fighting: "#E6E0D4",
   normal: "#F5F5F5",
+  // Add More Type Colors
+  ice: "#98d8d8",
+  ghost: "#705898",
+  dark: "#705848",
+  steel: "#b7b7ce",
+  stellar: "#89cff8ff",
 };
 const mainTypes = Object.keys(colors);
 
@@ -27,34 +34,47 @@ const createPokemonCard = (pokemon) => {
   const type = mainTypes.find((type) => pokeTypes.indexOf(type) > -1);
   const color = colors[type];
   pokemonElement.style.backgroundColor = color;
+  // Display All Pokémon Types
   const pokemonInnerHTML = `
     <div class="img-container">
         <img
-            src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png"
+            src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${
+              pokemon.id
+            }.png"
             alt=""
         />
     </div>
     <div class="info">
         <span class="number">#${id}</span>
         <h3 class="name">${name}</h3>
-        <small class="type">Type: <span>${type}</span></small>
+        <small class="type">Type: ${pokeTypes
+          .map((type) => `<span>${type}</span>`)
+          .join("/")}</small>
     </div>
     `;
   pokemonElement.innerHTML = pokemonInnerHTML;
   pokeContainer.appendChild(pokemonElement);
 };
 
-const getPokemon = async (id) => {
+const getPokemon = (id) => {
   const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
-  const res = await fetch(url);
-  const data = await res.json();
-  createPokemonCard(data);
+  // const res = await fetch(url);
+  // const data = await res.json();
+  // createPokemonCard(data);
+  return fetch(url).then((res) => res.json());
 };
 
 const fetchPokemons = async () => {
+  // for (let i = 1; i < pokemonCount; i++) {
+  //   await getPokemon(i);
+  // }
+  // Improve Performance with Parallel Requests
+  const promises = [];
   for (let i = 1; i < pokemonCount; i++) {
-    await getPokemon(i);
+    promises.push(getPokemon(i));
   }
+  const pokemons = await Promise.all(promises);
+  pokemons.forEach((pokemon) => createPokemonCard(pokemon));
 };
 
 fetchPokemons();
diff --git a/038-mobile tab navigation/index.html b/038-mobile tab navigation/index.html
index 00bb528..3688603 100644
--- a/038-mobile tab navigation/index.html	
+++ b/038-mobile tab navigation/index.html	
@@ -18,37 +18,42 @@
         src="https://images.unsplash.com/photo-1610652492500-ded49ceeb378?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
         alt="home"
         class="content show"
+        id="home"
       />
       <img
         src="https://images.unsplash.com/photo-1611038917003-9227e16e0d9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
         alt="work"
         class="content"
+        id="work"
       />
       <img
         src="https://images.unsplash.com/photo-1611038916975-f6b3ded00212?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=554&q=80"
         alt="blog"
         class="content"
+        id="blog"
       />
       <img
         src="https://images.unsplash.com/photo-1611038917094-02aea0f65649?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
         alt="about"
         class="content"
+        id="about"
       />
       <nav>
         <ul>
-          <li class="active">
+          <!-- Use Data Attributes for Content Linking -->
+          <li class="active" data-content="home">
             <i class="fas fa-home"></i>
             <p>Home</p>
           </li>
-          <li>
+          <li data-content="work">
             <i class="fas fa-box"></i>
             <p>Work</p>
           </li>
-          <li>
+          <li data-content="blog">
             <i class="fas fa-book-open"></i>
             <p>Blog</p>
           </li>
-          <li>
+          <li data-content="about">
             <i class="fas fa-users"></i>
             <p>About Us</p>
           </li>
diff --git a/038-mobile tab navigation/script.js b/038-mobile tab navigation/script.js
index 09ef1b7..fb38698 100644
--- a/038-mobile tab navigation/script.js	
+++ b/038-mobile tab navigation/script.js	
@@ -1,18 +1,44 @@
 const contents = document.querySelectorAll(".content");
 const listItems = document.querySelectorAll("nav ul li");
 
-const hideAllContents = () => {
-  contents.forEach((content) => content.classList.remove("show"));
-};
-const hideAllItems = () => {
-  listItems.forEach((item) => item.classList.remove("active"));
+// const hideAllContents = () => {
+//   contents.forEach((content) => content.classList.remove("show"));
+// };
+// const hideAllItems = () => {
+//   listItems.forEach((item) => item.classList.remove("active"));
+// };
+
+// Refactor the Helper Functions
+const removeClassFromAll = (list, className) => {
+  list.forEach((item) => item.classList.remove(className));
 };
 
-listItems.forEach((item, index) => {
+listItems.forEach((item) => {
   item.addEventListener("click", () => {
-    hideAllContents();
-    hideAllItems();
+    // hideAllContents();
+    // hideAllItems();
+    removeClassFromAll(contents, "show");
+    removeClassFromAll(listItems, "active");
     item.classList.add("active");
-    contents[index].classList.add("show");
+    // contents[index].classList.add("show");
+    // Use Data Attributes for Content Linking
+    const contentId = item.getAttribute("data-content");
+    document.getElementById(contentId).classList.add("show");
   });
 });
+
+// Add Keyboard Navigation
+document.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+    const activeItem = document.querySelector("nav ul li.active");
+    let nextItem;
+
+    if (event.key === "ArrowRight") {
+      nextItem = activeItem.nextElementSibling || listItems[0];
+    } else {
+      nextItem =
+        activeItem.previousElementSibling || listItems[listItems.length - 1];
+    }
+    nextItem.click();
+  }
+});
diff --git a/038-mobile tab navigation/style.css b/038-mobile tab navigation/style.css
index c45b13f..e9d1c16 100644
--- a/038-mobile tab navigation/style.css	
+++ b/038-mobile tab navigation/style.css	
@@ -31,7 +31,7 @@ body {
   left: 0;
   height: calc(100% - 60px);
   width: 100%;
-  transition: opacity 0.4s ease;
+  transition: opacity 0.3s ease;
 }
 
 .phone .content.show {
@@ -70,5 +70,6 @@ nav ul li p {
 
 nav ul li:hover,
 nav ul li.active {
-  color: #222457;
+  /* Change the Active Icon Color */
+  color: #f72585;
 }
diff --git a/039-password strength background/index.html b/039-password strength background/index.html
index 0af1d31..dad447f 100644
--- a/039-password strength background/index.html	
+++ b/039-password strength background/index.html	
@@ -39,9 +39,10 @@ <h1 class="text-3xl">Image Password Strength</h1>
           placeholder="Enter Password"
         />
       </div>
+      <!-- Customize the Button with Tailwind -->
       <button
         type="submit"
-        class="bg-black text-white py-2 mt-4 inline-block w-full rounded"
+        class="bg-purple-700 text-white py-2 mt-4 inline-block w-full rounded"
       >
         Submit
       </button>
diff --git a/039-password strength background/script.js b/039-password strength background/script.js
index 154a586..65e92da 100644
--- a/039-password strength background/script.js	
+++ b/039-password strength background/script.js	
@@ -1,9 +1,19 @@
 const password = document.getElementById("password");
 const background = document.getElementById("background");
+// Optimize Performance with Throttling
+let isThrottled = false;
 
 password.addEventListener("input", (e) => {
+  if (isThrottled) return;
+  isThrottled = true;
   const input = e.target.value;
   const length = input.length;
-  const blurValue = 20 - length * 2;
-  background.style.filter = `blur(${blurValue}px)`;
+  // Adjust the Blurring Effect
+  const blurValue = 20 - length * 1;
+  // background.style.filter = `blur(${blurValue}px)`;
+  // Use a CSS Variable for the Blur Value
+  background.style.setProperty("--blur-amount", `${blurValue}px`);
+  setTimeout(() => {
+    isThrottled = false;
+  }, 100);
 });
diff --git a/039-password strength background/style.css b/039-password strength background/style.css
index e77a4db..a56305a 100644
--- a/039-password strength background/style.css	
+++ b/039-password strength background/style.css	
@@ -12,8 +12,9 @@ body {
   margin: 0;
 }
 
+/* Change the Background Image */
 .background {
-  background: url("https://images.unsplash.com/photo-1556745757-8d76bdb6984b")
+  background: url("https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe")
     no-repeat center center/cover;
   position: absolute;
   top: -20px;
@@ -21,5 +22,6 @@ body {
   left: -20px;
   right: -20px;
   z-index: -1;
-  filter: blur(20px);
+  /* Use a CSS Variable for the Blur Value */
+  filter: blur(var(--blur-amount, 20px));
 }
diff --git a/040-3d boxes background/script.js b/040-3d boxes background/script.js
index 5506343..8cbf5d4 100644
--- a/040-3d boxes background/script.js	
+++ b/040-3d boxes background/script.js	
@@ -1,12 +1,22 @@
 const boxesContainer = document.getElementById("boxes");
 const button = document.getElementById("btn");
+// Make the Grid Size Configurable
+// Refactor with CSS Variables
+const containerStyles = getComputedStyle(document.documentElement);
+const containerSize = parseInt(
+  containerStyles.getPropertyValue("--container-size")
+);
+const gridSize = parseInt(containerStyles.getPropertyValue("--grid-size"));
+const boxSize = containerSize / gridSize;
 
 const createBoxes = () => {
-  for (let i = 0; i < 4; i++) {
-    for (let j = 0; j < 4; j++) {
+  for (let i = 0; i < gridSize; i++) {
+    for (let j = 0; j < gridSize; j++) {
       const box = document.createElement("div");
       box.classList.add("box");
-      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
+      box.style.width = `${boxSize}px`;
+      box.style.height = `${boxSize}px`;
+      box.style.backgroundPosition = `${-j * boxSize}px ${-i * boxSize}px`;
       boxesContainer.appendChild(box);
     }
   }
diff --git a/040-3d boxes background/style.css b/040-3d boxes background/style.css
index 3551eed..5da721e 100644
--- a/040-3d boxes background/style.css	
+++ b/040-3d boxes background/style.css	
@@ -1,5 +1,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
 
+/* Refactor with CSS Variables */
+:root {
+  --container-size: 500px;
+  --grid-size: 4;
+  --box-size: calc(var(--container-size) / var(--grid-size));
+}
+
 * {
   box-sizing: border-box;
 }
@@ -16,7 +23,7 @@ body {
 }
 
 .magic {
-  background-color: #f9ca24;
+  background-color: #192027;
   color: #fff;
   font-family: "Poppins", sans-serif;
   border: 0;
@@ -28,7 +35,7 @@ body {
   top: 20px;
   right: 20px;
   letter-spacing: 1px;
-  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
+  box-shadow: 0 3px rgba(25, 32, 39, 0.5);
   z-index: 100;
 }
 
@@ -45,15 +52,15 @@ body {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  height: 500px;
-  width: 500px;
+  height: var(--container-size);
+  width: var(--container-size);
   position: relative;
   transition: 0.4s ease;
 }
 
 .boxes.big {
-  height: 600px;
-  width: 600px;
+  height: calc(var(--container-size) * 1.2);
+  width: calc(var(--container-size) * 1.2);
 }
 
 .boxes.big .box {
@@ -61,18 +68,20 @@ body {
 }
 
 .box {
-  background-image: url("https://media.giphy.com/media/xYXr3haK7jQN3uGuv7/giphy.gif");
+  /* Change the Magic Image */
+  background-image: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3VpdnR1YTVwNGR1Z2loMmM0Y2swcnpxaWxycDFoaWVvaGEyaGwzbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/HF481pmr9qJJLDA5qS/giphy.gif");
   background-repeat: no-repeat;
-  background-size: 500px 500px;
+  background-size: var(--container-size) var(--container-size);
   position: relative;
-  height: 125px;
-  width: 125px;
+  height: var(--box-size);
+  width: var(--box-size);
   transition: 0.4s ease;
 }
 
+/* Adjust the 3D Effect Colors */
 .box::after {
   content: "";
-  background-color: #f6e58d;
+  background-color: #3b302a;
   position: absolute;
   top: 8px;
   right: -15px;
@@ -83,7 +92,7 @@ body {
 
 .box::before {
   content: "";
-  background-color: #f9ca24;
+  background-color: #192027;
   position: absolute;
   left: 8px;
   bottom: -15px;
diff --git a/041-verify account UI/index.html b/041-verify account UI/index.html
index b52c626..c8ffcd7 100644
--- a/041-verify account UI/index.html	
+++ b/041-verify account UI/index.html	
@@ -8,58 +8,71 @@
   </head>
   <body>
     <div class="container">
-      <h2>Verify Your Account</h2>
+      <h2 id="title">Verify Your Account</h2>
       <p>
         We emailed you the six digit code to cool_guy@email.com <br />
         Enter the code below to confirm your email address.
       </p>
       <div class="code-container">
+        <!-- Improve Mobile Keyboard Experience -->
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
         <input
-          type="number"
+          input
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="1"
           class="code"
           placeholder="0"
-          min="0"
-          max="9"
           required
         />
       </div>
diff --git a/041-verify account UI/script.js b/041-verify account UI/script.js
index 0ed3eb3..13ffddb 100644
--- a/041-verify account UI/script.js	
+++ b/041-verify account UI/script.js	
@@ -1,18 +1,50 @@
 const codes = document.querySelectorAll(".code");
+const title = document.getElementById("title");
 
 codes[0].focus();
 
+// Auto-Submit on Completion
+const verifyAccount = () => {
+  codes.forEach((input) => (input.disabled = true));
+  title.textContent = "Verifying...";
+  setTimeout(() => {
+    title.textContent = "Account Verified!";
+  }, 1000);
+};
+
+// Handle Pasted Codes
+codes[0].addEventListener("paste", (e) => {
+  e.preventDefault();
+  const pasteData = e.clipboardData.getData("text");
+  codes.forEach((code, index) => {
+    if (pasteData[index]) {
+      code.value = pasteData[index];
+    }
+  });
+  setTimeout(() => {
+    [...codes].every((code) => code.value)
+      ? verifyAccount()
+      : codes[codes.length - 1].focus();
+  }, 10);
+});
+
 codes.forEach((code, index) => {
   code.addEventListener("keydown", (e) => {
-    if (e.key >= 0 && e.key < 9) {
+    if (e.key >= 0 && e.key <= 9) {
       codes[index].value = "";
       setTimeout(() => {
-        codes[index + 1].focus();
+        index === codes.length - 1 ? verifyAccount() : codes[index + 1].focus();
       }, 10);
     } else if (e.key === "Backspace") {
       setTimeout(() => {
-        codes[index - 1].focus();
+        codes[index - 1]?.focus();
       }, 10);
+      // Add Visual Feedback for Invalid Input
+    } else {
+      e.target.classList.add("shake");
+      setTimeout(() => {
+        e.target.classList.remove("shake");
+      }, 500);
     }
   });
 });
diff --git a/041-verify account UI/style.css b/041-verify account UI/style.css
index f3f8cb4..0b77258 100644
--- a/041-verify account UI/style.css	
+++ b/041-verify account UI/style.css	
@@ -54,6 +54,34 @@ body {
   box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
 }
 
+/* Add Visual Feedback for Invalid Input */
+.code.shake {
+  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translateX(-2px);
+  }
+  20%,
+  80% {
+    transform: translateX(4px);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translateX(-8px);
+  }
+  40%,
+  60% {
+    transform: translateX(8px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 .info {
   background-color: #eaeaea;
   display: inline-block;
diff --git a/042-live user filter/script.js b/042-live user filter/script.js
index ff5d3ad..0567063 100644
--- a/042-live user filter/script.js	
+++ b/042-live user filter/script.js	
@@ -3,19 +3,60 @@ const filter = document.getElementById("filter");
 const listItems = [];
 
 const filterData = (searchTerm) => {
+  // Show a "No Results" Message
+  let visibleCount = 0;
+  const existingMsg = document.getElementById("not-found");
+  if (existingMsg) {
+    existingMsg.remove();
+  }
+
+  // Highlight the Matched Text
+  const searchTermLower = searchTerm.toLowerCase();
+  const regex = new RegExp(searchTerm, "gi");
+
   listItems.forEach((item) => {
-    if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
+    const userInfoDiv = item.querySelector(".user-info");
+    const h4 = userInfoDiv.querySelector("h4");
+    const p = userInfoDiv.querySelector("p");
+
+    const name = h4.textContent;
+    const location = p.textContent;
+
+    if (
+      searchTerm === "" ||
+      `${name} ${location}`.toLowerCase().includes(searchTermLower)
+    ) {
       item.classList.remove("hide");
+      visibleCount++;
+      h4.innerHTML = name.replace(
+        regex,
+        (match) => `<span class="highlight">${match}</span>`
+      );
+      p.innerHTML = location.replace(
+        regex,
+        (match) => `<span class="highlight">${match}</span>`
+      );
     } else {
       item.classList.add("hide");
     }
   });
+
+  if (visibleCount === 0) {
+    const li = document.createElement("li");
+    li.id = "not-found";
+    li.textContent = "No users found.";
+    result.appendChild(li);
+  }
 };
 
 const getData = async () => {
   const res = await fetch("https://randomuser.me/api?results=50");
   const { results } = await res.json();
   result.innerHTML = "";
+  // Sort the Results
+  results.sort((a, b) => {
+    return a.name.first.localeCompare(b.name.first);
+  });
   results.forEach((user) => {
     const li = document.createElement("li");
     listItems.push(li);
@@ -35,4 +76,12 @@ const getData = async () => {
 
 getData();
 
-filter.addEventListener("input", (e) => filterData(e.target.value));
+// Debounce the Search Input
+let debounceTimer;
+
+filter.addEventListener("input", (e) => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    filterData(e.target.value);
+  }, 300);
+});
diff --git a/042-live user filter/style.css b/042-live user filter/style.css
index 44d54ac..b7d9187 100644
--- a/042-live user filter/style.css	
+++ b/042-live user filter/style.css	
@@ -92,3 +92,8 @@ body {
 .user-list li.hide {
   display: none;
 }
+
+/* Highlight the Matched Text */
+.user-list li span.highlight {
+  background-color: yellow;
+}
diff --git a/043-feedback UI design/script.js b/043-feedback UI design/script.js
index 590a4bd..be29d3d 100644
--- a/043-feedback UI design/script.js	
+++ b/043-feedback UI design/script.js	
@@ -1,4 +1,4 @@
-const ratings = document.querySelectorAll(".rating");
+let ratings = document.querySelectorAll(".rating");
 const ratingsContainer = document.querySelector(".ratings-container");
 const sendButton = document.getElementById("send");
 const panel = document.getElementById("panel");
@@ -10,20 +10,72 @@ const removeActive = () => {
   }
 };
 
-ratingsContainer.addEventListener("click", (e) => {
-  if (e.target.parentNode.classList.contains("rating")) {
-    removeActive();
-    e.target.parentNode.classList.add("active");
-    selectedRating = e.target.nextElementSibling.innerHTML;
-  }
-});
+const setActive = (rating) => {
+  removeActive();
+  rating.classList.add("active");
+  selectedRating = rating.querySelector("small").innerHTML;
+};
 
-sendButton.addEventListener("click", (e) => {
-  panel.innerHTML = `
+// Make the Entire Rating Clickable
+// ratingsContainer.addEventListener("click", (e) => {
+//   const rating = e.target.closest(".rating");
+//   if (rating) {
+//     removeActive();
+//     rating.classList.add("active");
+//     selectedRating = rating.querySelector("small").innerHTML;
+//   }
+// });
+
+// sendButton.addEventListener("click", (e) => {
+//   panel.innerHTML = `
+//         <i class="fas fa-heart"></i>
+//         <strong>Thank You!</strong>
+//         <br>
+//         <strong>Feedback: ${selectedRating}</strong>
+//         <p>We'll use your feedback to improve our customer support</p>
+//     `;
+// });
+let initialPanelContent;
+// Refactor for Broader Event Delegation
+panel.addEventListener("click", (e) => {
+  if (e.target.id === "send") {
+    initialPanelContent = panel.innerHTML;
+    panel.innerHTML = `
         <i class="fas fa-heart"></i>
         <strong>Thank You!</strong>
         <br>
         <strong>Feedback: ${selectedRating}</strong>
         <p>We'll use your feedback to improve our customer support</p>
+        <button class="btn" id="reset">Send Another Response</button>
     `;
+  }
+  const rating = e.target.closest(".rating");
+  if (rating) {
+    setActive(rating);
+  }
+  // Enable Re-submission
+  if (e.target.id === "reset") {
+    panel.innerHTML = initialPanelContent;
+    ratings = panel.querySelectorAll(".rating");
+    const satisfied = Array.from(ratings).find(
+      (rating) => rating.querySelector("small").textContent === "Satisfied"
+    );
+    if (satisfied) setActive(satisfied);
+    selectedRating = "Satisfied";
+  }
+});
+
+// Add Keyboard Accessibility
+document.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+    const activeRating = document.querySelector(".rating.active");
+    let newRating;
+    if (e.key === "ArrowLeft") {
+      newRating =
+        activeRating.previousElementSibling || ratings[ratings.length - 1];
+    } else {
+      newRating = activeRating.nextElementSibling || ratings[0];
+    }
+    setActive(newRating);
+  }
 });
diff --git a/044-custom range slider/index.html b/044-custom range slider/index.html
index c09f087..6986eb1 100644
--- a/044-custom range slider/index.html	
+++ b/044-custom range slider/index.html	
@@ -12,6 +12,8 @@ <h2>Custom Range Slider</h2>
       <input type="range" name="range" id="range" min="0" max="100" />
       <label for="range">50</label>
     </div>
+    <!-- Add a "Reset to Default" Button -->
+    <button id="reset">Reset</button>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/044-custom range slider/script.js b/044-custom range slider/script.js
index 326b712..2d71be0 100644
--- a/044-custom range slider/script.js	
+++ b/044-custom range slider/script.js	
@@ -1,24 +1,41 @@
 const range = document.getElementById("range");
+const resetButton = document.getElementById("reset");
 
 // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
 const scale = (num, in_min, in_max, out_min, out_max) => {
   return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
 };
 
-range.addEventListener("input", (e) => {
-  const value = +e.target.value;
-  const label = e.target.nextElementSibling;
-  const rangeWidth = getComputedStyle(e.target).getPropertyValue("width");
+// Create the updateSlider function
+const updateSlider = (inputRange) => {
+  const value = +inputRange.value;
+  const label = inputRange.nextElementSibling;
+  const rangeWidth = getComputedStyle(inputRange).getPropertyValue("width");
   const labelWidth = getComputedStyle(label).getPropertyValue("width");
-  // remove px
   const numWidth = +rangeWidth.substring(0, rangeWidth.length - 2);
   const numLabelWidth = +labelWidth.substring(0, labelWidth.length - 2);
-  const max = +e.target.max;
-  const min = +e.target.min;
+  const max = +inputRange.max;
+  const min = +inputRange.min;
   const left =
     value * (numWidth / max) -
     numLabelWidth / 2 +
     scale(value, min, max, 10, -10);
   label.style.left = `${left}px`;
   label.innerHTML = value;
+  // Dynamically Update Track Color
+  const percent = ((value - min) / (max - min)) * 100;
+  // Make the Track Color Lighter as the Slider Fills
+  const lightness = 40 + percent * 0.4;
+  const color = `hsl(216, 40%, ${lightness}%)`;
+  inputRange.style.background = `linear-gradient(to right, ${color} ${percent}%, #d3d3d3 ${percent}%)`;
+};
+
+updateSlider(range);
+
+range.addEventListener("input", (e) => updateSlider(e.target));
+
+// Add a "Reset to Default" Button
+resetButton.addEventListener("click", () => {
+  range.value = 50;
+  updateSlider(range);
 });
diff --git a/044-custom range slider/style.css b/044-custom range slider/style.css
index d1bc2c9..a297f07 100644
--- a/044-custom range slider/style.css	
+++ b/044-custom range slider/style.css	
@@ -28,6 +28,7 @@ h2 {
 input[type="range"] {
   width: 300px;
   margin: 18px 0;
+  appearance: none;
   -webkit-appearance: none;
 }
 
@@ -47,9 +48,9 @@ input[type="range"] + label {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 
-/* Chrome & Safari */
+/* Chrome, Safari & Edge */
 input[type="range"]::-webkit-slider-runnable-track {
-  background: purple;
+  background: transparent;
   border-radius: 4px;
   width: 100%;
   height: 10px;
@@ -62,14 +63,14 @@ input[type="range"]::-webkit-slider-thumb {
   width: 24px;
   background: #fff;
   border-radius: 50%;
-  border: 1px solid purple;
+  border: 1px solid #a3b8d8;
   margin-top: -7px;
   cursor: pointer;
 }
 
 /* Firefox */
 input[type="range"]::-moz-range-track {
-  background: purple;
+  background: transparent;
   border-radius: 4px;
   width: 100%;
   height: 14px;
@@ -78,18 +79,19 @@ input[type="range"]::-moz-range-track {
 
 input[type="range"]::-moz-range-thumb {
   -webkit-appearance: none;
+  appearance: none;
   height: 24px;
   width: 24px;
   background: #fff;
   border-radius: 50%;
-  border: 1px solid purple;
+  border: 1px solid #a3b8d8;
   margin-top: -7px;
   cursor: pointer;
 }
 
 /* IE */
 input[type="range"]::-ms-track {
-  background: purple;
+  background: transparent;
   border-radius: 4px;
   width: 100%;
   height: 14px;
@@ -98,11 +100,25 @@ input[type="range"]::-ms-track {
 
 input[type="range"]::-ms-thumb {
   -webkit-appearance: none;
+  appearance: none;
   height: 24px;
   width: 24px;
   background: #fff;
   border-radius: 50%;
-  border: 1px solid purple;
+  border: 1px solid #a3b8d8;
   margin-top: -7px;
   cursor: pointer;
 }
+
+/* Add a "Reset to Default" Button */
+button#reset {
+  background-color: #274c77;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1rem;
+  margin-top: 20px;
+}
diff --git a/045-netflix mobile navigation/script.js b/045-netflix mobile navigation/script.js
index 0633dad..1ce4420 100644
--- a/045-netflix mobile navigation/script.js	
+++ b/045-netflix mobile navigation/script.js	
@@ -1,11 +1,32 @@
 const openButton = document.querySelector(".open-btn");
 const closeButton = document.querySelector(".close-btn");
 const navs = document.querySelectorAll(".nav");
+const navMenu = navs[0];
 
-openButton.addEventListener("click", () =>
-  navs.forEach((nav) => nav.classList.add("visible"))
-);
+const closeMenu = () => {
+  navs.forEach((nav) => nav.classList.remove("visible"));
+};
 
-closeButton.addEventListener("click", () =>
-  navs.forEach((nav) => nav.classList.remove("visible"))
-);
+const openMenu = () => {
+  navs.forEach((nav) => nav.classList.add("visible"));
+};
+
+openButton.addEventListener("click", openMenu);
+
+// Close Menu on Link Click
+closeButton.addEventListener("click", closeMenu);
+
+navMenu.addEventListener("click", (e) => {
+  if (e.target.tagName === "A") closeMenu();
+});
+
+// Close Menu by Clicking Outside
+document.body.addEventListener("click", (e) => {
+  if (!e.target.closest(".nav") && !e.target.closest(".open-btn")) closeMenu();
+});
+
+// Add Keyboard Accessibility
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && navMenu.classList.contains("visible")) closeMenu();
+  if (e.key === "Enter" && e.target.classList.contains("open-btn")) openMenu();
+});
diff --git a/045-netflix mobile navigation/style.css b/045-netflix mobile navigation/style.css
index 7a4df14..3b627eb 100644
--- a/045-netflix mobile navigation/style.css	
+++ b/045-netflix mobile navigation/style.css	
@@ -1,5 +1,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
 
+/* Refactor with CSS Variables */
+:root {
+  --transition-duration: 0.3s;
+  --stagger-delay: 0.2s;
+  --no-delay: 0s;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -52,21 +59,21 @@ body {
   width: 60%;
   max-width: 480px;
   min-width: 320px;
-  transition-delay: 0.4s;
+  transition-delay: calc(var(--stagger-delay) * 2);
 }
 
 .nav-black.visible {
-  transition-delay: 0s;
+  transition-delay: var(--no-delay);
 }
 
 .nav-red {
   background-color: rgb(229, 9, 20);
   width: 95%;
-  transition-delay: 0.2s;
+  transition-delay: var(--stagger-delay);
 }
 
 .nav-red.visible {
-  transition-delay: 0.2s;
+  transition-delay: var(--stagger-delay);
 }
 
 .nav-white {
@@ -74,11 +81,11 @@ body {
   width: 95%;
   padding: 40px;
   position: relative;
-  transition-delay: 0s;
+  transition-delay: var(--no-delay);
 }
 
 .nav-white.visible {
-  transition-delay: 0.4s;
+  transition-delay: var(--transition-duration);
 }
 
 .close-btn {
diff --git a/046-quiz app/script.js b/046-quiz app/script.js
index 2026648..735c8da 100644
--- a/046-quiz app/script.js	
+++ b/046-quiz app/script.js	
@@ -1,4 +1,4 @@
-const quizData = [
+let quizData = [
   {
     question: "Which language runs in a web browser?",
     a: "Java",
@@ -28,7 +28,7 @@ const quizData = [
     a: "1996",
     b: "1995",
     c: "1994",
-    d: "none of the above",
+    d: "no answer is correct",
     correct: "b",
   },
 ];
@@ -44,42 +44,102 @@ const submitButton = document.getElementById("submit");
 
 let currentQuiz = 0;
 let score = 0;
+let currentOptionOrder = [];
 
 const deselectAnswers = () => {
   answerElements.forEach((answer) => (answer.checked = false));
 };
 
+// Refactor getSelected() for Efficiency
 const getSelected = () => {
-  let answer;
-  answerElements.forEach((answerElement) => {
-    if (answerElement.checked) answer = answerElement.id;
-  });
-  return answer;
+  // let answer;
+  // answerElements.forEach((answerElement) => {
+  //   if (answerElement.checked) answer = answerElement.id;
+  // });
+  // const answersArray = Array.from(answerElements);
+  // const checkedAnswer = answersArray.find(
+  //   (answerElement) => answerElement.checked
+  // );
+  // return checkedAnswer ? checkedAnswer.id : undefined;
+  const selected = Array.from(answerElements).find(
+    (element) => element.checked
+  );
+  return selected ? selected.value : undefined;
 };
 
 const loadQuiz = () => {
   deselectAnswers();
   const currentQuizData = quizData[currentQuiz];
   questionElement.innerText = currentQuizData.question;
-  a_text.innerText = currentQuizData.a;
-  b_text.innerText = currentQuizData.b;
-  c_text.innerText = currentQuizData.c;
-  d_text.innerText = currentQuizData.d;
+
+  // Shuffle Answer Options
+  currentOptionOrder = shuffle(["a", "b", "c", "d"]);
+  [a_text, b_text, c_text, d_text].forEach((label, index) => {
+    const key = currentOptionOrder[index];
+    label.innerText = currentQuizData[key];
+    answerElements[index].value = key;
+  });
+};
+
+// Shuffle Question Order
+// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+const shuffle = (array) => {
+  let currentIndex = array.length;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+    // Pick a remaining element...
+    let randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+  return array;
 };
 
+quizData = shuffle(quizData);
+
 loadQuiz();
 
 submitButton.addEventListener("click", () => {
   const answer = getSelected();
   if (answer) {
-    if (answer === quizData[currentQuiz].correct) score++;
-    currentQuiz++;
-    if (currentQuiz < quizData.length) loadQuiz();
-    else {
-      quiz.innerHTML = `
+    // Provide Immediate Feedback
+    const correctAnswer = quizData[currentQuiz].correct;
+    const isCorrect = answer === correctAnswer;
+    if (isCorrect) score++;
+    // const correctElement = document.getElementById(correctAnswer);
+    // const answerElement = document.getElementById(answer);
+    const correctElement = Array.from(answerElements).find(
+      (element) => element.value === correctAnswer
+    );
+    const answerElement = Array.from(answerElements).find(
+      (element) => element.value === answer
+    );
+
+    correctElement.parentElement.classList.add("correct");
+    if (!isCorrect) answerElement.parentElement.classList.add("incorrect");
+
+    setTimeout(
+      () => {
+        correctElement.parentElement.classList.remove("correct");
+        if (!isCorrect)
+          answerElement.parentElement.classList.remove("incorrect");
+
+        currentQuiz++;
+        if (currentQuiz < quizData.length) loadQuiz();
+        else {
+          quiz.innerHTML = `
             <h2>You answered ${score}/${quizData.length} questions correctly</h2>
             <button onclick="history.go(0)">Play Again</button>
         `;
-    }
+        }
+      },
+      isCorrect ? 500 : 2000
+    );
   }
 });
diff --git a/046-quiz app/style.css b/046-quiz app/style.css
index 55cea5e..8060452 100644
--- a/046-quiz app/style.css	
+++ b/046-quiz app/style.css	
@@ -49,6 +49,19 @@ ul li label {
   cursor: pointer;
 }
 
+/* Provide Immediate Feedback */
+ul li.correct {
+  background-color: #b4ceb3;
+}
+
+ul li.incorrect {
+  background-color: #ef6461;
+}
+
+ul li.incorrect label {
+  text-decoration: line-through;
+}
+
 button {
   background-color: #8e44ad;
   color: #fff;
diff --git a/047-testimonial box switcher/index.html b/047-testimonial box switcher/index.html
index c4f6d74..f88b146 100644
--- a/047-testimonial box switcher/index.html	
+++ b/047-testimonial box switcher/index.html	
@@ -17,23 +17,13 @@
       <div class="progress-bar"></div>
       <div class="fas fa-quote-left fa-quote"></div>
       <div class="fas fa-quote-right fa-quote"></div>
-      <p class="testimonial">
-        I've worked with literally hundreds of HTML/CSS developers and I have to
-        say the top spot goes to this guy. This guy is an amazing developer. He
-        stresses on good, clean code and pays heed to the details. I love
-        developers who respect each and every aspect of a throughly thought out
-        design and do their best to put it in code. He goes over and beyond and
-        transforms ART into PIXELS - without a glitch, every time.
-      </p>
+      <!-- Make the First Testimonial Dynamic -->
+      <p class="testimonial"></p>
       <div class="user">
-        <img
-          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
-          alt="user"
-          class="user-image"
-        />
+        <img class="user-image" />
         <div class="user-details">
-          <h4 class="username">Miyah Myles</h4>
-          <p class="role">Marketing</p>
+          <h4 class="username"></h4>
+          <p class="role"></p>
         </div>
       </div>
     </div>
diff --git a/047-testimonial box switcher/script.js b/047-testimonial box switcher/script.js
index 666bd29..d382d71 100644
--- a/047-testimonial box switcher/script.js	
+++ b/047-testimonial box switcher/script.js	
@@ -1,8 +1,10 @@
 const testimonialsContainer = document.querySelector(".testimonials-container");
+const testimonialContainer = document.querySelector(".testimonial-container");
 const testimonial = document.querySelector(".testimonial");
 const userImage = document.querySelector(".user-image");
 const username = document.querySelector(".username");
 const role = document.querySelector(".role");
+const progressBar = document.querySelector(".progress-bar");
 
 const testimonials = [
   {
@@ -10,64 +12,96 @@ const testimonials = [
     position: "Marketing",
     photo:
       "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6",
-    text:
-      "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.",
+    text: "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.",
   },
   {
     name: "June Cha",
     position: "Software Engineer",
     photo: "https://randomuser.me/api/portraits/women/44.jpg",
-    text:
-      "This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!",
+    text: "This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!",
   },
   {
     name: "Iida Niskanen",
     position: "Data Entry",
     photo: "https://randomuser.me/api/portraits/women/68.jpg",
-    text:
-      "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.",
+    text: "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.",
   },
   {
     name: "Renee Sims",
     position: "Receptionist",
     photo: "https://randomuser.me/api/portraits/women/65.jpg",
-    text:
-      "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.",
+    text: "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.",
   },
   {
     name: "Jonathan Nunfiez",
     position: "Graphic Designer",
     photo: "https://randomuser.me/api/portraits/men/43.jpg",
-    text:
-      "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!",
+    text: "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!",
   },
   {
     name: "Sasha Ho",
     position: "Accountant",
     photo:
       "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb",
-    text:
-      "This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!",
+    text: "This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!",
   },
   {
     name: "Veeti Seppanen",
     position: "Director",
     photo: "https://randomuser.me/api/portraits/men/97.jpg",
-    text:
-      "This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.",
+    text: "This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.",
   },
 ];
 
-let index = 1;
+// Make the First Testimonial Dynamic
+let index = 0;
 
 const updateTestimonial = () => {
-  const { name, position, photo, text } = testimonials[index];
-  testimonial.innerHTML = text;
-  userImage.src = photo;
-  username.innerHTML = name;
-  role.innerHTML = position;
-  index++;
-  if (index > testimonials.length - 1) index = 0;
+  // Add Fade-In/Fade-Out Transitions
+  testimonialContainer.classList.toggle("show", false);
+  testimonialContainer.classList.toggle("hide", true);
+  setTimeout(() => {
+    const { name, position, photo, text } = testimonials[index];
+    testimonial.innerHTML = text;
+    userImage.src = photo;
+    username.innerHTML = name;
+    role.innerHTML = position;
+    index++;
+    if (index > testimonials.length - 1) index = 0;
+    testimonialContainer.classList.toggle("hide", false);
+    testimonialContainer.classList.toggle("show", true);
+  }, 300);
 };
 
-setInterval(updateTestimonial, 10000);
+// Pause on Hover
+// let interval = setInterval(updateTestimonial, 10000);
+
+// Sync Progress Bar with Testimonial Change
+let startTime = Date.now();
+let interval;
+let elapsedBeforePause = 0;
+
+const startTestimonialCycle = () => {
+  updateTestimonial();
+  progressBar.classList.remove("animate");
+  void progressBar.offsetWidth;
+  progressBar.classList.add("animate");
+  startTime = Date.now();
+  interval = setTimeout(startTestimonialCycle, 10000);
+};
+
+testimonialContainer.addEventListener("mouseenter", () => {
+  clearInterval(interval);
+  elapsedBeforePause = Date.now() - startTime;
+  progressBar.style.animationPlayState = "paused";
+});
+
+testimonialContainer.addEventListener("mouseleave", () => {
+  // setInterval(updateTestimonial, 10000);
+  const remainingTime = 10000 - elapsedBeforePause;
+  progressBar.style.animationPlayState = "running";
+  interval = setTimeout(startTestimonialCycle, remainingTime);
+  startTime = Date.now() - elapsedBeforePause;
+});
+
+startTestimonialCycle();
diff --git a/047-testimonial box switcher/style.css b/047-testimonial box switcher/style.css
index b611e51..7f24caf 100644
--- a/047-testimonial box switcher/style.css	
+++ b/047-testimonial box switcher/style.css	
@@ -25,6 +25,18 @@ body {
   padding: 50px 80px;
   max-width: 768px;
   position: relative;
+  /* Add Fade-In/Fade-Out Transitions */
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.testimonial-container.hide {
+  opacity: 0;
+  transform: scale(0.96) translateY(20px);
+}
+
+.testimonial-container.show {
+  opacity: 1;
+  transform: scale(1) translateY(0);
 }
 
 .fa-quote {
@@ -78,7 +90,13 @@ body {
   height: 4px;
   width: 100%;
   transform-origin: left;
-  animation: grow 10s linear infinite;
+  /* Pause on Hover */
+  /* animation: grow 10s linear infinite; */
+}
+
+/* Sync Progress Bar with Testimonial Change */
+.animate {
+  animation: grow 10s linear;
 }
 
 @keyframes grow {
diff --git a/048-random image generator/script.js b/048-random image generator/script.js
index 3062c32..aeeaeab 100644
--- a/048-random image generator/script.js	
+++ b/048-random image generator/script.js	
@@ -1,11 +1,58 @@
 const container = document.querySelector(".container");
-const randomfoxURL = "https://randomfox.ca/images/";
+// Use a Different Image API
+// const randomfoxURL = "https://randomfox.ca/images/";
+const picsumURL = "https://picsum.photos/300?random=";
 const rows = 5;
 
-const getRandomNumber = () => Math.floor(Math.random() * 123);
+// const getRandomNumber = () => Math.floor(Math.random() * 123);
 
-for (let i = 0; i < rows * 3; i++) {
-  const image = document.createElement("img");
-  image.src = `${randomfoxURL}${getRandomNumber()}.jpg`;
-  container.appendChild(image);
-}
+// Fix Duplicate Images
+// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+const shuffle = (array) => {
+  let currentIndex = array.length;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+    // Pick a remaining element...
+    let randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+  return array;
+};
+
+const numbers = [...Array(123).keys()].map((i) => i + 1);
+
+shuffle(numbers);
+
+let currentIndex = 0;
+
+const loadImages = () => {
+  for (let i = 0; i < rows * 3; i++) {
+    if (currentIndex >= numbers.length) return;
+    // Add Skeleton Loaders
+    const skeleton = document.createElement("div");
+    skeleton.className = "skeleton";
+    container.appendChild(skeleton);
+    const image = document.createElement("img");
+    image.src = `${picsumURL}${numbers[currentIndex]}.jpg`;
+    image.onload = () => skeleton.replaceWith(image);
+    image.onerror = () => skeleton.remove();
+    container.appendChild(image);
+    currentIndex++;
+  }
+};
+
+// Implement Infinite Scroll
+window.addEventListener("scroll", () => {
+  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
+    loadImages();
+  }
+});
+
+loadImages();
diff --git a/048-random image generator/style.css b/048-random image generator/style.css
index 7bb5110..56fb967 100644
--- a/048-random image generator/style.css	
+++ b/048-random image generator/style.css	
@@ -34,3 +34,23 @@ body {
   width: 300px;
   max-width: 100%;
 }
+
+/* Add Skeleton Loaders */
+.skeleton {
+  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.2s infinite linear;
+  width: 300px;
+  height: 300px;
+  margin: 10px;
+  border-radius: 8px;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/049-todo list/index.html b/049-todo list/index.html
index 15e571b..49d19ed 100644
--- a/049-todo list/index.html	
+++ b/049-todo list/index.html	
@@ -19,6 +19,8 @@ <h1>todos</h1>
 
       <ul class="todos" id="todos"></ul>
     </form>
+    <!-- Add a "Clear Completed" Button -->
+    <button id="clear-completed" type="button">Clear Completed</button>
     <small
       >Left click to toggle completed.<br />
       Right click to delete todo</small
diff --git a/049-todo list/script.js b/049-todo list/script.js
index b065147..5c05d74 100644
--- a/049-todo list/script.js	
+++ b/049-todo list/script.js	
@@ -1,49 +1,101 @@
 const form = document.getElementById("form");
 const input = document.getElementById("input");
 const todosList = document.getElementById("todos");
-const todos = JSON.parse(localStorage.getItem("todos"));
+const clearCompleted = document.getElementById("clear-completed");
+let todos = JSON.parse(localStorage.getItem("todos")) || [];
+let draggedIndex = null;
 
+// Refactor updateLocalStorage
 const updateLocalStorage = () => {
-  const todosElements = document.querySelectorAll("li");
-  const todos = [];
-  todosElements.forEach((todoElement) => {
-    todos.push({
-      text: todoElement.innerText,
-      completed: todoElement.classList.contains("completed"),
-    });
-  });
+  // const todosElements = document.querySelectorAll("li");
+  // const todos = [];
+  // todosElements.forEach((todoElement) => {
+  //   todos.push({
+  //     text: todoElement.innerText,
+  //     completed: todoElement.classList.contains("completed"),
+  //   });
+  // });
   localStorage.setItem("todos", JSON.stringify(todos));
 };
 
-const addTodo = (todo) => {
-  let todoText = input.value;
-  if (todo) todoText = todo.text;
-  if (todoText) {
+const renderTodos = () => {
+  todosList.innerHTML = "";
+  // Hide Button When Not Needed
+  let hasCompleted = false;
+  todos.forEach((todo, index) => {
     const todoElement = document.createElement("li");
-    if (todo && todo.completed) {
+    // Add Drag-and-Drop Reordering
+    todoElement.setAttribute("draggable", "true");
+    if (todo.completed) {
       todoElement.classList.add("completed");
+      hasCompleted = true;
     }
-    todoElement.innerText = todoText;
+    todoElement.innerText = todo.text;
     todoElement.addEventListener("click", () => {
-      todoElement.classList.toggle("completed");
+      todos[index].completed = !todos[index].completed;
       updateLocalStorage();
+      renderTodos();
     });
     todoElement.addEventListener("contextmenu", (e) => {
       e.preventDefault();
-      todoElement.remove();
+      todos.splice(index, 1);
+      updateLocalStorage();
+      renderTodos();
+    });
+    todoElement.addEventListener("dragstart", () => {
+      draggedIndex = index;
+    });
+    todoElement.addEventListener("dragover", (e) => {
+      e.preventDefault();
+    });
+    todoElement.addEventListener("drop", (e) => {
+      e.preventDefault();
+      if (draggedIndex === null || draggedIndex === index) return;
+      const draggedTodo = todos[draggedIndex];
+      todos.splice(draggedIndex, 1);
+      todos.splice(index, 0, draggedTodo);
       updateLocalStorage();
+      renderTodos();
     });
+
     todosList.appendChild(todoElement);
-    input.value = "";
+  });
+  clearCompleted.style.display = hasCompleted ? "block" : "none";
+  // clearCompleted.style.display = todos.some((todo) => todo.completed)
+  //   ? "block"
+  //   : "none";
+};
+
+const addTodo = (todo) => {
+  let todoText = input.value;
+  if (todo) todoText = todo.text;
+  // Prevent Empty Todos
+  if (todoText.trim()) {
+    const newTodo = {
+      text: todoText,
+      completed: todo && todo.completed ? true : false,
+    };
+    todos.push(newTodo);
     updateLocalStorage();
+    renderTodos();
+    input.value = "";
   }
 };
 
-if (todos) {
-  todos.forEach((todo) => addTodo(todo));
-}
+// if (todos) {
+//   todos.forEach((todo) => addTodo(todo));
+// }
 
 form.addEventListener("submit", (e) => {
   e.preventDefault();
   addTodo();
 });
+
+// Add a "Clear Completed" Button
+clearCompleted.addEventListener("click", () => {
+  todos = todos.filter((todo) => !todo.completed);
+  updateLocalStorage();
+  renderTodos();
+});
+
+renderTodos();
diff --git a/049-todo list/style.css b/049-todo list/style.css
index 178d32c..18c1e36 100644
--- a/049-todo list/style.css	
+++ b/049-todo list/style.css	
@@ -70,3 +70,27 @@ small {
   margin-top: 3rem;
   text-align: center;
 }
+
+/* Add a "Clear Completed" Button */
+button#clear-completed {
+  /* Hide Button When Not Needed */
+  display: none;
+  margin-top: 2rem;
+  padding: 0.75rem 2rem;
+  background: rgb(179, 131, 226);
+  color: #fff;
+  border: none;
+  border-radius: 2rem;
+  font-size: 1.2rem;
+  font-family: inherit;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(179, 131, 226, 0.15);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+
+button#clear-completed:hover,
+button#clear-completed:focus {
+  background: rgb(140, 90, 200);
+  box-shadow: 0 4px 12px rgba(179, 131, 226, 0.25);
+  outline: none;
+}
diff --git a/050-insect catch game/index.html b/050-insect catch game/index.html
index 05048fe..22918b3 100644
--- a/050-insect catch game/index.html	
+++ b/050-insect catch game/index.html	
@@ -60,6 +60,9 @@ <h5 id="message" class="message">
         You are playing an impossible game!!
       </h5>
     </div>
+    <!-- Add Sound Effects for Game Actions -->
+    <audio id="catch-sound" src="sounds/catch.mp3"></audio>
+    <audio id="gameover-sound" src="sounds/gameover.mp3"></audio>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/050-insect catch game/script.js b/050-insect catch game/script.js
index 9ff4eb2..0d151a3 100644
--- a/050-insect catch game/script.js	
+++ b/050-insect catch game/script.js	
@@ -5,9 +5,14 @@ const gameContainer = document.getElementById("game-container");
 const timeElement = document.getElementById("time");
 const scoreElement = document.getElementById("score");
 const message = document.getElementById("message");
+// Add Sound Effects for Game Actions
+const catchSound = document.getElementById("catch-sound");
+const gameOverSound = document.getElementById("gameover-sound");
+
 let seconds = 0;
 let score = 0;
 let selectedInsect = {};
+let gameInterval = null;
 
 startButton.addEventListener("click", () => screens[0].classList.add("up"));
 
@@ -15,18 +20,23 @@ const increaseScore = () => {
   score++;
   if (score > 19) message.classList.add("visible");
   scoreElement.innerHTML = `Score: ${score}`;
+  // Increase Game Difficulty Over Time
+  addInsects(score > 10 ? 2 : 1);
 };
 
-const addInsects = () => {
+const addInsects = (count = 1) => {
   setTimeout(createInsect, 1000);
-  setTimeout(createInsect, 1500);
+  if (count === 2) setTimeout(createInsect, 1500);
 };
 
 const catchInsect = function () {
   increaseScore();
+  catchSound.currentTime = 0;
+  catchSound.play();
   this.classList.add("caught");
-  setTimeout(() => this.remove, 2000);
-  addInsects();
+  // Fix the Insect Removal Bug
+  setTimeout(() => this.remove(), 2000);
+  // addInsects();
 };
 
 const getRandomLocation = () => {
@@ -57,9 +67,31 @@ const increaseTime = () => {
   s = s < 10 ? `0${s}` : s;
   timeElement.innerHTML = `Time: ${m}:${s}`;
   seconds++;
+  if (seconds > 30) {
+    clearInterval(gameInterval);
+    showGameOver();
+  }
+};
+
+// Add a Game Over State
+const showGameOver = () => {
+  gameOverSound.currentTime = 0;
+  gameOverSound.play();
+  message.innerHTML = `
+    <div>
+      <h2>Game Over!</h2>
+      <p>Your final score: <strong>${score}</strong></p>
+      <button id="play-again-btn" class="btn">Play Again</button>
+    </div>
+  `;
+  message.classList.add("visible");
+  document.querySelectorAll(".insect").forEach((insect) => insect.remove());
+  document.getElementById("play-again-btn").onclick = () => location.reload();
 };
 
-const startGame = () => setInterval(increaseTime, 1000);
+const startGame = () => {
+  gameInterval = setInterval(increaseTime, 1000);
+};
 
 chooseInsectButtons.forEach((button) => {
   button.addEventListener("click", () => {
diff --git a/050-insect catch game/sounds/catch.mp3 b/050-insect catch game/sounds/catch.mp3
new file mode 100644
index 0000000..997a12b
Binary files /dev/null and b/050-insect catch game/sounds/catch.mp3 differ
diff --git a/050-insect catch game/sounds/gameover.mp3 b/050-insect catch game/sounds/gameover.mp3
new file mode 100644
index 0000000..1fd5b58
Binary files /dev/null and b/050-insect catch game/sounds/gameover.mp3 differ
diff --git a/051-video background/index.html b/051-video background/index.html
index da4e500..6360506 100644
--- a/051-video background/index.html	
+++ b/051-video background/index.html	
@@ -16,11 +16,14 @@ <h2 class="logo">Travel</h2>
         <div class="toggle"></div>
       </header>
       <video
-        src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"
+        src="https://files.catbox.moe/65phni.mp4"
         muted
         loop
         autoplay
+        class="video"
       ></video>
+      <!-- Music: Adventure by Alexander Nakarada | https://creatorchords.com 
+      Attribution 4.0 International (CC BY 4.0) https://creativecommons.org/licenses/by/4.0/ -->
       <!-- Download Video Source and host the file on your own server -->
       <!-- For example: https://www.pexels.com/video/aerial-view-of-beautiful-resort-2169880/ -->
       <div class="overlay"></div>
@@ -33,50 +36,82 @@ <h3>Exploring The World</h3>
         </p>
         <a href="#">Explore</a>
       </div>
-      <ul class="social">
-        <li>
-          <a href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
-              />
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <!-- Integrate the New Feature with the Existing Design -->
+      <div class="bottom-bar">
+        <ul class="social">
+          <li>
+            <a href="#">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12.001 2.002c-5.522 0-9.999 4.477-9.999 9.999 0 4.99 3.656 9.126 8.437 9.879v-6.988h-2.54v-2.891h2.54V9.798c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.24.195 2.24.195v2.459h-1.264c-1.24 0-1.628.772-1.628 1.563v1.875h2.771l-.443 2.891h-2.328v6.988C18.344 21.129 22 16.992 22 12.001c0-5.522-4.477-9.999-9.999-9.999z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+        <!-- Add a Mute/Unmute Button for the Video -->
+        <button class="mute">
+          <svg
+            width="48"
+            height="43"
+            viewBox="0 0 48 43"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon-mute"
+          >
+            <path
+              d="M25.0917 2.92265C26.05 3.35937 26.6667 4.3168 26.6667 5.375V37.625C26.6667 38.6832 26.05 39.6406 25.0917 40.0773C24.1333 40.5141 23.0083 40.3377 22.225 39.6322L10.9833 29.5625H5.33333C2.39167 29.5625 0 27.1521 0 24.1875V18.8125C0 15.8479 2.39167 13.4375 5.33333 13.4375H10.9833L22.225 3.36777C23.0083 2.6623 24.1333 2.49433 25.0917 2.92265ZM35.4167 14.0254L40 18.6445L44.5833 14.0254C45.3667 13.2359 46.6333 13.2359 47.4083 14.0254C48.1833 14.8148 48.1917 16.0914 47.4083 16.8725L42.825 21.4916L47.4083 26.1107C48.1917 26.9002 48.1917 28.1768 47.4083 28.9578C46.625 29.7389 45.3583 29.7473 44.5833 28.9578L40 24.3387L35.4167 28.9578C34.6333 29.7473 33.3667 29.7473 32.5917 28.9578C31.8167 28.1684 31.8083 26.8918 32.5917 26.1107L37.175 21.4916L32.5917 16.8725C31.8083 16.083 31.8083 14.8064 32.5917 14.0254C33.375 13.2443 34.6417 13.2359 35.4167 14.0254Z"
+              fill="white"
+            />
+          </svg>
+          <svg
+            width="42"
+            height="48"
+            viewBox="0 0 42 48"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon-unmute"
+          >
+            <path
+              d="M28.2281 3.2625C29.3063 3.75 30 4.81875 30 6V42C30 43.1812 29.3063 44.25 28.2281 44.7375C27.15 45.225 25.8844 45.0281 25.0031 44.2406L12.3563 33H6C2.69063 33 0 30.3094 0 27V21C0 17.6906 2.69063 15 6 15H12.3563L25.0031 3.75937C25.8844 2.97187 27.15 2.78437 28.2281 3.2625ZM38.6813 17.0156C40.6969 18.6656 42 21.1781 42 24C42 26.8219 40.6969 29.3344 38.6813 30.9844C37.7156 31.7719 36.3 31.6219 35.5125 30.6562C34.725 29.6906 34.875 28.275 35.8406 27.4875C36.8531 26.6625 37.5 25.4062 37.5 24C37.5 22.5937 36.8531 21.3375 35.8406 20.5031C34.875 19.7156 34.7344 18.3 35.5125 17.3344C36.2906 16.3687 37.7156 16.2281 38.6813 17.0062V17.0156Z"
+              fill="white"
+            />
+          </svg>
+        </button>
+      </div>
     </section>
     <div class="menu">
       <ul>
diff --git a/051-video background/script.js b/051-video background/script.js
index d5e0466..34f5c01 100644
--- a/051-video background/script.js	
+++ b/051-video background/script.js	
@@ -1,7 +1,15 @@
 const menuToggle = document.querySelector(".toggle");
 const showcase = document.querySelector(".showcase");
+const video = document.querySelector(".video");
+const muteButton = document.querySelector(".mute");
 
 menuToggle.addEventListener("click", () => {
   menuToggle.classList.toggle("active");
   showcase.classList.toggle("active");
 });
+
+// Add a Mute/Unmute Button for the Video
+muteButton.addEventListener("click", () => {
+  video.muted = !video.muted;
+  muteButton.classList.toggle("muted");
+});
diff --git a/051-video background/style.css b/051-video background/style.css
index a9b54bd..48aabbe 100644
--- a/051-video background/style.css	
+++ b/051-video background/style.css	
@@ -25,7 +25,10 @@
   background: #111;
   color: #fff;
   transition: 0.5s;
-  z-index: 2;
+  /* Refactor the Z-Index Hierarchy */
+  z-index: 1;
+  /* Fix the Overlay Overflow Bug */
+  overflow: hidden;
 }
 
 .showcase.active {
@@ -38,7 +41,7 @@
   left: 0;
   width: 100%;
   padding: 40px 100px;
-  z-index: 1000;
+  z-index: 3;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -90,7 +93,7 @@
 
 .text {
   position: relative;
-  z-index: 10;
+  z-index: 2;
 }
 
 .text h2 {
@@ -131,10 +134,20 @@
   letter-spacing: 6px;
 }
 
-.social {
+/* Integrate the New Feature with the Existing Design */
+.bottom-bar {
   position: absolute;
   bottom: 20px;
-  z-index: 10;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 100px;
+  z-index: 2;
+}
+
+.social {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -152,7 +165,8 @@
   transition: 0.5s;
 }
 
-.social li a:hover {
+.social li a:hover,
+.mute:hover {
   transform: scale(0.5) translateY(-15px);
 }
 
@@ -182,12 +196,40 @@
   color: var(--overlay-color);
 }
 
+/* Add a Mute/Unmute Button for the Video */
+.mute {
+  background: transparent;
+  padding: 10px 20px;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.5);
+  transition: 0.5s;
+}
+
+.mute .icon-unmute {
+  display: none;
+}
+.mute.muted .icon-mute {
+  display: none;
+}
+.mute.muted .icon-unmute {
+  display: inline;
+}
+
 @media (max-width: 800px) {
   .showcase,
   .showcase header {
     padding: 40px;
   }
 
+  .bottom-bar {
+    padding: 0 40px;
+  }
+
   .text h2 {
     font-size: 3em;
   }
diff --git a/052-portfolio grid/style.css b/052-portfolio grid/style.css
index 595b86d..a1bc220 100644
--- a/052-portfolio grid/style.css	
+++ b/052-portfolio grid/style.css	
@@ -4,6 +4,27 @@
 :root {
   --primary: #22d0ff;
   --secondary: #0a0b5b;
+  /* Refactor with CSS Variables */
+  --text-color: #9893d8;
+  --title-color: #dddbff;
+  --contact-bg: #080936;
+  --footer-bg: #14153d;
+  --skills-bg: rgba(0, 0, 0, 0.2);
+  --button-hover-text-color: #222;
+}
+
+/* Support Light and Dark Themes Using System Preferences */
+@media (prefers-color-scheme: light) {
+  :root {
+    --primary: #0a0b5b;
+    --secondary: #f2f2f2;
+    --text-color: #333;
+    --title-color: #222;
+    --contact-bg: var(--secondary);
+    --footer-bg: #e0e0e0;
+    --skills-bg: var(--secondary);
+    --button-hover-text-color: var(--secondary);
+  }
 }
 
 /* reset */
@@ -21,6 +42,10 @@ li {
 }
 
 /* base styles */
+html {
+  /* Implement a Smooth Scrolling Behavior */
+  scroll-behavior: smooth;
+}
 body {
   background-color: var(--secondary);
   font-family: "Rubik", sans-serif;
@@ -37,7 +62,7 @@ body {
   display: inline-block;
 }
 .button:hover {
-  color: #222;
+  color: var(--button-hover-text-color);
   background-color: var(--primary);
 }
 .button:active {
@@ -49,7 +74,7 @@ textarea {
   color: #f2f2f2;
   padding: 10px 16px;
   border-radius: 20px;
-  border: 2px solid #9893d8;
+  border: 2px solid var(--text-color);
 }
 
 /* fonts */
@@ -58,13 +83,13 @@ h1,
 h2,
 h3,
 h4 {
-  color: #dddbff;
+  color: var(--title-color);
   font-weight: normal;
 }
 p,
 a,
 li {
-  color: #9893d8;
+  color: var(--text-color);
 }
 h1,
 h3 {
@@ -132,6 +157,12 @@ h4 {
   grid-column: 1/9;
   margin: 20px 0;
   display: flex;
+  /* Add a Hover Effect to Project Cards */
+  transition: all 0.3s ease;
+}
+.projects a:hover {
+  transform: scale(1.05);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
 .projects a * {
   margin: 0 20px;
@@ -155,7 +186,7 @@ h4 {
 }
 #skills li {
   padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--skills-bg);
   grid-column: span 4;
   text-align: center;
 }
@@ -167,7 +198,7 @@ h4 {
 /* 5- contact section */
 #contact {
   padding: 30px 20px;
-  background: #080936;
+  background: var(--contact-bg);
 }
 #contact h3,
 #contact p {
@@ -192,7 +223,7 @@ h4 {
 /* 6- footer section */
 footer {
   padding: 30px 20px;
-  background-color: #14153d;
+  background-color: var(--footer-bg);
   background-image: url(https://i.ibb.co/Fsc8R8H/satellite.png);
   background-size: 15%;
   background-repeat: no-repeat;
@@ -269,6 +300,11 @@ footer img {
 
   .site-nav {
     padding: 0 20px;
+    /* Make the Navigation Sticky on Desktop and Large Tablets */
+    position: sticky;
+    top: 0;
+    background-color: var(--secondary);
+    z-index: 1;
   }
   .site-nav h1 {
     grid-column: 1/3;
diff --git a/053-touch slider/script.js b/053-touch slider/script.js
index 68bd123..e798045 100644
--- a/053-touch slider/script.js	
+++ b/053-touch slider/script.js	
@@ -1,12 +1,24 @@
 const slider = document.querySelector(".slider-container"),
   slides = Array.from(document.querySelectorAll(".slide"));
 
+// Implement an Infinite Loop
+const firstClone = slides[0].cloneNode(true);
+const lastClone = slides[slides.length - 1].cloneNode(true);
+firstClone.classList.add("first-clone");
+lastClone.classList.add("last-clone");
+slider.appendChild(firstClone);
+slider.insertBefore(lastClone, slides[0]);
+
+let allSlides = Array.from(document.querySelectorAll(".slide"));
+let currentIndex = 1;
+const targetPosition = -window.innerWidth * currentIndex;
+slider.style.transform = `translateX(${targetPosition}px)`;
+
 let isDragging = false,
   startPos = 0,
-  currentTranslate = 0,
-  prevTranslate = 0,
-  animationID = 0,
-  currentIndex = 0;
+  currentTranslate = targetPosition,
+  prevTranslate = targetPosition,
+  animationID = 0;
 
 // Disable context menu
 window.oncontextmenu = (event) => {
@@ -27,31 +39,45 @@ const animation = () => {
   if (isDragging) requestAnimationFrame(animation);
 };
 
-const setPositionByIndex = () => {
+const setPositionByIndex = (withTransition = true) => {
   currentTranslate = currentIndex * -window.innerWidth;
   prevTranslate = currentTranslate;
-  setSliderPosition();
+  slider.style.transition = withTransition ? "transform 0.3s ease-out" : "none";
+  slider.style.transform = `translateX(${-window.innerWidth * currentIndex}px)`;
+  // setSliderPosition();
 };
 
-const touchStart = (index) => {
-  return (event) => {
-    currentIndex = index;
-    startPos = getPositionX(event);
-    isDragging = true;
-    // https://css-tricks.com/using-requestanimationframe/
-    animationID = requestAnimationFrame(animation);
-    slider.classList.add("grabbing");
-  };
-};
+// const touchStart = (index) => {
+//   return (event) => {
+//     currentIndex = index;
+//     startPos = getPositionX(event);
+//     isDragging = true;
+//     // https://css-tricks.com/using-requestanimationframe/
+//     animationID = requestAnimationFrame(animation);
+//     slider.classList.add("grabbing");
+//   };
+// };
+
+// function touchStart(index, event) {
+function touchStart(event) {
+  // currentIndex = index;
+  startPos = getPositionX(event);
+  isDragging = true;
+  animationID = requestAnimationFrame(animation);
+  slider.classList.add("grabbing");
+}
 
 const touchEnd = () => {
   isDragging = false;
   cancelAnimationFrame(animationID);
   const movedBy = currentTranslate - prevTranslate;
-  if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1;
-  if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
+  // if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1;
+  // if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;
+  if (movedBy < -100) currentIndex += 1;
+  if (movedBy > 100) currentIndex -= 1;
   setPositionByIndex();
   slider.classList.remove("grabbing");
+  prevTranslate = currentTranslate;
 };
 
 const touchMove = (event) => {
@@ -61,16 +87,74 @@ const touchMove = (event) => {
   }
 };
 
-slides.forEach((slide, index) => {
+// slides.forEach((slide, index) => {
+//   const slideImage = slide.querySelector("img");
+//   slideImage.addEventListener("dragstart", (e) => e.preventDefault());
+//   // Touch events
+//   slide.addEventListener("touchstart", touchStart(index));
+//   slide.addEventListener("touchend", touchEnd);
+//   slide.addEventListener("touchmove", touchMove);
+//   // Mouse events
+//   slide.addEventListener("mousedown", touchStart(index));
+//   slide.addEventListener("mouseup", touchEnd);
+//   slide.addEventListener("mouseleave", touchEnd);
+//   slide.addEventListener("mousemove", touchMove);
+// });
+
+function handleStart(event) {
+  const slide = event.target.closest(".slide");
+  if (!slide) return;
+  // currentIndex = slides.indexOf(slide);
+  currentIndex = allSlides.indexOf(slide);
+  // touchStart(currentIndex, event);
+  touchStart(event);
+}
+
+// Refactor Event Handlers
+slider.addEventListener("touchstart", handleStart, { passive: false });
+slider.addEventListener("touchend", touchEnd, { passive: false });
+slider.addEventListener("touchmove", touchMove, { passive: false });
+
+slider.addEventListener("mousedown", handleStart);
+slider.addEventListener("mouseup", touchEnd);
+slider.addEventListener("mouseleave", touchEnd);
+slider.addEventListener("mousemove", touchMove);
+
+slides.forEach((slide) => {
   const slideImage = slide.querySelector("img");
   slideImage.addEventListener("dragstart", (e) => e.preventDefault());
-  // Touch events
-  slide.addEventListener("touchstart", touchStart(index));
-  slide.addEventListener("touchend", touchEnd);
-  slide.addEventListener("touchmove", touchMove);
-  // Mouse events
-  slide.addEventListener("mousedown", touchStart(index));
-  slide.addEventListener("mouseup", touchEnd);
-  slide.addEventListener("mouseleave", touchEnd);
-  slide.addEventListener("mousemove", touchMove);
 });
+
+// Prevent Blank Screen on Rapid Arrow Key Press
+let isTransitioning = false;
+
+// Add Arrow Key Navigation
+window.addEventListener("keydown", (event) => {
+  if (isTransitioning) return;
+  // if (event.key === "ArrowRight" && currentIndex < slides.length - 1) {
+  if (event.key === "ArrowRight") {
+    currentIndex += 1;
+    setPositionByIndex();
+    isTransitioning = true;
+    // } else if (event.key === "ArrowLeft" && currentIndex > 0) {
+  } else if (event.key === "ArrowLeft") {
+    currentIndex -= 1;
+    setPositionByIndex();
+    isTransitioning = true;
+  }
+});
+
+slider.addEventListener("transitionend", () => {
+  if (allSlides[currentIndex].classList.contains("first-clone")) {
+    currentIndex = 1;
+    setPositionByIndex(false);
+  }
+  if (allSlides[currentIndex].classList.contains("last-clone")) {
+    currentIndex = allSlides.length - 2;
+    setPositionByIndex(false);
+  }
+  isTransitioning = false;
+});
+
+// Handle Window Resize
+window.addEventListener("resize", () => setPositionByIndex(false));
diff --git a/053-touch slider/style.css b/053-touch slider/style.css
index 006712c..4dafe95 100644
--- a/053-touch slider/style.css	
+++ b/053-touch slider/style.css	
@@ -22,7 +22,7 @@ body {
   display: inline-flex;
   overflow: hidden;
   transform: translateX(0);
-  transition: transform 0.3s ease-out;
+  /* transition: transform 0.3s ease-out; */
   cursor: grab;
 }
 
diff --git a/054-css loaders/index.html b/054-css loaders/index.html
index 60ec7c2..e2b0a24 100644
--- a/054-css loaders/index.html	
+++ b/054-css loaders/index.html	
@@ -29,5 +29,13 @@
       <div></div>
       <div></div>
     </div>
+
+    <!-- Create a New Loader -->
+    <!-- progress bar -->
+    <div class="progress-bar">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   </body>
 </html>
diff --git a/054-css loaders/style.css b/054-css loaders/style.css
index 3294994..b9ac4ee 100644
--- a/054-css loaders/style.css	
+++ b/054-css loaders/style.css	
@@ -1,9 +1,33 @@
+/* Refactor with CSS Variables */
+:root {
+  --spinner-color: #ad60f5;
+  --bouncer-color: #0077ff;
+  --flipper-color: coral;
+  /* Adjust Loader Contrast */
+  --progress-color: #126973;
+  --progress-bg-color: #e0e0e0;
+  --main-bg-color: #fef9f2;
+  --loader-size: 100px;
+}
+
+/* Add a Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-bg-color: #121212;
+    --spinner-color: #cba6fa;
+    --bouncer-color: #7dcfff;
+    --flipper-color: #ffb4a2;
+    --progress-color: #7ad7c1;
+    --progress-bg-color: #666;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #fef9f2;
+  background-color: var(--main-bg-color);
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -15,8 +39,8 @@ body {
 /* spinner */
 
 .spinner {
-  width: 100px;
-  height: 100px;
+  width: var(--loader-size);
+  height: var(--loader-size);
   position: relative;
 }
 
@@ -25,14 +49,14 @@ body {
   width: 100%;
   height: 100%;
   border: 10px solid transparent;
-  border-top-color: #ad60f5;
+  border-top-color: var(--spinner-color);
   border-radius: 50%;
   animation: spinnerOne 1.2s linear infinite;
 }
 
 .spinner div:nth-child(2) {
   border: 10px solid transparent;
-  border-bottom-color: #ad60f5;
+  border-bottom-color: var(--spinner-color);
   animation: spinnerTwo 1.2s linear infinite;
 }
 
@@ -72,16 +96,18 @@ body {
   display: flex;
   justify-content: space-around;
   align-items: flex-end;
-  width: 100px;
-  height: 100px;
+  width: var(--loader-size);
+  height: var(--loader-size);
 }
 
 .bouncer div {
   width: 20px;
   height: 20px;
-  background-color: #0077ff;
+  background-color: var(--bouncer-color);
   border-radius: 50%;
-  animation: bouncer 0.5s cubic-bezier(0.19, 0.57, 0.3, 0.98) infinite alternate;
+  /* Customize the Bouncer Animation */
+  /* animation: bouncer 0.5s cubic-bezier(0.19, 0.57, 0.3, 0.98) infinite alternate; */
+  animation: bouncer 0.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
   /* use https://cubic-bezier.com/ to customize the curve */
 }
 
@@ -105,15 +131,15 @@ body {
     transform: translateY(0);
   }
   to {
-    transform: translateY(-100px);
+    transform: translateY(calc(-1 * var(--loader-size)));
   }
 }
 
 /* flipping squares */
 
 .square {
-  width: 100px;
-  height: 100px;
+  width: var(--loader-size);
+  height: var(--loader-size);
   position: relative;
   perspective: 200px;
 }
@@ -123,7 +149,7 @@ body {
   top: 0;
   height: 50px;
   width: 50px;
-  background: coral;
+  background: var(--flipper-color);
   animation: flip 2s linear infinite;
   transform-origin: right bottom;
 }
@@ -151,3 +177,44 @@ body {
   }
 }
 
+/* Create a New Loader */
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  gap: 10%;
+}
+
+.progress-bar div {
+  width: 80%;
+  height: 15%;
+  border-radius: 15px;
+  background: linear-gradient(var(--progress-color) 0 0) 0/0% no-repeat
+    var(--progress-bg-color);
+  animation: progress 1.2s infinite;
+}
+
+.progress-bar div:nth-child(2) {
+  animation-delay: 0.2s;
+  opacity: 0.9;
+}
+.progress-bar div:nth-child(3) {
+  animation-delay: 0.4s;
+  opacity: 0.8;
+}
+
+@keyframes progress {
+  0% {
+    background-size: 0% 100%;
+  }
+  50% {
+    background-size: 100% 100%;
+  }
+  100% {
+    background-size: 0% 100%;
+  }
+}
diff --git a/055-glass dashboard/index.html b/055-glass dashboard/index.html
index 014e8dd..1ecda50 100644
--- a/055-glass dashboard/index.html	
+++ b/055-glass dashboard/index.html	
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-        <main class="content">
+    <main class="content">
       <section class="container">
         <div class="dashboard">
           <div class="user">
@@ -28,25 +28,40 @@ <h3>Dagny Taggart</h3>
           </div>
           <div class="links">
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/twitch.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/twitch.png?raw=true"
+                alt=""
+              />
               <h2>Streams</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/steam.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/steam.png?raw=true"
+                alt=""
+              />
               <h2>Games</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/upcoming.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/upcoming.png?raw=true"
+                alt=""
+              />
               <h2>New</h2>
             </div>
             <div class="link">
-              <img src="https://github.com/developedbyed/glass-website/blob/master/images/library.png?raw=true" alt="" />
+              <img
+                src="https://github.com/developedbyed/glass-website/blob/master/images/library.png?raw=true"
+                alt=""
+              />
               <h2>Library</h2>
             </div>
           </div>
           <div class="pro">
             <h2>Join pro for more games.</h2>
-            <img src="https://github.com/developedbyed/glass-website/blob/master/images/controller.png?raw=true" alt="" />
+            <img
+              src="https://github.com/developedbyed/glass-website/blob/master/images/controller.png?raw=true"
+              alt=""
+            />
           </div>
         </div>
         <div class="games">
@@ -56,31 +71,41 @@ <h1>Active Games</h1>
           </div>
           <div class="cards">
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1610987630265-35804332a182?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1610987630265-35804332a182?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Assassin's Creed Valhalla</h2>
                 <p>PS5 Version</p>
-                <div class="progress"></div>
+                <!-- Make the Progress Bar Dynamic -->
+                <div class="progress" style="--progress: 80%"></div>
               </div>
-              <h2 class="percentage">60%</h2>
+              <h2 class="percentage">80%</h2>
             </div>
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1572936947445-4f3f519289cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1572936947445-4f3f519289cf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Sackboy: A Big Adventure</h2>
                 <p>PS5 Version</p>
-                <div class="progress"></div>
+                <div class="progress" style="--progress: 60%"></div>
               </div>
               <h2 class="percentage">60%</h2>
             </div>
             <div class="card">
-              <img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" />
+              <img
+                src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
+                alt=""
+              />
               <div class="card-info">
                 <h2>Marvel's Spider-Man: Miles Morales</h2>
                 <p>PS5 Version</p>
-                <div class="progress"></div>
+                <div class="progress" style="--progress: 20%"></div>
               </div>
-              <h2 class="percentage">60%</h2>
+              <h2 class="percentage">20%</h2>
             </div>
           </div>
         </div>
diff --git a/055-glass dashboard/style.css b/055-glass dashboard/style.css
index ef19ad3..e182a82 100644
--- a/055-glass dashboard/style.css	
+++ b/055-glass dashboard/style.css	
@@ -4,6 +4,8 @@
   box-sizing: border-box;
   --main-bg-color: #65dfc9;
   --secondary-bg-color: #6cdbeb;
+  --animation: fadeInUp 0.7s ease forwards;
+  --animation-delay: 0.1s;
 }
 
 .content {
@@ -21,29 +23,39 @@
 }
 
 .container {
-  background-color: rgba(255, 255, 255, 0.9); /* slightly transparent fallback for Firefox */
+  background-color: rgba(
+    255,
+    255,
+    255,
+    0.9
+  ); /* slightly transparent fallback for Firefox */
   min-height: 80vh;
   width: 100%;
   border-radius: 2rem;
   z-index: 2;
-  display: flex;
+  /* Refactor the Layout with CSS Grid */
+  /* display: flex; */
+  display: grid;
+  grid-template-columns: 1fr 4fr;
 }
 
 /* if backdrop support: very transparent and blurred */
-@supports ((backdrop-filter: blur(2rem)) or (-webkit-backdrop-filter: blur(2rem))) {
+@supports (
+  (backdrop-filter: blur(2rem)) or (-webkit-backdrop-filter: blur(2rem))
+) {
   .container {
     background: linear-gradient(
-    to right bottom,
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.3)
-  );
+      to right bottom,
+      rgba(255, 255, 255, 0.7),
+      rgba(255, 255, 255, 0.3)
+    );
     -webkit-backdrop-filter: blur(2rem);
     backdrop-filter: blur(2rem);
   }
 }
 
 .dashboard {
-  flex: 1;
+  /* flex: 1; */
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -56,14 +68,40 @@
   );
   border-radius: 2rem;
 }
+.user {
+  opacity: 0;
+  animation: var(--animation);
+  animation-delay: var(--animation-delay);
+}
+.pro {
+  opacity: 0;
+  animation: var(--animation);
+  animation-delay: 0.7s;
+}
 .link {
   display: flex;
   padding: 1rem;
   margin: 1rem 0rem;
   align-items: center;
+  opacity: 0;
+  animation: var(--animation);
+  --stagger-delay: var(--animation-delay);
+  animation-delay: calc(0.3s + var(--stagger-delay) * (var(--i, 1) - 1));
+}
+.link:nth-child(1) {
+  --i: 1;
+}
+.link:nth-child(2) {
+  --i: 2;
+}
+.link:nth-child(3) {
+  --i: 3;
+}
+.link:nth-child(4) {
+  --i: 4;
 }
 .link img {
-  transform: scale(0.5)
+  transform: scale(0.5);
 }
 .user,
 .link h2,
@@ -73,7 +111,7 @@
 }
 
 .games {
-  flex: 3;
+  /* flex: 3; */
   margin: 1rem;
   display: flex;
   flex-direction: column;
@@ -109,7 +147,21 @@
   padding: 2rem;
   box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
   justify-content: space-between;
+  opacity: 0;
+  animation: var(--animation);
+  --stagger-delay: var(--animation-delay);
+  animation-delay: calc(0.9s + var(--stagger-delay) * (var(--i, 1) - 1));
+}
+.card:nth-child(1) {
+  --i: 1;
 }
+.card:nth-child(2) {
+  --i: 2;
+}
+.card:nth-child(3) {
+  --i: 3;
+}
+
 .card img {
   width: 105px;
   height: 105px;
@@ -119,14 +171,19 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  /* Align Card Content Consistently */
+  margin-right: auto;
 }
 
 .percentage {
   font-weight: bold;
-  background: linear-gradient(to right top,
+  background: linear-gradient(
+    to right top,
     var(--main-bg-color),
-    var(--secondary-bg-color));
+    var(--secondary-bg-color)
+  );
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
@@ -150,18 +207,19 @@ h3 {
 }
 
 @media screen and (min-width: 640px) {
-   .link img {
-  transform: scale(1)
-}
-   .link {
+  .link img {
+    transform: scale(1);
+  }
+  .link {
     margin: 2rem 0rem;
     padding: 1rem 5rem;
   }
 }
 
-@media screen and (min-width: 1024px){
+@media screen and (min-width: 1024px) {
   .container {
     width: 80%;
+    grid-template-columns: 1fr 3fr;
   }
   .circle1,
   .circle2 {
@@ -193,16 +251,18 @@ h3 {
   .user img {
     border-radius: 50%;
   }
- 
+
   .link h2 {
     display: block;
     padding: 0 2rem;
   }
   .pro {
     display: block;
-    background: linear-gradient(to right top,
-    var(--main-bg-color),
-    var(--secondary-bg-color));
+    background: linear-gradient(
+      to right top,
+      var(--main-bg-color),
+      var(--secondary-bg-color)
+    );
     border-radius: 2rem;
     color: white;
     padding: 1rem;
@@ -231,13 +291,15 @@ h3 {
     flex-direction: row;
   }
   .card img {
-    margin-right: 0.5rem;
+    margin-right: 1rem;
   }
   .progress {
     display: block;
-    background: linear-gradient(to right top,
-    var(--main-bg-color),
-    var(--secondary-bg-color));
+    background: linear-gradient(
+      to right top,
+      var(--main-bg-color),
+      var(--secondary-bg-color)
+    );
     width: 100%;
     height: 25%;
     border-radius: 1rem;
@@ -250,7 +312,31 @@ h3 {
     height: 100%;
     background: rgb(236, 236, 236);
     position: absolute;
-    left: 60%;
+    /* Make the Progress Bar Dynamic */
+    left: var(--progress, 60%);
   }
 }
 
+/* Animate Elements on Load */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Add Accessibility for Reduced Motion Preferences */
+@media (prefers-reduced-motion: reduce) {
+  .user,
+  .link,
+  .card,
+  .pro {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
diff --git a/056-image comparison slider/index.html b/056-image comparison slider/index.html
index e8e3439..9261499 100644
--- a/056-image comparison slider/index.html	
+++ b/056-image comparison slider/index.html	
@@ -6,11 +6,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Image Comparison Slider</title>
   </head>
   <body>
-    <div class="container">
+    <!-- Add Keyboard Accessibility -->
+    <div class="container" tabindex="0" autofocus>
       <div class="img-container-after">
         <img
           src="https://images.unsplash.com/photo-1605405748429-cc26b762fa16?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1336&q=80"
@@ -25,7 +32,10 @@
           class="before"
         />
       </div>
-      <div class="slider"></div>
+      <div class="slider">
+        <!-- Customize the Slider Handle -->
+        <div class="slider-handle"><i class="fas fa-arrows-alt-h"> </i></div>
+      </div>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/056-image comparison slider/script.js b/056-image comparison slider/script.js
index 39173aa..69c587a 100644
--- a/056-image comparison slider/script.js	
+++ b/056-image comparison slider/script.js	
@@ -3,23 +3,57 @@ const slider = document.querySelector(".slider");
 const before = document.querySelector(".img-container-before");
 const after = document.querySelector(".img-container-after");
 
+// Store Global Configuration Variables
+let containerSize = container.offsetWidth;
+let centerX = containerSize / 2;
+let step = 10;
+let boundary = 30;
+
 const dragSlider = (e) => {
   let x = e.type.includes("mouse") ? e.layerX : e.touches[0].clientX;
-  let size = container.offsetWidth;
   before.style.width = x + "px";
   slider.style.left = x + "px";
-  if (x < 30) {
+  if (x < boundary) {
     before.style.width = 0;
     slider.style.left = 0;
   }
-  if (x + 30 > size) {
-    before.style.width = size + "px";
-    slider.style.left = size + "px";
+  if (x + boundary > containerSize) {
+    before.style.width = containerSize + "px";
+    slider.style.left = containerSize + "px";
   }
 };
 
-// Mouse event
-container.addEventListener("mousemove", dragSlider);
-// Touch and drag events
-container.addEventListener("touchstart", dragSlider);
-container.addEventListener("touchmove", dragSlider);
+// // Mouse event
+// container.addEventListener("mousemove", dragSlider);
+// // Touch and drag events
+// container.addEventListener("touchstart", dragSlider);
+// container.addEventListener("touchmove", dragSlider);
+
+// Refactor Event Handlers
+const events = ["mousemove", "touchstart", "touchmove"];
+events.forEach((event) => {
+  container.addEventListener(event, dragSlider, { passive: false });
+});
+
+// Add Keyboard Accessibility
+container.addEventListener("keydown", (e) => {
+  e.preventDefault();
+  let currentX = before.offsetWidth;
+  if (e.key === "ArrowLeft") {
+    currentX = Math.max(0, currentX - step);
+  } else if (e.key === "ArrowRight") {
+    currentX = Math.min(containerSize, currentX + step);
+  } else {
+    return;
+  }
+  before.style.width = currentX + "px";
+  slider.style.left = currentX + "px";
+});
+
+// Make the Slider Responsive
+window.addEventListener("resize", () => {
+  containerSize = container.offsetWidth;
+  centerX = containerSize / 2;
+  before.style.width = centerX + "px";
+  slider.style.left = centerX + "px";
+});
diff --git a/056-image comparison slider/style.css b/056-image comparison slider/style.css
index 64059d7..2f952c3 100644
--- a/056-image comparison slider/style.css	
+++ b/056-image comparison slider/style.css	
@@ -19,6 +19,11 @@ body {
   height: 80vh;
 }
 
+/* Add Keyboard Accessibility */
+.container:focus {
+  outline: 2px solid #464646;
+}
+
 .img-container-before,
 .img-container-after {
   position: absolute;
@@ -48,3 +53,22 @@ img {
   z-index: 10;
   pointer-events: none;
 }
+
+/* Customize the Slider Handle */
+.slider-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #191919;
+  color: #fff;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 3px solid #fff;
+  z-index: 11;
+}
diff --git a/057-parallax background svg/index.html b/057-parallax background svg/index.html
index 3e43a7f..076087c 100644
--- a/057-parallax background svg/index.html	
+++ b/057-parallax background svg/index.html	
@@ -15,76 +15,150 @@ <h1>Go Camping</h1>
       <p>Do something fun with your family</p>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 459.37">
         <defs>
-          <style>
+          <!-- SVG Color Class Documentation -->
+          <!-- <style>
             .cls-1 {
               fill: #008c97;
-            }
+            } /* birds, house wall shadow, tree. */
             .cls-2 {
               fill: #ffc340;
-            }
+            } /* house roof, tractor. */
             .cls-3 {
               fill: #fff;
-            }
+            } /* clouds, house walls, fence. */
             .cls-4 {
               fill: #dcffff;
-            }
+            } /* cloud highlights */
             .cls-5 {
               fill: #32cc91;
-            }
+            } /* mountains (main) */
             .cls-6 {
               fill: #25b782;
-            }
+            } /* mountain highlights, shore */
             .cls-7 {
               fill: #3dd8a0;
-            }
+            } /* grass, mountain overlay */
             .cls-8 {
               fill: #006f7a;
-            }
+            } /* tree trunks, house roof shadow */
             .cls-9 {
               fill: #1daa82;
-            }
+            } /* mountain foreground */
             .cls-10 {
               fill: #94f0ff;
-            }
+            } /* river (main) */
             .cls-11 {
               fill: #63e4ea;
-            }
+            } /* river highlights, water ellipses */
             .cls-12 {
               fill: #129b77;
-            }
+            } /* distant house base shadow */
             .cls-13 {
               fill: #77edba;
-            }
+            } /* distant house wall, road */
             .cls-14 {
               fill: #025773;
-            }
+            } /* house/window outlines, tree trunks */
             .cls-15 {
               fill: #0057b5;
-            }
+            } /* window details (guess, not visible) */
             .cls-16 {
               fill: #eda30f;
-            }
+            } /* windmill top */
             .cls-17 {
               fill: #e2950c;
-            }
+            } /* straw */
             .cls-18 {
               fill: #52efb2;
-            }
+            } /* bush highlights */
             .cls-19 {
               fill: #007787;
-            }
+            } /* tree foliage */
             .cls-20 {
               fill: #bcf5f7;
-            }
+            } /* house window highlights (guess, not visible) */
             .cls-21 {
               fill: #00937e;
-            }
+            } /* bush */
             .cls-22 {
-              fill: #009687;
-            }
+              fill: #00937e;
+            } /* foreground foliage */
             .cls-23 {
               fill: #02a591;
-            }
+            } /* tree foliage (foreground tree near the river) */
+          </style> -->
+
+          <!-- Apply a New Color Palette -->
+          <style>
+            .cls-1 {
+              fill: #7b4b94;
+            } /* birds, house wall shadow, tree: muted purple */
+            .cls-2 {
+              fill: #ff8c42;
+            } /* house roof, tractor: soft contrasted orange */
+            .cls-3 {
+              fill: #f5f5f5;
+            } /* clouds, house walls, fence: super light grey */
+            .cls-4 {
+              fill: #ffe3e3;
+            } /* cloud highlights: pale pink */
+            .cls-5 {
+              fill: #ff6e7f;
+            } /* mountains (main): sunset pink */
+            .cls-6 {
+              fill: #fca17d;
+            } /* mountain highlights, shore: light orange */
+            .cls-7 {
+              fill: #fcb1b1;
+            } /* grass, mountain overlay: soft pink */
+            .cls-8 {
+              fill: #5f4b8b;
+            } /* tree trunks, house roof shadow: twilight purple */
+            .cls-9 {
+              fill: #e17b77;
+            } /* mountain foreground: muted coral */
+            .cls-10 {
+              fill: #a3bfff;
+            } /* river (main): soft blue */
+            .cls-11 {
+              fill: #d1c4e9;
+            } /* river highlights, water ellipses: lavender */
+            .cls-12 {
+              fill: #b388ff;
+            } /* distant house base shadow: soft purple */
+            .cls-13 {
+              fill: #ffd6a5;
+            } /* distant house wall, road: pale orange */
+            .cls-14 {
+              fill: #4e3d6b;
+            } /* house/window outlines, tree trunks: deep purple */
+            .cls-15 {
+              fill: #7b4b94;
+            } /* window details: muted purple */
+            .cls-16 {
+              fill: #ffb07c;
+            } /* windmill top: soft orange */
+            .cls-17 {
+              fill: #fca17d;
+            } /* straw: light orange */
+            .cls-18 {
+              fill: #ffd6a5;
+            } /* bush highlights: pale orange */
+            .cls-19 {
+              fill: #7b4b94;
+            } /* tree foliage: muted purple */
+            .cls-20 {
+              fill: #ffe3e3;
+            } /* house window highlights: pale pink */
+            .cls-21 {
+              fill: #e17b77;
+            } /* bush: muted coral */
+            .cls-22 {
+              fill: #e17b77;
+            } /* foreground foliage: muted coral */
+            .cls-23 {
+              fill: #ff7e7e;
+            } /* tree foliage (foreground): soft pink */
           </style>
         </defs>
         <g id="OBJECTS">
@@ -157,7 +231,8 @@ <h1>Go Camping</h1>
               transform="translate(0 -40.63)"
             />
           </g>
-          <g id="Mountains" class="rellax" data-rellax-speed="-4">
+          <!-- Adjust Parallax Speed -->
+          <g id="Mountains" class="rellax" data-rellax-speed="-6">
             <path
               class="cls-5"
               d="M750,276.48l-73-37.13c-27-12.6-54.75-15.8-90.22,1.76-13.84,6.63-26.65,6.76-40.3,0-15.77-7.68-31.4-16-47.38-23.09-23.92-10.59-46-23.89-71.65-28.28-54.86-9.41-111.56,13-161.29,37.74a409.77,409.77,0,0,0-93,63.65c-16.19,14.72-32,30.54-45.91,48.16H750Z"
@@ -240,9 +315,9 @@ <h1>Go Camping</h1>
             y="298.43"
             width="750"
             height="160.94"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
           />
-          <g id="River" class="rellax" data-rellax-speed="-3">
+          <g id="River" class="rellax" data-rellax-speed="-5">
             <path
               class="cls-10"
               d="M541,437.92c-47.51-3-57.84-10.26,4.81-16.3,34.39-3.92,120.61-8.54,204.23-13.12V375.41c-148.32,2.95-288.83,6.18-379.37,11.2,0,0-79,4-78.56,10s49.7,9.06,49.7,9.06c112,9.15,48,16.93-14,19.61C229.82,430.83,118.53,434.09,0,436.1V500H477c21.36-5,48.73-13.5,78-23.15C619.27,453.91,620.9,440,541,437.92Z"
@@ -291,7 +366,7 @@ <h1>Go Camping</h1>
               transform="translate(0 -40.63)"
             />
           </g>
-          <g id="Shore" class="rellax" data-rellax-speed="-3">
+          <g id="Shore" class="rellax" data-rellax-speed="-5">
             <path
               class="cls-6"
               d="M403.06,415.66c0,.18-.14.76-1.47,1.45-7.22,3.76-40.78,6.71-73.85,8.14-132.46,7.6-157-12.42-327.74,1.3v15.9c118.53-2,229-6.18,326.91-11.76,47.58-2.82,76.29-7.53,76.15-12C403.05,418.41,403.06,416.05,403.06,415.66Z"
@@ -312,7 +387,7 @@ <h1>Go Camping</h1>
             id="Shore_Vegetation"
             data-name="Shore Vegetation"
             class="rellax"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
           >
             <path
               class="cls-6"
@@ -327,11 +402,11 @@ <h1>Go Camping</h1>
           </g>
           <path
             class="cls-6 rellax"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
             d="M145.09,379.05c3.93-4.05,9.75-4.41,14.59,0Z"
             transform="translate(0 -40.63)"
           />
-          <g id="Houses1" class="rellax" data-rellax-speed="-3">
+          <g id="Houses1" class="rellax" data-rellax-speed="-5">
             <rect
               class="cls-12"
               x="141.23"
@@ -622,7 +697,7 @@ <h1>Go Camping</h1>
           </g>
           <ellipse
             class="cls-11 rellax"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
             cx="602.63"
             cy="357.55"
             rx="8.03"
@@ -630,11 +705,11 @@ <h1>Go Camping</h1>
           />
           <path
             class="cls-11 rellax"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
             d="M624.54,391.87c0,.29-1.31.52-2.93.52s-2.93-.23-2.93-.52,1.31-.51,2.93-.51S624.54,391.59,624.54,391.87Z"
             transform="translate(0 -40.63)"
           />
-          <g id="Trees" class="rellax" data-rellax-speed="-3">
+          <g id="Trees" class="rellax" data-rellax-speed="-5">
             <path
               class="cls-8"
               d="M377.73,291.54c-.38-1.45-1.57-1.38-1.87,0l-2.05,8.9,1.28.55c.28.12.19.46-.12.46l-1.38,0-5,21.72,2.87,1.29c.33.19.27.52-.14.48l-3.13,0-3.26,14.17h23.71l-5.72-24.86-1.78,0c-.35,0-.37-.31-.14-.47l1.58-1Z"
@@ -666,7 +741,7 @@ <h1>Go Camping</h1>
               transform="translate(0 -40.63)"
             />
           </g>
-          <g id="Houses2" class="rellax" data-rellax-speed="-3">
+          <g id="Houses2" class="rellax" data-rellax-speed="-5">
             <rect
               class="cls-3"
               x="689.01"
@@ -1019,38 +1094,41 @@ <h1>Go Camping</h1>
               rx="2.87"
               ry="2.87"
             />
-            <polygon
-              class="cls-14"
-              points="217.02 303.37 201.68 288.06 206.33 283.42 221.68 298.72 217.02 303.37"
-            />
-            <polygon
-              class="cls-14"
-              points="209.04 291.38 194.44 276.81 195.05 276.2 209.66 290.76 209.04 291.38"
-            />
-            <polygon
-              class="cls-14"
-              points="171.3 248.48 186.64 263.78 181.99 268.43 166.64 253.12 171.3 248.48"
-            />
-            <polygon
-              class="cls-14"
-              points="179.28 260.47 193.88 275.03 193.27 275.65 178.66 261.08 179.28 260.47"
-            />
-            <polygon
-              class="cls-14"
-              points="166.64 298.72 181.99 283.42 186.64 288.06 171.3 303.37 166.64 298.72"
-            />
-            <polygon
-              class="cls-14"
-              points="178.66 290.76 193.27 276.2 193.88 276.81 179.28 291.38 178.66 290.76"
-            />
-            <polygon
-              class="cls-14"
-              points="221.68 253.12 206.33 268.43 201.68 263.78 217.02 248.48 221.68 253.12"
-            />
-            <polygon
-              class="cls-14"
-              points="209.66 261.08 195.05 275.65 194.44 275.03 209.04 260.47 209.66 261.08"
-            />
+            <!-- Group and Animate Windmill Blades -->
+            <g id="Blades">
+              <polygon
+                class="cls-14"
+                points="217.02 303.37 201.68 288.06 206.33 283.42 221.68 298.72 217.02 303.37"
+              />
+              <polygon
+                class="cls-14"
+                points="209.04 291.38 194.44 276.81 195.05 276.2 209.66 290.76 209.04 291.38"
+              />
+              <polygon
+                class="cls-14"
+                points="171.3 248.48 186.64 263.78 181.99 268.43 166.64 253.12 171.3 248.48"
+              />
+              <polygon
+                class="cls-14"
+                points="179.28 260.47 193.88 275.03 193.27 275.65 178.66 261.08 179.28 260.47"
+              />
+              <polygon
+                class="cls-14"
+                points="166.64 298.72 181.99 283.42 186.64 288.06 171.3 303.37 166.64 298.72"
+              />
+              <polygon
+                class="cls-14"
+                points="178.66 290.76 193.27 276.2 193.88 276.81 179.28 291.38 178.66 290.76"
+              />
+              <polygon
+                class="cls-14"
+                points="221.68 253.12 206.33 268.43 201.68 263.78 217.02 248.48 221.68 253.12"
+              />
+              <polygon
+                class="cls-14"
+                points="209.66 261.08 195.05 275.65 194.44 275.03 209.04 260.47 209.66 261.08"
+              />
+            </g>
             <path
               class="cls-17"
               d="M412.3,357.25h-6.24c-.71,0-1.28-1.08-1.28-2.42s.57-2.41,1.28-2.41h6.24Z"
@@ -1401,11 +1479,11 @@ <h1>Go Camping</h1>
           <path
             id="Road"
             class="cls-13 rellax"
-            data-rellax-speed="-3"
+            data-rellax-speed="-5"
             d="M62.53,414.27c39.66-9,59.18-10.54,99.57-10.18,25.26,1.74,73.49,4.16,96.57.45,15.16-2.86,2.82-9.37-2.77-10.35s-17.59-2-34.72-2.21c-36.35-.44-85.09-1.62-66.5-17.1,20.25-10.44,68.38-6.14,68.38-6.14s18.67,1.23,19.42-2.26c-.59-8.75-43.19.64-48.82-9.23h1c7.29,8.44,52.45-2.6,50.39,10-1.55,5.63-22.24,4.18-22.24,4.18S173.64,368.1,159,376.8c-20.06,16.94,86.1,5.71,106.79,13.73,10.23,3.58,15.45,13.68,4.71,18.42-25.39,8.8-102.39,4.12-102.39,4.12S103,410.72,63.93,420Z"
             transform="translate(0 -40.63)"
           />
-          <g id="Foreground" class="rellax" data-rellax-speed="-3">
+          <g id="Foreground" class="rellax" data-rellax-speed="-5">
             <path
               class="cls-8"
               d="M750,293.23l-12.06-52.56c-2.1-8.1-8.73-7.7-10.37,0l-11.43,49.57,7.13,3.05c1.55.7,1.06,2.57-.69,2.57l-7.67-.09-27.82,121,16,7.17c1.81,1.07,1.47,2.91-.82,2.68l-17.43-.18L668,500h82Z"
@@ -1442,7 +1520,7 @@ <h1>Go Camping</h1>
               transform="translate(0 -40.63)"
             />
           </g>
-          <g id="Tree2" class="rellax" data-rellax-speed="-3">
+          <g id="Tree2" class="rellax" data-rellax-speed="-5">
             <path
               class="cls-14"
               d="M603.76,478l.44-34.58s-13.6-4.22-14.91-24.05l1.7.74s1.87,16.73,13.21,18.5l0-13.69h3.24l.22,9.25A15.75,15.75,0,0,0,619,421.61l1.24-1.18s1,11.44-12.58,16.82l1,40.77Z"
diff --git a/057-parallax background svg/style.css b/057-parallax background svg/style.css
index 4ab9a6b..df11955 100644
--- a/057-parallax background svg/style.css	
+++ b/057-parallax background svg/style.css	
@@ -6,7 +6,9 @@
 
 body {
   font-family: "Poppins", sans-serif;
-  background-color: #bcf5f7;
+  /* Apply a New Color Palette */
+  /* background-color: #bcf5f7; */
+  background: linear-gradient(180deg, #ffb07c 0%, #ff6e7f 50%, #ffb07c 100%);
   display: grid;
   height: 100vh;
   margin: 0;
@@ -55,3 +57,16 @@ svg {
     transform: translateX(-100px);
   }
 }
+
+/* Group and Animate Windmill Blades */
+#Blades {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: windmill-spin 20s linear infinite;
+}
+
+@keyframes windmill-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/058-3D product card/script.js b/058-3D product card/script.js
index 515ad0c..ae4b95c 100644
--- a/058-3D product card/script.js	
+++ b/058-3D product card/script.js	
@@ -8,6 +8,7 @@ const sneaker = document.querySelector(".sneaker img");
 const purchase = document.querySelector(".purchase");
 const description = document.querySelector(".info h3");
 const sizes = document.querySelector(".sizes");
+const sizeButtons = sizes.querySelectorAll("button");
 
 // Moving animation event
 container.addEventListener("mousemove", (e) => {
@@ -20,11 +21,17 @@ container.addEventListener("mousemove", (e) => {
 container.addEventListener("mouseenter", (e) => {
   card.style.transition = "none";
   // Popout
-  title.style.transform = "translateZ(150px)";
-  sneaker.style.transform = "translateZ(200px) rotateZ(-45deg)";
-  description.style.transform = "translateZ(125px)";
-  sizes.style.transform = "translateZ(100px)";
-  purchase.style.transform = "translateZ(75px)";
+  // title.style.transform = "translateZ(150px)";
+  // sneaker.style.transform = "translateZ(200px) rotateZ(-45deg)";
+  // description.style.transform = "translateZ(125px)";
+  // sizes.style.transform = "translateZ(100px)";
+  // purchase.style.transform = "translateZ(75px)";
+  // Adjust the 3D "Pop-Out" Effect
+  title.style.transform = "translateZ(70px)";
+  sneaker.style.transform = "translateZ(120px) rotateZ(-20deg)";
+  description.style.transform = "translateZ(50px)";
+  sizes.style.transform = "translateZ(40px)";
+  purchase.style.transform = "translateZ(30px)";
 });
 
 // Animate Out
@@ -38,3 +45,28 @@ container.addEventListener("mouseleave", (e) => {
   sizes.style.transform = "translateZ(0px)";
   purchase.style.transform = "translateZ(0px)";
 });
+
+// Make Size Buttons Interactive
+sizeButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    sizeButtons.forEach((button) => button.classList.remove("active"));
+    button.classList.add("active");
+  });
+});
+
+// Add a Glossy Shine Effect on Hover
+container.addEventListener("mousemove", (e) => {
+  let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+  let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+  card.style.transform = `rotateX(${yAxis}deg) rotateY(${xAxis}deg)`;
+
+  const rect = card.getBoundingClientRect();
+  card.style.setProperty(
+    "--shine-x",
+    `${((e.clientX - rect.left) / rect.width) * 100}%`
+  );
+  card.style.setProperty(
+    "--shine-y",
+    `${((e.clientY - rect.top) / rect.height) * 100}%`
+  );
+});
diff --git a/058-3D product card/style.css b/058-3D product card/style.css
index edfcc7a..29b352c 100644
--- a/058-3D product card/style.css	
+++ b/058-3D product card/style.css	
@@ -13,7 +13,9 @@ body {
   justify-content: center;
   min-height: 100vh;
   overflow: hidden;
-  perspective: 1000px;
+  /* Adjust the 3D "Pop-Out" Effect */
+  /*   perspective: 1000px; */
+  perspective: 800px;
 }
 
 .container {
@@ -26,10 +28,38 @@ body {
 .card {
   min-height: 80vh;
   width: 25rem;
-  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
+  /* box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2); */
+  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.25),
+    0px 0px 40px rgba(0, 0, 0, 0.15);
   border-radius: 30px;
   padding: 0rem 2rem;
   transform-style: preserve-3d;
+  /* Add a Glossy Shine Effect on Hover */
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+  background: radial-gradient(
+    circle at var(--shine-x, 50%) var(--shine-y, 50%),
+    rgba(255, 255, 255, 0.45) 0%,
+    rgba(255, 255, 255, 0.15) 40%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  z-index: 1;
+}
+
+.card:hover::before {
+  opacity: 1;
 }
 
 .sneaker {
@@ -78,7 +108,8 @@ body {
   transition: all 0.75s ease-out;
 }
 
-.sizes button {
+.sizes button,
+.motion {
   padding: 0.5rem 2rem;
   background: none;
   border: none;
@@ -90,7 +121,8 @@ body {
   color: #585858;
 }
 
-button.active {
+button.active,
+.motion {
   color: white;
   background-color: #585858;
 }
@@ -112,6 +144,22 @@ button.active {
   font-family: inherit;
 }
 
+.sizes,
+.purchase {
+  position: relative;
+  z-index: 2;
+}
+
+/* Improve Button Contrast for Accessibility */
+@media (prefers-contrast: more) {
+  button.active {
+    background-color: #040303;
+  }
+  .purchase button {
+    background: #c0392b;
+  }
+}
+
 @media screen and (min-width: 740px) {
   .card {
     width: 35rem;
diff --git a/059-form validator/index.html b/059-form validator/index.html
index 261f491..b74be88 100644
--- a/059-form validator/index.html	
+++ b/059-form validator/index.html	
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Form Validator</title>
   </head>
@@ -12,26 +18,50 @@
         <h2>Register With Us</h2>
         <div class="form-control">
           <label for="username">Username</label>
-          <input type="text" id="username" placeholder="Enter username" />
+          <!-- Enable Autofill -->
+          <input
+            type="text"
+            id="username"
+            placeholder="Enter username"
+            autocomplete="username"
+          />
           <small>Error message</small>
         </div>
         <div class="form-control">
           <label for="email">Email</label>
-          <input type="text" id="email" placeholder="Enter email" />
+          <input
+            type="text"
+            id="email"
+            placeholder="Enter email"
+            autocomplete="email"
+          />
           <small>Error message</small>
         </div>
         <div class="form-control">
           <label for="password">Password</label>
-          <input type="password" id="password" placeholder="Enter password" />
+          <!-- Add a Show/Hide Password Toggle -->
+          <div class="password-input-group">
+            <input
+              type="password"
+              id="password"
+              placeholder="Enter password"
+              autocomplete="new-password"
+            />
+            <i class="fas fa-eye toggle-password" data-toggle="password"></i>
+          </div>
           <small>Error message</small>
         </div>
         <div class="form-control">
           <label for="password2">Confirm Password</label>
-          <input
-            type="password"
-            id="password2"
-            placeholder="Enter password again"
-          />
+          <div class="password-input-group">
+            <input
+              type="password"
+              id="password2"
+              placeholder="Enter password again"
+              autocomplete="new-password"
+            />
+            <i class="fas fa-eye toggle-password" data-toggle="password2"></i>
+          </div>
           <small>Error message</small>
         </div>
         <button>Submit</button>
diff --git a/059-form validator/script.js b/059-form validator/script.js
index 99ced4e..098b4e4 100644
--- a/059-form validator/script.js	
+++ b/059-form validator/script.js	
@@ -5,14 +5,14 @@ const password = document.getElementById("password");
 const password2 = document.getElementById("password2");
 
 function showError(input, message) {
-  const formControl = input.parentElement;
+  const formControl = input.closest(".form-control");
   formControl.className = "form-control error";
   const small = formControl.querySelector("small");
   small.innerText = message;
 }
 
 function showSuccess(input, message) {
-  const formControl = input.parentElement;
+  const formControl = input.closest(".form-control");
   formControl.className = "form-control success";
 }
 
@@ -21,13 +21,14 @@ function getFieldName(input) {
 }
 
 function checkRequired(inputs) {
+  let allFilled = true;
   inputs.forEach((input) => {
     if (input.value.trim() === "") {
       showError(input, `${getFieldName(input)} is required`);
-    } else {
-      showSuccess(input);
+      allFilled = false;
     }
   });
+  return allFilled;
 }
 
 function checkLength(input, min, max) {
@@ -48,22 +49,94 @@ function checkLength(input, min, max) {
 
 function checkEmail(input) {
   // Reference: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
-  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  const re =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   if (re.test(String(input.value.trim()).toLowerCase())) showSuccess(input);
   else showError(input, `${getFieldName(input)} is not valid`);
 }
 
 function checkPasswordMatch(input1, input2) {
   if (input1.value !== input2.value) {
+    // Improve Password Confirmation
+    showError(input1, "Passwords do not match");
     showError(input2, "Passwords do not match");
+  } else if (input1.value && input2.value) {
+    showSuccess(input1);
+    showSuccess(input2);
   }
 }
 
+function debounce(functionToDebounce, delay = 300) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => functionToDebounce.apply(this, args), delay);
+  };
+}
+
 form.addEventListener("submit", (e) => {
   e.preventDefault();
-  checkRequired([username, email, password, password2]);
-  checkLength(username, 3, 15);
-  checkLength(password, 6, 25);
-  checkEmail(email);
   checkPasswordMatch(password, password2);
+  // Refactor the checkRequired function
+  if (checkRequired([username, email, password, password2])) {
+    checkLength(username, 3, 15);
+    checkLength(password, 6, 25);
+    checkEmail(email);
+    checkPasswordMatch(password, password2);
+  }
+});
+
+// Add a Show/Hide Password Toggle
+document.querySelectorAll(".toggle-password").forEach((icon) => {
+  icon.addEventListener("click", () => {
+    const toggleId = icon.getAttribute("data-toggle");
+    const input = document.getElementById(toggleId);
+    if (input.type === "password") {
+      input.type = "text";
+      icon.classList.remove("fa-eye");
+      icon.classList.add("fa-eye-slash");
+    } else {
+      input.type = "password";
+      icon.classList.remove("fa-eye-slash");
+      icon.classList.add("fa-eye");
+    }
+  });
 });
+
+// Implement Real-time Validation
+username.addEventListener(
+  "input",
+  debounce(() => {
+    if (checkRequired([username])) {
+      checkLength(username, 3, 15);
+    }
+  })
+);
+
+email.addEventListener(
+  "input",
+  debounce(() => {
+    if (checkRequired([email])) {
+      checkEmail(email);
+    }
+  })
+);
+
+password.addEventListener(
+  "input",
+  debounce(() => {
+    if (checkRequired([password])) {
+      checkLength(password, 6, 25);
+      checkPasswordMatch(password, password2);
+    }
+  })
+);
+
+password2.addEventListener(
+  "input",
+  debounce(() => {
+    if (checkRequired([password2])) {
+      checkPasswordMatch(password, password2);
+    }
+  })
+);
diff --git a/059-form validator/style.css b/059-form validator/style.css
index da34ac5..634f763 100644
--- a/059-form validator/style.css	
+++ b/059-form validator/style.css	
@@ -4,6 +4,7 @@
   --main-color: #3498db;
   --success-color: #2ecc71;
   --error-color: #e74c3c;
+  --border-color: #777;
 }
 
 * {
@@ -43,7 +44,7 @@ h2 {
 }
 
 .form-control label {
-  color: #777;
+  color: var(--border-color);
   display: block;
   margin-bottom: 5px;
 }
@@ -59,7 +60,7 @@ h2 {
 
 .form-control input:focus {
   outline: 0;
-  border-color: #777;
+  border-color: var(--border-color);
 }
 
 .form-control.success input {
@@ -94,3 +95,17 @@ h2 {
   margin-top: 20px;
   width: 100%;
 }
+
+/* Add a Show/Hide Password Toggle */
+.form .password-input-group {
+  position: relative;
+}
+
+.form .password-input-group i {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: var(--border-color);
+}
diff --git a/060-movie seat booking/index.html b/060-movie seat booking/index.html
index 0ad60e7..164037d 100644
--- a/060-movie seat booking/index.html	
+++ b/060-movie seat booking/index.html	
@@ -99,6 +99,25 @@
         >0</span
       >
     </p>
+    <div>
+      <button id="book-btn" class="button">Book Now</button>
+      <button id="clear-btn" class="button secondary">Clear Seats</button>
+    </div>
+
+    <!-- Add a Confirmation Modal -->
+    <dialog id="modal">
+      <form method="dialog" class="modal-content">
+        <span id="close-modal" class="close" aria-label="Close">&times;</span>
+        <h2>Confirm Your Booking</h2>
+        <p id="modal-summary"></p>
+        <button id="confirm-btn" class="button visible" value="confirm">
+          Confirm
+        </button>
+        <button id="cancel-btn" class="button visible secondary" value="cancel">
+          Cancel
+        </button>
+      </form>
+    </dialog>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/060-movie seat booking/script.js b/060-movie seat booking/script.js
index c5b8260..54cba12 100644
--- a/060-movie seat booking/script.js	
+++ b/060-movie seat booking/script.js	
@@ -3,10 +3,25 @@ const seats = document.querySelectorAll(".row .seat:not(.occupied)");
 const count = document.getElementById("count");
 const total = document.getElementById("total");
 const movieSelect = document.getElementById("movie");
+const clear = document.getElementById("clear-btn");
+const book = document.getElementById("book-btn");
+const modal = document.getElementById("modal");
+const modalSummary = document.getElementById("modal-summary");
+const closeModal = document.getElementById("close-modal");
+const confirm = document.getElementById("confirm-btn");
+const cancel = document.getElementById("cancel-btn");
+
 let ticketPrice = +movieSelect.value;
+// Implement a Seat-Picking Limit
+let seatLimitReached = false;
+let selectedSeatsCount = 0;
+
+function getSelectedSeats() {
+  return JSON.parse(localStorage.getItem("selectedSeats"));
+}
 
 function populateUI() {
-  const selectedSeats = JSON.parse(localStorage.getItem("selectedSeats"));
+  const selectedSeats = getSelectedSeats();
   if (selectedSeats !== null && selectedSeats.length > 0) {
     seats.forEach((seat, index) => {
       if (selectedSeats.indexOf(index) > -1) seat.classList.add("selected");
@@ -15,6 +30,8 @@ function populateUI() {
   const selectedMovieIndex = localStorage.getItem("selectedMovieIndex");
   if (selectedMovieIndex !== null)
     movieSelect.selectedIndex = selectedMovieIndex;
+  // Fix Total Price Calculation
+  ticketPrice = +movieSelect.value;
 }
 
 function setMovieData(movieIndex, moviePrice) {
@@ -26,9 +43,32 @@ function updateSelectedCount() {
   const selectedSeats = document.querySelectorAll(".row .seat.selected");
   const seatsIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));
   localStorage.setItem("selectedSeats", JSON.stringify(seatsIndex));
-  const selectedSeatsCount = selectedSeats.length;
+  selectedSeatsCount = selectedSeats.length;
   count.innerText = selectedSeatsCount;
   total.innerText = selectedSeatsCount * ticketPrice;
+  if (selectedSeatsCount > 0) {
+    clear.classList.add("visible");
+    book.classList.add("visible");
+  } else {
+    clear.classList.remove("visible");
+    book.classList.remove("visible");
+  }
+  seatLimitReached = selectedSeatsCount >= 8;
+}
+
+function showModal() {
+  const movieText = movieSelect.options[movieSelect.selectedIndex].text;
+  const totalPrice = selectedSeatsCount * ticketPrice;
+  modalSummary.innerHTML = `
+    <strong>Movie:</strong> ${movieText}<br>
+    <strong>Seats:</strong> ${selectedSeatsCount}<br>
+    <strong>Total:</strong> $${totalPrice}
+  `;
+  modal.showModal();
+}
+
+function hideModal() {
+  modal.close();
 }
 
 movieSelect.addEventListener("change", (e) => {
@@ -42,11 +82,41 @@ container.addEventListener("click", (e) => {
     e.target.classList.contains("seat") &&
     !e.target.classList.contains("occupied")
   ) {
+    if (seatLimitReached && !e.target.classList.contains("selected")) {
+      alert("You can only select up to 8 seats.");
+      return;
+    }
     e.target.classList.toggle("selected");
     updateSelectedCount();
   }
 });
 
+// Add a "Clear Selection" Button
+clear.addEventListener("click", () => {
+  seats.forEach((seat) => {
+    seat.classList.remove("selected");
+  });
+  localStorage.removeItem("selectedSeats");
+  updateSelectedCount();
+});
+
+// Add a Confirmation Modal
+book.addEventListener("click", showModal);
+closeModal.addEventListener("click", hideModal);
+cancel.addEventListener("click", hideModal);
+
+confirm.addEventListener("click", () => {
+  alert("Booking confirmed!");
+  seats.forEach((seat) => seat.classList.remove("selected"));
+  localStorage.removeItem("selectedSeats");
+  updateSelectedCount();
+  hideModal();
+});
+
 // Init
 populateUI();
-updateSelectedCount();
+// Prevent Saving Empty Selections
+const selectedSeats = getSelectedSeats();
+if (selectedSeats && selectedSeats.length > 0) {
+  updateSelectedCount();
+}
diff --git a/060-movie seat booking/style.css b/060-movie seat booking/style.css
index 5f278ef..537695d 100644
--- a/060-movie seat booking/style.css	
+++ b/060-movie seat booking/style.css	
@@ -114,3 +114,78 @@ p.text {
 p.text span {
   color: #6feaf6;
 }
+
+.button {
+  display: inline-block;
+  margin-top: 10px;
+  background-color: #6feaf6;
+  border: none;
+  border-radius: 5px;
+  color: #242333;
+  padding: 10px 20px;
+  font-family: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease;
+}
+
+.button.secondary {
+  background-color: #f44336;
+  color: #fff;
+  margin-left: 8px;
+}
+
+.button.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Add a Confirmation Modal */
+
+dialog#modal {
+  border: none;
+  border-radius: 8px;
+  background: rgba(36, 35, 51, 0.98);
+  color: #fff;
+  width: 90vw;
+  max-width: 400px;
+  padding: 0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+dialog#modal[open] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background: transparent;
+  margin: 0;
+  padding: 30px 20px;
+  border-radius: 8px;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  position: relative;
+}
+
+.close {
+  color: #aaa;
+  position: absolute;
+  right: 16px;
+  top: 10px;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.close:hover {
+  color: #fff;
+}
diff --git a/061-custom video player/index.html b/061-custom video player/index.html
index 6132e1d..0846376 100644
--- a/061-custom video player/index.html	
+++ b/061-custom video player/index.html	
@@ -38,6 +38,16 @@ <h1>Custom Video Player</h1>
         value="0"
       />
       <span class="timestamp" id="timestamp">00:00</span>
+      <!-- Add Mute Button Logic -->
+      <button class="btn" id="mute">
+        <i class="fa fa-volume-up fa-2x"></i>
+      </button>
+      <!-- Add Volume Control -->
+      <input type="range" id="volume" min="0" max="1" step="0.1" value="1" />
+      <!-- Toggle Fullscreen Mode -->
+      <button class="btn" id="fullscreen">
+        <i class="fa fa-expand fa-2x"></i>
+      </button>
     </div>
     <script src="script.js"></script>
   </body>
diff --git a/061-custom video player/script.js b/061-custom video player/script.js
index 4074cd5..433be0e 100644
--- a/061-custom video player/script.js	
+++ b/061-custom video player/script.js	
@@ -5,34 +5,85 @@ const play = document.getElementById("play");
 const stop = document.getElementById("stop");
 const progress = document.getElementById("progress");
 const timestamp = document.getElementById("timestamp");
+const fullscreen = document.getElementById("fullscreen");
+const volume = document.getElementById("volume");
+const mute = document.getElementById("mute");
+const volumeIcon = mute.querySelector("i");
 
-function toggleVideoStatus() {
-  video.paused ? video.play() : video.pause();
-}
+let lastVolume = 1;
 
-function updatePlayIcon() {
-  video.paused
-    ? (play.innerHTML = '<i class="fa fa-play-circle fa-2x"></i>')
-    : (play.innerHTML = '<i class="fa fa-pause-circle fa-2x"></i>');
-}
-
-function updateProgress() {
-  progress.value = (video.currentTime / video.duration) * 100;
-  let minutes = Math.floor(video.currentTime / 60);
-  if (minutes < 10) minutes = "0" + String(minutes);
-  let seconds = Math.floor(video.currentTime % 60);
-  if (seconds < 10) seconds = "0" + String(seconds);
-  timestamp.innerHTML = `${minutes}:${seconds}`;
-}
-
-function setVideoProgress() {
-  video.currentTime = (+progress.value * video.duration) / 100;
-}
-
-function stopVideo() {
-  video.currentTime = 0;
-  video.pause();
-}
+// Refactor with Object Destructuring
+const {
+  toggleVideoStatus,
+  updatePlayIcon,
+  updateProgress,
+  setVideoProgress,
+  stopVideo,
+  toggleFullscreen,
+  setVolume,
+  updateVolumeIcon,
+  toggleMute,
+} = {
+  toggleVideoStatus() {
+    video.paused ? video.play() : video.pause();
+  },
+  updatePlayIcon() {
+    video.paused
+      ? (play.innerHTML = '<i class="fa fa-play-circle fa-2x"></i>')
+      : (play.innerHTML = '<i class="fa fa-pause-circle fa-2x"></i>');
+  },
+  updateProgress() {
+    progress.value = (video.currentTime / video.duration) * 100;
+    let minutes = Math.floor(video.currentTime / 60);
+    if (minutes < 10) minutes = "0" + String(minutes);
+    let seconds = Math.floor(video.currentTime % 60);
+    if (seconds < 10) seconds = "0" + String(seconds);
+    timestamp.innerHTML = `${minutes}:${seconds}`;
+  },
+  setVideoProgress() {
+    video.currentTime = (+progress.value * video.duration) / 100;
+  },
+  stopVideo() {
+    video.currentTime = 0;
+    video.pause();
+  },
+  // Toggle Fullscreen Mode
+  toggleFullscreen() {
+    !document.fullscreenElement
+      ? video.requestFullscreen()
+      : document.exitFullscreen();
+  },
+  // Add Volume Control
+  setVolume() {
+    video.volume = volume.value;
+    video.muted = video.volume == 0;
+    if (video.volume > 0) lastVolume = video.volume;
+    updateVolumeIcon();
+  },
+  // Add Mute Button Logic
+  toggleMute() {
+    if (video.muted || video.volume == 0) {
+      video.volume = lastVolume || 1;
+      video.muted = false;
+      volume.value = video.volume;
+    } else {
+      lastVolume = video.volume;
+      video.volume = 0;
+      video.muted = true;
+      volume.value = 0;
+    }
+    updateVolumeIcon();
+  },
+  updateVolumeIcon() {
+    if (video.muted || video.volume == 0) {
+      volumeIcon.classList.remove("fa-volume-up");
+      volumeIcon.classList.add("fa-volume-mute");
+    } else {
+      volumeIcon.classList.remove("fa-volume-mute");
+      volumeIcon.classList.add("fa-volume-up");
+    }
+  },
+};
 
 video.addEventListener("click", toggleVideoStatus);
 video.addEventListener("pause", updatePlayIcon);
@@ -41,3 +92,24 @@ video.addEventListener("timeupdate", updateProgress);
 play.addEventListener("click", toggleVideoStatus);
 stop.addEventListener("click", stopVideo);
 progress.addEventListener("change", setVideoProgress);
+fullscreen.addEventListener("click", toggleFullscreen);
+volume.addEventListener("input", setVolume);
+mute.addEventListener("click", toggleMute);
+
+// Implement Keyboard Shortcuts
+document.addEventListener("keydown", (event) => {
+  switch (event.key) {
+    case " ":
+      event.preventDefault();
+      toggleVideoStatus();
+      break;
+    case "f":
+      toggleFullscreen();
+      break;
+    case "m":
+      toggleMute();
+      break;
+    default:
+      break;
+  }
+});
diff --git a/061-custom video player/style.css b/061-custom video player/style.css
index a5bac02..8ca7291 100644
--- a/061-custom video player/style.css	
+++ b/061-custom video player/style.css	
@@ -71,6 +71,8 @@ video[poster] {
   color: #367ebd;
   font-weight: bold;
   margin-left: 10px;
+  /* Toggle Fullscreen Mode */
+  margin-right: 10px;
 }
 
 @media (min-width: 768px) {
@@ -84,6 +86,7 @@ video[poster] {
 
 input[type="range"] {
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  appearance: none;
   width: 100%; /* Specific width is required for Firefox. */
   background: transparent; /* Otherwise white in Chrome */
 }
@@ -192,3 +195,13 @@ input[type="range"]::-ms-fill-upper {
 input[type="range"]:focus::-ms-fill-upper {
   background: #367ebd;
 }
+/* Add Volume Control */
+#volume {
+  width: 80px;
+  margin: 0 10px;
+  vertical-align: middle;
+}
+/* Add Mute Button Logic */
+#mute i {
+  min-width: 30px;
+}
diff --git a/062-exchange rate calculator/script.js b/062-exchange rate calculator/script.js
index d716164..52049ef 100644
--- a/062-exchange rate calculator/script.js	
+++ b/062-exchange rate calculator/script.js	
@@ -5,16 +5,64 @@ const amountTwo = document.getElementById("amount-two");
 const rate = document.getElementById("rate");
 const swap = document.getElementById("swap");
 
-function calculate() {
+// function calculate() {
+//   // Show a Loading State
+//   rate.innerText = "Calculating...";
+//   const currency_one = currencyOne.value;
+//   const currency_two = currencyTwo.value;
+//   // Cache API Results in sessionStorage
+//   const cached = sessionStorage.getItem(currency_one);
+
+//   if (cached) {
+//     const data = JSON.parse(cached);
+//     const currentRate = data.rates[currency_two];
+//     rate.innerText = `1 ${currency_one} = ${currentRate} ${currency_two}`;
+//     amountTwo.value = (amountOne.value * currentRate).toFixed(2);
+//   } else {
+//     fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
+//       .then((res) => res.json())
+//       .then((data) => {
+//         sessionStorage.setItem(currency_one, JSON.stringify(data));
+//         const currentRate = data.rates[currency_two];
+//         rate.innerText = `1 ${currency_one} = ${currentRate} ${currency_two}`;
+//         amountTwo.value = (amountOne.value * currentRate).toFixed(2);
+//       })
+//       // Add Error Handling for API Requests
+//       .catch(() => {
+//         rate.innerText = "Error: Could not fetch exchange rates.";
+//         amountTwo.value = "0.00";
+//       });
+//   }
+// }
+
+// Refactor to Use async/await
+async function calculate() {
+  // Show a Loading State
+  rate.innerText = "Calculating...";
   const currency_one = currencyOne.value;
   const currency_two = currencyTwo.value;
-  fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
-    .then((res) => res.json())
-    .then((data) => {
-      const currentRate = data.rates[currency_two];
-      rate.innerText = `1 ${currency_one} = ${currentRate} ${currency_two}`;
-      amountTwo.value = (amountOne.value * currentRate).toFixed(2);
-    });
+  // Cache API Results in sessionStorage
+  const cached = sessionStorage.getItem(currency_one);
+
+  try {
+    let data;
+    if (cached) {
+      data = JSON.parse(cached);
+    } else {
+      const res = await fetch(
+        `https://api.exchangerate-api.com/v4/latest/${currency_one}`
+      );
+      data = await res.json();
+      sessionStorage.setItem(currency_one, JSON.stringify(data));
+    }
+    const currentRate = data.rates[currency_two];
+    rate.innerText = `1 ${currency_one} = ${currentRate} ${currency_two}`;
+    amountTwo.value = (amountOne.value * currentRate).toFixed(2);
+    // Add Error Handling for API Requests
+  } catch (error) {
+    rate.innerText = "Error: Could not fetch exchange rates.";
+    amountTwo.value = "0.00";
+  }
 }
 
 currencyOne.addEventListener("change", calculate);
diff --git a/063-DOM array methods/index.html b/063-DOM array methods/index.html
index 99dec14..359d5b0 100644
--- a/063-DOM array methods/index.html	
+++ b/063-DOM array methods/index.html	
@@ -10,11 +10,27 @@
     <h1>DOM Array Methods</h1>
     <div class="container">
       <aside>
-        <button id="add-user">Add User 👱‍♂️</button>
-        <button id="double">Double Money 💰</button>
-        <button id="show-millionaires">Show Only Millionaires 💵</button>
-        <button id="sort">Sort by Richest ↓</button>
-        <button id="calculate-wealth">Calculate entire Wealth 🧮</button>
+        <!-- Implement an "Add Custom User" Feature -->
+        <form id="custom-user-form">
+          <input id="custom-name" type="text" placeholder="Name" required />
+          <input
+            id="custom-money"
+            type="number"
+            placeholder="Wealth"
+            min="0"
+            required
+          />
+          <button type="submit">Add Custom User</button>
+        </form>
+        <div class="button-row">
+          <button id="add-user">Add User 👱‍♂️</button>
+          <button id="double">Double Money 💰</button>
+          <button id="show-millionaires">Show Only Millionaires 💵</button>
+          <button id="sort">Sort by Richest ↓</button>
+          <button id="calculate-wealth">Calculate entire Wealth 🧮</button>
+          <!-- Add a Reset Button -->
+          <button id="reset">Reset</button>
+        </div>
       </aside>
 
       <main id="main">
diff --git a/063-DOM array methods/script.js b/063-DOM array methods/script.js
index 334338e..5fd74a1 100644
--- a/063-DOM array methods/script.js	
+++ b/063-DOM array methods/script.js	
@@ -4,8 +4,13 @@ const doubleButton = document.getElementById("double");
 const showMillionairesButton = document.getElementById("show-millionaires");
 const sortButton = document.getElementById("sort");
 const calculateWealthButton = document.getElementById("calculate-wealth");
+const resetButton = document.getElementById("reset");
+const customUserForm = document.getElementById("custom-user-form");
+const customNameInput = document.getElementById("custom-name");
+const customMoneyInput = document.getElementById("custom-money");
 
 let data = [];
+let originalData = [];
 
 async function getRandomUser() {
   const res = await fetch("https://randomuser.me/api");
@@ -16,6 +21,7 @@ async function getRandomUser() {
     money: Math.floor(Math.random() * 1000000),
   };
   addData(newUser);
+  originalData.push(newUser);
 }
 
 function addData(user) {
@@ -23,17 +29,60 @@ function addData(user) {
   updateDOM();
 }
 
+// Add a Reset Button
+function resetData() {
+  data = [...originalData];
+  updateDOM();
+}
+
+// Implement an "Add Custom User" Feature
+function addCustomUser(e) {
+  e.preventDefault();
+  const name = customNameInput.value.trim();
+  const money = Number(customMoneyInput.value);
+
+  if (!name || isNaN(money) || money < 0) {
+    alert("Please enter a valid name and a non-negative number for wealth.");
+    return;
+  }
+
+  const newUser = { name, money };
+  addData(newUser);
+
+  customUserForm.reset();
+}
+
 // forEach()
+// function updateDOM(providedData = data) {
+//   main.innerHTML = "<h2><strong>Person</strong> Wealth</h2>";
+//   providedData.forEach((person) => {
+//     const element = document.createElement("div");
+//     element.classList.add("person");
+//     element.innerHTML = `<strong>${person.name}</strong> ${formatMoney(
+//       person.money
+//     )}`;
+//     main.appendChild(element);
+//   });
+// }
+
+// Refactor updateDOM for Performance
 function updateDOM(providedData = data) {
-  main.innerHTML = "<h2><strong>Person</strong> Wealth</h2>";
+  const fragment = document.createDocumentFragment();
+  const header = document.createElement("h2");
+  header.innerHTML = "<strong>Person</strong> Wealth";
+  fragment.appendChild(header);
+
   providedData.forEach((person) => {
     const element = document.createElement("div");
     element.classList.add("person");
     element.innerHTML = `<strong>${person.name}</strong> ${formatMoney(
       person.money
     )}`;
-    main.appendChild(element);
+    fragment.appendChild(element);
   });
+
+  main.innerHTML = "";
+  main.appendChild(fragment);
 }
 
 // Format number as money - https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string
@@ -67,11 +116,16 @@ function calculateWealth() {
     (accumulator, user) => (accumulator += user.money),
     0
   );
-  const wealthElement = document.createElement("div");
+  // Prevent Duplicate Wealth Calculation
+  let wealthElement = document.getElementById("total-wealth");
+  if (!wealthElement) {
+    wealthElement = document.createElement("div");
+    wealthElement.id = "total-wealth";
+    main.appendChild(wealthElement);
+  }
   wealthElement.innerHTML = `<h3>Total wealth: <strong>${formatMoney(
     wealth
   )}</strong></h3>`;
-  main.appendChild(wealthElement);
 }
 
 addUserButton.addEventListener("click", getRandomUser);
@@ -79,6 +133,8 @@ doubleButton.addEventListener("click", doubleMoney);
 sortButton.addEventListener("click", sortByRichest);
 showMillionairesButton.addEventListener("click", showMillionaires);
 calculateWealthButton.addEventListener("click", calculateWealth);
+resetButton.addEventListener("click", resetData);
+customUserForm.addEventListener("submit", addCustomUser);
 
 // Init
 getRandomUser();
diff --git a/063-DOM array methods/style.css b/063-DOM array methods/style.css
index fea1737..8ca355a 100644
--- a/063-DOM array methods/style.css	
+++ b/063-DOM array methods/style.css	
@@ -82,6 +82,28 @@ h3 {
   margin-bottom: 10px;
 }
 
+/* Implement an "Add Custom User" Feature */
+input[type="text"],
+input[type="number"] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 5px;
+  border: 1px solid #bac6e1;
+  border-radius: 5px;
+  font-size: 14px;
+  background-color: #fff;
+  color: #46464a;
+  box-sizing: border-box;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus {
+  border-color: #46464a;
+}
+
 @media (max-width: 768px) {
   body {
     justify-content: flex-start;
@@ -96,12 +118,26 @@ h3 {
   aside {
     padding: 0;
     margin: auto;
-    display: flex;
-    justify-content: space-evenly;
     width: 100%;
     border-right: none;
   }
-  main {
-    padding: 0;
+  #custom-user-form {
+    width: 100%;
+  }
+  #custom-user-form input,
+  #custom-user-form button {
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+  .button-row button {
+    flex: 1;
+    margin-bottom: 0;
+    padding: 8px;
   }
 }
diff --git a/064-menu slider modal/index.html b/064-menu slider modal/index.html
index 6701697..35123f6 100644
--- a/064-menu slider modal/index.html	
+++ b/064-menu slider modal/index.html	
@@ -85,7 +85,8 @@ <h2>Benefits</h2>
     </div>
 
     <!-- Modal -->
-    <div class="modal-container" id="modal">
+    <!-- Upgrade to Native Dialog Modal -->
+    <dialog id="modal">
       <div class="modal">
         <button class="close-btn" id="close">
           <i class="fa fa-times"></i>
@@ -136,7 +137,7 @@ <h2>Benefits</h2>
           </form>
         </div>
       </div>
-    </div>
+    </dialog>
 
     <script src="script.js"></script>
   </body>
diff --git a/064-menu slider modal/script.js b/064-menu slider modal/script.js
index a279eb0..aca0417 100644
--- a/064-menu slider modal/script.js	
+++ b/064-menu slider modal/script.js	
@@ -4,13 +4,8 @@ const close = document.getElementById("close");
 const modal = document.getElementById("modal");
 
 function closeNavbar(e) {
-  if (
-    document.body.classList.contains("show-nav") &&
-    e.target !== toggle &&
-    !toggle.contains(e.target) &&
-    e.target !== navbar &&
-    !navbar.contains(e.target)
-  ) {
+  // Refactor closeNavbar Logic
+  if (!e.target.closest("#navbar") && !e.target.closest("#toggle")) {
     document.body.classList.toggle("show-nav");
     document.body.removeEventListener("click", closeNavbar);
   } else if (!document.body.classList.contains("show-nav")) {
@@ -18,6 +13,17 @@ function closeNavbar(e) {
   }
 }
 
+function closeModal() {
+  modal.close();
+  document.body.classList.remove("modal-open");
+}
+
+function openModal() {
+  modal.showModal();
+  // Prevent Body Scroll When Modal is Open
+  document.body.classList.add("modal-open");
+}
+
 // Menu Slider
 toggle.addEventListener("click", () => {
   document.body.classList.toggle("show-nav");
@@ -25,8 +31,16 @@ toggle.addEventListener("click", () => {
 });
 
 // Modal
-open.addEventListener("click", () => modal.classList.add("show-modal"));
-close.addEventListener("click", () => modal.classList.remove("show-modal"));
-window.addEventListener("click", (e) =>
-  e.target == modal ? modal.classList.remove("show-modal") : false
-);
+// Upgrade to Native Dialog Modal
+open.addEventListener("click", openModal);
+close.addEventListener("click", closeModal);
+modal.addEventListener("click", (e) => {
+  if (e.target === modal) closeModal();
+});
+
+// Enhance Navbar Accessibility
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && document.body.classList.contains("show-nav")) {
+    document.body.classList.remove("show-nav");
+  }
+});
diff --git a/064-menu slider modal/style.css b/064-menu slider modal/style.css
index 6a3a8b5..51e2ecc 100644
--- a/064-menu slider modal/style.css	
+++ b/064-menu slider modal/style.css	
@@ -24,6 +24,11 @@ body.show-nav {
   transform: translateX(200px); /* nav width */
 }
 
+/* Prevent Body Scroll When Modal is Open */
+body.modal-open {
+  overflow: hidden;
+}
+
 nav {
   background-color: var(--primary-color);
   border-right: 2px solid var(--border-color);
@@ -99,8 +104,10 @@ input[type="submit"] {
   padding: 8px 12px;
 }
 
+/* Make Button Focus Visible */
 button:focus {
-  outline: none;
+  outline: 2px solid var(--secondary-color);
+  outline-offset: 2px;
 }
 
 .toggle {
@@ -126,33 +133,25 @@ button:focus {
   width: 100%;
 }
 
-.modal-container {
-  background-color: var(--overlay-color);
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: none;
+/* Upgrade to Native Dialog Modal */
+dialog#modal {
+  border: none;
+  padding: 0;
 }
 
-.modal-container.show-modal {
-  display: block;
+dialog#modal::backdrop {
+  background: var(--overlay-color);
 }
 
 .modal {
-  background-color: var(--clear-color);
+  background: var(--clear-color);
   border-radius: 5px;
   box-shadow: 0 0 10px var(--shadow-color);
-  position: absolute;
-  overflow: hidden;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 100%;
+  position: relative;
   width: 400px;
-  animation-name: modalopen;
-  animation-duration: var(--modal-duration);
+  max-width: 90vw;
+  animation: modalopen var(--modal-duration);
+  margin: auto;
 }
 
 .modal-header {
@@ -187,8 +186,8 @@ button:focus {
   background: transparent;
   font-size: 25px;
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 4px;
+  right: 4px;
 }
 
 @keyframes modalopen {
diff --git a/065-hangman game/index.html b/065-hangman game/index.html
index 72c946a..e6fb00a 100644
--- a/065-hangman game/index.html	
+++ b/065-hangman game/index.html	
@@ -8,6 +8,16 @@
   </head>
   <body>
     <h1>Hangman</h1>
+    <!-- Add Word Categories -->
+    <div>
+      <label for="category-select">Category:</label>
+      <select id="category-select">
+        <option value="">Random</option>
+        <option value="movies">Movies</option>
+        <option value="countries">Countries</option>
+        <option value="programming">Programming</option>
+      </select>
+    </div>
     <p>Find the hidden word - Press a letter</p>
     <div class="game-container">
       <svg height="250" width="200" class="figure-container">
@@ -32,6 +42,10 @@ <h1>Hangman</h1>
       </div>
       <div class="word" id="word"></div>
     </div>
+    <!-- Allow On-Screen Keyboard Input -->
+    <div class="keyboard-container" id="keyboard-container"></div>
+    <!-- Add a Hint Feature -->
+    <button id="hint-button">Hint</button>
     <!-- Popup -->
     <div class="popup-container" id="popup-container">
       <div class="popup">
diff --git a/065-hangman game/script.js b/065-hangman game/script.js
index 68dfb0f..a1e056a 100644
--- a/065-hangman game/script.js	
+++ b/065-hangman game/script.js	
@@ -8,38 +8,62 @@ const finalMessageRevealWord = document.getElementById(
   "final-message-reveal-word"
 );
 const figureParts = document.querySelectorAll(".figure-part");
+const keyboardContainer = document.getElementById("keyboard-container");
+const hintButton = document.getElementById("hint-button");
+const categorySelect = document.getElementById("category-select");
 
-const words = [
-  "application",
-  "programming",
-  "interface",
-  "wizard",
-  "element",
-  "prototype",
-  "callback",
-  "undefined",
-  "arguments",
-  "settings",
-  "selector",
-  "container",
-  "instance",
-  "response",
-  "console",
-  "constructor",
-  "token",
-  "function",
-  "return",
-  "length",
-  "type",
-  "node",
-];
-let selectedWord = words[Math.floor(Math.random() * words.length)];
+const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+
+let selectedWord = "";
+let cachedCategory = "";
+let cachedWords = [];
 
 let playable = true;
 
 const correctLetters = [];
 const wrongLetters = [];
 
+// Fetch Words from an API
+// async function getRandomWord() {
+//   const response = await fetch("https://random-word-api.herokuapp.com/word");
+//   const data = await response.json();
+//   return data[0].toLowerCase();
+// }
+
+// Add Word Categories
+async function getRandomWord() {
+  const category = categorySelect.value;
+  if (!category) {
+    const response = await fetch("https://random-word-api.herokuapp.com/word");
+    const data = await response.json();
+    return data[0].toLowerCase();
+  }
+
+  if (category !== cachedCategory || cachedWords.length === 0) {
+    const response = await fetch(
+      `https://api.datamuse.com/words?ml=${category}&max=20`
+    );
+    const data = await response.json();
+    cachedWords = data
+      .map((w) => w.word.toLowerCase())
+      .filter((word) => !word.includes(" "));
+    cachedCategory = category;
+  }
+
+  return cachedWords[Math.floor(Math.random() * cachedWords.length)];
+}
+
+async function startGame() {
+  selectedWord = await getRandomWord();
+  correctLetters.splice(0);
+  wrongLetters.splice(0);
+  displayWord();
+  updateWrongLettersElement();
+  popup.style.display = "none";
+  createKeyboard();
+  hintButton.disabled = false;
+}
+
 function displayWord() {
   wordElement.innerHTML = `
     ${selectedWord
@@ -73,6 +97,7 @@ function updateWrongLettersElement() {
       ? (part.style.display = "block")
       : (part.style.display = "none");
   });
+  hintButton.disabled = figureParts.length - wrongLetters.length === 1;
   if (wrongLetters.length === figureParts.length) {
     finalMessage.innerText = "Unfortunately you lost. 😕";
     finalMessageRevealWord.innerText = `...the word was: ${selectedWord}`;
@@ -88,38 +113,80 @@ function showNotification() {
   }, 2000);
 }
 
-window.addEventListener("keypress", (e) => {
-  if (playable) {
-    const letter = e.key.toLowerCase();
-    if (letter >= "a" && letter <= "z") {
-      if (selectedWord.includes(letter)) {
-        if (!correctLetters.includes(letter)) {
-          correctLetters.push(letter);
-          displayWord();
-        } else {
-          showNotification();
-        }
+// Allow On-Screen Keyboard Input
+function createKeyboard() {
+  keyboardContainer.innerHTML = "";
+  alphabet.forEach((letter) => {
+    const letterButton = document.createElement("button");
+    letterButton.textContent = letter;
+    letterButton.setAttribute("data-letter", letter);
+    letterButton.disabled =
+      correctLetters.includes(letter) || wrongLetters.includes(letter);
+    keyboardContainer.appendChild(letterButton);
+  });
+}
+
+function handleLetterInput(letter) {
+  if (letter >= "a" && letter <= "z") {
+    if (selectedWord.includes(letter)) {
+      if (!correctLetters.includes(letter)) {
+        correctLetters.push(letter);
+        displayWord();
+      } else {
+        showNotification();
+      }
+    } else {
+      if (!wrongLetters.includes(letter)) {
+        wrongLetters.push(letter);
+        updateWrongLettersElement();
       } else {
-        if (!wrongLetters.includes(letter)) {
-          wrongLetters.push(letter);
-          updateWrongLettersElement();
-        } else {
-          showNotification();
-        }
+        showNotification();
       }
     }
+    createKeyboard();
   }
-});
+}
 
 playAgainButton.addEventListener("click", () => {
   playable = true;
-  correctLetters.splice(0);
-  wrongLetters.splice(0);
-  selectedWord = words[Math.floor(Math.random() * words.length)];
-  displayWord();
-  updateWrongLettersElement();
-  popup.style.display = "none";
+  startGame();
+});
+
+keyboardContainer.addEventListener("click", (e) => {
+  if (e.target.tagName === "BUTTON" && playable) {
+    const letter = e.target.getAttribute("data-letter");
+    handleLetterInput(letter);
+  }
+});
+
+window.addEventListener("keypress", (e) => {
+  if (playable) {
+    handleLetterInput(e.key.toLowerCase());
+  }
+});
+
+// Add a Hint Feature
+hintButton.addEventListener("click", () => {
+  if (!playable) return;
+  const unguessed = [...new Set(selectedWord)].filter(
+    (letter) => !correctLetters.includes(letter)
+  );
+  if (unguessed.length) {
+    correctLetters.push(
+      unguessed[Math.floor(Math.random() * unguessed.length)]
+    );
+    displayWord();
+    createKeyboard();
+    hintButton.disabled = true;
+    wrongLetters.push("?");
+    updateWrongLettersElement();
+  }
+});
+
+categorySelect.addEventListener("change", () => {
+  playable = true;
+  startGame();
 });
 
 // Init
-displayWord();
+startGame();
diff --git a/065-hangman game/style.css b/065-hangman game/style.css
index 25c42d7..bf5f243 100644
--- a/065-hangman game/style.css	
+++ b/065-hangman game/style.css	
@@ -18,7 +18,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 80vh;
+  height: auto;
   overflow: hidden;
   margin: 0;
 }
@@ -37,9 +37,9 @@ h3 {
 .game-container {
   padding: 20px 30px;
   position: relative;
-  margin: auto;
+  margin: 40px auto;
   height: 350px;
-  width: 450px;
+  max-width: 450px;
 }
 
 .figure-container {
@@ -55,8 +55,8 @@ h3 {
 
 .wrong-letters-container {
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 0;
+  right: 0;
   display: flex;
   flex-direction: column;
   text-align: right;
@@ -70,10 +70,15 @@ h3 {
   font-size: 24px;
 }
 
+#wrong-letters {
+  max-width: 60px;
+  word-break: break-all;
+}
+
 .word {
   display: flex;
   position: absolute;
-  bottom: 10px;
+  bottom: 0;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -145,3 +150,48 @@ h3 {
 .notification-container p {
   margin: 0;
 }
+
+/* Allow On-Screen Keyboard Input */
+.keyboard-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 450px;
+  margin: 20px 0;
+  gap: 6px;
+}
+
+.keyboard-container button,
+#hint-button,
+#category-select {
+  background: var(--secondary-color);
+  color: var(--light-color);
+  border: none;
+  border-radius: 4px;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.keyboard-container button:disabled,
+#hint-button:disabled {
+  background: #555;
+  color: #aaa;
+  cursor: not-allowed;
+}
+
+.keyboard-container button {
+  padding: 10px 14px;
+  margin: 2px;
+}
+
+/* Add a Hint Feature */
+#hint-button {
+  padding: 10px 18px;
+  margin: 10px 0;
+}
+
+/* Add Word Categories */
+#category-select {
+  padding: 8px 16px;
+  margin: 10px 0;
+}
diff --git a/066-meal finder/index.html b/066-meal finder/index.html
index f7b03e4..3d41d36 100644
--- a/066-meal finder/index.html	
+++ b/066-meal finder/index.html	
@@ -41,6 +41,8 @@ <h1>Meal Finder</h1>
     </header>
 
     <div class="container">
+      <!-- Implement a Search History -->
+      <div id="search-history" class="search-history"></div>
       <div id="result-heading"></div>
       <div id="meals" class="meals"></div>
       <div id="single-meal"></div>
diff --git a/066-meal finder/script.js b/066-meal finder/script.js
index 6a30680..79aece4 100644
--- a/066-meal finder/script.js	
+++ b/066-meal finder/script.js	
@@ -4,12 +4,60 @@ const random = document.getElementById("random");
 const mealsElement = document.getElementById("meals");
 const resultHeading = document.getElementById("result-heading");
 const singleMealElement = document.getElementById("single-meal");
+const searchHistory = document.getElementById("search-history");
+
+let lastSearch = false;
+let searches = JSON.parse(localStorage.getItem("searches") || "[]");
+
+// Implement a Search History
+function renderSearchHistory() {
+  if (!searches.length) {
+    searchHistory.innerHTML = "";
+    return;
+  }
+  searchHistory.innerHTML = `
+    <div>
+      <strong>Recent searches:</strong>
+      ${searches
+        .map((term) => `<button class="history-btn">${term}</button>`)
+        .join("")}
+    </div>
+  `;
+  searchHistory.querySelectorAll(".history-btn").forEach((button) => {
+    button.onclick = () => {
+      search.value = button.textContent;
+      searchMeal(new Event("submit"));
+    };
+  });
+}
+
+function saveSearch(term) {
+  term = term.trim();
+  if (!term) return;
+  searches = Array.from(
+    new Set([term, ...searches.map((term) => term.toLowerCase())])
+  ).slice(0, 5);
+  localStorage.setItem("searches", JSON.stringify(searches));
+  renderSearchHistory();
+}
+
+function showView({
+  showMeals = false,
+  showSingleMeal = false,
+  showHeading = false,
+}) {
+  mealsElement.style.display = showMeals ? "grid" : "none";
+  singleMealElement.style.display = showSingleMeal ? "block" : "none";
+  resultHeading.style.display = showHeading ? "block" : "none";
+}
 
 function searchMeal(e) {
   e.preventDefault();
   singleMealElement.innerHTML = "";
+  showView({ showMeals: true, showSingleMeal: false, showHeading: true });
   const term = search.value;
   if (term.trim()) {
+    lastSearch = true;
     fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${term}`)
       .then((res) => res.json())
       .then((data) => {
@@ -30,11 +78,13 @@ function searchMeal(e) {
             `
             )
             .join("");
+          saveSearch(term);
         }
       });
     search.value = "";
   } else {
-    getRandomMeal();
+    // Handle Empty Search Submission
+    singleMealElement.innerHTML = "<p>Please enter a search term.</p>";
   }
 }
 
@@ -49,6 +99,7 @@ function getMealById(mealID) {
 }
 
 function getRandomMeal() {
+  lastSearch = false;
   mealsElement.innerHTML = "";
   resultHeading.innerHTML = "";
   fetch("https://www.themealdb.com/api/json/v1/1/random.php")
@@ -70,35 +121,49 @@ function addMealToDOM(meal) {
       break;
     }
   }
+  showView({
+    showMeals: false,
+    showSingleMeal: true,
+    showHeading: !lastSearch,
+  });
+  if (lastSearch)
+    showView({ showHeading: false, showMeals: false, showSingleMeal: true });
+  // Add a "Back to Results" Button
   singleMealElement.innerHTML = `
-  <div class="single-meal">
-      <h1>${meal.strMeal}</h1>
-      <img src="${meal.strMealThumb}" alt="${meal.strMeal}" />
-      <div class="main">
-        <h2>Ingredients</h2>
-        <ul>
-          ${ingredients.map((ingredient) => `<li>${ingredient}</li>`).join("")}
-        </ul>
-        <p>${meal.strInstructions}</p>
-      </div>
-      <div class="single-meal-info">
-        ${meal.strCategory ? `<p>${meal.strCategory}</p>` : ""}
-        ${meal.strArea ? `<p>${meal.strArea}</p>` : ""}
+    <div class="single-meal">${
+      lastSearch
+        ? `<button id="back-btn" class="back-btn">&larr; Back to Results</button>`
+        : ""
+    }
+        <h1>${meal.strMeal}</h1>
+        <img src="${meal.strMealThumb}" alt="${meal.strMeal}" />
+        <div class="main">
+          <h2>Ingredients</h2>
+          <ul>
+            ${ingredients
+              .map((ingredient) => `<li>${ingredient}</li>`)
+              .join("")}
+          </ul>
+          <p>${meal.strInstructions}</p>
+        </div>
+        <div class="single-meal-info">
+          ${meal.strCategory ? `<p>${meal.strCategory}</p>` : ""}
+          ${meal.strArea ? `<p>${meal.strArea}</p>` : ""}
+        </div>
       </div>
-    </div>
-  `;
+    `;
+  if (lastSearch) {
+    document.getElementById("back-btn").onclick = () => {
+      showView({ showMeals: true, showSingleMeal: false, showHeading: true });
+    };
+  }
 }
 
 submit.addEventListener("submit", searchMeal);
 random.addEventListener("click", getRandomMeal);
 mealsElement.addEventListener("click", (e) => {
-  const mealInfo = e.path.find((item) => {
-    if (item.classList) {
-      return item.classList.contains("meal-info");
-    } else {
-      return false;
-    }
-  });
+  // Fix Deprecated event.path
+  const mealInfo = e.target.closest(".meal-info");
 
   if (mealInfo) {
     const mealID = mealInfo.getAttribute("data-mealid");
@@ -108,3 +173,4 @@ mealsElement.addEventListener("click", (e) => {
 
 // Init
 getRandomMeal();
+renderSearchHistory();
diff --git a/066-meal finder/style.css b/066-meal finder/style.css
index 20db897..08a4888 100644
--- a/066-meal finder/style.css	
+++ b/066-meal finder/style.css	
@@ -47,6 +47,10 @@ body {
   text-align: center;
 }
 
+.search-history {
+  margin-top: 20px;
+}
+
 .flex {
   display: flex;
   align-items: center;
@@ -69,6 +73,7 @@ input[type="text"] {
 button {
   background-color: var(--border-color-secondary);
   color: var(--main-color);
+  cursor: pointer;
 }
 
 input[type="text"]:focus,
@@ -81,7 +86,6 @@ button:active {
 }
 
 .search-btn {
-  cursor: pointer;
   border-left: 0;
   border-radius: 0;
   border-top-right-radius: 4px;
@@ -89,12 +93,23 @@ button:active {
 }
 
 .random-btn {
-  cursor: pointer;
   margin-left: 10px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
+/* Add a "Back to Results" Button */
+.back-btn {
+  display: block;
+}
+
+/* Implement a Search History */
+button.history-btn {
+  background-color: var(--light-color);
+  color: var(--main-color);
+  margin: 0 2px;
+}
+
 .meals {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -191,6 +206,10 @@ button:active {
     width: 300px;
   }
 
+  .search-history {
+    margin-top: 0;
+  }
+
   .meals {
     grid-template-columns: repeat(3, 1fr);
   }
diff --git a/067-expense tracker/index.html b/067-expense tracker/index.html
index 8d47ae1..7459a23 100644
--- a/067-expense tracker/index.html	
+++ b/067-expense tracker/index.html	
@@ -33,7 +33,11 @@ <h4>Expenses</h4>
           <p id="money-minus" class="money minus">-$0.00</p>
         </div>
       </div>
-      <h3>History</h3>
+      <!-- Add Data Visualization with a Chart -->
+      <!-- Hide the History and Overview sections -->
+      <h3 id="overview">Overview</h3>
+      <canvas id="financeChart" width="300" height="300"></canvas>
+      <h3 id="history">History</h3>
       <ul id="list" class="list"></ul>
       <h3>Add new transaction</h3>
       <form id="form">
@@ -55,6 +59,7 @@ <h3>Add new transaction</h3>
     <div class="notification-container" id="notification">
       <p>Please add a description and amount</p>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/067-expense tracker/script.js b/067-expense tracker/script.js
index 02f96d5..de32d39 100644
--- a/067-expense tracker/script.js	
+++ b/067-expense tracker/script.js	
@@ -6,6 +6,10 @@ const form = document.getElementById("form");
 const text = document.getElementById("text");
 const amount = document.getElementById("amount");
 const notification = document.getElementById("notification");
+const chartCanvas = document.getElementById("financeChart");
+const financeChartCtx = chartCanvas.getContext("2d");
+const overviewTitle = document.getElementById("overview");
+const historyTitle = document.getElementById("history");
 
 // const dummyTransactions = [
 //   { id: 1, text: "Flower", amount: -20 },
@@ -21,6 +25,13 @@ const localStorageTransactions = JSON.parse(
 );
 let transactions =
   localStorageTransactions !== null ? localStorageTransactions : [];
+let editTransactionId = null;
+// Implement Currency Formatting
+const formatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+let financeChart = null;
 
 function updateLocaleStorage() {
   localStorage.setItem("transactions", JSON.stringify(transactions));
@@ -41,18 +52,38 @@ function addTransaction(e) {
   e.preventDefault();
   if (text.value.trim() === "" || amount.value.trim() === "") {
     showNotification();
+    return;
+  }
+  if (editTransactionId !== null) {
+    const transaction = transactions.find(
+      (transaction) => transaction.id === editTransactionId
+    );
+    if (transaction) {
+      transaction.text = text.value;
+      transaction.amount = +amount.value;
+    }
+    editTransactionId = null;
+    form.querySelector(".btn").textContent = "Add transaction";
   } else {
-    const transaction = {
+    transactions.push({
       id: generateID(),
       text: text.value,
       amount: +amount.value,
-    };
-    transactions.push(transaction);
-    addTransactionDOM(transaction);
-    updateValues();
-    updateLocaleStorage();
-    text.value = "";
-    amount.value = "";
+    });
+  }
+  updateLocaleStorage();
+  init();
+  text.value = "";
+  amount.value = "";
+}
+
+function editTransaction(id) {
+  const transaction = transactions.find((transaction) => transaction.id === id);
+  if (transaction) {
+    text.value = transaction.text;
+    amount.value = transaction.amount;
+    editTransactionId = id;
+    form.querySelector(".btn").textContent = "Update transaction";
   }
 }
 
@@ -60,38 +91,105 @@ function addTransactionDOM(transaction) {
   const sign = transaction.amount < 0 ? "-" : "+";
   const item = document.createElement("li");
   item.classList.add(sign === "+" ? "plus" : "minus");
+  // Add an Edit Feature for Transactions
   item.innerHTML = `
           ${transaction.text} <span>${sign}${Math.abs(transaction.amount)}</span
-          ><button class="delete-btn" onclick="removeTransaction(${
+          >
+          <button class="edit-btn" onclick="editTransaction(${
+            transaction.id
+          })"><i class="fa fa-edit"></i></button>
+          <button class="delete-btn" onclick="removeTransaction(${
             transaction.id
           })"><i class="fa fa-times"></i></button>
     `;
   list.appendChild(item);
 }
 
-function updateValues() {
-  const amounts = transactions.map((transaction) => transaction.amount);
-  const total = amounts
-    .reduce((accumulator, value) => (accumulator += value), 0)
+// Refactor updateValues for Clarity
+function calculateTotal() {
+  return transactions
+    .map((transaction) => transaction.amount)
+    .reduce((acc, value) => acc + value, 0)
     .toFixed(2);
-  const income = amounts
+}
+
+function calculateIncome() {
+  return transactions
+    .map((transaction) => transaction.amount)
     .filter((value) => value > 0)
-    .reduce((accumulator, value) => (accumulator += value), 0)
+    .reduce((acc, value) => acc + value, 0)
     .toFixed(2);
-  const expense = (
-    amounts
+}
+
+function calculateExpenses() {
+  return (
+    transactions
+      .map((transaction) => transaction.amount)
       .filter((value) => value < 0)
-      .reduce((accumulator, value) => (accumulator += value), 0) * -1
+      .reduce((acc, value) => acc + value, 0) * -1
   ).toFixed(2);
-  balance.innerText = `$${total}`;
-  moneyPlus.innerText = `$${income}`;
-  moneyMinus.innerText = `$${expense}`;
 }
 
-function removeTransaction(id) {
-  transactions = transactions.filter((transaction) => transaction.id !== id);
-  updateLocaleStorage();
-  init();
+function updateValues() {
+  const total = calculateTotal();
+  const income = calculateIncome();
+  const expense = calculateExpenses();
+  balance.innerText = formatter.format(total);
+  moneyPlus.innerText = formatter.format(income);
+  moneyMinus.innerText = formatter.format(expense);
+  showChart(income, expense);
+}
+
+function showHistory() {
+  if (transactions.length === 0) {
+    historyTitle.style.display = "none";
+    return;
+  }
+  historyTitle.style.display = "block";
+}
+
+// Add Data Visualization with a Chart
+function showChart(income, expense) {
+  // Hide the History and Overview sections
+  if (transactions.length === 0) {
+    chartCanvas.style.display = "none";
+    overviewTitle.style.display = "none";
+    return;
+  } else {
+    chartCanvas.style.display = "block";
+    overviewTitle.style.display = "block";
+  }
+
+  const data = {
+    labels: ["Income", "Expenses"],
+    datasets: [
+      {
+        data: [income, expense],
+        backgroundColor: ["#2ecc71", "#c0392b"],
+      },
+    ],
+  };
+
+  if (financeChart) {
+    financeChart.data = data;
+    financeChart.update();
+  } else {
+    financeChart = new Chart(financeChartCtx, {
+      type: "pie",
+      data: data,
+      options: {
+        responsive: false,
+        plugins: {
+          legend: {
+            position: "bottom",
+            labels: {
+              color: "#393a57",
+            },
+          },
+        },
+      },
+    });
+  }
 }
 
 // Init
@@ -99,6 +197,7 @@ function init() {
   list.innerHTML = "";
   transactions.forEach(addTransactionDOM);
   updateValues();
+  showHistory();
 }
 
 init();
diff --git a/067-expense tracker/style.css b/067-expense tracker/style.css
index 7ab5311..ec41579 100644
--- a/067-expense tracker/style.css	
+++ b/067-expense tracker/style.css	
@@ -166,9 +166,9 @@ input[type="number"] {
   border-left: 5px solid var(--minus-color);
 }
 
-.delete-btn {
+.delete-btn,
+.edit-btn {
   cursor: pointer;
-  background-color: var(--minus-color);
   color: var(--background-secondary-color);
   box-shadow: var(--box-shadow);
   border: 0;
@@ -178,18 +178,30 @@ input[type="number"] {
   margin: 10px 0;
   position: absolute;
   top: 50%;
-  right: 0;
   transform: translate(100%, -73%);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
+.delete-btn {
+  background-color: var(--minus-color);
+  right: -50px;
+}
+
+/* Add an Edit Feature for Transactions */
+
+.edit-btn {
+  background-color: var(--ternary-color);
+  right: 0px;
+}
+
 .btn:focus,
 .delete-btn:focus {
   outline: 0;
 }
 
-.list li:hover .delete-btn {
+.list li:hover .delete-btn,
+.list li:hover .edit-btn {
   opacity: 1;
 }
 
diff --git a/068-music player/index.html b/068-music player/index.html
index 4ca6ba6..a3d2794 100644
--- a/068-music player/index.html	
+++ b/068-music player/index.html	
@@ -19,8 +19,15 @@ <h1>Music Player</h1>
     <div class="music-container" id="music-container">
       <div class="music-info">
         <h2 id="title" class="title"></h2>
-        <div class="progress-container" id="progress-container">
-          <div class="progress" id="progress"></div>
+        <div>
+          <div class="progress-container" id="progress-container">
+            <div class="progress" id="progress"></div>
+          </div>
+          <!-- Display Current and Total Time -->
+          <div class="time-container">
+            <span id="current-time">0:00</span>
+            <span id="duration">0:00</span>
+          </div>
         </div>
       </div>
       <audio
@@ -35,6 +42,10 @@ <h2 id="title" class="title"></h2>
         />
       </div>
       <div class="navigation">
+        <!-- Add a Shuffle Button -->
+        <button id="shuffle" class="action-btn">
+          <i class="fas fa-random"></i>
+        </button>
         <button id="prev" class="action-btn">
           <i class="fas fa-backward"></i>
         </button>
@@ -44,8 +55,14 @@ <h2 id="title" class="title"></h2>
         <button id="next" class="action-btn">
           <i class="fas fa-forward"></i>
         </button>
+        <!-- Implement a Repeat Button -->
+        <button id="repeat" class="action-btn active">
+          <i class="fas fa-redo-alt"></i>
+        </button>
       </div>
     </div>
+    <!-- Create a Dynamic Playlist -->
+    <ul id="playlist" class="playlist"></ul>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/068-music player/script.js b/068-music player/script.js
index f616d86..1b908e1 100644
--- a/068-music player/script.js	
+++ b/068-music player/script.js	
@@ -4,12 +4,19 @@ const prevButton = document.getElementById("prev");
 const nextButton = document.getElementById("next");
 const audio = document.getElementById("audio");
 const progress = document.getElementById("progress");
+const shuffleButton = document.getElementById("shuffle");
+const repeatButton = document.getElementById("repeat");
 const progressContainer = document.getElementById("progress-container");
 const title = document.getElementById("title");
 const cover = document.getElementById("cover");
+const currentTimeSpan = document.getElementById("current-time");
+const durationSpan = document.getElementById("duration");
+const playlist = document.getElementById("playlist");
 
 const songs = ["hey", "summer", "ukulele"];
 let songIndex = 1;
+let isShuffled = false;
+let repeatState = 1;
 
 function getSongTitle(song) {
   return song.charAt(0).toUpperCase() + song.slice(1);
@@ -19,6 +26,7 @@ function loadSong(song) {
   title.innerText = getSongTitle(song);
   audio.src = `https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/music/${song}.mp3?raw=true`;
   cover.src = `https://github.com/bradtraversy/vanillawebprojects/blob/master/music-player/images/${song}.jpg?raw=true`;
+  updateActiveSong();
 }
 
 function playSong() {
@@ -43,8 +51,16 @@ function prevSong() {
 }
 
 function nextSong() {
-  songIndex++;
-  if (songIndex > songs.length - 1) songIndex = 0;
+  if (isShuffled) {
+    let newIndex;
+    do {
+      newIndex = Math.floor(Math.random() * songs.length);
+    } while (newIndex === songIndex);
+    songIndex = newIndex;
+  } else {
+    songIndex++;
+    if (songIndex > songs.length - 1) songIndex = 0;
+  }
   loadSong(songs[songIndex]);
   playSong();
 }
@@ -53,6 +69,7 @@ function updateProgress(e) {
   const { duration, currentTime } = e.srcElement;
   const progressPercent = (currentTime / duration) * 100;
   progress.style.width = `${progressPercent}%`;
+  currentTimeSpan.innerText = formatTime(currentTime);
 }
 
 function setProgress(e) {
@@ -62,6 +79,79 @@ function setProgress(e) {
   audio.currentTime = (clickX / width) * duration;
 }
 
+// Add a Shuffle Button
+function toggleShuffle() {
+  isShuffled = !isShuffled;
+  shuffleButton.classList.toggle("active", isShuffled);
+}
+
+// Implement a Repeat Button
+function toggleRepeat() {
+  repeatState = (repeatState + 1) % 3;
+  const repeatIcon = repeatButton.querySelector("i.fas");
+
+  switch (repeatState) {
+    case 0:
+      repeatButton.classList.remove("active");
+      repeatIcon.innerText = "";
+      break;
+    case 1:
+      repeatButton.classList.add("active");
+      repeatIcon.innerText = "";
+      break;
+    case 2:
+      repeatButton.classList.add("active");
+      repeatIcon.innerText = "1";
+      break;
+  }
+}
+
+function handleSongEnd() {
+  switch (repeatState) {
+    case 0:
+      pauseSong();
+      break;
+    case 1:
+      nextSong();
+      break;
+    case 2:
+      playSong();
+      break;
+  }
+}
+
+// Display Current and Total Time
+function formatTime(seconds) {
+  const minutes = Math.floor(seconds / 60);
+  let secs = Math.floor(seconds % 60);
+  if (secs < 10) {
+    secs = `0${secs}`;
+  }
+  return `${minutes}:${secs}`;
+}
+
+function setDuration() {
+  durationSpan.innerText = formatTime(audio.duration);
+}
+
+// Create a Dynamic Playlist
+function renderPlaylist() {
+  playlist.innerHTML = "";
+  songs.forEach((song, index) => {
+    const li = document.createElement("li");
+    li.textContent = getSongTitle(song);
+    li.setAttribute("data-index", index);
+    if (index === songIndex) li.classList.add("active-song");
+    playlist.appendChild(li);
+  });
+}
+
+function updateActiveSong() {
+  [...playlist.children].forEach((li, index) => {
+    li.classList.toggle("active-song", index === songIndex);
+  });
+}
+
 // Event Listeners
 playButton.addEventListener("click", () => {
   const isPlaying = musicContainer.classList.contains("play");
@@ -70,11 +160,30 @@ playButton.addEventListener("click", () => {
 
 prevButton.addEventListener("click", prevSong);
 nextButton.addEventListener("click", nextSong);
+shuffleButton.addEventListener("click", toggleShuffle);
+repeatButton.addEventListener("click", toggleRepeat);
 
 audio.addEventListener("timeupdate", updateProgress);
 progressContainer.addEventListener("click", setProgress);
 
-audio.addEventListener("ended", nextSong);
+// audio.addEventListener("ended", nextSong);
+audio.addEventListener("ended", handleSongEnd);
+
+audio.addEventListener("timeupdate", updateProgress);
+audio.addEventListener("loadedmetadata", setDuration);
+progressContainer.addEventListener("click", setProgress);
+
+playlist.addEventListener("click", function (e) {
+  const li = e.target.closest("li[data-index]");
+  if (!li) return;
+  const index = Number(li.getAttribute("data-index"));
+  if (index !== songIndex) {
+    songIndex = index;
+    loadSong(songs[songIndex]);
+    playSong();
+  }
+});
 
 // Init
 loadSong(songs[songIndex]);
+renderPlaylist();
diff --git a/068-music player/style.css b/068-music player/style.css
index e4b4f65..b0bf5c0 100644
--- a/068-music player/style.css	
+++ b/068-music player/style.css	
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
 
 * {
   box-sizing: border-box;
@@ -8,7 +8,7 @@ body {
   background-color: #f7f7f7;
   background-image: linear-gradient(
     0deg,
-    rgba(247,247,247, 1) 23.8%,
+    rgba(247, 247, 247, 1) 23.8%,
     rgba(252, 221, 221, 1) 92%
   );
   font-family: "Rubik", sans-serif;
@@ -28,8 +28,8 @@ body {
   display: flex;
   padding: 20px 30px;
   position: relative;
-  margin: 100px 0;
-  z-index: 10;
+  margin-top: 100px;
+  z-index: 1;
 }
 
 .img-container {
@@ -50,7 +50,7 @@ body {
 }
 
 .img-container::after {
-  content: '';
+  content: "";
   position: absolute;
   background-color: #fff;
   border-radius: 50%;
@@ -95,7 +95,11 @@ body {
   outline: none;
 }
 
-.action-btn:hover, .action-btn.action-btn-big:hover {
+/* Add a Shuffle Button
+ */
+.action-btn:hover,
+.action-btn.action-btn-big:hover,
+.action-btn.active {
   color: #fe8daa;
 }
 
@@ -104,8 +108,13 @@ body {
   font-size: 30px;
 }
 
+.fa-redo-alt {
+  text-align: left;
+  min-width: 30px;
+}
+
 .music-info {
-  background-color: rgba(255,255,255,0.5);
+  background-color: rgba(255, 255, 255, 0.5);
   border-radius: 15px 15px 0 0;
   position: absolute;
   width: calc(100% - 40px);
@@ -133,7 +142,7 @@ body {
   background-color: #fff;
   border-radius: 5px;
   cursor: pointer;
-  margin: 10px 0;
+  margin-top: 10px;
   height: 4px;
   width: 100%;
 }
@@ -144,4 +153,43 @@ body {
   height: 100%;
   width: 0%;
   transition: width 0.1s linear;
-}
\ No newline at end of file
+}
+
+/* Display Current and Total Time */
+.time-container {
+  margin: 2px auto;
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: #555;
+}
+
+/* Create a Dynamic Playlist */
+.playlist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 545px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 0 0 15px 15px;
+  box-shadow: 0 4px 12px rgba(252, 169, 169, 0.6);
+  overflow: hidden;
+  z-index: 2;
+}
+
+.playlist li {
+  padding: 12px 20px;
+  cursor: pointer;
+  border-bottom: 1px solid #f0e6e6;
+  transition: background 0.3s ease;
+}
+
+.playlist li:last-child {
+  border-bottom: none;
+}
+
+.playlist li.active-song {
+  background: #fe8daa;
+  color: #fff;
+  font-weight: bold;
+}
diff --git a/069-infinite scroll posts/index.html b/069-infinite scroll posts/index.html
index 74f2323..b839bbb 100644
--- a/069-infinite scroll posts/index.html	
+++ b/069-infinite scroll posts/index.html	
@@ -23,6 +23,8 @@ <h1>My Blog</h1>
       <div class="circle"></div>
       <div class="circle"></div>
     </div>
+    <!-- Add a "Back to Top" Button -->
+    <button id="scroll-up" class="scroll-up">↑</button>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/069-infinite scroll posts/script.js b/069-infinite scroll posts/script.js
index c01c0c2..5c9b03f 100644
--- a/069-infinite scroll posts/script.js	
+++ b/069-infinite scroll posts/script.js	
@@ -1,6 +1,7 @@
 const postsContainer = document.getElementById("posts-container");
 const loader = document.getElementById("loader");
 const filter = document.getElementById("filter");
+const backToTop = document.getElementById("scroll-up");
 
 let limit = 5;
 let page = 1;
@@ -34,17 +35,27 @@ async function showPosts() {
   });
 }
 
-function showLoading() {
+// Refactor showLoading to Prevent Race Conditions
+async function fetchAndShowPosts() {
+  page++;
+  await showPosts();
+}
+
+async function showLoading() {
   isLoading = true;
   loader.classList.add("show");
-  setTimeout(() => {
-    loader.classList.remove("show");
-    setTimeout(() => {
-      page++;
-      showPosts();
-    }, 300);
-    isLoading = false;
-  }, 1000);
+  await fetchAndShowPosts();
+  loader.classList.remove("show");
+  isLoading = false;
+}
+
+// Debounce the Filter Input
+function debounce(functionToDebounce, delay = 300) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => functionToDebounce.apply(this, args), delay);
+  };
 }
 
 function filterPosts(e) {
@@ -62,12 +73,39 @@ function filterPosts(e) {
   });
 }
 
+// Preserve Scroll Position on Refresh
+async function restorePostsAndScroll() {
+  const savedPage = parseInt(sessionStorage.getItem("page"), 10);
+  const savedScroll = parseInt(sessionStorage.getItem("scrollTop"), 10);
+
+  if (savedPage && savedPage > 1) {
+    for (let i = 1; i <= savedPage; i++) {
+      page = i;
+      await showPosts();
+    }
+    setTimeout(() => {
+      window.scrollTo(0, savedScroll || 0);
+    }, 0);
+  } else {
+    showPosts();
+  }
+}
+
 window.addEventListener("scroll", () => {
   const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
   if (scrollTop + clientHeight >= scrollHeight - 5 && !isLoading) showLoading();
+  //  Add a "Back to Top" Button
+  backToTop.style.display = scrollTop > 100 ? "block" : "none";
+  sessionStorage.setItem("scrollTop", scrollTop);
+  sessionStorage.setItem("page", page);
 });
 
-filter.addEventListener("input", filterPosts);
+filter.addEventListener("input", debounce(filterPosts, 300));
+
+backToTop.addEventListener("click", () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+});
 
 // Init
-showPosts();
+// showPosts();
+restorePostsAndScroll();
diff --git a/069-infinite scroll posts/style.css b/069-infinite scroll posts/style.css
index a02a235..7fb3413 100644
--- a/069-infinite scroll posts/style.css	
+++ b/069-infinite scroll posts/style.css	
@@ -13,7 +13,11 @@
 
 body {
   background-color: var(--main-color);
-  background-image: linear-gradient(315deg, var(--main-color) 0%, var(--light-color) 100%);
+  background-image: linear-gradient(
+    315deg,
+    var(--main-color) 0%,
+    var(--light-color) 100%
+  );
   color: var(--dark-color);
   font-family: "Roboto", sans-serif;
   display: flex;
@@ -51,7 +55,7 @@ h1 {
 .post {
   position: relative;
   background-color: var(--light-color);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   border-radius: 1rem;
   padding: 20px;
   margin: 40px 0;
@@ -120,11 +124,35 @@ h1 {
   opacity: 0.6;
 }
 
+/* Add a "Back to Top" Button */
+.scroll-up {
+  display: none;
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  padding: 12px 18px;
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 50%;
+  background: var(--secondary-color);
+  color: var(--light-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  transition: opacity 0.3s;
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.scroll-up:hover {
+  opacity: 1;
+}
+
 @keyframes bounce {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-10px);
   }
-}
\ No newline at end of file
+}
diff --git a/070-typing game/index.html b/070-typing game/index.html
index 78a34da..804c95d 100644
--- a/070-typing game/index.html	
+++ b/070-typing game/index.html	
@@ -28,6 +28,15 @@
     </div>
     <div class="container">
       <h2>👩‍💻 Speed Typer 👨‍💻</h2>
+      <div class="stats-bar">
+        <p class="time-container">Time left: <span id="time">10s</span></p>
+        <!-- Add a High Score Feature -->
+        <p class="highscore-container">
+          Best (<span id="highscore-difficulty"></span>):
+          <span id="highscore">0</span>
+        </p>
+        <p class="score-container">Score: <span id="score">0</span></p>
+      </div>
       <small>Type the following:</small>
       <h1 id="word"></h1>
       <input
@@ -36,8 +45,10 @@ <h1 id="word"></h1>
         autocomplete="off"
         placeholder="Type the word here..."
       />
-      <p class="time-container">Time left: <span id="time">10s</span></p>
-      <p class="score-container">Score: <span id="score">0</span></p>
+      <!-- Implement a Countdown Before Start -->
+      <div id="countdown-overlay" class="countdown-overlay">
+        <div class="countdown-number" id="countdown-number">3</div>
+      </div>
       <div id="end-game-container" class="end-game-container"></div>
     </div>
     <script src="script.js"></script>
diff --git a/070-typing game/script.js b/070-typing game/script.js
index 1d9986a..0fc8a21 100644
--- a/070-typing game/script.js	
+++ b/070-typing game/script.js	
@@ -7,30 +7,14 @@ const settingsButton = document.getElementById("settings-btn");
 const settings = document.getElementById("settings");
 const settingsForm = document.getElementById("settings-form");
 const difficultySelect = document.getElementById("difficulty");
+const highScoreElement = document.getElementById("highscore");
+const highScoreDifficultyElement = document.getElementById(
+  "highscore-difficulty"
+);
+const overlay = document.getElementById("countdown-overlay");
+const number = document.getElementById("countdown-number");
 
-// List of words for game
-const words = [
-  "sigh",
-  "tense",
-  "airplane",
-  "ball",
-  "pies",
-  "juice",
-  "warlike",
-  "bad",
-  "north",
-  "dependent",
-  "steer",
-  "silver",
-  "highfalutin",
-  "superficial",
-  "quince",
-  "eight",
-  "feeble",
-  "admit",
-  "drag",
-  "loving",
-];
+let words = [];
 
 let randomWord;
 let score = 0;
@@ -40,14 +24,17 @@ let difficulty =
   localStorage.getItem("difficulty") !== null
     ? localStorage.getItem("difficulty")
     : "medium";
-
-const timeInterval = setInterval(updateTime, 1000);
+let timeInterval;
 
 function getRandomWord() {
   return words[Math.floor(Math.random() * words.length)];
 }
 
 function addWordToDom() {
+  if (words.length === 0) {
+    word.innerText = "Loading...";
+    return;
+  }
   randomWord = getRandomWord();
   word.innerText = randomWord;
 }
@@ -66,13 +53,99 @@ function updateTime() {
   }
 }
 
+// Fetch Words from an API
+async function initGame() {
+  difficultySelect.value = difficulty;
+  updateHighScoreDisplay();
+
+  word.innerText = "Loading...";
+  try {
+    const res = await fetch(
+      "https://random-word-api.herokuapp.com/word?number=50"
+    );
+    words = await res.json();
+    addWordToDom();
+    showCountdown(() => {
+      text.focus();
+      startTimer();
+    });
+  } catch (err) {
+    word.innerText = "Failed to load words!";
+  }
+}
+
+function startTimer() {
+  if (timeInterval) clearInterval(timeInterval);
+  timeInterval = setInterval(updateTime, 1000);
+}
+
+// Fix Game Over Logic
 function gameOver() {
+  const highScoreKey = `highscore-${difficulty}`;
+  const prevHighScore = getHighScore();
+  let newBest = false;
+  if (score > prevHighScore) {
+    localStorage.setItem(highScoreKey, score);
+    newBest = true;
+  }
+  updateHighScoreDisplay();
+
   endgameElement.innerHTML = `
     <h1>Time ran out</h1>
-    <p>Your final score is ${score}</p>
-    <button onclick="history.go(0)">Play Again</button>
-    `;
+    <p>Your final score is ${score}<br/>
+    ${
+      newBest
+        ? `🎉 New Best for ${difficulty}! 🎉`
+        : `Best (${difficulty}): ${getHighScore()}`
+    }</p>
+    <button id="play-again-btn">Play Again</button>
+  `;
   endgameElement.style.display = "flex";
+  document
+    .getElementById("play-again-btn")
+    .addEventListener("click", resetGame);
+}
+
+function resetGame() {
+  score = 0;
+  time = 10;
+  scoreElement.innerText = score;
+  timeElement.innerText = time + "s";
+  endgameElement.style.display = "none";
+  addWordToDom();
+  text.value = "";
+  updateHighScoreDisplay();
+  showCountdown(() => {
+    text.focus();
+    startTimer();
+  });
+}
+
+// Add a High Score Feature
+function getHighScore() {
+  return parseInt(localStorage.getItem(`highscore-${difficulty}`)) || 0;
+}
+
+function updateHighScoreDisplay() {
+  highScoreElement.innerText = getHighScore();
+  highScoreDifficultyElement.innerText = difficulty;
+}
+
+// Implement a Countdown Before Start
+function showCountdown(onDone) {
+  word.style.visibility = "hidden";
+  let count = 3;
+  overlay.style.display = "grid";
+  number.innerText = count;
+  const timer = setInterval(() => {
+    number.innerText = --count;
+    if (count === 0) {
+      clearInterval(timer);
+      overlay.style.display = "none";
+      word.style.visibility = "visible";
+      onDone();
+    }
+  }, 1000);
 }
 
 text.addEventListener("input", (e) => {
@@ -94,9 +167,8 @@ settingsButton.addEventListener("click", () =>
 settingsForm.addEventListener("change", (e) => {
   difficulty = e.target.value;
   localStorage.setItem("difficulty", difficulty);
+  updateHighScoreDisplay();
 });
 
 // Init
-difficultySelect.value = difficulty;
-addWordToDom();
-text.focus();
+initGame();
diff --git a/070-typing game/style.css b/070-typing game/style.css
index ea64a4c..bd5b078 100644
--- a/070-typing game/style.css	
+++ b/070-typing game/style.css	
@@ -1,11 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap");
 
 :root {
-  --primary-color: #BBE0EF;
-  --secondary-color: #06599F;
-  --overlay-color: #1A1314;
-  --gradient-color: #F2F3F4;
-  --text-color: #F0F0ED;
+  --primary-color: #bbe0ef;
+  --secondary-color: #06599f;
+  --overlay-color: #1a1314;
+  --gradient-color: #f2f3f4;
+  --text-color: #f0f0ed;
   --border-radius: 0.5rem;
 }
 
@@ -15,8 +15,11 @@
 
 body {
   background-color: var(--primary-color);
-  background-image: linear-gradient(315deg, var(--primary-color) 0%, var(--gradient-color) 100%)
-  ;
+  background-image: linear-gradient(
+    315deg,
+    var(--primary-color) 0%,
+    var(--gradient-color) 100%
+  );
   font-family: "Syne Mono", monospace;
   display: flex;
   flex-direction: column;
@@ -57,7 +60,8 @@ select {
 }
 
 select:focus,
-button:focus, input:focus {
+button:focus,
+input:focus {
   outline: 0;
 }
 
@@ -83,7 +87,7 @@ button:focus, input:focus {
 }
 
 .settings.hide {
-  transform: translateY(-100%)
+  transform: translateY(-100%);
 }
 
 .container {
@@ -106,7 +110,7 @@ h2 {
   background-color: var(--overlay-color);
   padding: 8px;
   border-radius: var(--border-radius);
-  margin: 0 0 40px;
+  margin: 0;
 }
 
 input {
@@ -118,16 +122,19 @@ input {
   margin-top: 10px;
 }
 
-.score-container {
-  position: absolute;
-  top: 60px;
-  right: 20px;
+/* Add a High Score Feature */
+.stats-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 460px;
+  z-index: 1;
 }
 
 .time-container {
-  position: absolute;
-  top: 60px;
- left: 20px;
+  min-width: 130px;
+  text-align: left;
 }
 
 .end-game-container {
@@ -144,3 +151,19 @@ input {
   height: 100%;
   z-index: 1;
 }
+
+/* Implement a Countdown Before Start */
+.countdown-overlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius);
+  background: rgba(26, 19, 20, 0.9);
+  place-items: center;
+  z-index: 1;
+}
+
+.countdown-number {
+  color: #fff;
+  font-size: 4rem;
+}
diff --git a/071-speech text reader/index.html b/071-speech text reader/index.html
index c7a88aa..79c531a 100644
--- a/071-speech text reader/index.html	
+++ b/071-speech text reader/index.html	
@@ -24,7 +24,14 @@ <h1>Speech Text Reader</h1>
       <h3>Choose Voice</h3>
       <select id="voices"></select>
       <textarea id="text" placeholder="Enter text to read..."></textarea>
-      <button class="btn" id="read">Read Text</button>
+      <!-- Allow Custom Image Boxes -->
+      <input id="image-url" type="text" placeholder="Enter image URL..." />
+      <div class="controls">
+        <button class="btn" id="read">Read Text</button>
+        <!-- Add a "Stop" Button -->
+        <button class="btn secondary" id="stop">Stop</button>
+        <button class="btn ternary" id="add-dashboard">Add</button>
+      </div>
     </div>
     <main></main>
     <script src="script.js"></script>
diff --git a/071-speech text reader/script.js b/071-speech text reader/script.js
index dcbd76b..caa5602 100644
--- a/071-speech text reader/script.js	
+++ b/071-speech text reader/script.js	
@@ -1,11 +1,14 @@
 const main = document.querySelector("main");
 const voicesSelect = document.getElementById("voices");
 const textarea = document.getElementById("text");
+const imageUrlInput = document.getElementById("image-url");
 const readButton = document.getElementById("read");
+const stopButton = document.getElementById("stop");
 const toggleButton = document.getElementById("toggle");
 const closeButton = document.getElementById("close");
+const addButton = document.getElementById("add-dashboard");
 
-const data = [
+const data = JSON.parse(localStorage.getItem("dashboardData")) || [
   {
     image: "drink",
     text: "I'm Thirsty",
@@ -55,25 +58,26 @@ const data = [
     text: "I Want To Go To Grandmas",
   },
 ];
+let voices = [];
 
 function createBox(item) {
   const box = document.createElement("div");
   const { image, text } = item;
+  const imgSrc = image.startsWith("http")
+    ? image
+    : `https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/img/${image}.jpg?raw=true`;
   box.classList.add("box");
   box.innerHTML = `
-    <img src='https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/img/${image}.jpg?raw=true' alt="${text}"/>
+    <img src='${imgSrc}' alt="${text}"/>
     <p class="info">${text}</p>
     `;
   box.addEventListener("click", () => handleSpeech(text, box));
   main.appendChild(box);
 }
 
-data.forEach(createBox);
-
-let voices = [];
-
-function getVoices() {
+function populateVoiceList() {
   voices = speechSynthesis.getVoices();
+  voicesSelect.innerHTML = "";
   voices.forEach((voice) => {
     const option = document.createElement("option");
     option.value = voice.name;
@@ -85,8 +89,24 @@ function getVoices() {
 function handleSpeech(text, box) {
   setTextMessage(text);
   speakText();
+
+  const info = box.querySelector(".info");
+  const originalContent = info.textContent;
+  info.innerHTML = wrapWordsWithSpans(text);
+
   box.classList.add("active");
   setTimeout(() => box.classList.remove("active"), 800);
+
+  message.onboundary = function (event) {
+    if (event.name === "word") {
+      highlightSpokenWord(box, event.charIndex);
+    }
+  };
+
+  message.onend = message.onerror = function () {
+    clearHighlights(box);
+    info.textContent = originalContent;
+  };
 }
 
 const message = new SpeechSynthesisUtterance();
@@ -103,6 +123,51 @@ function setVoice(e) {
   message.voice = voices.find((voice) => voice.name === e.target.value);
 }
 
+// Allow Custom Image Boxes
+function handleAddDashboardItem() {
+  const imageUrl = imageUrlInput.value.trim();
+  const text = textarea.value.trim();
+  if (imageUrl && text) {
+    const newItem = { image: imageUrl, text };
+    data.push(newItem);
+    createBox(newItem);
+    localStorage.setItem("dashboardData", JSON.stringify(data));
+    imageUrlInput.value = "";
+    textarea.value = "";
+    document.getElementById("text-box").classList.remove("show");
+  } else {
+    alert("Please enter both an image URL and text.");
+  }
+}
+
+// Implement Speech Highlighting on Image Boxes
+function wrapWordsWithSpans(text) {
+  return text
+    .split(/\s+/)
+    .map((word) => `<span class="word">${word}</span>`)
+    .join(" ");
+}
+
+function highlightSpokenWord(box, charIndex) {
+  const spans = box.querySelectorAll(".word");
+  let count = 0;
+  for (let i = 0; i < spans.length; i++) {
+    const word = spans[i].textContent;
+    if (charIndex >= count && charIndex < count + word.length) {
+      spans.forEach((span) => span.classList.remove("highlight"));
+      spans[i].classList.add("highlight");
+      break;
+    }
+    count += word.length + 1;
+  }
+}
+
+function clearHighlights(box) {
+  box
+    .querySelectorAll(".word")
+    .forEach((span) => span.classList.remove("highlight"));
+}
+
 // Event Listeners
 toggleButton.addEventListener("click", () => {
   document.getElementById("text-box").classList.toggle("show");
@@ -110,11 +175,22 @@ toggleButton.addEventListener("click", () => {
 closeButton.addEventListener("click", () => {
   document.getElementById("text-box").classList.remove("show");
 });
-speechSynthesis.addEventListener("voiceschanged", getVoices);
+speechSynthesis.addEventListener("voiceschanged", populateVoiceList);
 voicesSelect.addEventListener("change", setVoice);
 readButton.addEventListener("click", () => {
   setTextMessage(textarea.value);
   speakText();
 });
 
-getVoices();
+// Add a "Stop" Button
+stopButton.addEventListener("click", () => {
+  speechSynthesis.cancel();
+});
+
+addButton.addEventListener("click", handleAddDashboardItem);
+
+data.forEach(createBox);
+// Refactor Voice Loading
+if (speechSynthesis.getVoices().length > 0) {
+  populateVoiceList();
+}
diff --git a/071-speech text reader/style.css b/071-speech text reader/style.css
index e2b8a5a..6ccdd97 100644
--- a/071-speech text reader/style.css	
+++ b/071-speech text reader/style.css	
@@ -1,11 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap");
 
 :root {
-  --main-color: #6B6FA9;
+  --main-color: #6b6fa9;
   --secondary-color: #272156;
-  --light-color: #F4F4FB;
-  --border-color: #E2DDEA;
-  --overlay-color: rgba(0,0,0,0.2);
+  --ternary-color: #20a39e;
+  --error-color: #9c0d38;
+  --light-color: #f4f4fb;
+  --border-color: #e2ddea;
+  --overlay-color: rgba(0, 0, 0, 0.2);
   --border-radius: 1.5rem;
 }
 
@@ -42,6 +44,15 @@ h1 {
   cursor: pointer;
 }
 
+/* Add a "Stop" Button */
+.btn.secondary {
+  background-color: var(--error-color);
+}
+
+.btn.ternary {
+  background-color: var(--ternary-color);
+}
+
 .btn:hover {
   opacity: 0.9;
 }
@@ -50,7 +61,8 @@ h1 {
   transform: scale(0.98);
 }
 
-.btn:focus, select:focus {
+.btn:focus,
+select:focus {
   outline: none;
 }
 
@@ -88,20 +100,37 @@ h1 {
   width: 100%;
 }
 
-.text-box textarea {
+/* Allow Custom Image Boxes */
+.text-box textarea,
+.text-box input[type="text"] {
   border: 1px var(--border-color) solid;
   border-radius: var(--border-radius);
+  font-family: inherit;
   font-size: 1rem;
   padding: 0.75rem 1rem;
+}
+
+.text-box textarea {
   margin: 1rem 0;
   height: 150px;
   width: 100%;
 }
 
+.text-box input[type="text"] {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
 .text-box .btn {
   width: 100%;
 }
 
+.text-box .controls {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
 .text-box .close {
   float: right;
   text-align: right;
@@ -149,6 +178,13 @@ main {
   height: 100%;
 }
 
+/* Implement Speech Highlighting on Image Boxes */
+
+.word.highlight {
+  background-color: var(--ternary-color);
+  color: var(--light-color);
+}
+
 @media (min-width: 576px) {
   main {
     grid-template-columns: repeat(2, 1fr);
@@ -166,6 +202,3 @@ main {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
-
-
diff --git a/072-memory cards/index.html b/072-memory cards/index.html
index 858344e..99407d0 100644
--- a/072-memory cards/index.html	
+++ b/072-memory cards/index.html	
@@ -13,9 +13,14 @@
     <title>Memory Cards</title>
   </head>
   <body>
-    <button class="clear btn" id="clear">
-      <i class="fas fa-trash"></i> Clear Cards
-    </button>
+    <div class="controls">
+      <button class="clear btn" id="clear">
+        <i class="fas fa-trash"></i> Clear Cards
+      </button>
+      <button id="show-main" class="btn">Main Deck</button>
+      <button id="show-unknown" class="btn">Review Unknown</button>
+      <button id="show-known" class="btn">Review Known</button>
+    </div>
     <h1>
       Memory Cards
       <button id="show" class="btn">
@@ -23,7 +28,13 @@ <h1>
       </button>
     </h1>
     <div id="cards-container" class="cards"></div>
-    <div class="navigation">
+    <!-- Implement "Known" and "Unknown" Piles -->
+    <div class="review-buttons">
+      <button id="knew" class="btn">I Knew It</button>
+      <button id="didnt-know" class="btn">I Didn't Know</button>
+    </div>
+    <!-- Enable localStorage -->
+    <div class="navigation" id="navigation">
       <button id="prev" class="nav-button">
         <i class="fas fa-arrow-left"></i>
       </button>
diff --git a/072-memory cards/script.js b/072-memory cards/script.js
index 33eb373..092b86d 100644
--- a/072-memory cards/script.js	
+++ b/072-memory cards/script.js	
@@ -9,34 +9,59 @@ const answerElement = document.getElementById("answer");
 const addCardButton = document.getElementById("add-card");
 const clearButton = document.getElementById("clear");
 const addContainer = document.getElementById("add-container");
+const navigation = document.getElementById("navigation");
+const knewButton = document.getElementById("knew");
+const didntKnowButton = document.getElementById("didnt-know");
+const showMainDeckButton = document.getElementById("show-main");
+const showUnknownDeckButton = document.getElementById("show-unknown");
+const showKnownDeckButton = document.getElementById("show-known");
 
+let cardsData = getCardsData();
+let knownCards = getKnownCards();
+let unknownCards = getUnknownCards();
 let currentActiveCard = 0;
+let currentDeck = "main";
 const cardsElement = [];
-
-const cardsData = [
-  {
-    question: "What does CSS stand for?",
-    answer: "Cascading Style Sheets",
-  },
-  {
-    question: "What year was JavaScript launched?",
-    answer: "1995",
-  },
-  {
-    question: "What does HTML stand for?",
-    answer: "Hypertext Markup Language",
-  },
-];
-// const cardsData = getCardsData();
+// const cardsData = [
+//   {
+//     question: "What does CSS stand for?",
+//     answer: "Cascading Style Sheets",
+//   },
+//   {
+//     question: "What year was JavaScript launched?",
+//     answer: "1995",
+//   },
+//   {
+//     question: "What does HTML stand for?",
+//     answer: "Hypertext Markup Language",
+//   },
+//   {
+//     question: "Which HTML tag is used to create a hyperlink?",
+//     answer: "&lt;a&gt;",
+//   },
+//   {
+//     question: "Which CSS property changes the text color?",
+//     answer: "color",
+//   },
+//   {
+//     question: "Which JavaScript method is used to select an element by its ID?",
+//     answer: "document.getElementById",
+//   },
+// ];
 
 function createCards() {
-  cardsData.forEach((data, index) => createCard(data, index));
+  cardsContainer.innerHTML = "";
+  cardsElement.length = 0;
+  cardsData.forEach((data) => createCard(data));
+  updateCardPositions();
+  updateReviewButtons();
+  updateCurrentText();
+  navigation.style.display = cardsData.length === 0 ? "none" : "flex";
 }
 
-function createCard(data, index) {
+function createCard(data) {
   const card = document.createElement("div");
   card.classList.add("card");
-  if (index === 0) card.classList.add("active");
   card.innerHTML = `
     <div class="inner-card">
         <div class="inner-card-front">
@@ -50,41 +75,93 @@ function createCard(data, index) {
   card.addEventListener("click", () => card.classList.toggle("show-answer"));
   cardsElement.push(card);
   cardsContainer.appendChild(card);
-  updateCurrentText();
 }
 
 function updateCurrentText() {
   currentElement.innerText = `${currentActiveCard + 1}/${cardsElement.length}`;
 }
 
-// function getCardsData() {
-//   const cards = JSON.parse(localStorage.getItem("cards"));
-//   return cards === null ? [] : cards;
-// }
+// Enable localStorage
+function getCardsData() {
+  const cards = JSON.parse(localStorage.getItem("cards"));
+  return cards === null ? [] : cards;
+}
+
+function setCardsData(cards) {
+  localStorage.setItem("cards", JSON.stringify(cards));
+}
+
+function getKnownCards() {
+  return JSON.parse(localStorage.getItem("knownCards")) || [];
+}
+function setKnownCards(cards) {
+  localStorage.setItem("knownCards", JSON.stringify(cards));
+}
+function getUnknownCards() {
+  return JSON.parse(localStorage.getItem("unknownCards")) || [];
+}
+function setUnknownCards(cards) {
+  localStorage.setItem("unknownCards", JSON.stringify(cards));
+}
+
+// Fix Card Navigation
+function updateCardPositions() {
+  cardsElement.forEach((card, index) => {
+    card.classList.remove("active", "left", "right", "far-left", "far-right");
+
+    const position = index - currentActiveCard;
+    const totalCards = cardsElement.length;
+
+    switch (position) {
+      case 0:
+        card.classList.add("active");
+        break;
+      case -1:
+      case totalCards - 1:
+        card.classList.add("left");
+        break;
+      case 1:
+      case -(totalCards - 1):
+        card.classList.add("right");
+        break;
+      default:
+        if (position < 0) {
+          card.classList.add("far-left");
+        } else {
+          card.classList.add("far-right");
+        }
+    }
+  });
+}
 
-// function setCardsData(cards) {
-//   localStorage.setItem("cards", JSON.stringify(cards));
-//   history.go(0);
-// }
+function updateReviewButtons() {
+  if (currentDeck === "main") {
+    knewButton.disabled = false;
+    didntKnowButton.disabled = false;
+  } else if (currentDeck === "known") {
+    knewButton.disabled = true;
+    didntKnowButton.disabled = false;
+  } else if (currentDeck === "unknown") {
+    knewButton.disabled = false;
+    didntKnowButton.disabled = true;
+  }
+  if (cardsData.length === 0) {
+    knewButton.disabled = true;
+    didntKnowButton.disabled = true;
+  }
+}
 
 // Event Listeners
 nextButton.addEventListener("click", () => {
-  cardsElement[currentActiveCard].className = "card left";
-  currentActiveCard++;
-  if (currentActiveCard > cardsElement.length - 1) {
-    currentActiveCard = 0;
-  }
-  cardsElement[currentActiveCard].className = "card active";
+  currentActiveCard = (currentActiveCard + 1) % cardsElement.length;
+  updateCardPositions();
   updateCurrentText();
 });
 
 prevButton.addEventListener("click", () => {
-  cardsElement[currentActiveCard].className = "card right";
-  currentActiveCard--;
-  if (currentActiveCard < 0) {
-    currentActiveCard = cardsElement.length - 1;
-  }
-  cardsElement[currentActiveCard].className = "card active";
+  currentActiveCard =
+    currentActiveCard === 0 ? cardsElement.length - 1 : currentActiveCard - 1;
+  updateCardPositions();
   updateCurrentText();
 });
 
@@ -98,20 +175,91 @@ addCardButton.addEventListener("click", () => {
   const answer = answerElement.value;
   if (question.trim() && answer.trim()) {
     const newCard = { question, answer };
-    createCard(newCard);
+    cardsData.push(newCard);
+    setCardsData(cardsData);
+    createCards();
     questionElement.value = "";
     answerElement.value = "";
     addContainer.classList.remove("show");
-    cardsData.push(newCard);
-    // setCardsData(cardsData);
   }
 });
 
 clearButton.addEventListener("click", () => {
-  //   localStorage.clear();
+  localStorage.clear();
+  cardsData = [];
   cardsContainer.innerHTML = "";
   currentElement.innerText = "";
-  //   history.go(0);
+  setCardsData(cardsData);
+});
+
+// Add Keyboard Navigation
+document.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowLeft") {
+    prevButton.click();
+  } else if (event.key === "ArrowRight") {
+    nextButton.click();
+  } else if (event.key === " ") {
+    event.preventDefault();
+    const activeCard = document.querySelector(".card.active");
+    if (activeCard) {
+      activeCard.classList.toggle("show-answer");
+    }
+  }
+});
+
+// Implement "Known" and "Unknown" Piles
+function isDuplicate(card, array) {
+  return array.some(
+    (c) => c.question === card.question && c.answer === card.answer
+  );
+}
+
+knewButton.addEventListener("click", () => {
+  if (cardsData.length > 0) {
+    const [card] = cardsData.splice(currentActiveCard, 1);
+    if (!isDuplicate(card, knownCards)) {
+      knownCards.push(card);
+    }
+    setCardsData(cardsData);
+    setKnownCards(knownCards);
+    createCards();
+  }
+});
+
+didntKnowButton.addEventListener("click", () => {
+  if (cardsData.length > 0) {
+    const [card] = cardsData.splice(currentActiveCard, 1);
+    if (!isDuplicate(card, unknownCards)) {
+      unknownCards.push(card);
+    }
+    setCardsData(cardsData);
+    setUnknownCards(unknownCards);
+    createCards();
+  }
+});
+
+showMainDeckButton.addEventListener("click", () => {
+  cardsData = getCardsData();
+  currentDeck = "main";
+  currentActiveCard = 0;
+  createCards();
+  updateReviewButtons();
+});
+
+showUnknownDeckButton.addEventListener("click", () => {
+  cardsData = getUnknownCards();
+  currentDeck = "unknown";
+  currentActiveCard = 0;
+  createCards();
+  updateReviewButtons();
+});
+
+showKnownDeckButton.addEventListener("click", () => {
+  cardsData = getKnownCards();
+  currentDeck = "known";
+  currentActiveCard = 0;
+  createCards();
+  updateReviewButtons();
 });
 
 // Init
diff --git a/072-memory cards/style.css b/072-memory cards/style.css
index 5467662..bad114f 100644
--- a/072-memory cards/style.css	
+++ b/072-memory cards/style.css	
@@ -71,7 +71,7 @@ h1 button {
   outline: none;
 }
 
-.clear {
+.controls {
   position: absolute;
   bottom: 2rem;
   left: 2rem;
@@ -97,6 +97,7 @@ h1 button {
   opacity: 0;
   transform: translateX(50%) rotateY(-10deg);
   transition: transform 0.4s ease, opacity 0.4s ease;
+  pointer-events: none;
 }
 
 .card.active {
@@ -104,14 +105,32 @@ h1 button {
   opacity: 1;
   z-index: 10;
   transform: translateX(0) rotateY(0deg);
+  pointer-events: auto;
 }
 
+/* Fix Card Navigation */
 .card.left {
-  transform: translateX(-50%) rotateY(10deg);
+  opacity: 0.3;
+  z-index: 2;
+  transform: translateX(-5%) rotateY(3deg) scale(0.98);
 }
 
 .card.right {
-  transform: translateX(50%) rotateY(-10deg);
+  opacity: 0.3;
+  z-index: 2;
+  transform: translateX(5%) rotateY(-3deg) scale(0.98);
+}
+
+.card.far-left {
+  opacity: 0.15;
+  z-index: 1;
+  transform: translateX(-9%) rotateY(5deg) scale(0.95);
+}
+
+.card.far-right {
+  opacity: 0.15;
+  z-index: 1;
+  transform: translateX(9%) rotateY(-5deg) scale(0.95);
 }
 
 .inner-card {
@@ -134,6 +153,8 @@ h1 button {
   background-color: var(--light-color);
   border-radius: 0.625rem;
   position: absolute;
+  padding: 2rem;
+  text-align: center;
   top: 0;
   left: 0;
   display: flex;
@@ -164,6 +185,11 @@ h1 button {
   color: var(--background-color);
 }
 
+/* Implement "Known" and "Unknown" Piles */
+.review-buttons {
+  margin-top: 1rem;
+}
+
 .navigation {
   display: flex;
   margin: 1.25rem 0;
diff --git a/073-lyrics search app/index.html b/073-lyrics search app/index.html
index eb995e1..f1c7e52 100644
--- a/073-lyrics search app/index.html	
+++ b/073-lyrics search app/index.html	
@@ -17,10 +17,14 @@ <h1>Lyrics Search</h1>
         />
         <button>Search</button>
       </form>
+      <!-- Add Search History -->
+      <div id="history" class="container history"></div>
     </header>
-    <div id="result" class="container">
+    <div id="result" class="container result">
       <p>Results will be displayed here</p>
     </div>
+    <!-- Show a Loading Spinner -->
+    <div id="loader" class="loader"></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/073-lyrics search app/script.js b/073-lyrics search app/script.js
index 8ff9206..925259a 100644
--- a/073-lyrics search app/script.js	
+++ b/073-lyrics search app/script.js	
@@ -1,15 +1,39 @@
 const form = document.getElementById("form");
 const search = document.getElementById("search");
 const result = document.getElementById("result");
+const loader = document.getElementById("loader");
+const historyContainer = document.getElementById("history");
 
+let searches = JSON.parse(localStorage.getItem("searches")) || [];
 let lastSearchResults = [];
 const apiURL = "https://lrclib.net/api";
 
+// Show a Loading Spinner
+function showLoader() {
+  loader.style.display = "grid";
+}
+function hideLoader() {
+  loader.style.display = "none";
+}
+
 async function searchSongs(term) {
-  const res = await fetch(`${apiURL}/search?q=${encodeURIComponent(term)}`);
-  const data = await res.json();
-  lastSearchResults = data || [];
-  showData(lastSearchResults);
+  showLoader();
+  try {
+    const res = await fetch(`${apiURL}/search?q=${encodeURIComponent(term)}`);
+    if (!res.ok) throw new Error("Network response was not ok");
+    const data = await res.json();
+    lastSearchResults = Array.isArray(data) ? data : [];
+    showData(lastSearchResults);
+    if (lastSearchResults.length) {
+      saveSearch(term);
+    }
+    // Handle Errors Gracefully
+  } catch (error) {
+    result.innerHTML = "<p>Failed to fetch results. Please try again.</p>";
+    lastSearchResults = [];
+  } finally {
+    hideLoader();
+  }
 }
 
 function showLyricsByIndex(index) {
@@ -19,9 +43,10 @@ function showLyricsByIndex(index) {
     return;
   }
   const lyrics = song.plainLyrics || "No lyrics available.";
+  // Improve Lyric Display
   result.innerHTML = `
     <h2><strong>${song.artistName}</strong> - ${song.trackName}</h2>
-    <span>${lyrics.replace(/(\r\n|\r|\n)/g, "<br>")}</span>
+    <span>${lyrics}</span>
   `;
 }
 
@@ -48,6 +73,33 @@ function showAlert(message) {
   setTimeout(() => notif.remove(), 3000);
 }
 
+// Add Search History
+function saveSearch(term) {
+  searches = Array.from(
+    new Set([term, ...searches.map((term) => term.toLowerCase())])
+  ).slice(0, 5);
+  localStorage.setItem("searches", JSON.stringify(searches));
+  renderHistory();
+}
+
+function renderHistory() {
+  if (!searches.length) {
+    historyContainer.innerHTML = "";
+    return;
+  }
+  historyContainer.innerHTML = `
+    <div><strong>Recent searches:</strong></div>
+    <div>
+      ${searches
+        .map(
+          (term) =>
+            `<button class="btn history-btn" data-term="${term}">${term}</button>`
+        )
+        .join(" ")}
+    </div>
+  `;
+}
+
 // Event Listeners
 form.addEventListener("submit", (e) => {
   e.preventDefault();
@@ -55,6 +107,7 @@ form.addEventListener("submit", (e) => {
   if (!searchTerm) showAlert("Please type in a search term");
   else searchSongs(searchTerm);
 });
+
 result.addEventListener("click", (e) => {
   const clickedElement = e.target;
   if (
@@ -66,5 +119,14 @@ result.addEventListener("click", (e) => {
   }
 });
 
+historyContainer.addEventListener("click", (e) => {
+  if (e.target.classList.contains("history-btn")) {
+    const term = e.target.getAttribute("data-term");
+    search.value = term;
+    searchSongs(term);
+  }
+});
+
 // Init
+renderHistory();
 searchSongs("one");
diff --git a/073-lyrics search app/style.css b/073-lyrics search app/style.css
index ab807bd..8ce147b 100644
--- a/073-lyrics search app/style.css	
+++ b/073-lyrics search app/style.css	
@@ -1,9 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
 
 :root {
-  --main-color: #3B9B76;
-  --secondary-color: #5AB193;
-  --text-color: rgba(255,255,255,0.87);
+  --main-color: #3b9b76;
+  --secondary-color: #5ab193;
+  --ternary-color: #944654;
+  --text-color: rgba(255, 255, 255, 0.87);
 }
 
 * {
@@ -16,8 +17,10 @@ body {
 }
 
 header {
-  background: #040404 url('https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
-  color: rgba(255,255,255,0.95);
+  background: #040404
+    url("https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+    no-repeat center center/cover;
+  color: rgba(255, 255, 255, 0.95);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,13 +30,13 @@ header {
 }
 
 header::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,0.8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 header * {
@@ -60,7 +63,7 @@ form input {
 
 form button {
   background-color: var(--main-color);
-  color: rgba(255,255,255,0.95);
+  color: rgba(255, 255, 255, 0.95);
   position: absolute;
   top: 0.125rem;
   right: 0.125rem;
@@ -82,7 +85,8 @@ button:active {
   transform: scale(0.95);
 }
 
-input:focus, button:focus {
+input:focus,
+button:focus {
   outline: none;
 }
 
@@ -108,6 +112,9 @@ ul.songs li {
   align-items: center;
   justify-content: space-between;
   margin: 0.625rem 0;
+  /* Prevent Button Wrapping */
+  white-space: nowrap;
+  gap: 1rem;
 }
 
 .container {
@@ -144,4 +151,54 @@ ul.songs li {
   font-size: 1rem;
   padding: 0.875rem 2rem;
   margin: 0.5rem;
-}
\ No newline at end of file
+}
+
+/* Improve Lyric Display */
+.result span {
+  white-space: pre-wrap;
+}
+
+/* Show a Loading Spinner */
+.loader {
+  margin: auto;
+  width: 50px;
+  aspect-ratio: 1;
+  display: none;
+  border: 4px solid #0000;
+  border-radius: 50%;
+  border-color: var(--secondary-color) #0000;
+  animation: spinner 1s infinite linear;
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  grid-area: 1/1;
+  margin: 2px;
+  border: inherit;
+  border-radius: 50%;
+}
+
+.loader::before {
+  border-color: var(--ternary-color) #0000;
+  animation: inherit;
+  animation-duration: 0.5s;
+  animation-direction: reverse;
+}
+
+.loader::after {
+  margin: 8px;
+}
+
+/* Add Search History */
+.history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(1turn);
+  }
+}
diff --git a/074-relaxer app/index.html b/074-relaxer app/index.html
index 57e529c..392316b 100644
--- a/074-relaxer app/index.html	
+++ b/074-relaxer app/index.html	
@@ -11,11 +11,24 @@ <h1>Relaxer</h1>
     <div class="container" id="container">
       <div class="circle"></div>
       <p id="text"></p>
-      <div class="pointer-container">
+      <div class="pointer-container" id="pointer-container">
         <span class="pointer"></span>
       </div>
       <div class="gradient-circle"></div>
     </div>
+    <div class="controls">
+      <!-- Add a Start/Stop Button -->
+      <button id="toggle-btn" class="btn">Stop</button>
+      <div>
+        <!-- Make Breathing Presets Selectable -->
+        <select id="preset-select" class="btn">
+          <option value="4-7-8">Deep relaxation</option>
+          <option value="4-4-4">Balance</option>
+          <option value="4-4-6">Stress reduction</option>
+          <option value="6-3-6">Alertness</option>
+        </select>
+      </div>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/074-relaxer app/script.js b/074-relaxer app/script.js
index a17409b..c0e77a6 100644
--- a/074-relaxer app/script.js	
+++ b/074-relaxer app/script.js	
@@ -1,26 +1,116 @@
 const container = document.getElementById("container");
 const text = document.getElementById("text");
+const toggle = document.getElementById("toggle-btn");
+const pointerContainer = document.getElementById("pointer-container");
+const presetSelect = document.getElementById("preset-select");
 
 // The 4-7-8 breathing technique: https://www.medicalnewstoday.com/articles/324417
-const totalTime = 19000;
-const breatheTime = 4000;
-const holdTime = 7000;
+// const totalTime = 19000;
+// const breatheTime = 4000;
+// const holdTime = 7000;
+
+// Make Breathing Presets Selectable
+const presets = {
+  "4-7-8": { breathe: 4000, hold: 7000, exhale: 8000 },
+  "4-4-4": { breathe: 4000, hold: 4000, exhale: 4000 },
+  "4-4-6": { breathe: 4000, hold: 4000, exhale: 6000 },
+  "6-3-6": { breathe: 6000, hold: 3000, exhale: 6000 },
+};
+
+let breatheTime = presets["4-7-8"].breathe;
+let holdTime = presets["4-7-8"].hold;
+let exhaleTime = presets["4-7-8"].exhale;
+let totalTime = breatheTime + holdTime + exhaleTime;
+
+let breathInterval = null;
+let holdTimeout = null;
+let shrinkTimeout = null;
+
+// Synchronize Pointer Animation
+// document.documentElement.style.setProperty(
+//   "--total-time",
+//   `${totalTime / 1000}s`
+// );
+
+function updateTimings(presetKey) {
+  const preset = presets[presetKey];
+  breatheTime = preset.breathe;
+  holdTime = preset.hold;
+  exhaleTime = preset.exhale;
+  totalTime = breatheTime + holdTime + exhaleTime;
+  document.documentElement.style.setProperty(
+    "--total-time",
+    `${totalTime / 1000}s`
+  );
+  updateGradientStops();
+}
+
+// Sync Conic Gradient with Preset Timings
+function updateGradientStops() {
+  const breathePercent = (breatheTime / totalTime) * 100;
+  const holdPercent = (holdTime / totalTime) * 100;
+  const breatheEnd = breathePercent;
+  const holdEnd = breathePercent + holdPercent;
+  document.documentElement.style.setProperty("--breathe-end", `${breatheEnd}%`);
+  document.documentElement.style.setProperty("--hold-end", `${holdEnd}%`);
+}
 
 function breatheAnimation() {
+  // Refactor Animation Durations
+  container.style.setProperty("--grow-duration", `${breatheTime / 1000}s`);
   text.innerText = "Breathe In!";
   container.className = "container grow";
 
-  setTimeout(() => {
+  holdTimeout = setTimeout(() => {
     text.innerText = "Hold";
 
-    setTimeout(() => {
+    shrinkTimeout = setTimeout(() => {
+      container.style.setProperty(
+        "--shrink-duration",
+        // `${(totalTime - breatheTime - holdTime) / 1000}s`
+        `${exhaleTime / 1000}s`
+      );
       text.innerText = "Breathe Out!";
       container.className = "container shrink";
     }, holdTime);
   }, breatheTime);
 }
 
-setInterval(breatheAnimation, totalTime);
+// Add a Start/Stop Button
+function startBreathing() {
+  pointerContainer.classList.remove("paused");
+  pointerContainer.style.animation = "none";
+  void pointerContainer.offsetWidth;
+  pointerContainer.style.animation = "";
+  breatheAnimation();
+  breathInterval = setInterval(breatheAnimation, totalTime);
+}
+
+function stopBreathing() {
+  clearInterval(breathInterval);
+  clearTimeout(holdTimeout);
+  clearTimeout(shrinkTimeout);
+  breathInterval = null;
+  holdTimeout = null;
+  shrinkTimeout = null;
+  pointerContainer.classList.add("paused");
+}
+
+toggle.addEventListener("click", () => {
+  if (breathInterval) {
+    stopBreathing();
+    toggle.textContent = "Start";
+  } else {
+    startBreathing();
+    toggle.textContent = "Stop";
+  }
+});
+
+presetSelect.addEventListener("change", (e) => {
+  stopBreathing();
+  updateTimings(e.target.value);
+  startBreathing();
+});
 
 // Init
-breatheAnimation();
+startBreathing();
diff --git a/074-relaxer app/style.css b/074-relaxer app/style.css
index c1528e9..6b82036 100644
--- a/074-relaxer app/style.css	
+++ b/074-relaxer app/style.css	
@@ -15,7 +15,9 @@
 }
 
 body {
-  background: var(--background-color) url('https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
+  background: var(--background-color)
+    url("https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80")
+    no-repeat center center/cover;
   color: var(--light-color);
   font-family: "Montserrat", sans-serif;
   display: flex;
@@ -57,12 +59,13 @@ h1 {
 }
 
 .gradient-circle {
+  /* Sync Conic Gradient with Preset Timings */
   background: conic-gradient(
     var(--gradient-color-light) 0%,
-    var(--gradient-color-light-border) 21%,
-    var(--light-color) 21%,
-    var(--light-color) 58%,
-    var(--gradient-color-dark-border) 58%,
+    var(--gradient-color-light-border) var(--breathe-end, 21%),
+    var(--light-color) var(--breathe-end, 21%),
+    var(--light-color) var(--hold-end, 58%),
+    var(--gradient-color-dark-border) var(--hold-end, 58%),
     var(--gradient-color-dark) 100%
   );
   width: 320px;
@@ -88,7 +91,8 @@ h1 {
   left: 140px;
   width: 20px;
   height: 190px;
-  animation: rotate 19s linear forwards infinite;
+  /* Synchronize Pointer Animation */
+  animation: rotate var(--total-time, 19s) linear forwards infinite;
   transform-origin: bottom center;
 }
 
@@ -101,8 +105,36 @@ h1 {
   }
 }
 
+.pointer-container.paused {
+  animation-play-state: paused;
+}
+
+/* Make Breathing Presets Selectable */
+.controls {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Add a Start/Stop Button */
+.btn {
+  padding: 10px 20px;
+  background-color: var(--gradient-color-dark);
+  color: var(--light-color);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1rem;
+}
+
 .container.grow {
-  animation: grow 4s linear forwards;
+  /* Refactor Animation Durations */
+  animation: grow var(--grow-duration, 4s) linear forwards;
 }
 
 @keyframes grow {
@@ -115,7 +147,7 @@ h1 {
 }
 
 .container.shrink {
-  animation: shrink 8s linear forwards;
+  animation: shrink var(--shrink-duration, 8s) linear forwards;
 }
 
 @keyframes shrink {
@@ -125,4 +157,4 @@ h1 {
   to {
     transform: scale(1);
   }
-}
\ No newline at end of file
+}
diff --git a/075-breakout game/script.js b/075-breakout game/script.js
index 5df25e0..540382c 100644
--- a/075-breakout game/script.js	
+++ b/075-breakout game/script.js	
@@ -9,9 +9,61 @@ const color = getComputedStyle(document.documentElement).getPropertyValue(
 const secondaryColor = getComputedStyle(
   document.documentElement
 ).getPropertyValue("--sidebar-color");
+
+// Refactor Magic Numbers
+const config = {
+  ballSpeed: 4,
+  ballSize: 10,
+  paddleSpeed: 8,
+  paddleWidth: 80,
+  paddleHeight: 10,
+  brickWidth: 70,
+  brickHeight: 20,
+  brickPadding: 10,
+  brickOffsetX: 45,
+  brickOffsetY: 60,
+  brickRowCount: 9,
+  brickColumnCount: 5,
+  powerUpChance: 0.3, // 30% chance
+  powerUpTypes: ["widen", "slow", "score"],
+  powerUpSize: 12,
+  powerUpFallSpeed: 3,
+  powerUpDuration: 5000,
+};
+
 let score = 0;
-const brickRowCount = 9;
-const brickColumnCount = 5;
+// const brickRowCount = config.brickRowCount;
+// const brickColumnCount = config.brickColumnCount;
+const powerUps = [];
+const levels = [
+  // Level 1: Super Easy
+  {
+    brickRowCount: 2,
+    brickColumnCount: 4,
+    ballSpeed: 2,
+  },
+  // Level 2: Easy
+  {
+    brickRowCount: 4,
+    brickColumnCount: 5,
+    ballSpeed: 3,
+  },
+  // Level 3: Medium
+  {
+    brickRowCount: 6,
+    brickColumnCount: 7,
+    ballSpeed: 4,
+  },
+  // Level 4: Hard
+  {
+    brickRowCount: 8,
+    brickColumnCount: 9,
+    ballSpeed: 5,
+  },
+];
+let currentLevel = 0;
+let paused = false;
+let levelMessage = "";
 
 // Reference: https://stackoverflow.com/questions/34772957/how-to-make-canvas-responsive
 // https://stackoverflow.com/questions/39771732/drawing-to-responsive-canvas-that-is-100-width-and-height
@@ -24,39 +76,39 @@ ctx.canvas.height = ctx.canvas.width * heightRatio;
 const ball = {
   x: canvas.width / 2,
   y: canvas.height / 2,
-  size: 10,
-  speed: 4,
-  dx: 4,
-  dy: -4,
+  size: config.ballSize,
+  speed: config.ballSpeed,
+  dx: config.ballSpeed,
+  dy: -config.ballSpeed,
 };
 
 const paddle = {
-  x: canvas.width / 2 - 40,
-  y: canvas.height - 20,
-  w: 80,
-  h: 10,
-  speed: 8,
+  x: canvas.width / 2 - config.paddleWidth / 2,
+  y: canvas.height - config.paddleHeight - 10,
+  w: config.paddleWidth,
+  h: config.paddleHeight,
+  speed: config.paddleSpeed,
   dx: 0,
 };
 
 const brickInfo = {
-  w: 70,
-  h: 20,
-  padding: 10,
-  offsetX: 45,
-  offsetY: 60,
+  w: config.brickWidth,
+  h: config.brickHeight,
+  padding: config.brickPadding,
+  offsetX: config.brickOffsetX,
+  offsetY: config.brickOffsetY,
   visible: true,
 };
 
 const bricks = [];
-for (let i = 0; i < brickRowCount; i++) {
-  bricks[i] = [];
-  for (let j = 0; j < brickColumnCount; j++) {
-    const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX;
-    const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;
-    bricks[i][j] = { x, y, ...brickInfo };
-  }
-}
+// for (let i = 0; i < brickRowCount; i++) {
+//   bricks[i] = [];
+//   for (let j = 0; j < brickColumnCount; j++) {
+//     const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX;
+//     const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;
+//     bricks[i][j] = { x, y, ...brickInfo };
+//   }
+// }
 
 // Create Elements
 function drawBall() {
@@ -80,6 +132,21 @@ function drawScore() {
   ctx.fillText(`Score: ${score}`, canvas.width - 100, 30);
 }
 
+function drawLevel() {
+  ctx.font = '20px "Balsamiq Sans"';
+  ctx.fillStyle = color;
+  ctx.fillText(`Level: ${currentLevel + 1}`, 20, 30);
+}
+
+function drawLevelMessage() {
+  ctx.save();
+  ctx.font = '40px "Balsamiq Sans"';
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.fillText(levelMessage, canvas.width / 2, canvas.height / 2);
+  ctx.restore();
+}
+
 function drawBricks() {
   bricks.forEach((column) => {
     column.forEach((brick) => {
@@ -99,7 +166,12 @@ function draw() {
   drawBall();
   drawPaddle();
   drawScore();
+  drawLevel();
   drawBricks();
+  generatePowerUps();
+  if (paused && levelMessage) {
+    drawLevelMessage();
+  }
 }
 
 // Animate Elements
@@ -127,6 +199,9 @@ function moveBall() {
     ball.x + ball.size < paddle.x + paddle.w &&
     ball.y + ball.size > paddle.y
   ) {
+    // Fix Ball-Paddle Collision Logic
+    const dist = ball.x - (paddle.x + paddle.w / 2);
+    ball.dx = dist * 0.1;
     ball.dy = -ball.speed;
   }
   // bricks
@@ -141,6 +216,18 @@ function moveBall() {
         ) {
           ball.dy *= -1;
           brick.visible = false;
+          if (Math.random() < config.powerUpChance) {
+            const type =
+              config.powerUpTypes[
+                Math.floor(Math.random() * config.powerUpTypes.length)
+              ];
+            powerUps.push({
+              x: brick.x + brick.w / 2,
+              y: brick.y,
+              type,
+              active: true,
+            });
+          }
           increaseScore();
         }
       }
@@ -155,9 +242,20 @@ function moveBall() {
 
 function increaseScore() {
   score++;
-  if (score % (brickRowCount * brickRowCount) === 0) {
-    // no remainder
-    showAllBricks();
+  const allBricksGone = bricks.flat().every((brick) => !brick.visible);
+  if (allBricksGone) {
+    currentLevel++;
+    if (currentLevel >= levels.length) {
+      // loop back to last level
+      currentLevel = levels.length - 1;
+    }
+    paused = true;
+    levelMessage = `Level ${currentLevel + 1}`;
+    setTimeout(() => {
+      setupLevel(currentLevel);
+      paused = false;
+      levelMessage = "";
+    }, 5000);
   }
 }
 
@@ -167,6 +265,86 @@ function showAllBricks() {
   });
 }
 
+// Add Power-ups
+function applyPowerUp(type) {
+  if (type === "widen") {
+    paddle.w = 140;
+    setTimeout(() => (paddle.w = config.paddleWidth), config.powerUpDuration);
+  } else if (type === "slow") {
+    ball.speed = 2;
+    ball.dx = Math.sign(ball.dx) * ball.speed;
+    ball.dy = Math.sign(ball.dy) * ball.speed;
+    setTimeout(() => {
+      ball.speed = config.ballSpeed;
+      ball.dx = Math.sign(ball.dx) * ball.speed;
+      ball.dy = Math.sign(ball.dy) * ball.speed;
+    }, config.powerUpDuration);
+  } else if (type === "score") {
+    score += 5;
+  }
+}
+
+function generatePowerUps() {
+  powerUps.forEach((powerUp) => {
+    if (!powerUp.active) return;
+    powerUp.y += config.powerUpFallSpeed;
+    // Draw power-up
+    ctx.beginPath();
+    ctx.arc(powerUp.x, powerUp.y, config.powerUpSize, 0, Math.PI * 2);
+    ctx.fillStyle =
+      powerUp.type === "widen"
+        ? "#91eae4"
+        : powerUp.type === "slow"
+        ? "#86a8e7"
+        : "#DBB957";
+    ctx.fill();
+    ctx.closePath();
+    // Paddle collision
+    if (
+      powerUp.y + config.powerUpSize > paddle.y &&
+      powerUp.x > paddle.x &&
+      powerUp.x < paddle.x + paddle.w
+    ) {
+      applyPowerUp(powerUp.type);
+      powerUp.active = false;
+    }
+    // Remove if off screen
+    if (powerUp.y > canvas.height) powerUp.active = false;
+  });
+}
+
+// Implement Game Levels
+function setupLevel(levelIndex) {
+  const level = levels[levelIndex];
+  config.brickRowCount = level.brickRowCount;
+  config.brickColumnCount = level.brickColumnCount;
+  ball.speed = level.ballSpeed;
+  ball.dx = level.ballSpeed;
+  ball.dy = -level.ballSpeed;
+  // Reset paddle
+  paddle.x = canvas.width / 2 - config.paddleWidth / 2;
+  paddle.y = canvas.height - config.paddleHeight - 10;
+  paddle.w = config.paddleWidth;
+  // Reset ball
+  ball.x = canvas.width / 2;
+  ball.y = canvas.height / 2;
+  // Center bricks horizontally
+  const totalBricksWidth =
+    config.brickColumnCount * config.brickWidth +
+    (config.brickColumnCount - 1) * config.brickPadding;
+  const centeredOffsetX = (canvas.width - totalBricksWidth) / 2;
+  // Rebuild bricks
+  bricks.length = 0;
+  for (let i = 0; i < config.brickRowCount; i++) {
+    bricks[i] = [];
+    for (let j = 0; j < config.brickColumnCount; j++) {
+      const x = j * (brickInfo.w + brickInfo.padding) + centeredOffsetX;
+      const y = i * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;
+      bricks[i][j] = { x, y, w: brickInfo.w, h: brickInfo.h, visible: true };
+    }
+  }
+}
+
 // Handle Key Events
 function keyDown(e) {
   if (e.key === "Right" || e.key === "ArrowRight") paddle.dx = paddle.speed;
@@ -187,8 +365,10 @@ function keyUp(e) {
 // Update Canvas
 function update() {
   // update
-  movePaddle();
-  moveBall();
+  if (!paused) {
+    movePaddle();
+    moveBall();
+  }
   // draw
   draw();
   requestAnimationFrame(update);
@@ -201,4 +381,5 @@ rulesButton.addEventListener("click", () => rules.classList.add("show"));
 closeButton.addEventListener("click", () => rules.classList.remove("show"));
 
 // Init
+setupLevel(0);
 update();
diff --git a/076-new year countdown/index.html b/076-new year countdown/index.html
index 8cd02e5..2209812 100644
--- a/076-new year countdown/index.html	
+++ b/076-new year countdown/index.html	
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="year" class="year"></div>
-    <h1>New Year Countdown</h1>
+    <h1 id="heading">New Year Countdown</h1>
     <div id="countdown" class="countdown">
       <div class="time">
         <h2 id="days">00</h2>
@@ -33,6 +33,9 @@ <h2 id="seconds">00</h2>
       id="loading"
       class="loading"
     />
+    <!-- Allow Custom Countdown Dates -->
+    <input type="datetime-local" id="custom-date" class="custom-date" />
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/076-new year countdown/script.js b/076-new year countdown/script.js
index 43b9146..0ac9ea1 100644
--- a/076-new year countdown/script.js	
+++ b/076-new year countdown/script.js	
@@ -5,13 +5,75 @@ const seconds = document.getElementById("seconds");
 const countdown = document.getElementById("countdown");
 const year = document.getElementById("year");
 const loading = document.getElementById("loading");
+const customDateInput = document.getElementById("custom-date");
+const heading = document.getElementById("heading");
 
 const nextYear = new Date().getFullYear() + 1;
-const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
+let newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
+// const newYearTime = new Date(`July 26 2025 00:00:00`);
+let isCustomDate = false;
+
+// Fix Countdown End State
+// function showHappyNewYear() {
+//   countdown.style.display = "none";
+//   const label = "🎉 Happy New Year! 🎉";
+//   heading.innerText = document.title = label;
+// }
+
+function confettiAnimation() {
+  confetti({
+    particleCount: 200,
+    spread: 120,
+    origin: { y: 0.6 },
+    startVelocity: 45,
+    colors: [
+      "#ff0a54",
+      "#ff477e",
+      "#ff7096",
+      "#ff85a1",
+      "#fbb1b1",
+      "#f9bec7",
+      "#f7cad0",
+      "#b5ead7",
+      "#caffbf",
+    ],
+    shapes: ["circle", "square"],
+    scalar: 1.2,
+  });
+  setTimeout(() => {
+    confetti({
+      particleCount: 100,
+      spread: 180,
+      origin: { y: 0.4 },
+      startVelocity: 60,
+      colors: ["#00b4d8", "#48cae4", "#90e0ef", "#ade8f4", "#caf0f8"],
+      shapes: ["star"],
+      scalar: 1.5,
+    });
+  }, 400);
+}
+
+function showEndState() {
+  // Add Confetti Animation on Finish
+  confettiAnimation();
+  countdown.style.display = "none";
+  const label = isCustomDate
+    ? "🎉 Countdown Complete! 🎉"
+    : "🎉 Happy New Year! 🎉";
+  heading.innerText = document.title = label;
+}
 
 function updateCountdown() {
   const currentTime = new Date();
   const difference = newYearTime - currentTime;
+  // Make the Year Dynamic
+  year.innerText = newYearTime.getFullYear();
+  if (difference <= 0) {
+    clearInterval(intervalId);
+    // showHappyNewYear();
+    showEndState();
+    return;
+  }
   const currentDays = Math.floor(difference / 1000 / 60 / 60 / 24);
   const currentHours = Math.floor(difference / 1000 / 60 / 60) % 24;
   const currentMinutes = Math.floor(difference / 1000 / 60) % 60;
@@ -29,6 +91,20 @@ setTimeout(() => {
   countdown.style.display = "flex";
 }, 1000);
 
-setInterval(updateCountdown, 1000);
+const intervalId = setInterval(updateCountdown, 1000);
 
 year.innerText = nextYear;
+
+// Allow Custom Countdown Dates
+customDateInput.addEventListener("change", (e) => {
+  const selectedDate = new Date(e.target.value);
+  if (!isNaN(selectedDate)) {
+    isCustomDate = true;
+    newYearTime = selectedDate;
+    const label = `Countdown to ${selectedDate.toLocaleString("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    })}`;
+    heading.innerText = document.title = label;
+  }
+});
diff --git a/076-new year countdown/style.css b/076-new year countdown/style.css
index 9549d83..dd1f3cd 100644
--- a/076-new year countdown/style.css	
+++ b/076-new year countdown/style.css	
@@ -1,12 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap");
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  background: #0b3747 url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
-  color: rgba(255,255,255,0.87);
+  background: #0b3747
+    url("https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+    no-repeat center center/cover;
+  color: rgba(255, 255, 255, 0.87);
   font-family: "PT Sans Narrow", sans-serif;
   display: flex;
   flex-direction: column;
@@ -19,8 +21,8 @@ body {
 }
 
 body::after {
-  content: '';
-  background-color: rgba(0,0,0,0.5);
+  content: "";
+  background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
   left: 0;
@@ -71,6 +73,20 @@ h1 {
   padding: 0;
 }
 
+/* Allow Custom Countdown Dates */
+.custom-date {
+  position: absolute;
+  bottom: 1rem;
+  margin: 1rem;
+  padding: 0.5rem;
+  font-family: inherit;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
 @media (min-width: 640px) {
   h1 {
     font-size: 3.5rem;
@@ -85,4 +101,4 @@ h1 {
   .time p {
     font-size: 1rem;
   }
-}
\ No newline at end of file
+}
diff --git a/077-sortable list/index.html b/077-sortable list/index.html
index 045728c..771f22d 100644
--- a/077-sortable list/index.html	
+++ b/077-sortable list/index.html	
@@ -18,9 +18,13 @@
     <h1>Top 10 Richest People</h1>
     <p>Drag and drop the entries into their corresponding spots</p>
     <ul class="draggable-list" id="draggable-list"></ul>
-    <button id="check" class="check-btn">
-      Check Order <i class="fas fa-paper-plane"></i>
-    </button>
+    <div class="controls">
+      <button id="check" class="btn">
+        Check Order <i class="fas fa-paper-plane"></i>
+      </button>
+      <!-- Add a Reset Button -->
+      <button id="reset" class="btn">Reset <i class="fas fa-redo"></i></button>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/077-sortable list/script.js b/077-sortable list/script.js
index 243913c..596a671 100644
--- a/077-sortable list/script.js	
+++ b/077-sortable list/script.js	
@@ -1,5 +1,6 @@
 const draggableList = document.getElementById("draggable-list");
 const check = document.getElementById("check");
+const reset = document.getElementById("reset");
 
 const richestPeople = [
   "Elon Musk",
@@ -27,6 +28,7 @@ function createList() {
     .forEach((person, index) => {
       const listItem = document.createElement("li");
       listItem.setAttribute("data-index", index);
+      listItem.setAttribute("tabindex", "0");
       listItem.innerHTML = `
         <span class="number">${index + 1}</span>
         <div class="draggable" draggable="true">
@@ -40,6 +42,13 @@ function createList() {
   addListeners();
 }
 
+// Add a Reset Button
+function resetList() {
+  draggableList.innerHTML = "";
+  listItems.length = 0;
+  createList();
+}
+
 function dragStart() {
   dragStartIndex = +this.closest("li").getAttribute("data-index");
 }
@@ -62,23 +71,62 @@ function dragDrop() {
   this.classList.remove("over");
 }
 
+// Animate Item Swaps
+function animateSwap(element, deltaY) {
+  element.animate(
+    [{ transform: `translateY(${deltaY}px)` }, { transform: "translateY(0)" }],
+    {
+      duration: 300,
+      easing: "cubic-bezier(0,0,0.32,1)",
+    }
+  );
+}
+
 function swapItems(fromIndex, toIndex) {
   // Get Items
   const itemOne = listItems[fromIndex].querySelector(".draggable");
   const itemTwo = listItems[toIndex].querySelector(".draggable");
+  // FLIP: First
+  const rectOne = itemOne.getBoundingClientRect();
+  const rectTwo = itemTwo.getBoundingClientRect();
   // Swap Items
   listItems[fromIndex].appendChild(itemTwo);
   listItems[toIndex].appendChild(itemOne);
+  // FLIP: Last
+  const newRectOne = itemOne.getBoundingClientRect();
+  const newRectTwo = itemTwo.getBoundingClientRect();
+  // Calculate the translation
+  const deltaOneY = rectOne.top - newRectOne.top;
+  const deltaTwoY = rectTwo.top - newRectTwo.top;
+  // Animate itemOne
+  animateSwap(itemOne, deltaOneY);
+  // Animate itemTwo
+  animateSwap(itemTwo, deltaTwoY);
+}
+
+// Improve Accessibility with Keyboard Support
+function handleKeyDown(e) {
+  if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+    e.preventDefault();
+    const fromIndex = +this.getAttribute("data-index");
+    let toIndex = fromIndex;
+    if (e.key === "ArrowUp" && fromIndex > 0) toIndex = fromIndex - 1;
+    if (e.key === "ArrowDown" && fromIndex < listItems.length - 1)
+      toIndex = fromIndex + 1;
+    if (toIndex !== fromIndex) {
+      swapItems(fromIndex, toIndex);
+      listItems[toIndex].focus();
+    }
+  }
 }
 
 function checkOrder() {
   listItems.forEach((listItem, index) => {
     const personName = listItem.querySelector(".draggable").innerText.trim();
+    // Refactor checkOrder for Efficiency
+    listItem.classList.remove("right", "wrong");
     if (personName !== richestPeople[index]) listItem.classList.add("wrong");
-    else {
-      listItem.classList.remove("wrong");
-      listItem.classList.add("right");
-    }
+    else listItem.classList.add("right");
   });
 }
 
@@ -94,10 +142,12 @@ function addListeners() {
     item.addEventListener("drop", dragDrop);
     item.addEventListener("dragenter", dragEnter);
     item.addEventListener("dragleave", dragLeave);
+    item.addEventListener("keydown", handleKeyDown);
   });
 }
 
 check.addEventListener("click", checkOrder);
+reset.addEventListener("click", resetList);
 
 // Init
 createList();
diff --git a/077-sortable list/style.css b/077-sortable list/style.css
index cadc838..3304436 100644
--- a/077-sortable list/style.css	
+++ b/077-sortable list/style.css	
@@ -77,7 +77,13 @@ body {
   flex: 1;
 }
 
-.check-btn {
+/* Add a Reset Button */
+.controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn {
   background-color: var(--background-secondary-color);
   border: none;
   color: var(--text-color);
@@ -86,15 +92,15 @@ body {
   cursor: pointer;
 }
 
-.check-btn:active {
+.btn:active {
   transform: scale(0.98);
 }
 
-.check-btn:hover {
+.btn:hover {
   background-color: var(--text-color);
   color: var(--background-color);
 }
 
-.check-btn:focus {
+.btn:focus {
   outline: none;
 }
diff --git a/078-speak number guessing game/index.html b/078-speak number guessing game/index.html
index b0e4f6e..4271b75 100644
--- a/078-speak number guessing game/index.html	
+++ b/078-speak number guessing game/index.html	
@@ -9,13 +9,7 @@
     <title>Speak Number Guess</title>
   </head>
   <body>
-    <img
-      src="https://i.ibb.co/Kb6SkTm/8399350-mic-microphone-audio-icon.png"
-      alt="Speak"
-    />
-    <h1>Guess a Number Between 1 - 100</h1>
-    <h2>Speak the number into your microphone</h2>
-    <div id="msg" class="msg"></div>
+    <!-- Refactor Game Over Logic -->
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js
index db2f562..1ffa7ac 100644
--- a/078-speak number guessing game/script.js	
+++ b/078-speak number guessing game/script.js	
@@ -6,9 +6,10 @@ if (!SpeechRecognition) {
     <p>Please use Chrome or Edge for the best experience.</p>
   `;
 } else {
-  const messageElement = document.getElementById("msg");
-
-  const randomNumber = getRandomNumber();
+  let messageElement;
+  let randomNumber;
+  let shouldRestartRecognition = true;
+  let guesses = [];
   let recognition = new SpeechRecognition();
   recognition.lang = "en-US";
   recognition.start();
@@ -18,7 +19,8 @@ if (!SpeechRecognition) {
   }
 
   function onSpeak(event) {
-    const message = event.results[0][0].transcript;
+    let message = event.results[0][0].transcript;
+    message = message.replace(/[.,;:!?]+$/, "");
     writeMessage(message);
     checkNumber(message);
   }
@@ -32,32 +34,108 @@ if (!SpeechRecognition) {
 
   function checkNumber(message) {
     const number = +message;
+    let feedback = "";
     if (Number.isNaN(number)) {
-      messageElement.innerHTML += "<div>That is not a valid number</div>";
+      feedback = "That is not a valid number";
+    } else if (number > 100 || number < 1) {
+      feedback = "Number must be between 1 and 100";
+    } else if (number === randomNumber) {
+      feedback = `Congrats! You have guessed the number! It was ${number}`;
+      shouldRestartRecognition = false;
+      recognition.stop();
+      document.body.innerHTML = `
+      <h2>${feedback}</h2>
+      <button class="play-again" id="play-again">Play Again</button>
+    `;
+      speak(feedback);
+      renderGuesses();
+      document
+        .getElementById("play-again")
+        .addEventListener("click", setupGame);
       return;
+    } else if (number > randomNumber || number < randomNumber) {
+      guesses.unshift(number);
+      renderGuesses();
+      feedback = number > randomNumber ? "GO LOWER" : "GO HIGHER";
     }
-    if (number > 100 || number < 1) {
-      messageElement.innerHTML += "<div>Number must be between 1 and 100</div>";
-      return;
+
+    if (feedback) {
+      messageElement.innerHTML += `<div>${feedback}</div>`;
+      speak(feedback);
     }
-    if (number === randomNumber) {
-      document.body.innerHTML = `
-          <h2>Congrats! You have guessed the number! <br><br>
-          It was ${number}</h2>
-          <button class="play-again" id="play-again">Play Again</button>
-        `;
-    } else if (number > randomNumber) {
-      messageElement.innerHTML += "<div>GO LOWER</div>";
-    } else {
-      messageElement.innerHTML += "<div>GO HIGHER</div>";
+  }
+
+  // Add Speech Synthesis Feedback
+  function speak(text) {
+    speechSynthesis.cancel();
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = "en-US";
+    speechSynthesis.speak(utterance);
+  }
+
+  // Refactor Game Over Logic
+  function setupGame() {
+    recognition.stop();
+    shouldRestartRecognition = true;
+    document.body.innerHTML = `
+    <img
+      src="https://i.ibb.co/Kb6SkTm/8399350-mic-microphone-audio-icon.png"
+      alt="Speak"
+    />
+    <h1>Guess a Number Between 1 - 100</h1>
+    <h2>Speak the number into your microphone</h2>
+    <div id="msg" class="msg"></div>
+     <div id="history" class="msg"></div>
+  `;
+    messageElement = document.getElementById("msg");
+    randomNumber = getRandomNumber();
+    recognition.start();
+    guesses = [];
+    renderGuesses();
+  }
+
+  // Implement a Guess History
+  function renderGuesses() {
+    const historyDiv = document.getElementById("history");
+    if (!historyDiv) return;
+    historyDiv.innerHTML =
+      guesses.length === 0
+        ? "<div>No guesses yet.</div>"
+        : `<div>Previous guesses: ${guesses.join(", ")}</div>`;
+  }
+
+  // Handle Recognition Errors
+  function handleRecognitionError(e) {
+    if (!messageElement) return;
+    let errorMsg;
+    switch (e.error) {
+      case "no-speech":
+        errorMsg =
+          "No speech detected. Please try speaking clearly into your microphone.";
+        break;
+      case "audio-capture":
+        errorMsg =
+          "No microphone found. Please check your microphone connection.";
+        shouldRestartRecognition = false;
+        break;
+      case "not-allowed":
+        errorMsg =
+          "Microphone access was denied. Please allow access and try again.";
+        shouldRestartRecognition = false;
+        break;
+      default:
+        errorMsg = `Error: ${e.error}`;
     }
+    messageElement.innerHTML = `<div>${errorMsg}</div>`;
+    speak(errorMsg);
   }
 
   // Event Listeners
   recognition.addEventListener("result", onSpeak);
-  recognition.addEventListener("end", () => recognition.start());
-
-  document.body.addEventListener("click", (e) => {
-    if (e.target.id == "play-again") history.go(0);
+  recognition.addEventListener("end", () => {
+    if (shouldRestartRecognition) recognition.start();
   });
+  recognition.addEventListener("error", handleRecognitionError);
+
+  setupGame();
 }
diff --git a/079-creative agency website/index.html b/079-creative agency website/index.html
index 44b8856..312d136 100644
--- a/079-creative agency website/index.html	
+++ b/079-creative agency website/index.html	
@@ -12,7 +12,12 @@
   <body>
     <header>
       <div class="logo"><h1>Creative Agency</h1></div>
-      <div class="toggle"></div>
+      <!-- Improve Menu Accessibility -->
+      <button
+        class="toggle"
+        aria-label="Open menu"
+        aria-expanded="false"
+      ></button>
       <div class="navigation">
         <ul>
           <li><a href="#home">Home</a></li>
@@ -80,7 +85,8 @@ <h2>
       </div>
     </section>
     <!-- services -->
-    <section id="services">
+    <!-- Animate Elements on Scroll -->
+    <section class="hidden" id="services">
       <div class="title">
         <h2>Services that we can help you with</h2>
         <p>
@@ -174,7 +180,7 @@ <h3>Error Fixing</h3>
       </div>
     </section>
     <!-- work -->
-    <section id="work">
+    <section class="hidden" id="work">
       <div class="title">
         <h1>Some of our finest work</h1>
         <p>
@@ -334,7 +340,7 @@ <h1>Some of our finest work</h1>
       </div>
     </section>
     <!-- contact -->
-    <section id="contact">
+    <section class="hidden" id="contact">
       <div class="title">
         <h2>Contact us</h2>
         <p>
@@ -344,31 +350,34 @@ <h2>Contact us</h2>
         </p>
       </div>
       <div class="contact">
-        <div class="contact-form">
+        <!-- Refactor CSS with BEM -->
+        <div class="contact-form__container">
+          <!-- Add Contact Form Validation -->
+          <!-- <form novalidate> -->
           <form>
-            <div class="row">
-              <div class="input50">
-                <input type="text" placeholder="First Name" />
+            <div class="contact-form__row">
+              <div class="contact-form__input--50">
+                <input type="text" placeholder="First Name" required />
               </div>
-              <div class="input50">
-                <input type="text" placeholder="Last Name" />
+              <div class="contact-form__input--50">
+                <input type="text" placeholder="Last Name" required />
               </div>
             </div>
-            <div class="row">
-              <div class="input50">
-                <input type="text" placeholder="Email" />
+            <div class="contact-form__row">
+              <div class="contact-form__input--50">
+                <input type="email" placeholder="Email" required />
               </div>
-              <div class="input50">
-                <input type="text" placeholder="Subject" />
+              <div class="contact-form__input--50">
+                <input type="text" placeholder="Subject" required />
               </div>
             </div>
-            <div class="row">
-              <div class="input100">
-                <textarea placeholder="Message"></textarea>
+            <div class="contact-form__row">
+              <div class="contact-form__input--100">
+                <textarea placeholder="Message" required></textarea>
               </div>
             </div>
-            <div class="row">
-              <div class="input100">
+            <div class="contact-form__row">
+              <div class="contact-form__input--100">
                 <input type="submit" value="Send" />
               </div>
             </div>
diff --git a/079-creative agency website/script.js b/079-creative agency website/script.js
index f86ed54..90c70b0 100644
--- a/079-creative agency website/script.js	
+++ b/079-creative agency website/script.js	
@@ -1,12 +1,63 @@
 const toggleButton = document.querySelector(".toggle");
 const navigation = document.querySelector(".navigation");
+const hiddenSections = document.querySelectorAll("section.hidden");
+const contactForm = document.querySelector(".contact-form__container form");
+
+// Improve Menu Accessibility
+function updateMenuAria() {
+  const isActive = navigation.classList.contains("active");
+  toggleButton.setAttribute("aria-expanded", isActive);
+  toggleButton.setAttribute(
+    "aria-label",
+    isActive ? "Close menu" : "Open menu"
+  );
+}
+
+// Add Contact Form Validation
+function validateContactForm(form) {
+  let valid = true;
+  const fields = form.querySelectorAll("input[required], textarea[required]");
+  fields.forEach((field) => {
+    field.classList.remove("contact-form__input--invalid");
+    if (
+      !field.value.trim() ||
+      (field.type === "email" && !field.checkValidity())
+    ) {
+      field.classList.add("contact-form__input--invalid");
+      valid = false;
+    }
+  });
+  return valid;
+}
 
 toggleButton.addEventListener("click", () => {
   toggleButton.classList.toggle("active");
   navigation.classList.toggle("active");
+  updateMenuAria();
 });
 
 navigation.addEventListener("click", () => {
   toggleButton.classList.toggle("active");
   navigation.classList.toggle("active");
+  updateMenuAria();
+});
+
+// Animate Elements on Scroll
+const observer = new IntersectionObserver((entries, obs) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target.classList.remove("hidden");
+      obs.unobserve(entry.target);
+    }
+  });
+});
+
+hiddenSections.forEach((section) => {
+  observer.observe(section);
+});
+
+contactForm.addEventListener("submit", function (e) {
+  if (!validateContactForm(contactForm)) {
+    e.preventDefault();
+  }
 });
diff --git a/079-creative agency website/style.css b/079-creative agency website/style.css
index 9c798a7..5af687b 100644
--- a/079-creative agency website/style.css	
+++ b/079-creative agency website/style.css	
@@ -62,6 +62,12 @@ body {
   background-repeat: no-repeat;
   background-size: 30px;
   z-index: 20;
+  border: none;
+}
+
+/* Improve Menu Accessibility */
+.toggle:focus {
+  outline: 2px solid var(--secondary-color);
 }
 
 .toggle.active {
@@ -140,6 +146,12 @@ section {
   align-items: center;
   padding: 100px 40px;
   margin-top: 60px;
+  /* Animate Elements on Scroll */
+  transition: opacity 1s ease-in-out;
+}
+
+section.hidden {
+  opacity: 0;
 }
 
 h2 {
@@ -268,31 +280,32 @@ section.home {
   flex-direction: column;
 }
 
-.contact-form {
+/* Refactor CSS with BEM */
+.contact-form__container {
   position: relative;
   background-color: #f9f9f9;
   width: 100%;
   padding: 30px 30px 20px;
 }
 
-.contact-form form {
+.contact-form__container form {
   width: 100%;
 }
 
-.contact-form .row {
+.contact-form__row {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.contact-form .input50,
-.contact-form .input100 {
+.contact-form__input--50,
+.contact-form__input--100 {
   width: 100%;
   margin: 0;
 }
 
-.contact-form .row input,
-.contact-form .row textarea {
+.contact-form__row input,
+.contact-form__row textarea {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.2);
   color: #111;
@@ -307,11 +320,11 @@ section.home {
   resize: none;
 }
 
-.contact-form .row textarea {
+.contact-form__row textarea {
   height: 150px;
 }
 
-.contact-form .row input[type="submit"] {
+.contact-form__row input[type="submit"] {
   background-color: var(--secondary-color);
   color: #fff;
   margin: 0;
@@ -322,6 +335,13 @@ section.home {
   cursor: pointer;
 }
 
+/* Add Contact Form Validation */
+.contact-form__row input.contact-form__input--invalid,
+.contact-form__row textarea.contact-form__input--invalid {
+  border-color: var(--main-color);
+  background: #fff0f0;
+}
+
 .contact-info {
   width: 100%;
   margin-top: 20px;
@@ -398,21 +418,21 @@ section.home {
     flex-direction: row;
   }
 
-  .contact-form {
+  .contact-form__container {
     width: calc(100% - 400px);
     padding: 60px 40px 20px;
   }
 
-  .contact-form .row {
+  .contact-form__row {
     flex-direction: row;
   }
 
-  .contact-form .input50 {
+  .contact-form__input--50 {
     width: 50%;
     margin: 0 10px;
   }
 
-  .contact-form .input100 {
+  .contact-form__input--100 {
     margin: 0 10px;
   }
 
diff --git a/080-health dashboard/index.html b/080-health dashboard/index.html
index 5fb43a3..db45629 100644
--- a/080-health dashboard/index.html	
+++ b/080-health dashboard/index.html	
@@ -17,55 +17,65 @@
   </head>
   <body>
     <div class="container">
-      <div class="bg1">
+      <!-- Refactor Spanning Logic with nth-child -->
+      <!-- Make the Dashboard Interactive -->
+      <div class="bg1 grid-col-span-2" data-metric="goals">
         <h2>16 <span>| 24</span></h2>
         <p>Goals Completed</p>
       </div>
-      <div class="bg1">
+      <div class="bg1" data-metric="respiration">
         <h2><i class="fas fa-battery-three-quarters"></i></h2>
         <p>Respiration</p>
       </div>
 
-      <div class="bg2">
+      <div class="bg2" data-metric="miles">
         <h2><i class="fas fa-running"></i></h2>
         <p>Miles</p>
       </div>
-      <div class="bg1">
+      <div class="bg1" data-metric="temperature">
         <h2>37 &deg;C</h2>
         <p>Temperature</p>
       </div>
-      <div class="bg1">
+      <div class="bg1" data-metric="sleep">
         <h2><i class="fas fa-bed"></i></h2>
         <p>Sleep Keep</p>
       </div>
-      <div class="bg2">
+      <div class="bg2 grid-col-span-2" data-metric="heartrate">
         <h2>75 <span>bpm</span></h2>
         <p>Heart Rate</p>
       </div>
-      <div class="bg1">
+      <div class="bg1" data-metric="weight">
         <h2>170 <span>lbs</span></h2>
         <p>Weight</p>
       </div>
-      <div class="bg1">
+      <div class="bg1" data-metric="fat">
         <h2>24 <span>%</span></h2>
         <p>Fat Percentage</p>
       </div>
-      <div class="bg2">
+      <div class="bg2 grid-col-span-2" data-metric="glucose">
         <h2>90 <span>mgdl</span></h2>
         <p>Blood Glucose</p>
       </div>
-      <div class="bg2">
+      <div class="bg2 grid-col-span-2" data-metric="avg">
         <h2>2080 <span>kcal</span></h2>
         <p>AVG Consumption</p>
       </div>
-      <div class="bg2">
+      <div class="bg2" data-metric="workouts">
         <h2><i class="fas fa-dumbbell"></i></h2>
         <p>Workouts</p>
       </div>
-      <div class="bg2">
+      <div class="bg2" data-metric="hydration">
         <h2>61 <span>%</span></h2>
         <p>Body Hydration</p>
       </div>
     </div>
+    <dialog id="dashboard-modal">
+      <div class="modal">
+        <h3 id="modal-title"></h3>
+        <ul id="modal-list"></ul>
+        <button id="close-modal">Close</button>
+      </div>
+    </dialog>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/080-health dashboard/script.js b/080-health dashboard/script.js
new file mode 100644
index 0000000..3e56a42
--- /dev/null
+++ b/080-health dashboard/script.js	
@@ -0,0 +1,89 @@
+const cards = document.querySelectorAll(".container > div");
+const modal = document.getElementById("dashboard-modal");
+const modalTitle = document.getElementById("modal-title");
+const modalList = document.getElementById("modal-list");
+const closeModalButton = document.getElementById("close-modal");
+
+// Make the Dashboard Interactive
+const modalContent = {
+  goals: {
+    title: '<i class="fas fa-bullseye"></i> Goals Completed',
+    items: [
+      "Drink 2L water",
+      "Run 5 miles",
+      "Sleep 8 hours",
+      "Eat 5 servings of veggies",
+    ],
+  },
+  respiration: {
+    title: '<i class="fas fa-battery-three-quarters"></i> Respiration',
+    items: [
+      "Current: 16 breaths/min",
+      "Normal range: 12-20 breaths/min",
+      "Last check: Today",
+    ],
+  },
+  miles: {
+    title: '<i class="fas fa-running"></i> Recent Miles',
+    items: ["Monday: 3 miles", "Wednesday: 2 miles", "Friday: 4 miles"],
+  },
+  temperature: {
+    title: '<i class="fas fa-thermometer-half"></i> Temperature',
+    items: ["Current: 37°C", "Normal range: 36-37°C", "Last check: Today"],
+  },
+  sleep: {
+    title: '<i class="fas fa-bed"></i> Sleep Keep',
+    items: ["Last night: 7h 45m", "Goal: 8h", "Sleep quality: Good"],
+  },
+  heartrate: {
+    title: '<i class="fas fa-heartbeat"></i> Heart Rate',
+    items: ["Current: 75 bpm", "Resting: 68 bpm", "Peak: 120 bpm"],
+  },
+  weight: {
+    title: '<i class="fas fa-weight"></i> Weight',
+    items: ["Current: 170 lbs", "Goal: 165 lbs", "Last check: Yesterday"],
+  },
+  fat: {
+    title: '<i class="fas fa-percentage"></i> Fat Percentage',
+    items: ["Current: 18%", "Target: 15%", "Last check: Yesterday"],
+  },
+  glucose: {
+    title: '<i class="fas fa-vial"></i> Blood Glucose',
+    items: ["Current: 90 mg/dl", "Range: 70-110 mg/dl", "Last check: Today"],
+  },
+  avg: {
+    title: '<i class="fas fa-utensils"></i> AVG Consumption',
+    items: ["Calories: 2080 kcal", "Protein: 120g", "Carbs: 250g", "Fat: 70g"],
+  },
+  workouts: {
+    title: '<i class="fas fa-dumbbell"></i> Recent Workouts',
+    items: ["Push-ups - 20 reps", "Running - 3 miles", "Yoga - 30 min"],
+  },
+  hydration: {
+    title: '<i class="fas fa-tint"></i> Body Hydration',
+    items: ["Current: 61%", "Target: 65%", "Tip: Drink more water!"],
+  },
+};
+
+cards.forEach((card) => {
+  card.addEventListener("click", () => {
+    const metric = card.dataset.metric;
+    if (!metric || !modalContent[metric]) return;
+
+    modalTitle.innerHTML = modalContent[metric].title;
+    modalList.innerHTML = modalContent[metric].items
+      .map((item) => `<li>${item}</li>`)
+      .join("");
+    modal.showModal();
+  });
+});
+
+closeModalButton.addEventListener("click", () => {
+  modal.close();
+});
+
+modal.addEventListener("click", (e) => {
+  if (e.target === modal) {
+    modal.close();
+  }
+});
diff --git a/080-health dashboard/style.css b/080-health dashboard/style.css
index a38f358..dc84cea 100644
--- a/080-health dashboard/style.css	
+++ b/080-health dashboard/style.css	
@@ -4,6 +4,16 @@
   --main-color: #42515c;
   --text-color: #ecebf4;
   --dark-text-color: #293842;
+  /* Improve Readability with CSS Custom Properties */
+  --shadow-color-dark: var(--main-color);
+  --shadow-color-light: rgba(255, 255, 255, 0.4);
+  --modal-backdrop-color: rgba(40, 50, 60, 0.55);
+  --modal-shadow-color: rgba(0, 0, 0, 0.25);
+  --metric-bg-color: rgba(255, 255, 255, 0.08);
+  --metric-shadow-color: rgba(0, 0, 0, 0.08);
+  --metric-text-color: var(--text-color);
+  --base-delay: 0.1s;
+  --border-radius: 12px;
 }
 
 * {
@@ -50,6 +60,10 @@ p {
   align-items: center;
   text-align: center;
   transition: all 0.5s ease-out;
+  /* Add a Loading Animation to Grid Items */
+  opacity: 0;
+  animation: fadeSlideIn 0.7s ease forwards;
+  animation-delay: calc(var(--i) * var(--base-delay));
 }
 
 .container > div:hover {
@@ -57,24 +71,144 @@ p {
   transform: scale(0.98);
 }
 
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.container > div:nth-child(1) {
+  --i: 1;
+}
+.container > div:nth-child(2) {
+  --i: 2;
+}
+.container > div:nth-child(3) {
+  --i: 3;
+}
+.container > div:nth-child(4) {
+  --i: 4;
+}
+.container > div:nth-child(5) {
+  --i: 5;
+}
+.container > div:nth-child(6) {
+  --i: 6;
+}
+.container > div:nth-child(7) {
+  --i: 7;
+}
+.container > div:nth-child(8) {
+  --i: 8;
+}
+.container > div:nth-child(9) {
+  --i: 9;
+}
+.container > div:nth-child(10) {
+  --i: 10;
+}
+.container > div:nth-child(11) {
+  --i: 11;
+}
+.container > div:nth-child(12) {
+  --i: 12;
+}
+.container > div:nth-child(13) {
+  --i: 13;
+}
+
 .bg1 {
   background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
-  text-shadow: 1px 1px 2px var(--main-color);
+  text-shadow: 1px 1px 2px var(--shadow-color-dark);
 }
 
 .bg2 {
-  background: var(--text-color) url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80");
+  background: var(--text-color)
+    url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80");
   color: var(--dark-text-color);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+  text-shadow: 0 1px 0 var(--shadow-color-light);
 }
 
-.container > div:first-of-type,
-.container > div:nth-of-type(6),
-.container > div:nth-of-type(9),
-.container > div:nth-of-type(10) {
+/* Refactor Spanning Logic with nth-child */
+.grid-col-span-2 {
   grid-column: span 2;
 }
 
+/* Make the Dashboard Interactive */
+dialog {
+  border: none;
+  border-radius: var(--border-radius);
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+  max-width: 350px;
+  width: 90%;
+  margin: auto;
+}
+
+dialog::backdrop {
+  background: var(--modal-backdrop-color);
+}
+
+dialog .modal {
+  background: var(--main-color);
+  color: var(--text-color);
+  box-shadow: 0 8px 32px var(--modal-shadow-color);
+  border-radius: var(--border-radius);
+  padding: 2rem 2.5rem;
+  font-family: "Nunito", sans-serif;
+  width: 100%;
+  text-align: left;
+}
+
+dialog .modal h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+dialog .modal ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0 0 1.5rem 0;
+}
+
+dialog .modal ul li {
+  background: var(--metric-bg-color);
+  border-radius: var(--border-radius);
+  padding: 0.75em 1em;
+  box-shadow: 0 2px 8px var(--metric-shadow-color);
+  font-size: 1.1rem;
+  color: var(--metric-text-color);
+  transition: background 0.2s;
+}
+
+dialog .modal button {
+  background: var(--text-color);
+  color: var(--main-color);
+  border: none;
+  border-radius: var(--border-radius);
+  padding: 0.5em 1.2em;
+  font-size: 1rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+dialog .modal button:hover {
+  background: var(--shadow-color-light);
+  color: var(--main-color);
+}
+
 @media (min-width: 768px) {
   .container {
     grid-template-columns: repeat(4, 1fr);
diff --git a/081-animated SVG/index.html b/081-animated SVG/index.html
index dcde647..81c25be 100644
--- a/081-animated SVG/index.html	
+++ b/081-animated SVG/index.html	
@@ -10,356 +10,363 @@
     <title>Bike</title>
   </head>
   <body>
-    <svg
-      width="1058"
-      height="785"
-      viewBox="0 0 1058 785"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g id="bike" clip-path="url(#clip0)">
-        <path
-          id="Vector"
-          d="M209.73 115.43C204.25 122.08 202.14 131.43 199.78 140.22C180.78 211.06 133.96 268.04 80.64 308.74C58.06 325.98 30.57 349.1 35.51 380.01C38.17 396.61 49.84 408.83 58.51 422.35C76.7 450.66 82.6 489.14 73.93 523.03C64.07 561.59 36.51 597.57 45.04 636.56C50.3 660.56 68.16 677.64 85.33 692.32C112.117 715.207 139.757 736.647 168.25 756.64C187.35 770.04 207.67 783.08 229.93 784.78C249.53 786.28 268.73 778.83 287.34 771.48C303.6 765.05 320.27 758.36 333.4 745.48C341.97 737.07 348.8 726.22 358.32 719.34C380.68 703.18 409.4 713.42 435.04 720.34C495.54 736.58 560.29 730.65 617.86 703.6C706.17 662.1 773.48 574.95 859.86 528.19C897 508.08 937.4 495.6 971.79 469.7C991.165 454.953 1007.81 436.936 1020.99 416.46C1046.99 376.35 1061.05 325.21 1056.99 275.15C1052.93 225.09 1030.18 176.85 994.45 148.59C956.2 118.34 907.89 112.69 864.37 94.53C819.43 75.77 779.45 43.53 734.94 23.4C698.924 7.15665 659.728 -0.81716 620.228 0.0636141C580.728 0.944389 541.926 10.6574 506.67 28.49C458.23 52.99 409.13 110.15 355.18 114.49C316.74 117.49 239.75 79.01 209.73 115.43Z"
-          fill="url(#paint0_linear)"
-        />
-        <g id="man-bike">
-          <path
-            id="Vector_2"
-            d="M387 554.303L344.293 512.159L330.947 525.683L373.654 567.827L387 554.303Z"
-            fill="#6C63FF"
-          />
-          <path
-            id="Vector_3"
-            d="M387 554.303L344.293 512.159L330.947 525.683L373.654 567.827L387 554.303Z"
-            fill="#57565B"
-          />
-          <path
-            id="Vector_4"
-            d="M354.48 491.99C354.48 491.99 379.27 478.91 388.85 470.49C394.617 465.444 400.818 460.917 407.38 456.96L438.48 438.03L503.48 433.03L506.48 444.03C506.48 444.03 511.48 460.03 461.48 474.03C411.48 488.03 386.48 510.03 386.48 510.03C386.48 510.03 354.48 520.99 354.48 491.99Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_5"
-            opacity="0.1"
-            d="M389.13 507.86C387.36 509.21 386.48 509.99 386.48 509.99C386.48 509.99 354.48 520.99 354.48 491.99C354.48 491.99 356.03 491.17 358.48 489.8C360.955 493.831 364.423 497.16 368.551 499.469C372.679 501.778 377.33 502.99 382.06 502.99H385.45L389.13 507.86Z"
-            fill="black"
-          />
-          <path
-            id="Vector_6"
-            opacity="0.05"
-            d="M505.54 449.55C502.76 455.44 493.17 465.12 461.48 473.99C420.87 485.36 396.75 501.99 389.13 507.86C387.36 509.21 386.48 509.99 386.48 509.99C386.48 509.99 354.48 520.99 354.48 491.99C354.48 491.99 356.03 491.17 358.48 489.8C365.91 485.73 381.64 476.8 388.82 470.45C394.586 465.403 400.787 460.875 407.35 456.92L438.45 437.99L450.03 437.1L503.45 432.99L506.45 443.99C506.45 443.99 507.15 446.14 505.54 449.55Z"
-            fill="black"
-          />
-          <path
-            id="Vector_7"
-            d="M354.98 485.49L328.48 502.99L406.08 567.99C406.08 567.99 417.48 560.99 411.48 552.99C411.48 552.99 391.48 535.99 390.48 511.99L384.48 503.99H381.09C375.358 503.991 369.767 502.211 365.089 498.897C360.412 495.583 356.88 490.898 354.98 485.49V485.49Z"
-            fill="#ABB1D1"
-          />
-          <path
-            id="Vector_8"
-            opacity="0.1"
-            d="M505.54 449.55C489.54 441.82 450.48 440.99 450.48 440.99L450.06 437.1L503.48 432.99L506.48 443.99C506.48 443.99 507.15 446.14 505.54 449.55Z"
-            fill="black"
-          />
-          <path
-            id="Vector_9"
-            d="M450.48 438.99C450.48 438.99 497.48 439.99 509.48 449.99L503.48 328.99H438.48L450.48 438.99Z"
-            fill="#ABB1D1"
-          />
-          <path
-            id="Vector_10"
-            opacity="0.05"
-            d="M450.48 438.49C450.48 438.49 497.48 439.49 509.48 449.49L503.48 328.49H438.48L450.48 438.49Z"
-            fill="black"
-          />
-          <path
-            id="Vector_11"
-            d="M488.24 364.95C488.24 364.95 605.89 360.95 608.29 376.16C610.69 391.37 490.64 384.96 490.64 384.96C490.64 384.96 481.04 375.35 488.24 364.95Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_12"
-            opacity="0.05"
-            d="M488.24 364.95C488.24 364.95 605.89 360.95 608.29 376.16C610.69 391.37 490.64 384.96 490.64 384.96C490.64 384.96 481.04 375.35 488.24 364.95Z"
-            fill="black"
-          />
-          <path
-            id="Vector_13"
-            d="M393 425.78H372.19V606.66H393V425.78Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_14"
-            opacity="0.1"
-            d="M393 425.77V439.7C386.08 440.6 379 441.17 372.19 441.39V425.77H393Z"
-            fill="black"
-          />
-          <path
-            id="Vector_15"
-            d="M391.44 410.78C388.52 410.554 385.616 410.164 382.74 409.61C371.46 407.45 343.02 402.92 335.37 410.61C325.77 420.21 328.97 437.02 354.58 439.42C380.19 441.82 424.21 435.42 433.02 425.81C433.02 425.77 417.09 412.75 391.44 410.78Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_16"
-            d="M387.4 475.4L605.9 407.37L613.1 424.18L389 501.01L387.4 475.4Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_17"
-            d="M452.23 582.65L609.9 427.38L618.7 440.18L468.23 597.05L452.23 582.65Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_18"
-            opacity="0.1"
-            d="M653.58 529.85C648.584 531.142 643.712 532.872 639.02 535.02L629.46 508.31C634.477 506.123 639.644 504.295 644.92 502.84L653.58 529.85Z"
-            fill="black"
-          />
-          <path
-            id="Vector_19"
-            d="M680.33 608.26L669.13 614.66L590.99 396.33L587.49 386.56L605.9 376.15L610.51 390.53L680.33 608.26Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_20"
-            opacity="0.1"
-            d="M610.51 390.53L590.99 396.33L587.49 386.56L605.9 376.15L610.51 390.53Z"
-            fill="black"
-          />
-          <path
-            id="Vector_21"
-            d="M491.44 407.37L601.09 369.75C601.09 369.75 620.3 372.15 613.09 388.16L502.65 420.97C502.65 420.97 485.85 422.57 491.44 407.37Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_22"
-            opacity="0.1"
-            d="M367.79 615.86C367.789 621.994 367.314 628.119 366.37 634.18C356.77 633.49 346.85 632.49 337.13 631.49C339.289 619.599 339.021 607.394 336.34 595.61C345.81 593.61 355.48 591.7 364.92 589.97C366.833 598.467 367.795 607.15 367.79 615.86V615.86Z"
-            fill="black"
-          />
-          <path
-            id="Vector_23"
-            opacity="0.1"
-            d="M393 585.38V606.65H372.19V588.65C379.39 587.4 386.39 586.29 393 585.38Z"
-            fill="black"
-          />
-          <path
-            id="Vector_24"
-            d="M258.54 615.49C258.54 615.49 426.62 571.49 440.22 588.28C453.82 605.07 468.23 627.49 425.85 635.49C383.47 643.49 255.37 621.88 255.37 621.88L258.54 615.49Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_25"
-            opacity="0.1"
-            d="M341.21 541.37L319.85 560.92C316.067 556.064 311.791 551.614 307.09 547.64L327.03 526.81C332.164 531.249 336.908 536.12 341.21 541.37V541.37Z"
-            fill="black"
-          />
-          <path
-            id="Vector_26"
-            d="M252.94 606.66L378.59 475.4L382.6 505.81L259.34 618.66L252.94 606.66Z"
-            fill="#78777E"
-          />
-          <path
-            id="Vector_27"
-            opacity="0.1"
-            d="M251.34 628.27C258.415 628.27 264.15 622.535 264.15 615.46C264.15 608.385 258.415 602.65 251.34 602.65C244.265 602.65 238.53 608.385 238.53 615.46C238.53 622.535 244.265 628.27 251.34 628.27Z"
-            fill="black"
-          />
-          <path
-            id="Vector_28"
-            opacity="0.1"
-            d="M675.13 627.07C682.205 627.07 687.94 621.335 687.94 614.26C687.94 607.185 682.205 601.45 675.13 601.45C668.055 601.45 662.32 607.185 662.32 614.26C662.32 621.335 668.055 627.07 675.13 627.07Z"
-            fill="black"
-          />
-          <path
-            id="Vector_29"
-            opacity="0.1"
-            d="M448.22 628.27C462.364 628.27 473.83 616.804 473.83 602.66C473.83 588.516 462.364 577.05 448.22 577.05C434.076 577.05 422.61 588.516 422.61 602.66C422.61 616.804 434.076 628.27 448.22 628.27Z"
-            fill="black"
-          />
-          <path
-            id="Vector_30"
-            d="M449.83 628.27C463.974 628.27 475.44 616.804 475.44 602.66C475.44 588.516 463.974 577.05 449.83 577.05C435.686 577.05 424.22 588.516 424.22 602.66C424.22 616.804 435.686 628.27 449.83 628.27Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_31"
-            d="M442.992 600.736L442.984 600.742C439.977 602.991 439.362 607.253 441.611 610.26L461.937 637.441C464.186 640.448 468.448 641.063 471.455 638.814L471.463 638.808C474.471 636.559 475.085 632.297 472.836 629.29L452.51 602.109C450.261 599.102 446 598.487 442.992 600.736Z"
-            fill="#6C63FF"
-          />
-          <path
-            id="Vector_32"
-            d="M565.48 246.99L563.1 277.1C562.826 280.914 562.876 284.744 563.25 288.55C563.56 291.92 563.25 297.82 559.95 306.82C555.713 318.317 553.523 330.467 553.48 342.72V376.99L530.48 372.99C530.48 372.99 531.48 324.99 527.48 316.99C523.48 308.99 530.48 237.99 530.48 237.99L565.48 246.99Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_33"
-            opacity="0.05"
-            d="M564.3 261.91L563.1 277.1C562.83 280.911 562.883 284.738 563.26 288.54C563.57 291.91 563.26 297.81 559.96 306.82C555.723 318.317 553.533 330.467 553.49 342.72V376.99L530.49 372.99C530.49 372.99 531.49 324.99 527.49 316.99C524.66 311.32 527.34 274.05 529.15 252.78C529.9 244.03 530.49 237.99 530.49 237.99L565.49 246.99L564.3 261.91Z"
-            fill="black"
-          />
-          <path
-            id="Vector_34"
-            d="M451.5 476.99L442.85 526.19C441.759 532.759 440.086 539.218 437.85 545.49C432.78 559.35 436.02 578.78 438.48 589.38C439.57 594.06 440.48 597.02 440.48 597.02L414.48 611.02L406.48 605.02V601.02L405.48 512.02C399.48 498.02 401.48 477.02 405.48 469.02C406.617 466.392 407.417 463.63 407.86 460.8C409.86 450.08 410.48 435.02 410.48 435.02C410.48 435.02 426.48 408.02 445.48 426.02C452.48 432.65 455.14 441.32 455.7 449.62C456.68 463.83 451.5 476.99 451.5 476.99Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_35"
-            opacity="0.1"
-            d="M455.7 449.59C441.83 457.83 417.7 460.16 407.86 460.77C409.86 450.05 410.48 434.99 410.48 434.99C410.48 434.99 426.48 407.99 445.48 425.99C452.48 432.62 455.14 441.29 455.7 449.59Z"
-            fill="black"
-          />
-          <path
-            id="Vector_36"
-            d="M489.48 424.99C478.846 430.653 468.797 437.352 459.48 444.99C443.48 457.99 403.48 458.99 403.48 458.99V443.99C404.48 425.99 387.48 405.99 364.48 349.99C349.79 314.23 353.86 293.99 358.72 283.99C361.48 278.34 364.48 275.99 364.48 275.99L489.48 299.99L493.95 313.39L503.48 341.99C503.48 341.99 468.48 343.99 462.48 346.99C456.48 349.99 460.48 376.99 460.48 376.99C454.48 404.99 489.48 424.99 489.48 424.99Z"
-            fill="#ABB1D1"
-          />
-          <path
-            id="Vector_37"
-            opacity="0.1"
-            d="M565.48 246.99L564.3 261.91C546.9 266.91 534.48 250.99 534.48 250.99C532.665 251.477 530.882 252.074 529.14 252.78C529.89 244.03 530.48 237.99 530.48 237.99L565.48 246.99Z"
-            fill="black"
-          />
-          <path
-            id="Vector_38"
-            opacity="0.1"
-            d="M493.95 313.39C493.48 318.06 493.48 320.99 493.48 320.99C493.48 320.99 470.48 339.99 431.48 310.99C392.48 281.99 357.48 289.99 357.48 289.99C357.48 289.99 357.89 287.67 358.72 283.99C361.48 278.34 364.48 275.99 364.48 275.99L489.48 299.99L493.95 313.39Z"
-            fill="black"
-          />
-          <path
-            id="Vector_39"
-            d="M578.96 207.94C576.35 228.29 575.48 253.94 575.48 253.94C552.48 271.94 534.48 248.94 534.48 248.94C512.76 254.77 502.55 273.78 497.74 290.37C495.164 299.344 493.732 308.607 493.48 317.94C493.48 317.94 487.4 322.94 476.2 323.94C465.61 324.83 450.43 322.07 431.48 307.94C392.48 278.94 357.48 286.94 357.48 286.94C357.48 286.94 364.48 246.94 380.48 234.94C396.48 222.94 408.48 207.94 428.48 161.94C448.48 115.94 489.48 126.94 489.48 126.94C489.48 126.94 491.48 117.94 528.48 126.94C537.492 129.302 545.834 133.721 552.85 139.85C572.64 156.49 582.24 182.3 578.96 207.94Z"
-            fill="white"
-          />
-          <path
-            id="Vector_40"
-            d="M541.85 149.49C541.8 150.82 541.69 152.3 541.51 153.95C539.51 171.95 537.51 169.95 515.51 173.95C501.83 176.44 494.72 165.01 491.3 156.01C490.062 152.75 489.128 149.382 488.51 145.95L536.51 137.95C536.51 137.95 542.26 136.34 541.85 149.49Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_41"
-            opacity="0.05"
-            d="M497.74 290.42C495.164 299.394 493.732 308.657 493.48 317.99C493.48 317.99 487.4 322.99 476.2 323.99C475.884 323.353 475.643 322.682 475.48 321.99C473.48 312.99 458.48 296.99 458.48 296.99C448.48 287.99 446.48 271.99 446.48 271.99L429.98 223.49L424.48 218.99C424.48 218.99 447.48 200.99 467.48 215.99C487.48 230.99 481.48 262.99 481.48 262.99L485.48 273.99C489.63 277.49 493.85 283.66 497.74 290.42Z"
-            fill="black"
-          />
-          <path
-            id="Vector_42"
-            d="M427.48 217.99L449.48 270.99C449.48 270.99 451.48 286.99 461.48 295.99C461.48 295.99 476.48 311.99 478.48 320.99C480.48 329.99 508.48 353.99 508.48 353.99C508.48 353.99 534.48 377.99 536.48 386.99C536.48 386.99 560.48 393.99 557.48 407.99C557.48 407.99 575.48 389.99 557.48 372.99C539.48 355.99 515.48 320.99 515.48 320.99C515.48 320.99 501.48 283.99 488.48 272.99L484.48 261.99C484.48 261.99 490.48 229.99 470.48 214.99C450.48 199.99 427.48 217.99 427.48 217.99Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_43"
-            opacity="0.1"
-            d="M440.48 596.99L414.48 610.99L406.48 604.99V600.99C415.464 600.352 424.193 597.718 432.03 593.28C434.43 591.92 436.69 590.58 438.5 589.4C439.55 594.03 440.48 596.99 440.48 596.99Z"
-            fill="black"
-          />
-          <path
-            id="Vector_44"
-            opacity="0.1"
-            d="M470.48 175.99L484.48 230.99C484.48 230.99 441.48 237.99 432.48 230.99C423.48 223.99 406.48 221.99 406.48 221.99C406.48 221.99 424.48 169.99 434.48 163.99C444.48 157.99 470.48 175.99 470.48 175.99Z"
-            fill="black"
-          />
-          <path
-            id="Vector_45"
-            d="M470.48 173.99L484.48 228.99C484.48 228.99 441.48 235.99 432.48 228.99C423.48 221.99 406.48 219.99 406.48 219.99C406.48 219.99 424.48 167.99 434.48 161.99C444.48 155.99 470.48 173.99 470.48 173.99Z"
-            fill="white"
-          />
-          <path
-            id="Vector_46"
-            opacity="0.1"
-            d="M541.85 148.49C539.049 152.356 535.487 155.609 531.383 158.047C527.278 160.485 522.718 162.058 517.983 162.669C513.248 163.28 508.439 162.915 503.85 161.598C499.261 160.281 494.99 158.039 491.3 155.01C490.062 151.75 489.128 148.382 488.51 144.95L536.51 136.95C536.51 136.95 542.26 135.34 541.85 148.49Z"
-            fill="black"
-          />
-          <path
-            id="Vector_47"
-            d="M548.48 126.99C548.48 136.273 544.793 145.175 538.229 151.739C531.665 158.303 522.763 161.99 513.48 161.99C504.197 161.99 495.295 158.303 488.731 151.739C482.168 145.175 478.48 136.273 478.48 126.99C478.48 126.41 478.48 125.83 478.48 125.25C478.711 115.967 482.62 107.157 489.346 100.756C496.073 94.3555 505.067 90.8893 514.35 91.12C523.633 91.3508 532.443 95.2595 538.844 101.986C545.245 108.713 548.711 117.707 548.48 126.99V126.99Z"
-            fill="#DB8B8B"
-          />
-          <path
-            id="Vector_48"
-            opacity="0.1"
-            d="M548.48 126.99C548.483 130.216 548.039 133.426 547.16 136.53C544.455 137.12 541.633 136.861 539.08 135.79C535.34 134.32 532.13 131.79 528.54 129.97C518.43 124.85 506.4 125.86 495.2 127.55C489.64 128.39 483.33 129.17 478.96 125.63C478.81 125.511 478.666 125.385 478.53 125.25C478.761 115.967 482.67 107.157 489.396 100.756C496.123 94.3555 505.117 90.8893 514.4 91.12C523.683 91.3508 532.493 95.2595 538.894 101.986C545.295 108.713 548.761 117.707 548.53 126.99H548.48Z"
-            fill="black"
-          />
-          <path
-            id="Vector_49"
-            opacity="0.05"
-            d="M384.98 234.49C384.98 234.49 410.98 241.49 418.98 259.49C426.98 277.49 448.62 280.78 448.62 280.78"
-            fill="black"
-          />
-          <path
-            id="Vector_50"
-            d="M482.98 630.49H422.98V649.49H482.98V630.49Z"
-            fill="#6C63FF"
-          />
-          <path
-            id="Vector_51"
-            d="M482.98 630.49H422.98V649.49H482.98V630.49Z"
-            fill="#57565B"
-          />
-          <path
-            id="Vector_52"
-            d="M431.99 595.23C437.36 592.23 442.07 589.23 442.48 587.99C442.48 587.99 456.03 602.29 468.1 606.73C472.159 608.229 476.044 610.16 479.69 612.49C484.47 615.49 491.29 619.02 497.48 619.02C497.48 619.02 511.48 631.02 484.48 633.02C457.48 635.02 394.48 628.02 394.48 628.02L398.48 603.02C410.167 603.705 421.804 601 431.99 595.23Z"
-            fill="#ABB1D1"
-          />
-        </g>
-        <g id="left-wheel">
-          <path
-            id="Vector_53"
-            d="M255.23 716.99L248.96 619.05L248.83 618.84L242.51 621.04L213.43 705.89L167.18 673.1L240.85 619.69L240.92 619.48L241.34 619.33L246.09 615.88L168.85 572.57L149.93 593.37L152.93 612.87L241.75 614.49V616.49L151.27 614.87L147.85 592.73L173.75 564.27L212.5 519.07L213.19 520.94L221.39 511.94L251.85 517.4V516.19L253.85 516.25V517.76L299.21 525.88L256.92 610.49L250.75 614.96V615.46V616.02L348.55 581.94L336.94 673.15L253.94 620.28L251.02 618.64L299.96 697.52L255.23 716.99ZM251.23 622.65L257.08 714.03L297.13 696.65L251.23 622.65ZM170.65 673.08L212.44 702.71L239.78 622.97L170.65 673.08ZM252.97 617.42L255.06 618.59L335.41 669.79L346.21 584.92L252.97 617.42ZM245.87 610.22L248.38 614.27L248.82 613.95L251.82 519.42L222.08 514.1L213.92 523.1L245.87 610.22ZM170.45 571.16L245.29 613.16L243.99 611.03L212.41 524.76L175.22 565.63L170.45 571.16ZM253.85 519.77L250.85 612.49L255.37 609.21L296.28 527.39L253.85 519.77Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_54"
-            d="M364.92 589.95C360.91 572.131 352.79 555.495 341.21 541.37C336.911 536.121 332.171 531.25 327.04 526.81C307.314 509.779 282.491 499.779 256.467 498.381C230.443 496.983 204.692 504.265 183.254 519.085C161.816 533.904 145.906 555.422 138.02 580.262C130.134 605.102 130.719 631.857 139.683 656.328C148.647 680.799 165.482 701.601 187.547 715.47C209.612 729.339 235.657 735.488 261.595 732.954C287.533 730.42 311.895 719.345 330.858 701.468C349.822 683.591 362.312 659.923 366.37 634.18C367.314 628.119 367.789 621.994 367.79 615.86C367.797 607.144 366.834 598.454 364.92 589.95ZM249.73 704.3C231.498 704.281 213.714 698.647 198.797 688.164C183.879 677.682 172.552 662.859 166.356 645.712C160.16 628.565 159.395 609.926 164.165 592.329C168.935 574.732 179.009 559.031 193.018 547.361C207.026 535.692 224.288 528.619 242.457 527.106C260.627 525.593 278.821 529.712 294.567 538.904C310.312 548.096 322.845 561.914 330.46 578.48C338.076 595.045 340.405 613.554 337.13 631.49C333.38 651.933 322.58 670.414 306.611 683.718C290.642 697.021 270.514 704.304 249.73 704.3V704.3Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_55"
-            d="M249.73 628.27C256.805 628.27 262.54 622.535 262.54 615.46C262.54 608.385 256.805 602.65 249.73 602.65C242.655 602.65 236.92 608.385 236.92 615.46C236.92 622.535 242.655 628.27 249.73 628.27Z"
-            fill="#535461"
-          />
-        </g>
-        <g id="right-wheel">
-          <path
-            id="Vector_56"
-            d="M681.42 717.39L675.16 619.49L675.03 619.28L668.71 621.48L639.62 706.29L593.37 673.49L667.06 620.08L667.13 619.87L667.55 619.72L672.3 616.27L595.06 572.96L576.13 593.76L579.13 613.26L667.93 614.84V616.84L577.45 615.22L574.05 593.11L599.94 564.66L638.66 519.49L639.35 521.36L647.55 512.36L678.09 517.83V516.62L680.09 516.68V518.19L725.45 526.31L683.12 610.96L676.95 615.43V615.93V616.49L774.76 582.41L763.15 673.62L680.15 620.75L677.23 619.11L726.17 698L681.42 717.39ZM677.42 623.05L683.27 714.43L723.32 697.05L677.42 623.05ZM596.85 673.49L638.64 703.12L665.98 623.38L596.85 673.49ZM679.17 617.83L681.26 619L761.61 670.2L772.41 585.33L679.17 617.83ZM672.07 610.63L674.58 614.68L675.02 614.36L678.02 519.83L648.28 514.49L640.12 523.49L672.07 610.63ZM596.68 571.58L671.52 613.58L670.22 611.45L638.64 525.18L601.44 566.06L596.68 571.58ZM680.05 520.19L677.05 612.88L681.57 609.6L722.48 527.78L680.05 520.19Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_57"
-            d="M676.33 498.61C665.717 498.598 655.15 500.024 644.92 502.85C639.644 504.305 634.477 506.133 629.46 508.32C602.73 519.907 581.247 540.997 569.167 567.508C557.087 594.019 555.269 624.069 564.065 651.843C572.86 679.618 591.644 703.143 616.782 717.869C641.921 732.594 671.627 737.473 700.155 731.562C728.682 725.65 754.004 709.369 771.221 685.867C788.438 662.365 796.327 633.312 793.362 604.33C790.396 575.348 776.787 548.495 755.168 528.966C733.548 509.438 705.454 498.622 676.32 498.61H676.33ZM675.93 704.7C655.649 704.692 635.981 697.746 620.192 685.017C604.404 672.288 593.445 654.541 589.135 634.723C584.825 614.905 587.424 594.209 596.501 576.073C605.577 557.936 620.584 543.45 639.03 535.02C643.722 532.872 648.594 531.142 653.59 529.85C665.802 526.68 678.549 526.147 690.984 528.287C703.418 530.427 715.253 535.191 725.703 542.261C736.153 549.332 744.977 558.547 751.588 569.293C758.199 580.039 762.446 592.069 764.046 604.585C765.646 617.1 764.562 629.812 760.866 641.875C757.17 653.939 750.948 665.077 742.613 674.548C734.277 684.02 724.02 691.608 712.524 696.806C701.028 702.005 688.557 704.696 675.94 704.7H675.93Z"
-            fill="#535461"
-          />
-          <path
-            id="Vector_58"
-            d="M675.93 628.67C683.005 628.67 688.74 622.935 688.74 615.86C688.74 608.785 683.005 603.05 675.93 603.05C668.855 603.05 663.12 608.785 663.12 615.86C663.12 622.935 668.855 628.67 675.93 628.67Z"
-            fill="#535461"
+    <!-- Add a Parallax Background Effect -->
+    <div class="svg-wrapper">
+      <div id="parallax-bg"></div>
+      <svg
+        width="1058"
+        height="785"
+        viewBox="0 0 1058 785"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g id="bike" clip-path="url(#clip0)">
+          <path
+            id="Vector"
+            d="M209.73 115.43C204.25 122.08 202.14 131.43 199.78 140.22C180.78 211.06 133.96 268.04 80.64 308.74C58.06 325.98 30.57 349.1 35.51 380.01C38.17 396.61 49.84 408.83 58.51 422.35C76.7 450.66 82.6 489.14 73.93 523.03C64.07 561.59 36.51 597.57 45.04 636.56C50.3 660.56 68.16 677.64 85.33 692.32C112.117 715.207 139.757 736.647 168.25 756.64C187.35 770.04 207.67 783.08 229.93 784.78C249.53 786.28 268.73 778.83 287.34 771.48C303.6 765.05 320.27 758.36 333.4 745.48C341.97 737.07 348.8 726.22 358.32 719.34C380.68 703.18 409.4 713.42 435.04 720.34C495.54 736.58 560.29 730.65 617.86 703.6C706.17 662.1 773.48 574.95 859.86 528.19C897 508.08 937.4 495.6 971.79 469.7C991.165 454.953 1007.81 436.936 1020.99 416.46C1046.99 376.35 1061.05 325.21 1056.99 275.15C1052.93 225.09 1030.18 176.85 994.45 148.59C956.2 118.34 907.89 112.69 864.37 94.53C819.43 75.77 779.45 43.53 734.94 23.4C698.924 7.15665 659.728 -0.81716 620.228 0.0636141C580.728 0.944389 541.926 10.6574 506.67 28.49C458.23 52.99 409.13 110.15 355.18 114.49C316.74 117.49 239.75 79.01 209.73 115.43Z"
+            fill="url(#paint0_linear)"
+          />
+          <g id="man-bike">
+            <path
+              id="Vector_2"
+              d="M387 554.303L344.293 512.159L330.947 525.683L373.654 567.827L387 554.303Z"
+              fill="#6C63FF"
+            />
+            <path
+              id="Vector_3"
+              d="M387 554.303L344.293 512.159L330.947 525.683L373.654 567.827L387 554.303Z"
+              fill="#57565B"
+            />
+            <path
+              id="Vector_4"
+              d="M354.48 491.99C354.48 491.99 379.27 478.91 388.85 470.49C394.617 465.444 400.818 460.917 407.38 456.96L438.48 438.03L503.48 433.03L506.48 444.03C506.48 444.03 511.48 460.03 461.48 474.03C411.48 488.03 386.48 510.03 386.48 510.03C386.48 510.03 354.48 520.99 354.48 491.99Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_5"
+              opacity="0.1"
+              d="M389.13 507.86C387.36 509.21 386.48 509.99 386.48 509.99C386.48 509.99 354.48 520.99 354.48 491.99C354.48 491.99 356.03 491.17 358.48 489.8C360.955 493.831 364.423 497.16 368.551 499.469C372.679 501.778 377.33 502.99 382.06 502.99H385.45L389.13 507.86Z"
+              fill="black"
+            />
+            <path
+              id="Vector_6"
+              opacity="0.05"
+              d="M505.54 449.55C502.76 455.44 493.17 465.12 461.48 473.99C420.87 485.36 396.75 501.99 389.13 507.86C387.36 509.21 386.48 509.99 386.48 509.99C386.48 509.99 354.48 520.99 354.48 491.99C354.48 491.99 356.03 491.17 358.48 489.8C365.91 485.73 381.64 476.8 388.82 470.45C394.586 465.403 400.787 460.875 407.35 456.92L438.45 437.99L450.03 437.1L503.45 432.99L506.45 443.99C506.45 443.99 507.15 446.14 505.54 449.55Z"
+              fill="black"
+            />
+            <path
+              id="Vector_7"
+              d="M354.98 485.49L328.48 502.99L406.08 567.99C406.08 567.99 417.48 560.99 411.48 552.99C411.48 552.99 391.48 535.99 390.48 511.99L384.48 503.99H381.09C375.358 503.991 369.767 502.211 365.089 498.897C360.412 495.583 356.88 490.898 354.98 485.49V485.49Z"
+              fill="#ABB1D1"
+            />
+            <path
+              id="Vector_8"
+              opacity="0.1"
+              d="M505.54 449.55C489.54 441.82 450.48 440.99 450.48 440.99L450.06 437.1L503.48 432.99L506.48 443.99C506.48 443.99 507.15 446.14 505.54 449.55Z"
+              fill="black"
+            />
+            <path
+              id="Vector_9"
+              d="M450.48 438.99C450.48 438.99 497.48 439.99 509.48 449.99L503.48 328.99H438.48L450.48 438.99Z"
+              fill="#ABB1D1"
+            />
+            <path
+              id="Vector_10"
+              opacity="0.05"
+              d="M450.48 438.49C450.48 438.49 497.48 439.49 509.48 449.49L503.48 328.49H438.48L450.48 438.49Z"
+              fill="black"
+            />
+            <path
+              id="Vector_11"
+              d="M488.24 364.95C488.24 364.95 605.89 360.95 608.29 376.16C610.69 391.37 490.64 384.96 490.64 384.96C490.64 384.96 481.04 375.35 488.24 364.95Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_12"
+              opacity="0.05"
+              d="M488.24 364.95C488.24 364.95 605.89 360.95 608.29 376.16C610.69 391.37 490.64 384.96 490.64 384.96C490.64 384.96 481.04 375.35 488.24 364.95Z"
+              fill="black"
+            />
+            <path
+              id="Vector_13"
+              d="M393 425.78H372.19V606.66H393V425.78Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_14"
+              opacity="0.1"
+              d="M393 425.77V439.7C386.08 440.6 379 441.17 372.19 441.39V425.77H393Z"
+              fill="black"
+            />
+            <path
+              id="Vector_15"
+              d="M391.44 410.78C388.52 410.554 385.616 410.164 382.74 409.61C371.46 407.45 343.02 402.92 335.37 410.61C325.77 420.21 328.97 437.02 354.58 439.42C380.19 441.82 424.21 435.42 433.02 425.81C433.02 425.77 417.09 412.75 391.44 410.78Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_16"
+              d="M387.4 475.4L605.9 407.37L613.1 424.18L389 501.01L387.4 475.4Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_17"
+              d="M452.23 582.65L609.9 427.38L618.7 440.18L468.23 597.05L452.23 582.65Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_18"
+              opacity="0.1"
+              d="M653.58 529.85C648.584 531.142 643.712 532.872 639.02 535.02L629.46 508.31C634.477 506.123 639.644 504.295 644.92 502.84L653.58 529.85Z"
+              fill="black"
+            />
+            <path
+              id="Vector_19"
+              d="M680.33 608.26L669.13 614.66L590.99 396.33L587.49 386.56L605.9 376.15L610.51 390.53L680.33 608.26Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_20"
+              opacity="0.1"
+              d="M610.51 390.53L590.99 396.33L587.49 386.56L605.9 376.15L610.51 390.53Z"
+              fill="black"
+            />
+            <path
+              id="Vector_21"
+              d="M491.44 407.37L601.09 369.75C601.09 369.75 620.3 372.15 613.09 388.16L502.65 420.97C502.65 420.97 485.85 422.57 491.44 407.37Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_22"
+              opacity="0.1"
+              d="M367.79 615.86C367.789 621.994 367.314 628.119 366.37 634.18C356.77 633.49 346.85 632.49 337.13 631.49C339.289 619.599 339.021 607.394 336.34 595.61C345.81 593.61 355.48 591.7 364.92 589.97C366.833 598.467 367.795 607.15 367.79 615.86V615.86Z"
+              fill="black"
+            />
+            <path
+              id="Vector_23"
+              opacity="0.1"
+              d="M393 585.38V606.65H372.19V588.65C379.39 587.4 386.39 586.29 393 585.38Z"
+              fill="black"
+            />
+            <path
+              id="Vector_24"
+              d="M258.54 615.49C258.54 615.49 426.62 571.49 440.22 588.28C453.82 605.07 468.23 627.49 425.85 635.49C383.47 643.49 255.37 621.88 255.37 621.88L258.54 615.49Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_25"
+              opacity="0.1"
+              d="M341.21 541.37L319.85 560.92C316.067 556.064 311.791 551.614 307.09 547.64L327.03 526.81C332.164 531.249 336.908 536.12 341.21 541.37V541.37Z"
+              fill="black"
+            />
+            <path
+              id="Vector_26"
+              d="M252.94 606.66L378.59 475.4L382.6 505.81L259.34 618.66L252.94 606.66Z"
+              fill="#78777E"
+            />
+            <path
+              id="Vector_27"
+              opacity="0.1"
+              d="M251.34 628.27C258.415 628.27 264.15 622.535 264.15 615.46C264.15 608.385 258.415 602.65 251.34 602.65C244.265 602.65 238.53 608.385 238.53 615.46C238.53 622.535 244.265 628.27 251.34 628.27Z"
+              fill="black"
+            />
+            <path
+              id="Vector_28"
+              opacity="0.1"
+              d="M675.13 627.07C682.205 627.07 687.94 621.335 687.94 614.26C687.94 607.185 682.205 601.45 675.13 601.45C668.055 601.45 662.32 607.185 662.32 614.26C662.32 621.335 668.055 627.07 675.13 627.07Z"
+              fill="black"
+            />
+            <path
+              id="Vector_29"
+              opacity="0.1"
+              d="M448.22 628.27C462.364 628.27 473.83 616.804 473.83 602.66C473.83 588.516 462.364 577.05 448.22 577.05C434.076 577.05 422.61 588.516 422.61 602.66C422.61 616.804 434.076 628.27 448.22 628.27Z"
+              fill="black"
+            />
+            <path
+              id="Vector_30"
+              d="M449.83 628.27C463.974 628.27 475.44 616.804 475.44 602.66C475.44 588.516 463.974 577.05 449.83 577.05C435.686 577.05 424.22 588.516 424.22 602.66C424.22 616.804 435.686 628.27 449.83 628.27Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_31"
+              d="M442.992 600.736L442.984 600.742C439.977 602.991 439.362 607.253 441.611 610.26L461.937 637.441C464.186 640.448 468.448 641.063 471.455 638.814L471.463 638.808C474.471 636.559 475.085 632.297 472.836 629.29L452.51 602.109C450.261 599.102 446 598.487 442.992 600.736Z"
+              fill="#6C63FF"
+            />
+            <path
+              id="Vector_32"
+              d="M565.48 246.99L563.1 277.1C562.826 280.914 562.876 284.744 563.25 288.55C563.56 291.92 563.25 297.82 559.95 306.82C555.713 318.317 553.523 330.467 553.48 342.72V376.99L530.48 372.99C530.48 372.99 531.48 324.99 527.48 316.99C523.48 308.99 530.48 237.99 530.48 237.99L565.48 246.99Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_33"
+              opacity="0.05"
+              d="M564.3 261.91L563.1 277.1C562.83 280.911 562.883 284.738 563.26 288.54C563.57 291.91 563.26 297.81 559.96 306.82C555.723 318.317 553.533 330.467 553.49 342.72V376.99L530.49 372.99C530.49 372.99 531.49 324.99 527.49 316.99C524.66 311.32 527.34 274.05 529.15 252.78C529.9 244.03 530.49 237.99 530.49 237.99L565.49 246.99L564.3 261.91Z"
+              fill="black"
+            />
+            <path
+              id="Vector_34"
+              d="M451.5 476.99L442.85 526.19C441.759 532.759 440.086 539.218 437.85 545.49C432.78 559.35 436.02 578.78 438.48 589.38C439.57 594.06 440.48 597.02 440.48 597.02L414.48 611.02L406.48 605.02V601.02L405.48 512.02C399.48 498.02 401.48 477.02 405.48 469.02C406.617 466.392 407.417 463.63 407.86 460.8C409.86 450.08 410.48 435.02 410.48 435.02C410.48 435.02 426.48 408.02 445.48 426.02C452.48 432.65 455.14 441.32 455.7 449.62C456.68 463.83 451.5 476.99 451.5 476.99Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_35"
+              opacity="0.1"
+              d="M455.7 449.59C441.83 457.83 417.7 460.16 407.86 460.77C409.86 450.05 410.48 434.99 410.48 434.99C410.48 434.99 426.48 407.99 445.48 425.99C452.48 432.62 455.14 441.29 455.7 449.59Z"
+              fill="black"
+            />
+            <path
+              id="Vector_36"
+              d="M489.48 424.99C478.846 430.653 468.797 437.352 459.48 444.99C443.48 457.99 403.48 458.99 403.48 458.99V443.99C404.48 425.99 387.48 405.99 364.48 349.99C349.79 314.23 353.86 293.99 358.72 283.99C361.48 278.34 364.48 275.99 364.48 275.99L489.48 299.99L493.95 313.39L503.48 341.99C503.48 341.99 468.48 343.99 462.48 346.99C456.48 349.99 460.48 376.99 460.48 376.99C454.48 404.99 489.48 424.99 489.48 424.99Z"
+              fill="#ABB1D1"
+            />
+            <path
+              id="Vector_37"
+              opacity="0.1"
+              d="M565.48 246.99L564.3 261.91C546.9 266.91 534.48 250.99 534.48 250.99C532.665 251.477 530.882 252.074 529.14 252.78C529.89 244.03 530.48 237.99 530.48 237.99L565.48 246.99Z"
+              fill="black"
+            />
+            <path
+              id="Vector_38"
+              opacity="0.1"
+              d="M493.95 313.39C493.48 318.06 493.48 320.99 493.48 320.99C493.48 320.99 470.48 339.99 431.48 310.99C392.48 281.99 357.48 289.99 357.48 289.99C357.48 289.99 357.89 287.67 358.72 283.99C361.48 278.34 364.48 275.99 364.48 275.99L489.48 299.99L493.95 313.39Z"
+              fill="black"
+            />
+            <path
+              id="Vector_39"
+              d="M578.96 207.94C576.35 228.29 575.48 253.94 575.48 253.94C552.48 271.94 534.48 248.94 534.48 248.94C512.76 254.77 502.55 273.78 497.74 290.37C495.164 299.344 493.732 308.607 493.48 317.94C493.48 317.94 487.4 322.94 476.2 323.94C465.61 324.83 450.43 322.07 431.48 307.94C392.48 278.94 357.48 286.94 357.48 286.94C357.48 286.94 364.48 246.94 380.48 234.94C396.48 222.94 408.48 207.94 428.48 161.94C448.48 115.94 489.48 126.94 489.48 126.94C489.48 126.94 491.48 117.94 528.48 126.94C537.492 129.302 545.834 133.721 552.85 139.85C572.64 156.49 582.24 182.3 578.96 207.94Z"
+              fill="white"
+            />
+            <path
+              id="Vector_40"
+              d="M541.85 149.49C541.8 150.82 541.69 152.3 541.51 153.95C539.51 171.95 537.51 169.95 515.51 173.95C501.83 176.44 494.72 165.01 491.3 156.01C490.062 152.75 489.128 149.382 488.51 145.95L536.51 137.95C536.51 137.95 542.26 136.34 541.85 149.49Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_41"
+              opacity="0.05"
+              d="M497.74 290.42C495.164 299.394 493.732 308.657 493.48 317.99C493.48 317.99 487.4 322.99 476.2 323.99C475.884 323.353 475.643 322.682 475.48 321.99C473.48 312.99 458.48 296.99 458.48 296.99C448.48 287.99 446.48 271.99 446.48 271.99L429.98 223.49L424.48 218.99C424.48 218.99 447.48 200.99 467.48 215.99C487.48 230.99 481.48 262.99 481.48 262.99L485.48 273.99C489.63 277.49 493.85 283.66 497.74 290.42Z"
+              fill="black"
+            />
+            <path
+              id="Vector_42"
+              d="M427.48 217.99L449.48 270.99C449.48 270.99 451.48 286.99 461.48 295.99C461.48 295.99 476.48 311.99 478.48 320.99C480.48 329.99 508.48 353.99 508.48 353.99C508.48 353.99 534.48 377.99 536.48 386.99C536.48 386.99 560.48 393.99 557.48 407.99C557.48 407.99 575.48 389.99 557.48 372.99C539.48 355.99 515.48 320.99 515.48 320.99C515.48 320.99 501.48 283.99 488.48 272.99L484.48 261.99C484.48 261.99 490.48 229.99 470.48 214.99C450.48 199.99 427.48 217.99 427.48 217.99Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_43"
+              opacity="0.1"
+              d="M440.48 596.99L414.48 610.99L406.48 604.99V600.99C415.464 600.352 424.193 597.718 432.03 593.28C434.43 591.92 436.69 590.58 438.5 589.4C439.55 594.03 440.48 596.99 440.48 596.99Z"
+              fill="black"
+            />
+            <path
+              id="Vector_44"
+              opacity="0.1"
+              d="M470.48 175.99L484.48 230.99C484.48 230.99 441.48 237.99 432.48 230.99C423.48 223.99 406.48 221.99 406.48 221.99C406.48 221.99 424.48 169.99 434.48 163.99C444.48 157.99 470.48 175.99 470.48 175.99Z"
+              fill="black"
+            />
+            <path
+              id="Vector_45"
+              d="M470.48 173.99L484.48 228.99C484.48 228.99 441.48 235.99 432.48 228.99C423.48 221.99 406.48 219.99 406.48 219.99C406.48 219.99 424.48 167.99 434.48 161.99C444.48 155.99 470.48 173.99 470.48 173.99Z"
+              fill="white"
+            />
+            <path
+              id="Vector_46"
+              opacity="0.1"
+              d="M541.85 148.49C539.049 152.356 535.487 155.609 531.383 158.047C527.278 160.485 522.718 162.058 517.983 162.669C513.248 163.28 508.439 162.915 503.85 161.598C499.261 160.281 494.99 158.039 491.3 155.01C490.062 151.75 489.128 148.382 488.51 144.95L536.51 136.95C536.51 136.95 542.26 135.34 541.85 148.49Z"
+              fill="black"
+            />
+            <path
+              id="Vector_47"
+              d="M548.48 126.99C548.48 136.273 544.793 145.175 538.229 151.739C531.665 158.303 522.763 161.99 513.48 161.99C504.197 161.99 495.295 158.303 488.731 151.739C482.168 145.175 478.48 136.273 478.48 126.99C478.48 126.41 478.48 125.83 478.48 125.25C478.711 115.967 482.62 107.157 489.346 100.756C496.073 94.3555 505.067 90.8893 514.35 91.12C523.633 91.3508 532.443 95.2595 538.844 101.986C545.245 108.713 548.711 117.707 548.48 126.99V126.99Z"
+              fill="#DB8B8B"
+            />
+            <path
+              id="Vector_48"
+              opacity="0.1"
+              d="M548.48 126.99C548.483 130.216 548.039 133.426 547.16 136.53C544.455 137.12 541.633 136.861 539.08 135.79C535.34 134.32 532.13 131.79 528.54 129.97C518.43 124.85 506.4 125.86 495.2 127.55C489.64 128.39 483.33 129.17 478.96 125.63C478.81 125.511 478.666 125.385 478.53 125.25C478.761 115.967 482.67 107.157 489.396 100.756C496.123 94.3555 505.117 90.8893 514.4 91.12C523.683 91.3508 532.493 95.2595 538.894 101.986C545.295 108.713 548.761 117.707 548.53 126.99H548.48Z"
+              fill="black"
+            />
+            <path
+              id="Vector_49"
+              opacity="0.05"
+              d="M384.98 234.49C384.98 234.49 410.98 241.49 418.98 259.49C426.98 277.49 448.62 280.78 448.62 280.78"
+              fill="black"
+            />
+            <path
+              id="Vector_50"
+              d="M482.98 630.49H422.98V649.49H482.98V630.49Z"
+              fill="#6C63FF"
+            />
+            <path
+              id="Vector_51"
+              d="M482.98 630.49H422.98V649.49H482.98V630.49Z"
+              fill="#57565B"
+            />
+            <path
+              id="Vector_52"
+              d="M431.99 595.23C437.36 592.23 442.07 589.23 442.48 587.99C442.48 587.99 456.03 602.29 468.1 606.73C472.159 608.229 476.044 610.16 479.69 612.49C484.47 615.49 491.29 619.02 497.48 619.02C497.48 619.02 511.48 631.02 484.48 633.02C457.48 635.02 394.48 628.02 394.48 628.02L398.48 603.02C410.167 603.705 421.804 601 431.99 595.23Z"
+              fill="#ABB1D1"
+            />
+          </g>
+          <g id="left-wheel">
+            <path
+              id="Vector_53"
+              d="M255.23 716.99L248.96 619.05L248.83 618.84L242.51 621.04L213.43 705.89L167.18 673.1L240.85 619.69L240.92 619.48L241.34 619.33L246.09 615.88L168.85 572.57L149.93 593.37L152.93 612.87L241.75 614.49V616.49L151.27 614.87L147.85 592.73L173.75 564.27L212.5 519.07L213.19 520.94L221.39 511.94L251.85 517.4V516.19L253.85 516.25V517.76L299.21 525.88L256.92 610.49L250.75 614.96V615.46V616.02L348.55 581.94L336.94 673.15L253.94 620.28L251.02 618.64L299.96 697.52L255.23 716.99ZM251.23 622.65L257.08 714.03L297.13 696.65L251.23 622.65ZM170.65 673.08L212.44 702.71L239.78 622.97L170.65 673.08ZM252.97 617.42L255.06 618.59L335.41 669.79L346.21 584.92L252.97 617.42ZM245.87 610.22L248.38 614.27L248.82 613.95L251.82 519.42L222.08 514.1L213.92 523.1L245.87 610.22ZM170.45 571.16L245.29 613.16L243.99 611.03L212.41 524.76L175.22 565.63L170.45 571.16ZM253.85 519.77L250.85 612.49L255.37 609.21L296.28 527.39L253.85 519.77Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_54"
+              d="M364.92 589.95C360.91 572.131 352.79 555.495 341.21 541.37C336.911 536.121 332.171 531.25 327.04 526.81C307.314 509.779 282.491 499.779 256.467 498.381C230.443 496.983 204.692 504.265 183.254 519.085C161.816 533.904 145.906 555.422 138.02 580.262C130.134 605.102 130.719 631.857 139.683 656.328C148.647 680.799 165.482 701.601 187.547 715.47C209.612 729.339 235.657 735.488 261.595 732.954C287.533 730.42 311.895 719.345 330.858 701.468C349.822 683.591 362.312 659.923 366.37 634.18C367.314 628.119 367.789 621.994 367.79 615.86C367.797 607.144 366.834 598.454 364.92 589.95ZM249.73 704.3C231.498 704.281 213.714 698.647 198.797 688.164C183.879 677.682 172.552 662.859 166.356 645.712C160.16 628.565 159.395 609.926 164.165 592.329C168.935 574.732 179.009 559.031 193.018 547.361C207.026 535.692 224.288 528.619 242.457 527.106C260.627 525.593 278.821 529.712 294.567 538.904C310.312 548.096 322.845 561.914 330.46 578.48C338.076 595.045 340.405 613.554 337.13 631.49C333.38 651.933 322.58 670.414 306.611 683.718C290.642 697.021 270.514 704.304 249.73 704.3V704.3Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_55"
+              d="M249.73 628.27C256.805 628.27 262.54 622.535 262.54 615.46C262.54 608.385 256.805 602.65 249.73 602.65C242.655 602.65 236.92 608.385 236.92 615.46C236.92 622.535 242.655 628.27 249.73 628.27Z"
+              fill="#535461"
+            />
+          </g>
+          <g id="right-wheel">
+            <path
+              id="Vector_56"
+              d="M681.42 717.39L675.16 619.49L675.03 619.28L668.71 621.48L639.62 706.29L593.37 673.49L667.06 620.08L667.13 619.87L667.55 619.72L672.3 616.27L595.06 572.96L576.13 593.76L579.13 613.26L667.93 614.84V616.84L577.45 615.22L574.05 593.11L599.94 564.66L638.66 519.49L639.35 521.36L647.55 512.36L678.09 517.83V516.62L680.09 516.68V518.19L725.45 526.31L683.12 610.96L676.95 615.43V615.93V616.49L774.76 582.41L763.15 673.62L680.15 620.75L677.23 619.11L726.17 698L681.42 717.39ZM677.42 623.05L683.27 714.43L723.32 697.05L677.42 623.05ZM596.85 673.49L638.64 703.12L665.98 623.38L596.85 673.49ZM679.17 617.83L681.26 619L761.61 670.2L772.41 585.33L679.17 617.83ZM672.07 610.63L674.58 614.68L675.02 614.36L678.02 519.83L648.28 514.49L640.12 523.49L672.07 610.63ZM596.68 571.58L671.52 613.58L670.22 611.45L638.64 525.18L601.44 566.06L596.68 571.58ZM680.05 520.19L677.05 612.88L681.57 609.6L722.48 527.78L680.05 520.19Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_57"
+              d="M676.33 498.61C665.717 498.598 655.15 500.024 644.92 502.85C639.644 504.305 634.477 506.133 629.46 508.32C602.73 519.907 581.247 540.997 569.167 567.508C557.087 594.019 555.269 624.069 564.065 651.843C572.86 679.618 591.644 703.143 616.782 717.869C641.921 732.594 671.627 737.473 700.155 731.562C728.682 725.65 754.004 709.369 771.221 685.867C788.438 662.365 796.327 633.312 793.362 604.33C790.396 575.348 776.787 548.495 755.168 528.966C733.548 509.438 705.454 498.622 676.32 498.61H676.33ZM675.93 704.7C655.649 704.692 635.981 697.746 620.192 685.017C604.404 672.288 593.445 654.541 589.135 634.723C584.825 614.905 587.424 594.209 596.501 576.073C605.577 557.936 620.584 543.45 639.03 535.02C643.722 532.872 648.594 531.142 653.59 529.85C665.802 526.68 678.549 526.147 690.984 528.287C703.418 530.427 715.253 535.191 725.703 542.261C736.153 549.332 744.977 558.547 751.588 569.293C758.199 580.039 762.446 592.069 764.046 604.585C765.646 617.1 764.562 629.812 760.866 641.875C757.17 653.939 750.948 665.077 742.613 674.548C734.277 684.02 724.02 691.608 712.524 696.806C701.028 702.005 688.557 704.696 675.94 704.7H675.93Z"
+              fill="#535461"
+            />
+            <path
+              id="Vector_58"
+              d="M675.93 628.67C683.005 628.67 688.74 622.935 688.74 615.86C688.74 608.785 683.005 603.05 675.93 603.05C668.855 603.05 663.12 608.785 663.12 615.86C663.12 622.935 668.855 628.67 675.93 628.67Z"
+              fill="#535461"
+            />
+          </g>
+          <path
+            id="hat"
+            d="M453.16 105.34C455.29 112.02 465.52 112.23 470.77 117.15C473.5 119.71 474.77 123.49 477.77 125.77C481.94 128.95 487.96 128.25 493.27 127.49C503.96 125.97 515.44 125.06 525.08 129.67C528.5 131.3 531.57 133.58 535.14 134.91C538.71 136.24 543.14 136.4 546.04 134.04C548.36 132.15 549.21 129.04 551.31 126.96C552.94 125.32 555.21 124.4 557.07 122.96C561.15 119.88 562.91 114.86 564.07 110.06C566.47 100.18 567.16 89.53 563.07 80.16C558.98 70.79 549.14 63.16 538.4 63.65C535.11 63.8 531.9 64.65 528.62 65.01C520.07 65.88 511.62 63.01 503.04 62.52C500.551 62.2172 498.027 62.5616 495.71 63.52C493.963 64.4908 492.457 65.8406 491.3 67.47C487.372 72.6154 484.682 78.5969 483.44 84.95C482.44 89.74 482.39 94.08 476.52 94.82C469.85 95.7 448.65 91.21 453.16 105.34Z"
+            fill="#472727"
           />
         </g>
-        <path
-          id="hat"
-          d="M453.16 105.34C455.29 112.02 465.52 112.23 470.77 117.15C473.5 119.71 474.77 123.49 477.77 125.77C481.94 128.95 487.96 128.25 493.27 127.49C503.96 125.97 515.44 125.06 525.08 129.67C528.5 131.3 531.57 133.58 535.14 134.91C538.71 136.24 543.14 136.4 546.04 134.04C548.36 132.15 549.21 129.04 551.31 126.96C552.94 125.32 555.21 124.4 557.07 122.96C561.15 119.88 562.91 114.86 564.07 110.06C566.47 100.18 567.16 89.53 563.07 80.16C558.98 70.79 549.14 63.16 538.4 63.65C535.11 63.8 531.9 64.65 528.62 65.01C520.07 65.88 511.62 63.01 503.04 62.52C500.551 62.2172 498.027 62.5616 495.71 63.52C493.963 64.4908 492.457 65.8406 491.3 67.47C487.372 72.6154 484.682 78.5969 483.44 84.95C482.44 89.74 482.39 94.08 476.52 94.82C469.85 95.7 448.65 91.21 453.16 105.34Z"
-          fill="#472727"
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear"
-          x1="917"
-          y1="115.5"
-          x2="162.5"
-          y2="651.5"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#63FFFF" />
-          <stop offset="1" stop-color="#CD20E9" stop-opacity="0.6" />
-        </linearGradient>
-        <clipPath id="clip0">
-          <rect width="1057.7" height="784.98" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
+        <defs>
+          <linearGradient
+            id="paint0_linear"
+            x1="917"
+            y1="115.5"
+            x2="162.5"
+            y2="651.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#63FFFF" />
+            <stop offset="1" stop-color="#CD20E9" stop-opacity="0.6" />
+          </linearGradient>
+          <clipPath id="clip0">
+            <rect width="1057.7" height="784.98" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <!-- Control Animation State with a Class -->
+    <button id="toggle-animation" class="btn">Toggle Animation</button>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/081-animated SVG/script.js b/081-animated SVG/script.js
new file mode 100644
index 0000000..21a995e
--- /dev/null
+++ b/081-animated SVG/script.js	
@@ -0,0 +1,7 @@
+const toggleAnimation = document.getElementById("toggle-animation");
+const svgWrapper = document.querySelector(".svg-wrapper");
+
+// Control Animation State with a Class
+toggleAnimation.addEventListener("click", () => {
+  svgWrapper.classList.toggle("active");
+});
diff --git a/081-animated SVG/style.css b/081-animated SVG/style.css
index 4188d9b..fce1770 100644
--- a/081-animated SVG/style.css	
+++ b/081-animated SVG/style.css	
@@ -1,3 +1,11 @@
+/* Refactor Animation Timing with Custom Properties */
+:root {
+  --wheel-speed: 2s;
+  --wheel-ease: linear;
+  --rider-bob: 1s ease-in-out;
+  --hat-bob: 1s ease-in-out;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -12,27 +20,94 @@ body {
   height: 100vh;
 }
 
+/* Add a Parallax Background Effect */
+.svg-wrapper {
+  position: relative;
+  width: 80vw;
+  max-width: 1058px;
+  aspect-ratio: 1058 / 785;
+  height: auto;
+  min-height: 300px;
+  margin: 0 auto;
+}
+
+#parallax-bg {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 60%;
+  z-index: 0;
+  background: url('data:image/svg+xml;utf8,<svg width="400" height="60" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="60" fill="%23b3b3b3"/><line x1="0" y1="30" x2="400" y2="30" stroke="white" stroke-width="4" stroke-dasharray="100"/></svg>');
+  background-size: 200px 200px;
+  background-repeat: repeat-x;
+  background-position: center bottom;
+  clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
+}
+
 svg {
-  max-width: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: 1;
+}
+
+/* Control Animation State with a Class */
+button {
+  margin: 24px 0;
+  padding: 12px 32px;
+  font-size: 1.2rem;
+  background: #484a5d;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(72, 74, 93, 0.18);
+  transition: background 0.2s;
+  z-index: 1;
+}
+
+button:hover {
+  background: #737586;
 }
 
-#left-wheel,
-#right-wheel {
+/* Make the Animation Interactive on Hover */
+.active.svg-wrapper:hover {
+  --wheel-speed: 0.5s;
+}
+
+/* Control Animation State with a Class */
+.active.svg-wrapper #left-wheel,
+.active.svg-wrapper #right-wheel {
   transform-origin: center;
   transform-box: fill-box;
-  animation: rotateWheel 2s linear infinite;
+  animation: rotateWheel var(--wheel-speed) var(--wheel-ease) infinite;
 }
 
-#man-bike {
+.active.svg-wrapper #man-bike {
   transform-origin: bottom;
   transform-box: fill-box;
-  animation: rideBike 1s ease-in-out infinite alternate;
+  animation: rideBike var(--rider-bob) infinite alternate;
 }
 
-#hat {
+.active.svg-wrapper #hat {
   transform-origin: bottom;
   transform-box: fill-box;
-  animation: moveHat 1s ease-in-out infinite alternate;
+  animation: moveHat var(--hat-bob) infinite alternate;
+}
+
+.active.svg-wrapper #parallax-bg {
+  animation: scroll-bg var(--wheel-speed) linear infinite;
+}
+
+@keyframes scroll-bg {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: -200px;
+  }
 }
 
 @keyframes rotateWheel {
diff --git a/082-parallax landing page/index.html b/082-parallax landing page/index.html
index 8c6c2ca..05caf2c 100644
--- a/082-parallax landing page/index.html	
+++ b/082-parallax landing page/index.html	
@@ -49,7 +49,8 @@ <h2 class="secondary-text">Short is the New Long</h2>
         </div>
       </div>
     </section>
-    <section class="section section-grid">
+    <!-- Create a "Reveal on Scroll" Effect -->
+    <section class="section section-grid" id="section-grid">
       <div class="rellax" data-rellax-speed="1" data-rellax-xs-speed="3">
         <i class="fas fa-video fa-3x secondary-text"></i>
         <h2>Watch<span class="secondary-text dot">.</span></h2>
@@ -78,14 +79,71 @@ <h2>Learn<span class="secondary-text dot">.</span></h2>
         </p>
       </div>
     </section>
+    <!-- Add a Horizontal Parallax Effect -->
+    <section
+      id="horizontal-section"
+      class="section section-horizontal-parallax"
+    >
+      <div
+        class="rellax-horizontal"
+        data-rellax-horizontal="true"
+        data-rellax-horizontal-speed="-3"
+      >
+        <i class="fas fa-rocket fa-3x secondary-text"></i>
+        <h2>Explore<span class="secondary-text dot">.</span></h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
+          molestiae placeat nesciunt.
+        </p>
+      </div>
+      <div
+        class="rellax-horizontal horizontal-item-reversed"
+        data-rellax-horizontal="true"
+        data-rellax-horizontal-speed="3"
+      >
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
+          molestiae placeat nesciunt.
+        </p>
+        <i class="fas fa-atom fa-3x secondary-text"></i>
+        <h2>Create<span class="secondary-text dot">.</span></h2>
+      </div>
+      <div
+        class="rellax-horizontal"
+        data-rellax-horizontal="true"
+        data-rellax-horizontal-speed="-3"
+      >
+        <i class="fas fa-satellite-dish fa-3x secondary-text"></i>
+        <h2>Connect<span class="secondary-text dot">.</span></h2>
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
+          molestiae placeat nesciunt.
+        </p>
+      </div>
+      <div
+        class="rellax-horizontal horizontal-item-reversed"
+        data-rellax-horizontal="true"
+        data-rellax-horizontal-speed="3"
+      >
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
+          molestiae placeat nesciunt.
+        </p>
+        <i class="fas fa-brain fa-3x secondary-text"></i>
+        <h2>Innovate<span class="secondary-text dot">.</span></h2>
+      </div>
+    </section>
+    <!-- Improve Footer Accessibility -->
     <footer class="footer">
-      <ul>
-        <li><a href="#">Faq</a></li>
-        <li><a href="#">Terms of Use</a></li>
-        <li><a href="#">Privacy Notice</a></li>
-        <li><a href="#">Contact Us</a></li>
-        <li><a href="#">About Us</a></li>
-      </ul>
+      <nav aria-label="Footer navigation">
+        <ul>
+          <li><a href="#">Faq</a></li>
+          <li><a href="#">Terms of Use</a></li>
+          <li><a href="#">Privacy Notice</a></li>
+          <li><a href="#">Contact Us</a></li>
+          <li><a href="#">About Us</a></li>
+        </ul>
+      </nav>
     </footer>
 
     <script
diff --git a/082-parallax landing page/script.js b/082-parallax landing page/script.js
index 46f1636..2c0c01a 100644
--- a/082-parallax landing page/script.js	
+++ b/082-parallax landing page/script.js	
@@ -1 +1,19 @@
-let rellax = new Rellax(".rellax");
+const sectionGrid = document.getElementById("section-grid");
+
+// Disable Parallax on Mobile
+if (window.innerWidth >= 768) {
+  new Rellax(".rellax", {
+    callback: function (position) {
+      if (position.y < window.innerHeight / 1.4) {
+        // Create a "Reveal on Scroll" Effect
+        sectionGrid.classList.add("is-visible");
+      }
+    },
+  });
+
+  // Add a Horizontal Parallax Effect
+  new Rellax(".rellax-horizontal", {
+    horizontal: true,
+    wrapper: "#horizontal-section",
+  });
+}
diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 2b4b12c..44817b9 100644
--- a/082-parallax landing page/style.css	
+++ b/082-parallax landing page/style.css	
@@ -69,8 +69,6 @@ ul {
 .section-top {
   min-height: 200px;
   padding-top: 20px;
-  background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center bottom /
-    100vw auto;
 }
 
 .section-top .content {
@@ -93,8 +91,6 @@ ul {
 .section-stream {
   margin-top: -1px;
   min-height: 400px;
-  background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top /
-    100vw auto;
 }
 
 .section-stream h2 {
@@ -131,6 +127,20 @@ ul {
   padding-left: 2px;
 }
 
+.section-horizontal-parallax > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.section-horizontal-parallax > div:nth-child(2),
+.section-horizontal-parallax > div:nth-child(4) {
+  flex-direction: column-reverse;
+}
+
+.section-horizontal-parallax > div i {
+  display: none;
+}
+
 .footer {
   border-top: var(--text-color) 1px solid;
   padding: 30px;
@@ -146,6 +156,10 @@ ul {
   .section-top {
     min-height: 500px;
     padding-top: 0;
+    /* Disable Parallax on Mobile */
+    background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center bottom /
+      100vw auto;
+    background-size: 100vw auto;
   }
 
   .section-top .content {
@@ -163,6 +177,8 @@ ul {
 
   .section-stream {
     min-height: 700px;
+    background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top /
+      100vw auto;
   }
 
   .section-stream .play {
@@ -186,6 +202,61 @@ ul {
     grid-gap: 30px;
   }
 
+  /* Create a "Reveal on Scroll" Effect */
+  .section-grid > div {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 1s ease-out, transform 1s ease-out;
+  }
+
+  .section-grid.is-visible > div {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Add a Horizontal Parallax Effect */
+  .section-horizontal-parallax {
+    overflow-x: auto;
+    display: flex;
+    gap: 20px;
+    padding: 40px 20px;
+    text-align: center;
+    margin-bottom: -20px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary--color) var(--primary-color);
+  }
+
+  .section-horizontal-parallax > div {
+    flex: 0 0 600px;
+    white-space: normal;
+  }
+
+  .section-horizontal-parallax > div i {
+    display: block;
+  }
+
+  .section-horizontal-parallax > div:nth-child(2),
+  .section-horizontal-parallax > div:nth-child(4) {
+    flex-direction: column;
+  }
+
+  .section-horizontal-parallax::-webkit-scrollbar {
+    height: 10px;
+  }
+
+  .section-horizontal-parallax::-webkit-scrollbar-track {
+    background: var(--primary-color);
+  }
+
+  .section-horizontal-parallax::-webkit-scrollbar-thumb {
+    background-color: var(--secondary--color);
+    border-radius: 5px;
+  }
+
+  .section-horizontal-parallax::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-color);
+  }
+
   .footer ul {
     display: flex;
     align-items: center;
diff --git a/083-full screen image slider/index.html b/083-full screen image slider/index.html
index 89a3d10..dc7a934 100644
--- a/083-full screen image slider/index.html	
+++ b/083-full screen image slider/index.html	
@@ -72,6 +72,8 @@ <h1>Slide Six</h1>
         </div>
       </div>
     </div>
+    <!-- Implement Slide Indicators -->
+    <div class="indicators"></div>
     <div class="buttons">
       <button id="prev"><i class="fas fa-arrow-left"></i></button>
       <button id="next"><i class="fas fa-arrow-right"></i></button>
diff --git a/083-full screen image slider/script.js b/083-full screen image slider/script.js
index 5634bcc..e8f9988 100644
--- a/083-full screen image slider/script.js	
+++ b/083-full screen image slider/script.js	
@@ -1,45 +1,106 @@
-const slides = document.querySelectorAll(".slide");
+const slider = document.querySelector(".slider");
+const slides = slider.querySelectorAll(".slide");
 const nextButton = document.getElementById("next");
 const prevButton = document.getElementById("prev");
+const indicatorsContainer = document.querySelector(".indicators");
+
 const auto = true;
 const intervalTime = 5000;
 let slideInterval;
 
-const nextSlide = () => {
-  const current = document.querySelector(".current");
-  current.classList.remove("current");
-  if (current.nextElementSibling) {
-    current.nextElementSibling.classList.add("current");
-  } else {
-    slides[0].classList.add("current");
-  }
-};
+// Implement Slide Indicators
+function generateIndicators() {
+  indicatorsContainer.innerHTML = "";
+  slides.forEach((_, index) => {
+    const dot = document.createElement("button");
+    dot.classList.add("indicator-dot");
+    if (index === 0) dot.classList.add("active");
+    dot.addEventListener("click", () => {
+      document.querySelector(".slide.current").classList.remove("current");
+      slides[index].classList.add("current");
+      updateIndicators(index);
+      resetAutoSlide();
+    });
+    indicatorsContainer.appendChild(dot);
+  });
+}
+
+function updateIndicators(activeIndex) {
+  document.querySelectorAll(".indicator-dot").forEach((dot, index) => {
+    dot.classList.toggle("active", index === activeIndex);
+  });
+}
 
-const prevSlide = () => {
+function changeSlide(offset) {
   const current = document.querySelector(".current");
   current.classList.remove("current");
-  if (current.previousElementSibling) {
-    current.previousElementSibling.classList.add("current");
-  } else {
-    slides[slides.length - 1].classList.add("current");
-  }
-};
+  // Add a Fade Transition
+  current.classList.add("exiting");
+  const slidesArr = Array.from(slides);
+  let newIndex = slidesArr.indexOf(current) + offset;
+  if (newIndex < 0) newIndex = slides.length - 1;
+  if (newIndex >= slides.length) newIndex = 0;
+  slides[newIndex].classList.add("current");
+  updateIndicators(newIndex);
+  current.addEventListener("transitionend", function handler() {
+    current.classList.remove("exiting");
+    current.removeEventListener("transitionend", handler);
+  });
+}
 
-nextButton.addEventListener("click", () => {
-  nextSlide();
+function resetAutoSlide() {
   if (auto) {
     clearInterval(slideInterval);
     slideInterval = setInterval(nextSlide, intervalTime);
   }
-});
-prevButton.addEventListener("click", () => {
+}
+
+function nextSlide() {
+  changeSlide(1);
+}
+
+function prevSlide() {
+  changeSlide(-1);
+}
+
+function goToNextSlide() {
+  nextSlide();
+  resetAutoSlide();
+}
+
+function goToPrevSlide() {
   prevSlide();
-  if (auto) {
+  resetAutoSlide();
+}
+
+nextButton.addEventListener("click", goToNextSlide);
+prevButton.addEventListener("click", goToPrevSlide);
+
+// Add Keyboard Navigation
+document.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowRight") {
+    goToNextSlide();
+  } else if (e.key === "ArrowLeft") {
+    goToPrevSlide();
+  }
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) {
     clearInterval(slideInterval);
-    slideInterval = setInterval(nextSlide, intervalTime);
+  } else {
+    resetAutoSlide();
   }
 });
 
+// Pause on Hover
+slider.addEventListener("mouseenter", () => {
+  clearInterval(slideInterval);
+});
+
+slider.addEventListener("mouseleave", resetAutoSlide);
+
+generateIndicators();
 if (auto) {
   slideInterval = setInterval(nextSlide, intervalTime);
 }
diff --git a/083-full screen image slider/style.css b/083-full screen image slider/style.css
index e89faac..4728265 100644
--- a/083-full screen image slider/style.css	
+++ b/083-full screen image slider/style.css	
@@ -33,6 +33,13 @@ body {
   opacity: 1;
 }
 
+/* Add a Fade Transition */
+.slide.exiting {
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
 .slide .content {
   position: absolute;
   bottom: -300px;
@@ -87,6 +94,31 @@ body {
     no-repeat center center/cover;
 }
 
+/* Implement Slide Indicators */
+.indicators {
+  position: absolute;
+  bottom: 130px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  z-index: 10;
+}
+.indicator-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #e5ebf3;
+  opacity: 0.5;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+.indicator-dot.active {
+  opacity: 1;
+  background: #495b73;
+}
+
 .buttons button#prev {
   position: absolute;
   top: 50%;
@@ -130,4 +162,8 @@ body {
   .slide.current .content {
     transform: translateX(600px);
   }
+
+  .indicators {
+    bottom: 30px;
+  }
 }
diff --git a/084-fluid image lightbox/index.html b/084-fluid image lightbox/index.html
index 1714a6c..09636c5 100644
--- a/084-fluid image lightbox/index.html	
+++ b/084-fluid image lightbox/index.html	
@@ -6,6 +6,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
     <link rel="stylesheet" href="style.css" />
     <title>Lightbox</title>
   </head>
@@ -40,10 +46,20 @@
         />
       </div>
     </div>
-    <div class="modal">
+    <!-- Close Modal with Escape Key -->
+    <dialog class="modal">
+      <!-- Add Next/Previous Navigation -->
+      <button class="prev" aria-label="Previous image">
+        <i class="fas fa-chevron-left"></i>
+      </button>
+      <!-- Add Image Preloading -->
+      <div class="spinner"></div>
       <img src="" alt="" class="full-img" />
+      <button class="next" aria-label="Next image">
+        <i class="fas fa-chevron-right"></i>
+      </button>
       <p class="caption"></p>
-    </div>
+    </dialog>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/084-fluid image lightbox/script.js b/084-fluid image lightbox/script.js
index ebb5a0a..b0cc7a4 100644
--- a/084-fluid image lightbox/script.js	
+++ b/084-fluid image lightbox/script.js	
@@ -2,23 +2,110 @@ const modal = document.querySelector(".modal");
 const previews = document.querySelectorAll(".gallery img");
 const original = document.querySelector(".full-img");
 const caption = document.querySelector(".caption");
+const spinner = document.querySelector(".spinner");
+const nextButton = document.querySelector(".next");
+const prevButton = document.querySelector(".prev");
 
-previews.forEach((preview) => {
-  preview.addEventListener("click", () => {
-    modal.classList.add("open");
-    original.classList.add("open");
-    const originalUrl = new URL(preview.src);
-    const originalSize = preview.getAttribute("data-original");
-    originalUrl.searchParams.set("w", originalSize);
-    original.src = originalUrl.toString();
+let currentIndex = 0;
+let touchStartX = 0;
+let touchEndX = 0;
+const swipeThreshold = 50; // Minimum pixel distance for swipe
+
+function setModalState({ loading }) {
+  if (loading) {
+    spinner.style.display = "block";
+    original.style.display = "none";
+    caption.style.display = "none";
+  } else {
+    spinner.style.display = "none";
+    original.style.display = "";
+    caption.style.display = "";
+  }
+}
+
+function navigateImage(direction) {
+  if (direction === "next") {
+    currentIndex = (currentIndex + 1) % previews.length;
+  } else if (direction === "prev") {
+    currentIndex = (currentIndex - 1 + previews.length) % previews.length;
+  }
+  showImage(currentIndex);
+}
+
+function showImage(index) {
+  // Add Image Preloading
+  setModalState({ loading: true });
+  const preview = previews[index];
+  const originalUrl = new URL(preview.src);
+  const originalSize = preview.getAttribute("data-original");
+  originalUrl.searchParams.set("w", originalSize);
+  const img = new Image();
+  img.src = originalUrl.toString();
+  img.onload = () => {
+    original.src = img.src;
     caption.textContent = preview.alt;
     // Reference: https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext
+    original.classList.add("open");
+    setModalState({ loading: false });
+  };
+}
+
+previews.forEach((preview, index) => {
+  preview.addEventListener("click", () => {
+    currentIndex = index;
+    modal.showModal();
+    showImage(currentIndex);
   });
 });
 
 modal.addEventListener("click", (e) => {
-  if (e.target.classList.contains("modal")) {
-    modal.classList.remove("open");
+  if (e.target === modal) {
+    modal.close();
     original.classList.remove("open");
   }
 });
+
+// Close Modal with Escape Key
+// document.addEventListener("keydown", (e) => {
+//   if (e.key === "Escape" && modal.classList.contains("open")) {
+//     modal.classList.remove("open");
+//     original.classList.remove("open");
+//   }
+// });
+
+nextButton.addEventListener("click", (e) => {
+  e.stopPropagation();
+  navigateImage("next");
+});
+
+prevButton.addEventListener("click", (e) => {
+  e.stopPropagation();
+  navigateImage("prev");
+});
+
+// Implement Touch/Swipe Navigation
+modal.addEventListener("touchstart", (e) => {
+  if (e.touches.length === 1 && !e.target.closest("button")) {
+    touchStartX = e.touches[0].clientX;
+  }
+});
+
+modal.addEventListener("touchmove", (e) => {
+  if (e.touches.length === 1) {
+    touchEndX = e.touches[0].clientX;
+    e.preventDefault(); // Prevent scrolling
+  }
+});
+
+modal.addEventListener("touchend", () => {
+  const deltaX = touchEndX - touchStartX;
+  if (Math.abs(deltaX) > swipeThreshold) {
+    if (deltaX < 0) {
+      navigateImage("next");
+    } else {
+      navigateImage("prev");
+    }
+  }
+  touchStartX = 0;
+  touchEndX = 0;
+});
diff --git a/084-fluid image lightbox/style.css b/084-fluid image lightbox/style.css
index 5e0fc20..64f4e06 100644
--- a/084-fluid image lightbox/style.css	
+++ b/084-fluid image lightbox/style.css	
@@ -33,21 +33,42 @@ body {
   transform: scale(1.2);
 }
 
+/* Close Modal with Escape Key */
 .modal {
-  background-color: rgba(0, 0, 0, 0.8);
+  padding: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease-out;
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+}
+
+/* Add Image Preloading */
+.spinner {
+  display: none;
+  border: 4px solid #9f9b98;
+  border-top: 4px solid #d29744;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.modal.open {
-  opacity: 1;
-  pointer-events: all;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .full-img {
@@ -63,11 +84,88 @@ body {
   transform: translate(-50%, -50%) scale(1);
 }
 
+/* Improve Mobile Support */
 .modal p {
-  color: white;
-  font-size: 2rem;
   position: absolute;
-  bottom: 5%;
+  top: 15%;
   left: 50%;
-  transform: translate(-50%, -5%);
+  transform: translateX(-50%);
+  width: 90vw;
+  max-width: 90vw;
+  background: rgba(30, 30, 30, 0.7);
+  color: #dfddda;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 1.8rem;
+  padding: 0.75em 1em;
+  text-align: center;
+  z-index: 1;
+}
+
+.modal button {
+  background: rgba(30, 30, 30, 0.7);
+  border: 2px solid #d29744;
+  color: #d29744;
+  border-radius: 50%;
+  font-size: 1.1rem;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  position: absolute;
+  top: 5%;
+  transform: translateY(0);
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  z-index: 2;
+}
+
+.modal button.prev {
+  left: 16px;
+}
+
+.modal button.next {
+  right: 16px;
+}
+
+.modal button.prev i {
+  margin-right: 4px;
+}
+
+.modal button.next i {
+  margin-left: 4px;
+}
+
+.modal button:hover {
+  background: #d29744;
+  color: #dfddda;
+  border-color: #714622;
+}
+
+@media (min-width: 768px) {
+  .modal p {
+    top: initial;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: auto;
+    max-width: 70vw;
+    background: transparent;
+    box-shadow: none;
+    font-size: 2.5rem;
+  }
+
+  .modal button {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    font-size: 1.6rem;
+    z-index: 1;
+  }
+
+  .modal button.prev {
+    left: 24px;
+  }
+
+  .modal button.next {
+    right: 24px;
+  }
 }
diff --git a/085-sneaker shop/index.html b/085-sneaker shop/index.html
index c7170f5..2c7c2a4 100644
--- a/085-sneaker shop/index.html	
+++ b/085-sneaker shop/index.html	
@@ -10,9 +10,44 @@
     <title>Great Sneakers Inc.</title>
   </head>
   <body>
+    <!-- Create a Dark Mode Toggle -->
+    <button
+      id="darkModeToggle"
+      class="btn"
+      type="button"
+      aria-label="Toggle dark mode"
+    >
+      <span class="icon-sun" aria-hidden="true" style="display: inline">
+        <!-- Sun SVG -->
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="5" fill="currentColor" />
+          <g stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </g>
+        </svg>
+      </span>
+      <span class="icon-moon" aria-hidden="true" style="display: none">
+        <!-- Moon SVG -->
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </button>
     <header class="hero">
       <div class="container spacing">
-        <h1 class="primary-title">It's okay to be a little obsessed with shoes</h1>
+        <h1 class="primary-title">
+          It's okay to be a little obsessed with shoes
+        </h1>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
           perspiciatis facilis beatae laudantium quidem enim sit sequi!
@@ -61,7 +96,8 @@ <h2 class="section-title">Featured sneakers</h2>
       <section class="our-products">
         <div class="container">
           <h2 class="section-title">Our sneakers</h2>
-          <article class="product shoe-red spacing">
+          <!-- Animate Products on Scroll -->
+          <article class="product shoe-red spacing hidden">
             <img
               src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true"
               alt=""
@@ -75,7 +111,7 @@ <h3 class="product__title">A really nice shoe</h3>
             <a href="" class="btn">Buy now</a>
           </article>
 
-          <article class="product shoe-white shoe-left spacing">
+          <article class="product shoe-white shoe-left spacing hidden">
             <img
               src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true"
               alt=""
@@ -89,7 +125,7 @@ <h3 class="product__title">A really nice shoe</h3>
             <a href="" class="btn">Buy now</a>
           </article>
 
-          <article class="product shoe-blue spacing">
+          <article class="product shoe-blue spacing hidden">
             <img
               src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true"
               alt=""
@@ -105,5 +141,6 @@ <h3 class="product__title">A really nice shoe</h3>
         </div>
       </section>
     </main>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/085-sneaker shop/script.js b/085-sneaker shop/script.js
new file mode 100644
index 0000000..cdb52a0
--- /dev/null
+++ b/085-sneaker shop/script.js	
@@ -0,0 +1,31 @@
+const darkModeToggle = document.getElementById("darkModeToggle");
+const iconSun = darkModeToggle.querySelector(".icon-sun");
+const iconMoon = darkModeToggle.querySelector(".icon-moon");
+const products = document.querySelectorAll(".product");
+
+function updateIcons() {
+  const isDark = document.body.classList.contains("dark-mode");
+  iconSun.style.display = isDark ? "none" : "inline";
+  iconMoon.style.display = isDark ? "inline" : "none";
+}
+
+// Create a Dark Mode Toggle
+darkModeToggle.addEventListener("click", function () {
+  document.body.classList.toggle("dark-mode");
+  updateIcons();
+});
+
+// Animate Products on Scroll
+const observer = new IntersectionObserver(
+  (entries, obs) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.remove("hidden");
+        obs.unobserve(entry.target);
+      }
+    });
+  },
+  { threshold: 0.2 }
+);
+
+products.forEach((product) => observer.observe(product));
diff --git a/085-sneaker shop/style.css b/085-sneaker shop/style.css
index a8af7c4..b6bd611 100644
--- a/085-sneaker shop/style.css	
+++ b/085-sneaker shop/style.css	
@@ -1,5 +1,18 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap");
 
+/* Create a Dark Mode Toggle */
+:root {
+  --clr-text: #fff;
+  --clr-background: #fff;
+  --clr-background-secondary: #eee;
+  --clr-text-secondary: #333;
+  --clr-title-text: #17353d;
+  --clr-accent: blue;
+  --clr-inner: limegreen;
+  --clr-outer: purple;
+  --clr-toggle: #ffb347;
+}
+
 *,
 *::before,
 *::after {
@@ -12,6 +25,41 @@ body {
   font-family: "Noto Sans JP", sans-serif;
   margin: 0;
   line-height: 1.6;
+  background: var(--clr-background);
+  overflow-x: hidden;
+}
+
+body.dark-mode {
+  --clr-text: #eee;
+  --clr-background: #222;
+  --clr-background-secondary: #333;
+  --clr-text-secondary: #ccc;
+  --clr-title-text: #fff;
+  --clr-accent: #ffb347;
+  --clr-inner: #222;
+  --clr-outer: #111;
+  --clr-toggle: #6a7fdb;
+}
+
+#darkModeToggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1;
+  cursor: pointer;
+  background-color: var(--clr-toggle);
+  border-radius: 50%;
+  padding: 0.5rem;
+}
+
+#darkModeToggle:focus {
+  outline-color: var(--clr-toggle);
+}
+
+#darkModeToggle svg {
+  vertical-align: middle;
+  width: 1.5em;
+  height: 1.5em;
 }
 
 img {
@@ -56,9 +104,9 @@ section {
 .btn {
   display: inline-block;
   text-decoration: none;
-  color: var(--clr-text, #fff);
+  color: var(--clr-text);
   font-weight: 700;
-  background-color: var(--clr-accent, blue);
+  background-color: var(--clr-accent);
   text-transform: uppercase;
   font-size: 1.125rem;
   padding: 0.5rem 1.25rem;
@@ -72,6 +120,12 @@ section {
   opacity: 0.9;
 }
 
+/* Improve Button Accessibility on Focus */
+.btn:focus {
+  outline: 2px solid var(--clr-accent);
+  outline-offset: 2px;
+}
+
 /* hero section */
 
 .primary-title {
@@ -86,7 +140,7 @@ section {
   font-size: 3.5rem;
   font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
   line-height: 1;
-  color: #17353d;
+  color: var(--clr-title-text);
   margin-bottom: 5rem;
 }
 
@@ -111,14 +165,14 @@ section {
 /* featured section */
 
 .featured {
-  background: #eee;
+  background: var(--clr-background-secondary);
 }
 
 .featured__item {
   display: block;
   position: relative;
   text-decoration: none;
-  color: #333;
+  color: var(--clr-text-secondary);
   text-align: center;
   line-height: 1.2;
   transform: scale(0.85);
@@ -170,6 +224,19 @@ section {
   border-radius: 1rem;
   margin-bottom: 5rem;
   text-align: center;
+  /* Add a Clearfix to Product Articles */
+  display: flow-root;
+}
+
+/* Animate Products on Scroll */
+.product.hidden {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 1s;
+}
+
+.product.shoe-left.hidden {
+  transform: translateX(100%);
 }
 
 .product__title {
diff --git a/086-coming soon page/index.html b/086-coming soon page/index.html
index e831289..cf29262 100644
--- a/086-coming soon page/index.html	
+++ b/086-coming soon page/index.html	
@@ -12,7 +12,24 @@
   <body>
     <div class="container">
       <h1 class="title">We Are Coming Soon</h1>
-      <button class="btn">Subscribe</button>
+      <button class="btn" id="open-modal-btn">Subscribe</button>
     </div>
+    <!-- Add a Modal for the Subscription Form -->
+    <dialog id="subscribe-modal" class="modal">
+      <form method="dialog" id="subscribe-form">
+        <h2 class="title">Subscribe to our Newsletter</h2>
+        <label for="email">Your Email</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          placeholder="you@example.com"
+        />
+        <button type="submit" class="btn">Sign Up</button>
+      </form>
+      <button id="close-modal-btn" aria-label="close">X</button>
+    </dialog>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/086-coming soon page/script.js b/086-coming soon page/script.js
new file mode 100644
index 0000000..2c81e0f
--- /dev/null
+++ b/086-coming soon page/script.js	
@@ -0,0 +1,26 @@
+// Add a Modal for the Subscription Form
+const modal = document.getElementById("subscribe-modal");
+const openBtn = document.getElementById("open-modal-btn");
+const closeBtn = document.getElementById("close-modal-btn");
+const form = document.getElementById("subscribe-form");
+
+openBtn.addEventListener("click", () => {
+  modal.showModal();
+});
+
+closeBtn.addEventListener("click", () => {
+  modal.close();
+});
+
+modal.addEventListener("click", (e) => {
+  if (e.target === modal) {
+    modal.close();
+  }
+});
+
+form.addEventListener("submit", (e) => {
+  const thankYouMessage = document.createElement("p");
+  thankYouMessage.textContent = "Thank you!";
+  thankYouMessage.classList.add("thank-you-message");
+  openBtn.replaceWith(thankYouMessage);
+});
diff --git a/086-coming soon page/style.css b/086-coming soon page/style.css
index ab8f7ec..40f1d11 100644
--- a/086-coming soon page/style.css	
+++ b/086-coming soon page/style.css	
@@ -2,6 +2,8 @@
 
 :root {
   --gradient: linear-gradient(90deg, #7f7fd5, #86a8e7, #f64f59);
+  /* Refactor Animation with Custom Properties */
+  --animation-duration: 20s;
 }
 
 * {
@@ -23,7 +25,7 @@ body {
   /* we are playing with background-position since background-image doesn't support transitions */
   background-size: 300%;
   background-image: var(--gradient);
-  animation: bg-animation 20s infinite alternate;
+  /* animation: bg-animation var(--animation-duration) infinite alternate; */
 }
 
 @keyframes bg-animation {
@@ -62,7 +64,6 @@ body {
   color: transparent;
   -webkit-text-fill-color: transparent;
   background-size: 300%;
-  transition: background-position 1s;
 }
 
 .title:hover {
@@ -78,9 +79,74 @@ body {
   background: var(--gradient);
   background-size: 300%;
   background-position: left;
-  transition: background-position 350ms;
 }
 
 .btn:hover {
   background-position: right;
 }
+
+/* Improve Accessibility for the Button */
+.btn:focus {
+  outline: 2px solid #7f7fd5;
+  outline-offset: 2px;
+}
+
+/* Add a Modal for the Subscription Form */
+.modal {
+  border: none;
+  box-shadow: 0 0 2em rgba(0, 0, 0, 0.3);
+  padding: 2rem;
+  width: 90%;
+  max-width: 500px;
+}
+
+.modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(3px);
+}
+
+.modal h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 2rem;
+  text-align: left;
+}
+
+.modal form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.modal input {
+  font-size: 1rem;
+  padding: 0.5rem;
+}
+
+#close-modal-btn {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.thank-you-message {
+  padding: 0.5rem 1.25rem;
+  margin: 0;
+}
+
+/* Control Animation with prefers-reduced-motion */
+@media (prefers-reduced-motion: no-preference) {
+  body {
+    animation: bg-animation var(--animation-duration) infinite alternate;
+  }
+  .title {
+    transition: background-position 1s;
+  }
+  .btn {
+    transition: background-position 350ms;
+  }
+}
diff --git a/087-sliding signin signup form/index.html b/087-sliding signin signup form/index.html
index 3ea0785..3697772 100644
--- a/087-sliding signin signup form/index.html	
+++ b/087-sliding signin signup form/index.html	
@@ -17,47 +17,124 @@
   </head>
   <body>
     <div class="container" id="container">
-      <div class="form-container sign-up-container">
+      <!-- Improve Accessibility with ARIA -->
+      <div
+        class="form-container sign-up-container"
+        id="sign-up-container"
+        aria-hidden="false"
+      >
         <form>
-          <h1>Sign Up</h1>
-          <div class="social-container">
-            <a href="#" class="social"><i class="fab fa-instagram"></i></a>
-            <a href="#" class="social"><i class="fab fa-google"></i></a>
-            <a href="#" class="social"><i class="fab fa-tiktok"></i></a>
+          <!-- Refactor CSS with BEM -->
+          <h1 class="form-container__title">Sign Up</h1>
+          <div class="form-container__social-container">
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-instagram"></i
+            ></a>
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-google"></i
+            ></a>
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-tiktok"></i
+            ></a>
           </div>
-          <span>or use your email for registration</span>
-          <input type="text" placeholder="Name" />
-          <input type="email" placeholder="Email" />
-          <input type="password" placeholder="Password" />
-          <button onclick="return false;">Sign Up</button>
+          <span class="form-container__text"
+            >or use your email for registration</span
+          >
+          <!-- Add Form Validation -->
+          <input
+            type="text"
+            placeholder="Name"
+            required
+            class="form-container__input"
+          />
+          <input
+            type="email"
+            placeholder="Email"
+            required
+            class="form-container__input"
+          />
+          <!-- Implement Password Visibility Toggle -->
+          <div class="form-container__input-group">
+            <input
+              type="password"
+              placeholder="Password"
+              required
+              class="form-container__input"
+            />
+            <span class="form-container__toggle-password">
+              <i class="far fa-eye"></i>
+            </span>
+          </div>
+          <button class="form-container__button">Sign Up</button>
         </form>
       </div>
-      <div class="form-container sign-in-container">
+      <div
+        class="form-container sign-in-container"
+        id="sign-in-container"
+        aria-hidden="true"
+      >
         <form>
-          <h1>Sign In</h1>
-          <div class="social-container">
-            <a href="#" class="social"><i class="fab fa-instagram"></i></a>
-            <a href="#" class="social"><i class="fab fa-google"></i></a>
-            <a href="#" class="social"><i class="fab fa-tiktok"></i></a>
+          <h1 class="form-container__title">Sign In</h1>
+          <div class="form-container__social-container">
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-instagram"></i
+            ></a>
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-google"></i
+            ></a>
+            <a href="#" class="form-container__social"
+              ><i class="fab fa-tiktok"></i
+            ></a>
+          </div>
+          <span class="form-container__text">or use your account</span>
+          <input
+            type="email"
+            placeholder="Email"
+            required
+            class="form-container__input"
+          />
+          <div class="form-container__input-group">
+            <input
+              type="password"
+              placeholder="Password"
+              required
+              class="form-container__input"
+            />
+            <span class="form-container__toggle-password">
+              <i class="far fa-eye"></i>
+            </span>
           </div>
-          <span>or use your account</span>
-          <input type="email" placeholder="Email" />
-          <input type="password" placeholder="Password" />
-          <a href="#">Forgot your password?</a>
-          <button onclick="return false;">Sign In</button>
+          <a href="#" class="form-container__link">Forgot your password?</a>
+          <button class="form-container__button">Sign In</button>
         </form>
       </div>
       <div class="overlay-container">
         <div class="overlay">
           <div class="overlay-panel overlay-left">
-            <h1>Welcome Back!</h1>
-            <p>Please login with your personal info</p>
-            <button class="ghost" id="signIn">Sign In</button>
+            <h1 class="overlay-panel__title">Welcome Back!</h1>
+            <p class="overlay-panel__text">
+              Please login with your personal info
+            </p>
+            <button
+              class="ghost overlay-panel__button"
+              id="signIn"
+              aria-controls="sign-in-container"
+            >
+              Sign In
+            </button>
           </div>
           <div class="overlay-panel overlay-right">
-            <h1>Hello, Friend!</h1>
-            <p>Enter your personal details and start your journey with us</p>
-            <button class="ghost" id="signUp">Sign Up</button>
+            <h1 class="overlay-panel__title">Hello, Friend!</h1>
+            <p class="overlay-panel__text">
+              Enter your personal details and start your journey with us
+            </p>
+            <button
+              class="ghost overlay-panel__button"
+              id="signUp"
+              aria-controls="sign-up-container"
+            >
+              Sign Up
+            </button>
           </div>
         </div>
       </div>
diff --git a/087-sliding signin signup form/script.js b/087-sliding signin signup form/script.js
index 80822b5..66d7dcf 100644
--- a/087-sliding signin signup form/script.js	
+++ b/087-sliding signin signup form/script.js	
@@ -1,11 +1,30 @@
 const signUpButton = document.getElementById("signUp");
 const signInButton = document.getElementById("signIn");
 const container = document.getElementById("container");
+const signUpContainer = document.getElementById("sign-up-container");
+const signInContainer = document.getElementById("sign-in-container");
+const togglePasswordIcons = document.querySelectorAll(
+  ".form-container__toggle-password i"
+);
 
-signUpButton.addEventListener("click", () => {
-  container.classList.add("right-panel-active");
-});
+function togglePanel(isSignUp) {
+  container.classList.toggle("right-panel-active", isSignUp);
+  // Improve Accessibility with ARIA
+  signUpContainer.setAttribute("aria-hidden", (!isSignUp).toString());
+  signInContainer.setAttribute("aria-hidden", isSignUp.toString());
+}
+
+// Implement Password Visibility Toggle
+function togglePasswordVisibility(icon) {
+  const input = icon.parentElement.previousElementSibling;
+  input.type = input.type === "password" ? "text" : "password";
+  icon.classList.toggle("fa-eye");
+  icon.classList.toggle("fa-eye-slash");
+}
+
+signUpButton.addEventListener("click", () => togglePanel(true));
+signInButton.addEventListener("click", () => togglePanel(false));
 
-signInButton.addEventListener("click", () => {
-  container.classList.remove("right-panel-active");
+togglePasswordIcons.forEach((icon) => {
+  icon.addEventListener("click", () => togglePasswordVisibility(icon));
 });
diff --git a/087-sliding signin signup form/style.css b/087-sliding signin signup form/style.css
index 8aeeb37..a38edb4 100644
--- a/087-sliding signin signup form/style.css	
+++ b/087-sliding signin signup form/style.css	
@@ -25,12 +25,15 @@ body {
   margin: 1rem 0;
 }
 
-h1 {
+/* Refactor CSS with BEM */
+
+.form-container__title,
+.overlay-panel__title {
   font-weight: bold;
   margin: 0;
 }
 
-p {
+.overlay-panel__text {
   font-size: 14px;
   font-weight: 100;
   line-height: 20px;
@@ -38,11 +41,11 @@ p {
   margin: 20px 0 30px;
 }
 
-.social-container {
+.form-container__social-container {
   margin: 20px 0;
 }
 
-.social-container a {
+.form-container__social {
   border: 1px solid #dddddd;
   border-radius: 50%;
   display: inline-flex;
@@ -51,20 +54,24 @@ p {
   margin: 0 5px;
   height: 40px;
   width: 40px;
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
 }
 
-span {
+.form-container__text {
   font-size: 12px;
 }
 
-a {
+.form-container__link {
   color: #333;
   font-size: 14px;
   text-decoration: none;
   margin: 15px 0;
 }
 
-button {
+.form-container__button,
+.overlay-panel__button {
   cursor: pointer;
   border-radius: 20px;
   border: 1px solid var(--main-color);
@@ -78,29 +85,32 @@ button {
   transition: transform 80ms ease-out;
 }
 
-button:hover {
+.form-container__button:hover,
+.overlay-panel__button:hover {
   background: var(--secondary-color);
 }
 
-button:active {
+.form-container__button:active,
+.overlay-panel__button:active {
   transform: scale(0.95);
 }
 
-button:focus {
+.form-container__button:focus,
+.overlay-panel__button:focus {
   outline: none;
 }
 
-button.ghost {
+.overlay-panel__button.ghost {
   background-color: transparent;
   border-color: #fff;
 }
 
-button.ghost:hover {
+.overlay-panel__button.ghost:hover {
   background: #fff;
   color: var(--secondary-color);
 }
 
-form {
+.form-container form {
   background-color: #fff;
   display: flex;
   align-items: center;
@@ -111,7 +121,7 @@ form {
   text-align: center;
 }
 
-input {
+.form-container__input {
   background-color: #eee;
   border: none;
   padding: 12px 15px;
@@ -120,6 +130,27 @@ input {
   font-family: inherit;
 }
 
+/* Implement Password Visibility Toggle */
+.form-container__input-group {
+  position: relative;
+  width: 100%;
+}
+
+.form-container__toggle-password {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: #776871;
+  font-size: 18px;
+  margin-left: -30px;
+}
+
+.form-container__toggle-password:hover {
+  color: #333;
+}
+
 .container {
   background-color: #fff;
   border-radius: 10px;
@@ -136,6 +167,7 @@ input {
   top: 0;
   width: 100%;
   transition: all 0.6s ease-in-out;
+  height: 100%;
 }
 
 .sign-in-container {
diff --git a/088-promo code/index.html b/088-promo code/index.html
index bfd2e08..02c6ca2 100644
--- a/088-promo code/index.html	
+++ b/088-promo code/index.html	
@@ -10,13 +10,15 @@
     <title>Promo Code</title>
   </head>
   <body>
-    <div class="present" id="present">
+    <!-- Make it Accessible on Focus -->
+    <div class="present" id="present" tabindex="0">
       <div class="lid">
         <span></span>
       </div>
       <div class="promo">
         <p>20% off promo</p>
-        <h2>ILOVEYOU</h2>
+        <!-- Add a "Copy to Clipboard" Button -->
+        <h2>ILOVEYOU <button id="copy-btn" type="button">Copy</button></h2>
       </div>
       <div class="box">
         <span></span>
diff --git a/088-promo code/script.js b/088-promo code/script.js
index 1f3d6cb..4743b1c 100644
--- a/088-promo code/script.js	
+++ b/088-promo code/script.js	
@@ -1,5 +1,12 @@
 const present = document.getElementById("present");
+const copyBtn = document.getElementById("copy-btn");
+
+// Customize Confetti Animation
 const options = {
+  particleCount: 200,
+  spread: 90,
+  gravity: 0.8,
+  shapes: ["star"],
   colors: [
     "#34D963",
     "#068C2C",
@@ -11,9 +18,38 @@ const options = {
   ],
 };
 
-present.addEventListener("mouseenter", () => {
-  confetti(options);
+// present.addEventListener("mouseenter", () => {
+//   confetti(options);
+// });
+// present.addEventListener("touchstart", () => {
+//   confetti(options);
+// });
+
+// Toggle Animation on Click
+present.addEventListener("click", () => {
+  const isOpening = !present.classList.contains("open");
+  present.classList.toggle("open");
+  if (isOpening) {
+    confetti(options);
+  }
 });
-present.addEventListener("touchstart", () => {
-  confetti(options);
+
+present.addEventListener("keydown", (e) => {
+  if ((e.key === "Enter" || e.key === " ") && e.target === present) {
+    e.preventDefault();
+    present.click();
+  }
+});
+
+// Add a "Copy to Clipboard" Button
+copyBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  const promoCode = copyBtn.parentElement.firstChild.textContent.trim();
+  navigator.clipboard.writeText(promoCode).then(() => {
+    const originalText = copyBtn.textContent;
+    copyBtn.textContent = "Copied!";
+    setTimeout(() => {
+      copyBtn.textContent = originalText;
+    }, 1500);
+  });
 });
diff --git a/088-promo code/style.css b/088-promo code/style.css
index 6f2ba32..c1b4c71 100644
--- a/088-promo code/style.css	
+++ b/088-promo code/style.css	
@@ -5,8 +5,8 @@
 }
 
 body {
-  background: #232526; 
-  background: linear-gradient(to top,   #414345, #232526); 
+  background: #232526;
+  background: linear-gradient(to top, #414345, #232526);
   font-family: "Itim", cursive;
   min-height: 100vh;
   margin: 0;
@@ -22,6 +22,11 @@ body {
   cursor: pointer;
 }
 
+.present:focus {
+  outline: 3px solid #50514f;
+  outline-offset: 4px;
+}
+
 .box {
   width: 400px;
   max-width: 90vw;
@@ -87,17 +92,57 @@ body {
   margin: 0;
 }
 
+/* Add a "Copy to Clipboard" Button */
 .promo h2 {
   font-size: 40px;
   margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.promo button {
+  background: #50514f;
+  color: #fff;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: bold;
+  border: none;
+  border-radius: 10px;
+  padding: 6px 18px;
+  margin: 0;
+  min-width: 100px;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-.present:hover .lid {
+.promo button:hover,
+.promo button:focus {
+  background: #2c4251;
+  outline: none;
+}
+
+/* Make it Accessible on Focus */
+/* .present:hover .lid,
+.present:focus-within .lid {
+  top: -100px;
+  transform: rotateZ(10deg);
+  left: 10px;
+}
+
+.present:hover .promo,
+.present:focus-within .promo {
+  top: -80px;
+} */
+
+.present.open .lid {
   top: -100px;
   transform: rotateZ(10deg);
   left: 10px;
 }
 
-.present:hover .promo {
+/* Toggle Animation on Click */
+.present.open .promo {
   top: -80px;
 }
diff --git a/089-one color UI/index.html b/089-one color UI/index.html
index bfd9d0d..b01ddd1 100644
--- a/089-one color UI/index.html	
+++ b/089-one color UI/index.html	
@@ -23,7 +23,11 @@ <h1 id="logo">Leica</h1>
       <section class="home">
         <div class="showcase">
           <h2>Leica M6</h2>
-          <img src="https://i.ibb.co/BzZWGCb/camera-1.png" alt="" />
+          <!-- Improve Image Accessibility -->
+          <img
+            src="https://i.ibb.co/BzZWGCb/camera-1.png"
+            alt="A studio product shot of a black Leica M6 film camera, positioned at a dynamic angle against a dark radial gradient background transitioning from gray to near black. The iconic red Leica logo is visible on the front, and the glass of the attached Summicron lens is a bright, contrasting red."
+          />
           <div class="info">
             <h3>Small but powerful.</h3>
             <p>
@@ -38,17 +42,26 @@ <h3>Small but powerful.</h3>
           <h2>Features</h2>
           <div class="cards">
             <div class="card">
-              <img src="https://i.ibb.co/ZT31nWx/card1-1.png" alt="" />
+              <img
+                src="https://i.ibb.co/ZT31nWx/card1-1.png"
+                alt="Close-up black-and-white photo of a Leica R7 camera, with selective color highlighting the lens in deep red. 'LEICA' and 'SUMMILUX-R' are visible on the camera and lens, and a hand holds the camera from the left."
+              />
               <h4>4k 60fps</h4>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
             </div>
             <div class="card">
-              <img src="https://i.ibb.co/9ZB13MQ/card2-1.png" alt="" />
+              <img
+                src="https://i.ibb.co/9ZB13MQ/card2-1.png"
+                alt="A black and white macro photo of an open camera lens mount, showing the metal ring and electronic contacts. The camera's rectangular digital sensor, visible inside, is selectively colored with a vibrant, glowing red."
+              />
               <h4>Full Frame</h4>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
             </div>
             <div class="card">
-              <img src="https://i.ibb.co/M97L2XC/card3-1.png" alt="" />
+              <img
+                src="https://i.ibb.co/M97L2XC/card3-1.png"
+                alt="Black-and-white photo of a modern camera lens on a glossy surface, with its front element glowing red from a selective color effect."
+              />
               <h4>4k 60fps</h4>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
             </div>
@@ -58,26 +71,38 @@ <h4>4k 60fps</h4>
       </div>
       <div class="soon" id="soon">
         <h2>Coming Soon</h2>
-        <img src="https://i.ibb.co/10w7ywb/camera-soon-v2-1.png" alt="" />
+        <img
+          src="https://i.ibb.co/10w7ywb/camera-soon-v2-1.png"
+          alt="A black Leica digital camera with body cap on, photographed at an angle against a red background."
+        />
         <img class="circle" src="https://i.ibb.co/VD1j32P/circle.png" alt="" />
       </div>
       <footer>
         <h1>© 1984 Leica. All Rights Reserved.</h1>
         <ul>
           <li>
-            <a href="#"
-              ><img src="https://i.ibb.co/zxtSCkx/instagram-logo.png" alt=""
-            /></a>
+            <a href="#" aria-label="Visit Leica on Instagram"
+              ><img
+                src="https://i.ibb.co/zxtSCkx/instagram-logo.png"
+                alt="Instagram logo"
+              />
+            </a>
           </li>
           <li>
-            <a href="#"
-              ><img src="https://i.ibb.co/Mhhv2xK/yt-logo.png" alt=""
-            /></a>
+            <a href="#" aria-label="Visit Leica on YouTube"
+              ><img
+                src="https://i.ibb.co/Mhhv2xK/yt-logo.png"
+                alt="YouTube logo"
+              />
+            </a>
           </li>
           <li>
-            <a href="#"
-              ><img src="https://i.ibb.co/pvtcT3t/twitter-logo.png" alt=""
-            /></a>
+            <a href="#" aria-label="Visit Leica on Twitter"
+              ><img
+                src="https://i.ibb.co/pvtcT3t/twitter-logo.png"
+                alt="Twitter logo"
+              />
+            </a>
           </li>
         </ul>
       </footer>
diff --git a/089-one color UI/styles/_features.scss b/089-one color UI/styles/_features.scss
index 3113c85..7fbfca3 100644
--- a/089-one color UI/styles/_features.scss	
+++ b/089-one color UI/styles/_features.scss	
@@ -1,5 +1,6 @@
 .features-container {
-  background: #323232;
+  // Refactor with Custom Properties
+  background: var(--gray);
   position: relative;
   z-index: 0;
   overflow: hidden;
@@ -27,7 +28,7 @@
     color: var(--black);
 
     .card {
-      background: white;
+      background: var(--white);
       margin: 0rem 5rem;
       display: flex;
       flex-direction: column;
@@ -41,7 +42,7 @@
 
       p {
         padding: 2rem;
-        color: #686868;
+        color: var(--text-tertiary);
       }
 
       img {
diff --git a/089-one color UI/styles/_global.scss b/089-one color UI/styles/_global.scss
index d51dc1c..cf355de 100644
--- a/089-one color UI/styles/_global.scss	
+++ b/089-one color UI/styles/_global.scss	
@@ -1,9 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
 
+// Refactor with Custom Properties
 :root {
   --primary-color: #f54538;
   --black: #070707;
+  --gray: #323232;
+  --white: #ffffff;
   --gradient: radial-gradient(#525252, #131313);
+  --text-primary: var(--white);
+  --text-secondary: #c4c4c4;
+  --text-tertiary: #686868;
 }
 
 * {
@@ -14,10 +20,12 @@
 
 html {
   font-size: 62.5%;
+  // Implement a Smooth Scrolling Behavior
+  scroll-behavior: smooth;
 }
 
 body {
-  color: white;
+  color: var(--text-primary);
   font-family: "Montserrat", sans-serif;
 }
 
@@ -50,6 +58,6 @@ li {
 }
 
 a {
-  color: white;
+  color: var(--text-primary);
   text-decoration: none;
 }
diff --git a/089-one color UI/styles/_home.scss b/089-one color UI/styles/_home.scss
index eddd2fa..382ccb3 100644
--- a/089-one color UI/styles/_home.scss	
+++ b/089-one color UI/styles/_home.scss	
@@ -77,7 +77,8 @@ nav {
     }
 
     p {
-      color: #c4c4c4;
+      // Refactor with Custom Properties
+      color: var(--text-secondary);
     }
   }
 }
diff --git a/089-one color UI/styles/style.css b/089-one color UI/styles/style.css
index a12343e..c96428b 100644
--- a/089-one color UI/styles/style.css	
+++ b/089-one color UI/styles/style.css	
@@ -2,7 +2,12 @@
 :root {
   --primary-color: #f54538;
   --black: #070707;
+  --gray: #323232;
+  --white: #ffffff;
   --gradient: radial-gradient(#525252, #131313);
+  --text-primary: var(--white);
+  --text-secondary: #c4c4c4;
+  --text-tertiary: #686868;
 }
 
 * {
@@ -13,10 +18,11 @@
 
 html {
   font-size: 62.5%;
+  scroll-behavior: smooth;
 }
 
 body {
-  color: white;
+  color: var(--text-primary);
   font-family: "Montserrat", sans-serif;
 }
 
@@ -49,7 +55,7 @@ li {
 }
 
 a {
-  color: white;
+  color: var(--text-primary);
   text-decoration: none;
 }
 
@@ -128,11 +134,11 @@ nav .order {
   padding-bottom: 3rem;
 }
 .showcase .info p {
-  color: #c4c4c4;
+  color: var(--text-secondary);
 }
 
 .features-container {
-  background: #323232;
+  background: var(--gray);
   position: relative;
   z-index: 0;
   overflow: hidden;
@@ -159,7 +165,7 @@ nav .order {
   color: var(--black);
 }
 .features .cards .card {
-  background: white;
+  background: var(--white);
   margin: 0rem 5rem;
   display: flex;
   flex-direction: column;
@@ -172,7 +178,7 @@ nav .order {
 }
 .features .cards .card p {
   padding: 2rem;
-  color: #686868;
+  color: var(--text-tertiary);
 }
 .features .cards .card img {
   -o-object-fit: cover;
diff --git a/089-one color UI/styles/style.css.map b/089-one color UI/styles/style.css.map
index fb3b054..9960351 100644
--- a/089-one color UI/styles/style.css.map	
+++ b/089-one color UI/styles/style.css.map	
@@ -1 +1 @@
-{"version":3,"sources":["_global.scss","style.css","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,2GAAA;AAER;EACE,wBAAA;EACA,gBAAA;EACA,6CAAA;ACAF;;ADGA;EACE,sBAAA;EACA,SAAA;EACA,UAAA;ACAF;;ADGA;EACE,gBAAA;ACAF;;ADGA;EACE,YAAA;EACA,qCAAA;ACAF;;ADGA;EACE,iBAAA;EACA,+BAAA;EACA,oBAAA;ACAF;;ADGA;EACE,eAAA;EACA,+BAAA;EACA,oBAAA;ACAF;;ADGA;EACE,iBAAA;ACAF;;ADGA;EACE,eAAA;ACAF;;ADGA;EACE,iBAAA;ACAF;;ADGA;EACE,eAAA;ACAF;;ADGA;EACE,YAAA;EACA,qBAAA;ACAF;;ACrDA;EACE,2BAAA;ADwDF;;ACrDA;EACE,wBAAA;EACA,gBAAA;EACA,MAAA;EACA,UAAA;ADwDF;;ACrDA;EACE,UAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;ADwDF;ACtDE;EACE,aAAA;EACA,8BAAA;EACA,gBAAA;EACA,OAAA;ADwDJ;ACrDE;EACE,OAAA;EACA,kBAAA;ADuDJ;ACtDI;EACE,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,kBAAA;EACA,gCAAA;EACA,sBAAA;ADwDN;ACrDE;EACE,gCAAA;EACA,kBAAA;EACA,uBAAA;ADuDJ;;ACnDA;EACE,aAAA;EACA,gBAAA;EACA,2DAAA;EACA,+BAAA;ADsDF;ACpDE;EACE,gBAAA;EACA,oBAAA;ADsDJ;ACnDE;EACE,aAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;EACA,oBAAA;ADqDJ;AClDE;EACE,aAAA;EACA,gBAAA;ADoDJ;AClDI;EACE,oBAAA;ADoDN;ACjDI;EACE,cAAA;ADmDN;;AElIA;EACE,mBAAA;EACA,kBAAA;EACA,UAAA;EACA,gBAAA;AFqIF;AEnIE;EACE,kBAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;AFqIJ;;AEjIA;EACE,gBAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,6BAAA;AFoIF;AElIE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;AFoIJ;AElII;EACE,iBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,uBAAA;EACA,gBAAA;AFoIN;AElIM;EACE,sBAAA;AFoIR;AEjIM;EACE,aAAA;EACA,cAAA;AFmIR;AEhIM;EACE,oBAAA;KAAA,iBAAA;AFkIR;;AGjLA;EACE,2BAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;AHoLF;AGlLE;;;EAGE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHoLJ;AGjLE;EACE,WAAA;AHmLJ;AGhLE;EACE,QAAA;AHkLJ;;AItMA;EACE,gBAAA;EACA,wBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;AJyMF;AIvME;EACE,aAAA;EACA,OAAA;EACA,gBAAA;EACA,8BAAA;AJyMJ;AItME;EACE,OAAA;AJwMJ;;AKzNA;EACE;IACE,cAAA;EL4NF;EKxNE;IACE,OAAA;EL0NJ;EKxNE;IACE,iBAAA;EL0NJ;EKtNA;IACE,kCAAA;ELwNF;EKtNE;IACE,WAAA;IACA,sBAAA;OAAA,mBAAA;ELwNJ;EKrNE;;;IAGE,gBAAA;IACA,kBAAA;ELuNJ;EKnNA;IACE,mBAAA;ELqNF;EKnNE;IACE,gBAAA;ELqNJ;EKlNE;IACE,sBAAA;IACA,UAAA;ELoNJ;EKlNI;IACE,iBAAA;ELoNN;EK/MA;IACE,gBAAA;ELiNF;EK/ME;IACE,UAAA;ELiNJ;EK9ME;IACE,eAAA;ELgNJ;EK3ME;IACE,OAAA;EL6MJ;AACF;AKzMA;EAEI;IACE,WAAA;EL0MJ;AACF","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["_global.scss","style.css","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,2GAAA;AAGR;EACE,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,6CAAA;EACA,4BAAA;EACA,yBAAA;EACA,wBAAA;ACDF;;ADIA;EACE,sBAAA;EACA,SAAA;EACA,UAAA;ACDF;;ADIA;EACE,gBAAA;EAEA,uBAAA;ACFF;;ADKA;EACE,0BAAA;EACA,qCAAA;ACFF;;ADKA;EACE,iBAAA;EACA,+BAAA;EACA,oBAAA;ACFF;;ADKA;EACE,eAAA;EACA,+BAAA;EACA,oBAAA;ACFF;;ADKA;EACE,iBAAA;ACFF;;ADKA;EACE,eAAA;ACFF;;ADKA;EACE,iBAAA;ACFF;;ADKA;EACE,eAAA;ACFF;;ADKA;EACE,0BAAA;EACA,qBAAA;ACFF;;AC3DA;EACE,2BAAA;AD8DF;;AC3DA;EACE,wBAAA;EACA,gBAAA;EACA,MAAA;EACA,UAAA;AD8DF;;AC3DA;EACE,UAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;AD8DF;AC5DE;EACE,aAAA;EACA,8BAAA;EACA,gBAAA;EACA,OAAA;AD8DJ;AC3DE;EACE,OAAA;EACA,kBAAA;AD6DJ;AC5DI;EACE,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,kBAAA;EACA,gCAAA;EACA,sBAAA;AD8DN;AC3DE;EACE,gCAAA;EACA,kBAAA;EACA,uBAAA;AD6DJ;;ACzDA;EACE,aAAA;EACA,gBAAA;EACA,2DAAA;EACA,+BAAA;AD4DF;AC1DE;EACE,gBAAA;EACA,oBAAA;AD4DJ;ACzDE;EACE,aAAA;EACA,gBAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,kBAAA;EACA,oBAAA;AD2DJ;ACxDE;EACE,aAAA;EACA,gBAAA;AD0DJ;ACxDI;EACE,oBAAA;AD0DN;ACvDI;EAEE,4BAAA;ADwDN;;AExIA;EAEE,uBAAA;EACA,kBAAA;EACA,UAAA;EACA,gBAAA;AF0IF;AExIE;EACE,kBAAA;EACA,OAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;AF0IJ;;AEtIA;EACE,gBAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,6BAAA;AFyIF;AEvIE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;AFyIJ;AEvII;EACE,wBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,uBAAA;EACA,gBAAA;AFyIN;AEvIM;EACE,sBAAA;AFyIR;AEtIM;EACE,aAAA;EACA,2BAAA;AFwIR;AErIM;EACE,oBAAA;KAAA,iBAAA;AFuIR;;AGvLA;EACE,2BAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;AH0LF;AGxLE;;;EAGE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AH0LJ;AGvLE;EACE,WAAA;AHyLJ;AGtLE;EACE,QAAA;AHwLJ;;AI5MA;EACE,gBAAA;EACA,wBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;AJ+MF;AI7ME;EACE,aAAA;EACA,OAAA;EACA,gBAAA;EACA,8BAAA;AJ+MJ;AI5ME;EACE,OAAA;AJ8MJ;;AK/NA;EACE;IACE,cAAA;ELkOF;EK9NE;IACE,OAAA;ELgOJ;EK9NE;IACE,iBAAA;ELgOJ;EK5NA;IACE,kCAAA;EL8NF;EK5NE;IACE,WAAA;IACA,sBAAA;OAAA,mBAAA;EL8NJ;EK3NE;;;IAGE,gBAAA;IACA,kBAAA;EL6NJ;EKzNA;IACE,mBAAA;EL2NF;EKzNE;IACE,gBAAA;EL2NJ;EKxNE;IACE,sBAAA;IACA,UAAA;EL0NJ;EKxNI;IACE,iBAAA;EL0NN;EKrNA;IACE,gBAAA;ELuNF;EKrNE;IACE,UAAA;ELuNJ;EKpNE;IACE,eAAA;ELsNJ;EKjNE;IACE,OAAA;ELmNJ;AACF;AK/MA;EAEI;IACE,WAAA;ELgNJ;AACF","file":"style.css"}
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css b/089-one color UI/styles/style.min.css
index 4a765cd..1dc2f17 100644
--- a/089-one color UI/styles/style.min.css	
+++ b/089-one color UI/styles/style.min.css	
@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap";:root{--primary-color: #f54538;--black: #070707;--gradient: radial-gradient(#525252, #131313)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:#fff;font-family:"Montserrat",sans-serif}h1{font-size:2.5rem;font-family:"Lobster",cursive;font-weight:lighter}h2{font-size:8rem;font-family:"Lobster",cursive;font-weight:lighter}h3{font-size:3.5rem}h4{font-size:3rem}p{font-size:2.5rem}li{font-size:2rem}a{color:#fff;text-decoration:none}.home{background:var(--gradient)}.nav-container{background:var(--black);position:sticky;top:0;z-index:2}nav{width:80%;margin:auto;min-height:10vh;padding:3rem 0rem;display:flex;justify-content:space-between;align-items:center}nav ul{display:flex;justify-content:space-between;list-style:none;flex:1}nav #logo{flex:3;position:relative}nav #logo::after{content:"";position:absolute;top:0;left:0;width:6rem;height:6rem;background:var(--primary-color);border-radius:50%;transform:translate(-10%, -20%);mix-blend-mode:screen}nav .order{background:var(--primary-color);padding:1rem 2rem;border-radius:.625rem}.showcase{display:grid;min-height:90vh;grid-template-columns:10% repeat(3, minmax(5rem, 1fr)) 10%;grid-template-rows:1fr 2fr 1fr}.showcase h2{grid-column:2/3;align-self:flex-end}.showcase img{grid-row:2/3;grid-column:3/4;height:110%;-o-object-fit:cover;object-fit:cover;align-self:center;justify-self:center}.showcase .info{grid-row:3/4;grid-column:4/5}.showcase .info h3{padding-bottom:3rem}.showcase .info p{color:#c4c4c4}.features-container{background:#323232;position:relative;z-index:0;overflow:hidden}.features-container .wave{position:absolute;left:0;bottom:-25%;width:100%;z-index:-1}.features{min-height:90vh;width:80%;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.features .cards{display:flex;justify-content:space-between;color:var(--black)}.features .cards .card{background:#fff;margin:0rem 5rem;display:flex;flex-direction:column;text-align:center;border-radius:.625rem;overflow:hidden}.features .cards .card h4{margin:2rem 0rem 1rem}.features .cards .card p{padding:2rem;color:#686868}.features .cards .card img{-o-object-fit:cover;object-fit:cover}.soon{background:var(--gradient);min-height:80vh;position:relative;z-index:0}.soon img,.soon .circle,.soon h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.soon .circle{z-index:-1}.soon h2{top:25%}footer{min-height:10vh;background:var(--black);padding-left:10%;padding-right:10%;display:flex;align-items:center;justify-content:space-between}footer ul{display:flex;flex:1;list-style:none;justify-content:space-between}footer h1{flex:3}@media screen and (max-width: 1200px){html{font-size:50%}nav #logo{flex:1}nav ul{margin-left:5rem}.showcase{grid-template-columns:10% 1fr 10%}.showcase img{width:100%;-o-object-fit:contain;object-fit:contain}.showcase img,.showcase h2,.showcase .info{grid-column:2/3;text-align:center}.features{align-items:center}.features h2{margin-top:5rem}.features .cards{flex-direction:column;width:60%}.features .cards .card{margin:5rem 0rem}.soon{overflow:hidden}.soon img{width:60%}.soon h2{font-size:5rem}.footer h1{flex:1}}@media screen and (max-width: 640px){.features .cards{width:100%}}/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
+@import"https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap";:root{--primary-color: #f54538;--black: #070707;--gray: #323232;--white: #ffffff;--gradient: radial-gradient(#525252, #131313);--text-primary: var(--white);--text-secondary: #c4c4c4;--text-tertiary: #686868}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%;scroll-behavior:smooth}body{color:var(--text-primary);font-family:"Montserrat",sans-serif}h1{font-size:2.5rem;font-family:"Lobster",cursive;font-weight:lighter}h2{font-size:8rem;font-family:"Lobster",cursive;font-weight:lighter}h3{font-size:3.5rem}h4{font-size:3rem}p{font-size:2.5rem}li{font-size:2rem}a{color:var(--text-primary);text-decoration:none}.home{background:var(--gradient)}.nav-container{background:var(--black);position:sticky;top:0;z-index:2}nav{width:80%;margin:auto;min-height:10vh;padding:3rem 0rem;display:flex;justify-content:space-between;align-items:center}nav ul{display:flex;justify-content:space-between;list-style:none;flex:1}nav #logo{flex:3;position:relative}nav #logo::after{content:"";position:absolute;top:0;left:0;width:6rem;height:6rem;background:var(--primary-color);border-radius:50%;transform:translate(-10%, -20%);mix-blend-mode:screen}nav .order{background:var(--primary-color);padding:1rem 2rem;border-radius:.625rem}.showcase{display:grid;min-height:90vh;grid-template-columns:10% repeat(3, minmax(5rem, 1fr)) 10%;grid-template-rows:1fr 2fr 1fr}.showcase h2{grid-column:2/3;align-self:flex-end}.showcase img{grid-row:2/3;grid-column:3/4;height:110%;-o-object-fit:cover;object-fit:cover;align-self:center;justify-self:center}.showcase .info{grid-row:3/4;grid-column:4/5}.showcase .info h3{padding-bottom:3rem}.showcase .info p{color:var(--text-secondary)}.features-container{background:var(--gray);position:relative;z-index:0;overflow:hidden}.features-container .wave{position:absolute;left:0;bottom:-25%;width:100%;z-index:-1}.features{min-height:90vh;width:80%;margin:auto;display:flex;flex-direction:column;justify-content:space-around}.features .cards{display:flex;justify-content:space-between;color:var(--black)}.features .cards .card{background:var(--white);margin:0rem 5rem;display:flex;flex-direction:column;text-align:center;border-radius:.625rem;overflow:hidden}.features .cards .card h4{margin:2rem 0rem 1rem}.features .cards .card p{padding:2rem;color:var(--text-tertiary)}.features .cards .card img{-o-object-fit:cover;object-fit:cover}.soon{background:var(--gradient);min-height:80vh;position:relative;z-index:0}.soon img,.soon .circle,.soon h2{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.soon .circle{z-index:-1}.soon h2{top:25%}footer{min-height:10vh;background:var(--black);padding-left:10%;padding-right:10%;display:flex;align-items:center;justify-content:space-between}footer ul{display:flex;flex:1;list-style:none;justify-content:space-between}footer h1{flex:3}@media screen and (max-width: 1200px){html{font-size:50%}nav #logo{flex:1}nav ul{margin-left:5rem}.showcase{grid-template-columns:10% 1fr 10%}.showcase img{width:100%;-o-object-fit:contain;object-fit:contain}.showcase img,.showcase h2,.showcase .info{grid-column:2/3;text-align:center}.features{align-items:center}.features h2{margin-top:5rem}.features .cards{flex-direction:column;width:60%}.features .cards .card{margin:5rem 0rem}.soon{overflow:hidden}.soon img{width:60%}.soon h2{font-size:5rem}.footer h1{flex:1}}@media screen and (max-width: 640px){.features .cards{width:100%}}/*# sourceMappingURL=style.min.css.map */
\ No newline at end of file
diff --git a/089-one color UI/styles/style.min.css.map b/089-one color UI/styles/style.min.css.map
index 728443a..b580327 100644
--- a/089-one color UI/styles/style.min.css.map	
+++ b/089-one color UI/styles/style.min.css.map	
@@ -1 +1 @@
-{"version":3,"sources":["_global.scss","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,qGAAA,CAER,MACE,wBAAA,CACA,gBAAA,CACA,6CAAA,CAGF,EACE,qBAAA,CACA,QAAA,CACA,SAAA,CAGF,KACE,eAAA,CAGF,KACE,UAAA,CACA,mCAAA,CAGF,GACE,gBAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,cAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,UAAA,CACA,oBAAA,CCrDF,MACE,0BAAA,CAGF,eACE,uBAAA,CACA,eAAA,CACA,KAAA,CACA,SAAA,CAGF,IACE,SAAA,CACA,WAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,OACE,YAAA,CACA,6BAAA,CACA,eAAA,CACA,MAAA,CAGF,UACE,MAAA,CACA,iBAAA,CACA,iBACE,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,WAAA,CACA,+BAAA,CACA,iBAAA,CACA,+BAAA,CACA,qBAAA,CAGJ,WACE,+BAAA,CACA,iBAAA,CACA,qBAAA,CAIJ,UACE,YAAA,CACA,eAAA,CACA,0DAAA,CACA,8BAAA,CAEA,aACE,eAAA,CACA,mBAAA,CAGF,cACE,YAAA,CACA,eAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGF,gBACE,YAAA,CACA,eAAA,CAEA,mBACE,mBAAA,CAGF,kBACE,aAAA,CC/EN,oBACE,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CAEA,0BACE,iBAAA,CACA,MAAA,CACA,WAAA,CACA,UAAA,CACA,UAAA,CAIJ,UACE,eAAA,CACA,SAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,4BAAA,CAEA,iBACE,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,uBACE,eAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,qBAAA,CACA,eAAA,CAEA,0BACE,qBAAA,CAGF,yBACE,YAAA,CACA,aAAA,CAGF,2BACE,mBAAA,CAAA,gBAAA,CC/CR,MACE,0BAAA,CACA,eAAA,CACA,iBAAA,CACA,SAAA,CAEA,iCAGE,iBAAA,CACA,OAAA,CACA,QAAA,CACA,+BAAA,CAGF,cACE,UAAA,CAGF,SACE,OAAA,CCpBJ,OACE,eAAA,CACA,uBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,UACE,YAAA,CACA,MAAA,CACA,eAAA,CACA,6BAAA,CAGF,UACE,MAAA,CCjBJ,sCACE,KACE,aAAA,CAIA,UACE,MAAA,CAEF,OACE,gBAAA,CAIJ,UACE,iCAAA,CAEA,cACE,UAAA,CACA,qBAAA,CAAA,kBAAA,CAGF,2CAGE,eAAA,CACA,iBAAA,CAIJ,UACE,kBAAA,CAEA,aACE,eAAA,CAGF,iBACE,qBAAA,CACA,SAAA,CAEA,uBACE,gBAAA,CAKN,MACE,eAAA,CAEA,UACE,SAAA,CAGF,SACE,cAAA,CAKF,WACE,MAAA,CAAA,CAKN,qCAEI,iBACE,UAAA,CAAA","file":"style.min.css"}
\ No newline at end of file
+{"version":3,"sources":["_global.scss","_home.scss","_features.scss","_soon.scss","_footer.scss","_media-queries.scss"],"names":[],"mappings":"AAAQ,qGAAA,CAGR,MACE,wBAAA,CACA,gBAAA,CACA,eAAA,CACA,gBAAA,CACA,6CAAA,CACA,4BAAA,CACA,yBAAA,CACA,wBAAA,CAGF,EACE,qBAAA,CACA,QAAA,CACA,SAAA,CAGF,KACE,eAAA,CAEA,sBAAA,CAGF,KACE,yBAAA,CACA,mCAAA,CAGF,GACE,gBAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,cAAA,CACA,6BAAA,CACA,mBAAA,CAGF,GACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,gBAAA,CAGF,GACE,cAAA,CAGF,EACE,yBAAA,CACA,oBAAA,CC7DF,MACE,0BAAA,CAGF,eACE,uBAAA,CACA,eAAA,CACA,KAAA,CACA,SAAA,CAGF,IACE,SAAA,CACA,WAAA,CACA,eAAA,CACA,iBAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,OACE,YAAA,CACA,6BAAA,CACA,eAAA,CACA,MAAA,CAGF,UACE,MAAA,CACA,iBAAA,CACA,iBACE,UAAA,CACA,iBAAA,CACA,KAAA,CACA,MAAA,CACA,UAAA,CACA,WAAA,CACA,+BAAA,CACA,iBAAA,CACA,+BAAA,CACA,qBAAA,CAGJ,WACE,+BAAA,CACA,iBAAA,CACA,qBAAA,CAIJ,UACE,YAAA,CACA,eAAA,CACA,0DAAA,CACA,8BAAA,CAEA,aACE,eAAA,CACA,mBAAA,CAGF,cACE,YAAA,CACA,eAAA,CACA,WAAA,CACA,mBAAA,CAAA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGF,gBACE,YAAA,CACA,eAAA,CAEA,mBACE,mBAAA,CAGF,kBAEE,2BAAA,CChFN,oBAEE,sBAAA,CACA,iBAAA,CACA,SAAA,CACA,eAAA,CAEA,0BACE,iBAAA,CACA,MAAA,CACA,WAAA,CACA,UAAA,CACA,UAAA,CAIJ,UACE,eAAA,CACA,SAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,4BAAA,CAEA,iBACE,YAAA,CACA,6BAAA,CACA,kBAAA,CAEA,uBACE,uBAAA,CACA,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,qBAAA,CACA,eAAA,CAEA,0BACE,qBAAA,CAGF,yBACE,YAAA,CACA,0BAAA,CAGF,2BACE,mBAAA,CAAA,gBAAA,CChDR,MACE,0BAAA,CACA,eAAA,CACA,iBAAA,CACA,SAAA,CAEA,iCAGE,iBAAA,CACA,OAAA,CACA,QAAA,CACA,+BAAA,CAGF,cACE,UAAA,CAGF,SACE,OAAA,CCpBJ,OACE,eAAA,CACA,uBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CAEA,UACE,YAAA,CACA,MAAA,CACA,eAAA,CACA,6BAAA,CAGF,UACE,MAAA,CCjBJ,sCACE,KACE,aAAA,CAIA,UACE,MAAA,CAEF,OACE,gBAAA,CAIJ,UACE,iCAAA,CAEA,cACE,UAAA,CACA,qBAAA,CAAA,kBAAA,CAGF,2CAGE,eAAA,CACA,iBAAA,CAIJ,UACE,kBAAA,CAEA,aACE,eAAA,CAGF,iBACE,qBAAA,CACA,SAAA,CAEA,uBACE,gBAAA,CAKN,MACE,eAAA,CAEA,UACE,SAAA,CAGF,SACE,cAAA,CAKF,WACE,MAAA,CAAA,CAKN,qCAEI,iBACE,UAAA,CAAA","file":"style.min.css"}
\ No newline at end of file
diff --git a/090-tooltip/index.html b/090-tooltip/index.html
index 10f6056..0924747 100644
--- a/090-tooltip/index.html
+++ b/090-tooltip/index.html
@@ -10,9 +10,35 @@
     <title>Tooltip</title>
   </head>
   <body>
-    <div class="tooltip top">Show Top</div>
-    <div class="tooltip right">Show Right</div>
-    <div class="tooltip left">Show Left</div>
-    <div class="tooltip bottom">Show Bottom</div>
+    <!-- Make Tooltips Accessible on Focus -->
+    <!-- Ensure Accessibility with ARIA Attributes -->
+    <!-- Create a Data-Driven Tooltip -->
+    <div class="tooltip top" data-tooltip="Top" aria-label="Top" tabindex="0">
+      Show Top
+    </div>
+    <div
+      class="tooltip right"
+      data-tooltip="Right"
+      aria-label="Right"
+      tabindex="0"
+    >
+      Show Right
+    </div>
+    <div
+      class="tooltip left"
+      data-tooltip="Left"
+      aria-label="Left"
+      tabindex="0"
+    >
+      Show Left
+    </div>
+    <div
+      class="tooltip bottom"
+      data-tooltip="Bottom"
+      aria-label="Bottom"
+      tabindex="0"
+    >
+      Show Bottom
+    </div>
   </body>
 </html>
diff --git a/090-tooltip/style.css b/090-tooltip/style.css
index 9844400..8779c53 100644
--- a/090-tooltip/style.css
+++ b/090-tooltip/style.css
@@ -1,5 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 
+:root {
+  --transition: opacity 0.3s ease;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -32,64 +36,76 @@ body {
 /* message */
 
 .tooltip::after {
+  /* Create a Data-Driven Tooltip */
+  content: attr(data-tooltip);
   background-color: #313247;
   border-radius: 10px;
   color: #fff;
-  display: none;
+  /* display: none; */
   padding: 10px 15px;
   font-size: 1rem;
   font-weight: lighter;
   position: absolute;
   z-index: 1;
+  /* Add a Fade-in Animation */
+  opacity: 0;
+  transition: var(--transition);
+  visibility: hidden;
 }
 
 .tooltip.top::after {
-  content: "Top";
+  /* content: "Top"; */
   top: 0;
   left: 50%;
   transform: translate(-50%, calc(-100% - 10px));
 }
 
 .tooltip.bottom::after {
-  content: "Bottom";
+  /* content: "Bottom"; */
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(100% + 10px));
 }
 
 .tooltip.right::after {
-  content: "Right";
+  /* content: "Right"; */
   top: 0;
   right: 0;
   transform: translateX(calc(100% + 10px));
 }
 
 .tooltip.left::after {
-  content: "Left";
+  /* content: "Left"; */
   top: 0;
   left: 0;
   transform: translateX(calc(-100% - 10px));
 }
 
-.tooltip:hover::after {
+/* Make Tooltips Accessible on Focus */
+/* .tooltip:hover::after,
+.tooltip:focus::after {
   display: block;
-}
+} */
 
 /* arrow */
 
 .tooltip::before {
   content: "";
   background-color: #313247;
-  display: none;
+  /* display: none; */
   position: absolute;
   width: 15px;
   height: 15px;
   z-index: 1;
+  opacity: 0;
+  transition: var(--transition);
+  visibility: hidden;
 }
 
-.tooltip:hover::before {
+/* .tooltip:hover::before,
+.tooltip:focus::before {
   display: block;
-}
+} */
 
 .tooltip.top::before {
   top: 0;
@@ -114,3 +130,11 @@ body {
   left: 0;
   transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
 }
+
+.tooltip:hover::after,
+.tooltip:focus::after,
+.tooltip:hover::before,
+.tooltip:focus::before {
+  opacity: 1;
+  visibility: visible;
+}
diff --git a/091-chat interface/index.html b/091-chat interface/index.html
index 7a0295a..e905d1c 100644
--- a/091-chat interface/index.html	
+++ b/091-chat interface/index.html	
@@ -20,6 +20,8 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Hello, I've found your friend's phone.</p>
+          <!-- Add Timestamps to Messages -->
+          <small>10:30 AM</small>
         </li>
         <li class="message right">
           <img
@@ -28,6 +30,7 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Which of my friends are you talking about? :-)</p>
+          <small>10:31 AM</small>
         </li>
         <li class="message left">
           <img
@@ -36,6 +39,7 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>The one whose name is at the top of your screen right now.</p>
+          <small>10:32 AM</small>
         </li>
         <li class="message right">
           <img
@@ -44,6 +48,7 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Yes, right, of course :-)</p>
+          <small>10:33 AM</small>
         </li>
         <li class="message left">
           <img
@@ -52,6 +57,7 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Can you tell her that I've found her phone?</p>
+          <small>10:34 AM</small>
         </li>
         <li class="message right">
           <img
@@ -60,6 +66,7 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Sure</p>
+          <small>10:34 AM</small>
         </li>
         <li class="message right">
           <img
@@ -68,6 +75,18 @@ <h2>Sarah</h2>
             alt=""
           />
           <p>Some girl says she's got your phone.</p>
+          <small>10:35 AM</small>
+        </li>
+        <!-- Add a "Typing" Indicator -->
+        <li class="message right typing">
+          <img
+            class="avatar"
+            src="https://randomuser.me/api/portraits/men/67.jpg"
+            alt=""
+          />
+          <span style="--i: 1"></span>
+          <span style="--i: 2"></span>
+          <span style="--i: 3"></span>
         </li>
       </ul>
       <input type="text" class="text_input" placeholder="Message..." />
diff --git a/091-chat interface/style.css b/091-chat interface/style.css
index a1deba8..db57d4b 100644
--- a/091-chat interface/style.css	
+++ b/091-chat interface/style.css	
@@ -28,43 +28,53 @@ h2 {
   background: #ece9e6;
   background: linear-gradient(to right, #ece9e6, #ffffff);
   width: 320px;
+  /* Make the Chat Scrollable */
+  height: 710px;
   max-width: 100%;
   border-radius: 25px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
   overflow: hidden;
   padding: 15px;
+  padding-right: 2px;
   position: relative;
 }
 
 .chat {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
   align-items: flex-start;
   list-style-type: none;
   padding: 0;
   margin: 0;
+  overflow-y: auto;
+  height: calc(100% - 26px);
+  padding-bottom: 50px;
+  padding-top: 20px;
 }
 
 .message {
-  border-radius: 50px;
+  /* border-radius: 50px; */
   position: relative;
   margin-bottom: 30px;
 }
 
+/* Improve Message Bubble Styling */
 .message.left {
   padding: 15px 20px 15px 70px;
   background-color: #fff;
   border: 2px solid #cccccc;
   text-align: left;
+  border-radius: 5px 25px 25px 25px;
 }
 
 .message.right {
   align-self: flex-end;
   padding: 15px 70px 15px 20px;
-  background-color: #4b802f;
+  background-color: rgb(75, 128, 47);
   color: #fff;
   text-align: right;
+  border-radius: 25px 5px 25px 25px;
 }
 
 .avatar {
@@ -97,3 +107,43 @@ h2 {
   padding: 10px 15px;
   width: 100%;
 }
+
+/* Add Timestamps to Messages */
+.message small {
+  position: absolute;
+  bottom: -20px;
+  font-size: 0.8rem;
+  color: #615d6c;
+  text-align: right;
+}
+
+.message.left small {
+  left: 15px;
+}
+
+.message.right small {
+  right: 15px;
+}
+
+/* Add a "Typing" Indicator */
+.message.typing span {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background-color: #cccccc;
+  display: inline-block;
+  margin: 0 2px;
+  animation: bounce 1.2s infinite;
+  animation-delay: calc(0.2s * var(--i));
+}
+
+@keyframes bounce {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-6px);
+  }
+}
diff --git a/092-music streaming service/index.html b/092-music streaming service/index.html
index ca41446..1a6e808 100644
--- a/092-music streaming service/index.html	
+++ b/092-music streaming service/index.html	
@@ -16,12 +16,24 @@
           <img src="https://i.ibb.co/yRkkT0M/logo.png" />
           <h1 class="brand-logo-name">Soundwave</h1>
         </a>
-        <nav class="main-nav">
+        <nav class="main-nav" id="main-nav">
           <ul>
             <li><a href="#discover">Discover</a></li>
             <li><a href="#join">Join</a></li>
           </ul>
         </nav>
+        <!-- Add a Hamburger Menu for Mobile -->
+        <button
+          class="hamburger"
+          aria-label="Open navigation"
+          aria-controls="main-nav"
+          aria-expanded="false"
+          id="hamburger"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
       </header>
       <!-- hero -->
       <section class="hero-section">
@@ -47,7 +59,8 @@ <h1 class="title">Feel The Music</h1>
           <div class="call-to-action">
             <h1 class="title">Discover new music</h1>
             <div class="icon-section">
-              <div class="icon">
+              <!-- Refactor Icons with a Reusable Class -->
+              <div class="icon-section__icon">
                 <svg
                   width="54"
                   height="54"
@@ -62,7 +75,7 @@ <h1 class="title">Discover new music</h1>
                 </svg>
                 Charts
               </div>
-              <div class="icon">
+              <div class="icon-section__icon">
                 <svg
                   width="57"
                   height="54"
@@ -89,7 +102,7 @@ <h1 class="title">Discover new music</h1>
                 </svg>
                 Albums
               </div>
-              <div class="icon">
+              <div class="icon-section__icon">
                 <svg
                   width="56"
                   height="54"
@@ -142,21 +155,22 @@ <h1 class="join-text">
             Join the
             <span class="accent-text">fun.</span>
           </h1>
+          <!-- Improve Form Accessibility -->
           <form class="join-form">
             <div class="input-group">
-              <label>Name</label>
-              <input type="text" />
+              <label for="name">Name</label>
+              <input type="text" id="name" />
             </div>
             <div class="input-group">
-              <label>Email</label>
-              <input type="email" />
+              <label for="email">Email</label>
+              <input type="email" id="email" />
             </div>
             <div class="input-group">
-              <label>Password</label>
-              <input type="password" />
+              <label for="password">Password</label>
+              <input type="password" id="password" />
             </div>
             <div class="input-group">
-              <button type="submit" class="btn">Join Now</button>
+              <button type="submit" class="btn" disabled>Join Now</button>
             </div>
           </form>
         </section>
@@ -228,5 +242,6 @@ <h1 class="join-text">
         </nav>
       </div>
     </footer>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/092-music streaming service/script.js b/092-music streaming service/script.js
new file mode 100644
index 0000000..7d30f66
--- /dev/null
+++ b/092-music streaming service/script.js	
@@ -0,0 +1,66 @@
+const hamburger = document.getElementById("hamburger");
+const nav = document.getElementById("main-nav");
+
+// Add a Hamburger Menu for Mobile
+hamburger.addEventListener("click", function () {
+  const isOpen = nav.classList.toggle("is-open");
+  hamburger.setAttribute("aria-expanded", isOpen);
+  hamburger.setAttribute(
+    "aria-label",
+    isOpen ? "Close navigation" : "Open navigation"
+  );
+});
+
+nav.addEventListener("click", function (event) {
+  if (event.target.tagName === "A") {
+    nav.classList.remove("is-open");
+    hamburger.setAttribute("aria-expanded", "false");
+    hamburger.setAttribute("aria-label", "Open navigation");
+  }
+});
+
+// Animate Decorative Circles on Scroll
+const setupParallaxAnimation = (sectionSelector, elementsConfig) => {
+  const section = document.querySelector(sectionSelector);
+
+  const elements = elementsConfig.map((config) => ({
+    node: document.querySelector(config.selector),
+    multiplier: config.multiplier,
+    relative: config.relative, // Check if animation is relative to the section
+  }));
+
+  const handleScroll = () => {
+    elements.forEach(({ node, multiplier, relative }) => {
+      const scrollStart = relative ? section.offsetTop : 0;
+      const scrollPosition = window.scrollY - scrollStart;
+      node.style.transform = `translateY(${scrollPosition * multiplier}px)`;
+    });
+  };
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          window.addEventListener("scroll", handleScroll);
+        } else {
+          window.removeEventListener("scroll", handleScroll);
+        }
+      });
+    },
+    { threshold: 0.1 } // Trigger when 10% of the element is visible
+  );
+
+  observer.observe(section);
+};
+
+// Hero circles (animation starts from page top)
+setupParallaxAnimation(".hero-section", [
+  { selector: ".hero-circle-1", multiplier: 0.1, relative: false },
+  { selector: ".hero-circle-2", multiplier: -0.15, relative: false },
+  { selector: ".hero-circle-3", multiplier: 0.05, relative: false },
+]);
+
+// Join circles (animation starts when section is visible)
+setupParallaxAnimation(".circles", [
+  { selector: ".join-circle-1", multiplier: 0.1, relative: true },
+]);
diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index b9e2464..c80cea8 100644
--- a/092-music streaming service/style.css	
+++ b/092-music streaming service/style.css	
@@ -59,6 +59,28 @@ body {
   margin: 0 0 0 1rem;
 }
 
+/* Add a Hamburger Menu for Mobile */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  gap: 6px;
+  z-index: 2;
+}
+.hamburger span {
+  display: block;
+  width: 28px;
+  height: 3px;
+  background: #fff;
+  border-radius: 2px;
+}
+
 .main-footer {
   height: 70px;
   background-color: #202027;
@@ -230,7 +252,8 @@ body {
   display: flex;
 }
 
-.icon {
+/* Refactor Icons with a Reusable Class */
+.icon-section__icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -242,7 +265,7 @@ body {
   background-color: #202027;
 }
 
-.icon img {
+.icon-section__icon img {
   width: 40px;
 }
 
@@ -347,18 +370,53 @@ body {
 }
 
 @media (max-width: 992px) {
-  .main-header,
-  .container {
-    flex-direction: column;
+  .main-header {
+    position: relative;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: 1rem;
   }
 
+  .hamburger {
+    display: flex;
+  }
+
+  .main-nav {
+    display: none;
+    flex-direction: column;
+    background: #202027;
+    position: absolute;
+    top: 100px;
+    right: 0px;
+    min-width: 150px;
+    border-radius: 10px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    z-index: 2;
+  }
+
+  .main-nav ul {
+    flex-direction: column;
+  }
+
+  .main-nav.is-open {
+    display: flex;
+  }
+
+  .main-nav a {
+    display: block;
+  }
+
   .main-footer {
     height: 140px;
   }
 
+  .main-footer .container {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
   .hero-section {
     flex-direction: column-reverse;
   }
diff --git a/093-creative portfolio/index.html b/093-creative portfolio/index.html
index a506690..c7c1fcb 100644
--- a/093-creative portfolio/index.html	
+++ b/093-creative portfolio/index.html	
@@ -15,6 +15,7 @@
       <header>
         <nav>
           <h3 class="logo">Dimitri Marco</h3>
+          <!-- Improve Menu Accessibility -->
           <svg
             class="menu"
             width="43"
@@ -22,6 +23,10 @@ <h3 class="logo">Dimitri Marco</h3>
             viewBox="0 0 43 23"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
+            tabindex="0"
+            role="button"
+            aria-expanded="false"
+            aria-controls="nav-menu"
           >
             <line
               y1="1.5"
@@ -45,7 +50,7 @@ <h3 class="logo">Dimitri Marco</h3>
               stroke-width="3"
             />
           </svg>
-          <div class="nav-open">
+          <div class="nav-open" id="nav-menu" tabindex="-1">
             <div class="contact">
               <h3>Contact</h3>
               <p>02348-234-843</p>
diff --git a/093-creative portfolio/script.js b/093-creative portfolio/script.js
index 81165ee..332969a 100644
--- a/093-creative portfolio/script.js	
+++ b/093-creative portfolio/script.js	
@@ -1,5 +1,10 @@
+// Refactor the Initialization Logic
 function init() {
-  // slider
+  setupSlider();
+  setupMenu();
+}
+
+function setupSlider() {
   const slides = document.querySelectorAll(".slide");
   const pages = document.querySelectorAll(".page");
   const backgrounds = [
@@ -17,12 +22,7 @@ function init() {
   }
 
   slides.forEach((slide, index) => {
-    slide.addEventListener("click", function () {
-      if (isAnimating) return;
-      updateActiveDot(index);
-      nextSlide(index);
-      scrollSlide = index;
-    });
+    slide.addEventListener("click", () => handleSlideClick(index));
   });
 
   async function nextSlide(pageNumber) {
@@ -73,22 +73,76 @@ function init() {
     isAnimating = false;
   }
   document.addEventListener("wheel", scrollChange);
+  // Add Keyboard Navigation
+  document.addEventListener("keydown", keyScroll);
+  // Add Touch Navigation
+  document.addEventListener("touchstart", handleTouchStart);
+  document.addEventListener("touchmove", handleTouchMove);
 
-  function scrollChange(e) {
+  function handleSlideClick(index) {
     if (isAnimating) return;
-    e.deltaY > 0 ? (scrollSlide += 1) : (scrollSlide -= 1);
-    if (scrollSlide > 2) scrollSlide = 0;
-    if (scrollSlide < 0) scrollSlide = 2;
+    updateActiveDot(index);
+    nextSlide(index);
+    scrollSlide = index;
+  }
+
+  function navigateSlides(direction) {
+    if (direction === "next") {
+      scrollSlide++;
+      if (scrollSlide > 2) {
+        scrollSlide = 0;
+      }
+    } else if (direction === "prev") {
+      scrollSlide--;
+      if (scrollSlide < 0) {
+        scrollSlide = 2;
+      }
+    }
     updateActiveDot(scrollSlide);
     nextSlide(scrollSlide);
   }
 
-  //   menu
+  function scrollChange(e) {
+    if (isAnimating) return;
+    const direction = e.deltaY > 0 ? "next" : "prev";
+    navigateSlides(direction);
+  }
+
+  function keyScroll(e) {
+    if (isAnimating) return;
+    if (e.key === "ArrowDown") {
+      navigateSlides("next");
+    } else if (e.key === "ArrowUp") {
+      navigateSlides("prev");
+    }
+  }
+
+  function handleTouchStart(e) {
+    touchStartY = e.touches[0].clientY;
+  }
+
+  function handleTouchMove(e) {
+    if (isAnimating) return;
+    const touchEndY = e.touches[0].clientY;
+    const deltaY = touchStartY - touchEndY;
+
+    // prevent accidental swipes by using a threshold
+    if (Math.abs(deltaY) > 50) {
+      const direction = deltaY > 0 ? "next" : "prev";
+      navigateSlides(direction);
+      // reset start position to prevent multiple triggers per swipe
+      touchStartY = touchEndY;
+    }
+  }
+}
+
+function setupMenu() {
   const hamburger = document.querySelector(".menu");
+  const navOpen = document.querySelector(".nav-open");
 
   const menuTl = gsap.timeline({ paused: true, reversed: true });
   menuTl
-    .to(".nav-open", { duration: 0.5, y: 0 })
+    .to(navOpen, { duration: 0.5, y: 0 })
     .fromTo(
       ".contact",
       { opacity: 0, y: 10 },
@@ -114,8 +168,37 @@ function init() {
       "-=1"
     );
 
-  hamburger.addEventListener("click", () => {
-    menuTl.reversed() ? menuTl.play() : menuTl.reverse();
+  // Improve Menu Accessibility
+  const toggleMenu = () => {
+    if (menuTl.reversed()) {
+      menuTl.play();
+      hamburger.setAttribute("aria-expanded", "true");
+      menuTl.eventCallback("onComplete", () => {
+        navOpen.focus();
+      });
+    } else {
+      menuTl.reverse();
+      hamburger.setAttribute("aria-expanded", "false");
+      menuTl.eventCallback("onReverseComplete", () => {
+        hamburger.focus();
+      });
+    }
+  };
+
+  hamburger.addEventListener("click", toggleMenu);
+
+  hamburger.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleMenu();
+    }
+  });
+
+  navOpen.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      toggleMenu();
+    }
   });
 }
 
diff --git a/093-creative portfolio/style.css b/093-creative portfolio/style.css
index 3e9654b..815b4b4 100644
--- a/093-creative portfolio/style.css	
+++ b/093-creative portfolio/style.css	
@@ -192,6 +192,13 @@ nav {
   cursor: pointer;
 }
 
+/* Improve Menu Accessibility */
+.menu:focus {
+  outline: 2px solid var(--white);
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); /* subtle white glow */
+}
+
 /* media queries */
 
 @media (max-width: 1024px) {
diff --git a/094-laptop UI/index.html b/094-laptop UI/index.html
index 47c6a7d..032accc 100644
--- a/094-laptop UI/index.html	
+++ b/094-laptop UI/index.html	
@@ -25,7 +25,7 @@
         </svg>
         <h4 class="logo">Three Dots</h4>
       </div>
-      <nav>
+      <nav id="main-nav">
         <ul class="nav-links">
           <li><a href="#" class="nav-link">Specs</a></li>
           <li><a href="#" class="nav-link">Products</a></li>
@@ -47,6 +47,17 @@ <h4 class="logo">Three Dots</h4>
           />
         </svg>
       </div>
+      <!-- Improve Navigation Accessibility -->
+      <button
+        class="hamburger"
+        aria-controls="main-nav"
+        aria-expanded="false"
+        aria-label="Open navigation"
+      >
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
     </header>
     <main>
       <section class="presentation">
@@ -64,62 +75,87 @@ <h1>Laptop for the future</h1>
           </div>
         </div>
         <div class="cover">
-          <img src="https://i.ibb.co/FJrnpsL/matebook.png" alt="Matebook" />
+          <img
+            src="https://i.ibb.co/FJrnpsL/matebook.png"
+            alt="Matebook"
+            id="main-image"
+          />
         </div>
       </section>
-      <div class="laptop-select">
-        <svg
-          width="14"
-          height="24"
-          viewBox="0 0 14 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0.93934 10.9393C0.353553 11.5251 0.353553 12.4749 0.93934 13.0607L10.4853 22.6066C11.0711 23.1924 12.0208 23.1924 12.6066 22.6066C13.1924 22.0208 13.1924 21.0711 12.6066 20.4853L4.12132 12L12.6066 3.51472C13.1924 2.92893 13.1924 1.97919 12.6066 1.3934C12.0208 0.807611 11.0711 0.807611 10.4853 1.3934L0.93934 10.9393ZM4 10.5H2V13.5H4V10.5Z"
-            fill="#5F5F79"
-          />
-        </svg>
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="10" cy="10" r="8.5" stroke="#5F5F79" stroke-width="3" />
-        </svg>
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+      <!-- Implement an Image Switcher -->
+      <div class="laptop-select" role="group" aria-label="Choose laptop image">
+        <button
+          class="laptop-arrow"
+          aria-label="Previous laptop"
+          data-action="prev"
         >
-          <circle cx="10" cy="10" r="10" fill="#5F5F79" />
-        </svg>
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="10" cy="10" r="10" fill="#5F5F79" />
-        </svg>
-
-        <svg
-          width="14"
-          height="24"
-          viewBox="0 0 14 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
+            width="14"
+            height="24"
+            viewBox="0 0 14 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.93934 10.9393C0.353553 11.5251 0.353553 12.4749 0.93934 13.0607L10.4853 22.6066C11.0711 23.1924 12.0208 23.1924 12.6066 22.6066C13.1924 22.0208 13.1924 21.0711 12.6066 20.4853L4.12132 12L12.6066 3.51472C13.1924 2.92893 13.1924 1.97919 12.6066 1.3934C12.0208 0.807611 11.0711 0.807611 10.4853 1.3934L0.93934 10.9393ZM4 10.5H2V13.5H4V10.5Z"
+              fill="#5F5F79"
+            />
+          </svg>
+        </button>
+        <button class="laptop-dot" aria-label="Laptop 1" data-index="0">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <circle
+              class="dot-shape"
+              cx="10"
+              cy="10"
+              r="8.5"
+              stroke="#5F5F79"
+              stroke-width="3"
+            />
+          </svg>
+        </button>
+        <button class="laptop-dot" aria-label="Laptop 2" data-index="1">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <circle
+              class="dot-shape"
+              cx="10"
+              cy="10"
+              r="8.5"
+              stroke="#5F5F79"
+              stroke-width="3"
+            />
+          </svg>
+        </button>
+        <button class="laptop-dot" aria-label="Laptop 3" data-index="2">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <circle
+              class="dot-shape"
+              cx="10"
+              cy="10"
+              r="8.5"
+              stroke="#5F5F79"
+              stroke-width="3"
+            />
+          </svg>
+        </button>
+        <button
+          class="laptop-arrow"
+          aria-label="Next laptop"
+          data-action="next"
         >
-          <path
-            d="M13.0607 10.9393C13.6464 11.5251 13.6464 12.4749 13.0607 13.0607L3.51472 22.6066C2.92893 23.1924 1.97919 23.1924 1.3934 22.6066C0.807611 22.0208 0.807611 21.0711 1.3934 20.4853L9.87868 12L1.3934 3.51472C0.807611 2.92893 0.807611 1.97919 1.3934 1.3934C1.97919 0.807611 2.92893 0.807611 3.51472 1.3934L13.0607 10.9393ZM10 10.5H12V13.5H10V10.5Z"
-            fill="#5F5F79"
-          />
-        </svg>
+          <svg
+            width="14"
+            height="24"
+            viewBox="0 0 14 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.0607 10.9393C13.6464 11.5251 13.6464 12.4749 13.0607 13.0607L3.51472 22.6066C2.92893 23.1924 1.97919 23.1924 1.3934 22.6066C0.807611 22.0208 0.807611 21.0711 1.3934 20.4853L9.87868 12L1.3934 3.51472C0.807611 2.92893 0.807611 1.97919 1.3934 1.3934C1.97919 0.807611 2.92893 0.807611 3.51472 1.3934L13.0607 10.9393ZM10 10.5H12V13.5H10V10.5Z"
+              fill="#5F5F79"
+            />
+          </svg>
+        </button>
       </div>
       <svg
         class="big-circle"
@@ -208,6 +244,23 @@ <h1>Laptop for the future</h1>
           </linearGradient>
         </defs>
       </svg>
+      <section class="extra-content">
+        <div class="introduction">
+          <div class="intro-text">
+            <h2>More Information</h2>
+            <p>
+              Experience next-generation productivity with the Laptop for the
+              Future. Featuring a stunning 14-inch bezeless 4K touchscreen,
+              ultra-fast performance, and all-day battery life, it's designed
+              for creators, professionals, and anyone who values premium
+              quality. Enjoy vivid colors, seamless multitasking, and a sleek,
+              lightweight build that fits your modern lifestyle.
+            </p>
+            <!-- Add more content as needed -->
+          </div>
+        </div>
+      </section>
     </main>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/094-laptop UI/script.js b/094-laptop UI/script.js
new file mode 100644
index 0000000..e583cc5
--- /dev/null
+++ b/094-laptop UI/script.js	
@@ -0,0 +1,80 @@
+const hamburger = document.querySelector(".hamburger");
+const nav = document.getElementById("main-nav");
+const bigCircle = document.querySelector(".big-circle");
+const mediumCircle = document.querySelector(".medium-circle");
+const mainImage = document.getElementById("main-image");
+const dots = document.querySelectorAll(".laptop-dot");
+const arrows = document.querySelectorAll(".laptop-arrow");
+
+let currentIndex = 0;
+
+const laptopImages = [
+  "https://i.ibb.co/FJrnpsL/matebook.png",
+  "https://i.ibb.co/9kH7Y320/matebook2.png",
+  "https://i.ibb.co/yBP10fsM/matebook3.png",
+];
+
+// Improve Navigation Accessibility
+hamburger.addEventListener("click", function () {
+  const expanded = hamburger.getAttribute("aria-expanded") === "true";
+  hamburger.setAttribute("aria-expanded", !expanded);
+  nav.classList.toggle("nav-open");
+});
+
+nav.addEventListener("click", (e) => {
+  if (e.target.tagName === "A" && nav.classList.contains("nav-open")) {
+    nav.classList.remove("nav-open");
+    hamburger.setAttribute("aria-expanded", "false");
+  }
+});
+
+// Animate Decorative Circles on Scroll
+function parallaxCircles() {
+  const scrollY = window.scrollY;
+  const isMobile = window.innerWidth <= 768;
+  const bigFactor = isMobile ? 0.4 : 0.6;
+  const mediumFactor = isMobile ? 0.25 : 0.3;
+  if (bigCircle)
+    bigCircle.style.transform = `translateY(${scrollY * bigFactor}px)`;
+  if (mediumCircle)
+    mediumCircle.style.transform = `translateY(${scrollY * mediumFactor}px)`;
+}
+
+let ticking = false;
+window.addEventListener("scroll", function () {
+  if (!ticking) {
+    window.requestAnimationFrame(function () {
+      parallaxCircles();
+      ticking = false;
+    });
+    ticking = true;
+  }
+});
+
+// Implement an Image Switcher
+function updateImage(index) {
+  currentIndex = index;
+  mainImage.src = laptopImages[currentIndex];
+  dots.forEach((dot, dotIndex) => {
+    dot.classList.toggle("active", dotIndex === currentIndex);
+  });
+}
+
+dots.forEach((dot, index) => {
+  dot.addEventListener("click", () => updateImage(index));
+});
+
+arrows.forEach((arrow) => {
+  arrow.addEventListener("click", () => {
+    if (arrow.dataset.action === "prev") {
+      updateImage(
+        (currentIndex - 1 + laptopImages.length) % laptopImages.length
+      );
+    } else {
+      updateImage((currentIndex + 1) % laptopImages.length);
+    }
+  });
+});
+
+// Initialize
+updateImage(0);
diff --git a/094-laptop UI/style.css b/094-laptop UI/style.css
index 63bf615..36a8958 100644
--- a/094-laptop UI/style.css	
+++ b/094-laptop UI/style.css	
@@ -1,5 +1,17 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
 
+/* Refactor Colors with Custom Properties */
+:root {
+  --primary-text: #5f5f79;
+  --accent-color: #c36cbb;
+  --background: #fff;
+  --heading-gradient-start: #494964;
+  --heading-gradient-end: #6f6f89;
+  --secondary-text: #585772;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --drop-shadow: 0px 5px 3px black;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -47,7 +59,7 @@ nav {
 }
 
 .nav-link {
-  color: #5f5f79;
+  color: var(--primary-text);
   font-size: 1.125rem;
   text-decoration: none;
 }
@@ -57,9 +69,34 @@ nav {
   justify-content: flex-end;
 }
 
+/* Improve Navigation Accessibility */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 1;
+  margin-left: 1rem;
+}
+
+.hamburger span {
+  display: block;
+  height: 4px;
+  width: 30px;
+  background: var(--primary-text);
+  margin: 4px 0;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+
 /* hero */
 
-.presentation {
+.presentation,
+.extra-content {
   display: flex;
   width: 90%;
   margin: auto;
@@ -74,8 +111,12 @@ nav {
 .intro-text h1 {
   font-size: 2.75rem;
   font-weight: 500;
-  background-color: #494964;
-  background: linear-gradient(to right, #494964, #6f6f89);
+  background-color: var(--heading-gradient-start);
+  background: linear-gradient(
+    to right,
+    var(--heading-gradient-start),
+    var(--heading-gradient-end)
+  );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -84,7 +125,7 @@ nav {
 .intro-text p {
   margin-top: 5px;
   font-size: 1.375rem;
-  color: #585772;
+  color: var(--secondary-text);
 }
 
 .cta {
@@ -92,9 +133,9 @@ nav {
 }
 
 .cta-select {
-  border: 2px solid #c36cbb;
+  border: 2px solid var(--accent-color);
   background: transparent;
-  color: #c36cbb;
+  color: var(--accent-color);
   width: 150px;
   height: 50px;
   cursor: pointer;
@@ -102,13 +143,13 @@ nav {
 }
 
 .cta-add {
-  background: #c36cbb;
+  background: var(--accent-color);
   width: 150px;
   height: 50px;
   cursor: pointer;
   font-size: 1rem;
   border: none;
-  color: #fff;
+  color: var(--background);
   margin: 30px 0px 0px 30px;
 }
 
@@ -121,7 +162,7 @@ nav {
 
 .cover img {
   height: 100%;
-  filter: drop-shadow(0px 5px 3px black);
+  filter: drop-shadow(var(--drop-shadow));
   animation: drop 1.5s ease;
 }
 
@@ -169,13 +210,63 @@ nav {
   right: 20%;
 }
 
+/* Implement an Image Switcher */
+.laptop-select button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0 0.5rem;
+  cursor: pointer;
+  outline: none;
+}
+
+.laptop-select button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+}
+
+.laptop-dot .dot-shape {
+  stroke: var(--primary-text);
+  fill: none;
+  transition: fill 0.2s, stroke 0.2s;
+}
+.laptop-dot.active .dot-shape {
+  fill: var(--primary-text);
+  stroke: var(--primary-text);
+}
+
 @media (max-width: 768px) {
   .logo-container {
     flex: 3;
   }
+
+  .hamburger {
+    display: flex;
+  }
+
   .nav-links {
     display: none;
+    flex-direction: column;
+    background: var(--background);
+    position: absolute;
+    top: 10vh;
+    right: 5vw;
+    width: 40vw;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    padding: 0.25rem 0;
+    z-index: 0;
+  }
+
+  nav.nav-open .nav-links {
+    display: flex;
   }
+
+  .nav-links .nav-link {
+    display: block;
+    padding: 0.75rem 1rem;
+    font-size: 1.25rem;
+  }
+
   .cover img {
     max-width: 100%;
     height: auto;
diff --git a/095-headphones product page/index.html b/095-headphones product page/index.html
index f0dabc6..40a9209 100644
--- a/095-headphones product page/index.html	
+++ b/095-headphones product page/index.html	
@@ -39,7 +39,11 @@ <h1>The headphones of the future.</h1>
           </p>
           <a href="#about" class="btn">Read More</a>
         </div>
-        <img src="https://i.ibb.co/ydpFGg6/showcase.png" alt="" />
+        <!-- Improve Image Accessibility -->
+        <img
+          src="https://i.ibb.co/ydpFGg6/showcase.png"
+          alt="A pair of vibrant red Beats EP on-ear headphones with silver accents, showing their sleek design and attached audio cable."
+        />
       </div>
     </section>
 
@@ -63,42 +67,49 @@ <h2>People Aren't Hearing All the Music</h2>
       <div class="gallery">
         <img
           src="https://images.unsplash.com/photo-1619113026857-7aa017691b1f?q=80&w=1887"
-          alt=""
+          alt="A woman listens to music on red Beats headphones, wearing purple sunglasses with pink flowers and a sunset visible in the background."
           class="big"
         />
         <img
           src="https://images.unsplash.com/photo-1509098681029-b45e9c845022?q=80&w=2070"
-          alt=""
+          alt="A man wearing silver Beats headphones, glasses, and a black cap backwards, seen in profile against the warm light of a sunset."
           class="big"
         />
         <img
           src="https://images.unsplash.com/photo-1620578077783-33e254311182?w=500"
-          alt=""
+          alt="A woman with her hair in a bun holds her hands to her ears while wearing rose gold Beats headphones, listening with her eyes closed."
           class="big"
         />
         <img
           src="https://images.unsplash.com/photo-1545127398-14699f92334b?q=80&w=1935"
-          alt=""
+          alt="A close-up product shot of beige and rose gold Beats headphones resting on a white surface, showing the padded earcup and metallic accents."
           class="big"
         />
         <img
           src="https://images.unsplash.com/photo-1545127398-5aae47194b22?q=80&w=1935"
-          alt=""
+          alt="Beige and rose gold Beats headphones shown folded to highlight their compact, portable design and the 'Beats' logo on the headband."
           class="big"
         />
         <img
           src="https://images.unsplash.com/photo-1491927570842-0261e477d937?q=80&w=1887"
-          alt=""
+          alt="A pair of white Beats headphones floating above an open hand against a white slatted background."
           class="big"
         />
       </div>
     </section>
+    <!-- Add a Lightbox to the Gallery -->
+    <dialog id="lightbox">
+      <div class="lightbox__center">
+        <img id="lightbox-img" class="lightbox__img" src="" alt="" />
+      </div>
+    </dialog>
 
     <!-- Footer -->
-    <footer class="section-footer">
-      <div class="container">
-        <div>
-          <h2>Lorem ipsum dolor sit.</h2>
+    <!-- Refactor Footer with BEM -->
+    <footer class="footer">
+      <div class="footer__container">
+        <div class="footer__column">
+          <h2 class="footer__title">Lorem ipsum dolor sit.</h2>
           <a href="http://instagram.com">
             <i class="fab fa-instagram fa-2x"></i>
           </a>
@@ -109,38 +120,44 @@ <h2>Lorem ipsum dolor sit.</h2>
             <i class="fab fa-youtube fa-2x"></i>
           </a>
         </div>
-        <div>
-          <h3>Company Info</h3>
-          <ul>
+        <div class="footer__column">
+          <h3 class="footer__title">Company Info</h3>
+          <ul class="footer__links">
             <li><a href="#">All Products</a></li>
             <li><a href="#">About Us</a></li>
             <li><a href="#">Privacy Policy</a></li>
             <li><a href="#">Terms of Service</a></li>
           </ul>
         </div>
-        <div>
-          <h3>Blog Posts</h3>
-          <ul>
+        <div class="footer__column">
+          <h3 class="footer__title">Blog Posts</h3>
+          <ul class="footer__links">
             <li><a href="#">Lorem ipsum dolor.</a></li>
             <li><a href="#">Lorem ipsum dolor.</a></li>
             <li><a href="#">Lorem ipsum dolor.</a></li>
             <li><a href="#">Lorem ipsum dolor.</a></li>
           </ul>
         </div>
-        <div>
-          <h3>Subscribe</h3>
+        <div class="footer__column">
+          <h3 class="footer__title">Subscribe</h3>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-          <form name="email-form" onsubmit="event.preventDefault()">
-            <div class="email-form">
-              <span class="form-control-wrap"
-                ><input
+          <form
+            name="email-form"
+            class="footer__form"
+            onsubmit="event.preventDefault()"
+          >
+            <div class="footer__form-group">
+              <span class="footer__form-control-wrap">
+                <input
                   type="email"
                   name="email"
                   id="email"
                   size="40"
-                  class="form-control"
-                  placeholder="E-mail" /></span
-              ><button type="submit" value="Submit" class="form-control submit">
+                  class="footer__form-control"
+                  placeholder="E-mail"
+                />
+              </span>
+              <button type="submit" value="Submit" class="footer__form-submit">
                 <i class="fas fa-chevron-right"></i>
               </button>
             </div>
@@ -148,5 +165,6 @@ <h3>Subscribe</h3>
         </div>
       </div>
     </footer>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/095-headphones product page/script.js b/095-headphones product page/script.js
new file mode 100644
index 0000000..d1b2725
--- /dev/null
+++ b/095-headphones product page/script.js	
@@ -0,0 +1,21 @@
+// Add a Lightbox to the Gallery
+
+const galleryImages = document.querySelectorAll(".gallery img");
+const lightbox = document.getElementById("lightbox");
+const lightboxImg = document.getElementById("lightbox-img");
+
+galleryImages.forEach((img) => {
+  img.addEventListener("click", () => {
+    lightboxImg.src = img.src;
+    lightboxImg.alt = img.alt;
+    lightbox.showModal();
+  });
+});
+
+lightbox.addEventListener("click", (e) => {
+  if (e.target === lightbox) lightbox.close();
+});
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") lightbox.close();
+});
diff --git a/095-headphones product page/style.css b/095-headphones product page/style.css
index 219f436..e932cbd 100644
--- a/095-headphones product page/style.css	
+++ b/095-headphones product page/style.css	
@@ -16,6 +16,11 @@
   padding: 0;
 }
 
+/* Implement Smooth Scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: "Catamaran", sans-serif;
   line-height: 1.6;
@@ -23,6 +28,10 @@ body {
   font-size: 1.1rem;
 }
 
+body:has(#lightbox[open]) {
+  overflow: hidden;
+}
+
 h1,
 h2,
 h3,
@@ -181,42 +190,96 @@ img {
 .section-gallery .gallery img {
   width: 100%;
   height: 100%;
+  cursor: pointer;
+}
+
+/* Add a Lightbox to the Gallery */
+
+#lightbox {
+  padding: 0;
+  border: none;
+  box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 20px;
+  inset: 0;
+  transition: opacity 0.3s;
+  position: fixed;
+  margin: auto;
+  z-index: 1;
+}
+
+.lightbox__center {
+  display: grid;
+  place-items: center;
+}
+
+#lightbox[open] {
+  animation: fadeIn 0.3s;
+}
+
+.lightbox__img {
+  max-width: 90vw;
+  max-height: 80vh;
+  border-radius: 20px;
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
+  background: #fff;
+  padding: 0.5rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* footer */
+/* Refactor Footer with BEM */
 
-.section-footer {
+.footer {
   background-color: var(--primary-color);
   color: #fff;
   padding: 4rem 0;
 }
 
-.section-footer .container {
+.footer__container {
+  max-width: 1100px;
+  margin: auto;
+  overflow: hidden;
+  padding: 0 2rem;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
 }
 
-.section-footer h2 {
+.footer__title {
   font-size: 2rem;
   margin-bottom: 1rem;
 }
 
-.section-footer h3 {
+.footer__column h3.footer__title {
+  font-size: 1.3rem;
   margin-bottom: 0.7rem;
 }
 
-.section-footer a {
+.footer__links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer__links li a {
   line-height: 1.9;
   color: var(--light-color);
 }
 
-.section-footer a > i {
+.footer__column a > i {
   color: var(--ternary-color);
   margin-right: 0.5rem;
 }
 
-.email-form {
+.footer__form-group {
   display: inline-block;
   width: 100%;
   background-color: var(--ternary-color);
@@ -226,7 +289,7 @@ img {
   margin-top: 1rem;
 }
 
-.email-form .form-control {
+.footer__form-control {
   display: inline-block;
   width: 100%;
   height: 45px;
@@ -241,7 +304,7 @@ img {
   padding: 0 3rem 0 1.5rem;
 }
 
-.email-form .submit {
+.footer__form-submit {
   display: inline-block;
   position: absolute;
   top: 0;
@@ -314,17 +377,17 @@ img {
     display: none;
   }
 
-  .section-footer {
+  .footer {
     padding: 2rem 0;
   }
 
-  .section-footer .container {
+  .footer__container {
     grid-template-columns: 1fr;
     text-align: center;
   }
 
-  .section-footer div:nth-child(2),
-  .section-footer div:nth-child(3) {
+  .footer__container .footer__column:nth-child(2),
+  .footer__container .footer__column:nth-child(3) {
     display: none;
   }
 }
diff --git a/096-cloud hosting service/index.html b/096-cloud hosting service/index.html
index 2230795..dc885ba 100644
--- a/096-cloud hosting service/index.html	
+++ b/096-cloud hosting service/index.html	
@@ -21,13 +21,19 @@
     <div class="navbar">
       <div class="container flex">
         <h1 class="logo">Loruki.</h1>
-        <nav>
+        <nav class="navbar__nav">
           <ul>
             <li><a href="#demo">Demo</a></li>
             <li><a href="#features">Features</a></li>
             <li><a href="#docs">Docs</a></li>
           </ul>
         </nav>
+        <!-- Implement a Hamburger Menu for Mobile -->
+        <button class="hamburger" aria-label="Open menu" aria-expanded="false">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
       </div>
     </div>
 
@@ -43,24 +49,46 @@ <h1>Easier Deployment</h1>
           </p>
           <a href="#features" class="btn btn-outline">Learn More</a>
         </div>
-        <div class="showcase-form card">
-          <h2>Request a Demo</h2>
+        <!-- Refactor CSS to BEM -->
+        <div class="request-form card">
+          <h2 class="request-form__title">Request a Demo</h2>
+          <!-- Improve Form Accessibility -->
           <form onsubmit="event.preventDefault()">
-            <div class="form-control">
-              <input type="text" name="name" placeholder="Name" required />
+            <div class="request-form__control">
+              <label for="name" class="sr-only">Name</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                placeholder="Name"
+                required
+              />
             </div>
-            <div class="form-control">
+            <div class="request-form__control">
+              <label for="company" class="sr-only">Company Name</label>
               <input
                 type="text"
+                id="company"
                 name="company"
                 placeholder="Company Name"
                 required
               />
             </div>
-            <div class="form-control">
-              <input type="email" name="email" placeholder="Email" required />
+            <div class="request-form__control">
+              <label for="email" class="sr-only">Email</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Email"
+                required
+              />
             </div>
-            <input type="submit" value="Send" class="btn btn-primary" />
+            <input
+              type="submit"
+              value="Send"
+              class="request-form__submit btn btn-primary"
+            />
           </form>
         </div>
       </div>
@@ -374,5 +402,6 @@ <h1>Loruki</h1>
         </div>
       </div>
     </footer>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/096-cloud hosting service/script.js b/096-cloud hosting service/script.js
new file mode 100644
index 0000000..c4a726a
--- /dev/null
+++ b/096-cloud hosting service/script.js	
@@ -0,0 +1,31 @@
+const sections = document.querySelectorAll(".cli, .cloud, .languages");
+const hamburger = document.querySelector(".hamburger");
+const nav = document.querySelector(".navbar__nav");
+
+// Implement a Hamburger Menu for Mobile
+hamburger.addEventListener("click", () => {
+  const isOpen = nav.classList.toggle("is-open");
+  hamburger.setAttribute("aria-expanded", isOpen);
+});
+
+nav.addEventListener("click", (e) => {
+  if (e.target.tagName === "A" && nav.classList.contains("is-open")) {
+    nav.classList.remove("is-open");
+    hamburger.setAttribute("aria-expanded", "false");
+  }
+});
+
+// Animate Elements on Scroll
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("visible");
+        observer.unobserve(entry.target); // runs only once on load
+      }
+    });
+  },
+  { threshold: 0.05 }
+);
+
+sections.forEach((section) => observer.observe(section));
diff --git a/096-cloud hosting service/style.css b/096-cloud hosting service/style.css
index c7e3898..2d9814f 100644
--- a/096-cloud hosting service/style.css	
+++ b/096-cloud hosting service/style.css	
@@ -8,6 +8,13 @@
   --success-color: #5cb85c;
   --error-color: #d9534f;
   --grey-color: #333;
+  --animation-duration: 0.5s;
+  --animation-easing: ease-out;
+  --animation-settings: var(--animation-duration) var(--animation-easing);
+  --top-animation: slideInFromTop var(--animation-settings);
+  --left-animation: slideInFromLeft var(--animation-settings);
+  --right-animation: slideInFromRight var(--animation-settings);
+  --bottom-animation: slideInFromBottom var(--animation-settings);
 }
 
 * {
@@ -20,6 +27,7 @@ body {
   font-family: "Lato", sans-serif;
   color: var(--grey-color);
   line-height: 1.6;
+  overflow-x: hidden;
 }
 
 ul {
@@ -66,7 +74,7 @@ pre {
   height: 70px;
 }
 
-.navbar ul {
+.navbar .navbar__nav ul {
   display: flex;
 }
 
@@ -88,6 +96,28 @@ pre {
   margin: 0;
 }
 
+/* Implement a Hamburger Menu for Mobile */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.hamburger span {
+  display: block;
+  height: 4px;
+  width: 100%;
+  background: #fff;
+  margin: 4px 0;
+  border-radius: 2px;
+}
+
 /* showcase */
 
 .showcase {
@@ -112,10 +142,12 @@ pre {
 }
 
 .showcase-text {
-  animation: slideInFromLeft 0.5s ease-out;
+  animation: var(--left-animation);
 }
 
-.showcase-form {
+/* Refactor CSS to BEM */
+
+.request-form {
   position: relative;
   top: 60px;
   height: 350px;
@@ -123,15 +155,18 @@ pre {
   padding: 40px;
   z-index: 100;
   justify-self: flex-end;
-  animation: slideInFromRight 0.5s ease-out;
+  animation: var(--right-animation);
 }
 
-.showcase-form .form-control {
+/* .request-form__title {
+} */
+
+.request-form__control {
   margin: 30px 0;
 }
 
-.showcase-form input[type="text"],
-.showcase-form input[type="email"] {
+.request-form__control input[type="text"],
+.request-form__control input[type="email"] {
   border: 0;
   border-bottom: 1px solid #b4becb;
   width: 100%;
@@ -139,10 +174,13 @@ pre {
   font-size: 1rem;
 }
 
-.showcase-form input:focus {
+.request-form__control input:focus {
   outline: none;
 }
 
+/* .request-form__submit {
+} */
+
 .showcase::after {
   content: "";
   position: absolute;
@@ -161,7 +199,7 @@ pre {
 
 .stats {
   padding-top: 100px;
-  animation: slideInFromBottom 0.5s ease-out;
+  animation: var(--bottom-animation);
 }
 
 .stats-heading {
@@ -282,6 +320,19 @@ pre {
 
 /* animations */
 
+/* Animate Elements on Scroll */
+.cli.visible {
+  animation: var(--left-animation);
+}
+
+.cloud.visible {
+  animation: var(--right-animation);
+}
+
+.languages.visible {
+  animation: var(--bottom-animation);
+}
+
 @keyframes slideInFromLeft {
   0% {
     opacity: 0;
@@ -353,13 +404,13 @@ pre {
   .showcase-text {
     text-align: center;
     margin-top: 40px;
-    animation: slideInFromTop 0.5s ease-out;
+    animation: var(--top-animation);
   }
 
   .showcase-form {
     justify-self: center;
     margin: auto;
-    animation: slideInFromBottom 0.5s ease-out;
+    animation: var(--bottom-animation);
   }
 
   .cloud .grid {
@@ -385,13 +436,34 @@ pre {
     height: 110px;
   }
 
-  .navbar .flex {
+  .navbar .navbar__nav ul {
+    display: none;
     flex-direction: column;
+    background: var(--secondary-color);
+    position: absolute;
+    top: 80px;
+    right: 0;
+    left: 0;
+    padding: 20px 0;
+    z-index: 100;
+  }
+
+  .navbar .navbar__nav.is-open ul {
+    display: flex;
+  }
+
+  .navbar .navbar__nav ul li a {
+    display: block;
+    font-size: 1.25rem;
+    padding: 16px;
+  }
+
+  .navbar a:hover {
+    border-bottom: none;
   }
 
-  .navbar ul {
-    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.1);
+  .hamburger {
+    display: flex;
   }
 
   .showcase-form {
diff --git a/096-cloud hosting service/utilities.css b/096-cloud hosting service/utilities.css
index 66aaf24..2afae7e 100644
--- a/096-cloud hosting service/utilities.css	
+++ b/096-cloud hosting service/utilities.css	
@@ -241,3 +241,16 @@
 .p-5 {
   padding: 4rem;
 }
+
+/* Improve Form Accessibility */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/097-terminal style landing page/index.html b/097-terminal style landing page/index.html
index 3b0c82b..19a00ef 100644
--- a/097-terminal style landing page/index.html	
+++ b/097-terminal style landing page/index.html	
@@ -17,8 +17,11 @@
     <div class="container">
       <nav>
         <ul>
-          <li id="about">/about</li>
-          <li id="contact">/contact</li>
+          <!-- Improve Accessibility for Interactive Elements -->
+          <li><button id="about">/about</button></li>
+          <li><button id="contact">/contact</button></li>
+          <!-- Add a "help" Command -->
+          <li><button id="help">/help</button></li>
         </ul>
       </nav>
       <main>
@@ -59,6 +62,15 @@ <h2>contact-me:$<span class="cursor">|</span></h2>
           <li>Email: dagny@taggart.com</li>
         </ul>
       </div>
+      <div id="help-content">
+        <h2>help:$<span class="cursor">|</span></h2>
+        <p>Available commands:</p>
+        <ul>
+          <li>/about</li>
+          <li>/contact</li>
+          <li>/help</li>
+        </ul>
+      </div>
     </div>
     <script src="https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/js/winbox.min.js"></script>
     <script src="script.js"></script>
diff --git a/097-terminal style landing page/script.js b/097-terminal style landing page/script.js
index 10e8a89..f17b7c5 100644
--- a/097-terminal style landing page/script.js	
+++ b/097-terminal style landing page/script.js	
@@ -1,43 +1,67 @@
 const about = document.querySelector("#about");
 const contact = document.querySelector("#contact");
+const help = document.querySelector("#help");
 const aboutContent = document.querySelector("#about-content");
 const contactContent = document.querySelector("#contact-content");
+const helpContent = document.querySelector("#help-content");
 
-about.addEventListener("click", () => {
-  const aboutBox = new WinBox({
-    title: "About Me",
-    // modal: true,
+// Refactor Window Creation with a Factory Function
+function createWindow(title, mountContent, options = {}) {
+  const defaultOptions = {
     width: "400px",
     height: "400px",
     top: 50,
     right: 50,
     bottom: 50,
     left: 50,
-    mount: aboutContent,
+  };
+  return new WinBox({
+    title,
+    mount: mountContent,
     onfocus: function () {
       this.setBackground("var(--text-color)");
     },
     onblur: function () {
       this.setBackground("#777");
     },
+    ...defaultOptions,
+    ...options,
   });
+}
+
+about.addEventListener("click", () => {
+  createWindow("About Me", aboutContent);
 });
 
 contact.addEventListener("click", () => {
-  const contactBox = new WinBox({
-    title: "Contact Me",
-    width: "400px",
-    height: "400px",
+  createWindow("Contact Me", contactContent, {
     top: 100,
-    right: 50,
-    bottom: 50,
     left: 150,
-    mount: contactContent,
-    onfocus: function () {
-      this.setBackground("var(--text-color)");
-    },
-    onblur: function () {
-      this.setBackground("#777");
-    },
   });
 });
+
+// Add a "help" Command
+help.addEventListener("click", () => {
+  createWindow("Help", helpContent, {
+    top: 150,
+    left: 250,
+  });
+});
+
+// Implement a Typewriter Effect
+document.addEventListener("DOMContentLoaded", () => {
+  const heading = document.querySelector("h1");
+  const text = heading.childNodes[0].textContent;
+  let i = 0;
+
+  function typeWriter() {
+    if (i < text.length) {
+      heading.childNodes[0].textContent += text.charAt(i);
+      i++;
+      setTimeout(typeWriter, 200); // Adjust speed as needed
+    }
+  }
+
+  heading.childNodes[0].textContent = "";
+  typeWriter();
+});
diff --git a/097-terminal style landing page/style.css b/097-terminal style landing page/style.css
index 5dd1dc3..f450c4d 100644
--- a/097-terminal style landing page/style.css	
+++ b/097-terminal style landing page/style.css	
@@ -42,9 +42,19 @@ nav ul {
   align-items: center;
 }
 
-nav ul li {
+/* nav ul li {
   color: var(--text-color);
   cursor: pointer;
+} */
+
+/* Improve Accessibility for Interactive Elements */
+nav ul li button {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
 }
 
 h1 {
@@ -52,6 +62,8 @@ h1 {
   font-size: 50px;
   letter-spacing: -5px;
   margin-bottom: 20px;
+  /* Implement a Typewriter Effect */
+  min-width: 10ch;
 }
 
 h2 {
diff --git a/098-magazine layout/index.html b/098-magazine layout/index.html
index ae9b81b..23d6c98 100644
--- a/098-magazine layout/index.html	
+++ b/098-magazine layout/index.html	
@@ -23,8 +23,10 @@ <h1>Dagny Taggart</h1>
           veniam.
         </p>
         <div class="article-body flow">
+          <!-- Add a Pull Quote with shape-outside  -->
           <p>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            <span class="pull-quote">Lorem ipsum dolor sit.</span> Molestiae
             modi ab recusandae aliquid perspiciatis unde dolorum id natus velit
             vel, facere excepturi similique nemo enim quasi nam, expedita
             inventore? Repellat aspernatur ducimus facilis nemo omnis sunt unde,
diff --git a/098-magazine layout/style.css b/098-magazine layout/style.css
index a93b654..0c8050f 100644
--- a/098-magazine layout/style.css	
+++ b/098-magazine layout/style.css	
@@ -12,12 +12,35 @@
 
   --clr-primary-400: hsl(60 100% 50%);
   --clr-neutral-900: hsl(0 0% 0%);
+  --clr-neutral-200: hsl(0 0% 95%);
   --clr-neutral-100: hsl(0 0% 100%);
-
-  --fs-xl: clamp(3rem, 1rem + 10vw, 6rem);
-  --fs-600: 2rem;
-  --fs-500: 1.5rem;
-  --fs-400: 1.125rem;
+  --clr-bg: var(--clr-neutral-100);
+  --clr-text: var(--clr-neutral-900);
+
+  /* Refactor Font Sizes with a Modular Scale */
+  --fs-base: 1.125rem;
+  --ratio: 1.333;
+  --fs-400: var(--fs-base);
+  --fs-500: calc(var(--fs-400) * var(--ratio)); /* 1 step */
+  --fs-600: calc(var(--fs-500) * var(--ratio)); /* 2 steps */
+  --fs-700: calc(var(--fs-600) * var(--ratio)); /* 3 steps */
+  --fs-800: calc(var(--fs-700) * var(--ratio)); /* 4 steps */
+  --fs-900: calc(var(--fs-800) * var(--ratio)); /* 5 steps */
+  --fs-1000: calc(var(--fs-900) * var(--ratio)); /* 6 steps */
+  --fs-xl-min: var(--fs-800); /* 4 steps above base: 3.552em */
+  --fs-xl-max: var(--fs-1000); /* 6 steps above base: 6.312em */
+  --fs-xl: clamp(var(--fs-xl-min), 1rem + 10vw, var(--fs-xl-max));
+}
+
+/* Implement a Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --clr-neutral-900: hsl(0 0% 90%);
+    --clr-neutral-200: hsl(0 0% 25%);
+    --clr-neutral-100: hsl(0 0% 10%);
+    /* --clr-bg: var(--clr-neutral-100);
+    --clr-text: var(--clr-neutral-900); */
+  }
 }
 
 body,
@@ -34,6 +57,8 @@ body {
   font-family: var(--ff-body);
   font-size: var(--fs-400);
   line-height: 1.6;
+  color: var(--clr-text);
+  background-color: var(--clr-bg);
 }
 
 img {
@@ -53,11 +78,15 @@ h1 {
   text-transform: uppercase;
 }
 
+/* Improve Blockquote Styling */
 blockquote {
   font-size: var(--fs-600);
   line-height: 1.2;
   text-align: center;
   margin-bottom: 1em;
+  background-color: var(--clr-neutral-200);
+  padding: 1em;
+  /* column-span: all; */
 }
 
 blockquote::before {
@@ -68,6 +97,25 @@ blockquote::after {
   content: close-quote;
 }
 
+/* Add a Pull Quote with shape-outside */
+.pull-quote {
+  float: left;
+  width: 7em;
+  height: 7em;
+  margin: 1.5em 1em 1em 0em;
+  shape-outside: circle(50%);
+  clip-path: circle(50%);
+  background: var(--clr-neutral-200);
+  display: grid;
+  place-items: center;
+  font-family: var(--ff-heading);
+  font-size: var(--fs-400);
+  font-style: italic;
+  text-align: center;
+  padding: 1em;
+  box-sizing: border-box;
+}
+
 article {
   display: grid;
 }
@@ -117,4 +165,11 @@ article > *:not(img) {
   article > *:not(img) {
     grid-column: 2 / -1;
   }
+
+  .pull-quote {
+    width: 8em;
+    height: 8em;
+    margin: 1.5em 1em 1em 0em;
+    font-size: var(--fs-500);
+  }
 }
diff --git a/099-parallax website/index.html b/099-parallax website/index.html
index 801dfae..aae61db 100644
--- a/099-parallax website/index.html	
+++ b/099-parallax website/index.html	
@@ -17,19 +17,41 @@ <h4>yayavar</h4>
       </nav>
       <div class="container">
         <h2 class="main-title">Explore.</h2>
-        <img src="https://i.ibb.co/rsp6RFJ/bg1.png" class="background" alt="" />
-        <img src="https://i.ibb.co/237VsHs/girl1.png" class="girl" alt="" />
-        <img src="https://i.ibb.co/BKtjhV2/rock1.png" class="rock" alt="" />
+        <!-- Improve Image Accessibility -->
+        <img
+          src="https://i.ibb.co/rsp6RFJ/bg1.png"
+          class="background"
+          alt="A woman sits on a rocky cliff looking out over the vast Blyde River Canyon in South Africa at sunrise."
+        />
+        <!-- Refactor Magic Numbers in JavaScript -->
+        <img
+          src="https://i.ibb.co/237VsHs/girl1.png"
+          class="girl"
+          alt=""
+          data-offset="200"
+        />
+        <img
+          src="https://i.ibb.co/BKtjhV2/rock1.png"
+          class="rock"
+          alt=""
+          data-offset="300"
+        />
       </div>
       <div class="content">
         <div class="content-images">
           <div>
-            <img src="https://i.ibb.co/w4N157P/haridwar.jpg" alt="" />
+            <img
+              src="https://i.ibb.co/w4N157P/haridwar.jpg"
+              alt="A panoramic view of the lush, green Himalayan foothills in the region of Haridwar, India, showing a river valley and terraced fields under a cloudy sky."
+            />
             <h4>Haridwar</h4>
             <h3>India</h3>
           </div>
           <div>
-            <img src="https://i.ibb.co/v4yCXYS/rishikesh.jpg" alt="" />
+            <img
+              src="https://i.ibb.co/v4yCXYS/rishikesh.jpg"
+              alt="A group of people in a red inflatable boat river rafting on the Ganges in Rishikesh, India, surrounded by dense, green forest on the riverbanks."
+            />
             <h4>Rishikesh</h4>
             <h3>India</h3>
           </div>
@@ -47,14 +69,18 @@ <h3>India</h3>
           quae.
         </p>
       </div>
+      <!-- Fix Regressions -->
+      <div class="pin-spacer"></div>
     </section>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
       integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
       crossorigin="anonymous"
     ></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script> -->
+    <!-- Upgrade to GSAP ScrollTrigger -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/099-parallax website/script.js b/099-parallax website/script.js
index 2defb35..e518fa8 100644
--- a/099-parallax website/script.js	
+++ b/099-parallax website/script.js	
@@ -1,18 +1,41 @@
-const controller = new ScrollMagic.Controller();
-const tl = gsap.timeline();
+const animatedElements = document.querySelectorAll("[data-offset]");
+const content = document.querySelector(".content");
+const pinSpacer = document.querySelector(".pin-spacer");
 
-tl.to(".rock", { duration: 10, y: -300 })
-  .to(".girl", { duration: 10, y: -200 }, "-=10")
-  .fromTo(".background", { y: -50 }, { duration: 10, y: 0 }, "-=10")
-  .to(".content", { duration: 10, top: "0%" }, "-=10")
-  .fromTo(".content-images", { opacity: 0 }, { duration: 3, opacity: 1 })
-  .fromTo(".text", { opacity: 0 }, { duration: 3, opacity: 1 });
+// Add Responsive Animation Adjustments
+const isMobile = window.innerWidth < 768;
+const offsetScale = isMobile ? 0.4 : 1;
+
+// Fix Regressions
+pinSpacer.style.height = `${content.offsetHeight - window.innerHeight}px`;
+
+// Upgrade to GSAP ScrollTrigger
+gsap.registerPlugin(ScrollTrigger);
 
-let scene = new ScrollMagic.Scene({
-  triggerElement: "section",
-  duration: "300%",
-  triggerHook: 0,
-})
-  .setTween(tl)
-  .setPin("section")
-  .addTo(controller);
+const timeline = gsap.timeline({
+  scrollTrigger: {
+    trigger: "section",
+    start: "top top",
+    end: "+=300%",
+    scrub: true,
+    pin: true,
+  },
+});
+
+// Refactor Magic Numbers in JavaScript
+animatedElements.forEach((element) => {
+  const baseOffset = parseInt(element.dataset.offset, 10);
+  const offset = -baseOffset * offsetScale;
+  timeline.to(element, { duration: 10, y: offset }, "-=10");
+});
+
+timeline
+  .fromTo(
+    ".background",
+    { y: isMobile ? -20 : -50 },
+    { y: 0, duration: 10 },
+    "-=10"
+  )
+  .to(".content", { duration: 10, top: "0%" }, "-=10")
+  .fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 })
+  .fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 });
diff --git a/100-hulu webpage clone/index.html b/100-hulu webpage clone/index.html
index 9701808..a857bc1 100644
--- a/100-hulu webpage clone/index.html	
+++ b/100-hulu webpage clone/index.html	
@@ -11,13 +11,41 @@
   </head>
   <body>
     <header class="header">
-      <nav>
-        <ul>
-          <li>
-            <button class="login-btn">Log In</button>
-          </li>
-        </ul>
-      </nav>
+      <!-- Add a Logo to the Header -->
+      <div class="header-main">
+        <img
+          src="https://i.ibb.co/7xphg3tR/hulu-2.png"
+          alt=""
+          class="header-logo"
+        />
+        <!-- <svg
+          viewBox="0 -2 61 24"
+          height="24"
+          width="61"
+          role="img"
+          aria-labelledby="logoTitle"
+          fill="#00ed82"
+        >
+          <title id="logoTitle">hulu</title>
+          <path
+            d="M9.57046613 6.24096927h-3.1015504c-1.0875017 0-1.63435327.29263768-1.63435327.29263768V0H0v20h4.83456246v-8.0704467c0-.7137436.58067743-1.29171 1.2958127-1.29171h2.81374862c.7162628 0 1.29524892.5779664 1.29524892 1.29171V20h4.8359719v-8.6950777c0-3.65670596-2.4444829-5.06395303-5.50487847-5.06395303zm46.48012787 0v8.06932223c0 .714868-.579268 1.2931156-1.294967 1.2931156h-2.8134668c-.7162628 0-1.2952489-.5782476-1.2952489-1.2931156V6.24096927h-4.8368175V14.712844c0 3.4627386 2.2220777 5.287156 5.5062878 5.287156h4.7347762v-.0247379c3.0245965 0 4.8354081-2.1465718 4.8354081-5.2624181V6.24096927H56.050594zM28.7728487 14.3102915c0 .714868-.5798318 1.2931156-1.2955308 1.2931156h-2.8137486c-.7162628 0-1.2955308-.5782476-1.2955308-1.2931156V6.24096927h-4.8359719V14.712844c0 3.4627386 2.2220778 5.287156 5.506006 5.287156h4.7347761v-.0247379c3.0248785 0 4.8359719-2.1465718 4.8359719-5.2624181V6.24096927h-4.8359719v8.06932223zM37.294431 20h4.8365357V0H37.294431v20z"
+            fill-rule="evenodd"
+          ></path>
+        </svg> -->
+        <nav>
+          <ul>
+            <li>
+              <button class="login-btn">Log In</button>
+            </li>
+          </ul>
+          <!-- Add a Hamburger Menu for Mobile -->
+          <button class="hamburger" aria-label="Open menu">&#9776;</button>
+        </nav>
+        <nav class="nav-overlay" aria-label="Mobile Navigation">
+          <button class="login-btn btn">Log In</button>
+          <button class="signup-btn btn">Sign Up Now</button>
+        </nav>
+      </div>
       <div class="header-content">
         <h4>Try up to one month free</h4>
         <img
@@ -58,28 +86,29 @@ <h4>Included in all plans</h4>
         movies, Hulu Originals, kids shows, and more.
       </div>
       <div class="covers">
-        <div class="cover-1">
+        <!-- Refactor CSS with BEM -->
+        <div class="covers__item covers__item--tv">
           <div class="cover-grad"></div>
           <div class="cover-text">
             <div class="sub-title">Past & Current Seasons</div>
             <h3>TV Shows</h3>
           </div>
         </div>
-        <div class="cover-2">
+        <div class="covers__item covers__item--movies">
           <div class="cover-grad"></div>
           <div class="cover-text">
             <div class="sub-title">New & Classics</div>
             <h3>Movies</h3>
           </div>
         </div>
-        <div class="cover-3">
+        <div class="covers__item covers__item--originals">
           <div class="cover-grad"></div>
           <div class="cover-text">
             <div class="sub-title">Groundbreaking</div>
             <h3>Hulu Originals</h3>
           </div>
         </div>
-        <div class="cover-4">
+        <div class="covers__item covers__item--networks">
           <div class="cover-grad"></div>
           <div class="cover-text">
             <div class="sub-title">Add-On</div>
@@ -210,33 +239,33 @@ <h4>Hulu + Live TV</h4>
         </div>
       </div>
     </footer>
-    <div class="modal">
-      <div class="modal-box">
+    <!-- Improve Modal Accessibility -->
+    <dialog class="modal">
+      <form method="dialog" class="modal-box">
         <div class="modal-body">
           <h3>Log In</h3>
-          <form>
-            <div class="form-control">
-              <label for="email">Email</label>
-              <input type="email" id="email" />
-            </div>
-            <div class="form-control">
-              <label for="password">Password</label>
-              <input type="password" id="password" />
-            </div>
-            <p><a href="#">Forgot your email or password</a></p>
-            <button class="btn btn-dark">Log In</button>
-          </form>
+          <div class="form-control">
+            <label for="email">Email</label>
+            <input type="email" id="email" />
+          </div>
+          <div class="form-control">
+            <label for="password">Password</label>
+            <input type="password" id="password" />
+          </div>
+          <p><a href="#">Forgot your email or password</a></p>
+          <button class="btn btn-dark">Log In</button>
         </div>
         <div class="modal-footer">
           <p>Don't have an account? <a href="#">Start your free trial</a></p>
         </div>
-        <img
-          class="close"
-          src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/close.svg?raw=true"
-          alt="close"
-        />
-      </div>
-    </div>
+        <button type="button" class="close" aria-label="Close">
+          <img
+            src="https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/close.svg?raw=true"
+            alt="close"
+          />
+        </button>
+      </form>
+    </dialog>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/100-hulu webpage clone/script.js b/100-hulu webpage clone/script.js
index 80a04da..1d12d50 100644
--- a/100-hulu webpage clone/script.js	
+++ b/100-hulu webpage clone/script.js	
@@ -1,15 +1,40 @@
 const modal = document.querySelector(".modal");
-const loginButton = document.querySelector(".login-btn");
+const loginButtons = document.querySelectorAll(".login-btn");
 const closeButton = document.querySelector(".close");
+const hamburger = document.querySelector(".hamburger");
+const nav = document.querySelector(".nav-overlay");
 
-const openModal = () => (modal.style.display = "block");
-const closeModal = () => (modal.style.display = "none");
-const outsideClick = (e) => {
-  if (e.target == modal) {
-    closeModal();
-  }
+// Improve Modal Accessibility
+const openModal = () => {
+  modal.showModal();
+  // Focus first input inside dialog
+  const firstInput = modal.querySelector("input");
+  if (firstInput) firstInput.focus();
 };
 
-loginButton.addEventListener("click", openModal);
+const closeModal = () => {
+  modal.close();
+  loginButton.focus();
+};
+
+loginButtons.forEach((btn) => btn.addEventListener("click", openModal));
 closeButton.addEventListener("click", closeModal);
-window.addEventListener("click", outsideClick);
+
+modal.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    closeModal();
+  }
+});
+
+// Add a Hamburger Menu for Mobile
+hamburger.addEventListener("click", () => {
+  const isOpen = nav.classList.toggle("is-open");
+  hamburger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+});
+
+nav.addEventListener("click", (e) => {
+  if (e.target.tagName === "BUTTON" && nav.classList.contains("is-open")) {
+    nav.classList.remove("is-open");
+    hamburger.setAttribute("aria-expanded", "false");
+  }
+});
diff --git a/100-hulu webpage clone/style.css b/100-hulu webpage clone/style.css
index fa58bfd..6bd44b2 100644
--- a/100-hulu webpage clone/style.css	
+++ b/100-hulu webpage clone/style.css	
@@ -15,6 +15,10 @@ body {
   overflow-x: hidden;
 }
 
+html:has(dialog.modal[open]) {
+  overflow: hidden;
+}
+
 a {
   color: #fff;
   text-decoration: none;
@@ -108,18 +112,26 @@ h4 {
 
 .header {
   height: 530px;
-  background: url(https://i.ibb.co/gyT1SQj/header.jpg)
-    no-repeat center center / cover;
+  background: url(https://i.ibb.co/gyT1SQj/header.jpg) no-repeat center center /
+    cover;
 }
 
-.header nav {
+/* Add a Logo to the Header */
+.header-main {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: flex-start;
   padding: 20px 40px;
   z-index: 2;
   position: relative;
 }
 
+.header-logo {
+  width: 61px;
+  height: 24px;
+  max-width: none;
+}
+
 .header nav .login-btn {
   cursor: pointer;
   background: none;
@@ -130,6 +142,16 @@ h4 {
   letter-spacing: 1px;
 }
 
+.header nav .login-btn:focus {
+  outline: 2px solid #00ed82;
+  outline-offset: 2px;
+}
+
+.header .hamburger,
+.header .nav-overlay {
+  display: none;
+}
+
 .header .header-content {
   display: flex;
   flex-direction: column;
@@ -212,10 +234,12 @@ h4 {
   margin-top: 40px;
 }
 
-.categories .covers > div {
+/* Refactor CSS with BEM */
+.covers__item {
   height: 500px;
   width: 300px;
   position: relative;
+  background: var(--cover-img) no-repeat center center / cover;
 }
 
 .categories .cover-grad {
@@ -239,21 +263,17 @@ h4 {
   text-align: left;
 }
 
-.categories .cover-1 {
-  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-1.jpg?raw=true")
-    no-repeat center center / cover;
+.covers__item--tv {
+  --cover-img: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-1.jpg?raw=true");
 }
-.categories .cover-2 {
-  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-2.jpg?raw=true")
-    no-repeat center center / cover;
+.covers__item--movies {
+  --cover-img: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-2.jpg?raw=true");
 }
-.categories .cover-3 {
-  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-3.jpg?raw=true")
-    no-repeat center center / cover;
+.covers__item--originals {
+  --cover-img: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-3.jpg?raw=true");
 }
-.categories .cover-4 {
-  background: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-4.jpg?raw=true")
-    no-repeat center center / cover;
+.covers__item--networks {
+  --cover-img: url("https://github.com/bradtraversy/hulu-webpage-clone/blob/main/img/cover-4.jpg?raw=true");
 }
 
 /* Live */
@@ -361,25 +381,37 @@ h4 {
 }
 
 /* Modal */
+/* Improve Modal Accessibility */
 
 .modal {
-  display: none;
   position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  max-width: 95vw;
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  background: #fff;
+  color: #333;
+  padding: 0;
+  animation: modalopen 0.5s;
+}
+
+.modal::backdrop {
   background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
 }
 
 .modal-box {
-  margin: 10% auto;
-  width: 400px;
-  background-color: #fff;
-  color: #333;
-  position: relative;
-  animation: modalopen 1s;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 @keyframes modalopen {
@@ -392,6 +424,7 @@ h4 {
 }
 
 .modal-body {
+  width: 100%;
   padding: 50px;
 }
 
@@ -404,16 +437,19 @@ h4 {
   margin-top: 30px;
 }
 
-.modal .close {
+.close {
   cursor: pointer;
   height: 23px;
   width: 23px;
   position: absolute;
   top: 20px;
   right: 20px;
+  background: transparent;
+  border: none;
+  padding: 0;
 }
 
-.modal .modal-footer {
+.modal-footer {
   background-color: #f7f7f9;
   color: #333;
   padding: 20px 0;
@@ -463,6 +499,50 @@ h4 {
     width: 200px;
   }
 
+  /* Add a Hamburger Menu for Mobile */
+
+  .header nav ul {
+    display: none;
+  }
+
+  .header-main {
+    align-items: center;
+  }
+
+  .header .hamburger {
+    display: block;
+    background-color: #323843;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: #fff;
+    padding: 12px 16px;
+    z-index: 2;
+    cursor: pointer;
+  }
+
+  .header .nav-overlay {
+    display: none;
+    position: absolute;
+    top: 83px;
+    right: 40px;
+    background: rgba(0, 0, 0, 0.9);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    z-index: 2;
+  }
+
+  .header .nav-overlay.is-open {
+    display: flex;
+    gap: 4px;
+  }
+
+  .nav-overlay .btn {
+    width: 100%;
+  }
+
   .header .header-content {
     text-align: center;
     padding: 0 20px;
@@ -530,5 +610,10 @@ h4 {
 
   .modal .modal-box {
     width: 350px;
+    max-width: 95vw;
+    margin: 0 auto;
+  }
+  .modal-body {
+    padding: 30px;
   }
 }
diff --git a/101-cascade layers/index.html b/101-cascade layers/index.html
index bd4b61f..e6cf02f 100644
--- a/101-cascade layers/index.html	
+++ b/101-cascade layers/index.html	
@@ -18,7 +18,8 @@ <h1>Cascade Layers 101</h1>
     <main>
       <section class="main-content container">
         <article>
-          <h2>Selector Specificity</h2>
+          <!-- Enhance the "Utility" Layer -->
+          <h2 class="text-primary">Selector Specificity</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio unde
             amet fugit similique reiciendis <a href="/">distinctio</a> enim esse
diff --git a/101-cascade layers/styles/components.css b/101-cascade layers/styles/components.css
index 9de1f85..a7c3aa7 100644
--- a/101-cascade layers/styles/components.css	
+++ b/101-cascade layers/styles/components.css	
@@ -1,9 +1,7 @@
-.card {
-    background: white;
-    border-radius: 8px;
-    padding: 15px;
-  }
+/* Nest Layers for Granularity */
+@layer nav, cards;
 
+@layer nav {
   .btn {
     background: #1c9f6d;
     color: #fff;
@@ -11,4 +9,13 @@
     border-radius: 8px;
     text-decoration: none;
     display: inline-block;
-  }
\ No newline at end of file
+  }
+}
+
+@layer cards {
+  .card {
+    background: white;
+    border-radius: 8px;
+    padding: 15px;
+  }
+}
diff --git a/101-cascade layers/styles/main.css b/101-cascade layers/styles/main.css
index 6407a16..4f6b9d0 100644
--- a/101-cascade layers/styles/main.css	
+++ b/101-cascade layers/styles/main.css	
@@ -6,5 +6,11 @@
 @import "content.css" layer(content);
 @import "components.css" layer(components);
 @import "utility.css" layer(utility);
+/* Integrate a Third-Party Library */
 /* @import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
   layer(bulma); */
+
+/* Experiment with Unlayered Styles */
+/* a {
+  color: red;
+} */
diff --git a/101-cascade layers/styles/utility.css b/101-cascade layers/styles/utility.css
index 7cb2add..598318e 100644
--- a/101-cascade layers/styles/utility.css	
+++ b/101-cascade layers/styles/utility.css	
@@ -10,3 +10,7 @@
 .center {
   text-align: center;
 }
+/* Enhance the "Utility" Layer */
+.text-primary {
+  color: var(--primary);
+}
diff --git a/102-container queries/index.html b/102-container queries/index.html
index 8bedbe1..a0c9c15 100644
--- a/102-container queries/index.html	
+++ b/102-container queries/index.html	
@@ -11,6 +11,7 @@
   <body>
     <div class="wrapper">
       <main>
+        <!-- Identify the CSS Containers -->
         <section class="primary-content" style="--theme: dark">
           <h1>Desert Oasis: Exploring Nature's Tranquility</h1>
           <p>
@@ -74,6 +75,77 @@ <h2>Sand Dune Hideaway</h2>
           </article>
         </section>
       </main>
+      <!-- Implement Thematic Card Styles -->
+      <footer>
+        <article style="--theme: dune">
+          <div class="card">
+            <h3>Sand Dune Hideaway</h3>
+            <p>
+              A tranquil spot surrounded by windswept sands and warm, golden
+              light.
+            </p>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 6C2.6 6.5 3.2 7 4.5 7C7 7 7 5 9.5 5C12.1 5 11.9 7 14.5 7C17 7 17 5 19.5 5C20.8 5 21.4 5.5 22 6M2 12C2.6 12.5 3.2 13 4.5 13C7 13 7 11 9.5 11C12.1 11 11.9 13 14.5 13C17 13 17 11 19.5 11C20.8 11 21.4 11.5 22 12M2 18C2.6 18.5 3.2 19 4.5 19C7 19 7 17 9.5 17C12.1 17 11.9 19 14.5 19C17 19 17 17 19.5 17C20.8 17 21.4 17.5 22 18"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </article>
+        <article style="--theme: oasis">
+          <div class="card">
+            <h3>Mirage Haven Cottage</h3>
+            <p>A cool retreat with the gentle feel of a life-giving spring.</p>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14 9.536V7C14 5.93913 14.4214 4.92172 15.1716 4.17157C15.9217 3.42143 16.9391 3 18 3H19.5C19.6326 3 19.7598 3.05268 19.8536 3.14645C19.9473 3.24021 20 3.36739 20 3.5V5C20 6.06087 19.5786 7.07828 18.8284 7.82843C18.0783 8.57857 17.0609 9 16 9C14.9391 9 13.9217 9.42143 13.1716 10.1716C12.4214 10.9217 12 11.9391 12 13M12 13C12 15 13 16 13 18C13 19.0819 12.6491 20.1345 12 21M12 13C12 12.0714 11.7414 11.1612 11.2533 10.3713C10.7651 9.58146 10.0666 8.94313 9.23607 8.52786C8.40554 8.1126 7.47578 7.93681 6.55097 8.0202C5.62616 8.10359 4.74285 8.44286 4 9C4 9.92856 4.25857 10.8388 4.74675 11.6287C5.23492 12.4185 5.9334 13.0569 6.76393 13.4721C7.59446 13.8874 8.52422 14.0632 9.44903 13.9798C10.3738 13.8964 11.2572 13.5571 12 13ZM5 21H19"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </article>
+        <article style="--theme: night">
+          <div class="card">
+            <h3>Serenity Oasis Retreat</h3>
+            <p>
+              Gaze at the brilliant stars from this peaceful, moonlit sanctuary.
+            </p>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.58699 8.23594L11.185 3.00394C11.2606 2.85253 11.3769 2.72517 11.5209 2.63616C11.6648 2.54715 11.8307 2.5 12 2.5C12.1692 2.5 12.3351 2.54715 12.4791 2.63616C12.6231 2.72517 12.7394 2.85253 12.815 3.00394L15.413 8.23594L21.221 9.07994C21.3885 9.10317 21.5461 9.17303 21.6759 9.28155C21.8056 9.39007 21.9022 9.53288 21.9546 9.69367C22.0071 9.85446 22.0133 10.0268 21.9725 10.1909C21.9317 10.355 21.8456 10.5044 21.724 10.6219L17.522 14.6919L18.514 20.4419C18.641 21.1799 17.861 21.7419 17.194 21.3939L12 18.6779L6.80499 21.3939C6.13899 21.7429 5.35899 21.1799 5.48599 20.4409L6.47799 14.6909L2.27599 10.6209C2.15498 10.5033 2.06939 10.3541 2.02896 10.1903C1.98852 10.0264 1.99487 9.85451 2.04726 9.69409C2.09966 9.53367 2.19601 9.39116 2.32536 9.28277C2.45471 9.17439 2.61188 9.10446 2.77899 9.08094L8.58699 8.23594Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </article>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/102-container queries/style.css b/102-container queries/style.css
index bf3267e..23f70d9 100644
--- a/102-container queries/style.css	
+++ b/102-container queries/style.css	
@@ -5,13 +5,13 @@
 }
 
 :root {
-  --bg-color: rebeccapurple;
+  --bg-color: #663399;
 }
 
 /* https://caniuse.com/css-media-range-syntax */
 @media screen and (width >= 600px) {
   :root {
-    --bg-color: orangered;
+    --bg-color: #ff4500;
   }
 }
 
@@ -41,8 +41,25 @@ body {
   }
 }
 
+/* Combine Size and Style Queries */
+@container (min-width: 700px) and style(--theme: dark) {
+  .card {
+    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Combine Container and Media Queries */
+@media (min-width: 700px) {
+  @container card-grid (min-width: 25ch) {
+    .card {
+      border: 3px solid black;
+    }
+  }
+}
+
 .primary-content,
 .cards {
+  /* Identify the CSS Containers (1) */
   container-type: inline-size;
 }
 
@@ -51,6 +68,13 @@ main {
   gap: 1rem;
 }
 
+footer {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  margin-top: 2rem;
+}
+
 @media (min-width: 760px) {
   main {
     grid-template-columns: 1fr 300px;
@@ -58,6 +82,7 @@ main {
 }
 
 .cards {
+  /* Identify the CSS Containers (2) */
   /* container-type: inline-size;
   container-name: card-grid; */
   container: card-grid / inline-size;
@@ -66,6 +91,8 @@ main {
 .card {
   display: grid;
   gap: 1rem;
+  /* Refactor with Container Query Units (1) */
+  padding: 5cqmin; /* 5% of the smaller of width or height */
 }
 
 .card h2 {
@@ -112,9 +139,12 @@ main {
 
   .card {
     background-color: #fff;
-    border-radius: 4px;
-    box-shadow: 0 15px 15px rgb(0 0 0 / 0.25);
-    padding: 0.75rem;
+    /* Refactor with Container Query Units (2) */
+    /* border-radius: 4px;
+    box-shadow: 0 15px 15px rgb(0 0 0 / 0.25); 
+    padding: 0.75rem; */
+    border-radius: 2cqw; /* 2% of container's width */
+    box-shadow: 0 2cqh 4cqb rgb(0 0 0 / 0.25); /* y-offset: 2% of height, blur: 4% of block size */
   }
 
   .card > * {
@@ -122,3 +152,64 @@ main {
     color: #000;
   }
 }
+
+@container style(--theme: dune) {
+  .card {
+    background-color: #ece2d0;
+    border-left: 8px solid #cdb59c;
+    box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
+  }
+  .card h3 {
+    color: #7a5f43;
+  }
+  .card p {
+    color: #4d3c2a;
+  }
+  .card svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+    color: #cdb59c;
+    width: 36px;
+    height: 36px;
+    filter: drop-shadow(0 2px 4px #a0704933);
+  }
+}
+
+/* Implement Thematic Card Styles */
+@container style(--theme: oasis) {
+  .card {
+    background: linear-gradient(135deg, #ebf2fa, #c0d6df);
+    border: 2px solid #605e42;
+  }
+  .card > * {
+    color: #05668d;
+  }
+  .card svg {
+    float: right;
+    margin-top: 0.5rem;
+    color: #05668d;
+    width: 32px;
+    height: 32px;
+    filter: drop-shadow(0 0 6px #605e42aa);
+  }
+}
+
+@container style(--theme: night) {
+  .card {
+    background-color: #2c2b27;
+    box-shadow: 0 0 15px 3px #677db7;
+  }
+  .card > * {
+    color: #eceff1;
+  }
+  .card svg {
+    display: block;
+    margin: 1rem auto 0 auto;
+    color: #677db7;
+    width: 40px;
+    height: 40px;
+    filter: drop-shadow(0 0 8px #677db7cc);
+  }
+}
