diff --git a/apps/blog/src/App.tsx b/apps/blog/src/App.tsx
index eca0556..c02b65e 100644
--- a/apps/blog/src/App.tsx
+++ b/apps/blog/src/App.tsx
@@ -14,7 +14,7 @@ function App() {
     return (
         <>
             <Header />
-            <main className="mb-8 mt-20 flex w-screen grow flex-col items-center gap-8 px-8">
+            <main className="mx-auto mb-8 mt-20 flex w-full max-w-screen-mobile grow flex-col items-center gap-8 px-8">
                 <Switch>
                     <Route path="/">
                         <Home />
diff --git a/apps/blog/src/components/PostCard.tsx b/apps/blog/src/components/PostCard.tsx
index c8a7590..3afad7f 100644
--- a/apps/blog/src/components/PostCard.tsx
+++ b/apps/blog/src/components/PostCard.tsx
@@ -24,9 +24,9 @@ export default function PostCard({ postData, className }: Props) {
     const { content_id, wordCount, date, readTime, title, tags } = postData
 
     return (
-        <Link href={content_id}>
-            <a className={`${className} w-full`}>
-                <Card className="cursor-pointer fill-light-text-gray text-light-text-gray hover:shadow-glow dark:fill-dark-text-gray dark:text-dark-text-gray">
+        <Link href={content_id} className={`${className} w-full`}>
+            <a className="w-full">
+                <Card className="w-full cursor-pointer fill-light-text-gray text-light-text-gray hover:shadow-glow dark:fill-dark-text-gray dark:text-dark-text-gray">
                     <h2 className="mb-8 text-3xl">
                         {title}
                         {/* show "(series)" for urls that matches regex "/series/<series-title>" */}