diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index 78032cb6e..f7c7bd593 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -4,6 +4,7 @@
 			v-tooltip="i18n.ts.meiliIndexCount"
 			class="pie"
 			:value="progress"
+			:reverse="true"
 		/>
 		<div>
 			<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 9edbfc94e..3c28a9823 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -29,11 +29,17 @@ import {} from "vue";
 
 const props = defineProps<{
 	value: number;
+	reverse?: boolean;
 }>();
 
 const r = 0.45;
 
-const color = $computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`);
+const color = $computed(
+	() =>
+		`hsl(${
+			props.reverse ? 180 + props.value * 180 : 180 - props.value * 180
+		}, 80%, 70%)`
+);
 const strokeDashoffset = $computed(
 	() => (1 - props.value) * (Math.PI * (r * 2))
 );