diff --git a/src/components/fields/e-signature-field/e-signature-field.styles.ts b/src/components/fields/e-signature-field/e-signature-field.styles.ts
index eb1ebcacb..f0d467f91 100644
--- a/src/components/fields/e-signature-field/e-signature-field.styles.ts
+++ b/src/components/fields/e-signature-field/e-signature-field.styles.ts
@@ -2,6 +2,7 @@ import { Alert } from "@lifesg/react-design-system/alert";
 import { Color } from "@lifesg/react-design-system/color";
 import { TextStyleHelper } from "@lifesg/react-design-system/text";
 import styled from "styled-components";
+import { Spacing } from "@lifesg/react-design-system/theme";
 
 export const ESignatureWrapper = styled.div`
 	&:not(:last-child) {
@@ -14,6 +15,9 @@ export const ErrorWrapper = styled.div`
 	color: ${Color.Validation.Red.Text};
 	outline: none;
 	${TextStyleHelper.getTextStyle("H6", "semibold")}
+	display: flex;
+	gap: ${Spacing["spacing-4"]};
+	align-items: center;
 `;
 
 export const TryAgain = styled.button`
diff --git a/src/components/fields/e-signature-field/e-signature-field.tsx b/src/components/fields/e-signature-field/e-signature-field.tsx
index 5e3624beb..871dac314 100644
--- a/src/components/fields/e-signature-field/e-signature-field.tsx
+++ b/src/components/fields/e-signature-field/e-signature-field.tsx
@@ -1,4 +1,5 @@
 import { Form } from "@lifesg/react-design-system/form";
+import { ExclamationCircleFillIcon } from "@lifesg/react-icons/exclamation-circle-fill";
 import { CanceledError } from "axios";
 import isEmpty from "lodash/isEmpty";
 import { useEffect, useRef, useState } from "react";
@@ -191,10 +192,13 @@ export const ESignatureField = (props: IGenericFieldProps<IESignatureFieldSchema
 		if (uploadErrorCount > 0) {
 			return (
 				<ErrorWrapper>
-					{uploadRuleRef.current?.errorMessage || ERROR_MESSAGES.ESIGNATURE.UPLOAD}
-					<TryAgain type="button" onClick={() => handleChange(signatureDataURL)}>
-						Please try again.
-					</TryAgain>
+					<ExclamationCircleFillIcon />
+					<span>
+						{uploadRuleRef.current?.errorMessage || ERROR_MESSAGES.ESIGNATURE.UPLOAD}
+						<TryAgain type="button" onClick={() => handleChange(signatureDataURL)}>
+							Please try again.
+						</TryAgain>
+					</span>
 					{uploadErrorCount >= 3 && (
 						<RefreshAlert type="warning" data-testid="upload-refresh-alert">
 							Refresh this page if you cannot upload your signature.
@@ -207,10 +211,13 @@ export const ESignatureField = (props: IGenericFieldProps<IESignatureFieldSchema
 		if (loadErrorCount > 0 && hasValue(value)) {
 			return (
 				<ErrorWrapper>
-					Failed to load.
-					<TryAgain type="button" onClick={() => loadImage(value.fileId, value.fileUrl)}>
-						Please try again.
-					</TryAgain>
+					<ExclamationCircleFillIcon />
+					<span>
+						Failed to load.
+						<TryAgain type="button" onClick={() => loadImage(value.fileId, value.fileUrl)}>
+							Please try again.
+						</TryAgain>
+					</span>
 					{loadErrorCount >= 3 && (
 						<RefreshAlert type="warning" data-testid="load-refresh-alert">
 							Refresh this page if your signature failed to load.
@@ -220,7 +227,12 @@ export const ESignatureField = (props: IGenericFieldProps<IESignatureFieldSchema
 			);
 		}
 
-		return <ErrorWrapper>{error?.message}</ErrorWrapper>;
+		return (
+			<ErrorWrapper>
+				<ExclamationCircleFillIcon />
+				<span>{error?.message}</span>
+			</ErrorWrapper>
+		);
 	};
 
 	return (