diff --git a/apps/app/src/pages/layout/navigation.tsx b/apps/app/src/pages/layout/navigation.tsx
index af7990e19a..ca102861f2 100644
--- a/apps/app/src/pages/layout/navigation.tsx
+++ b/apps/app/src/pages/layout/navigation.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Outlet } from "react-router-dom";
 import { HvProvider, useTheme } from "@hitachivantara/uikit-react-core";
 
@@ -24,6 +25,13 @@ const Navigation = () => {
     setCurrentStep,
   } = useGeneratorContext();
 
+  // Hack to update the charts theme
+  const theme = useMemo(() => {
+    const cusTheme = structuredClone(customTheme);
+    cusTheme.name = Math.random().toString();
+    return cusTheme;
+  }, [customTheme]);
+
   return (
     <div
       id="gen-root"
@@ -33,7 +41,7 @@ const Navigation = () => {
         classNameKey="gen-root"
         rootElementId="gen-root"
         cssTheme="scoped"
-        themes={[customTheme]}
+        themes={[theme]}
         colorMode={selectedMode}
         cssBaseline="none" // the main provider already applies the baseline styles globally
       >