diff --git a/components/readerpage/SideTOC.tsx b/components/readerpage/DrawerTOC.tsx
similarity index 92%
rename from components/readerpage/SideTOC.tsx
rename to components/readerpage/DrawerTOC.tsx
index 1b4da01..9989732 100644
--- a/components/readerpage/SideTOC.tsx
+++ b/components/readerpage/DrawerTOC.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { FaHeading } from "react-icons/fa";
 
-export const SideTOC = (props: { data: TTOCItem[] }) => {
+export const DrawerTOC = (props: { data: TTOCItem[] }) => {
   const [isTOCOpen, setIsTOCOpen] = useState(false);
   return (
     <Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
@@ -25,7 +25,7 @@ export const SideTOC = (props: { data: TTOCItem[] }) => {
               onClick={() => {
                 setIsTOCOpen(false);
               }}
-              key={`flat-toc-${item.anchorId}`}
+              key={`drawer-toc-${item.anchorId}`}
               href={`#${item.anchorId}`}
             >
               <li
diff --git a/components/readerpage/TOC.tsx b/components/readerpage/TOC.tsx
index 43593eb..94374d5 100644
--- a/components/readerpage/TOC.tsx
+++ b/components/readerpage/TOC.tsx
@@ -3,8 +3,8 @@ import Link from "next/link";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] mx-5 p-2 border-l border-dashed border-gray-500">
-      <div className="p-2 font-bold border-b border-gray-500">{"TABLE OF CONTENTS"}</div>
+    <div className="sticky top-[5em] mx-5 p-2 border-gray-500">
+      <div className="p-2 font-bold text-center border border-gray-500">{"TABLE OF CONTENTS"}</div>
       <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
         {props.data?.map((item) => (
           <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index d73cc69..b1b12a0 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -1,9 +1,9 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
 import { MDXComponentsSet } from "@/components/mdx";
+import { DrawerTOC } from "@/components/readerpage/DrawerTOC";
 import { PostComments } from "@/components/readerpage/PostComments";
 import { PostCover } from "@/components/readerpage/PostCover";
 import { ShareButtons } from "@/components/readerpage/ShareButtons";
-import { SideTOC } from "@/components/readerpage/SideTOC";
 import { TOC } from "@/components/readerpage/TOC";
 import { Toaster } from "@/components/ui/toaster";
 import { Footer } from "@/components/utils/Footer";
@@ -143,7 +143,7 @@ const ReaderPage = (props: ReaderPageProps) => {
         </div>
         {props.tocList.length > 2 && (
           <div className="md:hidden">
-            <SideTOC data={props.tocList} />
+            <DrawerTOC data={props.tocList} />
           </div>
         )}
       </ContentContainer>