diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 82625b67..a3a05acd 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1536,6 +1536,7 @@
   "关闭公告": "Close Notice",
   "搜索条件": "Search Conditions",
   "加载中...": "Loading...",
+  "正在跳转...": "Redirecting...",
   "暂无公告": "No Notice",
   "操练场": "Playground",
   "欢迎使用，请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",
diff --git a/web/src/pages/Chat/index.js b/web/src/pages/Chat/index.js
index bd4e19a1..22c5c1e2 100644
--- a/web/src/pages/Chat/index.js
+++ b/web/src/pages/Chat/index.js
@@ -1,9 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTokenKeys } from '../../hooks/useTokenKeys';
-import { Banner, Layout } from '@douyinfe/semi-ui';
+import { Spin } from '@douyinfe/semi-ui';
 import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const ChatPage = () => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const { keys, serverAddress, isLoading } = useTokenKeys(id);
 
@@ -40,12 +42,17 @@ const ChatPage = () => {
       allow='camera;microphone'
     />
   ) : (
-    <div>
-      <Layout>
-        <Layout.Header>
-          <Banner description={'正在跳转......'} type={'warning'} />
-        </Layout.Header>
-      </Layout>
+    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
+      <div className="flex flex-col items-center">
+        <Spin
+          size="large"
+          spinning={true}
+          tip={null}
+        />
+        <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
+          {t('正在跳转...')}
+        </span>
+      </div>
     </div>
   );
 };