diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 65455e65..a5745897 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1 +1,3 @@
 export * from './lib/Button';
+
+export * from './lib/theme';
diff --git a/packages/components/src/lib/theme.tsx b/packages/components/src/lib/theme.tsx
new file mode 100644
index 00000000..d453d9a4
--- /dev/null
+++ b/packages/components/src/lib/theme.tsx
@@ -0,0 +1,39 @@
+import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
+import type { PaletteRange } from '@mui/joy/styles';
+
+declare module '@mui/joy/styles' {
+  interface ColorPalettePropOverrides {
+    // apply to all Joy UI components that support `color` prop
+    brand: true;
+  }
+
+  interface Palette {
+    // this will make the node `secondary` configurable in `extendTheme`
+    // and add `secondary` to the theme's palette.
+    brand: {
+      blue: string;
+      lightBlue: string;
+    };
+  }
+}
+export const prendaTheme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        brand: {
+          blue: '#0A4872',
+          lightBlue: '#D7F3FF',
+        },
+      },
+    },
+  },
+  fontFamily: {
+    body: '"Poppins", sans-serif',
+  },
+});
+
+export const ThemeProvider = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => <CssVarsProvider theme={prendaTheme}>{children}</CssVarsProvider>;