diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js
index 7e079340f82f5c0f9f021ca6f5c3a44df145433b..ecc874924496c42fa42e036e16606bfca90c65d4 100644
--- a/src/api/SwaggerApi.js
+++ b/src/api/SwaggerApi.js
@@ -901,30 +901,6 @@ export function useIocStatus() {
 //   return useAsync({ fcn: boundMethod});
 // }
 
-export function unpackStatistics(statistics) {
-  return { ...statistics };
-}
-
-export function useIocStatistics() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    api.apis.Statistics.iocNumberStatistics,
-    unpackStatistics
-  );
-
-  return useAsync({ fcn: method, call: false });
-}
-
-export function useHostStatistics() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    api.apis.Statistics.hostNumberStatistics,
-    unpackStatistics
-  );
-
-  return useAsync({ fcn: method, call: false });
-}
-
 export function unpackNaming(naming) {
   return { ...naming };
 }
@@ -1148,3 +1124,20 @@ export function useOwnIocsWithAlarms() {
 
   return useAsync({ fcn: method, call: true, init: [] });
 }
+
+export function unpackStatistics(statistics) {
+  return { ...statistics };
+}
+
+export function useStatistics(statisticsType) {
+  const api = useContext(apiContext);
+  const method = useCallAndUnpack(
+    () =>
+      api.apis.Statistics.calculateStatistics({
+        statistics_type: statisticsType
+      }),
+    unpackStatistics
+  );
+
+  return useAsync({ fcn: method, call: true });
+}
diff --git a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js b/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
index 948928be647584222bb4842d44e0bded6dbe2efa..37e29fc35beddc85d3a9496dea6a639477246d15 100644
--- a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
+++ b/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
@@ -1,13 +1,24 @@
 import React from "react";
 import { CustomTable } from "../table/CustomTable";
