diff --git a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
index 83a4c97..054d825 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css
@@ -125,6 +125,12 @@ input:focus {
     border: none;
 }
 
+.btn-click {
+    border-radius: 10px !important;
+    background: #EF4444 !important;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
+}
+
 /* Withdraw */
 
 .payments-modal__withdraw {
diff --git a/luckydiamond/src/components/PaymentsModal.vue b/luckydiamond/src/components/PaymentsModal.vue
index b00d324..26847cb 100644
--- a/luckydiamond/src/components/PaymentsModal.vue
+++ b/luckydiamond/src/components/PaymentsModal.vue
@@ -12,7 +12,7 @@
         <div class="deposit-btns">
           <ul class="display-btns btns-style-diamonds">
             <li v-for="number in PaymentsModalNumbers" :key="number">
-              <button>{{ number.diamonds }}</button>
+              <button @click="clickedBtnChoice(number, number.diamonds)" :class="{ 'btn-click': clickedBtn === number, [number]: clickedBtn === number }">{{ number.diamonds }}</button>
             </li>
           </ul>
         </div>
@@ -54,6 +54,7 @@ export default {
     return {
       amount: 1,
       card: 0,
+      clickedBtn: '',
       PaymentsModalNumbers
     }
   },
@@ -73,6 +74,10 @@ export default {
         console.log('Произошла ошибка при взаимодействие')
         return
       }
+    },
+    clickedBtnChoice(index, content) {
+      this.clickedBtn = index
+      this.amount = content
     }
   }
 }