diff --git a/src/lib/components/filters/quickFilters.svelte b/src/lib/components/filters/quickFilters.svelte
index 233fa7358b..af2b94d428 100644
--- a/src/lib/components/filters/quickFilters.svelte
+++ b/src/lib/components/filters/quickFilters.svelte
@@ -13,22 +13,36 @@
     let {
         columns,
         filterCols,
-        analyticsSource
+        analyticsSource,
+        buttonVariant = 'ghost'
     }: {
         columns: Writable<Column[]>;
         filterCols: FilterData[];
         analyticsSource?: string;
+        buttonVariant?: 'ghost' | 'secondary';
     } = $props();
 </script>
 
 <Menu>
-    <Button
-        ariaLabel="Filters"
-        text
-        icon
-        badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
-        <Icon icon={IconFilterLine} size="s" />
-    </Button>
+    {#if buttonVariant === 'secondary'}
+        <Button
+            ariaLabel="Filters"
+            secondary
+            size="s"
+            badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
+            <Icon icon={IconFilterLine} size="s" slot="start" />
+            <span class="text">Filters</span>
+        </Button>
+    {:else}
+        <Button
+            ariaLabel="Filters"
+            text
+            icon
+            size="s"
+            badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
+            <Icon icon={IconFilterLine} size="s" />
+        </Button>
+    {/if}
     <svelte:fragment slot="menu">
         {#each filterCols.filter((f) => f?.options) as filter (filter.title + filter.id)}
             {#if filter.options}
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index 7812f34f94..571d325c77 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { SearchQuery, ViewSelector } from '$lib/components';
     import { FiltersBottomSheet, ParsedTagList, queryParamToMap } from '$lib/components/filters';
+    import QuickFilters from '$lib/components/filters/quickFilters.svelte';
 
     import Button from '$lib/elements/forms/button.svelte';
     import { View } from '$lib/helpers/load';
@@ -23,6 +24,7 @@
         hasSearch = false,
         searchPlaceholder = 'Search by ID',
         hasFilters = false,
+        filtersStyle = 'chips',
         analyticsSource = '',
         children
     }: {
@@ -33,6 +35,7 @@
         hasSearch?: boolean;
         searchPlaceholder?: string;
         hasFilters?: boolean;
+        filtersStyle?: 'chips' | 'dropdown';
         analyticsSource?: string;
         children?: Snippet;
     } = $props();
@@ -99,28 +102,32 @@
                 {#if showSearch && hasSearch}
                     <SearchQuery placeholder={searchPlaceholder} />
                 {/if}
-                <div style="overflow-x: auto;">
-                    <ParsedTagList {columns} {analyticsSource} />
-                </div>
+                {#if hasFilters && filtersStyle === 'chips'}
+                    <div style="overflow-x: auto;">
+                        <ParsedTagList {columns} {analyticsSource} />
+                    </div>
+                {/if}
             </Layout.Stack>
         {:else}
             <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-start">
                 <Layout.Stack
                     direction="row"
-                    alignItems="center"
+                    alignItems="flex-start"
                     gap="m"
                     style="min-width: 0; flex: 1 1 auto;">
                     {#if hasSearch}
-                        <SearchQuery placeholder={searchPlaceholder} />
+                        <div style="flex: 0 0 auto; max-width: 360px; min-width: 0;">
+                            <SearchQuery placeholder={searchPlaceholder} />
+                        </div>
                     {/if}
-                    {#if hasFilters}
+                    {#if hasFilters && filtersStyle === 'chips'}
                         <!-- Tags with Filters button (rendered inside ParsedTagList) -->
                         <Layout.Stack
                             direction="row"
                             alignItems="center"
                             gap="s"
                             wrap="wrap"
-                            style="min-width: 0;">
+                            style="min-width: 0; flex: 1 1 auto;">
                             <ParsedTagList {columns} {analyticsSource} />
                         </Layout.Stack>
                     {/if}
@@ -130,6 +137,13 @@
                     alignItems="center"
                     justifyContent="flex-end"
                     style="align-self: flex-start; white-space: nowrap;">
+                    {#if hasFilters && filtersStyle === 'dropdown'}
+                        <QuickFilters
+                            {columns}
+                            {analyticsSource}
+                            buttonVariant="secondary"
+                            filterCols={filterCols.filter((f) => f?.options)} />
+                    {/if}
                     {#if hasDisplaySettings}
                         <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 464237e79e..2084ce89ee 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -137,6 +137,7 @@
         hideView
         hasSearch
         hasFilters
+        filtersStyle="dropdown"
         bind:view={data.view}
         analyticsSource="messaging_messages"
         searchPlaceholder="Search by description, type, status, or ID">
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 cc80b73af9..eb62390260 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -24,6 +24,7 @@
         hideView
         hasFilters
         hasSearch
+        filtersStyle="dropdown"
         analyticsSource="messaging_providers"
         searchPlaceholder="Search by name or ID">
         {#if $canWriteProviders}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index 47a3056034..284152a3d4 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -71,6 +71,7 @@
         hideView
         hasFilters
         hasSearch
+        filtersStyle="dropdown"
         analyticsSource="messaging_topics_filter"
         searchPlaceholder="Search by name or ID">
         {#if $canWriteTopics}