+import { Skeleton } from "primereact/skeleton";
 
 export function PrimeKeyValueTable(
   { obj, labels = ["Key", "Value"] },
   valueWidth = "15ch"
 ) {
+  const bodyTemplate = (rowData) => {
+    return rowData.value ?? <Skeleton />;
+  };
+
   const defaultColumns = [
     { id: "key", label: labels[0] },
-    { id: "value", label: labels[1], width: valueWidth }
+    {
+      id: "value",
+      label: labels[1],
+      width: valueWidth,
+      body: bodyTemplate,
+      textAlign: "right"
+    }
   ];
 
   // even though they are unused, we have to give the
diff --git a/src/components/statistics/HostStatistics/HostStatistics.js b/src/components/statistics/HostStatistics/HostStatistics.js
index f301627df43a395e8eb0711c79026bfb22b27a99..3d7feb50808c68556c59c4e97cd654862779c272 100644
--- a/src/components/statistics/HostStatistics/HostStatistics.js
+++ b/src/components/statistics/HostStatistics/HostStatistics.js
@@ -1,33 +1,38 @@
 import React from "react";
-import { useEffect } from "react";
-import { LinearProgress } from "@material-ui/core";
 import { PrimeKeyValueTable } from "../../common/PrimeKeyValueTable/PrimeKeyValueTable";
-import { useHostStatistics } from "../../../api/SwaggerApi";
+import { useStatistics } from "../../../api/SwaggerApi";
 
 export function HostStatistics() {
-  const [statistics, getStatistics] = useHostStatistics();
+  const [hostsRegistered] = useStatistics("HOSTS_REGISTERED");
+  const [hostsWithIocs] = useStatistics("HOSTS_WITH_IOCS");
+  const [hostsReachable] = useStatistics("HOSTS_REACHABLE");
+  const [hostsWithoutIssues] = useStatistics("HOSTS_WITHOUT_ISSUE");
 
-  let hostStats = {};
+  let hostStats = {
+    "Registered IOC-hosts": hostsRegistered?.value,
+    "IOC-hosts with IOCs": hostsWithIocs?.value,
+    "Reachable IOC-hosts with IOCs": hostsReachable?.value,
+    "Issue free IOC-hosts with IOCs": hostsWithoutIssues?.value
+  };
 
-  useEffect(() => getStatistics(), [getStatistics]);
-
-  if (statistics) {
+  if (
+    hostsRegistered ||
+    hostsWithIocs ||
+    hostsReachable ||
+    hostsWithoutIssues
+  ) {
     hostStats = {
-      "Registered IOC-hosts": statistics?.numOfIocHosts,
-      "IOC-hosts with IOCs": statistics?.numOfHostsWithIocs,
-      "Reachable IOC-hosts with IOCs": statistics?.numOfReachableHostsWithIocs,
-      "Issue free IOC-hosts with IOCs": statistics?.numOfIssueFreeHostsWithIocs
+      "Registered IOC-hosts": hostsRegistered?.value,
+      "IOC-hosts with IOCs": hostsWithIocs?.value,
+      "Reachable IOC-hosts with IOCs": hostsReachable?.value,
+      "Issue free IOC-hosts with IOCs": hostsWithoutIssues?.value
     };
   }
 
-  return statistics ? (
+  return (
     <PrimeKeyValueTable
       obj={hostStats}
       labels={["Host statistics"]}
     />
-  ) : (
-    <div style={{ width: "100%" }}>
-      <LinearProgress color="primary" />
-    </div>
   );
 }
diff --git a/src/components/statistics/IOCStatistics/IOCStatistics.js b/src/components/statistics/IOCStatistics/IOCStatistics.js
index 7e5144e91eaf93410ea4f3b589aba9389ad92d7c..4db408c5c0c54e72706019b348610f999bdfc62c 100644
--- a/src/components/statistics/IOCStatistics/IOCStatistics.js
+++ b/src/components/statistics/IOCStatistics/IOCStatistics.js
@@ -1,33 +1,33 @@
 import React from "react";
-import { useEffect } from "react";
-import { LinearProgress } from "@material-ui/core";
 import { PrimeKeyValueTable } from "../../common/PrimeKeyValueTable/PrimeKeyValueTable";
-import { useIocStatistics } from "../../../api/SwaggerApi";
+import { useStatistics } from "../../../api/SwaggerApi";
 
 export function IOCStatistics() {
-  const [statistics, getStatistics] = useIocStatistics();
+  const [iocsRegistered] = useStatistics("IOCS_REGISTERED");
+  const [iocsDeployed] = useStatistics("IOCS_DEPLOYED");
+  const [iocsReachable] = useStatistics("IOCS_RUNNING");
+  const [iocsWithoutIssues] = useStatistics("IOCS_RUNNING_WITHOUT_ISSUE");
 
-  let iocStats = {};
+  let iocStats = {
+    "Registered IOCs": iocsRegistered?.value,
+    "Deployed IOCs": iocsDeployed?.value,
+    "Running IOCs": iocsReachable?.value,
+    "Issue-free and running IOCs": iocsWithoutIssues?.value
+  };
 
-  if (statistics) {
+  if (iocsRegistered || iocsDeployed || iocsReachable || iocsWithoutIssues) {
     iocStats = {
-      "Registered IOCs": statistics?.numOfRegisteredIocs,
-      "Deployed IOCs": statistics?.numOfDeployedIocs,
-      "Reachable IOCs": statistics?.numOfReachableIocs,
-      "Issue-free IOCs": statistics?.numOfIssueFreeIocs
+      "Registered IOCs": iocsRegistered?.value,
+      "Deployed IOCs": iocsDeployed?.value,
+      "Running IOCs": iocsReachable?.value,
+      "Issue-free and running IOCs": iocsWithoutIssues?.value
     };
   }
 
-  useEffect(() => getStatistics(), [getStatistics]);
-
-  return statistics ? (
+  return (
     <PrimeKeyValueTable
       obj={iocStats}
       labels={["IOC statistics"]}
     />
-  ) : (
-    <div style={{ width: "100%" }}>
-      <LinearProgress color="primary" />
-    </div>
   );
 }
diff --git a/src/views/statistics/StatisticsView.js b/src/views/statistics/StatisticsView.js
index f501c2dbf437514c10dfb4f37e92f0f85c5d38c9..1a92ef06117c88c9633c6048e78ac9b4d23e7942 100644
--- a/src/views/statistics/StatisticsView.js
+++ b/src/views/statistics/StatisticsView.js
@@ -35,7 +35,6 @@ export function StatisticsView() {
     <RootContainer>
       <Grid
         container
-        direction="column"
         spacing={theme.spacing(0.5)}
       >
         <Grid
@@ -47,14 +46,14 @@ export function StatisticsView() {
 
         <Grid
           item
-          xs={12}
+          xs={6}
         >
           <IOCStatistics />
         </Grid>
 
         <Grid
           item
-          xs={12}
+          xs={6}
         >
           <HostStatistics />
         </Grid>