diff --git a/home/_includes/cta.html b/home/_includes/cta.html
index 9567c5cf..ed580169 100644
--- a/home/_includes/cta.html
+++ b/home/_includes/cta.html
@@ -2,7 +2,7 @@
     <div class="container px-5 py-24 mx-auto">
       <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
         <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">Slow-carb next level shoindxgoitch ethical authentic, scenester sriracha forage.</h1>
-        <button class="flex-shrink-0 text-white bg-purple-500 border-0 py-2 px-8 focus:outline-none hover:bg-purple-600 rounded text-lg mt-10 sm:mt-0">Button</button>
+        <button class="flex-shrink-0 text-white bg-primarylg border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">Button</button>
       </div>
     </div>
 </section>
\ No newline at end of file
diff --git a/home/_includes/features.html b/home/_includes/features.html
index 83fb9a3c..2bc706f3 100644
--- a/home/_includes/features.html
+++ b/home/_includes/features.html
@@ -3,7 +3,7 @@
       <div class="flex flex-wrap w-full mb-20">
         <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
           <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Pitchfork Kickstarter Taxidermy</h1>
-          <div class="h-1 w-20 bg-purple-500 rounded"></div>
+          <div class="h-1 w-20 bg-primarylg rounded"></div>
         </div>
         <p class="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't heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac humblebrag.</p>
       </div>
diff --git a/home/_includes/footer.html b/home/_includes/footer.html
index d22f8d35..1d0c9550 100644
--- a/home/_includes/footer.html
+++ b/home/_includes/footer.html
@@ -2,7 +2,7 @@
     <div class="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 class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
         <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-purple-500 rounded-full" viewBox="0 0 24 24">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-primarylg rounded-full" viewBox="0 0 24 24">
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
           </svg>
           <span class="ml-3 text-xl">{{ site.title }}</span>
diff --git a/home/_includes/header.html b/home/_includes/header.html
index e1e03ac1..af4e7c36 100644
--- a/home/_includes/header.html
+++ b/home/_includes/header.html
@@ -1,21 +1,17 @@
 <header class="text-gray-600 body-font">
     <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
       <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-purple-500 rounded-full" viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-primary rounded-full" viewBox="0 0 24 24">
           <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
         </svg>
         <span class="ml-3 text-xl">{{ site.title }}</span>
       </a>
-      <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
-        <a class="mr-5 hover:text-gray-900">First Link</a>
-        <a class="mr-5 hover:text-gray-900">Second Link</a>
-        <a class="mr-5 hover:text-gray-900">Third Link</a>
-        <a class="mr-5 hover:text-gray-900">Fourth Link</a>
+      <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
+        <a class="mr-5 hover:text-gray-900">for buisnesses</a>
+        <a class="mr-5 hover:text-gray-900">for hobbyists</a>
       </nav>
-      <button href="{{site.demo-link}}" class="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">Open demo
-        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
-          <path d="M5 12h14M12 5l7 7-7 7"></path>
-        </svg>
+      <button href="{{site.demo-link}}" class="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">
+        Open demo
       </button>
     </div>
-</header>
+</header>
\ No newline at end of file
diff --git a/home/_includes/hero.html b/home/_includes/hero.html
index 42bdc8f5..c02ba067 100644
--- a/home/_includes/hero.html
+++ b/home/_includes/hero.html
@@ -6,7 +6,7 @@
         </h1>
         <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic tumeric truffaut hexagon try-hard chambray.</p>
         <div class="flex justify-center">
-          <button class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Button</button>
+          <button class="inline-flex text-white bg-primarylg border-0 py-2 px-6 focus:outline-none hover:bg-primary rounded text-lg">Button</button>
           <button class="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>
       </div>
diff --git a/home/styles/index.css b/home/styles/index.css
index c9adcbf2..7fcf8268 100644
--- a/home/styles/index.css
+++ b/home/styles/index.css
@@ -4,10 +4,6 @@
 
 
 @layer components {
-    .primary {
-        @apply bg-purple
-    }
-
     .custom-underline-blue {
         @apply border-b-4 border-blue-400;
     }
@@ -27,3 +23,11 @@
         */
     }
 }
+
+.bg-primary {
+    background-color: blueviolet;
+}
+
+.bg-primarylg {
+    background-color: lightblue;
+}
diff --git a/home/tailwind.config.js b/home/tailwind.config.js
index 50f463eb..3139f181 100644
--- a/home/tailwind.config.js
+++ b/home/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
     purge: [
         '{,!(node_modules|_site)/**/}*.{html,md}',
     ],
+    darkMode: 'media',
     theme: {},
     plugins: [
         require('@tailwindcss/typography'),