diff --git a/client/src/components/numberField.tsx b/client/src/components/numberField.tsx
new file mode 100644
index 0000000..c5788a4
--- /dev/null
+++ b/client/src/components/numberField.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { Typography } from "antd";
+import { NumberFieldProps } from "@refinedev/antd/dist/components/fields/types";
+
+const { Text } = Typography;
+
+function toLocaleStringSupportsOptions() {
+  return !!(
+    typeof Intl == "object" &&
+    Intl &&
+    typeof Intl.NumberFormat == "function"
+  );
+}
+
+type Props = NumberFieldProps & {
+  unit: string;
+};
+
+/**
+ * This field is used to display a number formatted according to the browser locale, right aligned. and uses {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl `Intl`} to display date format.
+ *
+ * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/number} for more details.
+ */
+export const NumberFieldUnit: React.FC<Props> = ({
+  value,
+  locale,
+  options,
+  ...rest
+}) => {
+  const number = Number(value);
+
+  return (
+    <Text {...rest}>
+      {toLocaleStringSupportsOptions()
+        ? number.toLocaleString(locale, options)
+        : number}{" "}
+      {rest.unit}
+    </Text>
+  );
+};
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 8461f0e..1ea3682 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -6,9 +6,9 @@ import {
   EditButton,
   ShowButton,
   DateField,
-  NumberField,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
+import { NumberFieldUnit } from "../../components/numberField";
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps } = useTable({
@@ -27,12 +27,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="density"
           title="Density"
           render={(value) => (
-            <NumberField
+            <NumberFieldUnit
               value={value}
+              unit="g/cm³"
               options={{
-                unitDisplay: "short",
-                unit: "gram",
-                style: "unit",
                 maximumFractionDigits: 2,
               }}
             />
@@ -42,12 +40,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="diameter"
           title="Diameter"
           render={(value) => (
-            <NumberField
+            <NumberFieldUnit
               value={value}
+              unit="mm"
               options={{
-                unitDisplay: "short",
-                unit: "millimeter",
-                style: "unit",
                 maximumFractionDigits: 2,
               }}
             />
@@ -61,12 +57,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
               return <></>;
             }
             return (
-              <NumberField
+              <NumberFieldUnit
                 value={value}
+                unit="g"
                 options={{
-                  unitDisplay: "short",
-                  unit: "gram",
-                  style: "unit",
                   maximumFractionDigits: 1,
                 }}
               />
@@ -81,12 +75,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
               return <></>;
             }
             return (
-              <NumberField
+              <NumberFieldUnit
                 value={value}
+                unit="g"
                 options={{
-                  unitDisplay: "short",
-                  unit: "gram",
-                  style: "unit",
                   maximumFractionDigits: 1,
                 }}
               />
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index a02e884..fe09c47 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { IResourceComponentsProps, useShow } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
+import { NumberFieldUnit } from "../../components/numberField";
 
 const { Title } = Typography;
 
@@ -26,42 +27,34 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>Price</Title>
       <NumberField value={record?.price ?? ""} />
       <Title level={5}>Density</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.density ?? ""}
+        unit="g/cm³"
         options={{
-          unitDisplay: "short",
-          unit: "gram",
-          style: "unit",
           maximumFractionDigits: 2,
         }}
       />
       <Title level={5}>Diameter</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.diameter ?? ""}
+        unit="mm"
         options={{
-          unitDisplay: "short",
-          unit: "millimeter",
-          style: "unit",
           maximumFractionDigits: 2,
         }}
       />
       <Title level={5}>Weight</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.weight ?? ""}
+        unit="g"
         options={{
-          unitDisplay: "short",
-          unit: "gram",
-          style: "unit",
           maximumFractionDigits: 1,
         }}
       />
       <Title level={5}>Spool Weight</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.spool_weight ?? ""}
+        unit="g"
         options={{
-          unitDisplay: "short",
-          unit: "gram",
-          style: "unit",
           maximumFractionDigits: 1,
         }}
       />
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 71c481a..9d95ac7 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -6,10 +6,10 @@ import {
   EditButton,
   ShowButton,
   DateField,
-  NumberField,
   TextField,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
+import { NumberFieldUnit } from "../../components/numberField";
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps } = useTable({
@@ -34,12 +34,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           title="Used Weight"
           render={(value) => {
             return (
-              <NumberField
+              <NumberFieldUnit
                 value={value}
+                unit="g"
                 options={{
-                  unitDisplay: "short",
-                  unit: "gram",
-                  style: "unit",
                   maximumFractionDigits: 1,
                 }}
               />
@@ -54,12 +52,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
               return <TextField value="Unknown" />;
             }
             return (
-              <NumberField
+              <NumberFieldUnit
                 value={Math.max(value, 0)}
+                unit="g"
                 options={{
-                  unitDisplay: "short",
-                  unit: "gram",
-                  style: "unit",
                   maximumFractionDigits: 1,
                 }}
               />
diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index d589982..1b40fba 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { IResourceComponentsProps, useShow } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
+import { NumberFieldUnit } from "../../components/numberField";
 
 const { Title } = Typography;
 
@@ -28,22 +29,18 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
                 <>{filamentData?.data?.id}</>
             )} */}
       <Title level={5}>Remaining Weight</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.remaining_weight ?? ""}
+        unit="g"
         options={{
-          unitDisplay: "short",
-          unit: "gram",
-          style: "unit",
           maximumFractionDigits: 1,
         }}
       />
       <Title level={5}>Used Weight</Title>
-      <NumberField
+      <NumberFieldUnit
         value={record?.used_weight ?? ""}
+        unit="g"
         options={{
-          unitDisplay: "short",
-          unit: "gram",
-          style: "unit",
           maximumFractionDigits: 1,
         }}
       />