diff --git a/app/Http/Controllers/Banking/Transactions.php b/app/Http/Controllers/Banking/Transactions.php
index 1e8ab4709..6a672aeef 100644
--- a/app/Http/Controllers/Banking/Transactions.php
+++ b/app/Http/Controllers/Banking/Transactions.php
@@ -325,6 +325,45 @@ class Transactions extends Controller
         return $pdf->download($file_name);
     }
 
+    public function dial(Transaction $transaction)
+    {
+        $documents = collect([]);
+
+        if ($transaction->type == Transaction::INCOME_TYPE && $transaction->contact->exists) {
+            $builder = $transaction->contact
+                ->invoices();
+        }
+
+        if ($transaction->type == Transaction::INCOME_TYPE && ! $transaction->contact->exists) {
+            $builder = Document::invoice();
+        }
+
+        if ($transaction->type == Transaction::EXPENSE_TYPE && $transaction->contact->exists) {
+            $builder = $transaction->contact
+                ->bills();
+        }
+
+        if ($transaction->type == Transaction::EXPENSE_TYPE && ! $transaction->contact->exists) {
+            $builder = Document::bill();
+        }
+
+        if (isset($builder)) {
+            $documents = $builder->notPaid()
+                ->where('currency_code', $transaction->currency_code)
+                ->with(['media', 'totals', 'transactions'])
+                ->get()
+                ->toJson();
+        }
+
+        $data = [
+            'transaction' => $transaction->load(['account', 'category'])->toJson(),
+            'currency' => $transaction->currency->toJson(),
+            'documents' => $documents,
+        ];
+
+        return response()->json($data);
+    }
+
     public function connect(Transaction $transaction, TransactionConnect $request)
     {
         $total_items = count($request->data['items']);
diff --git a/app/Models/Banking/Transaction.php b/app/Models/Banking/Transaction.php
index 0514df226..757a851d4 100644
--- a/app/Models/Banking/Transaction.php
+++ b/app/Models/Banking/Transaction.php
@@ -470,22 +470,10 @@ class Transaction extends Model
                     'permission' => 'create-banking-transactions',
                     'attributes' => [
                         'id' => 'index-transactions-more-actions-connect-' . $this->id,
+                        '@click' => 'onConnect(\'' . route('transactions.dial', $this->id) . '\')',
                     ],
                 ];
 
