diff --git a/src/components/helper/head/Meta.astro b/src/components/helper/head/Meta.astro
new file mode 100644
index 0000000..771fcb4
--- /dev/null
+++ b/src/components/helper/head/Meta.astro
@@ -0,0 +1,21 @@
+---
+const { title, description, ogImage = "" } = Astro.props
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+---
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+{/* Open Graph / Facebook */}
+<meta name="og:title" content={title} />
+<meta name="og:description" content={description} />
+{ogImage && <meta name="og:image" content={ogImage} />}
+<meta property="og:locale" content="en_US"/>
+<meta property="og:type" content="website" />
+<meta property="og:url" content={canonicalURL} />
+{/* Twitter */}
+<meta name="twitter:card" content="summary"></meta>
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+{ogImage && <meta name="twitter:image" content={ogImage} />}
+
+
diff --git a/src/config.ts b/src/config.ts
index 81372d1..8239181 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,19 @@
 export const siteConfig = {
+    // site meta info
     title: '/var/log/mercury',
     description: 'A blog about software development, technology, and life.',
+    homepageOgImage: '',
+    // site components
+    navBarItems: [
+        // additional items in the navbar
+        // the order of the items will be the same as the order in the array
+        // format is { text: string, link: string }
+        { text: "RSS", link: "/rss.xml" },
+        { text: "GitHub", link: "https://github.com/GrassBlock1/mercury" },
+    ],
+    // footer
+    // yes you can write html safely here
+    customFooter: '<i>I have no mouth, and I must SCREAM</i>',
     comments: {
         type: 'fediverse', // 'artalk','giscus','fediverse','hatsu'
         artalk: {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8da33c4..cc88648 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,16 +4,21 @@ import Search from '../components/Search.astro';
 import ThemeSwitcher from '../components/ThemeSwitcher.astro';
 import BackToTop from "../components/BackToTop.astro";
 import { siteConfig } from "../config";
+import Meta from "../components/helper/head/Meta.astro";
 
 interface Props {
   title: string;
+  description: string;
   path?: string;
 }
 
 const defaultTitle = siteConfig.title
 const formattedPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
 
-const { title, path = formattedPath } = Astro.props;
+const navBarItems = siteConfig.navBarItems
+const customFooter = siteConfig.customFooter
+
+const { title, path = formattedPath, description = siteConfig.description } = Astro.props;
 // TODO: make the path dynamic
 ---
 
@@ -24,6 +29,7 @@ const { title, path = formattedPath } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
+    <Meta title={title} description={description}/>
     <title>{title}</title>
   </head>
   <body>
@@ -36,6 +42,7 @@ const { title, path = formattedPath } = Astro.props;
         <nav class="nav">
           <a href="/">Home</a>
           <a href="/blog">Blog</a>
+          {navBarItems.map((item) => <a href={item.link}>{item.text}</a>)}
         </nav>
 
         <Search />
@@ -52,7 +59,8 @@ const { title, path = formattedPath } = Astro.props;
         <ThemeSwitcher/>
       </div>
       <div class="container">
-        Powered by <a href="https://git.gb0.dev/gb/mercury"><img src="/mercury.svg" width="16px" alt="mercury logo" /> mercury</a>
+        <Fragment set:html={customFooter} />
+        <p>Powered by <a href="https://git.gb0.dev/gb/mercury"><img src="/mercury.svg" width="16px" alt="mercury logo" /> mercury</a></p>
       </div>
     </footer>
   </body>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index ced400d..b9deb1e 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -13,7 +13,7 @@ const { Content } = await entry.render();
 
 ---
 
-<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`}>
+<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`} description={entry.data.description} >
     <h1 class="post-title">{entry.data.title}</h1>
     <div class="post-content">
         <Content/>
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index aa8a993..7589b87 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -19,6 +19,7 @@ const slug = Astro.params.slug;
 <Layout
   title={entry.data.title}
   path={`~/grassblock/micr0blog/blog/${slug}`}
+  description={entry.data.description}
 >
       <h1 class="post-title">{entry.data.title}</h1>
       <span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
