diff --git a/frontend/src/components/MaxHeightCodeEditor.tsx b/frontend/src/components/MaxHeightCodeEditor.tsx
new file mode 100644
index 0000000000..b246a77302
--- /dev/null
+++ b/frontend/src/components/MaxHeightCodeEditor.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { CodeEditor } from '@patternfly/react-code-editor';
+
+export const MaxHeightCodeEditor: React.FC<
+  Partial<Omit<React.ComponentProps<typeof CodeEditor>, 'ref'>> & { maxHeight: number }
+> = ({ maxHeight, ...props }) => {
+  const [contentHeight, setContentHeight] = React.useState<number>(maxHeight);
+
+  return (
+    <CodeEditor
+      onEditorDidMount={(editor) => setContentHeight(editor.getContentHeight())}
+      editorProps={{
+        height: `${contentHeight <= maxHeight ? contentHeight : maxHeight}px`,
+      }}
+      {...props}
+    />
+  );
+};
diff --git a/frontend/src/components/NoValue.tsx b/frontend/src/components/NoValue.tsx
new file mode 100644
index 0000000000..d7a15cc360
--- /dev/null
+++ b/frontend/src/components/NoValue.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const NoValue: React.FC = () => <span className="pf-v5-u-color-200">No value</span>;
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx
index 4a9304f1fb..3943c4870c 100644
--- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx
+++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils.tsx
@@ -14,6 +14,7 @@ import { GlobeAmericasIcon } from '@patternfly/react-icons';
 import { DateTimeKF, RuntimeConfigParamValue } from '~/concepts/pipelines/kfTypes';
 import { PodKind } from '~/k8sTypes';
 import { PodContainer } from '~/types';
+import { NoValue } from '~/components/NoValue';
 
 export type DetailItem = {
   key: string;
@@ -32,11 +33,7 @@ export const renderDetailItems = (details: DetailItem[]): React.ReactNode => (
       <DescriptionListGroup key={detail.key} data-testid={`detail-item-${detail.key}`}>
         <DescriptionListTerm>{detail.key}</DescriptionListTerm>
         <DescriptionListDescription data-testid="detail-item-value">
-          {!detail.value && detail.value !== 0 ? (
-            <span className="pf-v5-u-disabled-color-100">No value</span>
-          ) : (
-            detail.value
-          )}
+          {!detail.value && detail.value !== 0 ? <NoValue /> : detail.value}
         </DescriptionListDescription>
       </DescriptionListGroup>
     ))}
diff --git a/frontend/src/concepts/pipelines/context/usePipelinesUiRoute.ts b/frontend/src/concepts/pipelines/context/usePipelinesUiRoute.ts
new file mode 100644
index 0000000000..29349e5c9e
--- /dev/null
+++ b/frontend/src/concepts/pipelines/context/usePipelinesUiRoute.ts
@@ -0,0 +1,23 @@
+import { PIPELINE_ROUTE_NAME_PREFIX } from '~/concepts/pipelines/const';
+import { usePipelinesAPI } from './PipelinesContext';
+import usePipelineNamespaceCR, { dspaLoaded } from './usePipelineNamespaceCR';
+import usePipelinesAPIRoute from './usePipelinesAPIRoute';
+
+export const usePipelinesUiRoute = (): [string, boolean] => {
+  const { namespace } = usePipelinesAPI();
+  const crState = usePipelineNamespaceCR(namespace);
+  const isCrReady = dspaLoaded(crState);
+  const [pipelinesApiRoute, isPipelinesApiRouteLoaded] = usePipelinesAPIRoute(
+    isCrReady,
+    crState[0]?.metadata.name ?? '',
+    namespace,
+  );
+  let uiRoute = '';
+
+  if (pipelinesApiRoute) {
+    const [protocol, appHost] = pipelinesApiRoute.split(PIPELINE_ROUTE_NAME_PREFIX);
+    uiRoute = `${protocol}${PIPELINE_ROUTE_NAME_PREFIX}ui-${appHost}`;
+  }
+
+  return [uiRoute, isPipelinesApiRouteLoaded];
+};
diff --git a/frontend/src/pages/pipelines/GlobalArtifactsRoutes.tsx b/frontend/src/pages/pipelines/GlobalArtifactsRoutes.tsx
index 0280196852..cedbd549ad 100644
--- a/frontend/src/pages/pipelines/GlobalArtifactsRoutes.tsx
+++ b/frontend/src/pages/pipelines/GlobalArtifactsRoutes.tsx
@@ -5,6 +5,8 @@ import ProjectsRoutes from '~/concepts/projects/ProjectsRoutes';
 import GlobalPipelineCoreLoader from '~/pages/pipelines/global/GlobalPipelineCoreLoader';
 import { artifactsBaseRoute } from '~/routes';
 import { GlobalArtifactsPage } from './global/experiments/artifacts';
