diff --git a/src/lib/elements/forms/inputLine.svelte b/src/lib/elements/forms/inputLine.svelte
index 5fc0089e7..0ba31634a 100644
--- a/src/lib/elements/forms/inputLine.svelte
+++ b/src/lib/elements/forms/inputLine.svelte
@@ -9,12 +9,20 @@
     export let disableDeletePointsCountPerLine: number = 2;
     export let onAddPoint: (index: number) => void;
     export let onDeletePoint: (index: number) => void = undefined;
+    export let onChangePoint: (pointIndex: number, coordIndex: number, newValue: number) => void =
+        undefined;
 
     let required = true;
 
     $: required = nullable;
     let disableDeletePoints = false;
     $: disableDeletePoints = !values || values.length <= disableDeletePointsCountPerLine;
+
+    function handlePointChange(pointIndex: number, coordIndex: number, newValue: number) {
+        if (onChangePoint) {
+            onChangePoint(pointIndex, coordIndex, newValue);
+        }
+    }
 </script>
 
 <Layout.Stack alignItems="flex-start">
@@ -25,7 +33,9 @@
                 values={value}
                 deletePoints={true}
                 disableDelete={disableDeletePoints}
-                onDeletePoint={() => onDeletePoint(index)} />
+                onDeletePoint={() => onDeletePoint(index)}
+                onChangePoint={(coordIndex, newValue) =>
+                    handlePointChange(index, coordIndex, newValue)} />
         {/each}
     </Layout.Stack>
     <Button compact on:click={() => onAddPoint(-1)} disabled={nullable}>
diff --git a/src/lib/elements/forms/inputPoint.svelte b/src/lib/elements/forms/inputPoint.svelte
index 387ee3283..18864e200 100644
--- a/src/lib/elements/forms/inputPoint.svelte
+++ b/src/lib/elements/forms/inputPoint.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import InputNumber from './inputNumber.svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
     import { Layout, Icon } from '@appwrite.io/pink-svelte';
     import Button from './button.svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
@@ -10,21 +10,23 @@
     export let deletePoints = false;
     export let onDeletePoint: () => void = undefined;
     export let disableDelete = false;
