diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte
index c1377b917..b8dc1dd58 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/columnItem.svelte
@@ -26,23 +26,24 @@
     let formStore = writable(formValues);
 
     function removeArrayItem(key: string, index: number) {
+        const currentArray = Array.isArray($formStore[key]) ? $formStore[key] : [];
+        const filteredArray = currentArray.filter((_: object, i: number) => i !== index);
         const next = {
-            ...$formStore,
-            [key]: $formStore[key].filter((_, i) => i !== index)
+            ...formValues,
+            [key]: filteredArray.length === 0 ? [] : filteredArray
         };
 
         formStore.set(next);
-        onUpdateFormValues?.(next);
     }
 
     function addArrayItem(key: string) {
+        const currentArray = Array.isArray($formStore[key]) ? $formStore[key] : null;
         const next = {
-            ...$formStore,
-            [key]: [...($formStore[key] ?? []), null]
+            ...formValues,
+            [key]: currentArray ? [...currentArray, null] : [null]
         };
 
         formStore.set(next);
-        onUpdateFormValues?.(next);
     }
 
     function getColumnType(column: Columns) {
@@ -107,7 +108,7 @@
             on:click />
     {:else}
         <Layout.Stack>
-            {#each [...($formStore[column.key]?.keys() ?? [])] as index}
+            {#each [...($formStore[column.key]?.keys() ?? [])] as index (index)}
                 <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                     <Column
                         {column}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/datetime.svelte
index ce26bf6d3..6a60827dc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/datetime.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import type { Models } from '@appwrite.io/console';
     import { InputDateTime } from '$lib/elements/forms';
+    import { toLocalDateTimeISO } from '$lib/helpers/date';
     import { IconCalendar } from '@appwrite.io/pink-icons-svelte';
 
     export let id: string;
@@ -15,6 +17,12 @@
     $: if (limited) {
         label = undefined;
     }
+
+    /**
+     * the value from backend will include timezone info,
+     * and that's not compatible with the component as it'll go empty.
+     */
+    onMount(() => (value = value ? toLocalDateTimeISO(value) : value));
 </script>
 
 <InputDateTime