diff --git a/package-lock.json b/package-lock.json
index ec16852c066b77e84c79a93b7042d3952c68559e..eff73ecc53e456b0c09a8d2beae0430517604b4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
-        "@ess-ics/ce-ui-common": "^10.1.0",
+        "@ess-ics/ce-ui-common": "^11.0.0",
         "@mui/icons-material": "^5.14.1",
         "@mui/material": "^5.14.1",
         "@reduxjs/toolkit": "^2.2.7",
@@ -1399,9 +1399,9 @@
       }
     },
     "node_modules/@ess-ics/ce-ui-common": {
-      "version": "10.1.0",
-      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-10.1.0.tgz",
-      "integrity": "sha512-xkhcghB9pqNq3pZcDaSS7AOpggnFgglSd9qpivJAFMov8hxje/RZHumCi+lFDX3g31Ul7u5ZrElq4xbvuBgTpg==",
+      "version": "11.0.0",
+      "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-11.0.0.tgz",
+      "integrity": "sha512-SuxD9+oH9M4DrAHeOO306HUbql4yMwe2vljMPju1RYnorVCP/eBSzwIzIXmP8cPx0/aiVeWLfTflMi9LY31ahg==",
       "dependencies": {
         "@fontsource/titillium-web": "^5.0.22",
         "@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index 2a75a5e3780635fc51b6024b3c08fd0c2795bec2..df9357804677dc403e5cc3e844d53642204a4d13 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@ess-ics/ce-ui-common": "^10.1.0",
+    "@ess-ics/ce-ui-common": "^11.0.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
     "@reduxjs/toolkit": "^2.2.7",
diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index ace93beeea3c7418dc77bdb88ec5fa35429d5546..8f7453a13f61c6506684ecb47da3b2f51f0853bf 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -9,7 +9,7 @@ import {
   formatDateAndTime,
   EmptyValue,
   Duration,
-  StepperComponents,
+  SingleStateStepper,
   STEPPER_STATES,
   AccessControl
 } from "@ess-ics/ce-ui-common";
@@ -79,9 +79,6 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
   const [alerts, setAlerts] = useState<
     { type?: Status; message?: string; link?: string }[]
   >(operation.alerts ?? []);
-  const StepIcon = operation?.status
-    ? StepperComponents[operation.status.toLowerCase()]
-    : StepperComponents[STEPPER_STATES.unknown];
   const [expanded, setExpanded] = useState(false);
 
   const awxJob = useMemo(
@@ -129,10 +126,10 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
               >
                 Job log stream
               </Typography>
-              <StepIcon
+              <SingleStateStepper
                 showToolTip
                 step={{
-                  state: operation?.status?.toLowerCase(),
+                  state: operation?.status || STEPPER_STATES.UNKNOWN,
                   label: awxJob.message()
                 }}
               />
diff --git a/src/components/Job/JobStatus.tsx b/src/components/Job/JobStatus.tsx
index f9099804422323216529294dcd861ddb60f943c9..320bc6a56050984b1d088da0c54764b9faf709b0 100644
--- a/src/components/Job/JobStatus.tsx
+++ b/src/components/Job/JobStatus.tsx
@@ -7,29 +7,30 @@ import {
   IconUnknown
 } from "@ess-ics/ce-ui-common";
 import { theme } from "../../style/Theme";
+import { JobDetails } from "../../store/deployApi";
 
 interface JobStatusProps {
-  status: string | undefined;
+  status: JobDetails["status"];
 }
 
-const getStatus = (status: string) => {
-  switch (status.toLowerCase()) {
-    case STEPPER_STATES.queued:
+const getStatus = (status: JobDetails["status"]) => {
+  switch (status) {
+    case STEPPER_STATES.QUEUED:
       return {
         label: "Queued",
         icon: IconRunning
       };
-    case STEPPER_STATES.running:
+    case STEPPER_STATES.RUNNING:
       return {
         label: "Running",
         icon: IconRunning
       };
-    case STEPPER_STATES.successful:
+    case STEPPER_STATES.SUCCESSFUL:
       return {
         label: "Successful",
         icon: IconSuccessful
       };
-    case STEPPER_STATES.failed:
+    case STEPPER_STATES.FAILED:
       return {
         label: "Failed",
         icon: IconFailed
@@ -43,9 +44,7 @@ const getStatus = (status: string) => {
 };
 
 export const JobStatus = ({ status }: JobStatusProps) => {
-  const convertedStatus = status ? status.toString().toLowerCase() : "";
-
-  const activeStep = getStatus(convertedStatus);
+  const activeStep = getStatus(status);
   const Icon = activeStep.icon;
 
   return (
@@ -54,7 +53,7 @@ export const JobStatus = ({ status }: JobStatusProps) => {
       labelPosition="right"
       LabelProps={{
         color:
-          convertedStatus === STEPPER_STATES.failed
+          status === STEPPER_STATES.FAILED
             ? theme.palette.status.fail.main
             : "inherit"
       }}