diff --git a/dapp/src/components/shared/NumberFormatInput/index.tsx b/dapp/src/components/shared/NumberFormatInput/index.tsx
index a7792f156..4f657f711 100644
--- a/dapp/src/components/shared/NumberFormatInput/index.tsx
+++ b/dapp/src/components/shared/NumberFormatInput/index.tsx
@@ -29,7 +29,7 @@ const NumberFormatInput = React.forwardRef<
 >((props, ref) => {
   const { field: css } = useMultiStyleConfig("Input", props)
 
-  const { decimalScale, isDisabled, ...restProps } = props
+  const { decimalScale, isDisabled, isInvalid, ...restProps } = props
 
   return (
     <ChakraWrapper
@@ -38,6 +38,7 @@ const NumberFormatInput = React.forwardRef<
       decimalScale={decimalScale}
       __css={css}
       disabled={isDisabled}
+      aria-invalid={isInvalid}
       getInputRef={ref}
       {...restProps}
     />
diff --git a/dapp/src/components/shared/TokenBalanceInput/index.tsx b/dapp/src/components/shared/TokenBalanceInput/index.tsx
index 907f533d0..94c5ccd81 100644
--- a/dapp/src/components/shared/TokenBalanceInput/index.tsx
+++ b/dapp/src/components/shared/TokenBalanceInput/index.tsx
@@ -140,6 +140,7 @@ export default function TokenBalanceInput({
           size={size}
           value={amount}
           variant={VARIANT}
+          isInvalid={hasError}
           placeholder={placeholder}
           onValueChange={(values: NumberFormatInputValues) =>
             setAmount(values.value)
diff --git a/dapp/src/theme/Input.ts b/dapp/src/theme/Input.ts
index 3bc2aeb25..cccff7c7c 100644
--- a/dapp/src/theme/Input.ts
+++ b/dapp/src/theme/Input.ts
@@ -18,6 +18,10 @@ const variantBalanceField = defineStyle({
     color: "grey.300",
     fontWeight: "medium",
   },
+
+  _invalid: {
+    color: "red.400",
+  },
 })
 
 const variantBalanceElement = defineStyle({