diff --git a/README.md b/README.md
index 6526118a6db..8d5ca6cbfb4 100644
--- a/README.md
+++ b/README.md
@@ -39,11 +39,11 @@ Toolpad Studio is in its beta stages of development. Feel free to run this appli
 Run:
 
 ```bash
-npx create-toolpad-app@latest my-toolpad-studio-app
+npx create-toolpad-app@latest --studio my-toolpad-studio-app
 # or
-yarn create toolpad-app my-toolpad-studio-app
+yarn create toolpad-app --studio my-toolpad-studio-app
 # or
-pnpm create toolpad-app my-toolpad-studio-app
+pnpm create toolpad-app --studio my-toolpad-studio-app
 ```
 
 ## Documentation
diff --git a/RELEASE.md b/RELEASE.md
index 6579bdb3a15..6dad2b4460b 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -65,11 +65,22 @@
 
 1. Smoke test the release with the [CodeSandbox CI](https://ci.codesandbox.io/status/mui/mui-toolpad) package of the PR branch:
 
-   1. Run
+   a. Run Toolpad Core
 
    ```bash
    npx https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/create-toolpad-app smoke --use-pnpm
    cd smoke
+   pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/@toolpad/core -S
+   pnpm dedupe && pnpm dev
+   ```
+
+   And verify the app runs
+
+   b. Run Toolpad Studio
+
+   ```bash
+   npx https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/create-toolpad-app --studio smoke --use-pnpm
+   cd smoke
    pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/@toolpad/studio -S
    pnpm dedupe && pnpm dev
    ```
diff --git a/docs/data/toolpad/core/introduction/installation.md b/docs/data/toolpad/core/introduction/installation.md
index ddacfa79dde..6b93e49fbd2 100644
--- a/docs/data/toolpad/core/introduction/installation.md
+++ b/docs/data/toolpad/core/introduction/installation.md
@@ -13,15 +13,15 @@ title: Toolpad Core - Installation
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npx create-toolpad-app@latest --core
+npx create-toolpad-app@latest
 ```
 
 ```bash pnpm
-pnpm create toolpad-app --core
+pnpm create toolpad-app
 ```
 
 ```bash yarn
-yarn create toolpad-app --core
+yarn create toolpad-app
 ```
 
 </codeblock>
diff --git a/docs/data/toolpad/studio/getting-started/first-app.md b/docs/data/toolpad/studio/getting-started/first-app.md
index 7bdb2a306a2..7eacaa0c07e 100644
--- a/docs/data/toolpad/studio/getting-started/first-app.md
+++ b/docs/data/toolpad/studio/getting-started/first-app.md
@@ -26,7 +26,7 @@ Make sure to [install Node.js](https://nodejs.org/en) on your system.
 1. Create a new application
 
    ```bash
-   npx create-toolpad-app@latest dog-app
+   npx create-toolpad-app@latest --studio dog-app
    ```
 
 1. Start the development server
diff --git a/docs/data/toolpad/studio/getting-started/installation.md b/docs/data/toolpad/studio/getting-started/installation.md
index 572b2dd0d60..c177d3ff2f5 100644
--- a/docs/data/toolpad/studio/getting-started/installation.md
+++ b/docs/data/toolpad/studio/getting-started/installation.md
@@ -10,15 +10,15 @@ Then run the command:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npx create-toolpad-app@latest my-toolpad-app
+npx create-toolpad-app@latest --studio my-toolpad-app
 ```
 
 ```bash yarn
-yarn create toolpad-app my-toolpad-app
+yarn create toolpad-app --studio my-toolpad-app
 ```
 
 ```bash pnpm
-pnpm create toolpad-app my-toolpad-app
+pnpm create toolpad-app --studio my-toolpad-app
 ```
 
 </codeblock>
diff --git a/docs/pages/toolpad/core/index.js b/docs/pages/toolpad/core/index.js
deleted file mode 100644
index 8fe382a2f63..00000000000
--- a/docs/pages/toolpad/core/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
-import Divider from '@mui/material/Divider';
-import CssBaseline from '@mui/material/CssBaseline';
-import AppHeader from 'docs/src/layouts/AppHeader';
-import AppFooter from 'docs/src/layouts/AppFooter';
-import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
-import Examples from '../../../src/components/landing-core/Examples';
-import Hero from '../../../src/components/landing-core/Hero';
-import Features from '../../../src/components/landing-core/Features';
-import BuiltWith from '../../../src/components/landing-core/BuiltWith';
-import StudioIntro from '../../../src/components/landing-core/StudioIntro';
-
-export default function Home() {
-  return (
-    <BrandingCssVarsProvider>
-      <CssBaseline />
-      <AppHeaderBanner />
-      <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
-      <main id="main-content">
-        <Hero />
-        <Features />
-        <Divider />
-        <BuiltWith />
-        <Divider />
-        <Examples />
-        <StudioIntro />
-      </main>
-      <AppFooter />
-    </BrandingCssVarsProvider>
-  );
-}
diff --git a/docs/pages/toolpad/index.js b/docs/pages/toolpad/index.js
index 4e033d9f808..e7878c2d4e8 100644
--- a/docs/pages/toolpad/index.js
+++ b/docs/pages/toolpad/index.js
@@ -1,64 +1,30 @@
 import * as React from 'react';
-import NoSsr from '@mui/material/NoSsr';
-import Head from 'docs/src/modules/components/Head';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import Divider from '@mui/material/Divider';
+import CssBaseline from '@mui/material/CssBaseline';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import Examples from '../../src/components/landing/Examples';
 import Hero from '../../src/components/landing/Hero';
-import HeroVideo from '../../src/components/landing/HeroVideo';
-import SignUpToast from '../../src/components/landing/SignUpToast';
-import UseCases from '../../src/components/landing/UseCases';
-import CardGrid from '../../src/components/landing/CardGrid';
-import Pricing from '../../src/components/landing/PricingTable';
-import Marquee from '../../src/components/landing/Marquee';
-import features from '../../data/toolpad/studio/landing/features';
-import useCases from '../../data/toolpad/studio/landing/useCases';
-import marquee from '../../data/toolpad/studio/landing/marquee';
-import {
-  Headline,
-  plans,
-  planInfo,
-  rowHeaders,
-  communityData,
-  commercialData,
-} from '../../data/toolpad/studio/landing/pricing';
+import Features from '../../src/components/landing/Features';
+import BuiltWith from '../../src/components/landing/BuiltWith';
+import StudioIntro from '../../src/components/landing/StudioIntro';
 
 export default function Home() {
   return (
     <BrandingCssVarsProvider>
-      <Head
-        title="Toolpad: Low-code admin builder"
-        description="Build apps with Material UI components, connect to data sources, APIs and build your internal tools 10x faster. Open-source and powered by MUI."
-        card="/static/toolpad/marketing/toolpad-og.jpg"
-      />
-      <NoSsr>
-        <SignUpToast />
-      </NoSsr>
       <CssBaseline />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
       <main id="main-content">
         <Hero />
-        <HeroVideo />
-        <Divider />
-        <UseCases content={useCases} />
-        <Divider />
-        <CardGrid content={features} />
-        <Divider />
-        <Pricing
-          Headline={Headline}
-          plans={plans}
-          planInfo={planInfo}
-          rowHeaders={rowHeaders}
-          commercialData={commercialData}
-          communityData={communityData}
-        />
+        <Features />
         <Divider />
-        <Marquee content={marquee} />
+        <BuiltWith />
         <Divider />
+        <Examples />
+        <StudioIntro />
       </main>
       <AppFooter />
     </BrandingCssVarsProvider>
diff --git a/docs/pages/toolpad/studio/index.js b/docs/pages/toolpad/studio/index.js
new file mode 100644
index 00000000000..066518fbed9
--- /dev/null
+++ b/docs/pages/toolpad/studio/index.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Head from 'docs/src/modules/components/Head';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import Hero from '../../../src/components/landing-studio/Hero';
+import HeroVideo from '../../../src/components/landing-studio/HeroVideo';
+import SignUpToast from '../../../src/components/landing-studio/SignUpToast';
+import UseCases from '../../../src/components/landing-studio/UseCases';
+import CardGrid from '../../../src/components/landing-studio/CardGrid';
+import Pricing from '../../../src/components/landing-studio/PricingTable';
+import Marquee from '../../../src/components/landing-studio/Marquee';
+import features from '../../../data/toolpad/studio/landing/features';
+import useCases from '../../../data/toolpad/studio/landing/useCases';
+import marquee from '../../../data/toolpad/studio/landing/marquee';
+import {
+  Headline,
+  plans,
+  planInfo,
+  rowHeaders,
+  communityData,
+  commercialData,
+} from '../../../data/toolpad/studio/landing/pricing';
+
+export default function Home() {
+  return (
+    <BrandingCssVarsProvider>
+      <Head
+        title="Toolpad: Low-code admin builder"
+        description="Build apps with Material UI components, connect to data sources, APIs and build your internal tools 10x faster. Open-source and powered by MUI."
+        card="/static/toolpad/marketing/toolpad-og.jpg"
+      />
+      <NoSsr>
+        <SignUpToast />
+      </NoSsr>
+      <CssBaseline />
+      <AppHeaderBanner />
+      <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
+      <main id="main-content">
+        <Hero />
+        <HeroVideo />
+        <Divider />
+        <UseCases content={useCases} />
+        <Divider />
+        <CardGrid content={features} />
+        <Divider />
+        <Pricing
+          Headline={Headline}
+          plans={plans}
+          planInfo={planInfo}
+          rowHeaders={rowHeaders}
+          commercialData={commercialData}
+          communityData={communityData}
+        />
+        <Divider />
+        <Marquee content={marquee} />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/src/components/landing-core/Hero.js b/docs/src/components/landing-core/Hero.js
deleted file mode 100644
index b4bf19608c4..00000000000
--- a/docs/src/components/landing-core/Hero.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import IconImage from 'docs/src/components/icon/IconImage';
-import Box from '@mui/material/Box';
-import GradientText from 'docs/src/components/typography/GradientText';
-import { Container } from '@mui/material';
-import GetStartedButtons from './GetStartedButtons';
-
-export default function Hero() {
-  return (
-    <Container
-      sx={{
-        py: { xs: 4, sm: 8 },
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'flex-start',
-          alignItems: 'center',
-          padding: 4,
-        }}
-      >
-        <Typography
-          fontWeight="bold"
-          variant="body2"
-          sx={[
-            (theme) => ({
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              color: (theme.vars || theme).palette.primary[600],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[400],
-              }),
-            }),
-          ]}
-        >
-          <IconImage width={28} height={28} loading="eager" name="product-toolpad" />
-          Toolpad
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            textAlign: 'center', // Add this line
-          }}
-        >
-          <Typography variant="h1" sx={{ my: 2 }}>
-            Open-source dashboard
-            <br />
-            <GradientText> framework </GradientText> for React
-          </Typography>
-          <Typography
-            color="text.secondary"
-            sx={{ maxWidth: 620, mb: 3, textWrap: 'balance', textAlign: 'center' }}
-          >
-            Toolpad offers the components needed for your next admin portal or internal tool.
-            Bootstrap from scratch in our CLI with well chosen defaults, or drop Toolpad into your
-            existing Next.js or Vite* project.
-          </Typography>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: { xs: 'center', md: 'flex-start' },
-          }}
-        >
-          <GetStartedButtons
-            primaryLabel={'Get started'}
-            primaryUrl="/toolpad/core/introduction/"
-            installation={'npx create-toolpad-app@latest --core'}
-            sx={{ width: '100%' }}
-          />
-        </Box>
-      </Box>
-    </Container>
-  );
-}
diff --git a/docs/src/components/landing/Banner.js b/docs/src/components/landing-studio/Banner.js
similarity index 100%
rename from docs/src/components/landing/Banner.js
rename to docs/src/components/landing-studio/Banner.js
diff --git a/docs/src/components/landing/CardGrid.js b/docs/src/components/landing-studio/CardGrid.js
similarity index 100%
rename from docs/src/components/landing/CardGrid.js
rename to docs/src/components/landing-studio/CardGrid.js
diff --git a/docs/src/components/landing/CodeBlock.js b/docs/src/components/landing-studio/CodeBlock.js
similarity index 100%
rename from docs/src/components/landing/CodeBlock.js
rename to docs/src/components/landing-studio/CodeBlock.js
diff --git a/docs/src/components/landing/DemoVideo.js b/docs/src/components/landing-studio/DemoVideo.js
similarity index 100%
rename from docs/src/components/landing/DemoVideo.js
rename to docs/src/components/landing-studio/DemoVideo.js
diff --git a/docs/src/components/landing-core/GetStartedButtons.js b/docs/src/components/landing-studio/GetStartedButtons.js
similarity index 73%
rename from docs/src/components/landing-core/GetStartedButtons.js
rename to docs/src/components/landing-studio/GetStartedButtons.js
index 0b3eaf4273b..3768475db59 100644
--- a/docs/src/components/landing-core/GetStartedButtons.js
+++ b/docs/src/components/landing-studio/GetStartedButtons.js
@@ -5,10 +5,9 @@ import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import { Link } from '@mui/docs/Link';
 import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
