diff --git a/src/app/@theme/styles/cosmic/_buttons.scss b/src/app/@theme/styles/cosmic/_buttons.scss
index 370eb97b..286fd1f8 100644
--- a/src/app/@theme/styles/cosmic/_buttons.scss
+++ b/src/app/@theme/styles/cosmic/_buttons.scss
@@ -1,113 +1,253 @@
 @mixin ngx-buttons-theme($theme-name) {
+  .hero-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-  $btn-component-size: 50px;
-  $btn-component-bd-radius: 12px;
+    @mixin btn-component($bevel-bd, $glow, $shadow) {
+      .bevel-border {
+        box-shadow: 0 3px 0 0 $bevel-bd;
+      }
 
-  @mixin btn-component($bevel-bd, $glow) {
-    .btn-bevel-border {
-      box-shadow: 0 3px 0 0 $bevel-bd;
+      .shadow {
+        box-shadow: 0 4px 10px 0 $shadow;
+      }
+
+      .glow {
+        box-shadow: 0 2px 12px 0 $glow;
+      }
     }
 
-    .btn-shadow {
-      box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-glow {
-      box-shadow: 0 2px 12px 0 $glow;
+      .container-title {
+        margin-bottom: 14px;
+      }
+
+      .container-btn {
+        margin-bottom: 24px;
+      }
+
+      .states-container {
+        .state-container {
+          display: flex;
+
+          .gradient,
+          .border,
+          .bevel-border,
+          .shadow,
+          .glow {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
+        }
+
+        &.primary-container {
+          .gradient {
+            @include primary-gradient();
+          }
+
+          @include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
+        }
+
+        &.warning-container {
+          .gradient {
+            @include warning-gradient();
+          }
+
+          @include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
+        }
+
+        &.success-container {
+          .gradient {
+            @include success-gradient();
+          }
+
+          @include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
+        }
+
+        &.info-container {
+          .gradient {
+            @include info-gradient();
+          }
+
+          @include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
+        }
+
+        &.danger-container {
+          .gradient {
+            @include danger-gradient();
+          }
+
+          @include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
+        }
+
+        &.default-container {
+          .border {
+            color: $btn-default-color;
+            border: $btn-default-border-width solid $btn-default-border;
+          }
+
+          @include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
+        }
+      }
     }
   }
 
-  .btn-hero-container {
-    padding-right: 0;
+  .default-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-    .container-title {
-      margin-bottom: 14px;
+    @mixin btn-bg($background) {
+      background-color: $background;
     }
 
-    .container-btn {
-      margin-bottom: 24px;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-components-container {
-      .btn-component {
-        display: flex;
+      .container-title {
+        margin-bottom: 14px;
+      }
 
-        .btn-gradient,
-        .btn-border,
-        .btn-bevel-border,
-        .btn-shadow,
-        .btn-glow {
-          width: $btn-component-size;
-          height: $btn-component-size;
-          border-radius: $btn-component-bd-radius;
-          margin-bottom: 16px;
-        }
+      .container-btn {
+        margin-bottom: 24px;
+      }
 
-        .btn-component-details {
+      .states-container {
+        .state-container {
           display: flex;
-          flex-direction: column;
-          justify-content: center;
-          margin-left: 17px;
-          height: $btn-component-size;
+
+          .original,
+          .hover,
+          .active {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
         }
 
-        .btn-component-header {
-          color: white;
+        &.primary-container {
+          .original {
+            @include btn-bg($btn-primary-bg);
+          }
+
+          .hover {
+            @include btn-bg($btn-primary-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-primary-bg-active);
+          }
         }
 
-        .btn-component-subheader {
-          font-size: 0.875rem;
-          line-height: 1rem;
-        }
-      }
+        &.warning-container {
+          .original {
+            @include btn-bg($btn-warning-bg);
+          }
 
-      &.primary-container {
-        .btn-gradient {
-          @include primary-gradient();
+          .hover {
+            @include btn-bg($btn-warning-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-warning-bg-active);
+          }
         }
 
-        @include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
-      }
+        &.success-container {
+          .original {
+            @include btn-bg($btn-success-bg);
+          }
 
-      &.warning-container {
-        .btn-gradient {
-          @include warning-gradient();
+          .hover {
+            @include btn-bg($btn-success-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-success-bg-active);
+          }
         }
 
-        @include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
-      }
+        &.info-container {
+          .original {
+            @include btn-bg($btn-info-bg);
+          }
 
-      &.success-container {
-        .btn-gradient {
-          @include success-gradient();
+          .hover {
+            @include btn-bg($btn-info-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-info-bg-active);
+          }
         }
 
-        @include btn-component($btn-success-bevel-bd, $btn-success-glow);
-      }
+        &.danger-container {
+          .original {
+            @include btn-bg($btn-danger-bg);
+          }
 
-      &.info-container {
-        .btn-gradient {
-          @include info-gradient();
+          .hover {
+            @include btn-bg($btn-danger-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-danger-bg-active);
+          }
         }
 
-        @include btn-component($btn-info-bevel-bd, $btn-info-glow);
-      }
+        &.default-container {
+          .original {
+            @include btn-bg($btn-default-border);
+          }
 
-      &.danger-container {
-        .btn-gradient {
-          @include danger-gradient();
+          .hover {
+            @include btn-bg($btn-default-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-default-bg-active);
+          }
         }
-
-        @include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
-      }
-
-      &.default-container {
-        .btn-border {
-          color: $btn-default-color;
-          border: $btn-default-border-width solid $btn-default-border;
-        }
-
-        @include btn-component($btn-default-bevel-bd, $btn-default-glow);
       }
     }
   }
diff --git a/src/app/@theme/styles/default/_buttons.scss b/src/app/@theme/styles/default/_buttons.scss
index 370eb97b..286fd1f8 100644
--- a/src/app/@theme/styles/default/_buttons.scss
+++ b/src/app/@theme/styles/default/_buttons.scss
@@ -1,113 +1,253 @@
 @mixin ngx-buttons-theme($theme-name) {
+  .hero-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-  $btn-component-size: 50px;
-  $btn-component-bd-radius: 12px;
+    @mixin btn-component($bevel-bd, $glow, $shadow) {
+      .bevel-border {
+        box-shadow: 0 3px 0 0 $bevel-bd;
+      }
 
-  @mixin btn-component($bevel-bd, $glow) {
-    .btn-bevel-border {
-      box-shadow: 0 3px 0 0 $bevel-bd;
+      .shadow {
+        box-shadow: 0 4px 10px 0 $shadow;
+      }
+
+      .glow {
+        box-shadow: 0 2px 12px 0 $glow;
+      }
     }
 
-    .btn-shadow {
-      box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-glow {
-      box-shadow: 0 2px 12px 0 $glow;
+      .container-title {
+        margin-bottom: 14px;
+      }
+
+      .container-btn {
+        margin-bottom: 24px;
+      }
+
+      .states-container {
+        .state-container {
+          display: flex;
+
+          .gradient,
+          .border,
+          .bevel-border,
+          .shadow,
+          .glow {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
+        }
+
+        &.primary-container {
+          .gradient {
+            @include primary-gradient();
+          }
+
+          @include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
+        }
+
+        &.warning-container {
+          .gradient {
+            @include warning-gradient();
+          }
+
+          @include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
+        }
+
+        &.success-container {
+          .gradient {
+            @include success-gradient();
+          }
+
+          @include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
+        }
+
+        &.info-container {
+          .gradient {
+            @include info-gradient();
+          }
+
+          @include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
+        }
+
+        &.danger-container {
+          .gradient {
+            @include danger-gradient();
+          }
+
+          @include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
+        }
+
+        &.default-container {
+          .border {
+            color: $btn-default-color;
+            border: $btn-default-border-width solid $btn-default-border;
+          }
+
+          @include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
+        }
+      }
     }
   }
 
-  .btn-hero-container {
-    padding-right: 0;
+  .default-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-    .container-title {
-      margin-bottom: 14px;
+    @mixin btn-bg($background) {
+      background-color: $background;
     }
 
-    .container-btn {
-      margin-bottom: 24px;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-components-container {
-      .btn-component {
-        display: flex;
+      .container-title {
+        margin-bottom: 14px;
+      }
 
-        .btn-gradient,
-        .btn-border,
-        .btn-bevel-border,
-        .btn-shadow,
-        .btn-glow {
-          width: $btn-component-size;
-          height: $btn-component-size;
-          border-radius: $btn-component-bd-radius;
-          margin-bottom: 16px;
-        }
+      .container-btn {
+        margin-bottom: 24px;
+      }
 
-        .btn-component-details {
+      .states-container {
+        .state-container {
           display: flex;
-          flex-direction: column;
-          justify-content: center;
-          margin-left: 17px;
-          height: $btn-component-size;
+
+          .original,
+          .hover,
+          .active {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
         }
 
-        .btn-component-header {
-          color: white;
+        &.primary-container {
+          .original {
+            @include btn-bg($btn-primary-bg);
+          }
+
+          .hover {
+            @include btn-bg($btn-primary-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-primary-bg-active);
+          }
         }
 
-        .btn-component-subheader {
-          font-size: 0.875rem;
-          line-height: 1rem;
-        }
-      }
+        &.warning-container {
+          .original {
+            @include btn-bg($btn-warning-bg);
+          }
 
-      &.primary-container {
-        .btn-gradient {
-          @include primary-gradient();
+          .hover {
+            @include btn-bg($btn-warning-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-warning-bg-active);
+          }
         }
 
-        @include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
-      }
+        &.success-container {
+          .original {
+            @include btn-bg($btn-success-bg);
+          }
 
-      &.warning-container {
-        .btn-gradient {
-          @include warning-gradient();
+          .hover {
+            @include btn-bg($btn-success-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-success-bg-active);
+          }
         }
 
-        @include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
-      }
+        &.info-container {
+          .original {
+            @include btn-bg($btn-info-bg);
+          }
 
-      &.success-container {
-        .btn-gradient {
-          @include success-gradient();
+          .hover {
+            @include btn-bg($btn-info-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-info-bg-active);
+          }
         }
 
-        @include btn-component($btn-success-bevel-bd, $btn-success-glow);
-      }
+        &.danger-container {
+          .original {
+            @include btn-bg($btn-danger-bg);
+          }
 
-      &.info-container {
-        .btn-gradient {
-          @include info-gradient();
+          .hover {
+            @include btn-bg($btn-danger-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-danger-bg-active);
+          }
         }
 
-        @include btn-component($btn-info-bevel-bd, $btn-info-glow);
-      }
+        &.default-container {
+          .original {
+            @include btn-bg($btn-default-border);
+          }
 
-      &.danger-container {
-        .btn-gradient {
-          @include danger-gradient();
+          .hover {
+            @include btn-bg($btn-default-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-default-bg-active);
+          }
         }
-
-        @include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
-      }
-
-      &.default-container {
-        .btn-border {
-          color: $btn-default-color;
-          border: $btn-default-border-width solid $btn-default-border;
-        }
-
-        @include btn-component($btn-default-bevel-bd, $btn-default-glow);
       }
     }
   }
diff --git a/src/app/@theme/styles/light/_buttons.scss b/src/app/@theme/styles/light/_buttons.scss
index 370eb97b..286fd1f8 100644
--- a/src/app/@theme/styles/light/_buttons.scss
+++ b/src/app/@theme/styles/light/_buttons.scss
@@ -1,113 +1,253 @@
 @mixin ngx-buttons-theme($theme-name) {
+  .hero-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-  $btn-component-size: 50px;
-  $btn-component-bd-radius: 12px;
+    @mixin btn-component($bevel-bd, $glow, $shadow) {
+      .bevel-border {
+        box-shadow: 0 3px 0 0 $bevel-bd;
+      }
 
-  @mixin btn-component($bevel-bd, $glow) {
-    .btn-bevel-border {
-      box-shadow: 0 3px 0 0 $bevel-bd;
+      .shadow {
+        box-shadow: 0 4px 10px 0 $shadow;
+      }
+
+      .glow {
+        box-shadow: 0 2px 12px 0 $glow;
+      }
     }
 
-    .btn-shadow {
-      box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-glow {
-      box-shadow: 0 2px 12px 0 $glow;
+      .container-title {
+        margin-bottom: 14px;
+      }
+
+      .container-btn {
+        margin-bottom: 24px;
+      }
+
+      .states-container {
+        .state-container {
+          display: flex;
+
+          .gradient,
+          .border,
+          .bevel-border,
+          .shadow,
+          .glow {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
+        }
+
+        &.primary-container {
+          .gradient {
+            @include primary-gradient();
+          }
+
+          @include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
+        }
+
+        &.warning-container {
+          .gradient {
+            @include warning-gradient();
+          }
+
+          @include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
+        }
+
+        &.success-container {
+          .gradient {
+            @include success-gradient();
+          }
+
+          @include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
+        }
+
+        &.info-container {
+          .gradient {
+            @include info-gradient();
+          }
+
+          @include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
+        }
+
+        &.danger-container {
+          .gradient {
+            @include danger-gradient();
+          }
+
+          @include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
+        }
+
+        &.default-container {
+          .border {
+            color: $btn-default-color;
+            border: $btn-default-border-width solid $btn-default-border;
+          }
+
+          @include btn-component($btn-default-bevel-bd, $btn-default-glow, $btn-default-shadow);
+        }
+      }
     }
   }
 
-  .btn-hero-container {
-    padding-right: 0;
+  .default-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
 
-    .container-title {
-      margin-bottom: 14px;
+    @mixin btn-bg($background) {
+      background-color: $background;
     }
 
-    .container-btn {
-      margin-bottom: 24px;
-    }
+    .button-container {
+      padding-right: 0;
 
-    .btn-components-container {
-      .btn-component {
-        display: flex;
+      .container-title {
+        margin-bottom: 14px;
+      }
 
-        .btn-gradient,
-        .btn-border,
-        .btn-bevel-border,
-        .btn-shadow,
-        .btn-glow {
-          width: $btn-component-size;
-          height: $btn-component-size;
-          border-radius: $btn-component-bd-radius;
-          margin-bottom: 16px;
-        }
+      .container-btn {
+        margin-bottom: 24px;
+      }
 
-        .btn-component-details {
+      .states-container {
+        .state-container {
           display: flex;
-          flex-direction: column;
-          justify-content: center;
-          margin-left: 17px;
-          height: $btn-component-size;
+
+          .original,
+          .hover,
+          .active {
+            width: $btn-component-size;
+            height: $btn-component-size;
+            border-radius: $btn-component-bd-radius;
+            margin-bottom: 16px;
+          }
+
+          .state-details {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-left: 17px;
+            height: $btn-component-size;
+
+            .header {
+              color: white;
+            }
+
+            .subheader {
+              font-size: 0.875rem;
+              line-height: 1rem;
+              font-weight: 300;
+            }
+          }
         }
 
-        .btn-component-header {
-          color: white;
+        &.primary-container {
+          .original {
+            @include btn-bg($btn-primary-bg);
+          }
+
+          .hover {
+            @include btn-bg($btn-primary-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-primary-bg-active);
+          }
         }
 
-        .btn-component-subheader {
-          font-size: 0.875rem;
-          line-height: 1rem;
-        }
-      }
+        &.warning-container {
+          .original {
+            @include btn-bg($btn-warning-bg);
+          }
 
-      &.primary-container {
-        .btn-gradient {
-          @include primary-gradient();
+          .hover {
+            @include btn-bg($btn-warning-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-warning-bg-active);
+          }
         }
 
-        @include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
-      }
+        &.success-container {
+          .original {
+            @include btn-bg($btn-success-bg);
+          }
 
-      &.warning-container {
-        .btn-gradient {
-          @include warning-gradient();
+          .hover {
+            @include btn-bg($btn-success-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-success-bg-active);
+          }
         }
 
-        @include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
-      }
+        &.info-container {
+          .original {
+            @include btn-bg($btn-info-bg);
+          }
 
-      &.success-container {
-        .btn-gradient {
-          @include success-gradient();
+          .hover {
+            @include btn-bg($btn-info-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-info-bg-active);
+          }
         }
 
-        @include btn-component($btn-success-bevel-bd, $btn-success-glow);
-      }
+        &.danger-container {
+          .original {
+            @include btn-bg($btn-danger-bg);
+          }
 
-      &.info-container {
-        .btn-gradient {
-          @include info-gradient();
+          .hover {
+            @include btn-bg($btn-danger-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-danger-bg-active);
+          }
         }
 
-        @include btn-component($btn-info-bevel-bd, $btn-info-glow);
-      }
+        &.default-container {
+          .original {
+            @include btn-bg($btn-default-border);
+          }
 
-      &.danger-container {
-        .btn-gradient {
-          @include danger-gradient();
+          .hover {
+            @include btn-bg($btn-default-bg-hover-focus);
+          }
+
+          .active {
+            @include btn-bg($btn-default-bg-active);
+          }
         }
-
-        @include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
-      }
-
-      &.default-container {
-        .btn-border {
-          color: $btn-default-color;
-          border: $btn-default-border-width solid $btn-default-border;
-        }
-
-        @include btn-component($btn-default-bevel-bd, $btn-default-glow);
       }
     }
   }
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
index c2062ea8..c9b1081b 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
@@ -1,222 +1,186 @@
-<div class="row">
-  <div class="btn-default-container col-md-4">
-    <div class="btn-container-title">
+<div class="row default-buttons">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Primary Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-primary btn-demo">Primary</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-primary btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>#7659ff</span>
+    <div class="states-container primary-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-primary btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-primary btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-default-container col-md-4">
-    <div class="btn-container-title">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Warning Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-warning btn-demo">Warning</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-warning btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>#ffcb17</span>
+    <div class="states-container warning-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-warning btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-warning btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-default-container col-md-4">
-    <div class="btn-container-title">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Success Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-success btn-demo">Success</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-success btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>#00d977</span>
+    <div class="states-container success-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-success btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-success btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-default-container col-md-4 col-sm-6 col-6">
-    <div class="btn-container-title">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Info Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-info btn-demo">Info</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-info btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>#0088ff</span>
+    <div class="states-container info-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-info btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-info btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-default-container col-md-4 col-sm-6 col-6">
-    <div class="btn-container-title">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Danger Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-danger btn-demo">Danger</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-danger btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>#ff386a</span>
+    <div class="states-container danger-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-danger btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-danger btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-default-container col-md-4 col-sm-6 col-6">
-    <div class="btn-container-title">
+  <div class="button-container col-md-4">
+    <div class="container-title">
       <span>Default Button</span>
     </div>
-    <div>
+    <div class="container-btn">
       <button class="btn btn-demo">Default</button>
     </div>
-    <div class="btn-details-container">
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-empty"></button>
-        </div>
-        <div>
-          <span>Default</span>
-          <span>transparent</span>
+    <div class="states-container default-container">
+      <div class="state-container">
+        <div class="original"></div>
+        <div class="state-details">
+          <span class="header">Default</span>
+          <span class="subheader">#7659ff</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-empty hover"></button>
-        </div>
-        <div>
-          <span>Hover</span>
-          <span>20% white</span>
+      <div class="state-container">
+        <div class="hover"></div>
+        <div class="state-details">
+          <span class="header">Hover</span>
+          <span class="subheader">20% white</span>
         </div>
       </div>
-      <div class="btn-details-item">
-        <div>
-          <button class="btn btn-empty active"></button>
-        </div>
-        <div>
-          <span>Active</span>
-          <span>20% black</span>
+      <div class="state-container">
+        <div class="active"></div>
+        <div class="state-details">
+          <span class="header">Active</span>
+          <span class="subheader">20% black</span>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
deleted file mode 100644
index a66ad542..00000000
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$btn-empty-size: 50px;
-
-.btn-empty {
-  height: $btn-empty-size !important;
-  width: $btn-empty-size !important;
-  padding: 1rem !important;
-}
-
-.btn-default-container {
-  .btn-container-title {
-    margin-bottom: 14px;
-  }
-
-  .btn-details-container {
-    margin-top: 24px;
-
-    .btn-details-item {
-      display: flex;
-      margin-bottom: 8px;
-
-      div:nth-child(2) {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 17px;
-
-        span:nth-child(1) {
-          color: #ffffff;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
index ccb1a047..d6eee6f2 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-default-buttons',
-  styleUrls: ['./default-buttons.component.scss'],
   templateUrl: './default-buttons.component.html',
 })
 export class DefaultButtonsComponent {
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
index fe469580..3de6d324 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
@@ -1,246 +1,246 @@
-<div class="row">
-  <div class="btn-hero-container col-md-2">
+<div class="row hero-buttons">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Primary Button</span>
     </div>
     <div class="container-btn">
-      <button class="btn btn-primary btn-primary-hero btn-demo">Primary</button>
+      <button class="btn btn-primary btn-hero btn-demo">Primary</button>
     </div>
-    <div class="btn-components-container primary-container">
-      <div class="btn-component">
-        <div class="btn-gradient"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Linear Gradient</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container primary-container">
+      <div class="state-container">
+        <div class="gradient"></div>
+        <div class="state-details">
+          <span class="header">Linear Gradient</span>
+          <span class="subheader">to right, #7659ff, #ac63ff</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 3px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 3px 0 0</span>
+          <span class="subheader">#6938c9</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (6, 7, 64, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (137, 66, 254, 0.8)</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-hero-container col-md-2">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Warning Button</span>
     </div>
     <div class="container-btn">
-      <button class="btn btn-warning btn-warning-hero btn-demo">Warning</button>
+      <button class="btn btn-warning btn-hero btn-demo">Warning</button>
     </div>
-    <div class="btn-components-container warning-container">
-      <div class="btn-component">
-        <div class="btn-gradient"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Linear Gradient</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container warning-container">
+      <div class="state-container">
+        <div class="gradient"></div>
+        <div class="state-details">
+          <span class="header">Linear Gradient</span>
+          <span class="subheader">to right, #ffcb17, #ff874c</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 3px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 3px 0 0</span>
+          <span class="subheader">#ce7b22</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (255, 193, 38, 0.6)</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-hero-container col-md-2">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Success Button</span>
     </div>
     <div class="container-btn">
-      <button class="btn btn-success btn-success-hero btn-demo">Success</button>
+      <button class="btn btn-success btn-hero btn-demo">Success</button>
     </div>
-    <div class="btn-components-container success-container">
-      <div class="btn-component">
-        <div class="btn-gradient"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Linear Gradient</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container success-container">
+      <div class="state-container">
+        <div class="gradient"></div>
+        <div class="state-details">
+          <span class="header">Linear Gradient</span>
+          <span class="subheader">to right, #00c7c7, #00d977</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 3px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 3px 0 0</span>
+          <span class="subheader">#00967d</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (35, 255, 181, 0.6)</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-hero-container col-md-2">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Info Button</span>
     </div>
     <div class="container-btn">
-      <button class="btn btn-info btn-info-hero btn-demo">Info</button>
+      <button class="btn btn-info btn-hero btn-demo">Info</button>
     </div>
-    <div class="btn-components-container info-container">
-      <div class="btn-component">
-        <div class="btn-gradient"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Linear Gradient</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container info-container">
+      <div class="state-container">
+        <div class="gradient"></div>
+        <div class="state-details">
+          <span class="header">Linear Gradient</span>
+          <span class="subheader">to right, #3dafff, #0088ff</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 3px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 3px 0 0</span>
+          <span class="subheader">#4150d9</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (0, 136, 255, 0.7)</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-hero-container col-md-2">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Danger Button</span>
     </div>
     <div class="container-btn">
-      <button class="btn btn-danger btn-danger-hero btn-demo">Danger</button>
+      <button class="btn btn-danger btn-hero btn-demo">Danger</button>
     </div>
-    <div class="btn-components-container danger-container">
-      <div class="btn-component">
-        <div class="btn-gradient"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Linear Gradient</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container danger-container">
+      <div class="state-container">
+        <div class="gradient"></div>
+        <div class="state-details">
+          <span class="header">Linear Gradient</span>
+          <span class="subheader">to right, #ff3dae, #ff386a</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 3px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 3px 0 0</span>
+          <span class="subheader">#cc2568</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (255, 73, 184, 0.8)</span>
         </div>
       </div>
     </div>
   </div>
-  <div class="btn-hero-container col-md-2">
+  <div class="button-container col-md-2">
     <div class="container-title">
       <span>Ghost Button</span>
     </div>
     <div class="container-btn">
       <button class="btn btn-hero btn-demo">Ghost</button>
     </div>
-    <div class="btn-components-container default-container">
-      <div class="btn-component">
-        <div class="btn-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Border</span>
-          <span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
+    <div class="states-container default-container">
+      <div class="state-container">
+        <div class="border"></div>
+        <div class="state-details">
+          <span class="header">Border</span>
+          <span class="subheader">White</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-bevel-border"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Bevel Border</span>
-          <span class="btn-component-subheader">0 2px 0 0</span>
-          <span class="btn-component-subheader">#6938c9</span>
+      <div class="state-container">
+        <div class="bevel-border"></div>
+        <div class="state-details">
+          <span class="header">Bevel Border</span>
+          <span class="subheader">0 2px 0 0</span>
+          <span class="subheader">#665ebd</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-shadow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Shadow</span>
-          <span class="btn-component-subheader">0 4px 10px 0</span>
-          <span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
+      <div class="state-container">
+        <div class="shadow"></div>
+        <div class="state-details">
+          <span class="header">Shadow</span>
+          <span class="subheader">0 4px 10px 0</span>
+          <span class="subheader">rgba (33, 7, 77, 0.5)</span>
         </div>
       </div>
-      <div class="btn-component">
-        <div class="btn-glow"></div>
-        <div class="btn-component-details">
-          <span class="btn-component-header">Glow</span>
-          <span class="btn-component-subheader">0 2px 12px 0</span>
-          <span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
+      <div class="state-container">
+        <div class="glow"></div>
+        <div class="state-details">
+          <span class="header">Glow</span>
+          <span class="subheader">0 2px 12px 0</span>
+          <span class="subheader">rgba (146, 141, 255, 1)</span>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html b/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html
index f3feb524..fd32ecd8 100644
--- a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.html
@@ -1,9 +1,9 @@
 <div class="row">
-  <div class="col-md-4">
-    <div class="btn-shape-name">
+  <div class="shape-container col-md-4">
+    <div class="header">
       <span>Rectangle Button</span>
     </div>
-    <div class="btn-shape-details">
+    <div class="subheader">
       <span>Border radius:</span>
       <span>4px</span>
     </div>
@@ -11,11 +11,11 @@
       <button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
     </div>
   </div>
-  <div class="col-md-4">
-    <div class="btn-shape-name">
+  <div class="shape-container col-md-4">
+    <div class="header">
       <span>Semi-round Button</span>
     </div>
-    <div class="btn-shape-details">
+    <div class="subheader">
       <span>Border radius:</span>
       <span>12px</span>
     </div>
@@ -23,11 +23,11 @@
       <button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
     </div>
   </div>
-  <div class="col-md-4">
-    <div class="btn-shape-name">
+  <div class="shape-container col-md-4">
+    <div class="header">
       <span>Rounded Button</span>
     </div>
-    <div class="btn-shape-details">
+    <div class="subheader">
       <span>Border radius:</span>
       <span>round</span>
     </div>
diff --git a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss b/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss
index ab486e8c..e6487321 100644
--- a/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss
@@ -1,9 +1,11 @@
-.btn-shape-name {
+.shape-container .header {
   margin-bottom: 7px;
 }
 
-.btn-shape-details {
+.shape-container .subheader {
   margin-bottom: 19px;
+  font-weight: 300;
+  font-size: 0.875rem;
 
   span:nth-child(2) {
     color: #ffffff;
diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html
index db1c3aa1..1d23d93d 100644
--- a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html
@@ -1,42 +1,42 @@
 <div class="row">
-  <div class="btn-size-container col-md-4">
-    <div>
+  <div class="size-container">
+    <div class="header">
       <span>Rectangle Button</span>
     </div>
-    <div>
+    <div class="subheader">
       <span>1.25rem 1.75rem</span>
     </div>
     <div>
       <button class="btn btn-primary btn-lg">Large Button</button>
     </div>
   </div>
-  <div class="btn-size-container col-md-3">
-    <div>
+  <div class="size-container">
+    <div class="header">
       <span>Medium Button</span>
     </div>
-    <div>
+    <div class="subheader">
       <span>1rem 1.5rem</span>
     </div>
     <div>
       <button class="btn btn-primary btn-md">Medium Button</button>
     </div>
   </div>
-  <div class="btn-size-container col-md-3">
-    <div>
+  <div class="size-container">
+    <div class="header">
       <span>Small Button</span>
     </div>
-    <div>
+    <div class="subheader">
       <span>0.875rem 1.5rem</span>
     </div>
     <div>
       <button class="btn btn-primary btn-sm">Small Button</button>
     </div>
   </div>
-  <div class="btn-size-container col-md-2">
-    <div>
+  <div class="size-container">
+    <div class="header">
       <span>Tiny Button</span>
     </div>
-    <div>
+    <div class="subheader">
       <span>0.625rem 1.25rem</span>
     </div>
     <div>
diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
index 1852e882..7a1a9e56 100644
--- a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss
@@ -1,10 +1,18 @@
-.btn-size-container {
-  div:nth-child(1) {
+.row {
+  padding: 0 15px;
+}
+
+.size-container {
+  margin-right: 20px;
+
+  .header {
     margin-bottom: 7px;
   }
 
-  div:nth-child(2) {
+  .subheader {
     color: #ffffff;
     margin-bottom: 19px;
+    font-size: 0.875rem;
+    font-weight: 300;
   }
 }