diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 388290d1a0..c288622bf4 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { DxcApplicationLayout, DxcButton, DxcToastsQueue } from "@dxc-technology/halstack-react";
+import { DxcApplicationLayout, DxcLink, DxcToastsQueue } from "@dxc-technology/halstack-react";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList";
@@ -115,13 +115,9 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
             <DxcApplicationLayout.Header
               appTitle="Theme Generator"
               sideContent={
-                <Link href="/utilities/theme-generator/user-guide">
-                  <DxcButton
-                    label="Halstack Design System"
-                    icon="description"
-                    mode="secondary"
-                    size={{ height: "large", width: "fitContent" }}
-                  />
+                // Will navigate to a documentation page that will probably be open in a different tab.
+                <Link href="" legacyBehavior passHref>
+                  <DxcLink icon="description">Documentation</DxcLink>
                 </Link>
               }
             />
@@ -142,7 +138,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
       >
         <DxcApplicationLayout.Main>
           <DxcToastsQueue duration={7000}>
-            <MainContent>{componentWithLayout}</MainContent>
+            {!isThemeGenerator ? <MainContent>{componentWithLayout}</MainContent> : <>{componentWithLayout}</>}
           </DxcToastsQueue>
         </DxcApplicationLayout.Main>
       </DxcApplicationLayout>
diff --git a/apps/website/pages/theme-generator/index.tsx b/apps/website/pages/theme-generator/index.tsx
index 35283e0fcd..d5a0415ac1 100644
--- a/apps/website/pages/theme-generator/index.tsx
+++ b/apps/website/pages/theme-generator/index.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import ThemeGeneratorPage from "screens/utilities/theme-generator/ThemeGeneratorPage";
+import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage";
 
 const Index = () => {
   return (
diff --git a/apps/website/public/theme-generator-landing-bg.png b/apps/website/public/theme-generator-landing-bg.png
new file mode 100644
index 0000000000..3fe470b74b
Binary files /dev/null and b/apps/website/public/theme-generator-landing-bg.png differ
diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
new file mode 100644
index 0000000000..74fdc5c476
--- /dev/null
+++ b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx
@@ -0,0 +1,43 @@
+import { DxcLink, DxcContainer, DxcFlex, DxcHeading, DxcTypography } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+
+const ThemeGeneratorPage = () => {
+  return (
+    <>
+      <DxcContainer
+        width="100%"
+        boxSizing="border-box"
+        background={{
+          image: "url(/theme-generator-landing-bg.png)",
+          position: "0px 50%",
+          size: "cover",
+        }}
+        borderRadius="0% 0% 640px 0%"
+        height="305px"
+      >
+        <DxcFlex direction="column" fullHeight alignItems="center" justifyContent="center">
+          <DxcContainer width="80%">
+            <DxcFlex direction="column" fullHeight justifyContent="center" gap="var(--spacing-gap-ml)">
+              <DxcFlex direction="column" justifyContent="center" gap="var(--spacing-gap-m)">
+                <DxcHeading text="Welcome to Halstack Theme Generator" />
+                <DxcContainer maxWidth="60%">
+                  <DxcTypography fontSize="var(--typography-body-xl)">
+                    Create and explore your brand within Halstack. Configure your core colors, upload your logo
+                    variants, and see in real time how your theme works across components, layouts, and real product
+                    scenarios.
+                  </DxcTypography>
+                </DxcContainer>
+              </DxcFlex>
+              <Link href="" passHref legacyBehavior>
+                <DxcLink icon="arrow_forward" iconPosition="after">
+                  Start your theme
+                </DxcLink>
+              </Link>
+            </DxcFlex>
+          </DxcContainer>
+        </DxcFlex>
+      </DxcContainer>
+    </>
+  );
+};
+export default ThemeGeneratorPage;
diff --git a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx
deleted file mode 100644
index 66606ec62e..0000000000
--- a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-const ThemeGeneratorPage = () => {
-  return <></>;
-};
-export default ThemeGeneratorPage;