diff --git a/package-lock.json b/package-lock.json
index 4b75ed1bd..37d66f466 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.6",
+                "@appwrite.io/pink": "^0.0.6-rc.7",
                 "@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.6",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.6.tgz",
-            "integrity": "sha512-mSOUI2UxRqO3MS4ZXz9bdyAt0VFGRhOwWYGXw+oFfYPjmu6GSKnLEQwjF37DeuArEGRNriTiOFrKqXO0HW0odA==",
+            "version": "0.0.6-rc.7",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.7.tgz",
+            "integrity": "sha512-3I+DG4HiysIRJF9ksr+aWMmazUtZ6KrivISu3k+pIX7MjyDhN5la6LVNKgU3d8WWstbHCHoEq5+FYyjsYWWIpA==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index a021b5e8f..4790cb235 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.6",
+        "@appwrite.io/pink": "^0.0.6-rc.7",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
diff --git a/src/lib/components/clickableList.svelte b/src/lib/components/clickableList.svelte
new file mode 100644
index 000000000..733607b9b
--- /dev/null
+++ b/src/lib/components/clickableList.svelte
@@ -0,0 +1,3 @@
+<ul class="clickable-list">
+    <slot />
+</ul>
diff --git a/src/lib/components/clickableListItem.svelte b/src/lib/components/clickableListItem.svelte
new file mode 100644
index 000000000..00308d47a
--- /dev/null
+++ b/src/lib/components/clickableListItem.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export let href: string;
+</script>
+
+<li class="clickable-list-item">
+    <a {href} class="clickable-list-button" on:click>
+        <h5 class="clickable-list-title u-trim-1">
+            <slot />
+        </h5>
+        <div class="clickable-list-desc">
+            <p class="text u-margin-block-start-8"><slot name="desc" /></p>
+        </div>
+    </a>
+</li>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 5a9db65b2..6927dd1e5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -51,3 +51,5 @@ export { default as ViewSelector } from './viewSelector.svelte';
 export { default as LabelCard } from './labelCard.svelte';
 export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
+export { default as ClickableList } from './clickableList.svelte';
+export { default as ClickableListItem } from './clickableListItem.svelte';
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index 2ec11bc62..b43035f00 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Modal, PaginationInline } from '$lib/components';
-    import { TableCell, TableList, TableRowLink } from '$lib/elements/table';
+    import { ClickableList, ClickableListItem, Modal, Paginator } from '$lib/components';
     import { teamPrefs } from '$lib/stores/team';
     import type { Models } from '@appwrite.io/console';
 
@@ -12,7 +11,6 @@
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
     const limit = 10;
-    let offset = 0;
 
     $: args = $teamPrefs?.displayNames?.[selectedRelationship?.relatedCollection];
 
@@ -26,31 +24,25 @@
     <svelte:fragment slot="header">
         {selectedRelationship.key}
     </svelte:fragment>
-    <TableList>
-        {#each data as doc, i}
-            {#if i >= offset && i < offset + limit}
-                <TableRowLink
+
+    <Paginator items={data} {limit} let:paginatedItems>
+        <ClickableList>
+            {#each paginatedItems as doc}
+                <ClickableListItem
                     href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${selectedRelationship.relatedCollection}`}
                     on:click={() => (show = false)}>
-                    <TableCell title={doc.$id}>
-                        <div class="u-flex u-gap-8">
-                            {#each args as arg, i}
-                                {#if i}
-                                    <span class="u-color-text-gray">|</span>
-                                {/if}
-                                <span>{doc[arg]}</span>
-                            {/each}
-                        </div>
-                        <span class="u-color-text-gray u-small">{doc.$id}</span>
-                    </TableCell>
-                </TableRowLink>
-            {/if}
-        {/each}
-    </TableList>
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {data?.length ?? 0}</p>
-        <PaginationInline {limit} bind:offset sum={data?.length ?? 0} hidePages />
-    </div>
-
+                    {#each args as arg, i}
+                        {#if i}
+                            <span class="clickable-list-title-sep">|</span>
+                        {/if}
+                        <span>{doc[arg]}</span>
+                    {/each}
+                    <svelte:fragment slot="desc">
+                        {doc.$id}
+                    </svelte:fragment>
+                </ClickableListItem>
+            {/each}
+        </ClickableList>
+    </Paginator>
     <svelte:fragment slot="footer" />
 </Modal>
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 723df4aad..d2bde0334 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
@@ -18,6 +18,7 @@
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import type { PageData } from './$types';
+    import type Attribute from './document-[document]/attribute.svelte';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
 
@@ -78,6 +79,13 @@
             whole: formattedColumn
         };
     }
+
+    function isRelationship(
+        column: (typeof $columns)[0],
+        attr: Partial<Attribute>
+    ): attr is Models.AttributeRelationship {
+        return column.type === 'relationship';
+    }
 </script>
 
 <TableScroll isSticky>
@@ -104,12 +112,11 @@
 
                 {#each $columns as column}
                     {#if column.show}
-                        {#if column.type === 'relationship'}
-                            {@const attr = $attributes.find((n) => n.key === column.id)}
+                        {@const attr = $attributes.find((n) => n.key === column.id)}
+                        {#if isRelationship(column, attr)}
                             {@const args = $teamPrefs?.displayNames?.[attr.relatedCollection] ?? [
                                 '$id'
                             ]}
-
                             {#if attr?.relationType === 'oneToOne' || attr?.relationType === 'manyToOne'}
                                 <TableCell title={column.title}>
                                     <button