diff --git a/packages/nc-gui/assets/img/brand/nocodb-logo.svg b/packages/nc-gui/assets/img/brand/nocodb-logo.svg
new file mode 100644
index 0000000000..7d18941552
--- /dev/null
+++ b/packages/nc-gui/assets/img/brand/nocodb-logo.svg
@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6 10.8676L8.75329 13.6226V17.9842H6V10.8676ZM17.5645 5.01046V17.535C17.5645 17.7921 17.3548 18 17.0977 18C16.9744 18 16.8563 17.9525 16.7683 17.8644L6 8.15303V5.40504C6 5.14785 6.20787 4.94 6.46505 4.94H6.48972C6.61303 4.94 6.7328 4.98933 6.81911 5.07564L14.8094 12.009V5.01046H17.5645Z"
+        fill="url(#paint0_linear_231_10218)" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M3 0C1.34315 0 0 1.34315 0 3V21C0 22.6569 1.34315 24 3 24H21C22.6569 24 24 22.6569 24 21V3C24 1.34315 22.6569 0 21 0H3ZM3.63333 2.13333C2.8049 2.13333 2.13333 2.8049 2.13333 3.63333V20.3667C2.13333 21.1951 2.8049 21.8667 3.63333 21.8667H20.3667C21.1951 21.8667 21.8667 21.1951 21.8667 20.3667V3.63333C21.8667 2.8049 21.1951 2.13333 20.3667 2.13333H3.63333Z"
+        fill="url(#paint1_linear_231_10218)" />
+    <defs>
+        <linearGradient id="paint0_linear_231_10218" x1="11.7814" y1="0.543214" x2="11.7814" y2="21.6612"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4351E8" />
+            <stop offset="1" stop-color="#2A1EA5" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_231_10218" x1="4.82267" y1="19.1431" x2="26.7035" y2="-2.6331"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4351E8" />
+            <stop offset="1" stop-color="#2A1EA5" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/assets/img/form-banner-left.png b/packages/nc-gui/assets/img/form-banner-left.png
new file mode 100644
index 0000000000..793bd374fb
Binary files /dev/null and b/packages/nc-gui/assets/img/form-banner-left.png differ
diff --git a/packages/nc-gui/assets/img/form-banner-right.png b/packages/nc-gui/assets/img/form-banner-right.png
new file mode 100644
index 0000000000..09360b21d3
Binary files /dev/null and b/packages/nc-gui/assets/img/form-banner-right.png differ
diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index c4c43b762b..f3330b1469 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -613,7 +613,7 @@ a {
 }
 
 .nc-click-transition {
-  @apply transform transition-transform transition-color !text-gray-400 !hover:(scale-130 !text-gray-500) !active:(scale-100 !text-gray-500);
+  @apply transform transition-transform transition-colors !text-gray-400 !hover:(scale-130 !text-gray-500) !active:(scale-100 !text-gray-500);
 }
 
 .nc-click-transition-1 {
diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index 027895e949..e39ff2e06c 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -185,6 +185,7 @@ watch(isExpanded, () => {
         :hide-minimap="true"
         :disable-deep-compare="true"
         @update:model-value="localValue = $event"
+        @keydown.enter.stop
       />
 
       <span v-if="error" class="nc-cell-field text-xs w-full py-1 text-red-500">
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 606fe8c549..42ee3a4a33 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -61,7 +61,7 @@ const mousePosition = ref<
 const isDragging = ref(false)
 
 const focus: VNodeRef = (el) =>
-  !isExpandedFormOpen.value && !isEditColumn.value && isForm.value && (el as HTMLTextAreaElement)?.focus()
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLTextAreaElement)?.focus()
 
 const height = computed(() => {
   if (isExpandedFormOpen.value) return 36 * 4
@@ -226,7 +226,7 @@ watch(inputWrapperRef, () => {
         v-else-if="editEnabled && !isVisible"
         :ref="focus"
         v-model="vModel"
-        rows="4"
+        :rows="isForm ? 5 : 4"
         class="h-full w-full outline-none border-none nc-scrollbar-lg"
         :class="{
           'p-2': editEnabled,
@@ -234,7 +234,7 @@ watch(inputWrapperRef, () => {
           'px-2': isExpandedFormOpen,
         }"
         :style="{
-          minHeight: `${height}px`,
+          minHeight: isForm ? '117px' : `${height}px`,
         }"
         :placeholder="isEditColumn ? $t('labels.optional') : ''"
         :disabled="readOnly"
@@ -270,7 +270,7 @@ watch(inputWrapperRef, () => {
       <NcTooltip
         v-if="!isVisible"
         placement="bottom"
-        class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3"
+        class="!absolute right-1 hidden nc-text-area-expand-btn group-hover:block z-3"
         :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
       >
         <template #title>{{ $t('title.expand') }}</template>
@@ -296,6 +296,7 @@ watch(inputWrapperRef, () => {
         :class="{
           'cursor-move': isDragging,
         }"
+        @keydown.enter.stop
       >
         <div
           v-if="column"
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index cb173d617e..b5a89d0b7a 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -235,7 +235,7 @@ watch(isDropdownOpen, async () => {
         v-if="isEditing"
         :ref="focusInput"
         v-model:value="_title"
-        class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent"
+        class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent !pl-0"
         :class="{
           'font-medium': activeView?.id === vModel.id,
         }"
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 46354817f5..ebc85cc9ca 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnType, KanbanType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import tinycolor from 'tinycolor2'
 import { useMetas } from '#imports'
 
 const { view: _view, $api } = useSmartsheetStoreOrThrow()
@@ -255,22 +254,6 @@ async function updateSharedView() {
   return true
 }
 
-function onChangeTheme(color: string) {
-  if (!activeView.value?.meta) return
-
-  const tcolor = tinycolor(color)
-
-  if (tcolor.isValid()) {
-    const complement = tcolor.complement()
-    activeView.value.meta.theme = {
-      primaryColor: color,
-      accentColor: complement.toHex8String(),
-    }
-
-    saveTheme()
-  }
-}
-
 const isPublicShared = computed(() => {
   return !!activeView.value?.uuid
 })
@@ -351,7 +334,7 @@ const isPublicShared = computed(() => {
             >
             </a-switch>
           </div>
-          <div v-if="activeView?.type === ViewTypes.FORM && isEeUI" class="flex flex-row justify-between">
+          <div v-if="activeView?.type === ViewTypes.FORM && !isEeUI" class="flex flex-row justify-between">
             <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
             <a-switch
               v-model:checked="withRTL"
@@ -360,33 +343,6 @@ const isPublicShared = computed(() => {
             >
             </a-switch>
           </div>
-          <div v-if="activeView?.type === ViewTypes.FORM" class="flex flex-col justify-between gap-y-1 bg-gray-50 rounded-md">
-            <div class="flex flex-row justify-between">
-              <div class="text-black">{{ $t('activity.useTheme') }}</div>
-              <a-switch
-                v-e="['c:share:view:theme:toggle']"
-                :checked="viewTheme"
-                :loading="isUpdating.password"
-                class="share-theme-toggle !mt-0.25"
-                data-testid="share-theme-toggle"
-                @click="viewTheme = !viewTheme"
-              />
-            </div>
-
-            <Transition mode="out-in" name="layout">
-              <div v-if="viewTheme" class="flex -ml-1">
-                <LazyGeneralColorPicker
-                  :advanced="false"
-                  :colors="baseThemeColors"
-                  :model-value="activeView?.meta?.theme?.primaryColor"
-                  :row-size="9"
-                  class="!p-0 !bg-inherit"
-                  data-testid="nc-modal-share-view__theme-picker"
-                  @input="onChangeTheme"
-                />
-              </div>
-            </Transition>
-          </div>
         </div>
       </template>
     </div>
diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index 50c4d44a59..04013f0323 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -7,6 +7,8 @@ interface Props {
   rowSize?: number
   advanced?: boolean
   pickButton?: boolean
+  borders?: string[]
+  isNewDesign?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   rowSize: 10,
   advanced: true,
   pickButton: false,
+  isNewDesign: false,
 })
 
 const emit = defineEmits(['input', 'closeModal'])
@@ -52,19 +55,21 @@ watch(picked, (n, _o) => {
         v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
-        :class="compare(picked, color) ? 'selected' : ''"
-        :style="{ 'background-color': `${color}` }"
+        :class="{ 'selected': compare(picked, color), 'new-design': isNewDesign }"
+        :style="{
+          'background-color': `${color}`,
+          'border': borders?.length && borders[i] ? `1px solid ${borders[i]}` : undefined,
+        }"
         @click="selectColor(color, true)"
       >
-        {{ compare(picked, color) ? '&#10003;' : '' }}
+        {{ compare(picked, color) && !isNewDesign ? '&#10003;' : '' }}
       </button>
-      <button
-        class="h-6 w-6 mt-2.7 ml-1 border-1 border-[grey] rounded-md flex items-center justify-center"
-        @click="isPickerOn = !isPickerOn"
-      >
+      <button class="h-6 w-6 mt-2.7 ml-1 border-1 border-[grey] rounded-md" @click="isPickerOn = !isPickerOn">
         <GeneralTooltip>
           <template #title>{{ $t('activity.moreColors') }}</template>
-          <GeneralIcon class="mt-1.5" :icon="isPickerOn ? 'minus' : 'plus'" />
+          <div class="flex items-center justify-center">
+            <GeneralIcon :icon="isPickerOn ? 'minus' : 'plus'" class="w-4 h-4" />
+          </div>
         </GeneralTooltip>
       </button>
     </div>
@@ -99,14 +104,22 @@ watch(picked, (n, _o) => {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
 }
-.color-selector:hover {
+.color-selector:not(.new-design):hover {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
-.color-selector.selected {
+
+.color-selector.new-design:hover {
+  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
+}
+
+.color-selector.selected:not(.new-design) {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
+.color-selector.selected.new-design {
+  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
+}
 :deep(.vc-chrome-toggle-icon) {
   @apply ml-3!important;
 }
diff --git a/packages/nc-gui/components/general/FormBanner.vue b/packages/nc-gui/components/general/FormBanner.vue
new file mode 100644
index 0000000000..af362e7493
--- /dev/null
+++ b/packages/nc-gui/components/general/FormBanner.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+interface Props {
+  bannerImageUrl?: string | null
+}
+const { bannerImageUrl } = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="w-full max-w-screen-xl mx-auto bg-white border-1 border-gray-200 rounded-3xl overflow-hidden"
+    :style="
+      bannerImageUrl
+        ? { 'background-image': `url(${bannerImageUrl})`, 'background-size': 'cover', 'background-position': 'center' }
+        : {}
+    "
+  >
+    <!-- Todo: aspect ratio and cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+    <div v-if="!bannerImageUrl" class="h-full flex items-stretch justify-between">
+      <div class="flex">
+        <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
+      </div>
+
+      <div class="w-[91px] flex justify-center">
+        <img class="max-h-full self-center" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
+      </div>
+      <div class="flex justify-end">
+        <img src="~assets/img/form-banner-right.png" alt="form-banner-left'" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/general/FormBranding.vue b/packages/nc-gui/components/general/FormBranding.vue
new file mode 100644
index 0000000000..2bb11c0f11
--- /dev/null
+++ b/packages/nc-gui/components/general/FormBranding.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { openLink } from '#imports'
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-3 cursor-pointer text-gray-700 dark:text-slate-300"
+    @click="openLink('https://github.com/nocodb/nocodb')"
+  >
+    <img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="flex-none w-6 h-6" />
+    <div class="text-sm">NocoDB Forms</div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 5405586f88..1d3d525be2 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -204,7 +204,7 @@ onUnmounted(() => {
         'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
         'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
-        '!min-h-30 resize-y': isTextArea(column) && (isForm || isSurveyForm),
+        '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),
       },
     ]"
     class="nc-cell w-full h-full relative"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 9418a28734..daba5f6658 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import type { VNodeRef } from '@vue/runtime-core'
 import Draggable from 'vuedraggable'
+import tinycolor from 'tinycolor2'
+import { Pane, Splitpanes } from 'splitpanes'
+import 'splitpanes/dist/splitpanes.css'
 import { RelationTypes, UITypes, ViewTypes, getSystemColumns, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -13,12 +17,15 @@ import {
   extractSdkResponseErrorMsg,
   iconMap,
   inject,
+  isEeUI,
   message,
   onClickOutside,
+  parseProp,
   provide,
   reactive,
   ref,
   useDebounceFn,
+  useEventListener,
   useGlobal,
   useI18n,
   useNuxtApp,
@@ -55,7 +62,7 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useRoles()
 
-const formState = reactive({})
+let formState = reactive<Record<string, any>>({})
 
 const secondsRemain = ref(0)
 
@@ -78,7 +85,7 @@ reloadEventHook.on(async () => {
   setFormData()
 })
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow()
+const { fields, showAll, hideAll, saveOrUpdate } = useViewColumnsOrThrow()
 
 const { state, row } = useProvideSmartsheetRowStore(
   meta,
@@ -93,16 +100,12 @@ const columns = computed(() => meta?.value?.columns || [])
 
 const localColumns = ref<Record<string, any>[]>([])
 
-const hiddenColumns = ref<Record<string, any>[]>([])
-
 const draggableRef = ref()
 
 const systemFieldsIds = ref<Record<string, any>[]>([])
 
 const showColumnDropdown = ref(false)
 
-const moved = ref(false)
-
 const drag = ref(false)
 
 const emailMe = ref(false)
@@ -111,12 +114,22 @@ const submitted = ref(false)
 
 const activeRow = ref('')
 
-const editEnabled = ref<boolean[]>([])
+const isTabPressed = ref(false)
+
+const isLoadingFormView = ref(false)
+
+const focusLabel: VNodeRef = (el) => {
+  return (el as HTMLInputElement)?.focus()
+}
+
+const searchQuery = ref('')
 
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
 
+const visibleColumns = computed(() => localColumns.value.filter((f) => f.show).sort((a, b) => a.order - b.order))
+
 const updateView = useDebounceFn(
   () => {
     updateFormView(formViewData.value)
@@ -129,8 +142,10 @@ async function submitForm() {
   try {
     await formRef.value?.validateFields()
   } catch (e: any) {
-    e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
-    if (e.errorFields.length) return
+    if (e.errorFields.length) {
+      message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty'))
+      return
+    }
   }
 
   await insertRow({
@@ -142,6 +157,13 @@ async function submitForm() {
   submitted.value = true
 }
 
+async function clearForm() {
+  formState = reactive<Record<string, any>>({})
+  state.value = {}
+  await formRef.value.clearValidate()
+  reloadEventHook.trigger()
+}
+
 function isDbRequired(column: Record<string, any>) {
   if (hiddenCols.includes(column.fk_column_id)) {
     return false
@@ -183,63 +205,65 @@ function onMoveCallback(event: any) {
   }
 }
 
-function onMove(event: any) {
-  const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
+// Todo: reorder visible form fields
+function onMove(event: any, isVisibleFormFields = false) {
+  const { oldIndex } = event.moved
+  let { newIndex, element } = event.moved
+
+  const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === element.fk_column_id)
 
-  if (event.added) {
-    element.show = true
+  if (fieldIndex === -1 || fieldIndex === undefined) return
+
+  if (isVisibleFormFields) {
+    element = localColumns.value[localColumns.value?.findIndex((c) => c.fk_column_id === element.fk_column_id)]
+    newIndex = localColumns.value.findIndex(
+      (c) =>
+        c.fk_column_id ===
+        visibleColumns.value[newIndex > oldIndex ? newIndex - 1 : newIndex < oldIndex ? newIndex + 1 : newIndex].fk_column_id,
+    )
   }
 
-  if (event.removed) {
-    if (shouldSkipColumn(element)) {
-      return
-    }
-    element.show = false
-    saveOrUpdate(element, oldIndex)
+  if (!localColumns.value.length || localColumns.value.length === 1) {
+    element.order = 1
+  } else if (localColumns.value.length - 1 === newIndex) {
+    element.order = (localColumns.value[newIndex - 1]?.order || 0) + 1
+  } else if (newIndex === 0) {
+    element.order = (localColumns.value[1]?.order || 0) / 2
   } else {
-    if (!localColumns.value.length || localColumns.value.length === 1) {
-      element.order = 1
-    } else if (localColumns.value.length - 1 === newIndex) {
-      element.order = (localColumns.value[newIndex - 1]?.order || 0) + 1
-    } else if (newIndex === 0) {
-      element.order = (localColumns.value[1]?.order || 0) / 2
-    } else {
-      element.order = ((localColumns.value[newIndex - 1]?.order || 0) + (localColumns.value[newIndex + 1].order || 0)) / 2
-    }
-    saveOrUpdate(element, newIndex)
+    element.order = ((localColumns.value[newIndex - 1]?.order || 0) + (localColumns.value[newIndex + 1].order || 0)) / 2
   }
 
+  saveOrUpdate(element, fieldIndex)
+
   $e('a:form-view:reorder')
 }
 
-function hideColumn(idx: number) {
-  if (shouldSkipColumn(localColumns.value[idx])) {
+async function showOrHideColumn(column: Record<string, any>, show: boolean, isSidePannel = false) {
+  if (shouldSkipColumn(column)) {
     // Required field can't be moved
-    message.info(t('msg.info.requriedFieldsCantBeMoved'))
+    !isSidePannel && message.info(t('msg.info.requriedFieldsCantBeMoved'))
     return
   }
 
-  saveOrUpdate(
-    {
-      ...localColumns.value[idx],
-      show: false,
-    },
-    idx,
-  )
+  const fieldIndex = fields.value?.findIndex((f) => f?.fk_column_id === column.fk_column_id)
 
-  reloadEventHook.trigger()
+  if (fieldIndex !== -1 && fieldIndex !== undefined) {
+    await saveOrUpdate(
+      {
+        ...column,
+        show,
+      },
+      fieldIndex,
+    )
 
-  $e('a:form-view:hide-columns')
-}
+    reloadEventHook.trigger()
 
-async function addAllColumns() {
-  for (const col of (localColumns as Record<string, any>)?.value) {
-    if (!systemFieldsIds.value.includes(col.fk_column_id)) {
-      col.show = true
+    if (show) {
+      $e('a:form-view:show-columns')
+    } else {
+      $e('a:form-view:hide-columns')
     }
   }
-  await showAll(systemFieldsIds.value)
-  $e('a:form-view:add-all')
 }
 
 function shouldSkipColumn(col: Record<string, any>) {
@@ -248,16 +272,24 @@ function shouldSkipColumn(col: Record<string, any>) {
   )
 }
 
-async function removeAllColumns() {
-  for (const col of (localColumns as Record<string, any>)?.value) {
-    if (!shouldSkipColumn(col)) col.show = false
+async function handleAddOrRemoveAllColumns(value: boolean) {
+  if (value) {
+    for (const col of (localColumns as Record<string, any>)?.value) {
+      col.show = true
+    }
+    await showAll(systemFieldsIds.value)
+    $e('a:form-view:add-all')
+  } else {
+    for (const col of (localColumns as Record<string, any>)?.value) {
+      if (!shouldSkipColumn(col)) col.show = false
+    }
+    await hideAll(
+      (localColumns as Record<string, any>)?.value
+        .filter((col: Record<string, any>) => shouldSkipColumn(col))
+        .map((col: Record<string, any>) => col.fk_column_id),
+    )
+    $e('a:form-view:remove-all')
   }
-  await hideAll(
-    (localColumns as Record<string, any>)?.value
-      .filter((col: Record<string, any>) => shouldSkipColumn(col))
-      .map((col: Record<string, any>) => col.fk_column_id),
-  )
-  $e('a:form-view:remove-all')
 }
 
 async function checkSMTPStatus() {
@@ -275,11 +307,17 @@ async function checkSMTPStatus() {
 
 function setFormData() {
   const col = formColumnData?.value || []
+  systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
 
   formViewData.value = {
     ...formViewData.value,
     submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
     show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
+    meta: {
+      hide_branding: false,
+      background_color: '#F9F9FA',
+      ...(parseProp(formViewData.value?.meta) ?? {}),
+    },
   }
 
   // email me
@@ -291,17 +329,9 @@ function setFormData() {
   emailMe.value = data[user.value?.email as string]
 
   localColumns.value = col
-    .filter((f) => f.show && !hiddenColTypes.includes(f.uidt))
+    .filter((f) => !hiddenColTypes.includes(f.uidt) && !systemFieldsIds.value.includes(f.fk_column_id))
     .sort((a, b) => a.order - b.order)
     .map((c) => ({ ...c, required: !!c.required }))
-
-  editEnabled.value = new Array(localColumns.value.length).fill(false)
-
-  systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
-
-  hiddenColumns.value = col.filter(
-    (f) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && !hiddenColTypes.includes(f.uidt),
-  )
 }
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
@@ -347,45 +377,46 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
   }
 }, 250)
 
-watch(submitted, (v) => {
-  if (v && formViewData.value?.show_blank_form) {
-    secondsRemain.value = 5
-    const intvl = setInterval(() => {
-      if (--secondsRemain.value < 0) {
-        submitted.value = false
-        clearInterval(intvl)
-      }
-    }, 1000)
-  }
-})
-
-function handleMouseUp(col: Record<string, any>, hiddenColIndex: number) {
-  if (isLocked.value) return
-
-  if (!moved.value) {
-    const index = localColumns.value.length
-    col.order = (index ? localColumns.value[index - 1].order : 0) + 1
-    col.show = true
+const columnSupportsScanning = (elementType: UITypes) =>
+  betaFeatureToggleState.show &&
+  [UITypes.SingleLineText, UITypes.Number, UITypes.Email, UITypes.URL, UITypes.LongText].includes(elementType)
 
-    /** remove column from hiddenColumns and add to localColumns */
-    localColumns.value.push(col)
-    hiddenColumns.value.splice(hiddenColIndex, 1)
+const onFormItemClick = (element: any) => {
+  if (isLocked.value || !isEditable) return
+  activeRow.value = element.title
+  isTabPressed.value = false
+}
 
-    saveOrUpdate(col, index)
+const handleChangeBackground = (color: string) => {
+  const tcolor = tinycolor(color)
+  if (tcolor.isValid()) {
+    ;(formViewData.value?.meta as Record<string, any>).background_color = color
+    updateView()
   }
 }
 
-const columnSupportsScanning = (elementType: UITypes) =>
-  betaFeatureToggleState.show &&
-  [UITypes.SingleLineText, UITypes.Number, UITypes.Email, UITypes.URL, UITypes.LongText].includes(elementType)
-
 onClickOutside(draggableRef, () => {
   activeRow.value = ''
+  isTabPressed.value = false
 })
 
 onMounted(async () => {
+  isLoadingFormView.value = true
   await loadFormView()
   setFormData()
+  isLoadingFormView.value = false
+})
+
+watch(submitted, (v) => {
+  if (v && formViewData.value?.show_blank_form) {
+    secondsRemain.value = 5
+    const intvl = setInterval(() => {
+      if (--secondsRemain.value < 0) {
+        submitted.value = false
+        clearInterval(intvl)
+      }
+    }, 1000)
+  }
 })
 
 watch(view, (nextView) => {
@@ -394,517 +425,821 @@ watch(view, (nextView) => {
   }
 })
 
-const onFormItemClick = (element: any) => {
-  if (isLocked.value) return
+watch([formState, state.value], async () => {
+  for (const virtualField in state.value) {
+    if (!formState[virtualField]) {
+      formState[virtualField] = state.value[virtualField]
+    }
+  }
 
-  activeRow.value = element.title
-}
+  try {
+    await formRef.value?.validateFields([...Object.keys(formState)])
+  } catch (e: any) {
+    e.errorFields.map((f: Record<string, any>) => console.error(f.errors.join(',')))
+  }
+})
+
+watch(activeRow, (newValue) => {
+  if (newValue) {
+    document
+      .querySelector(`.nc-form-field-item-${newValue?.replaceAll(' ', '')}`)
+      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+})
+
+useEventListener(
+  formRef,
+  'focusout',
+  (e: FocusEvent) => {
+    const nextActiveFieldTitle =
+      (e?.relatedTarget as HTMLElement)?.getAttribute('data-title') ||
+      (e?.relatedTarget as HTMLElement)?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title')
+
+    if (activeRow.value && nextActiveFieldTitle && activeRow.value !== nextActiveFieldTitle) {
+      if (isTabPressed.value) {
+        activeRow.value = nextActiveFieldTitle
+      }
+    }
+    isTabPressed.value = false
+  },
+  true,
+)
+
+useEventListener(
+  formRef,
+  'keydown',
+  (e: KeyboardEvent) => {
+    if (e.key === 'Tab') {
+      isTabPressed.value = true
+    } else {
+      isTabPressed.value = false
+    }
+  },
+  true,
+)
 </script>
 
 <template>
-  <template v-if="isMobileMode">
-    <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
-      <div class="text-gray-500 text-5xl font-semibold leading-16">
-        {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
-      </div>
-      <div class="text-gray-500 text-base font-medium leading-normal">
-        {{ $t('msg.formViewNotSupportedOnMobile') }}
-      </div>
-    </div>
-  </template>
-  <template v-else>
-    <a-row v-if="submitted" class="h-full" data-testid="nc-form-wrapper-submit">
-      <a-col :span="24">
-        <div v-if="formViewData" class="items-center justify-center text-center mt-2">
-          <a-alert type="success">
-            <template #message>
-              <div class="text-center">
-                {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
-              </div>
-            </template>
-          </a-alert>
-
-          <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
-            {{
-              $t('msg.newFormWillBeLoaded', {
-                seconds: secondsRemain,
-              })
-            }}
-          </div>
-
-          <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
-            <a-button type="primary" size="large" @click="submitted = false"> {{ $t('activity.submitAnotherForm') }}</a-button>
-          </div>
+  <div class="h-full">
+    <template v-if="isMobileMode">
+      <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
+        <div class="text-gray-500 text-5xl font-semibold leading-16">
+          {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
         </div>
-      </a-col>
-    </a-row>
-
-    <a-row v-else class="h-full flex" data-testid="nc-form-wrapper">
-      <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-dull nc-form-left-drawer">
-        <div class="flex flex-wrap gap-2">
-          <div class="flex-1 text-lg">
-            {{ $t('objects.fields') }}
-          </div>
-
-          <div class="flex flex-wrap gap-2 mb-4">
-            <NcButton
-              v-if="hiddenColumns.length"
-              type="secondary"
-              class="nc-form-add-all"
-              data-testid="nc-form-add-all"
-              :disabled="isLocked"
-              @click="addAllColumns"
-            >
-              <!-- Add all -->
-              {{ $t('general.addAll') }}
-            </NcButton>
-
-            <NcButton
-              v-if="localColumns.length"
-              type="secondary"
-              class="nc-form-remove-all"
-              data-testid="nc-form-remove-all"
-              :disabled="isLocked"
-              @click="removeAllColumns"
-            >
-              <!-- Remove all -->
-              {{ $t('general.removeAll') }}
-            </NcButton>
-          </div>
+        <div class="text-gray-500 text-base font-medium leading-normal">
+          {{ $t('msg.formViewNotSupportedOnMobile') }}
         </div>
-
-        <Draggable
-          :list="hiddenColumns"
-          item-key="id"
-          draggable=".item"
-          group="form-inputs"
-          :disabled="isLocked"
-          class="flex flex-col gap-2"
-          @start="drag = true"
-          @end="drag = false"
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-if="submitted"
+        class="h-full p-6 overflow-auto nc-form-scrollbar"
+        :style="{ background: parseProp(formViewData?.meta)?.background_color || '#F9F9FA' }"
+        data-testid="nc-form-wrapper-submit"
+      >
+        <GeneralFormBanner :banner-image-url="formViewData?.banner_image_url" />
+
+        <div
+          class="transition-all duration-300 ease-in relative max-w-[max(33%,688px)] mx-auto my-6 bg-white rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
         >
-          <template #item="{ element, index }">
-            <a-card
-              size="small"
-              class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
-              :class="{
-                '!bg-gray-50 !hover:bg-gray-50 !hover:ring-transparent !cursor-not-allowed': isLocked,
-              }"
-              :data-testid="`nc-form-hidden-column-${element.label || element.title}`"
-              @mousedown="moved = false"
-              @mousemove="moved = false"
-              @mouseup="handleMouseUp(element, index)"
-            >
-              <div class="flex">
-                <div class="flex flex-1">
-                  <LazySmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(element)"
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
-                  />
+          <div v-if="formViewData" class="items-center justify-center text-center mt-2">
+            <div>
+              <h1 class="text-2xl font-bold text-gray-900 mb-4">
+                {{ formViewData.heading }}
+              </h1>
 
-                  <LazySmartsheetHeaderCell
-                    v-else
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
-                  />
+              <h2 v-if="formViewData.subheading" class="font-medium text-base text-gray-500 mb-4">
+                {{ formViewData.subheading }}
+              </h2>
+            </div>
+
+            <div class="flex justify-center">
+              <div class="w-full lg:w-[95%]">
+                <a-alert type="success" class="!my-4 text-center !rounded-lg">
+                  <template #message>
+                    <div class="text-center">
+                      {{ formViewData.success_msg || $t('msg.successfullySubmittedFormData') }}
+                    </div>
+                  </template>
+                </a-alert>
+
+                <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
+                  {{
+                    $t('msg.newFormWillBeLoaded', {
+                      seconds: secondsRemain,
+                    })
+                  }}
                 </div>
-              </div>
-            </a-card>
-          </template>
 
-          <template v-if="!isLocked" #footer>
-            <div
-              class="my-4 select-none border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide"
-              data-testid="nc-drag-n-drop-to-hide"
-            >
-              <!-- Drag and drop fields here to hide -->
-              {{ $t('msg.info.dragDropHide') }}
+                <div v-if="formViewData.submit_another_form || !isPublic" class="text-center mt-4">
+                  <NcButton type="primary" size="medium" @click="submitted = false">
+                    {{ $t('activity.submitAnotherForm') }}
+                  </NcButton>
+                </div>
+              </div>
             </div>
-
-            <a-dropdown
-              v-model:visible="showColumnDropdown"
-              :trigger="['click']"
-              overlay-class-name="nc-dropdown-form-add-column"
-            >
-              <button type="button" class="group w-full mt-2" @click.stop="showColumnDropdown = true">
-                <span class="flex items-center flex-wrap justify-center gap-2 prose-sm text-gray-400">
-                  <component :is="iconMap.plus" class="color-transition transform group-hover:(text-accent scale-125)" />
-                  <!-- Add new field to this table -->
-                  <span class="color-transition group-hover:text-primary break-words">
-                    {{ $t('activity.addField') }}
-                  </span>
-                </span>
-              </button>
-
-              <template #overlay>
-                <SmartsheetColumnEditOrAddProvider
-                  v-if="showColumnDropdown"
-                  @submit="submitCallback"
-                  @cancel="showColumnDropdown = false"
-                  @click.stop
-                  @keydown.stop
-                />
-              </template>
-            </a-dropdown>
-          </template>
-        </Draggable>
-      </a-col>
-
-      <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-dull">
-        <div class="h-[200px] bg-primary bg-opacity-75">
-          <!-- for future implementation of cover image -->
+          </div>
         </div>
+      </div>
 
-        <a-card
-          class="p-4 border-none"
-          :body-style="{
-            maxWidth: 'max(50vw, 700px)',
-            margin: '0 auto',
-            marginTop: '-200px',
-            padding: '0px',
-          }"
+      <div v-else class="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'}"
         >
-          <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-            <a-card class="!rounded !shadow !m-2 md:(!m-4) xl:(!m-8)" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
-              <!-- Header -->
-              <div v-if="isEditable" class="px-4 lg:px-12">
-                <a-form-item v-if="isEditable">
-                  <a-textarea
-                    v-model:value="formViewData.heading"
-                    class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                    :style="{
-                      'borderRightWidth': '0px !important',
-                      'height': '70px',
-                      'max-height': '250px',
-                      'resize': 'vertical',
-                    }"
-                    autosize
-                    size="large"
-                    hide-details
-                    :disabled="isLocked"
-                    placeholder="Form Title"
-                    :bordered="false"
-                    data-testid="nc-form-heading"
-                    @blur="updateView"
-                    @keydown.enter="updateView"
-                  />
-                </a-form-item>
-              </div>
-              <div v-else class="px-4 ml-3 w-full text-bold text-4xl">
-                {{ formViewData.heading }}
-              </div>
-
-              <!-- Sub Header -->
-              <div v-if="isEditable" class="px-4 lg:px-12">
-                <a-form-item>
-                  <a-textarea
-                    v-model:value="formViewData.subheading"
-                    class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
-                    :style="{
-                      'borderRightWidth': '0px !important',
-                      'height': '40px',
-                      'min-height': '40px',
-                      'resize': 'vertical',
-                    }"
-                    size="large"
-                    autosize
-                    hide-details
-                    :placeholder="$t('msg.info.formDesc')"
-                    :bordered="false"
-                    :disabled="!isEditable || isLocked"
-                    data-testid="nc-form-sub-heading"
-                    @blur="updateView"
-                    @click="updateView"
-                  />
-                </a-form-item>
-              </div>
-
-              <div v-else class="px-4 ml-3 w-full text-bold text-md">
-                {{ formViewData.subheading || '---' }}
-              </div>
+          <div :class="isEditable ? 'min-w-[616px] overflow-x-auto nc-form-scrollbar' : ''">
+            <!-- for future implementation of cover image -->
+            <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+            <GeneralFormBanner
+              v-if="
+                formViewData.banner_image_url || !(parseProp(formViewData?.meta).hide_branding && !formViewData.banner_image_url)
+              "
+              :banner-image-url="formViewData.banner_image_url"
+            />
 
-              <Draggable
-                ref="draggableRef"
-                :list="localColumns"
-                item-key="fk_column_id"
-                draggable=".item"
-                group="form-inputs"
-                class="h-full"
-                :move="onMoveCallback"
-                :disabled="isLocked"
-                @change="onMove($event)"
-                @start="drag = true"
-                @end="drag = false"
-              >
-                <template #item="{ element, index }">
+            <a-card
+              class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 max-w-[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 v-if="isEditable">
+                    <div class="inline-block rounded-xl bg-gray-100 p-3">
+                      <NcButton type="secondary" size="small" class="nc-form-upload-logo" data-testid="nc-form-upload-log">
+                        <div class="flex gap-2 items-center">
+                          <component :is="iconMap.upload" class="w-4 h-4" />
+                          <span> Upload Logo </span>
+                        </div>
+                      </NcButton>
+                    </div>
+                  </div> -->
+                  <!-- form title -->
                   <div
-                    class="color-transition nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
+                    class="border-transparent px-4 lg:px-6"
                     :class="[
-                      `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                       {
-                        'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
+                        '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 !== 'nc-form-heading' && isEditable,
                       },
                       {
                         '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                       },
                     ]"
-                    data-testid="nc-form-fields"
-                    @click="onFormItemClick(element)"
+                    @click.stop="onFormItemClick({ title: 'nc-form-heading' })"
                   >
-                    <div
-                      v-if="isUIAllowed('viewFieldEdit') && !isRequired(element, element.required) && !isLocked"
-                      class="absolute flex top-2 right-2"
-                    >
-                      <component
-                        :is="iconMap.eyeSlash"
-                        class="opacity-0 nc-field-remove-icon"
-                        data-testid="nc-field-remove-icon"
-                        @click.stop="hideColumn(index)"
+                    <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="nc-form-heading"
+                        data-title="nc-form-heading"
+                        @blur="updateView"
+                        @keydown.enter="updateView"
                       />
-                    </div>
-
-                    <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
-                      <div class="flex gap-2 items-center">
-                        <span
-                          class="text-gray-500 mr-2 nc-form-input-required"
-                          data-testid="nc-form-input-required"
-                          @click="
-                            () => {
-                              element.required = !element.required
-                              updateColMeta(element)
-                            }
-                          "
-                        >
-                          {{ $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 v-if="columnSupportsScanning(element.uidt)" class="my-0 w-1/2 !mb-1">
-                        <div class="flex gap-2 items-center">
-                          <span
-                            class="text-gray-500 mr-2 nc-form-input-required"
-                            data-testid="nc-form-input-enable-scanner"
-                            @click="
-                              () => {
-                                element.general.enable_scanner = !element.general.enable_scanner
-                                updateColMeta(element)
-                              }
-                            "
-                          >
-                            {{ $t('general.enableScanner') }}
-                          </span>
+                    </a-form-item>
 
-                          <a-switch
-                            v-model:checked="element.enable_scanner"
-                            v-e="['a:form-view:field:mark-enable-scaner']"
-                            size="small"
-                            @change="updateColMeta(element)"
-                          />
-                        </div>
-                      </a-form-item>
-
-                      <a-form-item class="my-0 w-1/2 !mb-1">
-                        <a-input
-                          v-model:value="element.label"
-                          type="text"
-                          class="form-meta-input nc-form-input-label"
-                          data-testid="nc-form-input-label"
-                          :placeholder="$t('msg.info.formInput')"
-                          @change="updateColMeta(element)"
-                        >
-                        </a-input>
-                      </a-form-item>
-
-                      <a-form-item class="mt-2 mb-0 w-1/2">
-                        <a-input
-                          v-model:value="element.description"
-                          type="text"
-                          class="form-meta-input text-sm nc-form-input-help-text"
-                          data-testid="nc-form-input-help-text"
-                          :placeholder="$t('msg.info.formHelpText')"
-                          @change="updateColMeta(element)"
-                        />
-                      </a-form-item>
+                    <div v-else class="font-bold text-2xl text-gray-900">
+                      {{ formViewData.heading }}
                     </div>
+                  </div>
 
-                    <div>
-                      <LazySmartsheetHeaderVirtualCell
-                        v-if="isVirtualCol(element)"
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                        data-testid="nc-form-input-label"
+                  <!-- 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 !== 'nc-form-sub-heading' && isEditable,
+                      },
+                      {
+                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                      },
+                    ]"
+                    @click.stop="onFormItemClick({ title: 'nc-form-sub-heading' })"
+                  >
+                    <a-form-item v-if="isEditable" class="w-full !my-0">
+                      <a-textarea
+                        v-model:value="formViewData.subheading"
+                        class="nc-form-focus-element w-full !px-0 !m-0 !border-0 !rounded-none font-medium text-base !text-gray-500"
+                        :style="{
+                          borderRightWidth: '0px !important',
+                          resize: 'vertical',
+                        }"
+                        size="large"
+                        auto-size
+                        hide-details
+                        :placeholder="$t('msg.info.formDesc')"
+                        :bordered="false"
+                        :disabled="!isEditable || isLocked"
+                        data-testid="nc-form-sub-heading"
+                        data-title="nc-form-sub-heading"
+                        @blur="updateView"
+                        @click="updateView"
                       />
+                    </a-form-item>
 
-                      <LazySmartsheetHeaderCell
-                        v-else
-                        :column="{ ...element, title: element.label || element.title }"
-                        :required="isRequired(element, element.required)"
-                        :hide-menu="true"
-                        data-testid="nc-form-input-label"
-                      />
+                    <div v-else class="font-medium text-base text-gray-500">
+                      {{ formViewData.subheading || '---' }}
                     </div>
+                  </div>
+                </div>
 
-                    <a-form-item
-                      v-if="isVirtualCol(element)"
-                      :name="element.title"
-                      class="!mb-0 nc-input-required-error nc-form-input-item"
-                      :rules="[
+                <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(' ', '')}`,
                         {
-                          required: isRequired(element, element.required),
-                          message: `${element.label || element.title} is required`,
+                          'rounded-2xl overflow-hidden border-2 cursor-pointer 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 ':
+                            activeRow !== element.title && isEditable,
                         },
-                      ]"
-                    >
-                      <LazySmartsheetVirtualCell
-                        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"
-                        @click.stop.prevent
-                      />
-                    </a-form-item>
 
-                    <a-form-item
-                      v-else
-                      :name="element.title"
-                      class="!mb-0 nc-input-required-error nc-form-input-item"
-                      :rules="[
                         {
-                          required: isRequired(element, element.required),
-                          message: `${element.label || element.title} is required`,
+                          'border-brand-500': activeRow === element.title,
+                        },
+                        {
+                          '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                         },
                       ]"
+                      :style="{
+                        transition: 'height 1s ease-in',
+                      }"
+                      :data-title="element.title"
+                      data-testid="nc-form-fields"
+                      @click.stop="onFormItemClick(element)"
                     >
-                      <LazySmartsheetDivDataCell class="relative">
-                        <LazySmartsheetCell
-                          v-model="formState[element.title]"
-                          class="nc-input truncate"
-                          :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                          :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                          :column="element"
-                          :edit-enabled="editEnabled[index]"
-                          @click="editEnabled[index] = true"
-                          @cancel="editEnabled[index] = false"
-                          @update:edit-enabled="editEnabled[index] = $event"
-                          @click.stop.prevent
+                      <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>
+
+                        <div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text">
+                          {{ element.description }}
+                        </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"
                         />
-                      </LazySmartsheetDivDataCell>
-                    </a-form-item>
+                        <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="nc-form-input-required text-gray-500 mr-2"
+                              data-testid="nc-form-input-required"
+                              @click.stop="
+                                () => {
+                                  element.required = !element.required
+                                  updateColMeta(element)
+                                }
+                              "
+                            >
+                              {{ $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>
 
-                    <div class="nc-form-help-text text-gray-500 text-xs truncate" data-testid="nc-form-input-help-text-label">
-                      {{ element.description }}
+                      <!-- 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">
+                            <a-textarea
+                              v-model:value="element.description"
+                              :rows="1"
+                              auto-size
+                              hide-details
+                              class="form-meta-input nc-form-input-help-text"
+                              data-testid="nc-form-input-help-text"
+                              :placeholder="$t('msg.info.formHelpText')"
+                              @keydown.enter.prevent
+                              @change="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(' ', '')}`"
+                                :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                                :column="element"
+                                :edit-enabled="true"
+                              />
+                            </LazySmartsheetDivDataCell>
+                          </a-form-item>
+                        </div>
+                      </div>
+
+                      <!-- Field Settings  -->
+                      <!-- eslint-disable vue/no-constant-condition -->
+                      <div
+                        v-if="activeRow === element.title && false"
+                        class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6"
+                      >
+                        <!-- Todo: Show on conditions, options limit,... -->
+                        <div 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" />
+                          <div>
+                            <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
+                            <div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+
+                  <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"
+                    >
+                      {{ $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>
+
+              <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>
+            </a-card>
+          </div>
+        </div>
+        <div v-if="isEditable" class="h-full flex-1 max-w-[384px] nc-form-left-drawer border-l border-gray-200">
+          <Splitpanes 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>
-                </template>
+                  <NcBadge color="border-gray-200">
+                    {{ visibleColumns.length }}/{{ localColumns.length }} {{ $t('objects.field') }}
+                  </NcBadge>
+                </div>
 
-                <template #footer>
+                <a-dropdown
+                  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"
+                  >
+                    <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') }}
+                </div>
+                <template v-if="localColumns.length">
                   <div
-                    v-if="!localColumns.length"
-                    class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                    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
                   >
-                    {{ $t('activity.dragAndDropFieldsHereToAdd') }}
+                    <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">
+                        <NcSwitch
+                          :checked="visibleColumns.length === localColumns.length"
+                          @change="handleAddOrRemoveAllColumns"
+                        />
+                      </div>
+                    </div>
                   </div>
+                  <Draggable
+                    :list="localColumns"
+                    item-key="id"
+                    ghost-class="nc-form-field-ghost"
+                    :style="{ height: 'calc(100% - 64px)' }"
+                    @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" />
+                        <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>
+                          </div>
+                          <NcSwitch :checked="!!field.show" :disabled="field.required" />
+                        </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>
-              </Draggable>
-
-              <div class="justify-center flex mt-6">
-                <NcButton
-                  html-type="submit"
-                  type="primary"
-                  :disabled="!isUIAllowed('dataInsert')"
-                  class="nc-form-submit"
-                  data-testid="nc-form-submit"
-                  @click="submitForm"
-                >
-                  {{ $t('general.submit') }}
-                </NcButton>
               </div>
-            </a-card>
-          </a-form>
+            </Pane>
+            <Pane
+              v-if="isEditable && !isLocked && formViewData"
+              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>
+                  <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>
 
-          <a-divider v-if="!isLocked" />
+                <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"
+                    @change="
+                      (value) => {
+                        (formViewData!.meta as Record<string,any>).hide_branding = value
+                        updateView()
+                      }
+                    "
+                  />
+                  <a-tooltip v-else placement="top">
+                    <template #title>
+                      {{ $t('msg.info.upgradeToEnterpriseEdition', { extraInfo: `to ${$t('labels.hideNocodbBranding')}` }) }}
+                    </template>
+                    <a-switch :checked="false" size="small" :disabled="true" />
+                  </a-tooltip>
+                  <span class="ml-4">{{ $t('labels.hideNocodbBranding') }}</span>
+                </div>
+              </div>
 
-          <div v-if="isEditable && !isLocked" class="px-4 flex flex-col gap-2">
-            <!-- After form is submitted -->
-            <div class="text-lg text-gray-700">
-              {{ $t('msg.info.afterFormSubmitted') }}
-            </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') }}
+                </div>
 
-            <!-- Show this message -->
-            <div class="text-gray-500 text-bold">{{ $t('msg.info.showMessage') }}:</div>
-            <a-textarea
-              v-model:value="formViewData.success_msg"
-              :rows="3"
-              hide-details
-              class="nc-form-after-submit-msg"
-              data-testid="nc-form-after-submit-msg"
-              @change="updateView"
-            />
+                <!-- Show this message -->
+                <div>
+                  <div class="text-gray-800 mb-2">
+                    {{ $t('msg.info.formDisplayMessage') }}
+                  </div>
+                  <a-textarea
+                    v-model:value="formViewData.success_msg"
+                    :rows="3"
+                    hide-details
+                    class="nc-form-after-submit-msg !rounded-lg !px-3 !py-1"
+                    data-testid="nc-form-after-submit-msg"
+                    @change="updateView"
+                  />
+                </div>
 
-            <!-- Other options -->
-            <div class="flex flex-col gap-2 mt-4">
-              <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"
-                  @change="updateView"
-                />
-                <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
-              </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"
+                      @change="updateView"
+                    />
+                    <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</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"
-                  @change="updateView"
-                />
-
-                <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"
+                      @change="updateView"
+                    />
+
+                    <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
+                  </div>
 
-              <div class="mb-12 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"
-                  @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>
+                  <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"
+                      @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>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </template>
+            </Pane>
+          </Splitpanes>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -915,8 +1250,7 @@ const onFormItemClick = (element: any) => {
 }
 
 .nc-input {
-  @apply appearance-none w-full !bg-white rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
-
+  @apply appearance-none w-full !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
   &.nc-cell-rating,
   &.nc-cell-geodata {
     @apply !py-1;
@@ -925,23 +1259,46 @@ const onFormItemClick = (element: any) => {
   :deep(input) {
     @apply !px-1;
   }
-}
+  &.nc-cell-longtext {
+    @apply p-0 h-auto;
+  }
+  &:not(.nc-cell-longtext) {
+    @apply px-2 py-2;
+
+    :deep(textarea) {
+      @apply !p-2;
+    }
+  }
 
-.form-meta-input::placeholder {
-  @apply text-[#3d3d3d] italic;
+  &.nc-cell-json {
+    @apply h-auto;
+    & > div {
+      @apply w-full;
+    }
+  }
 }
 
-.nc-form-input-label,
-.nc-form-input-help-text {
+.form-meta-input {
+  @apply !rounded-lg !text-sm;
   &::placeholder {
-    @apply !text-gray-500 !text-xs;
+    @apply !text-gray-500;
   }
 }
 
+.nc-form-input-label {
+  @apply !px-4 !py-2 font-semibold text-gray-800;
+}
+.nc-form-input-help-text {
+  @apply !px-4 !py-1 text-gray-700;
+}
+
 .nc-form-help-text,
 .nc-input-required-error {
   max-width: 100%;
   white-space: pre-line;
+  :deep(.ant-form-item-explain-error) {
+    @apply mt-2;
+  }
 }
 
 :deep(.nc-cell-attachment) {
@@ -967,4 +1324,37 @@ const onFormItemClick = (element: any) => {
     @apply !border-none;
   }
 }
+
+.nc-form-input-enable-scanner-form-item {
+  :deep(.ant-form-item-control-input) {
+    @apply min-h-max;
+  }
+}
+:deep(.nc-form-right-splitpane .splitpanes__splitter) {
+  @apply !border-t-1 !border-gray-200 relative;
+
+  &::before {
+    @apply content-[':::'] block h-4 leading-12px px-2 font-bold text-gray-800 border-1 border-gray-200 rounded bg-white absolute -top-2.5 z-100 left-[calc(50%_-_16px)];
+  }
+}
+
+.nc-form-scrollbar {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
+  &::-webkit-scrollbar-thumb:hover {
+    @apply !scrollbar-thumb-gray-300;
+  }
+}
+:deep(.nc-form-theme-color-picker .color-selector) {
+  @apply !text-white;
+}
+
+:deep(.nc-form-field-body .nc-cell) {
+  @apply my-0;
+}
+.nc-form-field-ghost {
+  @apply bg-gray-50;
+}
+:deep(.nc-form-input-required + button):focus {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 4628cca234..409dbcd850 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -458,6 +458,7 @@ const onResizeEnd = () => {
   document.removeEventListener('mousemove', onResize)
   document.removeEventListener('mouseup', onResizeEnd)
 }
+
 const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
   if (!isUIAllowed('dataEdit')) return
   resizeInProgress.value = true
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 23fceac8a6..269212f5cc 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -171,7 +171,7 @@ watch([activeViewTitleOrId, activeTableId], () => {
     <div style="height: calc(100% - var(--topbar-height))">
       <div v-if="openedViewsTab === 'view'" class="flex flex-col h-full flex-1 min-w-0">
         <LazySmartsheetToolbar v-if="!isForm" />
-        <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
+        <div class="flex flex-row w-full" :style="{ height: isForm ? '100%' : 'calc(100% - var(--topbar-height))' }">
           <Transition name="layout" mode="out-in">
             <div v-if="openedViewsTab === 'view'" class="flex flex-1 min-h-0 w-3/4">
               <div class="h-full flex-1 min-w-0 min-h-0 bg-white">
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 24a75723f5..e60f089657 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -76,7 +76,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     }),
   )
 
-  const fieldRequired = (fieldName = 'Value') => helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
+  const fieldRequired = (fieldName = 'This field') =>
+    helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
 
   const formColumns = computed(() =>
     columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
@@ -158,7 +159,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         !isVirtualCol(column) &&
         ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required)
       ) {
-        obj.localState[column.title!] = { required: fieldRequired(column.label || column.title) }
+        obj.localState[column.title!] = { required: fieldRequired() }
       } else if (
         isLinksOrLTAR(column) &&
         column.colOptions &&
@@ -168,13 +169,13 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
         if ((col && col.rqd && !col.cdf) || column.required) {
           if (col) {
-            obj.virtual[column.title!] = { required: fieldRequired(column.label || column.title) }
+            obj.virtual[column.title!] = { required: fieldRequired() }
           }
         }
       } else if (isVirtualCol(column) && column.required) {
         obj.virtual[column.title!] = {
           minLength: minLength(1),
-          required: fieldRequired(column.label || column.title),
+          required: fieldRequired(),
         }
       }
     }
@@ -190,6 +191,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const submitForm = async () => {
     try {
       if (!(await v$.value?.$validate())) {
+        message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty'))
         return
       }
 
@@ -226,6 +228,14 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     progress.value = false
   }
 
+  const clearForm = async () => {
+    formResetHook.trigger()
+
+    additionalState.value = {}
+    formState.value = {}
+    v$.value?.$reset()
+  }
+
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
     if (nextVal && sharedFormView.value?.show_blank_form) {
@@ -261,6 +271,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     loadSharedView,
     columns,
     submitForm,
+    clearForm,
     progress,
     meta,
     validators,
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index 7771e4e6cd..c7e0889fdd 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -54,7 +54,6 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
 
     const loadViewColumns = async () => {
       if (!meta || !view) return
-
       let order = 1
 
       if (view.value?.id) {
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index ef44dc5cd4..da3c4d105d 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -278,16 +278,16 @@ export function useViewData(
     if (!viewMeta?.value?.id) return
     try {
       const { columns, ...view } = await $api.dbView.formRead(viewMeta.value.id)
-
-      const fieldById = (columns || []).reduce(
-        (o: Record<string, any>, f: Record<string, any>) => ({
+      let order = 1
+      const fieldById = (columns || []).reduce((o: Record<string, any>, f: Record<string, any>) => {
+        if (order < f.order) {
+          order = f.order
+        }
+        return {
           ...o,
           [f.fk_column_id]: f,
-        }),
-        {} as Record<string, FormColumnType>,
-      )
-
-      let order = 1
+        }
+      }, {} as Record<string, FormColumnType>)
 
       formViewData.value = view
 
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 61b23ad71a..5018386fa2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -421,7 +421,8 @@
       "restrict": "Restrict",
       "setNull": "Set NULL",
       "setDefault": "Set Default"
-    }
+    },
+    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here"
   },
   "labels": {
     "selectYear": "Select Year",
@@ -683,7 +684,12 @@
       "incompleteConfiguration": "Incomplete configuration",
       "selectField": "Select a field",
       "selectFieldLabel": "Make changes to field properties by selecting a field from the list"
-    }
+    },
+    "appearanceSettings":"Appearance Settings",
+    "backgroundColor":"Background Color",
+    "hideNocodbBranding":"Hide NocoDB Branding",
+    "showOnConditions": "Show on condtions",
+    "showFieldOnConditionsMet":"Shows field only when conditions are met"
   },
   "activity": {
     "goToToday": "Go to Today",
@@ -907,7 +913,10 @@
       "openInOpenStreetMap": "OSM"
     },
     "toggleMobileMode": "Toggle Mobile Mode",
-    "startCommenting": "Start commenting!"
+    "startCommenting": "Start commenting!",
+    "clearForm": "Clear Form",
+    "addFieldFromFormView": "Add Field",
+    "selectAllFields": "Select all fields"
   },
   "tooltip": {
     "reachedSourceLimit": "Limited to only one data source for the moment",
@@ -1166,14 +1175,14 @@
       "afterEnablePwd": "Access is password restricted",
       "privateLink": "This view is shared via a private link",
       "privateLinkAdditionalInfo": "People with private link can only see cells visible in this view",
-      "afterFormSubmitted": "After form is submitted",
+      "postFormSubmissionSettings": "Post Form Submission Settings",
       "apiOptions": "Access Base via",
       "submitAnotherForm": "Show 'Submit Another Form' button",
       "showBlankForm": "Show a blank form after 5 seconds",
       "emailForm": "E-mail me at",
       "showSysFields": "Show system fields",
       "filterAutoApply": "Auto apply",
-      "showMessage": "Show this message",
+      "formDisplayMessage": "Display Message",
       "viewNotShared": "Current view is not shared!",
       "showAllViews": "Show all shared views of this table",
       "collabView": "Collaborators with edit permissions or higher can change the view configuration.",
@@ -1283,7 +1292,8 @@
       "editingSystemKeyNotSupported": "Editing system key not supported",
       "notAvailableAtTheMoment": "Not available at the moment",
       "groupPasteIsNotSupportedOnLinksColumn": "Group paste operation is not supported on Links/LinkToAnotherRecord column",
-      "groupClearIsNotSupportedOnLinksColumn": "Group clear operation is not supported on Links/LinkToAnotherRecord column"
+      "groupClearIsNotSupportedOnLinksColumn": "Group clear operation is not supported on Links/LinkToAnotherRecord column",
+      "upgradeToEnterpriseEdition": "Upgrade to Enterprise Edition {extraInfo}"
     },
     "error": {
       "scopesRequired": "Scopes required",
@@ -1369,14 +1379,15 @@
       "theAcceptedFileTypesAreXlsXlsxXlsmOdsOts": "The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots",
       "parameterKeyCannotBeEmpty": "Parameter key cannot be empty",
       "duplicateParameterKeysAreNotAllowed": "Duplicate parameter keys are not allowed",
-      "fieldRequired": "{value} cannot be empty.",
+      "fieldRequired": "{value} cannot be empty",
       "projectNotAccessible": "Base not accessible",
       "copyToClipboardError": "Failed to copy to clipboard",
       "pasteFromClipboardError": "Failed to paste from clipboard",
       "multiFieldSaveValidation": "Please complete the configuration of all fields before saving",
       "somethingWentWrong": "Something went wrong",
       "draggedContentIsNotTypeOfImage": "Dragged content is not type of image",
-      "fieldToParseImageData": "Field to parse image data"
+      "fieldToParseImageData": "Field to parse image data",
+      "someOfTheRequiredFieldsAreEmpty": "Some of the required fields are empty"
     },
     "toast": {
       "exportMetadata": "Base metadata exported successfully",
diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index c6802c92af..85b1f64d29 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import { iconMap, onMounted, useEventListener, useGlobal, useRouter, useSharedView } from '#imports'
 
 const { isLoading, appInfo } = useGlobal()
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[baseId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/[baseId]/index.vue
index 49249e5c00..ed2a6014e5 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/[baseId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/[baseId]/index.vue
@@ -133,7 +133,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
 .nc-left-sidebar {
   .nc-sidebar-left-toggle-icon {
-    @apply opacity-0 transition-opactity duration-200 transition-color text-gray-500/80 hover:text-gray-500/100;
+    @apply opacity-0 transition-opacity duration-200 transition-colors text-gray-500/80 hover:text-gray-500/100;
 
     .nc-left-sidebar {
       @apply !border-r-0;
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index eded02fb98..13a91b6536 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -1,27 +1,22 @@
 <script setup lang="ts">
-import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedViewMeta } = useSharedFormStoreOrThrow()
+const { sharedViewMeta, sharedFormView } = useSharedFormStoreOrThrow()
 
 const isDark = useDark()
 
-const { setTheme } = useTheme()
-
 const route = useRoute()
 
 const router = useRouter()
 
-watch(
-  () => sharedViewMeta.value.withTheme,
-  (hasTheme) => {
-    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme)
-  },
-  { immediate: true },
-)
+// For now dark theme is disabled
+// const onClick = () => {
+//   isDark.value = !isDark.value
+// }
 
-const onClick = () => {
-  isDark.value = !isDark.value
-}
+onMounted(() => {
+  isDark.value = false
+})
 
 const shouldRedirect = (to: string) => {
   if (sharedViewMeta.value.surveyMode) {
@@ -38,11 +33,14 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-[100vh] min-h-[600px] py-4"
+    class="scrollbar-thin-dull h-[100vh] overflow-y-auto overflow-x-hidden flex flex-col color-transition p-4 lg:p-10 nc-form-view relative min-h-[600px]"
+    :style="{
+      background: parseProp(sharedFormView?.meta)?.background_color || '#F9F9FA',
+    }"
   >
     <NuxtPage />
 
-    <div
+    <!-- <div
       class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
     >
@@ -50,7 +48,7 @@ router.afterEach((to) => shouldRedirect(to.name as string))
         <MaterialSymbolsDarkModeOutline v-if="isDark" />
         <MaterialSymbolsLightModeOutline v-else />
       </Transition>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -68,10 +66,6 @@ p {
 }
 
 .nc-form-view {
-  .nc-data-cell {
-    @apply border-solid border-1 !border-gray-300 dark:!border-slate-200;
-  }
-
   .nc-cell {
     @apply bg-white dark:bg-slate-500;
 
@@ -95,15 +89,7 @@ p {
       @apply bg-white dark:bg-slate-500;
 
       &.nc-input {
-        @apply w-full px-3 min-h-[40px] flex items-center;
-
-        &.nc-cell-longtext {
-          @apply !px-1;
-        }
-
-        &.nc-cell-json {
-          @apply !h-auto;
-        }
+        @apply w-full rounded p-2 min-h-[40px] flex items-center;
 
         .duration-cell-wrapper {
           @apply w-full;
@@ -132,11 +118,37 @@ p {
           }
         }
 
+        &.nc-cell-longtext {
+          @apply p-0 h-auto;
+          & > div {
+            @apply w-full;
+          }
+          :deep(textarea) {
+            @apply !p-2;
+
+            &:focus {
+              box-shadow: none !important;
+            }
+          }
+        }
+        &:not(.nc-cell-longtext) {
+          @apply px-2 py-2;
+        }
+
         textarea {
+          @apply px-4 py-2 rounded;
+
           &:focus {
             box-shadow: none !important;
           }
         }
+
+        &.nc-cell-json {
+          @apply h-auto;
+          & > div {
+            @apply w-full;
+          }
+        }
       }
     }
 
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 416de6a64d..57f239400d 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -3,10 +3,21 @@ import type { ColumnType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { ref } from 'vue'
 import { StreamBarcodeReader } from 'vue-barcode-reader'
-import { iconMap, useGlobal, useSharedFormStoreOrThrow } from '#imports'
+import { iconMap, useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
-  useSharedFormStoreOrThrow()
+const {
+  sharedFormView,
+  submitForm,
+  clearForm,
+  v$,
+  formState,
+  notFound,
+  formColumns,
+  submitted,
+  secondsRemain,
+  isLoading,
+  progress,
+} = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -21,8 +32,6 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
   return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
 }
 
-const { isMobileMode } = useGlobal()
-
 const fieldTitleForCurrentScan = ref('')
 
 const scannerIsReady = ref(false)
@@ -70,32 +79,37 @@ const onDecode = async (scannedCodeValue: string) => {
 </script>
 
 <template>
-  <div class="h-full flex flex-col items-center" :class="isMobileMode ? 'mobile' : 'desktop'">
+  <div class="h-full flex flex-col items-center">
+    <GeneralFormBanner
+      v-if="sharedFormView"
+      :banner-image-url="sharedFormView.banner_image_url"
+      class="flex-none dark:border-none"
+    />
+
     <div
-      class="color-transition flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
+      class="transition-all duration-300 ease-in relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,688px)] mx-auto my-6 bg-white dark:bg-transparent rounded-3xl border-1 border-gray-200 px-4 py-8 lg:p-12 md:(p-8 dark:bg-slate-700)"
     >
       <template v-if="sharedFormView">
-        <h1 class="prose-2xl font-bold self-center my-4 break-words">
-          {{ sharedFormView.heading }}
-        </h1>
+        <div class="mb-4">
+          <h1 class="text-2xl font-bold text-gray-900 mb-4">
+            {{ sharedFormView.heading }}
+          </h1>
 
-        <h2
-          v-if="sharedFormView.subheading"
-          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6 break-words"
-        >
-          {{ sharedFormView.subheading }}
-        </h2>
+          <h2 v-if="sharedFormView.subheading" class="font-medium text-base text-gray-500 dark:text-slate-300 mb-4">
+            {{ sharedFormView.subheading }}
+          </h2>
+        </div>
 
-        <a-alert v-if="notFound" type="warning" class="my-4 text-center" :message="$t('general.notFound')" />
+        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 
         <template v-else-if="submitted">
           <div class="flex justify-center">
-            <div v-if="sharedFormView" class="min-w-350px mt-3">
+            <div v-if="sharedFormView" class="w-full lg:w-[95%]">
               <a-alert
                 type="success"
-                class="my-4 text-center"
+                class="!my-4 text-center !rounded-lg"
                 outlined
-                :message="sharedFormView.success_msg || $t('msg.successfullySubmittedFormData')"
+                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
               />
 
               <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
@@ -103,7 +117,9 @@ const onDecode = async (scannedCodeValue: string) => {
               </p>
 
               <div v-if="sharedFormView.submit_another_form" class="text-center">
-                <a-button type="primary" @click="submitted = false"> {{ $t('activity.submitAnotherForm') }}</a-button>
+                <NcButton type="primary" size="medium" @click="submitted = false">
+                  {{ $t('activity.submitAnotherForm') }}</NcButton
+                >
               </div>
             </div>
           </div>
@@ -124,7 +140,7 @@ const onDecode = async (scannedCodeValue: string) => {
               <StreamBarcodeReader v-show="scannerIsReady" @decode="onDecode" @loaded="onLoaded"> </StreamBarcodeReader>
             </div>
           </a-modal>
-          <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
+          <GeneralOverlay class="bg-gray-50/75 rounded-3xl" :model-value="isLoading" inline transition>
             <div class="w-full h-full flex items-center justify-center">
               <a-spin size="large" />
             </div>
@@ -132,22 +148,16 @@ const onDecode = async (scannedCodeValue: string) => {
 
           <div class="nc-form-wrapper">
             <div class="nc-form h-full">
-              <div class="flex flex-col gap-6">
+              <div class="flex flex-col gap-3 md:gap-6">
                 <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
-                  <div class="flex nc-form-column-label">
-                    <LazySmartsheetHeaderVirtualCell
-                      v-if="isVirtualCol(field)"
-                      :column="{ ...field, title: field.label || field.title }"
-                      :required="isRequired(field, field.required)"
-                      :hide-menu="true"
-                    />
-
-                    <LazySmartsheetHeaderCell
-                      v-else
-                      :column="{ ...field, title: field.label || field.title }"
-                      :required="isRequired(field, field.required)"
-                      :hide-menu="true"
-                    />
+                  <div class="nc-form-column-label text-sm font-semibold text-gray-800">
+                    <span>
+                      {{ field.label || field.title }}
+                    </span>
+                    <span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
+                  </div>
+                  <div v-if="field?.description" class="nc-form-column-description text-gray-500 text-sm">
+                    {{ field?.description }}
                   </div>
 
                   <div>
@@ -182,34 +192,59 @@ const onDecode = async (scannedCodeValue: string) => {
                       </a-button>
                     </LazySmartsheetDivDataCell>
 
-                    <div
-                      class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1 leading-[18px]"
-                      style="word-break: break-word"
-                    >
-                      <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                        {{ error.$message }}
-                      </div>
-
-                      {{ field.description }}
+                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-sm mt-2">
+                      <template v-if="isVirtualCol(field)">
+                        <div v-for="error of v$.virtual[field.title]?.$errors" :key="`${error}virtual`" class="text-red-500">
+                          {{ error.$message }}
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                          {{ error.$message }}
+                        </div>
+                      </template>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div class="text-center mt-4">
-                <NcButton type="primary" html-type="submit" data-testid="shared-form-submit-button" @click="submitForm">
+              <div class="flex justify-between items-center mt-6">
+                <NcButton
+                  html-type="reset"
+                  type="secondary"
+                  size="small"
+                  :disabled="isLoading"
+                  class="nc-shared-form-button shared-form-clear-button"
+                  data-testid="shared-form-clear-button"
+                  @click="clearForm"
+                >
+                  {{ $t('activity.clearForm') }}
+                </NcButton>
+
+                <NcButton
+                  html-type="submit"
+                  :disabled="progress"
+                  type="primary"
+                  size="small"
+                  class="nc-shared-form-button shared-form-submit-button"
+                  data-testid="shared-form-submit-button"
+                  @click="submitForm"
+                >
                   {{ $t('general.submit') }}
                 </NcButton>
               </div>
             </div>
           </div>
+          <div>
+            <a-divider class="!my-6 !md:my-8" />
+            <div class="inline-block">
+              <GeneralFormBranding />
+            </div>
+          </div>
         </template>
       </template>
     </div>
-
-    <div class="flex items-end">
-      <GeneralPoweredBy />
-    </div>
+    <div>&nbsp;</div>
   </div>
 </template>
 
@@ -221,4 +256,10 @@ const onDecode = async (scannedCodeValue: string) => {
   @apply h-auto;
   @apply ml-1;
 }
+
+.nc-shared-form-button {
+  &.nc-button.ant-btn:focus {
+    box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
+  }
+}
 </style>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index b1647936d1..cc3e0f27a5 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -242,13 +242,13 @@ onMounted(() => {
       class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
     >
       <div class="px-4 md:px-0 flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading">
+        <h1 class="text-2xl font-bold text-gray-900 self-center my-4" data-testid="nc-survey-form__heading">
           {{ sharedFormView.heading }}
         </h1>
 
         <h2
           v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
-          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+          class="font-medium text-base text-gray-500 dark:text-gray-300 self-center mb-4"
           data-testid="nc-survey-form__sub-heading"
         >
           {{ sharedFormView?.subheading }}
@@ -264,24 +264,21 @@ onMounted(() => {
           class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
-            <div class="flex nc-form-column-label" data-testid="nc-form-column-label">
-              <LazySmartsheetHeaderVirtualCell
-                v-if="isVirtualCol(field)"
-                :column="{ ...field, title: field.label || field.title }"
-                :required="isRequired(field, field.required)"
-                :hide-menu="true"
-              />
-
-              <LazySmartsheetHeaderCell
-                v-else
-                :class="field.uidt === UITypes.Checkbox ? 'nc-form-column-label__checkbox' : ''"
-                :column="{ meta: {}, ...field, title: field.label || field.title }"
-                :required="isRequired(field, field.required)"
-                :hide-menu="true"
-              />
+            <div class="nc-form-column-label text-sm font-semibold text-gray-800" data-testid="nc-form-column-label">
+              <span>
+                {{ field.label || field.title }}
+              </span>
+              <span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
+            </div>
+            <div
+              v-if="field?.description"
+              class="nc-form-column-description text-gray-500 text-sm"
+              data-testid="nc-survey-form__field-description"
+            >
+              {{ field?.description }}
             </div>
 
-            <LazySmartsheetDivDataCell v-if="field.title" class="relative">
+            <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 v-model="formState[field.title]"
@@ -304,13 +301,6 @@ onMounted(() => {
                 <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                   {{ error.$message }}
                 </div>
-                <div
-                  class="block text-[14px]"
-                  :class="field.uidt === UITypes.Checkbox ? 'text-center' : ''"
-                  data-testid="nc-survey-form__field-description"
-                >
-                  {{ field.description }}
-                </div>
 
                 <div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center">
                   {{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }}
@@ -323,19 +313,18 @@ onMounted(() => {
           <div class="ml-1 mt-4 flex w-full text-lg">
             <div class="flex-1 flex justify-center">
               <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-                <button
+                <NcButton
                   :class="
                     animationTarget === AnimationTarget.SubmitButton && isAnimating
                       ? 'transform translate-y-[1px] translate-x-[1px] ring ring-accent ring-opacity-100'
                       : ''
                   "
-                  type="submit"
-                  class="uppercase scaling-btn prose-sm"
+                  html-type="submit"
                   data-testid="nc-survey-form__btn-submit"
                   @click="submit"
                 >
                   {{ $t('general.submit') }}
-                </button>
+                </NcButton>
               </div>
 
               <div v-else-if="!submitted" class="flex items-center gap-3 flex-col">
@@ -357,18 +346,20 @@ onMounted(() => {
                     ]"
                     @click="goNext()"
                   >
-                    <Transition name="fade">
-                      <span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">{{ $t('general.ok') }}</span>
-                    </Transition>
-
-                    <Transition name="slide-right" mode="out-in">
-                      <component
-                        :is="iconMap.closeCircle"
-                        v-if="v$.localState[field.title]?.$error || columnValidationError"
-                        class="text-red-500 md:text-md"
-                      />
-                      <component :is="iconMap.check" v-else class="text-white md:text-md" />
-                    </Transition>
+                    <div class="flex items-center gap-1">
+                      <Transition name="fade">
+                        <span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">Ok</span>
+                      </Transition>
+
+                      <Transition name="slide-right" mode="out-in">
+                        <component
+                          :is="iconMap.closeCircle"
+                          v-if="v$.localState[field.title]?.$error || columnValidationError"
+                          class="text-red-500 md:text-md"
+                        />
+                        <component :is="iconMap.check" v-else class="text-white md:text-md" />
+                      </Transition>
+                    </div>
                   </NcButton>
                 </a-tooltip>
 
@@ -381,19 +372,14 @@ onMounted(() => {
 
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
-              <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded" data-testid="nc-survey-form__success-msg">
-                <template v-if="sharedFormView?.success_msg">
-                  {{ sharedFormView?.success_msg }}
-                </template>
-
-                <template v-else>
-                  <div class="flex flex-col gap-1">
-                    <div>{{ $t('msg.info.thankYou') }}</div>
-
-                    <div>{{ $t('msg.info.submittedFormData') }}</div>
-                  </div>
-                </template>
-              </div>
+              <a-alert
+                type="success"
+                class="!my-4 !py-4 text-center !rounded-lg"
+                data-testid="nc-survey-form__success-msg"
+                outlined
+                :message="sharedFormView?.success_msg || $t('msg.info.thankYou')"
+                :description="sharedFormView?.success_msg ? undefined : $t('msg.info.submittedFormData')"
+              />
 
               <div v-if="sharedFormView" class="mt-3">
                 <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
@@ -401,7 +387,7 @@ onMounted(() => {
                 </p>
 
                 <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                  <NcButton type="primary" data-testid="nc-survey-form__btn-submit-another-form" @click="resetForm">
+                  <NcButton type="primary" size="medium" data-testid="nc-survey-form__btn-submit-another-form" @click="resetForm">
                     {{ $t('activity.submitAnotherForm') }}
                   </NcButton>
                 </div>
@@ -468,7 +454,9 @@ onMounted(() => {
         </div>
       </Transition>
 
-      <GeneralPoweredBy />
+      <div class="w-full flex justify-center">
+        <GeneralFormBranding class="inline-flex mx-auto" />
+      </div>
     </div>
   </div>
 </template>
@@ -494,16 +482,37 @@ onMounted(() => {
   }
 
   .nc-input {
-    @apply appearance-none w-full rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
+    @apply appearance-none w-full !bg-white !rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
+    &.nc-cell-rating,
+    &.nc-cell-geodata {
+      @apply !py-1;
+    }
+
+    :deep(input) {
+      @apply !px-1;
+    }
+    &.nc-cell-longtext {
+      @apply p-0 h-auto overflow-hidden;
+    }
+    &:not(.nc-cell-longtext) {
+      @apply px-2 py-2;
+      :deep(textarea) {
+        @apply !p-2;
+      }
+    }
 
     &.nc-cell-checkbox {
       > * {
         @apply justify-center flex items-center;
       }
     }
+  }
+
+  .nc-form-data-cell.nc-data-cell {
+    @apply !border-none rounded-none;
 
-    input {
-      @apply !py-1 !px-1;
+    &:focus-within {
+      @apply !border-none;
     }
   }
 }
diff --git a/packages/nc-gui/pages/projects/index/list.vue b/packages/nc-gui/pages/projects/index/list.vue
index 07e5fe436e..ab612d96fa 100644
--- a/packages/nc-gui/pages/projects/index/list.vue
+++ b/packages/nc-gui/pages/projects/index/list.vue
@@ -30,7 +30,7 @@ const openProject = async (base: BaseType) => {
 
     <template v-for="base of bases" :key="base.id">
       <div
-        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30) p-2 transition-color ease-in duration-100"
+        class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30) p-2 transition-colors ease-in duration-100"
         @click="openProject(base)"
       >
         <div class="font-semibold capitalize">{{ base.title || 'Untitled' }}</div>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index fb265cf04a..5c00652c20 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -121,6 +121,7 @@ import NcArrowUp from '~icons/nc-icons/arrow-up'
 import NcArrowDown from '~icons/nc-icons/arrow-down'
 import NcUpload from '~icons/nc-icons/upload'
 import NcDownload from '~icons/nc-icons/download'
+// import NcProjectGray from '~icons/nc-icons/project-gray'
 import NcPhoneCall from '~icons/nc-icons/phone-call'
 
 // keep it for reference
diff --git a/packages/nc-gui/windi.config.ts b/packages/nc-gui/windi.config.ts
index 43788329ae..f4aa6f022b 100644
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@@ -43,7 +43,7 @@ export default defineConfig({
   },
 
   shortcuts: {
-    'color-transition': 'transition-color duration-100 ease-in',
+    'color-transition': 'transition-colors duration-100 ease-in',
     'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
     'scrollbar-thin-dull': 'scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-100 scrollbar-track-white',
   },
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index c288acfafb..0b23414f2b 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -22,14 +22,16 @@ export class FormPage extends BasePage {
   readonly formSubHeading: Locator;
   readonly afterSubmitMsg: Locator;
 
+  readonly formFields: Locator;
+
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.toolbar = new ToolbarPage(this);
     this.topbar = new TopbarPage(this);
 
-    this.addAllButton = dashboard.get().locator('[data-testid="nc-form-add-all"]');
-    this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-remove-all"]');
+    this.addAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
+    this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
     this.submitButton = dashboard.get().locator('[data-testid="nc-form-submit"]');
 
     this.showAnotherFormRadioButton = dashboard.get().locator('[data-testid="nc-form-checkbox-submit-another-form"]');
@@ -40,6 +42,8 @@ export class FormPage extends BasePage {
     this.formHeading = dashboard.get().locator('[data-testid="nc-form-heading"]');
     this.formSubHeading = dashboard.get().locator('[data-testid="nc-form-sub-heading"]');
     this.afterSubmitMsg = dashboard.get().locator('[data-testid="nc-form-after-submit-msg"]');
+
+    this.formFields = dashboard.get().locator('.nc-form-fields-list');
   }
 
   get() {
@@ -50,32 +54,20 @@ export class FormPage extends BasePage {
     return this.dashboard.get().locator('[data-testid="nc-form-wrapper-submit"]');
   }
 
-  getFormHiddenColumn() {
-    return this.get().locator('[data-testid="nc-form-hidden-column"]');
-  }
-
   getFormFields() {
     return this.get().locator('[data-testid="nc-form-fields"]');
   }
 
-  getDragNDropToHide() {
-    return this.get().locator('[data-testid="nc-drag-n-drop-to-hide"]');
-  }
-
-  getFormFieldsRemoveIcon() {
-    return this.get().locator('[data-testid="nc-field-remove-icon"]');
-  }
-
   getFormFieldsRequired() {
     return this.get().locator('[data-testid="nc-form-input-required"] + button');
   }
 
   getFormFieldsInputLabel() {
-    return this.get().locator('input[data-testid="nc-form-input-label"]:visible');
+    return this.get().locator('textarea[data-testid="nc-form-input-label"]:visible');
   }
 
   getFormFieldsInputHelpText() {
-    return this.get().locator('input[data-testid="nc-form-input-help-text"]:visible');
+    return this.get().locator('textarea[data-testid="nc-form-input-help-text"]:visible');
   }
 
   async verifyFormFieldLabel({ index, label }: { index: number; label: string }) {
@@ -83,9 +75,7 @@ export class FormPage extends BasePage {
   }
 
   async verifyFormFieldHelpText({ index, helpText }: { index: number; helpText: string }) {
-    await expect(
-      this.getFormFields().nth(index).locator('[data-testid="nc-form-input-help-text-label"]')
-    ).toContainText(helpText);
+    await expect(this.getFormFields().nth(index).locator('[data-testid="nc-form-help-text"]')).toContainText(helpText);
   }
 
   async verifyFieldsIsEditable({ index }: { index: number }) {
@@ -124,8 +114,8 @@ export class FormPage extends BasePage {
       const dst = this.get().locator(`[data-testid="nc-drag-n-drop-to-hide"]`);
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
-      const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
-      await src.locator(`[data-testid="nc-field-remove-icon"]`).click();
+      // in form-v2, hide field will be using right sidebar
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 
@@ -141,15 +131,11 @@ export class FormPage extends BasePage {
       await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
-      await src.click();
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 
   async removeAllFields() {
-    // TODO: Otherwise form input boxes are not visible sometimes
-    await this.rootPage.waitForTimeout(1000);
-
     await this.removeAllButton.click();
   }
 
@@ -214,8 +200,9 @@ export class FormPage extends BasePage {
 
     await this.get()
       .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('div[data-testid="nc-form-input-label"]')
+      .locator('[data-testid="nc-form-input-label"]')
       .click();
+
     await waitForResponse(() => this.getFormFieldsInputLabel().fill(label));
     await waitForResponse(() => this.getFormFieldsInputHelpText().fill(helpText));
     if (required) {
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 82fc2db602..2c1e0f746b 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -49,18 +49,6 @@ test.describe('Form view', () => {
       fields: ['LastUpdate', 'Country', 'Cities'],
     });
 
-    // remove & verify (drag-drop)
-    await form.removeField({ field: 'Cities', mode: 'dragDrop' });
-    await form.verifyFormViewFieldsOrder({
-      fields: ['LastUpdate', 'Country'],
-    });
-
-    // add & verify (drag-drop)
-    await form.addField({ field: 'Cities', mode: 'dragDrop' });
-    await form.verifyFormViewFieldsOrder({
-      fields: ['LastUpdate', 'Country', 'Cities'],
-    });
-
     // remove & verify (hide field button)
     await form.removeField({ field: 'Cities', mode: 'hideField' });
     await form.verifyFormViewFieldsOrder({
@@ -88,7 +76,7 @@ test.describe('Form view', () => {
     });
   });
 
-  test('Form elements validation', async ({ page }) => {
+  test('Form elements validation', async () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
     await dashboard.treeView.openTable({ title: 'Country' });
@@ -182,7 +170,7 @@ test.describe('Form view', () => {
     await dashboard.verifyToast({
       message: 'Please activate SMTP plugin in App store for enabling email notification',
     });
-    const url = dashboard.rootPage.url();
+    // const url = dashboard.rootPage.url();
 
     // activate SMTP plugin
     // await accountAppStorePage.goto();
@@ -254,7 +242,6 @@ test.describe('Form view with LTAR', () => {
 
   let dashboard: DashboardPage;
   let loginPage: LoginPage;
-  let wsPage: WorkspacePage;
   let context: any;
   let api: Api<any>;
 
@@ -264,7 +251,6 @@ test.describe('Form view with LTAR', () => {
     context = await setup({ page, isEmptyProject: true });
     dashboard = new DashboardPage(page, context.base);
     loginPage = new LoginPage(page);
-    wsPage = new WorkspacePage(page);
 
     api = new Api({
       baseURL: `http://localhost:8080/`,