diff --git a/src/components/BasicModal.vue b/src/components/BasicModal.vue
index 6cf8989..76df1c8 100644
--- a/src/components/BasicModal.vue
+++ b/src/components/BasicModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <Transition name="fade-scale" @after-enter="onOpened" @after-leave="onClosed">
-      <div v-if="isOpen" class="basic-modal" @click="onBackdropClick">
+      <div v-if="isOpen" class="basic-modal" :style="{ zIndex }" @click="onBackdropClick">
         <div class="basic-modal__container" :style="containerStyle" @click.stop>
           <div class="basic-modal__card scrollbar-thin">
             <header v-if="hasHeader" class="basic-modal__header">
@@ -43,6 +43,7 @@ const props = defineProps({
   width: { type: String, default: '' },
   maxWidth: { type: String, default: '98%' },
   minWidth: { type: String, default: '85%' },
+  zIndex: { type: [Number, String], default: 50 },
 })
 
 const emit = defineEmits(['open', 'close'])
@@ -101,7 +102,6 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
 .basic-modal {
   position: fixed;
   inset: 0;
-  z-index: 50;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/ConfirmModal.vue b/src/components/ConfirmModal.vue
index bbf9107..6436237 100644
--- a/src/components/ConfirmModal.vue
+++ b/src/components/ConfirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false">
+  <BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false" :z-index="60">
     <template #default="{ data }">
       <div class="confirm-modal">
         <h3 class="confirm-modal__title">{{ data?.title || 'تأیید حذف' }}</h3>