diff --git a/packages/renderer/src/lib/container/ContainerStatistics.svelte b/packages/renderer/src/lib/container/ContainerStatistics.svelte
index efea8e48c96..381ad6f8a6d 100644
--- a/packages/renderer/src/lib/container/ContainerStatistics.svelte
+++ b/packages/renderer/src/lib/container/ContainerStatistics.svelte
@@ -3,35 +3,15 @@ import { onMount, onDestroy } from 'svelte';
 import type { ContainerStatsInfo } from '../../../../main/src/plugin/api/container-stats-info';
 import type { ContainerInfoUI } from './ContainerInfoUI';
 import { ContainerUtils } from './container-utils';
+import Donut from '../donut/Donut.svelte';
 
 export let container: ContainerInfoUI;
 
-const WARNING_PERCENTAGE = 70;
-const DANGER_PERCENTAGE = 90;
-
-const GREEN_COLOR = '#16a34a';
-const ORANGE_COLOR = '#F97316';
-const RED_COLOR = '#cb4d3e';
-
 const containerUtils = new ContainerUtils();
 
-$: cpuColor =
-  cpuUsagePercentage < WARNING_PERCENTAGE
-    ? GREEN_COLOR
-    : cpuUsagePercentage < DANGER_PERCENTAGE
-    ? ORANGE_COLOR
-    : RED_COLOR;
-$: memoryColor =
-  memoryUsagePercentage < WARNING_PERCENTAGE
-    ? GREEN_COLOR
-    : memoryUsagePercentage < DANGER_PERCENTAGE
-    ? ORANGE_COLOR
-    : RED_COLOR;
-
 // percentage
 let cpuUsagePercentage = -1;
 let memoryUsagePercentage = -1;
-let usedMemory;
 
 // id to cancel the streaming
 let fetchStatsId: number;
@@ -40,10 +20,8 @@ let fetchStatsId: number;
 let firstIteration = true;
 
 // title to use on
