diff --git a/app/Livewire/Project/Shared/Metrics.php b/app/Livewire/Project/Shared/Metrics.php
index fdc35fc0f..e5b87b48c 100644
--- a/app/Livewire/Project/Shared/Metrics.php
+++ b/app/Livewire/Project/Shared/Metrics.php
@@ -8,7 +8,7 @@ class Metrics extends Component
 {
     public $resource;
 
-    public $chartId = 'container-cpu';
+    public $chartId = 'metrics';
 
     public $data;
 
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index d09d7f49c..694ad61a3 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -6,10 +6,31 @@
     @apply hidden!;
 }
 
+@utility apexcharts-grid-borders {
+    @apply dark:hidden!;
+}
+
 @utility apexcharts-xaxistooltip {
     @apply hidden!;
 }
 
+@utility apexcharts-tooltip-custom {
+    @apply bg-white dark:bg-coolgray-100 border border-neutral-200 dark:border-coolgray-300 rounded-lg shadow-lg p-3 text-sm;
+    min-width: 160px;
+}
+
+@utility apexcharts-tooltip-custom-value {
+    @apply text-neutral-700 dark:text-neutral-300 mb-1;
+}
+
+@utility apexcharts-tooltip-value-bold {
+    @apply font-bold text-black dark:text-white;
+}
+
+@utility apexcharts-tooltip-custom-title {
+    @apply text-xs text-neutral-500 dark:text-neutral-400 font-medium;
+}
+
 @utility input-sticky {
     @apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300;
 }
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..7c7456b5e 100644
--- a/resources/views/livewire/project/shared/metrics.blade.php
+++ b/resources/views/livewire/project/shared/metrics.blade.php
@@ -1,21 +1,20 @@
 <div>
-    <div class="flex items-center gap-2 ">
+    <div class="flex items-center gap-2">
         <h2>Metrics</h2>
     </div>
-    <div class="pb-4">Basic metrics for your container.</div>
-    @if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
-        <div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
-    @elseif(!$resource->destination->server->isMetricsEnabled())
-        <div class="alert alert-warning">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
-        <div> Go to <a class="underline dark:text-white"
-                href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to
-            enable
-            it.</div>
-    @else
-        @if (!str($resource->status)->contains('running'))
-            <div class="alert alert-warning">Metrics are only available when this resource is running!</div>
+    <div class="pb-4">Basic metrics for your application container.</div>
+    <div>
+        @if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
+            <div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
+        @elseif(!$resource->destination->server->isMetricsEnabled())
+            <div class="alert alert-warning">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
+            <div>Go to <a class="underline dark:text-white" href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to enable it.</div>
         @else
-            <x-forms.select label="Interval" wire:change="setInterval" id="interval">
+            @if (!str($resource->status)->contains('running'))
+                <div class="alert alert-warning">Metrics are only available when the application container is running!</div>
+            @else
+                <div>
+                <x-forms.select label="Interval" wire:change="setInterval" id="interval">
                 <option value="5">5 minutes (live)</option>
                 <option value="10">10 minutes (live)</option>
                 <option value="30">30 minutes</option>
@@ -26,7 +25,7 @@
             </x-forms.select>
             <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()"
                 class="pt-5">
-                <h4>CPU (%)</h4>
+                <h4>CPU Usage</h4>
                 <div wire:ignore id="{!! $chartId !!}-cpu"></div>
 
                 <script>
@@ -34,6 +33,7 @@
                     const optionsServerCpu = {
                         stroke: {
                             curve: 'straight',
+                            width: 2,
                         },
                         chart: {
                             height: '150px',
@@ -52,7 +52,7 @@
                                 },
                             },
                             animations: {
-                                enabled: false,
+                                enabled: true,
                             },
                         },
                         fill: {
@@ -68,74 +68,90 @@
                                 enabled: false,
                             }
                         },
