diff --git a/src/components/StatCard.tsx b/src/components/StatCard.tsx
index a4efd285..c453ed7e 100644
--- a/src/components/StatCard.tsx
+++ b/src/components/StatCard.tsx
@@ -3,7 +3,7 @@ import { ArrowDownRight, ArrowUpRight } from 'react-feather';
 
 const useStyles = createStyles((theme) => ({
   root: {
-    padding: theme.spacing.xl * 1.5,
+    padding: `calc(${theme.spacing.xl} * 1.5)`,
   },
 
   value: {
diff --git a/src/components/Theming.tsx b/src/components/Theming.tsx
index b99f63a7..6f12236d 100644
--- a/src/components/Theming.tsx
+++ b/src/components/Theming.tsx
@@ -112,8 +112,10 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
           },
           LoadingOverlay: {
             defaultProps: {
-              overlayBlur: 3,
-              overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+              overlayProps: {
+                blur: 3,
+                color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+              },
             },
           },
           Loader: {
diff --git a/src/components/pages/Files/FilePagation.tsx b/src/components/pages/Files/FilePagation.tsx
index 5f0bea87..4defde57 100644
--- a/src/components/pages/Files/FilePagation.tsx
+++ b/src/components/pages/Files/FilePagation.tsx
@@ -96,7 +96,7 @@ export default function FilePagation({ disableMediaPreview, exifEnabled, queryPa
           }}
         >
           {!isMobile && <div></div>}
-          <Pagination total={numPages} page={page} onChange={setPage} withEdges />
+          <Pagination total={numPages} value={page} onChange={setPage} withEdges />
           {!isMobile && (
             <Checkbox
               label='Show non-media files'
diff --git a/src/components/pages/Files/index.tsx b/src/components/pages/Files/index.tsx
index d164d56a..b7e87aea 100644
--- a/src/components/pages/Files/index.tsx
+++ b/src/components/pages/Files/index.tsx
@@ -64,7 +64,7 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage }) {
                   paddingBottom: 3,
                 }}
               >
-                <Pagination total={favoriteNumPages} page={favoritePage} onChange={setFavoritePage} />
+                <Pagination total={favoriteNumPages} value={favoritePage} onChange={setFavoritePage} />
               </Box>
             </Accordion.Panel>
           </Accordion.Item>
diff --git a/src/components/pages/Invites.tsx b/src/components/pages/Invites.tsx
index c61bae1e..579be7a3 100644
--- a/src/components/pages/Invites.tsx
+++ b/src/components/pages/Invites.tsx
@@ -132,7 +132,7 @@ export default function Invites() {
     modals.openConfirmModal({
       title: `Delete ${invite.code}?`,
       centered: true,
-      overlayBlur: 3,
+      overlayProps: { blur: 3 },
       labels: { confirm: 'Yes', cancel: 'No' },
       onConfirm: async () => {
         const res = await useFetch(`/api/auth/invite?code=${invite.code}`, 'DELETE');
diff --git a/src/components/pages/Users/index.tsx b/src/components/pages/Users/index.tsx
index 563b718b..e6390c3e 100644
--- a/src/components/pages/Users/index.tsx
+++ b/src/components/pages/Users/index.tsx
@@ -55,7 +55,7 @@ export default function Users() {
           title: `Delete ${user.username}'s files?`,
           labels: { confirm: 'Yes', cancel: 'No' },
           centered: true,
-          overlayBlur: 3,
+          overlayProps: { blur: 3 },
           onConfirm: () => {
             handleDelete(user, true);
             modals.closeAll();
diff --git a/src/pages/view/[id].tsx b/src/pages/view/[id].tsx
index a586dbda..9b9d870a 100644
--- a/src/pages/view/[id].tsx
+++ b/src/pages/view/[id].tsx
@@ -129,7 +129,7 @@ export default function EmbeddedFile({
         withCloseButton={true}
         closeOnEscape={false}
         closeOnClickOutside={false}
-        overlayBlur={3}
+        overlayProps={{ blur: 3 }}
       >
         <PasswordInput
           label='Password'