diff --git a/packages/toolpad-app/src/constants.ts b/packages/toolpad-app/src/constants.ts
index 89568a53466..9d69aba8b8a 100644
--- a/packages/toolpad-app/src/constants.ts
+++ b/packages/toolpad-app/src/constants.ts
@@ -8,3 +8,5 @@ export const TOOLPAD_TARGET_CE = 'CE';
 export const TOOLPAD_TARGET_CLOUD = 'CLOUD';
 export const TOOLPAD_TARGET_PRO = 'PRO';
 export const DOCUMENTATION_URL = 'https://mui.com/toolpad/getting-started/overview/';
+export const DOCUMENTATION_INSTALLATION_URL =
+  'https://mui.com/toolpad/getting-started/installation/';
diff --git a/packages/toolpad-app/src/toolpad/Home/UpdateBanner.tsx b/packages/toolpad-app/src/toolpad/Home/UpdateBanner.tsx
deleted file mode 100644
index 26b9fe6d51d..00000000000
--- a/packages/toolpad-app/src/toolpad/Home/UpdateBanner.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Button, Snackbar, Stack } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { DOCUMENTATION_URL, TOOLPAD_TARGET_CLOUD } from '../../constants';
-import client from '../../api';
-import useLocalStorageState from '../../utils/useLocalStorageState';
-
-const CURRENT_RELEASE_VERSION = `v${process.env.TOOLPAD_VERSION}`;
-
-function UpdateBanner() {
-  const { data: latestRelease } = client.useQuery('getLatestToolpadRelease', [], {
-    staleTime: 1000 * 60 * 10,
-    enabled: process.env.TOOLPAD_TARGET !== TOOLPAD_TARGET_CLOUD,
-  });
-
-  const [dismissedVersion, setDismissedVersion] = useLocalStorageState<string | null>(
-    'update-banner-dismissed-version',
-    null,
-  );
-
-  const handleDismissClick = React.useCallback(
-    (event: React.SyntheticEvent | Event, reason?: string) => {
-      if (reason === 'clickaway' || reason === 'escapeKeyDown') {
-        return;
-      }
-      setDismissedVersion(CURRENT_RELEASE_VERSION);
-    },
-    [setDismissedVersion],
-  );
-
-  const hideBanner =
-    (latestRelease && latestRelease.tag === CURRENT_RELEASE_VERSION) ||
-    dismissedVersion === CURRENT_RELEASE_VERSION;
-
-  return latestRelease ? (
-    <Snackbar
-      open={!hideBanner}
-      onClose={handleDismissClick}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      message={
-        <React.Fragment>
-          A new version <strong>{latestRelease.tag}</strong> of Toolpad is available.
-        </React.Fragment>
-      }
-      action={
-        <Stack direction="row" sx={{ gap: 2 }}>
-          <Button
-            aria-label="update"
-            color="inherit"
-            endIcon={<OpenInNewIcon fontSize="inherit" />}
-            component="a"
-            target="_blank"
-            href={DOCUMENTATION_URL}
-          >
-            Update
-          </Button>
-          <Button
-            aria-label="view changelog"
-            color="inherit"
-            endIcon={<OpenInNewIcon fontSize="inherit" />}
-            component="a"
-            target="_blank"
-            href={latestRelease.url}
-          >
-            View changelog
-          </Button>
-          <IconButton aria-label="close" color="inherit" size="small" onClick={handleDismissClick}>
-            <CloseIcon fontSize="inherit" />
-          </IconButton>
-        </Stack>
-      }
-    />
-  ) : null;
-}
-
-export default UpdateBanner;
diff --git a/packages/toolpad-app/src/toolpad/Home/index.tsx b/packages/toolpad-app/src/toolpad/Home/index.tsx
index 96156d447bf..dd2099096a3 100644
--- a/packages/toolpad-app/src/toolpad/Home/index.tsx
+++ b/packages/toolpad-app/src/toolpad/Home/index.tsx
@@ -51,7 +51,6 @@ import DialogForm from '../../components/DialogForm';
 import type { Deployment } from '../../../prisma/generated/client';
 import useLatest from '../../utils/useLatest';
 import ToolpadShell from '../ToolpadShell';
