diff --git a/src/app/article/page.tsx b/src/app/article/page.tsx
new file mode 100644
index 0000000..6e6e0f9
--- /dev/null
+++ b/src/app/article/page.tsx
@@ -0,0 +1,58 @@
+/**
+ * 文章页面
+ */
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+
+import Image from 'next/image';
+
+// 获取文章信息
+async function getArticleInfo(journalId: string) {
+  // const res = await fetch(`http://api.indie.cn:9012/luoo-music/article/${journalId}`); TODO:
+  const res = await fetch(`http://39.103.180.196:9012/luoo-music/article/${journalId}`);
+  return res.json();
+}
+
+export default function Article() {
+  const [articleInfo, setArticleInfo] = useState<any>({});
+
+  useEffect(() => {
+    const { searchParams } = new URL(window.location.href);
+    getArticleInfo((searchParams as any)?.get('id')).then((res) => {
+      setArticleInfo(res?.data || {});
+    });
+  }, []);
+
+  const displayDate = useMemo(() => {
+    if (!articleInfo?.date) return '';
+    const date = new Date(articleInfo?.date);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}.${month}.${day}`;
+  }, [articleInfo?.date]);
+
+  return (
+    <main className="max-w-screen-sm min-h-screen mx-auto flex flex-col items-center text-[#000000f2] font-normal bg-white px-[18px] pt-[14px] pb-[36px]">
+      <h1 className="font-600 text-[22px] leading-[30.8px]">{articleInfo?.title}</h1>
+      {(articleInfo?.userName || displayDate) && (
+        <p className="w-full flex items-center text-[12px] text-[#000000b2] leading-[16.8px] mt-[9px]">
+          <span>{articleInfo?.userName}</span>
+          <span className="ml-[15px]">{displayDate}</span>
+        </p>
+      )}
+      {articleInfo?.image && (
+        <div className="relative w-[100%] aspect-square mt-[18px]">
+          <Image className="rounded-[6px] object-cover" unoptimized fill src={articleInfo?.image} alt="cover" />
+        </div>
+      )}
+      {articleInfo?.content && (
+        <p
+          className="mt-[12px] text-[14px] leading-[26px]"
+          dangerouslySetInnerHTML={{ __html: articleInfo?.content }}
+        />
+      )}
+    </main>
+  );
+}