diff --git a/www/components/AdminAccess/tabs.tsx b/www/components/AdminAccess/tabs.tsx
index 30332f3c561..1af5d4d31cb 100644
--- a/www/components/AdminAccess/tabs.tsx
+++ b/www/components/AdminAccess/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabTableEditor"
-              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabTableEditor" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabTableEditor" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 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)}
             >
               Table Editor
@@ -32,7 +32,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabSqlEditor"
-              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabSqlEditor" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabSqlEditor" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 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)}
             >
               SQL Editor
@@ -40,7 +40,7 @@ function Tabs(props: Props) {
             <a
               href="#"
               id="tabAuthRules"
-              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabAuthRules" ? " border-brand-500 dark:border-white text-brand-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-200")}
+              className={"transition sm:w-1/3 lg:w-1/4 py-4 px-1 text-center border-b-2 font-medium text-sm" + (tabId === "tabAuthRules" ? " border-gray-500 dark:border-white text-gray-600 dark:text-white" : " border-b border-gray-200 dark:border-dark-200 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)}
               aria-current="page"
             >
diff --git a/www/components/CTABanner/index.tsx b/www/components/CTABanner/index.tsx
index 2abf67ede10..f93639325ce 100644
--- a/www/components/CTABanner/index.tsx
+++ b/www/components/CTABanner/index.tsx
@@ -7,7 +7,7 @@ const CTABanner = () => {
 				<h4 className="font-normal text-white lg:text-3xl">
 					<span className="block">Create your next project backend </span>
 				</h4>
-				<p className="font-normal mt-1 text-gray-500 lg:text-3xl">
+				<p className="font-normal mt-1 text-gray-500 dark:text-dark-100 lg:text-3xl">
 					Create your next project backend in less than 2 minutes
 				</p>
 			</div>
diff --git a/www/components/Footer/index.tsx b/www/components/Footer/index.tsx
index 782b6547125..619f45a8110 100644
--- a/www/components/Footer/index.tsx
+++ b/www/components/Footer/index.tsx
@@ -95,7 +95,7 @@ const Footer = (props: Props) => {
               {FooterLinks.map((segment: any) => {
                 return (
                   <div key={`footer_${segment.title}`}>
-                    <h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
+                    <h3 className="text-sm font-semibold text-gray-400 dark:text-dark-200 tracking-wider uppercase">
                       {segment.title}
                     </h3>
                     <ul className="mt-4 space-y-4">
@@ -103,10 +103,10 @@ const Footer = (props: Props) => {
                         <li key={`${segment.title}_link_${idx}`}>
                           <a
                             href={link.url}
-                            className={`text-base ${link.url ? 'text-gray-500' : 'text-gray-400'} hover:text-gray-900 dark:hover:text-gray-300`}
+                            className={`text-base ${link.url ? 'text-gray-500 dark:text-dark-100' : 'text-gray-400 dark:text-dark-200'} hover:text-gray-900 dark:hover:text-gray-300`}
                           >
                             {link.text}
-                            {!link.url && <span className="block text-sm text-gray-300">Coming soon</span>}
+                            {!link.url && <span className="block text-sm text-gray-300 dark:text-dark-300">Coming soon</span>}
                           </a>
                         </li>
                       ))}
@@ -117,8 +117,8 @@ const Footer = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className="mt-12 border-t border-gray-200 pt-8 flex justify-between">
-          <p className="text-base text-gray-400">
+        <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-200">
             &copy; Supabase Inc
           </p>
           <div className="flex items-center">
diff --git a/www/components/MadeForDevelopers/CodeExamples.tsx b/www/components/MadeForDevelopers/CodeExamples.tsx
index e3ccae2e544..82e56e75953 100644
--- a/www/components/MadeForDevelopers/CodeExamples.tsx
+++ b/www/components/MadeForDevelopers/CodeExamples.tsx
@@ -46,7 +46,7 @@ const CodeExamples = () => {
       <div className="col-span-12 text-center">
         {buttons}
       </div>
-      <div className="sm:col-span-12 xl:col-span-8 xl:col-start-3">
+      <div className="col-span-12 xl:col-span-8 xl:col-start-3">
         <div className="rounded" style={{ background: '#474949' }}>
           <div className="p-2 pl-5 flex justify-between items-center">
           <p className="text-base text-gray-400 text-white">
diff --git a/www/components/MadeForDevelopers/index.tsx b/www/components/MadeForDevelopers/index.tsx
index f284b94f1ff..dd8b47e6cdb 100644
--- a/www/components/MadeForDevelopers/index.tsx
+++ b/www/components/MadeForDevelopers/index.tsx
@@ -6,18 +6,19 @@ const MadeForDevelopers = () => {
   return (
     <div className="py-16 bg-gray-50 dark:bg-dark-400 overflow-hidden lg:py-16">
       <div className="container mx-auto px-10 sm:px-16  xl:px-20">
+        
+      <SectionHeader className="text-center 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.'} />
 
-      <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.'} />
-
-        <div className="relative lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
+        <div className="relative grid grid-cols-12 gap-8 lg:items-center">
 
           <div className="mt-2 col-span-10 col-start-2">
+
             <CodeExamples />
 
             <div className="grid grid-cols-12 gap-2">
-              <dl className="mt-12 space-y-10 md:grid md:grid-cols-2 md:col-span-12 lg:space-y-0 lg:col-start-2 lg:col-span-10 lg:gap-12 xl:col-start-3 xl:col-span-8">
-                <div className="md:border-r-2 md:border-gray-200 pr-6 dark:border-dark-200">
-                  <div className="mt-5">
+              <dl className="mt-12 grid-cols-12 grid lg:space-y-0 gap-12 col-start-1 col-span-12 md:col-span-12 md:col-start-1 lg:col-start-3 lg:col-span-8">
+                <div className="col-span-12 lg:col-span-6 lg:border-r-2 lg:border-gray-200 pr-6 dark:border-dark-200">
+                  <div className="lg:mt-5">
                     <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                       TypeScript support
                     </dt>
@@ -32,8 +33,8 @@ const MadeForDevelopers = () => {
                     </button>
                   </div>
                 </div>
-                <div>
-                  <div className="mt-5">
+                <div className="col-span-12 lg:col-span-6">
+                  <div className="lg:mt-5">
                     <dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
                       Local emulator
                       <Badge>Coming Q1 2021</Badge>