+import GlobalPipelineCoreDetails from './global/GlobalPipelineCoreDetails';
+import { ArtifactDetails } from './global/experiments/artifacts/ArtifactDetails';
 
 const GlobalArtifactsRoutes: React.FC = () => (
   <ProjectsRoutes>
@@ -13,6 +15,16 @@ const GlobalArtifactsRoutes: React.FC = () => (
       element={<GlobalPipelineCoreLoader getInvalidRedirectPath={artifactsBaseRoute} />}
     >
       <Route index element={<GlobalArtifactsPage />} />
+      <Route
+        path=":artifactId"
+        element={
+          <GlobalPipelineCoreDetails
+            pageName="Artifacts"
+            redirectPath={artifactsBaseRoute}
+            BreadcrumbDetailsComponent={ArtifactDetails}
+          />
+        }
+      />
       <Route path="*" element={<Navigate to="." />} />
     </Route>
   </ProjectsRoutes>
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx
new file mode 100644
index 0000000000..11182e0976
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useParams } from 'react-router';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Spinner,
+  Tab,
+  TabTitleText,
+  Tabs,
+  Truncate,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+import { PipelineCoreDetailsPageComponent } from '~/concepts/pipelines/content/types';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { useGetArtifactById } from '~/pages/pipelines/global/experiments/artifacts/useGetArtifactById';
+import { getArtifactName } from '~/pages/pipelines/global/experiments/artifacts/utils';
+import { ArtifactDetailsTabKey } from '~/pages/pipelines/global/experiments/artifacts/constants';
+import { ArtifactOverviewDetails } from './ArtifactOverviewDetails';
+
+export const ArtifactDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) => {
+  const { artifactId } = useParams();
+  const [artifactResponse, isArtifactLoaded, artifactError] = useGetArtifactById(
+    Number(artifactId),
+  );
+  const artifact = artifactResponse?.toObject();
+  const artifactName = getArtifactName(artifact);
+
+  if (artifactError) {
+    return (
+      <EmptyState variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader
+          titleText="Error loading artifact details"
+          icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
+          headingLevel="h4"
+        />
+        <EmptyStateBody>{artifactError.message}</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  if (!isArtifactLoaded) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <ApplicationsPage
+      title={artifactName ?? 'Error loading artifact'}
+      loaded={isArtifactLoaded}
+      loadError={artifactError}
+      breadcrumb={
+        <Breadcrumb>
+          {breadcrumbPath}
+          <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
+            <Truncate content={artifactName ?? 'Loading...'} />
+          </BreadcrumbItem>
+        </Breadcrumb>
+      }
+      empty={false}
+      provideChildrenPadding
+    >
+      <Tabs aria-label="Artifact details tabs" activeKey={ArtifactDetailsTabKey.Overview}>
+        <Tab
+          eventKey={ArtifactDetailsTabKey.Overview}
+          title={<TabTitleText>Overview</TabTitleText>}
+          aria-label="Overview"
+        >
+          <ArtifactOverviewDetails artifact={artifact} />
+        </Tab>
+        <Tab
+          eventKey={ArtifactDetailsTabKey.LineageExplorer}
+          title={<TabTitleText>Lineage explorer</TabTitleText>}
+          isAriaDisabled
+        />
+      </Tabs>
+    </ApplicationsPage>
+  );
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactOverviewDetails.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactOverviewDetails.tsx
new file mode 100644
index 0000000000..a1fd6c7f82
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactOverviewDetails.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {
+  Flex,
+  FlexItem,
+  Stack,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+
+import { Artifact } from '~/third_party/mlmd';
+import { usePipelinesUiRoute } from '~/concepts/pipelines/context/usePipelinesUiRoute';
+import { ArtifactUriLink } from '~/pages/pipelines/global/experiments/artifacts/ArtifactUriLink';
+import { ArtifactPropertyDescriptionList } from './ArtifactPropertyDescriptionList';
+
+interface ArtifactOverviewDetailsProps {
+  artifact: Artifact.AsObject | undefined;
+}
+
+export const ArtifactOverviewDetails: React.FC<ArtifactOverviewDetailsProps> = ({ artifact }) => {
+  const [pipelinesUiRoute, isPipelinesUiRouteLoaded] = usePipelinesUiRoute();
+
+  return (
+    <Flex
+      spaceItems={{ default: 'spaceItems2xl' }}
+      direction={{ default: 'column' }}
+      className="pf-v5-u-pt-lg pf-v5-u-pb-lg"
+    >
+      <FlexItem>
+        <Stack hasGutter>
+          <Title headingLevel="h3">Live system dataset</Title>
+          <DescriptionList isHorizontal data-testid="dataset-description-list">
+            <DescriptionListGroup>
+              {artifact?.uri && (
+                <>
+                  <DescriptionListTerm>URI</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <ArtifactUriLink
+                      uri={artifact.uri}
+                      downloadHost={pipelinesUiRoute}
+                      isLoaded={isPipelinesUiRouteLoaded}
+                    />
+                  </DescriptionListDescription>
+                </>
+              )}
+            </DescriptionListGroup>
+          </DescriptionList>
+        </Stack>
+      </FlexItem>
+
+      {!!artifact?.propertiesMap.length && (
+        <FlexItem>
+          <Stack hasGutter>
+            <Title headingLevel="h3">Properties</Title>
+            <ArtifactPropertyDescriptionList
+              propertiesMap={artifact.propertiesMap}
+              testId="props-description-list"
+            />
+          </Stack>
+        </FlexItem>
+      )}
+
+      {!!artifact?.customPropertiesMap.length && (
+        <FlexItem>
+          <Stack hasGutter>
+            <Title headingLevel="h3">Custom properties</Title>
+            <ArtifactPropertyDescriptionList
+              propertiesMap={artifact.customPropertiesMap}
+              testId="custom-props-description-list"
+            />
+          </Stack>
+        </FlexItem>
+      )}
+    </Flex>
+  );
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactPropertyDescriptionList.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactPropertyDescriptionList.tsx
new file mode 100644
index 0000000000..2412e5883f
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactPropertyDescriptionList.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+} from '@patternfly/react-core';
+
+import { Value } from '~/third_party/mlmd';
+import { NoValue } from '~/components/NoValue';
+import { MaxHeightCodeEditor } from '~/components/MaxHeightCodeEditor';
+
+interface ArtifactPropertyDescriptionListProps {
+  testId?: string;
+  propertiesMap: [string, Value.AsObject][];
+}
+
+export const ArtifactPropertyDescriptionList: React.FC<ArtifactPropertyDescriptionListProps> = ({
+  propertiesMap,
+  testId,
+}) => {
+  const getPropertyValue = React.useCallback((property: Value.AsObject): React.ReactNode => {
+    let propValue: React.ReactNode =
+      property.stringValue || property.intValue || property.doubleValue || property.boolValue || '';
+
+    if (property.structValue || property.protoValue) {
+      propValue = (
+        <MaxHeightCodeEditor
+          isReadOnly
+          maxHeight={300}
+          code={JSON.stringify(property.structValue || property.protoValue, null, 2)}
+        />
+      );
+    }
+
+    return propValue;
+  }, []);
+
+  return (
+    <DescriptionList isHorizontal data-testid={testId}>
+      <DescriptionListGroup>
+        {propertiesMap.map(([propKey, propValue]) => {
+          const value = getPropertyValue(propValue);
+
+          return (
+            <React.Fragment key={propKey}>
+              <DescriptionListTerm>{propKey}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {!value && value !== 0 ? <NoValue /> : value}
+              </DescriptionListDescription>
+            </React.Fragment>
+          );
+        })}
+      </DescriptionListGroup>
+    </DescriptionList>
+  );
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/index.ts b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/index.ts
new file mode 100644
index 0000000000..131665e657
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/index.ts
@@ -0,0 +1 @@
+export { ArtifactDetails } from './ArtifactDetails';
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactUriLink.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactUriLink.tsx
new file mode 100644
index 0000000000..6e8bcacc4d
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactUriLink.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Flex, FlexItem, Skeleton, Truncate } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+import { generateGcsConsoleUri, generateMinioArtifactUrl, generateS3ArtifactUrl } from './utils';
+
+interface ArtifactUriLinkProps {
+  uri: string;
+  downloadHost: string;
+  isLoaded?: boolean;
+}
+
+export const ArtifactUriLink: React.FC<ArtifactUriLinkProps> = ({
+  uri,
+  downloadHost,
+  isLoaded = true,
+}) => {
+  let uriLinkTo = '';
+
+  if (!isLoaded) {
+    return <Skeleton />;
+  }
+
+  if (uri.startsWith('gs:')) {
+    uriLinkTo = generateGcsConsoleUri(uri);
+  }
+
+  if (uri.startsWith('s3:')) {
+    uriLinkTo = `${downloadHost}/${generateS3ArtifactUrl(uri)}`;
+  }
+
+  if (uri.startsWith('http:') || uri.startsWith('https:')) {
+    uriLinkTo = uri;
+  }
+
+  if (uri.startsWith('minio:')) {
+    uriLinkTo = `${downloadHost}/${generateMinioArtifactUrl(uri)}`;
+  }
+
+  return uriLinkTo ? (
+    <Link to={uriLinkTo} target="_blank">
+      <Flex
+        alignItems={{ default: 'alignItemsCenter' }}
+        spaceItems={{ default: 'spaceItemsSm' }}
+        flexWrap={{ default: 'nowrap' }}
+      >
+        <FlexItem>
+          <Truncate content={uri} />
+        </FlexItem>
+
+        <FlexItem>
+          <ExternalLinkAltIcon />
+        </FlexItem>
+      </Flex>
+    </Link>
+  ) : (
+    uri
+  );
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactsTable.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactsTable.tsx
index 24e8e81613..87681a338b 100644
--- a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactsTable.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactsTable.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Flex, FlexItem, TextInput, Truncate } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { TextInput } from '@patternfly/react-core';
 import { TableVariant, Td, Tr } from '@patternfly/react-table';
 
 import { Artifact } from '~/third_party/mlmd';
@@ -12,8 +11,12 @@ import PipelinesTableRowTime from '~/concepts/pipelines/content/tables/Pipelines
 import { FilterToolbar } from '~/concepts/pipelines/content/tables/PipelineFilterBar';
 import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
 import { ArtifactType } from '~/concepts/pipelines/kfTypes';
-import { useMlmdListContext } from '~/concepts/pipelines/context';
+import { useMlmdListContext, usePipelinesAPI } from '~/concepts/pipelines/context';
+import { artifactsDetailsRoute } from '~/routes';
+import { usePipelinesUiRoute } from '~/concepts/pipelines/context/usePipelinesUiRoute';
 import { FilterOptions, columns, initialFilterData, options } from './constants';
+import { getArtifactName } from './utils';
+import { ArtifactUriLink } from './ArtifactUriLink';
 
 interface ArtifactsTableProps {
   artifacts: Artifact[] | null | undefined;
@@ -32,6 +35,8 @@ export const ArtifactsTable: React.FC<ArtifactsTableProps> = ({
     setPageToken: setRequestToken,
     setMaxResultSize,
   } = useMlmdListContext(nextPageToken);
+  const { namespace } = usePipelinesAPI();
+  const [pipelinesUiRoute, isPipelinesUiRouteLoaded] = usePipelinesUiRoute();
   const [page, setPage] = React.useState(1);
   const [filterData, setFilterData] = React.useState(initialFilterData);
   const onClearFilters = React.useCallback(() => setFilterData(initialFilterData), []);
@@ -141,34 +146,25 @@ export const ArtifactsTable: React.FC<ArtifactsTableProps> = ({
     (artifact: Artifact.AsObject) => (
       <Tr key={artifact.id}>
         <Td>
-          {artifact.name ||
-            artifact.customPropertiesMap.find(([name]) => name === 'display_name')?.[1].stringValue}
+          <Link to={artifactsDetailsRoute(namespace, artifact.id)}>
+            {getArtifactName(artifact)}
+          </Link>
         </Td>
         <Td>{artifact.id}</Td>
         <Td>{artifact.type}</Td>
         <Td>
-          <Link to={artifact.uri} target="_blank">
-            <Flex
-              alignItems={{ default: 'alignItemsCenter' }}
-              spaceItems={{ default: 'spaceItemsSm' }}
-              flexWrap={{ default: 'nowrap' }}
-            >
-              <FlexItem>
-                <Truncate content={artifact.uri} />
-              </FlexItem>
-
-              <FlexItem>
-                <ExternalLinkAltIcon />
-              </FlexItem>
-            </Flex>
-          </Link>
+          <ArtifactUriLink
+            uri={artifact.uri}
+            downloadHost={pipelinesUiRoute}
+            isLoaded={isPipelinesUiRouteLoaded}
+          />
         </Td>
         <Td>
           <PipelinesTableRowTime date={new Date(artifact.createTimeSinceEpoch)} />
         </Td>
       </Tr>
     ),
-    [],
+    [isPipelinesUiRouteLoaded, namespace, pipelinesUiRoute],
   );
 
   return (
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactDetails.spec.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactDetails.spec.tsx
new file mode 100644
index 0000000000..8873489db8
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactDetails.spec.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Artifact } from '~/third_party/mlmd';
+import { artifactsBaseRoute } from '~/routes';
+import * as useGetArtifactById from '~/pages/pipelines/global/experiments/artifacts/useGetArtifactById';
+import { ArtifactDetails } from '~/pages/pipelines/global/experiments/artifacts/ArtifactDetails';
+import GlobalPipelineCoreDetails from '~/pages/pipelines/global/GlobalPipelineCoreDetails';
+
+jest.mock('~/redux/selectors', () => ({
+  ...jest.requireActual('~/redux/selectors'),
+  useUser: jest.fn(() => ({ isAdmin: true })),
+}));
+
+jest.mock('~/concepts/pipelines/context/PipelinesContext', () => ({
+  usePipelinesAPI: jest.fn(() => ({
+    pipelinesServer: {
+      initializing: false,
+      installed: true,
+      compatible: true,
+      timedOut: false,
+      name: 'dspa',
+    },
+    namespace: 'Test namespace',
+    project: {
+      metadata: {
+        name: 'Test namespace',
+      },
+      kind: 'Project',
+    },
+    apiAvailable: true,
+  })),
+}));
+
+describe('ArtifactDetails', () => {
+  const useGetArtifactByIdSpy = jest.spyOn(useGetArtifactById, 'useGetArtifactById');
+
+  beforeEach(() => {
+    useGetArtifactByIdSpy.mockReturnValue([
+      {
+        toObject: jest.fn(() => ({
+          id: 1,
+          typeId: 14,
+          type: 'system.Artifact',
+          uri: 'https://test-artifact!-aiplatform.googleapis.com/v1/12.15',
+          propertiesMap: [],
+          customPropertiesMap: [
+            [
+              'display_name',
+              {
+                stringValue: 'vertex_model',
+              },
+            ],
+            [
+              'resourceName',
+              {
+                stringValue: '12.15',
+              },
+            ],
+          ],
+          state: 2,
+          createTimeSinceEpoch: 1711113121829,
+          lastUpdateTimeSinceEpoch: 1711113121829,
+        })),
+      } as unknown as Artifact,
+      true,
+      undefined,
+      jest.fn(),
+    ]);
+  });
+
+  it('renders page breadcrumbs', () => {
+    render(
+      <BrowserRouter>
+        <GlobalPipelineCoreDetails
+          pageName="Artifacts"
+          redirectPath={artifactsBaseRoute}
+          BreadcrumbDetailsComponent={ArtifactDetails}
+        />
+      </BrowserRouter>,
+    );
+
+    const breadcrumb = screen.getByRole('navigation', { name: 'Breadcrumb' });
+
+    expect(
+      within(breadcrumb).getByRole('link', { name: 'Artifacts - Test namespace' }),
+    ).toBeVisible();
+    expect(within(breadcrumb).getByText('vertex_model')).toBeVisible();
+  });
+
+  it('renders artifact name as page header with the Overview tab initially selected', () => {
+    render(
+      <BrowserRouter>
+        <GlobalPipelineCoreDetails
+          pageName="Artifacts"
+          redirectPath={artifactsBaseRoute}
+          BreadcrumbDetailsComponent={ArtifactDetails}
+        />
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByTestId('app-page-title')).toHaveTextContent('vertex_model');
+
+    const overviewTab = screen.getByRole('tab', { name: 'Overview' });
+    expect(overviewTab).toBeVisible();
+    expect(overviewTab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('renders Overview tab metadata contents', () => {
+    render(
+      <BrowserRouter>
+        <GlobalPipelineCoreDetails
+          pageName="Artifacts"
+          redirectPath={artifactsBaseRoute}
+          BreadcrumbDetailsComponent={ArtifactDetails}
+        />
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByRole('heading', { name: 'Live system dataset' })).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Custom properties' })).toBeVisible();
+
+    const datasetDescriptionList = screen.getByTestId('dataset-description-list');
+    expect(within(datasetDescriptionList).getByRole('term')).toHaveTextContent('URI');
+    expect(within(datasetDescriptionList).getByRole('definition')).toHaveTextContent(
+      'https://test-artifact!-aiplatform.googleapis.com/v1/12.15',
+    );
+
+    const customPropsDescriptionList = screen.getByTestId('custom-props-description-list');
+    const customPropsDescriptionListTerms = within(customPropsDescriptionList).getAllByRole('term');
+    const customPropsDescriptionListValues = within(customPropsDescriptionList).getAllByRole(
+      'definition',
+    );
+
+    expect(customPropsDescriptionListTerms[0]).toHaveTextContent('display_name');
+    expect(customPropsDescriptionListValues[0]).toHaveTextContent('vertex_model');
+    expect(customPropsDescriptionListTerms[1]).toHaveTextContent('resourceName');
+    expect(customPropsDescriptionListValues[1]).toHaveTextContent('12.15');
+  });
+});
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactsTable.spec.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactsTable.spec.tsx
new file mode 100644
index 0000000000..35f52984c3
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/__tests__/ArtifactsTable.spec.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Artifact } from '~/third_party/mlmd';
+import * as useGetArtifactsList from '~/pages/pipelines/global/experiments/artifacts/useGetArtifactsList';
+import * as MlmdListContext from '~/concepts/pipelines/context/MlmdListContext';
+import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
+import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer';
+import { ArtifactsList } from '~/pages/pipelines/global/experiments/artifacts/ArtifactsList';
+
+jest.mock('~/redux/selectors', () => ({
+  ...jest.requireActual('~/redux/selectors'),
+  useUser: jest.fn(() => ({ isAdmin: true })),
+}));
+
+jest.mock('~/concepts/pipelines/context/PipelinesContext', () => ({
+  usePipelinesAPI: jest.fn(() => ({
+    pipelinesServer: {
+      initializing: false,
+      installed: true,
+      compatible: true,
+      timedOut: false,
+      name: 'dspa',
+    },
+    namespace: 'Test namespace',
+    project: {
+      metadata: {
+        name: 'Test namespace',
+      },
+      kind: 'Project',
+    },
+    apiAvailable: true,
+  })),
+}));
+
+describe('ArtifactsTable', () => {
+  const useGetArtifactsListSpy = jest.spyOn(useGetArtifactsList, 'useGetArtifactsList');
+  const useMlmdListContextSpy = jest.spyOn(MlmdListContext, 'useMlmdListContext');
+
+  beforeEach(() => {
+    useMlmdListContextSpy.mockReturnValue({
+      filterQuery: '',
+      pageToken: '',
+      maxResultSize: 10,
+      orderBy: undefined,
+      setFilterQuery: jest.fn(),
+      setPageToken: jest.fn(),
+      setMaxResultSize: jest.fn(),
+      setOrderBy: jest.fn(),
+    });
+
+    useGetArtifactsListSpy.mockReturnValue([
+      {
+        artifacts: [
+          {
+            toObject: jest.fn(() => ({
+              id: 1,
+              typeId: 14,
+              type: 'system.Artifact',
+              uri: 'https://test-artifact!-aiplatform.googleapis.com/v1/12.15',
+              propertiesMap: [],
+              customPropertiesMap: [
+                [
+                  'display_name',
+                  {
+                    stringValue: 'vertex_model',
+                  },
+                ],
+                [
+                  'resourceName',
+                  {
+                    stringValue: '12.15',
+                  },
+                ],
+              ],
+              state: 2,
+              createTimeSinceEpoch: 1711113121829,
+            })),
+          },
+          {
+            toObject: jest.fn(() => ({
+              id: 2,
+              typeId: 15,
+              type: 'system.Dataset',
+              uri: 'https://test2-artifact!-aiplatform.googleapis.com/v1/12.10',
+              customPropertiesMap: [
+                [
+                  'display_name',
+                  {
+                    stringValue: 'iris_dataset',
+                  },
+                ],
+                [
+                  'resourceName',
+                  {
+                    stringValue: '12.10',
+                  },
+                ],
+              ],
+              state: 2,
+              createTimeSinceEpoch: 1611399342384,
+            })),
+          },
+        ] as unknown as Artifact[],
+        nextPageToken: '',
+      },
+      true,
+      undefined,
+      jest.fn(),
+    ]);
+  });
+
+  it('renders artifacts table with data', () => {
+    render(
+      <BrowserRouter>
+        <EnsureAPIAvailability>
+          <EnsureCompatiblePipelineServer>
+            <MlmdListContext.MlmdListContextProvider>
+              <ArtifactsList />
+            </MlmdListContext.MlmdListContextProvider>
+          </EnsureCompatiblePipelineServer>
+        </EnsureAPIAvailability>
+      </BrowserRouter>,
+    );
+
+    const firstRow = screen.getByRole('row', { name: /vertex_model/ });
+    expect(firstRow).toHaveTextContent('vertex_model');
+    expect(firstRow).toHaveTextContent('1');
+    expect(firstRow).toHaveTextContent('system.Artifact');
+    expect(firstRow).toHaveTextContent('https://test-artifact!-aiplatform.googleapis.com/v1/12.15');
+    expect(firstRow).toHaveTextContent('1 month ago');
+
+    const secondRow = screen.getByRole('row', { name: /iris_dataset/ });
+    expect(secondRow).toHaveTextContent('iris_dataset');
+    expect(secondRow).toHaveTextContent('2');
+    expect(secondRow).toHaveTextContent('system.Dataset');
+    expect(secondRow).toHaveTextContent(
+      'https://test2-artifact!-aiplatform.googleapis.com/v1/12.10',
+    );
+    expect(secondRow).toHaveTextContent('23 Jan 2021');
+  });
+});
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/constants.ts b/frontend/src/pages/pipelines/global/experiments/artifacts/constants.ts
index 16e737bbf0..5231502e9b 100644
--- a/frontend/src/pages/pipelines/global/experiments/artifacts/constants.ts
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/constants.ts
@@ -49,3 +49,8 @@ export const columns: SortableData<MlmdArtifact.AsObject>[] = [
     width: 15,
   },
 ];
+
+export enum ArtifactDetailsTabKey {
+  Overview = 'overview',
+  LineageExplorer = 'lineage-explorer',
+}
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/useGetArtifactById.ts b/frontend/src/pages/pipelines/global/experiments/artifacts/useGetArtifactById.ts
new file mode 100644
index 0000000000..ba6c66f0b3
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/useGetArtifactById.ts
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { Artifact, GetArtifactsByIDRequest } from '~/third_party/mlmd';
+import useFetchState, { FetchState } from '~/utilities/useFetchState';
+
+export const useGetArtifactById = (
+  artifactId: number,
+  refreshRate?: number,
+): FetchState<Artifact | undefined> => {
+  const { metadataStoreServiceClient } = usePipelinesAPI();
+
+  const fetchArtifact = React.useCallback(async () => {
+    const request = new GetArtifactsByIDRequest();
+    request.setArtifactIdsList([artifactId]);
+
+    const response = await metadataStoreServiceClient.getArtifactsByID(request);
+
+    return response.getArtifactsList()[0];
+  }, [artifactId, metadataStoreServiceClient]);
+
+  return useFetchState(fetchArtifact, undefined, {
+    refreshRate,
+  });
+};
diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/utils.ts b/frontend/src/pages/pipelines/global/experiments/artifacts/utils.ts
new file mode 100644
index 0000000000..16e30aea92
--- /dev/null
+++ b/frontend/src/pages/pipelines/global/experiments/artifacts/utils.ts
@@ -0,0 +1,55 @@
+/** URI related utils source: https://github.com/kubeflow/pipelines/blob/master/frontend/src/lib/Utils.tsx */
+import { Artifact } from '~/third_party/mlmd';
+
+export const getArtifactName = (artifact: Artifact.AsObject | undefined): string | undefined =>
+  artifact?.name ||
+  artifact?.customPropertiesMap.find(([name]) => name === 'display_name')?.[1].stringValue;
+
+export function buildQuery(queriesMap?: { [key: string]: string | number | undefined }): string {
+  const queryContent = Object.entries(queriesMap || {})
+    .filter((entry): entry is [string, string | number] => entry[1] != null)
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+    .join('&');
+  if (!queryContent) {
+    return '';
+  }
+  return `?${queryContent}`;
+}
+
+/**
+ * Generates a cloud console uri from gs:// uri
+ *
+ * @param gcsUri Gcs uri that starts with gs://, like gs://bucket/path/file
+ * @returns A link user can open to visit cloud console page.
+ */
+export function generateGcsConsoleUri(uri: string): string {
+  const gcsPrefix = 'gs://';
+  return `https://console.cloud.google.com/storage/browser/${uri.substring(gcsPrefix.length)}`;
+}
+
+/**
+ * Generates an HTTPS API URL from minio:// uri
+ *
+ * @param uri Minio uri that starts with minio://, like minio://ml-pipeline/path/file
+ * @returns A URL that leads to the artifact data. Returns undefined when minioUri is not valid.
+ */
+export function generateMinioArtifactUrl(uri: string, peek?: number): string | undefined {
+  const matches = uri.match(/^minio:\/\/([^/]+)\/(.+)$/);
+
+  return matches
+    ? `artifacts/minio/${matches[1]}/${matches[2]}${buildQuery({
+        peek,
+      })}`
+    : undefined;
+}
+
+/**
+ * Generates an HTTPS API URL from s3:// uri
+ *
+ * @param uri S3 uri that starts with s3://, like s3://ml-pipeline/path/file
+ * @returns A URL that leads to the artifact data. Returns undefined when s3Uri is not valid.
+ */
+export function generateS3ArtifactUrl(uri: string): string | undefined {
+  const matches = uri.match(/^s3:\/\/([^/]+)\/(.+)$/);
+  return matches ? `artifacts/s3/${matches[1]}/${matches[2]}${buildQuery()}` : undefined;
+}
diff --git a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsInputOutputSection.tsx b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsInputOutputSection.tsx
index 91b351b939..d533f925b1 100644
--- a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsInputOutputSection.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsInputOutputSection.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { Bullseye, Spinner, Stack, StackItem, Title } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { Event } from '~/third_party/mlmd';
 import { useGetLinkedArtifactsByEvents } from '~/concepts/pipelines/apiHooks/mlmd/useGetLinkedArtifactsByEvents';
 import { getArtifactNameFromEvent } from '~/pages/pipelines/global/experiments/executions/utils';
+import { artifactsDetailsRoute } from '~/routes';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
 
 type ExecutionDetailsInputOutputSectionProps = {
   isLoaded: boolean;
@@ -18,6 +21,7 @@ const ExecutionDetailsInputOutputSection: React.FC<ExecutionDetailsInputOutputSe
   events,
   artifactTypeMap,
 }) => {
+  const { namespace } = usePipelinesAPI();
   const [linkedArtifacts, isLinkedArtifactsLoaded] = useGetLinkedArtifactsByEvents(events);
 
   if (!isLoaded || !isLinkedArtifactsLoaded) {
@@ -72,8 +76,9 @@ const ExecutionDetailsInputOutputSection: React.FC<ExecutionDetailsInputOutputSe
                 return (
                   <Tr key={id}>
                     <Td dataLabel="Artifact ID">{id}</Td>
-                    {/* TODO: add artifact details page line */}
-                    <Td dataLabel="Name">{data.name}</Td>
+                    <Td dataLabel="Name">
+                      <Link to={artifactsDetailsRoute(namespace, id)}>{data.name}</Link>
+                    </Td>
                     <Td dataLabel="Type">{type}</Td>
                     <Td dataLabel="URI">{data.uri}</Td>
                   </Tr>
diff --git a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue.tsx b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue.tsx
index 9e2baa54a2..3669b61a9c 100644
--- a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue.tsx
+++ b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetailsPropertiesValue.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { CodeEditor } from '@patternfly/react-code-editor';
 import { MlmdMetadataValueType } from '~/pages/pipelines/global/experiments/executions/utils';
+import { MaxHeightCodeEditor } from '~/components/MaxHeightCodeEditor';
 
 type ExecutionDetailsPropertiesValueProps = {
   value: MlmdMetadataValueType;
 };
 
 const ExecutionDetailsPropertiesValueCode = ({ code }: { code: string }) => (
-  <CodeEditor isReadOnly code={code} height="sizeToFit" />
+  <MaxHeightCodeEditor isReadOnly code={code} maxHeight={300} />
 );
 
 const ExecutionDetailsPropertiesValue: React.FC<ExecutionDetailsPropertiesValueProps> = ({
diff --git a/frontend/src/routes/pipelines/artifacts.ts b/frontend/src/routes/pipelines/artifacts.ts
index 7fc3437a73..2cf33ee76e 100644
--- a/frontend/src/routes/pipelines/artifacts.ts
+++ b/frontend/src/routes/pipelines/artifacts.ts
@@ -3,3 +3,6 @@ export const globArtifactsAll = `${artifactsRootPath}/*`;
 
 export const artifactsBaseRoute = (namespace: string | undefined): string =>
   !namespace ? artifactsRootPath : `${artifactsRootPath}/${namespace}`;
+
+export const artifactsDetailsRoute = (namespace: string, artifactId: number): string =>
+  `${artifactsBaseRoute(namespace)}/${artifactId}`;