diff --git a/client/src/Components/design-elements/StatusCodeLabel.tsx b/client/src/Components/design-elements/StatusCodeLabel.tsx
new file mode 100644
index 000000000..b1500d42b
--- /dev/null
+++ b/client/src/Components/design-elements/StatusCodeLabel.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import {
+	formatStatusCode,
+	getStatusCodeTooltip,
+	getStatusCodeValueType,
+} from "@/Utils/statusCode";
+import { ValueLabel } from "./StatusLabel";
+import { Tooltip } from "./Tooltip";
+
+export type StatusCodeLabelProps = {
+	statusCode: number | null | undefined;
+	message?: string | null;
+	fallback?: string;
+};
+
+export const StatusCodeLabel = ({
+	statusCode,
+	message,
+	fallback = "N/A",
+}: StatusCodeLabelProps) => {
+	const { t } = useTranslation();
+	if (!statusCode) {
+		return <>{fallback}</>;
+	}
+
+	const text = formatStatusCode(statusCode, t);
+	const tooltip = getStatusCodeTooltip(statusCode, message, t);
+	const body = (
+		<ValueLabel
+			value={getStatusCodeValueType(statusCode)}
+			text={text}
+		/>
+	);
+	if (!tooltip) return body;
+	return <Tooltip title={tooltip}>{body}</Tooltip>;
+};