diff --git a/config/mykad-reader.php b/config/mykad-reader.php
new file mode 100644
index 0000000..66eba30
--- /dev/null
+++ b/config/mykad-reader.php
@@ -0,0 +1,8 @@
+<?php
+
+$default_port = '8085';
+$getScannerEndpoint = fn($x) => 'http://localhost:' . $x . '/?MYKADJSON';
+
+return[
+    'endpoint' => env('MYKAD_SCANNER_endpoint', $getScannerEndpoint(env('MYKAD_SCANNER_PORT', $default_port))),
+];
\ No newline at end of file
diff --git a/public/js/mykad-reader.js b/public/js/mykad-reader.js
new file mode 100644
index 0000000..89548d0
--- /dev/null
+++ b/public/js/mykad-reader.js
@@ -0,0 +1,98 @@
+
+let button_check_mykad = document.getElementById("button_check_mykad");
+
+let getMyKadDetail = () => {
+    return fetch(mykad_reader_endpoint).then((response) => response.json());
+};
+
+let checkIfMyKadExist = (myKadNumber) => {
+    const url = wakil_caricustomer_endpoint + '/?icno=' + myKadNumber;
+
+    return fetch(url).then((response) => response.json());
+};
+
+
+let handleMyKadReader = () => {
+
+    let myKadDetail;
+
+    getMyKadDetail()
+        .then(response => myKadDetail = response[0])
+        .then(() => checkIfMyKadExist(myKadDetail.IdNo))
+        .then(response => response[0])
+        .then(response => {
+            if (response === 'no-data') {
+                populateDaftarPelangganModal(myKadDetail);
+            } else {
+                let input_search_noic = document.getElementById("noic");
+                let form_search_noic = document.querySelector("form[name='frmsearch']");
+                input_search_noic.value = myKadDetail.IdNo; 
+                form_search_noic.submit();
+            }
+        })
+
+
+};
+
+let populateDaftarPelangganModal = (data) => {
+    let modal_form = document.querySelector(".modal-body .row.form-group");
+
+    const religions = [
+        ['01', 'Islam'],
+        ['02', 'Hindu'],
+        ['03', 'Buddha'],
+        ['04', 'Kristian'],
+        ['05', 'Lain-lain'],
+    ];
+
+    const ethnicities = [
+        ['M', 'Melayu'],
+        ['C', 'Cina'],
+        ['I', 'India'],
+        ['L', 'Lain-lain'],
+    ];
+
+    let getCodeFromValue = (needle, haystack) => {
+        let title_cased_text = needle.split(' ')
+            .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase())
+            .join(' ');
+
+        return haystack.filter(x => x[1] == title_cased_text)[0][0];
+    };
+
+    let getFormattedDateOfBirth = (date_of_birth) => {
+        const [year, month, day] = date_of_birth.split('-');
+        return day + '/' + month + '/' + year;
+    };
+
+    let getAgeFromDateOfBirth = (date_of_birth) => {
+
+        const [birth_year, birth_month, birth_day] = date_of_birth.split('-');
+        const count_leap_year = countLeapYears(birth_year, birth_month, birth_day) - 1;
+
+        const start = new Date(date_of_birth),
+            end = new Date(),
+            diff = new Date(end - start),
+            days = ((diff / 1000 / 60 / 60 / 24) - count_leap_year) / 365;
+
+        return parseInt(days);
+    };
+
+    modal_form.querySelector("input[name='name']").value = data.Name;
+    modal_form.querySelector("input[name='noic']").value = data.IdNo;
+    modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.DateOfBirth);
+    modal_form.querySelector("input[name='negeri_lahir']").value = data.State;
+    modal_form.querySelector("input[name='jantina']").value = data.Gender == 'L' ? 'Lelaki' : 'Perempuan';
+    modal_form.querySelector("select[name='agama']").value = getCodeFromValue(data.Religion, religions);
+    modal_form.querySelector("textarea[name='alamat']").value = [data.Address1, data.Address2, data.Address3].join(", ");
+    modal_form.querySelector("input[name='poskod']").value = data.Postcode;
+    modal_form.querySelector("input[name='daerah']").value = data.Town;
+    modal_form.querySelector("input[name='negeri']").value = data.State;
+    modal_form.querySelector("input[name='age']").value = getAgeFromDateOfBirth(data.DateOfBirth);
+    modal_form.querySelector("select[name='bangsa']").value = getCodeFromValue(data.Ethnicity, ethnicities);
+
+    calculatePassportAge();
+    $('#daftar_pelanggan').modal('show');
+};
+
+button_check_mykad.addEventListener("click", handleMyKadReader);
diff --git a/resources/views/customers/index.blade.php b/resources/views/customers/index.blade.php
index c6a3d0c..30830f5 100644
--- a/resources/views/customers/index.blade.php
+++ b/resources/views/customers/index.blade.php
@@ -894,4 +894,11 @@
         }
     }
 </script>
+<script>
+    // mycard-scanner endpoint initialization
+    let mykad_reader_endpoint = "{{ config('mykad-reader.endpoint') }}";
+    let wakil_caricustomer_endpoint = "{{ route('wakil.caricustomer') }}"; 
+
+</script>
+<script src="{{ asset('js/mycard-reader.js') }}"></script>
 @endsection