diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css
index 3cb6951935143..a72300892439f 100644
--- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css
+++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css
@@ -100,15 +100,16 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-eye-dash {
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params {
     display: none;
     width: 70%;
-    margin: 10px;
+    margin: 10px 0;
     border: 1px solid #ddd;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     border-collapse: collapse;
 }
 
-div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td,
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain td {
     border: 1px solid #ddd;
-    text-align: center;
+    padding: 3px;
 }
 
 div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar-widgets-name {
@@ -116,10 +117,11 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar
     font-weight: bold;
 }
 
-div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack {
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack,
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain{
     display: none;
     width: 100%;
-    margin: 10px;
+    margin: 10px 0;
     border: 1px solid #ddd;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     border-collapse: collapse;
@@ -133,8 +135,11 @@ div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack tbody tr:
     background-color: #eee;
 }
 
-div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack th {
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-callstack th,
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-explain th,
+div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params th{
     font-weight: bold;
+    padding: 3px;
 }
 
 div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item {
diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js
index 16fbbd8be3593..38b3b41741eee 100644
--- a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js
+++ b/build/media_source/plg_system_debug/widgets/sqlqueries/widget.es5.js
@@ -107,21 +107,47 @@
                         li.addClass(csscls('error'))
                         li.append($('<span />').addClass(csscls('error')).text('[' + stmt.error_code + '] ' + stmt.error_message))
                     }
-                    if (stmt.params && !$.isEmptyObject(stmt.params)) {
-                        var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li)
+
+                    var tableParams;
+
+                    function showTableParams() {
+                        if (tableParams) {
+                            tableParams.show();
+                            return;
+                        }
+
+                        // Render table
+                        tableParams = $('<table>').addClass(csscls('params')).appendTo(li);
+                        tableParams.append('<tr><th colspan="3">Query Parameters</th></tr>');
+                        tableParams.append('<tr><td>ID</td><td>Value</td><td>Data Type</td></tr>');
+
+                        var pRow;
                         for (var key in stmt.params) {
-                            if (typeof stmt.params[key] !== 'function') {
-                                table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') +
-                                    '">' + stmt.params[key] + '</td></tr>')
-                            }
+                            pRow = stmt.params[key];
+                            tableParams.append('<tr><td>' + key + '</td><td>' + pRow.value + '</td><td>'
+                              + pRow.dataType + '</td></tr>');
                         }
-                        li.css('cursor', 'pointer').click(function () {
-                            if (table.is(':visible')) {
-                                table.hide()
-                            } else {
-                                table.show()
-                            }
-                        })
+
+                        tableParams.show();
+                    }
+
+                    if (stmt.params && !$.isEmptyObject(stmt.params)) {
+                        var btnParams = $('<span title="Params" />')
+                          .text('Params')
+                          .addClass(csscls('eye'))
+                          .css('cursor', 'pointer')
+                          .on('click', function () {
+                              if (tableParams && tableParams.is(':visible')) {
+                                  tableParams.hide()
+                                  btnParams.addClass(csscls('eye'))
+                                  btnParams.removeClass(csscls('eye-dash'))
+                              } else {
+                                  showTableParams();
+                                  btnParams.addClass(csscls('eye-dash'))
+                                  btnParams.removeClass(csscls('eye'))
+                              }
+                          })
+                          .appendTo(li)
                     }
 
                     var tableExplain;
@@ -133,7 +159,7 @@
                         }
 
                         // Render table
-                        tableExplain = $('<table>').addClass(csscls('callstack')).appendTo(li);
+                        tableExplain = $('<table>').addClass(csscls('explain')).appendTo(li);
                         tableExplain.append('<tr><th>' + stmt.explain_col.join('</th><th>') + '</th></tr>');
 
                         var i, entry, cols;
@@ -170,7 +196,33 @@
                           .appendTo(li)
                     }
 
