diff --git a/www/components/ArticleThumb.tsx b/www/components/ArticleThumb.tsx
index 0df9c75989d..9cca119029c 100644
--- a/www/components/ArticleThumb.tsx
+++ b/www/components/ArticleThumb.tsx
@@ -57,13 +57,13 @@ const ArticleThumb = (props: any) => {
               {iconMarkup}
             </div>
           )}
-          <p className="text-sm font-medium text-brand-600">
+          <p className="text-sm font-medium text-gray-600">
             <a href="#" className="hover:underline capitalize">
               {type}
             </a>
           </p>
           <a href="#" className="block mt-2">
-            <p className="text-xl font-semibold text-gray-900">{title}</p>
+            <p className="text-xl text-gray-900">{title}</p>
             <p className="mt-3 text-base text-gray-500">
               {description}
             </p>
diff --git a/www/components/container.tsx b/www/components/container.tsx
index cbe54e9cb55..d0284d38617 100644
--- a/www/components/container.tsx
+++ b/www/components/container.tsx
@@ -5,7 +5,7 @@ type Props = {
 }
 
 const Container: FunctionComponent = ({ children }: Props) => {
-  return <div className="container mx-auto px-5">
+  return <div className="container mx-auto border-r-2 border-l-2 border-gray-50">
     {children}
   </div>
 }
diff --git a/www/components/features.tsx b/www/components/features.tsx
index 0d9a0810651..c2589a4938d 100644
--- a/www/components/features.tsx
+++ b/www/components/features.tsx
@@ -1,9 +1,10 @@
 import Badge from './badge'
 import Solutions from './../data/Solutions.json'
