diff --git a/src/app.css b/src/app.css
index cd62fdc..6e7e3ab 100644
--- a/src/app.css
+++ b/src/app.css
@@ -228,6 +228,10 @@
   scrollbar-width: thin;
   scrollbar-gutter: stable both-edges;
 }
+#center-body:has(.blog-overide) {
+  scrollbar-width: none !important;
+  scrollbar-gutter: unset !important;
+}
 #rightbar-content {
   scrollbar-width: none;
 }
diff --git a/src/app.tsx b/src/app.tsx
index f2ac2db..b31be89 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -159,7 +159,7 @@ function AppLayout(props: { children: any }) {
         <LeftBar />
         <div
           id="center-body"
-          class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-auto md:ml-62.5 md:w-[calc(100vw-500px)]"
+          class="bg-base relative h-screen w-screen overflow-x-hidden md:ml-62.5 md:w-[calc(100vw-500px)]"
         >
           <noscript>
             <div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)]">
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index 62a052f..dd75071 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -343,9 +343,9 @@ export default function PostPage() {
                       }
                     />
 
-                    <div class="relative -mt-16 overflow-x-hidden">
+                    <div class="blog-overide relative -mt-16 overflow-x-hidden">
                       {/* Fixed banner image background */}
-                      <div class="fixed inset-0 top-0 left-0 z-0 h-full w-full overflow-hidden brightness-75 sm:h-96 md:ml-62.5 md:h-[50vh] md:w-[calc(100vw-500px)]">
+                      <div class="fixed inset-0 top-0 left-0 z-0 aspect-auto max-h-3/4 w-full overflow-hidden brightness-75 md:ml-62.5 md:max-h-[50vh] md:w-[calc(100vw-500px)]">
                         <img
                           src={p().banner_photo || "/blueprint.jpg"}
                           alt="post-cover"