diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 067719679b..99b08acbcd 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -3,7 +3,7 @@ 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 { MetaInj, provide, toRef, useNuxtApp } from '#imports'
+import { MetaInj, computed, provide, toRef, useNuxtApp } from '#imports'
 
 interface NodeData {
   table: TableType
@@ -29,6 +29,8 @@ const { $e } = useNuxtApp()
 
 const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
   colOptions.type === 'mm' ? colOptions.fk_parent_column_id : colOptions.fk_child_column_id
+
+const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumns.length)
 </script>
 
 <template>
@@ -44,7 +46,7 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
       <template #title> {{ table.table_name }} </template>
 
       <div
-        :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10 border-b-1']"
+        :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10', hasColumns ? '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="table.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
@@ -61,7 +63,7 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
       <Handle style="right: -15px" class="opacity-0" :position="Position.Right" type="source" :connectable="false" />
     </div>
 
-    <div v-else-if="data.nonPkColumns.length || data.pkAndFkColumns.length">
+    <div v-else-if="hasColumns">
       <div
         v-for="col in data.pkAndFkColumns"
         :key="col.title"