diff --git a/src/App.vue b/src/App.vue
index cbc2a5b..5035507 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -157,23 +157,18 @@ function update() {
   position: fixed;
   bottom: 90px;
   right: 20px;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  //border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  //box-shadow: 0 4px 10px rgba(0,0,0,0.3);
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   z-index: 9999;
 }
 
-#support-button:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
-}
-
 @media screen and (min-width: 426px) {
   .desktopConfig {
     width: 426px;
diff --git a/src/api/wallet.ts b/src/api/wallet.ts
index ab1bbef..302117d 100644
--- a/src/api/wallet.ts
+++ b/src/api/wallet.ts
@@ -1,6 +1,7 @@
 import useAxios from '@/utils/useAxios'
 import type { Card, Wallet } from '@/models/wallet'
 import type {Transaction} from '@/models/transaction'
+import type {Address} from "@/models/address";
 
 export const getWallet = async () => await useAxios.get<Wallet>(`/customer/wallet/me`)
 
@@ -16,6 +17,10 @@ export const createCard = async (obj: Card): Promise<any> => {
   return await useAxios.post<Transaction>(`/customer/account`, obj)
 }
 
+export async function deleteCard(id: number) {
+  return await useAxios.delete(`customer/account/${id}`)
+}
+
 export const getActivatedCards = async () => await useAxios.get<Card[]>(`/customer/account/active`)
 
 export const confirmCode = async (params: WithdrawConfirm): Promise<any> => {
diff --git a/src/assets/img/support-icon.png b/src/assets/img/support-icon.png
index fbc2055..3a16768 100644
Binary files a/src/assets/img/support-icon.png and b/src/assets/img/support-icon.png differ
diff --git a/src/views/base/index.vue b/src/views/base/index.vue
index c43e14c..a024dc7 100644
--- a/src/views/base/index.vue
+++ b/src/views/base/index.vue
@@ -98,8 +98,6 @@
 <!--           <div class="flex justify-center">خرید </div>
            <div class="flex justify-center">محصول </div>-->
          </div>
-
-
         </div>
 <!--        <div :class="setNavColor('buyProduct')" class="tab" @click="setRoute('buyProduct')">
           <Icon icon="vuesax-linear:coin" />
@@ -207,8 +205,8 @@ function setRoute(val: string) {
     }
 
     .main_in {
-      height: 70px;
       width: 70px;
+      aspect-ratio: 1 / 1;
 
       .circle_in {
         margin-top: -10px;
@@ -223,21 +221,26 @@ function setRoute(val: string) {
         flex-wrap: wrap;
         background-color: @App-primary-color;
 
-
-
         .circle_into {
           overflow:hidden;
         @apply bg-primary;
           border-radius: 100%;
-          width: 90%;
+          width: 56px;
+          height: 56px;
+          aspect-ratio: 1 / 1;
           display: flex;
           justify-content: center;
           align-content: center;
           flex-wrap: wrap;
-          height: 90%;
           border: white 1px solid;
-
         }
+
+        .circle_into img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
       }
     }
   }
diff --git a/src/views/base/wallet/components/UISlider/CardItem.vue b/src/views/base/wallet/components/UISlider/CardItem.vue
index 008cd2d..3a83f18 100644
--- a/src/views/base/wallet/components/UISlider/CardItem.vue
+++ b/src/views/base/wallet/components/UISlider/CardItem.vue
@@ -8,11 +8,17 @@
       <div class="flex justify-between w-full">
         <div class="text-white font-bold text-lg w-full">{{ props.title }}</div>
         <div
-          class="text-white px-2 flex justify-center items-center rounded-lg w-5rem"
+          class="text-white px-1 flex justify-center items-center rounded-lg w-6rem"
           :class="active ? 'bg-green-600' : 'bg-red-600'"
         >
           {{ active ? 'فعال' : 'غیر فعال' }}
         </div>
+        <div
+            @click="deleteCards"
+          class="text-white px-1 flex mr-1 justify-center items-center rounded-lg bg-red-600 w-7rem"
+        >
+          حذف کارت
+        </div>
       </div>
       <div
         v-if="props.cardNumber"
@@ -31,6 +37,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useCardNumber, useShabaNumber } from '@/utils/useCardNumber'
+import {deleteCard} from "@/api/wallet";
 
 interface Prop {
   sliderIndex: number
@@ -40,6 +47,7 @@ interface Prop {
   shaba?: string
   color?: string
   active?: boolean
+  id?: number
 }
 
 const localValue = computed({
@@ -53,7 +61,7 @@ const localValue = computed({
 })
 
 const props = defineProps<Prop>()
-const emits = defineEmits(['update:sliderIndex'])
+const emits = defineEmits(['update:sliderIndex', 'cardDeleted'])
 
 function findPositionStyle(pos: number) {
   // console.log(localValue.value)
@@ -82,6 +90,15 @@ function findPositionStyle(pos: number) {
   return debug
 }
 
+async function deleteCards() {
+  try {
+    await deleteCard(props?.id)
+    emits('cardDeleted')
+  } catch (e) {
+    console.error('Error deleting card:', e)
+  }
+}
+
 /*
 function findPositionStyle(pos: number) {
   // console.log(localValue.value)
@@ -142,6 +159,8 @@ function topDetail(isAfterIndex: boolean, pos: number) {
 function checkTopLimit(val: number) {
   return val > 100 || val < 0
 }
+
+
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/views/base/wallet/components/UISlider/index.vue b/src/views/base/wallet/components/UISlider/index.vue
index 3673514..d26c57f 100644
--- a/src/views/base/wallet/components/UISlider/index.vue
+++ b/src/views/base/wallet/components/UISlider/index.vue
@@ -4,7 +4,8 @@
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
-                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2"/>
+                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
+                @cardDeleted="handleCardDeleted"/>
       <div class="absolute bottom-15vh right-0 left-0 z-100 flex justify-center items-center opacity-70">
         <div class="flex gap-1 bg-gray-500 px-2 py-1 rounded-lg">
           <Transition name="slide-up" mode="out-in" v-for="i in items.length" :key="i">
@@ -35,7 +36,11 @@ interface Prop {
 }
 
 const props = defineProps<Prop>()
-const emits = defineEmits(['update:id'])
+const emits = defineEmits(['update:id', 'cardDeleted'])
+
+function handleCardDeleted() {
+  emits('cardDeleted')
+}
 
 const localValue = computed({
   get() {
diff --git a/src/views/base/wallet/components/mySlider/MySlider.vue b/src/views/base/wallet/components/mySlider/MySlider.vue
index 750f383..cddcdef 100644
--- a/src/views/base/wallet/components/mySlider/MySlider.vue
+++ b/src/views/base/wallet/components/mySlider/MySlider.vue
@@ -19,16 +19,15 @@
             <div class="card bg-pink" :style="findPositionStyle(9)" @click="index = 9"></div>-->
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index"
                 :color="colors[i%3]"
-                :self-index="i"  :img="item"/>
+                :self-index="i"
+                :img="item"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-// import {usePointerSwipe} from '@vueuse/core'
-// import type {UseSwipeDirection} from '@vueuse/core'
-// import type { UseSwipeDirection } from '@vueuse/core'
 import { useSwipe } from '@vueuse/core'
 import CardItem from '@/views/base/wallet/components/CardItem.vue'
 import type { Card } from '@/models/wallet'
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index 9c276d8..250e088 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -121,6 +121,7 @@
               v-model:id="form.card_id"
               class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
               style="touch-action: none"
+              @cardDeleted="getCards"
           />
           <div
               v-else-if="!loading && cardItems.length === 0"