diff --git a/with-mantine/package.json b/with-mantine/package.json
index f2627a06..536fe999 100644
--- a/with-mantine/package.json
+++ b/with-mantine/package.json
@@ -6,7 +6,8 @@
   "author": "Plasmo Corp. <foss@plasmo.com>",
   "contributors": [
     "crashmax-dev",
-    "louisgv"
+    "louisgv",
+    "HappyGentle"
   ],
   "scripts": {
     "dev": "plasmo dev",
@@ -14,7 +15,6 @@
     "package": "plasmo package"
   },
   "dependencies": {
-    "@emotion/react": "11.11.3",
     "@mantine/core": "7.4.2",
     "@mantine/hooks": "7.4.2",
     "plasmo": "workspace:*",
@@ -28,6 +28,9 @@
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
+    "postcss": "8.4.33",
+    "postcss-preset-mantine": "1.12.3",
+    "postcss-simple-vars": "7.0.1",
     "prettier": "3.2.4",
     "typescript": "5.3.3"
   },
diff --git a/with-mantine/postcss.config.cjs b/with-mantine/postcss.config.cjs
new file mode 100644
index 00000000..6b754e90
--- /dev/null
+++ b/with-mantine/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em"
+      }
+    }
+  }
+}