diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index c2c789d..f054c2a 100644
--- a/app/p/[slug]/page.tsx
+++ b/app/p/[slug]/page.tsx
@@ -1,8 +1,7 @@
 import rehypePrism from '@mapbox/rehype-prism';
 import components from 'components/mdx/components';
-import PostToc from 'components/post/post-toc';
 import data from 'content/mdx-data';
-import { readSinglePost, allPostsPath } from 'lib/posts';
+import { allPostsPath, readSinglePost } from 'lib/posts';
 import { SingleToc, generateToc } from 'lib/utils';
 import { compileMDX } from 'next-mdx-remote/rsc';
 import dynamic from 'next/dynamic';
@@ -11,6 +10,7 @@ import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 import { Post } from 'types';
 
+const PostToc = dynamic(() => import('components/post/post-toc'));
 const PostCommnetLine = dynamic(
   () => import('components/post/post-commnet-line')
 );
diff --git a/components/post/post-toc.tsx b/components/post/post-toc.tsx
index 7fe123b..11f119c 100644
--- a/components/post/post-toc.tsx
+++ b/components/post/post-toc.tsx
@@ -31,20 +31,20 @@ const PostToc = ({ toc, tocLength }: Props) => {
       <div
         className={clsx(
           styles.head,
-          'bg-white pt-4 px-6',
-          'rounded-lg border border-gray-200',
+          'bg-white pt-4 px-4 md:px-6',
+          'rounded-lg',
           'dark:bg-rua-gray-800 dark:border-rua-gray-600',
           'select-none cursor-pointer',
           'rounded-lg transition-all',
           'duration-500 overflow-hidden',
-          'my-4 text-2xl'
+          'my-4 text-xl'
         )}
         style={{
-          maxHeight: show ? (tocLength ?? 0) * 50 + 70 : 70,
+          maxHeight: show ? (tocLength ?? 0) * 50 + 60 : 60,
         }}
       >
         <div
-          className={clsx('flex justify-between items-center')}
+          className={clsx('flex justify-between items-center h-full')}
           onClick={handleClick}
         >
           <span className="text-gray-500">TABLE OF CONTENTS</span>