diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 98efc94462..5fd45944db 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -55,8 +55,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
   return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
-      type='text'
-      className={classNames('rounded-r-none', className)}
+      type='number'
+      className={classNames('no-spinner rounded-r-none', className)}
       value={value}
       max={max}
       min={min}
@@ -77,8 +77,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       size={size}
     />
     <div className={classNames(
-      'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
-      disabled && 'opacity-50 cursor-not-allowed',
+      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+      disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
       <button
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 52e36a2767..353cfa2fff 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -697,4 +697,15 @@ button:focus-within {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+
+  /* Hide arrows from number input */
+  .no-spinner::-webkit-outer-spin-button,
+  .no-spinner::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .no-spinner {
+    -moz-appearance: textfield;
+  }
 }