diff --git a/.github/pr-screenshots/device-filters-modal-full.webp b/.github/pr-screenshots/device-filters-modal-full.webp
new file mode 100644
index 0000000000..b59c1d87a1
Binary files /dev/null and b/.github/pr-screenshots/device-filters-modal-full.webp differ
diff --git a/.github/pr-screenshots/device-filters-modal.webp b/.github/pr-screenshots/device-filters-modal.webp
new file mode 100644
index 0000000000..769a8555af
Binary files /dev/null and b/.github/pr-screenshots/device-filters-modal.webp differ
diff --git a/messages/en.json b/messages/en.json
index afad39e708..f5f427c640 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -273,7 +273,9 @@
   "production-plugin-device": "Production plugin device",
   "production-plugin-device-within-7-days": "Production Plugin Device (within 7 days)",
   "all-billing-cycles": "All billing cycles",
+  "all-bundles": "All bundles",
   "all-plans": "All plans",
+  "all-platforms": "All platforms",
   "access-required-description": "You don't have access to this section. Ask one of the people below, who can manage it for your organization.",
   "access-contact-people": "People who can help",
   "audit-access-required": "Audit log access required",
@@ -779,6 +781,7 @@
   "choose-which-channel-to-link-this-bundle-to": "Choose which channel to link this bundle to",
   "cli-doc": "CLI doc",
   "cli-version": "CLI version",
+  "clear-filters": "Clear filters",
   "close": "Close",
   "cloud-replication-delay": "Changes will take up to 60 seconds to propagate globally",
   "commands": "commands",
@@ -1125,6 +1128,7 @@
   "detailed-usage-plan": "Detailed usage",
   "details": "Details",
   "device": "Device",
+  "done": "Done",
   "device-id": "Device ID",
   "device-id-placeholder": "00000000-0000-0000-0000-000000000000",
   "device-injected": "This device has been created manually to add an overwrite.",
@@ -1272,6 +1276,8 @@
   "feel-magic-of-capgo": "Feel the magic of:",
   "fetching-release-data": "Fetching release data...",
   "filter-actions": "Actions",
+  "filter-options": "Options",
+  "filter-modal-subtitle": "Narrow results by platform, bundle, or status.",
   "filter-shortcut-all-fail": "All failures",
   "first-name": "First name",
   "first-name-required": "First name required",
