diff --git a/frontend/src/components/results/modal/DependenciesView.vue b/frontend/src/components/results/modal/DependenciesView.vue
index 6dcb1c0b5..96ba75086 100644
--- a/frontend/src/components/results/modal/DependenciesView.vue
+++ b/frontend/src/components/results/modal/DependenciesView.vue
@@ -6,7 +6,7 @@
       </h4>
       <div v-for="([asset, path], index) in dependsOn" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
-          <Connect24 style="margin-right:13px; scale: 1.1; fill: #4dbabf"/>
+          <Downstream24 style="margin-right:13px; scale: 1.1; fill: #05BE8D"/>
           <div>
             <div style="font-size: large;">
               {{ getName(asset) + "   —   " + getAssetType(asset) }}
@@ -36,7 +36,67 @@
       </h4>
       <div v-for="([asset, path], index) in provides" :key="index">
         <div style="display: flex; align-items: center; padding: 4px 10px;">
-          <Connect24 style="margin-right:13px; scale: 1.1; fill: #ae58d6"/>
+          <Upstream24 style="margin-right:13px; scale: 1.1; fill: #188A99"/>
+          <div>
+            <div style="font-size: large;">
+              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+            </div>
+            <div style="font-size: small" v-if="getBomRef(asset)">
+              BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>
+            </div>
+            <div style="font-size: small" v-if="getBomRef(asset)">
+              Source: <span class="compact-code">{{ path }}</span>
+            </div>
+          </div>
+          <cv-button
+            v-on:click="$emit('open-asset', asset)"
+            :icon="Launch24"
+            style="margin-left:auto;"
+            kind="ghost"
+          >
+            See details
+          </cv-button>
+        </div>
+      </div>
+    </div>
+
+    <div style="padding-bottom: 12px;">
+      <h4 class="title" v-if="isDependedOn.length > 0">
+        Is used by
+      </h4>
+      <div v-for="([asset, path], index) in isDependedOn" :key="index">
+        <div style="display: flex; align-items: center; padding: 4px 10px;">
+          <Upstream24 style="margin-right:13px; scale: 1.1; fill: #FFBA1A"/>
+          <div>
+            <div style="font-size: large;">
+              {{ getName(asset) + "   —   " + getAssetType(asset) }}
+            </div>
+            <div style="font-size: small" v-if="getBomRef(asset)">
+              BOM Reference: <span class="compact-code">{{ getBomRef(asset) }}</span>
+            </div>
+            <div style="font-size: small" v-if="getBomRef(asset)">
+              Source: <span class="compact-code">{{ path }}</span>
+            </div>
+          </div>
+          <cv-button
+            v-on:click="$emit('open-asset', asset)"
+            :icon="Launch24"
+            style="margin-left:auto;"
+            kind="ghost"
+          >
+            See details
+          </cv-button>
+        </div>
+      </div>
+    </div>
+
+    <div style="padding-bottom: 12px;">
+      <h4 class="title" v-if="isProvidedBy.length > 0">
+        Is provided by
+      </h4>
+      <div v-for="([asset, path], index) in isProvidedBy" :key="index">
+        <div style="display: flex; align-items: center; padding: 4px 10px;">
+          <Downstream24 style="margin-right:13px; scale: 1.1; fill: #FF488E"/>
           <div>
             <div style="font-size: large;">
               {{ getName(asset) + "   —   " + getAssetType(asset) }}
@@ -64,7 +124,7 @@
 
 <script>
 import { getDependencies, getTermFullName } from "@/helpers.js";
-import { Launch24, Connect24 } from "@carbon/icons-vue";
+import { Launch24, Downstream24, Upstream24 } from "@carbon/icons-vue";
 
 export default {
   name: "DependenciesView",
@@ -77,7 +137,8 @@ export default {
     };
   },
   components: {
-    Connect24,
+    Downstream24,
+    Upstream24
   },
   methods: {
     getDependencies,
@@ -117,8 +178,14 @@ export default {
     dependsOn() {
       return getDependencies(this.bomRef)["dependsComponentList"];
     },
+    isDependedOn() {
+      return getDependencies(this.bomRef)["isDependedOnComponentList"];
+    },
     provides() {
       return getDependencies(this.bomRef)["providesComponentList"];
+    },
+    isProvidedBy() {
+      return getDependencies(this.bomRef)["isProvidedByComponentList"];
     }
   }
 };
