diff --git a/apps/web/src/components/VoiceToTextButton.vue b/apps/web/src/components/VoiceToTextButton.vue
index 7cff061..e309b59 100644
--- a/apps/web/src/components/VoiceToTextButton.vue
+++ b/apps/web/src/components/VoiceToTextButton.vue
@@ -21,20 +21,24 @@ const emit = defineEmits<{
   error: [message: string];
 }>();
 
+const BAR_COUNT = 16;
 const recording = ref(false);
 const transcribing = ref(false);
 const error = ref('');
 const seconds = ref(0);
+const bars = ref<number[]>(Array.from({ length: BAR_COUNT }, () => 0.12));
 
 let stream: MediaStream | null = null;
 let ctx: AudioContext | null = null;
 let source: MediaStreamAudioSourceNode | null = null;
 let processor: ScriptProcessorNode | null = null;
+let analyser: AnalyserNode | null = null;
 let mute: GainNode | null = null;
 let chunks: Float32Array[] = [];
 let sampleRate = 16000;
 let timer: number | null = null;
 let limitTimer: number | null = null;
+let raf = 0;
 
 const MAX_SECONDS = 90;
 
@@ -75,18 +79,42 @@ function stopTimer() {
     window.clearTimeout(limitTimer);
     limitTimer = null;
   }
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+    raf = 0;
+  }
+}
+
+function resetBars() {
+  bars.value = Array.from({ length: BAR_COUNT }, () => 0.12);
+}
+
+function paintMeter() {
+  if (!analyser || !recording.value) return;
+  const freq = new Uint8Array(analyser.frequencyBinCount);
+  analyser.getByteFrequencyData(freq);
+  const next = bars.value.slice();
+  for (let i = 0; i < BAR_COUNT; i += 1) {
+    const idx = Math.min(freq.length - 1, Math.floor(2 + i * (freq.length * 0.42) / BAR_COUNT));
+    const raw = (freq[idx] ?? 0) / 255;
+    next[i] = next[i] * 0.45 + Math.max(0.08, raw) * 0.55;
+  }
+  bars.value = next;
+  raf = window.requestAnimationFrame(paintMeter);
 }
 
 function teardownMic() {
   stopTimer();
   try {
     processor?.disconnect();
+    analyser?.disconnect();
     source?.disconnect();
     mute?.disconnect();
   } catch {
     /* ignore */
   }
   processor = null;
+  analyser = null;
   source = null;
   mute = null;
   stream?.getTracks().forEach((track) => track.stop());
@@ -95,6 +123,7 @@ function teardownMic() {
     void ctx.close().catch(() => undefined);
     ctx = null;
   }
+  resetBars();
 }
 
 function mergeChunks(parts: Float32Array[]) {
@@ -199,6 +228,9 @@ async function start() {
     await ctx.resume();
     sampleRate = ctx.sampleRate || 16000;
     source = ctx.createMediaStreamSource(stream);
+    analyser = ctx.createAnalyser();
+    analyser.fftSize = 128;
+    analyser.smoothingTimeConstant = 0.62;
     processor = ctx.createScriptProcessor(4096, 1, 1);
     mute = ctx.createGain();
     mute.gain.value = 0;
@@ -207,10 +239,12 @@ async function start() {
       if (!recording.value) return;
       chunks.push(new Float32Array(event.inputBuffer.getChannelData(0)));
     };
+    source.connect(analyser);
     source.connect(processor);
     processor.connect(mute);
     mute.connect(ctx.destination);
     seconds.value = 0;
+    resetBars();
     timer = window.setInterval(() => {
       seconds.value += 1;
     }, 1000);
@@ -218,6 +252,7 @@ async function start() {
       void finish(true);
     }, MAX_SECONDS * 1000);
     setRecording(true);
+    paintMeter();
   } catch {
     teardownMic();
     setError('دسترسی به میکروفون داده نشد.');
@@ -233,13 +268,17 @@ function toggle() {
   void start();
 }
 
+function barHeight(value: number) {
+  return `${6 + value * 22}px`;
+}
+
 onBeforeUnmount(() => {
   void finish(false);
 });
 </script>
 
 <template>
-  <div class="vtt-wrap" :class="variant">
+  <div class="vtt-wrap" :class="[variant, { live: recording, wait: transcribing }]">
     <button
       class="vtt"
       type="button"
@@ -249,9 +288,17 @@ onBeforeUnmount(() => {
       :title="ariaLabel"
       @click="toggle"
     >
-      <UiIcon :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
-      <span v-if="variant === 'default' && recording" class="timer">{{ timerLabel }}</span>
-      <span v-else-if="variant === 'default' && transcribing" class="timer">تبدیل…</span>
+      <span class="glyph" aria-hidden="true">
+        <span v-if="transcribing" class="spinner" />
+        <UiIcon v-else :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
+      </span>
+
+      <span v-if="recording" class="meter" aria-hidden="true">
+        <i v-for="(level, index) in bars" :key="index" :style="{ height: barHeight(level) }" />
+      </span>
+
+      <span v-if="recording" class="timer">{{ timerLabel }}</span>
+      <span v-else-if="transcribing" class="status">در حال تبدیل صوت به متن</span>
     </button>
     <p v-if="error && !hideError" class="err">{{ error }}</p>
   </div>
@@ -267,7 +314,7 @@ onBeforeUnmount(() => {
 .vtt {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.45rem;
   border: 1px solid #d7e3dc;
   background: #f4faf7;
   color: #0f766e;
@@ -285,22 +332,70 @@ onBeforeUnmount(() => {
 }
 
 .vtt.on {
-  border-color: #f87171;
-  background: #fef2f2;
-  color: #b91c1c;
-  animation: pulse 1.2s ease-in-out infinite;
+  border-color: #5eead4;
+  background: #042f2e;
+  color: #ecfdf5;
+  min-height: 44px;
+  padding-inline: 0.7rem 0.85rem;
+  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22);
 }
 
-.vtt.busy:not(.on) {
-  opacity: 0.72;
+.vtt.busy {
+  min-height: 44px;
+  border-color: #99f6e4;
+  background: #ecfdf5;
+  color: #0f766e;
   cursor: wait;
 }
 
-.vtt:disabled {
+.vtt:disabled:not(.busy) {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
+.glyph {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.meter {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  min-width: 72px;
+}
+
+.meter i {
+  display: block;
+  width: 3px;
+  border-radius: 99px;
+  background: #5eead4;
+  box-shadow: 0 0 8px rgba(94, 234, 212, 0.45);
+  transition: height 70ms linear;
+}
+
+.status {
+  white-space: nowrap;
+}
+
+.timer {
+  font-variant-numeric: tabular-nums;
+  min-width: 2.4rem;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #99f6e4;
+  border-top-color: #0f766e;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
 .toolbar .vtt {
   width: 38px;
   height: 38px;
@@ -312,12 +407,21 @@ onBeforeUnmount(() => {
   justify-content: center;
 }
 
-.toolbar .vtt.on {
-  background: #fef2f2;
+.toolbar.live .vtt,
+.toolbar.wait .vtt {
+  width: auto;
+  height: auto;
+  min-height: 40px;
+  padding: 0 0.7rem;
+  border-radius: 999px;
 }
 
-.timer {
-  font-variant-numeric: tabular-nums;
+.toolbar .vtt.on {
+  background: #042f2e;
+}
+
+.toolbar .vtt.busy {
+  background: #ecfdf5;
 }
 
 .err {
@@ -326,9 +430,18 @@ onBeforeUnmount(() => {
   font-size: 0.78rem;
 }
 
-@keyframes pulse {
-  50% {
-    box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.16);
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 640px) {
+  .status {
+    max-width: 11.5rem;
+    white-space: normal;
+    text-align: start;
+    line-height: 1.4;
   }
 }
 </style>
diff --git a/apps/web/src/components/activities/ActivityCommentSheet.vue b/apps/web/src/components/activities/ActivityCommentSheet.vue
index 60cf9ed..1e0def2 100644
--- a/apps/web/src/components/activities/ActivityCommentSheet.vue
+++ b/apps/web/src/components/activities/ActivityCommentSheet.vue
@@ -458,7 +458,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
-.tool-wrap :deep(.vtt) {
+.tool-wrap :deep(.vtt:not(.on):not(.busy)) {
   color: #0d9488;
 }