diff --git a/packages/frontend/component/src/components/workspace/index.css.ts b/packages/frontend/component/src/components/workspace/index.css.ts
index 02a86963a..ce31f3cd3 100644
--- a/packages/frontend/component/src/components/workspace/index.css.ts
+++ b/packages/frontend/component/src/components/workspace/index.css.ts
@@ -23,7 +23,7 @@ export const appStyle = style({
       inset: 0,
       opacity: 'var(--affine-noise-opacity, 0)',
       backgroundRepeat: 'repeat',
-      backgroundSize: '2.5%',
+      backgroundSize: '3%',
       // todo: figure out how to use vanilla-extract webpack plugin to inject img url
       backgroundImage: `var(--noise-background)`,
     },
@@ -32,13 +32,13 @@ export const appStyle = style({
 
 globalStyle(`html[data-theme="light"] ${appStyle}`, {
   vars: {
-    '--affine-noise-opacity': '0.25',
+    '--affine-noise-opacity': '0.35',
   },
 });
 
 globalStyle(`html[data-theme="dark"] ${appStyle}`, {
   vars: {
-    '--affine-noise-opacity': '0.1',
+    '--affine-noise-opacity': '1',
   },
 
   '@media': {
diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css
index 31754752b..3e9119f8a 100644
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -9,7 +9,7 @@
 }
 
 :root {
-  --noise-background: url(./noise.png);
+  --noise-background: url(./noise.avif);
 }
 
 html,
diff --git a/packages/frontend/component/src/theme/noise.avif b/packages/frontend/component/src/theme/noise.avif
new file mode 100644
index 000000000..c08002c5b
Binary files /dev/null and b/packages/frontend/component/src/theme/noise.avif differ
diff --git a/packages/frontend/component/src/theme/noise.png b/packages/frontend/component/src/theme/noise.png
deleted file mode 100644
index 1610efbf3..000000000
Binary files a/packages/frontend/component/src/theme/noise.png and /dev/null differ