-let cpuUsagePercentageTitle: string;
-let cpuUsageTitle: string;
-let memoryUsagePercentageTitle: string;
-let memoryUsageTitle: string;
+let cpuUsage: string;
+let memoryUsage: string;
 
 async function updateStatistics(containerStats: ContainerStatsInfo) {
   // we need enough data to compute the CPU usage
@@ -52,12 +30,10 @@ async function updateStatistics(containerStats: ContainerStatsInfo) {
     return;
   }
 
-  //
-  usedMemory = containerStats.memory_stats.usage - (containerStats.memory_stats.stats?.cache || 0);
+  const usedMemory = containerStats.memory_stats.usage - (containerStats.memory_stats.stats?.cache || 0);
   const availableMemory = containerStats.memory_stats.limit;
   memoryUsagePercentage = (usedMemory / availableMemory) * 100.0;
-  memoryUsagePercentageTitle = containerUtils.getMemoryPercentageUsageTitle(memoryUsagePercentage, usedMemory);
-  memoryUsageTitle = containerUtils.getMemoryUsageTitle(usedMemory);
+  memoryUsage = containerUtils.getMemoryUsageTitle(usedMemory);
 
   const cpuDelta = containerStats.cpu_stats.cpu_usage.total_usage - containerStats.precpu_stats.cpu_usage.total_usage;
   const systemCpuDelta =
@@ -65,8 +41,7 @@ async function updateStatistics(containerStats: ContainerStatsInfo) {
   const numberCpus =
     containerStats.cpu_stats.online_cpus || containerStats.cpu_stats.cpu_usage?.percpu_usage?.length || 1.0;
   cpuUsagePercentage = (cpuDelta / systemCpuDelta) * numberCpus * 100.0;
-  cpuUsagePercentageTitle = `${cpuUsagePercentage.toFixed(2)}% of ${numberCpus}CPUs`;
-  cpuUsageTitle = `${cpuUsagePercentage.toFixed(2)}%`;
+  cpuUsage = cpuUsagePercentage.toFixed(1) + '%';
 }
 
 onMount(async () => {
@@ -88,44 +63,8 @@ onDestroy(async () => {
 </script>
 
 {#if container.state === 'RUNNING'}
-  <div class="mt-2 px-1 mx-2 border border-zinc-700 w-[240px] flex flex-row">
-    <svg class="mr-1 text-zinc-400" width="70px" height="40px">
-      <g class="bars">
-        <text text-anchor="end" x="63" y="16" font-size="12px" fill="currentColor">MEMORY </text>
-        <text text-anchor="end" x="63" y="34" font-size="12px" fill="currentColor">CPU</text>
-      </g>
-    </svg>
-    <svg width="100px" height="40px">
-      <g class="bars">
-        <rect fill="currentColor" width="100%" x="0" y="5" height="12"><title>{memoryUsagePercentageTitle}</title></rect
-        >;
-        {#if memoryUsagePercentage >= 0}
-          <rect fill="{memoryColor}" width="{memoryUsagePercentage}%" x="0" y="5" height="12"
-            ><title>{memoryUsagePercentageTitle}</title></rect>
-        {/if}
-        <rect fill="currentColor" width="100%" x="0" y="23" height="12"><title>{cpuUsagePercentageTitle}</title></rect>;
-
-        {#if cpuUsagePercentage >= 0}
-          <rect fill="{cpuColor}" width="{cpuUsagePercentage}%" x="0" y="23" height="12"
-            ><title>{cpuUsagePercentageTitle}</title></rect>
-        {/if}
-        {#if memoryUsagePercentage === -1}
-          <rect fill="#888" width="100%" x="0" y="5" height="12"></rect>;
-          <text text-anchor="end" x="90" y="14" font-size="8px" fill="#DDD">Initializing... </text>
-          <rect fill="#888" width="100%" x="0" y="23" height="12"></rect>;
-          <text text-anchor="end" x="90" y="32" font-size="8px" fill="#DDD">Initializing... </text>
-        {/if}
-      </g>
-    </svg>
-    <svg class="mr-1 text-zinc-400" width="80px" height="40px">
-      <g class="bars">
-        {#if memoryUsageTitle}
-          <text text-anchor="start" x="2" y="16" font-size="12px" fill="currentColor">{memoryUsageTitle} </text>
-        {/if}
-        {#if cpuUsageTitle}
-          <text text-anchor="start" x="2" y="34" font-size="12px" fill="currentColor">{cpuUsageTitle}</text>
-        {/if}
-      </g>
-    </svg>
+  <div class="flex flex-row gap-1">
+    <Donut title="vCPUs" size="{45}" value="{cpuUsage}" percent="{cpuUsagePercentage}" />
+    <Donut title="MEM" size="{45}" value="{memoryUsage}" percent="{memoryUsagePercentage}" />
   </div>
 {/if}
diff --git a/packages/renderer/src/lib/donut/Donut.svelte b/packages/renderer/src/lib/donut/Donut.svelte
index ef512617f08..66fd0fab7aa 100644
--- a/packages/renderer/src/lib/donut/Donut.svelte
+++ b/packages/renderer/src/lib/donut/Donut.svelte
@@ -26,7 +26,7 @@ $: stroke = percent < 0 ? '' : percent < 50 ? 'stroke-green-500' : percent < 75
 $: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : '';
 </script>
 
-<Tooltip tip="{tooltip}" right>
+<Tooltip tip="{tooltip}" bottom>
   <svg viewBox="-4 -4 {size + 8} {size + 8}" height="{size}" width="{size}">
     <circle fill="none" class="stroke-charcoal-300" stroke-width="1" r="{size / 2}" cx="{size / 2}" cy="{size / 2}"
     ></circle>
@@ -38,6 +38,6 @@ $: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : '';
       text-anchor="middle"
       font-size="{size / 4.5}"
       dominant-baseline="central"
-      class="fill-gray-400">{value}</text>
+      class="fill-gray-400">{value || ''}</text>
   </svg>
 </Tooltip>