diff --git a/apps/reference/docs/guides/auth.mdx b/apps/reference/docs/guides/auth.mdx
index 48a05b1db40..353c10092e4 100644
--- a/apps/reference/docs/guides/auth.mdx
+++ b/apps/reference/docs/guides/auth.mdx
@@ -9,6 +9,8 @@ import Link from '@docusaurus/Link'
 import Tabs from '@theme/Tabs'
 import TabItem from '@theme/TabItem'
 import providers from '@site/src/data/authProviders'
+import ButtonCard from '@site/src/components/ButtonCard'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 
 <div class="video-container">
   <iframe
@@ -46,8 +48,13 @@ We provide a suite of Providers and login methods.
   <div class="row is-multiline">
     {providers.map((x) => (
       <div key={x.name} class="col col--6">
-        <Link class="card" to={x.href}>
-          <div class="card__body">
+        <ButtonCard
+          class="card"
+          to={useBaseUrl(x.href)}
+          title={x.name}
+          style={{ height: '100%' }}
+        >
+          <div class="button-card__inner">
             <div
               class=""
               style={{
@@ -93,7 +100,7 @@ We provide a suite of Providers and login methods.
               </div>
             </div>
           </div>
-        </Link>
+        </ButtonCard>
       </div>
     ))}
   </div>
diff --git a/apps/reference/src/components/ButtonCard.js b/apps/reference/src/components/ButtonCard.js
index 69083291f0b..ce4f8993441 100644
--- a/apps/reference/src/components/ButtonCard.js
+++ b/apps/reference/src/components/ButtonCard.js
@@ -15,11 +15,19 @@ export default function ButtonCard({
       to={to}
       className={['button-card', `button-card--${layout}`].join(' ')}
     >
-      <div className="button-card__inner">
-        {icon && typeof icon == 'string' ? <img src={icon} width={24} /> : icon}
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
+      {children ? (
+        children
+      ) : (
+        <div className="button-card__inner">
+          {icon && typeof icon == 'string' ? (
+            <img src={icon} width={24} />
+          ) : (
+            icon
+          )}
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      )}
     </Link>
   )
 }
diff --git a/apps/reference/src/css/main.scss b/apps/reference/src/css/main.scss
index 53650f6020a..46afe98f693 100644
--- a/apps/reference/src/css/main.scss
+++ b/apps/reference/src/css/main.scss
@@ -74,7 +74,7 @@
   --ifm-color-warning: var(--custom-color-orange-600);
   --ifm-color-info-contrast-background: var(--custom-background-color-diff);
   --ifm-pre-background: var(--custom-background-color-diff) !important;
-
+  --ifm-link-hover-color:  var(--custom-primary);
   --prism-background-color: var(#1c1c1c) !important;
 
   /* Primary */