diff --git a/packages/pl-fe/src/features/theme-editor/index.tsx b/packages/pl-fe/src/features/theme-editor/index.tsx
index 989dfdc4a..f9174335e 100644
--- a/packages/pl-fe/src/features/theme-editor/index.tsx
+++ b/packages/pl-fe/src/features/theme-editor/index.tsx
@@ -15,6 +15,7 @@ import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
+import { normalizeColors } from 'pl-fe/hooks/use-theme-css';
 import { plFeConfigSchema } from 'pl-fe/normalizers/pl-fe/pl-fe-config';
 import toast from 'pl-fe/toast';
 import { download } from 'pl-fe/utils/download';
@@ -50,11 +51,11 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const plFe = usePlFeConfig();
+  const plFeConfig = usePlFeConfig();
   const host = useAppSelector(state => getHost(state));
   const rawConfig = useAppSelector(state => state.plfe);
 
-  const [colors, setColors] = useState(plFe.colors);
+  const [colors, setColors] = useState(normalizeColors(plFeConfig));
   const [submitting, setSubmitting] = useState(false);
   const [resetKey, setResetKey] = useState(crypto.randomUUID());
 
@@ -85,7 +86,7 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
   };
 
   const resetTheme = () => {
-    setTheme(plFe.colors);
+    setTheme(normalizeColors(plFeConfig));
   };
 
   const updateTheme = async () => {
@@ -94,8 +95,8 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
   };
 
   const restoreDefaultTheme = () => {
-    const colors = v.parse(plFeConfigSchema, { brandColor: '#d80482' }).colors;
-    setTheme(colors);
+    const config = v.parse(plFeConfigSchema, { brandColor: '#d80482' });
+    setTheme(normalizeColors(config));
   };
 
   const exportTheme = () => {
diff --git a/packages/pl-fe/src/hooks/use-theme-css.ts b/packages/pl-fe/src/hooks/use-theme-css.ts
index a811e61e7..6037900a6 100644
--- a/packages/pl-fe/src/hooks/use-theme-css.ts
+++ b/packages/pl-fe/src/hooks/use-theme-css.ts
@@ -38,7 +38,7 @@ const DEFAULT_COLORS = {
 
 const normalizeColors = (theme: Partial<Pick<PlFeConfig, 'brandColor' | 'accentColor' | 'colors'>>) => {
   const brandColor: string = theme.brandColor || theme.colors?.primary?.['500'] || '#d80482';
-  const accentColor: string = theme.accentColor || theme.colors?.accent?.['500'] || '' || generateAccent(brandColor);
+  const accentColor: string = theme.accentColor || theme.colors?.accent?.['500'] || generateAccent(brandColor) || '';
 
   const colors = {
     ...theme.colors,
@@ -48,6 +48,7 @@ const normalizeColors = (theme: Partial<Pick<PlFeConfig, 'brandColor' | 'accentC
   const normalizedColors = toTailwind({
     brandColor,
     accentColor,
+    // @ts-ignore
     colors,
   });
 
@@ -82,4 +83,4 @@ const useThemeCss = (overwriteConfig?: PlFeConfig) => {
   }, [demo, plFeConfig, theme]);
 };
 
-export { useThemeCss };
+export { normalizeColors, useThemeCss };
diff --git a/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts b/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts
index b59abfe2d..f8190592e 100644
--- a/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts
+++ b/packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts
@@ -43,7 +43,15 @@ const plFeConfigSchema = coerceObject({
   logoDarkMode: v.fallback(v.nullable(v.string()), null),
   brandColor: v.fallback(v.string(), ''),
   accentColor: v.fallback(v.string(), ''),
-  colors: v.any(),
+  colors: v.fallback(v.nullable(v.objectWithRest(
+    {
+      'accent-blue': v.string(),
+      'gradient-end': v.string(),
+      'gradient-start': v.string(),
+      greentext: v.string(),
+    },
+    v.record(v.string(), v.string()),
+  )), null),
   copyright: v.fallback(v.string(), `♥${new Date().getFullYear()}. Copying is an act of love. Please copy and share.`),
   defaultSettings: v.fallback(v.record(v.string(), v.any()), {}),
   gdpr: v.fallback(v.boolean(), false),