diff --git a/locales/bg-BG/role.json b/locales/bg-BG/role.json
index 5a19dd4f..0207000f 100644
--- a/locales/bg-BG/role.json
+++ b/locales/bg-BG/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Системни настройки на ролята",
     "uploadSize": "Поддържа качване на един файл, препоръчителният размер е кратно на {{width}} * {{height}}"
   },
+  "roleBook": "Ролевата книга",
   "roleList": "Списък с роли",
   "shareToMarket": "Сподели в помощния пазар",
   "startChat": "Започнете чат",
diff --git a/locales/de-DE/role.json b/locales/de-DE/role.json
index 7e05e505..5f45ced0 100644
--- a/locales/de-DE/role.json
+++ b/locales/de-DE/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Systemeinstellungen des Charakters",
     "uploadSize": "Unterstützt den Upload von Einzeldateien, empfohlen wird eine Größe, die ein Vielfaches von {{width}} * {{height}} ist"
   },
+  "roleBook": "Charakterbuch",
   "roleList": "Rollenliste",
   "shareToMarket": "In den Assistentenmarkt teilen",
   "startChat": "Chat starten",
diff --git a/locales/en-US/role.json b/locales/en-US/role.json
index 9dc5a8fa..b3d98a76 100644
--- a/locales/en-US/role.json
+++ b/locales/en-US/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "System Role Settings",
     "uploadSize": "Supports single file uploads, recommended dimensions are multiples of {{width}} * {{height}}"
   },
+  "roleBook": "Character Book",
   "roleList": "Role List",
   "shareToMarket": "Share to Assistant Market",
   "startChat": "Start Chat",
diff --git a/locales/es-ES/role.json b/locales/es-ES/role.json
index 9c1757c4..b557e39e 100644
--- a/locales/es-ES/role.json
+++ b/locales/es-ES/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Configuración del rol del sistema",
     "uploadSize": "Soporta la carga de un solo archivo, se recomienda que las dimensiones sean múltiplos de {{width}} * {{height}}"
   },
+  "roleBook": "Libro de Roles",
   "roleList": "Lista de roles",
   "shareToMarket": "Compartir en el mercado de asistentes",
   "startChat": "Iniciar chat",
diff --git a/locales/fr-FR/role.json b/locales/fr-FR/role.json
index baf7ec9f..d50e2602 100644
--- a/locales/fr-FR/role.json
+++ b/locales/fr-FR/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Paramètres système du personnage",
     "uploadSize": "Prise en charge du téléchargement de fichiers uniques, taille recommandée étant un multiple de {{width}} * {{height}}"
   },
+  "roleBook": "Livre de rôle",
   "roleList": "Liste des rôles",
   "shareToMarket": "Partager sur le marché des assistants",
   "startChat": "Commencer le chat",
diff --git a/locales/it-IT/role.json b/locales/it-IT/role.json
index 5e66b1b9..3b86b468 100644
--- a/locales/it-IT/role.json
+++ b/locales/it-IT/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Impostazioni del ruolo di sistema",
     "uploadSize": "Supporta il caricamento di un singolo file, si consiglia una dimensione che sia un multiplo di {{width}} * {{height}}"
   },
+  "roleBook": "Libro dei Ruoli",
   "roleList": "Elenco dei ruoli",
   "shareToMarket": "Condividi nel mercato degli assistenti",
   "startChat": "Inizia chat",
diff --git a/locales/ja-JP/role.json b/locales/ja-JP/role.json
index eb2a8414..836d44ef 100644
--- a/locales/ja-JP/role.json
+++ b/locales/ja-JP/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "システムキャラクター設定",
     "uploadSize": "単一ファイルのアップロードをサポートしています。推奨サイズは {{width}} * {{height}} の倍数です。"
   },
+  "roleBook": "キャラクターシート",
   "roleList": "ロールリスト",
   "shareToMarket": "アシスタントマーケットに共有",
   "startChat": "チャットを開始",
diff --git a/locales/ko-KR/role.json b/locales/ko-KR/role.json
index c7aaa936..5b2f5389 100644
--- a/locales/ko-KR/role.json
+++ b/locales/ko-KR/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "시스템 캐릭터 설정",
     "uploadSize": "단일 파일 업로드를 지원하며, 추천 크기는 {{width}} * {{height}}의 배수입니다."
   },