-                        grid: {
-                            show: true,
-                            borderColor: '',
-                        },
-                        colors: [baseColor],
-                        xaxis: {
-                            type: 'datetime',
-                        },
-                        series: [{
-                            name: "CPU %",
-                            data: []
-                        }],
-                        noData: {
-                            text: 'Loading...',
-                            style: {
-                                color: textColor,
-                            }
-                        },
-                        tooltip: {
-                            enabled: true,
-                            marker: {
-                                show: false,
-                            }
-                        },
-                        legend: {
-                            show: false
-                        }
+                         grid: {
+                             show: true,
+                             borderColor: '',
+                         },
+                         colors: [cpuColor],
+                         xaxis: {
+                             type: 'datetime',
+                         },
+                          series: [{
+                              name: "CPU %",
+                             data: []
+                         }],
+                         noData: {
+                             text: 'Loading...',
+                             style: {
+                                 color: textColor,
+                             }
+                         },
+                         tooltip: {
+                             enabled: true,
+                             marker: {
+                                 show: false,
+                             },
+                             custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                 const value = series[seriesIndex][dataPointIndex];
+                                 const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                 const date = new Date(timestamp);
+                                 const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                     String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                     String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                     date.getUTCFullYear() + '-' +
+                                     String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                     String(date.getUTCDate()).padStart(2, '0');
+                                 return '<div class="apexcharts-tooltip-custom">' +
+                                     '<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                     '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                     '</div>';
+                             }
+                         },
+                         legend: {
+                             show: false
+                         }
                     }
-                    const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`), optionsServerCpu);
-                    serverCpuChart.render();
-                    document.addEventListener('livewire:init', () => {
-                        Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
-                            checkTheme();
-                            serverCpuChart.updateOptions({
-                                series: [{
-                                    data: chartData[0].seriesData,
-                                }],
-                                colors: [baseColor],
-                                xaxis: {
-                                    type: 'datetime',
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                yaxis: {
-                                    show: true,
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                noData: {
-                                    text: 'Loading...',
-                                    style: {
-                                        color: textColor,
-                                    }
-                                }
-                            });
-                        });
-                    });
+                     const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`), optionsServerCpu);
+                     serverCpuChart.render();
+                     Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
+                         checkTheme();
+                          serverCpuChart.updateOptions({
+                              series: [{
+                                  data: chartData[0].seriesData,
+                              }],
+                              colors: [cpuColor],
+                             xaxis: {
+                                 type: 'datetime',
+                                 labels: {
+                                     show: true,
+                                     style: {
+                                         colors: textColor,
+                                     }
+                                 }
+                             },
+                              yaxis: {
+                                  show: true,
+                                  labels: {
+                                      show: true,
+                                      style: {
+                                          colors: textColor,
+                                      },
+                                      formatter: function(value) {
+                                          return Math.round(value) + ' %';
+                                      }
+                                  }
+                              },
+                             noData: {
+                                 text: 'Loading...',
+                                 style: {
+                                     color: textColor,
+                                 }
+                             }
+                         });
+                     });
                 </script>
 
-                <h3>Memory (MB)</h3>
+                <h4>Memory Usage</h4>
                 <div wire:ignore id="{!! $chartId !!}-memory"></div>
 
                 <script>
@@ -143,6 +159,7 @@
                     const optionsServerMemory = {
                         stroke: {
                             curve: 'straight',
+                            width: 2,
                         },
                         chart: {
                             height: '150px',
@@ -161,7 +178,7 @@
                                 },
                             },
                             animations: {
-                                enabled: false,
+                                enabled: true,
                             },
                         },
                         fill: {
@@ -177,81 +194,99 @@
                                 enabled: false,
                             }
                         },
