diff --git a/.playground/pages/tests/form/autocomplete.vue b/.playground/pages/tests/form/autocomplete.vue
index bcfb23b2..6b5ebfb2 100644
--- a/.playground/pages/tests/form/autocomplete.vue
+++ b/.playground/pages/tests/form/autocomplete.vue
@@ -5,6 +5,8 @@ definePageMeta({
   description: 'SVG icons',
   section: 'form',
 })
+
+const items = ref<any[]>(['Javascript', 'Vue.js', 'React.js', 'Angular'])
 </script>
 
 <template>
@@ -13,8 +15,97 @@ definePageMeta({
   >
     <div>
       <BaseHeading size="xl" weight="medium" class="mb-10">
-        Autocomplete
+        Autocomplete shape
+      </BaseHeading>
+      <div class="grid grid-cols-5 gap-4">
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="straight"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="rounded"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="smooth"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="curved"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          shape="full"
+          label-float
+          clearable
+          multiple
+        />
+      </div>
+    </div>
+    <div>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Autocomplete Size
       </BaseHeading>
+      <div class="grid grid-cols-3 gap-4">
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="sm"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="md"
+          label-float
+          clearable
+          multiple
+        />
+        <BaseAutocomplete
+          :items="items"
+          label="Test"
+          placeholder="Let's test autocomplete"
+          error="This is an error message"
+          size="lg"
+          label-float
+          clearable
+          multiple
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/components/form/BaseAutocomplete.vue b/components/form/BaseAutocomplete.vue
index 0313667b..940ac638 100644
--- a/components/form/BaseAutocomplete.vue
+++ b/components/form/BaseAutocomplete.vue
@@ -23,7 +23,7 @@ const props = withDefaults(
     /**
      * The shape of the component.
      */
-    shape?: 'straight' | 'rounded' | 'curved' | 'full'
+    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
 
     /**
      * The label to display for the component.
@@ -59,9 +59,14 @@ const props = withDefaults(
     error?: string
 
     /**
-     * Whether the component is condensed.
+     * The size of the autocomplete component.
      */
-    condensed?: boolean
+    size?: 'sm' | 'md' | 'lg'
+
+    /**
+     * The kind of autocomplete component.
+     */
+    kind?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
 
     /**
      * Whether the component is in a loading state.
@@ -147,6 +152,8 @@ const props = withDefaults(
     placeholder: '',
     label: '',
     error: '',
+    size: 'md',
+    kind: 'default',
     i18n: () => ({
       pending: 'Loading ...',
       empty: 'Nothing found.',
@@ -194,42 +201,52 @@ const pendingFilter = ref(false)
 const pendingDebounce = computed(() => query.value !== debounced.value)
 const pending = computed(() => pendingFilter.value || pendingDebounce.value)
 
-const shapeListStyle = {
+const shapeStyle = {
   straight: '',
-  rounded: 'rounded-lg',
-  curved: 'rounded-xl',
-  full: 'rounded-full',
+  rounded: 'nui-autocomplete-rounded',
+  smooth: 'nui-autocomplete-smooth',
+  curved: 'nui-autocomplete-curved',
+  full: 'nui-autocomplete-full',
 }
-const shapeInputStyle = {
-  straight: '',
-  rounded: 'rounded',
-  curved: 'rounded-xl',
-  full: 'rounded-full',
+const sizeStyle = {
+  sm: 'nui-autocomplete-sm',
+  md: 'nui-autocomplete-md',
+  lg: 'nui-autocomplete-lg',
 }
-const shapeOptionStyle = {
-  straight: '',
-  rounded: 'rounded-lg',
-  curved: 'rounded-xl',
-  full: 'rounded-2xl',
+const kindStyle = {
+  default: 'nui-autocomplete-default',
+  'default-contrast': 'nui-autocomplete-default-contrast',
+  muted: 'nui-autocomplete-muted',
+  'muted-contrast': 'nui-autocomplete-muted-contrast',
 }
 
-const condensedInputStyle = computed(() =>
-  props.condensed
-    ? props.icon === undefined
-      ? 'h-8 py-1 text-xs leading-4 px-2'
-      : 'h-8 py-1 text-xs leading-4 pe-3 ps-7'
-    : props.icon === undefined
-    ? 'h-10 py-2 text-sm leading-5 px-3'
-    : 'h-10 py-2 text-sm leading-5 pe-4 ps-9'
+const wrapperStyle = computed(() =>
+  props.classes?.wrapper
+    ? Array.isArray(props.classes?.wrapper)
+      ? [...props.classes?.wrapper]
+      : props.classes?.wrapper
+    : ''
+)
+const labelStyle = computed(() =>
+  props.classes?.label
+    ? Array.isArray(props.classes?.label)
+      ? [...props.classes?.label]
+      : props.classes?.label
+    : ''
+)
+const inputStyle = computed(() =>
+  props.classes?.input
+    ? Array.isArray(props.classes?.input)
+      ? [...props.classes?.input]
+      : props.classes?.input
+    : ''
 )
-const condensedLabelStyle = computed(() =>
-  props.condensed
-    ? props.icon === undefined
-      ? 'start-3 -ms-3 -mt-7 text-xs peer-placeholder-shown:ms-0 peer-placeholder-shown:mt-0 peer-focus-visible:-ms-3 peer-focus-visible:-mt-7'
-      : 'start-8 -ms-8 -mt-7 text-xs peer-placeholder-shown:ms-0 peer-placeholder-shown:mt-0 peer-focus-visible:-ms-8 peer-focus-visible:-mt-7'
-    : props.icon === undefined
-    ? 'start-3 -ms-3  -mt-8 text-xs peer-placeholder-shown:ms-0 peer-placeholder-shown:mt-0 peer-placeholder-shown:text-[0.825rem] peer-focus-visible:-ms-3 peer-focus-visible:-mt-8 peer-focus-visible:text-xs'
-    : 'start-10 -ms-10 -mt-8 text-xs peer-placeholder-shown:ms-0 peer-placeholder-shown:mt-0 peer-placeholder-shown:text-[0.825rem] peer-focus-visible:-ms-10 peer-focus-visible:-mt-8 peer-focus-visible:text-xs'
+const iconStyle = computed(() =>
+  props.classes?.icon
+    ? Array.isArray(props.classes?.icon)
+      ? [...props.classes?.icon]
+      : props.classes?.icon
+    : ''
 )
 
 provide(
@@ -305,8 +322,16 @@ function removeItem(item: any) {
     v-model="value"
     :multiple="props.multiple"
     :disabled="props.disabled"
-    class="relative w-full"
-    :class="props.classes?.wrapper"
+    :class="[
+      'nui-autocomplete',
+      ...wrapperStyle,
+      sizeStyle[props.size],
+      kindStyle[props.kind],
+      shape && shapeStyle[shape],
+      props.icon && 'nui-has-icon',
+      props.labelFloat && 'nui-autocomplete-label-float',
+      props.loading && 'nui-autocomplete-loading',
+    ]"
     as="div"
   >
     <ComboboxLabel
@@ -314,52 +339,37 @@ function removeItem(item: any) {
         ('label' in $slots && !props.labelFloat) ||
         (props.label && !props.labelFloat)
       "
-      class="nui-label"
-      :class="[
-        props.condensed && 'pb-1 text-xs',
-        !props.condensed && 'pb-1 text-[0.825rem]',
-        ...(props.classes?.label && Array.isArray(props.classes.label)
-          ? props.classes.label
-          : [props.classes?.label]),
-      ]"
+      class="nui-autocomplete-label"
+      :class="labelStyle"
     >
       <slot name="label" v-bind="{ query, filteredItems, pending, items }">
         {{ props.label }}
       </slot>
     </ComboboxLabel>
 
-    <div v-if="props.multiple" class="block">
+    <div v-if="props.multiple" class="nui-autocomplete-multiple">
       <ul
         v-if="Array.isArray(value) && value.length > 0"
-        class="my-2 flex flex-wrap gap-1"
+        class="nui-autocomplete-multiple-list"
       >
         <li v-for="item in value" :key="item.id">
-          <div
-            class="bg-muted-100 text-muted-400 dark:bg-muted-700 flex items-center py-2 pe-2 ps-3 font-sans text-xs font-medium"
-            :class="shape && shapeListStyle[shape]"
-          >
+          <div class="nui-autocomplete-multiple-list-item">
             {{ props.displayValue(item) }}
             <button type="button" @click="removeItem(item)">
-              <Icon :name="chipClearIcon" class="ms-1 block h-3 w-3" />
+              <Icon
+                :name="chipClearIcon"
+                class="nui-autocomplete-multiple-list-item-icon"
+              />
             </button>
           </div>
         </li>
       </ul>
     </div>
-    <div class="group/autocomplete relative">
+
+    <div class="nui-autocomplete-outer">
       <ComboboxInput
-        class="nui-focus border-muted-300 text-muted-600 placeholder:text-muted-300 focus:border-muted-300 focus:shadow-muted-300/50 dark:border-muted-700 dark:bg-muted-900/75 dark:text-muted-200 dark:placeholder:text-muted-500 dark:focus:border-muted-700 dark:focus:shadow-muted-800/50 peer w-full border bg-white font-sans leading-5 outline-transparent transition-all duration-300 focus:shadow-lg focus:ring-0 disabled:cursor-not-allowed disabled:opacity-75"
-        :class="[
-          condensedInputStyle,
-          shape && shapeInputStyle[shape],
-          props.labelFloat &&
-            'placeholder:text-transparent dark:placeholder:!text-transparent',
-          props.loading &&
-            '!text-transparent placeholder:!text-transparent dark:!text-transparent dark:placeholder:!text-transparent',
-          ...(props.classes?.input && Array.isArray(props.classes.input)
-            ? props.classes.input
-            : [props.classes?.input]),
-        ]"
+        class="nui-autocomplete-input"
+        :class="inputStyle"
         :display-value="props.multiple ? undefined : props.displayValue"
         :placeholder="props.placeholder"
         :disabled="props.disabled"
@@ -370,99 +380,76 @@ function removeItem(item: any) {
           ('label' in $slots && props.labelFloat) ||
           (props.label && props.labelFloat)
         "
-        class="text-primary-500 peer-focus-visible:text-primary-500 dark:peer-focus-visible:text-primary-500 pointer-events-none absolute inline-flex h-5 select-none items-center leading-none transition-all duration-300"
-        :class="[
-          props.loading
-            ? 'peer-placeholder-shown:!text-transparent dark:peer-placeholder-shown:!text-transparent'
-            : 'peer-placeholder-shown:text-muted-300 dark:peer-placeholder-shown:text-muted-600',
-          condensedLabelStyle,
-          props.condensed ? 'top-1.5' : 'top-2.5',
-          ...(props.classes?.label && Array.isArray(props.classes.label)
-            ? props.classes.label
-            : [props.classes?.label]),
-        ]"
+        class="nui-label-float"
+        :class="labelStyle"
       >
         <slot name="label" v-bind="{ query, filteredItems, pending, items }">
           {{ props.label }}
         </slot>
       </ComboboxLabel>
-      <div
-        v-if="props.icon || value?.icon"
-        class="text-muted-400 group-focus-within/autocomplete:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300"
-        :class="[props.condensed && 'h-8 w-8', !props.condensed && 'h-10 w-10']"
-      >
-        <Icon :name="value?.icon ?? props.icon" class="h-4 w-4" />
+      <div v-if="props.icon || value?.icon" class="nui-autocomplete-icon">
+        <Icon
+          :name="value?.icon ?? props.icon"
+          class="nui-autocomplete-icon-inner"
+        />
       </div>
       <button
         v-if="props.clearable && value"
         type="button"
-        class="text-muted-400 hover:text-muted-700 dark:hover:text-muted-200 absolute end-0 top-0 z-10 flex items-center justify-center transition-colors duration-300"
-        :class="[
-          props.condensed && 'h-8 w-8',
-          !props.condensed && 'h-10 w-10',
-          ...(props.classes?.icon && Array.isArray(props.classes.icon)
-            ? props.classes.icon
-            : [props.classes?.icon]),
-        ]"
+        class="nui-autocomplete-clear"
+        :class="iconStyle"
         @click="clear"
       >
-        <Icon :name="clearIcon" class="h-4 w-4" />
+        <Icon :name="clearIcon" class="nui-autocomplete-clear-inner" />
       </button>
-      <div
-        v-if="props.loading"
-        class="absolute start-0 top-0 flex w-full items-center px-4"
-        :class="[props.condensed && 'h-8', !props.condensed && 'h-10']"
-      >
-        <BasePlaceload
-          class="h-3 w-full max-w-[75%] rounded"
-          :class="props.icon && 'ms-6'"
-        />
+      <div v-if="props.loading" class="nui-autocomplete-placeload">
+        <BasePlaceload class="nui-placeload" :class="props.icon && 'ms-6'" />
       </div>
     </div>
+
     <span
       v-if="props.error && typeof props.error === 'string'"
-      class="inline-block font-sans text-[.8rem] text-pink-600"
+      class="nui-autocomplete-error-text"
     >
       {{ props.error }}
     </span>
+
     <TransitionRoot
       leave="transition ease-in duration-100"
       leave-from="opacity-100"
       leave-to="opacity-0"
       @after-leave="query = ''"
     >
-      <ComboboxOptions
-        as="div"
-        class="nui-slimscroll border-muted-200 dark:border-muted-700 dark:bg-muted-800 absolute z-20 mt-1 max-h-[265px] w-full overflow-auto border bg-white py-1 text-base shadow-lg outline-none sm:text-sm"
-        :class="shape && shapeOptionStyle[shape]"
-      >
+      <ComboboxOptions as="div" class="nui-autocomplete-results">
         <!-- Placeholder -->
         <div
           v-if="filteredItems.length === 0 && pending"
-          class="relative px-4 py-2"
+          class="nui-autocomplete-results-placeholder"
         >
           <slot
             name="pending"
             v-bind="{ query, filteredItems, pending, items }"
           >
-            <span
-              class="text-muted-700 dark:text-muted-400 cursor-default select-none"
-            >
+            <span class="nui-autocomplete-results-placeholder-text">
               {{ props.i18n.pending }}
             </span>
           </slot>
         </div>
-        <div v-else-if="filteredItems.length === 0" class="relative px-4 py-2">
+        <div
+          v-else-if="filteredItems.length === 0"
+          class="nui-autocomplete-results-placeholder"
+        >
           <slot name="empty" v-bind="{ query, filteredItems, pending, items }">
-            <span
-              class="text-muted-700 dark:text-muted-400 cursor-default select-none"
-            >
+            <span class="nui-autocomplete-results-placeholder-text">
               {{ props.i18n.empty }}
             </span>
           </slot>
         </div>
         <template v-else>
-          <div v-if="'start-item' in $slots" class="relative px-2 py-1">
+          <div
+            v-if="'start-item' in $slots"
+            class="nui-autocomplete-results-header"
+          >
             <slot
               name="start-item"
               v-bind="{
@@ -477,7 +464,7 @@ function removeItem(item: any) {
             v-for="item in filteredItems"
             v-slot="{ active, selected }"
             :key="item.name"
-            class="px-2 py-1"
+            class="nui-autocomplete-results-item"
             as="div"
             :value="item"
           >
@@ -507,7 +494,10 @@ function removeItem(item: any) {
               />
             </slot>
           </ComboboxOption>
-          <div v-if="'end-item' in $slots" class="relative px-2 py-1">
+          <div
+            v-if="'end-item' in $slots"
+            class="nui-autocomplete-results-footer"
+          >
             <slot
               name="end-item"
               v-bind="{