diff --git a/assets/components/ContainerTable.vue b/assets/components/ContainerTable.vue
index 2040ef7d..4814ea4d 100644
--- a/assets/components/ContainerTable.vue
+++ b/assets/components/ContainerTable.vue
@@ -79,22 +79,30 @@
             </td>
             <td v-if="isVisible('cpu')">
               <div class="flex flex-row items-center gap-1">
-                <progress
-                  class="progress progress-primary"
+                <meter
+                  class="flex-1 overflow-hidden rounded-3xl"
+                  min="0"
+                  max="100"
+                  low="40"
+                  optimum="0"
+                  high="70"
                   :value="Math.min(container.movingAverage.cpu, 100)"
-                  :max="100"
-                ></progress>
-                <span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
+                ></meter>
+                <span class="w-8 text-right text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
               </div>
             </td>
             <td v-if="isVisible('mem')">
               <div class="flex flex-row items-center gap-1">
-                <progress
-                  class="progress progress-primary"
-                  :value="container.movingAverage.memory"
+                <meter
+                  class="flex-1 overflow-hidden rounded-3xl"
+                  min="0"
                   max="100"
-                ></progress>
-                <span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
+                  low="40"
+                  optimum="0"
+                  high="70"
+                  :value="container.movingAverage.memory"
+                ></meter>
+                <span class="w-8 text-right text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
               </div>
             </td>
           </tr>
@@ -234,4 +242,21 @@ tbody td {
 a {
   @apply hover:text-primary;
 }
+
+meter::-webkit-meter-optimum-value {
+  background: var(--color-green);
+}
+
+meter::-webkit-meter-suboptimum-value {
+  background: var(--color-orange);
+}
+
+meter::-webkit-meter-even-less-good-value {
+  background: var(--color-red);
+}
+
+meter::-webkit-meter-bar {
+  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+  border-radius: 1rem;
+}
 </style>
diff --git a/assets/main.css b/assets/main.css
index 8ac4727f..b2b8d277 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -4,7 +4,7 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  --color-green: oklch(69% 0.119722 188.479048);
+  --color-green: oklch(0.62 0.119722 158.82);
   --color-red: oklch(64% 0.218 28.85);
   --color-purple: oklch(51.49% 0.215 321.03);
   --color-blue: oklch(65% 0.171 249.5);