diff --git a/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts b/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts
index 3b583874..a98f72a8 100644
--- a/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts
+++ b/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts
@@ -51,6 +51,13 @@ test('save data', async ({ page }) => {
   await editor.table.row(0).expectToHaveValues('newAttribute', 'String', '');
 
   await editor.table.row(0).locator.click();
+  await editor.detail.fillFieldValues('New Name', 'New Type', true, 'New Comment', 'New Annotations');
+
+  await editor.page.reload();
+
+  await editor.table.row(0).locator.click();
+  await editor.detail.expectToHaveFieldValues('New Name', 'New Type', true, 'New Comment', 'New Annotations');
+
   await editor.delete.locator.click();
 
   await editor.page.reload();
diff --git a/integrations/standalone/tests/pageobjects/Detail.ts b/integrations/standalone/tests/pageobjects/Detail.ts
index f39b98d4..f6352c56 100644
--- a/integrations/standalone/tests/pageobjects/Detail.ts
+++ b/integrations/standalone/tests/pageobjects/Detail.ts
@@ -73,4 +73,15 @@ export class Detail {
     await this.description.locator.fill(description);
     await this.annotations.locator.fill(annotations);
   }
+
+  async fillFieldValues(name: string, type: string, persistent: boolean, comment: string, annotations: string) {
+    await this.expectToBeField();
+    await this.name.locator.fill(name);
+    await this.type.locator.fill(type);
+    if (persistent !== (await this.persistent.isChecked())) {
+      await this.persistent.click();
+    }
+    await this.comment.locator.fill(comment);
+    await this.annotations.locator.fill(annotations);
+  }
 }
diff --git a/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx b/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx
index 183ee045..ae17e58b 100644
--- a/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx
+++ b/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx
@@ -1,5 +1,6 @@
 import { BasicField, Button, Flex, Textarea, ToggleGroup, ToggleGroupItem } from '@axonivy/ui-components';
 import { useAppContext } from '../../../context/AppContext';
+import { removeEmptyStrings } from '../../../utils/array/array';
 import type { DataClass } from '../data/dataclass';
 import { classType } from '../data/dataclass-utils';
 import './DetailContent.css';
@@ -56,7 +57,7 @@ export const DataClassDetailContent = () => {
       <BasicField label='Annotations'>
         <Textarea
           value={dataClass.annotations.join('\n')}
-          onChange={event => handleDataClassPropertyChange('annotations', event.target.value.split('\n'))}
+          onChange={event => handleDataClassPropertyChange('annotations', removeEmptyStrings(event.target.value.split('\n')))}
         />
       </BasicField>
     </Flex>
diff --git a/packages/dataclass-editor/src/components/dataclass/detail/FieldDetailContent.tsx b/packages/dataclass-editor/src/components/dataclass/detail/FieldDetailContent.tsx
index 949364bd..4200c537 100644
--- a/packages/dataclass-editor/src/components/dataclass/detail/FieldDetailContent.tsx
+++ b/packages/dataclass-editor/src/components/dataclass/detail/FieldDetailContent.tsx
@@ -1,29 +1,52 @@
 import { BasicCheckbox, BasicField, Flex, Input, Textarea } from '@axonivy/ui-components';
 import { useAppContext } from '../../../context/AppContext';
+import { removeEmptyStrings } from '../../../utils/array/array';
+import type { DataClassField } from '../data/dataclass';
 import './DetailContent.css';
 
 export const FieldDetailContent = () => {
-  const { dataClass, selectedField } = useAppContext();
+  const { dataClass, setDataClass, selectedField } = useAppContext();
   if (selectedField === undefined || dataClass.fields.length - 1 < selectedField) {
     return;
   }
 
   const field = dataClass.fields[selectedField];
 
+  const handleFieldPropertyChange = <FKey extends keyof DataClassField>(key: FKey, value: DataClassField[FKey]) => {
+    const newDataClass = structuredClone(dataClass);
+    newDataClass.fields[selectedField][key] = value;
+    setDataClass(newDataClass);
+  };
+
   return (
     <Flex direction='column' gap={4} className='detail-content'>
       <BasicField label='Name'>
-        <Input value={field.name} />
+        <Input value={field.name} onChange={event => handleFieldPropertyChange('name', event.target.value)} />
       </BasicField>
       <BasicField label='Type'>
-        <Input value={field.type} />
+        <Input value={field.type} onChange={event => handleFieldPropertyChange('type', event.target.value)} />
       </BasicField>
-      <BasicCheckbox label='Persistent' checked={field.modifiers.includes('PERSISTENT')} />
+      <BasicCheckbox
+        label='Persistent'
+        checked={field.modifiers.includes('PERSISTENT')}
+        onCheckedChange={event => {
+          let newModifiers = structuredClone(dataClass.fields[selectedField].modifiers);
+          if (event.valueOf()) {
+            newModifiers.push('PERSISTENT');
+          } else {
+            newModifiers = newModifiers.filter(modifier => modifier !== 'PERSISTENT');
+          }
+          handleFieldPropertyChange('modifiers', newModifiers);
+        }}
+      />
       <BasicField label='Comment'>
-        <Textarea value={field.comment} />
+        <Textarea value={field.comment} onChange={event => handleFieldPropertyChange('comment', event.target.value)} />
       </BasicField>
       <BasicField label='Annotations'>
-        <Textarea value={field.annotations.join('\n')} />
+        <Textarea
+          value={field.annotations.join('\n')}
+          onChange={event => handleFieldPropertyChange('annotations', removeEmptyStrings(event.target.value.split('\n')))}
+        />
       </BasicField>
     </Flex>
   );
diff --git a/packages/dataclass-editor/src/utils/array/array.test.ts b/packages/dataclass-editor/src/utils/array/array.test.ts
new file mode 100644
index 00000000..c82e7a51
--- /dev/null
+++ b/packages/dataclass-editor/src/utils/array/array.test.ts
@@ -0,0 +1,5 @@
+import { removeEmptyStrings } from './array';
+
+test('removeEmptyStrings', () => {
+  expect(removeEmptyStrings(['one', '', '  three  ', '   ', 'five'])).toEqual(['one', '  three  ', 'five']);
+});
diff --git a/packages/dataclass-editor/src/utils/array/array.ts b/packages/dataclass-editor/src/utils/array/array.ts
new file mode 100644
index 00000000..6590d942
--- /dev/null
+++ b/packages/dataclass-editor/src/utils/array/array.ts
@@ -0,0 +1,3 @@
+export const removeEmptyStrings = (array: Array<string>) => {
+  return array.filter(value => value.trim() !== '');
+};