diff --git a/changelog/unreleased/SOLR-18186-fix-heap-used-percent-adminui.yml b/changelog/unreleased/SOLR-18186-fix-heap-used-percent-adminui.yml
new file mode 100644
index 000000000000..2541d69a6a94
--- /dev/null
+++ b/changelog/unreleased/SOLR-18186-fix-heap-used-percent-adminui.yml
@@ -0,0 +1,7 @@
+title: Fixed Admin UI to use max heap (-Xmx) value instead of committed heap to compute heap used percentage.
+type: fixed # added, changed, fixed, deprecated, removed, dependency_update, security, other
+authors:
+  - name: Ravi Ranjan Jha
+links:
+  - name: SOLR-18186
+    url: https://issues.apache.org/jira/browse/SOLR-18186
diff --git a/solr/webapp/web/js/angular/controllers/cloud.js b/solr/webapp/web/js/angular/controllers/cloud.js
index e88209fda568..f045583ef7f1 100644
--- a/solr/webapp/web/js/angular/controllers/cloud.js
+++ b/solr/webapp/web/js/angular/controllers/cloud.js
@@ -367,12 +367,14 @@ var nodesSubController = function($scope, Collections, System, Metrics, MetricsE
           nodes[node]['memFree'] = bytesToSize(memFree);
           nodes[node]['memUsed'] = bytesToSize(memTotal - memFree);
 
+          var heapMax = s.jvm.memory.raw.max;
           var heapTotal = s.jvm.memory.raw.total;
           var heapFree = s.jvm.memory.raw.free;
-          var heapPercentage = Math.floor((heapTotal - heapFree) / heapTotal * 100);
+          var heapPercentage = Math.floor((heapTotal - heapFree) / heapMax * 100);
           nodes[node]['heapUsed'] = bytesToSize(heapTotal - heapFree);
           nodes[node]['heapUsedPct'] = heapPercentage;
           nodes[node]['heapUsedPctStyle'] = styleForPct(heapPercentage);
+          nodes[node]['heapMax'] = bytesToSize(heapMax);
           nodes[node]['heapTotal'] = bytesToSize(heapTotal);
           nodes[node]['heapFree'] = bytesToSize(heapFree);
 
diff --git a/solr/webapp/web/partials/cloud.html b/solr/webapp/web/partials/cloud.html
index ed72cbbc90eb..480f72c14288 100644
--- a/solr/webapp/web/partials/cloud.html
+++ b/solr/webapp/web/partials/cloud.html
@@ -192,11 +192,11 @@
                 </div>
               </td>
               <td ng-class="{'dead-node': n.dead}">
-                <div class="node-heap" title="total: {{n.heapTotal}} free: {{n.heapFree}} used%: {{n.heapUsedPct}}%" ng-show="!n.dead">
+                <div class="node-heap" title="max: {{n.heapMax}} total: {{n.heapTotal}} free: {{n.heapFree}} used%: {{n.heapUsedPct}}%" ng-show="!n.dead">
                   <span class="{{n.heapUsedPctStyle}}">{{n.heapUsedPct}}%</span>
                 </div>
                 <div class="node-spec" ng-show="showDetails[key] && !n.dead">
-                  Max: {{n.heapTotal}}<br/>
+                  Max: {{n.heapMax}}<br/>
                   Used: {{n.heapUsed}}
                 </div>
               </td>