diff --git a/post.config.js b/post.config.js
index cb7ce14..436a347 100644
--- a/post.config.js
+++ b/post.config.js
@@ -55,7 +55,9 @@ if (fs.existsSync(path.join(distDir, 'index.html'))) {
     const targetDir = path.join(distDir, post.year, post.month, post.day);
 
     if (!fs.existsSync(targetDir)) {
-      fs.mkdirSync(targetDir, { recursive: true });
+      fs.mkdirSync(targetDir, {
+        recursive: true
+      });
     }
 
     fs.copyFileSync(
@@ -68,6 +70,11 @@ if (fs.existsSync(path.join(distDir, 'index.html'))) {
     path.join(distDir, 'index.html'),
     path.join(distDir, '404.html')
   );
+
+  fs.copyFileSync(
+    path.join(distDir, 'index.html'),
+    path.join(distDir, 'about.html')
+  );
 }
 
 console.log(`✅ Build ${allPosts.length} Posts Successfully`);
diff --git a/public/about.md b/public/about.md
new file mode 100644
index 0000000..3478f6e
--- /dev/null
+++ b/public/about.md
@@ -0,0 +1,3 @@
+Hi, I'm Gapry. Nice to meet you! I love drinking coffee.
+
+![](/assets/pic.png)
\ No newline at end of file
diff --git a/public/assets/pic.png b/public/assets/pic.png
new file mode 100644
index 0000000..a02a731
Binary files /dev/null and b/public/assets/pic.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 1eaf77d..1ca31e8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import Analytics from './components/Analytics';
 import NotFound from './pages/NotFound/NotFound';
 import Home from './pages/Home/Home';
+import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import './styles/App.css';
 
@@ -32,6 +33,17 @@ export default function App() {
         const pathClean = currentPath.replace(/\.html$/, '');
         const parts     = pathClean.split('/').filter(Boolean);
 
+        if (parts.length === 1 && parts[0] === 'about') {
+          fetch('/about.md')
+            .then(res => res.text())
+            .then(text => {
+              setContent(text);
+              setStatus('post');
+            })
+            .catch(() => setStatus('404'));
+          return;
+        }
+
         if (parts.length === 0 || (parts.length === 1 && parts[0] === 'index')) {
           setStatus('home');
           return;
@@ -73,6 +85,7 @@ export default function App() {
     <>
       <Analytics />
       <div className="app-shell">
+        <Header />
         {status === '404' ? (
           <NotFound />
         ) : status === 'home' ? (
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 0000000..154673c
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,45 @@
+.site-header {
+  width: 100%;
+  border-bottom: 1px solid #333;
+  padding: 1.5rem 0;
+  margin-bottom: 2rem;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between; 
+  align-items: flex-end;
+  max-width: 800px; 
+  margin: 0;
+  padding: 0;
+}
+
+.logo {
+  font-size: 2.0rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: #fff;
+  line-height: 1;
+}
+
+.nav-menu {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-menu a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #aaa;
+  transition: color 0.2s;
+  line-height: 1;
+}
+
+.nav-menu a:hover {
+  color: #646cff;
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
new file mode 100644
index 0000000..b223cda
--- /dev/null
+++ b/src/components/Header/Header.jsx
@@ -0,0 +1,22 @@
+import siteConfig from '../../data/config.json';
+import './Header.css';
+
+export default function Header() {
+  return (
+    <header className="site-header">
+      <div className="header-container">
+        <div className="header-left">
+          <a href="/" className="logo">
+            {siteConfig.siteName}
+          </a>
+        </div>
+
+        <nav className="header-right">
+          <ul className="nav-menu">
+            <li><a href="/about">About Me</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/src/data/config.json b/src/data/config.json
index e6b9344..70c69c7 100644
--- a/src/data/config.json
+++ b/src/data/config.json
@@ -1,5 +1,5 @@
 {
-  "siteName": "Gapry's Technical Writing",
+  "siteName": "Gapry's Blog",
   "analytics": {
     "provider": "google-gtag",
     "trackingId": "G-4DG3HSBT1T",
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
index c298db0..7993bc5 100644
--- a/src/pages/Home/Home.css
+++ b/src/pages/Home/Home.css
@@ -5,7 +5,7 @@
 }
 
 .home-title {
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin-bottom: 30px;
   color: #ffffff; 
 }