diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
index 784af61fe996a..42b927ad50e01 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecks.tsx
@@ -21,7 +21,13 @@ import React, {useContext} from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
-import {ASSET_CHECK_DETAILS_QUERY, MetadataCell} from './AssetCheckDetailModal';
+import {
+  ASSET_CHECK_DETAILS_QUERY,
+  AgentUpgradeRequired,
+  MetadataCell,
+  MigrationRequired,
+  NeedsUserCodeUpgrade,
+} from './AssetCheckDetailModal';
 import {AssetCheckStatusTag} from './AssetCheckStatusTag';
 import {
   EXECUTE_CHECKS_BUTTON_ASSET_NODE_FRAGMENT,
@@ -36,7 +42,7 @@ import {
 import {AssetChecksQuery, AssetChecksQueryVariables} from './types/AssetChecks.types';
 import {assetCheckStatusDescription, getCheckIcon} from './util';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
-import {COMMON_COLLATOR} from '../../app/Util';
+import {COMMON_COLLATOR, assertUnreachable} from '../../app/Util';
 import {Timestamp} from '../../app/time/Timestamp';
 import {AssetKeyInput} from '../../graphql/types';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
@@ -118,6 +124,22 @@ export const AssetChecks = ({
     return null;
   }
 
+  if (data.assetNodeOrError.__typename === 'AssetNode') {
+    const type = data.assetNodeOrError.assetChecksOrError.__typename;
+    switch (type) {
+      case 'AssetCheckNeedsAgentUpgradeError':
+        return <AgentUpgradeRequired />;
+      case 'AssetCheckNeedsMigrationError':
+        return <MigrationRequired />;
+      case 'AssetCheckNeedsUserCodeUpgrade':
+        return <NeedsUserCodeUpgrade />;
+      case 'AssetChecks':
+        break;
+      default:
+        assertUnreachable(type);
+    }
+  }
+
   if (!checks.length || !selectedCheck || !assetNode) {
     return (
       <Box flex={{alignItems: 'center'}} padding={32}>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
index 8d7ccc5b83cd0..6daf87932f4fc 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/__stories__/AssetChecks.stories.tsx
@@ -3,7 +3,9 @@ import {Meta} from '@storybook/react';
 import {MemoryRouter} from 'react-router-dom';
 
 import {
+  buildAssetCheckNeedsAgentUpgradeError,
   buildAssetCheckNeedsMigrationError,
+  buildAssetCheckNeedsUserCodeUpgrade,
   buildAssetChecks,
   buildAssetKey,
   buildAssetNode,
@@ -61,6 +63,44 @@ export const MigrationRequired = () => {
   );
 };
 
+export const AgentUpgradeRequired = () => {
+  return (
+    <Component
+      mocks={[
+        buildQueryMock<any, AssetChecksQueryVariables>({
+          query: ASSET_CHECKS_QUERY,
+          variables: {assetKey: testAssetKey},
+          data: {
+            assetNodeOrError: buildAssetNode({
+              assetKey: buildAssetKey(testAssetKey),
+              assetChecksOrError: buildAssetCheckNeedsAgentUpgradeError(),
+            }),
+          },
+        }),
+      ]}
+    />
+  );
+};
+
+export const NeedsUserCodeUpgradeRequired = () => {
+  return (
+    <Component
+      mocks={[
+        buildQueryMock<any, AssetChecksQueryVariables>({
+          query: ASSET_CHECKS_QUERY,
+          variables: {assetKey: testAssetKey},
+          data: {
+            assetNodeOrError: buildAssetNode({
+              assetKey: buildAssetKey(testAssetKey),
+              assetChecksOrError: buildAssetCheckNeedsUserCodeUpgrade(),
+            }),
+          },
+        }),
+      ]}
+    />
+  );
+};
+
 export const NoChecks = () => {
   return (
     <Component