diff --git a/apps/blog/src/app/category/[id]/CategoryViewModel.ts b/apps/blog/src/app/category/[id]/CategoryViewModel.ts
new file mode 100644
index 0000000..0d3b8ca
--- /dev/null
+++ b/apps/blog/src/app/category/[id]/CategoryViewModel.ts
@@ -0,0 +1,16 @@
+import {Article} from '@website/classes';
+
+import {Article as ArticleApi} from '@/src/apis';
+
+export class CategoryViewModel {
+  public static async getArticlesWithAbstractByCategory(
+    categoryId: number,
+  ): Promise<Article[]> {
+    const response = await ArticleApi.getByCategoryWithAbstract(categoryId);
+    if (response.isSuccessful) {
+      return response.data;
+    } else {
+      throw new Error(response.message);
+    }
+  }
+}
diff --git a/apps/blog/src/app/category/[id]/Container.tsx b/apps/blog/src/app/category/[id]/Container.tsx
index 43d0766..6ce828c 100644
--- a/apps/blog/src/app/category/[id]/Container.tsx
+++ b/apps/blog/src/app/category/[id]/Container.tsx
@@ -1,9 +1,8 @@
-'use client';
-
-import {useEffect} from 'react';
+import {notFound} from 'next/navigation';
 
 import {ArticleList} from '@/src/components/ArticleList';
-import {useArticlesWithAbstract} from '@/src/hooks/useArticlesWithAbstract';
+
+import {CategoryViewModel} from './CategoryViewModel';
 
 interface CategoryProps {
   params: CategoryDynamicParams;
@@ -13,17 +12,19 @@ interface CategoryDynamicParams {
   id: string;
 }
 
-export function Category({params}: CategoryProps) {
+export async function Category({params}: CategoryProps) {
   const {id} = params;
-  const categoryId = Number.parseInt(id ?? '');
-
-  useEffect(() => {
-    document.title = 'Soulike 的博客';
-  }, []);
-
-  const {loading, articlesWithAbstract} = useArticlesWithAbstract(categoryId);
-
-  return (
-    <ArticleList articleList={articlesWithAbstract ?? []} loading={loading} />
-  );
+  const categoryId = Number.parseInt(id);
+  if (Number.isNaN(categoryId)) {
+    notFound();
+  }
+
+  try {
+    const articlesWithAbstract =
+      await CategoryViewModel.getArticlesWithAbstractByCategory(categoryId);
+    return <ArticleList articleList={articlesWithAbstract} loading={false} />;
+  } catch (e) {
+    console.error(e);
+    notFound();
+  }
 }
diff --git a/apps/blog/src/app/category/[id]/page.tsx b/apps/blog/src/app/category/[id]/page.tsx
index dc43a3a..79b0f31 100644
--- a/apps/blog/src/app/category/[id]/page.tsx
+++ b/apps/blog/src/app/category/[id]/page.tsx
@@ -1 +1,7 @@
+import type {Metadata} from 'next';
+
 export {Category as default} from './Container';
+
+export const metadata: Metadata = {
+  title: 'Soulike 的博客',
+};