diff --git a/homepage/public/css/style.css b/homepage/public/css/style.css
index a30a6ac3..1648ee5a 100644
--- a/homepage/public/css/style.css
+++ b/homepage/public/css/style.css
@@ -180,9 +180,6 @@ body {
 .section-main p {
   font-size: 16px;
 }
-.section-main .flex-col p {
-  font-size: 14px;
-}
 .section:nth-child(even) .section-main {
   background: #fafafe;
 }
diff --git a/homepage/src/lib/getNavigationList.js b/homepage/src/lib/getNavigationList.js
new file mode 100644
index 00000000..ec67ce8b
--- /dev/null
+++ b/homepage/src/lib/getNavigationList.js
@@ -0,0 +1,48 @@
+import fs from 'fs';
+import { join } from 'path';
+import matter from 'gray-matter';
+
+const pagesDirectory = join(process.cwd(), '_pages');
+
+function getPagesDirectoryPath(lang) {
+  return join(pagesDirectory, lang);
+}
+
+export async function getPagesList(lang) {
+  const pagesDirectory = getPagesDirectoryPath(lang);
+  const filesInPages = fs.readdirSync(pagesDirectory);
+
+  const pagesList = filesInPages.map(async (filename) => {
+    const fullPath = join(pagesDirectory, filename);
+    const file = fs.readFileSync(fullPath, 'utf8');
+    const matterFile = matter(file);
+    const { data, content } = matterFile;
+
+    return {
+      path: data.unique_slug,
+      name: data.name,
+    };
+  });
+
+  return Promise.all(pagesList);
+}
+
+export async function getNavigationList(lang) {
+  const pagesList = await getPagesList(lang);
+  const cardsPage = {
+    en: 'Cards',
+    'zh-tw': '卡片頁',
+  };
+
+  // * dynamic page navigation
+  const navigationList = pagesList
+    .filter((page) => page.path && page.name)
+    .map((page) => {
+      page.path = page.path.replace('index', '');
+      return { link: `/${page.path}`, text: page.name };
+    });
+  // add hard coded cards page
+  navigationList.push({ link: `/cards`, text: cardsPage[lang] });
+
+  return navigationList;
+}
diff --git a/homepage/src/pages/activities.jsx b/homepage/src/pages/activities.jsx
index ed453fb8..7e02ede9 100644
--- a/homepage/src/pages/activities.jsx
+++ b/homepage/src/pages/activities.jsx
@@ -8,10 +8,10 @@ import Head from 'next/head';
  * @type {import('next').GetStaticProps}
  */
 export const getStaticProps = async ({ locale }) => {
-  const backToTop = {
-    en: 'Back to top',
-    'zh-tw': '回到頁首',
-  };
+  // const backToTop = {
+  //   en: 'Back to top',
+  //   'zh-tw': '回到頁首',
+  // };
 
   const aboutOpenSourceNav = {
     en: 'About Open Source',
@@ -44,11 +44,11 @@ export const getStaticProps = async ({ locale }) => {
   };
 
   const navigationList = [
-    { link: `#page-top`, text: backToTop[locale] },
-    { link: `#about-open-source`, text: aboutOpenSourceNav[locale] },
-    { link: `#our-beliefs`, text: ourBeliefsNav[locale] },
-    { link: `#details`, text: detailsNav[locale] },
-    { link: `#instructors`, text: instructorsNav[locale] },
+    // { link: `#page-top`, text: backToTop[locale] },
+    // { link: `#about-open-source`, text: aboutOpenSourceNav[locale] },
+    // { link: `#our-beliefs`, text: ourBeliefsNav[locale] },
+    // { link: `#details`, text: detailsNav[locale] },
+    // { link: `#instructors`, text: instructorsNav[locale] },
     { link: `/cards`, text: cardsPage[locale] },
     { link: `/`, text: homepage[locale] },
   ];
diff --git a/homepage/src/pages/cards.jsx b/homepage/src/pages/cards.jsx
index 0860fd72..04dc9aff 100644
--- a/homepage/src/pages/cards.jsx
+++ b/homepage/src/pages/cards.jsx
@@ -3,6 +3,7 @@ import Headline from '../components/headline';
 import CardsGrid from '../components/cardsGrid';
 
 import { fetchCards } from '../lib/fetchCards';
+import { getNavigationList } from '../lib/getNavigationList';
 
 /**
  *
@@ -31,16 +32,13 @@ export const getStaticProps = async ({ locale }) => {
     };
   });
 
+  const navigationList = await getNavigationList(locale);
+
   const title = {
     en: 'Card Introduction',
     'zh-tw': '卡片介紹',
   };
 
-  const backToTop = {
-    en: 'Back to top',
-    'zh-tw': '回到頁首',
-  };
-
   const projectCardTitle = {
     en: 'Project Card',
     'zh-tw': '專案卡',
@@ -56,16 +54,6 @@ export const getStaticProps = async ({ locale }) => {
     'zh-tw': '事件卡',
   };
 
-  const activitiesPage = {
-    en: 'Activities',
-    'zh-tw': '活動頁',
-  };
-
-  const homepage = {
-    en: 'Home',
-    'zh-tw': '首頁',
-  };
-
   const projectCardSubtitle = {
     'open gov': {
       en: 'Open Government',
@@ -81,15 +69,6 @@ export const getStaticProps = async ({ locale }) => {
     },
   };
 
-  const navigationList = [
-    { link: `#page-top`, text: backToTop[locale] },
-    { link: `#project-cards`, text: projectCardTitle[locale] },
-    { link: `#job-cards`, text: jobCardTitle[locale] },
-    { link: `#event-cards`, text: eventCardTitle[locale] },
-    { link: `/activities`, text: activitiesPage[locale] },
-    { link: `/`, text: homepage[locale] },
-  ];
-
   const headInfo = {
     title: {
       en: `OpenStarTerVillage - Card Introduction`,
diff --git a/homepage/src/pages/index.jsx b/homepage/src/pages/index.jsx
index 421b7580..1016f00d 100644
--- a/homepage/src/pages/index.jsx
+++ b/homepage/src/pages/index.jsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Script from 'next/script';
 import { fetchPage } from '../lib/fetchPage';
+import { getNavigationList } from '../lib/getNavigationList';
 import contentMapper from '../layouts/contentMapper';
 
 /**
@@ -8,38 +9,7 @@ import contentMapper from '../layouts/contentMapper';
  * @type {import('next').GetStaticProps}
  */
 export const getStaticProps = async ({ locale }) => {
-  // const backToTop = {
-  //   en: 'Back to top',
-  //   'zh-tw': '回到頁首',
-  // };
-
-  // const projectIntroNav = {
-  //   en: 'Project Intro',
-  //   'zh-tw': '專案介紹',
-  // };
-
-  // const gameIntroNav = {
-  //   en: 'Game Intro',
-  //   'zh-tw': '遊戲介紹',
-  // };
-
-  const cardsPage = {
-    en: 'Cards',
-    'zh-tw': '卡片頁',
-  };
-
-  const activitiesPage = {
-    en: 'Activities',
-    'zh-tw': '活動頁',
-  };
-
-  const navigationList = [
-    // { link: `#page-top`, text: backToTop[locale] },
-    // { link: `#project-intro`, text: projectIntroNav[locale] },
-    // { link: `#game-intro`, text: gameIntroNav[locale] },
-    { link: `/cards`, text: cardsPage[locale] },
-    { link: `/activities`, text: activitiesPage[locale] },
-  ];
+  const navigationList = await getNavigationList(locale);
 
   const headInfo = {
     title: {
diff --git a/homepage/src/pages/resource.jsx b/homepage/src/pages/resource.jsx
index bda4defd..24dbeee8 100644
--- a/homepage/src/pages/resource.jsx
+++ b/homepage/src/pages/resource.jsx
@@ -1,5 +1,6 @@
 import contentMapper from '../layouts/contentMapper';
 import { fetchPage } from '../lib/fetchPage';
+import { getNavigationList } from '../lib/getNavigationList';
 
 /**
  *
@@ -7,38 +8,7 @@ import { fetchPage } from '../lib/fetchPage';
  */
 export const getStaticProps = async ({ locale }) => {
   const page = fetchPage(locale, 'resource');
-
-  const homepage = {
-    en: 'Home',
-    'zh-tw': '首頁',
-  };
-
-  const cardsPage = {
-    en: 'Cards',
-    'zh-tw': '卡片頁',
-  };
-
-  const activitiesPage = {
-    en: 'Activities',
-    'zh-tw': '活動頁',
-  };
-
-  // site page navigation
-  const navigationList = [
-    { link: `/cards`, text: cardsPage[locale] },
-    { link: `/activities`, text: activitiesPage[locale] },
-    { link: `/`, text: homepage[locale] },
-  ];
-
-  /*
-  // content navigation
-  const navigationList = page.data['layout_list']?.map((layout) => {
-    return {
-      text: layout?.title,
-      link: `#${layout?.title}`,
-    };
-  });
-   */
+  const navigationList = await getNavigationList(locale);
 
   return {
     props: {