diff --git a/www/@types/environment.d.ts b/www/@types/environment.d.ts
new file mode 100644
index 00000000000..968e8d10979
--- /dev/null
+++ b/www/@types/environment.d.ts
@@ -0,0 +1,11 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      GA_PROPERTY_ID: string;
+    }
+  }
+}
+
+// If this file has no import/export statements (i.e. is a script)
+// convert it into a module by adding an empty export statement.
+export {}
\ No newline at end of file
diff --git a/www/components/AdminAccess/tabs.tsx b/www/components/AdminAccess/tabs.tsx
index 357b080cd05..c2040dbac2a 100644
--- a/www/components/AdminAccess/tabs.tsx
+++ b/www/components/AdminAccess/tabs.tsx
@@ -25,9 +25,9 @@ function Tabs(props: Props) {
               href="#"
               id="tabTableEditor"
               className={
-                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm' +
+                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 text-sm' +
                 (tabId === 'tabTableEditor'
-                  ? ' border-gray-500 dark:border-white text-gray-600 dark:text-white'
+                  ? ' border-gray-500 dark:border-white text-gray-600 font-medium dark:text-white'
                   : ' border-b border-gray-200 dark:border-dark-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200')
               }
               onClick={(event: any) => handleTabChange(event)}
@@ -38,9 +38,9 @@ function Tabs(props: Props) {
               href="#"
               id="tabSqlEditor"
               className={
-                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm' +
+                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 text-sm' +
                 (tabId === 'tabSqlEditor'
-                  ? ' border-gray-500 dark:border-white text-gray-600 dark:text-white'
+                  ? ' border-gray-500 dark:border-white text-gray-600 font-medium dark:text-white'
                   : ' border-b border-gray-200 dark:border-dark-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200')
               }
               onClick={(event: any) => handleTabChange(event)}
@@ -51,9 +51,9 @@ function Tabs(props: Props) {
               href="#"
               id="tabAuthRules"
               className={
-                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm' +
+                'transition w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 text-sm' +
                 (tabId === 'tabAuthRules'
-                  ? ' border-gray-500 dark:border-white text-gray-600 dark:text-white'
+                  ? ' border-gray-500 dark:border-white text-gray-600 font-medium dark:text-white'
                   : ' border-b border-gray-200 dark:border-dark-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200')
               }
               onClick={(event: any) => handleTabChange(event)}
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index 62c6dc00a7c..50d531775ee 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -15,6 +15,7 @@ const BuiltExamples = () => {
             title_alt={' with Supabase'} 
             subtitle={'Built with supabase'} 
           />
+          <p className="mt-3 text-base text-gray-500 dark:text-dark-400">See all examples on our <a className="text-brand-700" href="https://github.com/supabase">Github</a></p>
         </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">
diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index af429723587..684bab40f84 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -2,7 +2,7 @@ import Button from 'components/Button'
 
 const CTABanner = () => {
 	return (
-    <div className="py-32 grid grid-cols-12 gap-4 items-center text-center bg-dark-700 px-16">
+    <div className="py-32 grid grid-cols-12 gap-4 items-center text-center bg-dark-800 px-16">
       <div className="col-span-12">
         <h4 className="flex flex-col sm:flex-row sm:justify-center font-normal text-white text-2xl lg:text-3xl">
           <span className="block">Build in a weekend, scale to millions.</span>
diff --git a/www/components/Card.tsx b/www/components/Card.tsx
index 1868fa95c1a..3e94d4bd1fe 100644
--- a/www/components/Card.tsx
+++ b/www/components/Card.tsx
@@ -59,18 +59,18 @@ const Card = (props: Props) => {
       <div className="flex-shrink-0 dark:bg-dark-800">
         <img className="h-64 w-full object-cover" src={imgUrl} alt={title} />
       </div>
-      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-700">
+      <div className="flex-1 bg-white p-8 flex flex-col justify-between dark:bg-dark-700">
         <div className="flex-1">
           {/* {icons && (
             <div className="-mt-12 mb-6 flex -space-x-3">
               {iconMarkup}
             </div>
           )} */}
-          <p className="text-sm font-medium capitalize text-gray-600 dark:text-dark-300">{type}</p>
-          <div className="block mt-2">
+          <p className="text-sm font-base capitalize text-gray-600 dark:text-dark-300">{type}</p>
+          <div className="block mt-2 flex flex-col justify-between h-32">
             {/* {logoUrl && <img src={logoUrl} className="h-9 my-4" />} */}
             {title && <p className="text-xl text-gray-900 dark:text-white">{title}</p>}
-            <p className="mt-3 text-base text-gray-500 dark:text-dark-300">{description}</p>
+            <p className="mt-3 text-base text-gray-500 dark:text-dark-400">{type !== 'Project Example' ? postMeta.publishDate : description}</p>
           </div>
         </div>
         {type === 'Case Study' && postMeta.name.length > 0 && (
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index 658c9b8a576..87b77a00050 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -3,20 +3,20 @@ import Button from 'components/Button'
 const Benchmark = () => {
   return (
     <div className="mt-6 lg:mt-16 max-w-lg mx-auto lg:max-w-none lg:mx-0">
-      <div className="bg-white grid gap-4 items-center rounded-md grid-cols-1 lg:grid-cols-12 overflow-auto dark:bg-dark-800 shadow-lg">
+      <div className="grid gap-4 items-center rounded-md grid-cols-1 lg:grid-cols-12 overflow-auto bg-dark-800 shadow-lg">
         <div className="col-span-1 lg:col-span-10 flex items-center flex-col lg:flex-row">
           <img className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 hidden lg:block" src="images/benchmark.svg" />
           <img className="mb-10 w-full lg:w-auto lg:mb-0 lg:h-44 lg:mr-14 lg:hidden" src="images/benchmark--mobile.svg" />
           <div className="px-12 py-5 lg:px-0 lg:py-0">
-            <p className="text-xl dark:text-white">Record breaking speed and reliability</p>
-            <p className="text-gray-700 dark:text-dark-300 mt-2">
+            <p className="text-xl text-white">Record breaking speed and reliability</p>
+            <p className="text-dark-300 mt-2">
               <span className="block">Supabase is already enterprise level and we’re blown away by the speed!</span>
               <span className="block">Sign up for our public benchmark release and we’ll email it to you</span>
             </p>
           </div>
         </div>
         <div className="pb-12 px-12 col-span-1 lg:pb-0 lg:px-0 lg:col-span-2 rounded-r-md">
-          <Button text="Get notified" url="#"/>
+          <Button text="Get notified" url="https://mailchi.mp/supabase/enterprise-benchmarks"/>
         </div>
       </div>
     </div>
diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index 82f6a51f52a..a848265e4b0 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -27,14 +27,14 @@ const Features = () => {
         <div className="mt-5">
           <dd className="mt-2 text-base text-gray-500 dark:text-dark-100">{description}</dd>
         </div>
-        {url && <Button className="mt-5" type="secondary" text="Learn more" url="#" />}
+        {url && <Button className="mt-5" type="secondary" text="Learn more" url={url} />}
         {label && <Badge className="mt-5">{label}</Badge>}
       </div>
     )
   })
 
   return (
-    <div className="bg-gray-50 dark:bg-dark-600 overflow-hidden py-12">
+    <div className="bg-gray-50 dark:bg-dark-700 overflow-hidden py-12">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto max-w-7xl">
           <SectionHeader
diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index 39a0faf460e..b74ab96075b 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -15,11 +15,7 @@ const Footer = (props: Props) => {
   }
 
   const SunEmoji = () => (
-    <svg
-      width="32"
-      height="32"
-      fill="none"
-    >
+    <svg width="32" height="32" fill="none">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -28,18 +24,15 @@ const Footer = (props: Props) => {
       />
       <defs>
         <linearGradient
-          id="paint0_linear" x1="2" y1="2" x2="30" y2="30"
+          id="paint0_linear"
+          x1="2"
+          y1="2"
+          x2="30"
+          y2="30"
           gradientUnits="userSpaceOnUse"
         >
-          <stop
-            className="transition-all duration-200"
-            stopColor="#FACC15"
-          />
-          <stop
-            className="transition-all duration-200"
-            offset="1"
-            stopColor="#FA9D16"
-          />
+          <stop className="transition-all duration-200" stopColor="#bbbbbb" />
+          <stop className="transition-all duration-200" offset="1" stopColor="#bbbbbb" />
         </linearGradient>
       </defs>
     </svg>
@@ -61,7 +54,7 @@ const Footer = (props: Props) => {
   )
 
   return (
-    <footer className="bg-white dark:bg-dark-600" aria-labelledby="footerHeading">
+    <footer className="bg-white dark:bg-dark-700" aria-labelledby="footerHeading">
       <h2 id="footerHeading" className="sr-only">
         Footer
       </h2>
@@ -101,7 +94,7 @@ const Footer = (props: Props) => {
               {FooterLinks.map((segment: any) => {
                 return (
                   <div key={`footer_${segment.title}`}>
-                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-300 tracking-wider uppercase">
+                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-400 tracking-wider uppercase">
                       {segment.title}
                     </h3>
                     <ul className="mt-4 space-y-4">
@@ -131,8 +124,8 @@ const Footer = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="mt-12 border-t border-gray-200 dark:border-dark-300 pt-8 flex justify-between">
-          <p className="text-base text-gray-400 dark:text-dark-300">&copy; Supabase Inc</p>
+        <div className="mt-12 border-t border-gray-200 dark:border-dark-600 pt-8 flex justify-between">
+          <p className="text-base text-gray-400 dark:text-dark-400">&copy; Supabase Inc</p>
           <div className="flex items-center">
             <SunEmoji />
             <button
@@ -140,8 +133,7 @@ const Footer = (props: Props) => {
               aria-pressed="false"
               className={`
                 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer 
-                transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 
-                focus:ring-brand-500 ${darkMode ? 'bg-dark-300' : 'bg-gray-200'} mx-5
+                transition-colors ease-in-out duration-200 focus:outline-none ${darkMode ? 'bg-dark-500' : 'bg-gray-200'} mx-5
               `}
               onClick={() => toggleDarkMode()}
             >
@@ -150,7 +142,7 @@ const Footer = (props: Props) => {
                 aria-hidden="true"
                 className={`
                   ${darkMode ? 'translate-x-5' : 'translate-x-0'} inline-block h-5 w-5 rounded-full
-                  bg-white shadow-lg transform ring-0 transition ease-in-out duration-200
+                  bg-white dark:bg-dark-700 shadow-lg transform ring-0 transition ease-in-out duration-200
                 `}
               />
             </button>
diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index b09a6753d47..c55d4f759a3 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -3,7 +3,7 @@ import Button from 'components/Button'
 
 const Hero = () => {
   return (
-    <div className="relative bg-dark-700 overflow-hidden">
+    <div className="relative bg-dark-800 overflow-hidden">
       <div className="container mx-auto px-8 sm:px-16 xl:px-20">
         <div className="mx-auto max-w-7xl">
           <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
@@ -30,65 +30,76 @@ const Hero = () => {
             </svg>
           </div>
           <div className="relative pt-6 pb-16 sm:pb-24">
-          <main className="mt-16 sm:mt-24">
-            <div className="mx-auto">
-              <div className="lg:grid lg:grid-cols-12 lg:gap-16">
-                <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 className="sm:mx-auto md:w-3/4 lg:w-full lg:mx-0">
-                    <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-600 ml-2 md:ml-0 md:block">Firebase Alternative</span>
-                    </h1>
-                    <p className="mt-5 text-base text-dark-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
-                      Create your new project backend in less than 2 minutes with easy to use Postgres Database and Authentication.
-                    </p>
-                    <p className="mt-3 text-base text-dark-400">
-                      Storage and serverless functions coming soon
-                    </p>
-
-                    <Button className="mt-10 py-3" text="Start your project" url="#"/>
-
-                    <p className="mt-8 text-sm text-dark-400 tracking-wide sm:mt-10">
-                      backed by
-                    </p>
-                    <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
-                      <div className="flex flex-wrap items-center sm:justify-center lg:justify-start">
-                        <img className="h-8 sm:h-10 pr-10" src="images/logos/yc--grey.png" alt="Y Combinator" />
-                        <img className="relative -top-1 h-5 sm:h-7 pr-10" src="images/logos/mozilla--grey.png" alt="Mozilla" />
-                        <img className="h-3 sm:h-5 pr-10" src="images/logos/coatue.png" alt="Coatue" />
+            <main className="mt-16 sm:mt-24">
+              <div className="mx-auto">
+                <div className="lg:grid lg:grid-cols-12 lg:gap-16">
+                  <div className="md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
+                    <div className="sm:mx-auto md:w-3/4 lg:w-full lg:mx-0">
+                      <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="block">The Open Source</span>
+                        <span className="text-brand-600 md:ml-0 block">Firebase Alternative</span>
+                      </h1>
+                      <p className="mt-5 text-base text-dark-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                        Create your new project backend in less than 2 minutes with easy to use
+                        Postgres Database and Authentication.
+                      </p>
+                      <p className="mt-3 text-base text-dark-400">
+                        Storage and serverless functions coming soon
+                      </p>
+                      <Button
+                        className="mt-10 py-3"
+                        text="Start your project"
+                        url="https://app.supabase.io?auth=signup"
+                      />
+                      <p className="mt-8 text-sm text-dark-400 tracking-wide sm:mt-10">backed by</p>
+                      <div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0">
+                        <div className="flex flex-wrap items-center lg:justify-start">
+                          <img
+                            className="h-8 sm:h-10 pr-10"
+                            src="images/logos/yc--grey.png"
+                            alt="Y Combinator"
+                          />
+                          <img
+                            className="relative -top-1 h-5 sm:h-7 pr-10"
+                            src="images/logos/mozilla--grey.png"
+                            alt="Mozilla"
+                          />
+                          <img
+                            className="h-3 sm:h-5 pr-10"
+                            src="images/logos/coatue.png"
+                            alt="Coatue"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
-
-                </div>
-                <div className="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
-                  <div className="shadow-lg relative w-full rounded-md">
-                    <div className="w-full rounded-t-md h-5 bg-dark-400 flex items-center justify-start px-2">
-                      <div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
-                      <div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
-                      <div className="h-2 w-2 mr-2 rounded-full bg-dark-500"/>
-                    </div>
-                    <div className="relative bg-red" style={{ padding: '56.25% 0 0 0' }}>
-                      <iframe
-                        className="absolute w-full h-full rounded-b-md"
-                        src="https://www.youtube.com/embed/dBOSUER_5T4?playlist=dBOSUER_5T4&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&disablekb=1&mute=1&muted=1"
-                        style={{ top: 0, left: 0 }}
-                        frameBorder="0"
-                        allow="autoplay"
-                      />
-                    </div>
-                    {/* 
+                  <div className="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
+                    <div className="shadow-lg relative w-full rounded-md">
+                      <div className="w-full rounded-t-md h-5 bg-dark-400 flex items-center justify-start px-2">
+                        <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
+                        <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
+                        <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
+                      </div>
+                      <div className="relative bg-red" style={{ padding: '56.25% 0 0 0' }}>
+                        <iframe
+                          className="absolute w-full h-full rounded-b-md"
+                          src="https://www.youtube.com/embed/dBOSUER_5T4?playlist=dBOSUER_5T4&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&disablekb=1&mute=1&muted=1"
+                          style={{ top: 0, left: 0 }}
+                          frameBorder="0"
+                          allow="autoplay"
+                        />
+                      </div>
+                      {/* 
                       Replace src with the following if have preference:
                       Vimeo:   https://player.vimeo.com/video/485959063?loop=1&autoplay=1
                       Youtube: https://www.youtube.com/embed/dBOSUER_5T4?playlist=dBOSUER_5T4&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&disablekb=1&mute=1&muted=1
                      */}
+                    </div>
                   </div>
-                </div>        
+                </div>
               </div>
-            </div>
-          </main>
-        </div>
+            </main>
+          </div>
         </div>
       </div>
     </div>
diff --git a/www/components/MadeForDevelopers/CodeExamples.tsx b/www/components/MadeForDevelopers/CodeExamples.tsx
index 56a20bf03af..7268c442793 100644
--- a/www/components/MadeForDevelopers/CodeExamples.tsx
+++ b/www/components/MadeForDevelopers/CodeExamples.tsx
@@ -40,10 +40,10 @@ const CopiedIcon = () => (
 )
 
 const CodeExamples = () => {
-  const [example, setExample] = useState('subscribeExample')
+  const [example, setExample] = useState('createUserExample')
   const [copied, setCopied] = useState(false)
 
-  const exampleList = ['subscribeExample', 'readExample', 'createExample', 'updateExample']
+  const exampleList = ['createUserExample', 'subscribeExample', 'readExample', 'createExample', 'updateExample']
 
   const lang = 'javascript'
 
@@ -59,7 +59,7 @@ const CodeExamples = () => {
         key={id + "-button"}
         onClick={() => handleClick(id)}
         className={`
-          m-1 mb-4 rounded-md border border-gray-200 dark:border-dark-200 px-4 py-2 text-xs font-medium text-gray transition
+          mb-2 rounded-md border border-gray-200 dark:border-dark-200 px-4 py-2 text-xs font-medium text-gray transition
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:text-sm sm:w-auto
           ${example === id ? ' border-gray-900 bg-dark-600 dark:bg-white text-white dark:text-dark-600' : ' hover:bg-gray-200 dark:hover:text-black'}
           dark:text-white lg:w-full
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 1ce3e8bbcd0..8adde221ac5 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -8,15 +8,15 @@ import DeveloperFeatures from 'data/DeveloperFeatures.json'
 const MadeForDevelopers = () => {
   return (
     <div className="py-16 bg-gray-50 dark:bg-dark-600 overflow-hidden lg:py-16">
-      <div className="container mx-auto px-8 sm:px-16  xl:px-20">
-        
+      <div className="container mx-auto px-8 sm:px-16 xl:px-20">
+      <div className="mx-auto max-w-7xl">
         <div className="grid grid-cols-12">
-          <div className="col-span-12 lg:col-span-9 xl:col-span-7">
+          <div className="col-span-12 lg:col-span-12 xl:col-span-12">
             <SectionHeader              
               title={'Instant 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.'}
+              paragraph={`We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product`}
             />
           </div>
         </div>
@@ -28,11 +28,11 @@ const MadeForDevelopers = () => {
             <CodeExamples />
 
             <div className="grid grid-cols-12 gap-2">
-              <dl className="mt-12 grid-cols-12 grid col-span-12 sm:gap-4 lg:gap-8 lg:space-y-0">
+              <dl className="mt-12 grid-cols-12 grid col-span-12 sm:gap-4 md:gap-8 lg:gap-8 lg:space-y-0">
 
                 {DeveloperFeatures.map((feature: any, idx: number) => {
                   const blockClass = idx !== DeveloperFeatures.length - 1
-                    ? 'col-span-12 mb-10 sm:mb-0 sm:col-span-3 sm:border-r-2 sm:border-gray-200 sm:pr-4 md:pr-6 dark:border-dark-500'
+                    ? 'col-span-12 mb-10 sm:mb-0 sm:col-span-3 md:col-span-6 mb-12 lg:col-span-3 sm:border-gray-200 sm:pr-4 md:pr-6 lg:border-r-2 dark:border-dark-500 even:rotate-45'
                     : 'col-span-12 sm:col-span-3'
 
                   return (
@@ -52,7 +52,7 @@ const MadeForDevelopers = () => {
                 })}
               </dl>
             </div>
-
+            </div>
           </div>
         </div>
       </div>
diff --git a/www/components/Nav/FlyOut.tsx b/www/components/Nav/FlyOut.tsx
index fbeacfc2de5..9fb2c2b806b 100644
--- a/www/components/Nav/FlyOut.tsx
+++ b/www/components/Nav/FlyOut.tsx
@@ -44,7 +44,7 @@ const FlyOut = () => {
             <p className="text-base font-medium text-gray-900 dark:text-white">
               {name} {label && <Badge className="ml-3">{label}</Badge>}
             </p>
-            <p className="mt-1 text-sm text-gray-500 dark:text-dark-100">
+            <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">
               {description}
             </p>
           </div>
@@ -60,7 +60,7 @@ const FlyOut = () => {
       <a
         key={name}
         href="#"
-        className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 dark:hover:bg-dark-300 transition ease-in-out duration-150"
+        className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 dark:hover:bg-dark-700 transition ease-in-out duration-150"
       >
         {content}
       </a>
@@ -105,7 +105,7 @@ const FlyOut = () => {
       >
         <>
           <div
-            className="absolute inset-x-0 transform shadow-lg border-t-2 border-gray-50 dark:border-dark-200"
+            className="absolute inset-x-0 transform shadow-lg border-t border-gray-50 dark:border-dark-500"
             style={{
               zIndex: 999,
               position: 'absolute',
@@ -130,7 +130,7 @@ const FlyOut = () => {
               </nav>
               <div className="px-4 py-8 sm:py-12 sm:px-6 lg:px-8 xl:pl-12">
                 <div>
-                  <h3 className="text-sm font-medium tracking-wide text-gray-500 dark:text-dark-100 uppercase">
+                  <h3 className="text-sm font-medium tracking-wide text-gray-500 dark:text-dark-300 uppercase">
                     Latest news
                   </h3>
                   <ul className="mt-6 space-y-6">
@@ -138,7 +138,7 @@ const FlyOut = () => {
                       <li className="flow-root" key={`flyout_case_${idx}`}>
                         <a
                           href={caseStudy.url}
-                          className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
+                          className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
                         >
                           <div className="hidden sm:block flex-shrink-0">
                             <img
@@ -151,7 +151,7 @@ const FlyOut = () => {
                             <h4 className="text-base font-medium text-gray-900 dark:text-white truncate">
                               {caseStudy.title}
                             </h4>
-                            <p className="mt-1 text-sm text-gray-500 dark:text-dark-100">
+                            <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">
                               {caseStudy.description}
                             </p>
                           </div>
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 2a26836ef7d..2fbcb315bab 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -30,7 +30,7 @@ const Nav = (props: Props) => {
     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">
+          <div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-dark-800 text-white sm:h-12 sm:w-12">
             {/* <!-- Heroicon name: chart-bar --> */}
             <svg
               className="h-6 w-6"
diff --git a/www/components/UI/SectionHeader.tsx b/www/components/UI/SectionHeader.tsx
index f23ea8847c3..f3bc30a9fe8 100644
--- a/www/components/UI/SectionHeader.tsx
+++ b/www/components/UI/SectionHeader.tsx
@@ -1,17 +1,17 @@
 const SectionHeader = (props :any) => {
   return (
     <div className={'grid grid-cols-12 gap-1 sm:gap-8 ' + props.className}>
-      <div className="relative py-12 col-span-12">
-        <span className="block mb-6 text-sm tracking-widest uppercase text-gray-300 font-mono dark:text-gray-300">
+      <div className="relative grid py-12 col-span-12 grid-cols-12">
+        <span className="col-span-12 block mb-6 text-sm tracking-widest uppercase text-gray-300 font-mono dark:text-gray-300">
           {props.subtitle}
         </span>
-        <h2 className="text-black dark:text-white text-3xl md:text-4xl lg:text-5xl">
+        <h2 className="col-span-12 text-black dark:text-white text-3xl md:text-4xl lg:text-5xl">
           {props.title}
           {props.title_alt && (
             <span className="text-gray-400 dark:text-gray-300 inline">{props.title_alt}</span>
           )}
         </h2>
-        <div>
+        <div className="col-span-12 lg:col-span-7">
           {props.paragraph && (
             <p className="mt-3 mx-auto text-xl text-gray-400 dark:text-gray-300 sm:mt-4">
               {props.paragraph}
diff --git a/www/data/AdminAccess.json b/www/data/AdminAccess.json
index 0dbd2c4ac4b..ebd2bb219e6 100644
--- a/www/data/AdminAccess.json
+++ b/www/data/AdminAccess.json
@@ -3,18 +3,18 @@
     "header": "Manage your data with the familiarity of a spreadsheet",
     "description": "You don’t have to be a database expert to start using Supabase — Our table editor makes Postgres easy to use even for non-techies, and you can do everything right in our dashboard.",
     "cta": "Explore Table View",
-    "url": "#"
+    "url": "/docs/guides/platform"
   },
   "tabSqlEditor": {
     "header": "In-built SQL editor for when you need greater control",
     "description": "Write, save, and execute SQL queries directly on our dashboard, with templates to help you save time from common queries and even build applications.",
     "cta": "Explore SQL Editor",
-    "url": "#"
+    "url": "/docs/guides/platform"
   },
   "tabAuthRules": {
     "header": "User management as straight-forward as it can be",
     "description": "Easily manage your users via our authentication, or integrate third party logins. Create policies with complex SQL rules which fit your unique business needs.",
     "cta": "Explore Auth Policies",
-    "url": "#"
+    "url": "/docs/guides/auth"
   }
 }
\ No newline at end of file
diff --git a/www/data/BetaPage.js b/www/data/BetaPage.js
index 614d134c678..9832a8c5e74 100644
--- a/www/data/BetaPage.js
+++ b/www/data/BetaPage.js
@@ -48,11 +48,11 @@ export const AlphaNumbers = [
         width="24"
         height="24"
         stroke="white"
-        stroke-width="2"
+        strokeWidth="2"
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
-        Class="css-i6dzq1"
+        className="css-i6dzq1"
       >
         <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
         <polyline points="22 4 12 14.01 9 11.01" />
@@ -115,7 +115,7 @@ export const AlphaNumbers = [
         width="24"
         height="24"
         stroke="white"
-        stroke-width="2"
+        strokeWidth="2"
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/www/data/CaseStudies.json b/www/data/CaseStudies.json
index 9cc1ccbd677..4a6d648f1df 100644
--- a/www/data/CaseStudies.json
+++ b/www/data/CaseStudies.json
@@ -6,7 +6,7 @@
     "imgUrl": "images/case-study-monitoro.jpg",
     "logoUrl": "images/logos/monitoro.png",
     "organization": "Monitoro",
-    "url": "https://supabase.io/casestudies/monitoro",
+    "url": "/casestudies/monitoro",
     "postMeta": {
       "name" : "Paul Copplestone",
       "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
@@ -22,7 +22,7 @@
     "imgUrl": "images/case-study-tayfab.jpg",
     "logoUrl": "images/logos/monitoro.png",
     "organization": "Tayfab",
-    "url": "https://supabase.io/casestudies/monitoro",
+    "url": "/casestudies/monitoro",
     "postMeta": {
       "name" : "Paul Copplestone",
       "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
@@ -38,7 +38,7 @@
     "imgUrl": "images/case-study-xendit.jpg",
     "logoUrl": "images/logos/xendit.png",
     "organization": "Llama Lab",
-    "url": "https://supabase.io/casestudies/monitoro",
+    "url": "/casestudies/monitoro",
     "postMeta": {
       "name" : "Paul Copplestone",
       "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
diff --git a/www/data/CodeExamples.js b/www/data/CodeExamples.js
index 86d4b739968..6c28c8c7760 100644
--- a/www/data/CodeExamples.js
+++ b/www/data/CodeExamples.js
@@ -119,6 +119,26 @@ const umdExample = `
 `
 
 export const examples = {
+  createUserExample: {
+    name: 'Create user',
+    description: 'Sign up a new user in an example chat rooom',
+    code: {
+      javascript: `
+  import { createClient } from '@supabase/supabase-js'
+  
+  // Initialize 
+  const supabaseUrl = 'https://chat-room.supabase.co'
+  const supabaseKey = 'public-anon-key'
+  const supabase = createClient(supabaseUrl, supabaseKey)
+  
+  // Create a new user
+  const { user, error } = await supabase.auth.signUp({
+    email: 'example@email.com',
+    password: 'example-password',
+  })
+  `,
+    },
+  },
   subscribeExample: {
     name: 'Realtime subscriptions',
     description: 'Receive realtime messages in an example chat room',
diff --git a/www/data/DeveloperFeatures.json b/www/data/DeveloperFeatures.json
index 55d3a6355a7..4ea8844ce5a 100644
--- a/www/data/DeveloperFeatures.json
+++ b/www/data/DeveloperFeatures.json
@@ -3,24 +3,24 @@
     "name": "Typescript Support",
     "description": "Type definitions for both server side and client side",
     "badge": null,
-    "url": "#"
+    "url": "/docs/client/generating-types/"
   },
   {
     "name": "Install from CDN",
     "description": "Use Supabase in the browser without a build process",
     "badge": null,
-    "url": "#"
+    "url": "/docs/client/initializing"
   },
   {
     "name": "Local emulator",
     "description": "Develop locally and push to production when you're ready",
     "badge": "Q1 2020",
-    "url": "#"
+    "url": "https://mailchi.mp/supabase/local-emulator"
   },
   {
     "name": "Supabase CLI",
     "description": "Manage your Supabase projects from your local machine",
     "badge": "Q2 2020",
-    "url": "#"
+    "url": "https://mailchi.mp/supabase/command-line"
   }
 ]
\ No newline at end of file
diff --git a/www/data/Footer.json b/www/data/Footer.json
index d40957def45..d13f2274d82 100644
--- a/www/data/Footer.json
+++ b/www/data/Footer.json
@@ -4,11 +4,11 @@
     "links": [
       {
         "text": "Database",
-        "url": "#"
+        "url": "/docs/guides/database"
       },
       {
         "text": "Authentication",
-        "url": "#"
+        "url": "/docs/guides/auth"
       },
       {
         "text": "Storage",
@@ -20,7 +20,7 @@
       },
       {
         "text": "Pricing",
-        "url": "#"
+        "url": "/docs/pricing"
       }
     ]
   },
@@ -29,19 +29,19 @@
     "links": [
       {
         "text": "Support",
-        "url": "#"
-      },
-      {
-        "text": "Contact",
-        "url": "#"
+        "url": "/docs/support"
       },
       {
         "text": "Case Studies",
-        "url": "#"
+        "url": "/case-studies"
       },
       {
-        "text": "Privacy & Terms",
-        "url": "#"
+        "text": "System Status",
+        "url": "https://status.supabase.io/"
+      },
+      {
+        "text": "Terms of service",
+        "url": "/docs/company/terms/"
       }
     ]
   },
@@ -50,15 +50,15 @@
     "links": [
       {
         "text": "Documentation",
-        "url": "#"
+        "url": "/docs"
       },
       {
         "text": "API Reference",
-        "url": "#"
+        "url": "/docs/client/supabase-client"
       },
       {
         "text": "Guides",
-        "url": "#"
+        "url": "/docs/guides/examples"
       }
     ]
   },
@@ -67,19 +67,19 @@
     "links": [
       {
         "text": "Blog",
-        "url": "#"
+        "url": "/blog"
       },
       {
         "text": "Open Source",
-        "url": "#"
+        "url": "/oss"
       },
       {
         "text": "Humans.txt",
-        "url": "#"
+        "url": "/humans.txt"
       },
       {
         "text": "Lawyers.txt",
-        "url": "#"
+        "url": "/lawyers.txt"
       }
     ]
   }
diff --git a/www/data/Solutions.json b/www/data/Solutions.json
index de1e2c4a87b..084fa530cb1 100644
--- a/www/data/Solutions.json
+++ b/www/data/Solutions.json
@@ -5,7 +5,7 @@
     "description": "Built with Postgres, the world's most trusted and versatile relational database.",
     "description_short": "",
     "label": "",
-    "url" : "https://supabase.io/docs"
+    "url" : "/docs/guides/database"
   },
   "authentication": {
     "name": "Authentication",
@@ -13,7 +13,7 @@
     "description": "Add user sign ups and logins, securing your data with Row Level Security.",
     "description_short": "",
     "label": "",
-    "url" : "https://supabase.io/docs"
+    "url" : "/docs/guides/auth"
   },
   "storage": {
     "name": "Storage",
@@ -21,7 +21,7 @@
     "description": "Store, organize, and serve large files. Any media, including videos and images.",
     "description_short": "",
     "label": "Coming soon",
-    "url" : ""
+    "url" : "https://mailchi.mp/supabase/storage"
   },
   "functions": {
     "name": "Functions",
@@ -29,6 +29,6 @@
     "description": "Write custom code without worrying about deploying servers.",
     "description_short": "",
     "label": "Coming soon",
-    "url" : ""
+    "url" : "https://mailchi.mp/supabase/functions"
   }
 }
diff --git a/www/package-lock.json b/www/package-lock.json
index fea13b96fa1..b44a3122835 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -765,6 +765,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -774,6 +775,7 @@
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
           "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "optional": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -787,12 +789,14 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "optional": true
         },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "optional": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -1041,6 +1045,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz",
       "integrity": "sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==",
+      "optional": true,
       "requires": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -1389,7 +1394,8 @@
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "optional": true
     },
     "collapse-white-space": {
       "version": "1.0.6",
@@ -1522,7 +1528,8 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -2042,7 +2049,8 @@
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -2069,7 +2077,8 @@
     "detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+      "optional": true
     },
     "detective": {
       "version": "5.2.0",
@@ -2715,7 +2724,8 @@
     "fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "optional": true
     },
     "fs-extra": {
       "version": "9.0.1",
@@ -2790,6 +2800,7 @@
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -2804,12 +2815,14 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "optional": true
         },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2895,7 +2908,8 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -3281,6 +3295,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
       "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "optional": true,
       "requires": {
         "number-is-nan": "^1.0.0"
       }
@@ -3955,7 +3970,8 @@
     "mkdirp-classic": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "optional": true
     },
     "modern-normalize": {
       "version": "1.0.0",
@@ -4271,6 +4287,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -4287,7 +4304,8 @@
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "optional": true
     },
     "object-assign": {
       "version": "4.1.1",
@@ -5552,6 +5570,12 @@
         }
       }
     },
+    "prettier": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
+      "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
+      "dev": true
+    },
     "pretty-format": {
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
@@ -5816,6 +5840,11 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-ga": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz",
+      "integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6352,7 +6381,8 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "optional": true
     },
     "set-value": {
       "version": "2.0.1",
@@ -6409,12 +6439,14 @@
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "optional": true
     },
     "simple-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
-      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "optional": true
     },
     "simple-get": {
       "version": "4.0.0",
@@ -6755,6 +6787,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
       "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "optional": true,
       "requires": {
         "code-point-at": "^1.0.0",
         "is-fullwidth-code-point": "^1.0.0",
@@ -6764,12 +6797,14 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "optional": true
         },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6975,6 +7010,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
       "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "optional": true,
       "requires": {
         "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",
@@ -6986,6 +7022,7 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.4.tgz",
       "integrity": "sha512-o3pS2zlG4gxr67GmFYBLlq+dM8gyRGUOvsrHclSkvtVtQbjV0s/+ZE8OpICbaj8clrX3tjeHngYGP7rweaBnuw==",
+      "optional": true,
       "requires": {
         "bl": "^4.0.3",
         "end-of-stream": "^1.4.1",
@@ -7284,6 +7321,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "optional": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -7713,6 +7751,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -7727,6 +7766,7 @@
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -7760,7 +7800,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "optional": true
         },
         "string_decoder": {
           "version": "1.1.1",
@@ -7888,6 +7929,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
diff --git a/www/package.json b/www/package.json
index 8988fd71c67..ce2e9a92f3a 100644
--- a/www/package.json
+++ b/www/package.json
@@ -8,7 +8,8 @@
     "build": "next build",
     "export": "next export",
     "start": "next start",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "prettier": "prettier --write \"./{pages,components,lib,stores,styles,tests}/**/*.{ts,tsx,md,js,jsx,json}\""
   },
   "dependencies": {
     "@types/recharts": "^1.8.17",
@@ -19,6 +20,7 @@
     "react": "^16.13.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.0",
+    "react-ga": "^3.3.0",
     "react-syntax-highlighter": "^15.3.1",
     "react-transition-group": "^4.4.1",
     "recharts": "^1.8.5",
@@ -36,6 +38,7 @@
     "@types/react-syntax-highlighter": "^13.5.0",
     "file-loader": "^6.2.0",
     "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.2.1",
     "tailwindcss": "^2.0.1"
   },
   "license": "MIT"
diff --git a/www/pages/_document.tsx b/www/pages/_document.tsx
index 12c70a83dda..351627cbf0b 100644
--- a/www/pages/_document.tsx
+++ b/www/pages/_document.tsx
@@ -1,6 +1,12 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import ReactGA from 'react-ga'
 
 export default class MyDocument extends Document {
+  componentDidMount() {
+    ReactGA.initialize(process.env.GA_PROPERTY_ID)
+    ReactGA.pageview(window.location.pathname + window.location.search)
+  }
+
   render() {
     return (
       <Html lang="en" className="dark">
diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx
index 9d29ba30d56..2a4ab1c1467 100644
--- a/www/pages/beta.tsx
+++ b/www/pages/beta.tsx
@@ -97,23 +97,24 @@ const Performance = () => {
   const readColors = ["#38BC81", "red"]
   const writeColors = ["#65D9A5", "pink"]
 
-  type labelProps = {
-    x?: any,
-    y?: any,
-    width?: any,
-    height?: any,
-    text?: string,
-  }
-
-  const renderCustomizedLabel = (props: labelProps) => {
-    const { x, y, width, text } = props;
-    const radius = 10;
-  
+  function renderCustomizedLabel(props: any): any {
+    const {  width, text } = props
+    const radius = 10
+    
+    let x: number = props.x + width / 2
+    let y: number = props.y - radius
     return (
-      <text x={x + width / 2} y={y - radius} fill="#000" textAnchor="middle" dominantBaseline="middle" fontSize={14}>
+      <text
+        x={x}
+        y={y}
+        fill="#000"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fontSize={14}
+      >
         {text}
       </text>
-    );
+    )
   };
 
   // Documentation on recharts:
@@ -133,7 +134,7 @@ const Performance = () => {
         </YAxis>
         <Tooltip cursor={{ fill: 'rgba(0, 0, 0, 0.05)'}} />
         <Bar dataKey="read" name="Read" barSize={20} unit=" requests/s">
-          {PerformanceComparisonData.map((entry: any, idx: number) =>(
+          {PerformanceComparisonData.map((entry: any, idx: number) => (
             <Cell key={`cell_${idx}`} fill={readColors[idx]} />
           ))}
           {/* @ts-ignore */}
@@ -145,7 +146,7 @@ const Performance = () => {
           />
         </Bar>
         <Bar dataKey="write" name="Write" barSize={20} unit=" requests/s">
-          {PerformanceComparisonData.map((entry: any, idx: number) =>(
+          {PerformanceComparisonData.map((entry: any, idx: number) => (
             <Cell key={`cell_${idx}`} fill={writeColors[idx]} />
           ))}
           {/* @ts-ignore */}
diff --git a/www/public/images/benchmark--mobile.svg b/www/public/images/benchmark--mobile.svg
index 026ae821c01..0e489eb30ed 100644
--- a/www/public/images/benchmark--mobile.svg
+++ b/www/public/images/benchmark--mobile.svg
@@ -1,6 +1,6 @@
 <svg width="403" height="157" viewBox="0 0 403 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="402" height="147" fill="#424242" stroke="#363636"/>
-<path d="M403 0C351.162 122.629 133.776 151.62 0 131.086V156.5H403V0Z" fill="#3A3A3A"/>
+<rect x="0.5" y="0.5" width="402" height="147" fill="#202020" stroke="#363636"/>
+<path d="M403 0C351.162 122.629 133.776 151.62 0 131.086V156.5H403V0Z" fill="#181818"/>
 <path d="M328 81L328 148" stroke="url(#paint0_linear)"/>
 <path d="M316 80L148 80" stroke="#747474" stroke-linecap="round"/>
 <path d="M217 123L217 148" stroke="url(#paint1_linear)"/>
diff --git a/www/public/images/benchmark.svg b/www/public/images/benchmark.svg
index 1c6e6d97dc1..cd35dd3690a 100644
--- a/www/public/images/benchmark.svg
+++ b/www/public/images/benchmark.svg
@@ -1,19 +1,13 @@
 <svg width="403" height="304" viewBox="0 0 403 304" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V270.4C133.776 311.192 351.162 253.6 403 10V4C403 1.79086 401.209 0 399 0H4Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V270.4C133.776 311.192 351.162 253.6 403 10V4C403 1.79086 401.209 0 399 0H4Z" fill="#424242"/>
-<path d="M0 270.4H-1V271.141L-0.291669 271.357L0 270.4ZM403 10L403.978 10.2081L404 10.1052V10H403ZM1 4C1 2.34315 2.34315 1 4 1V-1C1.23858 -1 -1 1.23858 -1 4H1ZM1 270.4V4H-1V270.4H1ZM402.022 9.79186C376.165 131.3 309.049 206.346 231.771 245.957C154.456 285.586 66.9344 289.765 0.291669 269.443L-0.291669 271.357C66.8415 291.827 154.9 287.606 232.683 247.737C310.501 207.849 377.997 132.3 403.978 10.2081L402.022 9.79186ZM402 4V10H404V4H402ZM399 1C400.657 1 402 2.34315 402 4H404C404 1.23858 401.761 -1 399 -1V1ZM4 1H399V-1H4V1Z" fill="#363636" mask="url(#path-1-inside-1)"/>
+<rect width="403" height="304" fill="#202020"/>
+<path d="M403 10C351.162 253.6 133.776 311.192 0 270.4V304H403V10Z" fill="#181818"/>
 <path d="M328 171L328 304" stroke="url(#paint0_linear)"/>
-<path d="M328 171L328 304" stroke="#747474"/>
+<path d="M353 92L154 92" stroke="#747474" stroke-linecap="round"/>
 <path d="M217 254L217 304" stroke="url(#paint1_linear)"/>
-<path d="M217 254L217 304" stroke="#747474"/>
 <path d="M376 92L376 304" stroke="url(#paint2_linear)"/>
-<path d="M376 92L376 304" stroke="#747474"/>
 <path d="M378 92C378 93.1046 377.105 94 376 94C374.895 94 374 93.1046 374 92C374 90.8954 374.895 90 376 90C377.105 90 378 90.8954 378 92Z" fill="#6EC897"/>
 <path d="M330 171C330 172.105 329.105 173 328 173C326.895 173 326 172.105 326 171C326 169.895 326.895 169 328 169C329.105 169 330 169.895 330 171Z" fill="#6EC897"/>
 <path d="M219 255C219 256.105 218.105 257 217 257C215.895 257 215 256.105 215 255C215 253.895 215.895 253 217 253C218.105 253 219 253.895 219 255Z" fill="#6EC897"/>
-<path d="M353 92L154 92" stroke="#747474" stroke-linecap="round"/>
 <path d="M154 72H212" stroke="#A4A4A4" stroke-linecap="round"/>
 <path d="M154 60H254" stroke="#A4A4A4" stroke-linecap="round"/>
 <defs>
diff --git a/www/public/images/logo-dark.png b/www/public/images/logo-dark.png
index 8666a85970a..cba20968f07 100644
Binary files a/www/public/images/logo-dark.png and b/www/public/images/logo-dark.png differ
diff --git a/www/public/images/logo-light.png b/www/public/images/logo-light.png
index 73702da7057..5c6e57b30d6 100644
Binary files a/www/public/images/logo-light.png and b/www/public/images/logo-light.png differ