diff --git a/_components/header.tsx b/_components/header.tsx
new file mode 100644
index 0000000..93d38f8
--- /dev/null
+++ b/_components/header.tsx
@@ -0,0 +1,18 @@
+export interface Props {
+  heading: string;
+  subheading?: string;
+}
+
+export default function(props: Props) {
+  return (
+    <header className="page-header">
+      <h1>{ props.heading }</h1>
+      <div className="separator">
+        <span className="outer-outline"/>
+        <span className="icon">󱀝</span>
+        <span className="outer-outline"/>
+      </div>
+      <p className="subheading">{ props.subheading }</p>
+    </header>
+  )
+}
diff --git a/_includes/layouts/main.tsx b/_includes/layouts/main.tsx
index c4fa57a..b64c621 100644
--- a/_includes/layouts/main.tsx
+++ b/_includes/layouts/main.tsx
@@ -1,4 +1,4 @@
-export default function({ title, children, comp }) {
+export default function({ title, header, children, comp }) {
   return (
     <html>
       <head>
@@ -10,6 +10,7 @@ export default function({ title, children, comp }) {
       <body>
         {comp.navbar()}
         <div className="main-content">
+          { comp.header(header) }
           { children }
         </div>
       </body>
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 7f085f0..c326956 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -79,11 +79,31 @@ pre {
 }
 
 .page-header {
+  margin-bottom: 2rem;
+  text-align: center;
   h1 {
     background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+  .subheading {
+    font-style: italic;
+  }
+  .separator {
+    margin: 1rem 0;
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    .outer-outline {
+      width: 45%;
+      border: 1px solid var(--color-black);
+    }
+    .icon {
+      font-size: 2rem;
+      color: var(--color-black);
+    }
+  }
 }
 
 @for $i from 1 to 3 {
diff --git a/index.tsx b/index.tsx
index 6049de2..78d2bb0 100644
--- a/index.tsx
+++ b/index.tsx
@@ -1,3 +1,8 @@
+export const header = {
+  heading: "Hi! My name is Foster",
+  subheading: "Congratulations, stranger. You have found the personal website of Foster Hangdaan.",
+};
+
 const gpgFingerprint = `
 pub   ed25519/E48D7F49A852F112 2023-07-14 [SC]
       Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9  5BAE E48D 7F49 A852 F112
@@ -7,16 +12,6 @@ uid                 Foster Hangdaan <foster@hangdaan.email>
 export default function() {
   return (
     <>
-      <header className="page-header">
-        <h1>Hi! My name is Foster</h1>
-      </header>
-      <hr/>
-      <section>
-        <p>
-          Congratulations, stranger.
-          You have found the personal website of Foster Hangdaan.
-        </p>
-      </section>
       <section>
         <h2 id="about"> About</h2>
         <p>I am a software developer, open-source enthusiast, lover of pizza, renegade of funk and many more.</p>
diff --git a/resume.tsx b/resume.tsx
index 7011db8..37453bb 100644
--- a/resume.tsx
+++ b/resume.tsx
@@ -1,12 +1,13 @@
 export const title = "Resume - Foster Hangdaan";
 
+export const header = {
+  heading: "Resume",
+  subheading: <>Download a copy of my resume <a href="">here</a>.</>,
+};
+
 export default function() {
   return (
     <>
-      <header className="page-header">
-        <h1>Resume</h1>
-      </header>
-      <hr/>
       <section>
         <h2>Experience</h2>
         <ul>
@@ -19,9 +20,6 @@ export default function() {
           <li>Placeholder</li>
         </ul>
       </section>
-      <section>
-        <p>Download a copy of my resume here.</p>
-      </section>
     </>
   );
 }