diff --git a/frontend/src/helpers/cbom.js b/frontend/src/helpers/cbom.js
index 2d75be826..ef11e0619 100644
--- a/frontend/src/helpers/cbom.js
+++ b/frontend/src/helpers/cbom.js
@@ -107,7 +107,9 @@ export function resolvePath(obj, path) {
 
 function setDependenciesMap(cbom) {
   const dependsMap = new Map();
+  const isDependedOnMap = new Map();
   const providesMap = new Map();
+  const isProvidedByMap = new Map();
   const detectionsMap = new Map(); /* bom-ref -> component */
 
   /* Dependencies defined at the top level */
@@ -124,6 +126,12 @@ function setDependenciesMap(cbom) {
             }
             // Add a pair [ref, path]
             dependsMap.get(bomRef).push([dependsOnRef, "dependencies.dependsOn"]);
+
+            if (!isDependedOnMap.has(dependsOnRef)) {
+              isDependedOnMap.set(dependsOnRef, []);
+            }
+            // Add a pair [ref, path]
+            isDependedOnMap.get(dependsOnRef).push([bomRef, "dependencies.dependsOn"]);
           }
         }
 
@@ -135,6 +143,12 @@ function setDependenciesMap(cbom) {
             }
             // Add a pair [ref, path]
             providesMap.get(bomRef).push([providesRef, "dependencies.provides"]);
+
+            if (!isProvidedByMap.has(providesRef)) {
+              isProvidedByMap.set(providesRef, []);
+            }
+            // Add a pair [ref, path]
+            isProvidedByMap.get(providesRef).push([bomRef, "dependencies.provides"]);
           }
         }
       }
@@ -174,24 +188,36 @@ function setDependenciesMap(cbom) {
             }
             // Add a pair [ref, path]
             dependsMap.get(bomRef).push([ref, path]);
+
+            if (!isDependedOnMap.has(ref)) {
+              isDependedOnMap.set(ref, []);
+            }
+            // Add a pair [ref, path]
+            isDependedOnMap.get(ref).push([bomRef, path]);
           }
         }
       }
     }
   }
 
-  model.dependencies = { dependsMap, providesMap, detectionsMap };
+  model.dependencies = { dependsMap, isDependedOnMap, providesMap, isProvidedByMap, detectionsMap };
 }
 
 export function getDependencies(bomRef) {
   const dependsMap = model.dependencies["dependsMap"];
+  const isDependedOnMap = model.dependencies["isDependedOnMap"];
   const providesMap = model.dependencies["providesMap"];
+  const isProvidedByMap = model.dependencies["isProvidedByMap"];
   const detectionsMap = model.dependencies["detectionsMap"];
   var dependsComponentList = [];
+  var isDependedOnComponentList = [];
   var providesComponentList = [];
+  var isProvidedByComponentList = [];
 
   const dependsRefPathList = dependsMap.get(bomRef) || [];
+  const isDependedOnRefPathList = isDependedOnMap.get(bomRef) || [];
   const providesRefPathList = providesMap.get(bomRef) || [];
+  const isProvidedByRefPathList = isProvidedByMap.get(bomRef) || [];
 
   for (const refPath of dependsRefPathList) {
     let ref = refPath[0]
@@ -201,6 +227,14 @@ export function getDependencies(bomRef) {
       dependsComponentList.push([detectionsMap.get(ref), path]);
     }
   }
+  for (const refPath of isDependedOnRefPathList) {
+    let ref = refPath[0]
+    let path = refPath[1]
+    if (detectionsMap.has(ref)) {
+      // Add a pair [component, path]
+      isDependedOnComponentList.push([detectionsMap.get(ref), path]);
+    }
+  }
   for (const refPath of providesRefPathList) {
     let ref = refPath[0]
     let path = refPath[1]
@@ -209,8 +243,16 @@ export function getDependencies(bomRef) {
       providesComponentList.push([detectionsMap.get(ref), path]);
     }
   }
+  for (const refPath of isProvidedByRefPathList) {
+    let ref = refPath[0]
+    let path = refPath[1]
+    if (detectionsMap.has(ref)) {
+      // Add a pair [component, path]
+      isProvidedByComponentList.push([detectionsMap.get(ref), path]);
+    }
+  }
 
-  return { dependsComponentList, providesComponentList };
+  return { dependsComponentList, isDependedOnComponentList, providesComponentList, isProvidedByComponentList };
 }