diff --git a/package.json b/package.json
index 0fe8f5a25..6bc1eb196 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40bae6b",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cac4e0adc..5f6146e7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40bae6b
-        version: https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,8 +261,9 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564}
     version: 1.8.0
 
-  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
-    resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870}
+    version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
 
@@ -281,8 +282,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/%40appwrite.io%2Fpink-svelte@40bae6b':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3637,7 +3638,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564': {}
 
-  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3654,9 +3655,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 37c1640ad..c113d5e9c 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -18,6 +18,19 @@
         children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
     } = $props();
 
+    let maxHeight = $state('none');
+    let containerRef;
+
+    const calcMaxHeight = () => {
+        if (containerRef) {
+            // get parent row element for correct top position
+            const parent = containerRef.parentElement.parentElement;
+            const { top } = parent.getBoundingClientRect();
+
+            maxHeight = `${window.innerHeight - top - 48}px`;
+        }
+    };
+
     onMount(async () => {
         if (isCustomCollection) {
             const prefs = preferences.getCustomCollectionColumns(page.params.collection);
@@ -50,6 +63,8 @@
                 preferences.setColumns(columns);
             }
         });
+
+        calcMaxHeight();
     });
 
     let selectedColumnsNumber = $derived(
@@ -61,29 +76,32 @@
     );
 </script>
 
+<svelte:window on:resize={calcMaxHeight} />
 {#if $columns?.length}
     <Popover let:toggle placement="bottom-end" padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
-            <ActionMenu.Root>
-                {#each $columns as column}
-                    {#if !column?.exclude}
-                        <ActionMenu.Item.Button
-                            on:click={() => (column.hide = !column.hide)}
-                            disabled={allowNoColumns
-                                ? false
-                                : selectedColumnsNumber <= 1 && column.hide !== true}>
-                            <Layout.Stack direction="row" gap="s">
-                                <Selector.Checkbox
-                                    checked={!column.hide}
-                                    size="s"
-                                    on:click={() => (column.hide = !column.hide)} />
-                                {column.title}
-                            </Layout.Stack>
-                        </ActionMenu.Item.Button>
-                    {/if}
-                {/each}
-            </ActionMenu.Root>
+            <div style:max-height={maxHeight} style:overflow="scroll" bind:this={containerRef}>
+                <ActionMenu.Root>
+                    {#each $columns as column}
+                        {#if !column?.exclude}
+                            <ActionMenu.Item.Button
+                                on:click={() => (column.hide = !column.hide)}
+                                disabled={allowNoColumns
+                                    ? false
+                                    : selectedColumnsNumber <= 1 && column.hide !== true}>
+                                <Layout.Stack direction="row" gap="s">
+                                    <Selector.Checkbox
+                                        checked={!column.hide}
+                                        size="s"
+                                        on:click={() => (column.hide = !column.hide)} />
+                                    {column.title}
+                                </Layout.Stack>
+                            </ActionMenu.Item.Button>
+                        {/if}
+                    {/each}
+                </ActionMenu.Root>
+            </div>
         </svelte:fragment>
     </Popover>
 {/if}