diff --git a/resources/assets/js/views/banking/accounts.js b/resources/assets/js/views/banking/accounts.js
index 13c00a7de..f2b5f97b7 100644
--- a/resources/assets/js/views/banking/accounts.js
+++ b/resources/assets/js/views/banking/accounts.js
@@ -29,6 +29,11 @@ const app = new Vue({
         return {
             form: new Form('account'),
             bulk_action: new BulkAction('accounts'),
+            connect: {
+                show: false,
+                currency: {},
+                documents: [],
+            },
         }
     },
 
@@ -55,5 +60,32 @@ const app = new Vue({
         onBank() {
 
         },
+
+        onConnect(route) {
+            let dial_promise = Promise.resolve(window.axios.get(route));
+
+            dial_promise.then(response => {
+                this.connect.show = true;
+
+                this.connect.transaction = JSON.parse(response.data.transaction);
+
+                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
+            });
+        },
     }
 });
diff --git a/resources/views/banking/accounts/show.blade.php b/resources/views/banking/accounts/show.blade.php
index 6e75ee539..060163ee0 100644
--- a/resources/views/banking/accounts/show.blade.php
+++ b/resources/views/banking/accounts/show.blade.php
@@ -291,11 +291,17 @@
                                                         <x-slot name="first">
                                                             {{ $item->contact->name }}
                                                         </x-slot>
-                                                        <x-slot name="second">
+                                                        <x-slot name="second" class="w-20 font-normal group">
                                                             @if ($item->document)
+                                                            <div data-tooltip-target="tooltip-information-{{ $item->document_id }}" data-tooltip-placement="left" override="class">
                                                                 <a href="{{ route($item->route_name, $item->route_id) }}" class="font-normal truncate border-b border-black border-dashed">
                                                                     {{ $item->document->document_number }}
                                                                 </a>
+
+                                                                <div class="w-28 absolute h-10 -ml-12 -mt-6"></div>
+
+                                                                <x-documents.index.information :document="$item->document" />
+                                                            </div>
                                                             @else
                                                                 <x-empty-data />
                                                             @endif
@@ -444,6 +450,16 @@
                 </x-show.content.right>
             </x-show.content>
         </x-show.container>
+
+        <akaunting-connect-transactions
+            :show="connect.show"
+            :transaction="connect.transaction"
+            :currency="connect.currency"
+            :documents="connect.documents"
+            :translations="{{ json_encode($transactions) }}"
+            modal-dialog-class="max-w-screen-lg"
+            v-on:close-modal="connect.show = false"
+        ></akaunting-connect-transactions>
     </x-slot>
 
     <x-script folder="banking" file="accounts" />