diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
index 868dbc0484..398815a6ae 100644
--- a/packages/frontend/src/widgets/server-metric/pie.vue
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -1,11 +1,12 @@
 <template>
-<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
+<svg :class="$style.root" viewBox="0 0 1 1" preserveAspectRatio="none">
 	<circle
 		:r="r"
 		cx="50%" cy="50%"
 		fill="none"
 		stroke-width="0.1"
 		stroke="rgba(0, 0, 0, 0.05)"
+		:class="$style.circle"
 	/>
 	<circle
 		:r="r"
@@ -16,7 +17,7 @@
 		stroke-width="0.1"
 		:stroke="color"
 	/>
-	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (value * 100).toFixed(0) }}%</text>
 </svg>
 </template>
 
@@ -33,20 +34,20 @@ const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
 </script>
 
-<style lang="scss" scoped>
-.hsalcinq {
+<style lang="scss" module>
+.root {
 	display: block;
 	height: 100%;
+}
 
-	> circle {
-		transform-origin: center;
-		transform: rotate(-90deg);
-		transition: stroke-dashoffset 0.5s ease;
-	}
+.circle {
+	transform-origin: center;
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.5s ease;
+}
 
-	> text {
-		font-size: 0.15px;
-		fill: currentColor;
-	}
+.text {
+	font-size: 0.15px;
+	fill: currentColor;
 }
 </style>