diff --git a/app/Livewire/InvoicePay.php b/app/Livewire/InvoicePay.php
index 5bcb8ded0f61..360bba244cdc 100644
--- a/app/Livewire/InvoicePay.php
+++ b/app/Livewire/InvoicePay.php
@@ -23,12 +23,22 @@ use Livewire\Attributes\Reactive;
 use App\Livewire\Flow2\PaymentMethod;
 use App\Livewire\Flow2\ProcessPayment;
 use App\Livewire\Flow2\UnderOverPayment;
+use App\Models\Invoice;
 use App\Utils\Number;
+use App\Utils\Traits\MakesDates;
+use App\Utils\Traits\MakesHash;
 
 class InvoicePay extends Component
 {
+    use MakesDates;
+    use MakesHash;
+
     public $invitation_id;
 
+    public $invoices;
+
+    public $variables;
+
     public $db;
 
     public $settings;
@@ -86,7 +96,7 @@ class InvoicePay extends Component
     #[On('payment-method-selected')]
     public function paymentMethodSelected($company_gateway_id, $gateway_type_id, $amount)
     {       
-        nlog("payment method selected inside InvoicePay");
+        //@TODO only handles single invoice scenario
         
         $this->payment_method_accepted = true;
 
@@ -95,11 +105,11 @@ class InvoicePay extends Component
         $this->context['amount'] = $amount;
         $this->context['pre_payment'] = false;
         $this->context['is_recurring'] = false;
-        $this->context['payable_invoices'] = ['invoice_id' => $this->context['invoice']->hashed_id, 'amount' => $this->context['invoice']->balance];
+
+        // $this->context['payable_invoices'] = ['invoice_id' => $this->context['invoice']->hashed_id, 'amount' => $amount];
+        
         $this->context['invitation_id'] = $this->invitation_id;
         
-        // $this->invite = \App\Models\InvoiceInvitation::withTrashed()->find($this->invitation_id)->withoutRelations();
-        $this->component();
 
     }
 
@@ -136,12 +146,23 @@ class InvoicePay extends Component
         MultiDB::setDb($this->db);
 
         // @phpstan-ignore-next-line
-        $invite = \App\Models\InvoiceInvitation::with('invoice','contact.client','company')->withTrashed()->find($this->invitation_id);
+        $invite = \App\Models\InvoiceInvitation::with('contact.client','company')->withTrashed()->find($this->invitation_id);
         $client = $invite->contact->client;
-        $variables = ($invite && auth()->guard('contact')->user()->client->getSetting('show_accept_invoice_terms')) ? (new HtmlEngine($invite))->generateLabelsAndValues() : false;
         $settings = $client->getMergedSettings();
         $this->context['settings'] = $settings;
 
+        $invoices = Invoice::find($this->transformKeys($this->invoices));
+        $invoices = $invoices->filter(function ($i){
+            
+            $i = $i->service()
+                ->markSent()
+                ->removeUnpaidGatewayFees()
+                ->save();
+
+            return $i->isPayable();
+
+        });
+
         //under-over / payment
 
         //required fields
@@ -151,12 +172,21 @@ class InvoicePay extends Component
         $this->under_over_payment = $settings->client_portal_allow_over_payment || $settings->client_portal_allow_under_payment;
         $this->required_fields = false;
 
-        $this->context['variables'] = $variables;
-        $this->context['invoice'] = $invite->invoice;
+        $this->context['variables'] = $this->variables;
+        $this->context['invoices'] = $invoices;
         $this->context['settings'] = $settings;
-        
-        $this->context['payable_invoices'] = ['invoice_id' => $this->context['invoice']->hashed_id, 'amount' => $invite->invoice->partial > 0 ? $invite->invoice->partial : $invite->invoice->balance];
+        $this->context['invitation'] = $invite;
 
+        $this->context['payable_invoices'] = $invoices->map(function ($i){
+            return [
+                'invoice_id' => $i->hashed_id,
+                'amount' => $i->partial > 0 ? $i->partial : $i->balance,
+                'formatted_amount' => Number::formatValue($i->partial > 0 ? $i->partial : $i->balance, $i->client->currency()),
+                'number' => $i->number,
+                'date' => $i->translateDate($i->date, $i->client->date_format(), $i->client->locale())
+            ];
+        })->toArray();
+        
     }
 
     public function render()
