diff --git a/packages/website/app/modules/app/app-footer.tsx b/packages/website/app/modules/app/app-footer.tsx
index 747acde..c92bede 100644
--- a/packages/website/app/modules/app/app-footer.tsx
+++ b/packages/website/app/modules/app/app-footer.tsx
@@ -11,13 +11,13 @@ export function AppFooter() {
       </address>
       <p>
         Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
-        <ExternalLink className={linkClass} href="https://remix.run">
+        <ExternalLink className={linkClass()} href="https://remix.run">
           Remix
         </ExternalLink>
       </p>
       <p>
         Uses{" "}
-        <ExternalLink className={linkClass} href="https://umami.is/">
+        <ExternalLink className={linkClass()} href="https://umami.is/">
           umami
         </ExternalLink>{" "}
         for simple, non-identifying analytics.
diff --git a/packages/website/app/modules/navigation/active-link.tsx b/packages/website/app/modules/navigation/active-link.tsx
new file mode 100644
index 0000000..6efb164
--- /dev/null
+++ b/packages/website/app/modules/navigation/active-link.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import type { PathPattern } from "react-router"
+import { useMatch } from "react-router"
+
+export function ActiveLink({
+  to,
+  children,
+}: {
+  to: string | PathPattern
+  children: (props: { active: boolean }) => ReactNode
+}) {
+  const match = useMatch(to)
+  return <>{children({ active: match != undefined })}</>
+}
diff --git a/packages/website/app/modules/navigation/main-navigation-menu.tsx b/packages/website/app/modules/navigation/main-navigation-menu.tsx
index be2a33d..6127976 100644
--- a/packages/website/app/modules/navigation/main-navigation-menu.tsx
+++ b/packages/website/app/modules/navigation/main-navigation-menu.tsx
@@ -1,6 +1,7 @@
 import { Menu, Transition } from "@headlessui/react"
 import { MenuAlt4Icon } from "@heroicons/react/outline"
 import clsx from "clsx"
+import { ActiveLink } from "~/modules/navigation/active-link"
 import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { Popper } from "~/modules/ui/popper"
 import { AppLink } from "./app-link"
@@ -39,8 +40,17 @@ export function MainNavigationMenu() {
               </Menu.Item>
               {guideLinks.map(({ link }) => (
                 <Menu.Item key={link.to}>
-                  {({ active }) => (
-                    <AppLink {...link} className={menuItemClass({ active })} />
+                  {(menuItem) => (
+                    <ActiveLink to={link.to}>
+                      {(activeLink) => (
+                        <AppLink
+                          {...link}
+                          className={menuItemClass({
+                            active: activeLink.active || menuItem.active,
+                          })}
+                        />
+                      )}
+                    </ActiveLink>
                   )}
                 </Menu.Item>
               ))}
diff --git a/packages/website/app/modules/navigation/main-navigation.tsx b/packages/website/app/modules/navigation/main-navigation.tsx
index 6e5b1df..6e9fb12 100644
--- a/packages/website/app/modules/navigation/main-navigation.tsx
+++ b/packages/website/app/modules/navigation/main-navigation.tsx
@@ -12,7 +12,7 @@ export function MainNavigation() {
       </a>
       <div className="hidden md:flex gap-4">
         {mainLinks.map((link) => (
-          <AppLink {...link} key={link.to} className={linkClass} />
+          <AppLink {...link} key={link.to} className={linkClass()} />
         ))}
       </div>
       <div className="md:hidden">
diff --git a/packages/website/app/modules/ui/components.ts b/packages/website/app/modules/ui/components.ts
index 76b590e..128ad0f 100644
--- a/packages/website/app/modules/ui/components.ts
+++ b/packages/website/app/modules/ui/components.ts
@@ -4,12 +4,16 @@ export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
 
 export const inlineIconClass = clsx`inline w-5 align-sub`
 
-export const linkClass = clsx`
-  font-medium inline-block relative
-  opacity-60 hover:opacity-100 transition-opacity
-  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
-  hover:after:translate-y-[-1px] hover:after:opacity-100
-`
+export const linkClass = ({ active = false } = {}) =>
+  clsx(
+    clsx`font-medium inline-block relative`,
+    clsx`opacity-60 hover:opacity-100 transition-opacity`,
+    clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
+    clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
+    active
+      ? clsx`text-emerald-500 after:bg-emerald-500`
+      : clsx`after:bg-white/50`,
+  )
 
 export const docsProseClass = clsx`
   prose prose-invert
diff --git a/packages/website/app/routes/guides.tsx b/packages/website/app/routes/guides.tsx
index 3f1556c..6d797aa 100644
--- a/packages/website/app/routes/guides.tsx
+++ b/packages/website/app/routes/guides.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import { Outlet } from "remix"
+import { ActiveLink } from "~/modules/navigation/active-link"
 import { AppLink } from "~/modules/navigation/app-link"
 import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
@@ -24,7 +25,11 @@ export default function GuidePage() {
           <ul className="mt-3 flex flex-col gap-2 items-start">
             {guideLinks.map(({ link }) => (
               <li key={link.to}>
-                <AppLink {...link} className={linkClass} />
+                <ActiveLink to={link.to}>
+                  {({ active }) => (
+                    <AppLink {...link} className={linkClass({ active })} />
+                  )}
+                </ActiveLink>
               </li>
             ))}
           </ul>
diff --git a/packages/website/package.json b/packages/website/package.json
index 900028d..a4aced5 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -25,6 +25,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-focus-on": "^3.5.4",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
     "remix": "^1.1.1"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a68c691..3528680 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,6 +117,8 @@ importers:
       react: ^17.0.2
       react-dom: ^17.0.2
       react-focus-on: ^3.5.4
+      react-router: ^6.2.1
+      react-router-dom: ^6.2.1
       rehype-prism-plus: ^1.3.1
       remix: ^1.1.1
       tailwindcss: ^3.0.13
@@ -137,6 +139,8 @@ importers:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-focus-on: 3.5.4_b08e3c15324cbe90a6ff8fcd416c932c
+      react-router: 6.2.1_react@17.0.2
+      react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
       remix: 1.1.1
     devDependencies:
       '@remix-run/dev': 1.1.1