diff --git a/components/header/index.js b/components/header/index.js
new file mode 100644
index 000000000..ea47a8af9
--- /dev/null
+++ b/components/header/index.js
@@ -0,0 +1,15 @@
+import Link from 'next/link';
+
+const Header = () => (
+  <div>
+    <Link href="/">
+      <a title="Homepage">Home</a>
+    </Link>
+    &nbsp; |&nbsp;
+    <Link href="/about">
+      <a title="About Page">About Page</a>
+    </Link>
+  </div>
+);
+
+export default Header;
\ No newline at end of file
diff --git a/pages/about.js b/pages/about.js
index f0e28e649..33eb5033e 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import Link from 'next/link';
+import Header from '../components/header';
 
 export default function About() {
   return (
     <div>
+      <Header />
       <p>This is the about page</p>
     </div>
   );
diff --git a/pages/home.js b/pages/home.js
new file mode 100644
index 000000000..aaaaf8bd8
--- /dev/null
+++ b/pages/home.js
@@ -0,0 +1,10 @@
+import Header from '../components/header';
+
+export const Home = (props) => (
+  <div>
+    <Header />
+    <p>Hello Next.js</p>
+  </div>
+);
+
+export default Home;
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index eb1e997c1..04f76537f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import Link from 'next/link';
+import Home from './home';
 
 const Index = () => (
   <div>
-    <Link href="/about">
-      <a title="About Page">About Page</a>
-    </Link>
-    <p>Hello Next.js</p>
+    <Home />
   </div>
 );