diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 52d65949ed..793a7529e2 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AForm: typeof import('ant-design-vue/es')['Form']
@@ -32,6 +33,7 @@ declare module '@vue/runtime-core' {
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AList: typeof import('ant-design-vue/es')['List']
     AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 009f556a5c..58355b5c20 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -25,8 +25,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" />
-  <span v-else>{{ vModel }}</span>
+  <input
+    v-if="editEnabled"
+    ref="root"
+    v-model="vModel"
+    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    type="number"
+    step="0.1"
+  />
+  <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+input[type='number']:focus {
+  @apply ring-transparent;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 6798ff348c..54ea12127b 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -27,8 +27,19 @@ function onKeyDown(evt: KeyboardEvent) {
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none w-full h-full" type="number" @keydown="onKeyDown" />
-  <span v-else>{{ vModel }}</span>
+  <input
+    v-if="editEnabled"
+    ref="root"
+    v-model="vModel"
+    class="outline-none pa-0 border-none w-full h-full prose-sm"
+    type="number"
+    @keydown="onKeyDown"
+  />
+  <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+input[type='number']:focus {
+  @apply ring-transparent;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/PhoneNumber.vue b/packages/nc-gui-v2/components/cell/PhoneNumber.vue
new file mode 100644
index 0000000000..d40fb3ae12
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/PhoneNumber.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Text from './Text.vue'
+
+interface Props {
+  modelValue: any
+}
+
+interface Emits {
+  (event: 'update:modelValue', model: string): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+</script>
+
+<template>
+  <Text v-model="vModel" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 23b7d493fd..1e2fa406d0 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -22,13 +22,20 @@ const localState = $computed({
     if (!modelValue) {
       return undefined
     }
+    let dateTime = dayjs(modelValue)
 
-    if (!dayjs(modelValue).isValid()) {
+    if (!dateTime.isValid()) {
+      dateTime = dayjs(modelValue, 'HH:mm:ss')
+    }
+    if (!dateTime.isValid()) {
+      dateTime = dayjs(`1999-01-01 ${modelValue}`)
+    }
+    if (!dateTime.isValid()) {
       isTimeInvalid = true
       return undefined
     }
 
-    return dayjs(modelValue)
+    return dateTime
   },
   set(val?: dayjs.Dayjs) {
     if (!val) {
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index fa21fa4904..0c05c1a8a5 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { ColumnInj } from '~/context'
+import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
@@ -55,6 +56,8 @@ const icon = computed(() => {
     return DecimalIcon
   } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
     return NumericIcon
+  } else if (additionalColMeta.isPhoneNumber) {
+    return FilePhoneIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index a583bb5063..44ff43c52f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -47,6 +47,7 @@ const {
   isSingleSelect,
   isMultiSelect,
   isPercent,
+  isPhoneNumber,
 } = useColumn(column)
 </script>
 
@@ -184,6 +185,7 @@ todo :
     <CellDuration v-else-if="isDuration" v-model="localState" />
     <CellEmail v-else-if="isEmail" v-model="localState" />
     <CellUrl v-else-if="isURL" v-model="localState" />
+    <CellPhoneNumber v-else-if="isPhoneNumber" v-model="localState" />
     <!-- v-on="parentListeners"
         />
     -->
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 80560b2961..07d82ea9a5 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -30,6 +30,7 @@ export function useColumn(column: ColumnType) {
   const isAttachment = uiDatatype === 'Attachment'
   const isRating = uiDatatype === UITypes.Rating
   const isCurrency = uiDatatype === 'Currency'
+  const isPhoneNumber = uiDatatype === UITypes.PhoneNumber
   const isDecimal = uiDatatype === UITypes.Decimal
   const isDuration = uiDatatype === UITypes.Duration
   const isPercent = uiDatatype === UITypes.Percent
@@ -76,5 +77,6 @@ export function useColumn(column: ColumnType) {
     isSingleSelect,
     isMultiSelect,
     isPercent,
+    isPhoneNumber,
   }
 }