diff --git a/ui/src/components/certimate/DeployProgress.tsx b/ui/src/components/certimate/DeployProgress.tsx
index b96dc2b9..caed3f2a 100644
--- a/ui/src/components/certimate/DeployProgress.tsx
+++ b/ui/src/components/certimate/DeployProgress.tsx
@@ -1,5 +1,8 @@
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils"
+
+
 import { Separator } from "../ui/separator";
 
 type DeployProgressProps = {
@@ -10,116 +13,61 @@ type DeployProgressProps = {
 const DeployProgress = ({ phase, phaseSuccess }: DeployProgressProps) => {
   const { t } = useTranslation();
 
-  let rs = <> </>;
+  let step = 0;
+
   if (phase === "check") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap  text-muted-foreground">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-red-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap  text-muted-foreground">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
+    step = 1
+  } else if (phase === "apply") {
+    step = 2
+  } else if (phase === "deploy") {
+    step = 3
   }
 
-  if (phase === "apply") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-red-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
-  }
-
-  if (phase === "deploy") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap text-red-600">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
-  }
-
-  return rs;
+  return (
+    <div className="flex items-center">
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step === 1 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 1 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.check')}
+      </div>
+      <Separator className={
+        cn(
+          "h-1 grow max-w-[60px]",
+          step > 1 ? "bg-green-600" : "",
+        )
+      } />
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step < 2 ? "text-muted-foreground" : "",
+          step === 2 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 2 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.apply')}
+      </div>
+      <Separator className={
+        cn(
+          "h-1 grow max-w-[60px]",
+          step > 2 ? "bg-green-600" : "",
+        )
+      } />
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step < 3 ? "text-muted-foreground" : "",
+          step === 3 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 3 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.deploy')}
+      </div>
+    </div>
+  )
 };
 
 export default DeployProgress;