+  "roleBook": "역할 책",
   "roleList": "역할 목록",
   "shareToMarket": "도우미 마켓에 공유하기",
   "startChat": "채팅 시작",
diff --git a/locales/nl-NL/role.json b/locales/nl-NL/role.json
index b401dd21..74a99105 100644
--- a/locales/nl-NL/role.json
+++ b/locales/nl-NL/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Systeemrolinstellingen",
     "uploadSize": "Ondersteunt het uploaden van een enkel bestand, aanbevolen afmetingen zijn een veelvoud van {{width}} * {{height}}"
   },
+  "roleBook": "Rolboek",
   "roleList": "Rollijst",
   "shareToMarket": "Delen met de assistentmarkt",
   "startChat": "Begin chat",
diff --git a/locales/pl-PL/role.json b/locales/pl-PL/role.json
index d447d583..d61fc687 100644
--- a/locales/pl-PL/role.json
+++ b/locales/pl-PL/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Ustawienia systemowe postaci",
     "uploadSize": "Obsługuje przesyłanie pojedynczych plików, zalecany rozmiar to wielokrotność {{width}} * {{height}}"
   },
+  "roleBook": "Księga postaci",
   "roleList": "Lista ról",
   "shareToMarket": "Udostępnij na rynku asystentów",
   "startChat": "Rozpocznij czat",
diff --git a/locales/pt-BR/role.json b/locales/pt-BR/role.json
index 7baf4822..f6f67517 100644
--- a/locales/pt-BR/role.json
+++ b/locales/pt-BR/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Configurações do personagem do sistema",
     "uploadSize": "Suporta o upload de um único arquivo, recomendado em múltiplos de {{width}} * {{height}}"
   },
+  "roleBook": "Livro de Personagens",
   "roleList": "Lista de Papéis",
   "shareToMarket": "Compartilhar no mercado de assistentes",
   "startChat": "Iniciar chat",
diff --git a/locales/ru-RU/role.json b/locales/ru-RU/role.json
index 8671e20a..9bfe029b 100644
--- a/locales/ru-RU/role.json
+++ b/locales/ru-RU/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Системные настройки роли",
     "uploadSize": "Поддерживается загрузка одного файла, рекомендуется размер, кратный {{width}} * {{height}}"
   },
+  "roleBook": "Книга персонажей",
   "roleList": "Список ролей",
   "shareToMarket": "Поделиться на рынке помощников",
   "startChat": "Начать чат",
diff --git a/locales/tr-TR/role.json b/locales/tr-TR/role.json
index 0d465746..0f7bee98 100644
--- a/locales/tr-TR/role.json
+++ b/locales/tr-TR/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Sistem rol ayarı",
     "uploadSize": "Tek bir dosya yüklemeyi destekler, önerilen boyut {{width}} * {{height}} katlarıdır"
   },
+  "roleBook": "Karakter Kitabı",
   "roleList": "Rol Listesi",
   "shareToMarket": "Yardımcı Pazarına Paylaş",
   "startChat": "Sohbete Başla",
diff --git a/locales/vi-VN/role.json b/locales/vi-VN/role.json
index 8b4f1bd2..d5cebdad 100644
--- a/locales/vi-VN/role.json
+++ b/locales/vi-VN/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "Cài đặt nhân vật hệ thống",
     "uploadSize": "Hỗ trợ tải lên tệp đơn, kích thước khuyến nghị là bội số của {{width}} * {{height}}"
   },
+  "roleBook": "Sách vai trò",
   "roleList": "Danh sách vai trò",
   "shareToMarket": "Chia sẻ đến thị trường trợ lý",
   "startChat": "Bắt đầu trò chuyện",
diff --git a/locales/zh-CN/role.json b/locales/zh-CN/role.json
index 4a8ab625..2538eabd 100644
--- a/locales/zh-CN/role.json
+++ b/locales/zh-CN/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "系统角色设定",
     "roleSettingDescription": "角色的背景设定，在与角色聊天时会发送给模型"
   },
+  "roleBook": "角色书",
   "roleList": "角色列表",
   "shareToMarket": "分享到助手市场",
   "startChat": "开始聊天",
