diff --git a/package-lock.json b/package-lock.json
index b3b286ef6..4b75ed1bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@appwrite.io/console": "0.1.0-preview-0.1",
-                "@appwrite.io/pink": "^0.0.6-rc.5",
+                "@appwrite.io/pink": "^0.0.6-rc.6",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
                 "@sentry/tracing": "^7.44.2",
@@ -155,9 +155,9 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.6-rc.5",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.5.tgz",
-            "integrity": "sha512-3taoSvB1LtrFcESp/SwdlEGGZwIQcztdBBhbgc1LiK94YuGGLp8Ec2cSGG0w+LXHuZux1gOxXDA5uEkbMvrVJA==",
+            "version": "0.0.6-rc.6",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.6.tgz",
+            "integrity": "sha512-mSOUI2UxRqO3MS4ZXz9bdyAt0VFGRhOwWYGXw+oFfYPjmu6GSKnLEQwjF37DeuArEGRNriTiOFrKqXO0HW0odA==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 0f5caea48..a021b5e8f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/console": "0.1.0-preview-0.1",
-        "@appwrite.io/pink": "^0.0.6-rc.5",
+        "@appwrite.io/pink": "^0.0.6-rc.6",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index d6f0877ba..595fd7087 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -62,7 +62,7 @@
 
     {#if hasRelationship}
         <TableList>
-            {#each $attributes?.find((attribute) => attribute.type === 'relationship') as attr}
+            {#each Array.from($attributes?.find((attribute) => attribute.type === 'relationship')) as attr}
                 <li class="table-row">
                     <TableCellText title="relation">
                         {attr?.key}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
index 82cfc002b..c54434b7d 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
@@ -4,12 +4,12 @@
     import { CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputSelectSearch, InputText } from '$lib/elements/forms';
-    import { difference, last, symmetricDifference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { teamPrefs } from '$lib/stores/team';
     import { onMount } from 'svelte';
-    import { attributes } from '../store';
+    import { attributes, collection } from '../store';
 
     let displayNames = [];
     let search: string;
@@ -17,15 +17,21 @@
     onMount(async () => {
         await teamPrefs.load($organization.$id);
 
-        $teamPrefs.displayNames ??= [];
-        displayNames = [...$teamPrefs.displayNames];
+        $teamPrefs.displayNames ??= {};
+        $teamPrefs.displayNames[$collection.$id] ??= [];
+        displayNames = [...$teamPrefs.displayNames[$collection.$id]];
     });
 
     async function updateDisplayName() {
         try {
-            teamPrefs.updatePrefs($organization.$id, {
-                displayNames
-            });
+            const pref = {
+                ...$teamPrefs,
+                displayNames: {
+                    ...$teamPrefs.displayNames,
+                    [$collection.$id]: displayNames
+                }
+            };
+            teamPrefs.updatePrefs($organization.$id, pref);
             invalidate(Dependencies.TEAM);
             addNotification({
                 message: 'Name has been updated',
@@ -60,11 +66,12 @@
         displayNames?.length >= 5 ||
         (displayNames?.length && !displayNames[displayNames?.length - 1]);
 
-    $: updateBtnDisabled = !symmetricDifference(displayNames, $teamPrefs?.displayNames)?.length;
+    $: updateBtnDisabled = !symmetricDifference(
+        displayNames,
+        $teamPrefs?.displayNames?.[$collection.$id] ?? []
+    )?.length;
 
-    $: console.log(displayNames, $teamPrefs?.displayNames);
-
-    $: console.log(symmetricDifference(displayNames, $teamPrefs?.displayNames).length);
+    $: console.log(displayNames, $teamPrefs?.displayNames[$collection.$id]);
 </script>
 
 <Form onSubmit={updateDisplayName}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 7156dc72b..9b8f03e1a 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -13,19 +13,23 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { organization } from '$lib/stores/organization';
+    import { teamPrefs } from '$lib/stores/team';
     import { onMount } from 'svelte';
     import type { PageData } from './$types';
     import RelationshipsModal from './relationshipsModal.svelte';
-    import { collection, columns } from './store';
+    import { attributes, collection, columns } from './store';
 
     export let data: PageData;
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
     let showRelationships = false;
     let selectedRelationship: string = null;
 
     onMount(() => {
+        teamPrefs.load($organization.$id);
         columns.set([
             ...$collection.attributes.map((attribute) => ({
                 id: attribute.key,
@@ -100,9 +104,17 @@
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.type === 'relationship'}
+                            <!-- {JSON.stringify(document[column.id])} -->
+                            {@const attr = $attributes.find((n) => n.key === column.id)}
+                            {@const args = $teamPrefs?.displayNames?.[attr.relatedCollection] ?? [
+                                '$id'
+                            ]}
+
                             {#if !column.twoWay}
                                 <TableCell title={column.title}>
-                                    {document[column.id]}
+                                    {#each args as arg}
+                                        {document[column.id]?.[arg]}
+                                    {/each}
                                 </TableCell>
                             {:else}
                                 <TableCell>