diff --git a/resources/views/customers/index.blade.php b/resources/views/customers/index.blade.php
index 31f0788..7b7b4d1 100644
--- a/resources/views/customers/index.blade.php
+++ b/resources/views/customers/index.blade.php
@@ -42,33 +42,33 @@
                                     <div class="col-md-6">
                                         <div class="row form-group">
                                             <div class="col-md-4">Nama</div>
-                                            <div class="col-md-8"><input type="text" name="name" id="name" autocomplete="off"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="name" id="name" autocomplete="off"></div>
                                             <div class="col-md-4">No Kad Pengenalan</div>
-                                            <div class="col-md-8"><input type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div>
                                             <div class="col-md-4">Tarikh Lahir</div>
-                                            <div class="col-md-8"><input type="text" name="tarikh_lahir" id="tarikh_lahir" readonly></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="tarikh_lahir" id="tarikh_lahir" readonly></div>
                                             <div class="col-md-4">Negeri Lahir</div>
-                                            <div class="col-md-8"><input type="text" name="negeri_lahir" id="negeri_lahir" readonly></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="negeri_lahir" id="negeri_lahir" readonly></div>
                                             <div class="col-md-4">Jantina</div>
-                                            <div class="col-md-8"><input type="text" name="jantina" id="jantina" readonly></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="jantina" id="jantina" readonly></div>
                                             <div class="col-md-4">Alamat</div>
                                             <div class="col-md-8"><textarea style="resize:none" name="alamat" id="alamat" cols="30" rows="3"></textarea></div>
                                             <div class="col-md-4">Poskod</div>
-                                            <div class="col-md-8"><input type="text" name="poskod" id="poskod" autocomplete="off"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off"></div>
                                             <div class="col-md-4">Daerah</div>
-                                            <div class="col-md-8"><input type="text" name="daerah" id="daerah" autocomplete="off"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" autocomplete="off"></div>
                                             <div class="col-md-4">Negeri</div>
-                                            <div class="col-md-8"><input type="text" name="negeri" id="negeri" autocomplete="off"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" autocomplete="off"></div>
                                             <div class="col-md-4">No Telefon 1</div>
-                                            <div class="col-md-8"><input type="text" name="main_phone" id="main_phone" autocomplete="off"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="main_phone" id="main_phone" autocomplete="off"></div>
                                             <div class="col-md-4">No Telefon 2</div>
-                                            <div class="col-md-8"><input type="text" name="alternate_phone" id="alternate_phone" autocomplete="off"></div>
-                                            <div class="col-md-4">Alamat Surat Menyurat</div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="alternate_phone" id="alternate_phone" autocomplete="off"></div>
+                                            <!-- <div class="col-md-4">Alamat Surat Menyurat</div>
                                             <div class="col-md-8"><textarea style="resize:none" name="alamat_menyurat" id="alamat_menyurat" cols="30" rows="3"></textarea></div>
                                             <div class="col-md-4">Poskod</div>
                                             <div class="col-md-8"><input type="text" name="poskod_menyurat" id="poskod_menyurat" autocomplete="off"></div>
                                             <div class="col-md-4">Negeri</div>
-                                            <div class="col-md-8"><input type="text" name="negeri_menyurat" id="negeri_menyurat" autocomplete="off"></div>
+                                            <div class="col-md-8"><input type="text" name="negeri_menyurat" id="negeri_menyurat" autocomplete="off"></div> -->
                                             <div class="col-md-12 ml-4">
                                                 <div class="form-group row">
                                                     <div class="form-check form-check-inline">
@@ -83,7 +83,7 @@
                                             </div>
                                             <div class="col-md-4">Agama</div>
                                             <div class="col-md-8">
-                                                <select name="agama" id="agama">
+                                                <select class="form-control" name="agama" id="agama">
                                                     <option value="islam">Islam</option>
                                                     <option value="hindu">Hindu</option>
                                                     <option value="buddha">Buddha</option>
