diff --git a/storefront/app/components/cards/address.vue b/storefront/app/components/cards/address.vue
index 1386711d..04aa80c8 100644
--- a/storefront/app/components/cards/address.vue
+++ b/storefront/app/components/cards/address.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="card">
-    <p class="card__title">{{ name }}</p>
+    <div class="card__top">
+      <h6 class="card__title">{{ name }}</h6>
+      <icon
+          class="card__delete"
+          name="material-symbols:delete-outline"
+          size="20"
+          @click="deleteAddress(address.uuid)"
+      />
+    </div>
     <div class="card__list">
       <ui-input
           v-model="address.country"
@@ -55,6 +63,7 @@
 
 <script setup lang="ts">
 import type {IAddress} from "@types";
+import {useAddressDelete} from "@composables/adresses";
 
 const props = defineProps<{
   address: IAddress;
@@ -62,6 +71,8 @@ const props = defineProps<{
 
 const {t} = useI18n();
 
+const { deleteAddress, deleteLoading } = useAddressDelete();
+
 const isHouse = computed<boolean>(() => {
   return props.address.addressLine.split(' ').find(el => el.includes('is_house'))?.split('=')[1] === 'true';
 });
@@ -93,12 +104,26 @@ const entrance = computed<string | undefined>(() => {
   flex-direction: column;
   gap: 25px;
 
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &__title {
     font-weight: 600;
     font-size: 20px;
     font-family: "Playfair Display", sans-serif;
   }
 
+  &__delete {
+    cursor: pointer;
+
+    @include hover {
+      color: $error;
+    }
+  }
+
   &__list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
diff --git a/storefront/app/pages/profile/addresses.vue b/storefront/app/pages/profile/addresses.vue
index be5782f1..3d919b2b 100644
--- a/storefront/app/pages/profile/addresses.vue
+++ b/storefront/app/pages/profile/addresses.vue
@@ -24,7 +24,6 @@
 
 <script setup lang="ts">
 import {usePageTitle} from "@composables/utils";
-import {useAddressDelete} from "@composables/adresses";
 
 const {t} = useI18n();
 const addressesStore = useAddressesStore();
@@ -32,7 +31,6 @@ const addressesStore = useAddressesStore();
 const addresses = computed(() => addressesStore.addresses);
 
 const { setPageTitle } = usePageTitle();
-const { deleteAddress, deleteLoading } = useAddressDelete();
 
 setPageTitle(t('breadcrumbs.addresses'));
 </script>