diff --git a/packages/nc-gui/assets/style.css b/packages/nc-gui/assets/style.css
index 18e8262885..bceb75e695 100644
--- a/packages/nc-gui/assets/style.css
+++ b/packages/nc-gui/assets/style.css
@@ -383,6 +383,10 @@ td .v-input--selection-controls {
   height: 100%;
 }
 
+.scroll-auto{
+  overflow: auto;
+}
+
 
 .xc-tabs .v-tabs-bar {
   border-bottom: solid 1px var(--v-primary-lighten2);
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editable.vue b/packages/nc-gui/components/project/spreadsheet/components/editable.vue
index b8340e2145..9ee52a1096 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editable.vue
@@ -29,3 +29,16 @@ export default {
   }
 }
 </script>
+<style scoped>
+[contentEditable]{
+  position: relative;
+}
+[contentEditable]:empty:before{
+  position: absolute;
+  left:0;
+  content:attr(placeholder);
+  color:grey;
+  font-style:italic;
+  width:100%;
+  }
+</style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
index f78c24a2fc..b819b08950 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/datePickerCell.vue
@@ -24,7 +24,9 @@ export default {
         return typeof this.value === 'string' ? this.value.replace(/(\d)T(?=\d)/, '$1 ').replace(/\s\d{2}:\d{2}:[\d:.]+z?$/i, '') : (this.value && new Date(this.value))
       },
       set(val) {
-        this.$emit('input', val && new Date(val).toJSON().slice(0, 10))
+        const v = new Date(val)
+
+        this.$emit('input', v.toString() === 'Invalid Date' ? '' : new Date(val).toJSON().slice(0, 10))
       }
     },
     parentListeners() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
index 345de2ec9f..36f4a652bd 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
@@ -262,6 +262,7 @@
 <script>
 
 import dayjs from 'dayjs'
+import form from '../mixins/form'
 import HeaderCell from '@/components/project/spreadsheet/components/headerCell'
 import EditableCell from '@/components/project/spreadsheet/components/editableCell'
 import colors from '@/mixins/colors'
