diff --git a/packages/frontend/component/src/components/workspace/index.css.ts b/packages/frontend/component/src/components/workspace/index.css.ts
index 10a381fe90..622036a395 100644
--- a/packages/frontend/component/src/components/workspace/index.css.ts
+++ b/packages/frontend/component/src/components/workspace/index.css.ts
@@ -3,6 +3,7 @@ import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { globalStyle, style } from '@vanilla-extract/css';
 
 import { breakpoints } from '../../styles/mui-theme';
+
 export const appStyle = style({
   width: '100%',
   position: 'relative',
@@ -22,9 +23,11 @@ export const appStyle = style({
       content: '""',
       position: 'absolute',
       inset: 0,
-      opacity: 'var(--affine-noise-opacity)',
-      backgroundSize: '25%',
-      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+      opacity: 'var(--affine-noise-opacity, 0)',
+      backgroundRepeat: 'repeat',
+      backgroundSize: '2.5%',
+      // todo: figure out how to use vanilla-extract webpack plugin to inject img url
+      backgroundImage: `var(--noise-background)`,
     },
   },
 });
diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css
index 66371ee5d9..31754752bd 100644
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -8,6 +8,10 @@
   /*transition: all 0.1s;*/
 }
 
+:root {
+  --noise-background: url(./noise.png);
+}
+
 html,
 body,
 h1,
diff --git a/packages/frontend/component/src/theme/noise.png b/packages/frontend/component/src/theme/noise.png
new file mode 100644
index 0000000000..1610efbf3c
Binary files /dev/null and b/packages/frontend/component/src/theme/noise.png differ