diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index 248bcab6d9..707b44265a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    class="nc-cell"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up
@@ -105,6 +106,8 @@
 
     <text-cell v-else v-model="localState" v-on="$listeners" />
     <span v-if="hint" class="nc-hint">{{ hint }}</span>
+
+    <div v-if="isLocked" class="nc-locked-overlay" />
   </div>
 </template>
 
@@ -155,7 +158,8 @@ export default {
     isForm: Boolean,
     active: Boolean,
     dummy: Boolean,
-    hint: String
+    hint: String,
+    isLocked: Boolean
   },
   data: () => ({
     changed: false,
@@ -228,6 +232,18 @@ div {
   font-size: .61rem;
   color:grey;
 }
+.nc-cell {
+   position: relative;
+ }
+
+.nc-locked-overlay {
+  position: absolute;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+  top:0;
+  left:0;
+}
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
index 70c7ee8aa9..d6d782c108 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
@@ -84,7 +84,7 @@
                   :key="i"
                   :class="{
                     'active-row' : active === col._cn,
-                    required: isRequired(col, localState)
+                    required: isValid(col, localState)
                   }"
                   class="row-col  my-4"
                 >
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
index a7f12b52c3..20b99ad8db 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
@@ -41,20 +41,20 @@
       mdi-card-text-outline
     </v-icon>
 
-    <span class="name" :title="value">{{ value }}</span>
+    <span class="name" style="white-space: pre-wrap" :title="value">{{ value }}</span>
 
-    <span v-if="column.rqd || required" class="error--text text--lighten-1">&nbsp;*</span>
+    <span v-if="(column.rqd && !column.default) || required" class="error--text text--lighten-1">&nbsp;*</span>
 
     <v-spacer />
 
     <v-menu
-      v-if="!isPublicView && _isUIAllowed('edit-column') && !isForm"
+      v-if="!isLocked &&!isPublicView && _isUIAllowed('edit-column') && !isForm"
       offset-y
       open-on-hover
       left
     >
       <template #activator="{on}">
-        <v-icon v-if="!isVirtual" small v-on="on">
+        <v-icon v-if="!isLocked && !isVirtual" small v-on="on">
           mdi-menu-down
         </v-icon>
       </template>
@@ -141,7 +141,7 @@ export default {
   name: 'HeaderCell',
   components: { EditColumn },
   mixins: [cell],
-  props: ['value', 'column', 'isForeignKey', 'meta', 'nodes', 'columnIndex', 'isForm', 'isPublicView', 'isVirtual', 'required'],
+  props: ['value', 'column', 'isForeignKey', 'meta', 'nodes', 'columnIndex', 'isForm', 'isPublicView', 'isVirtual', 'required', 'isLocked'],
   data: () => ({
     editColumnMenu: false,
     columnDeleteDialog: false
@@ -201,7 +201,7 @@ export default {
 </script>
 
 <style scoped>
-.name{
+.name {
   max-width: calc(100% - 40px);
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index 76f06f2f3b..ce69d9d67c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -14,7 +14,7 @@
               <!-- Views -->
               <span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span>
             </v-list-item>
-            <v-list-item-group v-model="selectedViewIdLocal" color="primary">
+            <v-list-item-group v-model="selectedViewIdLocal" mandatory color="primary">
               <v-list-item
                 v-for="(view, i) in viewsList"
                 :key="i"
@@ -23,6 +23,7 @@
                 active-class="x-active--text"
                 class="body-2 text-capitalize view nc-view-item"
                 :class="`nc-${view.show_as}-view-item`"
+                @click="$emit('generateNewViewKey')"
               >
                 <v-list-item-icon class="mr-n1">
                   <v-icon
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue
index b78066ebb2..d17831721a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="nc-virtual-cell">
     <v-lazy>
       <has-many-cell
         v-if="hm"
@@ -14,6 +14,8 @@
         :is-new="isNew"
         :is-form="isForm"
         :breadcrumbs="breadcrumbs"
+        :is-locked="isLocked"
+        :required="required"
         v-on="$listeners"
       />
       <many-to-many-cell
@@ -30,6 +32,8 @@
         :api="api"
         :is-form="isForm"
         :breadcrumbs="breadcrumbs"
+        :is-locked="isLocked"
+        :required="required"
         v-on="$listeners"
       />
       <belongs-to-cell
@@ -47,6 +51,7 @@
         :is-new="isNew"
         :is-form="isForm"
         :breadcrumbs="breadcrumbs"
+        :is-locked="isLocked"
         v-on="$listeners"
       />
       <lookup-cell
@@ -61,6 +66,7 @@
         :is-new="isNew"
         :is-form="isForm"
         :column="column"
+        :is-locked="isLocked"
         v-on="$listeners "
       />
       <formula-cell
@@ -75,16 +81,17 @@
       />
     </v-lazy>
     <span v-if="hint" class="nc-hint">{{ hint }}</span>
+    <div v-if="isLocked" class="nc-locked-overlay" />
   </div>
 </template>
 
 <script>
 import RollupCell from './virtualCell/rollupCell'
-import FormulaCell from '@/components/project/spreadsheet/components/virtualCell/formulaCell'
-import hasManyCell from '@/components/project/spreadsheet/components/virtualCell/hasManyCell'
-import LookupCell from '@/components/project/spreadsheet/components/virtualCell/lookupCell'
-import manyToManyCell from '@/components/project/spreadsheet/components/virtualCell/manyToManyCell'
-import belongsToCell from '@/components/project/spreadsheet/components/virtualCell/belongsToCell'
+import FormulaCell from './virtualCell/formulaCell'
+import hasManyCell from './virtualCell/hasManyCell'
+import LookupCell from './virtualCell/lookupCell'
+import manyToManyCell from './virtualCell/manyToManyCell'
+import belongsToCell from './virtualCell/belongsToCell'
 
 // todo: optimize parent/child meta extraction
 
@@ -121,7 +128,9 @@ export default {
       default: false
     },
     disabledColumns: Object,
-    hint: String
+    hint: String,
+    isLocked: Boolean,
+    required: Boolean
   },
   computed: {
     hm() {
@@ -161,6 +170,19 @@ export default {
   font-size: .61rem;
   color: grey;
 }
+
+.nc-virtual-cell {
+  position: relative;
+}
+
+.nc-locked-overlay {
+  position: absolute;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue
index d97e222fd6..ceaa471590 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/belongsToCell.vue
@@ -7,13 +7,14 @@
             :active="active"
             :item="value"
             :value="cellValue"
+            :readonly="isLocked"
             @edit="editParent"
             @unlink="unlink"
           />
         </template>
       </div>
       <div
-        v-if="_isUIAllowed('xcDatatableEditable')"
+        v-if="!isLocked && _isUIAllowed('xcDatatableEditable')"
         class="action align-center justify-center px-1 flex-shrink-1"
         :class="{'d-none': !active, 'd-flex':active }"
       >
@@ -105,6 +106,7 @@ export default {
   name: 'BelongsToCell',
   components: { ListChildItems, ItemChip, ListItems },
   props: {
+    isLocked: Boolean,
     breadcrumbs: {
       type: Array,
       default() {
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue
index feb00272da..3abc34443b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/hasManyCell.vue
@@ -9,12 +9,13 @@
             :active="active"
             :item="ch"
             :value="getCellValue(ch)"
+            :readonly="isLocked"
             @edit="editChild"
             @unlink="unlinkChild"
           />
 
           <span
-            v-if="value && value.length === 10"
+            v-if="!isLocked && value && value.length === 10"
             class="caption pointer ml-1 grey--text"
             @click="showChildListModal"
           >more...
@@ -22,6 +23,7 @@
         </template>
       </div>
       <div
+        v-if="!isLocked"
         class="actions align-center justify-center px-1 flex-shrink-1"
         :class="{'d-none': !active, 'd-flex':active }"
       >
@@ -149,6 +151,7 @@ export default {
     listChildItemsModal
   },
   props: {
+    isLocked: Boolean,
     breadcrumbs: {
       type: Array,
       default() {
@@ -163,7 +166,8 @@ export default {
     sqlUi: [Object, Function],
     active: Boolean,
     isNew: Boolean,
-    isForm: Boolean
+    isForm: Boolean,
+    required: Boolean
   },
   data: () => ({
     newRecordModal: false,
@@ -288,6 +292,7 @@ export default {
     async unlinkChild(child) {
       if (this.isNew) {
         this.localState.splice(this.localState.indexOf(child), 1)
+        this.$emit('update:localState', [...this.localState])
         return
       }
 
@@ -332,6 +337,7 @@ export default {
     async addChildToParent(child) {
       if (this.isNew && this.localState.every(it => it[this.childForeignKey] !== child[this.childPrimaryKey])) {
         this.localState.push(child)
+        this.$emit('update:localState', [...this.localState])
         this.newRecordModal = false
         return
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue
index b053a82873..5c8c575413 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/manyToManyCell.vue
@@ -9,13 +9,15 @@
             :active="active"
             :item="v"
             :value="getCellValue(v)"
+            :readonly="isLocked"
             @edit="editChild"
             @unlink="unlinkChild"
           />
         </template>
-        <span v-if="value && value.length === 10" class="caption pointer ml-1 grey--text" @click="showChildListModal">more...</span>
+        <span v-if="!isLocked && value && value.length === 10" class="caption pointer ml-1 grey--text" @click="showChildListModal">more...</span>
       </div>
       <div
+        v-if="!isActive && !isLocked"
         class="actions align-center justify-center px-1 flex-shrink-1"
         :class="{'d-none': !active, 'd-flex':active }"
       >
@@ -128,6 +130,7 @@ export default {
   name: 'ManyToManyCell',
   components: { ListChildItems, ItemChip, ListItems, DlgLabelSubmitCancel, listChildItemsModal },
   props: {
+    isLocked: Boolean,
     breadcrumbs: {
       type: Array,
       default() {
@@ -143,7 +146,8 @@ export default {
     sqlUi: [Object, Function],
     active: Boolean,
     isNew: Boolean,
-    isForm: Boolean
+    isForm: Boolean,
+    required: Boolean
   },
   data: () => ({
     isNewChild: false,
@@ -290,6 +294,7 @@ export default {
     async unlinkChild(child) {
       if (this.isNew) {
         this.localState.splice(this.localState.indexOf(child), 1)
+        this.$emit('update:localState', [...this.localState])
         return
       }
       await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
@@ -367,6 +372,7 @@ export default {
     async addChildToParent(child) {
       if (this.isNew && this.localState.every(it => it[this.childForeignKey] !== child[this.childPrimaryKey])) {
         this.localState.push(child)
+        this.$emit('update:localState', [...this.localState])
         this.newRecordModal = false
         return
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
index 3670a446b2..54414cb886 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
@@ -37,7 +37,7 @@
           </v-icon>
         </template>
         <span v-on="on">
-          <span class="name  flex-grow-1" :title="column._cn" v-html="alias" />
+          <span class="name  flex-grow-1" style="white-space: pre-wrap" :title="column._cn" v-html="alias" />
           <span v-if="column.rqd || required" class="error--text text--lighten-1">&nbsp;*</span>
         </span>
       </template>
@@ -46,13 +46,13 @@
     <v-spacer />
 
     <v-menu
-      v-if="!isPublicView && _isUIAllowed('edit-column') && !isForm"
+      v-if="!isLocked && !isPublicView && _isUIAllowed('edit-column') && !isForm"
       offset-y
       open-on-hover
       left
     >
       <template #activator="{on}">
-        <v-icon v-if="!isForm" small v-on="on">
+        <v-icon v-if="!isLocked && !isForm" small v-on="on">
           mdi-menu-down
         </v-icon>
       </template>
@@ -133,7 +133,7 @@ import EditVirtualColumn from '@/components/project/spreadsheet/components/editV
 export default {
   name: 'VirtualHeaderCell',
   components: { EditVirtualColumn },
-  props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required'],
+  props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked'],
   data: () => ({
     columnDeleteDialog: false,
     editColumnMenu: false,
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/form.js b/packages/nc-gui/components/project/spreadsheet/mixins/form.js
index 558d16828c..0263f896da 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/form.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/form.js
@@ -12,14 +12,22 @@ export default {
     api: [Object]
   },
   methods: {
-    isRequired(_columnObj, rowObj) {
+    isValid(_columnObj, rowObj, required = false) {
       let columnObj = _columnObj
       if (columnObj.bt) {
         columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn)
       }
-      return (columnObj.rqd &&
+      return ((required || columnObj.rqd) &&
         (rowObj[columnObj._cn] === undefined || rowObj[columnObj._cn] === null) &&
         !columnObj.default)
+    },
+    isRequired(_columnObj, rowObj, required = false) {
+      let columnObj = _columnObj
+      if (columnObj.bt) {
+        columnObj = this.meta.columns.find(c => c.cn === columnObj.bt.cn)
+      }
+      return ((required || columnObj.rqd) &&
+        !columnObj.default)
     }
   }
 }
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 41a5a6c3e6..39dd299909 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -61,19 +61,19 @@
 
       <v-spacer class="h-100" @dblclick="debug=true" />
 
-      <debug-metas v-if="debug" class="mr-3" />
-      <v-tooltip v-if="!isForm" bottom>
-        <template #activator="{on}">
-          <v-icon v-if="!isPkAvail && !isForm" color="warning" small class="mr-3" v-on="on">
-            mdi-information-outline
-          </v-icon>
-        </template>
-        <span class="caption">          Update & Delete not allowed since the table doesn't have any primary key
-        </span>
-      </v-tooltip>
-      <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
-
       <template v-if="!isForm">
+        <debug-metas v-if="debug" class="mr-3" />
+        <v-tooltip bottom>
+          <template #activator="{on}">
+            <v-icon v-if="!isPkAvail && !isForm" color="warning" small class="mr-3" v-on="on">
+              mdi-information-outline
+            </v-icon>
+          </template>
+          <span class="caption">          Update & Delete not allowed since the table doesn't have any primary key
+          </span>
+        </v-tooltip>
+        <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
+
         <x-btn tooltip="Reload view data" outlined small text @click="reload">
           <v-icon small class="mr-1" color="grey  darken-3">
             mdi-reload
@@ -130,29 +130,29 @@
           :field-list="[...realFieldList, ...formulaFieldList]"
           dense
         />
+        <v-tooltip
+          v-if="_isUIAllowed('table-delete')"
+          bottom
+        >
+          <template #activator="{on}">
+            <v-btn
+              v-show="_isUIAllowed('table-delete')"
+              class="nc-table-delete-btn"
+              :disabled="isLocked"
+              small
+              outlined
+              text
+              v-on="on"
+              @click="checkAndDeleteTable"
+            >
+              <x-icon small color="red grey">
+                mdi-delete-outline
+              </x-icon>
+            </v-btn>
+          </template>
+          <span class="">Delete table</span>
+        </v-tooltip>
       </template>
-      <v-tooltip
-        v-if="_isUIAllowed('table-delete')"
-        bottom
-      >
-        <template #activator="{on}">
-          <v-btn
-            v-show="_isUIAllowed('table-delete')"
-            class="nc-table-delete-btn"
-            :disabled="isLocked"
-            small
-            outlined
-            text
-            v-on="on"
-            @click="checkAndDeleteTable"
-          >
-            <x-icon small color="red grey">
-              mdi-delete-outline
-            </x-icon>
-          </v-btn>
-        </template>
-        <span class="">Delete table</span>
-      </v-tooltip>
       <!-- Cell height -->
       <!--      <v-menu>
               <template v-slot:activator="{ on, attrs }">
@@ -282,7 +282,7 @@
           </template>
           <template v-else-if="isForm">
             <form-view
-              :key="selectedViewId"
+              :key="selectedViewId + viewKey"
               :nodes="nodes"
               :table="table"
               :available-columns="availableColumns"
@@ -336,6 +336,7 @@
         :columns-width.sync="columnsWidth"
         :show-system-fields.sync="showSystemFields"
         :extra-view-params.sync="extraViewParams"
+        @generateNewViewKey="generateNewViewKey"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
         @loadTableData="loadTableData"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@@ -517,13 +518,13 @@
 import { mapActions } from 'vuex'
 import debounce from 'debounce'
 import FormView from './views/formView'
+import XcGridView from './views/xcGridView'
 import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
 
 import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
 import GalleryView from '@/components/project/spreadsheet/views/galleryView'
 import CalendarView from '@/components/project/spreadsheet/views/calendarView'
 import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
-import XcGridView from '@/components/project/spreadsheet/views/xcGridView'
 import SortList from '@/components/project/spreadsheet/components/sortListMenu'
 import Fields from '@/components/project/spreadsheet/components/fieldsMenu'
 import SpreadsheetNavDrawer from '@/components/project/spreadsheet/components/spreadsheetNavDrawer'
@@ -566,6 +567,7 @@ export default {
     showTabs: [Boolean, Number]
   },
   data: () => ({
+    viewKey: 0,
     extraViewParams: {},
     debug: false,
     key: 1,
@@ -677,6 +679,9 @@ export default {
     ...mapActions({
       loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode'
     }),
+    generateNewViewKey() {
+      this.viewKey = Math.random()
+    },
     loadNext() {
       this.selectedExpandRowIndex = ++this.selectedExpandRowIndex % this.data.length
     },
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
index c5770726fa..1d7139117a 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/formView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -20,16 +20,22 @@
       </template>
       <template v-else>
         <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">
+          <v-card class="h-100 overflow-auto pa-4 pa-md-6 backgroundColor elevation-0 nc-form-left-nav">
             <div class="d-flex grey--text">
               <span class="">Fields</span>
               <v-spacer />
               <span
+                v-if="hiddenColumns.length"
                 class="pointer caption mr-2"
-                style="border-bottom: 2px solid rgba(128,128,128,0.67)"
+                style="border-bottom: 2px solid rgb(218,218,218)"
                 @click="columns=[...allColumns]"
               >add all</span>
-              <span class="pointer caption" style="border-bottom: 2px solid rgba(128,128,128,0.67)" @click="columns=[]">remove all</span>
+              <span
+                v-if="columns.length"
+                class="pointer caption"
+                style="border-bottom: 2px solid rgb(218,218,218)"
+                @click="columns=[]"
+              >remove all</span>
             </div>
             <draggable
               v-model="hiddenColumns"
@@ -71,8 +77,8 @@
                   </v-icon>
                 </div>
               </v-card>
-              <div class="mt-1 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
-                Drag and drop field here to hide
+              <div class="mt-4 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
+                Drag and drop fields here to hide
               </div>
             </draggable>
 
@@ -84,7 +90,7 @@
             >
               <template #activator="{on}">
                 <div class="grey--text caption text-center mt-4" v-on="on">
-                  <v-icon samll color="grey">
+                  <v-icon size="20" color="grey">
                     mdi-plus
                   </v-icon>
                   Add new field to this table
@@ -128,7 +134,7 @@
               <editable
                 :is="isEditable ? 'editable' : 'h2'"
                 v-model.lazy="localParams.name"
-                class="display-1 font-weight-bold text-center"
+                class="display-1 font-weight-bold text-left mx-4 mb-3 px-1 text--text  text--lighten-1"
                 :class="{'nc-meta-inputs': isEditable}"
                 placeholder="Form Title"
               >
@@ -139,7 +145,7 @@
                 :is="isEditable ? 'editable' : 'div'"
                 v-model.lazy="localParams.description"
                 :class="{'nc-meta-inputs': isEditable}"
-                class="body-1  text-center"
+                class="body-1  text-left mx-4 py-2 px-1 text--text text--lighten-2"
                 placeholder="Add form description"
               >
                 {{ localParams.description }}
@@ -176,7 +182,7 @@
                       v-if="localParams.fields && localParams.fields[col.alias]"
                       :class="{
                         'active-row' : active === col._cn,
-                        required: isRequired(col, localState) || localParams.fields[col.alias].required
+                        required: isRequired(col, localState, localParams.fields[col.alias].required)
                       }"
                     >
                       <div class="nc-field-editables" :class="{'nc-show' : isActiveRow(col)}">
@@ -194,22 +200,23 @@
                             class="nc-required-switch ml-1 mt-0"
                             hide-details
                             flat
-                            color="grey"
+                            color="primary"
                             dense
                             inset
                           />
                         </div>
                         <editable
                           v-model="localParams.fields[col.alias].label"
-                          style="width:300px"
+                          style="width:300px;white-space: pre-wrap"
                           placeholder=" Enter form input label"
                           class="caption pa-1 backgroundColor darken-1 mb-2 "
                         />
                         <editable
                           v-model="localParams.fields[col.alias].description"
-                          style="width:300px"
+                          style="width:300px;white-space: pre-wrap"
                           placeholder=" Add some help text"
                           class="caption pa-1 backgroundColor darken-1 mb-2"
+                          @keydown.enter.prevent
                         />
                       </div>
                       <label
@@ -224,7 +231,7 @@
                           :nodes="nodes"
                           :is-form="true"
                           :meta="meta"
-                          :required="localParams.fields[col.alias].required"
+                          :required="isRequired(col, localState, localParams.fields[col.alias].required)"
                         />
                         <header-cell
                           v-else
@@ -233,70 +240,99 @@
                           :value="localParams.fields[col.alias].label || col._cn"
                           :column="col"
                           :sql-ui="sqlUi"
-                          :required="localParams.fields[col.alias].required"
+                          :required="isRequired(col, localState, localParams.fields[col.alias].required)"
                         />
 
                       </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"
-                        :hint="localParams.fields[col.alias].description"
-                      />
-
                       <div
-                        v-else-if="col.ai || (col.pk && !isNew) || disabledColumns[col._cn]"
-                        style="height:100%; width:100%"
-                        class="caption xc-input"
-                        @click.stop
-                        @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>
-
-                      <div
-                        v-else
+                        v-if="col.virtual"
                         @click.stop
                       >
-                        <editable-cell
-                          :id="`data-table-form-${col._cn}`"
-                          v-model="localState[col._cn]"
-                          :db-alias="dbAlias"
+                        <virtual-cell
+                          ref="virtual"
+                          :disabled-columns="{}"
                           :column="col"
-                          class="xc-input body-2"
+                          :row="localState"
+                          :nodes="nodes"
                           :meta="meta"
+                          :api="api"
+                          :active="true"
                           :sql-ui="sqlUi"
-                          is-form
+                          :is-new="true"
+                          :is-form="true"
                           :hint="localParams.fields[col.alias].description"
-                          @focus="active = col._cn"
-                          @blur="active = ''"
+                          :required="localParams.fields[col.alias].description"
+                          @update:localState="state => $set(virtual,col.alias, state)"
+                          @updateCol="updateCol"
                         />
+                        <div
+                          v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.alias] && (!$v.virtual[col.alias].required || !$v.virtual[col.alias].minLength)"
+                          class="error--text caption"
+                        >
+                          Field is required.
+                        </div>
+
+                        <!-- todo: optimize -->
+                        <template
+                          v-if="col.bt && $v.localState && $v.localState.$dirty && $v.localState[meta.columns.find(c => c.cn === col.bt.cn)._cn]"
+                        >
+                          <div
+                            v-if="!$v.localState[meta.columns.find(c => c.cn === col.bt.cn)._cn].required"
+                            class="error--text caption"
+                          >
+                            Field is required.
+                          </div>
+                        </template>
                       </div>
+                      <template v-else>
+                        <div
+                          v-if="col.ai || (col.pk && !isNew) || disabledColumns[col._cn]"
+                          style="height:100%; width:100%"
+                          class="caption xc-input"
+                          @click.stop
+                          @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>
+
+                        <div
+                          v-else
+                          @click.stop
+                        >
+                          <editable-cell
+                            :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
+                            :hint="localParams.fields[col.alias].description"
+                            @focus="active = col._cn"
+                            @blur="active = ''"
+                          />
+                        </div>
+                        <template v-if="$v.localState&& $v.localState.$dirty && $v.localState[col._cn] ">
+                          <div v-if="!$v.localState[col._cn].required" class="error--text caption">
+                            Field is required.
+                          </div>
+                        </template>
+                      </template>
                     </div>
                     <!--              </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"
-                  >
-                    Drag and drop field here to add
-                  </div>
+                </div>
+                <div
+                  v-if="!columns.length"
+                  class="nc-drag-n-drop-to-show py-4 mx-8  my-10 text-center grey--text text--lighter-1"
+                >
+                  Drag and drop fields here to add
                 </div>
               </draggable>
               <div class="my-10 text-center">
@@ -359,6 +395,8 @@
 <script>
 
 import draggable from 'vuedraggable'
+import { validationMixin } from 'vuelidate'
+import { required, minLength } from 'vuelidate/lib/validators'
 import VirtualHeaderCell from '../components/virtualHeaderCell'
 import HeaderCell from '../components/headerCell'
 import VirtualCell from '../components/virtualCell'
@@ -370,7 +408,7 @@ import form from '../mixins/form'
 export default {
   name: 'FormView',
   components: { EditColumn, Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
-  mixins: [form],
+  mixins: [form, validationMixin],
   props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns', 'dbAlias', 'api'],
   data: () => ({
     localState: {},
@@ -382,9 +420,27 @@ export default {
     isNew: true,
     submitted: false,
     secondsRemain: null,
-    loading: false
+    loading: false,
+    virtual: {}
     // hiddenColumns: []
   }),
+  validations() {
+    const obj = { localState: {}, virtual: {} }
+    for (const column of this.columns) {
+      if (!column.virtual && ((column.rqd && !column.default) || this.localParams.fields[column.alias].required)) {
+        obj.localState[column._cn] = { required }
+      } else if (column.bt) {
+        const col = this.meta.columns.find(c => c.cn === column.bt.cn)
+        if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) {
+          obj.localState[col._cn] = { required }
+        }
+      } else if (column.virtual && this.localParams.fields[column.alias].required && (column.mm || column.hm)) {
+        obj.virtual[column.alias] = { minLength: minLength(1), required }
+      }
+    }
+
+    return obj
+  },
   computed: {
     isEditable() {
       return this._isUIAllowed('editFormView')
@@ -399,7 +455,7 @@ export default {
     },
     hiddenColumns: {
       get() {
-        return this.allColumns.filter(c => !this.showFields[c.alias])
+        return this.allColumns.filter(c => !this.showFields[c.alias] && !(c.pk && c.ai) && !(this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn))
       }
     },
     columns: {
@@ -453,6 +509,9 @@ export default {
     // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
   },
   methods: {
+    updateCol(_, column, id) {
+      this.$set(this.localState, column, id)
+    },
     isActiveRow(col) {
       return this.activeRow === col.alias
     },
@@ -471,6 +530,13 @@ export default {
     },
     async save() {
       try {
+        this.$v.$touch()
+        if (this.$v.localState.$invalid) {
+          this.$toast.error('Provide values of all required field').goAway(3000)
+
+          return
+        }
+
         this.loading = true
         // const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c._cn]).join('___')
 
@@ -481,8 +547,8 @@ export default {
 
         // if (this.isNew) {
         // const data =
-        await this.api.insert(this.localState)
-        this.localState = {} // { ...this.localState, ...data }
+        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)) {
@@ -492,6 +558,9 @@ export default {
             }
           }
         }
+
+        this.virtual = {}
+
         this.submitted = true
 
         this.$toast.success(this.localParams.submit.message || 'Saved successfully.', {
@@ -567,6 +636,11 @@ export default {
 }
 
 ::v-deep {
+
+  .nc-hint {
+    padding-left: 3px;
+  }
+
   .nc-required-switch, .nc-switch {
     .v-input--selection-controls__input {
       transform: scale(0.65) !important;
@@ -592,19 +666,19 @@ export default {
 
   .nc-field-wrapper {
 
-    .required {
-      & > input,
-      & > .xc-input > input,
-      & > .xc-input .v-input__slot input,
-      & > .xc-input > div > input,
-      & > select,
-      & > .xc-input > select,
-      textarea:not(.inputarea) {
-        border: 1px solid red;
-        border-radius: 4px;
-        background: var(--v-backgroundColorDefault-base);
-      }
-    }
+    //.required {
+    //  & > input,
+    //  .xc-input > input,
+    //  .xc-input .v-input__slot input,
+    //  .xc-input > div > input,
+    //  & > select,
+    //  .xc-input > select,
+    //  textarea:not(.inputarea) {
+    //    border: 1px solid rgba(255, 0, 0, 0.98);
+    //    border-radius: 4px;
+    //    background: var(--v-backgroundColorDefault-base);
+    //  }
+    //}
 
     div > input,
     div > .xc-input > input,
@@ -639,9 +713,9 @@ export default {
   //width: 400px;
   min-height: 40px;
   border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
 
   &:hover {
     background: var(--v-backgroundColor-base);
@@ -653,9 +727,10 @@ export default {
 }
 
 .nc-drag-n-drop-to-hide, .nc-drag-n-drop-to-show {
-  border: 2px dotted #a1a1a1;
+  border: 2px dashed #c4c4c4;
   border-radius: 4px;
-  font-size: .6rem;
+  font-size: .62rem;
+
   color: grey
 }
 
@@ -702,12 +777,12 @@ export default {
 //.nc-field-labels,
 .nc-field-editables {
   max-height: 0;
-  transition: .4s max-height linear;
-  overflow: hidden;
+  transition: .4s max-height;
+  overflow-y: hidden;
   display: block;
 
   &.nc-show {
-    max-height: 150px;
+    max-height: 500px;
   }
 }
 
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index a9c97b314e..30146ef6dc 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -36,6 +36,7 @@
               :meta="meta"
               :sql-ui="sqlUi"
               :is-public-view="isPublicView"
+              :is-locked="isLocked"
               @saved="onNewColCreation"
             />
 
@@ -50,6 +51,7 @@
               :is-foreign-key="col._cn in belongsTo || col._cn in hasMany"
               :column="col"
               :is-virtual="isVirtual"
+              :is-locked="isLocked"
               @onRelationDelete="$emit('onRelationDelete')"
               @saved="onNewColCreation"
             />
@@ -112,7 +114,7 @@
                 />
                 <v-spacer />
                 <v-icon
-                  v-if="!groupedAggCount[ids[row]]"
+                  v-if="!groupedAggCount[ids[row]] && !isLocked"
                   color="pink"
                   small
                   class="row-expand-icon nc-row-expand-icon  mr-1 pointer"
@@ -149,6 +151,7 @@
           >
             <virtual-cell
               v-if="columnObj.virtual"
+              :is-locked="isLocked"
               :column="columnObj"
               :row="rowObj"
               :nodes="nodes"
@@ -175,6 +178,7 @@
               :active="selected.col === col && selected.row === row"
               :sql-ui="sqlUi"
               :db-alias="nodes.dbAlias"
+              :is-locked="isLocked"
               @save="editEnabled = {}"
               @cancel="editEnabled = {}"
               @update="onCellValueChange(col, row, columnObj)"
@@ -225,15 +229,15 @@
 </template>
 
 <script>
-import DynamicStyle from '@/components/dynamicStyle'
-import HeaderCell from '@/components/project/spreadsheet/components/headerCell'
-import EditableCell from '@/components/project/spreadsheet/components/editableCell'
-import EditColumn from '@/components/project/spreadsheet/components/editColumn'
-import TableCell from '@/components/project/spreadsheet/components/cell'
+import HeaderCell from '../components/headerCell'
+import EditableCell from '../components/editableCell'
+import EditColumn from '../components/editColumn'
+import columnStyling from '../helpers/columnStyling'
+import VirtualCell from '../components/virtualCell'
+import VirtualHeaderCell from '../components/virtualHeaderCell'
 import colors from '@/mixins/colors'
-import columnStyling from '@/components/project/spreadsheet/helpers/columnStyling'
-import VirtualCell from '@/components/project/spreadsheet/components/virtualCell'
-import VirtualHeaderCell from '@/components/project/spreadsheet/components/virtualHeaderCell'
+import TableCell from '@/components/project/spreadsheet/components/cell'
+import DynamicStyle from '@/components/dynamicStyle'
 
 export default {
   name: 'XcGridView',
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 4df6a2a171..91d886c0e2 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -12889,6 +12889,11 @@
         "sortablejs": "1.10.2"
       }
     },
+    "vuelidate": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
+      "integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
+    },
     "vuetify": {
       "version": "2.5.8",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.8.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index f41de2daff..45d6142b1b 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -53,6 +53,7 @@
     "vue-tree-list": "^1.4.6",
     "vue-typer": "^1.2.0",
     "vuedraggable": "^2.24.0",
+    "vuelidate": "^0.7.6",
     "vuetify-datetime-picker": "^2.1.1",
     "vuex-persistedstate": "^3.1.0",
     "xterm": "^4.8.1",