diff --git a/_variables.scss b/_variables.scss
index 4badd1d..2d455a4 100644
--- a/_variables.scss
+++ b/_variables.scss
@@ -1,114 +1,91 @@
 // Variables
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-// Color system
-// stylelint-disable
-// Fonts
-$font-stack-en:
-  'Noto Sans',
-  'Noto Sans Devanagari',
-  'Noto Sans Tamil',
-  'Noto Sans Bengali',
-  'Noto Sans Malayalam',
-  'Noto Sans Gurmukhi',
-  'Noto Sans Gujarati',
-  'Noto Sans Telugu',
-  'Noto Sans Kannada',
-  'Noto Sans Oriya',
-  'Noto Nastaliq Urdu',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen-Sans,
-  Ubuntu,
-  Cantarell,
-  'Helvetica Neue',
-  sans-serif;
-$font-stack-hi:
-  'Noto Sans Devanagari',
-  'Noto Sans',
-  'Noto Sans Tamil',
-  'Noto Sans Bengali',
-  'Noto Sans Malayalam',
-  'Noto Sans Gurmukhi',
-  'Noto Sans Gujarati',
-  'Noto Sans Telugu',
-  'Noto Sans Kannada',
-  'Noto Sans Oriya',
-  'Noto Nastaliq Urdu',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen-Sans,
-  Ubuntu,
-  Cantarell,
-  'Helvetica Neue',
-  sans-serif;
-$font-stack-ur:
-  'Noto Sans',
-  'Noto Nastaliq Urdu',
-  'Noto Sans Devanagari',
-  'Noto Sans Tamil',
-  'Noto Sans Bengali',
-  'Noto Sans Malayalam',
-  'Noto Sans Gurmukhi',
-  'Noto Sans Gujarati',
-  'Noto Sans Telugu',
-  'Noto Sans Kannada',
-  'Noto Sans Oriya',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  Oxygen-Sans,
-  Ubuntu,
-  Cantarell,
-  'Helvetica Neue',
-  sans-serif;
-/* gray colors */
-$gray-0:       #f3f3f3; // place holder active bg
-$gray-100:     #cccccc; // disable btn bg, icon color
-$gray-200:     #979797; // disable text, place holder text
-$gray-300:     #999999; // sub heading 2
-$gray-400:     #666666; // sub heading
-$gray-800:     #333333; // text color
+$font-stack-en: 'Noto Sans',
+'Noto Sans Devanagari',
+'Noto Sans Tamil',
+'Noto Sans Bengali',
+'Noto Sans Malayalam',
+'Noto Sans Gurmukhi',
+'Noto Sans Gujarati',
+'Noto Sans Telugu',
+'Noto Sans Kannada',
+'Noto Sans Oriya',
+'Noto Nastaliq Urdu',
+-apple-system,
+BlinkMacSystemFont,
+'Segoe UI',
+Roboto,
+Oxygen-Sans,
+Ubuntu,
+Cantarell,
+'Helvetica Neue',
+sans-serif;
+$font-stack-hi: 'Noto Sans Devanagari',
+'Noto Sans',
+'Noto Sans Tamil',
+'Noto Sans Bengali',
+'Noto Sans Malayalam',
+'Noto Sans Gurmukhi',
+'Noto Sans Gujarati',
+'Noto Sans Telugu',
+'Noto Sans Kannada',
+'Noto Sans Oriya',
+'Noto Nastaliq Urdu',
+-apple-system,
+BlinkMacSystemFont,
+'Segoe UI',
+Roboto,
+Oxygen-Sans,
+Ubuntu,
+Cantarell,
+'Helvetica Neue',
+sans-serif;
+$font-stack-ur: 'Noto Sans',
+'Noto Nastaliq Urdu',
+'Noto Sans Devanagari',
+'Noto Sans Tamil',
+'Noto Sans Bengali',
+'Noto Sans Malayalam',
+'Noto Sans Gurmukhi',
+'Noto Sans Gujarati',
+'Noto Sans Telugu',
+'Noto Sans Kannada',
+'Noto Sans Oriya',
+-apple-system,
+BlinkMacSystemFont,
+'Segoe UI',
+Roboto,
+Oxygen-Sans,
+Ubuntu,
+Cantarell,
+'Helvetica Neue',
+sans-serif;
 // Base Colors
-$blue:    #024f9d;
-$green:   #008840;
-$orange:  #e55a28;
-$red:     #ff4558;
-$white:    #fff;
-$indigo:  #6610f2;
-$purple:  #6f42c1;
-$pink:    #e83e8c;
-$yellow:  #ffc107;
-$teal:    #20c997;
-$cyan:    #17a2b8;
+$blue: #024f9d;
+$green: #008840;
+$orange: #e55a28;
+$red: #ff4558;
+$white: #fff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$yellow: #ffc107;
+$teal: #20c997;
+$cyan: #17a2b8;
+$gray: #333333;
 // brand Colors
-$primary-color:   $blue;
+$primary-color: $blue;
 $secondary-color: $green;
-$tertiary-color:  $orange;
-// Status Colors
-$info-color:      $blue;
-$success-color:   $green;
-$warning-color:   $orange;
-$danger-color:    $red;
+$tertiary-color: $orange;
 // Nuetral Colors