diff --git a/locales/zh-TW/role.json b/locales/zh-TW/role.json
index f5204732..539a1c15 100644
--- a/locales/zh-TW/role.json
+++ b/locales/zh-TW/role.json
@@ -87,6 +87,7 @@
     "roleSettingLabel": "系統角色設定",
     "uploadSize": "支持單個檔案上傳，推薦尺寸為 {{width}} * {{height}} 的倍數"
   },
+  "roleBook": "角色書",
   "roleList": "角色列表",
   "shareToMarket": "分享到助手市場",
   "startChat": "開始聊天",
diff --git a/src/app/chat/ChatInfo/index.tsx b/src/app/chat/ChatInfo/index.tsx
index 55513eba..6d37796c 100644
--- a/src/app/chat/ChatInfo/index.tsx
+++ b/src/app/chat/ChatInfo/index.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { ActionIcon, DraggablePanel, TabsNav } from '@lobehub/ui';
+import { DraggablePanel, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { X } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { rgba } from 'polished';
 import React, { useState } from 'react';
@@ -85,7 +84,7 @@ export default () => {
       classNames={{ content: styles.content }}
       minWidth={CHAT_INFO_WIDTH}
       maxWidth={CHAT_INFO_MAX_WIDTH}
-      mode={'float'}
+      mode={'fixed'}
       onExpandChange={(expand) => {
         setChatSidebar(expand);
       }}
@@ -125,9 +124,8 @@ export default () => {
             setTab(key as Tab);
           }}
         />
-        <ActionIcon icon={X} onClick={() => setChatSidebar(false)} style={{ marginRight: 16 }} />
       </Flexbox>
-      <Flexbox height={'100vh'}>
+      <Flexbox height={'calc(100vh - 128px)'}>
         {tab === Tab.ChatList && <ChatList />}
         {tab === Tab.DanceList && <DanceList />}
         {tab === Tab.Motions && <MotionList />}
diff --git a/src/app/chat/ViewerMode/style.ts b/src/app/chat/ViewerMode/style.ts
index a733f41d..f59afe7b 100644
--- a/src/app/chat/ViewerMode/style.ts
+++ b/src/app/chat/ViewerMode/style.ts
@@ -21,10 +21,11 @@ export const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   dialog: css`
-    z-index: 1;
+    z-index: 2;
     margin: ${CHAT_HEADER_HEIGHT}px auto 0;
   `,
   docker: css`
+    z-index: 2;
     width: 100%;
     padding: ${token.paddingSM}px;
   `,
diff --git a/src/app/role/RoleEdit/Model/index.tsx b/src/app/role/RoleEdit/Model/index.tsx
deleted file mode 100644
index dcfb18f6..00000000
--- a/src/app/role/RoleEdit/Model/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Form } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import classNames from 'classnames';
-import React from 'react';
-
-import ViewerWithUpload from './ViewerWithUpload';
-
-interface ModelProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    display: flex;
-    width: 100%;
-    height: 100%;
-  `,
-  left: css`
-    flex: 2;
-    margin-right: 12px;
-    border-radius: ${token.borderRadius}px;
-  `,
-
-  right: css`
-    flex: 1;
-    max-height: 740px;
-  `,
-  description: css`
-    font-size: ${token.fontSizeSM}px;
-    color: ${token.colorTextDescription};
-  `,
-}));
-
-const Model = (props: ModelProps) => {
-  const { style, className } = props;
-  const { styles } = useStyles();
-
-  return (
-    <Form>
-      <div className={classNames(className, styles.container)} style={style}>
-        <ViewerWithUpload />
-      </div>
-    </Form>
-  );
-};
-
-export default Model;
diff --git a/src/app/role/RoleEdit/index.tsx b/src/app/role/RoleEdit/index.tsx
index e511e870..14e06700 100644
--- a/src/app/role/RoleEdit/index.tsx
+++ b/src/app/role/RoleEdit/index.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import { BookOutlined } from '@ant-design/icons';
 import { TabsNav } from '@lobehub/ui';
+import { Button } from 'antd';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +10,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import Info from './Info';
 import LangModel from './LangModel';
-import Model from './Model';
 import Role from './Role';
 import Touch from './Touch';
 import Voice from './Voice';
@@ -20,6 +21,10 @@ interface RolePanelProps {
   style?: React.CSSProperties;
 }
 
+const handleOpenDocs = () => {
+  window.open('https://docs.vidol.chat/role-manual/quickstart/introduction', '_blank');
+};
+
 const RolePanel = (props: RolePanelProps) => {
   const { styles } = useStyles();
   const { className, style } = props;
@@ -55,7 +60,14 @@ const RolePanel = (props: RolePanelProps) => {
                   label: t('nav.llm'),
                 },
               ]}
-              tabBarExtraContent={<SubmitAgentButton modal />}
+              tabBarExtraContent={
+                <Flexbox horizontal gap={8}>
+                  <Button icon={<BookOutlined />} onClick={handleOpenDocs}>
+                    {t('roleBook')} {/* 需要在翻译文件中添加对应的翻译 */}
+                  </Button>
+                  <SubmitAgentButton modal />
+                </Flexbox>
+              }
               onChange={(key) => {
                 setTab(key);
               }}
@@ -69,9 +81,6 @@ const RolePanel = (props: RolePanelProps) => {
             {tab === 'llm' ? <LangModel /> : null}
           </div>
         </Flexbox>
-        <Flexbox flex={1}>
-          <Model />
-        </Flexbox>
       </Flexbox>
     </div>
   );
diff --git a/src/app/role/RoleEdit/Model/ViewerWithUpload/index.tsx b/src/app/role/ViewerWithUpload/index.tsx
similarity index 67%
rename from src/app/role/RoleEdit/Model/ViewerWithUpload/index.tsx
rename to src/app/role/ViewerWithUpload/index.tsx
index b4446156..461d61e6 100644
--- a/src/app/role/RoleEdit/Model/ViewerWithUpload/index.tsx
+++ b/src/app/role/ViewerWithUpload/index.tsx
@@ -1,15 +1,18 @@
+import { InboxOutlined } from '@ant-design/icons';
 import { Upload } from 'antd';
 import React, { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import EmptyGuide from '@/components/EmptyGuide';
-import { ROLE_VIEWER_HEIGHT, ROLE_VIEWER_WIDTH } from '@/constants/common';
+import { HEADER_HEIGHT } from '@/constants/token';
 import AgentViewer from '@/features/AgentViewer';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
 import { getModelPathByAgentId } from '@/utils/file';
 import { cacheStorage } from '@/utils/storage';
 
+import { useStyles } from './style';
+
 interface ViewerWithUploadProps {
   style?: CSSProperties;
 }
@@ -17,6 +20,8 @@ interface ViewerWithUploadProps {
 const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
   const viewer = useGlobalStore((s) => s.viewer);
   const { t } = useTranslation('role');
+  const { styles } = useStyles();
+
   const [currentAgentId, currentAgentModel, updateAgentConfig] = useAgentStore((s) => [
     agentSelectors.currentAgentId(s),
     agentSelectors.currentAgentModel(s),
@@ -35,7 +40,14 @@ const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
     });
   };
 
-  return (
+  return currentAgentModel && currentAgentId ? (
+    <AgentViewer
+      height={`calc(100vh - ${HEADER_HEIGHT}px)`}
+      agentId={currentAgentId}
+      interactive={false}
+      toolbar={false}
+    />
+  ) : (
     <Upload
       beforeUpload={handleUploadAvatar}
       itemRender={() => void 0}
@@ -44,20 +56,11 @@ const ViewerWithUpload = memo<ViewerWithUploadProps>(({ style }) => {
       style={style}
       openFileDialogOnClick={!currentAgentModel}
     >
-      {currentAgentModel && currentAgentId ? (
-        <AgentViewer
-          height={ROLE_VIEWER_HEIGHT}
-          agentId={currentAgentId}
-          width={ROLE_VIEWER_WIDTH}
-          interactive={false}
-          toolbar={false}
-        />
-      ) : (
-        <EmptyGuide
-          size={{ height: ROLE_VIEWER_HEIGHT, width: ROLE_VIEWER_WIDTH }}
-          extra={t('upload.support')}
-        />
-      )}
+      <Flexbox className={styles.guide} align="center" justify={'center'} width={'100%'}>
+        <InboxOutlined className={styles.icon} />
+        <p className={styles.info}>{t('uploadTip', { ns: 'common' })}</p>
+        <p className={styles.extra}>{t('upload.support')}</p>
+      </Flexbox>
     </Upload>
   );
 });
diff --git a/src/components/EmptyGuide/style.ts b/src/app/role/ViewerWithUpload/style.ts
similarity index 56%
rename from src/components/EmptyGuide/style.ts
rename to src/app/role/ViewerWithUpload/style.ts
index 9a612c91..33874572 100644
--- a/src/components/EmptyGuide/style.ts
+++ b/src/app/role/ViewerWithUpload/style.ts
@@ -1,16 +1,14 @@
 import { createStyles } from 'antd-style';
 
+import { ROLE_VIEWER_WIDTH } from '@/constants/common';
+import { HEADER_HEIGHT } from '@/constants/token';
+
 export const useStyles = createStyles(({ css, token }) => ({
   guide: css`
     cursor: pointer;
