diff --git a/apps/site/components/Common/Partners/index.module.css b/apps/site/components/Common/Partners/index.module.css
index f419d06f3c67d..c0e59c6f556df 100644
--- a/apps/site/components/Common/Partners/index.module.css
+++ b/apps/site/components/Common/Partners/index.module.css
@@ -14,9 +14,3 @@
     grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
     gap-4;
 }
-
-.tooltip {
-  @apply p-2
-    text-neutral-900
-    dark:text-neutral-200;
-}
diff --git a/apps/site/components/Common/Partners/index.tsx b/apps/site/components/Common/Partners/index.tsx
index 464af46b75d8b..430ca83b6abb7 100644
--- a/apps/site/components/Common/Partners/index.tsx
+++ b/apps/site/components/Common/Partners/index.tsx
@@ -1,4 +1,3 @@
-import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import providePartners from '#site/next-data/providers/partners';
@@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
   const Logo = PartnerLogos[partner.id];
 
   return (
-    <Tooltip
+    <PartnerButton
+      aria-label={partner.name}
       key={partner.id}
-      asChild
-      content={<div className={style.tooltip}>{partner.name}</div>}
+      size="small"
+      href={partner.href}
+      data-tooltip={partner.name}
     >
-      <PartnerButton aria-label={partner.name} size="small" href={partner.href}>
-        <Logo.Favicon />
-      </PartnerButton>
-    </Tooltip>
+      <Logo.Favicon />
+    </PartnerButton>
   );
 };
 
diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index ca7b7f3f6a0ca..22d52a9db83c3 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 890px)');
-
-  const isTabletResolution = useMediaQuery(
-    '(min-width: 890px) and (max-width: 1280px)'
-  );
+  const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
     <MetaBar
@@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
           )]: (
             <WithAvatarGroup
               usernames={usernames}
-              limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              limit={isSmallerThanDesktop ? 5 : 8}
             />
           ),
         }),
diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx
index 41f5fe33a5567..46d1727d080d1 100644
--- a/apps/site/layouts/Post.tsx
+++ b/apps/site/layouts/Post.tsx
@@ -26,6 +26,8 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
       <WithNavBar />
 
       <div className={styles.contentLayout}>
+        <div></div>
+
         <div className={styles.postLayout}>
           <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}