-import GithubStars from '../landing/GithubStars';
 
 export default function GetStartedButtons(props) {
-  const { installation, primaryLabel, primaryUrl, ...other } = props;
+  const { installation, primaryLabel, primaryUrl, secondaryLabel, secondaryUrl, ...other } = props;
   return (
     <React.Fragment>
       <Box
@@ -26,6 +25,7 @@ export default function GetStartedButtons(props) {
           href={primaryUrl}
           component={Link}
           noLinkStyle
+          size="large"
           variant="contained"
           endIcon={<KeyboardArrowRightRounded />}
           sx={{
@@ -36,7 +36,20 @@ export default function GetStartedButtons(props) {
         >
           {primaryLabel}
         </Button>
-        <GithubStars />
+        {secondaryUrl ? (
+          <Button
+            href={secondaryUrl}
+            component={Link}
+            noLinkStyle
+            target={'_blank'}
+            variant="outlined"
+            size="large"
+            color="secondary"
+            endIcon={<KeyboardArrowRightRounded />}
+          >
+            {secondaryLabel}
+          </Button>
+        ) : null}
       </Box>
       <NpmCopyButton installation={installation} sx={{ mt: 2 }} />
     </React.Fragment>
diff --git a/docs/src/components/landing/GithubStars.js b/docs/src/components/landing-studio/GithubStars.js
similarity index 100%
rename from docs/src/components/landing/GithubStars.js
rename to docs/src/components/landing-studio/GithubStars.js
diff --git a/docs/src/components/landing-studio/Hero.js b/docs/src/components/landing-studio/Hero.js
new file mode 100644
index 00000000000..e3621282e61
--- /dev/null
+++ b/docs/src/components/landing-studio/Hero.js
@@ -0,0 +1,295 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import SvgMuiLogo from 'docs/src/icons/SvgMuiLogomark';
+import BrushIcon from '@mui/icons-material/Brush';
+import GradientText from 'docs/src/components/typography/GradientText';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
+import GithubStars from './GithubStars';
+import CodeBlock from './CodeBlock';
+import ROUTES from '../../route';
+import ToolpadHeroContainer from '../../layouts/ToolpadHeroContainer';
+
+const HeroModeSwitch = styled(Switch)(({ theme }) => ({
+  width: 36,
+  height: 22,
+  padding: 0,
+  borderRadius: 99,
+  border: '1px solid',
+  borderColor: theme.palette.grey[200],
+  justifySelf: 'center',
+  ...theme.applyDarkStyles({
+    borderColor: theme.palette.primaryDark[600],
+    backgroundColor: theme.palette.primary[600],
+  }),
+  '& .MuiSwitch-switchBase': {
+    padding: 1,
+    color: '#fff',
+    '&.Mui-checked': {
+      transform: 'translateX(14px)',
+      '& + .MuiSwitch-track': {
+        backgroundColor: theme.palette.grey[50],
+        ...theme.applyDarkStyles({
+          backgroundColor: theme.palette.primaryDark[800],
+        }),
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    padding: 0,
+    height: 14,
+    width: 14,
+    boxShadow: 'none',
+    backgroundColor: theme.palette.primary[400],
+  },
+  '& .MuiSwitch-track': {
+    backgroundColor: theme.palette.grey[50],
+    ...theme.applyDarkStyles({
+      backgroundColor: theme.palette.primaryDark[800],
+    }),
+  },
+}));
+
+const Img = styled('img')(({ theme }) => [
+  {
+    overflow: 'hidden',
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
+    border: '1px solid',
+    borderColor: (theme.vars || theme).palette.grey[100],
+  },
+  theme.applyDarkStyles({
+    borderColor: (theme.vars || theme).palette.primaryDark[700],
+  }),
+]);
+
+const words = ['APIs', 'scripts', 'SQL'];
+
+const LETTER_DELAY = 100;
+const FRAME_DELAY = 3000;
+const FRAMES = 6;
+
+function TypingAnimation({ wordIndex, setWordIndex }) {
+  const [text, setText] = React.useState(words[wordIndex]);
+  const [fullText, setFullText] = React.useState(words[wordIndex]);
+  const [letterIndex, setLetterIndex] = React.useState(fullText.length);
+  const count = React.useRef(0);
+
+  React.useEffect(() => {
+    let timer;
+    if (letterIndex < fullText.length) {
+      timer = setTimeout(() => {
+        setText(text + fullText[letterIndex]);
+        setLetterIndex(letterIndex + 1);
+      }, LETTER_DELAY);
+    } else {
+      timer = setTimeout(
+        () => {
+          const nextIndex = (wordIndex + 1) % words.length;
+          setWordIndex(nextIndex);
+          setFullText(words[nextIndex]);
+          setText('');
+          setLetterIndex(0);
+          count.current += 1;
+        },
+        2 * FRAME_DELAY - (count.current ? LETTER_DELAY * fullText.length : 0),
+      );
+    }
+    return () => clearTimeout(timer);
+  }, [letterIndex, wordIndex, fullText, text, setWordIndex]);
+
+  return <span>{text}</span>;
+}
+
+export default function Hero() {
+  const [heroAppMode, setHeroAppMode] = React.useState(false);
+  const isLargerThanMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
+  const isSmallerThanSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+  const handleModeChange = React.useCallback((event) => {
+    setHeroAppMode(event.target.checked);
+  }, []);
+  const [wordIndex, setWordIndex] = React.useState(0);
+  const [frameIndex, setFrameIndex] = React.useState(0);
+
+  const [pauseHeroAnimation, setPauseHeroAnimation] = React.useState(false);
+
+  React.useEffect(() => {
+    const loop = setInterval(() => {
+      if (!pauseHeroAnimation) {
+        setHeroAppMode((prev) => !prev);
+      }
+      if ((isLargerThanMd || isSmallerThanSm) && !pauseHeroAnimation) {
+        setFrameIndex((prev) => (prev + 1) % FRAMES);
+      }
+    }, FRAME_DELAY);
+    return () => clearInterval(loop);
+  }, [pauseHeroAnimation, frameIndex, isLargerThanMd, isSmallerThanSm]);
+
+  const fileIndex = React.useMemo(() => Math.floor(frameIndex / 2), [frameIndex]);
+
+  return (
+    <ToolpadHeroContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          maxWidth: { md: 500, lg: 600, xl: 'unset' },
+        }}
+      >
+        <Typography
+          fontWeight="bold"
+          variant="body2"
+          sx={[
+            (theme) => ({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[400],
+              }),
+            }),
+          ]}
+        >
+          <BrushIcon sx={{ fontSize: '0.875rem' }} />
+          <Box component="span" sx={{ ml: 0.5, mr: 1 }}>
+            Toolpad Studio
+          </Box>
+        </Typography>
+        <Typography variant="h1" sx={{ my: 2, minWidth: { xs: 'auto', sm: 600 } }}>
+          Turn your <TypingAnimation wordIndex={wordIndex} setWordIndex={setWordIndex} />
+          <br />
+          <GradientText>into UIs</GradientText>
+        </Typography>
+        <Typography color="text.secondary" sx={{ maxWidth: 520, mb: 3, textWrap: 'balance' }}>
+          Build scalable and secure internal tools locally. Drag and drop to build UI, then connect
+          to data sources with your own code.
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: { xs: 'center', md: 'flex-start' },
+          }}
+        >
+          <GetStartedButtons
+            primaryLabel={'Get started'}
+            primaryUrl={ROUTES.toolpadQuickstart}
+            secondaryLabel={'Book a demo'}
+            secondaryUrl={ROUTES.toolpadDemoBooking}
+            secondaryUrlTarget="_blank"
+            altInstallation={'npx create-toolpad-app@latest --studio'}
+            sx={{ width: '100%' }}
+          />
+        </Box>
+        <Box
+          sx={{
+            mt: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: { xs: 'space-around', sm: 'start' },
+            gap: 2,
+          }}
+        >
+          <GithubStars />
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+            <SvgMuiLogo width={20} />
+            <Typography color="text.secondary" fontWeight="medium" variant="body2">
+              Powered by Material&nbsp;UI
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'grid',
+          gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
+          rowGap: 1,
+        }}
+        onMouseEnter={() => setPauseHeroAnimation(true)}
+        onMouseLeave={() => setPauseHeroAnimation(false)}
+      >
+        <Box
+          className="MuiToolpadHero-image"
+          sx={[
+            (theme) => ({
+              position: { xs: 'absolute', sm: 'relative', md: 'absolute' },
+              gridRowStart: 1,
+              gridRowEnd: 2,
+              gridColumnStart: { xs: 'unset', sm: 1, md: 'unset' },
+              width: '100%',
+              justifySelf: { xs: 'center', sm: 'unset' },
+              '& > img': {
+                objectFit: { xs: 'cover', sm: 'unset' },
+                objectPosition: { xs: 'top', sm: 'unset' },
+              },
+              height: '100%',
+              borderRadius: '16px',
+              padding: '8px',
+              background: `linear-gradient(120deg, ${
+                (theme.vars || theme).palette.grey[50]
+              } 0%, ${alpha(theme.palette.primary[50], 0.5)} 150%)`,
+              border: '1px solid',
+              borderColor: (theme.vars || theme).palette.grey[100],
+              backfaceVisibility: 'hidden',
+              transition: 'all 0.3s ease',
+              transform: {
+                xs: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
+                sm: 'unset',
+                md: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
+              },
+              boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.9)}`,
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                background: `linear-gradient(120deg, ${
+                  (theme.vars || theme).palette.primaryDark[500]
+                } 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
+                borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
+                boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.8)}`,
+              }),
+          ]}
+        >
+          <Img
+            src={`/static/toolpad/marketing/hero-${fileIndex + 1}.png`}
+            width="2880"
+            height="1592"
+          />
+        </Box>
+        <CodeBlock appMode={heroAppMode} fileIndex={fileIndex} setFrameIndex={setFrameIndex} />
+        <Box
+          sx={{
+            display: { xs: 'grid', sm: 'none', md: 'grid' },
+            gridRowStart: 2,
+            gridColumnStart: 1,
+            gridColumnEnd: 3,
+            transform: { xs: 'scale(0.95)', sm: 'unset' },
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center' }}>
+            <Typography variant="caption" color="text.secondary">
+              Code
+            </Typography>
+            <HeroModeSwitch checked={heroAppMode} onChange={handleModeChange} />
+            <Typography variant="caption" color="text.secondary">
+              UI
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </ToolpadHeroContainer>
+  );
+}
+
+TypingAnimation.propTypes = {
+  setWordIndex: PropTypes.func,
+  wordIndex: PropTypes.number,
+};
diff --git a/docs/src/components/landing/HeroVideo.js b/docs/src/components/landing-studio/HeroVideo.js
similarity index 100%
rename from docs/src/components/landing/HeroVideo.js
rename to docs/src/components/landing-studio/HeroVideo.js
diff --git a/docs/src/components/landing/Marquee.js b/docs/src/components/landing-studio/Marquee.js
similarity index 100%
rename from docs/src/components/landing/Marquee.js
rename to docs/src/components/landing-studio/Marquee.js
diff --git a/docs/src/components/landing/PricingTable.js b/docs/src/components/landing-studio/PricingTable.js
similarity index 100%
rename from docs/src/components/landing/PricingTable.js
rename to docs/src/components/landing-studio/PricingTable.js
diff --git a/docs/src/components/landing/SignUp.js b/docs/src/components/landing-studio/SignUp.js
similarity index 100%
rename from docs/src/components/landing/SignUp.js
rename to docs/src/components/landing-studio/SignUp.js
diff --git a/docs/src/components/landing/SignUpToast.js b/docs/src/components/landing-studio/SignUpToast.js
similarity index 100%
rename from docs/src/components/landing/SignUpToast.js
rename to docs/src/components/landing-studio/SignUpToast.js
diff --git a/docs/src/components/landing/UseCases.js b/docs/src/components/landing-studio/UseCases.js
similarity index 100%
rename from docs/src/components/landing/UseCases.js
rename to docs/src/components/landing-studio/UseCases.js
diff --git a/docs/src/components/landing-core/BuiltWith.js b/docs/src/components/landing/BuiltWith.js
similarity index 100%
rename from docs/src/components/landing-core/BuiltWith.js
rename to docs/src/components/landing/BuiltWith.js
diff --git a/docs/src/components/landing-core/Examples.js b/docs/src/components/landing/Examples.js
similarity index 98%
rename from docs/src/components/landing-core/Examples.js
rename to docs/src/components/landing/Examples.js
index 7ed66d0e187..639848fcd93 100644
--- a/docs/src/components/landing-core/Examples.js
+++ b/docs/src/components/landing/Examples.js
@@ -100,7 +100,7 @@ export default function Examples() {
           overline="Examples"
           title={
             <Typography variant="h2">
-              Toolpad is <GradientText>ideal for building</GradientText>
+              Toolpad Core is <GradientText>ideal for building</GradientText>
             </Typography>
           }
         />
@@ -157,7 +157,7 @@ export default function Examples() {
                 Build much more!
               </Typography>
               <Typography variant="body" color="text.secondary" textAlign="center">
-                Learn how to build these and many other apps using Toolpad!
+                Learn how to build these and many other apps using Toolpad Core!
               </Typography>
               <Link href="/toolpad/studio/examples/" variant="body" sx={{ mt: 1 }}>
                 Check out docs
diff --git a/docs/src/components/landing-core/Features.js b/docs/src/components/landing/Features.js
similarity index 100%
rename from docs/src/components/landing-core/Features.js
rename to docs/src/components/landing/Features.js
diff --git a/docs/src/components/landing/GetStartedButtons.js b/docs/src/components/landing/GetStartedButtons.js
index 3768475db59..6d325d4472a 100644
--- a/docs/src/components/landing/GetStartedButtons.js
+++ b/docs/src/components/landing/GetStartedButtons.js
@@ -5,9 +5,10 @@ import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import { Link } from '@mui/docs/Link';
 import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
+import GithubStars from '../landing-studio/GithubStars';
 
 export default function GetStartedButtons(props) {
-  const { installation, primaryLabel, primaryUrl, secondaryLabel, secondaryUrl, ...other } = props;
+  const { installation, primaryLabel, primaryUrl, ...other } = props;
   return (
     <React.Fragment>
       <Box
@@ -25,7 +26,6 @@ export default function GetStartedButtons(props) {
           href={primaryUrl}
           component={Link}
           noLinkStyle
-          size="large"
           variant="contained"
           endIcon={<KeyboardArrowRightRounded />}
           sx={{
@@ -36,20 +36,7 @@ export default function GetStartedButtons(props) {
         >
           {primaryLabel}
         </Button>
-        {secondaryUrl ? (
-          <Button
-            href={secondaryUrl}
-            component={Link}
-            noLinkStyle
-            target={'_blank'}
-            variant="outlined"
-            size="large"
-            color="secondary"
-            endIcon={<KeyboardArrowRightRounded />}
-          >
-            {secondaryLabel}
-          </Button>
-        ) : null}
+        <GithubStars />
       </Box>
       <NpmCopyButton installation={installation} sx={{ mt: 2 }} />
     </React.Fragment>
diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index 423c71acb0b..233507b829f 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -1,149 +1,25 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled, alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Switch from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import SvgMuiLogo from 'docs/src/icons/SvgMuiLogomark';
-import IconImage from 'docs/src/components/icon/IconImage';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import SvgToolpadLogo from 'docs/src/icons/SvgToolpadLogo';
+import Box from '@mui/material/Box';
 import GradientText from 'docs/src/components/typography/GradientText';
-// import GetStartedButtons from './GetStartedButtons';
-import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
-import GithubStars from './GithubStars';
-import CodeBlock from './CodeBlock';
-import ROUTES from '../../route';
-import ToolpadHeroContainer from '../../layouts/ToolpadHeroContainer';
-
-const HeroModeSwitch = styled(Switch)(({ theme }) => ({
-  width: 36,
-  height: 22,
-  padding: 0,
-  borderRadius: 99,
-  border: '1px solid',
-  borderColor: theme.palette.grey[200],
-  justifySelf: 'center',
-  ...theme.applyDarkStyles({
-    borderColor: theme.palette.primaryDark[600],
-    backgroundColor: theme.palette.primary[600],
-  }),
-  '& .MuiSwitch-switchBase': {
-    padding: 1,
-    color: '#fff',
-    '&.Mui-checked': {
-      transform: 'translateX(14px)',
-      '& + .MuiSwitch-track': {
-        backgroundColor: theme.palette.grey[50],
-        ...theme.applyDarkStyles({
-          backgroundColor: theme.palette.primaryDark[800],
-        }),
-      },
-    },
-  },
-  '& .MuiSwitch-thumb': {
-    padding: 0,
-    height: 14,
-    width: 14,
-    boxShadow: 'none',
-    backgroundColor: theme.palette.primary[400],
-  },
-  '& .MuiSwitch-track': {
-    backgroundColor: theme.palette.grey[50],
-    ...theme.applyDarkStyles({
-      backgroundColor: theme.palette.primaryDark[800],
-    }),
-  },
-}));
-
-const Img = styled('img')(({ theme }) => [
-  {
-    overflow: 'hidden',
-    objectFit: 'cover',
-    width: '100%',
-    height: '100%',
-    borderRadius: 10,
-    border: '1px solid',
-    borderColor: (theme.vars || theme).palette.grey[100],
-  },
-  theme.applyDarkStyles({
-    borderColor: (theme.vars || theme).palette.primaryDark[700],
-  }),
-]);
-
-const words = ['APIs', 'scripts', 'SQL'];
-
-const LETTER_DELAY = 100;
-const FRAME_DELAY = 3000;
-const FRAMES = 6;
-
-function TypingAnimation({ wordIndex, setWordIndex }) {
-  const [text, setText] = React.useState(words[wordIndex]);
-  const [fullText, setFullText] = React.useState(words[wordIndex]);
-  const [letterIndex, setLetterIndex] = React.useState(fullText.length);
-  const count = React.useRef(0);
-
-  React.useEffect(() => {
-    let timer;
-    if (letterIndex < fullText.length) {
-      timer = setTimeout(() => {
-        setText(text + fullText[letterIndex]);
-        setLetterIndex(letterIndex + 1);
-      }, LETTER_DELAY);
-    } else {
-      timer = setTimeout(
-        () => {
-          const nextIndex = (wordIndex + 1) % words.length;
-          setWordIndex(nextIndex);
-          setFullText(words[nextIndex]);
-          setText('');
-          setLetterIndex(0);
-          count.current += 1;
-        },
-        2 * FRAME_DELAY - (count.current ? LETTER_DELAY * fullText.length : 0),
-      );
-    }
-    return () => clearTimeout(timer);
-  }, [letterIndex, wordIndex, fullText, text, setWordIndex]);
-
-  return <span>{text}</span>;
-}
+import { Container } from '@mui/material';
+import GetStartedButtons from './GetStartedButtons';
 
 export default function Hero() {
-  const [heroAppMode, setHeroAppMode] = React.useState(false);
-  const isLargerThanMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
-  const isSmallerThanSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-  const handleModeChange = React.useCallback((event) => {
-    setHeroAppMode(event.target.checked);
-  }, []);
-  const [wordIndex, setWordIndex] = React.useState(0);
-  const [frameIndex, setFrameIndex] = React.useState(0);
-
-  const [pauseHeroAnimation, setPauseHeroAnimation] = React.useState(false);
-
-  React.useEffect(() => {
-    const loop = setInterval(() => {
-      if (!pauseHeroAnimation) {
-        setHeroAppMode((prev) => !prev);
-      }
-      if ((isLargerThanMd || isSmallerThanSm) && !pauseHeroAnimation) {
-        setFrameIndex((prev) => (prev + 1) % FRAMES);
-      }
-    }, FRAME_DELAY);
-    return () => clearInterval(loop);
-  }, [pauseHeroAnimation, frameIndex, isLargerThanMd, isSmallerThanSm]);
-
-  const fileIndex = React.useMemo(() => Math.floor(frameIndex / 2), [frameIndex]);
-
   return (
-    <ToolpadHeroContainer>
+    <Container
+      sx={{
+        py: { xs: 4, sm: 8 },
+      }}
+    >
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          justifyContent: 'center',
-          maxWidth: { md: 500, lg: 600, xl: 'unset' },
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          padding: 4,
         }}
       >
         <Typography
@@ -161,162 +37,46 @@ export default function Hero() {
             }),
           ]}
         >
-          <IconImage width={28} height={28} loading="eager" name="product-toolpad" />
-          <Box component="span" sx={{ ml: 0.5, mr: 1 }}>
-            Toolpad
-          </Box>
-          <Chip
-            label="Introducing the Beta version"
-            component="a"
-            href={ROUTES.toolpadBetaBlog}
-            color="primary"
-            size="small"
-            variant="outlined"
-            clickable
-            onDelete={() => {}}
-            deleteIcon={<ChevronRightIcon />}
-            sx={[
-              (theme) => ({
-                pb: 0.15,
-                ml: 0.8,
-                background: alpha(theme.palette.primary[50], 0.5),
-                borderColor: (theme.vars || theme).palette.primary[100],
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[200],
-                  borderColor: (theme.vars || theme).palette.primary[700],
-                  background: alpha(theme.palette.primary[800], 0.3),
-                }),
-              }),
-            ]}
-          />
-        </Typography>
-        <Typography variant="h1" sx={{ my: 2, minWidth: { xs: 'auto', sm: 600 } }}>
-          Turn your <TypingAnimation wordIndex={wordIndex} setWordIndex={setWordIndex} />
-          <br />
-          <GradientText>into UIs</GradientText>
-        </Typography>
-        <Typography color="text.secondary" sx={{ maxWidth: 520, mb: 3, textWrap: 'balance' }}>
-          Build scalable and secure internal tools locally. Drag and drop to build UI, then connect
-          to data sources with your own code.
+          <SvgToolpadLogo width={14} height={14} style={{ marginRight: 8 }} />
+          Toolpad Core
         </Typography>
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'column',
-            alignItems: { xs: 'center', md: 'flex-start' },
+            alignItems: 'center',
+            textAlign: 'center', // Add this line
           }}
         >
-          <GetStartedButtons
-            primaryLabel={'Get started'}
-            primaryUrl={ROUTES.toolpadQuickstart}
-            secondaryLabel={'Book a demo'}
-            secondaryUrl={ROUTES.toolpadDemoBooking}
-            secondaryUrlTarget="_blank"
-            altInstallation={'npx create-toolpad-app@latest'}
-            sx={{ width: '100%' }}
-          />
+          <Typography variant="h1" sx={{ my: 2 }}>
+            Open-source dashboard
+            <br />
+            <GradientText> framework </GradientText> for React
+          </Typography>
+          <Typography
+            color="text.secondary"
+            sx={{ maxWidth: 620, mb: 3, textWrap: 'balance', textAlign: 'center' }}
+          >
+            From the creators of MUI, Toolpad Core offers the components needed for your next admin
+            panel and internal tools project. Bootstrap from scratch in our CLI with well chosen
+            defaults, or drop Toolpad Core into your existing Next.js or Vite* project.
+          </Typography>
         </Box>
         <Box
           sx={{
-            mt: 4,
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: { xs: 'space-around', sm: 'start' },
-            gap: 2,
+            flexDirection: 'column',
+            alignItems: { xs: 'center', md: 'flex-start' },
           }}
         >
-          <GithubStars />
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
-            <SvgMuiLogo width={20} />
-            <Typography color="text.secondary" fontWeight="medium" variant="body2">
-              Powered by Material&nbsp;UI
-            </Typography>
-          </Box>
-        </Box>
-      </Box>
-      <Box
-        sx={{
-          position: 'relative',
-          display: 'grid',
-          gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
-          rowGap: 1,
-        }}
-        onMouseEnter={() => setPauseHeroAnimation(true)}
-        onMouseLeave={() => setPauseHeroAnimation(false)}
-      >
-        <Box
-          className="MuiToolpadHero-image"
-          sx={[
-            (theme) => ({
-              position: { xs: 'absolute', sm: 'relative', md: 'absolute' },
-              gridRowStart: 1,
-              gridRowEnd: 2,
-              gridColumnStart: { xs: 'unset', sm: 1, md: 'unset' },
-              width: '100%',
-              justifySelf: { xs: 'center', sm: 'unset' },
-              '& > img': {
-                objectFit: { xs: 'cover', sm: 'unset' },
-                objectPosition: { xs: 'top', sm: 'unset' },
-              },
-              height: '100%',
-              borderRadius: '16px',
-              padding: '8px',
-              background: `linear-gradient(120deg, ${
-                (theme.vars || theme).palette.grey[50]
-              } 0%, ${alpha(theme.palette.primary[50], 0.5)} 150%)`,
-              border: '1px solid',
-              borderColor: (theme.vars || theme).palette.grey[100],
-              backfaceVisibility: 'hidden',
-              transition: 'all 0.3s ease',
-              transform: {
-                xs: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
-                sm: 'unset',
-                md: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
-              },
-              boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.9)}`,
-            }),
-            (theme) =>
-              theme.applyDarkStyles({
-                background: `linear-gradient(120deg, ${
-                  (theme.vars || theme).palette.primaryDark[500]
-                } 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
-                borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
-                boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.8)}`,
-              }),
-          ]}
-        >
-          <Img
-            src={`/static/toolpad/marketing/hero-${fileIndex + 1}.png`}
-            width="2880"
-            height="1592"
+          <GetStartedButtons
+            primaryLabel={'Get started'}
+            primaryUrl="/toolpad/core/introduction/"
+            installation={'npx create-toolpad-app@latest'}
+            sx={{ width: '100%' }}
           />
         </Box>
