diff --git a/frontend/__tests__/components/GStatusTag.spec.js b/frontend/__tests__/components/GReadinessChip.spec.js
similarity index 80%
rename from frontend/__tests__/components/GStatusTag.spec.js
rename to frontend/__tests__/components/GReadinessChip.spec.js
index 3254aa7bb2..a0b8d2086f 100644
--- a/frontend/__tests__/components/GStatusTag.spec.js
+++ b/frontend/__tests__/components/GReadinessChip.spec.js
@@ -7,14 +7,14 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
 
-import GStatusTag from '@/components/GStatusTag.vue'
+import GReadinessChip from '@/components/Readiness/GReadinessChip.vue'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
 describe('components', () => {
-  describe('g-status-tag', () => {
+  describe('g-readiness-chip', () => {
     function mountStatusTag (condition, isAdmin = false) {
-      return mount(GStatusTag, {
+      return mount(GReadinessChip, {
         global: {
           plugins: [
             createVuetifyPlugin(),
@@ -44,12 +44,11 @@ describe('components', () => {
       }, true)
       const vm = wrapper.vm
       expect(vm.chipText).toBe('foo')
-      expect(vm.chipStatus).toBe('Healthy')
+      expect(vm.statusTitle).toBe('Healthy')
       expect(vm.chipTooltip.title).toBe('foo-bar')
       expect(vm.chipIcon).toBe('')
       expect(vm.isError || vm.isUnknown || vm.isProgressing).toBe(false)
       expect(vm.color).toBe('primary')
-      expect(vm.visible).toBe(true)
     })
 
     it('should render condition with user error', () => {
@@ -63,15 +62,13 @@ describe('components', () => {
       })
       const vm = wrapper.vm
       expect(vm.chipText).toBe('foo')
-      expect(vm.chipStatus).toBe('Error')
+      expect(vm.statusTitle).toBe('Error')
       expect(vm.isError).toBe(true)
-      expect(vm.isUserError).toBe(true)
       expect(vm.chipIcon).toBe('mdi-account-alert-outline')
       expect(vm.color).toBe('error')
-      expect(vm.visible).toBe(true)
     })
 
-    it('should render accoring to admin status', () => {
+    it('should render according to admin status', () => {
       const condition = {
         shortName: 'foo',
         name: 'foo-bar',
@@ -80,18 +77,16 @@ describe('components', () => {
       }
       let wrapper = mountStatusTag(condition)
       const vm = wrapper.vm
-      expect(vm.visible).toBe(false)
       expect(vm.isProgressing).toBe(true)
       expect(vm.color).toBe('primary')
-      expect(vm.chipStatus).toBe('Progressing')
+      expect(vm.statusTitle).toBe('Progressing')
       expect(vm.chipIcon).toBe('')
 
       wrapper = mountStatusTag(condition, true)
       const vmAdmin = wrapper.vm
-      expect(vmAdmin.visible).toBe(true)
       expect(vmAdmin.isProgressing).toBe(true)
       expect(vmAdmin.color).toBe('info')
-      expect(vmAdmin.chipStatus).toBe('Progressing')
+      expect(vmAdmin.statusTitle).toBe('Progressing')
       expect(vmAdmin.chipIcon).toBe('mdi-progress-alert')
     })
   })
diff --git a/frontend/__tests__/components/GStatusTags.spec.js b/frontend/__tests__/components/GShootReadiness.js
similarity index 96%
rename from frontend/__tests__/components/GStatusTags.spec.js
rename to frontend/__tests__/components/GShootReadiness.js
index 27667c2604..fd42438a53 100644
--- a/frontend/__tests__/components/GStatusTags.spec.js
+++ b/frontend/__tests__/components/GShootReadiness.js
@@ -10,14 +10,14 @@ import { createTestingPinia } from '@pinia/testing'
 
 import { useConfigStore } from '@/store/config'
 
-import GStatusTags from '@/components/GStatusTags'
+import GShootReadiness from '@/components/Readiness/GShootReadiness'
 
 import { createShootItemComposable } from '@/composables/useShootItem'
 
 const { createVuetifyPlugin } = global.fixtures.helper
 
 describe('components', () => {
-  describe('g-status-tags', () => {
+  describe('g-shoot-readiness', () => {
     let pinia
 
     function mountStatusTags (conditionTypes) {
@@ -31,7 +31,7 @@ describe('components', () => {
           }),
         },
       })
-      return mount(GStatusTags, {
+      return mount(GShootReadiness, {
         global: {
           plugins: [
             createVuetifyPlugin(),
diff --git a/frontend/src/components/GShootListRow.vue b/frontend/src/components/GShootListRow.vue
index 88cea98224..318fdeea56 100644
--- a/frontend/src/components/GShootListRow.vue
+++ b/frontend/src/components/GShootListRow.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: Apache-2.0
       </template>
       <template v-if="cell.header.key === 'readiness'">
         <div class="d-flex">
-          <g-status-tags />
+          <g-shoot-readiness bar />
         </div>
       </template>
       <template v-if="cell.header.key === 'controlPlaneHighAvailability'">
@@ -220,7 +220,7 @@ import GActionButton from '@/components/GActionButton.vue'
 import GCopyBtn from '@/components/GCopyBtn.vue'
 import GVendor from '@/components/GVendor.vue'
 import GShootStatus from '@/components/GShootStatus.vue'
-import GStatusTags from '@/components/GStatusTags.vue'
+import GShootReadiness from '@/components/Readiness/GShootReadiness.vue'
 import GPurposeTag from '@/components/GPurposeTag.vue'
 import GTimeString from '@/components/GTimeString.vue'
 import GShootVersionChip from '@/components/ShootVersion/GShootVersionChip.vue'
diff --git a/frontend/src/components/GStatusTag.vue b/frontend/src/components/GStatusTag.vue
deleted file mode 100644
index 7f048d2683..0000000000
--- a/frontend/src/components/GStatusTag.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<!--
-SPDX-FileCopyrightText: 2023 SAP SE or an SAP affiliate company and Gardener contributors
-
-SPDX-License-Identifier: Apache-2.0
--->
-
-<template>
-  <div v-if="visible">
-    <g-popover
-      v-model="internalValue"
-      :placement="popperPlacement"
-      :disabled="!condition.message"
-      :toolbar-title="popperTitle"
-      :toolbar-color="color"
-    >
-      <template #activator="{ props }">
-        <v-chip
-          v-bind="props"
-          ref="tagChipRef"
-          :class="{ 'cursor-pointer': condition.message }"
-          :variant="!isError ? 'tonal' : 'flat'"
-          :text-color="textColor"
-          size="small"
-          :color="color"
-          class="status-tag"
-        >
-          <v-icon
-            v-if="chipIcon"
-            :icon="chipIcon"
-            size="x-small"
-            class="chip-icon"
-          />
-          {{ chipText }}
-          <v-tooltip
-            :activator="$refs.tagChipRef"
-            location="top"
-            max-width="400px"
-            :disabled="internalValue"
-          >
-            <div class="font-weight-bold">
-              {{ chipTooltip.title }}
-            </div>
-            <div>Status: {{ chipTooltip.status }}</div>
-            <div
-              v-for="({ shortDescription }) in chipTooltip.userErrorCodeObjects"
-              :key="shortDescription"
-            >
-              <v-icon
-                class="mr-1"
-                color="white"
-                size="small"
-              >
-                mdi-account-alert
-              </v-icon>
-              <span class="font-weight-bold text--lighten-2">{{ shortDescription }}</span>
-            </div>
-            <template v-if="chipTooltip.description">
-              <v-divider color="white" />
-              <div>
-                {{ chipTooltip.description }}
-              </div>
-            </template>
-          </v-tooltip>
-        </v-chip>
-      </template>
-      <g-shoot-message-details
-        :status-title="chipStatus"
-        :last-message="nonErrorMessage"
-        :error-descriptions="errorDescriptions"
-        :last-transition-time="condition.lastTransitionTime"
-        :secret-binding-name="secretBindingName"
-        :namespace="shootMetadata.namespace"
-      />
-    </g-popover>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'pinia'
-
-import { useAuthnStore } from '@/store/authn'
-
-import GShootMessageDetails from '@/components/GShootMessageDetails.vue'
-
-import {
-  isUserError,
-  objectsFromErrorCodes,
-} from '@/utils/errorCodes'
-
-import {
-  get,
-  isEmpty,
-  filter,
-} from '@/lodash'
-
-export default {
-  components: {
-    GShootMessageDetails,
-  },
-  inject: [
-    'activePopoverKey',
-  ],
-  props: {
-    condition: {
-      type: Object,
-      required: true,
-    },
-    secretBindingName: {
-      type: String,
-    },
-    popperPlacement: {
-      type: String,
-    },
-    staleShoot: {
-      type: Boolean,
-    },
-    shootMetadata: {
-      type: Object,
-      default () {
-        return { uid: '' }
-      },
-    },
-  },
-  computed: {
-    ...mapState(useAuthnStore, [
-      'isAdmin',
-    ]),
-    popoverKey () {
-      return `g-status-tag[${this.condition.type}]:${this.shootMetadata.uid}`
-    },
-    internalValue: {
-      get () {
-        return this.activePopoverKey === this.popoverKey
-      },
-      set (value) {
-        this.activePopoverKey = value ? this.popoverKey : ''
-      },
-    },
-    popperTitle () {
-      if (this.staleShoot) {
-        return 'Last Status'
-      }
-      return this.condition.name
-    },
-    chipText () {
-      return this.condition.shortName || ''
-    },
-    chipStatus () {
-      if (this.isError) {
-        return 'Error'
-      }
-      if (this.isUnknown) {
-        return 'Unknown'
-      }
-      if (this.isProgressing) {
-        return 'Progressing'
-      }
-
-      return 'Healthy'
-    },
-    chipTooltip () {
-      return {
-        title: this.condition.name,
-        status: this.chipStatus,
-        description: this.condition.description,
-        userErrorCodeObjects: filter(objectsFromErrorCodes(this.condition.codes), { userError: true }),
-      }
-    },
-    chipIcon () {
-      if (this.isUserError) {
-        return 'mdi-account-alert-outline'
-      }
-      if (this.isError) {
-        return 'mdi-alert-circle-outline'
-      }
-      if (this.isUnknown) {
-        return 'mdi-help-circle-outline'
-      }
-      if (this.isProgressing && this.isAdmin) {
-        return 'mdi-progress-alert'
-      }
-
-      return ''
-    },
-    isError () {
-      if (this.condition.status === 'False' || !isEmpty(this.condition.codes)) {
-        return true
-      }
-      return false
-    },
-    isUnknown () {
-      if (this.condition.status === 'Unknown') {
-        return true
-      }
-      return false
-    },
-    isProgressing () {
-      if (this.condition.status === 'Progressing') {
-        return true
-      }
-      return false
-    },
-    isUserError () {
-      return isUserError(this.condition.codes)
-    },
-    errorDescriptions () {
-      if (this.isError) {
-        return [
-          {
-            description: this.condition.message,
-            errorCodeObjects: objectsFromErrorCodes(this.condition.codes),
-          },
-        ]
-      }
-      return undefined
-    },
-    nonErrorMessage () {
-      if (!this.isError) {
-        return this.condition.message
-      }
-      return undefined
-    },
-    popperKeyWithType () {
-      return `statusTag_${this.popperKey}`
-    },
-    color () {
-      if (this.isUnknown || this.staleShoot) {
-        return 'unknown'
-      }
-      if (this.isError) {
-        return 'error'
-      }
-      if (this.isProgressing && this.isAdmin) {
-        return 'info'
-      }
-      return 'primary'
-    },
-    textColor () {
-      if (this.isError) {
-        return 'white'
-      }
-      return this.color
-    },
-    visible () {
-      if (!this.isAdmin) {
-        return !get(this.condition, 'showAdminOnly', false)
-      }
-      return true
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-  .status-tag {
-    margin: 0 1px;
-
-    &.cursor-pointer :deep(.v-chip__content) {
-      cursor: pointer;
-    }
-
-    :deep(.v-chip__content) {
-      margin: -2px;
-    }
-
-    .chip-icon {
-      margin-left: -4px;
-      margin-right: 1px;
-    }
-  }
-</style>
diff --git a/frontend/src/components/Readiness/GReadinessBar.vue b/frontend/src/components/Readiness/GReadinessBar.vue
new file mode 100644
index 0000000000..d7ef2f6fdf
--- /dev/null
+++ b/frontend/src/components/Readiness/GReadinessBar.vue
@@ -0,0 +1,124 @@
+<!--
+SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div :class="['health-segment', stateClass]">
+    <v-tooltip
+      :text="condition.name"
+      location="top"
+      activator="parent"
+      :disabled="internalPopoverValue"
+    />
+    <g-popover
+      v-model="internalPopoverValue"
+      :placement="popperPlacement"
+      :disabled="!condition.message"
+      :toolbar-title="popperTitle"
+      :toolbar-color="color"
+    >
+      <template #activator="{ props: popoverProps }">
+        <div
+          v-bind="popoverProps"
+          :class="{ 'cursor-pointer': condition.message }"
+          style="width:100%; height:100%; position: absolute;"
+        />
+      </template>
+      <g-shoot-message-details
+        :status-title="statusTitle"
+        :last-message="nonErrorMessage"
+        :error-descriptions="errorDescriptions"
+        :last-transition-time="condition.lastTransitionTime"
+        :secret-binding-name="secretBindingName"
+        :namespace="shootMetadata.namespace"
+      />
+    </g-popover>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { useAuthnStore } from '@/store/authn'
+
+import GShootMessageDetails from '@/components/GShootMessageDetails.vue'
+
+import { useShootReadiness } from '@/composables/useShootReadiness'
+
+const props = defineProps({
+  condition: {
+    type: Object,
+    required: true,
+  },
+  secretBindingName: {
+    type: String,
+  },
+  popperPlacement: {
+    type: String,
+  },
+  staleShoot: {
+    type: Boolean,
+  },
+  shootMetadata: {
+    type: Object,
+    default: () => ({ uid: '' }),
+  },
+})
+
+const {
+  errorDescriptions,
+  statusTitle,
+  color,
+  nonErrorMessage,
+  internalPopoverValue,
+  popperTitle,
+  status,
+} = useShootReadiness(props.condition, props.staleShoot, props.shootMetadata)
+
+const authnStore = useAuthnStore()
+const isAdmin = computed(() => authnStore.isAdmin)
+
+const stateClass = computed(() => {
+  if (status.value === 'progressing' && !isAdmin.value) {
+    return 'health-segment-healthy'
+  }
+  return `health-segment-${status.value}`
+})
+</script>
+
+<style scoped>
+  .health-segment {
+    margin: 1px;
+    z-index: 1;
+    filter: brightness(1); /* Initial brightness */
+    transition: all .2s; /* Smooth transition */
+  }
+
+  .health-segment:hover {
+    filter: brightness(1.3); /* Brightness on hover */
+    z-index: 2;
+  }
+
+  .health-segment-healthy {
+    background-color: rgb(var(--v-theme-primary));
+    height: 19px;
+    margin-top: 0px;
+  }
+  .health-segment-progressing {
+    background-color: rgb(var(--v-theme-info));
+    height: 13px;
+    margin-top: 6px;
+  }
+  .health-segment-error {
+    background-color: rgb(var(--v-theme-error));
+    height: 19px;
+    margin-top: 21px;
+  }
+  .health-segment-unknown {
+    background-color: rgb(var(--v-theme-unknown));
+    height: 14px;
+    margin-top: 13px;
+  }
+
+</style>
diff --git a/frontend/src/components/Readiness/GReadinessChip.vue b/frontend/src/components/Readiness/GReadinessChip.vue
new file mode 100644
index 0000000000..34b9a191a3
--- /dev/null
+++ b/frontend/src/components/Readiness/GReadinessChip.vue
@@ -0,0 +1,177 @@
+<!--
+SPDX-FileCopyrightText: 2023 SAP SE or an SAP affiliate company and Gardener contributors
+
+SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <g-popover
+    v-model="internalPopoverValue"
+    :placement="popperPlacement"
+    :disabled="!condition.message"
+    :toolbar-title="popperTitle"
+    :toolbar-color="color"
+  >
+    <template #activator="{ props: popoverProps }">
+      <v-chip
+        v-bind="popoverProps"
+        ref="tagChipRef"
+        :class="{ 'cursor-pointer': condition.message }"
+        :variant="!isError ? 'tonal' : 'flat'"
+        :text-color="textColor"
+        size="small"
+        :color="color"
+        class="status-tag"
+      >
+        <v-icon
+          v-if="chipIcon"
+          :icon="chipIcon"
+          size="x-small"
+          class="chip-icon"
+        />
+        {{ chipText }}
+        <v-tooltip
+          :activator="$refs.tagChipRef"
+          location="top"
+          max-width="400px"
+          :disabled="internalPopoverValue"
+        >
+          <div class="font-weight-bold">
+            {{ chipTooltip.title }}
+          </div>
+          <div>Status: {{ chipTooltip.status }}</div>
+          <div
+            v-for="({ shortDescription }) in chipTooltip.userErrorCodeObjects"
+            :key="shortDescription"
+          >
+            <v-icon
+              class="mr-1"
+              color="white"
+              size="small"
+            >
+              mdi-account-alert
+            </v-icon>
+            <span class="font-weight-bold text--lighten-2">{{ shortDescription }}</span>
+          </div>
+          <template v-if="chipTooltip.description">
+            <v-divider color="white" />
+            <div>
+              {{ chipTooltip.description }}
+            </div>
+          </template>
+        </v-tooltip>
+      </v-chip>
+    </template>
+    <g-shoot-message-details
+      :status-title="statusTitle"
+      :last-message="nonErrorMessage"
+      :error-descriptions="errorDescriptions"
+      :last-transition-time="condition.lastTransitionTime"
+      :secret-binding-name="secretBindingName"
+      :namespace="shootMetadata.namespace"
+    />
+  </g-popover>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { useAuthnStore } from '@/store/authn'
+
+import GShootMessageDetails from '@/components/GShootMessageDetails.vue'
+
+import { useShootReadiness } from '@/composables/useShootReadiness'
+
+import {
+  isUserError,
+  objectsFromErrorCodes,
+} from '@/utils/errorCodes'
+
+import { filter } from '@/lodash'
+
+const props = defineProps({
+  condition: {
+    type: Object,
+    required: true,
+  },
+  secretBindingName: {
+    type: String,
+  },
+  popperPlacement: {
+    type: String,
+  },
+  staleShoot: {
+    type: Boolean,
+  },
+  shootMetadata: {
+    type: Object,
+    default: () => ({ uid: '' }),
+  },
+})
+
+const {
+  isError,
+  isUnknown,
+  isProgressing,
+  errorDescriptions,
+  statusTitle,
+  color,
+  nonErrorMessage,
+  internalPopoverValue,
+  popperTitle,
+} = useShootReadiness(props.condition, props.staleShoot, props.shootMetadata)
+
+const authnStore = useAuthnStore()
+const isAdmin = computed(() => authnStore.isAdmin)
+
+const chipText = computed(() => props.condition.shortName || '')
+
+const chipTooltip = computed(() => ({
+  title: props.condition.name,
+  status: statusTitle.value,
+  description: props.condition.description,
+  userErrorCodeObjects: filter(objectsFromErrorCodes(props.condition.codes), { userError: true }),
+}))
+
+const chipIcon = computed(() => {
+  if (isUserError(props.condition.codes)) {
+    return 'mdi-account-alert-outline'
+  }
+  if (isError.value) {
+    return 'mdi-alert-circle-outline'
+  }
+  if (isUnknown.value) {
+    return 'mdi-help-circle-outline'
+  }
+  if (isProgressing.value && isAdmin.value) {
+    return 'mdi-progress-alert'
+  }
+  return ''
+})
+
+const textColor = computed(() => {
+  if (isError.value) {
+    return 'white'
+  }
+  return color.value
+})
+</script>
+
+<style lang="scss" scoped>
+  .status-tag {
+    margin: 0 1px;
+
+    &.cursor-pointer :deep(.v-chip__content) {
+      cursor: pointer;
+    }
+
+    :deep(.v-chip__content) {
+      margin: -2px;
+    }
+
+    .chip-icon {
+      margin-left: -4px;
+      margin-right: 1px;
+    }
+  }
+</style>
diff --git a/frontend/src/components/GStatusTags.vue b/frontend/src/components/Readiness/GShootReadiness.vue
similarity index 63%
rename from frontend/src/components/GStatusTags.vue
rename to frontend/src/components/Readiness/GShootReadiness.vue
index ee2267b0b1..7c769213de 100644
--- a/frontend/src/components/GStatusTags.vue
+++ b/frontend/src/components/Readiness/GShootReadiness.vue
@@ -5,8 +5,29 @@ SPDX-License-Identifier: Apache-2.0
 -->
 
 <template>
-  <div class="d-flex flex-nowrap justify-start">
-    <g-status-tag
+  <div
+    v-if="bar"
+    class="health-bar-container"
+  >
+    <div class="x-axis" />
+    <div class="health-bar">
+      <g-readiness-bar
+        v-for="condition in conditions"
+        :key="condition.type"
+        :condition="condition"
+        :popper-placement="popperPlacement"
+        :secret-binding-name="shootSecretBindingName"
+        :shoot-metadata="shootMetadata"
+        :stale-shoot="isStaleShoot"
+        :style="healthSegmentStyles"
+      />
+    </div>
+  </div>
+  <div
+    v-else
+    class="d-flex flex-nowrap justify-start"
+  >
+    <g-readiness-chip
       v-for="condition in conditions"
       :key="condition.type"
       :condition="condition"
@@ -45,8 +66,8 @@ import {
 
 import { useConfigStore } from '@/store/config'
 import { useShootStore } from '@/store/shoot'
+import { useAuthnStore } from '@/store/authn'
 
-import GStatusTag from '@/components/GStatusTag.vue'
 import GExternalLink from '@/components/GExternalLink.vue'
 
 import { useShootItem } from '@/composables/useShootItem'
@@ -56,6 +77,9 @@ import {
   errorCodesFromArray,
 } from '@/utils/errorCodes'
 
+import GReadinessBar from './GReadinessBar.vue'
+import GReadinessChip from './GReadinessChip.vue'
+
 import {
   sortBy,
   padStart,
@@ -69,6 +93,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  bar: {
+    type: Boolean,
+    default: false,
+  },
 })
 const {
   popperPlacement,
@@ -84,10 +112,10 @@ const {
 
 const configStore = useConfigStore()
 const shootStore = useShootStore()
+const authnStore = useAuthnStore()
 
 const conditions = computed(() => {
   const conditions = shootReadiness.value
-    .filter(condition => !!condition.lastTransitionTime)
     .map(condition => {
       const conditionDefaults = configStore.conditionForType(condition.type)
       return {
@@ -96,6 +124,7 @@ const conditions = computed(() => {
         sortOrder: padStart(conditionDefaults.sortOrder, 8, '0'),
       }
     })
+    .filter(condition => !!condition.lastTransitionTime && (!condition.showAdminOnly || authnStore.isAdmin))
   return sortBy(conditions, 'sortOrder')
 })
 
@@ -107,4 +136,31 @@ const errorCodeObjects = computed(() => {
 const isStaleShoot = computed(() => {
   return !shootStore.isShootActive(shootUid.value)
 })
+
+const healthSegmentStyles = computed(() => ({
+  width: `${100 / conditions.value.length}%`,
+}))
 </script>
+
+<style scoped>
+.health-bar-container {
+  position: relative;
+  height: 40px;
+  width: 80px;
+  background-color: rgba(var(--v-border-color), .05);
+}
+.health-bar {
+  display: flex;
+}
+
+.x-axis {
+  position: absolute;
+  bottom: 19px;
+  height: 2px;
+  left: 1px;
+  right: 1px;
+  background-color: rgba(var(--v-border-color), .5);
+  z-index: 0;
+}
+
+</style>
diff --git a/frontend/src/components/ShootDetails/GShootMonitoringCard.vue b/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
index 606fb6877a..87c2fb2d86 100644
--- a/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
+++ b/frontend/src/components/ShootDetails/GShootMonitoringCard.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: Apache-2.0
       <g-list-item-content label="Readiness">
         <div class="d-flex align-center pt-1">
           <span v-if="!shootConditions.length">-</span>
-          <g-status-tags
+          <g-shoot-readiness
             v-else
             popper-placement="bottom"
             show-status-text
@@ -68,7 +68,7 @@ import { useAuthzStore } from '@/store/authz'
 import { useConfigStore } from '@/store/config'
 
 import GShootStatus from '@/components/GShootStatus'
-import GStatusTags from '@/components/GStatusTags'
+import GShootReadiness from '@/components/Readiness/GShootReadiness'
 import GClusterMetrics from '@/components/GClusterMetrics'
 
 import { useShootItem } from '@/composables/useShootItem'
diff --git a/frontend/src/composables/useShootReadiness.js b/frontend/src/composables/useShootReadiness.js
new file mode 100644
index 0000000000..dd3bbf0bbd
--- /dev/null
+++ b/frontend/src/composables/useShootReadiness.js
@@ -0,0 +1,131 @@
+//
+// SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Gardener contributors
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import {
+  computed,
+  inject,
+} from 'vue'
+
+import { useAuthnStore } from '@/store/authn'
+
+import { objectsFromErrorCodes } from '@/utils/errorCodes'
+
+import {
+  isEmpty,
+  upperFirst,
+} from '@/lodash'
+
+export function useShootReadiness (condition, staleShoot = false, shootMetadata) {
+  const authnStore = useAuthnStore()
+
+  const isAdmin = computed(() => authnStore.isAdmin)
+
+  const isError = computed(() => {
+    if (condition.status === 'False' || !isEmpty(condition.codes)) {
+      return true
+    }
+    return false
+  })
+
+  const isUnknown = computed(() => {
+    if (condition.status === 'Unknown') {
+      return true
+    }
+    return false
+  })
+
+  const isProgressing = computed(() => {
+    if (condition.status === 'Progressing') {
+      return true
+    }
+    return false
+  })
+
+  const errorDescriptions = computed(() => {
+    if (isError.value) {
+      return [
+        {
+          description: condition.message,
+          errorCodeObjects: objectsFromErrorCodes(condition.codes),
+        },
+      ]
+    }
+    return undefined
+  })
+
+  const status = computed(() => {
+    if (isUnknown.value || staleShoot) {
+      return 'unknown'
+    }
+    if (isError.value) {
+      return 'error'
+    }
+    if (isProgressing.value) {
+      return 'progressing'
+    }
+    return 'healthy'
+  })
+
+  const popoverKey = computed(() => {
+    return `g-readiness-chip[${condition.type}]:${shootMetadata.uid}`
+  })
+
+  const popperTitle = computed(() => {
+    if (staleShoot) {
+      return 'Last Status'
+    }
+    return condition.name
+  })
+
+  const statusTitle = computed(() => {
+    return upperFirst(status.value)
+  })
+
+  const nonErrorMessage = computed(() => {
+    if (!isError.value) {
+      return condition.message
+    }
+    return undefined
+  })
+
+  const color = computed(() => {
+    if (status.value === 'progressing') {
+      if (isAdmin.value) {
+        return 'info'
+      }
+      return 'primary'
+    }
+    if (status.value === 'healthy') {
+      return 'primary'
+    }
+    return status.value
+  })
+
+  const activePopoverKey = inject('activePopoverKey')
+
+  const internalPopoverValue = computed({
+    get () {
+      return activePopoverKey?.value === popoverKey.value
+    },
+    set (value) {
+      activePopoverKey.value = value ? popoverKey.value : ''
+    },
+  })
+
+  return {
+    isError,
+    isUnknown,
+    isProgressing,
+    errorDescriptions,
+    status,
+    popoverKey,
+    popperTitle,
+    statusTitle,
+    nonErrorMessage,
+    color,
+    internalPopoverValue,
+  }
+}