-                $transaction = $this->load('account')->toJson();
-                $currency = $this->currency->toJson();
-
-                if ($this->contact->exists) {
-                    $document = $this->contact->invoices()->notPaid()->where('currency_code', $this->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson();
-
-                    $connect['attributes']['@click'] = 'onConnect()';
-                } else {
-                    $document = \App\Models\Document\Document::invoice()->notPaid()->where('currency_code', $this->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson();
-
-                    $connect['attributes']['@click'] = 'onConnect()';
-                }
-
                 $actions[] = $connect;
 
                 $actions[] = [
diff --git a/resources/assets/js/views/banking/transactions.js b/resources/assets/js/views/banking/transactions.js
index b43d767f4..6556f6745 100644
--- a/resources/assets/js/views/banking/transactions.js
+++ b/resources/assets/js/views/banking/transactions.js
@@ -38,20 +38,31 @@ const app = new Vue({
     },
 
     methods: {
-        onConnect(transaction, currency, documents) {
-            this.connect.show = true;
+        onConnect(route) {
+            let dial_promise = Promise.resolve(window.axios.get(route));
 
-            this.connect.transaction = transaction;
+            dial_promise.then(response => {
+                this.connect.show = true;
 
-            this.connect.currency = {
-                decimal_mark: currency.decimal_mark,
-                precision: currency.precision,
-                symbol: currency.symbol,
-                symbol_first: currency.symbol_first,
-                thousands_separator: currency.thousands_separator,
-            };
+                this.connect.transaction = JSON.parse(response.data.transaction);
 
-            this.connect.documents = documents;
+                let currency = JSON.parse(response.data.currency);
+
+                this.connect.currency = {
+                    decimal_mark: currency.decimal_mark,
+                    precision: currency.precision,
+                    symbol: currency.symbol,
+                    symbol_first: currency.symbol_first,
+                    thousands_separator: currency.thousands_separator,
+                };
+    
+                this.connect.documents = JSON.parse(response.data.documents);
+            })
+            .catch(error => {
+            })
+            .finally(function () {
+                // always executed
+            });
         },
 
         async onEmail(route) {
diff --git a/resources/views/components/transactions/show/more-buttons.blade.php b/resources/views/components/transactions/show/more-buttons.blade.php
index dec12720c..7e7ce706c 100644
--- a/resources/views/components/transactions/show/more-buttons.blade.php
+++ b/resources/views/components/transactions/show/more-buttons.blade.php
@@ -39,15 +39,13 @@
         @if ($transaction->is_splittable && empty($transaction->document_id) && empty($transaction->recurring))
             @if (! $hideButtonConnect)
                 @can($permissionCreate)
-                    @if ($type == 'income' && $transaction->contact->exists)
-                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" title="{{ trans('general.connect') }}" @click="onConnect({{ $transaction->load('account')->toJson() }}, {{ $transaction->currency->toJson() }}, {{ $transaction->contact->invoices()->notPaid()->where('currency_code', $transaction->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson() }})"><span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ trans('general.connect') }}</span></button>
-                    @elseif ($type == 'income' && ! $transaction->contact->exists)
-                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" title="{{ trans('general.connect') }}" @click="onConnect({{ $transaction->load('account')->toJson() }}, {{ $transaction->currency->toJson() }}, {{ App\Models\Document\Document::invoice()->notPaid()->where('currency_code', $transaction->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson() }})"><span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ trans('general.connect') }}</span></button>
-                    @elseif ($type == 'expense' && $transaction->contact->exists)
-                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" title="{{ trans('general.connect') }}" @click="onConnect({{ $transaction->load('account')->toJson() }}, {{ $transaction->currency->toJson() }}, {{ $transaction->contact->bills()->notPaid()->where('currency_code', $transaction->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson() }})"><span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ trans('general.connect') }}</span></button>
-                    @elseif ($type == 'expense' && ! $transaction->contact->exists)
-                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap" title="{{ trans('general.connect') }}" @click="onConnect({{ $transaction->load('account')->toJson() }}, {{ $transaction->currency->toJson() }}, {{ App\Models\Document\Document::bill()->notPaid()->where('currency_code', $transaction->currency_code)->with(['media', 'totals', 'transactions'])->get()->toJson() }})"><span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ trans('general.connect') }}</span></button>
-                    @endif
+                    <button
+                        type="button"
+                        class="w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap"
+                        title="{{ trans('general.connect') }}"
+                        @click="onConnect('{{ route('transactions.dial', $transaction->id) }}')">
+                        <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{{ trans('general.connect') }}</span>
+                    </button>
                 @endcan
             @endif
         @endif
diff --git a/routes/admin.php b/routes/admin.php
index 058d7f11b..0016193af 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -130,6 +130,7 @@ Route::group(['prefix' => 'banking'], function () {
     Route::get('transactions/{transaction}/print', 'Banking\Transactions@printTransaction')->name('transactions.print');
     Route::get('transactions/{transaction}/pdf', 'Banking\Transactions@pdfTransaction')->name('transactions.pdf');
     Route::get('transactions/{transaction}/duplicate', 'Banking\Transactions@duplicate')->name('transactions.duplicate');
+    Route::get('transactions/{transaction}/dial', 'Banking\Transactions@dial')->name('transactions.dial');
     Route::post('transactions/{transaction}/connect', 'Banking\Transactions@connect')->name('transactions.connect');
     Route::post('transactions/import', 'Banking\Transactions@import')->middleware('import')->name('transactions.import');
     Route::get('transactions/export', 'Banking\Transactions@export')->name('transactions.export');