diff --git a/frontend/public/beep.wav b/frontend/public/beep.wav
new file mode 100644
index 000000000000..c2364f1145b3
Binary files /dev/null and b/frontend/public/beep.wav differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e35572a4ce7..08491c805e7c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,6 +11,7 @@ import SettingsModal from "#/components/modals/settings/SettingsModal";
 import "./App.css";
 import AgentControlBar from "./components/AgentControlBar";
 import AgentStatusBar from "./components/AgentStatusBar";
+import VolumeIcon from "./components/VolumeIcon";
 import Terminal from "./components/terminal/Terminal";
 import Session from "#/services/session";
 import { getToken } from "#/services/auth";
@@ -27,11 +28,17 @@ function Controls({ setSettingOpen }: Props): JSX.Element {
         <AgentControlBar />
       </div>
       <AgentStatusBar />
-      <div
-        className="cursor-pointer hover:opacity-80 transition-all"
-        onClick={() => setSettingOpen(true)}
-      >
-        <CogTooth />
+
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ marginRight: "8px" }}>
+          <VolumeIcon />
+        </div>
+        <div
+          className="cursor-pointer hover:opacity-80 transition-all"
+          onClick={() => setSettingOpen(true)}
+        >
+          <CogTooth />
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/AgentStatusBar.tsx b/frontend/src/components/AgentStatusBar.tsx
index aa46474bae62..bdcb3e6773d9 100644
--- a/frontend/src/components/AgentStatusBar.tsx
+++ b/frontend/src/components/AgentStatusBar.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
+import beep from "#/utils/beep";
 
 enum IndicatorColor {
   BLUE = "bg-blue-500",
@@ -65,6 +66,16 @@ function AgentStatusBar() {
   // - Agent is thinking
   // - Agent is ready
   // - Agent is not available
+  useEffect(() => {
+    if (
+      curAgentState === AgentState.AWAITING_USER_INPUT ||
+      curAgentState === AgentState.ERROR ||
+      curAgentState === AgentState.INIT
+    ) {
+      if (document.cookie.indexOf("audio") !== -1) beep();
+    }
+  }, [curAgentState]);
+
   return (
     <div className="flex items-center">
       <div
diff --git a/frontend/src/components/VolumeIcon.tsx b/frontend/src/components/VolumeIcon.tsx
new file mode 100644
index 000000000000..ea6ecb773ac5
--- /dev/null
+++ b/frontend/src/components/VolumeIcon.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { IoMdVolumeHigh, IoMdVolumeOff } from "react-icons/io";
+import beep from "#/utils/beep";
+
+function VolumeIcon(): JSX.Element {
+  const [isMuted, setIsMuted] = useState(true);
+
+  const toggleMute = () => {
+    const cookieName = "audio";
+    setIsMuted(!isMuted);
+    if (!isMuted) {
+      document.cookie = `${cookieName}=;`;
+    } else {
+      document.cookie = `${cookieName}=on;`;
+      beep();
+    }
+  };
+
+  return (
+    <div
+      className="cursor-pointer hover:opacity-80 transition-all"
+      onClick={toggleMute}
+    >
+      {isMuted ? <IoMdVolumeOff size={23} /> : <IoMdVolumeHigh size={23} />}
+    </div>
+  );
+}
+
+export default VolumeIcon;
diff --git a/frontend/src/utils/beep.tsx b/frontend/src/utils/beep.tsx
new file mode 100644
index 000000000000..0323db8a6e79
--- /dev/null
+++ b/frontend/src/utils/beep.tsx
@@ -0,0 +1,9 @@
+const beep = () => {
+  const snd = new Audio("/beep.wav");
+  snd.addEventListener("canplaythrough", () => snd.play());
+  snd.addEventListener("error", (e) =>
+    console.error("Audio file could not be loaded", e),
+  );
+};
+
+export default beep;