diff --git a/packages/frontend/component/src/ui/lottie/collections-icon.css.ts b/packages/frontend/component/src/ui/lottie/collections-icon.css.ts
deleted file mode 100644
index d2445ad896..0000000000
--- a/packages/frontend/component/src/ui/lottie/collections-icon.css.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  width: '1em',
-  height: '1em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
diff --git a/packages/frontend/component/src/ui/lottie/collections-icon.tsx b/packages/frontend/component/src/ui/lottie/collections-icon.tsx
index 103cc10e9e..701d0f4c0a 100644
--- a/packages/frontend/component/src/ui/lottie/collections-icon.tsx
+++ b/packages/frontend/component/src/ui/lottie/collections-icon.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import Lottie, { type LottieRef } from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
-import * as styles from './collections-icon.css';
 import animationData from './collections-icon.json';
+import * as styles from './styles.css';
 
 export interface CollectionsIconProps {
   closed: boolean; // eg, when collections icon is a "dragged over" state
diff --git a/packages/frontend/component/src/ui/lottie/delete-icon.css.tsx b/packages/frontend/component/src/ui/lottie/delete-icon.css.tsx
deleted file mode 100644
index d2445ad896..0000000000
--- a/packages/frontend/component/src/ui/lottie/delete-icon.css.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const root = style({
-  width: '1em',
-  height: '1em',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
diff --git a/packages/frontend/component/src/ui/lottie/delete-icon.tsx b/packages/frontend/component/src/ui/lottie/delete-icon.tsx
index 555dd5e3a1..48aaf5c47f 100644
--- a/packages/frontend/component/src/ui/lottie/delete-icon.tsx
+++ b/packages/frontend/component/src/ui/lottie/delete-icon.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import Lottie, { type LottieRef } from 'lottie-react';
 import { useEffect, useRef } from 'react';
 
-import * as styles from './delete-icon.css';
 import animationData from './delete-icon.json';
+import * as styles from './styles.css';
 
 export interface DeleteIconProps {
   closed: boolean; // eg, when delete icon is a "dragged over" state
diff --git a/packages/frontend/component/src/ui/lottie/styles.css.ts b/packages/frontend/component/src/ui/lottie/styles.css.ts
new file mode 100644
index 0000000000..4e7b5be74c
--- /dev/null
+++ b/packages/frontend/component/src/ui/lottie/styles.css.ts
@@ -0,0 +1,19 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const root = style({
+  width: '1em',
+  height: '1em',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+const magicColor = `rgb(119,117,125)`;
+
+globalStyle(`${root} path[stroke="${magicColor}"]`, {
+  stroke: 'currentColor',
+});
+
+globalStyle(`${root} path[fill="${magicColor}"]`, {
+  fill: 'currentColor',
+});
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index ca4b1e98e8..b6554a0146 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -294,9 +294,7 @@ export const RootAppSidebar = ({
             {t['com.affine.workspaceSubPath.trash']()}
           </span>
         </RouteMenuLinkItem>
-        {blockSuiteWorkspace && (
-          <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
-        )}
+        <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
       </SidebarScrollableContainer>
       <SidebarContainer>
         {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}