diff --git a/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx b/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx
new file mode 100644
index 00000000000..f5ed7d6a1d8
--- /dev/null
+++ b/packages/toolpad-core/src/DashboardLayout/ToolpadLogo.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+export default function ToolpadLogo({ size = 40 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g mask="url(#a)">
+        <path d="M22.74 27.73v-7.6l6.64-3.79v7.6l-6.64 3.79Z" fill="#007FFF" />
+        <path d="M16.1 23.93v-7.59l6.64 3.8v7.59l-6.65-3.8Z" fill="#39F" />
+        <path d="m16.1 16.34 6.64-3.8 6.64 3.8-6.64 3.8-6.65-3.8Z" fill="#A5D8FF" />
+      </g>
+      <mask
+        id="b"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="8"
+        y="17"
+        width="14"
+        height="15"
+      >
+        <path
+          d="M8.5 22.3c0-1.05.56-2 1.46-2.53l3.75-2.14c.89-.5 1.98-.5 2.87 0l3.75 2.14a2.9 2.9 0 0 1 1.46 2.52v4.23c0 1.04-.56 2-1.46 2.52l-3.75 2.14c-.89.5-1.98.5-2.87 0l-3.75-2.14a2.9 2.9 0 0 1-1.46-2.52v-4.23Z"
+          fill="#D7DCE1"
+        />
+      </mask>
+      <g mask="url(#b)">
+        <path d="M15.14 32v-7.6l6.65-3.8v7.6L15.14 32Z" fill="#007FFF" />
+        <path d="M8.5 28.2v-7.6l6.64 3.8V32L8.5 28.2Z" fill="#39F" />
+        <path d="m8.5 20.6 6.64-3.79 6.65 3.8-6.65 3.8-6.64-3.8Z" fill="#A5D8FF" />
+      </g>
+      <mask
+        id="c"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="8"
+        y="4"
+        width="22"
+        height="20"
+      >
+        <path
+          d="M24.17 4.82a2.9 2.9 0 0 0-2.87 0L9.97 11.22a2.9 2.9 0 0 0-1.47 2.53v4.22c0 1.04.56 2 1.46 2.52l3.75 2.14c.89.5 1.98.5 2.87 0l11.33-6.42a2.9 2.9 0 0 0 1.47-2.52V9.48c0-1.04-.56-2-1.46-2.52l-3.75-2.14Z"
+          fill="#D7DCE1"
+        />
+      </mask>
+      <g mask="url(#c)">
+        <path d="M15.14 23.46v-7.6L29.38 7.8v7.59l-14.24 8.07Z" fill="#007FFF" />
+        <path d="M8.5 19.66v-7.6l6.64 3.8v7.6l-6.64-3.8Z" fill="#39F" />
+        <path d="M8.5 12.07 22.74 4l6.64 3.8-14.24 8.06-6.64-3.8Z" fill="#A5D8FF" />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/toolpad-core/src/index.ts b/packages/toolpad-core/src/index.ts
index f71afdb4dcf..6f9654e4003 100644
--- a/packages/toolpad-core/src/index.ts
+++ b/packages/toolpad-core/src/index.ts
@@ -2,3 +2,5 @@ export { AppProvider } from './AppProvider';
 export type { Branding, Navigation } from './AppProvider';
 
 export { DashboardLayout } from './DashboardLayout';
+
+export * from './themes';
diff --git a/playground/toolpad-core-nextjs/src/app/theme.ts b/playground/toolpad-core-nextjs/src/app/theme.ts
new file mode 100644
index 00000000000..b406670651b
--- /dev/null
+++ b/playground/toolpad-core-nextjs/src/app/theme.ts
@@ -0,0 +1,116 @@
+'use client';
+
+import { createTheme } from '@mui/material/styles';
+
+const baseTheme = createTheme();
+
+const theme = createTheme(baseTheme, {
+  palette: {
+    background: {
+      default: baseTheme.palette.grey['50'],
+    },
+  },
+  typography: {
+    h6: {
+      fontWeight: '700',
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderStyle: 'solid',
+          borderColor: baseTheme.palette.divider,
+          boxShadow: 'none',
+        },
+      },
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: baseTheme.palette.primary.dark,
+          padding: 8,
+        },
+      },
+    },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          color: baseTheme.palette.grey['600'],
+          fontSize: 12,
+          fontWeight: '700',
+          height: 40,
+          paddingLeft: 32,
+        },
+      },
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      },
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          '&.Mui-selected': {
+            '& .MuiListItemIcon-root': {
+              color: baseTheme.palette.primary.dark,
+            },
+            '& .MuiTypography-root': {
+              color: baseTheme.palette.primary.dark,
+            },
+            '& .MuiSvgIcon-root': {
+              color: baseTheme.palette.primary.dark,
+            },
+            '& .MuiTouchRipple-child': {
+              backgroundColor: baseTheme.palette.primary.dark,
+            },
+          },
+          '& .MuiSvgIcon-root': {
+            color: baseTheme.palette.action.active,
+          },
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          '& .MuiTypography-root': {
+            fontWeight: '500',
+          },
+        },
+      },
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 34,
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderBottomWidth: 2,
+          marginLeft: '16px',
+          marginRight: '16px',
+        },
+      },
+    },
+  },
+});
+
+export default theme;