diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 7872a7cb16..6e42ada4bd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -13,7 +13,7 @@ const active = false
 const localState = null
 const listItemsDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp } = useProvideLTARStore(
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
 )
@@ -24,11 +24,11 @@ await loadRelatedTableMeta()
   <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
-        <ItemChip :active="active" :item="value" :value="value[relatedTablePrimaryValueProp]" />
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
       </template>
     </div>
     <div class="flex-1" />
-    <MdiExpandIcon class="hidden group-hover:inline text-xs text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="hidden group-hover:inline text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 19c291bea1..d90fe2d953 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -6,10 +6,16 @@ import { useHasMany } from '#imports'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
-const active = false
+const row = inject(RowInj)
 
-const { childMeta, loadChildMeta, primaryValueProp } = useHasMany(column as ColumnType)
-await loadChildMeta()
+const listItemsDlg = ref(false)
+const childListDlg = ref(false)
+
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+  column as Required<ColumnType>,
+  row,
+)
+await loadRelatedTableMeta()
 
 /* // import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
 import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
@@ -373,11 +379,11 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" :class="{ active }">
+  <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
     <!--    <template v-if="!isForm"> -->
-    <div class="chips d-flex align-center img-container flex-grow-1 hm-items flex-nowrap">
+    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value || localState">
-        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[primaryValueProp]" />
+        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
         <!--
                     :active="active"     :item="ch"
@@ -386,15 +392,15 @@ export default {
                     @edit="editChild"
                     @unlink="unlinkChild "        -->
 
-        <!--          <span
-                    v-if="!isLocked && value && value.length === 10"
-                    class="caption pointer ml-1 grey&#45;&#45;text"
-                    @click="showChildListModal"
-                    >more...
-                  </span> -->
+        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
 
+    <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+    <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <ListItems v-model="listItemsDlg" />
+    <ListChildItems v-model="childListDlg" />
+
     <!--      <div -->
     <!--        v-if="!isLocked" -->
     <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
@@ -513,7 +519,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.items-container {
+/*.items-container {
   overflow-x: visible;
   max-height: min(500px, 60vh);
   overflow-y: auto;
@@ -575,7 +581,7 @@ export default {
       max-width: calc(100% - 44px);
     }
   }
-}
+}*/
 </style>
 <!--
 /**
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 909fb880bd..920105a92f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,611 +1,56 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { useProvideLTARStore } from '~/composables'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj, ValueInj } from '~/context'
-import { useManyToMany } from '#imports'
+import ListChildItems from './components/ListChildItems.vue'
+import ListItems from './components/ListItems.vue'
+import { ColumnInj, RowInj, ValueInj } from '~/context'
 
 const column = inject(ColumnInj)
+const row = inject(RowInj)
 const value = inject(ValueInj)
-const active = false
-const isLocked = false
 
-const { childMeta, loadChildMeta, primaryValueProp } = useManyToMany(column as ColumnType)
-await loadChildMeta()
+const {
+  relatedTableMeta,
+  loadRelatedTableMeta,
+  relatedTablePrimaryValueProp,
+  unlink
+} = useProvideLTARStore(column as Required<ColumnType>, row)
 
-/* import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
-import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
-import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
-import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
-import listChildItemsModal from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal'
-import { parseIfInteger } from '@/helpers'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
+await loadRelatedTableMeta()
 
-export default {
-  name: 'ManyToManyCell',
-  components: { ListChildItems, ItemChip, ListItems, DlgLabelSubmitCancel, ListChildItemsModal: listChildItemsModal },
-  props: {
-    isLocked: Boolean,
-    breadcrumbs: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    value: [Object, Array],
-    meta: [Object],
-    mm: Object,
-    nodes: [Object],
-    row: [Object],
-    api: [Object, Function],
-    sqlUi: [Object, Function],
-    active: Boolean,
-    isNew: Boolean,
-    isForm: Boolean,
-    required: Boolean,
-    isPublic: Boolean,
-    metas: Object,
-    password: String,
-    column: Object,
-  },
-  data: () => ({
-    isNewChild: false,
-    newRecordModal: false,
-    childListModal: false,
-    // childMeta: null,
-    // assocMeta: null,
-    childList: null,
-    dialogShow: false,
-    confirmAction: null,
-    confirmMessage: '',
-    selectedChild: null,
-    expandFormModal: false,
-    localState: [],
-  }),
-  computed: {
-    getCellValue() {
-      return (cellObj) => {
-        if (cellObj) {
-          if (this.childPrimaryCol) {
-            return cellObj[this.childPrimaryCol]
-          }
-          return Object.values(cellObj)[1]
-        }
-      }
-    },
-    childMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_related_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_related_model_id]
-    },
-    assocMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_mm_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_mm_model_id]
-    },
-    // todo : optimize
-    childApi() {
-      // return this.childMeta && this.$ncApis.get({
-      //   env: this.nodes.env,
-      //   dbAlias: this.nodes.dbAlias,
-      //   id: this.column.colOptions.fk_related_model_id
-      // })
-      //
-      // return this.childMeta && this.childMeta.title
-      //   ? ApiFactory.create(
-      //     this.$store.getters['project/GtrProjectType'],
-      //     this.childMeta.title,
-      //     this.childMeta.columns,
-      //     this,
-      //     this.childMeta
-      //   )
-      //   : null
-    },
-    // todo : optimize
-    assocApi() {
-      // return this.childMeta && this.$ncApis.get({
-      //   env: this.nodes.env,
-      //   dbAlias: this.nodes.dbAlias,
-      //   id: this.column.colOptions.fk_mm_model_id
-      // })
-      // return this.assocMeta && this.assocMeta.title
-      //   ? ApiFactory.create(
-      //     this.$store.getters['project/GtrProjectType'],
-      //     this.assocMeta.title,
-      //     this.assocMeta.columns,
-      //     this,
-      //     this.assocMeta
-      //   )
-      //   : null
-    },
-    childPrimaryCol() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pv) || {}).title
-    },
-    childPrimaryKey() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pk) || {}).title
-    },
-    parentPrimaryKey() {
-      return this.meta && (this.meta.columns.find((c) => c.pk) || {}).title
-    },
-    childQueryParams() {
-      if (!this.childMeta) {
-        return {}
-      }
-      // todo: use reduce
-      return {
-        hm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.hm)
-              .map(({ hm }) => hm.table_name)
-              .join()) ||
-          '',
-        bt:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.bt)
-              .map(({ bt }) => bt.rtn)
-              .join()) ||
-          '',
-        mm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.mm)
-              .map(({ mm }) => mm.rtn)
-              .join()) ||
-          '',
-      }
-    },
-    conditionGraph() {
-      // if (!this.childMeta || !this.assocMeta) { return null }
-      // return {
-      //   [this.assocMeta.table_name]: {
-      //     relationType: 'hm',
-      //     [this.assocMeta.columns.find(c => c.column_name === this.mm.vcn).column_name]: {
-      //       eq: this.row[this.parentPrimaryKey]
-      //     }
-      //   }
-      // }
-    },
-    childAvailableColumns() {
-      if (!this.childMeta) {
-        return []
-      }
-
-      const columns = []
-      if (this.childMeta.columns) {
-        columns.push(...this.childMeta.columns.filter((c) => !isSystemColumn(c)))
-      }
-      return columns
-    },
-    // todo:
-    form() {
-      return this.selectedChild && !this.isPublic
-        ? () => import('~/components/project/spreadsheet/components/ExpandedForm')
-        : 'span'
-    },
-  },
-  watch: {
-    async isNew(n, o) {
-      if (!n && o) {
-        await this.saveLocalState()
-      }
-    },
-  },
-  async mounted() {
-    if (this.isForm) {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-    }
-
-    if (this.isNew && this.value) {
-      this.localState = [...this.value]
-    }
-  },
-  created() {
-    this.loadChildMeta()
-    this.loadAssociateTableMeta()
-  },
-  methods: {
-    async onChildSave(child) {
-      if (this.isNewChild) {
-        this.isNewChild = false
-        await this.addChildToParent(child)
-      } else {
-        this.$emit('loadTableData')
-      }
-    },
-    async showChildListModal() {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      this.childListModal = true
-    },
-    async unlinkChild(child) {
-      if (this.isNew) {
-        this.localState.splice(this.localState.indexOf(child), 1)
-        this.$emit('update:localState', [...this.localState])
-        return
-      }
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      const cid = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      const pid = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-
-      await this.$api.dbTableRow.nestedRemove(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-
-      this.$emit('loadTableData')
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-    async removeChild(child) {
-      this.dialogShow = true
-      this.confirmMessage = 'Do you want to delete the record?'
-      this.confirmAction = async (act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
-        } else {
-          const id = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          await this.childApi.delete(id)
-          this.dialogShow = false
-          this.$emit('loadTableData')
-          if ((this.childListModal || this.isForm) && this.$refs.childList) {
-            this.$refs.childList.loadData()
-          }
-        }
-      }
-    },
-    async loadChildMeta() {
-      // todo: optimize
-      if (!this.childMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          // tn: this.mm.rtn,
-          id: this.column.colOptions.fk_related_model_id,
-        })
-        // const parentTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        //   env: this.nodes.env,
-        //   dbAlias: this.nodes.dbAlias
-        // }, 'tableXcModelGet', {
-        //   tn: this.mm.rtn
-        // }]);
-        // this.childMeta = JSON.parse(parentTableData.meta)
-      }
-    },
-    async loadAssociateTableMeta() {
-      // todo: optimize
-      if (!this.assocMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          id: this.column.colOptions.fk_mm_model_id,
-        })
-        // const assocTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        //   env: this.nodes.env,
-        //   dbAlias: this.nodes.dbAlias
-        // }, 'tableXcModelGet', {
-        //   tn: this.mm.vtn
-        // }]);
-        // this.assocMeta = JSON.parse(assocTableData.meta)
-      }
-    },
-    async showNewRecordModal() {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      this.newRecordModal = true
-      // this.list = await this.c hildApi.paginatedList({})
-    },
-    async addChildToParent(child) {
-      if (this.isNew && this.localState.every((it) => it[this.childForeignKey] !== child[this.childPrimaryKey])) {
-        this.localState.push(child)
-        this.$emit('update:localState', [...this.localState])
-        this.$emit('saveRow')
-        this.newRecordModal = false
-        return
-      }
-      const cid = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      const pid = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-
-      // const vcidCol = this.assocMeta.columns.find(c => c.id === this.column.colOptions.fk_mm_parent_column_id).title
-      // const vpidCol = this.assocMeta.columns.find(c => c.id === this.column.colOptions.fk_mm_child_column_id).title
-
-      await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-
-      try {
-        this.$emit('loadTableData')
-      } catch (e) {
-        // todo: handle
-        console.log(e)
-      }
-      this.newRecordModal = false
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-
-    async insertAndAddNewChildRecord() {
-      this.newRecordModal = false
-      await this.loadChildMeta()
-      this.isNewChild = true
-      this.selectedChild = {
-        [this.childForeignKey]: this.parentId,
-        [(
-          this.childMeta.columns.find(
-            (c) =>
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              c.colOptions &&
-              this.column.colOptions &&
-              c.colOptions.fk_child_column_id === this.column.colOptions.fk_parent_column_id &&
-              c.colOptions.fk_parent_column_id === this.column.colOptions.fk_child_column_id &&
-              c.colOptions.fk_mm_model_id === this.column.colOptions.fk_mm_model_id &&
-              c.colOptions.type === RelationTypes.MANY_TO_MANY,
-          ) || {}
-        ).title]: [this.row],
-      }
-      this.expandFormModal = true
-      setTimeout(() => {
-        this.$refs.expandedForm &&
-          this.$refs.expandedForm.$set(this.$refs.expandedForm.changedColumns, this.childForeignKey, true)
-      }, 500)
-    },
-    async editChild(child) {
-      await this.loadChildMeta()
-      this.isNewChild = false
-      this.selectedChild = child
-      this.expandFormModal = true
-      setTimeout(() => {
-        this.$refs.expandedForm && this.$refs.expandedForm.reload()
-      }, 500)
-    },
-    async saveLocalState(row) {
-      let child
-      // eslint-disable-next-line no-cond-assign
-      while ((child = this.localState.pop())) {
-        if (row) {
-          const cid = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          const pid = this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => row[c.title])
-            .join('___')
-
-          await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-        } else {
-          await this.addChildToParent(child)
-        }
-      }
-      this.$emit('newRecordsSaved')
-    },
-  },
-} */
 </script>
 
 <template>
   <div class="d-flex d-100 chips-wrapper" :class="{ active }">
