diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 6105f843..78f1e9da 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum ButtonTypes {
   PRIMARY = 'primary',
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
index 96554de5..f7d55fd0 100644
--- a/src/components/Checkbox/consts.ts
+++ b/src/components/Checkbox/consts.ts
@@ -1,3 +1,3 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export const CheckboxSize = Size
diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index d1feb8db..7d16c283 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -2,6 +2,7 @@
   <el-collapse
     :value="value"
     :accordion="accordion"
+    :style="computedStyles"
     @change="handleChange"
   >
     <slot></slot>
@@ -9,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 
 @Component
 export default class SCollapse extends Vue {
@@ -23,6 +24,22 @@ export default class SCollapse extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly accordion!: boolean
+  /**
+   * Will borders be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly borders!: boolean
+
+  @Provide('sCollapse') sCollapse = this
+
+  get computedStyles (): object {
+    const styles = {} as any
+    if (!this.borders) {
+      styles.border = 'none'
+    }
+    return styles
+  }
 
   handleChange (activeNames: string | number | Array<string | number>): void {
     this.$emit('change', activeNames)
@@ -34,7 +51,7 @@ export default class SCollapse extends Vue {
 @import "../../styles/variables.scss";
 
 .el-collapse {
-  border-top-color: $color-neutral-hover;
-  border-bottom-color: $color-neutral-hover;
+  border-top-color: #F5F5F5;
+  border-bottom-color: #F5F5F5;
 }
 </style>
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index c55719ad..bc1ad26f 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -3,6 +3,7 @@
     :title="title"
     :name="name"
     :disabled="disabled"
+    :class="computedClasses"
   >
     <slot slot="title" name="title"></slot>
     <slot></slot>
@@ -10,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
 @Component
 export default class SCollapseItem extends Vue {
@@ -28,6 +29,25 @@ export default class SCollapseItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will bottom padding be hidden.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withoutPadding!: boolean
+
+  @Inject({ default: '', from: 'sCollapse' }) sCollapse
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (!(this.sCollapse || {}).borders) {
+      cssClasses.push('without-border')
+    }
+    if (this.withoutPadding) {
+      cssClasses.push('without-padding')
+    }
+    return cssClasses
+  }
 }
 </script>
 
@@ -35,13 +55,22 @@ export default class SCollapseItem extends Vue {
 @import "../../styles/variables.scss";
 // @import "../../styles/icons.scss";
 
+.without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
+    border: none;
+  }
+}
+.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
 .el-collapse-item__ {
   &wrap {
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
   }
   &header {
     color: $color-basic-black;
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
     &.is-active {
       border-bottom-color: transparent;
     }
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index 4c933ba3..a40d0c01 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -168,5 +168,8 @@ export default class SDialog extends Vue {
     font-size: 16px;
     color: $color-basic-black;
   }
+  > * {
+    word-break: break-word;
+  }
 }
 </style>
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue
new file mode 100644
index 00000000..6517e44c
--- /dev/null
+++ b/src/components/Divider/SDivider.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-divider :direction="direction" :content-position="contentPosition">
+    <slot></slot>
+  </el-divider>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { DividerDirection, ContentPosition } from './consts'
+
+@Component
+export default class SDivider extends Vue {
+  /**
+   * Divider direction property. Can be `"horizontal"` or `"vertical"`.
+   *
+   * By default it's set to `"horizontal"`
+   */
+  @Prop({ default: DividerDirection.HORIZONTAL, type: String }) readonly direction!: string
+  /**
+   * Position of the content. Can be `"left"`, `"right"` or `"center"`.
+   *
+   * By default it's set to `"center"`
+   */
+  @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-divider {
+  background-color: #F5F5F5;
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
+</style>
diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts
new file mode 100644
index 00000000..10f7624d
--- /dev/null
+++ b/src/components/Divider/consts.ts
@@ -0,0 +1,9 @@
+import { Direction } from '../../types'
+
+export enum ContentPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center'
+}
+
+export const DividerDirection = Direction
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
new file mode 100644
index 00000000..7426c29d
--- /dev/null
+++ b/src/components/Divider/index.ts
@@ -0,0 +1,3 @@
+import SDivider from './SDivider.vue'
+
+export { SDivider }
diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index c6d7fb5f..8fd34a23 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum DropdownType {
   DEFAULT = 'default',
diff --git a/src/components/Form/consts.ts b/src/components/Form/consts.ts
index 722d430f..0b7baf42 100644
--- a/src/components/Form/consts.ts
+++ b/src/components/Form/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum LabelPosition {
   LEFT = 'left',
diff --git a/src/components/Layout/Container/consts.ts b/src/components/Layout/Container/consts.ts
index 1865dc9b..fc6aae38 100644
--- a/src/components/Layout/Container/consts.ts
+++ b/src/components/Layout/Container/consts.ts
@@ -1,4 +1,3 @@
-export enum ContainerDirection {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal'
-}
+import { Direction } from '../../../types'
+
+export const ContainerDirection = Direction
diff --git a/src/components/Layout/Header/SHeader.vue b/src/components/Layout/Header/SHeader.vue
index 2715d822..8fb34577 100644
--- a/src/components/Layout/Header/SHeader.vue
+++ b/src/components/Layout/Header/SHeader.vue
@@ -24,5 +24,6 @@ export default class SHeader extends Vue {
   padding: 12px;
   box-shadow: 0px 0px 8px rgba(45, 41, 38, 0.2);
   font-size: 18px;
+  z-index: 1;
 }
 </style>
diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 43406972..915db4dc 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -3,13 +3,18 @@
     <span v-if="title" class="title">{{ title }}</span>
     <slot v-if="this.$slots.title && !title" name="title"></slot>
     <slot></slot>
+    <s-divider v-if="withDivider" style="margin: 20px 0 0 0;"></s-divider>
   </section>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-@Component
+import { SDivider } from '../Divider'
+
+@Component({
+  components: { SDivider }
+})
 export default class SScrollSectionItem extends Vue {
   /**
    * Required section property of scroll section item. It should be unique.
@@ -28,6 +33,12 @@ export default class SScrollSectionItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  @Inject({ default: '', from: 'sScrollSections' }) sScrollSections
+
+  get withDivider (): boolean {
+    return !!(this.sScrollSections || {}).withDivider
+  }
 }
 </script>
 
@@ -39,6 +50,9 @@ export default class SScrollSectionItem extends Vue {
   }
   &:last-child {
     margin-bottom: 10px;
+    .el-divider.el-divider--horizontal {
+      height: 0;
+    }
   }
   .title {
     font-weight: bold;
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 18ec3e78..fe3bc35f 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 import VueRouter from 'vue-router'
 
 @Component
@@ -75,7 +75,15 @@ export default class SScrollSections extends Vue {
    *
    * `{ menu: 1, sections: 2 }` by default
    */
-  @Prop({ type: Object, default: { menu: 1, sections: 2 } }) readonly flexSize!: any
+  @Prop({ type: Object, default: () => ({ menu: 1, sections: 2 }) }) readonly flexSize!: any
+  /**
+   * Will dividers be displayed.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withDivider!: boolean
+
+  @Provide('sScrollSections') sScrollSections = this
 
   menuItems: Vue[] = []
   activeSection = ''
@@ -229,5 +237,9 @@ export default class SScrollSections extends Vue {
 }
 .s-scroll-content {
   padding-bottom: 90%;
+  color: $color-basic-black;
+  .title {
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index ec3b1914..bb5ff572 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
diff --git a/src/components/index.ts b/src/components/index.ts
index 16e8ad4e..4180e66b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -11,6 +11,7 @@ import { SCol } from './Layout/Col'
 import { SCollapse, SCollapseItem } from './Collapse'
 import { SContainer } from './Layout/Container'
 import { SDialog } from './Dialog'
+import { SDivider } from './Divider'
 import { SDropdown, SDropdownItem } from './Dropdown'
 import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
@@ -37,6 +38,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
diff --git a/src/index.ts b/src/index.ts
index 12c29690..e5f97622 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,7 @@ import {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
@@ -51,6 +52,7 @@ const elements = [
   { component: SCollapseItem, name: Components.SCollapseItem },
   { component: SContainer, name: Components.SContainer },
   { component: SDialog, name: Components.SDialog },
+  { component: SDivider, name: Components.SDivider },
   { component: SDropdown, name: Components.SDropdown },
   { component: SDropdownItem, name: Components.SDropdownItem },
   { component: SFooter, name: Components.SFooter },
@@ -99,6 +101,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts
index 8ffc0b74..aa090194 100644
--- a/src/plugins/elementUI.ts
+++ b/src/plugins/elementUI.ts
@@ -13,6 +13,7 @@ import {
   Container,
   DatePicker,
   Dialog,
+  Divider,
   Dropdown,
   DropdownItem,
   DropdownMenu,
@@ -53,6 +54,7 @@ Vue.use(BreadcrumbItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Dialog)
+Vue.use(Divider)
 Vue.use(Footer)
 Vue.use(Menu)
 Vue.use(MenuItem)
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index fdc90126..fb86361b 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -10,7 +10,7 @@ export default {
 
 export const configurable = () => ({
   components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" @change="handleChange" style="flex: 1;">
+  template: `<s-collapse :accordion="accordion" :borders="borders" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -32,6 +32,9 @@ export const configurable = () => ({
   props: {
     accordion: {
       default: boolean('Accordion', false)
+    },
+    borders: {
+      default: boolean('Borders', true)
     }
   },
   methods: {
diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
new file mode 100644
index 00000000..1c43f88a
--- /dev/null
+++ b/src/stories/SDivider.stories.ts
@@ -0,0 +1,33 @@
+import { withKnobs, select } from '@storybook/addon-knobs'
+
+import { SDivider, SRow } from '../components'
+import { DividerDirection, ContentPosition } from '../components/Divider/consts'
+
+export default {
+  component: SDivider,
+  title: 'Design System/Divider',
+  decorators: [withKnobs]
+}
+
+export const configurable = () => ({
+  components: { SRow, SDivider },
+  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+               <span>First text paragraph</span>
+               <s-divider
+                 :style="direction === 'vertical' ? { height: '56px' } : {}"
+                 :direction="direction"
+                 :content-position="contentPosition"
+               >
+                 Content between divider
+               </s-divider>
+               <span>Second text paragraph</span>
+             </s-row>`,
+  props: {
+    direction: {
+      default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL)
+    },
+    contentPosition: {
+      default: select('Content position', Object.values(ContentPosition), ContentPosition.CENTER)
+    }
+  }
+})
diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
index b713ab5a..db980f2c 100644
--- a/src/stories/ScrollSections/SScrollSectionItem.stories.ts
+++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
@@ -1,4 +1,5 @@
 import StoryRouter from 'storybook-vue-router'
+
 import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts
index aa8e59a6..1607c1c8 100644
--- a/src/stories/ScrollSections/SScrollSections.stories.ts
+++ b/src/stories/ScrollSections/SScrollSections.stories.ts
@@ -1,15 +1,17 @@
+import { boolean, withKnobs } from '@storybook/addon-knobs'
 import StoryRouter from 'storybook-vue-router'
+
 import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSections,
   title: 'Design System/Scroll Sections',
-  decorators: [StoryRouter({}, { initialEntry: '/' })]
+  decorators: [StoryRouter({}, { initialEntry: '/' }), withKnobs]
 }
 
 export const defaultUsage = () => ({
   components: { SScrollSections, SScrollSectionItem },
-  template: `<s-scroll-sections :router="this.$router">
+  template: `<s-scroll-sections :router="this.$router" :with-divider="withDivider">
                <s-scroll-section-item
                  v-for="index in 11"
                  :key="index"
@@ -18,5 +20,10 @@ export const defaultUsage = () => ({
                >
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
                </s-scroll-section-item>
-             </s-scroll-sections>`
+             </s-scroll-sections>`,
+  props: {
+    withDivider: {
+      default: boolean('With Divider', false)
+    }
+  }
 })
diff --git a/src/types/components.ts b/src/types/components.ts
index ed91efee..91d0df47 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -12,6 +12,7 @@ export enum Components {
   SCollapseItem = 'SCollapseItem',
   SContainer = 'SContainer',
   SDialog = 'SDialog',
+  SDivider = 'SDivider',
   SDropdown = 'SDropdown',
   SDropdownItem = 'SDropdownItem',
   SFooter = 'SFooter',
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..70855221
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,10 @@
+export enum Size {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small'
+}
+
+export enum Direction {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical'
+}
diff --git a/src/types/size.ts b/src/types/size.ts
deleted file mode 100644
index 4c1784de..00000000
--- a/src/types/size.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum Size {
-  BIG = 'big',
-  MEDIUM = 'medium',
-  SMALL = 'small'
-}