diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 8a2f8e8417..d3b63646e8 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+window.addEventListener("keydown",(e)=>{
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  if (!audio) return; // stop the audio if no audio found
+  audio.currentTime = 0; // rewind to the start
+  audio.play(); // play the sound
 
+  key.classList.add("playing"); // add playing class to the keyasds
+})
+
+const keys  = document.querySelectorAll(".key");
+keys.forEach(key => {
+  key.addEventListener("transitionend", (e) => {
+    if (e.propertyName !== "transform") return; // skip if not transform
+    key.classList.remove("playing"); // remove playing class
+  });
+});
 </script>
 
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 55ab1a5331..88a9c0f7f7 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -63,6 +63,7 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
     }
 
   </style>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index d5fcc3a2ae..c6d6a5bace 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -19,7 +19,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+  <img src="https://images.pexels.com/photos/32417557/pexels-photo-32417557/free-photo-of-charming-antique-shop-in-paris-display-window.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
 
   <style>
 
@@ -43,9 +43,35 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width: 100px;
     }
+    :root{
+      --base: #c47611;
+      --spacing: 10px;
+      --blur: 10px; 
+    }
+
+    img{
+      width: 100%;
+      max-width: 1000px;
+      margin: 0 auto;
+      display: block;
+      padding: var(--spacing);
+      filter: blur(var(--blur)) brightness(1.2);
+      box-shadow: 0 0 0 10px var(--base);
+    }
   </style>
 
   <script>
+    const inputs  =  document.querySelectorAll('.controls input');
+    function handleUpdate(){
+// console.log(this.value) 
+const suffix  =  this.dataset.sizing || ''; 
+document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+}
+
+    inputs.forEach(input => {
+      input.addEventListener('change', handleUpdate);
+      input.addEventListener('mousemove', handleUpdate);
+    });
   </script>
 
 </body>