diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 886252e9df..067719679b 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -3,41 +3,30 @@ import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
-import type { Ref } from 'vue'
-import { MetaInj, computed, provide, toRefs, useNuxtApp } from '#imports'
+import { MetaInj, provide, toRef, useNuxtApp } from '#imports'
+
+interface NodeData {
+  table: TableType
+  pkAndFkColumns: ColumnType[]
+  nonPkColumns: ColumnType[]
+  showPkAndFk: boolean
+  showAllColumns: boolean
+  color: string
+}
 
-interface Props extends NodeProps {
-  data: TableType & { showPkAndFk: boolean; showAllColumns: boolean; color: string }
+interface Props extends NodeProps<NodeData> {
+  data: NodeData
   showSkeleton: boolean
 }
 
-const props = defineProps<Props>()
+const { data, showSkeleton } = defineProps<Props>()
 
-const { data } = toRefs(props)
+const table = toRef(data, 'table')
 
-provide(MetaInj, data as Ref<TableType>)
+provide(MetaInj, table)
 
 const { $e } = useNuxtApp()
 
-const columns = computed(() => {
-  // Hide hm ltar created for `mm` relations
-  return data.value.columns?.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
-})
-
-const pkAndFkColumns = computed(() => {
-  return columns.value
-    ?.filter(() => data.value.showPkAndFk && data.value.showAllColumns)
-    .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
-})
-
-const nonPkColumns = computed(() => {
-  return columns.value
-    ?.filter(
-      (col: ColumnType) => data.value.showAllColumns || (!data.value.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
-    )
-    .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
-})
-
 const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
   colOptions.type === 'mm' ? colOptions.fk_parent_column_id : colOptions.fk_child_column_id
 </script>
@@ -46,23 +35,23 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
   <div
     class="relative h-full flex flex-col justify-center items-center bg-slate-50 min-w-16 rounded-lg nc-erd-table-node"
     :class="[
-      `nc-erd-table-node-${data.table_name}`,
+      `nc-erd-table-node-${table.table_name}`,
       showSkeleton ? 'cursor-pointer bg-slate-200 min-h-200px min-w-300px px-4' : '',
     ]"
     @click="$e('c:erd:node-click')"
   >
     <GeneralTooltip class="h-full flex flex-1 justify-center items-center" modifier-key="Alt">
-      <template #title> {{ data.table_name }} </template>
+      <template #title> {{ table.table_name }} </template>
 
       <div
         :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10 border-b-1']"
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
       >
-        <MdiTableLarge v-if="data.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
+        <MdiTableLarge v-if="table.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
         <MdiEyeCircleOutline v-else class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
 
         <div :class="showSkeleton ? 'text-6xl' : ''" class="flex px-2">
-          {{ data.title }}
+          {{ table.title }}
         </div>
       </div>
     </GeneralTooltip>
@@ -72,30 +61,30 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
       <Handle style="right: -15px" class="opacity-0" :position="Position.Right" type="source" :connectable="false" />
     </div>
 
-    <div v-else-if="nonPkColumns.length || pkAndFkColumns.length">
+    <div v-else-if="data.nonPkColumns.length || data.pkAndFkColumns.length">
       <div
-        v-for="col in pkAndFkColumns"
+        v-for="col in data.pkAndFkColumns"
         :key="col.title"
         class="w-full border-b-1 py-2 border-slate-200 bg-slate-100"
-        :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+        :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
       >
         <LazySmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
       </div>
 
-      <div v-if="nonPkColumns.length" class="w-full mb-1"></div>
+      <div v-if="data.nonPkColumns.length" class="w-full mb-1"></div>
 
-      <div v-for="(col, index) in nonPkColumns" :key="col.title">
+      <div v-for="(col, index) in data.nonPkColumns" :key="col.title">
         <div
           class="relative w-full h-full flex items-center min-w-32 border-slate-200 py-2 px-1"
-          :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
+          :class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
         >
           <div
             v-if="col.uidt === UITypes.LinkToAnotherRecord"
             class="flex w-full"
-            :class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+            :class="`nc-erd-table-node-${table.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
           >
             <Handle
-              :id="`s-${relatedColumnId(col.colOptions)}-${data.id}`"
+              :id="`s-${relatedColumnId(col.colOptions)}-${table.id}`"
               class="opacity-0 !right-[-1px]"
               type="source"
               :position="Position.Right"
@@ -103,7 +92,7 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
             />
 
             <Handle
-              :id="`d-${relatedColumnId(col.colOptions)}-${data.id}`"
+              :id="`d-${relatedColumnId(col.colOptions)}-${table.id}`"
               class="opacity-0 !left-[-1px]"
               type="target"
               :position="Position.Left"
@@ -117,14 +106,14 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
             v-else-if="isVirtualCol(col)"
             :column="col"
             :hide-menu="true"
-            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+            :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
           />
 
           <LazySmartsheetHeaderCell
             v-else
             :column="col"
             :hide-menu="true"
-            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+            :class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
           />
         </div>
       </div>
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index 9214cb5667..781b1bd1c4 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/packages/nc-gui/components/erd/utils.ts
@@ -27,7 +27,7 @@ interface Relation {
 }
 
 const nodeWidth = 300
-const nodeHeight = 50
+const nodeHeight = 35
 
 export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ErdFlowConfig>) {
   const elements = ref<Elements>([])
@@ -145,17 +145,27 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
 
       const columns =
         metasWithIdAsKey.value[table.id].columns?.filter(
-          (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+          (col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1),
         ) || []
 
+      const pkAndFkColumns = columns
+        .filter(() => config.showPkAndFk && config.showAllColumns)
+        .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
+
+      const nonPkColumns = columns
+        .filter((col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord))
+        .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
+
       return [
         {
           id: table.id,
           data: {
-            ...metasWithIdAsKey.value[table.id],
+            table: metasWithIdAsKey.value[table.id],
+            pkAndFkColumns,
+            nonPkColumns,
             showPkAndFk: config.showPkAndFk,
             showAllColumns: config.showAllColumns,
-            columnLength: columns.length,
+            columnLength: pkAndFkColumns.length + nonPkColumns.length,
           },
           type: 'custom',
           position: { x: 0, y: 0 },
@@ -254,11 +264,9 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
 
     elements.value.forEach((el) => {
       if (isNode(el)) {
-        console.log(el.data.columnLength)
-
         dagreGraph.setNode(el.id, {
           width: skeleton ? nodeWidth * 2.5 : nodeWidth,
-          height: nodeHeight + (skeleton ? 250 : nodeHeight * el.data.columnLength),
+          height: 50 + (skeleton ? 250 : nodeHeight * el.data.columnLength),
         })
       } else if (isEdge(el)) {
         // avoid duplicate edges when using skeleton