diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 267abb64b..3576a8ac9 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -2,5 +2,5 @@
 
 //Blue gradient background mixin
 @mixin blue-gradient {
-  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+  background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
 }
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 00a17a7b6..82afdf4ef 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -54,14 +54,14 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+    background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
     justify-content: center;
     font-weight: 500;
     @media (hover: hover) {
-      background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+      background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
     }
     &:focus {
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;