diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
index 25ac771..b527a35 100644
--- a/app/blog/layout.tsx
+++ b/app/blog/layout.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import PostCardLoading from 'components/pages/blog/post-card-loading';
 import { Metadata } from 'next';
 import { ReactNode } from 'react';
 
@@ -8,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function PageLayout({ children }: { children: ReactNode }) {
   return (
-    <main className="max-w-4xl mx-auto">
+    <main className="max-w-4xl mx-auto lg:w-[56rem]">
       <h1
         className={clsx(
           'text-5xl font-bold text-center font-Barlow',
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index 94161ae..419139a 100644
--- a/app/p/[slug]/page.tsx
+++ b/app/p/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import rehypePrism from '@mapbox/rehype-prism';
+import clsx from 'clsx';
 import components from 'components/mdx/components';
 import data from 'content/mdx-data';
 import { allPostsPath, readSinglePost } from 'lib/posts';
@@ -56,7 +57,13 @@ const Page = async ({
 
   return (
     <>
-      <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
+      <main
+        id="article"
+        className={clsx(
+          'relative max-w-4xl px-4 mx-auto my-10',
+          'lg:w-[56rem] w-full',
+        )}
+      >
         <h1>{mdxSource.frontmatter?.title}</h1>
         <time>{mdxSource.frontmatter?.date}</time>
         <PostToc toc={toc} tocLength={tocLength} />
diff --git a/components/pages/blog/post-card-loading.tsx b/components/pages/blog/post-card-loading.tsx
index 1be7fe1..33b4b7e 100644
--- a/components/pages/blog/post-card-loading.tsx
+++ b/components/pages/blog/post-card-loading.tsx
@@ -10,7 +10,7 @@ const PostCardLoading = () => {
         'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
         'flex justify-between text-gray-800 ',
         'mb-4 dark:text-gray-200',
-        'flex-col',
+        'flex-col w-full',
       )}
     >
       <div className="flex justify-between">