diff --git a/src/__tests__/Shared/RepoCard.test.js b/src/__tests__/Shared/RepoCard.test.js
index 418c8351..9620c9e2 100644
--- a/src/__tests__/Shared/RepoCard.test.js
+++ b/src/__tests__/Shared/RepoCard.test.js
@@ -35,14 +35,9 @@ describe('Repo card component', () => {
         name={mockImage.name}
         version={mockImage.latestVersion}
         description={mockImage.description}
-        tags={mockImage.tags}
         vendor={mockImage.vendor}
-        size={mockImage.size}
-        licenses={mockImage.licenses}
         key={1}
-        data={mockImage}
         lastUpdated={mockImage.lastUpdated}
-        shown={true}
       />
     );
     const cardTitle = await screen.findByText('alpine');
diff --git a/src/__tests__/TagPage/DependsOn.test.js b/src/__tests__/TagPage/DependsOn.test.js
index 61ddfed2..6543e83f 100644
--- a/src/__tests__/TagPage/DependsOn.test.js
+++ b/src/__tests__/TagPage/DependsOn.test.js
@@ -51,7 +51,7 @@ describe('Dependencies tab', () => {
     // @ts-ignore
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockDependenciesList });
     render(<RouterDependsWrapper />);
-    expect(await screen.findAllByRole('link')).toHaveLength(4);
+    expect(await screen.findAllByText(/published/i)).toHaveLength(4);
   });
 
   it('renders no dependencies if there are not any', async () => {
diff --git a/src/__tests__/TagPage/IsDependentOn.test.js b/src/__tests__/TagPage/IsDependentOn.test.js
index b6f7a20a..cd6b1e55 100644
--- a/src/__tests__/TagPage/IsDependentOn.test.js
+++ b/src/__tests__/TagPage/IsDependentOn.test.js
@@ -51,7 +51,7 @@ describe('Dependents tab', () => {
     // @ts-ignore
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: mockDependentsList });
     render(<RouterDependsWrapper />);
-    expect(await screen.findAllByRole('link')).toHaveLength(4);
+    expect(await screen.findAllByText(/published/i)).toHaveLength(4);
   });
 
   it('renders no dependents if there are not any', async () => {
diff --git a/src/api.js b/src/api.js
index e21bc0b6..1355d983 100644
--- a/src/api.js
+++ b/src/api.js
@@ -74,8 +74,10 @@ const endpoints = {
     `/v2/_zot/ext/search?query={Image(image: "${name}"){History {Layer {Size Digest Score} HistoryDescription {Created CreatedBy Author Comment EmptyLayer} }}}`,
   imageListWithCVEFixed: (cveId, repoName) =>
     `/v2/_zot/ext/search?query={ImageListWithCVEFixed(id:"${cveId}", image:"${repoName}") {Tag}}`,
-  dependsOnForImage: (name) => `/v2/_zot/ext/search?query={BaseImageList(image: "${name}"){RepoName}}`,
-  isDependentOnForImage: (name) => `/v2/_zot/ext/search?query={DerivedImageList(image: "${name}"){RepoName}}`,
+  dependsOnForImage: (name) =>
+    `/v2/_zot/ext/search?query={BaseImageList(image: "${name}"){RepoName Tag Description Vendor LastUpdated Platform {Os Arch} IsSigned}}`,
+  isDependentOnForImage: (name) =>
+    `/v2/_zot/ext/search?query={DerivedImageList(image: "${name}"){RepoName Tag Description Vendor LastUpdated Platform {Os Arch} IsSigned}}`,
   globalSearch: ({ searchQuery = '""', pageNumber = 1, pageSize = 15, filter = {} }) => {
     const searchParam = searchQuery !== '' ? `query:"${searchQuery}"` : `query:""`;
     const paginationParam = `requestedPage: {limit:${pageSize} offset:${(pageNumber - 1) * pageSize}}`;
diff --git a/src/components/DependsOn.jsx b/src/components/DependsOn.jsx
index 75222ae9..59a6dee2 100644
--- a/src/components/DependsOn.jsx
+++ b/src/components/DependsOn.jsx
@@ -4,12 +4,11 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { api, endpoints } from '../api';
 
 // components
-import { Divider, Typography, Card, CardContent } from '@mui/material';
+import { Divider, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { Link } from 'react-router-dom';
 import { host } from '../host';
-import Monitor from '../assets/Monitor.png';
 import Loading from './Loading';
+import RepoCard from './RepoCard';
 
 const useStyles = makeStyles(() => ({
   card: {
@@ -95,22 +94,22 @@ function DependsOn(props) {
 
   const renderDependencies = () => {
     return images?.length ? (
-      <Card className={classes.card} raised>
-        <CardContent>
-          <Typography className={classes.content}>
-            {images.map((dependence, index) => {
-              return (
-                <Link key={index} className={classes.link} to={`/image/${encodeURIComponent(dependence.RepoName)}`}>
-                  {dependence.RepoName}
-                </Link>
-              );
-            })}
-          </Typography>
-        </CardContent>
-      </Card>
+      images.map((dependence, index) => {
+        return (
+          <RepoCard
+            name={dependence.RepoName}
+            version={dependence.Tag}
+            description={dependence.Description}
+            vendor={dependence.Vendor}
+            platforms={[dependence.Platform]}
+            isSigned={dependence.IsSigned}
+            key={index}
+            lastUpdated={dependence.LastUpdated}
+          />
+        );
+      })
     ) : (
       <div>
-        <img src={Monitor} alt="Monitor" className={classes.monitor}></img>
         <Typography className={classes.none}> Nothing found </Typography>
       </div>
     );
@@ -118,16 +117,6 @@ function DependsOn(props) {
 
   return (
     <div data-testid="depends-on-container">
-      <Typography
-        variant="h4"
-        gutterBottom
-        component="div"
-        align="left"
-        className={classes.title}
-        style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600', paddingTop: '0.5rem' }}
-      >
-        Depends On
-      </Typography>
       <Divider
         variant="fullWidth"
         sx={{ margin: '5% 0% 5% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }}
diff --git a/src/components/Explore.jsx b/src/components/Explore.jsx
index c2f6ad99..2fe76478 100644
--- a/src/components/Explore.jsx
+++ b/src/components/Explore.jsx
@@ -109,15 +109,10 @@ function Explore() {
             version={item.latestVersion}
             description={item.description}
             isSigned={item.isSigned}
-            tags={item.tags}
             vendor={item.vendor}
             platforms={item.platforms}
-            size={item.size}
-            licenses={item.licenses}
             key={index}
-            data={item}
             lastUpdated={item.lastUpdated}
-            shown={true}
           />
         );
       })
diff --git a/src/components/HistoryLayers.jsx b/src/components/HistoryLayers.jsx
index d03a4631..c6356de0 100644
--- a/src/components/HistoryLayers.jsx
+++ b/src/components/HistoryLayers.jsx
@@ -8,7 +8,6 @@ import { api, endpoints } from '../api';
 import { Card, CardContent, Divider, Grid, Stack, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { host } from '../host';
-import Monitor from '../assets/Monitor.png';
 import { isEmpty } from 'lodash';
 import Loading from './Loading';
 
@@ -210,7 +209,6 @@ function HistoryLayers(props) {
         </Card>
       ) : (
         <div>
-          <img src={Monitor} alt="Monitor" className={classes.monitor}></img>
           <Typography className={classes.none}> No Layers </Typography>
         </div>
       )}
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index eece18da..a4a3c133 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -120,7 +120,6 @@ function Home() {
   //           key={index}
   //           data={item}
   //           lastUpdated={item.lastUpdated}
-  //           shown={true}
   //         />
   //       );
   //     })
@@ -137,15 +136,10 @@ function Home() {
             version={item.latestVersion}
             description={item.description}
             isSigned={item.isSigned}
-            tags={item.tags}
             vendor={item.vendor}
             platforms={item.platforms}
-            size={item.size}
-            licenses={item.licenses}
             key={index}
-            data={item}
             lastUpdated={item.lastUpdated}
-            shown={true}
           />
         );
       })
diff --git a/src/components/IsDependentOn.jsx b/src/components/IsDependentOn.jsx
index 84041924..182f6e42 100644
--- a/src/components/IsDependentOn.jsx
+++ b/src/components/IsDependentOn.jsx
@@ -4,12 +4,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { api, endpoints } from '../api';
 
 // components
-import { Divider, Typography, Card, CardContent } from '@mui/material';
+import { Divider, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { Link } from 'react-router-dom';
 import { host } from '../host';
-import Monitor from '../assets/Monitor.png';
 import Loading from './Loading';
+import RepoCard from './RepoCard';
 
 const useStyles = makeStyles(() => ({
   card: {
@@ -95,22 +94,22 @@ function IsDependentOn(props) {
 
   const renderDependents = () => {
     return images?.length ? (
-      <Card className={classes.card} raised>
-        <CardContent>
-          <Typography className={classes.content}>
-            {images.map((dependence, index) => {
-              return (
-                <Link key={index} to={`/image/${encodeURIComponent(dependence.RepoName)}`} className={classes.link}>
-                  {dependence.RepoName}
-                </Link>
-              );
-            })}
-          </Typography>
-        </CardContent>
-      </Card>
+      images.map((dependence, index) => {
+        return (
+          <RepoCard
+            name={dependence.RepoName}
+            version={dependence.Tag}
+            description={dependence.Description}
+            vendor={dependence.Vendor}
+            isSigned={dependence.IsSigned}
+            platforms={[dependence.Platform]}
+            key={index}
+            lastUpdated={dependence.LastUpdated}
+          />
+        );
+      })
     ) : (
       <div>
-        <img src={Monitor} alt="Monitor" className={classes.monitor}></img>
         <Typography className={classes.none}> Nothing found </Typography>
       </div>
     );
@@ -118,16 +117,6 @@ function IsDependentOn(props) {
 
   return (
     <div>
-      <Typography
-        variant="h4"
-        gutterBottom
-        component="div"
-        align="left"
-        className={classes.title}
-        style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600', paddingTop: '0.5rem' }}
-      >
-        Is Dependent On
-      </Typography>
       <Divider
         variant="fullWidth"
         sx={{ margin: '5% 0% 5% 0%', background: 'rgba(0, 0, 0, 0.38)', height: '0.00625rem', width: '100%' }}
diff --git a/src/components/RepoDetailsMetadata.jsx b/src/components/RepoDetailsMetadata.jsx
index 6f938d3b..cce2fa0e 100644
--- a/src/components/RepoDetailsMetadata.jsx
+++ b/src/components/RepoDetailsMetadata.jsx
@@ -61,7 +61,7 @@ function RepoDetailsMetadata(props) {
               Total downloads
             </Typography>
             <Typography variant="body1" align="left" className={classes.metadataBody}>
-              {totalDownloads || `not available`}
+              {!isNaN(totalDownloads) ? totalDownloads : `not available`}
             </Typography>
           </CardContent>
         </Card>
diff --git a/src/components/VulnerabilitiesDetails.jsx b/src/components/VulnerabilitiesDetails.jsx
index b2444383..27aaf89c 100644
--- a/src/components/VulnerabilitiesDetails.jsx
+++ b/src/components/VulnerabilitiesDetails.jsx
@@ -10,7 +10,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import { host } from '../host';
 import PestControlOutlinedIcon from '@mui/icons-material/PestControlOutlined';
 import PestControlIcon from '@mui/icons-material/PestControl';
-import Monitor from '../assets/Monitor.png';
 import { isEmpty } from 'lodash';
 import { Link } from 'react-router-dom';
 import Loading from './Loading';
@@ -291,7 +290,6 @@ function VulnerabilitiesDetails(props) {
     } else {
       return (
         <div>
-          <img src={Monitor} alt="Monitor" className={classes.monitor}></img>
           <Typography className={classes.none}> No Vulnerabilities </Typography>{' '}
         </div>
       );