diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx
index f24f38b017..254dafa1a4 100644
--- a/frontend/src/container/FormAlertRules/RuleOptions.tsx
+++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx
@@ -1,4 +1,4 @@
-import { Form, Select, Typography } from 'antd';
+import { Form, InputNumber, InputNumberProps, Select, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 import {
 	AlertDef,
@@ -8,12 +8,7 @@ import {
 } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
 
-import {
-	FormContainer,
-	InlineSelect,
-	StepHeading,
-	ThresholdInput,
-} from './styles';
+import { FormContainer, InlineSelect, StepHeading } from './styles';
 
 const { Option } = Select;
 const FormItem = Form.Item;
@@ -126,6 +121,18 @@ function RuleOptions({
 		</FormItem>
 	);
 
+	const onChange: InputNumberProps['onChange'] = (value): void => {
+		setAlertDef({
+			...alertDef,
+			condition: {
+				...alertDef.condition,
+				op: alertDef.condition?.op || defaultCompareOp,
+				matchType: alertDef.condition?.matchType || defaultMatchType,
+				target: Number(value) || 0,
+			},
+		});
+	};
+
 	return (
 		<>
 			<StepHeading>{t('alert_form_step2')}</StepHeading>
@@ -133,24 +140,12 @@ function RuleOptions({
 				{queryCategory === EQueryType.PROM
 					? renderPromRuleOptions()
 					: renderThresholdRuleOpts()}
-				<div style={{ display: 'flex', alignItems: 'center' }}>
-					<ThresholdInput
-						controls={false}
-						addonBefore={t('field_threshold')}
-						value={alertDef?.condition?.target}
-						onChange={(value: number | unknown): void => {
-							setAlertDef({
-								...alertDef,
-								condition: {
-									...alertDef.condition,
-									op: alertDef.condition?.op || defaultCompareOp,
-									matchType: alertDef.condition?.matchType || defaultMatchType,
-									target: value as number,
-								},
-							});
-						}}
-					/>
-				</div>
+				<InputNumber
+					addonBefore={t('field_threshold')}
+					value={alertDef?.condition?.target}
+					onChange={onChange}
+					type="number"
+				/>
 			</FormContainer>
 		</>
 	);
diff --git a/frontend/src/container/FormAlertRules/styles.ts b/frontend/src/container/FormAlertRules/styles.ts
index e5cd42001d..60e733527a 100644
--- a/frontend/src/container/FormAlertRules/styles.ts
+++ b/frontend/src/container/FormAlertRules/styles.ts
@@ -1,14 +1,4 @@
-import {
-	Button,
-	Card,
-	Col,
-	Form,
-	Input,
-	InputNumber,
-	Row,
-	Select,
-	Typography,
-} from 'antd';
+import { Button, Card, Col, Form, Input, Row, Select, Typography } from 'antd';
 import styled from 'styled-components';
 
 const { TextArea } = Input;
@@ -88,22 +78,6 @@ export const FormContainer = styled(Card)`
 	border-radius: 4px;
 `;
 
-export const ThresholdInput = styled(InputNumber)`
-	& > div {
-		display: flex;
-		align-items: center;
-		& > .ant-input-number-group-addon {
-			width: 130px;
-			border: 0;
-			background: transparent;
-		}
-		& > .ant-input-number {
-			width: 50%;
-			margin-left: 1em;
-		}
-	}
-`;
-
 export const TextareaMedium = styled(TextArea)`
 	width: 70%;
 `;