diff --git a/packages/frontend/core/src/mobile/pages/workspace/collection/detail.tsx b/packages/frontend/core/src/mobile/pages/workspace/collection/detail.tsx
index c8de005be5..6add099d7a 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/collection/detail.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/collection/detail.tsx
@@ -14,7 +14,7 @@ import { AppTabs } from '../../../components';
 import { CollectionDetail } from '../../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
   const { collectionService, globalContextService, workspaceService } =
     useServices({
       WorkspaceService,
diff --git a/packages/frontend/core/src/mobile/pages/workspace/tag/detail.tsx b/packages/frontend/core/src/mobile/pages/workspace/tag/detail.tsx
index 295b0e6695..25e7ffb79b 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/tag/detail.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/tag/detail.tsx
@@ -12,7 +12,7 @@ import { useParams } from 'react-router-dom';
 import { TagDetail } from '../../../views';
 
 export const Component = () => {
-  useThemeColorV2('layer/background/secondary');
+  useThemeColorV2('layer/background/mobile/primary');
   const params = useParams();
   const tagId = params.tagId;
 
diff --git a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts b/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts
index 5f1aaf9227..04bdadfba9 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts
+++ b/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts
@@ -2,6 +2,10 @@ import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
+export const header = style({
+  background: cssVarV2.layer.background.mobile.primary,
+});
+
 export const headerContent = style([
   bodyEmphasized,
   {
diff --git a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.tsx b/packages/frontend/core/src/mobile/views/all-docs/collection/detail.tsx
index e1a688f567..1c07feb55a 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.tsx
+++ b/packages/frontend/core/src/mobile/views/all-docs/collection/detail.tsx
@@ -12,6 +12,7 @@ import * as styles from './detail.css';
 export const DetailHeader = ({ collection }: { collection: Collection }) => {
   return (
     <PageHeader
+      className={styles.header}
       back
       suffix={
         <MobileMenu items={<AllDocsMenu />}>
diff --git a/packages/frontend/core/src/mobile/views/all-docs/tag/detail-header.tsx b/packages/frontend/core/src/mobile/views/all-docs/tag/detail-header.tsx
index c588258089..ec1434ad80 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/tag/detail-header.tsx
+++ b/packages/frontend/core/src/mobile/views/all-docs/tag/detail-header.tsx
@@ -12,6 +12,7 @@ export const TagDetailHeader = ({ tag }: { tag: Tag }) => {
   const color = useLiveData(tag.color$);
   return (
     <PageHeader
+      className={styles.header}
       back
       suffix={
         <MobileMenu items={<AllDocsMenu />}>
diff --git a/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts b/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts
index cdc291364d..256457b147 100644
--- a/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts
+++ b/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts
@@ -2,6 +2,9 @@ import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
+export const header = style({
+  background: cssVarV2.layer.background.mobile.primary,
+});
 export const headerContent = style([
   bodyEmphasized,
   {