diff --git a/src/lib/helpers/object.ts b/src/lib/helpers/object.ts
index ca6a370a34..6f7a247233 100644
--- a/src/lib/helpers/object.ts
+++ b/src/lib/helpers/object.ts
@@ -36,3 +36,14 @@ export function deepEqual<T>(obj1: T, obj2: T): boolean {
 
     return true;
 }
+
+/**
+ * Creates a deep clone of the given object. This function uses the JSON methods for cloning,
+ * so it may not be suitable for objects with functions, symbols, or other non-JSON-safe data.
+ *
+ * @param obj the object to be cloned
+ * @returns a deep clone of the provided object
+ */
+export function deepClone<T>(obj: T): T {
+    return JSON.parse(JSON.stringify(obj));
+}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
index ce29912195..b96634b095 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
@@ -13,31 +13,38 @@
     import { collection, type Attributes } from '../../store';
     import { Container } from '$lib/layout';
     import AttributeItem from '../attributeItem.svelte';
-    import { difference, symmetricDifference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
     import { isRelationship, isRelationshipToMany } from '../attributes/store';
+    import { deepClone } from '$lib/helpers/object';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
     const documentId = $page.params.document;
     const editing = true;
 
-    const work = writable(
-        Object.keys($doc)
-            .filter((key) => {
-                return ![
-                    '$id',
-                    '$collection',
-                    '$collectionId',
-                    '$databaseId',
-                    '$createdAt',
-                    '$updatedAt'
-                ].includes(key);
-            })
-            .reduce((obj, key) => {
-                obj[key] = $doc[key];
-                return obj;
-            }, {}) as Models.Document
-    );
+    function initWork() {
+        const prohibitedKeys = [
+            '$id',
+            '$collection',
+            '$collectionId',
+            '$databaseId',
+            '$createdAt',
+            '$updatedAt'
+        ];
+
+        const filteredKeys = Object.keys($doc).filter((key) => {
+            return !prohibitedKeys.includes(key);
+        });
+
+        const result = filteredKeys.reduce((obj, key) => {
+            obj[key] = $doc[key];
+            return obj;
+        }, {});
+
+        return writable(deepClone(result as Models.Document));
+    }
+
+    const work = initWork();
 
     async function updateData() {
         try {
@@ -77,7 +84,7 @@
         const docAttribute = $doc?.[attribute.key];
 
         if (attribute.array) {
-            return !difference(Array.from(workAttribute), Array.from(docAttribute)).length;
+            return !symmetricDifference(Array.from(workAttribute), Array.from(docAttribute)).length;
         }
 
         if (isRelationship(attribute)) {