diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index e224b37..f96e4f7 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1675,6 +1675,30 @@ body {
   min-height: 100vh;
 }
 
+.min-h-\[56px\] {
+  min-height: 56px;
+}
+
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
+.min-h-\[36px\] {
+  min-height: 36px;
+}
+
+.min-h-\[24px\] {
+  min-height: 24px;
+}
+
+.min-h-\[28px\] {
+  min-height: 28px;
+}
+
+.min-h-\[32px\] {
+  min-height: 32px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -2839,6 +2863,11 @@ body {
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
+.\!bg-gray-200 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
+}
+
 .bg-opacity-100 {
   --tw-bg-opacity: 1;
 }
@@ -3245,6 +3274,10 @@ body {
   padding-top: 1.25rem;
 }
 
+.pl-0 {
+  padding-left: 0px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3792,6 +3825,12 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-gray-50 {
   --tw-shadow-color: #f9fafb;
   --tw-shadow: var(--tw-shadow-colored);
@@ -4565,11 +4604,6 @@ body {
   --tw-ring-color: rgb(204 204 0 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-red-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 229 229 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-opacity-10:focus {
   --tw-ring-opacity: 0.1;
 }
diff --git a/src/components/SelectMulti.vue b/src/components/SelectMulti.vue
index a42f7b6..6bed0e4 100755
--- a/src/components/SelectMulti.vue
+++ b/src/components/SelectMulti.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 
-import { type PropType } from 'vue'
-import Multiselect from '@vueform/multiselect'
+import { ref } from 'vue';
+import { TagsInput } from '@flavorly/vanilla-components';
+// import Multiselect from '@vueform/multiselect';
 interface Tags {
   id: number
   value: string,
   label: string
 }
 
-defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
     default: ''
   },
   tags: {
-    type: Array as PropType<Tags[]>,
+    type: Array as () => Tags[],
     required: true
   },
   useLabel: {
@@ -26,90 +27,93 @@ defineProps({
     default: ''
   }
 })
+
+const allowed = ref(props.tags.map((tag) => tag.label))
+const tags = ref<string[]>([])
+
+const updateTags = (value: string[]) => {
+  tags.value = value
+}
 </script>
 
 <template>
   <div class="flex flex-col">
-    <Multiselect
-      mode="tags"
-      :placeholder="placeholder"
-      :close-on-select="false"
-      :searchable="true"
-      :create-option="true"
-      :options="tags"
-      :classes="{
-        container:
-          'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg  bg-gray-200 text-left text-base leading-snug outline-none',
-        containerDisabled: 'cursor-default bg-gray-50',
-        containerOpen: 'rounded-b-none',
-        containerOpenTop: 'rounded-t-none',
-        containerActive: '',
-        wrapper:
-          'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
-        singleLabel:
-          'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
-        singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
-        multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
-        search:
-          'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
-        tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
-        tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
-        tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
-        tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
-        tagWrapperBreak: 'whitespace-normal break-all',
-        tagRemove:
-          'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
-        tagRemoveIcon:
-          'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
-        tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
-        tagsSearch:
-          ' bg-gray-200  absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
-        tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
-        placeholder:
-          'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
-        caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
-        caretOpen: 'rotate-180 pointer-events-auto',
-        clear:
-          'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
-        clearIcon:
-          'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
-        spinner:
-          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
-        infinite: 'flex items-center justify-center w-full',
-        infiniteSpinner:
-          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
-        dropdown:
-          'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
-        dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
-        dropdownHidden: 'hidden',
-        options: 'flex flex-col p-0 m-0 list-none',
-        optionsTop: '',
-        group: 'p-0 m-0',
-        groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
-        groupLabelPointable: 'cursor-pointer',
-        groupLabelPointed: 'bg-gray-300 text-gray-700',
-        groupLabelSelected: 'bg-green-600 text-white',
-        groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
-        groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
-        groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
-        groupOptions: 'p-0 m-0',
-        option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
-        optionPointed: 'text-gray-800 bg-gray-100',
-        optionSelected: 'text-white bg-green-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
-        optionSelectedPointed: 'text-white bg-green-500 opacity-90',
-        optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
-        noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
-        fakeInput:
-          'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
-        assist: 'absolute -m-px w-px h-px overflow-hidden',
-        spacer: 'box-content'
-      }"
-    />
+    <TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
+      valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
+
+    <!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
+      :create-option="true" :options="props.tags" :classes="{
+      container:
+        'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg  bg-gray-200 text-left text-base leading-snug outline-none',
+      containerDisabled: 'cursor-default bg-gray-50',
+      containerOpen: 'rounded-b-none',
+      containerOpenTop: 'rounded-t-none',
+      containerActive: '',
+      wrapper:
+        'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
+      singleLabel:
+        'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+      singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
+      multipleLabel:
+        'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+      search:
+        'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
+      tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
+      tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
+      tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
+      tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
+      tagWrapperBreak: 'whitespace-normal break-all',
+      tagRemove:
+        'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
+      tagRemoveIcon:
+        'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
+      tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
+      tagsSearch:
+        ' bg-gray-200  absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
+      tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
+      placeholder:
+        'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+      caret:
+        'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
+      caretOpen: 'rotate-180 pointer-events-auto',
+      clear:
+        'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
+      clearIcon:
+        'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
+      spinner:
+        'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
+      infinite: 'flex items-center justify-center w-full',
+      infiniteSpinner:
+        'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
+      dropdown:
+        'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
+      dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
+      dropdownHidden: 'hidden',
+      options: 'flex flex-col p-0 m-0 list-none',
+      optionsTop: '',
+      group: 'p-0 m-0',
+      groupLabel:
+        'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+      groupLabelPointable: 'cursor-pointer',
+      groupLabelPointed: 'bg-gray-300 text-gray-700',
+      groupLabelSelected: 'bg-green-600 text-white',
+      groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+      groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
+      groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
+      groupOptions: 'p-0 m-0',
+      option:
+        'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
+      optionPointed: 'text-gray-800 bg-gray-100',
+      optionSelected: 'text-white bg-green-500',
+      optionDisabled: 'text-gray-300 cursor-not-allowed',
+      optionSelectedPointed: 'text-white bg-green-500 opacity-90',
+      optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
+      noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+      noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+      fakeInput:
+        'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
+      assist: 'absolute -m-px w-px h-px overflow-hidden',
+      spacer: 'box-content'
+    }" /> -->
   </div>
 </template>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index b1d49d7..658e208 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,6 +24,23 @@ app.use(
         searchInput: 'rich-select-search-input',
         selectedHighlightedOption: 'rich-select-selected-highlighted-option'
       }
+    },
+    TagsInput: {
+      fixedClasses: {
+        input: 'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
+        inputWrapper: 'inline-flex flex-grow bg-transparent',
+        tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
+        tagDeleteButtonIcon: 'w-3 h-3',
+        tagLabel: 'px-3 text-xs',
+      },
+      classes: {
+        input: 'min-h-[32px]',
+        inputWrapper: '',
+        tagsWrapper: '',
+        tagDeleteButtonIcon: '',
+        tagLabel: '',
+        trigger: 'bg-gray-200 rounded-lg mb-2 mt-2',
+      },
     }
   })
 )