diff --git a/forms-flow-web/src/components/Modeler/Modeler.scss b/forms-flow-web/src/components/Modeler/Modeler.scss
index 55253f11e7..3ad4971e3d 100644
--- a/forms-flow-web/src/components/Modeler/Modeler.scss
+++ b/forms-flow-web/src/components/Modeler/Modeler.scss
@@ -36,6 +36,25 @@
 .card-border {
   border-left: solid 1px $gray-200;
 }
+
+.card-header.bg-default .card-title {
+  color: $white;
+}
+
+.card-header .card-title {
+  color: $dark; 
+}
+
+
+.bg-default {
+  background-color: $primary-700;
+  border: $primary-700;
+  color: $white !important;
+}
+
+.text-muted{
+  color: $gray-700 !important;
+}
 .select-style {
   margin-bottom: 21px;
   margin-top: 10px;
diff --git a/forms-flow-web/src/variables.scss b/forms-flow-web/src/variables.scss
index 016d2bddfc..4d7ccfe1dc 100644
--- a/forms-flow-web/src/variables.scss
+++ b/forms-flow-web/src/variables.scss
@@ -5,6 +5,7 @@ $primary-300: var(--ff-primary-300);
 $primary-400: var(--ff-primary-400);
 $primary-500: var(--ff-primary-500);
 $primary-600: var(--ff-primary-600);
+$primary-700: var(--ff-primary-700);
 $danger-100: var(--ff-danger-100);
 $danger-200: var(--ff-danger-200);
 $secondary: var(--ff-secondary);