-        <CodeBlock appMode={heroAppMode} fileIndex={fileIndex} setFrameIndex={setFrameIndex} />
-        <Box
-          sx={{
-            display: { xs: 'grid', sm: 'none', md: 'grid' },
-            gridRowStart: 2,
-            gridColumnStart: 1,
-            gridColumnEnd: 3,
-            transform: { xs: 'scale(0.95)', sm: 'unset' },
-          }}
-        >
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center' }}>
-            <Typography variant="caption" color="text.secondary">
-              Code
-            </Typography>
-            <HeroModeSwitch checked={heroAppMode} onChange={handleModeChange} />
-            <Typography variant="caption" color="text.secondary">
-              UI
-            </Typography>
-          </Box>
-        </Box>
       </Box>
-    </ToolpadHeroContainer>
+    </Container>
   );
 }
-
-TypingAnimation.propTypes = {
-  setWordIndex: PropTypes.func,
-  wordIndex: PropTypes.number,
-};
diff --git a/docs/src/components/landing-core/StudioIntro.js b/docs/src/components/landing/StudioIntro.js
similarity index 96%
rename from docs/src/components/landing-core/StudioIntro.js
rename to docs/src/components/landing/StudioIntro.js
index e868425e89b..10debd9c3b3 100644
--- a/docs/src/components/landing-core/StudioIntro.js
+++ b/docs/src/components/landing/StudioIntro.js
@@ -41,9 +41,9 @@ export default function StudioIntro() {
           />
 
           <GetStartedButtons
-            primaryUrl="https://mui.com/toolpad-studio"
+            primaryUrl="/toolpad/studio/"
             primaryLabel="Explore Studio"
-            altInstallation="npx create-toolpad-app@latest"
+            altInstallation="npx create-toolpad-app@latest --studio"
           />
         </Grid>
         <Grid size={{ xs: 12, md: 7 }}>
diff --git a/docs/src/components/landing-core/ToolpadAuthDemo.tsx b/docs/src/components/landing/ToolpadAuthDemo.tsx
similarity index 100%
rename from docs/src/components/landing-core/ToolpadAuthDemo.tsx
rename to docs/src/components/landing/ToolpadAuthDemo.tsx
diff --git a/docs/src/components/landing-core/ToolpadDashboardLayout.tsx b/docs/src/components/landing/ToolpadDashboardLayout.tsx
similarity index 100%
rename from docs/src/components/landing-core/ToolpadDashboardLayout.tsx
rename to docs/src/components/landing/ToolpadDashboardLayout.tsx
diff --git a/docs/src/components/landing-core/ToolpadDialogDemo.tsx b/docs/src/components/landing/ToolpadDialogDemo.tsx
similarity index 95%
rename from docs/src/components/landing-core/ToolpadDialogDemo.tsx
rename to docs/src/components/landing/ToolpadDialogDemo.tsx
index 07b8a89f5d6..1296ea68b76 100644
--- a/docs/src/components/landing-core/ToolpadDialogDemo.tsx
+++ b/docs/src/components/landing/ToolpadDialogDemo.tsx
@@ -27,10 +27,8 @@ function DemoContent() {
   return (
     <div>
       <Button
-        onClick={async () => {
-          // preview-start
-          await dialogs.open(MyCustomDialog);
-          // preview-end
+        onClick={async () => {          
+          await dialogs.open(MyCustomDialog);          
         }}
       >
         Open custom
diff --git a/docs/src/components/landing-core/ToolpadFeaturesSwitcher.tsx b/docs/src/components/landing/ToolpadFeaturesSwitcher.tsx
similarity index 93%
rename from docs/src/components/landing-core/ToolpadFeaturesSwitcher.tsx
rename to docs/src/components/landing/ToolpadFeaturesSwitcher.tsx
index 3874153f494..ad39b84fc61 100644
--- a/docs/src/components/landing-core/ToolpadFeaturesSwitcher.tsx
+++ b/docs/src/components/landing/ToolpadFeaturesSwitcher.tsx
@@ -77,7 +77,7 @@ const componentElement = new Map([
     {
       name: 'Authentication',
       description:
-        'Our authentication components help you set up an authentication flow that feels native to your application.',
+        'Our authentication components help you set up complex authentication flows quickly, without subscription costs.',
       icon: <LockOpenIcon />,
     },
   ],
@@ -94,7 +94,7 @@ const componentElement = new Map([
     {
       name: 'Dialogs',
       description:
-        'Toolpad exports an imperative API to manage dialogs in your application. System dialogs that adapt to your application theme are also included.',
+        'Toolpad Core exports an imperative API to manage dialogs in your application. System dialogs that adapt to your application theme are also included.',
       icon: <NotificationsIcon />,
     },
   ],
diff --git a/docs/src/components/landing-core/ToolpadNotificationDemo.tsx b/docs/src/components/landing/ToolpadNotificationDemo.tsx
similarity index 100%
rename from docs/src/components/landing-core/ToolpadNotificationDemo.tsx
rename to docs/src/components/landing/ToolpadNotificationDemo.tsx
diff --git a/docs/src/components/landing-core/ToolpadPageContainerDemo.tsx b/docs/src/components/landing/ToolpadPageContainerDemo.tsx
similarity index 100%
rename from docs/src/components/landing-core/ToolpadPageContainerDemo.tsx
rename to docs/src/components/landing/ToolpadPageContainerDemo.tsx
diff --git a/packages/create-toolpad-app/README.md b/packages/create-toolpad-app/README.md
index c0a54a5acf9..95155312274 100644
--- a/packages/create-toolpad-app/README.md
+++ b/packages/create-toolpad-app/README.md
@@ -1,7 +1,7 @@
 # Create Toolpad App
 
-The simplest method to start with Toolpad Studio is by using `create-toolpad-app`.
-This CLI tool enables you to quickly start building a new Toolpad Studio application, with everything already set up.
+The simplest method to start with Toolpad is by using `create-toolpad-app`.
+This CLI tool enables you to quickly start building a new Toolpad Core application, with everything already set up. You can use the `--studio` flag if you want to bootstrap a Toolpad Studio project.
 
 ## Interactive
 
@@ -21,4 +21,4 @@ You then need to provide the name of your project:
 ✔ Enter the name of your project:
 ```
 
-Enter the name to install the necessary types/dependencies and create a new Toolpad Studio project.
+Enter the name to install the necessary types/dependencies and create a new Toolpad Core project.
diff --git a/packages/create-toolpad-app/src/index.ts b/packages/create-toolpad-app/src/index.ts
index 83734b4ac17..b8e6ac01ac5 100644
--- a/packages/create-toolpad-app/src/index.ts
+++ b/packages/create-toolpad-app/src/index.ts
@@ -225,11 +225,11 @@ const run = async () => {
     .usage('$0 [path] [options]')
     .positional('path', {
       type: 'string',
-      describe: 'The path where the Toolpad Studio project directory will be created',
+      describe: 'The path where the Toolpad project directory will be created',
     })
-    .option('core', {
+    .option('studio', {
       type: 'boolean',
-      describe: 'Create a new project with Toolpad Core',
+      describe: 'Create a new project with Toolpad Studio',
       default: false,
     })
     .option('install', {
@@ -246,7 +246,7 @@ const run = async () => {
 
   const pathArg = args._?.[0] as string;
   const installFlag = args.install as boolean;
-  const coreFlag = args.core as boolean;
+  const studioFlag = args.studio as boolean;
 
   if (pathArg) {
     const pathValidOrError = await validatePath(pathArg);
@@ -292,12 +292,12 @@ const run = async () => {
       console.log();
     }
   }
-  // If the core flag is set, create a new project with Toolpad Core
-  else if (coreFlag) {
-    await scaffoldCoreProject(absolutePath);
-  } else {
-    // Otherwise, create a new project with Toolpad Studio
+  // If the studio flag is set, create a new project with Toolpad Studio
+  else if (studioFlag) {
     await scaffoldStudioProject(absolutePath, installFlag);
+  } else {
+    // Otherwise, create a new project with Toolpad Core
+    await scaffoldCoreProject(absolutePath);
   }
 
   const changeDirectoryInstruction =
diff --git a/packages/create-toolpad-app/tests/index.spec.ts b/packages/create-toolpad-app/tests/index.spec.ts
index 08e8b686c6f..d901d5e9a38 100644
--- a/packages/create-toolpad-app/tests/index.spec.ts
+++ b/packages/create-toolpad-app/tests/index.spec.ts
@@ -41,7 +41,7 @@ test(
   'create-toolpad-app can bootstrap a Toolpad Studio app',
   async () => {
     testDir = await fs.mkdtemp(path.resolve(os.tmpdir(), './test-app-'));
-    cp = execa(cliPath, [testDir], {
+    cp = execa(cliPath, [testDir, '--studio'], {
       cwd: currentDirectory,
     });
     cp.stdout?.pipe(process.stdout);
@@ -93,6 +93,59 @@ test(
   TEST_TIMEOUT,
 );
 
+test(
+  'create-toolpad-app can bootstrap a Toolpad Core app',
+  async () => {
+    testDir = await fs.mkdtemp(path.resolve(os.tmpdir(), './test-app-'));
+    cp = execa(cliPath, [testDir], {
+      cwd: currentDirectory,
+    });
+    cp.stdout?.pipe(process.stdout);
+    cp.stderr?.pipe(process.stderr);
+    const result = await cp;
+    expect(result.stdout).toMatch('Run the following to get started');
+    const packageJsonContent = await fs.readFile(path.resolve(testDir, './package.json'), {
+      encoding: 'utf-8',
+    });
+    const packageJson = JSON.parse(packageJsonContent);
+    expect(packageJson).toEqual(
+      expect.objectContaining({
+        dependencies: expect.objectContaining({
+          '@toolpad/core': expect.any(String),
+        }),
+        scripts: expect.objectContaining({
+          dev: 'next dev',
+          build: 'next build',
+          start: 'next start',
+          lint: 'next lint',
+        }),
+      }),
+    );
+
+    // check that file exists or not in the directory
+    const gitignore = await fs.readFile(path.resolve(testDir, './.gitignore'), {
+      encoding: 'utf-8',
+    });
+
+    expect(gitignore.length).toBeGreaterThan(0);
+
+    toolpadProcess = execa('pnpm', ['dev'], {
+      cwd: testDir,
+      env: {
+        FORCE_COLOR: '0',
+        BROWSER: 'none',
+      },
+    });
+    toolpadProcess.stdout?.pipe(process.stdout);
+    toolpadProcess.stderr?.pipe(process.stderr);
+
+    const match = await waitForMatch(toolpadProcess.stdout!, /http:\/\/localhost:(\d+)/);
+
+    expect(match).toBeTruthy();
+  },
+  TEST_TIMEOUT,
+);
+
 afterEach(async () => {
   if (toolpadProcess) {
     await terminate(toolpadProcess.pid!);
diff --git a/packages/toolpad-studio/README.md b/packages/toolpad-studio/README.md
index 98c09c5179f..bad9f04239c 100644
--- a/packages/toolpad-studio/README.md
+++ b/packages/toolpad-studio/README.md
@@ -12,11 +12,11 @@ Toolpad Studio is a self-hosted low-code admin builder designed to extend the [M
 Install the package in your project directory with:
 
 ```bash
-npx create-toolpad-app@latest my-toolpad-studio-app
+npx create-toolpad-app@latest --studio my-toolpad-studio-app
 # or
-yarn create toolpad-app my-toolpad-studio-app
+yarn create toolpad-app --studio my-toolpad-studio-app
 # or
-pnpm create toolpad-app my-toolpad-studio-app
+pnpm create toolpad-app --studio my-toolpad-studio-app
 ```
 
 ## Documentation