diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index dddb0892dfc..ac7ad197628 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -280,6 +280,7 @@ const ItemsList: React.FC<IPropsItemsList> = ({
   if (depth > maxDepth || !items) {
     return null
   }
+
   return (
     <>
       {items.map((item, index) => (
diff --git a/src/components/UpgradeTableOfContents.js b/src/components/UpgradeTableOfContents.tsx
similarity index 63%
rename from src/components/UpgradeTableOfContents.js
rename to src/components/UpgradeTableOfContents.tsx
index a06979da1f0..0b2660a4841 100644
--- a/src/components/UpgradeTableOfContents.js
+++ b/src/components/UpgradeTableOfContents.tsx
@@ -3,6 +3,8 @@ import { motion } from "framer-motion"
 import { Link } from "gatsby"
 import styled from "styled-components"
 
+import type { Item as ItemTableOfContents } from "./TableOfContents"
+
 const customIdRegEx = /^.+(\s*\{#([A-Za-z0-9\-_]+?)\}\s*)$/
 
 const Aside = styled.aside`
@@ -40,12 +42,10 @@ const StyledTableOfContentsLink = styled(Link)`
   margin-bottom: 0.5rem !important;
 `
 
-const slugify = (s) =>
+const slugify = (s: string): string =>
   encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, "-"))
 
-const getCustomId = (title) => {
-  // match .md headings
-  // ex. `## Why stake with a pool? {#why-stake-with-a-pool}`
+const getCustomId = (title: string): string => {
   const match = customIdRegEx.exec(title)
   if (match) {
     return match[2].toLowerCase()
@@ -54,19 +54,32 @@ const getCustomId = (title) => {
   return slugify(title)
 }
 
-const trimmedTitle = (title) => {
+const trimmedTitle = (title: string): string => {
   const match = customIdRegEx.exec(title)
   return match ? title.replace(match[1], "").trim() : title
 }
 
-const TableOfContentsLink = ({ depth, item }) => {
+export interface Item extends ItemTableOfContents {}
+
+interface IPropsTableOfContentsLink {
+  depth: number
+  item: Item
+}
+
+const TableOfContentsLink: React.FC<IPropsTableOfContentsLink> = ({
+  depth,
+  item,
+}: {
+  depth: number
+  item: Item
+}) => {
   const url = `#${getCustomId(item.title)}`
   let isActive = false
   if (typeof window !== `undefined`) {
     isActive = window.location.hash === url
   }
-  const isNested = depth === 2
-  let classes = ""
+  const isNested: boolean = depth === 2
+  let classes: string = ""
   if (isActive) {
     classes += " active"
   }
@@ -80,30 +93,61 @@ const TableOfContentsLink = ({ depth, item }) => {
   )
 }
 
-const ItemsList = ({ items, depth, maxDepth }) =>
-  depth <= maxDepth && !!items
-    ? items.map((item, index) => (
+interface IPropsItemsList {
+  items: Array<Item>
+  depth: number
+  maxDepth: number
+}
+
+const ItemsList: React.FC<IPropsItemsList> = ({
+  items,
+  depth,
+  maxDepth,
+}: {
+  items: Array<Item>
+  depth: number
+  maxDepth: number
+}) => {
+  if (depth > maxDepth || !items) {
+    return null
+  }
+
+  return (
+    <>
+      {items.map((item, index) => (
         <ListItem key={index}>
           <div>
             <TableOfContentsLink depth={depth} item={item} />
           </div>
         </ListItem>
-      ))
-    : null
+      ))}
+    </>
+  )
+}
+
+export interface IProps {
+  items: Array<Item>
+  maxDepth?: number
+  className?: string
+}
 
-const UpgradeTableOfContents = ({ items, maxDepth, className }) => {
+const UpgradeTableOfContents: React.FC<IProps> = ({
+  items,
+  maxDepth = 1,
+  className,
+}) => {
   if (!items) {
     return null
   }
   // Exclude <h1> from TOC
   if (items.length === 1) {
-    items = items[0].items
+    items = [items[0]]
   }
 
   return (
     <Aside className={className}>
       <OuterList>
-        <ItemsList items={items} depth={0} maxDepth={maxDepth ? maxDepth : 1} />
+        <ItemsList items={items} depth={0} maxDepth={maxDepth} />
       </OuterList>
     </Aside>
   )
diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx
index 925fb3a8435..2d7a868e89d 100644
--- a/src/templates/staking.tsx
+++ b/src/templates/staking.tsx
@@ -437,7 +437,7 @@ const StakingPage = ({
           {mdx.frontmatter.sidebar && tocItems && (
             <UpgradeTableOfContents
               items={tocItems}
-              maxDepth={mdx.frontmatter.sidebarDepth}
+              maxDepth={mdx.frontmatter.sidebarDepth!}
             />
           )}
         </InfoColumn>
diff --git a/src/templates/upgrade.tsx b/src/templates/upgrade.tsx
index 12704fd8385..09b497cc76c 100644
--- a/src/templates/upgrade.tsx
+++ b/src/templates/upgrade.tsx
@@ -27,7 +27,9 @@ import PageMetadata from "../components/PageMetadata"
 import Pill from "../components/Pill"
 import RandomAppList from "../components/RandomAppList"
 import Roadmap from "../components/Roadmap"
-import UpgradeTableOfContents from "../components/UpgradeTableOfContents"
+import UpgradeTableOfContents, {
+  Item as ItemTableOfContents,
+} from "../components/UpgradeTableOfContents"
 import Translation from "../components/Translation"
 import TranslationsInProgress from "../components/TranslationsInProgress"
 import SectionNav from "../components/SectionNav"
@@ -44,11 +46,7 @@ import MergeInfographic from "../components/MergeInfographic"
 import FeedbackCard from "../components/FeedbackCard"
 
 import { getLocaleTimestamp } from "../utils/time"
-import {
-  isLangRightToLeft,
-  translateMessageId,
-  TranslationKey,
-} from "../utils/translations"
+import { isLangRightToLeft } from "../utils/translations"
 import { getSummaryPoints } from "../utils/getSummaryPoints"
 import { Lang } from "../utils/languages"
 import { Context } from "../types"
@@ -345,7 +343,7 @@ const UpgradePage = ({
     throw new Error("Required `title` property missing for upgrade template")
 
   const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
-  const tocItems = mdx.tableOfContents?.items
+  const tocItems = mdx.tableOfContents?.items as Array<ItemTableOfContents>
 
   // FIXME: remove this any, currently not sure how to fix the ts error
   const parent: any = mdx.parent
@@ -394,7 +392,7 @@ const UpgradePage = ({
           {mdx.frontmatter.sidebar && tocItems && (
             <UpgradeTableOfContents
               items={tocItems}
-              maxDepth={mdx.frontmatter.sidebarDepth}
+              maxDepth={mdx.frontmatter.sidebarDepth!}
             />
           )}
         </InfoColumn>
diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx
index e7676246ec1..9cfc254f35d 100644
--- a/src/templates/use-cases.tsx
+++ b/src/templates/use-cases.tsx
@@ -26,10 +26,10 @@ import PageMetadata from "../components/PageMetadata"
 import Pill from "../components/Pill"
 import RandomAppList from "../components/RandomAppList"
 import Roadmap from "../components/Roadmap"
-import UpgradeTableOfContents from "../components/UpgradeTableOfContents"
-import TableOfContents, {
+import UpgradeTableOfContents, {
   Item as ItemTableOfContents,
-} from "../components/TableOfContents"
+} from "../components/UpgradeTableOfContents"
+import TableOfContents from "../components/TableOfContents"
 import TranslationsInProgress from "../components/TranslationsInProgress"
 import Translation from "../components/Translation"
 import SectionNav from "../components/SectionNav"
@@ -421,7 +421,7 @@ const UseCasePage = ({
           {mdx.frontmatter.sidebar && tocItems && (
             <UpgradeTableOfContents
               items={tocItems}
-              maxDepth={mdx.frontmatter.sidebarDepth}
+              maxDepth={mdx.frontmatter.sidebarDepth!}
             />
           )}
         </InfoColumn>