diff --git a/webui/assets/main.js b/webui/assets/main.js
index cd9846d5e..75c5d0e14 100644
--- a/webui/assets/main.js
+++ b/webui/assets/main.js
@@ -258,13 +258,90 @@ function update_cluster_status() {
   status_node = document.getElementById('status')
   time_node = document.getElementById('status-time')
   xhr.onload = function() {
-    status_formatted = JSON.stringify(JSON.parse(xhr.responseText), null, 4)
-    status_node.innerHTML = status_formatted
+    var status = JSON.parse(xhr.responseText)
+    render_status(status)
     time_node.innerHTML = new Date().today() + " " + new Date().timeNow()
   }
   xhr.send(null)
 }
 
+function render_status(status) {
+  // render node table
+  var nodes_div = document.getElementById("status-nodes")
+  while (nodes_div.firstChild) {
+    nodes_div.removeChild(nodes_div.firstChild);
+  }
+
+  var nodes = status["status"]["Nodes"]
+  table = document.createElement("table")
+  var caption = document.createElement("caption")
+  caption.innerHTML = "(" + nodes.length + ")"
+  table.appendChild(caption)
+
+  var header = document.createElement('tr')
+  markup = `<th>Host</th>
+  <th>State</th>`
+  header.innerHTML = markup
+  table.appendChild(header)
+  for(var n=0; n<nodes.length; n++) {
+    var row = document.createElement("tr")
+    markup = `<td>${nodes[n]["Host"]}</td>
+    <td>${nodes[n]["State"]}</td>`
+    row.innerHTML = markup
+    table.appendChild(row)
+  }
+  nodes_div.appendChild(table)
+
+  // render index tables
+  var indexes_div = document.getElementById("status-indexes")
+  while (indexes_div.firstChild) {
+    indexes_div.removeChild(indexes_div.firstChild);
+  }
+
+  var indexes = nodes[0]["Indexes"] // TODO currently comes from only node 0
+  for(var n=0; n<indexes.length; n++) {
+    table = document.createElement("table")
+    var caption = document.createElement("caption")
+    caption.innerHTML = indexes[n]["Name"] + " (Column Label: " + indexes[n]["Meta"]["ColumnLabel"] + ")"
+    table.appendChild(caption)
+
+    var header = document.createElement('tr')
+    markup = `<th>Name</th>
+    <th>Row Label</th>
+    <th>Cache Type</th>
+    <th>Cache Size</th>`
+    header.innerHTML = markup
+    table.appendChild(header)
+
+    var frames = indexes[n]["Frames"]
+    for(var m=0; m<frames.length; m++) {
+      var row = document.createElement("tr")
+      markup = `<td>${frames[m]["Name"]}</td>
+      <td>${frames[m]["Meta"]["RowLabel"]}</td>
+      <td>${frames[m]["Meta"]["CacheType"]}</td>
+      <td>${frames[m]["Meta"]["CacheSize"]}</td>`
+      row.innerHTML = markup
+      table.appendChild(row)
+    }
+    indexes_div.appendChild(table)
+  }
+
+  // render slice tables
+  // TODO enable when Slices element is present in status response
+  /*
+  var slices_div = document.getElementById("status-slices")
+  data = ""
+  for(var n=0; n<nodes.length; n++) {
+    var indexes = nodes[n]["Indexes"]
+    for(var m=0; m<indexes.length; m++) {
+      data += nodes[n]["Host"] + "/" + indexes[m]["Name"] + ": " + indexes[m]["Slices"] + "<br />"
+    }
+  }
+  slices_div.innerHTML = data
+  */
+
+}
+
 function open_external_docs() {
   window.open("https://www.pilosa.com/docs");
 }
diff --git a/webui/assets/style.css b/webui/assets/style.css
index 24f0e8278..9490697ff 100644
--- a/webui/assets/style.css
+++ b/webui/assets/style.css
@@ -213,8 +213,7 @@ em{
 
 .result-input,
 .result-output,
-.result-error,
-.status{
+.result-error{
   border-radius: 2px;
   background-color: #fafafa;
   border: solid 1.5px #e4eff4;
@@ -239,10 +238,6 @@ em{
   color: #fa3035;
 }
 
-.status{
-  white-space: pre;
-}
-
 .raw{
   height: 253px;
   display: flex;
@@ -250,6 +245,40 @@ em{
   justify-content: center;
 }
 
+table{
+  border: solid 0.5px #e0e0e0;
+  width: 100%;
+  margin-bottom: 30px;
+  /*color:#3c5f8d;*/
+}
+caption{
+  text-align:left;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.21;
+  letter-spacing: 2px;
+  text-align: left;
+}
+th{
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.21;
+  letter-spacing: 2px;
+  color: #102445;
+  text-transform: uppercase;
+  text-align: left;
+  padding: 21px  30px;
+  background-color: white;
+}
+tr{
+  border: solid 0.5px #e0e0e0;
+}
+tr:nth-child(odd) {
+  background-color: #f2f7f9;
+}
+td{
+  padding: 21px  30px;
+}
 
 .string { color: green; }
 .number { color: darkorange; }
diff --git a/webui/index.html b/webui/index.html
index 771507323..5726d367c 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -60,13 +60,21 @@
 		</div>
 
 		<div class="interface" id="interface-cluster">
+			<em id="status-time"></em>
 			<div class="status-container">
-				<h2>Status</h2>
-				<em id="status-time"></em>
-				<div class="status" id="status">
-					<!-- status response -->
+				<h2>Nodes</h2>
+				<div class="status-table-container" id="status-nodes">
 				</div>
-				<div>
+			</div>
+			<div class="status-container">
+				<h2>Indexes</h2>
+				<div class="status-table-container" id="status-indexes">
+				</div>
+			</div>
+			<div class="status-container">
+				<h2>Slice Distribution</h2>
+				<div class="status-table-container" id="status-slices">
+				...
 				</div>
 			</div>