diff --git a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
index 2431689..d485390 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabAxis.tsx
@@ -163,145 +163,159 @@ function ChartTabAxis(props: FormEditProps) {
                 />
               </TabContent>
               <TabContent value="axis_argument">
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                  <Card className="my-2" header="General">
-                    <FormItem
-                      label="Visible"
-                      invalid={
-                        !!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
-                      }
-                      errorMessage={errors.argumentAxisDto?.visible}
-                    >
-                      <Field name="argumentAxisDto.visible" component={Checkbox} />
-                    </FormItem>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+                  <Card className="my-2 col-span-2" header="General">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                      <div>
+                        <FormItem
+                          label="Visible"
+                          invalid={
+                            !!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)
+                          }
+                          errorMessage={errors.argumentAxisDto?.visible}
+                        >
+                          <Field name="argumentAxisDto.visible" component={Checkbox} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Workdays Only"
-                      invalid={
-                        !!(
-                          errors.argumentAxisDto?.workdaysOnly &&
-                          touched.argumentAxisDto?.workdaysOnly
-                        )
-                      }
-                      errorMessage={errors.argumentAxisDto?.workdaysOnly}
-                    >
-                      <Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
-                    </FormItem>
+                        <FormItem
+                          label="Workdays Only"
+                          invalid={
+                            !!(
+                              errors.argumentAxisDto?.workdaysOnly &&
+                              touched.argumentAxisDto?.workdaysOnly
+                            )
+                          }
+                          errorMessage={errors.argumentAxisDto?.workdaysOnly}
+                        >
+                          <Field name="argumentAxisDto.workdaysOnly" component={Checkbox} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Title"
-                      invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
-                      errorMessage={errors.argumentAxisDto?.title}
-                    >
-                      <Field type="text" name="argumentAxisDto.title" component={Input} />
-                    </FormItem>
+                        <FormItem
+                          label="Title"
+                          invalid={
+                            !!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)
+                          }
+                          errorMessage={errors.argumentAxisDto?.title}
+                        >
+                          <Field type="text" name="argumentAxisDto.title" component={Input} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Hover Mode"
-                      invalid={
-                        !!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)
-                      }
-                      errorMessage={errors.argumentAxisDto?.hoverMode}
-                    >
-                      <Field type="text" name="argumentAxisDto.hoverMode">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartArgumentAxisHoverModeListOptions}
-                            isClearable={true}
-                            value={chartArgumentAxisHoverModeListOptions.filter(
-                              (option) => option.value === values.argumentAxisDto.hoverMode,
+                        <FormItem
+                          label="Hover Mode"
+                          invalid={
+                            !!(
+                              errors.argumentAxisDto?.hoverMode &&
+                              touched.argumentAxisDto?.hoverMode
+                            )
+                          }
+                          errorMessage={errors.argumentAxisDto?.hoverMode}
+                        >
+                          <Field type="text" name="argumentAxisDto.hoverMode">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartArgumentAxisHoverModeListOptions}
+                                isClearable={true}
+                                value={chartArgumentAxisHoverModeListOptions.filter(
+                                  (option) => option.value === values.argumentAxisDto.hoverMode,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Argument Type"
-                      invalid={
-                        !!(
-                          errors.argumentAxisDto?.argumentType &&
-                          touched.argumentAxisDto?.argumentType
-                        )
-                      }
-                      errorMessage={errors.argumentAxisDto?.argumentType}
-                    >
-                      <Field type="text" name="argumentAxisDto.argumentType">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartArgumentAxisTypeListOptions}
-                            isClearable={true}
-                            value={chartArgumentAxisTypeListOptions.filter(
-                              (option) => option.value === values.argumentAxisDto.argumentType,
+                          </Field>
+                        </FormItem>
+                      </div>
+                      <div>
+                        <FormItem
+                          label="Argument Type"
+                          invalid={
+                            !!(
+                              errors.argumentAxisDto?.argumentType &&
+                              touched.argumentAxisDto?.argumentType
+                            )
+                          }
+                          errorMessage={errors.argumentAxisDto?.argumentType}
+                        >
+                          <Field type="text" name="argumentAxisDto.argumentType">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartArgumentAxisTypeListOptions}
+                                isClearable={true}
+                                value={chartArgumentAxisTypeListOptions.filter(
+                                  (option) => option.value === values.argumentAxisDto.argumentType,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
+                          </Field>
+                        </FormItem>
 
-                    <FormItem
-                      label="Position"
-                      invalid={
-                        !!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)
-                      }
-                      errorMessage={errors.argumentAxisDto?.position}
-                    >
-                      <Field type="text" name="argumentAxisDto.position">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartArgumentAxisPositionListOptions}
-                            isClearable={true}
-                            value={chartArgumentAxisPositionListOptions.filter(
-                              (option) => option.value === values.argumentAxisDto.position,
+                        <FormItem
+                          label="Position"
+                          invalid={
+                            !!(
+                              errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
+                            )
+                          }
+                          errorMessage={errors.argumentAxisDto?.position}
+                        >
+                          <Field type="text" name="argumentAxisDto.position">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartArgumentAxisPositionListOptions}
+                                isClearable={true}
+                                value={chartArgumentAxisPositionListOptions.filter(
+                                  (option) => option.value === values.argumentAxisDto.position,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
+                          </Field>
+                        </FormItem>
 
-                    <FormItem
-                      label="Width"
-                      invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
-                      errorMessage={errors.argumentAxisDto?.width}
-                    >
-                      <Field type="number" name="argumentAxisDto.width" component={Input} />
-                    </FormItem>
+                        <FormItem
+                          label="Width"
+                          invalid={
+                            !!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)
+                          }
+                          errorMessage={errors.argumentAxisDto?.width}
+                        >
+                          <Field type="number" name="argumentAxisDto.width" component={Input} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Aggregation Interval"
-                      invalid={
-                        !!(
-                          errors.argumentAxisDto?.aggregationInterval &&
-                          touched.argumentAxisDto?.aggregationInterval
-                        )
-                      }
-                      errorMessage={errors.argumentAxisDto?.aggregationInterval}
-                    >
-                      <Field type="text" name="argumentAxisDto.aggregationInterval">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartArgumentAxisIntervalListOptions}
-                            isClearable={true}
-                            value={chartArgumentAxisIntervalListOptions.filter(
-                              (option) =>
-                                option.value === values.argumentAxisDto.aggregationInterval,
+                        <FormItem
+                          label="Aggregation Interval"
+                          invalid={
+                            !!(
+                              errors.argumentAxisDto?.aggregationInterval &&
+                              touched.argumentAxisDto?.aggregationInterval
+                            )
+                          }
+                          errorMessage={errors.argumentAxisDto?.aggregationInterval}
+                        >
+                          <Field type="text" name="argumentAxisDto.aggregationInterval">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartArgumentAxisIntervalListOptions}
+                                isClearable={true}
+                                value={chartArgumentAxisIntervalListOptions.filter(
+                                  (option) =>
+                                    option.value === values.argumentAxisDto.aggregationInterval,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
+                          </Field>
+                        </FormItem>
+                      </div>
+                    </div>
                   </Card>
 
                   <Card className="my-2" header="Grid">
@@ -333,7 +347,7 @@ function ChartTabAxis(props: FormEditProps) {
                           <Input
                             {...field}
                             type="color"
-                            className='!h-10 !p-0 !m-0 !border-0'
+                            className="!h-10 !p-0 !m-0 !border-0"
                             onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                           />
                         )}
@@ -499,7 +513,7 @@ function ChartTabAxis(props: FormEditProps) {
                           <Input
                             {...field}
                             type="color"
-                            className='!h-10 !p-0 !m-0 !border-0'
+                            className="!h-10 !p-0 !m-0 !border-0"
                             onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                           />
                         )}
diff --git a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
index 760edcb..ead7d3b 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabCommonSettings.tsx
@@ -17,7 +17,11 @@ import { Field, FieldProps, Form, Formik, FormikErrors, FormikTouched } from 'fo
 import { FormEditProps } from '../../listForm/edit/FormEdit'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreState } from '@/store/store'
-import { ListFormEditTabs, themeOptions, tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import {
+  ListFormEditTabs,
+  themeOptions,
+  tooltipFormatListOptions,
+} from '@/proxy/admin/list-form/options'
 import { object } from 'yup'
 import {
   chartPaletteOptions,
@@ -95,7 +99,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
                         <Input
                           {...field}
                           type="color"
-                          className='!h-10 !p-0 !m-0 !border-0'
+                          className="!h-10 !p-0 !m-0 !border-0"
                           onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                         />
                       )}
@@ -326,128 +330,144 @@ function ChartTabCommonSettings(props: FormEditProps) {
                 </Card>
               </TabContent>
               <TabContent value="commonSettings_tooltip">
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
-                  <Card className="my-2" header="General">
-                    <FormItem
-                      label="Enabled"
-                      invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
-                      errorMessage={errors.tooltipDto?.enabled as string}
-                    >
-                      <Field name="tooltipDto.keepLabels" component={Checkbox} />
-                    </FormItem>
+                <div className="grid grid-cols-1 lg:grid-cols-4 gap-3">
+                  <Card className="my-2 col-span-2" header="General">
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                      <div>
+                        <FormItem
+                          label="Enabled"
+                          invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
+                          errorMessage={errors.tooltipDto?.enabled as string}
+                        >
+                          <Field name="tooltipDto.keepLabels" component={Checkbox} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Shared"
-                      invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
-                      errorMessage={errors.tooltipDto?.shared as string}
-                    >
-                      <Field name="tooltipDto.shared" component={Checkbox} />
-                    </FormItem>
+                        <FormItem
+                          label="Shared"
+                          invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
+                          errorMessage={errors.tooltipDto?.shared as string}
+                        >
+                          <Field name="tooltipDto.shared" component={Checkbox} />
+                        </FormItem>
 
-                    <FormItem
-                      label="Format"
-                      invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
-                      errorMessage={errors.tooltipDto?.format}
-                    >
-                      <Field type="text" name="tooltipDto.format">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={tooltipFormatListOptions}
-                            isClearable={true}
-                            value={tooltipFormatListOptions.filter(
-                              (option) => option.value === values.tooltipDto.format,
+                        <FormItem
+                          label="Format"
+                          invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
+                          errorMessage={errors.tooltipDto?.format}
+                        >
+                          <Field type="text" name="tooltipDto.format">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={tooltipFormatListOptions}
+                                isClearable={true}
+                                value={tooltipFormatListOptions.filter(
+                                  (option) => option.value === values.tooltipDto.format,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
+                          </Field>
+                        </FormItem>
 
-                    <FormItem
-                      label="Location"
-                      invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
-                      errorMessage={errors.tooltipDto?.location}
-                    >
-                      <Field type="text" name="tooltipDto.location">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartTooltipLocationListOptions}
-                            isClearable={true}
-                            value={chartTooltipLocationListOptions.filter(
-                              (option) => option.value === values.tooltipDto.location,
+                        <FormItem
+                          label="Location"
+                          invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
+                          errorMessage={errors.tooltipDto?.location}
+                        >
+                          <Field type="text" name="tooltipDto.location">
+                            {({ field, form }: FieldProps<SelectBoxOption>) => (
+                              <Select
+                                field={field}
+                                form={form}
+                                options={chartTooltipLocationListOptions}
+                                isClearable={true}
+                                value={chartTooltipLocationListOptions.filter(
+                                  (option) => option.value === values.tooltipDto.location,
+                                )}
+                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              />
                             )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          </Field>
+                        </FormItem>
+                      </div>
+                      <div>
+                        <FormItem
+                          label="Color"
+                          invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
+                          errorMessage={errors.tooltipDto?.color}
+                        >
+                          <Field name="tooltipDto.color">
+                            {({ field, form }: FieldProps) => (
+                              <Input
+                                {...field}
+                                type="color"
+                                className="!h-10 !p-0 !m-0 !border-0"
+                                onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                              />
+                            )}
+                          </Field>
+                        </FormItem>
+
+                        <FormItem
+                          label="Argument Format"
+                          invalid={
+                            !!(
+                              errors.tooltipDto?.argumentFormat &&
+                              touched.tooltipDto?.argumentFormat
+                            )
+                          }
+                          errorMessage={errors.tooltipDto?.argumentFormat}
+                        >
+                          <Field name="tooltipDto.argumentFormat" component={Input} />
+                        </FormItem>
+
+                        <FormItem
+                          label="Arrow Length"
+                          invalid={
+                            !!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
+                          }
+                          errorMessage={errors.tooltipDto?.arrowLength}
+                        >
+                          <Field type="number" name="tooltipDto.arrowLength" component={Input} />
+                        </FormItem>
+
+                        <FormItem
+                          label="Padding Top/Bottom"
+                          invalid={
+                            !!(
+                              errors.tooltipDto?.paddingTopBottom &&
+                              touched.tooltipDto?.paddingTopBottom
+                            )
+                          }
+                          errorMessage={errors.tooltipDto?.paddingTopBottom}
+                        >
+                          <Field
+                            type="number"
+                            name="tooltipDto.paddingTopBottom"
+                            component={Input}
                           />
-                        )}
-                      </Field>
-                    </FormItem>
+                        </FormItem>
 
-                    <FormItem
-                      label="Color"
-                      invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
-                      errorMessage={errors.tooltipDto?.color}
-                    >
-                      <Field name="tooltipDto.color">
-                        {({ field, form }: FieldProps) => (
-                          <Input
-                            {...field}
-                            type="color"
-                            className='!h-10 !p-0 !m-0 !border-0'
-                            onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                        <FormItem
+                          label="Padding Left/Right"
+                          invalid={
+                            !!(
+                              errors.tooltipDto?.paddingLeftRight &&
+                              touched.tooltipDto?.paddingLeftRight
+                            )
+                          }
+                          errorMessage={errors.tooltipDto?.paddingLeftRight}
+                        >
+                          <Field
+                            type="number"
+                            name="tooltipDto.paddingLeftRight"
+                            component={Input}
                           />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Argument Format"
-                      invalid={
-                        !!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)
-                      }
-                      errorMessage={errors.tooltipDto?.argumentFormat}
-                    >
-                      <Field name="tooltipDto.argumentFormat" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Arrow Length"
-                      invalid={
-                        !!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)
-                      }
-                      errorMessage={errors.tooltipDto?.arrowLength}
-                    >
-                      <Field type="number" name="tooltipDto.arrowLength" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Padding Top/Bottom"
-                      invalid={
-                        !!(
-                          errors.tooltipDto?.paddingTopBottom &&
-                          touched.tooltipDto?.paddingTopBottom
-                        )
-                      }
-                      errorMessage={errors.tooltipDto?.paddingTopBottom}
-                    >
-                      <Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Padding Left/Right"
-                      invalid={
-                        !!(
-                          errors.tooltipDto?.paddingLeftRight &&
-                          touched.tooltipDto?.paddingLeftRight
-                        )
-                      }
-                      errorMessage={errors.tooltipDto?.paddingLeftRight}
-                    >
-                      <Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
-                    </FormItem>
+                        </FormItem>
+                      </div>
+                    </div>
                   </Card>
 
                   <Card className="my-2" header="Font">
@@ -463,7 +483,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
                           <Input
                             {...field}
                             type="color"
-                            className='!h-10 !p-0 !m-0 !border-0'
+                            className="!h-10 !p-0 !m-0 !border-0"
                             onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                           />
                         )}
@@ -649,7 +669,7 @@ function ChartTabCommonSettings(props: FormEditProps) {
                         <Input
                           {...field}
                           type="color"
-                          className='!h-10 !p-0 !m-0 !border-0'
+                          className="!h-10 !p-0 !m-0 !border-0"
                           onChange={(e) => form.setFieldValue(field.name, e.target.value)}
                         />
                       )}
diff --git a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
index e695ab2..806bc71 100644
--- a/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/ChartTabSeries.tsx
@@ -229,282 +229,296 @@ function ChartTabSeries(props: FormEditProps & { listFormCode: string }) {
               </TabContent>
               <TabContent value="series_common">
                 <Card className="my-2">
-                  <FormItem
-                    label="Visible"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.visible &&
-                        touched.commonSeriesSettingsDto?.visible
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.visible}
-                  >
-                    <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
-                  </FormItem>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                      <FormItem
+                        label="Visible"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.visible &&
+                            touched.commonSeriesSettingsDto?.visible
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.visible}
+                      >
+                        <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
+                      </FormItem>
 
-                  <FormItem
-                    label="Show In Legend"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.showInLegend &&
-                        touched.commonSeriesSettingsDto?.showInLegend
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
-                  >
-                    <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
-                  </FormItem>
+                      <FormItem
+                        label="Show In Legend"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.showInLegend &&
+                            touched.commonSeriesSettingsDto?.showInLegend
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
+                      >
+                        <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
+                      </FormItem>
 
-                  <FormItem
-                    label="Ignore Empty Points"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
-                        touched.commonSeriesSettingsDto?.ignoreEmptyPoints
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
-                  >
-                    <Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} />
-                  </FormItem>
+                      <FormItem
+                        label="Ignore Empty Points"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
+                            touched.commonSeriesSettingsDto?.ignoreEmptyPoints
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
+                      >
+                        <Field
+                          name="commonSeriesSettingsDto.ignoreEmptyPoints"
+                          component={Checkbox}
+                        />
+                      </FormItem>
 
-                  <FormItem
-                    label="Type"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.type &&
-                        touched.commonSeriesSettingsDto?.type
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.type}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.type">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={chartSeriesTypeOptions}
-                          isClearable={true}
-                          value={chartSeriesTypeOptions.filter(
-                            (option) => option.value === values.commonSeriesSettingsDto.type,
+                      <FormItem
+                        label="Type"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.type &&
+                            touched.commonSeriesSettingsDto?.type
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.type}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.type">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              options={chartSeriesTypeOptions}
+                              isClearable={true}
+                              value={chartSeriesTypeOptions.filter(
+                                (option) => option.value === values.commonSeriesSettingsDto.type,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Selection Mode"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.selectionMode &&
-                        touched.commonSeriesSettingsDto?.selectionMode
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.selectionMode">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={chartSeriesSelectionModeOptions}
-                          isClearable={true}
-                          value={chartSeriesSelectionModeOptions.filter(
-                            (option) =>
-                              option.value === values.commonSeriesSettingsDto.selectionMode,
+                      <FormItem
+                        label="Selection Mode"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.selectionMode &&
+                            touched.commonSeriesSettingsDto?.selectionMode
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.selectionMode">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              options={chartSeriesSelectionModeOptions}
+                              isClearable={true}
+                              value={chartSeriesSelectionModeOptions.filter(
+                                (option) =>
+                                  option.value === values.commonSeriesSettingsDto.selectionMode,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Argument Field"
-                    invalid={
-                      errors.commonSeriesSettingsDto?.argumentField &&
-                      touched.commonSeriesSettingsDto?.argumentField
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.argumentField}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.argumentField">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          componentAs={CreatableSelect}
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={fieldList}
-                          value={fieldList.find(
-                            (option) =>
-                              option.value === values.commonSeriesSettingsDto.argumentField,
+                      <FormItem
+                        label="Argument Field"
+                        invalid={
+                          errors.commonSeriesSettingsDto?.argumentField &&
+                          touched.commonSeriesSettingsDto?.argumentField
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.argumentField}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.argumentField">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              componentAs={CreatableSelect}
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={fieldList}
+                              value={fieldList.find(
+                                (option) =>
+                                  option.value === values.commonSeriesSettingsDto.argumentField,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              menuPlacement="auto"
+                              maxMenuHeight={150}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          menuPlacement="auto"
-                          maxMenuHeight={150}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Value Field"
-                    invalid={
-                      errors.commonSeriesSettingsDto?.valueField &&
-                      touched.commonSeriesSettingsDto?.valueField
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.valueField}
-                  >
-                    <Field type="text" name="valueField">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          componentAs={CreatableSelect}
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={fieldList}
-                          value={fieldList.find(
-                            (option) => option.value === values.commonSeriesSettingsDto.valueField,
+                      <FormItem
+                        label="Value Field"
+                        invalid={
+                          errors.commonSeriesSettingsDto?.valueField &&
+                          touched.commonSeriesSettingsDto?.valueField
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.valueField}
+                      >
+                        <Field type="text" name="valueField">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              componentAs={CreatableSelect}
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={fieldList}
+                              value={fieldList.find(
+                                (option) =>
+                                  option.value === values.commonSeriesSettingsDto.valueField,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                              menuPlacement="auto"
+                              maxMenuHeight={150}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          menuPlacement="auto"
-                          maxMenuHeight={150}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label="Axis"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.axis &&
-                        touched.commonSeriesSettingsDto?.axis
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.axis}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.axis">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={valueAxisList()}
-                          isClearable={true}
-                          value={valueAxisList()?.find(
-                            (option) => option.value === values.commonSeriesSettingsDto.axis,
+                        </Field>
+                      </FormItem>
+                    </div>
+                    <div>
+                      <FormItem
+                        label="Axis"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.axis &&
+                            touched.commonSeriesSettingsDto?.axis
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.axis}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.axis">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              options={valueAxisList()}
+                              isClearable={true}
+                              value={valueAxisList()?.find(
+                                (option) => option.value === values.commonSeriesSettingsDto.axis,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Pane"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.pane &&
-                        touched.commonSeriesSettingsDto?.pane
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.pane}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.pane">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={valuePaneList()}
-                          isClearable={true}
-                          value={valuePaneList()?.find(
-                            (option) => option.value === values.commonSeriesSettingsDto.pane,
+                      <FormItem
+                        label="Pane"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.pane &&
+                            touched.commonSeriesSettingsDto?.pane
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.pane}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.pane">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              options={valuePaneList()}
+                              isClearable={true}
+                              value={valuePaneList()?.find(
+                                (option) => option.value === values.commonSeriesSettingsDto.pane,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Color"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.color &&
-                        touched.commonSeriesSettingsDto?.color
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.color}
-                  >
-                    <Field name="commonSeriesSettingsDto.color">
-                      {({ field, form }: FieldProps) => (
-                        <Input
-                          {...field}
-                          type="color"
-                          className='!h-10 !p-0 !m-0 !border-0'
-                          onChange={(e) => form.setFieldValue(field.name, e.target.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label="Corner Radius"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.cornerRadius &&
-                        touched.commonSeriesSettingsDto?.cornerRadius
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
-                  >
-                    <Field
-                      type="number"
-                      name="commonSeriesSettingsDto.cornerRadius"
-                      component={Input}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label="Type"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.dashStyle &&
-                        touched.commonSeriesSettingsDto?.dashStyle
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
-                  >
-                    <Field type="text" name="commonSeriesSettingsDto.dashStyle">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={chartSeriesDashStyleOptions}
-                          isClearable={true}
-                          value={chartSeriesDashStyleOptions.filter(
-                            (option) => option.value === values.commonSeriesSettingsDto.dashStyle,
+                      <FormItem
+                        label="Color"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.color &&
+                            touched.commonSeriesSettingsDto?.color
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.color}
+                      >
+                        <Field name="commonSeriesSettingsDto.color">
+                          {({ field, form }: FieldProps) => (
+                            <Input
+                              {...field}
+                              type="color"
+                              className="!h-10 !p-0 !m-0 !border-0"
+                              onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                            />
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                        </Field>
+                      </FormItem>
 
-                  <FormItem
-                    label="Width"
-                    invalid={
-                      !!(
-                        errors.commonSeriesSettingsDto?.width &&
-                        touched.commonSeriesSettingsDto?.width
-                      )
-                    }
-                    errorMessage={errors.commonSeriesSettingsDto?.width}
-                  >
-                    <Field type="number" name="commonSeriesSettingsDto.width" component={Input} />
-                  </FormItem>
+                      <FormItem
+                        label="Corner Radius"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.cornerRadius &&
+                            touched.commonSeriesSettingsDto?.cornerRadius
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
+                      >
+                        <Field
+                          type="number"
+                          name="commonSeriesSettingsDto.cornerRadius"
+                          component={Input}
+                        />
+                      </FormItem>
+
+                      <FormItem
+                        label="Type"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.dashStyle &&
+                            touched.commonSeriesSettingsDto?.dashStyle
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
+                      >
+                        <Field type="text" name="commonSeriesSettingsDto.dashStyle">
+                          {({ field, form }: FieldProps<SelectBoxOption>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              options={chartSeriesDashStyleOptions}
+                              isClearable={true}
+                              value={chartSeriesDashStyleOptions.filter(
+                                (option) =>
+                                  option.value === values.commonSeriesSettingsDto.dashStyle,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
+                          )}
+                        </Field>
+                      </FormItem>
+
+                      <FormItem
+                        label="Width"
+                        invalid={
+                          !!(
+                            errors.commonSeriesSettingsDto?.width &&
+                            touched.commonSeriesSettingsDto?.width
+                          )
+                        }
+                        errorMessage={errors.commonSeriesSettingsDto?.width}
+                      >
+                        <Field
+                          type="number"
+                          name="commonSeriesSettingsDto.width"
+                          component={Input}
+                        />
+                      </FormItem>
+                    </div>
+                  </div>
                 </Card>
               </TabContent>
             </Tabs>
diff --git a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
index a2552fe..64dd0c4 100644
--- a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
@@ -29,7 +29,7 @@ function FormTabColumns(props: FormEditProps) {
   }
 
   return (
-    <Container className="grid xl:grid-cols-2">
+    <Container>
       <Formik
         initialValues={listFormValues}
         validationSchema={validationSchema}
@@ -40,253 +40,275 @@ function FormTabColumns(props: FormEditProps) {
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
             <FormContainer size="sm">
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
-                invalid={
-                  errors.columnOptionDto?.showColumnHeaders &&
-                  touched.columnOptionDto?.showColumnHeaders
-                }
-                errorMessage={errors.columnOptionDto?.showColumnHeaders}
-              >
-                <Field
-                  name="columnOptionDto.showColumnHeaders"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
-                invalid={
-                  errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
-                }
-                errorMessage={errors.columnOptionDto?.showBorders}
-              >
-                <Field
-                  name="columnOptionDto.showBorders"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
-                invalid={
-                  errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
-                }
-                errorMessage={errors.columnOptionDto?.showRowLines}
-              >
-                <Field
-                  name="columnOptionDto.showRowLines"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
-                invalid={
-                  errors.columnOptionDto?.showColumnLines &&
-                  touched.columnOptionDto?.showColumnLines
-                }
-                errorMessage={errors.columnOptionDto?.showColumnLines}
-              >
-                <Field
-                  name="columnOptionDto.showColumnLines"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
-                invalid={
-                  errors.columnOptionDto?.rowAlternationEnabled &&
-                  touched.columnOptionDto?.rowAlternationEnabled
-                }
-                errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
-              >
-                <Field
-                  name="columnOptionDto.rowAlternationEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
-                invalid={
-                  errors.columnOptionDto?.allowColumnReordering &&
-                  touched.columnOptionDto?.allowColumnReordering
-                }
-                errorMessage={errors.columnOptionDto?.allowColumnReordering}
-              >
-                <Field
-                  name="columnOptionDto.allowColumnReordering"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
-                invalid={
-                  errors.columnOptionDto?.columnAutoWidth &&
-                  touched.columnOptionDto?.columnAutoWidth
-                }
-                errorMessage={errors.columnOptionDto?.columnAutoWidth}
-              >
-                <Field
-                  name="columnOptionDto.columnAutoWidth"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
-                invalid={
-                  errors.columnOptionDto?.columnFixingEnabled &&
-                  touched.columnOptionDto?.columnFixingEnabled
-                }
-                errorMessage={errors.columnOptionDto?.columnFixingEnabled}
-              >
-                <Field
-                  name="columnOptionDto.columnFixingEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
-                invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled}
-                errorMessage={errors.columnOptionDto?.rtlEnabled}
-              >
-                <Field
-                  name="columnOptionDto.rtlEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
-                invalid={
-                  errors.columnOptionDto?.columnChooserEnabled &&
-                  touched.columnOptionDto?.columnChooserEnabled
-                }
-                errorMessage={errors.columnOptionDto?.columnChooserEnabled}
-              >
-                <Field
-                  name="columnOptionDto.columnChooserEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
-                invalid={
-                  errors.columnOptionDto?.columnChooserMode &&
-                  touched.columnOptionDto?.columnChooserMode
-                }
-                errorMessage={errors.columnOptionDto?.columnChooserMode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnOptionDto.columnChooserMode"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
-                >
-                  {({ field, form }: FieldProps<ColumnChooserMode>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnChooserModeOptions}
-                      value={columnChooserModeOptions?.filter(
-                        (option) => option.value === values.columnOptionDto.columnChooserMode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="my-2">
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
+                    invalid={
+                      errors.columnOptionDto?.showColumnHeaders &&
+                      touched.columnOptionDto?.showColumnHeaders
+                    }
+                    errorMessage={errors.columnOptionDto?.showColumnHeaders}
+                  >
+                    <Field
+                      name="columnOptionDto.showColumnHeaders"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
+                      component={Checkbox}
                     />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
-                invalid={
-                  errors.columnOptionDto?.allowColumnResizing &&
-                  touched.columnOptionDto?.allowColumnResizing
-                }
-                errorMessage={errors.columnOptionDto?.allowColumnResizing}
-              >
-                <Field
-                  name="columnOptionDto.allowColumnResizing"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
-                invalid={
-                  errors.columnOptionDto?.columnResizingMode &&
-                  touched.columnOptionDto?.columnResizingMode
-                }
-                errorMessage={errors.columnOptionDto?.columnResizingMode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="columnOptionDto.columnResizingMode"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
-                >
-                  {({ field, form }: FieldProps<ColumnResizeMode>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={columnResizingModeOptions}
-                      value={columnResizingModeOptions?.filter(
-                        (option) => option.value === values.columnOptionDto.columnResizingMode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
+                    invalid={
+                      errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
+                    }
+                    errorMessage={errors.columnOptionDto?.showBorders}
+                  >
+                    <Field
+                      name="columnOptionDto.showBorders"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
+                      component={Checkbox}
                     />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
-                invalid={
-                  errors.columnOptionDto?.hoverStateEnabled &&
-                  touched.columnOptionDto?.hoverStateEnabled
-                }
-                errorMessage={errors.columnOptionDto?.hoverStateEnabled}
-              >
-                <Field
-                  name="columnOptionDto.hoverStateEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
-                invalid={
-                  errors.columnOptionDto?.columnHidingEnabled &&
-                  touched.columnOptionDto?.columnHidingEnabled
-                }
-                errorMessage={errors.columnOptionDto?.columnHidingEnabled}
-              >
-                <Field
-                  name="columnOptionDto.columnHidingEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
-                invalid={
-                  errors.columnOptionDto?.focusedRowEnabled &&
-                  touched.columnOptionDto?.focusedRowEnabled
-                }
-                errorMessage={errors.columnOptionDto?.focusedRowEnabled}
-              >
-                <Field
-                  name="columnOptionDto.focusedRowEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
+                    invalid={
+                      errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
+                    }
+                    errorMessage={errors.columnOptionDto?.showRowLines}
+                  >
+                    <Field
+                      name="columnOptionDto.showRowLines"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
+                    invalid={
+                      errors.columnOptionDto?.showColumnLines &&
+                      touched.columnOptionDto?.showColumnLines
+                    }
+                    errorMessage={errors.columnOptionDto?.showColumnLines}
+                  >
+                    <Field
+                      name="columnOptionDto.showColumnLines"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.rowAlternationEnabled &&
+                      touched.columnOptionDto?.rowAlternationEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.rowAlternationEnabled"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
+                    invalid={
+                      errors.columnOptionDto?.allowColumnReordering &&
+                      touched.columnOptionDto?.allowColumnReordering
+                    }
+                    errorMessage={errors.columnOptionDto?.allowColumnReordering}
+                  >
+                    <Field
+                      name="columnOptionDto.allowColumnReordering"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionAllowColumnReordering',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
+                    invalid={
+                      errors.columnOptionDto?.columnAutoWidth &&
+                      touched.columnOptionDto?.columnAutoWidth
+                    }
+                    errorMessage={errors.columnOptionDto?.columnAutoWidth}
+                  >
+                    <Field
+                      name="columnOptionDto.columnAutoWidth"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.columnFixingEnabled &&
+                      touched.columnOptionDto?.columnFixingEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.columnFixingEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.columnFixingEnabled"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                </div>
+                <div className="my-2">
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.rtlEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.rtlEnabled"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.columnChooserEnabled &&
+                      touched.columnOptionDto?.columnChooserEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.columnChooserEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.columnChooserEnabled"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
+                    invalid={
+                      errors.columnOptionDto?.columnChooserMode &&
+                      touched.columnOptionDto?.columnChooserMode
+                    }
+                    errorMessage={errors.columnOptionDto?.columnChooserMode}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="columnOptionDto.columnChooserMode"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
+                    >
+                      {({ field, form }: FieldProps<ColumnChooserMode>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={columnChooserModeOptions}
+                          value={columnChooserModeOptions?.filter(
+                            (option) => option.value === values.columnOptionDto.columnChooserMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
+                    invalid={
+                      errors.columnOptionDto?.allowColumnResizing &&
+                      touched.columnOptionDto?.allowColumnResizing
+                    }
+                    errorMessage={errors.columnOptionDto?.allowColumnResizing}
+                  >
+                    <Field
+                      name="columnOptionDto.allowColumnResizing"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionAllowColumnResizing',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
+                    invalid={
+                      errors.columnOptionDto?.columnResizingMode &&
+                      touched.columnOptionDto?.columnResizingMode
+                    }
+                    errorMessage={errors.columnOptionDto?.columnResizingMode}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="columnOptionDto.columnResizingMode"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionColumnResizingMode',
+                      )}
+                    >
+                      {({ field, form }: FieldProps<ColumnResizeMode>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={columnResizingModeOptions}
+                          value={columnResizingModeOptions?.filter(
+                            (option) => option.value === values.columnOptionDto.columnResizingMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.hoverStateEnabled &&
+                      touched.columnOptionDto?.hoverStateEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.hoverStateEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.hoverStateEnabled"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.columnHidingEnabled &&
+                      touched.columnOptionDto?.columnHidingEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.columnHidingEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.columnHidingEnabled"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
+                    invalid={
+                      errors.columnOptionDto?.focusedRowEnabled &&
+                      touched.columnOptionDto?.focusedRowEnabled
+                    }
+                    errorMessage={errors.columnOptionDto?.focusedRowEnabled}
+                  >
+                    <Field
+                      name="columnOptionDto.focusedRowEnabled"
+                      placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                </div>
+              </div>
 
               <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
index 71b29c9..2a0a593 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
@@ -79,7 +79,7 @@ function FormTabDatabaseDelete({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -96,7 +96,7 @@ function FormTabDatabaseDelete({
                       )}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -111,7 +111,7 @@ function FormTabDatabaseDelete({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseDeleteAfterCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                 </div>
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
index b584e81..6c1712d 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
@@ -78,7 +78,7 @@ function FormTabDatabaseInsert({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -95,7 +95,7 @@ function FormTabDatabaseInsert({
                       )}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -110,7 +110,7 @@ function FormTabDatabaseInsert({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseInsertAfterCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                 </div>
diff --git a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
index 6b06988..8a3a0ac 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
@@ -78,7 +78,7 @@ function FormTabDatabaseUpdate({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -95,7 +95,7 @@ function FormTabDatabaseUpdate({
                       )}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                   <FormItem
@@ -110,7 +110,7 @@ function FormTabDatabaseUpdate({
                       placeholder={translate('::ListForms.ListFormEdit.DatabaseUpdateAfterCommand')}
                       component={Input}
                       textArea={true}
-                      rows={6}
+                      rows={4}
                     />
                   </FormItem>
                 </div>
diff --git a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
index 3577009..723468d 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
@@ -223,18 +223,19 @@ function FormTabDetails(
                       component={Checkbox}
                     />
                   </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.IsSub')}
+                    invalid={errors.isSubForm && touched.isSubForm}
+                    errorMessage={errors.isSubForm}
+                  >
+                    <Field
+                      name="isSubForm"
+                      placeholder={translate('::ListForms.ListFormEdit.IsSub')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
                 </div>
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.IsSub')}
-                  invalid={errors.isSubForm && touched.isSubForm}
-                  errorMessage={errors.isSubForm}
-                >
-                  <Field
-                    name="isSubForm"
-                    placeholder={translate('::ListForms.ListFormEdit.IsSub')}
-                    component={Checkbox}
-                  />
-                </FormItem>
 
                 <FormItem
                   label={translate('::ListForms.ListFormEdit.SubFormsListFormType')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
index 097aeb2..78fab02 100644
--- a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
@@ -41,295 +41,303 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
         {({ touched, errors, values, isSubmitting }) => (
           <Form>
             <FormContainer size="sm">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <Card className="my-2" header="General">
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                    invalid={
-                      errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
-                    }
-                    errorMessage={errors.editingOptionDto?.allowAdding}
-                  >
-                    <Field
-                      name="editingOptionDto.allowAdding"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
-                    invalid={
-                      errors.editingOptionDto?.addPageUrl &&
-                      touched.editingOptionDto?.addPageUrl
-                    }
-                    errorMessage={errors.editingOptionDto?.addPageUrl}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.addPageUrl"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
-                      component={Input}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.AllowUpdating')}
-                    invalid={
-                      errors.editingOptionDto?.allowUpdating &&
-                      touched.editingOptionDto?.allowUpdating
-                    }
-                    errorMessage={errors.editingOptionDto?.allowUpdating}
-                  >
-                    <Field
-                      name="editingOptionDto.allowUpdating"
-                      placeholder={translate('::ListForms.ListFormEdit.AllowUpdating')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
-                    invalid={
-                      errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
-                      touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
-                    }
-                    errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
-                  >
-                    <Field
-                      name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
-                    invalid={
-                      errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail
-                    }
-                    errorMessage={errors.editingOptionDto?.allowDetail}
-                  >
-                    <Field
-                      name="editingOptionDto.allowDetail"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
-                    invalid={
-                      errors.editingOptionDto?.allowDuplicate && touched.editingOptionDto?.allowDuplicate
-                    }
-                    errorMessage={errors.editingOptionDto?.allowDuplicate}
-                  >
-                    <Field
-                      name="editingOptionDto.allowDuplicate"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                    invalid={
-                      errors.editingOptionDto?.allowDeleting &&
-                      touched.editingOptionDto?.allowDeleting
-                    }
-                    errorMessage={errors.editingOptionDto?.allowDeleting}
-                  >
-                    <Field
-                      name="editingOptionDto.allowDeleting"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                    invalid={
-                      errors.editingOptionDto?.allowAllDeleting &&
-                      touched.editingOptionDto?.allowAllDeleting
-                    }
-                    errorMessage={errors.editingOptionDto?.allowAllDeleting}
-                  >
-                    <Field
-                      name="editingOptionDto.allowAllDeleting"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                    invalid={
-                      errors.editingOptionDto?.confirmDelete &&
-                      touched.editingOptionDto?.confirmDelete
-                    }
-                    errorMessage={errors.editingOptionDto?.confirmDelete}
-                  >
-                    <Field
-                      name="editingOptionDto.confirmDelete"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                    invalid={
-                      errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
-                    }
-                    errorMessage={errors.editingOptionDto?.useIcons}
-                  >
-                    <Field
-                      name="editingOptionDto.useIcons"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
-                    invalid={
-                      errors.editingOptionDto?.selectTextOnEditStart &&
-                      touched.editingOptionDto?.selectTextOnEditStart
-                    }
-                    errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
-                  >
-                    <Field
-                      name="editingOptionDto.selectTextOnEditStart"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingMode')}
-                    invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
-                    errorMessage={errors.editingOptionDto?.mode}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.mode"
-                      placeholder={translate('::SidePanel.Mode')}
-                    >
-                      {({ field, form }: FieldProps<GridsEditMode>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={editingOptionModeOptions}
-                          value={editingOptionModeOptions?.filter(
-                            (option) => option.value === values.editingOptionDto.mode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <Card className="my-2 col-span-2" header="General">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
+                        invalid={
+                          errors.editingOptionDto?.allowAdding &&
+                          touched.editingOptionDto?.allowAdding
+                        }
+                        errorMessage={errors.editingOptionDto?.allowAdding}
+                      >
+                        <Field
+                          name="editingOptionDto.allowAdding"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
+                          component={Checkbox}
                         />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                    invalid={
-                      errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
-                    }
-                    errorMessage={errors.editingOptionDto?.refreshMode}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.refreshMode"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                    >
-                      {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={editingOptionRefreshModeOptions}
-                          value={editingOptionRefreshModeOptions?.filter(
-                            (option) => option.value === values.editingOptionDto.refreshMode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
+                        invalid={
+                          errors.editingOptionDto?.addPageUrl &&
+                          touched.editingOptionDto?.addPageUrl
+                        }
+                        errorMessage={errors.editingOptionDto?.addPageUrl}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.addPageUrl"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAddPageUrl')}
+                          component={Input}
                         />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                    invalid={
-                      errors.editingOptionDto?.newRowPosition &&
-                      touched.editingOptionDto?.newRowPosition
-                    }
-                    errorMessage={errors.editingOptionDto?.newRowPosition}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.newRowPosition"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                    >
-                      {({ field, form }: FieldProps<NewRowPosition>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={editingOptionNewRowPositionOptions}
-                          value={editingOptionNewRowPositionOptions?.filter(
-                            (option) => option.value === values.editingOptionDto.newRowPosition,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.AllowUpdating')}
+                        invalid={
+                          errors.editingOptionDto?.allowUpdating &&
+                          touched.editingOptionDto?.allowUpdating
+                        }
+                        errorMessage={errors.editingOptionDto?.allowUpdating}
+                      >
+                        <Field
+                          name="editingOptionDto.allowUpdating"
+                          placeholder={translate('::ListForms.ListFormEdit.AllowUpdating')}
+                          component={Checkbox}
                         />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                    invalid={
-                      errors.editingOptionDto?.startEditAction &&
-                      touched.editingOptionDto?.startEditAction
-                    }
-                    errorMessage={errors.editingOptionDto?.startEditAction}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.startEditAction"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                    >
-                      {({ field, form }: FieldProps<StartEditAction>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={editingOptionStartEditActionOptions}
-                          value={editingOptionStartEditActionOptions?.filter(
-                            (option) => option.value === values.editingOptionDto.startEditAction,
+                      </FormItem>
+                      <FormItem
+                        label={translate(
+                          '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
+                        )}
+                        invalid={
+                          errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
+                          touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
+                        }
+                        errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
+                      >
+                        <Field
+                          name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
+                          placeholder={translate(
+                            '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
                           )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          component={Checkbox}
                         />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
-                    invalid={
-                      errors.editingOptionDto?.editColumnName &&
-                      touched.editingOptionDto?.editColumnName
-                    }
-                    errorMessage={errors.editingOptionDto?.editColumnName}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="editingOptionDto.editColumnName"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
-                      component={Input}
-                    />
-                  </FormItem>
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
+                        invalid={
+                          errors.editingOptionDto?.allowDetail &&
+                          touched.editingOptionDto?.allowDetail
+                        }
+                        errorMessage={errors.editingOptionDto?.allowDetail}
+                      >
+                        <Field
+                          name="editingOptionDto.allowDetail"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
+                        invalid={
+                          errors.editingOptionDto?.allowDuplicate &&
+                          touched.editingOptionDto?.allowDuplicate
+                        }
+                        errorMessage={errors.editingOptionDto?.allowDuplicate}
+                      >
+                        <Field
+                          name="editingOptionDto.allowDuplicate"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAllowDuplicate')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                        invalid={
+                          errors.editingOptionDto?.allowDeleting &&
+                          touched.editingOptionDto?.allowDeleting
+                        }
+                        errorMessage={errors.editingOptionDto?.allowDeleting}
+                      >
+                        <Field
+                          name="editingOptionDto.allowDeleting"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                        invalid={
+                          errors.editingOptionDto?.allowAllDeleting &&
+                          touched.editingOptionDto?.allowAllDeleting
+                        }
+                        errorMessage={errors.editingOptionDto?.allowAllDeleting}
+                      >
+                        <Field
+                          name="editingOptionDto.allowAllDeleting"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                    </div>
+                    <div>
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                        invalid={
+                          errors.editingOptionDto?.confirmDelete &&
+                          touched.editingOptionDto?.confirmDelete
+                        }
+                        errorMessage={errors.editingOptionDto?.confirmDelete}
+                      >
+                        <Field
+                          name="editingOptionDto.confirmDelete"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                        invalid={
+                          errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
+                        }
+                        errorMessage={errors.editingOptionDto?.useIcons}
+                      >
+                        <Field
+                          name="editingOptionDto.useIcons"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
+                        invalid={
+                          errors.editingOptionDto?.selectTextOnEditStart &&
+                          touched.editingOptionDto?.selectTextOnEditStart
+                        }
+                        errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
+                      >
+                        <Field
+                          name="editingOptionDto.selectTextOnEditStart"
+                          placeholder={translate(
+                            '::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
+                          )}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      </div>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingMode')}
+                        invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
+                        errorMessage={errors.editingOptionDto?.mode}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.mode"
+                          placeholder={translate('::SidePanel.Mode')}
+                        >
+                          {({ field, form }: FieldProps<GridsEditMode>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={editingOptionModeOptions}
+                              value={editingOptionModeOptions?.filter(
+                                (option) => option.value === values.editingOptionDto.mode,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
+                          )}
+                        </Field>
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
+                        invalid={
+                          errors.editingOptionDto?.refreshMode &&
+                          touched.editingOptionDto?.refreshMode
+                        }
+                        errorMessage={errors.editingOptionDto?.refreshMode}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.refreshMode"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
+                        >
+                          {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={editingOptionRefreshModeOptions}
+                              value={editingOptionRefreshModeOptions?.filter(
+                                (option) => option.value === values.editingOptionDto.refreshMode,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
+                          )}
+                        </Field>
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
+                        invalid={
+                          errors.editingOptionDto?.newRowPosition &&
+                          touched.editingOptionDto?.newRowPosition
+                        }
+                        errorMessage={errors.editingOptionDto?.newRowPosition}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.newRowPosition"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
+                        >
+                          {({ field, form }: FieldProps<NewRowPosition>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={editingOptionNewRowPositionOptions}
+                              value={editingOptionNewRowPositionOptions?.filter(
+                                (option) => option.value === values.editingOptionDto.newRowPosition,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
+                          )}
+                        </Field>
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                        invalid={
+                          errors.editingOptionDto?.startEditAction &&
+                          touched.editingOptionDto?.startEditAction
+                        }
+                        errorMessage={errors.editingOptionDto?.startEditAction}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.startEditAction"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                        >
+                          {({ field, form }: FieldProps<StartEditAction>) => (
+                            <Select
+                              field={field}
+                              form={form}
+                              isClearable={true}
+                              options={editingOptionStartEditActionOptions}
+                              value={editingOptionStartEditActionOptions?.filter(
+                                (option) =>
+                                  option.value === values.editingOptionDto.startEditAction,
+                              )}
+                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                            />
+                          )}
+                        </Field>
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                        invalid={
+                          errors.editingOptionDto?.editColumnName &&
+                          touched.editingOptionDto?.editColumnName
+                        }
+                        errorMessage={errors.editingOptionDto?.editColumnName}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.editColumnName"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                          component={Input}
+                        />
+                      </FormItem>
+                    </div>
+                  </div>
                 </Card>
                 <Card className="my-2" header="Popup">
                   {values.editingOptionDto.mode === 'popup' && (
diff --git a/ui/src/views/admin/listForm/edit/FormTabGantt.tsx b/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
index 0b59b3d..34340f9 100644
--- a/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabGantt.tsx
@@ -84,373 +84,390 @@ function FormTabGantt(props: FormEditProps) {
         <Form>
           <FormContainer size="sm">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <Card className="mt-4">
-                <h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5>
-                <FormItem
-                  label={translate('::App.Listform.ListformField.KeyFieldName')}
-                  invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr}
-                  errorMessage={errors.ganttOptionDto?.keyExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.keyExpr"
-                    placeholder={translate(
-                      '::App.Listform.ListformField.KeyFieldName',
-                    )}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.keyExpr,
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.BasicSettings')}
+              >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div>
+                    <FormItem
+                      label={translate('::App.Listform.ListformField.KeyFieldName')}
+                      invalid={errors.ganttOptionDto?.keyExpr && touched.ganttOptionDto?.keyExpr}
+                      errorMessage={errors.ganttOptionDto?.keyExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.keyExpr"
+                        placeholder={translate('::App.Listform.ListformField.KeyFieldName')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.keyExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.ParentIdExpr')}
-                  invalid={
-                    errors.ganttOptionDto?.parentIdExpr && touched.ganttOptionDto?.parentIdExpr
-                  }
-                  errorMessage={errors.ganttOptionDto?.parentIdExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.parentIdExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.ParentIdExpr')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.parentIdExpr,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.ParentIdExpr')}
+                      invalid={
+                        errors.ganttOptionDto?.parentIdExpr && touched.ganttOptionDto?.parentIdExpr
+                      }
+                      errorMessage={errors.ganttOptionDto?.parentIdExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.parentIdExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.ParentIdExpr')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.parentIdExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      </Field>
+                    </FormItem>
+
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.HasItemsExpr')}
+                      invalid={
+                        errors.ganttOptionDto?.hasItemsExpr && touched.ganttOptionDto?.hasItemsExpr
+                      }
+                      errorMessage={errors.ganttOptionDto?.hasItemsExpr}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="ganttOptionDto.hasItemsExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.HasItemsExpr')}
+                        component={Input}
                       />
-                    )}
-                  </Field>
-                </FormItem>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.HasItemsExpr')}
-                  invalid={
-                    errors.ganttOptionDto?.hasItemsExpr && touched.ganttOptionDto?.hasItemsExpr
-                  }
-                  errorMessage={errors.ganttOptionDto?.hasItemsExpr}
-                >
-                  <Field
-                    type="text"
-                    autoComplete="off"
-                    name="ganttOptionDto.hasItemsExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.HasItemsExpr')}
-                    component={Input}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.RootValue')}
+                      invalid={
+                        !!(errors.ganttOptionDto?.rootValue && touched.ganttOptionDto?.rootValue)
+                      }
+                      errorMessage={errors.ganttOptionDto?.rootValue as string}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="ganttOptionDto.rootValue"
+                        placeholder={translate('::ListForms.ListFormEdit.RootValue')}
+                        component={Input}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.RootValue')}
-                  invalid={
-                    !!(errors.ganttOptionDto?.rootValue && touched.ganttOptionDto?.rootValue)
-                  }
-                  errorMessage={errors.ganttOptionDto?.rootValue as string}
-                >
-                  <Field
-                    type="text"
-                    autoComplete="off"
-                    name="ganttOptionDto.rootValue"
-                    placeholder={translate('::ListForms.ListFormEdit.RootValue')}
-                    component={Input}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AutoExpandAll')}
+                      invalid={
+                        errors.ganttOptionDto?.autoExpandAll &&
+                        touched.ganttOptionDto?.autoExpandAll
+                      }
+                      errorMessage={errors.ganttOptionDto?.autoExpandAll}
+                    >
+                      <Field
+                        name="ganttOptionDto.autoExpandAll"
+                        placeholder={translate('::ListForms.ListFormEdit.AutoExpandAll')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AutoExpandAll')}
-                  invalid={
-                    errors.ganttOptionDto?.autoExpandAll && touched.ganttOptionDto?.autoExpandAll
-                  }
-                  errorMessage={errors.ganttOptionDto?.autoExpandAll}
-                >
-                  <Field
-                    name="ganttOptionDto.autoExpandAll"
-                    placeholder={translate('::ListForms.ListFormEdit.AutoExpandAll')}
-                    component={Checkbox}
-                  />
-                </FormItem>
-
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.RecursiveSelection')}
-                  invalid={
-                    errors.ganttOptionDto?.recursiveSelection &&
-                    touched.ganttOptionDto?.recursiveSelection
-                  }
-                  errorMessage={errors.ganttOptionDto?.recursiveSelection}
-                >
-                  <Field
-                    name="ganttOptionDto.recursiveSelection"
-                    placeholder={translate('::ListForms.ListFormEdit.RecursiveSelection')}
-                    component={Checkbox}
-                  />
-                </FormItem>
-
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.ScaleType')}
-                  invalid={errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType}
-                  errorMessage={errors.ganttOptionDto?.scaleType}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.scaleType"
-                    placeholder={translate('::ListForms.ListFormEdit.ScaleType')}
-                  >
-                    {({ field, form }: FieldProps<GanttScaleType>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={gantScaleOptions}
-                        value={gantScaleOptions?.filter(
-                          (option) => option.value === values.ganttOptionDto.scaleType,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.RecursiveSelection')}
+                      invalid={
+                        errors.ganttOptionDto?.recursiveSelection &&
+                        touched.ganttOptionDto?.recursiveSelection
+                      }
+                      errorMessage={errors.ganttOptionDto?.recursiveSelection}
+                    >
+                      <Field
+                        name="ganttOptionDto.recursiveSelection"
+                        placeholder={translate('::ListForms.ListFormEdit.RecursiveSelection')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
+                  </div>
+                  <div>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.ScaleType')}
+                      invalid={
+                        errors.ganttOptionDto?.scaleType && touched.ganttOptionDto?.scaleType
+                      }
+                      errorMessage={errors.ganttOptionDto?.scaleType}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.scaleType"
+                        placeholder={translate('::ListForms.ListFormEdit.ScaleType')}
+                      >
+                        {({ field, form }: FieldProps<GanttScaleType>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={gantScaleOptions}
+                            value={gantScaleOptions?.filter(
+                              (option) => option.value === values.ganttOptionDto.scaleType,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.TitleExpr')}
-                  invalid={errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr}
-                  errorMessage={errors.ganttOptionDto?.titleExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.titleExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.TitleExpr')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.titleExpr,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.TitleExpr')}
+                      invalid={
+                        errors.ganttOptionDto?.titleExpr && touched.ganttOptionDto?.titleExpr
+                      }
+                      errorMessage={errors.ganttOptionDto?.titleExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.titleExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.TitleExpr')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.titleExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.StartExpr')}
-                  invalid={errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr}
-                  errorMessage={errors.ganttOptionDto?.startExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.startExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.StartExpr')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.startExpr,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.StartExpr')}
+                      invalid={
+                        errors.ganttOptionDto?.startExpr && touched.ganttOptionDto?.startExpr
+                      }
+                      errorMessage={errors.ganttOptionDto?.startExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.startExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.StartExpr')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.startExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.EndExpr')}
-                  invalid={errors.ganttOptionDto?.endExpr && touched.ganttOptionDto?.endExpr}
-                  errorMessage={errors.ganttOptionDto?.endExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.endExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.EndExpr')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.endExpr,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.EndExpr')}
+                      invalid={errors.ganttOptionDto?.endExpr && touched.ganttOptionDto?.endExpr}
+                      errorMessage={errors.ganttOptionDto?.endExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.endExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.EndExpr')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.endExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.ProgressExpr')}
-                  invalid={
-                    errors.ganttOptionDto?.progressExpr && touched.ganttOptionDto?.progressExpr
-                  }
-                  errorMessage={errors.ganttOptionDto?.progressExpr}
-                >
-                  <Field
-                    type="text"
-                    name="ganttOptionDto.progressExpr"
-                    placeholder={translate('::ListForms.ListFormEdit.ProgressExpr')}
-                  >
-                    {({ field, form }: FieldProps<SelectBoxOption>) => (
-                      <Select
-                        field={field}
-                        form={form}
-                        isClearable={true}
-                        options={fieldList}
-                        value={fieldList?.filter(
-                          (option) => option.value === values.ganttOptionDto.progressExpr,
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.ProgressExpr')}
+                      invalid={
+                        errors.ganttOptionDto?.progressExpr && touched.ganttOptionDto?.progressExpr
+                      }
+                      errorMessage={errors.ganttOptionDto?.progressExpr}
+                    >
+                      <Field
+                        type="text"
+                        name="ganttOptionDto.progressExpr"
+                        placeholder={translate('::ListForms.ListFormEdit.ProgressExpr')}
+                      >
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={fieldList}
+                            value={fieldList?.filter(
+                              (option) => option.value === values.ganttOptionDto.progressExpr,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
                         )}
-                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                      />
-                    )}
-                  </Field>
-                </FormItem>
+                      </Field>
+                    </FormItem>
+                  </div>
+                </div>
               </Card>
 
-              <Card className="mt-4">
-                <h5 className="mb-4">
-                  {translate('::ListForms.SchedulerOptions.InteractionSettings')}
-                </h5>
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowEditing')}
-                  invalid={
-                    errors.ganttOptionDto?.allowEditing && touched.ganttOptionDto?.allowEditing
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowEditing}
-                >
-                  <Field
-                    name="ganttOptionDto.allowEditing"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowEditing')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
+              >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowEditing')}
+                      invalid={
+                        errors.ganttOptionDto?.allowEditing && touched.ganttOptionDto?.allowEditing
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowEditing}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowEditing"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowEditing')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
-                  invalid={
-                    errors.ganttOptionDto?.allowTaskAdding &&
-                    touched.ganttOptionDto?.allowTaskAdding
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowTaskAdding}
-                >
-                  <Field
-                    name="ganttOptionDto.allowTaskAdding"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
+                      invalid={
+                        errors.ganttOptionDto?.allowTaskAdding &&
+                        touched.ganttOptionDto?.allowTaskAdding
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowTaskAdding}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowTaskAdding"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowTaskAdding')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
-                  invalid={
-                    errors.ganttOptionDto?.allowTaskUpdating &&
-                    touched.ganttOptionDto?.allowTaskUpdating
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowTaskUpdating}
-                >
-                  <Field
-                    name="ganttOptionDto.allowTaskUpdating"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
+                      invalid={
+                        errors.ganttOptionDto?.allowTaskUpdating &&
+                        touched.ganttOptionDto?.allowTaskUpdating
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowTaskUpdating}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowTaskUpdating"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowTaskUpdating')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
-                  invalid={
-                    errors.ganttOptionDto?.allowTaskDeleting &&
-                    touched.ganttOptionDto?.allowTaskDeleting
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowTaskDeleting}
-                >
-                  <Field
-                    name="ganttOptionDto.allowTaskDeleting"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
+                      invalid={
+                        errors.ganttOptionDto?.allowTaskDeleting &&
+                        touched.ganttOptionDto?.allowTaskDeleting
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowTaskDeleting}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowTaskDeleting"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowTaskDeleting')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
+                  </div>
+                  <div>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
+                      invalid={
+                        errors.ganttOptionDto?.allowDependencyAdding &&
+                        touched.ganttOptionDto?.allowDependencyAdding
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowDependencyAdding}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowDependencyAdding"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
-                  invalid={
-                    errors.ganttOptionDto?.allowDependencyAdding &&
-                    touched.ganttOptionDto?.allowDependencyAdding
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowDependencyAdding}
-                >
-                  <Field
-                    name="ganttOptionDto.allowDependencyAdding"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowDependencyAdding')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
+                      invalid={
+                        errors.ganttOptionDto?.allowDependencyDeleting &&
+                        touched.ganttOptionDto?.allowDependencyDeleting
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowDependencyDeleting}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowDependencyDeleting"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
-                  invalid={
-                    errors.ganttOptionDto?.allowDependencyDeleting &&
-                    touched.ganttOptionDto?.allowDependencyDeleting
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowDependencyDeleting}
-                >
-                  <Field
-                    name="ganttOptionDto.allowDependencyDeleting"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowDependencyDeleting')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
+                      invalid={
+                        errors.ganttOptionDto?.allowResourceAdding &&
+                        touched.ganttOptionDto?.allowResourceAdding
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowResourceAdding}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowResourceAdding"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
 
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
-                  invalid={
-                    errors.ganttOptionDto?.allowResourceAdding &&
-                    touched.ganttOptionDto?.allowResourceAdding
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowResourceAdding}
-                >
-                  <Field
-                    name="ganttOptionDto.allowResourceAdding"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowResourceAdding')}
-                    component={Checkbox}
-                  />
-                </FormItem>
-
-                <FormItem
-                  label={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
-                  invalid={
-                    errors.ganttOptionDto?.allowResourceDeleting &&
-                    touched.ganttOptionDto?.allowResourceDeleting
-                  }
-                  errorMessage={errors.ganttOptionDto?.allowResourceDeleting}
-                >
-                  <Field
-                    name="ganttOptionDto.allowResourceDeleting"
-                    placeholder={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
-                    component={Checkbox}
-                  />
-                </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
+                      invalid={
+                        errors.ganttOptionDto?.allowResourceDeleting &&
+                        touched.ganttOptionDto?.allowResourceDeleting
+                      }
+                      errorMessage={errors.ganttOptionDto?.allowResourceDeleting}
+                    >
+                      <Field
+                        name="ganttOptionDto.allowResourceDeleting"
+                        placeholder={translate('::ListForms.ListFormEdit.AllowResourceDeleting')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
+                  </div>
+                </div>
               </Card>
             </div>
 
diff --git a/ui/src/views/admin/listForm/edit/FormTabPager.tsx b/ui/src/views/admin/listForm/edit/FormTabPager.tsx
index e8f2f75..71ee9cc 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPager.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPager.tsx
@@ -25,7 +25,7 @@ function FormTabPager(props: FormEditProps) {
   }
 
   return (
-    <Container className="grid xl:grid-cols-2">
+    <Container>
       <Formik
         initialValues={listFormValues}
         validationSchema={validationSchema}
@@ -36,195 +36,204 @@ function FormTabPager(props: FormEditProps) {
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
             <FormContainer size="sm">
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PageSize')}
-                invalid={errors.pageSize && touched.pageSize}
-                errorMessage={errors.pageSize}
-              >
-                <Field
-                  type="number"
-                  className="w-20"
-                  autoComplete="off"
-                  name="pageSize"
-                  placeholder={translate('::ListForms.ListFormEdit.PageSize')}
-                  component={Input}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
-                invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
-                errorMessage={errors.pagerOptionDto?.visible}
-              >
-                <Field
-                  name="pagerOptionDto.visible"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
-                invalid={
-                  errors.pagerOptionDto?.showPageSizeSelector &&
-                  touched.pagerOptionDto?.showPageSizeSelector
-                }
-                errorMessage={errors.pagerOptionDto?.showPageSizeSelector}
-              >
-                <Field
-                  name="pagerOptionDto.showPageSizeSelector"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingShowInfo')}
-                invalid={errors.pagerOptionDto?.showInfo && touched.pagerOptionDto?.showInfo}
-                errorMessage={errors.pagerOptionDto?.showInfo}
-              >
-                <Field
-                  name="pagerOptionDto.showInfo"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingShowInfo')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
-                invalid={
-                  errors.pagerOptionDto?.showNavigationButtons &&
-                  touched.pagerOptionDto?.showNavigationButtons
-                }
-                errorMessage={errors.pagerOptionDto?.showNavigationButtons}
-              >
-                <Field
-                  name="pagerOptionDto.showNavigationButtons"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
-                invalid={
-                  errors.pagerOptionDto?.allowedPageSizes &&
-                  touched.pagerOptionDto?.allowedPageSizes
-                }
-                errorMessage={errors.pagerOptionDto?.allowedPageSizes}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.allowedPageSizes"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
-                  component={Input}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingInfoText')}
-                invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
-                errorMessage={errors.pagerOptionDto?.infoText}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.infoText"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingInfoText')}
-                  component={Input}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
-                invalid={errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode}
-                errorMessage={errors.pagerOptionDto?.displayMode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.displayMode"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
-                >
-                  {({ field, form }: FieldProps<PagerDisplayMode>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={pagerDisplayModeOptions}
-                      value={pagerDisplayModeOptions?.filter(
-                        (option) => option.value === values.pagerOptionDto.displayMode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="my-2">
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PageSize')}
+                    invalid={errors.pageSize && touched.pageSize}
+                    errorMessage={errors.pageSize}
+                  >
+                    <Field
+                      type="number"
+                      className="w-20"
+                      autoComplete="off"
+                      name="pageSize"
+                      placeholder={translate('::ListForms.ListFormEdit.PageSize')}
+                      component={Input}
                     />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
-                invalid={
-                  errors.pagerOptionDto?.scrollingMode && touched.pagerOptionDto?.scrollingMode
-                }
-                errorMessage={errors.pagerOptionDto?.scrollingMode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.scrollingMode"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
-                >
-                  {({ field, form }: FieldProps<ScrollMode | 'virtual'>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={pagerScrollingModeOptions}
-                      value={pagerScrollingModeOptions?.filter(
-                        (option) => option.value === values.pagerOptionDto.scrollingMode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
+                    invalid={errors.pagerOptionDto?.visible && touched.pagerOptionDto?.visible}
+                    errorMessage={errors.pagerOptionDto?.visible}
+                  >
+                    <Field
+                      name="pagerOptionDto.visible"
+                      placeholder={translate('::ListForms.ListFormFieldEdit.OptionsVisible')}
+                      component={Checkbox}
                     />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
-                invalid={
-                  errors.pagerOptionDto?.loadPanelEnabled &&
-                  touched.pagerOptionDto?.loadPanelEnabled
-                }
-                errorMessage={errors.pagerOptionDto?.loadPanelEnabled}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.loadPanelEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
-                >
-                  {({ field, form }: FieldProps<boolean | 'auto'>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={loadPanelEnabledOptions}
-                      value={loadPanelEnabledOptions?.filter(
-                        (option) => option.value === values.pagerOptionDto.loadPanelEnabled,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
+                    invalid={
+                      errors.pagerOptionDto?.showPageSizeSelector &&
+                      touched.pagerOptionDto?.showPageSizeSelector
+                    }
+                    errorMessage={errors.pagerOptionDto?.showPageSizeSelector}
+                  >
+                    <Field
+                      name="pagerOptionDto.showPageSizeSelector"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingShowPageSizeSelector')}
+                      component={Checkbox}
                     />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
-                invalid={
-                  errors.pagerOptionDto?.loadPanelText && touched.pagerOptionDto?.loadPanelText
-                }
-                errorMessage={errors.pagerOptionDto?.loadPanelText}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="pagerOptionDto.loadPanelText"
-                  placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
-                  component={Input}
-                />
-              </FormItem>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingShowInfo')}
+                    invalid={errors.pagerOptionDto?.showInfo && touched.pagerOptionDto?.showInfo}
+                    errorMessage={errors.pagerOptionDto?.showInfo}
+                  >
+                    <Field
+                      name="pagerOptionDto.showInfo"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingShowInfo')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingShowNavigationButtons')}
+                    invalid={
+                      errors.pagerOptionDto?.showNavigationButtons &&
+                      touched.pagerOptionDto?.showNavigationButtons
+                    }
+                    errorMessage={errors.pagerOptionDto?.showNavigationButtons}
+                  >
+                    <Field
+                      name="pagerOptionDto.showNavigationButtons"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.PagingShowNavigationButtons',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
+                    invalid={
+                      errors.pagerOptionDto?.allowedPageSizes &&
+                      touched.pagerOptionDto?.allowedPageSizes
+                    }
+                    errorMessage={errors.pagerOptionDto?.allowedPageSizes}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.allowedPageSizes"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingAllowedPageSizes')}
+                      component={Input}
+                    />
+                  </FormItem>
+                </div>
+                <div className="my-2">
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingInfoText')}
+                    invalid={errors.pagerOptionDto?.infoText && touched.pagerOptionDto?.infoText}
+                    errorMessage={errors.pagerOptionDto?.infoText}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.infoText"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingInfoText')}
+                      component={Input}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
+                    invalid={
+                      errors.pagerOptionDto?.displayMode && touched.pagerOptionDto?.displayMode
+                    }
+                    errorMessage={errors.pagerOptionDto?.displayMode}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.displayMode"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingDisplayMode')}
+                    >
+                      {({ field, form }: FieldProps<PagerDisplayMode>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={pagerDisplayModeOptions}
+                          value={pagerDisplayModeOptions?.filter(
+                            (option) => option.value === values.pagerOptionDto.displayMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
+                    invalid={
+                      errors.pagerOptionDto?.scrollingMode && touched.pagerOptionDto?.scrollingMode
+                    }
+                    errorMessage={errors.pagerOptionDto?.scrollingMode}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.scrollingMode"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingScrollingMode')}
+                    >
+                      {({ field, form }: FieldProps<ScrollMode | 'virtual'>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={pagerScrollingModeOptions}
+                          value={pagerScrollingModeOptions?.filter(
+                            (option) => option.value === values.pagerOptionDto.scrollingMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
+                    invalid={
+                      errors.pagerOptionDto?.loadPanelEnabled &&
+                      touched.pagerOptionDto?.loadPanelEnabled
+                    }
+                    errorMessage={errors.pagerOptionDto?.loadPanelEnabled}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.loadPanelEnabled"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelEnabled')}
+                    >
+                      {({ field, form }: FieldProps<boolean | 'auto'>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={loadPanelEnabledOptions}
+                          value={loadPanelEnabledOptions?.filter(
+                            (option) => option.value === values.pagerOptionDto.loadPanelEnabled,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
+                    invalid={
+                      errors.pagerOptionDto?.loadPanelText && touched.pagerOptionDto?.loadPanelText
+                    }
+                    errorMessage={errors.pagerOptionDto?.loadPanelText}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="pagerOptionDto.loadPanelText"
+                      placeholder={translate('::ListForms.ListFormEdit.PagingLoadPanelText')}
+                      component={Input}
+                    />
+                  </FormItem>
+                </div>
+              </div>
 
               <Button block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabPivots.tsx b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
index 2b453b5..744f58d 100644
--- a/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
@@ -20,7 +20,7 @@ function FormTabColumns(props: FormEditProps) {
   }
 
   return (
-    <Container className="grid xl:grid-cols-2">
+    <Container>
       <Formik
         initialValues={listFormValues}
         validationSchema={validationSchema}
@@ -31,147 +31,160 @@ function FormTabColumns(props: FormEditProps) {
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
             <FormContainer size="sm">
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
-                invalid={
-                  errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel
-                }
-                errorMessage={errors.pivotOptionDto?.showFieldPanel}
-              >
-                <Field
-                  name="pivotOptionDto.showFieldPanel"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
-                invalid={
-                  errors.pivotOptionDto?.allowFieldDragging &&
-                  touched.pivotOptionDto?.allowFieldDragging
-                }
-                errorMessage={errors.pivotOptionDto?.allowFieldDragging}
-              >
-                <Field
-                  name="pivotOptionDto.allowFieldDragging"
-                  placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
-                invalid={
-                  errors.pivotOptionDto?.columnChooserEnabled &&
-                  touched.pivotOptionDto?.columnChooserEnabled
-                }
-                errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
-              >
-                <Field
-                  name="pivotOptionDto.columnChooserEnabled"
-                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
-                invalid={
-                  errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
-                }
-                errorMessage={errors.pivotOptionDto?.showRowFields}
-              >
-                <Field
-                  name="pivotOptionDto.showColumnFields"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowRowFields')}
-                invalid={
-                  errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
-                }
-                errorMessage={errors.pivotOptionDto?.showRowFields}
-              >
-                <Field
-                  name="pivotOptionDto.showRowFields"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowDataFields')}
-                invalid={
-                  errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields
-                }
-                errorMessage={errors.pivotOptionDto?.showDataFields}
-              >
-                <Field
-                  name="pivotOptionDto.showDataFields"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
-                invalid={
-                  errors.pivotOptionDto?.showFilterFields &&
-                  touched.pivotOptionDto?.showFilterFields
-                }
-                errorMessage={errors.pivotOptionDto?.showFilterFields}
-              >
-                <Field
-                  name="pivotOptionDto.showFilterFields"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ShowChart')}
-                invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
-                errorMessage={errors.pivotOptionDto?.showChart}
-              >
-                <Field
-                  name="pivotOptionDto.showChart"
-                  placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ChartHeight')}
-                invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight}
-                errorMessage={errors.pivotOptionDto?.chartHeight}
-              >
-                <Field
-                  className="w-20"
-                  type="number"
-                  autoComplete="off"
-                  name="editingOptionDto.chartHeight"
-                  placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
-                  component={Input}
-                />
-              </FormItem>
-              <FormItem
-                label="Type"
-                invalid={
-                  errors.pivotOptionDto?.chartCommonSeriesType &&
-                  touched.pivotOptionDto?.chartCommonSeriesType
-                }
-                errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
-              >
-                <Field type="text" name="pivotOptionDto.chartCommonSeriesType">
-                  {({ field, form }: FieldProps<SelectBoxOption>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      options={chartSeriesTypeOptions}
-                      value={chartSeriesTypeOptions.filter(
-                        (option) => option.value === values.pivotOptionDto.chartCommonSeriesType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
+                    invalid={
+                      errors.pivotOptionDto?.showFieldPanel &&
+                      touched.pivotOptionDto?.showFieldPanel
+                    }
+                    errorMessage={errors.pivotOptionDto?.showFieldPanel}
+                  >
+                    <Field
+                      name="pivotOptionDto.showFieldPanel"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
+                      component={Checkbox}
                     />
-                  )}
-                </Field>
-              </FormItem>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
+                    invalid={
+                      errors.pivotOptionDto?.allowFieldDragging &&
+                      touched.pivotOptionDto?.allowFieldDragging
+                    }
+                    errorMessage={errors.pivotOptionDto?.allowFieldDragging}
+                  >
+                    <Field
+                      name="pivotOptionDto.allowFieldDragging"
+                      placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
+                    invalid={
+                      errors.pivotOptionDto?.columnChooserEnabled &&
+                      touched.pivotOptionDto?.columnChooserEnabled
+                    }
+                    errorMessage={errors.pivotOptionDto?.columnChooserEnabled}
+                  >
+                    <Field
+                      name="pivotOptionDto.columnChooserEnabled"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
+                    invalid={
+                      errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
+                    }
+                    errorMessage={errors.pivotOptionDto?.showRowFields}
+                  >
+                    <Field
+                      name="pivotOptionDto.showColumnFields"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowRowFields')}
+                    invalid={
+                      errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
+                    }
+                    errorMessage={errors.pivotOptionDto?.showRowFields}
+                  >
+                    <Field
+                      name="pivotOptionDto.showRowFields"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                </div>
+                <div>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowDataFields')}
+                    invalid={
+                      errors.pivotOptionDto?.showDataFields &&
+                      touched.pivotOptionDto?.showDataFields
+                    }
+                    errorMessage={errors.pivotOptionDto?.showDataFields}
+                  >
+                    <Field
+                      name="pivotOptionDto.showDataFields"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
+                    invalid={
+                      errors.pivotOptionDto?.showFilterFields &&
+                      touched.pivotOptionDto?.showFilterFields
+                    }
+                    errorMessage={errors.pivotOptionDto?.showFilterFields}
+                  >
+                    <Field
+                      name="pivotOptionDto.showFilterFields"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ShowChart')}
+                    invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
+                    errorMessage={errors.pivotOptionDto?.showChart}
+                  >
+                    <Field
+                      name="pivotOptionDto.showChart"
+                      placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.ChartHeight')}
+                    invalid={
+                      errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight
+                    }
+                    errorMessage={errors.pivotOptionDto?.chartHeight}
+                  >
+                    <Field
+                      className="w-20"
+                      type="number"
+                      autoComplete="off"
+                      name="editingOptionDto.chartHeight"
+                      placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
+                      component={Input}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label="Type"
+                    invalid={
+                      errors.pivotOptionDto?.chartCommonSeriesType &&
+                      touched.pivotOptionDto?.chartCommonSeriesType
+                    }
+                    errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
+                  >
+                    <Field type="text" name="pivotOptionDto.chartCommonSeriesType">
+                      {({ field, form }: FieldProps<SelectBoxOption>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          options={chartSeriesTypeOptions}
+                          value={chartSeriesTypeOptions.filter(
+                            (option) =>
+                              option.value === values.pivotOptionDto.chartCommonSeriesType,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                </div>
+              </div>
 
               <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx b/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
index d595ea7..94c7626 100644
--- a/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabScheduler.tsx
@@ -82,10 +82,11 @@ function FormTabScheduler(props: FormEditProps) {
       {({ touched, errors, isSubmitting, values }) => (
         <Form>
           <FormContainer size="sm">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <Card className="mt-4">
-                <h5 className="mb-4">{translate('::ListForms.SchedulerOptions.BasicSettings')}</h5>
-
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.BasicSettings')}
+              >
                 <FormItem
                   label={translate('::ListForms.SchedulerOptions.TextExpr')}
                   invalid={
@@ -181,9 +182,10 @@ function FormTabScheduler(props: FormEditProps) {
                 </FormItem>
               </Card>
 
-              <Card className="mt-4">
-                <h5 className="mb-4">{translate('::ListForms.SchedulerOptions.ViewSettings')}</h5>
-
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.ViewSettings')}
+              >
                 <FormItem label={translate('::ListForms.SchedulerOptions.DefaultView')}>
                   <Field name="schedulerOptionDto.defaultView">
                     {({ field, form }: FieldProps) => (
@@ -273,11 +275,10 @@ function FormTabScheduler(props: FormEditProps) {
                 </FormItem>
               </Card>
 
-              <Card className="mt-4">
-                <h5 className="mb-4">
-                  {translate('::ListForms.SchedulerOptions.RecurrenceSettings')}
-                </h5>
-
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.RecurrenceSettings')}
+              >
                 <FormItem
                   label={translate('::ListForms.SchedulerOptions.RecurrenceRuleExpr')}
                   invalid={
@@ -329,11 +330,10 @@ function FormTabScheduler(props: FormEditProps) {
                 </FormItem>
               </Card>
 
-              <Card className="mt-4">
-                <h5 className="mb-4">
-                  {translate('::ListForms.SchedulerOptions.InteractionSettings')}
-                </h5>
-
+              <Card
+                className="mt-4"
+                header={translate('::ListForms.SchedulerOptions.InteractionSettings')}
+              >
                 <FormItem label={translate('::ListForms.SchedulerOptions.ShowAllDayPanel')}>
                   <Field name="schedulerOptionDto.showAllDayPanel" component={Checkbox} />
                 </FormItem>
@@ -363,7 +363,6 @@ function FormTabScheduler(props: FormEditProps) {
                 </FormItem>
               </Card>
             </div>
-            
             <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
               {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
             </Button>{' '}
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
index 3b4550a..db452c8 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldEdit.tsx
@@ -25,9 +25,11 @@ function FormFieldEdit({
   listFormCode,
   item,
   onSubmit,
+  fields
 }: {
   listFormCode: string
   item: ColumnFormatEditDto | null
+  fields: ColumnFormatEditDto[]
 } & FormFieldEditProps) {
   const { translate } = useLocalization()
 
@@ -128,6 +130,7 @@ function FormFieldEdit({
               listFormCode={listFormCode}
               initialValues={item}
               onSubmit={onSubmit}
+              fields={fields}
             />
           </TabContent>
           <TabContent value="totalSummary">
@@ -135,6 +138,7 @@ function FormFieldEdit({
               listFormCode={listFormCode}
               initialValues={item}
               onSubmit={onSubmit}
+              fields={fields}
             />
           </TabContent>
           <TabContent value="joinOptions">
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
index 6e25549..a7578e5 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCssOptions.tsx
@@ -63,7 +63,7 @@ function FormFieldTabCssOptions({
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
index 7cbb49e..a225997 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabCustomization.tsx
@@ -70,7 +70,7 @@ function FormFieldTabCustomization({
                 </Field>
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
index 91bbc7c..9fbee93 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
@@ -133,7 +133,7 @@ function FormFieldTabDetails({
               </FormItem>
             </Card>
           </div>
-          <Button block variant="solid" loading={isSubmitting} type="submit">
+          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
             {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
           </Button>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
index ba1ce75..5c79371 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabFiltering.tsx
@@ -84,7 +84,7 @@ function FormFieldTabFiltering({
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
index 944a93b..7ec57f6 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGroupSummary.tsx
@@ -7,6 +7,7 @@ import { bool, object, string } from 'yup'
 import { columnSummaryTypeListOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
 import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import { SelectBoxOption } from '@/types/shared'
 
 const schema = object().shape({
   columnGroupingDto: object()
@@ -25,12 +26,21 @@ function FormFieldTabGroupSummary({
   listFormCode,
   initialValues,
   onSubmit,
+  fields,
 }: {
   listFormCode: string
   initialValues: ColumnFormatEditDto
+  fields: ColumnFormatEditDto[]
 } & FormFieldEditProps) {
   const { translate } = useLocalization()
 
+  const fieldList: SelectBoxOption[] = fields.length
+    ? fields.map((field) => ({
+        value: field.fieldName,
+        label: `${field.fieldName}`,
+      }))
+    : []
+
   return (
     <Container className="grid xl:grid-cols-2">
       <Formik
@@ -121,13 +131,25 @@ function FormFieldTabGroupSummary({
               >
                 <Field
                   type="text"
-                  autoComplete="off"
+                  autoFocus={true}
                   name="columnGroupSummaryDto.showInColumn"
                   placeholder={translate(
                     '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
                   )}
-                  component={Input}
-                />
+                >
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={fieldList}
+                      value={fieldList.filter(
+                        (option) => option.value === values.columnGroupSummaryDto?.showInColumn,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
               </FormItem>
 
               <FormItem
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
index 9e8b473..95bce8f 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabGrouping.tsx
@@ -61,7 +61,7 @@ function FormFieldTabGrouping({
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
index 5498832..ea51034 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabHeadering.tsx
@@ -65,7 +65,7 @@ function FormFieldTabHeadering({
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button  className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
index 082a51f..ccd822e 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabJoinOptions.tsx
@@ -234,7 +234,7 @@ function FormFieldTabJoinOptions({
               </FormItem>
             </Card>
           </div>
-          <Button block variant="solid" loading={isSubmitting} type="submit">
+          <Button  className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
             {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
           </Button>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
index f72ec57..d2bda3a 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabLookup.tsx
@@ -458,7 +458,7 @@ function FormFieldTabLookup({
               </FormItem>
             </Card>
           </div>
-          <Button block variant="solid" loading={isSubmitting} type="submit">
+          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
             {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
           </Button>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
index 90571b7..efe715c 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabOptions.tsx
@@ -113,7 +113,7 @@ function FormFieldTabOptions({
             </Card>
           </div>
 
-          <Button block variant="solid" loading={isSubmitting} type="submit">
+          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
             {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
           </Button>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
index 22cd13a..f62a680 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPermissions.tsx
@@ -159,7 +159,7 @@ function FormFieldTabPermissions({
                 <Field name="permissionDto.i" component={Checkbox} />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
index 3013065..e27f66c 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabPivotSetting.tsx
@@ -214,7 +214,7 @@ function FormFieldTabPivotSetting({
               </FormItem>
             </Card>
           </div>
-          <Button block variant="solid" loading={isSubmitting} type="submit">
+          <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
             {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
           </Button>
         </Form>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
index 0ebd6e7..dff53e7 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabTotalSummary.tsx
@@ -7,6 +7,8 @@ import { bool, object, string } from 'yup'
 import { columnSummaryTypeListOptions } from '../options'
 import { FormFieldEditProps } from './FormFields'
 import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
+import { SelectBoxOption } from '@/types/shared'
+import { useState } from 'react'
 
 const schema = object().shape({
   columnTotalSummaryDto: object()
@@ -25,12 +27,21 @@ function FormFieldTabTotalSummary({
   listFormCode,
   initialValues,
   onSubmit,
+  fields,
 }: {
   listFormCode: string
   initialValues: ColumnFormatEditDto
+  fields: ColumnFormatEditDto[]
 } & FormFieldEditProps) {
   const { translate } = useLocalization()
 
+  const fieldList: SelectBoxOption[] = fields.length
+    ? fields.map((field) => ({
+        value: field.fieldName,
+        label: `${field.fieldName}`,
+      }))
+    : []
+
   return (
     <Container className="grid xl:grid-cols-2">
       <Formik
@@ -66,12 +77,16 @@ function FormFieldTabTotalSummary({
                 </Field>
               </FormItem>
 
-              <FormItem label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}>
+              <FormItem
+                label={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
+              >
                 <Field
                   type="text"
                   autoComplete="off"
                   name="columnTotalSummaryDto.valueFormat"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat')}
+                  placeholder={translate(
+                    '::ListForms.ListFormFieldEdit.GroupingSummaryValueFormat',
+                  )}
                 >
                   {({ field, form }: FieldProps<any>) => (
                     <Select
@@ -100,7 +115,9 @@ function FormFieldTabTotalSummary({
                   type="text"
                   autoComplete="off"
                   name="columnTotalSummaryDto.displayFormat"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat')}
+                  placeholder={translate(
+                    '::ListForms.ListFormFieldEdit.GroupingSummaryDisplayFormat',
+                  )}
                   component={Input}
                 />
               </FormItem>
@@ -115,11 +132,25 @@ function FormFieldTabTotalSummary({
               >
                 <Field
                   type="text"
-                  autoComplete="off"
+                  autoFocus={true}
                   name="columnTotalSummaryDto.showInColumn"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn')}
-                  component={Input}
-                />
+                  placeholder={translate(
+                    '::ListForms.ListFormFieldEdit.GroupingSummaryShowInColumn',
+                  )}
+                >
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={fieldList}
+                      value={fieldList.filter(
+                        (option) => option.value === values.columnTotalSummaryDto?.showInColumn,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
               </FormItem>
 
               <FormItem
@@ -139,12 +170,14 @@ function FormFieldTabTotalSummary({
               >
                 <Field
                   name="columnTotalSummaryDto.alignByColumn"
-                  placeholder={translate('::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn')}
+                  placeholder={translate(
+                    '::ListForms.ListFormFieldEdit.GroupingSummaryAlignByColumn',
+                  )}
                   component={Checkbox}
                 />
               </FormItem>
 
-              <Button block variant="solid" loading={isSubmitting} type="submit">
+              <Button className="mt-1" block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
             </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
index 5666f49..5089c56 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
@@ -355,7 +355,7 @@ function FormFieldTabValidationRules({
                   <Field name="trim" placeholder="Trim" component={Checkbox} />
                 </FormItem>
 
-                <Button block variant="solid" loading={isLoading} type="submit">
+                <Button className="mt-1" block variant="solid" loading={isLoading} type="submit">
                   {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
                 </Button>
               </FormContainer>
diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
index f754d1b..8b731cd 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
@@ -505,7 +505,7 @@ function FormFields({
               </Table>
             </div>
             <div className="2xl:col-span-3 lg:col-span-3 xl:col-span-2">
-              <FormFieldEdit listFormCode={listFormCode} item={row} onSubmit={onSubmit} />
+              <FormFieldEdit listFormCode={listFormCode} item={row} onSubmit={onSubmit} fields={fields} />
             </div>
           </div>
         </AdaptableCard>