diff --git a/playwright/visual-diff.config.ts b/playwright/visual-diff.config.ts
index 018ff6372c..0b43c204b0 100644
--- a/playwright/visual-diff.config.ts
+++ b/playwright/visual-diff.config.ts
@@ -19,7 +19,25 @@ export const visualDiffRoutes: VisualDiffRoute[] = [
   { slug: 'apps', path: '/apps', auth: true },
   { slug: 'app-overview', path: '/app/com.demo.app', auth: true },
   { slug: 'channels', path: '/app/com.demo.app/channels', auth: true },
-  { slug: 'devices', path: '/app/com.demo.app/devices', auth: true },
+  {
+    slug: 'devices',
+    path: '/app/com.demo.app/devices',
+    auth: true,
+    prepare: async (page) => {
+      // Open Filters so reviewers see platform/bundle controls on head.
+      // Base still uses the legacy dropdown, so fall back only when modal is absent.
+      await page.getByRole('button', { name: /filters/i }).click()
+      const modal = page.locator('[data-test="data-table-filters-modal"]')
+      try {
+        await modal.waitFor({ state: 'visible', timeout: 3000 })
+      }
+      catch {
+        await page.getByText('Override', { exact: true }).waitFor({ state: 'visible' })
+        return
+      }
+      await page.locator('[data-test="device-platform-filter"]').waitFor({ state: 'visible' })
+    },
+  },
   { slug: 'observe', path: '/app/com.demo.app/observe', auth: true },
   { slug: 'observe-plugins', path: '/app/com.demo.app/observe/plugins', auth: true },
   {
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index ae111ee4c3..b94a4f6ced 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -6,14 +6,17 @@ import DOMPurify from 'dompurify'
 import {
   computed,
   defineComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
+  useId,
+  useSlots,
   watch,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import IconTrash from '~icons/heroicons/trash'
-import IconDown from '~icons/ic/round-keyboard-arrow-down'
+import IconClose from '~icons/heroicons/x-mark'
 import IconPrev from '~icons/ic/round-keyboard-arrow-left'
 import IconNext from '~icons/ic/round-keyboard-arrow-right'
 import IconFastBackward from '~icons/ic/round-keyboard-double-arrow-left'
@@ -31,6 +34,8 @@ interface Props {
   filterText?: string
   filters?: { [key: string]: boolean }
   filterLabels?: { [key: string]: string }
+  /** Extra active filters contributed by the filter-extras slot (e.g. selects). */
+  extraFilterCount?: number
   searchPlaceholder?: string
   showAdd?: boolean
   addButtonTestId?: string
@@ -49,6 +54,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   autoReload: true,
   mobileFixedPagination: true,
+  extraFilterCount: 0,
 })
 const emit = defineEmits([
   'add',
@@ -65,7 +71,13 @@ const emit = defineEmits([
   'plusClick',
   'selectRow',
   'massDelete',
+  'clearExtraFilters',
 ])
+const isFilterModalOpen = ref(false)
+const filterModalBoxRef = ref<HTMLElement | null>(null)
+const filterOpenButtonRef = ref<HTMLButtonElement | null>(null)
+const filterModalTitleId = `${useId()}-filters-title`
+const slots = useSlots()
 const { t } = useI18n()
 const searchVal = ref(props.search ?? '')
 const pendingReset = ref(false)
@@ -95,19 +107,97 @@ const filterList = computed(() => {
   return Object.keys(props.filters)
 })
 const filterActivated = computed(() => {
-  if (!props.filters)
-    return []
-  return Object.keys(props.filters).reduce((acc, key) => {
-    if (props.filters![key])
-      acc += 1
-    return acc
-  }, 0)
+  const booleanCount = props.filters
+    ? Object.keys(props.filters).reduce((acc, key) => {
+        if (props.filters![key])
+          acc += 1
+        return acc
+      }, 0)
+    : 0
+  return booleanCount + (props.extraFilterCount ?? 0)
 })
 
+const showFilterMenu = computed(() =>
+  Boolean(props.filterText && (filterList.value.length || slots['filter-extras'])),
+)
+
 function getFilterLabel(filter: string) {
   return props.filterLabels?.[filter] ?? t(filter)
 }
 
+function openFilterModal() {
+  isFilterModalOpen.value = true
+}
+
+function closeFilterModal() {
+  isFilterModalOpen.value = false
+  nextTick(() => {
+    filterOpenButtonRef.value?.focus()
+  })
+}
+
+function getFilterModalFocusable() {
+  const root = filterModalBoxRef.value
+  if (!root)
+    return [] as HTMLElement[]
+  return Array.from(root.querySelectorAll<HTMLElement>(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+  )).filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null)
+}
+
+function onFilterModalKeydown(e: KeyboardEvent) {
+  if (!isFilterModalOpen.value)
+    return
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    closeFilterModal()
+    return
+  }
+  if (e.key !== 'Tab')
+    return
+  const focusable = getFilterModalFocusable()
+  if (!focusable.length)
+    return
+  const first = focusable[0]!
+  const last = focusable[focusable.length - 1]!
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  }
+  else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+watch(isFilterModalOpen, async (open) => {
+  if (open) {
+    window.addEventListener('keydown', onFilterModalKeydown)
+    await nextTick()
+    const focusable = getFilterModalFocusable()
+    focusable[0]?.focus()
+  }
+  else {
+    window.removeEventListener('keydown', onFilterModalKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onFilterModalKeydown)
+})
+
+function clearAllFilters() {
+  // Emit a new filters object so DataTable's filters watcher performs one reload.
+  // Extra filters are cleared without scheduling a second reload.
+  if (props.filters) {
+    const cleared = Object.fromEntries(
+      Object.keys(props.filters).map(key => [key, false]),
+    ) as { [key: string]: boolean }
+    emit('update:filters', cleared)
+  }
+  emit('clearExtraFilters')
+}
+
 function sortClick(key: number) {
   if (!props.columns[key].sortable)
     return
@@ -497,10 +587,15 @@ const paginationClass = computed(() => props.mobileFixedPagination
             <span class="hidden text-sm md:block">{{ t("add-one") }}</span>
           </button>
         </div>
-        <div v-if="filterText && filterList.length" class="h-10 d-dropdown">
+        <div v-if="showFilterMenu" class="relative h-10">
           <button
-            tabindex="0"
+            ref="filterOpenButtonRef"
+            type="button"
             class="inline-flex items-center py-1.5 px-3 mr-2 h-full text-sm font-medium text-gray-500 bg-white rounded-md border border-gray-300 cursor-pointer dark:text-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 focus:outline-hidden"
+            data-test="data-table-filters-open"
+            :aria-expanded="isFilterModalOpen"
+            aria-haspopup="dialog"
+            @click="openFilterModal"
           >
             <div
               v-if="filterActivated"
@@ -509,30 +604,105 @@ const paginationClass = computed(() => props.mobileFixedPagination
               {{ filterActivated }}
             </div>
             <IconFilter class="w-4 h-4 mr-2" />
-            <span class="hidden md:block">{{ t(filterText) }}</span>
-            <IconDown class="hidden w-4 h-4 ml-2 md:block" />
+            <span class="hidden md:block">{{ t(filterText ?? '') }}</span>
           </button>
-          <ul class="max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-y-auto border border-gray-200 bg-white p-2 shadow-xl d-dropdown-content d-menu rounded-box z-20 dark:border-gray-700 dark:bg-base-200">
-            <li v-for="(f, i) in filterList" :key="i">
+          <Teleport to="body">
+            <div
+              v-if="isFilterModalOpen"
+              class="d-modal d-modal-open"
+              role="dialog"
+              aria-modal="true"
+              :aria-labelledby="filterModalTitleId"
+              data-test="data-table-filters-modal"
+            >
               <div
-                class="flex min-h-10 items-center rounded-md p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600"
+                ref="filterModalBoxRef"
+                class="d-modal-box w-[calc(100vw-2rem)] max-w-md rounded-lg border border-slate-200 bg-white p-0 shadow-2xl dark:border-slate-700 dark:bg-slate-900"
               >
-                <input
-                  :id="`filter-radio-example-${i}`" :checked="filters?.[f]" type="checkbox"
-                  :name="`filter-radio-${i}`"
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800"
-                  @change="
-                    emit('update:filters', { ...filters, [f]: !filters?.[f] })
-                  "
-                >
-                <label
-                  :for="`filter-radio-example-${i}`"
-                  class="w-full min-w-0 truncate ml-2 text-sm font-medium text-gray-900 rounded-sm cursor-pointer dark:text-gray-300"
-                >{{
-                  getFilterLabel(f) }}</label>
+                <div class="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4 dark:border-slate-800">
+                  <div class="min-w-0">
+                    <h2
+                      :id="filterModalTitleId"
+                      class="text-lg font-semibold leading-7 text-slate-950 dark:text-white"
+                    >
+                      {{ t(filterText ?? 'Filters') }}
+                    </h2>
+                    <p class="mt-1 text-sm leading-5 text-slate-600 dark:text-slate-300">
+                      {{ t('filter-modal-subtitle') }}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md text-slate-500 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 focus:outline-hidden focus:ring-2 focus:ring-azure-500 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
+                    :aria-label="t('close')"
+                    data-test="data-table-filters-close"
+                    @click="closeFilterModal"
+                  >
+                    <IconClose class="h-5 w-5" />
+                  </button>
+                </div>
+
+                <div class="max-h-[min(28rem,60vh)] space-y-5 overflow-y-auto px-5 py-5">
+                  <div v-if="$slots['filter-extras']" class="space-y-4">
+                    <slot name="filter-extras" />
+                  </div>
+                  <div
+                    v-if="$slots['filter-extras'] && filterList.length"
+                    class="border-t border-slate-200 dark:border-slate-700"
+                    role="separator"
+                  />
+                  <fieldset v-if="filterList.length" class="space-y-1">
+                    <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+                      {{ t('filter-options') }}
+                    </legend>
+                    <label
+                      v-for="(f, i) in filterList"
+                      :key="i"
+                      :for="`filter-radio-example-${i}`"
+                      class="flex min-h-11 cursor-pointer items-center rounded-md px-2 py-2 transition-colors duration-150 hover:bg-slate-50 dark:hover:bg-slate-800"
+                    >
+                      <input
+                        :id="`filter-radio-example-${i}`"
+                        :checked="filters?.[f]"
+                        type="checkbox"
+                        :name="`filter-radio-${i}`"
+                        class="h-4 w-4 shrink-0 rounded border-gray-300 text-azure-500 focus:ring-2 focus:ring-azure-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800"
+                        @change="
+                          emit('update:filters', { ...filters, [f]: !filters?.[f] })
+                        "
+                      >
+                      <span class="ml-3 min-w-0 text-sm font-medium text-slate-900 dark:text-slate-200">
+                        {{ getFilterLabel(f) }}
+                      </span>
+                    </label>
+                  </fieldset>
+                </div>
+
+                <div class="flex flex-col-reverse gap-2 border-t border-slate-100 px-5 py-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800">
+                  <button
+                    type="button"
+                    class="d-btn d-btn-ghost min-h-11"
+                    data-test="data-table-filters-clear"
+                    :disabled="!filterActivated"
+                    @click="clearAllFilters"
+                  >
+                    {{ t('clear-filters') }}
+                  </button>
+                  <button
+                    type="button"
+                    class="d-btn d-btn-primary min-h-11"
+                    data-test="data-table-filters-done"
+                    @click="closeFilterModal"
+                  >
+                    {{ t('done') }}
+                  </button>
+                </div>
               </div>
-            </li>
-          </ul>
+              <form method="dialog" class="d-modal-backdrop">
+                <button type="button" :aria-label="t('close')" @click="closeFilterModal" />
+              </form>
+            </div>
+          </Teleport>
         </div>
       </div>
       <button
diff --git a/src/components/tables/DeviceTable.vue b/src/components/tables/DeviceTable.vue
index cc42124bd9..05f426a05d 100644
--- a/src/components/tables/DeviceTable.vue
+++ b/src/components/tables/DeviceTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableColumn } from '../comp_def'
 import type { Database } from '~/types/supabase.types'
-import { h, ref } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -20,6 +20,7 @@ const emit = defineEmits(['addDevice'])
 
 // TODO: delete the old version check when all devices uses the new version system
 type Device = Database['public']['Tables']['devices']['Row']
+type PlatformOs = Database['public']['Enums']['platform_os']
 
 const { t } = useI18n()
 const supabase = useSupabase()
@@ -38,7 +39,32 @@ const filters = ref({
   Override: false,
   CustomId: false,
 })
+const selectedPlatform = ref<'' | PlatformOs>('')
+const selectedVersionName = ref(props.versionName ?? '')
+const bundleNames = ref<string[]>([])
+const skipFilterReload = ref(false)
 const offset = 10
+const activeExtraFilters = computed(() =>
+  (selectedPlatform.value ? 1 : 0) + (selectedVersionName.value.trim() ? 1 : 0),
+)
+const platformOptions = computed(() => [
+  { value: '' as const, label: t('all-platforms') },
+  { value: 'ios' as const, label: t('platform-ios') },
+  { value: 'android' as const, label: t('platform-android') },
+  { value: 'electron' as const, label: t('platform-electron') },
+])
+
+function clearExtraFilters() {
+  // Values only — DataTable clear emits a filters update that triggers the single reload.
+  // Keep skipFilterReload true until the next tick so platform/bundle watchers do not
+  // schedule a second reload in the same clear action.
+  skipFilterReload.value = true
+  selectedPlatform.value = ''
+  selectedVersionName.value = ''
+  nextTick(() => {
+    skipFilterReload.value = false
+  })
+}
 const columns = ref<TableColumn[]>([
   {
     label: t('device-id'),
@@ -95,10 +121,20 @@ function getSearchTerm() {
   return trimmed.length ? trimmed : undefined
 }
 
+function getVersionNameFilter() {
+  const selected = selectedVersionName.value.trim()
+  return selected || undefined
+}
+
+function getPlatformFilter(): PlatformOs | undefined {
+  return selectedPlatform.value || undefined
+}
+
 function getQuerySignature() {
   return JSON.stringify({
     appId: props.appId,
-    versionName: props.versionName,
+    versionName: getVersionNameFilter(),
+    platform: getPlatformFilter() ?? '',
     search: getSearchTerm(),
     order: getActiveOrder(columns.value),
     override: filters.value.Override,
@@ -107,6 +143,35 @@ function getQuerySignature() {
   })
 }
 
+async function loadBundleNames() {
+  const appId = props.appId
+  if (!appId)
+    return
+
+  const { data, error } = await supabase
+    .from('app_versions')
+    .select('name')
+    .eq('app_id', appId)
+    .eq('deleted', false)
+    .order('created_at', { ascending: false })
+    .limit(200)
+
+  // Ignore stale responses if the user switched apps while the query was in flight.
+  if (appId !== props.appId)
+    return
+
+  if (error || !data) {
+    bundleNames.value = []
+    return
+  }
+
+  const names = [...new Set(data.map(row => row.name).filter(Boolean))]
+  const selected = getVersionNameFilter()
+  if (selected && !names.includes(selected))
+    names.unshift(selected)
+  bundleNames.value = names
+}
+
 async function getDevicesID() {
   let req = supabase
     .from('channel_devices')
@@ -149,7 +214,8 @@ async function countDevices() {
       body: JSON.stringify({
         count: true,
         appId: props.appId,
-        versionName: props.versionName,
+        versionName: getVersionNameFilter(),
+        platform: getPlatformFilter(),
         devicesId: deviceIds.length > 0 ? deviceIds : undefined,
         search: searchTerm,
         order: getActiveOrder(columns.value),
@@ -235,6 +301,27 @@ async function refreshData() {
   }
 }
 
+let reloadTimer: ReturnType<typeof setTimeout> | undefined
+
+function cancelScheduledReload() {
+  if (!reloadTimer)
+    return
+  clearTimeout(reloadTimer)
+  reloadTimer = undefined
+}
+
+function debouncedReload() {
+  cancelScheduledReload()
+  reloadTimer = setTimeout(() => {
+    reloadTimer = undefined
+    reload()
+  }, 300)
+}
+
+onUnmounted(() => {
+  cancelScheduledReload()
+})
+
 async function fetchDevicesPage(cursor: string | undefined | null) {
   const ids = await resolveDeviceIds()
   const searchTerm = getSearchTerm()
@@ -252,7 +339,8 @@ async function fetchDevicesPage(cursor: string | undefined | null) {
     },
     body: JSON.stringify({
       appId: props.appId,
-      versionName: props.versionName,
+      versionName: getVersionNameFilter(),
+      platform: getPlatformFilter(),
       devicesId: ids.length ? ids : undefined,
       search: searchTerm,
       order: getActiveOrder(columns.value),
@@ -403,20 +491,105 @@ async function ensureVersionNames(devices: Device[]) {
       device.version_name = versionMap[id]
   })
 }
+
+onMounted(async () => {
+  await loadBundleNames()
+})
+
+watch(() => props.appId, async (appId) => {
+  cancelScheduledReload()
+  // Invalidate in-flight reloads from the previous app before awaiting.
+  activeLoadId.value += 1
+  skipFilterReload.value = true
+  selectedPlatform.value = ''
+  selectedVersionName.value = props.versionName ?? ''
+  await loadBundleNames()
+  if (appId !== props.appId)
+    return
+  skipFilterReload.value = false
+  await refreshData()
+})
+
+watch(() => props.versionName, (value) => {
+  cancelScheduledReload()
+  skipFilterReload.value = true
+  selectedVersionName.value = value ?? ''
+  skipFilterReload.value = false
+  debouncedReload()
+})
+
+watch([selectedPlatform, selectedVersionName], () => {
+  if (skipFilterReload.value)
+    return
+  debouncedReload()
+})
 </script>
 
 <template>
-  <div>
-    <DataTable
-      v-model:filters="filters" v-model:columns="columns" v-model:current-page="currentPage" v-model:search="search"
-      :total="total" :offset="offset" :element-list="elements"
-      filter-text="Filters"
-      :show-add="showAddButton"
-      :is-loading="isLoading"
-      :search-placeholder="t('search-by-device-id')"
-      @add="handleAddDevice"
-      @reload="reload()"
-      @reset="refreshData()"
-    />
-  </div>
+  <DataTable
+    v-model:filters="filters" v-model:columns="columns" v-model:current-page="currentPage" v-model:search="search"
+    :total="total" :offset="offset" :element-list="elements"
+    filter-text="Filters"
+    :extra-filter-count="activeExtraFilters"
+    :show-add="showAddButton"
+    :is-loading="isLoading"
+    :search-placeholder="t('search-by-device-id')"
+    @add="handleAddDevice"
+    @reload="reload()"
+    @reset="refreshData()"
+    @clear-extra-filters="clearExtraFilters"
+  >
+    <template #filter-extras>
+      <fieldset>
+        <legend class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+          {{ t('platform') }}
+        </legend>
+        <div
+          id="device-table-platform-filter"
+          class="grid grid-cols-2 gap-2 sm:grid-cols-4"
+          role="group"
+          :aria-label="t('platform')"
+          data-test="device-platform-filter"
+        >
+          <button
+            v-for="option in platformOptions"
+            :key="option.value || 'all'"
+            type="button"
+            class="min-h-11 rounded-md border px-2 text-sm font-medium transition-colors duration-150 focus:outline-hidden focus:ring-2 focus:ring-azure-500"
+            :class="selectedPlatform === option.value
+              ? 'border-azure-500 bg-azure-500/10 text-azure-700 dark:border-azure-400 dark:bg-azure-400/10 dark:text-azure-200'
+              : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:bg-slate-800'"
+            :aria-pressed="selectedPlatform === option.value"
+            :data-test="`device-platform-${option.value || 'all'}`"
+            @click="selectedPlatform = option.value"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </fieldset>
+      <div class="flex w-full flex-col gap-2">
+        <label for="device-table-bundle-filter" class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+          {{ t('bundle') }}
+        </label>
+        <input
+          id="device-table-bundle-filter"
+          v-model="selectedVersionName"
+          list="device-table-bundle-options"
+          type="text"
+          class="d-input d-input-bordered min-h-11 w-full border-slate-200 bg-white text-sm text-slate-900 dark:border-slate-700 dark:bg-slate-950 dark:text-white"
+          :placeholder="t('all-bundles')"
+          :aria-label="t('bundle')"
+          data-test="device-bundle-filter"
+          autocomplete="off"
+        >
+        <datalist id="device-table-bundle-options">
+          <option
+            v-for="name in bundleNames"
+            :key="name"
+            :value="name"
+          />
+        </datalist>
+      </div>
+    </template>
+  </DataTable>
 </template>
diff --git a/supabase/functions/_backend/private/devices.ts b/supabase/functions/_backend/private/devices.ts
index 84a941e1d0..c7f04a8a42 100644
--- a/supabase/functions/_backend/private/devices.ts
+++ b/supabase/functions/_backend/private/devices.ts
@@ -1,20 +1,22 @@
 import type { MiddlewareKeyVariables } from '../utils/hono.ts'
 import type { Order } from '../utils/types.ts'
-import { z } from 'zod'
 import { Hono } from 'hono/tiny'
-import { safeParseSchema } from '../utils/schema_validation.ts'
+import { z } from 'zod'
 import { parseBody, simpleError, useCors } from '../utils/hono.ts'
 import { middlewareAuth } from '../utils/hono_middleware.ts'
 import { cloudlog } from '../utils/logging.ts'
 import { appIdSchema, cursorSchema, deviceIdSchema, hasInvalidQueryLimitInput, hasUnsafeDevicesQueryText, queryLimitSchema, safeQueryTextSchema } from '../utils/privateAnalyticsValidation.ts'
 import { checkPermission } from '../utils/rbac.ts'
+import { safeParseSchema } from '../utils/schema_validation.ts'
 import { countDevices, countInstallSources, readDevices } from '../utils/stats.ts'
+import { Constants } from '../utils/supabase.types.ts'
 
 interface DataDevice {
   appId: string
   count?: boolean
   installSourceCounts?: boolean
   versionName?: string
+  platform?: typeof Constants.public.Enums.platform_os[number]
   devicesId?: string[]
   deviceIds?: string[] // TODO: remove when migration is done
   installSources?: string[]
@@ -31,11 +33,13 @@ const orderItemSchema = z.object({
   key: z.string().max(64),
   sortable: z.enum(['asc', 'desc']).optional(),
 })
+const platformSchema = z.enum(Constants.public.Enums.platform_os)
 const devicesBodySchema = z.object({
   appId: appIdSchema,
   count: z.boolean().optional(),
   installSourceCounts: z.boolean().optional(),
   versionName: safeQueryTextSchema.optional(),
+  platform: platformSchema.optional(),
   devicesId: z.array(deviceIdSchema).optional(),
   deviceIds: z.array(deviceIdSchema).optional(),
   installSources: z.array(safeQueryTextSchema).optional(),
@@ -70,11 +74,23 @@ app.post('/', middlewareAuth(), async (c) => {
   const devicesIds = body.devicesId ?? body.deviceIds ?? []
   if (body.installSourceCounts)
     return c.json({ installSources: await countInstallSources(c, body.appId) })
-  if (body.count)
-    return c.json({ count: await countDevices(c, body.appId, body.customIdMode ?? false, devicesIds, body.versionName, body.search?.trim()) })
+  if (body.count) {
+    return c.json({
+      count: await countDevices(
+        c,
+        body.appId,
+        body.customIdMode ?? false,
+        devicesIds,
+        body.versionName,
+        body.search?.trim(),
+        body.platform,
+      ),
+    })
+  }
   return c.json(await readDevices(c, {
     app_id: body.appId,
     version_name: body.versionName,
+    platform: body.platform,
     deviceIds: devicesIds,
     installSources: body.installSources,
     search: body.search,
diff --git a/supabase/functions/_backend/utils/cloudflare.ts b/supabase/functions/_backend/utils/cloudflare.ts
index f70baa7cf1..a59dcdf809 100644
--- a/supabase/functions/_backend/utils/cloudflare.ts
+++ b/supabase/functions/_backend/utils/cloudflare.ts
@@ -937,6 +937,14 @@ GROUP BY install_source`
   return counts
 }
 
+function platformOsToCFDouble(platform: Database['public']['Enums']['platform_os']): number {
+  if (platform === 'ios')
+    return 1
+  if (platform === 'electron')
+    return 2
+  return 0
+}
+
 export async function countDevicesCF(
   c: Context,
   app_id: string,
@@ -944,13 +952,11 @@ export async function countDevicesCF(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   // Use Analytics Engine DEVICE_INFO for counting devices
   const conditions = [`index1 = '${escapeSqlString(app_id)}'`]
 
-  if (customIdMode)
-    conditions.push(`blob5 != ''`)
-
   if (deviceIds.length) {
     if (deviceIds.length === 1)
       conditions.push(`blob1 = '${escapeSqlString(deviceIds[0])}'`)
@@ -958,20 +964,51 @@ export async function countDevicesCF(
       conditions.push(`blob1 IN (${deviceIds.map(id => `'${escapeSqlString(id)}'`).join(', ')})`)
   }
 
-  if (search) {
-    const searchLower = search.toLowerCase()
-    if (deviceIds.length) {
-      conditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0`)
+  // Match latest aggregated fields for current-state filtering (same as Supabase devices table).
+  // customIdMode must use aggregated custom_id so historical non-empty blob5 rows
+  // do not keep devices that later cleared their custom id.
+  if (versionName || platform || search || customIdMode) {
+    const outerConditions: string[] = []
+    if (customIdMode)
+      outerConditions.push(`custom_id != ''`)
+    if (versionName)
+      outerConditions.push(`version_name = '${escapeSqlString(versionName)}'`)
+    if (platform)
+      outerConditions.push(`platform = ${platformOsToCFDouble(platform)}`)
+    if (search) {
+      const searchLower = search.toLowerCase()
+      if (deviceIds.length) {
+        outerConditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`)
+      }
+      else {
+        outerConditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`)
+      }
     }
-    else {
-      // Search in device_id, custom_id, or version_name
-      conditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(blob1)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob2)) > 0)`)
+
+    const query = `SELECT COUNT() AS total
+FROM (
+  SELECT
+    argMax(blob1, timestamp) AS device_id,
+    argMax(blob2, timestamp) AS version_name,
+    argMax(blob5, timestamp) AS custom_id,
+    argMax(double1, timestamp) AS platform
+  FROM device_info
+  WHERE ${conditions.join(' AND ')}
+  GROUP BY blob1
+)
+WHERE ${outerConditions.join(' AND ')}`
+
+    cloudlog({ requestId: c.get('requestId'), message: 'countDevicesCF query', query })
+    try {
+      const res = await runQueryToCFA<{ total: number }>(c, query)
+      return res[0]?.total ?? 0
+    }
+    catch (e) {
+      cloudlogErr({ requestId: c.get('requestId'), message: 'Error reading device count from Analytics Engine', error: serializeError(e), query })
     }
+    return 0
   }
 
-  if (versionName)
-    conditions.push(`blob2 = '${escapeSqlString(versionName)}'`)
-
   const query = `SELECT COUNT(DISTINCT blob1) AS total
 FROM device_info
 WHERE ${conditions.join(' AND ')}`
@@ -1053,24 +1090,46 @@ function buildReadDevicesCFCustomIdsCondition(customIds: string[] | undefined) {
   return `custom_id IN (${customIdsList})`
 }
 
-function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null) {
-  const conditions = [
+function buildReadDevicesCFPlatformCondition(platform: ReadDevicesParams['platform']) {
+  if (!platform)
+    return ''
+  return `platform = ${platformOsToCFDouble(platform)}`
+}
+
+function buildReadDevicesCFVersionNameCondition(versionName: ReadDevicesParams['version_name']) {
+  if (!versionName)
+    return ''
+  return `version_name = '${escapeSqlString(versionName)}'`
+}
+
+function buildReadDevicesCFSearchCondition(search: string | undefined, deviceIds: string[] | undefined) {
+  if (!search)
+    return undefined
+  const searchLower = search.toLowerCase()
+  if (deviceIds?.length) {
+    return `(position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
+  }
+  return `(position('${escapeSqlString(searchLower)}' IN toLower(device_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(custom_id)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(version_name)) > 0)`
+}
+
+function buildReadDevicesCFOuterConditions(params: ReadDevicesParams, devicesOrder: DevicesOrderCF | null, customIdMode: boolean) {
+  return [
     buildReadDevicesCFCursorCondition(params.cursor, devicesOrder),
     buildReadDevicesCFUpdatedAtGtCondition(params.updated_at_gt),
     // Match the latest aggregated custom_id, not historical event rows.
+    customIdMode ? `custom_id != ''` : undefined,
     buildReadDevicesCFCustomIdsCondition(params.customIds),
-  ]
-  return conditions.filter(Boolean)
+    // Match the latest aggregated platform/version/search, not historical event rows.
+    buildReadDevicesCFPlatformCondition(params.platform),
+    buildReadDevicesCFVersionNameCondition(params.version_name),
+    buildReadDevicesCFSearchCondition(params.search, params.deviceIds),
+  ].filter((condition): condition is string => Boolean(condition))
 }
 
 export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode: boolean) {
   const limit = normalizeAnalyticsLimit(params.limit)
   const conditions: string[] = [`index1 = '${escapeSqlString(params.app_id)}'`]
 
-  if (customIdMode) {
-    conditions.push(`blob5 != ''`)
-  }
-
   if (params.deviceIds?.length) {
     if (params.deviceIds.length === 1) {
       conditions.push(`blob1 = '${escapeSqlString(params.deviceIds[0])}'`)
@@ -1081,27 +1140,13 @@ export function buildReadDevicesCFQuery(params: ReadDevicesParams, customIdMode:
     }
   }
 
-  if (params.search) {
-    const searchLower = params.search.toLowerCase()
-    if (params.deviceIds?.length) {
-      conditions.push(`position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0`)
-    }
-    else {
-      conditions.push(`(position('${escapeSqlString(searchLower)}' IN toLower(blob1)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob5)) > 0 OR position('${escapeSqlString(searchLower)}' IN toLower(blob2)) > 0)`)
-    }
-  }
-
-  if (params.version_name) {
-    conditions.push(`blob2 = '${escapeSqlString(params.version_name)}'`)
-  }
-
   if (params.updated_at_gt) {
     const safeUpdatedAtGt = escapeSqlString(formatDateCF(params.updated_at_gt))
     conditions.push(`timestamp > toDateTime('${safeUpdatedAtGt}')`)
   }
 
   const devicesOrder = getReadDevicesCFOrder(params)
-  const outerConditions = buildReadDevicesCFOuterConditions(params, devicesOrder)
+  const outerConditions = buildReadDevicesCFOuterConditions(params, devicesOrder, customIdMode)
   const includeCountryCode = !!params.deviceIds?.length
   const outerFilter = outerConditions.length ? `WHERE ${outerConditions.join(' AND ')}` : ''
   let orderBy = 'device_id ASC'
diff --git a/supabase/functions/_backend/utils/stats.ts b/supabase/functions/_backend/utils/stats.ts
index f0da28885a..9240565692 100644
--- a/supabase/functions/_backend/utils/stats.ts
+++ b/supabase/functions/_backend/utils/stats.ts
@@ -476,11 +476,12 @@ export function countDevices(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   const trimmedSearch = search?.trim()
   if (shouldUseAnalyticsEngine(c))
-    return countDevicesCF(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch)
-  return countDevicesSB(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch)
+    return countDevicesCF(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch, platform)
+  return countDevicesSB(c, app_id, customIdMode, deviceIds, versionName, trimmedSearch, platform)
 }
 
 export function countInstallSources(c: Context, app_id: string) {
diff --git a/supabase/functions/_backend/utils/supabase.ts b/supabase/functions/_backend/utils/supabase.ts
index 778101b01a..3bf49d8040 100644
--- a/supabase/functions/_backend/utils/supabase.ts
+++ b/supabase/functions/_backend/utils/supabase.ts
@@ -1532,6 +1532,9 @@ export async function readDevicesSB(c: Context, params: ReadDevicesParams, custo
   if (params.version_name)
     query = query.eq('version_name', params.version_name)
 
+  if (params.platform)
+    query = query.eq('platform', params.platform)
+
   if (params.installSources?.length)
     query = query.in('install_source', params.installSources)
 
@@ -1606,6 +1609,7 @@ export async function countDevicesSB(
   deviceIds: string[] = [],
   versionName?: string,
   search?: string,
+  platform?: Database['public']['Enums']['platform_os'],
 ) {
   let req = supabaseAdmin(c)
     .from('devices')
@@ -1636,6 +1640,9 @@ export async function countDevicesSB(
   if (versionName)
     req = req.eq('version_name', versionName)
 
+  if (platform)
+    req = req.eq('platform', platform)
+
   const { count, error } = await req
 
   if (error) {
diff --git a/supabase/functions/_backend/utils/types.ts b/supabase/functions/_backend/utils/types.ts
index 8858a8fd38..9c1f14dcdc 100644
--- a/supabase/functions/_backend/utils/types.ts
+++ b/supabase/functions/_backend/utils/types.ts
@@ -130,6 +130,8 @@ export interface NativeVersionUsage {
 export interface ReadDevicesParams {
   app_id: string
   version_name?: string | undefined
+  /** Exact platform filter (`ios` | `android` | `electron`) */
+  platform?: Database['public']['Enums']['platform_os']
   deviceIds?: string[]
   /** Exact custom_id match filter (case-sensitive, already trimmed by callers) */
   customIds?: string[]
diff --git a/tests/cloudflare-device-pagination.unit.test.ts b/tests/cloudflare-device-pagination.unit.test.ts
index 2716d7e407..47293c157b 100644
--- a/tests/cloudflare-device-pagination.unit.test.ts
+++ b/tests/cloudflare-device-pagination.unit.test.ts
@@ -77,7 +77,8 @@ describe('buildReadDevicesCFQuery', () => {
       limit: 1,
     }, true)
 
-    expect(query).toContain('blob5 != \'\'')
+    expect(query).toContain("custom_id != ''")
+    expect(query).not.toContain("blob5 != ''")
     expect(query).not.toContain('blob10')
   })
 
@@ -150,7 +151,39 @@ describe('buildReadDevicesCFQuery', () => {
     expect(outerFilterIndex).toBeGreaterThan(groupByIndex)
   })
 
+  it.concurrent('filters devices by latest aggregated platform and version after grouping', () => {
+    const query = buildReadDevicesCFQuery({
+      app_id: 'com.example.app',
+      platform: 'ios',
+      version_name: '1.2.3',
+      limit: 1,
+    }, false)
+
+    const groupByIndex = query.indexOf('GROUP BY blob1')
+    const outerWhereIndex = query.indexOf('WHERE platform = 1 AND version_name = \'1.2.3\'')
+    const altOuterWhereIndex = query.indexOf('WHERE version_name = \'1.2.3\' AND platform = 1')
+
+    expect(query).not.toContain(`blob2 = '1.2.3'`)
+    expect(Math.max(outerWhereIndex, altOuterWhereIndex)).toBeGreaterThan(groupByIndex)
+  })
+
+  it.concurrent('applies search against latest aggregated device fields after grouping', () => {
+    const query = buildReadDevicesCFQuery({
+      app_id: 'com.example.app',
+      platform: 'android',
+      search: 'abc',
+      limit: 1,
+    }, false)
+
+    const groupByIndex = query.indexOf('GROUP BY blob1')
+    const searchIndex = query.indexOf(`position('abc' IN toLower(device_id))`)
+
+    expect(query).not.toContain(`toLower(blob1)`)
+    expect(searchIndex).toBeGreaterThan(groupByIndex)
+    expect(query.indexOf('platform = 0')).toBeGreaterThan(groupByIndex)
+  })
 })
+
 describe('countDevicesCF', () => {
   it('does not read install source blob on default device counts', async () => {
     let query = ''
@@ -309,6 +342,21 @@ describe('readDevicesSB', () => {
     expect(query.in).toHaveBeenCalledWith('install_source', ['app_store', 'testflight'])
   })
 
+  it('applies platform and version_name filters together', async () => {
+    const { client, query } = createReadDevicesQueryMock()
+    vi.mocked(createClient).mockReturnValue(client as unknown as ReturnType<typeof createClient>)
+
+    await readDevicesSB(createContextMock() as unknown as Context, {
+      app_id: 'com.example.app',
+      platform: 'android',
+      version_name: '2.0.0',
+      limit: 1,
+    }, false)
+
+    expect(query.eq).toHaveBeenCalledWith('platform', 'android')
+    expect(query.eq).toHaveBeenCalledWith('version_name', '2.0.0')
+  })
+
   it('filters devices with updated_at greater than the provided timestamp', async () => {
     const { client, query } = createReadDevicesQueryMock()
     vi.mocked(createClient).mockReturnValue(client as unknown as ReturnType<typeof createClient>)
diff --git a/tests/private-analytics-validation.unit.test.ts b/tests/private-analytics-validation.unit.test.ts
index c471c7d0c3..bbe15725b5 100644
--- a/tests/private-analytics-validation.unit.test.ts
+++ b/tests/private-analytics-validation.unit.test.ts
@@ -119,7 +119,49 @@ describe('private analytics route validation', () => {
     ['non-numeric limits', { limit: '1 UNION SELECT 1' }],
     ['decimal limits', { limit: 1.5 }],
     ['boolean limits', { limit: true }],
+    ['invalid platform', { platform: 'windows' }],
   ])('rejects %s on /private/devices', async (_label, body) => {
     await expectRejectedDevicesBody(body)
   })
+
+  it('accepts platform and versionName filters on /private/devices', async () => {
+    readDevicesMock.mockResolvedValue({ data: [], nextCursor: undefined, hasMore: false })
+
+    const response = await devicesApp.request(postJson('http://local/', {
+      appId: 'com.example.app',
+      platform: 'ios',
+      versionName: '1.2.3',
+    }))
+
+    expect(response.status).toBe(200)
+    expect(checkPermissionMock).toHaveBeenCalled()
+    expect(readDevicesMock).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+      app_id: 'com.example.app',
+      platform: 'ios',
+      version_name: '1.2.3',
+    }), false)
+  })
+
+  it('passes platform to countDevices on /private/devices', async () => {
+    countDevicesMock.mockResolvedValue(7)
+
+    const response = await devicesApp.request(postJson('http://local/', {
+      appId: 'com.example.app',
+      count: true,
+      platform: 'android',
+      versionName: '2.0.0',
+    }))
+
+    expect(response.status).toBe(200)
+    expect(await response.json()).toEqual({ count: 7 })
+    expect(countDevicesMock).toHaveBeenCalledWith(
+      expect.anything(),
+      'com.example.app',
+      false,
+      [],
+      '2.0.0',
+      undefined,
+      'android',
+    )
+  })
 })