diff --git a/src/assets/images/network.png b/src/assets/images/network.png
new file mode 100644
index 00000000..5956ff1e
Binary files /dev/null and b/src/assets/images/network.png differ
diff --git a/src/pages/ModelOfInterest/index.tsx b/src/pages/ModelOfInterest/index.tsx
index 0cffb952..670ba650 100644
--- a/src/pages/ModelOfInterest/index.tsx
+++ b/src/pages/ModelOfInterest/index.tsx
@@ -10,152 +10,94 @@ import MKTypography from "../../components/MKTypography";
 import { useState } from "react";
 import { verifyLink } from "../ShowModelDetails/AssessmentSummary";
 import { modelOfInterestData } from "../../dataStore";
-import Language from "../../examples/Charts/PieChart/Languages";
-import theme from "../../assets/theme";
-import { debug } from "console";
-import ThreeWayToggle from "../../examples/Button/ThreeWayToggle"
-function prepPieChartData(
-  setModelType: React.Dispatch<React.SetStateAction<never[]>>,
-  setRiskAnalysis: React.Dispatch<React.SetStateAction<never[]>>,
-  cache: any,
-  data: any
-) {
-  const modelTypePieData: any = [];
-  const modelTypeCount: any = {};
-  const riskAnalysisPieData: any = [];
-  const riskAnalysisCount: any = {};
-
-  data.forEach((item: any) => {
-    if (!modelTypeCount[item["type"]]) {
-      modelTypeCount[item["type"]] = 0;
-    }
-    modelTypeCount[item["type"]]++;
-
-    // Check for the existence of quality_control
-    if (item["quality_control"]) {
-      if (item["quality_control"].length === 0) {
-        // Handling for empty quality_control
-        if (!riskAnalysisCount["Unanalyzed"]) {
-          riskAnalysisCount["Unanalyzed"] = 0;
-        }
-        riskAnalysisCount["Unanalyzed"]++;
-      } else {
-        item["quality_control"].forEach((qc: string) => {
-          if (!riskAnalysisCount[qc]) {
-            riskAnalysisCount[qc] = 0;
-          }
-          riskAnalysisCount[qc]++;
-        });
-      }
-    }
-  });
-
-  for (let model of Object.keys(modelTypeCount)) {
-    modelTypePieData.push({ label: model, value: modelTypeCount[model] });
-  }
+import networkIcon from "../../assets/images/network.png"
+
+function statsTable(data: any) {
 
-  for (let risk of Object.keys(riskAnalysisCount)) {
-    riskAnalysisPieData.push({ label: risk, value: riskAnalysisCount[risk] });
+  if (!Array.isArray(data) || data.length === 0) {
+    return <div>No data available</div>; // Return a message if data is empty or not an array
   }
 
-  setModelType(modelTypePieData);
-  setRiskAnalysis(riskAnalysisPieData);
+  const modelCount = data.length;
+  const classicCount = data.filter((item: { type: string }) => item.type === "Classic").length;
+  const llmCount = data.filter((item: { type: string }) => item.type === "LLM").length;
+
+  const sastCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.includes("SAST")).length;
+  const fuzzCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.includes("Fuzz Test")).length;
+  const emptyAnalysisCount = data.filter((item: any) => Array.isArray(item.quality_control) && item.quality_control.length === 0).length;
+  return (
+    <MKBox >
+      <Grid container spacing={2} style={{ textAlign: "center", fontSize: "18px"}}>
+        <Grid item style={{ width: "20%" }}>
+          <Card style={{ height: "40px", display: "grid", placeItems: "center" }}>
+
+            Models: {modelCount}
+          </Card>
+        </Grid>
+
+        <Grid item style={{ width: "32%" }}>
+        <Card style={{ height: "40px", display: "grid", placeItems: "center" }}>
+            Classic Models: {classicCount} | LLMs: {llmCount}
+          </Card>
+        </Grid>
+        <Grid item style={{ width: "48%" }}>
+        <Card style={{ height: "40px", display: "grid", placeItems: "center" }}>
+            Risk Analysis: SAST = {sastCount} | Fuzz Test = {fuzzCount} | Unanalyzed = {emptyAnalysisCount}
+          </Card>
+        </Grid>
+      </Grid>
+    </MKBox>
+  );
 }
 
 
 
 function ModelOfInterest() {
-  const [report, setreport]: any = useState([]);
-  const [modelType, setModelType]: any = useState([]);
-  const [riskAnalysis, setRiskAnalysis]: any = useState([]);
+  const [report, setReport]: any = useState();
+  const [modelType, setModelType]: any = useState();
+  const [riskAnalysis, setRiskAnalysis]: any = useState();
   React.useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const fetchedReport = await verifyLink(modelOfInterestData, setreport);
-      } catch (error) {
-        // Handle error
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  React.useEffect(() => {
-    if (report.length > 0) {
-      prepPieChartData(setModelType, setRiskAnalysis, [], report);
-    }
-  }, [report, setModelType, setRiskAnalysis]);
+    verifyLink(modelOfInterestData, setReport);
 
-  const count = report.length;
+  }, []);
 
   return (
     <>
       <DefaultNavbar routes={routes} sticky />
-      <MKBox pt={14} sx={{ mx: { xs: 2, lg: 3 } }}>
-        <Grid container spacing={3}>
-          <Grid item style={{ width: "33.3%" }}>
-            <MKBox mb={3} style={{ height: "20%" }}>
-              <Card sx={{ height: "470%" }}>
-                {/* <MKBox> */}
-                <MKBox pt={1} pb={1} px={1}>
-                <MKTypography
-                  display="flex"
-                  justifyContent="center"
-                  alignItems="center"
-                  variant="h5"
-                  textTransform="capitalize"
-
-                >
-                  Model Count
-                </MKTypography>
-                <MKTypography
-                  display="flex"
-                  justifyContent="center"
-                  alignItems="center"
-                  variant="h5"
-                  textTransform="capitalize"
-                  style={{ fontSize: "120px", paddingTop: "12%" }}
-
-                >
-                  {count}
-                </MKTypography>
-                </MKBox>
-                {/* </MKBox> */}
-              </Card>
-            </MKBox>
-          </Grid>
-          <Grid item style={{ width: "33.3%" }}>
-            <MKBox mb={3}>
-              {/* Calling Language component for showing model type */}
-              <Language
-                title="Model Type"
-                chartData={modelType}
-                chartColors={[
-                  theme.palette.primary.main,
-                  theme.palette.info.main,
-                  theme.palette.warning.main,
-                  theme.palette.error.main,
-                ]}
-              />
-            </MKBox>
-          </Grid>
-          <Grid item style={{ width: "33.3%" }}>
-            <MKBox mb={3}>
-              <Language
-                title="Risk Analysis"
-                chartData={riskAnalysis}
-                chartColors={[
-                  theme.palette.primary.main,
-                  theme.palette.info.main,
-                  theme.palette.warning.main,
-                  theme.palette.error.main,
-                ]}
-              />
-            </MKBox>
-          </Grid>
-        </Grid>
+
+      <MKBox pt={11} sx={{ mx: { xs: 2, lg: 3 } }}>
+        <MKTypography
+          display="flex"
+          alignItems="left"
+          variant="h1"
+          color="black"
+          width="fit-content"
+        >
+          Models of Interest
+        </MKTypography>
+        <MKTypography
+          display="flex"
+          alignItems="left"
+          color="black"
+          paddingTop="2px"
+          fontSize="20px"
+          width="75%"
+          style={{ fontWeight: "lighter" }}
+          // fontWeight="lighter"
+        >
+          Gain visibility into vulnerabilities and security gaps within popular open source machine learning models. Empower your strategies for safer, more robust AI implementations. Navigate the Landscape of Open Source AI Risks. Delve into the strengths, weaknesses, and steps to fortify your models against potential threats in the ever-evolving realm of open source machine learning.
+        </MKTypography>
+      <img style={{ width: "150px", position: "absolute", right: "92px", top: "95px"}} src={networkIcon} />
+
+
+        <MKBox pt={6}>
+
+          {statsTable(report)}
+
+        </MKBox>
+
       </MKBox>
-      <MKBox pt={5} sx={{ mx: { xs: 2, lg: 3 } }}>
+      <MKBox pt={2} sx={{ mx: { xs: 2, lg: 3 } }}>
         <Grid container spacing={6}>
           <Grid item xs={12}>
             <Card>