diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
new file mode 100644
index 0000000..dc71d29
--- /dev/null
+++ b/app/blog/layout.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+export default function PageLayout({ children }: { children: ReactNode }) {
+  return (
+    <main className="max-w-4xl mx-auto">
+      <h1
+        className={clsx(
+          'text-5xl font-bold text-center font-Barlow',
+          'mt-8 mb-20 text-gray-800 dark:text-gray-200'
+        )}
+      >
+        Blog posts
+      </h1>
+
+      <div className="px-4 lg:px-0">{children}</div>
+    </main>
+  );
+}
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
new file mode 100644
index 0000000..559ac03
--- /dev/null
+++ b/app/blog/page.tsx
@@ -0,0 +1,33 @@
+import PostCard from 'components/post-card';
+import PostCardLoading from 'components/rua/loading/post-card-loading';
+import { PostPerPage, postLists } from 'lib/posts';
+import { Fragment, Suspense } from 'react';
+import Pagination from 'components/rua/rua-pagination';
+
+export default async function Page() {
+  const posts = (await postLists()).slice(0, PostPerPage);
+  const next = 2;
+  const total = Math.ceil(posts.length / PostPerPage);
+
+  return (
+    <>
+      {posts.map((post) => (
+        <Fragment key={post.slug}>
+          <Suspense fallback={<PostCardLoading />}>
+            <PostCard post={post} />
+          </Suspense>
+        </Fragment>
+      ))}
+
+      <Pagination
+        className="py-6 mt-4 px-7 lg:px-5"
+        hasPrev={false}
+        hasNext={next <= total}
+        prevLink={''}
+        nextLink={`/blog/${next}`}
+        current={1}
+        total={total}
+      />
+    </>
+  );
+}