diff --git a/app/entities/post/detail/PostBody.tsx b/app/entities/post/detail/PostBody.tsx
index dda1532..ade8d53 100644
--- a/app/entities/post/detail/PostBody.tsx
+++ b/app/entities/post/detail/PostBody.tsx
@@ -11,7 +11,7 @@ interface Props {
 const PostBody = ({ content, loading }: Props) => {
   return (
     <div
-      className={'max-w-3xl post-body px-4 py-16 min-h-[500px] relative    '}
+      className={'max-w-full post-body px-4 py-16 min-h-[500px] relative    '}
     >
       {loading ? (
         <div className={'w-1/3 mx-auto'}>
diff --git a/app/entities/post/detail/PostTOC.tsx b/app/entities/post/detail/PostTOC.tsx
index 8039f90..a36d814 100644
--- a/app/entities/post/detail/PostTOC.tsx
+++ b/app/entities/post/detail/PostTOC.tsx
@@ -12,7 +12,7 @@ const PostTOC = ({ postContent }: { postContent: string }) => {
   };
 
   return (
-    <div className="fixed post-toc hidden lg:block w-[280px] top-1/2 -translate-y-1/2 left-[calc(50%+524px)]  transition-all  text-sm bg-gray-100/80 rounded-md p-4 text-black">
+    <div className="fixed post-toc hidden 2xl:block w-[280px] top-[calc(50%+100px)] -translate-y-1/2 left-[calc(50%+524px)]  transition-all  text-sm bg-gray-100/80 rounded-md p-4 text-black">
       <h4 className={'text-xl font-bold mb-2'}>📌 Table of Contents</h4>
       <ul className={'list-none'}>
         {parseHeadings(postContent).map((heading) => {
diff --git a/app/globals.css b/app/globals.css
index 27062a8..c3be5c5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -65,6 +65,7 @@ article.post h6 {
 
 article.post .post-body {
   max-width: 768px;
+  width: 100%;
   margin: 0 auto;
   font-size: 1.1em;
   line-height: 150%;