diff --git a/assets/css/custom.css b/assets/css/custom.css
index bcd3f03..6c1d8cd 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -154,4 +154,9 @@ body {
     40% {
         transform: scale(1.0);
     }
-}
\ No newline at end of file
+}
+
+#speech-to-text-btn.listening {
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index ce711df..ad26635 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -88,4 +88,48 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     }
-});
\ No newline at end of file
+
+    const speechToTextButton = document.getElementById('speech-to-text-btn');
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    if (SpeechRecognition) {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+
+        speechToTextButton.addEventListener('click', () => {
+            recognition.start();
+            speechToTextButton.classList.add('listening');
+            speechToTextButton.disabled = true;
+        });
+
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            messageInput.value = transcript;
+        };
+
+        recognition.onspeechend = () => {
+            recognition.stop();
+        };
+
+        recognition.onend = () => {
+            speechToTextButton.classList.remove('listening');
+            speechToTextButton.disabled = false;
+        };
+
+        recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            alert(`Error occurred in speech recognition: ${event.error}`);
+            speechToTextButton.classList.remove('listening');
+            speechToTextButton.disabled = false;
+        };
+    } else {
+        if (speechToTextButton) {
+            speechToTextButton.style.display = 'none';
+        }
+        console.log('Speech Recognition not supported in this browser.');
+        alert('Speech Recognition not supported in this browser.');
+    }
+});
diff --git a/index.php b/index.php
index 7c241ae..7787781 100644
--- a/index.php
+++ b/index.php
@@ -68,6 +68,9 @@
             </div>
             <div class="chat-footer">
                 <input type="text" class="form-control" placeholder="Type a message...">
+                <button class="btn btn-secondary" id="speech-to-text-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="22"></line></svg>
+                </button>
                 <button class="btn btn-primary">Send</button>
             </div>
         </div>