diff --git a/site/pages/blank.mdx b/site/pages/blank.mdx
new file mode 100644
index 00000000..ae9df737
--- /dev/null
+++ b/site/pages/blank.mdx
@@ -0,0 +1,8 @@
+---
+outline: false
+# sidebar: false
+---
+
+# Blank page
+
+This is a blank page.
\ No newline at end of file
diff --git a/src/app/components/DesktopTopNav.css.ts b/src/app/components/DesktopTopNav.css.ts
index a3fca8da..56554a91 100644
--- a/src/app/components/DesktopTopNav.css.ts
+++ b/src/app/components/DesktopTopNav.css.ts
@@ -1,7 +1,9 @@
 import { style } from '@vanilla-extract/css'
+import { leftGutterWidthVar } from '../layouts/DocsLayout.css.js'
 import {
   borderRadiusVars,
   primitiveColorVars,
+  sidebarVars,
   spaceVars,
   topNavVars,
   viewportVars,
@@ -69,6 +71,27 @@ export const icon = style(
 
 export const item = style({ alignItems: 'center', display: 'flex', height: '100%' }, 'item')
 
+export const logo = style(
+  {
+    paddingLeft: sidebarVars.horizontalPadding,
+    paddingRight: sidebarVars.horizontalPadding,
+    width: sidebarVars.width,
+  },
+  'logo',
+)
+
+export const logoWrapper = style(
+  {
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'flex-end',
+    left: 0,
+    position: 'absolute',
+    width: leftGutterWidthVar,
+  },
+  'logoWrapper',
+)
+
 export const section = style(
   { alignItems: 'center', display: 'flex', height: '100%', gap: spaceVars[16] },
   'section',
diff --git a/src/app/components/DesktopTopNav.tsx b/src/app/components/DesktopTopNav.tsx
index f9c0517c..1c6ed92e 100644
--- a/src/app/components/DesktopTopNav.tsx
+++ b/src/app/components/DesktopTopNav.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../hooks/useTheme.js'
 import { visibleDark, visibleLight } from '../styles/utils.css.js'
 import * as styles from './DesktopTopNav.css.js'
 import { Icon } from './Icon.js'
+import { Logo } from './Logo.js'
 import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
 import { Moon } from './icons/Moon.js'
@@ -18,6 +19,11 @@ export function DesktopTopNav() {
   const config = useConfig()
   return (
     <div className={styles.root}>
+      <div className={styles.logoWrapper}>
+        <div className={styles.logo}>
+          <Logo />
+        </div>
+      </div>
       <div className={styles.section} />
       <div className={styles.section}>
         {config.socials && (
diff --git a/src/app/components/Logo.css.ts b/src/app/components/Logo.css.ts
new file mode 100644
index 00000000..c0713349
--- /dev/null
+++ b/src/app/components/Logo.css.ts
@@ -0,0 +1,29 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { fontSizeVars, fontWeightVars, lineHeightVars } from '../styles/vars.css.js'
+
+export const logoImage = style(
+  {
+    height: '30%',
+    width: 'max-content',
+  },
+  'logoImage',
+)
+
+export const logoDark = style({}, 'logoDark')
+globalStyle(`:root:not(.dark) ${logoDark}`, {
+  display: 'none',
+})
+
+export const logoLight = style({}, 'logoLight')
+globalStyle(`:root.dark ${logoLight}`, {
+  display: 'none',
+})
+
+export const title = style(
+  {
+    fontSize: fontSizeVars['18'],
+    fontWeight: fontWeightVars.semibold,
+    lineHeight: lineHeightVars.heading,
+  },
+  'title',
+)
diff --git a/src/app/components/Logo.tsx b/src/app/components/Logo.tsx
new file mode 100644
index 00000000..77c39ece
--- /dev/null
+++ b/src/app/components/Logo.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import { Link } from 'react-router-dom'
+
+import { useConfig } from '../hooks/useConfig.js'
+import * as styles from './Logo.css.js'
+
+export function Logo() {
+  const config = useConfig()
+  return (
+    <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
+      {config.logoUrl ? (
+        <>
+          {typeof config.logoUrl === 'string' ? (
+            <img alt="Logo" className={styles.logoImage} src={config.logoUrl} />
+          ) : (
+            <>
+              <img
+                alt="Logo"
+                className={clsx(styles.logoImage, styles.logoDark)}
+                src={config.logoUrl.dark}
+              />
+              <img
+                alt="Logo"
+                className={clsx(styles.logoImage, styles.logoLight)}
+                src={config.logoUrl.light}
+              />
+            </>
+          )}
+        </>
+      ) : (
+        <div className={styles.title}>{config.title}</div>
+      )}
+    </Link>
+  )
+}
diff --git a/src/app/components/Sidebar.css.ts b/src/app/components/Sidebar.css.ts
index 0c4d0824..0a51b9bc 100644
--- a/src/app/components/Sidebar.css.ts
+++ b/src/app/components/Sidebar.css.ts
@@ -22,6 +22,15 @@ export const root = style({
   },
 })
 
+export const divider = style(
+  {
+    backgroundColor: primitiveColorVars.border,
+    width: '100%',
+    height: '1px',
+  },
+  'divider',
+)
+
 export const item = style(
   {
     color: primitiveColorVars.text3,
@@ -52,36 +61,23 @@ export const items = style(
 export const logo = style(
   {
     alignItems: 'center',
-    borderBottom: `1px solid ${primitiveColorVars.border}`,
     display: 'flex',
     height: topNavVars.height,
-    '@media': {
-      'screen and (max-width: 1080px)': {
-        display: 'none',
-      },
-    },
   },
   'logo',
 )
 
-export const logoImage = style(
+export const logoWrapper = style(
   {
-    height: '30%',
-    width: 'max-content',
+    '@media': {
+      'screen and (max-width: 1080px)': {
+        display: 'none',
+      },
+    },
   },
-  'logoImage',
+  'logoWrapper',
 )
 
-export const logoDark = style({}, 'logoDark')
-globalStyle(`:root:not(.dark) ${logoDark}`, {
-  display: 'none',
-})
-
-export const logoLight = style({}, 'logoLight')
-globalStyle(`:root.dark ${logoLight}`, {
-  display: 'none',
-})
-
 export const navigation = style(
   {
     selectors: {
@@ -151,12 +147,3 @@ export const socials = style(
   },
   'socials',
 )
-
-export const title = style(
-  {
-    fontSize: fontSizeVars['18'],
-    fontWeight: fontWeightVars.semibold,
-    lineHeight: lineHeightVars.heading,
-  },
-  'title',
-)
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
index 9d17f5a5..aeb260d3 100644
--- a/src/app/components/Sidebar.tsx
+++ b/src/app/components/Sidebar.tsx
@@ -5,6 +5,7 @@ import { Link, useMatch } from 'react-router-dom'
 import type { ParsedSocialItem } from '../../config.js'
 import { useConfig } from '../hooks/useConfig.js'
 import { Icon } from './Icon.js'
+import { Logo } from './Logo.js'
 import * as styles from './Sidebar.css.js'
 import { Discord } from './icons/Discord.js'
 import { GitHub } from './icons/GitHub.js'
@@ -20,31 +21,13 @@ export function Sidebar({
   if (!sidebar) return null
   return (
     <aside className={clsx(styles.root, className)}>
-      <div className={styles.logo}>
-        <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
-          {config.logoUrl ? (
-            <>
-              {typeof config.logoUrl === 'string' ? (
-                <img alt="Logo" className={styles.logoImage} src={config.logoUrl} />
-              ) : (
-                <>
-                  <img
-                    alt="Logo"
-                    className={clsx(styles.logoImage, styles.logoDark)}
-                    src={config.logoUrl.dark}
-                  />
-                  <img
-                    alt="Logo"
-                    className={clsx(styles.logoImage, styles.logoLight)}
-                    src={config.logoUrl.light}
-                  />
-                </>
-              )}
-            </>
-          ) : (
-            <div className={styles.title}>{config.title}</div>
-          )}
-        </Link>
+      <div className={styles.logoWrapper}>
+        <div className={styles.logo}>
+          <Link to="/" style={{ alignItems: 'center', display: 'flex', height: '100%' }}>
+            <Logo />
+          </Link>
+        </div>
+        <div className={styles.divider} />
       </div>
       <nav className={styles.navigation}>
         <section className={styles.section}>
diff --git a/src/app/hooks/usePageData.ts b/src/app/hooks/usePageData.ts
index 67cd4da2..1e9d1b5d 100644
--- a/src/app/hooks/usePageData.ts
+++ b/src/app/hooks/usePageData.ts
@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react'
+import { createContext, useContext } from 'react'
 
 import { type Module } from '../types.js'
 
diff --git a/src/app/layouts/DocsLayout.css.ts b/src/app/layouts/DocsLayout.css.ts
index 5796e0aa..bec6569e 100644
--- a/src/app/layouts/DocsLayout.css.ts
+++ b/src/app/layouts/DocsLayout.css.ts
@@ -9,7 +9,7 @@ import {
   zIndexVars,
 } from '../styles/vars.css.js'
 
-const leftGutterWidthVar = createVar('leftGutterWidth')
+export const leftGutterWidthVar = createVar('leftGutterWidth')
 
 export const root = style({
   vars: {
@@ -19,7 +19,8 @@ export const root = style({
 
 export const content = style(
   {
-    marginLeft: leftGutterWidthVar,
+    marginLeft: 'auto',
+    marginRight: 'auto',
     maxWidth: contentVars.width,
     minHeight: `calc(100vh - (${topNavVars.height} + ${topNavVars.curtainHeight}))`,
     '@media': {
@@ -35,6 +36,14 @@ export const content = style(
   'content',
 )
 
+export const content_withSidebar = style(
+  {
+    marginLeft: leftGutterWidthVar,
+    marginRight: 'unset',
+  },
+  'content_withSidebar',
+)
+
 export const gutterLeft = style(
   {
     backgroundColor: primitiveColorVars.backgroundDark,
@@ -61,7 +70,7 @@ export const gutterTop = style(
     zIndex: zIndexVars.gutterTop,
     '@media': {
       [viewportVars['min-1080px']]: {
-        paddingLeft: leftGutterWidthVar,
+        paddingLeft: `calc(${leftGutterWidthVar} - ${sidebarVars.width})`,
         paddingRight: `calc(${leftGutterWidthVar} - ${sidebarVars.width})`,
         position: 'fixed',
         top: 0,
@@ -74,6 +83,17 @@ export const gutterTop = style(
   'gutterTop',
 )
 
+export const gutterTop_withSidebar = style(
+  {
+    '@media': {
+      [viewportVars['min-1080px']]: {
+        paddingLeft: leftGutterWidthVar,
+      },
+    },
+  },
+  'gutterTop_withSidebar',
+)
+
 export const gutterTopCurtain = style(
   {
     display: 'flex',
@@ -82,7 +102,6 @@ export const gutterTopCurtain = style(
     zIndex: zIndexVars.gutterTop,
     '@media': {
       [viewportVars['min-1080px']]: {
-        marginLeft: leftGutterWidthVar,
         position: 'fixed',
         top: topNavVars.height,
       },
@@ -95,6 +114,17 @@ export const gutterTopCurtain = style(
   'gutterTopCurtain',
 )
 
+export const gutterTopCurtain_withSidebar = style(
+  {
+    '@media': {
+      [viewportVars['min-1080px']]: {
+        marginLeft: leftGutterWidthVar,
+      },
+    },
+  },
+  'gutterTopCurtain_withSidebar',
+)
+
 export const gutterRight = style(
   {
     display: 'flex',
@@ -104,7 +134,7 @@ export const gutterRight = style(
     position: 'fixed',
     top: '0',
     right: '0',
-    width: `calc(100vw - ${contentVars.width} - ${leftGutterWidthVar})`,
+    width: `calc((100vw - ${contentVars.width}) / 2)`,
     zIndex: zIndexVars.gutterRight,
     '@media': {
       [viewportVars['max-1280px']]: {
@@ -115,6 +145,13 @@ export const gutterRight = style(
   'gutterRight',
 )
 
+export const gutterRight_withSidebar = style(
+  {
+    width: `calc(100vw - ${contentVars.width} - ${leftGutterWidthVar})`,
+  },
+  'gutterRight_withSidebar',
+)
+
 export const outlinePopover = style(
   {
     display: 'none',
diff --git a/src/app/layouts/DocsLayout.tsx b/src/app/layouts/DocsLayout.tsx
index 83900009..8506f7f6 100644
--- a/src/app/layouts/DocsLayout.tsx
+++ b/src/app/layouts/DocsLayout.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { ReactNode } from 'react'
 import { useInView } from 'react-intersection-observer'
 
@@ -7,6 +8,8 @@ import { Footer } from '../components/Footer.js'
 import { MobileTopNav } from '../components/MobileTopNav.js'
 import { Outline } from '../components/Outline.js'
 import { Sidebar } from '../components/Sidebar.js'
+import { useConfig } from '../hooks/useConfig.js'
+import { usePageData } from '../hooks/usePageData.js'
 import * as styles from './DocsLayout.css.js'
 
 export function DocsLayout({
@@ -14,6 +17,20 @@ export function DocsLayout({
 }: {
   children: ReactNode
 }) {
+  const config = useConfig()
+  const { sidebar } = config
+
+  const { frontmatter } = usePageData()
+
+  const showOutline = (() => {
+    if (frontmatter && 'outline' in frontmatter) return frontmatter.outline
+    return true
+  })()
+  const showSidebar = (() => {
+    if (frontmatter && 'sidebar' in frontmatter) return frontmatter.sidebar
+    return Boolean(sidebar)
+  })()
+
   const { ref, inView } = useInView({
     initialInView: true,
     rootMargin: '100px 0px 0px 0px',
@@ -21,25 +38,37 @@ export function DocsLayout({
 
   return (
     <div className={styles.root}>
-      <div className={styles.gutterLeft}>
-        <Sidebar className={styles.sidebar} />
-      </div>
-      <div ref={ref} className={styles.gutterTop}>
+      {showSidebar && (
+        <div className={styles.gutterLeft}>
+          <Sidebar className={styles.sidebar} />
+        </div>
+      )}
+      <div
+        ref={ref}
+        className={clsx(styles.gutterTop, showSidebar && styles.gutterTop_withSidebar)}
+      >
         <DesktopTopNav />
         <MobileTopNav />
       </div>
-      <div className={styles.gutterTopCurtain}>
+      <div
+        className={clsx(
+          styles.gutterTopCurtain,
+          showSidebar && styles.gutterTopCurtain_withSidebar,
+        )}
+      >
         <DesktopTopNav.Curtain />
         <MobileTopNav.Curtain enableScrollToTop={!inView} />
       </div>
-      <div className={styles.content}>
+      <div className={clsx(styles.content, showSidebar && styles.content_withSidebar)}>
         <Content>{children}</Content>
         <Footer />
       </div>
       <div data-bottom-observer />
-      <div className={styles.gutterRight}>
-        <Outline />
-      </div>
+      {showOutline && (
+        <div className={clsx(styles.gutterRight, showSidebar && styles.gutterRight_withSidebar)}>
+          <Outline />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/app/types.ts b/src/app/types.ts
index c14865fb..11f23f0b 100644
--- a/src/app/types.ts
+++ b/src/app/types.ts
@@ -4,6 +4,8 @@ import * as React from 'react'
 export type Frontmatter = {
   [key: string]: unknown
   description?: string
+  outline?: boolean
+  sidebar?: boolean
   title?: string
 }