diff --git a/docs/components/Footer/index.jsx b/docs/components/Footer/index.jsx
deleted file mode 100644
index 6d6ec5dd..00000000
--- a/docs/components/Footer/index.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function Footer() {
-  return (
-    <footer className="flex items-center justify-center w-full h-24 border-t">
-      <a
-        className="flex items-center justify-center"
-        href="https://datopian.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Built by{' '}
-        <img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
-      </a>
-    </footer>
-  )
-}
diff --git a/docs/components/layout.js b/docs/components/layout.js
new file mode 100644
index 00000000..23b6f6bc
--- /dev/null
+++ b/docs/components/layout.js
@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import Head from 'next/head'
+
+import Nav from '../components/Nav'
+
+export default function Layout({
+  children,
+  title = 'Portal.JS',
+}) {
+  return (
+    <div>
+      <Head>
+        <title>{title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+      <Nav />
+
+      {children}
+
+      <footer className="flex items-center justify-center w-full h-24 border-t">
+        <a
+          className="flex items-center justify-center"
+          href="https://datopian.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Built by{' '}
+          <img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
+        </a>
+      </footer>
+    </div>
+  )
+}
diff --git a/docs/components/prose.js b/docs/components/prose.js
new file mode 100644
index 00000000..7460bde2
--- /dev/null
+++ b/docs/components/prose.js
@@ -0,0 +1,13 @@
+export default function Prose({
+  children,
+  mdFile=null
+}) {
+  return (
+    <main className="prose mx-auto my-24">
+      {mdFile &&
+        <div dangerouslySetInnerHTML={{ __html: mdFile }} />
+      }
+      {children}
+    </main>
+  )
+}
diff --git a/docs/pages/components.js b/docs/pages/components.js
index c5d34d3d..916f667a 100644
--- a/docs/pages/components.js
+++ b/docs/pages/components.js
@@ -1,33 +1,22 @@
-import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 import { formatMD } from '../lib/utils'
 
 export default function Docs({ mdFile }) {
-
-    return (
-        <>
-            <Head>
-                <title>Portal.js Api Documentation</title>
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <Nav />
-            <div>
-                <div className="prose">
-                    <div dangerouslySetInnerHTML={{ __html: mdFile }} />
-                </div>
-                <br />
-                <Link href="/components">
-                    <button >Next Page</button>
-                </Link>
-            </div>
-
-            <Footer />
-
-        </>
-    )
+  return (
+    <Layout title="Portal.js API Documentation">
+      <Prose mdFile={mdFile}>
+        <p className="text-center">
+          <Link href="/components">
+            <button>Next Page</button>
+          </Link>
+        </p>
+      </Prose>
+    </Layout>
+  )
 }
 
 
@@ -39,4 +28,4 @@ export async function getStaticProps() {
             mdFile
         }
     }
