diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx
index 219017a80..126a89b71 100644
--- a/frontend/src/App/ThemeProvider.tsx
+++ b/frontend/src/App/ThemeProvider.tsx
@@ -1,9 +1,10 @@
-import "@mantine/core/styles.css";
-import "@mantine/notifications/styles.css";
-import { createTheme, MantineProvider } from "@mantine/core";
+import { ActionIcon, Button, createTheme, MantineProvider } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
-import styleVars from "@/_variables.module.scss";
+import "@mantine/core/styles.layer.css";
+import "@mantine/notifications/styles.layer.css";
+import styleVars from "@/assets/_variables.module.scss";
+import buttonClasses from "@/assets/button.module.scss";
 
 const themeProvider = createTheme({
   fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
@@ -22,6 +23,11 @@ const themeProvider = createTheme({
     ],
   },
   primaryColor: "brand",
+  components: {
+    Button: Button.extend({
+      classNames: buttonClasses,
+    }),
+  },
 });
 
 const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
diff --git a/frontend/src/App/index.tsx b/frontend/src/App/index.tsx
index e84b8d356..1b27734f4 100644
--- a/frontend/src/App/index.tsx
+++ b/frontend/src/App/index.tsx
@@ -12,7 +12,7 @@ import { showNotification } from "@mantine/notifications";
 import { FunctionComponent, useEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import AppHeader from "./Header";
-import styleVars from "@/_variables.module.scss";
+import styleVars from "@/assets/_variables.module.scss";
 
 const App: FunctionComponent = () => {
   const navigate = useNavigate();
diff --git a/frontend/src/_bazarr.scss b/frontend/src/assets/_bazarr.scss
similarity index 90%
rename from frontend/src/_bazarr.scss
rename to frontend/src/assets/_bazarr.scss
index 7b242259f..4a73a62aa 100644
--- a/frontend/src/_bazarr.scss
+++ b/frontend/src/assets/_bazarr.scss
@@ -36,9 +36,3 @@ $header-height: 64px;
     }
   }
 }
-
-button {
-  @include dark {
-    color: $color-brand-0 !important;
-  }
-}
diff --git a/frontend/src/_mantine.scss b/frontend/src/assets/_mantine.scss
similarity index 100%
rename from frontend/src/_mantine.scss
rename to frontend/src/assets/_mantine.scss
diff --git a/frontend/src/_variables.module.scss b/frontend/src/assets/_variables.module.scss
similarity index 100%
rename from frontend/src/_variables.module.scss
rename to frontend/src/assets/_variables.module.scss
diff --git a/frontend/src/assets/button.module.scss b/frontend/src/assets/button.module.scss
new file mode 100644
index 000000000..c2d9243a9
--- /dev/null
+++ b/frontend/src/assets/button.module.scss
@@ -0,0 +1,6 @@
+.root {
+  &[data-variant='danger'] {
+    background-color: var(--mantine-color-red-9);
+    color: var(--mantine-color-red-0);
+  }
+}
diff --git a/frontend/src/pages/Settings/components/index.tsx b/frontend/src/pages/Settings/components/index.tsx
index 99d1658bc..6ac9cb86c 100644
--- a/frontend/src/pages/Settings/components/index.tsx
+++ b/frontend/src/pages/Settings/components/index.tsx
@@ -56,7 +56,7 @@ export const URLTestButton: FunctionComponent<{
   }, [address, port, url, apikey, ssl]);
 
   return (
-    <Button onClick={click} color={color} title={title}>
+    <Button autoContrast onClick={click} variant={color} title={title}>
       {title}
     </Button>
   );
@@ -107,7 +107,7 @@ export const ProviderTestButton: FunctionComponent<{
   }, [testUrl]);
 
   return (
-    <Button onClick={click} color={color} title={title}>
+    <Button onClick={click} variant={color} title={title}>
       {title}
     </Button>
   );
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 4775ec2c8..e11fa90b3 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -35,8 +35,8 @@ export default defineConfig(async ({ mode, command }) => {
       preprocessorOptions: {
         scss: {
           additionalData: `
-            @import "./src/_mantine";
-            @import "./src/_bazarr";
+            @import "./src/assets/_mantine";
+            @import "./src/assets/_bazarr";
           `,
         },
       },