diff --git a/README.md b/README.md
index 695a8a05..52749a21 100644
--- a/README.md
+++ b/README.md
@@ -5,40 +5,9 @@
 yarn install
 ```
 
-## Font variables setup
-Required!: Add scss font variables to your project
-
-```
-$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
-$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
-$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
-```
-
 ## Usage library in project
-### 1.Install all of library components:
-```
-import Vue from 'vue
-import SoramitsuElements from '@soramitsu/soramitsu-js-ui'
 
-const options = {
-  store // if u want to merge ui lib modules
-}
-
-Vue.use(SoramitsuElements, options)
-```
-### 2.Install only necessary components (to reduce vendors bundle size)
-```
-import Vue from 'vue
-import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/src/plugins/elementUI'
-import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/src/plugins/soramitsuUIStore'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Button/SButton'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Input/SInput'
-
-Vue.use(ElementUIPlugin) // required
-Vue.use(SoramitsuUIStorePlugin, store) // optional
-Vue.use(SButton)
-Vue.use(SInput)
-```
+The full guide about usage can be found [here](./src/stories/Intro/Intro.stories.mdx)
 
 ### Compiles and hot-reloads storybook with components for development
 ```
diff --git a/build/rollup.config.js b/build/rollup.config.js
index 4a1ec3c2..78630ecb 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -21,12 +21,17 @@ export default {
     'src/types/DesignSystem.ts',
     'src/types/Locale.ts',
     'src/types/Theme.ts',
+    'src/types/components.ts',
+    'src/types/index.ts',
     'src/locale/index.ts',
     'src/plugins/*.ts',
     'src/store/index.ts',
     'src/utils/*.ts',
     'src/directives/index.ts',
-    'src/components/*/**/index.ts'
+    'src/components/*/**/index.ts',
+    'src/components/*/**/consts.ts',
+    'src/components/DesignSystem/DesignSystemInject.ts',
+    'src/mixins/*.ts'
   ],
   output: {
     format: 'esm',
@@ -74,20 +79,13 @@ export default {
     }),
     scss(),
     resolve(),
-    terser(),
+    /* eslint-disable @typescript-eslint/camelcase */
+    terser({ keep_classnames: true }),
     del({
       targets: [
-        'lib/styles/index.d.ts',
-        'bundle.css'
-        // TODO: find a way how to remove this dependencies
-        // 'lib/BorderRadiusMixin-**.js',
-        // 'lib/SizeMixin-**.js',
-        // 'lib/DesignSystem-**.js',
-        // 'lib/DesignSystemInject-**.js',
+        // TODO: find a way how to remove this dependency below
         // 'lib/normalize-component-**.js',
-        // 'lib/components-**.js',
-        // 'lib/consts-**.js',
-        // 'lib/index-**.js'
+        'bundle.css'
       ],
       hook: 'writeBundle'
     })
diff --git a/config/storybook/index.scss b/config/storybook/index.scss
new file mode 100644
index 00000000..5f7b3b62
--- /dev/null
+++ b/config/storybook/index.scss
@@ -0,0 +1,3 @@
+.sbdocs.sbdocs-preview div[id^='story--'] > * {
+  height: auto !important;
+}
diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index 14c5f9bc..1d12b586 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -5,6 +5,7 @@ import { DocsPage } from '@storybook/addon-docs/blocks'
 import ElColorPicker from 'element-ui/lib/color-picker'
 
 import '../../src/styles/index.scss'
+import './index.scss'
 import mainStore from '../../src/store'
 import { ElementUIPlugin } from '../../src/plugins'
 
diff --git a/package.json b/package.json
index 5d4254a9..03bf50d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/components/Breadcrumb/SBreadcrumb/index.ts b/src/components/Breadcrumb/SBreadcrumb/index.ts
index 25093ad7..a4ae62ef 100644
--- a/src/components/Breadcrumb/SBreadcrumb/index.ts
+++ b/src/components/Breadcrumb/SBreadcrumb/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumb from './SBreadcrumb.vue'
 
 const SBreadcrumb = _SBreadcrumb as SFCWithInstall<typeof _SBreadcrumb>
 
-SBreadcrumb.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumb, SBreadcrumb)
-}
+SBreadcrumb.install = install(Components.SBreadcrumb, SBreadcrumb)
 
 export { SBreadcrumb }
 export default SBreadcrumb
diff --git a/src/components/Breadcrumb/SBreadcrumbItem/index.ts b/src/components/Breadcrumb/SBreadcrumbItem/index.ts
index 4b553cb2..1f03cd39 100644
--- a/src/components/Breadcrumb/SBreadcrumbItem/index.ts
+++ b/src/components/Breadcrumb/SBreadcrumbItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumbItem from './SBreadcrumbItem.vue'
 
 const SBreadcrumbItem = _SBreadcrumbItem as SFCWithInstall<typeof _SBreadcrumbItem>
 
-SBreadcrumbItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumbItem, SBreadcrumbItem)
-}
+SBreadcrumbItem.install = install(Components.SBreadcrumbItem, SBreadcrumbItem)
 
 export { SBreadcrumbItem }
 export default SBreadcrumbItem
diff --git a/src/components/Button/SButton/SButton.vue b/src/components/Button/SButton/SButton.vue
index 710173c8..771c8b69 100644
--- a/src/components/Button/SButton/SButton.vue
+++ b/src/components/Button/SButton/SButton.vue
@@ -52,6 +52,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
+  /**
+   * Primary property for `type="action"` buttons.
+   *
+   * By default it's set to `false`
+   */
+  @Prop({ default: false, type: Boolean }) readonly primary!: boolean
   /**
    * Icon name from icon collection of this library
    */
@@ -144,6 +150,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
     if (this.alternative) {
       cssClasses.push('s-alternative')
     }
+    if (this.primary) {
+      cssClasses.push('s-primary')
+    }
     if (this.pressed) {
       cssClasses.push('s-pressed')
     }
@@ -171,15 +180,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   get isRounded (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+    if (([ButtonTypes.ACTION] as Array<string>).includes(this.type)) return this.rounded
 
-    return this.rounded
+    return false
   }
 
   get isLoading (): boolean {
-    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type) || this.isRounded) {
-      return false
-    }
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) return false
+
     return this.loading
   }
 
diff --git a/src/components/Button/SButton/index.ts b/src/components/Button/SButton/index.ts
index 6e4b31ab..63000572 100644
--- a/src/components/Button/SButton/index.ts
+++ b/src/components/Button/SButton/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButton from './SButton.vue'
 
 const SButton = _SButton as SFCWithInstall<typeof _SButton>
 
-SButton.install = function (vue: VueConstructor) {
-  vue.component(Components.SButton, SButton)
-}
+SButton.install = install(Components.SButton, SButton)
 
 export { SButton }
 export default SButton
diff --git a/src/components/Button/SButtonGroup/index.ts b/src/components/Button/SButtonGroup/index.ts
index 1d5863b0..34750a1c 100644
--- a/src/components/Button/SButtonGroup/index.ts
+++ b/src/components/Button/SButtonGroup/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButtonGroup from './SButtonGroup.vue'
 
 const SButtonGroup = _SButtonGroup as SFCWithInstall<typeof _SButtonGroup>
 
-SButtonGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SButtonGroup, SButtonGroup)
-}
+SButtonGroup.install = install(Components.SButtonGroup, SButtonGroup)
 
 export { SButtonGroup }
 export default SButtonGroup
diff --git a/src/components/Card/SCard/index.ts b/src/components/Card/SCard/index.ts
index c301ebde..dd9f56b1 100644
--- a/src/components/Card/SCard/index.ts
+++ b/src/components/Card/SCard/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCard from './SCard.vue'
 
 const SCard = _SCard as SFCWithInstall<typeof _SCard>
 
-SCard.install = function (vue: VueConstructor) {
-  vue.component(Components.SCard, SCard)
-}
+SCard.install = install(Components.SCard, SCard)
 
 export { SCard }
 export default SCard
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 8781ed78..7736b71b 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SCheckbox from './SCheckbox.vue'
 
 const SCheckbox = _SCheckbox as SFCWithInstall<typeof _SCheckbox>
 
