diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index 2e7ab6513c67..762140c6955f 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -83,10 +83,11 @@ class InvoiceController extends Controller
      * 
      * @return View
      */
-    public function payment()
+    public function bulk()
     {
+Log::error(request()->input('hashed_ids'));
 
-        $transformed_ids = $this->transformKeys(request()->input('hashed_ids'));
+        $transformed_ids = $this->transformKeys(explode(",",request()->input('hashed_ids')));
 
         $invoices = Invoice::whereIn('id', $transformed_ids)
                             ->whereClientId(auth()->user()->client->id)
@@ -95,11 +96,12 @@ class InvoiceController extends Controller
                                 return $invoice->isPayable();
                             });
 
+Log::error($invoices);
 
         $data = [
             'invoices' => $invoices,
         ];
-        
+
         return view('portal.default.invoices.payment', $data);
                 
     }
diff --git a/resources/views/portal/default/invoices/index.blade.php b/resources/views/portal/default/invoices/index.blade.php
index 12f3b8d437e0..89077955c493 100644
--- a/resources/views/portal/default/invoices/index.blade.php
+++ b/resources/views/portal/default/invoices/index.blade.php
@@ -8,7 +8,19 @@
     <main class="main">
         <div class="container-fluid">
 
-			<div class="row" style="padding-top: 30px;">
+    {!! Former::framework('TwitterBootstrap4'); !!}
+
+    {!! Former::horizontal_open()
+        ->id('payment_form')
+        ->route('client.invoices.bulk')
+        ->method('POST');    !!}
+
+    {!! Former::hidden('hashed_ids')->id('hashed_ids') !!}
+    {!! Former::hidden('action')->id('action') !!}
+    
+    {!! Former::close() !!}
+	
+    		<div class="row" style="padding-top: 30px;">
 			
 				<div class="col-lg-12" style="padding-bottom: 10px;">
 					
@@ -155,21 +167,11 @@ $(document).ready(function() {
         $('#pay_invoices_drop').addClass('disabled');
         $('#download_invoices').addClass('disabled');
         
-        $.ajax({
-            url: "{{ route('client.invoices.payment')}}",
-            type: "post",
-            data: {
-                _token: '{{ csrf_token() }}', 
-                hashed_ids: selected
-            },
-            success: function (response) {
 
-               // You will get response from your PHP page (what you echo or print)
-            },
-            error: function(jqXHR, textStatus, errorThrown) {
-               console.log(textStatus, errorThrown);
-            }
-        });
+        $('#hashed_ids').val(selected);
+        $('#action').val('pay');
+
+        $('#payment_form').submit();
     }); 
 
     $('#download_invoices').click(function() {
diff --git a/resources/views/portal/default/invoices/payment.blade.php b/resources/views/portal/default/invoices/payment.blade.php
index 8c0b216a4976..d961b16057ab 100644
--- a/resources/views/portal/default/invoices/payment.blade.php
+++ b/resources/views/portal/default/invoices/payment.blade.php
@@ -6,8 +6,54 @@
 <main class="main">
     <div class="container-fluid">
 		<div class="row" style="padding-top: 30px;">
-		
+            <div class="col d-flex justify-content-center">
+                <div class="card">
+                    <div class="card-header">
+                        {{ ctrans('texts.payment')}}
+                    </div>
+                    <div class="card-body">
+                        <div class="list-group">
+                            @foreach($invoices as $invoice)
+                                <a class="list-group-item list-group-item-action flex-column align-items-start" href="javascript:void(0);">
+                                    <div class="d-flex w-100 justify-content-between">
+                                    <h5 class="mb-1"># {{ $invoice->invoice_number }}</h5>
+                                    <small>{{$invoice->due_date}}</small>
+                                    </div>
+                                <p class="mb-1 pull-right">${{ $invoice->balance }}</p>
+                                <small>
+                                    @if($invoice->po_number)
+                                    {{ $invoice->po_number }}
+                                    @elseif($invoice->public_notes)
+                                    {{ $invoice->public_notes }}
+                                    @else
+                                    {{ $invoice->invoice_date}}
+                                    @endif
 
+                                </small>
+                                </a>
+                            @endforeach
+                        </div>
+
+                        <div class="py-md-5">
+                            <ul class="list-group">
+                                <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">{{ ctrans('texts.subtotal')}}
+                                    <span class="badge badge-primary badge-pill">$314.00</span>
+                                </li>
+                                <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">{{ ctrans('texts.tax')}}
+                                    <span class="badge badge-primary badge-pill">$19.00</span>
+                                </li>
+                                <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center">{{ ctrans('texts.fees')}}
+                                    <span class="badge badge-primary badge-pill">$2</span>
+                                <li class="list-group-item d-flex list-group-item-action justify-content-between align-items-center"><strong>{{ ctrans('texts.total')}}</strong>
+                                    <span class="badge badge-primary badge-pill"><strong>$335.00</strong></span>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <button class="btn btn-primary pull-right">{{ ctrans('texts.pay_now') }}</button>
+                    </div>
+                </div>
+            </div>
 		</div>
     </div>
 </main>
diff --git a/routes/client.php b/routes/client.php
index 1f6f60bade22..53b3e072b7ab 100644
--- a/routes/client.php
+++ b/routes/client.php
@@ -16,7 +16,7 @@ Route::group(['middleware' => ['auth:contact'], 'prefix' => 'client', 'as' => 'c
 
 	Route::get('dashboard', 'ClientPortal\DashboardController@index')->name('dashboard'); // name = (dashboard. index / create / show / update / destroy / edit
 	Route::get('invoices', 'ClientPortal\InvoiceController@index')->name('invoices.index'); 
-	Route::post('invoices', 'ClientPortal\InvoiceController@payment')->name('invoices.payment');
+	Route::post('invoices/payment', 'ClientPortal\InvoiceController@bulk')->name('invoices.bulk');
 	Route::get('profile/{client_contact}/edit', 'ClientPortal\ProfileController@edit')->name('profile.edit');
 	Route::put('profile/{client_contact}/edit', 'ClientPortal\ProfileController@update')->name('profile.update');
 	Route::put('profile/{client_contact}/edit_client', 'ClientPortal\ProfileController@updateClient')->name('profile.edit_client');