diff --git a/.changeset/light-donkeys-explode.md b/.changeset/light-donkeys-explode.md
new file mode 100644
index 00000000..2b780b27
--- /dev/null
+++ b/.changeset/light-donkeys-explode.md
@@ -0,0 +1,6 @@
+---
+'@myst-theme/article': patch
+'@myst-theme/site': patch
+---
+
+Update slugToUrl in article theme
diff --git a/package.json b/package.json
index abf02970..09bc7de5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,10 @@
     "changeset": "changeset",
     "version": "changeset version && npm install",
     "publish": "npm run clean && npm run build -- --force && changeset publish && git push --follow-tags",
-    "publish:ci": "npm run clean && npm run build && changeset publish && git push --follow-tags"
+    "publish:ci": "npm run clean && npm run build && changeset publish && git push --follow-tags",
+    "bump:myst:packages": "npx npm-upgrade-monorepo -w 'packages/*' 'myst-* @myst-theme/*'",
+    "bump:myst:themes": "npx npm-upgrade-monorepo -w 'themes/*' 'myst-* @myst-theme/*'",
+    "bump:myst": "npm run bump:myst:packages && npm run bump:myst:themes"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
@@ -52,6 +55,5 @@
     "node": ">=14.0.0"
   },
   "packageManager": "npm@8.10.0",
-  "dependencies": {
-  }
+  "dependencies": {}
 }
diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx
index 635124b8..2caaf8ca 100644
--- a/packages/site/src/components/DocumentOutline.tsx
+++ b/packages/site/src/components/DocumentOutline.tsx
@@ -12,6 +12,7 @@ import type { RefObject } from 'react';
 import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { slugToUrl } from 'myst-common';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 
@@ -443,7 +444,7 @@ export function SupportingDocuments() {
             return (
               <li key={p.slug}>
                 <NavLink
-                  to={withBaseurl(`/${p.slug}#main`, baseurl)}
+                  to={withBaseurl(`/${slugToUrl(p.slug)}#main`, baseurl)}
                   prefetch="intent"
                   className={({ isActive }) =>
                     classNames('no-underline flex self-center hover:text-blue-700', {
diff --git a/themes/article/app/utils/loaders.server.ts b/themes/article/app/utils/loaders.server.ts
index 8050f364..2cfd9152 100644
--- a/themes/article/app/utils/loaders.server.ts
+++ b/themes/article/app/utils/loaders.server.ts
@@ -1,6 +1,7 @@
 import fetch from 'node-fetch';
 import { redirect } from '@remix-run/node';
 import type { SiteManifest } from 'myst-config';
+import { slugToUrl } from 'myst-common';
 import {
   type PageLoader,
   getFooterLinks,
@@ -65,7 +66,7 @@ export async function getPage(
     throw redirect(projectName ? `/${projectName}` : '/');
   }
   if (opts.slug?.endsWith('.index') && opts.redirect) {
-    const newSlug = opts.slug.slice(0, -6);
+    const newSlug = slugToUrl(opts.slug);
     throw redirect(projectName ? `/${projectName}/${newSlug}` : `/${newSlug}`);
   }
   let slug = opts.loadIndexPage || opts.slug == null ? project.index : opts.slug;