diff --git a/js/pages/serverInfo.js b/js/pages/serverInfo.js
index bdf89e1..9e76729 100644
--- a/js/pages/serverInfo.js
+++ b/js/pages/serverInfo.js
@@ -49,7 +49,7 @@ function ServerInfoPage(params, container) {
   nv.addGraph(function () {
     var perfChart = nv.models.multiChart()
       .margin({ top: 30, right: 75, bottom: 40, left: 75 })
-      .color(['darkred', 'yellowgreen']);
+      .color(['#e879f9', '#22d3ee']);
     perfChart.yAxis1.axisLabel('Framerate').tickFormat(d3.format(',d'));
     perfChart.yAxis2.axisLabel('Entities').tickFormat(d3.format(',d'));
     perfChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); });
@@ -66,7 +66,8 @@ function ServerInfoPage(params, container) {
 
   nv.addGraph(function () {
     var netChart = nv.models.stackedAreaChart()
-      .margin({ top: 0, right: 75, bottom: 40, left: 75 });
+      .margin({ top: 0, right: 75, bottom: 40, left: 75 })
+      .color(['#c084fc', '#fbbf24']);
     netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) {
       var fmt = d3.format('.0f');
       if (bytes < 1024) return fmt(bytes) + 'B';
@@ -92,6 +93,7 @@ function ServerInfoPage(params, container) {
       .donut(true)
       .duration(500)
       .height(250)
+      .color(['#a78bfa', '#7c3aed', '#e879f9', '#2d1f3d'])
       .margin({ top: 0, right: 75, bottom: 0, left: 75 });
     playersChart.pie.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2; });
     playersChart.pie.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2; });
diff --git a/rcon.css b/rcon.css
index 2266bbb..382553d 100644
--- a/rcon.css
+++ b/rcon.css
@@ -1,12 +1,12 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 
 :root {
-  --rcon-bg: #252830;
+  --rcon-bg: #120918;
   --rcon-text: #cfd2da;
   --rcon-accent: #8b5cf6;
-  --rcon-card-bg: #434857;
+  --rcon-card-bg: #1e1330;
   /* Override BS5 dark theme body background */
-  --bs-body-bg: #252830;
+  --bs-body-bg: #120918;
 }
 
 body {