diff --git a/src/front/Components/Elements/NumberPicker/classes.module.scss b/src/front/Components/Elements/NumberPicker/classes.module.scss
index 0768ef30..04ead720 100644
--- a/src/front/Components/Elements/NumberPicker/classes.module.scss
+++ b/src/front/Components/Elements/NumberPicker/classes.module.scss
@@ -4,16 +4,20 @@
 	align-items: center;
 	width: fit-content;
 	border: 1px solid #e7e7e7;
-	padding: 24px;
-
+	padding: var(--spacing-1-5, 12px) var(--spacing-md, 16px);
+	gap: var(--spacing-2, 16px);
 	.button {
 		border: none;
 		background: none;
+		padding: 0;
+		height: 24px;
+		width: 24px;
 		cursor: pointer;
 	}
 
 	.input {
-		width: 50px;
+		width: 40px;
+		height: 40px;
 		text-align: center;
 		border: none;
 	}
diff --git a/src/front/Components/Elements/NumberPicker/index.tsx b/src/front/Components/Elements/NumberPicker/index.tsx
index 5bb08189..c69a3e34 100644
--- a/src/front/Components/Elements/NumberPicker/index.tsx
+++ b/src/front/Components/Elements/NumberPicker/index.tsx
@@ -35,11 +35,11 @@ export default function NumberPicker(props: IProps) {
 	return (
 		<div className={classes["root"]}>
 			<button onClick={handleMinus} disabled={min && value <= min ? true : false} className={classes["button"]}>
-				<MinusIcon width="20" height="20" />
+				<MinusIcon width="24" height="24" />
 			</button>
 			<input type="number" value={value} onChange={handleChange} disabled={disabled} className={classes["input"]} />
 			<button onClick={handlePlus} disabled={max && value >= max ? true : false} className={classes["button"]}>
-				<PlusIcon width="20" height="20" />
+				<PlusIcon width="24" height="24" />
 			</button>
 		</div>
 	);