diff --git a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
index 88eff91c7..fdb225143 100644
--- a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
+++ b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
@@ -1,70 +1,15 @@
-@switch (state()) {
-  @case ('SUCCESS') {
-    <!-- Success State -->
-    <p-tag severity="success" [rounded]="true" [pTooltip]="'Latest Deployment Successful'">
-      <i-tabler name="check" class="!size-5"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('WAITING') {
-    <!-- In Progress State -->
-    <p-tag severity="warn" [rounded]="true" [pTooltip]="'Waiting deployment'">
-      <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('PENDING') {
-    <!-- Pending State -->
-    <p-tag severity="warn" [rounded]="true" [pTooltip]="'Deployment pending'">
-      <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('IN_PROGRESS') {
-    <!-- In Progress State -->
-    <p-tag severity="info" [rounded]="true" [pTooltip]="'Deployment in progress'">
-      <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('QUEUED') {
-    <!-- Queued State -->
-    <p-tag severity="info" [rounded]="true" [pTooltip]="'Deployment queued'">
-      <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('ERROR') {
-    <!-- Error State -->
-    <p-tag severity="danger" [rounded]="true" [pTooltip]="'Latest deployment failed'">
-      <i-tabler name="exclamation-circle" class="!size-5"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('FAILURE') {
-    <!-- Failure State -->
-    <p-tag severity="danger" [rounded]="true" [pTooltip]="'Latest deployment failed'">
-      <i-tabler name="exclamation-mark" class="!size-5"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('INACTIVE') {
-    <!-- Inactive State -->
-    <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Deployment inactive'">
-      <i-tabler name="time-duration-off" class="!size-5"></i-tabler>
-    </p-tag>
-  }
-
-  @case ('UNKNOWN') {
-    <!-- Unknown State -->
-    <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Deployment state unknown'">
-      <i-tabler name="question-mark" class="!size-5"></i-tabler>
-    </p-tag>
-  }
+<div class="flex items-center gap-1">
+  <p-tag [severity]="getSeverity()" [rounded]="rounded()" [pTooltip]="!verbose() ? getTooltip() : undefined" [value]="verbose() ? getValue() : undefined">
+    <div class="flex items-center gap-2">
+      <i-tabler [name]="getIcon()" [class]="getIconClass()"></i-tabler>
+    </div>
+  </p-tag>
 
-  @default {
-    <p-tag severity="secondary" [rounded]="true" [pTooltip]="'Unrecognized State'">
-      <i-tabler name="question-mark" class="!size-5"></i-tabler>
+  @if (showLatestDeployment() && latestDeployment()) {
+    <span>now at</span>
+    <p-tag class="text-xs">
+      <i-tabler name="git-branch" class="!size-4" />
+      {{ latestDeployment()?.releaseCandidateName ?? latestDeployment()?.ref }}
     </p-tag>
   }
-}
+</div>
diff --git a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.ts b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.ts
index e070edad1..524867cca 100644
--- a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.ts
+++ b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.ts
@@ -1,14 +1,98 @@
-import { Component, input } from '@angular/core';
-import { IconsModule } from 'icons.module';
+// deployment-state-tag.component.ts
+import { Component, computed, input } from '@angular/core';
 import { TagModule } from 'primeng/tag';
+import { IconsModule } from 'icons.module';
 import { TooltipModule } from 'primeng/tooltip';
 
+type DeploymentState = 'SUCCESS' | 'WAITING' | 'PENDING' | 'IN_PROGRESS' | 'QUEUED' | 'ERROR' | 'FAILURE' | 'INACTIVE' | 'UNKNOWN' | 'NEVER_DEPLOYED' | 'REPLACED';
+
 @Component({
   selector: 'app-deployment-state-tag',
+  standalone: true,
   imports: [TagModule, IconsModule, TooltipModule],
-  providers: [],
   templateUrl: './deployment-state-tag.component.html',
 })
 export class DeploymentStateTagComponent {
-  state = input.required<string | undefined>();
+  state = input.required<DeploymentState | undefined>();
+  verbose = input(false);
+  showLatestDeployment = input(false);
+  latestDeployment = input<{ releaseCandidateName?: string; ref?: string } | null | undefined>(null);
+
+  rounded = computed(() => !this.verbose());
+  internalState = computed(() => this.state() || 'UNKNOWN');
+
+  getSeverity() {
+    const severityMap: Record<DeploymentState, Severity> = {
+      SUCCESS: 'success',
+      WAITING: 'warn',
+      PENDING: 'warn',
+      IN_PROGRESS: 'info',
+      QUEUED: 'info',
+      ERROR: 'danger',
+      FAILURE: 'danger',
+      INACTIVE: 'secondary',
+      UNKNOWN: 'secondary',
+      NEVER_DEPLOYED: 'secondary',
+      REPLACED: 'contrast',
+    };
+    return severityMap[this.internalState()];
+  }
+
+  getIcon() {
+    const iconMap: Record<DeploymentState, string> = {
+      SUCCESS: 'check',
+      WAITING: 'progress',
+      PENDING: 'progress',
+      IN_PROGRESS: 'progress',
+      QUEUED: 'progress',
+      ERROR: 'exclamation-circle',
+      FAILURE: 'exclamation-mark',
+      INACTIVE: 'time-duration-off',
+      UNKNOWN: 'question-mark',
+      NEVER_DEPLOYED: 'question-mark',
+      REPLACED: 'repeat',
+    };
+    return iconMap[this.internalState()];
+  }
+
+  getIconClass() {
+    const spinStates: DeploymentState[] = ['WAITING', 'PENDING', 'IN_PROGRESS', 'QUEUED'];
+    return `!size-5 ${spinStates.includes(this.internalState()) ? 'animate-spin' : ''}`;
+  }
+
+  getValue() {
+    const valueMap: Record<DeploymentState, string> = {
+      SUCCESS: 'success',
+      WAITING: 'waiting',
+      PENDING: 'pending',
+      IN_PROGRESS: 'in progress',
+      QUEUED: 'queued',
+      ERROR: 'failed',
+      FAILURE: 'failed',
+      INACTIVE: 'inactive',
+      UNKNOWN: 'unknown',
+      NEVER_DEPLOYED: 'never deployed',
+      REPLACED: 'replaced',
+    };
+    return valueMap[this.internalState()];
+  }
+
+  getTooltip() {
+    const tooltipMap: Record<DeploymentState, string> = {
+      SUCCESS: 'Latest Deployment Successful',
+      WAITING: 'Waiting deployment',
+      PENDING: 'Deployment pending',
+      IN_PROGRESS: 'Deployment in progress',
+      QUEUED: 'Deployment queued',
+      ERROR: 'Latest deployment failed',
+      FAILURE: 'Latest deployment failed',
+      INACTIVE: 'Deployment inactive',
+      UNKNOWN: 'Deployment state unknown',
+      NEVER_DEPLOYED: 'Never deployed',
+      REPLACED: 'Deployment was replaced',
+    };
+    return tooltipMap[this.internalState()];
+  }
 }
+
+type Severity = 'success' | 'secondary' | 'info' | 'warn' | 'danger' | 'contrast' | undefined;
diff --git a/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.html b/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.html
index 92f34c692..dcbfb0f83 100644
--- a/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.html
+++ b/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.html
@@ -35,63 +35,17 @@
         <td>
           <span class="flex items-center gap-2">
             {{ environment.name }}
-            <span [pTooltip]="'Open Environment'" class="cursor-pointer hover:bg-gray-200 px-2 py-1 rounded flex items-center" (click)="openEnvironment($event, environment)">
-              <i-tabler name="external-link" />
-            </span>
+            @if (environment.serverUrl) {
+              <span [pTooltip]="'Open Environment'" class="cursor-pointer hover:bg-gray-200 px-2 py-1 rounded flex items-center" (click)="openEnvironment($event, environment)">
+                <i-tabler name="external-link" />
+              </span>
+            }
           </span>
         </td>
         <td>
-          @switch (deploymentStatus(environment)) {
-            @case ('SUCCESS') {
-              <p-tag value="success" class="text-xs" severity="success" />
-            }
-            @case ('REPLACED') {
-              <div class="flex items-center gap-1">
-                <p-tag value="replaced" class="text-xs" severity="contrast" />
-                now at
-                @if (environment.latestDeployment) {
-                  @if (environment.latestDeployment.releaseCandidateName) {
-                    <p-tag class="text-xs">
-                      <i-tabler name="git-branch" class="!size-4" />
-                      {{ environment.latestDeployment.releaseCandidateName }}
-                    </p-tag>
-                  } @else {
-                    <p-tag class="text-xs">
-                      <i-tabler name="git-branch" class="!size-4" />
-                      {{ environment.latestDeployment.ref }}
-                    </p-tag>
-                  }
-                }
-              </div>
-            }
-            @case ('FAILURE') {
-              <p-tag value="failed" class="text-xs" severity="danger" />
-            }
-            @case ('NEVER_DEPLOYED') {
-              <div class="flex items-center gap-1">
-                @if (environment.latestDeployment) {
-                  now at
-                  @if (environment.latestDeployment.releaseCandidateName) {
-                    <p-tag class="text-xs">
-                      <i-tabler name="git-branch" class="!size-4" />
-                      {{ environment.latestDeployment.releaseCandidateName }}
-                    </p-tag>
-                  } @else {
-                    <p-tag class="text-xs">
-                      <i-tabler name="git-branch" class="!size-4" />
-                      {{ environment.latestDeployment.ref }}
-                    </p-tag>
-                  }
-                } @else {
-                  no release candidate deployed yet
-                }
-              </div>
-            }
-            @default {
-              <p-tag value="unknown" class="text-xs" />
-              now at {{ environment.latestDeployment.releaseCandidateName }}
-            }
-          }
+          <div class="flex items-center gap-2">
+            <app-deployment-state-tag [state]="deploymentStatus(environment)" [verbose]="true" [showLatestDeployment]="true" [latestDeployment]="environment.latestDeployment" />
+          </div>
         </td>
         <td>
           @if (userCanDeploy()) {
diff --git a/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.ts b/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.ts
index 82b2c134c..b587e4ead 100644
--- a/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.ts
+++ b/client/src/app/components/release-candidate-deployment-table/release-candidate-deployment-table.component.ts
@@ -22,10 +22,11 @@ import { TooltipModule } from 'primeng/tooltip';
 import { MessageService } from 'primeng/api';
 import { KeycloakService } from '@app/core/services/keycloak/keycloak.service';
 import { PermissionService } from '@app/core/services/permission.service';
+import { DeploymentStateTagComponent } from '../environments/deployment-state-tag/deployment-state-tag.component';
 
 @Component({
   selector: 'app-release-candidate-deployment-table',
-  imports: [TableModule, ButtonModule, IconsModule, SkeletonModule, TagModule, AvatarModule, OverlayBadgeModule, BadgeModule, TooltipModule],
+  imports: [TableModule, ButtonModule, IconsModule, SkeletonModule, TagModule, AvatarModule, OverlayBadgeModule, BadgeModule, TooltipModule, DeploymentStateTagComponent],
   templateUrl: './release-candidate-deployment-table.component.html',
 })
 export class ReleaseCandidateDeploymentTableComponent {
@@ -136,12 +137,8 @@ export class ReleaseCandidateDeploymentTableComponent {
       return 'REPLACED';
     }
 
-    if (deployment.state === 'SUCCESS') {
-      return 'SUCCESS';
-    }
-
-    if (deployment.state === 'ERROR') {
-      return 'FAILURE';
+    if (deployment.state !== undefined) {
+      return deployment.state;
     }
     return 'UNKNOWN';
   };
diff --git a/client/src/icons.module.ts b/client/src/icons.module.ts
index 4ed9a7a21..a1780702a 100644
--- a/client/src/icons.module.ts
+++ b/client/src/icons.module.ts
@@ -37,6 +37,7 @@ import {
   IconGitMerge,
   IconPoint,
   IconPlus,
+  IconRepeat,
   IconFilter,
   IconFilterPlus,
   IconLock,
@@ -96,6 +97,7 @@ const icons = {
   IconQuestionMark,
   IconPoint,
   IconPlus,
+  IconRepeat,
   IconFilter,
   IconFilterPlus,
   IconLock,