+import SectionHeader from './UI/SectionHeader'
 
 const Features = () => {
   const IconSections = Object.values(Solutions).map((solution) => {
-    const { name, description, description_short, icon, label, url } = solution
+    const { name, description, icon, label, url } = solution
 
     return (
       <div>
@@ -28,67 +29,39 @@ const Features = () => {
         <div className="mt-5">
           <dd className="mt-2 text-base text-gray-500">{description}</dd>
         </div>
-        <div className="mt-5">
-          <dd className="mt-2 text-base text-gray-600 underline">Learn more link</dd>
-        </div>
+        {url && (
+          <div className="mt-5">
+            <dd className="mt-2 text-sm text-brand-600 underline">Learn more link</dd>
+          </div>
+        )}
       </div>
     )
   })
 
   return (
     // <!-- This example requires Tailwind CSS v2.0+ -->
-    <div className="bg-gray-50 overflow-hidden py-12">
-      <div className="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-0">
-        <div className="lg:col-span-1">
-          <small>A better way to build products</small>
-          <h2 className="text-3xl text-gray-900 sm:text-4xl">
-            Build Faster and Focus on Your Core Products
-          </h2>
-        </div>
-      </div>
-
-      <div className="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-0">
-        <svg
-          className="absolute top-0 left-full transform -translate-x-1/2 -translate-y-3/4 lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4"
-          width="404"
-          height="784"
-          fill="none"
-          viewBox="0 0 404 784"
-          aria-hidden="true"
-        >
-          <defs>
-            <pattern
-              id="8b1b5f72-e944-4457-af67-0c6d15a99f38"
-              x="0"
-              y="0"
-              width="20"
-              height="20"
-              patternUnits="userSpaceOnUse"
-            >
-              <rect
-                x="0"
-                y="0"
-                width="4"
-                height="4"
-                className="text-gray-200"
-                fill="currentColor"
-              />
-            </pattern>
-          </defs>
-          <rect width="404" height="784" fill="url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)" />
-        </svg>
-
-        <div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
-          <div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
-            <dl className="mt-10 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
-              {IconSections}
-            </dl>
-          </div>
-          <div className="lg:col-span-5">
-            <div>
-              <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
-                image here
-              </h2>
+    <div className="bg-gray-50 overflow-hidden py-12 sm:px-6 lg:px-16">
+      <div className="mx-auto max-w-7xl">
+        <SectionHeader
+          title={'Build Faster'}
+          title_alt={' and Focus on Your Core Products'}
+          subtitle={'A better way to build products'}
+        />
+        <div className="mt-16 grid grid-cols-12 gap-8">
+          <div className="relative pb-12 col-span-12">
+            <div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
+              <div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
+                <dl className="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
+                  {IconSections}
+                </dl>
+              </div>
+              <div className="lg:col-span-5">
+                <div>
+                  <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+                    image here
+                  </h2>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/www/components/footer.tsx b/www/components/footer.tsx
index 319a4d5e3fb..023b8829f7a 100644
--- a/www/components/footer.tsx
+++ b/www/components/footer.tsx
@@ -69,7 +69,7 @@ const Footer = () => {
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
                 <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
-                  Solutions
+                  Product
                 </h3>
                 <ul className="mt-4 space-y-4">
                   <li>
diff --git a/www/components/hero.tsx b/www/components/hero.tsx
index 096e269f740..237eeee50f0 100644
--- a/www/components/hero.tsx
+++ b/www/components/hero.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 const Hero = () => {
   return (
-    <div className="relative bg-dark-100 overflow-hidden">
+    <div className="relative bg-dark-100 overflow-hidden px-16">
       <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
         <svg
           className="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0"
@@ -26,96 +26,15 @@ const Hero = () => {
           <rect width="364" height="384" fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)" />
         </svg>
       </div>
+
       <div className="relative pt-6 pb-16 sm:pb-24">
-        <div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
-          <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
-            <div className="px-5 pt-4 flex items-center justify-between">
-              <div>
-                <img
-                  className="h-8 w-auto"
-                  src="https://tailwindui.com/img/logos/workflow-mark-brand-600.svg"
-                  alt=""
-                />
-              </div>
-              <div className="-mr-2">
-                <button
-                  type="button"
-                  className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
-                >
-                  <span className="sr-only">Close menu</span>
-
-                  <svg
-                    className="h-6 w-6"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
-              <div className="px-2 pt-2 pb-3 space-y-1" role="none">
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                  role="menuitem"
-                >
-                  Product
-                </a>
-
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                  role="menuitem"
-                >
-                  Features
-                </a>
-
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                  role="menuitem"
-                >
-                  Marketplace
-                </a>
-
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                  role="menuitem"
-                >
-                  Company
-                </a>
-              </div>
-              <div role="none">
-                <a
-                  href="#"
-                  className="block w-full px-5 py-3 text-center font-medium text-brand-600 bg-gray-50 hover:bg-gray-100"
-                  role="menuitem"
-                >
-                  Log in
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-
         <main className="mt-16 sm:mt-24">
           <div className="mx-auto max-w-7xl">
             <div className="lg:grid lg:grid-cols-12 lg:gap-8">
-              <div className="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+              <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
                 <div>
 
-                  <h1 className="mt-4 text-4xl font-bold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
+                  <h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
                     <span className="md:block">The Open Source</span>
                     <span className="text-brand-400 md:block">Firebase Alternative</span>
                   </h1>
@@ -128,7 +47,7 @@ const Hero = () => {
                   <div className="mt-10 sm:flex sm:justify-center lg:justify-start">
                     <div className="rounded-md shadow">
                       <a href="#" className="inline-flex items-center px-4 py-2 border border-transparent text-med font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">                        
-                        Get started
+                        Start your project
                       </a>
                     </div>
                   </div>
diff --git a/www/components/index_sections/BuiltWithSupabase.tsx b/www/components/index_sections/BuiltWithSupabase.tsx
index f2d056f5654..5432468df58 100644
--- a/www/components/index_sections/BuiltWithSupabase.tsx
+++ b/www/components/index_sections/BuiltWithSupabase.tsx
@@ -1,15 +1,22 @@
 import React from 'react'
 import ArticleThumb from './../ArticleThumb'
 import ProjectExamples from "./../../data/ProjectExamples.json"
+import SectionHeader from '../UI/SectionHeader'
 
 const BuiltExamples = () => {
   return (
     <React.Fragment>
-      <div className="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+      <div className="relative bg-gray-50 pt-16 pb-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8 sm:px-6 lg:px-16">
         <div className="absolute inset-0">
           <div className="bg-white h-1/3 sm:h-2/3"></div>
         </div>
-        <div className="relative max-w-7xl mx-auto">
+        <div className="mx-auto max-w-7xl">
+        <SectionHeader title={'What you can build'}
+        title_alt={' with Supabase'} 
+        subtitle={'Built with supabase'} 
+        />
+        </div>
+        {/* <div className="relative max-w-7xl mx-auto">
           <div>
             <small>Built with supabase</small>
             <h2 className="text-3xl tracking-tight text-gray-900 sm:text-4xl">
@@ -20,6 +27,8 @@ const BuiltExamples = () => {
               atque, ducimus sed.
             </p>
           </div>
+        </div> */}
+          <div className="relative max-w-7xl mx-auto">
           <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
             <ArticleThumb article={
               // @ts-ignore
diff --git a/www/components/index_sections/CodeExamples.tsx b/www/components/index_sections/CodeExamples.tsx
index bdf8489d907..c44c053ad17 100644
--- a/www/components/index_sections/CodeExamples.tsx
+++ b/www/components/index_sections/CodeExamples.tsx
@@ -31,7 +31,7 @@ const CodeExamples = () => {
         onClick={() => handleClick(id)}
         className={
           'm-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm' +
-          (example === id ? ' border-brand-100 bg-brand-100 text-brand' : ' hover:bg-gray-200')
+          (example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200')
         }
       >
         {
diff --git a/www/components/index_sections/MadeForDevelopers.tsx b/www/components/index_sections/MadeForDevelopers.tsx
index 2776a30cf55..c54c94bc5fe 100644
--- a/www/components/index_sections/MadeForDevelopers.tsx
+++ b/www/components/index_sections/MadeForDevelopers.tsx
@@ -1,3 +1,4 @@
+import SectionHeader from '../UI/SectionHeader'
 import Badge from './../badge'
 
 import CodeExamples from './CodeExamples'
@@ -6,17 +7,11 @@ const MadeForDevelopers = () => {
   return (
     <div className="py-16 bg-gray-50 overflow-hidden lg:py-24">
       <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
-        <div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
-          <div className="relative col-span-12 text-center">
-            <small>MADE FOR DEVELOPERS</small>
-            <h2 className="text-3xl tracking-tight leading-8 text-gray-900 sm:text-4xl">
-              Supafast easy-to-use APIs that do the hard work for you
-            </h2>
-            <p className="mt-4 max-w-3xl mx-auto text-xl text-gray-500">
-              We inspect your database and provide APIs instantly so you can stop building
-              repetitive CRUD endpoints and focus on your product.
-            </p>
-          </div>
+
+      <SectionHeader className="text-center" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />
+
+        <div className="relative lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
+
           <div className="mt-2 col-span-10 col-start-2">
             <CodeExamples />
 
diff --git a/www/components/layout.tsx b/www/components/layout.tsx
index 07679ce0618..8ef13c308d9 100644
--- a/www/components/layout.tsx
+++ b/www/components/layout.tsx
@@ -12,7 +12,7 @@ const Layout = ({ preview, children }: Props) => {
     <>
       <Meta />
       <Nav />
-      <div className="min-h-screen">
+      <div className="min-h-screen bg-gray-100">
         <main>{children}</main>
       </div>
       <Footer />
diff --git a/www/components/nav.tsx b/www/components/nav.tsx
index c8ce77d3ac7..e84701ab4aa 100644
--- a/www/components/nav.tsx
+++ b/www/components/nav.tsx
@@ -1,49 +1,163 @@
+import React, { useState, useLayoutEffect } from 'react'
 import Link from 'next/link'
 import FlyOut from './nav/FlyOut'
 
+import Solutions from './../data/Solutions.json'
+import Badge from './badge'
+import Transition from '../lib/Transition'
+
 const Nav = () => {
+  const [open, setOpen] = useState(false)
+
+  function toggleOpen() {
+    console.log('toggleOpen')
+    setOpen(!open)
+  }
+
+  React.useEffect(() => {
+    if(open) {
+      console.log('open if')
+        // Prevent scrolling on mount
+        document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [open]);
+  
+  const iconSections = Object.values(Solutions).map((solution) => {
+    const { name, description, icon, label, url } = solution
+
+    const content = (
+      <div className="mb-3 flex md:h-full lg:flex-col">
+        <div className="flex-shrink-0">
+          <div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
+            {/* <!-- Heroicon name: chart-bar --> */}
+            <svg
+              className="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
+            </svg>
+          </div>
+        </div>
+        <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
+          <div>
+            <p className="text-base font-medium text-gray-900">
+              {name} {label && <Badge>{label}</Badge>}
+            </p>
+            <p className="mt-1 text-sm text-gray-500">{description}</p>
+          </div>
+          {url && (
+            <p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
+              Learn more <span aria-hidden="true">&rarr;</span>
+            </p>
+          )}
+        </div>
+      </div>
+    )
+    return url ? (
+      <a
+        href="#"
+        className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
+      >
+        {content}
+      </a>
+    ) : (
+      <div className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150">
+        {content}
+      </div>
+    )
+  })
+
   return (
-    
-<nav className="bg-white shadow" style={{zIndex: 500}}>
-  <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-    <div className="relative flex justify-between h-16">
-      <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-        
-        <button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
-          <span className="sr-only">Open main menu</span>
-          
-          <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-          
-          <svg className="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-        <div className="flex-shrink-0 flex items-center">
-          <img className="block lg:hidden h-8 w-auto" src="https://supabase.io/supabase-light.svg" alt="Workflow" />
-          <img className="hidden lg:block h-8 w-auto" src="https://supabase.io/supabase-light.svg" alt="Workflow" />
-        </div>
-        <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-          <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-brand-500 text-sm font-medium text-gray-900">
-            Dashboard
-          </a>
-          <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
-            Team
-          </a>
-          <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
-            Projects
-          </a>
-          <a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
-            Calendar
-          </a>
-          <FlyOut/>
-        </div>
-      </div>
-      <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-        {/* <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
+    <nav className="bg-white shadow" style={{ zIndex: 500 }}>
+      <div className="max-w-7xl mx-auto">
+        <div className="relative flex justify-between h-16">
+          <div
+            className="absolute inset-y-0 left-0 flex items-center sm:hidden"
+            onClick={() => toggleOpen()}
+          >
+            <button
+              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+
+              <svg
+                className="block h-6 w-6"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+
+              <svg
+                className="hidden h-6 w-6"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+            <div className="flex-shrink-0 flex items-center">
+              <img
+                className="block lg:hidden h-8 w-auto"
+                src="https://supabase.io/supabase-light.svg"
+                alt="Workflow"
+              />
+              <img
+                className="hidden lg:block h-8 w-auto"
+                src="https://supabase.io/supabase-light.svg"
+                alt="Workflow"
+              />
+            </div>
+            <div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
+              <FlyOut />
+              <a
+                href="#"
+                className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              >
+                Developers
+              </a>
+              <a
+                href="#"
+                className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              >
+                Company
+              </a>
+              <a
+                href="#"
+                className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
+              >
+                Pricing
+              </a>
+            </div>
+          </div>
+          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+            {/* <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
           <span className="sr-only">View notifications</span>
           
           <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -51,8 +165,7 @@ const Nav = () => {
           </svg>
         </button> */}
 
-        
-        {/* <div className="ml-3 relative">
+            {/* <div className="ml-3 relative">
           <div>
             <button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500" id="user-menu" aria-haspopup="true">
               <span className="sr-only">Open user menu</span>
@@ -66,21 +179,170 @@ const Nav = () => {
             <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
           </div>
         </div> */}
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
 
-  <div className="lg:hidden">
-    <div className="pt-2 pb-4 space-y-1">
-      <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-brand-500 text-base font-medium text-brand-700 bg-brand-50">Dashboard</a>
-      <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Team</a>
-      <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Projects</a>
-      <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Calendar</a>
-    </div>
-  </div>
-</nav>
+      <Transition
+        appear={true}
+        show={open}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        
+          <div className="p-4 md:p-8 h-full h-screen fixed bg-white transform lg:hidden overflow-y-scroll -inset-y-0" style={{zIndex: 999}}>
+            {/* <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"> */}
+              <div className="absolute right-4 top-4 items-center justify-between">
+                <div className="-mr-2">
+                  <button
+                    onClick={() => toggleOpen()}
+                    type="button"
+                    className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
+                  >
+                    <span className="sr-only">Close menu</span>
 
+                    <svg
+                      className="h-6 w-6"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            {/* </div> */}
+            <div className="mt-6 mb-12">
+              <div className="pt-2 pb-4 space-y-1">
+                <a
+                  href="#"
+                  className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
+                >
+                  Product
+                </a>
+                <a
+                  href="#"
+                  className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
+                >
+                  Developers
+                </a>
+                <a
+                  href="#"
+                  className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
+                >
+                  Company
+                </a>
+                <a
+                  href="#"
+                  className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
+                >
+                  Pricing
+                </a>
+              </div>
+              <div className="p-3">
+                <p className="mb-6 text-sm text-gray-400">Products available:</p>
+                {iconSections}
+              </div>
+            </div>
+          </div>
+      </Transition>
+    </nav>
   )
 }
 
 export default Nav
+
+
+// <div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
+// <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
+//   <div className="px-5 pt-4 flex items-center justify-between">
+//     <div>
+//       <img
+//         className="h-8 w-auto"
+//         src="https://tailwindui.com/img/logos/workflow-mark-brand-600.svg"
+//         alt=""
+//       />
+//     </div>
+//     <div className="-mr-2">
+//       <button
+//         type="button"
+//         className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
+//       >
+//         <span className="sr-only">Close menu</span>
+
+//         <svg
+//           className="h-6 w-6"
+//           xmlns="http://www.w3.org/2000/svg"
+//           fill="none"
+//           viewBox="0 0 24 24"
+//           stroke="currentColor"
+//           aria-hidden="true"
+//         >
+//           <path
+//             strokeLinecap="round"
+//             strokeLinejoin="round"
+//             strokeWidth="2"
+//             d="M6 18L18 6M6 6l12 12"
+//           />
+//         </svg>
+//       </button>
+//     </div>
+//   </div>
+//   <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
+//     <div className="px-2 pt-2 pb-3 space-y-1" role="none">
+//       <a
+//         href="#"
+//         className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+//         role="menuitem"
+//       >
+//         Product
+//       </a>
+
+//       <a
+//         href="#"
+//         className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+//         role="menuitem"
+//       >
+//         Features
+//       </a>
+
+//       <a
+//         href="#"
+//         className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+//         role="menuitem"
+//       >
+//         Marketplace
+//       </a>
+
+//       <a
+//         href="#"
+//         className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+//         role="menuitem"
+//       >
+//         Company
+//       </a>
+//     </div>
+//     <div role="none">
+//       <a
+//         href="#"
+//         className="block w-full px-5 py-3 text-center font-medium text-brand-600 bg-gray-50 hover:bg-gray-100"
+//         role="menuitem"
+//       >
+//         Log in
+//       </a>
+//     </div>
+//   </div>
+// </div>
+// </div>
\ No newline at end of file
diff --git a/www/components/nav/FlyOut.js b/www/components/nav/FlyOut.js
index 1161868b858..912969a384b 100644
--- a/www/components/nav/FlyOut.js
+++ b/www/components/nav/FlyOut.js
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import Transition from '../../lib/Transition'
+import Badge from '../badge'
 
 import Solutions from './../../data/Solutions.json'
 
@@ -21,39 +22,51 @@ const FlyOut = () => {
   }, [])
 
   const iconSections = Object.values(Solutions).map((solution) => {
-    const { name, description, description_short, icon, label, url } = solution
-    return (
+    const { name, description, icon, label, url } = solution
+
+    const content = (
+      <div className="flex md:h-full lg:flex-col">
+        <div className="flex-shrink-0">
+          <div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
+            {/* <!-- Heroicon name: chart-bar --> */}
+            <svg
+              className="h-6 w-6"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
+            </svg>
+          </div>
+        </div>
+        <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
+          <div>
+            <p className="text-base font-medium text-gray-900">
+              {name} {label && <Badge>{label}</Badge>}
+            </p>
+            <p className="mt-1 text-sm text-gray-500">{description}</p>
+          </div>
+          {url && (
+            <p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
+              Learn more <span aria-hidden="true">&rarr;</span>
+            </p>
+          )}
+        </div>
+      </div>
+    )
+    return url ? (
       <a
         href="#"
         className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
       >
-        <div className="flex md:h-full lg:flex-col">
-          <div className="flex-shrink-0">
-            <div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
-              {/* <!-- Heroicon name: chart-bar --> */}
-              <svg
-                className="h-6 w-6"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
-              </svg>
-            </div>
-          </div>
-          <div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
-            <div>
-              <p className="text-base font-medium text-gray-900">{name}</p>
-              <p className="mt-1 text-sm text-gray-500">{description}</p>
-            </div>
-            <p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
-              Learn more <span aria-hidden="true">&rarr;</span>
-            </p>
-          </div>
-        </div>
+        {content}
       </a>
+    ) : (
+      <div className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150">
+        {content}
+      </div>
     )
   })
 
@@ -64,7 +77,7 @@ const FlyOut = () => {
         className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
         onClick={() => handleToggle()}
       >
-        <span>Solutions</span>
+        <span>Product</span>
         <svg
           className="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/www/data/Solutions.json b/www/data/Solutions.json
index e3872c10876..26cadf9e1e3 100644
--- a/www/data/Solutions.json
+++ b/www/data/Solutions.json
@@ -21,7 +21,7 @@
     "description": "Store, organize, and serve any amount of assets from anywhere. Any media, including videos of any size and format.",
     "description_short": "",
     "label": "Coming soon",
-    "url" : "https://supabase.io/docs"
+    "url" : ""
   },
   "functions": {
     "name": "Functions",
@@ -29,6 +29,6 @@
     "description": "Trigger backend code automatically with database events, without ever worrying about scaling a server.",
     "description_short": "",
     "label": "Coming soon Q1 2021",
-    "url" : "https://supabase.io/docs"
+    "url" : ""
   }
 }
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index b91bf060a34..69baeb16fa3 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -3,6 +3,22 @@ module.exports = {
   darkMode: 'media', // 'media' or 'class'
   theme: {
     extend: {
+      screens: {
+        'sm': '640px',
+        // => @media (min-width: 640px) { ... }
+  
+        'md': '768px',
+        // => @media (min-width: 768px) { ... }
+  
+        'lg': '1024px',
+        // => @media (min-width: 1024px) { ... }
+  
+        'xl': '1280px',
+        // => @media (min-width: 1280px) { ... }
+  
+        '2xl': '1536px',
+        // => @media (min-width: 1536px) { ... }
+      },
       colors: {
         'accent-1': '#FAFAFA',
         'accent-2': '#EAEAEA',