diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue
new file mode 100644
index 000000000..6e734caa7
--- /dev/null
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country duplicate"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CountriesList from 'data/CountriesList'
+import VuesticMultiSelect from './VuesticMultiSelect'
+
+export default {
+  components: {
+    VuesticMultiSelect,
+  },
+  data () {
+    return {
+      selectedCountries: [],
+      CountriesList,
+    }
+  },
+}
+</script>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
index 2452df512..369923f61 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
@@ -8,9 +8,15 @@
         :class="{'has-value': !!displayValue}"
         v-bind:value="displayValue"
         required/>
-      <i class="ion ion-ios-arrow-down icon-right input-icon"></i>
       <label class="control-label">{{label}}</label><i class="bar"></i>
       <small v-show="hasErrors()" class="help text-danger">{{ showRequiredError() }}</small>
+      <i class="ion ion-ios-arrow-down icon-right input-icon dropdown-ion"></i>
+    </div>
+    <div v-if="isClearable">
+      <i
+        class="fa fa-close icon-cross icon-right input-icon multiselect-form-group__unselect"
+        @click="unselectOptions"
+      />
     </div>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <scrollbar ref="scrollbar">
@@ -28,102 +34,126 @@
 </template>
 
 <script>
-  import Dropdown from 'vuestic-directives/Dropdown'
-  import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
+import Dropdown from 'vuestic-directives/Dropdown'
+import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
 
