diff --git a/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx b/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
new file mode 100644
index 00000000..07d0ec5d
--- /dev/null
+++ b/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+
+export default function AudioDing() {
+
+  return (
+      <audio controls>
+        <source src="/ding.mp3" type="audio/mp3"/>
+      </audio>
+  );
+}
diff --git a/ui/frontend/build_src/src/components/displayPanel/index.tsx b/ui/frontend/build_src/src/components/displayPanel/index.tsx
index df7f3291..4481c13f 100644
--- a/ui/frontend/build_src/src/components/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/displayPanel/index.tsx
@@ -8,6 +8,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { MakeImageKey } from "../../api";
 
 import CurrentImage from "./currentImage";
+import AudioDing from "./audioDing";
 
 import GeneratedImage from "./generatedImage";
 
@@ -61,6 +62,7 @@ export default function DisplayPanel() {
     <div className="display-panel">
       <h1>Display Panel</h1>
       <div>
+        <AudioDing></AudioDing>
         <CurrentImage />
         {completedImages.map((image, index) => {
           // if(index == 0){