diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
index 0f135b202..5460b5dc7 100644
--- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
+++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
@@ -2,12 +2,12 @@ import { useMemo, useRef, useState } from "react";
 import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react";
 import StepHeading from "./components/StepHeading";
 import BottomButtons from "./components/BottomButtons";
-import ThemeGeneratorPreviewPage from "./ThemeGeneratorPreviewPage";
-import { BrandingDetails } from "./steps/BrandingDetails";
+import BrandingDetails from "./steps/BrandingDetails";
 import { generateTokens, handleExport } from "./utils";
 import { Colors, FileData, Step } from "./types";
 import ReviewDetails from "./steps/ReviewDetails";
 import Tour from "./components/Tour/Tour";
+import PreviewScreen from "./steps/PreviewScreen";
 
 const steps = [
   {
@@ -104,7 +104,7 @@ const ThemeGeneratorConfigPage = () => {
       case 0:
         return <BrandingDetails colors={colors} onColorsChange={setColors} logos={logos} onLogosChange={setLogos} />;
       case 1:
-        return <ThemeGeneratorPreviewPage tokens={tokens} logos={logos} showDefaultComponents={tourStepIndex === 2} />;
+        return <PreviewScreen tokens={tokens} logos={logos} showDefaultComponents={tourStepIndex === 2} />;
       case 2:
         return <ReviewDetails tokens={tokens} logos={logos} themeJson={themeJson} />;
     }
diff --git a/apps/website/screens/theme-generator/steps/BrandingDetails.tsx b/apps/website/screens/theme-generator/steps/BrandingDetails.tsx
index d3fb5bca5..9593bb6f8 100644
--- a/apps/website/screens/theme-generator/steps/BrandingDetails.tsx
+++ b/apps/website/screens/theme-generator/steps/BrandingDetails.tsx
@@ -45,7 +45,7 @@ const brandingDetails = {
   ],
 };
 
-export const BrandingDetails = ({
+const BrandingDetails = ({
   colors,
   onColorsChange,
   logos,
@@ -92,3 +92,5 @@ export const BrandingDetails = ({
     </DxcContainer>
   );
 };
+
+export default BrandingDetails;
diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx b/apps/website/screens/theme-generator/steps/PreviewScreen.tsx
similarity index 97%
rename from apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx
rename to apps/website/screens/theme-generator/steps/PreviewScreen.tsx
index cbf9fa3e0..28ff4e6c0 100644
--- a/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx
+++ b/apps/website/screens/theme-generator/steps/PreviewScreen.tsx
@@ -8,10 +8,10 @@ import {
   HalstackProvider,
 } from "@dxc-technology/halstack-react";
 import { ReactNode, SVGProps, useMemo, useState, useEffect } from "react";
-import componentsList from "../common/componentsList.json";
+import componentsList from "../../common/componentsList.json";
 import { componentsRegistry, examplesRegistry } from "screens/theme-generator/componentsRegistry";
 import styled from "@emotion/styled";
-import { ComponentItem, Logos } from "./types";
+import { ComponentItem, Logos } from "../types";
 
 // TODO: Both of these types should be exported by @dxc-technology/halstack-react when they are available
 type SVG = ReactNode & SVGProps<SVGSVGElement>;
@@ -109,7 +109,7 @@ const mapToSelectGroups = (data: ComponentItem[]) => {
   }));
 };
 
-const ThemeGeneratorPreviewPage = ({
+const PreviewScreen = ({
   tokens,
   logos,
   showDefaultComponents,
@@ -124,7 +124,7 @@ const ThemeGeneratorPreviewPage = ({
   const [selectedExample, setSelectedExample] = useState<string>("");
 
   const componentOptions = useMemo(() => {
-    return mapToSelectGroups(componentsList as ComponentItem[]);
+    return mapToSelectGroups(componentsList);
   }, []);
 
   // Set default components when requested and clear on cleanup
@@ -297,4 +297,4 @@ const PreviewAreaContainer = styled.div`
   overflow: auto;
 `;
 
-export default ThemeGeneratorPreviewPage;
+export default PreviewScreen;