diff --git a/utils/theme-style-generator.ts b/utils/theme-style-generator.ts
index 7e4c20bb..1366916b 100644
--- a/utils/theme-style-generator.ts
+++ b/utils/theme-style-generator.ts
@@ -10,7 +10,7 @@ type ThemeMode = "light" | "dark";
 const generateColorVariables = (
   themeStyles: ThemeStyles,
   mode: ThemeMode,
-  formatColor: (color: string) => string
+  formatColor: (color: string) => string,
 ): string => {
   const styles = themeStyles[mode];
   return `
@@ -38,7 +38,7 @@ const generateColorVariables = (
   --chart-3: ${formatColor(styles["chart-3"])};
   --chart-4: ${formatColor(styles["chart-4"])};
   --chart-5: ${formatColor(styles["chart-5"])};
-  --sidebar: ${formatColor(styles.sidebar)};
+  --sidebar: ${formatColor(styles["sidebar"])};
   --sidebar-foreground: ${formatColor(styles["sidebar-foreground"])};
   --sidebar-primary: ${formatColor(styles["sidebar-primary"])};
   --sidebar-primary-foreground: ${formatColor(styles["sidebar-primary-foreground"])};
@@ -86,7 +86,7 @@ const generateTrackingVariables = (themeStyles: ThemeStyles): string => {
 const generateThemeVariables = (
   themeStyles: ThemeStyles,
   mode: ThemeMode,
-  formatColor: (color: string) => string
+  formatColor: (color: string) => string,
 ): string => {
   const selector = mode === "dark" ? ".dark" : ":root";
   const colorVars = generateColorVariables(themeStyles, mode, formatColor);
@@ -145,7 +145,7 @@ const generateTailwindV4ThemeInline = (themeStyles: ThemeStyles): string => {
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
+  --color-sidebar-background: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
@@ -174,6 +174,19 @@ const generateTailwindV4ThemeInline = (themeStyles: ThemeStyles): string => {
 }`;
 };
 
+export function changeThemeObjKeyName(
+  cssVars: string,
+  oldKey: string,
+  newKey: string,
+) {
+  console.log("calling")
+  const escapedOldKey = oldKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 
+  console.log("calling",escapedOldKey)  
+  const regex = new RegExp(`(${escapedOldKey}):`, 'g');
+  console.log("calling",regex)  
+  console.log("")
+  return cssVars.replace(regex, `${newKey}:`);
+}
 export const generateThemeCode = (
   themeEditorState: ThemeEditorState,
   colorFormat: ColorFormat = "hsl",
@@ -190,11 +203,15 @@ export const generateThemeCode = (
   const themeStyles = themeEditorState.styles as ThemeStyles;
   const formatColor = (color: string) => colorFormatter(color, colorFormat, tailwindVersion);
 
-  const lightTheme = generateThemeVariables(themeStyles, "light", formatColor);
-  const darkTheme = generateThemeVariables(themeStyles, "dark", formatColor);
+  let lightTheme = generateThemeVariables(themeStyles, "light", formatColor);
+  let darkTheme = generateThemeVariables(themeStyles, "dark", formatColor);
   const tailwindV4Theme =
     tailwindVersion === "4" ? `\n\n${generateTailwindV4ThemeInline(themeStyles)}` : "";
 
+  if(tailwindVersion === "4") {
+    lightTheme = changeThemeObjKeyName(lightTheme,"--sidebar","--sidebar-background");
+    darkTheme = changeThemeObjKeyName(darkTheme,"--sidebar","--sidebar-background");
+  }
   const bodyLetterSpacing =
     themeStyles["light"]["letter-spacing"] !== "0em"
       ? "\n\nbody {\n  letter-spacing: var(--tracking-normal);\n}"