-                        grid: {
-                            show: true,
-                            borderColor: '',
-                        },
-                        colors: [baseColor],
-                        xaxis: {
-                            type: 'datetime',
-                            labels: {
-                                show: true,
-                                style: {
-                                    colors: textColor,
-                                }
-                            }
-                        },
-                        series: [{
-                            name: "Memory (MB)",
-                            data: []
-                        }],
-                        noData: {
-                            text: 'Loading...',
-                            style: {
-                                color: textColor,
-                            }
-                        },
-                        tooltip: {
-                            enabled: true,
-                            marker: {
-                                show: false,
-                            }
-                        },
-                        legend: {
-                            show: false
-                        }
+                         grid: {
+                             show: true,
+                             borderColor: '',
+                         },
+                         colors: [ramColor],
+                         xaxis: {
+                             type: 'datetime',
+                             labels: {
+                                 show: true,
+                                 style: {
+                                     colors: textColor,
+                                 }
+                             }
+                         },
+                         series: [{
+                             name: "Memory (MB)",
+                             data: []
+                         }],
+                         noData: {
+                             text: 'Loading...',
+                             style: {
+                                 color: textColor,
+                             }
+                         },
+                         tooltip: {
+                             enabled: true,
+                             marker: {
+                                 show: false,
+                             },
+                             custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                 const value = series[seriesIndex][dataPointIndex];
+                                 const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                 const date = new Date(timestamp);
+                                 const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                     String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                     String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                     date.getUTCFullYear() + '-' +
+                                     String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                     String(date.getUTCDate()).padStart(2, '0');
+                                 return '<div class="apexcharts-tooltip-custom">' +
+                                     '<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + ' MB</span></div>' +
+                                     '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                     '</div>';
+                             }
+                         },
+                         legend: {
+                             show: false
+                         }
                     }
-                    const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
-                        optionsServerMemory);
-                    serverMemoryChart.render();
-                    document.addEventListener('livewire:init', () => {
-                        Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
-                            checkTheme();
-                            serverMemoryChart.updateOptions({
-                                series: [{
-                                    data: chartData[0].seriesData,
-                                }],
-                                colors: [baseColor],
-                                xaxis: {
-                                    type: 'datetime',
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                yaxis: {
-                                    min: 0,
-                                    show: true,
-                                    labels: {
-                                        show: true,
-                                        style: {
-                                            colors: textColor,
-                                        }
-                                    }
-                                },
-                                noData: {
-                                    text: 'Loading...',
-                                    style: {
-                                        color: textColor,
-                                    }
-                                }
-                            });
-                        });
-                    });
+                     const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
+                         optionsServerMemory);
+                     serverMemoryChart.render();
+                     Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
+                         checkTheme();
+                          serverMemoryChart.updateOptions({
+                              series: [{
+                                  data: chartData[0].seriesData,
+                              }],
+                              colors: [ramColor],
+                             xaxis: {
+                                 type: 'datetime',
+                                 labels: {
+                                     show: true,
+                                     style: {
+                                         colors: textColor,
+                                     }
+                                 }
+                             },
+                              yaxis: {
+                                  min: 0,
+                                  show: true,
+                                  labels: {
+                                      show: true,
+                                      style: {
+                                          colors: textColor,
+                                      },
+                                      formatter: function(value) {
+                                          return Math.round(value) + ' MB';
+                                      }
+                                  }
+                              },
+                             noData: {
+                                 text: 'Loading...',
+                                 style: {
+                                     color: textColor,
+                                 }
+                             }
+                         });
+                     });
                 </script>
             </div>
+            </div>
         @endif
     @endif
+    </div>
 </div>
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
index b84e0240f..6a64d3d7d 100644
--- a/resources/views/livewire/server/charts.blade.php
+++ b/resources/views/livewire/server/charts.blade.php
@@ -7,7 +7,7 @@
         <x-server.sidebar :server="$server" activeMenu="metrics" />
         <div class="w-full">
             <h2>Metrics</h2>
-            <div class="pb-4">Basic metrics for your container.</div>
+            <div class="pb-4">Basic metrics for your server.</div>
             @if ($server->isMetricsEnabled())
                 <div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
                     <x-forms.select label="Interval" wire:change="setInterval" id="interval">
@@ -19,7 +19,7 @@
                         <option value="10080">1 week</option>
                         <option value="43200">30 days</option>
                     </x-forms.select>
-                    <h4 class="pt-4">CPU (%)</h4>
+                    <h4 class="pt-4">CPU Usage</h4>
                     <div wire:ignore id="{!! $chartId !!}-cpu"></div>
 
                     <script>
