diff --git a/.all-contributorsrc b/.all-contributorsrc
index 08a707910f..fead53513c 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -837,6 +837,15 @@
       "contributions": [
         "translation"
       ]
+    },
+    {
+      "login": "drsantam",
+      "name": "Santam Chakraborty",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10681456?v=4",
+      "profile": "https://github.com/drsantam",
+      "contributions": [
+        "translation"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
index d6dfb705db..03af937ccd 100644
--- a/README.md
+++ b/README.md
@@ -449,6 +449,7 @@ Our mission is to provide the most powerful no-code interface for databases whic
   </tr>
   <tr>
     <td align="center"><a href="https://yohanboniface.me"><img src="https://avatars.githubusercontent.com/u/146023?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yohan Boniface</b></sub></a><br /><a href="#translation-yohanboniface" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/drsantam"><img src="https://avatars.githubusercontent.com/u/10681456?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Santam Chakraborty</b></sub></a><br /><a href="#translation-drsantam" title="Translation">🌍</a></td>
   </tr>
 </table>
 
diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index d56cfb3174..9ca0b862d5 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -41,9 +41,9 @@ const toggleSidebar = () => {
           <span class="prose-xl">NocoDB</span>
         </div>
 
-        <div v-show="state.isLoading.value" class="text-gray-400 ml-3">
+        <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
-          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': state.isLoading.value }" />
+          <MdiReload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 
diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
new file mode 100644
index 0000000000..e465ffcdfc
--- /dev/null
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+
+interface Props {
+  modelValue: Record<string, any>[]
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const headerList = ref([
+  'A-IM',
+  'Accept',
+  'Accept-Charset',
+  'Accept-Encoding',
+  'Accept-Language',
+  'Accept-Datetime',
+  'Access-Control-Request-Method',
+  'Access-Control-Request-Headers',
+  'Authorization',
+  'Cache-Control',
+  'Connection',
+  'Content-Length',
+  'Content-Type',
+  'Cookie',
+  'Date',
+  'Expect',
+  'Forwarded',
+  'From',
+  'Host',
+  'If-Match',
+  'If-Modified-Since',
+  'If-None-Match',
+  'If-Range',
+  'If-Unmodified-Since',
+  'Max-Forwards',
+  'Origin',
+  'Pragma',
+  'Proxy-Authorization',
+  'Range',
+  'Referer',
+  'TE',
+  'User-Agent',
+  'Upgrade',
+  'Via',
+  'Warning',
+  'Non-standard headers',
+  'Dnt',
+  'X-Requested-With',
+  'X-CSRF-Token',
+])
+
+const addHeaderRow = () => vModel.value.push({})
+
+const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
+</script>
+
+<template>
+  <div class="flex flex-row justify-center">
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <!-- Intended to be empty - For checkbox -->
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Header Name</div>
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Value</div>
+          </th>
+          <th>
+            <!-- Intended to be empty - For delete button -->
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(headerRow, idx) in vModel" :key="idx">
+          <td class="px-2">
+            <a-form-item>
+              <a-checkbox v-model:checked="headerRow.enabled" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-select v-model:value="headerRow.name" size="large" placeholder="Key">
+                <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
+                  {{ header }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
+            </a-form-item>
+          </td>
+          <td class="relative">
+            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
+              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td :colspan="12" class="text-center">
+            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow">
+              <template #icon>
+                <MdiPlusIcon class="flex mx-auto" />
+              </template>
+            </a-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/api-client/Params.vue b/packages/nc-gui-v2/components/api-client/Params.vue
new file mode 100644
index 0000000000..bacdab9b54
--- /dev/null
+++ b/packages/nc-gui-v2/components/api-client/Params.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+
+interface Props {
+  modelValue: Record<string, any>[]
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const addParamRow = () => vModel.value.push({})
+
+const deleteParamRow = (idx: number) => vModel.value.splice(idx, 1)
+</script>
+
+<template>
+  <div class="flex flex-row justify-center">
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <!-- Intended to be empty - For checkbox -->
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Param Name</div>
+          </th>
+          <th>
+            <div class="text-center font-normal mb-2">Value</div>
+          </th>
+          <th>
+            <!-- Intended to be empty - For delete button -->
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(paramRow, idx) in vModel" :key="idx">
+          <td class="px-2">
+            <a-form-item>
+              <a-checkbox v-model:checked="paramRow.enabled" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="paramRow.name" size="large" placeholder="Key" />
+            </a-form-item>
+          </td>
+          <td class="px-2">
+            <a-form-item>
+              <a-input v-model:value="paramRow.value" size="large" placeholder="Value" />
+            </a-form-item>
+          </td>
+          <td class="relative">
+            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
+              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteParamRow(idx)" />
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td :colspan="12" class="text-center">
+            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addParamRow">
+              <template #icon>
+                <MdiPlusIcon class="flex mx-auto" />
+              </template>
+            </a-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 23d2d675b4..5bb5d77197 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,17 +1,38 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
+import { inject } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
+import MdiCheckBold from '~icons/mdi/check-bold'
+import MdiCropSquare from '~icons/mdi/crop-square'
+import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
+import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
+import MdiStar from '~icons/mdi/star'
+import MdiStarOutline from '~icons/mdi/star-outline'
+import MdiHeart from '~icons/mdi/heart'
+import MdiHeartOutline from '~icons/mdi/heart-outline'
+import MdiMoonFull from '~icons/mdi/moon-full'
+import MdiMoonNew from '~icons/mdi/moon-new'
+import MdiThumbUp from '~icons/mdi/thumb-up'
+import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
+import MdiFlag from '~icons/mdi/flag'
+import MdiFlagOutline from '~icons/mdi/flag-outline'
 
 interface Props {
   modelValue?: boolean | undefined | number
 }
 
-const { modelValue: value } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+interface Emits {
+  (event: 'update:modelValue', model: boolean | undefined | number): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+const vModel = $(useVModel(props, 'modelValue', emits))
+
 const column = inject(ColumnInj)
 const isForm = inject(IsFormInj)
 
-const checkboxMeta = computed(() => {
+const checkboxMeta = $computed(() => {
   return {
     icon: {
       checked: 'mdi-check-circle-outline',
@@ -22,70 +43,59 @@ const checkboxMeta = computed(() => {
   }
 })
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
-
-// const checkedIcon = computed(() => {
-//   return defineAsyncComponent( ()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.checked))
-// });
-// const uncheckedIcon = computed(() => {
-//   return defineAsyncComponent(()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.unchecked))
-// });
-
-/* export default {
-  name: 'BooleanCell',
-  props: {
-    column: Object,
-    value: [String, Number, Boolean],
-    isForm: Boolean,
-    readOnly: Boolean,
-  },
-  computed: {
-    checkedIcon() {
-      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.checked) || 'mdi-check-bold'
-    },
-    uncheckedIcon() {
-      return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.unchecked) || 'mdi-crop-square'
-    },
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-      return $listeners
-    },
-    checkboxMeta() {
-      return {
-        icon: {
-          checked: 'mdi-check-circle-outline',
-          unchecked: 'mdi-checkbox-blank-circle-outline',
-        },
-        color: 'primary',
-        ...(this.column && this.column.meta ? this.column.meta : {}),
-      }
-    },
-  },
-  methods: {
-    toggle() {
-      this.localState = !this.localState
-    },
-  },
-} */
+const icon = (type: string) => {
+  switch (type) {
+    case 'mdi-check-bold':
+      return MdiCheckBold
+    case 'mdi-crop-square':
+      return MdiCropSquare
+    case 'mdi-check-circle-outline':
+      return MdiCheckCircleOutline
+    case 'mdi-checkbox-blank-circle-outline':
+      return MdiCheckboxBlankCircleOutline
+    case 'mdi-star':
+      return MdiStar
+    case 'mdi-star-outline':
+      return MdiStarOutline
+    case 'mdi-heart':
+      return MdiHeart
+    case 'mdi-heart-outline':
+      return MdiHeartOutline
+    case 'mdi-moon-full':
+      return MdiMoonFull
+    case 'mdi-moon-new':
+      return MdiMoonNew
+    case 'mdi-thumb-up':
+      return MdiThumbUp
+    case 'mdi-thumb-up-outline':
+      return MdiThumbUpOutline
+    case 'mdi-flag':
+      return MdiFlag
+    case 'mdi-flag-outline':
+      return MdiFlagOutline
+  }
+}
 </script>
 
 <template>
-  <div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
-    <!--    <span :is="localState ? checkedIcon : uncheckedIcon" small :color="checkboxMeta.color" @click="toggle"> -->
-    <!--      {{ localState ? checkedIcon : uncheckedIcon }} -->
-    <!--    </span> -->
-
-    <input v-model="localState" type="checkbox" />
+  <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
+    <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
+      <component
+        :is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
+        :style="{
+          color: checkboxMeta.color,
+        }"
+      />
+    </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.nc-cell-hover-show {
+  opacity: 0;
+  transition: 0.3s opacity;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index b1de025b8d..653842a105 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,100 +1,28 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from '#imports'
+import { inject, onMounted, ref } from '#imports'
 
 interface Props {
   modelValue: any
 }
 
-const { modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
 const root = ref<HTMLInputElement>()
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
+const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
-
-/* export default {
-  name: 'TextCell',
-  props: {
-    value: [String, Object, Number, Boolean, Array],
-  },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      if (this.$listeners.cancel) {
-        $listeners.cancel = this.$listeners.cancel
-      }
-
-      return $listeners
-    },
-  },
-  mounted() {
-    this.$el.focus()
-  },
-} */
+const onSetRef = (el: HTMLInputElement) => {
+  el.focus()
+}
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="localState" />
-  <span v-else>{{ localState }}</span>
-  <!--  v-on="parentListeners" /> -->
+  <input v-if="editEnabled" :ref="onSetRef" v-model="vModel" class="h-full w-full outline-none" />
+  <span v-else>{{ vModel }}</span>
 </template>
 
-<style scoped>
-input,
-textarea {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-  outline: none;
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index d27590877d..25a6d98b26 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -5,70 +5,34 @@ interface Props {
   modelValue?: string
 }
 
-const { modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject<boolean>('editEnabled', false)
 
-const root = ref<HTMLInputElement>()
+const vModel = useVModel(props, 'modelValue', emits)
 
-const localState = computed({
-  get: () => value,
-  set: (val) => emit('update:modelValue', val),
-})
-
-onMounted(() => {
-  root.value?.focus()
-})
-
-/* export default {
-  name: 'TextAreaCell',
-  props: {
-    value: String,
-  },
-  computed: {
-    localState: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
-    },
-    parentListeners() {
-      const $listeners = {}
-
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
-
-      return $listeners
-    },
-  },
-  created() {
-    this.localState = this.value
-  },
-  mounted() {
-    this.$refs.textarea && this.$refs.textarea.focus()
-  },
-} */
+const onSetRef = (el: HTMLInputElement) => {
+  el.focus()
+}
 </script>
 
 <template>
-  <textarea v-if="editEnabled" ref="root" v-model="localState" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
-  <span v-else>{{ localState }}</span>
+  <textarea
+    v-if="editEnabled"
+    :ref="onSetRef"
+    v-model="vModel"
+    rows="4"
+    class="h-full w-full min-h-[60px] outline-none"
+    @keydown.alt.enter.stop
+    @keydown.shift.enter.stop
+  />
+  <span v-else>{{ vModel }}</span>
 </template>
 
 <style scoped>
-input,
-textarea {
-  width: 100%;
-  min-height: 60px;
-  height: 100%;
-  color: var(--v-textColor-base);
+textarea:focus {
+  @apply ring-transparent;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index e13eadd331..9969bacf2a 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -239,7 +239,7 @@ const addTableTab = (table: TableType) => {
     </div>
 
     <SettingsModal :show="settingsDlg" @closed="settingsDlg = false" />
-    <DlgTableCreate v-model="tableCreateDlg" />
+    <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index da7e6e7f8c..390c4a4511 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -2,6 +2,7 @@
 import io from 'socket.io-client'
 import type { Socket } from 'socket.io-client'
 import { Form } from 'ant-design-vue'
+import type { Card as AntCard } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { fieldRequiredValidator } from '~/utils/validation'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -14,18 +15,30 @@ interface Props {
 }
 
 const { modelValue } = defineProps<Props>()
+
 const emit = defineEmits(['update:modelValue'])
 
 // TODO: handle baseURL
 const baseURL = 'http://localhost:8080' // this.$axios.defaults.baseURL
 
 const { $state } = useNuxtApp()
+
 const toast = useToast()
+
 const { sqlUi, project, loadTables } = useProject()
+
 const loading = ref(false)
+
+const showGoToDashboardButton = ref(false)
+
 const step = ref(1)
+
 const progress = ref<Record<string, any>[]>([])
+
+const logRef = ref<typeof AntCard>()
+
 let socket: Socket | null
+
 const syncSource = ref({
   id: '',
   type: 'Airtable',
@@ -64,6 +77,7 @@ const dialogShow = computed({
 })
 
 const useForm = Form.useForm
+
 const { resetFields, validate, validateInfos } = useForm(syncSource, validators)
 
 const disableImportButton = computed(() => {
@@ -194,7 +208,14 @@ onMounted(async () => {
 
   socket.on('progress', async (d: Record<string, any>) => {
     progress.value.push(d)
+
+    // FIXME: this doesn't work
+    nextTick(() => {
+      ;(logRef.value?.$el as HTMLDivElement).scrollTo()
+    })
+
     if (d.status === 'COMPLETED') {
+      showGoToDashboardButton.value = true
       await loadTables()
       // TODO: add tab of the first table
     }
@@ -210,7 +231,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
@@ -291,7 +312,7 @@ onBeforeUnmount(() => {
       </div>
       <div v-if="step === 2">
         <div class="mb-4 prose-xl font-bold">Logs</div>
-        <a-card body-style="background-color: #000000; height:400px; overflow: auto;">
+        <a-card ref="logRef" body-style="background-color: #000000; height:400px; overflow: auto;">
           <div v-for="({ msg, status }, i) in progress" :key="i">
             <div v-if="status === 'FAILED'" class="flex items-center">
               <MdiCloseCircleOutlineIcon class="text-red-500" />
@@ -314,6 +335,10 @@ onBeforeUnmount(() => {
             <span class="text-green-500 ml-2"> Importing</span>
           </div>
         </a-card>
+        <div class="flex justify-center items-center">
+          <a-button v-if="showGoToDashboardButton" class="mt-4" size="large" @click="dialogShow = false">Go to Dashboard</a-button
+          >
+        </div>
       </div>
     </div>
   </a-modal>
diff --git a/packages/nc-gui-v2/components/dlg/QuickImport.vue b/packages/nc-gui-v2/components/dlg/QuickImport.vue
index 4678f101b9..c9ccf6dd6b 100644
--- a/packages/nc-gui-v2/components/dlg/QuickImport.vue
+++ b/packages/nc-gui-v2/components/dlg/QuickImport.vue
@@ -18,7 +18,7 @@ interface Props {
   importType: 'csv' | 'json' | 'excel'
 }
 
-const { modelValue, importType } = defineProps<Props>()
+const { importType, ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -97,14 +97,7 @@ const importMeta = computed(() => {
   return {}
 })
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
+const dialogShow = useVModel(rest, 'modelValue', emit)
 
 const disablePreImportButton = computed(() => {
   if (activeKey.value === 'uploadTab') {
@@ -123,6 +116,13 @@ const disableImportButton = computed(() => {
 
 const disableFormatJsonButton = computed(() => !jsonEditorRef.value?.isValid)
 
+const modalWidth = computed(() => {
+  if (importType === 'excel' && templateEditorModal.value) {
+    return 'max(90vw, 600px)'
+  }
+  return 'max(60vw, 600px)'
+})
+
 async function handlePreImport() {
   loading.value = true
   if (activeKey.value === 'uploadTab') {
@@ -141,9 +141,14 @@ async function handlePreImport() {
 }
 
 async function handleImport() {
-  loading.value = true
-  await templateEditorRef.value.importTemplate()
-  loading.value = false
+  try {
+    loading.value = true
+    await templateEditorRef.value.importTemplate()
+  } catch (e: any) {
+    return toast.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    loading.value = false
+  }
   dialogShow.value = false
 }
 
@@ -228,12 +233,16 @@ function getAdapter(name: string, val: any) {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(60vw, 600px)" @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" :width="modalWidth" :mask-closable="false" @keydown.esc="dialogShow = false">
     <a-typography-title class="ml-5 mt-5 mb-5" type="secondary" :level="5">{{ importMeta.header }}</a-typography-title>
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>
       <a-button v-else key="cancel" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-      <a-button v-if="activeKey === 'jsonEditorTab'" key="format" :disabled="disableFormatJsonButton" @click="formatJson"
+      <a-button
+        v-if="activeKey === 'jsonEditorTab' && !templateEditorModal"
+        key="format"
+        :disabled="disableFormatJsonButton"
+        @click="formatJson"
         >Format JSON</a-button
       >
       <a-button
@@ -257,6 +266,7 @@ function getAdapter(name: string, val: any) {
         :project-template="templateData"
         :import-data="importData"
         :quick-import-type="importType"
+        @import="handleImport"
       />
       <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
         <a-tab-pane key="uploadTab" :closable="false">
@@ -289,7 +299,7 @@ function getAdapter(name: string, val: any) {
           <template #tab>
             <span class="flex items-center gap-2">
               <MdiCodeJSONIcon />
-              Json Editor
+              JSON Editor
             </span>
           </template>
           <div class="pb-3 pt-3">
@@ -300,7 +310,7 @@ function getAdapter(name: string, val: any) {
           <template #tab>
             <span class="flex items-center gap-2">
               <MdiLinkVariantIcon />
-              Url
+              URL
             </span>
           </template>
           <div class="pr-10 pt-5">
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index a9260fe7d0..1ad2835612 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { ComponentPublicInstance } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
 import { onMounted, useProject, useTable, useTabs } from '#imports'
@@ -12,17 +11,16 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:modelValue', 'create'])
+const emit = defineEmits(['update:modelValue'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
-const idTypes = [
-  { value: 'AI', text: 'Auto increment number' },
-  { value: 'AG', text: 'Auto generated string' },
-]
 const toast = useToast()
+
 const valid = ref(false)
+
 const isIdToggleAllowed = ref(false)
+
 const isAdvanceOptVisible = ref(false)
 
 const { addTab } = useTabs()
@@ -52,50 +50,32 @@ const validateDuplicate = (v: string) => {
   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
 }
 
-const inputEl = ref<ComponentPublicInstance>()
+const inputEl = ref<HTMLInputElement>()
+
 const useForm = Form.useForm
-const formState = reactive({
-  title: '',
-  table_name: '',
-  columns: {
-    id: true,
-    title: true,
-    created_at: true,
-    updated_at: true,
-  },
-})
+
 const validators = computed(() => {
   return {
     title: [validateTableName, validateDuplicateAlias],
     table_name: [validateTableName],
   }
 })
-const { resetFields, validate, validateInfos } = useForm(formState, validators)
+const { resetFields, validate, validateInfos } = useForm(table, validators)
 
 onMounted(() => {
   generateUniqueTitle()
-
-  nextTick(() => {
-    const el = inputEl.value?.$el
-    el?.querySelector('input')?.focus()
-    el?.querySelector('input')?.select()
-  })
+  inputEl.value?.focus()
 })
 </script>
 
 <template>
-  <a-modal
-    v-model:visible="dialogShow"
-    width="max(30vw, 600px)"
-    @keydown.esc="dialogShow = false"
-    @keydown.enter="$emit('create', table)"
-  >
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" size="large" type="primary" @click="createTable">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
     </template>
     <div class="pl-10 pr-10 pt-5">
-      <a-form :model="formState" name="create-new-table-form">
+      <a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
         <!-- hint="Enter table name" -->
@@ -119,7 +99,7 @@ onMounted(() => {
         </div>
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
-          <div class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
+          <div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
           <a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
             <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
           </a-form-item>
@@ -134,17 +114,17 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox v-model:checked="formState.columns.id" disabled>ID</a-checkbox>
+                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.title"> title </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.created_at"> created_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
               </a-col>
               <a-col :span="6">
-                <a-checkbox v-model:checked="formState.columns.updated_at"> updated_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
               </a-col>
             </a-row>
           </div>
diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index 70bbb33699..180b6f9b10 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -95,6 +95,7 @@ const renameTable = async () => {
   <a-modal
     v-model:visible="dialogShow"
     :title="$t('activity.renameTable')"
+    :mask-closable="false"
     @keydown.esc="dialogShow = false"
     @finish="renameTable"
   >
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index dc59828199..371b466590 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -2,12 +2,20 @@
 import * as monaco from 'monaco-editor'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import { onMounted } from '#imports'
 import { deepCompare } from '~/utils'
 
-const { modelValue } = defineProps<{ modelValue: any }>()
+interface Props {
+  modelValue: string
+  lang?: string
+  validate?: boolean
+}
+
+const { modelValue, lang = 'json', validate = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
+
 const isValid = ref(true)
 
 /**
@@ -16,10 +24,14 @@ const isValid = ref(true)
  * @ts-expect-error */
 self.MonacoEnvironment = {
   getWorker(_: any, label: string) {
-    if (label === 'json') {
-      return new JsonWorker()
+    switch (label) {
+      case 'json':
+        return new JsonWorker()
+      case 'typescript':
+        return new TypescriptWorker()
+      default:
+        return new EditorWorker()
     }
-    return new EditorWorker()
   },
 }
 
@@ -36,13 +48,14 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (root.value) {
-    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json')
-
-    // configure the JSON language support with schemas and schema associations
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-    })
+  if (root.value && lang) {
+    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), lang)
+    if (lang === 'json') {
+      // configure the JSON language support with schemas and schema associations
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: validate as boolean,
+      })
+    }
 
     editor = monaco.editor.create(root.value, {
       model,
@@ -60,8 +73,15 @@ onMounted(() => {
     editor.onDidChangeModelContent(async (e) => {
       try {
         isValid.value = true
-        const obj = JSON.parse(editor.getValue())
-        if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
+
+        const value = editor?.getValue()
+        if (typeof modelValue === 'object') {
+          if (!value || !deepCompare(modelValue, JSON.parse(value))) {
+            emit('update:modelValue', JSON.stringify(modelValue, null, 2))
+          }
+        } else {
+          if (value !== modelValue) emit('update:modelValue', value)
+        }
       } catch (e) {
         isValid.value = false
         console.log(e)
@@ -73,8 +93,15 @@ onMounted(() => {
 watch(
   () => modelValue,
   (v) => {
-    if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) {
-      editor.setValue(JSON.stringify(v, null, 2))
+    if (editor && v) {
+      const value = editor?.getValue()
+      if (typeof v === 'object') {
+        if (!value || !deepCompare(v, JSON.parse(value))) {
+          editor.setValue(JSON.stringify(v, null, 2))
+        }
+      } else {
+        if (value !== v) editor.setValue(v)
+      }
     }
   },
 )
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 0c05c1a8a5..b288da87d3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -54,8 +54,6 @@ const icon = computed(() => {
     return AttachmentIcon
   } else if (additionalColMeta.isDecimal) {
     return DecimalIcon
-  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
-    return NumericIcon
   } else if (additionalColMeta.isPhoneNumber) {
     return FilePhoneIcon
   }
@@ -68,6 +66,8 @@ const icon = computed(() => {
     return CurrencyIcon
   } else if (additionalColMeta.isPercent) {
     return PercentIcon
+  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
+    return NumericIcon
   } else if (additionalColMeta.isString) {
     return StringIcon
   } else {
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index d9aadc6811..5caf418e77 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -8,6 +8,7 @@ import BTIcon from '~icons/mdi/table-arrow-left'
 import MMIcon from '~icons/mdi/table-network'
 import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
+import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
 
 const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
@@ -34,6 +35,8 @@ const icon = computed(() => {
       return GenericIcon
     case UITypes.Rollup:
       return RollupIcon
+    case UITypes.Count:
+      return CountIcon
   }
   return GenericIcon
 })
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index daeeaf6402..99c3ec34da 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -17,14 +17,24 @@ const sharedViewListDlg = ref(false)
 
 // todo : replace with inject
 const publicViewId = null
+
+// TODO:: identify based on meta
+const isView = ref(false)
+
+const { isUIAllowed } = useUIPermission()
+
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
+
 const toast = useToast()
 
 const meta = inject(MetaInj)
+
 const selectedView = inject(ActiveViewInj)
 
+const showWebhookDrawer = ref(false)
+
 const exportCsv = async () => {
   let offset = 0
   let c = 1
@@ -117,7 +127,7 @@ const exportCsv = async () => {
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
-            <div class="nc-menu-item" @click.stop>
+            <div class="nc-menu-item" @click="showWebhookDrawer = true">
               <MdiHookIcon />
               <!-- todo: i18n -->
               Webhook
@@ -127,6 +137,8 @@ const exportCsv = async () => {
       </template>
     </a-dropdown>
 
+    <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
+
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 4c8a4725ea..47eb8e5cc1 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -15,7 +15,7 @@ const emit = defineEmits(['update:modelValue'])
 provide(ColumnInj, column)
 provide('value', value)
 
-const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
 
 <template>
@@ -25,6 +25,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(colum
     <VirtualCellBelongsTo v-else-if="isBt" />
     <VirtualCellRollup v-else-if="isRollup" />
     <VirtualCellFormula v-else-if="isFormula" />
+    <VirtualCellCount v-else-if="isCount" />
 
     <!--    <v-lazy> -->
     <!--      <has-many-cell
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e4e800d936..6f8de8eac4 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -2,8 +2,8 @@
 import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
-import Toolbar from './Toolbar.vue'
-import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
+import Toolbar from './toolbar/index.vue'
+import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
similarity index 65%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 9e99331042..c75481f2a8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import MdiAddIcon from '~icons/mdi/plus-outline'
+import { inject, ref } from '#imports'
+import { RightSidebarInj } from '~/context'
 
 const emits = defineEmits(['addRow'])
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
similarity index 65%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index 0a4f7ba450..6f0cdd5a8b 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { inject, useTable } from '#imports'
-import { MetaInj } from '~/context'
+import { inject, ref, useTable } from '#imports'
+import { MetaInj, RightSidebarInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
 const meta = inject(MetaInj)
 
 const { deleteTable } = useTable()
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
similarity index 99%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
index 2a216287fd..cfa3b57038 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue
@@ -54,6 +54,7 @@ const Icon = computed(() => {
     <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
       <Icon class="cursor-pointer group-hover:(!text-white)" />
     </div>
+
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
similarity index 65%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index 5a7942b884..fc68b3d577 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj } from '~/context'
+import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
 import MdiReloadIcon from '~icons/mdi/reload'
+import { inject, ref } from '#imports'
 
 const reloadTri = inject(ReloadViewDataHookInj)
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
similarity index 91%
rename from packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index 9854e43b83..4f0c3adf44 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -8,7 +8,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(false))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
similarity index 53%
rename from packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue
rename to packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 155c46cc6d..ee85df548f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,24 +1,32 @@
+<script lang="ts" setup>
+import AddRow from './AddRow.vue'
+import DeleteTable from './DeleteTable.vue'
+import LockMenu from './LockMenu.vue'
+import Reload from './Reload.vue'
+import ToggleDrawer from './ToggleDrawer.vue'
+</script>
+
 <template>
   <div class="flex gap-2">
     <slot name="start" />
 
-    <SmartsheetToolbarLockMenu />
+    <LockMenu />
 
     <div class="dot" />
 
-    <SmartsheetToolbarReload />
+    <Reload />
 
     <div class="dot" />
 
-    <SmartsheetToolbarAddRow />
+    <AddRow />
 
     <div class="dot" />
 
-    <SmartsheetToolbarDeleteTable />
+    <DeleteTable />
 
     <div class="dot" />
 
-    <SmartsheetToolbarToggleDrawer />
+    <ToggleDrawer />
 
     <slot name="end" />
   </div>
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 247e300353..157ad46a41 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -28,6 +28,8 @@ interface Option {
 
 const { quickImportType, projectTemplate, importData } = defineProps<Props>()
 
+const emit = defineEmits(['import'])
+
 const useForm = Form.useForm
 
 const { $api } = useNuxtApp()
@@ -73,6 +75,9 @@ const { sqlUi, project, loadTables } = useProject()
 
 onMounted(() => {
   parseAndLoadTemplate()
+  nextTick(() => {
+    inputRefs.value[0]?.focus()
+  })
 })
 
 const validators = computed(() =>
@@ -174,9 +179,8 @@ async function importTemplate() {
   try {
     await validate()
   } catch (errorInfo) {
-    toast.error('Please fill all the required values')
     isImporting.value = false
-    return
+    throw new Error('Please fill all the required values')
   }
 
   try {
@@ -283,7 +287,7 @@ defineExpose({
 <template>
   <a-spin :spinning="isImporting" :tip="importingTip" size="large">
     <a-card>
-      <a-form :model="data" name="template-editor-form">
+      <a-form :model="data" name="template-editor-form" @keydown.enter="emit('import')">
         <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
@@ -358,16 +362,15 @@ defineExpose({
                         }
                       "
                       v-model:value="record.column_name"
-                      size="large"
                     />
                   </a-form-item>
                 </template>
                 <template v-else-if="column.key === 'uidt'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-auto-complete
+                    <a-select
                       v-model:value="record.uidt"
                       class="w-52"
-                      size="large"
+                      show-search
                       :options="uiTypeOptions"
                       :filter-option="filterOption"
                     />
@@ -376,7 +379,7 @@ defineExpose({
 
                 <template v-else-if="column.key === 'dtxp'">
                   <a-form-item v-if="isSelect(record)">
-                    <a-input v-model:value="record.dtxp" size="large" />
+                    <a-input v-model:value="record.dtxp" />
                   </a-form-item>
                 </template>
 
@@ -386,9 +389,9 @@ defineExpose({
                       <!-- TODO: i18n -->
                       <span>Primary Value</span>
                     </template>
-                    <span class="mr-3">
+                    <div class="flex items-center float-right mr-4">
                       <MdiKeyStarIcon class="text-lg" />
-                    </span>
+                    </div>
                   </a-tooltip>
                   <a-tooltip v-else>
                     <template #title>
@@ -448,7 +451,7 @@ defineExpose({
                   <!-- TODO: i18n -->
                   <span>Add Other Column</span>
                 </template>
-                <a-button @click="addNewColumnRow(table)">
+                <a-button @click="addNewColumnRow(table, 'SingleLineText')">
                   <div class="flex items-center">
                     <MdiPlusIcon class="text-lg" />
                     Column
@@ -473,7 +476,10 @@ defineExpose({
     @apply bg-white;
   }
   :deep(.template-form-row) > td {
-    @apply !pb-0;
+    @apply pa-0 mb-0;
+    .ant-form-item {
+      @apply mb-0;
+    }
   }
 }
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Count.vue b/packages/nc-gui-v2/components/virtual-cell/Count.vue
new file mode 100644
index 0000000000..29d0c7176a
--- /dev/null
+++ b/packages/nc-gui-v2/components/virtual-cell/Count.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// TODO: wait for Count Column implementation
+</script>
+
+<template>
+  <span class="prose-sm"></span>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index 2354a64d65..4ffe9ae5b9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const { value } = defineProps<{ value?: any }>()
+const value = inject('value')
 </script>
 
 <template>
-  <span>
+  <span class="text-center pl-3">
     {{ value }}
   </span>
 </template>
diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
new file mode 100644
index 0000000000..ca8083d6d4
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const editOrAdd = ref(false)
+
+const webhookEditorRef = ref()
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+async function editHook(hook: Record<string, any>) {
+  editOrAdd.value = true
+  nextTick(async () => {
+    webhookEditorRef.value.setHook(hook)
+    await webhookEditorRef.value.onEventChange()
+  })
+}
+</script>
+
+<template>
+  <a-drawer v-model:visible="vModel" :closable="false" placement="right" width="700px" @keydown.esc="vModel = false">
+    <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+    <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+    <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
+      <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        🚀 We are Hiring! 🚀
+      </a-button>
+    </div>
+  </a-drawer>
+</template>
diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
new file mode 100644
index 0000000000..1539e62a71
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -0,0 +1,610 @@
+<script setup lang="ts">
+import { Form } from 'ant-design-vue'
+import { useToast } from 'vue-toastification'
+import { MetaInj } from '~/context'
+import MdiContentSaveIcon from '~icons/mdi/content-save'
+import MdiLinkIcon from '~icons/mdi/link'
+import MdiEmailIcon from '~icons/mdi/email'
+import MdiSlackIcon from '~icons/mdi/slack'
+import MdiMicrosoftTeamsIcon from '~icons/mdi/microsoft-teams'
+import MdiDiscordIcon from '~icons/mdi/discord'
+import MdiChatIcon from '~icons/mdi/chat'
+import MdiWhatsAppIcon from '~icons/mdi/whatsapp'
+import MdiCellPhoneMessageIcon from '~icons/mdi/cellphone-message'
+import MdiGestureDoubleTapIcon from '~icons/mdi/gesture-double-tap'
+import MdiInformationIcon from '~icons/mdi/information'
+import MdiArrowLeftBoldIcon from '~icons/mdi/arrow-left-bold'
+import { fieldRequiredValidator } from '~/utils/validation'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+
+interface Option {
+  label: string
+  value: string
+}
+
+const emit = defineEmits(['backToList', 'editOrAdd'])
+
+const { $state, $api, $e } = useNuxtApp()
+
+const toast = useToast()
+
+const meta = inject(MetaInj)
+
+const useForm = Form.useForm
+
+const hook = reactive({
+  id: '',
+  title: '',
+  event: '',
+  operation: '',
+  eventOperation: undefined,
+  notification: {
+    type: 'URL',
+    payload: {
+      method: 'POST',
+      body: '{{ json data }}',
+      headers: [{}],
+      parameters: [{}],
+    } as any,
+  },
+  condition: false,
+})
+
+const urlTabKey = ref('body')
+
+const apps: Record<string, any> = ref()
+
+const webhookTestRef = ref()
+
+const slackChannels = ref<Record<string, any>[]>([])
+
+const teamsChannels = ref<Record<string, any>[]>([])
+
+const discordChannels = ref<Record<string, any>[]>([])
+
+const mattermostChannels = ref<Record<string, any>[]>([])
+
+const loading = ref(false)
+
+const filters = ref([])
+
+const formInput = ref({
+  'Email': [
+    {
+      key: 'to',
+      label: 'To Address',
+      placeholder: 'To Address',
+      type: 'SingleLineText',
+      required: true,
+    },
+    {
+      key: 'subject',
+      label: 'Subject',
+      placeholder: 'Subject',
+      type: 'SingleLineText',
+      required: true,
+    },
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Slack': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Microsoft Teams': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Discord': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Mattermost': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Twilio': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+    {
+      key: 'to',
+      label: 'Comma separated Mobile #',
+      placeholder: 'Comma separated Mobile #',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+  'Whatsapp Twilio': [
+    {
+      key: 'body',
+      label: 'Body',
+      placeholder: 'Body',
+      type: 'LongText',
+      required: true,
+    },
+    {
+      key: 'to',
+      label: 'Comma separated Mobile #',
+      placeholder: 'Comma separated Mobile #',
+      type: 'LongText',
+      required: true,
+    },
+  ],
+})
+
+const eventList = ref([
+  // {text: ["Before", "Insert"], value: ['before', 'insert']},
+  { text: ['After', 'Insert'], value: ['after', 'insert'] },
+  // {text: ["Before", "Update"], value: ['before', 'update']},
+  { text: ['After', 'Update'], value: ['after', 'update'] },
+  // {text: ["Before", "Delete"], value: ['before', 'delete']},
+  { text: ['After', 'Delete'], value: ['after', 'delete'] },
+])
+
+const notificationList = ref([
+  { type: 'URL' },
+  { type: 'Email' },
+  { type: 'Slack' },
+  { type: 'Microsoft Teams' },
+  { type: 'Discord' },
+  { type: 'Mattermost' },
+  { type: 'Twilio' },
+  { type: 'Whatsapp Twilio' },
+])
+
+const methodList = ref([
+  { title: 'GET' },
+  { title: 'POST' },
+  { title: 'DELETE' },
+  { title: 'PUT' },
+  { title: 'HEAD' },
+  { title: 'PATCH' },
+])
+
+const validators = computed(() => {
+  return {
+    'title': [fieldRequiredValidator],
+    'eventOperation': [fieldRequiredValidator],
+    'notification.type': [fieldRequiredValidator],
+    ...(hook.notification.type === 'URL' && {
+      'notification.payload.method': [fieldRequiredValidator],
+      'notification.payload.path': [fieldRequiredValidator],
+    }),
+    ...(hook.notification.type === 'Email' && {
+      'notification.payload.to': [fieldRequiredValidator],
+      'notification.payload.subject': [fieldRequiredValidator],
+      'notification.payload.body': [fieldRequiredValidator],
+    }),
+    ...((hook.notification.type === 'Slack' ||
+      hook.notification.type === 'Microsoft Teams' ||
+      hook.notification.type === 'Discord' ||
+      hook.notification.type === 'Mattermost') && {
+      'notification.payload.channels': [fieldRequiredValidator],
+      'notification.payload.body': [fieldRequiredValidator],
+    }),
+    ...((hook.notification.type === 'Twilio' || hook.notification.type === 'Whatsapp Twilio') && {
+      'notification.payload.body': [fieldRequiredValidator],
+      'notification.payload.to': [fieldRequiredValidator],
+    }),
+  }
+})
+const { resetFields, validate, validateInfos } = useForm(hook, validators)
+
+function onNotTypeChange() {
+  hook.notification.payload = {} as any
+
+  if (hook.notification.type === 'Slack') {
+    slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
+  }
+  if (hook.notification.type === 'Microsoft Teams') {
+    teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
+  }
+  if (hook.notification.type === 'Discord') {
+    discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
+  }
+  if (hook.notification.type === 'Mattermost') {
+    mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
+  }
+  if (hook.notification.type === 'URL') {
+    hook.notification.payload.body = '{{ json data }}'
+    hook.notification.payload.parameters = [{}]
+    hook.notification.payload.headers = [{}]
+    hook.notification.payload.method = 'POST'
+  }
+}
+
+function filterOption(input: string, option: Option) {
+  return option.value.toUpperCase().includes(input.toUpperCase())
+}
+
+function setHook(newHook: any) {
+  Object.assign(hook, {
+    ...newHook,
+    notification: {
+      ...newHook.notification,
+      payload: newHook.notification.payload,
+    },
+  })
+}
+
+async function onEventChange() {
+  const { notification: { payload = {}, type = {} } = {}, ...rest } = hook
+
+  Object.assign(hook, {
+    ...hook,
+    notification: {
+      type,
+      payload,
+    },
+  })
+
+  hook.notification.payload = payload
+
+  let channels: Record<string, any>[] | null = null
+
+  switch (hook.notification.type) {
+    case 'Slack':
+      channels = slackChannels as any
+      break
+    case 'Microsoft Teams':
+      channels = teamsChannels as any
+      break
+    case 'Discord':
+      channels = discordChannels as any
+      break
+    case 'Mattermost':
+      channels = mattermostChannels as any
+      break
+  }
+
+  if (channels) {
+    hook.notification.payload.webhook_url =
+      hook.notification.payload.webhook_url &&
+      hook.notification.payload.webhook_url.map((v: Record<string, any>) =>
+        channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
+      )
+  }
+
+  if (hook.notification.type === 'URL') {
+    hook.notification.payload = hook.notification.payload || {}
+    hook.notification.payload.parameters = hook.notification.payload.parameters || [{}]
+    hook.notification.payload.headers = hook.notification.payload.headers || [{}]
+    hook.notification.payload.method = hook.notification.payload.method || 'POST'
+  }
+}
+
+async function loadPluginList() {
+  try {
+    const plugins = (await $api.plugin.list()).list as any
+    apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
+      p.tags = p.tags ? p.tags.split(',') : []
+      p.parsedInput = p.input && JSON.parse(p.input)
+      o[p.title] = p
+      return o
+    }, {})
+
+    if (hook.event && hook.operation) {
+      hook.eventOperation = `${hook.event} ${hook.operation}`
+    }
+  } catch (e: any) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  }
+}
+
+async function saveHooks() {
+  loading.value = true
+  try {
+    await validate()
+  } catch (_: any) {
+    toast.error('Invalid Form')
+    loading.value = false
+    return
+  }
+
+  try {
+    let res
+    if (hook.id) {
+      res = await $api.dbTableWebhook.update(hook.id, {
+        ...hook,
+        notification: {
+          ...hook.notification,
+          payload: hook.notification.payload,
+        },
+      } as any)
+    } else {
+      res = await $api.dbTableWebhook.create(
+        meta?.value.id as string,
+        {
+          ...hook,
+          notification: {
+            ...hook.notification,
+            payload: hook.notification.payload,
+          },
+        } as any,
+      )
+    }
+
+    if (!hook.id && res) {
+      hook.id = res.id
+    }
+
+    // TODO: wait for filter implementation
+    // if ($refs.filter) {
+    //   await $refs.filter.applyChanges(false, {
+    //     hookId: hook.id,
+    //   });
+    // }
+
+    toast.success('Webhook details updated successfully')
+  } catch (e: any) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  } finally {
+    loading.value = false
+  }
+  $e('a:webhook:add', {
+    operation: hook.operation,
+    condition: hook.condition,
+    notification: hook.notification.type,
+  })
+}
+
+async function testWebhook() {
+  await webhookTestRef.value.testWebhook()
+}
+
+defineExpose({
+  onEventChange,
+  setHook,
+})
+
+watch(
+  () => hook.eventOperation,
+  (v) => {
+    const [event, operation] = hook.eventOperation.split(' ')
+    hook.event = event
+    hook.operation = operation
+  },
+)
+
+onMounted(() => {
+  loadPluginList()
+})
+</script>
+
+<template>
+  <div class="mb-4">
+    <div class="float-left mt-2">
+      <div class="flex items-center">
+        <MdiArrowLeftBoldIcon class="mr-3 text-xl cursor-pointer" @click="emit('backToList')" />
+        <span class="inline text-xl font-bold">{{ meta.title }} : {{ hook.title || 'Webhooks' }} </span>
+      </div>
+    </div>
+    <div class="float-right mb-5">
+      <a-button class="mr-3" size="large" @click="testWebhook">
+        <div class="flex items-center">
+          <MdiGestureDoubleTapIcon class="mr-2" />
+          <!-- TODO: i18n -->
+          Test Webhook
+        </div>
+      </a-button>
+      <a-button type="primary" size="large" @click.prevent="saveHooks">
+        <div class="flex items-center">
+          <MdiContentSaveIcon class="mr-2" />
+          <!-- Save -->
+          {{ $t('general.save') }}
+        </div>
+      </a-button>
+    </div>
+  </div>
+  <a-divider />
+  <a-form :model="hook" name="create-or-edit-webhook">
+    <a-form-item>
+      <a-row type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos.title">
+            <a-input v-model:value="hook.title" size="large" :placeholder="$t('general.title')" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row type="flex" :gutter="[16, 16]">
+        <a-col :span="12">
+          <a-form-item v-bind="validateInfos.eventOperation">
+            <a-select v-model:value="hook.eventOperation" size="large" :placeholder="$t('general.event')">
+              <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
+                {{ event.text.join(' ') }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item v-bind="validateInfos['notification.type']">
+            <a-select
+              v-model:value="hook.notification.type"
+              size="large"
+              :placeholder="$t('general.notification')"
+              @change="onNotTypeChange"
+            >
+              <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
+                <div class="flex items-center">
+                  <MdiLinkIcon v-if="notificationOption.type === 'URL'" class="mr-2" />
+                  <MdiEmailIcon v-if="notificationOption.type === 'Email'" class="mr-2" />
+                  <MdiSlackIcon v-if="notificationOption.type === 'Slack'" class="mr-2" />
+                  <MdiMicrosoftTeamsIcon v-if="notificationOption.type === 'Microsoft Teams'" class="mr-2" />
+                  <MdiDiscordIcon v-if="notificationOption.type === 'Discord'" class="mr-2" />
+                  <MdiChatIcon v-if="notificationOption.type === 'Mattermost'" class="mr-2" />
+                  <MdiWhatsAppIcon v-if="notificationOption.type === 'Whatsapp Twilio'" class="mr-2" />
+                  <MdiCellPhoneMessageIcon v-if="notificationOption.type === 'Twilio'" class="mr-2" />
+                  {{ notificationOption.type }}
+                </div>
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
+        <a-col :span="6">
+          <a-select v-model:value="hook.notification.payload.method" size="large">
+            <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
+          </a-select>
+        </a-col>
+        <a-col :span="18">
+          <a-form-item v-bind="validateInfos['notification.payload.path']">
+            <a-input v-model:value="hook.notification.payload.path" size="large" placeholder="http://example.com" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-tabs v-model:activeKey="urlTabKey" centered>
+            <a-tab-pane key="body" tab="Body">
+              <MonacoEditor v-model="hook.notification.payload.body" :validate="false" class="min-h-60 max-h-80" />
+            </a-tab-pane>
+            <a-tab-pane key="params" tab="Params" force-render>
+              <ApiClientParams v-model="hook.notification.payload.parameters" />
+            </a-tab-pane>
+            <a-tab-pane key="headers" tab="Headers">
+              <ApiClientHeaders v-model="hook.notification.payload.headers" />
+            </a-tab-pane>
+            <a-tab-pane key="auth" tab="Auth">
+              <MonacoEditor v-model="hook.notification.payload.auth" class="min-h-60 max-h-80" />
+              <span class="text-gray-600 prose-sm">
+                For more about auth option refer
+                <a class="prose-sm" href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.
+              </span>
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
+      </a-row>
+      <a-row v-if="hook.notification.type === 'Slack'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="hook.notification.payload.channels"
+              size="large"
+              :options="slackChannels"
+              placeholder="Select Slack channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="hook.notification.payload.channels"
+              size="large"
+              :options="teamsChannels"
+              placeholder="Select Microsoft Teams channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="hook.notification.type === 'Discord'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="hook.notification.payload.channels"
+              size="large"
+              :options="discordChannels"
+              placeholder="Select Discord channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
+        <a-col :span="24">
+          <a-form-item v-bind="validateInfos['notification.channels']">
+            <a-auto-complete
+              v-model:value="hook.notification.payload.channels"
+              size="large"
+              :options="mattermostChannels"
+              placeholder="Select Mattermost channels"
+              :filter-option="filterOption"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="formInput[hook.notification.type] && hook.notification.payload" type="flex">
+        <a-col v-for="(input, i) in formInput[hook.notification.type]" :key="i" :span="24">
+          <a-form-item v-if="input.type === 'LongText'" v-bind="validateInfos[`notification.payload.${input.key}`]">
+            <a-textarea v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
+          </a-form-item>
+          <a-form-item v-else v-bind="validateInfos[`notification.payload.${input.key}`]">
+            <a-input v-model:value="hook.notification.payload[input.key]" :placeholder="input.label" size="large" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row class="mb-5" type="flex">
+        <a-col :span="24">
+          <a-card>
+            <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
+            <SmartsheetToolbarColumnFilter v-if="hook.condition" />
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <div class="text-gray-600">
+            <em>Use context variable <strong>data</strong> to refer the record under consideration</em>
+
+            <a-tooltip bottom>
+              <template #title>
+                <span> <strong>data</strong> : Row data <br /> </span>
+              </template>
+              <MdiInformationIcon class="ml-2" />
+            </a-tooltip>
+
+            <div class="mt-3">
+              <a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
+                <!-- Document Reference -->
+                {{ $t('labels.docReference') }}
+              </a>
+            </div>
+          </div>
+          <WebhookTest
+            ref="webhookTestRef"
+            :hook="{
+              ...hook,
+              filters,
+              notification: {
+                ...hook.notification,
+                payload: hook.notification.payload,
+              },
+            }"
+          />
+        </a-col>
+      </a-row>
+    </a-form-item>
+  </a-form>
+</template>
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
new file mode 100644
index 0000000000..dace3b59d0
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toastification'
+import { onMounted } from '@vue/runtime-core'
+import { MetaInj } from '~/context'
+import MdiHookIcon from '~icons/mdi/hook'
+import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
+
+const emit = defineEmits(['edit'])
+
+const { $api, $e } = useNuxtApp()
+
+const toast = useToast()
+
+const hooks = ref<Record<string, any>[]>([])
+
+const meta = inject(MetaInj)
+
+async function loadHooksList() {
+  try {
+    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[]
+    hooks.value = hookList.map((hook) => {
+      hook.notification = hook.notification && JSON.parse(hook.notification)
+      return hook
+    })
+  } catch (e: any) {
+    toast.error(e.message)
+  }
+}
+
+async function deleteHook(item: Record<string, any>, index: number) {
+  try {
+    if (item.id) {
+      await $api.dbTableWebhook.delete(item.id)
+      hooks.value.splice(index, 1)
+    } else {
+      hooks.value.splice(index, 1)
+    }
+    toast.success('Hook deleted successfully')
+    if (!hooks.value.length) {
+      hooks.value = []
+    }
+  } catch (e: any) {
+    toast.error(e.message)
+  }
+
+  $e('a:webhook:delete')
+}
+
+onMounted(() => {
+  loadHooksList()
+})
+</script>
+
+<template>
+  <div class="h-5/6">
+    <div class="mb-4">
+      <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
+      <a-button class="float-right" type="primary" size="large" @click="emit('add')">
+        {{ $t('activity.addWebhook') }}
+      </a-button>
+    </div>
+    <a-divider />
+    <div v-if="hooks.length">
+      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2">
+        <template #renderItem="{ item, index }">
+          <a-list-item class="pa-2" @click="emit('edit', item)">
+            <a-list-item-meta>
+              <template #description>
+                <span class="uppercase"> {{ item.event }} {{ item.operation }}</span>
+              </template>
+              <template #title>
+                <span class="text-xl normal-case">
+                  {{ item.title }}
+                </span>
+              </template>
+              <template #avatar>
+                <div class="mt-4">
+                  <MdiHookIcon class="text-xl" />
+                </div>
+              </template>
+            </a-list-item-meta>
+            <template #extra>
+              <div>
+                <!-- Notify Via -->
+                <div class="mr-2">{{ $t('labels.notifyVia') }} : {{ item?.notification?.type }}</div>
+                <div class="float-right pt-2 pr-1">
+                  <MdiDeleteOutlineIcon class="text-xl" @click.stop="deleteHook(item, index)" />
+                </div>
+              </div>
+            </template>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+    <div v-else class="pa-4 bg-gray-100 text-gray-600">
+      Webhooks list is empty, create new webhook by clicking 'Create webhook' button.
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
new file mode 100644
index 0000000000..e1ab3cc54a
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted } from '@vue/runtime-core'
+import { useToast } from 'vue-toastification'
+import { MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils'
+
+interface Props {
+  hook: Record<string, any>
+}
+
+const { hook } = defineProps<Props>()
+
+const { $state, $api, $e } = useNuxtApp()
+
+const toast = useToast()
+
+const meta = inject(MetaInj)
+
+const sampleData = ref({
+  data: {},
+})
+const activeKey = ref(0)
+
+watch(
+  () => hook?.operation,
+  async (v) => {
+    await loadSampleData()
+  },
+)
+
+async function loadSampleData() {
+  sampleData.value = {
+    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
+  }
+}
+
+async function testWebhook() {
+  try {
+    await $api.dbTableWebhook.test(meta?.value.id as string, {
+      hook,
+      payload: sampleData.value,
+    })
+
+    toast.success('Webhook tested successfully')
+  } catch (e: any) {
+    toast.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+defineExpose({
+  testWebhook,
+})
+
+onMounted(async () => {
+  await loadSampleData()
+})
+</script>
+
+<template>
+  <a-collapse v-model:activeKey="activeKey" ghost>
+    <a-collapse-panel key="1" header="Sample Payload">
+      <MonacoEditor v-model="sampleData" class="min-h-60 max-h-80" />
+    </a-collapse-panel>
+  </a-collapse>
+</template>
diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
new file mode 100644
index 0000000000..24c7b46943
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useTableCreate.ts
@@ -0,0 +1,66 @@
+import type { TableType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { useProject } from './useProject'
+import { useNuxtApp } from '#app'
+import { useToast } from 'vue-toastification'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+
+export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) {
+  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+    title: '',
+    table_name: '',
+    columns: {
+      id: true,
+      title: true,
+      created_at: true,
+      updated_at: true,
+    },
+  })
+
+  const { sqlUi, project, tables } = useProject()
+
+  const toast = useToast()
+
+  const { $api } = useNuxtApp()
+
+  const createTable = async () => {
+    try {
+      if (!sqlUi?.value) return
+      const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+        if (col.column_name === 'id' && table.columns.id_ag) {
+          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+          return true
+        }
+        return !!table.columns[col.column_name]
+      })
+
+      const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+        ...table,
+        columns,
+      })
+
+      onTableCreate?.(tableMeta)
+    } catch (e: any) {
+      toast.error(await extractSdkResponseErrorMsg(e))
+    }
+  }
+
+  watch(
+    () => table.title,
+    (title) => {
+      table.table_name = `${project?.value?.prefix || ''}${title}`
+    },
+  )
+
+  const generateUniqueTitle = () => {
+    let c = 1
+    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
+      c++
+    }
+    table.title = `Sheet${c}`
+  }
+
+  return { table, createTable, generateUniqueTitle, tables, project }
+}
diff --git a/packages/nc-gui-v2/composables/useVirtualCell.ts b/packages/nc-gui-v2/composables/useVirtualCell.ts
index 06bb61d318..1c8a06c44d 100644
--- a/packages/nc-gui-v2/composables/useVirtualCell.ts
+++ b/packages/nc-gui-v2/composables/useVirtualCell.ts
@@ -20,6 +20,7 @@ export function useVirtualCell(column: ColumnType) {
   const isLookup = computed(() => column.uidt === UITypes.Lookup)
   const isRollup = computed(() => column.uidt === UITypes.Rollup)
   const isFormula = computed(() => column.uidt === UITypes.Formula)
+  const isCount = computed(() => column.uidt === UITypes.Count)
 
   return {
     isHm,
@@ -28,5 +29,6 @@ export function useVirtualCell(column: ColumnType) {
     isLookup,
     isRollup,
     isFormula,
+    isCount,
   }
 }
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 023742631a..6ff2fa5455 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -152,4 +152,14 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-tabs-nav) {
   @apply !mb-0;
 }
+
+:deep(.ant-menu-item-selected) {
+  @apply text-inherit !bg-inherit;
+}
+
+:deep(.ant-menu-horizontal),
+:deep(.ant-menu-item::after),
+:deep(.ant-menu-submenu::after) {
+  @apply !border-none;
+}
 </style>
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index c15064db0b..63aeaad20e 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -51,6 +51,7 @@ export function isVirtualCol(
     UITypes.Formula,
     UITypes.Rollup,
     UITypes.Lookup,
+    UITypes.Count,
   ].includes(<UITypes>(typeof col === 'object' ? col?.uidt : col));
 }