diff --git a/src/lib/Droparea.svelte b/src/lib/Droparea.svelte
index 1b2e31f..a959b73 100644
--- a/src/lib/Droparea.svelte
+++ b/src/lib/Droparea.svelte
@@ -10,6 +10,7 @@
 <script lang="ts">
   import { appStore } from "$lib/store";
   import { convertToDocModel } from "$lib/docmodel/docmodel";
+  import { generateProductVulnerabilities } from "./productvulnerabilities/productvulnerabilities";
 
   let hover: boolean = false;
   let valid: boolean | null = null;
@@ -44,8 +45,9 @@
 					   	DocModel.
 					*/
         }
-        const result = convertToDocModel(jsonDocument);
-        appStore.setDocument(result);
+        let docModel = convertToDocModel(jsonDocument);
+        docModel.vulnerabilities = generateProductVulnerabilities(jsonDocument);
+        appStore.setDocument(docModel);
       }
     };
     fileReader.readAsText(csafFile);
diff --git a/src/lib/ProductVulnerabilities.svelte b/src/lib/ProductVulnerabilities.svelte
index d01ae5c..91e835d 100644
--- a/src/lib/ProductVulnerabilities.svelte
+++ b/src/lib/ProductVulnerabilities.svelte
@@ -10,10 +10,85 @@
 
 <script lang="ts">
   import { appStore } from "$lib/store";
+  let headerColumns: any = [];
+  let productLines: string[][];
+  $: if ($appStore.doc) {
+    const vulnerabilities = [...$appStore.doc.vulnerabilities];
+    headerColumns = vulnerabilities.shift();
+    productLines = vulnerabilities;
+  }
 </script>
 
 {#if $appStore.doc}
   <div>
     <h2>Vulnerabilities overview</h2>
+    {#if productLines.length > 0}
+      <table class="striped">
+        <thead>
+          <tr>
+            {#each headerColumns as column, index}
+              <th>{column}</th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody>
+          {#each productLines as line, index}
+            <tr>
+              {#each line as column, index}
+                {#if index < 1}
+                  <td>{column}</td>
+                {:else if column === "N.A"}
+                  <td>{column}</td>
+                {:else}
+                  <td
+                    ><i
+                      class:bx={true}
+                      class:bx-x={column === "K"}
+                      class:bx-check={column === "F"}
+                      class:bx-error={column === "U"}
+                      class:bx-minus={column === "N"}
+                      class:bx-heart={column === "R"}
+                    /></td
+                  >
+                {/if}
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+      <div class="legend">
+        <h6>Legend</h6>
+        <dl>
+          <dt><i class="bx bx-check" /></dt>
+          <dd>Fixed</dd>
+          <dt><i class="bx bx-error" /></dt>
+          <dd>Under investigation</dd>
+          <dt><i class="bx bx-x" /></dt>
+          <dd>Known affected</dd>
+          <dt><i class="bx bx-minus" /></dt>
+          <dd>Not affected</dd>
+          <dt><i class="bx bx-heart" /></dt>
+          <dd>Recommended</dd>
+        </dl>
+      </div>
+    {/if}
   </div>
 {/if}
+
+<style>
+  tr {
+    line-height: 2rem;
+  }
+  .legend {
+    margin-top: 2rem;
+  }
+  dt {
+    font-size: large;
+    float: left;
+    clear: left;
+    width: 1rem;
+  }
+  dd {
+    margin-bottom: 0.3em;
+  }
+</style>
diff --git a/src/lib/docmodel/docmodel.ts b/src/lib/docmodel/docmodel.ts
index cfe63e4..6495e53 100644
--- a/src/lib/docmodel/docmodel.ts
+++ b/src/lib/docmodel/docmodel.ts
@@ -98,6 +98,7 @@ const convertToDocModel = (csafDoc: any): DocModel => {
     status: getStatus(csafDoc),
     published: getPublished(csafDoc),
     lastUpdate: getLastUpdate(csafDoc),
+    vulnerabilities: [],
     isDocPresent: checkDocumentPresent(csafDoc),
     isTrackingPresent: checkTrackingPresent(csafDoc),
     isDistributionPresent: checkDistributionPresent(csafDoc),
diff --git a/src/lib/docmodel/docmodeltypes.ts b/src/lib/docmodel/docmodeltypes.ts
index dcc330a..69f8760 100644
--- a/src/lib/docmodel/docmodeltypes.ts
+++ b/src/lib/docmodel/docmodeltypes.ts
@@ -50,6 +50,7 @@ export type DocModel = {
   status: string;
   published: string;
   lastUpdate: string;
+  vulnerabilities: Array<Array<string>>;
   isDocPresent: boolean;
   isTrackingPresent: boolean;
   isDistributionPresent: boolean;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 646f7b7..f269815 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -45,7 +45,7 @@
   <!-- svelte-ignore a11y-no-redundant-roles -->
   <div class="header">
     <h1 role="heading" class="text-center">CSAF Webview+</h1>
-    <button class="switchbutton" on:click={switchView}>{mode}</button>
+    <button class="switchbutton button" on:click={switchView}>{mode}</button>
     <h4>v. {version}</h4>
   </div>
   {#if noRef && mode === MODE.SINGLE}