diff --git a/src/app/home/Docker/ToolBar/index.tsx b/src/app/home/Docker/ToolBar/index.tsx
index 90d8e04b..92f6d3b0 100644
--- a/src/app/home/Docker/ToolBar/index.tsx
+++ b/src/app/home/Docker/ToolBar/index.tsx
@@ -1,19 +1,13 @@
 import Record from '@/features/ChatInput/Actions/Record';
 import Voice from '@/features/ChatInput/Actions/Voice';
 import { useConfigStore } from '@/store/config';
-import { useSessionStore } from '@/store/session';
 import { ActionIcon } from '@lobehub/ui';
-import { Segmented, Space } from 'antd';
+import { Space } from 'antd';
 import { History } from 'lucide-react';
 
 const ToolBar = () => {
   const [openPanel] = useConfigStore((s) => [s.openPanel]);
 
-  const { viewerMode, setViewerMode } = useSessionStore((s) => ({
-    setViewerMode: s.setViewerMode,
-    viewerMode: s.viewerMode,
-  }));
-
   return (
     <Space size={4}>
       <ActionIcon
@@ -25,20 +19,6 @@ const ToolBar = () => {
       />
       <Record />
       <Voice />
-      <Segmented
-        onChange={(value) => {
-          if (value === 'true') {
-            setViewerMode(true);
-          } else {
-            setViewerMode(false);
-          }
-        }}
-        options={[
-          { label: '3D', value: 'true' },
-          { label: '立绘', value: 'false' },
-        ]}
-        value={viewerMode ? 'true' : 'false'}
-      />
     </Space>
   );
 };
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index f6075a2d..5282c683 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,21 +1,19 @@
 'use client';
 
-import Background from '@/app/home/Background';
 import Dialog from '@/app/home/Dialog';
 import Docker from '@/app/home/Docker';
-import QuickSwitch from '@/app/home/QuickSwitch';
 import VirtualIdol from '@/app/home/VirtualIdol';
+import Background from '@/components/Background';
 
 const Desktop = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%' }}>
       <div style={{ height: 'calc(100vh - 64px - 64px)' }}>
         <VirtualIdol />
+        <Background />
       </div>
       <Docker />
-      <QuickSwitch />
       <Dialog />
-      <Background />
     </div>
   );
 };
diff --git a/src/app/home/Background/index.tsx b/src/components/Background/index.tsx
similarity index 100%
rename from src/app/home/Background/index.tsx
rename to src/components/Background/index.tsx
diff --git a/src/app/home/Background/style.ts b/src/components/Background/style.ts
similarity index 100%
rename from src/app/home/Background/style.ts
rename to src/components/Background/style.ts
diff --git a/src/features/ChatInfo/index.tsx b/src/features/ChatInfo/index.tsx
index 38fe3f4f..6dd2c7a5 100644
--- a/src/features/ChatInfo/index.tsx
+++ b/src/features/ChatInfo/index.tsx
@@ -11,6 +11,8 @@ import { agentListSelectors, useAgentStore } from '@/store/agent';
 import { useConfigStore } from '@/store/config';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
+import ViewerMode from '../ViewerMode';
+
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
     display: flex;
@@ -62,6 +64,7 @@ const Header = () => {
             编辑
           </Button>,
           <Voice key={'voice'} />,
+          <ViewerMode key={'viewer'} />,
         ]}
         agent={currentAgent}
       />
diff --git a/src/app/home/QuickSwitch/index.tsx b/src/features/QuickSwitch/index.tsx
similarity index 100%
rename from src/app/home/QuickSwitch/index.tsx
rename to src/features/QuickSwitch/index.tsx
diff --git a/src/app/home/QuickSwitch/style.ts b/src/features/QuickSwitch/style.ts
similarity index 100%
rename from src/app/home/QuickSwitch/style.ts
rename to src/features/QuickSwitch/style.ts
diff --git a/src/features/ViewerMode/index.tsx b/src/features/ViewerMode/index.tsx
new file mode 100644
index 00000000..9e925601
--- /dev/null
+++ b/src/features/ViewerMode/index.tsx
@@ -0,0 +1,29 @@
+import { Segmented } from 'antd';
+
+import { useSessionStore } from '@/store/session';
+
+const ViewerMode = () => {
+  const { viewerMode, setViewerMode } = useSessionStore((s) => ({
+    setViewerMode: s.setViewerMode,
+    viewerMode: s.viewerMode,
+  }));
+
+  return (
+    <Segmented
+      onChange={(value) => {
+        if (value === 'true') {
+          setViewerMode(true);
+        } else {
+          setViewerMode(false);
+        }
+      }}
+      options={[
+        { label: '3D', value: 'true' },
+        { label: '立绘', value: 'false' },
+      ]}
+      value={viewerMode ? 'true' : 'false'}
+    />
+  );
+};
+
+export default ViewerMode;