diff --git a/next.config.mjs b/next.config.mjs
index 50b8398..7f94040 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,19 +1,16 @@
+import { createTheme } from "@mui/material";
 import { withPigment } from "@pigment-css/nextjs-plugin";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 export default withPigment(nextConfig, {
-  theme: {
-    colors: {
-      primary: "tomato",
-      secondary: "cyan",
-    },
-    spacing: {
-      unit: 8,
-    },
+  transformLibraries: ["@mui/material"],
+  theme: createTheme({
+    palette: { primary: { main: "#ff6347" } },
+    spacing: 8,
     typography: {
       fontFamily: "sans-serif",
     },
-  },
+  }),
 });
diff --git a/package-lock.json b/package-lock.json
index 55e43a4..bb99b54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@mui/material": "^6.1.1",
-        "@pigment-css/react": "^0.0.23",
+        "@mui/material-pigment-css": "^6.1.1",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18"
@@ -799,6 +799,23 @@
         }
       }
     },
+    "node_modules/@mui/material-pigment-css": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/material-pigment-css/-/material-pigment-css-6.1.1.tgz",
+      "integrity": "sha512-BfFGa5aWZygKC+wWaL0BPxwQyRelDuV6L5VW73zOdZJwpN2zzCiuosFpTX/JazH1TQC7BYaPN0XIggsOWBnQcw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/system": "6.1.1",
+        "@pigment-css/react": "0.0.23"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/package.json b/package.json
index 43d13c1..db97758 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@mui/material": "^6.1.1",
-    "@pigment-css/react": "^0.0.23",
+    "@mui/material-pigment-css": "^6.1.1",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 00b4ad8..54cf2bd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import "@pigment-css/react/styles.css";
+import "@mui/material-pigment-css/styles.css";
 
 const RootLayout = async ({
   children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a427312..e1d4326 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@mui/material";
-import { styled } from "@pigment-css/react";
+import { styled } from "@mui/material-pigment-css";
 
 const Heading = styled("h1")(({ theme }) => ({
-  color: theme.colors.primary,
-  fontSize: theme.spacing.unit * 4,
+  color: theme.palette.primary.main,
+  fontSize: theme.spacing(4),
   fontFamily: theme.typography.fontFamily,
 }));