diff --git a/launcher/src/backend/Monitoring.js b/launcher/src/backend/Monitoring.js
index 6537528bc..e24c15024 100755
--- a/launcher/src/backend/Monitoring.js
+++ b/launcher/src/backend/Monitoring.js
@@ -1710,6 +1710,7 @@ export class Monitoring {
     var storagesizes = result.stdout.trim().split("\n");
     storagesizes.forEach(function (val, index) {
       let svc = index in sshcommands ? sshcommands[index].svc : false;
+
       if (svc) {
         // Prometheus NE does not store data but using "/" as volume, see #1095
         // Likely not queried at all if defined in ignoreServices (see above)
@@ -1725,6 +1726,7 @@ export class Monitoring {
             .replace(/NodeExporter/gi, " ne")
             .toUpperCase(),
           storageValue: (!val || val < 1 ? "0 " : val.replace(/([a-z]+)/is, " $1")) + "B",
+          service: svc.service,
         });
       }
     });
diff --git a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
index a9ff7464b..2aec981c9 100644
--- a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
@@ -4,37 +4,69 @@
       <div class="volume-Ico-container flex justify-center items-center w-full h-4/5">
         <img class="w-3/4" src="/img/icon/control-page-icons/hdd.svg" />
       </div>
-      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">volume</span>
+      <span
+        class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase"
+        >volume</span
+      >
     </div>
     <div class="volume-box w-2/3 h-full flex flex-col justify-center items-center p-1">
-      <div class="volume_services p-1 gap-1 flex w-full h-2/3 border rounded-md border-gray-500 overflow-x-scroll">
+      <div
+        class="volume_services p-1 gap-1 flex w-full h-2/3 border rounded-md border-gray-500 overflow-x-scroll"
+      >
         <div
           v-for="item in storagestatus"
           :key="item.id"
           :class="getDynamicClass(item.percentage)"
-          class="squa flex-shrink-0 border border-gray-500 rounded-none flex items-center justify-center"
+          class="squa flex-shrink-0 border border-gray-500 rounded-none flex justify-center items-center"
         >
-          <img :src="item.icon" alt="icon" class="h-1/2 w-1/2" />
+          <!-- Display service icon -->
+          <img :src="item.icon" alt="Service Icon" class="w-4/5 h-4/5" />
         </div>
       </div>
       <div class="hdd-services w-full h-1/3 flex">
-        <div class="left-side w-3/5 h-full flex justify-center items-center text-[40%] text-green-500 uppercase">
+        <div
+          class="left-side w-3/5 h-full flex justify-center items-center text-[40%] text-green-500 uppercase"
+        >
           <span>{{ availDisk }} GB {{ $t("controlPage.free") }} </span
-          ><span class="text-gray-400"> / {{ totalDisk }} GB {{ $t("controlPage.total") }}</span>
+          ><span class="text-gray-400">
+            / {{ totalDisk }} GB {{ $t("controlPage.total") }}</span
+          >
         </div>
         <div class="right-side w-2/5 h-full flex justify-center items-center uppercase">
           <div class="ttl-box w-1/4 h-full flex flex-col justify-center items-center">
-            <div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">write</div>
-            <div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">read</div>
+            <div
+              class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase"
+            >
+              write
+            </div>
+            <div
+              class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase"
+            >
+              read
+            </div>
           </div>
-          <div class="val-box w-3/4 h-full flex flex-col text-[60%] justify-center font-semibold items-center">
-            <div class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase">
+          <div
+            class="val-box w-3/4 h-full flex flex-col text-[60%] justify-center font-semibold items-center"
+          >
+            <div
+              class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase"
+            >
               {{ convertWriteValueToMb }}
-              {{ controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
+              {{
+                controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
+                  ? "KB"
+                  : "MB"
+              }}
             </div>
-            <div class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase">
+            <div
+              class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase"
+            >
               {{ convertReadValueToMb }}
-              {{ controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
+              {{
+                controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
+                  ? "KB"
+                  : "MB"
+              }}
             </div>
           </div>
         </div>
@@ -44,7 +76,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted } from "vue";
+import { computed } from "vue";
 import { useControlStore } from "@/store/theControl";
 import { useServices } from "@/store/services";
 
@@ -63,44 +95,22 @@ const storagestatus = computed(() => {
     }
 
     const percentage = (valueInGB / totalDisk.value) * 100;
+
+    const matchingService = serviceStore.installedServices.find(
+      (service) => service.service === item.service
+    );
+    const serviceIcon = matchingService
+      ? matchingService.icon
+      : "/path/to/default/icon.png";
+
     return {
       ...item,
       percentage: parseFloat(percentage.toFixed(2)),
-      icon: "", // Placeholder for the icon we'll assign later
+      icon: serviceIcon,
     };
   });
 });
 
-// Function to add icons for Validators (VC) and Notifications
-const addIconsToStorageStatus = () => {
-  storagestatus.value.forEach((statusItem) => {
-    if (statusItem.title.toLowerCase() === "vc") {
-      // Assign the icon for Validators
-      statusItem.icon = "/img/Nimbus-Validator-Circle.851cf9fc.png"; // Replace with actual icon path for Validators
-    } else if (statusItem.title.toLowerCase() === "notifications") {
-      // Assign the icon for Notifications
-      statusItem.icon = "/img/icon/service-icons/Other/NotifierService.svg"; // Replace with actual icon path for Notifications
-    } else {
-      // Find matching service from installedServices
-      const matchingService = serviceStore.installedServices.find(
-        (service) => service.name.toLowerCase() === statusItem.title.toLowerCase()
-      );
-
-      if (matchingService) {
-        // Add the icon to the storage status
-        statusItem.icon = matchingService.icon || matchingService.sIcon || "";
-      }
-    }
-  });
-};
-
-console.log(storagestatus.value);
-
-// Call the function when the component is mounted
-onMounted(() => {
-  addIconsToStorageStatus();
-});
-
 const availDisk = computed(() => controlStore.availDisk);
 
 const writeValue = computed(() => controlStore.writeValue);
@@ -110,9 +120,9 @@ const readValue = computed(() => controlStore.readValue);
 const getDynamicClass = (percentage) => {
   if (percentage < 10) {
     return "w-[10%] h-[30%]";
-  } else if (percentage < 30) {
+  } else if (percentage < 25) {
     return "w-[20%] h-[50%]";
-  } else if (percentage < 50) {
+  } else if (percentage < 40) {
     return "w-[30%] h-[70%]";
   } else if (percentage < 75) {
     return "w-[40%] h-[90%]";