diff --git a/app/components/AsciidocBlocks/Document.tsx b/app/components/AsciidocBlocks/Document.tsx
index de189fb..7a73802 100644
--- a/app/components/AsciidocBlocks/Document.tsx
+++ b/app/components/AsciidocBlocks/Document.tsx
@@ -5,15 +5,23 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useDelegatedReactRouterLinks } from '@oxide/design-system/components/dist'
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
+import { useRef } from 'react'
 
-const CustomDocument = ({ document }: { document: DocumentBlock }) => (
-  <div
-    id="content"
-    className="asciidoc-body max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0"
-  >
-    <Content blocks={document.blocks} />
-  </div>
-)
+const CustomDocument = ({ document }: { document: DocumentBlock }) => {
+  let ref = useRef<HTMLDivElement>(null)
+  useDelegatedReactRouterLinks(ref, document.title)
+
+  return (
+    <div
+      id="content"
+      className="asciidoc-body max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0"
+      ref={ref}
+    >
+      <Content blocks={document.blocks} />
+    </div>
+  )
+}
 
 export { CustomDocument }
diff --git a/app/components/Spinner.tsx b/app/components/Spinner.tsx
deleted file mode 100644
index 5142486..0000000
--- a/app/components/Spinner.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-
-import cn from 'classnames'
-
-const Spinner = ({ className }: { className?: string }) => {
-  const frameSize = 12
-  const center = 6
-  const radius = 5
-  const strokeWidth = 2
-  return (
-    <svg
-      width={frameSize}
-      height={frameSize}
-      viewBox={`0 0 ${frameSize + ' ' + frameSize}`}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-labelledby="Spinner"
-      className={cn('spinner', className)}
-    >
-      <circle
-        fill="none"
-        className="bg"
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        cx={center}
-        cy={center}
-        r={radius}
-        strokeOpacity={0.2}
-      />
-      <circle
-        className="path"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        cx={center}
-        cy={center}
-        r={radius}
-      />
-    </svg>
-  )
-}
-
-export default Spinner
diff --git a/app/components/rfd/RfdDiscussionDialog.tsx b/app/components/rfd/RfdDiscussionDialog.tsx
index cf0b9f1..a8250a8 100644
--- a/app/components/rfd/RfdDiscussionDialog.tsx
+++ b/app/components/rfd/RfdDiscussionDialog.tsx
@@ -13,6 +13,7 @@ import {
   useDialogStore,
   type DialogStore,
 } from '@ariakit/react'
+import { Spinner } from '@oxide/design-system/components/dist'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -30,7 +31,6 @@ import type {
 } from '~/services/rfd.server'
 
 import { GotoIcon } from '../CustomIcons'
-import Spinner from '../Spinner'
 import { CommentThreadBlock, matchCommentToBlock } from './RfdInlineComments'
 import { calcOffset } from './RfdPreview'
 
