diff --git a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
index 2fab5c2ffc236..c2612ee8ba2a1 100644
--- a/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/related-documents-section.tsx
@@ -53,7 +53,7 @@ function CategoryBox({ category }: { category: RelatedDocumentsCategory }) {
           >
             <Link
               href={d.path}
-              className="flex flex-grow items-center justify-between no-underline hover:text-sky-600 hover:underline dark:hover:text-sky-400"
+              className="flex flex-grow items-center justify-between no-underline transition-colors ease-out hover:text-blue-700 hover:underline dark:text-sky-500 dark:hover:text-sky-400"
               prefetch={false}
             >
               <span>{d.name}</span>
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx b/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
index 50deffcbdecef..e3d2fe479b390 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/nodes/link.component.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { cx } from '@nx/nx-dev/ui-primitives';
 
 export function CustomLink(props: any) {
   const target =
@@ -11,7 +12,10 @@ export function CustomLink(props: any) {
       passHref
       target={target}
       rel={target === '_blank' ? 'noreferrer' : undefined}
-      className={props.className}
+      className={cx(
+        props.className,
+        'text-blue-600 transition-colors ease-out hover:text-blue-700 dark:text-sky-500 dark:hover:text-sky-400'
+      )}
     >
       {props.children}
     </Link>