diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 61f27443a7..8cead9365a 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/context'
-import { getMdiIcon } from '@/utils'
+import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
 
 interface Props {
   modelValue?: boolean | undefined | number
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 30571168fa..fa6c0a6b22 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ColumnInj, ReadonlyInj, computed, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 9094d2d691..412626ddff 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj } from '~/context'
+import { ColumnInj, ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 1441221048..8b76ef12c2 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -64,11 +64,12 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     format="YYYY-MM-DD HH:mm"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date and time' : ''"
+    :placeholder="isDateInvalid ? 'Invalid date' : !editEnabled ? 'Select date and time' : ''"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
     :open="editEnabled ? false : open"
+    :disabled="!editEnabled"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 400b27afc8..c29f365437 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import {EditModeInj, ReadonlyInj} from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | string
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 49a23d5d1b..5182e3514f 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, ref } from '#imports'
-import {ColumnInj, ReadonlyInj} from '~/context'
-import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
+import {
+  ColumnInj,
+  ReadonlyInj,
+  computed,
+  convertDurationToSeconds,
+  convertMS2Duration,
+  durationOptions,
+  inject,
+  ref,
+} from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -65,7 +72,7 @@ const submitDuration = () => {
 <template>
   <div class="duration-cell-wrapper">
     <input
-        v-if="editEnabled"
+      v-if="editEnabled"
       ref="durationInput"
       v-model="localState"
       :placeholder="durationPlaceholder"
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 0a8e633437..e59cb95992 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref, useVModel } from '#imports'
-import { isEmail } from '~/utils'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject, isEmail, useVModel } from '#imports'
 
 interface Props {
   modelValue: string | null
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 4b7c53ea7d..09f23fa791 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index f6c6204fbf..2fe13c4d0c 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null
diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 4ca039c789..14297ffa9f 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
-import { computed, inject, ref, useVModel, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject, ref, useVModel, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any> | undefined
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 53bd6d8aff..28d81ec758 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -20,7 +19,7 @@ const column = inject(ColumnInj)
 // const isForm = inject<boolean>('isForm', false)
 
 // FIXME: use editEnabled to control the UI permission
-const editEnabled = inject(ReadonlyInj)
+// const editEnabled = inject(ReadonlyInj)
 
 const active = inject(ActiveCellInj, ref(false))
 
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index 5c520e5002..0aa05f2f40 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
-import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
+import { ColumnInj, ReadonlyInj, computed, getPercentStep, inject, isValidPercent, renderPercent } from '#imports'
 
 interface Props {
   modelValue: number | string | null
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 96a083c811..7a5c0fdaf4 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue?: number | null
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index dfab38e6d0..1ca67fb876 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | undefined
@@ -17,7 +16,7 @@ const column = inject(ColumnInj)
 // const isForm = inject<boolean>('isForm', false)
 
 // FIXME: use editEnabled to control the UI permission
-const editEnabled = inject(ReadonlyInj)
+// const editEnabled = inject(ReadonlyInj)
 
 const active = inject(ActiveCellInj, ref(false))
 
diff --git a/packages/nc-gui-v2/components/cell/Text.vue b/packages/nc-gui-v2/components/cell/Text.vue
index b4e935dcd0..76a8689d5a 100644
--- a/packages/nc-gui-v2/components/cell/Text.vue
+++ b/packages/nc-gui-v2/components/cell/Text.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { inject, ref, useVModel } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, inject } from '#imports'
 
 interface Props {
   modelValue: string | null
diff --git a/packages/nc-gui-v2/components/cell/TextArea.vue b/packages/nc-gui-v2/components/cell/TextArea.vue
index 931070a0ef..47fdbed547 100644
--- a/packages/nc-gui-v2/components/cell/TextArea.vue
+++ b/packages/nc-gui-v2/components/cell/TextArea.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
-import { EditModeInj } from '~/context'
+import { ReadonlyInj, computed, inject } from '#imports'
 
 interface Props {
   modelValue: string | null
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 2c1bfa2160..81f5318733 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 let isTimeInvalid = $ref(false)
 
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 9ddf20fbed..9ae7a1251a 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { computed, inject, ref } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
-import { isValidURL } from '~/utils'
+import { ColumnInj, ReadonlyInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
   modelValue: string | null
@@ -14,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 const vModel = computed({
   get: () => value,
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 4585be2b92..13d1d81fd7 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { ReadonlyInj } from '~/context'
+import { ReadonlyInj } from '#imports'
 
 interface Props {
   modelValue: number | string | null
@@ -11,7 +11,7 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(ReadonlyInj)
 
 let isYearInvalid = $ref(false)