diff --git a/CHANGELOG.md b/CHANGELOG.md
index 296e31b7..29f50602 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 - [#858](https://github.com/estruyf/vscode-front-matter/issues/858): Fix button styling on the data screen
 - [#860](https://github.com/estruyf/vscode-front-matter/issues/860): Fix typo on the data screen
+- [#870](https://github.com/estruyf/vscode-front-matter/issues/870): Fix data number field styling
 
 ## [10.4.1] - 2024-09-27
 
diff --git a/src/components/uniforms-frontmatter/NumField.tsx b/src/components/uniforms-frontmatter/NumField.tsx
index 09026e56..423f30a7 100644
--- a/src/components/uniforms-frontmatter/NumField.tsx
+++ b/src/components/uniforms-frontmatter/NumField.tsx
@@ -30,6 +30,7 @@ function Num({
       <LabelField label={label} id={id} required={props.required} />
 
       <input
+        className='block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0'
         disabled={disabled}
         id={id}
         max={max}