diff --git a/app/components/StatusBadge.tsx b/app/components/StatusBadge.tsx
index 74f0a7a74..0db19d128 100644
--- a/app/components/StatusBadge.tsx
+++ b/app/components/StatusBadge.tsx
@@ -58,3 +58,20 @@ export const SnapshotStatusBadge = (props: {
     {props.status}
   </Badge>
 )
+
+export type SerialConsoleState = 'connecting' | 'connected' | 'disconnected'
+
+const SERIAL_CONSOLE_COLORS: Record<SerialConsoleState, BadgeColor> = {
+  connecting: 'notice',
+  connected: 'default',
+  disconnected: 'destructive',
+}
+
+export const SerialConsoleStatusBadge = (props: {
+  status: SerialConsoleState
+  className?: string
+}) => (
+  <Badge color={SERIAL_CONSOLE_COLORS[props.status]} className={props.className}>
+    {props.status}
+  </Badge>
+)
diff --git a/app/components/Terminal.tsx b/app/components/Terminal.tsx
index e6bca7c0d..107e90d42 100644
--- a/app/components/Terminal.tsx
+++ b/app/components/Terminal.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from 'react'
-import type { ITerminalAddon, ITerminalOptions } from 'xterm'
+import type { ITerminalOptions } from 'xterm'
 import { Terminal as XTerm } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css'
 
+import { DirectionDownIcon, DirectionUpIcon } from '@oxide/ui'
+import { classed } from '@oxide/util'
+
 interface TerminalProps {
   data?: number[]
-  className?: string
 }
 
 const options: ITerminalOptions = {
@@ -14,42 +16,44 @@ const options: ITerminalOptions = {
   screenReaderMode: true,
   rendererType: 'dom',
   fontFamily: '"GT America Mono", monospace',
-  fontSize: 14,
+  fontSize: 13,
   lineHeight: 1.2,
-  minimumContrastRatio: 21,
   windowOptions: {
     fullscreenWin: true,
     refreshWin: true,
   },
 }
 
-export const Terminal = ({ data, className }: TerminalProps) => {
+const ScrollButton = classed.button`ml-4 flex h-8 w-8 items-center justify-center rounded border border-secondary hover:bg-hover`
+
+function getTheme() {
+  const style = getComputedStyle(document.body)
+  return {
+    background: style.getPropertyValue('--surface-default'),
+    foreground: style.getPropertyValue('--content-default'),
+    black: style.getPropertyValue('--surface-default'),
+    brightBlack: style.getPropertyValue('--surface-secondary'),
+    white: style.getPropertyValue('--content-default'),
+    brightWhite: style.getPropertyValue('--content-secondary'),
+    blue: style.getPropertyValue('--base-blue-500'),
+    brightBlue: style.getPropertyValue('--base-blue-900'),
+    green: style.getPropertyValue('--content-success'),
+    brightGreen: style.getPropertyValue('--content-success-secondary'),
+    red: style.getPropertyValue('--content-error'),
+    brightRed: style.getPropertyValue('--content-error-secondary'),
+    yellow: style.getPropertyValue('--content-notice'),
+    brightYellow: style.getPropertyValue('--content-notice-secondary'),
+    cursor: style.getPropertyValue('--content-default'),
+    cursorAccent: style.getPropertyValue('--content-accent'),
+  }
+}
+
+export const Terminal = ({ data }: TerminalProps) => {
   const [term, setTerm] = useState<XTerm | null>(null)
   const terminalRef = useRef(null)
 
   useEffect(() => {
-    const style = getComputedStyle(document.body)
-    const newTerm = new XTerm({
-      theme: {
-        background: style.getPropertyValue('--surface-default'),
-        foreground: style.getPropertyValue('--content-default'),
-        black: style.getPropertyValue('--surface-default'),
-        brightBlack: style.getPropertyValue('--surface-secondary'),
-        white: style.getPropertyValue('--content-default'),
-        brightWhite: style.getPropertyValue('--content-secondary'),
-        blue: style.getPropertyValue('--base-blue-500'),
-        brightBlue: style.getPropertyValue('--base-blue-900'),
-        green: style.getPropertyValue('--content-success'),
-        brightGreen: style.getPropertyValue('--content-success-secondary'),
-        red: style.getPropertyValue('--content-error'),
-        brightRed: style.getPropertyValue('--content-error-secondary'),
-        yellow: style.getPropertyValue('--content-notice'),
-        brightYellow: style.getPropertyValue('--content-notice-secondary'),
-        cursor: style.getPropertyValue('--content-default'),
-        cursorAccent: style.getPropertyValue('--content-accent'),
-      },
-      ...options,
-    })
+    const newTerm = new XTerm({ theme: getTheme(), ...options })
 
     // Persist terminal instance, initialize terminal
     setTerm(newTerm)
@@ -59,14 +63,11 @@ export const Terminal = ({ data, className }: TerminalProps) => {
 
     // Setup terminal addons
     const fitAddon = new FitAddon()
-    const addons: ITerminalAddon[] = [fitAddon]
-    for (const addon of addons) {
-      newTerm.loadAddon(addon)
-    }
+    newTerm.loadAddon(fitAddon)
+
     // Handle window resizing
-    const resize = () => {
-      fitAddon.fit()
-    }
+    const resize = () => fitAddon.fit()
+
     resize()
     window.addEventListener('resize', resize)
     return () => {
@@ -83,7 +84,19 @@ export const Terminal = ({ data, className }: TerminalProps) => {
     }
   }, [term, data])
 
-  return <div className={className} ref={terminalRef} />
+  return (
+    <>
+      <div className="h-full w-full pr-12" ref={terminalRef} />
+      <div className="absolute right-0 top-0 space-y-2 text-secondary">
+        <ScrollButton onClick={() => term?.scrollToTop()}>
+          <DirectionUpIcon />
+        </ScrollButton>
+        <ScrollButton onClick={() => term?.scrollToBottom()}>
+          <DirectionDownIcon />
+        </ScrollButton>
+      </div>
+    </>
+  )
 }
 
 export default Terminal
diff --git a/app/layouts/ProjectLayout.tsx b/app/layouts/ProjectLayout.tsx
index 4f2cae2dd..d1699114a 100644
--- a/app/layouts/ProjectLayout.tsx
+++ b/app/layouts/ProjectLayout.tsx
@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react'
 import { useMemo } from 'react'
 import { matchPath, useLocation, useNavigate, useParams } from 'react-router-dom'
 
@@ -25,7 +26,14 @@ import { pb } from 'app/util/path-builder'
 import { DocsLinkItem, NavLinkItem, Sidebar } from '../components/Sidebar'
 import { ContentPane, PageContainer } from './helpers'
 
-const ProjectLayout = () => {
+type ProjectLayoutProps = {
+  /** Sometimes we need a different layout for the content pane. Like
+   * `<ContentPane />`, the element passed here should contain an `<Outlet />`.
+   */
+  overrideContentPane?: ReactElement
+}
+
+const ProjectLayout = ({ overrideContentPane }: ProjectLayoutProps) => {
   const navigate = useNavigate()
   // org and project will always be there, instance may not
   const projectSelector = useProjectSelector()
@@ -93,7 +101,7 @@ const ProjectLayout = () => {
           </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>
-      <ContentPane />
+      {overrideContentPane || <ContentPane />}
     </PageContainer>
   )
 }
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index 877845542..4cb5c0db3 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -27,6 +27,23 @@ export const ContentPane = () => (
   </div>
 )
 
+/**
+ * Special content pane for the serial console that lets us break out of the
+ * usual layout. Main differences: no `pb-8` and `<main>` is locked at `h-full`
+ * to avoid page-level scroll. We also leave off the pagination and page actions
+ * `<div>` because we don't need it.
+ */
+export const SerialConsoleContentPane = () => (
+  <div id="content-pane" className="flex flex-col overflow-auto">
+    <div className="flex flex-grow flex-col">
+      <SkipLinkTarget />
+      <main className="[&>*]:gutter h-full">
+        <Outlet />
+      </main>
+    </div>
+  </div>
+)
+
 /** Loader for the `<Route>` that wraps all authenticated routes. */
 export const userLoader = async () => {
   await Promise.all([
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 95ab3c0c0..65d5cdc73 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -93,7 +93,7 @@ export function InstancePage() {
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceMetrics(instanceSelector)}>Metrics</Tab>
         <Tab to={pb.nics(instanceSelector)}>Network Interfaces</Tab>
-        <Tab to={pb.serialConsole(instanceSelector)}>Serial Console</Tab>
+        <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
       </RouteTabs>
     </>
   )
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
new file mode 100644
index 000000000..8a91903b4
--- /dev/null
+++ b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -0,0 +1,107 @@
+import { Suspense, lazy } from 'react'
+import { Link } from 'react-router-dom'
+
+import { useApiQuery } from '@oxide/api'
+import { Button } from '@oxide/ui'
+import { DirectionLeftIcon, Spinner } from '@oxide/ui'
+import { MiB } from '@oxide/util'
+
+import { SerialConsoleStatusBadge } from 'app/components/StatusBadge'
+import { useInstanceSelector } from 'app/hooks'
+import { pb } from 'app/util/path-builder'
+
+const Terminal = lazy(() => import('app/components/Terminal'))
+
+export function SerialConsolePage() {
+  const { organization, project, instance } = useInstanceSelector()
+
+  const { isRefetching, data, refetch } = useApiQuery(
+    'instanceSerialConsoleV1',
+    {
+      path: { instance },
+      // holding off on using toPathQuery for now because it doesn't like numbers
+      query: { organization, project, maxBytes: 10 * MiB, fromStart: 0 },
+    },
+    { refetchOnWindowFocus: false }
+  )
+
+  return (
+    <div className="!mx-0 flex h-full max-h-[calc(100vh-60px)] !w-full flex-col">
+      <Link
+        to={pb.instance({ organization, project, instance })}
+        className="mx-3 mt-3 mb-6 flex h-10 flex-shrink-0 items-center rounded px-3 bg-accent-secondary"
+      >
+        <DirectionLeftIcon className="text-accent-tertiary" />
+        <div className="ml-2 text-mono-sm text-accent">
+          <span className="text-accent-tertiary">Back to</span> instance
+        </div>
+      </Link>
+
+      <div className="gutter relative w-full flex-shrink flex-grow overflow-hidden">
+        {!data && <SerialSkeleton />}
+        <Suspense fallback={null}>
+          <Terminal data={data?.data} />
+        </Suspense>
+      </div>
+      <div className="flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+        <div className="gutter flex h-20 items-center justify-between">
+          <div>
+            <Button
+              loading={isRefetching}
+              size="sm"
+              onClick={() => refetch()}
+              disabled={!data}
+            >
+              Refresh
+            </Button>
+
+            <Button variant="ghost" size="sm" disabled={!data} className="ml-2">
+              Equivalent CLI Command
+            </Button>
+          </div>
+
+          <SerialConsoleStatusBadge status={data ? 'connected' : 'connecting'} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SerialSkeleton() {
+  const instanceSelector = useInstanceSelector()
+
+  return (
+    <div className="relative h-full flex-shrink flex-grow overflow-hidden">
+      <div className="h-full space-y-2 overflow-hidden">
+        {[...Array(200)].map((_e, i) => (
+          <div
+            key={i}
+            className="h-4 rounded bg-tertiary motion-safe:animate-pulse"
+            style={{
+              width: `${Math.sin(Math.sin(i)) * 20 + 40}%`,
+            }} /* this is silly deterministic way to get random looking lengths */
+          />
+        ))}
+      </div>
+
+      <div
+        className="absolute bottom-0 h-full w-full"
+        style={{
+          background: 'linear-gradient(180deg, rgba(8, 15, 17, 0) 0%, #080F11 100%)',
+        }}
+      />
+      <div className="absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-12 !bg-raise border-secondary elevation-3">
+        <Spinner size="lg" />
+
+        <div className="space-y-2">
+          <p className="text-center text-sans-xl text-default">
+            Connecting to{' '}
+            <Link to={pb.instance(instanceSelector)} className="text-accent-secondary">
+              {instanceSelector.instance}
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/project/instances/instance/tabs/ConnectTab.tsx b/app/pages/project/instances/instance/tabs/ConnectTab.tsx
new file mode 100644
index 000000000..3a9982a58
--- /dev/null
+++ b/app/pages/project/instances/instance/tabs/ConnectTab.tsx
@@ -0,0 +1,19 @@
+import { SettingsGroup } from '@oxide/ui'
+
+import { useInstanceSelector } from 'app/hooks'
+import { pb } from 'app/util/path-builder'
+
+export function ConnectTab() {
+  const { organization, project, instance } = useInstanceSelector()
+
+  return (
+    <SettingsGroup
+      title="Serial Console"
+      docs={{ text: 'Serial Console', link: '/' }}
+      cta={pb.serialConsole({ organization, project, instance })}
+      ctaText="Connect"
+    >
+      Connect to your instance&rsquo;s serial console
+    </SettingsGroup>
+  )
+}
diff --git a/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx b/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx
deleted file mode 100644
index ac1b16aba..000000000
--- a/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Suspense, lazy } from 'react'
-
-import { useApiQuery } from '@oxide/api'
-import { Button } from '@oxide/ui'
-import { MiB } from '@oxide/util'
-
-import { PageActions } from 'app/components/PageActions'
-import { useInstanceSelector } from 'app/hooks'
-
-const Terminal = lazy(() => import('app/components/Terminal'))
-
-export function SerialConsoleTab() {
-  const { organization, project, instance } = useInstanceSelector()
-
-  const { data, refetch } = useApiQuery(
-    'instanceSerialConsoleV1',
-    {
-      path: { instance },
-      // holding off on using toPathQuery for now because it doesn't like numbers
-      query: { organization, project, maxBytes: 10 * MiB, fromStart: 0 },
-    },
-    { refetchOnWindowFocus: false }
-  )
-
-  return (
-    <>
-      <div className="relative -mb-10 !w-[calc(100%-var(--content-gutter))]">
-        <Suspense fallback={<></>}>
-          <Terminal className="mb-2 w-full" data={data?.data} />
-        </Suspense>
-      </div>
-      <PageActions>
-        <div className="gutter flex h-20 items-center">
-          <Button size="sm" onClick={() => refetch()}>
-            Refresh
-          </Button>
-        </div>
-      </PageActions>
-    </>
-  )
-}
diff --git a/app/routes.tsx b/app/routes.tsx
index 759fc58a7..c44d6a433 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -21,7 +21,7 @@ import RootLayout from './layouts/RootLayout'
 import SettingsLayout from './layouts/SettingsLayout'
 import SiloLayout from './layouts/SiloLayout'
 import SystemLayout from './layouts/SystemLayout'
-import { userLoader } from './layouts/helpers'
+import { SerialConsoleContentPane, userLoader } from './layouts/helpers'
 import DeviceAuthSuccessPage from './pages/DeviceAuthSuccessPage'
 import DeviceAuthVerifyPage from './pages/DeviceAuthVerifyPage'
 import LoginPage from './pages/LoginPage'
@@ -41,9 +41,10 @@ import {
   VpcPage,
   VpcsPage,
 } from './pages/project'
+import { SerialConsolePage } from './pages/project/instances/instance/SerialConsolePage'
+import { ConnectTab } from './pages/project/instances/instance/tabs/ConnectTab'
 import { MetricsTab } from './pages/project/instances/instance/tabs/MetricsTab'
 import { NetworkingTab } from './pages/project/instances/instance/tabs/NetworkingTab'
-import { SerialConsoleTab } from './pages/project/instances/instance/tabs/SerialConsoleTab'
 import { StorageTab } from './pages/project/instances/instance/tabs/StorageTab'
 import { ProfilePage } from './pages/settings/ProfilePage'
 import { SSHKeysPage } from './pages/settings/SSHKeysPage'
@@ -206,6 +207,25 @@ export const routes = createRoutesFromElements(
         </Route>
 
         {/* PROJECT */}
+
+        {/* Serial console page gets its own little section here because it
+            cannot use the normal <ContentPane>.*/}
+        <Route
+          path="projects/:project"
+          element={<ProjectLayout overrideContentPane={<SerialConsoleContentPane />} />}
+          handle={{ crumb: projectCrumb }}
+        >
+          <Route path="instances" handle={{ crumb: 'Instances' }}>
+            <Route path=":instance" handle={{ crumb: instanceCrumb }}>
+              <Route
+                path="serial-console"
+                element={<SerialConsolePage />}
+                handle={{ crumb: 'Serial Console' }}
+              />
+            </Route>
+          </Route>
+        </Route>
+
         <Route
           path="projects/:project"
           element={<ProjectLayout />}
@@ -217,22 +237,22 @@ export const routes = createRoutesFromElements(
             loader={CreateInstanceForm.loader}
             handle={{ crumb: 'New instance' }}
           />
-          <Route path="instances/:instance" element={<Navigate to="storage" replace />} />
           <Route path="instances" handle={{ crumb: 'Instances' }}>
             <Route index element={<InstancesPage />} loader={InstancesPage.loader} />
             <Route path=":instance" handle={{ crumb: instanceCrumb }}>
+              <Route index element={<Navigate to="storage" replace />} />
               <Route element={<InstancePage />} loader={InstancePage.loader}>
                 <Route
                   path="storage"
                   element={<StorageTab />}
                   loader={StorageTab.loader}
-                  handle={{ crumb: 'storage' }}
+                  handle={{ crumb: 'Storage' }}
                 />
                 <Route
                   path="network-interfaces"
                   element={<NetworkingTab />}
                   loader={NetworkingTab.loader}
-                  handle={{ crumb: 'network-interfaces' }}
+                  handle={{ crumb: 'Network interfaces' }}
                 />
                 <Route
                   path="metrics"
@@ -241,9 +261,9 @@ export const routes = createRoutesFromElements(
                   handle={{ crumb: 'metrics' }}
                 />
                 <Route
-                  path="serial-console"
-                  element={<SerialConsoleTab />}
-                  handle={{ crumb: 'serial-console' }}
+                  path="connect"
+                  element={<ConnectTab />}
+                  handle={{ crumb: 'Connect' }}
                 />
               </Route>
             </Route>
diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
index 83749d718..c0d02fb34 100644
--- a/app/util/path-builder.spec.ts
+++ b/app/util/path-builder.spec.ts
@@ -19,6 +19,7 @@ test('path builder', () => {
         "diskNew": "/orgs/a/projects/b/disks-new",
         "disks": "/orgs/a/projects/b/disks",
         "instance": "/orgs/a/projects/b/instances/c",
+        "instanceConnect": "/orgs/a/projects/b/instances/c/connect",
         "instanceMetrics": "/orgs/a/projects/b/instances/c/metrics",
         "instanceNew": "/orgs/a/projects/b/instances-new",
         "instancePage": "/orgs/a/projects/b/instances/c/storage",
diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
index 3df22cc36..0098ce6cf 100644
--- a/app/util/path-builder.ts
+++ b/app/util/path-builder.ts
@@ -41,6 +41,7 @@ export const pb = {
 
   instanceMetrics: (params: Instance) => `${pb.instance(params)}/metrics`,
   instanceStorage: (params: Instance) => `${pb.instance(params)}/storage`,
+  instanceConnect: (params: Instance) => `${pb.instance(params)}/connect`,
 
   nics: (params: Instance) => `${pb.instance(params)}/network-interfaces`,
 
diff --git a/libs/api-mocks/msw/handlers.ts b/libs/api-mocks/msw/handlers.ts
index b7258b714..6a06cc6b5 100644
--- a/libs/api-mocks/msw/handlers.ts
+++ b/libs/api-mocks/msw/handlers.ts
@@ -452,7 +452,7 @@ export const handlers = makeHandlers({
   },
   instanceSerialConsoleV1(_params) {
     // TODO: Add support for params
-    return serial
+    return json(serial, { delay: 3000 })
   },
   instanceStartV1({ path, query }) {
     const instance = lookup.instance({ ...path, ...query })
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
index aff89a493..f93e483a1 100644
--- a/libs/ui/index.ts
+++ b/libs/ui/index.ts
@@ -24,6 +24,7 @@ export * from './lib/progress/Progress'
 export * from './lib/properties-table/PropertiesTable'
 export * from './lib/radio-group/RadioGroup'
 export * from './lib/radio/Radio'
+export * from './lib/settings-group/SettingsGroup'
 export * from './lib/side-modal/SideModal'
 export * from './lib/skip-link/SkipLink'
 export * from './lib/spinner/Spinner'
diff --git a/libs/ui/lib/button/button.css b/libs/ui/lib/button/button.css
index a9f7c4a32..7f39deb41 100644
--- a/libs/ui/lib/button/button.css
+++ b/libs/ui/lib/button/button.css
@@ -30,7 +30,7 @@
 }
 
 .btn-ghost {
-  @apply border text-secondary border-default hover:bg-hover disabled:bg-transparent;
+  @apply border text-secondary border-default hover:bg-hover disabled:bg-transparent disabled:text-disabled;
 }
 .btn-ghost:after {
   @apply hidden;
diff --git a/libs/ui/lib/settings-group/SettingsGroup.stories.tsx b/libs/ui/lib/settings-group/SettingsGroup.stories.tsx
new file mode 100644
index 000000000..18d62817d
--- /dev/null
+++ b/libs/ui/lib/settings-group/SettingsGroup.stories.tsx
@@ -0,0 +1,24 @@
+import { SettingsGroup } from './SettingsGroup'
+
+export const Default = () => (
+  <SettingsGroup
+    title="Serial Console"
+    docs={{ text: 'Serial Console', link: '/' }}
+    cta="/"
+    ctaText="Connect"
+  >
+    Connect to your instance&rsquo;s serial console
+  </SettingsGroup>
+)
+
+export const WithoutDocs = () => (
+  <SettingsGroup title="Serial Console" cta="/" ctaText="Connect">
+    Connect to your instance&rsquo;s serial console
+  </SettingsGroup>
+)
+
+export const FunctionAction = () => (
+  <SettingsGroup title="Serial Console" cta={() => alert('hi')} ctaText="Connect">
+    Connect to your instance&rsquo;s serial console
+  </SettingsGroup>
+)
diff --git a/libs/ui/lib/settings-group/SettingsGroup.tsx b/libs/ui/lib/settings-group/SettingsGroup.tsx
new file mode 100644
index 000000000..e25763ed3
--- /dev/null
+++ b/libs/ui/lib/settings-group/SettingsGroup.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom'
+
+import { Button, OpenLink12Icon, buttonStyle } from '@oxide/ui'
+
+type Props = {
+  title: string
+  docs?: {
+    text: string
+    link: string
+  }
+  children: React.ReactNode
+  /** String action is a link */
+  cta: string | (() => void)
+  ctaText: string
+}
+
+export const SettingsGroup = ({ title, docs, children, cta, ctaText }: Props) => {
+  return (
+    <div className="w-full max-w-[660px] rounded-lg border text-sans-md text-secondary border-default">
+      <div className="p-6">
+        <div className="mb-1 text-sans-lg text-default">{title}</div>
+        {children}
+      </div>
+      <div className="flex items-center justify-between border-t px-6 py-3 border-default">
+        {/* div always present to keep the button right-aligned */}
+        <div className="text-tertiary">
+          {docs && (
+            <>
+              Learn more about{' '}
+              <a href={docs.link} className="text-accent-secondary hover:text-accent">
+                {docs.text}
+                <OpenLink12Icon className="ml-1 align-middle" />
+              </a>
+            </>
+          )}
+        </div>
+
+        {typeof cta === 'string' ? (
+          <Link to={cta} className={buttonStyle({ size: 'sm' })}>
+            {ctaText}
+          </Link>
+        ) : (
+          <Button size="sm" onClick={cta}>
+            {ctaText}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}