diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index cae3c2ce..bee2a04a 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -4,14 +4,17 @@ import PageHeader from "@/components/page-header";
 import FilterSelectBox from "@/components/blog/filter-select-box";
 import FilterList from "@/components/blog/filter-list";
 import MarkdownRenderer from "@/components/markdown/markdown-renderer";
-import { getBlogPosts } from "@/lib/db/blog";
 import SkeletonBlogLoader from "@/components/skeleton-loader";
+import { getBlogPosts } from "@/lib/db/blog";
 import { POSTS_PER_PAGE } from "@/lib/constants";
+import config from "@/config";
+
+const { title } = config;
 
 import "react-loading-skeleton/dist/skeleton.css";
 
 export const metadata = {
-  title: "Blog | Chun-Ho (Hugo) Lin - 1chooo | Open Source Enthusiast",
+  title: `Blog | ${title}`,
   description: "Read my thoughts on software development, design, and more.",
 };
 
@@ -115,9 +118,8 @@ export default function BlogPage({
                   pathname: "/blog",
                   query: { ...searchParams, page: pageNum.toString() },
                 }}
-                className={`pagination-btn ${
-                  pageNum === currentPage ? "active" : ""
-                }`}
+                className={`pagination-btn ${pageNum === currentPage ? "active" : ""
+                  }`}
               >
                 {pageNum}
               </Link>
diff --git a/apps/web/src/app/contact/page.tsx b/apps/web/src/app/contact/page.tsx
index 7c064f01..77d4b5c3 100644
--- a/apps/web/src/app/contact/page.tsx
+++ b/apps/web/src/app/contact/page.tsx
@@ -1,25 +1,28 @@
-'use client';
+"use client";
 
-import React from "react";
-import { usePathname } from 'next/navigation';
+import React, { useEffect } from 'react';
 import MapBox from '@/components/contact/map-box';
 import { FaRegPaperPlane } from "react-icons/fa";
-import PageContent from "@/components/page-content";
+import PageHeader from '@/components/page-header';
 import config from '@/config';
 
 const { title } = config;
 
+/**
+ * TODO: #341 still need to update with another method to avoid client side not available metadata
+ * export const metadata: Metadata = {
+ *   title: `Contact | ${title}`,
+ * };
+ */
+
 const Contact = () => {
-  const pathname = usePathname();
+  useEffect(() => {
+    document.title = `Contact | ${title}`;
+  }, [title]);
 
   return (
-    <PageContent
-      documentTitle='Contact'
-      title={title}
-      header="Hugo's Contact"
-      page="contact"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header="Hugo's Contact" />
       <section className="contact-form">
         <MapBox />
         <h3 className="h3 form-title">Contact Form</h3>
@@ -60,7 +63,7 @@ const Contact = () => {
           </button>
         </form>
       </section>
-    </PageContent >
+    </article >
   );
 }
 
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index b13e5041..1ccd96c9 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,11 +1,9 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
+import type { Metadata } from "next";
 import AboutText from '@/components/about/about-text';
 import GitHubStats from '@/components/about/github-stats';
 import TechStack from '@/components/about/tech-stack';
 import LifeStyles from '@/components/about/life-styles';
-import PageContent from '@/components/page-content';
+import PageHeader from '@/components/page-header';
 import H4 from '@/components/markdown/h4';
 import config from '@/config';
 
@@ -15,22 +13,19 @@ const { firstName, lastName } = about;
 const { preferredName } = about;
 const { title } = config;
 
+export const metadata: Metadata = {
+  title: title,
+};
+
 const header =
   preferredName === ''
     ? `About ${firstName} ${lastName} 👨🏻‍💻`
     : `About ${preferredName} 👨🏻‍💻`;
 
 const About = () => {
-  const pathname = usePathname();
-
   return (
-    <PageContent
-      documentTitle=''
-      title={title}
-      header={header}
-      page="about"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header={header} />
       {/* TODO: #157 */}
       <H4 text={`${subHeader} (${pronouns})`} />
       <br />
@@ -38,7 +33,7 @@ const About = () => {
       <GitHubStats />
       <TechStack />
       <LifeStyles />
-    </PageContent >
+    </article>
   );
 }
 
diff --git a/apps/web/src/app/portfolio/page.tsx b/apps/web/src/app/portfolio/page.tsx
index 08993ea4..0e208f40 100644
--- a/apps/web/src/app/portfolio/page.tsx
+++ b/apps/web/src/app/portfolio/page.tsx
@@ -9,6 +9,14 @@ import config from '@/config';
 
 const { title } = config;
 
+/**
+ * TODO: #257
+ * update the document title see (#341)
+ * export const metadata: Metadata = {
+ *   title: `Contact | ${title}`,
+ * };
+ */
+
 const Portfolio = () => {
   const pathname = usePathname();
 
@@ -17,6 +25,10 @@ const Portfolio = () => {
   }, []);
 
   return (
+    /**
+     * TODO: #257
+     * update the document title see (#341)
+     */
     <PageContent
       documentTitle='Portfolio'
       title={title}
diff --git a/apps/web/src/app/resume/page.tsx b/apps/web/src/app/resume/page.tsx
index dad64dd5..06051c4c 100644
--- a/apps/web/src/app/resume/page.tsx
+++ b/apps/web/src/app/resume/page.tsx
@@ -1,11 +1,8 @@
-'use client';
-
+import type { Metadata } from "next";
 import React from "react";
-import { usePathname } from 'next/navigation';
 import DownloadCV from '@/components/resume/download-cv';
 import TimeLine from '@/components/resume/timeline';
-import PageContent from '@/components/page-content';
-
+import PageHeader from '@/components/page-header';
 import config from '@/config';
 
 const { title } = config;
@@ -16,28 +13,26 @@ const { educations } = resume;
 const { awardLeaderships } = resume;
 const { teachingExperiences } = resume;
 
+export const metadata: Metadata = {
+  title: `Resume | ${title}`,
+};
+
 const profExp = <TimeLine data={professionalExperiences} />;
 const education = <TimeLine data={educations} />;
 const awardLeadership = <TimeLine data={awardLeaderships} />;
 const teachingExp = <TimeLine data={teachingExperiences} />;
 
 const Resume = () => {
-  const pathname = usePathname();
 
   return (
-    <PageContent
-      documentTitle='Resume'
-      title={title}
-      header="Hugo's Resume"
-      page="resume"
-      pathName={pathname}
-    >
+    <article data-page=''>
+      <PageHeader header="Hugo's Resume" />
       <DownloadCV />
       {profExp}
       {education}
       {awardLeadership}
       {teachingExp}
-    </PageContent >
+    </article >
   );
 }
 
diff --git a/apps/web/src/components/about/github-stats.tsx b/apps/web/src/components/about/github-stats.tsx
index 8915e39f..09ed608d 100644
--- a/apps/web/src/components/about/github-stats.tsx
+++ b/apps/web/src/components/about/github-stats.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState, FC } from 'react';
 import GitHubCalendar from 'react-github-calendar';
 import { ThemeInput } from 'react-activity-calendar';