diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index bf7673e..e6fa040 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -41,7 +41,7 @@
     button.secondary {
         @apply btn;
         @apply bg-hSecondary text-hOnSecondary;
-        @apply hover:brightness-90;
+        @apply hover:bg-hSecondary;
     }
 
     div.card {
diff --git a/frontend/src/views/creators/DonationButtonBanner.vue b/frontend/src/views/creators/DonationButtonBanner.vue
index 7978025..2229809 100644
--- a/frontend/src/views/creators/DonationButtonBanner.vue
+++ b/frontend/src/views/creators/DonationButtonBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-      class="secondary"
+      class="secondary text-white donation-action"
       @click="openDonationDialog()"
   >
     {{ $t('isupportbtn.isupport') }}
@@ -166,7 +166,12 @@ function preventNonNumeric(event) {
 }
 </script>
 
-<style>
+<style scoped>
+
+.donation-action {
+  @apply bg-hutopyPrimary;
+}
+
 .error-message {
   color: white;
   background-color: red;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 885783a..e18fcd2 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,28 +1,30 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        hBackground: "var(--h-background)",
-        hOnBackground: "var(--h-on-background)",
-        hSurface: "var(--h-surface)",
-        hOnSurface: "var(--h-on-surface)",
-        hPrimary: "var(--h-primary)",
-        hOnPrimary: "var(--h-on-primary)",
-        hSecondary: "var(--h-secondary)",
-        hOnSecondary: "var(--h-on-secondary)",
-        hTertiary: "var(--h-tertiary)",
-        hOnTertiary: "var(--h-on-tertiary)",
-        hError: "var(--h-error)",
-        hOnError: "var(--h-on-error)",
-      }
-    }
-  },
-  plugins: []
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            colors: {
+                hutopyPrimary: "var(--hutopy-primary)",
+                hutopySecondary: "var(--hutopy-secondary)",
+                hBackground: "var(--h-background)",
+                hOnBackground: "var(--h-on-background)",
+                hSurface: "var(--h-surface)",
+                hOnSurface: "var(--h-on-surface)",
+                hPrimary: "var(--h-primary)",
+                hOnPrimary: "var(--h-on-primary)",
+                hSecondary: "var(--h-secondary)",
+                hOnSecondary: "var(--h-on-secondary)",
+                hTertiary: "var(--h-tertiary)",
+                hOnTertiary: "var(--h-on-tertiary)",
+                hError: "var(--h-error)",
+                hOnError: "var(--h-on-error)",
+            }
+        }
+    },
+    plugins: []
 }