diff --git a/src/views/uikit/InputDoc.vue b/src/views/uikit/InputDoc.vue
index cf09caa..3f6e7cb 100644
--- a/src/views/uikit/InputDoc.vue
+++ b/src/views/uikit/InputDoc.vue
@@ -102,7 +102,7 @@ const searchCountry = (event) => {
                 <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
 
                 <div class="font-semibold text-xl">AutoComplete</div>
-                <AutoComplete placeholder="Search" :dropdown="true" display="chip" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
+                <AutoComplete v-model="selectedAutoValue" :suggestions="autoFilteredValue" optionLabel="name" placeholder="Search" dropdown multiple display="chip" @complete="searchCountry($event)" />
 
                 <div class="font-semibold text-xl">DatePicker</div>
                 <DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue"></DatePicker>
diff --git a/src/views/uikit/ListDoc.vue b/src/views/uikit/ListDoc.vue
index 7f9b705..44dc51b 100644
--- a/src/views/uikit/ListDoc.vue
+++ b/src/views/uikit/ListDoc.vue
@@ -2,35 +2,18 @@
 import { ProductService } from '@/service/ProductService';
 import { onMounted, ref } from 'vue';
 
-const picklistValue = ref([
-    [
-        { name: 'San Francisco', code: 'SF' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Paris', code: 'PRS' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Berlin', code: 'BRL' },
-        { name: 'Barcelona', code: 'BRC' },
-        { name: 'Rome', code: 'RM' }
-    ],
-    []
-]);
-
-const orderlistValue = ref([
-    { name: 'San Francisco', code: 'SF' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Paris', code: 'PRS' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Berlin', code: 'BRL' },
-    { name: 'Barcelona', code: 'BRC' },
-    { name: 'Rome', code: 'RM' }
-]);
-
 const products = ref(null);
+const picklistProducts = ref(null);
+const orderlistProducts = ref(null);
 const options = ref(['list', 'grid']);
-const layout = ref('grid');
+const layout = ref('list');
 
 onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
+    ProductService.getProductsSmall().then((data) => {
+        products.value = data.slice(0, 6);
+        picklistProducts.value = [data, []];
+        orderlistProducts.value = data;
+    });
 });
 
 const getSeverity = (product) => {
@@ -157,7 +140,7 @@ const getSeverity = (product) => {
             <div class="lg:w-2/3">
                 <div class="card">
                     <div class="font-semibold text-xl mb-4">PickList</div>
-                    <PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
+                    <PickList v-model="picklistProducts" breakpoint="1400px" dataKey="id">
                         <template #option="{ option }">
                             {{ option.name }}
                         </template>
@@ -168,7 +151,7 @@ const getSeverity = (product) => {
             <div class="lg:w-1/3">
                 <div class="card">
                     <div class="font-semibold text-xl mb-4">OrderList</div>
-                    <OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
+                    <OrderList v-model="orderlistProducts" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
                         <template #option="{ option }">
                             {{ option.name }}
                         </template>