diff --git a/apps/site/layouts/layouts.module.css b/apps/site/layouts/layouts.module.css
index 770ea8c62ef06..a2b8a89315dea 100644
--- a/apps/site/layouts/layouts.module.css
+++ b/apps/site/layouts/layouts.module.css
@@ -1,12 +1,12 @@
 @reference "../styles/index.css";
 
 .baseLayout {
-  @apply grid
+  @apply ml:grid
+    ml:grid-cols-[1fr]
+    ml:grid-rows-[auto_1fr_auto]
     h-max
     min-h-full
-    w-full
-    grid-cols-[1fr]
-    grid-rows-[auto_1fr_auto];
+    w-full;
 }
 
 .centeredLayout {
@@ -104,7 +104,7 @@
     justify-center;
 
   main {
-    @apply max-w-5xl
+    @apply max-w-7xl
       gap-4
       px-4
       py-12
@@ -135,17 +135,19 @@
 }
 
 .contentLayout {
-  @apply max-w-8xl
+  @apply max-w-10xl
     max-ml:m-0
-    max-ml:block
+    3xl:grid-cols-[--spacing(80)_1fr_--spacing(80)]
+    ml:grid-cols-[0_1fr_--spacing(56)]
+    ml:grid
     mx-auto
-    grid
+    block
     w-full
     grid-rows-[1fr]
-    sm:grid-cols-[1fr_--spacing(52)]
-    xl:grid-cols-[1fr_--spacing(80)];
+    xl:grid-cols-[--spacing(56)_1fr_--spacing(64)]
+    2xl:grid-cols-[--spacing(72)_1fr_--spacing(72)];
 
-  > *:nth-child(1) {
+  > *:nth-child(2) {
     @apply bg-gradient-subtle
       dark:bg-gradient-subtle-dark
       max-ml:border-l-0
@@ -164,13 +166,12 @@
       dark:border-l-neutral-900;
 
     main {
-      @apply max-w-[660px]
-        gap-4
+      @apply gap-4
         wrap-anywhere;
     }
   }
 
-  > *:nth-child(2) {
+  > *:nth-child(3) {
     @apply ml:mt-0
       ml:max-w-xs
       ml:border-l
diff --git a/apps/site/next.fetch.mjs b/apps/site/next.fetch.mjs
index 9a6a3250ea2b0..26eaa48925a00 100644
--- a/apps/site/next.fetch.mjs
+++ b/apps/site/next.fetch.mjs
@@ -26,7 +26,7 @@ export const fetchWithRetry = async (
   const backoff = Math.max(0, Number(delay) || 0);
 
   const attemptFetch = attempt =>
-    fetch(url, options).catch(e => {
+    fetch(url, { ...options, signal: AbortSignal.timeout(30000) }).catch(e => {
       if (attempt === retries || !isTimeoutError(e)) {
         throw e;
       }
diff --git a/packages/rehype-shiki/src/plugin.mjs b/packages/rehype-shiki/src/plugin.mjs
index 9f1663c735aff..5f90914e6adda 100644
--- a/packages/rehype-shiki/src/plugin.mjs
+++ b/packages/rehype-shiki/src/plugin.mjs
@@ -163,7 +163,11 @@ export default async function rehypeShikiji(options) {
       const meta = parseMeta(preElement.data?.meta);
 
       // Retrieve the whole <pre> contents as a parsed DOM string
-      const preElementContents = toString(preElement);
+      const preElementContents = toString(preElement).replace(/\n$/, '');
+
+      // Since we removed the trailing newline, we can easily count the
+      // amount of lines without worrying about an extra empty line at the end of the code block
+      const lineCount = preElementContents.split('\n').length;
 
       // Grabs the relevant alias/name of the language
       const languageId = codeLanguage.slice(languagePrefix.length);
@@ -178,7 +182,8 @@ export default async function rehypeShikiji(options) {
       // Adds the original language back to the <pre> element
       children[0].properties.class = classNames(
         children[0].properties.class,
-        codeLanguage
+        codeLanguage,
+        { 'no-line-numbers': lineCount < 5, 'no-footer': lineCount === 1 }
       );
 
       // Replaces the <pre> element with the updated one
diff --git a/packages/ui-components/src/Common/BaseButton/index.module.css b/packages/ui-components/src/Common/BaseButton/index.module.css
index c45b71abfca60..4eb0e97fd2500 100644
--- a/packages/ui-components/src/Common/BaseButton/index.module.css
+++ b/packages/ui-components/src/Common/BaseButton/index.module.css
@@ -9,8 +9,7 @@
     px-4.5
     py-2.5
     text-center
-    font-semibold
-    motion-safe:transition-colors;
+    font-semibold;
 
   svg {
     @apply size-5;
@@ -124,7 +123,7 @@
       after:mx-auto
       after:h-px
       after:w-2/5
-      after:bg-gradient-to-r
+      after:bg-linear-to-r
       after:from-green-600/0
       after:via-green-600
       after:to-green-600/0
diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css
index 923d875a9f334..d97e0a3fd33da 100644
--- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css
+++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css
@@ -53,6 +53,19 @@
             [counter-increment:line];
         }
       }
+
+      &[class*='plain-text'] {
+        @apply font-mono;
+      }
+    }
+
+    &[class*='no-line-numbers'] > code > [class='line'] {
+      @apply pl-0;
+
+      &:not(:empty:last-child)::after {
+        @apply content-none
+          [counter-reset:none];
+      }
     }
   }
 
@@ -62,8 +75,8 @@
       justify-between
       border-t
       border-t-neutral-900
-      px-4
-      py-3
+      px-3
+      py-2
       text-sm
       font-medium;
 
@@ -72,9 +85,15 @@
     }
 
     & > .action {
-      @apply px-3
-        py-1.5
+      @apply px-2.5
+        py-1
+        text-xs
         font-medium;
+
+      > svg {
+        @apply h-4
+          w-4;
+      }
     }
   }
 }
diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.tsx b/packages/ui-components/src/Common/BaseCodeBox/index.tsx
index c5ee36c1773b8..666127a156962 100644
--- a/packages/ui-components/src/Common/BaseCodeBox/index.tsx
+++ b/packages/ui-components/src/Common/BaseCodeBox/index.tsx
@@ -39,31 +39,27 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
   // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
-  const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+  const extraClasses = classNames({ 'plain-text': language.length === 0 });
 
   return (
-    <code style={extraStyle}>
-      {lines
-        .flatMap((line, lineIndex) => {
-          const columns = line.split(' ');
-
-          return [
-            <span key={lineIndex} className="line">
-              {columns.map((column, columnIndex) => (
-                <Fragment key={columnIndex}>
-                  <span>{column}</span>
-                  {columnIndex < columns.length - 1 && <span> </span>}
-                </Fragment>
-              ))}
-            </span>,
-            // Add a break line so the text content is formatted correctly
-            // when copying to clipboard
-            '\n',
-          ];
-        })
-        // Here we remove that empty line from before and
-        // the last flatMap entry which is an `\n`
-        .slice(0, -2)}
+    <code className={extraClasses}>
+      {lines.flatMap((line, lineIndex) => {
+        const columns = line.split(' ');
+
+        return [
+          <span key={lineIndex} className="line">
+            {columns.map((column, columnIndex) => (
+              <Fragment key={columnIndex}>
+                <span>{column}</span>
+                {columnIndex < columns.length - 1 && <span> </span>}
+              </Fragment>
+            ))}
+          </span>,
+          // Add a break line so the text content is formatted correctly
+          // when copying to clipboard
+          '\n',
+        ];
+      })}
     </code>
   );
 };
@@ -89,8 +85,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   const containerRef = useRef<HTMLPreElement>(null);
 
   const handleCopy = () => copy(containerRef.current?.textContent);
+
   const ButtonIcon = copied ? DocumentDuplicateIcon : CodeBracketIcon;
 
+  const hideFooter = className?.includes('no-footer');
+
   return (
     <div className={styles.root}>
       <pre
@@ -100,9 +99,11 @@ const BaseCodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
       >
         {transformCode(children as ReactElement<PropsWithChildren>, language)}
       </pre>
-      {language && (
+
+      {!language || hideFooter || (
         <div className={styles.footer}>
           <span className={styles.language}>{language}</span>
+
           <BaseButton
             as={as}
             className={styles.action}
diff --git a/packages/ui-components/src/Common/CodeTabs/index.module.css b/packages/ui-components/src/Common/CodeTabs/index.module.css
index e6481552da808..879ae26ace6b5 100644
--- a/packages/ui-components/src/Common/CodeTabs/index.module.css
+++ b/packages/ui-components/src/Common/CodeTabs/index.module.css
@@ -13,7 +13,7 @@
       border-neutral-900
       bg-neutral-950
       px-2
-      pt-3
+      pt-2
       md:px-4;
 
     .trigger {
diff --git a/packages/ui-components/src/Common/DataTag/index.tsx b/packages/ui-components/src/Common/DataTag/index.tsx
index fedddecfd39f8..545fc74cfd7a1 100644
--- a/packages/ui-components/src/Common/DataTag/index.tsx
+++ b/packages/ui-components/src/Common/DataTag/index.tsx
@@ -31,8 +31,24 @@ const symbolMap = {
   ctor: 'C',
 } as const;
 
+const labelMap = {
+  event: 'Event',
+  method: 'Method',
+  property: 'Property',
+  class: 'Class',
+  module: 'Module',
+  classMethod: 'Class method',
+  global: 'Global',
+  ctor: 'Constructor',
+} as const;
+
 const DataTag: FC<DataTagProps> = ({ kind, size = 'md' }) => (
-  <div className={classNames(styles.dataTag, styles[size], styles[kind])}>
+  <div
+    className={classNames(styles.dataTag, styles[size], styles[kind])}
+    data-tooltip={labelMap[kind]}
+    aria-label={labelMap[kind]}
+    tabIndex={0}
+  >
     <span>{symbolMap[kind]}</span>
   </div>
 );
diff --git a/packages/ui-components/src/Common/Search/Modal/index.module.css b/packages/ui-components/src/Common/Search/Modal/index.module.css
index d683d4c51a183..984bc208ea834 100644
--- a/packages/ui-components/src/Common/Search/Modal/index.module.css
+++ b/packages/ui-components/src/Common/Search/Modal/index.module.css
@@ -24,14 +24,12 @@
     p-1.5
     text-neutral-900
     hover:bg-neutral-100
-    motion-safe:transition-colors
     dark:border-neutral-900
     dark:bg-neutral-950
     dark:text-neutral-200;
 
   &:hover {
     @apply bg-neutral-100
-      motion-safe:transition-colors
       motion-safe:duration-300
       dark:bg-neutral-900;
 
diff --git a/packages/ui-components/src/Common/TableOfContents/index.module.css b/packages/ui-components/src/Common/TableOfContents/index.module.css
index 3e97de5dd5a7c..eac5bd455be23 100644
--- a/packages/ui-components/src/Common/TableOfContents/index.module.css
+++ b/packages/ui-components/src/Common/TableOfContents/index.module.css
@@ -5,7 +5,7 @@
     block
     rounded-md
     bg-neutral-200
-    lg:hidden
+    xl:hidden
     dark:bg-neutral-900;
 
   &[open] {
@@ -49,6 +49,11 @@
       dark:hover:text-neutral-500;
   }
 
+  .codeLink {
+    @apply font-ibm-plex-mono
+      font-medium;
+  }
+
   .depthThree {
     @apply pl-2;
   }
diff --git a/packages/ui-components/src/Common/TableOfContents/index.tsx b/packages/ui-components/src/Common/TableOfContents/index.tsx
index 015e5c4431823..2aa41f669f392 100644
--- a/packages/ui-components/src/Common/TableOfContents/index.tsx
+++ b/packages/ui-components/src/Common/TableOfContents/index.tsx
@@ -1,8 +1,9 @@
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
-import { LinkLike } from '#ui/types';
+import { CODE_LIKE_TYPES } from '#ui/constants';
 
+import type { LinkLike } from '#ui/types';
 import type { Heading } from '@vcarl/remark-headings';
 import type { ComponentProps, FC } from 'react';
 
@@ -44,7 +45,9 @@ const TableOfContents: FC<TableOfContentsProps> = ({
           <li key={head.data?.id ?? index}>
             <Component
               href={head.data?.id && `#${head.data.id}`}
-              className={classNames(styles.link, depthClasses[head.depth])}
+              className={classNames(styles.link, depthClasses[head.depth], {
+                [styles.codeLink]: CODE_LIKE_TYPES.has(head.data?.type ?? ''),
+              })}
             >
               {head.value}
             </Component>
diff --git a/packages/ui-components/src/Common/Tabs/index.module.css b/packages/ui-components/src/Common/Tabs/index.module.css
index f51259c26a0b5..f700b7b1321aa 100644
--- a/packages/ui-components/src/Common/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Tabs/index.module.css
@@ -15,7 +15,8 @@
       @apply border-b-2
         border-b-transparent
         px-1
-        pb-[11px]
+        pt-0
+        pb-2
         text-sm
         font-semibold
         whitespace-nowrap
@@ -28,7 +29,7 @@
           border
           border-neutral-200
           px-1
-          py-0.5
+          py-0
           text-xs
           font-normal
           text-neutral-200;
diff --git a/packages/ui-components/src/Common/ThemeToggle/index.module.css b/packages/ui-components/src/Common/ThemeToggle/index.module.css
index e0ed8df47fddc..4bbf21b7bd44a 100644
--- a/packages/ui-components/src/Common/ThemeToggle/index.module.css
+++ b/packages/ui-components/src/Common/ThemeToggle/index.module.css
@@ -5,7 +5,6 @@
     rounded-md
     p-2
     text-neutral-700
-    motion-safe:transition-colors
     dark:text-neutral-300;
 
   &:hover {
diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css
index c4d541d9fb19f..8d3dccdfd9a8f 100644
--- a/packages/ui-components/src/Containers/Article/index.module.css
+++ b/packages/ui-components/src/Containers/Article/index.module.css
@@ -3,23 +3,24 @@
 .articleLayout {
   @apply max-w-10xl
     ml:grid
-    ml:grid-cols-[--spacing(52)_1fr]
+    ml:grid-cols-[--spacing(56)_1fr]
     ml:grid-rows-[1fr]
     ml:overflow-visible
     ml:[grid-template-areas:'sidebar_main''sidebar_footer']
+    3xl:grid-cols-[--spacing(80)_1fr_--spacing(80)]
     mx-auto
     block
     w-full
-    xl:grid-cols-[--spacing(52)_1fr_--spacing(52)]
+    xl:grid-cols-[--spacing(56)_1fr_--spacing(64)]
     xl:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
-    2xl:grid-cols-[--spacing(80)_1fr_--spacing(80)];
+    2xl:grid-cols-[--spacing(72)_1fr_--spacing(72)];
 
   > *:nth-child(1) {
-    @apply [grid-area:sidebar]
-      xl:sticky
-      xl:top-0
-      xl:h-screen
-      xl:overflow-y-auto;
+    @apply ml:sticky
+      ml:top-0
+      ml:h-svh
+      ml:overflow-y-auto
+      [grid-area:sidebar];
   }
 
   > *:nth-child(2) {
@@ -36,7 +37,8 @@
         p-4
         [grid-area:main]
         motion-safe:scroll-smooth
-        xl:p-12;
+        xl:p-10
+        2xl:p-12;
     }
 
     > *:last-child {
@@ -46,7 +48,7 @@
         [grid-area:metabar]
         xl:sticky
         xl:top-0
-        xl:max-w-xs
+        xl:max-w-none
         xl:border-t-0
         xl:border-l;
     }
diff --git a/packages/ui-components/src/Containers/MetaBar/index.module.css b/packages/ui-components/src/Containers/MetaBar/index.module.css
index 341c3f8b84e69..f06fc547e2668 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/src/Containers/MetaBar/index.module.css
@@ -59,6 +59,11 @@
       }
     }
 
+    a.codeLink {
+      @apply font-ibm-plex-mono
+        font-medium;
+    }
+
     ol {
       @apply flex
         w-full
diff --git a/packages/ui-components/src/Containers/MetaBar/index.tsx b/packages/ui-components/src/Containers/MetaBar/index.tsx
index c761cfe07f643..1fb1dbdb3f9e7 100644
--- a/packages/ui-components/src/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/src/Containers/MetaBar/index.tsx
@@ -1,5 +1,8 @@
+import classNames from 'classnames';
 import { Fragment, useMemo } from 'react';
 
+import { CODE_LIKE_TYPES } from '#ui/constants';
+
 import type { LinkLike } from '#ui/types';
 import type { Heading } from '@vcarl/remark-headings';
 import type { FC, HTMLAttributes } from 'react';
@@ -55,8 +58,14 @@ const MetaBar: FC<MetaBarProps> = ({
                       head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
                     }
                   >
-                    <Component href={`#${head.data?.id}`}>
-                      {' '}
+                    <Component
+                      href={`#${head.data?.id}`}
+                      className={classNames({
+                        [styles.codeLink]: CODE_LIKE_TYPES.has(
+                          head.data?.type ?? ''
+                        ),
+                      })}
+                    >
                       {head.value}
                     </Component>
                   </li>
diff --git a/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css b/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
index 6f848a0d95c4a..be3520a41e57f 100644
--- a/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/NavItem/index.module.css
@@ -6,8 +6,7 @@
     gap-2
     rounded-sm
     px-3
-    py-2
-    motion-safe:transition-colors;
+    py-2;
 
   .label {
     @apply text-base
diff --git a/packages/ui-components/src/Containers/Sidebar/index.module.css b/packages/ui-components/src/Containers/Sidebar/index.module.css
index f129b31b576de..a56bed69bf94b 100644
--- a/packages/ui-components/src/Containers/Sidebar/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/index.module.css
@@ -1,10 +1,11 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply scrollbar-thin
-    ml:max-w-xs
+  @apply ml:max-w-xs
     ml:overflow-auto
     ml:border-r
+    scrollbar-thin
+    ml:pb-[var(--header-height)]
     z-0
     flex
     w-full
@@ -14,7 +15,7 @@
     border-neutral-200
     bg-white
     px-4
-    py-6
+    pt-6
     2xl:px-6
     dark:border-neutral-900
     dark:bg-neutral-950;
diff --git a/packages/ui-components/src/Icons/PartnerLogos/DigitalOcean/Favicon.tsx b/packages/ui-components/src/Icons/PartnerLogos/DigitalOcean/Favicon.tsx
index ff97fbbeb96d8..4d59d1986b865 100644
--- a/packages/ui-components/src/Icons/PartnerLogos/DigitalOcean/Favicon.tsx
+++ b/packages/ui-components/src/Icons/PartnerLogos/DigitalOcean/Favicon.tsx
@@ -18,9 +18,7 @@ const DigitalOcean: FC<SVGProps<SVGSVGElement>> = props => (
                 <path
                   id="XMLID_49_"
                   fill="currentColor"
-                  d="M155.2,351.7v-34.2c36.2,0,64.3-35.9,50.4-74c-5.1-14.1-16.4-25.4-30.5-30.5
-                  c-38.1-13.8-74,14.2-74,50.4l0,0H67c0-57.7,55.8-102.7,116.3-83.8c26.4,8.3,47.5,29.3,55.7,55.7
-                  C257.9,295.9,213,351.7,155.2,351.7z"
+                  d="M155.2,351.7v-34.2c36.2,0,64.3-35.9,50.4-74c-5.1-14.1-16.4-25.4-30.5-30.5c-38.1-13.8-74,14.2-74,50.4l0,0H67c0-57.7,55.8-102.7,116.3-83.8c26.4,8.3,47.5,29.3,55.7,55.7C257.9,295.9,213,351.7,155.2,351.7z"
                 />
               </g>
               <polygon
diff --git a/packages/ui-components/src/constants.ts b/packages/ui-components/src/constants.ts
new file mode 100644
index 0000000000000..84d060f38d166
--- /dev/null
+++ b/packages/ui-components/src/constants.ts
@@ -0,0 +1,6 @@
+export const CODE_LIKE_TYPES = new Set([
+  'method',
+  'classMethod',
+  'function',
+  'ctor',
+]);
diff --git a/packages/ui-components/src/styles/base.css b/packages/ui-components/src/styles/base.css
index ebab370edd929..6348f4ea259af 100644
--- a/packages/ui-components/src/styles/base.css
+++ b/packages/ui-components/src/styles/base.css
@@ -15,3 +15,75 @@ body {
     dark:bg-neutral-950
     dark:text-white;
 }
+
+[data-tooltip] {
+  @apply relative;
+
+  &::after {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-2
+      w-max
+      max-w-64
+      -translate-x-1/2
+      rounded-md
+      border
+      border-neutral-200
+      bg-white
+      px-2.5
+      py-1.5
+      text-sm
+      font-medium
+      text-neutral-900
+      opacity-0
+      shadow-lg
+      transition-opacity;
+
+    content: attr(data-tooltip);
+  }
+
+  &::before {
+    @apply pointer-events-none
+      absolute
+      top-full
+      left-1/2
+      z-10
+      mt-1
+      h-2
+      w-2
+      -translate-x-1/2
+      rotate-45
+      border
+      border-r-0
+      border-b-0
+      border-neutral-200
+      bg-white
+      opacity-0
+      transition-opacity;
+
+    content: '';
+  }
+
+  &:hover::after,
+  &:hover::before,
+  &:focus-visible::after,
+  &:focus-visible::before {
+    @apply opacity-100;
+  }
+}
+
+[data-theme='dark'] [data-tooltip] {
+  &::after {
+    @apply border-neutral-900
+      bg-neutral-950
+      text-white;
+  }
+
+  &::before {
+    @apply border-neutral-900
+      bg-neutral-950;
+  }
+}
diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css
index 333f735e52839..7d05a8e1d2a21 100644
--- a/packages/ui-components/src/styles/markdown.css
+++ b/packages/ui-components/src/styles/markdown.css
@@ -1,5 +1,6 @@
 main {
-  @apply flex
+  @apply max-ml:gap-4
+    flex
     w-full
     flex-col
     gap-6;
@@ -48,6 +49,32 @@ main {
       @apply text-neutral-900
         dark:text-white;
     }
+
+    &[id] {
+      scroll-margin-top: calc(
+        var(--header-height) + var(--spacing, 0.25rem) * 6
+      );
+    }
+
+    &[id] .anchor {
+      @apply text-inherit
+        no-underline;
+    }
+
+    &[id] .anchor::after {
+      @apply ml-2
+        text-neutral-400
+        opacity-0
+        transition-opacity
+        dark:text-neutral-500;
+
+      content: '#';
+    }
+
+    &[id]:hover .anchor::after,
+    &[id]:focus-within .anchor::after {
+      @apply opacity-100;
+    }
   }
 
   strong {
@@ -72,8 +99,7 @@ main {
   }
 
   /* link that isn't inside a heading */
-  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
-  .anchor {
+  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a) {
     @apply max-ml:font-semibold
       text-green-600
       dark:text-green-400;
@@ -98,25 +124,38 @@ main {
   }
 
   ul {
-    @apply list-disc
-      pr-5
-      pl-9
+    @apply max-ml:pr-3
+      max-ml:pl-5
+      list-disc
+      pr-4
+      pl-6
       leading-6
       text-neutral-900
       dark:text-white;
 
+    li + li {
+      @apply mt-2;
+    }
+
     li div:has(> pre) {
       @apply my-1!;
     }
   }
 
   ol {
-    @apply list-decimal
-      px-5
+    @apply max-ml:pr-3
+      max-ml:pl-5
+      list-decimal
+      pr-4
+      pl-6
       leading-6
       text-neutral-900
       dark:text-white;
 
+    li + li {
+      @apply mt-2;
+    }
+
     li div:has(> pre) {
       @apply my-1!;
     }
@@ -137,13 +176,15 @@ main {
     /* Common border and text styles */
     th,
     td {
-      @apply border
+      @apply max-ml:px-3
+        max-ml:py-1.5
+        border
         border-t-0
         border-r-0
         border-neutral-200
         px-4
         py-2
-        break-words
+        wrap-break-word
         text-neutral-900
         dark:border-neutral-900
         dark:text-white;
@@ -218,7 +259,7 @@ main {
           before:-translate-y-1/2
           before:text-left
           before:font-medium
-          before:break-words
+          before:wrap-break-word
           before:text-neutral-700
           before:content-[attr(data-label)]
           last:border-0