From e21e8960c120982207bfa624911cfc094a0b5270 Mon Sep 17 00:00:00 2001
From: mertJF <mertcukuren@jotform.com>
Date: Fri, 25 Dec 2020 01:56:01 +0300
Subject: [PATCH] making the blocks compatible with the latest tailwind version

---
 public/index.html                 |   4 +-
 src/App.js                        |  16 +-
 src/blocks/blog/dark/a.js         |  20 +-
 src/blocks/blog/dark/b.js         |  33 +-
 src/blocks/blog/dark/c.js         |  26 +-
 src/blocks/blog/dark/d.js         |  28 +-
 src/blocks/blog/dark/e.js         |  20 +-
 src/blocks/blog/light/a.js        |  26 +-
 src/blocks/blog/light/b.js        |  26 +-
 src/blocks/blog/light/c.js        |  22 +-
 src/blocks/blog/light/d.js        |  18 +-
 src/blocks/blog/light/e.js        |  14 +-
 src/blocks/contact/dark/a.js      |  12 +-
 src/blocks/contact/dark/b.js      |  26 +-
 src/blocks/contact/dark/c.js      |  10 +-
 src/blocks/contact/light/a.js     |   8 +-
 src/blocks/contact/light/b.js     |  20 +-
 src/blocks/contact/light/c.js     |   8 +-
 src/blocks/content/dark/a.js      |  12 +-
 src/blocks/content/dark/b.js      |  20 +-
 src/blocks/content/dark/c.js      |  16 +-
 src/blocks/content/dark/d.js      |   6 +-
 src/blocks/content/dark/e.js      |   4 +-
 src/blocks/content/dark/f.js      |   6 +-
 src/blocks/content/dark/g.js      |   2 +-
 src/blocks/content/dark/h.js      |   8 +-
 src/blocks/content/light/a.js     |  10 +-
 src/blocks/content/light/b.js     |   4 +-
 src/blocks/content/light/c.js     |  16 +-
 src/blocks/content/light/d.js     |   6 +-
 src/blocks/content/light/e.js     |   2 +-
 src/blocks/content/light/f.js     |   6 +-
 src/blocks/content/light/g.js     |   2 +-
 src/blocks/content/light/h.js     |   2 +-
 src/blocks/cta/dark/a.js          |   2 +-
 src/blocks/cta/dark/b.js          |  10 +-
 src/blocks/cta/dark/c.js          |  12 +-
 src/blocks/cta/dark/d.js          |  10 +-
 src/blocks/cta/light/a.js         |   2 +-
 src/blocks/cta/light/b.js         |   8 +-
 src/blocks/cta/light/c.js         |  12 +-
 src/blocks/cta/light/d.js         |   8 +-
 src/blocks/ecommerce/dark/a.js    |   2 +-
 src/blocks/ecommerce/dark/b.js    |  28 +-
 src/blocks/ecommerce/dark/c.js    |   8 +-
 src/blocks/ecommerce/light/a.js   |   2 +-
 src/blocks/ecommerce/light/b.js   |  12 +-
 src/blocks/ecommerce/light/c.js   |   8 +-
 src/blocks/feature/dark/a.js      |  16 +-
 src/blocks/feature/dark/b.js      |  18 +-
 src/blocks/feature/dark/c.js      |   8 +-
 src/blocks/feature/dark/d.js      |   4 +-
 src/blocks/feature/dark/e.js      |  16 +-
 src/blocks/feature/dark/f.js      |   8 +-
 src/blocks/feature/dark/g.js      |  14 +-
 src/blocks/feature/dark/h.js      |  50 +--
 src/blocks/feature/light/a.js     |  10 +-
 src/blocks/feature/light/b.js     |  12 +-
 src/blocks/feature/light/c.js     |   2 +-
 src/blocks/feature/light/d.js     |   6 +-
 src/blocks/feature/light/e.js     |   2 +-
 src/blocks/feature/light/f.js     |   2 +-
 src/blocks/feature/light/g.js     |  14 +-
 src/blocks/feature/light/h.js     |  50 +--
 src/blocks/footer/dark/a.js       |  50 +--
 src/blocks/footer/dark/b.js       |  51 +--
 src/blocks/footer/dark/c.js       |  70 ++--
 src/blocks/footer/dark/d.js       |  12 +-
 src/blocks/footer/dark/e.js       |  44 +--
 src/blocks/footer/light/a.js      |   6 +-
 src/blocks/footer/light/b.js      |   6 +-
 src/blocks/footer/light/c.js      |   8 +-
 src/blocks/footer/light/d.js      |   2 +-
 src/blocks/footer/light/e.js      |   8 +-
 src/blocks/gallery/dark/a.js      |   2 +-
 src/blocks/gallery/dark/c.js      |  14 +-
 src/blocks/gallery/light/a.js     |   2 +-
 src/blocks/gallery/light/b.js     |   2 +-
 src/blocks/gallery/light/c.js     |   2 +-
 src/blocks/header/dark/a.js       |   2 +-
 src/blocks/header/dark/b.js       |   2 +-
 src/blocks/header/dark/c.js       |   2 +-
 src/blocks/header/dark/d.js       |   2 +-
 src/blocks/header/light/a.js      |   4 +-
 src/blocks/header/light/b.js      |   4 +-
 src/blocks/header/light/c.js      |   4 +-
 src/blocks/header/light/d.js      |   4 +-
 src/blocks/hero/dark/a.js         |   2 +-
 src/blocks/hero/dark/b.js         |   2 +-
 src/blocks/hero/dark/c.js         |   2 +-
 src/blocks/hero/dark/d.js         |  10 +-
 src/blocks/hero/dark/e.js         |  10 +-
 src/blocks/hero/dark/f.js         |   8 +-
 src/blocks/hero/light/a.js        |   4 +-
 src/blocks/hero/light/b.js        |   4 +-
 src/blocks/hero/light/c.js        |   4 +-
 src/blocks/hero/light/d.js        |   8 +-
 src/blocks/hero/light/e.js        |   8 +-
 src/blocks/hero/light/f.js        |   8 +-
 src/blocks/index.js               |   5 +-
 src/blocks/pricing/dark/a.js      |  58 ++--
 src/blocks/pricing/dark/b.js      | 541 ++++++------------------------
 src/blocks/pricing/dark/c.js      | 127 -------
 src/blocks/pricing/light/a.js     |  44 +--
 src/blocks/pricing/light/b.js     | 541 ++++++------------------------
 src/blocks/pricing/light/c.js     | 127 -------
 src/blocks/statistic/dark/a.js    |   2 +-
 src/blocks/statistic/dark/b.js    |   2 +-
 src/blocks/statistic/dark/c.js    |  10 +-
 src/blocks/statistic/light/a.js   |   2 +-
 src/blocks/statistic/light/b.js   |   2 +-
 src/blocks/statistic/light/c.js   |   2 +-
 src/blocks/step/dark/a.js         |   2 +-
 src/blocks/step/dark/b.js         |   2 +-
 src/blocks/step/dark/c.js         |   2 +-
 src/blocks/step/light/a.js        |   2 +-
 src/blocks/step/light/b.js        |   2 +-
 src/blocks/step/light/c.js        |   2 +-
 src/blocks/team/dark/a.js         |   2 +-
 src/blocks/team/dark/b.js         |  34 +-
 src/blocks/team/dark/c.js         |  10 +-
 src/blocks/team/light/a.js        |   2 +-
 src/blocks/team/light/b.js        |   2 +-
 src/blocks/team/light/c.js        |   2 +-
 src/blocks/testimonial/dark/a.js  |  14 +-
 src/blocks/testimonial/dark/b.js  |   6 +-
 src/blocks/testimonial/dark/c.js  |  14 +-
 src/blocks/testimonial/light/a.js |   6 +-
 src/blocks/testimonial/light/b.js |   2 +-
 src/blocks/testimonial/light/c.js |   2 +-
 src/icons/index.js                |   4 +-
 src/icons/pricing/b.js            | 259 ++++++++------
 src/icons/pricing/c.js            | 178 ----------
 src/index.css                     |  37 +-
 134 files changed, 1103 insertions(+), 2134 deletions(-)
 delete mode 100644 src/blocks/pricing/dark/c.js
 delete mode 100644 src/blocks/pricing/light/c.js
 delete mode 100644 src/icons/pricing/c.js

diff --git a/public/index.html b/public/index.html
index e1fba53..b4663fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,9 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Ready-to-use Tailwind CSS blocks"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.js b/src/App.js
index 35d9d09..bfa874c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ Object.entries(iconList).forEach(([type, icons]) => {
  Object.keys(icons).map(name =>  blockListArr.push(`${name},${type}`));
 });
 
