diff --git a/bo/src/components/customer/PageCarts.vue b/bo/src/components/customer/PageCarts.vue
index ff142cb..237bd55 100644
--- a/bo/src/components/customer/PageCarts.vue
+++ b/bo/src/components/customer/PageCarts.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
       <div class="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">
@@ -20,48 +21,88 @@
             </div>
 
             <div class="w-full">
+=======
+    <div class="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">
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
                 <div
                     class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
                     <h2
                         class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
-                        {{ t('Your Carts') }}
+                        {{ t('Selected Products') }}
                     </h2>
-                    <div v-if="cartStore.carts?.length > 0"
-                        class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
-                        <div v-for="cart in cartStore.carts" :key="cart.cart_id"
-                            @click="cartStore.setActiveCart(cart.cart_id)"
-                            class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
-                                ? 'bg-blue-50 dark:bg-blue-900/20'
-                                : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
-                            <div class="flex-1 min-w-0">
-                                <div class="flex items-center gap-2">
-                                    <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
-                                    <p class="text-black dark:text-white font-medium truncate cursor-pointer"
-                                        @click="openCart(cart)">{{
-                                            cart.name }}</p>
+                    <div v-if="cartStore.items.length > 0">
+                        <div v-for="item in cartStore.items" :key="item.id"
+                            class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
+                            <div
+                                class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
+                                <img v-if="item.image" :src="item.image" :alt="item.name"
+                                    class="w-full h-full object-cover" />
+                                <UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
+                            </div>
+                        </div>
+
+                        <div class="w-full">
+                            <div
+                                class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+                                <h2
+                                    class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
+                                    {{ t('Your Carts') }}
+                                </h2>
+                                <div v-if="cartStore.carts?.length > 0"
+                                    class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
+                                    <div v-for="cart in cartStore.carts" :key="cart.cart_id"
+                                        @click="cartStore.setActiveCart(cart.cart_id)"
+                                        class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
+                                            ? 'bg-blue-50 dark:bg-blue-900/20'
+                                            : 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
+                                        <div class="flex-1 min-w-0">
+                                            <div class="flex items-center gap-2">
+                                                <p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
+                                                <p class="text-black dark:text-white font-medium truncate cursor-pointer"
+                                                    @click="openCart(cart)">{{
+                                                        cart.name }}</p>
+                                            </div>
+                                        </div>
+                                        <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
+                                            @change="toggleCart(cart.cart_id)" />
+                                    </div>
+                                </div>
+                                <div v-else class="p-8 text-center">
+                                    <UIcon name="mdi:cart-outline"
+                                        class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
+                                    <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
                                 </div>
                             </div>
-                            <input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
-                                @change="toggleCart(cart.cart_id)" />
                         </div>
                     </div>
-                    <div v-else class="p-8 text-center">
-                        <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
-                        <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
-                    </div>
-                </div>
-            </div>
-        </div>
 
-        <UModal v-model:open="showCreateModal">
-            <template #header>
-                <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
-            </template>
-            <template #body>
-                <div class="flex flex-col gap-4">
-                    <UInput v-model="newCartName" :placeholder="t('Cart name')"
-                        class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
+                    <UModal v-model:open="showCreateModal">
+                        <template #header>
+                            <h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
+                        </template>
+                        <template #body>
+                            <div class="flex flex-col gap-4">
+                                <UInput v-model="newCartName" :placeholder="t('Cart name')"
+                                    class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
+                            </div>
+                        </template>
+                        <template #footer>
+                            <div class="flex justify-end gap-2">
+                                <UButton variant="outline" color="neutral" @click="showCreateModal = false">
+                                    {{ t('Cancel') }}
+                                </UButton>
+                                <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
+                                    class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
+                                    {{ t('Create') }}
+                                </UButton>
+                            </div>
+                        </template>
+                    </UModal>
                 </div>
+<<<<<<< HEAD
             </template>
             <template #footer>
                 <div class="flex justify-end gap-2">
@@ -74,26 +115,28 @@
                     </UButton>
                 </div>
               </label>
+=======
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
             </div>
-          </div>
         </div>
-      </div>
     </div>
+<<<<<<< HEAD
   </template>
+=======
+</template>
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useCartStore } from '@/stores/customer/cart'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useAddressStore } from '@/stores/customer/address'
 const cartStore = useCartStore()
 const addressStore = useAddressStore()
 const { t } = useI18n()
 const router = useRouter()
 
-const cartStore = useCartStore()
-const { t } = useI18n()
-
 const showCreateModal = ref(false)
 const newCartName = ref('')