diff --git a/ui-v2/src/components/ui/flow-run-acitivity-bar-graph/flow-run-activity-bar-graph.test.tsx b/ui-v2/src/components/ui/flow-run-acitivity-bar-graph/flow-run-activity-bar-graph.test.tsx
index dd69bea50bfe..1658fb5ba3a3 100644
--- a/ui-v2/src/components/ui/flow-run-acitivity-bar-graph/flow-run-activity-bar-graph.test.tsx
+++ b/ui-v2/src/components/ui/flow-run-acitivity-bar-graph/flow-run-activity-bar-graph.test.tsx
@@ -105,34 +105,37 @@ describe("FlowRunActivityBarChart", () => {
 	});
 
 	it.each([
-		"COMPLETED",
-		"FAILED",
-		"CANCELLED",
-		"CANCELLING",
-		"PENDING",
-		"SCHEDULED",
-		"PAUSED",
-		"RUNNING",
-		"CRASHED",
-	])("renders the bars with expected colors for %s", (stateType) => {
-		const enrichedFlowRun = {
-			...mockFlowRun,
-			state_type: stateType,
-		};
-		render(
-			<RouterContextProvider router={router}>
-				<FlowRunActivityBarChart
-					{...defaultProps}
-					// @ts-expect-error - Type error from test data not matching schema
-					enrichedFlowRuns={[enrichedFlowRun]}
-				/>
-			</RouterContextProvider>,
-		);
-		const bars = screen.getAllByRole("graphics-symbol");
-		expect(
-			within(bars[0]).getByTestId("bar-rect-test-flow-run-1"),
-		).toHaveAttribute("fill", `hsl(var(--state-${stateType.toLowerCase()}))`);
-	});
+		["COMPLETED", "fill-green-600"],
+		["FAILED", "fill-red-600"],
+		["CANCELLED", "fill-gray-500"],
+		["CANCELLING", "fill-gray-600"],
+		["PENDING", "fill-gray-400"],
+		["SCHEDULED", "fill-yellow-400"],
+		["PAUSED", "fill-gray-500"],
+		["RUNNING", "fill-blue-700"],
+		["CRASHED", "fill-orange-600"],
+	])(
+		"renders the bars with expected colors for %s",
+		(stateType, expectedClass) => {
+			const enrichedFlowRun = {
+				...mockFlowRun,
+				state_type: stateType,
+			};
+			render(
+				<RouterContextProvider router={router}>
+					<FlowRunActivityBarChart
+						{...defaultProps}
+						// @ts-expect-error - Type error from test data not matching schema
+						enrichedFlowRuns={[enrichedFlowRun]}
+					/>
+				</RouterContextProvider>,
+			);
+			const bars = screen.getAllByRole("graphics-symbol");
+			expect(
+				within(bars[0]).getByTestId("bar-rect-test-flow-run-1"),
+			).toHaveClass(expectedClass);
+		},
+	);
 
 	it("applies custom bar width when provided", () => {
 		const customBarWidth = 12;