diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
index ab14c3c..612e10f 100644
--- a/app/blog/layout.tsx
+++ b/app/blog/layout.tsx
@@ -6,7 +6,7 @@ function Layout({
     children: React.ReactNode;
 }) {
     return (
-        <div className={ 'flex flex-auto p-7 items-stretch justify-center' }>
+        <div className={ 'flex flex-auto p-7 pl-2 md:pl-7 items-stretch justify-center' }>
             { children }
         </div>
     );
diff --git a/app/blog/post/[id]/generate.tsx b/app/blog/post/[id]/generate.tsx
index a39a7c8..3771f64 100644
--- a/app/blog/post/[id]/generate.tsx
+++ b/app/blog/post/[id]/generate.tsx
@@ -35,10 +35,10 @@ async function Generate(props: Props) {
 
     return (
         <div>
-            <Card className={ `w-full` }>
+            <Card className={ `w-full max-w-full relative` }>
                 <CardBody>
                     <Markdown
-                        className={ `p-5 max-w-prose text-justify text-pretty会 prose prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
+                        className={ `p-5 max-w-full text-justify text-pretty会 prose prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
                         remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
                         rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
                     >{ (post_data as any)['content'] }</Markdown>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d864419..010df0d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -110,7 +110,7 @@ function Navbar() {
     return (
         <>
             <div
-                className={ `flex flex-col w-auto md:w-full min-w-[50px] max-w-[256px] mr-2 ml-8 min-h-screen max-h-screen pt-8 sticky` }>
+                className={ `flex flex-col w-auto md:w-full min-w-[50px] max-w-[256px] mr-0 md:mr-2 ml-2 md:ml-8 min-h-dvh pt-8 sticky` }>
                 <div className={ `fixed min-h-screen h-full` }>
                     <div className={ `hidden md:block` }>
                         <div className={ `flex justify-center items-center my-7` }>
@@ -153,7 +153,7 @@ function Navbar() {
                     </div>
 
                     <div
-                        className={ `mt-8 ml-0 md:-ml-3` }>
+                        className={ `flex justify-center md:justify-start mt-8 ml-0 md:-ml-3` }>
                         <ul className={ `flex flex-col space-y-2` }>
                             {
                                 entries.map((meta, key) => (
@@ -176,8 +176,8 @@ function Navbar() {
                         </ul>
                     </div>
 
-                    <div className={ `mt-8 md:hidden` }>
-                        <p className={ `sideways-lr font-bold text-2xl text-zinc-500 dark:text-zinc-400` }>
+                    <div className={ `mt-8 flex md:hidden justify-center w-full` }>
+                        <p className={ `text-center sideways-lr font-bold text-2xl text-zinc-500 dark:text-zinc-400` }>
                             { shownPath }
                         </p>
                     </div>