diff --git a/frontend/panel.gotemplate.html b/frontend/panel.gotemplate.html
index bc3a3f7..726c504 100644
--- a/frontend/panel.gotemplate.html
+++ b/frontend/panel.gotemplate.html
@@ -25,28 +25,16 @@
   const dbTableSizes = {{ .DBTableSizes }};
   const rowCountByRoom = {{ .RowCountByRoom }};
 
+  //     disk space chart 
 
-
-  dbTableSizes.sort((a, b) => {
-     return b.Bytes - a.Bytes;
-  });
-
-  const top10 = dbTableSizes.slice(0, 9);
-  const others = dbTableSizes.slice(9, dbTableSizes.length)
-  top10.push({
-    Name: "others",
-    Bytes: others.reduce((accumulator, table) => accumulator + table.Bytes, 0)
-  })
-
-  const totalBytes = top10.reduce((accumulator, table) => accumulator + table.Bytes, 0);
-
-  new Chart(document.getElementById('chart2'), {
+  const freeSpace = diskUsage.DiskSizeBytes - (diskUsage.PostgresBytes+diskUsage.MediaBytes+diskUsage.OtherBytes);
+  new Chart(document.getElementById('chart1'), {
     type: 'doughnut',
     data: {
-      labels: top10.map(table => table.Name),
+      labels: ["Postgres DB", "Matrix Media", "Other", "Free Space" ],
       datasets: [{
-        label: 'filesize %',
-        data: top10.map(table => Math.round((table.Bytes/totalBytes)*100)),
+        label: 'bytes',
+        data: [diskUsage.PostgresBytes, diskUsage.MediaBytes, diskUsage.OtherBytes, freeSpace],
         borderWidth: 2
       }]
     },
@@ -54,4 +42,69 @@
     }
   });
 
+
+
+
+  //      database tables chart 
+
+  dbTableSizes.sort((a, b) => {
+     return b.Bytes - a.Bytes;
+  });
+
+  const top6 = dbTableSizes.slice(0, 5);
+  const others = dbTableSizes.slice(5, dbTableSizes.length)
+  top6.push({
+    Name: "others",
+    Bytes: others.reduce((accumulator, table) => accumulator + table.Bytes, 0)
+  })
+
+  const totalBytes = top6.reduce((accumulator, table) => accumulator + table.Bytes, 0);
+
+  new Chart(document.getElementById('chart2'), {
+    type: 'doughnut',
+    data: {
+      labels: top6.map(table => table.Name),
+      datasets: [{
+        label: 'filesize %',
+        data: top6.map(table => Math.round((table.Bytes/totalBytes)*100)),
+        borderWidth: 2
+      }]
+    },
+    options: {
+    }
+  });
+
+
+
+  //      matrix room size chart 
+  const rooms = Object.entries(rowCountByRoom).map(entry => ({roomid: entry[0], rows: entry[1]}));
+
+  rooms.sort((a, b) => {
+     return b.rows - a.rows;
+  });
+
+  const top8 = rooms.slice(0, 7);
+  const otherRooms = rooms.slice(7, rooms.length)
+  top8.push({
+    roomid: "others",
+    rows: otherRooms.reduce((accumulator, table) => accumulator + table.rows, 0)
+  })
+
+  const totalRows = top8.reduce((accumulator, table) => accumulator + table.rows, 0);
+
+  new Chart(document.getElementById('chart3'), {
+    type: 'doughnut',
+    data: {
+      labels: top6.map(table => table.roomid),
+      datasets: [{
+        label: '%',
+        data: top6.map(table => Math.round((table.rows/totalRows)*100)),
+        borderWidth: 2
+      }]
+    },
+    options: {
+    }
+  });
+
+
 </script>
diff --git a/frontend/static/app.css b/frontend/static/app.css
index 5c583b5..f335dba 100644
--- a/frontend/static/app.css
+++ b/frontend/static/app.css
@@ -120,6 +120,23 @@ header .session-status {
 }
 
 
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+}
+
+
+.chart-container h1, 
+.chart-container h2, 
+.chart-container h3, 
+.chart-container h4 {
+  text-align: center;
+}
+
+
+
+
 code {
   padding: 2px 4px;
   font-size: 90%;
@@ -186,43 +203,6 @@ pre.flash.info {
 
 
 
-.admonition {
-  border-left: 8px dashed gray;
-  padding: 5px 20px;
-  /* display: flex;
-  flex-direction: row;
-  align-items: flex-start; */
-  min-height: 100px;
-}
-
-.admonition.warning {
-  border-left-color: #ffbb00;
-  background: #e7d8ae;
-}
-.admonition.info {
-  border-left-color: #289eff;
-  background: #c7dffa;
-}
-.admonition.info code {
-  background-color: #753d3d08;
-}
-.admonition.mascot {
-  border-left-color: #00ffaa;
-  background: #e8ffc3;
-}
-
-.emoji-icon {
-  margin-right: 20px;
-  margin-top: 15px ;
-  float: left;
-  font-family: sans-serif;
-  font-size: 60px;
-  text-shadow: 2px 5px 20px #25202e40, 2px 5px 10px #25202e40, 2px 5px 3px #25202e40;
-}
-.emoji-icon img {
-  width: 70px;
-}
-
 .page {
   padding: 2vw 4vw;
   border-top: 0.4rem dashed #695b62;
@@ -282,10 +262,6 @@ pre.flash.info {
   align-items: flex-start;
 }
 
-.money-unit {
-  margin-right: 0.3em;
-}
-
 input,button,textarea,
 input:hover,button:hover,textarea:hover,
 input:focus,button:focus,textarea:focus {