diff --git a/internal/lookout/ui/development-setup-and-start.sh b/internal/lookout/ui/development-setup-and-start.sh
index c745d1f6f6f..12a26a1b443 100755
--- a/internal/lookout/ui/development-setup-and-start.sh
+++ b/internal/lookout/ui/development-setup-and-start.sh
@@ -14,4 +14,7 @@ if [ "$1" ]; then
 fi
 
 yarn openapi
+
+git checkout HEAD -- yarn.lock
+
 DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
index c3b7cf6abe4..42c2051797e 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobGroupStateCounts.tsx
@@ -1,6 +1,7 @@
+import { getContrastText } from "utils/styleUtils"
+
 import styles from "./JobGroupStateCounts.module.css"
-import { JobState } from "../../models/lookoutV2Models"
-import { colorForJobState } from "../../utils/jobsTableFormatters"
+import { JobState, jobStateColors } from "../../models/lookoutV2Models"
 
 interface JobGroupStateCountsProps {
   stateCounts: Record<string, number>
@@ -12,13 +13,14 @@ export const JobGroupStateCounts = ({ stateCounts }: JobGroupStateCountsProps) =
     if (!((state as string) in stateCounts)) {
       continue
     }
-    const color = colorForJobState(state)
+    const backgroundColor = jobStateColors[state]
     const val = (
       <span
         className={styles.state}
         key={state}
         style={{
-          backgroundColor: color,
+          backgroundColor,
+          color: getContrastText(backgroundColor),
         }}
       >
         {stateCounts[state as string]}
diff --git a/internal/lookout/ui/src/components/lookoutV2/JobStateLabel.tsx b/internal/lookout/ui/src/components/lookoutV2/JobStateLabel.tsx
index dbba593d617..90970ecb203 100644
--- a/internal/lookout/ui/src/components/lookoutV2/JobStateLabel.tsx
+++ b/internal/lookout/ui/src/components/lookoutV2/JobStateLabel.tsx
@@ -1,23 +1,24 @@
 import { ReactNode } from "react"
 
 import { Box } from "@mui/material"
-import { JobState } from "models/lookoutV2Models"
-import { colorForJobState } from "utils/jobsTableFormatters"
+import { defaultJobStateColor, JobState, jobStateColors } from "models/lookoutV2Models"
+import { getContrastText } from "utils/styleUtils"
 
 export interface JobStateLabelProps {
   state?: JobState
   children: ReactNode
 }
 export const JobStateLabel = ({ state, children }: JobStateLabelProps) => {
-  const color = colorForJobState(state)
+  const backgroundColor = state ? jobStateColors[state] : defaultJobStateColor
   return (
     <Box
       sx={{
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: color,
-        padding: color ? "0 0.5em" : "",
+        backgroundColor,
+        padding: backgroundColor ? "0 0.5em" : "",
+        color: getContrastText(backgroundColor),
       }}
     >
       {children}
diff --git a/internal/lookout/ui/src/models/lookoutV2Models.ts b/internal/lookout/ui/src/models/lookoutV2Models.ts
index 6cb92d8839d..47dc744f4bc 100644
--- a/internal/lookout/ui/src/models/lookoutV2Models.ts
+++ b/internal/lookout/ui/src/models/lookoutV2Models.ts
@@ -11,16 +11,30 @@ export enum JobState {
   Rejected = "REJECTED",
 }
 
-export const jobStateDisplayInfo: Record<JobState, ColoredState> = {
-  [JobState.Leased]: { displayName: "Leased", color: "#f5c056" },
-  [JobState.Queued]: { displayName: "Queued", color: "#ffff00" },
-  [JobState.Pending]: { displayName: "Pending", color: "#ff9900" },
-  [JobState.Running]: { displayName: "Running", color: "#00ff00" },
-  [JobState.Succeeded]: { displayName: "Succeeded", color: "#0000ff" },
-  [JobState.Failed]: { displayName: "Failed", color: "#ff0000" },
-  [JobState.Cancelled]: { displayName: "Cancelled", color: "#999999" },
-  [JobState.Preempted]: { displayName: "Preempted", color: "#f8bbd0" },
-  [JobState.Rejected]: { displayName: "Rejected", color: "#ef5350" },
+export const jobStateColors: Record<JobState, string> = {
+  [JobState.Queued]: "#6c757d",
+  [JobState.Pending]: "#6c757d",
+  [JobState.Running]: "#007bff",
+  [JobState.Succeeded]: "#28a745",
+  [JobState.Failed]: "#88022b",
+  [JobState.Cancelled]: "#ffc107",
+  [JobState.Preempted]: "#ffc107",
+  [JobState.Leased]: "#6c757d",
+  [JobState.Rejected]: "#88022b",
+}
+
+export const defaultJobStateColor = "#6f42c1"
+
+export const jobStateDisplayNames: Record<JobState, string> = {
+  [JobState.Leased]: "Leased",
+  [JobState.Queued]: "Queued",
+  [JobState.Pending]: "Pending",
+  [JobState.Running]: "Running",
+  [JobState.Succeeded]: "Succeeded",
+  [JobState.Failed]: "Failed",
+  [JobState.Cancelled]: "Cancelled",
+  [JobState.Preempted]: "Preempted",
+  [JobState.Rejected]: "Rejected",
 }
 
 const terminatedJobStates = new Set([
@@ -62,11 +76,6 @@ export const jobRunStateDisplayInfo: Record<JobRunState, { displayName: string }
   [JobRunState.RunCancelled]: { displayName: "Cancelled" },
 }
 
-type ColoredState = {
-  displayName: string
-  color: string
-}
-
 export type JobId = string
 
 export type Job = {
diff --git a/internal/lookout/ui/src/utils/jobsTableFormatters.ts b/internal/lookout/ui/src/utils/jobsTableFormatters.ts
index be68ee0fa18..83c2461b084 100644
--- a/internal/lookout/ui/src/utils/jobsTableFormatters.ts
+++ b/internal/lookout/ui/src/utils/jobsTableFormatters.ts
@@ -1,40 +1,13 @@
-import { cyan, green, grey, orange, pink, purple, red, yellow } from "@mui/material/colors"
 import { intervalToDuration } from "date-fns"
 import { parseISO } from "date-fns/fp"
 import { formatInTimeZone } from "date-fns-tz"
-import { JobRunState, jobRunStateDisplayInfo, JobState, jobStateDisplayInfo } from "models/lookoutV2Models"
+import { JobRunState, jobRunStateDisplayInfo, JobState, jobStateDisplayNames } from "models/lookoutV2Models"
 
-export const formatJobState = (state?: JobState): string =>
-  state !== undefined ? jobStateDisplayInfo[state]?.displayName ?? state : ""
+export const formatJobState = (state?: JobState): string => (state ? jobStateDisplayNames[state] ?? state : "")
 
 export const formatJobRunState = (state?: JobRunState): string =>
   state !== undefined ? jobRunStateDisplayInfo[state]?.displayName ?? state : ""
 
-export const colorForJobState = (state?: JobState): string | undefined => {
-  switch (state) {
-    case JobState.Queued:
-      return yellow["A100"]
-    case JobState.Pending:
-      return orange["A100"]
-    case JobState.Running:
-      return green["A100"]
-    case JobState.Succeeded:
-      return undefined
-    case JobState.Failed:
-      return red["A100"]
-    case JobState.Cancelled:
-      return grey[300]
-    case JobState.Preempted:
-      return pink[100]
-    case JobState.Leased:
-      return cyan[100]
-    case JobState.Rejected:
-      return red["400"]
-    default:
-      return purple["A100"]
-  }
-}
-
 export const formatUtcDate = (date?: string): string => {
   if (date !== undefined) {
     try {
diff --git a/internal/lookout/ui/src/utils/styleUtils.test.ts b/internal/lookout/ui/src/utils/styleUtils.test.ts
new file mode 100644
index 00000000000..015db326257
--- /dev/null
+++ b/internal/lookout/ui/src/utils/styleUtils.test.ts
@@ -0,0 +1,23 @@
+import { getContrastText } from "./styleUtils"
+
+describe("getContrastText", () => {
+  it("returns black when no background color is provided", () => {
+    expect(getContrastText("")).toEqual("#000")
+  })
+
+  it("returns black for a white background", () => {
+    expect(getContrastText("#fff")).toEqual("#000")
+  })
+
+  it("returns white for a black background", () => {
+    expect(getContrastText("#000")).toEqual("#fff")
+  })
+
+  it("returns white for a dark blue background", () => {
+    expect(getContrastText("#000013")).toEqual("#fff")
+  })
+
+  it("returns black for a yellow background", () => {
+    expect(getContrastText("#ffff00")).toEqual("#000")
+  })
+})
diff --git a/internal/lookout/ui/src/utils/styleUtils.ts b/internal/lookout/ui/src/utils/styleUtils.ts
new file mode 100644
index 00000000000..1982587536b
--- /dev/null
+++ b/internal/lookout/ui/src/utils/styleUtils.ts
@@ -0,0 +1,4 @@
+import { getContrastRatio } from "@mui/material"
+
+export const getContrastText = (backgroundColor: string) =>
+  getContrastRatio(backgroundColor || "#fff", "#fff") > 4.5 ? "#fff" : "#000"