diff --git a/package.json b/package.json
index 905be349e..e4ec17694 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@ab459aa",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13",
         "@codemirror/autocomplete": "^6.19.0",
         "@codemirror/commands": "^6.9.0",
         "@codemirror/lang-javascript": "^6.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e9b29741..b34908bde 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,14 +18,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13(svelte@5.25.3)
       '@codemirror/autocomplete':
         specifier: ^6.19.0
         version: 6.19.0
@@ -320,8 +320,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -335,8 +335,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3934,7 +3934,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f5ea3d0(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50c5f13(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3947,7 +3947,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f5ea3d0(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@50c5f13(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 3a939cb06..f1a1c5381 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -11,6 +11,7 @@
     export let helper: string | undefined = undefined;
     export let pattern: string | undefined = undefined;
     export let leadingIcon: ComponentType | undefined = undefined;
+    export let max: number | undefined = undefined;
 
     let value = '';
     let error: string;
@@ -30,13 +31,29 @@
     $: if (value) {
         error = null;
     }
+
+    $: {
+        // filter out empty or whitespace-only tags
+        const cleaned = tags.filter((tag) => tag.trim().length > 0);
+        if (cleaned.length !== tags.length) {
+            tags = cleaned;
+        }
+    }
+
+    $: if (max !== undefined && tags.length > max) {
+        error = `Maximum ${max} fields allowed`;
+    } else if (max === undefined || tags.length <= max) {
+        error = null;
+    }
+
+    $: isDisabled = disabled || (max !== undefined && tags.length >= max);
 </script>
 
 <Input.Tags
     {label}
     {id}
     {placeholder}
-    {disabled}
+    disabled={isDisabled}
     {pattern}
     {required}
     {leadingIcon}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/inputs/displayName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/inputs/displayName.svelte
index fed8c0c6a..832bfcb41 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/inputs/displayName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/inputs/displayName.svelte
@@ -2,13 +2,11 @@
     import { InputTags } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
     import { preferences } from '$lib/stores/preferences';
-    import { Input, Layout } from '@appwrite.io/pink-svelte';
     import { organization } from '$lib/stores/organization';
 
     let {
         collectionId,
         databaseType,
-        inModal = false,
         onSuccess = null,
         onFailure = null
     }: {
@@ -59,18 +57,10 @@
     });
 </script>
 
-<Layout.Stack>
-    <Layout.Stack gap="s">
-        {#key names.length}
-            <InputTags
-                bind:tags={names}
-                id="custom-columns-{collectionId}"
-                placeholder="Enter fields"
-                label={inModal ? null : 'Fields to display'} />
-        {/key}
-
-        <Input.Helper state="default">
-            ID, createdAt, and updatedAt are always included and cannot be modified
-        </Input.Helper>
-    </Layout.Stack>
-</Layout.Stack>
+<InputTags
+    max={5}
+    bind:tags={names}
+    id="custom-columns-{collectionId}"
+    placeholder="Enter fields"
+    label="Fields to display"
+    helper="ID, createdAt, and updatedAt are always included and cannot be modified" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 08697e0b6..eb0914667 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -285,7 +285,6 @@
     </svelte:fragment>
 
     <ColumnDisplayNameInput
-        inModal
         bind:this={columnDisplayNameInput}
         databaseType={data.database.type}
         collectionId={page.params.collection}
@@ -301,7 +300,8 @@
     <svelte:fragment slot="footer">
         <Button size="s" secondary on:click={() => (showCustomColumnsModal = false)}>Cancel</Button>
 
-        <Button size="s" submit disabled={columnDisplayNameInput?.hasChanged()}>Update</Button>
+        <Button size="s" submit submissionLoader disabled={columnDisplayNameInput?.hasChanged()}
+            >Update</Button>
     </svelte:fragment>
 </Modal>