-    <!--    <template v-if="!isForm"> -->
-    <div class="chips d-flex align-center img-container flex-grow-1 hm-items flex-nowrap">
-      <template v-if="value || localState">
-        <ItemChip v-for="(v, j) in value || localState" :key="j" :item="v" :value="v[primaryValueProp]" />
-
-        <!--                           :active="active"
-       :readonly="isLocked || isPublic"
-            @edit="editChild"
-            @unlink="unlinkChild" -->
-      </template>
-      <span v-if="!isLocked && value && value.length === 10" class="caption pointer ml-1 grey--text" @click="showChildListModal"
-        >more...</span
-      >
-    </div>
-    <!--      <div -->
-    <!--        v-if="!isLocked" -->
-    <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
-    <!--        :class="{ 'd-none': !active, 'd-flex': active }" -->
-    <!--      > -->
-    <!--        <x-icon -->
-    <!--          v-if="_isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)" -->
-    <!--          small -->
-    <!--          :color="['primary', 'grey']" -->
-    <!--          @click="showNewRecordModal" -->
-    <!--        > -->
-    <!--          mdi-plus -->
-    <!--        </x-icon> -->
-    <!--        <x-icon x-small :color="['primary', 'grey']" class="ml-2" @click="showChildListModal"> mdi-arrow-expand </x-icon> -->
-    <!--      </div> -->
-    <!--    </template> -->
-
-    <!--    <ListItems
-      v-if="newRecordModal"
-      v-model="newRecordModal"
-      :hm="true"
-      :size="10"
-      :column="column"
-      :meta="childMeta"
-      :primary-col="childPrimaryCol"
-      :primary-key="childPrimaryKey"
-      :parent-meta="meta"
-      :api="api"
-      :mm="mm"
-      :tn="mm && mm.rtn"
-      :parent-id="row && row[parentPrimaryKey]"
-      :is-public="isPublic"
-      :query-params="childQueryParams"
-      :password="password"
-      :row-id="row && row[parentPrimaryKey]"
-      @add-new-record="insertAndAddNewChildRecord"
-      @add="addChildToParent"
-    />
+    <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+      <!--    <template v-if="!isForm"> -->
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="value || localState">
+          <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]"
+                    @unlink="unlink(ch)" />
+
+          <!--
+                      :active="active"     :item="ch"
+                      :value="getCellValue(ch)"
+                      :readonly="isLocked || isPublic"
+                      @edit="editChild"
+                      @unlink="unlinkChild "        -->
+
+          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text"
+                @click="childListDlg = true">more... </span>
+        </template>
+      </div>
+
+      <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+                     @click="childListDlg = true" />
+      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+                   @click="listItemsDlg = true" />
+      <ListItems v-model="listItemsDlg" />
+      <ListChildItems v-model="childListDlg" />
 
