diff --git a/lib/web/machineid.go b/lib/web/machineid.go
index e0c4fa343ca63..65e911b45785e 100644
--- a/lib/web/machineid.go
+++ b/lib/web/machineid.go
@@ -439,6 +439,7 @@ func (h *Handler) listBotInstances(_ http.ResponseWriter, r *http.Request, _ htt
 			uiInstance.HostNameLatest = heartbeat.Hostname
 			uiInstance.VersionLatest = heartbeat.Version
 			uiInstance.ActiveAtLatest = heartbeat.RecordedAt.AsTime().Format(time.RFC3339)
+			uiInstance.OSLatest = heartbeat.Os
 		}
 
 		return uiInstance
@@ -462,4 +463,5 @@ type BotInstance struct {
 	HostNameLatest   string `json:"host_name_latest,omitempty"`
 	VersionLatest    string `json:"version_latest,omitempty"`
 	ActiveAtLatest   string `json:"active_at_latest,omitempty"`
+	OSLatest         string `json:"os_latest,omitempty"`
 }
diff --git a/lib/web/machineid_test.go b/lib/web/machineid_test.go
index c1403dea6d2f1..451c0ad851318 100644
--- a/lib/web/machineid_test.go
+++ b/lib/web/machineid_test.go
@@ -593,6 +593,7 @@ func TestListBotInstances(t *testing.T) {
 					Version:    "1.0.0",
 					Hostname:   "test-hostname",
 					JoinMethod: "test-join-method",
+					Os:         "linux",
 				},
 			},
 		},
@@ -616,6 +617,7 @@ func TestListBotInstances(t *testing.T) {
 				HostNameLatest:   "test-hostname",
 				VersionLatest:    "1.0.0",
 				ActiveAtLatest:   "1970-01-01T00:00:03Z",
+				OSLatest:         "linux",
 			},
 		},
 	}))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2dfecb76bc52..81554baaa3148 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -323,6 +323,13 @@ importers:
       highlight-words-core:
         specifier: ^1.2.3
         version: 1.2.3
+      semver:
+        specifier: ^7.7.2
+        version: 7.7.2
+    devDependencies:
+      '@types/semver':
+        specifier: ^7.7.0
+        version: 7.7.0
 
   web/packages/teleport:
     dependencies:
@@ -2765,6 +2772,9 @@ packages:
   '@types/responselike@1.0.3':
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
 
+  '@types/semver@7.7.0':
+    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
+
   '@types/shimmer@1.2.0':
     resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
 
@@ -5967,8 +5977,8 @@ packages:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
-  semver@7.7.1:
-    resolution: {integrity: sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==}
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -7951,7 +7961,7 @@ snapshots:
       make-fetch-happen: 10.2.1
       nopt: 6.0.0
       proc-log: 2.0.1
-      semver: 7.7.1
+      semver: 7.7.2
       tar: 6.2.1
       which: 2.0.2
     transitivePeerDependencies:
@@ -7990,7 +8000,7 @@ snapshots:
       node-api-version: 0.2.1
       ora: 5.4.1
       read-binary-file-arch: 1.0.6
-      semver: 7.7.1
+      semver: 7.7.2
       tar: 6.2.1
       yargs: 17.7.2
     transitivePeerDependencies:
@@ -8263,7 +8273,7 @@ snapshots:
       '@babel/traverse': 7.27.1
       '@babel/types': 7.27.1
       prettier: 3.5.3
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
@@ -8708,11 +8718,11 @@ snapshots:
   '@npmcli/fs@2.1.2':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@npmcli/fs@4.0.0':
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   '@npmcli/move-file@2.0.1':
     dependencies:
@@ -8827,7 +8837,7 @@ snapshots:
       '@types/shimmer': 1.2.0
       import-in-the-middle: 1.13.1
       require-in-the-middle: 7.5.2
-      semver: 7.7.1
+      semver: 7.7.2
       shimmer: 1.2.1
     transitivePeerDependencies:
       - supports-color
@@ -9458,6 +9468,8 @@ snapshots:
     dependencies:
       '@types/node': 22.15.16
 
+  '@types/semver@7.7.0': {}
+
   '@types/shimmer@1.2.0': {}
 
   '@types/stack-utils@2.0.3': {}
@@ -9562,7 +9574,7 @@ snapshots:
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.1
+      semver: 7.7.2
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -9786,7 +9798,7 @@ snapshots:
       minimatch: 10.0.1
       plist: 3.1.0
       resedit: 1.7.2
-      semver: 7.7.1
+      semver: 7.7.2
       tar: 6.2.1
       temp-file: 3.4.0
       tiny-async-pool: 1.3.0
@@ -10496,7 +10508,7 @@ snapshots:
       cspell-lib: 9.0.1
       fast-json-stable-stringify: 2.1.0
       file-entry-cache: 9.1.0
-      semver: 7.7.1
+      semver: 7.7.2
       tinyglobby: 0.2.13
 
   css-color-keywords@1.0.0: {}
@@ -11508,7 +11520,7 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.7.1
+      semver: 7.7.2
       serialize-error: 7.0.1
     optional: true
 
@@ -11892,7 +11904,7 @@ snapshots:
       '@babel/parser': 7.27.1
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12215,7 +12227,7 @@ snapshots:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.7.1
+      semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12472,7 +12484,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   make-fetch-happen@10.2.1:
     dependencies:
@@ -12691,7 +12703,7 @@ snapshots:
 
   node-abi@3.75.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   node-addon-api@1.7.2:
     optional: true
@@ -12700,7 +12712,7 @@ snapshots:
 
   node-api-version@0.2.1:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   node-forge@1.3.1: {}
 
@@ -12712,7 +12724,7 @@ snapshots:
       make-fetch-happen: 14.0.3
       nopt: 8.1.0
       proc-log: 5.0.0
-      semver: 7.7.1
+      semver: 7.7.2
       tar: 7.4.3
       tinyglobby: 0.2.13
       which: 5.0.0
@@ -13418,7 +13430,7 @@ snapshots:
 
   semver@6.3.1: {}
 
-  semver@7.7.1: {}
+  semver@7.7.2: {}
 
   send@1.2.0:
     dependencies:
@@ -13522,7 +13534,7 @@ snapshots:
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.7.1
+      semver: 7.7.2
 
   sisteransi@1.0.5: {}
 
@@ -13611,7 +13623,7 @@ snapshots:
       esbuild: 0.25.4
       esbuild-register: 3.6.0(esbuild@0.25.4)
       recast: 0.23.11
-      semver: 7.7.1
+      semver: 7.7.2
       ws: 8.18.2
     optionalDependencies:
       prettier: 3.5.3
diff --git a/web/packages/design/src/Icon/Icons/ModelContextProtocol.tsx b/web/packages/design/src/Icon/Icons/ModelContextProtocol.tsx
index 22f68193dd154..8398f18dc44d1 100644
--- a/web/packages/design/src/Icon/Icons/ModelContextProtocol.tsx
+++ b/web/packages/design/src/Icon/Icons/ModelContextProtocol.tsx
@@ -59,8 +59,9 @@ export const ModelContextProtocol = forwardRef<HTMLSpanElement, IconProps>(
       {...otherProps}
       ref={ref}
     >
-      <path d="M11.1233 2.2703C12.6791 0.86452 15.081 0.911433 16.5803 2.41092L16.7209 2.55838C17.5524 3.4788 17.8739 4.69486 17.6887 5.84549C18.8391 5.66026 20.0553 5.98289 20.9758 6.81424L21.1243 6.95487L21.1711 7.00174L21.3118 7.15018C22.672 8.65578 22.672 10.9532 21.3118 12.4588L21.1711 12.6072L12.9514 20.8269C12.8263 20.9522 12.8266 21.1557 12.9514 21.281L14.6399 22.9685L14.6907 23.0262C14.9309 23.3207 14.9145 23.7555 14.6399 24.0301C14.3653 24.3046 13.9305 24.3211 13.636 24.0808L13.5784 24.0301L11.8909 22.3416C11.1803 21.6304 11.18 20.4774 11.8909 19.7664L20.1106 11.5467L20.2795 11.3592C21.0161 10.4561 21.0161 9.15286 20.2795 8.24979L20.1106 8.06229L20.0637 8.01542L19.8762 7.84647C18.9731 7.11019 17.6698 7.10988 16.7668 7.84647L16.5862 8.00858L16.5803 8.01542L9.71702 14.8797L9.65941 14.9314C9.36492 15.1712 8.92994 15.1539 8.6555 14.8797C8.36294 14.5869 8.3632 14.112 8.6555 13.8191L8.74241 13.7312L15.5266 6.94706L15.6887 6.76834C16.4254 5.86531 16.4253 4.5611 15.6887 3.65799L15.5198 3.47147C14.6179 2.56954 13.1904 2.51313 12.2229 3.30252L12.0364 3.47147L2.94749 12.5603C2.65469 12.8527 2.17973 12.8527 1.88695 12.5603C1.59418 12.2676 1.59447 11.7927 1.88695 11.4998L10.9758 2.41092L11.1233 2.2703Z" />
-      <path d="M13.2483 4.68338C13.5412 4.39063 14.016 4.39054 14.3088 4.68338C14.6012 4.97627 14.6014 5.45119 14.3088 5.74393L7.58714 12.4656C6.62517 13.4276 6.62514 14.9879 7.58714 15.95L7.77366 16.1189C8.74111 16.9077 10.1688 16.8515 11.0705 15.95L17.7922 9.22733C18.0851 8.93474 18.5599 8.93474 18.8528 9.22733C19.1452 9.52018 19.1453 9.99509 18.8528 10.2879L12.1311 17.0105C10.6319 18.5096 8.2298 18.5563 6.67406 17.1512L6.52659 17.0105C4.97888 15.4627 4.97885 12.9529 6.52659 11.4051L13.2483 4.68338Z" />
+      <path d="M11.123 2.27a3.963 3.963 0 0 1 5.457.14l.14.148a3.96 3.96 0 0 1 .969 3.287 3.96 3.96 0 0 1 3.287.97l.148.14.047.047.14.148a3.963 3.963 0 0 1 0 5.309l-.14.148-8.22 8.22a.32.32 0 0 0 0 .454l1.689 1.688.05.057a.75.75 0 0 1-1.054 1.055l-.058-.05-1.687-1.69a1.82 1.82 0 0 1 0-2.575l8.22-8.22.168-.187a2.464 2.464 0 0 0 0-3.11l-.168-.187-.047-.047-.188-.169a2.464 2.464 0 0 0-3.11 0l-.18.163-.006.006-6.863 6.865-.058.051a.751.751 0 0 1-1.004-1.112l.087-.088 6.785-6.784.162-.179a2.465 2.465 0 0 0 0-3.11l-.17-.187a2.464 2.464 0 0 0-3.296-.168l-.187.168-9.089 9.09a.75.75 0 0 1-1.06-1.061l9.089-9.09z" />
+      <path d="M13.248 4.683a.75.75 0 0 1 1.06 1.06l-6.72 6.723a2.464 2.464 0 0 0 0 3.484l.186.169a2.465 2.465 0 0 0 3.296-.169l6.722-6.723a.75.75 0 0 1 1.06 1.06l-6.72 6.724a3.964 3.964 0 0 1-5.458.14l-.147-.14a3.964 3.964 0 0 1 0-5.606z" />
+      <path d="M0 .75h24v24H0z" />
     </Icon>
   )
 );
diff --git a/web/packages/design/src/Label/Label.tsx b/web/packages/design/src/Label/Label.tsx
index 783410b32dafd..324891ab20642 100644
--- a/web/packages/design/src/Label/Label.tsx
+++ b/web/packages/design/src/Label/Label.tsx
@@ -52,13 +52,35 @@ const kind = ({ kind, theme }: { kind?: LabelKind; theme: Theme }) => {
     };
   }
 
