diff --git a/front/src/modules/ui/content-display/components/MoneyDisplay.tsx b/front/src/modules/ui/content-display/components/MoneyDisplay.tsx
index c2840f238..c8b522462 100644
--- a/front/src/modules/ui/content-display/components/MoneyDisplay.tsx
+++ b/front/src/modules/ui/content-display/components/MoneyDisplay.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { formatNumber } from '~/utils/formatNumber';
+import { formatNumber } from '~/utils/format/number';
 
 const StyledTextInputDisplay = styled.div`
   overflow: hidden;
diff --git a/front/src/modules/ui/content-display/components/NumberDisplay.tsx b/front/src/modules/ui/content-display/components/NumberDisplay.tsx
new file mode 100644
index 000000000..c09665899
--- /dev/null
+++ b/front/src/modules/ui/content-display/components/NumberDisplay.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { formatNumber } from '~/utils/format/number';
+
+const StyledNumberDisplay = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+
+type OwnProps = {
+  value: string;
+};
+
+export function NumberDisplay({ value }: OwnProps) {
+  return (
+    <StyledNumberDisplay>
+      {value && formatNumber(Number(value))}
+    </StyledNumberDisplay>
+  );
+}
diff --git a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
index f74cfdf05..9bac42bf4 100644
--- a/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
+++ b/front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
+import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
@@ -34,7 +34,7 @@ export function GenericEditableNumberField() {
       <EditableField
         IconLabel={currentEditableFieldDefinition.Icon}
         editModeContent={<GenericEditableNumberFieldEditMode />}
-        displayModeContent={<TextDisplay text={fieldValue} />}
+        displayModeContent={<NumberDisplay value={fieldValue} />}
         isDisplayModeContentEmpty={!fieldValue}
       />
     </RecoilScope>
diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
index 22a850d5e..46858301c 100644
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { TextDisplay } from '@/ui/content-display/components/TextDisplay';
+import { NumberDisplay } from '@/ui/content-display/components/NumberDisplay';
 import type { ViewFieldNumberMetadata } from '@/ui/editable-field/types/ViewField';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
@@ -36,7 +36,7 @@ export function GenericEditableNumberCell({
           columnDefinition={columnDefinition}
         />
       }
-      nonEditModeContent={<TextDisplay text={fieldValue} />}
+      nonEditModeContent={<NumberDisplay value={fieldValue} />}
     ></EditableCell>
   );
 }
diff --git a/front/src/utils/format/__tests__/number.test.ts b/front/src/utils/format/__tests__/number.test.ts
new file mode 100644
index 000000000..37237e03d
--- /dev/null
+++ b/front/src/utils/format/__tests__/number.test.ts
@@ -0,0 +1,17 @@
+import { formatNumber } from '../number';
+
+// This tests the en-US locale by default
+describe('formatNumber', () => {
+  it(`Should format 123 correctly`, () => {
+    expect(formatNumber(123)).toEqual('123');
+  });
+  it(`Should format decimal numbers correctly`, () => {
+    expect(formatNumber(123.92)).toEqual('123.92');
+  });
+  it(`Should format large numbers correctly`, () => {
+    expect(formatNumber(1234567)).toEqual('1,234,567');
+  });
+  it(`Should format large numbers with a decimal point correctly`, () => {
+    expect(formatNumber(7654321.89)).toEqual('7,654,321.89');
+  });
+});
diff --git a/front/src/utils/format/number.ts b/front/src/utils/format/number.ts
new file mode 100644
index 000000000..1029bc047
--- /dev/null
+++ b/front/src/utils/format/number.ts
@@ -0,0 +1,3 @@
+export function formatNumber(value: number): string {
+  return value.toLocaleString();
+}
diff --git a/front/src/utils/formatNumber.ts b/front/src/utils/formatNumber.ts
deleted file mode 100644
index dc318a437..000000000
--- a/front/src/utils/formatNumber.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function formatNumber(value: number) {
-  // Formats the value to a string and add commas to it ex: 50,000 | 500,000
-  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}