-    <ListChildItems
-      :is="isForm ? 'list-child-items' : 'list-child-items-modal'"
-      v-if="childMeta && assocMeta && (isForm || childListModal)"
-      ref="childList"
-      v-model="childListModal"
-      :is-form="isForm"
-      :is-new="isNew"
-      :size="10"
-      :meta="childMeta"
-      :parent-meta="meta"
-      :primary-col="childPrimaryCol"
-      :primary-key="childPrimaryKey"
-      :api="childApi"
-      :mm="mm"
-      :parent-id="row && row[parentPrimaryKey]"
-      :query-params="{ ...childQueryParams, conditionGraph }"
-      :local-state="localState"
-      :is-public="isPublic"
-      :row-id="row && row[parentPrimaryKey]"
-      :column="column"
-      type="mm"
-      :password="password"
-      @new-record="showNewRecordModal"
-      @edit="editChild"
-      @unlink="unlinkChild"
-    />
-    <DlgLabelSubmitCancel
-      v-if="dialogShow"
-      type="primary"
-      :actions-mtd="confirmAction"
-      :dialog-show="dialogShow"
-      :heading="confirmMessage"
-    />
 
-    &lt;!&ndash; todo : move to list item component &ndash;&gt;
-    <v-dialog
-      v-if="selectedChild && !isPublic"
-      v-model="expandFormModal"
-      :overlay-opacity="0.8"
-      width="1000px"
-      max-width="100%"
-      class="mx-auto"
-    >
-      <component
-        :is="form"
-        v-if="selectedChild"
-        ref="expandedForm"
-        v-model="selectedChild"
-        :db-alias="nodes.dbAlias"
-        :has-many="childMeta.hasMany"
-        :belongs-to="childMeta.belongsTo"
-        v-model:is-new="isNewChild"
-        :table="childMeta.table_name"
-        :old-row="{ ...selectedChild }"
-        :meta="childMeta"
-        :primary-value-column="childPrimaryCol"
-        :available-columns="childAvailableColumns"
-        icon-color="warning"
-        :nodes="nodes"
-        :query-params="childQueryParams"
-        :breadcrumbs="breadcrumbs"
-        @cancel="
-          selectedChild = null
-          expandFormModal = false
-        "
-        @input="onChildSave"
-      />
-    </v-dialog> -->
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
-}
-
-.primary-value {
-  .primary-key {
-    display: none;
-    margin-left: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.child-list-modal {
-  position: relative;
-
-  .remove-child-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    bottom: 10px;
-    opacity: 0;
-  }
-
-  &:hover .remove-child-icon {
-    opacity: 1;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 0.2em var(--v-textColor-lighten5);
-  }
-}
-
-.hm-items {
-  //min-width: 200px;
-  //max-width: 400px;
-  flex-wrap: wrap;
-  row-gap: 3px;
-  gap: 3px;
-  margin: 3px auto;
-}
-
-.chips-wrapper {
-  .chips {
-    max-width: 100%;
-  }
-
-  &.active {
-    .chips {
-      max-width: calc(100% - 44px);
-    }
-  }
-}
-</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/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 6d732515f9..bea4454b29 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useLTARStoreOrThrow } from '~/composables'
 import { ActiveCellInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
@@ -8,6 +9,7 @@ interface Props {
 }
 
 const { value, item } = defineProps<Props>()
+const emit = defineEmits(['unlink'])
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, false)
 </script>
