diff --git a/www/components/AdminAccess/index.tsx b/www/components/AdminAccess/index.tsx
index dab2df21941..edfa0f40cce 100644
--- a/www/components/AdminAccess/index.tsx
+++ b/www/components/AdminAccess/index.tsx
@@ -6,7 +6,7 @@ const AdminAccess = () => {
   const [tabId, setTabId] = useState('tabTableEditor')
 
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-24">
+    <div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-24">
       <div className="container mx-auto sm:px-16 xl:px-20">
         <div className="relative items-center">
           <div className="relative">
@@ -21,10 +21,10 @@ const AdminAccess = () => {
                 setTabId={setTabId}
               />
               <div className="shadow-lg">
-                <div className="w-full rounded-t-md h-5 bg-dark-300 flex items-center justify-start px-2">
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
-                  <div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
+                <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>
                 <video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
                   Your browser does not support the video tag
diff --git a/www/components/BuiltWithSupabase/index.tsx b/www/components/BuiltWithSupabase/index.tsx
index a6822d76f17..990f0434682 100644
--- a/www/components/BuiltWithSupabase/index.tsx
+++ b/www/components/BuiltWithSupabase/index.tsx
@@ -4,10 +4,10 @@ import ProjectExamples from "data/ProjectExamples.json"
 
 const BuiltExamples = () => {
   return (
-    <div className="bg-gray-50 dark:bg-dark-200 py-16">
+    <div className="bg-gray-50 dark:bg-dark-300 py-16">
       <div className="container mx-auto sm:px-16 xl:px-20 relative">
         <div className="absolute inset-0">
-          <div className="bg-white dark:bg-dark-600 h-1/3 sm:h-2/3"></div>
+          <div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
         </div>
         <div className="mx-auto max-w-7xl">
           <SectionHeader
diff --git a/www/components/Card.tsx b/www/components/Card.tsx
index 26912aaaf50..5c58574a4dd 100644
--- a/www/components/Card.tsx
+++ b/www/components/Card.tsx
@@ -55,7 +55,7 @@ const Card = (props: Props) => {
           alt={title}
         />
       </div>
-      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
+      <div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-200">
         <div className="flex-1">
           {/* {icons && (
             <div className="-mt-12 mb-6 flex -space-x-3">
diff --git a/www/components/CaseStudies/benchmark.tsx b/www/components/CaseStudies/benchmark.tsx
index a9fc8fd46ab..7b86f81a67d 100644
--- a/www/components/CaseStudies/benchmark.tsx
+++ b/www/components/CaseStudies/benchmark.tsx
@@ -3,7 +3,7 @@ import Button from 'components/button'
 const Benchmark = () => {
   return (
     <div className="mt-6 max-w-lg mx-auto lg:max-w-none lg:mx-0">
-      <div className="bg-white dark:bg-dark-200 grid gap-4 items-center shadow-lg rounded-md grid-cols-1 lg:grid-cols-12">
+      <div className="bg-white dark:bg-dark-300 grid gap-4 items-center shadow-lg rounded-md grid-cols-1 lg:grid-cols-12">
         <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" src="images/benchmark.svg" />
           <div className="px-12 py-5 lg:px-0 lg:py-0">
diff --git a/www/components/CaseStudies/index.tsx b/www/components/CaseStudies/index.tsx
index 41fef19cc1c..ef36bed75cc 100644
--- a/www/components/CaseStudies/index.tsx
+++ b/www/components/CaseStudies/index.tsx
@@ -6,7 +6,7 @@ import CaseStudiesData from "data/CaseStudies.json"
 const CaseStudies = () => {
 
   return (
-    <div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 lg:pt-24 lg:pb-28">
+    <div className="relative bg-gray-50 dark:bg-dark-400 pt-16 pb-20 lg:pt-24 lg:pb-28">
       <div className="container relative mx-auto sm:px-16 xl:px-20">
         <div className="absolute inset-0">
           <div className="bg-white dark:bg-dark-300 h-1/3 sm:h-2/3"></div>
diff --git a/www/components/Features/index.tsx b/www/components/Features/index.tsx
index 3141a770c13..2f43f3a9402 100644
--- a/www/components/Features/index.tsx
+++ b/www/components/Features/index.tsx
@@ -28,7 +28,7 @@ const Features = () => {
         </div>
         {url && (
           <div className="mt-5">
-            <a href="#" className="mt-2 text-sm text-brand-600 hover:underline">Learn more link</a>
+            <a href="#" className="mt-2 text-sm text-brand-600 hover:underline">Learn more <span aria-hidden="true">&rarr;</span></a>
           </div>
         )}
       </div>
@@ -36,7 +36,7 @@ const Features = () => {
   })
 
   return (
-    <div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12">
+    <div className="bg-gray-50 dark:bg-dark-400 overflow-hidden py-12">
       <div className="container mx-auto 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 d51beb7144e..077f7285afb 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -61,7 +61,7 @@ const Footer = (props: Props) => {
   )
 
   return (
-    <footer className="bg-white dark:bg-dark-400" aria-labelledby="footerHeading">
+    <footer className="bg-white dark:bg-dark-500" aria-labelledby="footerHeading">
       <h2 id="footerHeading" className="sr-only">Footer</h2>
       <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
@@ -129,7 +129,7 @@ const Footer = (props: Props) => {
               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-200' : 'bg-gray-200'} mx-5
+                focus:ring-brand-500 ${darkMode ? 'bg-dark-300' : 'bg-gray-200'} mx-5
               `}
               onClick={() => toggleDarkMode()}
             >
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index 085d531c0d7..26327cf117b 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -4,7 +4,7 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
 
 const MadeForDevelopers = () => {
   return (
-    <div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-16">
+    <div className="py-16 bg-gray-50 dark:bg-dark-400 overflow-hidden lg:py-16">
       <div className="container mx-auto sm:px-16  xl:px-20">
 
       <SectionHeader className="text-center sm:w-3/4 xl:w-2/3 mx-auto" 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.'} />
diff --git a/www/components/Nav/FlyOut.tsx b/www/components/Nav/FlyOut.tsx
index 6ef0c22242f..6667673b432 100644
--- a/www/components/Nav/FlyOut.tsx
+++ b/www/components/Nav/FlyOut.tsx
@@ -59,7 +59,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-600 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-300 transition ease-in-out duration-150"
       >
         {content}
       </a>
@@ -104,7 +104,7 @@ const FlyOut = () => {
       >
         <>
           <div
-            className="absolute inset-x-0 transform shadow-lg border-t-2 border-gray-50 dark:border-dark-600"
+            className="absolute inset-x-0 transform shadow-lg border-t-2 border-gray-50 dark:border-dark-200"
             style={{
               zIndex: 999,
               position: 'absolute',
@@ -116,8 +116,8 @@ const FlyOut = () => {
             }}
           >
             <div className="absolute inset-0 flex" aria-hidden="true">
-              <div className="bg-white dark:bg-dark-300 w-1/2"></div>
-              <div className="bg-gray-50 dark:bg-dark-200 w-1/2"></div>
+              <div className="bg-white dark:bg-dark-400 w-1/2"></div>
+              <div className="bg-gray-50 dark:bg-dark-300 w-1/2"></div>
             </div>
             <div className="relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2">
               <nav
@@ -135,7 +135,7 @@ const FlyOut = () => {
                     <li className="flow-root">
                       <a
                         href="#"
-                        className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
+                        className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
                       >
                         <div className="hidden sm:block flex-shrink-0">
                           <img
@@ -158,7 +158,7 @@ const FlyOut = () => {
                     <li className="flow-root">
                       <a
                         href="#"
-                        className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
+                        className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-200 transition ease-in-out duration-150"
                       >
                         <div className="hidden sm:block flex-shrink-0">
                           <img
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 4107e5128ac..2caa45b29fe 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -127,24 +127,22 @@ const Nav = (props: Props) => {
   )
 
   return (
-    <nav className="bg-white dark:bg-dark-400 z-50 shadow-lg sticky">
-      <div className="container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-16">
+    <nav className="bg-white dark:bg-dark-500 z-50 shadow-lg sticky">
+      <div className="container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0">
         
         <HamburgerButton toggleFlyOut={() => setOpen(true)} />
 
         <div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-start">
           <div className="flex-shrink-0 flex items-center">
-            {/* Mobile - remove if not needed */}
             <img
               className="block lg:hidden h-6 w-auto"
               src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
-              alt="Workflow"
+              alt="Logo"
             />
-            {/* Desktop */}
             <img
               className="hidden lg:block h-6 w-auto"
               src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
-              alt="Workflow"
+              alt="Logo"
             />
           </div>
           <div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
diff --git a/www/components/hero.tsx b/www/components/hero.tsx
index 91b02dd2ac3..8211c43f3f0 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-400 overflow-hidden">
+    <div className="relative bg-dark-500 overflow-hidden">
       <div className="container mx-auto sm:px-16 xl:px-20">
         <div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
           <svg
@@ -31,11 +31,11 @@ const Hero = () => {
 
         <div className="relative pt-6 pb-16 sm:pb-24">
           <main className="mt-16 sm:mt-24">
-            <div className="mx-auto max-w-7xl">
+            <div className="mx-auto">
               <div className="lg:grid lg:grid-cols-12 lg:gap-8">
                 <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:w-3/4 mx-auto">
+                  <div className="sm:w-3/4 sm:mx-auto 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-400 md:block">Firebase Alternative</span>
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 6e3fc9be9bb..6e7d25b2a4a 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -39,11 +39,11 @@ module.exports = {
         // Joshen TODO: At the end just rearrange the values
         dark: {
           100: '#828282',
-          600: '#424242',
-          200: '#3A3A3A',
-          300: '#292929',
-          400: '#202020',
-          500: '#1E1E1E',
+          200: '#424242',
+          300: '#3A3A3A',
+          400: '#292929',
+          500: '#202020',
+          600: '#1E1E1E',
           700: '#181818',
         },
       },