diff --git a/docs/components/multi-select.md b/docs/components/multi-select.md
index 0bcb61dc9..fc5e19a22 100644
--- a/docs/components/multi-select.md
+++ b/docs/components/multi-select.md
@@ -186,7 +186,41 @@ None
 
 ## CSS Variables
 
-None
+```css
+:root {
+  --v-multi-select-border-color: var(--v-input-border-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-bg-color: var(--v-input-bg-color);
+  --v-multi-select-text-color: theme('colors.gray.800');
+  --v-multi-select-height: auto;
+  --v-multi-select-placeholder-color: var(--v-input-placeholder-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-padding-x: var(--v-input-padding-x);
+  --v-multi-select-padding-y: var(--v-input-padding-y);
+  --v-multi-select-font-size: var(--v-input-font-size);
+
+  /* item */
+  --v-multi-select-item-font-size: theme('fontSize.base');
+  --v-multi-select-item-font-weight: theme('fontWeight.normal');
+  --v-multi-select-item-bg-color: theme('colors.white');
+  --v-multi-select-item-text-color: theme('colors.gray.800');
+  --v-multi-select-item-padding-x: theme('padding.3');
+  --v-multi-select-item-padding-y: theme('padding.2');
+  --v-multi-select-item-hover-bg-color: theme('colors.primary.500');
+  --v-multi-select-item-hover-text-color: theme('colors.white');
+
+  /* error */
+  --v-multi-select-error-border-color: theme('colors.error.500');
+
+  /* icon */
+  --v-multi-select-icon-color: theme('colors.gray.500');
+  --v-multi-select-check-icon-color: theme('colors.primary.500');
+
+  /* dropdown */
+  --v-multi-select-dropdown-bg-color: theme('colors.white');
+  --v-multi-select-dropdown-border-radius: theme('borderRadius.md');
+}
+```
 
 ## Manual Installation
 
diff --git a/packages/multi-select/package.json b/packages/multi-select/package.json
index eb159f004..0e71d793a 100644
--- a/packages/multi-select/package.json
+++ b/packages/multi-select/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gits-id/multi-select",
   "version": "0.13.5",
-  "description": "GITS Input Component",
+  "description": "Vue Multi Select Component",
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
     "prepublishOnly": "npm run build",
