diff --git a/packages/component/src/ui/empty/empty-svg.tsx b/packages/component/src/ui/empty/empty-svg.tsx
index 310e773610..ec91fb1b1a 100644
--- a/packages/component/src/ui/empty/empty-svg.tsx
+++ b/packages/component/src/ui/empty/empty-svg.tsx
@@ -1,154 +1,33 @@
-import SvgIcon from '@mui/material/SvgIcon';
 import { memo } from 'react';
 
-export const EmptyLightSvg = memo(function EmptySvg() {
+export const EmptySvg = memo(function EmptySvg() {
   return (
-    <SvgIcon
+    <svg
       width="248"
       height="216"
       viewBox="0 0 248 216"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M124.321 4.45459L5.2627 210.669H243.379L124.321 4.45459ZM239.666 207.565L182.825 109.114L125.984 141.931L239.666 207.565ZM125.153 140.49L181.993 107.673L125.153 9.22248L125.153 140.49ZM123.489 9.22248L123.489 140.49L66.6484 107.673L123.489 9.22248ZM65.8166 109.114L8.97592 207.565L122.657 141.931L65.8166 109.114ZM123.489 143.372L9.80773 209.006H123.489V143.372ZM125.153 209.006H238.834L125.153 143.372L125.153 209.006Z"
-        fill="black"
         fillOpacity="0.3"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M124.283 208.367C161.062 208.367 190.89 178.415 190.89 141.452C190.89 104.489 161.062 74.5371 124.283 74.5371C87.5044 74.5371 57.6765 104.489 57.6765 141.452C57.6765 178.415 87.5044 208.367 124.283 208.367ZM124.283 210.031C161.988 210.031 192.553 179.327 192.553 141.452C192.553 103.577 161.988 72.8735 124.283 72.8735C86.5785 72.8735 56.0129 103.577 56.0129 141.452C56.0129 179.327 86.5785 210.031 124.283 210.031Z"
-        fill="black"
         fillOpacity="0.3"
       />
-      <circle
-        cx="65.7267"
-        cy="107.881"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="5.26255"
-        cy="210.014"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.359"
-        cy="210.014"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="243.06"
-        cy="210.014"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="183.499"
-        cy="107.881"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.396"
-        cy="141.83"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.344"
-        cy="5.00449"
-        r="4.93369"
-        fill="black"
-        fillOpacity="0.8"
-      />
-    </SvgIcon>
-  );
-});
-
-export const EmptyDarkSvg = memo(function EmptySvg() {
-  return (
-    <SvgIcon
-      width="248"
-      height="216"
-      viewBox="0 0 248 216"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M124.321 4.45459L5.26257 210.669H243.379L124.321 4.45459ZM239.666 207.565L182.825 109.114L125.984 141.931L239.666 207.565ZM125.153 140.49L181.993 107.673L125.153 9.22248L125.153 140.49ZM123.489 9.22248L123.489 140.49L66.6483 107.673L123.489 9.22248ZM65.8165 109.114L8.9758 207.565L122.657 141.931L65.8165 109.114ZM123.489 143.372L9.80761 209.006H123.489V143.372ZM125.153 209.006H238.834L125.153 143.372L125.153 209.006Z"
-        fill="white"
-        fillOpacity="0.3"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M124.283 208.367C161.062 208.367 190.89 178.415 190.89 141.452C190.89 104.489 161.062 74.5371 124.283 74.5371C87.5043 74.5371 57.6764 104.489 57.6764 141.452C57.6764 178.415 87.5043 208.367 124.283 208.367ZM124.283 210.031C161.988 210.031 192.553 179.327 192.553 141.452C192.553 103.577 161.988 72.8735 124.283 72.8735C86.5784 72.8735 56.0128 103.577 56.0128 141.452C56.0128 179.327 86.5784 210.031 124.283 210.031Z"
-        fill="white"
-        fillOpacity="0.3"
-      />
-      <circle
-        cx="65.7267"
-        cy="107.881"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="5.26255"
-        cy="210.014"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.359"
-        cy="210.014"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="243.06"
-        cy="210.014"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="183.499"
-        cy="107.881"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.396"
-        cy="141.83"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-      <circle
-        cx="124.343"
-        cy="5.00449"
-        r="4.93369"
-        fill="white"
-        fillOpacity="0.8"
-      />
-    </SvgIcon>
+      <circle cx="65.7267" cy="107.881" r="4.93369" fillOpacity="0.8" />
+      <circle cx="5.26255" cy="210.014" r="4.93369" fillOpacity="0.8" />
+      <circle cx="124.359" cy="210.014" r="4.93369" fillOpacity="0.8" />
+      <circle cx="243.06" cy="210.014" r="4.93369" fillOpacity="0.8" />
+      <circle cx="183.499" cy="107.881" r="4.93369" fillOpacity="0.8" />
+      <circle cx="124.396" cy="141.83" r="4.93369" fillOpacity="0.8" />
+      <circle cx="124.344" cy="5.00449" r="4.93369" fillOpacity="0.8" />
+    </svg>
   );
 });
diff --git a/packages/component/src/ui/empty/empty.tsx b/packages/component/src/ui/empty/empty.tsx
index fefb66930d..ee02b577a4 100644
--- a/packages/component/src/ui/empty/empty.tsx
+++ b/packages/component/src/ui/empty/empty.tsx
@@ -1,7 +1,6 @@
-import { useTheme } from 'next-themes';
 import type { CSSProperties } from 'react';
 
-import { EmptyDarkSvg, EmptyLightSvg } from './empty-svg';
+import { EmptySvg } from './empty-svg';
 import { StyledEmptyContainer } from './style';
 export type EmptyContentProps = {
   containerStyle?: CSSProperties;
@@ -14,11 +13,11 @@ export const Empty = ({
   description,
   descriptionStyle,
 }: EmptyContentProps) => {
-  const { theme } = useTheme();
-  const isDark = theme === 'dark';
   return (
     <StyledEmptyContainer style={containerStyle}>
-      {isDark ? <EmptyDarkSvg /> : <EmptyLightSvg />}
+      <div style={{ color: 'var(--affine-black)' }}>
+        <EmptySvg />
+      </div>
       <p style={{ marginTop: '30px', ...descriptionStyle }}>{description}</p>
     </StyledEmptyContainer>
   );