diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
index ebb134324..c074412d3 100644
--- a/resources/views/layouts/base.blade.php
+++ b/resources/views/layouts/base.blade.php
@@ -138,7 +138,8 @@
                 }
             }
             let theme = localStorage.theme
-            let baseColor = '#FCD452'
+            let cpuColor = '#1e90ff'
+            let ramColor = '#00ced1'
             let textColor = '#ffffff'
             let editorBackground = '#181818'
             let editorTheme = 'blackboard'
@@ -149,12 +150,14 @@
                     theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
                 }
                 if (theme == 'dark') {
-                    baseColor = '#FCD452'
+                    cpuColor = '#1e90ff'
+                    ramColor = '#00ced1'
                     textColor = '#ffffff'
                     editorBackground = '#181818'
                     editorTheme = 'blackboard'
                 } else {
-                    baseColor = 'black'
+                    cpuColor = '#1e90ff'
+                    ramColor = '#00ced1'
                     textColor = '#000000'
                     editorBackground = '#ffffff'
                     editorTheme = null
diff --git a/resources/views/livewire/project/shared/metrics.blade.php b/resources/views/livewire/project/shared/metrics.blade.php
index cfe83ded6..d6609d9e6 100644
--- a/resources/views/livewire/project/shared/metrics.blade.php
+++ b/resources/views/livewire/project/shared/metrics.blade.php
@@ -34,6 +34,7 @@
                     const optionsServerCpu = {
                         stroke: {
                             curve: 'straight',
+                            width: 2,
                         },
                         chart: {
                             height: '150px',
@@ -68,16 +69,16 @@
                                 enabled: false,
                             }
                         },
-                        grid: {
-                            show: true,
-                            borderColor: '',
-                        },
-                        colors: [baseColor],
-                        xaxis: {
-                            type: 'datetime',
-                        },
-                        series: [{
-                            name: "CPU %",
+                         grid: {
+                             show: true,
+                             borderColor: '',
+                         },
+                         colors: [cpuColor],
+                         xaxis: {
+                             type: 'datetime',
+                         },
+                         series: [{
+                             name: "CPU %",
                             data: []
                         }],
                         noData: {
@@ -101,11 +102,11 @@
                     document.addEventListener('livewire:init', () => {
                         Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
                             checkTheme();
-                            serverCpuChart.updateOptions({
-                                series: [{
-                                    data: chartData[0].seriesData,
-                                }],
-                                colors: [baseColor],
+                             serverCpuChart.updateOptions({
+                                 series: [{
+                                     data: chartData[0].seriesData,
+                                 }],
+                                 colors: [cpuColor],
                                 xaxis: {
                                     type: 'datetime',
                                     labels: {
@@ -143,6 +144,7 @@
                     const optionsServerMemory = {
                         stroke: {
                             curve: 'straight',
+                            width: 2,
                         },
                         chart: {
                             height: '150px',
@@ -177,22 +179,22 @@
                                 enabled: false,
                             }
                         },
-                        grid: {
-                            show: true,
-                            borderColor: '',
-                        },
-                        colors: [baseColor],
-                        xaxis: {
-                            type: 'datetime',
-                            labels: {
-                                show: true,
-                                style: {
-                                    colors: textColor,
-                                }
-                            }
-                        },
-                        series: [{
-                            name: "Memory (MB)",
+                         grid: {
+                             show: true,
+                             borderColor: '',
+                         },
+                         colors: [ramColor],
+                         xaxis: {
+                             type: 'datetime',
+                             labels: {
+                                 show: true,
+                                 style: {
+                                     colors: textColor,
+                                 }
+                             }
+                         },
+                         series: [{
+                             name: "Memory (MB)",
                             data: []
                         }],
                         noData: {
@@ -217,11 +219,11 @@
                     document.addEventListener('livewire:init', () => {
                         Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
                             checkTheme();
-                            serverMemoryChart.updateOptions({
-                                series: [{
-                                    data: chartData[0].seriesData,
-                                }],
-                                colors: [baseColor],
+                             serverMemoryChart.updateOptions({
+                                 series: [{
+                                     data: chartData[0].seriesData,
+                                 }],
+                                 colors: [ramColor],
                                 xaxis: {
                                     type: 'datetime',
                                     labels: {
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index b84e0240f..f5a2418fd 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -27,6 +27,7 @@
                         const optionsServerCpu = {
                             stroke: {
                                 curve: 'straight',
+                                width: 2,
                             },
                             chart: {
                                 height: '150px',
@@ -61,16 +62,16 @@
                                     enabled: false,
                                 }
                             },
-                            grid: {
-                                show: true,
-                                borderColor: '',
-                            },
-                            colors: [baseColor],
-                            xaxis: {
-                                type: 'datetime',
-                            },
-                            series: [{
-                                name: 'CPU %',
+                             grid: {
+                                 show: true,
+                                 borderColor: '',
+                             },
+                             colors: [cpuColor],
+                             xaxis: {
+                                 type: 'datetime',
+                             },
+                             series: [{
+                                 name: 'CPU %',
                                 data: []
                             }],
                             noData: {
@@ -95,11 +96,11 @@
                         document.addEventListener('livewire:init', () => {
                             Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
                                 checkTheme();
-                                serverCpuChart.updateOptions({
-                                    series: [{
-                                        data: chartData[0].seriesData,
-                                    }],
-                                    colors: [baseColor],
+                                 serverCpuChart.updateOptions({
+                                     series: [{
+                                         data: chartData[0].seriesData,
+                                     }],
+                                     colors: [cpuColor],
                                     xaxis: {
                                         type: 'datetime',
                                         labels: {
@@ -138,6 +139,7 @@
                             const optionsServerMemory = {
                                 stroke: {
                                     curve: 'straight',
+                                    width: 2,
                                 },
                                 chart: {
                                     height: '150px',
@@ -172,15 +174,15 @@
                                         enabled: false,
                                     }
                                 },
-                                grid: {
-                                    show: true,
-                                    borderColor: '',
-                                },
-                                colors: [baseColor],
-                                xaxis: {
-                                    type: 'datetime',
-                                    labels: {
-                                        show: true,
+                                 grid: {
+                                     show: true,
+                                     borderColor: '',
+                                 },
+                                 colors: [ramColor],
+                                 xaxis: {
+                                     type: 'datetime',
+                                     labels: {
+                                         show: true,
                                         style: {
                                             colors: textColor,
                                         }
@@ -212,11 +214,11 @@
                             document.addEventListener('livewire:init', () => {
                                 Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
                                     checkTheme();
-                                    serverMemoryChart.updateOptions({
-                                        series: [{
-                                            data: chartData[0].seriesData,
-                                        }],
-                                        colors: [baseColor],
+                                     serverMemoryChart.updateOptions({
+                                         series: [{
+                                             data: chartData[0].seriesData,
+                                         }],
+                                         colors: [ramColor],
                                         xaxis: {
                                             type: 'datetime',
                                             labels: {