diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index b36cdc8..bc91838 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -52,14 +52,14 @@ const HeadBar: FC = () => {
           className={cn(
             'text-lg md:block',
             'bg-white rounded-md',
+            'dark:bg-rua-gray-800',
             'absolute md:static',
             'p-5 right-6 top-14',
             'md:bg-transparent md:p-[unset]',
             'md:right-[unset] md:top-[unset]',
             'w-1/3 md:w-auto',
-            {
-              hidden: !showMenu,
-            }
+            'md:dark:bg-transparent',
+            showMenu || 'hidden'
           )}
         >
           <ul className={cn('flex flex-col', 'md:flex-row')}>
diff --git a/lib/utils/constant.ts b/lib/utils/constant.ts
new file mode 100644
index 0000000..24a477c
--- /dev/null
+++ b/lib/utils/constant.ts
@@ -0,0 +1,4 @@
+export const server =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:3000'
+    : 'https://rua.plus';
diff --git a/lib/utils/index.ts b/lib/utils/index.ts
new file mode 100644
index 0000000..f6e8430
--- /dev/null
+++ b/lib/utils/index.ts
@@ -0,0 +1,12 @@
+export const sortByDate = (
+  { date: a }: { date: string },
+  { date: b }: { date: string }
+) => {
+  if (a < b) {
+    return 1;
+  } else if (a > b) {
+    return -1;
+  } else {
+    return 0;
+  }
+};
diff --git a/package.json b/package.json
index 83a6ffc..23fb904 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "autoprefixer": "^10.4.4",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
+    "gray-matter": "^4.0.3",
     "jest": "^27.5.1",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.23",
diff --git a/pages/api/posts.ts b/pages/api/posts.ts
new file mode 100644
index 0000000..3244c08
--- /dev/null
+++ b/pages/api/posts.ts
@@ -0,0 +1,38 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { MyMatters, Post } from 'types';
+import { sortByDate } from 'lib/utils';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Post[]>
+) {
+  const getPosts = () => {
+    const files = fs.readdirSync(path.join('pages/p'));
+    const posts = files
+      .map((filename) => {
+        const markdownWithMeta = fs.readFileSync(
+          path.join('pages/p', filename),
+          'utf-8'
+        );
+        const slug = filename.replace(/\.mdx$/, '');
+        const { data: meta } = matter(markdownWithMeta);
+        return {
+          slug,
+          ...({ ...meta } as MyMatters),
+        };
+      })
+      .sort(sortByDate);
+
+    res.status(200).json(posts);
+  };
+
+  switch (req.method) {
+    case 'GET':
+      return getPosts();
+    default:
+      return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/blog.tsx b/pages/blog.tsx
index 3c695f0..df5dd69 100644
--- a/pages/blog.tsx
+++ b/pages/blog.tsx
@@ -1,7 +1,40 @@
-import { FC } from 'react';
+import MainLayout from 'layouts/MainLayout';
+import { Post } from 'types';
+import { InferGetStaticPropsType } from 'next';
+import { ReactElement } from 'react';
+import { server } from 'lib/utils/constant';
 
-const Blog: FC = () => {
-  return <></>;
+const Blog = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <>
+      <main className="max-w-3xl mx-auto">
+        <h1 className="text-5xl font-semibold text-center font-Barlow">
+          Blog posts
+        </h1>
+
+        <div>
+          {posts.map((post) => (
+            <article key={post.slug}>{post.title}</article>
+          ))}
+        </div>
+      </main>
+    </>
+  );
+};
+
+export const getStaticProps = async () => {
+  const response = await fetch(`${server}/api/posts`);
+  const posts = (await response.json()) as Post[];
+
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+Blog.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
 };
 
 export default Blog;
diff --git a/pages/p/first-post.mdx b/pages/p/first-post.mdx
index 7c21c11..fbf5b80 100644
--- a/pages/p/first-post.mdx
+++ b/pages/p/first-post.mdx
@@ -1,3 +1,9 @@
+---
+title: First post test
+date: '2022-03-22'
+tags: ['functions', 'javascript']
+---
+
 ## Hello
 
 This is my first post.
diff --git a/types/index.ts b/types/index.ts
index 4b39aa3..97f7bac 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -9,3 +9,13 @@ export type NextPageWithLayout = {
 export type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
+
+export interface MyMatters {
+  title: string;
+  date: string;
+  tags: string;
+}
+
+export interface Post extends MyMatters {
+  slug: string;
+}
diff --git a/yarn.lock b/yarn.lock
index 0aaf0d9..6294949 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2083,6 +2083,13 @@ expect@^27.5.1:
     jest-matcher-utils "^27.5.1"
     jest-message-util "^27.5.1"
 
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+  dependencies:
+    is-extendable "^0.1.0"
+
 extend@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2308,6 +2315,16 @@ graceful-fs@^4.2.9:
   resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
+gray-matter@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+  dependencies:
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -2535,6 +2552,11 @@ is-decimal@^2.0.0:
   resolved "https://registry.npmmirror.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
   integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
 
+is-extendable@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.npmmirror.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3185,6 +3207,11 @@ json5@^2.1.2:
     array-includes "^3.1.3"
     object.assign "^4.1.2"
 
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.3"
+  resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
+  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmmirror.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -4383,6 +4410,14 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
 semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -4546,6 +4581,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"