diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index 80b9b66..64e01fe 100644
--- a/src/components/Recorder.tsx
+++ b/src/components/Recorder.tsx
@@ -62,12 +62,22 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
       },
     });
 
-    const micStream = await navigator.mediaDevices.getUserMedia({
-      audio: { deviceId: selectedDevice?.deviceId },
-    });
+    let micStream;
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: selectedDevice?.deviceId },
+      });
+    } catch (error) {
+      // Handle the case where microphone permissions are not granted
+      console.error("Failed to access microphone:", error);
+    }
 
     const mediaStream = new MediaStream();
-    micStream.getAudioTracks().forEach((track) => mediaStream.addTrack(track));
+    if (micStream) {
+      micStream
+        .getAudioTracks()
+        .forEach((track) => mediaStream.addTrack(track));
+    }
     screenStream
       .getVideoTracks()
       .forEach((track) => mediaStream.addTrack(track));
@@ -373,7 +383,7 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
               {submitting ? (
                 <>
                   <svg
-                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                    className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"