-$white-color:     $white;
-$theme-colors: () !default;
-$theme-colors: map-merge((
-  "primary":    $primary-color,
-  "secondary":  $secondary-color,
-  "tertiary":   $tertiary-color,
-  "success":    $success-color,
-  "info":       $info-color,
-  "warning":    $warning-color,
-  "danger":     $danger-color,
-  "light":      $gray-100,
-  "dark":       $gray-800
-), $theme-colors);
+$white-color: $white;
+// gray colors shades 
+$gray-0: lighten($gray, 75%); // place holder active bg
+$gray-100: lighten($gray, 60%); // disable btn bg, icon color
+$gray-200: lighten($gray, 40%); // disable text, place holder text
+$gray-300: lighten($gray, 39%); // sub heading 2
+$gray-400: lighten($gray, 20%); // sub heading
+$gray-800: $gray; // text color
+/*
 // primary colors shades 
 $primary-0:   lighten($primary-color,65%); // bg
 $primary-100: lighten($primary-color,15%); // default button bg
@@ -117,60 +94,107 @@ $primary-300: lighten($primary-color,5%);  // outline, focus fields
 $primary-400: $primary-color; // button bg, heading, table titles, links, toggles 
 $primary-600: darken($primary-color,15%);  // on press
 $primary-800: darken($primary-color,30%);  // hover
+*/
+
+$primary-0: #F3F7FA; // bg
+$primary-100: #EDF4F9; // default button bg
+$primary-200: #80A7CE; // divider
+$primary-300: #7AB4EE; // outline, focus fields
+$primary-400: $primary-color; // button bg, heading, table titles, links, toggles 
+$primary-600: #005391; // on press
+$primary-800: #002E50; // hover
+/*
 // secondary colors shades
 $secondary-0:   lighten($secondary-color,50%);  // toast bg
 $secondary-100: lighten($secondary-color,15%);   // buttong bg, toast
 $secondary-200: lighten($secondary-color,10%);   // button hover
 $secondary-400: $secondary-color;               // icon
+*/
+
+$secondary-0: #E1FFDF; // toast bg
+$secondary-100: #00C786; // buttong bg, toast
+$secondary-200: #07BC81; // button bg
+$secondary-400: $secondary-color; // hover
+/*
 // tertiary colors shades
 $tertiary-0:   lighten($tertiary-color,50%); // toast bg
 $tertiary-100: lighten($tertiary-color,15%); // buttong bg, toast
 $tertiary-400: $tertiary-color; // icon, label, notification bg
+*/
+
+$tertiary-0: #FEEDD7; // toast bg
+$tertiary-100: #FFA11D; // buttong bg, toast
+$tertiary-400: $tertiary-color; // icon, label, notification bg
+/*
 // red colors shades
 $red-0:   lighten($red,50%); // toast bg
 $red-100: lighten($red,15%); // buttong bg, toast
 $red-400: $red; // icon color, lable, notification bg
+*/
+
+$red-0: #FBCCD1; // toast bg
+$red-100: #FF6979; // buttong bg, toast
+$red-400: $red; // icon color, lable, notification bg
+
+// Status Colors
+$info-color: $primary-400;
+$success-color: $secondary-200;
+$warning-color: $tertiary-100;
+$danger-color: $red-100;
 // Settings for the `<body>` element.
-$bg-body:       $primary-0;
-$body-color:    $gray-800;
+$bg-body: $primary-0;
+$body-color: $gray-800;
+$theme-colors: () !default;
+$theme-colors: map-merge(( "primary": $primary-color, "secondary": $secondary-color, "tertiary": $tertiary-color, "success": $success-color, "info": $info-color, "warning": $warning-color, "danger": $danger-color, "light": $gray-100, "dark": $gray), $theme-colors);
 // Style anchor elements.
-$link-color:                theme-color("primary");
-$link-decoration:           none;
-//$link-hover-color:          darken($link-color, 15%);
-$link-hover-decoration:     underline;
+$link-color: theme-color("primary");
+$link-decoration: none;
+//$link-hover-color:        darken($link-color, 15%);
+$link-hover-decoration: underline;
 // Fonts
 // $font-default-size: 14px;
-$font-size-base: 1rem; // Assumes the browser default, typically `16px`
-$font-weight-light:           300;
-$font-weight-normal:          400;
-$font-weight-bold:            700;
-$font-weight-base:            $font-weight-normal;
-$line-height-base:            $font-size-base * .25;
-$h1-font-size:                $font-size-base * 2.5; // 40px
-$h2-font-size:                $font-size-base * 2; // 32px
-$h3-font-size:                $font-size-base * 1.75; // 28px
-$h4-font-size:                $font-size-base * 1.5; // 24px
-$h5-font-size:                $font-size-base * 1.25; // 20px
-$h6-font-size:                $font-size-base; // 16px
-$font-size-lg:                ($h4-font-size); //24px
-$font-size-normal:            ($h6-font-size); // 16px
-$font-size-md:                ($font-size-base * .825); // 14px
-$font-size-sm:                ($font-size-base * .75); // 12px
-$font-size-xs:                ($font-size-base * .625); // 10px
-$p-font-size:                 $font-size-md;
+$font-size-base: 14px; // Assumes the browser default, typically `16px`
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+$font-weight-base: $font-weight-normal;
+$line-height-base: ($font-size-base + 8);
+$h1-font-size: $font-size-base * 2.286; // 32px
+$h2-font-size: $font-size-base * 2; // 28px
+$h3-font-size: $font-size-base * 1.714; // 24px
+$h4-font-size: $font-size-base * 1.429; // 20px
+$h5-font-size: $font-size-base * 1.143; // 16px
+$h6-font-size: $font-size-base * 1; // 14px
+$font-size-lg: ($h4-font-size); //20px
+$font-size-md: ($h5-font-size); // 16px
+$font-size-normal: ($font-size-base * 1); // 14px
+$font-size-sm: ($font-size-base * 0.8571); // 12px
+$font-size-xs: ($font-size-base * 0.7143); // 10px
+$p-font-size: $font-size-normal;
 // spaces
 $base-block-space: 8px;