+    export let onChangePoint: (index: number, newValue: number) => void;
 </script>
 
 <Layout.Stack>
     <Layout.Stack direction="row" gap="s">
         {#if nullable}
             {#each nullableSkeletonShape as _, index}
-                <InputNumber id={`default-${index}`} placeholder="Enter value" disabled={true} />
+                <Input.Number id={`default-${index}`} placeholder="Enter value" disabled={true} />
             {/each}
         {:else}
-            {#each values as value, index}
-                <InputNumber
+            {#each values as _, index}
+                <Input.Number
                     id={`point-${index}`}
                     placeholder="Enter value"
-                    bind:value={value as number}
-                    step={0.001} />
+                    step={0.001}
+                    value={values[index]}
+                    on:change={(e) => onChangePoint(index, Number.parseFloat(`${e.detail}`))} />
             {/each}
         {/if}
         {#if deletePoints}
diff --git a/src/lib/elements/forms/inputPolygon.svelte b/src/lib/elements/forms/inputPolygon.svelte
index e21cfb01c..e30779953 100644
--- a/src/lib/elements/forms/inputPolygon.svelte
+++ b/src/lib/elements/forms/inputPolygon.svelte
@@ -10,11 +10,28 @@
     export let onAddPoint: (index: number) => void;
     export let onAddLine: (index: number) => void;
     export let onDeletePoint: (index: number) => void = undefined;
+    export let onChangePoint: (
+        lineIndex: number,
+        pointIndex: number,
+        coordIndex: number,
+        newValue: number
+    ) => void = undefined;
     export let disableDeletePointsCountPerLine: number = 4;
 
     let required = true;
 
     $: required = nullable;
+
+    function handlePointChange(
+        lineIndex: number,
+        pointIndex: number,
+        coordIndex: number,
+        newValue: number
+    ) {
+        if (onChangePoint) {
+            onChangePoint(lineIndex, pointIndex, coordIndex, newValue);
+        }
+    }
 </script>
 
 <Layout.Stack>
@@ -24,6 +41,8 @@
             onAddPoint={() => onAddPoint(index)}
             nullable={required}
             onDeletePoint={() => onDeletePoint(index)}
+            onChangePoint={(pointIndex, coordIndex, newValue) =>
+                handlePointChange(index, pointIndex, coordIndex, newValue)}
             {disableDeletePointsCountPerLine} />
     {/each}
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
index b811f07c3..db5a66307 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/line.svelte
@@ -48,7 +48,6 @@
 
     let savedDefault = data.default;
     let showDefaultPointDummyData = false;
-    let disableDeletePoints = false;
     onMount(() => {
         data.default = data.required ? null : defaultData;
     });
@@ -82,8 +81,6 @@
     $: handleDefaultState($required);
 
     $: showDefaultPointDummyData = $required ? true : false;
-
-    $: disableDeletePoints = !data.default || data.default.length <= 2;
 </script>
 
 <Selector.Checkbox
@@ -104,5 +101,9 @@
         onAddPoint={pushCoordinate}
         nullable={showDefaultPointDummyData}
         onDeletePoint={deleteCoordinate}
-        {disableDeletePoints} />
+        onChangePoint={(pointIndex, coordIndex, newValue) => {
+            if (data.default && data.default[pointIndex]) {
+                data.default[pointIndex][coordIndex] = newValue;
+            }
+        }} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
index 503e930ed..8f9e7bc00 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/point.svelte
@@ -91,5 +91,12 @@
         <Typography.Text variant="m-600">Default</Typography.Text>
         <Typography.Caption variant="400">Optional</Typography.Caption>
     </Layout.Stack>
-    <InputPoint values={data.default || defaultData} nullable={showDefaultPointDummyData} />
+    <InputPoint
+        values={data.default || defaultData}
+        nullable={showDefaultPointDummyData}
+        onChangePoint={(index, newValue) => {
+            if (data.default) {
+                data.default[index] = newValue;
+            }
+        }} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
index 6f3f7bbfc..b01aac0f2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/polygon.svelte
@@ -120,5 +120,10 @@
         nullable={showDefaultPointDummyData}
         onAddLine={pushLine}
         onAddPoint={pushCoordinate}
-        onDeletePoint={deleteCoordinate} />
+        onDeletePoint={deleteCoordinate}
+        onChangePoint={(lineIndex, pointIndex, coordIndex, newValue) => {
+            if (data.default && data.default[lineIndex] && data.default[lineIndex][pointIndex]) {
+                data.default[lineIndex][pointIndex][coordIndex] = newValue;
+            }
+        }} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
index beaa7c787..759d55567 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/line.svelte
@@ -21,9 +21,13 @@
         if (value && value?.length > 2) value = value.slice(0, value.length - 1);
     }
 
-    $: nullable = !limited ? !column.required : false;
+    function handlePointChange(pointIndex: number, coordIndex: number, newValue: number) {
+        if (value && value[pointIndex]) {
+            value[pointIndex][coordIndex] = newValue;
+        }
+    }
 
-    $: value = nullable ? null : defaultData;
+    $: nullable = !limited ? !column.required : false;
 
     $: disableDeletePoints = !value || value.length <= 2;
 </script>
@@ -41,5 +45,5 @@
         {nullable}
         {onAddPoint}
         {onDeletePoint}
-        {disableDeletePoints} />
+        onChangePoint={handlePointChange} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
index 216394c00..4e3a230db 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/point.svelte
@@ -12,7 +12,13 @@
 
     $: nullable = !limited ? !column.required : false;
 
-    $: value = nullable ? null : (getDefaultSpatialData('point') as number[]);
+    $: value = value && !nullable ? value : (getDefaultSpatialData('point') as number[]);
+
+    function handlePointChange(index: number, newValue: number) {
+        if (value) {
+            value[index] = newValue;
+        }
+    }
 </script>
 
 <Layout.Stack>
@@ -23,5 +29,5 @@
                 >optional</Typography.Text>
         {/if}
     </Layout.Stack>
-    <InputPoint values={value} {nullable} />
+    <InputPoint values={value} {nullable} onChangePoint={handlePointChange} />
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/polygon.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/polygon.svelte
index 216394c00..c749bf244 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/polygon.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/polygon.svelte
@@ -1,18 +1,62 @@
 <script lang="ts">
-    import { InputPoint } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { getDefaultSpatialData } from '../../../store';
+    import InputPolygon from '$lib/elements/forms/inputPolygon.svelte';
 
     export let id: string;
     export let label: string;
-    export let value: number[];
+    export let value: number[][][];
     export let limited: boolean = false;
-    export let column: Models.ColumnInteger;
+    export let column: Models.ColumnPolygon;
+
+    const defaultData = getDefaultSpatialData('polygon');
+
+    function pushCoordinate(ringIndex: number) {
+        if (!value) return;
+
+        const ring = value.at(ringIndex);
+        if (!ring) return;
+
+        const newPoint = getDefaultSpatialData('point') as number[];
+        ring.splice(ring.length - 1, 0, newPoint);
+        ring[ring.length - 1] = [...ring[0]];
+    }
+
+    function pushLine() {
+        if (!value) return;
+
+        const p1 = getDefaultSpatialData('point') as number[];
+        const p2 = getDefaultSpatialData('point') as number[];
+        const p3 = getDefaultSpatialData('point') as number[];
+        const ring = [p1, p2, p3, [...p1]];
+        value.push(ring);
+    }
+
+    function deleteCoordinate(ringIndex: number) {
+        if (!value) return;
+
+        const ring = value.at(ringIndex);
+        if (!ring || ring.length <= 4) return;
+
+        ring.splice(ring.length - 2, 1);
+        ring[ring.length - 1] = [...ring[0]];
+    }
+
+    function handlePointChange(
+        lineIndex: number,
+        pointIndex: number,
+        coordIndex: number,
+        newValue: number
+    ) {
+        if (value && value[lineIndex] && value[lineIndex][pointIndex]) {
+            value[lineIndex][pointIndex][coordIndex] = newValue;
+        }
+    }
 
     $: nullable = !limited ? !column.required : false;
 
-    $: value = nullable ? null : (getDefaultSpatialData('point') as number[]);
+    $: displayValue = value || defaultData;
 </script>
 
 <Layout.Stack>
@@ -23,5 +67,11 @@
                 >optional</Typography.Text>
         {/if}
     </Layout.Stack>
-    <InputPoint values={value} {nullable} />
+    <InputPolygon
+        values={displayValue}
+        {nullable}
+        onAddLine={pushLine}
+        onAddPoint={pushCoordinate}
+        onDeletePoint={deleteCoordinate}
+        onChangePoint={handlePointChange} />
 </Layout.Stack>