-import UpdateBanner from './UpdateBanner';
 import getReadableDuration from '../../utils/readableDuration';
 import EditableText from '../../components/EditableText';
 import type { AppMeta } from '../../server/data';
@@ -789,7 +788,6 @@ export default function Home() {
               duplicateApp={duplicateApp}
             />
           )}
-          <UpdateBanner />
         </Container>
       ) : null}
       <CreateAppDialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} />
diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell.tsx
deleted file mode 100644
index 886a0b68de9..00000000000
--- a/packages/toolpad-app/src/toolpad/ToolpadShell.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import * as React from 'react';
-import {
-  styled,
-  AppBar,
-  Box,
-  Toolbar,
-  IconButton,
-  Menu,
-  MenuItem,
-  Divider,
-  ListItemText,
-  Tooltip,
-  Chip,
-  Link,
-  useTheme,
-} from '@mui/material';
-import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import Image from 'next/image';
-import useMenu from '../utils/useMenu';
-import {
-  TOOLPAD_TARGET_CLOUD,
-  TOOLPAD_TARGET_CE,
-  TOOLPAD_TARGET_PRO,
-  DOCUMENTATION_URL,
-} from '../constants';
-import productIconDark from '../../public/product-icon-dark.svg';
-import productIconLight from '../../public/product-icon-light.svg';
-
-const REPORT_BUG_URL =
-  'https://github.com/mui/mui-toolpad/issues/new?assignees=&labels=status%3A+needs+triage&template=1.bug.yml';
-const FEATURE_REQUEST_URL = 'https://github.com/mui/mui-toolpad/issues';
-
-interface FeedbackMenuItemLinkProps {
-  href: string;
-  children: React.ReactNode;
-}
-
-function FeedbackMenuItemLink({ href, children }: FeedbackMenuItemLinkProps) {
-  return (
-    <MenuItem component="a" target="_blank" href={href}>
-      <ListItemText>{children}</ListItemText>
-      <OpenInNewIcon fontSize="inherit" sx={{ ml: 3, color: 'text.secondary' }} />
-    </MenuItem>
-  );
-}
-
-export interface ToolpadShellProps {
-  actions?: React.ReactNode;
-  status?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-const ToolpadShellRoot = styled('div')({
-  width: '100vw',
-  minHeight: '100vh',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const ViewPort = styled('div')({
-  flex: 1,
-  overflow: 'auto',
-  position: 'relative',
-});
-
-function getReadableTarget(): string {
-  switch (process.env.TOOLPAD_TARGET) {
-    case TOOLPAD_TARGET_CLOUD:
-      return 'Cloud';
-    case TOOLPAD_TARGET_CE:
-      return 'Community';
-    case TOOLPAD_TARGET_PRO:
-      return 'Pro';
-    default:
-      return 'Unknown';
-  }
-}
-
-function UserFeedback() {
-  const { buttonProps, menuProps } = useMenu();
-
-  return (
-    <React.Fragment>
-      <Tooltip title="Help and resources">
-        <IconButton {...buttonProps} color="inherit">
-          <HelpOutlinedIcon />
-        </IconButton>
-      </Tooltip>
-      <Menu {...menuProps}>
-        <FeedbackMenuItemLink href={DOCUMENTATION_URL}>Documentation</FeedbackMenuItemLink>
-        <FeedbackMenuItemLink href={REPORT_BUG_URL}>Report bug</FeedbackMenuItemLink>
-        <FeedbackMenuItemLink href={FEATURE_REQUEST_URL}>
-          Request or upvote feature
-        </FeedbackMenuItemLink>
-        <Divider />
-        <MenuItem disabled>{getReadableTarget()}</MenuItem>
-        <MenuItem disabled>Version {process.env.TOOLPAD_VERSION}</MenuItem>
-        <MenuItem disabled>Build {process.env.TOOLPAD_BUILD}</MenuItem>
-      </Menu>
-    </React.Fragment>
-  );
-}
-export interface HeaderProps {
-  actions?: React.ReactNode;
-  status?: React.ReactNode;
-}
-
-function Header({ actions, status }: HeaderProps) {
-  const theme = useTheme();
-  return (
-    <AppBar
-      position="static"
-      color="default"
-      elevation={0}
-      sx={{ zIndex: 2, borderBottom: 1, borderColor: 'divider' }}
-    >
-      <Toolbar>
-        <Box
-          sx={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'start',
-          }}
-        >
-          <Tooltip title="Home">
-            <Link
-              color="inherit"
-              aria-label="Home"
-              href="/"
-              underline="none"
-              sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}
-            >
-              <Image
-                src={theme.palette.mode === 'dark' ? productIconDark : productIconLight}
-                alt="Toolpad product icon"
-                width={25}
-                height={25}
-              />
-              <Box
-                data-testid="brand"
-                sx={{
-                  color: 'primary.main',
-                  lineHeight: '21px',
-                  fontSize: '16px',
-                  fontWeight: 700,
-                }}
-              >
-                MUI Toolpad
-              </Box>
-            </Link>
-          </Tooltip>
-          {process.env.TOOLPAD_DEMO ? (
-            <Chip sx={{ ml: 2 }} label="Demo Version" color="primary" size="small" />
-          ) : null}
-        </Box>
-        <Box
-          sx={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          {actions}
-        </Box>
-        <Box
-          sx={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'end',
-            gap: 2,
-          }}
-        >
-          {status}
-          <UserFeedback />
-        </Box>
-      </Toolbar>
-    </AppBar>
-  );
-}
-
-export default function ToolpadShell({ children, ...props }: ToolpadShellProps) {
-  return (
-    <ToolpadShellRoot>
-      <Header {...props} />
-      <ViewPort>{children}</ViewPort>
-    </ToolpadShellRoot>
-  );
-}
diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell/Header/UserFeedback/index.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell/Header/UserFeedback/index.tsx
new file mode 100644
index 00000000000..38f3e3a9cf2
--- /dev/null
+++ b/packages/toolpad-app/src/toolpad/ToolpadShell/Header/UserFeedback/index.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Chip, Divider, ListItemText, IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import HelpOutlinedIcon from '@mui/icons-material/HelpOutlined';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import useMenu from '../../../../utils/useMenu';
+import {
+  TOOLPAD_TARGET_CLOUD,
+  TOOLPAD_TARGET_CE,
+  TOOLPAD_TARGET_PRO,
+  DOCUMENTATION_URL,
+  DOCUMENTATION_INSTALLATION_URL,
+} from '../../../../constants';
+import client from '../../../../api';
+
+const REPORT_BUG_URL =
+  'https://github.com/mui/mui-toolpad/issues/new?assignees=&labels=status%3A+needs+triage&template=1.bug.yml';
+const FEATURE_REQUEST_URL = 'https://github.com/mui/mui-toolpad/issues';
+const CURRENT_RELEASE_VERSION = `v${process.env.TOOLPAD_VERSION}`;
+
+interface FeedbackMenuItemLinkProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+function FeedbackMenuItemLink({ href, children }: FeedbackMenuItemLinkProps) {
+  return (
+    <MenuItem component="a" target="_blank" href={href}>
+      <ListItemText>{children}</ListItemText>
+      <OpenInNewIcon fontSize="inherit" sx={{ ml: 3, color: 'text.secondary' }} />
+    </MenuItem>
+  );
+}
+
+function getReadableTarget(): string {
+  switch (process.env.TOOLPAD_TARGET) {
+    case TOOLPAD_TARGET_CLOUD:
+      return 'Cloud';
+    case TOOLPAD_TARGET_CE:
+      return 'Community Edition';
+    case TOOLPAD_TARGET_PRO:
+      return 'Pro';
+    default:
+      return 'Unknown';
+  }
+}
+
+function UserFeedback() {
+  const { buttonProps, menuProps } = useMenu();
+
+  const { data: latestRelease } = client.useQuery('getLatestToolpadRelease', [], {
+    staleTime: 1000 * 60 * 10,
+    enabled: process.env.TOOLPAD_TARGET !== TOOLPAD_TARGET_CLOUD,
+  });
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Help and resources">
+        <IconButton {...buttonProps} color="inherit">
+          <HelpOutlinedIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu {...menuProps}>
+        <FeedbackMenuItemLink href={DOCUMENTATION_URL}>Documentation</FeedbackMenuItemLink>
+        <FeedbackMenuItemLink href={REPORT_BUG_URL}>Report bug</FeedbackMenuItemLink>
+        <FeedbackMenuItemLink href={FEATURE_REQUEST_URL}>
+          Request or upvote feature
+        </FeedbackMenuItemLink>
+        <Divider />
+        <MenuItem disabled>{getReadableTarget()}</MenuItem>
+        {latestRelease && latestRelease.tag !== CURRENT_RELEASE_VERSION ? (
+          <MenuItem
+            component="a"
+            target="_blank"
+            href={DOCUMENTATION_INSTALLATION_URL}
+            sx={{ justifyContent: 'space-between' }}
+          >
+            Version {process.env.TOOLPAD_VERSION}
+            <Chip size="small" color="error" variant="outlined" label="Update" clickable />
+          </MenuItem>
+        ) : (
+          <MenuItem disabled>Version {process.env.TOOLPAD_VERSION}</MenuItem>
+        )}
+        <MenuItem disabled>Build {process.env.TOOLPAD_BUILD}</MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+export default UserFeedback;
diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell/Header/index.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell/Header/index.tsx
new file mode 100644
index 00000000000..fc552b1d231
--- /dev/null
+++ b/packages/toolpad-app/src/toolpad/ToolpadShell/Header/index.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { AppBar, Box, Toolbar, Tooltip, Chip, Link, useTheme } from '@mui/material';
+import Image from 'next/image';
+import UserFeedback from './UserFeedback';
+import productIconDark from '../../../../public/product-icon-dark.svg';
+import productIconLight from '../../../../public/product-icon-light.svg';
+
+export interface HeaderProps {
+  actions?: React.ReactNode;
+  status?: React.ReactNode;
+}
+
+function Header({ actions, status }: HeaderProps) {
+  const theme = useTheme();
+  return (
+    <AppBar
+      position="static"
+      color="default"
+      elevation={0}
+      sx={{ zIndex: 2, borderBottom: 1, borderColor: 'divider' }}
+    >
+      <Toolbar>
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'start',
+          }}
+        >
+          <Tooltip title="Home">
+            <Link
+              color="inherit"
+              aria-label="Home"
+              href="/"
+              underline="none"
+              sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}
+            >
+              <Image
+                src={theme.palette.mode === 'dark' ? productIconDark : productIconLight}
+                alt="Toolpad product icon"
+                width={25}
+                height={25}
+              />
+              <Box
+                data-testid="brand"
+                sx={{
+                  color: 'primary.main',
+                  lineHeight: '21px',
+                  fontSize: '16px',
+                  fontWeight: 700,
+                }}
+              >
+                MUI Toolpad
+              </Box>
+            </Link>
+          </Tooltip>
+          {process.env.TOOLPAD_DEMO ? (
+            <Chip sx={{ ml: 2 }} label="Demo Version" color="primary" size="small" />
+          ) : null}
+        </Box>
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {actions}
+        </Box>
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'end',
+            gap: 2,
+          }}
+        >
+          {status}
+          <UserFeedback />
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default Header;
diff --git a/packages/toolpad-app/src/toolpad/ToolpadShell/index.tsx b/packages/toolpad-app/src/toolpad/ToolpadShell/index.tsx
new file mode 100644
index 00000000000..9a1e8c3f4d7
--- /dev/null
+++ b/packages/toolpad-app/src/toolpad/ToolpadShell/index.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { styled } from '@mui/material';
+import Header from './Header';
+
+export interface ToolpadShellProps {
+  actions?: React.ReactNode;
+  status?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const ToolpadShellRoot = styled('div')({
+  width: '100vw',
+  minHeight: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const ViewPort = styled('div')({
+  flex: 1,
+  overflow: 'auto',
+  position: 'relative',
+});
+
+export default function ToolpadShell({ children, ...props }: ToolpadShellProps) {
+  return (
+    <ToolpadShellRoot>
+      <Header {...props} />
+      <ViewPort>{children}</ViewPort>
+    </ToolpadShellRoot>
+  );
+}