diff --git a/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue b/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
index 7707e9e5ff86969e9b8a268c9b3c086ce60edcf0..8518d72733d5efe1c472be769be21073d3c9c66b 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/pipeline/vulnerability_finding_modal.vue
@@ -1,13 +1,13 @@
 <script>
 import { GlModal } from '@gitlab/ui';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
-import VulnerabilityDetails from 'ee/vulnerabilities/components/vulnerability_details.vue';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
 
 export default {
   components: {
     GlModal,
     SolutionCard,
-    VulnerabilityDetails,
+    VulnerabilityDetailsGraphql,
   },
   props: {
     finding: {
@@ -33,7 +33,7 @@ export default {
     :title="finding.name"
     @hide="$emit('hide')"
   >
-    <vulnerability-details :vulnerability="finding" />
+    <vulnerability-details-graphql :vulnerability="finding" />
 
     <solution-card
       :solution="finding.solution"
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..b742f079772c5bda697bed17ba392e4c5c0cb433
--- /dev/null
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.stories.js
@@ -0,0 +1,20 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import VulnerabilityDetailsGraphql from './vulnerability_details_graphql.vue';
+
+export default {
+  component: VulnerabilityDetailsGraphql,
+  title: 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { VulnerabilityDetailsGraphql },
+  props: Object.keys(argTypes),
+  template: '<vulnerability-details-graphql :vulnerability="vulnerability" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  vulnerability: {
+    description: 'Generic Object Injection Sink',
+  },
+};
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8703a84a5e77b5bff531452cd566a967d1b7c836
--- /dev/null
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+  props: {
+    /**
+     * Currently supporting the `PipelineSecurityReportFinding` GraphQL type
+     * For more information on how the data is structured check out https://gitlab.com/-/graphql-explorer and search for `PipelineSecurityReportFinding`
+     */
+    vulnerability: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <article>
+    <p data-testid="description">{{ vulnerability.description }}</p>
+  </article>
+</template>
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js b/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
index d71787683b3c5cb7fa32713a7159df4963cbea18..f96afadaae847d904c6cfc13ca5b1ed456c7ad34 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/vulnerability_finding_modal_spec.js
@@ -2,7 +2,7 @@ import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import VulnerabilityFindingModal from 'ee/security_dashboard/components/pipeline/vulnerability_finding_modal.vue';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
-import VulnerabilityDetails from 'ee/vulnerabilities/components/vulnerability_details.vue';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
 
 const TEST_VULNERABILITY = {
   name: 'foo',
@@ -23,7 +23,7 @@ describe('Vulnerability finding modal', () => {
     });
 
   const findModal = () => wrapper.findComponent(GlModal);
-  const findVulnerabilityDetails = () => wrapper.findComponent(VulnerabilityDetails);
+  const findVulnerabilityDetails = () => wrapper.findComponent(VulnerabilityDetailsGraphql);
   const findSolutionCard = () => wrapper.findComponent(SolutionCard);
 
   beforeEach(() => {
diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..76c6accc103675bbf5260e8786417b2f165c8e0b
--- /dev/null
+++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import VulnerabilityDetailsGraphql from 'ee/security_dashboard/components/shared/vulnerability_details_graphql.vue';
+
+const TEST_VULNERABILITY = {
+  description: `Bracket object notation with user input is present, this might allow an attacker to access all properties of the object and even it's prototype, leading to possible code execution.`,
+};
+
+describe('ee/security_dashboard/components/shared/vulnerability_details_graphql.vue', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = extendedWrapper(
+      shallowMount(VulnerabilityDetailsGraphql, {
+        propsData: {
+          vulnerability: TEST_VULNERABILITY,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(createComponent);
+
+  it('renders the description', () => {
+    expect(wrapper.findByTestId('description').text()).toBe(TEST_VULNERABILITY.description);
+  });
+});