diff --git a/package-lock.json b/package-lock.json
index 989a98d..1c3c0e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@shardus/monitor-client",
-    "version": "2.5.9",
+    "version": "2.5.10",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@shardus/monitor-client",
-            "version": "2.5.9",
+            "version": "2.5.10",
             "license": "ISC",
             "dependencies": {
                 "eslint": "8.43.0",
diff --git a/package.json b/package.json
index 4ea76e0..117a228 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
     "name": "@shardus/monitor-client",
-    "version": "2.5.9",
+    "version": "2.5.10",
     "description": "",
     "main": "entry.js",
     "engines": {
         "node": "18.16.1"
     },
     "scripts": {
-        "release": "np --any-branch --no-cleanup --no-tests --no-yarn",
+        "release": "np --any-branch --no-cleanup --no-tests --no-yarn --branch dev",
         "test": "echo \"Error: no test specified\" && exit 1",
         "compile": "tsc -p .",
         "prepare": "npm run compile",
@@ -18,7 +18,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://gitlab.com/shardus/enterprise/monitor-client.git"
+        "url": "git@github.com:shardeum/x-monitor-client.git"
     },
     "publishConfig": {
         "access": "public"
diff --git a/public/large-network.js b/public/large-network.js
index 952b04e..fc456cf 100644
--- a/public/large-network.js
+++ b/public/large-network.js
@@ -1,4 +1,4 @@
-;(function main() {
+; (function main() {
     const G = {}
     loadToken(G)
     G.VW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
@@ -39,15 +39,16 @@
                     rejectedTps: 0,
                     netLoad: 0,
                     load: 0,
+                    totalLoad: 0,
                     maxLoad: 0,
                     queueLength: 0,
+                    totalQueueLength: 0,
                     queueTime: 0,
+                    totalQueueTime: 0,
                     expiredTx: 0,
 
                 },
                 colorMode: 'state',
-                shouldShowMaxTps: false,
-                shouldShowMaxLoad: false,
                 animateTransactions: false,
                 queueDetails: false,
             }
@@ -214,13 +215,20 @@
                 let queueLength = []
                 let queueTime = []
 
+                let totalLoad = 0
+                let totalQueueLength = 0
+                let totalQueueTime = 0.0
+
                 for (let nodeId in report.nodes.active) {
                     const node = report.nodes.active[nodeId]
+                    totalLoad += node.currentLoad.networkLoad
                     loads.push(node.currentLoad.networkLoad)
                     counters.push(node.cycleCounter)
                     cycleMarkers.push(node.cycleMarker)
                     desired.push(node.desiredNodes)
+                    totalQueueLength += node.queueLength
                     queueLength.push(node.queueLength)
+                    totalQueueTime += node.txTimeInQueue
                     queueTime.push(node.txTimeInQueue)
                 }
 
@@ -235,6 +243,7 @@
                 this.networkStatus.standby = Object.keys(report.nodes.standby).length
 
                 this.networkStatus.load = this.average(loads)
+                this.networkStatus.totalLoad = totalLoad
                 this.networkStatus.counter = this.mode(counters)
                 this.networkStatus.cycleMarker = this.mode(cycleMarkers)
                 this.networkStatus.desired = this.mode(desired)
@@ -243,7 +252,9 @@
                 }
                 this.expiredTx = report.totalExpired
                 this.networkStatus.queueLength = this.average(queueLength)
+                this.networkStatus.totalQueueLength = totalQueueLength
                 this.networkStatus.queueTime = this.average(queueTime)
+                this.networkStatus.totalQueueTime = totalQueueTime
             },
             deleteCrashedNodes(nodes) {
                 console.log('Running delete crash nodes', nodes)
@@ -325,8 +336,7 @@
                 try {
                     let changes = await this.fetchChanges()
                     console.log(
-                        `Total of ${Object.keys(changes.nodes.active).length}/${
-                            Object.keys(G.nodes.active).length
+                        `Total of ${Object.keys(changes.nodes.active).length}/${Object.keys(G.nodes.active).length
                         } nodes updated.`
                     )
                     this.filterOutCrashedNodes(changes)
diff --git a/views/large-network.html b/views/large-network.html
index 21ed9b7..9f20d6b 100644
--- a/views/large-network.html
+++ b/views/large-network.html
@@ -1,203 +1,244 @@
 <html>
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <script src="axios.min.js"></script>
-        <script
-            src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
-            type="text/javascript"
-        ></script>
-        <script src="vis-network-animated.js" type="text/javascript"></script>
-        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
 
-        <style>
-            body {
-                margin: 0;
-                background: rgb(243 243 243);
-                background: #e0eafc;
-                /* fallback for old browsers */
-                background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc);
-                /* Chrome 10-25, Safari 5.1-6 */
-                background: linear-gradient(to right, #cfdef3, #e0eafc);
-                /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-            }
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="axios.min.js"></script>
+    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" type="text/javascript"></script>
+    <script src="vis-network-animated.js" type="text/javascript"></script>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
 
-            #mynetwork {
-                width: 100%;
-                height: calc(100vh - 140px);
-                margin: 0;
-                padding: 0;
-            }
+    <style>
+        body {
+            margin: 0;
+            background: rgb(243 243 243);
+            background: #e0eafc;
+            /* fallback for old browsers */
+            background: -webkit-linear-gradient(to right, #cfdef3, #e0eafc);
+            /* Chrome 10-25, Safari 5.1-6 */
+            background: linear-gradient(to right, #cfdef3, #e0eafc);
+            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+        }
 
-            #myarchiver {
-                width: 30px;
-                height: 300px;
-                position: absolute;
-                top: 80px;
-                right: 20px;
-                z-index: 100;
-            }
+        #mynetwork {
+            width: 100%;
+            height: calc(100vh - 140px);
+            margin: 0;
+            padding: 0;
+        }
 
-            tr > td {
-                padding: 5px;
-            }
+        #myarchiver {
+            width: 30px;
+            height: 300px;
+            position: absolute;
+            top: 80px;
+            right: 20px;
+            z-index: 100;
+        }
 
-            #color-mode-selector {
-                /*position: relative;*/
-                /*bottom: 100px;*/
-            }
-        </style>
-    </head>
+        #montable {
+            font-family: sans-serif;
+            font-size: small;
+            font-weight: 300;
+            text-align: left;
+            background-color: #f3f4f6;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border-collapse: collapse;
+            flex-shrink: 0;
+        }
 
-    <body>
-        <div id="app">
-            <div class="p-2 w-full">
-                <table class="w-full font-sans text-sm font-light text-center bg-gray-100 shadow">
-                    <tr class="font-medium text-xs text-gray-800 grid grid-cols-11">
-                        <td>Counter</td>
-                        <td>Joining</td>
-                        <td>Standby</td>
-                        <td>Syncing</td>
-                        <td>Active</td>
-                        <td>Desired</td>
-                        <td>
-                            <span v-if="shouldShowMaxTps">Max Tps</span>
-                            <span v-else>Avg Tps</span>
-                        </td>
-                        <td>Processed</td>
-                        <td>Rejected</td>
-                        <td>Rejected TPS</td>
-                        <td>
-                            <span v-if="shouldShowMaxLoad">Max Load</span>
-                            <span v-else>Load</span>
-                        </td>
-                    </tr>
-                    <tr class="grid grid-cols-11">
-                        <td>{{ networkStatus.counter }}</td>
-                        <td>{{ networkStatus.joining - networkStatus.standby }}</td>
-                        <td>{{ networkStatus.standby }}</td>
-                        <td>{{ networkStatus.syncing }}</td>
-                        <td>{{ networkStatus.active }}</td>
-                        <td>{{ networkStatus.desired }}</td>
-                        <td
-                            @mouseover="shouldShowMaxTps = true"
-                            @mouseleave="shouldShowMaxTps = false"
-                        >
-                            <span v-if="shouldShowMaxTps">{{ networkStatus.maxTps }}</span>
-                            <span v-else>{{ networkStatus.tps }}</span>
-                        </td>
-                        <td>{{ networkStatus.processed }}</td>
-                        <td>{{ networkStatus.rejected }}</td>
-                        <td>{{ networkStatus.rejectedTps }}</td>
-                        <td
-                            @mouseover="shouldShowMaxLoad = true"
-                            @mouseleave="shouldShowMaxLoad = false"
-                        >
-                            <span v-if="shouldShowMaxLoad"
-                                >{{ networkStatus.maxLoad ? networkStatus.maxLoad.toFixed(2) : 0.0
-                                }}</span
-                            >
-                            <span v-else
-                                >{{ networkStatus.load ? networkStatus.load.toFixed(2) : 0.0
-                                }}</span
-                            >
-                        </td>
-                    </tr>
-                </table>
-            </div>
+        #monheader {
+            text-align: left;
+            font-weight: bold;
+            vertical-align: middle;
+        }
 
-            <div style="position: absolute; bottom: 20px; left: 20px" v-if="queueDetails">
-                <table class="font-sans text-sm font-light text-center bg-gray-100 shadow">
-                    <tr class="font-medium text-xs text-gray-800 grid grid-cols-4">
-                        <td>Exp.Tx</td>
-                        <td>Q.Time</td>
-                        <td>Q.Length</td>
-                    </tr>
-                    <tr class="grid grid-cols-4">
-                        <td>{{ networkStatus.expiredTx }}</td>
-                        <td>{{ networkStatus.queueTime.toFixed(2) }}</td>
-                        <td>{{ networkStatus.queueLength.toFixed(2) }}</td>
-                    </tr>
-                </table>
-            </div>
-            <div id="mynetwork"></div>
-            <div id="myarchiver"></div>
-            <div style="position: absolute; bottom: 20px; right: 20px">
-                <span>Monitor-server version: <span id="server-version">x.x.x</span></span>
-                <br />
-                <span>Monitor-client version: &nbsp;<span id="client-version">x.x.x</span></span>
-            </div>
-            <div class="grid grid-cols-12">
-                <div
-                    class="col-span-3 px-3 mb-6 md:mb-0"
-                    id="color-mode-selector"
-                    style="position: absolute; top: 75px; left: 0px"
-                >
-                    <label
-                        class="inline-block tracking-wide text-gray-700 text-xs font-bold mb-2"
-                        for="grid-state"
-                    >
-                        Nodes Color By:
-                    </label>
-                    <div class="relative inline-block">
-                        <select
-                            @change="onColorModeChange"
-                            class="block appearance-none w-full bg-gray-100 border text-sm border-gray-100 text-gray-700 py-2 px-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                            id="grid-state"
-                        >
-                            <option value="state">Data Sync</option>
-                            <option value="marker">Cycle Marker</option>
-                            <option value="nodelist">NodeList Hash</option>
-                        </select>
-                        <div
-                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
-                        >
-                            <svg
-                                class="fill-current h-4 w-4"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                            >
-                                <path
-                                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
-                                />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
+        #monlabel {
+            vertical-align: middle;
+            text-align: left;
+        }
+
+        #monval {
+            vertical-align: top;
+            text-align: right;
+        }
+
+        #itemrow {
+            vertical-align: top;
+            border: 0px solid #000000;
+        }
+
+        tr>td {
+            padding: 5px;
+        }
+    </style>
+</head>
 
-                <div
-                    class="col-span-9 px-3 mb-6 md:mb-0 align-middle flex flex-row items-end justify-end space-x-6"
-                    style="position: absolute; top: 75px; right: 0px"
-                >
-                    <div>
-                        <input type="checkbox" id="checkbox" v-model="animateTransactions" />
-                        <label class="text-sm" for="checkbox">Animate transactions</label>
-                    </div>
-                    <div>
-                        <input type="checkbox" id="checkbox" v-model="queueDetails" />
-                        <label class="text-sm" for="checkbox">Show Queue Detail</label>
-                    </div>
-                    <a href="/chart" target="_blank" class="text-sm text-blue-400">Charts</a>
-                    <a href="/sync" target="_blank" class="text-sm text-blue-400">Sync History</a>
-                    <a href="/history" target="_blank" class="text-sm text-blue-400"
-                        >Node History</a
-                    >
-                    <a href="/history-log" target="_blank" class="text-sm text-blue-400"
-                        >Monitor Logs</a
-                    >
-                    <a href="/monitor-events" target="_blank" class="text-sm text-blue-400"
-                        >Monitor Events</a
-                    >
-                    <a href="/app-versions" target="_blank" class="text-sm text-blue-400"
-                        >App Versions</a
-                    >
-                </div>
-            </div>
+<body>
+    <div id="app">
+        <div class="table-container" style="display: flex; gap: 10px; margin: 10px 10px; align-items: flex-start;">
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">MONITOR TOOL</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Server: v<span id="server-version">x.x.x</span></td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Client v<span id="client-version">x.x.x</span></td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Animate: <input type="checkbox" id="checkbox"
+                            v-model="animateTransactions"></input></td>
+                </tr>
+                <tr id="itemrow">
+                    <td class="relative inline-block">Color:
+                        <select @change="onColorModeChange">
+                            <option value="state">DataSync</option>
+                            <option value="marker">CycleMarker</option>
+                            <option value="nodelist">NodeListHash</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td><button type="button" id="reset-button">Reset DOES NOT WORK</button></td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">NETWORK</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Counter:</td>
+                    <td id="monval">{{networkStatus.counter}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Joining:</td>
+                    <td id="monval">{{networkStatus.joining - networkStatus.standby}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Standby:</td>
+                    <td id="monval">{{networkStatus.standby}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Syncing:</td>
+                    <td id="monval">{{networkStatus.syncing}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Active:</td>
+                    <td id="monval">{{networkStatus.active}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Desired:</td>
+                    <td id="monval">{{networkStatus.desired}}</td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">TXN</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Proc:</td>
+                    <td id="monval">{{ networkStatus.processed }}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Rej:</td>
+                    <td id="monval">{{ networkStatus.rejected }}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Exp:</td>
+                    <td id="monval">{{ networkStatus.expiredTx }}</td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">TPS</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Cur:</td>
+                    <td id="monval">{{networkStatus.tps}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Max:</td>
+                    <td id="monval">{{networkStatus.maxTps}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Rej:</td>
+                    <td id="monval">{{networkStatus.rejectedTps}}</td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">LOAD</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Total:</td>
+                    <td id="monval">{{ networkStatus.totalLoad ? networkStatus.totalLoad.toFixed(2) : 0}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Curr:</td>
+                    <td id="monval">{{ networkStatus.load ? networkStatus.load.toFixed(2) : 0}}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Max:</td>
+                    <td id="monval">{{ networkStatus.maxLoad ? networkStatus.maxLoad.toFixed(2) : 0}}</td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">QUEUE</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">QLen:</td>
+                    <td id="monval">{{ networkStatus.queueLength.toFixed(2) }}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">QLen.Tot:</td>
+                    <td id="monval">{{ networkStatus.totalQueueLength.toFixed(2) }}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Q-Time:</td>
+                    <td id="monval">{{ networkStatus.queueTime.toFixed(2) }}</td>
+                </tr>
+                <tr id="itemrow">
+                    <td id="monlabel">Q-Time.Tot:</td>
+                    <td id="monval">{{ networkStatus.totalQueueTime.toFixed(2) }}</td>
+                </tr>
+            </table>
+            <table id="montable">
+                <tr id="itemrow">
+                    <td id="monheader">LINKS</td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/chart" target="_blank" class="text-sm text-blue-400">Charts</a></td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/sync" target="_blank" class="text-sm text-blue-400">Sync History</a></td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/history" target="_blank" class="text-sm text-blue-400">Node History</a></td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/history-log" target="_blank" class="text-sm text-blue-400">Monitor Logs</a></td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/monitor-events" target="_blank" class="text-sm text-blue-400">Monitor Events</a></td>
+                </tr>
+                <tr id="itemrow">
+                    <td><a href="/app-versions" target="_blank" class="text-sm text-blue-400">App Versions</a></td>
+                </tr>
+            </table>
         </div>
+    </div>
+
+    <div id="mynetwork"></div>
+    <div id="myarchiver"></div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <script src="auth.js" type="text/javascript"></script>
+    <script src="large-network.js" type="text/javascript"></script>
+    <script src="version.js"></script>
+</body>
 
-        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-        <script src="auth.js" type="text/javascript"></script>
-        <script src="large-network.js" type="text/javascript"></script>
-        <script src="version.js"></script>
-    </body>
-</html>
+</html>
\ No newline at end of file