-  export default {
-    name: 'vuestic-multi-select',
-    components: {
-      Scrollbar
+export default {
+  name: 'vuestic-multi-select',
+  components: {
+    Scrollbar
+  },
+  directives: {
+    dropdown: Dropdown
+  },
+  data () {
+    return {
+      displayValue: '',
+      validated: false
+    }
+  },
+  props: {
+    label: String,
+    itemsChosenPlaceholder: {
+      type: String,
+      default: 'chosen'
     },
-    directives: {
-      dropdown: Dropdown
+    clearable: {
+      type: Boolean,
+      default: true
     },
-    data () {
-      return {
-        displayValue: '',
-        validated: false
-      }
+    options: Array,
+    value: Array,
+    optionKey: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'multiselect'
+    }
+  },
+  mounted () {
+    this.$emit('input', this.value)
+  },
+
+  updated: function () {
+    this.updateDisplayValue(this.value)
+  },
+
+  methods: {
+    unselectOptions () {
+      this.value.splice(0, this.value.length)
+      this.displayValue = ''
+      this.$emit('input', this.value)
+    },
+    toggleSelection (option) {
+      let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
+      this.updateDisplayValue(newVal)
+      this.$emit('input', newVal)
+    },
+    isOptionSelected (option) {
+      return this.value.includes(option)
+    },
+    selectOption (option) {
+      return this.value.concat(option)
+    },
+    deselectOption (option) {
+      return this.value.filter(item => item !== option)
     },
-    props: {
-      label: String,
-      itemsChosenPlaceholder: {
-        type: String,
-        default: 'chosen'
-      },
-      options: Array,
-      value: Array,
-      optionKey: String,
-      required: {
-        type: Boolean,
-        default: false
-      },
-      name: {
-        type: String,
-        default: 'multiselect'
+    updateDisplayValue (newVal) {
+      if (newVal.length > 2) {
+        this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
+      } else {
+        this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
       }
     },
-    mounted () {
-      this.$emit('input', this.value)
+    validate () {
+      this.validated = true
     },
-
-    updated: function () {
-      this.updateDisplayValue(this.value)
+    isValid () {
+      let isValid = true
+      if (this.required) {
+        isValid = !!this.displayValue
+      }
+      return isValid
     },
-
-    methods: {
-      toggleSelection (option) {
-        let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
-        this.updateDisplayValue(newVal)
-        this.$emit('input', newVal)
-      },
-      isOptionSelected (option) {
-        return this.value.includes(option)
-      },
-      selectOption (option) {
-        return this.value.concat(option)
-      },
-      deselectOption (option) {
-        return this.value.filter(item => item !== option)
-      },
-      updateDisplayValue (newVal) {
-        if (newVal.length > 2) {
-          this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
-        } else {
-          this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
-        }
-      },
-      validate () {
-        this.validated = true
-      },
-      isValid () {
-        let isValid = true
-        if (this.required) {
-          isValid = !!this.displayValue
-        }
-        return isValid
-      },
-      hasErrors () {
-        let hasErrors = false
-        if (this.required) {
-          hasErrors = this.validated && !this.displayValue
-        }
-        return hasErrors
-      },
-      showRequiredError () {
-        return `The ${this.name} field is required`
+    hasErrors () {
+      let hasErrors = false
+      if (this.required) {
+        hasErrors = this.validated && !this.displayValue
       }
+      return hasErrors
+    },
+    showRequiredError () {
+      return `The ${this.name} field is required`
+    }
+  },
+  computed: {
+    isClearable () {
+      return (this.clearable && this.value.length !== 0 && this.displayValue !== '')
     }
   }
+}
 </script>
 
-<style lang="scss">
-  .multiselect-form-group {
-    .dropdown-menu {
-      padding: 0;
-      .vuestic-scrollbar {
-        height: $dropdown-item-height * 4;
-      }
+<style lang="scss" scoped>
+.multiselect-form-group {
+  &__unselect {
+    margin-right: 20px;
+    cursor: pointer;
+  }
+
+  .dropdown-ion {
+    top: 12px;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    padding: 0;
+    .vuestic-scrollbar {
+      height: $dropdown-item-height * 4;
     }
   }
+}
 </style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
index 378e48412..5c5b522df 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="row justify-content-around">
-    <vuestic-simple-select
-      style="width: 240px; padding-top: 400px"
-      label="Select country"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
-    <vuestic-simple-select
-      style="width: 240px"
-      label="Select country duplicate"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country duplicate"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 0a9251a55..9dce58075 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -1,140 +1,200 @@
 <template>
-  <div
-    class="form-group with-icon-right dropdown select-form-group"
-    v-dropdown.isBlocked
-    :class="{'has-error': hasErrors()}">
-    <div class="input-group dropdown-toggle">
-      <input
-        @focus="showDropdown()"
-        :class="{'has-value': !!value}"
-        v-model="displayValue"
-        :name="name"
-        :options="options"/>
-      <i class="ion ion-ios-arrow-down icon-right input-icon"></i>
-      <label class="control-label">{{label}}</label><i class="bar"></i>
-      <small v-show="hasErrors()" class="help text-danger">
-        {{ showRequiredError() }}
-      </small>
-    </div>
+  <div class="vuestic-simple-select">
     <div
-      class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-      <scrollbar ref="scrollbar">
-        <div class="dropdown-menu-content">
-          <div class="dropdown-item"
-               :class="{'selected': isOptionSelected(option)}"
-               v-for="option in filteredList"
-               @click="selectOption(option)">
+      class="form-group with-icon-right dropdown select-form-group"
+      v-dropdown.isBlocked
+      :class="{'has-error': hasErrors()}">
+      <div class="input-group dropdown-toggle vuestic-simple-select__dropdown-toggle">
+        <div>
+          <input
+            @focus="showDropdown()"
+            :class="{'has-value': !!value}"
+            v-model="displayValue"
+            :name="name"
+            :options="options">
+          <label class="control-label">{{label}}</label><i class="bar"/>
+          <small v-show="hasErrors()" class="help text-danger">
+            {{ showRequiredError() }}
+          </small>
+        </div>
+        <i
+          class="ion ion-ios-arrow-down icon-right input-icon vuestic-simple-select__dropdown-arrow"
+          @click="showDropdown"
+        />
+      </div>
+      <div v-if="isClearable">
+        <i
+          class="fa fa-close icon-cross icon-right input-icon vuestic-simple-select__unselect"
+          @click="unselectOption"
+        />
+      </div>
+      <div
+        class="dropdown-menu vuestic-simple-select__dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <scrollbar ref="scrollbar">
+          <div class="dropdown-menu-content vuestic-simple-select__dropdown-menu-content">
+            <div class="dropdown-item vuestic-simple-select__dropdown-item"
+                 v-for="option in filteredList"
+                 :class="{'selected': isOptionSelected(option)}"
+                 @click="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
+            </div>
           </div>
-        </div>
-      </scrollbar>
+        </scrollbar>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import Dropdown from 'vuestic-directives/Dropdown'
-  import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
+import Dropdown from 'vuestic-directives/Dropdown'
+import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
 
-  export default {
-    name: 'vuestic-simple-select',
-    components: {
-      Scrollbar
+export default {
+  name: 'vuestic-simple-select',
+  components: {
+    Scrollbar
+  },
+  directives: {
+    dropdown: Dropdown
+  },
+  props: {
+    label: String,
+    options: Array,
+    value: {
+      default: '',
+      required: true
     },
-    directives: {
-      dropdown: Dropdown
-    },
-    props: {
-      label: String,
-      options: Array,
-      value: {
-        default: '',
-        required: true
-      },
-      optionKey: String,
-      required: {
-        type: Boolean,
-        default: false
-      },
-      name: {
-        type: String,
-        default: 'simple-select'
-      },
+    optionKey: String,
+    required: {
+      type: Boolean,
+      default: false
     },
-    data () {
-      return {
-        validated: false,
-        displayValue: this.value
-      }
+    clearable: {
+      type: Boolean,
+      default: true
     },
-    watch: {
-      value: {
-        handler (value) {
-          if (this.optionKey) {
-            this.displayValue = value[this.optionKey]
-          } else {
-            this.displayValue = value || ''
-          }
-        },
-        immediate: true,
-      }
+    name: {
+      type: String,
+      default: 'simple-select'
     },
-    computed: {
-      filteredList () {
-        const optionKey = this.optionKey
-        const displayValue = this.displayValue
+  },
+  data () {
+    return {
+      validated: false,
+      displayValue: this.value,
+      selectedValue: this.value
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        if (this.optionKey) {
+          this.selectedValue = value[this.optionKey]
+          this.displayValue = value[this.optionKey]
+        } else {
+          this.displayValue = value || ''
+          this.selectedValue = value || ''
+        }
+      },
+      immediate: true,
+    }
+  },
+  computed: {
+    filteredList () {
+      const optionKey = this.optionKey
+      const displayValue = this.displayValue
+      if (displayValue === '') {
+        return this.options
+      } else {
         return this.options.filter(function (item) {
           if (optionKey && item[optionKey]) {
-            return item[optionKey].search(displayValue) === 0
+            if (displayValue) {
+              return item[optionKey].toLowerCase().search(displayValue.toLowerCase()) === 0
+            }
           } else {
-            return item.search(displayValue) === 0
+            return item.toLowerCase().search(displayValue.toLowerCase()) === 0
           }
         })
-      },
+      }
     },
-    methods: {
-      showDropdown () {
-        this.displayValue = ''
-      },
-      isOptionSelected (option) {
-        return this.displayValue === option
-      },
-      selectOption (option) {
-        this.displayValue = option
-        this.$emit('input', option)
-      },
-      validate () {
-        this.validated = true
-      },
-      isValid () {
-        let isValid = true
-        if (this.required) {
-          isValid = !!this.value
-        }
-        return isValid
-      },
-      hasErrors () {
-        let hasErrors = false
-        if (this.required) {
-          hasErrors = this.validated && !this.value
-        }
-        return hasErrors
-      },
-      showRequiredError () {
-        return `The ${this.name} field is required`
-      },
+    isClearable () {
+      return (this.clearable && this.selectedValue !== '' && this.displayValue !== '' && this.selectedValue !== undefined)
+    },
+    placeholder () {
+      if (this.optionKey && this.selectedValue) {
+        return this.selectedValue[this.optionKey]
+      } else {
+        return this.selectedValue
+      }
+    }
+  },
+  methods: {
+    toggleSelection (option) {
+      this.isOptionSelected(option) ? this.unselectOption() : this.selectOption(option)
+    },
+    unselectOption () {
+      this.selectedValue = ''
+      this.$emit('input', this.selectedValue)
+    },
+    showDropdown () {
+      this.displayValue = ''
+    },
+    isOptionSelected (option) {
+      if (this.optionKey) {
+        return this.selectedValue === option[this.optionKey]
+      } else {
+        return this.selectedValue === option
+      }
+    },
+    selectOption (option) {
+      this.displayValue = option
+      this.selectedValue = this.displayValue
+      this.$emit('input', this.selectedValue)
+    },
+    validate () {
+      this.validated = true
+    },
+    isValid () {
+      let isValid = true
+      if (this.required) {
+        isValid = !!this.value
+      }
+      return isValid
+    },
+    hasErrors () {
+      let hasErrors = false
+      if (this.required) {
+        hasErrors = this.validated && !this.value
+      }
+      return hasErrors
+    },
+    showRequiredError () {
+      return `The ${this.name} field is required`
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .select-form-group {
-    .dropdown-menu {
-      padding: 0;
-      .vuestic-scrollbar {
-        height: $dropdown-item-height * 4;
-      }
+.vuestic-simple-select {
+
+  &__unselect {
+    margin-right: 20px;
+    cursor: pointer;
+  }
+
+  .vuestic-simple-select__dropdown-arrow.vuestic-simple-select__dropdown-arrow {
+    top: 12px;
+    cursor: pointer;
+  }
+
+  &__dropdown-menu {
+    padding: 0;
+    .vuestic-scrollbar {
+      height: $dropdown-item-height * 4;
     }
   }
+}
 </style>
+