@@ -16,7 +18,7 @@ const active = inject(ActiveCellInj, false)
   <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
     <span class="name">{{ value }}</span>
     <div v-show="active" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
+      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 8bd1c4175b..5f93ca99c2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,254 +1,39 @@
-<script>
-import { RelationTypes } from 'nocodb-sdk'
-import { NOCO } from '~/lib/constants'
-import Pagination from '~/components/project/spreadsheet/components/Pagination'
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { useLTARStoreOrThrow } from '~/composables'
 
-export default {
-  name: 'ListChildItems',
-  components: { Pagination },
-  props: {
-    readOnly: Boolean,
-    isForm: Boolean,
-    bt: [Object],
-    localState: [Array],
-    isNew: Boolean,
-    value: Boolean,
-    title: {
-      type: String,
-      default: 'Link Record',
-    },
-    queryParams: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    primaryKey: String,
-    primaryCol: String,
-    meta: Object,
-    parentMeta: Object,
-    size: Number,
-    api: [Object, Function],
-    mm: [Object, Boolean],
-    isPublic: Boolean,
-    rowId: [String, Number],
-    column: Object,
-    type: String,
-    password: String,
-  },
-  emits: ['input', 'edit', 'delete', 'unlink', 'newRecord'],
-  data: () => ({
-    RelationTypes,
-    data: null,
-    page: 1,
-  }),
-  computed: {
-    isDataAvail() {
-      return (this.data && this.data.list && this.data.list.length) || (this.localState && this.localState.length)
-    },
-    show: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-  },
-  watch: {
-    queryParams() {
-      this.loadData()
-    },
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    async loadData() {
-      if (!this.isForm && this.isPublic && this.$route.params.id) {
-        if (this.column && this.column.colOptions && this.rowId) {
-          this.data = await this.$api.public.dataNestedList(
-            this.$route.params.id,
-            this.rowId,
-            this.column.colOptions.type,
-            this.column.fk_column_id || this.column.id,
-            {
-              limit: this.size,
-              offset: this.size * (this.page - 1),
-            },
-            {},
-          )
-        }
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits(['update:modelValue'])
 
-        return
-      }
+const vModel = useVModel(props, 'modelValue', emit)
 
-      if (this.isNew) {
-        return
-      }
-      if (this.column && this.column.colOptions) {
-        this.data = await this.$api.dbTableRow.nestedList(
-          NOCO,
-          this.projectName,
-          this.parentMeta.title,
-          this.rowId,
-          this.column.colOptions.type,
-          this.column.title,
-          {
-            limit: this.size,
-            offset: this.size * (this.page - 1),
-          },
-        )
-      } else {
-        this.data = await this.$api.dbTableRow.list(NOCO, this.projectName, this.meta.title, {
-          limit: this.size,
-          offset: this.size * (this.page - 1),
-          ...this.queryParams,
-        })
-      }
-    },
-  },
-}
+const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
+
+await loadChildrenList()
 </script>
 
 <template>
