diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
new file mode 100644
index 0000000000..d8c8cbfce4
--- /dev/null
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let wide = false
+</script>
+
+<div class:wide>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: 1fr;
+    max-width: 80ch;
+    margin: 0 auto;
+    padding: calc(var(--spacing-xl) * 2);
+  }
+
+  .wide {
+    max-width: none;
+    margin: 0;
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index e1b68cb35f..9d47958461 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -28,6 +28,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"