@@ -93,7 +93,7 @@
                                             </div>
                                             <div class="col-md-4">Kumpulan PKINK/Ahli Sahabat</div>
                                             <div class="col-md-8">
-                                                <select name="kumpulan_sahabat" id="kumpulan_sahabat">
+                                                <select class="form-control" name="kumpulan_sahabat" id="kumpulan_sahabat">
                                                     <option value="0">Tidak</option>
                                                     <option value="1">Ya</option>
                                                 </select>
@@ -115,13 +115,13 @@
                                                     </div>
                                                 </div> -->
                                             </div>
-                                            <div class="col-md-4">Daerah</div>
-                                            <div class="col-md-8"><input type="text" name="daerah_menyurat" id="daerah_menyurat"></div>
+                                            <!-- <div class="col-md-4">Daerah</div>
+                                            <div class="col-md-8"><input type="text" name="daerah_menyurat" id="daerah_menyurat"></div> -->
                                             <div class="col-md-4">Umur</div>
-                                            <div class="col-md-8"><input type="text" name="age" id="age" readonly></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
                                             <div class="col-md-4">Bangsa</div>
                                             <div class="col-md-8">
-                                                <select name="bangsa" id="bangsa">
+                                                <select class="form-control" name="bangsa" id="bangsa">
                                                     <option value="melayu">Melayu</option>
                                                     <option value="cina">Cina</option>
                                                     <option value="india">India</option>
@@ -129,9 +129,9 @@
                                                 </select>
                                             </div>
                                             <div class="col-md-4">Bank</div>
-                                            <div class="col-md-8"><input type="text" name="bank" id="bank"></div>
+                                            <div class="col-md-8"><select class="select2" name="bank_name" data-placeholder="Pilih Bank" id="bank_name"></select></div>
                                             <div class="col-md-4">No Akaun Bank</div>
-                                            <div class="col-md-8"><input type="text" name="no_akaun" id="no_akaun"></div>
+                                            <div class="col-md-8"><input class="form-control" type="text" name="no_akaun" id="no_akaun"></div>
                                         </div>
                                     </div>
                                 </div>
@@ -149,6 +149,36 @@
     </div>
 </div>
 <script>
+
+    var bank_name = [];
+    
+    $(document).ready(function(){
+        var noic = $('#noic').val();
+        identifyIC(noic);
+        console.log(bank_name);
+        $('#bank_name').select2({
+            ajax:{
+                url:'http://localhost:8000/api/bank',
+                type:'get',
+                dataType:'json',
+                processResult:function(data){
+                    return{
+                        results: $.each(data,function(index,bank){
+                            return{
+                                text: bank.text,
+                                id:bank.id
+                            }
+                        })
+                    }
+                }
+                cache:true
+            }
+        });
+
+    });
+
+    
+
     $(document).on("click", ".browse", function() {
         var file = $(this).parents().find(".file");
         file.trigger("click");
@@ -165,8 +195,9 @@
         // read the image file as a data URL.
         reader.readAsDataURL(this.files[0]);
     });
-    $(document).ready(function(){
-        var noic = $('#noic').val();
+    
+
+    function identifyIC(noic){
         if(noic.match(/^(\d{2})(\d{2})(\d{2})-?\d{2}-?\d{4}$/)) {
             var year = noic.slice(0,2);
             var month = noic.slice(2,4);
@@ -252,6 +283,6 @@
             $('#tarikh_lahir').val(tarikh_lahir);
             $('#negeri_lahir').val(negeri_lahir);
         }
-    });
+    }
 </script>
 @endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5a2afb2..90fe7fc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,14 +25,14 @@
     <link href="{{ asset('vendor/DataTables/datatables.min.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
-
-    <script src="{{ asset('js/jquery.min.js') }}"></script>
     <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
-    <script src="{{ asset('js/select2.min.js') }}"></script>
+    
 
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="{{ asset('js/jquery.min.js') }}"></script>
+    <script src="{{ asset('js/select2.min.js') }}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
     <script src="{{ asset('vendor/DataTables/datatables.min.js') }}"></script>
     
     <script>