diff --git a/app/blog/BlogPostCard.tsx b/app/blog/BlogPostCard.tsx
index ef34ac4..2e1a1b4 100644
--- a/app/blog/BlogPostCard.tsx
+++ b/app/blog/BlogPostCard.tsx
@@ -16,9 +16,7 @@ function BlogPostCard({ post }: Props) {
     return (
 
         <div>
-            {/*todo: to be update*/ }
-            {/*<Link href={ `/blog/${ name }` }>*/ }
-            <Card as={ Link } href={ `/blog/post/${ post_id }` }>
+            <Card as={ Link } href={ `/blog/post/${ post_id }` } className={ `mx-7` }>
                 <CardHeader>
                     <p className={ 'font-bold' }>{ title }</p>
                 </CardHeader>
@@ -31,7 +29,6 @@ function BlogPostCard({ post }: Props) {
                     { last_update }
                 </CardBody>
             </Card>
-            {/*</Link>*/ }
         </div>
     );
 
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index b88dd0e..7b5af57 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -11,7 +11,7 @@ async function Blog() {
             // blog list
             <ul className={ 'flex flex-col items-center w-full max-w-[1024px]' }>
                 { posts.map((post: JSON, key: React.Key | null | undefined) => (
-                    <li key={ key } className={ 'my-3.5 mx-7 w-[80%]' }>
+                    <li key={ key } className={ 'my-7 w-full' }>
                         <BlogPostCard post={ post } />
                     </li>)
                 ) }