-$block-padding-y-x: ($base-block-space * 1) ($base-block-space * 3); // any block default spacing
-$block-padding-xy: ($base-block-space * 3);  // top right bottom left spacing
-$block-padding-x: ($base-block-space * 3);  // left right spacing
-$block-padding-y: ($base-block-space * 1);  // top bottom spacing
-$block-margin-xl-minus: -($base-block-space * 3); // minus margin 24px left
-$block-margin-xr-minus: -($base-block-space * 3); // minus margin 24px right
+$block-padding-y-x: ($base-block-space * 1) ($base-block-space * 2); // any block default spacing 16px
+$block-padding-xy: ($base-block-space * 2); // top right bottom left spacing
+$block-padding-x: ($base-block-space * 2) ($base-block-space * 2); // left right spacing
+$block-padding-y: ($base-block-space * 1) ($base-block-space * 1); // top bottom spacing
+$block-margin-xl-minus: -($base-block-space * 2); // minus margin 16px left
+$block-margin-xr-minus: -($base-block-space * 2); // minus margin 16px right
+$block-margin-xr-minus: -($base-block-space * 2) -($base-block-space * 2); // minus margin 16px left & right
 // width heights
-$base-btn-small-height: ($base-block-space * 3);
+$base-btn-xs-height: ($base-block-space * 3);
 $base-btn-normal-height: ($base-block-space * 4);
-$base-btn-big-height: ($base-block-space * 5);
+$base-btn-sm-height: ($base-block-space * 5);
+$base-btn-md-height: ($base-block-space * 6);
+$base-btn-lg-height: ($base-block-space * 7);
 $base-btn-fluid: 100%;
+// modal component
+$sb-modal-header-bg: $primary-400;
+$sb-modal-actions-bg: $white-color;
+$sb-modal-header-bg-success: $secondary-200;
+$sb-modal-header-bg-warning: $tertiary-400;
+$sb-modal-header-bg-error: $red-400;
+$sb-modal-header-fsize: $h5-font-size;
+//button component
 // To clean
 $text-lightDark: #666;
 $text-gray: rgb(180, 171, 171);
@@ -184,4 +208,4 @@ $primary-border: 0.5px solid rgba(216, 216, 216, 0.5);
 $primary-background: rgba(216, 216, 216, 0.5);
 $card-label-border-color: rgba(2, 79, 157, 0.5);
 $dull-color: #b7d8f1;
-$qr-btn: #edf4f9;
\ No newline at end of file
+$qr-btn: #edf4f9;
diff --git a/component/_buttons.scss b/component/_buttons.scss
index 0d79363..224a843 100644
--- a/component/_buttons.scss
+++ b/component/_buttons.scss
@@ -1,4 +1,4 @@
-// buttons
+/* buttons sytle guide */
 // Specificity overrides
 input[type="submit"],
 input[type="reset"],
@@ -7,23 +7,21 @@ input[type="button"] {
     width: 100%;
   }
 }
