diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index d3f78977f..055a2678c 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -113,7 +113,7 @@
                         type="button"
                         class:is-selected={view === View.Table}
                         use:tooltip={{
-                            content: 'Column View'
+                            content: 'List View'
                         }}>
                         <span class="icon-view-list" aria-hidden="true" />
                     </a>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 25b22d75e..1e00f1be2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -30,6 +30,13 @@
     let showDelete = false;
     let showEdit = false;
     let showCreateIndex = false;
+
+    enum attributeStringIcon {
+        ip = 'location-marker',
+        url = 'link',
+        email = 'mail',
+        enum = 'list'
+    }
 </script>
 
 <Container>
@@ -63,6 +70,9 @@
                                                         : 'arrow-sm-right'
                                                 }`}
                                                 aria-hidden="true" />
+                                        {:else if 'format' in attribute}
+                                            {@const icon = attributeStringIcon[attribute?.format]}
+                                            <span class={`icon-${icon}`} aria-hidden="true" />
                                         {:else}
                                             <span
                                                 class={`icon-${option.icon}`}
@@ -85,7 +95,15 @@
                             </div>
                         </TableCell>
                         <TableCellText onlyDesktop title="Type">
-                            {`${attribute.type}${attribute.array ? '[]' : ''}`}
+                            <span class="u-capitalize">{attribute.type}</span>
+                            {#if isRelationship(attribute)}
+                                <span>
+                                    with <b>{attribute?.key}</b>
+                                </span>
+                            {/if}
+                            <span>
+                                {attribute.array ? '[]' : ''}
+                            </span>
                         </TableCellText>
                         <TableCellText onlyDesktop title="Default Value">
                             {attribute?.default !== null && attribute?.default !== undefined
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index 00ae3c50d..e4e7df791 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -67,7 +67,8 @@
             </p>
             <p class="text"><b>This action is irreversible.</b></p>
             <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                Delete relationship between {selectedAttribute.key} to {selectedAttribute.twoWayKey}
+                Delete relationship between <b>{selectedAttribute.key}</b> to
+                <b>{selectedAttribute.twoWayKey}</b>
             </InputChoice>
         </div>
     {/if}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index 19a26b9c0..60fd0bdca 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -23,7 +23,7 @@ export type Option = {
         data: Partial<Attributes>
     ) => Promise<void>;
     update: (databaseId: string, collectionId: string, data: Partial<Attributes>) => Promise<void>;
-    format?: 'email' | 'ip' | 'url' | 'enum' | 'relationship';
+    format?: 'email' | 'ip' | 'url' | 'enum';
     icon: string;
 };
 
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 c171de374..47fd999ec 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
@@ -3,7 +3,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormList, InputSelectSearch, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputSelectSearch, InputText } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
@@ -82,8 +82,8 @@
         </p>
 
         <svelte:fragment slot="aside">
-            <div class="u-flex u-flex-vertical u-gap-8">
-                <FormList>
+            <div class="u-flex u-flex-vertical u-gap-4">
+                <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
                     <InputText
                         id="id"
                         label="Document ID"
@@ -98,6 +98,7 @@
                                         id={name}
                                         label={name}
                                         showLabel={false}
+                                        interactiveOutput
                                         placeholder="Select attribute"
                                         bind:value={displayNames[i]}
                                         bind:search={displayNames[i]}
@@ -129,7 +130,7 @@
                             </div>
                         {/each}
                     {/if}
-                </FormList>
+                </ul>
                 <Button
                     noMargin
                     text