-  <v-card width="600" color="">
-    <v-card-title v-if="!isForm" class="textColor--text mx-2" :class="{ 'py-2': isForm }">
-      <span v-if="!isForm">{{ meta ? meta.title : 'Children' }}</span>
-      <v-spacer />
-      <v-icon small class="mr-1" @click="loadData()"> mdi-reload </v-icon>
-      <v-btn
-        v-if="(isForm || !isPublic) && !readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))"
-        small
-        class="caption"
-        color="primary"
-        @click="$emit('newRecord')"
-      >
-        <v-icon small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
-      </v-btn>
-    </v-card-title>
-    <v-card-text>
-      <div class="items-container pt-2 mb-n4" :class="{ 'mx-n2': isForm }">
-        <div v-if="!readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))" class="text-right mb-2 mt-n2 mx-2">
-          <v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('newRecord')">
-            <v-icon x-small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
-          </v-btn>
-        </div>
-        <template v-if="isDataAvail">
-          <v-card
-            v-for="(ch, i) in (data && data.list) || localState"
-            :key="i"
-            class="mx-2 mb-2 child-list-modal child-card"
-            outlined
-            @click="!readOnly && $emit('edit', ch)"
-          >
-            <div class="remove-child-icon d-flex align-center">
-              <x-icon
-                v-if="((isPublic && isForm) || (!isPublic && _isUIAllowed('xcDatatableEditable'))) && !readOnly"
-                :tooltip="`Unlink this '${meta.title}' from '${parentMeta.title}'`"
-                :color="['error', 'grey']"
-                small
-                class="mr-1 mt-n1"
-                @click.stop="$emit('unlink', ch, i)"
-              >
-                mdi-link-variant-remove
-              </x-icon>
-              <x-icon
-                v-if="!isPublic && type === RelationTypes.HAS_MANY && !readOnly && _isUIAllowed('xcDatatableEditable')"
-                :tooltip="`Delete row in '${meta.title}'`"
-                :color="['error', 'grey']"
-                small
-                @click.stop="$emit('delete', ch, i)"
-              >
-                mdi-delete-outline
-              </x-icon>
-            </div>
-
-            <v-card-title class="primary-value textColor--text text--lighten-2">
-              {{ ch[primaryCol] }}
-              <span v-if="primaryKey" class="grey--text caption primary-key ml-1"> (Primary Key : {{ ch[primaryKey] }})</span>
-            </v-card-title>
-          </v-card>
-        </template>
-
-        <div
-          v-else-if="data || localState"
-          class="text-center textLight--text"
-          :class="{ 'pt-6 pb-4': !isForm, 'pt-4 pb-3': isForm }"
-        >
-          No item{{ bt ? '' : 's' }} found
-        </div>
-
-        <div v-if="isForm" class="mb-2 d-flex align-center justify-center">
-          <Pagination
-            v-if="!bt && data && data.pageInfo && data.pageInfo.totalRows > 1"
-            v-model="page"
-            :size="size"
-            :count="data && data.pageInfo && data.pageInfo.totalRows"
-            @input="loadData"
-          />
-        </div>
+  <a-modal v-model:visible="vModel" :footer="null" title="Child list">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
+      <div class="flex-1 overflow-auto min-h-0">
+        <a-card v-for="row in childrenList.list" class="my-1 cursor-pointer" @click="link(row)">
+          {{ row[relatedTablePrimaryValueProp] }}
+        </a-card>
       </div>
