diff --git a/assets/global.css b/assets/global.css
index ea77c765c..eccfd84e7 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -3,7 +3,7 @@
 :root {
   --bg-primary: white;
   --bg-primary-hover: rgba(0, 0, 0, 0.075);
-  --bg-primary-accent: #ddd;
+  --bg-primary-accent: #f1f3f5;
   --bg-secondary: black;
 
   --text-primary: black;
diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
index 75ee278ba..f8aa6ba4d 100644
--- a/components/core/Featurebar/Featurebar.module.css
+++ b/components/core/Featurebar/Featurebar.module.css
@@ -1,5 +1,5 @@
 .separator {
-  @apply mx-3 bg-gray-400;
+  @apply mx-3 bg-secondary;
   width: 1px;
   height: 20px;
 }
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 035d0858c..1a2aae7be 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(
-    'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
+    'hidden py-2 px-6 bg-primary-accent text-primary text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent',
     className
   )
   return (
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index 8a26653b5..413c97e42 100644
--- a/components/core/Searchbar/Searchbar.module.css
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -1,5 +1,5 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accent-4 pr-10;
   min-width: 300px;
 }
 
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index d98c8bc62..1c86a87f1 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative rounded-lg text-sm bg-accent-2 text-gray-600 w-full',
+        'relative rounded-lg text-sm bg-primary-accent text-primary w-full',
         className
       )}
     >
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 5135a4237..f60c71039 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -1,11 +1,12 @@
 .root {
   @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
   bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
-  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
+  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
+  border border-transparent;
 }
 
 .root:hover {
-  @apply bg-gray-800;
+  @apply bg-primary-accent text-primary border border-secondary;
 }
 
 .root:focus {