@@ -27,6 +27,7 @@
                         const optionsServerCpu = {
                             stroke: {
                                 curve: 'straight',
+                                width: 2,
                             },
                             chart: {
                                 height: '150px',
@@ -45,7 +46,7 @@
                                     },
                                 },
                                 animations: {
-                                    enabled: false,
+                                    enabled: true,
                                 },
                             },
                             fill: {
@@ -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: {
@@ -79,12 +80,27 @@
                                     color: textColor,
                                 }
                             },
-                            tooltip: {
-                                enabled: true,
-                                marker: {
-                                    show: false,
-                                }
-                            },
+                             tooltip: {
+                                 enabled: true,
+                                 marker: {
+                                     show: false,
+                                 },
+                                 custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                     const value = series[seriesIndex][dataPointIndex];
+                                     const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                     const date = new Date(timestamp);
+                                     const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                         String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                         String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                         date.getUTCFullYear() + '-' +
+                                         String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                         String(date.getUTCDate()).padStart(2, '0');
+                                     return '<div class="apexcharts-tooltip-custom">' +
+                                         '<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                         '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                         '</div>';
+                                 }
+                             },
                             legend: {
                                 show: false
                             }
@@ -95,11 +111,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: {
@@ -109,15 +125,18 @@
                                             }
                                         }
                                     },
-                                    yaxis: {
-                                        show: true,
-                                        labels: {
-                                            show: true,
-                                            style: {
-                                                colors: textColor,
-                                            }
-                                        }
-                                    },
+                                     yaxis: {
+                                         show: true,
+                                         labels: {
+                                             show: true,
+                                             style: {
+                                                 colors: textColor,
+                                             },
+                                             formatter: function(value) {
+                                                 return Math.round(value) + ' %';
+                                             }
+                                         }
+                                     },
                                     noData: {
                                         text: 'Loading...',
                                         style: {
@@ -130,7 +149,7 @@
                     </script>
 
                     <div>
-                        <h4>Memory (%)</h4>
+                        <h4>Memory Usage</h4>
                         <div wire:ignore id="{!! $chartId !!}-memory"></div>
 
                         <script>
@@ -138,6 +157,7 @@
                             const optionsServerMemory = {
                                 stroke: {
                                     curve: 'straight',
+                                    width: 2,
                                 },
                                 chart: {
                                     height: '150px',
@@ -156,7 +176,7 @@
                                         },
                                     },
                                     animations: {
-                                        enabled: false,
+                                        enabled: true,
                                     },
                                 },
                                 fill: {
@@ -172,15 +192,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,
                                         }
@@ -196,12 +216,27 @@
                                         color: textColor,
                                     }
                                 },
-                                tooltip: {
-                                    enabled: true,
-                                    marker: {
-                                        show: false,
-                                    }
-                                },
+                                 tooltip: {
+                                     enabled: true,
+                                     marker: {
+                                         show: false,
+                                     },
+                                     custom: function({ series, seriesIndex, dataPointIndex, w }) {
+                                         const value = series[seriesIndex][dataPointIndex];
+                                         const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
+                                         const date = new Date(timestamp);
+                                         const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
+                                             String(date.getUTCMinutes()).padStart(2, '0') + ':' +
+                                             String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
+                                             date.getUTCFullYear() + '-' +
+                                             String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
+                                             String(date.getUTCDate()).padStart(2, '0');
+                                         return '<div class="apexcharts-tooltip-custom">' +
+                                             '<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
+                                             '<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
+                                             '</div>';
+                                     }
+                                 },
                                 legend: {
                                     show: false
                                 }
@@ -212,11 +247,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: {
@@ -226,16 +261,19 @@
                                                 }
                                             }
                                         },
-                                        yaxis: {
-                                            min: 0,
-                                            show: true,
-                                            labels: {
-                                                show: true,
-                                                style: {
-                                                    colors: textColor,
-                                                }
-                                            }
-                                        },
+                                         yaxis: {
+                                             min: 0,
+                                             show: true,
+                                             labels: {
+                                                 show: true,
+                                                 style: {
+                                                     colors: textColor,
+                                                 },
+                                                  formatter: function(value) {
+                                                      return Math.round(value) + ' %';
+                                                  }
+                                             }
+                                         },
                                         noData: {
                                             text: 'Loading...',
                                             style: {