diff --git a/src/components/PatternCards.tsx b/src/components/PatternCards.tsx
index ea8325ce8a..567bb81f81 100644
--- a/src/components/PatternCards.tsx
+++ b/src/components/PatternCards.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 type PatternCardItem = {
@@ -26,9 +27,9 @@ export default function PatternCards({ items, className }: PatternCardsProps) {
   return (
     <div className={className ? `pattern-grid ${className}` : 'pattern-grid'}>
       {items.map((item) => (
-        <a
+        <Link
           key={item.href}
-          href={item.href}
+          to={item.href}
           className="pattern-card"
           {...(item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
         >
@@ -43,7 +44,7 @@ export default function PatternCards({ items, className }: PatternCardsProps) {
             )}
             <p>{item.description}</p>
           </div>
-        </a>
+        </Link>
       ))}
     </div>
   );
diff --git a/src/components/Quickstart/Cards/QuickstartCards.tsx b/src/components/Quickstart/Cards/QuickstartCards.tsx
index c059576451..642c697728 100644
--- a/src/components/Quickstart/Cards/QuickstartCards.tsx
+++ b/src/components/Quickstart/Cards/QuickstartCards.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Link from '@docusaurus/Link';
 import SdkSvg from '../../elements/SdkSvgs/SdkSvg';
 import { SDKS } from '../../../constants/sdks';
 import styles from './QuickstartCards.module.css';
@@ -25,7 +26,7 @@ export default function QuickstartCards({ items, className }: QuickstartCardsPro
       {items.map((item) => {
         const sdk = SDK_BY_LABEL.get(item.title);
         return (
-          <a key={item.href} className={styles.card} href={item.href}>
+          <Link key={item.href} className={styles.card} to={item.href}>
             <div className={styles.cardHeader}>
               {sdk && (
                 <span className={styles.iconWrapper}>
@@ -35,7 +36,7 @@ export default function QuickstartCards({ items, className }: QuickstartCardsPro
               <h3 className={styles.cardTitle}>{item.title}</h3>
             </div>
             <p className={styles.cardDesc}>{item.description}</p>
-          </a>
+          </Link>
         );
       })}
     </div>
diff --git a/src/components/elements/Sdk/SdkOverviewCards/SdkOverviewCards.tsx b/src/components/elements/Sdk/SdkOverviewCards/SdkOverviewCards.tsx
index 9f2d4a1595..7021459146 100644
--- a/src/components/elements/Sdk/SdkOverviewCards/SdkOverviewCards.tsx
+++ b/src/components/elements/Sdk/SdkOverviewCards/SdkOverviewCards.tsx
@@ -5,6 +5,7 @@
 // labels, or API reference links there, update that handler too. See
 // MARKDOWN_PIPELINE.md.
 import React from 'react';
+import Link from '@docusaurus/Link';
 import SdkSvg from '../../SdkSvgs/SdkSvg';
 import { SDKS } from '../../../../constants/sdks';
 import sdkVersions from '../../../../data/sdk-versions.json';
@@ -25,20 +26,20 @@ export const SdkOverviewCards = () => {
               {version && <span className={styles.versionChip}>v{version}</span>}
             </div>
             <div className={styles.cardLinks}>
-              <a href={`/develop/${id}`} className={styles.link}>
+              <Link to={`/develop/${id}`} className={styles.link}>
                 Developer guide
-              </a>
+              </Link>
               <span className={styles.linkDivider} aria-hidden="true">
                 |
               </span>
-              <a
-                href={apiReferenceHref}
+              <Link
+                to={apiReferenceHref}
                 className={styles.link}
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 API reference
-              </a>
+              </Link>
             </div>
           </div>
         );