diff --git a/frontend/pages/cart/delivery.vue b/frontend/pages/cart/delivery.vue
index 644701d..ca424f7 100644
--- a/frontend/pages/cart/delivery.vue
+++ b/frontend/pages/cart/delivery.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
+
 // meta
 
 definePageMeta({
     layout: "cart",
+    middleware: "check-is-logged-in",
     pageTitle: "انتخاب آدرس",
     prevPage: { name: "cart", label: "سبد خرید" },
     nextPage: { name: "cart-checkout", label: "تسویه حساب" },
@@ -21,8 +24,6 @@ type DeliveryData = {
 
 // state
 
-const addresses = ref<Address[]>([]);
-
 const deliveryData = ref<DeliveryData>({
     address: null,
     deliveryMethod: {
@@ -32,11 +33,9 @@ const deliveryData = ref<DeliveryData>({
     },
 });
 
-// methods
+const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
 
-const handleAddNewAddress = (address: Address) => {
-    addresses.value.push(address);
-};
+// methods
 
 const handleSelectAddress = (address: Address) => {
     deliveryData.value.address = { ...address };
@@ -45,22 +44,42 @@ const handleSelectAddress = (address: Address) => {
 
 <template>
     <div class="flex flex-col w-full gap-5">
-        <AddressItem @add="handleAddNewAddress" />
-        <div v-if="addresses.length > 0" class="flex flex-col w-full gap-6">
+        <AddressItem />
+        <div class="flex flex-col w-full gap-6">
             <span class="typo-sub-h-xl"> آدرس های شما </span>
-            <div class="flex flex-col gap-6 w-full">
-                <AddressItem
-                    v-for="(address, index) in addresses"
-                    :key="index"
-                    :address="address"
-                    @select="handleSelectAddress"
-                    :isSelected="address.id == deliveryData.address?.id"
+            <div v-if="addressesIsLoading" class="flex flex-col gap-6 w-full">
+                <Skeleton
+                    v-for="i in 3"
+                    class="w-full !h-[10rem] !rounded-xl"
                 />
             </div>
+            <template v-else>
+                <div
+                    v-if="!addresses?.length"
+                    class="flex flex-grow w-full"
+                    v-auto-animate
+                >
+                    <Placeholder
+                        title="آدرسی یافت نشد :("
+                        icon="bi:map"
+                        class="!py-[2rem]"
+                    />
+                </div>
+
+                <div v-else class="flex flex-col gap-6 w-full">
+                    <AddressItem
+                        v-for="(address, index) in addresses"
+                        :key="index"
+                        :address="address"
+                        @select="handleSelectAddress"
+                        :isSelected="address.id == deliveryData.address?.id"
+                    />
+                </div>
+            </template>
         </div>
 
         <div
-            class="flex flex-col items-center w-full gap-4 p-4 border border-slate-200 rounded-xl bg-slate-50"
+            class="flex flex-col items-center w-full gap-4 my-3 p-4 border border-slate-200 rounded-xl bg-slate-50"
         >
             <span
                 class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-slate-900"