diff --git a/homepage/src/lib/fetchPage.js b/homepage/src/lib/fetchPage.js
index 2a4f48f8..28697f63 100644
--- a/homepage/src/lib/fetchPage.js
+++ b/homepage/src/lib/fetchPage.js
@@ -1,7 +1,6 @@
 import fs from 'fs';
 import { join } from 'path';
 import matter from 'gray-matter';
-import { componentMapper } from './componentMapper';
 
 const pagesDirectory = join(process.cwd(), '_pages');
 
@@ -16,10 +15,8 @@ export function fetchPage(lang, page) {
     const fileContent = fs.readFileSync(filePath, 'utf8');
     const { data } = matter(fileContent);
 
-    const contentList = data['layout_list']?.map(componentMapper);
-
     return {
-      contentList,
+      data,
     };
   } catch (error) {
     console.log(error);
diff --git a/homepage/src/pages/cards.jsx b/homepage/src/pages/cards.jsx
index a76ca28b..06a79d9d 100644
--- a/homepage/src/pages/cards.jsx
+++ b/homepage/src/pages/cards.jsx
@@ -5,6 +5,7 @@ import contentMapper from '../layouts/contentMapper';
 import { fetchPage } from '../lib/fetchPage';
 import { fetchCards } from '../lib/fetchCards';
 import { getNavigationList } from '../lib/getNavigationList';
+import { componentMapper } from '../lib/componentMapper';
 
 /**
  *
@@ -36,6 +37,10 @@ export const getStaticProps = async ({ locale }) => {
 
   const page = fetchPage(locale, 'cards');
 
+  const contentList = page.data['layout_list']?.map((layout) =>
+    componentMapper(layout, rawCards),
+  );
+
   const title = {
     en: 'Card Introduction',
     'zh-tw': '卡片介紹',
@@ -94,7 +99,9 @@ export const getStaticProps = async ({ locale }) => {
         'open data': projectCardSubtitle['open data'][locale],
         'open source': projectCardSubtitle['open source'][locale],
       },
-      page,
+      page: {
+        contentList,
+      },
     },
   };
 };
diff --git a/homepage/src/pages/index.jsx b/homepage/src/pages/index.jsx
index 9c6529a5..21077df4 100644
--- a/homepage/src/pages/index.jsx
+++ b/homepage/src/pages/index.jsx
@@ -3,6 +3,7 @@ import Script from 'next/script';
 import { fetchPage } from '../lib/fetchPage';
 import { getNavigationList } from '../lib/getNavigationList';
 import contentMapper from '../layouts/contentMapper';
+import { componentMapper } from '../lib/componentMapper';
 
 /**
  *
@@ -23,6 +24,7 @@ export const getStaticProps = async ({ locale }) => {
   };
 
   const page = fetchPage(locale, 'index');
+  const contentList = page.data['layout_list']?.map(componentMapper);
 
   return {
     props: {
@@ -31,7 +33,9 @@ export const getStaticProps = async ({ locale }) => {
         title: headInfo.title[locale],
         description: headInfo.description[locale],
       },
-      page,
+      page: {
+        contentList,
+      },
     },
   };
 };
diff --git a/homepage/src/pages/resource.jsx b/homepage/src/pages/resource.jsx
index 806e2ae5..9b90fa0a 100644
--- a/homepage/src/pages/resource.jsx
+++ b/homepage/src/pages/resource.jsx
@@ -1,4 +1,5 @@
 import contentMapper from '../layouts/contentMapper';
+import { componentMapper } from '../lib/componentMapper';
 import { fetchPage } from '../lib/fetchPage';
 import { getNavigationList } from '../lib/getNavigationList';
 
@@ -8,11 +9,14 @@ import { getNavigationList } from '../lib/getNavigationList';
  */
 export const getStaticProps = async ({ locale }) => {
   const page = fetchPage(locale, 'resource');
+  const contentList = page.data['layout_list']?.map(componentMapper);
   const navigationList = await getNavigationList(locale);
 
   return {
     props: {
-      page,
+      page: {
+        contentList,
+      },
       navigationList,
     },
   };