diff --git a/components/ui/MiniTocs/MiniTocs.tsx b/components/ui/MiniTocs/MiniTocs.tsx
index 81e49de99f..621e82fd84 100644
--- a/components/ui/MiniTocs/MiniTocs.tsx
+++ b/components/ui/MiniTocs/MiniTocs.tsx
@@ -1,43 +1,43 @@
+import React from 'react'
+import { Heading, NavList } from '@primer/react'
 import cx from 'classnames'
-import { ActionList, Heading } from '@primer/react'
 
-import type { MiniTocItem } from 'components/context/ArticleContext'
+import { MiniTocItem } from 'components/context/ArticleContext'
 import { Link } from 'components/Link'
 import { useTranslation } from 'components/hooks/useTranslation'
 
+import styles from './Minitocs.module.scss'
+
 export type MiniTocsPropsT = {
   pageTitle: string
   miniTocItems: MiniTocItem[]
 }
 
-const renderTocItem = (item: MiniTocItem) => {
+function RenderTocItem(item: MiniTocItem) {
   return (
-    <ActionList.Item
-      as="li"
-      key={item.contents.href}
-      className={item.platform}
-      sx={{
-        listStyle: 'none',
-        padding: '2px',
-        ':hover': {
-          bg: 'var(--color-canvas-inset) !important',
-        },
-        'ul > li': {
-          ':hover': {
-            bg: 'var(--color-neutral-subtle) !important',
-          },
-        },
-      }}
-    >
-      <div className={cx('lh-condensed d-block width-full')}>
-        <a className="d-block width-auto" href={item.contents.href}>
-          {item.contents.title}
-        </a>
-        {item.items && item.items.length > 0 ? (
-          <ul className="ml-3">{item.items.map(renderTocItem)}</ul>
-        ) : null}
-      </div>
-    </ActionList.Item>
+    <div className={cx(styles.nested, item.platform)}>
+      <NavList.Item
+        href={item.contents.href}
+        sx={{
+          padding: '4px 0 4px 0',
+          marginLeft: '7px',
+        }}
+      >
+        {item.contents.title}
+      </NavList.Item>
+      {item.items && item.items.length > 0 && (
+        <ul className={cx(styles.indentNested)}>
+          {item.items.map((toc) => (
+            <RenderTocItem
+              key={toc.contents.href}
+              contents={toc.contents}
+              items={toc.items}
+              platform={toc.platform}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
   )
 }
 
@@ -46,17 +46,22 @@ export function MiniTocs({ pageTitle, miniTocItems }: MiniTocsPropsT) {
 
   return (
     <>
-      <Heading as="h2" id="in-this-article" className="mb-1" sx={{ fontSize: 1 }}>
+      <Heading as="h2" id="in-this-article" className="mb-1 ml-3" sx={{ fontSize: 1 }}>
         <Link href="#in-this-article">{t('miniToc')}</Link>
       </Heading>
 
-      <ActionList variant="full" className="my-2" key={pageTitle} as="div">
-        <div>
-          {miniTocItems.map((items, i) => {
-            return <ul key={pageTitle + i}>{renderTocItem(items)}</ul>
-          })}
-        </div>
-      </ActionList>
+      <NavList className="my-2" key={pageTitle}>
+        {miniTocItems.map((items, i) => {
+          return (
+            <RenderTocItem
+              key={items.contents.href + i}
+              contents={items.contents}
+              items={items.items}
+              platform={items.platform}
+            />
+          )
+        })}
+      </NavList>
     </>
   )
 }
diff --git a/components/ui/MiniTocs/Minitocs.module.scss b/components/ui/MiniTocs/Minitocs.module.scss
new file mode 100644
index 0000000000..f1d6cec325
--- /dev/null
+++ b/components/ui/MiniTocs/Minitocs.module.scss
@@ -0,0 +1,12 @@
+.indentNested {
+  padding-inline-start: 0;
+}
+
+.nested {
+  div ul div li {
+    padding-left: 4em;
+  }
+  div li {
+    padding-left: 2em;
+  }
+}
diff --git a/tests/rendering/server.js b/tests/rendering/server.js
index a7ed3fe0d7..9b52f55307 100644
--- a/tests/rendering/server.js
+++ b/tests/rendering/server.js
@@ -326,7 +326,7 @@ describe('server', () => {
     test('renders mini TOC in articles with more than one heading', async () => {
       const $ = await getDOM('/en/github/getting-started-with-github/githubs-products')
       expect($('h2#in-this-article').length).toBe(1)
-      expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(1)
+      expect($('h2#in-this-article + nav ul li').length).toBeGreaterThan(1)
     })
 
     test('renders mini TOC in articles that includes h3s when specified by frontmatter', async () => {
@@ -334,8 +334,8 @@ describe('server', () => {
         '/en/admin/policies/enforcing-policies-for-your-enterprise/enforcing-policies-for-security-settings-in-your-enterprise'
       )
       expect($('h2#in-this-article').length).toBe(1)
-      expect($('h2#in-this-article + div div ul').length).toBeGreaterThan(0) // non-indented items
-      expect($('h2#in-this-article + div div ul li div div ul.ml-3').length).toBeGreaterThan(0) // indented items
+      expect($('h2#in-this-article + nav ul').length).toBeGreaterThan(0) // non-indented items
+      expect($('h2#in-this-article + nav ul div ul div').length).toBeGreaterThan(0) // indented items
     })
 
     test('does not render mini TOC in articles with only one heading', async () => {
@@ -358,13 +358,13 @@ describe('server', () => {
     // TODO
     test('renders mini TOC with correct links when headings contain markup', async () => {
       const $ = await getDOM('/en/actions/using-workflows/workflow-syntax-for-github-actions')
-      expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
+      expect($('h2#in-this-article + nav ul li a[href="#on"]').length).toBe(1)
     })
 
     // TODO
     test('renders mini TOC with correct links when headings contain markup in localized content', async () => {
       const $ = await getDOM('/ja/actions/using-workflows/workflow-syntax-for-github-actions')
-      expect($('h2#in-this-article + div div ul a[href="#on"]').length).toBe(1)
+      expect($('h2#in-this-article + nav ul li a[href="#on"]').length).toBe(1)
     })
   })
 
@@ -918,13 +918,9 @@ describe('extended Markdown', () => {
   test('renders expected mini TOC headings in platform-specific content', async () => {
     const $ = await getDOM('/en/github/using-git/associating-text-editors-with-git')
     expect($('h2#in-this-article').length).toBe(1)
-    expect($('h2#in-this-article + div div ul li.extended-markdown.mac').length).toBeGreaterThan(1)
-    expect(
-      $('h2#in-this-article + div div ul li.extended-markdown.windows').length
-    ).toBeGreaterThan(1)
-    expect($('h2#in-this-article + div div ul li.extended-markdown.linux').length).toBeGreaterThan(
-      1
-    )
+    expect($('h2#in-this-article + nav ul div.extended-markdown.mac').length).toBeGreaterThan(1)
+    expect($('h2#in-this-article + nav ul div.extended-markdown.windows').length).toBeGreaterThan(1)
+    expect($('h2#in-this-article + nav ul div.extended-markdown.linux').length).toBeGreaterThan(1)
   })
 })