diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..770f84c322 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,31 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  const keys = document.querySelectorAll(`.key`)
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 
+   window.addEventListener('keydown', (event) => {
+    playSound(event.keyCode)
+   })
+
+  function playSound(keyCode) {
+    const selectedDiv = document.querySelector(`div[data-key="${keyCode}"]`);
+    const selectedAudio = document.querySelector(`audio[data-key="${keyCode}"]`);
+    debugger
+    if (!selectedAudio) {
+      return;
+    }
+    selectedDiv.classList.add('playing');
+    selectedAudio.currentTime = 0;
+    selectedAudio.play();
+  }
+
+  function removeTransition(event) {
+    if (event.propertyName !== 'transform') {
+      return;
+    }
+    event.target.classList.remove('playing');
+  }
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..fa48534e39 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,14 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.5s
+      transition-timing-function: cubic-bezier(1, 2.99, 0.58, 1);
     }
 
   </style>
-
   <script>
-
-
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..1fe80dd743 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -27,7 +27,9 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     */
 
     body {
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
     }
 
     body {
@@ -45,9 +47,35 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    :root {
+        --base: #ffc600;
+        --blur: 10px;
+        --padding: 10px;
+    }
+
+    img {
+      background: var(--base);
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+    }
+
+    .hl {
+      color: var(--base);
+    }
   </style>
 
   <script>
+    var inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+    debugger
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..3819fd4112 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -17,16 +17,22 @@
     body {
       margin: 0;
     }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
     .panels {
+      display: flex;
+      flex-direction: row;
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -54,8 +60,17 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: center;
+      align-items: center;
     }
 
+    .panel > *:first-child { transform: translateY(-100%) }
+    .panel.open-active > *:first-child { transform: translateY(0%) }
+    .panel > *:last-child { transform: translateY(100%) }
+    .panel.open-active > *:last-child { transform: translateY(0%) }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +82,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,6 +123,20 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
+
+    function toggleOpen() {
+      this.classList.toggle('open')
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active')
+      }
+    }
 
   </script>