diff --git a/docker-compose.yml b/docker-compose.yml
index be5ae91d4e62c5a9fd62cccf399e998748c447a3..8d4c37874d5283ef74f2d361a0fb83156129746a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,7 @@
 version: '3.3'
 services:
   web:
+    build: .
     image: tubes-1:latest
     ports:
       - 8008:80
diff --git a/src/app/component/checkout/CheckoutPage.php b/src/app/component/checkout/CheckoutPage.php
index 573f6a7fec8b6de4aceee35bf612263de9c4bba9..129eedb2f4efbaedfd85c3c5f2556baec5aa32b9 100644
--- a/src/app/component/checkout/CheckoutPage.php
+++ b/src/app/component/checkout/CheckoutPage.php
@@ -68,21 +68,33 @@
                                         
                                         <!-- Payment Details -->
                                         <div class="payment-detail" id="payment-details">
-                                            <!-- E-WALLET DETAILS -->
-                                            <div class="detail" id="ewallet-detail">
-                                                <div class="title-card">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512">
-                                                        <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-                                                        <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H80c-8.8 0-16-7.2-16-16s7.2-16 16-16H448c17.7 0 32-14.3 32-32s-14.3-32-32-32H64zM416 272a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
-                                                    </svg>
-                                                    <p class="bold-text title">E-Wallet Details</p>
-                                                </div>
-                                                <div class="form-group">
-                                                    <label class="bold-text" for="ewallet">E-Wallet Number</label>
-                                                    <input type="text" name="ewallet" placeholder="E-Wallet number" id="ewallet-number">
-                                                    <p id="ewallet-alert" class="alert-hide"></p>
-                                                </div>
+                                        <!-- E-WALLET DETAILS -->
+                                        <div class="detail" id="ewallet-detail">
+                                            <div class="title-card">
+                                                <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512">
+                                                    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                                                    <path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H80c-8.8 0-16-7.2-16-16s7.2-16 16-16H448c17.7 0 32-14.3 32-32s-14.3-32-32-32H64zM416 272a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+                                                </svg>
+                                                <p class="bold-text title">E-Wallet Details</p>
                                             </div>
+                                            
+                                            <div class="form-group">
+                                                <label class="bold-text" for="ewallet">E-Wallet Number</label>
+
+                                                <?php if (!empty($walletNumbers)) : ?>
+                                                    <select name="ewallet" id="ewallet-number">
+                                                        <?php
+                                                        foreach ($walletNumbers as $walletNumber) {
+                                                            echo "<option value=\"$walletNumber\">$walletNumber</option>";
+                                                        }
+                                                        ?>
+                                                    </select>
+                                                <?php else : ?>
+                                                    <p>You don't have an E-Wallet number</p>
+                                                <?php endif; ?>
+                                                <p id="ewallet-alert" class="alert-hide"></p>
+                                            </div>
+                                        </div>
 
                                             <!-- CARD DETAILS -->
                                             <div class="detail" id="card-detail">
diff --git a/src/public/javascript/checkout/checkout.js b/src/public/javascript/checkout/checkout.js
index 212ce356b7c890a8caa0e7adf28b704cc015c24d..4d91b9a2f8b6a438d6a33a3f1e7048168e5f0ce1 100644
--- a/src/public/javascript/checkout/checkout.js
+++ b/src/public/javascript/checkout/checkout.js
@@ -77,21 +77,20 @@ function openSection(option) {
     paymentMethodValid = true;
 }
 
-ewalletInput && ewalletInput.addEventListener('keyup',
-    debounce(() => {
-        const ewallet = ewalletInput.value;
+ewalletInput && ewalletInput.addEventListener('change', () => {
+    const selectedOption = ewalletInput.value;
+
+    if (!selectedOption || selectedOption === "") {
+        ewalletAlert.innerText = 'Please select an E-Wallet number';
+        ewalletAlert.className = 'alert-show';
+        ewalletValid = false;
+    } else {
+        ewalletAlert.innerText = '';
+        ewalletAlert.className = 'alert-hide';
+        ewalletValid = true;
+    }
+});
 
-        if(!numberRegex.test(ewallet)) {
-            ewalletAlert.innerText = 'Invalid number';
-            ewalletAlert.className = 'alert-show';
-            ewalletValid = false;
-        } else{
-            ewalletAlert.innerText = '';
-            ewalletAlert.className = 'alert-hide';
-            ewalletValid = true;
-        } 
-    }, DEBOUNCE_TIMEOUT)
-);
 
 cardNumberInput && cardNumberInput.addEventListener('keyup',
     debounce(() => {
@@ -235,7 +234,7 @@ mainForm.addEventListener('submit', async (e) => {
         if(method=="ewallet" && !ewalletValid)
         {
             e.preventDefault();
-            ewalletAlert.innerText = 'Number is required';
+            ewalletAlert.innerText = 'Select the E-Wallet number';
             ewalletAlert.className = 'alert-show';
         }else
         {
diff --git a/src/public/styles/checkout/checkout.css b/src/public/styles/checkout/checkout.css
index d1fe257513e8fd6389c3c750e6ab880303fae933..c1dd4fc26d35c930d696854d0e390847f51bd299 100644
--- a/src/public/styles/checkout/checkout.css
+++ b/src/public/styles/checkout/checkout.css
@@ -273,6 +273,8 @@
     display: none;
 }
 
+.
+
 @media screen and (max-width: 1140px) {
     .gridview {
         flex-direction: column;