diff --git a/app/(pages)/blogs/[slug]/page.tsx b/app/(pages)/blogs/[slug]/page.tsx
index c12ceb7..84c20eb 100644
--- a/app/(pages)/blogs/[slug]/page.tsx
+++ b/app/(pages)/blogs/[slug]/page.tsx
@@ -15,10 +15,10 @@ export default async function Page({ params }: Props) {
     return (
         <>
             <div className="mb-6 rounded-lg border border-gray-300 p-2 shadow-md">
-                <h2 className="border-b-4 border-indigo-600 bg-indigo-600/20 p-1 text-2xl font-bold">
+                <h2 className="p-1 text-center text-2xl font-bold tracking-wider">
                     {metadata.title}
                 </h2>
-                <div className="mt-3 flex items-center space-x-2">
+                <div className="mt-4 flex items-center justify-center space-x-2">
                     <Timer />
                     <p>作成日時：{metadata.datetime}</p>
                 </div>
diff --git a/app/(pages)/blogs/page.tsx b/app/(pages)/blogs/page.tsx
new file mode 100644
index 0000000..7373598
--- /dev/null
+++ b/app/(pages)/blogs/page.tsx
@@ -0,0 +1,42 @@
+import fs from "fs/promises";
+import { NextPage } from "next";
+
+const Page: NextPage = async () => {
+    const blogs = (await fs.readdir("blogs"))
+        .filter((name) => name.endsWith(".mdx"))
+        .map(async (name) => ({
+            slug: name.replace(/\.mdx$/, ""),
+            metadata: (await import(`@/blogs/${name}`)).metadata,
+        }));
+    const blogList = await Promise.all(blogs);
+    blogList.sort((a, b) => {
+        const dateA = new Date(a.metadata.datetime);
+        const dateB = new Date(b.metadata.datetime);
+        return dateB.getTime() - dateA.getTime();
+    });
+    return (
+        <div>
+            <h1 className="text-center text-2xl font-bold">ブログ一覧</h1>
+            <ul className="mt-6 grid grid-cols-2 gap-4">
+                {blogList.map((blog) => (
+                    <li
+                        key={blog.slug}
+                        className="rounded-md bg-gray-100 p-2 shadow-md"
+                    >
+                        <a
+                            href={`/blogs/${blog.slug}`}
+                            className="text-xl text-blue-500 hover:underline"
+                        >
+                            {blog.metadata.title}
+                        </a>
+                        <p className="text-gray-500">
+                            作成日時：{blog.metadata.datetime}
+                        </p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Page;
diff --git a/app/layout.tsx b/app/layout.tsx
index 8d925f0..b09848c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Noto_Sans_JP } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -12,6 +12,11 @@ const geistMono = Geist_Mono({
     subsets: ["latin"],
 });
 
+const notoSansJP = Noto_Sans_JP({
+    variable: "--font-noto-sans-jp",
+    subsets: ["latin"],
+});
+
 export const metadata: Metadata = {
     title: "tuna2134",
     description: "tuna2134 official website",
@@ -25,7 +30,7 @@ export default function RootLayout({
     return (
         <html lang="ja">
             <body
-                className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+                className={`${geistSans.variable} ${geistMono.variable} ${notoSansJP.variable} antialiased`}
             >
                 {children}
             </body>
diff --git a/blogs/hello.mdx b/blogs/hello.mdx
index 37e1af6..ba013c3 100644
--- a/blogs/hello.mdx
+++ b/blogs/hello.mdx
@@ -1,7 +1,11 @@
 export const metadata = {
     title: "書き直し",
     description: "久しぶりに書き直しました。",
-    datetime: "2025/05/03",
+    datetime: "2025/05/04",
 };
 
-# Hello
\ No newline at end of file
+# 久しぶりの書き直し
+久しぶりにウェブサイトを書き直しました。
+
+## 変更点
+- ブログの再開 - 結構どうでもいいことを記事にするつもりです。
\ No newline at end of file