-const themeList = ["indigo", "orange", "teal", "red", "purple", "pink", "blue", "green"];
+const themeList = ["indigo", "yellow", "red", "purple", "pink", "blue", "green"];
 
 const desktopIcon = (
   <svg
@@ -376,8 +376,18 @@ class App extends Component {
               contentDidUpdate={this.handleContentDidUpdate}
               head={
                 <>
-                <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
-                {darkMode ? <style dangerouslySetInnerHTML={{__html:`img { filter: invert(1); mix-blend-mode: color-dodge }`}} /> : <style dangerouslySetInnerHTML={{__html:`img { filter: sepia(1) hue-rotate(180deg) opacity(.9) grayscale(.7) }`}} />}
+                <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
+                {
+                  <style dangerouslySetInnerHTML={{__html:
+                    `img { filter:
+                      ${darkMode ?
+                        'invert(1) opacity(.5); mix-blend-mode: luminosity; }'
+                        :
+                        'sepia(1) hue-rotate(190deg) opacity(.46) grayscale(.7) }'
+                      }`
+                    }}
+                  />
+                }
                 </>
               }
             >
diff --git a/src/blocks/blog/dark/a.js b/src/blocks/blog/dark/a.js
index 16c37a3..1f18a87 100644
--- a/src/blocks/blog/dark/a.js
+++ b/src/blocks/blog/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkBlogA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/3">
@@ -25,7 +25,7 @@ function DarkBlogA(props) {
                   microdosing tousled waistcoat.
                 </p>
                 <div className="flex items-center flex-wrap ">
-                  <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
+                  <a href className={`text-${props.theme}-400 inline-flex items-center md:mb-2 lg:mb-0`}>
                     Learn More
                     <svg
                       className="w-4 h-4 ml-2"
@@ -40,7 +40,7 @@ function DarkBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                  <span className="text-gray-500 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -55,7 +55,7 @@ function DarkBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -92,7 +92,7 @@ function DarkBlogA(props) {
                   microdosing tousled waistcoat.
                 </p>
                 <div className="flex items-center flex-wrap">
-                  <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
+                  <a href className={`text-${props.theme}-400 inline-flex items-center md:mb-2 lg:mb-0`}>
                     Learn More
                     <svg
                       className="w-4 h-4 ml-2"
@@ -107,7 +107,7 @@ function DarkBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                  <span className="text-gray-500 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -122,7 +122,7 @@ function DarkBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -161,7 +161,7 @@ function DarkBlogA(props) {
                 <div className="flex items-center flex-wrap ">
                   <a
                     href
-                    className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
+                    className={`text-${props.theme}-400 inline-flex items-center md:mb-2 lg:mb-0`}
                   >
                     Learn More
                     <svg
@@ -177,7 +177,7 @@ function DarkBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                  <span className="text-gray-500 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -192,7 +192,7 @@ function DarkBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
diff --git a/src/blocks/blog/dark/b.js b/src/blocks/blog/dark/b.js
index 554f4bf..ce6cad3 100644
--- a/src/blocks/blog/dark/b.js
+++ b/src/blocks/blog/dark/b.js
@@ -1,14 +1,15 @@
+
 import React from 'react';
 import PropTypes from  "prop-types";
 
 function DarkBlogB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+            <div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
@@ -18,7 +19,7 @@ function DarkBlogB(props) {
                 Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
                 microdosing tousled waistcoat.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -34,7 +35,7 @@ function DarkBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                <span className="text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -49,7 +50,7 @@ function DarkBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -67,8 +68,8 @@ function DarkBlogB(props) {
             </div>
           </div>
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+            <div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
@@ -78,7 +79,7 @@ function DarkBlogB(props) {
                 Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
                 microdosing tousled waistcoat.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -94,7 +95,7 @@ function DarkBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                <span className="text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -109,7 +110,7 @@ function DarkBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -127,8 +128,8 @@ function DarkBlogB(props) {
             </div>
           </div>
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+            <div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
@@ -138,7 +139,7 @@ function DarkBlogB(props) {
                 Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
                 microdosing tousled waistcoat.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -154,7 +155,7 @@ function DarkBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                <span className="text-gray-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -169,7 +170,7 @@ function DarkBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
diff --git a/src/blocks/blog/dark/c.js b/src/blocks/blog/dark/c.js
index 242423a..780c50a 100644
--- a/src/blocks/blog/dark/c.js
+++ b/src/blocks/blog/dark/c.js
@@ -3,11 +3,11 @@ import PropTypes from  "prop-types";
 
 function DarkBlogC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+    <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-12">
           <div className="p-12 md:w-1/2 flex flex-col items-start">
-            <span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
+            <span className="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">
               CATEGORY
             </span>
             <h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
@@ -20,8 +20,8 @@ function DarkBlogC(props) {
               slow-carb etsy tumeric. Cray pug you probably haven't heard of them
               hexagon kickstarter craft beer pork chic.
             </p>
-            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -36,7 +36,7 @@ function DarkBlogC(props) {
                   <path d="M12 5l7 7-7 7" />
                 </svg>
               </a>
-              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+              <span className="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -51,7 +51,7 @@ function DarkBlogC(props) {
                 </svg>
                 1.2K
               </span>
-              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+              <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -76,12 +76,12 @@ function DarkBlogC(props) {
                 <span className="title-font font-medium text-white">
                   Holden Caulfield
                 </span>
-                <span className="text-gray-600 text-sm">UI DEVELOPER</span>
+                <span className="text-gray-500 text-xs tracking-widest mt-0.5">UI DEVELOPER</span>
               </span>
             </a>
           </div>
           <div className="p-12 md:w-1/2 flex flex-col items-start">
-            <span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
+            <span className="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">
               CATEGORY
             </span>
             <h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
@@ -93,8 +93,8 @@ function DarkBlogC(props) {
               hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
               slow-carb etsy tumeric.
             </p>
-            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -109,7 +109,7 @@ function DarkBlogC(props) {
                   <path d="M12 5l7 7-7 7" />
                 </svg>
               </a>
-              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+              <span className="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -124,7 +124,7 @@ function DarkBlogC(props) {
                 </svg>
                 1.2K
               </span>
-              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+              <span className="text-gray-500 inline-flex items-center leading-none text-sm">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -149,7 +149,7 @@ function DarkBlogC(props) {
                 <span className="title-font font-medium text-white">
                   Alper Kamu
                 </span>
-                <span className="text-gray-600 text-sm">DESIGNER</span>
+                <span className="text-gray-500 text-xs tracking-widest mt-0.5">DESIGNER</span>
               </span>
             </a>
           </div>
diff --git a/src/blocks/blog/dark/d.js b/src/blocks/blog/dark/d.js
index b36ec0a..855b8cd 100644
--- a/src/blocks/blog/dark/d.js
+++ b/src/blocks/blog/dark/d.js
@@ -3,15 +3,15 @@ import PropTypes from  "prop-types";
 
 function DarkBlogD(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+    <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
-        <div className="-my-8">
-          <div className="py-8 flex flex-wrap md:flex-no-wrap">
+        <div className="-my-8 divide-y-2 divide-gray-800">
+          <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-white">
+              <span className="font-semibold title-font text-white">
                 CATEGORY
               </span>
-              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
             </div>
             <div className="md:flex-grow">
               <h2 className="text-2xl font-medium text-white title-font mb-2">
@@ -23,7 +23,7 @@ function DarkBlogD(props) {
                 bag selfies, poke vaporware kombucha lumbersexual pork belly
                 polaroid hoodie portland craft beer.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -40,12 +40,12 @@ function DarkBlogD(props) {
               </a>
             </div>
           </div>
-          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
+          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-white">
+              <span className="font-semibold title-font text-white">
                 CATEGORY
               </span>
-              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
             </div>
             <div className="md:flex-grow">
               <h2 className="text-2xl font-medium text-white title-font mb-2">
@@ -57,7 +57,7 @@ function DarkBlogD(props) {
                 bag selfies, poke vaporware kombucha lumbersexual pork belly
                 polaroid hoodie portland craft beer.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
@@ -74,12 +74,12 @@ function DarkBlogD(props) {
               </a>
             </div>
           </div>
-          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
+          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-white">
+              <span className="font-semibold title-font text-white">
                 CATEGORY
               </span>
-              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
             </div>
             <div className="md:flex-grow">
               <h2 className="text-2xl font-medium text-white title-font mb-2">
@@ -91,7 +91,7 @@ function DarkBlogD(props) {
                 bag selfies, poke vaporware kombucha lumbersexual pork belly
                 polaroid hoodie portland craft beer.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
                 Learn More
                 <svg
                   className="w-4 h-4 ml-2"
diff --git a/src/blocks/blog/dark/e.js b/src/blocks/blog/dark/e.js
index 545081e..7ac0fdf 100644
--- a/src/blocks/blog/dark/e.js
+++ b/src/blocks/blog/dark/e.js
@@ -3,21 +3,21 @@ import PropTypes from  "prop-types";
 
 function DarkBlogE(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -mx-4 -my-8">
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                <span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-300 title-font">
+                <span className="font-medium text-lg leading-none text-gray-300 title-font">
                   18
                 </span>
               </div>
               <div className="flex-grow pl-6">
-                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-400 mb-1`}>
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-xl font-medium text-white mb-3">
@@ -45,15 +45,15 @@ function DarkBlogE(props) {
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                <span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-300 title-font">
+                <span className="font-medium text-lg leading-none text-gray-300 title-font">
                   18
                 </span>
               </div>
               <div className="flex-grow pl-6">
-                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-400 mb-1`}>
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-xl font-medium text-white mb-3">
@@ -81,15 +81,15 @@ function DarkBlogE(props) {
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                <span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-300 title-font">
+                <span className="font-medium text-lg leading-none text-gray-300 title-font">
                   18
                 </span>
               </div>
               <div className="flex-grow pl-6">
-                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-400 mb-1`}>
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-xl font-medium text-white mb-3">
diff --git a/src/blocks/blog/light/a.js b/src/blocks/blog/light/a.js
index b33c951..41326c5 100644
--- a/src/blocks/blog/light/a.js
+++ b/src/blocks/blog/light/a.js
@@ -3,18 +3,18 @@ import PropTypes from  "prop-types";
 
 function LightBlogA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/3">
-            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+            <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
               <img
                 className="lg:h-48 md:h-36 w-full object-cover object-center"
                 src="https://dummyimage.com/720x400"
                 alt="blog"
               />
               <div className="p-6">
-                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
@@ -43,7 +43,7 @@ function LightBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <span className="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -58,7 +58,7 @@ function LightBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -77,14 +77,14 @@ function LightBlogA(props) {
             </div>
           </div>
           <div className="p-4 md:w-1/3">
-            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+            <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
               <img
                 className="lg:h-48 md:h-36 w-full object-cover object-center"
                 src="https://dummyimage.com/721x401"
                 alt="blog"
               />
               <div className="p-6">
-                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
@@ -113,7 +113,7 @@ function LightBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <span className="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -128,7 +128,7 @@ function LightBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -147,14 +147,14 @@ function LightBlogA(props) {
             </div>
           </div>
           <div className="p-4 md:w-1/3">
-            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+            <div className="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
               <img
                 className="lg:h-48 md:h-36 w-full object-cover object-center"
                 src="https://dummyimage.com/722x402"
                 alt="blog"
               />
               <div className="p-6">
-                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                   CATEGORY
                 </h2>
                 <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
@@ -183,7 +183,7 @@ function LightBlogA(props) {
                       <path d="M12 5l7 7-7 7" />
                     </svg>
                   </a>
-                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <span className="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
@@ -198,7 +198,7 @@ function LightBlogA(props) {
                     </svg>
                     1.2K
                   </span>
-                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                     <svg
                       className="w-4 h-4 mr-1"
                       stroke="currentColor"
diff --git a/src/blocks/blog/light/b.js b/src/blocks/blog/light/b.js
index 2db1454..aa86ef2 100644
--- a/src/blocks/blog/light/b.js
+++ b/src/blocks/blog/light/b.js
@@ -3,12 +3,12 @@ import PropTypes from  "prop-types";
 
 function LightBlogB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+            <div className="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
@@ -34,7 +34,7 @@ function LightBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                <span className="text-gray-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -49,7 +49,7 @@ function LightBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -67,8 +67,8 @@ function LightBlogB(props) {
             </div>
           </div>
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+            <div className="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
@@ -94,7 +94,7 @@ function LightBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                <span className="text-gray-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -109,7 +109,7 @@ function LightBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -127,8 +127,8 @@ function LightBlogB(props) {
             </div>
           </div>
           <div className="p-4 lg:w-1/3">
-            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
-              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+            <div className="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">
                 CATEGORY
               </h2>
               <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
@@ -154,7 +154,7 @@ function LightBlogB(props) {
                 </svg>
               </a>
               <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
-                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                <span className="text-gray-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
@@ -169,7 +169,7 @@ function LightBlogB(props) {
                   </svg>
                   1.2K
                 </span>
-                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                   <svg
                     className="w-4 h-4 mr-1"
                     stroke="currentColor"
diff --git a/src/blocks/blog/light/c.js b/src/blocks/blog/light/c.js
index 70350fe..7b5a5c3 100644
--- a/src/blocks/blog/light/c.js
+++ b/src/blocks/blog/light/c.js
@@ -3,11 +3,11 @@ import PropTypes from  "prop-types";
 
 function LightBlogC(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
+    <section className="text-gray-600 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-12">
           <div className="p-12 md:w-1/2 flex flex-col items-start">
-            <span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
+            <span className={`inline-block py-1 px-2 rounded bg-${props.theme}-50 text-${props.theme}-500 text-xs font-medium tracking-widest`}>
               CATEGORY
             </span>
             <h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
@@ -20,7 +20,7 @@ function LightBlogC(props) {
               slow-carb etsy tumeric. Cray pug you probably haven't heard of them
               hexagon kickstarter craft beer pork chic.
             </p>
-            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-100 mt-auto w-full">
               <a href className={`text-${props.theme}-500 inline-flex items-center`}>
                 Learn More
                 <svg
@@ -36,7 +36,7 @@ function LightBlogC(props) {
                   <path d="M12 5l7 7-7 7" />
                 </svg>
               </a>
-              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+              <span className="text-gray-400 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -51,7 +51,7 @@ function LightBlogC(props) {
                 </svg>
                 1.2K
               </span>
-              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+              <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -76,12 +76,12 @@ function LightBlogC(props) {
                 <span className="title-font font-medium text-gray-900">
                   Holden Caulfield
                 </span>
-                <span className="text-gray-500 text-sm">UI DEVELOPER</span>
+                <span className="text-gray-400 text-xs tracking-widest mt-0.5">UI DEVELOPER</span>
               </span>
             </a>
           </div>
           <div className="p-12 md:w-1/2 flex flex-col items-start">
-            <span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
+            <span className={`inline-block py-1 px-2 rounded bg-${props.theme}-50 text-${props.theme}-500 text-xs font-medium tracking-widest`}>
               CATEGORY
             </span>
             <h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
@@ -93,7 +93,7 @@ function LightBlogC(props) {
               hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
               slow-carb etsy tumeric.
             </p>
-            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-100 mt-auto w-full">
               <a href className={`text-${props.theme}-500 inline-flex items-center`}>
                 Learn More
                 <svg
@@ -109,7 +109,7 @@ function LightBlogC(props) {
                   <path d="M12 5l7 7-7 7" />
                 </svg>
               </a>
-              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+              <span className="text-gray-400 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -124,7 +124,7 @@ function LightBlogC(props) {
                 </svg>
                 1.2K
               </span>
-              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+              <span className="text-gray-400 inline-flex items-center leading-none text-sm">
                 <svg
                   className="w-4 h-4 mr-1"
                   stroke="currentColor"
@@ -149,7 +149,7 @@ function LightBlogC(props) {
                 <span className="title-font font-medium text-gray-900">
                   Alper Kamu
                 </span>
-                <span className="text-gray-500 text-sm">DESIGNER</span>
+                <span className="text-gray-400 text-xs tracking-widest mt-0.5">DESIGNER</span>
               </span>
             </a>
           </div>
diff --git a/src/blocks/blog/light/d.js b/src/blocks/blog/light/d.js
index 9e7725a..2ca014f 100644
--- a/src/blocks/blog/light/d.js
+++ b/src/blocks/blog/light/d.js
@@ -3,12 +3,12 @@ import PropTypes from  "prop-types";
 
 function LightBlogD(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
+    <section className="text-gray-600 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
-        <div className="-my-8">
-          <div className="py-8 flex flex-wrap md:flex-no-wrap">
+        <div className="-my-8 divide-y-2 divide-gray-100">
+          <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-gray-900">
+              <span className="font-semibold title-font text-gray-700">
                 CATEGORY
               </span>
               <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
@@ -40,9 +40,9 @@ function LightBlogD(props) {
               </a>
             </div>
           </div>
-          <div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
+          <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-gray-900">
+              <span className="font-semibold title-font text-gray-700">
                 CATEGORY
               </span>
               <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
@@ -74,12 +74,12 @@ function LightBlogD(props) {
               </a>
             </div>
           </div>
-          <div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
+          <div className="py-8 flex flex-wrap md:flex-nowrap">
             <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
-              <span className="tracking-widest font-medium title-font text-gray-900">
+              <span className="font-semibold title-font text-gray-700">
                 CATEGORY
               </span>
-              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+              <span className="text-sm text-gray-500">12 Jun 2019</span>
             </div>
             <div className="md:flex-grow">
               <h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
diff --git a/src/blocks/blog/light/e.js b/src/blocks/blog/light/e.js
index 7d527c2..37dc4f6 100644
--- a/src/blocks/blog/light/e.js
+++ b/src/blocks/blog/light/e.js
@@ -3,16 +3,16 @@ import PropTypes from  "prop-types";
 
 function LightBlogE(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -mx-4 -my-8">
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-800 title-font">
+                <span className="font-medium text-lg text-gray-800 title-font leading-none">
                   18
                 </span>
               </div>
@@ -45,10 +45,10 @@ function LightBlogE(props) {
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-800 title-font">
+                <span className="font-medium text-lg text-gray-800 title-font leading-none">
                   18
                 </span>
               </div>
@@ -81,10 +81,10 @@ function LightBlogE(props) {
           <div className="py-8 px-4 lg:w-1/3">
             <div className="h-full flex items-start">
               <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
-                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
                   Jul
                 </span>
-                <span className="font-medium text-xl text-gray-800 title-font">
+                <span className="font-medium text-lg text-gray-800 title-font leading-none">
                   18
                 </span>
               </div>
diff --git a/src/blocks/contact/dark/a.js b/src/blocks/contact/dark/a.js
index f289082..582076f 100644
--- a/src/blocks/contact/dark/a.js
+++ b/src/blocks/contact/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContactA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font relative">
+    <section className="text-gray-400 bg-gray-900 body-font relative">
       <div className="absolute inset-0 bg-gray-900">
         <iframe
           title="map"
@@ -18,11 +18,11 @@ function DarkContactA(props) {
         />
       </div>
       <div className="container px-5 py-24 mx-auto flex">
-        <div className="lg:w-1/3 md:w-1/2 bg-gray-900 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
+        <div className="lg:w-1/3 md:w-1/2 bg-gray-900 shadow-md rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
           <h2 className="text-white text-lg mb-1 font-medium title-font">
             Feedback
           </h2>
-          <p className="leading-relaxed mb-5 text-gray-500">
+          <p className="leading-relaxed mb-5">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
           <div className="relative mb-4">
@@ -36,7 +36,7 @@ function DarkContactA(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -49,13 +49,13 @@ function DarkContactA(props) {
             <textarea
               id="message"
               name="message"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
             ></textarea>
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
-          <p className="text-xs text-gray-600 mt-3">
+          <p className="text-xs text-gray-400 text-opacity-90 mt-3">
             Chicharrones blog helvetica normcore iceland tousled brook viral
             artisan.
           </p>
diff --git a/src/blocks/contact/dark/b.js b/src/blocks/contact/dark/b.js
index e0632b9..003ab46 100644
--- a/src/blocks/contact/dark/b.js
+++ b/src/blocks/contact/dark/b.js
@@ -3,8 +3,8 @@ import PropTypes from  "prop-types";
 
 function DarkContactB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font relative">
-      <div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
+    <section className="text-gray-400 bg-gray-900 body-font relative">
+      <div className="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
         <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
           <iframe
             width="100%"
@@ -18,24 +18,24 @@ function DarkContactB(props) {
             scrolling="no"
             src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
           />
-          <div className="bg-gray-900 relative flex flex-wrap py-6">
+          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
             <div className="lg:w-1/2 px-6">
-              <h2 className="title-font font-medium text-white tracking-widest text-sm">
+              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                 ADDRESS
               </h2>
-              <p className="leading-relaxed">
+              <p className="mt-1">
                 Photo booth tattooed prism, portland taiyaki hoodie neutra
                 typewriter
               </p>
             </div>
             <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
-              <h2 className="title-font font-medium text-white tracking-widest text-sm">
+              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                 EMAIL
               </h2>
-              <a href className={`text-${props.theme}-500 leading-relaxed`}>
+              <a href className={`text-${props.theme}-400 leading-relaxed`}>
                 example@email.com
               </a>
-              <h2 className="title-font font-medium text-white tracking-widest text-sm mt-4">
+              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                 PHONE
               </h2>
               <p className="leading-relaxed">123-456-7890</p>
@@ -46,7 +46,7 @@ function DarkContactB(props) {
           <h2 className="text-white text-lg mb-1 font-medium title-font">
             Feedback
           </h2>
-          <p className="leading-relaxed mb-5 text-gray-600">
+          <p className="leading-relaxed mb-5">
             Post-ironic portland shabby chic echo park, banjo fashion axe
           </p>
           <div className="relative mb-4">
@@ -60,7 +60,7 @@ function DarkContactB(props) {
               type="text"
               id="name"
               name="name"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -74,7 +74,7 @@ function DarkContactB(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -87,13 +87,13 @@ function DarkContactB(props) {
             <textarea
               id="message"
               name="message"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
             ></textarea>
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
-          <p className="text-xs text-gray-500 mt-3">
+          <p className="text-xs text-gray-400 text-opacity-90 mt-3">
             Chicharrones blog helvetica normcore iceland tousled brook viral
             artisan.
           </p>
diff --git a/src/blocks/contact/dark/c.js b/src/blocks/contact/dark/c.js
index 21b389c..c03a8cc 100644
--- a/src/blocks/contact/dark/c.js
+++ b/src/blocks/contact/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContactC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font relative">
+    <section className="text-gray-400 bg-gray-900 body-font relative">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -28,7 +28,7 @@ function DarkContactC(props) {
                   type="text"
                   id="name"
                   name="name"
-                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
             </div>
@@ -44,7 +44,7 @@ function DarkContactC(props) {
                   type="email"
                   id="email"
                   name="email"
-                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
             </div>
@@ -59,7 +59,7 @@ function DarkContactC(props) {
                 <textarea
                   id="message"
                   name="message"
-                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
                 ></textarea>
               </div>
             </div>
@@ -69,7 +69,7 @@ function DarkContactC(props) {
               </button>
             </div>
             <div className="p-2 w-full pt-8 mt-8 border-t border-gray-800 text-center">
-              <a href className={`text-${props.theme}-500`}>example@email.com</a>
+              <a href className={`text-${props.theme}-400`}>example@email.com</a>
               <p className="leading-normal my-5">
                 49 Smith St.<br />Saint Cloud, MN 56301
               </p>
diff --git a/src/blocks/contact/light/a.js b/src/blocks/contact/light/a.js
index b4f4cfd..9f7d044 100644
--- a/src/blocks/contact/light/a.js
+++ b/src/blocks/contact/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContactA(props) {
   return (
-    <section className="text-gray-700 body-font relative">
+    <section className="text-gray-600 body-font relative">
       <div className="absolute inset-0 bg-gray-300">
         <iframe
           width="100%"
@@ -18,7 +18,7 @@ function LightContactA(props) {
         />
       </div>
       <div className="container px-5 py-24 mx-auto flex">
-        <div className="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
+        <div className="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
           <h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
             Feedback
           </h2>
@@ -36,7 +36,7 @@ function LightContactA(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -49,7 +49,7 @@ function LightContactA(props) {
             <textarea
               id="message"
               name="message"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
             ></textarea>
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/contact/light/b.js b/src/blocks/contact/light/b.js
index ed93444..2cc43b3 100644
--- a/src/blocks/contact/light/b.js
+++ b/src/blocks/contact/light/b.js
@@ -3,8 +3,8 @@ import PropTypes from  "prop-types";
 
 function LightContactB(props) {
   return (
-    <section className="text-gray-700 body-font relative">
-      <div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
+    <section className="text-gray-600 body-font relative">
+      <div className="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
         <div className="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
           <iframe
             width="100%"
@@ -18,24 +18,24 @@ function LightContactB(props) {
             scrolling="no"
             src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
           />
-          <div className="bg-white relative flex flex-wrap py-6">
+          <div className="bg-white relative flex flex-wrap py-6 rounded shadow-md">
             <div className="lg:w-1/2 px-6">
-              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
+              <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">
                 ADDRESS
               </h2>
-              <p className="leading-relaxed">
+              <p className="mt-1">
                 Photo booth tattooed prism, portland taiyaki hoodie neutra
                 typewriter
               </p>
             </div>
             <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
-              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
+              <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">
                 EMAIL
               </h2>
               <a href className={`text-${props.theme}-500 leading-relaxed`}>
                 example@email.com
               </a>
-              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mt-4">
+              <h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">
                 PHONE
               </h2>
               <p className="leading-relaxed">123-456-7890</p>
@@ -60,7 +60,7 @@ function LightContactB(props) {
               type="text"
               id="name"
               name="name"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -74,7 +74,7 @@ function LightContactB(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -87,7 +87,7 @@ function LightContactB(props) {
             <textarea
               id="message"
               name="message"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
             ></textarea>
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/contact/light/c.js b/src/blocks/contact/light/c.js
index 977b6e6..a9e2170 100644
--- a/src/blocks/contact/light/c.js
+++ b/src/blocks/contact/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContactC(props) {
   return (
-    <section className="text-gray-700 body-font relative">
+    <section className="text-gray-600 body-font relative">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
@@ -28,7 +28,7 @@ function LightContactC(props) {
                   type="text"
                   id="name"
                   name="name"
-                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
             </div>
@@ -44,7 +44,7 @@ function LightContactC(props) {
                   type="email"
                   id="email"
                   name="email"
-                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
             </div>
@@ -59,7 +59,7 @@ function LightContactC(props) {
                 <textarea
                   id="message"
                   name="message"
-                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
                 ></textarea>
               </div>
             </div>
diff --git a/src/blocks/content/dark/a.js b/src/blocks/content/dark/a.js
index 7832b1e..f30dd51 100644
--- a/src/blocks/content/dark/a.js
+++ b/src/blocks/content/dark/a.js
@@ -3,10 +3,10 @@ import PropTypes from  "prop-types";
 
 function DarkContentA(props) {
   return (
-    <section className="text-gray-500 body-font bg-gray-900">
+    <section className="text-gray-400 body-font bg-gray-900">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
-          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+          <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
           </h2>
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -28,7 +28,7 @@ function DarkContentA(props) {
               Fingerstache flexitarian street art 8-bit waistcoat. Distillery
               hexagon disrupt edison bulbche.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
@@ -51,7 +51,7 @@ function DarkContentA(props) {
               Fingerstache flexitarian street art 8-bit waistcoat. Distillery
               hexagon disrupt edison bulbche.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
@@ -74,7 +74,7 @@ function DarkContentA(props) {
               Fingerstache flexitarian street art 8-bit waistcoat. Distillery
               hexagon disrupt edison bulbche.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
@@ -97,7 +97,7 @@ function DarkContentA(props) {
               Fingerstache flexitarian street art 8-bit waistcoat. Distillery
               hexagon disrupt edison bulbche.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
diff --git a/src/blocks/content/dark/b.js b/src/blocks/content/dark/b.js
index f9836da..b8f7452 100644
--- a/src/blocks/content/dark/b.js
+++ b/src/blocks/content/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentB(props) {
   return (
-    <section className="text-gray-500 body-font bg-gray-900">
+    <section className="text-gray-400 body-font bg-gray-900">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap w-full mb-20">
           <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
@@ -12,7 +12,7 @@ function DarkContentB(props) {
             </h1>
             <div className={`h-1 w-20 bg-${props.theme}-500 rounded`} />
           </div>
-          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+          <p className="lg:w-1/2 w-full leading-relaxed text-gray-400 text-opacity-90">
             Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
             gentrify, subway tile poke farm-to-table. Franzen you probably
             haven&apos;t heard of them man bun deep jianbing selfies heirloom
@@ -21,13 +21,13 @@ function DarkContentB(props) {
         </div>
         <div className="flex flex-wrap -m-4">
           <div className="xl:w-1/4 md:w-1/2 p-4">
-            <div className="bg-gray-800 p-6 rounded-lg">
+            <div className="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
               <img
                 className="h-40 rounded w-full object-cover object-center mb-6"
                 src="https://dummyimage.com/720x400"
                 alt="content"
               />
-              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+              <h3 className={`tracking-widest text-${props.theme}-400 text-xs font-medium title-font`}>
                 SUBTITLE
               </h3>
               <h2 className="text-lg text-white font-medium title-font mb-4">
@@ -40,13 +40,13 @@ function DarkContentB(props) {
             </div>
           </div>
           <div className="xl:w-1/4 md:w-1/2 p-4">
-            <div className="bg-gray-800 p-6 rounded-lg">
+            <div className="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
               <img
                 className="h-40 rounded w-full object-cover object-center mb-6"
                 src="https://dummyimage.com/721x401"
                 alt="content"
               />
-              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+              <h3 className={`tracking-widest text-${props.theme}-400 text-xs font-medium title-font`}>
                 SUBTITLE
               </h3>
               <h2 className="text-lg text-white font-medium title-font mb-4">
@@ -59,13 +59,13 @@ function DarkContentB(props) {
             </div>
           </div>
           <div className="xl:w-1/4 md:w-1/2 p-4">
-            <div className="bg-gray-800 p-6 rounded-lg">
+            <div className="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
               <img
                 className="h-40 rounded w-full object-cover object-center mb-6"
                 src="https://dummyimage.com/722x402"
                 alt="content"
               />
-              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+              <h3 className={`tracking-widest text-${props.theme}-400 text-xs font-medium title-font`}>
                 SUBTITLE
               </h3>
               <h2 className="text-lg text-white font-medium title-font mb-4">
@@ -78,13 +78,13 @@ function DarkContentB(props) {
             </div>
           </div>
           <div className="xl:w-1/4 md:w-1/2 p-4">
-            <div className="bg-gray-800 p-6 rounded-lg">
+            <div className="bg-gray-800 bg-opacity-40 p-6 rounded-lg">
               <img
                 className="h-40 rounded w-full object-cover object-center mb-6"
                 src="https://dummyimage.com/723x403"
                 alt="content"
               />
-              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+              <h3 className={`tracking-widest text-${props.theme}-400 text-xs font-medium title-font`}>
                 SUBTITLE
               </h3>
               <h2 className="text-lg text-white font-medium title-font mb-4">
diff --git a/src/blocks/content/dark/c.js b/src/blocks/content/dark/c.js
index a2bc548..579a4df 100644
--- a/src/blocks/content/dark/c.js
+++ b/src/blocks/content/dark/c.js
@@ -3,20 +3,20 @@ import PropTypes from  "prop-types";
 
 function DarkContentC(props) {
   return (
-    <section className="text-gray-500 body-font bg-gray-900">
+    <section className="text-gray-400 body-font bg-gray-900">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
             Pitchfork Kickstarter Taxidermy
           </h1>
-          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+          <p className="lg:w-1/2 w-full leading-relaxed text-opacity-80">
             Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
             gentrify, subway tile poke farm-to-table.
           </p>
         </div>
         <div className="flex flex-wrap -m-4">
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
@@ -40,7 +40,7 @@ function DarkContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
@@ -66,7 +66,7 @@ function DarkContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
@@ -91,7 +91,7 @@ function DarkContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
@@ -115,7 +115,7 @@ function DarkContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
@@ -139,7 +139,7 @@ function DarkContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-800 p-6 rounded-lg">
+            <div className="border border-gray-700 border-opacity-75 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
                 <svg
                   fill="none"
diff --git a/src/blocks/content/dark/d.js b/src/blocks/content/dark/d.js
index 72757a0..bb78fdd 100644
--- a/src/blocks/content/dark/d.js
+++ b/src/blocks/content/dark/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentD(props) {
   return (
-    <section className="text-gray-500 body-font bg-gray-900">
+    <section className="text-gray-400 body-font bg-gray-900">
       <div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
         <div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 md:mb-0 mb-10 pb-10 border-b border-gray-800">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
@@ -15,7 +15,7 @@ function DarkContentD(props) {
             succulents. Actually taiyaki neutra, distillery gastropub pok pok
             ugh.
           </p>
-          <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+          <a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
             Learn More
             <svg
               fill="none"
@@ -31,7 +31,7 @@ function DarkContentD(props) {
           </a>
         </div>
         <div className="flex flex-col md:w-1/2 md:pl-12">
-          <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+          <h2 className="title-font font-semibold text-white tracking-wider text-sm mb-3">
             CATEGORIES
           </h2>
           <nav className="flex flex-wrap list-none -mb-1">
diff --git a/src/blocks/content/dark/e.js b/src/blocks/content/dark/e.js
index 4bc207b..7297bae 100644
--- a/src/blocks/content/dark/e.js
+++ b/src/blocks/content/dark/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentE(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <h2 className="sm:text-3xl text-2xl text-white font-medium title-font mb-2 md:w-2/5">
           Kickstarter Actually Pinterest Brunch Bitters Occupy
@@ -19,7 +19,7 @@ function DarkContentE(props) {
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-1 px-4 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
               Button
             </button>
-            <a href className={`text-${props.theme}-500 inline-flex items-center ml-4`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center ml-4`}>
               Learn More
               <svg
                 fill="none"
diff --git a/src/blocks/content/dark/f.js b/src/blocks/content/dark/f.js
index d934f0a..82d8dbe 100644
--- a/src/blocks/content/dark/f.js
+++ b/src/blocks/content/dark/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentF(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-col">
         <div className="lg:w-4/6 mx-auto">
           <div className="rounded-lg h-64 overflow-hidden">
@@ -34,7 +34,7 @@ function DarkContentF(props) {
                   Phoebe Caulfield
                 </h2>
                 <div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
-                <p className="text-base text-gray-600">
+                <p className="text-base text-gray-400">
                   Raclette knausgaard hella meggs normcore williamsburg enamel
                   pin sartorial venmo tbh hot chicken gentrify portland.
                 </p>
@@ -52,7 +52,7 @@ function DarkContentF(props) {
                 disrupt butcher paleo intelligentsia pabst before they sold out
                 four loko. 3 wolf moon brooklyn.
               </p>
-              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
diff --git a/src/blocks/content/dark/g.js b/src/blocks/content/dark/g.js
index 8d1f98d..d9e5dff 100644
--- a/src/blocks/content/dark/g.js
+++ b/src/blocks/content/dark/g.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentG(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -mx-4 -mb-10 text-center">
           <div className="sm:w-1/2 mb-10 px-4">
diff --git a/src/blocks/content/dark/h.js b/src/blocks/content/dark/h.js
index 3176248..e714bcd 100644
--- a/src/blocks/content/dark/h.js
+++ b/src/blocks/content/dark/h.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkContentH(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col">
           <div className="h-1 bg-gray-800 rounded overflow-hidden">
@@ -37,7 +37,7 @@ function DarkContentH(props) {
               cold-pressed. Gastropub street art beard dreamcatcher neutra,
               ethical XOXO lumbersexual.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
               Learn More
               <svg
                 fill="none"
@@ -68,7 +68,7 @@ function DarkContentH(props) {
               cold-pressed. Gastropub street art beard dreamcatcher neutra,
               ethical XOXO lumbersexual.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
               Learn More
               <svg
                 fill="none"
@@ -99,7 +99,7 @@ function DarkContentH(props) {
               cold-pressed. Gastropub street art beard dreamcatcher neutra,
               ethical XOXO lumbersexual.
             </p>
-            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+            <a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
               Learn More
               <svg
                 fill="none"
diff --git a/src/blocks/content/light/a.js b/src/blocks/content/light/a.js
index dd76b8d..7907750 100644
--- a/src/blocks/content/light/a.js
+++ b/src/blocks/content/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
@@ -20,7 +20,7 @@ function LightContentA(props) {
           </p>
         </div>
         <div className="flex flex-wrap">
-          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
             <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
               Shooting Stars
             </h2>
@@ -43,7 +43,7 @@ function LightContentA(props) {
               </svg>
             </a>
           </div>
-          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
             <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
               The Catalyzer
             </h2>
@@ -66,7 +66,7 @@ function LightContentA(props) {
               </svg>
             </a>
           </div>
-          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
             <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
               Neptune
             </h2>
@@ -89,7 +89,7 @@ function LightContentA(props) {
               </svg>
             </a>
           </div>
-          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60">
             <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
               Melanchole
             </h2>
diff --git a/src/blocks/content/light/b.js b/src/blocks/content/light/b.js
index 6b45871..842f06d 100644
--- a/src/blocks/content/light/b.js
+++ b/src/blocks/content/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap w-full mb-20">
           <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
@@ -12,7 +12,7 @@ function LightContentB(props) {
             </h1>
             <div className={`h-1 w-20 bg-${props.theme}-500 rounded`}></div>
           </div>
-          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+          <p className="lg:w-1/2 w-full leading-relaxed text-gray-500">
             Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
             gentrify, subway tile poke farm-to-table. Franzen you probably
             haven&apos;t heard of them man bun deep jianbing selfies heirloom
diff --git a/src/blocks/content/light/c.js b/src/blocks/content/light/c.js
index c569dd0..3854649 100644
--- a/src/blocks/content/light/c.js
+++ b/src/blocks/content/light/c.js
@@ -3,20 +3,20 @@ import PropTypes from  "prop-types";
 
 function LightContentC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
             Pitchfork Kickstarter Taxidermy
           </h1>
-          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+          <p className="lg:w-1/2 w-full leading-relaxed text-gray-500">
             Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
             gentrify, subway tile poke farm-to-table.
           </p>
         </div>
         <div className="flex flex-wrap -m-4">
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
@@ -40,7 +40,7 @@ function LightContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
@@ -66,7 +66,7 @@ function LightContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
@@ -91,7 +91,7 @@ function LightContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
@@ -115,7 +115,7 @@ function LightContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
@@ -139,7 +139,7 @@ function LightContentC(props) {
             </div>
           </div>
           <div className="xl:w-1/3 md:w-1/2 p-4">
-            <div className="border border-gray-300 p-6 rounded-lg">
+            <div className="border border-gray-200 p-6 rounded-lg">
               <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
                 <svg
                   fill="none"
diff --git a/src/blocks/content/light/d.js b/src/blocks/content/light/d.js
index 20155f1..209d5a3 100644
--- a/src/blocks/content/light/d.js
+++ b/src/blocks/content/light/d.js
@@ -3,9 +3,9 @@ import PropTypes from  "prop-types";
 
 function LightContentD(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
-        <div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-300">
+        <div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-200">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
             Pitchfork Kickstarter Taxidermy
           </h1>
@@ -31,7 +31,7 @@ function LightContentD(props) {
           </a>
         </div>
         <div className="flex flex-col md:w-1/2 md:pl-12">
-          <h2 className="title-font font-medium text-gray-800 tracking-widest text-sm mb-3">
+          <h2 className="title-font font-semibold text-gray-800 tracking-wider text-sm mb-3">
             CATEGORIES
           </h2>
           <nav className="flex flex-wrap list-none -mb-1">
diff --git a/src/blocks/content/light/e.js b/src/blocks/content/light/e.js
index 5f7ca4f..4b93ccf 100644
--- a/src/blocks/content/light/e.js
+++ b/src/blocks/content/light/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentE(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <h2 className="sm:text-3xl text-2xl text-gray-900 font-medium title-font mb-2 md:w-2/5">
           Kickstarter Actually Pinterest Brunch Bitters Occupy
diff --git a/src/blocks/content/light/f.js b/src/blocks/content/light/f.js
index 759d407..437334a 100644
--- a/src/blocks/content/light/f.js
+++ b/src/blocks/content/light/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentF(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-col">
         <div className="lg:w-4/6 mx-auto">
           <div className="rounded-lg h-64 overflow-hidden">
@@ -34,13 +34,13 @@ function LightContentF(props) {
                   Phoebe Caulfield
                 </h2>
                 <div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
-                <p className="text-base text-gray-600">
+                <p className="text-base">
                   Raclette knausgaard hella meggs normcore williamsburg enamel
                   pin sartorial venmo tbh hot chicken gentrify portland.
                 </p>
               </div>
             </div>
-            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-300 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
+            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
               <p className="leading-relaxed text-lg mb-4">
                 Meggings portland fingerstache lyft, post-ironic fixie man bun
                 banh mi umami everyday carry hexagon locavore direct trade art
diff --git a/src/blocks/content/light/g.js b/src/blocks/content/light/g.js
index 4044a96..0cd77a8 100644
--- a/src/blocks/content/light/g.js
+++ b/src/blocks/content/light/g.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentG(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -mx-4 -mb-10 text-center">
           <div className="sm:w-1/2 mb-10 px-4">
diff --git a/src/blocks/content/light/h.js b/src/blocks/content/light/h.js
index 44632ca..da0a71f 100644
--- a/src/blocks/content/light/h.js
+++ b/src/blocks/content/light/h.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightContentH(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col">
           <div className="h-1 bg-gray-200 rounded overflow-hidden">
diff --git a/src/blocks/cta/dark/a.js b/src/blocks/cta/dark/a.js
index 5af7242..6d8cef2 100644
--- a/src/blocks/cta/dark/a.js
+++ b/src/blocks/cta/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkCTAA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
           <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-white">
diff --git a/src/blocks/cta/dark/b.js b/src/blocks/cta/dark/b.js
index 5cc014f..3864c87 100644
--- a/src/blocks/cta/dark/b.js
+++ b/src/blocks/cta/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkCTAB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
           <h1 className="title-font font-medium text-3xl text-white">
@@ -14,7 +14,7 @@ function DarkCTAB(props) {
             hammock starladder roathse. Craies vegan tousled etsy austin.
           </p>
         </div>
-        <div className="lg:w-2/6 md:w-1/2 bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
+        <div className="lg:w-2/6 md:w-1/2 bg-gray-800 bg-opacity-50 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
           <h2 className="text-white text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
@@ -29,7 +29,7 @@ function DarkCTAB(props) {
               type="text"
               id="full-name"
               name="full-name"
-              className={`w-full bg-gray-700 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -43,13 +43,13 @@ function DarkCTAB(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-gray-700 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
             Button
           </button>
-          <p className="text-xs text-gray-600 mt-3">
+          <p className="text-xs mt-3">
             Literally you probably haven&apos;t heard of them jean shorts.
           </p>
         </div>
diff --git a/src/blocks/cta/dark/c.js b/src/blocks/cta/dark/c.js
index 69c533d..67c6af9 100644
--- a/src/blocks/cta/dark/c.js
+++ b/src/blocks/cta/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkCTAC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -15,8 +15,8 @@ function DarkCTAC(props) {
             haven&apos;t heard of them man bun deep.
           </p>
         </div>
-        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-end">
-          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-end sm:space-x-4 sm:space-y-0 space-y-4">
+          <div className="relative sm:mb-0 flex-grow w-full">
             <label
               htmlFor="full-name"
               className="leading-7 text-sm text-gray-400"
@@ -27,10 +27,10 @@ function DarkCTAC(props) {
               type="text"
               id="full-name"
               name="full-name"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
-          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+          <div className="relative sm:mb-0 flex-grow w-full">
             <label
               htmlFor="email"
               className="leading-7 text-sm text-gray-400"
@@ -41,7 +41,7 @@ function DarkCTAC(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/cta/dark/d.js b/src/blocks/cta/dark/d.js
index 65fcf58..23591a9 100644
--- a/src/blocks/cta/dark/d.js
+++ b/src/blocks/cta/dark/d.js
@@ -3,18 +3,18 @@ import PropTypes from  "prop-types";
 
 function DarkCTAD(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
         <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
-          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+          <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
           </h2>
           <h1 className="md:text-3xl text-2xl font-medium title-font text-white">
             Master Cleanse Reliac Heirloom
           </h1>
         </div>
-        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
-          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 focus:outline-none">
+        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0 space-x-4">
+          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:bg-opacity-50 focus:outline-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -28,7 +28,7 @@ function DarkCTAD(props) {
               <span className="title-font font-medium">Google Play</span>
             </span>
           </button>
-          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-700 focus:outline-none">
+          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:bg-opacity-50 focus:outline-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
diff --git a/src/blocks/cta/light/a.js b/src/blocks/cta/light/a.js
index 2087624..daddd92 100644
--- a/src/blocks/cta/light/a.js
+++ b/src/blocks/cta/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightCTAA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
           <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
diff --git a/src/blocks/cta/light/b.js b/src/blocks/cta/light/b.js
index c3e4465..4252866 100644
--- a/src/blocks/cta/light/b.js
+++ b/src/blocks/cta/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightCTAB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
         <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
           <h1 className="title-font font-medium text-3xl text-gray-900">
@@ -14,7 +14,7 @@ function LightCTAB(props) {
             hammock starladder roathse. Craies vegan tousled etsy austin.
           </p>
         </div>
-        <div className="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
+        <div className="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
           <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
             Sign Up
           </h2>
@@ -29,7 +29,7 @@ function LightCTAB(props) {
               type="text"
               id="full-name"
               name="full-name"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <div className="relative mb-4">
@@ -43,7 +43,7 @@ function LightCTAB(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/cta/light/c.js b/src/blocks/cta/light/c.js
index 379af14..f0fc13c 100644
--- a/src/blocks/cta/light/c.js
+++ b/src/blocks/cta/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightCTAC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-12">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
@@ -15,8 +15,8 @@ function LightCTAC(props) {
             haven&apos;t heard of them man bun deep.
           </p>
         </div>
-        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-end">
-          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
+          <div className="relative flex-grow w-full">
             <label
               htmlFor="full-name"
               className="leading-7 text-sm text-gray-600"
@@ -27,10 +27,10 @@ function LightCTAC(props) {
               type="text"
               id="full-name"
               name="full-name"
-              className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
-          <div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
+          <div className="relative flex-grow w-full">
             <label
               htmlFor="email"
               className="leading-7 text-sm text-gray-600"
@@ -41,7 +41,7 @@ function LightCTAC(props) {
               type="email"
               id="email"
               name="email"
-              className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+              className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
             />
           </div>
           <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
diff --git a/src/blocks/cta/light/d.js b/src/blocks/cta/light/d.js
index 523476f..ba9e071 100644
--- a/src/blocks/cta/light/d.js
+++ b/src/blocks/cta/light/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightCTAD(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
         <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
@@ -13,8 +13,8 @@ function LightCTAD(props) {
             Master Cleanse Reliac Heirloom
           </h1>
         </div>
-        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
-          <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
+        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0 space-x-4">
+          <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -28,7 +28,7 @@ function LightCTAD(props) {
               <span className="title-font font-medium">Google Play</span>
             </span>
           </button>
-          <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
+          <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
diff --git a/src/blocks/ecommerce/dark/a.js b/src/blocks/ecommerce/dark/a.js
index 07be74a..2cdf107 100644
--- a/src/blocks/ecommerce/dark/a.js
+++ b/src/blocks/ecommerce/dark/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkEcommerceA() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
diff --git a/src/blocks/ecommerce/dark/b.js b/src/blocks/ecommerce/dark/b.js
index f423eb4..bca540f 100644
--- a/src/blocks/ecommerce/dark/b.js
+++ b/src/blocks/ecommerce/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkEcommerceB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+    <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <img
@@ -12,7 +12,7 @@ function DarkEcommerceB(props) {
             src="https://dummyimage.com/400x400"
           />
           <div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
-            <h2 className="text-sm title-font text-gray-600 tracking-widest">
+            <h2 className="text-sm title-font text-gray-500 tracking-widest">
               BRAND NAME
             </h2>
             <h1 className="text-white text-3xl title-font font-medium mb-1">
@@ -26,7 +26,7 @@ function DarkEcommerceB(props) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className={`w-4 h-4 text-${props.theme}-500`}
+                  className={`w-4 h-4 text-${props.theme}-400`}
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -37,7 +37,7 @@ function DarkEcommerceB(props) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className={`w-4 h-4 text-${props.theme}-500`}
+                  className={`w-4 h-4 text-${props.theme}-400`}
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -48,7 +48,7 @@ function DarkEcommerceB(props) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className={`w-4 h-4 text-${props.theme}-500`}
+                  className={`w-4 h-4 text-${props.theme}-400`}
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -59,7 +59,7 @@ function DarkEcommerceB(props) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className={`w-4 h-4 text-${props.theme}-500`}
+                  className={`w-4 h-4 text-${props.theme}-400`}
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -70,14 +70,14 @@ function DarkEcommerceB(props) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className={`w-4 h-4 text-${props.theme}-500`}
+                  className={`w-4 h-4 text-${props.theme}-400`}
                   viewBox="0 0 24 24"
                 >
                   <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                 </svg>
-                <span className="text-gray-500 ml-3">4 Reviews</span>
+                <span className="ml-3">4 Reviews</span>
               </span>
-              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-600">
+              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-500 space-x-2">
                 <a href>
                   <svg
                     fill="currentColor"
@@ -90,7 +90,7 @@ function DarkEcommerceB(props) {
                     <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                   </svg>
                 </a>
-                <a href className="ml-2">
+                <a href>
                   <svg
                     fill="currentColor"
                     strokeLinecap="round"
@@ -102,7 +102,7 @@ function DarkEcommerceB(props) {
                     <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                   </svg>
                 </a>
-                <a href className="ml-2">
+                <a href>
                   <svg
                     fill="currentColor"
                     strokeLinecap="round"
@@ -118,7 +118,7 @@ function DarkEcommerceB(props) {
             </div>
             <p className="leading-relaxed">
               Fam locavore kickstarter distillery. Mixtape chillwave tumeric
-              sriracha taximy chia microdosing tilde DIY. XOXO fam ${props.theme}
+              sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo
               juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
               seitan poutine tumeric. Gastropub blue bottle austin listicle
               pour-over, neutra jean shorts keytar banjo tattooed umami
@@ -134,7 +134,7 @@ function DarkEcommerceB(props) {
               <div className="flex ml-6 items-center">
                 <span className="mr-3">Size</span>
                 <div className="relative">
-                  <select className={`rounded border border-gray-700 bg-gray-800 appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
+                  <select className={`rounded border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 bg-transparent appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
                     <option>SM</option>
                     <option>M</option>
                     <option>L</option>
@@ -163,7 +163,7 @@ function DarkEcommerceB(props) {
               <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
                 Button
               </button>
-              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
+              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
                 <svg
                   fill="currentColor"
                   strokeLinecap="round"
diff --git a/src/blocks/ecommerce/dark/c.js b/src/blocks/ecommerce/dark/c.js
index 811034b..ea611b5 100644
--- a/src/blocks/ecommerce/dark/c.js
+++ b/src/blocks/ecommerce/dark/c.js
@@ -3,18 +3,18 @@ import PropTypes from  "prop-types";
 
 function DarkEcommerceC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+    <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
-            <h2 className="text-sm title-font text-gray-600 tracking-widest">
+            <h2 className="text-sm title-font text-gray-500 tracking-widest">
               BRAND NAME
             </h2>
             <h1 className="text-white text-3xl title-font font-medium mb-4">
               Animated Night Hill Illustrations
             </h1>
             <div className="flex mb-4">
-              <a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
+              <a href className={`flex-grow text-${props.theme}-400 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
                 Description
               </a>
               <a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
@@ -50,7 +50,7 @@ function DarkEcommerceC(props) {
               <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
                 Button
               </button>
-              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
+              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
                 <svg
                   fill="currentColor"
                   strokeLinecap="round"
diff --git a/src/blocks/ecommerce/light/a.js b/src/blocks/ecommerce/light/a.js
index 10f9d99..0a0a5a3 100644
--- a/src/blocks/ecommerce/light/a.js
+++ b/src/blocks/ecommerce/light/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightEcommerceA() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
diff --git a/src/blocks/ecommerce/light/b.js b/src/blocks/ecommerce/light/b.js
index 227ed2a..4b585c3 100644
--- a/src/blocks/ecommerce/light/b.js
+++ b/src/blocks/ecommerce/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightEcommerceB(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
+    <section className="text-gray-600 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <img
@@ -77,7 +77,7 @@ function LightEcommerceB(props) {
                 </svg>
                 <span className="text-gray-600 ml-3">4 Reviews</span>
               </span>
-              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200">
+              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200 space-x-2s">
                 <a href className="text-gray-500">
                   <svg
                     fill="currentColor"
@@ -90,7 +90,7 @@ function LightEcommerceB(props) {
                     <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                   </svg>
                 </a>
-                <a href className="ml-2 text-gray-500">
+                <a href className="text-gray-500">
                   <svg
                     fill="currentColor"
                     strokeLinecap="round"
@@ -102,7 +102,7 @@ function LightEcommerceB(props) {
                     <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                   </svg>
                 </a>
-                <a href className="ml-2 text-gray-500">
+                <a href className="text-gray-500">
                   <svg
                     fill="currentColor"
                     strokeLinecap="round"
@@ -124,7 +124,7 @@ function LightEcommerceB(props) {
               pour-over, neutra jean shorts keytar banjo tattooed umami
               cardigan.
             </p>
-            <div className="flex mt-6 items-center pb-5 border-b-2 border-gray-200 mb-5">
+            <div className="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
               <div className="flex">
                 <span className="mr-3">Color</span>
                 <button className="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
@@ -134,7 +134,7 @@ function LightEcommerceB(props) {
               <div className="flex ml-6 items-center">
                 <span className="mr-3">Size</span>
                 <div className="relative">
-                  <select className={`rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
+                  <select className={`rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
                     <option>SM</option>
                     <option>M</option>
                     <option>L</option>
diff --git a/src/blocks/ecommerce/light/c.js b/src/blocks/ecommerce/light/c.js
index 5c6c191..5f648e3 100644
--- a/src/blocks/ecommerce/light/c.js
+++ b/src/blocks/ecommerce/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightEcommerceC(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
+    <section className="text-gray-600 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="lg:w-4/5 mx-auto flex flex-wrap">
           <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
@@ -31,15 +31,15 @@ function LightEcommerceC(props) {
               seitan poutine tumeric. Gastropub blue bottle austin listicle
               pour-over, neutra jean.
             </p>
-            <div className="flex border-t border-gray-300 py-2">
+            <div className="flex border-t border-gray-200 py-2">
               <span className="text-gray-500">Color</span>
               <span className="ml-auto text-gray-900">Blue</span>
             </div>
-            <div className="flex border-t border-gray-300 py-2">
+            <div className="flex border-t border-gray-200 py-2">
               <span className="text-gray-500">Size</span>
               <span className="ml-auto text-gray-900">Medium</span>
             </div>
-            <div className="flex border-t border-b mb-6 border-gray-300 py-2">
+            <div className="flex border-t border-b mb-6 border-gray-200 py-2">
               <span className="text-gray-500">Quantity</span>
               <span className="ml-auto text-gray-900">4</span>
             </div>
diff --git a/src/blocks/feature/dark/a.js b/src/blocks/feature/dark/a.js
index 2192cad..dc04ed9 100644
--- a/src/blocks/feature/dark/a.js
+++ b/src/blocks/feature/dark/a.js
@@ -3,14 +3,14 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
           Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
           Selfies Wayfarers
         </h1>
-        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -34,7 +34,7 @@ function DarkFeatureA(props) {
                 banh mi pug VHS try-hard ugh iceland kickstarter tumblr
                 live-edge tilde.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -50,7 +50,7 @@ function DarkFeatureA(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -76,7 +76,7 @@ function DarkFeatureA(props) {
                 banh mi pug VHS try-hard ugh iceland kickstarter tumblr
                 live-edge tilde.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -92,7 +92,7 @@ function DarkFeatureA(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -117,7 +117,7 @@ function DarkFeatureA(props) {
                 banh mi pug VHS try-hard ugh iceland kickstarter tumblr
                 live-edge tilde.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
diff --git a/src/blocks/feature/dark/b.js b/src/blocks/feature/dark/b.js
index 1d46c82..a694310 100644
--- a/src/blocks/feature/dark/b.js
+++ b/src/blocks/feature/dark/b.js
@@ -3,13 +3,13 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-white mb-4">
             Raw Denim Heirloom Man Braid
           </h1>
-          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-400 text-opacity-80">
             Blue bottle crucifix vinyl post-ironic four dollar toast vegan
             taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
             pug.
@@ -18,8 +18,8 @@ function DarkFeatureB(props) {
             <div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
           </div>
         </div>
-        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -42,7 +42,7 @@ function DarkFeatureB(props) {
                 taxidermy. Gastropub indxgo juice poutine, ramps microdosing
                 banh mi pug VHS try-hard.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -58,7 +58,7 @@ function DarkFeatureB(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -83,7 +83,7 @@ function DarkFeatureB(props) {
                 taxidermy. Gastropub indxgo juice poutine, ramps microdosing
                 banh mi pug VHS try-hard.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -99,7 +99,7 @@ function DarkFeatureB(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -123,7 +123,7 @@ function DarkFeatureB(props) {
                 taxidermy. Gastropub indxgo juice poutine, ramps microdosing
                 banh mi pug VHS try-hard.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
diff --git a/src/blocks/feature/dark/c.js b/src/blocks/feature/dark/c.js
index 02a4a66..908bf82 100644
--- a/src/blocks/feature/dark/c.js
+++ b/src/blocks/feature/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
           <img
@@ -35,7 +35,7 @@ function DarkFeatureC(props) {
                 Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                 taxidermy. Gastropub indxgo juice poutine.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -75,7 +75,7 @@ function DarkFeatureC(props) {
                 Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                 taxidermy. Gastropub indxgo juice poutine.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
@@ -114,7 +114,7 @@ function DarkFeatureC(props) {
                 Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                 taxidermy. Gastropub indxgo juice poutine.
               </p>
-              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                 Learn More
                 <svg
                   fill="none"
diff --git a/src/blocks/feature/dark/d.js b/src/blocks/feature/dark/d.js
index 7e0cf16..59f44d4 100644
--- a/src/blocks/feature/dark/d.js
+++ b/src/blocks/feature/dark/d.js
@@ -29,7 +29,7 @@ function DarkFeatureD(props) {
                   Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                   taxidermy. Gastropub indxgo juice poutine.
                 </p>
-                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                   Learn More
                   <svg
                     fill="none"
@@ -70,7 +70,7 @@ function DarkFeatureD(props) {
                   Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                   taxidermy. Gastropub indxgo juice poutine.
                 </p>
-                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                   Learn More
                   <svg
                     fill="none"
diff --git a/src/blocks/feature/dark/e.js b/src/blocks/feature/dark/e.js
index eabda6c..79fe9de 100644
--- a/src/blocks/feature/dark/e.js
+++ b/src/blocks/feature/dark/e.js
@@ -3,10 +3,10 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureE(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-col text-center w-full mb-20">
-          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+          <h2 className={`text-xs text-${props.theme}-400 tracking-widest font-medium title-font mb-1`}>
             ROOF PARTY POLAROID
           </h2>
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-white">
@@ -15,7 +15,7 @@ function DarkFeatureE(props) {
         </div>
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/3">
-            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
               <div className="flex items-center mb-3">
                 <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
                   <svg
@@ -39,7 +39,7 @@ function DarkFeatureE(props) {
                   Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                   taxidermy. Gastropub indxgo juice poutine.
                 </p>
-                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                   Learn More
                   <svg
                     fill="none"
@@ -57,7 +57,7 @@ function DarkFeatureE(props) {
             </div>
           </div>
           <div className="p-4 md:w-1/3">
-            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
               <div className="flex items-center mb-3">
                 <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
                   <svg
@@ -82,7 +82,7 @@ function DarkFeatureE(props) {
                   Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                   taxidermy. Gastropub indxgo juice poutine.
                 </p>
-                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                   Learn More
                   <svg
                     fill="none"
@@ -100,7 +100,7 @@ function DarkFeatureE(props) {
             </div>
           </div>
           <div className="p-4 md:w-1/3">
-            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+            <div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
               <div className="flex items-center mb-3">
                 <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
                   <svg
@@ -126,7 +126,7 @@ function DarkFeatureE(props) {
                   Blue bottle crucifix vinyl post-ironic four dollar toast vegan
                   taxidermy. Gastropub indxgo juice poutine.
                 </p>
-                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
                   Learn More
                   <svg
                     fill="none"
diff --git a/src/blocks/feature/dark/f.js b/src/blocks/feature/dark/f.js
index 1eda97f..608a14e 100644
--- a/src/blocks/feature/dark/f.js
+++ b/src/blocks/feature/dark/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureF(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
           <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
@@ -27,7 +27,7 @@ function DarkFeatureF(props) {
               Blue bottle crucifix vinyl post-ironic four dollar toast vegan
               taxidermy. Gastropub indxgo juice poutine.
             </p>
-            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
@@ -52,7 +52,7 @@ function DarkFeatureF(props) {
               Blue bottle crucifix vinyl post-ironic four dollar toast vegan
               taxidermy. Gastropub indxgo juice poutine.
             </p>
-            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
@@ -106,7 +106,7 @@ function DarkFeatureF(props) {
               Blue bottle crucifix vinyl post-ironic four dollar toast vegan
               taxidermy. Gastropub indxgo juice poutine.
             </p>
-            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+            <a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
               Learn More
               <svg
                 fill="none"
diff --git a/src/blocks/feature/dark/g.js b/src/blocks/feature/dark/g.js
index e869129..4ab396d 100644
--- a/src/blocks/feature/dark/g.js
+++ b/src/blocks/feature/dark/g.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureG(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
@@ -24,7 +24,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -43,7 +43,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -62,7 +62,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -81,7 +81,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -100,7 +100,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -119,7 +119,7 @@ function DarkFeatureG(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
-                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
                 viewBox="0 0 24 24"
               >
                 <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
diff --git a/src/blocks/feature/dark/h.js b/src/blocks/feature/dark/h.js
index 1015c37..9563f5b 100644
--- a/src/blocks/feature/dark/h.js
+++ b/src/blocks/feature/dark/h.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFeatureH(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
@@ -20,8 +20,8 @@ function DarkFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
               SHOOTING STARS
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -37,7 +37,7 @@ function DarkFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -53,7 +53,7 @@ function DarkFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -69,7 +69,7 @@ function DarkFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -85,7 +85,7 @@ function DarkFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -107,8 +107,8 @@ function DarkFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
               THE 400 BLOWS
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -124,7 +124,7 @@ function DarkFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -140,7 +140,7 @@ function DarkFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -156,7 +156,7 @@ function DarkFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -172,7 +172,7 @@ function DarkFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -194,8 +194,8 @@ function DarkFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
               THE CATALYZER
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -211,7 +211,7 @@ function DarkFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -227,7 +227,7 @@ function DarkFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -243,7 +243,7 @@ function DarkFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -259,7 +259,7 @@ function DarkFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -281,8 +281,8 @@ function DarkFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
               NEPTUNE
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -298,7 +298,7 @@ function DarkFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -314,7 +314,7 @@ function DarkFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -330,7 +330,7 @@ function DarkFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -346,7 +346,7 @@ function DarkFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
diff --git a/src/blocks/feature/light/a.js b/src/blocks/feature/light/a.js
index 06ff102..85903ad 100644
--- a/src/blocks/feature/light/a.js
+++ b/src/blocks/feature/light/a.js
@@ -3,14 +3,14 @@ import PropTypes from  "prop-types";
 
 function LightFeatureA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
           Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
           Selfies Wayfarers
         </h1>
-        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -50,7 +50,7 @@ function LightFeatureA(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -92,7 +92,7 @@ function LightFeatureA(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+          <div className="p-4 md:w-1/3 flex">
             <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
               <svg
                 fill="none"
diff --git a/src/blocks/feature/light/b.js b/src/blocks/feature/light/b.js
index d1e0174..640255a 100644
--- a/src/blocks/feature/light/b.js
+++ b/src/blocks/feature/light/b.js
@@ -3,13 +3,13 @@ import PropTypes from  "prop-types";
 
 function LightFeatureB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">
             Raw Denim Heirloom Man Braid
           </h1>
-          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-500s">
             Blue bottle crucifix vinyl post-ironic four dollar toast vegan
             taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
             pug.
@@ -18,8 +18,8 @@ function LightFeatureB(props) {
             <div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
           </div>
         </div>
-        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -58,7 +58,7 @@ function LightFeatureB(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
@@ -99,7 +99,7 @@ function LightFeatureB(props) {
               </a>
             </div>
           </div>
-          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+          <div className="p-4 md:w-1/3 flex flex-col text-center items-center">
             <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
               <svg
                 fill="none"
diff --git a/src/blocks/feature/light/c.js b/src/blocks/feature/light/c.js
index 4ba8995..3ef50e3 100644
--- a/src/blocks/feature/light/c.js
+++ b/src/blocks/feature/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFeatureC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
           <img
diff --git a/src/blocks/feature/light/d.js b/src/blocks/feature/light/d.js
index 35519ac..7901345 100644
--- a/src/blocks/feature/light/d.js
+++ b/src/blocks/feature/light/d.js
@@ -3,11 +3,11 @@ import PropTypes from  "prop-types";
 
 function LightFeatureD(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -m-4">
           <div className="p-4 lg:w-1/2 md:w-full">
-            <div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
+            <div className="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
               <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
                 <svg
                   fill="none"
@@ -47,7 +47,7 @@ function LightFeatureD(props) {
             </div>
           </div>
           <div className="p-4 lg:w-1/2 md:w-full">
-            <div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
+            <div className="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
               <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
                 <svg
                   fill="none"
diff --git a/src/blocks/feature/light/e.js b/src/blocks/feature/light/e.js
index 740e4df..6536c97 100644
--- a/src/blocks/feature/light/e.js
+++ b/src/blocks/feature/light/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFeatureE(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
diff --git a/src/blocks/feature/light/f.js b/src/blocks/feature/light/f.js
index 2fb2865..4815684 100644
--- a/src/blocks/feature/light/f.js
+++ b/src/blocks/feature/light/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFeatureF(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
           <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
diff --git a/src/blocks/feature/light/g.js b/src/blocks/feature/light/g.js
index 0f5b109..2c0e1a1 100644
--- a/src/blocks/feature/light/g.js
+++ b/src/blocks/feature/light/g.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFeatureG(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
@@ -17,7 +17,7 @@ function LightFeatureG(props) {
         </div>
         <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -36,7 +36,7 @@ function LightFeatureG(props) {
             </div>
           </div>
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -55,7 +55,7 @@ function LightFeatureG(props) {
             </div>
           </div>
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -74,7 +74,7 @@ function LightFeatureG(props) {
             </div>
           </div>
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -93,7 +93,7 @@ function LightFeatureG(props) {
             </div>
           </div>
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -110,7 +110,7 @@ function LightFeatureG(props) {
             </div>
           </div>
           <div className="p-2 sm:w-1/2 w-full">
-            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+            <div className="bg-gray-100 rounded flex p-4 h-full items-center">
               <svg
                 fill="none"
                 stroke="currentColor"
diff --git a/src/blocks/feature/light/h.js b/src/blocks/feature/light/h.js
index 7340e13..6f4daa8 100644
--- a/src/blocks/feature/light/h.js
+++ b/src/blocks/feature/light/h.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFeatureH(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="text-center mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
@@ -20,8 +20,8 @@ function LightFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
               SHOOTING STARS
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -37,7 +37,7 @@ function LightFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -53,7 +53,7 @@ function LightFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -69,7 +69,7 @@ function LightFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -85,7 +85,7 @@ function LightFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -107,8 +107,8 @@ function LightFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
               THE 400 BLOWS
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -124,7 +124,7 @@ function LightFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -140,7 +140,7 @@ function LightFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -156,7 +156,7 @@ function LightFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -172,7 +172,7 @@ function LightFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -194,8 +194,8 @@ function LightFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
               THE CATALYZER
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -211,7 +211,7 @@ function LightFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -227,7 +227,7 @@ function LightFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -243,7 +243,7 @@ function LightFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -259,7 +259,7 @@ function LightFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -281,8 +281,8 @@ function LightFeatureH(props) {
             <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
               NEPTUNE
             </h2>
-            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
-              <a href className="mb-2">
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -298,7 +298,7 @@ function LightFeatureH(props) {
                 </span>
                 First Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -314,7 +314,7 @@ function LightFeatureH(props) {
                 </span>
                 Second Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -330,7 +330,7 @@ function LightFeatureH(props) {
                 </span>
                 Third Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
@@ -346,7 +346,7 @@ function LightFeatureH(props) {
                 </span>
                 Fourth Link
               </a>
-              <a href className="mb-2">
+              <a href>
                 <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
                   <svg
                     fill="none"
diff --git a/src/blocks/footer/dark/a.js b/src/blocks/footer/dark/a.js
index 0704358..098beae 100644
--- a/src/blocks/footer/dark/a.js
+++ b/src/blocks/footer/dark/a.js
@@ -3,8 +3,8 @@ import PropTypes from  "prop-types";
 
 function DarkFooterA(props) {
   return (
-    <footer className="text-gray-500 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+    <footer className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
             <svg
@@ -21,7 +21,7 @@ function DarkFooterA(props) {
             </svg>
             <span className="ml-3 text-xl">tailblocks</span>
           </a>
-          <p className="mt-2 text-sm text-gray-700">
+          <p className="mt-2 text-sm text-gray-500">
             Air plant banjo lyft occupy retro adaptogen indego
           </p>
         </div>
@@ -32,16 +32,16 @@ function DarkFooterA(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -51,16 +51,16 @@ function DarkFooterA(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -70,16 +70,16 @@ function DarkFooterA(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -89,31 +89,31 @@ function DarkFooterA(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
         </div>
       </div>
-      <div className="bg-gray-800">
+      <div className="bg-gray-800 bg-opacity-75">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
-          <p className="text-gray-600 text-sm text-center sm:text-left">
+          <p className="text-gray-400 text-sm text-center sm:text-left">
             © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-500 ml-1" target="_blank">
               @knyttneve
             </a>
           </p>
           <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
-            <a href className="text-gray-600">
+            <a href className="text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -125,7 +125,7 @@ function DarkFooterA(props) {
                 <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -137,7 +137,7 @@ function DarkFooterA(props) {
                 <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -151,7 +151,7 @@ function DarkFooterA(props) {
                 <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 stroke="currentColor"
diff --git a/src/blocks/footer/dark/b.js b/src/blocks/footer/dark/b.js
index f452389..b09206f 100644
--- a/src/blocks/footer/dark/b.js
+++ b/src/blocks/footer/dark/b.js
@@ -1,10 +1,11 @@
+
 import React from "react";
 import PropTypes from  "prop-types";
 
 function DarkFooterB(props) {
   return (
-    <footer className="text-gray-500 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+    <footer className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
             <svg
@@ -21,7 +22,7 @@ function DarkFooterB(props) {
             </svg>
             <span className="ml-3 text-xl">tailblocks</span>
           </a>
-          <p className="mt-2 text-sm text-gray-700">
+          <p className="mt-2 text-sm text-gray-500">
             Air plant banjo lyft occupy retro adaptogen indego
           </p>
         </div>
@@ -32,16 +33,16 @@ function DarkFooterB(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -51,16 +52,16 @@ function DarkFooterB(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -70,16 +71,16 @@ function DarkFooterB(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -89,31 +90,31 @@ function DarkFooterB(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
         </div>
       </div>
-      <div className="bg-gray-800">
+      <div className="bg-gray-800 bg-opacity-75">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
-          <p className="text-gray-600 text-sm text-center sm:text-left">
+          <p className="text-gray-400 text-sm text-center sm:text-left">
             © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" rel="noopener noreferrer" target="_blank">
               @knyttneve
             </a>
           </p>
           <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
-            <a href className="text-gray-600">
+            <a href className="text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -125,7 +126,7 @@ function DarkFooterB(props) {
                 <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -137,7 +138,7 @@ function DarkFooterB(props) {
                 <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -151,7 +152,7 @@ function DarkFooterB(props) {
                 <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 stroke="currentColor"
diff --git a/src/blocks/footer/dark/c.js b/src/blocks/footer/dark/c.js
index eb13e2a..5ee7d1a 100644
--- a/src/blocks/footer/dark/c.js
+++ b/src/blocks/footer/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFooterC(props) {
   return (
-    <footer className="text-gray-500 bg-gray-900 body-font">
+    <footer className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
           <div className="lg:w-1/6 md:w-1/2 w-full px-4">
@@ -12,16 +12,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -31,16 +31,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -50,16 +50,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -69,16 +69,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -88,16 +88,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -107,16 +107,16 @@ function DarkFooterC(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -124,7 +124,7 @@ function DarkFooterC(props) {
       </div>
       <div className="border-t border-gray-800">
         <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
-          <div className="flex md:flex-no-wrap flex-wrap justify-center items-end md:justify-start">
+          <div className="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
             <div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
               <label
                 htmlFor="footer-field"
@@ -136,19 +136,19 @@ function DarkFooterC(props) {
                 type="text"
                 id="footer-field"
                 name="footer-field"
-                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
               Button
             </button>
-            <p className="text-gray-600 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
+            <p className="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
               Bitters chicharrones fanny pack
               <br className="lg:block hidden"></br>waistcoat green juice
             </p>
           </div>
           <span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
-            <a href className="text-gray-600">
+            <a href className="text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -160,7 +160,7 @@ function DarkFooterC(props) {
                 <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -172,7 +172,7 @@ function DarkFooterC(props) {
                 <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -186,7 +186,7 @@ function DarkFooterC(props) {
                 <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 stroke="currentColor"
@@ -206,15 +206,15 @@ function DarkFooterC(props) {
           </span>
         </div>
       </div>
-      <div className="bg-gray-800">
+      <div className="bg-gray-800 bg-opacity-75">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
-          <p className="text-gray-600 text-sm text-center sm:text-left">
+          <p className="text-gray-400 text-sm text-center sm:text-left">
             © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
               @knyttneve
             </a>
           </p>
-          <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-600 text-sm">
+          <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-400 text-sm">
             Enamel pin tousled raclette tacos irony
           </span>
         </div>
diff --git a/src/blocks/footer/dark/d.js b/src/blocks/footer/dark/d.js
index d4ad4b9..d140c41 100644
--- a/src/blocks/footer/dark/d.js
+++ b/src/blocks/footer/dark/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFooterD(props) {
   return (
-    <footer className="text-gray-500 bg-gray-900 body-font">
+    <footer className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
         <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
           <svg
@@ -20,14 +20,14 @@ function DarkFooterD(props) {
           </svg>
           <span className="ml-3 text-xl">tailblocks</span>
         </a>
-        <p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
+        <p className="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
           © 2020 tailblocks —
           <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
             @knyttneve
           </a>
         </p>
         <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
-          <a href className="text-gray-600">
+          <a href className="text-gray-400">
             <svg
               fill="currentColor"
               strokeLinecap="round"
@@ -39,7 +39,7 @@ function DarkFooterD(props) {
               <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
             </svg>
           </a>
-          <a href className="ml-3 text-gray-600">
+          <a href className="ml-3 text-gray-400">
             <svg
               fill="currentColor"
               strokeLinecap="round"
@@ -51,7 +51,7 @@ function DarkFooterD(props) {
               <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
             </svg>
           </a>
-          <a href className="ml-3 text-gray-600">
+          <a href className="ml-3 text-gray-400">
             <svg
               fill="none"
               stroke="currentColor"
@@ -65,7 +65,7 @@ function DarkFooterD(props) {
               <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
             </svg>
           </a>
-          <a href className="ml-3 text-gray-600">
+          <a href className="ml-3 text-gray-400">
             <svg
               fill="currentColor"
               stroke="currentColor"
diff --git a/src/blocks/footer/dark/e.js b/src/blocks/footer/dark/e.js
index 5b106c6..94e9e19 100644
--- a/src/blocks/footer/dark/e.js
+++ b/src/blocks/footer/dark/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkFooterE(props) {
   return (
-    <footer className="text-gray-500 bg-gray-900 body-font">
+    <footer className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap md:text-left text-center order-first">
           <div className="lg:w-1/4 md:w-1/2 w-full px-4">
@@ -12,16 +12,16 @@ function DarkFooterE(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -31,16 +31,16 @@ function DarkFooterE(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -50,16 +50,16 @@ function DarkFooterE(props) {
             </h2>
             <nav className="list-none mb-10">
               <li>
-                <a href className="text-gray-600 hover:text-white">First Link</a>
+                <a href className="text-gray-400 hover:text-white">First Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Second Link</a>
+                <a href className="text-gray-400 hover:text-white">Second Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Third Link</a>
+                <a href className="text-gray-400 hover:text-white">Third Link</a>
               </li>
               <li>
-                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+                <a href className="text-gray-400 hover:text-white">Fourth Link</a>
               </li>
             </nav>
           </div>
@@ -67,7 +67,7 @@ function DarkFooterE(props) {
             <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
               SUBSCRIBE
             </h2>
-            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
+            <div className="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
               <div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
                 <label
                   htmlFor="footer-field"
@@ -79,21 +79,21 @@ function DarkFooterE(props) {
                   type="text"
                   id="footer-field"
                   name="footer-field"
-                  className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
               <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
                 Button
               </button>
             </div>
-            <p className="text-gray-600 text-sm mt-2 md:text-left text-center">
+            <p className="text-gray-500 text-sm mt-2 md:text-left text-center">
               Bitters chicharrones fanny pack
               <br className="lg:block hidden"></br>waistcoat green juice
             </p>
           </div>
         </div>
       </div>
-      <div className="bg-gray-800">
+      <div className="bg-gray-800 bg-opacity-75">
         <div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
             <svg
@@ -110,14 +110,14 @@ function DarkFooterE(props) {
             </svg>
             <span className="ml-3 text-xl">tailblocks</span>
           </a>
-          <p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
+          <p className="text-sm text-gray-400 sm:ml-6 sm:mt-0 mt-4">
             © 2020 tailblocks —
             <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
               @knyttneve
             </a>
           </p>
           <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
-            <a href className="text-gray-600">
+            <a href className="text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -129,7 +129,7 @@ function DarkFooterE(props) {
                 <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 strokeLinecap="round"
@@ -141,7 +141,7 @@ function DarkFooterE(props) {
                 <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="none"
                 stroke="currentColor"
@@ -155,7 +155,7 @@ function DarkFooterE(props) {
                 <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
               </svg>
             </a>
-            <a href className="ml-3 text-gray-600">
+            <a href className="ml-3 text-gray-400">
               <svg
                 fill="currentColor"
                 stroke="currentColor"
diff --git a/src/blocks/footer/light/a.js b/src/blocks/footer/light/a.js
index 05ca12b..a3feeea 100644
--- a/src/blocks/footer/light/a.js
+++ b/src/blocks/footer/light/a.js
@@ -3,8 +3,8 @@ import PropTypes from  "prop-types";
 
 function LightFooterA(props) {
   return (
-    <footer className="text-gray-700 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+    <footer className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
             <svg
@@ -104,7 +104,7 @@ function LightFooterA(props) {
           </div>
         </div>
       </div>
-      <div className="bg-gray-200">
+      <div className="bg-gray-100">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
             © 2020 tailblocks —
diff --git a/src/blocks/footer/light/b.js b/src/blocks/footer/light/b.js
index 173cff6..cc086cc 100644
--- a/src/blocks/footer/light/b.js
+++ b/src/blocks/footer/light/b.js
@@ -3,8 +3,8 @@ import PropTypes from  "prop-types";
 
 function LightFooterB(props) {
   return (
-    <footer className="text-gray-700 body-font">
-      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+    <footer className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
         <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
             <svg
@@ -104,7 +104,7 @@ function LightFooterB(props) {
           </div>
         </div>
       </div>
-      <div className="bg-gray-200">
+      <div className="bg-gray-100">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
             © 2020 tailblocks —
diff --git a/src/blocks/footer/light/c.js b/src/blocks/footer/light/c.js
index b29f4c1..c3fbf47 100644
--- a/src/blocks/footer/light/c.js
+++ b/src/blocks/footer/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFooterC(props) {
   return (
-    <footer className="text-gray-700 body-font">
+    <footer className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
           <div className="lg:w-1/6 md:w-1/2 w-full px-4">
@@ -124,7 +124,7 @@ function LightFooterC(props) {
       </div>
       <div className="border-t border-gray-200">
         <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
-          <div className="flex md:flex-no-wrap flex-wrap justify-center items-end md:justify-start">
+          <div className="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
             <div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
               <label
                 htmlFor="footer-field"
@@ -136,7 +136,7 @@ function LightFooterC(props) {
                 type="text"
                 id="footer-field"
                 name="footer-field"
-                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:bg-transparent focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
@@ -206,7 +206,7 @@ function LightFooterC(props) {
           </span>
         </div>
       </div>
-      <div className="bg-gray-200">
+      <div className="bg-gray-100">
         <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
           <p className="text-gray-500 text-sm text-center sm:text-left">
             © 2020 tailblocks —
diff --git a/src/blocks/footer/light/d.js b/src/blocks/footer/light/d.js
index 705e14b..9daf9b8 100644
--- a/src/blocks/footer/light/d.js
+++ b/src/blocks/footer/light/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFooterD(props) {
   return (
-    <footer className="text-gray-700 body-font">
+    <footer className="text-gray-600 body-font">
       <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
         <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
           <svg
diff --git a/src/blocks/footer/light/e.js b/src/blocks/footer/light/e.js
index 7ebd084..72c406c 100644
--- a/src/blocks/footer/light/e.js
+++ b/src/blocks/footer/light/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightFooterE(props) {
   return (
-    <footer className="text-gray-700 body-font">
+    <footer className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap md:text-left text-center order-first">
           <div className="lg:w-1/4 md:w-1/2 w-full px-4">
@@ -67,7 +67,7 @@ function LightFooterE(props) {
             <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
               SUBSCRIBE
             </h2>
-            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
+            <div className="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
               <div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
                 <label
                   htmlFor="footer-field"
@@ -79,7 +79,7 @@ function LightFooterE(props) {
                   type="text"
                   id="footer-field"
                   name="footer-field"
-                  className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                  className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
                 />
               </div>
               <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
@@ -93,7 +93,7 @@ function LightFooterE(props) {
           </div>
         </div>
       </div>
-      <div className="bg-gray-200">
+      <div className="bg-gray-100">
         <div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
           <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
             <svg
diff --git a/src/blocks/gallery/dark/a.js b/src/blocks/gallery/dark/a.js
index f32baab..e249f8d 100644
--- a/src/blocks/gallery/dark/a.js
+++ b/src/blocks/gallery/dark/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkGalleryA() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex w-full mb-20 flex-wrap">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-white lg:w-1/3 lg:mb-0 mb-4">
diff --git a/src/blocks/gallery/dark/c.js b/src/blocks/gallery/dark/c.js
index 2312ab6..c81ffb5 100644
--- a/src/blocks/gallery/dark/c.js
+++ b/src/blocks/gallery/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkGalleryC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -24,7 +24,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/600x360"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
@@ -45,7 +45,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/601x361"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
@@ -66,7 +66,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/603x363"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
@@ -87,7 +87,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/602x362"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
@@ -108,7 +108,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/605x365"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
@@ -129,7 +129,7 @@ function DarkGalleryC(props) {
                 src="https://dummyimage.com/606x366"
               />
               <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
-                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
+                <h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
                   THE SUBTITLE
                 </h2>
                 <h1 className="title-font text-lg font-medium text-white mb-3">
diff --git a/src/blocks/gallery/light/a.js b/src/blocks/gallery/light/a.js
index 1f3fcdf..ff3ee33 100644
--- a/src/blocks/gallery/light/a.js
+++ b/src/blocks/gallery/light/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightGalleryA() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex w-full mb-20 flex-wrap">
           <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">
diff --git a/src/blocks/gallery/light/b.js b/src/blocks/gallery/light/b.js
index a658985..83ba4f9 100644
--- a/src/blocks/gallery/light/b.js
+++ b/src/blocks/gallery/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightGalleryB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="lg:w-2/3 mx-auto">
           <div className="flex flex-wrap w-full bg-gray-100 py-32 px-10 relative mb-4">
diff --git a/src/blocks/gallery/light/c.js b/src/blocks/gallery/light/c.js
index a2f92d5..4df4254 100644
--- a/src/blocks/gallery/light/c.js
+++ b/src/blocks/gallery/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightGalleryC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
diff --git a/src/blocks/header/dark/a.js b/src/blocks/header/dark/a.js
index 2f85d0c..36a5a5c 100644
--- a/src/blocks/header/dark/a.js
+++ b/src/blocks/header/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkHeaderA(props) {
   return (
-    <header className="text-gray-500 bg-gray-900 body-font">
+    <header className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
           <svg
diff --git a/src/blocks/header/dark/b.js b/src/blocks/header/dark/b.js
index cdef061..dcc12f9 100644
--- a/src/blocks/header/dark/b.js
+++ b/src/blocks/header/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeaderB(props) {
   return (
-    <header className="text-gray-500 bg-gray-900 body-font">
+    <header className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
           <svg
diff --git a/src/blocks/header/dark/c.js b/src/blocks/header/dark/c.js
index 34b82bf..bd79065 100644
--- a/src/blocks/header/dark/c.js
+++ b/src/blocks/header/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeaderC(props) {
   return (
-    <header className="text-gray-500 bg-gray-900 body-font">
+    <header className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
           <a href className="mr-5 hover:text-white">First Link</a>
diff --git a/src/blocks/header/dark/d.js b/src/blocks/header/dark/d.js
index 45370f2..57ebe34 100644
--- a/src/blocks/header/dark/d.js
+++ b/src/blocks/header/dark/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeaderD(props) {
   return (
-    <header className="text-gray-500 bg-gray-900 body-font">
+    <header className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
           <svg
diff --git a/src/blocks/header/light/a.js b/src/blocks/header/light/a.js
index e852abf..9a45d7d 100644
--- a/src/blocks/header/light/a.js
+++ b/src/blocks/header/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeaderA(props) {
   return (
-    <header className="text-gray-700 body-font">
+    <header className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
           <svg
@@ -26,7 +26,7 @@ function LightHeaderA(props) {
           <a href className="mr-5 hover:text-gray-900">Third Link</a>
           <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
         </nav>
-        <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
+        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button
           <svg
             fill="none"
diff --git a/src/blocks/header/light/b.js b/src/blocks/header/light/b.js
index 1edf6a2..f1ec8e2 100644
--- a/src/blocks/header/light/b.js
+++ b/src/blocks/header/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeaderB(props) {
   return (
-    <header className="text-gray-700 body-font">
+    <header className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
           <svg
@@ -26,7 +26,7 @@ function LightHeaderB(props) {
           <a href className="mr-5 hover:text-gray-900">Third Link</a>
           <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
         </nav>
-        <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
+        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button
           <svg
             fill="none"
diff --git a/src/blocks/header/light/c.js b/src/blocks/header/light/c.js
index 7a99481..fe7fc04 100644
--- a/src/blocks/header/light/c.js
+++ b/src/blocks/header/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeaderC(props) {
   return (
-    <header className="text-gray-700 body-font">
+    <header className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
           <a href className="mr-5 hover:text-gray-900">First Link</a>
@@ -27,7 +27,7 @@ function LightHeaderC(props) {
           <span className="ml-3 text-xl">tailblocks</span>
         </a>
         <div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
-          <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
+          <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
             Button
             <svg
               fill="none"
diff --git a/src/blocks/header/light/d.js b/src/blocks/header/light/d.js
index c53b813..c5bcc36 100644
--- a/src/blocks/header/light/d.js
+++ b/src/blocks/header/light/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeaderD(props) {
   return (
-    <header className="text-gray-700 body-font">
+    <header className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
           <svg
@@ -26,7 +26,7 @@ function LightHeaderD(props) {
           <a href className="mr-5 hover:text-gray-900">Third Link</a>
           <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
         </nav>
-        <button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
+        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button
           <svg
             fill="none"
diff --git a/src/blocks/hero/dark/a.js b/src/blocks/hero/dark/a.js
index 058195b..f61eae1 100644
--- a/src/blocks/hero/dark/a.js
+++ b/src/blocks/hero/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
diff --git a/src/blocks/hero/dark/b.js b/src/blocks/hero/dark/b.js
index bb6760e..13987dd 100644
--- a/src/blocks/hero/dark/b.js
+++ b/src/blocks/hero/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
         <img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
         <div className="text-center lg:w-2/3 w-full">
diff --git a/src/blocks/hero/dark/c.js b/src/blocks/hero/dark/c.js
index 6949db2..b30ae90 100644
--- a/src/blocks/hero/dark/c.js
+++ b/src/blocks/hero/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
           <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
diff --git a/src/blocks/hero/dark/d.js b/src/blocks/hero/dark/d.js
index b164e77..ca640d6 100644
--- a/src/blocks/hero/dark/d.js
+++ b/src/blocks/hero/dark/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroD(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
@@ -25,14 +25,14 @@ function DarkHeroD(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-800 rounded bg-opacity-40 border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
           </div>
-          <p className="text-sm mt-2 text-gray-600 mb-8 w-full">
+          <p className="text-sm mt-2 text-gray-500 mb-8 w-full">
             Neutra shabby chic ramps, viral fixie.
           </p>
           <div className="flex lg:flex-row md:flex-col text-gray-300">
@@ -46,7 +46,7 @@ function DarkHeroD(props) {
                 <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-500 mb-1">GET IT ON</span>
+                <span className="text-xs text-gray-400 mb-1">GET IT ON</span>
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
@@ -61,7 +61,7 @@ function DarkHeroD(props) {
                 <path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-500 mb-1">
+                <span className="text-xs text-gray-400 mb-1">
                   Download on the
                 </span>
                 <span className="title-font font-medium">App Store</span>
diff --git a/src/blocks/hero/dark/e.js b/src/blocks/hero/dark/e.js
index 3f1f971..ce1f5c7 100644
--- a/src/blocks/hero/dark/e.js
+++ b/src/blocks/hero/dark/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroE(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
           <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -28,14 +28,14 @@ function DarkHeroE(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
           </div>
-          <p className="text-sm mt-2 text-gray-600 mb-8 w-full">
+          <p className="text-sm mt-2 text-gray-500 mb-8 w-full">
             Neutra shabby chic ramps, viral fixie.
           </p>
           <div className="flex lg:flex-row md:flex-col text-gray-300">
@@ -49,7 +49,7 @@ function DarkHeroE(props) {
                 <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-500 mb-1">GET IT ON</span>
+                <span className="text-xs text-gray-400 mb-1">GET IT ON</span>
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
@@ -64,7 +64,7 @@ function DarkHeroE(props) {
                 <path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-500 mb-1">
+                <span className="text-xs text-gray-400 mb-1">
                   Download on the
                 </span>
                 <span className="title-font font-medium">App Store</span>
diff --git a/src/blocks/hero/dark/f.js b/src/blocks/hero/dark/f.js
index a60b8b4..d5178c2 100644
--- a/src/blocks/hero/dark/f.js
+++ b/src/blocks/hero/dark/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function DarkHeroF(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
         <img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
         <div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
@@ -27,7 +27,7 @@ function DarkHeroF(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -48,7 +48,7 @@ function DarkHeroF(props) {
                 <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-600 mb-1">GET IT ON</span>
+                <span className="text-xs text-gray-400 mb-1">GET IT ON</span>
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
@@ -63,7 +63,7 @@ function DarkHeroF(props) {
                 <path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
               </svg>
               <span className="ml-4 flex items-start flex-col leading-none">
-                <span className="text-xs text-gray-600 mb-1">
+                <span className="text-xs text-gray-400 mb-1">
                   Download on the
                 </span>
                 <span className="title-font font-medium">App Store</span>
diff --git a/src/blocks/hero/light/a.js b/src/blocks/hero/light/a.js
index f966a84..2e09b2c 100644
--- a/src/blocks/hero/light/a.js
+++ b/src/blocks/hero/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
@@ -20,7 +20,7 @@ function LightHeroA(props) {
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
-            <button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
+            <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
               Button
             </button>
           </div>
diff --git a/src/blocks/hero/light/b.js b/src/blocks/hero/light/b.js
index 12b9a5a..a8d5d6c 100644
--- a/src/blocks/hero/light/b.js
+++ b/src/blocks/hero/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
         <img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
         <div className="text-center lg:w-2/3 w-full">
@@ -21,7 +21,7 @@ function LightHeroB(props) {
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
-            <button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
+            <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
               Button
             </button>
           </div>
diff --git a/src/blocks/hero/light/c.js b/src/blocks/hero/light/c.js
index d83b6be..1e4148d 100644
--- a/src/blocks/hero/light/c.js
+++ b/src/blocks/hero/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
           <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -23,7 +23,7 @@ function LightHeroC(props) {
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
               Button
             </button>
-            <button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
+            <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
               Button
             </button>
           </div>
diff --git a/src/blocks/hero/light/d.js b/src/blocks/hero/light/d.js
index 4cbc97a..3d6c4eb 100644
--- a/src/blocks/hero/light/d.js
+++ b/src/blocks/hero/light/d.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroD(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
           <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
@@ -25,7 +25,7 @@ function LightHeroD(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-100 rounded border bg-opacity-50 border-gray-300 focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -36,7 +36,7 @@ function LightHeroD(props) {
             Neutra shabby chic ramps, viral fixie.
           </p>
           <div className="flex lg:flex-row md:flex-col">
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -50,7 +50,7 @@ function LightHeroD(props) {
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
diff --git a/src/blocks/hero/light/e.js b/src/blocks/hero/light/e.js
index 3b52502..9d15df5 100644
--- a/src/blocks/hero/light/e.js
+++ b/src/blocks/hero/light/e.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroE(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
         <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
           <img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -28,7 +28,7 @@ function LightHeroE(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -39,7 +39,7 @@ function LightHeroE(props) {
             Neutra shabby chic ramps, viral fixie.
           </p>
           <div className="flex lg:flex-row md:flex-col">
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -53,7 +53,7 @@ function LightHeroE(props) {
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
diff --git a/src/blocks/hero/light/f.js b/src/blocks/hero/light/f.js
index 67511f8..d31b55f 100644
--- a/src/blocks/hero/light/f.js
+++ b/src/blocks/hero/light/f.js
@@ -3,7 +3,7 @@ import PropTypes from  "prop-types";
 
 function LightHeroF(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
         <img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
         <div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
@@ -27,7 +27,7 @@ function LightHeroF(props) {
                 type="text"
                 id="hero-field"
                 name="hero-field"
-                className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
+                className={`w-full bg-gray-100 bg-opacity-50 rounded focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
               />
             </div>
             <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -38,7 +38,7 @@ function LightHeroF(props) {
             Neutra shabby chic ramps, viral fixie.
           </p>
           <div className="flex">
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -52,7 +52,7 @@ function LightHeroF(props) {
                 <span className="title-font font-medium">Google Play</span>
               </span>
             </button>
-            <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
+            <button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-200 focus:outline-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
diff --git a/src/blocks/index.js b/src/blocks/index.js
index 7b31c8b..f48ad80 100644
--- a/src/blocks/index.js
+++ b/src/blocks/index.js
@@ -121,11 +121,9 @@ import DarkHeroF from './hero/dark/f';
 
 import LightPricingA from './pricing/light/a';
 import LightPricingB from './pricing/light/b';
-import LightPricingC from './pricing/light/c';
 
 import DarkPricingA from './pricing/dark/a';
 import DarkPricingB from './pricing/dark/b';
-import DarkPricingC from './pricing/dark/c';
 
 import LightStatisticA from './statistic/light/a';
 import LightStatisticB from './statistic/light/b';
@@ -232,8 +230,7 @@ export default function getBlock({theme = 'indigo', darkMode = false}) {
     },
     Pricing: {
       PricingA: darkMode ? <DarkPricingA theme={theme} /> : <LightPricingA theme={theme} />,
-      PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />,
-      PricingC: darkMode ? <DarkPricingC theme={theme} /> : <LightPricingC theme={theme} />
+      PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />
     },
     Statistic: {
       StatisticA: darkMode ? <DarkStatisticA theme={theme} /> : <LightStatisticA theme={theme} />,
diff --git a/src/blocks/pricing/dark/a.js b/src/blocks/pricing/dark/a.js
index ba0d482..a42ec98 100644
--- a/src/blocks/pricing/dark/a.js
+++ b/src/blocks/pricing/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkPricingA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+    <section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
@@ -24,13 +24,13 @@ function DarkPricingA(props) {
         <div className="flex flex-wrap -m-4">
           <div className="p-4 xl:w-1/4 md:w-1/2 w-full">
             <div className="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
-              <h2 className="text-sm tracking-widest text-gray-600 title-font mb-1 font-medium">
+              <h2 className="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
                 START
               </h2>
               <h1 className="text-5xl text-white pb-4 mb-4 border-b border-gray-800 leading-none">
                 Free
               </h1>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -46,7 +46,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -62,7 +62,7 @@ function DarkPricingA(props) {
                 </span>
                 Tumeric plaid portland
               </p>
-              <p className="flex items-center text-gray-500 mb-6">
+              <p className="flex items-center text-gray-400 mb-6">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -92,7 +92,7 @@ function DarkPricingA(props) {
                   <path d="M5 12h14M12 5l7 7-7 7" />
                 </svg>
               </button>
-              <p className="text-xs text-gray-600 mt-3">
+              <p className="text-xs text-gray-400 mt-3">
                 Literally you probably haven&apos;t heard of them jean shorts.
               </p>
             </div>
@@ -102,16 +102,16 @@ function DarkPricingA(props) {
               <span className={`bg-${props.theme}-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl`}>
                 POPULAR
               </span>
-              <h2 className="text-sm tracking-widest text-gray-600 title-font mb-1 font-medium">
+              <h2 className="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
                 PRO
               </h2>
               <h1 className="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
                 <span>$38</span>
-                <span className="text-lg ml-1 font-normal text-gray-600">
+                <span className="text-lg ml-1 font-normal text-gray-400">
                   /mo
                 </span>
               </h1>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -127,7 +127,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -143,7 +143,7 @@ function DarkPricingA(props) {
                 </span>
                 Tumeric plaid portland
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -159,7 +159,7 @@ function DarkPricingA(props) {
                 </span>
                 Hexagon neutra unicorn
               </p>
-              <p className="flex items-center text-gray-500 mb-6">
+              <p className="flex items-center text-gray-400 mb-6">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -189,23 +189,23 @@ function DarkPricingA(props) {
                   <path d="M5 12h14M12 5l7 7-7 7" />
                 </svg>
               </button>
-              <p className="text-xs text-gray-600 mt-3">
+              <p className="text-xs text-gray-400 mt-3">
                 Literally you probably haven&apos;t heard of them jean shorts.
               </p>
             </div>
           </div>
           <div className="p-4 xl:w-1/4 md:w-1/2 w-full">
             <div className="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
-              <h2 className="text-sm tracking-widest text-gray-600 title-font mb-1 font-medium">
+              <h2 className="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
                 BUSINESS
               </h2>
               <h1 className="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
                 <span>$56</span>
-                <span className="text-lg ml-1 font-normal text-gray-600">
+                <span className="text-lg ml-1 font-normal text-gray-400">
                   /mo
                 </span>
               </h1>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -221,7 +221,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -237,7 +237,7 @@ function DarkPricingA(props) {
                 </span>
                 Tumeric plaid portland
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -253,7 +253,7 @@ function DarkPricingA(props) {
                 </span>
                 Hexagon neutra unicorn
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -269,7 +269,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-6">
+              <p className="flex items-center text-gray-400 mb-6">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -299,23 +299,23 @@ function DarkPricingA(props) {
                   <path d="M5 12h14M12 5l7 7-7 7" />
                 </svg>
               </button>
-              <p className="text-xs text-gray-600 mt-3">
+              <p className="text-xs text-gray-400 mt-3">
                 Literally you probably haven&apos;t heard of them jean shorts.
               </p>
             </div>
           </div>
           <div className="p-4 xl:w-1/4 md:w-1/2 w-full">
             <div className="h-full p-6 rounded-lg border-2 border-gray-700 flex flex-col relative overflow-hidden">
-              <h2 className="text-sm tracking-widest text-gray-600 title-font mb-1 font-medium">
+              <h2 className="text-sm tracking-widest text-gray-400 title-font mb-1 font-medium">
                 SPECIAL
               </h2>
               <h1 className="text-5xl text-white leading-none flex items-center pb-4 mb-4 border-b border-gray-800">
                 <span>$72</span>
-                <span className="text-lg ml-1 font-normal text-gray-600">
+                <span className="text-lg ml-1 font-normal text-gray-400">
                   /mo
                 </span>
               </h1>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -331,7 +331,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -347,7 +347,7 @@ function DarkPricingA(props) {
                 </span>
                 Tumeric plaid portland
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -363,7 +363,7 @@ function DarkPricingA(props) {
                 </span>
                 Hexagon neutra unicorn
               </p>
-              <p className="flex items-center text-gray-500 mb-2">
+              <p className="flex items-center text-gray-400 mb-2">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -379,7 +379,7 @@ function DarkPricingA(props) {
                 </span>
                 Vexillologist pitchfork
               </p>
-              <p className="flex items-center text-gray-500 mb-6">
+              <p className="flex items-center text-gray-400 mb-6">
                 <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-800 text-gray-500 rounded-full flex-shrink-0">
                   <svg
                     fill="none"
@@ -409,7 +409,7 @@ function DarkPricingA(props) {
                   <path d="M5 12h14M12 5l7 7-7 7" />
                 </svg>
               </button>
-              <p className="text-xs text-gray-600 mt-3">
+              <p className="text-xs text-gray-400 mt-3">
                 Literally you probably haven&apos;t heard of them jean shorts.
               </p>
             </div>
diff --git a/src/blocks/pricing/dark/b.js b/src/blocks/pricing/dark/b.js
index 555e62c..0033371 100644
--- a/src/blocks/pricing/dark/b.js
+++ b/src/blocks/pricing/dark/b.js
@@ -3,442 +3,113 @@ import PropTypes from "prop-types";
 
 function DarkPricingB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
-        <div className="lg:w-1/4 mt-48 hidden lg:block">
-          <div className="mt-px border-t border-gray-700 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden">
-            <p className="bg-gray-800 text-white h-12 text-center px-4 flex items-center justify-start -mt-px">
-              Fingerstache disrupt
-            </p>
-            <p className="text-white h-12 text-center px-4 flex items-center justify-start">
-              Franzen hashtag
-            </p>
-            <p className="bg-gray-800 text-white h-12 text-center px-4 flex items-center justify-start">
-              Tilde art party
-            </p>
-            <p className="text-white h-12 text-center px-4 flex items-center justify-start">
-              Banh mi cornhole
-            </p>
-            <p className="bg-gray-800 text-white h-12 text-center px-4 flex items-center justify-start">
-              Waistcoat squid hexagon
-            </p>
-            <p className="text-white h-12 text-center px-4 flex items-center justify-start">
-              Pinterest occupy authentic
-            </p>
-            <p className="bg-gray-800 text-white h-12 text-center px-4 flex items-center justify-start">
-              Brooklyn helvetica
-            </p>
-            <p className="text-white h-12 text-center px-4 flex items-center justify-start">
-              Long Feature Two
-            </p>
-            <p className="bg-gray-800 text-white h-12 text-center px-4 flex items-center justify-start">
-              Feature One
-            </p>
-          </div>
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
+            Pricing
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Banh mi cornhole echo park skateboard authentic crucifix neutra
+            tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon
+            twee
+          </p>
         </div>
-        <div className="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-700 rounded-lg">
-          <div className="lg:w-1/3 lg:mt-px w-full mb-10 lg:mb-0 border-2 border-gray-700 lg:border-none rounded-lg lg:rounded-none relative">
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">START</h3>
-              <h2 className="text-5xl text-white font-medium leading-none mb-4 mt-2">
-                Free
-              </h2>
-              <span className="text-sm text-gray-500">Next 3 months</span>
-            </div>
-            <p className="bg-gray-800 text-gray-500 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-700">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-500 px-6 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="border-t border-gray-700 p-6 text-center rounded-bl-lg">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-600 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
-          <div className={`lg:w-1/3 lg:-mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg border-${props.theme}-500 relative`}>
-            <span className={`bg-${props.theme}-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl`}>
-              POPULAR
-            </span>
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">PRO</h3>
-              <h2 className="text-5xl text-white font-medium flex items-center justify-center leading-none mb-4 mt-2">
-                $38<span className="text-gray-500 text-base ml-1">/mo</span>
-              </h2>
-              <span className="text-sm text-gray-500">
-                Charging $456 per year
-              </span>
-            </div>
-            <p className="bg-gray-800 text-gray-500 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-700">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-500 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="p-6 text-center border-t border-gray-700">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-600 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
-          <div className="lg:w-1/3 w-full lg:mt-px border-2 border-gray-700 lg:border-none rounded-lg lg:rounded-none">
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">BUSINESS</h3>
-              <h2 className="text-5xl text-white font-medium flex items-center justify-center leading-none mb-4 mt-2">
-                $54<span className="text-gray-500 text-base ml-1">/mo</span>
-              </h2>
-              <span className="text-sm text-gray-500">
-                Charging $648 per year
-              </span>
-            </div>
-            <p className="bg-gray-800 text-gray-500 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-700">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-500 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-700 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-800 text-gray-500 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="p-6 text-center border-t border-gray-700">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-600 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
+        <div className="lg:w-2/3 w-full mx-auto overflow-auto">
+          <table className="table-auto w-full text-left whitespace-no-wrap">
+            <thead>
+              <tr>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl">
+                  Plan
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
+                  Speed
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
+                  Storage
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
+                  Price
+                </th>
+                <th className="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="px-4 py-3">Start</td>
+                <td className="px-4 py-3">5 Mb/s</td>
+                <td className="px-4 py-3">15 GB</td>
+                <td className="px-4 py-3 text-lg text-white">Free</td>
+                <td className="w-10 text-center">
+                  <input name="plan" type="radio" />
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-gray-800 px-4 py-3">Pro</td>
+                <td className="border-t-2 border-gray-800 px-4 py-3">
+                  25 Mb/s
+                </td>
+                <td className="border-t-2 border-gray-800 px-4 py-3">25 GB</td>
+                <td className="border-t-2 border-gray-800 px-4 py-3 text-lg text-white">
+                  $24
+                </td>
+                <td className="border-t-2 border-gray-800 w-10 text-center">
+                  <input name="plan" type="radio" />
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-gray-800 px-4 py-3">
+                  Business
+                </td>
+                <td className="border-t-2 border-gray-800 px-4 py-3">
+                  36 Mb/s
+                </td>
+                <td className="border-t-2 border-gray-800 px-4 py-3">40 GB</td>
+                <td className="border-t-2 border-gray-800 px-4 py-3 text-lg text-white">
+                  $50
+                </td>
+                <td className="border-t-2 border-gray-800 w-10 text-center">
+                  <input name="plan" type="radio" />
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
+                  Exclusive
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
+                  48 Mb/s
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
+                  120 GB
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3 text-lg text-white">
+                  $72
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-800 w-10 text-center">
+                  <input name="plan" type="radio" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
+          <a href className={`text-${props.theme}-400 inline-flex items-center md:mb-2 lg:mb-0`}>
+            Learn More
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-4 h-4 ml-2"
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </a>
+          <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+            Button
+          </button>
         </div>
       </div>
     </section>
diff --git a/src/blocks/pricing/dark/c.js b/src/blocks/pricing/dark/c.js
deleted file mode 100644
index d81a6c3..0000000
--- a/src/blocks/pricing/dark/c.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-function DarkPricingC(props) {
-  return (
-    <section className="text-gray-500 bg-gray-900 body-font">
-      <div className="container px-5 py-24 mx-auto">
-        <div className="flex flex-col text-center w-full mb-20">
-          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-white">
-            Pricing
-          </h1>
-          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
-            Banh mi cornhole echo park skateboard authentic crucifix neutra
-            tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon
-            twee
-          </p>
-        </div>
-        <div className="lg:w-2/3 w-full mx-auto overflow-auto">
-          <table className="table-auto w-full text-left whitespace-no-wrap">
-            <thead>
-              <tr>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl">
-                  Plan
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
-                  Speed
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
-                  Storage
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800">
-                  Price
-                </th>
-                <th className="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className="px-4 py-3">Start</td>
-                <td className="px-4 py-3">5 Mb/s</td>
-                <td className="px-4 py-3">15 GB</td>
-                <td className="px-4 py-3 text-lg text-white">Free</td>
-                <td className="w-10 text-center">
-                  <input name="plan" type="radio" />
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-gray-800 px-4 py-3">Pro</td>
-                <td className="border-t-2 border-gray-800 px-4 py-3">
-                  25 Mb/s
-                </td>
-                <td className="border-t-2 border-gray-800 px-4 py-3">25 GB</td>
-                <td className="border-t-2 border-gray-800 px-4 py-3 text-lg text-white">
-                  $24
-                </td>
-                <td className="border-t-2 border-gray-800 w-10 text-center">
-                  <input name="plan" type="radio" />
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-gray-800 px-4 py-3">
-                  Business
-                </td>
-                <td className="border-t-2 border-gray-800 px-4 py-3">
-                  36 Mb/s
-                </td>
-                <td className="border-t-2 border-gray-800 px-4 py-3">40 GB</td>
-                <td className="border-t-2 border-gray-800 px-4 py-3 text-lg text-white">
-                  $50
-                </td>
-                <td className="border-t-2 border-gray-800 w-10 text-center">
-                  <input name="plan" type="radio" />
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
-                  Exclusive
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
-                  48 Mb/s
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3">
-                  120 GB
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-800 px-4 py-3 text-lg text-white">
-                  $72
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-800 w-10 text-center">
-                  <input name="plan" type="radio" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
-          <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
-            Learn More
-            <svg
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="w-4 h-4 ml-2"
-              viewBox="0 0 24 24"
-            >
-              <path d="M5 12h14M12 5l7 7-7 7" />
-            </svg>
-          </a>
-          <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-            Button
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-DarkPricingC.defaultProps = {
-  theme: 'indigo'
-};
-
-DarkPricingC.propTypes = {
-  theme: PropTypes.string.isRequired
-};
-
-export default DarkPricingC;
diff --git a/src/blocks/pricing/light/a.js b/src/blocks/pricing/light/a.js
index 6d8ce96..5a5ff36 100644
--- a/src/blocks/pricing/light/a.js
+++ b/src/blocks/pricing/light/a.js
@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 
 function LightPricingA(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
+    <section className="text-gray-600 body-font overflow-hidden">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
             Pricing
           </h1>
-          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base text-gray-500">
             Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical.
           </p>
           <div className={`flex mx-auto border-2 border-${props.theme}-500 rounded overflow-hidden mt-6`}>
@@ -29,7 +29,7 @@ function LightPricingA(props) {
                 Free
               </h1>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -45,7 +45,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -61,7 +61,7 @@ function LightPricingA(props) {
                 Tumeric plaid portland
               </p>
               <p className="flex items-center text-gray-600 mb-6">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -76,7 +76,7 @@ function LightPricingA(props) {
                 </span>
                 Mixtape chillwave tumeric
               </p>
-              <button className="flex items-center mt-auto text-white bg-gray-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-600 rounded">
+              <button className="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
                 Button
                 <svg
                   fill="none"
@@ -110,7 +110,7 @@ function LightPricingA(props) {
                 </span>
               </h1>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -126,7 +126,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -142,7 +142,7 @@ function LightPricingA(props) {
                 Tumeric plaid portland
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -158,7 +158,7 @@ function LightPricingA(props) {
                 Hexagon neutra unicorn
               </p>
               <p className="flex items-center text-gray-600 mb-6">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -204,7 +204,7 @@ function LightPricingA(props) {
                 </span>
               </h1>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -220,7 +220,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -236,7 +236,7 @@ function LightPricingA(props) {
                 Tumeric plaid portland
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -252,7 +252,7 @@ function LightPricingA(props) {
                 Hexagon neutra unicorn
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -268,7 +268,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-6">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -283,7 +283,7 @@ function LightPricingA(props) {
                 </span>
                 Mixtape chillwave tumeric
               </p>
-              <button className="flex items-center mt-auto text-white bg-gray-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-600 rounded">
+              <button className="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
                 Button
                 <svg
                   fill="none"
@@ -314,7 +314,7 @@ function LightPricingA(props) {
                 </span>
               </h1>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -330,7 +330,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -346,7 +346,7 @@ function LightPricingA(props) {
                 Tumeric plaid portland
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -362,7 +362,7 @@ function LightPricingA(props) {
                 Hexagon neutra unicorn
               </p>
               <p className="flex items-center text-gray-600 mb-2">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -378,7 +378,7 @@ function LightPricingA(props) {
                 Vexillologist pitchfork
               </p>
               <p className="flex items-center text-gray-600 mb-6">
-                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
+                <span className="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                   <svg
                     fill="none"
                     stroke="currentColor"
@@ -393,7 +393,7 @@ function LightPricingA(props) {
                 </span>
                 Mixtape chillwave tumeric
               </p>
-              <button className="flex items-center mt-auto text-white bg-gray-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-600 rounded">
+              <button className="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
                 Button
                 <svg
                   fill="none"
diff --git a/src/blocks/pricing/light/b.js b/src/blocks/pricing/light/b.js
index 9b0eb5e..2ac36a4 100644
--- a/src/blocks/pricing/light/b.js
+++ b/src/blocks/pricing/light/b.js
@@ -3,442 +3,113 @@ import PropTypes from "prop-types";
 
 function LightPricingB(props) {
   return (
-    <section className="text-gray-700 body-font overflow-hidden">
-      <div className="container px-5 py-24 mx-auto flex flex-wrap">
-        <div className="lg:w-1/4 mt-48 hidden lg:block">
-          <div className="mt-px border-t border-gray-300 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden">
-            <p className="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px">
-              Fingerstache disrupt
-            </p>
-            <p className="text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Franzen hashtag
-            </p>
-            <p className="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Tilde art party
-            </p>
-            <p className="text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Banh mi cornhole
-            </p>
-            <p className="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Waistcoat squid hexagon
-            </p>
-            <p className="text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Pinterest occupy authentic
-            </p>
-            <p className="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Brooklyn helvetica
-            </p>
-            <p className="text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Long Feature Two
-            </p>
-            <p className="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">
-              Feature One
-            </p>
-          </div>
+    <section className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
+            Pricing
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Banh mi cornhole echo park skateboard authentic crucifix neutra
+            tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon
+            twee
+          </p>
         </div>
-        <div className="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 rounded-lg">
-          <div className="lg:w-1/3 lg:mt-px w-full mb-10 lg:mb-0 border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">START</h3>
-              <h2 className="text-5xl text-gray-900 font-medium leading-none mb-4 mt-2">
-                Free
-              </h2>
-              <span className="text-sm text-gray-600">Next 3 months</span>
-            </div>
-            <p className="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="border-t border-gray-300 p-6 text-center rounded-bl-lg">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-500 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
-          <div className={`lg:w-1/3 lg:-mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg border-${props.theme}-500 relative`}>
-            <span className={`bg-${props.theme}-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl`}>
-              POPULAR
-            </span>
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">PRO</h3>
-              <h2 className="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">
-                $38<span className="text-gray-600 text-base ml-1">/mo</span>
-              </h2>
-              <span className="text-sm text-gray-600">
-                Charging $456 per year
-              </span>
-            </div>
-            <p className="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="p-6 text-center border-t border-gray-300">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-500 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
-          <div className="lg:w-1/3 w-full lg:mt-px border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
-            <div className="px-2 text-center h-48 flex flex-col items-center justify-center">
-              <h3 className="tracking-widest">BUSINESS</h3>
-              <h2 className="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">
-                $54<span className="text-gray-600 text-base ml-1">/mo</span>
-              </h2>
-              <span className="text-sm text-gray-600">
-                Charging $648 per year
-              </span>
-            </div>
-            <p className="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
-              Schlitz single-origin
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center">
-              Feature
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <span className="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="3"
-                  className="w-3 h-3"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </span>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <p className="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
-              <svg
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2.2"
-                className="w-5 h-5 text-gray-500"
-                viewBox="0 0 24 24"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </p>
-            <div className="p-6 text-center border-t border-gray-300">
-              <button className={`flex items-center mt-auto text-white bg-${props.theme}-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-                Button
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="w-4 h-4 ml-auto"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5 12h14M12 5l7 7-7 7" />
-                </svg>
-              </button>
-              <p className="text-xs text-gray-500 mt-3">
-                Literally you probably haven&apos;t heard of them jean shorts.
-              </p>
-            </div>
-          </div>
+        <div className="lg:w-2/3 w-full mx-auto overflow-auto">
+          <table className="table-auto w-full text-left whitespace-no-wrap">
+            <thead>
+              <tr>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">
+                  Plan
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
+                  Speed
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
+                  Storage
+                </th>
+                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
+                  Price
+                </th>
+                <th className="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="px-4 py-3">Start</td>
+                <td className="px-4 py-3">5 Mb/s</td>
+                <td className="px-4 py-3">15 GB</td>
+                <td className="px-4 py-3 text-lg text-gray-900">Free</td>
+                <td className="w-10 text-center">
+                  <input name="plan" type="radio"></input>
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-gray-200 px-4 py-3">Pro</td>
+                <td className="border-t-2 border-gray-200 px-4 py-3">
+                  25 Mb/s
+                </td>
+                <td className="border-t-2 border-gray-200 px-4 py-3">25 GB</td>
+                <td className="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
+                  $24
+                </td>
+                <td className="border-t-2 border-gray-200 w-10 text-center">
+                  <input name="plan" type="radio"></input>
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-gray-200 px-4 py-3">
+                  Business
+                </td>
+                <td className="border-t-2 border-gray-200 px-4 py-3">
+                  36 Mb/s
+                </td>
+                <td className="border-t-2 border-gray-200 px-4 py-3">40 GB</td>
+                <td className="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
+                  $50
+                </td>
+                <td className="border-t-2 border-gray-200 w-10 text-center">
+                  <input name="plan" type="radio"></input>
+                </td>
+              </tr>
+              <tr>
+                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
+                  Exclusive
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
+                  48 Mb/s
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
+                  120 GB
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
+                  $72
+                </td>
+                <td className="border-t-2 border-b-2 border-gray-200 w-10 text-center">
+                  <input name="plan" type="radio"></input>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
+          <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
+            Learn More
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-4 h-4 ml-2"
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </a>
+          <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+            Button
+          </button>
         </div>
       </div>
     </section>
diff --git a/src/blocks/pricing/light/c.js b/src/blocks/pricing/light/c.js
deleted file mode 100644
index 4a4f14a..0000000
--- a/src/blocks/pricing/light/c.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-function LightPricingC(props) {
-  return (
-    <section className="text-gray-700 body-font">
-      <div className="container px-5 py-24 mx-auto">
-        <div className="flex flex-col text-center w-full mb-20">
-          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900">
-            Pricing
-          </h1>
-          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
-            Banh mi cornhole echo park skateboard authentic crucifix neutra
-            tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon
-            twee
-          </p>
-        </div>
-        <div className="lg:w-2/3 w-full mx-auto overflow-auto">
-          <table className="table-auto w-full text-left whitespace-no-wrap">
-            <thead>
-              <tr>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-200 rounded-tl rounded-bl">
-                  Plan
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-200">
-                  Speed
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-200">
-                  Storage
-                </th>
-                <th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-200">
-                  Price
-                </th>
-                <th className="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-200 rounded-tr rounded-br"></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td className="px-4 py-3">Start</td>
-                <td className="px-4 py-3">5 Mb/s</td>
-                <td className="px-4 py-3">15 GB</td>
-                <td className="px-4 py-3 text-lg text-gray-900">Free</td>
-                <td className="w-10 text-center">
-                  <input name="plan" type="radio"></input>
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-gray-200 px-4 py-3">Pro</td>
-                <td className="border-t-2 border-gray-200 px-4 py-3">
-                  25 Mb/s
-                </td>
-                <td className="border-t-2 border-gray-200 px-4 py-3">25 GB</td>
-                <td className="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
-                  $24
-                </td>
-                <td className="border-t-2 border-gray-200 w-10 text-center">
-                  <input name="plan" type="radio"></input>
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-gray-200 px-4 py-3">
-                  Business
-                </td>
-                <td className="border-t-2 border-gray-200 px-4 py-3">
-                  36 Mb/s
-                </td>
-                <td className="border-t-2 border-gray-200 px-4 py-3">40 GB</td>
-                <td className="border-t-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
-                  $50
-                </td>
-                <td className="border-t-2 border-gray-200 w-10 text-center">
-                  <input name="plan" type="radio"></input>
-                </td>
-              </tr>
-              <tr>
-                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
-                  Exclusive
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
-                  48 Mb/s
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3">
-                  120 GB
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-200 px-4 py-3 text-lg text-gray-900">
-                  $72
-                </td>
-                <td className="border-t-2 border-b-2 border-gray-200 w-10 text-center">
-                  <input name="plan" type="radio"></input>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div className="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
-          <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
-            Learn More
-            <svg
-              fill="none"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              className="w-4 h-4 ml-2"
-              viewBox="0 0 24 24"
-            >
-              <path d="M5 12h14M12 5l7 7-7 7" />
-            </svg>
-          </a>
-          <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
-            Button
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-LightPricingC.defaultProps = {
-  theme: 'indigo'
-};
-
-LightPricingC.propTypes = {
-  theme: PropTypes.string.isRequired
-};
-
-export default LightPricingC;
diff --git a/src/blocks/statistic/dark/a.js b/src/blocks/statistic/dark/a.js
index 04083fc..2f2e728 100644
--- a/src/blocks/statistic/dark/a.js
+++ b/src/blocks/statistic/dark/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkStatisticA() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4 text-center">
           <div className="p-4 sm:w-1/4 w-1/2">
diff --git a/src/blocks/statistic/dark/b.js b/src/blocks/statistic/dark/b.js
index 5d94c94..71b5db1 100644
--- a/src/blocks/statistic/dark/b.js
+++ b/src/blocks/statistic/dark/b.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkStatisticB() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
           <div className="w-full sm:p-4 px-4 mb-6">
diff --git a/src/blocks/statistic/dark/c.js b/src/blocks/statistic/dark/c.js
index 0b503dc..7a81cec 100644
--- a/src/blocks/statistic/dark/c.js
+++ b/src/blocks/statistic/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkStatisticC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -25,7 +25,7 @@ function DarkStatisticC(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
-                className={`text-${props.theme}-500 w-12 h-12 mb-3 inline-block`}
+                className={`text-${props.theme}-400 w-12 h-12 mb-3 inline-block`}
                 viewBox="0 0 24 24"
               >
                 <path d="M8 17l4 4 4-4m-4-5v9" />
@@ -45,7 +45,7 @@ function DarkStatisticC(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
-                className={`text-${props.theme}-500 w-12 h-12 mb-3 inline-block`}
+                className={`text-${props.theme}-400 w-12 h-12 mb-3 inline-block`}
                 viewBox="0 0 24 24"
               >
                 <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
@@ -66,7 +66,7 @@ function DarkStatisticC(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
-                className={`text-${props.theme}-500 w-12 h-12 mb-3 inline-block`}
+                className={`text-${props.theme}-400 w-12 h-12 mb-3 inline-block`}
                 viewBox="0 0 24 24"
               >
                 <path d="M3 18v-6a9 9 0 0118 0v6" />
@@ -84,7 +84,7 @@ function DarkStatisticC(props) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
-                className={`text-${props.theme}-500 w-12 h-12 mb-3 inline-block`}
+                className={`text-${props.theme}-400 w-12 h-12 mb-3 inline-block`}
                 viewBox="0 0 24 24"
               >
                 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
diff --git a/src/blocks/statistic/light/a.js b/src/blocks/statistic/light/a.js
index e9227ad..21eedb0 100644
--- a/src/blocks/statistic/light/a.js
+++ b/src/blocks/statistic/light/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightStatisticA() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4 text-center">
           <div className="p-4 sm:w-1/4 w-1/2">
diff --git a/src/blocks/statistic/light/b.js b/src/blocks/statistic/light/b.js
index f7c38fd..b12b3ac 100644
--- a/src/blocks/statistic/light/b.js
+++ b/src/blocks/statistic/light/b.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightStatisticB() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-wrap -mx-4 mt-auto mb-auto lg:w-1/2 sm:w-2/3 content-start sm:pr-10">
           <div className="w-full sm:p-4 px-4 mb-6">
diff --git a/src/blocks/statistic/light/c.js b/src/blocks/statistic/light/c.js
index 99d2caa..a060222 100644
--- a/src/blocks/statistic/light/c.js
+++ b/src/blocks/statistic/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightStatisicC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
diff --git a/src/blocks/step/dark/a.js b/src/blocks/step/dark/a.js
index cf5cc91..712be6f 100644
--- a/src/blocks/step/dark/a.js
+++ b/src/blocks/step/dark/a.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkStepA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-wrap w-full">
           <div className="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
diff --git a/src/blocks/step/dark/b.js b/src/blocks/step/dark/b.js
index 9f37e93..16dccd2 100644
--- a/src/blocks/step/dark/b.js
+++ b/src/blocks/step/dark/b.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkStepB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap flex-col">
         <div className="flex mx-auto flex-wrap mb-20">
           <a href className={`sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium bg-gray-800 inline-flex items-center leading-none border-${props.theme}-500 text-white tracking-wider rounded-t`}>
diff --git a/src/blocks/step/dark/c.js b/src/blocks/step/dark/c.js
index 913de1a..a32fae6 100644
--- a/src/blocks/step/dark/c.js
+++ b/src/blocks/step/dark/c.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function DarkStepC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto">
           <div className="h-full w-6 absolute inset-0 flex items-center justify-center">
diff --git a/src/blocks/step/light/a.js b/src/blocks/step/light/a.js
index 5f93249..e780215 100644
--- a/src/blocks/step/light/a.js
+++ b/src/blocks/step/light/a.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightStepA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex flex-wrap w-full">
           <div className="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
diff --git a/src/blocks/step/light/b.js b/src/blocks/step/light/b.js
index 7029c3a..8fcb0bb 100644
--- a/src/blocks/step/light/b.js
+++ b/src/blocks/step/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightStepB(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap flex-col">
         <div className="flex mx-auto flex-wrap mb-20">
           <a href className={`sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium bg-gray-100 inline-flex items-center leading-none border-${props.theme}-500 text-${props.theme}-500 tracking-wider rounded-t`}>
diff --git a/src/blocks/step/light/c.js b/src/blocks/step/light/c.js
index 53cf2a8..2044965 100644
--- a/src/blocks/step/light/c.js
+++ b/src/blocks/step/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightStepC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto flex flex-wrap">
         <div className="flex relative pt-10 pb-20 sm:items-center md:w-2/3 mx-auto">
           <div className="h-full w-6 absolute inset-0 flex items-center justify-center">
diff --git a/src/blocks/team/dark/a.js b/src/blocks/team/dark/a.js
index a3bfe59..9a29002 100644
--- a/src/blocks/team/dark/a.js
+++ b/src/blocks/team/dark/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkTeamA(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
diff --git a/src/blocks/team/dark/b.js b/src/blocks/team/dark/b.js
index 70d8e42..8341d0c 100644
--- a/src/blocks/team/dark/b.js
+++ b/src/blocks/team/dark/b.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkTeamB() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-white tracking-widest">
@@ -26,13 +26,13 @@ function DarkTeamB() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Holden Caulfield
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
                 </p>
                 <span className="inline-flex">
-                  <a href className="text-gray-700">
+                  <a href className="text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -45,7 +45,7 @@ function DarkTeamB() {
                       <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -58,7 +58,7 @@ function DarkTeamB() {
                       <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -86,13 +86,13 @@ function DarkTeamB() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Alper Kamu
                 </h2>
-                <h3 className="text-gray-600 mb-3">Designer</h3>
+                <h3 className="text-gray-500 mb-3">Designer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
                 </p>
                 <span className="inline-flex">
-                  <a href className="text-gray-700">
+                  <a href className="text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -105,7 +105,7 @@ function DarkTeamB() {
                       <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -118,7 +118,7 @@ function DarkTeamB() {
                       <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -146,13 +146,13 @@ function DarkTeamB() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Atticus Finch
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
                 </p>
                 <span className="inline-flex">
-                  <a href className="text-gray-700">
+                  <a href className="text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -165,7 +165,7 @@ function DarkTeamB() {
                       <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -178,7 +178,7 @@ function DarkTeamB() {
                       <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -206,13 +206,13 @@ function DarkTeamB() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Henry Letham
                 </h2>
-                <h3 className="text-gray-600 mb-3">Designer</h3>
+                <h3 className="text-gray-500 mb-3">Designer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
                 </p>
                 <span className="inline-flex">
-                  <a href className="text-gray-700">
+                  <a href className="text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -225,7 +225,7 @@ function DarkTeamB() {
                       <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -238,7 +238,7 @@ function DarkTeamB() {
                       <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                     </svg>
                   </a>
-                  <a href className="ml-2 text-gray-700">
+                  <a href className="ml-2 text-gray-500">
                     <svg
                       fill="none"
                       stroke="currentColor"
diff --git a/src/blocks/team/dark/c.js b/src/blocks/team/dark/c.js
index f54af80..33012fa 100644
--- a/src/blocks/team/dark/c.js
+++ b/src/blocks/team/dark/c.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function DarkTeamC() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-white">
@@ -26,7 +26,7 @@ function DarkTeamC() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Alper Kamu
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
@@ -83,7 +83,7 @@ function DarkTeamC() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Holden Caulfield
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
@@ -140,7 +140,7 @@ function DarkTeamC() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Atticus Finch
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
@@ -197,7 +197,7 @@ function DarkTeamC() {
                 <h2 className="title-font font-medium text-lg text-white">
                   Henry Letham
                 </h2>
-                <h3 className="text-gray-600 mb-3">UI Developer</h3>
+                <h3 className="text-gray-500 mb-3">UI Developer</h3>
                 <p className="mb-4">
                   DIY tote bag drinking vinegar cronut adaptogen squid fanny
                   pack vaporware.
diff --git a/src/blocks/team/light/a.js b/src/blocks/team/light/a.js
index c68a7ac..2eabad5 100644
--- a/src/blocks/team/light/a.js
+++ b/src/blocks/team/light/a.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightTeamA() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
diff --git a/src/blocks/team/light/b.js b/src/blocks/team/light/b.js
index 286378f..57d25a2 100644
--- a/src/blocks/team/light/b.js
+++ b/src/blocks/team/light/b.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightTeamB() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-gray-900 tracking-widest">
diff --git a/src/blocks/team/light/c.js b/src/blocks/team/light/c.js
index 43db144..287fd05 100644
--- a/src/blocks/team/light/c.js
+++ b/src/blocks/team/light/c.js
@@ -2,7 +2,7 @@ import React from "react";
 
 function LightTeamC() {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-col text-center w-full mb-20">
           <h1 className="text-2xl font-medium title-font mb-4 text-gray-900">
diff --git a/src/blocks/testimonial/dark/a.js b/src/blocks/testimonial/dark/a.js
index 3364de0..172532f 100644
--- a/src/blocks/testimonial/dark/a.js
+++ b/src/blocks/testimonial/dark/a.js
@@ -2,18 +2,18 @@ import React from "react";
 
 function DarkTestimonialA() {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <h1 className="text-3xl font-medium title-font text-white mb-12 text-center">
           Testimonials
         </h1>
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/2 w-full">
-            <div className="h-full bg-gray-800 p-8 rounded">
+            <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
-                className="block w-5 h-5 text-gray-600 mb-4"
+                className="block w-5 h-5 text-gray-500 mb-4"
                 viewBox="0 0 975.036 975.036"
               >
                 <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z" />
@@ -30,17 +30,17 @@ function DarkTestimonialA() {
                   <span className="title-font font-medium text-white">
                     Holden Caulfield
                   </span>
-                  <span className="text-gray-600 text-sm">UI DEVELOPER</span>
+                  <span className="text-gray-500 text-sm">UI DEVELOPER</span>
                 </span>
               </a>
             </div>
           </div>
           <div className="p-4 md:w-1/2 w-full">
-            <div className="h-full bg-gray-800 p-8 rounded">
+            <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
-                className="block w-5 h-5 text-gray-600 mb-4"
+                className="block w-5 h-5 text-gray-500 mb-4"
                 viewBox="0 0 975.036 975.036"
               >
                 <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z" />
@@ -57,7 +57,7 @@ function DarkTestimonialA() {
                   <span className="title-font font-medium text-white">
                     Alper Kamu
                   </span>
-                  <span className="text-gray-600 text-sm">DESIGNER</span>
+                  <span className="text-gray-500 text-sm">DESIGNER</span>
                 </span>
               </a>
             </div>
diff --git a/src/blocks/testimonial/dark/b.js b/src/blocks/testimonial/dark/b.js
index 374a6f1..726c58e 100644
--- a/src/blocks/testimonial/dark/b.js
+++ b/src/blocks/testimonial/dark/b.js
@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 
 function DarkTestimonialB(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
-            className="inline-block w-8 h-8 text-gray-700 mb-8"
+            className="inline-block w-8 h-8 text-gray-500 mb-8"
             viewBox="0 0 975.036 975.036"
           >
             <path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z" />
@@ -29,7 +29,7 @@ function DarkTestimonialB(props) {
           <h2 className="text-white font-medium title-font tracking-wider text-sm">
             HOLDEN CAULFIELD
           </h2>
-          <p className="text-gray-600">Senior Product Designer</p>
+          <p className="text-gray-500">Senior Product Designer</p>
         </div>
       </div>
     </section>
diff --git a/src/blocks/testimonial/dark/c.js b/src/blocks/testimonial/dark/c.js
index 76347f5..01bac8c 100644
--- a/src/blocks/testimonial/dark/c.js
+++ b/src/blocks/testimonial/dark/c.js
@@ -3,14 +3,14 @@ import PropTypes from "prop-types";
 
 function DarkTestimonialC(props) {
   return (
-    <section className="text-gray-500 bg-gray-900 body-font">
+    <section className="text-gray-400 bg-gray-900 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/3 lg:mb-0 mb-6 p-4">
             <div className="h-full text-center">
               <img
                 alt="testimonial"
-                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800"
+                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                 src="https://dummyimage.com/302x302"
               />
               <p className="leading-relaxed">
@@ -23,14 +23,14 @@ function DarkTestimonialC(props) {
               <h2 className="text-white font-medium title-font tracking-wider text-sm">
                 HOLDEN CAULFIELD
               </h2>
-              <p className="text-gray-600">Senior Product Designer</p>
+              <p className="text-gray-500">Senior Product Designer</p>
             </div>
           </div>
           <div className="lg:w-1/3 lg:mb-0 mb-6 p-4">
             <div className="h-full text-center">
               <img
                 alt="testimonial"
-                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800"
+                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                 src="https://dummyimage.com/300x300"
               />
               <p className="leading-relaxed">
@@ -43,14 +43,14 @@ function DarkTestimonialC(props) {
               <h2 className="text-white font-medium title-font tracking-wider text-sm">
                 ALPER KAMU
               </h2>
-              <p className="text-gray-600">UI Develeoper</p>
+              <p className="text-gray-500">UI Develeoper</p>
             </div>
           </div>
           <div className="lg:w-1/3 lg:mb-0 p-4">
             <div className="h-full text-center">
               <img
                 alt="testimonial"
-                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800"
+                className="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                 src="https://dummyimage.com/305x305"
               />
               <p className="leading-relaxed">
@@ -63,7 +63,7 @@ function DarkTestimonialC(props) {
               <h2 className="text-white font-medium title-font tracking-wider text-sm">
                 HENRY LETHAM
               </h2>
-              <p className="text-gray-600">CTO</p>
+              <p className="text-gray-500">CTO</p>
             </div>
           </div>
         </div>
diff --git a/src/blocks/testimonial/light/a.js b/src/blocks/testimonial/light/a.js
index dc31da0..5b5265c 100644
--- a/src/blocks/testimonial/light/a.js
+++ b/src/blocks/testimonial/light/a.js
@@ -2,14 +2,14 @@ import React from "react";
 
 function LightTestimonialA(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <h1 className="text-3xl font-medium title-font text-gray-900 mb-12 text-center">
           Testimonials
         </h1>
         <div className="flex flex-wrap -m-4">
           <div className="p-4 md:w-1/2 w-full">
-            <div className="h-full bg-gray-200 p-8 rounded">
+            <div className="h-full bg-gray-100 p-8 rounded">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
@@ -36,7 +36,7 @@ function LightTestimonialA(props) {
             </div>
           </div>
           <div className="p-4 md:w-1/2 w-full">
-            <div className="h-full bg-gray-200 p-8 rounded">
+            <div className="h-full bg-gray-100 p-8 rounded">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
diff --git a/src/blocks/testimonial/light/b.js b/src/blocks/testimonial/light/b.js
index 3a847e5..3ce6c08 100644
--- a/src/blocks/testimonial/light/b.js
+++ b/src/blocks/testimonial/light/b.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightTestimonialC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
           <svg
diff --git a/src/blocks/testimonial/light/c.js b/src/blocks/testimonial/light/c.js
index f8caa70..3636054 100644
--- a/src/blocks/testimonial/light/c.js
+++ b/src/blocks/testimonial/light/c.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 function LightTestimonialC(props) {
   return (
-    <section className="text-gray-700 body-font">
+    <section className="text-gray-600 body-font">
       <div className="container px-5 py-24 mx-auto">
         <div className="flex flex-wrap -m-4">
           <div className="lg:w-1/3 lg:mb-0 mb-6 p-4">
diff --git a/src/icons/index.js b/src/icons/index.js
index 3a76978..9b89c77 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -61,7 +61,6 @@ import HeroF from './hero/f';
 
 import PricingA from './pricing/a';
 import PricingB from './pricing/b';
-import PricingC from './pricing/c';
 
 import StatisticA from './statistic/a';
 import StatisticB from './statistic/b';
@@ -152,8 +151,7 @@ export default function getIcons() {
     },
     Pricing: {
       PricingA: <PricingA />,
-      PricingB: <PricingB />,
-      PricingC: <PricingC />
+      PricingB: <PricingB />
     }, 
     Statistic: {
       StatisticA: <StatisticA />,
diff --git a/src/icons/pricing/b.js b/src/icons/pricing/b.js
index 006347a..b05c59f 100644
--- a/src/icons/pricing/b.js
+++ b/src/icons/pricing/b.js
@@ -1,129 +1,178 @@
 import React from "react"
 
-function PricingB() {
+function PricingC() {
   return (
     <svg viewBox="0 0 266 150" fill="none">
       <path fill="var(--solid)" d="M0 0h266v150H0z" />
-      <path
-        d="M246 52v1H82v-1h164zM246 109v1H82v-1h164z"
-        fill="var(--base-400)"
+      <rect
+        x={110}
+        y={20}
+        width={46}
+        height={5}
+        rx={2.5}
+        fill="var(--solid-900)"
       />
-      <path
-        d="M87 117a2 2 0 012-2h39a2 2 0 012 2v4a2 2 0 01-2 2H89a2 2 0 01-2-2v-4zM142 117a2 2 0 012-2h39a2 2 0 012 2v4a2 2 0 01-2 2h-39a2 2 0 01-2-2v-4zM197 117a2 2 0 012-2h39a2 2 0 012 2v4a2 2 0 01-2 2h-39a2 2 0 01-2-2v-4z"
+      <rect x={87} y={29} width={92} height={4} rx={2} fill="var(--base-500)" />
+      <rect
+        x={106}
+        y={37}
+        width={55}
+        height={4}
+        rx={2}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={50}
+        y={57}
+        width={167}
+        height={11}
+        rx={1}
+        fill="var(--base-200)"
+      />
+      <rect
+        x={55}
+        y={61}
+        width={39}
+        height={3}
+        rx={1.5}
+        fill="var(--solid-900)"
+      />
+      <rect
+        x={55}
+        y={121}
+        width={19}
+        height={3}
+        rx={1.5}
         fill="var(--main-500)"
       />
       <rect
-        x={81.5}
-        y={20.5}
-        width={164}
-        height={109}
+        x={108}
+        y={61}
+        width={24}
+        height={3}
         rx={1.5}
-        stroke="var(--base-400)"
-      />
-      <path
-        d="M95 37a2 2 0 012-2h23a2 2 0 110 4H97a2 2 0 01-2-2z"
-        fill="var(--solid-900)"
-      />
-      <path fill="var(--base-200)" d="M21 53h224v14H21zM21 81h224v14H21z" />
-      <rect
-        x={103}
-        y={30}
-        width={11}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={102}
-        y={42}
-        width={14}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={150}
-        y={35}
-        width={27}
-        height={4}
-        rx={2}
         fill="var(--solid-900)"
       />
       <rect
-        x={158}
-        y={30}
-        width={11}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={157}
-        y={42}
-        width={14}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={205}
-        y={35}
-        width={27}
-        height={4}
-        rx={2}
-        fill="var(--solid-900)"
-      />
-      <rect
-        x={213}
-        y={30}
-        width={11}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={212}
-        y={42}
-        width={14}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <path
-        d="M20.5 54a1.5 1.5 0 011.5-1.5h59.5v57H22a1.5 1.5 0 01-1.5-1.5V54z"
-        stroke="var(--base-400)"
-      />
-      <rect
-        x={136.5}
-        y={20.5}
-        width={54}
-        height={109}
+        x={145}
+        y={61}
+        width={30}
+        height={3}
         rx={1.5}
-        stroke="var(--main-500)"
-      />
-      <path
-        d="M26 60a2 2 0 012-2h39a2 2 0 110 4H28a2 2 0 01-2-2z"
         fill="var(--solid-900)"
       />
-      <path
-        d="M95 60a2 2 0 012-2h23a2 2 0 110 4H97a2 2 0 01-2-2zM150 60a2 2 0 012-2h23a2 2 0 110 4h-23a2 2 0 01-2-2zM205 60a2 2 0 012-2h23a2 2 0 110 4h-23a2 2 0 01-2-2z"
+      <rect
+        x={188}
+        y={61}
+        width={20}
+        height={3}
+        rx={1.5}
+        fill="var(--solid-900)"
+      />
+      <rect x={55} y={74} width={26} height={2} rx={1} fill="var(--base-500)" />
+      <rect
+        x={108}
+        y={74}
+        width={12}
+        height={2}
+        rx={1}
         fill="var(--base-500)"
       />
       <path
-        d="M26 74a2 2 0 012-2h30a2 2 0 110 4H28a2 2 0 01-2-2zM26 88a2 2 0 012-2h45a2 2 0 110 4H28a2 2 0 01-2-2zM26 102a2 2 0 012-2h19a2 2 0 110 4H28a2 2 0 01-2-2z"
-        fill="var(--solid-900)"
+        d="M216.5 82a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
+        fill="var(--base-300)"
+      />
+      <rect
+        x={145}
+        y={74}
+        width={13}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={188}
+        y={74}
+        width={20}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect x={55} y={89} width={39} height={2} rx={1} fill="var(--base-500)" />
+      <rect
+        x={108}
+        y={89}
+        width={17}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <path
+        d="M216.5 97a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
+        fill="var(--base-300)"
+      />
+      <rect
+        x={145}
+        y={89}
+        width={18}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={188}
+        y={89}
+        width={13}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={55}
+        y={104}
+        width={33}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={108}
+        y={104}
+        width={14}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <path
+        d="M216.5 112a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
+        fill="var(--base-300)"
+      />
+      <rect
+        x={182}
+        y={119}
+        width={31}
+        height={10}
+        rx={2}
+        fill="var(--main-500)"
+      />
+      <rect
+        x={145}
+        y={104}
+        width={18}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={188}
+        y={104}
+        width={20}
+        height={2}
+        rx={1}
+        fill="var(--base-500)"
       />
-      <circle cx={109} cy={74} r={4} fill="var(--base-500)" />
-      <circle cx={109} cy={88} r={4} fill="var(--base-500)" />
-      <circle cx={109} cy={102} r={4} fill="var(--base-500)" />
-      <circle cx={164} cy={74} r={4} fill="var(--base-500)" />
-      <circle cx={164} cy={88} r={4} fill="var(--base-500)" />
-      <circle cx={164} cy={102} r={4} fill="var(--base-500)" />
-      <circle cx={219} cy={74} r={4} fill="var(--base-500)" />
-      <circle cx={219} cy={88} r={4} fill="var(--base-500)" />
-      <circle cx={219} cy={102} r={4} fill="var(--base-500)" />
     </svg>
   )
 }
 
-export default PricingB;
+export default PricingC;
diff --git a/src/icons/pricing/c.js b/src/icons/pricing/c.js
deleted file mode 100644
index b05c59f..0000000
--- a/src/icons/pricing/c.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import React from "react"
-
-function PricingC() {
-  return (
-    <svg viewBox="0 0 266 150" fill="none">
-      <path fill="var(--solid)" d="M0 0h266v150H0z" />
-      <rect
-        x={110}
-        y={20}
-        width={46}
-        height={5}
-        rx={2.5}
-        fill="var(--solid-900)"
-      />
-      <rect x={87} y={29} width={92} height={4} rx={2} fill="var(--base-500)" />
-      <rect
-        x={106}
-        y={37}
-        width={55}
-        height={4}
-        rx={2}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={50}
-        y={57}
-        width={167}
-        height={11}
-        rx={1}
-        fill="var(--base-200)"
-      />
-      <rect
-        x={55}
-        y={61}
-        width={39}
-        height={3}
-        rx={1.5}
-        fill="var(--solid-900)"
-      />
-      <rect
-        x={55}
-        y={121}
-        width={19}
-        height={3}
-        rx={1.5}
-        fill="var(--main-500)"
-      />
-      <rect
-        x={108}
-        y={61}
-        width={24}
-        height={3}
-        rx={1.5}
-        fill="var(--solid-900)"
-      />
-      <rect
-        x={145}
-        y={61}
-        width={30}
-        height={3}
-        rx={1.5}
-        fill="var(--solid-900)"
-      />
-      <rect
-        x={188}
-        y={61}
-        width={20}
-        height={3}
-        rx={1.5}
-        fill="var(--solid-900)"
-      />
-      <rect x={55} y={74} width={26} height={2} rx={1} fill="var(--base-500)" />
-      <rect
-        x={108}
-        y={74}
-        width={12}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <path
-        d="M216.5 82a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
-        fill="var(--base-300)"
-      />
-      <rect
-        x={145}
-        y={74}
-        width={13}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={188}
-        y={74}
-        width={20}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect x={55} y={89} width={39} height={2} rx={1} fill="var(--base-500)" />
-      <rect
-        x={108}
-        y={89}
-        width={17}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <path
-        d="M216.5 97a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
-        fill="var(--base-300)"
-      />
-      <rect
-        x={145}
-        y={89}
-        width={18}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={188}
-        y={89}
-        width={13}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={55}
-        y={104}
-        width={33}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={108}
-        y={104}
-        width={14}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <path
-        d="M216.5 112a.5.5 0 010 1h-166a.5.5 0 010-1h166z"
-        fill="var(--base-300)"
-      />
-      <rect
-        x={182}
-        y={119}
-        width={31}
-        height={10}
-        rx={2}
-        fill="var(--main-500)"
-      />
-      <rect
-        x={145}
-        y={104}
-        width={18}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-      <rect
-        x={188}
-        y={104}
-        width={20}
-        height={2}
-        rx={1}
-        fill="var(--base-500)"
-      />
-    </svg>
-  )
-}
-
-export default PricingC;
diff --git a/src/index.css b/src/index.css
index 57d3b5a..b648f56 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,9 +27,9 @@
   --main-500: #667eea;
   --main-200: #4a5568;
   --main-100: #2d3648;
-  --solid: #1a202c;
+  --solid: #111827;
   --solid-900: #d1dcec;
-  --sidebar-bg: #2d3648;
+  --sidebar-bg: #2e3647;
   --sidebar-color: #fff;
   --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);
   --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);
@@ -65,14 +65,9 @@
   --main-100: #c6f6d5;
 }
 
-.teal {
-  --main-500: #38b2ac;
-  --main-400: #4fd1c5;
-}
-
-.teal:not(.dark-mode) {
-  --main-200: #b2f5ea;
-  --main-100: #e6fffa;
+.yellow {
+  --main-500: #F59E0B;
+  --main-400: #FBBF24;
 }
 
 .blue {
@@ -135,7 +130,7 @@ iframe {
 }
 
 .app.dark-mode {
-  background-color: #1a202c;
+  background-color: #111827;
 }
 
 .main {
@@ -143,12 +138,17 @@ iframe {
   overflow: auto;
   transition: .3s;
 }
+
 ::-webkit-scrollbar-thumb,
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar {
   display: none;
 }
 
+.app.has-sidebar .main {
+  padding-left: 160px;
+}
+
 .sidebar {
   height: 100vh;
   width: 160px;
@@ -516,11 +516,6 @@ svg { width: 100%; }
   display: none;
   width: 100%;
   transition: .3s;
-
-}
-
-.app.has-sidebar .codes {
-  width: calc(100% - 160px);
 }
 
 .dark-mode .view.show-code, .dark-mode .codes pre {
@@ -760,12 +755,16 @@ pre, code {
     z-index: 1;
     background-color: #fff;
     border: 1px solid var(--base-200);
-    left: 20px;
+    right: 150px;
   }
 
   .dark-mode .switcher {
     background-color: #1a202c;
   }
+
+  .app.has-sidebar .main {
+    padding-left: 0;
+  }
 }
 
 @media (max-width: 380px) {
@@ -793,4 +792,8 @@ pre, code {
   .dark-mode .github svg {
     color: #1a202c;
   }
+
+  .switcher {
+    right: 70px;
+  }
 }