-
-    display: flex;
-
-    width: 100%;
-    height: 100%;
-
-    border: 1px dashed ${token.colorBorder};
-    border-radius: ${token.borderRadius}px;
+    width: ${ROLE_VIEWER_WIDTH}px;
+    height: calc(100vh - ${HEADER_HEIGHT}px);
+    border: 1px dashed ${token.colorBorderSecondary};
   `,
   icon: css`
     font-size: 48px;
diff --git a/src/app/role/page.tsx b/src/app/role/page.tsx
index 5bc79a8c..27d9dddb 100644
--- a/src/app/role/page.tsx
+++ b/src/app/role/page.tsx
@@ -3,12 +3,10 @@
 import { Spin } from 'antd';
 import dynamic from 'next/dynamic';
 import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import TopBanner from '@/components/TopBanner';
-
 import SideBar from './SideBar';
+import ViewerWithUpload from './ViewerWithUpload';
 import { useStyles } from './style';
 
 const RoleEdit = dynamic(() => import('./RoleEdit'), {
@@ -22,17 +20,17 @@ const RoleEdit = dynamic(() => import('./RoleEdit'), {
 
 const Role = () => {
   const { styles } = useStyles();
-  const { t } = useTranslation('role');
   return (
     <Flexbox flex={1} height={'100%'} width={'100%'} horizontal>
       <SideBar />
-      <Flexbox className={styles.preview}>
+      <Flexbox className={styles.preview} horizontal>
         <Flexbox className={styles.container}>
-          <TopBanner title={t('topBannerTitle')} style={{ height: 180 }} />
           <RoleEdit />
         </Flexbox>
+        <Flexbox className={styles.model}>
+          <ViewerWithUpload />
+        </Flexbox>
       </Flexbox>
-      {/*<RoleInfo />*/}
     </Flexbox>
   );
 };
diff --git a/src/app/role/style.ts b/src/app/role/style.ts
index af1245ce..384d2ff4 100644
--- a/src/app/role/style.ts
+++ b/src/app/role/style.ts
@@ -1,5 +1,7 @@
 import { createStyles } from 'antd-style';
 
+import { ROLE_VIEWER_WIDTH } from '@/constants/common';
+
 export const useStyles = createStyles(({ css, cx }) => ({
   preview: cx(
     'role-preview',
@@ -9,12 +11,13 @@ export const useStyles = createStyles(({ css, cx }) => ({
     `,
   ),
   container: css`
-    width: 80rem;
+    width: 1024px;
     height: 100%;
     margin: 0 auto;
-  `,
-  edit: css`
     padding: 0 24px;
   `,
-  model: css``,
+  model: css`
+    width: ${ROLE_VIEWER_WIDTH}px;
+    height: 100%;
+  `,
 }));
diff --git a/src/components/EmptyGuide/index.tsx b/src/components/EmptyGuide/index.tsx
deleted file mode 100644
index 88b41507..00000000
--- a/src/components/EmptyGuide/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { InboxOutlined } from '@ant-design/icons';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useStyles } from './style';
-
-interface EmptyGuideProps {
-  extra?: string;
-  size: { height: number; width: number };
-}
-
-const EmptyGuide = (props: EmptyGuideProps) => {
-  const { styles } = useStyles();
-  const { size, extra } = props;
-  const { t } = useTranslation('common');
-
-  return (
-    <Flexbox
-      className={styles.guide}
-      align="center"
-      justify={'center'}
-      style={{ height: size.height, width: size.width }}
-    >
-      <InboxOutlined className={styles.icon} />
-      <p className={styles.info}>{t('uploadTip')}</p>
-      {extra ? <p className={styles.extra}>{extra}</p> : null}
-    </Flexbox>
-  );
-};
-
-export default EmptyGuide;
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 9cd45b53..dc0c822d 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -43,6 +43,6 @@ export const DEFAULT_USER_AVATAR_URL =
 export const DEFAULT_AGENT_AVATAR_URL =
   'https://registry.npmmirror.com/@lobehub/assets-logo/1.2.0/files/assets/logo-3d.webp';
 export const ROLE_VIEWER_HEIGHT = 800;
-export const ROLE_VIEWER_WIDTH = 400;
+export const ROLE_VIEWER_WIDTH = 480;
 
 export const PWA_INSTALL_ID = 'pwa-install';
diff --git a/src/features/AgentViewer/Background/index.tsx b/src/features/AgentViewer/Background/index.tsx
new file mode 100644
index 00000000..f25e098a
--- /dev/null
+++ b/src/features/AgentViewer/Background/index.tsx
@@ -0,0 +1,33 @@
+import { useGlobalStore } from '@/store/global';
+import { useSettingStore } from '@/store/setting';
+
+import { useStyles } from './style';
+
+const Background = () => {
+  const { styles } = useStyles();
+  const backgroundUrl = useGlobalStore((s) => s.backgroundUrl);
+  const backgroundEffect = useSettingStore((s) => s.config.backgroundEffect);
+
+  if (backgroundUrl) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          backgroundImage: `url(${backgroundUrl})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          width: '100%',
+          height: '100%',
+          zIndex: -1,
+          transition: 'background-image 0.5s ease-in-out',
+        }}
+      ></div>
+    );
+  }
+
+  return backgroundEffect === 'glow' ? <div className={styles.glow}></div> : null;
+};
+
+export default Background;
diff --git a/src/features/AgentViewer/Background/style.ts b/src/features/AgentViewer/Background/style.ts
new file mode 100644
index 00000000..0922ccf2
--- /dev/null
+++ b/src/features/AgentViewer/Background/style.ts
@@ -0,0 +1,43 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  glow: css`
+    pointer-events: none;
+    will-change: transform;
+
+    position: absolute;
+    top: 250px;
+    left: 50%;
+    transform: translateX(-50%) scale(1.5);
+
+    width: 600px;
+    height: 400px;
+
+    opacity: 0.2;
+    background: linear-gradient(
+      135deg,
+      ${token.purple} 0%,
+      ${token.blue} 30%,
+      ${token.red} 70%,
+      ${token.cyan} 100%
+    );
+    background-size: 200% 200%;
+    filter: blur(69px);
+
+    animation: glow 10s ease infinite;
+
+    @keyframes glow {
+      0% {
+        background-position: 0 -100%;
+      }
+
+      50% {
+        background-position: 200% 50%;
+      }
+
+      100% {
+        background-position: 0 -100%;
+      }
+    }
+  `,
+}));
diff --git a/src/features/AgentViewer/ToolBar/index.tsx b/src/features/AgentViewer/ToolBar/index.tsx
index 3dfc5580..1864be35 100644
--- a/src/features/AgentViewer/ToolBar/index.tsx
+++ b/src/features/AgentViewer/ToolBar/index.tsx
@@ -19,12 +19,13 @@ import { useSessionStore } from '@/store/session';
 
 interface ToolBarProps {
   className?: string;
+  onFullscreen: () => void;
   style?: React.CSSProperties;
   viewer: Viewer;
 }
 
 const ToolBar = (props: ToolBarProps) => {
-  const { style, className, viewer } = props;
+  const { style, className, viewer, onFullscreen } = props;
   const { t } = useTranslation('chat');
 
   const [interactive, toggleInteractive] = useSessionStore((s) => [
@@ -122,7 +123,7 @@ const ToolBar = (props: ToolBarProps) => {
           }
 
           case 'fullscreen': {
-            viewer.toggleFullScreen();
+            onFullscreen();
             break;
           }
 
diff --git a/src/features/AgentViewer/index.tsx b/src/features/AgentViewer/index.tsx
index 2cd739c8..062a77ba 100644
--- a/src/features/AgentViewer/index.tsx
+++ b/src/features/AgentViewer/index.tsx
@@ -13,6 +13,7 @@ import { useGlobalStore } from '@/store/global';
 import { TouchAreaEnum } from '@/types/touch';
 import { preloadVoice } from '@/utils/voice';
 
+import Background from './Background';
 import ToolBar from './ToolBar';
 import { useStyles } from './style';
 
@@ -244,6 +245,20 @@ function AgentViewer(props: Props) {
     [viewer, agentId, interactive],
   );
 
+  const handleFullscreen = useCallback(() => {
+    if (!ref.current) return;
+
+    if (!document.fullscreenElement) {
+      ref.current.requestFullscreen().catch((err) => {
+        console.error(`全屏错误: ${err.message}`);
+      });
+    } else {
+      document.exitFullscreen().catch((err) => {
+        console.error(`退出全屏错误: ${err.message}`);
+      });
+    }
+  }, []);
+
   return (
     <div
       ref={ref}
@@ -251,7 +266,9 @@ function AgentViewer(props: Props) {
       id="agent-viewer"
       style={{ height, width, ...style }}
     >
-      {toolbar && <ToolBar className={styles.toolbar} viewer={viewer} />}
+      {toolbar && (
+        <ToolBar className={styles.toolbar} viewer={viewer} onFullscreen={handleFullscreen} />
+      )}
       {loading ? (
         <ScreenLoading
           title={t('loading.waiting')}
@@ -268,6 +285,7 @@ function AgentViewer(props: Props) {
         />
       ) : null}
       <canvas ref={canvasRef} className={styles.canvas} id={'canvas'}></canvas>
+      <Background />
     </div>
   );
 }
diff --git a/src/features/AgentViewer/style.ts b/src/features/AgentViewer/style.ts
index 8aa78e0c..421374a3 100644
--- a/src/features/AgentViewer/style.ts
+++ b/src/features/AgentViewer/style.ts
@@ -1,5 +1,4 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 
 export const useStyles = createStyles(({ css, token }) => ({
   viewer: css`
@@ -10,14 +9,13 @@ export const useStyles = createStyles(({ css, token }) => ({
     width: 100%;
     height: 100%;
     min-height: 0;
-
-    background-color: ${rgba(token.colorBgLayout, 0.2)};
-    backdrop-filter: saturate(180%) blur(2px);
   `,
   toolbar: css`
     position: absolute;
+    z-index: 1;
     right: ${token.paddingMD}px;
     bottom: 50%;
+
     display: flex;
   `,
   loading: css`
diff --git a/src/libs/vrmViewer/viewer.ts b/src/libs/vrmViewer/viewer.ts
index 6c0a081e..963d984b 100644
--- a/src/libs/vrmViewer/viewer.ts
+++ b/src/libs/vrmViewer/viewer.ts
@@ -308,6 +308,8 @@ export class Viewer {
   public requestFullScreen() {
     // 将 canvas 全屏加载
     if (this._canvas) {
+      // 将 canvas 背景设置为黑色
+      this._canvas.style.backgroundColor = 'black';
       this._canvas.requestFullscreen();
       // 添加全屏变化事件监听器
       document.addEventListener('fullscreenchange', this.handleFullscreenChange);
@@ -315,6 +317,10 @@ export class Viewer {
   }
 
   public exitFullScreen() {
+    if (this._canvas) {
+      // 将 canvas 背景设置为透明
+      this._canvas.style.backgroundColor = 'transparent';
+    }
     if (document.fullscreenElement && document.exitFullscreen) {
       document.exitFullscreen().catch((err) => {
         console.warn('退出全屏失败:', err);
diff --git a/src/locales/default/role.ts b/src/locales/default/role.ts
index 28825599..10760e52 100644
--- a/src/locales/default/role.ts
+++ b/src/locales/default/role.ts
@@ -19,6 +19,7 @@ export default {
     uploadingAvatar: '上传头像',
     uploadingModel: '上传模型',
   },
+  roleBook: '角色书',
   gender: {
     male: '男性',
     female: '女性',