diff --git a/app/apps/users/forms.py b/app/apps/users/forms.py
index 8c14847..84e4b12 100644
--- a/app/apps/users/forms.py
+++ b/app/apps/users/forms.py
@@ -140,7 +140,6 @@ class UserSettingsForm(forms.ModelForm):
             "date_format",
             "datetime_format",
             "number_format",
-            "volume",
             "default_account",
         ]
         widgets = {
diff --git a/app/static/sounds/pop.mp3 b/app/static/sounds/pop.mp3
deleted file mode 100644
index bc15afa..0000000
Binary files a/app/static/sounds/pop.mp3 and /dev/null differ
diff --git a/app/static/sounds/success.mp3 b/app/static/sounds/success.mp3
deleted file mode 100644
index ff10122..0000000
Binary files a/app/static/sounds/success.mp3 and /dev/null differ
diff --git a/app/templates/includes/scripts/hyperscript/sounds.html b/app/templates/includes/scripts/hyperscript/sounds.html
index 156f2f1..9576314 100644
--- a/app/templates/includes/scripts/hyperscript/sounds.html
+++ b/app/templates/includes/scripts/hyperscript/sounds.html
@@ -1,20 +1,12 @@
 <script type="text/hyperscript">
 on paid if body do not include #settings-mute-sound
   js
-    volume = JSON.parse(document.getElementById('volume').textContent) / 10
-    paidSound.pause()
-    paidSound.currentTime = 0
-    paidSound.volume = volume
-    paidSound.play()
+    playSound("sparkle")
   end
 end
 on unpaid if body do not include #settings-mute-sound
   js
-    volume = JSON.parse(document.getElementById('volume').textContent) / 10
-    unpaidSound.pause()
-    unpaidSound.currentTime = 0
-    unpaidSound.volume = volume
-    unpaidSound.play()
+    playSound("bloom")
   end
 end
 </script>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ae3e0c1..926008a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "chartjs-chart-sankey": "^0.14.3",
+        "cuelume": "^0.1.2",
         "daisyui": "5.5.20",
         "htmx.org": "^2.0.10",
         "hyperscript.org": "^0.9.91",
@@ -1287,6 +1288,12 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/cuelume": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/cuelume/-/cuelume-0.1.2.tgz",
+      "integrity": "sha512-VxL0k9l1fyKGot3VKM+wm5Xd2K75fVeBHdNTrR1EHiqKRtD6S5Dxy/vY7hwl9gXp3QT/TIywFXUos77n39YZVQ==",
+      "license": "MIT"
+    },
     "node_modules/daisyui": {
       "version": "5.5.20",
       "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.20.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 360a314..46dc0f3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.3",
+    "cuelume": "^0.1.2",
     "daisyui": "5.5.20",
     "htmx.org": "^2.0.10",
     "hyperscript.org": "^0.9.91",
@@ -47,4 +48,4 @@
   "resolutions": {
     "rollup": "npm:@rollup/wasm-node"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/js/htmx.js b/frontend/src/js/htmx.js
index 446048a..db81826 100644
--- a/frontend/src/js/htmx.js
+++ b/frontend/src/js/htmx.js
@@ -14,11 +14,6 @@ Alpine.plugin(mask);
 Alpine.plugin(collapse);
 Alpine.start();
 
-const successAudio = new Audio("/static/sounds/success.mp3");
-const popAudio = new Audio("/static/sounds/pop.mp3");
-window.paidSound = successAudio;
-window.unpaidSound = popAudio;
-
 /**
  * Parse a localized number to a float.
  * @param {string} stringNumber - the localized number
diff --git a/frontend/src/js/sounds.js b/frontend/src/js/sounds.js
new file mode 100644
index 0000000..df88444
--- /dev/null
+++ b/frontend/src/js/sounds.js
@@ -0,0 +1,4 @@
+import { play } from "cuelume";
+
+
+window.playSound = play;
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 609dc2e..25b6a83 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import 'vite/modulepreload-polyfill';
 import './js/bootstrap.js';
 import './js/datepicker.js';
 import './js/htmx.js';
+import './js/sounds.js';
 import './js/select.js';
 import './js/charts.js';
 import './js/autosize.js';