diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue
index 2deb7728273ad16bbaf7920160eb79253a4bf4ce..f11756c4ac4fb5c9a0f0a422352849cc607fb500 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue
@@ -10,6 +10,8 @@ import {
 } from '@gitlab/ui';
 import { isEmpty, maxBy, range } from 'lodash';
 import { __, s__, sprintf } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PACKAGES_PACKAGE } from '~/graphql_shared/constants';
 
 export default {
   name: 'CandidateDetail',
@@ -20,6 +22,8 @@ export default {
     GlTab,
     GlTabs,
     GlTableLite,
+    PackageFiles: () =>
+      import('~/packages_and_registries/package_registry/components/details/package_files.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -34,6 +38,19 @@ export default {
     info() {
       return this.candidate.info;
     },
+    projectPath() {
+      return this.candidate.projectPath;
+    },
+    packageType() {
+      return 'ml_model';
+    },
+    packageId() {
+      if (!this.info?.pathToArtifact) return null;
+      return convertToGraphQLId(
+        TYPENAME_PACKAGES_PACKAGE,
+        this.info.pathToArtifact.split('/packages/')[1],
+      );
+    },
     ciJob() {
       return this.info.ciJob;
     },
@@ -179,13 +196,12 @@ export default {
         </section>
       </gl-tab>
       <gl-tab :title="$options.i18n.artifactsLabel" class="gl-pt-3" data-testid="artifacts">
-        <gl-link
+        <package-files
           v-if="info.pathToArtifact"
-          :href="info.pathToArtifact"
-          data-testid="artifacts-link"
-        >
-          {{ $options.i18n.artifactsLabel }}
-        </gl-link>
+          :project-path="projectPath"
+          :package-type="packageType"
+          :package-id="packageId"
+        />
         <div v-else class="gl-text-subtle">{{ $options.i18n.noArtifactsMessage }}</div>
       </gl-tab>
       <gl-tab :title="$options.i18n.performanceLabel" class="gl-pt-3" data-testid="metrics">
diff --git a/app/assets/javascripts/pages/projects/ml/candidates/show/index.js b/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
index 57c2c1cbbe23e84ff18b667785f570f724a94671..38442aa2cc690152c00fd5fa61329b6b02a4dd18 100644
--- a/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
+++ b/app/assets/javascripts/pages/projects/ml/candidates/show/index.js
@@ -1,4 +1,7 @@
 import { initSimpleApp } from '~/helpers/init_simple_app_helper';
 import MlCandidateShow from '~/ml/experiment_tracking/routes/candidates/show';
 
-initSimpleApp('#js-show-ml-candidate', MlCandidateShow, { name: 'MlCandidateShow' });
+initSimpleApp('#js-show-ml-candidate', MlCandidateShow, {
+  withApolloProvider: true,
+  name: 'MlCandidateShow',
+});
diff --git a/spec/frontend/ml/experiment_tracking/routes/candidates/show/candidate_detail_spec.js b/spec/frontend/ml/experiment_tracking/routes/candidates/show/candidate_detail_spec.js
index 1cda9e32e789408868b69cb79ced023e3f463d60..65ed8d0fccdb58f54df6bb72629729248a39ba6d 100644
--- a/spec/frontend/ml/experiment_tracking/routes/candidates/show/candidate_detail_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/candidates/show/candidate_detail_spec.js
@@ -1,7 +1,13 @@
 import { GlAvatarLabeled, GlButton } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CandidateDetail from '~/ml/experiment_tracking/routes/candidates/show/candidate_detail.vue';
 import { newCandidate } from 'jest/ml/model_registry/mock_data';
+import PackageFiles from '~/packages_and_registries/package_registry/components/details/package_files.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+Vue.use(VueApollo);
 
 describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', () => {
   let wrapper;
@@ -10,8 +16,10 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
     candidate: newCandidate(),
   };
 
-  const createWrapper = (props = {}) => {
-    return mountExtended(CandidateDetail, {
+  const createWrapper = (props = {}, mountFn = mountExtended) => {
+    const apolloProvider = createMockApollo();
+    return mountFn(CandidateDetail, {
+      apolloProvider,
       propsData: {
         ...defaultProps,
         ...props,
@@ -27,7 +35,7 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
   const findMetadata = () => wrapper.findByTestId('metadata');
   const findMlflowRunId = () => wrapper.findByTestId('mlflow-run-id');
   const findCiJobPathLink = () => wrapper.findByTestId('ci-job-path');
-  const findArtifactLink = () => wrapper.findByTestId('artifacts-link');
+  const findPackageFiles = () => wrapper.findComponent(PackageFiles);
   const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled);
   const findParametersSection = () => wrapper.findByTestId('parameters');
   const findParametersTable = () => wrapper.findByTestId('parameters-table');
@@ -169,9 +177,15 @@ describe('ml/experiment_tracking/routes/candidates/show/candidate_detail.vue', (
   });
 
   describe('Artifacts tab', () => {
-    it('renders artifact link when available', () => {
-      wrapper = createWrapper();
-      expect(findArtifactLink().attributes('href')).toBe('path_to_artifact');
+    it('renders files', () => {
+      wrapper = createWrapper({});
+      expect(findPackageFiles().props()).toEqual({
+        packageId: 'gid://gitlab/Packages::Package/12',
+        projectPath: 'some/project',
+        packageType: 'ml_model',
+        canDelete: false,
+        deleteAllFiles: false,
+      });
     });
 
     it('shows no artifacts message when artifact path is missing', () => {
diff --git a/spec/frontend/ml/model_registry/mock_data.js b/spec/frontend/ml/model_registry/mock_data.js
index ecec675af33ca076e6998b67c47bd967ad4d54f3..48c0a379738d3b4fab375bacf1fe50ba44ca5081 100644
--- a/spec/frontend/ml/model_registry/mock_data.js
+++ b/spec/frontend/ml/model_registry/mock_data.js
@@ -18,7 +18,7 @@ export const newCandidate = (withModel = true) => ({
     iid: 'candidate_iid',
     eid: 'abcdefg',
     gid: 'gid://gitlab/Ml::Candidate/1',
-    pathToArtifact: 'path_to_artifact',
+    pathToArtifact: 'path_to_artifact/packages/12',
     experimentName: 'The Experiment',
     pathToExperiment: 'path/to/experiment',
     status: 'SUCCESS',