diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3ce690c04..54ab096a5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -189,6 +189,18 @@ import { hasProtocol } from 'ufo'
 | Constants        | SCREAMING_SNAKE_CASE     | `NPM_REGISTRY`, `ALLOWED_TAGS` |
 | Types/Interfaces | PascalCase               | `NpmSearchResponse`            |
 
+> [!TIP]
+> Exports in `app/composables/`, `app/utils/`, and `server/utils/` are auto-imported by Nuxt. To prevent [knip](https://knip.dev/) from flagging them as unused, add a `@public` JSDoc annotation:
+>
+> ```typescript
+> /**
+>  * @public
+>  */
+> export function myAutoImportedFunction() {
+>   // ...
+> }
+> ```
+
 ### Vue components
 
 - Use Composition API with `<script setup lang="ts">`
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
new file mode 100644
index 000000000..132eb1530
--- /dev/null
+++ b/app/components/ColumnPicker.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { ColumnConfig, ColumnId } from '#shared/types/preferences'
+
+const props = defineProps<{
+  columns: ColumnConfig[]
+}>()
+
+const emit = defineEmits<{
+  toggle: [columnId: ColumnId]
+  reset: []
+}>()
+
+const isOpen = ref(false)
+const buttonRef = useTemplateRef('buttonRef')
+const menuRef = useTemplateRef('menuRef')
+const menuId = useId()
+
+// Close on click outside (check both button and menu)
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const isOutsideButton = buttonRef.value && !buttonRef.value.contains(target)
+  const isOutsideMenu = !menuRef.value || !menuRef.value.contains(target)
+  if (isOutsideButton && isOutsideMenu) {
+    isOpen.value = false
+  }
+}
+
+// Close on Escape key
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+    buttonRef.value?.focus()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// Columns that can be toggled (name is always visible)
+const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
+
+// Map column IDs to i18n keys
+const columnLabelKey: Record<string, string> = {
+  name: 'filters.columns.name',
+  version: 'filters.columns.version',
+  description: 'filters.columns.description',
+  downloads: 'filters.columns.downloads',
+  updated: 'filters.columns.updated',
+  maintainers: 'filters.columns.maintainers',
+  keywords: 'filters.columns.keywords',
+  qualityScore: 'filters.columns.quality_score',
+  popularityScore: 'filters.columns.popularity_score',
+  maintenanceScore: 'filters.columns.maintenance_score',
+  combinedScore: 'filters.columns.combined_score',
+  security: 'filters.columns.security',
+}
+
+function getColumnLabel(id: string): string {
+  const key = columnLabelKey[id]
+  return key ? $t(key) : id
+}
+
+function handleReset() {
+  emit('reset')
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      ref="buttonRef"
+      type="button"
+      class="btn-ghost inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+      :aria-controls="menuId"
+      @click.stop="isOpen = !isOpen"
+    >
+      <span class="i-carbon-column w-4 h-4" aria-hidden="true" />
+      <span class="font-mono text-sm">{{ $t('filters.columns.title') }}</span>
+    </button>
+
+    <Transition name="dropdown">
+      <div
+        v-if="isOpen"
+        ref="menuRef"
+        :id="menuId"
+        class="absolute right-0 mt-2 w-56 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        role="group"
+        :aria-label="$t('filters.columns.show')"
+      >
+        <div class="py-1">
+          <div
+            class="px-3 py-2 text-xs font-mono text-fg-subtle uppercase tracking-wider border-b border-border"
+            aria-hidden="true"
+          >
+            {{ $t('filters.columns.show') }}
+          </div>
+
+          <div class="py-1 max-h-64 overflow-y-auto">
+            <label
+              v-for="column in toggleableColumns"
+              :key="column.id"
+              class="flex items-center px-3 py-2 transition-colors duration-200"
+              :class="
+                column.disabled
+                  ? 'opacity-50 cursor-not-allowed'
+                  : 'hover:bg-bg-muted cursor-pointer'
+              "
+            >
+              <input
+                type="checkbox"
+                :checked="column.visible"
+                :disabled="column.disabled"
+                :aria-describedby="column.disabled ? `${column.id}-disabled-reason` : undefined"
+                class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
+                @change="!column.disabled && emit('toggle', column.id)"
+              />
+              <span class="ml-2 text-sm text-fg-muted font-mono flex-1">
+                {{ getColumnLabel(column.id) }}
+              </span>
+              <span
+                v-if="column.disabled"
+                :id="`${column.id}-disabled-reason`"
+                class="text-xs text-fg-subtle italic"
+              >
+                {{ $t('filters.columns.coming_soon') }}
+              </span>
+            </label>
+          </div>
+
+          <div class="border-t border-border py-1">
+            <button
+              type="button"
+              class="w-full px-3 py-2 text-left text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
+              @click="handleReset"
+            >
+              {{ $t('filters.columns.reset') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.15s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>
diff --git a/app/components/FilterChips.vue b/app/components/FilterChips.vue
new file mode 100644
index 000000000..ff1383038
--- /dev/null
+++ b/app/components/FilterChips.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { FilterChip } from '#shared/types/preferences'
+
+defineProps<{
+  chips: FilterChip[]
+}>()
+
+const emit = defineEmits<{
+  remove: [chip: FilterChip]
+  clearAll: []
+}>()
+</script>
+
+<template>
+  <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
+    <TransitionGroup name="chip">
+      <span v-for="chip in chips" :key="chip.id" class="tag gap-1">
+        <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
+        <span class="max-w-32 truncate">{{
+          Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
+        }}</span>
+        <button
+          type="button"
+          class="ml-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :aria-label="$t('filters.remove_filter', { label: chip.label })"
+          @click="emit('remove', chip)"
+        >
+          <span class="i-carbon-close w-3 h-3" aria-hidden="true" />
+        </button>
+      </span>
+    </TransitionGroup>
+
+    <button
+      v-if="chips.length > 1"
+      type="button"
+      class="text-sm text-fg-subtle hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
+      @click="emit('clearAll')"
+    >
+      {{ $t('filters.clear_all') }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.chip-enter-active,
+.chip-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.chip-enter-from,
+.chip-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.chip-move {
+  transition: transform 0.2s ease;
+}
+</style>
diff --git a/app/components/FilterPanel.vue b/app/components/FilterPanel.vue
new file mode 100644
index 000000000..8b2857125
--- /dev/null
+++ b/app/components/FilterPanel.vue
@@ -0,0 +1,364 @@
+<script setup lang="ts">
+import type {
+  DownloadRange,
+  SearchScope,
+  SecurityFilter,
+  StructuredFilters,
+  UpdatedWithin,
+} from '#shared/types/preferences'
+import {
+  DOWNLOAD_RANGES,
+  SEARCH_SCOPE_OPTIONS,
+  SECURITY_FILTER_OPTIONS,
+  UPDATED_WITHIN_OPTIONS,
+} from '#shared/types/preferences'
+
+const props = defineProps<{
+  filters: StructuredFilters
+  availableKeywords?: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:text': [value: string]
+  'update:searchScope': [value: SearchScope]
+  'update:downloadRange': [value: DownloadRange]
+  'update:security': [value: SecurityFilter]
+  'update:updatedWithin': [value: UpdatedWithin]
+  'toggleKeyword': [keyword: string]
+}>()
+
+const isExpanded = ref(false)
+const showAllKeywords = ref(false)
+
+const displayedKeywords = computed(() => {
+  const keywords = props.availableKeywords ?? []
+  return showAllKeywords.value ? keywords : keywords.slice(0, 20)
+})
+
+const searchPlaceholder = computed(() => {
+  switch (props.filters.searchScope) {
+    case 'name':
+      return $t('filters.search_placeholder_name')
+    case 'description':
+      return $t('filters.search_placeholder_description')
+    case 'keywords':
+      return $t('filters.search_placeholder_keywords')
+    case 'all':
+      return $t('filters.search_placeholder_all')
+    default:
+      return $t('filters.search_placeholder_name')
+  }
+})
+
+const hasMoreKeywords = computed(() => {
+  return !showAllKeywords.value && (props.availableKeywords?.length ?? 0) > 20
+})
+
+// i18n mappings for filter options
+const scopeLabelKeys = {
+  name: 'filters.scope_name',
+  description: 'filters.scope_description',
+  keywords: 'filters.scope_keywords',
+  all: 'filters.scope_all',
+} as const
+
+const scopeDescriptionKeys = {
+  name: 'filters.scope_name_description',
+  description: 'filters.scope_description_description',
+  keywords: 'filters.scope_keywords_description',
+  all: 'filters.scope_all_description',
+} as const
+
+const downloadRangeLabelKeys = {
+  'any': 'filters.download_range.any',
+  'lt100': 'filters.download_range.lt100',
+  '100-1k': 'filters.download_range.100_1k',
+  '1k-10k': 'filters.download_range.1k_10k',
+  '10k-100k': 'filters.download_range.10k_100k',
+  'gt100k': 'filters.download_range.gt100k',
+} as const
+
+const updatedWithinLabelKeys = {
+  any: 'filters.updated.any',
+  week: 'filters.updated.week',
+  month: 'filters.updated.month',
+  quarter: 'filters.updated.quarter',
+  year: 'filters.updated.year',
+} as const
+
+const securityLabelKeys = {
+  all: 'filters.security_options.all',
+  secure: 'filters.security_options.secure',
+  warnings: 'filters.security_options.insecure',
+} as const
+
+// Type-safe accessor functions
+function getScopeLabelKey(value: SearchScope): string {
+  return scopeLabelKeys[value]
+}
+
+function getScopeDescriptionKey(value: SearchScope): string {
+  return scopeDescriptionKeys[value]
+}
+
+function getDownloadRangeLabelKey(value: DownloadRange): string {
+  return downloadRangeLabelKeys[value]
+}
+
+function getUpdatedWithinLabelKey(value: UpdatedWithin): string {
+  return updatedWithinLabelKeys[value]
+}
+
+function getSecurityLabelKey(value: SecurityFilter): string {
+  return securityLabelKeys[value]
+}
+
+function handleTextInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:text', target.value)
+}
+
+// Compact summary of active filters for collapsed header using operator syntax
+const filterSummary = computed(() => {
+  const parts: string[] = []
+
+  // Text search with operator format
+  if (props.filters.text) {
+    if (props.filters.searchScope === 'all') {
+      // Show raw text (may already contain operators)
+      parts.push(props.filters.text)
+    } else {
+      // Convert scope to operator format
+      const operatorMap: Record<string, string> = {
+        name: 'name',
+        description: 'desc',
+        keywords: 'kw',
+      }
+      const op = operatorMap[props.filters.searchScope] ?? 'name'
+      parts.push(`${op}:${props.filters.text}`)
+    }
+  }
+
+  // Keywords from filter (not from text operators)
+  if (props.filters.keywords.length > 0) {
+    parts.push(`kw:${props.filters.keywords.join(',')}`)
+  }
+
+  // Download range (use compact value, not human label)
+  if (props.filters.downloadRange !== 'any') {
+    parts.push(`dl:${props.filters.downloadRange}`)
+  }
+
+  // Updated within (use compact value, not human label)
+  if (props.filters.updatedWithin !== 'any') {
+    parts.push(`updated:${props.filters.updatedWithin}`)
+  }
+
+  // Security (when enabled)
+  if (props.filters.security !== 'all') {
+    const label = props.filters.security === 'secure' ? 'secure' : 'warnings'
+    parts.push(`security:${label}`)
+  }
+
+  return parts.length > 0 ? parts.join(' ') : null
+})
+
+const hasActiveFilters = computed(() => !!filterSummary.value)
+</script>
+
+<template>
+  <div class="border border-border rounded-lg bg-bg-subtle">
+    <!-- Collapsed header -->
+    <button
+      type="button"
+      class="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
+      :aria-expanded="isExpanded"
+      @click="isExpanded = !isExpanded"
+    >
+      <span class="flex items-center gap-2 text-sm font-mono text-fg shrink-0">
+        <span class="i-carbon-filter w-4 h-4" aria-hidden="true" />
+        {{ $t('filters.title') }}
+      </span>
+      <span v-if="!isExpanded && hasActiveFilters" class="text-xs font-mono text-fg-muted truncate">
+        {{ filterSummary }}
+      </span>
+      <span
+        class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ml-auto"
+        :class="{ 'rotate-180': isExpanded }"
+        aria-hidden="true"
+      />
+    </button>
+
+    <!-- Expanded content -->
+    <Transition name="expand">
+      <div v-if="isExpanded" class="px-4 pb-5 border-t border-border">
+        <!-- Text search -->
+        <div class="pt-4">
+          <div class="flex items-center gap-3 mb-1">
+            <label for="filter-search" class="text-sm font-mono text-fg-muted">
+              {{ $t('filters.search') }}
+            </label>
+            <!-- Search scope toggle -->
+            <div
+              class="inline-flex rounded-md border border-border p-0.5 bg-bg"
+              role="group"
+              :aria-label="$t('filters.search_scope')"
+            >
+              <button
+                v-for="option in SEARCH_SCOPE_OPTIONS"
+                :key="option.value"
+                type="button"
+                class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+                :class="
+                  filters.searchScope === option.value
+                    ? 'bg-bg-muted text-fg'
+                    : 'text-fg-muted hover:text-fg'
+                "
+                :aria-pressed="filters.searchScope === option.value"
+                :title="$t(getScopeDescriptionKey(option.value))"
+                @click="emit('update:searchScope', option.value)"
+              >
+                {{ $t(getScopeLabelKey(option.value)) }}
+              </button>
+            </div>
+          </div>
+          <input
+            id="filter-search"
+            type="text"
+            :value="filters.text"
+            :placeholder="searchPlaceholder"
+            autocomplete="off"
+            class="input-base"
+            @input="handleTextInput"
+          />
+        </div>
+
+        <!-- Download range -->
+        <fieldset class="border-0 p-0 m-0 mt-4">
+          <legend class="block text-sm font-mono text-fg-muted mb-1">
+            {{ $t('filters.weekly_downloads') }}
+          </legend>
+          <div
+            class="flex flex-wrap gap-2"
+            role="radiogroup"
+            :aria-label="$t('filters.weekly_downloads')"
+          >
+            <button
+              v-for="range in DOWNLOAD_RANGES"
+              :key="range.value"
+              type="button"
+              role="radio"
+              :aria-checked="filters.downloadRange === range.value"
+              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              :class="filters.downloadRange === range.value ? 'bg-fg text-bg border-fg' : ''"
+              @click="emit('update:downloadRange', range.value)"
+            >
+              {{ $t(getDownloadRangeLabelKey(range.value)) }}
+            </button>
+          </div>
+        </fieldset>
+
+        <!-- Updated within -->
+        <fieldset class="border-0 p-0 m-0 mt-4">
+          <legend class="block text-sm font-mono text-fg-muted mb-1">
+            {{ $t('filters.updated_within') }}
+          </legend>
+          <div
+            class="flex flex-wrap gap-2"
+            role="radiogroup"
+            :aria-label="$t('filters.updated_within')"
+          >
+            <button
+              v-for="option in UPDATED_WITHIN_OPTIONS"
+              :key="option.value"
+              type="button"
+              role="radio"
+              :aria-checked="filters.updatedWithin === option.value"
+              class="tag transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              :class="filters.updatedWithin === option.value ? 'bg-fg text-bg border-fg' : ''"
+              @click="emit('update:updatedWithin', option.value)"
+            >
+              {{ $t(getUpdatedWithinLabelKey(option.value)) }}
+            </button>
+          </div>
+        </fieldset>
+
+        <!-- Security -->
+        <fieldset class="border-0 p-0 m-0 mt-4">
+          <legend class="flex items-center gap-2 text-sm font-mono text-fg-muted mb-1">
+            {{ $t('filters.security') }}
+            <span class="text-xs px-1.5 py-0.5 rounded bg-bg-muted text-fg-subtle">
+              {{ $t('filters.columns.coming_soon') }}
+            </span>
+          </legend>
+          <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
+            <button
+              v-for="option in SECURITY_FILTER_OPTIONS"
+              :key="option.value"
+              type="button"
+              role="radio"
+              disabled
+              :aria-checked="filters.security === option.value"
+              class="tag transition-colors duration-200 opacity-50 cursor-not-allowed focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              :class="filters.security === option.value ? 'bg-fg text-bg border-fg' : ''"
+            >
+              {{ $t(getSecurityLabelKey(option.value)) }}
+            </button>
+          </div>
+        </fieldset>
+
+        <!-- Keywords -->
+        <fieldset v-if="displayedKeywords.length > 0" class="border-0 p-0 m-0 mt-4">
+          <legend class="block text-sm font-mono text-fg-muted mb-1">
+            {{ $t('filters.keywords') }}
+          </legend>
+          <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
+            <button
+              v-for="keyword in displayedKeywords"
+              :key="keyword"
+              type="button"
+              :aria-pressed="filters.keywords.includes(keyword)"
+              class="tag text-xs transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              :class="filters.keywords.includes(keyword) ? 'bg-fg text-bg border-fg' : ''"
+              @click="emit('toggleKeyword', keyword)"
+            >
+              {{ keyword }}
+            </button>
+            <button
+              v-if="hasMoreKeywords"
+              type="button"
+              class="text-xs text-fg-subtle self-center font-mono hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+              @click="showAllKeywords = true"
+            >
+              {{ $t('filters.more_keywords', { count: (availableKeywords?.length ?? 0) - 20 }) }}
+            </button>
+          </div>
+        </fieldset>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition:
+    opacity 0.2s ease,
+    max-height 0.2s ease,
+    padding 0.2s ease;
+  overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+  max-height: 500px;
+}
+</style>
diff --git a/app/components/PackageList.vue b/app/components/PackageList.vue
index 4a5c221dd..ba2614ea6 100644
--- a/app/components/PackageList.vue
+++ b/app/components/PackageList.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import type { NpmSearchResult } from '#shared/types'
 import type { WindowVirtualizerHandle } from '~/composables/useVirtualInfiniteScroll'
+import type {
+  ColumnConfig,
+  PageSize,
+  PaginationMode,
+  SortOption,
+  ViewMode,
+} from '#shared/types/preferences'
+import { DEFAULT_COLUMNS } from '#shared/types/preferences'
 import { WindowVirtualizer } from 'virtua/vue'
 
 /** Number of items to render statically during SSR */
@@ -18,39 +26,79 @@ const props = defineProps<{
   /** Whether currently loading more items */
   isLoading?: boolean
   /** Page size for tracking current page */
-  pageSize?: number
+  pageSize?: PageSize
   /** Initial page to scroll to (1-indexed) */
   initialPage?: number
   /** Selected result index (for keyboard navigation) */
   selectedIndex?: number
   /** Search query for highlighting exact matches */
   searchQuery?: string
+  /** View mode: cards or table */
+  viewMode?: ViewMode
+  /** Column configuration for table view */
+  columns?: ColumnConfig[]
+  /** Pagination mode: infinite or paginated */
+  paginationMode?: PaginationMode
+  /** Current page (1-indexed) for paginated mode */
+  currentPage?: number
 }>()
 
 const emit = defineEmits<{
   /** Emitted when scrolled near the bottom and more items should be loaded */
-  loadMore: []
+  'loadMore': []
   /** Emitted when the visible page changes */
-  pageChange: [page: number]
+  'pageChange': [page: number]
   /** Emitted when a result is hovered/focused */
-  select: [index: number]
+  'select': [index: number]
+  /** Emitted when sort option changes (table view) */
+  'update:sortOption': [option: SortOption]
+  /** Emitted when a keyword is clicked */
+  'clickKeyword': [keyword: string]
 }>()
 
 // Reference to WindowVirtualizer for infinite scroll detection
 const listRef = useTemplateRef<WindowVirtualizerHandle>('listRef')
 
+/** Sort option for table header sorting */
+const sortOption = defineModel<SortOption>('sortOption')
+
+// View mode and columns
+const viewMode = computed(() => props.viewMode ?? 'cards')
+const columns = computed(() => props.columns ?? DEFAULT_COLUMNS)
+// Table view forces pagination mode (no virtualization for tables)
+const paginationMode = computed(() =>
+  viewMode.value === 'table' ? 'paginated' : (props.paginationMode ?? 'infinite'),
+)
+const currentPage = computed(() => props.currentPage ?? 1)
+const pageSize = computed(() => props.pageSize ?? 25)
+// Numeric page size for virtual scroll and arithmetic (when 'all' is selected, use 25 as default)
+const numericPageSize = computed(() => (pageSize.value === 'all' ? 25 : pageSize.value))
+
+// Compute paginated results for paginated mode
+const displayedResults = computed(() => {
+  if (paginationMode.value === 'infinite') {
+    return props.results
+  }
+  // 'all' page size means show everything (YOLO)
+  if (pageSize.value === 'all') {
+    return props.results
+  }
+  const start = (currentPage.value - 1) * numericPageSize.value
+  const end = start + numericPageSize.value
+  return props.results.slice(start, end)
+})
+
 // Set up infinite scroll if hasMore is provided
 const hasMore = computed(() => props.hasMore ?? false)
 const isLoading = computed(() => props.isLoading ?? false)
 const itemCount = computed(() => props.results.length)
-const pageSize = computed(() => props.pageSize ?? 20)
 
 const { handleScroll, scrollToPage } = useVirtualInfiniteScroll({
   listRef,
   itemCount,
   hasMore,
   isLoading,
-  pageSize: pageSize.value,
+  pageSize: numericPageSize,
   threshold: 5,
   onLoadMore: () => emit('loadMore'),
   onPageChange: page => emit('pageChange', page),
@@ -99,55 +147,118 @@ defineExpose({
 
 <template>
   <div>
-    <!-- SSR: Render static list for first page, replaced by virtual list on client -->
-    <ClientOnly>
-      <WindowVirtualizer
-        ref="listRef"
-        :data="results"
-        :item-size="140"
-        as="ol"
-        item="li"
-        class="list-none m-0 p-0"
-        @scroll="handleScroll"
-      >
-        <template #default="{ item, index }">
-          <div class="pb-4">
-            <PackageCard
-              :result="item as NpmSearchResult"
-              :heading-level="headingLevel"
-              :show-publisher="showPublisher"
-              :selected="index === (selectedIndex ?? -1)"
-              :index="index"
-              :search-query="searchQuery"
-              class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
-              :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
-              @focus="emit('select', $event)"
-            />
-          </div>
-        </template>
-      </WindowVirtualizer>
+    <!-- Table View -->
+    <template v-if="viewMode === 'table'">
+      <PackageTable
+        :results="displayedResults"
+        :columns="columns"
+        v-model:sort-option="sortOption"
+        :selected-index="selectedIndex"
+        :is-loading="isLoading"
+        @select="emit('select', $event)"
+        @click-keyword="emit('clickKeyword', $event)"
+      />
+    </template>
 
-      <!-- SSR fallback: static list of first page results -->
-      <template #fallback>
-        <ol class="list-none m-0 p-0">
-          <li v-for="(item, index) in results.slice(0, SSR_COUNT)" :key="item.package.name">
+    <!-- Card View with Infinite Scroll -->
+    <template v-else-if="paginationMode === 'infinite'">
+      <!-- SSR: Render static list for first page, replaced by virtual list on client -->
+      <ClientOnly>
+        <WindowVirtualizer
+          ref="listRef"
+          :data="results"
+          :item-size="140"
+          as="ol"
+          item="li"
+          class="list-none m-0 p-0"
+          @scroll="handleScroll"
+        >
+          <template #default="{ item, index }">
             <div class="pb-4">
               <PackageCard
-                :result="item"
+                :result="item as NpmSearchResult"
                 :heading-level="headingLevel"
                 :show-publisher="showPublisher"
                 :selected="index === (selectedIndex ?? -1)"
                 :index="index"
                 :search-query="searchQuery"
+                class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+                :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+                @focus="emit('select', $event)"
               />
             </div>
-          </li>
-        </ol>
-      </template>
-    </ClientOnly>
+          </template>
+        </WindowVirtualizer>
+
+        <!-- SSR fallback: static list of first page results -->
+        <template #fallback>
+          <ol class="list-none m-0 p-0">
+            <li v-for="(item, index) in results.slice(0, SSR_COUNT)" :key="item.package.name">
+              <div class="pb-4">
+                <PackageCard
+                  :result="item"
+                  :heading-level="headingLevel"
+                  :show-publisher="showPublisher"
+                  :selected="index === (selectedIndex ?? -1)"
+                  :index="index"
+                  :search-query="searchQuery"
+                />
+              </div>
+            </li>
+          </ol>
+        </template>
+      </ClientOnly>
+    </template>
+
+    <!-- Card View with Pagination -->
+    <template v-else>
+      <!-- Loading state when fetching page data -->
+      <div
+        v-if="isLoading && displayedResults.length === 0"
+        class="py-12 flex items-center justify-center"
+      >
+        <div class="flex items-center gap-3 text-fg-muted font-mono text-sm">
+          <span
+            class="w-5 h-5 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
+          />
+          {{ $t('common.loading') }}
+        </div>
+      </div>
+      <ol v-else class="list-none m-0 p-0">
+        <li v-for="(item, index) in displayedResults" :key="item.package.name" class="pb-4">
+          <PackageCard
+            :result="item"
+            :heading-level="headingLevel"
+            :show-publisher="showPublisher"
+            :selected="index === (selectedIndex ?? -1)"
+            :index="index"
+            :search-query="searchQuery"
+            class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+            :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+            @focus="emit('select', $event)"
+          />
+        </li>
+      </ol>
+    </template>
 
-    <!-- Loading indicator -->
-    <div v-if="isLoading" class="py-4 flex items-center justify-center">
+    <!-- Initial loading state (card view only - table has its own skeleton) -->
+    <div
+      v-if="isLoading && results.length === 0 && viewMode !== 'table'"
+      class="py-12 flex items-center justify-center"
+    >
+      <div class="flex items-center gap-3 text-fg-muted font-mono text-sm">
+        <span
+          class="w-5 h-5 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
+        />
+        {{ $t('common.loading') }}
+      </div>
+    </div>
+
+    <!-- Loading more indicator (infinite scroll mode only) -->
+    <div
+      v-else-if="isLoading && paginationMode === 'infinite'"
+      class="py-4 flex items-center justify-center"
+    >
       <div class="flex items-center gap-3 text-fg-muted font-mono text-sm">
         <span
           class="w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
@@ -156,12 +267,20 @@ defineExpose({
       </div>
     </div>
 
-    <!-- End of results -->
+    <!-- End of results (infinite scroll mode only) -->
     <p
-      v-else-if="!hasMore && results.length > 0"
+      v-else-if="!hasMore && results.length > 0 && paginationMode === 'infinite'"
       class="py-4 text-center text-fg-subtle font-mono text-sm"
     >
       {{ $t('common.end_of_results') }}
     </p>
+
+    <!-- Empty state (card view only - table has its own) -->
+    <p
+      v-if="results.length === 0 && !isLoading && viewMode !== 'table'"
+      class="py-12 text-center text-fg-subtle font-mono text-sm"
+    >
+      {{ $t('filters.table.no_packages') }}
+    </p>
   </div>
 </template>
diff --git a/app/components/PackageListToolbar.vue b/app/components/PackageListToolbar.vue
new file mode 100644
index 000000000..b02485370
--- /dev/null
+++ b/app/components/PackageListToolbar.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type {
+  ColumnConfig,
+  ColumnId,
+  DownloadRange,
+  FilterChip,
+  PageSize,
+  PaginationMode,
+  SearchScope,
+  SecurityFilter,
+  SortKey,
+  SortOption,
+  StructuredFilters,
+  UpdatedWithin,
+  ViewMode,
+} from '#shared/types/preferences'
+import {
+  buildSortOption,
+  parseSortOption,
+  SORT_KEYS,
+  toggleDirection,
+} from '#shared/types/preferences'
+
+const props = defineProps<{
+  filters: StructuredFilters
+  columns: ColumnConfig[]
+  totalCount: number
+  filteredCount: number
+  availableKeywords?: string[]
+  activeFilters: FilterChip[]
+  /** When true, shows search-specific UI (relevance sort, no filters) */
+  searchContext?: boolean
+}>()
+
+const sortOption = defineModel<SortOption>('sortOption', { required: true })
+const viewMode = defineModel<ViewMode>('viewMode', { required: true })
+const paginationMode = defineModel<PaginationMode>('paginationMode', { required: true })
+const pageSize = defineModel<PageSize>('pageSize', { required: true })
+
+const emit = defineEmits<{
+  'toggleColumn': [columnId: ColumnId]
+  'resetColumns': []
+  'clearFilter': [chip: FilterChip]
+  'clearAllFilters': []
+  'update:text': [value: string]
+  'update:searchScope': [value: SearchScope]
+  'update:downloadRange': [value: DownloadRange]
+  'update:security': [value: SecurityFilter]
+  'update:updatedWithin': [value: UpdatedWithin]
+  'toggleKeyword': [keyword: string]
+}>()
+
+const showingFiltered = computed(() => props.filteredCount !== props.totalCount)
+
+// Parse current sort option into key and direction
+const currentSort = computed(() => parseSortOption(sortOption.value))
+
+// Get available sort keys based on context
+const availableSortKeys = computed(() => {
+  if (props.searchContext) {
+    // In search context: show relevance (enabled) and others (disabled)
+    return SORT_KEYS.filter(k => !k.searchOnly || k.key === 'relevance').map(k =>
+      Object.assign({}, k, {
+        disabled: k.key !== 'relevance',
+        disabledReason: k.key !== 'relevance' ? 'Coming soon' : undefined,
+      }),
+    )
+  }
+  // In org/user context: hide search-only sorts
+  return SORT_KEYS.filter(k => !k.searchOnly)
+})
+
+// Handle sort key change from dropdown
+function handleSortKeyChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const newKey = target.value as SortKey
+  const config = SORT_KEYS.find(k => k.key === newKey)
+  const direction = config?.defaultDirection ?? 'desc'
+  sortOption.value = buildSortOption(newKey, direction)
+}
+
+// Toggle sort direction
+function handleToggleDirection() {
+  const { key, direction } = currentSort.value
+  sortOption.value = buildSortOption(key, toggleDirection(direction))
+}
+
+// Map sort key to i18n key
+const sortKeyLabelKeys: Record<SortKey, string> = {
+  'relevance': 'filters.sort.relevance',
+  'downloads-week': 'filters.sort.downloads_week',
+  'downloads-day': 'filters.sort.downloads_day',
+  'downloads-month': 'filters.sort.downloads_month',
+  'downloads-year': 'filters.sort.downloads_year',
+  'updated': 'filters.sort.updated',
+  'name': 'filters.sort.name',
+  'quality': 'filters.sort.quality',
+  'popularity': 'filters.sort.popularity',
+  'maintenance': 'filters.sort.maintenance',
+  'score': 'filters.sort.score',
+}
+
+function getSortKeyLabelKey(key: SortKey): string {
+  return sortKeyLabelKeys[key]
+}
+</script>
+
+<template>
+  <div class="space-y-3 mb-6">
+    <!-- Main toolbar row -->
+    <div class="flex flex-col sm:flex-row sm:items-center gap-3">
+      <!-- Count display (infinite scroll mode only) -->
+      <div
+        v-if="viewMode === 'cards' && paginationMode === 'infinite' && !searchContext"
+        class="text-sm font-mono text-fg-muted"
+      >
+        <template v-if="showingFiltered">
+          {{
+            $t('filters.count.showing_filtered', {
+              filtered: filteredCount.toLocaleString(),
+              total: totalCount.toLocaleString(),
+            })
+          }}
+        </template>
+        <template v-else>
+          {{ $t('filters.count.showing_all', { total: totalCount.toLocaleString() }) }}
+        </template>
+      </div>
+
+      <!-- Count display (paginated/table mode only) -->
+      <div
+        v-if="(viewMode === 'table' || paginationMode === 'paginated') && !searchContext"
+        class="text-sm font-mono text-fg-muted"
+      >
+        {{
+          $t('filters.count.showing_paginated', {
+            pageSize: pageSize === 'all' ? filteredCount : pageSize,
+            total: filteredCount.toLocaleString(),
+          })
+        }}
+      </div>
+
+      <div class="flex-1" />
+
+      <div class="flex flex-wrap items-center gap-3">
+        <!-- Column picker (table view only) -->
+        <ColumnPicker
+          v-if="viewMode === 'table'"
+          :columns="columns"
+          @toggle="emit('toggleColumn', $event)"
+          @reset="emit('resetColumns')"
+        />
+
+        <!-- Sort controls -->
+        <div class="flex items-center gap-1 shrink-0">
+          <!-- Sort key dropdown -->
+          <div class="relative">
+            <label for="sort-select" class="sr-only">{{ $t('filters.sort.label') }}</label>
+            <select
+              id="sort-select"
+              :value="currentSort.key"
+              class="appearance-none bg-bg-subtle border border-border rounded-md pl-3 pr-8 py-1.5 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+              @change="handleSortKeyChange"
+            >
+              <option
+                v-for="keyConfig in availableSortKeys"
+                :key="keyConfig.key"
+                :value="keyConfig.key"
+                :disabled="keyConfig.disabled"
+              >
+                {{ $t(getSortKeyLabelKey(keyConfig.key))
+                }}{{ keyConfig.disabled ? ` (${$t('filters.columns.coming_soon')})` : '' }}
+              </option>
+            </select>
+            <div
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+              aria-hidden="true"
+            >
+              <span class="i-carbon-chevron-down w-4 h-4" />
+            </div>
+          </div>
+
+          <!-- Sort direction toggle (hidden in search context) -->
+          <button
+            v-if="!searchContext"
+            type="button"
+            class="p-1.5 rounded border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+            :aria-label="$t('filters.sort.toggle_direction')"
+            :title="
+              currentSort.direction === 'asc'
+                ? $t('filters.sort.ascending')
+                : $t('filters.sort.descending')
+            "
+            @click="handleToggleDirection"
+          >
+            <span
+              class="w-4 h-4 block transition-transform duration-200"
+              :class="
+                currentSort.direction === 'asc'
+                  ? 'i-carbon-sort-ascending'
+                  : 'i-carbon-sort-descending'
+              "
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+
+        <!-- View mode toggle -->
+        <ViewModeToggle v-model="viewMode" />
+      </div>
+    </div>
+
+    <!-- Filter panel (hidden in search context) -->
+    <FilterPanel
+      v-if="!searchContext"
+      :filters="filters"
+      :available-keywords="availableKeywords"
+      @update:text="emit('update:text', $event)"
+      @update:search-scope="emit('update:searchScope', $event)"
+      @update:download-range="emit('update:downloadRange', $event)"
+      @update:security="emit('update:security', $event)"
+      @update:updated-within="emit('update:updatedWithin', $event)"
+      @toggle-keyword="emit('toggleKeyword', $event)"
+    />
+
+    <!-- Active filter chips (hidden in search context) -->
+    <FilterChips
+      v-if="!searchContext"
+      :chips="activeFilters"
+      @remove="emit('clearFilter', $event)"
+      @clear-all="emit('clearAllFilters')"
+    />
+  </div>
+</template>
diff --git a/app/components/PackageTable.vue b/app/components/PackageTable.vue
new file mode 100644
index 000000000..6b62d49af
--- /dev/null
+++ b/app/components/PackageTable.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { NpmSearchResult } from '#shared/types/npm-registry'
+import type { ColumnConfig, ColumnId, SortKey, SortOption } from '#shared/types/preferences'
+import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types/preferences'
+
+const props = defineProps<{
+  results: NpmSearchResult[]
+  columns: ColumnConfig[]
+  selectedIndex?: number
+  isLoading?: boolean
+}>()
+
+const sortOption = defineModel<SortOption>('sortOption')
+
+const emit = defineEmits<{
+  select: [index: number]
+  clickKeyword: [keyword: string]
+}>()
+
+function isColumnVisible(id: string): boolean {
+  return props.columns.find(c => c.id === id)?.visible ?? false
+}
+
+function isSortable(id: string): boolean {
+  return props.columns.find(c => c.id === id)?.sortable ?? false
+}
+
+// Map column id to sort key
+const columnToSortKey: Record<string, SortKey> = {
+  name: 'name',
+  downloads: 'downloads-week',
+  updated: 'updated',
+  qualityScore: 'quality',
+  popularityScore: 'popularity',
+  maintenanceScore: 'maintenance',
+  combinedScore: 'score',
+}
+
+// Default direction for each column
+const columnDefaultDirection: Record<string, 'asc' | 'desc'> = {
+  name: 'asc',
+  downloads: 'desc',
+  updated: 'desc',
+  qualityScore: 'desc',
+  popularityScore: 'desc',
+  maintenanceScore: 'desc',
+  combinedScore: 'desc',
+}
+
+function isColumnSorted(id: string): boolean {
+  const option = sortOption.value
+  if (!option) return false
+  const { key } = parseSortOption(option)
+  return key === columnToSortKey[id]
+}
+
+function getSortDirection(id: string): 'asc' | 'desc' | null {
+  const option = sortOption.value
+  if (!option) return null
+  if (!isColumnSorted(id)) return null
+  const { direction } = parseSortOption(option)
+  return direction
+}
+
+function toggleSort(id: string) {
+  if (!isSortable(id)) return
+
+  const sortKey = columnToSortKey[id]
+  if (!sortKey) return
+
+  const isSorted = isColumnSorted(id)
+
+  if (!isSorted) {
+    // First click - use default direction
+    const defaultDir = columnDefaultDirection[id] ?? 'desc'
+    sortOption.value = buildSortOption(sortKey, defaultDir)
+  } else {
+    // Toggle direction
+    const currentDir = getSortDirection(id) ?? 'desc'
+    sortOption.value = buildSortOption(sortKey, toggleDirection(currentDir))
+  }
+}
+
+// Map column IDs to i18n keys
+const columnLabelKeys: Record<ColumnId, string> = {
+  name: 'filters.columns.name',
+  version: 'filters.columns.version',
+  description: 'filters.columns.description',
+  downloads: 'filters.columns.downloads',
+  updated: 'filters.columns.updated',
+  maintainers: 'filters.columns.maintainers',
+  keywords: 'filters.columns.keywords',
+  qualityScore: 'filters.columns.quality_score',
+  popularityScore: 'filters.columns.popularity_score',
+  maintenanceScore: 'filters.columns.maintenance_score',
+  combinedScore: 'filters.columns.combined_score',
+  security: 'filters.columns.security',
+}
+
+function getColumnLabelKey(id: ColumnId): string {
+  return columnLabelKeys[id]
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <table class="w-full text-left">
+      <thead class="border-b border-border">
+        <tr>
+          <!-- Name (always visible) -->
+          <th
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            :class="{
+              'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
+            }"
+            :aria-sort="
+              isColumnSorted('name')
+                ? getSortDirection('name') === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            "
+            :tabindex="isSortable('name') ? 0 : undefined"
+            role="columnheader"
+            @click="toggleSort('name')"
+            @keydown.enter="toggleSort('name')"
+            @keydown.space.prevent="toggleSort('name')"
+          >
+            <span class="inline-flex items-center gap-1">
+              {{ $t(getColumnLabelKey('name')) }}
+              <template v-if="isSortable('name')">
+                <span
+                  v-if="isColumnSorted('name')"
+                  class="i-carbon-caret-down w-3 h-3"
+                  :class="getSortDirection('name') === 'asc' ? 'rotate-180' : ''"
+                  aria-hidden="true"
+                />
+                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+              </template>
+            </span>
+          </th>
+
+          <th
+            v-if="isColumnVisible('version')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+          >
+            {{ $t(getColumnLabelKey('version')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('description')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+          >
+            {{ $t(getColumnLabelKey('description')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('downloads')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            :class="{
+              'cursor-pointer hover:text-fg transition-colors duration-200':
+                isSortable('downloads'),
+            }"
+            :aria-sort="
+              isColumnSorted('downloads')
+                ? getSortDirection('downloads') === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            "
+            :tabindex="isSortable('downloads') ? 0 : undefined"
+            role="columnheader"
+            @click="toggleSort('downloads')"
+            @keydown.enter="toggleSort('downloads')"
+            @keydown.space.prevent="toggleSort('downloads')"
+          >
+            <span class="inline-flex items-center gap-1 justify-end">
+              {{ $t(getColumnLabelKey('downloads')) }}
+              <template v-if="isSortable('downloads')">
+                <span
+                  v-if="isColumnSorted('downloads')"
+                  class="i-carbon-caret-down w-3 h-3"
+                  :class="getSortDirection('downloads') === 'asc' ? 'rotate-180' : ''"
+                  aria-hidden="true"
+                />
+                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+              </template>
+            </span>
+          </th>
+
+          <th
+            v-if="isColumnVisible('updated')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            :class="{
+              'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
+            }"
+            :aria-sort="
+              isColumnSorted('updated')
+                ? getSortDirection('updated') === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            "
+            :tabindex="isSortable('updated') ? 0 : undefined"
+            role="columnheader"
+            @click="toggleSort('updated')"
+            @keydown.enter="toggleSort('updated')"
+            @keydown.space.prevent="toggleSort('updated')"
+          >
+            <span class="inline-flex items-center gap-1">
+              {{ $t(getColumnLabelKey('updated')) }}
+              <template v-if="isSortable('updated')">
+                <span
+                  v-if="isColumnSorted('updated')"
+                  class="i-carbon-caret-down w-3 h-3"
+                  :class="getSortDirection('updated') === 'asc' ? 'rotate-180' : ''"
+                  aria-hidden="true"
+                />
+                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+              </template>
+            </span>
+          </th>
+
+          <th
+            v-if="isColumnVisible('maintainers')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+          >
+            {{ $t(getColumnLabelKey('maintainers')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('keywords')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+          >
+            {{ $t(getColumnLabelKey('keywords')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('qualityScore')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+          >
+            {{ $t(getColumnLabelKey('qualityScore')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('popularityScore')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+          >
+            {{ $t(getColumnLabelKey('popularityScore')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('maintenanceScore')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+          >
+            {{ $t(getColumnLabelKey('maintenanceScore')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('combinedScore')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-right"
+          >
+            {{ $t(getColumnLabelKey('combinedScore')) }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('security')"
+            scope="col"
+            class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
+          >
+            {{ $t(getColumnLabelKey('security')) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Loading skeleton rows -->
+        <template v-if="isLoading && results.length === 0">
+          <tr v-for="i in 5" :key="`skeleton-${i}`" class="border-b border-border">
+            <td class="py-3 px-3">
+              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
+            </td>
+            <td v-if="isColumnVisible('version')" class="py-3 px-3">
+              <div class="h-4 w-12 bg-bg-muted rounded animate-pulse" />
+            </td>
+            <td v-if="isColumnVisible('description')" class="py-3 px-3">
+              <div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
+            </td>
+            <td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-right">
+              <div class="h-4 w-16 bg-bg-muted rounded animate-pulse ml-auto" />
+            </td>
+            <td v-if="isColumnVisible('updated')" class="py-3 px-3">
+              <div class="h-4 w-20 bg-bg-muted rounded animate-pulse" />
+            </td>
+            <td v-if="isColumnVisible('maintainers')" class="py-3 px-3">
+              <div class="h-4 w-24 bg-bg-muted rounded animate-pulse" />
+            </td>
+            <td v-if="isColumnVisible('keywords')" class="py-3 px-3">
+              <div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
+            </td>
+          </tr>
+        </template>
+
+        <!-- Actual data rows -->
+        <template v-else>
+          <PackageTableRow
+            v-for="(result, index) in results"
+            :key="result.package.name"
+            :result="result"
+            :columns="columns"
+            :selected="selectedIndex === index"
+            :index="index"
+            @focus="emit('select', index)"
+            @click-keyword="emit('clickKeyword', $event)"
+          />
+        </template>
+      </tbody>
+    </table>
+
+    <!-- Empty state (only when not loading) -->
+    <div
+      v-if="results.length === 0 && !isLoading"
+      class="py-12 text-center text-fg-subtle font-mono text-sm"
+    >
+      {{ $t('filters.table.no_packages') }}
+    </div>
+  </div>
+</template>
diff --git a/app/components/PackageTableRow.vue b/app/components/PackageTableRow.vue
new file mode 100644
index 000000000..dbe88501a
--- /dev/null
+++ b/app/components/PackageTableRow.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { NpmSearchResult } from '#shared/types/npm-registry'
+import type { ColumnConfig } from '#shared/types/preferences'
+
+const props = defineProps<{
+  result: NpmSearchResult
+  columns: ColumnConfig[]
+  selected?: boolean
+  index?: number
+}>()
+
+const emit = defineEmits<{
+  focus: []
+  clickKeyword: [keyword: string]
+}>()
+
+const pkg = computed(() => props.result.package)
+const score = computed(() => props.result.score)
+
+// Get the best available date: prefer result.updated (from packument), fall back to package.date
+const updatedDate = computed(() => props.result.updated ?? props.result.package.date)
+
+function formatDownloads(count?: number): string {
+  if (count === undefined) return '-'
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
+  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`
+  return count.toString()
+}
+
+function formatScore(value?: number): string {
+  if (value === undefined || value === 0) return '-'
+  return Math.round(value * 100).toString()
+}
+
+function isColumnVisible(id: string): boolean {
+  return props.columns.find(c => c.id === id)?.visible ?? false
+}
+
+const packageUrl = computed(() => `/package/${pkg.value.name}`)
+
+const allMaintainersText = computed(() => {
+  if (!pkg.value.maintainers?.length) return ''
+  return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
+})
+</script>
+
+<template>
+  <tr
+    class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+    :class="{ 'bg-bg-muted': selected }"
+    tabindex="0"
+    @focus="emit('focus')"
+  >
+    <!-- Name (always visible) -->
+    <td class="py-2 px-3">
+      <NuxtLink
+        :to="packageUrl"
+        class="font-mono text-sm text-fg hover:text-accent-muted transition-colors duration-200"
+      >
+        {{ pkg.name }}
+      </NuxtLink>
+    </td>
+
+    <!-- Version -->
+    <td v-if="isColumnVisible('version')" class="py-2 px-3 font-mono text-xs text-fg-subtle">
+      {{ pkg.version }}
+    </td>
+
+    <!-- Description -->
+    <td
+      v-if="isColumnVisible('description')"
+      class="py-2 px-3 text-sm text-fg-muted max-w-xs truncate"
+    >
+      {{ pkg.description || '-' }}
+    </td>
+
+    <!-- Downloads -->
+    <td
+      v-if="isColumnVisible('downloads')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+    >
+      {{ formatDownloads(result.downloads?.weekly) }}
+    </td>
+
+    <!-- Updated -->
+    <td v-if="isColumnVisible('updated')" class="py-2 px-3 font-mono text-xs text-fg-muted">
+      <DateTime
+        v-if="updatedDate"
+        :datetime="updatedDate"
+        year="numeric"
+        month="short"
+        day="numeric"
+      />
+      <span v-else>-</span>
+    </td>
+
+    <!-- Maintainers -->
+    <td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted">
+      <span
+        v-if="pkg.maintainers?.length"
+        :title="pkg.maintainers.length > 3 ? allMaintainersText : undefined"
+        :class="{ 'cursor-help': pkg.maintainers.length > 3 }"
+      >
+        <template
+          v-for="(maintainer, idx) in pkg.maintainers.slice(0, 3)"
+          :key="maintainer.username || maintainer.email"
+        >
+          <NuxtLink
+            :to="`/~${maintainer.username || maintainer.name}`"
+            class="hover:text-accent-muted transition-colors duration-200"
+            @click.stop
+            >{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
+          ><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
+        </template>
+        <span v-if="pkg.maintainers.length > 3" class="text-fg-subtle">
+          +{{ pkg.maintainers.length - 3 }}
+        </span>
+      </span>
+      <span v-else class="text-fg-subtle">-</span>
+    </td>
+
+    <!-- Keywords -->
+    <td v-if="isColumnVisible('keywords')" class="py-2 px-3">
+      <div v-if="pkg.keywords?.length" class="flex flex-wrap gap-1">
+        <button
+          v-for="keyword in pkg.keywords.slice(0, 3)"
+          :key="keyword"
+          type="button"
+          class="tag text-xs hover:bg-fg hover:text-bg hover:border-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :title="`Filter by ${keyword}`"
+          @click.stop="emit('clickKeyword', keyword)"
+        >
+          {{ keyword }}
+        </button>
+        <span v-if="pkg.keywords.length > 3" class="text-fg-subtle text-xs">
+          +{{ pkg.keywords.length - 3 }}
+        </span>
+      </div>
+      <span v-else class="text-fg-subtle">-</span>
+    </td>
+
+    <!-- Quality Score -->
+    <td
+      v-if="isColumnVisible('qualityScore')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+    >
+      {{ formatScore(score?.detail?.quality) }}
+    </td>
+
+    <!-- Popularity Score -->
+    <td
+      v-if="isColumnVisible('popularityScore')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+    >
+      {{ formatScore(score?.detail?.popularity) }}
+    </td>
+
+    <!-- Maintenance Score -->
+    <td
+      v-if="isColumnVisible('maintenanceScore')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+    >
+      {{ formatScore(score?.detail?.maintenance) }}
+    </td>
+
+    <!-- Combined Score -->
+    <td
+      v-if="isColumnVisible('combinedScore')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-right tabular-nums"
+    >
+      {{ formatScore(score?.final) }}
+    </td>
+
+    <!-- Security -->
+    <td v-if="isColumnVisible('security')" class="py-2 px-3">
+      <span v-if="result.flags?.insecure" class="text-syntax-kw">
+        <span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
+        <span class="sr-only">{{ $t('filters.table.security_warning') }}</span>
+      </span>
+      <span v-else-if="result.flags !== undefined" class="text-provider-nuxt">
+        <span class="i-carbon-checkmark w-4 h-4" aria-hidden="true" />
+        <span class="sr-only">{{ $t('filters.table.secure') }}</span>
+      </span>
+      <span v-else class="text-fg-subtle"> - </span>
+    </td>
+  </tr>
+</template>
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
new file mode 100644
index 000000000..1e0654bf8
--- /dev/null
+++ b/app/components/PaginationControls.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { PageSize, PaginationMode, ViewMode } from '#shared/types/preferences'
+import { PAGE_SIZE_OPTIONS } from '#shared/types/preferences'
+
+const props = defineProps<{
+  totalItems: number
+  /** When in table view, force pagination mode (no infinite scroll for tables) */
+  viewMode?: ViewMode
+}>()
+
+const mode = defineModel<PaginationMode>('mode', { required: true })
+const pageSize = defineModel<PageSize>('pageSize', { required: true })
+const currentPage = defineModel<number>('currentPage', { required: true })
+
+// Whether we should show pagination controls (table view always uses pagination)
+const shouldShowControls = computed(() => props.viewMode === 'table' || mode.value === 'paginated')
+
+// Table view forces pagination mode, otherwise use the provided mode
+const effectiveMode = computed<PaginationMode>(() =>
+  shouldShowControls.value ? 'paginated' : 'infinite',
+)
+
+// When 'all' is selected, there's only 1 page with everything
+const isShowingAll = computed(() => pageSize.value === 'all')
+const effectivePageSize = computed(() => (isShowingAll.value ? props.totalItems : pageSize.value))
+const totalPages = computed(() =>
+  isShowingAll.value ? 1 : Math.ceil(props.totalItems / (pageSize.value as number)),
+)
+
+// Whether to show the mode toggle (hidden in table view since table always uses pagination)
+const showModeToggle = computed(() => props.viewMode !== 'table')
+
+const startItem = computed(() => {
+  if (props.totalItems === 0) return 0
+  if (isShowingAll.value) return 1
+  return (currentPage.value - 1) * (pageSize.value as number) + 1
+})
+
+const endItem = computed(() => {
+  if (isShowingAll.value) return props.totalItems
+  return Math.min(currentPage.value * (pageSize.value as number), props.totalItems)
+})
+
+const canGoPrev = computed(() => currentPage.value > 1)
+const canGoNext = computed(() => currentPage.value < totalPages.value)
+
+function goToPage(page: number) {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page
+  }
+}
+
+function goPrev() {
+  if (canGoPrev.value) {
+    currentPage.value = currentPage.value - 1
+  }
+}
+
+function goNext() {
+  if (canGoNext.value) {
+    currentPage.value = currentPage.value + 1
+  }
+}
+
+// Generate visible page numbers with ellipsis
+const visiblePages = computed(() => {
+  const total = totalPages.value
+  const current = currentPage.value
+  const pages: (number | 'ellipsis')[] = []
+
+  if (total <= 7) {
+    // Show all pages
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+  } else {
+    // Always show first page
+    pages.push(1)
+
+    if (current > 3) {
+      pages.push('ellipsis')
+    }
+
+    // Show pages around current
+    const start = Math.max(2, current - 1)
+    const end = Math.min(total - 1, current + 1)
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+
+    if (current < total - 2) {
+      pages.push('ellipsis')
+    }
+
+    // Always show last page
+    if (total > 1) {
+      pages.push(total)
+    }
+  }
+
+  return pages
+})
+
+function handlePageSizeChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const value = target.value
+  // Handle 'all' as a special string value, otherwise parse as number
+  const newSize = (value === 'all' ? 'all' : Number(value)) as PageSize
+  pageSize.value = newSize
+  // Reset to page 1 when changing page size
+  currentPage.value = 1
+}
+</script>
+
+<template>
+  <!-- Only show when in paginated mode (table view or explicit paginated mode) -->
+  <div
+    v-if="shouldShowControls"
+    class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-border mt-6"
+  >
+    <!-- Left: Mode toggle and page size -->
+    <div class="flex items-center gap-4">
+      <!-- Pagination mode toggle (hidden in table view - tables always use pagination) -->
+      <div
+        v-if="showModeToggle"
+        class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
+        role="group"
+        :aria-label="$t('filters.pagination.mode_label')"
+      >
+        <button
+          type="button"
+          class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :class="mode === 'infinite' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+          :aria-pressed="mode === 'infinite'"
+          @click="mode = 'infinite'"
+        >
+          {{ $t('filters.pagination.infinite') }}
+        </button>
+        <button
+          type="button"
+          class="px-2.5 py-1 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :class="mode === 'paginated' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+          :aria-pressed="mode === 'paginated'"
+          @click="mode = 'paginated'"
+        >
+          {{ $t('filters.pagination.paginated') }}
+        </button>
+      </div>
+
+      <!-- Page size (shown when paginated or table view) -->
+      <div v-if="effectiveMode === 'paginated'" class="relative shrink-0">
+        <label for="page-size" class="sr-only">{{ $t('filters.pagination.items_per_page') }}</label>
+        <select
+          id="page-size"
+          :value="pageSize"
+          class="appearance-none bg-bg-subtle border border-border rounded-md pl-3 pr-8 py-1 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+          @change="handlePageSizeChange"
+        >
+          <option v-for="size in PAGE_SIZE_OPTIONS" :key="size" :value="size">
+            {{
+              size === 'all'
+                ? $t('filters.pagination.all_yolo')
+                : $t('filters.pagination.per_page', { count: size })
+            }}
+          </option>
+        </select>
+        <div
+          class="absolute right-2 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
+          aria-hidden="true"
+        >
+          <span class="i-carbon-chevron-down w-3 h-3" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Right: Page info and navigation (paginated mode only) -->
+    <div v-if="effectiveMode === 'paginated'" class="flex items-center gap-4">
+      <!-- Showing X-Y of Z -->
+      <span class="text-sm font-mono text-fg-muted">
+        {{
+          $t('filters.pagination.showing', {
+            start: startItem,
+            end: endItem,
+            total: totalItems.toLocaleString(),
+          })
+        }}
+      </span>
+
+      <!-- Page navigation -->
+      <nav
+        v-if="totalPages > 1"
+        class="flex items-center gap-1"
+        :aria-label="$t('filters.pagination.nav_label')"
+      >
+        <!-- Previous button -->
+        <button
+          type="button"
+          class="p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :disabled="!canGoPrev"
+          :aria-label="$t('filters.pagination.previous')"
+          @click="goPrev"
+        >
+          <span class="i-carbon-chevron-left w-4 h-4" aria-hidden="true" />
+        </button>
+
+        <!-- Page numbers -->
+        <template v-for="(page, idx) in visiblePages" :key="idx">
+          <span v-if="page === 'ellipsis'" class="px-2 text-fg-subtle font-mono">…</span>
+          <button
+            v-else
+            type="button"
+            class="min-w-[32px] h-8 px-2 font-mono text-sm rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+            :class="
+              page === currentPage
+                ? 'bg-fg text-bg'
+                : 'text-fg-muted hover:text-fg hover:bg-bg-muted'
+            "
+            :aria-current="page === currentPage ? 'page' : undefined"
+            @click="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        </template>
+
+        <!-- Next button -->
+        <button
+          type="button"
+          class="p-1.5 rounded hover:bg-bg-muted text-fg-muted hover:text-fg disabled:opacity-40 disabled:cursor-not-allowed transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          :disabled="!canGoNext"
+          :aria-label="$t('filters.pagination.next')"
+          @click="goNext"
+        >
+          <span class="i-carbon-chevron-right w-4 h-4" aria-hidden="true" />
+        </button>
+      </nav>
+    </div>
+  </div>
+</template>
diff --git a/app/components/ViewModeToggle.vue b/app/components/ViewModeToggle.vue
new file mode 100644
index 000000000..ba9319858
--- /dev/null
+++ b/app/components/ViewModeToggle.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ViewMode } from '#shared/types/preferences'
+
+const viewMode = defineModel<ViewMode>({ default: 'cards' })
+</script>
+
+<template>
+  <div
+    class="inline-flex rounded-md border border-border p-0.5 bg-bg-subtle"
+    role="group"
+    :aria-label="$t('filters.view_mode.label')"
+  >
+    <button
+      type="button"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="viewMode === 'cards' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      :aria-pressed="viewMode === 'cards'"
+      :aria-label="$t('filters.view_mode.cards')"
+      @click="viewMode = 'cards'"
+    >
+      <span class="i-carbon-grid w-4 h-4" aria-hidden="true" />
+      <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
+    </button>
+    <button
+      type="button"
+      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      :class="viewMode === 'table' ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+      :aria-pressed="viewMode === 'table'"
+      :aria-label="$t('filters.view_mode.table')"
+      @click="viewMode = 'table'"
+    >
+      <span class="i-carbon-list w-4 h-4" aria-hidden="true" />
+      <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
+    </button>
+  </div>
+</template>
diff --git a/app/composables/useNpmRegistry.ts b/app/composables/useNpmRegistry.ts
index 0f3ed9e50..6b6956783 100644
--- a/app/composables/useNpmRegistry.ts
+++ b/app/composables/useNpmRegistry.ts
@@ -20,6 +20,74 @@ const NPM_API = 'https://api.npmjs.org'
 // Cache for packument fetches to avoid duplicate requests across components
 const packumentCache = new Map<string, Promise<Packument | null>>()
 
+/**
+ * Fetch downloads for multiple packages.
+ * Returns a map of package name -> weekly downloads.
+ * Uses bulk API for unscoped packages, parallel individual requests for scoped.
+ * Note: npm bulk downloads API does not support scoped packages.
+ */
+async function fetchBulkDownloads(packageNames: string[]): Promise<Map<string, number>> {
+  const downloads = new Map<string, number>()
+  if (packageNames.length === 0) return downloads
+
+  // Separate scoped and unscoped packages
+  const scopedPackages = packageNames.filter(n => n.startsWith('@'))
+  const unscopedPackages = packageNames.filter(n => !n.startsWith('@'))
+
+  // Fetch unscoped packages via bulk API (max 128 per request)
+  const bulkPromises: Promise<void>[] = []
+  const chunkSize = 100
+  for (let i = 0; i < unscopedPackages.length; i += chunkSize) {
+    const chunk = unscopedPackages.slice(i, i + chunkSize)
+    bulkPromises.push(
+      (async () => {
+        try {
+          const response = await $fetch<Record<string, { downloads: number } | null>>(
+            `${NPM_API}/downloads/point/last-week/${chunk.join(',')}`,
+          )
+          for (const [name, data] of Object.entries(response)) {
+            if (data?.downloads !== undefined) {
+              downloads.set(name, data.downloads)
+            }
+          }
+        } catch {
+          // Ignore errors - downloads are optional
+        }
+      })(),
+    )
+  }
+
+  // Fetch scoped packages in parallel batches (concurrency limit to avoid overwhelming the API)
+  // Use Promise.allSettled to not fail on individual errors
+  const scopedBatchSize = 20 // Concurrent requests per batch
+  for (let i = 0; i < scopedPackages.length; i += scopedBatchSize) {
+    const batch = scopedPackages.slice(i, i + scopedBatchSize)
+    bulkPromises.push(
+      (async () => {
+        const results = await Promise.allSettled(
+          batch.map(async name => {
+            const encoded = encodePackageName(name)
+            const data = await $fetch<{ downloads: number }>(
+              `${NPM_API}/downloads/point/last-week/${encoded}`,
+            )
+            return { name, downloads: data.downloads }
+          }),
+        )
+        for (const result of results) {
+          if (result.status === 'fulfilled' && result.value.downloads !== undefined) {
+            downloads.set(result.value.name, result.value.downloads)
+          }
+        }
+      })(),
+    )
+  }
+
+  // Wait for all fetches to complete
+  await Promise.all(bulkPromises)
+
+  return downloads
+}
+
 /**
  * Encode a package name for use in npm registry URLs.
  * Handles scoped packages (e.g., @scope/name -> @scope%2Fname).
@@ -195,40 +263,173 @@ const emptySearchResponse = {
   time: new Date().toISOString(),
 } satisfies NpmSearchResponse
 
+export interface NpmSearchOptions {
+  /** Number of results to fetch */
+  size?: number
+}
+
 /** @public */
 export function useNpmSearch(
   query: MaybeRefOrGetter<string>,
-  options: MaybeRefOrGetter<{
-    size?: number
-    from?: number
-  }> = {},
+  options: MaybeRefOrGetter<NpmSearchOptions> = {},
 ) {
   const cachedFetch = useCachedFetch()
+  // Client-side cache
+  const cache = shallowRef<{
+    query: string
+    objects: NpmSearchResult[]
+    total: number
+  } | null>(null)
+
+  const isLoadingMore = ref(false)
+
+  // Standard (non-incremental) search implementation
   let lastSearch: NpmSearchResponse | undefined = undefined
 
-  return useLazyAsyncData(
-    () => `search:${toValue(query)}:${JSON.stringify(toValue(options))}`,
+  const asyncData = useLazyAsyncData(
+    `search:incremental:${toValue(query)}`,
     async () => {
       const q = toValue(query)
       if (!q.trim()) {
-        return Promise.resolve(emptySearchResponse)
+        return emptySearchResponse
       }
 
+      const opts = toValue(options)
+
+      // This only runs for initial load or query changes
+      // Reset cache for new query
+      cache.value = null
+
       const params = new URLSearchParams()
       params.set('text', q)
-      const opts = toValue(options)
-      if (opts.size) params.set('size', String(opts.size))
-      if (opts.from) params.set('from', String(opts.from))
+      // Use requested size for initial fetch
+      params.set('size', String(opts.size ?? 25))
 
-      // Note: Search results have a short TTL (1 minute) since they change frequently
-      return (lastSearch = await cachedFetch<NpmSearchResponse>(
+      const response = await cachedFetch<NpmSearchResponse>(
         `${NPM_REGISTRY}/-/v1/search?${params.toString()}`,
         {},
-        60, // 1 minute TTL for search results
-      ))
+        60,
+      )
+
+      cache.value = {
+        query: q,
+        objects: response.objects,
+        total: response.total,
+      }
+
+      return response
     },
     { default: () => lastSearch || emptySearchResponse },
   )
+
+  // Fetch more results incrementally (only used in incremental mode)
+  async function fetchMore(targetSize: number): Promise<void> {
+    const q = toValue(query).trim()
+    if (!q) {
+      cache.value = null
+      return
+    }
+
+    // If query changed, reset cache (shouldn't happen, but safety check)
+    if (cache.value && cache.value.query !== q) {
+      cache.value = null
+      await asyncData.refresh()
+      return
+    }
+
+    const currentCount = cache.value?.objects.length ?? 0
+    const total = cache.value?.total ?? Infinity
+
+    // Already have enough or no more to fetch
+    if (currentCount >= targetSize || currentCount >= total) {
+      return
+    }
+
+    isLoadingMore.value = true
+
+    try {
+      // Fetch from where we left off - calculate size needed
+      const from = currentCount
+      const size = Math.min(targetSize - currentCount, total - currentCount)
+
+      const params = new URLSearchParams()
+      params.set('text', q)
+      params.set('size', String(size))
+      params.set('from', String(from))
+
+      const response = await cachedFetch<NpmSearchResponse>(
+        `${NPM_REGISTRY}/-/v1/search?${params.toString()}`,
+        {},
+        60,
+      )
+
+      // Update cache
+      if (cache.value && cache.value.query === q) {
+        cache.value = {
+          query: q,
+          objects: [...cache.value.objects, ...response.objects],
+          total: response.total,
+        }
+      } else {
+        cache.value = {
+          query: q,
+          objects: response.objects,
+          total: response.total,
+        }
+      }
+
+      // If we still need more, fetch again recursively
+      if (
+        cache.value.objects.length < targetSize &&
+        cache.value.objects.length < cache.value.total
+      ) {
+        await fetchMore(targetSize)
+      }
+    } finally {
+      isLoadingMore.value = false
+    }
+  }
+
+  // Watch for size increases in incremental mode
+  watch(
+    () => toValue(options).size,
+    async (newSize, oldSize) => {
+      if (!newSize) return
+      if (oldSize && newSize > oldSize && toValue(query).trim()) {
+        await fetchMore(newSize)
+      }
+    },
+  )
+
+  // Computed data that uses cache in incremental mode
+  const data = computed<NpmSearchResponse | null>(() => {
+    if (cache.value) {
+      return {
+        objects: cache.value.objects,
+        total: cache.value.total,
+        time: new Date().toISOString(),
+      }
+    }
+    return asyncData.data.value
+  })
+
+  // Whether there are more results available on the server (incremental mode only)
+  const hasMore = computed(() => {
+    if (!cache.value) return true
+    return cache.value.objects.length < cache.value.total
+  })
+
+  return {
+    ...asyncData,
+    /** Reactive search results (uses cache in incremental mode) */
+    data,
+    /** Whether currently loading more results (incremental mode only) */
+    isLoadingMore,
+    /** Whether there are more results available (incremental mode only) */
+    hasMore,
+    /** Manually fetch more results up to target size (incremental mode only) */
+    fetchMore,
+  }
 }
 
 /**
@@ -237,6 +438,7 @@ export function useNpmSearch(
 interface MinimalPackument {
   'name': string
   'description'?: string
+  'keywords'?: string[]
   // `dist-tags` can be missing in some later unpublished packages
   'dist-tags'?: Record<string, string>
   'time': Record<string, string>
@@ -246,7 +448,7 @@ interface MinimalPackument {
 /**
  * Convert packument to search result format for display
  */
-function packumentToSearchResult(pkg: MinimalPackument): NpmSearchResult {
+function packumentToSearchResult(pkg: MinimalPackument, weeklyDownloads?: number): NpmSearchResult {
   let latestVersion = ''
   if (pkg['dist-tags']) {
     latestVersion = pkg['dist-tags'].latest || Object.values(pkg['dist-tags'])[0] || ''
@@ -258,6 +460,7 @@ function packumentToSearchResult(pkg: MinimalPackument): NpmSearchResult {
       name: pkg.name,
       version: latestVersion,
       description: pkg.description,
+      keywords: pkg.keywords,
       date: pkg.time[latestVersion] || modified,
       links: {
         npm: `https://www.npmjs.com/package/${pkg.name}`,
@@ -266,7 +469,8 @@ function packumentToSearchResult(pkg: MinimalPackument): NpmSearchResult {
     },
     score: { final: 0, detail: { quality: 0, popularity: 0, maintenance: 0 } },
     searchScore: 0,
-    updated: modified,
+    downloads: weeklyDownloads !== undefined ? { weekly: weeklyDownloads } : undefined,
+    updated: pkg.time[latestVersion] || modified,
   }
 }
 
@@ -310,30 +514,41 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
         return emptySearchResponse
       }
 
-      // Fetch packuments in parallel (with concurrency limit)
-      const concurrency = 10
-      const results: NpmSearchResult[] = []
-
-      for (let i = 0; i < packageNames.length; i += concurrency) {
-        const batch = packageNames.slice(i, i + concurrency)
-        const packuments = await Promise.all(
-          batch.map(async name => {
-            try {
-              const encoded = encodePackageName(name)
-              return await cachedFetch<MinimalPackument>(`${NPM_REGISTRY}/${encoded}`)
-            } catch {
-              return null
+      // Fetch packuments and downloads in parallel
+      const [packuments, downloads] = await Promise.all([
+        // Fetch packuments in parallel (with concurrency limit)
+        (async () => {
+          const concurrency = 10
+          const results: MinimalPackument[] = []
+          for (let i = 0; i < packageNames.length; i += concurrency) {
+            const batch = packageNames.slice(i, i + concurrency)
+            const batchResults = await Promise.all(
+              batch.map(async name => {
+                try {
+                  const encoded = encodePackageName(name)
+                  return await cachedFetch<MinimalPackument>(`${NPM_REGISTRY}/${encoded}`)
+                } catch {
+                  return null
+                }
+              }),
+            )
+            for (const pkg of batchResults) {
+              // Filter out any unpublished packages (missing dist-tags)
+              if (pkg && pkg['dist-tags']) {
+                results.push(pkg)
+              }
             }
-          }),
-        )
-
-        for (const pkg of packuments) {
-          // Filter out any unpublished packages (missing dist-tags)
-          if (pkg && pkg['dist-tags']) {
-            results.push(packumentToSearchResult(pkg))
           }
-        }
-      }
+          return results
+        })(),
+        // Fetch downloads in bulk
+        fetchBulkDownloads(packageNames),
+      ])
+
+      // Convert to search results with download data
+      const results: NpmSearchResult[] = packuments.map(pkg =>
+        packumentToSearchResult(pkg, downloads.get(pkg.name)),
+      )
 
       return {
         objects: results,
diff --git a/app/composables/usePackageListPreferences.ts b/app/composables/usePackageListPreferences.ts
new file mode 100644
index 000000000..af8f9c811
--- /dev/null
+++ b/app/composables/usePackageListPreferences.ts
@@ -0,0 +1,112 @@
+/**
+ * Manages view mode, columns, and pagination preferences for package lists
+ */
+import type {
+  ColumnConfig,
+  ColumnId,
+  PackageListPreferences,
+  PageSize,
+  PaginationMode,
+  ViewMode,
+} from '#shared/types/preferences'
+import { DEFAULT_COLUMNS, DEFAULT_PREFERENCES } from '#shared/types/preferences'
+
+/**
+ * Composable for managing package list display preferences
+ * Persists to localStorage and provides reactive state
+ *
+ * @public
+ */
+export function usePackageListPreferences() {
+  const {
+    data: preferences,
+    isHydrated,
+    save,
+    reset,
+  } = usePreferencesProvider<PackageListPreferences>(DEFAULT_PREFERENCES)
+
+  // Computed accessors for common properties
+  const viewMode = computed({
+    get: () => preferences.value.viewMode,
+    set: (value: ViewMode) => {
+      preferences.value.viewMode = value
+      save()
+    },
+  })
+
+  const paginationMode = computed({
+    get: () => preferences.value.paginationMode,
+    set: (value: PaginationMode) => {
+      preferences.value.paginationMode = value
+      save()
+    },
+  })
+
+  const pageSize = computed({
+    get: () => preferences.value.pageSize,
+    set: (value: PageSize) => {
+      preferences.value.pageSize = value
+      save()
+    },
+  })
+
+  const columns = computed({
+    get: () => preferences.value.columns,
+    set: (value: ColumnConfig[]) => {
+      preferences.value.columns = value
+      save()
+    },
+  })
+
+  // Get visible columns only
+  const visibleColumns = computed(() => columns.value.filter(col => col.visible))
+
+  // Column visibility helpers
+  function setColumnVisibility(columnId: ColumnId, visible: boolean) {
+    const column = columns.value.find(col => col.id === columnId)
+    if (column) {
+      column.visible = visible
+      save()
+    }
+  }
+
+  function toggleColumn(columnId: ColumnId) {
+    const column = columns.value.find(col => col.id === columnId)
+    if (column) {
+      column.visible = !column.visible
+      save()
+    }
+  }
+
+  function resetColumns() {
+    preferences.value.columns = DEFAULT_COLUMNS.map(col => Object.assign({}, col))
+    save()
+  }
+
+  // Check if column is visible
+  function isColumnVisible(columnId: ColumnId) {
+    return columns.value.find(col => col.id === columnId)?.visible ?? false
+  }
+
+  return {
+    // Raw preferences
+    preferences,
+    isHydrated,
+
+    // Individual properties with setters
+    viewMode,
+    paginationMode,
+    pageSize,
+    columns,
+    visibleColumns,
+
+    // Column helpers
+    setColumnVisibility,
+    toggleColumn,
+    resetColumns,
+    isColumnVisible,
+
+    // Reset all
+    reset,
+  }
+}
diff --git a/app/composables/usePreferencesProvider.ts b/app/composables/usePreferencesProvider.ts
new file mode 100644
index 000000000..4d6647261
--- /dev/null
+++ b/app/composables/usePreferencesProvider.ts
@@ -0,0 +1,101 @@
+/**
+ * Abstraction for preferences storage
+ * Currently uses localStorage, designed for future user prefs API
+ */
+
+const STORAGE_KEY = 'npmx-list-prefs'
+
+interface StorageProvider<T> {
+  get: () => T | null
+  set: (value: T) => void
+  remove: () => void
+}
+
+/**
+ * Creates a localStorage-based storage provider
+ */
+function createLocalStorageProvider<T>(key: string): StorageProvider<T> {
+  return {
+    get: () => {
+      if (import.meta.server) return null
+      try {
+        const stored = localStorage.getItem(key)
+        if (stored) {
+          return JSON.parse(stored) as T
+        }
+      } catch {
+        // Corrupted data, remove it
+        localStorage.removeItem(key)
+      }
+      return null
+    },
+    set: (value: T) => {
+      if (import.meta.server) return
+      try {
+        localStorage.setItem(key, JSON.stringify(value))
+      } catch {
+        // Storage full or other error, fail silently
+      }
+    },
+    remove: () => {
+      if (import.meta.server) return
+      localStorage.removeItem(key)
+    },
+  }
+}
+
+// Future: API-based provider would look like this:
+// function createApiStorageProvider<T>(endpoint: string): StorageProvider<T> {
+//   return {
+//     get: async () => { /* fetch from API */ },
+//     set: async (value) => { /* POST to API */ },
+//     remove: async () => { /* DELETE from API */ },
+//   }
+// }
+
+/**
+ * Composable for managing preferences storage
+ * Abstracts the storage mechanism to allow future migration to API-based storage
+ *
+ * @public
+ */
+export function usePreferencesProvider<T>(defaultValue: T) {
+  const provider = createLocalStorageProvider<T>(STORAGE_KEY)
+  const data = ref<T>(defaultValue) as Ref<T>
+  const isHydrated = ref(false)
+
+  // Load from storage on client
+  onMounted(() => {
+    const stored = provider.get()
+    if (stored) {
+      // Merge stored values with defaults to handle schema evolution
+      data.value = { ...defaultValue, ...stored }
+    }
+    isHydrated.value = true
+  })
+
+  // Persist changes
+  function save() {
+    provider.set(data.value)
+  }
+
+  // Reset to defaults
+  function reset() {
+    data.value = { ...defaultValue }
+    provider.remove()
+  }
+
+  // Update specific keys
+  function update<K extends keyof T>(key: K, value: T[K]) {
+    data.value[key] = value
+    save()
+  }
+
+  return {
+    data,
+    isHydrated,
+    save,
+    reset,
+    update,
+  }
+}
diff --git a/app/composables/useStructuredFilters.ts b/app/composables/useStructuredFilters.ts
new file mode 100644
index 000000000..8d337fdd2
--- /dev/null
+++ b/app/composables/useStructuredFilters.ts
@@ -0,0 +1,450 @@
+/**
+ * Filter pipeline and sorting logic for package lists
+ */
+import type { NpmSearchResult } from '#shared/types/npm-registry'
+import type {
+  DownloadRange,
+  FilterChip,
+  SearchScope,
+  SecurityFilter,
+  SortOption,
+  StructuredFilters,
+  UpdatedWithin,
+} from '#shared/types/preferences'
+import {
+  DEFAULT_FILTERS,
+  DOWNLOAD_RANGES,
+  parseSortOption,
+  SECURITY_FILTER_OPTIONS,
+  UPDATED_WITHIN_OPTIONS,
+} from '#shared/types/preferences'
+
+/**
+ * Parsed search operators from text input
+ */
+export interface ParsedSearchOperators {
+  name?: string[]
+  description?: string[]
+  keywords?: string[]
+  text?: string // Remaining text without operators
+}
+
+/**
+ * Parse search operators from text input.
+ * Supports: name:, desc:/description:, kw:/keyword:
+ * Multiple values can be comma-separated: kw:foo,bar
+ * Remaining text is treated as a general search term.
+ *
+ * Example: "name:react kw:typescript,hooks some text"
+ * Returns: { name: ['react'], keywords: ['typescript', 'hooks'], text: 'some text' }
+ */
+export function parseSearchOperators(input: string): ParsedSearchOperators {
+  const result: ParsedSearchOperators = {}
+
+  // Regex to match operators: name:value, desc:value, description:value, kw:value, keyword:value
+  // Value continues until whitespace or next operator
+  const operatorRegex = /\b(name|desc|description|kw|keyword):([^\s]+)/gi
+
+  let remaining = input
+  let match
+
+  while ((match = operatorRegex.exec(input)) !== null) {
+    const [fullMatch, operator, value] = match
+    if (!operator || !value) continue
+
+    const values = value
+      .split(',')
+      .map(v => v.trim())
+      .filter(Boolean)
+
+    const normalizedOp = operator.toLowerCase()
+    if (normalizedOp === 'name') {
+      result.name = [...(result.name ?? []), ...values]
+    } else if (normalizedOp === 'desc' || normalizedOp === 'description') {
+      result.description = [...(result.description ?? []), ...values]
+    } else if (normalizedOp === 'kw' || normalizedOp === 'keyword') {
+      result.keywords = [...(result.keywords ?? []), ...values]
+    }
+
+    // Remove matched operator from remaining text
+    remaining = remaining.replace(fullMatch, '')
+  }
+
+  // Clean up remaining text
+  const cleanedText = remaining.trim().replace(/\s+/g, ' ')
+  if (cleanedText) {
+    result.text = cleanedText
+  }
+
+  return result
+}
+
+/**
+ * Check if parsed operators has any content
+ */
+export function hasSearchOperators(parsed: ParsedSearchOperators): boolean {
+  return !!(parsed.name?.length || parsed.description?.length || parsed.keywords?.length)
+}
+
+interface UseStructuredFiltersOptions {
+  packages: Ref<NpmSearchResult[]>
+  initialFilters?: Partial<StructuredFilters>
+  initialSort?: SortOption
+}
+
+// Pure filter predicates (no closure dependencies)
+function matchesKeywords(pkg: NpmSearchResult, keywords: string[]): boolean {
+  if (keywords.length === 0) return true
+  const pkgKeywords = new Set((pkg.package.keywords ?? []).map(k => k.toLowerCase()))
+  // AND logic: package must have ALL selected keywords (case-insensitive)
+  return keywords.every(k => pkgKeywords.has(k.toLowerCase()))
+}
+
+function matchesSecurity(pkg: NpmSearchResult, security: SecurityFilter): boolean {
+  if (security === 'all') return true
+  const hasWarnings = (pkg.flags?.insecure ?? 0) > 0
+  if (security === 'secure') return !hasWarnings
+  if (security === 'warnings') return hasWarnings
+  return true
+}
+
+/**
+ * Composable for structured filtering and sorting of package lists
+ *
+ * @public
+ */
+export function useStructuredFilters(options: UseStructuredFiltersOptions) {
+  const { packages, initialFilters, initialSort } = options
+
+  // Filter state
+  const filters = ref<StructuredFilters>({
+    ...DEFAULT_FILTERS,
+    ...initialFilters,
+  })
+
+  // Sort state
+  const sortOption = ref<SortOption>(initialSort ?? 'updated-desc')
+
+  // Available keywords extracted from all packages
+  const availableKeywords = computed(() => {
+    const keywordCounts = new Map<string, number>()
+    for (const pkg of packages.value) {
+      const keywords = pkg.package.keywords ?? []
+      for (const keyword of keywords) {
+        keywordCounts.set(keyword, (keywordCounts.get(keyword) ?? 0) + 1)
+      }
+    }
+    // Sort by count descending
+    return Array.from(keywordCounts.entries())
+      .sort((a, b) => b[1] - a[1])
+      .map(([keyword]) => keyword)
+  })
+
+  // Filter predicates
+  function matchesTextFilter(pkg: NpmSearchResult, text: string, scope: SearchScope): boolean {
+    if (!text) return true
+
+    const pkgName = pkg.package.name.toLowerCase()
+    const pkgDescription = (pkg.package.description ?? '').toLowerCase()
+    const pkgKeywords = (pkg.package.keywords ?? []).map(k => k.toLowerCase())
+
+    // When scope is 'all', parse and handle operators
+    if (scope === 'all') {
+      const parsed = parseSearchOperators(text)
+
+      // If operators are present, use structured matching
+      if (hasSearchOperators(parsed)) {
+        // All specified operators must match (AND logic between operator types)
+        // Within each operator, any value can match (OR logic within operator)
+
+        if (parsed.name?.length) {
+          const nameMatches = parsed.name.some(n => pkgName.includes(n.toLowerCase()))
+          if (!nameMatches) return false
+        }
+
+        if (parsed.description?.length) {
+          const descMatches = parsed.description.some(d => pkgDescription.includes(d.toLowerCase()))
+          if (!descMatches) return false
+        }
+
+        if (parsed.keywords?.length) {
+          const kwMatches = parsed.keywords.some(kw =>
+            pkgKeywords.some(pk => pk.includes(kw.toLowerCase())),
+          )
+          if (!kwMatches) return false
+        }
+
+        // If there's remaining text, it must match somewhere
+        if (parsed.text) {
+          const textLower = parsed.text.toLowerCase()
+          const textMatches =
+            pkgName.includes(textLower) ||
+            pkgDescription.includes(textLower) ||
+            pkgKeywords.some(k => k.includes(textLower))
+          if (!textMatches) return false
+        }
+
+        return true
+      }
+
+      // No operators - fall through to standard 'all' search
+      const lower = text.toLowerCase()
+      return (
+        pkgName.includes(lower) ||
+        pkgDescription.includes(lower) ||
+        pkgKeywords.some(k => k.includes(lower))
+      )
+    }
+
+    // Non-'all' scopes - simple matching
+    const lower = text.toLowerCase()
+    switch (scope) {
+      case 'name':
+        return pkgName.includes(lower)
+      case 'description':
+        return pkgDescription.includes(lower)
+      case 'keywords':
+        return pkgKeywords.some(k => k.includes(lower))
+      default:
+        return pkgName.includes(lower)
+    }
+  }
+
+  function matchesDownloadRange(pkg: NpmSearchResult, range: DownloadRange): boolean {
+    if (range === 'any') return true
+    const downloads = pkg.downloads?.weekly ?? 0
+    const config = DOWNLOAD_RANGES.find(r => r.value === range)
+    if (!config) return true
+    if (config.min !== undefined && downloads < config.min) return false
+    if (config.max !== undefined && downloads >= config.max) return false
+    return true
+  }
+
+  function matchesUpdatedWithin(pkg: NpmSearchResult, within: UpdatedWithin): boolean {
+    if (within === 'any') return true
+    const config = UPDATED_WITHIN_OPTIONS.find(o => o.value === within)
+    if (!config?.days) return true
+
+    const updatedDate = new Date(pkg.updated ?? pkg.package.date)
+    const cutoff = new Date()
+    cutoff.setDate(cutoff.getDate() - config.days)
+    return updatedDate >= cutoff
+  }
+
+  // Apply all filters
+  const filteredPackages = computed(() => {
+    return packages.value.filter(pkg => {
+      if (!matchesTextFilter(pkg, filters.value.text, filters.value.searchScope)) return false
+      if (!matchesDownloadRange(pkg, filters.value.downloadRange)) return false
+      if (!matchesKeywords(pkg, filters.value.keywords)) return false
+      if (!matchesSecurity(pkg, filters.value.security)) return false
+      if (!matchesUpdatedWithin(pkg, filters.value.updatedWithin)) return false
+      return true
+    })
+  })
+
+  // Sort comparators
+  function comparePackages(a: NpmSearchResult, b: NpmSearchResult, option: SortOption): number {
+    const { key, direction } = parseSortOption(option)
+    const multiplier = direction === 'asc' ? 1 : -1
+
+    let diff: number
+    switch (key) {
+      case 'downloads-week':
+        diff = (a.downloads?.weekly ?? 0) - (b.downloads?.weekly ?? 0)
+        break
+      case 'downloads-day':
+      case 'downloads-month':
+      case 'downloads-year':
+        // Not yet implemented - fall back to weekly
+        diff = (a.downloads?.weekly ?? 0) - (b.downloads?.weekly ?? 0)
+        break
+      case 'updated':
+        diff =
+          new Date(a.updated ?? a.package.date).getTime() -
+          new Date(b.updated ?? b.package.date).getTime()
+        break
+      case 'name':
+        diff = a.package.name.localeCompare(b.package.name)
+        break
+      case 'quality':
+        diff = (a.score?.detail?.quality ?? 0) - (b.score?.detail?.quality ?? 0)
+        break
+      case 'popularity':
+        diff = (a.score?.detail?.popularity ?? 0) - (b.score?.detail?.popularity ?? 0)
+        break
+      case 'maintenance':
+        diff = (a.score?.detail?.maintenance ?? 0) - (b.score?.detail?.maintenance ?? 0)
+        break
+      case 'score':
+        diff = (a.score?.final ?? 0) - (b.score?.final ?? 0)
+        break
+      case 'relevance':
+        // Relevance preserves server order (already sorted by search relevance)
+        diff = 0
+        break
+      default:
+        diff = 0
+    }
+
+    return diff * multiplier
+  }
+
+  // Apply sorting to filtered results
+  const sortedPackages = computed(() => {
+    return [...filteredPackages.value].sort((a, b) => comparePackages(a, b, sortOption.value))
+  })
+
+  // Active filter chips for display
+  const activeFilters = computed<FilterChip[]>(() => {
+    const chips: FilterChip[] = []
+
+    if (filters.value.text) {
+      chips.push({
+        id: 'text',
+        type: 'text',
+        label: 'Search',
+        value: filters.value.text,
+      })
+    }
+
+    if (filters.value.downloadRange !== 'any') {
+      const config = DOWNLOAD_RANGES.find(r => r.value === filters.value.downloadRange)
+      chips.push({
+        id: 'downloadRange',
+        type: 'downloadRange',
+        label: 'Downloads',
+        value: config?.label ?? filters.value.downloadRange,
+      })
+    }
+
+    for (const keyword of filters.value.keywords) {
+      chips.push({
+        id: `keyword-${keyword}`,
+        type: 'keywords',
+        label: 'Keyword',
+        value: keyword,
+      })
+    }
+
+    if (filters.value.security !== 'all') {
+      const config = SECURITY_FILTER_OPTIONS.find(o => o.value === filters.value.security)
+      chips.push({
+        id: 'security',
+        type: 'security',
+        label: 'Security',
+        value: config?.label ?? filters.value.security,
+      })
+    }
+
+    if (filters.value.updatedWithin !== 'any') {
+      const config = UPDATED_WITHIN_OPTIONS.find(o => o.value === filters.value.updatedWithin)
+      chips.push({
+        id: 'updatedWithin',
+        type: 'updatedWithin',
+        label: 'Updated',
+        value: config?.label ?? filters.value.updatedWithin,
+      })
+    }
+
+    return chips
+  })
+
+  // Check if any filters are active
+  const hasActiveFilters = computed(() => activeFilters.value.length > 0)
+
+  // Filter update helpers
+  function setTextFilter(text: string) {
+    filters.value.text = text
+  }
+
+  function setSearchScope(scope: SearchScope) {
+    filters.value.searchScope = scope
+  }
+
+  function setDownloadRange(range: DownloadRange) {
+    filters.value.downloadRange = range
+  }
+
+  function addKeyword(keyword: string) {
+    if (!filters.value.keywords.includes(keyword)) {
+      filters.value.keywords = [...filters.value.keywords, keyword]
+    }
+  }
+
+  function removeKeyword(keyword: string) {
+    filters.value.keywords = filters.value.keywords.filter(k => k !== keyword)
+  }
+
+  function toggleKeyword(keyword: string) {
+    if (filters.value.keywords.includes(keyword)) {
+      removeKeyword(keyword)
+    } else {
+      addKeyword(keyword)
+    }
+  }
+
+  function setSecurity(security: SecurityFilter) {
+    filters.value.security = security
+  }
+
+  function setUpdatedWithin(within: UpdatedWithin) {
+    filters.value.updatedWithin = within
+  }
+
+  function clearFilter(chip: FilterChip) {
+    switch (chip.type) {
+      case 'text':
+        filters.value.text = ''
+        break
+      case 'downloadRange':
+        filters.value.downloadRange = 'any'
+        break
+      case 'keywords':
+        removeKeyword(chip.value as string)
+        break
+      case 'security':
+        filters.value.security = 'all'
+        break
+      case 'updatedWithin':
+        filters.value.updatedWithin = 'any'
+        break
+    }
+  }
+
+  function clearAllFilters() {
+    filters.value = { ...DEFAULT_FILTERS }
+  }
+
+  function setSort(option: SortOption) {
+    sortOption.value = option
+  }
+
+  return {
+    // State
+    filters,
+    sortOption,
+
+    // Derived
+    filteredPackages,
+    sortedPackages,
+    availableKeywords,
+    activeFilters,
+    hasActiveFilters,
+
+    // Filter setters
+    setTextFilter,
+    setSearchScope,
+    setDownloadRange,
+    addKeyword,
+    removeKeyword,
+    toggleKeyword,
+    setSecurity,
+    setUpdatedWithin,
+    clearFilter,
+    clearAllFilters,
+
+    // Sort setter
+    setSort,
+  }
+}
diff --git a/app/composables/useVirtualInfiniteScroll.ts b/app/composables/useVirtualInfiniteScroll.ts
index a9d320e2d..4b0160aa1 100644
--- a/app/composables/useVirtualInfiniteScroll.ts
+++ b/app/composables/useVirtualInfiniteScroll.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 
 export interface WindowVirtualizerHandle {
   readonly scrollOffset: number
@@ -20,8 +20,8 @@ export interface UseVirtualInfiniteScrollOptions {
   hasMore: Ref<boolean>
   /** Whether currently loading */
   isLoading: Ref<boolean>
-  /** Page size for calculating current page */
-  pageSize: number
+  /** Page size for calculating current page (reactive) */
+  pageSize: MaybeRefOrGetter<number>
   /** Threshold in items before end to trigger load */
   threshold?: number
   /** Callback to load more items */
@@ -60,7 +60,8 @@ export function useVirtualInfiniteScroll(options: UseVirtualInfiniteScrollOption
 
     // Calculate current visible page based on first visible item
     const startIndex = list.findItemIndex(list.scrollOffset)
-    const newPage = Math.floor(startIndex / pageSize) + 1
+    const currentPageSize = toValue(pageSize)
+    const newPage = Math.floor(startIndex / currentPageSize) + 1
 
     if (newPage !== currentPage.value && onPageChange) {
       currentPage.value = newPage
@@ -92,7 +93,7 @@ export function useVirtualInfiniteScroll(options: UseVirtualInfiniteScrollOption
     const list = listRef.value
     if (!list || page < 1) return
 
-    const targetIndex = (page - 1) * pageSize
+    const targetIndex = (page - 1) * toValue(pageSize)
     list.scrollToIndex(targetIndex, { align: 'start' })
     currentPage.value = page
   }
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index 296462c0a..328e1a689 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatNumber } from '#imports'
+import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { debounce } from 'perfect-debounce'
 
 definePageMeta({
@@ -14,28 +15,6 @@ const orgName = computed(() => route.params.org)
 
 const { isConnected } = useConnector()
 
-// Debounced URL update for filter/sort
-const updateUrl = debounce((updates: { filter?: string; sort?: string }) => {
-  router.replace({
-    query: {
-      ...route.query,
-      q: updates.filter || undefined,
-      sort: updates.sort && updates.sort !== 'downloads' ? updates.sort : undefined,
-    },
-  })
-}, 300)
-
-type SortOption = 'downloads' | 'updated' | 'name-asc' | 'name-desc'
-
-// Filter and sort state (from URL)
-const filterText = ref((route.query.q as string) ?? '')
-const sortOption = ref<SortOption>((route.query.sort as SortOption) || 'downloads')
-
-// Update URL when filter/sort changes (debounced)
-watch([filterText, sortOption], ([filter, sort]) => {
-  updateUrl({ filter, sort })
-})
-
 // Fetch all packages in this org using the org packages API
 const { data: results, status, error } = await useOrgPackages(orgName)
 
@@ -50,52 +29,91 @@ if (status.value === 'error' && error.value?.statusCode === 404) {
 const packages = computed(() => results.value?.objects ?? [])
 const packageCount = computed(() => packages.value.length)
 
-// Apply client-side filter and sort
-const filteredAndSortedPackages = computed(() => {
-  let pkgs = [...packages.value]
-
-  // Apply text filter
-  if (filterText.value) {
-    const search = filterText.value.toLowerCase()
-    pkgs = pkgs.filter(
-      pkg =>
-        pkg.package.name.toLowerCase().includes(search) ||
-        pkg.package.description?.toLowerCase().includes(search),
-    )
-  }
+// Preferences (persisted to localStorage)
+const { viewMode, paginationMode, pageSize, columns, toggleColumn, resetColumns } =
+  usePackageListPreferences()
+
+// Structured filters and sorting
+const {
+  filters,
+  sortOption,
+  sortedPackages,
+  availableKeywords,
+  activeFilters,
+  setTextFilter,
+  setSearchScope,
+  setDownloadRange,
+  setSecurity,
+  setUpdatedWithin,
+  toggleKeyword,
+  clearFilter,
+  clearAllFilters,
+  setSort,
+} = useStructuredFilters({
+  packages,
+  initialFilters: {
+    text: (route.query.q as string) ?? '',
+  },
+  initialSort: (route.query.sort as SortOption) ?? 'updated-desc',
+})
+
+// Pagination state
+const currentPage = ref(1)
+
+// Calculate total pages
+const totalPages = computed(() => {
+  if (pageSize.value === 'all') return 1
+  const numericSize = typeof pageSize.value === 'number' ? pageSize.value : 25
+  return Math.ceil(sortedPackages.value.length / numericSize)
+})
+
+// Reset to page 1 when filters change
+watch([filters, sortOption], () => {
+  currentPage.value = 1
+})
 
-  // Apply sort
-  switch (sortOption.value) {
-    case 'updated':
-      pkgs.sort((a, b) => {
-        const dateA = a.updated || a.package.date || ''
-        const dateB = b.updated || b.package.date || ''
-        return dateB.localeCompare(dateA)
-      })
-      break
-    case 'name-asc':
-      pkgs.sort((a, b) => a.package.name.localeCompare(b.package.name))
-      break
-    case 'name-desc':
-      pkgs.sort((a, b) => b.package.name.localeCompare(a.package.name))
-      break
-    case 'downloads':
-    default:
-      pkgs.sort((a, b) => (b.downloads?.weekly ?? 0) - (a.downloads?.weekly ?? 0))
-      break
+// Clamp current page when total pages decreases (e.g., after filtering)
+watch(totalPages, newTotal => {
+  if (currentPage.value > newTotal && newTotal > 0) {
+    currentPage.value = newTotal
   }
+})
+
+// Debounced URL update for filter/sort
+const updateUrl = debounce((updates: { filter?: string; sort?: string }) => {
+  router.replace({
+    query: {
+      ...route.query,
+      q: updates.filter || undefined,
+      sort: updates.sort && updates.sort !== 'updated-desc' ? updates.sort : undefined,
+    },
+  })
+}, 300)
 
-  return pkgs
+// Update URL when filter/sort changes (debounced)
+watch([() => filters.value.text, sortOption], ([filter, sort]) => {
+  updateUrl({ filter, sort })
 })
 
-const filteredCount = computed(() => filteredAndSortedPackages.value.length)
+const filteredCount = computed(() => sortedPackages.value.length)
 
 // Reset state when org changes
 watch(orgName, () => {
-  filterText.value = ''
-  sortOption.value = 'downloads'
+  clearAllFilters()
+  setSort('updated-desc')
+  currentPage.value = 1
 })
 
+// Handle filter chip removal
+function handleClearFilter(chip: FilterChip) {
+  clearFilter(chip)
+}
+
+// Handle sort change from table
+function handleSortChange(option: SortOption) {
+  setSort(option)
+}
+
 const activeTab = ref<'members' | 'teams'>('members')
 
 // Canonical URL for this org page
@@ -216,24 +234,57 @@ defineOgImageComponent('Default', {
         {{ $t('org.page.packages_title') }}
       </h2>
 
-      <!-- Filter and sort controls -->
-      <PackageListControls
-        v-model:filter="filterText"
-        v-model:sort="sortOption"
-        :placeholder="$t('org.page.filter_placeholder', { count: packageCount })"
+      <!-- Enhanced toolbar with filters -->
+      <PackageListToolbar
+        :filters="filters"
+        v-model:sort-option="sortOption"
+        v-model:view-mode="viewMode"
+        :columns="columns"
+        v-model:pagination-mode="paginationMode"
+        v-model:page-size="pageSize"
         :total-count="packageCount"
         :filtered-count="filteredCount"
+        :available-keywords="availableKeywords"
+        :active-filters="activeFilters"
+        @toggle-column="toggleColumn"
+        @reset-columns="resetColumns"
+        @clear-filter="handleClearFilter"
+        @clear-all-filters="clearAllFilters"
+        @update:text="setTextFilter"
+        @update:search-scope="setSearchScope"
+        @update:download-range="setDownloadRange"
+        @update:security="setSecurity"
+        @update:updated-within="setUpdatedWithin"
+        @toggle-keyword="toggleKeyword"
       />
 
       <!-- No results after filtering -->
-      <p
-        v-if="filteredAndSortedPackages.length === 0"
-        class="text-fg-muted py-8 text-center font-mono"
-      >
-        {{ $t('org.page.no_match', { query: filterText }) }}
+      <p v-if="sortedPackages.length === 0" class="text-fg-muted py-8 text-center font-mono">
+        {{ $t('org.page.no_match', { query: filters.text }) }}
       </p>
 
-      <PackageList v-else :results="filteredAndSortedPackages" />
+      <!-- Package list with view mode support -->
+      <template v-else>
+        <PackageList
+          :results="sortedPackages"
+          :view-mode="viewMode"
+          :columns="columns"
+          v-model:sort-option="sortOption"
+          :pagination-mode="paginationMode"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @click-keyword="toggleKeyword"
+        />
+
+        <!-- Pagination controls -->
+        <PaginationControls
+          v-model:mode="paginationMode"
+          v-model:page-size="pageSize"
+          v-model:current-page="currentPage"
+          :total-items="sortedPackages.length"
+          :view-mode="viewMode"
+        />
+      </template>
     </section>
   </main>
 </template>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index f8edc9ce9..1453f3f65 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatNumber } from '#imports'
+import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { debounce } from 'perfect-debounce'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 import { isPlatformSpecificPackage } from '~/utils/platform-packages'
@@ -7,6 +8,16 @@ import { isPlatformSpecificPackage } from '~/utils/platform-packages'
 const route = useRoute()
 const router = useRouter()
 
+// Preferences (persisted to localStorage)
+const {
+  viewMode,
+  paginationMode,
+  pageSize: preferredPageSize,
+  columns,
+  toggleColumn,
+  resetColumns,
+} = usePackageListPreferences()
+
 // Local input value (updates immediately as user types)
 const inputValue = ref((route.query.q as string) ?? '')
 
@@ -51,8 +62,6 @@ const { focused: isSearchFocused } = useFocus(searchInputRef)
 const selectedIndex = ref(0)
 const packageListRef = useTemplateRef('packageListRef')
 
-const resultCount = computed(() => visibleResults.value?.objects.length ?? 0)
-
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = ref(false)
 onMounted(() => {
@@ -64,10 +73,16 @@ onMounted(() => {
   }, 300)
 })
 
-// Infinite scroll state
-const pageSize = 20
-const loadedPages = ref(1)
-const isLoadingMore = ref(false)
+// Infinite scroll / pagination state
+const pageSize = 25
+const currentPage = ref(1)
+
+// Calculate how many results we need based on current page and preferred page size
+const requestedSize = computed(() => {
+  const numericPrefSize = preferredPageSize.value === 'all' ? 250 : preferredPageSize.value
+  // Always fetch at least enough for the current page
+  return Math.max(pageSize, currentPage.value * numericPrefSize)
+})
 
 // Get initial page from URL (for scroll restoration on reload)
 const initialPage = computed(() => {
@@ -75,52 +90,44 @@ const initialPage = computed(() => {
   return Number.isNaN(p) ? 1 : Math.max(1, p)
 })
 
-// Initialize loaded pages from URL on mount
+// Initialize current page from URL on mount
 onMounted(() => {
   if (initialPage.value > 1) {
-    // Load enough pages to show the initial page
-    loadedPages.value = initialPage.value
+    currentPage.value = initialPage.value
   }
 })
 
-// fetch all pages up to current
-const { data: results, status } = useNpmSearch(query, () => ({
-  size: pageSize * loadedPages.value,
-  from: 0,
+// Use incremental search with client-side caching
+const {
+  data: results,
+  status,
+  isLoadingMore,
+  hasMore,
+  fetchMore,
+} = useNpmSearch(query, () => ({
+  size: requestedSize.value,
+  incremental: true,
 }))
 
-// Keep track of previous results to show while loading
-// Use useState so the value persists from SSR to client hydration
+// Track previous query for UI continuity
 const previousQuery = useState('search-previous-query', () => query.value)
-const cachedResults = ref(results.value)
-
-// Update cached results smartly
-watch([results, query], ([newResults, newQuery]) => {
-  if (newResults) {
-    cachedResults.value = newResults
-    previousQuery.value = newQuery
-  }
-})
 
-// Determine if we should show previous results while loading
-// (when new query is a continuation of the old one)
-const isQueryContinuation = computed(() => {
-  const current = query.value.toLowerCase()
-  const previous = previousQuery.value.toLowerCase()
-  return previous && current.startsWith(previous)
-})
+// Update previous query when results change
+watch(
+  () => results.value,
+  newResults => {
+    if (newResults && newResults.objects.length > 0) {
+      previousQuery.value = query.value
+    }
+  },
+)
 
 const resultsMatchQuery = computed(() => {
   return previousQuery.value === query.value
 })
 
-// Show cached results while loading if it's a continuation query
-const rawVisibleResults = computed(() => {
-  if (status.value === 'pending' && isQueryContinuation.value && cachedResults.value) {
-    return cachedResults.value
-  }
-  return results.value
-})
+// Results to display (directly from incremental search)
+const rawVisibleResults = computed(() => results.value)
 
 // Settings for platform package filtering
 const { settings } = useSettings()
@@ -164,14 +171,59 @@ const visibleResults = computed(() => {
   }
 })
 
+// Use structured filters for client-side refinement of search results
+const resultsArray = computed(() => visibleResults.value?.objects ?? [])
+
+// Minimal structured filters usage for search context (no client-side filtering)
+const {
+  filters,
+  sortOption,
+  sortedPackages,
+  availableKeywords,
+  activeFilters,
+  setTextFilter,
+  setSearchScope,
+  setDownloadRange,
+  setSecurity,
+  setUpdatedWithin,
+  toggleKeyword,
+  clearFilter,
+  clearAllFilters,
+  setSort,
+} = useStructuredFilters({
+  packages: resultsArray,
+  initialSort: 'relevance-desc', // Default to search relevance
+})
+
+// Client-side filtered/sorted results for display
+// In search context, we always use server order (relevance) - no client-side filtering
+const displayResults = computed(() => {
+  // When using relevance sort, return original server-sorted results
+  if (sortOption.value === 'relevance-desc' || sortOption.value === 'relevance-asc') {
+    return resultsArray.value
+  }
+
+  return sortedPackages.value
+})
+
+const resultCount = computed(() => displayResults.value.length)
+
+// Handle filter chip removal
+function handleClearFilter(chip: FilterChip) {
+  clearFilter(chip)
+}
+
+// Handle sort change from table
+function handleSortChange(option: SortOption) {
+  setSort(option)
+}
+
 // Should we show the loading spinner?
 const showSearching = computed(() => {
   // Don't show during initial page load (view transition)
   if (!hasInteracted.value) return false
-  // Don't show if we're displaying cached results
-  if (status.value === 'pending' && isQueryContinuation.value && cachedResults.value) return false
-  // Show if pending on first page
-  return status.value === 'pending' && loadedPages.value === 1
+  // Show if pending and no results yet
+  return status.value === 'pending' && displayResults.value.length === 0
 })
 
 const totalPages = computed(() => {
@@ -179,21 +231,12 @@ const totalPages = computed(() => {
   return Math.ceil(visibleResults.value.total / pageSize)
 })
 
-const hasMore = computed(() => {
-  return loadedPages.value < totalPages.value
-})
-
 // Load more when triggered by infinite scroll
-function loadMore() {
+async function loadMore() {
   if (isLoadingMore.value || !hasMore.value) return
-
-  isLoadingMore.value = true
-  loadedPages.value++
-
-  // Reset loading state after data updates
-  nextTick(() => {
-    isLoadingMore.value = false
-  })
+  // Increase requested size to trigger fetch
+  currentPage.value++
+  await fetchMore(requestedSize.value)
 }
 
 // Update URL when page changes from scrolling
@@ -201,9 +244,9 @@ function handlePageChange(page: number) {
   updateUrlPage(page)
 }
 
-// Reset pages when query changes
+// Reset page when query changes
 watch(query, () => {
-  loadedPages.value = 1
+  currentPage.value = 1
   hasInteracted.value = true
 })
 
@@ -812,16 +855,56 @@ defineOgImageComponent('Default', {
             </button>
           </div>
 
-          <p
-            v-if="visibleResults.total > 0"
-            role="status"
-            class="text-fg-muted text-sm mb-6 font-mono"
-          >
-            {{ $t('search.found_packages', { count: formatNumber(visibleResults.total) }) }}
-            <span v-if="status === 'pending'" class="text-fg-subtle">{{
-              $t('search.updating')
-            }}</span>
-          </p>
+          <!-- Enhanced toolbar -->
+          <div v-if="visibleResults.total > 0" class="mb-6">
+            <PackageListToolbar
+              :filters="filters"
+              v-model:sort-option="sortOption"
+              v-model:view-mode="viewMode"
+              :columns="columns"
+              v-model:pagination-mode="paginationMode"
+              v-model:page-size="preferredPageSize"
+              :total-count="visibleResults.total"
+              :filtered-count="displayResults.length"
+              :available-keywords="availableKeywords"
+              :active-filters="activeFilters"
+              search-context
+              @toggle-column="toggleColumn"
+              @reset-columns="resetColumns"
+              @clear-filter="handleClearFilter"
+              @clear-all-filters="clearAllFilters"
+              @update:text="setTextFilter"
+              @update:search-scope="setSearchScope"
+              @update:download-range="setDownloadRange"
+              @update:security="setSecurity"
+              @update:updated-within="setUpdatedWithin"
+              @toggle-keyword="toggleKeyword"
+            />
+            <!-- Show "Found X packages" (infinite scroll mode only) -->
+            <p
+              v-if="viewMode === 'cards' && paginationMode === 'infinite'"
+              role="status"
+              class="text-fg-muted text-sm mt-4 font-mono"
+            >
+              {{ $t('search.found_packages', { count: formatNumber(visibleResults.total) }) }}
+              <span v-if="status === 'pending'" class="text-fg-subtle">{{
+                $t('search.updating')
+              }}</span>
+            </p>
+            <!-- Show "x of y packages" (paginated/table mode only) -->
+            <p
+              v-if="viewMode === 'table' || paginationMode === 'paginated'"
+              role="status"
+              class="text-fg-muted text-sm mt-4 font-mono"
+            >
+              {{
+                $t('filters.count.showing_paginated', {
+                  pageSize: preferredPageSize === 'all' ? visibleResults.total : preferredPageSize,
+                  total: visibleResults.total.toLocaleString(),
+                })
+              }}
+            </p>
+          </div>
 
           <!-- No results found -->
           <div v-else-if="status !== 'pending'" role="status" class="py-12">
@@ -862,20 +945,36 @@ defineOgImageComponent('Default', {
           </div>
 
           <PackageList
-            v-if="visibleResults.objects.length > 0"
+            v-if="displayResults.length > 0"
             ref="packageListRef"
-            :results="visibleResults.objects"
+            :results="displayResults"
             :selected-index="selectedIndex"
             :search-query="query"
             heading-level="h2"
             show-publisher
             :has-more="hasMore"
-            :is-loading="isLoadingMore || (status === 'pending' && loadedPages > 1)"
-            :page-size="pageSize"
+            :is-loading="isLoadingMore"
+            :page-size="preferredPageSize"
             :initial-page="initialPage"
+            :view-mode="viewMode"
+            :columns="columns"
+            v-model:sort-option="sortOption"
+            :pagination-mode="paginationMode"
+            :current-page="currentPage"
             @load-more="loadMore"
             @page-change="handlePageChange"
             @select="handlePackageSelect"
+            @click-keyword="toggleKeyword"
+          />
+
+          <!-- Pagination controls -->
+          <PaginationControls
+            v-if="displayResults.length > 0"
+            v-model:mode="paginationMode"
+            v-model:page-size="preferredPageSize"
+            v-model:current-page="currentPage"
+            :total-items="visibleResults?.total ?? displayResults.length"
+            :view-mode="viewMode"
           />
         </div>
       </section>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 7bea255e5..a99718dd7 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -10,8 +10,7 @@ const username = computed(() => route.params.username)
 // Infinite scroll state
 const pageSize = 50
 const maxResults = 250 // npm API hard limit
-const loadedPages = ref(1)
-const isLoadingMore = ref(false)
+const currentPage = ref(1)
 
 // Get initial page from URL (for scroll restoration on reload)
 const initialPage = computed(() => {
@@ -60,20 +59,23 @@ watch([filterText, sortOption], ([filter, sort]) => {
 const searchQuery = computed(() => `maintainer:${username.value}`)
 
 // Request size: load all if user has interacted with filter/sort, otherwise paginate
-const requestSize = computed(() => (hasLoadedAll.value ? maxResults : pageSize * loadedPages.value))
+const requestSize = computed(() => (hasLoadedAll.value ? maxResults : pageSize * currentPage.value))
 
 const {
   data: results,
   status,
   error,
+  isLoadingMore,
+  hasMore: apiHasMore,
+  fetchMore,
 } = useNpmSearch(searchQuery, () => ({
   size: requestSize.value,
 }))
 
-// Initialize loaded pages from URL on mount
+// Initialize current page from URL on mount
 onMounted(() => {
   if (initialPage.value > 1) {
-    loadedPages.value = initialPage.value
+    currentPage.value = initialPage.value
   }
 })
 
@@ -127,23 +129,15 @@ const hasMore = computed(() => {
   if (!results.value) return false
   // Don't show "load more" when we've already loaded all
   if (hasLoadedAll.value) return false
-
-  // npm search API returns max 250 results, but we paginate for faster initial load
-  return (
-    results.value.objects.length >= pageSize * loadedPages.value &&
-    loadedPages.value * pageSize < maxResults
-  )
+  // Use API's hasMore, but cap at maxResults
+  if (!apiHasMore.value) return false
+  return results.value.objects.length < maxResults
 })
 
-function loadMore() {
+async function loadMore() {
   if (isLoadingMore.value || !hasMore.value) return
-
-  isLoadingMore.value = true
-  loadedPages.value++
-
-  nextTick(() => {
-    isLoadingMore.value = false
-  })
+  currentPage.value++
+  await fetchMore(requestSize.value)
 }
 
 // Update URL when page changes from scrolling
@@ -153,7 +147,7 @@ function handlePageChange(page: number) {
 
 // Reset state when username changes
 watch(username, () => {
-  loadedPages.value = 1
+  currentPage.value = 1
   filterText.value = ''
   sortOption.value = 'downloads'
   hasLoadedAll.value = false
@@ -208,7 +202,7 @@ defineOgImageComponent('Default', {
 
     <!-- Loading state -->
     <LoadingSpinner
-      v-if="status === 'pending' && loadedPages === 1"
+      v-if="status === 'pending' && currentPage === 1"
       :text="$t('common.loading_packages')"
     />
 
@@ -255,7 +249,7 @@ defineOgImageComponent('Default', {
         v-else
         :results="filteredAndSortedPackages"
         :has-more="hasMore"
-        :is-loading="isLoadingMore || (status === 'pending' && loadedPages > 1)"
+        :is-loading="isLoadingMore || (status === 'pending' && currentPage > 1)"
         :page-size="pageSize"
         :initial-page="initialPage"
         @load-more="loadMore"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 805f079a4..363baa7dc 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -545,6 +545,112 @@
       "label": "jsr"
     }
   },
+  "filters": {
+    "title": "Filters",
+    "search": "Search",
+    "search_scope": "Search scope",
+    "search_placeholder_name": "Filter by package name...",
+    "search_placeholder_description": "Filter by description...",
+    "search_placeholder_keywords": "Filter by keywords...",
+    "search_placeholder_all": "Search all or use name: desc: kw:",
+    "scope_name": "Name",
+    "scope_name_description": "Search package names only",
+    "scope_description": "Description",
+    "scope_description_description": "Search descriptions only",
+    "scope_keywords": "Keywords",
+    "scope_keywords_description": "Search keywords only",
+    "scope_all": "All",
+    "scope_all_description": "Search all fields, supports name: desc: kw: operators",
+    "weekly_downloads": "Weekly downloads",
+    "updated_within": "Updated within",
+    "security": "Security",
+    "keywords": "Keywords",
+    "more_keywords": "+{count} more",
+    "clear_all": "Clear all",
+    "remove_filter": "Remove {label} filter",
+    "download_range": {
+      "any": "Any",
+      "lt100": "< 100",
+      "100_1k": "100 - 1K",
+      "1k_10k": "1K - 10K",
+      "10k_100k": "10K - 100K",
+      "gt100k": "> 100K"
+    },
+    "updated": {
+      "any": "Any time",
+      "week": "Past week",
+      "month": "Past month",
+      "quarter": "Past 3 months",
+      "year": "Past year"
+    },
+    "security_options": {
+      "all": "All packages",
+      "secure": "Without warnings",
+      "insecure": "With warnings"
+    },
+    "sort": {
+      "label": "Sort packages",
+      "toggle_direction": "Toggle sort direction",
+      "ascending": "Ascending",
+      "descending": "Descending",
+      "relevance": "Relevance",
+      "downloads_week": "Downloads/wk",
+      "downloads_day": "Downloads/day",
+      "downloads_month": "Downloads/mo",
+      "downloads_year": "Downloads/yr",
+      "updated": "Last Updated",
+      "name": "Name",
+      "quality": "Quality",
+      "popularity": "Popularity",
+      "maintenance": "Maintenance",
+      "score": "Score"
+    },
+    "columns": {
+      "title": "Columns",
+      "show": "Show columns",
+      "reset": "Reset to defaults",
+      "coming_soon": "Coming soon",
+      "name": "Name",
+      "version": "Version",
+      "description": "Description",
+      "downloads": "Downloads/wk",
+      "updated": "Last Updated",
+      "maintainers": "Maintainers",
+      "keywords": "Keywords",
+      "quality_score": "Quality score",
+      "popularity_score": "Popularity score",
+      "maintenance_score": "Maintenance score",
+      "combined_score": "Combined score",
+      "security": "Security"
+    },
+    "view_mode": {
+      "label": "View mode",
+      "cards": "Card view",
+      "table": "Table view"
+    },
+    "pagination": {
+      "mode_label": "Pagination mode",
+      "infinite": "Infinite",
+      "paginated": "Paginated",
+      "items_per_page": "Items per page",
+      "per_page": "{count} / page",
+      "all_yolo": "All (YOLO)",
+      "showing": "{start}-{end} of {total}",
+      "previous": "Previous page",
+      "next": "Next page",
+      "nav_label": "Pagination"
+    },
+    "count": {
+      "showing_filtered": "{filtered} of {total} packages",
+      "showing_all": "{total} packages",
+      "showing_paginated": "{pageSize} of {total} packages"
+    },
+    "table": {
+      "security_warning": "Security warning",
+      "secure": "Secure",
+      "no_packages": "No packages found"
+    }
+  },
   "about": {
     "title": "About",
     "heading": "about",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 2ba17a7a3..27eb97ff6 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -494,6 +494,112 @@
       "label": "jsr"
     }
   },
+  "filters": {
+    "title": "Filtres",
+    "search": "Recherche",
+    "search_scope": "Portée de la recherche",
+    "search_placeholder_name": "Filtrer par nom de paquet...",
+    "search_placeholder_description": "Filtrer par description...",
+    "search_placeholder_keywords": "Filtrer par mots-clés...",
+    "search_placeholder_all": "Rechercher ou utiliser name: desc: kw:",
+    "scope_name": "Nom",
+    "scope_name_description": "Rechercher uniquement les noms de paquets",
+    "scope_description": "Description",
+    "scope_description_description": "Rechercher uniquement les descriptions",
+    "scope_keywords": "Mots-clés",
+    "scope_keywords_description": "Rechercher uniquement les mots-clés",
+    "scope_all": "Tout",
+    "scope_all_description": "Rechercher tous les champs, supporte les opérateurs name: desc: kw:",
+    "weekly_downloads": "Téléchargements hebdomadaires",
+    "updated_within": "Mis à jour d'ici",
+    "security": "Sécurité",
+    "keywords": "Mots-clés",
+    "more_keywords": "+{count} de plus",
+    "clear_all": "Tout effacer",
+    "remove_filter": "Supprimer le filtre {label}",
+    "download_range": {
+      "any": "Tous",
+      "lt100": "< 100",
+      "100_1k": "100 - 1K",
+      "1k_10k": "1K - 10K",
+      "10k_100k": "10K - 100K",
+      "gt100k": "> 100K"
+    },
+    "updated": {
+      "any": "N'importe quand",
+      "week": "Semaine passée",
+      "month": "Mois passé",
+      "quarter": "3 derniers mois",
+      "year": "Année passée"
+    },
+    "security_options": {
+      "all": "Tous les paquets",
+      "secure": "Sans avertissements",
+      "insecure": "Avec avertissements"
+    },
+    "sort": {
+      "label": "Trier les paquets",
+      "toggle_direction": "Inverser l'ordre",
+      "ascending": "Croissant",
+      "descending": "Décroissant",
+      "relevance": "Pertinence",
+      "downloads_week": "Téléch./sem",
+      "downloads_day": "Téléch./jour",
+      "downloads_month": "Téléch./mois",
+      "downloads_year": "Téléch./an",
+      "updated": "Dern. mise à jour",
+      "name": "Nom",
+      "quality": "Qualité",
+      "popularity": "Popularité",
+      "maintenance": "Maintenance",
+      "score": "Score"
+    },
+    "columns": {
+      "title": "Colonnes",
+      "show": "Afficher les colonnes",
+      "reset": "Réinitialiser",
+      "coming_soon": "Bientôt disponible",
+      "name": "Nom",
+      "version": "Version",
+      "description": "Description",
+      "downloads": "Téléch./sem",
+      "updated": "Dern. mise à jour",
+      "maintainers": "Mainteneurs",
+      "keywords": "Mots-clés",
+      "quality_score": "Score de qualité",
+      "popularity_score": "Score de popularité",
+      "maintenance_score": "Score de maintenance",
+      "combined_score": "Score combiné",
+      "security": "Sécurité"
+    },
+    "view_mode": {
+      "label": "Mode d'affichage",
+      "cards": "Vue carte",
+      "table": "Vue tableau"
+    },
+    "pagination": {
+      "mode_label": "Mode de pagination",
+      "infinite": "Infini",
+      "paginated": "Paginé",
+      "items_per_page": "Éléments par page",
+      "per_page": "{count} / page",
+      "all_yolo": "Tout (YOLO)",
+      "showing": "{start}-{end} sur {total}",
+      "previous": "Page précédente",
+      "next": "Page suivante",
+      "nav_label": "Pagination"
+    },
+    "count": {
+      "showing_filtered": "{filtered} sur {total} paquets",
+      "showing_all": "{total} paquets",
+      "showing_paginated": "{pageSize} sur {total} paquets"
+    },
+    "table": {
+      "security_warning": "Avertissement de sécurité",
+      "secure": "Sécurisé",
+      "no_packages": "Aucun paquet trouvé"
+    }
+  },
   "about": {
     "title": "À propos",
     "heading": "à propos",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 805f079a4..363baa7dc 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -545,6 +545,112 @@
       "label": "jsr"
     }
   },
+  "filters": {
+    "title": "Filters",
+    "search": "Search",
+    "search_scope": "Search scope",
+    "search_placeholder_name": "Filter by package name...",
+    "search_placeholder_description": "Filter by description...",
+    "search_placeholder_keywords": "Filter by keywords...",
+    "search_placeholder_all": "Search all or use name: desc: kw:",
+    "scope_name": "Name",
+    "scope_name_description": "Search package names only",
+    "scope_description": "Description",
+    "scope_description_description": "Search descriptions only",
+    "scope_keywords": "Keywords",
+    "scope_keywords_description": "Search keywords only",
+    "scope_all": "All",
+    "scope_all_description": "Search all fields, supports name: desc: kw: operators",
+    "weekly_downloads": "Weekly downloads",
+    "updated_within": "Updated within",
+    "security": "Security",
+    "keywords": "Keywords",
+    "more_keywords": "+{count} more",
+    "clear_all": "Clear all",
+    "remove_filter": "Remove {label} filter",
+    "download_range": {
+      "any": "Any",
+      "lt100": "< 100",
+      "100_1k": "100 - 1K",
+      "1k_10k": "1K - 10K",
+      "10k_100k": "10K - 100K",
+      "gt100k": "> 100K"
+    },
+    "updated": {
+      "any": "Any time",
+      "week": "Past week",
+      "month": "Past month",
+      "quarter": "Past 3 months",
+      "year": "Past year"
+    },
+    "security_options": {
+      "all": "All packages",
+      "secure": "Without warnings",
+      "insecure": "With warnings"
+    },
+    "sort": {
+      "label": "Sort packages",
+      "toggle_direction": "Toggle sort direction",
+      "ascending": "Ascending",
+      "descending": "Descending",
+      "relevance": "Relevance",
+      "downloads_week": "Downloads/wk",
+      "downloads_day": "Downloads/day",
+      "downloads_month": "Downloads/mo",
+      "downloads_year": "Downloads/yr",
+      "updated": "Last Updated",
+      "name": "Name",
+      "quality": "Quality",
+      "popularity": "Popularity",
+      "maintenance": "Maintenance",
+      "score": "Score"
+    },
+    "columns": {
+      "title": "Columns",
+      "show": "Show columns",
+      "reset": "Reset to defaults",
+      "coming_soon": "Coming soon",
+      "name": "Name",
+      "version": "Version",
+      "description": "Description",
+      "downloads": "Downloads/wk",
+      "updated": "Last Updated",
+      "maintainers": "Maintainers",
+      "keywords": "Keywords",
+      "quality_score": "Quality score",
+      "popularity_score": "Popularity score",
+      "maintenance_score": "Maintenance score",
+      "combined_score": "Combined score",
+      "security": "Security"
+    },
+    "view_mode": {
+      "label": "View mode",
+      "cards": "Card view",
+      "table": "Table view"
+    },
+    "pagination": {
+      "mode_label": "Pagination mode",
+      "infinite": "Infinite",
+      "paginated": "Paginated",
+      "items_per_page": "Items per page",
+      "per_page": "{count} / page",
+      "all_yolo": "All (YOLO)",
+      "showing": "{start}-{end} of {total}",
+      "previous": "Previous page",
+      "next": "Next page",
+      "nav_label": "Pagination"
+    },
+    "count": {
+      "showing_filtered": "{filtered} of {total} packages",
+      "showing_all": "{total} packages",
+      "showing_paginated": "{pageSize} of {total} packages"
+    },
+    "table": {
+      "security_warning": "Security warning",
+      "secure": "Secure",
+      "no_packages": "No packages found"
+    }
+  },
   "about": {
     "title": "About",
     "heading": "about",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index 2ba17a7a3..27eb97ff6 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -494,6 +494,112 @@
       "label": "jsr"
     }
   },
+  "filters": {
+    "title": "Filtres",
+    "search": "Recherche",
+    "search_scope": "Portée de la recherche",
+    "search_placeholder_name": "Filtrer par nom de paquet...",
+    "search_placeholder_description": "Filtrer par description...",
+    "search_placeholder_keywords": "Filtrer par mots-clés...",
+    "search_placeholder_all": "Rechercher ou utiliser name: desc: kw:",
+    "scope_name": "Nom",
+    "scope_name_description": "Rechercher uniquement les noms de paquets",
+    "scope_description": "Description",
+    "scope_description_description": "Rechercher uniquement les descriptions",
+    "scope_keywords": "Mots-clés",
+    "scope_keywords_description": "Rechercher uniquement les mots-clés",
+    "scope_all": "Tout",
+    "scope_all_description": "Rechercher tous les champs, supporte les opérateurs name: desc: kw:",
+    "weekly_downloads": "Téléchargements hebdomadaires",
+    "updated_within": "Mis à jour d'ici",
+    "security": "Sécurité",
+    "keywords": "Mots-clés",
+    "more_keywords": "+{count} de plus",
+    "clear_all": "Tout effacer",
+    "remove_filter": "Supprimer le filtre {label}",
+    "download_range": {
+      "any": "Tous",
+      "lt100": "< 100",
+      "100_1k": "100 - 1K",
+      "1k_10k": "1K - 10K",
+      "10k_100k": "10K - 100K",
+      "gt100k": "> 100K"
+    },
+    "updated": {
+      "any": "N'importe quand",
+      "week": "Semaine passée",
+      "month": "Mois passé",
+      "quarter": "3 derniers mois",
+      "year": "Année passée"
+    },
+    "security_options": {
+      "all": "Tous les paquets",
+      "secure": "Sans avertissements",
+      "insecure": "Avec avertissements"
+    },
+    "sort": {
+      "label": "Trier les paquets",
+      "toggle_direction": "Inverser l'ordre",
+      "ascending": "Croissant",
+      "descending": "Décroissant",
+      "relevance": "Pertinence",
+      "downloads_week": "Téléch./sem",
+      "downloads_day": "Téléch./jour",
+      "downloads_month": "Téléch./mois",
+      "downloads_year": "Téléch./an",
+      "updated": "Dern. mise à jour",
+      "name": "Nom",
+      "quality": "Qualité",
+      "popularity": "Popularité",
+      "maintenance": "Maintenance",
+      "score": "Score"
+    },
+    "columns": {
+      "title": "Colonnes",
+      "show": "Afficher les colonnes",
+      "reset": "Réinitialiser",
+      "coming_soon": "Bientôt disponible",
+      "name": "Nom",
+      "version": "Version",
+      "description": "Description",
+      "downloads": "Téléch./sem",
+      "updated": "Dern. mise à jour",
+      "maintainers": "Mainteneurs",
+      "keywords": "Mots-clés",
+      "quality_score": "Score de qualité",
+      "popularity_score": "Score de popularité",
+      "maintenance_score": "Score de maintenance",
+      "combined_score": "Score combiné",
+      "security": "Sécurité"
+    },
+    "view_mode": {
+      "label": "Mode d'affichage",
+      "cards": "Vue carte",
+      "table": "Vue tableau"
+    },
+    "pagination": {
+      "mode_label": "Mode de pagination",
+      "infinite": "Infini",
+      "paginated": "Paginé",
+      "items_per_page": "Éléments par page",
+      "per_page": "{count} / page",
+      "all_yolo": "Tout (YOLO)",
+      "showing": "{start}-{end} sur {total}",
+      "previous": "Page précédente",
+      "next": "Page suivante",
+      "nav_label": "Pagination"
+    },
+    "count": {
+      "showing_filtered": "{filtered} sur {total} paquets",
+      "showing_all": "{total} paquets",
+      "showing_paginated": "{pageSize} sur {total} paquets"
+    },
+    "table": {
+      "security_warning": "Avertissement de sécurité",
+      "secure": "Sécurisé",
+      "no_packages": "Aucun paquet trouvé"
+    }
+  },
   "about": {
     "title": "À propos",
     "heading": "à propos",
diff --git a/shared/types/preferences.ts b/shared/types/preferences.ts
new file mode 100644
index 000000000..29c3a7d2d
--- /dev/null
+++ b/shared/types/preferences.ts
@@ -0,0 +1,360 @@
+/**
+ * Package list preferences types
+ * Used for configurable columns, filtering, sorting, and pagination
+ */
+
+// View modes
+export type ViewMode = 'cards' | 'table'
+
+// Column identifiers for table view
+export type ColumnId =
+  | 'name'
+  | 'version'
+  | 'description'
+  | 'downloads'
+  | 'updated'
+  | 'maintainers'
+  | 'keywords'
+  | 'qualityScore'
+  | 'popularityScore'
+  | 'maintenanceScore'
+  | 'combinedScore'
+  | 'security'
+
+export interface ColumnConfig {
+  id: ColumnId
+  label: string
+  visible: boolean
+  sortable: boolean
+  width?: string
+  /** Whether the column is disabled (not yet available) */
+  disabled?: boolean
+  /** Reason for being disabled, shown in UI */
+  disabledReason?: string
+}
+
+// Default column configuration
+export const DEFAULT_COLUMNS: ColumnConfig[] = [
+  { id: 'name', label: 'Name', visible: true, sortable: true, width: 'minmax(200px, 1fr)' },
+  { id: 'version', label: 'Version', visible: true, sortable: false, width: '100px' },
+  {
+    id: 'description',
+    label: 'Description',
+    visible: true,
+    sortable: false,
+    width: 'minmax(200px, 2fr)',
+  },
+  { id: 'downloads', label: 'Downloads/wk', visible: true, sortable: true, width: '120px' },
+  { id: 'updated', label: 'Updated', visible: true, sortable: true, width: '120px' },
+  { id: 'maintainers', label: 'Maintainers', visible: false, sortable: false, width: '150px' },
+  { id: 'keywords', label: 'Keywords', visible: false, sortable: false, width: '200px' },
+  {
+    id: 'qualityScore',
+    label: 'Quality score',
+    visible: false,
+    sortable: true,
+    width: '100px',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    id: 'popularityScore',
+    label: 'Popularity score',
+    visible: false,
+    sortable: true,
+    width: '100px',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    id: 'maintenanceScore',
+    label: 'Maintenance score',
+    visible: false,
+    sortable: true,
+    width: '100px',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    id: 'combinedScore',
+    label: 'Combined score',
+    visible: false,
+    sortable: true,
+    width: '100px',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    id: 'security',
+    label: 'Security',
+    visible: false,
+    sortable: false,
+    width: '80px',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+]
+
+// Sort keys (without direction)
+export type SortKey =
+  | 'downloads-week'
+  | 'downloads-day'
+  | 'downloads-month'
+  | 'downloads-year'
+  | 'updated'
+  | 'name'
+  | 'quality'
+  | 'popularity'
+  | 'maintenance'
+  | 'score'
+  | 'relevance'
+
+export type SortDirection = 'asc' | 'desc'
+
+// Combined sort option (key + direction)
+export type SortOption =
+  | 'downloads-week-desc'
+  | 'downloads-week-asc'
+  | 'downloads-day-desc'
+  | 'downloads-day-asc'
+  | 'downloads-month-desc'
+  | 'downloads-month-asc'
+  | 'downloads-year-desc'
+  | 'downloads-year-asc'
+  | 'updated-desc'
+  | 'updated-asc'
+  | 'name-asc'
+  | 'name-desc'
+  | 'quality-desc'
+  | 'quality-asc'
+  | 'popularity-desc'
+  | 'popularity-asc'
+  | 'maintenance-desc'
+  | 'maintenance-asc'
+  | 'score-desc'
+  | 'score-asc'
+  | 'relevance-desc'
+  | 'relevance-asc'
+
+export interface SortKeyConfig {
+  key: SortKey
+  label: string
+  /** Default direction for this sort key */
+  defaultDirection: SortDirection
+  /** Whether the sort option is disabled (not yet available) */
+  disabled?: boolean
+  /** Reason for being disabled, shown in UI */
+  disabledReason?: string
+  /** Only show this sort option in search context */
+  searchOnly?: boolean
+}
+
+export const SORT_KEYS: SortKeyConfig[] = [
+  { key: 'relevance', label: 'Relevance', defaultDirection: 'desc', searchOnly: true },
+  { key: 'downloads-week', label: 'Downloads/wk', defaultDirection: 'desc' },
+  {
+    key: 'downloads-day',
+    label: 'Downloads/day',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    key: 'downloads-month',
+    label: 'Downloads/mo',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    key: 'downloads-year',
+    label: 'Downloads/yr',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  { key: 'updated', label: 'Updated', defaultDirection: 'desc' },
+  { key: 'name', label: 'Name', defaultDirection: 'asc' },
+  {
+    key: 'quality',
+    label: 'Quality',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    key: 'popularity',
+    label: 'Popularity',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    key: 'maintenance',
+    label: 'Maintenance',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+  {
+    key: 'score',
+    label: 'Score',
+    defaultDirection: 'desc',
+    disabled: true,
+    disabledReason: 'Coming soon',
+  },
+]
+
+/** All valid sort keys for validation */
+const VALID_SORT_KEYS = new Set<SortKey>([
+  'relevance',
+  'downloads-week',
+  'downloads-day',
+  'downloads-month',
+  'downloads-year',
+  'updated',
+  'name',
+  'quality',
+  'popularity',
+  'maintenance',
+  'score',
+])
+
+/** Parse a SortOption into key and direction */
+export function parseSortOption(option: SortOption): { key: SortKey; direction: SortDirection } {
+  const match = option.match(/^(.+)-(asc|desc)$/)
+  if (match) {
+    const key = match[1]
+    const direction = match[2] as SortDirection
+    // Validate that the key is a known sort key
+    if (VALID_SORT_KEYS.has(key as SortKey)) {
+      return { key: key as SortKey, direction }
+    }
+  }
+  // Fallback to default sort option
+  return { key: 'downloads-week', direction: 'desc' }
+}
+
+/** Build a SortOption from key and direction */
+export function buildSortOption(key: SortKey, direction: SortDirection): SortOption {
+  return `${key}-${direction}` as SortOption
+}
+
+/** Get the opposite direction */
+export function toggleDirection(direction: SortDirection): SortDirection {
+  return direction === 'asc' ? 'desc' : 'asc'
+}
+
+// Download range presets
+export type DownloadRange = 'any' | 'lt100' | '100-1k' | '1k-10k' | '10k-100k' | 'gt100k'
+
+export interface DownloadRangeConfig {
+  value: DownloadRange
+  label: string
+  min?: number
+  max?: number
+}
+
+export const DOWNLOAD_RANGES: DownloadRangeConfig[] = [
+  { value: 'any', label: 'Any' },
+  { value: 'lt100', label: '< 100', max: 100 },
+  { value: '100-1k', label: '100 - 1K', min: 100, max: 1000 },
+  { value: '1k-10k', label: '1K - 10K', min: 1000, max: 10000 },
+  { value: '10k-100k', label: '10K - 100K', min: 10000, max: 100000 },
+  { value: 'gt100k', label: '> 100K', min: 100000 },
+]
+
+// Updated within presets
+export type UpdatedWithin = 'any' | 'week' | 'month' | 'quarter' | 'year'
+
+export interface UpdatedWithinConfig {
+  value: UpdatedWithin
+  label: string
+  days?: number
+}
+
+export const UPDATED_WITHIN_OPTIONS: UpdatedWithinConfig[] = [
+  { value: 'any', label: 'Any time' },
+  { value: 'week', label: 'Past week', days: 7 },
+  { value: 'month', label: 'Past month', days: 30 },
+  { value: 'quarter', label: 'Past 3 months', days: 90 },
+  { value: 'year', label: 'Past year', days: 365 },
+]
+
+// Security filter options
+export type SecurityFilter = 'all' | 'secure' | 'warnings'
+
+export interface SecurityFilterConfig {
+  value: SecurityFilter
+  label: string
+}
+
+export const SECURITY_FILTER_OPTIONS: SecurityFilterConfig[] = [
+  { value: 'all', label: 'All packages' },
+  { value: 'secure', label: 'Secure only' },
+  { value: 'warnings', label: 'Insecure only' },
+]
+
+// Search scope options
+export type SearchScope = 'name' | 'description' | 'keywords' | 'all'
+
+export interface SearchScopeConfig {
+  value: SearchScope
+  label: string
+  description: string
+}
+
+export const SEARCH_SCOPE_OPTIONS: SearchScopeConfig[] = [
+  { value: 'name', label: 'Name', description: 'Search package names only' },
+  { value: 'description', label: 'Description', description: 'Search descriptions only' },
+  { value: 'keywords', label: 'Keywords', description: 'Search keywords only' },
+  { value: 'all', label: 'All', description: 'Search name, description, and keywords' },
+]
+
+// Structured filters state
+export interface StructuredFilters {
+  text: string
+  searchScope: SearchScope
+  downloadRange: DownloadRange
+  keywords: string[]
+  security: SecurityFilter
+  updatedWithin: UpdatedWithin
+}
+
+export const DEFAULT_FILTERS: StructuredFilters = {
+  text: '',
+  searchScope: 'name',
+  downloadRange: 'any',
+  keywords: [],
+  security: 'all',
+  updatedWithin: 'any',
+}
+
+// Pagination modes
+export type PaginationMode = 'infinite' | 'paginated'
+
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 'all'] as const
+export type PageSize = (typeof PAGE_SIZE_OPTIONS)[number]
+
+// Complete preferences state
+export interface PackageListPreferences {
+  viewMode: ViewMode
+  columns: ColumnConfig[]
+  paginationMode: PaginationMode
+  pageSize: PageSize
+}
+
+export const DEFAULT_PREFERENCES: PackageListPreferences = {
+  viewMode: 'cards',
+  columns: DEFAULT_COLUMNS,
+  paginationMode: 'infinite',
+  pageSize: 25,
+}
+
+// Active filter chip representation
+export interface FilterChip {
+  id: string
+  type: keyof StructuredFilters
+  label: string
+  value: string | string[]
+}
diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
index ef1803d90..a50dc54a2 100644
--- a/test/nuxt/components.spec.ts
+++ b/test/nuxt/components.spec.ts
@@ -1,11 +1,14 @@
 import type { AxeResults, RunOptions } from 'axe-core'
 import type { VueWrapper } from '@vue/test-utils'
+import type { ColumnConfig, FilterChip } from '#shared/types/preferences'
 import 'axe-core'
 import { afterEach, describe, expect, it } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
-declare const axe: { run: (context: Element, options?: RunOptions) => Promise<AxeResults> }
+declare const axe: {
+  run: (context: Element, options?: RunOptions) => Promise<AxeResults>
+}
 
 // Track mounted containers for cleanup
 const mountedContainers: HTMLElement[] = []
@@ -81,6 +84,14 @@ import PackageAccessControls from '~/components/PackageAccessControls.vue'
 import OrgMembersPanel from '~/components/OrgMembersPanel.vue'
 import OrgTeamsPanel from '~/components/OrgTeamsPanel.vue'
 import CodeMobileTreeDrawer from '~/components/CodeMobileTreeDrawer.vue'
+import ColumnPicker from '~/components/ColumnPicker.vue'
+import FilterChips from '~/components/FilterChips.vue'
+import FilterPanel from '~/components/FilterPanel.vue'
+import PackageListToolbar from '~/components/PackageListToolbar.vue'
+import PackageTable from '~/components/PackageTable.vue'
+import PackageTableRow from '~/components/PackageTableRow.vue'
+import PaginationControls from '~/components/PaginationControls.vue'
+import ViewModeToggle from '~/components/ViewModeToggle.vue'
 import PackageVulnerabilityTree from '~/components/PackageVulnerabilityTree.vue'
 import DependencyPathPopup from '~/components/DependencyPathPopup.vue'
 
@@ -346,9 +357,24 @@ describe('component accessibility audits', () => {
 
   describe('PackageDownloadAnalytics', () => {
     const mockWeeklyDownloads = [
-      { downloads: 1000, weekKey: '2024-W01', weekStart: '2024-01-01', weekEnd: '2024-01-07' },
-      { downloads: 1200, weekKey: '2024-W02', weekStart: '2024-01-08', weekEnd: '2024-01-14' },
-      { downloads: 1500, weekKey: '2024-W03', weekStart: '2024-01-15', weekEnd: '2024-01-21' },
+      {
+        downloads: 1000,
+        weekKey: '2024-W01',
+        weekStart: '2024-01-01',
+        weekEnd: '2024-01-07',
+      },
+      {
+        downloads: 1200,
+        weekKey: '2024-W02',
+        weekStart: '2024-01-08',
+        weekEnd: '2024-01-14',
+      },
+      {
+        downloads: 1500,
+        weekKey: '2024-W03',
+        weekStart: '2024-01-15',
+        weekEnd: '2024-01-21',
+      },
     ]
 
     it('should have no accessibility violations (non-modal)', async () => {
@@ -584,7 +610,12 @@ describe('component accessibility audits', () => {
     const mockTree = [
       { name: 'src', type: 'directory' as const, path: 'src', children: [] },
       { name: 'index.js', type: 'file' as const, path: 'index.js', size: 1024 },
-      { name: 'package.json', type: 'file' as const, path: 'package.json', size: 512 },
+      {
+        name: 'package.json',
+        type: 'file' as const,
+        path: 'package.json',
+        size: 512,
+      },
     ]
 
     it('should have no accessibility violations', async () => {
@@ -751,7 +782,10 @@ describe('component accessibility audits', () => {
           links: {},
           publisher: { username: 'yyx990803' },
         },
-        score: { final: 0.9, detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 } },
+        score: {
+          final: 0.9,
+          detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 },
+        },
         searchScore: 100000,
       },
       {
@@ -764,7 +798,10 @@ describe('component accessibility audits', () => {
           links: {},
           publisher: { username: 'fb' },
         },
-        score: { final: 0.9, detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 } },
+        score: {
+          final: 0.9,
+          detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 },
+        },
         searchScore: 90000,
       },
     ]
@@ -882,6 +919,332 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ColumnPicker', () => {
+    const mockColumns: ColumnConfig[] = [
+      { id: 'name', label: 'Name', visible: true, sortable: true },
+      { id: 'version', label: 'Version', visible: true, sortable: false },
+      { id: 'downloads', label: 'Downloads', visible: false, sortable: true },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ColumnPicker, {
+        props: { columns: mockColumns },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('FilterChips', () => {
+    it('should have no accessibility violations with chips', async () => {
+      const chips: FilterChip[] = [
+        { id: 'text', type: 'text', label: 'Search', value: 'react' },
+        { id: 'keyword', type: 'keywords', label: 'Keyword', value: 'hooks' },
+      ]
+      const component = await mountSuspended(FilterChips, {
+        props: { chips },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty chips', async () => {
+      const component = await mountSuspended(FilterChips, {
+        props: { chips: [] },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('FilterPanel', () => {
+    const defaultFilters = {
+      text: '',
+      searchScope: 'name' as const,
+      downloadRange: 'any' as const,
+      updatedWithin: 'any' as const,
+      security: 'all' as const,
+      keywords: [],
+    }
+
+    it('should have no accessibility violations (collapsed)', async () => {
+      const component = await mountSuspended(FilterPanel, {
+        props: { filters: defaultFilters },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with active filters', async () => {
+      const component = await mountSuspended(FilterPanel, {
+        props: {
+          filters: {
+            ...defaultFilters,
+            text: 'react',
+            keywords: ['hooks'],
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageListToolbar', () => {
+    const defaultFilters = {
+      text: '',
+      searchScope: 'name' as const,
+      downloadRange: 'any' as const,
+      updatedWithin: 'any' as const,
+      security: 'all' as const,
+      keywords: [],
+    }
+
+    const mockColumns: ColumnConfig[] = [
+      { id: 'name', label: 'Name', visible: true, sortable: true },
+      { id: 'version', label: 'Version', visible: true, sortable: false },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageListToolbar, {
+        props: {
+          filters: defaultFilters,
+          sortOption: 'downloads-week-desc',
+          viewMode: 'cards',
+          columns: mockColumns,
+          paginationMode: 'infinite',
+          pageSize: 25,
+          totalCount: 100,
+          filteredCount: 100,
+          activeFilters: [],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in search context', async () => {
+      const component = await mountSuspended(PackageListToolbar, {
+        props: {
+          filters: defaultFilters,
+          sortOption: 'relevance-desc',
+          viewMode: 'cards',
+          columns: mockColumns,
+          paginationMode: 'infinite',
+          pageSize: 25,
+          totalCount: 100,
+          filteredCount: 100,
+          activeFilters: [],
+          searchContext: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should total package count in paginated mode', async () => {
+      const component = await mountSuspended(PackageListToolbar, {
+        props: {
+          filters: defaultFilters,
+          sortOption: 'downloads-week-desc',
+          viewMode: 'table',
+          columns: mockColumns,
+          paginationMode: 'paginated',
+          pageSize: 25,
+          totalCount: 9544,
+          filteredCount: 9544,
+          activeFilters: [],
+        },
+      })
+
+      const html = component.html()
+      expect(html).toContain('25 of 9,544')
+    })
+  })
+
+  describe('PackageTable', () => {
+    const mockResults = [
+      {
+        package: {
+          name: 'vue',
+          version: '3.5.0',
+          description: 'The progressive JavaScript framework',
+          date: '2024-01-15T00:00:00.000Z',
+          keywords: ['framework'],
+          links: {},
+          publisher: { username: 'yyx990803' },
+        },
+        score: {
+          final: 0.9,
+          detail: { quality: 0.9, popularity: 0.9, maintenance: 0.9 },
+        },
+        searchScore: 100000,
+      },
+    ]
+
+    const mockColumns: ColumnConfig[] = [
+      { id: 'name', label: 'Name', visible: true, sortable: true },
+      { id: 'version', label: 'Version', visible: true, sortable: false },
+      {
+        id: 'description',
+        label: 'Description',
+        visible: true,
+        sortable: false,
+      },
+      { id: 'downloads', label: 'Downloads', visible: true, sortable: true },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageTable, {
+        props: {
+          results: mockResults,
+          columns: mockColumns,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty results', async () => {
+      const component = await mountSuspended(PackageTable, {
+        props: {
+          results: [],
+          columns: mockColumns,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when loading', async () => {
+      const component = await mountSuspended(PackageTable, {
+        props: {
+          results: [],
+          columns: mockColumns,
+          isLoading: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageTableRow', () => {
+    const mockResult = {
+      package: {
+        name: 'lodash',
+        version: '4.17.21',
+        description: 'A modern JavaScript utility library',
+        date: '2024-01-01T00:00:00.000Z',
+        keywords: ['utility', 'modules'],
+        links: {},
+        publisher: { username: 'jdalton' },
+        maintainers: [{ username: 'jdalton', email: 'test@test.com' }],
+      },
+      downloads: { weekly: 50000000 },
+      updated: '2024-01-01T00:00:00.000Z',
+      score: {
+        final: 0.95,
+        detail: { quality: 0.95, popularity: 0.99, maintenance: 0.9 },
+      },
+      searchScore: 99999,
+    }
+
+    const mockColumns: ColumnConfig[] = [
+      { id: 'name', label: 'Name', visible: true, sortable: true },
+      { id: 'version', label: 'Version', visible: true, sortable: false },
+      {
+        id: 'description',
+        label: 'Description',
+        visible: true,
+        sortable: false,
+      },
+    ]
+
+    it('should have no accessibility violations', async () => {
+      // PackageTableRow needs to be wrapped in a table structure
+      const component = await mountSuspended(PackageTableRow, {
+        props: {
+          result: mockResult,
+          columns: mockColumns,
+        },
+        global: {
+          stubs: {
+            // Wrap in proper table structure for accessibility
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PaginationControls', () => {
+    it('should have no accessibility violations in infinite mode', async () => {
+      const component = await mountSuspended(PaginationControls, {
+        props: {
+          mode: 'infinite',
+          pageSize: 25,
+          currentPage: 1,
+          totalItems: 100,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in paginated mode', async () => {
+      const component = await mountSuspended(PaginationControls, {
+        props: {
+          mode: 'paginated',
+          pageSize: 25,
+          currentPage: 1,
+          totalItems: 100,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with multiple pages', async () => {
+      const component = await mountSuspended(PaginationControls, {
+        props: {
+          mode: 'paginated',
+          pageSize: 10,
+          currentPage: 5,
+          totalItems: 200,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('ViewModeToggle', () => {
+    it('should have no accessibility violations in cards mode', async () => {
+      const component = await mountSuspended(ViewModeToggle, {
+        props: { modelValue: 'cards' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations in table mode', async () => {
+      const component = await mountSuspended(ViewModeToggle, {
+        props: { modelValue: 'table' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageVulnerabilityTree', () => {
     it('should have no accessibility violations in idle state', async () => {
       const component = await mountSuspended(PackageVulnerabilityTree, {
diff --git a/test/nuxt/composables/structured-filters.spec.ts b/test/nuxt/composables/structured-filters.spec.ts
new file mode 100644
index 000000000..2b0a0f961
--- /dev/null
+++ b/test/nuxt/composables/structured-filters.spec.ts
@@ -0,0 +1,374 @@
+import { describe, expect, it } from 'vitest'
+import type { NpmSearchResult } from '#shared/types'
+
+// Helper to create mock package results
+function createPackage(overrides: {
+  name: string
+  description?: string
+  keywords?: string[]
+  downloads?: number
+  updated?: string
+  insecure?: number
+}): NpmSearchResult {
+  return {
+    package: {
+      name: overrides.name,
+      version: '1.0.0',
+      description: overrides.description ?? '',
+      keywords: overrides.keywords ?? [],
+      date: overrides.updated ?? '2024-01-01T00:00:00.000Z',
+      links: { npm: '' },
+      publisher: { username: 'test', email: '' },
+      maintainers: [],
+    },
+    downloads: { weekly: overrides.downloads ?? 0 },
+    updated: overrides.updated ?? '2024-01-01T00:00:00.000Z',
+    flags: { insecure: overrides.insecure ?? 0 },
+    score: { final: 0.5, detail: { quality: 0.5, popularity: 0.5, maintenance: 0.5 } },
+    searchScore: 1000,
+  }
+}
+
+describe('useStructuredFilters', () => {
+  describe('keyword filtering (AND logic)', () => {
+    it('returns all packages when no keywords selected', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react'] }),
+        createPackage({ name: 'pkg-b', keywords: ['vue'] }),
+      ])
+
+      const { sortedPackages } = useStructuredFilters({ packages })
+
+      expect(sortedPackages.value).toHaveLength(2)
+    })
+
+    it('filters to packages with single keyword', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react', 'hooks'] }),
+        createPackage({ name: 'pkg-b', keywords: ['vue'] }),
+      ])
+
+      const { sortedPackages, addKeyword } = useStructuredFilters({ packages })
+      addKeyword('react')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-a')
+    })
+
+    it('uses AND logic for multiple keywords', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react', 'hooks'] }),
+        createPackage({ name: 'pkg-b', keywords: ['react', 'state'] }),
+        createPackage({ name: 'pkg-c', keywords: ['react', 'hooks', 'state'] }),
+      ])
+
+      const { sortedPackages, addKeyword } = useStructuredFilters({ packages })
+      addKeyword('react')
+      addKeyword('hooks')
+
+      // Only packages with BOTH 'react' AND 'hooks'
+      expect(sortedPackages.value).toHaveLength(2)
+      expect(sortedPackages.value.map(p => p.package.name)).toContain('pkg-a')
+      expect(sortedPackages.value.map(p => p.package.name)).toContain('pkg-c')
+    })
+
+    it('returns empty when no package has all keywords', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react'] }),
+        createPackage({ name: 'pkg-b', keywords: ['hooks'] }),
+      ])
+
+      const { sortedPackages, addKeyword } = useStructuredFilters({ packages })
+      addKeyword('react')
+      addKeyword('hooks')
+
+      expect(sortedPackages.value).toHaveLength(0)
+    })
+  })
+
+  describe('text filtering', () => {
+    it('filters by name when scope is name', () => {
+      const packages = ref([
+        createPackage({ name: 'react-query', description: 'Data fetching' }),
+        createPackage({ name: 'vue-query', description: 'Data fetching for Vue' }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('name')
+      setTextFilter('react')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('react-query')
+    })
+
+    it('filters by description when scope is description', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', description: 'A React component library' }),
+        createPackage({ name: 'pkg-b', description: 'A Vue component library' }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('description')
+      setTextFilter('React')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-a')
+    })
+
+    it('filters by keywords when scope is keywords', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['typescript', 'react'] }),
+        createPackage({ name: 'pkg-b', keywords: ['javascript', 'vue'] }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('keywords')
+      setTextFilter('type')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-a')
+    })
+
+    it('filters by all fields when scope is all', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', description: 'foo', keywords: ['bar'] }),
+        createPackage({ name: 'pkg-b', description: 'baz', keywords: ['qux'] }),
+        createPackage({ name: 'search-term', description: 'other', keywords: [] }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('search-term')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('search-term')
+    })
+  })
+
+  describe('text filtering with operators', () => {
+    it('parses name: operator in all scope', () => {
+      const packages = ref([
+        createPackage({ name: 'react-query', description: 'vue stuff' }),
+        createPackage({ name: 'vue-query', description: 'react stuff' }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('name:react')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('react-query')
+    })
+
+    it('parses desc: operator in all scope', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', description: 'A fantastic library' }),
+        createPackage({ name: 'pkg-b', description: 'A mediocre library' }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('desc:fantastic')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-a')
+    })
+
+    it('parses kw: operator in all scope', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['typescript'] }),
+        createPackage({ name: 'pkg-b', keywords: ['javascript'] }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('kw:typescript')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-a')
+    })
+
+    it('combines multiple operators with AND logic', () => {
+      const packages = ref([
+        createPackage({ name: 'react-lib', description: 'hooks library', keywords: ['react'] }),
+        createPackage({ name: 'react-other', description: 'other stuff', keywords: ['react'] }),
+        createPackage({ name: 'vue-lib', description: 'hooks library', keywords: ['vue'] }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('name:react desc:hooks')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('react-lib')
+    })
+
+    it('handles comma-separated keyword values with OR logic', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react'] }),
+        createPackage({ name: 'pkg-b', keywords: ['vue'] }),
+        createPackage({ name: 'pkg-c', keywords: ['angular'] }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('kw:react,vue')
+
+      expect(sortedPackages.value).toHaveLength(2)
+      expect(sortedPackages.value.map(p => p.package.name)).toContain('pkg-a')
+      expect(sortedPackages.value.map(p => p.package.name)).toContain('pkg-b')
+    })
+
+    it('combines operators with remaining text', () => {
+      const packages = ref([
+        createPackage({
+          name: 'react-query',
+          description: 'Data fetching library',
+          keywords: ['react'],
+        }),
+        createPackage({ name: 'react-form', description: 'Form library', keywords: ['react'] }),
+        createPackage({
+          name: 'vue-query',
+          description: 'Data fetching library',
+          keywords: ['vue'],
+        }),
+      ])
+
+      const { sortedPackages, setTextFilter, setSearchScope } = useStructuredFilters({ packages })
+      setSearchScope('all')
+      setTextFilter('name:react fetching')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('react-query')
+    })
+  })
+
+  describe('download range filtering', () => {
+    it('filters packages below threshold', () => {
+      const packages = ref([
+        createPackage({ name: 'popular', downloads: 50000 }),
+        createPackage({ name: 'unpopular', downloads: 50 }),
+      ])
+
+      const { sortedPackages, setDownloadRange } = useStructuredFilters({ packages })
+      setDownloadRange('gt100k')
+
+      expect(sortedPackages.value).toHaveLength(0)
+    })
+
+    it('filters packages within range', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', downloads: 500 }),
+        createPackage({ name: 'pkg-b', downloads: 5000 }),
+        createPackage({ name: 'pkg-c', downloads: 50000 }),
+      ])
+
+      const { sortedPackages, setDownloadRange } = useStructuredFilters({ packages })
+      setDownloadRange('1k-10k')
+
+      expect(sortedPackages.value).toHaveLength(1)
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-b')
+    })
+  })
+
+  describe('sorting', () => {
+    it('sorts by downloads descending by default with downloads sort', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', downloads: 100 }),
+        createPackage({ name: 'pkg-b', downloads: 1000 }),
+        createPackage({ name: 'pkg-c', downloads: 500 }),
+      ])
+
+      const { sortedPackages, setSort } = useStructuredFilters({ packages })
+      setSort('downloads-week-desc')
+
+      expect(sortedPackages.value[0]!.package.name).toBe('pkg-b')
+      expect(sortedPackages.value[1]!.package.name).toBe('pkg-c')
+      expect(sortedPackages.value[2]!.package.name).toBe('pkg-a')
+    })
+
+    it('sorts by name ascending', () => {
+      const packages = ref([
+        createPackage({ name: 'zlib' }),
+        createPackage({ name: 'axios' }),
+        createPackage({ name: 'lodash' }),
+      ])
+
+      const { sortedPackages, setSort } = useStructuredFilters({ packages })
+      setSort('name-asc')
+
+      expect(sortedPackages.value[0]!.package.name).toBe('axios')
+      expect(sortedPackages.value[1]!.package.name).toBe('lodash')
+      expect(sortedPackages.value[2]!.package.name).toBe('zlib')
+    })
+
+    it('sorts by updated date descending', () => {
+      const packages = ref([
+        createPackage({ name: 'old', updated: '2023-01-01T00:00:00.000Z' }),
+        createPackage({ name: 'new', updated: '2024-06-01T00:00:00.000Z' }),
+        createPackage({ name: 'mid', updated: '2024-01-01T00:00:00.000Z' }),
+      ])
+
+      const { sortedPackages, setSort } = useStructuredFilters({ packages })
+      setSort('updated-desc')
+
+      expect(sortedPackages.value[0]!.package.name).toBe('new')
+      expect(sortedPackages.value[1]!.package.name).toBe('mid')
+      expect(sortedPackages.value[2]!.package.name).toBe('old')
+    })
+
+    it('relevance sort preserves original order', () => {
+      const packages = ref([
+        createPackage({ name: 'first', downloads: 100 }),
+        createPackage({ name: 'second', downloads: 1000 }),
+        createPackage({ name: 'third', downloads: 500 }),
+      ])
+
+      const { sortedPackages, setSort } = useStructuredFilters({ packages })
+      setSort('relevance-desc')
+
+      // Relevance should preserve the original order from the server
+      expect(sortedPackages.value[0]!.package.name).toBe('first')
+      expect(sortedPackages.value[1]!.package.name).toBe('second')
+      expect(sortedPackages.value[2]!.package.name).toBe('third')
+    })
+  })
+
+  describe('clearing filters', () => {
+    it('clearAllFilters resets all filters', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react'], downloads: 1000 }),
+        createPackage({ name: 'pkg-b', keywords: ['vue'], downloads: 500 }),
+      ])
+
+      const { sortedPackages, setTextFilter, addKeyword, setDownloadRange, clearAllFilters } =
+        useStructuredFilters({ packages })
+
+      setTextFilter('pkg-a')
+      addKeyword('react')
+      setDownloadRange('1k-10k')
+
+      expect(sortedPackages.value).toHaveLength(1)
+
+      clearAllFilters()
+
+      expect(sortedPackages.value).toHaveLength(2)
+    })
+
+    it('removeKeyword removes specific keyword', () => {
+      const packages = ref([
+        createPackage({ name: 'pkg-a', keywords: ['react', 'hooks'] }),
+        createPackage({ name: 'pkg-b', keywords: ['react'] }),
+      ])
+
+      const { sortedPackages, addKeyword, removeKeyword } = useStructuredFilters({ packages })
+
+      addKeyword('react')
+      addKeyword('hooks')
+      expect(sortedPackages.value).toHaveLength(1)
+
+      removeKeyword('hooks')
+      expect(sortedPackages.value).toHaveLength(2)
+    })
+  })
+})
diff --git a/test/unit/preferences.spec.ts b/test/unit/preferences.spec.ts
new file mode 100644
index 000000000..07b6e0da6
--- /dev/null
+++ b/test/unit/preferences.spec.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildSortOption,
+  parseSortOption,
+  toggleDirection,
+  type SortDirection,
+  type SortKey,
+  type SortOption,
+} from '#shared/types/preferences'
+
+describe('parseSortOption', () => {
+  it.each<[SortOption, SortKey, SortDirection]>([
+    ['downloads-week-desc', 'downloads-week', 'desc'],
+    ['downloads-week-asc', 'downloads-week', 'asc'],
+    ['updated-desc', 'updated', 'desc'],
+    ['updated-asc', 'updated', 'asc'],
+    ['name-asc', 'name', 'asc'],
+    ['name-desc', 'name', 'desc'],
+    ['quality-desc', 'quality', 'desc'],
+    ['score-asc', 'score', 'asc'],
+    ['relevance-desc', 'relevance', 'desc'],
+    ['relevance-asc', 'relevance', 'asc'],
+  ])('parses "%s" to key="%s" direction="%s"', (option, expectedKey, expectedDirection) => {
+    const result = parseSortOption(option)
+    expect(result.key).toBe(expectedKey)
+    expect(result.direction).toBe(expectedDirection)
+  })
+
+  it('handles multi-part keys like downloads-week', () => {
+    const result = parseSortOption('downloads-week-desc')
+    expect(result.key).toBe('downloads-week')
+    expect(result.direction).toBe('desc')
+  })
+
+  it('handles downloads-month key', () => {
+    const result = parseSortOption('downloads-month-asc')
+    expect(result.key).toBe('downloads-month')
+    expect(result.direction).toBe('asc')
+  })
+})
+
+describe('buildSortOption', () => {
+  it.each<[SortKey, SortDirection, SortOption]>([
+    ['downloads-week', 'desc', 'downloads-week-desc'],
+    ['downloads-week', 'asc', 'downloads-week-asc'],
+    ['updated', 'desc', 'updated-desc'],
+    ['name', 'asc', 'name-asc'],
+    ['quality', 'desc', 'quality-desc'],
+    ['relevance', 'desc', 'relevance-desc'],
+  ])('builds "%s" + "%s" to "%s"', (key, direction, expected) => {
+    expect(buildSortOption(key, direction)).toBe(expected)
+  })
+})
+
+describe('toggleDirection', () => {
+  it('toggles asc to desc', () => {
+    expect(toggleDirection('asc')).toBe('desc')
+  })
+
+  it('toggles desc to asc', () => {
+    expect(toggleDirection('desc')).toBe('asc')
+  })
+})
+
+describe('parseSortOption and buildSortOption roundtrip', () => {
+  it.each<SortOption>([
+    'downloads-week-desc',
+    'downloads-week-asc',
+    'downloads-day-desc',
+    'downloads-month-asc',
+    'updated-desc',
+    'name-asc',
+    'quality-desc',
+    'popularity-asc',
+    'maintenance-desc',
+    'score-asc',
+    'relevance-desc',
+    'relevance-asc',
+  ])('roundtrips "%s" correctly', option => {
+    const { key, direction } = parseSortOption(option)
+    expect(buildSortOption(key, direction)).toBe(option)
+  })
+})
diff --git a/test/unit/search-operators.spec.ts b/test/unit/search-operators.spec.ts
new file mode 100644
index 000000000..327470eef
--- /dev/null
+++ b/test/unit/search-operators.spec.ts
@@ -0,0 +1,190 @@
+import { describe, expect, it } from 'vitest'
+import {
+  hasSearchOperators,
+  parseSearchOperators,
+} from '../../app/composables/useStructuredFilters'
+
+describe('parseSearchOperators', () => {
+  describe('basic operator parsing', () => {
+    it('parses name: operator', () => {
+      const result = parseSearchOperators('name:react')
+      expect(result).toEqual({ name: ['react'] })
+    })
+
+    it('parses desc: operator', () => {
+      const result = parseSearchOperators('desc:framework')
+      expect(result).toEqual({ description: ['framework'] })
+    })
+
+    it('parses description: operator (long form)', () => {
+      const result = parseSearchOperators('description:framework')
+      expect(result).toEqual({ description: ['framework'] })
+    })
+
+    it('parses kw: operator', () => {
+      const result = parseSearchOperators('kw:typescript')
+      expect(result).toEqual({ keywords: ['typescript'] })
+    })
+
+    it('parses keyword: operator (long form)', () => {
+      const result = parseSearchOperators('keyword:typescript')
+      expect(result).toEqual({ keywords: ['typescript'] })
+    })
+  })
+
+  describe('comma-separated values', () => {
+    it('parses multiple keywords with comma', () => {
+      const result = parseSearchOperators('kw:typescript,react,hooks')
+      expect(result).toEqual({ keywords: ['typescript', 'react', 'hooks'] })
+    })
+
+    it('parses multiple names with comma', () => {
+      const result = parseSearchOperators('name:react,vue,angular')
+      expect(result).toEqual({ name: ['react', 'vue', 'angular'] })
+    })
+
+    it('handles empty values between commas', () => {
+      const result = parseSearchOperators('kw:foo,,bar')
+      expect(result).toEqual({ keywords: ['foo', 'bar'] })
+    })
+  })
+
+  describe('multiple operators', () => {
+    it('parses name and kw operators together', () => {
+      const result = parseSearchOperators('name:react kw:typescript')
+      expect(result).toEqual({
+        name: ['react'],
+        keywords: ['typescript'],
+      })
+    })
+
+    it('parses all three operator types', () => {
+      const result = parseSearchOperators('name:react desc:framework kw:typescript')
+      expect(result).toEqual({
+        name: ['react'],
+        description: ['framework'],
+        keywords: ['typescript'],
+      })
+    })
+
+    it('merges multiple instances of same operator', () => {
+      const result = parseSearchOperators('kw:react kw:typescript')
+      expect(result).toEqual({
+        keywords: ['react', 'typescript'],
+      })
+    })
+  })
+
+  describe('remaining text', () => {
+    it('captures text without operators', () => {
+      const result = parseSearchOperators('some search text')
+      expect(result).toEqual({ text: 'some search text' })
+    })
+
+    it('captures remaining text after operators', () => {
+      const result = parseSearchOperators('name:react some text')
+      expect(result).toEqual({
+        name: ['react'],
+        text: 'some text',
+      })
+    })
+
+    it('captures remaining text before operators', () => {
+      const result = parseSearchOperators('some text name:react')
+      expect(result).toEqual({
+        name: ['react'],
+        text: 'some text',
+      })
+    })
+
+    it('captures text mixed with operators', () => {
+      const result = parseSearchOperators('hello name:react world kw:hooks foo')
+      expect(result).toEqual({
+        name: ['react'],
+        keywords: ['hooks'],
+        text: 'hello world foo',
+      })
+    })
+
+    it('collapses multiple spaces in remaining text', () => {
+      const result = parseSearchOperators('name:react    lots   of    spaces')
+      expect(result).toEqual({
+        name: ['react'],
+        text: 'lots of spaces',
+      })
+    })
+  })
+
+  describe('case insensitivity', () => {
+    it('handles uppercase operator names', () => {
+      const result = parseSearchOperators('NAME:react')
+      expect(result).toEqual({ name: ['react'] })
+    })
+
+    it('handles mixed case operator names', () => {
+      const result = parseSearchOperators('NaMe:react KW:typescript')
+      expect(result).toEqual({
+        name: ['react'],
+        keywords: ['typescript'],
+      })
+    })
+  })
+
+  describe('edge cases', () => {
+    it('returns empty object for empty string', () => {
+      const result = parseSearchOperators('')
+      expect(result).toEqual({})
+    })
+
+    it('returns empty object for whitespace only', () => {
+      const result = parseSearchOperators('   ')
+      expect(result).toEqual({})
+    })
+
+    it('handles operator with no value', () => {
+      // "name:" followed by space - the regex won't match empty values
+      const result = parseSearchOperators('name: react')
+      expect(result).toEqual({ text: 'name: react' })
+    })
+
+    it('handles special characters in values', () => {
+      const result = parseSearchOperators('name:@scope/package')
+      expect(result).toEqual({ name: ['@scope/package'] })
+    })
+
+    it('handles hyphenated values', () => {
+      const result = parseSearchOperators('kw:gatsby-plugin')
+      expect(result).toEqual({ keywords: ['gatsby-plugin'] })
+    })
+  })
+})
+
+describe('hasSearchOperators', () => {
+  it('returns true when name is present', () => {
+    expect(hasSearchOperators({ name: ['react'] })).toBe(true)
+  })
+
+  it('returns true when description is present', () => {
+    expect(hasSearchOperators({ description: ['framework'] })).toBe(true)
+  })
+
+  it('returns true when keywords is present', () => {
+    expect(hasSearchOperators({ keywords: ['typescript'] })).toBe(true)
+  })
+
+  it('returns false when only text is present', () => {
+    expect(hasSearchOperators({ text: 'search query' })).toBe(false)
+  })
+
+  it('returns false for empty object', () => {
+    expect(hasSearchOperators({})).toBe(false)
+  })
+
+  it('returns true when operators and text are present', () => {
+    expect(hasSearchOperators({ name: ['react'], text: 'query' })).toBe(true)
+  })
+
+  it('returns false for empty arrays', () => {
+    expect(hasSearchOperators({ name: [], keywords: [] })).toBe(false)
+  })
+})