@@ -353,14 +353,14 @@ const DiscussionReview = ({
           <div className="text-sans-semi-md">
             <a
               href={data.review.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >
               {data.review.user.login}
             </a>
           </div>
-          <div className="ml-1 text-sans-md text-quaternary">
+          <div className="ml-1 text-sans-md text-tertiary">
             reviewed on
             <time dateTime={data.review.submitted_at}>
               {' '}
@@ -376,7 +376,7 @@ const DiscussionReview = ({
           <div className="flex items-center border-b p-3 text-sans-md bg-secondary border-b-secondary">
             <a
               href={data.review.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >
@@ -459,7 +459,7 @@ const DiscussionIssueComment = ({
           <div className="flex items-center border-b p-3 text-sans-md bg-secondary border-b-secondary">
             <a
               href={data.user.html_url}
-              className="hover:text-secondary"
+              className="text-sans-semi-md text-raise hover:text-default"
               target="_blank"
               rel="noreferrer"
             >
diff --git a/app/components/rfd/RfdInlineComments.tsx b/app/components/rfd/RfdInlineComments.tsx
index 1e954bd..2aca578 100644
--- a/app/components/rfd/RfdInlineComments.tsx
+++ b/app/components/rfd/RfdInlineComments.tsx
@@ -17,6 +17,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react'
+import { Badge } from '@oxide/design-system/components/dist'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -361,19 +362,18 @@ export const CommentThreadBlock = ({
       )}
     >
       {/* Meta */}
-      {/* {isOverlay && ( */}
       <div className="flex items-center justify-between p-3 bg-secondary">
         <a href={htmlUrl} target="_blank" rel="noreferrer" className="hover:opacity-80">
-          <div className="flex items-center !normal-case text-mono-xs">
+          <div className="flex items-center !normal-case text-mono-sm">
             {isOverlay && (
               <span className="mr-1 text-sans-sm text-tertiary">Comment on </span>
             )}
             {path}
 
             {isOutdated && (
-              <div className="ml-2 rounded px-1 py-[1px] text-mono-xs text-notice bg-notice-secondary">
+              <Badge className="ml-1" color="notice">
                 Outdated
-              </div>
+              </Badge>
             )}
           </div>
         </a>
@@ -460,14 +460,14 @@ export const CommentThreadBlock = ({
                     <div className="text-sans-semi-md">
                       <a
                         href={comment.user.html_url}
-                        className="hover:text-secondary"
+                        className="text-raise hover:text-default"
                         target="_blank"
                         rel="noreferrer"
                       >
                         {comment.user.login}
                       </a>
                     </div>
-                    <div className="ml-1 text-sans-md text-quaternary">
+                    <div className="ml-1 text-sans-md text-tertiary">
                       <time dateTime={comment.created_at}>
                         {dayjs(comment.created_at).fromNow()}
                       </time>
diff --git a/app/routes/rfd.$slug.tsx b/app/routes/rfd.$slug.tsx
index 48f32ca..0d8e87b 100644
--- a/app/routes/rfd.$slug.tsx
+++ b/app/routes/rfd.$slug.tsx
@@ -8,6 +8,7 @@
 import {
   DesktopOutline,
   SmallScreenOutline,
+  Spinner,
   useActiveSectionTracking,
   useIntersectionObserver,
 } from '@oxide/design-system/components/dist'
diff --git a/app/styles/index.css b/app/styles/index.css
index e6be959..88f7581 100644
--- a/app/styles/index.css
+++ b/app/styles/index.css
@@ -14,6 +14,7 @@
 @import '@oxide/design-system/styles/dist/blue.css';
 @import '@oxide/design-system/components/dist/asciidoc.css';
 @import '@oxide/design-system/components/dist/button.css';
+@import '@oxide/design-system/components/dist/spinner.css';
 
 @import './lib/asciidoc.css';
 @import './lib/highlight.css';
diff --git a/package-lock.json b/package-lock.json
index 23fe5cf..dffa59e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
         "@asciidoctor/core": "^3.0.4",
         "@floating-ui/react": "^0.17.0",
         "@meilisearch/instant-meilisearch": "^0.8.2",
-        "@oxide/design-system": "^1.7.7--canary.09651fc.0",
+        "@oxide/design-system": "^1.8.0",
         "@oxide/react-asciidoc": "^1.0.2",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.0.4",
@@ -2307,9 +2307,9 @@
       "integrity": "sha512-S8u2cJzklBC0FgTwWVLaM8tMrDuDMVE4xiTK4EYXM9GntyvrdbSoxqDQa+Fh57CCNApyIpyeqPhhFEmHPfrXgw=="
     },
     "node_modules/@oxide/design-system": {
-      "version": "1.7.7--canary.09651fc.0",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.7.7--canary.09651fc.0.tgz",
-      "integrity": "sha512-buH+6E++NXAlj8Y3npzS1Dthdwn8AWce8wbRKjjAgNtsORUI7gW44QRSQI0thEhRwFGd8kN0nXi9l4AxC1EK2Q==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.8.0.tgz",
+      "integrity": "sha512-XmJwUauzSqa/Wyye3M/sOt71BoKoFy2nHOvBcT6aj+Y01f5Nni+MtVgXX0UjPtc5t7mCnyQMzu72jdH9mBWErQ==",
       "license": "MPL 2.0",
       "dependencies": {
         "@floating-ui/react": "^0.25.1",
diff --git a/package.json b/package.json
index 15aa2b9..ef53ab7 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@asciidoctor/core": "^3.0.4",
     "@floating-ui/react": "^0.17.0",
     "@meilisearch/instant-meilisearch": "^0.8.2",
-    "@oxide/design-system": "^1.7.7--canary.09651fc.0",
+    "@oxide/design-system": "^1.8.0",
     "@oxide/react-asciidoc": "^1.0.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
@@ -83,6 +83,6 @@
     "vitest": "^2.0.3"
   },
   "engines": {
-    "node": "^20.0.0"
+    "node": "^23.0.0"
   }
 }