diff --git a/public/demo/data/photos.json b/public/demo/data/photos.json
index 410dda3..bbac633 100644
--- a/public/demo/data/photos.json
+++ b/public/demo/data/photos.json
@@ -1,92 +1,92 @@
 {
     "data":[
         {
-            "itemImageSrc": "demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
             "alt": "Description for Image 1",
             "title": "Title 1"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
             "alt": "Description for Image 2",
             "title": "Title 2"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
             "alt": "Description for Image 3",
             "title": "Title 3"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
             "alt": "Description for Image 4",
             "title": "Title 4"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
             "alt": "Description for Image 5",
             "title": "Title 5"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
             "alt": "Description for Image 6",
             "title": "Title 6"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
             "alt": "Description for Image 7",
             "title": "Title 7"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
             "alt": "Description for Image 8",
             "title": "Title 8"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
             "alt": "Description for Image 9",
             "title": "Title 9"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
             "alt": "Description for Image 10",
             "title": "Title 10"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
             "alt": "Description for Image 11",
             "title": "Title 11"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
             "alt": "Description for Image 12",
             "title": "Title 12"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
             "alt": "Description for Image 13",
             "title": "Title 13"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
             "alt": "Description for Image 14",
             "title": "Title 14"
         },
         {
-            "itemImageSrc": "demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
+            "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
+            "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
             "alt": "Description for Image 15",
             "title": "Title 15"
         }
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 9a990e2..50818e6 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 const { layoutConfig } = useLayout();
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 </script>
 
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index fa1945a..b0f3279 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -18,7 +18,7 @@ onBeforeUnmount(() => {
 });
 
 const logoUrl = computed(() => {
-    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+    return `/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
 const onTopBarMenuButton = () => {
diff --git a/src/service/CountryService.js b/src/service/CountryService.js
index ed36a94..daed093 100755
--- a/src/service/CountryService.js
+++ b/src/service/CountryService.js
@@ -1,6 +1,6 @@
-export default class CountryService {
+export class CountryService {
     getCountries() {
-        return fetch('demo/data/countries.json')
+        return fetch('/demo/data/countries.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/src/service/CustomerService.js b/src/service/CustomerService.js
index e0c50c9..5bc000f 100755
--- a/src/service/CustomerService.js
+++ b/src/service/CustomerService.js
@@ -1,32 +1,18 @@
-export default class CustomerService {
+export class CustomerService {
     getCustomersSmall() {
-        return fetch('demo/data/customers-small.json')
+        return fetch('/demo/data/customers-small.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
-
     getCustomersMedium() {
-        return fetch('demo/data/customers-medium.json')
+        return fetch('/demo/data/customers-medium.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getCustomersLarge() {
-        return fetch('demo/data/customers-large.json')
+        return fetch('/demo/data/customers-large.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
-
-    getCustomersXLarge() {
-        return fetch('demo/data/customers-xlarge.json')
-            .then((res) => res.json())
-            .then((d) => d.data);
-    }
-
-    getCustomers(params) {
-        const queryParams = Object.keys(params)
-            .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-            .join('&');
-        return fetch('https://www.primefaces.org//demo/data/customers?' + queryParams).then((res) => res.json());
-    }
 }
diff --git a/src/service/NodeService.js b/src/service/NodeService.js
index f32eaee..4f15133 100755
--- a/src/service/NodeService.js
+++ b/src/service/NodeService.js
@@ -1,12 +1,36 @@
-export default class NodeService {
+export class NodeService {
+    getFiles() {
+        return fetch('/demo/data/files.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getLazyFiles() {
+        return fetch('/demo/data/files-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getFilesystem() {
+        return fetch('/demo/data/filesystem.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getLazyFilesystem() {
+        return fetch('/demo/data/filesystem-lazy.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
     getTreeTableNodes() {
-        return fetch('demo/data/treetablenodes.json')
+        return fetch('/demo/data/treetablenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
 
     getTreeNodes() {
-        return fetch('demo/data/treenodes.json')
+        return fetch('/demo/data/treenodes.json')
             .then((res) => res.json())
             .then((d) => d.root);
     }
diff --git a/src/service/PhotoService.js b/src/service/PhotoService.js
index 6a413e0..8e5bfad 100644
--- a/src/service/PhotoService.js
+++ b/src/service/PhotoService.js
@@ -1,6 +1,6 @@
-export default class PhotoService {
+export class PhotoService {
     getImages() {
-        return fetch('demo/data/photos.json')
+        return fetch('/demo/data/photos.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/src/service/ProductService.js b/src/service/ProductService.js
index db12368..0dfb889 100644
--- a/src/service/ProductService.js
+++ b/src/service/ProductService.js
@@ -1,18 +1,30 @@
-export default class ProductService {
+export class ProductService {
     getProductsSmall() {
-        return fetch('demo/data/products-small.json')
+        return fetch('/demo/data/products-small.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProducts() {
-        return fetch('demo/data/products.json')
+        return fetch('/demo/data/products.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getProductsMixed() {
+        return fetch('/demo/data/products-mixed.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
 
     getProductsWithOrdersSmall() {
-        return fetch('demo/data/products-orders-small.json')
+        return fetch('/demo/data/products-orders-small.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.data);
+    }
+
+    getProductsWithOrdersLarge() {
+        return fetch('/demo/data/products-orders.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.data);
     }
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 60b4451..d7e3788 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, watch } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 import { useLayout } from '@/layout/composables/layout';
 
 const { isDarkTheme } = useLayout();
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index 51dfbf6..17a4f76 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { FilterMatchMode } from 'primevue/api';
 import { ref, onMounted, onBeforeMount } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 import { useToast } from 'primevue/usetoast';
 
 const toast = useToast();
diff --git a/src/views/pages/Timeline.vue b/src/views/pages/Timeline.vue
index fcd8481..b685430 100644
--- a/src/views/pages/Timeline.vue
+++ b/src/views/pages/Timeline.vue
@@ -95,7 +95,7 @@ const horizontalEvents = ref(['2020', '2021', '2022', '2023']);
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
+                        <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2 mb-3" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
diff --git a/src/views/uikit/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
index 144c183..68b14f3 100644
--- a/src/views/uikit/FloatLabel.vue
+++ b/src/views/uikit/FloatLabel.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
+import { CountryService } from '@/service/CountryService';
 
 const countries = ref([]);
 const cities = ref([
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
index 30b0cdb..e2626f3 100644
--- a/src/views/uikit/Input.vue
+++ b/src/views/uikit/Input.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
-import NodeService from '@/service/NodeService';
+import { CountryService } from '@/service/CountryService';
+import { NodeService } from '@/service/NodeService';
 
 const floatValue = ref(null);
 const autoValue = ref(null);
diff --git a/src/views/uikit/InvalidState.vue b/src/views/uikit/InvalidState.vue
index 456b41e..92bb918 100644
--- a/src/views/uikit/InvalidState.vue
+++ b/src/views/uikit/InvalidState.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import CountryService from '@/service/CountryService';
+import { CountryService } from '@/service/CountryService';
 
 const countries = ref(null);
 const filteredCountries = ref(null);
diff --git a/src/views/uikit/List.vue b/src/views/uikit/List.vue
index 1284aa6..c9ab5ed 100644
--- a/src/views/uikit/List.vue
+++ b/src/views/uikit/List.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import ProductService from '@/service/ProductService';
+import { ProductService } from '@/service/ProductService';
 
 const picklistValue = ref([
     [
diff --git a/src/views/uikit/Media.vue b/src/views/uikit/Media.vue
index 575ac5a..dfb73ab 100644
--- a/src/views/uikit/Media.vue
+++ b/src/views/uikit/Media.vue
@@ -1,6 +1,6 @@
 <script setup>
-import ProductService from '@/service/ProductService';
-import PhotoService from '@/service/PhotoService';
+import { ProductService } from '@/service/ProductService';
+import { PhotoService } from '@/service/PhotoService';
 import { ref, onMounted } from 'vue';
 
 const products = ref([]);
@@ -48,6 +48,22 @@ onMounted(() => {
     productService.getProductsSmall().then((data) => (products.value = data));
     photoService.getImages().then((data) => (images.value = data));
 });
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
 </script>
 
 <template>
@@ -55,24 +71,23 @@ onMounted(() => {
         <div class="col-12">
             <div class="card">
                 <h5>Carousel</h5>
-                <Carousel :value="products" :numVisible="3" :numScroll="3" :circular="false" :responsiveOptions="carouselResponsiveOptions">
-                    <template #item="product">
-                        <div class="border-round m-2 text-center p-2" style="border: 1px solid var(--surface-d)">
-                            <div class="my-5">
-                                <img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
-                            </div>
-                            <div>
-                                <h5 class="mb-1">
-                                    {{ product.data.name }}
-                                </h5>
-                                <h6 class="mt-0 mb-3">${{ product.data.price }}</h6>
-                                <Badge :class="'product-badge status-' + product.data.inventoryStatus.toLowerCase()">{{ product.data.inventoryStatus }}</Badge>
-                                <div class="my-5">
-                                    <Button icon="pi pi-search" class="mr-2 p-button-rounded"></Button>
-                                    <Button icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></Button>
-                                    <Button icon="pi pi-cog" class="p-button-rounded p-button-info"></Button>
+                <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
+                    <template #item="slotProps">
+                        <div class="border-1 surface-border border-round m-2 p-3">
+                            <div class="mb-3">
+                                <div class="relative mx-auto">
+                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                                 </div>
                             </div>
+                            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                            <div class="flex justify-content-between align-items-center">
+                                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                                <span>
+                                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                                    <Button icon="pi pi-shopping-cart" class="ml-2" />
+                                </span>
+                            </div>
                         </div>
                     </template>
                 </Carousel>
@@ -81,24 +96,27 @@ onMounted(() => {
 
         <div class="col-12">
             <div class="card">
-                <h5>Galleria</h5>
-                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
-                    <template #item="slotProps">
-                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                    </template>
-                    <template #thumbnail="slotProps">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
-                    </template>
-                </Galleria>
+                <h5>Image</h5>
+                <div class="flex justify-content-center">
+                    <Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
+                </div>
             </div>
         </div>
 
         <div class="col-12">
             <div class="card">
-                <h5>Image</h5>
-                <div class="flex justify-content-center">
-                    <Image :src="'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
-                </div>
+                <h5>Galleria</h5>
+                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"
+                    :circular="true" containerStyle="max-width: 800px; margin: auto">
+                    <template #item="slotProps">
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt"
+                            style="width: 100%; display: block" />
+                    </template>
+                    <template #thumbnail="slotProps">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt"
+                            tyle="width: 100%; display: block;" />
+                    </template>
+                </Galleria>
             </div>
         </div>
     </div>
diff --git a/src/views/uikit/Misc.vue b/src/views/uikit/Misc.vue
index 61f599e..14dd655 100644
--- a/src/views/uikit/Misc.vue
+++ b/src/views/uikit/Misc.vue
@@ -75,11 +75,11 @@ onBeforeUnmount(() => {
                 <h4>Avatar</h4>
                 <h5>Avatar Group</h5>
                 <AvatarGroup class="mb-3">
-                    <Avatar :image="'demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'/demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -151,9 +151,9 @@ onBeforeUnmount(() => {
 
                 <h5>Image</h5>
                 <div class="flex align-items-center flex-column sm:flex-row">
-                    <Chip label="Amy Elsner" :image="'demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Asiya Javayant" :image="'demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Onyama Limba" :image="'demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
                 </div>
             </div>
 
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
index ec715ba..f9f76ea 100644
--- a/src/views/uikit/Overlay.vue
+++ b/src/views/uikit/Overlay.vue
@@ -1,8 +1,8 @@
 <script setup>
-import ProductService from '@/service/ProductService';
 import { ref, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import { ProductService } from '@/service/ProductService';
 
 const display = ref(false);
 const displayConfirmation = ref(false);
diff --git a/src/views/uikit/Table.vue b/src/views/uikit/Table.vue
index 04c34fa..26dcf07 100644
--- a/src/views/uikit/Table.vue
+++ b/src/views/uikit/Table.vue
@@ -1,8 +1,8 @@
 <script setup>
+import { ref, onBeforeMount, reactive } from 'vue';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
-import CustomerService from '@/service/CustomerService';
-import ProductService from '@/service/ProductService';
-import { ref, onBeforeMount } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { ProductService } from '@/service/ProductService';
 
 const customer1 = ref(null);
 const customer2 = ref(null);
@@ -13,8 +13,8 @@ const loading2 = ref(null);
 const idFrozen = ref(false);
 const products = ref(null);
 const expandedRows = ref([]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const representatives = ref([
+const statuses = reactive(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const representatives = reactive([
     { name: 'Amy Elsner', image: 'amyelsner.png' },
     { name: 'Anna Fali', image: 'annafali.png' },
     { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
diff --git a/src/views/uikit/Tree.vue b/src/views/uikit/Tree.vue
index bfa53ba..0819cb2 100644
--- a/src/views/uikit/Tree.vue
+++ b/src/views/uikit/Tree.vue
@@ -1,6 +1,6 @@
 <script setup>
-import NodeService from '@/service/NodeService';
 import { onMounted, ref } from 'vue';
+import { NodeService } from '@/service/NodeService';
 
 const treeValue = ref(null);
 const selectedTreeValue = ref(null);