diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
index 09394aeb..b94a99b8 100644
--- a/src/components/Hero/index.tsx
+++ b/src/components/Hero/index.tsx
@@ -40,14 +40,15 @@ export default function Hero(): JSX.Element {
             Documentation
           </Link>
 
-          <a
-            href="/llms-full.txt"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.llms}
-          >
-            llms-full.txt
-          </a>
+          <div className={styles.ai}>
+            <a href="/llms-full.txt" target="_blank" rel="noopener noreferrer">
+              llms-full.txt
+            </a>
+            ·
+            <a href="/docs/guides/ai" className={styles.llms}>
+              AI tools
+            </a>
+          </div>
         </div>
       </div>
     </article>
diff --git a/src/components/Hero/styles.module.scss b/src/components/Hero/styles.module.scss
index d1b426db..7a307d43 100644
--- a/src/components/Hero/styles.module.scss
+++ b/src/components/Hero/styles.module.scss
@@ -98,14 +98,24 @@
   font-weight: bold;
 }
 
-.llms {
+.ai {
   display: inline-flex;
   justify-content: center;
+  gap: 0.25rem;
 
   grid-column-start: 2;
 
+  padding: 0.15rem 0 0;
+
   font-size: calc(var(--ifm-font-size-base) * 0.65);
 
-  color: var(--ifm-font-color-base);
-  text-decoration: underline;
+  a {
+    color: var(--ifm-font-color-base);
+    text-decoration: underline;
+
+    &:hover,
+    &:active {
+      color: var(--ifm-link-color);
+    }
+  }
 }