diff --git a/package.json b/package.json
index 01267ae2..a2e56d42 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@mui/material": "5.6.0",
     "@mui/styles": "5.6.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
-    "@rowy/form-builder": "^0.6.1",
+    "@rowy/form-builder": "^0.6.2",
     "@rowy/multiselect": "^0.4.0",
     "@tinymce/tinymce-react": "^3",
     "@uiw/react-md-editor": "^3.14.1",
diff --git a/src/assets/BrandedBackground.tsx b/src/assets/BrandedBackground.tsx
index bad4b875..480c606a 100644
--- a/src/assets/BrandedBackground.tsx
+++ b/src/assets/BrandedBackground.tsx
@@ -39,6 +39,10 @@ export default function BrandedBackground() {
             background-size: ${(480 * 10) / 14}px;
             mix-blend-mode: overlay;
           }
+
+          #root#root {
+            background-color: transparent;
+          }
         `}
     />
   );
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index db627b5a..6b020c2a 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -89,6 +89,7 @@ export const colorsLight = (
       MuiCssBaseline: {
         styleOverrides: {
           ":root": { colorScheme: "light" },
+          "#root": { backgroundColor: bgDefault.toHslString() },
           ".rdg": { colorScheme: "light" },
         },
       },
@@ -193,6 +194,7 @@ export const colorsDark = (
       MuiCssBaseline: {
         styleOverrides: {
           // ":root": { colorScheme: "dark" },
+          "#root": { backgroundColor: bgDefault.toHslString() },
           ".rdg": { colorScheme: "dark" },
         },
       },
@@ -201,7 +203,7 @@ export const colorsDark = (
           root: {
             backgroundColor: colord({ l: 0, c: 1, h }).alpha(0.6).toHslString(),
             ".MuiDialog-root:has(.MuiDialog-paperFullScreen) &": {
-              backgroundColor: "rgba(0, 0, 0, 0.25)",
+              backgroundColor: "rgba(0, 0, 0, 0)",
             },
           },
           invisible: { backgroundColor: "transparent" },
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index d38a9542..ea11c1a7 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -81,13 +81,20 @@ export const components = (theme: Theme): ThemeOptions => {
 
           body: { cursor: "default" },
 
-          "#root": {
-            "@supports selector(:has(a))": {
+          "@supports selector(:has(a))": {
+            body: {
+              transition: "background-color 0s",
+              transitionDelay: theme.transitions.duration.leavingScreen + "ms",
+            },
+
+            "#root": {
               transformOrigin: `50% ${theme.spacing(1)}`,
-              transition: theme.transitions.create(
-                ["transform", "border-radius"],
-                { duration: theme.transitions.duration.leavingScreen }
-              ),
+              transition: theme.transitions.create([
+                "transform",
+                "border-radius",
+              ]),
+              transitionDuration: `${theme.transitions.duration.leavingScreen}ms, 0s`,
+              transitionDelay: `0s, ${theme.transitions.duration.leavingScreen}ms`,
             },
           },
 
@@ -276,14 +283,9 @@ export const components = (theme: Theme): ThemeOptions => {
 
             "body:has([data-open=true] &)": {
               backgroundColor: theme.palette.common.black,
+              transitionDelay: "0s",
 
               "#root": {
-                backgroundColor:
-                  theme.palette.mode === "dark"
-                    ? colord(theme.palette.background.paper)
-                        .mix("#fff", 0.09) // Elevation 8
-                        .toHslString()
-                    : theme.palette.background.default,
                 borderRadius: (theme.shape.borderRadius as number) * 2,
                 overflow: "hidden",
 
@@ -291,10 +293,11 @@ export const components = (theme: Theme): ThemeOptions => {
                 transition: theme.transitions.create(
                   ["transform", "border-radius"],
                   {
-                    duration: theme.transitions.duration.enteringScreen,
                     easing: theme.transitions.easing.easeOut,
                   }
                 ),
+                transitionDuration: `${theme.transitions.duration.enteringScreen}ms, 0s`,
+                transitionDelay: "0s, 0s",
               },
             },
           },
diff --git a/yarn.lock b/yarn.lock
index 14f7a545..b6d9a423 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3217,10 +3217,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.6.1":
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.6.1.tgz#008d910f05c96fb4db32d95ce3c850a6145c9a7a"
-  integrity sha512-s1r4aXVNQFo/ncc9OWlQVMx9wj+ggIgAU1IdkpTBKV/7674NDMesFr8iymeDHJM/9zf9mVoPgbLmIQixrGgbeQ==
+"@rowy/form-builder@^0.6.2":
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.6.2.tgz#aa51c877525afc061f25d614e6526ff57193dd3a"
+  integrity sha512-Lr4CJk4zQpp8ae27umsuxkRf8zs6GQGGA26u/z6lFDIeM+wIr33IOsRjgx9XlNhrRHGEhfLdwX4okuQGv3MwOA==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@types/lodash-es" "^4.17.6"