diff --git a/forms-flow-web/src/styles.scss b/forms-flow-web/src/styles.scss
index a1dd9565cc..59675d7ada 100644
--- a/forms-flow-web/src/styles.scss
+++ b/forms-flow-web/src/styles.scss
@@ -2,42 +2,6 @@
 
 @charset "UTF-8";
 
-$white: #fff;
-$grey: #6c757d;
-$gray-100: #f8f9fa;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #868e96;
-$gray-700: #495057;
-$gray-800: #373a3c;
-$gray-900: #212529;
-$black: #000;
-
-$blue: #4D61FC;
-$indigo: #6610f2;
-$purple: #613d7c;
-$pink: #e83e8c;
-$red: #ff0039;
-$orange: #f2661f;
-$yellow: #fcba19;
-$green: #3fb618;
-$teal: #20c997;
-$cyan: #9954bb;
-$lightblue: #4d61fc;
-
-$primary: $blue;
-$secondary: $grey;
-$success: $green;
-$info: $lightblue;
-$warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: $gray-800;
-
- 
-
 .overflow-x-auto {
   overflow-x: auto;
   overflow-y: hidden;
@@ -46,25 +10,19 @@ $dark: $gray-800;
 .overflow-y-auto {
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-.text-primary {
-  color: $primary;
-}
-
- 
+} 
 
 .btn-primary {
-  background-color: $primary;
+  background-color: var(--color-info);
 }
 
 .btn-outline-primary:not(:disabled) {
-  border-color: #0071EB;
-  color: #0071EB;
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 
   &:hover {
-    color: #ffffff;
-    background-color: $primary;
+    color: var(--color-white);
+    background-color: var(--color-info);
   }
 }
 
@@ -120,16 +78,16 @@ body {
 }
 
 .well {
-  border: 1px solid #eeeeee;
+  border: 1px solid var(--color-gray-200);
   padding: 1rem;
-  background-color: #f8f8f8bf;
+  background-color: var(--color-gray-100);
 }
 
 .formio-component-panel {
-  border: 1px solid #eeeeee;
+  border: 1px solid var(--color-gray-200);
 
   .panel-heading {
-    background-color: #eeeeee;
+    background-color: var(--color-gray-200);
     padding: 10px 0 10px 10px;
 
     .panel-title i {
@@ -143,8 +101,8 @@ body {
 }
 
 .page-item.active .page-link {
-  background-color:  #4183c4 !important;
-  border-color: #56595d !important;
+  background-color:  var(--color-primary-dkst) !important;
+  border-color: var(--color-secondary) !important;
 }
 
 h5,
@@ -153,23 +111,23 @@ h5,
 }
 
 .bg-default {
-  background-color: #38598a;
-  border: #38598a;
-  color: white !important;
+  background-color: var(--color-primary-dkst);
+  border: var(--color-primary-dkst);
+  color: var(--color-white) !important;
 }
 
 .text-muted {
-  color: #868e96 !important;
+  color: var(--color-gray-600) !important;
 }
 
 i.fa.fa-question-circle.text-muted {
-  color: #2e96ff !important;
+  color: var(--color-question-circle) !important;
 }
 
 .panel-heading {
-  background-color: #38598a;
-  border: #38598a;
-  color: white !important;
+  background-color: var(--color-primary-dkst);
+  border: var(--color-primary-dkst);
+  color: var(--color-white) !important;
   padding: 0.75rem 1.25rem;
   margin-bottom: 8px;
 }
@@ -185,21 +143,21 @@ i.fa.fa-question-circle.text-muted {
 
 .formio-error-wrapper,
 .has-error {
-  color: red;
-  background-color: #fff;
-  border-color: red;
+  color: var(--color-danger);
+  background-color: var(--color-white);
+  border-color: var(--color-danger);
 
   label {
-    color: red;
+    color: var(--color-danger);
   }
 }
 
 .formio-errors .error {
-  color: red;
+  color: var(--color-danger);
 }
 
 .is-invalid {
-  background-color: #ffd1d1;
+  background-color: var(--color-invalid);
 }
 
 .nav-dropdown {
@@ -210,11 +168,11 @@ i.fa.fa-question-circle.text-muted {
     right: 0;
     top: 2rem;
     left: auto;
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 8px 16px 0 var(--color-black);
   }
 
   .dropdown-toggle {
-    color: white !important;
+    color: var(--color-white) !important;
 
     a {
       text-decoration: none;
@@ -225,7 +183,7 @@ i.fa.fa-question-circle.text-muted {
     padding: 0 0 0 0;
     font-size: 2rem;
     float: right;
-    color: #1264b6e0;
+    color: var(--color-primary-dkst);;
   }
 }
 
@@ -239,12 +197,12 @@ i.fa.fa-question-circle.text-muted {
 
 .main-nav {
   text-decoration: none !important;
-  color: $black  !important;
+  color: var(--color-black) !important;
   font-size: 20px !important;
 }
 
 .nav-user-role {
-  color: #003366;
+  color: var(--color-primary-dkst);
   font-size: 15px;
   font-weight: bold;
   padding: 0 0;
@@ -253,7 +211,7 @@ i.fa.fa-question-circle.text-muted {
 .nav-user-email {
   font-size: 14px;
   padding: 0 0;
-  color: #373a3c;
+  color: var(--color-dark);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -263,7 +221,7 @@ i.fa.fa-question-circle.text-muted {
   font-size: 20px;
   padding: 0 0;
   font-weight: 600;
-  color: #373a3c;
+  color: var(--color-dark);
 }
 
 .nav-logout {
@@ -273,31 +231,31 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .nav-tabs .nav-link.active {
-  color: #4d4d4d;
-  background-color: #f5f5f5;
-  border-color: #f5f5f5 !important;
+  color: var(--color-gray-800);
+  background-color: var(--color-white);
+  border-color: var(--color-gray-200) !important;
 }
 
 .nav-link {
   a {
-    color: black;
+    color: var(--color-black);
   }
 }
 
 .active {
-  background-color: $white;
+  background-color: var(--color-white);
 }
 
 .active-tab {
-  //color: $lightblue !important;
-  //border-bottom: 1px solid red;
+  //color: var(--color-info) !important;
+  //border-bottom: 1px solid var(--color-red);
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
 
 .active-tab-dropdown>#dashboard-dropdown {
-  //color: $lightblue !important;
-  //border-bottom: 1px solid red;
+  //color: var(--color-info) !important;
+  //border-bottom: 1px solid var(--color-red);
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
@@ -305,18 +263,18 @@ i.fa.fa-question-circle.text-muted {
  
 .dropdown-item:hover {
   filter: none;
-  background-color: #e9ecef;
+  background-color: var(--color-gray-200);
 }
 
 .selected-tag {
-  color: $lightblue  !important;
-  border-bottom: 1px solid $lightblue;
+  color: var(--color-info)  !important;
+  border-bottom: 1px solid var(--color-info);
   background-color: transparent;
 }
 
 .lbl-logout {
   font-size: 16px;
-  color: #373a3c;
+  color: var(--color-dark);
   margin-left: 10px;
   cursor: pointer;
 }
@@ -331,9 +289,9 @@ i.fa.fa-question-circle.text-muted {
   right: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid var(--color-gray-400);
   border-left: 7px solid transparent;
-  border-bottom-color: rgba(0, 0, 0, 0.2);
+  border-bottom-color: var(--color-black);
   content: "";
 }
 
@@ -343,7 +301,7 @@ i.fa.fa-question-circle.text-muted {
   right: 10px;
   display: inline-block;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
+  border-bottom: 6px solid var(--color-white);
   border-left: 6px solid transparent;
   content: "";
 }
@@ -397,17 +355,12 @@ i.fa.fa-question-circle.text-muted {
 
 .lbl-app-nanme {
   font-size: 20px;
-  color: #ffff;
+  color: var(--color-white);
   margin-bottom: 0;
   font-weight: bold;
   margin-left: 20px;
 }
 
-.app-name {
-  color: $yellow;
-  margin: 0;
-}
-
 .nav-icons {
   vertical-align: text-top;
   margin-right: 3px;
@@ -418,7 +371,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .navbar-dark.navbar-toggler {
-  border-color: white;
+  border-color: var(--color-white);
 }
 
 .back-icon {
@@ -486,8 +439,8 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .tooltip-inner {
-  color: black !important;
-  background-color: white !important;
+  color: var(--color-black) !important;
+  background-color: var(--color-white) !important;
   border: 0.5px solid !important;
   text-align: left;
 }
@@ -503,7 +456,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 select option:hover {
-  box-shadow: 0 0 10px 100px #000 inset;
+  box-shadow: 0 0 10px 100px var(--color-black) inset;
 }
 
 .modal-dialog {
@@ -513,40 +466,32 @@ select option:hover {
  
 
 #sidebar {
-  background: #fff;
+  background: var(--color-white);
 }
 
 .content {
-  background-color: #f8f8f8;
+  background-color: var(--color-light);
 }
 
 #sidebar ul li.active>a,
 #sidebar a[aria-expanded="true"] {
-  background: #fff;
+  background: var(--color-white);
 }
 
 header nav {
-  border-bottom: #fff;
-}
-
-.topheading-border-bottom {
-  z-index: 2000;
-  border-bottom: 2px solid #4d61fc !important;
-  padding: 0 0.5rem !important;
-  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  border-bottom: var(--color-white);
 }
 
 .rounded-circle {
   border-radius: 50% !important;
-  border: 2px solid lightgrey;
+  border: 2px solid var(--light-gray);
   height: 40px;
   width: 40px;
 }
 
 .sort-span {
   cursor: pointer;
-  border: 1px solid #0071EB;
+  border: 1px solid var(--color-primary);
   border-radius: 0.25rem;
   padding: 4px;
   padding-left: 6px;
@@ -557,10 +502,10 @@ header nav {
 
 .sort-span:hover {
 
-  background-color: #0071EB;
+  background-color: var(--color-primary);
 
   .fa-lg-hover {
-    color: white;
+    color: var(--color-white);
   }
 }
 
@@ -568,7 +513,7 @@ header nav {
   font-size: 30px;
   font-weight: 600;
   /*margin-left: -15px!important;*/
-  color: black;
+  color: var(--color-black);
 }
 
 div[disabled] {
@@ -585,10 +530,6 @@ div[disabled] {
   }
 }
 
-.css-79elbk {
-  // position: none;
-}
-
 .classApplicationId {
   width: 15%;
 }
@@ -610,7 +551,7 @@ div[disabled] {
 }
 
 .navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, .9);
+  color: var(--color-black)
 }
 
 // overwriting default styles
@@ -629,16 +570,12 @@ div[disabled] {
 
 .delete_button {
   font-size: 25px;
-  color: red;
+  color: var(--color-danger);
   cursor: pointer;
 }
 
-.custom_primary_color {
-  color: #0000FF;
-}
-
 .tooltiptext {
-  color: #757575;
+  color: var(--color-gray-600);
 }
 
 .select_download {
@@ -660,11 +597,11 @@ div[disabled] {
 }
 
 a {
-  color: #0000FF;
+  color: var(--color-primary);
 }
 
 .info-background {
-  background-color: #FFDBDB;
+  background-color: var(--color-info-background);
 }
 
 .formio-wizard-nav-container {
@@ -680,8 +617,8 @@ a {
 }
 
 div.upload {
-  background-color: rgb(239, 239, 239);
-  border: 1px solid #ddd;
+  background-color: var(--color-gray-200);
+  border: 1px solid var(--color-gray-300);
   border-radius: 5px;
   display: inline-block;
   height: 30px;
@@ -707,10 +644,10 @@ div.upload input[type="file"] {
 }
 
 .uploadButton {
-  background-color: #425F9C;
+  background-color: var(--color-primary);
   border: none;
   border-radius: 3px;
-  color: #FFF;
+  color: var(--color-white);
   cursor: pointer;
   display: inline-block;
   height: 30px;
@@ -730,19 +667,19 @@ div.upload input[type="file"] {
 }
 
 .searchInvalid {
-  border-color: #ff2727 !important;
-  background-color: rgb(255, 255, 255);
+  border-color: var(--color-error)!important;
+  background-color: var(--color-white);
 }
 
 .validation-err {
-  color: red;
+  color: var(--color-danger);
   margin-left: 52px;
   font-size: 13px;
 }
 
 .chip-element{
   border-radius: 100rem;
-box-shadow: 0 0 0 2px rgb(217, 217, 217);
+  box-shadow: 0 0 0 2px var(--color-main-bg);
 
   .chip-label{
       padding: 3px 6px 3px 10px;
@@ -753,10 +690,10 @@ box-shadow: 0 0 0 2px rgb(217, 217, 217);
   .chip-close{
       margin-left: 5px;
       border-radius: 50%;
-      background-color: #d4d4d4;
+      background-color: var(--color-main-bg);
       width: 20px;
       height: 20px;
-      color: #393939;
+      color: var(--color-gray-800);
       font-weight: 100;
       cursor: pointer;
       display: inline-flex;
@@ -765,8 +702,8 @@ box-shadow: 0 0 0 2px rgb(217, 217, 217);
       justify-content: center;
 
       &:hover{
-          background-color: #fc4f4f;
-          color: #fff;
+          background-color: var(--color-error);
+          color: var(--color-white);
       }
   }
 }