diff --git a/src/components/Shared/VulnerabilityCard.jsx b/src/components/Shared/VulnerabilityCard.jsx
index 0ee3b7cd..ea3a0a69 100644
--- a/src/components/Shared/VulnerabilityCard.jsx
+++ b/src/components/Shared/VulnerabilityCard.jsx
@@ -66,13 +66,18 @@ const useStyles = makeStyles((theme) => ({
     cursor: 'pointer',
     textAlign: 'center'
   },
+  dropdownCVE: {
+    color: '#1479FF',
+    cursor: 'pointer'
+  },
   vulnerabilityCardDivider: {
     margin: '1rem 0'
   }
 }));
 function VulnerabilitiyCard(props) {
   const classes = useStyles();
-  const { cve, name, platform } = props;
+  const { cve, name, platform, expand } = props;
+  const [openCVE, setOpenCVE] = useState(expand);
   const [openDesc, setOpenDesc] = useState(false);
   const [openFixed, setOpenFixed] = useState(false);
   const [loadingFixed, setLoadingFixed] = useState(true);
@@ -122,6 +127,10 @@ function VulnerabilitiyCard(props) {
     };
   }, [openFixed, pageNumber]);
 
+  useEffect(() => {
+    setOpenCVE(expand);
+  }, [expand]);
+
   const loadMore = () => {
     if (loadingFixed || isEndOfList) return;
     setPageNumber((pageNumber) => pageNumber + 1);
@@ -166,49 +175,56 @@ function VulnerabilitiyCard(props) {
     <Card className={classes.card} raised>
       <CardContent className={classes.content}>
         <Stack direction="row" spacing="1.25rem">
+          {!openCVE ? (
+            <KeyboardArrowRight className={classes.dropdownCVE} onClick={() => setOpenCVE(!openCVE)} />
+          ) : (
+            <KeyboardArrowDown className={classes.dropdownCVE} onClick={() => setOpenCVE(!openCVE)} />
+          )}
           <Typography variant="body1" align="left" className={classes.cveId}>
             {cve.id}
           </Typography>
           <VulnerabilityChipCheck vulnerabilitySeverity={cve.severity} />
         </Stack>
-        <Typography variant="body1" align="left" className={classes.cveSummary}>
-          {cve.title}
-        </Typography>
-        <Divider className={classes.vulnerabilityCardDivider} />
-        <Stack className={classes.dropdown} onClick={() => setOpenFixed(!openFixed)}>
-          {!openFixed ? (
-            <KeyboardArrowRight className={classes.dropdownText} />
-          ) : (
-            <KeyboardArrowDown className={classes.dropdownText} />
-          )}
-          <Typography className={classes.dropdownText}>Fixed in</Typography>
-        </Stack>
-        <Collapse in={openFixed} timeout="auto" unmountOnExit>
-          <Box sx={{ width: '100%', padding: '0.5rem 0' }}>
-            {loadingFixed ? (
-              'Loading...'
+        <Collapse in={openCVE} timeout="auto" unmountOnExit>
+          <Typography variant="body1" align="left" className={classes.cveSummary}>
+            {cve.title}
+          </Typography>
+          <Divider className={classes.vulnerabilityCardDivider} />
+          <Stack className={classes.dropdown} onClick={() => setOpenFixed(!openFixed)}>
+            {!openFixed ? (
+              <KeyboardArrowRight className={classes.dropdownText} />
             ) : (
-              <Stack direction="row" sx={{ flexWrap: 'wrap' }}>
-                {renderFixedVer()}
-                {renderLoadMore()}
-              </Stack>
+              <KeyboardArrowDown className={classes.dropdownText} />
             )}
-          </Box>
-        </Collapse>
-        <Stack className={classes.dropdown} onClick={() => setOpenDesc(!openDesc)}>
-          {!openDesc ? (
-            <KeyboardArrowRight className={classes.dropdownText} />
-          ) : (
-            <KeyboardArrowDown className={classes.dropdownText} />
-          )}
-          <Typography className={classes.dropdownText}>Description</Typography>
-        </Stack>
-        <Collapse in={openDesc} timeout="auto" unmountOnExit>
-          <Box sx={{ padding: '0.5rem 0' }}>
-            <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
-              {cve.description}
-            </Typography>
-          </Box>
+            <Typography className={classes.dropdownText}>Fixed in</Typography>
+          </Stack>
+          <Collapse in={openFixed} timeout="auto" unmountOnExit>
+            <Box sx={{ width: '100%', padding: '0.5rem 0' }}>
+              {loadingFixed ? (
+                'Loading...'
+              ) : (
+                <Stack direction="row" sx={{ flexWrap: 'wrap' }}>
+                  {renderFixedVer()}
+                  {renderLoadMore()}
+                </Stack>
+              )}
+            </Box>
+          </Collapse>
+          <Stack className={classes.dropdown} onClick={() => setOpenDesc(!openDesc)}>
+            {!openDesc ? (
+              <KeyboardArrowRight className={classes.dropdownText} />
+            ) : (
+              <KeyboardArrowDown className={classes.dropdownText} />
+            )}
+            <Typography className={classes.dropdownText}>Description</Typography>
+          </Stack>
+          <Collapse in={openDesc} timeout="auto" unmountOnExit>
+            <Box sx={{ padding: '0.5rem 0' }}>
+              <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
+                {cve.description}
+              </Typography>
+            </Box>
+          </Collapse>
         </Collapse>
       </CardContent>
     </Card>
diff --git a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
index 1872f6a0..c94cc346 100644
--- a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
+++ b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
@@ -9,6 +9,7 @@ import {
   Stack,
   Typography,
   InputBase,
+  ToggleButton,
   Menu,
   MenuItem,
   Divider,
@@ -26,6 +27,8 @@ import DownloadIcon from '@mui/icons-material/Download';
 
 import * as XLSX from 'xlsx';
 import exportFromJSON from 'export-from-json';
+import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
+import ViewAgendaIcon from '@mui/icons-material/ViewAgenda';
 
 import VulnerabilitiyCard from '../../Shared/VulnerabilityCard';
 
@@ -71,6 +74,17 @@ const useStyles = makeStyles((theme) => ({
     border: '0.063rem solid #E7E7E7',
     borderRadius: '0.625rem'
   },
+  view: {
+    alignContent: 'right',
+    variant: 'outlined'
+  },
+  viewModes: {
+    position: 'relative',
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'right',
+    justifyContent: 'right'
+  },
   searchIcon: {
     color: '#52637A',
     paddingRight: '3%'
@@ -117,6 +131,8 @@ function VulnerabilitiesDetails(props) {
   const [anchorExport, setAnchorExport] = useState(null);
   const openExport = Boolean(anchorExport);
 
+  const [selectedViewMore, setSelectedViewMore] = useState(true);
+
   const getCVERequestName = () => {
     return digest !== '' ? `${name}@${digest}` : `${name}:${tag}`;
   };
@@ -263,7 +279,7 @@ function VulnerabilitiesDetails(props) {
   const renderCVEs = () => {
     return !isEmpty(cveData) ? (
       cveData.map((cve, index) => {
-        return <VulnerabilitiyCard key={index} cve={cve} name={name} platform={platform} />;
+        return <VulnerabilitiyCard key={index} cve={cve} name={name} platform={platform} expand={selectedViewMore} />;
       })
     ) : (
       <div>{!isLoading && <Typography className={classes.none}> No Vulnerabilities </Typography>}</div>
@@ -339,6 +355,28 @@ function VulnerabilitiesDetails(props) {
           <SearchIcon />
         </div>
       </Stack>
+      <Stack direction="row" spacing="1rem" className={classes.viewModes}>
+        <ToggleButton
+          value="viewLess"
+          title="Collapse list view"
+          size="small"
+          className={classes.view}
+          selected={!selectedViewMore}
+          onChange={() => setSelectedViewMore(false)}
+        >
+          <ViewHeadlineIcon />
+        </ToggleButton>
+        <ToggleButton
+          value="viewMore"
+          title="Expand list view"
+          size="small"
+          className={classes.view}
+          selected={selectedViewMore}
+          onChange={() => setSelectedViewMore(true)}
+        >
+          <ViewAgendaIcon />
+        </ToggleButton>
+      </Stack>
       {renderCVEs()}
       {renderListBottom()}
     </Stack>
diff --git a/tests/tag.spec.js b/tests/tag.spec.js
index bc18be72..381cce07 100644
--- a/tests/tag.spec.js
+++ b/tests/tag.spec.js
@@ -36,7 +36,7 @@ test.describe('Tag page test', () => {
     const tagWithVulnerabilities = getTagWithVulnerabilities();
     await page.goto(`${hosts.ui}/image/${tagWithVulnerabilities.title}/tag/${tagWithVulnerabilities.tag}`);
     await page.getByRole('tab', { name: 'Vulnerabilities' }).click();
-    await expect(page.getByTestId('vulnerability-container').locator('div').nth(1)).toBeVisible({ timeout: 100000 });
+    await expect(page.getByTestId('vulnerability-container').locator('div').nth(1)).toBeVisible({ timeout: 200000 });
     await expect(await page.getByText('CVE-').count()).toBeGreaterThan(0);
     await expect(await page.getByText('CVE-').count()).toBeLessThanOrEqual(pageSizes.EXPLORE);
   });