diff --git a/client/src/components/Input/SubmitButton.jsx b/client/src/components/Input/SubmitButton.jsx
index b3309027f3..de31c47809 100644
--- a/client/src/components/Input/SubmitButton.jsx
+++ b/client/src/components/Input/SubmitButton.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StopGeneratingIcon } from '~/components';
+import { ListeningIcon, StopGeneratingIcon } from '~/components';
 import { Settings } from 'lucide-react';
 import { SetTokenDialog } from './SetTokenDialog';
 import store from '~/store';
@@ -10,6 +10,7 @@ export default function SubmitButton({
   handleStopGenerating,
   disabled,
   isSubmitting,
+  isListening,
   endpointsConfig,
 }) {
   const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
@@ -61,6 +62,14 @@ export default function SubmitButton({
         />
       </>
     );
+  } else if (isListening) {
+    return (
+      <button className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500">
+        <div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+          <ListeningIcon />
+        </div>
+      </button>
+    );
   } else {
     return (
       <button