diff --git a/package.json b/package.json
index f074f3d64..635dd4300 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "markdown-it-kbd": "^2.2.2",
     "solid-js": "^1.7.6",
     "solid-start": "^0.2.26",
+    "solid-transition-group": "^0.2.2",
     "undici": "^5.22.1"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd0d47dc4..9a80913cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ dependencies:
   solid-start:
     specifier: ^0.2.26
     version: registry.npmmirror.com/solid-start@0.2.26(@solidjs/meta@0.28.5)(@solidjs/router@0.8.2)(solid-js@1.7.6)(solid-start-cloudflare-workers@0.2.26)(solid-start-netlify@0.2.26)(solid-start-node@0.2.26)(solid-start-vercel@0.2.26)(vite@4.3.9)(vue@3.2.47)
+  solid-transition-group:
+    specifier: ^0.2.2
+    version: registry.npmmirror.com/solid-transition-group@0.2.2(solid-js@1.7.6)
   undici:
     specifier: ^5.22.1
     version: registry.npmmirror.com/undici@5.22.1
@@ -2781,6 +2784,18 @@ packages:
       solid-js: registry.npmmirror.com/solid-js@1.7.6
     dev: false
 
+  registry.npmmirror.com/@solid-primitives/refs@1.0.4(solid-js@1.7.6):
+    resolution: {integrity: sha512-BxZKkct0OIyADWIoA9UITm+3G5Xb3IkOa0nZd40SgOK5DtMqpXFIEPUkJ/woPB90WqlM9UvvuiJHUyAjMeAmCw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@solid-primitives/refs/-/refs-1.0.4.tgz}
+    id: registry.npmmirror.com/@solid-primitives/refs/1.0.4
+    name: '@solid-primitives/refs'
+    version: 1.0.4
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      '@solid-primitives/utils': registry.npmmirror.com/@solid-primitives/utils@6.2.0(solid-js@1.7.6)
+      solid-js: registry.npmmirror.com/solid-js@1.7.6
+    dev: false
+
   registry.npmmirror.com/@solid-primitives/resize-observer@2.0.18(solid-js@1.7.6):
     resolution: {integrity: sha512-k4jTqa2hQc1HBLGUUSy69ziVJF2xlBzglUp2Saeor7RrZiWudODGyoUMdNAY+PN3iH4zyH4eEa/Fs+9kIrREig==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@solid-primitives/resize-observer/-/resize-observer-2.0.18.tgz}
     id: registry.npmmirror.com/@solid-primitives/resize-observer/2.0.18
@@ -2831,6 +2846,17 @@ packages:
       solid-js: registry.npmmirror.com/solid-js@1.7.6
     dev: false
 
+  registry.npmmirror.com/@solid-primitives/transition-group@1.0.2(solid-js@1.7.6):
+    resolution: {integrity: sha512-+o3J7TnU0/Sok+LKA0z0wvhim88dpd2eFBk8/05adE6wVypVlME8sKqTMO+xRv8HoT4Kq3sczmvwV07FKg2n+g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@solid-primitives/transition-group/-/transition-group-1.0.2.tgz}
+    id: registry.npmmirror.com/@solid-primitives/transition-group/1.0.2
+    name: '@solid-primitives/transition-group'
+    version: 1.0.2
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      solid-js: registry.npmmirror.com/solid-js@1.7.6
+    dev: false
+
   registry.npmmirror.com/@solid-primitives/utils@6.2.0(solid-js@1.7.6):
     resolution: {integrity: sha512-T62WlLwKkbmicsw/xpwMQyv9MmZRSaVyutXfS5icc9v0cb8qGMUxRxr5LVvZHYQCZ9DEFboZB0r711xsbVBbeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@solid-primitives/utils/-/utils-6.2.0.tgz}
     id: registry.npmmirror.com/@solid-primitives/utils/6.2.0
@@ -7702,6 +7728,19 @@ packages:
       - supports-color
       - vue
 
+  registry.npmmirror.com/solid-transition-group@0.2.2(solid-js@1.7.6):
+    resolution: {integrity: sha512-6nB90UM2PB6VsIo/UCkmZmlIJb9mnmP7QPGrePqQJWtpUiRs5PbhkB8fvdyv9g/RPHWYpdJhQgxL6n++WmTt5A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/solid-transition-group/-/solid-transition-group-0.2.2.tgz}
+    id: registry.npmmirror.com/solid-transition-group/0.2.2
+    name: solid-transition-group
+    version: 0.2.2
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      '@solid-primitives/refs': registry.npmmirror.com/@solid-primitives/refs@1.0.4(solid-js@1.7.6)
+      '@solid-primitives/transition-group': registry.npmmirror.com/@solid-primitives/transition-group@1.0.2(solid-js@1.7.6)
+      solid-js: registry.npmmirror.com/solid-js@1.7.6
+    dev: false
+
   registry.npmmirror.com/source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz}
     name: source-map-js
diff --git a/src/components/Chat/MessageContainer.tsx b/src/components/Chat/MessageContainer.tsx
index 62a2a3cd1..633f09fd7 100644
--- a/src/components/Chat/MessageContainer.tsx
+++ b/src/components/Chat/MessageContainer.tsx
@@ -3,6 +3,8 @@ import { RootStore, defaultMessage } from "~/store"
 import { scrollToBottom } from "~/utils"
 import MessageItem from "./MessageItem"
 import { defaultInputBoxHeight } from "./InputBox"
+import { TransitionGroup } from "solid-transition-group"
+import "~/styles/transition.css"
 
 export default function ({
   sendMessage,
@@ -55,16 +57,18 @@ export default function ({
         <Show when={!store.messageList.length}>
           <MessageItem hiddenAction={true} message={defaultMessage} />
         </Show>
-        <For each={store.messageList}>
-          {(message, index) => (
-            <MessageItem
-              message={message}
-              hiddenAction={store.loading || message.type === "temporary"}
-              index={index()}
-              sendMessage={sendMessage}
-            />
-          )}
-        </For>
+        <TransitionGroup name="transition-group">
+          <For each={store.messageList}>
+            {(message, index) => (
+              <MessageItem
+                message={message}
+                hiddenAction={store.loading || message.type === "temporary"}
+                index={index()}
+                sendMessage={sendMessage}
+              />
+            )}
+          </For>
+        </TransitionGroup>
       </div>
       <Show
         when={!store.loading && (store.contextToken || store.inputContentToken)}
diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx
index 1c4bb3697..36a58f41b 100644
--- a/src/components/Chat/MessageItem.tsx
+++ b/src/components/Chat/MessageItem.tsx
@@ -111,6 +111,9 @@ export default function MessageItem(props: Props) {
     <Show when={renderedMarkdown()}>
       <div
         class="group flex gap-3 px-4 mx--4 rounded-lg transition-colors sm:hover:bg-slate/6 dark:sm:hover:bg-slate/5 relative message-item"
+        style={{
+          transition: "all 0.3s"
+        }}
         classList={{
           temporary: props.message.type === "temporary"
         }}
diff --git a/src/styles/transition.css b/src/styles/transition.css
new file mode 100644
index 000000000..14b0fb89a
--- /dev/null
+++ b/src/styles/transition.css
@@ -0,0 +1,9 @@
+.transition-group-enter {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.transition-group-exit-to {
+  opacity: 0;
+  transform: translateX(30px);
+}