diff --git a/app/javascript/controllers/drag_and_drop_controller.js b/app/javascript/controllers/drag_and_drop_controller.js
index 0c7c08e49..8452febc0 100644
--- a/app/javascript/controllers/drag_and_drop_controller.js
+++ b/app/javascript/controllers/drag_and_drop_controller.js
@@ -7,6 +7,23 @@ export default class extends Controller {
   static values = { url: String }
   static classes = [ "draggedItem", "hoverContainer" ]
 
+  connect() {
+    this.audioFiles = [
+      "/audio/B3.mp3",
+      "/audio/C3.mp3",
+      "/audio/D4.mp3",
+      "/audio/E3.mp3",
+      "/audio/Fsharp4.mp3",
+      "/audio/G3.mp3"
+    ]
+
+    this.preloadedAudioFiles = this.audioFiles.map(file => {
+      const audio = new Audio(file)
+      audio.load()
+      return audio
+    });
+  }
+
   // Actions
 
   async dragStart(event) {
@@ -32,6 +49,18 @@ export default class extends Controller {
     }
   }
 
+  dragEnter(event) {
+    event.preventDefault()
+    const container = this.#containerContaining(event.target)
+    this.#clearContainerHoverClasses()
+
+    if (!container) { return }
+
+    if (container !== this.sourceContainer) {
+      this.#playZither()
+    }
+  }
+
   async drop(event) {
     const container = this.#containerContaining(event.target)
 
@@ -67,6 +96,13 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
+  #playZither() {
+    const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
+    const audio = this.preloadedAudioFiles[randomIndex]
+    const audioInstance = new Audio(audio.src)
+    audioInstance.play()
+  }
+
   // Private
 
   async #submitDropRequest(item, container) {
diff --git a/app/javascript/controllers/guitar_controller.js b/app/javascript/controllers/guitar_controller.js
new file mode 100644
index 000000000..6aa222634
--- /dev/null
+++ b/app/javascript/controllers/guitar_controller.js
@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "item", "container" ]
+  static values = { url: String }
+  static classes = [ "draggedItem", "hoverContainer" ]
+
+  connect() {
+    this.audioFiles = [
+      "/audio/B3.mp3",
+      "/audio/C3.mp3",
+      "/audio/D4.mp3",
+      "/audio/E3.mp3",
+      "/audio/Fsharp4.mp3",
+      "/audio/G3.mp3"
+    ]
+
+    this.preloadedAudioFiles = this.audioFiles.map(file => {
+      const audio = new Audio(file)
+      audio.load()
+      return audio
+    });
+  }
+
+  dragEnter(event) {
+    event.preventDefault()
+    const container = this.#containerContaining(event.target)
+
+    if (!container) { return }
+
+    if (container !== this.sourceContainer) {
+      this.#playZither()
+    }
+  }
+
+  #containerContaining(element) {
+    return this.containerTargets.find(container => container.contains(element) || container === element)
+  }
+
+  #playZither() {
+    const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
+    const audio = this.preloadedAudioFiles[randomIndex]
+    const audioInstance = new Audio(audio.src)
+    audioInstance.play()
+  }
+}
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index c50bcb624..78cc261b7 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -39,6 +39,7 @@
       action: "
         dragstart->drag-and-drop#dragStart
         dragover->drag-and-drop#dragOver
+        dragenter->drag-and-drop#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
 
diff --git a/public/audio/B3.mp3 b/public/audio/B3.mp3
new file mode 100644
index 000000000..e4cd2026a
Binary files /dev/null and b/public/audio/B3.mp3 differ
diff --git a/public/audio/C3.mp3 b/public/audio/C3.mp3
new file mode 100644
index 000000000..e4c061247
Binary files /dev/null and b/public/audio/C3.mp3 differ
diff --git a/public/audio/D4.mp3 b/public/audio/D4.mp3
new file mode 100644
index 000000000..a4a40eaf0
Binary files /dev/null and b/public/audio/D4.mp3 differ
diff --git a/public/audio/E3.mp3 b/public/audio/E3.mp3
new file mode 100644
index 000000000..f24c5f97e
Binary files /dev/null and b/public/audio/E3.mp3 differ
diff --git a/public/audio/Fsharp4.mp3 b/public/audio/Fsharp4.mp3
new file mode 100644
index 000000000..7d2469c21
Binary files /dev/null and b/public/audio/Fsharp4.mp3 differ
diff --git a/public/audio/G3.mp3 b/public/audio/G3.mp3
new file mode 100644
index 000000000..3342880a6
Binary files /dev/null and b/public/audio/G3.mp3 differ