diff --git a/src/app/settings/(desktop)/index.tsx b/src/app/settings/(desktop)/index.tsx
index b680e684729a..2ef22f8b3ce4 100644
--- a/src/app/settings/(desktop)/index.tsx
+++ b/src/app/settings/(desktop)/index.tsx
@@ -1 +1 @@
-export { default } from '../common/page';
+export { default } from '../common/index';
diff --git a/src/app/settings/(desktop)/layout.desktop.tsx b/src/app/settings/(desktop)/layout.desktop.tsx
index 667e1e5eb0ae..201c2b44856a 100644
--- a/src/app/settings/(desktop)/layout.desktop.tsx
+++ b/src/app/settings/(desktop)/layout.desktop.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
diff --git a/src/app/settings/(mobile)/mobile/index.tsx b/src/app/settings/(mobile)/mobile/index.tsx
index 5f5ceedd8cd2..67f7e24acc80 100644
--- a/src/app/settings/(mobile)/mobile/index.tsx
+++ b/src/app/settings/(mobile)/mobile/index.tsx
@@ -14,7 +14,6 @@ import { AVATAR } from '@/store/session/slices/chat/actions/share';
 
 import List from '../../features/SideBar/List';
 import ExtraList from '../features/ExtraList';
-import Layout from '../layout.mobile';
 
 const useStyles = createStyles(({ css, token }) => ({
   divider: css`
@@ -33,7 +32,7 @@ const Setting = memo(() => {
   const { styles } = useStyles();
 
   return (
-    <Layout>
+    <>
       <AgentCardBanner
         mask
         meta={{ avatar: avatar || AVATAR }}
@@ -54,7 +53,7 @@ const Setting = memo(() => {
           </Divider>
         </Center>
       </div>
-    </Layout>
+    </>
   );
 });
 
diff --git a/src/app/settings/(mobile)/mobile/layout.mobile.tsx b/src/app/settings/(mobile)/mobile/layout.tsx
similarity index 96%
rename from src/app/settings/(mobile)/mobile/layout.mobile.tsx
rename to src/app/settings/(mobile)/mobile/layout.tsx
index 741ce6224e95..b775ed313d5d 100644
--- a/src/app/settings/(mobile)/mobile/layout.mobile.tsx
+++ b/src/app/settings/(mobile)/mobile/layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
diff --git a/src/app/settings/common/Common.tsx b/src/app/settings/common/Common.tsx
index 7031f5014d9a..a35f6ad21897 100644
--- a/src/app/settings/common/Common.tsx
+++ b/src/app/settings/common/Common.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
diff --git a/src/app/settings/common/index.tsx b/src/app/settings/common/index.tsx
index 51270a1afc94..43c9c38d2d78 100644
--- a/src/app/settings/common/index.tsx
+++ b/src/app/settings/common/index.tsx
@@ -8,6 +8,7 @@ import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOn
 import { SettingsTabs } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import Layout from '../layout.responsive';
 import Common from './Common';
 
 export default memo(() => {
@@ -15,9 +16,9 @@ export default memo(() => {
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
   return (
-    <>
+    <Layout>
       <PageTitle title={pageTitle} />
       <Common />
-    </>
+    </Layout>
   );
 });
diff --git a/src/app/settings/common/layout.tsx b/src/app/settings/common/layout.tsx
deleted file mode 100644
index 56c8729d0cfc..000000000000
--- a/src/app/settings/common/layout.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '../layout.responsive';