diff --git a/bo/.gitignore b/bo/.gitignore
index cd68f14..e80697a 100644
--- a/bo/.gitignore
+++ b/bo/.gitignore
@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+/bo/components.d.ts
 
 # Editor directories and files
 .vscode/*
diff --git a/bo/components.d.ts b/bo/components.d.ts
deleted file mode 100644
index 91a4f16..0000000
--- a/bo/components.d.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// biome-ignore lint: disable
-// oxlint-disable
-// ------
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    CartDetails: typeof import('./src/components/customer/CartDetails.vue')['default']
-    CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
-    CategoryMenuListing: typeof import('./src/components/inner/categoryMenuListing.vue')['default']
-    Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
-    Cs_TermsAndConditionsView: typeof import('./src/components/terms/cs_TermsAndConditionsView.vue')['default']
-    En_PrivacyPolicyView: typeof import('./src/components/terms/en_PrivacyPolicyView.vue')['default']
-    En_TermsAndConditionsView: typeof import('./src/components/terms/en_TermsAndConditionsView.vue')['default']
-    LangSwitch: typeof import('./src/components/inner/langSwitch.vue')['default']
-    PageAddresses: typeof import('./src/components/customer/PageAddresses.vue')['default']
-    PageCarts: typeof import('./src/components/customer/PageCarts.vue')['default']
-    PageProduct: typeof import('./src/components/customer/PageProduct.vue')['default']
-    PageProducts: typeof import('./src/components/admin/PageProducts.vue')['default']
-    PageProfileDetails: typeof import('./src/components/customer/PageProfileDetails.vue')['default']
-    PageProfileDetailsAddInfo: typeof import('./src/components/customer/PageProfileDetailsAddInfo.vue')['default']
-    Pl_PrivacyPolicyView: typeof import('./src/components/terms/pl_PrivacyPolicyView.vue')['default']
-    Pl_TermsAndConditionsView: typeof import('./src/components/terms/pl_TermsAndConditionsView.vue')['default']
-    ProductCustomization: typeof import('./src/components/customer/components/ProductCustomization.vue')['default']
-    ProductDetailView: typeof import('./src/components/admin/ProductDetailView.vue')['default']
-    ProductVariants: typeof import('./src/components/customer/components/ProductVariants.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    ThemeSwitch: typeof import('./src/components/inner/themeSwitch.vue')['default']
-    TopBar: typeof import('./src/components/TopBar.vue')['default']
-    TopBarLogin: typeof import('./src/components/TopBarLogin.vue')['default']
-    UAlert: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Alert.vue')['default']
-    UButton: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Button.vue')['default']
-    UDrawer: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Drawer.vue')['default']
-    UForm: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Form.vue')['default']
-    UFormField: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/FormField.vue')['default']
-    UIcon: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']
-    UInput: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Input.vue')['default']
-    UNavigationMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/NavigationMenu.vue')['default']
-    USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']
-  }
-}
diff --git a/bo/src/components/TopBar.vue b/bo/src/components/TopBar.vue
index 2c9d8ca..38571bd 100644
--- a/bo/src/components/TopBar.vue
+++ b/bo/src/components/TopBar.vue
@@ -3,10 +3,11 @@ import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/langSwitch.vue'
 import ThemeSwitch from './inner/themeSwitch.vue'
 import { useAuthStore } from '@/stores/auth'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { currentLang } from '@/router/langs'
 import type { LabelTrans, TopMenuItem } from '@/types'
 import type { NavigationMenuItem } from '@nuxt/ui'
+import { useRoute, useRouter } from 'vue-router'
 
 const authStore = useAuthStore()
 let menu = ref()
@@ -19,30 +20,43 @@ async function getTopMenu() {
   }
 }
 
+const router = useRouter()
+const route = useRoute()
 const menuItems = computed(() => transformMenu(menu.value[0].children, currentLang.value?.iso_code))
 function transformMenu(items: TopMenuItem[], locale: string | undefined): NavigationMenuItem[] {
+
   return items.map((item) => {
-    let route = {
-      icon: 'i-lucide-house',
+    const route: NavigationMenuItem = {
+      icon: item.label.icon ? item.label.icon : 'i-lucide-house',
       label: item.label.trans[locale as keyof LabelTrans].label,
-      children: item.children ? transformMenu(item.children, locale) : undefined,
+      children: item.children
+        ? transformMenu(item.children, locale)
+        : undefined,
+    }
+
+    route.onSelect = () => {
+      const query = {
+        name: item.params.route.name,
+        params: {
+          ...(item.params.route.params || {}),
+          locale: currentLang.value?.iso_code
+        }
+      }
+
+      router.push(query)
     }
-    if (item.params?.route) {
-      route = { ...route, ...{ to: { name: item.params.route.name, params: { locale: locale } } } }
-    } 
 
     return route
   })
 }
-
 await getTopMenu()
 </script>
 
 <template>
-  {{ menuItems }}
-  <!-- fixed top-0 left-0 right-0 z-50 -->
-  <header class="bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <header
+    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
+    <!-- px-4 sm:px-6 lg:px-8 -->
+    <div class="container mx-auto px-4">
       <div class="flex items-center justify-between h-14">
         <!-- Logo -->
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
@@ -52,49 +66,18 @@ await getTopMenu()
           <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
         </RouterLink>
 
-        <UNavigationMenu :items="menuItems" class="w-full" />
-
-        <!-- {{ router }} -->
-        <!-- <RouterLink :to="{ name: 'admin-products' }">
-          products list
-        </RouterLink>
-        <RouterLink :to="{ name: 'admin-product-detail' }">
-          product detail
-        </RouterLink>
-        <RouterLink :to="{
-          name: 'customer-product', params: {
-            product_id: '51'
-          }
-        }">
-          Product (51)
-        </RouterLink>
-        <RouterLink :to="{ name: 'addresses' }">
-          Addresses
-        </RouterLink>
-        <RouterLink :to="{ name: 'profile-details' }">
-          Customer Data
-        </RouterLink>
-        <RouterLink :to="{ name: 'cart' }">
-          Cart
-        </RouterLink>
-        <RouterLink :to="{
-          name: 'cart-details', params: {
-            cart_id: '1'
-          }
-        }">
-          Cart details (1)
-        </RouterLink> -->
+        <UNavigationMenu :type="'trigger'" :ui="{
+          root: 'justify-center',
+          list: 'gap-4'
+        }" :items="menuItems" class="w-full"></UNavigationMenu>
         <div class="flex items-center gap-2">
           <!-- Language Switcher -->
           <LangSwitch />
           <!-- Theme Switcher -->
           <ThemeSwitch />
           <!-- Logout Button (only when authenticated) -->
-          <button
-            v-if="authStore.isAuthenticated"
-            @click="authStore.logout()"
-            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)"
-          >
+          <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
+            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
             {{ $t('general.logout') }}
           </button>
         </div>
diff --git a/bo/src/components/customer/CartDetails.vue b/bo/src/components/customer/CartDetails.vue
index a27ca88..34beffa 100644
--- a/bo/src/components/customer/CartDetails.vue
+++ b/bo/src/components/customer/CartDetails.vue
@@ -1,6 +1,6 @@
 <template>
     <component :is="Default || 'div'">
-  <div class="container mx-auto mt-20">
+  <div class="container mx-auto">
     <h2
       class="font-semibold text-black dark:text-white pb-6 text-2xl">
       {{ t('Cart Items') }}
diff --git a/bo/src/components/customer/PageAddresses.vue b/bo/src/components/customer/PageAddresses.vue
index c4f9410..9ee6805 100644
--- a/bo/src/components/customer/PageAddresses.vue
+++ b/bo/src/components/customer/PageAddresses.vue
@@ -1,6 +1,6 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="container mx-auto mt-20">
+    <div class="container mx-auto">
         <div class="flex flex-col gap-5 mb-6">
             <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Addresses') }}</h1>
             <div class="flex md:flex-row flex-col justify-between items-start md:items-center gap-5 md:gap-0">
diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index fd1e1fb..d886732 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="Default || 'div'">
-    <div class="container mx-auto mt-20 flex flex-col gap-5 md:gap-10">
+    <div class="container mx-auto flex flex-col gap-5 md:gap-10">
       <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
       <div class="flex flex-col lg:flex-row gap-5 md:gap-10">
         <div class="flex-1">
diff --git a/bo/src/components/customer/PageOrders.vue b/bo/src/components/customer/PageOrders.vue
new file mode 100644
index 0000000..a6f1809
--- /dev/null
+++ b/bo/src/components/customer/PageOrders.vue
@@ -0,0 +1,9 @@
+<template>
+    <component :is="Default || 'div'">
+        Orders page
+    </component>
+</template>
+
+<script lang="ts" setup>
+import Default from '@/layouts/default.vue'
+</script>
\ No newline at end of file
diff --git a/bo/src/components/customer/PageProduct.vue b/bo/src/components/customer/PageProduct.vue
index fdff612..f2daddd 100644
--- a/bo/src/components/customer/PageProduct.vue
+++ b/bo/src/components/customer/PageProduct.vue
@@ -1,6 +1,6 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="container mt-20 mx-auto">
+    <div class="container mx-auto">
         <div class="flex md:flex-row flex-col justify-between gap-8 my-6">
             <div class="flex-1">
                 <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-8 flex items-center justify-center min-h-[300px] ">
diff --git a/bo/src/components/customer/PageProducts.vue b/bo/src/components/customer/PageProducts.vue
new file mode 100644
index 0000000..8b5bcdb
--- /dev/null
+++ b/bo/src/components/customer/PageProducts.vue
@@ -0,0 +1,430 @@
+<template>
+    <suspense>
+        <component :is="Default || 'div'">
+            <div class="container mx-auto">
+                <!-- <UNavigationMenu orientation="vertical" :items="listing" class="data-[orientation=vertical]:w-48">
+                    <template #item="{ item, active }">
+                        <div class="flex items-center gap-2 px-3 py-2">
+                            <UIcon name="i-heroicons-book-open" />
+                            <span>{{ item.name }}</span>
+                        </div>
+                    </template>
+</UNavigationMenu> -->
+                <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
+                <div v-if="loading" class="text-center py-8">
+                    <span class="text-gray-600 dark:text-gray-400">Loading products...</span>
+                </div>
+                <div v-else-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
+                    {{ error }}
+                </div>
+                <div v-else class="overflow-x-auto">
+                    <div class="flex gap-2">
+                        <CategoryMenuListing />
+                        <UTable :data="productsList" :columns="columns" class="flex-1">
+                            <template #expanded="{ row }">
+                                <UTable :data="productsList.slice(0, 3)" :columns="columnsChild" :ui="{
+                                    thead: 'hidden'
+                                }" />
+                            </template>
+                        </UTable>
+                    </div>
+                    <div class="flex justify-center items-center py-8">
+                        <UPagination v-model:page="page" :total="total" :page-size="perPage" />
+                    </div>
+                    <div v-if="productsList.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
+                        No products found
+                    </div>
+                </div>
+            </div>
+        </component>
+    </suspense>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, h, resolveComponent, computed } from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson'
+import Default from '@/layouts/default.vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { TableColumn } from '@nuxt/ui'
+import CategoryMenuListing from '../inner/categoryMenuListing.vue'
+
+interface Product {
+    reference: number
+    product_id: number
+    name: string
+    image_link: string
+    link_rewrite: string
+}
+
+const router = useRouter()
+const route = useRoute()
+
+const page = computed({
+    get: () => Number(route.query.page) || 1,
+    set: (val: number) => {
+        router.push({
+            query: {
+                ...route.query,
+                page: val
+            }
+        })
+    }
+})
+const sortField = computed({
+    get: () => [
+        route.query.sort as string | undefined,
+        route.query.direction as 'asc' | 'desc' | undefined
+    ],
+
+    set: ([sort]: [string, 'asc' | 'desc']) => {
+        const currentSort = route.query.sort as string | undefined
+        const currentDirection = route.query.direction as 'asc' | 'desc' | undefined
+
+        let query = { ...route.query }
+
+        if (currentSort === sort) {
+            if (currentDirection === 'asc') {
+                query.direction = 'desc'
+            } else if (currentDirection === 'desc') {
+                delete query.sort
+                delete query.direction
+            } else {
+                query.direction = 'asc'
+                query.sort = sort
+            }
+        } else {
+            query.sort = sort
+            query.direction = 'asc'
+        }
+
+        router.push({ query })
+    }
+})
+
+const perPage = ref(15)
+const total = ref(0)
+
+interface ApiResponse {
+    message: string
+    items: Product[]
+    count: number
+}
+
+const productsList = ref<Product[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+const filters = computed<Record<string, string>>({
+    get: () => {
+        const q = { ...route.query }
+        delete q.page
+        delete q.sort
+        delete q.direction
+        return q as Record<string, string>
+    },
+    set: (val) => {
+        const baseQuery = { ...route.query }
+
+        Object.keys(baseQuery).forEach(key => {
+            if (!['page', 'sort', 'direction'].includes(key)) {
+                delete baseQuery[key]
+            }
+        })
+
+        router.push({
+            query: {
+                ...baseQuery,
+                ...val,
+                page: 1
+            }
+        })
+    }
+})
+
+function debounce(fn: Function, delay = 400) {
+    let t: any
+    return (...args: any[]) => {
+        clearTimeout(t)
+        t = setTimeout(() => fn(...args), delay)
+    }
+}
+
+const updateFilter = debounce((columnId: string, val: string) => {
+    const newFilters = { ...filters.value }
+
+    if (val) newFilters[columnId] = val
+    else delete newFilters[columnId]
+
+    filters.value = newFilters
+}, 400)
+
+async function fetchProductList() {
+    loading.value = true
+    error.value = null
+
+    const params = new URLSearchParams()
+
+    Object.entries(route.query).forEach(([key, value]) => {
+        if (value) params.append(key, String(value))
+    })
+
+    const url = `/api/v1/restricted/list-products/get-listing?${params}`
+
+    try {
+        const response = await useFetchJson<ApiResponse>(url)
+        productsList.value = response.items || []
+        total.value = response.count || 0
+    } catch (e: unknown) {
+        error.value = e instanceof Error ? e.message : 'Failed to load products'
+    } finally {
+        loading.value = false
+    }
+}
+
+function goToProduct(productId: number) {
+    router.push({
+        name: 'product-detail',
+        params: { id: productId }
+    })
+}
+
+const selectedCount = ref({
+    product_id: null,
+    count: 0
+})
+
+function getIcon(name: string) {
+    if (sortField.value[0] === name) {
+        if (sortField.value[1] === 'asc') return 'i-lucide-arrow-up-narrow-wide'
+        if (sortField.value[1] === 'desc') return 'i-lucide-arrow-down-wide-narrow'
+    }
+    return 'i-lucide-arrow-up-down'
+}
+
+const UInputNumber = resolveComponent('UInputNumber')
+const UInput = resolveComponent('UInput')
+const UButton = resolveComponent('UButton')
+const UIcon = resolveComponent('UIcon')
+
+const columns: TableColumn<Payment>[] = [
+    {
+        id: 'expand',
+        cell: ({ row }) =>
+            h(UButton, {
+                color: 'neutral',
+                variant: 'ghost',
+                icon: 'i-lucide-chevron-down',
+                square: true,
+                'aria-label': 'Expand',
+                ui: {
+                    leadingIcon: [
+                        'transition-transform',
+                        row.getIsExpanded() ? 'duration-200 rotate-180' : ''
+                    ]
+                },
+                onClick: () => row.toggleExpanded()
+            })
+    },
+    {
+        accessorKey: 'product_id',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['product_id', 'asc']
+                    }
+                }, [
+                    h('span', 'ID'),
+                    h(UIcon, {
+                        name: getIcon('product_id')
+                    })
+                ]),
+
+                h(UInput, {
+                    placeholder: 'Search...',
+                    modelValue: filters.value[column.id] ?? '',
+                    'onUpdate:modelValue': (val: string) => {
+                        updateFilter(column.id, val)
+                    },
+                    size: 'xs'
+                })
+            ])
+        },
+        // header: '#',
+        cell: ({ row }) => `#${row.getValue('product_id') as number}`
+    },
+    {
+        accessorKey: 'image_link',
+        header: 'Image',
+        cell: ({ row }) => {
+            return h('img', {
+                src: row.getValue('image_link') as string,
+                style: 'width:40px;height:40px;object-fit:cover;'
+            })
+        }
+    },
+    {
+        accessorKey: 'name',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['name', 'asc']
+                    }
+                }, [
+                    h('span', 'Name'),
+                    h(UIcon, {
+                        name: getIcon('name')
+                    })
+                ]),
+
+                h(UInput, {
+                    placeholder: 'Search...',
+                    modelValue: filters.value[column.id] ?? '',
+                    'onUpdate:modelValue': (val: string) => {
+                        updateFilter(column.id, val)
+                    },
+                    size: 'xs'
+                })
+            ])
+        },
+        cell: ({ row }) => row.getValue('name') as string,
+        filterFn: (row, columnId, value) => {
+            const name = row.getValue(columnId) as string
+            return name.toLowerCase().includes(value.toLowerCase())
+        }
+    },
+    {
+        accessorKey: 'quantity',
+        header: ({ column }) => {
+            return h('div', { class: 'flex flex-col gap-1' }, [
+                h('div', {
+                    class: 'flex items-center gap-2 cursor-pointer',
+                    onClick: () => {
+                        sortField.value = ['quantity', 'asc']
+                    }
+                }, [
+                    h('span', 'In stock'),
+                    h(UIcon, {
+                        name: getIcon('quantity')
+                    })
+                ]),
+            ])
+        },
+        cell: ({ row }) => row.getValue('quantity') as number
+    },
+    {
+        accessorKey: 'count',
+        header: 'Count',
+        cell: ({ row }) => {
+            return h(UInputNumber, {
+                modelValue: selectedCount.value.product_id === row.original.product_id ? selectedCount.value.count : 0,
+                'onUpdate:modelValue': (val: number) => {
+                    if (val)
+                        selectedCount.value = {
+                            product_id: row.original.product_id,
+                            count: val
+                        }
+                    else {
+                        selectedCount.value = {
+                            product_id: null,
+                            count: 0
+                        }
+                    }
+                },
+                min: 0,
+                max: row.original.quantity
+            })
+        }
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                onClick: () => {
+                    console.log('Clicked', row.original)
+                },
+                color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary',
+                disabled: selectedCount.value.product_id !== row.original.product_id,
+                variant: 'solid'
+            }, 'Add to cart')
+        },
+    }
+]
+
+const columnsChild: TableColumn<Payment>[] = [
+    {
+        accessorKey: 'product_id',
+        header: '',
+        cell: ({ row }) => `#${row.getValue('product_id') as number}`
+    },
+    {
+        accessorKey: 'image_link',
+        header: '',
+        cell: ({ row }) => {
+            return h('img', {
+                src: row.getValue('image_link') as string,
+                style: 'width:40px;height:40px;object-fit:cover;'
+            })
+        }
+    },
+    {
+        accessorKey: 'name',
+        header: '',
+        cell: ({ row }) => row.getValue('name') as string
+    },
+    {
+        accessorKey: 'quantity',
+        header: '',
+        cell: ({ row }) => row.getValue('quantity') as number
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UInputNumber, {
+                modelValue: selectedCount.value.product_id === row.original.product_id ? selectedCount.value.count : 0,
+                'onUpdate:modelValue': (val: number) => {
+                    if (val)
+                        selectedCount.value = {
+                            product_id: row.original.product_id,
+                            count: val
+                        }
+                    else {
+                        selectedCount.value = {
+                            product_id: null,
+                            count: 0
+                        }
+                    }
+                },
+                min: 0,
+                max: row.original.quantity
+            })
+        }
+    },
+    {
+        accessorKey: 'count',
+        header: '',
+        cell: ({ row }) => {
+            return h(UButton, {
+                onClick: () => {
+                    console.log('Clicked', row.original)
+                },
+                color: selectedCount.value.product_id !== row.original.product_id ? 'info' : 'primary',
+                disabled: selectedCount.value.product_id !== row.original.product_id,
+                variant: 'solid'
+            }, 'Add to cart')
+        },
+    }
+]
+
+watch(
+    () => route.query,
+    () => {
+        fetchProductList()
+    },
+    { immediate: true }
+)
+</script>
\ No newline at end of file
diff --git a/bo/src/components/customer/PageProfileDetails.vue b/bo/src/components/customer/PageProfileDetails.vue
index 62acd5d..5e3862d 100644
--- a/bo/src/components/customer/PageProfileDetails.vue
+++ b/bo/src/components/customer/PageProfileDetails.vue
@@ -1,6 +1,6 @@
 <template>
     <component :is="Default || 'div'">
-        <div class="container mx-auto mt-20">
+        <div class="container mx-auto">
             <div class="flex flex-col gap-5 mb-6">
                 <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Customer Data') }}</h1>
 
diff --git a/bo/src/components/customer/PageProfileDetailsAddInfo.vue b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
index 882b545..455edaa 100644
--- a/bo/src/components/customer/PageProfileDetailsAddInfo.vue
+++ b/bo/src/components/customer/PageProfileDetailsAddInfo.vue
@@ -1,106 +1,114 @@
 <template>
     <component :is="Default || 'div'">
-    <div class="container mx-auto mt-20">
-        <div class="max-w-2xl mx-auto">
-            <div class="flex flex-col gap-5 mb-6">
-                <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Create Account') }}</h1>
-                <div
-                    class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
-                    <UForm @submit.prevent="saveAccount" :validate="validate" class="space-y-6">
-                        <div>
-                            <h2 class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
-                                <UIcon name="mdi:domain"
-                                    class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-                                {{ t('Company Information') }}
-                            </h2>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="md:col-span-2">
-                                    <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
-                                        t('Company Name') }} *</label>
-                                    <UInput v-model="formData.companyName" :placeholder="t('Enter company name')"
-                                        name="companyName" class="w-full" />
-                                </div>
-                                <div class="md:col-span-2">
-                                    <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
-                                        t('Company Email') }} *</label>
-                                    <UInput v-model="formData.companyEmail" type="email"
-                                        :placeholder="t('Enter company email')" name="companyEmail" class="w-full" />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
-                                        t('REGON') }}</label>
-                                    <UInput v-model="formData.regon" :placeholder="t('Enter REGON')" name="regon"
-                                        class="w-full" />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-black dark:text-white mb-1">{{ t('NIP')
-                                    }}</label>
-                                    <UInput v-model="formData.nip" :placeholder="t('Enter NIP')" name="nip"
-                                        class="w-full" />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-black dark:text-white mb-1">{{ t('VAT')
-                                    }}</label>
-                                    <UInput v-model="formData.vat" :placeholder="t('Enter VAT')" name="vat"
-                                        class="w-full" />
+        <div class="container mx-auto">
+            <div class="max-w-2xl mx-auto">
+                <div class="flex flex-col gap-5 mb-6">
+                    <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Create Account') }}</h1>
+                    <div
+                        class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
+                        <UForm @submit.prevent="saveAccount" :validate="validate" class="space-y-6">
+                            <div>
+                                <h2
+                                    class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
+                                    <UIcon name="mdi:domain"
+                                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                    {{ t('Company Information') }}
+                                </h2>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div class="md:col-span-2">
+                                        <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
+                                            t('Company Name') }} *</label>
+                                        <UInput v-model="formData.companyName" :placeholder="t('Enter company name')"
+                                            name="companyName" class="w-full" />
+                                    </div>
+                                    <div class="md:col-span-2">
+                                        <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
+                                            t('Company Email') }} *</label>
+                                        <UInput v-model="formData.companyEmail" type="email"
+                                            :placeholder="t('Enter company email')" name="companyEmail"
+                                            class="w-full" />
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
+                                            t('REGON') }}</label>
+                                        <UInput v-model="formData.regon" :placeholder="t('Enter REGON')" name="regon"
+                                            class="w-full" />
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
+                                            t('NIP')
+                                            }}</label>
+                                        <UInput v-model="formData.nip" :placeholder="t('Enter NIP')" name="nip"
+                                            class="w-full" />
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-black dark:text-white mb-1">{{
+                                            t('VAT')
+                                            }}</label>
+                                        <UInput v-model="formData.vat" :placeholder="t('Enter VAT')" name="vat"
+                                            class="w-full" />
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div>
-                            <h2 class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
-                                <UIcon name="mdi:map-marker"
-                                    class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-                                {{ t('Select Addresses') }}
-                            </h2>
-                            <div
-                                class="bg-(--second-light) dark:bg-(--main-dark)">
-                                <div class="mb-4">
-                                    <UInput v-model="addressSearchQuery" type="text" :placeholder="t('Search address')"
-                                        class="w-full bg-white dark:bg-(--black) text-black dark:text-white" />
-                                </div>
-                                <div v-if="addressStore.filteredAddresses.length > 0" class="space-y-3">
-                                    <label v-for="address in addressStore.filteredAddresses" :key="address.id"
-                                        class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors"
-                                        :class="cartStore.selectedAddressId === address.id
-                                            ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
-                                            : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
-                                        <input type="radio" :value="address.id" v-model="selectedAddress"
-                                            class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
-                                        <div class="flex-1">
-                                            <p class="text-black dark:text-white font-medium">{{ address.street }}</p>
-                                            <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }},
-                                                {{ address.city }}</p>
-                                            <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.country }}
-                                            </p>
-                                        </div>
-                                    </label>
-                                </div>
-                                <div v-else class="text-center py-6">
-                                    <UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
-                                    <p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
-                                    <RouterLink :to="{ name: 'addresses' }"
-                                        class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
-                                        {{ t('Add Address') }}
-                                    </RouterLink>
+                            <div>
+                                <h2
+                                    class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
+                                    <UIcon name="mdi:map-marker"
+                                        class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                    {{ t('Select Addresses') }}
+                                </h2>
+                                <div class="bg-(--second-light) dark:bg-(--main-dark)">
+                                    <div class="mb-4">
+                                        <UInput v-model="addressSearchQuery" type="text"
+                                            :placeholder="t('Search address')"
+                                            class="w-full bg-white dark:bg-(--black) text-black dark:text-white" />
+                                    </div>
+                                    <div v-if="addressStore.filteredAddresses.length > 0" class="space-y-3">
+                                        <label v-for="address in addressStore.filteredAddresses" :key="address.id"
+                                            class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors"
+                                            :class="cartStore.selectedAddressId === address.id
+                                                ? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
+                                                : 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
+                                            <input type="radio" :value="address.id" v-model="selectedAddress"
+                                                class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+                                            <div class="flex-1">
+                                                <p class="text-black dark:text-white font-medium">{{ address.street }}
+                                                </p>
+                                                <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode
+                                                    }},
+                                                    {{ address.city }}</p>
+                                                <p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.country
+                                                    }}
+                                                </p>
+                                            </div>
+                                        </label>
+                                    </div>
+                                    <div v-else class="text-center py-6">
+                                        <UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
+                                        <p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
+                                        <RouterLink :to="{ name: 'addresses' }"
+                                            class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
+                                            {{ t('Add Address') }}
+                                        </RouterLink>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="flex justify-end gap-3 pt-4">
-                            <UButton variant="outline" color="neutral" @click="goBack"
-                                class="text-black dark:text-white">
-                                {{ t('Cancel') }}
-                            </UButton>
-                            <UButton type="submit" color="primary"
-                                class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
-                                <UIcon name="mdi:content-save" />
-                                {{ t('Save') }}
-                            </UButton>
-                        </div>
-                    </UForm>
+                            <div class="flex justify-end gap-3 pt-4">
+                                <UButton variant="outline" color="neutral" @click="goBack"
+                                    class="text-black dark:text-white">
+                                    {{ t('Cancel') }}
+                                </UButton>
+                                <UButton type="submit" color="primary"
+                                    class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+                                    <UIcon name="mdi:content-save" />
+                                    {{ t('Save') }}
+                                </UButton>
+                            </div>
+                        </UForm>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
     </component>
 </template>
 
@@ -170,7 +178,7 @@ function saveAccount() {
         vat: formData.value.vat,
         companyAddressId: formData.value.companyAddressId,
         billingAddressId: formData.value.billingAddressId,
-        companyAddress : ''
+        companyAddress: ''
     })
 
     router.push({ name: 'profile-details' })
diff --git a/bo/src/components/customer/PageStatistic.vue b/bo/src/components/customer/PageStatistic.vue
new file mode 100644
index 0000000..466f718
--- /dev/null
+++ b/bo/src/components/customer/PageStatistic.vue
@@ -0,0 +1,9 @@
+<template>
+    <component :is="Default || 'div'">
+        Statistic page
+    </component>
+</template>
+
+<script lang="ts" setup>
+import Default from '@/layouts/default.vue'
+</script>
\ No newline at end of file
diff --git a/bo/src/components/inner/langSwitch.vue b/bo/src/components/inner/langSwitch.vue
index e1a345d..bbe5c0f 100644
--- a/bo/src/components/inner/langSwitch.vue
+++ b/bo/src/components/inner/langSwitch.vue
@@ -1,16 +1,16 @@
 <template>
-  {{ locale }}
-  <USelectMenu v-model="locale" :items="langs" class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm  hover:none!"
-    valueKey="iso_code" :searchInput="false">
+  <USelectMenu v-model="locale" :items="langs"
+    class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm  hover:none!" valueKey="iso_code"
+    :searchInput="false">
     <template #default="{ modelValue }">
       <div class="flex items-center gap-1">
-        <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span>
+        <!-- <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span> -->
         <span class="font-medium dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.name}}</span>
       </div>
     </template>
     <template #item-leading="{ item }">
       <div class="flex items-center rounded-md cursor-pointer transition-colors">
-        <span class="text-md ">{{ item.flag }}</span>
+        <!-- <span class="text-md ">{{ item.flag }}</span> -->
         <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
       </div>
     </template>
@@ -23,6 +23,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useCookie } from '@/composable/useCookie'
 import { computed, watch } from 'vue'
 import { i18n } from '@/plugins/02_i18n'
+import { useFetchJson } from '@/composable/useFetchJson'
 const router = useRouter()
 const route = useRoute()
 
@@ -50,9 +51,22 @@ const locale = computed({
         router.replace({ path: '/' + value + currentPath, query: route.query })
       }
     }
+
+    changeLang()
   },
 })
 
+async function changeLang() {
+  try {
+    const { items } = await useFetchJson('/api/v1/public/auth/update-choice', {
+      method: 'POST'
+    })
+
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 watch(
   () => route.params.locale,
   (newLocale) => {
diff --git a/bo/src/layouts/default.vue b/bo/src/layouts/default.vue
index c0618e5..149e24f 100644
--- a/bo/src/layouts/default.vue
+++ b/bo/src/layouts/default.vue
@@ -4,9 +4,11 @@ import TopBar from '@/components/TopBar.vue';
 
 <template>
   <div class="h-screen grid grid-rows-[auto_1fr_auto]">
-    <main class="p-10">
-      <TopBar/>
-      <slot></slot>
+    <main class="pt-20 pb-10">
+      <TopBar />
+      <div class="container mx-auto px-4">
+        <slot />
+      </div>
     </main>
   </div>
 </template>
diff --git a/bo/src/router/index.ts b/bo/src/router/index.ts
index 34a3add..c87ac42 100644
--- a/bo/src/router/index.ts
+++ b/bo/src/router/index.ts
@@ -49,6 +49,42 @@ const router = createRouter({
   ],
 })
 
+const viewModules = import.meta.glob('/src/views/**/*.vue')
+const componentModules = import.meta.glob('/src/components/**/*.vue')
+
+async function setRoutes() {
+  const routes = await getRoutes()
+
+  for (const item of routes) {
+    const componentName = item.component
+    const [, folder] = componentName.split('/')
+    const componentPath = `/src${componentName}`
+    console.log(componentPath);
+    
+
+    let modules =
+      folder === 'views' ? viewModules : componentModules
+
+    const importer = modules[componentPath]
+
+    if (!importer) {
+      console.error('Component not found:', componentPath)
+      continue
+    }
+
+    const importedComponent = (await importer()).default
+
+    router.addRoute('locale', {
+      path: item.path,
+      component: importedComponent,
+      name: item.name,
+      meta: item.meta ? JSON.parse(item.meta) : {}
+    })
+  }
+}
+
+await setRoutes()
+
 router.beforeEach((to, from) => {
   const locale = to.params.locale as string
   const localeLang = langs.find((x) => x.iso_code === locale)
diff --git a/bo/src/router/menu.ts b/bo/src/router/menu.ts
index 9dd11ff..1f2428c 100644
--- a/bo/src/router/menu.ts
+++ b/bo/src/router/menu.ts
@@ -3,9 +3,7 @@ import type { MenuItem, Route } from "@/types/menu";
 
 export const getMenu = async () => {
     const resp = await useFetchJson<MenuItem>('/api/v1/restricted/menu/get-menu');
-
     return resp.items.children
-    
 }
 
 
@@ -13,5 +11,4 @@ export const getRoutes = async () => {
     const resp = await useFetchJson<Route[]>('/api/v1/public/menu/get-routes');
 
     return resp.items
-    
 }
\ No newline at end of file
diff --git a/bo/src/types/menu.d.ts b/bo/src/types/menu.d.ts
index fce87b5..9d52428 100644
--- a/bo/src/types/menu.d.ts
+++ b/bo/src/types/menu.d.ts
@@ -31,14 +31,15 @@ export interface TopMenuItem {
 
 export interface Label {
   label: string
-  trans:LabelTrans
+  trans: LabelTrans
+  icon?: string
 }
 
-export interface LabelTrans{
-    pl:LabelItem
-    en:LabelItem
-    de: LabelItem
-} 
+export interface LabelTrans {
+  pl: LabelItem
+  en: LabelItem
+  de: LabelItem
+}
 export interface LabelItem {
   label: string
 }