-  if (kind === 'outline') {
+  if (kind === 'outline-secondary') {
     return {
+      color: theme.colors.text.main,
+      backgroundColor: 'transparent',
       borderColor: theme.colors.interactive.tonal.neutral[0],
       borderWidth: 1,
       borderStyle: 'solid',
-      backgroundColor: 'transparent',
-      color: theme.colors.text.main,
+      fontWeight: theme.fontWeights.regular,
+    };
+  }
+
+  if (kind === 'outline-warning') {
+    return {
+      color: theme.colors.interactive.solid.alert.default,
+      backgroundColor: theme.colors.interactive.tonal.alert[0],
+      borderColor: theme.colors.interactive.tonal.alert[2],
+      borderWidth: 1,
+      borderStyle: 'solid',
+      fontWeight: theme.fontWeights.regular,
+    };
+  }
+
+  if (kind === 'outline-danger') {
+    return {
+      color: theme.colors.interactive.solid.danger.default,
+      backgroundColor: theme.colors.interactive.tonal.danger[0],
+      borderColor: theme.colors.interactive.tonal.danger[2],
+      borderWidth: 1,
+      borderStyle: 'solid',
       fontWeight: theme.fontWeights.regular,
     };
   }
@@ -73,10 +95,12 @@ const kind = ({ kind, theme }: { kind?: LabelKind; theme: Theme }) => {
 export type LabelKind =
   | 'primary'
   | 'secondary'
-  | 'outline'
   | 'warning'
   | 'danger'
-  | 'success';
+  | 'success'
+  | 'outline-secondary'
+  | 'outline-warning'
+  | 'outline-danger';
 
 interface LabelProps extends SpaceProps {
   kind?: LabelKind;
@@ -107,12 +131,18 @@ export const Primary = (props: LabelPropsWithoutKind) => (
 export const Secondary = (props: LabelPropsWithoutKind) => (
   <Label kind="secondary" {...props} />
 );
-export const Outline = (props: LabelPropsWithoutKind) => (
-  <Label kind="outline" {...props} />
-);
 export const Warning = (props: LabelPropsWithoutKind) => (
   <Label kind="warning" {...props} />
 );
 export const Danger = (props: LabelPropsWithoutKind) => (
   <Label kind="danger" {...props} />
 );
+export const SecondaryOutlined = (props: LabelPropsWithoutKind) => (
+  <Label kind="outline-secondary" {...props} />
+);
+export const WarningOutlined = (props: LabelPropsWithoutKind) => (
+  <Label kind="outline-warning" {...props} />
+);
+export const DangerOutlined = (props: LabelPropsWithoutKind) => (
+  <Label kind="outline-danger" {...props} />
+);
diff --git a/web/packages/design/src/Label/index.ts b/web/packages/design/src/Label/index.ts
index 500af263e629f..c473f82cd189a 100644
--- a/web/packages/design/src/Label/index.ts
+++ b/web/packages/design/src/Label/index.ts
@@ -16,8 +16,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Label, { Danger, Primary, Secondary, Warning } from './Label';
+import Label, {
+  Danger,
+  DangerOutlined,
+  Primary,
+  Secondary,
+  SecondaryOutlined,
+  Warning,
+  WarningOutlined,
+} from './Label';
 
 export default Label;
 export { Primary, Secondary, Warning, Danger };
+export { SecondaryOutlined, WarningOutlined, DangerOutlined };
 export type { LabelKind } from './Label';
diff --git a/web/packages/design/src/ResourceIcon/assets/windows-dark.svg b/web/packages/design/src/ResourceIcon/assets/windows-dark.svg
index 287fa3b0780cc..143573671f1d9 100644
--- a/web/packages/design/src/ResourceIcon/assets/windows-dark.svg
+++ b/web/packages/design/src/ResourceIcon/assets/windows-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none" viewBox="0 0 72 72"><path fill="#4c7f8e" d="m66.53 29.653-.1 34.877c0 .511-.362.718-.808.46L48.063 54.854 37 48.45 18.42 37.74c-.444-.257-.802-.878-.802-1.39l.099-34.876c0-.511.362-.716.806-.46l47.202 27.248c.444.257.804.878.802 1.39z" opacity=".2"/><path fill="#74929f" d="M27.84 56.16v-3.6L39 58.95v3.69z"/><path fill="url(#paint0_linear_7996_40513)" d="m27.84 56.16-2.25 1.26 15.84 9.18L39 62.64z"/><path fill="#5e2ad8" d="m41.43 66.6 3.33-1.98s.99.99.63 1.53-3.06 2.25-3.69 2.25-16.02-9.18-16.02-9.18c-.45-.27-.63-.81-.63-.81s-.45-.72.27-1.08l2.79-1.62-.27.45-2.25 1.26z"/><path fill="#eff1f3" d="m42.33 60.66 2.43 3.96-3.33 1.98L39 62.64z"/><path fill="#83a2ac" d="M42.33 60.66v-2.07H39v4.05z"/><path fill="#eff1f3" d="m60.571 31.773-.099 34.877c0 .254-.092.434-.236.516l-3.276 1.905c.146-.083.234-.263.236-.517l.1-34.877c.001-.51-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.142-.572-.056l3.276-1.904c.146-.087.35-.074.573.055l47.2 27.252c.444.258.804.879.802 1.39"/><path fill="#fff" d="M29.597 47.897a.23.23 0 0 1 .104.18v.888c-.003.066-.05.093-.108.06l-.977-.566a.23.23 0 0 1-.105-.18v-.888c.004-.064.05-.091.108-.059z"/><path fill="#f4f6f7" d="M31.523 49.01a.23.23 0 0 1 .104.18v.887c-.003.067-.05.094-.106.06l-.98-.566a.23.23 0 0 1-.104-.18v-.887c.004-.065.05-.092.107-.06z"/><path fill="#98b3bc" d="m13.942 37.879-.009 3.035-3.342-1.93c-.339-.196-.612-.67-.61-1.058l.005-2.331z"/><path fill="#7c939d" d="m27.471 45.689 28.341 16.364-.007 2.266c0 .426-.304.6-.675.385L10.654 39.022c-.409-.236-.675-.697-.674-1.075 0 .365.272.839.61 1.033l3.343 1.93.01-3.035-.004 3.038 13.525 7.809.009-3.035zm2.228 3.278v-.888a.22.22 0 0 0-.1-.18l-.978-.565c-.057-.032-.104-.007-.104.06v.887a.22.22 0 0 0 .1.18l.978.565c.058.032.104.007.104-.06m1.925 1.112v-.887a.22.22 0 0 0-.101-.18l-.98-.566c-.057-.032-.104-.005-.104.06v.887a.22.22 0 0 0 .101.18l.98.565c.057.033.104.006.104-.059"/><path fill="#fff" d="M48.094 58.556a.25.25 0 0 1 .104.191v.932c0 .067-.048.1-.104.067l-.98-.6a.2.2 0 0 1-.076-.077.2.2 0 0 1-.028-.105v-.924c0-.075.047-.1.103-.066z"/><path fill="#5e2ad8" d="M53.867 61.859a.24.24 0 0 1 .109.191v.931c0 .067-.05.091-.11.058l-1.041-.59a.24.24 0 0 1-.11-.191v-.931c0-.067.051-.092.11-.058z"/><path fill="#f4f6f7" d="M50.021 59.677a.2.2 0 0 1 .077.075q.027.05.026.107v.927c0 .074-.047.1-.103.066l-.974-.588a.26.26 0 0 1-.11-.19v-.927c0-.075.047-.1.102-.066z"/><path fill="#e4eaed" d="M51.94 60.763a.22.22 0 0 1 .11.19v.93c0 .066-.05.09-.11.058l-1.032-.59a.24.24 0 0 1-.118-.19v-.93c0-.066.05-.099.11-.057z"/><path fill="#7c939d" d="m13.945 37.88 13.526 7.81-.01 3.034-13.525-7.808zm2.285 3.51.003-1.284a.3.3 0 0 0-.133-.23l-1.116-.645c-.074-.043-.133-.01-.133.075l-.004 1.284c0 .084.06.187.133.23l1.116.645c.074.041.134.007.134-.076"/><path fill="#fff" d="M16.1 39.875a.3.3 0 0 1 .134.23l-.004 1.284c0 .084-.061.119-.133.075l-1.116-.644a.3.3 0 0 1-.133-.23l.003-1.284c0-.084.061-.119.133-.075zm39.792-5.727-.08 27.902-28.34-16.362-13.526-7.808-3.96-2.286.08-27.904c.001-.427.305-.6.678-.385L55.22 32.984c.371.214.675.738.672 1.164"/><path fill="url(#paint1_linear_7996_40513)" d="m55.892 34.148-.08 27.902-28.34-16.362-13.526-7.808-3.96-2.286.08-27.904c.001-.427.305-.6.678-.385L55.22 32.984c.371.214.675.738.672 1.164" opacity=".8"/><path fill="#fff" d="M10.744 7.306 14.02 5.4l44.476 25.68-3.276 1.904z"/><path fill="silver" d="M37.191 55.53a1.23 1.23 0 0 1 .55.96c0 .354-.25.49-.55.312l-8.081-4.694a1.22 1.22 0 0 1-.55-.96c0-.344.25-.49.56-.312z"/><path fill="#eff1f3" d="m56.584 32.333-47.2-27.25c-.444-.258-.806-.051-.808.46L8.477 40.42c0 .511.359 1.134.803 1.391l18.578 10.712 11.063 6.403L56.48 69.063c.444.258.806.05.808-.46l.099-34.877c0-.511-.358-1.134-.803-1.39zM36.614 56.28l-6.175-3.564a.94.94 0 0 1-.421-.73c0-.266.19-.375.423-.24l6.174 3.565a.93.93 0 0 1 .421.73c0 .266-.19.376-.423.24zm19.198 5.774-.007 2.266c0 .427-.304.6-.677.384L10.573 38.976c-.33-.19-.594-.65-.594-1.12l.086-30.165c0-.427.306-.6.677-.386l44.476 25.68c.37.213.675.737.673 1.164l-.079 27.902"/><path fill="url(#paint2_radial_7996_40513)" d="m56.584 32.333-47.2-27.25c-.444-.258-.806-.051-.808.46L8.477 40.42c0 .511.359 1.134.803 1.391l18.578 10.712 11.063 6.403L56.48 69.063c.444.258.806.05.808-.46l.099-34.877c0-.511-.358-1.134-.803-1.39zm-.772 29.721-.007 2.266c0 .427-.304.6-.677.384L10.573 38.976c-.33-.19-.594-.65-.594-1.12l.086-30.165c0-.427.306-.6.677-.386l44.476 25.68c.37.213.675.737.673 1.164l-.079 27.902"/><path fill="#eff1f3" d="m10.653 39.023-.074-.049-.005.004L28.711 49.45 10.653 39.025zm19.016 10.01s-.018.005-.027.005q.015.001.027-.005m-.035.007a.1.1 0 0 1-.041-.015.1.1 0 0 0 .041.015M11.771 38.28l-.635.368.633.468v-.837zm42.172 24.773s-.01 0-.014.003q.008 0 .014-.003m-1.924-1.11s-.012.003-.02.003q.012.001.02-.004m-.034.006a.1.1 0 0 1-.041-.014.1.1 0 0 0 .04.014m.065-.075-.105.06zm-1.99-1.037a.1.1 0 0 1-.04-.015.1.1 0 0 0 .04.015m.033-.007s-.016.005-.025.005q.014.001.025-.005m-1.924-1.11a.1.1 0 0 1-.032.006q.018.002.032-.007m-16.574-9.577a.1.1 0 0 1-.033.007q.019.002.032-.007m22.064 11.651-.274.159zm-5.774-3.333-.195.113zm-.84-.448c-.017.01-.03.034-.03.066q0-.05.03-.066"/><path fill="#c8d6dc" d="m10.592 38.982.018.01-.016-.01zm1.18-.686-.625.364.623.459v-.823z"/><path fill="#98b3bc" d="m11.771 38.21-.148-.085-.671.39.817.602z"/><path fill="#eff1f3" d="m9.385 5.082 3.277-1.904 47.2 27.25-3.278 1.904z"/><path fill="#5e2ad8" d="m60.571 31.773-.099 34.877c0 .254-.092.434-.236.516l-3.276 1.905c.146-.083.234-.263.236-.517l.1-34.877c.001-.51-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.142-.572-.056l3.276-1.904c.146-.087.35-.074.573.055l47.2 27.252c.444.258.804.879.802 1.39"/><path fill="url(#paint3_radial_7996_40513)" d="m60.571 31.703-.099 34.876c0 .254-.092.434-.236.517L56.96 69c.146-.082.234-.262.236-.516l.1-34.877c.001-.511-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.143-.572-.056l3.276-1.905c.146-.086.35-.073.573.056l47.2 27.25c.444.258.804.879.802 1.39z"/><path fill="#e6eaec" d="m13.01 20.5.983 1.45-.011 3.565v.837l-.428-.612.003-1.039a.27.27 0 0 0-.119-.207l-.437-.252.01-3.744z"/><path fill="#5e2ad8" d="M13.437 24.497c.066.038.12.131.119.207l-.004 1.039v.462c0 .076-.056.106-.122.069l-1.306-.755a.26.26 0 0 1-.118-.207l.003-1.5c0-.076.054-.107.12-.07l.869.501.437.252z"/><path fill="#b0c4c9" d="m15.736 22.073-.01 3.34q.096.216.188.433l-.01.789-1.923-1.118.01-3.564-.982-1.451 2.725 1.573z"/><path fill="#5e2ad8" d="M13.507 32.733c.067.037.12.13.119.207l-.004 1.038v.463c0 .075-.056.106-.122.068l-1.305-.754a.26.26 0 0 1-.119-.207l.004-1.5c0-.075.054-.106.12-.068l.868.5.437.253z"/><path fill="#b0c4c9" d="M16.596 34.747v.282l-2.02-1.166v-.283z"/><path fill="#e6eaec" d="m13.08 28.736.983 1.451-.01 3.57v.831l-.43-.612.005-1.039a.27.27 0 0 0-.12-.207l-.437-.252.011-3.744z"/><path fill="#b0c4c9" d="m16.598 34.293-.002.282-2.018-1.166v-.281zm-.55-2.138v.14l-1.465-.846v-.14z"/><path fill="#e6eaec" d="m16.16 32.45.625.36-.007 2.854-2.348-1.355v-.331l.011-3.284 1.363.787.36.209v.76zm.436 1.673v-.754l-2.016-1.166v.754zm-.002.906v-.283l-2.018-1.166v.282zm0-.454v-.283l-2.018-1.166v.283zm.004-1.384v-.283l-2.018-1.166v.283zm-2.018-1.883v.14l1.465.846v-.14z"/><path fill="#b0c4c9" d="m16.6 33.37-.003.752-2.02-1.165.005-.754zm.002-.461-.002.282-2.018-1.166v-.28zm-.44-1.219.623 1.12-.625-.36z"/><path fill="#b0c4c9" d="m15.805 30.31-.003 1.171-1.363-.786-.009 3.285-.378-.223.009-3.57-.981-1.45z"/><path fill="#5e2ad8" d="m12.886 11.904 3.483 3.276-.009 2.965-3.481-3.272z"/><path fill="#e6eaec" d="m12.463 15.531 2.99 2.893-.135-.007-1.197-.067-2.92-2.86-.144-.14z"/><path fill="#b0c4c9" d="m11.057 15.35.144.14 2.92 2.86 1.197.067.135.007v.122l-1.332-.073-3.066-3.001z"/><path fill="#e6eaec" d="m14.522 16.492.934.879v.045c0 .088-.063.124-.14.079l-.657-.38a.3.3 0 0 1-.139-.24v-.383z"/><path fill="#b0c4c9" d="M14.52 16.74v.136c0 .088.062.196.14.24l.656.38c.078.044.14.008.14-.08v-.045l.638.6c-.05.13-.56-.035-1.179-.393-.653-.376-1.182-.825-1.18-.997 0-.137.329-.063.788.158z"/><path fill="#e6eaec" d="m12.798 11.746 3.66 3.442-.01 3.115-.356-.334-.637-.6-.935-.878-1.731-1.627zm3.562 6.4.009-2.967-3.483-3.274-.009 2.966z"/><path fill="#b0c4c9" d="m13.086 11.83 3.567 3.367-.009 3.114-.196-.008.01-3.115-3.66-3.442z"/><path fill="#5e2ad8" d="M22.133 21.322a.26.26 0 0 1 .119.205l-.004 1.037v.463c0 .075-.056.106-.12.068l-1.307-.754a.26.26 0 0 1-.119-.205l.004-1.502c0-.075.054-.106.12-.068l.868.5.437.252z"/><path fill="#e6eaec" d="m21.706 17.324.162.24.819 1.211-.01 3.733v.668l-.43-.612.004-1.037a.26.26 0 0 0-.119-.205l-.437-.252.01-3.744z"/><path fill="#b0c4c9" d="m24.431 18.897-.002.573-2.224-1.73-.002.151-.335-.344v.017l-.162-.24z"/><path fill="#b0c4c9" d="m21.868 17.548.335.344 1.661 1.71-.009 3.443-.002.684-1.177-1.22.01-3.733-.818-1.212z"/><path fill="#e6eaec" d="m22.205 17.74 2.225 1.73.358.277-.011 4.146-.922-.848.01-3.444-1.662-1.71zm.041 9.29-.004 1.042.907.524c0 .578-.409.81-.91.52-.503-.29-.906-.99-.906-1.567 0-.576.409-.809.91-.519z"/><path fill="#5e2ad8" d="m23.308 30.223 1.61.93-.001.193-1.61-.929zm-1.062-3.193c.502.29.906.99.906 1.566l-.908-.523.004-1.043zm2.677 2.284-.002.699-1.055-.609.002-.7z"/><path fill="#e6eaec" d="m24.925 28.726-.002.588-1.055-.61-.002.7 1.055.609-.002.65-1.055-.609.002-.421v-.094l.004-1.422z"/><path fill="#b0c4c9" d="M25.374 28.357a.2.2 0 0 1 .092.16l-.01 3.616c0 .06-.042.083-.094.052l-4.439-2.563a.2.2 0 0 1-.092-.16l.011-3.616c0-.06.041-.083.094-.054l4.438 2.563zm-.451.955v-.588l-1.053-.609-.004 1.422-.342-.198v-.576l-.373-.216v.047c0-.576-.403-1.276-.905-1.566s-.909-.057-.91.519c0 .577.402 1.278.905 1.567.502.29.909.058.91-.52v.049l.292.169v.576l.423.245v.421l1.055.608v-.65zm-.004 2.033v-.193l-1.61-.929v-.21l-.51-.296v.211l-1.376-.794v.193l1.374.794v.183l.511.295v-.183z"/><path fill="#5e2ad8" d="m23.526 28.765-.002.576.342.198v.093l-.425-.244.002-.575-.292-.169v-.095zm-2.104.563v-.192l1.375.792v.194z"/><path fill="#e6eaec" d="M23.308 30.012v.405l-.002.184-.511-.296.002-.183v-.405z"/><path fill="#b0c4c9" d="M24.294 36.397v.157l-1.254-.726v-.156z"/><path fill="#e6eaec" d="M22.464 35.024c.068.04.122.133.122.21l-.005 1.651c0 .077-.056.11-.123.07l-1.413-.815a.27.27 0 0 1-.122-.21l.005-1.651c0-.078.056-.11.123-.07z"/><path fill="#b0c4c9" d="M22.715 34.824a.37.37 0 0 1 .166.288l-.007 2.24c0 .107-.076.15-.168.096l-1.503-.867-.415-.24a.37.37 0 0 1-.166-.288l.007-2.24c0-.107.076-.148.168-.096l.415.24zm-.137 2.06.006-1.65a.27.27 0 0 0-.122-.21l-1.413-.816c-.069-.04-.123-.007-.123.07l-.005 1.651c0 .077.054.173.122.21l1.413.816c.069.04.122.007.122-.07m1.715.284v.157l-1.255-.724v-.157zm.001-.41-.002.156-1.254-.723.002-.157zm-.702-2.7 1.032 1.751-1.035-.598z"/><path fill="#e6eaec" d="m23.589 35.213 1.037.597-.011 3.995-3.411-1.97.003-1.256 1.503.867c.092.053.168.011.168-.095l.007-2.24a.37.37 0 0 0-.166-.289l-1.503-.867.004-1.27 2.374 1.372-.003 1.154zm.702 2.495v-.157l-1.255-.724v.157zm.002-.792v-.157l-1.255-.724v.157zm0 .41v-.157l-1.255-.723v.156zm.001-.774v-.157l-1.254-.723v.156z"/><path fill="#b0c4c9" d="M24.29 37.55v.157l-1.254-.723v-.159z"/><path fill="#c8d6dc" d="m41.158 31.505-.023 8.2-7.139-4.12.023-8.2zm7.598 4.389-.023 8.199-7.137-4.12.023-8.2zm-7.622 4.342-.024 8.201-7.138-4.122.023-8.199zm7.596 4.387-.023 8.2-7.137-4.12.024-8.2z"/><path fill="#fff" d="m11.844 37.207-.002.956-.832-.48.002-.955zm.886.511-.002.956-.832-.48.002-.955zm-.888.508-.004.954-.831-.48.003-.955zm.886.511-.004.956-.832-.48.004-.956z"/><defs><radialGradient id="paint2_radial_7996_40513" cx="0" cy="0" r="1" gradientTransform="translate(32.932 37.07)scale(28.5336)" gradientUnits="userSpaceOnUse"><stop offset=".41" stop-color="#88959b" stop-opacity=".28"/><stop offset=".615" stop-color="#88959b" stop-opacity=".3"/><stop offset=".87" stop-color="#88959b" stop-opacity=".62"/><stop offset="1" stop-color="#88959b" stop-opacity=".6"/></radialGradient><radialGradient id="paint3_radial_7996_40513" cx="0" cy="0" r="1" gradientTransform="translate(81.937 7.51)scale(86.6808)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".6"/><stop offset=".13" stop-color="#fff" stop-opacity=".42"/><stop offset=".21" stop-color="#fff" stop-opacity=".3"/><stop offset=".54" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="paint0_linear_7996_40513" x1="36.48" x2="25.68" y1="61.019" y2="57.419" gradientUnits="userSpaceOnUse"><stop offset=".107" stop-color="#8cacb7"/><stop offset="1" stop-color="#c9d7dd"/></linearGradient><linearGradient id="paint1_linear_7996_40513" x1="146.23" x2="-5.625" y1="-10.961" y2="50.235" gradientUnits="userSpaceOnUse"><stop offset=".35" stop-color="#4c7f8e" stop-opacity=".5"/><stop offset=".44" stop-color="#4c7f8e" stop-opacity=".47"/><stop offset=".54" stop-color="#4c7f8e" stop-opacity=".37"/><stop offset=".65" stop-color="#4c7f8e" stop-opacity=".21"/><stop offset=".75" stop-color="#4c7f8e" stop-opacity="0"/><stop offset="1" stop-color="#4c7f8e" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none" viewBox="0 0 72 72"><g clip-path="url(#clip0_6706_29760)"><path fill="#0dadea" d="M29.509 37.991V66.16L0 62.092v-24.1zm0-32.15v28.514H0V9.908zM72 37.99V72l-39.245-5.408v-28.6zM72 0v34.355H32.755V5.408z"/></g><defs><clipPath id="clip0_6706_29760"><path fill="#fff" d="M0 0h72v72H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/web/packages/design/src/ResourceIcon/assets/windows-light.svg b/web/packages/design/src/ResourceIcon/assets/windows-light.svg
index 287fa3b0780cc..e5a83e243d1a0 100644
--- a/web/packages/design/src/ResourceIcon/assets/windows-light.svg
+++ b/web/packages/design/src/ResourceIcon/assets/windows-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none" viewBox="0 0 72 72"><path fill="#4c7f8e" d="m66.53 29.653-.1 34.877c0 .511-.362.718-.808.46L48.063 54.854 37 48.45 18.42 37.74c-.444-.257-.802-.878-.802-1.39l.099-34.876c0-.511.362-.716.806-.46l47.202 27.248c.444.257.804.878.802 1.39z" opacity=".2"/><path fill="#74929f" d="M27.84 56.16v-3.6L39 58.95v3.69z"/><path fill="url(#paint0_linear_7996_40513)" d="m27.84 56.16-2.25 1.26 15.84 9.18L39 62.64z"/><path fill="#5e2ad8" d="m41.43 66.6 3.33-1.98s.99.99.63 1.53-3.06 2.25-3.69 2.25-16.02-9.18-16.02-9.18c-.45-.27-.63-.81-.63-.81s-.45-.72.27-1.08l2.79-1.62-.27.45-2.25 1.26z"/><path fill="#eff1f3" d="m42.33 60.66 2.43 3.96-3.33 1.98L39 62.64z"/><path fill="#83a2ac" d="M42.33 60.66v-2.07H39v4.05z"/><path fill="#eff1f3" d="m60.571 31.773-.099 34.877c0 .254-.092.434-.236.516l-3.276 1.905c.146-.083.234-.263.236-.517l.1-34.877c.001-.51-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.142-.572-.056l3.276-1.904c.146-.087.35-.074.573.055l47.2 27.252c.444.258.804.879.802 1.39"/><path fill="#fff" d="M29.597 47.897a.23.23 0 0 1 .104.18v.888c-.003.066-.05.093-.108.06l-.977-.566a.23.23 0 0 1-.105-.18v-.888c.004-.064.05-.091.108-.059z"/><path fill="#f4f6f7" d="M31.523 49.01a.23.23 0 0 1 .104.18v.887c-.003.067-.05.094-.106.06l-.98-.566a.23.23 0 0 1-.104-.18v-.887c.004-.065.05-.092.107-.06z"/><path fill="#98b3bc" d="m13.942 37.879-.009 3.035-3.342-1.93c-.339-.196-.612-.67-.61-1.058l.005-2.331z"/><path fill="#7c939d" d="m27.471 45.689 28.341 16.364-.007 2.266c0 .426-.304.6-.675.385L10.654 39.022c-.409-.236-.675-.697-.674-1.075 0 .365.272.839.61 1.033l3.343 1.93.01-3.035-.004 3.038 13.525 7.809.009-3.035zm2.228 3.278v-.888a.22.22 0 0 0-.1-.18l-.978-.565c-.057-.032-.104-.007-.104.06v.887a.22.22 0 0 0 .1.18l.978.565c.058.032.104.007.104-.06m1.925 1.112v-.887a.22.22 0 0 0-.101-.18l-.98-.566c-.057-.032-.104-.005-.104.06v.887a.22.22 0 0 0 .101.18l.98.565c.057.033.104.006.104-.059"/><path fill="#fff" d="M48.094 58.556a.25.25 0 0 1 .104.191v.932c0 .067-.048.1-.104.067l-.98-.6a.2.2 0 0 1-.076-.077.2.2 0 0 1-.028-.105v-.924c0-.075.047-.1.103-.066z"/><path fill="#5e2ad8" d="M53.867 61.859a.24.24 0 0 1 .109.191v.931c0 .067-.05.091-.11.058l-1.041-.59a.24.24 0 0 1-.11-.191v-.931c0-.067.051-.092.11-.058z"/><path fill="#f4f6f7" d="M50.021 59.677a.2.2 0 0 1 .077.075q.027.05.026.107v.927c0 .074-.047.1-.103.066l-.974-.588a.26.26 0 0 1-.11-.19v-.927c0-.075.047-.1.102-.066z"/><path fill="#e4eaed" d="M51.94 60.763a.22.22 0 0 1 .11.19v.93c0 .066-.05.09-.11.058l-1.032-.59a.24.24 0 0 1-.118-.19v-.93c0-.066.05-.099.11-.057z"/><path fill="#7c939d" d="m13.945 37.88 13.526 7.81-.01 3.034-13.525-7.808zm2.285 3.51.003-1.284a.3.3 0 0 0-.133-.23l-1.116-.645c-.074-.043-.133-.01-.133.075l-.004 1.284c0 .084.06.187.133.23l1.116.645c.074.041.134.007.134-.076"/><path fill="#fff" d="M16.1 39.875a.3.3 0 0 1 .134.23l-.004 1.284c0 .084-.061.119-.133.075l-1.116-.644a.3.3 0 0 1-.133-.23l.003-1.284c0-.084.061-.119.133-.075zm39.792-5.727-.08 27.902-28.34-16.362-13.526-7.808-3.96-2.286.08-27.904c.001-.427.305-.6.678-.385L55.22 32.984c.371.214.675.738.672 1.164"/><path fill="url(#paint1_linear_7996_40513)" d="m55.892 34.148-.08 27.902-28.34-16.362-13.526-7.808-3.96-2.286.08-27.904c.001-.427.305-.6.678-.385L55.22 32.984c.371.214.675.738.672 1.164" opacity=".8"/><path fill="#fff" d="M10.744 7.306 14.02 5.4l44.476 25.68-3.276 1.904z"/><path fill="silver" d="M37.191 55.53a1.23 1.23 0 0 1 .55.96c0 .354-.25.49-.55.312l-8.081-4.694a1.22 1.22 0 0 1-.55-.96c0-.344.25-.49.56-.312z"/><path fill="#eff1f3" d="m56.584 32.333-47.2-27.25c-.444-.258-.806-.051-.808.46L8.477 40.42c0 .511.359 1.134.803 1.391l18.578 10.712 11.063 6.403L56.48 69.063c.444.258.806.05.808-.46l.099-34.877c0-.511-.358-1.134-.803-1.39zM36.614 56.28l-6.175-3.564a.94.94 0 0 1-.421-.73c0-.266.19-.375.423-.24l6.174 3.565a.93.93 0 0 1 .421.73c0 .266-.19.376-.423.24zm19.198 5.774-.007 2.266c0 .427-.304.6-.677.384L10.573 38.976c-.33-.19-.594-.65-.594-1.12l.086-30.165c0-.427.306-.6.677-.386l44.476 25.68c.37.213.675.737.673 1.164l-.079 27.902"/><path fill="url(#paint2_radial_7996_40513)" d="m56.584 32.333-47.2-27.25c-.444-.258-.806-.051-.808.46L8.477 40.42c0 .511.359 1.134.803 1.391l18.578 10.712 11.063 6.403L56.48 69.063c.444.258.806.05.808-.46l.099-34.877c0-.511-.358-1.134-.803-1.39zm-.772 29.721-.007 2.266c0 .427-.304.6-.677.384L10.573 38.976c-.33-.19-.594-.65-.594-1.12l.086-30.165c0-.427.306-.6.677-.386l44.476 25.68c.37.213.675.737.673 1.164l-.079 27.902"/><path fill="#eff1f3" d="m10.653 39.023-.074-.049-.005.004L28.711 49.45 10.653 39.025zm19.016 10.01s-.018.005-.027.005q.015.001.027-.005m-.035.007a.1.1 0 0 1-.041-.015.1.1 0 0 0 .041.015M11.771 38.28l-.635.368.633.468v-.837zm42.172 24.773s-.01 0-.014.003q.008 0 .014-.003m-1.924-1.11s-.012.003-.02.003q.012.001.02-.004m-.034.006a.1.1 0 0 1-.041-.014.1.1 0 0 0 .04.014m.065-.075-.105.06zm-1.99-1.037a.1.1 0 0 1-.04-.015.1.1 0 0 0 .04.015m.033-.007s-.016.005-.025.005q.014.001.025-.005m-1.924-1.11a.1.1 0 0 1-.032.006q.018.002.032-.007m-16.574-9.577a.1.1 0 0 1-.033.007q.019.002.032-.007m22.064 11.651-.274.159zm-5.774-3.333-.195.113zm-.84-.448c-.017.01-.03.034-.03.066q0-.05.03-.066"/><path fill="#c8d6dc" d="m10.592 38.982.018.01-.016-.01zm1.18-.686-.625.364.623.459v-.823z"/><path fill="#98b3bc" d="m11.771 38.21-.148-.085-.671.39.817.602z"/><path fill="#eff1f3" d="m9.385 5.082 3.277-1.904 47.2 27.25-3.278 1.904z"/><path fill="#5e2ad8" d="m60.571 31.773-.099 34.877c0 .254-.092.434-.236.516l-3.276 1.905c.146-.083.234-.263.236-.517l.1-34.877c.001-.51-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.142-.572-.056l3.276-1.904c.146-.087.35-.074.573.055l47.2 27.252c.444.258.804.879.802 1.39"/><path fill="url(#paint3_radial_7996_40513)" d="m60.571 31.703-.099 34.876c0 .254-.092.434-.236.517L56.96 69c.146-.082.234-.262.236-.516l.1-34.877c.001-.511-.359-1.134-.804-1.39l-47.2-27.25c-.222-.13-.426-.143-.572-.056l3.276-1.905c.146-.086.35-.073.573.056l47.2 27.25c.444.258.804.879.802 1.39z"/><path fill="#e6eaec" d="m13.01 20.5.983 1.45-.011 3.565v.837l-.428-.612.003-1.039a.27.27 0 0 0-.119-.207l-.437-.252.01-3.744z"/><path fill="#5e2ad8" d="M13.437 24.497c.066.038.12.131.119.207l-.004 1.039v.462c0 .076-.056.106-.122.069l-1.306-.755a.26.26 0 0 1-.118-.207l.003-1.5c0-.076.054-.107.12-.07l.869.501.437.252z"/><path fill="#b0c4c9" d="m15.736 22.073-.01 3.34q.096.216.188.433l-.01.789-1.923-1.118.01-3.564-.982-1.451 2.725 1.573z"/><path fill="#5e2ad8" d="M13.507 32.733c.067.037.12.13.119.207l-.004 1.038v.463c0 .075-.056.106-.122.068l-1.305-.754a.26.26 0 0 1-.119-.207l.004-1.5c0-.075.054-.106.12-.068l.868.5.437.253z"/><path fill="#b0c4c9" d="M16.596 34.747v.282l-2.02-1.166v-.283z"/><path fill="#e6eaec" d="m13.08 28.736.983 1.451-.01 3.57v.831l-.43-.612.005-1.039a.27.27 0 0 0-.12-.207l-.437-.252.011-3.744z"/><path fill="#b0c4c9" d="m16.598 34.293-.002.282-2.018-1.166v-.281zm-.55-2.138v.14l-1.465-.846v-.14z"/><path fill="#e6eaec" d="m16.16 32.45.625.36-.007 2.854-2.348-1.355v-.331l.011-3.284 1.363.787.36.209v.76zm.436 1.673v-.754l-2.016-1.166v.754zm-.002.906v-.283l-2.018-1.166v.282zm0-.454v-.283l-2.018-1.166v.283zm.004-1.384v-.283l-2.018-1.166v.283zm-2.018-1.883v.14l1.465.846v-.14z"/><path fill="#b0c4c9" d="m16.6 33.37-.003.752-2.02-1.165.005-.754zm.002-.461-.002.282-2.018-1.166v-.28zm-.44-1.219.623 1.12-.625-.36z"/><path fill="#b0c4c9" d="m15.805 30.31-.003 1.171-1.363-.786-.009 3.285-.378-.223.009-3.57-.981-1.45z"/><path fill="#5e2ad8" d="m12.886 11.904 3.483 3.276-.009 2.965-3.481-3.272z"/><path fill="#e6eaec" d="m12.463 15.531 2.99 2.893-.135-.007-1.197-.067-2.92-2.86-.144-.14z"/><path fill="#b0c4c9" d="m11.057 15.35.144.14 2.92 2.86 1.197.067.135.007v.122l-1.332-.073-3.066-3.001z"/><path fill="#e6eaec" d="m14.522 16.492.934.879v.045c0 .088-.063.124-.14.079l-.657-.38a.3.3 0 0 1-.139-.24v-.383z"/><path fill="#b0c4c9" d="M14.52 16.74v.136c0 .088.062.196.14.24l.656.38c.078.044.14.008.14-.08v-.045l.638.6c-.05.13-.56-.035-1.179-.393-.653-.376-1.182-.825-1.18-.997 0-.137.329-.063.788.158z"/><path fill="#e6eaec" d="m12.798 11.746 3.66 3.442-.01 3.115-.356-.334-.637-.6-.935-.878-1.731-1.627zm3.562 6.4.009-2.967-3.483-3.274-.009 2.966z"/><path fill="#b0c4c9" d="m13.086 11.83 3.567 3.367-.009 3.114-.196-.008.01-3.115-3.66-3.442z"/><path fill="#5e2ad8" d="M22.133 21.322a.26.26 0 0 1 .119.205l-.004 1.037v.463c0 .075-.056.106-.12.068l-1.307-.754a.26.26 0 0 1-.119-.205l.004-1.502c0-.075.054-.106.12-.068l.868.5.437.252z"/><path fill="#e6eaec" d="m21.706 17.324.162.24.819 1.211-.01 3.733v.668l-.43-.612.004-1.037a.26.26 0 0 0-.119-.205l-.437-.252.01-3.744z"/><path fill="#b0c4c9" d="m24.431 18.897-.002.573-2.224-1.73-.002.151-.335-.344v.017l-.162-.24z"/><path fill="#b0c4c9" d="m21.868 17.548.335.344 1.661 1.71-.009 3.443-.002.684-1.177-1.22.01-3.733-.818-1.212z"/><path fill="#e6eaec" d="m22.205 17.74 2.225 1.73.358.277-.011 4.146-.922-.848.01-3.444-1.662-1.71zm.041 9.29-.004 1.042.907.524c0 .578-.409.81-.91.52-.503-.29-.906-.99-.906-1.567 0-.576.409-.809.91-.519z"/><path fill="#5e2ad8" d="m23.308 30.223 1.61.93-.001.193-1.61-.929zm-1.062-3.193c.502.29.906.99.906 1.566l-.908-.523.004-1.043zm2.677 2.284-.002.699-1.055-.609.002-.7z"/><path fill="#e6eaec" d="m24.925 28.726-.002.588-1.055-.61-.002.7 1.055.609-.002.65-1.055-.609.002-.421v-.094l.004-1.422z"/><path fill="#b0c4c9" d="M25.374 28.357a.2.2 0 0 1 .092.16l-.01 3.616c0 .06-.042.083-.094.052l-4.439-2.563a.2.2 0 0 1-.092-.16l.011-3.616c0-.06.041-.083.094-.054l4.438 2.563zm-.451.955v-.588l-1.053-.609-.004 1.422-.342-.198v-.576l-.373-.216v.047c0-.576-.403-1.276-.905-1.566s-.909-.057-.91.519c0 .577.402 1.278.905 1.567.502.29.909.058.91-.52v.049l.292.169v.576l.423.245v.421l1.055.608v-.65zm-.004 2.033v-.193l-1.61-.929v-.21l-.51-.296v.211l-1.376-.794v.193l1.374.794v.183l.511.295v-.183z"/><path fill="#5e2ad8" d="m23.526 28.765-.002.576.342.198v.093l-.425-.244.002-.575-.292-.169v-.095zm-2.104.563v-.192l1.375.792v.194z"/><path fill="#e6eaec" d="M23.308 30.012v.405l-.002.184-.511-.296.002-.183v-.405z"/><path fill="#b0c4c9" d="M24.294 36.397v.157l-1.254-.726v-.156z"/><path fill="#e6eaec" d="M22.464 35.024c.068.04.122.133.122.21l-.005 1.651c0 .077-.056.11-.123.07l-1.413-.815a.27.27 0 0 1-.122-.21l.005-1.651c0-.078.056-.11.123-.07z"/><path fill="#b0c4c9" d="M22.715 34.824a.37.37 0 0 1 .166.288l-.007 2.24c0 .107-.076.15-.168.096l-1.503-.867-.415-.24a.37.37 0 0 1-.166-.288l.007-2.24c0-.107.076-.148.168-.096l.415.24zm-.137 2.06.006-1.65a.27.27 0 0 0-.122-.21l-1.413-.816c-.069-.04-.123-.007-.123.07l-.005 1.651c0 .077.054.173.122.21l1.413.816c.069.04.122.007.122-.07m1.715.284v.157l-1.255-.724v-.157zm.001-.41-.002.156-1.254-.723.002-.157zm-.702-2.7 1.032 1.751-1.035-.598z"/><path fill="#e6eaec" d="m23.589 35.213 1.037.597-.011 3.995-3.411-1.97.003-1.256 1.503.867c.092.053.168.011.168-.095l.007-2.24a.37.37 0 0 0-.166-.289l-1.503-.867.004-1.27 2.374 1.372-.003 1.154zm.702 2.495v-.157l-1.255-.724v.157zm.002-.792v-.157l-1.255-.724v.157zm0 .41v-.157l-1.255-.723v.156zm.001-.774v-.157l-1.254-.723v.156z"/><path fill="#b0c4c9" d="M24.29 37.55v.157l-1.254-.723v-.159z"/><path fill="#c8d6dc" d="m41.158 31.505-.023 8.2-7.139-4.12.023-8.2zm7.598 4.389-.023 8.199-7.137-4.12.023-8.2zm-7.622 4.342-.024 8.201-7.138-4.122.023-8.199zm7.596 4.387-.023 8.2-7.137-4.12.024-8.2z"/><path fill="#fff" d="m11.844 37.207-.002.956-.832-.48.002-.955zm.886.511-.002.956-.832-.48.002-.955zm-.888.508-.004.954-.831-.48.003-.955zm.886.511-.004.956-.832-.48.004-.956z"/><defs><radialGradient id="paint2_radial_7996_40513" cx="0" cy="0" r="1" gradientTransform="translate(32.932 37.07)scale(28.5336)" gradientUnits="userSpaceOnUse"><stop offset=".41" stop-color="#88959b" stop-opacity=".28"/><stop offset=".615" stop-color="#88959b" stop-opacity=".3"/><stop offset=".87" stop-color="#88959b" stop-opacity=".62"/><stop offset="1" stop-color="#88959b" stop-opacity=".6"/></radialGradient><radialGradient id="paint3_radial_7996_40513" cx="0" cy="0" r="1" gradientTransform="translate(81.937 7.51)scale(86.6808)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".6"/><stop offset=".13" stop-color="#fff" stop-opacity=".42"/><stop offset=".21" stop-color="#fff" stop-opacity=".3"/><stop offset=".54" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="paint0_linear_7996_40513" x1="36.48" x2="25.68" y1="61.019" y2="57.419" gradientUnits="userSpaceOnUse"><stop offset=".107" stop-color="#8cacb7"/><stop offset="1" stop-color="#c9d7dd"/></linearGradient><linearGradient id="paint1_linear_7996_40513" x1="146.23" x2="-5.625" y1="-10.961" y2="50.235" gradientUnits="userSpaceOnUse"><stop offset=".35" stop-color="#4c7f8e" stop-opacity=".5"/><stop offset=".44" stop-color="#4c7f8e" stop-opacity=".47"/><stop offset=".54" stop-color="#4c7f8e" stop-opacity=".37"/><stop offset=".65" stop-color="#4c7f8e" stop-opacity=".21"/><stop offset=".75" stop-color="#4c7f8e" stop-opacity="0"/><stop offset="1" stop-color="#4c7f8e" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none" viewBox="0 0 72 72"><g clip-path="url(#clip0_6706_29761)"><path fill="#0078d4" d="M29.509 37.991V66.16L0 62.092v-24.1zm0-32.15v28.514H0V9.908zM72 37.99V72l-39.245-5.408v-28.6zM72 0v34.355H32.755V5.408z"/></g><defs><clipPath id="clip0_6706_29761"><path fill="#fff" d="M0 0h72v72H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/web/packages/design/src/labels.story.jsx b/web/packages/design/src/labels.story.jsx
index a90498d8d2bc9..5e4f8eba3cf0b 100644
--- a/web/packages/design/src/labels.story.jsx
+++ b/web/packages/design/src/labels.story.jsx
@@ -31,56 +31,60 @@ export const Labels = () => (
       bg="levels.surface"
       justifyContent="center"
       alignItems="center"
+      gap={4}
     >
-      <Label mr={4} kind="primary">
+      <Label kind="primary">Primary</Label>
+      <Label kind="secondary">Secondary</Label>
+      <Label kind="warning">Warning</Label>
+      <Label kind="danger">Danger</Label>
+      <Label kind="success">Success</Label>
+    </Flex>
+    <Flex
+      height="100px"
+      bg="levels.surface"
+      justifyContent="center"
+      alignItems="center"
+      gap={4}
+    >
+      <Label kind="primary" css={{ visibility: 'hidden' }}>
         Primary
       </Label>
-      <Label mr={4} kind="secondary">
-        Secondary
-      </Label>
-      <Label mr={4} kind="outline">
-        Outline
-      </Label>
-      <Label mr={4} kind="warning">
-        Warning
+      <Label kind="outline-secondary">Secondary</Label>
+      <Label kind="outline-warning">Warning</Label>
+      <Label kind="outline-danger">Danger</Label>
+      <Label kind="success" css={{ visibility: 'hidden' }}>
+        Success
       </Label>
-      <Label kind="danger">Danger</Label>
     </Flex>
     <Flex
       height="100px"
       bg="levels.surface"
       justifyContent="center"
       alignItems="center"
+      gap={4}
     >
-      <LabelState mr="4" kind="success">
-        Success
-      </LabelState>
-      <LabelState mr="4" kind="secondary">
-        Secondary
-      </LabelState>
-      <LabelState mr="4" kind="warning">
-        Warning
-      </LabelState>
-      <LabelState mr="4" kind="danger">
-        Danger
-      </LabelState>
+      <LabelState kind="success">Success</LabelState>
+      <LabelState kind="secondary">Secondary</LabelState>
+      <LabelState kind="warning">Warning</LabelState>
+      <LabelState kind="danger">Danger</LabelState>
     </Flex>
     <Flex
       height="100px"
       bg="levels.surface"
       justifyContent="center"
       alignItems="center"
+      gap={4}
     >
-      <LabelState shadow mr="4" kind="success">
+      <LabelState shadow kind="success">
         Success
       </LabelState>
-      <LabelState shadow mr="4" kind="secondary">
+      <LabelState shadow kind="secondary">
         Secondary
       </LabelState>
-      <LabelState shadow mr="4" kind="warning">
+      <LabelState shadow kind="warning">
         Warning
       </LabelState>
-      <LabelState shadow mr="4" kind="danger">
+      <LabelState shadow kind="danger">
         Danger
       </LabelState>
     </Flex>
diff --git a/web/packages/shared/package.json b/web/packages/shared/package.json
index f1c1090de2afc..13940570bfa8c 100644
--- a/web/packages/shared/package.json
+++ b/web/packages/shared/package.json
@@ -17,6 +17,10 @@
     "@xterm/addon-search": "^0.15.0",
     "ace-builds": "1.41.0",
     "events": "3.3.0",
-    "highlight-words-core": "^1.2.3"
+    "highlight-words-core": "^1.2.3",
+    "semver": "^7.7.2"
+  },
+  "devDependencies": {
+    "@types/semver": "^7.7.0"
   }
 }
diff --git a/web/packages/shared/utils/semVer.test.ts b/web/packages/shared/utils/semVer.test.ts
index e215d41a9115f..3722f69e080b6 100644
--- a/web/packages/shared/utils/semVer.test.ts
+++ b/web/packages/shared/utils/semVer.test.ts
@@ -1,19 +1,17 @@
 /**
- * Teleport
- * Copyright (C) 2023  Gravitational, Inc.
+ * Copyright 2023 Gravitational, Inc
  *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
 import { compareSemVers } from './semVer';
@@ -42,6 +40,4 @@ test('compareSemVers', () => {
     '10.1.0',
     '11.1.0',
   ]);
-
-  expect(compareSemVers('1.0.0', '1.0.0')).toBe(0);
 });
diff --git a/web/packages/shared/utils/semVer.ts b/web/packages/shared/utils/semVer.ts
index bee92a73d7feb..1c4d94eb83f4f 100644
--- a/web/packages/shared/utils/semVer.ts
+++ b/web/packages/shared/utils/semVer.ts
@@ -16,31 +16,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export const compareSemVers = (a: string, b: string): -1 | 1 | 0 => {
-  const splitA = a.split('.');
-  const splitB = b.split('.');
+import compare from 'semver/functions/compare';
+import major from 'semver/functions/major';
+import parse from 'semver/functions/parse';
 
-  if (splitA.length < 3 || splitB.length < 3) {
-    return -1;
-  }
+// Re-export specific functions from `semver/functions/*` to avoid bundling
+// the full semver package.
 
-  const majorA = parseInt(splitA[0]);
-  const majorB = parseInt(splitB[0]);
-  if (majorA !== majorB) {
-    return majorA > majorB ? 1 : -1;
-  }
-
-  const minorA = parseInt(splitA[1]);
-  const minorB = parseInt(splitB[1]);
-  if (minorA !== minorB) {
-    return minorA > minorB ? 1 : -1;
-  }
-
-  const patchA = parseInt(splitA[2].split('-')[0]);
-  const patchB = parseInt(splitB[2].split('-')[0]);
-  if (patchA !== patchB) {
-    return patchA > patchB ? 1 : -1;
-  }
-
-  return 0;
+export {
+  compare,
+  /** @deprecated Import `compare` from `shared/utils/semver`. */
+  compare as compareSemVers,
+  major,
+  parse,
 };
diff --git a/web/packages/teleport/src/Bots/Details/BotDetails.story.tsx b/web/packages/teleport/src/Bots/Details/BotDetails.story.tsx
index e2a6de9295754..1c9f8502b48d0 100644
--- a/web/packages/teleport/src/Bots/Details/BotDetails.story.tsx
+++ b/web/packages/teleport/src/Bots/Details/BotDetails.story.tsx
@@ -20,10 +20,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createMemoryHistory } from 'history';
 import { MemoryRouter, Route, Router } from 'react-router';
 
+import Box from 'design/Box';
+
 import cfg from 'teleport/config';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import { TeleportProviderBasic } from 'teleport/mocks/providers';
 import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
+import { listBotInstancesSuccess } from 'teleport/test/helpers/botInstances';
 import {
   editBotSuccess,
   getBotError,
@@ -39,6 +42,7 @@ import {
 } from 'teleport/test/helpers/tokens';
 
 import { BotDetails } from './BotDetails';
+import { listBotInstancesSuccessHandler } from './InstancesPanel.story';
 
 const meta = {
   title: 'Teleport/Bots/Details',
@@ -84,6 +88,7 @@ export const Happy: Story = {
       handlers: [
         successHandler,
         listV2TokensSuccess(),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: Array.from({ length: 10 }, (_, k) => k).map(r => ({
@@ -115,6 +120,10 @@ export const HappyWithEmpty: Story = {
           isEmpty: true,
         }),
         mfaAuthnChallengeSuccess(),
+        listBotInstancesSuccess({
+          bot_instances: [],
+          next_page_token: '',
+        }),
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -139,6 +148,7 @@ export const HappyWithoutEditPermission: Story = {
       handlers: [
         successHandler,
         listV2TokensSuccess(),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -163,6 +173,7 @@ export const HappyWithoutTokenListPermission: Story = {
       handlers: [
         successHandler,
         listV2TokensSuccess(),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -185,6 +196,7 @@ export const HappyWithMFAPrompt: Story = {
         successHandler,
         listV2TokensMfaError(),
         mfaAuthnChallengeSuccess(),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -206,6 +218,7 @@ export const HappyWithTokensError: Story = {
       handlers: [
         successHandler,
         listV2TokensError(500, 'something went wrong'),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -235,6 +248,32 @@ export const HappyWithTokensOutdatedProxy: Story = {
             string: '18.0.0',
           },
         }),
+        listBotInstancesSuccessHandler,
+        successGetRoles({
+          startKey: '',
+          items: ['access', 'editor', 'terraform-provider'].map(r => ({
+            content: r,
+            id: r,
+            name: r,
+            kind: 'role',
+          })),
+        }),
+        editBotSuccess(),
+      ],
+    },
+  },
+};
+
+export const HappyWithoutBotInstanceListPermission: Story = {
+  args: {
+    hasBotInstanceListPermission: false,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        successHandler,
+        listV2TokensSuccess(),
+        listBotInstancesSuccessHandler,
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({
@@ -298,11 +337,13 @@ function Wrapper(props?: {
   hasBotsRead?: boolean;
   hasBotsEdit?: boolean;
   hasTokensList?: boolean;
+  hasBotInstanceListPermission?: boolean;
 }) {
   const {
     hasBotsRead = true,
     hasBotsEdit = true,
     hasTokensList = true,
+    hasBotInstanceListPermission = true,
   } = props ?? {};
 
   const history = createMemoryHistory({
@@ -323,6 +364,10 @@ function Wrapper(props?: {
       ...defaultAccess,
       list: hasTokensList,
     },
+    botInstances: {
+      ...defaultAccess,
+      list: hasBotInstanceListPermission,
+    },
   });
 
   const ctx = createTeleportContext({
@@ -335,7 +380,9 @@ function Wrapper(props?: {
         <TeleportProviderBasic teleportCtx={ctx}>
           <Router history={history}>
             <Route path={cfg.routes.bot}>
-              <BotDetails />
+              <Box height={800} overflow={'auto'}>
+                <BotDetails />
+              </Box>
             </Route>
           </Router>
         </TeleportProviderBasic>
diff --git a/web/packages/teleport/src/Bots/Details/BotDetails.test.tsx b/web/packages/teleport/src/Bots/Details/BotDetails.test.tsx
index ce98735a62f88..f8a32106cb3df 100644
--- a/web/packages/teleport/src/Bots/Details/BotDetails.test.tsx
+++ b/web/packages/teleport/src/Bots/Details/BotDetails.test.tsx
@@ -39,6 +39,7 @@ import { ContextProvider } from 'teleport/index';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import { EditBotRequest } from 'teleport/services/bot/types';
 import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
+import { listBotInstancesSuccess } from 'teleport/test/helpers/botInstances';
 import {
   editBotSuccess,
   getBotError,
@@ -72,15 +73,15 @@ describe('BotDetails', () => {
   it('should show a page error state', async () => {
     withFetchError();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
-    expect(screen.getByText('Error: something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('something went wrong')).toBeInTheDocument();
   });
 
   it('should show a not found error state', async () => {
     withFetchError(404, 'not_found');
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
     expect(
       screen.getByText('Bot test-bot-name does not exist')
@@ -95,8 +96,9 @@ describe('BotDetails', () => {
 
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent({ history });
-    await waitForLoading();
+    await waitForLoadingBot();
 
     const backButton = screen.getByLabelText('back');
     fireEvent.click(backButton);
@@ -107,8 +109,9 @@ describe('BotDetails', () => {
   it('should show page title', async () => {
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
     const pageHeader = screen.getByTestId('page-header');
     expect(pageHeader).toBeInTheDocument();
@@ -119,8 +122,9 @@ describe('BotDetails', () => {
   it('should show bot metadata', async () => {
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
     const panel = screen
       .getByRole('heading', { name: 'Metadata' })
@@ -134,8 +138,9 @@ describe('BotDetails', () => {
   it('should show bot roles', async () => {
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
     const panel = screen
       .getByRole('heading', { name: 'Roles' })
@@ -149,8 +154,9 @@ describe('BotDetails', () => {
   it('should show bot traits', async () => {
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
 
     const panel = screen
       .getByRole('heading', { name: 'Traits' })
@@ -166,8 +172,10 @@ describe('BotDetails', () => {
   it('should show bot join tokens', async () => {
     withFetchSuccess();
     withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
+    await waitForLoadingTokens();
 
     const panel = screen
       .getByRole('heading', { name: 'Join Tokens' })
@@ -182,8 +190,10 @@ describe('BotDetails', () => {
   it('should show bot join tokens outdated proxy warning', async () => {
     withFetchSuccess();
     withFetchJoinTokensOutdatedProxy();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
+    await waitForLoadingTokens();
 
     const panel = screen
       .getByRole('heading', { name: 'Join Tokens' })
@@ -192,7 +202,7 @@ describe('BotDetails', () => {
 
     expect(
       within(panel!).getByText(
-        'Error: We could not complete your request. Your proxy (v18.0.0) may be behind the minimum required version (v18.1.0) to support this request. Ensure all proxies are upgraded and try again.'
+        'We could not complete your request. Your proxy (v18.0.0) may be behind the minimum required version (v18.1.0) to support this request. Ensure all proxies are upgraded and try again.'
       )
     ).toBeInTheDocument();
   });
@@ -200,8 +210,10 @@ describe('BotDetails', () => {
   it('should show bot join tokens mfa message', async () => {
     withFetchSuccess();
     withFetchJoinTokensMfaError();
+    withFetchInstancesSuccess();
     renderComponent();
-    await waitForLoading();
+    await waitForLoadingBot();
+    await waitForLoadingTokens();
 
     const panel = screen
       .getByRole('heading', { name: 'Join Tokens' })
@@ -215,6 +227,24 @@ describe('BotDetails', () => {
     ).toBeInTheDocument();
   });
 
+  it('should show bot instances', async () => {
+    withFetchSuccess();
+    withFetchJoinTokensSuccess();
+    withFetchInstancesSuccess();
+    renderComponent();
+    await waitForLoadingBot();
+    await waitForLoadingInstances();
+
+    const panel = screen
+      .getByRole('heading', { name: 'Active Instances' })
+      .closest('section');
+    expect(panel).toBeInTheDocument();
+
+    expect(
+      within(panel!).getByText('c11250e0-00c2-4f52-bcdf-b367f80b9461')
+    ).toBeInTheDocument();
+  });
+
   it('should show an unauthorised error state', async () => {
     renderComponent({
       customAcl: makeAcl({
@@ -235,6 +265,7 @@ describe('BotDetails', () => {
     it('should disable edit action if no edit permission', async () => {
       withFetchSuccess();
       withFetchJoinTokensSuccess();
+      withFetchInstancesSuccess();
       renderComponent({
         customAcl: makeAcl({
           bots: {
@@ -243,7 +274,7 @@ describe('BotDetails', () => {
           },
         }),
       });
-      await waitForLoading();
+      await waitForLoadingBot();
 
       expect(screen.getByText('Edit Bot')).toBeDisabled();
       expect(screen.getByText('Edit')).toBeDisabled();
@@ -252,8 +283,9 @@ describe('BotDetails', () => {
     it('should show edit form on edit action', async () => {
       withFetchSuccess();
       withFetchJoinTokensSuccess();
+      withFetchInstancesSuccess();
       renderComponent();
-      await waitForLoading();
+      await waitForLoadingBot();
 
       withFetchRolesSuccess();
       const editButton = screen.getByRole('button', { name: 'Edit Bot' });
@@ -274,8 +306,9 @@ describe('BotDetails', () => {
     it("should update the bot's details on edit success", async () => {
       withFetchSuccess();
       withFetchJoinTokensSuccess();
+      withFetchInstancesSuccess();
       renderComponent();
-      await waitForLoading();
+      await waitForLoadingBot();
 
       let configPanel = screen
         .getByRole('heading', { name: 'Metadata' })
@@ -358,8 +391,18 @@ const renderComponent = (options?: {
   });
 };
 
-const waitForLoading = async () => {
-  await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
+const waitForLoadingBot = async () => {
+  await waitForElementToBeRemoved(() => screen.queryByTestId('loading-bot'));
+};
+
+const waitForLoadingTokens = async () => {
+  await waitForElementToBeRemoved(() => screen.queryByTestId('loading-tokens'));
+};
+
+const waitForLoadingInstances = async () => {
+  await waitForElementToBeRemoved(() =>
+    screen.queryByTestId('loading-instances')
+  );
 };
 
 const withFetchError = (status = 500, message = 'something went wrong') => {
@@ -392,6 +435,25 @@ const withFetchJoinTokensOutdatedProxy = () => {
   );
 };
 
+function withFetchInstancesSuccess() {
+  server.use(
+    listBotInstancesSuccess({
+      bot_instances: [
+        {
+          bot_name: 'ansible-worker',
+          instance_id: 'c11250e0-00c2-4f52-bcdf-b367f80b9461',
+          active_at_latest: '2025-07-22T10:54:00Z',
+          host_name_latest: 'svr-lon-01-ab23cd',
+          join_method_latest: 'github',
+          os_latest: 'linux',
+          version_latest: '4.4.16',
+        },
+      ],
+      next_page_token: '',
+    })
+  );
+}
+
 const withSaveSuccess = (
   version: 1 | 2 = 2,
   overrides?: Partial<EditBotRequest>
@@ -430,6 +492,10 @@ function makeWrapper(options?: {
         ...defaultAccess,
         list: true,
       },
+      botInstances: {
+        ...defaultAccess,
+        list: true,
+      },
     }),
   } = options ?? {};
   return ({ children }: PropsWithChildren) => {
diff --git a/web/packages/teleport/src/Bots/Details/BotDetails.tsx b/web/packages/teleport/src/Bots/Details/BotDetails.tsx
index d522e42f99bb2..4236677df46e5 100644
--- a/web/packages/teleport/src/Bots/Details/BotDetails.tsx
+++ b/web/packages/teleport/src/Bots/Details/BotDetails.tsx
@@ -24,6 +24,7 @@ import { Alert } from 'design/Alert/Alert';
 import Box from 'design/Box/Box';
 import { ButtonSecondary } from 'design/Button/Button';
 import ButtonIcon from 'design/ButtonIcon/ButtonIcon';
+import { CardTile } from 'design/CardTile/CardTile';
 import Flex, { Stack } from 'design/Flex/Flex';
 import { ArrowLeft } from 'design/Icon/Icons/ArrowLeft';
 import { FingerprintSimple } from 'design/Icon/Icons/FingerprintSimple';
@@ -31,7 +32,7 @@ import { NewTab } from 'design/Icon/Icons/NewTab';
 import { Pencil } from 'design/Icon/Icons/Pencil';
 import { Question } from 'design/Icon/Icons/Question';
 import { Indicator } from 'design/Indicator/Indicator';
-import { Outline } from 'design/Label/Label';
+import { SecondaryOutlined } from 'design/Label/Label';
 import Text from 'design/Text';
 import { HoverTooltip } from 'design/Tooltip/HoverTooltip';
 import { InfoGuideButton } from 'shared/components/SlidingSidePanel/InfoGuide/InfoGuide';
@@ -51,6 +52,7 @@ import { EditDialog } from '../Edit/EditDialog';
 import { formatDuration } from '../formatDuration';
 import { useGetBot, useListBotTokens } from '../hooks';
 import { InfoGuide } from '../InfoGuide';
+import { InstancesPanel } from './InstancesPanel';
 import { JoinMethodIcon } from './JoinMethodIcon';
 import { Panel } from './Panel';
 
@@ -112,13 +114,15 @@ export function BotDetails() {
       </FeatureHeader>
 
       {isLoading ? (
-        <Box data-testid="loading" textAlign="center" m={10}>
+        <Box data-testid="loading-bot" textAlign="center" m={10}>
           <Indicator />
         </Box>
       ) : undefined}
 
       {isError ? (
-        <Alert kind="danger">Error: {error.message}</Alert>
+        <Alert kind="danger" details={error.message}>
+          Failed to fetch bot
+        </Alert>
       ) : undefined}
 
       {isSuccess && data === null ? (
@@ -147,60 +151,70 @@ export function BotDetails() {
             <Divider />
 
             <Panel title="Metadata" isSubPanel>
-              <Grid>
-                <GridLabel>Bot name</GridLabel>
-                <Flex inline alignItems={'center'} gap={1} mr={0}>
-                  <MonoText>{data.name}</MonoText>
-                  <CopyButton name={data.name} />
-                </Flex>
-                <GridLabel>Max session duration</GridLabel>
-                {data.max_session_ttl
-                  ? formatDuration(data.max_session_ttl, {
-                      separator: ' ',
-                    })
-                  : '-'}
-              </Grid>
+              <PanelContentContainer>
+                <Grid>
+                  <GridLabel>Bot name</GridLabel>
+                  <Flex inline alignItems={'center'} gap={1}>
+                    <MonoText>{data.name}</MonoText>
+                    <CopyButton name={data.name} />
+                  </Flex>
+                  <GridLabel>Max session duration</GridLabel>
+                  {data.max_session_ttl
+                    ? formatDuration(data.max_session_ttl, {
+                        separator: ' ',
+                      })
+                    : '-'}
+                </Grid>
+              </PanelContentContainer>
             </Panel>
 
             <PaddedDivider />
 
             <Panel title="Roles" isSubPanel>
-              {data.roles.length ? (
-                <Flex gap={1} flexWrap={'wrap'}>
-                  {data.roles.toSorted().map(r => (
-                    <Outline key={r}>{r}</Outline>
-                  ))}
-                </Flex>
-              ) : (
-                'No roles assigned'
-              )}
+              <PanelContentContainer>
+                {data.roles.length ? (
+                  <RolesContainer>
+                    {data.roles.toSorted().map(r => (
+                      <SecondaryOutlined mr="1" key={r}>
+                        {r}
+                      </SecondaryOutlined>
+                    ))}
+                  </RolesContainer>
+                ) : (
+                  'No roles assigned'
+                )}
+              </PanelContentContainer>
             </Panel>
 
             <PaddedDivider />
 
             <Panel title="Traits" isSubPanel>
-              {data.traits.length ? (
-                <Grid>
-                  {data.traits
-                    .toSorted((a, b) => a.name.localeCompare(b.name))
-                    .map(r => (
-                      <React.Fragment key={r.name}>
-                        <GridLabel>
-                          <Trait traitName={r.name} />
-                        </GridLabel>
-                        <Flex gap={1} flexWrap={'wrap'}>
-                          {r.values.length > 0
-                            ? r.values
-                                .toSorted()
-                                .map(v => <Outline key={v}>{v}</Outline>)
-                            : 'no values'}
-                        </Flex>
-                      </React.Fragment>
-                    ))}
-                </Grid>
-              ) : (
-                'No traits set'
-              )}
+              <PanelContentContainer>
+                {data.traits.length ? (
+                  <Grid>
+                    {data.traits
+                      .toSorted((a, b) => a.name.localeCompare(b.name))
+                      .map(r => (
+                        <React.Fragment key={r.name}>
+                          <GridLabel>
+                            <Trait traitName={r.name} />
+                          </GridLabel>
+                          <div>
+                            {r.values.length > 0
+                              ? r.values.toSorted().map(v => (
+                                  <SecondaryOutlined mr="1" key={v}>
+                                    {v}
+                                  </SecondaryOutlined>
+                                ))
+                              : 'no values'}
+                          </div>
+                        </React.Fragment>
+                      ))}
+                  </Grid>
+                ) : (
+                  'No traits set'
+                )}
+              </PanelContentContainer>
             </Panel>
 
             <Divider />
@@ -210,8 +224,8 @@ export function BotDetails() {
               onViewAllClicked={handleViewAllTokensClicked}
             />
           </ColumnContainer>
-          <ColumnContainer>
-            <Panel title="Active Instances">Coming soon</Panel>
+          <ColumnContainer maxWidth={400}>
+            <InstancesPanel botName={params.botName} />
           </ColumnContainer>
 
           {isEditing ? (
@@ -227,21 +241,31 @@ export function BotDetails() {
   );
 }
 
-const Container = styled(Flex).attrs({ gap: 3 })`
-  flex-wrap: wrap;
+const Container = styled(Flex).attrs({ gap: 2 })`
+  flex: 1;
+  overflow: auto;
 `;
 
-const ColumnContainer = styled(Flex)`
-  flex: 1;
+const ColumnContainer = styled(CardTile)`
+  flex-direction: column;
+  overflow: auto;
+  padding: 0;
+  gap: 0;
+  margin: ${props => props.theme.space[1]}px;
+`;
+
+const PanelContentContainer = styled(Flex)`
   flex-direction: column;
-  min-width: 300px;
-  background-color: ${p => p.theme.colors.levels.surface};
-  border-radius: ${props => props.theme.space[1]}px;
+  padding: ${props => props.theme.space[3]}px;
+  padding-top: 0;
 `;
 
+const RolesContainer = styled.div``;
+
 const Divider = styled.div`
   height: 1px;
   background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
+  flex-shrink: 0;
 `;
 
 const PaddedDivider = styled(Divider)`
@@ -253,12 +277,13 @@ const Grid = styled(Box)`
   align-self: flex-start;
   display: grid;
   grid-template-columns: repeat(2, auto);
-  gap: ${props => props.theme.space[2]}px;
+  gap: ${({ theme }) => theme.space[2]}px;
 `;
 
 const GridLabel = styled(Text)`
   color: ${({ theme }) => theme.colors.text.muted};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
+  padding-right: ${({ theme }) => theme.space[2]}px;
 `;
 
 const MonoText = styled(Text)`
@@ -343,62 +368,66 @@ function JoinTokens(props: { botName: string; onViewAllClicked: () => void }) {
         disabled: !hasListPermission,
       }}
     >
-      {isLoading ? (
-        <Box data-testid="loading" textAlign="center" m={10}>
-          <Indicator />
-        </Box>
-      ) : undefined}
-
-      {!hasListPermission ? (
-        <Alert kind="info">
-          You do not have permission to view join tokens. Missing role
-          permissions: <code>tokens.list</code>
-        </Alert>
-      ) : undefined}
-
-      {requiresMfa ? (
-        <MfaContainer>
-          <MfaText fontWeight={'regular'}>
-            Multi-factor authentication is required to view join tokens
-          </MfaText>
-          <MfaVerifyButton onClick={handleVerifyClick}>
-            <FingerprintSimple size="medium" /> Authenticate
-          </MfaVerifyButton>
-        </MfaContainer>
-      ) : undefined}
-
-      {isError && !requiresMfa ? (
-        <Alert kind="danger">Error: {error.message}</Alert>
-      ) : undefined}
-
-      {isSuccess ? (
-        <>
-          {data.items.length ? (
-            <Flex gap={1} flexWrap={'wrap'}>
-              {data.items
-                .toSorted((a, b) => a.safeName.localeCompare(b.safeName))
-                .map(t => {
-                  return (
-                    <Outline key={t.id}>
-                      <HoverTooltip placement="top" tipContent={t.method}>
-                        <Flex alignItems={'center'} gap={1}>
-                          <JoinMethodIcon
-                            method={t.method}
-                            size={'small'}
-                            includeTooltip={false}
-                          />
-                          {t.safeName}
-                        </Flex>
-                      </HoverTooltip>
-                    </Outline>
-                  );
-                })}
-            </Flex>
-          ) : (
-            'No join tokens'
-          )}
-        </>
-      ) : undefined}
+      <PanelContentContainer>
+        {isLoading ? (
+          <Box data-testid="loading-tokens" textAlign="center" m={10}>
+            <Indicator />
+          </Box>
+        ) : undefined}
+
+        {!hasListPermission ? (
+          <Alert kind="info">
+            You do not have permission to view join tokens. Missing role
+            permissions: <code>tokens.list</code>
+          </Alert>
+        ) : undefined}
+
+        {requiresMfa ? (
+          <MfaContainer>
+            <MfaText fontWeight={'regular'}>
+              Multi-factor authentication is required to view join tokens
+            </MfaText>
+            <MfaVerifyButton onClick={handleVerifyClick}>
+              <FingerprintSimple size="medium" /> Authenticate
+            </MfaVerifyButton>
+          </MfaContainer>
+        ) : undefined}
+
+        {isError && !requiresMfa ? (
+          <Alert kind="danger" details={error.message}>
+            Failed to fetch join tokens
+          </Alert>
+        ) : undefined}
+
+        {isSuccess ? (
+          <>
+            {data.items.length ? (
+              <Flex gap={1} flexWrap={'wrap'}>
+                {data.items
+                  .toSorted((a, b) => a.safeName.localeCompare(b.safeName))
+                  .map(t => {
+                    return (
+                      <SecondaryOutlined key={t.id}>
+                        <HoverTooltip placement="top" tipContent={t.method}>
+                          <Flex alignItems={'center'} gap={1}>
+                            <JoinMethodIcon
+                              method={t.method}
+                              size={'small'}
+                              includeTooltip={false}
+                            />
+                            {t.safeName}
+                          </Flex>
+                        </HoverTooltip>
+                      </SecondaryOutlined>
+                    );
+                  })}
+              </Flex>
+            ) : (
+              'No join tokens'
+            )}
+          </>
+        ) : undefined}
+      </PanelContentContainer>
     </Panel>
   );
 }
diff --git a/web/packages/teleport/src/Bots/Details/Instance.story.tsx b/web/packages/teleport/src/Bots/Details/Instance.story.tsx
new file mode 100644
index 0000000000000..0b4dddee4b431
--- /dev/null
+++ b/web/packages/teleport/src/Bots/Details/Instance.story.tsx
@@ -0,0 +1,109 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import Flex from 'design/Flex/Flex';
+
+import { TeleportProviderBasic } from 'teleport/mocks/providers';
+
+import { Instance } from './Instance';
+import { methods } from './JoinMethodIcon.story';
+
+const meta = {
+  title: 'Teleport/Bots/Details/Instance',
+  component: Wrapper,
+  argTypes: {
+    activeAt: {
+      control: {
+        type: 'date',
+      },
+    },
+    method: {
+      control: 'select',
+      options: methods,
+    },
+    version: {
+      control: 'select',
+      options: ['6.0.0', '5.0.0', '4.4.0', '4.3.999', '3.2.1', '2.0.1'],
+    },
+    os: {
+      control: 'select',
+      options: ['windows', 'linux', 'darwin', '--fallback--'].sort(),
+    },
+  },
+} satisfies Meta<typeof Wrapper>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const Item: Story = {
+  args: {
+    id: '686750f5-0f21-4a6f-b151-fa11a603701d',
+    activeAt: new Date('2025-07-18T14:54:32Z').getTime(),
+    hostname: 'hostname',
+    method: 'kubernetes',
+    version: '4.4.0',
+    os: 'linux',
+  },
+};
+
+export const ItemWithNoHeartbeatData: Story = {
+  args: {
+    id: '686750f5-0f21-4a6f-b151-fa11a603701d',
+  },
+};
+
+type Props = {
+  id: Parameters<typeof Instance>[0]['id'];
+  version?: Parameters<typeof Instance>[0]['version'];
+  hostname?: Parameters<typeof Instance>[0]['hostname'];
+  activeAt?: number;
+  method?: Parameters<typeof Instance>[0]['method'];
+  os?: Parameters<typeof Instance>[0]['os'];
+};
+function Wrapper(props: Props) {
+  return (
+    <TeleportProviderBasic>
+      <Container>
+        <Container400>
+          <Instance
+            {...props}
+            activeAt={
+              props.activeAt
+                ? new Date(props.activeAt).toISOString()
+                : undefined
+            }
+          />
+        </Container400>
+      </Container>
+    </TeleportProviderBasic>
+  );
+}
+
+const Container = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+`;
+
+const Container400 = styled.div`
+  width: 400px;
+`;
diff --git a/web/packages/teleport/src/Bots/Details/Instance.tsx b/web/packages/teleport/src/Bots/Details/Instance.tsx
new file mode 100644
index 0000000000000..efc25d2804a3b
--- /dev/null
+++ b/web/packages/teleport/src/Bots/Details/Instance.tsx
@@ -0,0 +1,176 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import format from 'date-fns/format';
+import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict';
+import parseISO from 'date-fns/parseISO';
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+
+import Flex from 'design/Flex/Flex';
+import { ArrowFatLinesUp } from 'design/Icon/Icons/ArrowFatLinesUp';
+import {
+  DangerOutlined,
+  SecondaryOutlined,
+  WarningOutlined,
+} from 'design/Label/Label';
+import { ResourceIcon } from 'design/ResourceIcon';
+import Text from 'design/Text/Text';
+import { HoverTooltip } from 'design/Tooltip/HoverTooltip';
+
+import { useClusterVersion } from '../../useClusterVersion';
+import { JoinMethodIcon } from './JoinMethodIcon';
+
+export function Instance(props: {
+  id: string;
+  version?: string;
+  hostname?: string;
+  activeAt?: string;
+  method?: string;
+  os?: string;
+}) {
+  const { id, version, hostname, activeAt, method, os } = props;
+
+  return (
+    <Container>
+      <TopRow>
+        <Text fontWeight={'light'}>{id}</Text>
+        {activeAt ? (
+          <HoverTooltip
+            placement="top"
+            tipContent={format(parseISO(activeAt), 'PP, p z')}
+          >
+            <Text
+              fontSize={0}
+              fontWeight={'regular'}
+            >{`${formatDistanceToNowStrict(parseISO(activeAt))} ago`}</Text>
+          </HoverTooltip>
+        ) : undefined}
+      </TopRow>
+      <BottomRow>
+        <Flex gap={2}>
+          <Version version={version} />
+
+          {hostname ? (
+            <HoverTooltip placement="top" tipContent={'Hostname'}>
+              <SecondaryOutlined>
+                <Text>{hostname}</Text>
+              </SecondaryOutlined>
+            </HoverTooltip>
+          ) : undefined}
+        </Flex>
+        <Flex gap={2}>
+          {method ? (
+            <JoinMethodIcon method={method} size={'medium'} />
+          ) : undefined}
+
+          {os ? (
+            <HoverTooltip placement="top" tipContent={os}>
+              <OsIconContainer>
+                {os === 'darwin' ? (
+                  <ResourceIcon name={'apple'} width={'16px'} />
+                ) : os === 'windows' ? (
+                  <ResourceIcon name={'windows'} width={'16px'} />
+                ) : os === 'linux' ? (
+                  <ResourceIcon name={'linux'} width={'16px'} />
+                ) : (
+                  <ResourceIcon name={'server'} width={'16px'} />
+                )}
+              </OsIconContainer>
+            </HoverTooltip>
+          ) : undefined}
+        </Flex>
+      </BottomRow>
+    </Container>
+  );
+}
+
+const Container = styled(Flex)`
+  flex-direction: column;
+  padding: ${props => props.theme.space[3]}px;
+  padding-top: ${p => p.theme.space[2]}px;
+  padding-bottom: ${p => p.theme.space[2]}px;
+  background-color: ${p => p.theme.colors.levels.surface};
+  gap: ${p => p.theme.space[1]}px;
+`;
+
+const TopRow = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const BottomRow = styled(Flex)`
+  justify-content: space-between;
+  align-items: flex-end;
+`;
+
+const OsIconContainer = styled(Flex)`
+  width: 20px; // Intentionally not a theme value
+  height: 20px; // Intentionally not a theme value
+  align-items: center;
+  justify-content: center;
+`;
+
+function Version(props: { version: string | undefined }) {
+  const { version } = props;
+  const { checkCompatibility } = useClusterVersion();
+  const versionCompatibility = checkCompatibility(version);
+
+  let Wrapper = SecondaryOutlined;
+  let icon: ReactElement | null = <ArrowFatLinesUp size={'small'} />;
+  let tooltip = 'Version is up to date';
+  if (versionCompatibility?.isCompatible) {
+    switch (versionCompatibility.reason) {
+      case 'match':
+        icon = null;
+        break;
+      case 'upgrade-minor':
+        tooltip = 'An upgrade is available';
+        break;
+      case 'upgrade-major':
+        Wrapper = WarningOutlined;
+        tooltip =
+          'Version is one major version behind. Consider upgrading soon.';
+        break;
+    }
+  } else {
+    switch (versionCompatibility?.reason) {
+      case 'too-old':
+        Wrapper = DangerOutlined;
+        tooltip =
+          'Version is two or more major versions behind, and is no longer compatible.';
+        break;
+      case 'too-new':
+        Wrapper = DangerOutlined;
+        tooltip =
+          'Version is one or more major versions ahead, and is not compatible.';
+        break;
+    }
+  }
+
+  return version ? (
+    <HoverTooltip placement="top" tipContent={tooltip}>
+      <Wrapper>
+        <Flex gap={1}>
+          {icon}
+          <Text>v{version}</Text>
+        </Flex>
+      </Wrapper>
+    </HoverTooltip>
+  ) : undefined;
+}
diff --git a/web/packages/teleport/src/Bots/Details/InstancesPanel.story.tsx b/web/packages/teleport/src/Bots/Details/InstancesPanel.story.tsx
new file mode 100644
index 0000000000000..19c55912d224e
--- /dev/null
+++ b/web/packages/teleport/src/Bots/Details/InstancesPanel.story.tsx
@@ -0,0 +1,170 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import styled from 'styled-components';
+
+import { CardTile } from 'design/CardTile/CardTile';
+import Flex from 'design/Flex/Flex';
+
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { TeleportProviderBasic } from 'teleport/mocks/providers';
+import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
+import {
+  listBotInstancesError,
+  listBotInstancesForever,
+  listBotInstancesSuccess,
+} from 'teleport/test/helpers/botInstances';
+
+import { InstancesPanel } from './InstancesPanel';
+
+const meta = {
+  title: 'Teleport/Bots/Details/InstancesPanel',
+  component: Wrapper,
+  beforeEach: () => {
+    queryClient.clear(); // Prevent cached data sharing between stories
+  },
+  excludeStories: ['listBotInstancesSuccessHandler'],
+} satisfies Meta<typeof Wrapper>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const listBotInstancesSuccessHandler = listBotInstancesSuccess({
+  bot_instances: [
+    {
+      bot_name: 'ansible-worker',
+      instance_id: crypto.randomUUID(),
+      active_at_latest: '2025-07-22T10:54:00Z',
+      host_name_latest: 'svr-lon-01-ab23cd',
+      join_method_latest: 'github',
+      os_latest: 'linux',
+      version_latest: '4.4.0',
+    },
+    {
+      bot_name: 'ansible-worker',
+      instance_id: crypto.randomUUID(),
+      active_at_latest: '2025-07-22T10:54:00Z',
+      host_name_latest: 'win-123a',
+      join_method_latest: 'tpm',
+      os_latest: 'windows',
+      version_latest: '4.3.18+ab12hd',
+    },
+    {
+      bot_name: 'ansible-worker',
+      instance_id: crypto.randomUUID(),
+      active_at_latest: '2025-07-22T10:54:00Z',
+      host_name_latest: 'mac-007',
+      join_method_latest: 'kubernetes',
+      os_latest: 'darwin',
+      version_latest: '3.9.99',
+    },
+    {
+      bot_name: 'ansible-worker',
+      instance_id: crypto.randomUUID(),
+      active_at_latest: '2025-07-22T10:54:00Z',
+      host_name_latest: 'aws:g49dh27dhjm3',
+      join_method_latest: 'ec2',
+      os_latest: 'linux',
+      version_latest: '1.3.2',
+    },
+  ],
+  next_page_token: '',
+});
+
+export const Happy: Story = {
+  parameters: {
+    msw: {
+      handlers: [listBotInstancesSuccessHandler],
+    },
+  },
+};
+
+export const WithFetchPending: Story = {
+  parameters: {
+    msw: {
+      handlers: [listBotInstancesForever()],
+    },
+  },
+};
+
+export const WithFetchFailure: Story = {
+  parameters: {
+    msw: {
+      handlers: [listBotInstancesError(500, 'something went wrong')],
+    },
+  },
+};
+
+export const NoBotInstancesListPermission: Story = {
+  args: {
+    hasBotInstanceListPermission: false,
+  },
+};
+
+function Wrapper(props: { hasBotInstanceListPermission?: boolean }) {
+  const { hasBotInstanceListPermission = true } = props;
+
+  const customAcl = makeAcl({
+    botInstances: {
+      ...defaultAccess,
+      list: hasBotInstanceListPermission,
+    },
+  });
+
+  const ctx = createTeleportContext({
+    customAcl,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TeleportProviderBasic teleportCtx={ctx}>
+        <Container>
+          <InnerContainer>
+            <InstancesPanel botName="ansible-worker" />
+          </InnerContainer>
+        </Container>
+      </TeleportProviderBasic>
+    </QueryClientProvider>
+  );
+}
+
+const Container = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+`;
+
+const InnerContainer = styled(CardTile)`
+  max-width: 400px;
+  height: 600px;
+  overflow: auto;
+  padding: 0;
+  gap: 0;
+  margin: ${props => props.theme.space[1]}px;
+`;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
diff --git a/web/packages/teleport/src/Bots/Details/InstancesPanel.test.tsx b/web/packages/teleport/src/Bots/Details/InstancesPanel.test.tsx
new file mode 100644
index 0000000000000..c231a6813e263
--- /dev/null
+++ b/web/packages/teleport/src/Bots/Details/InstancesPanel.test.tsx
@@ -0,0 +1,152 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { QueryClientProvider } from '@tanstack/react-query';
+import { setupServer } from 'msw/node';
+import { PropsWithChildren } from 'react';
+
+import darkTheme from 'design/theme/themes/darkTheme';
+import { ConfiguredThemeProvider } from 'design/ThemeProvider';
+import {
+  render,
+  screen,
+  testQueryClient,
+  waitForElementToBeRemoved,
+} from 'design/utils/testing';
+
+import { ContextProvider } from 'teleport/index';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
+import {
+  listBotInstancesError,
+  listBotInstancesSuccess,
+} from 'teleport/test/helpers/botInstances';
+
+import { InstancesPanel } from './InstancesPanel';
+
+const server = setupServer();
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(async () => {
+  server.resetHandlers();
+  await testQueryClient.resetQueries();
+
+  jest.clearAllMocks();
+});
+
+afterAll(() => server.close());
+
+describe('InstancesPanel', () => {
+  it('should show a fetch error state', async () => {
+    withFetchError();
+    render(<InstancesPanel botName="test-bot" />, {
+      wrapper: makeWrapper(),
+    });
+    await waitForLoading();
+
+    expect(screen.getByText('something went wrong')).toBeInTheDocument();
+  });
+
+  it('should show a no permissions state', async () => {
+    withFetchError();
+    render(<InstancesPanel botName="test-bot" />, {
+      wrapper: makeWrapper({
+        customAcl: makeAcl({
+          botInstances: {
+            ...defaultAccess,
+            list: false,
+          },
+        }),
+      }),
+    });
+
+    expect(
+      screen.getByText('You do not have permission to view bot instances.', {
+        exact: false,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders instance items', async () => {
+    withFetchSuccess();
+
+    render(<InstancesPanel botName="test-bot" />, {
+      wrapper: makeWrapper(),
+    });
+    await waitForLoading();
+
+    expect(
+      screen.getByText('c11250e0-00c2-4f52-bcdf-b367f80b9461')
+    ).toBeInTheDocument();
+  });
+});
+
+const waitForLoading = async () => {
+  await waitForElementToBeRemoved(() =>
+    screen.queryByTestId('loading-instances')
+  );
+};
+
+function withFetchSuccess() {
+  server.use(
+    listBotInstancesSuccess({
+      bot_instances: [
+        {
+          bot_name: 'ansible-worker',
+          instance_id: 'c11250e0-00c2-4f52-bcdf-b367f80b9461',
+          active_at_latest: '2025-07-22T10:54:00Z',
+          host_name_latest: 'svr-lon-01-ab23cd',
+          join_method_latest: 'github',
+          os_latest: 'linux',
+          version_latest: '4.4.16',
+        },
+      ],
+      next_page_token: '',
+    })
+  );
+}
+
+function withFetchError() {
+  server.use(listBotInstancesError(500, 'something went wrong'));
+}
+
+function makeWrapper(options?: { customAcl?: ReturnType<typeof makeAcl> }) {
+  const {
+    customAcl = makeAcl({
+      botInstances: {
+        ...defaultAccess,
+        list: true,
+      },
+    }),
+  } = options ?? {};
+  return ({ children }: PropsWithChildren) => {
+    const ctx = createTeleportContext({
+      customAcl,
+    });
+    return (
+      <QueryClientProvider client={testQueryClient}>
+        <ConfiguredThemeProvider theme={darkTheme}>
+          <ContextProvider ctx={ctx}>{children}</ContextProvider>
+        </ConfiguredThemeProvider>
+      </QueryClientProvider>
+    );
+  };
+}
diff --git a/web/packages/teleport/src/Bots/Details/InstancesPanel.tsx b/web/packages/teleport/src/Bots/Details/InstancesPanel.tsx
new file mode 100644
index 0000000000000..8b9ae92b9fee5
--- /dev/null
+++ b/web/packages/teleport/src/Bots/Details/InstancesPanel.tsx
@@ -0,0 +1,197 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { Alert } from 'design/Alert/Alert';
+import Box from 'design/Box/Box';
+import { ButtonSecondary, ButtonText } from 'design/Button';
+import Flex from 'design/Flex/Flex';
+import { SortAscending, SortDescending } from 'design/Icon';
+import { Indicator } from 'design/Indicator/Indicator';
+import { H2 } from 'design/Text/Text';
+import { fontWeights } from 'design/theme/typography';
+
+import { listBotInstances } from 'teleport/services/bot/bot';
+import useTeleport from 'teleport/useTeleport';
+
+import { Instance } from './Instance';
+
+export function InstancesPanel(props: { botName: string }) {
+  const { botName } = props;
+
+  const [sort, setSort] = useState<
+    'active_at_latest:asc' | 'active_at_latest:desc'
+  >('active_at_latest:desc');
+
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  const ctx = useTeleport();
+  const flags = ctx.getFeatureFlags();
+  const hasListPermission = flags.listBotInstances;
+
+  const {
+    isSuccess,
+    data,
+    isLoading,
+    isFetchingNextPage,
+    isError,
+    error,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery({
+    enabled: hasListPermission,
+    queryKey: ['bot_instances', 'list', sort, botName],
+    queryFn: ({ pageParam }) =>
+      listBotInstances({
+        pageSize: 32,
+        pageToken: pageParam,
+        sort,
+        botName,
+      }),
+    initialPageParam: '',
+    getNextPageParam: data => data?.next_page_token,
+    placeholderData: keepPreviousData,
+    staleTime: 30_000, // Cached pages are valid for 30 seconds
+  });
+
+  const handleToggleSort = () => {
+    setSort(sort =>
+      sort === 'active_at_latest:desc'
+        ? 'active_at_latest:asc'
+        : 'active_at_latest:desc'
+    );
+  };
+
+  // Scrolls to the top when the selected sort changes
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, behavior: 'instant' });
+  }, [sort]);
+
+  return (
+    <Container>
+      <TitleContainer>
+        <H2 fontWeight={fontWeights.bold}>Active Instances</H2>
+        {isSuccess ? (
+          <ActionButton onClick={handleToggleSort}>
+            Recent
+            {sort === 'active_at_latest:desc' ? (
+              <SortDescending size={'medium'} />
+            ) : (
+              <SortAscending size={'medium'} />
+            )}
+          </ActionButton>
+        ) : undefined}
+      </TitleContainer>
+
+      <Divider />
+
+      {isLoading ? (
+        <Box data-testid="loading-instances" textAlign="center" m={10}>
+          <Indicator />
+        </Box>
+      ) : undefined}
+
+      {!hasListPermission ? (
+        <Alert m={3} kind="info">
+          You do not have permission to view bot instances. Missing role
+          permissions: <code>botInstances.list</code>
+        </Alert>
+      ) : undefined}
+
+      {isError ? (
+        <Alert m={3} kind="danger" details={error.message}>
+          Failed to fetch instances
+        </Alert>
+      ) : undefined}
+
+      {isSuccess ? (
+        <>
+          {data.pages.length > 0 && data.pages[0].bot_instances.length > 0 ? (
+            <ContentContainer ref={contentRef}>
+              {data.pages.map((page, i) =>
+                page.bot_instances.map((instance, j) => (
+                  <React.Fragment key={`${instance.instance_id}`}>
+                    {i === 0 && j === 0 ? undefined : <Divider />}
+                    <Instance
+                      id={instance.instance_id}
+                      activeAt={instance.active_at_latest}
+                      hostname={instance.host_name_latest}
+                      method={instance.join_method_latest}
+                      version={instance.version_latest}
+                      os={instance.os_latest}
+                    />
+                  </React.Fragment>
+                ))
+              )}
+
+              <Divider />
+
+              <LoadMoreContainer>
+                <ButtonSecondary
+                  onClick={() => fetchNextPage()}
+                  disabled={!hasNextPage || isFetchingNextPage}
+                >
+                  Load More
+                </ButtonSecondary>
+              </LoadMoreContainer>
+            </ContentContainer>
+          ) : (
+            <Box p={3}>No active instances</Box>
+          )}
+        </>
+      ) : undefined}
+    </Container>
+  );
+}
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const TitleContainer = styled(Flex)`
+  align-items: center;
+  justify-content: space-between;
+  padding: ${p => p.theme.space[3]}px;
+  gap: ${p => p.theme.space[2]}px;
+`;
+
+const ActionButton = styled(ButtonText)`
+  padding-left: ${p => p.theme.space[2]}px;
+  padding-right: ${p => p.theme.space[2]}px;
+  gap: ${p => p.theme.space[2]}px;
+`;
+
+const ContentContainer = styled.div`
+  overflow: auto;
+`;
+
+const LoadMoreContainer = styled(Flex)`
+  justify-content: center;
+  padding: ${props => props.theme.space[3]}px;
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  flex-shrink: 0;
+  background-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
+`;
diff --git a/web/packages/teleport/src/Bots/Details/Panel.tsx b/web/packages/teleport/src/Bots/Details/Panel.tsx
index 24b2b9620872d..aeba7a18ac130 100644
--- a/web/packages/teleport/src/Bots/Details/Panel.tsx
+++ b/web/packages/teleport/src/Bots/Details/Panel.tsx
@@ -66,13 +66,12 @@ export function Panel(
 
 const Container = styled(Flex)`
   flex-direction: column;
-  gap: 16px;
-  padding: 16px;
 `;
 
 const TitleContainer = styled(Flex)`
   align-items: center;
   justify-content: space-between;
+  padding: ${p => p.theme.space[3]}px;
   gap: 8px;
 `;
 
diff --git a/web/packages/teleport/src/Bots/Edit/EditDialog.test.tsx b/web/packages/teleport/src/Bots/Edit/EditDialog.test.tsx
index 3879065151426..38b1b8f473944 100644
--- a/web/packages/teleport/src/Bots/Edit/EditDialog.test.tsx
+++ b/web/packages/teleport/src/Bots/Edit/EditDialog.test.tsx
@@ -69,7 +69,7 @@ describe('EditDialog', () => {
     renderComponent();
     await waitForLoading();
 
-    expect(screen.getByText('Error: something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('something went wrong')).toBeInTheDocument();
   });
 
   it('should show a read unauthorised error state', async () => {
@@ -270,7 +270,7 @@ describe('EditDialog', () => {
     fireEvent.click(saveButton);
     await waitForSaveButton();
 
-    expect(screen.getByText('Error: something went wrong')).toBeInTheDocument();
+    expect(screen.getByText('something went wrong')).toBeInTheDocument();
 
     expect(onSuccess).not.toHaveBeenCalled();
   });
@@ -297,7 +297,7 @@ describe('EditDialog', () => {
 
     expect(
       screen.getByText(
-        'Error: We could not complete your request. Your proxy (v18.0.0) may be behind the minimum required version (v18.1.0) to support this request. Ensure all proxies are upgraded and try again.'
+        'We could not complete your request. Your proxy (v18.0.0) may be behind the minimum required version (v18.1.0) to support this request. Ensure all proxies are upgraded and try again.'
       )
     ).toBeInTheDocument();
   });
diff --git a/web/packages/teleport/src/Bots/Edit/EditDialog.tsx b/web/packages/teleport/src/Bots/Edit/EditDialog.tsx
index eb90989223c8f..c95d860546781 100644
--- a/web/packages/teleport/src/Bots/Edit/EditDialog.tsx
+++ b/web/packages/teleport/src/Bots/Edit/EditDialog.tsx
@@ -147,7 +147,9 @@ export function EditDialog(props: {
               ) : undefined}
 
               {error ? (
-                <Alert kind="danger">{`Error: ${error.message}`}</Alert>
+                <Alert kind="danger" details={error.message}>
+                  Failed to fetch bot
+                </Alert>
               ) : undefined}
 
               {isSuccess && data === null && (
@@ -255,7 +257,9 @@ export function EditDialog(props: {
               </div>
 
               {saveError ? (
-                <Alert kind="danger">Error: {saveError.message}</Alert>
+                <Alert kind="danger" details={saveError.message}>
+                  Failed to save changes
+                </Alert>
               ) : undefined}
             </DialogContent>
             <DialogFooter>
diff --git a/web/packages/teleport/src/services/bot/types.ts b/web/packages/teleport/src/services/bot/types.ts
index 4d98f23b2468c..255b9a1fc1a17 100644
--- a/web/packages/teleport/src/services/bot/types.ts
+++ b/web/packages/teleport/src/services/bot/types.ts
@@ -70,6 +70,7 @@ export type BotInstanceSummary = {
   host_name_latest?: string;
   version_latest?: string;
   active_at_latest?: string;
+  os_latest?: string;
 };
 
 export type GetBotInstanceResponse = {
diff --git a/web/packages/teleport/src/stores/storeUserContext.ts b/web/packages/teleport/src/stores/storeUserContext.ts
index bdaf4ce93f576..fd23423d74cf7 100644
--- a/web/packages/teleport/src/stores/storeUserContext.ts
+++ b/web/packages/teleport/src/stores/storeUserContext.ts
@@ -40,6 +40,10 @@ export default class StoreUserContext extends Store<UserContext> {
     return this.state.cluster.clusterId;
   }
 
+  getClusterAuthVersion() {
+    return this.state.cluster.authVersion;
+  }
+
   getEventAccess() {
     return this.state.acl.events;
   }
diff --git a/web/packages/teleport/src/test/helpers/botInstances.ts b/web/packages/teleport/src/test/helpers/botInstances.ts
index fb7d221f447aa..4271587f501fa 100644
--- a/web/packages/teleport/src/test/helpers/botInstances.ts
+++ b/web/packages/teleport/src/test/helpers/botInstances.ts
@@ -34,7 +34,19 @@ export const listBotInstancesSuccess = (mock: ListBotInstancesResponse) =>
     return HttpResponse.json(mock);
   });
 
-export const listBotInstancesError = (status: number, error: string = null) =>
+export const listBotInstancesForever = () =>
+  http.get(
+    listBotInstancesPath,
+    () =>
+      new Promise(() => {
+        /* never resolved */
+      })
+  );
+
+export const listBotInstancesError = (
+  status: number,
+  error: string | null = null
+) =>
   http.get(listBotInstancesPath, () => {
     return HttpResponse.json({ error: { message: error } }, { status });
   });
diff --git a/web/packages/teleport/src/useClusterVersion.test.tsx b/web/packages/teleport/src/useClusterVersion.test.tsx
new file mode 100644
index 0000000000000..98b43c01c7cb6
--- /dev/null
+++ b/web/packages/teleport/src/useClusterVersion.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+
+import { TeleportProviderBasic } from './mocks/providers';
+import { useClusterVersion } from './useClusterVersion';
+
+describe('useClusterVersion', () => {
+  it('should return the cluster version (auth)', () => {
+    const { result } = renderHook(() => useClusterVersion(), {
+      wrapper: Wrapper,
+    });
+    expect(result.current.clusterVersion).toBe('4.4.0-dev');
+  });
+
+  it.each`
+    clientVersion | compatibility
+    ${'4.4.0'}    | ${{ isCompatible: true, reason: 'match' }}
+    ${'4.4.1'}    | ${{ isCompatible: true, reason: 'match' }}
+    ${'4.3.999'}  | ${{ isCompatible: true, reason: 'upgrade-minor' }}
+    ${'4.3.0'}    | ${{ isCompatible: true, reason: 'upgrade-minor' }}
+    ${'5.0.0'}    | ${{ isCompatible: true, reason: 'match' }}
+    ${'3.0.0'}    | ${{ isCompatible: true, reason: 'upgrade-major' }}
+    ${'6.0.0'}    | ${{ isCompatible: false, reason: 'too-new' }}
+    ${'2.0.0'}    | ${{ isCompatible: false, reason: 'too-old' }}
+  `(
+    'diff("$clientVersion") should be "$compatibility"',
+    ({ clientVersion, compatibility }) => {
+      const { result } = renderHook(() => useClusterVersion(), {
+        wrapper: Wrapper,
+      });
+      expect(result.current.checkCompatibility(clientVersion)).toStrictEqual(
+        compatibility
+      );
+    }
+  );
+});
+
+function Wrapper(props: PropsWithChildren) {
+  return (
+    <TeleportProviderBasic>
+      <div>{props.children}</div>
+    </TeleportProviderBasic>
+  );
+}
diff --git a/web/packages/teleport/src/useClusterVersion.ts b/web/packages/teleport/src/useClusterVersion.ts
new file mode 100644
index 0000000000000..4db49562cab85
--- /dev/null
+++ b/web/packages/teleport/src/useClusterVersion.ts
@@ -0,0 +1,91 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { parse } from 'shared/utils/semVer';
+
+import useTeleport from 'teleport/useTeleport';
+
+/**
+ * **useClusterVersion** returns the cluster (auth) version and a comparison
+ * utility (`check`). The check utility can be used to compare the provided
+ * client version to the cluster/control-plane version. An indication of
+ * cluster compatibility is returned.
+ *
+ * @returns the cluster (auth) version and a comparison utility (diff)
+ */
+export function useClusterVersion(): {
+  clusterVersion: string;
+  /**
+   * **check** compares the provided client version to the cluster/control-
+   * plane version. An indication of cluster compatibility is returned.
+   * @param version the compare version as string.
+   * @returns an indication of cluster compatibility
+   */
+  checkCompatibility: (
+    clientVersion: string | undefined
+  ) => ClientCompatibility | null;
+} {
+  const ctx = useTeleport();
+  const clusterVersion = ctx.storeUser.getClusterAuthVersion();
+  return {
+    clusterVersion,
+    checkCompatibility: (clientVersion?: string) =>
+      checkClientCompatibility(clientVersion, clusterVersion),
+  };
+}
+
+export type ClientCompatibility =
+  | {
+      isCompatible: false;
+      reason: 'too-new' | 'too-old';
+    }
+  | {
+      isCompatible: true;
+      /**
+       * match - versions are the same.
+       * upgrade-major - the client is one version behind.
+       * upgrade-minor - the major version is the same, but older on minor or patch.
+       */
+      reason: 'match' | 'upgrade-major' | 'upgrade-minor';
+    }
+  | null;
+
+export function checkClientCompatibility(
+  clientVersion: string | undefined,
+  clusterVersion: string
+): ClientCompatibility {
+  const client = parse(clientVersion);
+  const cluster = parse(clusterVersion);
+  if (!client || !cluster) return null;
+  if (client.major === cluster.major) {
+    return {
+      isCompatible: true,
+      reason: client.compare(cluster) === -1 ? 'upgrade-minor' : 'match',
+    };
+  }
+  if (Math.abs(client.major - cluster.major) == 1) {
+    return {
+      isCompatible: true,
+      reason: client.major > cluster.major ? 'match' : 'upgrade-major',
+    };
+  }
+  return {
+    isCompatible: false,
+    reason: client.major > cluster.major ? 'too-new' : 'too-old',
+  };
+}