diff --git a/public/css/offers.css b/public/css/offers.css
index f498978..5d4f833 100644
--- a/public/css/offers.css
+++ b/public/css/offers.css
@@ -267,13 +267,13 @@
   display: flex;
 }
 
-#premium-value {
+.premium-value {
   border: 1px solid gray;
   width: 50%;
   align-content: center;
 }
 
-#premium-buttons-container {
+.premium-buttons-container {
   width: 50%;
 }
 
@@ -289,11 +289,11 @@
   background: #fff8ce;
 }
 
-#button-increase-premium {
+.button-increase-premium {
   border-top-right-radius: 10px;
 }
 
-#button-decrease-premium {
+.button-decrease-premium {
   border-bottom-right-radius: 10px;
 }
 
diff --git a/src/front/components/PremiumSelector.js b/src/front/components/PremiumSelector.js
index a1b1f4e..68f994d 100644
--- a/src/front/components/PremiumSelector.js
+++ b/src/front/components/PremiumSelector.js
@@ -14,7 +14,7 @@ class PremiumSelector {
     premiumSelectorArea.classList = 'premium-selector-area';
 
     const premiumValue = document.createElement('div');
-    premiumValue.id = 'premium-value';
+    premiumValue.className = 'premium-value';
     premiumValue.textContent = '0%';
     this.premiumValue = premiumValue;
 
@@ -23,12 +23,12 @@ class PremiumSelector {
 
     const increaseButton = document.createElement('button');
     increaseButton.classList.add('premium-button');
-    increaseButton.id = 'button-increase-premium';
+    increaseButton.classList.add('button-increase-premium');
     increaseButton.textContent = '+';
 
     const decreaseButton = document.createElement('button');
     decreaseButton.classList.add('premium-button');
-    decreaseButton.id = 'button-decrease-premium';
+    decreaseButton.classList.add('button-decrease-premium');
     decreaseButton.textContent = '-';
 
     premiumButtonsContainer.appendChild(increaseButton);