diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 392059e066..b5897b8d8f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -740,57 +740,64 @@ useEventListener(
         </div>
       </div>
 
-      <div v-else class="nc-form-wrapper h-full w-full flex" data-testid="nc-form-wrapper">
-        <div v-if="isLoadingFormView" class="flex-1"></div>
-        <div
-          v-else-if="formViewData"
-          class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
-          :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
-        >
-          <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
-            <GeneralImageCropper
-              v-if="isEditable"
-              v-model:show-cropper="showCropper"
-              :image-config="imageCropperData.imageConfig"
-              :cropper-config="imageCropperData.cropperConfig"
-              :upload-config="imageCropperData.uploadConfig"
-              @submit="handleOnUploadImage"
-            ></GeneralImageCropper>
-            <!-- cover image -->
-            <div class="group relative max-w-[max(33%,688px)] mx-auto">
-              <GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
-              <div class="absolute bottom-0 right-0 hidden group-hover:block">
-                <div class="flex items-center space-x-1 m-2">
-                  <NcTooltip :disabled="isEeUI">
-                    <template #title>
-                      {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                    </template>
-
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      class="nc-form-upload-banner-btn"
-                      data-testid="nc-form-upload-banner-btn"
-                      :disabled="!isEeUI"
-                      @click="openUploadImage(true)"
-                    >
-                      <div class="flex gap-2 items-center">
-                        <component :is="iconMap.upload" class="w-4 h-4" />
-                        <span>
-                          {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
-                          {{ $t('general.banner') }}
-                        </span>
-                      </div>
-                    </NcButton>
-                  </NcTooltip>
-                  <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
-                    <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
-                    <NcButton
-                      type="secondary"
-                      size="small"
-                      class="nc-form-delete-banner-btn"
-                      data-testid="nc-form-delete-banner-btn"
-                      @click="
+      <div v-else class="nc-form-wrapper h-full w-full flex relative" data-testid="nc-form-wrapper">
+        <div v-if="isLoadingFormView" class="flex-1 flex items-center justify-center text-center h-full">
+          <div>
+            <GeneralLoader size="xlarge" />
+            <div class="mt-2">
+              {{ $t('general.loading') }}
+            </div>
+          </div>
+        </div>
+        <template v-else-if="formViewData">
+          <div
+            class="flex-1 h-full overflow-auto nc-form-scrollbar p-6"
+            :style="{background:(formViewData?.meta as Record<string,any>).background_color || '#F9F9FA'}"
+          >
+            <div class="min-w-[616px] overflow-x-auto nc-form-scrollbar">
+              <GeneralImageCropper
+                v-if="isEditable"
+                v-model:show-cropper="showCropper"
+                :image-config="imageCropperData.imageConfig"
+                :cropper-config="imageCropperData.cropperConfig"
+                :upload-config="imageCropperData.uploadConfig"
+                @submit="handleOnUploadImage"
+              ></GeneralImageCropper>
+              <!-- cover image -->
+              <div class="group relative max-w-[max(33%,688px)] mx-auto">
+                <GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
+                <div class="absolute bottom-0 right-0 hidden group-hover:block">
+                  <div class="flex items-center space-x-1 m-2">
+                    <NcTooltip :disabled="isEeUI">
+                      <template #title>
+                        {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                      </template>
+
+                      <NcButton
+                        type="secondary"
+                        size="small"
+                        class="nc-form-upload-banner-btn"
+                        data-testid="nc-form-upload-banner-btn"
+                        :disabled="!isEeUI"
+                        @click="openUploadImage(true)"
+                      >
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.upload" class="w-4 h-4" />
+                          <span>
+                            {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
+                            {{ $t('general.banner') }}
+                          </span>
+                        </div>
+                      </NcButton>
+                    </NcTooltip>
+                    <NcTooltip v-if="isEeUI && formViewData.banner_image_url">
+                      <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
+                      <NcButton
+                        type="secondary"
+                        size="small"
+                        class="nc-form-delete-banner-btn"
+                        data-testid="nc-form-delete-banner-btn"
+                        @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.banner_image_url = ''
@@ -798,68 +805,68 @@ useEventListener(
                                 }
                               }
                             "
-                    >
-                      <div class="flex gap-2 items-center">
-                        <component :is="iconMap.delete" class="w-4 h-4" />
-                      </div>
-                    </NcButton>
-                  </NcTooltip>
+                      >
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.delete" class="w-4 h-4" />
+                        </div>
+                      </NcButton>
+                    </NcTooltip>
+                  </div>
                 </div>
               </div>
-            </div>
-            <a-card
-              class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
-              :body-style="{
-                margin: '0 auto',
-                padding: '0px !important',
-              }"
-            >
-              <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-                <!-- form header -->
-                <div class="flex flex-col px-4 lg:px-6">
-                  <!-- Form logo  -->
-                  <div class="mb-4">
-                    <div
-                      class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px max-w-189px overflow-hidden"
-                      :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100)' : 'bg-gray-100'"
-                      style="transition: all 0.3s ease-in"
-                    >
-                      <LazyCellAttachmentImage
-                        v-if="formViewData.logo_url"
-                        :srcs="getPossibleAttachmentSrc(parseProp(formViewData.logo_url))"
-                        class="nc-form-logo !object-contain object-left max-h-full max-w-full !m-0 rounded-xl"
-                      />
+              <a-card
+                class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 !max-w-[max(33%,688px)] !mx-auto"
+                :body-style="{
+                  margin: '0 auto',
+                  padding: '0px !important',
+                }"
+              >
+                <a-form ref="formRef" :model="formState" class="nc-form" no-style>
+                  <!-- form header -->
+                  <div class="flex flex-col px-4 lg:px-6">
+                    <!-- Form logo  -->
+                    <div class="mb-4">
                       <div
-                        class="items-center space-x-1 flex-nowrap m-3"
-                        :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
+                        class="nc-form-logo-wrapper mx-6 group relative rounded-xl inline-block h-56px max-w-189px overflow-hidden"
+                        :class="formViewData.logo_url ? 'hover:(w-full bg-gray-100)' : 'bg-gray-100'"
+                        style="transition: all 0.3s ease-in"
                       >
-                        <NcTooltip :disabled="isEeUI">
-                          <template #title>
-                            {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                          </template>
-                          <NcButton
-                            v-if="isEditable"
-                            type="secondary"
-                            size="small"
-                            class="nc-form-upload-logo-btn"
-                            data-testid="nc-form-upload-log-btn"
-                            :disabled="!isEeUI"
-                            @click="openUploadImage(false)"
-                          >
-                            <div class="flex gap-2 items-center">
-                              <component :is="iconMap.upload" class="w-4 h-4" />
-                              <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
-                            </div>
-                          </NcButton>
-                        </NcTooltip>
-                        <NcTooltip v-if="isEeUI && formViewData.logo_url">
-                          <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
-                          <NcButton
-                            type="secondary"
-                            size="small"
-                            class="nc-form-delete-logo-btn"
-                            data-testid="nc-form-delete-logo-btn"
-                            @click="
+                        <LazyCellAttachmentImage
+                          v-if="formViewData.logo_url"
+                          :srcs="getPossibleAttachmentSrc(parseProp(formViewData.logo_url))"
+                          class="nc-form-logo !object-contain object-left max-h-full max-w-full !m-0 rounded-xl"
+                        />
+                        <div
+                          class="items-center space-x-1 flex-nowrap m-3"
+                          :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
+                        >
+                          <NcTooltip :disabled="isEeUI">
+                            <template #title>
+                              {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                            </template>
+                            <NcButton
+                              v-if="isEditable"
+                              type="secondary"
+                              size="small"
+                              class="nc-form-upload-logo-btn"
+                              data-testid="nc-form-upload-log-btn"
+                              :disabled="!isEeUI"
+                              @click="openUploadImage(false)"
+                            >
+                              <div class="flex gap-2 items-center">
+                                <component :is="iconMap.upload" class="w-4 h-4" />
+                                <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
+                              </div>
+                            </NcButton>
+                          </NcTooltip>
+                          <NcTooltip v-if="isEeUI && formViewData.logo_url">
+                            <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
+                            <NcButton
+                              type="secondary"
+                              size="small"
+                              class="nc-form-delete-logo-btn"
+                              data-testid="nc-form-delete-logo-btn"
+                              @click="
                               () => {
                                 if (isEditable) {
                                   formViewData!.logo_url = ''
@@ -867,632 +874,638 @@ useEventListener(
                                 }
                               }
                             "
-                          >
-                            <div class="flex gap-2 items-center">
-                              <component :is="iconMap.delete" class="w-4 h-4" />
-                            </div>
-                          </NcButton>
-                        </NcTooltip>
+                            >
+                              <div class="flex gap-2 items-center">
+                                <component :is="iconMap.delete" class="w-4 h-4" />
+                              </div>
+                            </NcButton>
+                          </NcTooltip>
+                        </div>
                       </div>
                     </div>
-                  </div>
-
-                  <!-- form title -->
-                  <div
-                    class="border-transparent px-4 lg:px-6"
-                    :class="[
-                      {
-                        'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                      },
-                      {
-                        'mb-4 py-0 lg:py-0': !isEditable,
-                      },
-                      {
-                        'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
-                      },
-                      {
-                        'bg-gray-50': activeRow === NcForm.heading && isEditable,
-                      },
-                      {
-                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                      },
-                    ]"
-                    @click.stop="onFormItemClick({ title: NcForm.heading })"
-                  >
-                    <a-form-item v-if="isEditable" class="!my-0">
-                      <a-textarea
-                        v-model:value="formViewData.heading"
-                        class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
-                        :style="{
-                          'borderRightWidth': '0px !important',
-                          'height': '70px',
-                          'max-height': '250px',
-                          'resize': 'vertical',
-                        }"
-                        auto-size
-                        size="large"
-                        hide-details
-                        :disabled="isLocked"
-                        placeholder="Form Title"
-                        :bordered="false"
-                        :data-testid="NcForm.heading"
-                        :data-title="NcForm.heading"
-                        @blur="updateView"
-                        @keydown.enter="updateView"
-                      />
-                    </a-form-item>
-
-                    <div v-else class="font-bold text-2xl text-gray-900">
-                      {{ formViewData.heading }}
-                    </div>
-                  </div>
-
-                  <!-- form description  -->
-                  <div
-                    class="border-transparent px-4 lg:px-6"
-                    :class="[
-                      {
-                        'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
-                      },
-                      {
-                        'mb-4 py-0 lg:py-0': !isEditable,
-                      },
-                      {
-                        'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
-                      },
-                      {
-                        'bg-gray-50': activeRow === NcForm.subheading && isEditable,
-                      },
-                      {
-                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
-                      },
-                    ]"
-                    @click.stop="onFormItemClick({ title: NcForm.subheading })"
-                  >
-                    <LazyCellRichText
-                      v-if="isEditable && !isLocked"
-                      v-model:value="formViewData.subheading"
-                      :placeholder="$t('msg.info.formDesc')"
-                      class="nc-form-focus-element font-medium text-base !text-gray-500"
-                      is-form-field
-                      :autofocus="activeRow === NcForm.subheading"
-                      :data-testid="NcForm.subheading"
-                      :data-title="NcForm.subheading"
-                      @update:value="updateView"
-                    />
-                    <LazyCellRichText
-                      v-else-if="formViewData.subheading"
-                      :value="formViewData.subheading"
-                      class="font-medium text-base !text-gray-500"
-                      is-form-field
-                      read-only
-                      sync-value-change
-                    />
-                  </div>
-                </div>
 
-                <Draggable
-                  ref="draggableRef"
-                  :list="visibleColumns"
-                  item-key="fk_column_id"
-                  draggable=".item"
-                  handle=".nc-form-field-drag-handler"
-                  group="form-inputs"
-                  ghost-class="nc-form-field-ghost"
-                  class="h-full px-4 lg:px-6"
-                  :move="onMoveCallback"
-                  :disabled="isLocked || !isEditable"
-                  @change="onMove($event, true)"
-                >
-                  <template #item="{ element }">
+                    <!-- form title -->
                     <div
-                      class="nc-editable nc-form-focus-element item relative bg-white"
+                      class="border-transparent px-4 lg:px-6"
                       :class="[
-                        `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                         {
-                          'rounded-2xl overflow-hidden border-2 my-1': isEditable,
+                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
                         },
                         {
-                          'p-4 lg:p-6 border-transparent my-0': !isEditable,
+                          'mb-4 py-0 lg:py-0': !isEditable,
                         },
                         {
-                          'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 cursor-pointer':
-                            activeRow !== element.title && isEditable,
+                          'hover:bg-gray-50': activeRow !== NcForm.heading && isEditable,
                         },
-
                         {
-                          'border-brand-500': activeRow === element.title,
+                          'bg-gray-50': activeRow === NcForm.heading && isEditable,
                         },
                         {
                           '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                         },
                       ]"
-                      :data-title="element.title"
-                      data-testid="nc-form-fields"
-                      @click.stop="onFormItemClick(element)"
+                      @click.stop="onFormItemClick({ title: NcForm.heading })"
                     >
-                      <div v-if="activeRow !== element.title">
-                        <div class="text-sm font-semibold text-gray-800">
-                          <span data-testid="nc-form-input-label">
-                            {{ element.label || element.title }}
-                          </span>
-                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                            >&nbsp;*</span
-                          >
-                        </div>
-
-                        <LazyCellRichText
-                          v-if="element.description"
-                          :value="element.description"
-                          is-form-field
-                          read-only
-                          sync-value-change
-                          class="nc-form-help-text text-gray-500 text-sm mt-2"
-                          data-testid="nc-form-help-text"
-                          @update:value="updateColMeta(element)"
+                      <a-form-item v-if="isEditable" class="!my-0">
+                        <a-textarea
+                          v-model:value="formViewData.heading"
+                          class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
+                          :style="{
+                            'borderRightWidth': '0px !important',
+                            'height': '70px',
+                            'max-height': '250px',
+                            'resize': 'vertical',
+                          }"
+                          auto-size
+                          size="large"
+                          hide-details
+                          :disabled="isLocked"
+                          placeholder="Form Title"
+                          :bordered="false"
+                          :data-testid="NcForm.heading"
+                          :data-title="NcForm.heading"
+                          @blur="updateView"
+                          @keydown.enter="updateView"
                         />
+                      </a-form-item>
+
+                      <div v-else class="font-bold text-2xl text-gray-900">
+                        {{ formViewData.heading }}
                       </div>
+                    </div>
 
-                      <!-- Field Header  -->
-                      <div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50">
-                        <component
-                          :is="iconMap.drag"
-                          class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
-                        />
-                        <div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]">
-                          <SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
-                          <SmartsheetHeaderCellIcon v-else :column-meta="element" />
+                    <!-- form description  -->
+                    <div
+                      class="border-transparent px-4 lg:px-6"
+                      :class="[
+                        {
+                          'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                        },
+                        {
+                          'mb-4 py-0 lg:py-0': !isEditable,
+                        },
+                        {
+                          'hover:bg-gray-50': activeRow !== NcForm.subheading && isEditable,
+                        },
+                        {
+                          'bg-gray-50': activeRow === NcForm.subheading && isEditable,
+                        },
+                        {
+                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                        },
+                      ]"
+                      @click.stop="onFormItemClick({ title: NcForm.subheading })"
+                    >
+                      <LazyCellRichText
+                        v-if="isEditable && !isLocked"
+                        v-model:value="formViewData.subheading"
+                        :placeholder="$t('msg.info.formDesc')"
+                        class="nc-form-focus-element font-medium text-base !text-gray-500"
+                        is-form-field
+                        :autofocus="activeRow === NcForm.subheading"
+                        :data-testid="NcForm.subheading"
+                        :data-title="NcForm.subheading"
+                        @update:value="updateView"
+                      />
+                      <LazyCellRichText
+                        v-else-if="formViewData.subheading"
+                        :value="formViewData.subheading"
+                        class="font-medium text-base !text-gray-500"
+                        is-form-field
+                        read-only
+                        sync-value-change
+                      />
+                    </div>
+                  </div>
 
-                          <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
-                            <template #title> {{ element.title }} </template>
+                  <Draggable
+                    ref="draggableRef"
+                    :list="visibleColumns"
+                    item-key="fk_column_id"
+                    draggable=".item"
+                    handle=".nc-form-field-drag-handler"
+                    group="form-inputs"
+                    ghost-class="nc-form-field-ghost"
+                    class="h-full px-4 lg:px-6"
+                    :move="onMoveCallback"
+                    :disabled="isLocked || !isEditable"
+                    @change="onMove($event, true)"
+                  >
+                    <template #item="{ element }">
+                      <div
+                        class="nc-editable nc-form-focus-element item relative bg-white"
+                        :class="[
+                          `nc-form-drag-${element.title.replaceAll(' ', '')}`,
+                          {
+                            'rounded-2xl overflow-hidden border-2 my-1': isEditable,
+                          },
+                          {
+                            'p-4 lg:p-6 border-transparent my-0': !isEditable,
+                          },
+                          {
+                            'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6 cursor-pointer':
+                              activeRow !== element.title && isEditable,
+                          },
+
+                          {
+                            'border-brand-500': activeRow === element.title,
+                          },
+                          {
+                            '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                          },
+                        ]"
+                        :data-title="element.title"
+                        data-testid="nc-form-fields"
+                        @click.stop="onFormItemClick(element)"
+                      >
+                        <div v-if="activeRow !== element.title">
+                          <div class="text-sm font-semibold text-gray-800">
                             <span data-testid="nc-form-input-label">
-                              {{ element.title }}
+                              {{ element.label || element.title }}
                             </span>
-                          </NcTooltip>
-                          <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
-                            >&nbsp;*</span
-                          >
-                        </div>
-                        <a-form-item class="!my-0">
-                          <div class="flex gap-2 items-center">
-                            <span
-                              class="nc-form-input-required text-gray-500 mr-2"
-                              data-testid="nc-form-input-required"
-                              @click.stop="
-                                () => {
-                                  element.required = !element.required
-                                  updateColMeta(element)
-                                }
-                              "
+                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                              >&nbsp;*</span
                             >
-                              {{ $t('general.required') }}
-                            </span>
-                            <a-switch
-                              v-model:checked="element.required"
-                              v-e="['a:form-view:field:mark-required']"
-                              size="small"
-                              @change="updateColMeta(element)"
-                            />
                           </div>
-                        </a-form-item>
-                      </div>
 
-                      <!-- Field Body  -->
-
-                      <div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
-                        <template v-if="activeRow === element.title">
-                          <a-form-item class="my-0 !mb-2">
-                            <a-textarea
-                              ref="focusLabel"
-                              v-model:value="element.label"
-                              :rows="1"
-                              auto-size
-                              hide-details
-                              class="form-meta-input nc-form-input-label"
-                              data-testid="nc-form-input-label"
-                              :placeholder="$t('msg.info.formInput')"
-                              @keydown.enter.prevent
-                              @change="updateColMeta(element)"
-                            />
-                          </a-form-item>
+                          <LazyCellRichText
+                            v-if="element.description"
+                            :value="element.description"
+                            is-form-field
+                            read-only
+                            sync-value-change
+                            class="nc-form-help-text text-gray-500 text-sm mt-2"
+                            data-testid="nc-form-help-text"
+                            @update:value="updateColMeta(element)"
+                          />
+                        </div>
 
-                          <a-form-item class="my-0 !mb-3">
-                            <LazyCellRichText
-                              v-model:value="element.description"
-                              :placeholder="$t('msg.info.formHelpText')"
-                              class="form-meta-input nc-form-input-help-text"
-                              is-form-field
-                              data-testid="nc-form-input-help-text"
-                              @update:value="updateColMeta(element)"
-                          /></a-form-item>
-
-                          <a-form-item
-                            v-if="columnSupportsScanning(element.uidt)"
-                            class="!my-0 !mb-3 nc-form-input-enable-scanner-form-item"
-                          >
-                            <div class="flex space-x-4 items-center">
-                              <a-switch
-                                v-model:checked="element.enable_scanner"
-                                v-e="['a:form-view:field:mark-enable-scanner']"
-                                size="small"
-                                @change="updateColMeta(element)"
-                              />
+                        <!-- Field Header  -->
+                        <div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50">
+                          <component
+                            :is="iconMap.drag"
+                            class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
+                          />
+                          <div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]">
+                            <SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
+                            <SmartsheetHeaderCellIcon v-else :column-meta="element" />
+
+                            <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
+                              <template #title> {{ element.title }} </template>
+                              <span data-testid="nc-form-input-label">
+                                {{ element.title }}
+                              </span>
+                            </NcTooltip>
+                            <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
+                              >&nbsp;*</span
+                            >
+                          </div>
+                          <a-form-item class="!my-0">
+                            <div class="flex gap-2 items-center">
                               <span
-                                class="text-gray-500 nc-form-input-enable-scanner"
-                                data-testid="nc-form-input-enable-scanner"
-                                @click="
+                                class="nc-form-input-required text-gray-500 mr-2"
+                                data-testid="nc-form-input-required"
+                                @click.stop="
                                   () => {
-                                    element.general.enable_scanner = !element.general.enable_scanner
+                                    element.required = !element.required
                                     updateColMeta(element)
                                   }
                                 "
                               >
-                                {{ $t('general.enableScanner') }}
+                                {{ $t('general.required') }}
                               </span>
+                              <a-switch
+                                v-model:checked="element.required"
+                                v-e="['a:form-view:field:mark-required']"
+                                size="small"
+                                @change="updateColMeta(element)"
+                              />
                             </div>
                           </a-form-item>
-                        </template>
-                        <div :class="activeRow !== element.title ? 'mt-2' : ''">
-                          <a-form-item
-                            :name="element.title"
-                            class="!my-0 nc-input-required-error nc-form-input-item"
-                            :rules="[
-                              {
-                                required: isRequired(element, element.required),
-                                message: `${$t('msg.error.fieldRequired', { value: 'This field' })}`,
-                              },
-                            ]"
-                          >
-                            <LazySmartsheetDivDataCell
-                              class="relative"
-                              @click.stop="
-                                () => {
-                                  isTabPressed = false
-                                  if (activeRow !== element.title) {
-                                    activeRow = ''
+                        </div>
+
+                        <!-- Field Body  -->
+
+                        <div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
+                          <template v-if="activeRow === element.title">
+                            <a-form-item class="my-0 !mb-2">
+                              <a-textarea
+                                ref="focusLabel"
+                                v-model:value="element.label"
+                                :rows="1"
+                                auto-size
+                                hide-details
+                                class="form-meta-input nc-form-input-label"
+                                data-testid="nc-form-input-label"
+                                :placeholder="$t('msg.info.formInput')"
+                                @keydown.enter.prevent
+                                @change="updateColMeta(element)"
+                              />
+                            </a-form-item>
+
+                            <a-form-item class="my-0 !mb-3">
+                              <LazyCellRichText
+                                v-model:value="element.description"
+                                :placeholder="$t('msg.info.formHelpText')"
+                                class="form-meta-input nc-form-input-help-text"
+                                is-form-field
+                                data-testid="nc-form-input-help-text"
+                                @update:value="updateColMeta(element)"
+                            /></a-form-item>
+
+                            <a-form-item
+                              v-if="columnSupportsScanning(element.uidt)"
+                              class="!my-0 !mb-3 nc-form-input-enable-scanner-form-item"
+                            >
+                              <div class="flex space-x-4 items-center">
+                                <a-switch
+                                  v-model:checked="element.enable_scanner"
+                                  v-e="['a:form-view:field:mark-enable-scanner']"
+                                  size="small"
+                                  @change="updateColMeta(element)"
+                                />
+                                <span
+                                  class="text-gray-500 nc-form-input-enable-scanner"
+                                  data-testid="nc-form-input-enable-scanner"
+                                  @click="
+                                    () => {
+                                      element.general.enable_scanner = !element.general.enable_scanner
+                                      updateColMeta(element)
+                                    }
+                                  "
+                                >
+                                  {{ $t('general.enableScanner') }}
+                                </span>
+                              </div>
+                            </a-form-item>
+                          </template>
+                          <div :class="activeRow !== element.title ? 'mt-2' : ''">
+                            <a-form-item
+                              :name="element.title"
+                              class="!my-0 nc-input-required-error nc-form-input-item"
+                              :rules="[
+                                {
+                                  required: isRequired(element, element.required),
+                                  message: `${$t('msg.error.fieldRequired', { value: 'This field' })}`,
+                                },
+                              ]"
+                            >
+                              <LazySmartsheetDivDataCell
+                                class="relative"
+                                @click.stop="
+                                  () => {
+                                    isTabPressed = false
+                                    if (activeRow !== element.title) {
+                                      activeRow = ''
+                                    }
                                   }
+                                "
+                              >
+                                <LazySmartsheetVirtualCell
+                                  v-if="isVirtualCol(element)"
+                                  v-model="formState[element.title]"
+                                  :row="row"
+                                  class="nc-input"
+                                  :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                  :column="element"
+                                />
+                                <LazySmartsheetCell
+                                  v-else
+                                  v-model="formState[element.title]"
+                                  class="nc-input truncate"
+                                  :class="[
+                                    `nc-form-input-${element.title.replaceAll(' ', '')}`,
+                                    { 'layout-list': element.meta.isList },
+                                  ]"
+                                  :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                  :column="element"
+                                  :edit-enabled="true"
+                                />
+                              </LazySmartsheetDivDataCell>
+                            </a-form-item>
+                          </div>
+                        </div>
+
+                        <!-- Field Settings  -->
+                        <div
+                          v-if="activeRow === element.title && isSelectTypeCol(element.uidt)"
+                          class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3"
+                        >
+                          <!-- Layout  -->
+                          <div v-if="isSelectTypeCol(element.uidt)">
+                            <div>Layout</div>
+
+                            <a-radio-group
+                              :value="!!element.meta.isList"
+                              class="nc-form-field-layout !mt-2"
+                              @update:value="
+                                (value) => {
+                                  element.meta.isList = value
+                                  updateColMeta(element)
                                 }
                               "
                             >
-                              <LazySmartsheetVirtualCell
-                                v-if="isVirtualCol(element)"
-                                v-model="formState[element.title]"
-                                :row="row"
-                                class="nc-input"
-                                :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                :column="element"
-                              />
-                              <LazySmartsheetCell
-                                v-else
-                                v-model="formState[element.title]"
-                                class="nc-input truncate"
-                                :class="[
-                                  `nc-form-input-${element.title.replaceAll(' ', '')}`,
-                                  { 'layout-list': element.meta.isList },
-                                ]"
-                                :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                                :column="element"
-                                :edit-enabled="true"
+                              <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
+                              <a-radio :value="true">{{ $t('general.list') }}</a-radio>
+                            </a-radio-group>
+                          </div>
+                          <!-- Todo: Show on conditions,... -->
+                          <!-- eslint-disable vue/no-constant-condition -->
+                          <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
+                            <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
+                            <div>
+                              <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                              <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+                            </div>
+                          </div>
+
+                          <!-- Limit options -->
+                          <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
+                            <div class="flex items-center gap-3">
+                              <a-switch
+                                v-model:checked="element.meta.isLimitOption"
+                                v-e="['a:form-view:field:limit-options']"
+                                size="small"
+                                class="nc-form-switch-focus"
+                                @change="updateColMeta(element)"
                               />
-                            </LazySmartsheetDivDataCell>
-                          </a-form-item>
+                              <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
+                            </div>
+                            <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
+                              <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
+                              <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
+                                <LazySmartsheetFormLimitOptions
+                                  v-model:model-value="element.meta.limitOptions"
+                                  :column="element"
+                                  :is-required="isRequired(element, element.required)"
+                                  @update:model-value="updateColMeta(element)"
+                                ></LazySmartsheetFormLimitOptions>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
+                    </template>
 
-                      <!-- Field Settings  -->
+                    <template #footer>
                       <div
-                        v-if="activeRow === element.title && isSelectTypeCol(element.uidt)"
-                        class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3"
+                        v-if="!visibleColumns.length && isEditable"
+                        class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
                       >
-                        <!-- Layout  -->
-                        <div v-if="isSelectTypeCol(element.uidt)">
-                          <div>Layout</div>
-
-                          <a-radio-group
-                            :value="!!element.meta.isList"
-                            class="nc-form-field-layout !mt-2"
-                            @update:value="
-                              (value) => {
-                                element.meta.isList = value
-                                updateColMeta(element)
-                              }
-                            "
-                          >
-                            <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
-                            <a-radio :value="true">{{ $t('general.list') }}</a-radio>
-                          </a-radio-group>
-                        </div>
-                        <!-- Todo: Show on conditions,... -->
-                        <!-- eslint-disable vue/no-constant-condition -->
-                        <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
-                          <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
-                          <div>
-                            <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
-                            <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
-                          </div>
-                        </div>
-
-                        <!-- Limit options -->
-                        <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
-                          <div class="flex items-center gap-3">
-                            <a-switch
-                              v-model:checked="element.meta.isLimitOption"
-                              v-e="['a:form-view:field:limit-options']"
-                              size="small"
-                              class="nc-form-switch-focus"
-                              @change="updateColMeta(element)"
-                            />
-                            <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
-                          </div>
-                          <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
-                            <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
-                            <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
-                              <LazySmartsheetFormLimitOptions
-                                v-model:model-value="element.meta.limitOptions"
-                                :column="element"
-                                :is-required="isRequired(element, element.required)"
-                                @update:model-value="updateColMeta(element)"
-                              ></LazySmartsheetFormLimitOptions>
-                            </div>
-                          </div>
-                        </div>
+                        {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
                       </div>
-                    </div>
-                  </template>
+                    </template>
+                  </Draggable>
 
-                  <template #footer>
-                    <div
-                      v-if="!visibleColumns.length && isEditable"
-                      class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                  <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
+                    <NcButton
+                      type="secondary"
+                      size="small"
+                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                      class="nc-form-clear nc-form-focus-element"
+                      data-testid="nc-form-clear"
+                      data-title="nc-form-clear"
+                      @click="clearForm"
                     >
-                      {{ $t('title.selectFieldsFromRightPannelToAddHere') }}
-                    </div>
-                  </template>
-                </Draggable>
-
-                <div class="flex justify-between items-center mt-6 !px-8 !lg:px-12">
-                  <NcButton
-                    type="secondary"
-                    size="small"
-                    :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                    class="nc-form-clear nc-form-focus-element"
-                    data-testid="nc-form-clear"
-                    data-title="nc-form-clear"
-                    @click="clearForm"
-                  >
-                    {{ $t('activity.clearForm') }}
-                  </NcButton>
-                  <NcButton
-                    html-type="submit"
-                    type="primary"
-                    size="small"
-                    :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                    class="nc-form-submit nc-form-focus-element"
-                    data-testid="nc-form-submit"
-                    data-title="nc-form-submit"
-                    @click="submitForm"
-                  >
-                    {{ $t('general.submit') }}
-                  </NcButton>
-                </div>
-              </a-form>
+                      {{ $t('activity.clearForm') }}
+                    </NcButton>
+                    <NcButton
+                      html-type="submit"
+                      type="primary"
+                      size="small"
+                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                      class="nc-form-submit nc-form-focus-element"
+                      data-testid="nc-form-submit"
+                      data-title="nc-form-submit"
+                      @click="submitForm"
+                    >
+                      {{ $t('general.submit') }}
+                    </NcButton>
+                  </div>
+                </a-form>
 
-              <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
-                <a-divider v-if="!isLocked" class="!my-8" />
-                <!-- Nocodb Branding  -->
-                <div class="inline-block">
-                  <GeneralFormBranding />
+                <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
+                  <a-divider v-if="!isLocked" class="!my-8" />
+                  <!-- Nocodb Branding  -->
+                  <div class="inline-block">
+                    <GeneralFormBranding />
+                  </div>
                 </div>
-              </div>
-            </a-card>
+              </a-card>
+            </div>
           </div>
-        </div>
-        <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
-          <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
-            <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
-              <div class="flex flex-wrap justify-between items-center gap-2">
-                <div class="flex gap-3">
-                  <div class="text-base font-bold text-gray-900">
-                    {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
+          <div class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
+            <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
+              <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
+                <div class="flex flex-wrap justify-between items-center gap-2">
+                  <div class="flex gap-3">
+                    <div class="text-base font-bold text-gray-900">
+                      {{ $t('objects.viewType.form') }} {{ $t('objects.fields') }}
+                    </div>
+                    <NcBadge color="border-gray-200">
+                      {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
+                    </NcBadge>
                   </div>
-                  <NcBadge color="border-gray-200">
-                    {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
-                  </NcBadge>
-                </div>
 
-                <a-dropdown
-                  v-if="isUIAllowed('fieldAdd')"
-                  v-model:visible="showColumnDropdown"
-                  :trigger="['click']"
-                  overlay-class-name="nc-dropdown-form-add-column"
-                >
-                  <NcButton
-                    type="secondary"
-                    size="small"
-                    class="nc-form-add-field"
-                    data-testid="nc-form-add-field"
-                    @click.stop="showColumnDropdown = true"
+                  <a-dropdown
+                    v-if="isUIAllowed('fieldAdd')"
+                    v-model:visible="showColumnDropdown"
+                    :trigger="['click']"
+                    overlay-class-name="nc-dropdown-form-add-column"
                   >
-                    <div class="flex gap-2 items-center">
-                      <component :is="iconMap.plus" class="w-4 h-4" />
-                      <span> {{ $t('activity.addFieldFromFormView') }} </span>
-                    </div>
-                  </NcButton>
+                    <NcButton
+                      type="secondary"
+                      size="small"
+                      class="nc-form-add-field"
+                      data-testid="nc-form-add-field"
+                      @click.stop="showColumnDropdown = true"
+                    >
+                      <div class="flex gap-2 items-center">
+                        <component :is="iconMap.plus" class="w-4 h-4" />
+                        <span> {{ $t('activity.addFieldFromFormView') }} </span>
+                      </div>
+                    </NcButton>
 
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAddProvider
-                      v-if="showColumnDropdown"
-                      @submit="submitCallback"
-                      @cancel="showColumnDropdown = false"
-                      @click.stop
-                      @keydown.stop
-                    />
-                  </template>
-                </a-dropdown>
-              </div>
-              <div>
-                <a-input
-                  v-model:value="searchQuery"
-                  class="!h-9 !px-3 !py-1 !rounded-lg"
-                  :placeholder="`${$t('placeholder.searchFields')}...`"
-                  name="nc-form-field-search-input"
-                  data-testid="nc-form-field-search-input"
-                >
-                  <template #prefix>
-                    <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
-                  </template>
-                  <template #suffix>
-                    <GeneralIcon
-                      v-if="searchQuery.length > 0"
-                      icon="close"
-                      class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
-                      data-testid="nc-form-field-clear-search"
-                      @click="searchQuery = ''"
-                    />
-                  </template>
-                </a-input>
-              </div>
-              <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
-                <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
-                  {{ $t('title.noFieldsFound') }}
+                    <template #overlay>
+                      <SmartsheetColumnEditOrAddProvider
+                        v-if="showColumnDropdown"
+                        @submit="submitCallback"
+                        @cancel="showColumnDropdown = false"
+                        @click.stop
+                        @keydown.stop
+                      />
+                    </template>
+                  </a-dropdown>
                 </div>
-                <template v-if="localColumns.length">
-                  <div
-                    key="nc-form-show-all-fields"
-                    class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
-                    data-testid="nc-form-show-all-fields"
-                    @click.stop
+                <div>
+                  <a-input
+                    v-model:value="searchQuery"
+                    class="!h-9 !px-3 !py-1 !rounded-lg"
+                    :placeholder="`${$t('placeholder.searchFields')}...`"
+                    name="nc-form-field-search-input"
+                    data-testid="nc-form-field-search-input"
                   >
-                    <div class="w-4 h-4 flex-none mx-2"></div>
-                    <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
-                      <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
-                      <div class="flex items-center px-2">
-                        <a-switch
-                          :checked="visibleColumns.length === localColumns.length"
-                          size="small"
-                          @change="handleAddOrRemoveAllColumns"
-                        />
+                    <template #prefix>
+                      <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+                    </template>
+                    <template #suffix>
+                      <GeneralIcon
+                        v-if="searchQuery.length > 0"
+                        icon="close"
+                        class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
+                        data-testid="nc-form-field-clear-search"
+                        @click="searchQuery = ''"
+                      />
+                    </template>
+                  </a-input>
+                </div>
+                <div class="nc-form-fields-list border-1 border-gray-200 rounded-lg overflow-y-auto nc-form-scrollbar">
+                  <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
+                    {{ $t('title.noFieldsFound') }}
+                  </div>
+                  <template v-if="localColumns.length">
+                    <div
+                      key="nc-form-show-all-fields"
+                      class="w-full flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
+                      data-testid="nc-form-show-all-fields"
+                      @click.stop
+                    >
+                      <div class="w-4 h-4 flex-none mx-2"></div>
+                      <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                        <div class="flex-1 font-base my-1.5">{{ $t('activity.selectAllFields') }}</div>
+                        <div class="flex items-center px-2">
+                          <a-switch
+                            :checked="visibleColumns.length === localColumns.length"
+                            size="small"
+                            @change="handleAddOrRemoveAllColumns"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <Draggable
-                    :list="localColumns"
-                    item-key="id"
-                    ghost-class="nc-form-field-ghost"
-                    :style="{ height: 'calc(100% - 64px)' }"
-                    :disabled="isLocked || !isEditable"
-                    @change="onMove($event)"
-                    @start="drag = true"
-                    @end="drag = false"
-                  >
-                    <template #item="{ element: field }">
-                      <div
-                        v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
-                        :key="field.id"
-                        class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
-                        :class="[
-                          `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
-                          `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
-                        ]"
-                        :data-testid="`nc-form-field-item-${field.title}`"
-                      >
-                        <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                    <Draggable
+                      :list="localColumns"
+                      item-key="id"
+                      ghost-class="nc-form-field-ghost"
+                      :style="{ height: 'calc(100% - 64px)' }"
+                      :disabled="isLocked || !isEditable"
+                      @change="onMove($event)"
+                      @start="drag = true"
+                      @end="drag = false"
+                    >
+                      <template #item="{ element: field }">
                         <div
-                          class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
-                          @click="showOrHideColumn(field, !field.show, true)"
+                          v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
+                          :key="field.id"
+                          class="w-full px-2 py-1.5 flex flex-row items-center border-b-1 last:border-none border-gray-200"
+                          :class="[
+                            `nc-form-field-item-${field.title.replaceAll(' ', '')}`,
+                            `${activeRow === field.title ? 'bg-brand-50 font-medium' : 'hover:bg-gray-50'}`,
+                          ]"
+                          :data-testid="`nc-form-field-item-${field.title}`"
                         >
-                          <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
-                          <SmartsheetHeaderCellIcon v-else :column-meta="field" />
-                          <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
-                            <div class="w-full flex items-center">
-                              <div class="ml-1 inline-block max-w-1/2">
-                                <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
-                                  <template #title>
-                                    {{ field.title }}
-                                  </template>
-                                  <span data-testid="nc-field-title"> {{ field.title }} </span>
-                                </NcTooltip>
-                              </div>
-                              <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
-                                <span>&nbsp;(</span>
-                                <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
-                                  <template #title>
-                                    {{ field.label }}
-                                  </template>
-                                  <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
-                                </NcTooltip>
-                                <span>)</span>
+                          <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
+                          <div
+                            class="flex-1 flex items-center justify-between cursor-pointer max-w-[calc(100%_-_20px)]"
+                            @click="showOrHideColumn(field, !field.show, true)"
+                          >
+                            <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
+                            <SmartsheetHeaderCellIcon v-else :column-meta="field" />
+                            <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
+                              <div class="w-full flex items-center">
+                                <div class="ml-1 inline-block max-w-1/2">
+                                  <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
+                                    <template #title>
+                                      {{ field.title }}
+                                    </template>
+                                    <span data-testid="nc-field-title"> {{ field.title }} </span>
+                                  </NcTooltip>
+                                </div>
+                                <div v-if="field.label?.trim()" class="truncate inline-flex text-xs font-normal text-gray-700">
+                                  <span>&nbsp;(</span>
+                                  <NcTooltip class="truncate" :disabled="drag" show-on-truncate-only>
+                                    <template #title>
+                                      {{ field.label }}
+                                    </template>
+                                    <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
+                                  </NcTooltip>
+                                  <span>)</span>
+                                </div>
+                                <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top"
+                                  >&nbsp;*</span
+                                >
                               </div>
-                              <span v-if="isRequired(field, field.required)" class="text-red-500 text-sm align-top">&nbsp;*</span>
                             </div>
+                            <a-switch
+                              :checked="!!field.show"
+                              :disabled="field.required || isLocked || !isEditable"
+                              size="small"
+                            />
                           </div>
-                          <a-switch :checked="!!field.show" :disabled="field.required || isLocked || !isEditable" size="small" />
                         </div>
-                      </div>
-                    </template>
-                    <template
-                      v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
-                      #footer
-                    >
-                      <div class="px-0.5 py-2 text-gray-500 text-center">
-                        {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
-                      </div>
-                    </template>
-                  </Draggable>
-                </template>
-              </div>
-            </Pane>
-            <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
-              <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
-                <!-- Appearance Settings -->
-                <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
-
-                <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
-                  <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
-                  <div class="flex justify-start">
-                    <LazyGeneralColorPicker
-                      :model-value="(formViewData.meta as Record<string,any>).background_color"
-                      :colors="[
-                        '#FFFFFF',
-                        '#FFDBD9',
-                        '#FEE6D6',
-                        '#FFF0D1',
-                        '#D4F7E0',
-                        '#D7F2FF',
-                        '#FED8F4',
-                        '#E5D4F5',
-                        '#FFCFE6',
-                      ]"
-                      :borders="[
-                        '#6A7184',
-                        '#FF4A3F',
-                        '#FA8231',
-                        '#FCBE3A',
-                        '#27D665',
-                        '#36BFFF',
-                        '#FC3AC6',
-                        '#7D26CD',
-                        '#B33771',
-                      ]"
-                      :is-new-design="true"
-                      class="nc-form-theme-color-picker !p-0 !-ml-1"
-                      @input="handleChangeBackground"
-                    />
-                  </div>
+                      </template>
+                      <template
+                        v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
+                        #footer
+                      >
+                        <div class="px-0.5 py-2 text-gray-500 text-center">
+                          {{ $t('title.noFieldsFound') }} with title `{{ searchQuery }}`
+                        </div>
+                      </template>
+                    </Draggable>
+                  </template>
                 </div>
+              </Pane>
+              <Pane min-size="20" size="50" class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar">
+                <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
+                  <!-- Appearance Settings -->
+                  <div class="text-base font-bold text-gray-900">{{ $t('labels.appearanceSettings') }}</div>
+
+                  <div :class="isLocked || !isEditable ? 'pointer-events-none' : ''">
+                    <div class="text-gray-800">{{ $t('labels.backgroundColor') }}</div>
+                    <div class="flex justify-start">
+                      <LazyGeneralColorPicker
+                        :model-value="(formViewData.meta as Record<string,any>).background_color"
+                        :colors="[
+                          '#FFFFFF',
+                          '#FFDBD9',
+                          '#FEE6D6',
+                          '#FFF0D1',
+                          '#D4F7E0',
+                          '#D7F2FF',
+                          '#FED8F4',
+                          '#E5D4F5',
+                          '#FFCFE6',
+                        ]"
+                        :borders="[
+                          '#6A7184',
+                          '#FF4A3F',
+                          '#FA8231',
+                          '#FCBE3A',
+                          '#27D665',
+                          '#36BFFF',
+                          '#FC3AC6',
+                          '#7D26CD',
+                          '#B33771',
+                        ]"
+                        :is-new-design="true"
+                        class="nc-form-theme-color-picker !p-0 !-ml-1"
+                        @input="handleChangeBackground"
+                      />
+                    </div>
+                  </div>
 
-                <div class="flex items-center">
-                  <!-- Hide NocoDB Branding -->
-                  <a-switch
-                    v-if="isEeUI"
-                    v-e="[`a:form-view:submit-another-form`]"
-                    :checked="parseProp(formViewData.meta)?.hide_branding"
-                    size="small"
-                    class="nc-form-hide-branding"
-                    data-testid="nc-form-hide-branding"
-                    :disabled="isLocked || !isEditable"
-                    @change="
+                  <div class="flex items-center">
+                    <!-- Hide NocoDB Branding -->
+                    <a-switch
+                      v-if="isEeUI"
+                      v-e="[`a:form-view:submit-another-form`]"
+                      :checked="parseProp(formViewData.meta)?.hide_branding"
+                      size="small"
+                      class="nc-form-hide-branding"
+                      data-testid="nc-form-hide-branding"
+                      :disabled="isLocked || !isEditable"
+                      @change="
                       (value) => {
                         if (isLocked || !isEditable) return
 
@@ -1500,99 +1513,100 @@ useEventListener(
                         updateView()
                       }
                     "
-                  />
-                  <NcTooltip v-else placement="top">
-                    <template #title>
-                      {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
-                    </template>
-                    <a-switch :checked="false" size="small" :disabled="true" />
-                  </NcTooltip>
-                  <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
-                </div>
-              </div>
-
-              <div class="p-4 flex flex-col space-y-4">
-                <!-- Post Form Submission Settings -->
-                <div class="text-base font-bold text-gray-900">
-                  {{ $t('msg.info.postFormSubmissionSettings') }}
+                    />
+                    <NcTooltip v-else placement="top">
+                      <template #title>
+                        {{ $t('msg.info.thisFeatureIsOnlyAvailableInEnterpriseEdition') }}
+                      </template>
+                      <a-switch :checked="false" size="small" :disabled="true" />
+                    </NcTooltip>
+                    <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
+                  </div>
                 </div>
 
-                <!-- Show this message -->
-                <div>
-                  <div class="text-gray-800 mb-2">
-                    {{ $t('msg.info.formDisplayMessage') }}
+                <div class="p-4 flex flex-col space-y-4">
+                  <!-- Post Form Submission Settings -->
+                  <div class="text-base font-bold text-gray-900">
+                    {{ $t('msg.info.postFormSubmissionSettings') }}
                   </div>
-                  <a-form-item class="!my-0">
-                    <LazyCellRichText
-                      v-if="!isLocked && isEditable"
-                      v-model:value="formViewData.success_msg"
-                      class="nc-form-after-submit-msg"
-                      :is-form-field="true"
-                      data-testid="nc-form-after-submit-msg"
-                      @update:value="updateView" />
-                    <LazyCellRichText
-                      v-else
-                      :value="formViewData.success_msg"
-                      class="nc-form-after-submit-msg"
-                      is-form-field
-                      read-only
-                      data-testid="nc-form-after-submit-msg"
-                  /></a-form-item>
-                </div>
 
-                <!-- Other options -->
-                <div class="flex flex-col gap-3">
-                  <div class="flex items-center">
-                    <!-- Show "Submit Another Form" button -->
-                    <a-switch
-                      v-model:checked="formViewData.submit_another_form"
-                      v-e="[`a:form-view:submit-another-form`]"
-                      size="small"
-                      class="nc-form-checkbox-submit-another-form"
-                      data-testid="nc-form-checkbox-submit-another-form"
-                      :disabled="isLocked || !isEditable"
-                      @change="updateView"
-                    />
-                    <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                  <!-- Show this message -->
+                  <div>
+                    <div class="text-gray-800 mb-2">
+                      {{ $t('msg.info.formDisplayMessage') }}
+                    </div>
+                    <a-form-item class="!my-0">
+                      <LazyCellRichText
+                        v-if="!isLocked && isEditable"
+                        v-model:value="formViewData.success_msg"
+                        class="nc-form-after-submit-msg"
+                        :is-form-field="true"
+                        data-testid="nc-form-after-submit-msg"
+                        @update:value="updateView" />
+                      <LazyCellRichText
+                        v-else
+                        :value="formViewData.success_msg"
+                        class="nc-form-after-submit-msg"
+                        is-form-field
+                        read-only
+                        data-testid="nc-form-after-submit-msg"
+                    /></a-form-item>
                   </div>
 
-                  <div class="flex items-center">
-                    <!-- Show a blank form after 5 seconds -->
-                    <a-switch
-                      v-model:checked="formViewData.show_blank_form"
-                      v-e="[`a:form-view:show-blank-form`]"
-                      size="small"
-                      class="nc-form-checkbox-show-blank-form"
-                      data-testid="nc-form-checkbox-show-blank-form"
-                      :disabled="isLocked || !isEditable"
-                      @change="updateView"
-                    />
+                  <!-- Other options -->
+                  <div class="flex flex-col gap-3">
+                    <div class="flex items-center">
+                      <!-- Show "Submit Another Form" button -->
+                      <a-switch
+                        v-model:checked="formViewData.submit_another_form"
+                        v-e="[`a:form-view:submit-another-form`]"
+                        size="small"
+                        class="nc-form-checkbox-submit-another-form"
+                        data-testid="nc-form-checkbox-submit-another-form"
+                        :disabled="isLocked || !isEditable"
+                        @change="updateView"
+                      />
+                      <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
+                    </div>
 
-                    <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
-                  </div>
+                    <div class="flex items-center">
+                      <!-- Show a blank form after 5 seconds -->
+                      <a-switch
+                        v-model:checked="formViewData.show_blank_form"
+                        v-e="[`a:form-view:show-blank-form`]"
+                        size="small"
+                        class="nc-form-checkbox-show-blank-form"
+                        data-testid="nc-form-checkbox-show-blank-form"
+                        :disabled="isLocked || !isEditable"
+                        @change="updateView"
+                      />
 
-                  <div class="flex items-center">
-                    <a-switch
-                      v-model:checked="emailMe"
-                      v-e="[`a:form-view:email-me`]"
-                      size="small"
-                      class="nc-form-checkbox-send-email"
-                      data-testid="nc-form-checkbox-send-email"
-                      :disabled="isLocked || !isEditable"
-                      @change="onEmailChange"
-                    />
+                      <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
+                    </div>
+
+                    <div class="flex items-center">
+                      <a-switch
+                        v-model:checked="emailMe"
+                        v-e="[`a:form-view:email-me`]"
+                        size="small"
+                        class="nc-form-checkbox-send-email"
+                        data-testid="nc-form-checkbox-send-email"
+                        :disabled="isLocked || !isEditable"
+                        @change="onEmailChange"
+                      />
 
-                    <!-- Email me at <email> -->
-                    <span class="ml-4">
-                      {{ $t('msg.info.emailForm') }}
-                      <span class="text-bold text-gray-600">{{ user?.email }}</span>
-                    </span>
+                      <!-- Email me at <email> -->
+                      <span class="ml-4">
+                        {{ $t('msg.info.emailForm') }}
+                        <span class="text-bold text-gray-600">{{ user?.email }}</span>
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </Pane>
-          </Splitpanes>
-        </div>
+              </Pane>
+            </Splitpanes>
+          </div>
+        </template>
       </div>
     </template>
     <div