diff --git a/frontend/components/cart/AddressItem.vue b/frontend/components/cart/AddressItem.vue
index d6b5af3..a042ed9 100644
--- a/frontend/components/cart/AddressItem.vue
+++ b/frontend/components/cart/AddressItem.vue
@@ -24,6 +24,10 @@ const emit = defineEmits(["select"]);
 
 const { $queryClient: queryClient } = useNuxtApp();
 
+const modalIsShow = ref(false);
+
+const marqueeIsPause = ref(true);
+
 const { addToast } = useToast();
 
 // queries
@@ -97,20 +101,25 @@ const handleDeleteAddress = (id: number) => {
         </span>
 
         <div
-            class="flex flex-col items-center justify-between w-full gap-4 lg:flex-row"
+            class="flex flex-col items-center justify-between w-full gap-8 lg:flex-row"
         >
-            <span
-                class="w-full text-start text-sm lg:text-[1rem] lg:w-9/12 text-slate-700"
-            >
-                {{
-                    !!address
-                        ? `ایران, ${address.province}, ${address.city}, ${address.address}, کدپستی ${address.postal_code}`
-                        : "افزودن آدرس جدید"
-                }}
-            </span>
+            <div class="w-full lg:w-9/12 overflow-hidden">
+                <div
+                    class="w-full overflow-hidden overflow-ellipsis gap-5 text-start whitespace-pre text-sm lg:text-[1rem] text-slate-700"
+                >
+                    {{
+                        !!address
+                            ? `ایران, ${address.province}, ${address.city}, ${address.address}, کدپستی ${address.postal_code}`
+                            : "افزودن آدرس جدید"
+                    }}
+                </div>
+            </div>
 
             <div class="flex items-center justify-end w-full lg:w-3/12">
-                <AddressModal :address="address" />
+                <AddressModal
+                    :address="address"
+                    v-model:is-show="modalIsShow"
+                />
             </div>
         </div>
     </button>