diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css
index 5265fc8..24f93dc 100644
--- a/src/overlay/RecordingOverlay.css
+++ b/src/overlay/RecordingOverlay.css
@@ -1,10 +1,11 @@
 .recording-overlay {
     height: 40px;
-    width: min-content;
+    /*width: min-content;*/
+    width: 120px;
     display: flex;
     gap: 12px;
     align-items: center;
-    padding-left: 4px;
+    padding-left: 6px;
     padding-right: 24px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 24px;
@@ -35,7 +36,7 @@
         opacity: 0.6;
     }
     50% {
-        height: 30px;
+        height: 28px;
         opacity: 1;
     }
 }
@@ -46,7 +47,7 @@
 
 .transcribing-text {
     color: #faa2ca;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
     font-family:
         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx
index 479977a..2b6fa02 100644
--- a/src/overlay/RecordingOverlay.tsx
+++ b/src/overlay/RecordingOverlay.tsx
@@ -44,10 +44,16 @@ const RecordingOverlay: React.FC = () => {
 
   return (
     <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
-      <img width="32" height="32" src={getIconPath()} alt={getIconAlt()} />
+      <img
+        width="28"
+        height="28"
+        src={getIconPath()}
+        alt={getIconAlt()}
+        style={{}}
+      />
       {state === "recording" && (
         <div className="bars-container">
-          {Array.from({ length: 8 }, (_, i) => (
+          {Array.from({ length: 12 }, (_, i) => (
             <div
               key={i}
               className="bar"