-    </v-card-text>
-    <v-card-actions v-if="!isForm" class="justify-center flex-column" :class="{ 'py-0': isForm }">
-      <Pagination
-        v-if="!bt && data && data.pageInfo && data.pageInfo.totalRows > 1"
-        v-model="page"
-        :size="size"
-        :count="data && data.pageInfo && data.pageInfo.totalRows"
-        class="mb-3"
-        @input="loadData"
+      <a-pagination
+        v-model:current="childrenListPagination.page"
+        v-model:page-size="childrenListPagination.size"
+        class="mt-2 mx-auto"
+        size="small"
+        :total="childrenList.pageInfo.totalRows"
+        show-less-items
       />
-    </v-card-actions>
-  </v-card>
-  <!--  </v-dialog> -->
+    </div>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
-.child-list-modal {
-  position: relative;
-
-  .remove-child-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    bottom: 10px;
-    opacity: 0;
-  }
-
-  &:hover .remove-child-icon {
-    opacity: 1;
-  }
-}
-
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
+:deep(.ant-pagination-item a) {
+  line-height: 21px !important;
 }
 </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/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 5cc11ac1fe..3e23ab8a27 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
+import MdiReloadIcon from '~icons/mdi/reload'
 
 const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits(['update:modelValue'])
@@ -12,7 +13,7 @@ const {
   loadChildrenExcludedList,
   childrenExcludedListPagination,
   relatedTablePrimaryValueProp,
-  link
+  link,
 } =
   useLTARStoreOrThrow()
 
