diff --git a/src/frontend/src/defaults/links.tsx b/src/frontend/src/defaults/links.tsx
index e798c6159e..0c51b6b521 100644
--- a/src/frontend/src/defaults/links.tsx
+++ b/src/frontend/src/defaults/links.tsx
@@ -22,6 +22,7 @@ export const footerLinks = [
 export const navTabs = [
   { text: <Trans>Home</Trans>, name: 'home' },
   { text: <Trans>Dashboard</Trans>, name: 'dashboard' },
+  { text: <Trans>Playground</Trans>, name: 'playground' },
   { text: <Trans>Parts</Trans>, name: 'parts' },
   { text: <Trans>Stock</Trans>, name: 'stock' },
   { text: <Trans>Build</Trans>, name: 'build' }
diff --git a/src/frontend/src/defaults/menuItems.tsx b/src/frontend/src/defaults/menuItems.tsx
index 0165f8749c..4de822cfc0 100644
--- a/src/frontend/src/defaults/menuItems.tsx
+++ b/src/frontend/src/defaults/menuItems.tsx
@@ -15,5 +15,11 @@ export const menuItems: MenuLinkItem[] = [
     text: <Trans>Profile page</Trans>,
     link: '/profile/user',
     doctext: <Trans>User attributes and design settings.</Trans>
+  },
+  {
+    id: 'playground',
+    text: <Trans>Playground</Trans>,
+    link: '/playground',
+    highlight: true
   }
 ];
diff --git a/src/frontend/src/pages/Index/Playground.tsx b/src/frontend/src/pages/Index/Playground.tsx
new file mode 100644
index 0000000000..ecfa4eef8b
--- /dev/null
+++ b/src/frontend/src/pages/Index/Playground.tsx
@@ -0,0 +1,23 @@
+import { Trans } from '@lingui/macro';
+import { Group, Text } from '@mantine/core';
+
+import { PlaceholderPill } from '../../components/items/Placeholder';
+import { StylishText } from '../../components/items/StylishText';
+
+export default function Playground() {
+  return (
+    <>
+      <Group>
+        <StylishText>
+          <Trans>Playground</Trans>
+        </StylishText>
+        <PlaceholderPill />
+      </Group>
+      <Text>
+        <Trans>
+          This page is a showcase for the possibilities of Platform UI.
+        </Trans>
+      </Text>
+    </>
+  );
+}
diff --git a/src/frontend/src/router.tsx b/src/frontend/src/router.tsx
index c70239e51c..ef2d97e39d 100644
--- a/src/frontend/src/router.tsx
+++ b/src/frontend/src/router.tsx
@@ -8,6 +8,9 @@ export const LayoutComponent = Loadable(
   lazy(() => import('./components/nav/Layout'))
 );
 export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
+export const Playground = Loadable(
+  lazy(() => import('./pages/Index/Playground'))
+);
 export const Parts = Loadable(lazy(() => import('./pages/Index/Part')));
 export const Stock = Loadable(lazy(() => import('./pages/Index/Stock')));
 export const Build = Loadable(lazy(() => import('./pages/Index/Build')));
@@ -52,6 +55,10 @@ export const router = createBrowserRouter(
           path: 'dashboard/',
           element: <Dashboard />
         },
+        {
+          path: 'playground/',
+          element: <Playground />
+        },
         {
           path: 'parts/',
           element: <Parts />