diff --git a/app/(main)/blog/BlogPostPage.tsx b/app/(main)/blog/BlogPostPage.tsx
index d76a7ed1..7ed18369 100644
--- a/app/(main)/blog/BlogPostPage.tsx
+++ b/app/(main)/blog/BlogPostPage.tsx
@@ -40,13 +40,13 @@ export function BlogPostPage({
 }) {
   return (
     <Container className="mt-16 lg:mt-32">
-      <div className="flex w-full justify-between xl:relative">
+      <div className="w-full md:flex md:justify-between xl:relative">
         <aside className="hidden w-[160px] shrink-0 lg:block">
           <div className="sticky top-2 pt-20">
-            <BlogPostTableOfContents body={post.body} />
+            <BlogPostTableOfContents headings={post.headings} />
           </div>
         </aside>
-        <div className="max-w-2xl flex-1 shrink-0">
+        <div className="max-w-2xl md:flex-1 md:shrink-0">
           <Button
             href="/blog"
             variant="secondary"
diff --git a/app/(main)/blog/BlogPostTableOfContents.tsx b/app/(main)/blog/BlogPostTableOfContents.tsx
index c3e94fb8..e84e00dd 100644
--- a/app/(main)/blog/BlogPostTableOfContents.tsx
+++ b/app/(main)/blog/BlogPostTableOfContents.tsx
@@ -13,8 +13,8 @@ interface Node {
   children?: HeadingNode[]
 }
 
-const parseOutline = (body: Node[]) => {
-  return body
+const parseOutline = (nodes: Node[]) => {
+  return nodes
     .filter((node) => node._type === 'block' && node.style.startsWith('h'))
     .map((node) => {
       return {
@@ -26,8 +26,8 @@ const parseOutline = (body: Node[]) => {
     })
 }
 
-export function BlogPostTableOfContents({ body }: { body: Node[] }) {
-  const outline = parseOutline(body)
+export function BlogPostTableOfContents({ headings }: { headings: Node[] }) {
+  const outline = parseOutline(headings)
 
   return (
     <ul className="group pointer-events-auto flex flex-col space-y-2 text-zinc-500">