diff --git a/doc/metergroup/MinMaxDoc.vue b/doc/metergroup/MinMaxDoc.vue
index 31f057824..acd1c6947 100644
--- a/doc/metergroup/MinMaxDoc.vue
+++ b/doc/metergroup/MinMaxDoc.vue
@@ -3,7 +3,7 @@
         <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
     </DocSectionText>
     <div class="card">
-        <MeterGroup :value="value" :min="-50" :max="50" />
+        <MeterGroup :value="value" :max="120" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +12,20 @@
 export default {
     data() {
         return {
-            value: [{ label: 'Space used', value: 15, color: '#FDBB74' }],
+            value: [
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+            ],
             code: {
                 basic: `
-<MeterGroup :value="value" :min="-50" :max="50" />
+<MeterGroup :value="value" :max="120"  />
 `,
                 options: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" :min="-50" :max="50" />
+        <MeterGroup :value="value" :max="120"  />
     </div>
 </template>
 
@@ -28,7 +33,12 @@ export default {
 export default {
     data() {
         return {
-            value: [{ label: 'Space used', value: 15 }],
+            value: [
+                { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+                { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+                { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+                { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+            ],
         };
     }
 };
@@ -37,14 +47,19 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MeterGroup :value="value" :min="-50" :max="50" />
+        <MeterGroup :value="value" :max="120"  />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value = ref([{ label: 'Space used', value: 15 }]);
+const value = ref([
+    { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
+    { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
+    { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
+    { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
+]);
 <\/script>
 `
             }
diff --git a/doc/metergroup/TemplatingDoc.vue b/doc/metergroup/TemplatingDoc.vue
index 93c456eab..da645c86a 100644
--- a/doc/metergroup/TemplatingDoc.vue
+++ b/doc/metergroup/TemplatingDoc.vue
@@ -18,8 +18,9 @@
                 </div>
             </template>
             <template #start="{ totalPercent }">
-                <div class="flex mt-3 mb-2 justify-content-between">
-                    <span>Total spent: {{ totalPercent }}</span>
+                <div class="flex justify-content-between mt-3 mb-2">
+                    <span>Account </span>
+                    <span :style="{ 'margin-left': totalPercent }" class="absolute">{{ totalPercent }}</span>
                     <span>Savings: 1000$ </span>
                 </div>
             </template>