diff --git a/jey_erp/hooks.py b/jey_erp/hooks.py
index 25edca2..91a0ace 100644
--- a/jey_erp/hooks.py
+++ b/jey_erp/hooks.py
@@ -17,11 +17,16 @@ app_include_js = [
     "/assets/jey_erp/js/asset.js",
 ]
 
+app_include_css = [
+    "/assets/jey_erp/css/bank_reconciliation_tool.css",
+]
+
 doctype_js = {
     "Payment Entry": "/public/js/payment_entry_mod.js",
     "Account": "/public/js/account_tree_custom.js",
     "Sales Invoice": "public/js/sales_invoice.js",
-    "Employee": "public/js/employee.js"
+    "Employee": "public/js/employee.js",
+    "Bank Reconciliation Tool": "public/js/bank_reconciliation_tool.js",
 }
 
 override_doctype_class = {
diff --git a/jey_erp/public/css/bank_reconciliation_tool.css b/jey_erp/public/css/bank_reconciliation_tool.css
new file mode 100644
index 0000000..2084aa6
--- /dev/null
+++ b/jey_erp/public/css/bank_reconciliation_tool.css
@@ -0,0 +1,11 @@
+/* Override --page-max-width CSS variable for Bank Reconciliation Tool page.
+   All elements using var(--page-max-width) inherit "none" instead of 900px. */
+.page-container[data-page-route="Form/Bank Reconciliation Tool"] {
+    --page-max-width: none;
+}
+
+/* Allow text selection in datatable cells */
+.dt-cell {
+    user-select: text !important;
+    -webkit-user-select: text !important;
+}
diff --git a/jey_erp/public/js/bank_reconciliation_tool.js b/jey_erp/public/js/bank_reconciliation_tool.js
new file mode 100644
index 0000000..419b92c
--- /dev/null
+++ b/jey_erp/public/js/bank_reconciliation_tool.js
@@ -0,0 +1,40 @@
+frappe.ui.form.on("Bank Reconciliation Tool", {
+    refresh: function(frm) {
+        // JS fallback: override --page-max-width in case CSS selector doesn't match.
+        // This runs synchronously, before the DataTable is initialized (DataTable init
+        // is async, inside frappe.call callback triggered by "Get Unreconciled Entries").
+        frm.$wrapper.closest('.page-container').css('--page-max-width', 'none');
+
+        // Patch DataTableManager prototype after bundle is loaded.
+        frappe.require("bank-reconciliation-tool.bundle.js", function() {
+            const DTM = erpnext.accounts.bank_reconciliation.DataTableManager;
+            if (!DTM || DTM.prototype._jey_erp_patched) return;
+
+            const proto = DTM.prototype;
+
+            // Add "Bank Transaction" column before "Actions"
+            const orig_get_dt_columns = proto.get_dt_columns;
+            proto.get_dt_columns = function() {
+                orig_get_dt_columns.call(this);
+                this.columns.splice(this.columns.length - 1, 0, {
+                    name: __("Bank Transaction"),
+                    editable: false,
+                    width: 180,
+                    format: (value) => value
+                        ? `<a href="/app/bank-transaction/${encodeURIComponent(value)}" target="_blank">${value}</a>`
+                        : ""
+                });
+            };
+
+            // Insert bank transaction name (row["name"]) before the Actions button
+            const orig_format_row = proto.format_row;
+            proto.format_row = function(row) {
+                const result = orig_format_row.call(this, row);
+                result.splice(result.length - 1, 0, row["name"]);
+                return result;
+            };
+
+            proto._jey_erp_patched = true;
+        });
+    }
+});