@@ -124,17 +125,26 @@ export default {
 <template>
   <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
+      <div class="flex mb-4 align-center gap-2">
+        <a-input
+          v-model:value="childrenExcludedListPagination.query" class="max-w-[200px]" size="small"></a-input>
+        <div class="flex-1" />
+        <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
+        <a-button type="primary" size="small" @click="$emit('addNewRecord')">Add new record</a-button>
+      </div>
       <div class="flex-1 overflow-auto min-h-0">
         <a-card v-for="row in childrenExcludedList.list" class="my-1 cursor-pointer" @click="link(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
-      <a-pagination class="mt-2 mx-auto"
-                    size="small"
-                    v-model:current="childrenExcludedListPagination.page"
-                    v-model:page-size="childrenExcludedListPagination.size"
-                    :total="childrenExcludedList.pageInfo.totalRows"
-                    show-less-items />
+      <a-pagination
+        v-model:current="childrenExcludedListPagination.page"
+        v-model:page-size="childrenExcludedListPagination.size"
+        class="mt-2 mx-auto !text-xs"
+        size="small"
+        :total="childrenExcludedList.pageInfo.totalRows"
+        show-less-items
+      />
     </div>
   </a-modal>
 
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 0d5d44b4d6..75aef8ee92 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -52,7 +52,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
   }
 
   const loadRelatedTableMeta = async () => {
-    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
+    debugger
+    await getMeta(colOptions?.fk_related_model_id as string)
   }
 
   const relatedTablePrimaryValueProp = computed(() => {
@@ -165,7 +166,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
     // }
   }
 
-
   // watchers
   watch(childrenExcludedListPagination, async () => {
     await loadChildrenExcludedList()