diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx
index 1e464b841..219017a80 100644
--- a/frontend/src/App/ThemeProvider.tsx
+++ b/frontend/src/App/ThemeProvider.tsx
@@ -3,21 +3,22 @@ import "@mantine/notifications/styles.css";
 import { createTheme, MantineProvider } from "@mantine/core";
 import { FunctionComponent, PropsWithChildren } from "react";
 import ThemeLoader from "@/App/ThemeLoader";
+import styleVars from "@/_variables.module.scss";
 
 const themeProvider = createTheme({
   fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
   colors: {
     brand: [
-      "#F8F0FC",
-      "#F3D9FA",
-      "#EEBEFA",
-      "#E599F7",
-      "#DA77F2",
-      "#CC5DE8",
-      "#BE4BDB",
-      "#AE3EC9",
-      "#9C36B5",
-      "#862E9C",
+      styleVars.colorBrand0,
+      styleVars.colorBrand1,
+      styleVars.colorBrand2,
+      styleVars.colorBrand3,
+      styleVars.colorBrand4,
+      styleVars.colorBrand5,
+      styleVars.colorBrand6,
+      styleVars.colorBrand7,
+      styleVars.colorBrand8,
+      styleVars.colorBrand9,
     ],
   },
   primaryColor: "brand",
diff --git a/frontend/src/App/index.tsx b/frontend/src/App/index.tsx
index c652cb411..e84b8d356 100644
--- a/frontend/src/App/index.tsx
+++ b/frontend/src/App/index.tsx
@@ -1,7 +1,6 @@
 import AppNavbar from "@/App/Navbar";
 import { RouterNames } from "@/Router/RouterNames";
 import ErrorBoundary from "@/components/ErrorBoundary";
-import { Layout } from "@/constants";
 import NavbarProvider from "@/contexts/Navbar";
 import OnlineProvider from "@/contexts/Online";
 import { notification } from "@/modules/task";
@@ -13,6 +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";
 
 const App: FunctionComponent = () => {
   const navigate = useNavigate();
@@ -56,11 +56,11 @@ const App: FunctionComponent = () => {
         <OnlineProvider value={{ online, setOnline }}>
           <AppShell
             navbar={{
-              width: Layout.NAVBAR_WIDTH,
-              breakpoint: Layout.MOBILE_BREAKPOINT,
+              width: styleVars.navBarWidth,
+              breakpoint: "sm",
               collapsed: { mobile: !navbar },
             }}
-            header={{ height: { base: Layout.HEADER_HEIGHT } }}
+            header={{ height: { base: styleVars.headerHeight } }}
             padding={0}
           >
             <AppHeader></AppHeader>
diff --git a/frontend/src/_variables.module.scss b/frontend/src/_variables.module.scss
new file mode 100644
index 000000000..262d285b2
--- /dev/null
+++ b/frontend/src/_variables.module.scss
@@ -0,0 +1,18 @@
+$navbar-width: 200;
+
+:export {
+  colorBrand0: $color-brand-0;
+  colorBrand1: $color-brand-1;
+  colorBrand2: $color-brand-2;
+  colorBrand3: $color-brand-3;
+  colorBrand4: $color-brand-4;
+  colorBrand5: $color-brand-5;
+  colorBrand6: $color-brand-6;
+  colorBrand7: $color-brand-7;
+  colorBrand8: $color-brand-8;
+  colorBrand9: $color-brand-9;
+
+  headerHeight: $header-height;
+
+  navBarWidth: $navbar-width;
+}
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index aeb9b9afe..6320fa4f3 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -1,7 +1 @@
 export const GithubRepoRoot = "https://github.com/morpheus65535/bazarr";
-
-export const Layout = {
-  NAVBAR_WIDTH: 200,
-  HEADER_HEIGHT: 64,
-  MOBILE_BREAKPOINT: "sm",
-};