diff --git a/generator/konfig-next-app/src/OperationReferenceMain.tsx b/generator/konfig-next-app/src/OperationReferenceMain.tsx
index d6aa73974..9f9dbac7b 100644
--- a/generator/konfig-next-app/src/OperationReferenceMain.tsx
+++ b/generator/konfig-next-app/src/OperationReferenceMain.tsx
@@ -44,6 +44,7 @@ import { notifications } from '@mantine/notifications'
 import localforage from 'localforage'
 import { ReferencePageProps } from './utils/generate-props-for-reference-page'
 import { SocialFooter } from './components/SocialFooter'
+import { Breadcrumbs } from './components/Breadcrumbs'
 
 export function OperationReferenceMain({
   pathParameters,
@@ -206,6 +207,8 @@ export function OperationReferenceMain({
     }
   }
 
+  const header = operation.operation.summary ?? operation.path
+
   return (
     <FormProvider form={form}>
       <form
@@ -258,13 +261,14 @@ export function OperationReferenceMain({
           justify={{ base: undefined, sm: 'space-around' }}
           pt="sm"
         >
-          <Stack px="sm" w={{ base: '100%', sm: '55%' }} spacing="xl">
-            <Stack spacing="xs">
+          <Stack px="sm" w={{ base: '100%', sm: '55%' }} spacing="md">
+            <Stack mb="lg" spacing="xs">
+              <Breadcrumbs breadcrumbs={[tag, header]} />
               <Title
                 color={colorScheme === 'dark' ? theme.white : undefined}
                 order={2}
               >
-                {operation.operation.summary ?? operation.path}
+                {header}
               </Title>
               <Group>
                 <HttpMethodBadge httpMethod={operation.method} />
@@ -298,7 +302,7 @@ export function OperationReferenceMain({
               requestBodyRequired={requestBodyRequired}
             />
             {responses && (
-              <Box>
+              <Box my="lg">
                 <Title order={4}>Responses</Title>
                 <Divider my="sm" />
                 <Stack>
diff --git a/generator/konfig-next-app/src/components/DemoDivider.tsx b/generator/konfig-next-app/src/components/DemoDivider.tsx
index cec8c42e8..d69e0c944 100644
--- a/generator/konfig-next-app/src/components/DemoDivider.tsx
+++ b/generator/konfig-next-app/src/components/DemoDivider.tsx
@@ -8,7 +8,7 @@ const _DemoDivider: Components['hr'] = ({
   children,
   siblingCount,
 }) => {
-  return <Divider mt="sm" mb="xl" />
+  return <Divider my="xl" />
 }
 
 export const DemoDivider = observer(_DemoDivider)
diff --git a/generator/konfig-next-app/src/components/DemoMarkdown.tsx b/generator/konfig-next-app/src/components/DemoMarkdown.tsx
index 445bd54e5..518d08381 100644
--- a/generator/konfig-next-app/src/components/DemoMarkdown.tsx
+++ b/generator/konfig-next-app/src/components/DemoMarkdown.tsx
@@ -137,11 +137,17 @@ const useStyles = createStyles((theme) => ({
   markdown: {
     'h1:first-of-type': {
       marginTop: 0,
+      '::after': {
+        display: 'none',
+      },
     },
   },
   text: {
     img: {
       maxWidth: '100%',
+      display: 'block',
+      margin: 'auto',
+      borderRadius: theme.radius.md,
     },
   },
 }))
diff --git a/generator/konfig-next-app/src/components/DemoPortal.tsx b/generator/konfig-next-app/src/components/DemoPortal.tsx
index b0fe4ce8b..d718d8319 100644
--- a/generator/konfig-next-app/src/components/DemoPortal.tsx
+++ b/generator/konfig-next-app/src/components/DemoPortal.tsx
@@ -35,6 +35,11 @@ import { DemoHeader } from './DemoHeader'
 import type { SocialObject } from 'konfig-lib/dist/KonfigYamlCommon'
 import Head from 'next/head'
 import { NAVBAR_WIDTH } from './ReferenceNavbar'
+import { proseContainerWidthStyles } from '@/utils/prose-container-width-styles'
+import { FlexCenter } from '@/components/FlexCenter'
+import { navLinkColor } from '@/utils/nav-link-color'
+import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'
+import { navbarOffsetBreakpoint } from '@/utils/navbar-offset-breakpoint'
 
 type DemosInput = Demo[]
 
@@ -184,6 +189,8 @@ export const DemoPortal = observer(
     // We need to access dummyState to tell MobX to track it
     state.dummyState
 
+    console.log(!opened)
+
     return (
       <SandboxContext.Provider value={!!sandbox}>
         {sandbox && (
@@ -210,23 +217,23 @@ export const DemoPortal = observer(
           </Affix>
         )}
         <AppShell
+          asideOffsetBreakpoint={asideOffsetBreakpoint}
+          navbarOffsetBreakpoint={navbarOffsetBreakpoint}
           styles={{
             main: {
               background:
                 colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
             },
           }}
-          navbarOffsetBreakpoint="sm"
-          asideOffsetBreakpoint="lg"
           navbar={
             <Navbar
-              hiddenBreakpoint="sm"
+              hiddenBreakpoint={navbarOffsetBreakpoint}
               hidden={!opened}
-              width={{ lg: NAVBAR_WIDTH }}
+              width={{ [navbarOffsetBreakpoint]: NAVBAR_WIDTH }}
               sx={{
                 overflowY: 'scroll',
-                height:
-                  'calc(100% - var(--mantine-header-height, 0rem) - var(--mantine-footer-height, 0rem));',
+                // height:
+                //   'calc(100% - var(--mantine-header-height, 0rem) - var(--mantine-footer-height, 0rem));',
               }}
             >
               <Navbar.Section
@@ -310,17 +317,15 @@ export const DemoPortal = observer(
                             borderRadius: theme.radius.sm,
                           },
                           label: {
-                            color: isCurrentlySelected
-                              ? theme.colorScheme === 'dark'
-                                ? theme.colors.brand[2]
-                                : theme.colors.brand[8]
-                              : undefined,
+                            color: navLinkColor({
+                              active: isCurrentlySelected,
+                              theme,
+                            }),
                             fontSize: theme.fontSizes.sm,
                           },
                         }}
                         sx={(theme) => ({ borderRadius: theme.radius.sm })}
                         label={name}
-                        fw={isCurrentlySelected ? 'bold' : undefined}
                         active={isCurrentlySelected}
                       />
                     )
@@ -345,62 +350,67 @@ export const DemoPortal = observer(
             />
           }
         >
-          {/* We have to render all demos states at the start so they can each initialize their cells */}
-          {state.demos.map((demo, i) => {
-            const previousDemoState: DemoState | undefined =
-              i === 0 ? undefined : state.demos[i - 1]
-            const nextDemoState: DemoState | undefined =
-              i === state.demos.length - 1 ? undefined : state.demos[i + 1]
+          <FlexCenter>
+            {/* We have to render all demos states at the start so they can each initialize their cells */}
+            {state.demos.map((demo, i) => {
+              const previousDemoState: DemoState | undefined =
+                i === 0 ? undefined : state.demos[i - 1]
+              const nextDemoState: DemoState | undefined =
+                i === state.demos.length - 1 ? undefined : state.demos[i + 1]
 
-            const previous: Sibling | undefined =
-              previousDemoState === undefined ||
-              previousDemoState.portal === undefined
-                ? undefined
-                : {
-                    title: previousDemoState.name,
-                    organizationId: previousDemoState.portal.organizationId,
-                    demoId: previousDemoState.id,
-                    demoIndex: i - 1,
-                  }
-            const next: Sibling | undefined =
-              nextDemoState === undefined || nextDemoState.portal === undefined
-                ? undefined
-                : {
-                    title: nextDemoState.name,
-                    demoIndex: i + 1,
-                    organizationId: nextDemoState.portal.organizationId,
-                    demoId: nextDemoState.id,
-                  }
-            return (
-              <Fragment key={i}>
-                {state.currentDemoIndex === i && (
-                  <Head>
-                    <title>{demo.name}</title>
-                  </Head>
-                )}
-                <Box
-                  key={demo.name}
-                  display={state.currentDemoIndex !== i ? 'none' : undefined}
-                >
-                  <DemoLastRan demo={demo} />
-                  <DemoMarkdown state={demo} />
-                  <Box my={rem(40)}>
-                    <DemoEditThisPage portalState={state} />
-                  </Box>
-                  <DemoSiblings
-                    omitOwnerAndRepo={omitOwnerAndRepo}
-                    portal={state}
-                    previous={previous}
-                    next={next}
-                  />
-                  <Divider mt={rem(60)} />
-                  <Box my={rem(20)}>
-                    <DemoSocials socials={state.socials} />
+              const previous: Sibling | undefined =
+                previousDemoState === undefined ||
+                previousDemoState.portal === undefined
+                  ? undefined
+                  : {
+                      title: previousDemoState.name,
+                      organizationId: previousDemoState.portal.organizationId,
+                      demoId: previousDemoState.id,
+                      demoIndex: i - 1,
+                    }
+              const next: Sibling | undefined =
+                nextDemoState === undefined ||
+                nextDemoState.portal === undefined
+                  ? undefined
+                  : {
+                      title: nextDemoState.name,
+                      demoIndex: i + 1,
+                      organizationId: nextDemoState.portal.organizationId,
+                      demoId: nextDemoState.id,
+                    }
+              return (
+                <Fragment key={i}>
+                  {state.currentDemoIndex === i && (
+                    <Head>
+                      <title>{demo.name}</title>
+                    </Head>
+                  )}
+                  <Box
+                    display={state.currentDemoIndex !== i ? 'none' : undefined}
+                    mt="sm"
+                    key={demo.name}
+                    {...proseContainerWidthStyles}
+                  >
+                    <DemoLastRan demo={demo} />
+                    <DemoMarkdown state={demo} />
+                    <Box my={rem(40)}>
+                      <DemoEditThisPage portalState={state} />
+                    </Box>
+                    <DemoSiblings
+                      omitOwnerAndRepo={omitOwnerAndRepo}
+                      portal={state}
+                      previous={previous}
+                      next={next}
+                    />
+                    <Divider mt={rem(60)} />
+                    <Box my={rem(20)}>
+                      <DemoSocials socials={state.socials} />
+                    </Box>
                   </Box>
-                </Box>
-              </Fragment>
-            )
-          })}
+                </Fragment>
+              )
+            })}
+          </FlexCenter>
         </AppShell>
       </SandboxContext.Provider>
     )
diff --git a/generator/konfig-next-app/src/components/DemoTableOfContents.tsx b/generator/konfig-next-app/src/components/DemoTableOfContents.tsx
index 24007d3e0..b3d097266 100644
--- a/generator/konfig-next-app/src/components/DemoTableOfContents.tsx
+++ b/generator/konfig-next-app/src/components/DemoTableOfContents.tsx
@@ -13,6 +13,7 @@ import {
 import { IconList } from '@tabler/icons-react'
 import { TITLE_OFFSET_PX } from './DemoTitle'
 import { observer } from 'mobx-react'
+import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'
 
 const useStyles = createStyles((theme) => ({
   wrapper: {
@@ -189,7 +190,10 @@ export const DemoTableOfContents = observer(
     // if (headings.length === 0) return null
 
     return (
-      <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
+      <MediaQuery
+        smallerThan={asideOffsetBreakpoint}
+        styles={{ display: 'none' }}
+      >
         <Aside
           style={{
             backgroundColor:
@@ -199,7 +203,6 @@ export const DemoTableOfContents = observer(
           p="sm"
           pr="xl"
           pt="xl"
-          hiddenBreakpoint="lg"
           width={{ base: 300 }}
         >
           <nav className={cx(classes.wrapper)}>
diff --git a/generator/konfig-next-app/src/components/DemoTitle.tsx b/generator/konfig-next-app/src/components/DemoTitle.tsx
index 332f22670..945f42275 100644
--- a/generator/konfig-next-app/src/components/DemoTitle.tsx
+++ b/generator/konfig-next-app/src/components/DemoTitle.tsx
@@ -4,6 +4,7 @@ import {
   SystemProp,
   Title,
   TitleOrder,
+  createStyles,
   rem,
   useMantineTheme,
 } from '@mantine/core'
@@ -15,9 +16,40 @@ import { toText } from 'hast-util-to-text'
 import Slugger from 'github-slugger'
 import { TitleSize } from '@mantine/core/lib/Title/Title'
 import { linkColor } from '@/utils/link-color'
+import { useClipboard } from '@mantine/hooks'
+import { notifications } from '@mantine/notifications'
+import { LinkIcon } from './LinkIcon'
 
 export const TITLE_OFFSET_PX = 100
 
+const useStyles = createStyles((theme) => ({
+  anchor: {
+    ':hover::after': {
+      opacity: 1,
+      transform: 'none',
+      visibility: 'visible',
+      '--visibility-delay': '0s',
+    },
+    '::after': {
+      content: '""',
+      display: 'inline-block',
+      width: '0.8em',
+      height: '0.8em',
+      maxWidth: '20px',
+      maxHeight: '20px',
+      verticalAlign: 'middle',
+      marginLeft: '8px',
+      transition:
+        'opacity 0.2s, transform 0.2s, visibility 0s var(--visibility-delay,0.2s)',
+      opacity: '0',
+      visibility: 'hidden',
+      transform: 'translateX(-50%)',
+      backgroundSize: 'cover',
+      backgroundImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M9.306 10.206a.745.745 0 0 1 .066.977l-.066.076-2.458 2.458a3.228 3.228 0 0 1-4.691-4.431l.126-.133L4.74 6.694a.745.745 0 0 1 1.12.978l-.067.076-2.458 2.458a1.738 1.738 0 0 0 2.353 2.555l.105-.097 2.458-2.458a.745.745 0 0 1 1.054 0ZM9.83 6.17c.29.291.29.763 0 1.054l-2.48 2.48a.745.745 0 1 1-1.054-1.053l2.48-2.48a.745.745 0 0 1 1.054 0Zm3.888-3.887a3.228 3.228 0 0 1 .126 4.431l-.126.133-2.459 2.459a.745.745 0 0 1-1.12-.978l.067-.076 2.458-2.458a1.738 1.738 0 0 0-2.353-2.555l-.105.097-2.458 2.458a.745.745 0 0 1-1.12-.977l.066-.076 2.459-2.458a3.228 3.228 0 0 1 4.565 0Z' fill='%238A8F98'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")`,
+    },
+  },
+}))
+
 const _DemoTitle: Components['h1'] = ({
   children,
   node,
@@ -35,6 +67,7 @@ const _DemoTitle: Components['h1'] = ({
   )
   const ref = useRef<HTMLHeadingElement | null>(null)
   const theme = useMantineTheme()
+  const { classes } = useStyles()
 
   useEffect(() => {
     if (demoState === null) return
@@ -42,15 +75,39 @@ const _DemoTitle: Components['h1'] = ({
     demoState.headerIdToHtmlElement[slug] = ref.current
   }, [slug, demoState])
 
+  const clipboard = useClipboard()
+
+  // get current url and subpath without slug
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+
   return (
     <Title
-      sx={{ ':target': { scrollMarginTop: rem(TITLE_OFFSET_PX) } }}
+      sx={{ ':target': { scrollMarginTop: rem(TITLE_OFFSET_PX + 16) } }}
       ref={ref}
       id={slug}
       order={level as TitleOrder}
       mt={mt(level as TitleOrder)}
       size={size(level as TitleOrder)}
       color={linkColor({ theme })}
+      className={classes.anchor}
+      onClick={() => {
+        clipboard.copy(`${currentUrl}`)
+        notifications.show({
+          id: 'url-copied-to-your-clipboard',
+          radius: 'md',
+          withBorder: true,
+          styles: {
+            body: {
+              fontWeight: 500,
+            },
+            icon: {
+              backgroundColor: 'transparent',
+            },
+          },
+          message: 'URL copied to your clipboard',
+          icon: <LinkIcon />,
+        })
+      }}
     >
       <Anchor href={`#${slug}`} unstyled>
         {children}
diff --git a/generator/konfig-next-app/src/components/DocNavLink.tsx b/generator/konfig-next-app/src/components/DocNavLink.tsx
index 32d75137e..340c8e437 100644
--- a/generator/konfig-next-app/src/components/DocNavLink.tsx
+++ b/generator/konfig-next-app/src/components/DocNavLink.tsx
@@ -1,3 +1,4 @@
+import { navLinkColor } from '@/utils/nav-link-color'
 import { useBasePath } from '@/utils/use-base-path'
 import { NavLink, useMantineColorScheme, useMantineTheme } from '@mantine/core'
 import Link from 'next/link'
@@ -27,18 +28,13 @@ export function DocNavLink({
       onClick={() => setOpened(false)}
       key={id}
       py={8}
-      fw={active ? 'bold' : undefined}
       styles={{
         root: {
           borderRadius: theme.radius.sm,
         },
         label: {
           fontSize: theme.fontSizes.sm,
-          color: active
-            ? theme.colorScheme === 'dark'
-              ? theme.colors.brand[3]
-              : theme.colors.brand[8]
-            : undefined,
+          color: navLinkColor({ active, theme }),
         },
       }}
       component={Link}
diff --git a/generator/konfig-next-app/src/components/DocumentationHeader.tsx b/generator/konfig-next-app/src/components/DocumentationHeader.tsx
index a423a2041..6a8a71b5c 100644
--- a/generator/konfig-next-app/src/components/DocumentationHeader.tsx
+++ b/generator/konfig-next-app/src/components/DocumentationHeader.tsx
@@ -2,6 +2,7 @@ import { HeaderTabs, TABS } from './HeaderTabs'
 import { LayoutHeader } from './LayoutHeader'
 import { Dispatch, SetStateAction } from 'react'
 import { HeaderWrapper } from './HeaderWrapper'
+import { navbarOffsetBreakpoint } from '@/utils/navbar-offset-breakpoint'
 
 export function DocumentationHeader({
   opened,
@@ -25,7 +26,7 @@ export function DocumentationHeader({
   return (
     <HeaderWrapper>
       <LayoutHeader
-        breakpoint="lg"
+        breakpoint={navbarOffsetBreakpoint}
         opened={opened}
         setOpened={setOpened}
         title={title}
diff --git a/generator/konfig-next-app/src/components/FlexCenter.tsx b/generator/konfig-next-app/src/components/FlexCenter.tsx
new file mode 100644
index 000000000..5c449b626
--- /dev/null
+++ b/generator/konfig-next-app/src/components/FlexCenter.tsx
@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { Flex, FlexProps } from '@mantine/core'
+
+export function FlexCenter({
+  children,
+  ...props
+}: PropsWithChildren<FlexProps & React.RefAttributes<HTMLDivElement>>) {
+  return (
+    <Flex {...props} justify="center">
+      {children}
+    </Flex>
+  )
+}
diff --git a/generator/konfig-next-app/src/components/HeaderTab.tsx b/generator/konfig-next-app/src/components/HeaderTab.tsx
index e0ee0062e..d6195e85a 100644
--- a/generator/konfig-next-app/src/components/HeaderTab.tsx
+++ b/generator/konfig-next-app/src/components/HeaderTab.tsx
@@ -1,21 +1,25 @@
-import { Anchor, Group, createStyles, rem } from '@mantine/core'
+import { linkColor } from '@/utils/link-color'
+import { navLinkColor } from '@/utils/nav-link-color'
+import {
+  Anchor,
+  Group,
+  createStyles,
+  rem,
+  useMantineTheme,
+} from '@mantine/core'
 import { IconExternalLink } from '@tabler/icons-react'
 import { useRouter } from 'next/router'
 
 const useStyles = createStyles((theme) => ({
   tab: {
     fontSize: rem(13),
-    color:
-      theme.colorScheme === 'dark'
-        ? theme.colors.gray[5]
-        : theme.colors.gray[4],
-    padding: `${rem(7)} ${theme.spacing.sm}`,
+    padding: `${rem(10)} ${theme.spacing.sm}`,
     fontWeight: 700,
     borderBottom: `${rem(2)} solid transparent`,
     transition: 'border-color 100ms ease, color 100ms ease',
 
     '&:hover': {
-      color: theme.white,
+      color: linkColor({ theme }),
       textDecoration: 'none',
     },
   },
@@ -33,7 +37,6 @@ const useStyles = createStyles((theme) => ({
   },
 
   tabActive: {
-    color: `${theme.white} !important`,
     borderBottomColor:
       theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 5 : 3],
   },
@@ -68,6 +71,8 @@ export function HeaderTab({
     router.push(link, undefined)
   }
 
+  const theme = useMantineTheme()
+
   return (
     <Anchor<'a'>
       key={label}
@@ -75,6 +80,7 @@ export function HeaderTab({
       target="_blank"
       aria-disabled={disabled}
       onClick={handleClick}
+      color={navLinkColor({ active, theme })}
       className={cx(classes.tab, {
         [classes.tabActive]: active,
         [classes.tabDisabled]: disabled,
diff --git a/generator/konfig-next-app/src/components/LinkIcon.tsx b/generator/konfig-next-app/src/components/LinkIcon.tsx
new file mode 100644
index 000000000..d80dbeb62
--- /dev/null
+++ b/generator/konfig-next-app/src/components/LinkIcon.tsx
@@ -0,0 +1,11 @@
+import { linkColor } from '@/utils/link-color'
+import { useMantineColorScheme, useMantineTheme } from '@mantine/core'
+
+export function LinkIcon() {
+  const theme = useMantineTheme()
+  return (
+    <svg fill={linkColor({ theme })} width="16" height="16" viewBox="0 0 16 16">
+      <path d="M9.30558 10.206C9.57224 10.4726 9.59447 10.8912 9.37225 11.1831L9.30558 11.2594L6.84751 13.7175C5.58692 14.9781 3.54311 14.9781 2.28252 13.7175C1.0654 12.5004 1.02344 10.5531 2.15661 9.28564L2.28252 9.15251L4.74059 6.69443C5.0315 6.40353 5.50315 6.40353 5.79405 6.69443C6.06071 6.9611 6.08294 7.37963 5.86072 7.67161L5.79405 7.74789L3.33598 10.206C2.6572 10.8847 2.6572 11.9853 3.33598 12.664C3.98082 13.3089 5.00628 13.3411 5.68918 12.7608L5.79405 12.664L8.25212 10.206C8.54303 9.91506 9.01468 9.91506 9.30558 10.206ZM9.82982 6.17019C10.1207 6.46109 10.1207 6.93274 9.82982 7.22365L7.34921 9.70427C7.0583 9.99518 6.58665 9.99518 6.29575 9.70427C6.00484 9.41337 6.00484 8.94172 6.29575 8.65081L8.77637 6.17019C9.06727 5.87928 9.53892 5.87928 9.82982 6.17019ZM13.7175 2.2825C14.9346 3.49962 14.9766 5.44688 13.8434 6.71436L13.7175 6.84749L11.2594 9.30557C10.9685 9.59647 10.4969 9.59647 10.206 9.30557C9.93931 9.03891 9.91709 8.62037 10.1393 8.32839L10.206 8.25211L12.664 5.79403C13.3428 5.11525 13.3428 4.01474 12.664 3.33596C12.0192 2.69112 10.9938 2.65888 10.3109 3.23923L10.206 3.33596L7.74791 5.79403C7.457 6.08494 6.98535 6.08494 6.69445 5.79403C6.42779 5.52737 6.40556 5.10883 6.62778 4.81686L6.69445 4.74057L9.15252 2.2825C10.4131 1.02191 12.4569 1.02191 13.7175 2.2825Z"></path>
+    </svg>
+  )
+}
diff --git a/generator/konfig-next-app/src/components/LinksGroup.tsx b/generator/konfig-next-app/src/components/LinksGroup.tsx
index e819dd77d..c88ad09a3 100644
--- a/generator/konfig-next-app/src/components/LinksGroup.tsx
+++ b/generator/konfig-next-app/src/components/LinksGroup.tsx
@@ -15,6 +15,7 @@ import {
   createStyles,
   rem,
   NavLink,
+  MantineTheme,
 } from '@mantine/core'
 import {
   IconCalendarStats,
@@ -23,23 +24,25 @@ import {
 } from '@tabler/icons-react'
 import Link from 'next/link'
 import { HttpMethodBadge } from './HttpMethodBadge'
+import { linkColor } from '@/utils/link-color'
+import { navLinkColor } from '@/utils/nav-link-color'
 
 const useStyles = createStyles((theme) => ({
   control: {
     fontWeight: 500,
+    borderRadius: theme.radius.sm,
     display: 'block',
     width: '100%',
     padding: `${theme.spacing.xs} ${theme.spacing.md}`,
-    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
     fontSize: theme.fontSizes.sm,
 
-    '&:hover': {
+    // https://github.com/mantinedev/mantine/blob/6.0.13/src/mantine-core/src/NavLink/NavLink.styles.ts#L52
+    ...theme.fn.hover({
       backgroundColor:
         theme.colorScheme === 'dark'
-          ? theme.colors.dark[7]
+          ? theme.colors.dark[6]
           : theme.colors.gray[0],
-      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-    },
+    }),
   },
 
   linkWrapper: {
@@ -107,11 +110,7 @@ export function LinksGroup({
               borderRadius: theme.radius.sm,
             },
             label: {
-              color: link.active
-                ? theme.colorScheme === 'dark'
-                  ? theme.colors.brand[3]
-                  : theme.colors.brand[8]
-                : undefined,
+              color: navLinkColor({ active: link.active, theme }),
               fontSize: theme.fontSizes.sm,
             },
           }}
@@ -121,7 +120,6 @@ export function LinksGroup({
           href={link.link}
           label={link.label}
           active={link.active}
-          fw={link.active ? 'bold' : undefined}
           rightSection={
             <HttpMethodBadge size="xs" httpMethod={link.httpMethod} />
           }
@@ -130,11 +128,16 @@ export function LinksGroup({
     )
   })
 
+  const anyActiveLinks = links?.find((link) => link.active) !== undefined
+
   return (
     <>
       <UnstyledButton
         onClick={() => setOpened((o) => !o)}
         className={classes.control}
+        style={{
+          color: navLinkColor({ active: anyActiveLinks, theme }),
+        }}
         py={8}
       >
         <Group position="apart" spacing={0}>
diff --git a/generator/konfig-next-app/src/components/ReferenceNavbar.tsx b/generator/konfig-next-app/src/components/ReferenceNavbar.tsx
index bfaec4b8b..b3d48d3e2 100644
--- a/generator/konfig-next-app/src/components/ReferenceNavbar.tsx
+++ b/generator/konfig-next-app/src/components/ReferenceNavbar.tsx
@@ -220,7 +220,6 @@ export function ReferenceNavbar({
           error={form.getInputProps('url').error}
           data={servers}
           itemComponent={SelectItem}
-          radius="xs"
           hoverOnSearchChange
           nothingFound="Nothing found"
           searchable
diff --git a/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx b/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
index 19a04e10d..34707abb3 100644
--- a/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
+++ b/generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
@@ -37,6 +37,10 @@ import Head from 'next/head'
 import { SocialFooter } from '@/components/SocialFooter'
 import { Breadcrumbs } from '@/components/Breadcrumbs'
 import { generateMantineThemeColors } from '@/utils/generate-mantine-theme-colors'
+import { proseContainerWidthStyles } from '@/utils/prose-container-width-styles'
+import { FlexCenter } from '@/components/FlexCenter'
+import { asideOffsetBreakpoint } from '@/utils/aside-offset-breakpoint'
+import { navbarOffsetBreakpoint } from '@/utils/navbar-offset-breakpoint'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
@@ -68,6 +72,8 @@ export const OperationsContext = createContext<OperationObject[]>([])
 
 const useStyles = createStyles((theme) => ({
   markdown: {
+    // this lives in [[...doc]].tsx as opposed to DemoMarkdown because we want
+    // buttons to be close to code in the demos
     '.mantine-Tabs-root': {
       marginBottom: theme.spacing.xl,
     },
@@ -156,14 +162,14 @@ const DocumentationPage = observer(
                 background: colorScheme === 'dark' ? colors.dark[8] : undefined,
               },
             }}
-            navbarOffsetBreakpoint="lg"
-            asideOffsetBreakpoint="lg"
+            navbarOffsetBreakpoint={navbarOffsetBreakpoint}
+            asideOffsetBreakpoint={asideOffsetBreakpoint}
             aside={<DemoTableOfContents demoDiv={state.demoDiv} />}
             navbar={
               <Navbar
-                hiddenBreakpoint="lg"
+                hiddenBreakpoint={navbarOffsetBreakpoint}
                 hidden={!opened}
-                width={{ lg: NAVBAR_WIDTH }}
+                width={{ [navbarOffsetBreakpoint]: NAVBAR_WIDTH }}
                 py="xl"
                 px="sm"
                 sx={{
@@ -231,8 +237,11 @@ const DocumentationPage = observer(
           >
             <OperationsContext.Provider value={operations}>
               {/* for centering Box */}
-              <Flex pt="sm" justify="center">
-                <Box className={classes.markdown} w="100%" maw={700}>
+              <FlexCenter pt="sm">
+                <Box
+                  className={classes.markdown}
+                  {...proseContainerWidthStyles}
+                >
                   <Breadcrumbs breadcrumbs={breadcrumb} />
                   <DemoMarkdown state={state} />
                   <Box my={rem(40)}>
@@ -245,7 +254,7 @@ const DocumentationPage = observer(
                   </Box>
                   <SocialFooter konfigYaml={konfigYaml} />
                 </Box>
-              </Flex>
+              </FlexCenter>
             </OperationsContext.Provider>
           </AppShell>
         </MantineProvider>
diff --git a/generator/konfig-next-app/src/utils/aside-offset-breakpoint.ts b/generator/konfig-next-app/src/utils/aside-offset-breakpoint.ts
new file mode 100644
index 000000000..10417a45b
--- /dev/null
+++ b/generator/konfig-next-app/src/utils/aside-offset-breakpoint.ts
@@ -0,0 +1 @@
+export const asideOffsetBreakpoint = 'md' as const
diff --git a/generator/konfig-next-app/src/utils/inactive-color.ts b/generator/konfig-next-app/src/utils/inactive-color.ts
new file mode 100644
index 000000000..bf5a938ac
--- /dev/null
+++ b/generator/konfig-next-app/src/utils/inactive-color.ts
@@ -0,0 +1,7 @@
+import { MantineTheme } from '@mantine/core'
+
+export function inactiveColor(theme: MantineTheme) {
+  return theme.colorScheme === 'dark'
+    ? theme.colors.dark[2]
+    : theme.colors.gray[6]
+}
diff --git a/generator/konfig-next-app/src/utils/nav-link-color.ts b/generator/konfig-next-app/src/utils/nav-link-color.ts
new file mode 100644
index 000000000..b572c702b
--- /dev/null
+++ b/generator/konfig-next-app/src/utils/nav-link-color.ts
@@ -0,0 +1,13 @@
+import { MantineTheme } from '@mantine/core'
+import { inactiveColor } from './inactive-color'
+import { linkColor } from './link-color'
+
+export function navLinkColor({
+  active,
+  theme,
+}: {
+  active?: boolean
+  theme: MantineTheme
+}) {
+  return active ? linkColor({ theme }) : inactiveColor(theme)
+}
diff --git a/generator/konfig-next-app/src/utils/navbar-offset-breakpoint.ts b/generator/konfig-next-app/src/utils/navbar-offset-breakpoint.ts
new file mode 100644
index 000000000..d91a12c36
--- /dev/null
+++ b/generator/konfig-next-app/src/utils/navbar-offset-breakpoint.ts
@@ -0,0 +1 @@
+export const navbarOffsetBreakpoint = 'sm' as const