diff --git a/__fixtures__/test-project-rsc-kitchen-sink/web/src/lib/formatters.tsx b/__fixtures__/test-project-rsc-kitchen-sink/web/src/lib/formatters.tsx
index 8ab9e806e3cd..e72dbeb5c221 100644
--- a/__fixtures__/test-project-rsc-kitchen-sink/web/src/lib/formatters.tsx
+++ b/__fixtures__/test-project-rsc-kitchen-sink/web/src/lib/formatters.tsx
@@ -4,6 +4,10 @@ import humanize from 'humanize-string'
 
 const MAX_STRING_LENGTH = 150
 
+export const bigIntDisplay = (value: bigint) => {
+  return value.toString()
+}
+
 export const formatEnum = (values: string | string[] | null | undefined) => {
   let output = ''
 
@@ -25,7 +29,7 @@ export const jsonDisplay = (obj: unknown) => {
   )
 }
 
-export const truncate = (value: string | number) => {
+export const truncate = (value: string | number | bigint) => {
   let output = value?.toString() ?? ''
 
   if (output.length > MAX_STRING_LENGTH) {
diff --git a/__fixtures__/test-project/web/src/lib/formatters.tsx b/__fixtures__/test-project/web/src/lib/formatters.tsx
index 8ab9e806e3cd..e72dbeb5c221 100644
--- a/__fixtures__/test-project/web/src/lib/formatters.tsx
+++ b/__fixtures__/test-project/web/src/lib/formatters.tsx
@@ -4,6 +4,10 @@ import humanize from 'humanize-string'
 
 const MAX_STRING_LENGTH = 150
 
+export const bigIntDisplay = (value: bigint) => {
+  return value.toString()
+}
+
 export const formatEnum = (values: string | string[] | null | undefined) => {
   let output = ''
 
@@ -25,7 +29,7 @@ export const jsonDisplay = (obj: unknown) => {
   )
 }
 
-export const truncate = (value: string | number) => {
+export const truncate = (value: string | number | bigint) => {
   let output = value?.toString() ?? ''
 
   if (output.length > MAX_STRING_LENGTH) {
diff --git a/packages/cli/src/commands/generate/scaffold/scaffold.js b/packages/cli/src/commands/generate/scaffold/scaffold.js
index ed0beb58da06..509e62e7966c 100644
--- a/packages/cli/src/commands/generate/scaffold/scaffold.js
+++ b/packages/cli/src/commands/generate/scaffold/scaffold.js
@@ -306,6 +306,11 @@ const modelRelatedVariables = (model) => {
       listDisplayFunction: 'formatEnum',
       displayFunction: 'formatEnum',
     },
+    BigInt: {
+      componentName: 'TextField',
+      displayFunction: 'bigIntDisplay',
+      listDisplayFunction: 'truncate',
+    },
     Boolean: {
       componentName: 'CheckboxField',
       defaultProp: 'defaultChecked',
diff --git a/packages/cli/src/commands/generate/scaffold/templates/lib/formatters.tsx.template b/packages/cli/src/commands/generate/scaffold/templates/lib/formatters.tsx.template
index 8ab9e806e3cd..e72dbeb5c221 100644
--- a/packages/cli/src/commands/generate/scaffold/templates/lib/formatters.tsx.template
+++ b/packages/cli/src/commands/generate/scaffold/templates/lib/formatters.tsx.template
@@ -4,6 +4,10 @@ import humanize from 'humanize-string'
 
 const MAX_STRING_LENGTH = 150
 
+export const bigIntDisplay = (value: bigint) => {
+  return value.toString()
+}
+
 export const formatEnum = (values: string | string[] | null | undefined) => {
   let output = ''
 
@@ -25,7 +29,7 @@ export const jsonDisplay = (obj: unknown) => {
   )
 }
 
-export const truncate = (value: string | number) => {
+export const truncate = (value: string | number | bigint) => {
   let output = value?.toString() ?? ''
 
   if (output.length > MAX_STRING_LENGTH) {
diff --git a/packages/internal/src/__tests__/__snapshots__/graphqlCodeGen.test.ts.snap b/packages/internal/src/__tests__/__snapshots__/graphqlCodeGen.test.ts.snap
index 8f20d42df52f..0bc05551268b 100644
--- a/packages/internal/src/__tests__/__snapshots__/graphqlCodeGen.test.ts.snap
+++ b/packages/internal/src/__tests__/__snapshots__/graphqlCodeGen.test.ts.snap
@@ -32,7 +32,7 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
-  BigInt: number;
+  BigInt: bigint;
   Byte: Buffer;
   Date: Date | string;
   DateTime: Date | string;
@@ -328,7 +328,7 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
-  BigInt: number;
+  BigInt: bigint;
   Byte: Buffer;
   Date: string;
   DateTime: string;
diff --git a/packages/internal/src/__tests__/fixtures/api/types/graphql.d.ts b/packages/internal/src/__tests__/fixtures/api/types/graphql.d.ts
index d2e76e788bc0..dd41319fc178 100644
--- a/packages/internal/src/__tests__/fixtures/api/types/graphql.d.ts
+++ b/packages/internal/src/__tests__/fixtures/api/types/graphql.d.ts
@@ -11,7 +11,7 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
-  BigInt: number;
+  BigInt: bigint;
   Date: string;
   DateTime: string;
   JSON: Record<string, unknown>;
diff --git a/packages/internal/src/__tests__/fixtures/web/types/graphql.d.ts b/packages/internal/src/__tests__/fixtures/web/types/graphql.d.ts
index 2ceabf283616..adac0872d6a5 100644
--- a/packages/internal/src/__tests__/fixtures/web/types/graphql.d.ts
+++ b/packages/internal/src/__tests__/fixtures/web/types/graphql.d.ts
@@ -10,7 +10,7 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
-  BigInt: number;
+  BigInt: bigint;
   Date: string;
   DateTime: string;
   JSON: Record<string, unknown>;
diff --git a/packages/internal/src/generate/graphqlCodeGen.ts b/packages/internal/src/generate/graphqlCodeGen.ts
index ec3f8b43c451..eb9bb4d74b20 100644
--- a/packages/internal/src/generate/graphqlCodeGen.ts
+++ b/packages/internal/src/generate/graphqlCodeGen.ts
@@ -285,7 +285,7 @@ async function getPluginConfig(side: CodegenSide) {
     | 'File'
   const scalars: Partial<Record<ScalarKeys, string>> = {
     // We need these, otherwise these scalars are mapped to any
-    BigInt: 'number',
+    BigInt: 'bigint',
     // @Note: DateTime fields can be valid Date-strings, or the Date object in the api side. They're always strings on the web side.
     DateTime: side === CodegenSide.WEB ? 'string' : 'Date | string',
     Date: side === CodegenSide.WEB ? 'string' : 'Date | string',