diff --git a/docs/components/Footer/index.jsx b/docs/components/Footer/index.jsx
index e69de29b..2547ecf8 100644
--- a/docs/components/Footer/index.jsx
+++ b/docs/components/Footer/index.jsx
@@ -0,0 +1,16 @@
+import styles from '../../styles/Home.module.css'
+
+export default function Footer() {
+    return (
+        <footer className={styles.footer}>
+            <a
+                href="https://www.datopian.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                Built by{' '}
+                <img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
+            </a>
+        </footer>
+    )
+}
diff --git a/docs/components/Nav/index.jsx b/docs/components/Nav/index.jsx
index dddb1afa..9f05b4a9 100644
--- a/docs/components/Nav/index.jsx
+++ b/docs/components/Nav/index.jsx
@@ -1,112 +1,48 @@
 import { useState } from 'react'
-import Head from 'next/head'
 import Link from 'next/link'
-import styles from '../styles/Home.module.css'
 
-export default function Home() {
-  const [open, setOpen] = useState(false);
-  const handleClick = (event) => {
-    event.preventDefault();
-    setOpen(!open);
-  };
+export default function Nav() {
+    const [open, setOpen] = useState(false);
+    const handleClick = (event) => {
+        event.preventDefault();
+        setOpen(!open);
+    };
 
-  const navMenu = [{ title: 'Home', path: '/' },
-  { title: 'Gallery', path: '/gallery' },
-  { title: 'Docs', path: '/docs' },
-  { title: 'Learn', path: '/learn' },
-  { title: 'Github', path: 'https://github.com/datopian/portal.js' }]
+    const navMenu = [{ title: 'Home', path: '/' },
+    { title: 'Gallery', path: '/gallery' },
+    { title: 'Docs', path: '/docs' },
+    { title: 'Learn', path: '/learn' },
+    { title: 'Github', path: 'https://github.com/datopian/portal.js' }]
 
-  return (
-    <>
-      <nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
-        <div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
-          <img src="/logo.svg" alt="portal logo" width="110" />
-        </div>
-        <div className="block lg:hidden mx-4">
-          <button
-            onClick={handleClick}
-            className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
-          >
-            <svg
-              className="fill-current h-3 w-3"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>Menu</title>
-              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-            </svg>
-          </button>
-        </div>
-        <div className={`${open ? `block` : `hidden`} lg:block`}>
-          {navMenu.map((menu, index) => {
-            return (<Link href={menu.path} key={index}>
-              <a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
-                {menu.title}
-              </a>
-            </Link>)
-          })}
-        </div>
-      </nav>
-
-      <div className={styles.container}>
-        <Head>
-          <title>Create Portal App</title>
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-
-
-        <main className={styles.main}>
-
-          <h1 className={styles.title}>
-            Welcome to <a href="https://github.com/datopian/portal.js">Portal.js!</a>
-          </h1>
-
-          <p className={styles.description}>
-            Rapidly build rich data portals using a modern frontend framework!
-          </p>
-
-          <div className={styles.grid}>
-            <a href="/docs" className={styles.card}>
-              <h3>Documentation &rarr;</h3>
-              <p>Find in-depth information about Portal.js features and API.</p>
-            </a>
-
-            <a href="/learn" className={styles.card}>
-              <h3>Learn &rarr;</h3>
-              <p>Learn about Portal.js with examples!</p>
-            </a>
-
-            <a
-              href="/gallery"
-              className={styles.card}
-            >
-              <h3>Gallery &rarr;</h3>
-              <p>Discover examples of Portal.js projects.</p>
-            </a>
-
-            <a
-              href="https://github.com/datopian/portal.js"
-              className={styles.card}
-            >
-              <h3>Contribute &rarr;</h3>
-              <p>
-                Checkout the Portal.js repository on github
-            </p>
-            </a>
-          </div>
-        </main>
-
-        <footer className={styles.footer}>
-          <a
-            href="https://www.datopian.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Built by{' '}
-            <img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
-          </a>
-        </footer>
-      </div>
-    </>
-  )
+    return (
+        <nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
+            <div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
+                <img src="/logo.svg" alt="portal logo" width="110" />
+            </div>
+            <div className="block lg:hidden mx-4">
+                <button
+                    onClick={handleClick}
+                    className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
+                >
+                    <svg
+                        className="fill-current h-3 w-3"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <title>Menu</title>
+                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+                    </svg>
+                </button>
+            </div>
+            <div className={`${open ? `block` : `hidden`} lg:block`}>
+                {navMenu.map((menu, index) => {
+                    return (<Link href={menu.path} key={index}>
+                        <a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
+                            {menu.title}
+                        </a>
+                    </Link>)
+                })}
+            </div>
+        </nav>
+    )
 }
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
index e69de29b..39cf59f9 100644
--- a/docs/pages/docs.js
+++ b/docs/pages/docs.js
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+import Nav from '../components/Nav'
+import Footer from '../components/Footer'
+import styles from '../styles/Home.module.css'
+
+export default function Docs() {
+
+  return (
+    <>
+      <Head>
+        <title>Portal.js Api Documentation</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
+      <div className={styles.container}>
+        <main className={styles.main}>
+
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}
diff --git a/docs/pages/gallery.js b/docs/pages/gallery.js
index e69de29b..62362dbf 100644
--- a/docs/pages/gallery.js
+++ b/docs/pages/gallery.js
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+import Nav from '../components/Nav'
+import Footer from '../components/Footer'
+import styles from '../styles/Home.module.css'
+
+export default function Gallery() {
+
+  return (
+    <>
+      <Head>
+        <title>Portal.js Gallery</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
+      <div className={styles.container}>
+        <main className={styles.main}>
+
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}
diff --git a/docs/pages/index.js b/docs/pages/index.js
index dddb1afa..802d0e24 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -1,59 +1,18 @@
-import { useState } from 'react'
 import Head from 'next/head'
-import Link from 'next/link'
+import Nav from '../components/Nav'
+import Footer from '../components/Footer'
 import styles from '../styles/Home.module.css'
 
 export default function Home() {
-  const [open, setOpen] = useState(false);
-  const handleClick = (event) => {
-    event.preventDefault();
-    setOpen(!open);
-  };
-
-  const navMenu = [{ title: 'Home', path: '/' },
-  { title: 'Gallery', path: '/gallery' },
-  { title: 'Docs', path: '/docs' },
-  { title: 'Learn', path: '/learn' },
-  { title: 'Github', path: 'https://github.com/datopian/portal.js' }]
 
   return (
     <>
-      <nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
-        <div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
-          <img src="/logo.svg" alt="portal logo" width="110" />
-        </div>
-        <div className="block lg:hidden mx-4">
-          <button
-            onClick={handleClick}
-            className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
-          >
-            <svg
-              className="fill-current h-3 w-3"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>Menu</title>
-              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-            </svg>
-          </button>
-        </div>
-        <div className={`${open ? `block` : `hidden`} lg:block`}>
-          {navMenu.map((menu, index) => {
-            return (<Link href={menu.path} key={index}>
-              <a className="block mt-4 lg:inline-block lg:mt-0 active:bg-primary-background text-gray-700 hover:text-black mr-6">
-                {menu.title}
-              </a>
-            </Link>)
-          })}
-        </div>
-      </nav>
-
+      <Head>
+        <title>Create Portal App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
       <div className={styles.container}>
-        <Head>
-          <title>Create Portal App</title>
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-
 
         <main className={styles.main}>
 
@@ -95,17 +54,7 @@ export default function Home() {
             </a>
           </div>
         </main>
-
-        <footer className={styles.footer}>
-          <a
-            href="https://www.datopian.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Built by{' '}
-            <img src="/datopian-logo.png" alt="Datopian Logo" className={styles.logo} />
-          </a>
-        </footer>
+        <Footer />
       </div>
     </>
   )
diff --git a/docs/pages/learn.js b/docs/pages/learn.js
index e69de29b..ebc5b6b8 100644
--- a/docs/pages/learn.js
+++ b/docs/pages/learn.js
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+import Nav from '../components/Nav'
+import Footer from '../components/Footer'
+import styles from '../styles/Home.module.css'
+
+export default function Learn() {
+
+  return (
+    <>
+      <Head>
+        <title>Portal.js Learn by Examples</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
+      <div className={styles.container}>
+        <main className={styles.main}>
+
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}
