diff --git a/src/generators/web/ui/components/MetaBar/index.jsx b/src/generators/web/ui/components/MetaBar/index.jsx
index 129b8554..22d3b0cb 100644
--- a/src/generators/web/ui/components/MetaBar/index.jsx
+++ b/src/generators/web/ui/components/MetaBar/index.jsx
@@ -1,5 +1,4 @@
 import { CodeBracketIcon, DocumentIcon } from '@heroicons/react/24/outline';
-import Badge from '@node-core/ui-components/Common/Badge';
 import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 
@@ -12,15 +11,21 @@ const iconMap = {
 
 /**
  * @typedef MetaBarProps
- * @property {Array<import('@vcarl/remark-headings').Heading & { stability: string }>} headings - Array of page headings for table of contents
+ * @property {Array<import('@vcarl/remark-headings').Heading & { stability: number }>} headings - Array of page headings for table of contents
  * @property {string} addedIn - Version or date when feature was added
  * @property {string} readingTime - Estimated reading time for the page
  * @property {Array<[string, string]>} viewAs - Array of [title, path] tuples for view options
  * @property {string} editThisPage - URL for editing the current page
  */
 
-const STABILITY_KINDS = ['error', 'warning', null, 'info'];
-const STABILITY_LABELS = ['D', 'E', null, 'L'];
+const STABILITY_CLASS_MAP = [
+  styles.deprecated,
+  styles.experimental,
+  undefined,
+  styles.legacy,
+];
+
+const STABILITY_TITLE_MAP = ['Deprecated', 'Experimental', undefined, 'Legacy'];
 
 /**
  * MetaBar component that displays table of contents and page metadata
@@ -39,19 +44,15 @@ export default ({
       items: headings.map(({ slug, value, stability, ...heading }) => ({
         ...heading,
         value:
-          stability !== 2 ? (
-            <>
-              {value}
-              <Badge
-                size="small"
-                className={styles.badge}
-                kind={STABILITY_KINDS[stability]}
-              >
-                {STABILITY_LABELS[stability]}
-              </Badge>
-            </>
-          ) : (
+          stability === 2 ? (
             value
+          ) : (
+            <span
+              className={STABILITY_CLASS_MAP[stability]}
+              title={STABILITY_TITLE_MAP[stability]}
+            >
+              {value}
+            </span>
           ),
         data: { id: slug },
       })),
diff --git a/src/generators/web/ui/components/MetaBar/index.module.css b/src/generators/web/ui/components/MetaBar/index.module.css
index 0f3163ee..17073b42 100644
--- a/src/generators/web/ui/components/MetaBar/index.module.css
+++ b/src/generators/web/ui/components/MetaBar/index.module.css
@@ -5,7 +5,29 @@
   margin-right: 0.25rem;
 }
 
-.badge {
-  display: inline-block;
-  margin-left: 0.25rem;
+:has(> .deprecated),
+:has(> .legacy) {
+  text-decoration-line: line-through !important;
+  text-decoration-style: dashed;
+  text-decoration-thickness: 2px;
+
+  > span {
+    opacity: 0.7;
+  }
+}
+
+:has(> .deprecated) {
+  text-decoration-color: var(--color-danger-600);
+}
+
+:has(> .legacy) {
+  text-decoration-color: var(--color-info-600);
+}
+
+:has(> .experimental) {
+  text-decoration-line: underline !important;
+  text-decoration-style: dashed;
+  text-decoration-color: var(--color-warning-600);
+  text-underline-offset: 3px;
+  font-style: italic;
 }