diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte
index 77f2568e3..325901029 100644
--- a/src/lib/layout/displaySettingsModal.svelte
+++ b/src/lib/layout/displaySettingsModal.svelte
@@ -35,7 +35,7 @@
         {#if !hideColumns && $columns?.length}
             <Layout.Stack gap="xs">
                 <Typography.Text>Columns</Typography.Text>
-                <ColumnSelector {columns} {isCustomTable}>
+                <ColumnSelector ui="new" {columns} {isCustomTable}>
                     {#snippet children(toggle, selectedColumnsNumber)}
                         <Button.Button
                             size="s"
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index c3532f1e0..a4212e5f1 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -17,7 +17,14 @@
 <header class="grid-header">
     <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
-        <ViewSelector {view} {columns} {isCustomTable} {hideView} {hideColumns} {allowNoColumns} />
+        <ViewSelector
+            ui="new"
+            {view}
+            {columns}
+            {isCustomTable}
+            {hideView}
+            {hideColumns}
+            {allowNoColumns} />
         <div class="grid-header-col-2">
             <slot />
         </div>
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index e84caf048..0f5358a02 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -112,7 +112,7 @@
                 </Layout.Stack>
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     {#if hasDisplaySettings}
-                        <ViewSelector {view} {columns} {hideView} {hideColumns} />
+                        <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                     {/if}
                     {#if children}
                         {@render children()}
diff --git a/src/routes/(console)/organization-[organization]/domains/+page.svelte b/src/routes/(console)/organization-[organization]/domains/+page.svelte
index 4251c80e9..4e98e3d80 100644
--- a/src/routes/(console)/organization-[organization]/domains/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/+page.svelte
@@ -49,7 +49,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search domains" />
         <Layout.Stack direction="row" gap="m" inline>
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button
                 on:click={() => {
                     trackEvent(Click.DomainCreateClick, {
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
index 39e799b87..d6ce25571 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
@@ -84,7 +84,7 @@
                         </Tooltip>
                     </Layout.Stack>
                     <Layout.Stack direction="row" gap="s" inline>
-                        <ViewSelector view={View.Table} {columns} hideView />
+                        <ViewSelector ui="new" view={View.Table} {columns} hideView />
                         <Popover let:toggle padding="none">
                             <Button secondary on:click={toggle}>Add preset</Button>
                             <svelte:fragment slot="tooltip" let:toggle>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index 1f2dc4423..b58953779 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -59,7 +59,7 @@
             <SearchQuery placeholder="Search by name, email, phone, or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
index b87b1f3e3..7b5c83685 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
@@ -52,13 +52,13 @@
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
                 <div>
-                    <ViewSelector view={View.Table} {columns} hideView />
+                    <ViewSelector ui="new" view={View.Table} {columns} hideView />
                 </div>
             </div>
         </div>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
             <div class="u-flex-basis-50-percent">
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
             </div>
             <div class="u-flex-basis-50-percent">
                 <Filters query={data.query} {columns} fullWidthMobile />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
index 28cdbeec4..7774be57f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
@@ -33,7 +33,7 @@
 
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
             </div>
         </div>
     </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index a8ab5335a..67681bddc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -52,6 +52,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 {columns}
                 view={data.view}
                 hideColumns={!data.databases.total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 0726e2165..2bba6faf7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -26,6 +26,7 @@
 
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 view={data.view}
                 columns={tableViewColumns}
                 hideColumns={!data.tables.total}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 8aed8a13b..85b132238 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -29,7 +29,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             {#if $canWriteProviders}
                 <CreateProviderDropdown let:toggle>
                     <Button on:click={toggle} event="create_provider">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
index 90a5871f8..338601be6 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -92,7 +92,7 @@
         <SearchQuery placeholder="Search by type or IDs"></SearchQuery>
         <Layout.Stack direction="row" inline>
             <Filters query={data.query} {columns} analyticsSource="messaging_topics" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button
                 on:click={() => {
                     showAdd = true;
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 2c02dc197..4ee496dec 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -27,7 +27,7 @@
 
 <Container>
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-        <ViewSelector {columns} view={View.Table} hideView />
+        <ViewSelector ui="new" {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
             <Button
                 href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
index caa180049..17022e7d7 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -63,7 +63,12 @@
             <SearchQuery placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
+            <ViewSelector
+                ui="new"
+                {columns}
+                view={data.view}
+                hideColumns
+                hideView={!data.siteList.total} />
             {#if $canWriteSites}
                 <Button on:mousedown={() => (show = true)} event="create_site" size="s">
                     <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 7bbac81ce..d53830b6f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -39,6 +39,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 {columns}
                 view={data.view}
                 hideColumns={!data.buckets.total}