diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
index 60b3d6d8..88bdcb64 100644
--- a/.storybook/storybook.scss
+++ b/.storybook/storybook.scss
@@ -22,8 +22,9 @@
 
 .storybook-rows {
   display: flex;
-  width: 100%;
-  min-width: 50vw;
+  width: 50vw;
+  min-width: 100%;
+  max-width: 100%;
 
   .storybook-row {
     width: 100%;
diff --git a/package.json b/package.json
index 296a347e..5a6ee061 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebs-integrator/react-ebs-ui",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "description": "Basic React UI elements.",
   "author": "EBS Integrator",
   "maintainers": [
diff --git a/src/components/atoms/Alert/Alert.scss b/src/components/atoms/Alert/Alert.scss
index d0983f65..a6784625 100644
--- a/src/components/atoms/Alert/Alert.scss
+++ b/src/components/atoms/Alert/Alert.scss
@@ -6,7 +6,7 @@
   padding: $alert-padding;
   border-radius: $border-radius;
 
-  svg {
+  .ebs-icon {
     width: $alert-icon-size;
     height: $alert-icon-size;
     border-radius: 100px;
@@ -14,28 +14,30 @@
     color: $success-color;
   }
 
-  &__type {
-    &--info {
-      border: 1px dashed $info-color;
+  &--info {
+    border: 1px dashed $info-color;
 
-      svg {
-        color: $info-color;
-      }
+    .ebs-icon {
+      color: $info-color;
     }
+  }
 
-    &--warning {
-      border: 1px dashed $warning-color;
+  &--warning {
+    border: 1px dashed $warning-color;
 
-      svg {
-        color: $warning-color;
-      }
+    .ebs-icon {
+      color: $warning-color;
     }
+  }
+
+  &--error {
+    border: 1px dashed $danger-color;
 
-    &--error {
-      border: 1px solid $danger-color;
+    .ebs-icon {
+      color: $danger-color;
 
-      svg {
-        color: $danger-color;
+      path:last-child {
+        fill: $white;
       }
     }
   }
diff --git a/src/components/atoms/Alert/Alert.tsx b/src/components/atoms/Alert/Alert.tsx
index d93a43e5..48abe8f7 100644
--- a/src/components/atoms/Alert/Alert.tsx
+++ b/src/components/atoms/Alert/Alert.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import cn from 'classnames';
 import { Icon } from '../';
 
 export type AlertType = 'success' | 'info' | 'warning' | 'error';
@@ -30,7 +32,7 @@ export const Alert: React.FC<Props> = ({ type = 'success', message = '', classNa
   }, [message, getHeader]);
 
   return message.length ? (
-    <div ref={ref} className={`ebs-alert ebs-alert__type--${type} ${className}`}>
+    <div ref={ref} className={cn(`ebs-alert`, `ebs-alert--${type}`, className)}>
       {renderByType[type]}
       {message}
     </div>
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index 73a40edd..e6fc92af 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -1,56 +1,49 @@
 .ebs-avatar {
+  @include flex-center;
   position: relative;
   border-radius: $border-radius;
-  @include flex-center;
-
-  &__type {
-    &--regular {
-      color: $primary-color;
-      background-color: $grey-100;
-    }
 
-    &--primary {
-      color: $white;
-      background-color: $primary-color;
-    }
+  &--circle,
+  &--circle &__img {
+    border-radius: 50%;
+  }
 
-    &--white {
-      color: $text-color;
-      background-color: $white;
-    }
+  &--regular {
+    color: $primary-color;
+    background-color: $grey-100;
   }
 
-  &.circle {
-    border-radius: 50%;
+  &--primary {
+    color: $white;
+    background-color: $primary-color;
+  }
 
-    .ebs-avatar__img {
-      border-radius: 50%;
-    }
+  &--white {
+    color: $text-color;
+    background-color: $white;
   }
 
-  &.ebs-avatar__size {
-    &--small {
-      min-width: $avatar-size-small;
-      width: $avatar-size-small;
-      height: $avatar-size-small;
+  &--small {
+    min-width: $avatar-size-small;
+    width: $avatar-size-small;
+    height: $avatar-size-small;
+  }
 
-      .ebs-avatar-short-alt {
-        font-size: $avatar-font-small;
-      }
-    }
+  &--small &-short-alt {
+    font-size: $avatar-font-small;
+  }
 
-    &--big {
-      min-width: $avatar-size-big;
-      width: $avatar-size-big;
-      height: $avatar-size-big;
+  &--big {
+    min-width: $avatar-size-big;
+    width: $avatar-size-big;
+    height: $avatar-size-big;
+  }
 
-      .ebs-avatar-short-alt {
-        font-size: $avatar-font-big;
-      }
-    }
+  &--big &-short-alt {
+    font-size: $avatar-font-big;
   }
 
-  .ebs-avatar__short-alt {
+  &__short-alt {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -59,7 +52,7 @@
     white-space: nowrap;
   }
 
-  .ebs-avatar__img {
+  &__img {
     position: relative;
     width: 100%;
     height: 100%;
@@ -68,7 +61,7 @@
     object-fit: cover;
   }
 
-  .ebs-avatar__status {
+  &__status {
     position: absolute;
     bottom: rem(-2.5px);
     right: rem(-2.5px);
@@ -85,65 +78,64 @@
       background-color: $primary-color;
     }
 
-    &--uanctive {
+    &--inactive {
       background-color: $avatar-status-uanctive;
     }
   }
-}
 
-.ebs-avatar__card {
-  display: inline-flex;
-  align-items: center;
-  background-color: #f9f9f9;
-  border: 1px solid #dfddd6;
-  border-radius: $border-radius;
+  &__card {
+    display: inline-flex;
+    align-items: center;
+    background-color: #f9f9f9;
+    border: 1px solid #dfddd6;
+    border-radius: $border-radius;
 
-  .ebs-avatar {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    height: rem(23px);
-    width: rem(23px);
+    &-alt {
+      color: #333;
+      padding: rem(0 $gutter-size / 2);
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      @include fontMedium;
+      font-size: rem(9px);
+    }
 
     img {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
-  }
 
-  .ebs-avatar__card-alt {
-    color: #333;
-    padding: rem(0 $gutter-size / 2);
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    @include fontMedium;
-    font-size: rem(9px);
+    .ebs-avatar {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      height: rem(23px);
+      width: rem(23px);
+    }
   }
-}
 
-.ebs-avatar__inline {
-  display: flex;
-  align-items: center;
+  &__inline {
+    display: flex;
+    align-items: center;
+    text-align: left;
 
-  .ebs-avatar__inline-alt {
-    margin-left: $gutter-size;
-    @include fontSemiBold;
-    font-size: rem(12px);
-    color: $black;
-  }
+    &--reversed &-alt {
+      margin-left: 0;
+      margin-right: $gutter-size;
+    }
 
-  &.is-white .ebs-avatar__inline-alt {
-    color: $white;
-  }
+    &-alt {
+      margin-left: $gutter-size;
+      @include fontSemiBold;
+      font-size: rem(12px);
+      color: $black;
+    }
 
-  .ebs-avatar__inline-description {
-    font-size: rem(10px);
-    color: $avatar-description-color;
-  }
+    &--white &-alt {
+      color: $white;
+    }
 
-  &.is-reversed {
-    .ebs-avatar__inline-alt {
-      margin-left: 0;
-      margin-right: $gutter-size;
+    &-description {
+      font-size: rem(10px);
+      color: $avatar-description-color;
     }
   }
 }
diff --git a/src/components/atoms/Avatar/Avatar.tsx b/src/components/atoms/Avatar/Avatar.tsx
index 61899ed3..2f4fd659 100644
--- a/src/components/atoms/Avatar/Avatar.tsx
+++ b/src/components/atoms/Avatar/Avatar.tsx
@@ -33,8 +33,8 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <div
-      className={cn(`ebs-avatar`, `ebs-avatar__size--${size}`, `ebs-avatar__type--${type}`, className, {
-        circle: circle,
+      className={cn(`ebs-avatar`, `ebs-avatar--${size}`, `ebs-avatar--${type}`, className, {
+        'ebs-avatar--circle': circle,
       })}
     >
       {img ? (
diff --git a/src/components/atoms/Avatar/AvatarInline.tsx b/src/components/atoms/Avatar/AvatarInline.tsx
index 4adecb8b..06b6fbfd 100644
--- a/src/components/atoms/Avatar/AvatarInline.tsx
+++ b/src/components/atoms/Avatar/AvatarInline.tsx
@@ -15,7 +15,16 @@ export const AvatarInline: React.FC<CardProps> = ({
   description,
   reversed = false,
 }) => (
-  <div className={cn(`ebs-avatar__inline`, className, { 'is-reversed': reversed, 'is-white': type === 'white' })}>
+  <div
+    className={cn(
+      `ebs-avatar__inline`,
+      {
+        'ebs-avatar__inline--reversed': reversed,
+        'ebs-avatar__inline--white': type === 'white',
+      },
+      className,
+    )}
+  >
     {!reversed && (
       <Avatar
         size="small"
diff --git a/src/components/atoms/Badge/Badge.scss b/src/components/atoms/Badge/Badge.scss
index 74cc01ac..a446096d 100644
--- a/src/components/atoms/Badge/Badge.scss
+++ b/src/components/atoms/Badge/Badge.scss
@@ -21,20 +21,19 @@
     font-size: $badge-font-size;
     font-weight: $badge-font-weight;
 
-    &.is-text {
+    &--text {
       width: auto;
       padding: $badge-text-padding;
       border-radius: $badge-text-border-radius;
     }
+  }
 
-    + * {
-      margin: 0 5px;
-    }
+  &__container + * {
+    margin: 0 5px;
   }
 
-  span {
+  & span {
     @include flex-center;
-
     position: relative;
 
     > .ebs-icon {
@@ -42,34 +41,24 @@
     }
   }
 
-  &__type {
-    &--success {
-      .ebs-badge__container {
-        background-color: $badge-success-bg-color;
-        color: $white;
-      }
-    }
+  &__type--success &__container {
+    background-color: $badge-success-bg-color;
+    color: $white;
+  }
 
-    &--info {
-      .ebs-badge__container {
-        background-color: $badge-info-bg-color;
-        color: $white;
-      }
-    }
+  &__type--info &__container {
+    background-color: $badge-info-bg-color;
+    color: $white;
+  }
 
-    &--warning {
-      .ebs-badge__container {
-        background-color: $badge-warning-bg-color;
-        color: $white;
-      }
-    }
+  &__type--warning &__container {
+    background-color: $badge-warning-bg-color;
+    color: $white;
+  }
 
-    &--danger {
-      .ebs-badge__container {
-        background-color: $badge-danger-bg-color;
-        color: $white;
-      }
-    }
+  &__type--danger &__container {
+    background-color: $badge-danger-bg-color;
+    color: $white;
   }
 
   .ebs-sidebar__prefix > & {
diff --git a/src/components/atoms/Badge/Badge.tsx b/src/components/atoms/Badge/Badge.tsx
index d6f27ea9..370d8c8f 100644
--- a/src/components/atoms/Badge/Badge.tsx
+++ b/src/components/atoms/Badge/Badge.tsx
@@ -14,7 +14,9 @@ export const Badge: React.FC<Props> = ({ count, text, type = 'regular', classNam
   return (
     <div className="ebs-badge">
       <span className={cn(`ebs-badge__type--${type}`, className)}>
-        {(count || text) && <div className={cn('ebs-badge__container', { 'is-text': text })}>{count || text}</div>}
+        {(count || text) && (
+          <div className={cn('ebs-badge__container', { 'ebs-badge__container--text': text })}>{count || text}</div>
+        )}
         {children}
       </span>
     </div>
diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index 96073eaf..50ff5149 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -1,211 +1,206 @@
 // fade
 @include fadeBackground('regularFade', #000);
 
-.ebs-button__wrapper {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-  border-radius: rem($border-radius);
-  transition: $transition-base;
-  border: 1px solid transparent;
-
-  // button
-  .ebs-button {
-    width: 100%;
-    cursor: pointer;
-    font-size: rem(13px);
-    line-height: $btn-line-height;
-    border-color: transparent;
-    background: transparent;
-    padding: 0;
-    outline: none !important;
-    @include fontMedium;
-
-    &-icon {
-      line-height: 0;
-    }
+// button
+.ebs-button {
+  @include fontMedium;
+  cursor: pointer;
+  width: 100%;
+  font-size: rem(13px);
+  line-height: $btn-line-height;
+  border-color: transparent;
+  background: transparent;
+  padding: 0;
+  outline: none !important;
+
+  &--is-icon {
+    @include flex-center;
+    height: 100%;
   }
 
-  // button size
-  &.ebs-button__size {
-    &--large {
-      border-radius: $btn-border-radius-lg;
+  &--prefix button.ebs-button {
+    padding-left: rem(30px);
+  }
 
-      .ebs-button {
-        padding: rem($btn-padding-y-lg $btn-padding-x-lg);
-        font-weight: $btn-font-weight-lg;
-        font-size: rem($btn-font-size-lg);
-      }
-    }
+  &--icon {
+    display: flex;
+    align-items: center;
+  }
 
-    &--medium {
-      border-radius: $btn-border-radius;
+  &--block {
+    width: 100%;
+    display: block;
+  }
 
-      .ebs-button {
-        padding: rem($btn-padding-y $btn-padding-x);
-        font-weight: $btn-font-weight;
-        font-size: rem($btn-font-size);
-      }
+  // button type (Color)
+  &--primary {
+    border-color: $primary-color;
+    background-color: $primary-color;
+    color: $white;
+
+    &:hover,
+    &.hover {
+      border-color: $primary-600;
+      background-color: $primary-600;
+    }
+
+    &:active,
+    &.active {
+      border-color: $primary-700;
+      background-color: $primary-700;
     }
+  }
 
-    &--small {
-      border-radius: $btn-border-radius-sm;
+  &--primary & {
+    color: $white;
 
-      .ebs-button {
-        padding: rem($btn-padding-y-sm $btn-padding-x-sm);
-        font-weight: $btn-font-weight-sm;
-        font-size: rem($btn-font-size-sm);
-        line-height: $btn-line-height-sm;
-      }
+    :hover {
+      color: $white;
     }
   }
 
-  // button type (Color)
-  &.ebs-button__type {
-    &--primary {
+  &--fill {
+    border-color: $primary-100;
+    background-color: $primary-100;
+    color: $primary-color;
+
+    &:hover,
+    &.hover {
       border-color: $primary-color;
       background-color: $primary-color;
       color: $white;
 
       .ebs-button {
         color: $white;
-
-        &:hover {
-          color: $white;
-        }
-      }
-
-      &:hover,
-      &.hover {
-        border-color: $primary-600;
-        background-color: $primary-600;
-      }
-
-      &:active,
-      &.active {
-        border-color: $primary-700;
-        background-color: $primary-700;
       }
     }
 
-    &--fill {
-      border-color: $primary-100;
-      background-color: $primary-100;
-      color: $primary-color;
+    &:active,
+    &.active {
+      border-color: $primary-600;
+      background-color: $primary-600;
+      color: $white;
 
       .ebs-button {
-        color: $primary-color;
+        color: $white;
       }
+    }
+  }
 
-      &:hover,
-      &.hover {
-        border-color: $primary-color;
-        background-color: $primary-color;
-        color: $white;
+  &--fill & {
+    color: $primary-color;
+  }
 
-        & .ebs-button {
-          color: $white;
-        }
-      }
+  &--ghost.ebs-button__wrapper {
+    background-color: $btn-type-ghost-background;
+    border-color: $btn-type-ghost-border-color;
+    color: $btn-type-ghost-color;
 
-      &:active,
-      &.active {
-        border-color: $primary-600;
-        background-color: $primary-600;
-        color: $white;
+    &:hover,
+    &.hover {
+      border-color: $btn-type-ghost-hover-border-color;
+      background-color: $btn-type-ghost-hover-background;
+      color: $btn-type-ghost-hover-color;
 
-        & .ebs-button {
-          color: $white;
-        }
+      .ebs-button {
+        color: $btn-type-ghost-hover-color;
       }
     }
 
-    &--ghost {
-      background-color: $btn-type-ghost-background;
-      border-color: $btn-type-ghost-border-color;
-      color: $btn-type-ghost-color;
+    &:active,
+    &.active {
+      border-color: $btn-type-ghost-active-border-color;
+      background-color: $btn-type-ghost-active-background;
+      color: $btn-type-ghost-active-color;
 
       .ebs-button {
-        color: $btn-type-ghost-color;
+        color: $btn-type-ghost-active-color;
       }
+    }
+  }
 
-      &:hover,
-      &.hover {
-        border-color: $btn-type-ghost-hover-border-color;
-        background-color: $btn-type-ghost-hover-background;
-        color: $btn-type-ghost-hover-color;
+  &--ghost & {
+    color: $btn-type-ghost-color;
+  }
 
-        & .ebs-button {
-          color: $btn-type-ghost-hover-color;
-        }
-      }
+  &--text {
+    background-color: transparent;
+    color: $primary-color;
 
-      &:active,
-      &.active {
-        border-color: $btn-type-ghost-active-border-color;
-        background-color: $btn-type-ghost-active-background;
-        color: $btn-type-ghost-active-color;
+    &:hover,
+    &.hover {
+      background-color: transparent;
 
-        & .ebs-button {
-          color: $btn-type-ghost-active-color;
-        }
+      .ebs-button {
+        color: $primary-600;
       }
     }
 
-    &--text {
+    &:active,
+    &.active {
       background-color: transparent;
-      color: $primary-color;
 
       .ebs-button {
-        color: $primary-color;
+        color: $primary-700;
       }
+    }
+  }
 
-      &:hover,
-      &.hover {
-        background-color: transparent;
-
-        & .ebs-button {
-          color: $primary-600;
-        }
-      }
+  &--text & {
+    color: $primary-color;
+  }
 
-      &:active,
-      &.active {
-        background-color: transparent;
+  &--disabled {
+    background-color: $border-color;
 
-        & .ebs-button {
-          color: $primary-700;
-        }
-      }
+    .ebs-button {
+      cursor: not-allowed;
+      color: $grey-500;
     }
+  }
 
-    &--disabled {
-      background-color: $border-color;
+  // button size
+  &--large {
+    border-radius: $btn-border-radius-lg;
+  }
 
-      .ebs-button {
-        cursor: not-allowed;
-        color: $grey-500;
-      }
-    }
+  &--large & {
+    padding: rem($btn-padding-y-lg $btn-padding-x-lg);
+    font-weight: $btn-font-weight-lg;
+    font-size: rem($btn-font-size-lg);
   }
 
-  &.has-prefix {
-    .ebs-button {
-      padding-left: rem(30px);
-    }
+  &--medium {
+    border-radius: $btn-border-radius;
   }
 
-  &.has-icon {
-    display: flex;
-    align-items: center;
+  &--medium & {
+    padding: rem($btn-padding-y $btn-padding-x);
+    font-weight: $btn-font-weight;
+    font-size: rem($btn-font-size);
   }
 
-  &.block {
-    width: 100%;
-    display: block;
+  &--small {
+    border-radius: $btn-border-radius-sm;
+  }
+
+  &--small & {
+    padding: rem($btn-padding-y-sm $btn-padding-x-sm);
+    font-weight: $btn-font-weight-sm;
+    font-size: rem($btn-font-size-sm);
+    line-height: $btn-line-height-sm;
   }
 
-  .ebs-button__loading {
+  &__wrapper {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    border-radius: rem($border-radius);
+    transition: $transition-base;
+    border: 1px solid transparent;
+  }
+
+  &__loading {
     position: absolute;
     left: 0;
     top: 0;
@@ -214,10 +209,8 @@
     border-radius: rem($border-radius);
     pointer-events: none;
 
-    &.ebs-button__loading {
-      &-regular {
-        animation: regularFade 0.25s forwards;
-      }
+    &-regular {
+      animation: regularFade 0.25s forwards;
     }
 
     .ebs-loader__spinner {
@@ -228,7 +221,7 @@
     }
   }
 
-  .ebs-button__prefix {
+  &__prefix {
     position: absolute;
     left: rem(10px);
     top: 50%;
@@ -237,27 +230,25 @@
     display: flex;
     align-items: center;
   }
-}
 
-.ebs-button__group {
-  display: flex;
-  flex-wrap: wrap;
+  &__group {
+    display: flex;
+    flex-wrap: wrap;
 
-  > .ebs-button__wrapper {
-    &:first-child {
+    .ebs-button__wrapper:first-child {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &:not(:first-child):not(:last-child) {
+    .ebs-button__wrapper:not(:first-child):not(:last-child) {
       border-radius: 0;
     }
 
-    &:not(:last-child) {
+    .ebs-button__wrapper:not(:last-child) {
       border-right: none;
     }
 
-    &:last-child {
+    .ebs-button__wrapper:last-child {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index c6934808..5b803bb1 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -38,13 +38,13 @@ export const Button: React.FC<ButtonProps> = ({
     <div
       className={cn(
         `ebs-button__wrapper`,
-        `ebs-button__size--${size}`,
-        `ebs-button__type--${props.disabled ? 'disabled' : type}`,
+        `ebs-button--${size}`,
+        `ebs-button--${props.disabled ? 'disabled' : type}`,
         className,
         {
-          block: block,
-          'has-prefix': prefix,
-          'has-icon': icon,
+          'ebs-button--block': block,
+          'ebs-button--prefix': prefix,
+          'ebs-button--icon': icon,
         },
       )}
       onClick={onClick}
@@ -60,7 +60,7 @@ export const Button: React.FC<ButtonProps> = ({
 
       <button
         type={submit ? 'submit' : 'button'}
-        className={cn(`ebs-button`, buttonClass, { 'ebs-button-icon': icon })}
+        className={cn(`ebs-button`, buttonClass, { 'ebs-button--is-icon': icon })}
         disabled={props.disabled || loading}
         {...props}
       >
diff --git a/src/components/atoms/Card/Card.scss b/src/components/atoms/Card/Card.scss
index 63ec729f..f8ffdc4c 100644
--- a/src/components/atoms/Card/Card.scss
+++ b/src/components/atoms/Card/Card.scss
@@ -6,49 +6,45 @@
   align-items: center;
   padding-top: rem($gutter-size);
 
-  .ebs-card__header-title {
+  &-title {
     font-size: rem(14px);
     @include fontBold;
     margin-right: rem($gutter-size);
     white-space: nowrap;
   }
 
-  .ebs-card__header-side {
-    &--right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      text-align: right;
+  &-side--right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: right;
 
-      @include mq($until: tablet) {
-        text-align: left;
-      }
+    @include mq($until: tablet) {
+      text-align: left;
+    }
+  }
 
-      > *:not(:first-child) {
-        margin-left: rem(15px);
-      }
+  &-side--left,
+  &-side--right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
 
-      .picker-label {
-        margin-right: 0;
-      }
+    > * {
+      margin-bottom: rem($gutter-size);
     }
+  }
 
-    &--left {
-      > *:not(:last-child) {
-        margin-right: rem(15px);
-      }
-    }
+  &-side--right > *:not(:first-child) {
+    margin-left: rem(15px);
+  }
 
-    &--left,
-    &--right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
+  &-side--right .picker-label {
+    margin-right: 0;
+  }
 
-      > * {
-        margin-bottom: rem($gutter-size);
-      }
-    }
+  &-side--left > *:not(:last-child) {
+    margin-right: rem(15px);
   }
 }
 
@@ -60,18 +56,16 @@
   border: 1px solid $border-color;
   border-top: unset;
 
-  .ebs-card__footer-side {
-    &--left {
-      position: relative;
-    }
+  &-side--left {
+    position: relative;
+  }
 
-    &--right {
-      width: 100%;
-      text-align: right;
+  &-side--right {
+    width: 100%;
+    text-align: right;
 
-      .ebs-button__wrapper:not(:last__child) {
-        margin-right: rem(10px);
-      }
+    .ebs-button__wrapper:not(:last__child) {
+      margin-right: rem(10px);
     }
   }
 
diff --git a/src/components/atoms/Chips/Chips.scss b/src/components/atoms/Chips/Chips.scss
index 1e73858b..780b7974 100644
--- a/src/components/atoms/Chips/Chips.scss
+++ b/src/components/atoms/Chips/Chips.scss
@@ -1,39 +1,59 @@
 .ebs-chips {
+  cursor: pointer;
   position: relative;
   padding: rem(4px 8px);
   font-size: rem(12px);
   border: 1px solid transparent;
   border-radius: rem(16px);
   background-color: transparent;
-  cursor: pointer;
   transition: all $transition-time;
 
-  &.ebs-chips {
-    &-checked {
-      background-color: $primary-000;
-      border-color: $primary-color;
-      color: $primary-color;
+  &-checked {
+    background-color: $primary-000;
+    border-color: $primary-color;
+    color: $primary-color;
 
-      &:hover {
-        background-color: $primary-color;
-        border-color: $primary-color;
-        color: $white;
-      }
+    &:hover {
+      background-color: $primary-color;
+      border-color: $primary-color;
+      color: $white;
     }
+  }
 
-    &-unchecked {
-      background-color: transparent;
-      border-color: $text-color-light;
-      color: $text-color-secondary;
+  &-unchecked {
+    background-color: transparent;
+    border-color: $text-color-light;
+    color: $text-color-secondary;
 
-      &:hover {
-        background-color: transparent;
-        border-color: $primary-400;
-        color: $primary-400;
-      }
+    &:hover {
+      background-color: transparent;
+      border-color: $primary-400;
+      color: $primary-400;
     }
   }
 
+  &__prefix {
+    position: absolute;
+    left: rem(9px);
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+  }
+
+  &__prefix .ebs-icon {
+    font-size: rem(12px);
+  }
+
+  &__suffix {
+    position: absolute;
+    right: rem(9px);
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+  }
+
+  &__suffix .ebs-icon {
+    font-size: rem(12px);
+  }
+
   &.has-prefix {
     padding-left: rem(28px);
   }
@@ -44,43 +64,19 @@
 
   &.disabled {
     cursor: not-allowed;
-
-    &.ebs-chips {
-      &-checked,
-      &-checked:hover {
-        background-color: $border-color;
-        border-color: $border-color;
-        color: $grey-500;
-      }
-
-      &-unchecked,
-      &-unchecked:hover {
-        background-color: transparent;
-        border-color: $border-color;
-        color: $border-color;
-      }
-    }
   }
 
-  .ebs-chips__prefix {
-    position: absolute;
-    left: rem(9px);
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
-
-    .ebs-icon {
-      font-size: rem(12px);
-    }
+  &.disabled,
+  &.disabled:hover {
+    background-color: $border-color;
+    border-color: $border-color;
+    color: $grey-500;
   }
 
-  .ebs-chips__suffix {
-    position: absolute;
-    right: rem(9px);
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
-
-    .ebs-icon {
-      font-size: rem(12px);
-    }
+  &.disabled,
+  &.disabled:hover {
+    background-color: transparent;
+    border-color: $border-color;
+    color: $border-color;
   }
 }
diff --git a/src/components/atoms/Collapse/Collapse.scss b/src/components/atoms/Collapse/Collapse.scss
index 6ffe531b..1e2f5e98 100644
--- a/src/components/atoms/Collapse/Collapse.scss
+++ b/src/components/atoms/Collapse/Collapse.scss
@@ -5,42 +5,40 @@
   border-radius: $collapse-border-radius;
   transition: height 600ms ease-out;
 
-  &.collapsed {
-    .ebs-collapse__header {
-      border-bottom: none;
-    }
+  &.collapsed &__header {
+    border-bottom: none;
   }
-}
 
-.ebs-collapse__header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  border-bottom: $collapse-header-border-bottom;
-  border-bottom-color: $collapse-header-border-bottom-color;
-  padding: rem(10px);
-}
+  &__header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-bottom: $collapse-header-border-bottom;
+    border-bottom-color: $collapse-header-border-bottom-color;
+    padding: rem(10px);
+  }
 
-.ebs-collapse__header__side-left,
-.ebs-collapse__header__side-right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
+  &__header__side-left,
+  &__header__side-right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
-.ebs-collapse__header__side-right {
-  text-align: right;
-}
+  &__header__side-right {
+    text-align: right;
+  }
 
-.ebs-collapse__header-action {
-  margin-left: rem(10px);
+  &__header-action {
+    margin-left: rem(10px);
 
-  svg {
-    width: rem(12px);
+    svg {
+      width: rem(12px);
+    }
   }
-}
 
-.ebs-collapse__title {
-  margin-right: rem(10px);
-  cursor: pointer;
+  &__title {
+    margin-right: rem(10px);
+    cursor: pointer;
+  }
 }
diff --git a/src/components/atoms/Extra/Extra.scss b/src/components/atoms/Extra/Extra.scss
index f6351129..008f8c9e 100644
--- a/src/components/atoms/Extra/Extra.scss
+++ b/src/components/atoms/Extra/Extra.scss
@@ -12,30 +12,28 @@
     color: $grey-500;
   }
 
-  &.ebs-extra__status {
-    &-success {
-      color: $success-color;
-      border-color: $success-color;
-    }
+  &__status--success {
+    color: $success-color;
+    border-color: $success-color;
+  }
 
-    &-warning {
-      color: $warning-color;
-      border-color: $warning-color;
-    }
+  &__status--warning {
+    color: $warning-color;
+    border-color: $warning-color;
+  }
 
-    &-danger {
-      color: $danger-color;
-      border-color: $danger-color;
-    }
+  &__status--danger {
+    color: $danger-color;
+    border-color: $danger-color;
+  }
 
-    &-info {
-      color: $info-color;
-      border-color: $info-color;
-    }
+  &__status--info {
+    color: $info-color;
+    border-color: $info-color;
+  }
 
-    &-text {
-      color: $text-color;
-      border-color: $text-color;
-    }
+  &__status--text {
+    color: $text-color;
+    border-color: $text-color;
   }
 }
diff --git a/src/components/atoms/Extra/Extra.tsx b/src/components/atoms/Extra/Extra.tsx
index 6a931205..7ea6abde 100644
--- a/src/components/atoms/Extra/Extra.tsx
+++ b/src/components/atoms/Extra/Extra.tsx
@@ -16,6 +16,6 @@ export const Extra: React.FC<Props> = ({ className, status = 'text', disabled, t
   }
 
   return (
-    <div className={cn(`ebs-extra`, `ebs-extra__status-${status}`, className, { disabled: disabled })}>{text}</div>
+    <div className={cn(`ebs-extra`, `ebs-extra__status--${status}`, className, { disabled: disabled })}>{text}</div>
   );
 };
diff --git a/src/components/atoms/Icon/Icon.scss b/src/components/atoms/Icon/Icon.scss
index 60f519f1..59416f05 100644
--- a/src/components/atoms/Icon/Icon.scss
+++ b/src/components/atoms/Icon/Icon.scss
@@ -1,19 +1,15 @@
 .ebs-icon {
   font-size: rem(16px);
 
-  &__type {
-    &-arrow {
-      &-right {
-        transform: rotate(90deg);
-      }
+  &__type-arrow-right {
+    transform: rotate(90deg);
+  }
 
-      &-bottom {
-        transform: rotate(180deg);
-      }
+  &__type-arrow--bottom {
+    transform: rotate(180deg);
+  }
 
-      &-left {
-        transform: rotate(270deg);
-      }
-    }
+  &__type-arrow--left {
+    transform: rotate(270deg);
   }
 }
diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
index f894f84f..eb9d0670 100644
--- a/src/components/atoms/Input/Input.scss
+++ b/src/components/atoms/Input/Input.scss
@@ -13,23 +13,21 @@
     padding-right: rem(37.5px);
   }
 
-  &.ebs-input__wrapper {
-    &--active,
-    &.focus {
-      border-color: $primary-color;
-      background-color: $white !important;
-
-      .ebs-input {
-        color: $heading-color;
-      }
-    }
+  &--active,
+  &.focus {
+    border-color: $primary-color;
+    background-color: $white !important;
 
-    &--unactive {
-      border-color: $border-color;
-      background-color: $white;
+    .ebs-input {
+      color: $heading-color;
     }
   }
 
+  &--unactive {
+    border-color: $border-color;
+    background-color: $white;
+  }
+
   &.has-error {
     border-color: $danger-color;
     background-color: $white;
@@ -49,38 +47,8 @@
     }
   }
 
-  &.ebs-input__style {
-    &-grey {
-      background-color: $grey-50;
-    }
-  }
-
-  .ebs-input__prefix,
-  .ebs-input__suffix {
-    position: absolute;
-    left: rem(10px);
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-
-    &.not-clickable {
-      pointer-events: none;
-    }
-
-    &.clickable {
-      cursor: pointer;
-      z-index: 2;
-    }
-
-    .ebs-icon {
-      font-size: rem(16px);
-    }
-  }
-
-  .ebs-input__suffix {
-    left: inherit;
-    right: rem(10px);
+  &.ebs-input__style-grey {
+    background-color: $grey-50;
   }
 }
 
@@ -96,16 +64,47 @@
   padding: rem(0 10px);
   color: $heading-color;
 
+  @include placeholder {
+    color: $text-color-secondary;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
   &-container {
     position: relative;
     width: 100%;
   }
 
-  @include placeholder {
-    color: $text-color-secondary;
+  &__prefix,
+  &__suffix {
+    position: absolute;
+    left: rem(10px);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+
+    .ebs-icon {
+      font-size: rem(16px);
+    }
   }
 
-  &:focus {
-    outline: none !important;
+  &__prefix.clickable,
+  &__suffix.clickable {
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &__prefix.not-clickable,
+  &__suffix.not-clickable {
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &__suffix {
+    left: inherit;
+    right: rem(10px);
   }
 }
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index 7b8fee8e..f91da8a5 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -4,100 +4,95 @@
   white-space: nowrap;
   @include fontRegular;
 
-  &.ebs-label {
-    &-regular {
-      font-size: rem(12px);
-      margin-bottom: rem(5px);
-      color: $text-color;
+  &--regular {
+    font-size: rem(12px);
+    margin-bottom: rem(5px);
+    color: $text-color;
+  }
+
+  &--circle,
+  &--fill {
+    display: inline;
+    font-size: rem(10px);
+    padding: rem(5px 12px);
+    border: 1px solid $text-color;
+    border-radius: rem(12px);
+  }
+
+  &--circle {
+    color: $text-color;
+  }
+
+  &--fill {
+    color: $white !important;
+    background: $text-color;
+    border-radius: rem(12px);
+
+    &.ebs-label--status-success {
+      background-color: $success-color;
     }
 
-    &-circle,
-    &-fill {
-      display: inline;
-      font-size: rem(10px);
-      padding: rem(5px 12px);
-      border: 1px solid $text-color;
-      border-radius: rem(12px);
+    &.ebs-label--status-warning {
+      background-color: $warning-color;
     }
 
-    &-circle {
-      color: $text-color;
+    &.ebs-label--status-danger {
+      background-color: $danger-color;
     }
 
-    &-fill {
-      color: $white !important;
-      background: $text-color;
-      border-radius: rem(12px);
-
-      &.ebs-label__status {
-        &--success {
-          background-color: $success-color;
-        }
-
-        &--warning {
-          background-color: $warning-color;
-        }
-
-        &--danger {
-          background-color: $danger-color;
-        }
-
-        &--info {
-          background-color: $info-color;
-        }
-
-        &--text {
-          background-color: $text-color;
-        }
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        color: $grey-500 !important;
-        background: $grey-100;
-      }
+    &.ebs-label--status-info {
+      background-color: $info-color;
     }
-  }
 
-  &.ebs-label__status {
-    &--success {
-      color: $success-color;
-      border-color: $success-color;
+    &.ebs-label--status-text {
+      background-color: $text-color;
     }
 
-    &--warning {
-      color: $warning-color;
-      border-color: $warning-color;
+    &.disabled {
+      cursor: not-allowed;
+      color: $grey-500 !important;
+      background: $grey-100;
     }
+  }
+
+  &--status-success {
+    color: $success-color;
+    border-color: $success-color;
+  }
 
-    &--danger {
+  &--status-warning {
+    color: $warning-color;
+    border-color: $warning-color;
+  }
+
+  &--status-danger {
+    color: $danger-color;
+    border-color: $danger-color;
+  }
+
+  &--status-danger.ebs-label--icon {
+    background: $white;
+    border-color: $white;
+
+    .ebs-icon {
       color: $danger-color;
-      border-color: $danger-color;
-
-      &.is-icon-info {
-        background: $white;
-        border-color: $white;
-        .ebs-icon {
-          color: $danger-color;
-        }
-      }
     }
+  }
 
-    &--info {
-      color: $info-color;
-      border-color: $info-color;
-    }
+  &--status-info {
+    color: $info-color;
+    border-color: $info-color;
+  }
 
-    &--text {
-      color: $text-color;
-      border-color: $text-color;
-    }
+  &--status-text {
+    color: $text-color;
+    border-color: $text-color;
+  }
 
-    &--primary {
-      background-color: $primary-000;
-      color: $primary-color;
-      border-color: $primary-color;
-    }
+  &--status-primary {
+    background-color: $primary-000;
+    color: $primary-color;
+    border-color: $primary-color;
   }
 
   &.disabled {
@@ -107,16 +102,16 @@
   }
 
   &.has-prefix,
-  &.has-prefix.ebs-label__circle {
+  &.has-prefix.ebs-label--circle {
     padding-left: rem(22.5px);
   }
 
   &.has-suffix,
-  &.has-suffix.ebs-label__circle {
+  &.has-suffix.ebs-label--circle {
     padding-right: rem(27.5px);
   }
 
-  &.is-icon {
+  &--icon {
     @include flex-center;
     width: $gutter-size;
     height: $gutter-size;
@@ -125,8 +120,8 @@
     margin-right: $gutter-size / 2;
   }
 
-  .ebs-label__prefix,
-  .ebs-label__suffix {
+  &__prefix,
+  &__suffix {
     position: absolute;
     top: calc(50% + 1px);
     transform: translateY(-50%);
@@ -140,11 +135,11 @@
     }
   }
 
-  .ebs-label__prefix {
+  &__prefix {
     left: rem(7.5px);
   }
 
-  .ebs-label__suffix {
+  &__suffix {
     right: rem(7.5px);
   }
 }
diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx
index ac951d3d..7cfc710e 100644
--- a/src/components/atoms/Label/Label.tsx
+++ b/src/components/atoms/Label/Label.tsx
@@ -41,11 +41,11 @@ export const Label: React.FC<Props> = ({
 
   return (
     <div
-      className={cn(`ebs-label`, `ebs-label-${type}`, `ebs-label__status--${status}`, className, {
+      className={cn(`ebs-label`, `ebs-label--${type}`, `ebs-label--status-${status}`, className, {
+        'ebs-label--icon': icon,
+        'ebs-label--icon-info': icon && icon.props && icon.props.type === 'info',
         'has-prefix': prefix,
         'has-suffix': suffix,
-        'is-icon': icon,
-        'is-icon-info': icon && icon.props && icon.props.type === 'info',
         disabled: disabled,
       })}
       style={style}
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
index 6328ecd4..7d36afe5 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
@@ -19,29 +19,27 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 
-  &.ebs-loader__spinner-size {
-    &--small {
-      border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
-      width: rem(15px);
-      height: rem(15px);
-      top: calc(50% - 5px);
-    }
+  &--small {
+    border: 2px solid $grey-500;
+    border-top: 2px solid $primary-color;
+    width: rem(15px);
+    height: rem(15px);
+    top: calc(50% - 5px);
+  }
 
-    &--middle {
-      border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
-      width: rem(20px);
-      height: rem(20px);
-      top: calc(50% - 10px);
-    }
+  &--middle {
+    border: 2px solid $grey-500;
+    border-top: 2px solid $primary-color;
+    width: rem(20px);
+    height: rem(20px);
+    top: calc(50% - 10px);
+  }
 
-    &--regular {
-      border: 6px solid $grey-500;
-      border-top: 6px solid $primary-color;
-      width: rem(60px);
-      height: rem(60px);
-      top: calc(50% - 20px);
-    }
+  &--regular {
+    border: 6px solid $grey-500;
+    border-top: 6px solid $primary-color;
+    width: rem(60px);
+    height: rem(60px);
+    top: calc(50% - 20px);
   }
 }
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
index c7d97147..b4c0847e 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
@@ -10,5 +10,5 @@ export interface Props {
 }
 
 export const LoaderSpinner: React.FC<Props> = ({ fixed, size = 'regular', className }) => (
-  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner-size--${size}`, className, { fixed: fixed })} />
+  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner--${size}`, className, { fixed: fixed })} />
 );
diff --git a/src/components/atoms/Mask/Mask.scss b/src/components/atoms/Mask/Mask.scss
index b23081e8..d7fef715 100644
--- a/src/components/atoms/Mask/Mask.scss
+++ b/src/components/atoms/Mask/Mask.scss
@@ -6,4 +6,5 @@
   height: 100vh;
   z-index: 990;
   animation: fadeIn 0.3s forwards;
+  background: rgba(0, 0, 0, 0.4);
 }
diff --git a/src/components/atoms/Radio/Radio.scss b/src/components/atoms/Radio/Radio.scss
index bdb5c4e3..b5843bd2 100644
--- a/src/components/atoms/Radio/Radio.scss
+++ b/src/components/atoms/Radio/Radio.scss
@@ -4,25 +4,23 @@
     flex-wrap: wrap;
   }
 
-  &.ebs-radio__align {
-    &--left {
-      .ebs-radio {
-        right: inherit;
-        left: 0;
-      }
+  &.ebs-radio__align--left {
+    .ebs-radio {
+      right: inherit;
+      left: 0;
 
-      .ebs-radio__text {
+      &__text {
         padding-left: rem(26px);
       }
     }
+  }
 
-    &--right {
-      .ebs-radio {
-        left: inherit;
-        right: 0;
-      }
+  &.ebs-radio__align--right {
+    .ebs-radio {
+      left: inherit;
+      right: 0;
 
-      .ebs-radio__text {
+      &__text {
         padding-right: rem(26px);
         width: rem(160px);
       }
@@ -36,6 +34,11 @@
       margin-bottom: rem(5px);
     }
 
+    &.has-text .ebs-radio {
+      position: absolute;
+      top: rem(-2px);
+    }
+
     &.disabled {
       .ebs-radio__input {
         cursor: not-allowed;
@@ -49,7 +52,7 @@
       .ebs-radio__input:hover ~ .ebs-radio {
         background-color: transparent;
 
-        .ebs-radio__dot {
+        &__dot {
           border: 1px solid $border-color;
           box-shadow: none;
           background-color: transparent;
@@ -60,78 +63,71 @@
       .ebs-radio__input:checked:hover ~ .ebs-radio {
         background-color: transparent;
 
-        .ebs-radio__dot {
+        &__dot {
           border: 1px solid $grey-500;
           box-shadow: 0px 0px 0px 3px $white inset;
           background-color: $grey-500;
         }
       }
     }
+  }
 
-    &.has-text .ebs-radio {
-      position: absolute;
-      top: rem(-2px);
-    }
+  .ebs-radio__input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
 
-    .ebs-radio__input {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      opacity: 0;
-      cursor: pointer;
+    &:hover ~ .ebs-radio {
+      background-color: $primary-100;
 
-      &:hover ~ .ebs-radio {
+      &__dot {
+        border-color: $primary-color;
         background-color: $primary-100;
-
-        .ebs-radio__dot {
-          border-color: $primary-color;
-          background-color: $primary-100;
-        }
       }
     }
 
-    .ebs-radio__input:checked {
-      &:hover ~ .ebs-radio {
-        background-color: $primary-100;
-
-        .ebs-radio__dot {
-          border-color: $primary-color;
-          background-color: $primary-color;
-          box-shadow: 0px 0px 0px 3px $primary-100 inset;
-        }
-      }
+    &:checked:hover ~ .ebs-radio {
+      background-color: $primary-100;
 
-      ~ .ebs-radio .ebs-radio__dot {
+      &__dot {
         border-color: $primary-color;
         background-color: $primary-color;
-        box-shadow: 0px 0px 0px 3px $white inset;
+        box-shadow: 0px 0px 0px 3px $primary-100 inset;
       }
     }
 
-    .ebs-radio {
-      transition: all $transition-time;
-      width: rem(20px);
-      height: rem(20px);
-      background-color: transparent;
-      pointer-events: none;
-      border-radius: 50%;
+    &:checked ~ .ebs-radio .ebs-radio__dot {
+      border-color: $primary-color;
+      background-color: $primary-color;
+      box-shadow: 0px 0px 0px 3px $white inset;
+    }
+  }
 
-      .ebs-radio__dot {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: rem(16px);
-        height: rem(16px);
-        border: 1px solid $border-color;
-        border-radius: 50%;
-        background-color: transparent;
-      }
+  .ebs-radio {
+    transition: all $transition-time;
+    width: rem(20px);
+    height: rem(20px);
+    background-color: transparent;
+    pointer-events: none;
+    border-radius: 50%;
+
+    &__dot {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: rem(16px);
+      height: rem(16px);
+      border: 1px solid $border-color;
+      border-radius: 50%;
+      background-color: transparent;
     }
 
-    .ebs-radio__text {
+    &__text {
       color: $text-color;
       font-size: rem(14px);
     }
diff --git a/src/components/atoms/Switch/Switch.scss b/src/components/atoms/Switch/Switch.scss
index 9ddd4e23..551db4c7 100644
--- a/src/components/atoms/Switch/Switch.scss
+++ b/src/components/atoms/Switch/Switch.scss
@@ -5,62 +5,60 @@
   position: relative;
   cursor: pointer;
 
-  &.ebs-switch {
-    &--unchecked {
-      background-color: $border-color;
+  &--unchecked {
+    background-color: $border-color;
 
-      &:hover .ebs-switch__dot {
-        border-color: $primary-200;
-        box-shadow: 0px 0px 0px 2px $primary-color inset;
-      }
+    .ebs-switch__dot {
+      border-color: $border-color;
+      background-color: $white;
+      box-shadow: 0px 0px 0px 2px $grey-500 inset;
+    }
 
-      .ebs-switch__dot {
-        border-color: $border-color;
-        background-color: $white;
-        box-shadow: 0px 0px 0px 2px $grey-500 inset;
-      }
+    &:hover .ebs-switch__dot {
+      border-color: $primary-200;
+      box-shadow: 0px 0px 0px 2px $primary-color inset;
+    }
+  }
 
-      &.disabled {
-        cursor: not-allowed;
-        background-color: $border-color;
+  &--unchecked.disabled {
+    cursor: not-allowed;
+    background-color: $border-color;
 
-        .ebs-switch__dot,
-        .ebs-switch__dot:hover {
-          background-color: $white;
-          border-color: $border-color;
-        }
-      }
+    .ebs-switch__dot,
+    .ebs-switch__dot:hover {
+      background-color: $white;
+      border-color: $border-color;
     }
+  }
 
-    &--checked {
-      background-color: $primary-200;
+  &--checked {
+    background-color: $primary-200;
 
-      &:hover .ebs-switch__dot {
-        border-color: $primary-300;
-        box-shadow: 0px 0px 0px 2px $primary-color inset;
-      }
+    .ebs-switch__dot {
+      transform: translate(16px, -50%);
+      background-color: $primary-400;
+      border-color: $primary-200;
+    }
 
-      .ebs-switch__dot {
-        transform: translate(16px, -50%);
-        background-color: $primary-400;
-        border-color: $primary-200;
-      }
+    &:hover .ebs-switch__dot {
+      border-color: $primary-300;
+      box-shadow: 0px 0px 0px 2px $primary-color inset;
+    }
+  }
 
-      &.disabled {
-        cursor: not-allowed;
-        background-color: $primary-100;
+  &--checked.disabled {
+    cursor: not-allowed;
+    background-color: $primary-100;
 
-        .ebs-switch__dot,
-        .ebs-switch__dot:hover {
-          box-shadow: 0px 0px 0px 2px $primary-400 inset;
-          background-color: $primary-300;
-          border-color: $primary-100;
-        }
-      }
+    .ebs-switch__dot,
+    .ebs-switch__dot:hover {
+      box-shadow: 0px 0px 0px 2px $primary-400 inset;
+      background-color: $primary-300;
+      border-color: $primary-100;
     }
   }
 
-  .ebs-switch__dot {
+  &__dot {
     position: absolute;
     left: 0;
     top: 50%;
@@ -74,7 +72,7 @@
     transition: all $transition-time;
   }
 
-  .ebs-switch__checked-sheet {
+  &__checked-sheet {
     border-radius: rem(25px);
     position: absolute;
     left: 0;
diff --git a/src/components/atoms/Tooltip/Tooltip.scss b/src/components/atoms/Tooltip/Tooltip.scss
index 7436f0dd..8dd9d61e 100644
--- a/src/components/atoms/Tooltip/Tooltip.scss
+++ b/src/components/atoms/Tooltip/Tooltip.scss
@@ -1,72 +1,72 @@
-.ebs-tooltip__wrapper {
-  background-color: $white;
-  border-radius: rem($border-radius);
-  @include elevation-2;
-  margin: rem(0 $gutter-size / 2);
-  z-index: 2;
+.ebs-tooltip {
+  &__wrapper {
+    @include elevation-2;
+    background-color: $white;
+    border-radius: rem($border-radius);
+    margin: rem(0 $gutter-size / 2);
+    z-index: 2;
 
-  &.ebs-tooltip {
-    &--top {
+    &.ebs-tooltip--top {
       margin: rem(0 0 $gutter-size / 2);
     }
 
-    &--bottom {
+    &.ebs-tooltip--bottom {
       margin: rem($gutter-size / 2 0 0);
     }
 
-    &--left {
+    &.ebs-tooltip--left {
       margin: rem(0 $gutter-size / 2 0 0);
     }
 
-    &--right {
+    &.ebs-tooltip--right {
       margin: rem(0 0 0 $gutter-size / 2);
     }
   }
 
-  .ebs-tooltip__body {
+  &__body {
     padding: rem($gutter-size);
     font-size: rem($gutter-size);
     color: $text-color;
 
-    .ebs-tooltip__body-title {
+    &-title {
       color: $heading-color;
       font-size: $font-size-base;
       margin-bottom: $border-radius;
       @include fontMedium;
     }
   }
-}
 
-.ebs-tooltip__arrow {
-  position: absolute;
-  font-size: $gutter-size;
-  transform: translate3d(-50%, 0, 0) rotate(180deg);
+  &__arrow {
+    position: absolute;
+    font-size: $gutter-size;
+    transform: translate3d(-50%, 0, 0) rotate(180deg);
+  }
 
-  path {
+  &__arrow path {
     stroke: transparent;
     fill: $white;
   }
-}
 
-.ebs-tooltip__arrow[data-placement*='top'] {
-  bottom: rem(-$gutter-size + 5);
-  left: 50%;
-}
+  &__arrow[data-placement*='top'] {
+    bottom: rem(-$gutter-size + 5);
+    left: 50%;
+  }
 
-.ebs-tooltip__arrow[data-placement*='right'] {
-  left: rem(-$gutter-size + 5);
-  top: 50%;
-  transform: translate3d(0, -50%, 0) rotate(270deg);
-}
+  &__arrow[data-placement*='right'] {
+    left: rem(-$gutter-size + 5);
+    top: 50%;
+    transform: translate3d(0, -50%, 0) rotate(270deg);
+  }
 
-.ebs-tooltip__arrow[data-placement*='bottom'] {
-  top: rem(-$gutter-size + 5);
-  left: 50%;
-  transform: translate3d(0, 0, 0) rotate(0deg);
-}
+  &__arrow[data-placement*='bottom'] {
+    top: rem(-$gutter-size + 5);
+    left: 50%;
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
 
-.ebs-tooltip__arrow[data-placement*='left'] {
-  right: rem(-$gutter-size + 5);
-  top: 50%;
-  transform: translate3d(0, -50%, 0) rotate(90deg);
+  &__arrow[data-placement*='left'] {
+    right: rem(-$gutter-size + 5);
+    top: 50%;
+    transform: translate3d(0, -50%, 0) rotate(90deg);
+  }
 }
diff --git a/src/components/molecules/Calendar/Calendar.scss b/src/components/molecules/Calendar/Calendar.scss
index d1d9c3c1..59d8375f 100644
--- a/src/components/molecules/Calendar/Calendar.scss
+++ b/src/components/molecules/Calendar/Calendar.scss
@@ -4,10 +4,10 @@
   display: flex;
   align-items: center;
 
-  & > div:last-child,
-  & > div:first-child:not(:last-child),
-  & .ebs-calendar__wrapper > div:last-child,
-  & .ebs-calendar__wrapper > div:first-child:not(:last-child) {
+  > div:last-child,
+  > div:first-child:not(:last-child),
+  .ebs-calendar__wrapper > div:last-child,
+  .ebs-calendar__wrapper > div:first-child:not(:last-child) {
     margin-right: rem(10px);
   }
 }
@@ -49,71 +49,67 @@
     background-color: $white;
   }
 
-  &.ebs-calendar__type {
-    &-period {
-      .ebs-calendar__input-wrapper .react-datepicker-wrapper {
-        &:not(:first-child) {
-          .ebs-calendar {
-            border-left: inherit;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-        }
-
-        &:not(:last-child) {
-          .ebs-calendar {
-            padding-right: rem(10px);
-            border-right: inherit;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-
-          .react-datepicker__input-container:before {
-            display: none;
-          }
-        }
+  &.ebs-calendar__type-period .ebs-calendar__input-wrapper .react-datepicker-wrapper {
+    &:not(:first-child) {
+      .ebs-calendar {
+        border-left: inherit;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      .ebs-calendar {
+        padding-right: rem(10px);
+        border-right: inherit;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      .react-datepicker__input-container:before {
+        display: none;
       }
     }
   }
+}
 
-  .ebs-calendar__input-wrapper {
-    display: flex;
+.ebs-calendar__input-wrapper {
+  display: flex;
+  width: 100%;
+  margin: 0;
+
+  .react-datepicker-wrapper {
     width: 100%;
-    margin: 0;
+  }
 
-    .react-datepicker-wrapper {
-      width: 100%;
-    }
+  .react-datepicker__input-container {
+    position: relative;
 
-    .react-datepicker__input-container {
-      position: relative;
-
-      &:before {
-        content: '';
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-        width: rem(35px);
-        height: 100%;
-        position: absolute;
-        background-repeat: no-repeat;
-        background-position: center;
-        right: 0;
-      }
+    &:before {
+      content: '';
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      width: rem(35px);
+      height: 100%;
+      position: absolute;
+      background-repeat: no-repeat;
+      background-position: center;
+      right: 0;
     }
+  }
 
-    .ebs-calendar {
-      width: 100%;
-      height: rem(40px);
-      border: 1px solid $border-color;
-      border-radius: rem($border-radius);
-      outline: none;
-      font-size: rem(14px);
-      padding: rem(10px);
-      padding-right: rem(35px);
-      color: $heading-color;
+  .ebs-calendar {
+    width: 100%;
+    height: rem(40px);
+    border: 1px solid $border-color;
+    border-radius: rem($border-radius);
+    outline: none;
+    font-size: rem(14px);
+    padding: rem(10px);
+    padding-right: rem(35px);
+    color: $heading-color;
 
-      @include placeholder {
-        color: $text-color-secondary;
-      }
+    @include placeholder {
+      color: $text-color-secondary;
     }
   }
 }
@@ -126,30 +122,28 @@
   }
 
   .react-datepicker {
+    @include elevation-2;
     border: none;
     display: flex;
-    @include elevation-2;
 
     &__time-list,
     &__year-dropdown {
       @include hiddenScroll;
     }
 
-    &__time-list-item {
-      &:hover {
-        background-color: $primary-100 !important;
-        color: $text-color;
-      }
+    &__time-list-item:hover {
+      background-color: $primary-100 !important;
+      color: $text-color;
+    }
 
-      &--disabled {
-        display: none !important;
-      }
+    &__time-list-item--disabled {
+      display: none !important;
+    }
 
-      &--selected,
-      &--selected:hover {
-        background-color: $primary-color !important;
-        color: $white;
-      }
+    &__time-list-item--selected,
+    &__time-list-item--selected:hover {
+      background-color: $primary-color !important;
+      color: $white;
     }
 
     &__navigation {
@@ -163,10 +157,10 @@
       width: rem(15px);
       height: rem(15px);
       border: none;
+    }
 
-      &--previous {
-        transform: rotate(180deg);
-      }
+    &__navigation--previous {
+      transform: rotate(180deg);
     }
 
     // arrow
@@ -192,14 +186,14 @@
 
     &__navigation--years {
       top: unset;
+    }
 
-      &-upcoming {
-        transform: rotate(-90deg);
-      }
+    &__navigation--years-upcoming {
+      transform: rotate(-90deg);
+    }
 
-      &-previous {
-        transform: rotate(90deg);
-      }
+    &__navigation--years-previous {
+      transform: rotate(90deg);
     }
 
     &__year-option--selected {
@@ -211,21 +205,21 @@
     &__year-read-view--down-arrow {
       border: none;
       top: rem(7px);
+    }
 
-      &:before {
-        border: none;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
-        background-size: 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: rem(15px);
-        height: rem(15px);
-        left: auto;
-        top: auto;
-        bottom: auto;
-        z-index: unset;
-        transform: rotate(90deg) translate3d(-50%, 50%, 0);
-      }
+    &__year-read-view--down-arrow:before {
+      border: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
+      background-size: 50%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: rem(15px);
+      height: rem(15px);
+      left: auto;
+      top: auto;
+      bottom: auto;
+      z-index: unset;
+      transform: rotate(90deg) translate3d(-50%, 50%, 0);
     }
 
     &__header {
@@ -260,10 +254,10 @@
       align-items: center;
       border-radius: 0;
       color: $text-color;
+    }
 
-      &:hover {
-        background-color: $primary-100;
-      }
+    &__day:hover {
+      background-color: $primary-100;
     }
 
     &__day--in-range {
diff --git a/src/components/molecules/Checkbox/Checkbox.scss b/src/components/molecules/Checkbox/Checkbox.scss
index e31e3b14..3fe2c239 100644
--- a/src/components/molecules/Checkbox/Checkbox.scss
+++ b/src/components/molecules/Checkbox/Checkbox.scss
@@ -27,159 +27,143 @@
     }
   }
 
-  &.disabled {
-    .ebs-checkbox__input {
-      cursor: not-allowed;
-
-      &:checked,
-      &:checked:hover {
-        ~ .ebs-checkbox {
-          border-color: $grey-500;
-          background-color: $grey-500;
-
-          &:before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
+  &.disabled .ebs-checkbox__input {
+    cursor: not-allowed;
+  }
 
-    .ebs-checkbox,
-    .ebs-checkbox__input:hover ~ .ebs-checkbox {
-      border-color: $grey-500;
-      background-color: transparent;
+  &.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox,
+  &.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox {
+    border-color: $grey-500;
+    background-color: $grey-500;
 
-      &:before {
-        background-color: transparent;
-      }
+    &:before {
+      background-color: transparent;
     }
+  }
+
+  &.disabled .ebs-checkbox,
+  &.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox {
+    border-color: $grey-500;
+    background-color: transparent;
 
-    .ebs-checkbox__text {
-      color: $grey-500;
+    &:before {
+      background-color: transparent;
     }
   }
 
+  &.disabled .ebs-checkbox__text {
+    color: $grey-500;
+  }
+
   &.has-text .ebs-checkbox {
     position: absolute;
     top: rem(-2px);
   }
 
-  &.ebs-checkbox__align {
-    &-left {
-      .ebs-checkbox {
-        right: inherit;
-        left: 0;
-      }
+  &.ebs-checkbox__align-left .ebs-checkbox {
+    right: inherit;
+    left: 0;
 
-      .ebs-checkbox__text {
-        padding-left: rem(26px);
-      }
+    &__text {
+      padding-left: rem(26px);
     }
+  }
 
-    &-right {
-      .ebs-checkbox {
-        left: inherit;
-        right: 0;
-      }
+  &.ebs-checkbox__align-right .ebs-checkbox {
+    left: inherit;
+    right: 0;
 
-      .ebs-checkbox__text {
-        padding-right: rem(26px);
-        width: rem(160px);
-      }
+    &__text {
+      padding-right: rem(26px);
+      width: rem(160px);
     }
   }
+}
 
-  .ebs-checkbox__input {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-
-    &:checked {
-      ~ .ebs-checkbox {
-        border-color: $primary-color;
-        background-color: $primary-color;
-
-        .ebs-checkbox__check {
-          font-size: rem(10px);
-          color: $white;
-        }
-      }
+.ebs-checkbox__input {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
 
-      &:hover {
-        ~ .ebs-checkbox {
-          border-color: $primary-color;
-          background-color: $primary-color;
+  &:checked {
+    ~ .ebs-checkbox {
+      border-color: $primary-color;
+      background-color: $primary-color;
+    }
 
-          &:before {
-            background-color: $primary-100;
-          }
-        }
-      }
+    ~ .ebs-checkbox .ebs-checkbox__check {
+      font-size: rem(10px);
+      color: $white;
     }
 
-    &:hover {
-      ~ .ebs-checkbox {
-        border-color: $primary-color;
+    &:hover ~ .ebs-checkbox {
+      border-color: $primary-color;
+      background-color: $primary-color;
 
-        &:before {
-          background-color: $primary-100;
-        }
+      &:before {
+        background-color: $primary-100;
       }
     }
   }
 
-  .ebs-checkbox {
-    position: relative;
-    width: rem(14px);
-    height: rem(14px);
-    margin: rem(3px);
-    background-color: transparent;
-    border: 1px solid $border-color;
-    border-radius: rem($border-radius);
-    transition: all $transition-time;
-    pointer-events: none;
+  &:hover ~ .ebs-checkbox {
+    border-color: $primary-color;
 
     &:before {
-      content: ' ';
-      display: block;
-      position: absolute;
-      width: rem(20px);
-      height: rem(20px);
-      left: 50%;
-      top: 50%;
-      background-color: transparent;
-      transform: translate(-50%, -50%);
-      border-radius: rem($border-radius);
-      z-index: -1;
+      background-color: $primary-100;
     }
+  }
+}
 
-    .ebs-checkbox__check,
-    .ebs-checkbox__indeterminate {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0;
-      color: $white;
-    }
+.ebs-checkbox {
+  position: relative;
+  width: rem(14px);
+  height: rem(14px);
+  margin: rem(3px);
+  background-color: transparent;
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  transition: all $transition-time;
+  pointer-events: none;
+
+  &:before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: rem(20px);
+    height: rem(20px);
+    left: 50%;
+    top: 50%;
+    background-color: transparent;
+    transform: translate(-50%, -50%);
+    border-radius: rem($border-radius);
+    z-index: -1;
+  }
 
-    .ebs-checkbox__indeterminate rect {
-      fill: $white;
-    }
+  &__check,
+  &__indeterminate {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0;
+    color: $white;
   }
 
-  .ebs-checkbox__text {
+  &__indeterminate rect {
+    fill: $white;
+  }
+
+  &__text {
     color: $text-color;
     font-size: rem(14px);
   }
-}
 
-.ebs-checkbox__group {
-  .ebs-checkbox__wrapper:not(:last-child) {
+  &__group &__wrapper:not(:last-child) {
     margin-bottom: rem(5px);
   }
 }
diff --git a/src/components/molecules/InputPhone/InputPhone.scss b/src/components/molecules/InputPhone/InputPhone.scss
index 09223b8f..a01e8e92 100644
--- a/src/components/molecules/InputPhone/InputPhone.scss
+++ b/src/components/molecules/InputPhone/InputPhone.scss
@@ -1,69 +1,52 @@
 @import '~react-phone-input-2/lib/style.css';
 
-.ebs-input__phone-wrapper {
-  .ebs-input__phone {
-    &.active .form-control,
-    &.active .flag-dropdown {
-      border-color: $primary-color;
-      background-color: $white !important;
-      color: $heading-color;
-    }
-
-    &.disabled .form-control,
-    &.disabled .flag-dropdown {
-      border-color: $grey-500;
-      background-color: $white;
-      color: $grey-500;
-      cursor: not-allowed;
-
-      @include placeholder {
-        color: $grey-500 !important;
-      }
-    }
+.ebs-input__phone {
+  &.active .form-control,
+  &.active .flag-dropdown {
+    border-color: $primary-color;
+    background-color: $white !important;
+    color: $heading-color;
+  }
 
-    &.has-error .form-control,
-    &.has-error .flag-dropdown {
-      border-color: $danger-color;
-      background-color: $white;
-    }
+  &.disabled .form-control,
+  &.disabled .flag-dropdown {
+    border-color: $grey-500;
+    background-color: $white;
+    color: $grey-500;
+    cursor: not-allowed;
 
-    .form-control {
-      border-radius: rem($border-radius);
-      height: rem(40px);
-
-      @include placeholder {
-        color: $text-color-secondary !important;
-      }
+    @include placeholder {
+      color: $grey-500 !important;
     }
+  }
 
-    .form-control,
-    .flag-dropdown {
-      border: 1px solid $border-color;
-      background-color: $white;
-    }
+  &.has-error .form-control,
+  &.has-error .flag-dropdown {
+    border-color: $danger-color;
+    background-color: $white;
   }
-}
 
-.ebs-input__phone-dropdown.country-list {
-  padding: rem(4px);
-  @include hiddenScroll;
-  @include elevation-2;
-  border-radius: rem($border-radius);
+  &-dropdown.country-list {
+    padding: rem(4px);
+    @include hiddenScroll;
+    @include elevation-2;
+    border-radius: rem($border-radius);
 
-  .country {
-    font-size: rem(14px);
-    color: $text-color;
-    padding: rem(6px);
-    @include fontRegular;
+    .country {
+      font-size: rem(14px);
+      color: $text-color;
+      padding: rem(6px);
+      @include fontRegular;
+    }
 
-    &.highlight,
-    &:hover,
-    &[aria-selected='true'] {
+    .country.highlight,
+    .country:hover,
+    .country[aria-selected='true'] {
       background-color: $primary-000;
       border-radius: rem($border-radius);
     }
 
-    &[aria-selected='true'] {
+    .country[aria-selected='true'] {
       color: $primary-color;
 
       .dial-code {
@@ -71,8 +54,23 @@
       }
     }
 
-    .dial-code {
+    .country .dial-code {
       color: $text-color-secondary;
     }
   }
+
+  .form-control {
+    border-radius: rem($border-radius);
+    height: rem(40px);
+
+    @include placeholder {
+      color: $text-color-secondary !important;
+    }
+  }
+
+  .form-control,
+  .flag-dropdown {
+    border: 1px solid $border-color;
+    background-color: $white;
+  }
 }
diff --git a/src/components/molecules/InputSearch/InputSearch.scss b/src/components/molecules/InputSearch/InputSearch.scss
index ad290047..6af5be7c 100644
--- a/src/components/molecules/InputSearch/InputSearch.scss
+++ b/src/components/molecules/InputSearch/InputSearch.scss
@@ -1,25 +1,23 @@
 .ebs-input__search-wrapper {
-  &.ebs-input__search-type {
-    &-fill {
-      .ebs-input__search,
-      .ebs-input__wrapper-active {
-        background-color: $grey-100 !important;
-      }
+  &.ebs-input__search-type-fill {
+    .ebs-input__search,
+    .ebs-input__wrapper-active {
+      background-color: $grey-100 !important;
     }
+  }
 
-    &-transparent {
-      .ebs-input__search,
-      .ebs-input__wrapper-active {
-        background-color: transparent !important;
-        border-color: transparent;
+  &.ebs-input__search-type-transparent {
+    .ebs-input__search,
+    .ebs-input__wrapper-active {
+      background-color: transparent !important;
+      border-color: transparent;
+      color: $white;
+
+      .ebs-input {
         color: $white;
 
-        .ebs-input {
+        @include placeholder {
           color: $white;
-
-          @include placeholder {
-            color: $white;
-          }
         }
       }
     }
diff --git a/src/components/molecules/InputSelect/InputSelect.scss b/src/components/molecules/InputSelect/InputSelect.scss
index a6b3a549..c84b9b8b 100644
--- a/src/components/molecules/InputSelect/InputSelect.scss
+++ b/src/components/molecules/InputSelect/InputSelect.scss
@@ -13,84 +13,86 @@
     background-color: $white;
   }
 
-  &.active .ebs-select__input-dropdown-wrapper .ebs-select__input {
-    border-color: $primary-color;
-    background-color: $white !important;
-
-    .ebs-select__input-value {
-      color: $heading-color;
+  &.active {
+    &.ebs-select__input-mode-multiple .ebs-select__input-value {
+      padding-right: rem(75px);
     }
-  }
 
-  &.active.ebs-select__input-mode-multiple .ebs-select__input-value {
-    padding-right: rem(75px);
+    .ebs-select__input-dropdown-wrapper .ebs-select__input {
+      border-color: $primary-color;
+      background-color: $white !important;
+
+      .ebs-select__input-value {
+        color: $heading-color;
+      }
+    }
   }
+}
 
-  .ebs-select__input-dropdown-wrapper {
-    position: relative;
+.ebs-select__input-dropdown-wrapper {
+  position: relative;
 
-    .ebs-select__input {
-      cursor: pointer;
-      padding: rem(11px 10px);
-      border: 1px solid $border-color;
-      border-radius: rem($border-radius);
-      font-size: rem(14px);
+  .ebs-select__input {
+    cursor: pointer;
+    padding: rem(11px 10px);
+    border: 1px solid $border-color;
+    border-radius: rem($border-radius);
+    font-size: rem(14px);
 
-      .ebs-select__input-value {
-        color: $text-color-secondary;
-        overflow: auto hidden;
-        white-space: nowrap;
-        @include hiddenScroll;
+    &-transition {
+      width: rem(90px);
+      height: calc(100% - 2px);
+      margin: 1px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      border-top-right-radius: rem(4px);
+      border-bottom-right-radius: rem(4px);
+      box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
+    }
 
-        .ebs-select__input-label {
-          position: relative;
-          top: rem(-1px);
-          padding-top: rem(4px);
-          padding-bottom: rem(4px);
-          font-size: rem(12px);
-          margin-bottom: 0;
+    &-count {
+      position: absolute;
+      right: (35px);
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: $primary-color;
+      color: $white;
+      font-size: rem(12px);
+      border-radius: rem($border-radius);
+      padding: rem(5px 8px);
+    }
 
-          &:not(:last-child) {
-            margin-right: rem(4px);
-          }
-        }
-      }
+    &-suffix {
+      position: absolute;
+      right: rem(14px);
+      top: 50%;
+      transform: translateY(-50%);
+      color: $text-color;
 
-      .ebs-select__input-transition {
-        width: rem(90px);
-        height: calc(100% - 2px);
-        margin: 1px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        border-top-right-radius: rem(4px);
-        border-bottom-right-radius: rem(4px);
-        box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
+      .ebs-icon {
+        font-size: rem(10px);
       }
+    }
 
-      .ebs-select__input-count {
-        position: absolute;
-        right: (35px);
-        top: 50%;
-        transform: translateY(-50%);
-        background-color: $primary-color;
-        color: $white;
-        font-size: rem(12px);
-        border-radius: rem($border-radius);
-        padding: rem(5px 8px);
-      }
+    &-value {
+      color: $text-color-secondary;
+      overflow: auto hidden;
+      white-space: nowrap;
+      @include hiddenScroll;
+    }
 
-      .ebs-select__input-suffix {
-        position: absolute;
-        right: rem(14px);
-        top: 50%;
-        transform: translateY(-50%);
-        color: $text-color;
+    &-label {
+      position: relative;
+      top: rem(-1px);
+      padding-top: rem(4px);
+      padding-bottom: rem(4px);
+      font-size: rem(12px);
+      margin-bottom: 0;
+    }
 
-        .ebs-icon {
-          font-size: rem(10px);
-        }
-      }
+    &-label:not(:last-child) {
+      margin-right: rem(4px);
     }
   }
 }
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index 940fc2d5..50fef4b0 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -17,31 +17,31 @@
   }
 }
 
-.ebs-loader__inline {
-  color: $text-color-secondary;
-  @include fontRegular;
-  font-size: rem(14px);
+.ebs-loader {
+  position: relative;
+  animation: loaderFade 0.5s forwards;
+  z-index: 2;
 
-  .ebs-loader__spinner {
+  &__inline {
+    color: $text-color-secondary;
+    @include fontRegular;
+    font-size: rem(14px);
+  }
+
+  &__inline &__spinner {
     position: relative;
     top: rem(2px);
     display: inline-block;
     margin-right: rem(7.5px);
   }
-}
 
-.ebs-loader {
-  position: relative;
-  animation: loaderFade 0.5s forwards;
-  z-index: 2;
-
-  .ebs-loader__spinner {
+  & > &__spinner {
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
+  }
 
-    &.fixed {
-      position: fixed;
-    }
+  & > &__spinner.fixed {
+    position: fixed;
   }
 }
diff --git a/src/components/molecules/SelectDropdown/SelectDropdown.scss b/src/components/molecules/SelectDropdown/SelectDropdown.scss
index ad89b8b2..09417af8 100644
--- a/src/components/molecules/SelectDropdown/SelectDropdown.scss
+++ b/src/components/molecules/SelectDropdown/SelectDropdown.scss
@@ -1,4 +1,6 @@
 .ebs-select__dropdown {
+  @include elevation-2;
+
   position: absolute;
   left: 0;
   top: rem(44px);
@@ -7,17 +9,10 @@
   background-color: $white;
   border: 1px solid $white;
   border-radius: rem($border-radius);
-  @include elevation-2;
-
   z-index: 999;
 
-  &.ebs-select__input-mode {
-    &-multiple {
-    }
-  }
-
-  .ebs-select__dropdown-search,
-  .ebs-select__dropdown-search.ebs-input__wrapper-active {
+  & > &-search,
+  &-search.ebs-input__wrapper-active {
     margin-bottom: rem(4px);
     border-color: $grey-100;
     background-color: $grey-100 !important;
@@ -27,7 +22,7 @@
     }
   }
 
-  .ebs-select__dropdown-items {
+  & > &-items {
     @include greyScroll;
     max-height: rem(174px);
     overflow-y: auto;
@@ -37,7 +32,7 @@
     }
   }
 
-  .ebs-select__dropdown--empty {
+  & > &--empty {
     display: block;
     color: $grey-500;
     text-align: center;
diff --git a/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss b/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
index e595a412..25f40efe 100644
--- a/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
+++ b/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
@@ -4,68 +4,68 @@
   border-radius: rem($border-radius);
   cursor: pointer;
   transition: all 0.3s;
+}
 
-  &.has-prefix {
-    padding-left: rem(32.5px);
-  }
+.ebs-select__dropdown-item.has-prefix {
+  padding-left: rem(32.5px);
+}
 
-  &.active {
-    color: $primary-color;
+.ebs-select__dropdown-item.active {
+  color: $primary-color;
 
-    .ebs-select__dropdown-item-text {
-      color: $primary-color;
-    }
+  .ebs-select__dropdown-item-text {
+    color: $primary-color;
   }
+}
 
-  &.selected {
-    background-color: $primary-000;
+.ebs-select__dropdown-item.selected {
+  background-color: $primary-000;
 
-    .ebs-select__dropdown-item-suffix .ebs-checkbox__wrapper .ebs-checkbox,
-    .ebs-select__dropdown-item-prefix .ebs-checkbox__wrapper .ebs-checkbox {
-      @include checkbox-hover;
-    }
+  .ebs-select__dropdown-item-suffix .ebs-checkbox__wrapper .ebs-checkbox,
+  .ebs-select__dropdown-item-prefix .ebs-checkbox__wrapper .ebs-checkbox {
+    @include checkbox-hover;
   }
+}
 
-  &:hover {
-    background-color: $primary-000;
-
-    .ebs-select__dropdown-item-text {
-      color: $primary-color;
-    }
+.ebs-select__dropdown-item:hover {
+  background-color: $primary-000;
+}
 
-    .ebs-select__dropdown-item-suffix,
-    .ebs-select__dropdown-item-prefix {
-      .ebs-checkbox__wrapper .ebs-checkbox,
-      .ebs-checkbox__wrapper .ebs-checkbox {
-        @include checkbox-hover;
-      }
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-text {
+  color: $primary-color;
+}
 
-      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox,
-      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox {
-        @include checkbox-checked-hover;
-      }
-    }
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-suffix,
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-prefix {
+  .ebs-checkbox__wrapper .ebs-checkbox,
+  .ebs-checkbox__wrapper .ebs-checkbox {
+    @include checkbox-hover;
   }
 
-  .ebs-select__dropdown-item-text {
-    color: $text-color;
-    font-size: rem(14px);
-    line-height: 140%;
+  .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox,
+  .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox {
+    @include checkbox-checked-hover;
   }
+}
 
-  .ebs-select__dropdown-item-prefix,
-  .ebs-select__dropdown-item-suffix {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    color: $text-color;
-  }
+.ebs-select__dropdown-item-text {
+  color: $text-color;
+  font-size: rem(14px);
+  line-height: 140%;
+}
 
-  .ebs-select__dropdown-item-prefix {
-    left: rem(10px);
-  }
+.ebs-select__dropdown-item-prefix,
+.ebs-select__dropdown-item-suffix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: $text-color;
+}
 
-  .ebs-select__dropdown-item-suffix {
-    right: rem(10px);
-  }
+.ebs-select__dropdown-item-prefix {
+  left: rem(10px);
+}
+
+.ebs-select__dropdown-item-suffix {
+  right: rem(10px);
 }
diff --git a/src/components/molecules/Stepper/Stepper.scss b/src/components/molecules/Stepper/Stepper.scss
index 5283d100..6b71e1d4 100644
--- a/src/components/molecules/Stepper/Stepper.scss
+++ b/src/components/molecules/Stepper/Stepper.scss
@@ -1,71 +1,50 @@
 @import '~rc-input-number/assets/index.css';
 
 .ebs-stepper__wrapper {
-  &.left .ebs-stepper .rc__input-number-handler-wrap {
-    float: left;
-    border-left-width: 0px;
-    border-right-width: 1px;
-    border-right-style: solid;
-  }
-
-  &.right .ebs-stepper .rc__input-number-handler-wrap {
-    float: right;
-    border-right-width: 0px;
-    border-left-width: 1px;
-    border-left-style: solid;
-  }
+  &.active .ebs-stepper,
+  &.active .ebs-stepper:hover {
+    border-color: $primary-color;
+    background-color: $white;
 
-  &.active {
-    .ebs-stepper,
-    .ebs-stepper:hover {
+    .rc-input-number-handler-wrap {
       border-color: $primary-color;
-      background-color: $white;
-
-      .rc-input-number-handler-wrap {
-        border-color: $primary-color;
-      }
-
-      .rc-input-number-input {
-        color: $heading-color;
-      }
     }
-  }
 
-  &.has-error {
-    .ebs-stepper,
-    .rc-input-number-handler-wrap {
-      border-color: $danger-color !important;
+    .rc-input-number-input {
+      color: $heading-color;
     }
+  }
 
-    .ebs-stepper__extra {
-      color: $danger-color;
-    }
+  &.has-error .ebs-stepper,
+  &.has-error .rc-input-number-handler-wrap {
+    border-color: $danger-color !important;
   }
 
-  &.disabled {
-    .ebs-stepper__label,
-    .ebs-stepper__label {
-      color: $grey-500;
-    }
+  &.has-error .ebs-stepper__extra {
+    color: $danger-color;
+  }
 
-    .ebs-stepper,
-    .ebs-stepper:hover {
-      border-color: $grey-500;
+  &.disabled .ebs-stepper__label {
+    color: $grey-500;
+  }
 
-      &.rc-input-number-disabled .rc-input-number-input {
-        background-color: $white;
+  &.disabled .ebs-stepper,
+  &.disabled .ebs-stepper:hover {
+    border-color: $grey-500;
 
-        @include placeholder {
-          color: $grey-500;
-        }
-      }
+    &.rc-input-number-disabled .rc-input-number-input {
+      background-color: $white;
 
-      .rc-input-number-handler-wrap,
-      .rc-input-number-handler-wrap:hover {
-        border-color: $grey-500;
+      @include placeholder {
         color: $grey-500;
       }
     }
+
+    .rc-input-number-handler-wrap,
+    .rc-input-number-handler-wrap:hover {
+      border-color: $grey-500;
+      color: $grey-500;
+    }
   }
 
   .ebs-stepper {
@@ -103,6 +82,22 @@
       }
     }
 
+    // Label
+    &__label {
+      margin-bottom: rem(5px);
+      color: $text-color;
+      @include fontRegular;
+      font-size: rem(12px);
+    }
+
+    // Extra
+    &__extra {
+      margin-top: rem(2.5px);
+      color: $text-color-secondary;
+      @include fontRegular;
+      font-size: rem(10px);
+    }
+
     .rc-input-number-handler-wrap {
       border-color: $border-color;
       width: rem(30px);
@@ -111,38 +106,38 @@
     .rc-input-number-handler {
       height: 50%;
       width: 100%;
+    }
 
-      > * {
-        font-size: rem(8px);
-      }
+    .rc-input-number-handler > * {
+      font-size: rem(8px);
+    }
 
-      &.rc-input-number-handler-up,
-      &.rc-input-number-handler-down {
-        position: relative;
+    .rc-input-number-handler.rc-input-number-handler-up,
+    .rc-input-number-handler.rc-input-number-handler-down {
+      position: relative;
 
-        .ebs-icon {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          color: $text-color;
-        }
+      .ebs-icon {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        color: $text-color;
       }
+    }
 
-      &.rc-input-number-handler-up {
-        border-bottom-color: transparent;
+    .rc-input-number-handler.rc-input-number-handler-up {
+      border-bottom-color: transparent;
 
-        .ebs-icon {
-          bottom: rem(2px);
-        }
+      .ebs-icon {
+        bottom: rem(2px);
       }
+    }
 
-      &.rc-input-number-handler-down {
-        border-bottom-color: transparent;
+    .rc-input-number-handler.rc-input-number-handler-down {
+      border-bottom-color: transparent;
 
-        .ebs-icon {
-          top: rem(2px);
-          transform: translateX(-50%) rotate(180deg);
-        }
+      .ebs-icon {
+        top: rem(2px);
+        transform: translateX(-50%) rotate(180deg);
       }
     }
 
@@ -158,19 +153,17 @@
     }
   }
 
-  // Label
-  .ebs-stepper__label {
-    margin-bottom: rem(5px);
-    color: $text-color;
-    @include fontRegular;
-    font-size: rem(12px);
+  &.left .rc-input-number-handler-wrap {
+    float: left;
+    border-left-width: 0px;
+    border-right-width: 1px;
+    border-right-style: solid;
   }
 
-  // Extra
-  .ebs-stepper__extra {
-    margin-top: rem(2.5px);
-    color: $text-color-secondary;
-    @include fontRegular;
-    font-size: rem(10px);
+  &.right .rc-input-number-handler-wrap {
+    float: right;
+    border-right-width: 0px;
+    border-left-width: 1px;
+    border-left-style: solid;
   }
 }
diff --git a/src/components/molecules/Textarea/Textarea.scss b/src/components/molecules/Textarea/Textarea.scss
index e1ef09b9..c7f8f8cb 100644
--- a/src/components/molecules/Textarea/Textarea.scss
+++ b/src/components/molecules/Textarea/Textarea.scss
@@ -1,59 +1,58 @@
-.ebs-textarea__wrapper {
-  .ebs-textarea {
-    width: 100%;
-    border: 1px solid $border-color;
-    min-height: rem(80px);
-    outline: none;
-    border-radius: rem($border-radius);
-    background-color: $white;
-    color: $heading-color;
-
-    @include fontRegular;
-    font-size: rem(14px);
-    padding: rem(10px);
-
-    @include placeholder {
-      color: $text-color-secondary;
-    }
+.ebs-textarea {
+  @include fontRegular;
+  font-size: rem(14px);
+  padding: rem(10px);
+  min-height: rem(80px);
+  width: 100%;
+  outline: none;
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  background-color: $white;
+  color: $heading-color;
+
+  @include placeholder {
+    color: $text-color-secondary;
+  }
 
-    &.has-value {
-      border-color: $primary-color;
-    }
+  &.has-value {
+    border-color: $primary-color;
+  }
 
-    &.has-error {
-      border-color: $danger-color;
-    }
+  &.has-error {
+    border-color: $danger-color;
+  }
 
-    &.disabled {
-      border-color: $grey-500;
-    }
+  &.disabled {
+    border-color: $grey-500;
   }
 
   // Label
-  .ebs-textarea__label {
-    margin-bottom: rem(5px);
-    color: $text-color;
+  &__label {
     @include fontRegular;
+
+    color: $text-color;
+    margin-bottom: rem(5px);
     font-size: rem(12px);
+  }
 
-    &.disabled {
-      color: $grey-500;
-    }
+  &__label.disabled {
+    color: $grey-500;
   }
 
   // Extra
-  .ebs-textarea__extra {
-    margin-top: rem(2.5px);
-    color: $text-color-secondary;
+  &__extra {
     @include fontRegular;
+
+    color: $text-color-secondary;
+    margin-top: rem(2.5px);
     font-size: rem(10px);
+  }
 
-    &.has-error {
-      color: $danger-color;
-    }
+  &__extra.has-error {
+    color: $danger-color;
+  }
 
-    &.disabled {
-      color: $grey-500;
-    }
+  &__extra.disabled {
+    color: $grey-500;
   }
 }
diff --git a/src/components/organisms/Actions/Actions.scss b/src/components/organisms/Actions/Actions.scss
index c6004ca9..81a93c8d 100644
--- a/src/components/organisms/Actions/Actions.scss
+++ b/src/components/organisms/Actions/Actions.scss
@@ -6,7 +6,7 @@
   min-width: rem($actions-tooltip-min-width);
   padding: rem($actions-tooltip-padding) !important;
 
-  .ebs-action__tooltip-title {
+  &-title {
     @include fontMedium;
     font-size: rem($actions-tooltip-title-font-size);
     padding: rem($actions-tooltip-title-padding);
@@ -14,36 +14,33 @@
     color: $actions-tooltip-title-color;
   }
 
-  .ebs-action__tooltip-items {
-    .ebs-action__tooltip-item {
-      position: relative;
-      // display: inline-block;
-      padding: rem($actions-tooltip-item-padding);
-      font-size: rem($actions-tooltip-item-font-size);
-      @include fontMedium;
-      cursor: pointer;
-      transition: $transition-time;
-
-      .loader-display {
-        display: inline-block;
-        margin-right: rem($gutter-size / 2);
-        vertical-align: middle;
-      }
+  &-item {
+    @include fontMedium;
+    cursor: pointer;
+    position: relative;
+    padding: rem($actions-tooltip-item-padding);
+    font-size: rem($actions-tooltip-item-font-size);
+    transition: $transition-time;
 
-      &:hover {
-        background-color: $background-content;
-        color: $link-hover-color;
-      }
+    &:hover {
+      background-color: $background-content;
+      color: $link-hover-color;
     }
   }
-}
 
-.ebs-action__tooltip-icon {
-  cursor: pointer;
-  display: block;
-  color: $text-color;
+  &-item .loader-display {
+    display: inline-block;
+    margin-right: rem($gutter-size / 2);
+    vertical-align: middle;
+  }
+
+  &-icon {
+    cursor: pointer;
+    display: block;
+    color: $text-color;
 
-  &:hover {
-    color: $primary-color;
+    &:hover {
+      color: $primary-color;
+    }
   }
 }
diff --git a/src/components/organisms/Form/Form.scss b/src/components/organisms/Form/Form.scss
index 67183205..d7bd53d9 100644
--- a/src/components/organisms/Form/Form.scss
+++ b/src/components/organisms/Form/Form.scss
@@ -1,72 +1,68 @@
-.ebs-form {
-  &.ebs-form__inline {
-    .ebs-form__item {
-      display: flex;
-      align-items: center;
+.ebs-form__inline {
+  .ebs-form__item {
+    display: flex;
+    align-items: center;
 
-      &:not(:last-child) {
-        margin-bottom: rem(25px);
-      }
+    &:not(:last-child) {
+      margin-bottom: rem(25px);
+    }
 
-      .ebs-label {
-        text-align: right;
-        max-width: rem(125px);
-        width: 100%;
-        margin: rem(0 10px 0 0);
-      }
+    .ebs-label {
+      text-align: right;
+      max-width: rem(125px);
+      width: 100%;
+      margin: rem(0 10px 0 0);
+    }
 
-      .ebs-form__children {
-        width: 100%;
-      }
+    .ebs-form__children {
+      width: 100%;
+    }
 
-      .ebs-extra {
-        text-align: right;
-        position: absolute;
-        bottom: rem(-12.5px);
-        width: 100%;
-      }
+    .ebs-extra {
+      text-align: right;
+      position: absolute;
+      bottom: rem(-12.5px);
+      width: 100%;
     }
   }
+}
 
-  .ebs-form__items {
-    display: flex;
-    justify-content: space-between;
+.ebs-form__items {
+  display: flex;
+  justify-content: space-between;
 
-    @include mq($until: small-desktop) {
-      display: block;
-    }
+  @include mq($until: small-desktop) {
+    display: block;
+  }
 
-    &:not(:last-child) {
-      margin-bottom: rem(20px);
-    }
+  &:not(:last-child) {
+    margin-bottom: rem(20px);
+  }
 
-    &.ebs-form__items-three {
-      .ebs-form__item {
-        width: calc(33% - 7.5px);
-      }
-    }
+  &-three .ebs-form__item {
+    width: calc(33% - 7.5px);
+  }
 
-    .ebs-form__item {
-      @include mq($from: small-desktop) {
-        margin-bottom: 0 !important;
+  .ebs-form__item {
+    @include mq($from: small-desktop) {
+      margin-bottom: 0 !important;
 
-        &:not(:first-child) {
-          margin-left: rem(12.5px);
-        }
+      &:not(:first-child) {
+        margin-left: rem(12.5px);
       }
+    }
 
-      @include mq($until: small-desktop) {
-        width: 100% !important;
-      }
+    @include mq($until: small-desktop) {
+      width: 100% !important;
     }
   }
+}
 
-  .ebs-form__item {
-    position: relative;
-    width: 100%;
+.ebs-form__item {
+  position: relative;
+  width: 100%;
 
-    &:not(:last-child) {
-      margin-bottom: rem(20px);
-    }
+  &:not(:last-child) {
+    margin-bottom: rem(20px);
   }
 }
diff --git a/src/components/organisms/Form/Form.tsx b/src/components/organisms/Form/Form.tsx
index 79707729..04b9f74e 100644
--- a/src/components/organisms/Form/Form.tsx
+++ b/src/components/organisms/Form/Form.tsx
@@ -10,9 +10,10 @@ export type FormType = 'regular' | 'inline';
 interface Props extends FormProps {
   type?: FormType;
   className?: string;
+  onSubmit?: () => void;
 }
 
-export const Form: React.FC<FormProps> = ({ className, children, ...props }) => {
+export const Form: React.FC<Props> = ({ className, children, ...props }) => {
   return (
     <RCForm className={cn(`ebs-form`, className)} {...props}>
       {children}
diff --git a/src/components/organisms/Layout/Layout.scss b/src/components/organisms/Layout/Layout.scss
index 7be44d81..bb368bec 100644
--- a/src/components/organisms/Layout/Layout.scss
+++ b/src/components/organisms/Layout/Layout.scss
@@ -1,67 +1,19 @@
 .ebs-layout {
-  &.ebs-layout__sidebar {
-    &--untoggled {
-      &.has-options {
-        @media (min-width: 54.84714em) {
-          .ebs-layout__content-wrapper,
-          .ebs-layout__footer {
-            width: calc(100% - 27.3936rem) !important;
-          }
-        }
-
-        @media (max-width: 54.84714em) {
-          .ebs-sidebar.ebs-sidebar__mobile--closed {
-            transform: translateX(-200%);
-          }
-        }
-      }
-    }
-
-    &--toggled {
-      &.has-options {
-        @media (min-width: 54.84714em) {
-          .ebs-layout__content-wrapper,
-          .ebs-layout__footer {
-            width: calc(100% - 17.75772rem) !important;
-          }
-        }
-
-        .ebs-sidebar__options > .ebs-sidebar__item {
-          border-right: none;
-        }
-
-        @media (max-width: 54.84714em) {
-          .ebs-sidebar.ebs-sidebar__mobile--closed {
-            transform: translateX(-500%);
-          }
-        }
-      }
-
-      @media (min-width: 54.84714em) {
-        .ebs-layout__content-wrapper,
-        .ebs-layout__footer {
-          // 57px
-          width: calc(100% - 3.95224rem) !important;
-        }
-      }
-    }
-  }
-
   @include mq($until: small-desktop) {
-    .ebs-layout__content-wrapper,
-    .ebs-layout__footer {
+    &__content-wrapper,
+    &__footer {
       width: 100% !important;
     }
 
-    .ebs-layout__top-bar {
+    &__top-bar {
       padding-left: 0 !important;
 
-      .ebs-layout__top-bar-mobile {
+      &-mobile {
         display: flex !important;
         align-items: center;
         width: 100%;
 
-        .ebs-layout__top-bar-mobile--toggler {
+        &--toggler {
           position: relative;
           height: $layout-top-bar-height;
           width: $layout-top-bar-height;
@@ -82,98 +34,94 @@
       }
     }
 
-    .ebs-layout__top-bar-title {
+    &__top-bar-title {
       display: none;
     }
   }
 
-  .ebs-layout__top-bar,
-  .ebs-layout__footer {
-    background-color: $layout-footer-background;
-
-    &-top,
-    &-bottom {
-      user-select: none;
+  &__sidebar--untoggled.has-options {
+    @media (min-width: 54.84714em) {
+      .ebs-layout__content-wrapper,
+      .ebs-layout__footer {
+        width: calc(100% - 27.3936rem) !important;
+      }
     }
-  }
 
-  .ebs-layout__top-bar {
-    height: $layout-top-bar-height;
-    display: flex;
-    align-items: center;
-    transition: width $transition-time;
-    width: 100%;
-    padding: rem($gutter-size 24px);
-    border-bottom: $layout-top-bar-border-color;
-    background-color: $layout-top-bar-background;
-
-    &.fixed {
-      position: fixed;
-      right: 0;
-      top: 0;
-      z-index: 3;
-
-      &.fixed + .ebs-sidebar + .ebs-layout__content-wrapper {
-        padding-top: $layout-top-bar-height;
+    @media (max-width: 54.84714em) {
+      .ebs-sidebar.ebs-sidebar__mobile--closed {
+        transform: translateX(-200%);
       }
     }
+  }
 
-    .ebs-layout__top-bar-mobile {
-      display: none;
+  &__sidebar--toggled {
+    @media (min-width: 54.84714em) {
+      .ebs-layout__content-wrapper,
+      .ebs-layout__footer {
+        // 57px
+        width: calc(100% - 3.95224rem) !important;
+      }
     }
 
-    .ebs-layout__top-bar-title {
-      cursor: pointer;
-      font-size: rem(14px);
-      @include fontBold;
-      min-width: $sidebar-width - $gutter-size;
+    &.has-options {
+      @media (min-width: 54.84714em) {
+        .ebs-layout__content-wrapper,
+        .ebs-layout__footer {
+          width: calc(100% - 17.75772rem) !important;
+        }
+      }
 
-      > svg:first-child {
-        font-size: $sidebar-logo-width;
+      @media (max-width: 54.84714em) {
+        .ebs-sidebar.ebs-sidebar__mobile--closed {
+          transform: translateX(-500%);
+        }
       }
 
-      img {
-        max-width: $sidebar-logo-width;
+      .ebs-sidebar__item {
+        border-right: none;
       }
     }
+  }
 
-    .ebs-layout__top-bar-left {
-      width: 100%;
+  &__content-wrapper,
+  &__footer {
+    transition: width $transition-time;
+    margin-left: auto;
 
-      ~ .ebs-layout__top-bar-title {
-        width: auto;
-      }
-    }
+    // 191px
+    width: calc(100% - #{$sidebar-width});
+  }
 
-    .ebs-layout__top-bar-left,
-    .ebs-layout__top-bar-right {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-    }
+  &__content-wrapper {
+    position: relative;
+  }
 
-    .ebs-layout__top-bar-left {
-      margin-left: $layout-top-bar-side-left-magin-left;
-    }
+  &__content {
+    width: 100%;
+    height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
+    overflow: hidden auto;
+    margin: 0 auto;
+    padding: rem(15px 25px);
 
-    .ebs-layout__top-bar-right {
-      margin-left: $layout-top-bar-side-right-magin-left;
-      width: 100%;
-      justify-content: flex-end;
-    }
+    .ebs-breadcrumbs__wrapper {
+      margin-bottom: rem(20px);
 
-    .ebs-layout__top-bar-right > *:not(:first-child) {
-      margin-left: $gutter-size * 2;
+      + .ebs-card .ebs-card__header {
+        padding-top: 0;
+      }
     }
+  }
 
-    .ebs-layout__top-bar-right-item {
-      display: flex;
-      align-items: center;
-      margin-left: $gutter-size;
+  &__footer {
+    height: $layout-footer-height;
+    display: flex;
+    align-items: center;
+    color: $grey-300;
 
-      > *:not(:first-child) {
-        margin-left: $gutter-size;
-      }
+    span {
+      @include fontRegular;
+      display: block;
+      margin: 0 auto;
     }
   }
 
@@ -185,54 +133,99 @@
       margin-top: 0;
       height: 100vh;
     }
+
+    &--toggled .ebs-label {
+      @include text-ellipsis;
+      padding: 0 $gutter-size / 3;
+    }
   }
+}
 
-  .ebs-layout__content-wrapper,
-  .ebs-layout__footer {
-    transition: width $transition-time;
-    margin-left: auto;
+.ebs-layout__top-bar,
+.ebs-layout__footer {
+  background-color: $layout-footer-background;
+}
 
-    // 191px
-    width: calc(100% - #{$sidebar-width});
+.ebs-layout__top-bar-top,
+.ebs-layout__top-bar-bottom,
+.ebs-layout__footer-bar-top,
+.ebs-layout__footer-bar-bottom {
+  user-select: none;
+}
+
+.ebs-layout__top-bar {
+  height: $layout-top-bar-height;
+  display: flex;
+  align-items: center;
+  transition: width $transition-time;
+  width: 100%;
+  padding: rem($gutter-size 24px);
+  border-bottom: $layout-top-bar-border-color;
+  background-color: $layout-top-bar-background;
+
+  &.fixed {
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 3;
+
+    + .ebs-sidebar + .ebs-layout__content-wrapper {
+      padding-top: $layout-top-bar-height;
+    }
   }
 
-  .ebs-layout__content-wrapper {
-    position: relative;
+  &-mobile {
+    display: none;
+  }
 
-    .ebs-layout__content {
-      width: 100%;
-      height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
-      overflow: hidden auto;
-      margin: 0 auto;
-      padding: rem(15px 25px);
+  &-title {
+    cursor: pointer;
+    font-size: rem(14px);
+    @include fontBold;
+    min-width: $sidebar-width - $gutter-size;
 
-      .ebs-breadcrumbs__wrapper {
-        margin-bottom: rem(20px);
-      }
+    img {
+      max-width: $sidebar-logo-width;
+    }
 
-      & .ebs-breadcrumbs__wrapper + .ebs-card {
-        .ebs-card__header {
-          padding-top: 0;
-        }
-      }
+    svg:first-child {
+      font-size: $sidebar-logo-width;
     }
   }
 
-  .ebs-layout__footer {
-    height: $layout-footer-height;
+  &-left {
+    width: 100%;
+    margin-left: $layout-top-bar-side-left-magin-left;
+  }
+
+  &-left ~ &-title {
+    width: auto;
+  }
+
+  &-left,
+  &-right {
     display: flex;
     align-items: center;
-    color: $grey-300;
+    white-space: nowrap;
+  }
 
-    span {
-      @include fontRegular;
-      display: block;
-      margin: 0 auto;
+  &-right {
+    margin-left: $layout-top-bar-side-right-magin-left;
+    width: 100%;
+    justify-content: flex-end;
+
+    > *:not(:first-child) {
+      margin-left: $gutter-size * 2;
     }
-  }
 
-  .ebs-sidebar.ebs-sidebar--toggled .ebs-label {
-    @include text-ellipsis;
-    padding: 0 $gutter-size / 3;
+    &-item {
+      display: flex;
+      align-items: center;
+      margin-left: $gutter-size;
+
+      > *:not(:first-child) {
+        margin-left: $gutter-size;
+      }
+    }
   }
 }
diff --git a/src/components/organisms/Modal/Modal.scss b/src/components/organisms/Modal/Modal.scss
index 3d064bce..ce8ee91d 100644
--- a/src/components/organisms/Modal/Modal.scss
+++ b/src/components/organisms/Modal/Modal.scss
@@ -1,10 +1,3 @@
-.ebs-mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @keyframes fadeModal {
   0% {
     opacity: 0;
@@ -27,123 +20,106 @@
   overflow: auto;
   outline: 0;
   z-index: 9998;
+}
 
-  .ebs-modal {
-    @include elevation-4;
-    position: relative;
-    margin: rem(150px auto $gutter-size);
-    border: 1px solid $border-color;
-    border-radius: rem($border-radius);
-    background-color: $background-content;
-    animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;
-
-    &.ebs-modal__size {
-      &--small {
-        width: 100%;
-        max-width: rem(550px);
-      }
+.ebs-modal {
+  @include elevation-4;
+  position: relative;
+  margin: rem(150px auto $gutter-size);
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  background-color: $background-content;
+  animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;
+
+  &__size--small {
+    width: 100%;
+    max-width: rem(550px);
+  }
 
-      &--regular {
-        width: 100%;
-        max-width: rem(760px);
-      }
+  &__size--regular {
+    width: 100%;
+    max-width: rem(760px);
+  }
 
-      &--large {
-        width: 100%;
-        max-width: rem(960px);
-      }
-    }
+  &__size--large {
+    width: 100%;
+    max-width: rem(960px);
+  }
 
-    .ebs-modal__content {
-      padding: rem($gutter-size);
-    }
+  &.hide-header &__content {
+    padding: rem($gutter-size * 2);
+  }
 
-    &.hide-header .ebs-modal__content {
-      padding: rem($gutter-size * 2);
+  &__header {
+    position: relative;
+    padding: rem($gutter-size);
+    border-bottom: 1px solid $border-color;
+    background-color: $white;
+
+    &--close {
+      position: absolute;
+      top: 50%;
+      right: rem($gutter-size);
+      transform: translate3d(0, -50%, 0);
+      border-radius: rem($border-radius);
+      color: $black;
     }
+  }
 
-    .ebs-modal__header {
-      position: relative;
-      padding: rem($gutter-size);
-      border-bottom: 1px solid $border-color;
-      background-color: $white;
-
-      &--close {
-        position: absolute;
-        top: 50%;
-        right: rem($gutter-size);
-        transform: translate3d(0, -50%, 0);
-        border-radius: rem($border-radius);
-        color: $black;
-
-        &--center {
-          @include flex-center;
-        }
+  &__content {
+    padding: rem($gutter-size);
+  }
 
-        &--space-between {
-          @include flex-center-between;
-        }
-      }
+  &__title {
+    font-size: rem(14px);
+    @include fontMedium;
+    margin: 0;
+    padding: 0;
+  }
 
-      .ebs-modal__title {
-        font-size: rem(14px);
-        @include fontMedium;
-        margin: 0;
-        padding: 0;
-      }
-    }
+  &__footer {
+    padding: rem($gutter-size);
+    border-top: 1px solid $border-color;
+    background-color: $white;
 
-    .ebs-modal__footer {
-      padding: rem($gutter-size);
-      border-top: 1px solid $border-color;
-      background-color: $white;
+    &__button {
+      display: flex;
+      justify-content: space-between;
 
-      &__button {
+      &--flex {
         display: flex;
-        justify-content: space-between;
-      }
+        align-items: center;
 
-      .ebs-modal__footer__button {
-        > div:not(:first-child) {
-          margin-left: rem($gutter-size);
+        > * {
+          display: block;
+          white-space: nowrap;
 
-          > div:not(:first-child) {
-            margin-left: rem($gutter-size);
+          &:first-child {
+            width: 100%;
           }
-        }
-
-        &.ebs-modal__footer__button {
-          &--flex {
-            display: flex;
-            align-items: center;
-
-            > * {
-              display: block;
-              white-space: nowrap;
 
-              > *:not(:first-child) {
-                margin-left: rem($gutter-size);
-              }
-
-              &:first-child {
-                width: 100%;
-              }
+          &:last-child {
+            width: auto;
+          }
 
-              &:last-child {
-                width: auto;
-              }
-            }
+          > *:not(:first-child) {
+            margin-left: rem($gutter-size);
           }
+        }
+      }
 
-          &--center {
-            text-align: center;
+      &--center {
+        text-align: center;
 
-            .ebs-button__wrapper:last__child {
-              margin-left: rem($gutter-size);
-            }
-          }
+        .ebs-button__wrapper:last__child {
+          margin-left: rem($gutter-size);
         }
       }
+
+      > div:not(:first-child),
+      > div:not(:first-child) > div:not(:first-child) {
+        margin-left: rem($gutter-size);
+      }
     }
   }
 }
diff --git a/src/components/organisms/Sidebar/Item/Item.scss b/src/components/organisms/Sidebar/Item/Item.scss
index 3474eb6d..d72a6fbd 100644
--- a/src/components/organisms/Sidebar/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Item/Item.scss
@@ -1,66 +1,68 @@
-.ebs-sidebar__item {
-  position: relative;
-  cursor: pointer;
-  transition: $transition-time;
-  padding: rem($gutter-size 27.5px $gutter-size 57.5px);
-  display: flex;
-  align-items: center;
-  color: $sidebar-item-text-color;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: rem(44px);
-
-  &.ebs-sidebar__toggler {
-    margin-bottom: rem(10px);
-
-    @include mq($until: small-desktop) {
-      display: none !important;
-    }
-  }
+.ebs-sidebar {
+  &__item {
+    position: relative;
+    cursor: pointer;
+    transition: $transition-time;
+    padding: rem($gutter-size 27.5px $gutter-size 57.5px);
+    display: flex;
+    align-items: center;
+    color: $sidebar-item-text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: rem(44px);
 
-  // item has no options
-  &.invert:not(.has-options):hover,
-  &.invert.active:not(.has-options) {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
+    &.ebs-sidebar__toggler {
+      margin-bottom: rem(10px);
 
-    .ebs-sidebar__text {
-      color: $sidebar-item-hover-color;
+      @include mq($until: small-desktop) {
+        display: none !important;
+      }
     }
-  }
-
-  &:hover:not(.has-options),
-  &.active:not(.has-options) {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
 
-    .ebs-sidebar__text {
+    // item has no options
+    &.invert:not(.has-options):hover,
+    &.invert.active:not(.has-options) {
+      background-color: $sidebar-item-hover-background;
       color: $sidebar-item-hover-color;
-    }
-  }
 
-  // item has options
-  &.invert.has-options:hover,
-  &.invert.has-options.active {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
 
-    .ebs-sidebar__text {
+    &:hover:not(.has-options),
+    &.active:not(.has-options) {
+      background-color: $sidebar-item-hover-background;
       color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
     }
-  }
 
-  &.has-options:hover,
-  &.has-options.active {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
+    // item has options
+    &.invert.has-options:hover,
+    &.invert.has-options.active {
+      background-color: $sidebar-item-hover-background;
+      color: $sidebar-item-hover-color;
 
-    .ebs-sidebar__text {
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
+
+    &.has-options:hover,
+    &.has-options.active {
+      background-color: $sidebar-item-hover-background;
       color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
     }
   }
 
-  .ebs-sidebar__prefix svg {
+  &__prefix svg {
     position: absolute;
     left: rem(20px);
     top: 50%;
@@ -68,41 +70,41 @@
     font-size: rem(18px);
   }
 
-  .ebs-sidebar__text {
+  &__text {
     color: $sidebar-item-text-color;
     font-size: rem(14px);
     transition: $transition-time;
   }
 
-  .ebs-sidebar__suffix .ebs-icon {
-    position: absolute;
-    right: rem(12px);
-    top: calc(50% - 4px);
-    font-size: rem(10px);
-    transition: $transition-time;
+  &__suffix {
+    .ebs-icon {
+      position: absolute;
+      right: rem(12px);
+      top: calc(50% - 4px);
+      font-size: rem(10px);
+      transition: $transition-time;
 
-    &.ebs-icon__left {
-      transform: rotate(270deg) translateY(-50%);
-    }
+      path {
+        transition: $transition-time;
+      }
 
-    &.ebs-icon__bottom {
-      transform: rotate(180deg) translateY(-50%);
-    }
+      &.ebs-icon__left {
+        transform: rotate(270deg) translateY(-50%);
+      }
 
-    path {
-      transition: $transition-time;
+      &.ebs-icon__bottom {
+        transform: rotate(180deg) translateY(-50%);
+      }
     }
   }
-}
 
-.ebs-sidebar__label.ebs-label__status-text {
-  padding: rem(12px 16px 6px);
-  margin: 0;
-  color: $sidebar-item-text-color;
-}
+  &__label.ebs-label__status-text {
+    padding: rem(12px 16px 6px);
+    margin: 0;
+    color: $sidebar-item-text-color;
+  }
 
-.ebs-sidebar__options {
-  .ebs-sidebar__item {
+  &__options &__item {
     padding: rem(5px 13.75px 5px 60px);
 
     &:hover,
@@ -115,14 +117,14 @@
         color: $sidebar-item-hover-color;
       }
     }
+  }
 
-    .ebs-sidebar__prefix {
-      display: none;
-    }
+  &__options &__item &__prefix {
+    display: none;
+  }
 
-    .ebs-sidebar__text {
-      font-size: rem(12px);
-      color: $sidebar-item-text-color;
-    }
+  &__options &__item .ebs-sidebar__text {
+    font-size: rem(12px);
+    color: $sidebar-item-text-color;
   }
 }
diff --git a/src/components/organisms/Sidebar/Options/Item/Item.scss b/src/components/organisms/Sidebar/Options/Item/Item.scss
index 428ae52d..25d05d69 100644
--- a/src/components/organisms/Sidebar/Options/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Options/Item/Item.scss
@@ -1,8 +1,8 @@
 .ebs-optionsbar__item {
+  cursor: pointer;
   padding: rem(14px 16px);
-  color: $text-color;
   font-size: rem(14px);
-  cursor: pointer;
+  color: $text-color;
   transition: all $transition-time;
 
   &.disabled,
diff --git a/src/components/organisms/Sidebar/Options/Options.scss b/src/components/organisms/Sidebar/Options/Options.scss
index 1b76dd61..4f699dfd 100644
--- a/src/components/organisms/Sidebar/Options/Options.scss
+++ b/src/components/organisms/Sidebar/Options/Options.scss
@@ -1,9 +1,9 @@
 .ebs-optionsbar {
-  background-color: $grey-50;
-  border-right: 1px solid $border-color;
   position: absolute;
   top: 0;
   width: rem(192px);
   height: 100vh;
+  background-color: $grey-50;
+  border-right: 1px solid $border-color;
   transition: $transition-time;
 }
diff --git a/src/components/organisms/Sidebar/Sidebar.scss b/src/components/organisms/Sidebar/Sidebar.scss
index 8893120f..9e9762dd 100644
--- a/src/components/organisms/Sidebar/Sidebar.scss
+++ b/src/components/organisms/Sidebar/Sidebar.scss
@@ -13,70 +13,130 @@
   background-color: $sidebar-background;
   z-index: 5;
 
+  @include mq($until: small-desktop) {
+    padding-top: rem(80px);
+
+    &__mobile--closed,
+    &__mobile--opened {
+      transition: $transition-time;
+      padding-top: 0;
+    }
+
+    &__mobile--closed {
+      transform: translateX(-100%);
+    }
+
+    &__mobile--opened {
+      width: $sidebar-width !important;
+      transform: translateX(0);
+    }
+  }
+
   &__top {
     margin-top: rem(5px);
   }
 
-  @include mq($until: small-desktop) {
-    padding-top: rem(80px);
+  &--untoggled &__options {
+    left: $sidebar-width;
+  }
 
-    &.ebs-sidebar__mobile {
-      &--closed,
-      &--opened {
-        transition: $transition-time;
-        padding-top: 0;
-      }
+  &--toggled {
+    width: rem(57px);
 
-      &--closed {
-        transform: translateX(-100%);
-      }
-
-      &--opened {
-        width: $sidebar-width !important;
-        transform: translateX(0);
+    @media (min-width: 54.84714em) {
+      + .ebs-layout__content-wrapper {
+        width: calc(100% - 4.38462rem) !important;
       }
     }
-  }
 
-  &.ebs-sidebar {
-    &--untoggled .ebs-sidebar__options {
-      left: $sidebar-width;
+    .ebs-sidebar__label {
+      animation: fadeOut 0.1s;
+      white-space: nowrap;
     }
 
-    &--toggled {
-      width: rem(57px);
+    .ebs-sidebar__item {
+      padding-right: 0;
 
-      .ebs-sidebar__label {
+      .ebs-sidebar__text {
         animation: fadeOut 0.1s;
         white-space: nowrap;
       }
 
-      .ebs-sidebar__item {
-        padding-right: 0;
-        .ebs-sidebar__text {
-          animation: fadeOut 0.1s;
-          white-space: nowrap;
-        }
-
-        .ebs-sidebar__suffix .ebs-icon {
-          right: $gutter-size / 2;
-        }
+      .ebs-sidebar__suffix .ebs-icon {
+        right: $gutter-size / 2;
       }
+    }
 
-      .ebs-sidebar__options {
-        left: rem(57px);
-      }
+    .ebs-sidebar__options {
+      left: rem(57px);
+    }
+
+    .ebs-sidebar__options .ebs-sidebar__item:hover,
+    .ebs-sidebar__options .ebs-sidebar__item.active,
+    .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
+    .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
+      background-color: $primary-color;
+    }
+  }
+
+  &--toggled &__item {
+    z-index: 3;
+  }
 
-      .ebs-sidebar__options .ebs-sidebar__item:hover,
-      .ebs-sidebar__options .ebs-sidebar__item.active,
-      .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
-      .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
-        background-color: $primary-color;
+  &--toggled &__item.has-options {
+    padding-right: 0;
+  }
+
+  &--toggled &__item.active + .rah-static &__options &__item {
+    opacity: 1;
+    left: $layout-top-bar-height - 1;
+    transition: all $transition-time;
+  }
+
+  &--toggled &__options &__item {
+    background-color: $sidebar-background;
+    padding: $gutter-size / 3 $gutter-size;
+    z-index: 2;
+    left: -$sidebar-width;
+    opacity: 0;
+    height: $layout-top-bar-height;
+    width: $sidebar-width - 1;
+    border-top: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+
+    &.disabled {
+      background-color: $border-color;
+
+      span {
+        color: $grey-500;
       }
     }
+
+    &:nth-last-child(2) {
+      border-bottom: 1px solid $border-color;
+    }
+
+    span {
+      @include text-ellipsis;
+    }
+  }
+
+  &--toggled &__options &__item span {
+    @include text-ellipsis;
+  }
+
+  &__mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba($black, 0.5);
+    z-index: 4;
+    animation: fadeIn 0.3s forwards;
   }
 
-  .ebs-sidebar__bottom {
+  &__bottom {
     background-color: $sidebar-bottom-background;
     width: 100%;
     position: absolute;
@@ -101,70 +161,3 @@
     left: $sidebar-width - 2px;
   }
 }
-
-.ebs-sidebar.ebs-sidebar--toggled {
-  .ebs-sidebar__item {
-    z-index: 3;
-
-    &.has-options {
-      padding-right: 0;
-    }
-
-    &.active + .rah-static {
-      .ebs-sidebar__options {
-        .ebs-sidebar__item {
-          opacity: 1;
-          left: $layout-top-bar-height - 1;
-          transition: all $transition-time;
-        }
-      }
-    }
-  }
-
-  .ebs-sidebar__options {
-    .ebs-sidebar__item {
-      background-color: $sidebar-background;
-      padding: $gutter-size / 3 $gutter-size;
-      z-index: 2;
-      left: -$sidebar-width;
-      opacity: 0;
-      height: $layout-top-bar-height;
-      width: $sidebar-width - 1;
-      border-top: 1px solid $border-color;
-      border-right: 1px solid $border-color;
-
-      &.disabled {
-        background-color: $border-color;
-
-        span {
-          color: $grey-500;
-        }
-      }
-
-      &:nth-last-child(2) {
-        border-bottom: 1px solid $border-color;
-      }
-
-      span {
-        @include text-ellipsis;
-      }
-    }
-  }
-}
-
-.ebs-sidebar__mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba($black, 0.5);
-  z-index: 4;
-  animation: fadeIn 0.3s forwards;
-}
-
-@media (min-width: 54.84714em) {
-  .ebs-sidebar--toggled + .ebs-layout__content-wrapper {
-    width: calc(100% - 4.38462rem) !important;
-  }
-}
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 807b4442..0f2aad81 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -1,13 +1,55 @@
-.ebs-sort-by__wrapper {
-  position: relative;
-  height: rem($sort-by-height);
-  display: flex;
+.ebs-sort-by__tooltip {
+  padding: 0 !important;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  width: rem(162.5px);
+
+  &-title {
+    @include fontMedium;
+    font-size: rem(11px);
+    padding: rem(12.5px);
+    border-bottom: 1px solid $border-color;
+    color: #3c3939;
+  }
+
+  &-items &-item {
+    position: relative;
+    padding: rem(12.5px);
+    font-size: rem(12px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    @include fontMedium;
+    cursor: pointer;
+    transition: 0.2s;
+
+    &--active {
+      @include fontBold;
+      color: $primary-color;
+    }
+
+    &:hover {
+      background-color: #f4f3f2;
+      color: $primary-300;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
 
-  &.ebs-sort-asc > .ebs-button__wrapper {
     .ebs-icon {
-      transform: rotate(180deg);
+      position: absolute;
+      right: rem(10px);
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
+}
+
+.ebs-sort-by__wrapper {
+  position: relative;
+  height: rem($sort-by-height);
+  display: flex;
 
   > .ebs-button__wrapper {
     border-right: none;
@@ -15,6 +57,10 @@
     border-bottom-right-radius: 0;
   }
 
+  &.ebs-sort-asc > .ebs-button__wrapper .ebs-icon {
+    transform: rotate(180deg);
+  }
+
   .ebs-tooltip__trigger > .ebs-button__wrapper {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -23,69 +69,23 @@
   .ebs-button__wrapper {
     height: rem($sort-by-height);
 
-    &.ebs-button__type--ghost {
-      .ebs-button {
-        .ebs-icon {
-          color: $sort-by-icon-color;
-        }
-
-        &:hover .ebs-icon {
-          color: $sort-by-icon-hover-color;
-        }
-      }
-    }
-
     .ebs-icon {
       transition: 300ms transform;
     }
   }
-}
-
-.ebs-sort-by__tooltip {
-  padding: 0 !important;
-  border: 1px solid $border-color;
-  border-radius: $border-radius;
-  width: rem(162.5px);
-
-  .ebs-sort-by__tooltip-title {
-    @include fontMedium;
-    font-size: rem(11px);
-    padding: rem(12.5px);
-    border-bottom: 1px solid $border-color;
-    color: #3c3939;
-  }
 
-  .ebs-sort-by__tooltip-items {
-    .ebs-sort-by__tooltip-item {
-      position: relative;
-      padding: rem(12.5px);
-      font-size: rem(12px);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      @include fontMedium;
-      cursor: pointer;
-      transition: 0.2s;
-
-      &:not(:last-child) {
-        border-bottom: 1px solid $border-color;
-      }
+  .ebs-button--ghost .ebs-button {
+    color: $sort-by-text-color;
 
-      &--active {
-        @include fontBold;
-        color: $primary-color;
-      }
+    .ebs-icon {
+      color: $sort-by-icon-color;
+    }
 
-      &:hover {
-        background-color: #f4f3f2;
-        color: $primary-300;
-      }
+    &:hover {
+      color: $sort-by-text-hover-color;
 
       .ebs-icon {
-        position: absolute;
-        right: rem(10px);
-        top: 50%;
-        transform: translateY(-50%);
+        color: $sort-by-icon-hover-color;
       }
     }
   }
diff --git a/src/components/organisms/Table/Table.scss b/src/components/organisms/Table/Table.scss
index a9438fc0..ed545f18 100644
--- a/src/components/organisms/Table/Table.scss
+++ b/src/components/organisms/Table/Table.scss
@@ -7,296 +7,280 @@
     display: none;
   }
 
-  &.ebs-table__size {
-    &-small {
-      td {
-        padding: rem($gutter-size / 2 $gutter-size);
+  &__size-small td {
+    padding: rem($gutter-size / 2 $gutter-size);
+  }
+
+  &__th-filtered {
+    cursor: pointer;
+    transition: $transition-time;
+
+    &:hover {
+      color: $text-color-secondary;
+
+      .ebs-icon {
+        color: $text-color-secondary;
       }
     }
+
+    &-desc .ebs-icon {
+      transform: rotate(180deg);
+    }
+
+    &-asc,
+    &-desc {
+      @include fontMedium;
+      color: $text-color-secondary;
+
+      .ebs-icon {
+        color: $text-color-secondary;
+      }
+    }
+
+    .ebs-icon {
+      font-size: $table-body-font-size;
+      margin-left: rem(6px);
+      position: relative;
+      top: 0;
+      transition: $transition-time;
+      color: $text-color;
+    }
   }
 
-  .rc-table-content {
-    border: none;
+  .rc-table-thead tr:not(:first-child) th {
+    border: $table-border;
+    border-top: none;
+    border-right: none !important;
+    border-bottom: $table-head-cell-bottom-border;
   }
 
-  .rc-table-expanded-row {
-    .rc-table-cell {
-      box-shadow: none;
-      padding: 0;
+  .rc-table-tbody tr.rc-table-row {
+    td.rc-table-cell {
+      word-break: normal;
+      border: $table-body-cell-border;
+      transition: $transition-time;
+      text-align: $table-body-cell-text-align;
+      white-space: nowrap;
 
-      .flex-item {
-        border-bottom: none;
+      &:not(:last-child) {
+        border-right: none;
       }
     }
-  }
 
-  th,
-  td {
-    border-color: $border-color;
-    border-right: none;
-    padding: rem(22px 16px);
+    &:nth-child(odd) td.rc-table-cell {
+      background-color: $table-body-cell-odd-background;
+      font-size: $table-body-font-size;
+    }
 
-    &:first-child {
-      border-left: $table-border !important;
+    &:hover:nth-child(odd) td.rc-table-cell,
+    &:hover:nth-child(even) td.rc-table-cell {
+      background-color: $table-body-cell-hover-background;
     }
 
-    &:last-child {
-      border-right: $table-border !important;
+    &:last-child td {
+      border-bottom: $table-border;
     }
   }
 
-  td {
-    @include fontMedium;
-    color: $text-color;
+  &__mobile {
+    display: none;
 
-    a {
-      color: $primary-color;
+    @include mq($until: desktop) {
+      display: block;
     }
 
-    &.ebs-time__period-cell > div {
-      > .ebs-info {
-        display: inline-block;
+    &-item {
+      @include elevation-2;
+      position: relative;
+      border: $table-body-mobile-cell-border;
+      border-radius: $border-radius;
+      background-color: $table-head-background;
+      display: flex;
+      flex-wrap: wrap;
 
-        &:not(:first-child) {
-          padding-left: $table-body-font-size;
+      &-key {
+        font-size: rem($gutter-size);
+        position: absolute;
+        top: rem($gutter-size);
+        right: rem($gutter-size);
+        color: $grey-400;
+      }
 
-          .ebs-info__icon {
-            display: none;
-          }
-        }
+      &-title {
+        padding: rem($gutter-size $gutter-size $gutter-size / 2);
+        font-size: rem($table-body-font-size);
+        width: 100%;
+      }
 
-        &:not(:last-child) {
-          margin-right: $table-body-font-size;
-        }
+      &-desc {
+        padding: rem(0 $gutter-size $gutter-size);
+        width: 100%;
       }
-    }
 
-    b,
-    strong {
-      @include fontBold;
-    }
-  }
+      &-desc:not(:last-child) {
+        border-bottom: $table-body-mobile-cell-border;
+      }
 
-  .rc-table-thead {
-    tr {
-      th.rc-table-cell {
-        text-transform: uppercase;
-        border: $table-head-cell-border;
-        border-top: $table-border;
-        border-bottom: $table-head-cell-bottom-border;
-        position: relative;
-        font-weight: $table-head-font-weight;
-        text-align: left;
-        background-color: $table-head-background;
-        font-size: $table-head-font-size;
-        color: $heading-color;
-        word-break: normal;
-
-        &.has-children {
-          border: $table-border;
-          border-right: none;
-
-          & + *:not(.has-children) {
-            border-left: $table-border;
-          }
+      &-child {
+        padding: rem($gutter-size);
+        width: 50%;
+
+        &-title {
+          display: block;
+          font-size: rem($table-body-font-size);
+          margin-bottom: rem(5px);
+          color: $grey-400;
         }
 
-        &:not(:last-child) {
-          border-right: none;
+        &:nth-child(even) {
+          border-right: $table-body-mobile-cell-border;
         }
 
-        &:not(:last-child) {
-          border-right: none;
+        &:last-child {
+          border-right: unset;
+          width: 100%;
         }
+      }
 
-        &.rc-table-row-expand-icon-cell + th.rc-table-cell {
-          padding-left: 0;
+      &-action {
+        width: 100%;
+        border-top: $table-body-mobile-cell-border;
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        color: $white;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        padding: rem($gutter-size 5px);
+
+        > * {
+          width: 100%;
+          display: block;
         }
 
-        .ebs-table__th-filtered {
-          cursor: pointer;
-          transition: $transition-time;
-
-          .ebs-icon {
-            font-size: $table-body-font-size;
-            margin-left: rem(6px);
-            position: relative;
-            top: 0;
-            transition: $transition-time;
-            color: $text-color;
-          }
-
-          &.ebs-table__th-filtered {
-            &-asc,
-            &-desc {
-              @include fontMedium;
-              color: $text-color-secondary;
-
-              .ebs-icon {
-                color: $text-color-secondary;
-              }
-            }
-
-            &-desc .ebs-icon {
-              transform: rotate(180deg);
-            }
-          }
-
-          &:hover {
-            color: $text-color-secondary;
-
-            .ebs-icon {
-              color: $text-color-secondary;
-            }
-          }
+        > .flex {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: center;
         }
       }
 
-      &:not(:first-child) {
-        th {
-          border: $table-border;
-          border-top: none;
-          border-right: none !important;
-          border-bottom: $table-head-cell-bottom-border;
-        }
+      &:not(:last-child) {
+        margin-bottom: rem($gutter-size);
       }
     }
-  }
 
-  .rc-table-tbody {
-    tr {
-      &.rc-table-row {
-        &:hover {
-          &:nth-child(odd) td.rc-table-cell,
-          &:nth-child(even) td.rc-table-cell {
-            background-color: $table-body-cell-hover-background;
-          }
-        }
+    .ebs-button__wrapper {
+      width: 100%;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
 
-        td.rc-table-cell {
-          word-break: normal;
-          border: $table-body-cell-border;
-          transition: $transition-time;
+    .ebs-action__wrapper {
+      position: relative;
+    }
+  }
 
-          &:not(:last-child) {
-            border-right: none;
-          }
-        }
+  .rc-table-content {
+    border: none;
+  }
 
-        &:nth-child(odd) td.rc-table-cell {
-          background-color: $table-body-cell-odd-background;
-          font-size: $table-body-font-size;
-        }
+  .rc-table-expanded-row {
+    .rc-table-cell {
+      box-shadow: none;
+      padding: 0;
 
-        &:last-child td {
-          border-bottom: $table-border;
-        }
+      .flex-item {
+        border-bottom: none;
       }
     }
   }
-}
 
-.ebs-table__mobile {
-  display: none;
+  th,
+  td {
+    border-color: $border-color;
+    border-right: none;
+    padding: rem(22px 16px);
 
-  @include mq($until: desktop) {
-    display: block;
-  }
+    &:first-child {
+      border-left: $table-border !important;
+    }
 
-  .ebs-button__wrapper {
-    width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    &:last-child {
+      border-right: $table-border !important;
+    }
   }
 
-  .ebs-action__wrapper {
-    position: relative;
-  }
+  td {
+    @include fontMedium;
+    color: $text-color;
 
-  .ebs-table__mobile-item {
-    position: relative;
-    border: $table-body-mobile-cell-border;
-    border-radius: $border-radius;
-    background-color: $table-head-background;
-    display: flex;
-    flex-wrap: wrap;
-    @include elevation-2;
-
-    &:not(:last-child) {
-      margin-bottom: rem($gutter-size);
+    a {
+      color: $primary-color;
     }
 
-    .ebs-table__mobile-item-key {
-      font-size: rem($gutter-size);
-      position: absolute;
-      top: rem($gutter-size);
-      right: rem($gutter-size);
-      color: $grey-400;
+    b,
+    strong {
+      @include fontBold;
     }
 
-    .ebs-table__mobile-item-title {
-      padding: rem($gutter-size $gutter-size $gutter-size / 2);
-      font-size: rem($table-body-font-size);
-      width: 100%;
+    .ebs-time__period-cell > div > .ebs-info {
+      display: inline-block;
     }
 
-    .ebs-table__mobile-item-desc {
-      padding: rem(0 $gutter-size $gutter-size);
-      width: 100%;
+    .ebs-time__period-cell > div > .ebs-info:not(:first-child) {
+      padding-left: $table-body-font-size;
 
-      &:not(:last-child) {
-        border-bottom: $table-body-mobile-cell-border;
+      .ebs-info__icon {
+        display: none;
       }
     }
 
-    .ebs-table__mobile-item-child {
-      padding: rem($gutter-size);
-      width: 50%;
-
-      &:nth-child(even) {
-        border-right: $table-body-mobile-cell-border;
-      }
+    .ebs-time__period-cell > div > .ebs-info:not(:last-child) {
+      margin-right: $table-body-font-size;
+    }
+  }
 
-      &:last-child {
-        border-right: unset;
-      }
+  .rc-table-thead tr {
+    &.rc-table-row-expand-icon-cell + th.rc-table-cell {
+      padding-left: 0;
+    }
 
-      .ebs-table__mobile-item-child-title {
-        display: block;
-        font-size: rem($table-body-font-size);
-        margin-bottom: rem(5px);
-        color: $grey-400;
+    th.rc-table-cell {
+      text-transform: uppercase;
+      border: $table-head-cell-border;
+      border-bottom: $table-head-cell-bottom-border;
+      border-top: $table-border;
+      position: relative;
+      font-weight: $table-head-font-weight;
+      text-align: $table-head-cell-text-align;
+      background-color: $table-head-background;
+      font-size: $table-head-font-size;
+      color: $heading-color;
+      word-break: normal;
+
+      &.has-children {
+        border: $table-border;
+        border-right: none;
+        border-bottom: unset;
+
+        + *:not(.has-children) {
+          border-left: $table-border;
+        }
       }
     }
 
-    .ebs-table__mobile-item-action {
-      width: 100%;
-      border-top: $table-body-mobile-cell-border;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-      color: $white;
-      display: flex;
-      align-items: center;
-      text-align: center;
-      padding: rem($gutter-size 5px);
-
-      > .flex {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: center;
-      }
+    &:not(:last-child) th.rc-table-cell {
+      border-right: none;
+    }
 
-      > * {
-        width: 100%;
-        display: block;
-      }
+    &:not(:last-child) th.rc-table-cell {
+      border-right: none;
     }
 
-    &-child {
-      &:last-child {
-        width: 100%;
-      }
+    &:not(:first-child) th.rc-table-cell {
+      border-left: $table-border;
     }
   }
 }
diff --git a/src/components/organisms/Table/Table.tsx b/src/components/organisms/Table/Table.tsx
index 34746339..642ac377 100644
--- a/src/components/organisms/Table/Table.tsx
+++ b/src/components/organisms/Table/Table.tsx
@@ -20,7 +20,7 @@ export interface Column<T> {
 interface TableProps<T extends object> {
   className?: string;
   page?: number;
-  data: T[];
+  data?: T[];
   columns: Column<T>[];
   size?: 'small' | 'big' | 'regular';
   expandable?: any;
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 3b802054..3b15f8b6 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -95,7 +95,7 @@ strong {
 }
 
 .no-wrap {
-  white-space: nowrap;
+  white-space: nowrap !important;
 }
 
 ::-webkit-scrollbar {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 260632c1..4d39aa37 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -237,9 +237,11 @@ $table-box-shadow: none !default;
 $table-body-cell-border: $table-border !default;
 $table-body-cell-odd-background: $background-content !default;
 $table-body-cell-hover-background: $grey-100 !default;
+$table-body-cell-text-align: left !default;
 $table-body-mobile-cell-border: $table-border !default;
 $table-head-font-weight: 500 !default;
 $table-body-font-size: 10px !default;
+$table-head-cell-text-align: left !default;
 $table-head-font-size: 13px !default;
 $table-head-background: $white !default;
 $table-head-cell-border: $table-border !default;
@@ -253,3 +255,5 @@ $table-font-size: $font-size-base !default;
 $sort-by-height: 36px !default;
 $sort-by-icon-color: $primary-color !default;
 $sort-by-icon-hover-color: $white !default;
+$sort-by-text-color: $text-color !default;
+$sort-by-text-hover-color: $white !default;