diff --git a/app/[locale]/learn/page.tsx b/app/[locale]/learn/page.tsx
index 3627c054948..d7d8ca5c7e3 100644
--- a/app/[locale]/learn/page.tsx
+++ b/app/[locale]/learn/page.tsx
@@ -13,9 +13,9 @@ import FileContributors from "@/components/FileContributors"
 import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
 import { Image, ImageProps } from "@/components/Image"
-import LeftNavBar from "@/components/LeftNavBar"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
+import TableOfContents from "@/components/TableOfContents"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Center, Flex, Stack } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
@@ -185,11 +185,7 @@ export default async function Page({ params }: { params: Promise<Params> }) {
         asChild
       >
         <MainArticle>
-          <LeftNavBar
-            tocItems={tocData}
-            // TODO: Remove `!` flag once this component is migrated to ShadCN
-            className="max-lg:!hidden"
-          />
+          <TableOfContents items={tocData} variant="left" />
 
           <ContentContainer id="content">
             <Section
diff --git a/app/[locale]/staking/_components/staking.tsx b/app/[locale]/staking/_components/staking.tsx
index 733d00ad66a..3468a9584f1 100644
--- a/app/[locale]/staking/_components/staking.tsx
+++ b/app/[locale]/staking/_components/staking.tsx
@@ -13,13 +13,13 @@ import Card from "@/components/Card"
 import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import LeftNavBar from "@/components/LeftNavBar"
 import { ContentContainer, Page } from "@/components/MdComponents"
 import MobileButtonDropdown from "@/components/MobileButtonDropdown"
 import PageHero from "@/components/PageHero"
 import StakingCommunityCallout from "@/components/Staking/StakingCommunityCallout"
 import StakingHierarchy from "@/components/Staking/StakingHierarchy"
 import StakingStatsBox from "@/components/Staking/StakingStatsBox"
+import TableOfContents from "@/components/TableOfContents"
 import Translation from "@/components/Translation"
 import {
   ButtonLink,
@@ -251,11 +251,10 @@ const StakingPage = ({
         <StakingStatsBox data={data} />
       </HeroStatsWrapper>
       <Page>
-        <LeftNavBar
+        <TableOfContents
+          items={tocArray}
+          variant="left"
           dropdownLinks={dropdownLinks}
-          tocItems={tocArray}
-          // TODO: Remove bang after this component is migrated to Tailwind
-          className="max-lg:!hidden"
         />
         <ContentContainer>
           <Flex className="mt-16 flex-col gap-16 lg:mt-0">
diff --git a/src/components/LeftNavBar/index.tsx b/src/components/LeftNavBar/index.tsx
deleted file mode 100644
index 2aa4d837f7d..00000000000
--- a/src/components/LeftNavBar/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { ToCItem } from "@/lib/types"
-
-import ButtonDropdown, {
-  List as ButtonDropdownList,
-} from "@/components/ButtonDropdown"
-import Translation from "@/components/Translation"
-import UpgradeTableOfContents from "@/components/UpgradeTableOfContents"
-
-import { cn } from "@/lib/utils/cn"
-
-export type LeftNavBarProps = {
-  dropdownLinks?: ButtonDropdownList
-  maxDepth?: number
-  tocItems: ToCItem[]
-  className?: string
-  showDropdown?: boolean
-}
-
-const LeftNavBar = ({
-  dropdownLinks,
-  maxDepth = 1,
-  tocItems,
-  className,
-  showDropdown = true,
-  ...props
-}: LeftNavBarProps) => {
-  return (
-    <aside
-      className={cn(
-        "z-99 sticky top-[6.25rem] me-16 ms-8 flex h-[calc(100vh-80px)] basis-[400px] flex-col",
-        className
-      )}
-      {...props}
-    >
-      {showDropdown && dropdownLinks && (
-        <div className="relative mb-8 flex items-end justify-end">
-          <ButtonDropdown
-            list={dropdownLinks}
-            className="w-full min-w-[240px]"
-          />
-        </div>
-      )}
-      <h2 className="mb-8 text-3xl leading-xs">
-        <Translation id="on-this-page" />
-      </h2>
-      {tocItems && (
-        <UpgradeTableOfContents items={tocItems} maxDepth={maxDepth} />
-      )}
-    </aside>
-  )
-}
-
-export default LeftNavBar
diff --git a/src/components/TableOfContents/ItemsList.tsx b/src/components/TableOfContents/ItemsList.tsx
index 6cbd44664e5..c3d9a58be1c 100644
--- a/src/components/TableOfContents/ItemsList.tsx
+++ b/src/components/TableOfContents/ItemsList.tsx
@@ -4,16 +4,30 @@ import type { ToCItem } from "@/lib/types"
 
 import ToCLink from "@/components/TableOfContents/TableOfContentsLink"
 
-const variants = cva("mb-2 last:mb-0", {
+const itemVariants = cva("last:mb-0", {
   variants: {
     variant: {
-      default: "",
+      docs: "mb-2",
       beginner:
         "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item",
+      left: "mb-4 list-none text-xl",
     },
   },
   defaultVariants: {
-    variant: "default",
+    variant: "docs",
+  },
+})
+
+const listVariants = cva("", {
+  variants: {
+    variant: {
+      docs: "m-0 mt-2 list-none gap-2 ps-2 text-sm",
+      beginner: "",
+      left: "",
+    },
+  },
+  defaultVariants: {
+    variant: "docs",
   },
 })
 
@@ -22,7 +36,7 @@ export type ItemsListProps = {
   depth: number
   maxDepth: number
   activeHash?: string
-} & VariantProps<typeof variants>
+} & VariantProps<typeof itemVariants>
 
 const ItemsList = ({
   items,
@@ -39,7 +53,7 @@ const ItemsList = ({
       {items.map((item, index) => {
         const { title, items } = item
         return (
-          <li key={index} className={variants({ variant })} {...rest}>
+          <li key={index} className={itemVariants({ variant })} {...rest}>
             <ToCLink
               variant={variant}
               depth={depth}
@@ -47,7 +61,7 @@ const ItemsList = ({
               activeHash={activeHash}
             />
             {items && (
-              <ul key={title} className="m-0 mt-2 list-none gap-2 ps-2 text-sm">
+              <ul key={title} className={listVariants({ variant })}>
                 <ItemsList
                   items={items}
                   depth={depth + 1}
diff --git a/src/components/TableOfContents/TableOfContentsLink.tsx b/src/components/TableOfContents/TableOfContentsLink.tsx
index 1c26fce43df..4c2ffe21d46 100644
--- a/src/components/TableOfContents/TableOfContentsLink.tsx
+++ b/src/components/TableOfContents/TableOfContentsLink.tsx
@@ -7,16 +7,17 @@ import { cn } from "@/lib/utils/cn"
 import { BaseLink } from "../ui/Link"
 
 const variants = cva(
-  "group relative inline-block w-full py-0.5 text-body-medium no-underline lg:w-auto",
+  "group relative inline-block w-full text-body-medium no-underline lg:w-auto",
   {
     variants: {
       variant: {
-        default: "",
+        docs: "py-0.5",
         beginner: "[&_[data-label='marker']]:!hidden inline leading-base",
+        left: "",
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: "docs",
     },
   }
 )
diff --git a/src/components/TableOfContents/TableOfContentsMobile.tsx b/src/components/TableOfContents/TableOfContentsMobile.tsx
index 2c6bc7b4ad3..0602e17a6d0 100644
--- a/src/components/TableOfContents/TableOfContentsMobile.tsx
+++ b/src/components/TableOfContents/TableOfContentsMobile.tsx
@@ -19,13 +19,14 @@ import { useTranslation } from "@/hooks/useTranslation"
 const variants = cva("flex w-full justify-between lg:hidden", {
   variants: {
     variant: {
-      default: "",
+      docs: "",
       beginner:
         "[&>span]:flex-none mb-16 justify-center rounded-lg border-border bg-accent-a/10 text-lg font-bold",
+      left: "",
     },
   },
   defaultVariants: {
-    variant: "default",
+    variant: "docs",
   },
 })
 
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index 8b60396ddd0..22ec5e0e22b 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -4,6 +4,9 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import type { ToCItem } from "@/lib/types"
 
+import ButtonDropdown, {
+  List as ButtonDropdownList,
+} from "@/components/ButtonDropdown"
 import Github from "@/components/icons/github.svg"
 import ItemsList from "@/components/TableOfContents/ItemsList"
 import Mobile from "@/components/TableOfContents/TableOfContentsMobile"
@@ -17,34 +20,47 @@ import { useTranslation } from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 
 const variants = cva(
-  "sticky hidden flex-col items-start overflow-y-auto lg:flex",
+  "sticky flex h-fit max-lg:hidden flex-col items-start overflow-y-auto",
   {
     variants: {
       variant: {
-        default:
-          "top-19 min-w-48 max-w-[25%] p-4 pe-0 h-[calc(100vh-80px)] gap-4",
+        docs: "top-19 min-w-48 max-w-[25%] p-4 pe-0 gap-4",
         beginner: cn(
-          "top-[7.25rem] min-w-80 max-w-72 lg:p-8 px-3 py-2",
-          "h-fit shrink-0 space-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium",
-          "[&_ul]:list-decimal [&_ul]:border-s-0 [&_ul]:text-base [&_ul]:list-inside [&_ul]:ps-0"
+          "top-28 min-w-80 max-w-72 lg:p-8 px-3 py-2",
+          "shrink-0 gap-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium"
         ),
+        left: "top-28 me-16 ms-8 basis-[400px] [&_ul]:leading-relaxed",
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: "docs",
     },
   }
 )
 
-const labelVariants = cva("text-body-medium", {
+const labelVariants = cva("font-bold", {
   variants: {
     variant: {
-      default: "uppercase",
-      beginner: "font-bold text-lg",
+      docs: "uppercase text-body-medium font-normal",
+      beginner: "text-lg text-body-medium",
+      left: "mb-8 text-3xl leading-xs",
     },
   },
   defaultVariants: {
-    variant: "default",
+    variant: "docs",
+  },
+})
+
+const listVariants = cva("mx-0 gap-2 py-0", {
+  variants: {
+    variant: {
+      docs: "list-none border-s border-s-body-medium ps-4 my-2 text-sm",
+      beginner: "list-decimal border-s-0 text-base list-inside ps-0 my-2",
+      left: "list-none my-0",
+    },
+  },
+  defaultVariants: {
+    variant: "docs",
   },
 })
 
@@ -55,6 +71,8 @@ export interface TableOfContentsProps extends VariantProps<typeof variants> {
   hideEditButton?: boolean
   isMobile?: boolean
   className?: string
+  dropdownLinks?: ButtonDropdownList
+  showDropdown?: boolean
 }
 
 const TableOfContents = ({
@@ -65,6 +83,8 @@ const TableOfContents = ({
   isMobile = false,
   className,
   variant,
+  dropdownLinks,
+  showDropdown = true,
   ...rest
 }: TableOfContentsProps) => {
   const pathname = usePathname()
@@ -93,7 +113,7 @@ const TableOfContents = ({
   }
 
   return (
-    <aside className={variants({ variant, className })} {...rest}>
+    <nav className={variants({ variant, className })} {...rest}>
       {!hideEditButton && editPath && (
         <ButtonLink
           href={editPath}
@@ -108,17 +128,25 @@ const TableOfContents = ({
           {t("edit-page")}
         </ButtonLink>
       )}
+      {variant === "left" && showDropdown && dropdownLinks && (
+        <div className="relative mb-8 flex w-full items-end justify-end">
+          <ButtonDropdown
+            list={dropdownLinks}
+            className="w-full min-w-[240px]"
+          />
+        </div>
+      )}
       <div className={labelVariants({ variant })}>{t("on-this-page")}</div>
-      <ul className="m-0 mb-2 mt-2 list-none gap-2 border-s border-s-body-medium ps-4 pt-0 text-sm">
+      <ul className={listVariants({ variant })}>
         <ItemsList
           items={items}
           depth={0}
-          maxDepth={maxDepth ? maxDepth : 1}
+          maxDepth={maxDepth ?? 1}
           activeHash={activeHash}
           variant={variant}
         />
       </ul>
-    </aside>
+    </nav>
   )
 }
 
diff --git a/src/layouts/ContentLayout.tsx b/src/layouts/ContentLayout.tsx
index 6f181798afb..3e5ce499102 100644
--- a/src/layouts/ContentLayout.tsx
+++ b/src/layouts/ContentLayout.tsx
@@ -4,14 +4,16 @@ import { FileContributor } from "@/lib/types"
 
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
 import { ContentContainer, Page } from "@/components/MdComponents"
 import MobileButtonDropdown from "@/components/MobileButtonDropdown"
+import TableOfContents, {
+  type TableOfContentsProps,
+} from "@/components/TableOfContents"
 
 type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
-  Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
-    showDropdown?: boolean
+  Pick<TableOfContentsProps, "dropdownLinks" | "showDropdown"> & {
     children: React.ReactNode
+    tocItems: TableOfContentsProps["items"]
     heroSection: React.ReactNode
     contributors: FileContributor[]
     lastEditLocaleTimestamp: string
@@ -21,7 +23,6 @@ export const ContentLayout = ({
   children,
   dropdownLinks,
   tocItems,
-  maxDepth,
   showDropdown = true,
   heroSection,
   contributors,
@@ -33,14 +34,13 @@ export const ContentLayout = ({
       {heroSection}
 
       <Page>
-        <LeftNavBar
-          className="max-lg:hidden"
+        <TableOfContents
+          items={tocItems}
           dropdownLinks={dropdownLinks}
-          tocItems={tocItems}
-          maxDepth={maxDepth}
+          maxDepth={0}
           showDropdown={showDropdown}
+          variant="left"
         />
-
         <ContentContainer>
           {children}
 
diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx
index c83b9cedb64..d8e4f363d54 100644
--- a/src/layouts/Docs.tsx
+++ b/src/layouts/Docs.tsx
@@ -144,9 +144,9 @@ export const DocsLayout = ({
           <TableOfContents
             editPath={absoluteEditPath}
             items={tocItems}
-            isMobile
             maxDepth={frontmatter.sidebarDepth!}
             hideEditButton={!!frontmatter.hideEditButton}
+            isMobile
           />
           <div className="prose prose-lg max-w-none break-words">
             {children}
diff --git a/src/layouts/Static.tsx b/src/layouts/Static.tsx
index 1ad0f0521a7..917bb1ddcd3 100644
--- a/src/layouts/Static.tsx
+++ b/src/layouts/Static.tsx
@@ -132,9 +132,9 @@ export const StaticLayout = ({
             <TableOfContents
               className="relative"
               items={tocItems}
-              isMobile
               maxDepth={frontmatter.sidebarDepth || 2}
               hideEditButton={!!frontmatter.hideEditButton}
+              isMobile
             />
             {children}
 
diff --git a/src/layouts/md/Roadmap.tsx b/src/layouts/md/Roadmap.tsx
index 18cb9eb0f88..4c2330ae1b1 100644
--- a/src/layouts/md/Roadmap.tsx
+++ b/src/layouts/md/Roadmap.tsx
@@ -106,7 +106,6 @@ export const RoadmapLayout = ({
       dir={contentNotTranslated ? "ltr" : "unset"}
       tocItems={tocItems}
       dropdownLinks={dropdownLinks}
-      maxDepth={frontmatter.sidebarDepth}
       contributors={contributors}
       lastEditLocaleTimestamp={lastEditLocaleTimestamp}
       heroSection={
diff --git a/src/layouts/md/Staking.tsx b/src/layouts/md/Staking.tsx
index 0df3431c9d1..6c4349dab2e 100644
--- a/src/layouts/md/Staking.tsx
+++ b/src/layouts/md/Staking.tsx
@@ -172,7 +172,6 @@ export const StakingLayout = ({
       dir={contentNotTranslated ? "ltr" : "unset"}
       tocItems={tocItems}
       dropdownLinks={dropdownLinks}
-      maxDepth={frontmatter.sidebarDepth}
       contributors={contributors}
       lastEditLocaleTimestamp={lastEditLocaleTimestamp}
       heroSection={<ContentHero {...heroProps} />}
diff --git a/src/layouts/md/UseCases.tsx b/src/layouts/md/UseCases.tsx
index c6c6504e5d6..90bf3fc090d 100644
--- a/src/layouts/md/UseCases.tsx
+++ b/src/layouts/md/UseCases.tsx
@@ -199,7 +199,6 @@ export const UseCasesLayout = ({
       <ContentLayout
         tocItems={tocItems}
         dropdownLinks={dropdownLinks}
-        maxDepth={frontmatter.sidebarDepth}
         contributors={contributors}
         lastEditLocaleTimestamp={lastEditLocaleTimestamp}
         heroSection={<ContentHero {...heroProps} />}
diff --git a/src/layouts/stories/ContentLayout.stories.tsx b/src/layouts/stories/ContentLayout.stories.tsx
index 0ad1da8ca02..2da65cee80d 100644
--- a/src/layouts/stories/ContentLayout.stories.tsx
+++ b/src/layouts/stories/ContentLayout.stories.tsx
@@ -61,7 +61,6 @@ export const ContentLayout: StoryObj<typeof meta> = {
         },
       ],
     },
-    maxDepth: 2,
     contributors: [
       {
         login: "samajammin",