diff --git a/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue
index dacff8ed8..3f9bc485f 100644
--- a/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue
+++ b/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue
@@ -101,6 +101,9 @@ export default {
     border-radius: .5rem;
 
     .color-picker-dropdown {
+      display: flex;
+      justify-content: center;
+
       &__badge {
         /* Badges have 0.5rem to the right by default */
         margin-left: 0.5rem;
diff --git a/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue
index 95bb3145b..8950e81f9 100644
--- a/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue
+++ b/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue
@@ -1,33 +1,34 @@
 <template>
-    <va-dropdown
-      class="notification-dropdown"
-      offset="15px, 0"
-    >
-      <va-icon
-        slot="anchor"
-        name="i-nav-notification"
-        class="notification-dropdown__icon"
-        :class="{'notification-dropdown__icon--unread': !allRead}"
-      />
-      <div class="notification-dropdown__content py-3 px-2">
-        <div
-          v-for="option in computedOptions"
-          :key="option.id"
-          class="notification-dropdown__item pr-3 row"
-          :class="{'notification-dropdown__item--unread': option.unread}"
-          @click="option.unread = false"
-         >
-          <img v-if="option.details.avatar" class="mr-1 notification-dropdown__item__avatar" :src="option.details.avatar"/>
-          <span class="ellipsis">
-            <span class="text--bold" v-if="option.details.name">{{option.details.name}}</span> {{$t(`notifications.${option.name}`, { type: option.details.type })}}
-          </span>
-        </div>
-        <div class="row justify--space-between">
-          <va-button class="m-0 mr-1" small>{{ $t('notifications.all') }}</va-button>
-          <va-button class="m-0" small outline @click="markAllAsRead" :disabled="allRead">{{ $t('notifications.mark_as_read') }}</va-button>
-        </div>
+  <va-dropdown
+    class="notification-dropdown"
+    offset="15px, 0"
+    boundary-body
+  >
+    <va-icon
+      slot="anchor"
+      name="i-nav-notification"
+      class="notification-dropdown__icon"
+      :class="{'notification-dropdown__icon--unread': !allRead}"
+    />
+    <div class="notification-dropdown__content py-3 px-2">
+      <div
+        v-for="option in computedOptions"
+        :key="option.id"
+        class="notification-dropdown__item pr-3 row"
+        :class="{'notification-dropdown__item--unread': option.unread}"
+        @click="option.unread = false"
+      >
+        <img v-if="option.details.avatar" class="mr-1 notification-dropdown__item__avatar" :src="option.details.avatar"/>
+        <span class="ellipsis">
+          <span class="text--bold" v-if="option.details.name">{{option.details.name}}</span> {{$t(`notifications.${option.name}`, { type: option.details.type })}}
+        </span>
       </div>
-    </va-dropdown>
+      <div class="row justify--space-between">
+        <va-button class="m-0 mr-1" small>{{ $t('notifications.all') }}</va-button>
+        <va-button class="m-0" small outline @click="markAllAsRead" :disabled="allRead">{{ $t('notifications.mark_as_read') }}</va-button>
+      </div>
+    </div>
+  </va-dropdown>
 </template>
 
 <script>
@@ -50,7 +51,11 @@ export default {
         },
         {
           name: 'uploadedZip',
-          details: { name: 'Oleg M', avatar: 'https://picsum.photos/100', type: 'typography component' },
+          details: {
+            name: 'Oleg M',
+            avatar: 'https://picsum.photos/100',
+            type: 'typography component',
+          },
           unread: true,
           id: 2,
         },
@@ -70,7 +75,10 @@ export default {
   },
   methods: {
     markAllAsRead () {
-      this.computedOptions = this.computedOptions.map(item => ({ ...item, unread: false }))
+      this.computedOptions = this.computedOptions.map(item => ({
+        ...item,
+        unread: false,
+      }))
     },
   },
 }
@@ -81,6 +89,7 @@ export default {
 
 .notification-dropdown {
   cursor: pointer;
+
   .notification-dropdown__icon {
     position: relative;
     display: flex;
@@ -99,20 +108,24 @@ export default {
       border-radius: .187rem;
     }
   }
+
   &__content {
     background-color: $dropdown-background;
     box-shadow: $gray-box-shadow;
     border-radius: .5rem;
-    max-width: 25rem;
+    max-width: 19rem;
   }
+
   &__item {
     cursor: pointer;
     margin-bottom: .75rem;
     color: $brand-secondary;
     flex-wrap: nowrap;
     position: relative;
+
     &--unread {
       color: $vue-darkest-blue;
+
       &:after {
         content: '';
         position: absolute;
@@ -126,9 +139,11 @@ export default {
         border-radius: .187rem;
       }
     }
+
     &:hover {
       color: $vue-green;
     }
+
     &__avatar {
       border-radius: 50%;
       width: 1.5rem;
diff --git a/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue
index cc7bd9f18..a461f8af1 100644
--- a/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue
+++ b/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue
@@ -1,13 +1,16 @@
 <template>
   <va-dropdown
     class="profile-dropdown"
-    @show="toggleVisibility(true)"
-    @hide="toggleVisibility(false)"
-    offset="15px, 0"
+    trigger="none"
+    v-model="isShown"
+    boundary-body
   >
     <span
-      class="profile-dropdown__actuator" slot="anchor"
+      class="profile-dropdown__anchor" slot="anchor"
       :style="{color: this.$themes.primary}"
+      @focus="toggleVisibility"
+      @blur="toggleVisibility"
+      tabindex="1"
     >
       <slot/>
       <va-icon
@@ -52,8 +55,8 @@ export default {
     },
   },
   methods: {
-    toggleVisibility (val) {
-      this.isShown = val
+    toggleVisibility () {
+      this.isShown = !this.isShown
     },
   },
 }
@@ -62,8 +65,10 @@ export default {
 <style lang="scss">
 .profile-dropdown {
   cursor: pointer;
-  &__actuator {
-    color: $vue-green;
+  &__anchor {
+    &:focus {
+      outline: none;
+    }
   }
   .va-dropdown-popper__anchor {
     display: flex;
@@ -73,6 +78,7 @@ export default {
     background-color: $dropdown-background;
     box-shadow: $gray-box-shadow;
     border-radius: .5rem;
+    width: 6rem;
   }
   &__item {
     display: block;
diff --git a/src/components/admin/app-sidebar/NavigationRoutes.js b/src/components/admin/app-sidebar/NavigationRoutes.js
index 6125afaee..f18760cd0 100644
--- a/src/components/admin/app-sidebar/NavigationRoutes.js
+++ b/src/components/admin/app-sidebar/NavigationRoutes.js
@@ -205,6 +205,10 @@ export const navigationRoutes = {
       },
       disabled: true,
       children: [
+        {
+          name: 'login',
+          displayName: 'Login/Signup',
+        },
         {
           name: '404-pages',
           displayName: '404 Pages',
diff --git a/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue b/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue
index c22c98921..cd8e22620 100644
--- a/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue
+++ b/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue
@@ -214,9 +214,10 @@ export default {
   }
 
   &--minimized {
-    .va-dropdown-popper {
-      width: 100%;
-      max-width: 100%;
+    .va-dropdown{
+      &__anchor {
+        width: 100%;
+      }
     }
     .va-sidebar-link-group__submenu {
       width: 10rem;
diff --git a/src/components/auth/AuthLayout.vue b/src/components/auth/AuthLayout.vue
index 91efb2648..b8cfc6bd6 100644
--- a/src/components/auth/AuthLayout.vue
+++ b/src/components/auth/AuthLayout.vue
@@ -1,30 +1,31 @@
 <template>
-  <div class="auth-layout flex-center flex-column">
-    <router-link class="auth-layout__container" to="/">
-      <va-icon-vuestic class="auth-layout__logo"/>
+<div class="auth-layout row align-content--center">
+  <div class="flex xs12 lg6 pa-3 flex-center">
+    <router-link class="py-5 flex-center" to="/">
+      <va-icon-vuestic />
     </router-link>
+  </div>
 
-    <div class="auth-layout__card">
-      <va-card>
+  <div class="flex xs12 lg6 pa-3">
+    <div class="d-flex justify--center">
+      <va-card class="auth-layout__card">
         <va-tabs
           v-model="tabIndex"
           center
         >
-          <va-tab>
-            {{$t('auth.login')}}
-          </va-tab>
-          <va-tab>
-            {{$t('auth.createNewAccount')}}
-          </va-tab>
+          <va-tab>{{ $t('auth.login') }}</va-tab>
+          <va-tab>{{ $t('auth.createNewAccount') }}</va-tab>
         </va-tabs>
+
         <va-separator/>
 
-        <div class="auth-layout__form">
+        <div class="pa-3">
           <router-view/>
         </div>
       </va-card>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -66,37 +67,10 @@ export default {
 .auth-layout {
   min-height: 100vh;
   background-image: linear-gradient(to right, #0e4ac4, #002c85);
-  padding: 1rem;
 
   &__card {
-    height: 30rem;
-    @include media-breakpoint-down(xs) {
-      width: 100%;
-    }
-  }
-
-  &__form {
-    padding: .875rem 0 0;
-    @include media-breakpoint-up(sm) {
-      padding: 2.875rem 3.75rem .625rem;
-      width: 30rem;
-    }
-  }
-
-  &__container {
-    height: $auth-logo-height;
-    width: 100%;
-    margin-bottom: 5.625rem;
-  }
-
-  &__logo {
-    height: 100%;
     width: 100%;
-    margin-bottom: 5.625rem;
-  }
-
-  @include media-breakpoint-down(sm) {
-    padding-top: 6%;
+    max-width: 600px;
   }
 }
 </style>
diff --git a/src/components/auth/login/Login.vue b/src/components/auth/login/Login.vue
index dafe87a42..7e777eb47 100644
--- a/src/components/auth/login/Login.vue
+++ b/src/components/auth/login/Login.vue
@@ -1,31 +1,30 @@
 <template>
-  <form class="login" @submit.prevent="onsubmit">
-      <va-input
-        class="mb-2"
-        v-model="email"
-        type="email"
-        :label="$t('auth.email')"
-        :error="!!emailErrors.length"
-        :error-messages="emailErrors"
-      />
-    <div>
-      <va-input
-        class="mb-2"
-        v-model="password"
-        type="password"
-        :label="$t('auth.password')"
-        :error="!!passwordErrors.length"
-        :error-messages="passwordErrors"
-      />
-    </div>
-    <div class="d-flex align--center justify--space-between mb-4">
-      <va-checkbox v-model="keepLoggedIn" class="mb-0" :label="$t('auth.keep_logged_in')"/>
-      <router-link class="ml-1" :to="{name: 'recover-password'}">{{$t('auth.recover_password')}}</router-link>
-    </div>
-    <div class="flex-center">
-      <va-button type="submit" class="my-0">{{ $t('auth.login') }}</va-button>
-    </div>
-  </form>
+<form @submit.prevent="onsubmit">
+  <va-input
+    v-model="email"
+    type="email"
+    :label="$t('auth.email')"
+    :error="!!emailErrors.length"
+    :error-messages="emailErrors"
+  />
+
+  <va-input
+    v-model="password"
+    type="password"
+    :label="$t('auth.password')"
+    :error="!!passwordErrors.length"
+    :error-messages="passwordErrors"
+  />
+
+  <div class="d-flex align--center justify--space-between">
+    <va-checkbox v-model="keepLoggedIn" class="mb-0" :label="$t('auth.keep_logged_in')"/>
+    <router-link class="ml-1 link" :to="{name: 'recover-password'}">{{$t('auth.recover_password')}}</router-link>
+  </div>
+
+  <div class="d-flex justify--center mt-3">
+    <va-button type="submit" class="my-0">{{ $t('auth.login') }}</va-button>
+  </div>
+</form>
 </template>
 
 <script>
@@ -59,7 +58,5 @@ export default {
 </script>
 
 <style lang="scss">
-.login {
-
-}
+@import '../../../vuestic-theme/vuestic-sass/resources/resources';
 </style>
diff --git a/src/components/auth/signup/Signup.vue b/src/components/auth/signup/Signup.vue
index 50c078fb3..aaec96c26 100644
--- a/src/components/auth/signup/Signup.vue
+++ b/src/components/auth/signup/Signup.vue
@@ -1,41 +1,42 @@
 <template>
-  <form class="signup" @submit.prevent="onsubmit()">
-    <va-input
-      class="mb-4"
-      v-model="email"
-      type="email"
-      :label="$t('auth.email')"
-      :error="!!emailErrors.length"
-      :error-messages="emailErrors"
-    />
-    <va-input
-      class="mb-4"
-      v-model="password"
-      type="password"
-      :label="$t('auth.password')"
-      :error="!!passwordErrors.length"
-      :error-messages="passwordErrors"
-    />
-    <div class="d-flex align--center justify--space-between mb-4">
-      <va-checkbox
-        v-model="agreedToTerms"
-        class="mb-0"
-        :error="!!agreedToTermsErrors.length"
-        :errorMessages="agreedToTermsErrors"
-      >
-        <template slot="label">
-          {{ $t('auth.agree') }}
-          <span class="link">{{ $t('auth.termsOfUse') }}</span>
-        </template>
-      </va-checkbox>
-      <router-link class="ml-1 link" :to="{name: 'recover-password'}">
-        {{$t('auth.recover_password')}}
-      </router-link>
-    </div>
-    <div class="flex-center">
-      <va-button type="submit" class="my-0">{{ $t('auth.sign_up') }}</va-button>
-    </div>
-  </form>
+<form @submit.prevent="onsubmit()">
+  <va-input
+    v-model="email"
+    type="email"
+    :label="$t('auth.email')"
+    :error="!!emailErrors.length"
+    :error-messages="emailErrors"
+  />
+
+  <va-input
+    v-model="password"
+    type="password"
+    :label="$t('auth.password')"
+    :error="!!passwordErrors.length"
+    :error-messages="passwordErrors"
+  />
+
+  <div class="d-flex align--center justify--space-between">
+    <va-checkbox
+      v-model="agreedToTerms"
+      class="mb-0"
+      :error="!!agreedToTermsErrors.length"
+      :errorMessages="agreedToTermsErrors"
+    >
+      <template slot="label">
+        {{ $t('auth.agree') }}
+        <span class="link">{{ $t('auth.termsOfUse') }}</span>
+      </template>
+    </va-checkbox>
+    <router-link class="ml-1 link" :to="{name: 'recover-password'}">
+      {{$t('auth.recover_password')}}
+    </router-link>
+  </div>
+
+  <div class="d-flex justify--center mt-3">
+    <va-button type="submit" class="my-0">{{ $t('auth.sign_up') }}</va-button>
+  </div>
+</form>
 </template>
 
 <script>
@@ -76,8 +77,4 @@ export default {
 
 <style lang="scss">
 @import '../../../vuestic-theme/vuestic-sass/resources/resources';
-
-.login {
-
-}
 </style>
diff --git a/src/components/dashboard/DashboardInfoBlock.vue b/src/components/dashboard/DashboardInfoBlock.vue
index d28bb26f9..ba06e79d4 100644
--- a/src/components/dashboard/DashboardInfoBlock.vue
+++ b/src/components/dashboard/DashboardInfoBlock.vue
@@ -3,7 +3,7 @@
     <div class="flex xl6 xs12">
       <div class="row">
         <div
-          class="flex xs4"
+          class="flex xs12 sm4"
           v-for="(info, idx) in infoTiles"
           :key="idx"
         >
diff --git a/src/components/dashboard/dashboard-tabs/OverviewTab.vue b/src/components/dashboard/dashboard-tabs/OverviewTab.vue
index d6f1c832b..7dbac8894 100644
--- a/src/components/dashboard/dashboard-tabs/OverviewTab.vue
+++ b/src/components/dashboard/dashboard-tabs/OverviewTab.vue
@@ -1,100 +1,104 @@
-<template>
-  <div class="overview-tab pt-2">
-    <div class="row">
-      <div class="flex xs12 md6">
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-vue/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.built')}}
-          </div>
-        </div>
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-free/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.free')}}
-          </div>
-        </div>
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-fresh/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.fresh')}}
-          </div>
-        </div>
-      </div>
-
-      <div class="flex xs12 md6">
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-responsive/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.mobile')}}
-          </div>
-        </div>
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-rich/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.components')}}
-          </div>
-        </div>
-        <div class="features-tab__item d-flex align--center mb-5">
-          <div class="features-tab__item-icon flex-center fill-height mr-2">
-            <va-icon-clean-code/>
-          </div>
-          <div class="text--bold">
-            {{$t('dashboard.tabs.overview.nojQuery')}}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import VaIconVue
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue'
-import VaIconFree
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree'
-import VaIconFresh
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh'
-import VaIconResponsive
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive'
-import VaIconRich
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich'
-import VaIconCleanCode
-  from '@/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode'
-
-export default {
-  name: 'overview-tab',
-  components: {
-    VaIconVue,
-    VaIconFree,
-    VaIconFresh,
-    VaIconResponsive,
-    VaIconRich,
-    VaIconCleanCode,
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-  .overview-tab {
-    &__item {
-      height: 55px;
-      font-size: 1.25rem;
-
-      &-icon {
-        min-width: 65px;
-        max-width: 65px;
-      }
-    }
-  }
-</style>
+<template>
+  <div class="overview-tab pt-2 layout">
+    <div class="mb-2"></div>
+    <div class="row">
+      <div class="flex xs12 xl6 mb-5">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-vue/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.built')}}</div>
+        </div>
+      </div>
+
+      <div class="flex xs12 xl6 mb-5">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-responsive/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.mobile')}}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="flex xs12 xl6 mb-5">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-free/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.free')}}</div>
+        </div>
+      </div>
+
+      <div class="flex xs12 xl6 mb-5">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-rich/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.components')}}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="flex xs12 xl6 mb-5">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-fresh/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.fresh')}}</div>
+        </div>
+      </div>
+
+      <div class="flex xs12 xl6">
+        <div class="overview-tab__item d-flex align--center">
+          <div class="overview-tab__item-icon fill-height mr-2">
+            <va-icon-clean-code/>
+          </div>
+          <div class="text--bold">{{$t('dashboard.tabs.overview.nojQuery')}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VaIconVue
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue.vue'
+import VaIconFree
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree.vue'
+import VaIconFresh
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh.vue'
+import VaIconResponsive
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive.vue'
+import VaIconRich
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich.vue'
+import VaIconCleanCode
+  from '../../../vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode.vue'
+
+export default {
+  name: 'overview-tab',
+  components: {
+    VaIconCleanCode,
+    VaIconRich,
+    VaIconResponsive,
+    VaIconFresh,
+    VaIconFree,
+    VaIconVue,
+  },
+}
+</script>
+
+<style lang="scss">
+.overview-tab {
+  &__item {
+    height: 55px;
+
+    &-icon {
+      min-width: 65px;
+      max-width: 65px;
+    }
+  }
+}
+</style>
diff --git a/src/components/data-tables/scenarios/DataTableFilter.vue b/src/components/data-tables/scenarios/DataTableFilter.vue
index 58a6d6fe8..d0c38605e 100644
--- a/src/components/data-tables/scenarios/DataTableFilter.vue
+++ b/src/components/data-tables/scenarios/DataTableFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card :title="$t('tables.searchTrendsBadges')">
     <div class="row align--center">
-      <div class="flex">
+      <div class="flex xs12 md6">
         <va-input
           :value="term"
           :placeholder="$t('tables.searchByName')"
@@ -12,25 +12,20 @@
         </va-input>
       </div>
 
-      <div class="spacer" />
+      <div class="flex xs12 md3 offset--md3">
 
-      <div class="flex">
-        <span style="marginRight: 4px">
-          {{ $t('tables.perPage') }}
-        </span>
-
-        <select v-model.number="perPage">
-          <option v-for="option in perPageOptions" :key="option">
-            {{ option }}
-          </option>
-        </select>
+        <va-select
+          v-model="perPage"
+          :label="$t('tables.perPage')"
+          :options="perPageOptions"
+        />
       </div>
     </div>
 
     <va-data-table
       :fields="fields"
       :data="filteredData"
-      :per-page="perPage"
+      :per-page="parseInt(perPage)"
       @row-clicked="showUser"
       clickable
     >
@@ -61,8 +56,8 @@ export default {
   data () {
     return {
       term: null,
-      perPage: 6,
-      perPageOptions: [4, 6, 10, 20],
+      perPage: '6',
+      perPageOptions: ['4', '6', '10', '20'],
       users: users,
     }
   },
@@ -132,6 +127,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/data-tables/scenarios/DataTableSelect.vue b/src/components/data-tables/scenarios/DataTableSelect.vue
index d6176dad2..eb2af5fe1 100644
--- a/src/components/data-tables/scenarios/DataTableSelect.vue
+++ b/src/components/data-tables/scenarios/DataTableSelect.vue
@@ -16,9 +16,9 @@
       </template>
     </va-data-table>
 
-    <small>
-      {{ $t('tables.selected') }}: {{ selected }}
-    </small>
+    <p v-if="selected.length">
+      {{ $t('tables.selected') }}: {{ selected.map(user => user.fullName).join(", ") }}.
+    </p>
   </va-card>
 </template>
 
diff --git a/src/components/forms/form-elements/FormElements.vue b/src/components/forms/form-elements/FormElements.vue
index 829cde634..35a714e99 100644
--- a/src/components/forms/form-elements/FormElements.vue
+++ b/src/components/forms/form-elements/FormElements.vue
@@ -19,7 +19,7 @@
                   <va-icon
                     slot="prepend"
                     color="gray"
-                    icon="fa fa-envelope-o"
+                    name="fa fa-envelope-o"
                   />
                 </va-input>
               </div>
@@ -28,7 +28,7 @@
                   v-model="empty"
                   placeholder="Input With Button"
                 >
-                  <va-button style="margin-right: 0;" small>
+                  <va-button slot="append" style="margin-right: 0;" small>
                     UPLOAD
                   </va-button>
                 </va-input>
diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue
index e8b2546f6..9fcd6c42a 100644
--- a/src/components/statistics/progress-bars/ProgressBars.vue
+++ b/src/components/statistics/progress-bars/ProgressBars.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="progress-bars">
     <div class="row">
-      <div class="flex md12 xs12">
+      <div class="flex xs12">
         <horizontal-bars/>
       </div>
     </div>
     <div class="row">
-      <div class="flex md12 xs12">
+      <div class="flex xs12">
         <circle-bars/>
       </div>
     </div>
     <div class="row">
-      <div class="flex md12 xs12">
+      <div class="flex xs12">
         <colorful-bars/>
       </div>
     </div>
diff --git a/src/components/statistics/progress-bars/Widgets/CircleBars.vue b/src/components/statistics/progress-bars/Widgets/CircleBars.vue
index 89b0a3f2a..19c6a7163 100644
--- a/src/components/statistics/progress-bars/Widgets/CircleBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/CircleBars.vue
@@ -1,22 +1,39 @@
 <template>
   <va-card
-    class="circle-bars progress-bar-widget"
+    class="circle-bars"
     :title="$t('progressBars.circle')"
   >
     <div class="row">
-      <div v-for="n in 10" :key="n" class="flex xs2 md1">
-        <va-progress-circle :value="value * n / 10"/>
+      <div v-for="n in 10" :key="n" class="flex xs4 sm2 lg1">
+        <div class="d-flex justify--center">
+          <div>
+            <va-progress-circle :value="value * n / 10"/>
+          </div>
+        </div>
       </div>
-      <div class="flex xs2 md1">
-        <va-progress-circle indeterminate/>
+      <div class="flex xs4 sm2 lg1">
+        <div class="d-flex justify--center">
+          <div>
+            <va-progress-circle indeterminate/>
+          </div>
+        </div>
       </div>
     </div>
+
     <div class="row">
-      <div v-for="n in 10" :key="n" class="flex xs2 md1">
-        <va-progress-circle :value="value * n / 10">{{ value * n / 10 }}%</va-progress-circle>
+      <div v-for="n in 10" :key="n" class="flex xs4 sm2 lg1">
+        <div class="d-flex justify--center">
+          <div>
+            <va-progress-circle :value="value * n / 10">{{ value * n / 10 }}%</va-progress-circle>
+          </div>
+        </div>
       </div>
-      <div class="flex xs2 md1">
-        <va-progress-circle indeterminate/>
+      <div class="flex xs4 sm2 lg1">
+        <div class="d-flex justify--center">
+          <div>
+            <va-progress-circle indeterminate/>
+          </div>
+        </div>
       </div>
     </div>
   </va-card>
@@ -24,6 +41,7 @@
 
 <script>
 export default {
+  name: 'circle-bars',
   data () {
     return {
       value: 0,
diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
index d8be47f8a..3710e68f4 100644
--- a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     class="colorful-bars progress-bar-widget"
-    :title="$t('progressBars.ColorThemePlugin.js')"
+    :title="$t('progressBars.colors')"
   >
     <div class="row">
       <div v-for="n in 3" :key="n" class="flex md3 xs12">
diff --git a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
index 0f314b9ec..a4063d88f 100644
--- a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
+++ b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue
@@ -1,6 +1,6 @@
 <template>
   <va-card
-    class="horizontal-bars progress-bar-widget"
+    class="horizontal-bars"
     :title="$t('progressBars.horizontal')"
   >
     <div class="row">
@@ -34,6 +34,7 @@
 
 <script>
 export default {
+  name: 'horizontal-bars',
   data () {
     return {
       value: 0,
diff --git a/src/components/ui/buttons/Buttons.vue b/src/components/ui/buttons/Buttons.vue
index 6abb95e44..83a321b90 100644
--- a/src/components/ui/buttons/Buttons.vue
+++ b/src/components/ui/buttons/Buttons.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="buttons">
     <div class="row">
-      <div class="flex md12 xl12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.types')"
@@ -19,7 +19,7 @@
         </va-card>
       </div>
 
-      <div class="flex md12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.size')"
@@ -34,7 +34,7 @@
         </va-card>
       </div>
 
-      <div class="flex md12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.tags')"
@@ -57,7 +57,7 @@
         </va-card>
       </div>
 
-      <div class="flex md12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.advanced')"
@@ -77,7 +77,7 @@
         </va-card>
       </div>
 
-      <div class="flex md12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.ColorThemePlugin.js')"
@@ -115,27 +115,27 @@
         </va-card>
       </div>
 
-      <div class="flex md12 xl12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.buttonGroups')"
         >
           <div class="row">
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button large> One</va-button>
                 <va-button large> Two</va-button>
                 <va-button large> Three</va-button>
               </va-button-group>
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button outline small color="danger" icon="maki maki-art-gallery"> First</va-button>
                 <va-button outline small color="danger"> Second</va-button>
                 <va-button outline small color="danger"> Third</va-button>
               </va-button-group>
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button flat color="gray" icon="glyphicon glyphicon-envelope">
                   First
@@ -144,7 +144,7 @@
                 <va-button flat color="gray" icon="ion ion-ios-alarm"> Third</va-button>
               </va-button-group>
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button color="dark"> One</va-button>
                 <va-button color="dark"> Two</va-button>
@@ -152,14 +152,14 @@
                 <va-button color="dark" icon="ion-ios-arrow-down arrow-down"/>
               </va-button-group>
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button outline large color="info"> First</va-button>
                 <va-button outline large color="info" icon-right="glyphicon glyphicon-pencil"> Second</va-button>
                 <va-button outline large color="info"> Third</va-button>
               </va-button-group>
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-button-group>
                 <va-button flat small color="warning" icon="glyphicon glyphicon-envelope"/>
                 <va-button flat small color="warning" icon="entypo entypo-user"/>
@@ -170,43 +170,43 @@
         </va-card>
       </div>
 
-      <div class="flex md12 xl12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.buttonToggles')"
         >
           <div class="row">
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 v-model="model" :options="options"
                 toggle-color="warning"
               />
             </div>
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 outline v-model="model" :options="options"
                 color="danger" toggle-color="info"
               />
             </div>
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 flat v-model="model" :options="options"
                 color="gray" toggle-color="success"
               />
             </div>
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 v-model="model" :options="options"
                 color="dark" toggle-color="danger"
               />
             </div>
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 outline v-model="model" :options="options"
                 color="info" toggle-color="gray"
               />
             </div>
-            <div class="flex xs12 md6 lg6">
+            <div class="flex xs12 lg6">
               <va-button-toggle
                 flat v-model="model" :options="options"
                 color="warning" toggle-color="dark"
@@ -216,20 +216,20 @@
         </va-card>
       </div>
 
-      <div class="flex md12 xl12">
+      <div class="flex xs12">
         <va-card
           class="larger-padding"
           :title="$t('buttons.pagination')"
         >
           <div class="row">
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-pagination
                 v-model="activePage"
                 :visible-pages="3"
                 :pages="20"
               />
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-pagination
                 v-model="activePage"
                 :visible-pages="4"
@@ -237,14 +237,14 @@
                 color="danger"
               />
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-pagination
                 v-model="activePage"
                 :pages="5"
                 disabled
               />
             </div>
-            <div class="flex xs12 lg12 xl6">
+            <div class="flex xs12 xl6">
               <va-pagination
                 v-model="activePage"
                 :pages="10"
diff --git a/src/components/ui/chat/Chat.vue b/src/components/ui/chat/Chat.vue
index b33047b73..136ab4962 100644
--- a/src/components/ui/chat/Chat.vue
+++ b/src/components/ui/chat/Chat.vue
@@ -10,6 +10,7 @@
     >
       <div
         class="va-chat__message"
+        :style="{backgroundColor: message.yours ? $themes.primary : undefined}"
         v-for="(message, index) in value"
         :key="index"
         :class="{'va-chat__message--yours': message.yours}"
@@ -131,10 +132,10 @@ $chat-message-br: .875rem;
     }
 
     &--yours {
+      color: white;
       align-self: flex-end;
       border-top-right-radius: 0;
       border-top-left-radius: $chat-message-br;
-      background-color: $brand-primary;
     }
   }
 
diff --git a/src/components/ui/chips/Chips.vue b/src/components/ui/chips/Chips.vue
index 4df23c377..b54cc6d42 100644
--- a/src/components/ui/chips/Chips.vue
+++ b/src/components/ui/chips/Chips.vue
@@ -1,101 +1,67 @@
 <template>
-  <div class="tags">
-    <div class="row">
-      <div class="flex xs12">
-        <va-card :title="$t('chips.chips')">
-          <div class="row mb-3">
-            <va-chip>
-              Success chip
-            </va-chip>
-            <va-chip color="info">
-              Info chip
-            </va-chip>
-            <va-chip color="danger">
-              Danger chip
-            </va-chip>
-            <va-chip color="warning">
-              Warning chip
-            </va-chip>
-            <va-chip color="gray">
-              Gray chip
-            </va-chip>
-            <va-chip color="dark">
-              Dark chip
-            </va-chip>
+<div class="row">
+  <div class="flex xs12">
+    <va-card :title="$t('chips.chips')">
+      <div class="row">
+        <div class="flex xs12">
+          <div class="row mb-2">
+            <va-chip class="ma-2" color="primary">Primary chip</va-chip>
+            <va-chip class="ma-2" color="secondary">Secondary chip</va-chip>
+            <va-chip class="ma-2" color="success">Success chip</va-chip>
+            <va-chip class="ma-2" color="info">Info chip</va-chip>
+            <va-chip class="ma-2" color="danger">Danger chip</va-chip>
+            <va-chip class="ma-2" color="warning">Warning chip</va-chip>
+            <va-chip class="ma-2" color="gray">Gray chip</va-chip>
+            <va-chip class="ma-2" color="dark">Dark chip</va-chip>
           </div>
           <div class="row">
-            <va-chip outline>
-              Success chip
-            </va-chip>
-            <va-chip outline color="info">
-              Info chip
-            </va-chip>
-            <va-chip outline color="danger">
-              Danger chip
-            </va-chip>
-            <va-chip outline color="warning">
-              Warning chip
-            </va-chip>
-            <va-chip outline color="gray">
-              Gray chip
-            </va-chip>
-            <va-chip outline color="dark">
-              Dark chip
-            </va-chip>
+            <va-chip class="ma-2" color="primary" outline>Primary chip</va-chip>
+            <va-chip class="ma-2" color="secondary" outline>Secondary chip</va-chip>
+            <va-chip class="ma-2" color="success" outline>Success chip</va-chip>
+            <va-chip class="ma-2" color="info" outline>Info chip</va-chip>
+            <va-chip class="ma-2" color="danger" outline>Danger chip</va-chip>
+            <va-chip class="ma-2" color="warning" outline>Warning chip</va-chip>
+            <va-chip class="ma-2" color="gray" outline>Gray chip</va-chip>
+            <va-chip class="ma-2" color="dark" outline>Dark chip</va-chip>
           </div>
-        </va-card>
+        </div>
       </div>
+    </va-card>
+  </div>
 
-      <div class="flex xs12">
-        <va-card :title="$t('chips.badges')">
-          <div class="row mb-3">
-            <va-badge>
-              Paid
-            </va-badge>
-            <va-badge color="info">
-              Info
-            </va-badge>
-            <va-badge color="danger">
-              Danger
-            </va-badge>
-            <va-badge color="warning">
-              On Hold
-            </va-badge>
-            <va-badge color="gray">
-              Processing
-            </va-badge>
-            <va-badge color="dark">
-              New Label
-            </va-badge>
+  <div class="flex xs12">
+    <va-card :title="$t('chips.badges')">
+      <div class="row">
+        <div class="flex xs12">
+          <div class="row mb-2">
+            <va-badge class="ma-2" color="primary">Primary badge</va-badge>
+            <va-badge class="ma-2" color="secondary">Secondary badge</va-badge>
+            <va-badge class="ma-2" color="success">Success badge</va-badge>
+            <va-badge class="ma-2" color="info">Info badge</va-badge>
+            <va-badge class="ma-2" color="danger">Danger badge</va-badge>
+            <va-badge class="ma-2" color="warning">Warning badge</va-badge>
+            <va-badge class="ma-2" color="gray">Gray badge</va-badge>
+            <va-badge class="ma-2" color="dark">Dark badge</va-badge>
           </div>
           <div class="row">
-            <va-badge outline>
-              Paid
-            </va-badge>
-            <va-badge outline color="info">
-              Info
-            </va-badge>
-            <va-badge outline color="danger">
-              Danger
-            </va-badge>
-            <va-badge outline color="warning">
-              On Hold
-            </va-badge>
-            <va-badge outline color="gray">
-              Processing
-            </va-badge>
-            <va-badge outline color="dark">
-              New Label
-            </va-badge>
+            <va-badge class="ma-2" color="primary" outline>Primary badge</va-badge>
+            <va-badge class="ma-2" color="secondary" outline>Secondary badge</va-badge>
+            <va-badge class="ma-2" color="success" outline>Success badge</va-badge>
+            <va-badge class="ma-2" color="info" outline>Info badge</va-badge>
+            <va-badge class="ma-2" color="danger" outline>Danger badge</va-badge>
+            <va-badge class="ma-2" color="warning" outline>Warning badge</va-badge>
+            <va-badge class="ma-2" color="gray" outline>Gray badge</va-badge>
+            <va-badge class="ma-2" color="dark" outline>Dark badge</va-badge>
           </div>
-        </va-card>
+        </div>
       </div>
-    </div>
+    </va-card>
   </div>
+</div>
 </template>
 
 <script>
 export default {
-  name: 'tags',
+  name: 'chips',
 }
 </script>
diff --git a/src/components/ui/colors/Colors.vue b/src/components/ui/colors/Colors.vue
index 2683d8090..aa5bef5e7 100644
--- a/src/components/ui/colors/Colors.vue
+++ b/src/components/ui/colors/Colors.vue
@@ -1,7 +1,6 @@
 <template>
-<div class="layout gutter--md">
   <div class="row">
-    <div class="flex md6">
+    <div class="flex xs12 sm6">
       <va-card title="Theme Colors">
         <div
           v-for="(themeColor, index) in themeColors"
@@ -16,7 +15,7 @@
       </va-card>
     </div>
 
-    <div class="flex md6">
+    <div class="flex xs12 sm6">
       <va-card title="Extra Colors">
         <div
           v-for="(extraColor, index) in extraColors"
@@ -31,7 +30,7 @@
       </va-card>
     </div>
 
-    <div class="flex md4">
+    <div class="flex xs12 sm6 lg4">
       <va-card title="Button Gradients">
         <div
           v-for="(buttonGradient, index) in buttonGradients"
@@ -42,13 +41,13 @@
             :variant="['gradient']"
             :name="buttonGradient.name"
             :description="buttonGradient.description"
-            :width="200"
+            :width="150"
           />
         </div>
       </va-card>
     </div>
 
-    <div class="flex md4">
+    <div class="flex xs12 sm6 lg4">
       <va-card title="Hovered Button Gradients">
         <p class="mt-0 mb-2">
           Lighten 15% applied to an original style (gradient or flat color) for hover state.
@@ -62,13 +61,13 @@
             :variant="['gradient', 'hovered']"
             :name="buttonGradient.name"
             :description="buttonGradient.description"
-            :width="200"
+            :width="150"
           />
         </div>
       </va-card>
     </div>
 
-    <div class="flex md4">
+    <div class="flex xs12 sm6 lg4">
       <va-card title="Pressed Button Gradients">
         <p class="mt-0 mb-2">
           Darken 15% applied to an original style (gradient or flat color) for pressed state.
@@ -82,17 +81,17 @@
             :variant="['gradient', 'pressed']"
             :name="buttonGradient.name"
             :description="buttonGradient.description"
-            :width="200"
+            :width="150"
           />
         </div>
       </va-card>
     </div>
   </div>
-</div>
 </template>
 
 <script>
-import VaColorPresentation from '../../../vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation'
+import VaColorPresentation
+  from '../../../vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation'
 import {
   themeColors,
   extraColors,
diff --git a/src/components/ui/icons/IconSet.vue b/src/components/ui/icons/IconSet.vue
index 6f0c2ebd1..c6c6ae7d3 100644
--- a/src/components/ui/icons/IconSet.vue
+++ b/src/components/ui/icons/IconSet.vue
@@ -1,43 +1,56 @@
 <template>
   <div class="icon-set">
-    <va-card class="icon-set__header mb-4 py-3">
+    <va-card class="icon-set__header mb-4 py-3 ma-0">
       <div class="row">
-        <div class="flex md4 xs12 pl-5 icon-set__header__text">
-          <h2 class="my-0">{{ set.name }}</h2>
-          <router-link :to="{ name: 'icon-sets' }">
+        <div class="flex md3 xs12">
+          <h2
+            class="my-0"
+            :style="{ color: this.$themes.dark }"
+          >
+            {{ set.name }}
+          </h2>
+          <router-link :to="{ name: 'icon-sets' }" class="link">
             {{ $t('icons.back') }}
           </router-link>
         </div>
 
-        <div class="flex md4 xs12">
-          <div class="form-group with-icon-left">
-            <div class="input-group">
-              <input
-                v-model="search"
-                id="input-icon-left"
-                name="input-icon-left"
-                required
-              />
+        <div class="flex md5 xs12 flex-center">
+          <va-input
+            v-model="search"
+            :label="$t('icons.search')"
+            class="mb-0"
+            style="max-width: 300px"
+            removable
+            required
+          >
+            <template slot="prepend">
               <va-icon name="fa fa-search icon-left input-icon"/>
-              <label class="control-label" for="input-icon-left">
-                {{ $t('icons.search') }}
-              </label>
-              <va-icon name="bar"/>
-            </div>
-          </div>
+            </template>
+          </va-input>
         </div>
 
-        <div class="d-flex flex align--center md4 xs12 px-4 vuestic-icon-set__header__range">
-          <h4 class="ma-2 shrink">A</h4>
+        <div class="flex md4 xs12 ma-0 flex-center content icon-set__header__size">
+          <span
+            class="ma-2 pr-1 shrink icon-set__header__size--smaller"
+            :style="{ color: this.$themes.dark }"
+          >
+            A
+          </span>
           <va-slider
             value-visible
             v-model="iconSize"
+            style="max-width: 300px"
             :label-value="`${iconSize}px`"
             :min="slider.min"
             :max="slider.max"
           >
           </va-slider>
-          <h2 class="ma-2 shrink">A</h2>
+          <span
+            class="ma-2 pl-1 shrink icon-set__header__size--bigger"
+            :style="{ color: this.$themes.dark }"
+          >
+            A
+          </span>
         </div>
       </div>
     </va-card>
@@ -150,5 +163,23 @@ export default {
       font-size: .6rem;
     }
   }
+
+  &__header {
+    &__size {
+      &--smaller, &--bigger {
+        font-weight: 600;
+      }
+
+      &--smaller {
+        line-height: 1em;
+        font-size: 1em;
+      }
+
+      &--bigger {
+        line-height: 1.3em;
+        font-size: 1.3em;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue
index c6a06d9de..2c1c69a25 100644
--- a/src/components/ui/notifications/Notifications.vue
+++ b/src/components/ui/notifications/Notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
     <div class="row">
-      <div class="flex md12">
+      <div class="flex xs12">
         <va-card :title="$t('notificationsPage.notifications.title')">
           <div class="mb-3">
             <va-notification closeable>
@@ -60,77 +60,45 @@
         <va-card :title="$t('notificationsPage.toasts.title')">
           <div class="row">
             <div class="flex xs12 md6">
-              <fieldset>
-                <div class="form-group">
-                  <div class="input-group">
-                    <input
-                      id="toast-text"
-                      class="control-input"
-                      v-model="toastText"
-                      required
-                    />
-                    <label class="control-label" for="toast-text" :style="{color: this.$themes.primary}">
-                      {{ $t('notificationsPage.toasts.textLabel') }}
-                    </label>
-                    <va-icon name="bar"/>
-                  </div>
-                </div>
-                <div class="form-group">
-                  <div class="input-group">
-                    <input
-                      id="toast-duration"
-                      class="control-input"
-                      type="number"
-                      v-model="toastDuration" required
-                    />
-                    <label class="control-label" for="toast-duration" :style="{color: this.$themes.primary}">
-                      {{ $t('notificationsPage.toasts.durationLabel') }}
-                    </label>
-                    <va-icon name="bar"/>
-                  </div>
-                </div>
-                <div class="form-group">
-                  <div class="input-group">
-                    <input
-                      id="toast-icon"
-                      class="control-input"
-                      v-model="toastIcon"
-                      required
-                    />
-                    <label class="control-label" for="toast-icon" :style="{color: this.$themes.primary}">
-                      {{ $t('notificationsPage.toasts.iconLabel') }}
-                    </label>
-                    <va-icon name="bar"/>
-                  </div>
-                </div>
-                <!-- TODO Redo with global classes -->
-                <div class="form-group row mb-4">
+              <va-input
+                v-model="toastText"
+                :label="$t('notificationsPage.toasts.textLabel')"
+                class="control-input"
+                required
+              />
+              <va-input
+                v-model="toastDuration"
+                type="number"
+                :label="$t('notificationsPage.toasts.durationLabel')"
+                class="control-input"
+                required
+              />
+              <va-input
+                v-model="toastIcon"
+                :label="$t('notificationsPage.toasts.iconLabel')"
+                class="control-input mb-0"
+                required
+              />
+            </div>
+            <div class="flex xs12 md6">
+              <div class="row">
+                <div class="flex xs12">
                   <toast-position-picker v-model="toastPosition"/>
+                </div>
+                <div class="flex xs12">
                   <va-checkbox
                     :label="$t('notificationsPage.toasts.fullWidthLabel')"
                     :id="'toast-fullwidth'"
                     v-model="isToastFullWidth"
                   />
                 </div>
-                <va-button color="primary" slot="trigger" @click="launchToast">
-                  {{ $t('notificationsPage.toasts.launchToast') }}
-                </va-button>
-              </fieldset>
-              <br>
-              <br>
-              <br>
-            </div>
-            <div class="flex xs12 md6 flex-center">
-              <div
-                v-if="isToastContentPresent"
-                class="toasted-container sample-toasted-container shrink"
-              >
-                <div class="toasted vuestic-toast none default">
-                  <va-icon v-if="toastIcon" :icon="['fa', toastIcon]"/>
-                  {{toastText}}
-                </div>
               </div>
             </div>
+            <div class="flex xs12">
+              <va-button class="ma-0" color="primary" slot="trigger" @click="launchToast">
+                {{ $t('notificationsPage.toasts.launchToast') }}
+              </va-button>
+            </div>
           </div>
         </va-card>
       </div>
@@ -173,9 +141,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.control-input:invalid:not(:focus) + .control-label {
-  color: #b3b3b3 !important;
-}
-</style>
diff --git a/src/components/ui/spinners/Spinners.vue b/src/components/ui/spinners/Spinners.vue
index 46f493968..21e3ad85b 100644
--- a/src/components/ui/spinners/Spinners.vue
+++ b/src/components/ui/spinners/Spinners.vue
@@ -1,83 +1,69 @@
 <template>
-  <div class="row spinners">
-    <div class="flex md12 xs12">
-      <va-card
-        :title="$t('spinners.title')"
-        class="spinners__widget"
+<div class="spinners">
+  <va-card :title="$t('spinners.title')">
+    <div class="row">
+      <div class="d-flex flex xs12 sm12 md6 lg3 align--center">
+        <span class="shrink pr-3 spinners__size-smaller">A</span>
+        <va-slider
+          value-visible
+          v-model="config.size"
+          :label-value="`${config.size}px`"
+          :min="sliderSize.min"
+          :max="sliderSize.max"
+        />
+        <span class="shrink pl-3 spinners__size-bigger">A</span>
+      </div>
+
+      <div class="d-flex flex xs12 sm12 md6 lg3 align--center">
+        <va-icon-slower class="shrink pr-3 spinners__duration-slower"/>
+        <va-slider
+          value-visible
+          v-model="currentDuration"
+          :min="sliderDuration.min"
+          :max="sliderDuration.max"
+        />
+        <va-icon-faster class="shrink pl-3 spinners__duration-faster"/>
+      </div>
+
+      <div class="d-flex flex justify--center xs12 sm12 md12 lg6">
+        <va-palette-custom
+          :palette="paletteArray"
+          v-model="spinnersColor"
+          class="justify--center"
+        />
+      </div>
+    </div>
+
+    <div class="content">
+      <hr class="separator">
+    </div>
+
+    <div
+      v-for="(group, i) in groups"
+      :key="i"
+      class="row"
+    >
+      <div
+        v-for="item in group"
+        :key="item"
+        class="flex sm6 lg3"
       >
-        <div class="spinners__customization">
-          <div class="row">
-            <div class="flex xs12 md4">
-              <div class="row spinners__size justify--center ma-0">
-                <h5 class="mt-2 ml-4 mr-3">A</h5>
-                <div class="spinners__size-picker pt-3">
-                  <va-slider
-                    value-visible
-                    v-model="config.size"
-                    :label-value="`${config.size}px`"
-                    :min="sliderSize.min"
-                    :max="sliderSize.max"/>
-                </div>
-                <h3 class="mt-1 ml-3">A</h3>
-              </div>
-            </div>
-            <div class="flex xs12 md4">
-              <div class="row spinners__duration justify--center ma-0">
-                <div class="spinners__icon-duration-slower mt-1 mr-3">
-                  <va-icon-slower/>
-                </div>
-                <div class="spinners__duration-picker pt-3">
-                  <va-slider
-                    value-visible
-                    v-model="currentDuration"
-                    :min="sliderDuration.min"
-                    :max="sliderDuration.max"
-                  />
-                </div>
-                <div class="spinners__icon-duration-faster mt-1 ml-3">
-                  <va-icon-faster/>
-                </div>
-              </div>
-            </div>
-            <div class="flex xs12 md4 spinners__color">
-              <va-palette-custom
-                :palette="paletteArray"
-                v-model="spinnersColor"
-                class="spinners__color-picker"
-              />
-            </div>
-          </div>
-          <div class="row">
-            <div class="spinners__divider-copy"/>
+        <div class="text--center pb-4">
+          <div class="flex-center spinner-box">
+            <component
+              :animation-duration="speed"
+              :is="item"
+              :color="spinnersColor"
+              :size="config.size"
+            >
+            </component>
           </div>
+          <div>{{ $t(item) }}</div>
         </div>
-        <div v-for="(group, i) in groups" :key="i" class="row">
-          <div v-for="item in group" :key="item" class="flex xs6 md3">
-            <div class="spinner-box-container text--center pb-5">
-              <div class="spinner-box flex-center">
-                <component
-                  :animation-duration="speed"
-                  :is="item"
-                  :color="spinnersColor"
-                  :size="config.size"
-                >
-                </component>
-              </div>
-              <div>{{ $t(item) }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="row justify--center align-center">
-          <div class="text-center">
-            {{ $t('spinners.poweredBy') }}
-            <a :href="'http://epic-spinners.epicmax.co/'" target="_blank">Epic
-              Spinners
-            </a>
-          </div>
-        </div>
-      </va-card>
+      </div>
     </div>
-  </div>
+  </va-card>
+</div>
 </template>
 
 <script>
@@ -156,40 +142,31 @@ export default {
 </script>
 
 <style lang="scss">
-
 .spinners {
-  @include media-breakpoint-down(xs) {
-
-    &__color-picker {
-      .va-color-dropdown__content {
-        right: 40px;
-      }
+  &__size {
+    &-smaller, &-bigger {
+      width: 40px;
+      text-align: center;
+      font-weight: 600;
     }
-  }
-
-  &__size, &__duration {
-    // not sure, maybe it's better to include this into @no-wrap mixin?
-    flex-wrap: nowrap;
-  }
 
-  &__size-picker {
-    object-fit: contain;
-    width: 136px;
-  }
+    &-smaller {
+      font-size: 1rem;
+    }
 
-  &__duration-picker {
-    width: 136px;
+    &-bigger {
+      font-size: 1.3rem;
+    }
   }
 
-  &__divider-copy {
-    width: 1700px;
-    height: 2px;
-    background-color: $light-gray;
+  &__duration {
+    &-slower, &-faster {
+      transform: translateY(-1px);
+    }
   }
 
   .spinner-box {
-    height: 140px;
-    flex-direction: column;
+    height: 140px
   }
 }
 </style>
diff --git a/src/components/ui/tree-view/TreeViewEditablePreview.vue b/src/components/ui/tree-view/TreeViewEditablePreview.vue
index dba966778..820153645 100644
--- a/src/components/ui/tree-view/TreeViewEditablePreview.vue
+++ b/src/components/ui/tree-view/TreeViewEditablePreview.vue
@@ -3,25 +3,24 @@
 
     <va-tree-category label="Electronics">
       <va-tree-node v-for="electronic in electronics" :key="electronic.id">
-        <div class="form-group">
-          <div class="input-group">
-            <input v-model="electronic.name">
-            <va-icon name="bar"/>
-          </div>
-        </div>
+        <va-input v-model="electronic.name" class="mb-0"/>
       </va-tree-node>
     </va-tree-category>
 
     <va-tree-category isOpen label="Products">
-      <va-tree-node v-for="product in products" :key="product.id">
-        <div class="form-group">
-          <div class="input-group">
-            <input v-model="product.name">
-            <va-icon name="bar"/>
-          </div>
-        </div>
-        <div slot="iconRight" class="icon" @click="removeProduct(product)">
-          <span aria-hidden="true" class="ion ion-md-close"/>
+      <va-tree-node
+        v-for="product in products"
+        :key="product.id"
+      >
+        <div class="flex row align--center">
+          <va-input v-model="product.name" class="mb-0"/>
+          <va-icon
+            name="ion ion-md-close"
+            color="info"
+            class="ml-2 pa-1 shrink"
+            style="cursor: pointer;"
+            @click.native="removeProduct(product)"
+          />
         </div>
       </va-tree-node>
       <va-tree-node>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6a7bbff5b..7508c9b48 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -446,6 +446,11 @@
   "chat": {
     "title": "Chat"
   },
+  "spacingPlayground": {
+    "value": "Value",
+    "margin": "Margin",
+    "padding": "Padding"
+  },
   "cards": {
     "cards": "Cards",
     "fixed": "Fixed",
diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaColorInput.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaColorInput.vue
index fdf885890..8cb0ec245 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaColorInput.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-picker/VaColorInput.vue
@@ -1,23 +1,17 @@
 <template>
   <div class="va-color-input">
     <color-dot
-      class="va-color-input__dot flex-center"
+      class="va-color-input__dot"
       :selected="selected"
       :color="value"
       @click="onClick"
     />
-    <div class="form-group">
-      <div class="input-group">
-        <input
-          class="va-color-input__input"
-          :disabled="disabled"
-          v-model="valueProxy"
-          :class="{'va-color-input__input__pointer': disabled}"
-          placeholder="input color"
-        >
-        <va-icon name="bar" :style="'width: ' + 9 + 'ch'"/>
-      </div>
-    </div>
+    <va-input
+      class="va-color-input__input"
+      v-model="valueProxy"
+      :disabled="disabled"
+      placeholder="input color"
+    />
   </div>
 </template>
 
@@ -65,17 +59,18 @@ export default {
 <style lang="scss" scoped>
 .va-color-input {
   display: flex;
+  align-items: center !important;
 
   .form-group {
     margin-bottom: 0;
   }
 
   &__dot {
-    margin-top: 7px;
-    margin-right: 8px;
+    margin-right: 0.5rem;
   }
 
   &__input {
+    margin-bottom: 0;
     width: 9ch;
 
     &__pointer {
diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
index 17e57ff6d..e7c5cb3e6 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
@@ -59,9 +59,6 @@ export default {
 <style lang="scss">
 .va-palette-custom {
   display: flex;
-
-  &__input {
-    float: right;
-  }
+  align-items: baseline !important;
 }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation.vue b/src/vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation.vue
index 15c59e85f..25491d6ff 100644
--- a/src/vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-presentation/VaColorPresentation.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="va-color-presentation">
-    <va-popover
-      color="info"
-      :placement="popoverOptions.placement"
-      :message="popoverOptions.content"
-    >
-      <div
-        class="va-color-presentation__color"
-        :style="computedStyle"
-        @click="colorCopy(), notify()">
-      </div>
-    </va-popover>
-    <div class="va-color-presentation__description" v-if="name || description">
-      <div class="va-color-presentation__name">{{name}}</div>
-      <div class="va-color-presentation__text">{{description}}</div>
+<div class="va-color-presentation">
+  <va-popover
+    color="info"
+    :placement="popoverOptions.placement"
+    :message="popoverOptions.content"
+  >
+    <div
+      class="va-color-presentation__color"
+      :style="computedStyle"
+      @click="colorCopy(), notify()">
     </div>
+  </va-popover>
+
+  <div class="va-color-presentation__description" v-if="name || description">
+    <div class="va-color-presentation__name">{{name}}</div>
+    <div class="va-color-presentation__text">{{description}}</div>
   </div>
+</div>
 </template>
 
 <script>
@@ -42,7 +43,6 @@ export default {
     },
     width: {
       type: Number,
-      default: 40,
     },
     name: {
       type: String,
@@ -56,7 +56,7 @@ export default {
   data () {
     return {
       popoverOptions: {
-        content: 'Click to copy color to clipboard',
+        content: 'Click to copy the color to clipboard',
         placement: 'right',
       },
     }
@@ -79,7 +79,7 @@ export default {
       return {
         background: calcBackground(),
         filter: calcFilter(),
-        width: `${this.width}px`,
+        width: this.width ? `${this.width}px` : '',
       }
     },
   },
@@ -107,21 +107,27 @@ export default {
 
 .va-color-presentation {
   display: flex;
-  margin-bottom: 16px;
+  align-items: center;
+  margin-bottom: 1.125rem;
+
+  .v-popover {
+    width: 40px;
+    height: 40px;
 
-  // can't reach it anyhow else because it's controlled by a plugin
-  span {
-    outline: none !important;
+    span {
+      outline: none !important;
+    }
   }
 
   &__color {
     height: 40px;
-    margin-right: 0.5rem;
+    width: 40px;
+    margin-right: 1rem;
     cursor: pointer;
   }
 
   &__description {
-    margin-left: 8px;
+    margin-left: 1rem;
   }
 
   &__name {
diff --git a/src/vuestic-theme/vuestic-components/va-data-table/VaDataTable.vue b/src/vuestic-theme/vuestic-components/va-data-table/VaDataTable.vue
index 258ecf985..03f30c998 100644
--- a/src/vuestic-theme/vuestic-components/va-data-table/VaDataTable.vue
+++ b/src/vuestic-theme/vuestic-components/va-data-table/VaDataTable.vue
@@ -1,43 +1,45 @@
 <template>
-  <va-inner-loading :loading="loading">
-    <vuetable
-      ref="vuetable"
-      :api-mode="false"
-      :fields="fields"
-      :data="apiMode ? data : undefined"
-      :data-manager="apiMode ? undefined : dataManager"
-      :pagination-path="apiMode ? '' : 'pagination'"
-      :no-data-template="noDataLabel || $t('tables.noDataAvailable')"
-      :css="styles"
-      :row-class="rowClass"
-      @vuetable:row-clicked="rowClicked"
-    >
-      <!-- https://stackoverflow.com/questions/50891858/vue-how-to-pass-down-slots-inside-wrapper-component   -->
-      <template
-        v-for="slot in Object.keys($scopedSlots)"
-        :slot="slot"
-        slot-scope="scope"
+  <div class="va-data-table">
+    <va-inner-loading :loading="loading">
+      <vuetable
+        ref="vuetable"
+        :api-mode="false"
+        :fields="fields"
+        :data="apiMode ? data : undefined"
+        :data-manager="apiMode ? undefined : dataManager"
+        :pagination-path="apiMode ? '' : 'pagination'"
+        :no-data-template="noDataLabel || $t('tables.noDataAvailable')"
+        :css="styles"
+        :row-class="rowClass"
+        @vuetable:row-clicked="rowClicked"
       >
-        <slot
-          :name="slot"
-          v-bind="scope"
+        <!-- https://stackoverflow.com/questions/50891858/vue-how-to-pass-down-slots-inside-wrapper-component   -->
+        <template
+          v-for="slot in Object.keys($scopedSlots)"
+          :slot="slot"
+          slot-scope="scope"
+        >
+          <slot
+            :name="slot"
+            v-bind="scope"
+          />
+        </template>
+      </vuetable>
+
+      <div
+        v-if="!noPagination && paginationTotal > 1"
+        class="va-data-table__pagination"
+      >
+        <va-pagination
+          v-model="currentPage"
+          :pages="paginationTotal"
+          :visible-pages="visiblePages"
+          :boundary-links="paginationTotal > visiblePages"
+          @input="inputPage"
         />
-      </template>
-    </vuetable>
-
-    <div
-      v-if="!noPagination && paginationTotal > 1"
-      class="flex-center mt-3"
-    >
-      <va-pagination
-        v-model="currentPage"
-        :pages="paginationTotal"
-        :visible-pages="visiblePages"
-        :boundary-links="paginationTotal > visiblePages"
-        @input="inputPage"
-      />
-    </div>
-  </va-inner-loading>
+      </div>
+    </va-inner-loading>
+  </div>
 </template>
 
 <script>
@@ -194,23 +196,36 @@ export default {
 </script>
 
 <style lang="scss">
-  .va-data-table__vuetable {
-    width: 100%;
+  .va-data-table {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-x: auto;
+
+    &__vuetable {
+      width: 100%;
 
-    th {
-      &.sortable {
-        color: $brand-primary;
+      th {
+        &.sortable {
+          color: $brand-primary;
+        }
+
+        .sort-icon {
+          font-size: 0.625rem;
+        }
       }
 
-      .sort-icon {
-        font-size: 0.625rem;
+      .vuetable-empty-result {
+        padding: 4.5rem 1rem;
+        font-size: 1rem;
+        color: $gray;
       }
     }
 
-    .vuetable-empty-result {
-      padding: 4.5rem 1rem;
-      font-size: 1rem;
-      color: $gray;
+    &__pagination {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: center;
     }
   }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue b/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue
index 9a28c3f67..b8d380ef4 100644
--- a/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue
+++ b/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue
@@ -12,7 +12,9 @@
       :messages="messages"
       :error-messages="errorMessages"
     >
-      <va-icon color="gray" name="fa fa-calendar" />
+      <template slot="append">
+        <va-icon color="gray" name="fa fa-calendar"/>
+      </template>
     </va-input>
     <vue-flatpickr-component
       class="va-date-picker__flatpickr"
@@ -72,7 +74,8 @@ export default {
     },
     config: {
       type: Object,
-      default: () => {},
+      default: () => {
+      },
     },
   },
   data () {
@@ -136,10 +139,11 @@ $dayMargin: 0.6rem;
   position: relative;
 
   &__container {
-     display: flex;
-     position: relative;
-     flex-wrap: wrap;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
   }
+
   &__flatpickr {
     position: absolute;
     visibility: hidden;
@@ -147,6 +151,7 @@ $dayMargin: 0.6rem;
     left: 0;
     height: 100%;
   }
+
   &__icon {
     position: absolute;
     right: 0;
@@ -208,46 +213,59 @@ $dayMargin: 0.6rem;
         margin: 0.25rem calc((100% - 2rem * 7) / 14);
         border: none;
         color: $datepickerText;
+
         &.today {
           color: $datepickerActiveBackground;
+
           &.selected {
             color: $datepickerActiveColor;
           }
         }
+
         &:hover {
           background-color: $datepickerDayHover;
           color: $vue-green;
         }
+
         &.selected {
           background-color: $datepickerActiveBackground;
           color: $datepickerActiveColor;
+
           &:hover {
             color: $datepickerActiveColor;
           }
         }
+
         &.nextMonthDay, &.prevMonthDay {
           color: $brand-secondary;
+
           &.startRange {
             background-color: $datepickerDayHover;
           }
+
           &.endRange {
             background-color: $datepickerDayHover;
           }
         }
+
         &.disabled {
           color: $brand-secondary;
+
           &:hover {
             background-color: inherit;
           }
         }
+
         &.startRange, &.endRange, &.inRange {
           border-radius: 2rem;
           box-shadow: none;
         }
+
         &.startRange, &.endRange {
           background-color: $datepickerActiveBackground;
           color: $datepickerActiveColor;
         }
+
         &.inRange {
           color: $datepickerDayRange;
           background-color: $light-gray3;
@@ -271,6 +289,7 @@ $dayMargin: 0.6rem;
       border-width: 0 0.25rem 0.25rem 0.25rem;
       border-color: transparent transparent $datepickerActiveColor transparent;
     }
+
     &.arrowDown::after {
       border-style: solid;
       border-width: 0.25rem 0.25rem 0 0.25rem;
@@ -305,9 +324,11 @@ $dayMargin: 0.6rem;
 
         .numInputWrapper {
           border: 0;
+
           &:hover {
             background-color: $datepickerBackground;
           }
+
           .numInput.cur-year {
             color: $vue-darkest-blue;
           }
@@ -336,6 +357,7 @@ $dayMargin: 0.6rem;
     &--hidden {
       display: none;
     }
+
     .flatpickr-weekdaycontainer {
       .flatpickr-weekday {
         color: $datepickerWeekday;
@@ -354,6 +376,7 @@ $dayMargin: 0.6rem;
       font-weight: bold;
       font-size: 0.6875rem;
     }
+
     .flatpickr-weeks {
       box-shadow: 2px 0 0 $datepickerSeparatorColor;
       padding-bottom: $borderPadding;
diff --git a/src/vuestic-theme/vuestic-components/va-dropdown/VaDropdown.vue b/src/vuestic-theme/vuestic-components/va-dropdown/VaDropdown.vue
index c7206a42f..4d3634a53 100644
--- a/src/vuestic-theme/vuestic-components/va-dropdown/VaDropdown.vue
+++ b/src/vuestic-theme/vuestic-components/va-dropdown/VaDropdown.vue
@@ -77,6 +77,7 @@ export default {
   props: {
     debugId: String,
     position: String,
+    boundaryBody: Boolean,
     value: Boolean,
     offset: [String, Number],
     disabled: Boolean,
@@ -218,6 +219,10 @@ export default {
         },
       }
 
+      if (this.boundaryBody) {
+        options.modifiers.preventOverflow.boundariesElement = document.body
+      }
+
       if (this.offset) {
         options.modifiers.offset = {
           enabled: true,
@@ -289,6 +294,9 @@ export default {
 @import '../../vuestic-sass/resources/resources';
 
 .va-dropdown {
+  &__anchor {
+    display: inline-block;
+  }
   &__content {
     z-index: 100;
   }
diff --git a/src/vuestic-theme/vuestic-components/va-inner-loading/VaInnerLoading.vue b/src/vuestic-theme/vuestic-components/va-inner-loading/VaInnerLoading.vue
index 1cdfed6d4..ecb5a9f16 100644
--- a/src/vuestic-theme/vuestic-components/va-inner-loading/VaInnerLoading.vue
+++ b/src/vuestic-theme/vuestic-components/va-inner-loading/VaInnerLoading.vue
@@ -1,15 +1,13 @@
 <template>
-  <div>
-    <div class="inner-loading-container">
-      <slot />
+  <div class="inner-loading">
+    <slot />
 
-      <div v-if="loading" class="inner-loading-overlay">
-        <spring-spinner
-          :animation-duration="2000"
-          :size="48"
-          :color="$themes.primary"
-        />
-      </div>
+    <div v-if="loading" class="inner-loading__overlay">
+      <spring-spinner
+        :animation-duration="2000"
+        :size="48"
+        :color="$themes.primary"
+      />
     </div>
   </div>
 </template>
@@ -29,18 +27,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .inner-loading-container {
+  .inner-loading {
     position: relative;
-  }
+    min-width: 100%;
 
-  .inner-loading-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.5);
+    &__overlay {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.5);
+    }
   }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/va-input/VaInput.demo.vue b/src/vuestic-theme/vuestic-components/va-input/VaInput.demo.vue
index ef668ef46..ff8a7e1b5 100644
--- a/src/vuestic-theme/vuestic-components/va-input/VaInput.demo.vue
+++ b/src/vuestic-theme/vuestic-components/va-input/VaInput.demo.vue
@@ -46,7 +46,7 @@
         v-model="text"
         label="Name"
       >
-        <va-icon name="fa fa-anchor"/>
+        <va-icon slot="append" name="fa fa-anchor"/>
       </va-input>
     </VbCard>
     <VbCard title="Button">
@@ -54,7 +54,7 @@
         v-model="text"
         label="Name"
       >
-        <va-button style="margin-right: 0;" small>
+        <va-button slot="append" style="margin-right: 0;" small>
           Upload
         </va-button>
       </va-input>
@@ -77,7 +77,7 @@
       >
         <va-icon
           slot="append"
-          icon="fa fa-anchor"
+          name="fa fa-anchor"
         />
       </va-input>
     </VbCard>
diff --git a/src/vuestic-theme/vuestic-components/va-navbar/VaNavbar.vue b/src/vuestic-theme/vuestic-components/va-navbar/VaNavbar.vue
index 504bf3283..89307b682 100644
--- a/src/vuestic-theme/vuestic-components/va-navbar/VaNavbar.vue
+++ b/src/vuestic-theme/vuestic-components/va-navbar/VaNavbar.vue
@@ -3,19 +3,14 @@
     class="va-navbar"
     :style="navbarStyle"
   >
-    <div
-      class="va-navbar__icon-container">
+    <div class="va-navbar__icon-container">
       <slot name="selector"></slot>
     </div>
-    <div
-      class="va-navbar__logo row align--center mr-3">
-      <router-link class="" to="/">
-        <slot name="logo"/>
-      </router-link>
-    </div>
+    <router-link class="va-navbar__logo row align--center mr-3" to="/">
+      <slot name="logo"/>
+    </router-link>
     <div class="va-navbar__content row">
-      <div
-        class="va-navbar__center flex offset--lg3 offset--md3 lg5 md4 flex-center">
+      <div class="va-navbar__center flex offset--lg3 offset--md3 lg5 md4 flex-center">
         <slot name="center"></slot>
       </div>
       <div class="md5 lg4 va-navbar__actions align--center row">
@@ -118,6 +113,7 @@ $nav-border-side-width: 3.1875rem;
     width: 9.5rem;
     height: 1rem;
     margin: auto;
+    z-index: 2;
     & * {
       max-height: 100%;
       max-width: 100%;
diff --git a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue
index 9d460cf1f..643c38f35 100644
--- a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue
+++ b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue
@@ -1,14 +1,17 @@
 <template>
   <transition v-if="value" name="fade">
-    <div class="va-notification d-flex justify--space-between align--start"
-         :style="notificationStyle"
+    <div class="va-notification"
+      :style="notificationStyle"
     >
-      <div class="va-notification__content d-inline-flex align--center">
+      <div class="va-notification__content">
         <slot/>
       </div>
-      <div class="va-notification__close-icon d-flex justify--end align--start">
+
+      <div
+        v-if="closeable"
+        class="va-notification__close-icon"
+      >
         <va-icon
-          v-if="closeable"
           :color="color"
           name="ion-md-close ion"
           @click="hideNotification()"
@@ -81,13 +84,41 @@ $va-close-icon-font-size: 1.5rem;
 .va-notification {
   padding: $va-notification-padding-y $va-notification-padding-x;
   margin: $va-notification-margin-y auto;
+  display: flex;
+  align-items: center;
   border: $va-notification-border solid transparent;
   border-radius: $va-notification-border-radius;
 
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+
   &__close-icon {
     padding: $va-close-icon-padding-y $va-close-icon-padding-x;
     font-size: $va-close-icon-font-size;
     cursor: pointer;
   }
+
+  @include media-breakpoint-down(xs) {
+    @at-root {
+      .va-notification {
+        &__content {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        &__close-icon {
+          align-self: flex-start;
+          display: flex;
+          align-items: flex-start;
+          padding: 0;
+          padding-right: $va-close-icon-padding-x;
+          margin: 0;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/va-select/VaSelect.demo.vue b/src/vuestic-theme/vuestic-components/va-select/VaSelect.demo.vue
index 2d20826eb..ab3af1b9c 100644
--- a/src/vuestic-theme/vuestic-components/va-select/VaSelect.demo.vue
+++ b/src/vuestic-theme/vuestic-components/va-select/VaSelect.demo.vue
@@ -79,6 +79,13 @@
         :options="defaultSelect.options"
       />
     </VbCard>
+    <VbCard title="No clear" style="width: 400px;">
+      <va-select
+        v-model="defaultSelect.value"
+        :options="defaultSelect.options"
+        no-clear
+      />
+    </VbCard>
     <VbCard title="Placeholder" style="width: 400px;">
       <va-select
         v-model="defaultSelect.value"
@@ -249,6 +256,7 @@ export default {
       this.isLoading = true
       setTimeout(() => {
         this.isLoading = false
+        // eslint-disable-next-line no-console
         console.log(val)
       }, 2000)
     },
diff --git a/src/vuestic-theme/vuestic-components/va-select/VaSelect.vue b/src/vuestic-theme/vuestic-components/va-select/VaSelect.vue
index cd2abd75a..e28c12ecd 100644
--- a/src/vuestic-theme/vuestic-components/va-select/VaSelect.vue
+++ b/src/vuestic-theme/vuestic-components/va-select/VaSelect.vue
@@ -169,6 +169,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    noClear: Boolean,
     error: Boolean,
     success: Boolean,
   },
@@ -240,6 +241,9 @@ export default {
       })
     },
     showClearIcon () {
+      if (this.noClear) {
+        return false
+      }
       if (this.disabled) {
         return false
       }
diff --git a/src/vuestic-theme/vuestic-components/va-tabs/__demo__/TabsExample.vue b/src/vuestic-theme/vuestic-components/va-tabs/__demo__/TabsExample.vue
index adce66d87..7ad81953e 100644
--- a/src/vuestic-theme/vuestic-components/va-tabs/__demo__/TabsExample.vue
+++ b/src/vuestic-theme/vuestic-components/va-tabs/__demo__/TabsExample.vue
@@ -7,7 +7,7 @@
       >
         {{ tabObject.title }}
         <va-icon
-          icon="fa fa-times"
+          name="fa fa-times"
           class="ml-2"
           @click.stop.native="removeTab(tabObject)"
         />
diff --git a/src/vuestic-theme/vuestic-components/va-tree-view/VaTreeCategory.demo.vue b/src/vuestic-theme/vuestic-components/va-tree-view/VaTreeCategory.demo.vue
index 4da4ef5e0..97b3351ba 100644
--- a/src/vuestic-theme/vuestic-components/va-tree-view/VaTreeCategory.demo.vue
+++ b/src/vuestic-theme/vuestic-components/va-tree-view/VaTreeCategory.demo.vue
@@ -57,7 +57,7 @@
     </VbCard>
     <VbCard title="Colors">
       <va-tree-category label="Category with icon" color="info">
-        <va-icon slot="icon" icon="ion ion-md-nutrition"/>
+        <va-icon slot="icon" name="ion ion-md-nutrition"/>
         <va-tree-node>
           One
         </va-tree-node>
diff --git a/src/vuestic-theme/vuestic-sass/global/_content.scss b/src/vuestic-theme/vuestic-sass/global/_content.scss
index eac83d533..e1fb31c17 100644
--- a/src/vuestic-theme/vuestic-sass/global/_content.scss
+++ b/src/vuestic-theme/vuestic-sass/global/_content.scss
@@ -29,6 +29,12 @@
     @include va-header-margin(6);
   }
 
+  hr.separator {
+    height: 2px;
+    background-color: #eee;
+    border: none;
+  }
+
   p {
     margin-top: 0;
     margin-bottom: 1rem;
diff --git a/src/vuestic-theme/vuestic-sass/grid/SpacingPlaygroud.vue b/src/vuestic-theme/vuestic-sass/grid/SpacingPlaygroud.vue
index 112ca5e3a..285d519e7 100644
--- a/src/vuestic-theme/vuestic-sass/grid/SpacingPlaygroud.vue
+++ b/src/vuestic-theme/vuestic-sass/grid/SpacingPlaygroud.vue
@@ -1,45 +1,70 @@
 <template>
-  <div class="spacing-playground layout gutter--md">
+  <div class="spacing-playground">
     <div class="row">
-      <h3>Spacing playground</h3>
-    </div>
-    <div class="row">
-      <div class="flex xs3">
-        <span>m</span>
-        <va-select :options="directionList" v-model="selectedMarginDirection"/>
+      <div class="flex xs12 sm6 md4">
+        <va-select
+          :options="directionList"
+          v-model="selectedMarginDirection"
+          :label="$t('spacingPlayground.margin')"
+          :max-height="null"
+          no-clear
+        />
       </div>
-      <div class="flex xs2">
-        <span>-</span>
-        <va-select :options="sizesList" v-model="selectedMarginSize"/>
+      <div class="flex xs12 sm6 md2">
+        <va-select
+          :options="sizesList"
+          v-model="selectedMarginSize"
+          :label="$t('spacingPlayground.value')"
+          :max-height="null"
+          no-clear
+        />
       </div>
-      <div class="flex xs3 offset-2">
-        <span>p</span>
-        <va-select :options="directionList" v-model="selectedPaddingDirection"/>
+      <div class="flex xs12 sm6 md4">
+        <va-select
+          :options="directionList"
+          v-model="selectedPaddingDirection"
+          :label="$t('spacingPlayground.padding')"
+          :max-height="null"
+          no-clear
+        />
       </div>
-      <div class="flex xs2">
-        <span>-</span>
-        <va-select :options="sizesList" v-model="selectedPaddingSize"/>
+      <div class="flex xs12 sm6 md2">
+        <va-select
+          :options="sizesList"
+          v-model="selectedPaddingSize"
+          :label="$t('spacingPlayground.value')"
+          :max-height="null"
+          no-clear
+        />
       </div>
     </div>
-    <div class="row">
-      <div class="flex xs6">{{selectedMarginClass}}</div>
-      <div class="flex xs6">{{selectedPaddingClass}}</div>
+
+    <div
+      v-if="selectedMarginClass || selectedPaddingClass"
+      class="row"
+    >
+      <div class="flex xs12 content">
+        <pre class="code">class="{{ (selectedMarginClass + ' ' +  selectedPaddingClass).trim() }}"</pre>
+      </div>
     </div>
     <div class="row">
       <div class="flex xs12">
         <div class="playground-component">
           <div class="playground-component__margin" :class="selectedMarginClass">
-            <div :class="selectedPaddingClass" class="playground-component__padding">
+            <div class="playground-component__padding" :class="selectedPaddingClass" >
               <div class="playground-component__inner"></div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
     <div class="row">
-      <div class="flex xs12">
-        <va-color-presentation color="#c9f7db" name="padding"/>
-        <va-color-presentation color="#ffd093" name="margin"/>
+      <div class="flex xs12 sm6">
+        <va-color-presentation color="#ffd093" :name="$t('spacingPlayground.margin')"/>
+      </div>
+      <div class="flex xs12 sm6">
+        <va-color-presentation color="#c9f7db" :name="$t('spacingPlayground.padding')"/>
       </div>
     </div>
   </div>
@@ -56,11 +81,11 @@ export default {
   data () {
     return {
       directionList: ['a', 'y', 'x', 't', 'r', 'b', 'l'],
-      selectedMarginDirection: '',
-      selectedPaddingDirection: '',
       sizesList: ['1', '2', '3', '4', '5', 'auto'],
-      selectedMarginSize: '',
-      selectedPaddingSize: '',
+      selectedMarginDirection: 'y',
+      selectedPaddingDirection: 'x',
+      selectedMarginSize: '3',
+      selectedPaddingSize: '3',
     }
   },
   computed: {