diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue
index 2ea2307619104ccbcc60331428f5205de1ade510..510122832501b7b39f73bad58ba224f02c7ac904 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue
@@ -25,6 +25,7 @@ export const TRAINING_URL_POLLING_INTERVAL = 5000;
 export default {
   i18n,
   TEMP_PROVIDER_LOGOS,
+  SECURITY_TRAINING_URL_STATUS_COMPLETED,
   components: {
     GlLink,
     GlIcon,
@@ -172,12 +173,12 @@ export default {
     <div v-else-if="isUrlsLoading">
       <gl-skeleton-loader :width="200" :lines="3" />
     </div>
-    <div v-else>
-      <div
-        v-for="({ name, url, identifier }, index) in securityTrainingUrls"
-        :key="index"
-        class="gl-mt-6"
-      >
+    <div
+      v-for="({ name, url, identifier, status }, index) in securityTrainingUrls"
+      :key="index"
+      class="gl-mt-6"
+    >
+      <div v-if="status === $options.SECURITY_TRAINING_URL_STATUS_COMPLETED">
         <div>
           <span v-if="$options.TEMP_PROVIDER_LOGOS[name]" class="gl-mr-1 gl-display-inline-flex">
             <div
diff --git a/ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js b/ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js
index f10411d790c56c01a1ef9bd2ba20a2dc85e43167..0d4b1bd8f845fb5ea69a5e059bc4b700be49a91c 100644
--- a/ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js
+++ b/ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js
@@ -277,6 +277,23 @@ describe('VulnerabilityTraining component', () => {
         expect(findTrainingItemLinks().exists()).toBe(false);
         expect(findTrainingItemLinkIcons().exists()).toBe(false);
       });
+
+      it('does not display the training item if the status is not completed', async () => {
+        createApolloProvider({
+          projectQueryHandler: jest.fn().mockResolvedValue(
+            getSecurityTrainingProjectData({
+              urlOverrides: {
+                first: {
+                  status: SECURITY_TRAINING_URL_STATUS_PENDING,
+                },
+              },
+            }).response,
+          ),
+        });
+        createComponent();
+        await waitForQueryToBeLoaded();
+        expect(findTrainingItemLinks()).toHaveLength(testTrainingUrls.length - 1);
+      });
     });
 
     describe('security training query', () => {