diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index 6d0f97cb9..ea6da5612 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -4,6 +4,7 @@ import {
   createEffect,
   createSignal,
   For,
+  type JSXElement,
   onCleanup,
   Show,
   untrack,
@@ -12,6 +13,7 @@ import {
 import type { Heading } from "~/genCollections";
 
 interface Props {
+  children?: JSXElement;
   theme: "aside" | "island";
   headings: Heading[];
 }
@@ -126,7 +128,7 @@ function Item(props: {
       <a
         href={`#${props.heading.id}`}
         class={clsx(
-          "py-1 block break-keep text-.8125rem leading-5 font-500",
+          "py-1 block break-keep text-.8125rem leading-5 font-medium",
           props.isActive ? "text-slate-8" : "text-slate-4",
         )}
       >
diff --git a/src/components/blog/prose.tsx b/src/components/blog/prose.tsx
index 08d3b387a..8df1a64a4 100644
--- a/src/components/blog/prose.tsx
+++ b/src/components/blog/prose.tsx
@@ -67,7 +67,7 @@ export function h5(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
     <h5
       {...others}
       class={clsx(
-        "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+        "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
         locals.class,
       )}
     >
@@ -82,7 +82,7 @@ export function h6(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
     <h6
       {...others}
       class={clsx(
-        "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+        "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
         locals.class,
       )}
     >
diff --git a/src/components/prose.css b/src/components/prose.css
index d43b655ca..256825015 100644
--- a/src/components/prose.css
+++ b/src/components/prose.css
@@ -11,10 +11,10 @@ article:has(.prose-marker) h4 {
   @apply text-1.125rem mt-8px mb-8px font-600 leading-[1.35] tracking-[-.014em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h5 {
-  @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+  @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h6 {
-  @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+  @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) p {
   @apply mt-8px mb-8px leading-[1.5] first:mt-0 last:mb-0;
diff --git a/src/components/prose.tsx b/src/components/prose.tsx
index b0a3516be..d7a9de176 100644
--- a/src/components/prose.tsx
+++ b/src/components/prose.tsx
@@ -68,7 +68,7 @@ export function h5(props: JSX.IntrinsicElements["h5"]) {
     <h5
       {...rest}
       class={clsx(
-        "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+        "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
         local.class,
       )}
     >
@@ -83,7 +83,7 @@ export function h6(props: JSX.IntrinsicElements["h6"]) {
     <h6
       {...rest}
       class={clsx(
-        "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+        "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
         local.class,
       )}
     >
diff --git a/src/layouts/rest-api/index.tsx b/src/layouts/rest-api/index.tsx
index 3e2088039..4c91a6376 100644
--- a/src/layouts/rest-api/index.tsx
+++ b/src/layouts/rest-api/index.tsx
@@ -31,7 +31,7 @@ export default function RestApi(props: RestApiProps) {
   );
   return (
     <div class="flex flex-1 justify-center">
-      <article class="m-4 mb-16 flex shrink-1 basis-300 flex-col pb-10 text-slate-700">
+      <article class="m-4 mb-16 flex shrink-1 basis-300 flex-col pb-10 text-slate-7">
         <section id="overview" class="flex flex-col scroll-mt-5.2rem">
           <prose.h1>{props.title}</prose.h1>
           {props.children}
diff --git a/src/layouts/sidebar/DocsNavMenu.tsx b/src/layouts/sidebar/DocsNavMenu.tsx
index 602260559..dbbaa8ffc 100644
--- a/src/layouts/sidebar/DocsNavMenu.tsx
+++ b/src/layouts/sidebar/DocsNavMenu.tsx
@@ -61,7 +61,7 @@ export default function DocsNavMenu(props: Props) {
                   >
                     <li class="[&:not(:last-child)]:mb-4">
                       <h4 class="p-2 text-lg font-bold first:mt-0">
-                        <span class="font-500">{item.label}</span>
+                        <span class="font-medium">{item.label}</span>
                       </h4>
                       <ul class="flex flex-col gap-1">
                         <For each={item.items}>
diff --git a/src/layouts/sidebar/LeftSidebar.tsx b/src/layouts/sidebar/LeftSidebar.tsx
index caef10b50..8b549a641 100644
--- a/src/layouts/sidebar/LeftSidebar.tsx
+++ b/src/layouts/sidebar/LeftSidebar.tsx
@@ -6,7 +6,7 @@ export default function LeftSidebar(props: { children: JSXElement }) {
   const sidebarOpen = useSidebarContext();
 
   return (
-    <aside class="pointer-events-none absolute w-70 shrink-0 text-slate-700 z-left-sidebar md:relative md:block">
+    <aside class="pointer-events-none absolute w-70 shrink-0 text-slate-7 z-left-sidebar md:relative md:block">
       <div
         style={{
           transform: sidebarOpen.get() ? "none" : "translateX(-100%)",
diff --git a/src/layouts/sidebar/LeftSidebarItem.tsx b/src/layouts/sidebar/LeftSidebarItem.tsx
index 65dda7b88..51e781d0e 100644
--- a/src/layouts/sidebar/LeftSidebarItem.tsx
+++ b/src/layouts/sidebar/LeftSidebarItem.tsx
@@ -157,7 +157,7 @@ export function JustLink(props: JustLinkProps) {
 export function getLinkStyle(isActive: boolean): string {
   return `px-2 block text-sm rounded ${
     isActive
-      ? "font-500 text-portone bg-orange-1"
+      ? "font-medium text-portone bg-orange-1"
       : "text-slate-500 hover:bg-slate-1"
   }`;
 }
diff --git a/src/layouts/sidebar/RightSidebar.tsx b/src/layouts/sidebar/RightSidebar.tsx
index 2256b67be..df92ba1e2 100644
--- a/src/layouts/sidebar/RightSidebar.tsx
+++ b/src/layouts/sidebar/RightSidebar.tsx
@@ -1,26 +1,14 @@
-import {
-  createEffect,
-  createSignal,
-  For,
-  type JSXElement,
-  mergeProps,
-  Show,
-} from "solid-js";
+import { type JSXElement, mergeProps, Show } from "solid-js";
 
-import { useSystemVersion } from "~/state/system-version";
+import TableOfContents from "~/components/TableOfContents";
+import type { Heading } from "~/genCollections";
 
 export interface RightSidebarProps {
   lang: string;
-  slug: string;
   file: string;
+  headings: Heading[];
   editThisPagePrefix?: string;
 }
-export type Toc = TocItem[];
-export interface TocItem {
-  slug: string;
-  text: string;
-  children: TocItem[];
-}
 function RightSidebar(_props: RightSidebarProps) {
   const props = mergeProps(
     {
@@ -30,38 +18,15 @@ function RightSidebar(_props: RightSidebarProps) {
     _props,
   );
 
-  const [toc, setToc] = createSignal<Toc | null>(null);
-  const { systemVersion } = useSystemVersion();
-
-  createEffect(() => {
-    void systemVersion();
-    setToc(headingsToToc(props.lang));
-  });
-
   return (
     <div class="hidden min-w-0 w-56 shrink-0 text-slate-7 lg:block">
-      <Show when={toc()}>
+      <Show when={true}>
         <nav class="fixed h-[calc(100%-56px)] w-inherit overflow-y-auto px-2 py-[28px]">
-          <h2 class="mb-2 px-2 font-500">{t(props.lang, "toc")}</h2>
-          <ul>
-            <For each={toc()}>
-              {(item) => (
-                <SidebarItem
-                  href={`#${item.slug}`}
-                  label={<span class="font-500">{item.text}</span>}
-                >
-                  <ul class="pl-3">
-                    <For each={item.children}>
-                      {(item) => (
-                        <SidebarItem href={`#${item.slug}`} label={item.text} />
-                      )}
-                    </For>
-                  </ul>
-                </SidebarItem>
-              )}
-            </For>
-          </ul>
-          <h2 class="mb-2 mt-4 px-2 font-bold">
+          <h2 class="my-2 text-sm text-slate-8 font-medium">
+            {t(props.lang, "toc")}
+          </h2>
+          <TableOfContents theme="aside" headings={props.headings} />
+          <h2 class="my-2 mt-4 text-sm text-slate-8 font-medium">
             {t(props.lang, "contribute")}
           </h2>
           <ul>
@@ -98,7 +63,7 @@ function SidebarItem(props: LinkProps) {
           document.getElementById(slug)?.scrollIntoView({ behavior: "smooth" });
         }}
       >
-        <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-.8125rem text-slate-4 leading-5 hover:bg-slate-1 hover:text-portone">
+        <div class="overflow-hidden text-ellipsis whitespace-nowrap rounded-sm px-2 py-1 text-.8125rem text-slate-4 leading-5 hover:text-portone">
           <Show when={props.icon}>
             <>
               <i class={`${props.icon} inline-block align-top text-lg`}></i>{" "}
@@ -112,33 +77,6 @@ function SidebarItem(props: LinkProps) {
   );
 }
 
-export interface Heading {
-  depth: number;
-  slug: string;
-  text: string;
-}
-
-export function headingsToToc(lang: string): Toc {
-  const result: Toc = [
-    { slug: "overview", text: t(lang, "overview"), children: [] },
-  ];
-  let recent2: TocItem | undefined;
-  const headings: Heading[] = [
-    ...document.querySelectorAll("article :is(h2, h3)"),
-  ].map((el) => ({
-    depth: Number(el.tagName.slice(1)),
-    slug: el.id,
-    text: el.textContent ?? "",
-  }));
-  for (const h of headings.filter((h) => h.depth === 2 || h.depth === 3)) {
-    const item = { ...h, children: [] };
-    if (recent2 && item.depth === 3) recent2.children.push(item);
-    else result.push(item);
-    if (item.depth === 2) recent2 = item;
-  }
-  return result;
-}
-
 const ko = {
   toc: "목차",
   overview: "개요",
diff --git a/src/routes/(root)/opi.tsx b/src/routes/(root)/opi.tsx
index 8d7f10621..c12156707 100644
--- a/src/routes/(root)/opi.tsx
+++ b/src/routes/(root)/opi.tsx
@@ -71,7 +71,7 @@ export default function Docs(props: { children: JSXElement }) {
                   ogImageSlug={`opi/${params().lang}/${params().slug}.png`}
                   docsEntry={frontmatter()}
                 />
-                <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-700">
+                <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-7">
                   <div class="mb-6">
                     <prose.h1 id="overview">{frontmatter().title}</prose.h1>
                     <Show when={frontmatter().description}>
@@ -88,8 +88,8 @@ export default function Docs(props: { children: JSXElement }) {
           <div class="hidden shrink-10 basis-10 lg:block"></div>
           <RightSidebar
             lang={params().lang}
-            slug={params().slug}
             file={doc()?.file ?? ""}
+            headings={doc()?.headings ?? []}
           />
         </div>
       </div>
diff --git a/src/routes/(root)/platform.tsx b/src/routes/(root)/platform.tsx
index ad0263b36..4ae7a2fa7 100644
--- a/src/routes/(root)/platform.tsx
+++ b/src/routes/(root)/platform.tsx
@@ -17,7 +17,7 @@ export default function PlatformLayout(props: { children: JSXElement }) {
     <div class="flex">
       <aside
         id="left-sidebar"
-        class="relative hidden w-65 shrink-0 text-slate-700 md:block"
+        class="relative hidden w-65 shrink-0 text-slate-7 md:block"
       >
         <div class="fixed h-[calc(100%-3.5rem)] w-inherit overflow-y-scroll border-r bg-white">
           <Suspense>
diff --git a/src/routes/(root)/platform/(doc).tsx b/src/routes/(root)/platform/(doc).tsx
index 86e30bb6b..cc276ebba 100644
--- a/src/routes/(root)/platform/(doc).tsx
+++ b/src/routes/(root)/platform/(doc).tsx
@@ -36,20 +36,21 @@ export default function PlatformDocLayout(props: { children: JSXElement }) {
   return (
     <Show when={doc()}>
       {(doc) => {
-        const { title } = doc().frontmatter;
+        const title = createMemo(() => doc().frontmatter.title);
 
         return (
           <>
-            <Metadata title={title} ogType="article" />
-            <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-700">
-              <prose.h1>{title}</prose.h1>
+            <Metadata title={title()} ogType="article" />
+            <article class="m-4 mb-40 min-w-0 flex shrink-1 basis-200 flex-col text-slate-7">
+              <prose.h1>{title()}</prose.h1>
               {props.children}
             </article>
             <div class="hidden shrink-10 basis-10 lg:block"></div>
             <RightSidebar
               lang="ko"
-              slug={doc()?.slug ?? ""}
-              editThisPagePrefix="https://github.com/portone-io/developers.portone.io/blob/main/src/content/platform/"
+              file={doc().file}
+              headings={doc().headings}
+              editThisPagePrefix="https://github.com/portone-io/developers.portone.io/blob/main"
             />
           </>
         );
diff --git a/src/routes/(root)/platform/index.tsx b/src/routes/(root)/platform/index.tsx
index e98a04786..e0c41f786 100644
--- a/src/routes/(root)/platform/index.tsx
+++ b/src/routes/(root)/platform/index.tsx
@@ -3,7 +3,7 @@ import * as prose from "~/components/prose";
 
 export default function PlatformIndex() {
   return (
-    <article class="m-4 w-full flex flex-col text-slate-700">
+    <article class="m-4 w-full flex flex-col text-slate-7">
       <Metadata title="파트너정산 가이드" />
       <prose.h1>파트너 정산 자동화</prose.h1>
       <p class="my-4 text-xl text-gray">
diff --git a/src/routes/(root)/release-notes.tsx b/src/routes/(root)/release-notes.tsx
index 9576d37cc..6537b0f92 100644
--- a/src/routes/(root)/release-notes.tsx
+++ b/src/routes/(root)/release-notes.tsx
@@ -21,7 +21,7 @@ export default function ReleaseNotesLayout(props: Props) {
     <div class="flex">
       <aside
         id="left-sidebar"
-        class="relative hidden w-65 shrink-0 text-slate-700 md:block"
+        class="relative hidden w-65 shrink-0 text-slate-7 md:block"
       >
         <div class="fixed h-[calc(100%-3.5rem)] w-inherit overflow-y-scroll border-r bg-white">
           <Show when={notes()}>
@@ -36,7 +36,7 @@ export default function ReleaseNotesLayout(props: Props) {
         </div>
       </aside>
       <div class="mx-auto shrink basis-200">
-        <article class="m-4 flex flex-col text-slate-700">
+        <article class="m-4 flex flex-col text-slate-7">
           {props.children}
         </article>
       </div>