diff --git a/app/blog/loading.tsx b/app/blog/loading.tsx
new file mode 100644
index 0000000..aede694
--- /dev/null
+++ b/app/blog/loading.tsx
@@ -0,0 +1,15 @@
+import PostCardLoading from './post-card-loading';
+
+const Loading = () => {
+  const num = Array(4).fill(1);
+
+  return (
+    <>
+      {num.map((_, i) => (
+        <PostCardLoading key={i} />
+      ))}
+    </>
+  );
+};
+
+export default Loading;
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 2bfa057..379292f 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -3,6 +3,7 @@ import PostCardLoading from './post-card-loading';
 import { PostPerPage, postLists } from 'lib/posts';
 import { Fragment, Suspense } from 'react';
 import Pagination from 'components/rua/rua-pagination';
+import clsx from 'clsx';
 
 export default async function Page() {
   const allPosts = await postLists();
@@ -31,4 +32,4 @@ export default async function Page() {
       />
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/app/blog/post-card-loading.tsx b/app/blog/post-card-loading.tsx
index 85bc622..1c03374 100644
--- a/app/blog/post-card-loading.tsx
+++ b/app/blog/post-card-loading.tsx
@@ -5,25 +5,58 @@ const PostCardLoading = () => {
   return (
     <article
       className={clsx(
-        'rounded-xl py-4 px-5 md:p-7 animate-pulse',
-        'bg-sky-100 bg-opacity-50',
-        'dark:bg-rua-gray-800 dark:bg-opacity-100',
-        'flex items-center justify-between text-gray-800 ',
-        'mb-4 dark:text-gray-200'
+        'rounded-xl py-4 px-5 md:p-7 ',
+        'hover:bg-sky-100 hover:bg-opacity-50',
+        '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'
       )}
     >
-      <div className="flex-1">
-        <h2 className="w-full mb-4 bg-gray-300 rounded-lg md:w-96 h-9 dark:bg-gray-500"></h2>
+      <div className="flex justify-between">
+        <h2
+          className={clsx(
+            'w-96 bg-gray-300 h-7 animate-pulse',
+            'mb-4 text-3xl font-semibold font-Barlow',
+            'rounded-lg dark:bg-gray-500'
+          )}
+        ></h2>
 
-        <div className="flex items-center text-sm">
-          <div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
-          <div className="w-16 h-5 bg-gray-300 rounded-md dark:bg-gray-500"></div>
-        </div>
+        <div
+          className={clsx(
+            'hidden animate-pulse h-5 bg-gray-300',
+            'dark:bg-gray-500 lg:block w-24',
+            'rounded-lg'
+          )}
+        ></div>
       </div>
 
-      <div className="hidden w-24 h-6 bg-gray-300 rounded-md md:block dark:bg-gray-500"></div>
+      <div className="flex justify-between">
+        <div className="flex items-center text-sm">
+          <div
+            className={clsx(
+              'mr-4 last:mr-0 w-9 animate-pulse h-5',
+              'rounded-lg bg-gray-300 dark:bg-gray-500'
+            )}
+          ></div>
+          <div
+            className={clsx(
+              'mr-4 last:mr-0 w-9 animate-pulse h-5',
+              'rounded-lg bg-gray-300 dark:bg-gray-500'
+            )}
+          ></div>
+        </div>
+
+        <div
+          className={clsx(
+            'hidden animate-pulse h-5 bg-gray-300',
+            'dark:bg-gray-500 lg:block w-24',
+            'rounded-lg lg:hidden'
+          )}
+        ></div>
+      </div>
     </article>
   );
 };
 
-export default memo(PostCardLoading);
+export default memo(PostCardLoading);
\ No newline at end of file
diff --git a/app/blog/post-card.tsx b/app/blog/post-card.tsx
index 77a24a4..99495a0 100644
--- a/app/blog/post-card.tsx
+++ b/app/blog/post-card.tsx
@@ -23,7 +23,7 @@ const PostCard = ({ post }: Props) => {
           )}
         >
           <div className="flex justify-between">
-            <h2 className="mb-4 text-3xl font-semibold font-Barlow">
+            <h2 className="mb-4  text-3xl font-semibold font-Barlow">
               {post.title}
             </h2>
 
@@ -51,4 +51,4 @@ const PostCard = ({ post }: Props) => {
   );
 };
 
-export default memo(PostCard);
+export default memo(PostCard);
\ No newline at end of file