diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js
index 7cb42e94b0d..d8abb5972c5 100644
--- a/src/components/table-of-contents.js
+++ b/src/components/table-of-contents.js
@@ -76,7 +76,7 @@ export const Desktop = withTableOfContents(({items}) => (
       maxHeight: `calc(100vh - ${SCROLL_MARGIN_TOP}px)`,
     }}
   >
-    <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
+    <Heading as="h2" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
       Table of contents
     </Heading>
     <Box
diff --git a/src/mdx/components.js b/src/mdx/components.js
index f9bce4ef9d1..93004241c92 100644
--- a/src/mdx/components.js
+++ b/src/mdx/components.js
@@ -124,10 +124,10 @@ const Headings = {
 
 export const H1 = Headings.wrap('h1')
 export const H2 = Headings.wrap('h2')
-export const H3 = Headings.wrap('h3')
-export const H4 = Headings.wrap('h4')
-export const H5 = Headings.wrap('h5')
-export const H6 = Headings.wrap('h6')
+export const H3 = Headings.wrap('h2')
+export const H4 = Headings.wrap('h3')
+export const H5 = Headings.wrap('h4')
+export const H6 = Headings.wrap('h5')
 
 export const Blockquote = styled.blockquote`
   margin: 0 0 ${themeGet('space.3')};