diff --git a/src/handlers/about.tsx b/src/handlers/about.tsx
new file mode 100644
index 0000000..336bacb
--- /dev/null
+++ b/src/handlers/about.tsx
@@ -0,0 +1,16 @@
+import { Hono, Context } from 'hono';
+
+const aboutPage = new Hono();
+
+export async handleAboutPage(c: Context) {
+  const meta: SiteMeta = {
+    title: "About",
+    description: "About Dave Smith-Hayes - a dad, developer, musician.",
+    author: "Dave Smith-Hayes"
+  };
+
+  c.render(<AboutPage />, { meta });
+}
+
+aboutPage.get("/about", handleAboutPage);
+export default aboutPage;
diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx
index 2f4080d..c68ea71 100644
--- a/src/templates/Page.tsx
+++ b/src/templates/Page.tsx
@@ -1,6 +1,7 @@
 import { Style } from 'hono/css';
 import { SiteMeta } from '@blog/models/SiteMeta';
 import { MetaTags } from '@blog/templates/components/MetaTags';
+import { Navigation } from '@blog/templates/componennts/Navigation';
 
 function getPageTitle(title: string|undefined): string {
   if (!title) {
@@ -25,6 +26,9 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {
             <a href="/">davesmithhayes.com</a>
           </div>
         </header>
+        <nav>
+          <Navigation />
+        </nav>
         <main>
           {children}
         </main>
diff --git a/src/templates/Pages/AboutPage.tsx b/src/templates/Pages/AboutPage.tsx
new file mode 100644
index 0000000..ba95ef3
--- /dev/null
+++ b/src/templates/Pages/AboutPage.tsx
@@ -0,0 +1,7 @@
+export function AboutPage() {
+  return (
+    <div class="main">
+      <p>Hello! I am Dave Smith-Hayes.</p>
+    </div>
+  );
+}
diff --git a/src/templates/components/Navigation.tsx b/src/templates/components/Navigation.tsx
new file mode 100644
index 0000000..73a3833
--- /dev/null
+++ b/src/templates/components/Navigation.tsx
@@ -0,0 +1,12 @@
+const pages: Array<{ path: string, title: string }> = [
+  { path: "/", title: "Home" },
+  { path: "/about", title: "About" },
+];
+
+export function Navigation() {
+  return (
+    <ul>
+      {pages.map(p => <li><a href={p.path}>{p.title}</a></li> )}
+    </ul>
+  );
+}