diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 693bec3..a530b9b 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -37,6 +37,7 @@ export async function POST(req: Request) {
   }
 
   const handleError = (message: string) => {
+    console.error(message)
     const messageParts = message.split('[400 Bad Request]')
     const errorMessage = messageParts.length > 1 ? messageParts[1].trim() : 'Server error'
     return NextResponse.json({ code: 50001, message: errorMessage }, { status: 500 })
diff --git a/app/page.tsx b/app/page.tsx
index 3a4085d..fa4e14a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,7 +32,7 @@ import PromiseQueue from '@/utils/PromiseQueue'
 import filterMarkdown from '@/utils/filterMarkdown'
 import textStream from '@/utils/textStream'
 import { generateSignature, generateUTCTimestamp } from '@/utils/signature'
-import { shuffleArray } from '@/utils/common'
+import { shuffleArray, formatTime } from '@/utils/common'
 import topics from '@/constant/topics'
 import { customAlphabet } from 'nanoid'
 import { findLast, findIndex } from 'lodash-es'
@@ -56,8 +56,9 @@ export default function Home() {
   const [randomTopic, setRandomTopic] = useState<Topic[]>([])
   const [siriWave, setSiriWave] = useState<SiriWave>()
   const [content, setContent] = useState<string>('')
-  const [speechText, setSpeechText] = useState<string>('')
   const [subtitle, setSubtitle] = useState<string>('')
+  const [isRecording, setIsRecording] = useState<boolean>(false)
+  const [recordTime, setRecordTime] = useState<number>(0)
   const [settingOpen, setSetingOpen] = useState<boolean>(false)
   const [topicOpen, setTopicOpen] = useState<boolean>(false)
   const [speechSilence, setSpeechSilence] = useState<boolean>(false)
@@ -122,6 +123,7 @@ export default function Home() {
   }
 
   const handleSubmit = async (text: string) => {
+    if (content === '') return false
     setContent('')
     setTextareaHeight(40)
     const newUserMessage: Message = { id: nanoid(), role: 'user', content: text }
@@ -149,7 +151,6 @@ export default function Home() {
         },
         onFinish: () => {
           scrollToBottom()
-          setStatus('silence')
           messageStore.save()
         },
       })
@@ -228,11 +229,21 @@ export default function Home() {
     if (!audioStreamRef.current) {
       audioStreamRef.current = new AudioStream()
     }
-    if (speechRecognitionRef.current?.isRecording) {
-      speechRecognitionRef.current.stop()
-      handleSubmit(speechRecognitionRef.current.text)
-    } else {
-      speechRecognitionRef.current?.start()
+    if (speechRecognitionRef.current) {
+      if (isRecording) {
+        speechRecognitionRef.current.stop()
+        if (settingStore.talkMode === 'voice') {
+          handleSubmit(speechRecognitionRef.current.text)
+          setRecordTime(0)
+        }
+        setIsRecording(false)
+      } else {
+        speechRecognitionRef.current.start()
+        setIsRecording(true)
+        if (settingStore.talkMode === 'voice') {
+          updateRecordTime()
+        }
+      }
     }
   }
 
@@ -244,7 +255,7 @@ export default function Home() {
   }
 
   const handleKeyDown = (ev: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (ev.key === 'Enter' && !ev.shiftKey) {
+    if (ev.key === 'Enter' && !ev.shiftKey && !isRecording) {
       if (!checkAccessStatus()) return false
       // Prevent the default carriage return and line feed behavior
       ev.preventDefault()
@@ -278,6 +289,15 @@ export default function Home() {
     scrollAreaBottomRef.current?.scrollIntoView({ behavior: 'smooth' })
   }, [])
 
+  const updateRecordTime = useCallback(() => {
+    setTimeout(() => {
+      setRecordTime((time) => time + 1)
+      if (speechRecognitionRef.current?.isRecording) {
+        updateRecordTime()
+      }
+    }, 1000)
+  }, [])
+
   useEffect(() => {
     if (messageStore.messages.length === 0) {
       const langType = settingStore.lang.split('-')[0] === 'zh' ? 'zh' : 'en'
@@ -291,17 +311,23 @@ export default function Home() {
 
   useEffect(() => {
     const setting = useSettingStore.getState()
-    const edgeSpeech = new EdgeSpeech({ locale: setting.ttsLang })
-    edgeSpeechRef.current = edgeSpeech
-    const voiceOptions = edgeSpeech.voiceOptions
-    setting.setTTSVoice(voiceOptions ? (voiceOptions[0].value as string) : 'en-US-JennyNeural')
     speechRecognitionRef.current = new SpeechRecognition({
       locale: setting.sttLang,
       onUpdate: (text) => {
-        setSpeechText(text)
+        setContent(text)
       },
     })
-  }, [])
+  }, [settingStore.sttLang])
+
+  useEffect(() => {
+    const setting = useSettingStore.getState()
+    const edgeSpeech = new EdgeSpeech({ locale: setting.ttsLang })
+    edgeSpeechRef.current = edgeSpeech
+    const voiceOptions = edgeSpeech.voiceOptions
+    if (setting.ttsVoice === '') {
+      setting.setTTSVoice(voiceOptions ? (voiceOptions[0].value as string) : 'en-US-JennyNeural')
+    }
+  }, [settingStore.ttsLang])
 
   useLayoutEffect(() => {
     const instance = new SiriWave({
@@ -320,10 +346,10 @@ export default function Home() {
 
   return (
     <main className="mx-auto flex min-h-full max-w-screen-md flex-col justify-between pb-20 pt-6 max-sm:pb-16 max-sm:pt-0 landscape:max-md:pt-0">
-      <div className="mb-2 mt-6 flex justify-between p-4 max-sm:mt-2 landscape:max-md:mt-0">
-        <div className="flex flex-row text-xl leading-8 text-red-400">
-          <MessageCircleHeart className="h-10 w-10" />
-          <div className="ml-3 font-bold leading-10">{t('title')}</div>
+      <div className="mb-2 mt-6 flex justify-between p-4 pr-2 max-sm:mt-2 max-sm:pr-2 landscape:max-md:mt-0">
+        <div className="flex flex-row text-xl leading-8 text-red-400 max-sm:text-base">
+          <MessageCircleHeart className="h-10 w-10 max-sm:h-8 max-sm:w-8" />
+          <div className="ml-3 font-bold leading-10 max-sm:leading-8">{t('title')}</div>
         </div>
         <div className="flex items-center gap-1">
           {GITHUB_URL ? (
@@ -332,6 +358,15 @@ export default function Home() {
             </Button>
           ) : null}
           <ThemeToggle />
+          <Button
+            className="h-8 w-8"
+            title={t('setting')}
+            variant="ghost"
+            size="icon"
+            onClick={() => setSetingOpen(true)}
+          >
+            <Settings className="h-5 w-5" />
+          </Button>
         </div>
       </div>
       {messageStore.messages.length === 0 && content === '' ? (
@@ -401,13 +436,13 @@ export default function Home() {
         </div>
       )}
       <div ref={scrollAreaBottomRef}></div>
-      <div className="fixed bottom-0 flex w-full max-w-screen-md items-end gap-2 bg-[hsl(var(--background))] p-4 pb-8 max-sm:pb-4 landscape:max-md:pb-4">
+      <div className="fixed bottom-0 flex w-full max-w-screen-md items-end gap-2 bg-[hsl(var(--background))] p-4 pb-8 max-sm:p-2 max-sm:pb-3 landscape:max-md:pb-4">
         <Button title={t('voiceMode')} variant="secondary" size="icon" onClick={() => updateTalkMode('voice')}>
           <AudioLines />
         </Button>
         <div className="relative w-full">
           <Textarea
-            className="max-h-[120px] min-h-10 px-2 pr-16"
+            className="max-h-[120px] min-h-10 px-2 pr-16 transition-[height]"
             style={{ height: `${textareaHeight}px` }}
             value={content}
             placeholder={t('askAQuestion')}
@@ -423,14 +458,20 @@ export default function Home() {
             </div>
             <div
               className="box-border flex h-8 w-8 cursor-pointer items-center justify-center text-slate-800"
-              onClick={() => handleSubmit(content)}
+              onClick={() => handleRecorder()}
             >
-              <SendHorizontal />
+              <Mic className={isRecording ? `animate-pulse` : ''} />
             </div>
           </div>
         </div>
-        <Button title={t('setting')} variant="secondary" size="icon" onClick={() => setSetingOpen(true)}>
-          <Settings />
+        <Button
+          title={t('send')}
+          variant="secondary"
+          size="icon"
+          disabled={isRecording}
+          onClick={() => handleSubmit(content)}
+        >
+          <SendHorizontal />
         </Button>
       </div>
       <div style={{ display: settingStore.talkMode === 'voice' ? 'block' : 'none' }}>
@@ -439,10 +480,10 @@ export default function Home() {
           <div className="absolute bottom-0 flex h-2/5 w-2/3 flex-col justify-between pb-12 text-center">
             <div className="text-sm leading-6">
               <div className="animate-pulse text-lg text-white">{statusText}</div>
-              {speechRecognitionRef.current?.isRecording ? (
-                <div className="text-center text-green-300">{speechText}</div>
-              ) : (
+              {status === 'talking' ? (
                 <div className="text-center text-red-300">{subtitle}</div>
+              ) : (
+                <div className="text-center text-green-300">{content}</div>
               )}
             </div>
             <div className="flex items-center justify-center pt-2">
@@ -471,9 +512,10 @@ export default function Home() {
                   title={t('startRecording')}
                   variant="destructive"
                   size="icon"
+                  disabled={status === 'thinkng'}
                   onClick={() => handleRecorder()}
                 >
-                  <Mic className="h-8 w-8" />
+                  {isRecording ? formatTime(recordTime) : <Mic className="h-8 w-8" />}
                 </Button>
               )}
               <Button
diff --git a/components/Setting.tsx b/components/Setting.tsx
index b63d29e..953dc3a 100644
--- a/components/Setting.tsx
+++ b/components/Setting.tsx
@@ -171,11 +171,11 @@ function Setting({ open, onClose }: SettingProps) {
             </Select>
           </div>
           <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="tts" className="text-right">
+            <Label htmlFor="ttsVoice" className="text-right">
               {t('soundSource')}
             </Label>
             <Select value={ttsVoice} onValueChange={setTtsVoice}>
-              <SelectTrigger id="tts" className="col-span-3">
+              <SelectTrigger id="ttsVoice" className="col-span-3">
                 <SelectValue placeholder={t('followTheSystem')} />
               </SelectTrigger>
               <SelectContent>
diff --git a/locales/ar-SA.json b/locales/ar-SA.json
index 2936735..31980a2 100644
--- a/locales/ar-SA.json
+++ b/locales/ar-SA.json
@@ -32,5 +32,6 @@
   "topicSquare": "ساحة الموضوعات",
   "selectTopic": "يرجى اختيار موضوع يثير اهتمامك",
   "copy": "نسخ",
-  "github": "Github"
+  "github": "Github",
+  "send": "إرسال"
 }
diff --git a/locales/de-DE.json b/locales/de-DE.json
index dd1a162..7f07432 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -32,5 +32,6 @@
   "topicSquare": "Themenplatz",
   "selectTopic": "Bitte wählen Sie ein Thema, das Sie interessiert.",
   "copy": "Kopieren",
-  "github": "Github"
+  "github": "Github",
+  "send": "Senden"
 }
diff --git a/locales/en.json b/locales/en.json
index 03af76e..830ab32 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -32,5 +32,6 @@
   "topicSquare": "Topic Square",
   "selectTopic": "Please choose a topic that interests you.",
   "copy": "Copy",
-  "github": "Github"
+  "github": "Github",
+  "send": "Send"
 }
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 20eeba1..6b55dae 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -32,5 +32,6 @@
   "topicSquare": "Plaza de temas",
   "selectTopic": "Por favor, elija un tema que le interese.",
   "copy": "Copiar",
-  "github": "Github"
+  "github": "Github",
+  "send": "Enviar"
 }
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index dc53001..2e36847 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -32,5 +32,6 @@
   "topicSquare": "Place du sujet",
   "selectTopic": "Veuillez sélectionner un sujet qui vous intéresse.",
   "copy": "Copier",
-  "github": "Github"
+  "github": "Github",
+  "send": "Envoyer"
 }
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 6755c06..f580f6a 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -32,5 +32,6 @@
   "topicSquare": "トピックスクエア",
   "selectTopic": "興味のあるトピックを選択してください。",
   "copy": "コピー",
-  "github": "Github"
+  "github": "Github",
+  "send": "送信"
 }
diff --git a/locales/ko-KR.json b/locales/ko-KR.json
index ec02384..5cc899e 100644
--- a/locales/ko-KR.json
+++ b/locales/ko-KR.json
@@ -32,5 +32,6 @@
   "topicSquare": "주제 광장",
   "selectTopic": "관심 있는 주제를 선택하세요.",
   "copy": "복사",
-  "github": "Github"
+  "github": "Github",
+  "send": "보내기"
 }
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index 2e0f320..bc569fd 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -32,5 +32,6 @@
   "topicSquare": "Praça de tópicos",
   "selectTopic": "Por favor, escolha um tópico que lhe interesse.",
   "copy": "Copiar",
-  "github": "Github"
+  "github": "Github",
+  "send": "Enviar"
 }
diff --git a/locales/ru-RU.json b/locales/ru-RU.json
index 2498189..bbe6800 100644
--- a/locales/ru-RU.json
+++ b/locales/ru-RU.json
@@ -32,5 +32,6 @@
   "topicSquare": "Площадь тем",
   "selectTopic": "Пожалуйста, выберите тему, которая вас интересует.",
   "copy": "Копировать",
-  "github": "Github"
+  "github": "Github",
+  "send": "Отправить"
 }
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 25aa42d..8173749 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -32,5 +32,6 @@
   "topicSquare": "話題廣場",
   "selectTopic": "請選擇您感興趣的話題。",
   "copy": "複製",
-  "github": "Github"
+  "github": "Github",
+  "send": "發送"
 }
diff --git a/locales/zh.json b/locales/zh.json
index f627be8..fb36af7 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -32,5 +32,6 @@
   "topicSquare": "话题广场",
   "selectTopic": "请选择一个你感兴趣的话题。",
   "copy": "复制",
-  "github": "Github"
+  "github": "Github",
+  "send": "发送"
 }
diff --git a/package.json b/package.json
index df3193e..8c4efcd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "talk-with-gemini",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..7097bb2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,80 +1,78 @@
-import type { Config } from "tailwindcss"
+import type { Config } from 'tailwindcss'
 
 const config = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
-  prefix: "",
+  darkMode: ['class'],
+  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+      transitionProperty: {
+        height: 'height',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require('tailwindcss-animate')],
 } satisfies Config
 
-export default config
\ No newline at end of file
+export default config
diff --git a/utils/common.ts b/utils/common.ts
index d5d4763..ee2d125 100644
--- a/utils/common.ts
+++ b/utils/common.ts
@@ -32,3 +32,14 @@ export function shuffleArray<T>(array: T[]): T[] {
 
   return newArray
 }
+
+export function formatTime(seconds: number): string {
+  if (seconds < 0) return `--:--`
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+
+  const minutesStr = minutes.toString().padStart(2, '0')
+  const secondsStr = remainingSeconds.toString().padStart(2, '0')
+
+  return `${minutesStr}:${secondsStr}`
+}