diff --git a/packages/docs/doczrc.js b/packages/docs/doczrc.js
deleted file mode 100644
index fb5c07cb50..0000000000
--- a/packages/docs/doczrc.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-  title: 'Supabase',
-  description: 'Supercharge your database.',
-  // src: 'pages',
-  // files: 'pages/**/*.mdx',
-  // propsParser: false,
-  // codeSandbox: false,
-  htmlContext: {
-    head: {
-      links: [
-        {
-          rel: 'stylesheet',
-          href: 'https://codemirror.net/theme/blackboard.css',
-        },
-      ],
-    },
-  },
-  menu: ['Supabase', 'Realtime', 'Documents'],
-  themeConfig: {
-    mode: 'dark',
-    codemirrorTheme: 'blackboard',
-    showPlaygroundEditor: false,
-    linesToScrollEditor: 50,
-    colors: {
-      codeColor: '#8DB6DE',
-      codeBg: '#0C1021',
-      blockquoteColor: '#8DB6DE',
-      blockquoteBg: '#0C1021',
-    },
-  },
-}
diff --git a/packages/docs/netlify.toml b/packages/docs/netlify.toml
deleted file mode 100644
index 8aac4821ec..0000000000
--- a/packages/docs/netlify.toml
+++ /dev/null
@@ -1,5 +0,0 @@
-# COMMENT: This a rule for Single Page Applications as Docz site is one
-[[redirects]]
-  from = "/*"
-  to = "/"
-  status = 200
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
deleted file mode 100644
index 329e829487..0000000000
--- a/packages/docs/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@supabase/docs",
-  "version": "0.1.0",
-  "scripts": {
-    "dev": "docz dev --port=3005",
-    "build": "docz build"
-  },
-  "dependencies": {
-    "docz": "^2.0.0-rc.55",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
-  },
-  "devDependencies": {
-    "docz-theme-default": "^1.2.0"
-  }
-}
diff --git a/packages/docs/pages/hello.mdx b/packages/docs/pages/hello.mdx
deleted file mode 100644
index f90f330418..0000000000
--- a/packages/docs/pages/hello.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-name: Getting Started
-route: /
-menu: Supabase
----
-
-# Supabase
-
-Hello, I'm a mdx file!
\ No newline at end of file
diff --git a/packages/docs/pages/realtime/getting-started.mdx b/packages/docs/pages/realtime/getting-started.mdx
deleted file mode 100644
index c876315253..0000000000
--- a/packages/docs/pages/realtime/getting-started.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-name: Getting Started
-route: /realtime/
-menu: Realtime
----
-
-# Realtime
-
-Hello, I'm a mdx file!
\ No newline at end of file
diff --git a/packages/docs/pages/test-page.mdx b/packages/docs/pages/test-page.mdx
deleted file mode 100644
index 56809ceaf7..0000000000
--- a/packages/docs/pages/test-page.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-name: Test Page
-menu: Documents
----
-
-# Test Page
-
-Hello, I'm another mdx file!
\ No newline at end of file
diff --git a/packages/web/components/NavbarDocs.js b/packages/web/components/NavbarDocs.js
index 9e7b4ac0ff..e0d8a8a3ff 100644
--- a/packages/web/components/NavbarDocs.js
+++ b/packages/web/components/NavbarDocs.js
@@ -2,10 +2,16 @@ import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 
 export default function Navbar() {
-
   return (
     <nav className="tabs m-none">
       <ul>
+        <li className="is-hidden-tablet">
+          <a>
+          <span class="icon">
+            <i class="fas fa-bars"></i>
+          </span>
+          </a>
+        </li>
         <li className="is-active">
           <Link href="/docs/packaged/getting-started">
             <a className="">Packaged</a>
@@ -17,7 +23,7 @@ export default function Navbar() {
           </Link>
         </li>
         <li>
-          <Link href="/realtime">
+          <Link href="/docs/realtime/getting-started">
             <a className="">Realtime</a>
           </Link>
         </li>
diff --git a/packages/web/components/layouts/DocsLayout.js b/packages/web/components/layouts/DocsLayout.js
index a6ed85c29e..f149121d28 100644
--- a/packages/web/components/layouts/DocsLayout.js
+++ b/packages/web/components/layouts/DocsLayout.js
@@ -5,6 +5,7 @@ import Footer from '../Footer'
 import Head from 'next/head'
 
 export default function DocsLayout(props) {
+  const { sidebar } = props
   return (
     <>
       <Head>
@@ -15,12 +16,7 @@ export default function DocsLayout(props) {
         <NavbarDocs />
         <div className="columns m-none is-gapless">
           <div className="DocsMenuColumn column is-narrow is-hidden-mobile" style={{ width: 250 }}>
-            <p className="menu-label">Documentation</p>
-            <ul className="menu-list">
-              <li><a className="">Manage Your Team</a></li>
-              <li><a className="is-active">Manage Your Team</a></li>
-              <li><a className="">Manage Your Team</a></li>
-            </ul>
+            {Sidebar(sidebar)}
           </div>
           <div className="column">{props.children}</div>
         </div>
@@ -30,3 +26,20 @@ export default function DocsLayout(props) {
     </>
   )
 }
+
+const Sidebar = sidebar => {
+  return Object.entries(sidebar).map(([heading, pages]) => {
+    return (
+      <>
+        <p className="menu-label">{heading}</p>
+        <ul className="menu-list">{pages.map(x => SidebarLink(x))}</ul>
+      </>
+    )
+  })
+}
+
+const SidebarLink = page => (
+  <li>
+    <a className="">{page.title}</a>
+  </li>
+)
diff --git a/packages/web/content/docs/packaged/getting-started.mdx b/packages/web/content/docs/packaged/getting-started.mdx
index 41fb54985b..9f4358c6ee 100644
--- a/packages/web/content/docs/packaged/getting-started.mdx
+++ b/packages/web/content/docs/packaged/getting-started.mdx
@@ -1,4 +1,5 @@
 export const metadata = {
   title: 'Packaged PostgreSQL',
-  description: 'PostgreSQL is easy, but we want to make it even easier.'
+  description: 'PostgreSQL is easy, but we want to make it even easier.',
+  sidebarLabel: 'Getting Started'
 }
diff --git a/packages/web/content/docs/realtime/getting-started.mdx b/packages/web/content/docs/realtime/getting-started.mdx
new file mode 100644
index 0000000000..81632093f8
--- /dev/null
+++ b/packages/web/content/docs/realtime/getting-started.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: 'Realtime',
+  description: 'Listen to your database updates, inserts, and deletes over websockets.'
+}
+
+
+# Hello world
+
+
+FOo bAr
\ No newline at end of file
diff --git a/packages/web/content/docs/sidebars.js b/packages/web/content/docs/sidebars.js
deleted file mode 100644
index 27b8df0ce9..0000000000
--- a/packages/web/content/docs/sidebars.js
+++ /dev/null
@@ -1,7 +0,0 @@
-
-const sidebars = []
-
-sidebars['packaged'] = ['getting-started']
-sidebars['admin-api'] = ['getting-started']
-
-export default sidebars
\ No newline at end of file
diff --git a/packages/web/pages/docs/[product]/[slug].js b/packages/web/pages/docs/[product]/[slug].js
index 8f5e4c22cb..4be0e848af 100644
--- a/packages/web/pages/docs/[product]/[slug].js
+++ b/packages/web/pages/docs/[product]/[slug].js
@@ -1,40 +1,88 @@
 import { useRouter } from 'next/router'
 import Layout from '~/components/layouts/DocsLayout'
-import Sidebars from '~/content/docs/sidebars'
 
 const importReducer = ctx => {
-  let keys = ctx.keys();
-  let values = keys.map(ctx);
-  return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
+  let keys = ctx.keys()
+  let values = keys.map(ctx)
+  return keys.reduce((o, k, i) => {
+    o[k] = values[i]
+    return o
+  }, {})
 }
 
-let Docs = []
-Docs['packaged'] = importReducer(require.context('../../../content/docs/packaged', true, /.mdx$/));
-Docs['admin-api'] = importReducer(require.context('../../../content/docs/admin-api', true, /.mdx$/));
+// Import all docs
+var Docs = []
+Docs['packaged'] = importReducer(require.context('../../../content/docs/packaged', true, /.mdx$/))
+Docs['admin-api'] = importReducer(require.context('../../../content/docs/admin-api', true, /.mdx$/))
+Docs['realtime'] = importReducer(require.context('../../../content/docs/realtime', true, /.mdx$/))
 
+// Set up all sidebars
+var Sidebars = []
+Sidebars['packaged'] = {
+  documentation: ['getting-started'],
+}
+Sidebars['admin-api'] = {
+  documentation: ['getting-started'],
+}
+Sidebars['realtime'] = {
+  documentation: ['getting-started'],
+}
 
 export default function ProductDocs() {
   const router = useRouter()
   let { product, slug } = router.query
   if (!product || !slug) return <div></div>
 
-  let sidebar = Sidebars[product]
-
-  const Doc = Docs[product][`./${slug}.mdx`]
-  const { metadata } = Doc
+  const productDocs = Docs[product]
+  const productSidebar = enrichSidebar(Sidebars[product], productDocs)
+  const documentation = productDocs[`./${slug}.mdx`]
+  const Content = documentation.default
+  const { metadata } = documentation
   const { title, description } = metadata
 
   return (
-    <Layout>
-      <div className="content">
-        <div className="has-background-dark p-md">
+    <Layout sidebar={productSidebar} category>
+      <div className="has-background-dark">
+        <div className="content w-m-800 p-md p-t-xl p-b-xl">
           <h1 className="title">{title}</h1>
           <p className="subtitle">{description}</p>
         </div>
-        <div className="p-md">
-          <Doc.default />
-        </div>
+      </div>
+      <div className="content w-m-800 p-md">
+        <Content />
+      </div>
+      <div className="w-m-800 p-md p-b-lg">
+        <nav className="columns reverse-row-order">
+          <div className="column ">
+            <a className="box p-md">
+              <p className="heading has-text-grey">Next</p>
+              <p className="">Some post</p>
+            </a>
+          </div>
+          <div className="column is-hidden-mobile "></div>
+          <div className="column">
+            <a className="box p-md has-text-right">
+              <p className="heading has-text-grey">Previous</p>
+              <p className="">Some post</p>
+            </a>
+          </div>
+        </nav>
       </div>
     </Layout>
   )
 }
+
+/**
+ * Fills the sidebar array with relevant metadata,
+ */
+const enrichSidebar = (sidebar, productDocs) => {
+  return Object.keys(sidebar).reduce((acc, heading) => {
+    acc[heading] = sidebar[heading].map(slug => {
+      const documentation = productDocs[`./${slug}.mdx`]
+      const { metadata } = documentation
+      const { title, sidebarLabel } = metadata
+      return { slug, title: sidebarLabel || title }
+    })
+    return acc
+  }, {})
+}
diff --git a/packages/web/pages/index.js b/packages/web/pages/index.js
index db7c989484..9d24d0b4be 100644
--- a/packages/web/pages/index.js
+++ b/packages/web/pages/index.js
@@ -51,7 +51,7 @@ export default class Home extends React.Component {
           <a name="pricing" id="pricing" />
           <h3 className="title is-3 has-underline ">Launch</h3>
           <p className="subtitle">
-            Whether you're a DB expert, or just a beginner, Supabase makes it ridiculously easy to get started with PostgreSQL.
+            Whether you're a DB expert or just a beginner, Supabase makes it ridiculously easy to get started with PostgreSQL.
           </p>
           <div className="columns is-multiline">
             <div className="column is-4">
diff --git a/packages/web/styles/style.scss b/packages/web/styles/style.scss
index 6ac0a1bdac..fba67e2567 100644
--- a/packages/web/styles/style.scss
+++ b/packages/web/styles/style.scss
@@ -101,6 +101,10 @@ $dropdown-item-active-color: $background;
 $menu-item-hover-color: $primary;
 $menu-item-active-color: $text-invert;
 
+// Menu
+$tabs-border-bottom-color: $border-color;
+$tabs-link-color: $grey-200;
+
 // Import only what you need from Bulma
 @import '../node_modules/bulma/bulma.sass';
 
@@ -147,6 +151,37 @@ $positions: (('t', 'top'), ('r', 'right'), ('b', 'bottom'), ('l', 'left'));
 }
 // end spacing
 
+
+$widths: (
+  ('100', 100),
+  ('200', 200),
+  ('300', 300),
+  ('400', 400),
+  ('500', 500),
+  ('600', 600),
+  ('700', 700),
+  ('800', 800),
+  ('900', 900),
+  ('1000', 1000),
+  ('1100', 1100),
+  ('1200', 1200),
+);
+
+
+@each $width in $widths {
+  $widthKey: nth($width, 1);
+  $widthValue: nth($width, 2);
+  .w-#{$widthKey} {
+    width: #{$widthValue}px !important;
+    margin: 0 auto;
+  }
+  // Set max widths
+  .w-m-#{$widthKey} {
+    max-width: #{$widthValue}px !important;
+    margin: 0 auto;
+  }
+}
+
 //
 // Custom CSS
 //
@@ -298,4 +333,10 @@ code {
   &:hover {
     box-shadow: 0 30px 60px 0 rgba(0,0,0,0.5), 0 0 0 1px $primary !important;
   }
+}
+@media only screen and (min-width: 769px) {
+  .reverse-row-order {
+    display: flex;
+    flex-direction: row-reverse;
+  }
 }
\ No newline at end of file