-                    var tableStack
+                    var tableStack;
+
+                    function showTableStack() {
+                        if (tableStack) {
+                            tableStack.show();
+                            return;
+                        }
+
+                        // Render table
+                        tableStack = $('<table><tr><th colspan="3">Call Stack</th></tr></table>')
+                          .addClass(csscls('callstack')).appendTo(li);
+
+                        var i, entry, location, caller, cssClass;
+                        for (i in stmt.callstack) {
+                            entry = stmt.callstack[i]
+                            location = entry[3] ? entry[3].replace(self.root_path, '') + ':' + entry[4] : ''
+                            caller = entry[2].replace(self.root_path, '')
+                            cssClass = entry[1] ? 'caller' : ''
+
+                            if (location && self.xdebug_link) {
+                                location = '<a href="' + self.xdebug_link.replace('%f', entry[3]).replace('%l', entry[4]) + '">' + location + '</a>'
+                            }
+                            tableStack.append('<tr class="' + cssClass + '"><th>' + entry[0] + '</th><td>' + caller + '</td><td>' + location + '</td></tr>')
+                        }
+
+                        tableStack.show();
+                    }
 
                     if (stmt.callstack && !$.isEmptyObject(stmt.callstack)) {
                         var btnStack = $('<span title="Call Stack" />')
@@ -178,19 +230,17 @@
                             .addClass(csscls('eye'))
                             .css('cursor', 'pointer')
                             .on('click', function () {
-                                if (tableStack.is(':visible')) {
+                                if (tableStack && tableStack.is(':visible')) {
                                     tableStack.hide()
                                     btnStack.addClass(csscls('eye'))
                                     btnStack.removeClass(csscls('eye-dash'))
                                 } else {
-                                    tableStack.show()
+                                    showTableStack();
                                     btnStack.addClass(csscls('eye-dash'))
                                     btnStack.removeClass(csscls('eye'))
                                 }
                             })
                             .appendTo(li)
-
-                        tableStack = $('<table><thead><tr><th colspan="3">Call Stack</th></tr></thead></table>').addClass(csscls('callstack'))
                     }
 
                     if (typeof(stmt.caller) != 'undefined' && stmt.caller) {
@@ -220,20 +270,6 @@
                         })
                         .appendTo(li)
 
-                    if (tableStack) {
-                        tableStack.appendTo(li)
-                        for (var i in stmt.callstack) {
-                            var entry = stmt.callstack[i]
-                            var location = entry[3] ? entry[3].replace(self.root_path, '') + ':' + entry[4] : ''
-                            var caller = entry[2].replace(self.root_path, '')
-                            var cssClass = entry[1] ? 'caller' : ''
-                            if (location && self.xdebug_link) {
-                                location = '<a href="' + self.xdebug_link.replace('%f', entry[3]).replace('%l', entry[4]) + '">' + location + '</a>'
-                            }
-                            tableStack.append('<tr class="' + cssClass + '"><th>' + entry[0] + '</th><td>' + caller + '</td><td>' + location + '</td></tr>')
-                        }
-                    }
-
                     li.attr('dupeindex', 'dupe-0')
                 }
             })
diff --git a/plugins/system/debug/src/DataCollector/QueryCollector.php b/plugins/system/debug/src/DataCollector/QueryCollector.php
index 445ebb0ec5724..0717584f1c293 100644
--- a/plugins/system/debug/src/DataCollector/QueryCollector.php
+++ b/plugins/system/debug/src/DataCollector/QueryCollector.php
@@ -176,6 +176,7 @@ private function getStatements(): array
 	{
 		$statements    = [];
 		$logs          = $this->queryMonitor->getLogs();
+		$boundParams   = $this->queryMonitor->getBoundParams();
 		$timings       = $this->queryMonitor->getTimings();
 		$memoryLogs    = $this->queryMonitor->getMemoryLogs();
 		$stacks        = $this->queryMonitor->getCallStacks();
@@ -244,6 +245,7 @@ private function getStatements(): array
 
 			$statements[] = [
 				'sql'          => $item,
+				'params'       => $boundParams[$id] ?? [],
 				'duration_str' => $this->getDataFormatter()->formatDuration($queryTime),
 				'memory_str'   => $this->getDataFormatter()->formatBytes($queryMemory),
 				'caller'       => $callerLocation,