-.d-flex-btns {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
+
 // base button styles
 .sb-btn {
     -webkit-tap-highlight-color: transparent;
-    -webkit-appearance: button;
     user-select: none;
     outline: 0;
     display: inline-block;
     margin-left: 0.25rem;
     border: 1px solid;
-    color:#fff;
     cursor:pointer;
-    margin:0px 0px 0px 8px;
+    color: $white-color;
+    @include margin(0px 0px 0px 8px);
+    min-width:($base-block-space * 8);
+    line-height: normal;
+    @include border-radius(3px);
     text: {
         transform: capitalize;
         decoration: none;
@@ -40,11 +38,13 @@ input[type="button"] {
     
 }
 // button sizes
-.sb-btn-small {
-    height:$base-btn-small-height;
-    padding: ($base-block-space * .5) ($base-block-space * 2);
-    font-size:$font-size-xs;
-    @include border-radius(2px);
+.sb-btn-xs, .sb-btn-normal, .sb-btn-sm,.sb-btn-md {
+    padding: ($base-block-space * 1) ($base-block-space * 2);
+}
+.sb-btn-xs {
+    height:($base-block-space * 3);
+    padding:($base-block-space * 0) ($base-block-space * 1);
+    font-size:$font-size-sm;
 }
 .sb-btn-normal {
     height:$base-btn-normal-height;
@@ -52,29 +52,38 @@ input[type="button"] {
     font-size:$font-size-sm;
     @include border-radius(4px);
 }
-.sb-btn-big {
-  height:$base-btn-big-height;
-  padding: $block-padding-y-x;
-  font-size:$font-size-normal;
-  @include border-radius(6px);
+.sb-btn-sm {
+    height:($base-block-space * 5);
+    font-size:$font-size-normal;
+}
+.sb-btn-md {
+    height:($base-block-space * 6);
+    font-size:$font-size-md;
+}
+.sb-btn-lg {
+  height:($base-block-space * 7);
+  padding: ($base-block-space * 0) ($base-block-space * 3);
+  font-size:$font-size-lg;
 }
 // disabled button
 .sb-btn-disabled {
     background-color: $gray-100;
     color:$gray-200;
     border:1px solid $gray-100;
+    cursor: not-allowed;
 }
 .sb-btn-outline-disabled {
     background-color: $white-color;
     color:$gray-100;
     border:1px solid $gray-100;
+    cursor: not-allowed;
 }
 // default outline colored btns
 .sb-btn-outline-primary{
     @include btn-theme-bgwhite($primary-color);
 } 
 .sb-btn-outline-secondary{
-    @include btn-theme-bgwhite($secondary-color);
+    @include btn-theme-bgwhite($secondary-200);
 } 
 .sb-btn-outline-tertiary{
     @include btn-theme-bgwhite($tertiary-color);
@@ -84,7 +93,7 @@ input[type="button"] {
     @include btn-theme-bgwhite($primary-color);
 } 
 .sb-btn-outline-success{
-    @include btn-theme-bgwhite($secondary-color);
+    @include btn-theme-bgwhite($secondary-200);
 } 
 .sb-btn-outline-warning{
     @include btn-theme-bgwhite($tertiary-color);
@@ -96,24 +105,135 @@ input[type="button"] {
     @include btn-theme-bgwhite($gray-800);
 } 
 // default colored btns
-.sb-btn-primary{
+.sb-btn-primary,.sb-btn-info{
     @include btn-theme($primary-color);
+    &:hover,&:active {
+        background: $primary-800;
+    }
 } 
-.sb-btn-secondary{
-    @include btn-theme($secondary-color);
+.sb-btn-secondary,.sb-btn-success{
+    @include btn-theme($secondary-200);
+    &:hover,&:active {
+        background: $secondary-400;
+    }
 }
-.sb-btn-tertiary{
+.sb-btn-tertiary,.sb-btn-warning{
     @include btn-theme($tertiary-color);
+    &:hover,&:active {
+        background: $tertiary-400;
+    }
 }
 .sb-btn-success{
     @include btn-theme($success-color);
+    &:hover,&:active {
+        background: $secondary-400;
+    }
 } 
 .sb-btn-info{
     @include btn-theme($info-color);
+    &:hover,&:active {
+        background: $primary-800;
+    }
 }
 .sb-btn-warning{
     @include btn-theme($warning-color);
+    &:hover,&:active {
+        background: $tertiary-400;
+    }
 } 
 .sb-btn-error{
     @include btn-theme($danger-color);
-} 
\ No newline at end of file
+    &:hover,&:active {
+        background: $red-400;
+    }
+}
+
+// to cleanup
+.ui.dodger-blue.basic.label {
+    border: 1px solid $primary-color !important;	
+    border-radius: 4px;
+    color: $primary-color;
+    font-size: 1rem;
+    font-weight: 300;
+    padding: 4px 16px;
+
+}
+.ui.semi-circular.dodger-blue.basic.label {
+    border: 1px solid $primary-color !important;
+    border-radius: 18.5px;
+    color: $primary-color;
+    font-size: 1.16rem;
+    padding: 10px 27px;
+}
+
+.ui.semi-circular.dodger-blue.button {
+    border: 1px solid $primary-color;
+    border-radius: 18.5px;
+    background: $primary-color;
+    color: #fff;
+    font-size: 1rem;    
+    font-weight: 100;
+    padding: 6px 27px;
+}
+
+.circular-placeholder {
+	border: 6px solid #fff;
+	background-color: #fff;
+    box-shadow: 0 0 6px 0 rgba(0,0,0,0.38);
+    border-radius: 100%;
+    height: 92px;
+    width: 92px;
+}
+.ui.button.rounded{
+    border-radius: 20px;
+}
+.ui.explore.blue.button {  
+    background-color: $primary-color;
+    padding: 10px 30px;
+}
+.ui.explore.blue.button:hover {  
+    opacity: 0.8;
+}
+.ui.explore.blue.button:active {  
+    opacity: 0.9;
+}
+.ui.basic.explore.blue.button {  
+    background-color: #fff;
+    border: 0.5px solid $primary-color;
+    box-shadow: none;
+    color: $primary-color;
+    font-weight: 700;
+    height:36px;
+    padding: 10px 30px;
+}
+.ui.basic.explore.blue.button:hover {  
+    opacity: 0.8;
+}
+.ui.basic.explore.blue.button:active {  
+    opacity: 0.9;
+}
+.ui.blue.button,
+.ui.blue.buttons .button{
+    background-color: $primary-color !important;
+    color: #fff !important;
+}
+.ui.primary.button, 
+.ui.primary.buttons .button{
+    background-color: $primary-color !important;
+    color: #fff !important;
+}
+.ui.basic.primary.button,
+.ui.basic.primary.buttons .button{
+    color: $primary-color !important;
+    background: transparent !important;
+}
+.ui.basic.blue.button,
+.ui.basic.blue.buttons .button{
+    color: $primary-color !important;
+    background: transparent !important;
+}
+.ui.red.label, 
+.ui.red.labels .label{
+    background: $danger-color !important;
+    border-color: $danger-color !important;
+}
diff --git a/component/_modal.scss b/component/_modal.scss
index 7b4b822..3f6d56d 100644
--- a/component/_modal.scss
+++ b/component/_modal.scss
@@ -1,99 +1,130 @@
-
-
- // modal
-.sb-modal{
-    .ui.modal {
-      margin: 0 auto;
-      left:0px;
-      right:0px;
-      @include size(100%,auto); //bourbon
-    
-      &>.sb-modal-header {
-        background-color: $primary-color;
-        color: $white-color;
-        font-weight: $font-weight-bold;
-        font-size: $h6-font-size;
-        padding:$block-padding-y-x;
-        border-bottom:0px solid $gray-100;
-        @include size(auto,2.5rem); //bourbon
+/* modal styles */
+.sb-modal {
+  .ui.modal {
+      @include margin(3.5rem auto 0 auto);
+      @include position(null, 0 0 null 0); //bourbon
+      @include size(100%, auto); //bourbon
+      .sb-modal-header {
+          background-color: $sb-modal-header-bg;
+          color: $white-color;
+          font-weight: $font-weight-bold;
+          font-size: $sb-modal-header-fsize;
+          padding: $block-padding-y-x;
+          border-bottom: 0 solid $gray-100; //@include size(auto,($base-block-space * 5)); //bourbon
+          min-height: ($base-block-space * 5);
+          line-height: ($h5-font-size + 8);
       }
-    
-      &>.sb-modal-content {
-        min-height: 100px;
-        padding:$block-padding-xy;
+      .sb-modal-content {
+          min-height: 100px;
+          padding: $block-padding-xy;
       }
-    
-      &>.close {
-        color: $white-color;
-        top: 0px;
-        right: 0px;
-        font-size: $font-size-base;
-        padding: 0;
-        margin: 0;
-        @include size(($base-block-space * 5),($base-block-space * 5)); //bourbon
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      .close {
+          color: $white-color;
+          font-size: $font-size-base;
+          @include padding(0 0); //bourbon
+          @include margin(0 0);
+          @include size(($base-block-space * 5), ($base-block-space * 5)); //bourbon
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          @include position(absolute, 0 0 null null); //bourbon
       }
-    
-      &>.sb-modal-actions {
-        padding:$block-padding-y-x;
-        background: $white-color;
-        border-top: 1px solid $gray-100;
-        min-height: ($base-block-space * 7);
+      .sb-modal-actions {
+          padding: $block-padding-y-x;
+          background: $sb-modal-actions-bg;
+          border-top: 1px solid $gray-100;
+          min-height: ($base-block-space * 7);
+          display: flex;
+          flex-direction: row-reverse;
+          align-items: center;
       }
-    
-      .small {
-        color: $text-lightDark;
+      &.sb-modal-fullscreen {
+          @include position(fixed, 0 0 0 0); //bourbon
+          width: 100%;
+          margin: 0 !important;
+          overflow-y: auto;
+          overflow-x: hidden;
+          .sb-modal-header {
+              align-items: center;
+              height: 4rem;
+              width: auto;
+              border-radius: 0px;
+              display: flex;
+              justify-content: space-between;
+          }
+          .sb-modal-content {
+              height: calc(100vh - 120px);
+          }
+          .close {
+            position: relative;
+          }
       }
-    
-      &.scroll {
-        margin: 0 !important;
+      .small {
+          color: $text-lightDark;
       }
-    
       &.small {
-        max-width: 300px;
+          max-width: 480px;
       }
-    
       &.normal {
-        max-width: 720px;
-        .content {
-          max-height: 380px;
-        }
+          max-width: 720px;
+          .content {
+              max-height: 380px;
+          }
       }
-    
       &.large {
-        max-width: 100%;
-        top: 0 !important;
-    
-        .content {
-          height: calc(100vh - 100px);
-        }
+          max-width: 900px;
+          .content {
+              height: calc(100vh - 100px);
+          }
+      }
+  } 
+  // sb modal confirmation/alert styles 
+  &.sb-warning .ui.modal{
+      .sb-modal-header {
+        background-color: $sb-modal-header-bg-warning;
       }
-    }
   }
-  .modals.dimmer .ui.scrolling.modal {
-    position: absolute!important;
-    margin: 0!important;
+  &.sb-success .ui.modal{
+      .sb-modal-header {
+        background-color: $sb-modal-header-bg-success;
+      }
   }
-  @include respond-below(sm) {
-    .sb-modal{
-    .ui.modal {
-      position: absolute;
-      width: 95%;
-      margin: 0 auto !important;
-      top:50%;
-      transform: translate(0%, -50%);
-      height:inherit;
-   }
-   .ui.modal .scrolling.content {
-    max-height: calc(100vh - 10rem);
-    overflow: auto;
-   }
-   .ui.page.dimmer {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-   }
+  &.sb-error .ui.modal{
+      .sb-modal-header {
+        background-color: $sb-modal-header-bg-error;
       }
-   }
\ No newline at end of file
+  }
+}
+[dir="rtl"] .sb-modal .ui.modal>.close {
+  right: auto;
+  left: 0;
+}
+@include respond-below(sm) {
+  .sb-modal {
+      .ui.modal {
+          position: absolute;
+          width: 95%;
+          margin: 0 auto !important;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: inherit;
+          &>.close {
+              top: 0 !important;
+              right: 0 !important;
+          }
+          &>.sb-modal-actions {
+              padding: $block-padding-y-x;
+          }
+      }
+      .ui.modal .scrolling.content {
+          max-height: calc(100vh - 10rem);
+          overflow: auto;
+      }
+      .ui.page.dimmer {
+          display: flex !important;
+          align-items: center;
+          justify-content: center;
+      }
+  }
+}
diff --git a/dist/sb-components.css b/dist/sb-components.css
index f2ddfda..09cfa18 100644
--- a/dist/sb-components.css
+++ b/dist/sb-components.css
@@ -1,13 +1,38 @@
-/* gray colors */
-* {
-  transition: all 300ms ease-in-out; }
-
-html, body {
+/*
+// primary colors shades 
+$primary-0:   lighten($primary-color,65%); // bg
+$primary-100: lighten($primary-color,15%); // default button bg
+$primary-200: lighten($primary-color,10%); // divider
+$primary-300: lighten($primary-color,5%);  // outline, focus fields
+$primary-400: $primary-color; // button bg, heading, table titles, links, toggles 
+$primary-600: darken($primary-color,15%);  // on press
+$primary-800: darken($primary-color,30%);  // hover
+*/
+/*
+// secondary colors shades
+$secondary-0:   lighten($secondary-color,50%);  // toast bg
+$secondary-100: lighten($secondary-color,15%);   // buttong bg, toast
+$secondary-200: lighten($secondary-color,10%);   // button hover
+$secondary-400: $secondary-color;               // icon
+*/
+/*
+// tertiary colors shades
+$tertiary-0:   lighten($tertiary-color,50%); // toast bg
+$tertiary-100: lighten($tertiary-color,15%); // buttong bg, toast
+$tertiary-400: $tertiary-color; // icon, label, notification bg
+*/
+/*
+// red colors shades
+$red-0:   lighten($red,50%); // toast bg
+$red-100: lighten($red,15%); // buttong bg, toast
+$red-400: $red; // icon color, lable, notification bg
+*/
+html,
+body {
   height: 100%;
-  font-size: 1rem; }
+  font-size: 14px; }
 
 body {
-  background: #ecf5ff;
   position: relative;
   font-family: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Oriya", "Noto Nastaliq Urdu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   letter-spacing: 0.2px;
@@ -22,9 +47,6 @@ body {
 *[lang="ur"] body {
   font-family: "Noto Sans", "Noto Nastaliq Urdu", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Oriya", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
 
-*[lang="ur"] {
-  font-size: 0.525rem; }
-
 button,
 input,
 textarea,
@@ -770,8 +792,8 @@ input[type=number]::-webkit-outer-spin-button {
 
 .ui.red.label,
 .ui.red.labels .label {
-  background: #ff4558 !important;
-  border-color: #ff4558 !important; }
+  background: #FF6979 !important;
+  border-color: #FF6979 !important; }
 
 .d-flex {
   display: flex !important; }
@@ -958,27 +980,27 @@ a {
 .o-y-scroll {
   overflow-y: scroll !important; }
 
+/* buttons sytle guide */
 input[type="submit"].btn-block,
 input[type="reset"].btn-block,
 input[type="button"].btn-block {
   width: 100%; }
 
-.d-flex-btns {
-  display: flex;
-  align-items: center;
-  justify-content: space-between; }
-
 .sb-btn {
   -webkit-tap-highlight-color: transparent;
-  -webkit-appearance: button;
   user-select: none;
   outline: 0;
   display: inline-block;
   margin-left: 0.25rem;
   border: 1px solid;
-  color: #fff;
   cursor: pointer;
-  margin: 0px 0px 0px 8px;
+  color: #fff;
+  margin: 0 0 0 8px !important;
+  min-width: 64px;
+  line-height: normal;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
   text-transform: capitalize;
   text-decoration: none; }
 
@@ -989,39 +1011,46 @@ input[type="button"].btn-block {
   .sb-btn-link:hover {
     font-weight: 700; }
 
-.sb-btn-small {
+.sb-btn-xs, .sb-btn-normal, .sb-btn-sm, .sb-btn-md {
+  padding: 8px 16px; }
+
+.sb-btn-xs {
   height: 24px;
-  padding: 4px 16px;
-  font-size: 0.625rem;
-  border-radius: 2px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px; }
+  padding: 0px 8px;
+  font-size: 11.9994px; }
 
 .sb-btn-normal {
   height: 32px;
-  padding: 8px 24px;
-  font-size: 0.75rem;
+  padding: 8px 16px;
+  font-size: 11.9994px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px; }
 
-.sb-btn-big {
+.sb-btn-sm {
   height: 40px;
-  padding: 8px 24px;
-  font-size: 1rem;
-  border-radius: 6px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px; }
+  font-size: 14px; }
+
+.sb-btn-md {
+  height: 48px;
+  font-size: 16.002px; }
+
+.sb-btn-lg {
+  height: 56px;
+  padding: 0px 24px;
+  font-size: 20.006px; }
 
 .sb-btn-disabled {
   background-color: #cccccc;
-  color: #979797;
-  border: 1px solid #cccccc; }
+  color: #999999;
+  border: 1px solid #cccccc;
+  cursor: not-allowed; }
 
 .sb-btn-outline-disabled {
   background-color: #fff;
   color: #cccccc;
-  border: 1px solid #cccccc; }
+  border: 1px solid #cccccc;
+  cursor: not-allowed; }
 
 .sb-btn-outline-primary {
   border-color: #024a93;
@@ -1034,14 +1063,14 @@ input[type="button"].btn-block {
     border-color: #013b75; }
 
 .sb-btn-outline-secondary {
-  border-color: #007e3b;
+  border-color: #07b27a;
   background-color: #fff;
-  color: #008840; }
+  color: #07BC81; }
   .sb-btn-outline-secondary:hover {
     font-weight: bold;
-    border-color: #007e3b; }
+    border-color: #07b27a; }
   .sb-btn-outline-secondary:active {
-    border-color: #005f2d; }
+    border-color: #069566; }
 
 .sb-btn-outline-tertiary {
   border-color: #e4531f;
@@ -1064,14 +1093,14 @@ input[type="button"].btn-block {
     border-color: #013b75; }
 
 .sb-btn-outline-success {
-  border-color: #007e3b;
+  border-color: #07b27a;
   background-color: #fff;
-  color: #008840; }
+  color: #07BC81; }
   .sb-btn-outline-success:hover {
     font-weight: bold;
-    border-color: #007e3b; }
+    border-color: #07b27a; }
   .sb-btn-outline-success:active {
-    border-color: #005f2d; }
+    border-color: #069566; }
 
 .sb-btn-outline-warning {
   border-color: #e4531f;
@@ -1103,37 +1132,45 @@ input[type="button"].btn-block {
   .sb-btn-outline-gray:active {
     border-color: #1f1f1f; }
 
-.sb-btn-primary {
+.sb-btn-primary, .sb-btn-info {
   border-color: #024f9d;
   background-color: #024f9d; }
-  .sb-btn-primary:hover {
+  .sb-btn-primary:hover, .sb-btn-info:hover {
     background-color: #02407f; }
-  .sb-btn-primary:active {
+  .sb-btn-primary:active, .sb-btn-info:active {
     background-color: #012951; }
-
-.sb-btn-secondary {
-  border-color: #008840;
-  background-color: #008840; }
-  .sb-btn-secondary:hover {
-    background-color: #006932; }
-  .sb-btn-secondary:active {
-    background-color: #003c1c; }
-
-.sb-btn-tertiary {
+  .sb-btn-primary:hover, .sb-btn-primary:active, .sb-btn-info:hover, .sb-btn-info:active {
+    background: #002E50; }
+
+.sb-btn-secondary, .sb-btn-success {
+  border-color: #07BC81;
+  background-color: #07BC81; }
+  .sb-btn-secondary:hover, .sb-btn-success:hover {
+    background-color: #069e6d; }
+  .sb-btn-secondary:active, .sb-btn-success:active {
+    background-color: #04724e; }
+  .sb-btn-secondary:hover, .sb-btn-secondary:active, .sb-btn-success:hover, .sb-btn-success:active {
+    background: #008840; }
+
+.sb-btn-tertiary, .sb-btn-warning {
   border-color: #e55a28;
   background-color: #e55a28; }
-  .sb-btn-tertiary:hover {
+  .sb-btn-tertiary:hover, .sb-btn-warning:hover {
     background-color: #d54b1a; }
-  .sb-btn-tertiary:active {
+  .sb-btn-tertiary:active, .sb-btn-warning:active {
     background-color: #ac3d15; }
+  .sb-btn-tertiary:hover, .sb-btn-tertiary:active, .sb-btn-warning:hover, .sb-btn-warning:active {
+    background: #e55a28; }
 
 .sb-btn-success {
-  border-color: #008840;
-  background-color: #008840; }
+  border-color: #07BC81;
+  background-color: #07BC81; }
   .sb-btn-success:hover {
-    background-color: #006932; }
+    background-color: #069e6d; }
   .sb-btn-success:active {
-    background-color: #003c1c; }
+    background-color: #04724e; }
+  .sb-btn-success:hover, .sb-btn-success:active {
+    background: #008840; }
 
 .sb-btn-info {
   border-color: #024f9d;
@@ -1142,77 +1179,202 @@ input[type="button"].btn-block {
     background-color: #02407f; }
   .sb-btn-info:active {
     background-color: #012951; }
+  .sb-btn-info:hover, .sb-btn-info:active {
+    background: #002E50; }
 
 .sb-btn-warning {
-  border-color: #e55a28;
-  background-color: #e55a28; }
+  border-color: #FFA11D;
+  background-color: #FFA11D; }
   .sb-btn-warning:hover {
-    background-color: #d54b1a; }
+    background-color: #fd9400; }
   .sb-btn-warning:active {
-    background-color: #ac3d15; }
+    background-color: #d07900; }
+  .sb-btn-warning:hover, .sb-btn-warning:active {
+    background: #e55a28; }
 
 .sb-btn-error {
-  border-color: #ff4558;
-  background-color: #ff4558; }
+  border-color: #FF6979;
+  background-color: #FF6979; }
   .sb-btn-error:hover {
-    background-color: #ff263d; }
+    background-color: #ff4a5e; }
   .sb-btn-error:active {
-    background-color: #f80019; }
+    background-color: #ff1d35; }
+  .sb-btn-error:hover, .sb-btn-error:active {
+    background: #ff4558; }
+
+.ui.dodger-blue.basic.label {
+  border: 1px solid #024f9d !important;
+  border-radius: 4px;
+  color: #024f9d;
+  font-size: 1rem;
+  font-weight: 300;
+  padding: 4px 16px; }
+
+.ui.semi-circular.dodger-blue.basic.label {
+  border: 1px solid #024f9d !important;
+  border-radius: 18.5px;
+  color: #024f9d;
+  font-size: 1.16rem;
+  padding: 10px 27px; }
+
+.ui.semi-circular.dodger-blue.button {
+  border: 1px solid #024f9d;
+  border-radius: 18.5px;
+  background: #024f9d;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 100;
+  padding: 6px 27px; }
+
+.circular-placeholder {
+  border: 6px solid #fff;
+  background-color: #fff;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.38);
+  border-radius: 100%;
+  height: 92px;
+  width: 92px; }
+
+.ui.button.rounded {
+  border-radius: 20px; }
+
+.ui.explore.blue.button {
+  background-color: #024f9d;
+  padding: 10px 30px; }
+
+.ui.explore.blue.button:hover {
+  opacity: 0.8; }
+
+.ui.explore.blue.button:active {
+  opacity: 0.9; }
+
+.ui.basic.explore.blue.button {
+  background-color: #fff;
+  border: 0.5px solid #024f9d;
+  box-shadow: none;
+  color: #024f9d;
+  font-weight: 700;
+  height: 36px;
+  padding: 10px 30px; }
+
+.ui.basic.explore.blue.button:hover {
+  opacity: 0.8; }
+
+.ui.basic.explore.blue.button:active {
+  opacity: 0.9; }
+
+.ui.blue.button,
+.ui.blue.buttons .button {
+  background-color: #024f9d !important;
+  color: #fff !important; }
+
+.ui.primary.button,
+.ui.primary.buttons .button {
+  background-color: #024f9d !important;
+  color: #fff !important; }
+
+.ui.basic.primary.button,
+.ui.basic.primary.buttons .button {
+  color: #024f9d !important;
+  background: transparent !important; }
 
+.ui.basic.blue.button,
+.ui.basic.blue.buttons .button {
+  color: #024f9d !important;
+  background: transparent !important; }
+
+.ui.red.label,
+.ui.red.labels .label {
+  background: #FF6979 !important;
+  border-color: #FF6979 !important; }
+
+/* modal styles */
 .sb-modal .ui.modal {
-  margin: 0 auto;
-  left: 0px;
-  right: 0px;
+  margin: 3.5rem auto 0 !important;
+  top: 0;
+  right: 0;
+  left: 0;
   height: auto;
   width: 100%; }
-  .sb-modal .ui.modal > .sb-modal-header {
+  .sb-modal .ui.modal .sb-modal-header {
     background-color: #024f9d;
     color: #fff;
     font-weight: 700;
-    font-size: 1rem;
-    padding: 8px 24px;
-    border-bottom: 0px solid #cccccc;
-    height: 2.5rem;
-    width: auto; }
-  .sb-modal .ui.modal > .sb-modal-content {
+    font-size: 16.002px;
+    padding: 8px 16px;
+    border-bottom: 0 solid #cccccc;
+    min-height: 40px;
+    line-height: 24.002px; }
+  .sb-modal .ui.modal .sb-modal-content {
     min-height: 100px;
-    padding: 24px; }
-  .sb-modal .ui.modal > .close {
+    padding: 16px; }
+  .sb-modal .ui.modal .close {
     color: #fff;
-    top: 0px;
-    right: 0px;
-    font-size: 1rem;
-    padding: 0;
-    margin: 0;
+    font-size: 14px;
+    padding: 0 !important;
+    margin: 0 !important;
     height: 40px;
     width: 40px;
     display: flex;
     align-items: center;
-    justify-content: center; }
-  .sb-modal .ui.modal > .sb-modal-actions {
-    padding: 8px 24px;
+    justify-content: center;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0; }
+  .sb-modal .ui.modal .sb-modal-actions {
+    padding: 8px 16px;
     background: #fff;
     border-top: 1px solid #cccccc;
-    min-height: 56px; }
+    min-height: 56px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center; }
+  .sb-modal .ui.modal.sb-modal-fullscreen {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0 !important;
+    overflow-y: auto;
+    overflow-x: hidden; }
+    .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-header {
+      align-items: center;
+      height: 4rem;
+      width: auto;
+      border-radius: 0px;
+      display: flex;
+      justify-content: space-between; }
+    .sb-modal .ui.modal.sb-modal-fullscreen .sb-modal-content {
+      height: calc(100vh - 120px); }
+    .sb-modal .ui.modal.sb-modal-fullscreen .close {
+      position: relative; }
   .sb-modal .ui.modal .small {
     color: #666; }
-  .sb-modal .ui.modal.scroll {
-    margin: 0 !important; }
   .sb-modal .ui.modal.small {
-    max-width: 300px; }
+    max-width: 480px; }
   .sb-modal .ui.modal.normal {
     max-width: 720px; }
     .sb-modal .ui.modal.normal .content {
       max-height: 380px; }
   .sb-modal .ui.modal.large {
-    max-width: 100%;
-    top: 0 !important; }
+    max-width: 900px; }
     .sb-modal .ui.modal.large .content {
       height: calc(100vh - 100px); }
 
-.modals.dimmer .ui.scrolling.modal {
-  position: absolute !important;
-  margin: 0 !important; }
+.sb-modal.sb-warning .ui.modal .sb-modal-header {
+  background-color: #e55a28; }
+
+.sb-modal.sb-success .ui.modal .sb-modal-header {
+  background-color: #07BC81; }
+
+.sb-modal.sb-error .ui.modal .sb-modal-header {
+  background-color: #ff4558; }
+
+[dir="rtl"] .sb-modal .ui.modal > .close {
+  right: auto;
+  left: 0; }
 
 @media (max-width: 767px) {
   .sb-modal .ui.modal {
@@ -1220,8 +1382,13 @@ input[type="button"].btn-block {
     width: 95%;
     margin: 0 auto !important;
     top: 50%;
-    transform: translate(0%, -50%);
+    transform: translate(0, -50%);
     height: inherit; }
+    .sb-modal .ui.modal > .close {
+      top: 0 !important;
+      right: 0 !important; }
+    .sb-modal .ui.modal > .sb-modal-actions {
+      padding: 8px 16px; }
   .sb-modal .ui.modal .scrolling.content {
     max-height: calc(100vh - 10rem);
     overflow: auto; }
diff --git a/global.scss b/global.scss
index fd29bc8..b03c23c 100644
--- a/global.scss
+++ b/global.scss
@@ -1,35 +1,28 @@
 // global styles
-
-*{
-  transition: all 300ms ease-in-out
-  }
-html, body {
-  height:100%;
+// *{
+//   transition: all 300ms ease-in-out
+//   }
+html,
+body {
+  height: 100%;
   font-size:$font-size-base;
 }
-  body {
-      background:$bg-body;
-      position: relative;
-font-family: $font-stack-en;
-letter-spacing: 0.2px;
-height: auto;
-  }
-
+body {
+  // background:$bg-body;
+  position: relative;
+  font-family: $font-stack-en;
+  letter-spacing: 0.2px;
+  height: auto;
+}
 *[lang="en"] body {
   font-family: $font-stack-en;
 }
-
 *[lang="hi"] body {
   font-family: $font-stack-hi;
 }
-
 *[lang="ur"] body {
   font-family: $font-stack-ur;
 }
-*[lang="ur"] {
-  font-size: ($font-size-base * .525);
-}
-
 button,
 input,
 textarea,
@@ -78,34 +71,28 @@ h5,
 .ui.form input[type=url],
 .ui.menu,
 .ui.dropdown,
-.ui.category.search> .results .category> .name {
+.ui.category.search>.results .category>.name {
   font-family: inherit;
 }
-
 .ui.tiny.header .icon {
   line-height: 1;
   font-size: 0.75em;
 }
-
 .ui.pagination.menu {
   flex-wrap: wrap;
 }
-
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
-
 .ui.dimmer {
   background-color: rgba(0, 0, 0, 0.35);
 }
-
 .ui.modal>.close {
   opacity: 1;
 }
-
 .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 1);
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index b504415..e62fb09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sunbird-ui-components",
-  "version": "1.0.0",
+  "version": "1.0.7",
   "description": "Repository of common Sunbird UI components which are used across all Sunbird apps",
   "main": "gulpfile.js",
   "dependencies": {},
diff --git a/sb-components.scss b/sb-components.scss
index adf1ad5..dd2c2f2 100644
--- a/sb-components.scss
+++ b/sb-components.scss
@@ -2,8 +2,8 @@
 @import "./global";
 
 // base structure
-@import "./reusables/reusables";
 @import "./mixins/mixins";
+@import "./reusables/reusables";
 @import "./base/base";
 @import "./component/component";
 @import "./helpers/helpers";