diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 090e0d43c..2d5db6f0d 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@mantine/core";
+import { createTheme, Modal } from "@mantine/core";
 
 import { primaryColor } from "./theme/colors/primary";
 import { secondaryColor } from "./theme/colors/secondary";
@@ -10,13 +10,13 @@ export const theme = createTheme({
   },
   primaryColor: "primaryColor",
   components: {
-    Modal: {
-      vars: (_theme: unknown, props: { size?: string }) => {
+    Modal: Modal.extend({
+      vars: (_theme, props) => {
         if (props.size === "xxl") {
           return { root: { "--modal-size": "75rem" } };
         }
         return { root: {} };
       },
-    },
+    }),
   },
 });