-}
\ No newline at end of file
+}
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
index 12a105c8..b8d60e15 100644
--- a/docs/pages/docs.js
+++ b/docs/pages/docs.js
@@ -1,38 +1,31 @@
-import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 import { formatMD } from '../lib/utils'
 
 export default function Docs({ mdFile }) {
   return (
-    <>
-      <Head>
-        <title>Portal.js API Documentation</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <div className="prose mx-auto my-24">
-        <div dangerouslySetInnerHTML={{ __html: mdFile }} />
+    <Layout title="Portal.js API Documentation">
+      <Prose mdFile={mdFile}>
         <p className="text-center">
           <Link href="/installation">
             <button>Next Page</button>
           </Link>
         </p>
-      </div>
-      <Footer />
-    </>
+      </Prose>
+    </Layout>
   )
 }
 
 
 export async function getStaticProps() {
-    const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/introduction.md")
-    const mdFile = await formatMD(mdFilePath)
-    return {
-        props: {
-            mdFile
-        }
+  const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/introduction.md")
+  const mdFile = await formatMD(mdFilePath)
+  return {
+    props: {
+      mdFile
     }
+  }
 }
diff --git a/docs/pages/gallery.js b/docs/pages/gallery.js
index 12b6c195..72433701 100644
--- a/docs/pages/gallery.js
+++ b/docs/pages/gallery.js
@@ -1,22 +1,13 @@
-import Head from 'next/head'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 
 export default function Gallery() {
 
   return (
-    <>
-      <Head>
-        <title>Portal.js Gallery</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <div >
-        <main >
-
-        </main>
-        <Footer />
-      </div>
-    </>
+    <Layout title="Portal.js Gallery">
+      <Prose>
+        <p className="text-center">Come back soon!</p>
+      </Prose>
+    </Layout>
   )
 }
diff --git a/docs/pages/index.js b/docs/pages/index.js
index d3c574ec..3ed06d8e 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -1,17 +1,9 @@
-import Head from 'next/head'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+import Layout from '../components/layout'
 
 export default function Home() {
 
   return (
-    <>
-      <Head>
-        <title>Create Portal App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-
+    <Layout>
       <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center py-10">
         <h1 className="text-6xl font-bold">
           <a href="https://portaljs.com/">
@@ -65,8 +57,6 @@ export default function Home() {
           </a>
         </div>
       </main>
-
-      <Footer />
-    </>
+    </Layout>
   )
 }
diff --git a/docs/pages/installation.js b/docs/pages/installation.js
index 26940f3e..037b8b6f 100644
--- a/docs/pages/installation.js
+++ b/docs/pages/installation.js
@@ -1,33 +1,22 @@
-import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 import { formatMD } from '../lib/utils'
 
 export default function Docs({ mdFile }) {
-
-    return (
-        <>
-            <Head>
-                <title>Portal.js Api Documentation</title>
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <Nav />
-            <div>
-                <div className="prose">
-                    <div dangerouslySetInnerHTML={{ __html: mdFile }} />
-                </div>
-                <br />
-                <Link href="/references">
-                    <button >Next Page</button>
-                </Link>
-            </div>
-
-            <Footer />
-
-        </>
-    )
+  return (
+    <Layout title="Portal.js Installation">
+      <Prose mdFile={mdFile}>
+        <p className="text-center">
+          <Link href="/references">
+            <button>Next Page</button>
+          </Link>
+        </p>
+      </Prose>
+    </Layout>
+  )
 }
 
 
@@ -39,4 +28,4 @@ export async function getStaticProps() {
             mdFile
         }
     }
-}
\ No newline at end of file
+}
diff --git a/docs/pages/learn.js b/docs/pages/learn.js
index 803fecfc..10a8a6b1 100644
--- a/docs/pages/learn.js
+++ b/docs/pages/learn.js
@@ -1,36 +1,24 @@
-import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 import { formatMD } from '../lib/utils'
 
 export default function Docs({ mdFile }) {
-
-    return (
-        <>
-            <Head>
-                <title>Portal.js Api Documentation</title>
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <Nav />
-            <div >
-                <div className="prose">
-                    <div dangerouslySetInnerHTML={{ __html: mdFile }} />
-                </div>
-                <br />
-                <Link href="/references">
-                    <button >Next Page</button>
-                </Link>
-            </div>
-
-            <Footer />
-
-        </>
-    )
+  return (
+    <Layout title="Portal.js - Learn">
+      <Prose mdFile={mdFile}>
+        <p className="text-center">
+          <Link href="/references">
+            <button>Next Page</button>
+          </Link>
+        </p>
+      </Prose>
+    </Layout>
+  )
 }
 
-
 export async function getStaticProps() {
     const mdFilePath = path.join(process.cwd(), "markdowns/tutorial-doc/learn.md")
     const mdFile = await formatMD(mdFilePath)
@@ -39,4 +27,4 @@ export async function getStaticProps() {
             mdFile
         }
     }
-}
\ No newline at end of file
+}
diff --git a/docs/pages/references.js b/docs/pages/references.js
index 0f0060de..9da8eb2c 100644
--- a/docs/pages/references.js
+++ b/docs/pages/references.js
@@ -1,36 +1,21 @@
-import Head from 'next/head'
 import Link from 'next/link'
 import path from 'path'
-import Nav from '../components/Nav'
-import Footer from '../components/Footer'
+
+import Layout from '../components/layout'
+import Prose from '../components/prose'
 import { formatMD } from '../lib/utils'
 
 export default function Docs({ mdFile }) {
-
-    return (
-        <>
-            <Head>
-                <title>Portal.js Api Documentation</title>
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <Nav />
-            <div >
-                <div className="prose">
-                    <div dangerouslySetInnerHTML={{ __html: mdFile }} />
-                </div>
-                <br />
-                <Link href="/">
-                    <button >Back Home</button>
-                </Link>
-            </div>
-
-            <Footer />
-
-        </>
-    )
+  return (
+    <Layout title="Portal.js Reference Documentation">
+      <Prose mdFile={mdFile}>
+      </Prose>
+    </Layout>
+  )
 }
 
 
+
 export async function getStaticProps() {
     const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/references.md")
     const mdFile = await formatMD(mdFilePath)
@@ -39,4 +24,4 @@ export async function getStaticProps() {
             mdFile
         }
     }
-}
\ No newline at end of file
+}
