diff --git a/frontend/components/cart/AddressItem.vue b/frontend/components/cart/AddressItem.vue
index 4f02ff5..bcd660a 100644
--- a/frontend/components/cart/AddressItem.vue
+++ b/frontend/components/cart/AddressItem.vue
@@ -1,7 +1,59 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// types
+
+type Props = {
+    address?: Address;
+    isSelected?: boolean;
+};
+
+// props
+
+const props = defineProps<Props>();
+
+// emit
+
+const emit = defineEmits(["select"]);
+
+// computed
+</script>
 
 <template>
-    <div></div>
+    <button
+        @click="!!address ? emit('select', address) : null"
+        :class="
+            isSelected
+                ? 'border-cyan-500 ring-2 ring-offset-2 ring-cyan-500'
+                : 'border-gray-300'
+        "
+        class="flex flex-col items-center transition-all cursor-pointer w-full gap-4 p-4 border rounded-xl bg-gray-50"
+    >
+        <span
+            class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
+        >
+            آدرس
+        </span>
+
+        <div
+            class="flex flex-col items-center justify-between w-full gap-4 lg:flex-row"
+        >
+            <span
+                class="w-full text-start text-sm lg:text-[1rem] lg:w-9/12 text-gray-700"
+            >
+                {{
+                    !!address
+                        ? `ایران, ${address.province}, ${address.city}, ${address.full_address}, کدپستی ${address.postal_code}`
+                        : "افزودن آدرس جدید"
+                }}
+            </span>
+
+            <div class="flex items-center justify-end w-full lg:w-3/12">
+                <AddressModal
+                    @add="(data) => $emit('add', data)"
+                    :address="address"
+                />
+            </div>
+        </div>
+    </button>
 </template>
 
 <style scoped></style>