@@ -10,13 +10,15 @@
   "keywords": [
     "input",
     "gits",
-    "ui-component"
+    "ui-component",
+    "multi-select"
   ],
   "author": "Warsono <warsono16694@gmail.com>",
   "license": "MIT",
   "dependencies": {
     "@gits-id/badge": "^0.13.5",
     "@gits-id/tooltip": "^0.13.5",
+    "@gits-id/forms": "^0.13.5",
     "@vueuse/core": "^7.7.1",
     "vee-validate": "^4.6.1",
     "vue": "^3.2.31"
diff --git a/packages/multi-select/src/VMultiSelect.stories.js b/packages/multi-select/src/VMultiSelect.stories.js
index 7e15202a1..fe478527d 100644
--- a/packages/multi-select/src/VMultiSelect.stories.js
+++ b/packages/multi-select/src/VMultiSelect.stories.js
@@ -209,3 +209,26 @@ export const InitialErrors = (args) => ({
     </form>
 `,
 });
+
+export const CssVars = () => ({
+  components: {
+    VMultiSelect,
+  },
+  template: `
+  <v-multi-select
+    badge-color="purple"
+    :style="{
+      '--badge-bg-color': 'white',
+      '--badge-color': 'purple',
+      '--v-multi-select-bg-color': 'purple',
+      '--v-multi-select-border-color': 'purple',
+      '--v-multi-select-text-color': 'white',
+      '--v-multi-select-border-radius': '16px',
+      '--v-multi-select-padding-x': '1rem',
+      '--v-multi-select-item-hover-bg-color': 'purple',
+      '--v-multi-select-item-hover-text-color': 'white',
+      '--v-multi-select-icon-color': 'white',
+      '--v-multi-select-check-icon-color': 'purple',
+    }"
+  />`,
+});
diff --git a/packages/multi-select/src/VMultiSelect.vue b/packages/multi-select/src/VMultiSelect.vue
index a84aba798..af4773b51 100644
--- a/packages/multi-select/src/VMultiSelect.vue
+++ b/packages/multi-select/src/VMultiSelect.vue
@@ -19,6 +19,9 @@ import VTooltip from '@gits-id/tooltip';
 import {onClickOutside, useDebounceFn} from '@vueuse/core';
 import {ErrorMessage, useField} from 'vee-validate';
 import Icon from '@gits-id/icon';
+import '@gits-id/icon/dist/style.css';
+import '@gits-id/tooltip/dist/style.css';
+import '@gits-id/forms/dist/style.css';
 
 type VMultiSelectItem = {
   text: string;
@@ -152,6 +155,10 @@ const props = defineProps({
     type: String,
     default: 'fade',
   },
+  iconSize: {
+    type: String,
+    default: 'sm',
+  },
 });
 
 const emit = defineEmits([
@@ -363,9 +370,14 @@ watch(
 </script>
 
 <template>
-  <div ref="target" class="v-multi-select">
+  <div ref="target" class="v-multi-select" v-bind="$attrs">
     <div>
-      <label :for="id || name" class="v-multi-select-label" :class="labelClass">
+      <label
+        v-if="label"
+        :for="id || name"
+        class="v-multi-select-label"
+        :class="labelClass"
+      >
         {{ label }}
       </label>
       <div class="v-multi-select-panel">
@@ -373,50 +385,51 @@ watch(
           class="v-multi-select-input"
           :class="[
             error || errorMessage
-              ? `v-multi-select-error border-error-500`
-              : 'v-multi-select-normal border-gray-300 hover:border-gray-400',
+              ? `v-multi-select-error`
+              : 'v-multi-select-normal',
             wrapperClass,
           ]"
           @click="isOpen = true"
         >
-          <div v-if="selected.length" class="v-multi-select-badges">
-            <v-badge
-              v-for="sItem in badges"
-              :key="sItem.value"
-              :color="badgeColor"
-              dismissable
-              class="truncate"
-              :class="badgeClass"
-              @dismiss="deselect(sItem)"
-              v-bind="badgeProps"
-            >
-              {{ sItem[itemText] }}
-            </v-badge>
-
-            <v-badge v-if="maxBadge > 0 && selected.length > maxBadge" small>
-              {{ selected.length - maxBadge }} more
-            </v-badge>
+          <div class="flex-1 space-y-2">
+            <div v-if="selected.length" class="v-multi-select-badges">
+              <v-badge
+                v-for="sItem in badges"
+                :key="sItem.value"
+                :color="badgeColor"
+                dismissable
+                class="truncate"
+                :class="badgeClass"
+                @dismiss="deselect(sItem)"
+                v-bind="badgeProps"
+              >
+                {{ sItem[itemText] }}
+              </v-badge>
+              <v-badge v-if="maxBadge > 0 && selected.length > maxBadge" small>
+                {{ selected.length - maxBadge }} more
+              </v-badge>
+            </div>
+            <input
+              :id="id"
+              type="text"
+              class="v-multi-select-input-control"
+              :class="inputClass"
+              autofill="false"
+              autocomplete="off"
+              :placeholder="placeholder"
+              :name="name"
+              v-bind="inputProps"
+              @input="handleSearch"
+              @focus="onInputClick"
+              @keydown.enter.prevent="onEnter"
+              @keydown.down.prevent="onDown"
+              @keydown.up.prevent="onUp"
+              @keydown.tab.prevent="onTab"
+              @keydown.esc.prevent="onEsc"
+            />
           </div>
-          <input
-            :id="id"
-            type="search"
-            class="v-multi-select-input-control"
-            :class="inputClass"
-            autofill="false"
-            autocomplete="off"
-            :placeholder="selected.length < 1 ? placeholder : ''"
-            :name="name"
-            v-bind="inputProps"
-            @input="handleSearch"
-            @focus="onInputClick"
-            @keydown.enter.prevent="onEnter"
-            @keydown.down.prevent="onDown"
-            @keydown.up.prevent="onUp"
-            @keydown.tab.prevent="onTab"
-            @keydown.esc.prevent="onEsc"
-          />
-
-          <span class="v-multi-select-action">
+
+          <div class="v-multi-select-action">
             <v-tooltip v-if="selected.length > 1">
               <template #activator="{on}">
                 <v-badge
@@ -425,7 +438,12 @@ watch(
                   @click="clearSelected"
                   v-on="on"
                 >
-                  <Icon name="ri:close-line" class="text-gray-400 w-5 h-5" />
+                  <Icon
+                    name="ri:close-line"
+                    :size="iconSize"
+                    class="v-multi-select-icon"
+                    aria-hidden="true"
+                  />
                 </v-badge>
               </template>
               <span>Clear</span>
@@ -433,10 +451,11 @@ watch(
 
             <Icon
               name="heroicons:chevron-down"
-              class="w-5 h-5 text-gray-400"
+              :size="iconSize"
+              class="v-multi-select-icon"
               aria-hidden="true"
             />
-          </span>
+          </div>
         </div>
 
         <transition :name="transition">
@@ -498,7 +517,8 @@ watch(
                   >
                     <Icon
                       name="heroicons:check"
-                      class="w-5 h-5"
+                      :size="iconSize"
+                      class="v-multi-select-check-icon"
                       :class="checkIconClass"
                       aria-hidden="true"
                     />
@@ -532,8 +552,59 @@ watch(
 </template>
 
 <style>
+:root {
+  --v-multi-select-border-color: var(--v-input-border-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-bg-color: var(--v-input-bg-color);
+  --v-multi-select-text-color: theme('colors.gray.800');
+  --v-multi-select-height: auto;
+  --v-multi-select-placeholder-color: var(--v-input-placeholder-color);
+  --v-multi-select-border-radius: var(--v-input-border-radius);
+  --v-multi-select-padding-x: var(--v-input-padding-x);
+  --v-multi-select-padding-y: var(--v-input-padding-y);
+  --v-multi-select-font-size: var(--v-input-font-size);
+
+  /* item */
+  --v-multi-select-item-font-size: theme('fontSize.base');
+  --v-multi-select-item-font-weight: theme('fontWeight.normal');
+  --v-multi-select-item-bg-color: theme('colors.white');
+  --v-multi-select-item-text-color: theme('colors.gray.800');
+  --v-multi-select-item-padding-x: theme('padding.3');
+  --v-multi-select-item-padding-y: theme('padding.2');
+  --v-multi-select-item-hover-bg-color: theme('colors.primary.500');
+  --v-multi-select-item-hover-text-color: theme('colors.white');
+
+  /* error */
+  --v-multi-select-error-border-color: theme('colors.error.500');
+
+  /* icon */
+  --v-multi-select-icon-color: theme('colors.gray.500');
+  --v-multi-select-check-icon-color: theme('colors.primary.500');
+
+  /* dropdown */
+  --v-multi-select-dropdown-bg-color: theme('colors.white');
+  --v-multi-select-dropdown-border-radius: theme('borderRadius.md');
+}
+
+.v-multi-select {
+  background: var(--v-multi-select-bg-color);
+  color: var(--v-multi-select-text-color);
+  border-radius: var(--v-multi-select-border-radius);
+  text-align: var(--v-multi-select-text-align);
+  border: 1px solid var(--v-multi-select-border-color);
+  height: var(--v-multi-select-height);
+  font-size: var(--v-multi-select-font-size);
+  font-weight: var(--v-multi-select-font-weight);
+  padding: var(--v-multi-select-padding-y) var(--v-multi-select-padding-x);
+
+  @apply relative;
+}
+
 .v-multi-select-error {
-  @apply border-error-600 focus-visible:ring-white focus-visible:ring-offset-error-300 focus-visible:border-error-500;
+  border: 1px solid var(--v-multi-select-error-border-color);
+
+  @apply focus-visible:ring-white focus-visible:ring-offset-error-300
+  focus-visible:border-error-500;
 }
 
 .v-multi-select-normal {
@@ -541,43 +612,31 @@ watch(
 }
 
 .v-multi-select-input {
-  @apply relative
+  @apply bg-transparent
     w-full
-    py-2
-    pl-3
-    pr-10
-    text-left
-    bg-white
-    rounded-md
-    border
     cursor-default
     focus:outline-none
-    sm:text-sm
     gap-y-1
-    flex flex-wrap
+    flex flex-wrap gap-2
     items-center
     focus-visible:ring-2
     focus-visible:ring-opacity-75
     focus-visible:ring-offset-2;
 }
 
-.v-multi-select-panel {
-  @apply relative mt-1;
-}
-
 .v-multi-select-badges {
   @apply flex items-center gap-2 flex-wrap;
 }
 
 .v-multi-select-dropdown {
-  @apply absolute
+  border-radius: var(--v-multi-select-dropdown-border-radius);
+  background: var(--v-multi-select-dropdown-bg-color);
+
+  @apply absolute inset-x-0
     w-full
     py-1
-    mt-1
+    mt-3
     overflow-auto
-    text-base
-    bg-white
-    rounded-md
     shadow-lg
     max-h-60
     ring-1 ring-black ring-opacity-5
@@ -587,29 +646,42 @@ watch(
     z-10;
 }
 
+.v-multi-select-input-control::placeholder {
+  color: var(--v-select-placeholder-color);
+}
+
 .v-multi-select-input-control {
-  @apply border-none
+  color: var(--v-multi-select-text-color);
+
+  @apply border-none bg-transparent
     px-1
     py-1
     focus:outline-none
     focus:!ring-0
     focus:!border-none
     text-sm
-    flex-grow;
+    flex-grow w-full;
 }
 
 .v-multi-select-action {
-  @apply absolute inset-y-0 right-0 flex items-center pr-2;
+  @apply flex items-center;
+}
+
+.v-multi-select-item:hover {
+  background: var(--v-multi-select-item-hover-bg-color);
+  color: var(--v-multi-select-item-hover-text-color);
 }
 
 .v-multi-select-item {
-  @apply bg-white
-    hover:text-white
-    hover:bg-primary-500
-    text-gray-800
-    cursor-default
+  background: var(--v-multi-select-item-bg-color);
+  color: var(--v-multi-select-item-text-color);
+  font-size: var(--v-multi-select-item-font-size);
+  font-weight: var(--v-multi-select-item-font-weight);
+  padding: var(--v-multi-select-item-padding-y)
+    var(--v-multi-select-item-padding-x);
+
+  @apply cursor-default
     select-none
-    px-3 py-2
     relative flex gap-2 items-center;
 }
 
@@ -622,14 +694,21 @@ watch(
 }
 
 .v-multi-select-item-check {
-  @apply invisible flex items-center text-white group-hover:text-white group-focus:text-white;
+  @apply invisible flex items-center text-white
+  group-hover:text-white group-focus:text-white;
 }
 
 .v-multi-select-item--active .v-multi-select-item-check {
-  @apply visible text-primary-500;
+  color: var(--v-multi-select-check-icon-color);
+
+  @apply visible;
 }
 
 .v-multi-select-item-text {
   @apply block truncate;
 }
+
+.v-multi-select-icon {
+  color: var(--v-multi-select-icon-color);
+}
 </style>