@@ -275,7 +276,7 @@ dayjs.extend(relativeTime)
 export default {
   name: 'ExpandedForm',
   components: { VirtualHeaderCell, VirtualCell, EditableCell, HeaderCell },
-  mixins: [colors],
+  mixins: [colors, form],
   props: {
     showNextPrev: {
       type: Boolean,
@@ -289,11 +290,8 @@ export default {
     },
     dbAlias: String,
     value: Object,
-    meta: Object,
-    sqlUi: [Object, Function],
     table: String,
     primaryValueColumn: String,
-    api: [Object],
     hasMany: [Object, Array],
     belongsTo: [Object, Array],
     isNew: Boolean,
@@ -303,14 +301,7 @@ export default {
       default: 'primary'
     },
     availableColumns: [Object, Array],
-    nodes: [Object],
-    queryParams: Object,
-    disabledColumns: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
+    queryParams: Object
   },
   data: () => ({
     showborder: false,
@@ -383,16 +374,6 @@ export default {
     }
   },
   methods: {
-    isRequired(_columnObj, rowObj) {
-      let columnObj = _columnObj
-      if (columnObj.bt) {
-        columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn)
-      }
-
-      return (columnObj.rqd &&
-        (rowObj[columnObj._cn] === undefined || rowObj[columnObj._cn] === null) &&
-        !columnObj.default)
-    },
     updateCol(_row, _cn, pid) {
       this.$set(this.localState, _cn, pid)
       this.$set(this.changedColumns, _cn, true)
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/form.js b/packages/nc-gui/components/project/spreadsheet/mixins/form.js
new file mode 100644
index 0000000000..38aa93da3e
--- /dev/null
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/form.js
@@ -0,0 +1,26 @@
+export default {
+  props: {
+    disabledColumns: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    meta: Object,
+    sqlUi: [Object, Function],
+    nodes: [Object],
+    api: [Object]
+  },
+  methods: {
+    isRequired(_columnObj, rowObj) {
+      let columnObj = _columnObj
+      if (columnObj.bt) {
+        columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn)
+      }
+
+      return (columnObj.rqd &&
+        (rowObj[columnObj._cn] === undefined || rowObj[columnObj._cn] === null) &&
+        !columnObj.default)
+    }
+  }
+}
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
index f5a8a392a1..66a1ee05ef 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
@@ -110,18 +110,18 @@ export default {
     availableColumns() {
       let columns = []
 
-      if (!this.meta) { return [] }
+      if (!this.meta) {
+        return []
+      }
       // todo: generate hideCols based on default values
       const hideCols = ['created_at', 'updated_at']
 
       if (this.showSystemFields) {
         columns = this.meta.columns || []
-      } else if (this.data && this.data.length) {
+      } else {
         columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
           !((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
           !hideCols.includes(c.cn))) || []
-      } else {
-        columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
       }
 
       if (this.meta && this.meta.v) {
@@ -302,12 +302,15 @@ export default {
       },
       deep: true
     },
-    coverImageField(v) {
-      if (!this.loadingMeta || !this.loadingData) {
-        this.syncDataDebounce(this)
-      }
+    extraViewParams: {
+      handler(v) {
+        if (!this.loadingMeta || !this.loadingData) {
+          this.syncDataDebounce(this)
+        }
+      },
+      deep: true
     },
-    extraViewParams(v) {
+    coverImageField(v) {
       if (!this.loadingMeta || !this.loadingData) {
         this.syncDataDebounce(this)
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 1d5a968885..b01d0b1c28 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -202,7 +202,11 @@
       class="d-flex"
     >
       <div class="flex-grow-1 h-100" style="overflow-y: auto">
-        <div ref="table" style="height : calc(100% - 36px); overflow: auto;width:100%">
+        <div
+          ref="table"
+          :style="{height:isForm ? '100%' : 'calc(100% - 36px)'}"
+          style="overflow: auto;width:100%"
+        >
           <v-skeleton-loader v-if="!dataLoaded && (loadingData || loadingData)" type="table" />
           <template v-else-if="selectedView && (selectedView.type === 'table' || selectedView.show_as === 'grid' )">
             <xc-grid-view
@@ -287,10 +291,13 @@
               :all-columns="allColumns"
               :field-list="fieldList"
               :is-locked="isLocked"
+              :db-alias="dbAlias"
+              :api="api"
+              :sql-ui="sqlUi"
               :fields-order.sync="fieldsOrder"
               :primary-value-column="primaryValueColumn"
               :form-params.sync="extraViewParams.formParams"
-              @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
+              @onNewColCreation="loadMeta(false)"
             />
           </template>
         </div>
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
index 6e383edbc6..1be356ccec 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/formView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-container fluid class="h-100 backgroundColor">
-    <v-row class="h-100">
-      <v-col cols="3">
-        <v-card class="h-100 pa-2 backgroundColor elevation-0 nc-form-left-nav">
+  <v-container fluid class="h-100 py-0">
+    <v-row class="h-100 my-0">
+      <v-col v-if="isEditable" class="h-100 col-md-4 col-lg-3">
+        <v-card class="h-100 overflow-auto pa-2 backgroundColor elevation-0 nc-form-left-nav">
           <div class="d-flex grey--text">
             <span class="">Fields</span>
             <v-spacer />
@@ -55,32 +55,65 @@
               Drag and drop field here to hide
             </div>
           </draggable>
-          <div class="grey--text caption text-center mt-4">
-            <v-icon samll color="grey">
-              mdi-plus
-            </v-icon>
-            Add new field to this table
-          </div>
+
+          <v-menu
+            v-model="addNewColMenu"
+            fixed
+            z-index="99"
+            content-class="elevation-0"
+          >
+            <template #activator="{on}">
+              <div class="grey--text caption text-center mt-4" v-on="on">
+                <v-icon samll color="grey">
+                  mdi-plus
+                </v-icon>
+                Add new field to this table
+              </div>
+            </template>
+            <edit-column
+              v-if="addNewColMenu"
+              :meta="meta"
+              :nodes="nodes"
+              :sql-ui="sqlUi"
+              @close="addNewColMenu = false"
+              @saved="onNewColCreation"
+            />
+          </v-menu>
         </v-card>
       </v-col>
-      <v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9">
+      <v-col
+        :class="{'col-12' : !isEditable, 'col-lg-9 col-md-8': isEditable}"
+        class="h-100 px-10 "
+        style="overflow-y: auto"
+      >
         <!--        <div class="my-14 d-flex align-center justify-center">-->
         <!--          <v-chip>Add cover image</v-chip>-->
         <!--        </div>-->
         <div class="my-10 d-flex align-center justify-center flex-column">
           <editable
-            v-model="localParams.name"
-            class="title nc-meta-inputs text-center"
-          />
+            :is="isEditable ? 'editable' : 'h3'"
+            v-model.lazy="localParams.name"
+            class="title text-center"
+            :class="{'nc-meta-inputs': isEditable}"
+            placeholder="Form Title"
+          >
+            {{ localParams.name }}
+          </editable>
 
           <editable
-            v-model="localParams.description"
-            class="caption nc-meta-inputs text-center"
-          />
+            :is="isEditable ? 'editable' : 'div'"
+            v-model.lazy="localParams.description"
+            :class="{'nc-meta-inputs': isEditable}"
+            class="caption  text-center"
+            placeholder="Add form description"
+          >
+            {{ localParams.description }}
+          </editable>
         </div>
 
         <div style="max-width:600px" class="mx-auto">
           <draggable
+            :is="_isUIAllowed('editFormView') ? 'draggable' : 'div'"
             v-model="columns"
             draggable=".item"
             group="form-inputs"
@@ -91,75 +124,143 @@
             <div
               v-for="(col,i) in columns"
               :key="col.alias"
-              class="nc-field-wrapper item pa-2"
+              class="nc-field-wrapper item px-4 py-4"
+              :class="{'nc-editable':isEditable}"
             >
-              <v-overlay
-                :value="true"
-                absolute
-                :color="$store.state.windows.darkTheme ? 'black': 'white'"
-                opacity="0.1"
-              />
-              <v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
-                mdi-eye-off-outline
-              </v-icon>
-              <!--            <v-card-->
-              <!--              outlined-->
-              <!--              class="pa-2 my-2  "-->
-              <!--            >-->
-              <div
-                v-if="!col.lk"
-                :key="i"
-                :class="{
-                  'active-row' : active === col._cn
-                }"
-                class="row-col  my-4"
+              <template
+                v-if="_isUIAllowed('editFormView')"
               >
-                <div>
-                  <label :for="`data-table-form-${col._cn}`" class="body-2  mt-n1 text-capitalize">
-                    <virtual-header-cell
+                <!--                <v-overlay-->
+                <!--                  :value="true"-->
+                <!--                  absolute-->
+                <!--                  :color="$store.state.windows.darkTheme ? 'black': 'white'"-->
+                <!--                  opacity="0"-->
+                <!--                />-->
+                <v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
+                  mdi-eye-off-outline
+                </v-icon>
+              </template>
+              <!--                <div
+                  v-if="!col.lk"
+                  :key="i"
+                  class="row-col  my-4"
+                >
+                  <div>
+                    <label :for="`data-table-form-${col._cn}`" class="body-2  mt-n1 text-capitalize">
+                      <virtual-header-cell
+                        v-if="col.virtual"
+                        :column="col"
+                        :nodes="nodes"
+                        :is-form="true"
+                        :meta="meta"
+                      />
+                      <header-cell
+                        v-else
+                        :is-form="true"
+                        :value="col._cn"
+                        :column="col"
+                        :sql-ui="sqlUi"
+                      />
+
+                    </label>
+                    <virtual-cell
                       v-if="col.virtual"
+                      ref="virtual"
+                      :disabled-columns="{}"
                       :column="col"
+                      :row="localState"
                       :nodes="nodes"
-                      :is-form="true"
                       :meta="meta"
+                      :api="api"
+                      :active="false"
+                      :sql-ui="sqlUi"
+                      :is-form="true"
+                      :dummy="true"
                     />
-                    <header-cell
+                    <editable-cell
                       v-else
-                      :is-form="true"
-                      :value="col._cn"
+                      :id="`data-table-form-${col._cn}`"
+                      v-model="localState[col._cn]"
+                      :db-alias="dbAlias"
                       :column="col"
+                      class="xc-input body-2"
+                      :meta="meta"
                       :sql-ui="sqlUi"
+                      is-form
+                      :dummy="true"
                     />
+                  </div>
+                </div>-->
+              <!--              </template>-->
+              <!--            </v-card>-->
 
-                  </label>
-                  <virtual-cell
+              <div
+                :class="{
+                  'active-row' : active === col._cn,
+                  required: isRequired(col, localState)
+                }"
+              >
+                <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
+                  <virtual-header-cell
                     v-if="col.virtual"
-                    ref="virtual"
                     :column="col"
-                    :row="localState"
                     :nodes="nodes"
-                    :meta="meta"
-                    :api="api"
-                    :active="false"
-                    :sql-ui="sqlUi"
                     :is-form="true"
-                    :dummy="true"
+                    :meta="meta"
                   />
-                  <editable-cell
+                  <header-cell
                     v-else
-                    :id="`data-table-form-${col._cn}`"
-                    v-model="localState[col._cn]"
-                    :db-alias="dbAlias"
+                    :is-form="true"
+                    :value="col._cn"
                     :column="col"
-                    class="xc-input body-2"
-                    :meta="meta"
                     :sql-ui="sqlUi"
-                    is-form
-                    :dummy="true"
                   />
+
+                </label>
+                <virtual-cell
+                  v-if="col.virtual"
+                  ref="virtual"
+                  :disabled-columns="{}"
+                  :column="col"
+                  :row="localState"
+                  :nodes="nodes"
+                  :meta="meta"
+                  :api="api"
+                  :active="true"
+                  :sql-ui="sqlUi"
+                  :is-new="true"
+                  :is-form="true"
+                />
+
+                <div
+                  v-else-if="col.ai || (col.pk && !isNew) || disabledColumns[col._cn]"
+                  style="height:100%; width:100%"
+                  class="caption xc-input"
+                  @click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
+                >
+                  <input
+                    style="height:100%; width: 100%"
+                    readonly
+                    disabled
+                    :value="localState[col._cn]"
+                  >
                 </div>
+
+                <editable-cell
+                  v-else
+                  :id="`data-table-form-${col._cn}`"
+                  v-model="localState[col._cn]"
+                  :db-alias="dbAlias"
+                  :column="col"
+                  class="xc-input body-2"
+                  :meta="meta"
+                  :sql-ui="sqlUi"
+                  is-form
+                  @focus="active = col._cn"
+                  @blur="active = ''"
+                />
               </div>
-              <!--            </v-card>-->
+              <!--              </div>-->
             </div>
 
             <div v-if="!columns.length" class="mt-1 nc-drag-n-drop-to-show py-4 text-center grey--text text--lighter-1">
@@ -167,7 +268,7 @@
             </div>
           </draggable>
           <div class="my-10 text-center">
-            <v-btn color="primary">
+            <v-btn color="primary" @click="save">
               Submit
             </v-btn>
           </div>
@@ -185,17 +286,25 @@ import HeaderCell from '../components/headerCell'
 import VirtualCell from '../components/virtualCell'
 import EditableCell from '../components/editableCell'
 import Editable from '../components/editable'
+import EditColumn from '../components/editColumn'
+import form from '../mixins/form'
 
 export default {
   name: 'FormView',
-  components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
-  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'],
+  components: { EditColumn, Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
+  mixins: [form],
+  props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns', 'dbAlias', 'api'],
   data: () => ({
     localState: {},
-    moved: false
+    moved: false,
+    addNewColMenu: false,
+    addNewColModal: false
     // hiddenColumns: []
   }),
   computed: {
+    isEditable() {
+      return this._isUIAllowed('editFormView')
+    },
     localParams: {
       get() {
         return this.formParams || {}
@@ -211,29 +320,22 @@ export default {
     },
     columns: {
       get() {
-        return this.allColumns.filter(c => this.showFields[c.alias])
+        return this.allColumns.filter(c => this.showFields[c.alias]).sort((a, b) => ((this.fieldsOrder.indexOf(a.alias) + 1) || Infinity) - ((this.fieldsOrder.indexOf(b.alias) + 1) || Infinity))
       },
       set(val) {
         const showFields = val.reduce((o, v) => {
           o[v.alias] = true
           return o
-        }, {})
-        console.log(showFields, this.showFields)
+        }, this.allColumns.reduce((o, v) => {
+          o[v.alias] = false
+          return o
+        }, {}))
         const fieldsOrder = val.map(v => v.alias)
-        // debugger
         this.$emit('update:showFields', showFields)
         this.$emit('update:fieldsOrder', fieldsOrder)
       }
     }
   },
-  watch: {
-    // visibleColumns: {
-    //   handler(val) {
-    //
-    //   },
-    //   deep: true
-    // }
-  },
   mounted() {
     this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.localParams)
     // this.columns = [...this.availableColumns]
@@ -244,6 +346,57 @@ export default {
       if (!this.moved) {
         this.columns = [...this.columns, col]
       }
+    },
+    onNewColCreation(col) {
+      this.addNewColMenu = false
+      this.addNewColModal = false
+      this.$emit('onNewColCreation', col)
+    },
+    async save() {
+      try {
+        // const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c._cn]).join('___')
+
+        // const updatedObj = Object.keys(this.changedColumns).reduce((obj, col) => {
+        //   obj[col] = this.localState[col]
+        //   return obj
+        // }, {})
+
+        // if (this.isNew) {
+        const data = await this.api.insert(this.localState)
+        this.localState = {} // { ...this.localState, ...data }
+
+        // save hasmany and manytomany relations from local state
+        if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
+          for (const vcell of this.$refs.virtual) {
+            if (vcell.save) {
+              await vcell.save(this.localState)
+            }
+          }
+        }
+
+        //   await this.reload()
+        // }
+        // else if (Object.keys(updatedObj).length) {
+        //   if (!id) {
+        //     return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
+        //   }
+        //   await this.api.update(id, updatedObj, this.oldRow)
+        // } else {
+        //   return this.$toast.info('No columns to update').goAway(3000)
+        // }
+
+        // this.$emit('update:oldRow', { ...this.localState })
+        // this.changedColumns = {}
+        // this.$emit('input', this.localState)
+        // this.$emit('update:isNew', false)
+
+        this.$toast.success(`${this.localState[this.primaryValueColumn]} saved successfully.`, {
+          position: 'bottom-right'
+        }).goAway(3000)
+      } catch (e) {
+        console.log(e)
+        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
+      }
     }
   }
 }
@@ -264,8 +417,8 @@ export default {
     z-index: 9
   }
 
-  &:hover {
-    background: var(--v-backgroundColorDefault-base);
+  &.nc-editable:hover {
+    background: var(--v-backgroundColor-base);
 
     .nc-field-remove-icon {
       opacity: 1;
@@ -301,37 +454,40 @@ export default {
     color: var(--v-textColor-base);
   }
 
-  position: relative;
-
   .comment-icon {
     position: absolute;
     right: 60px;
     bottom: 60px;
   }
 
-  div > input,
-  div > .xc-input > input,
-  div > .xc-input > div > input,
-  div > select,
-  div > .xc-input > select,
-  div textarea:not(.inputarea) {
-    border: 1px solid #7f828b33;
-    padding: 1px 5px;
-    font-size: .8rem;
-    border-radius: 4px;
-    min-height: 44px;
+  .nc-field-wrapper {
+    div > input,
+    div > .xc-input > input,
+    div > .xc-input > div > input,
+    div > select,
+    div > .xc-input > select,
+    div textarea:not(.inputarea) {
+      border: 1px solid #7f828b33;
+      padding: 1px 5px;
+      font-size: .8rem;
+      border-radius: 4px;
+      min-height: 44px;
+
+      &:focus {
+        border: 1px solid var(--v-primary-base);
+      }
 
-    &:focus {
-      border: 1px solid var(--v-primary-base);
-    }
+      &:hover:not(:focus) {
+        box-shadow: 0 0 2px dimgrey;
+      }
 
-    &:hover:not(:focus) {
-      box-shadow: 0 0 2px dimgrey;
+      background: var(--v-backgroundColorDefault-base);
     }
 
-    background: var(--v-backgroundColorDefault-base);
+    .v-input__slot {
+      padding: 0 !important;
+    }
   }
-
 }
 
 .required > div > label + * {
@@ -364,8 +520,14 @@ export default {
   color: grey
 }
 
-.nc-form-left-nav{
+.nc-form-left-nav {
   max-height: 100%;
 }
 
+.required > div > label + * {
+  border: 1px solid red;
+  border-radius: 4px;
+  background: var(--v-backgroundColorDefault-base);
+}
+
 </style>