diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/dark-migration.png b/packages/frontend/core/src/desktop/pages/workspace/all-page/dark-migration.png
new file mode 100644
index 000000000..7ef8e43a4
Binary files /dev/null and b/packages/frontend/core/src/desktop/pages/workspace/all-page/dark-migration.png differ
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/light-migration.png b/packages/frontend/core/src/desktop/pages/workspace/all-page/light-migration.png
new file mode 100644
index 000000000..c644bb253
Binary files /dev/null and b/packages/frontend/core/src/desktop/pages/workspace/all-page/light-migration.png differ
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.css.ts b/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.css.ts
index cde020add..f57346995 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.css.ts
@@ -4,7 +4,7 @@ import { style } from '@vanilla-extract/css';
 
 export const migrationDataNotificationContainer = style({
   border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
-  padding: '12px 240px 12px 12px',
+  padding: '12px 12px 12px 12px',
   borderRadius: '8px',
   margin: '0 24px',
   marginTop: '24px',
@@ -39,3 +39,13 @@ export const migrationDataNotificationError = style({
   lineHeight: '22px',
   paddingBottom: '16px',
 });
+
+export const migrationBackgroundCover = style({
+  width: '250px',
+  height: '150px',
+  padding: '16px',
+  marginTop: '-48px',
+  objectFit: 'cover',
+  float: 'right',
+  userSelect: 'none',
+});
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.tsx
index cadc8bb24..37c0d1b46 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/all-page/migration-data.tsx
@@ -3,10 +3,23 @@ import { DocCreatedByUpdatedBySyncService } from '@affine/core/modules/cloud';
 import { UserFriendlyError } from '@affine/error';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
+import { useTheme } from 'next-themes';
 import { useCallback, useMemo } from 'react';
 
+import darkMigration from './dark-migration.png';
+import lightMigration from './light-migration.png';
 import * as styles from './migration-data.css';
 
+const MigrationBackgroundCover = () => {
+  const { theme } = useTheme();
+  return (
+    <img
+      src={theme === 'light' ? lightMigration : darkMigration}
+      className={styles.migrationBackgroundCover}
+    />
+  );
+};
+
 export const MigrationAllDocsDataNotification = () => {
   const t = useI18n();
   const docCreatedByUpdatedBySyncService = useService(
@@ -38,6 +51,7 @@ export const MigrationAllDocsDataNotification = () => {
         {t['com.affine.migration-all-docs-notification.title']()}
       </div>
       <div className={styles.migrationDataNotificationContent}>
+        <MigrationBackgroundCover />
         {t['com.affine.migration-all-docs-notification.content']()}
       </div>