diff --git a/package.json b/package.json
index 49f0b7b82..0230cf27e 100644
--- a/package.json
+++ b/package.json
@@ -155,7 +155,9 @@
       "^[./]"
     ],
     "importOrderSeparation": true,
-    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports"
+    ],
     "importOrderSortSpecifiers": true
   },
   "eslintConfig": {
@@ -217,4 +219,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/config/provider.tsx b/src/config/provider.tsx
index 1d6803b17..6d2228373 100644
--- a/src/config/provider.tsx
+++ b/src/config/provider.tsx
@@ -21,8 +21,9 @@ const ConfigContext = createContext<ConfigContextType>({
   setConfigName: () => {},
 });
 
-export const ConfigProvider = ({ children }: { children: ReactNode }) => {
-  const [configName, setConfigName] = useState<string>();
+export const ConfigProvider = ({ children, config: fallbackConfig, configName: initialConfigName }: { children: ReactNode, config?: ConfigType, configName?: string }) => {
+  console.log(initialConfigName);
+  const [configName, setConfigName] = useState<string>(initialConfigName || 'default');
   const [configVersion, setConfigVersion] = useState(0);
   const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
   const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();
@@ -39,7 +40,7 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
     <ConfigContext.Provider
       value={{
         name: configName,
-        config: currentConfig,
+        config: currentConfig ?? fallbackConfig,
         configVersion,
         increaseVersion: () => setConfigVersion((v) => v + 1),
         setConfigName: (name: string) => setConfigName(name),
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 37ed1a412..88d63c532 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -35,6 +35,7 @@ import {
   getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
+import { ConfigType } from '~/types/config';
 
 function App(
   this: any,
@@ -43,13 +44,15 @@ function App(
     packageAttributes: ServerSidePackageAttributesType;
     editModeEnabled: boolean;
     defaultColorScheme: ColorScheme;
+    config?: ConfigType;
+    configName?: string;
   }>
 ) {
   const { Component, pageProps } = props;
 
-  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
-  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
-  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.primary || 'red');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.secondary || 'orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(props.pageProps.config?.settings.customization.colors.shade || 6);
   const colorTheme = {
     primaryColor,
     secondaryColor,
@@ -123,7 +126,7 @@ function App(
               withGlobalStyles
               withNormalizeCSS
             >
-              <ConfigProvider>
+              <ConfigProvider {...props.pageProps}>
                 <Notifications limit={4} position="bottom-left" />
                 <ModalsProvider
                   modals={{