diff --git a/assets/styles.css b/assets/styles.css
index 99450d4b7..872829a24 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -167,9 +167,9 @@ body {
 }
 
 .chart-container {
-  /* margin-left: 200px; */
-  height: 200px;
-  width: 200px;
+  width: 300px;
+  border: 1px solid #052e41c0;
+  border-radius: 10px 10px 0 0;
 }
 .dougnutChart {
   /* margin-left: 200px; */
@@ -177,13 +177,21 @@ body {
   width: 255px;
 }
 .allCharts {
-  margin-left: 100px;
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
-  width: 500px;
-  height: 600px;
+  width: 94%;
+  margin-top: 28px;
+  margin-left: 20px;
+  margin-right: 20px;
+  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+          box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+}
+.chart-number {
+    font-size: 2rem;
+    text-align: center;
 }
 .mainHeader {
   height: 80.88px;
@@ -192,27 +200,26 @@ body {
 .section {
   display: flex;
   flex-direction: row;
-
-  /* margin-right: 30px; */
   justify-content: space-evenly;
+  margin-bottom: 100px;
 }
 .block {
   margin-top: 50px;
 }
 
-.chart-title h1 {
-  color: #333d42a1;
+.chart-title{
   background: #052e41c0;
   font-family: "Signika", sans-serif;
   font-weight: 700;
-  font-size: 30px;
+  font-size: 22px;
   color: rgba(170, 175, 101, 0.897);
   text-align: center;
   line-height: 50px;
   border-radius: 10px 10px 0 0;
-  margin-bottom: 30px;
+  margin: 0;
 }
 
+
 #drag-file {
   width: 300px;
   background-color: white;
diff --git a/src/components/helper/parseContainerFormat.js b/src/components/helper/parseContainerFormat.js
index 0d0789269..7a878ed0b 100644
--- a/src/components/helper/parseContainerFormat.js
+++ b/src/components/helper/parseContainerFormat.js
@@ -62,21 +62,25 @@ const convertToMetricsArr = (array) => {
         let memory = array[i]['mp'].replace(/([%])+/g, '');
         memorySum += parseFloat(memory)
         let splittedNet = array[i]['net'].split('/');
-        
-        let netvalue = parseFloat(splittedNet[0].replace(/([A-z])+/g, ''));  
-        let netTotal = parseFloat(splittedNet[1].replace(/([A-z])+/g, ''));
+        let netvalue = parseFloat(splittedNet[0].replace(/([A-z])+/g, ''));
+        let netTotal;
+        if(splittedNet[1].slice(-2) === 'kB'){
+            netTotal = parseFloat(splittedNet[1].replace(/([A-z])+/g, ''));
+        } else {
+            netTotal = parseFloat(splittedNet[1].replace(/([A-z])+/g, '')) * 1000;
+        }  
         netArray[0] += netvalue;
         netArray[1] += netTotal;
-
         let splittedBlock = array[i]['block'].split('/');
         let blockValue = parseFloat(splittedBlock[0].replace(/([A-z])+/g, ''));
         let blockTotal = parseFloat(splittedBlock[1].replace(/([A-z])+/g, ''));
         blockArray[0] += blockValue;
         blockArray[1] += blockTotal;
 
-    }    
+    }
     newArr.push(parseFloat(cpuSum.toFixed(2)));
     newArr.push(parseFloat(memorySum.toFixed(2)));
+    netArray = [netArray[0].toFixed(2), netArray[1].toFixed(2)];
     newArr.push(netArray);
     newArr.push(blockArray);
 
diff --git a/src/components/tabs/Metrics.js b/src/components/tabs/Metrics.js
index 9e42300ef..7abe39389 100644
--- a/src/components/tabs/Metrics.js
+++ b/src/components/tabs/Metrics.js
@@ -6,57 +6,32 @@ import { Pie, Doughnut, Bar } from "react-chartjs-2";
 
 const Metrics = (props) => {
   const runningList = useSelector((state) => state.lists.runningList);
+  console.log("runningList", runningList);
   let result = convertToMetricsArr(runningList);
   let differnce = 100 - result[0];
   let differnce2 = 100 - result[1];
-  let differnce3 = result[2][0];
-  let differnce4 = result[3][0];
+  // let differnce3 = result[2][0];
+  // let differnce4 = result[3][0];
   const cpu = {
-    labels: ["Free", "Usage"],
+    labels: ["Available", "Usage"],
     datasets: [
       {
         label: "CPU",
-        backgroundColor: ["#B21F00", "#C9DE00"],
-        hoverBackgroundColor: ["#501800", "#4B5000"],
-        data: [result[0], differnce],
+        backgroundColor: ["#C9DE00", "#B21F00"],
+        hoverBackgroundColor: ["#4B5000", "#501800"],
+        data: [differnce, result[0]],
       },
     ],
   };
 
   const memory = {
-    labels: ["Free", "Usuage"],
+    labels: ["Available", "Usuage"],
     datasets: [
       {
         label: "Memory",
-        backgroundColor: ["#B21F00", "#C9DE00"],
-        hoverBackgroundColor: ["#501800", "#4B5000"],
-        data: [result[1], differnce2],
-      },
-    ],
-  };
-
-  const netIO = {
-    labels: ["Bytes"],
-    datasets: [
-      {
-        label: "Net I/O",
-        backgroundColor: "rgba(75,192,192,1)",
-        borderColor: "rgba(0,0,0,1",
-        borderWidth: 2,
-        data: [differnce3],
-      },
-    ],
-  };
-
-  const blockIO = {
-    labels: ["Bytes"],
-    datasets: [
-      {
-        label: "Block IO",
-        backgroundColor: "rgba(75,192,192,1)",
-        borderColor: "rgba(0,0,0,1",
-        borderWidth: 2,
-        data: [differnce4],
+        backgroundColor: ["#C9DE00", "#B21F00"],
+        hoverBackgroundColor: ["#4B5000", "#501800"],
+        data: [differnce2, result[1]],
       },
     ],
   };
@@ -78,8 +53,8 @@ const Metrics = (props) => {
                   fontSize: 23,
                 },
                 legend: { display: true, position: "right" },
-                // responsive: true,
-                // maintainAspectRatio: false,
+                responsive: true,
+                maintainAspectRatio: false,  
               }}
             />
           </div>
@@ -88,6 +63,8 @@ const Metrics = (props) => {
             <Doughnut
               data={memory}
               options={{
+                responsive: true,
+                maintainAspectRatio: false, 
                 title: { display: true, text: "MEMORY", fontSize: 23 },
                 legend: { display: true, position: "right" },
                 plugins: {
@@ -115,13 +92,13 @@ const Metrics = (props) => {
         <div className="section">
           <div className="chart-container">
             <h1 className="chart-title">NET IO:</h1>
-            <p>
-              {result[2][0]}kB / {result[2][1]}B
+            <p className="chart-number">
+              {result[2][0]}kB / {result[2][1]}kB
             </p>
           </div>
           <div className="chart-container">
             <h1 className="chart-title">BLOCK IO:</h1>
-            <p>
+            <p className="chart-number">
               {result[3][0]}B / {result[3][1]}B
             </p>
           </div>