diff --git a/app/Livewire/InvoiceSummary.php b/app/Livewire/InvoiceSummary.php
index 615da33ff51e..e2e9a86c586d 100644
--- a/app/Livewire/InvoiceSummary.php
+++ b/app/Livewire/InvoiceSummary.php
@@ -22,7 +22,8 @@ class InvoiceSummary extends Component
 
     public function mount()
     {
-        $this->invoice = $this->context['invoice'];
+        //@TODO for a single invoice - show all details, for multi-invoices, only show the summaries
+        $this->invoice = $this->context['invitation']->invoice;
     }
 
     public function render()
diff --git a/resources/views/portal/ninja2020/components/livewire/under-over-payments.blade.php b/resources/views/portal/ninja2020/components/livewire/under-over-payments.blade.php
index 45e9019adaa8..a9388675934f 100644
--- a/resources/views/portal/ninja2020/components/livewire/under-over-payments.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/under-over-payments.blade.php
@@ -1,35 +1,40 @@
-<div x-data="{ payableAmount: '{{ $payableAmount }}', errors: @entangle('errors') }" class="px-4 py-5 bg-white sm:gap-4 sm:px-6">
+<div x-data="{ payableInvoices: @entangle('payableInvoices'), errors: @entangle('errors') }" class="px-4 py-5 bg-white sm:gap-4 sm:px-6">
     
     <dt class="text-sm font-medium leading-5 text-gray-500">
         {{ ctrans('texts.payment_amount') }}
     </dt>
     <dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2 flex flex-col">
 
+
+    <template x-for="(invoice, index) in payableInvoices" :key="index">
+            
         <div class="flex items-center">
             <label>
-                <span class="mt-2">{{ $currency->code }} ({{ $currency->symbol }})</span>
+                <span x-text="'{{ ctrans('texts.invoice') }} ' + invoice.number" class="mt-2"></span>
+                <span>{{ $currency->code }} ({{ $currency->symbol }})</span>
                 <input
                     type="text"
                     class="input mt-0 mr-4 relative"
-                    name="payable_amount"
-                    x-model="payableAmount"
-                    value="{{ $payableAmount }}"/>
+                    name="payable_invoices[]"
+                    x-model="payableInvoices[index].formatted_amount"
+                    />
             </label>
         </div>
+    </template>
+        
+    <template x-if="errors.length > 0">
+        <div x-text="errors" class="alert alert-failure mb-4"></div>
+    </template>
 
-        <template x-if="errors.length > 0">
-            <div x-text="errors" class="alert alert-failure mb-4"></div>
-        </template>
-
-        @if($settings->client_portal_allow_under_payment)
-            <span class="mt-1 text-sm text-gray-800">{{ ctrans('texts.minimum_payment') }}: {{ $settings->client_portal_under_payment_minimum }}</span>
-        @endif
+    @if($settings->client_portal_allow_under_payment)
+        <span class="mt-1 text-sm text-gray-800">{{ ctrans('texts.minimum_payment') }}: {{ $settings->client_portal_under_payment_minimum }}</span>
+    @endif
     </dd>
     
     <div class="bg-white px-4 py-5 flex w-full justify-end">
         <button 
             class="button button-primary bg-primary payment-method flex items-center justify-center relative py-4" 
-            wire:click="checkValue(payableAmount)">
+            wire:click="checkValue(payableInvoices)">
             <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/invoices/show_smooth.blade.php b/resources/views/portal/ninja2020/invoices/show_smooth.blade.php
index f7add35dd08f..575eaab058b5 100644
--- a/resources/views/portal/ninja2020/invoices/show_smooth.blade.php
+++ b/resources/views/portal/ninja2020/invoices/show_smooth.blade.php
@@ -26,4 +26,4 @@
 @endsection
 
 @push('head')
-@endpush
+@endpush
\ No newline at end of file