diff --git a/api/chat_user_active_chat_session_sevice.go b/api/chat_user_active_chat_session_sevice.go
index ae3a6f08..f8d55303 100644
--- a/api/chat_user_active_chat_session_sevice.go
+++ b/api/chat_user_active_chat_session_sevice.go
@@ -3,7 +3,6 @@ package main
 import (
 	"context"
 	"errors"
-
 	"github.com/rotisserie/eris"
 	sqlc "github.com/swuecho/chat_backend/sqlc_queries"
 )
diff --git a/e2e/tests/02_simpe_prompt.spec.ts b/e2e/tests/02_simpe_prompt.spec.ts
index 77e602f1..71e1bfe8 100644
--- a/e2e/tests/02_simpe_prompt.spec.ts
+++ b/e2e/tests/02_simpe_prompt.spec.ts
@@ -24,6 +24,7 @@ test('test', async ({ page }) => {
   await page.getByTestId('repwd').locator('input').click();
   await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
+  await page.waitForTimeout(2000);
 
   // locate by id #message_texarea and click
   // Find the element by Id and click on it
@@ -31,6 +32,7 @@ test('test', async ({ page }) => {
   //await messageTextArea?.click();
   //await messageTextArea?.fill('test_demo_bestqa');
   await page.getByTestId("message_textarea").click()
+  await page.waitForTimeout(1000);
   const input_area = await page.$("#message_textarea textarea")
   await input_area?.fill('test_demo_bestqa');
   // await page.fill("#message_textarea", 'test_demo_bestqa');
diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
index f6a1561b..f3ea0304 100644
--- a/web/src/locales/en-US.json
+++ b/web/src/locales/en-US.json
@@ -80,6 +80,7 @@
         "new": "New Chat",
         "placeholder": "What would you like to say... (Shift + Enter = newline, '/' to trigger prompts)",
         "placeholderMobile": "What would you like to say...",
+        "playAudio": "audio",
         "presencePenalty": "Presence Penalty",
         "sessionConfig": "Conversation Settings:",
         "snapshotSuccess": "Snapshot successful, please view in a new tab",
diff --git a/web/src/views/chat/components/Message/index.vue b/web/src/views/chat/components/Message/index.vue
index 7629050e..587ed2a6 100644
--- a/web/src/views/chat/components/Message/index.vue
+++ b/web/src/views/chat/components/Message/index.vue
@@ -92,8 +92,9 @@ function handleRegenerate() {
 </script>
 
 <template>
+  <div class="chat-message">
   <p class="text-xs text-[#b4bbc4] text-center">{{ displayLocaleDate(dateTime) }}</p>
-  <div class="flex w-full mb-6 overflow-hidden chat-message" :class="[{ 'flex-row-reverse': inversion }]">
+  <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
     <div class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
       :class="[inversion ? 'ml-2' : 'mr-2']">
       <AvatarComponent :inversion="inversion" :model="model" />
@@ -128,4 +129,5 @@ function handleRegenerate() {
       <AudioPlayer :text="text || ''" :right="inversion"></AudioPlayer>
     </div>
   </div>
+  </div>
 </template>
diff --git a/web/src/views/chat/index.vue b/web/src/views/chat/index.vue
index 5bd34958..2cf3eab3 100644
--- a/web/src/views/chat/index.vue
+++ b/web/src/views/chat/index.vue
@@ -537,7 +537,7 @@ function getDataFromResponseText(responseText: string): string {
           </template>
           <template v-else>
             <div>
-              <Message v-for="(item, index) of dataSources" :key="index" :date-time="item.dateTime"
+              <Message v-for="(item, index) of dataSources" :key="index"  :date-time="item.dateTime"
                 :model="chatSession?.model" :text="item.text" :inversion="item.inversion" :error="item.error"
                 :is-prompt="item.isPrompt" :is-pin="item.isPin" :loading="item.loading" :pining="pining" :index="index"
                 @regenerate="onRegenerate(index)" @delete="handleDelete(index)" @toggle-pin="handleTogglePin(index)"