-SCheckbox.install = function (vue: VueConstructor) {
-  vue.component(Components.SCheckbox, SCheckbox)
-}
+SCheckbox.install = install(Components.SCheckbox, SCheckbox)
 
 export { SCheckbox }
 export default SCheckbox
diff --git a/src/components/Collapse/SCollapse/index.ts b/src/components/Collapse/SCollapse/index.ts
index 9c09acc7..19e60223 100644
--- a/src/components/Collapse/SCollapse/index.ts
+++ b/src/components/Collapse/SCollapse/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapse from './SCollapse.vue'
 
 const SCollapse = _SCollapse as SFCWithInstall<typeof _SCollapse>
 
-SCollapse.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapse, SCollapse)
-}
+SCollapse.install = install(Components.SCollapse, SCollapse)
 
 export { SCollapse }
 export default SCollapse
diff --git a/src/components/Collapse/SCollapseItem/index.ts b/src/components/Collapse/SCollapseItem/index.ts
index e2b40340..7df6110a 100644
--- a/src/components/Collapse/SCollapseItem/index.ts
+++ b/src/components/Collapse/SCollapseItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapseItem from './SCollapseItem.vue'
 
 const SCollapseItem = _SCollapseItem as SFCWithInstall<typeof _SCollapseItem>
 
-SCollapseItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapseItem, SCollapseItem)
-}
+SCollapseItem.install = install(Components.SCollapseItem, SCollapseItem)
 
 export { SCollapseItem }
 export default SCollapseItem
diff --git a/src/components/DatePicker/SDatePicker/index.ts b/src/components/DatePicker/SDatePicker/index.ts
index 88736cc4..ebc9c6b6 100644
--- a/src/components/DatePicker/SDatePicker/index.ts
+++ b/src/components/DatePicker/SDatePicker/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDatePicker from './SDatePicker.vue'
 
 const SDatePicker = _SDatePicker as SFCWithInstall<typeof _SDatePicker>
 
-SDatePicker.install = function (vue: VueConstructor) {
-  vue.component(Components.SDatePicker, SDatePicker)
-}
+SDatePicker.install = install(Components.SDatePicker, SDatePicker)
 
 export { SDatePicker }
 export default SDatePicker
diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts
index 24ca84cd..f86df398 100644
--- a/src/components/DesignSystem/DesignSystemInject.ts
+++ b/src/components/DesignSystem/DesignSystemInject.ts
@@ -1,13 +1,19 @@
 import { Component, Vue, Inject, Prop } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from './consts'
 import DesignSystem from '../../types/DesignSystem'
 
 @Component
 export default class DesignSystemInject extends Vue {
   @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean
+
   @Inject({ from: DesignSystemProvideKey, default: DesignSystem.DEFAULT }) readonly designSystem!: any
 
   get designSystemClass (): string {
     return this.useDesignSystem ? this.designSystem.value : ''
   }
+
+  get isNeumorphic (): boolean {
+    return this.designSystem.value === DesignSystem.NEUMORPHIC
+  }
 }
diff --git a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
index 57e40ce8..15df436c 100644
--- a/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
+++ b/src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue
@@ -6,12 +6,14 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from '../consts'
 import DesignSystem from '../../../types/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
   @Prop({ default: DesignSystem.DEFAULT, type: String }) readonly value!: string
+
   @Provide(DesignSystemProvideKey) providedObject = {
     value: DesignSystem.DEFAULT
   }
diff --git a/src/components/DesignSystem/SDesignSystemProvider/index.ts b/src/components/DesignSystem/SDesignSystemProvider/index.ts
index fff691a4..cb9055a0 100644
--- a/src/components/DesignSystem/SDesignSystemProvider/index.ts
+++ b/src/components/DesignSystem/SDesignSystemProvider/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDesignSystemProvider from './SDesignSystemProvider.vue'
 
 const SDesignSystemProvider = _SDesignSystemProvider as SFCWithInstall<typeof _SDesignSystemProvider>
 
-SDesignSystemProvider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDesignSystemProvider, SDesignSystemProvider)
-}
+SDesignSystemProvider.install = install(Components.SDesignSystemProvider, SDesignSystemProvider)
 
 export { SDesignSystemProvider }
 export default SDesignSystemProvider
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
index 6f8c2603..8746c7eb 100644
--- a/src/components/Dialog/index.ts
+++ b/src/components/Dialog/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SDialog from './SDialog.vue'
 
 const SDialog = _SDialog as SFCWithInstall<typeof _SDialog>
 
-SDialog.install = function (vue: VueConstructor) {
-  vue.component(Components.SDialog, SDialog)
-}
+SDialog.install = install(Components.SDialog, SDialog)
 
 export { SDialog }
 export default SDialog
diff --git a/src/components/Divider/SDivider/index.ts b/src/components/Divider/SDivider/index.ts
index dcef8f6c..a80839f3 100644
--- a/src/components/Divider/SDivider/index.ts
+++ b/src/components/Divider/SDivider/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDivider from './SDivider.vue'
 
 const SDivider = _SDivider as SFCWithInstall<typeof _SDivider>
 
-SDivider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDivider, SDivider)
-}
+SDivider.install = install(Components.SDivider, SDivider)
 
 export { SDivider }
 export default SDivider
diff --git a/src/components/Dropdown/SDropdown/index.ts b/src/components/Dropdown/SDropdown/index.ts
index e01774c2..702fcce6 100644
--- a/src/components/Dropdown/SDropdown/index.ts
+++ b/src/components/Dropdown/SDropdown/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDropdown from './SDropdown.vue'
 
 const SDropdown = _SDropdown as SFCWithInstall<typeof _SDropdown>
 
-SDropdown.install = function (vue: VueConstructor) {
-  vue.component(Components.SDropdown, SDropdown)
-}
+SDropdown.install = install(Components.SDropdown, SDropdown)
 
 export { SDropdown }
 export default SDropdown
diff --git a/src/components/Dropdown/SDropdownItem/index.ts b/src/components/Dropdown/SDropdownItem/index.ts
index 04d464e7..d7a5980d 100644
--- a/src/components/Dropdown/SDropdownItem/index.ts
+++ b/src/components/Dropdown/SDropdownItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDropdownItem from './SDropdownItem.vue'
 
 const SDropdownItem = _SDropdownItem as SFCWithInstall<typeof _SDropdownItem>
 
-SDropdownItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SDropdownItem, SDropdownItem)
-}
+SDropdownItem.install = install(Components.SDropdownItem, SDropdownItem)
 
 export { SDropdownItem }
 export default SDropdownItem
diff --git a/src/components/Form/SForm/SForm.vue b/src/components/Form/SForm/SForm.vue
index 613c06dc..0418a532 100644
--- a/src/components/Form/SForm/SForm.vue
+++ b/src/components/Form/SForm/SForm.vue
@@ -7,7 +7,6 @@
     :label-width="labelWidth"
     :show-message="showMessage"
     :inline-message="inlineMessage"
-    :status-icon="statusIcon"
     :validate-on-rule-change="validateOnRuleChange"
     :disabled="disabled"
     :size="size"
