diff --git a/pages/uikit/FloatLabel.vue b/pages/uikit/FloatLabel.vue
index 144c1839..478d0e16 100644
--- a/pages/uikit/FloatLabel.vue
+++ b/pages/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/pages/uikit/Input.vue b/pages/uikit/Input.vue
index 30b0cdb3..bd26d185 100644
--- a/pages/uikit/Input.vue
+++ b/pages/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/pages/uikit/InvalidState.vue b/pages/uikit/InvalidState.vue
index 456b41e2..46eaab81 100644
--- a/pages/uikit/InvalidState.vue
+++ b/pages/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/pages/uikit/List.vue b/pages/uikit/List.vue
index 1284aa6b..5478eaf0 100644
--- a/pages/uikit/List.vue
+++ b/pages/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/pages/uikit/Overlay.vue b/pages/uikit/Overlay.vue
index ec715bab..0db293a2 100644
--- a/pages/uikit/Overlay.vue
+++ b/pages/uikit/Overlay.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ProductService from '@/service/ProductService';
+import {ProductService} from '@/service/ProductService';
 import { ref, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
diff --git a/pages/uikit/Table.vue b/pages/uikit/Table.vue
index 04c34fa2..01ad309b 100644
--- a/pages/uikit/Table.vue
+++ b/pages/uikit/Table.vue
@@ -1,8 +1,8 @@
 <script setup>
 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';
+import { ref, onBeforeMount, reactive } from 'vue';
 
 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' },
@@ -146,7 +146,9 @@ const calculateCustomerTotal = (name) => {
                             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter1()" />
                             <IconField iconPosition="left">
                                 <InputIcon class="pi pi-search" />
-                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
+                                <ClientOnly>
+                                    <InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
+                                </ClientOnly>
                             </IconField>
                         </div>
                     </template>
diff --git a/service/CountryService.js b/service/CountryService.js
index 92c7fa42..d1e0cb5a 100755
--- a/service/CountryService.js
+++ b/service/CountryService.js
@@ -1,4 +1,4 @@
-export const CountryService = {
+export class CountryService  {
     getData() {
         return [
             { name: 'Afghanistan', code: 'AF' },
@@ -244,7 +244,7 @@ export const CountryService = {
             { name: 'Zambia', code: 'ZM' },
             { name: 'Zimbabwe', code: 'ZW' }
         ];
-    },
+    }
 
     getCountries() {
         return Promise.resolve(this.getData());
diff --git a/service/CustomerService.js b/service/CustomerService.js
index 22e7fe1e..cf38f223 100755
--- a/service/CustomerService.js
+++ b/service/CustomerService.js
@@ -1,4 +1,4 @@
-export const CustomerService = {
+export class CustomerService  {
     getData() {
         return [
             {
@@ -9002,23 +9002,23 @@ export const CustomerService = {
                 balance: 88090
             }
         ];
-    },
+    }
 
     getCustomersSmall() {
         return Promise.resolve(this.getData().slice(0, 10));
-    },
+    }
 
     getCustomersMedium() {
         return Promise.resolve(this.getData().slice(0, 50));
-    },
+    }
 
     getCustomersLarge() {
         return Promise.resolve(this.getData().slice(0, 200));
-    },
+    }
 
     getCustomersXLarge() {
         return Promise.resolve(this.getData());
-    },
+    }
 
     getCustomers(params) {
         const queryParams = params
diff --git a/service/IconService.js b/service/IconService.js
index c1199a92..de31841e 100644
--- a/service/IconService.js
+++ b/service/IconService.js
@@ -1,12 +1,12 @@
 let icons = [];
 let selectedIcon = null;
 
-export const IconService = {
+export class IconService  {
     getIcons() {
         return fetch('/demo/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())
             .then((d) => d.icons);
-    },
+    }
 
     getIcon(id) {
         if (icons) {
diff --git a/service/NodeService.js b/service/NodeService.js
index d6877cca..4989fd12 100755
--- a/service/NodeService.js
+++ b/service/NodeService.js
@@ -1,4 +1,4 @@
-export const NodeService = {
+export class NodeService  {
     getTreeNodesData() {
         return [
             {
@@ -66,7 +66,7 @@ export const NodeService = {
                 ]
             }
         ];
-    },
+    }
 
     getTreeTableNodesData() {
         return [
@@ -419,11 +419,11 @@ export const NodeService = {
                 ]
             }
         ];
-    },
+    }
 
     getTreeTableNodes() {
         return Promise.resolve(this.getTreeTableNodesData());
-    },
+    }
 
     getTreeNodes() {
         return Promise.resolve(this.getTreeNodesData());
diff --git a/service/PhotoService.js b/service/PhotoService.js
index 393de5e8..6b3a4f8a 100644
--- a/service/PhotoService.js
+++ b/service/PhotoService.js
@@ -1,4 +1,4 @@
-export const PhotoService = {
+export class PhotoService  {
     getData() {
         return [
             {
@@ -92,7 +92,7 @@ export const PhotoService = {
                 title: 'Title 15'
             }
         ];
-    },
+    }
 
     getImages() {
         return Promise.resolve(this.getData());
diff --git a/service/ProductService.js b/service/ProductService.js
index 5119585f..c3065fa7 100644
--- a/service/ProductService.js
+++ b/service/ProductService.js
@@ -1,4 +1,4 @@
-export const ProductService = {
+export class ProductService {
     getProductsData() {
         return [
             {
@@ -362,7 +362,7 @@ export const ProductService = {
                 rating: 8
             }
         ];
-    },
+    }
 
     getProductsWithOrdersData() {
         return [
@@ -1196,23 +1196,23 @@ export const ProductService = {
                 ]
             }
         ];
-    },
+    }
 
     getProductsMini() {
         return Promise.resolve(this.getProductsData().slice(0, 5));
-    },
+    }
 
     getProductsSmall() {
         return Promise.resolve(this.getProductsData().slice(0, 10));
-    },
+    }
 
     getProducts() {
         return Promise.resolve(this.getProductsData());
-    },
+    }
 
     getProductsWithOrdersSmall() {
         return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
-    },
+    }
 
     getProductsWithOrders() {
         return Promise.resolve(this.getProductsWithOrdersData());