diff --git a/homepage/src/lib/fetchCards.js b/homepage/src/lib/fetchCards.js
index aa44a7f8..d101ea94 100644
--- a/homepage/src/lib/fetchCards.js
+++ b/homepage/src/lib/fetchCards.js
@@ -2,9 +2,6 @@ import fs from 'fs';
 import { join } from 'path';
 import matter from 'gray-matter';
 
-import { remark } from 'remark';
-import html from 'remark-html';
-
 const cardsDirectory = join(process.cwd(), '_cards');
 
 /**
@@ -16,24 +13,18 @@ function getCardDirectoryPath(lang) {
   return join(cardsDirectory, lang);
 }
 
-export async function fetchCards(lang) {
+export function fetchCards(lang) {
   const cardsDirectory = getCardDirectoryPath(lang);
   const filesInCards = fs.readdirSync(cardsDirectory);
 
-  const cards = filesInCards.map(async (filename) => {
+  const cards = filesInCards.map((filename) => {
     const fullPath = join(cardsDirectory, filename);
     const file = fs.readFileSync(fullPath, 'utf8');
     const matterFile = matter(file);
     const { data, content } = matterFile;
 
-    const processedContent = await remark().use(html).process(content);
-    const contentHtml = processedContent.toString();
-
-    return {
-      frontMatter: data,
-      content: contentHtml,
-    };
+    return { data, content };
   });
 
-  return Promise.all(cards);
+  return cards;
 }
diff --git a/homepage/src/lib/markdownToHtml.js b/homepage/src/lib/markdownToHtml.js
new file mode 100644
index 00000000..5139f40d
--- /dev/null
+++ b/homepage/src/lib/markdownToHtml.js
@@ -0,0 +1,7 @@
+import { remark } from 'remark';
+import html from 'remark-html';
+
+export async function markdownToHtml(markdown) {
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
+}
diff --git a/homepage/src/pages/cards.jsx b/homepage/src/pages/cards.jsx
index ecef2766..a76ca28b 100644
--- a/homepage/src/pages/cards.jsx
+++ b/homepage/src/pages/cards.jsx
@@ -2,7 +2,6 @@ import Head from 'next/head';
 import Headline from '../components/headline';
 import CardsGrid from '../components/cardsGrid';
 import contentMapper from '../layouts/contentMapper';
-
 import { fetchPage } from '../lib/fetchPage';
 import { fetchCards } from '../lib/fetchCards';
 import { getNavigationList } from '../lib/getNavigationList';
@@ -12,29 +11,29 @@ import { getNavigationList } from '../lib/getNavigationList';
  * @type {import('next').GetStaticProps}
  */
 export const getStaticProps = async ({ locale }) => {
-  const cards = await fetchCards(locale);
-
-  // Get correct image path
-  const updatedCards = cards.map((card) => {
-    const updatedImage = card.frontMatter.image
-      ? card.frontMatter.image.replace('/homepage/public', '')
-      : '/images/uploads/初階專案卡封面-01.png';
+  const rawCards = fetchCards(locale);
+  const cardTasks = rawCards.map(async ({ data, content }) => {
+    let image = data.image;
+    const defaultImage = '/images/uploads/初階專案卡封面-01.png';
+    image = image ? image.replace('/homepage/public', '') : defaultImage;
 
     // Workaround for image prefix path. Will be removed after image path is fixed in all cards.
-    const image = !updatedImage.startsWith('/')
-      ? `/${updatedImage}`
-      : updatedImage;
+    image = !image.startsWith('/') ? `/${image}` : image;
+
+    data.image = image;
+
+    const { markdownToHtml } = await import('../lib/markdownToHtml');
+    const processedContent = await markdownToHtml(content);
 
     return {
-      ...card,
-      frontMatter: {
-        ...card.frontMatter,
-        image,
-      },
+      frontMatter: data,
+      content: processedContent,
     };
   });
+  const cards = await Promise.all(cardTasks);
 
   const navigationList = await getNavigationList(locale);
+
   const page = fetchPage(locale, 'cards');
 
   const title = {
@@ -81,7 +80,7 @@ export const getStaticProps = async ({ locale }) => {
 
   return {
     props: {
-      cards: updatedCards,
+      cards,
       navigationList,
       headInfo: {
         title: headInfo.title[locale],