@@ -71,12 +70,6 @@ export default class SForm extends Vue {
    * `false` by default
    */
   @Prop({ type: Boolean, default: false }) readonly inlineMessage!: boolean
-  /**
-   * Display an icon indicating the validation result.
-   *
-   * `false` by default
-   */
-  @Prop({ type: Boolean, default: false }) readonly statusIcon!: boolean
   /**
    * Trigger validation when the `rules` property is changed.
    *
diff --git a/src/components/Form/SForm/index.ts b/src/components/Form/SForm/index.ts
index bde5ee19..e9aece5b 100644
--- a/src/components/Form/SForm/index.ts
+++ b/src/components/Form/SForm/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SForm from './SForm.vue'
 
 const SForm = _SForm as SFCWithInstall<typeof _SForm>
 
-SForm.install = function (vue: VueConstructor) {
-  vue.component(Components.SForm, SForm)
-}
+SForm.install = install(Components.SForm, SForm)
 
 export { SForm }
 export default SForm
diff --git a/src/components/Form/SFormItem/SFormItem.vue b/src/components/Form/SFormItem/SFormItem.vue
index 6e489f15..8a46cded 100644
--- a/src/components/Form/SFormItem/SFormItem.vue
+++ b/src/components/Form/SFormItem/SFormItem.vue
@@ -1,6 +1,7 @@
 <template>
   <el-form-item
     ref="formItem"
+    :class="computedClasses"
     :prop="prop"
     :label="label"
     :label-width="labelWidth"
@@ -99,6 +100,14 @@ export default class SFormItem extends Vue {
     return this.showMessage && (this.elForm || {}).showMessage
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.willMessageBeShown) {
+      cssClasses.push('with-message')
+    }
+    return cssClasses
+  }
+
   get computedRules (): object {
     const rules = (this.rules || (this.elForm.rules || {})[this.prop]) as any
     if (!rules) {
diff --git a/src/components/Form/SFormItem/index.ts b/src/components/Form/SFormItem/index.ts
index dc2aaafa..76b96e41 100644
--- a/src/components/Form/SFormItem/index.ts
+++ b/src/components/Form/SFormItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SFormItem from './SFormItem.vue'
 
 const SFormItem = _SFormItem as SFCWithInstall<typeof _SFormItem>
 
-SFormItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SFormItem, SFormItem)
-}
+SFormItem.install = install(Components.SFormItem, SFormItem)
 
 export { SFormItem }
 export default SFormItem
diff --git a/src/components/Icon/SIcon/index.ts b/src/components/Icon/SIcon/index.ts
index c98e953c..d773ba32 100644
--- a/src/components/Icon/SIcon/index.ts
+++ b/src/components/Icon/SIcon/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SIcon from './SIcon.vue'
 
 const SIcon = _SIcon as SFCWithInstall<typeof _SIcon>
 
-SIcon.install = function (vue: VueConstructor) {
-  vue.component(Components.SIcon, SIcon)
-}
+SIcon.install = install(Components.SIcon, SIcon)
 
 export { SIcon }
 export default SIcon
diff --git a/src/components/Input/SFloatInput/index.ts b/src/components/Input/SFloatInput/index.ts
index 6077fab3..65e777ae 100644
--- a/src/components/Input/SFloatInput/index.ts
+++ b/src/components/Input/SFloatInput/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SFloatInput from './SFloatInput.vue'
 
 const SFloatInput = _SFloatInput as SFCWithInstall<typeof _SFloatInput>
 
-SFloatInput.install = function (vue: VueConstructor) {
-  vue.component(Components.SFloatInput, SFloatInput)
-}
+SFloatInput.install = install(Components.SFloatInput, SFloatInput)
 
 export { SFloatInput }
 export default SFloatInput
diff --git a/src/components/Input/SInput/SInput.vue b/src/components/Input/SInput/SInput.vue
index 82ed8733..a9c9e6d6 100644
--- a/src/components/Input/SInput/SInput.vue
+++ b/src/components/Input/SInput/SInput.vue
@@ -3,10 +3,10 @@
     class="s-input"
     :class="computedClasses"
   >
-    <slot name="top" />
+    <slot v-if="isNeumorphic" name="top" />
 
     <div class="s-input__content">
-      <slot name="left" />
+      <slot v-if="isNeumorphic" name="left" />
 
       <div class="s-input__input">
         <span v-if="value && isBigInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
@@ -57,15 +57,15 @@
           >
         </template>
       </div>
-      <slot name="right" />
+      <slot v-if="isNeumorphic" name="right" />
     </div>
 
-    <slot name="bottom"/>
+    <slot v-if="isNeumorphic" name="bottom"/>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
 import Input from 'element-ui/lib/input'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
@@ -178,6 +178,16 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     this.$el.addEventListener('animationstart', this.changeAutofillValue)
   }
 
+  updated (): void {
+    if (!this.isNeumorphic) {
+      ['top', 'bottom', 'left', 'right'].forEach(slotName => {
+        if (this.$slots[slotName]) {
+          console.warn(`[s-input] Slot "${slotName}" is not available with used design system`)
+        }
+      })
+    }
+  }
+
   destroyed (): void {
     this.$el.removeEventListener('animationstart', this.changeAutofillValue)
   }
diff --git a/src/components/Input/SInput/index.ts b/src/components/Input/SInput/index.ts
index 610fee45..547e4565 100644
--- a/src/components/Input/SInput/index.ts
+++ b/src/components/Input/SInput/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SInput from './SInput.vue'
 
 const SInput = _SInput as SFCWithInstall<typeof _SInput>
 
-SInput.install = function (vue: VueConstructor) {
-  vue.component(Components.SInput, SInput)
-}
+SInput.install = install(Components.SInput, SInput)
 
 export { SInput }
 export default SInput
diff --git a/src/components/Input/SJsonInput/index.ts b/src/components/Input/SJsonInput/index.ts
index 93fd86cb..52452ee7 100644
--- a/src/components/Input/SJsonInput/index.ts
+++ b/src/components/Input/SJsonInput/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SJsonInput from './SJsonInput.vue'
 
 const SJsonInput = _SJsonInput as SFCWithInstall<typeof _SJsonInput>
 
-SJsonInput.install = function (vue: VueConstructor) {
-  vue.component(Components.SJsonInput, SJsonInput)
-}
+SJsonInput.install = install(Components.SJsonInput, SJsonInput)
 
 export { SJsonInput }
 export default SJsonInput
diff --git a/src/components/Layout/App/index.ts b/src/components/Layout/App/index.ts
index 51f69229..68d25e86 100644
--- a/src/components/Layout/App/index.ts
+++ b/src/components/Layout/App/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SApp from './SApp.vue'
 
 const SApp = _SApp as SFCWithInstall<typeof _SApp>
 
-SApp.install = function (vue: VueConstructor) {
-  vue.component(Components.SApp, SApp)
-}
+SApp.install = install(Components.SApp, SApp)
 
 export { SApp }
 export default SApp
diff --git a/src/components/Layout/Aside/index.ts b/src/components/Layout/Aside/index.ts
index c204a812..cda78d9f 100644
--- a/src/components/Layout/Aside/index.ts
+++ b/src/components/Layout/Aside/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SAside from './SAside.vue'
 
 const SAside = _SAside as SFCWithInstall<typeof _SAside>
 
-SAside.install = function (vue: VueConstructor) {
-  vue.component(Components.SAside, SAside)
-}
+SAside.install = install(Components.SAside, SAside)
 
 export { SAside }
 export default SAside
diff --git a/src/components/Layout/Col/index.ts b/src/components/Layout/Col/index.ts
index 223da3af..36ecb13b 100644
--- a/src/components/Layout/Col/index.ts
+++ b/src/components/Layout/Col/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCol from './SCol.vue'
 
 const SCol = _SCol as SFCWithInstall<typeof _SCol>
 
-SCol.install = function (vue: VueConstructor) {
-  vue.component(Components.SCol, SCol)
-}
+SCol.install = install(Components.SCol, SCol)
 
 export { SCol }
 export default SCol
diff --git a/src/components/Layout/Container/index.ts b/src/components/Layout/Container/index.ts
index fbb8946b..aac2f1e7 100644
--- a/src/components/Layout/Container/index.ts
+++ b/src/components/Layout/Container/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SContainer from './SContainer.vue'
 
 const SContainer = _SContainer as SFCWithInstall<typeof _SContainer>
 
-SContainer.install = function (vue: VueConstructor) {
-  vue.component(Components.SContainer, SContainer)
-}
+SContainer.install = install(Components.SContainer, SContainer)
 
 export { SContainer }
 export { ContainerDirection } from './consts'
diff --git a/src/components/Layout/Footer/index.ts b/src/components/Layout/Footer/index.ts
index 294e4efe..d6c7cef8 100644
--- a/src/components/Layout/Footer/index.ts
+++ b/src/components/Layout/Footer/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SFooter from './SFooter.vue'
 
 const SFooter = _SFooter as SFCWithInstall<typeof _SFooter>
 
-SFooter.install = function (vue: VueConstructor) {
-  vue.component(Components.SFooter, SFooter)
-}
+SFooter.install = install(Components.SFooter, SFooter)
 
 export { SFooter }
 export default SFooter
diff --git a/src/components/Layout/Header/index.ts b/src/components/Layout/Header/index.ts
index d90d71d2..d100a592 100644
--- a/src/components/Layout/Header/index.ts
+++ b/src/components/Layout/Header/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SHeader from './SHeader.vue'
 
 const SHeader = _SHeader as SFCWithInstall<typeof _SHeader>
 
-SHeader.install = function (vue: VueConstructor) {
-  vue.component(Components.SHeader, SHeader)
-}
+SHeader.install = install(Components.SHeader, SHeader)
 
 export { SHeader }
 export default SHeader
diff --git a/src/components/Layout/Main/index.ts b/src/components/Layout/Main/index.ts
index e30ec8ab..95dcd754 100644
--- a/src/components/Layout/Main/index.ts
+++ b/src/components/Layout/Main/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SMain from './SMain.vue'
 
 const SMain = _SMain as SFCWithInstall<typeof _SMain>
 
-SMain.install = function (vue: VueConstructor) {
-  vue.component(Components.SMain, SMain)
-}
+SMain.install = install(Components.SMain, SMain)
 
 export { SMain }
 export default SMain
diff --git a/src/components/Layout/Row/index.ts b/src/components/Layout/Row/index.ts
index eff810d3..753ec2ef 100644
--- a/src/components/Layout/Row/index.ts
+++ b/src/components/Layout/Row/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SRow from './SRow.vue'
 
 const SRow = _SRow as SFCWithInstall<typeof _SRow>
 
-SRow.install = function (vue: VueConstructor) {
-  vue.component(Components.SRow, SRow)
-}
+SRow.install = install(Components.SRow, SRow)
 
 export { SRow }
 export default SRow
diff --git a/src/components/Menu/SMenu/index.ts b/src/components/Menu/SMenu/index.ts
index db104f18..27494e0a 100644
--- a/src/components/Menu/SMenu/index.ts
+++ b/src/components/Menu/SMenu/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SMenu from './SMenu.vue'
 
 const SMenu = _SMenu as SFCWithInstall<typeof _SMenu>
 
-SMenu.install = function (vue: VueConstructor) {
-  vue.component(Components.SMenu, SMenu)
-}
+SMenu.install = install(Components.SMenu, SMenu)
 
 export { SMenu }
 export default SMenu
diff --git a/src/components/Menu/SMenuItem/index.ts b/src/components/Menu/SMenuItem/index.ts
index 6e8e6811..80e5432d 100644
--- a/src/components/Menu/SMenuItem/index.ts
+++ b/src/components/Menu/SMenuItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SMenuItem from './SMenuItem.vue'
 
 const SMenuItem = _SMenuItem as SFCWithInstall<typeof _SMenuItem>
 
-SMenuItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SMenuItem, SMenuItem)
-}
+SMenuItem.install = install(Components.SMenuItem, SMenuItem)
 
 export { SMenuItem }
 export default SMenuItem
diff --git a/src/components/Menu/SMenuItemGroup/index.ts b/src/components/Menu/SMenuItemGroup/index.ts
index 46b508c6..808ff05a 100644
--- a/src/components/Menu/SMenuItemGroup/index.ts
+++ b/src/components/Menu/SMenuItemGroup/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SMenuItemGroup from './SMenuItemGroup.vue'
 
 const SMenuItemGroup = _SMenuItemGroup as SFCWithInstall<typeof _SMenuItemGroup>
 
-SMenuItemGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SMenuItemGroup, SMenuItemGroup)
-}
+SMenuItemGroup.install = install(Components.SMenuItemGroup, SMenuItemGroup)
 
 export { SMenuItemGroup }
 export default SMenuItemGroup
diff --git a/src/components/Menu/SSubMenu/index.ts b/src/components/Menu/SSubMenu/index.ts
index e37fa229..737f7d60 100644
--- a/src/components/Menu/SSubMenu/index.ts
+++ b/src/components/Menu/SSubMenu/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SSubMenu from './SSubmenu.vue'
 
 const SSubmenu = _SSubMenu as SFCWithInstall<typeof _SSubMenu>
 
-SSubmenu.install = function (vue: VueConstructor) {
-  vue.component(Components.SSubmenu, SSubmenu)
-}
+SSubmenu.install = install(Components.SSubmenu, SSubmenu)
 
 export { SSubmenu }
 export default SSubmenu
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
index 75c18e9c..b47e2c00 100644
--- a/src/components/Pagination/index.ts
+++ b/src/components/Pagination/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SPagination from './SPagination.vue'
 
 const SPagination = _SPagination as SFCWithInstall<typeof _SPagination>
 
-SPagination.install = function (vue: VueConstructor) {
-  vue.component(Components.SPagination, SPagination)
-}
+SPagination.install = install(Components.SPagination, SPagination)
 
 export { SPagination }
 export default SPagination
diff --git a/src/components/Radio/SRadio/index.ts b/src/components/Radio/SRadio/index.ts
index 34638d06..50b2ea79 100644
--- a/src/components/Radio/SRadio/index.ts
+++ b/src/components/Radio/SRadio/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SRadio from './SRadio.vue'
 
 const SRadio = _SRadio as SFCWithInstall<typeof _SRadio>
 
-SRadio.install = function (vue: VueConstructor) {
-  vue.component(Components.SRadio, SRadio)
-}
+SRadio.install = install(Components.SRadio, SRadio)
 
 export { SRadio }
 export default SRadio
diff --git a/src/components/Radio/SRadioGroup/index.ts b/src/components/Radio/SRadioGroup/index.ts
index 4849cb19..f11131eb 100644
--- a/src/components/Radio/SRadioGroup/index.ts
+++ b/src/components/Radio/SRadioGroup/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SRadioGroup from './SRadioGroup.vue'
 
 const SRadioGroup = _SRadioGroup as SFCWithInstall<typeof _SRadioGroup>
 
-SRadioGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SRadioGroup, SRadioGroup)
-}
+SRadioGroup.install = install(Components.SRadioGroup, SRadioGroup)
 
 export { SRadioGroup }
 export default SRadioGroup
diff --git a/src/components/ScrollSections/SScrollSectionItem/index.ts b/src/components/ScrollSections/SScrollSectionItem/index.ts
index 5094f4cd..d3f5ea65 100644
--- a/src/components/ScrollSections/SScrollSectionItem/index.ts
+++ b/src/components/ScrollSections/SScrollSectionItem/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SScrollSectionItem from './SScrollSectionItem.vue'
 
 const SScrollSectionItem = _SScrollSectionItem as SFCWithInstall<typeof _SScrollSectionItem>
 
-SScrollSectionItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SScrollSectionItem, SScrollSectionItem)
-}
+SScrollSectionItem.install = install(Components.SScrollSectionItem, SScrollSectionItem)
 
 export { SScrollSectionItem }
 export default SScrollSectionItem
diff --git a/src/components/ScrollSections/SScrollSections/index.ts b/src/components/ScrollSections/SScrollSections/index.ts
index 254e86f1..260ce0bd 100644
--- a/src/components/ScrollSections/SScrollSections/index.ts
+++ b/src/components/ScrollSections/SScrollSections/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SScrollSections from './SScrollSections.vue'
 
 const SScrollSections = _SScrollSections as SFCWithInstall<typeof _SScrollSections>
 
-SScrollSections.install = function (vue: VueConstructor) {
-  vue.component(Components.SScrollSections, SScrollSections)
-}
+SScrollSections.install = install(Components.SScrollSections, SScrollSections)
 
 export { SScrollSections }
 export default SScrollSections
diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts
index a3e62ad1..93304447 100644
--- a/src/components/Scrollbar/index.ts
+++ b/src/components/Scrollbar/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SScrollbar from './SScrollbar.vue'
 
 const SScrollbar = _SScrollbar as SFCWithInstall<typeof _SScrollbar>
 
-SScrollbar.install = function (vue: VueConstructor) {
-  vue.component(Components.SScrollbar, SScrollbar)
-}
+SScrollbar.install = install(Components.SScrollbar, SScrollbar)
 
 export { SScrollbar }
 export default SScrollbar
diff --git a/src/components/Select/SOption/index.ts b/src/components/Select/SOption/index.ts
index 19a4b1d0..0853d03a 100644
--- a/src/components/Select/SOption/index.ts
+++ b/src/components/Select/SOption/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SOption from './SOption.vue'
 
 const SOption = _SOption as SFCWithInstall<typeof _SOption>
 
-SOption.install = function (vue: VueConstructor) {
-  vue.component(Components.SOption, SOption)
-}
+SOption.install = install(Components.SOption, SOption)
 
 export { SOption }
 export default SOption
diff --git a/src/components/Select/SOptionGroup/index.ts b/src/components/Select/SOptionGroup/index.ts
index 8a49fdc2..704dfa52 100644
--- a/src/components/Select/SOptionGroup/index.ts
+++ b/src/components/Select/SOptionGroup/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SOptionGroup from './SOptionGroup.vue'
 
 const SOptionGroup = _SOptionGroup as SFCWithInstall<typeof _SOptionGroup>
 
-SOptionGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SOptionGroup, SOptionGroup)
-}
+SOptionGroup.install = install(Components.SOptionGroup, SOptionGroup)
 
 export { SOptionGroup }
 export default SOptionGroup
diff --git a/src/components/Select/SSelect/index.ts b/src/components/Select/SSelect/index.ts
index 8928c212..ae7dd126 100644
--- a/src/components/Select/SSelect/index.ts
+++ b/src/components/Select/SSelect/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SSelect from './SSelect.vue'
 
 const SSelect = _SSelect as SFCWithInstall<typeof _SSelect>
 
-SSelect.install = function (vue: VueConstructor) {
-  vue.component(Components.SSelect, SSelect)
-}
+SSelect.install = install(Components.SSelect, SSelect)
 
 export { SSelect }
 export default SSelect
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
index 839ae775..f98f9e04 100644
--- a/src/components/Slider/index.ts
+++ b/src/components/Slider/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SSlider from './SSlider.vue'
 
 const SSlider = _SSlider as SFCWithInstall<typeof _SSlider>
 
-SSlider.install = function (vue: VueConstructor) {
-  vue.component(Components.SSlider, SSlider)
-}
+SSlider.install = install(Components.SSlider, SSlider)
 
 export { SSlider }
 export { SliderInputSize } from './consts'
diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts
index 849299b3..cc9b3914 100644
--- a/src/components/Switch/index.ts
+++ b/src/components/Switch/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SSwitch from './SSwitch.vue'
 
 const SSwitch = _SSwitch as SFCWithInstall<typeof _SSwitch>
 
-SSwitch.install = function (vue: VueConstructor) {
-  vue.component(Components.SSwitch, SSwitch)
-}
+SSwitch.install = install(Components.SSwitch, SSwitch)
 
 export { SSwitch }
 export default SSwitch
diff --git a/src/components/Tab/STab/index.ts b/src/components/Tab/STab/index.ts
index 12b0e5da..74c95107 100644
--- a/src/components/Tab/STab/index.ts
+++ b/src/components/Tab/STab/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import TabPane from 'element-ui/lib/tab-pane'
 
 const STab = TabPane as SFCWithInstall<typeof TabPane>
 
-STab.install = function (vue: VueConstructor) {
-  vue.component(Components.STab, STab)
-}
+STab.install = install(Components.STab, STab)
 
 export { STab }
 export default STab
diff --git a/src/components/Tab/STabs/STabs.vue b/src/components/Tab/STabs/STabs.vue
index bb835a5b..2de7c83d 100644
--- a/src/components/Tab/STabs/STabs.vue
+++ b/src/components/Tab/STabs/STabs.vue
@@ -8,7 +8,7 @@
     :addable="addable"
     :editable="editable"
     :stretch="stretch"
-    :tab-position="position"
+    :tab-position="computedPosition"
     :before-leave="beforeLeave"
     @tab-click="handleClick"
     @tab-remove="handleRemove"
@@ -92,22 +92,31 @@ export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject)
   }
 
   get computedType (): string {
+    // neu tabs implemented only with TabsType.ROUNDED type
+    if (this.isNeumorphic) return ''
     if (!(Object.values(TabsType) as Array<string>).includes(this.type)) return ''
     if ([TabsType.ROUNDED, TabsType.ACCENT_ROUNDED].includes(this.type)) return ''
     return this.type
   }
 
+  get computedPosition (): string {
+    if (this.isNeumorphic && ([TabsPosition.LEFT, TabsPosition.RIGHT] as Array<string>).includes(this.position)) {
+      console.warn(`[s-tabs] "${this.position}" position is not available with used design system, "${TabsPosition.TOP}" is used instead`)
+      return TabsPosition.TOP
+    }
+
+    return this.position
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.designSystemClass) {
       cssClasses.push(this.designSystemClass)
     }
-    if (this.type === TabsType.ROUNDED &&
-      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+    // neu tabs implemented only with TabsType.ROUNDED type
+    if (this.isNeumorphic || (this.type === TabsType.ROUNDED && ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position))) {
       cssClasses.push('s-rounded')
-    }
-    if (this.type === TabsType.ACCENT_ROUNDED &&
-      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+    } else if (this.type === TabsType.ACCENT_ROUNDED && ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-accent-rounded')
     }
     if (this.isStandardBorderRadius) {
diff --git a/src/components/Tab/STabs/index.ts b/src/components/Tab/STabs/index.ts
index 4bcc1154..55a94720 100644
--- a/src/components/Tab/STabs/index.ts
+++ b/src/components/Tab/STabs/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _STabs from './STabs.vue'
 
 const STabs = _STabs as SFCWithInstall<typeof _STabs>
 
-STabs.install = function (vue: VueConstructor) {
-  vue.component(Components.STabs, STabs)
-}
+STabs.install = install(Components.STabs, STabs)
 
 export { STabs }
 export default STabs
diff --git a/src/components/Table/SHierarchicalTable/index.ts b/src/components/Table/SHierarchicalTable/index.ts
index f2a7de91..fd0f1164 100644
--- a/src/components/Table/SHierarchicalTable/index.ts
+++ b/src/components/Table/SHierarchicalTable/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SHierarchicalTable from './SHierarchicalTable.vue'
 
 const SHierarchicalTable = _SHierarchicalTable as SFCWithInstall<typeof _SHierarchicalTable>
 
-SHierarchicalTable.install = function (vue: VueConstructor) {
-  vue.component(Components.SHierarchicalTable, SHierarchicalTable)
-}
+SHierarchicalTable.install = install(Components.SHierarchicalTable, SHierarchicalTable)
 
 export { SHierarchicalTable }
 export default SHierarchicalTable
diff --git a/src/components/Table/STable/STable.vue b/src/components/Table/STable/STable.vue
index 16f5c430..b04dbdd7 100644
--- a/src/components/Table/STable/STable.vue
+++ b/src/components/Table/STable/STable.vue
@@ -27,7 +27,7 @@
     :default-sort="defaultSort"
     :tooltip-effect="tooltipTheme"
     :show-summary="showTotal"
-    :sum-text="totalText"
+    sum-text=" "
     :summary-method="totalMethod"
     :span-method="spanMethod"
     :select-on-indeterminate="selectOnIndeterminate"
@@ -206,12 +206,6 @@ export default class STable extends Mixins(SizeMixin) {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly showTotal!: boolean
-  /**
-   * Text for the total row.
-   *
-   * `"Tot"` by default
-   */
-  @Prop({ default: 'Tot', type: String }) readonly totalText!: string
   /**
    * Custom total method. `({ columns, data }) => string`
    */
diff --git a/src/components/Table/STable/index.ts b/src/components/Table/STable/index.ts
index 21315cdb..ad5fbb67 100644
--- a/src/components/Table/STable/index.ts
+++ b/src/components/Table/STable/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _STable from './STable.vue'
 
 const STable = _STable as SFCWithInstall<typeof _STable>
 
-STable.install = function (vue: VueConstructor) {
-  vue.component(Components.STable, STable)
-}
+STable.install = install(Components.STable, STable)
 
 export { STable }
 export default STable
diff --git a/src/components/Table/STableColumn/STableColumn.vue b/src/components/Table/STableColumn/STableColumn.vue
index 0ec1d892..4e8a7039 100644
--- a/src/components/Table/STableColumn/STableColumn.vue
+++ b/src/components/Table/STableColumn/STableColumn.vue
@@ -38,7 +38,6 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 import ElTableColumn from 'element-ui/lib/table-column'
 
 import { Size } from '../../../types'
-
 import { SortDirection, ColumnAlignment } from '../consts'
 
 @Component({
diff --git a/src/components/Table/STableColumn/index.ts b/src/components/Table/STableColumn/index.ts
index 2c85fd6a..c4b3d2a8 100644
--- a/src/components/Table/STableColumn/index.ts
+++ b/src/components/Table/STableColumn/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _STableColumn from './STableColumn.vue'
 
 const STableColumn = _STableColumn as SFCWithInstall<typeof _STableColumn>
 
-STableColumn.install = function (vue: VueConstructor) {
-  vue.component(Components.STableColumn, STableColumn)
-}
+STableColumn.install = install(Components.STableColumn, STableColumn)
 
 export { STableColumn }
 export default STableColumn
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
index 540d9cad..1c77381b 100644
--- a/src/components/Tooltip/index.ts
+++ b/src/components/Tooltip/index.ts
@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _STooltip from './STooltip.vue'
 
 const STooltip = _STooltip as SFCWithInstall<typeof _STooltip>
 
-STooltip.install = function (vue: VueConstructor) {
-  vue.component(Components.STooltip, STooltip)
-}
+STooltip.install = install(Components.STooltip, STooltip)
 
 export { STooltip }
 export { TooltipTheme, TooltipPlacement } from './consts'
diff --git a/src/index.ts b/src/index.ts
index 9af4aa09..25db3641 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+
 import {
   SApp,
   SAside,
diff --git a/src/mixins/BorderRadiusMixin.ts b/src/mixins/BorderRadiusMixin.ts
index 8703a66e..781f3f26 100644
--- a/src/mixins/BorderRadiusMixin.ts
+++ b/src/mixins/BorderRadiusMixin.ts
@@ -1,4 +1,5 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
+
 import { BorderRadius } from '../types'
 
 @Component
diff --git a/src/mixins/SizeMixin.ts b/src/mixins/SizeMixin.ts
index fdacc3a6..51a448dd 100644
--- a/src/mixins/SizeMixin.ts
+++ b/src/mixins/SizeMixin.ts
@@ -1,4 +1,5 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
+
 import { Size } from '../types'
 
 @Component
diff --git a/src/mixins/StatusMixin.ts b/src/mixins/StatusMixin.ts
index 60a0a449..d545e857 100644
--- a/src/mixins/StatusMixin.ts
+++ b/src/mixins/StatusMixin.ts
@@ -1,4 +1,5 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
+
 import { Status } from '../types'
 
 @Component
diff --git a/src/plugins/soramitsuUIStore.ts b/src/plugins/soramitsuUIStore.ts
index 5b7af348..5187c0d9 100644
--- a/src/plugins/soramitsuUIStore.ts
+++ b/src/plugins/soramitsuUIStore.ts
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+
 import { modules, Modules } from '../store'
 
 const SoramitsuUIStorePlugin = {
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index b1bb21c6..d003813d 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -89,7 +89,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types</span></s-col>
-               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
+               <s-col :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    :button-type="item.buttonType"
@@ -104,7 +104,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types with splitted button</span></s-col>
-               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
+               <s-col :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    split-button
diff --git a/src/stories/Form/SForm.stories.ts b/src/stories/Form/SForm.stories.ts
index 594c1a63..ae01ad21 100644
--- a/src/stories/Form/SForm.stories.ts
+++ b/src/stories/Form/SForm.stories.ts
@@ -16,7 +16,6 @@ export const configurable = () => ({
                :disabled="disabled"
                :inline="inline"
                :show-message="showMessage"
-               :status-icon="statusIcon"
                :rules="{
                  user: [
                    { required: true, message: 'Please input user name' },
@@ -54,9 +53,6 @@ export const configurable = () => ({
     },
     showMessage: {
       default: boolean('Show Message', true)
-    },
-    statusIcon: {
-      default: boolean('Status Icon', false)
     }
   }
 })
diff --git a/src/stories/Intro/Intro.stories.mdx b/src/stories/Intro/Intro.stories.mdx
index ba0f71e3..153f09ca 100644
--- a/src/stories/Intro/Intro.stories.mdx
+++ b/src/stories/Intro/Intro.stories.mdx
@@ -22,13 +22,13 @@ npm login --registry="https://nexus.iroha.tech/repository/npm-group/"
 
 # 2. Add as a dependency to the project
 
-Add `"@soramitsu/soramitsu-js-ui": "^0.3.4"` in `package.json` file (`"dependencies"` section)
+Add `"@soramitsu/soramitsu-js-ui": "version"` in `package.json` file (`"dependencies"` section)
 
 OR RUN
 
 `yarn add "@soramitsu/soramitsu-js-ui"`
 
-# 3. Add components with styles to the project
+# 3. Add components with utilities to the project
 
 For instance, `soramitsuUI.ts`:
 
@@ -57,7 +57,7 @@ setTheme(Theme.LIGHT)
 setDesignSystem(DesignSystem.NEUMORPHIC)
 ```
 
-You could also use direct components import:
+You could also use direct components import to reduce vendors bundle size:
 
 ```
 import Vue from 'vue'
@@ -92,11 +92,16 @@ Add `"element-ui"` in `tsconfig.json` file (`"types"` section)
 
 # 5. Add all required styles
 
-The previous section added not all required styles. To fix it you should add imports into `scss` file.
+The previous sections added not all required styles. To fix it you should add imports into `scss` file.
+Also, you should add **Font variables**
 
 For instance, `soramitsu-variables.scss`:
 
 ```
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
+
 @import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 ```
 
@@ -110,6 +115,10 @@ $s-color-theme-accent: #ED145B;
 // Basic colors
 $s-color-base-content-primary: #0D0248;
 
+$s-font-family-default-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/Sora-VariableFont_wght.ttf' !default;
+$s-font-family-mono-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/JetBrainsMono-Regular.woff' !default;
+$s-font-family-icons-path: '~@soramitsu/soramitsu-js-ui/lib/assets/fonts/soramitsu-icons-1.0.0.ttf' !default;
+
 @import '~@soramitsu/soramitsu-js-ui/lib/styles/index';
 
 ```
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index 61735ded..d4ceffb6 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -1,4 +1,5 @@
 import { select } from '@storybook/addon-knobs'
+
 import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu, SIcon } from '../../components'
 import { BorderRadius } from '../../types'
 
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 37d8ad88..3f12aab1 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -26,10 +26,11 @@ export const configurable = () => ({
                :border-radius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
+               :primary="primary"
                @click="handleClick"
               >
-                <span v-if="content">{{ content }}</span>
-                <s-icon v-else :name="icon"/>
+                <s-icon v-if="isAction" :name="icon"/>
+                <span v-else>{{ content }}</span>
               </s-button>
             </s-design-system-provider>`,
   props: {
@@ -57,6 +58,9 @@ export const configurable = () => ({
     alternative: {
       default: boolean('Alternative', false)
     },
+    primary: {
+      default: boolean('Primary', false)
+    },
     tooltip: {
       default: text('Tooltip', '')
     },
@@ -72,6 +76,11 @@ export const configurable = () => ({
   },
   methods: {
     handleClick: () => alert('clicked')
+  },
+  computed: {
+    isAction: ({ type }) => {
+      return type === ButtonTypes.ACTION
+    }
   }
 })
 
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
index 3aea87e6..5bd57302 100644
--- a/src/styles/breadcrumbs.scss
+++ b/src/styles/breadcrumbs.scss
@@ -1,26 +1,28 @@
-.el-breadcrumb__separator {
-  color: var(--s-color-base-content-tertiary);
-  @include font-weight(400);
-}
-.el-breadcrumb__inner {
-  font-size: var(--s-font-size-mini);
-  color: var(--s-color-base-content-tertiary);
-  &.is-link {
+.el-breadcrumb {
+  &__separator {
     color: var(--s-color-base-content-tertiary);
     @include font-weight(400);
-    &:hover {
+  }
+  &__inner {
+    font-size: var(--s-font-size-mini);
+    color: var(--s-color-base-content-tertiary);
+    &.is-link {
+      color: var(--s-color-base-content-tertiary);
+      @include font-weight(400);
+      &:hover {
+        color: var(--s-color-theme-accent);
+      }
+    }
+    a:hover {
       color: var(--s-color-theme-accent);
     }
   }
-  a:hover {
-    color: var(--s-color-theme-accent);
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-  .el-breadcrumb__inner {
-    &, &:hover, & a, & a:hover {
-      color: var(--s-color-base-content-primary);
+  &__item:last-child {
+    pointer-events: none;
+    .el-breadcrumb__inner {
+      &, &:hover, & a, & a:hover {
+        color: var(--s-color-base-content-primary);
+      }
     }
   }
 }
diff --git a/src/styles/button.scss b/src/styles/button.scss
index c9d80ba7..77e3454a 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -139,24 +139,26 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
         font-size: var(--s-icon-font-size-mini);
       }
     }
-    color: var(--s-color-base-content-primary);
-    background-color: var(--s-color-base-background);
-    border-color: var(--s-color-base-background);
-    &.focusing, &:hover, &.s-pressed {
+    &:not(.s-primary) {
       color: var(--s-color-base-content-primary);
-      background-color: var(--s-color-base-background-hover);
-      border-color: var(--s-color-base-background-hover);
-    }
-    @include disabled;
-    &.s-alternative {
-      background-color: var(--s-color-base-on-accent);
-      border-color: var(--s-color-base-border-primary);
+      background-color: var(--s-color-base-background);
+      border-color: var(--s-color-base-background);
       &.focusing, &:hover, &.s-pressed {
         color: var(--s-color-base-content-primary);
-        background-color: var(--s-color-base-background);
-        border-color: var(--s-color-base-background);
+        background-color: var(--s-color-base-background-hover);
+        border-color: var(--s-color-base-background-hover);
       }
       @include disabled;
+      &.s-alternative {
+        background-color: var(--s-color-base-on-accent);
+        border-color: var(--s-color-base-border-primary);
+        &.focusing, &:hover, &.s-pressed {
+          color: var(--s-color-base-content-primary);
+          background-color: var(--s-color-base-background);
+          border-color: var(--s-color-base-background);
+        }
+        @include disabled;
+      }
     }
   }
   span {
@@ -189,13 +191,28 @@ button {
     }
   }
 }
-.el-button-group .el-button.el-button--plain {
-  color: var(--s-color-base-content-primary);
-  border-color: var(--s-color-base-border-primary);
-  background-color: var(--s-color-base-on-accent);
-  &.focusing, &:hover, &.s-pressed {
-    color: var(--s-color-theme-accent);
-    background-color: var(--s-color-base-on-accent);
-    border-color: var(--s-color-theme-accent);
+.el-button-group button.el-button {
+  &.el-button {
+    &--plain {
+      color: var(--s-color-base-content-primary);
+      border-color: var(--s-color-base-border-primary);
+      background-color: var(--s-color-base-on-accent);
+      &.focusing, &:hover, &.s-pressed {
+        color: var(--s-color-theme-accent);
+        background-color: var(--s-color-base-on-accent);
+        border-color: var(--s-color-theme-accent);
+      }
+    }
+    &--primary:first-child:hover {
+      border-right-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 }
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 17cf523b..1bc74936 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -12,12 +12,14 @@
       border-color: transparent;
     }
   }
-  .el-card__header {
-    border-bottom-color: transparent;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
+  .el-card {
+    &__header {
+      border-bottom-color: transparent;
+      padding-bottom: 0;
+      text-align: left;
+    }
+    &__body {
+      padding: 18px 20px;
+    }
   }
 }
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index baae194d..ea7c3866 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -13,15 +13,20 @@
 }
 .el-collapse-item:last-child {
   margin-bottom: 0;
-  .el-collapse-item__header {
-    border: none;
+  .el-collapse-item {
+    &__header {
+      border: none;
+    }
+    &__wrap {
+      border-bottom: none;
+    }
   }
 }
-.el-collapse-item__ {
-  &wrap {
+.el-collapse-item {
+  &__wrap {
     border-bottom-color: var(--s-color-base-border-secondary);
   }
-  &header {
+  &__header {
     color: var(--s-color-base-content-primary);
     border-bottom-color: var(--s-color-base-border-secondary);
     &.is-active {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index ed5c12c9..016330a6 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -192,11 +192,6 @@ button > span {
   position: relative;
 }
 
-// TODO: move to separate file and import to storybook
-.sbdocs.sbdocs-preview div[id^='story--'] > * {
-  height: auto !important;
-}
-
 @mixin res($key, $map: $--breakpoints) {
   @if map-has-key($map, $key) {
     @media only screen and #{inspect(map-get($map, $key))} {
@@ -222,37 +217,39 @@ button > span {
 }
 
 .el-message-box {
-  .el-message-box__header {
-    .el-message-box__title {
-      color: var(--s-color-base-content-primary);
-      font-size: var(--s-heading5-font-size);
-    }
-  }
-  .el-message-box__btns {
-    button.el-button.el-button--default.el-button--small {
-      height: $s-size-medium;
-      font-size: var(--s-font-size-small);
-      border-radius: var(--s-border-radius-mini);
-      &:hover, &:active, &:focus {
-        color: var(--s-color-theme-accent);
-        background-color: var(--s-color-base-on-accent);
-        border-color: var(--s-color-theme-accent);
+  & & {
+    &__header {
+      .el-message-box__title {
+        color: var(--s-color-base-content-primary);
+        font-size: var(--s-heading5-font-size);
       }
-      &.el-button--primary {
+    }
+    &__btns {
+      button.el-button.el-button--default.el-button--small {
+        height: $s-size-medium;
+        font-size: var(--s-font-size-small);
+        border-radius: var(--s-border-radius-mini);
         &:hover, &:active, &:focus {
-          color: var(--s-color-base-on-accent);
-        }
-        &:hover {
-          background-color: var(--s-color-theme-accent-hover);
-          border-color: var(--s-color-theme-accent-hover);
-        }
-        &:active {
-          background-color: var(--s-color-theme-accent-pressed);
-          border-color: var(--s-color-theme-accent-pressed);
+          color: var(--s-color-theme-accent);
+          background-color: var(--s-color-base-on-accent);
+          border-color: var(--s-color-theme-accent);
         }
-        &:focus {
-          background-color: var(--s-color-theme-accent-focused);
-          border-color: var(--s-color-theme-accent-focused);
+        &.el-button--primary {
+          &:hover, &:active, &:focus {
+            color: var(--s-color-base-on-accent);
+          }
+          &:hover {
+            background-color: var(--s-color-theme-accent-hover);
+            border-color: var(--s-color-theme-accent-hover);
+          }
+          &:active {
+            background-color: var(--s-color-theme-accent-pressed);
+            border-color: var(--s-color-theme-accent-pressed);
+          }
+          &:focus {
+            background-color: var(--s-color-theme-accent-focused);
+            border-color: var(--s-color-theme-accent-focused);
+          }
         }
       }
     }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 9f16603d..8c4c1cf6 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -21,20 +21,22 @@
   .s-border-radius-mini & {
     border-radius: var(--s-border-radius-mini);
   }
-  .el-dialog__header .el-dialog__title {
-    @include font-weight(700, true);
-  }
-  .el-dialog__title {
-    font-size: var(--s-heading5-font-size);
-    color: var(--s-color-base-content-primary);
-    font-feature-settings: var(--s-font-feature-settings-heading);
+  & & {
+    &__header, &__title {
+      @include font-weight(700, true);
+    }
+    &__title {
+      font-size: var(--s-heading5-font-size);
+      color: var(--s-color-base-content-primary);
+      font-feature-settings: var(--s-font-feature-settings-heading);
+    }
+    &__body {
+      color: var(--s-color-base-content-primary);
+    }
   }
   > * {
     word-break: break-word;
   }
-  .el-dialog__body {
-    color: var(--s-color-base-content-primary);
-  }
 }
 .v-modal {
   background-color: var(--s-color-utility-overlay);
diff --git a/src/styles/form.scss b/src/styles/form.scss
index fa70b9a9..b3b125ad 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -10,7 +10,9 @@
     color: var(--s-color-base-content-primary);
   }
   &.is-error {
-    margin-bottom: 0;
+    &.with-message {
+      margin-bottom: 0;
+    }
     > .el-form-item__content {
       > .el-form-item__error {
         margin-bottom: 6px;
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 9a0a3c9a..14828ae0 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -46,7 +46,7 @@ $footer-height: 26px;
 .jsoneditor {
   border: none !important;
   font-family: var(--s-font-family-mono);
-  .jsoneditor-outer {
+  & &-outer {
     height: calc(100% - #{$footer-height});
     margin-bottom: -1px !important;
     padding-bottom: 1px !important;
diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss
index 1955a3e8..56035657 100644
--- a/src/styles/neumorphism/button.scss
+++ b/src/styles/neumorphism/button.scss
@@ -171,7 +171,7 @@ $neu-button-padding-mini: 3px 6px !default;
     }
     @include disabled;
 
-    &.s-alternative {
+    &.s-alternative:not(.s-action) {
       background: $neu-button-primary-background-color-alternative;
       border-width: $neu-button-primary-border-width-alternative;
       box-shadow: $neu-button-primary-box-shadow-alternative;
@@ -244,43 +244,45 @@ $neu-button-padding-mini: 3px 6px !default;
   }
 
   &.s-action {
-    background: $neu-button-action-background-color;
-    border-color: $neu-button-action-border-color;
-    border-style: $neu-button-action-border-style;
-    border-width: $neu-button-action-border-width;
-    box-shadow: $neu-button-action-box-shadow;
-    color: $neu-button-action-text-color;
-
     @include action-size('big');
     @include action-size('medium');
     @include action-size('small');
     @include action-size('mini');
 
-    &:hover, &:focus, &.focusing {
-      background: $neu-button-action-background-color-hover;
-      border-color: $neu-button-action-border-color-hover;
-      color: $neu-button-action-text-color-hover;
-      box-shadow: $neu-button-action-box-shadow-hover;
-    }
-    &:active, &.s-pressed {
-      background: $neu-button-action-background-color-pressed;
-      border-color: $neu-button-action-border-color-pressed;
-      color: $neu-button-action-text-color-pressed;
-      box-shadow: $neu-button-action-box-shadow-pressed;
-    }
-    @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed);
-    &.s-alternative {
-      color: $neu-button-action-text-color-alternative;
+    &:not(.s-primary) {
+      background: $neu-button-action-background-color;
+      border-color: $neu-button-action-border-color;
+      border-style: $neu-button-action-border-style;
+      border-width: $neu-button-action-border-width;
+      box-shadow: $neu-button-action-box-shadow;
+      color: $neu-button-action-text-color;
 
-      &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
-        background-color: $neu-button-action-background-color-alternative;
-        border-color: $neu-button-action-border-color-alternative;
-        box-shadow: $neu-button-action-box-shadow-alternative;
+      &:hover, &:focus, &.focusing {
+        background: $neu-button-action-background-color-hover;
+        border-color: $neu-button-action-border-color-hover;
+        color: $neu-button-action-text-color-hover;
+        box-shadow: $neu-button-action-box-shadow-hover;
       }
-      &:hover, &:focus, &.focusing, &:active, &.s-pressed {
-        color: $neu-button-action-text-color-alternative-active;
+      &:active, &.s-pressed {
+        background: $neu-button-action-background-color-pressed;
+        border-color: $neu-button-action-border-color-pressed;
+        color: $neu-button-action-text-color-pressed;
+        box-shadow: $neu-button-action-box-shadow-pressed;
+      }
+      @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed);
+      &.s-alternative {
+        color: $neu-button-action-text-color-alternative;
+
+        &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+          background-color: $neu-button-action-background-color-alternative;
+          border-color: $neu-button-action-border-color-alternative;
+          box-shadow: $neu-button-action-box-shadow-alternative;
+        }
+        &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+          color: $neu-button-action-text-color-alternative-active;
+        }
+        @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative);
       }
-      @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative);
     }
   }
 }
diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss
index 7e6b8aa3..8efbb605 100644
--- a/src/styles/neumorphism/input.scss
+++ b/src/styles/neumorphism/input.scss
@@ -32,7 +32,7 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
       letter-spacing: var(--s-letter-spacing-small);
 
       &::placeholder {
-        color: var(--s-color-base-content-primary);
+        color: var(--s-color-base-content-tertiary);
       }
     }
 
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index ebce83c7..7f26490f 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -27,9 +27,6 @@
       background-color: var(--s-color-theme-accent);
       color: var(--s-color-base-on-accent);
     }
-    &:hover {
-      color: var(--s-color-theme-accent);
-    }
   }
   .btn-prev,
   .btn-next {
@@ -41,6 +38,7 @@
     }
     &:disabled {
       color: var(--s-color-base-content-quaternary);
+      background-color: transparent;
     }
   }
   @include pagination-border-radius;
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 5e5f7128..2bec5150 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -127,7 +127,7 @@
   left: 0;
   top: 0;
   > .el-icon.el-icon-arrow-right {
-    font-family: var(--s-font-family-icons);
+    font-family: var(--s-font-family-icons) !important;
     @extend .s-icon-chevron-down-rounded-16;
   }
   &--expanded {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 979a6175..a1fb4c83 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -40,7 +40,7 @@ $s-shadow-color-light: rgba(255, 255, 255, 1);
 $s-shadow-color-light-dark: rgba(255, 255, 255, 0.8);
 $s-shadow-element: 1px 1px 5px $s-shadow-color-light, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px $s-shadow-color-dark;
 $s-shadow-element-pressed: -5px -5px 10px $s-shadow-color-light, 1px 1px 10px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark;
-$s-shadow-dialog: -5px -5px 15px rgba(255, 255, 255, 0.9), 1px 1px 15px var(--s-shadow-color-dark), inset 1px 1px 10px var(--s-shadow-color-light);
+$s-shadow-dialog: -10px -10px 30px rgba(255, 255, 255, 0.9), 20px 20px 60px var(--s-shadow-color-dark), inset 1px 1px 10px var(--s-shadow-color-light);
 
 // TODO: use it and discuss colors of these shadows
 $s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;
diff --git a/src/utils/install.ts b/src/utils/install.ts
new file mode 100644
index 00000000..b217a5e2
--- /dev/null
+++ b/src/utils/install.ts
@@ -0,0 +1,9 @@
+import { VueConstructor } from 'vue'
+
+import { Components, SFCWithInstall } from '../types/components'
+
+export default function (component: Components, instance: SFCWithInstall<VueConstructor>) {
+  return function (vue: VueConstructor) {
+    vue.component(component, instance)
+  }
+}