diff --git a/src/App.vue b/src/App.vue
index 9fdc175..833d207 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,7 @@
       </div>
     </header>
 
-    <div class="max-w-6xl mx-auto px-4 bg-gray-700 py-2 px-5 -mt-8">
+    <div class="max-w-6xl mx-auto px-4 bg-charade py-2 px-5 -mt-8">
       <div class="flex justify-between items-center -mx-4">
         <div class="px-4 flex-1">
           <form action="" class="flex flex-row-reverse items-center">
diff --git a/tailwind.config.js b/tailwind.config.js
index 20926d3..38d3402 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        charade: '#2a293c',
         inherit: 'inherit'
       }
     }