diff --git a/catalog/.eslintrc.js b/catalog/.eslintrc.js
index dcdfb4a0cb7..f8e68546c82 100644
--- a/catalog/.eslintrc.js
+++ b/catalog/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
     'max-classes-per-file': 0,
     'no-console': 2,
     'no-nested-ternary': 1,
-    'no-underscore-dangle': [2, { allow: ['_', '__', '__typename'] }],
+    'no-underscore-dangle': [2, { allow: ['_', '__', '__typename', '_tag'] }],
     'prefer-arrow-callback': [2, { allowNamedFunctions: true }],
     'prefer-template': 2,
     'react-hooks/exhaustive-deps': 2,
diff --git a/catalog/app/app.tsx b/catalog/app/app.tsx
index 60c8019045f..5416347b04d 100644
--- a/catalog/app/app.tsx
+++ b/catalog/app/app.tsx
@@ -5,6 +5,7 @@ import { createBrowserHistory as createHistory } from 'history'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Router } from 'react-router-dom'
+import { createSelector } from 'reselect'
 import * as M from '@material-ui/core'
 
 // initialize config from window.QUILT_CATALOG_CONFIG
@@ -67,16 +68,15 @@ const MOUNT_NODE = document.getElementById('app')
 // TODO: make storage injectable
 const storage = mkStorage({ user: 'USER', tokens: 'TOKENS' })
 
-const intercomUserSelector = (state: $TSFixMe) => {
-  const { user: u } = Auth.selectors.domain(state)
-  return (
+const intercomUserSelector = createSelector(
+  Auth.selectors.domain,
+  ({ user: u }) =>
     u && {
       user_id: u.current_user,
       name: u.current_user,
       email: u.email,
-    }
-  )
-}
+    },
+)
 
 const render = () => {
   ReactDOM.render(
diff --git a/catalog/app/components/Filters/Activator.tsx b/catalog/app/components/Filters/Activator.tsx
new file mode 100644
index 00000000000..632c99b83fc
--- /dev/null
+++ b/catalog/app/components/Filters/Activator.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  icon: {
+    minWidth: t.spacing(4),
+  },
+}))
+
+interface ActivatorProps {
+  disabled?: boolean
+  onClick: () => void
+  title: React.ReactNode
+}
+
+export default React.forwardRef<HTMLDivElement, ActivatorProps>(function Activator(
+  { disabled, onClick, title },
+  ref,
+) {
+  const classes = useStyles()
+  return (
+    <M.ListItem button disableGutters disabled={disabled} onClick={onClick} ref={ref}>
+      <M.ListItemIcon className={classes.icon}>
+        <M.Icon>add_circle_outline</M.Icon>
+      </M.ListItemIcon>
+      <M.ListItemText primary={title} />
+    </M.ListItem>
+  )
+})
diff --git a/catalog/app/components/Filters/BooleanFilter.tsx b/catalog/app/components/Filters/BooleanFilter.tsx
new file mode 100644
index 00000000000..7009760e945
--- /dev/null
+++ b/catalog/app/components/Filters/BooleanFilter.tsx
@@ -0,0 +1,77 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import useId from 'utils/useId'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    border: `1px solid ${t.palette.divider}`,
+    borderRadius: t.shape.borderRadius,
+  },
+  checkboxWrapper: {
+    minWidth: t.spacing(4),
+    paddingLeft: '2px',
+  },
+  label: {
+    cursor: 'pointer',
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  listItem: {
+    padding: 0,
+  },
+}))
+
+const KEYS = ['true', 'false'] as const
+
+type Key = (typeof KEYS)[number]
+
+type BooleanFilterValue = {
+  [key in Key]: boolean
+}
+
+interface BooleanFilterProps {
+  className?: string
+  value: BooleanFilterValue
+  onChange: (v: BooleanFilterValue) => void
+}
+
+export default function BooleanFilter({
+  className,
+  value,
+  onChange,
+}: BooleanFilterProps) {
+  const classes = useStyles()
+  const id = useId()
+  const handleChange = React.useCallback(
+    (key: Key, checked: boolean) => {
+      onChange({ ...value, [key]: checked })
+    },
+    [onChange, value],
+  )
+  return (
+    <div className={cx(classes.root, className)}>
+      <M.List dense disablePadding>
+        {KEYS.map((key) => (
+          <M.ListItem key={key} disableGutters className={classes.listItem} button>
+            <M.ListItemIcon className={classes.checkboxWrapper}>
+              <M.Checkbox
+                checked={value[key]}
+                id={`${key}_${id}`}
+                onChange={(event, checked) => handleChange(key, checked)}
+                size="small"
+              />
+            </M.ListItemIcon>
+            <M.ListItemText>
+              <label className={classes.label} htmlFor={`${key}_${id}`}>
+                {key}
+              </label>
+            </M.ListItemText>
+          </M.ListItem>
+        ))}
+      </M.List>
+    </div>
+  )
+}
diff --git a/catalog/app/components/Filters/Container.tsx b/catalog/app/components/Filters/Container.tsx
new file mode 100644
index 00000000000..6187307f5c1
--- /dev/null
+++ b/catalog/app/components/Filters/Container.tsx
@@ -0,0 +1,93 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+import { fade } from '@material-ui/core/styles'
+
+import Skeleton from 'components/Skeleton'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {},
+  close: {},
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: t.spacing(0, 0, 2),
+    position: 'relative',
+  },
+  header: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: t.spacing(0, 0, 1.5),
+  },
+  title: {
+    ...t.typography.body2,
+    fontWeight: 500,
+  },
+  lock: {
+    alignItems: 'center',
+    animation: '$showLock .3s ease-out',
+    background: fade(t.palette.background.paper, 0.7),
+    bottom: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  spinner: {},
+  '@keyframes showLock': {
+    '0%': {
+      transform: 'scale(1.2x)',
+    },
+    '100%': {
+      transform: 'scale(1)',
+    },
+  },
+}))
+
+interface ContainerProps {
+  children?: React.ReactNode
+  className?: string
+  extenting?: boolean
+  onDeactivate?: () => void
+  title: React.ReactNode
+  defaultExpanded?: boolean
+}
+
+export default function Container({
+  className,
+  children,
+  title,
+  extenting,
+  onDeactivate,
+}: ContainerProps) {
+  const classes = useStyles()
+  return (
+    <div className={cx(classes.root, className)}>
+      <div className={classes.header}>
+        <div className={classes.title}>{title}</div>
+        {onDeactivate && (
+          <M.IconButton size="small" className={classes.close} onClick={onDeactivate}>
+            <M.Icon fontSize="inherit">clear</M.Icon>
+          </M.IconButton>
+        )}
+      </div>
+      <div className={classes.content}>
+        {children ? (
+          <>
+            {children}
+            {extenting && (
+              <div className={classes.lock}>
+                <M.CircularProgress className={classes.spinner} size={28} />
+              </div>
+            )}
+          </>
+        ) : (
+          <Skeleton height={32} />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/catalog/app/components/Filters/DatesRange.tsx b/catalog/app/components/Filters/DatesRange.tsx
new file mode 100644
index 00000000000..084dd788306
--- /dev/null
+++ b/catalog/app/components/Filters/DatesRange.tsx
@@ -0,0 +1,63 @@
+import * as dateFns from 'date-fns'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const ymdToDate = (ymd: string): Date => new Date(ymd)
+
+const dateToYmd = (date: Date): string => dateFns.format(date, 'yyyy-MM-dd')
+
+const useStyles = M.makeStyles((t) => {
+  const gap = t.spacing(1)
+  return {
+    root: {
+      display: 'grid',
+      gridTemplateColumns: `calc(50% - ${gap / 2}px) calc(50% - ${gap / 2}px)`,
+      columnGap: gap,
+    },
+    input: {
+      background: t.palette.background.paper,
+    },
+  }
+})
+
+interface DateRangeProps {
+  extents: { min: Date; max: Date }
+  onChange: (v: { min: Date | null; max: Date | null }) => void
+  value: { min: Date | null; max: Date | null }
+}
+
+export default function DatesRange({ extents, value, onChange }: DateRangeProps) {
+  const classes = useStyles()
+  const min = value.min || extents.min
+  const max = value.max || extents.max
+  const handleFrom = React.useCallback(
+    (event) => onChange({ min: ymdToDate(event.target.value), max }),
+    [onChange, max],
+  )
+  const handleTo = React.useCallback(
+    (event) => onChange({ min, max: ymdToDate(event.target.value) }),
+    [onChange, min],
+  )
+  return (
+    <div className={classes.root}>
+      <M.TextField
+        className={classes.input}
+        label="From"
+        onChange={handleFrom}
+        size="small"
+        type="date"
+        value={dateToYmd(min)}
+        variant="outlined"
+      />
+      <M.TextField
+        className={classes.input}
+        label="To"
+        onChange={handleTo}
+        size="small"
+        type="date"
+        value={dateToYmd(max)}
+        variant="outlined"
+      />
+    </div>
+  )
+}
diff --git a/catalog/app/components/Filters/Enum.tsx b/catalog/app/components/Filters/Enum.tsx
new file mode 100644
index 00000000000..88289de5904
--- /dev/null
+++ b/catalog/app/components/Filters/Enum.tsx
@@ -0,0 +1,96 @@
+import * as R from 'ramda'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+import * as Lab from '@material-ui/lab'
+
+function withoutOnDeleteWhen(condition: boolean, props: M.ChipProps) {
+  return condition ? R.dissoc('onDelete', props) : props
+}
+
+const useStyles = M.makeStyles((t) => ({
+  checkbox: {
+    marginRight: t.spacing(1),
+  },
+  option: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  input: {
+    background: t.palette.background.paper,
+  },
+}))
+
+interface EnumFilterProps {
+  extents: string[]
+  onChange: (v: string[]) => void
+  value: string[]
+  selectAll?: string
+}
+
+interface EnumProps
+  extends Omit<M.TextFieldProps, keyof EnumFilterProps>,
+    EnumFilterProps {}
+
+export default function Enum({
+  selectAll,
+  extents,
+  value,
+  onChange,
+  ...props
+}: EnumProps) {
+  const classes = useStyles()
+  const allExtents = React.useMemo(
+    () => (selectAll ? [selectAll, ...extents] : extents),
+    [extents, selectAll],
+  )
+  const handleChange = React.useCallback(
+    (event, newValue: string[]) => {
+      if (!selectAll) {
+        onChange(newValue)
+        return
+      }
+
+      if (value.length && newValue.includes(selectAll)) {
+        onChange([])
+        return
+      }
+      onChange(newValue.filter((b) => b !== selectAll))
+    },
+    [onChange, selectAll, value],
+  )
+  return (
+    <Lab.Autocomplete
+      fullWidth
+      multiple
+      onChange={handleChange}
+      options={allExtents}
+      renderInput={(params) => (
+        <M.TextField {...props} {...params} className={classes.input} size="small" />
+      )}
+      renderTags={(tagValue, getTagProps) =>
+        tagValue.map((option, index) => (
+          // eslint-disable-next-line react/jsx-key
+          <M.Chip
+            label={option}
+            {...withoutOnDeleteWhen(option === selectAll, getTagProps({ index }))}
+          />
+        ))
+      }
+      renderOption={(option, { selected }) => (
+        <>
+          <M.Checkbox
+            icon={<M.Icon>check_box_outline_blank</M.Icon>}
+            checkedIcon={<M.Icon>check_box</M.Icon>}
+            className={classes.checkbox}
+            checked={selected}
+            size="small"
+          />
+          <M.Typography className={classes.option} title={option} variant="body2">
+            {option.trim() ? option : <i>Empty string</i>}
+          </M.Typography>
+        </>
+      )}
+      value={selectAll && !value.length ? [selectAll] : value}
+    />
+  )
+}
diff --git a/catalog/app/components/Filters/List.tsx b/catalog/app/components/Filters/List.tsx
new file mode 100644
index 00000000000..befddded53e
--- /dev/null
+++ b/catalog/app/components/Filters/List.tsx
@@ -0,0 +1,143 @@
+import cx from 'classnames'
+import Fuse from 'fuse.js'
+import * as R from 'ramda'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import TinyTextField from './TinyTextField'
+
+// Number of items, when we show search text field
+const TEXT_FIELD_VISIBLE_THRESHOLD = 8
+
+function fuzzySearchExtents(extents: string[], searchStr: string): string[] {
+  if (!searchStr) return extents
+  const fuse = new Fuse(extents, { includeScore: true })
+  return fuse
+    .search(searchStr)
+    .sort((a, b) => (a.score || Infinity) - (b.score || Infinity))
+    .map(({ item }) => item)
+}
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: t.spacing(40),
+  },
+  checkboxWrapper: {
+    minWidth: t.spacing(4),
+    paddingLeft: '2px',
+  },
+  help: {
+    marginTop: t.spacing(1),
+  },
+  label: {
+    cursor: 'pointer',
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  listItem: {
+    padding: 0,
+  },
+  scrollArea: {
+    border: `1px solid ${M.fade(t.palette.text.primary, 0.23)}`,
+    flexGrow: 1,
+    overflow: 'hidden auto',
+    borderRadius: t.shape.borderRadius,
+  },
+  filter: {
+    background: t.palette.background.paper,
+    borderRadius: `${t.shape.borderRadius}px ${t.shape.borderRadius}px 0 0 `,
+    '& + $scrollArea': {
+      borderWidth: '0 1px 1px',
+      borderRadius: `0 0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px`,
+    },
+  },
+}))
+
+interface ListProps {
+  className?: string
+  extents: readonly string[]
+  onChange: (v: string[]) => void
+  placeholder?: string
+  searchThreshold?: number
+  value: string[]
+}
+
+export default function List({
+  className,
+  extents: rawExtents,
+  onChange,
+  placeholder,
+  value,
+  searchThreshold = TEXT_FIELD_VISIBLE_THRESHOLD,
+}: ListProps) {
+  const extents = React.useMemo(
+    () => R.uniq([...value, ...rawExtents]),
+    [value, rawExtents],
+  )
+  const [filter, setFilter] = React.useState('')
+  const classes = useStyles()
+  const valueMap = value.reduce(
+    (memo, v) => ({ ...memo, [v]: true }),
+    {} as Record<string, boolean>,
+  )
+  const filteredExtents = React.useMemo(
+    () => fuzzySearchExtents(extents, filter),
+    [filter, extents],
+  )
+  const handleChange = React.useCallback(
+    (extent, checked) => {
+      const newValue = checked ? [...value, extent] : value.filter((v) => v !== extent)
+      onChange(newValue)
+    },
+    [onChange, value],
+  )
+  const hiddenNumber = extents.length - filteredExtents.length
+  return (
+    <div className={cx(classes.root, className)}>
+      {extents.length > searchThreshold && (
+        <TinyTextField
+          fullWidth
+          onChange={setFilter}
+          placeholder={placeholder}
+          value={filter}
+          className={classes.filter}
+        />
+      )}
+      <div className={classes.scrollArea}>
+        <M.List dense disablePadding>
+          {filteredExtents.map((extent) => (
+            <M.ListItem key={extent} disableGutters className={classes.listItem} button>
+              <M.ListItemIcon className={classes.checkboxWrapper}>
+                <M.Checkbox
+                  checked={!!valueMap[extent]}
+                  id={`list_${extent}`}
+                  onChange={(event, checked) => handleChange(extent, checked)}
+                  size="small"
+                />
+              </M.ListItemIcon>
+              <M.ListItemText>
+                <label
+                  className={classes.label}
+                  htmlFor={`list_${extent}`}
+                  title={extent}
+                >
+                  {extent || <i>EMPTY STRING</i>}
+                </label>
+              </M.ListItemText>
+            </M.ListItem>
+          ))}
+        </M.List>
+      </div>
+      {!!hiddenNumber && (
+        <M.Typography variant="caption" className={classes.help}>
+          {filteredExtents.length
+            ? `There are ${hiddenNumber} more items available. Loosen search query to see more.`
+            : `${hiddenNumber} available items are hidden. Clear filters to see them.`}
+        </M.Typography>
+      )}
+    </div>
+  )
+}
diff --git a/catalog/app/components/Filters/NumbersRange.tsx b/catalog/app/components/Filters/NumbersRange.tsx
new file mode 100644
index 00000000000..300e855afac
--- /dev/null
+++ b/catalog/app/components/Filters/NumbersRange.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import * as Notifications from 'containers/Notifications'
+import { formatQuantity } from 'utils/string'
+
+const isNumber = (v: unknown): v is number => typeof v === 'number' && !Number.isNaN(v)
+
+const valueLabelFormat = (number: number) =>
+  // @ts-expect-error
+  formatQuantity(number, {
+    suffixes: ['', 'K', 'M', 'B', 'T', 'P', 'E', 'Z', 'Y'],
+  })
+
+const useStyles = M.makeStyles((t) => {
+  const gap = t.spacing(1)
+  return {
+    input: {
+      background: t.palette.background.paper,
+    },
+    inputs: {
+      display: 'grid',
+      gridTemplateColumns: `calc(50% - ${gap / 2}px) calc(50% - ${gap / 2}px)`,
+      columnGap: gap,
+    },
+    slider: {
+      padding: t.spacing(0, 1),
+    },
+  }
+})
+
+interface NumbersRangeProps {
+  extents: { min: number; max: number }
+  onChange: (v: { min: number | null; max: number | null }) => void
+  value: { min: number | null; max: number | null }
+}
+
+export default function NumbersRange({ extents, value, onChange }: NumbersRangeProps) {
+  const [invalidId, setInvalidId] = React.useState('')
+  const { push: notify, dismiss } = Notifications.use()
+  const classes = useStyles()
+  const validate = React.useCallback(
+    (v) => {
+      if (invalidId) {
+        setInvalidId('')
+        dismiss(invalidId)
+      }
+
+      if (!isNumber(v)) {
+        const {
+          notification: { id },
+        } = notify('Enter valid number, please')
+        setInvalidId(id)
+      }
+    },
+    [dismiss, invalidId, notify],
+  )
+  const handleSlider = React.useCallback(
+    (event, [min, max]) => onChange({ min, max }),
+    [onChange],
+  )
+  const min = value.min || extents.min
+  const max = value.max || extents.max
+  const handleFrom = React.useCallback(
+    (event) => {
+      const newMin = Number(event.target.value)
+      if (isNumber(newMin)) {
+        onChange({ min: newMin, max })
+      }
+      validate(newMin)
+    },
+    [onChange, max, validate],
+  )
+  const handleTo = React.useCallback(
+    (event) => {
+      const newMax = Number(event.target.value)
+      if (isNumber(newMax)) {
+        onChange({ min, max: newMax })
+      }
+      validate(newMax)
+    },
+    [onChange, min, validate],
+  )
+  const sliderValue = React.useMemo(() => [min, max], [min, max])
+  return (
+    <div>
+      <div className={classes.slider}>
+        <M.Slider
+          max={extents.max}
+          min={extents.min}
+          onChange={handleSlider}
+          value={sliderValue}
+          valueLabelFormat={valueLabelFormat}
+          valueLabelDisplay="auto"
+        />
+      </div>
+      <div className={classes.inputs}>
+        <M.TextField
+          className={classes.input}
+          label="From"
+          onChange={handleFrom}
+          size="small"
+          value={min}
+          variant="outlined"
+        />
+        <M.TextField
+          className={classes.input}
+          label="To"
+          onChange={handleTo}
+          size="small"
+          value={max}
+          variant="outlined"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/catalog/app/components/Filters/Select.tsx b/catalog/app/components/Filters/Select.tsx
new file mode 100644
index 00000000000..ce74c882290
--- /dev/null
+++ b/catalog/app/components/Filters/Select.tsx
@@ -0,0 +1,46 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    background: t.palette.background.paper,
+  },
+}))
+
+interface SelectFilterProps<T> {
+  className?: string
+  extents: T[]
+  getOptionLabel?: (o: T) => string
+  onChange: (v: T) => void
+  value: T | null
+}
+
+interface SelectProps<T>
+  extends Omit<M.SelectProps, keyof SelectFilterProps<T>>,
+    SelectFilterProps<T> {}
+
+export default function Select<T extends string>({
+  className,
+  extents,
+  getOptionLabel,
+  onChange,
+  value,
+  ...props
+}: SelectProps<T>) {
+  const classes = useStyles()
+  return (
+    <M.Select
+      className={cx(classes.root, className)}
+      value={value}
+      onChange={(event) => onChange(event.target.value as T)}
+      {...props}
+    >
+      {extents.map((extent) => (
+        <M.MenuItem value={extent} key={JSON.stringify(extent)}>
+          {getOptionLabel ? getOptionLabel(extent) : extent}
+        </M.MenuItem>
+      ))}
+    </M.Select>
+  )
+}
diff --git a/catalog/app/components/Filters/TextField.tsx b/catalog/app/components/Filters/TextField.tsx
new file mode 100644
index 00000000000..e9e5e229453
--- /dev/null
+++ b/catalog/app/components/Filters/TextField.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+interface TextFieldFilterProps {
+  value: string
+  onChange: (v: string) => void
+}
+
+interface TextFieldProps
+  extends Omit<M.TextFieldProps, keyof TextFieldFilterProps>,
+    TextFieldFilterProps {}
+
+export default function TextField({ value, onChange, ...props }: TextFieldProps) {
+  return (
+    <M.TextField
+      onChange={(event) => onChange(event.target.value)}
+      size="small"
+      value={value}
+      variant="outlined"
+      {...props}
+    />
+  )
+}
diff --git a/catalog/app/components/Filters/TinyTextField.tsx b/catalog/app/components/Filters/TinyTextField.tsx
new file mode 100644
index 00000000000..e0545975055
--- /dev/null
+++ b/catalog/app/components/Filters/TinyTextField.tsx
@@ -0,0 +1,42 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    border: `1px solid ${M.fade(t.palette.text.primary, 0.23)}`,
+    borderRadius: t.shape.borderRadius,
+    fontSize: t.typography.body2.fontSize,
+    padding: t.spacing(0, 1),
+  },
+}))
+
+type TinyTextFieldProps = Omit<M.InputBaseProps, 'onChange'> & {
+  onChange: (value: string) => void
+}
+
+export default function TinyTextField({
+  className,
+  onChange,
+  value,
+  ...props
+}: TinyTextFieldProps) {
+  const classes = useStyles()
+  return (
+    <M.InputBase
+      className={cx(classes.root, className)}
+      endAdornment={
+        value && (
+          <M.InputAdornment position="end">
+            <M.IconButton size="small" onClick={() => onChange('')}>
+              <M.Icon fontSize="inherit">clear</M.Icon>
+            </M.IconButton>
+          </M.InputAdornment>
+        )
+      }
+      onChange={(event) => onChange(event.target.value)}
+      value={value}
+      {...props}
+    />
+  )
+}
diff --git a/catalog/app/components/Filters/index.ts b/catalog/app/components/Filters/index.ts
new file mode 100644
index 00000000000..5dfed84d9d9
--- /dev/null
+++ b/catalog/app/components/Filters/index.ts
@@ -0,0 +1,10 @@
+export { default as Activator } from './Activator'
+export { default as BooleanFilter } from './BooleanFilter'
+export { default as Container } from './Container'
+export { default as DatesRange } from './DatesRange'
+export { default as Enum } from './Enum'
+export { default as List } from './List'
+export { default as NumbersRange } from './NumbersRange'
+export { default as Select } from './Select'
+export { default as TextField } from './TextField'
+export { default as TinyTextField } from './TinyTextField'
diff --git a/catalog/app/components/Layout/Layout.tsx b/catalog/app/components/Layout/Layout.tsx
index 31a993ee418..f74da8f2b7d 100644
--- a/catalog/app/components/Layout/Layout.tsx
+++ b/catalog/app/components/Layout/Layout.tsx
@@ -48,12 +48,14 @@ export function Layout({ bare = false, dark = false, children, pre }: LayoutProp
   const bookmarks = Bookmarks.use()
   return (
     <Root dark={dark}>
-      {bare ? <NavBar.Container /> : <NavBar.NavBar />}
-      {!!pre && pre}
-      {!!children && <M.Box p={4}>{children}</M.Box>}
-      <M.Box flexGrow={1} />
-      {!!isHomepage && isHomepage.isExact && <Footer />}
-      {bookmarks && <Bookmarks.Sidebar bookmarks={bookmarks} bucket={bucket} />}
+      <NavBar.Provider>
+        {bare ? <NavBar.Container /> : <NavBar.NavBar />}
+        {!!pre && pre}
+        {!!children && <M.Box p={4}>{children}</M.Box>}
+        <M.Box flexGrow={1} />
+        {!!isHomepage && isHomepage.isExact && <Footer />}
+        {bookmarks && <Bookmarks.Sidebar bookmarks={bookmarks} bucket={bucket} />}
+      </NavBar.Provider>
     </Root>
   )
 }
diff --git a/catalog/app/components/SearchHelp.tsx b/catalog/app/components/SearchHelp.tsx
deleted file mode 100644
index 1fa1294f2fe..00000000000
--- a/catalog/app/components/SearchHelp.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-import * as FP from 'fp-ts'
-import * as React from 'react'
-import * as M from '@material-ui/core'
-import * as Lab from '@material-ui/lab'
-
-import Code from 'components/Code'
-import * as style from 'constants/style'
-import StyledLink from 'utils/StyledLink'
-
-const ES_V = '6.7'
-const ES_REF = `https://www.elastic.co/guide/en/elasticsearch/reference/${ES_V}/query-dsl-query-string-query.html#query-string-syntax`
-
-const useStyles = M.makeStyles((t) => ({
-  group: {
-    marginTop: t.spacing(2),
-  },
-  headerLabel: {
-    background: 'transparent !important',
-  },
-  item: {
-    borderBottom: `1px solid ${t.palette.divider}`,
-
-    '&:last-child': {
-      border: 0,
-    },
-  },
-  list: {
-    marginBottom: t.spacing(1),
-  },
-  subList: {
-    marginLeft: t.spacing(-1.5),
-  },
-}))
-
-type ExampleFormatter = (...syntaxParts: React.ReactNode[]) => React.ReactNode
-
-interface SyntaxHelpItem {
-  example: ExampleFormatter
-  syntax: string | string[]
-  title: string
-}
-
-interface SyntaxHelpNamespace {
-  namespace: string
-  rows: SyntaxHelpItem[]
-}
-
-const syntaxHelpRows: SyntaxHelpNamespace[] = [
-  {
-    namespace: 'Fields',
-    rows: [
-      {
-        example: (s) => <>{s}TODO</>,
-        syntax: 'comment:',
-        title: 'Package comment',
-      },
-      {
-        example: (s) => <>{s}Hello</>,
-        syntax: 'content:',
-        title: 'Object content',
-      },
-      {
-        example: (s) => <>{s}*.fastq.gz</>,
-        syntax: 'ext:',
-        title: 'Object extension',
-      },
-      {
-        example: (s) => <>{s}user\/*</>,
-        syntax: 'handle:',
-        title: 'Package name',
-      },
-      {
-        example: (s) => <>{s}3192ac1*</>,
-        syntax: 'hash:',
-        title: 'Package hash',
-      },
-      {
-        example: (s) => <>{s}phase*</>,
-        syntax: 'key:',
-        title: 'Object key',
-      },
-      {
-        example: (s) => <>{s}phase*</>,
-        syntax: 'key_text:',
-        title: 'Analyzed object key',
-      },
-      {
-        example: (s) => <>{s}[2022-02-04 TO 2022-02-20]</>,
-        syntax: 'last_modified:',
-        title: 'Last modified date',
-      },
-      {
-        example: (s) => <>{s}dapi</>,
-        syntax: 'metadata:',
-        title: 'Package metadata',
-      },
-      {
-        example: (s) => <>{s}&gt;100</>,
-        syntax: 'package_stats\n  .total_files:',
-        title: 'Package total files',
-      },
-      {
-        example: (s) => <>{s}&lt;100</>,
-        syntax: 'package_stats\n  .total_bytes:',
-        title: 'Package total bytes',
-      },
-      {
-        example: (s) => <>{s}latest</>,
-        syntax: 'pointer_file:',
-        title: 'Only latest package version',
-      },
-      {
-        example: (s) => <>{s}&gt;=4096</>,
-        syntax: 'size:',
-        title: 'Object size in bytes',
-      },
-      {
-        example: (s) => <>{s}t.LVVCx*</>,
-        syntax: 'version_id:',
-        title: 'Object version id',
-      },
-    ],
-  },
-
-  {
-    namespace: 'Logical operators and grouping',
-    rows: [
-      {
-        example: (s) => <>a {s} b</>,
-        syntax: 'AND',
-        title: 'Conjunction',
-      },
-      {
-        example: (s) => <>a {s} b</>,
-        syntax: 'OR',
-        title: 'Disjunction',
-      },
-      {
-        example: (s) => <>{s} a</>,
-        syntax: 'NOT',
-        title: 'Negation',
-      },
-      {
-        example: (s) => <>{s} content</>,
-        syntax: '_exists_:',
-        title: 'Matches any non-null value for the given field',
-      },
-      {
-        example: (s1, s2) => (
-          <>
-            {s1}a AND b{s2}
-          </>
-        ),
-        syntax: ['(', ')'],
-        title: 'Group terms',
-      },
-    ],
-  },
-
-  {
-    namespace: 'Wildcards and regular expressions',
-    rows: [
-      {
-        example: (s) => <>config.y{s}ml</>,
-        syntax: '*',
-        title: 'Zero or more characters, avoid leading * (slow)',
-      },
-      {
-        example: (s) => <>React.{s}sx</>,
-        syntax: '?',
-        title: 'Exactly one character',
-      },
-      {
-        example: (s1, s2) => (
-          <>
-            {s1}lmnb[12]{s2}
-          </>
-        ),
-        syntax: ['/', '/'],
-        title: 'Regular expression (slows search)',
-      },
-    ],
-  },
-]
-
-const useExamplePartStyles = M.makeStyles((t) => ({
-  root: {
-    color: t.palette.text.hint,
-  },
-  syntax: {
-    color: t.palette.text.primary,
-  },
-}))
-
-interface ExamplePartProps {
-  syntax: string | string[]
-  example: ExampleFormatter
-}
-
-function Example({ syntax, example }: ExamplePartProps) {
-  const classes = useExamplePartStyles()
-  const syntaxParts = (Array.isArray(syntax) ? syntax : [syntax]).map((part, i) => (
-    <span key={`${part}_${i}`} className={classes.syntax}>
-      {part}
-    </span>
-  ))
-  return <span className={classes.root}>{example(...syntaxParts)}</span>
-}
-
-interface SyntaxProps {
-  syntax: string | string[]
-}
-function Syntax({ syntax }: SyntaxProps) {
-  return <>{Array.isArray(syntax) ? syntax.join('') : syntax}</>
-}
-
-interface ItemProps {
-  item: SyntaxHelpItem
-}
-
-function Item({ item }: ItemProps) {
-  const t = M.useTheme()
-  const sm = M.useMediaQuery(t.breakpoints.up('sm'))
-
-  const { example, syntax, title } = item
-  return (
-    <M.Grid container>
-      <M.Grid item xs={7}>
-        <M.Typography variant="body2">
-          <Code>
-            {sm ? (
-              <Example syntax={syntax} example={example} />
-            ) : (
-              <Syntax syntax={syntax} />
-            )}
-          </Code>
-        </M.Typography>
-      </M.Grid>
-      <M.Grid item xs>
-        <M.Typography variant="body2">{title}</M.Typography>
-      </M.Grid>
-    </M.Grid>
-  )
-}
-
-const useItemsHeaderStyles = M.makeStyles((t) => ({
-  root: {
-    borderBottom: `1px solid ${t.palette.divider}`,
-    padding: `0 ${t.spacing(2)}px ${t.spacing(1)}px`,
-  },
-}))
-
-function ItemsHeader() {
-  const classes = useItemsHeaderStyles()
-
-  return (
-    <M.Grid container className={classes.root}>
-      <M.Grid item xs={7}>
-        <M.Typography variant="subtitle2">Command</M.Typography>
-      </M.Grid>
-      <M.Grid item xs>
-        <M.Typography variant="subtitle2">Description</M.Typography>
-      </M.Grid>
-    </M.Grid>
-  )
-}
-
-const useDocsExternalLinkStyles = M.makeStyles((t) => ({
-  root: {
-    marginTop: t.spacing(2),
-    marginBottom: t.spacing(4),
-  },
-}))
-
-function DocsExternalLink() {
-  const classes = useDocsExternalLinkStyles()
-
-  return (
-    <M.Typography variant="body2" component="p" className={classes.root}>
-      {`Quilt uses ElasticSearch ${ES_V} query string queries. `}
-      <StyledLink href={ES_REF} target="_blank">
-        Learn more
-      </StyledLink>
-      .
-    </M.Typography>
-  )
-}
-
-const normalizeSyntaxItem = (s: string | string[]) =>
-  FP.function.pipe(
-    s,
-    (s1: string | string[]) => (Array.isArray(s1) ? s1.join('') : s1),
-    (s2: string) => s2.replace(/\s/g, ''),
-  )
-
-interface SearchHelpProps {
-  classes?: {
-    paper?: string
-    contents?: string
-  }
-  onQuery: (query: string) => void
-  open: boolean
-}
-
-export default function SearchHelp({
-  classes: overrides,
-  onQuery,
-  open,
-}: SearchHelpProps) {
-  const classes = useStyles()
-
-  return (
-    <M.MuiThemeProvider theme={style.appTheme}>
-      <M.Fade in={open}>
-        <M.Paper className={overrides?.paper}>
-          <div className={overrides?.contents}>
-            <Lab.TreeView
-              defaultCollapseIcon={<M.Icon>arrow_drop_down</M.Icon>}
-              defaultExpandIcon={<M.Icon>arrow_right</M.Icon>}
-              defaultExpanded={syntaxHelpRows.map(({ namespace }) => namespace)}
-              disableSelection
-              className={classes.list}
-            >
-              {syntaxHelpRows.map(({ namespace, rows }) => (
-                <Lab.TreeItem
-                  className={classes.group}
-                  label={<M.Typography variant="subtitle2">{namespace}</M.Typography>}
-                  nodeId={namespace}
-                  key={namespace}
-                  classes={{
-                    label: classes.headerLabel,
-                  }}
-                >
-                  <M.List className={classes.subList}>
-                    <ItemsHeader />
-
-                    {rows.map((item) => {
-                      const syntax = normalizeSyntaxItem(item.syntax)
-                      return (
-                        <M.ListItem
-                          key={syntax}
-                          className={classes.item}
-                          button
-                          onClick={() => onQuery(syntax)}
-                        >
-                          <Item item={item} />
-                        </M.ListItem>
-                      )
-                    })}
-                  </M.List>
-                </Lab.TreeItem>
-              ))}
-            </Lab.TreeView>
-
-            <DocsExternalLink />
-          </div>
-        </M.Paper>
-      </M.Fade>
-    </M.MuiThemeProvider>
-  )
-}
diff --git a/catalog/app/components/SearchResults/SearchResults.js b/catalog/app/components/SearchResults/SearchResults.tsx
similarity index 91%
rename from catalog/app/components/SearchResults/SearchResults.js
rename to catalog/app/components/SearchResults/SearchResults.tsx
index 55f6547b737..f54d2a48e8d 100644
--- a/catalog/app/components/SearchResults/SearchResults.js
+++ b/catalog/app/components/SearchResults/SearchResults.tsx
@@ -1,3 +1,4 @@
+// XXX: revisit: remove obsolete, merge into containers/Search
 import cx from 'classnames'
 import * as R from 'ramda'
 import * as React from 'react'
@@ -30,7 +31,7 @@ const ES_REF_WILDCARDS = `${ES_REF}/query-dsl-query-string-query.html#_wildcards
 
 const CrumbLink = M.styled(StyledLink)({ wordBreak: 'break-word' })
 
-function ObjectCrumbs({ handle, showBucket = false }) {
+function ObjectCrumbs({ handle, showBucket = false }: $TSFixMe) {
   const { urls } = NamedRoutes.use()
   const isDir = handle.key.endsWith('/')
 
@@ -50,7 +51,8 @@ function ObjectCrumbs({ handle, showBucket = false }) {
   )
   const crumbs = BreadCrumbs.use(handle.key, getSegmentRoute, rootLabel, {
     tailLink: true,
-    rootRoute: urls.bucketRoot(handle.bucket),
+    // XXX: this prop was removed
+    // rootRoute: urls.bucketRoot(handle.bucket),
   })
 
   return (
@@ -63,7 +65,9 @@ function ObjectCrumbs({ handle, showBucket = false }) {
   )
 }
 
-function HeaderIcon(props) {
+interface HeaderIconProps extends M.BoxProps {}
+
+function HeaderIcon(props: HeaderIconProps) {
   return (
     <M.Box
       component={M.Icon}
@@ -75,7 +79,13 @@ function HeaderIcon(props) {
   )
 }
 
-function ObjectHeader({ handle, showBucket, downloadable = false, expanded, onToggle }) {
+function ObjectHeader({
+  handle,
+  showBucket,
+  downloadable = false,
+  expanded,
+  onToggle,
+}: $TSFixMe) {
   return (
     <Preview.Header
       downloadable={downloadable}
@@ -88,10 +98,11 @@ function ObjectHeader({ handle, showBucket, downloadable = false, expanded, onTo
   )
 }
 
-function PackageHeader({ bucket, handle, hash, showBucket }) {
+function PackageHeader({ bucket, handle, hash, showBucket }: $TSFixMe) {
   const { urls } = NamedRoutes.use()
   return (
     <Heading mb={1}>
+      {/* @ts-expect-error */}
       <HeaderIcon title="Package" component={M.SvgIcon} viewBox="-133 0 1264 1008">
         <path
           fill="currentColor"
@@ -118,9 +129,9 @@ function PackageHeader({ bucket, handle, hash, showBucket }) {
   )
 }
 
-const SmallerSection = ({ children }) => <M.Box mt={2}>{children}</M.Box>
+const SmallerSection = ({ children }: $TSFixMe) => <M.Box mt={2}>{children}</M.Box>
 
-const SectionHeading = ({ children, ...props }) => (
+const SectionHeading = ({ children, ...props }: $TSFixMe) => (
   <M.Typography variant="h6" {...props}>
     {children}
   </M.Typography>
@@ -153,7 +164,7 @@ const useVersionInfoStyles = M.makeStyles((t) => ({
   },
 }))
 
-function VersionInfo({ bucket, path, version, versions }) {
+function VersionInfo({ bucket, path, version, versions }: $TSFixMe) {
   const classes = useVersionInfoStyles()
   const { urls } = NamedRoutes.use()
   const [versionsShown, setVersionsShown] = React.useState(false)
@@ -163,7 +174,7 @@ function VersionInfo({ bucket, path, version, versions }) {
 
   const t = M.useTheme()
   const xs = M.useMediaQuery(t.breakpoints.down('xs'))
-  const clip = (str, len) => {
+  const clip = (str: string, len: number) => {
     const s = `${str}`
     return xs ? s.substring(0, len) : s
   }
@@ -197,7 +208,7 @@ function VersionInfo({ bucket, path, version, versions }) {
       {versions.length > 1 && versionsShown && (
         <SmallerSection>
           <SectionHeading gutterBottom>Versions ordered by relevance</SectionHeading>
-          {versions.map((v) => (
+          {versions.map((v: $TSFixMe) => (
             <M.Typography
               key={`${v.updated.getTime()}:${v.id}`}
               variant="body2"
@@ -276,7 +287,7 @@ const usePreviewBoxStyles = M.makeStyles((t) => ({
   },
 }))
 
-function PreviewBox({ children, title, expanded, onToggle }) {
+function PreviewBox({ children, title, expanded, onToggle }: $TSFixMe) {
   const classes = usePreviewBoxStyles()
   return (
     <SmallerSection>
@@ -301,26 +312,26 @@ function PreviewDisplay({
   versionExistenceData,
   expanded,
   onToggle,
-}) {
+}: $TSFixMe) {
   const renderContents = React.useCallback(
     (children) => <PreviewBox {...{ children, expanded, onToggle }} />,
     [expanded, onToggle],
   )
-  const withData = (callback) =>
+  const withData = (callback: $TSFixMe) =>
     bucketExistenceData.case({
       _: callback,
       Err: () => callback(AsyncResult.Err(Preview.PreviewError.DoesNotExist({ handle }))),
       Ok: () =>
         versionExistenceData.case({
           _: callback,
-          Err: (e) =>
+          Err: (e: $TSFixMe) =>
             callback(
               AsyncResult.Err(
                 Preview.PreviewError.Unexpected({ handle, originalError: e }),
               ),
             ),
           Ok: requests.ObjectExistence.case({
-            Exists: (h) => {
+            Exists: (h: $TSFixMe) => {
               if (h.deleted) {
                 return callback(AsyncResult.Err(Preview.PreviewError.Deleted({ handle })))
               }
@@ -345,13 +356,14 @@ function PreviewDisplay({
   )
 }
 
-function Meta({ meta }) {
+function Meta({ meta }: $TSFixMe) {
   const [expanded, setExpanded] = React.useState(false)
   const onToggle = React.useCallback(() => setExpanded((e) => !e), [])
   if (!meta || R.isEmpty(meta)) return null
 
   return (
     <PreviewBox expanded={expanded} onToggle={onToggle}>
+      {/* @ts-expect-error */}
       <JsonDisplay defaultExpanded={1} name="User metadata" value={meta} />
     </PreviewBox>
   )
@@ -380,7 +392,7 @@ const useRevisionInfoStyles = M.makeStyles((t) => ({
   },
 }))
 
-function RevisionInfo({ bucket, handle, hash, comment, lastModified }) {
+function RevisionInfo({ bucket, handle, hash, comment, lastModified }: $TSFixMe) {
   const classes = useRevisionInfoStyles()
   const { urls } = NamedRoutes.use()
   return (
@@ -405,12 +417,12 @@ function RevisionInfo({ bucket, handle, hash, comment, lastModified }) {
   )
 }
 
-function ObjectHit({ hit, ...props }) {
+function ObjectHit({ hit, ...props }: $TSFixMe) {
   const Component = hit.path.endsWith('/') ? DirHit : FileHit
   return <Component {...{ hit, ...props }} />
 }
 
-function FileHit({ showBucket, hit: { path, versions, bucket } }) {
+function FileHit({ showBucket, hit: { path, versions, bucket } }: $TSFixMe) {
   const s3 = AWS.S3.use()
 
   const v = versions[0]
@@ -431,7 +443,7 @@ function FileHit({ showBucket, hit: { path, versions, bucket } }) {
           _: () => false,
           Ok: requests.ObjectExistence.case({
             _: () => false,
-            Exists: ({ deleted, archived }) => !deleted && !archived,
+            Exists: ({ deleted, archived }: $TSFixMe) => !deleted && !archived,
           }),
         }),
     })
@@ -462,7 +474,7 @@ function DirHit({
     versions: [v],
     bucket,
   },
-}) {
+}: $TSFixMe) {
   const handle = React.useMemo(() => ({ bucket, key: path }), [bucket, path])
   return (
     <Section
@@ -480,7 +492,7 @@ function DirHit({
 function PackageHit({
   showBucket,
   hit: { bucket, handle, hash, lastModified, meta, tags, comment },
-}) {
+}: $TSFixMe) {
   return (
     <Section
       data-testid="search-hit"
@@ -493,7 +505,7 @@ function PackageHit({
       <RevisionInfo {...{ bucket, handle, hash, comment, lastModified }} />
       {tags && tags.length > 0 && (
         <M.Box mt={2}>
-          {tags.map((t) => (
+          {tags.map((t: $TSFixMe) => (
             <React.Fragment key={t}>
               <M.Chip variant="outlined" size="small" label={t} />{' '}
             </React.Fragment>
@@ -505,7 +517,7 @@ function PackageHit({
   )
 }
 
-export function Hit(props) {
+export function Hit(props: $TSFixMe) {
   const Component = props.hit.type === 'package' ? PackageHit : ObjectHit
   return <Component {...props} />
 }
@@ -517,7 +529,7 @@ export function Hits({
   makePageUrl,
   perPage = PER_PAGE,
   showBucket,
-}) {
+}: $TSFixMe) {
   const actualPage = page || 1
   const pages = Math.ceil(hits.length / perPage)
 
@@ -535,9 +547,10 @@ export function Hits({
 
   return (
     <>
-      {paginated.map((hit) => (
+      {paginated.map((hit: $TSFixMe) => (
         <Hit key={hit.key} hit={hit} showBucket={showBucket} />
       ))}
+      {/* @ts-expect-error */}
       {pages > 1 && <Pagination {...{ pages, page: actualPage, makePageUrl }} />}
     </>
   )
@@ -554,12 +567,12 @@ const useAltStyles = M.makeStyles((t) => ({
   },
 }))
 
-export function Alt({ className, ...props }) {
+export function Alt({ className, ...props }: $TSFixMe) {
   const classes = useAltStyles()
   return <M.Box className={cx(className, classes.root)} {...props} />
 }
 
-export function Progress({ children }) {
+export function Progress({ children }: $TSFixMe) {
   return (
     <Alt>
       <Delay alwaysRender>
@@ -578,7 +591,7 @@ export function Progress({ children }) {
   )
 }
 
-export const handleErr = (retryUrl) => (e) => (
+export const handleErr = (retryUrl: string) => (e: $TSFixMe) => (
   <Alt>
     <M.Typography variant="h5" gutterBottom>
       {e.message === 'SearchSyntaxError' ? ( // eslint-disable-line no-nested-ternary
@@ -633,7 +646,7 @@ export const handleErr = (retryUrl) => (e) => (
   </Alt>
 )
 
-export function NothingFound({ children }) {
+export function NothingFound({ children }: $TSFixMe) {
   return (
     <Alt>
       <M.Typography variant="body1">
diff --git a/catalog/app/components/SearchResults/index.js b/catalog/app/components/SearchResults/index.ts
similarity index 100%
rename from catalog/app/components/SearchResults/index.js
rename to catalog/app/components/SearchResults/index.ts
diff --git a/catalog/app/components/SelectDropdown/SelectDropdown.tsx b/catalog/app/components/SelectDropdown/SelectDropdown.tsx
index e02c83dc3c6..cde28e0ef9e 100644
--- a/catalog/app/components/SelectDropdown/SelectDropdown.tsx
+++ b/catalog/app/components/SelectDropdown/SelectDropdown.tsx
@@ -49,6 +49,10 @@ interface SelectDropdownProps<Value extends ValueBase> {
   options: Value[]
   value: ValueBase
   className?: string
+  classes?: {
+    root?: string
+    value?: string
+  }
 }
 
 export default function SelectDropdown<Value extends ValueBase>({
@@ -56,6 +60,7 @@ export default function SelectDropdown<Value extends ValueBase>({
   adaptive = true,
   children,
   className,
+  classes: classesProp,
   disabled = false,
   emptySlot,
   loading,
@@ -96,7 +101,11 @@ export default function SelectDropdown<Value extends ValueBase>({
   const { className: buttonClassName, ...buttonProps } = ButtonProps || {}
 
   return (
-    <div className={cx(className, classes.root, { [classes.disabled]: disabled })}>
+    <div
+      className={cx(className, classes.root, classesProp?.root, {
+        [classes.disabled]: disabled,
+      })}
+    >
       <M.Button
         className={cx(classes.button, buttonClassName)}
         onClick={handleOpen}
@@ -108,7 +117,9 @@ export default function SelectDropdown<Value extends ValueBase>({
         {children}
         {(aboveSm || !adaptive) && (
           <>
-            <span className={classes.value}>{value.toString()}</span>
+            <span className={cx(classes.value, classesProp?.value)}>
+              {value.toString()}
+            </span>
             {loading && (
               <M.CircularProgress
                 className={classes.progress}
diff --git a/catalog/app/containers/NavBar/Controls.js b/catalog/app/containers/NavBar/Controls.js
index 34d8e383f88..c7bcae31451 100644
--- a/catalog/app/containers/NavBar/Controls.js
+++ b/catalog/app/containers/NavBar/Controls.js
@@ -8,6 +8,7 @@ import * as BucketConfig from 'utils/BucketConfig'
 import BucketSelect from './BucketSelect'
 import Collaborators from './Collaborators'
 import Search from './Search'
+import { useNavBar } from './Provider'
 
 const useBucketDisplayStyles = M.makeStyles((t) => ({
   root: {
@@ -68,11 +69,22 @@ function GlobalControls({ iconized }) {
   const cancel = React.useCallback(() => {
     setState(null)
   }, [setState])
+  const model = useNavBar()
+  React.useEffect(() => {
+    if (model?.input.expanded === undefined) return
+    if (model.input.expanded) {
+      search()
+    } else {
+      cancel()
+    }
+  }, [model?.input.expanded, cancel, search])
 
   return (
     <Container pr={{ xs: 6, sm: 0 }}>
-      <BucketSelect display={state === 'search' ? 'none' : undefined} />
-      <Search onFocus={search} onBlur={cancel} iconized={iconized} />
+      <M.Fade in={state !== 'search'}>
+        <BucketSelect />
+      </M.Fade>
+      <Search iconized={iconized} />
     </Container>
   )
 }
@@ -88,6 +100,15 @@ function BucketControls({ bucket, iconized }) {
   const cancel = React.useCallback(() => {
     setState(null)
   }, [setState])
+  const model = useNavBar()
+  React.useEffect(() => {
+    if (model?.input.expanded === undefined) return
+    if (model.input.expanded) {
+      search()
+    } else {
+      cancel()
+    }
+  }, [model?.input.expanded, cancel, search])
 
   const selectRef = React.useRef()
   const focusSelect = React.useCallback(() => {
@@ -100,13 +121,7 @@ function BucketControls({ bucket, iconized }) {
       {cfg.mode === 'PRODUCT' && (
         <Collaborators bucket={bucket} hidden={state === 'search'} />
       )}
-      <Search
-        bucket={bucket}
-        onFocus={search}
-        onBlur={cancel}
-        hidden={state === 'select'}
-        iconized={iconized}
-      />
+      <Search hidden={state === 'select'} iconized={iconized} />
       <M.Fade in={state === 'select'} onEnter={focusSelect}>
         <BucketSelect cancel={cancel} position="absolute" left={0} ref={selectRef} />
       </M.Fade>
diff --git a/catalog/app/containers/NavBar/Provider.tsx b/catalog/app/containers/NavBar/Provider.tsx
new file mode 100644
index 00000000000..409fb85fb7d
--- /dev/null
+++ b/catalog/app/containers/NavBar/Provider.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react'
+import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+
+import * as SearchUIModel from 'containers/Search/model'
+import * as BucketConfig from 'utils/BucketConfig'
+import * as NamedRoutes from 'utils/NamedRoutes'
+import parse from 'utils/parseSearch'
+
+import * as Suggestions from './Suggestions/model'
+
+export const expandAnimationDuration = 200
+
+function nextTick(callback: () => void) {
+  setTimeout(callback, 0)
+}
+
+function useUrlQuery() {
+  const { paths } = NamedRoutes.use()
+  const location = useLocation()
+  const match = useRouteMatch(paths.search)
+  const qs = match && parse(location.search, true)
+  return qs?.q ?? ''
+}
+
+function useSearchUIModel() {
+  return React.useContext(SearchUIModel.Context)
+}
+
+interface SearchState {
+  // input: SearchInputProps
+  input: $TSFixMe
+  onClickAway: () => void
+  reset: () => void
+  suggestions: ReturnType<typeof Suggestions.use>
+}
+
+function useSearchState(bucket?: string): SearchState {
+  const history = useHistory()
+  const location = useLocation()
+
+  const searchUIModel = useSearchUIModel()
+
+  const query = useUrlQuery()
+
+  const [value, change] = React.useState<string | null>(null)
+  const [expanded, setExpanded] = React.useState(false)
+  const [helpOpen, setHelpOpen] = React.useState(false)
+  const [focusTrigger, setFocusTrigger] = React.useState(0)
+  React.useEffect(() => setHelpOpen(false), [location])
+
+  const suggestions = Suggestions.use(value || '', bucket || searchUIModel)
+
+  const onChange = React.useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
+    change(evt.target.value)
+  }, [])
+
+  const handleHelpOpen = React.useCallback(() => {
+    setHelpOpen(true)
+    suggestions.setSelected(0)
+  }, [suggestions])
+
+  const handleExpand = React.useCallback(() => {
+    handleHelpOpen()
+    if (expanded) return
+    change(query)
+    setExpanded(true)
+  }, [expanded, query, handleHelpOpen])
+
+  const handleCollapse = React.useCallback(() => {
+    change(null)
+    setExpanded(false)
+    setHelpOpen(false)
+  }, [])
+
+  const handleSubmit = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      event.preventDefault()
+      history.push(suggestions.url)
+      handleCollapse()
+      event.currentTarget.blur()
+    },
+    [handleCollapse, history, suggestions],
+  )
+
+  const handleEscape = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      handleCollapse()
+      event.currentTarget.blur()
+    },
+    [handleCollapse],
+  )
+
+  const handleArrow = React.useCallback(
+    (reverse: boolean) => {
+      if (helpOpen) {
+        suggestions.cycleSelected(reverse)
+      } else {
+        handleHelpOpen()
+      }
+    },
+    [helpOpen, handleHelpOpen, suggestions],
+  )
+
+  const onKeyDown = React.useCallback(
+    (evt: React.KeyboardEvent<HTMLInputElement>) => {
+      switch (evt.key) {
+        case 'Enter':
+          return handleSubmit(evt)
+        case 'Tab':
+        case 'Escape':
+          return handleEscape(evt)
+        case 'ArrowDown':
+          return handleArrow(false)
+        case 'ArrowUp':
+          return handleArrow(true)
+        default:
+          handleHelpOpen()
+          break
+      }
+    },
+    [handleSubmit, handleEscape, handleArrow, handleHelpOpen],
+  )
+
+  const onClickAway = React.useCallback(() => {
+    if (expanded || helpOpen) handleCollapse()
+  }, [expanded, helpOpen, handleCollapse])
+
+  const reset = React.useCallback(() => {
+    change('')
+    // NOTE: wait for location change (making help closed),
+    //       then focus
+    // FIXME: find out better solution
+    nextTick(() => setFocusTrigger((n) => n + 1))
+  }, [])
+
+  const isExpanded = expanded || !!searchUIModel
+  const focusTriggeredCount = isExpanded ? focusTrigger : 0
+  return {
+    input: {
+      expanded: isExpanded,
+      focusTrigger: focusTriggeredCount,
+      helpOpen,
+      onChange,
+      onFocus: handleExpand,
+      onKeyDown,
+      value: value === null ? query : value,
+    },
+    reset,
+    onClickAway,
+    suggestions,
+  }
+}
+
+const Ctx = React.createContext<SearchState | null>(null)
+
+interface ProviderProps {
+  children: React.ReactNode
+}
+
+export function Provider({ children }: ProviderProps) {
+  const bucket = BucketConfig.useCurrentBucket()
+  const value = useSearchState(bucket)
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export const useNavBar = () => React.useContext(Ctx)
+
+export const use = useNavBar
diff --git a/catalog/app/containers/NavBar/Search.tsx b/catalog/app/containers/NavBar/Search.tsx
index c383eee244b..a4fb51902aa 100644
--- a/catalog/app/containers/NavBar/Search.tsx
+++ b/catalog/app/containers/NavBar/Search.tsx
@@ -1,17 +1,13 @@
 import cx from 'classnames'
 import * as React from 'react'
-import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 import * as M from '@material-ui/core'
 import { fade } from '@material-ui/core/styles/colorManipulator'
-import * as Lab from '@material-ui/lab'
 
-import SearchHelp from 'components/SearchHelp'
 import cfg from 'constants/config'
-import * as BucketConfig from 'utils/BucketConfig'
-import * as CatalogSettings from 'utils/CatalogSettings'
 import Delay from 'utils/Delay'
-import * as NamedRoutes from 'utils/NamedRoutes'
-import parse from 'utils/parseSearch'
+
+import { useNavBar, expandAnimationDuration } from './Provider'
+import Suggestions from './Suggestions'
 
 const useContainerStyles = M.makeStyles({
   root: {
@@ -34,8 +30,6 @@ function Container({ children, onClickAway }: ContainerProps) {
   return <M.ClickAwayListener onClickAway={onClickAway}>{el}</M.ClickAwayListener>
 }
 
-const expandAnimationDuration = 200
-
 const useInputStyles = M.makeStyles((t) => ({
   root: {
     background: fade(t.palette.common.white, 0),
@@ -71,7 +65,7 @@ const useInputStyles = M.makeStyles((t) => ({
     width: '100%',
   },
   input: {
-    paddingLeft: t.spacing(1),
+    paddingLeft: t.spacing(0.5),
     paddingTop: 8,
     paddingBottom: 9,
     textOverflow: 'ellipsis',
@@ -81,20 +75,12 @@ const useInputStyles = M.makeStyles((t) => ({
     },
   },
   inputIcon: {
-    cursor: 'pointer',
-    '$root$disabled &': {
-      cursor: 'not-allowed',
-    },
-  },
-  inputOptions: {
-    borderRadius: 0,
-    borderWidth: '0 1px 0 0',
-    paddingLeft: t.spacing(1.25),
-    paddingRight: t.spacing(0.25),
+    color: t.palette.text.hint,
+    margin: t.spacing(1, 0, 1, 1.5),
   },
 }))
 
-interface SearchInputExternalProps {
+interface SearchProps {
   hidden?: boolean
   iconized?: boolean
 }
@@ -104,21 +90,26 @@ type SearchInputBaseProps = Pick<
   'disabled' | 'value' | 'placeholder' | 'onFocus' | 'onKeyDown' | 'onChange'
 >
 
-interface SearchInputProps extends SearchInputExternalProps, SearchInputBaseProps {
+interface SearchInputProps extends SearchProps, SearchInputBaseProps {
   expanded?: boolean
-  helpOpen?: boolean
-  onHelpToggle?: () => void
+  focusTrigger?: number
 }
 
 function SearchInput({
   expanded = false,
-  helpOpen = false,
   hidden = false,
   iconized = false,
-  onHelpToggle,
+  focusTrigger = 0,
   ...props
 }: SearchInputProps) {
   const classes = useInputStyles()
+  const ref = React.useRef<HTMLInputElement>(null)
+  const focus = React.useCallback(() => ref.current?.focus(), [])
+  React.useEffect(() => {
+    if (focusTrigger && document.activeElement !== ref.current) {
+      focus()
+    }
+  }, [focus, focusTrigger])
   return (
     <M.InputBase
       classes={{ root: classes.root, input: classes.input }}
@@ -128,184 +119,20 @@ function SearchInput({
         [classes.iconized]: iconized,
         [classes.hidden]: hidden,
       })}
+      inputRef={ref}
       {...props}
       startAdornment={
         <M.InputAdornment position="start">
-          {iconized && !expanded ? (
-            <M.Icon className={classes.inputIcon} onClick={onHelpToggle}>
-              search
-            </M.Icon>
-          ) : (
-            <Lab.ToggleButton
-              className={classes.inputOptions}
-              size="small"
-              value="help"
-              selected={helpOpen}
-              onChange={onHelpToggle}
-              disabled={props.disabled}
-            >
-              <M.Icon fontSize="small">search</M.Icon>
-              <M.Icon fontSize="small">
-                {helpOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
-              </M.Icon>
-            </Lab.ToggleButton>
-          )}
+          <M.Icon fontSize="small" className={classes.inputIcon} onClick={focus}>
+            search
+          </M.Icon>
         </M.InputAdornment>
       }
     />
   )
 }
 
-function useSearchUrlState(bucket?: string) {
-  const { paths, urls } = NamedRoutes.use()
-  const location = useLocation()
-  const match = useRouteMatch(paths.search)
-  const isInStack = BucketConfig.useIsInStack()
-  const settings = CatalogSettings.use()
-
-  const qs = match && parse(location.search, true)
-
-  const query = qs?.q ?? ''
-  const mode = qs?.mode ?? settings?.search?.mode
-  // if not in stack, search all buckets
-  const buckets = qs?.buckets ?? (bucket && isInStack(bucket) ? bucket : undefined)
-
-  const makeUrl = React.useCallback(
-    (q: string | null) => urls.search({ q, buckets, mode }),
-    [urls, buckets, mode],
-  )
-
-  const bucketList = React.useMemo(() => buckets?.split(',') ?? [], [buckets])
-
-  return { query, makeUrl, buckets: bucketList }
-}
-
-interface SearchState {
-  buckets: string[]
-  input: SearchInputProps
-  help: Pick<Parameters<typeof SearchHelp>[0], 'open' | 'onQuery'>
-  onClickAway: () => void
-}
-
-interface SearchProps extends SearchInputExternalProps {
-  bucket?: string
-  onFocus?: () => void
-  onBlur?: () => void
-}
-
-function useSearchState({ bucket, onFocus, onBlur, ...props }: SearchProps): SearchState {
-  const history = useHistory()
-
-  const { query, makeUrl, buckets } = useSearchUrlState(bucket)
-
-  const [value, change] = React.useState<string | null>(null)
-  const [expanded, setExpanded] = React.useState(false)
-  const [helpOpen, setHelpOpen] = React.useState(false)
-
-  const onChange = React.useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
-    change(evt.target.value)
-  }, [])
-
-  const handleExpand = React.useCallback(() => {
-    if (expanded) return
-    change(query)
-    setExpanded(true)
-    onFocus?.()
-  }, [expanded, query, onFocus])
-
-  const handleCollapse = React.useCallback(() => {
-    change(null)
-    setExpanded(false)
-    setHelpOpen(false)
-    onBlur?.()
-  }, [onBlur])
-
-  const handleHelpOpen = React.useCallback(() => setHelpOpen(true), [])
-
-  const handleHelpClose = React.useCallback(() => setHelpOpen(false), [])
-
-  const onQuery = React.useCallback(
-    (strPart: string) => change((v) => (v ? `${v} ${strPart}` : strPart)),
-    [],
-  )
-
-  const onHelpToggle = React.useCallback(() => {
-    if (helpOpen) {
-      handleHelpClose()
-      return
-    }
-    if (expanded) {
-      handleHelpOpen()
-    } else {
-      handleExpand()
-      setTimeout(handleHelpOpen, expandAnimationDuration + 100)
-    }
-  }, [expanded, helpOpen, handleExpand, handleHelpClose, handleHelpOpen])
-
-  const onKeyDown = React.useCallback(
-    (evt: React.KeyboardEvent<HTMLInputElement>) => {
-      switch (evt.key) {
-        case 'Enter':
-          // suppress onSubmit
-          evt.preventDefault()
-          if (query !== value) {
-            history.push(makeUrl(value))
-          }
-          handleCollapse()
-          evt.currentTarget.blur()
-          break
-        case 'Tab':
-        case 'Escape':
-          handleCollapse()
-          evt.currentTarget.blur()
-          break
-        case 'ArrowDown':
-          handleHelpOpen()
-          break
-      }
-    },
-    [history, makeUrl, value, query, handleCollapse, handleHelpOpen],
-  )
-
-  const onClickAway = React.useCallback(() => {
-    if (expanded || helpOpen) handleCollapse()
-  }, [expanded, helpOpen, handleCollapse])
-
-  return {
-    buckets,
-    input: {
-      expanded,
-      helpOpen,
-      onChange,
-      onFocus: handleExpand,
-      onHelpToggle,
-      onKeyDown,
-      value: value === null ? query : value,
-      ...props,
-    },
-    help: {
-      onQuery,
-      open: helpOpen,
-    },
-    onClickAway,
-  }
-}
-
-function displayBucketNames(names: string[]) {
-  if (names.length > 1) return `${names.length} buckets`
-  if (names.length === 1) return `s3://${names[0]}`
-  return 'all buckets'
-}
-
 const useHelpStyles = M.makeStyles((t) => ({
-  contents: {
-    maxHeight: t.spacing(50),
-    overflowY: 'auto',
-    padding: t.spacing(0, 4),
-    [t.breakpoints.down('xs')]: {
-      padding: t.spacing(0, 1),
-    },
-  },
   paper: {
     left: 0,
     position: 'absolute',
@@ -320,13 +147,17 @@ const useHelpStyles = M.makeStyles((t) => ({
 
 function Search(props: SearchProps) {
   const helpClasses = useHelpStyles()
-  const { buckets, onClickAway, input, help } = useSearchState(props)
-  const placeholder = input.expanded ? `Search ${displayBucketNames(buckets)}` : 'Search'
+  const navbarState = useNavBar()
+  if (!navbarState) return <SearchNotAvailable />
+  const {
+    input: { helpOpen, ...input },
+    onClickAway,
+  } = navbarState
 
   return (
     <Container onClickAway={onClickAway}>
-      <SearchHelp classes={helpClasses} {...help} />
-      <SearchInput placeholder={placeholder} {...input} />
+      <Suggestions classes={helpClasses} open={helpOpen} />
+      <SearchInput placeholder="Search" {...input} {...props} />
     </Container>
   )
 }
diff --git a/catalog/app/containers/NavBar/Suggestions/Suggestions.tsx b/catalog/app/containers/NavBar/Suggestions/Suggestions.tsx
new file mode 100644
index 00000000000..4bbdc2214a6
--- /dev/null
+++ b/catalog/app/containers/NavBar/Suggestions/Suggestions.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+import * as M from '@material-ui/core'
+
+import * as style from 'constants/style'
+
+import { useNavBar } from '../Provider'
+import type { Suggestion } from './model'
+
+const displaySuggestion = (s: Suggestion) => (
+  <>
+    Search {s.what} {s.where}
+  </>
+)
+
+const useSuggestionsStyles = M.makeStyles((t) => ({
+  item: {
+    paddingLeft: t.spacing(5.5),
+  },
+}))
+
+interface SuggestionsProps {
+  items: Suggestion[]
+  selected: number
+}
+
+function SuggestionsList({ items, selected }: SuggestionsProps) {
+  const classes = useSuggestionsStyles()
+  return (
+    <M.List>
+      {items.map((item, index) => (
+        <M.MenuItem
+          button
+          className={classes.item}
+          component={Link}
+          key={item.key}
+          selected={selected === index}
+          to={item.url}
+        >
+          <M.ListItemText primary={displaySuggestion(item)} />
+        </M.MenuItem>
+      ))}
+    </M.List>
+  )
+}
+
+interface PaperWrapperProps {
+  classes?: {
+    paper?: string
+    contents?: string
+  }
+  children: React.ReactNode
+  open: boolean
+}
+
+function PaperWrapper({ children, classes, open }: PaperWrapperProps) {
+  return (
+    <M.MuiThemeProvider theme={style.appTheme}>
+      <M.Fade in={open}>
+        <M.Paper className={classes?.paper}>
+          <div className={classes?.contents}>{children}</div>
+        </M.Paper>
+      </M.Fade>
+    </M.MuiThemeProvider>
+  )
+}
+
+interface SuggestionsContainerProps {
+  classes?: {
+    paper?: string
+    contents?: string
+  }
+  open: boolean
+}
+
+export default function SuggestionsContainer({
+  classes,
+  open,
+}: SuggestionsContainerProps) {
+  const navbarModel = useNavBar()
+  if (!navbarModel) return null
+  const {
+    suggestions: { items, selected },
+  } = navbarModel
+  if (!Array.isArray(items) || !items.length) return null
+  return (
+    <PaperWrapper classes={classes} open={open}>
+      {open && <SuggestionsList items={items} selected={selected} />}
+    </PaperWrapper>
+  )
+}
diff --git a/catalog/app/containers/NavBar/Suggestions/index.ts b/catalog/app/containers/NavBar/Suggestions/index.ts
new file mode 100644
index 00000000000..64edd95cc18
--- /dev/null
+++ b/catalog/app/containers/NavBar/Suggestions/index.ts
@@ -0,0 +1 @@
+export { default } from './Suggestions'
diff --git a/catalog/app/containers/NavBar/Suggestions/model.tsx b/catalog/app/containers/NavBar/Suggestions/model.tsx
new file mode 100644
index 00000000000..5d79b64a03f
--- /dev/null
+++ b/catalog/app/containers/NavBar/Suggestions/model.tsx
@@ -0,0 +1,206 @@
+import * as React from 'react'
+
+import * as SearchUIModel from 'containers/Search/model'
+
+const { QuiltPackage, S3Object } = SearchUIModel.ResultType
+
+export interface Suggestion {
+  key: string
+  what: React.ReactNode
+  where: React.ReactNode
+  url: string
+}
+
+function useMakeUrl() {
+  const makeUrl = SearchUIModel.useMakeUrl()
+  return React.useCallback(
+    (params: Partial<SearchUIModel.SearchUrlState>) => {
+      const defaultParams = SearchUIModel.parseSearchParams('')
+      return makeUrl({
+        ...defaultParams,
+        ...params,
+      } as SearchUIModel.SearchUrlState)
+    },
+    [makeUrl],
+  )
+}
+
+function what(searchString: string, resultType: SearchUIModel.ResultType) {
+  const typeDisplay =
+    resultType === SearchUIModel.ResultType.QuiltPackage ? 'packages' : 'objects'
+  return searchString ? (
+    <>
+      <b>"{searchString}"</b> in <b>{typeDisplay}</b>
+    </>
+  ) : (
+    <b>all {typeDisplay}</b>
+  )
+}
+
+const inAllBuckets = (
+  <>
+    in <b>all buckets</b>
+  </>
+)
+const inSelectedBuckets = (buckets: string[]) => {
+  const bucketsDisplay = buckets.length === 1 ? `s3://${buckets[0]}` : 'selected buckets'
+  return (
+    <>
+      in <b>{bucketsDisplay}</b>
+    </>
+  )
+}
+
+const global = (
+  searchString: string,
+  makeUrl: ReturnType<typeof useMakeUrl>,
+): Suggestion[] => [
+  {
+    key: 'global-packages',
+    what: what(searchString, QuiltPackage),
+    where: inAllBuckets,
+    url: makeUrl({
+      searchString,
+      resultType: SearchUIModel.ResultType.QuiltPackage,
+    }),
+  },
+  {
+    key: 'global-objects',
+    what: what(searchString, S3Object),
+    where: inAllBuckets,
+    url: makeUrl({
+      searchString,
+      resultType: SearchUIModel.ResultType.S3Object,
+    }),
+  },
+]
+
+const inBucket = (
+  searchString: string,
+  makeUrl: ReturnType<typeof useMakeUrl>,
+  bucket: string,
+): Suggestion[] => [
+  {
+    key: 'bucket-packages',
+    what: what(searchString, QuiltPackage),
+    where: inSelectedBuckets([bucket]),
+    url: makeUrl({
+      searchString,
+      buckets: [bucket],
+      resultType: SearchUIModel.ResultType.QuiltPackage,
+    }),
+  },
+  {
+    key: 'bucket-objects',
+    what: what(searchString, S3Object),
+    where: inSelectedBuckets([bucket]),
+    url: makeUrl({
+      searchString,
+      buckets: [bucket],
+      resultType: SearchUIModel.ResultType.S3Object,
+    }),
+  },
+  ...global(searchString, makeUrl),
+]
+
+const inSearch = (
+  searchString: string,
+  makeUrl: ReturnType<typeof useMakeUrl>,
+  model: SearchUIModel.SearchUIModel,
+): Suggestion[] => {
+  const otherType = model.state.resultType === QuiltPackage ? S3Object : QuiltPackage
+  const items = [
+    {
+      key: 'current-settings',
+      what: what(searchString, model.state.resultType),
+      where: (
+        <>
+          with <b>current settings</b>
+        </>
+      ),
+      url: makeUrl({ ...model.state, searchString }),
+    },
+  ]
+  if (model.state.buckets.length)
+    items.push({
+      key: 'same-type-selected-buckets',
+      what: what(searchString, model.state.resultType),
+      where: inSelectedBuckets(model.state.buckets),
+      url: makeUrl({
+        searchString,
+        resultType: model.state.resultType,
+        buckets: model.state.buckets,
+      }),
+    })
+  items.push({
+    key: 'same-type-all-buckets',
+    what: what(searchString, model.state.resultType),
+    where: inAllBuckets,
+    url: makeUrl({ searchString, resultType: model.state.resultType }),
+  })
+  if (model.state.buckets.length)
+    items.push({
+      key: 'other-type-selected-buckets',
+      what: what(searchString, otherType),
+      where: inSelectedBuckets(model.state.buckets),
+      url: makeUrl({
+        searchString,
+        resultType: otherType,
+        buckets: model.state.buckets,
+      }),
+    })
+  items.push({
+    key: 'other-type-all-buckets',
+    what: what(searchString, otherType),
+    where: inAllBuckets,
+    url: makeUrl({ searchString, resultType: otherType }),
+  })
+  return items
+}
+
+function useItems(
+  searchString: string,
+  context: null | string | SearchUIModel.SearchUIModel,
+) {
+  const makeUrl = useMakeUrl()
+  return React.useMemo(() => {
+    if (!context) return global(searchString, makeUrl)
+    if (typeof context === 'string') return inBucket(searchString, makeUrl, context)
+    return inSearch(searchString, makeUrl, context)
+  }, [context, makeUrl, searchString])
+}
+
+function useSuggestions(
+  searchString: string,
+  context: null | string | SearchUIModel.SearchUIModel,
+) {
+  const [selected, setSelected] = React.useState(0)
+  const items = useItems(searchString, context)
+  const cycleSelected = React.useCallback(
+    (reverse: boolean) => {
+      setSelected((s) => {
+        if (!Array.isArray(items)) return 0
+        const max = items.length - 1
+        if (reverse) {
+          if (s <= 0) return max
+          return s - 1
+        } else {
+          if (s < 0) return 0
+          if (s >= max) return 0
+          return s + 1
+        }
+      })
+    },
+    [items],
+  )
+  const url = React.useMemo(() => {
+    const selectedItem = items[selected]
+    return typeof selectedItem === 'string' ? selectedItem : selectedItem.url
+  }, [items, selected])
+  return React.useMemo(
+    () => ({ cycleSelected, items, selected, setSelected, url }),
+    [cycleSelected, items, selected, setSelected, url],
+  )
+}
+
+export { useSuggestions as use }
diff --git a/catalog/app/containers/NavBar/index.ts b/catalog/app/containers/NavBar/index.ts
index cc2b019e5ca..7864822e136 100644
--- a/catalog/app/containers/NavBar/index.ts
+++ b/catalog/app/containers/NavBar/index.ts
@@ -1 +1,2 @@
 export * from './NavBar'
+export * from './Provider'
diff --git a/catalog/app/containers/Search/Buckets.tsx b/catalog/app/containers/Search/Buckets.tsx
new file mode 100644
index 00000000000..4482048a4fa
--- /dev/null
+++ b/catalog/app/containers/Search/Buckets.tsx
@@ -0,0 +1,36 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import * as Filters from 'components/Filters'
+import * as BucketConfig from 'utils/BucketConfig'
+
+import * as SearchUIModel from './model'
+
+const useStyles = M.makeStyles({
+  root: {
+    overflow: 'hidden',
+    paddingTop: '6px',
+  },
+})
+
+export default function Buckets({ className }: { className?: string }) {
+  const classes = useStyles()
+  const model = SearchUIModel.use()
+  const bucketConfigs = BucketConfig.useRelevantBucketConfigs()
+  const extents = React.useMemo(() => bucketConfigs.map((b) => b.name), [bucketConfigs])
+  return (
+    <div className={cx(classes.root, className)}>
+      <Filters.Enum
+        extents={extents}
+        label="In buckets"
+        onChange={model.actions.setBuckets}
+        placeholder="Select buckets"
+        size="small"
+        value={model.state.buckets}
+        variant="outlined"
+        selectAll={'All buckets'}
+      />
+    </div>
+  )
+}
diff --git a/catalog/app/containers/Search/ResultType.tsx b/catalog/app/containers/Search/ResultType.tsx
new file mode 100644
index 00000000000..9a74eaf6729
--- /dev/null
+++ b/catalog/app/containers/Search/ResultType.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import * as SearchUIModel from './model'
+
+const VALUES = [SearchUIModel.ResultType.QuiltPackage, SearchUIModel.ResultType.S3Object]
+
+const LABELS = {
+  [SearchUIModel.ResultType.QuiltPackage]: 'Quilt Packages',
+  [SearchUIModel.ResultType.S3Object]: 'S3 Objects',
+}
+
+const getLabel = (value: SearchUIModel.ResultType) => LABELS[value]
+
+const useIconStyles = M.makeStyles({
+  pkg: {
+    width: '19px',
+    height: '19px',
+  },
+})
+interface IconProps {
+  resultType: SearchUIModel.ResultType
+}
+
+function Icon({ resultType }: IconProps) {
+  const classes = useIconStyles()
+  if (resultType === SearchUIModel.ResultType.S3Object) {
+    return <M.Icon fontSize="small">insert_drive_file</M.Icon>
+  }
+  return (
+    <M.SvgIcon viewBox="-133 0 1264 1008" className={classes.pkg}>
+      <path
+        fill="currentColor"
+        d="M-2 918V446l1004 4v472c0 52-41 93-92 93H91c-52 0-93-43-93-97zM193 3h278v380H0c0-6 0-12 2-16L102 68c14-40 50-65 91-65zm709 63l100 299v2c2 4 2 8 2 12H534V1h277c41 0 77 25 91 65z"
+      />
+    </M.SvgIcon>
+  )
+}
+
+const useResultTypeStyles = M.makeStyles((t) => ({
+  root: {
+    border: `1px solid ${M.fade(t.palette.text.primary, 0.23)}`,
+    borderRadius: t.shape.borderRadius,
+  },
+  icon: {
+    minWidth: t.spacing(3.5),
+  },
+  item: {
+    paddingLeft: t.spacing(1.5),
+    paddingRight: t.spacing(1),
+    '&:first-child': {
+      borderRadius: `${t.shape.borderRadius}px ${t.shape.borderRadius}px 0 0`,
+    },
+    '&:last-child': {
+      borderRadius: `0 0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px`,
+    },
+  },
+}))
+
+export default function ResultType() {
+  const classes = useResultTypeStyles()
+  const model = SearchUIModel.use()
+  return (
+    <M.List dense disablePadding className={classes.root}>
+      {VALUES.map((v) => {
+        const selected = model.state.resultType === v
+        return (
+          <M.ListItem
+            button
+            className={classes.item}
+            disableGutters
+            key={v}
+            onClick={() => model.actions.setResultType(v)}
+            selected={selected}
+          >
+            <M.ListItemIcon className={classes.icon}>
+              <Icon resultType={v} />
+            </M.ListItemIcon>
+            <M.ListItemText primary={getLabel(v)} />
+          </M.ListItem>
+        )
+      })}
+    </M.List>
+  )
+}
diff --git a/catalog/app/containers/Search/Results.tsx b/catalog/app/containers/Search/Results.tsx
new file mode 100644
index 00000000000..ad904e0b7a6
--- /dev/null
+++ b/catalog/app/containers/Search/Results.tsx
@@ -0,0 +1,165 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import Skeleton from 'components/Skeleton'
+import sand from 'components/Error/sand.webp'
+import { useNavBar } from 'containers/NavBar'
+
+import * as SearchUIModel from './model'
+
+const useResultsSkeletonStyles = M.makeStyles((t) => ({
+  root: {
+    padding: t.spacing(2),
+    '& + &': {
+      marginTop: t.spacing(1),
+    },
+  },
+  header: {
+    display: 'flex',
+  },
+  expand: {
+    marginLeft: 'auto',
+    height: t.spacing(4),
+    width: t.spacing(15),
+  },
+  title: {
+    height: t.spacing(4),
+    width: '55%',
+  },
+  version: {
+    height: t.spacing(3.5),
+    width: '75%',
+    marginTop: t.spacing(1),
+  },
+  content: {
+    height: t.spacing(30),
+    marginTop: t.spacing(2),
+  },
+}))
+
+interface ResultsSkeletonProps {
+  className?: string
+}
+
+export function ResultsSkeleton({ className }: ResultsSkeletonProps) {
+  const classes = useResultsSkeletonStyles()
+  return (
+    <div className={className}>
+      <M.Paper className={classes.root}>
+        <div className={classes.header}>
+          <Skeleton className={classes.title} />
+          <Skeleton className={classes.expand} />
+        </div>
+        <Skeleton className={classes.version} />
+        <Skeleton className={classes.content} />
+      </M.Paper>
+      <M.Paper className={classes.root}>
+        <div className={classes.header}>
+          <Skeleton className={classes.title} />
+          <Skeleton className={classes.expand} />
+        </div>
+        <Skeleton className={classes.version} />
+        <Skeleton className={classes.content} />
+      </M.Paper>
+      <M.Paper className={classes.root}>
+        <div className={classes.header}>
+          <Skeleton className={classes.title} />
+          <Skeleton className={classes.expand} />
+        </div>
+        <Skeleton className={classes.version} />
+        <Skeleton className={classes.content} />
+      </M.Paper>
+    </div>
+  )
+}
+
+const useEmptyResultsStyles = M.makeStyles((t) => ({
+  root: {
+    textAlign: 'center',
+  },
+  actions: {
+    marginTop: t.spacing(3),
+  },
+  error: {
+    fontSize: '64px',
+    color: t.palette.error.dark,
+  },
+  title: {
+    ...t.typography.h4,
+  },
+  description: {
+    marginTop: t.spacing(2),
+    ...t.typography.body1,
+  },
+  divider: {
+    display: 'inline-block',
+    margin: t.spacing(0, 2),
+    ...t.typography.body1,
+  },
+  sand: {
+    background: `url(${sand}) repeat`,
+    boxShadow: `
+      inset 0 0 4px ${t.palette.background.paper},
+      inset 0 0 10px ${t.palette.background.paper},
+      inset 0 0 20px ${t.palette.background.paper},
+      inset 0 0 50px ${t.palette.background.paper}`,
+    height: '195px',
+    marginBottom: t.spacing(4),
+  },
+}))
+
+interface EmptyResultsProps {
+  className?: string
+  clearTitle?: string
+  description?: string
+  image?: 'not-found' | 'error'
+  title?: string
+}
+
+export function EmptyResults({
+  className,
+  clearTitle = 'Clear filters',
+  description = "Try adjusting your search or filter to find what you're looking for",
+  image,
+  title = 'Nothing found',
+}: EmptyResultsProps) {
+  const classes = useEmptyResultsStyles()
+  const {
+    actions: { clearFilter },
+  } = SearchUIModel.use()
+  const navbarModel = useNavBar()
+  const handleClear = React.useCallback(
+    (event) => {
+      event.stopPropagation()
+      clearFilter()
+      navbarModel?.reset()
+    },
+    [navbarModel, clearFilter],
+  )
+  const tryAgain = React.useCallback(() => {
+    // FIXME: retry GQL request
+    window.location.reload()
+  }, [])
+  return (
+    <div className={cx(classes.root, className)}>
+      {image === 'not-found' && <div className={classes.sand} />}
+      {image === 'error' && <M.Icon className={classes.error}>error_outline</M.Icon>}
+      <div className={classes.title}>{title}</div>
+      <div className={classes.description}>{description}</div>
+      <div className={classes.actions}>
+        {image === 'error' && (
+          <>
+            <M.Button variant="outlined" onClick={tryAgain}>
+              Try again
+            </M.Button>
+            <span className={classes.divider}>or</span>
+          </>
+        )}
+        <M.Button variant="outlined" onClick={handleClear}>
+          {clearTitle}
+        </M.Button>
+      </div>
+    </div>
+  )
+}
diff --git a/catalog/app/containers/Search/Search.js b/catalog/app/containers/Search/Search.js
deleted file mode 100644
index 57b6f978ccb..00000000000
--- a/catalog/app/containers/Search/Search.js
+++ /dev/null
@@ -1,465 +0,0 @@
-import * as R from 'ramda'
-import * as React from 'react'
-import { Link, useLocation, useHistory } from 'react-router-dom'
-import * as M from '@material-ui/core'
-
-import Layout from 'components/Layout'
-import * as SearchResults from 'components/SearchResults'
-import * as BucketConfig from 'utils/BucketConfig'
-import * as Data from 'utils/Data'
-import MetaTitle from 'utils/MetaTitle'
-import * as NamedRoutes from 'utils/NamedRoutes'
-import parseSearch from 'utils/parseSearch'
-import useSearch from 'utils/search'
-import useEditableValue from 'utils/useEditableValue'
-
-function BrowseBucket({ bucket }) {
-  const { urls } = NamedRoutes.use()
-  return (
-    <>
-      <br />
-      <M.Button component={Link} to={urls.bucketRoot(bucket)} variant="outlined">
-        Browse the bucket
-      </M.Button>
-    </>
-  )
-}
-
-function Results({ buckets, data, query, page, scrollRef, makePageUrl, retryUrl }) {
-  return data.case({
-    _: () => (
-      <SearchResults.Progress>
-        Searching {displaySelectedBuckets(buckets)} for &quot;{query}&quot;
-      </SearchResults.Progress>
-    ),
-    Err: SearchResults.handleErr(retryUrl),
-    Ok: ({ total, hits }) =>
-      total ? (
-        <SearchResults.Hits {...{ hits, page, scrollRef, makePageUrl }} showBucket />
-      ) : (
-        <SearchResults.NothingFound>
-          {buckets.length === 1 && <BrowseBucket bucket={buckets[0]} />}
-        </SearchResults.NothingFound>
-      ),
-  })
-}
-
-const displaySelectedBuckets = (buckets) => {
-  if (!buckets.length) return 'all buckets'
-  if (buckets.length === 1) return `s3://${buckets[0]}`
-  return `${buckets.length} buckets`
-}
-
-const useQueryInputStyles = M.makeStyles((t) => ({
-  searchIcon: {
-    left: 8,
-    pointerEvents: 'none',
-    position: 'absolute',
-  },
-  input: {
-    paddingLeft: t.spacing(5),
-    paddingRight: t.spacing(1),
-    paddingBottom: 11,
-    paddingTop: 10,
-    [t.breakpoints.down('xs')]: {
-      paddingBottom: 15,
-      paddingTop: 14,
-    },
-  },
-}))
-
-function QueryInput({ query, buckets, onChange }) {
-  const classes = useQueryInputStyles()
-  const state = useEditableValue(query, onChange)
-  const { change, commit } = state
-
-  const handleChange = React.useCallback(
-    (e) => {
-      change(e.target.value)
-    },
-    [change],
-  )
-
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      // eslint-disable-next-line default-case
-      switch (e.key) {
-        case 'Enter':
-          // suppress onSubmit (didn't actually find this to be a problem tho)
-          e.preventDefault()
-          commit()
-          e.target.blur()
-          break
-        case 'Escape':
-          e.target.blur()
-          break
-      }
-    },
-    [commit],
-  )
-
-  const t = M.useTheme()
-  const xs = M.useMediaQuery(t.breakpoints.down('xs'))
-  const placeholder = xs ? `Search ${displaySelectedBuckets(buckets)}` : 'Search'
-
-  return (
-    <M.InputBase
-      value={state.value}
-      onFocus={state.edit}
-      onBlur={state.cancel}
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-      placeholder={placeholder}
-      classes={{ input: classes.input }}
-      fullWidth
-      startAdornment={<M.Icon className={classes.searchIcon}>search</M.Icon>}
-    />
-  )
-}
-
-const useBucketSelectDropdownStyles = M.makeStyles((t) => ({
-  btn: {
-    MozAppearance: 'none',
-    WebkitAppearance: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    outline: 0,
-    border: 0,
-    margin: 0,
-    borderRadius: 0,
-    padding: 0,
-    userSelect: 'none',
-
-    ...t.typography.body1,
-    cursor: 'pointer',
-  },
-}))
-
-function BucketSelectDropdown({ buckets, onChange, short = false }) {
-  const classes = useBucketSelectDropdownStyles()
-  const state = useEditableValue(buckets, onChange)
-  const { commitValue } = state
-
-  const options = BucketConfig.useRelevantBucketConfigs()
-
-  const anchorRef = React.useRef(null)
-
-  const handleSelect = (v) => () => {
-    state.change(
-      R.ifElse(
-        R.includes(v),
-        R.without([v]),
-        R.pipe(R.append(v), R.sortBy(R.identity)),
-      )(state.value),
-    )
-  }
-
-  const selectAll = React.useCallback(() => {
-    commitValue([])
-  }, [commitValue])
-
-  return (
-    <>
-      <button type="button" onClick={state.edit} className={classes.btn} ref={anchorRef}>
-        <span>{short ? <>s3://&hellip;</> : displaySelectedBuckets(state.value)}</span>
-        <M.Icon fontSize="inherit">expand_more</M.Icon>
-      </button>
-      <M.Menu
-        anchorEl={anchorRef.current}
-        open={state.edited}
-        onClose={state.commit}
-        MenuListProps={{ dense: true }}
-      >
-        <M.MenuItem disabled>
-          <M.ListItemText primary="Select buckets to search" />
-        </M.MenuItem>
-        <M.MenuItem selected={!state.value.length} onClick={selectAll}>
-          <M.ListItemIcon>
-            <M.Checkbox checked={!state.value.length} edge="start" />
-          </M.ListItemIcon>
-          <M.ListItemText primary="All buckets" />
-        </M.MenuItem>
-        {options.map((o) => (
-          <M.MenuItem
-            key={o.name}
-            onClick={handleSelect(o.name)}
-            selected={state.value.includes(o.name)}
-          >
-            <M.ListItemIcon>
-              <M.Checkbox checked={state.value.includes(o.name)} edge="start" />
-            </M.ListItemIcon>
-            <M.ListItemText primary={o.title} secondary={`s3://${o.name}`} />
-          </M.MenuItem>
-        ))}
-      </M.Menu>
-    </>
-  )
-}
-
-function SearchStats({ data }) {
-  return data.case({
-    _: () => '',
-    Ok: ({ total }) => (
-      <M.Typography variant="body1" component="span">
-        {total} results
-      </M.Typography>
-    ),
-  })
-}
-
-const displayMode = (m) => {
-  if (m === 'packages') return 'packages'
-  if (m === 'objects') return 'objects'
-  return 'objects & packages'
-}
-
-function ModeSelectDropdown({ mode, onChange }) {
-  const classes = useBucketSelectDropdownStyles()
-  const options = [undefined, 'objects', 'packages']
-
-  const [edited, setEdited] = React.useState(false)
-
-  const edit = React.useCallback(() => setEdited(true), [setEdited])
-  const close = React.useCallback(() => setEdited(false), [setEdited])
-
-  const anchorRef = React.useRef(null)
-
-  const handleSelect = (v) => () => {
-    onChange(v)
-    close()
-  }
-
-  return (
-    <>
-      <button type="button" onClick={edit} className={classes.btn} ref={anchorRef}>
-        {displayMode(mode)}
-        <M.Icon fontSize="inherit">expand_more</M.Icon>
-      </button>
-      <M.Menu
-        anchorEl={anchorRef.current}
-        open={edited}
-        onClose={close}
-        MenuListProps={{ dense: true }}
-      >
-        {options.map((o) => (
-          <M.MenuItem key={o || 'all'} onClick={handleSelect(o)} selected={mode === o}>
-            <M.ListItemText primary={displayMode(o)} />
-          </M.MenuItem>
-        ))}
-      </M.Menu>
-    </>
-  )
-}
-
-const useModeAndBucketSelectorStyles = M.makeStyles((t) => ({
-  overlay: {
-    background: t.palette.common.white,
-    bottom: 0,
-    display: 'flex',
-    justifyContent: 'space-between',
-    left: 44,
-    paddingRight: 4,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  controls: {
-    lineHeight: '48px',
-  },
-}))
-
-function ModeAndBucketSelector({ mode, onModeChange, buckets, onBucketsChange }) {
-  const classes = useModeAndBucketSelectorStyles()
-  const t = M.useTheme()
-  const xs = M.useMediaQuery(t.breakpoints.down('xs'))
-
-  const [controlsShown, setControlsShown] = React.useState(false)
-  const showControls = React.useCallback(() => setControlsShown(true), [setControlsShown])
-  const hideControls = React.useCallback(
-    () => setControlsShown(false),
-    [setControlsShown],
-  )
-
-  const controls = (
-    <>
-      {!xs && <M.Typography component="span">Searching </M.Typography>}
-      <ModeSelectDropdown mode={mode} onChange={onModeChange} />
-      <M.Typography component="span"> in </M.Typography>
-      <BucketSelectDropdown buckets={buckets} onChange={onBucketsChange} short={xs} />
-    </>
-  )
-
-  return xs ? (
-    <>
-      <M.IconButton onClick={showControls}>
-        <M.Icon>menu</M.Icon>
-      </M.IconButton>
-      {controlsShown && (
-        <div className={classes.overlay}>
-          <div className={classes.controls}>{controls}</div>
-          <M.IconButton onClick={hideControls}>
-            <M.Icon>done</M.Icon>
-          </M.IconButton>
-        </div>
-      )}
-    </>
-  ) : (
-    controls
-  )
-}
-
-const useSearchStyles = M.makeStyles((t) => ({
-  paper: {
-    paddingLeft: t.spacing(1.5),
-    paddingRight: t.spacing(1),
-    lineHeight: '40px',
-
-    [t.breakpoints.down('xs')]: {
-      borderRadius: 0,
-      boxShadow: 'none',
-      '&:first-child': {
-        paddingLeft: t.spacing(0.5),
-      },
-      '&:last-child': {
-        paddingRight: t.spacing(0.5),
-      },
-    },
-  },
-  stats: {
-    flexGrow: 1,
-    lineHeight: '40px',
-    padding: t.spacing(0, 3),
-    textAlign: 'right',
-    [t.breakpoints.down('xs')]: {
-      display: 'none',
-    },
-  },
-}))
-
-export default function Search() {
-  const l = useLocation()
-  const { urls } = NamedRoutes.use()
-  const history = useHistory()
-  const classes = useSearchStyles()
-
-  const scrollRef = React.useRef(null)
-
-  const { q, p, mode, ...params } = parseSearch(l.search)
-  const buckets = React.useMemo(
-    () => (params.buckets ? params.buckets.split(',').sort() : []),
-    [params.buckets],
-  )
-  const retry = (params.retry && parseInt(params.retry, 10)) || undefined
-  const page = p && parseInt(p, 10)
-
-  const handleQueryChange = React.useCallback(
-    (newQuery) => {
-      history.push(
-        urls.search({ q: newQuery, buckets: buckets.join(',') || undefined, mode }),
-      )
-    },
-    [history, urls, buckets, mode],
-  )
-
-  const handleBucketsChange = React.useCallback(
-    (newBuckets) => {
-      history.push(urls.search({ q, buckets: newBuckets.join(',') || undefined, mode }))
-    },
-    [history, urls, q, mode],
-  )
-
-  const handleModeChange = React.useCallback(
-    (newMode) => {
-      history.push(
-        urls.search({ q, buckets: buckets.join(',') || undefined, mode: newMode }),
-      )
-    },
-    [history, urls, buckets, q],
-  )
-
-  const retryUrl = urls.search({
-    q,
-    mode,
-    buckets: buckets.join(',') || undefined,
-    retry: (retry || 0) + 1,
-  })
-
-  const makePageUrl = React.useCallback(
-    (newP) =>
-      urls.search({
-        q,
-        buckets: buckets.join(',') || undefined,
-        p: newP !== 1 ? newP : undefined,
-        mode,
-        retry,
-      }),
-    [urls, q, buckets, mode, retry],
-  )
-
-  const data = Data.use(
-    useSearch(),
-    { buckets, mode, query: q, retry },
-    { noAutoFetch: !q },
-  )
-
-  return (
-    <Layout
-      pre={
-        <M.Container maxWidth="lg">
-          <MetaTitle>{q || 'Search'}</MetaTitle>
-          <M.Box pb={{ xs: 0, sm: 5 }} mx={{ xs: -2, sm: 0 }}>
-            <M.Box
-              display="flex"
-              position="relative"
-              mt={{ xs: 0, sm: 3 }}
-              ref={scrollRef}
-            >
-              <M.Box
-                component={M.Paper}
-                className={classes.paper}
-                flexGrow={{ xs: 1, sm: 0 }}
-                position="relative"
-              >
-                <QueryInput
-                  query={q || ''}
-                  buckets={buckets}
-                  onChange={handleQueryChange}
-                />
-              </M.Box>
-              <div className={classes.stats}>{!!q && <SearchStats data={data} />}</div>
-              <M.Box component={M.Paper} className={classes.paper}>
-                <ModeAndBucketSelector
-                  mode={mode}
-                  onModeChange={handleModeChange}
-                  buckets={buckets}
-                  onBucketsChange={handleBucketsChange}
-                />
-              </M.Box>
-            </M.Box>
-            {q ? (
-              <Results
-                {...{
-                  data,
-                  query: q,
-                  buckets,
-                  page,
-                  scrollRef,
-                  makePageUrl,
-                  retryUrl,
-                }}
-              />
-            ) : (
-              // TODO: revise copy
-              <SearchResults.Alt>
-                <M.Typography variant="body1">Search for anything</M.Typography>
-              </SearchResults.Alt>
-            )}
-          </M.Box>
-        </M.Container>
-      }
-    />
-  )
-}
diff --git a/catalog/app/containers/Search/Search.tsx b/catalog/app/containers/Search/Search.tsx
new file mode 100644
index 00000000000..d53ceac2855
--- /dev/null
+++ b/catalog/app/containers/Search/Search.tsx
@@ -0,0 +1,1275 @@
+import cx from 'classnames'
+import invariant from 'invariant'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import * as FiltersUI from 'components/Filters'
+import Layout from 'components/Layout'
+import * as SearchResults from 'components/SearchResults'
+import Skeleton from 'components/Skeleton'
+import * as GQL from 'utils/GraphQL'
+import * as JSONPointer from 'utils/JSONPointer'
+import MetaTitle from 'utils/MetaTitle'
+import assertNever from 'utils/assertNever'
+import * as Format from 'utils/format'
+
+import * as SearchUIModel from './model'
+import BucketSelector from './Buckets'
+import ResultTypeSelector from './ResultType'
+import { EmptyResults, ResultsSkeleton } from './Results'
+import SortSelector from './Sort'
+
+export type ComponentProps = React.PropsWithChildren<{ className?: string }>
+
+const useColumnTitleStyles = M.makeStyles((t) => ({
+  root: {
+    ...t.typography.h6,
+    lineHeight: `${t.spacing(4.5)}px`,
+  },
+}))
+
+function ColumnTitle({ className, children }: ComponentProps) {
+  const classes = useColumnTitleStyles()
+  return <div className={cx(classes.root, className)}>{children}</div>
+}
+
+const useScrollToTopStyles = M.makeStyles((t) => ({
+  root: {
+    position: 'fixed',
+    left: '50%',
+    bottom: t.spacing(3),
+    transform: `translateX(-50%)`,
+  },
+  button: {
+    background: t.palette.background.paper,
+  },
+  icon: {
+    marginRight: t.spacing(1),
+  },
+}))
+
+function ScrollToTop() {
+  const trigger = M.useScrollTrigger({ disableHysteresis: true })
+  const classes = useScrollToTopStyles()
+  const onClick = React.useCallback(
+    () => window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }),
+    [],
+  )
+  return (
+    <M.Fade in={!!trigger}>
+      <M.Container className={classes.root} maxWidth="lg">
+        <M.Fab className={classes.button} onClick={onClick} variant="extended">
+          <M.Icon className={classes.icon}>expand_less</M.Icon>
+          Scroll to the top
+        </M.Fab>
+      </M.Container>
+    </M.Fade>
+  )
+}
+
+const useFilterSectionStyles = M.makeStyles((t) => ({
+  root: {
+    marginBottom: t.spacing(2),
+    paddingBottom: t.spacing(1),
+    position: 'relative',
+    '&:after': {
+      background: t.palette.divider,
+      border: `1px solid ${t.palette.background.paper}`,
+      borderWidth: '1px 0',
+      content: '""',
+      height: '3px',
+      left: '25%',
+      position: 'absolute',
+      right: '25%',
+      bottom: 0,
+    },
+  },
+}))
+
+function FilterSection({ children, className }: ComponentProps) {
+  const classes = useFilterSectionStyles()
+  return <div className={cx(classes.root, className)}>{children}</div>
+}
+
+const useMoreButtonStyles = M.makeStyles({
+  title: {
+    paddingLeft: '3px',
+  },
+})
+
+interface MoreButtonProps extends M.ButtonProps {
+  reverse?: boolean
+}
+
+function MoreButton({ reverse, ...props }: MoreButtonProps) {
+  const classes = useMoreButtonStyles()
+  return (
+    <M.Button
+      startIcon={<M.Icon>{reverse ? 'expand_less' : 'expand_more'}</M.Icon>}
+      size="small"
+      {...props}
+    >
+      <span className={classes.title}>{reverse ? 'Less filters' : 'More filters'}</span>
+    </M.Button>
+  )
+}
+
+// const isNumber = (v: unknown): v is number => typeof v === 'number' && !Number.isNaN(v)
+
+interface FilterWidgetProps<
+  P extends SearchUIModel.KnownPredicate = SearchUIModel.KnownPredicate,
+> {
+  state: SearchUIModel.PredicateState<P>
+  extents?: SearchUIModel.ExtentsForPredicate<P>
+  onChange: (state: SearchUIModel.PredicateState<P>) => void
+}
+
+function NumberFilterWidget({
+  state,
+  extents,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['Number']>) {
+  // XXX: query extents
+  const handleChange = React.useCallback(
+    (value: { min: number | null; max: number | null }) => {
+      onChange({ ...state, gte: value.min, lte: value.max })
+    },
+    [onChange, state],
+  )
+
+  // XXX: revisit this logic
+  const extentsComputed = React.useMemo(
+    () => ({
+      min: extents?.min ?? state.gte ?? 0,
+      max: extents?.max ?? state.lte ?? 0,
+    }),
+    [extents?.min, extents?.max, state.gte, state.lte],
+  )
+
+  return (
+    <FiltersUI.NumbersRange
+      extents={extentsComputed}
+      onChange={handleChange}
+      // XXX: add units for known filters
+      // unit={unit}
+      value={{ min: state.gte, max: state.lte }}
+    />
+  )
+}
+
+function DatetimeFilterWidget({
+  state,
+  extents,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['Datetime']>) {
+  // XXX: query extents
+  const fixedExtents = React.useMemo(
+    () => ({
+      min: extents?.min ?? new Date(),
+      max: extents?.max ?? new Date(),
+    }),
+    [extents?.min, extents?.max],
+  )
+
+  const fixedValue = React.useMemo(
+    () => ({ min: state.gte, max: state.lte }),
+    [state.gte, state.lte],
+  )
+
+  const handleChange = React.useCallback(
+    (v: { min: Date | null; max: Date | null }) => {
+      onChange({ ...state, gte: v.min, lte: v.max })
+    },
+    [onChange, state],
+  )
+
+  return (
+    <FiltersUI.DatesRange
+      extents={fixedExtents}
+      onChange={handleChange}
+      value={fixedValue}
+    />
+  )
+}
+
+const EMPTY_TERMS: string[] = []
+
+function KeywordEnumFilterWidget({
+  state,
+  extents,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['KeywordEnum']>) {
+  // XXX: query extents
+  const handleChange = React.useCallback(
+    (value: string[]) => {
+      onChange({ ...state, terms: value })
+    },
+    [onChange, state],
+  )
+  const availableValues = extents?.values ?? EMPTY_TERMS
+
+  return (
+    <FiltersUI.List
+      extents={availableValues}
+      onChange={handleChange}
+      value={state.terms}
+      placeholder="Find"
+    />
+  )
+}
+
+function KeywordWildcardFilterWidget({
+  state,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['KeywordWildcard']>) {
+  const handleChange = React.useCallback(
+    (wildcard: string) => {
+      onChange({ ...state, wildcard })
+    },
+    [onChange, state],
+  )
+  // TODO: link to docs:
+  // https://www.elastic.co/guide/en/elasticsearch/reference/6.7/query-dsl-wildcard-query.html
+  return (
+    <FiltersUI.TextField
+      onChange={handleChange}
+      placeholder="Match against (wildcards supproted)"
+      value={state.wildcard}
+    />
+  )
+}
+
+function TextFilterWidget({
+  state,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['Text']>) {
+  const handleChange = React.useCallback(
+    (queryString: string) => {
+      onChange({ ...state, queryString })
+    },
+    [onChange, state],
+  )
+  // TODO: link to docs:
+  // https://www.elastic.co/guide/en/elasticsearch/reference/6.7/query-dsl-simple-query-string-query.html
+  return (
+    <FiltersUI.TextField
+      onChange={handleChange}
+      placeholder="Search for"
+      value={state.queryString}
+    />
+  )
+}
+
+type BooleanFilterValue = SearchUIModel.Untag<
+  SearchUIModel.PredicateState<SearchUIModel.Predicates['Boolean']>
+>
+
+function BooleanFilterWidget({
+  state,
+  onChange,
+}: FilterWidgetProps<SearchUIModel.Predicates['Boolean']>) {
+  const handleChange = React.useCallback(
+    (value: BooleanFilterValue) => {
+      onChange({ ...state, ...value })
+    },
+    [onChange, state],
+  )
+  return <FiltersUI.BooleanFilter onChange={handleChange} value={state} />
+}
+
+const WIDGETS = {
+  Datetime: DatetimeFilterWidget,
+  Number: NumberFilterWidget,
+  Text: TextFilterWidget,
+  KeywordEnum: KeywordEnumFilterWidget,
+  KeywordWildcard: KeywordWildcardFilterWidget,
+  Boolean: BooleanFilterWidget,
+}
+
+function FilterWidget(props: FilterWidgetProps) {
+  const Widget = WIDGETS[props.state._tag]
+  return <Widget {...(props as $TSFixMe)} />
+}
+
+const packageFilterLabels = {
+  modified: 'Last modified',
+  size: 'Cumulative package size',
+  name: 'Package name',
+  hash: 'Package hash',
+  entries: 'Total number of files in the package',
+  comment: 'Package revision comment',
+  workflow: 'Workflow',
+}
+
+interface PackagesFilterActivatorProps {
+  field: keyof SearchUIModel.PackagesSearchFilter
+}
+
+function PackagesFilterActivator({ field }: PackagesFilterActivatorProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.QuiltPackage,
+    'Filter type mismatch',
+  )
+  const { activatePackagesFilter } = model.actions
+  const activate = React.useCallback(() => {
+    activatePackagesFilter(field)
+  }, [activatePackagesFilter, field])
+  return <FiltersUI.Activator title={packageFilterLabels[field]} onClick={activate} />
+}
+
+interface PackagesFilterProps {
+  className?: string
+  field: keyof SearchUIModel.PackagesSearchFilter
+}
+
+function PackagesFilter({ className, field }: PackagesFilterProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.QuiltPackage,
+    'Filter type mismatch',
+  )
+  const predicateState = model.state.filter.predicates[field]
+  invariant(predicateState, 'Filter not active')
+
+  const extents = GQL.fold(model.baseSearchQuery, {
+    data: ({ searchPackages: r }) => {
+      switch (r.__typename) {
+        case 'EmptySearchResultSet':
+          return undefined
+        case 'InvalidInput':
+          return undefined
+        case 'PackagesSearchResultSet':
+          if (
+            field === 'workflow' ||
+            field === 'modified' ||
+            field === 'size' ||
+            field === 'entries'
+          ) {
+            return r.stats[field]
+          }
+          return undefined
+        default:
+          assertNever(r)
+      }
+    },
+    fetching: () => undefined,
+    error: () => undefined,
+  })
+
+  const { deactivatePackagesFilter, setPackagesFilter } = model.actions
+
+  const deactivate = React.useCallback(() => {
+    deactivatePackagesFilter(field)
+  }, [deactivatePackagesFilter, field])
+
+  const change = React.useCallback(
+    (state: $TSFixMe) => {
+      setPackagesFilter(field, state)
+    },
+    [setPackagesFilter, field],
+  )
+
+  return (
+    <FiltersUI.Container
+      className={className}
+      defaultExpanded
+      onDeactivate={deactivate}
+      title={packageFilterLabels[field]}
+    >
+      <FilterWidget state={predicateState} extents={extents} onChange={change} />
+    </FiltersUI.Container>
+  )
+}
+
+interface PackagesMetaFilterActivatorProps {
+  typename: SearchUIModel.PackageUserMetaFacet['__typename']
+  path: SearchUIModel.PackageUserMetaFacet['path']
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+function PackagesMetaFilterActivator({
+  typename,
+  path,
+  label,
+  disabled,
+}: PackagesMetaFilterActivatorProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.QuiltPackage,
+    'Filter type mismatch',
+  )
+  const { activatePackagesMetaFilter } = model.actions
+  const type = SearchUIModel.PackageUserMetaFacetMap[typename]
+  const activate = React.useCallback(() => {
+    activatePackagesMetaFilter(path, type)
+  }, [activatePackagesMetaFilter, path, type])
+  return <FiltersUI.Activator title={label} onClick={activate} disabled={disabled} />
+}
+
+interface PackageMetaFilterProps {
+  className?: string
+  path: string
+}
+
+function PackagesMetaFilter({ className, path }: PackageMetaFilterProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.QuiltPackage,
+    'Filter type mismatch',
+  )
+
+  const predicateState = model.state.userMetaFilters.filters.get(path)
+  invariant(predicateState, 'Filter not active')
+
+  const { deactivatePackagesMetaFilter, setPackagesMetaFilter } = model.actions
+
+  const deactivate = React.useCallback(() => {
+    deactivatePackagesMetaFilter(path)
+  }, [deactivatePackagesMetaFilter, path])
+
+  const change = React.useCallback(
+    (state: SearchUIModel.PredicateState<SearchUIModel.KnownPredicate>) => {
+      setPackagesMetaFilter(path, state)
+    },
+    [setPackagesMetaFilter, path],
+  )
+
+  const title = React.useMemo(() => JSONPointer.parse(path).join(' / '), [path])
+
+  const extents = SearchUIModel.usePackageUserMetaFacetExtents(path)
+
+  return (
+    <FiltersUI.Container
+      className={className}
+      defaultExpanded
+      onDeactivate={deactivate}
+      title={title}
+    >
+      <FilterWidget state={predicateState} extents={extents} onChange={change} />
+    </FiltersUI.Container>
+  )
+}
+
+const useFilterGroupStyles = M.makeStyles((t) => ({
+  root: {
+    background: 'inherit',
+  },
+  auxList: {
+    background: 'inherit',
+    listStyle: 'none',
+    padding: 0,
+  },
+  nested: {
+    paddingLeft: t.spacing(3),
+  },
+  iconWrapper: {
+    minWidth: t.spacing(4),
+  },
+  icon: {
+    transition: 'ease .15s transform',
+  },
+  expanded: {
+    transform: 'rotate(90deg)',
+  },
+}))
+
+interface FilterGroupProps {
+  disabled?: boolean
+  path?: string
+  items: ReturnType<typeof SearchUIModel.groupFacets>[number]['children']
+}
+
+function FilterGroup({ disabled, path, items }: FilterGroupProps) {
+  const classes = useFilterGroupStyles()
+
+  function getLabel(key: string) {
+    const [type, rest] = key.split(':')
+    switch (type) {
+      case 'path':
+        return rest
+      case 'type':
+        return `Type: ${rest}`
+      default:
+        return key
+    }
+  }
+
+  const [expanded, setExpanded] = React.useState(false)
+  const toggleExpanded = React.useCallback(() => setExpanded((x) => !x), [])
+
+  return (
+    <li className={cx(classes.root)}>
+      <ul className={classes.auxList}>
+        {!!path && (
+          <M.ListItem disabled={disabled} button disableGutters onClick={toggleExpanded}>
+            <M.ListItemIcon className={classes.iconWrapper}>
+              <M.Icon className={cx(classes.icon, { [classes.expanded]: expanded })}>
+                chevron_right
+              </M.Icon>
+            </M.ListItemIcon>
+            <M.ListItemText primary={getLabel(path)} />
+          </M.ListItem>
+        )}
+        <div className={cx({ [classes.nested]: !!path })}>
+          <M.Collapse in={expanded || !path}>
+            {Array.from(items).map(([p, node]) =>
+              node._tag === 'Tree' ? (
+                <FilterGroup
+                  disabled={disabled}
+                  items={node.children}
+                  key={path + p}
+                  path={p}
+                />
+              ) : (
+                <PackagesMetaFilterActivator
+                  disabled={disabled}
+                  key={path + p}
+                  label={getLabel(p)}
+                  path={node.value.path}
+                  typename={node.value.__typename}
+                />
+              ),
+            )}
+          </M.Collapse>
+        </div>
+      </ul>
+    </li>
+  )
+}
+
+const FACETS_THRESHOLD = 5
+
+const useAvailablePackagesMetaFiltersStyles = M.makeStyles((t) => ({
+  list: {
+    background: t.palette.background.default,
+  },
+  help: {
+    ...t.typography.caption,
+    marginTop: t.spacing(1),
+  },
+  input: {
+    background: t.palette.background.paper,
+    marginBottom: t.spacing(0.5),
+  },
+  more: {
+    marginTop: t.spacing(0.5),
+  },
+}))
+
+interface AvailablePackagesMetaFiltersProps {
+  className?: string
+  fetching: boolean
+  filters: SearchUIModel.PackageUserMetaFacet[]
+}
+
+function AvailablePackagesMetaFilters({
+  className,
+  fetching,
+  filters,
+}: AvailablePackagesMetaFiltersProps) {
+  const classes = useAvailablePackagesMetaFiltersStyles()
+  const [query, setQuery] = React.useState('')
+  const filtered = React.useMemo(
+    () =>
+      filters.length > FACETS_THRESHOLD
+        ? filters.filter((f) =>
+            (f.path + SearchUIModel.PackageUserMetaFacetMap[f.__typename])
+              .toLowerCase()
+              .includes(query.toLowerCase()),
+          )
+        : filters,
+    [filters, query],
+  )
+
+  const filteredNumber = filtered.length
+  const hiddenNumber = filters.length - filteredNumber
+
+  const [expanded, setExpanded] = React.useState(false)
+  const toggleExpanded = React.useCallback(() => setExpanded((x) => !x), [])
+
+  const [head, tail] = React.useMemo(
+    () => SearchUIModel.groupFacets(filtered, FACETS_THRESHOLD),
+    [filtered],
+  )
+
+  return (
+    <div className={className}>
+      {filters.length > FACETS_THRESHOLD && (
+        <FiltersUI.TinyTextField
+          placeholder="Find metadata filter"
+          fullWidth
+          value={query}
+          onChange={setQuery}
+          className={classes.input}
+          disabled={fetching}
+        />
+      )}
+      <M.List dense disablePadding className={classes.list}>
+        <FilterGroup disabled={fetching} items={head.children} />
+        <M.Collapse in={expanded}>
+          <FilterGroup disabled={fetching} items={tail.children} />
+        </M.Collapse>
+      </M.List>
+      {!!tail.children.size && (
+        <MoreButton
+          className={classes.more}
+          disabled={fetching}
+          onClick={toggleExpanded}
+          reverse={expanded}
+        />
+      )}
+      {!!hiddenNumber && (
+        <p className={classes.help}>
+          {filteredNumber
+            ? `There are ${hiddenNumber} more filters available. Loosen search query to see more.`
+            : `${hiddenNumber} filters are hidden. Clear search query to see them.`}
+        </p>
+      )}
+    </div>
+  )
+}
+
+const usePackagesMetaFiltersStyles = M.makeStyles((t) => ({
+  title: {
+    ...t.typography.subtitle1,
+    fontWeight: 500,
+    marginBottom: t.spacing(1),
+  },
+  spinner: {
+    marginLeft: t.spacing(1),
+  },
+}))
+
+interface PackagesMetaFiltersProps {
+  className: string
+}
+
+function PackagesMetaFilters({ className }: PackagesMetaFiltersProps) {
+  const classes = usePackagesMetaFiltersStyles()
+
+  const { activatedPaths, available, fetching } = SearchUIModel.usePackagesMetaFilters()
+
+  const noFilters = !(available.length + activatedPaths.length)
+
+  return (
+    <div className={className}>
+      <div className={classes.title}>
+        Package-level metadata
+        {fetching && <M.CircularProgress className={classes.spinner} size={12} />}
+      </div>
+      {activatedPaths.map((path) => (
+        <FilterSection key={path}>
+          <PackagesMetaFilter path={path} />
+        </FilterSection>
+      ))}
+      {!!available.length && (
+        <AvailablePackagesMetaFilters filters={available} fetching={fetching} />
+      )}
+      {noFilters && (
+        // XXX: nicer display
+        <M.Typography>No metadata found</M.Typography>
+      )}
+    </div>
+  )
+}
+
+const packagesFiltersPrimary = ['workflow', 'modified'] as const
+
+const packagesFiltersSecondary = ['size', 'name', 'hash', 'entries', 'comment'] as const
+
+const usePackageFiltersStyles = M.makeStyles((t) => ({
+  metadata: {
+    marginTop: t.spacing(3),
+  },
+  title: {
+    ...t.typography.h6,
+    fontWeight: 400,
+    marginBottom: t.spacing(1),
+  },
+  more: {
+    marginTop: t.spacing(0.5),
+  },
+}))
+
+interface PackageFiltersProps {
+  className: string
+}
+
+function PackageFilters({ className }: PackageFiltersProps) {
+  const model = SearchUIModel.use()
+  const classes = usePackageFiltersStyles()
+
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.QuiltPackage,
+    'wrong result type',
+  )
+
+  const { order: activeFilters, predicates } = model.state.filter
+
+  const availableFilters = packagesFiltersPrimary.filter((f) => !predicates[f])
+  const moreFilters = packagesFiltersSecondary.filter((f) => !predicates[f])
+
+  const [expanded, setExpanded] = React.useState(false)
+  const toggleExpanded = React.useCallback(() => setExpanded((x) => !x), [])
+
+  return (
+    <div className={className}>
+      <div className={classes.title}>Filter by</div>
+
+      {activeFilters.map((f) => (
+        <FilterSection key={f}>
+          <PackagesFilter field={f} />
+        </FilterSection>
+      ))}
+
+      {!!availableFilters.length && (
+        <M.List dense disablePadding>
+          {availableFilters.map((f) => (
+            <PackagesFilterActivator key={f} field={f} />
+          ))}
+        </M.List>
+      )}
+
+      {!!moreFilters.length && (
+        <>
+          <M.Collapse in={expanded}>
+            <M.List dense disablePadding>
+              {moreFilters.map((f) => (
+                <PackagesFilterActivator key={f} field={f} />
+              ))}
+            </M.List>
+          </M.Collapse>
+          <MoreButton
+            className={classes.more}
+            onClick={toggleExpanded}
+            reverse={expanded}
+          />
+        </>
+      )}
+
+      <PackagesMetaFilters className={classes.metadata} />
+    </div>
+  )
+}
+
+const objectFilterLabels = {
+  modified: 'Last modified',
+  size: 'Object size',
+  ext: 'Extension',
+  key: 'Object key',
+  content: 'Contents',
+  deleted: 'Delete marker',
+}
+
+interface ObjectsFilterActivatorProps {
+  field: keyof SearchUIModel.ObjectsSearchFilter
+}
+
+function ObjectsFilterActivator({ field }: ObjectsFilterActivatorProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.S3Object,
+    'Filter type mismatch',
+  )
+  const { activateObjectsFilter } = model.actions
+  const activate = React.useCallback(() => {
+    activateObjectsFilter(field)
+  }, [activateObjectsFilter, field])
+  return <FiltersUI.Activator title={objectFilterLabels[field]} onClick={activate} />
+}
+
+interface ObjectsFilterProps {
+  className?: string
+  field: keyof SearchUIModel.ObjectsSearchFilter
+}
+
+function ObjectsFilter({ className, field }: ObjectsFilterProps) {
+  const model = SearchUIModel.use()
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.S3Object,
+    'Filter type mismatch',
+  )
+  const predicateState = model.state.filter.predicates[field]
+  invariant(predicateState, 'Filter not active')
+
+  const extents = GQL.fold(model.baseSearchQuery, {
+    data: ({ searchObjects: r }) => {
+      switch (r.__typename) {
+        case 'EmptySearchResultSet':
+          return undefined
+        case 'InvalidInput':
+          return undefined
+        case 'ObjectsSearchResultSet':
+          if (field === 'modified' || field === 'size' || field === 'ext') {
+            return r.stats[field]
+          }
+          return undefined
+        default:
+          assertNever(r)
+      }
+    },
+    fetching: () => undefined,
+    error: () => undefined,
+  })
+
+  const { deactivateObjectsFilter, setObjectsFilter } = model.actions
+
+  const deactivate = React.useCallback(() => {
+    deactivateObjectsFilter(field)
+  }, [deactivateObjectsFilter, field])
+
+  const change = React.useCallback(
+    (state: $TSFixMe) => {
+      setObjectsFilter(field, state)
+    },
+    [setObjectsFilter, field],
+  )
+
+  return (
+    <FiltersUI.Container
+      className={className}
+      defaultExpanded
+      onDeactivate={deactivate}
+      title={objectFilterLabels[field]}
+    >
+      <FilterWidget state={predicateState} extents={extents} onChange={change} />
+    </FiltersUI.Container>
+  )
+}
+
+const objectsFiltersPrimary = ['modified', 'ext'] as const
+
+const objectsFiltersSecondary = ['size', 'key', 'content', 'deleted'] as const
+
+const useObjectFiltersStyles = M.makeStyles((t) => ({
+  more: {
+    marginTop: t.spacing(0.5),
+  },
+  title: {
+    ...t.typography.h6,
+    fontWeight: 400,
+    marginBottom: t.spacing(1),
+  },
+}))
+
+interface ObjectFiltersProps {
+  className: string
+}
+
+function ObjectFilters({ className }: ObjectFiltersProps) {
+  const model = SearchUIModel.use()
+  const classes = useObjectFiltersStyles()
+
+  invariant(
+    model.state.resultType === SearchUIModel.ResultType.S3Object,
+    'wrong result type',
+  )
+
+  const { order: activeFilters, predicates } = model.state.filter
+
+  const availableFilters = objectsFiltersPrimary.filter((f) => !predicates[f])
+  const moreFilters = objectsFiltersSecondary.filter((f) => !predicates[f])
+
+  const [expanded, setExpanded] = React.useState(false)
+  const toggleExpanded = React.useCallback(() => setExpanded((x) => !x), [])
+
+  return (
+    <div className={className}>
+      <div className={classes.title}>Filter by</div>
+
+      {activeFilters.map((f) => (
+        <FilterSection key={f}>
+          <ObjectsFilter field={f} />
+        </FilterSection>
+      ))}
+
+      {!!availableFilters.length && (
+        <M.List dense disablePadding>
+          {availableFilters.map((f) => (
+            <ObjectsFilterActivator key={f} field={f} />
+          ))}
+        </M.List>
+      )}
+
+      {!!moreFilters.length && (
+        <>
+          <M.Collapse in={expanded}>
+            <M.List dense disablePadding>
+              {moreFilters.map((f) => (
+                <ObjectsFilterActivator key={f} field={f} />
+              ))}
+            </M.List>
+          </M.Collapse>
+          <MoreButton
+            className={classes.more}
+            onClick={toggleExpanded}
+            reverse={expanded}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+const useFiltersStyles = M.makeStyles((t) => ({
+  root: {
+    alignContent: 'start',
+    display: 'grid',
+    gridRowGap: t.spacing(2),
+    gridTemplateRows: 'auto',
+    paddingBottom: t.spacing(12), // space reserved for "Scroll to top"
+    // TODO: Make scroll for sidebar
+    // TODO: Also, consider that buckets filter disappears
+    // overflow: 'hidden auto',
+    // padding: t.spacing(0.5, 0, 0),
+    // height: `calc(100vh - ${t.spacing(4 + 8)}px)` // -padding -header
+  },
+  variable: {
+    marginTop: t.spacing(1),
+    overflow: 'hidden auto',
+  },
+}))
+
+function Filters() {
+  const classes = useFiltersStyles()
+  const model = SearchUIModel.use()
+  return (
+    <div className={classes.root}>
+      <ColumnTitle>Search for</ColumnTitle>
+      <ResultTypeSelector />
+      <BucketSelector />
+      {model.state.resultType === SearchUIModel.ResultType.QuiltPackage ? (
+        <PackageFilters className={classes.variable} />
+      ) : (
+        <ObjectFilters className={classes.variable} />
+      )}
+      <ScrollToTop />
+    </div>
+  )
+}
+
+interface SearchHitProps {
+  hit: SearchUIModel.SearchHit
+}
+
+function SearchHit({ hit }: SearchHitProps) {
+  switch (hit.__typename) {
+    case 'SearchHitObject':
+      return (
+        <SearchResults.Hit
+          showBucket
+          hit={{
+            type: 'object',
+            bucket: hit.bucket,
+            path: hit.key,
+            versions: [{ id: hit.version, size: hit.size, updated: hit.modified }],
+          }}
+        />
+      )
+    case 'SearchHitPackage':
+      return (
+        <SearchResults.Hit
+          showBucket
+          hit={{
+            type: 'package',
+            bucket: hit.bucket,
+            handle: hit.name,
+            hash: hit.hash,
+            lastModified: hit.modified,
+            meta: hit.meta,
+            tags: [],
+            comment: hit.comment,
+          }}
+        />
+      )
+    default:
+      assertNever(hit)
+  }
+}
+
+const useLoadNextPageStyles = M.makeStyles((t) => ({
+  root: {
+    padding: t.spacing(1, 0),
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+}))
+
+interface LoadNextPageProps {
+  className: string
+  loading?: boolean
+  onClick?: () => void
+}
+
+function LoadNextPage({ className, loading = false, onClick }: LoadNextPageProps) {
+  const classes = useLoadNextPageStyles()
+  return (
+    <div className={cx(classes.root, className)}>
+      <M.Button
+        endIcon={
+          loading ? <M.CircularProgress size={16} /> : <M.Icon>expand_more</M.Icon>
+        }
+        onClick={onClick}
+        variant="outlined"
+        disabled={loading}
+      >
+        Load more
+      </M.Button>
+    </div>
+  )
+}
+
+const useResultsPageStyles = M.makeStyles((t) => ({
+  next: {
+    marginTop: t.spacing(1),
+  },
+}))
+
+interface ResultsPageProps {
+  className?: string
+  cursor: string | null
+  hits: readonly SearchUIModel.SearchHit[]
+  resultType: SearchUIModel.ResultType
+}
+
+function ResultsPage({ className, hits, cursor, resultType }: ResultsPageProps) {
+  const classes = useResultsPageStyles()
+  const [more, setMore] = React.useState(false)
+  const loadMore = React.useCallback(() => {
+    setMore(true)
+  }, [])
+  return (
+    <div className={className}>
+      {hits.map((hit) => (
+        <SearchHit key={hit.id} hit={hit} />
+      ))}
+      {!!cursor &&
+        (more ? (
+          <NextPage after={cursor} className={classes.next} resultType={resultType} />
+        ) : (
+          <LoadNextPage className={classes.next} onClick={loadMore} />
+        ))}
+    </div>
+  )
+}
+
+type NextPageQueryResult =
+  | ReturnType<typeof SearchUIModel.useNextPagePackagesQuery>
+  | ReturnType<typeof SearchUIModel.useNextPageObjectsQuery>
+
+interface NextPageQueryProps {
+  after: string
+  children: (result: NextPageQueryResult) => React.ReactElement
+}
+
+function NextPageObjectsQuery({ after, children }: NextPageQueryProps) {
+  return children(SearchUIModel.useNextPageObjectsQuery(after))
+}
+
+function NextPagePackagesQuery({ after, children }: NextPageQueryProps) {
+  return children(SearchUIModel.useNextPagePackagesQuery(after))
+}
+
+interface NextPageProps {
+  after: string
+  resultType: SearchUIModel.ResultType
+  className: string
+}
+
+function NextPage({ after, className, resultType }: NextPageProps) {
+  const NextPageQuery =
+    resultType === SearchUIModel.ResultType.S3Object
+      ? NextPageObjectsQuery
+      : NextPagePackagesQuery
+  return (
+    <NextPageQuery after={after}>
+      {(r) => {
+        switch (r._tag) {
+          case 'fetching':
+            return <LoadNextPage className={className} loading />
+          case 'error':
+            return (
+              <EmptyResults
+                className={className}
+                description={r.error.message}
+                image="error"
+                title="GQL error"
+              />
+            )
+          case 'data':
+            switch (r.data.__typename) {
+              case 'InvalidInput':
+                // should not happen
+                return (
+                  <EmptyResults
+                    className={className}
+                    description={r.data.errors[0].message}
+                    image="error"
+                    title="Invalid input"
+                  />
+                )
+              case 'PackagesSearchResultSetPage':
+              case 'ObjectsSearchResultSetPage':
+                return (
+                  <ResultsPage
+                    className={className}
+                    hits={r.data.hits}
+                    cursor={r.data.cursor}
+                    resultType={resultType}
+                  />
+                )
+              default:
+                assertNever(r.data)
+            }
+          default:
+            assertNever(r)
+        }
+      }}
+    </NextPageQuery>
+  )
+}
+
+interface ResultsInnerProps {
+  className?: string
+}
+
+function ResultsInner({ className }: ResultsInnerProps) {
+  const model = SearchUIModel.use()
+  const r = model.firstPageQuery
+
+  switch (r._tag) {
+    case 'fetching':
+      return <ResultsSkeleton className={className} />
+    case 'error':
+      return (
+        <EmptyResults
+          className={className}
+          description={r.error.message}
+          image="error"
+          title="GraphQL Error"
+        />
+      )
+    case 'data':
+      switch (r.data.__typename) {
+        case 'EmptySearchResultSet':
+          return <EmptyResults className={className} />
+        case 'InvalidInput':
+          return (
+            <EmptyResults
+              className={className}
+              description={r.data.errors[0].message}
+              image="error"
+              title="Invalid input"
+            />
+          )
+        case 'ObjectsSearchResultSet':
+        case 'PackagesSearchResultSet':
+          return (
+            <ResultsPage
+              className={className}
+              key={`${model.state.resultType}:${r.data.firstPage.cursor}`}
+              resultType={model.state.resultType}
+              hits={r.data.firstPage.hits}
+              cursor={r.data.firstPage.cursor}
+            />
+          )
+        default:
+          assertNever(r.data)
+      }
+    default:
+      assertNever(r)
+  }
+}
+
+function ResultsCount() {
+  const r = SearchUIModel.use().firstPageQuery
+  switch (r._tag) {
+    case 'fetching':
+      return <Skeleton width={140} height={24} />
+    case 'error':
+      return null
+    case 'data':
+      switch (r.data.__typename) {
+        case 'EmptySearchResultSet':
+        case 'InvalidInput':
+          return null
+        case 'ObjectsSearchResultSet':
+        case 'PackagesSearchResultSet':
+          return (
+            <ColumnTitle>
+              <Format.Plural
+                value={r.data.stats.total}
+                one="1 result"
+                other={(n) => (n > 0 ? `${n} results` : 'Results')}
+              />
+            </ColumnTitle>
+          )
+        default:
+          assertNever(r.data)
+      }
+    default:
+      assertNever(r)
+  }
+}
+
+const useResultsStyles = M.makeStyles((t) => ({
+  root: {
+    overflow: 'hidden',
+  },
+  toolbar: {
+    alignItems: 'flex-end',
+    display: 'flex',
+    minHeight: '36px',
+  },
+  sort: {
+    marginLeft: 'auto',
+  },
+  results: {
+    marginTop: t.spacing(2),
+  },
+}))
+
+function Results() {
+  const classes = useResultsStyles()
+  return (
+    <div className={classes.root}>
+      <div className={classes.toolbar}>
+        <ResultsCount />
+        <SortSelector className={classes.sort} />
+      </div>
+      <ResultsInner className={classes.results} />
+    </div>
+  )
+}
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'start',
+    display: 'grid',
+    gridColumnGap: t.spacing(2),
+    gridTemplateColumns: `${t.spacing(40)}px auto`,
+    padding: t.spacing(3),
+  },
+}))
+
+function SearchLayout() {
+  const model = SearchUIModel.use()
+  const classes = useStyles()
+  return (
+    <M.Container maxWidth="lg" className={classes.root}>
+      <MetaTitle>{model.state.searchString || 'Search'}</MetaTitle>
+      <Filters />
+      <Results />
+    </M.Container>
+  )
+}
+
+export default function Search() {
+  return (
+    <SearchUIModel.Provider>
+      <Layout pre={<SearchLayout />} />
+    </SearchUIModel.Provider>
+  )
+}
diff --git a/catalog/app/containers/Search/Sort.tsx b/catalog/app/containers/Search/Sort.tsx
new file mode 100644
index 00000000000..5ef6f8dbd04
--- /dev/null
+++ b/catalog/app/containers/Search/Sort.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import SelectDropdown from 'components/SelectDropdown'
+import * as Model from 'model'
+import * as GQL from 'utils/GraphQL'
+import assertNever from 'utils/assertNever'
+
+import * as SearchUIModel from './model'
+
+const sortOptions = [
+  {
+    toString: () => 'Best match',
+    valueOf() {
+      return Model.GQLTypes.SearchResultOrder.BEST_MATCH
+    },
+  },
+  {
+    toString: () => 'Most recent first',
+    valueOf() {
+      return Model.GQLTypes.SearchResultOrder.NEWEST
+    },
+  },
+  {
+    toString: () => 'Least recent first',
+    valueOf() {
+      return Model.GQLTypes.SearchResultOrder.OLDEST
+    },
+  },
+]
+
+const useButtonStyles = M.makeStyles((t) => ({
+  root: {
+    background: t.palette.background.paper,
+    '&:hover': {
+      background: t.palette.background.paper,
+    },
+  },
+}))
+
+const useStyles = M.makeStyles((t) => ({
+  value: {
+    fontWeight: t.typography.fontWeightMedium,
+  },
+}))
+
+interface SortProps {
+  className: string
+}
+
+export default function Sort({ className }: SortProps) {
+  const classes = useStyles()
+  const buttonClasses = useButtonStyles()
+  const model = SearchUIModel.use()
+  const { setOrder } = model.actions
+  const ButtonProps = React.useMemo(
+    () => ({
+      classes: buttonClasses,
+      variant: 'contained' as const,
+      size: 'medium' as const,
+    }),
+    [buttonClasses],
+  )
+  const value = React.useMemo(
+    () =>
+      sortOptions.find(({ valueOf }) => valueOf() === model.state.order) ||
+      sortOptions[0],
+    [model.state.order],
+  )
+  const handleChange = React.useCallback(
+    (v: (typeof sortOptions)[number]) => {
+      setOrder(v.valueOf())
+    },
+    [setOrder],
+  )
+
+  const visible = GQL.fold(model.baseSearchQuery, {
+    data: (data, { fetching }) => {
+      if (fetching) return false
+      const r =
+        model.state.resultType === SearchUIModel.ResultType.QuiltPackage
+          ? data.searchPackages
+          : data.searchObjects
+      switch (r.__typename) {
+        case 'EmptySearchResultSet':
+        case 'InvalidInput':
+          return false
+        case 'ObjectsSearchResultSet':
+        case 'PackagesSearchResultSet':
+          return true
+        default:
+          assertNever(r)
+      }
+    },
+    fetching: () => false,
+    error: () => false,
+  })
+
+  if (!visible) return null
+
+  return (
+    <SelectDropdown
+      className={className}
+      classes={classes}
+      options={sortOptions}
+      value={value}
+      onChange={handleChange}
+      ButtonProps={ButtonProps}
+    >
+      <span>Sort by:</span>&nbsp;
+    </SelectDropdown>
+  )
+}
diff --git a/catalog/app/containers/Search/gql/BaseSearch.generated.ts b/catalog/app/containers/Search/gql/BaseSearch.generated.ts
new file mode 100644
index 00000000000..8a7e3190022
--- /dev/null
+++ b/catalog/app/containers/Search/gql/BaseSearch.generated.ts
@@ -0,0 +1,501 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_BaseSearchQueryVariables = Types.Exact<{
+  buckets: Types.Maybe<ReadonlyArray<Types.Scalars['String']>>
+  searchString: Types.Maybe<Types.Scalars['String']>
+}>
+
+export type containers_Search_gql_BaseSearchQuery = { readonly __typename: 'Query' } & {
+  readonly searchPackages:
+    | ({ readonly __typename: 'PackagesSearchResultSet' } & {
+        readonly stats: { readonly __typename: 'PackagesSearchStats' } & Pick<
+          Types.PackagesSearchStats,
+          'total'
+        > & {
+            readonly modified: { readonly __typename: 'DatetimeExtents' } & Pick<
+              Types.DatetimeExtents,
+              'min' | 'max'
+            >
+            readonly size: { readonly __typename: 'NumberExtents' } & Pick<
+              Types.NumberExtents,
+              'min' | 'max'
+            >
+            readonly entries: { readonly __typename: 'NumberExtents' } & Pick<
+              Types.NumberExtents,
+              'min' | 'max'
+            >
+            readonly workflow: { readonly __typename: 'KeywordExtents' } & Pick<
+              Types.KeywordExtents,
+              'values'
+            >
+            readonly userMeta: ReadonlyArray<
+              | ({ readonly __typename: 'NumberPackageUserMetaFacet' } & Pick<
+                  Types.NumberPackageUserMetaFacet,
+                  'path'
+                > & {
+                    readonly numberExtents: {
+                      readonly __typename: 'NumberExtents'
+                    } & Pick<Types.NumberExtents, 'min' | 'max'>
+                  })
+              | ({ readonly __typename: 'DatetimePackageUserMetaFacet' } & Pick<
+                  Types.DatetimePackageUserMetaFacet,
+                  'path'
+                > & {
+                    readonly datetimeExtents: {
+                      readonly __typename: 'DatetimeExtents'
+                    } & Pick<Types.DatetimeExtents, 'min' | 'max'>
+                  })
+              | ({ readonly __typename: 'KeywordPackageUserMetaFacet' } & Pick<
+                  Types.KeywordPackageUserMetaFacet,
+                  'path'
+                > & {
+                    readonly extents: { readonly __typename: 'KeywordExtents' } & Pick<
+                      Types.KeywordExtents,
+                      'values'
+                    >
+                  })
+              | ({ readonly __typename: 'TextPackageUserMetaFacet' } & Pick<
+                  Types.TextPackageUserMetaFacet,
+                  'path'
+                >)
+              | ({ readonly __typename: 'BooleanPackageUserMetaFacet' } & Pick<
+                  Types.BooleanPackageUserMetaFacet,
+                  'path'
+                >)
+            >
+          }
+      })
+    | { readonly __typename: 'EmptySearchResultSet' }
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+  readonly searchObjects:
+    | ({ readonly __typename: 'ObjectsSearchResultSet' } & {
+        readonly stats: { readonly __typename: 'ObjectsSearchStats' } & Pick<
+          Types.ObjectsSearchStats,
+          'total'
+        > & {
+            readonly modified: { readonly __typename: 'DatetimeExtents' } & Pick<
+              Types.DatetimeExtents,
+              'min' | 'max'
+            >
+            readonly size: { readonly __typename: 'NumberExtents' } & Pick<
+              Types.NumberExtents,
+              'min' | 'max'
+            >
+            readonly ext: { readonly __typename: 'KeywordExtents' } & Pick<
+              Types.KeywordExtents,
+              'values'
+            >
+          }
+      })
+    | { readonly __typename: 'EmptySearchResultSet' }
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_BaseSearchDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_BaseSearch' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+          type: {
+            kind: 'ListType',
+            type: {
+              kind: 'NonNullType',
+              type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'searchString' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchPackages' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'buckets' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'searchString' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'searchString' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'PackagesSearchResultSet' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'stats' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'total' } },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'modified' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  { kind: 'Field', name: { kind: 'Name', value: 'min' } },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'max' } },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'size' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  { kind: 'Field', name: { kind: 'Name', value: 'min' } },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'max' } },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'entries' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  { kind: 'Field', name: { kind: 'Name', value: 'min' } },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'max' } },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'workflow' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'values' },
+                                  },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'userMeta' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: '__typename' },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'IPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          name: { kind: 'Name', value: 'path' },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'NumberPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          alias: { kind: 'Name', value: 'numberExtents' },
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'min' },
+                                              },
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'max' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'DatetimePackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          alias: {
+                                            kind: 'Name',
+                                            value: 'datetimeExtents',
+                                          },
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'min' },
+                                              },
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'max' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'KeywordPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'values' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchObjects' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'buckets' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'searchString' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'searchString' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'ObjectsSearchResultSet' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'stats' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'total' } },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'modified' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  { kind: 'Field', name: { kind: 'Name', value: 'min' } },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'max' } },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'size' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  { kind: 'Field', name: { kind: 'Name', value: 'min' } },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'max' } },
+                                ],
+                              },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'ext' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'values' },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_BaseSearchQuery,
+  containers_Search_gql_BaseSearchQueryVariables
+>
+
+export { containers_Search_gql_BaseSearchDocument as default }
diff --git a/catalog/app/containers/Search/gql/BaseSearch.graphql b/catalog/app/containers/Search/gql/BaseSearch.graphql
new file mode 100644
index 00000000000..ae9767a244a
--- /dev/null
+++ b/catalog/app/containers/Search/gql/BaseSearch.graphql
@@ -0,0 +1,83 @@
+query ($buckets: [String!], $searchString: String) {
+  searchPackages(buckets: $buckets, searchString: $searchString) {
+    __typename
+    ... on PackagesSearchResultSet {
+      stats {
+        total
+        modified {
+          min
+          max
+        }
+        size {
+          min
+          max
+        }
+        entries {
+          min
+          max
+        }
+        workflow {
+          values
+        }
+        userMeta {
+          __typename
+          ... on IPackageUserMetaFacet {
+            path
+          }
+          ... on NumberPackageUserMetaFacet {
+            numberExtents: extents {
+              min
+              max
+            }
+          }
+          ... on DatetimePackageUserMetaFacet {
+            datetimeExtents: extents {
+              min
+              max
+            }
+          }
+          ... on KeywordPackageUserMetaFacet {
+            extents {
+              values
+            }
+          }
+        }
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+  searchObjects(buckets: $buckets, searchString: $searchString) {
+    __typename
+    ... on ObjectsSearchResultSet {
+      stats {
+        total
+        modified {
+          min
+          max
+        }
+        size {
+          min
+          max
+        }
+        ext {
+          values
+        }
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/gql/FirstPageObjects.generated.ts b/catalog/app/containers/Search/gql/FirstPageObjects.generated.ts
new file mode 100644
index 00000000000..06e6f7c2712
--- /dev/null
+++ b/catalog/app/containers/Search/gql/FirstPageObjects.generated.ts
@@ -0,0 +1,237 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_FirstPageObjectsQueryVariables = Types.Exact<{
+  buckets: Types.Maybe<ReadonlyArray<Types.Scalars['String']>>
+  searchString: Types.Maybe<Types.Scalars['String']>
+  filter: Types.Maybe<Types.ObjectsSearchFilter>
+  order: Types.Maybe<Types.SearchResultOrder>
+}>
+
+export type containers_Search_gql_FirstPageObjectsQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly searchObjects:
+    | ({ readonly __typename: 'ObjectsSearchResultSet' } & {
+        readonly stats: { readonly __typename: 'ObjectsSearchStats' } & Pick<
+          Types.ObjectsSearchStats,
+          'total'
+        >
+        readonly firstPage: { readonly __typename: 'ObjectsSearchResultSetPage' } & Pick<
+          Types.ObjectsSearchResultSetPage,
+          'cursor'
+        > & {
+            readonly hits: ReadonlyArray<
+              { readonly __typename: 'SearchHitObject' } & Pick<
+                Types.SearchHitObject,
+                | 'id'
+                | 'bucket'
+                | 'score'
+                | 'size'
+                | 'modified'
+                | 'key'
+                | 'version'
+                | 'deleted'
+              >
+            >
+          }
+      })
+    | { readonly __typename: 'EmptySearchResultSet' }
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_FirstPageObjectsDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_FirstPageObjects' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+          type: {
+            kind: 'ListType',
+            type: {
+              kind: 'NonNullType',
+              type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'searchString' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+          type: {
+            kind: 'NamedType',
+            name: { kind: 'Name', value: 'ObjectsSearchFilter' },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'order' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'SearchResultOrder' } },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchObjects' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'buckets' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'searchString' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'searchString' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'ObjectsSearchResultSet' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'stats' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'total' } },
+                          ],
+                        },
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'firstPage' },
+                        arguments: [
+                          {
+                            kind: 'Argument',
+                            name: { kind: 'Name', value: 'order' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'order' },
+                            },
+                          },
+                        ],
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'cursor' } },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'hits' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: '__typename' },
+                                  },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'bucket' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'score' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'size' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'modified' },
+                                  },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'key' } },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'version' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'deleted' },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_FirstPageObjectsQuery,
+  containers_Search_gql_FirstPageObjectsQueryVariables
+>
+
+export { containers_Search_gql_FirstPageObjectsDocument as default }
diff --git a/catalog/app/containers/Search/gql/FirstPageObjects.graphql b/catalog/app/containers/Search/gql/FirstPageObjects.graphql
new file mode 100644
index 00000000000..b43c81b5b3e
--- /dev/null
+++ b/catalog/app/containers/Search/gql/FirstPageObjects.graphql
@@ -0,0 +1,37 @@
+query (
+  $buckets: [String!]
+  $searchString: String
+  $filter: ObjectsSearchFilter
+  $order: SearchResultOrder
+) {
+  searchObjects(buckets: $buckets, searchString: $searchString, filter: $filter) {
+    __typename
+    ... on ObjectsSearchResultSet {
+      stats {
+        total
+      }
+      firstPage(order: $order) {
+        cursor
+        hits {
+          __typename
+          id
+          bucket
+          score
+          size
+          modified
+          key
+          version
+          deleted
+        }
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/gql/FirstPagePackages.generated.ts b/catalog/app/containers/Search/gql/FirstPagePackages.generated.ts
new file mode 100644
index 00000000000..ac6ee43b628
--- /dev/null
+++ b/catalog/app/containers/Search/gql/FirstPagePackages.generated.ts
@@ -0,0 +1,276 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_FirstPagePackagesQueryVariables = Types.Exact<{
+  buckets: Types.Maybe<ReadonlyArray<Types.Scalars['String']>>
+  searchString: Types.Maybe<Types.Scalars['String']>
+  filter: Types.Maybe<Types.PackagesSearchFilter>
+  userMetaFilters: Types.Maybe<ReadonlyArray<Types.PackageUserMetaPredicate>>
+  order: Types.Maybe<Types.SearchResultOrder>
+}>
+
+export type containers_Search_gql_FirstPagePackagesQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly searchPackages:
+    | ({ readonly __typename: 'PackagesSearchResultSet' } & {
+        readonly stats: { readonly __typename: 'PackagesSearchStats' } & Pick<
+          Types.PackagesSearchStats,
+          'total'
+        >
+        readonly firstPage: { readonly __typename: 'PackagesSearchResultSetPage' } & Pick<
+          Types.PackagesSearchResultSetPage,
+          'cursor'
+        > & {
+            readonly hits: ReadonlyArray<
+              { readonly __typename: 'SearchHitPackage' } & Pick<
+                Types.SearchHitPackage,
+                | 'id'
+                | 'bucket'
+                | 'score'
+                | 'size'
+                | 'modified'
+                | 'name'
+                | 'hash'
+                | 'comment'
+                | 'meta'
+                | 'workflow'
+              >
+            >
+          }
+      })
+    | { readonly __typename: 'EmptySearchResultSet' }
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_FirstPagePackagesDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_FirstPagePackages' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+          type: {
+            kind: 'ListType',
+            type: {
+              kind: 'NonNullType',
+              type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'searchString' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+          type: {
+            kind: 'NamedType',
+            name: { kind: 'Name', value: 'PackagesSearchFilter' },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'userMetaFilters' },
+          },
+          type: {
+            kind: 'ListType',
+            type: {
+              kind: 'NonNullType',
+              type: {
+                kind: 'NamedType',
+                name: { kind: 'Name', value: 'PackageUserMetaPredicate' },
+              },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'order' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'SearchResultOrder' } },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchPackages' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'buckets' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'searchString' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'searchString' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'userMetaFilters' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'userMetaFilters' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'PackagesSearchResultSet' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'stats' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'total' } },
+                          ],
+                        },
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'firstPage' },
+                        arguments: [
+                          {
+                            kind: 'Argument',
+                            name: { kind: 'Name', value: 'order' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'order' },
+                            },
+                          },
+                        ],
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'cursor' } },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'hits' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: '__typename' },
+                                  },
+                                  { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'bucket' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'score' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'size' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'modified' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'name' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'hash' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'comment' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'meta' },
+                                  },
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'workflow' },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_FirstPagePackagesQuery,
+  containers_Search_gql_FirstPagePackagesQueryVariables
+>
+
+export { containers_Search_gql_FirstPagePackagesDocument as default }
diff --git a/catalog/app/containers/Search/gql/FirstPagePackages.graphql b/catalog/app/containers/Search/gql/FirstPagePackages.graphql
new file mode 100644
index 00000000000..e6395d587a3
--- /dev/null
+++ b/catalog/app/containers/Search/gql/FirstPagePackages.graphql
@@ -0,0 +1,45 @@
+query (
+  $buckets: [String!]
+  $searchString: String
+  $filter: PackagesSearchFilter
+  $userMetaFilters: [PackageUserMetaPredicate!]
+  $order: SearchResultOrder
+) {
+  searchPackages(
+    buckets: $buckets
+    searchString: $searchString
+    filter: $filter
+    userMetaFilters: $userMetaFilters
+  ) {
+    __typename
+    ... on PackagesSearchResultSet {
+      stats {
+        total
+      }
+      firstPage(order: $order) {
+        cursor
+        hits {
+          __typename
+          id
+          bucket
+          score
+          size
+          modified
+          name
+          hash
+          comment
+          meta
+          workflow
+        }
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/gql/NextPageObjects.generated.ts b/catalog/app/containers/Search/gql/NextPageObjects.generated.ts
new file mode 100644
index 00000000000..23bf18bee69
--- /dev/null
+++ b/catalog/app/containers/Search/gql/NextPageObjects.generated.ts
@@ -0,0 +1,146 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_NextPageObjectsQueryVariables = Types.Exact<{
+  after: Types.Scalars['String']
+}>
+
+export type containers_Search_gql_NextPageObjectsQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly searchMoreObjects:
+    | ({ readonly __typename: 'ObjectsSearchResultSetPage' } & Pick<
+        Types.ObjectsSearchResultSetPage,
+        'cursor'
+      > & {
+          readonly hits: ReadonlyArray<
+            { readonly __typename: 'SearchHitObject' } & Pick<
+              Types.SearchHitObject,
+              | 'id'
+              | 'bucket'
+              | 'score'
+              | 'size'
+              | 'modified'
+              | 'key'
+              | 'version'
+              | 'deleted'
+            >
+          >
+        })
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_NextPageObjectsDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_NextPageObjects' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'after' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchMoreObjects' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'after' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'after' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'ObjectsSearchResultSetPage' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'cursor' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'hits' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' },
+                            },
+                            { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'bucket' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'score' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'size' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'modified' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'key' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'version' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'deleted' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_NextPageObjectsQuery,
+  containers_Search_gql_NextPageObjectsQueryVariables
+>
+
+export { containers_Search_gql_NextPageObjectsDocument as default }
diff --git a/catalog/app/containers/Search/gql/NextPageObjects.graphql b/catalog/app/containers/Search/gql/NextPageObjects.graphql
new file mode 100644
index 00000000000..86e68f81bb8
--- /dev/null
+++ b/catalog/app/containers/Search/gql/NextPageObjects.graphql
@@ -0,0 +1,27 @@
+query ($after: String!) {
+  searchMoreObjects(after: $after) {
+    __typename
+    ... on ObjectsSearchResultSetPage {
+      cursor
+      hits {
+        __typename
+        id
+        bucket
+        score
+        size
+        modified
+        key
+        version
+        deleted
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/gql/NextPagePackages.generated.ts b/catalog/app/containers/Search/gql/NextPagePackages.generated.ts
new file mode 100644
index 00000000000..7c28aa7288d
--- /dev/null
+++ b/catalog/app/containers/Search/gql/NextPagePackages.generated.ts
@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_NextPagePackagesQueryVariables = Types.Exact<{
+  after: Types.Scalars['String']
+}>
+
+export type containers_Search_gql_NextPagePackagesQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly searchMorePackages:
+    | ({ readonly __typename: 'PackagesSearchResultSetPage' } & Pick<
+        Types.PackagesSearchResultSetPage,
+        'cursor'
+      > & {
+          readonly hits: ReadonlyArray<
+            { readonly __typename: 'SearchHitPackage' } & Pick<
+              Types.SearchHitPackage,
+              | 'id'
+              | 'bucket'
+              | 'score'
+              | 'size'
+              | 'modified'
+              | 'name'
+              | 'hash'
+              | 'comment'
+              | 'meta'
+              | 'workflow'
+            >
+          >
+        })
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_NextPagePackagesDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_NextPagePackages' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'after' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchMorePackages' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'after' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'after' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'PackagesSearchResultSetPage' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'cursor' } },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'hits' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' },
+                            },
+                            { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'bucket' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'score' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'size' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'modified' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'hash' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'comment' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'meta' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'workflow' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_NextPagePackagesQuery,
+  containers_Search_gql_NextPagePackagesQueryVariables
+>
+
+export { containers_Search_gql_NextPagePackagesDocument as default }
diff --git a/catalog/app/containers/Search/gql/NextPagePackages.graphql b/catalog/app/containers/Search/gql/NextPagePackages.graphql
new file mode 100644
index 00000000000..c154ece3c24
--- /dev/null
+++ b/catalog/app/containers/Search/gql/NextPagePackages.graphql
@@ -0,0 +1,29 @@
+query ($after: String!) {
+  searchMorePackages(after: $after) {
+    __typename
+    ... on PackagesSearchResultSetPage {
+      cursor
+      hits {
+        __typename
+        id
+        bucket
+        score
+        size
+        modified
+        name
+        hash
+        comment
+        meta
+        workflow
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/gql/PackageMetaFacets.generated.ts b/catalog/app/containers/Search/gql/PackageMetaFacets.generated.ts
new file mode 100644
index 00000000000..4ec52e939f6
--- /dev/null
+++ b/catalog/app/containers/Search/gql/PackageMetaFacets.generated.ts
@@ -0,0 +1,316 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as Types from '../../../model/graphql/types.generated'
+
+export type containers_Search_gql_PackageMetaFacetsQueryVariables = Types.Exact<{
+  buckets: Types.Maybe<ReadonlyArray<Types.Scalars['String']>>
+  searchString: Types.Maybe<Types.Scalars['String']>
+  filter: Types.Maybe<Types.PackagesSearchFilter>
+}>
+
+export type containers_Search_gql_PackageMetaFacetsQuery = {
+  readonly __typename: 'Query'
+} & {
+  readonly searchPackages:
+    | ({ readonly __typename: 'PackagesSearchResultSet' } & {
+        readonly stats: { readonly __typename: 'PackagesSearchStats' } & {
+          readonly userMeta: ReadonlyArray<
+            | ({ readonly __typename: 'NumberPackageUserMetaFacet' } & Pick<
+                Types.NumberPackageUserMetaFacet,
+                'path'
+              > & {
+                  readonly numberExtents: { readonly __typename: 'NumberExtents' } & Pick<
+                    Types.NumberExtents,
+                    'min' | 'max'
+                  >
+                })
+            | ({ readonly __typename: 'DatetimePackageUserMetaFacet' } & Pick<
+                Types.DatetimePackageUserMetaFacet,
+                'path'
+              > & {
+                  readonly datetimeExtents: {
+                    readonly __typename: 'DatetimeExtents'
+                  } & Pick<Types.DatetimeExtents, 'min' | 'max'>
+                })
+            | ({ readonly __typename: 'KeywordPackageUserMetaFacet' } & Pick<
+                Types.KeywordPackageUserMetaFacet,
+                'path'
+              > & {
+                  readonly extents: { readonly __typename: 'KeywordExtents' } & Pick<
+                    Types.KeywordExtents,
+                    'values'
+                  >
+                })
+            | ({ readonly __typename: 'TextPackageUserMetaFacet' } & Pick<
+                Types.TextPackageUserMetaFacet,
+                'path'
+              >)
+            | ({ readonly __typename: 'BooleanPackageUserMetaFacet' } & Pick<
+                Types.BooleanPackageUserMetaFacet,
+                'path'
+              >)
+          >
+        }
+      })
+    | { readonly __typename: 'EmptySearchResultSet' }
+    | ({ readonly __typename: 'InvalidInput' } & {
+        readonly errors: ReadonlyArray<
+          { readonly __typename: 'InputError' } & Pick<
+            Types.InputError,
+            'path' | 'message' | 'name' | 'context'
+          >
+        >
+      })
+}
+
+export const containers_Search_gql_PackageMetaFacetsDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'containers_Search_gql_PackageMetaFacets' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+          type: {
+            kind: 'ListType',
+            type: {
+              kind: 'NonNullType',
+              type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'searchString' } },
+          type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+          type: {
+            kind: 'NamedType',
+            name: { kind: 'Name', value: 'PackagesSearchFilter' },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'searchPackages' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'buckets' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'buckets' } },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'searchString' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'searchString' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'filter' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'PackagesSearchResultSet' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'stats' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'userMeta' },
+                              selectionSet: {
+                                kind: 'SelectionSet',
+                                selections: [
+                                  {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: '__typename' },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'IPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          name: { kind: 'Name', value: 'path' },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'NumberPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          alias: { kind: 'Name', value: 'numberExtents' },
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'min' },
+                                              },
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'max' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'DatetimePackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          alias: {
+                                            kind: 'Name',
+                                            value: 'datetimeExtents',
+                                          },
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'min' },
+                                              },
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'max' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  {
+                                    kind: 'InlineFragment',
+                                    typeCondition: {
+                                      kind: 'NamedType',
+                                      name: {
+                                        kind: 'Name',
+                                        value: 'KeywordPackageUserMetaFacet',
+                                      },
+                                    },
+                                    selectionSet: {
+                                      kind: 'SelectionSet',
+                                      selections: [
+                                        {
+                                          kind: 'Field',
+                                          name: { kind: 'Name', value: 'extents' },
+                                          selectionSet: {
+                                            kind: 'SelectionSet',
+                                            selections: [
+                                              {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'values' },
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: 'InlineFragment',
+                  typeCondition: {
+                    kind: 'NamedType',
+                    name: { kind: 'Name', value: 'InvalidInput' },
+                  },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'errors' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            { kind: 'Field', name: { kind: 'Name', value: 'path' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                            { kind: 'Field', name: { kind: 'Name', value: 'context' } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  containers_Search_gql_PackageMetaFacetsQuery,
+  containers_Search_gql_PackageMetaFacetsQueryVariables
+>
+
+export { containers_Search_gql_PackageMetaFacetsDocument as default }
diff --git a/catalog/app/containers/Search/gql/PackageMetaFacets.graphql b/catalog/app/containers/Search/gql/PackageMetaFacets.graphql
new file mode 100644
index 00000000000..febcdc4cf1d
--- /dev/null
+++ b/catalog/app/containers/Search/gql/PackageMetaFacets.graphql
@@ -0,0 +1,40 @@
+query ($buckets: [String!], $searchString: String, $filter: PackagesSearchFilter) {
+  searchPackages(buckets: $buckets, searchString: $searchString, filter: $filter) {
+    __typename
+    ... on PackagesSearchResultSet {
+      stats {
+        userMeta {
+          __typename
+          ... on IPackageUserMetaFacet {
+            path
+          }
+          ... on NumberPackageUserMetaFacet {
+            numberExtents: extents {
+              min
+              max
+            }
+          }
+          ... on DatetimePackageUserMetaFacet {
+            datetimeExtents: extents {
+              min
+              max
+            }
+          }
+          ... on KeywordPackageUserMetaFacet {
+            extents {
+              values
+            }
+          }
+        }
+      }
+    }
+    ... on InvalidInput {
+      errors {
+        path
+        message
+        name
+        context
+      }
+    }
+  }
+}
diff --git a/catalog/app/containers/Search/index.js b/catalog/app/containers/Search/index.ts
similarity index 100%
rename from catalog/app/containers/Search/index.js
rename to catalog/app/containers/Search/index.ts
diff --git a/catalog/app/containers/Search/model.ts b/catalog/app/containers/Search/model.ts
new file mode 100644
index 00000000000..d628cbca8fd
--- /dev/null
+++ b/catalog/app/containers/Search/model.ts
@@ -0,0 +1,1062 @@
+import invariant from 'invariant'
+import * as dateFns from 'date-fns'
+import * as R from 'ramda'
+import * as React from 'react'
+import * as RR from 'react-router-dom'
+
+import * as Model from 'model'
+import * as GQL from 'utils/GraphQL'
+import * as JSONPointer from 'utils/JSONPointer'
+import * as KTree from 'utils/KeyedTree'
+import * as NamedRoutes from 'utils/NamedRoutes'
+import assertNever from 'utils/assertNever'
+import useMemoEq from 'utils/useMemoEq'
+
+import BASE_SEARCH_QUERY from './gql/BaseSearch.generated'
+import FIRST_PAGE_OBJECTS_QUERY from './gql/FirstPageObjects.generated'
+import FIRST_PAGE_PACKAGES_QUERY from './gql/FirstPagePackages.generated'
+import NEXT_PAGE_OBJECTS_QUERY from './gql/NextPageObjects.generated'
+import NEXT_PAGE_PACKAGES_QUERY from './gql/NextPagePackages.generated'
+import META_FACETS_QUERY from './gql/PackageMetaFacets.generated'
+
+export enum ResultType {
+  QuiltPackage = 'p',
+  S3Object = 'o',
+}
+
+export const DEFAULT_RESULT_TYPE = ResultType.QuiltPackage
+
+export const DEFAULT_ORDER = Model.GQLTypes.SearchResultOrder.BEST_MATCH
+
+const parseDate = (x: unknown) => {
+  if (typeof x !== 'string') return null
+  try {
+    return dateFns.parseISO(x)
+  } catch (e) {
+    return null
+  }
+}
+
+export type ObjectsFilterState = FilterState<typeof ObjectsSearchFilterIO>
+export type PackagesFilterState = FilterState<typeof PackagesSearchFilterIO>
+
+export type FilterStateForResultType<T extends ResultType> = T extends ResultType.S3Object
+  ? ObjectsFilterState
+  : T extends ResultType.QuiltPackage
+  ? PackagesFilterState
+  : never
+
+export type ObjectsSearchFilter = Model.GQLTypes.ObjectsSearchFilter
+export type PackagesSearchFilter = Model.GQLTypes.PackagesSearchFilter
+
+interface SearchUrlStateBase {
+  searchString: string | null
+  buckets: string[]
+  order: Model.GQLTypes.SearchResultOrder
+}
+
+interface ObjectsSearchUrlState extends SearchUrlStateBase {
+  resultType: ResultType.S3Object
+  filter: FilterStateForResultType<ResultType.S3Object>
+}
+
+interface PackagesSearchUrlState extends SearchUrlStateBase {
+  resultType: ResultType.QuiltPackage
+  filter: FilterStateForResultType<ResultType.QuiltPackage>
+  userMetaFilters: UserMetaFilters
+}
+
+export type SearchUrlState = ObjectsSearchUrlState | PackagesSearchUrlState
+
+function parseOrder(input: string | null): Model.GQLTypes.SearchResultOrder {
+  return Object.values(Model.GQLTypes.SearchResultOrder).includes(input as any)
+    ? (input as Model.GQLTypes.SearchResultOrder)
+    : DEFAULT_ORDER
+}
+
+function serializeOrder(order: Model.GQLTypes.SearchResultOrder): string | null {
+  return order === DEFAULT_ORDER ? null : order
+}
+
+type Tagged<Tag extends string, T> = T & { _tag: Tag }
+
+export function addTag<Tag extends string, T>(tag: Tag, t: T): Tagged<Tag, T> {
+  return { _tag: tag, ...t }
+}
+
+export type Untag<T extends Tagged<any, any>> = T extends Tagged<any, infer U> ? U : never
+
+interface PredicateIO<Tag extends string, State, GQLType> {
+  readonly _tag: Tag
+  initialState: Tagged<Tag, State>
+  fromString: (input: string) => Tagged<Tag, State>
+  toString: (state: Tagged<Tag, State>) => string | null
+  toGQL: (state: Tagged<Tag, State>) => GQLType | null
+}
+
+export type PredicateState<PIO extends PredicateIO<any, any, any>> =
+  PIO extends PredicateIO<infer Tag, infer State, any> ? Tagged<Tag, State> : never
+
+type PredicateGQLType<PIO extends PredicateIO<any, any, any>> = PIO extends PredicateIO<
+  any,
+  any,
+  infer G
+>
+  ? G
+  : never
+
+function Predicate<Tag extends string, State, GQLType>(input: {
+  tag: Tag
+  init: State
+  fromString: (input: string) => State
+  toString: (state: Tagged<Tag, State>) => string | null
+  toGQL: (state: Tagged<Tag, State>) => GQLType | null
+}): PredicateIO<Tag, State, GQLType> {
+  return {
+    _tag: input.tag,
+    initialState: addTag(input.tag, input.init),
+    fromString: (s: string) => addTag(input.tag, input.fromString(s)),
+    toString: input.toString,
+    toGQL: input.toGQL,
+  }
+}
+
+export const Predicates = {
+  Datetime: Predicate({
+    tag: 'Datetime',
+    init: {
+      gte: null as Date | null,
+      lte: null as Date | null,
+    },
+    fromString: (input: string) => {
+      const json = JSON.parse(input)
+      return {
+        gte: parseDate(json.gte),
+        lte: parseDate(json.lte),
+      }
+    },
+    toString: ({ _tag, ...state }) => JSON.stringify(state),
+    toGQL: ({ _tag, ...state }) =>
+      state.gte == null && state.lte === null
+        ? null
+        : (state as Model.GQLTypes.DatetimeSearchPredicate),
+  }),
+
+  Number: Predicate({
+    tag: 'Number',
+    init: {
+      gte: null as number | null,
+      lte: null as number | null,
+    },
+    fromString: (input: string) => {
+      const json = JSON.parse(input)
+      return {
+        gte: (json.gte as number) ?? null,
+        lte: (json.lte as number) ?? null,
+      }
+    },
+    toString: ({ _tag, ...state }) => JSON.stringify(state),
+    toGQL: ({ _tag, ...state }) =>
+      state.gte == null && state.lte === null
+        ? null
+        : (state as Model.GQLTypes.NumberSearchPredicate),
+  }),
+
+  Text: Predicate({
+    tag: 'Text',
+    init: { queryString: '' },
+    fromString: (input: string) => ({ queryString: input }),
+    toString: ({ _tag, ...state }) => state.queryString.trim(),
+    toGQL: ({ _tag, ...state }) => {
+      const queryString = state.queryString.trim()
+      return queryString ? ({ queryString } as Model.GQLTypes.TextSearchPredicate) : null
+    },
+  }),
+
+  KeywordEnum: Predicate({
+    tag: 'KeywordEnum',
+    init: { terms: [] as string[] },
+    fromString: (input: string) => ({ terms: JSON.parse(`[${input}]`) as string[] }),
+    toString: ({ terms }) => JSON.stringify(terms).slice(1, -1),
+    toGQL: ({ terms }) =>
+      terms.length
+        ? ({ terms, wildcard: null } as Model.GQLTypes.KeywordSearchPredicate)
+        : null,
+  }),
+
+  KeywordWildcard: Predicate({
+    tag: 'KeywordWildcard',
+    init: {
+      wildcard: '' as string,
+    },
+    fromString: (wildcard: string) => ({ wildcard }),
+    toString: ({ wildcard }) => wildcard,
+    toGQL: ({ wildcard }) =>
+      wildcard
+        ? ({ wildcard, terms: null } as Model.GQLTypes.KeywordSearchPredicate)
+        : null,
+  }),
+
+  Boolean: Predicate({
+    tag: 'Boolean',
+    init: { true: false, false: false },
+    fromString: (input: string) => {
+      const values = input.split(',')
+      return { true: values.includes('true'), false: values.includes('false') }
+    },
+    toString: (state) => {
+      const values = []
+      if (state.true) values.push('true')
+      if (state.false) values.push('false')
+      return values.join(',')
+    },
+    toGQL: ({ _tag, ...state }) =>
+      state.true || state.false ? (state as Model.GQLTypes.BooleanSearchPredicate) : null,
+  }),
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Predicates = typeof Predicates
+
+export type Extents =
+  | Model.GQLTypes.DatetimeExtents
+  | Model.GQLTypes.NumberExtents
+  | Model.GQLTypes.KeywordExtents
+
+export type ExtentsForPredicate<P> = P extends Predicates['Datetime']
+  ? Model.GQLTypes.DatetimeExtents
+  : P extends Predicates['Number']
+  ? Model.GQLTypes.NumberExtents
+  : P extends Predicates['KeywordEnum']
+  ? Model.GQLTypes.KeywordExtents
+  : never
+
+export type KnownPredicate = Predicates[keyof Predicates]
+
+type PredicateMap = Record<string, PredicateIO<any, any, any>>
+
+type CombinedState<PM extends PredicateMap> = {
+  [K in keyof PM]: PredicateState<PM[K]> | null
+}
+
+type OrderedCombinedState<PM extends PredicateMap> = {
+  predicates: CombinedState<PM>
+  order: (keyof PM)[]
+}
+
+type CombinedGQLType<PM extends PredicateMap> = {
+  [K in keyof PM]: PredicateGQLType<PM[K]> | null
+}
+
+interface FilterIO<PM extends PredicateMap> {
+  fromURLSearchParams: (params: URLSearchParams) => OrderedCombinedState<PM>
+  toURLSearchParams: (state: OrderedCombinedState<PM>) => [string, string][]
+  toGQL: (state: OrderedCombinedState<PM>) => CombinedGQLType<PM> | null
+  children: PM
+  initialState: OrderedCombinedState<PM>
+  activateFilter: (
+    state: OrderedCombinedState<PM>,
+    key: keyof PM,
+  ) => OrderedCombinedState<PM>
+  deactivateFilter: (
+    state: OrderedCombinedState<PM>,
+    key: keyof PM,
+  ) => OrderedCombinedState<PM>
+  setFilter: <K extends keyof PM>(
+    state: OrderedCombinedState<PM>,
+    key: K,
+    predicateState: CombinedState<PM>[K],
+  ) => OrderedCombinedState<PM>
+}
+
+function Filter<PM extends PredicateMap>(children: PM): FilterIO<PM> {
+  function forEachChild(fn: (k: keyof PM, v: PM[typeof k]) => void) {
+    Object.entries(children).forEach(([k, v]) => fn(k, v as PM[typeof k]))
+  }
+
+  function initState(): OrderedCombinedState<PM> {
+    const predicates = {} as CombinedState<PM>
+    const order: (keyof PM)[] = []
+    forEachChild((k) => {
+      predicates[k] = null
+    })
+    return { predicates, order }
+  }
+
+  function fromURLSearchParams(params: URLSearchParams): OrderedCombinedState<PM> {
+    const state = initState()
+    params.forEach((v, k) => {
+      const predicate = children[k]
+      if (!predicate) return
+      state.order.push(k as keyof PM)
+      state.predicates[k as keyof PM] = predicate.fromString(v)
+    })
+    return state
+  }
+
+  function toURLSearchParams(state: OrderedCombinedState<PM>): [string, string][] {
+    const params: [string, string][] = []
+    state.order.forEach((k) => {
+      const predicate = children[k]
+      const v = state.predicates[k]
+      if (v == null) return
+      const s = predicate.toString(v)
+      if (s == null) return
+      params.push([k as string, s])
+    })
+    return params
+  }
+
+  function toGQL(state: OrderedCombinedState<PM>): CombinedGQLType<PM> | null {
+    const gqlInput = {} as CombinedGQLType<PM>
+    let isEmpty = true
+    forEachChild((k, predicate) => {
+      const v = state.predicates[k]
+      if (v == null) return
+      const g = predicate.toGQL(v)
+      if (g != null) isEmpty = false
+      gqlInput[k] = g
+    })
+    return isEmpty ? null : gqlInput
+  }
+
+  const initialState = initState()
+
+  function setFilter<K extends keyof PM>(
+    state: OrderedCombinedState<PM>,
+    key: K,
+    predicateState: CombinedState<PM>[K],
+  ): OrderedCombinedState<PM> {
+    invariant(state.order.includes(key), 'key must be in order')
+    return {
+      ...state,
+      predicates: {
+        ...state.predicates,
+        [key]: predicateState,
+      },
+    }
+  }
+
+  function activateFilter(
+    state: OrderedCombinedState<PM>,
+    key: keyof PM,
+  ): OrderedCombinedState<PM> {
+    if (state.predicates[key]) return state
+    return {
+      predicates: {
+        ...state.predicates,
+        [key]: children[key].initialState,
+      },
+      order: [...state.order, key],
+    }
+  }
+
+  function deactivateFilter(
+    state: OrderedCombinedState<PM>,
+    key: keyof PM,
+  ): OrderedCombinedState<PM> {
+    if (!state.predicates[key]) return state
+    const { ...predicates } = state.predicates
+    predicates[key] = null
+    const order = state.order.filter((k) => k !== key)
+    return { predicates, order }
+  }
+
+  return {
+    fromURLSearchParams,
+    toURLSearchParams,
+    toGQL,
+    children,
+    initialState,
+    activateFilter,
+    deactivateFilter,
+    setFilter,
+  }
+}
+
+type FilterState<FIO extends FilterIO<any>> = FIO extends FilterIO<infer PM>
+  ? OrderedCombinedState<PM>
+  : never
+
+export const ObjectsSearchFilterIO = Filter({
+  modified: Predicates.Datetime,
+  size: Predicates.Number,
+  ext: Predicates.KeywordEnum,
+  key: Predicates.KeywordWildcard,
+  content: Predicates.Text,
+  deleted: Predicates.Boolean,
+})
+
+export const PackagesSearchFilterIO = Filter({
+  modified: Predicates.Datetime,
+  size: Predicates.Number,
+  name: Predicates.KeywordWildcard,
+  hash: Predicates.KeywordWildcard,
+  entries: Predicates.Number,
+  comment: Predicates.Text,
+  workflow: Predicates.KeywordEnum,
+})
+
+type UserMetaFilterMap = Map<string, PredicateState<KnownPredicate>>
+
+class UserMetaFilters {
+  filters: UserMetaFilterMap
+
+  static typeMap: Record<string, KnownPredicate> = {
+    d: Predicates.Datetime,
+    n: Predicates.Number,
+    t: Predicates.Text,
+    e: Predicates.KeywordEnum,
+    w: Predicates.KeywordWildcard,
+    b: Predicates.Boolean,
+  }
+
+  static reverseTypeMap = {
+    [Predicates.Datetime._tag]: 'd',
+    [Predicates.Number._tag]: 'n',
+    [Predicates.Text._tag]: 't',
+    [Predicates.KeywordEnum._tag]: 'e',
+    [Predicates.KeywordWildcard._tag]: 'w',
+    [Predicates.Boolean._tag]: 'b',
+  }
+
+  static predicateMap = {
+    Datetime: 'datetime' as const,
+    Number: 'number' as const,
+    Text: 'text' as const,
+    KeywordEnum: 'keyword' as const,
+    KeywordWildcard: 'keyword' as const,
+    Boolean: 'boolean' as const,
+  }
+
+  static fromURLSearchParams(params: URLSearchParams, prefix: string): UserMetaFilters {
+    const filters: UserMetaFilterMap = new Map()
+    // key format: $prefix$type$path
+    params.forEach((v, k) => {
+      if (!k.startsWith(prefix)) return
+      const withoutPrefix = k.slice(prefix.length)
+      const idx = withoutPrefix.indexOf('/')
+      if (idx === -1) return
+      const type = withoutPrefix.slice(0, idx)
+      const predicate = UserMetaFilters.typeMap[type]
+      if (!predicate) return
+      const path = withoutPrefix.slice(idx)
+      filters.set(path, predicate.fromString(v))
+    })
+    return new this(filters)
+  }
+
+  constructor(filters?: UserMetaFilterMap) {
+    this.filters = filters || new Map()
+  }
+
+  copy(): UserMetaFilters {
+    return new UserMetaFilters(new Map(this.filters))
+  }
+
+  toURLSearchParams(prefix: string): [string, string][] {
+    return Array.from(this.filters).reduce(
+      (params, [k, v]) => {
+        if (v == null) return params
+        const s = Predicates[v._tag].toString(v as any)
+        if (s == null) return params
+        const t = UserMetaFilters.reverseTypeMap[v._tag]
+        return [...params, [`${prefix}${t}${k}` as string, s]]
+      },
+      [] as [string, string][],
+    )
+  }
+
+  toGQL(): Model.GQLTypes.PackageUserMetaPredicate[] | null {
+    const predicates = Array.from(this.filters).reduce((acc, [path, predicate]) => {
+      const gql = Predicates[predicate._tag].toGQL(predicate as any)
+      if (!gql) return acc
+      const obj = {
+        path,
+        datetime: null,
+        number: null,
+        text: null,
+        keyword: null,
+        boolean: null,
+        [UserMetaFilters.predicateMap[predicate._tag]]: gql,
+      }
+      return [...acc, obj]
+    }, [] as Model.GQLTypes.PackageUserMetaPredicate[])
+    return predicates.length ? predicates : null
+  }
+
+  activateFilter(path: string, type: KnownPredicate['_tag']): UserMetaFilters {
+    if (this.filters.has(path)) return this
+    const copy = this.copy()
+    copy.filters.set(path, Predicates[type].initialState)
+    return copy
+  }
+
+  deactivateFilter(path: string): UserMetaFilters {
+    if (!this.filters.has(path)) return this
+    const copy = this.copy()
+    copy.filters.delete(path)
+    return copy
+  }
+
+  setFilter(path: string, state: PredicateState<KnownPredicate>): UserMetaFilters {
+    if (!this.filters.has(path)) return this
+    const copy = this.copy()
+    copy.filters.set(path, state)
+    return copy
+  }
+}
+
+function parseResultType(t: string | null, legacy: string | null): ResultType {
+  switch (legacy) {
+    case 'packages':
+      return ResultType.QuiltPackage
+    case 'objects':
+      return ResultType.S3Object
+  }
+  switch (t) {
+    case ResultType.QuiltPackage:
+      return ResultType.QuiltPackage
+    case ResultType.S3Object:
+      return ResultType.S3Object
+  }
+  return DEFAULT_RESULT_TYPE
+}
+
+const META_PREFIX = 'meta.'
+
+// XXX: use io-ts or @effect/schema for morphisms between url (querystring) and search state
+export function parseSearchParams(qs: string): SearchUrlState {
+  const params = new URLSearchParams(qs)
+  const searchString = params.get('q')
+
+  const resultType = parseResultType(params.get('t'), params.get('mode'))
+
+  const bucketsInput = params.get('buckets') || params.get('b')
+  const buckets = bucketsInput ? bucketsInput.split(',').sort() : []
+
+  const order = parseOrder(params.get('o'))
+
+  const base = { searchString, buckets, order }
+  switch (resultType) {
+    case ResultType.S3Object:
+      return {
+        ...base,
+        resultType,
+        filter: ObjectsSearchFilterIO.fromURLSearchParams(params),
+      }
+    case ResultType.QuiltPackage:
+      return {
+        ...base,
+        resultType,
+        filter: PackagesSearchFilterIO.fromURLSearchParams(params),
+        userMetaFilters: UserMetaFilters.fromURLSearchParams(params, META_PREFIX),
+      }
+    default:
+      assertNever(resultType)
+  }
+}
+
+// XXX: return string?
+function serializeSearchUrlState(state: SearchUrlState): URLSearchParams {
+  const params = new URLSearchParams()
+
+  if (state.searchString) params.set('q', state.searchString)
+
+  if (state.resultType !== DEFAULT_RESULT_TYPE) params.set('t', state.resultType)
+
+  if (state.buckets.length) params.set('b', state.buckets.join(','))
+
+  const order = serializeOrder(state.order)
+  if (order) params.set('o', order)
+
+  function appendParams(pairs: [string, string][]) {
+    pairs.forEach(([k, v]) => params.append(k, v))
+  }
+
+  switch (state.resultType) {
+    case ResultType.S3Object:
+      appendParams(ObjectsSearchFilterIO.toURLSearchParams(state.filter))
+      break
+    case ResultType.QuiltPackage:
+      appendParams(PackagesSearchFilterIO.toURLSearchParams(state.filter))
+      appendParams(state.userMetaFilters.toURLSearchParams(META_PREFIX))
+      break
+    default:
+      assertNever(state)
+  }
+
+  return params
+}
+
+function useUrlState(): SearchUrlState {
+  const l = RR.useLocation()
+  return React.useMemo(() => parseSearchParams(l.search), [l.search])
+}
+
+export function useMakeUrl() {
+  const { urls } = NamedRoutes.use()
+  const base = urls.search({})
+  return React.useCallback(
+    (state: SearchUrlState) => {
+      const parts = [base]
+      const qs = serializeSearchUrlState(state).toString()
+      if (qs) parts.push(qs)
+      return parts.join('?')
+    },
+    [base],
+  )
+}
+
+function useBaseSearchQuery({ searchString, buckets }: SearchUrlState) {
+  return GQL.useQuery(BASE_SEARCH_QUERY, { searchString, buckets })
+}
+
+function useFirstPageObjectsQuery({
+  searchString,
+  buckets,
+  order,
+  resultType,
+  filter,
+}: SearchUrlState) {
+  const gqlFilter = ObjectsSearchFilterIO.toGQL(
+    resultType === ResultType.S3Object ? filter : ObjectsSearchFilterIO.initialState,
+  )
+  const pause = resultType !== ResultType.S3Object
+  return GQL.useQuery(
+    FIRST_PAGE_OBJECTS_QUERY,
+    { searchString, buckets, order, filter: gqlFilter },
+    { pause },
+  )
+}
+
+function useFirstPagePackagesQuery(state: SearchUrlState) {
+  return GQL.useQuery(
+    FIRST_PAGE_PACKAGES_QUERY,
+    {
+      searchString: state.searchString,
+      buckets: state.buckets,
+      order: state.order,
+      filter: PackagesSearchFilterIO.toGQL(
+        state.resultType === ResultType.QuiltPackage
+          ? state.filter
+          : PackagesSearchFilterIO.initialState,
+      ),
+      userMetaFilters:
+        state.resultType === ResultType.QuiltPackage
+          ? state.userMetaFilters.toGQL()
+          : null,
+    },
+    {
+      pause: state.resultType !== ResultType.QuiltPackage,
+    },
+  )
+}
+
+function useFirstPageQuery(state: SearchUrlState) {
+  const firstPageObjectsQuery = useFirstPageObjectsQuery(state)
+  const firstPagePackagesQuery = useFirstPagePackagesQuery(state)
+
+  switch (state.resultType) {
+    case ResultType.S3Object:
+      return GQL.fold(firstPageObjectsQuery, {
+        data: ({ searchObjects: data }, { fetching }) =>
+          fetching ? addTag('fetching', {}) : addTag('data', { data }),
+        fetching: () => addTag('fetching', {}),
+        error: (error) => addTag('error', { error }),
+      })
+    case ResultType.QuiltPackage:
+      return GQL.fold(firstPagePackagesQuery, {
+        data: ({ searchPackages: data }, { fetching }) =>
+          fetching ? addTag('fetching', {}) : addTag('data', { data }),
+        fetching: () => addTag('fetching', {}),
+        error: (error) => addTag('error', { error }),
+      })
+    default:
+      assertNever(state)
+  }
+}
+
+export function useNextPageObjectsQuery(after: string) {
+  const result = GQL.useQuery(NEXT_PAGE_OBJECTS_QUERY, { after })
+  const folded = GQL.fold(result, {
+    data: ({ searchMoreObjects: data }) => addTag('data', { data }),
+    fetching: () => addTag('fetching', {}),
+    error: (error) => addTag('error', { error }),
+  })
+  return folded
+}
+
+export function useNextPagePackagesQuery(after: string) {
+  const result = GQL.useQuery(NEXT_PAGE_PACKAGES_QUERY, { after })
+  const folded = GQL.fold(result, {
+    data: ({ searchMorePackages: data }) => addTag('data', { data }),
+    fetching: () => addTag('fetching', {}),
+    error: (error) => addTag('error', { error }),
+  })
+  return folded
+}
+
+interface MetaFacetsQueryProps {
+  searchString: SearchUrlState['searchString']
+  buckets: SearchUrlState['buckets']
+  filter: PackagesFilterState
+}
+
+function useMetaFacetsQuery({ searchString, buckets, filter }: MetaFacetsQueryProps) {
+  const gqlFilter = PackagesSearchFilterIO.toGQL(filter)
+  return GQL.useQuery(META_FACETS_QUERY, { searchString, buckets, filter: gqlFilter })
+}
+
+const NO_FACETS: PackageUserMetaFacet[] = []
+
+export function usePackagesMetaFilters() {
+  const model = useSearchUIModel()
+  invariant(model.state.resultType === ResultType.QuiltPackage, 'Filter type mismatch')
+
+  const query = useMetaFacetsQuery(model.state)
+
+  const all = GQL.fold(query, {
+    data: ({ searchPackages: r }) => {
+      switch (r.__typename) {
+        case 'EmptySearchResultSet':
+          return NO_FACETS
+        case 'InvalidInput':
+          return NO_FACETS
+        case 'PackagesSearchResultSet':
+          return r.stats.userMeta
+        default:
+          assertNever(r)
+      }
+    },
+    fetching: () => NO_FACETS,
+    error: () => NO_FACETS,
+  })
+  const activated = model.state.userMetaFilters.filters
+  const activatedPaths = React.useMemo(() => Array.from(activated.keys()), [activated])
+
+  const available = React.useMemo(
+    () => all.filter((f) => !activatedPaths.includes(f.path)),
+    [all, activatedPaths],
+  )
+
+  return { all, activated, activatedPaths, available, fetching: query.fetching }
+}
+
+export type SearhHitObject = Extract<
+  GQL.DataForDoc<typeof FIRST_PAGE_OBJECTS_QUERY>['searchObjects'],
+  { __typename: 'ObjectsSearchResultSet' }
+>['firstPage']['hits'][number]
+
+export type SearhHitPackage = Extract<
+  GQL.DataForDoc<typeof FIRST_PAGE_PACKAGES_QUERY>['searchPackages'],
+  { __typename: 'PackagesSearchResultSet' }
+>['firstPage']['hits'][number]
+
+export type SearchHit = SearhHitObject | SearhHitPackage
+
+export type PackageUserMetaFacet = Extract<
+  GQL.DataForDoc<typeof BASE_SEARCH_QUERY>['searchPackages'],
+  { __typename: 'PackagesSearchResultSet' }
+>['stats']['userMeta'][number]
+
+const PackageUserMetaFacetTypeDisplay = {
+  NumberPackageUserMetaFacet: 'Number' as const,
+  DatetimePackageUserMetaFacet: 'Date' as const,
+  KeywordPackageUserMetaFacet: 'Keyword' as const,
+  TextPackageUserMetaFacet: 'Text' as const,
+  BooleanPackageUserMetaFacet: 'Boolean' as const,
+}
+
+type FacetTree = KTree.Tree<PackageUserMetaFacet, string>
+type FacetNode = KTree.Node<PackageUserMetaFacet, string>
+
+function normalizeFacetNode(node: FacetNode): FacetTree {
+  return node._tag === 'Tree'
+    ? node
+    : KTree.fromLeaf(
+        [`type:${PackageUserMetaFacetTypeDisplay[node.value.__typename]}`],
+        node,
+      )
+}
+
+function resolveFacetConflict(existing: FacetNode, conflict: FacetNode): FacetNode {
+  return KTree.merge(
+    normalizeFacetNode(existing),
+    normalizeFacetNode(conflict),
+    resolveFacetConflict,
+  )
+}
+
+export function groupFacets(
+  facets: PackageUserMetaFacet[],
+  visible?: number,
+): [FacetTree, FacetTree] {
+  const grouped = facets.reduce(
+    (acc, f) =>
+      KTree.merge(
+        acc,
+        KTree.fromLeaf(
+          JSONPointer.parse(f.path).map((p) => `path:${p}`),
+          KTree.Leaf(f),
+        ),
+        resolveFacetConflict,
+      ),
+    KTree.Tree<PackageUserMetaFacet, string>([]),
+  )
+  if (!visible) return [grouped, KTree.Tree([])]
+  if (grouped.children.size <= visible) return [grouped, KTree.Tree([])]
+  const [head, tail] = R.splitAt(visible, Array.from(grouped.children))
+  return [KTree.Tree(head), KTree.Tree(tail)]
+}
+
+export const PackageUserMetaFacetMap = {
+  NumberPackageUserMetaFacet: 'Number' as const,
+  DatetimePackageUserMetaFacet: 'Datetime' as const,
+  KeywordPackageUserMetaFacet: 'KeywordEnum' as const,
+  TextPackageUserMetaFacet: 'Text' as const,
+  BooleanPackageUserMetaFacet: 'Boolean' as const,
+}
+
+export function usePackageUserMetaFacetExtents(path: string): Extents | undefined {
+  const { all, activated } = usePackagesMetaFilters()
+
+  // XXX: query extents
+  const facet = all.find(
+    (f) =>
+      f.path === path &&
+      activated.get(path)?._tag === PackageUserMetaFacetMap[f.__typename],
+  )
+  switch (facet?.__typename) {
+    case 'NumberPackageUserMetaFacet':
+      return facet.numberExtents
+    case 'DatetimePackageUserMetaFacet':
+      return facet.datetimeExtents
+    case 'KeywordPackageUserMetaFacet':
+      return facet.extents
+    default:
+      return
+  }
+}
+
+function useSearchUIModel() {
+  const urlState = useUrlState()
+  const baseSearchQuery = useBaseSearchQuery(urlState)
+  const firstPageQuery = useFirstPageQuery(urlState)
+
+  const makeUrl = useMakeUrl()
+
+  const history = RR.useHistory()
+
+  const updateUrlState = React.useCallback(
+    (updater: (s: SearchUrlState) => SearchUrlState) => {
+      const newState = updater(urlState)
+      if (R.equals(newState, urlState)) return
+      history.push(makeUrl(newState))
+    },
+    [urlState, makeUrl, history],
+  )
+
+  const setSearchString = React.useCallback(
+    (searchString: string | null) => {
+      // XXX: reset other params? e.g. filters
+      updateUrlState((s) => ({ ...s, searchString }))
+    },
+    [updateUrlState],
+  )
+
+  const setOrder = React.useCallback(
+    (order: Model.GQLTypes.SearchResultOrder) => {
+      updateUrlState((s) => ({ ...s, order }))
+    },
+    [updateUrlState],
+  )
+
+  const setResultType = React.useCallback(
+    (resultType: ResultType) => {
+      updateUrlState((s) => {
+        if (s.resultType === resultType) return s
+        switch (resultType) {
+          case ResultType.QuiltPackage:
+            return {
+              ...s,
+              resultType,
+              filter: PackagesSearchFilterIO.initialState,
+              userMetaFilters: new UserMetaFilters(),
+            }
+          case ResultType.S3Object:
+            return {
+              ...s,
+              resultType,
+              filter: ObjectsSearchFilterIO.initialState,
+            }
+          default:
+            return assertNever(resultType)
+        }
+      })
+    },
+    [updateUrlState],
+  )
+
+  const setBuckets = React.useCallback(
+    (buckets: string[]) => {
+      // XXX: reset filters or smth?
+      updateUrlState((s) => ({ ...s, buckets }))
+    },
+    [updateUrlState],
+  )
+
+  const activatePackagesFilter = React.useCallback(
+    (key: keyof PackagesSearchFilter) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return {
+          ...s,
+          filter: PackagesSearchFilterIO.activateFilter(s.filter, key),
+        }
+      }),
+    [updateUrlState],
+  )
+
+  const activatePackagesMetaFilter = React.useCallback(
+    (path: string, type: KnownPredicate['_tag']) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return { ...s, userMetaFilters: s.userMetaFilters.activateFilter(path, type) }
+      }),
+    [updateUrlState],
+  )
+
+  const deactivatePackagesMetaFilter = React.useCallback(
+    (path: string) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return { ...s, userMetaFilters: s.userMetaFilters.deactivateFilter(path) }
+      }),
+    [updateUrlState],
+  )
+
+  const activateObjectsFilter = React.useCallback(
+    (key: keyof ObjectsSearchFilter) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.S3Object, 'wrong result type')
+        return {
+          ...s,
+          filter: ObjectsSearchFilterIO.activateFilter(s.filter, key),
+        }
+      }),
+    [updateUrlState],
+  )
+
+  const deactivatePackagesFilter = React.useCallback(
+    (key: keyof PackagesSearchFilter) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return { ...s, filter: PackagesSearchFilterIO.deactivateFilter(s.filter, key) }
+      }),
+    [updateUrlState],
+  )
+
+  const deactivateObjectsFilter = React.useCallback(
+    (key: keyof ObjectsSearchFilter) =>
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.S3Object, 'wrong result type')
+        return { ...s, filter: ObjectsSearchFilterIO.deactivateFilter(s.filter, key) }
+      }),
+    [updateUrlState],
+  )
+
+  const setPackagesFilter = React.useCallback(
+    function setPackagesFilterInternal<K extends keyof PackagesSearchFilter>(
+      key: K,
+      state: FilterState<typeof PackagesSearchFilterIO>['predicates'][K],
+    ) {
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return { ...s, filter: PackagesSearchFilterIO.setFilter(s.filter, key, state) }
+      })
+    },
+    [updateUrlState],
+  )
+
+  const setObjectsFilter = React.useCallback(
+    function setObjectsFilterInternal<K extends keyof ObjectsSearchFilter>(
+      key: K,
+      state: FilterState<typeof ObjectsSearchFilterIO>['predicates'][K],
+    ) {
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.S3Object, 'wrong result type')
+        return { ...s, filter: ObjectsSearchFilterIO.setFilter(s.filter, key, state) }
+      })
+    },
+    [updateUrlState],
+  )
+
+  const setPackagesMetaFilter = React.useCallback(
+    (path: string, state: PredicateState<KnownPredicate>) => {
+      updateUrlState((s) => {
+        invariant(s.resultType === ResultType.QuiltPackage, 'wrong result type')
+        return { ...s, userMetaFilters: s.userMetaFilters.setFilter(path, state) }
+      })
+    },
+    [updateUrlState],
+  )
+
+  const clearFilter = React.useCallback(() => {
+    const defaultParams = parseSearchParams('')
+    updateUrlState(
+      (s) =>
+        ({
+          ...defaultParams,
+          buckets: s.buckets,
+          order: s.order,
+          resultType: s.resultType,
+        }) as SearchUrlState,
+    )
+  }, [updateUrlState])
+
+  return useMemoEq(
+    {
+      state: {
+        ...urlState,
+      },
+      actions: {
+        setSearchString,
+        setOrder,
+        setResultType,
+        setBuckets,
+
+        activateObjectsFilter,
+        deactivateObjectsFilter,
+        setObjectsFilter,
+        activatePackagesFilter,
+        deactivatePackagesFilter,
+        setPackagesFilter,
+        activatePackagesMetaFilter,
+        deactivatePackagesMetaFilter,
+        setPackagesMetaFilter,
+        clearFilter,
+      },
+      baseSearchQuery,
+      firstPageQuery,
+    },
+    R.identity,
+  )
+}
+
+export type SearchUIModel = ReturnType<typeof useSearchUIModel>
+
+export const Context = React.createContext<SearchUIModel | null>(null)
+
+export function SearchUIModelProvider({ children }: React.PropsWithChildren<{}>) {
+  const state = useSearchUIModel()
+  return React.createElement(Context.Provider, { value: state }, children)
+}
+
+export function useSearchUIModelContext(): SearchUIModel {
+  const model = React.useContext(Context)
+  invariant(model, 'SearchUIModel accessed outside of provider')
+  return model
+}
+
+export { SearchUIModelProvider as Provider, useSearchUIModelContext as use }
diff --git a/catalog/app/model/graphql/schema.generated.ts b/catalog/app/model/graphql/schema.generated.ts
index ba5e4ed2031..b4ba7fd62cc 100644
--- a/catalog/app/model/graphql/schema.generated.ts
+++ b/catalog/app/model/graphql/schema.generated.ts
@@ -82,6 +82,38 @@ export default {
         ],
         interfaces: [],
       },
+      {
+        kind: 'OBJECT',
+        name: 'BooleanPackageUserMetaFacet',
+        fields: [
+          {
+            name: 'path',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [
+          {
+            kind: 'INTERFACE',
+            name: 'IPackageUserMetaFacet',
+          },
+        ],
+      },
+      {
+        kind: 'SCALAR',
+        name: 'String',
+      },
+      {
+        kind: 'SCALAR',
+        name: 'Boolean',
+      },
       {
         kind: 'OBJECT',
         name: 'BrowsingSession',
@@ -167,14 +199,6 @@ export default {
           },
         ],
       },
-      {
-        kind: 'SCALAR',
-        name: 'String',
-      },
-      {
-        kind: 'SCALAR',
-        name: 'Boolean',
-      },
       {
         kind: 'UNION',
         name: 'BucketAddResult',
@@ -905,6 +929,130 @@ export default {
         kind: 'SCALAR',
         name: 'Datetime',
       },
+      {
+        kind: 'OBJECT',
+        name: 'DatetimeExtents',
+        fields: [
+          {
+            name: 'min',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Datetime',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'max',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Datetime',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'DatetimePackageUserMetaFacet',
+        fields: [
+          {
+            name: 'path',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'extents',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'DatetimeExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [
+          {
+            kind: 'INTERFACE',
+            name: 'IPackageUserMetaFacet',
+          },
+        ],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'EmptySearchResultSet',
+        fields: [
+          {
+            name: '_',
+            type: {
+              kind: 'SCALAR',
+              name: 'Boolean',
+              ofType: null,
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'INTERFACE',
+        name: 'IPackageUserMetaFacet',
+        fields: [
+          {
+            name: 'path',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+        possibleTypes: [
+          {
+            kind: 'OBJECT',
+            name: 'BooleanPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'DatetimePackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'KeywordPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'NumberPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'TextPackageUserMetaFacet',
+          },
+        ],
+      },
       {
         kind: 'OBJECT',
         name: 'IndexingInProgress',
@@ -1019,6 +1167,67 @@ export default {
         kind: 'SCALAR',
         name: 'JsonRecord',
       },
+      {
+        kind: 'OBJECT',
+        name: 'KeywordExtents',
+        fields: [
+          {
+            name: 'values',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'LIST',
+                ofType: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'SCALAR',
+                    name: 'String',
+                    ofType: null,
+                  },
+                },
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'KeywordPackageUserMetaFacet',
+        fields: [
+          {
+            name: 'path',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'extents',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'KeywordExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [
+          {
+            kind: 'INTERFACE',
+            name: 'IPackageUserMetaFacet',
+          },
+        ],
+      },
       {
         kind: 'OBJECT',
         name: 'ManagedRole',
@@ -1759,66 +1968,45 @@ export default {
       },
       {
         kind: 'OBJECT',
-        name: 'Ok',
-        fields: [
-          {
-            name: '_',
-            type: {
-              kind: 'SCALAR',
-              name: 'Boolean',
-              ofType: null,
-            },
-            args: [],
-          },
-        ],
-        interfaces: [],
-      },
-      {
-        kind: 'OBJECT',
-        name: 'OperationError',
+        name: 'NumberExtents',
         fields: [
           {
-            name: 'message',
+            name: 'min',
             type: {
               kind: 'NON_NULL',
               ofType: {
                 kind: 'SCALAR',
-                name: 'String',
+                name: 'Float',
                 ofType: null,
               },
             },
             args: [],
           },
           {
-            name: 'name',
+            name: 'max',
             type: {
               kind: 'NON_NULL',
               ofType: {
                 kind: 'SCALAR',
-                name: 'String',
+                name: 'Float',
                 ofType: null,
               },
             },
             args: [],
           },
-          {
-            name: 'context',
-            type: {
-              kind: 'SCALAR',
-              name: 'JsonRecord',
-              ofType: null,
-            },
-            args: [],
-          },
         ],
         interfaces: [],
       },
+      {
+        kind: 'SCALAR',
+        name: 'Float',
+      },
       {
         kind: 'OBJECT',
-        name: 'Package',
+        name: 'NumberPackageUserMetaFacet',
         fields: [
           {
-            name: 'bucket',
+            name: 'path',
             type: {
               kind: 'NON_NULL',
               ofType: {
@@ -1830,26 +2018,286 @@ export default {
             args: [],
           },
           {
-            name: 'name',
+            name: 'extents',
             type: {
               kind: 'NON_NULL',
               ofType: {
-                kind: 'SCALAR',
-                name: 'String',
+                kind: 'OBJECT',
+                name: 'NumberExtents',
                 ofType: null,
               },
             },
             args: [],
           },
+        ],
+        interfaces: [
           {
-            name: 'modified',
-            type: {
-              kind: 'NON_NULL',
-              ofType: {
-                kind: 'SCALAR',
-                name: 'Datetime',
-                ofType: null,
-              },
+            kind: 'INTERFACE',
+            name: 'IPackageUserMetaFacet',
+          },
+        ],
+      },
+      {
+        kind: 'UNION',
+        name: 'ObjectsSearchMoreResult',
+        possibleTypes: [
+          {
+            kind: 'OBJECT',
+            name: 'ObjectsSearchResultSetPage',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'InvalidInput',
+          },
+        ],
+      },
+      {
+        kind: 'UNION',
+        name: 'ObjectsSearchResult',
+        possibleTypes: [
+          {
+            kind: 'OBJECT',
+            name: 'ObjectsSearchResultSet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'EmptySearchResultSet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'InvalidInput',
+          },
+        ],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'ObjectsSearchResultSet',
+        fields: [
+          {
+            name: 'stats',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'ObjectsSearchStats',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'firstPage',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'ObjectsSearchResultSetPage',
+                ofType: null,
+              },
+            },
+            args: [
+              {
+                name: 'size',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Int',
+                  ofType: null,
+                },
+              },
+              {
+                name: 'order',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Any',
+                },
+              },
+            ],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'ObjectsSearchResultSetPage',
+        fields: [
+          {
+            name: 'cursor',
+            type: {
+              kind: 'SCALAR',
+              name: 'String',
+              ofType: null,
+            },
+            args: [],
+          },
+          {
+            name: 'hits',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'LIST',
+                ofType: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'OBJECT',
+                    name: 'SearchHitObject',
+                    ofType: null,
+                  },
+                },
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'ObjectsSearchStats',
+        fields: [
+          {
+            name: 'total',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Int',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'modified',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'DatetimeExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'size',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'NumberExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'ext',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'KeywordExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'Ok',
+        fields: [
+          {
+            name: '_',
+            type: {
+              kind: 'SCALAR',
+              name: 'Boolean',
+              ofType: null,
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'OperationError',
+        fields: [
+          {
+            name: 'message',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'name',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'context',
+            type: {
+              kind: 'SCALAR',
+              name: 'JsonRecord',
+              ofType: null,
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'Package',
+        fields: [
+          {
+            name: 'bucket',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'name',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'modified',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Datetime',
+                ofType: null,
+              },
             },
             args: [],
           },
@@ -1904,10 +2352,6 @@ export default {
         ],
         interfaces: [],
       },
-      {
-        kind: 'SCALAR',
-        name: 'Float',
-      },
       {
         kind: 'UNION',
         name: 'PackageConstructResult',
@@ -2433,11 +2877,37 @@ export default {
         interfaces: [],
       },
       {
-        kind: 'OBJECT',
-        name: 'PackageWorkflow',
-        fields: [
+        kind: 'UNION',
+        name: 'PackageUserMetaFacet',
+        possibleTypes: [
           {
-            name: 'config',
+            kind: 'OBJECT',
+            name: 'NumberPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'DatetimePackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'KeywordPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'TextPackageUserMetaFacet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'BooleanPackageUserMetaFacet',
+          },
+        ],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'PackageWorkflow',
+        fields: [
+          {
+            name: 'config',
             type: {
               kind: 'NON_NULL',
               ofType: {
@@ -2460,6 +2930,204 @@ export default {
         ],
         interfaces: [],
       },
+      {
+        kind: 'UNION',
+        name: 'PackagesSearchMoreResult',
+        possibleTypes: [
+          {
+            kind: 'OBJECT',
+            name: 'PackagesSearchResultSetPage',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'InvalidInput',
+          },
+        ],
+      },
+      {
+        kind: 'UNION',
+        name: 'PackagesSearchResult',
+        possibleTypes: [
+          {
+            kind: 'OBJECT',
+            name: 'PackagesSearchResultSet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'EmptySearchResultSet',
+          },
+          {
+            kind: 'OBJECT',
+            name: 'InvalidInput',
+          },
+        ],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'PackagesSearchResultSet',
+        fields: [
+          {
+            name: 'stats',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'PackagesSearchStats',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'firstPage',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'PackagesSearchResultSetPage',
+                ofType: null,
+              },
+            },
+            args: [
+              {
+                name: 'size',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Int',
+                  ofType: null,
+                },
+              },
+              {
+                name: 'order',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Any',
+                },
+              },
+            ],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'PackagesSearchResultSetPage',
+        fields: [
+          {
+            name: 'cursor',
+            type: {
+              kind: 'SCALAR',
+              name: 'String',
+              ofType: null,
+            },
+            args: [],
+          },
+          {
+            name: 'hits',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'LIST',
+                ofType: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'OBJECT',
+                    name: 'SearchHitPackage',
+                    ofType: null,
+                  },
+                },
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'PackagesSearchStats',
+        fields: [
+          {
+            name: 'total',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Int',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'modified',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'DatetimeExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'size',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'NumberExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'entries',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'NumberExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'workflow',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'OBJECT',
+                name: 'KeywordExtents',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'userMeta',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'LIST',
+                ofType: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'UNION',
+                    name: 'PackageUserMetaFacet',
+                    ofType: null,
+                  },
+                },
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
       {
         kind: 'OBJECT',
         name: 'Policy',
@@ -2730,22 +3398,186 @@ export default {
                 name: 'filter',
                 type: {
                   kind: 'SCALAR',
-                  name: 'String',
+                  name: 'String',
+                  ofType: null,
+                },
+              },
+            ],
+          },
+          {
+            name: 'package',
+            type: {
+              kind: 'OBJECT',
+              name: 'Package',
+              ofType: null,
+            },
+            args: [
+              {
+                name: 'bucket',
+                type: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'SCALAR',
+                    name: 'String',
+                    ofType: null,
+                  },
+                },
+              },
+              {
+                name: 'name',
+                type: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'SCALAR',
+                    name: 'String',
+                    ofType: null,
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: 'searchObjects',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'UNION',
+                name: 'ObjectsSearchResult',
+                ofType: null,
+              },
+            },
+            args: [
+              {
+                name: 'buckets',
+                type: {
+                  kind: 'LIST',
+                  ofType: {
+                    kind: 'NON_NULL',
+                    ofType: {
+                      kind: 'SCALAR',
+                      name: 'String',
+                      ofType: null,
+                    },
+                  },
+                },
+              },
+              {
+                name: 'searchString',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'String',
+                  ofType: null,
+                },
+              },
+              {
+                name: 'filter',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Any',
+                },
+              },
+            ],
+          },
+          {
+            name: 'searchPackages',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'UNION',
+                name: 'PackagesSearchResult',
+                ofType: null,
+              },
+            },
+            args: [
+              {
+                name: 'buckets',
+                type: {
+                  kind: 'LIST',
+                  ofType: {
+                    kind: 'NON_NULL',
+                    ofType: {
+                      kind: 'SCALAR',
+                      name: 'String',
+                      ofType: null,
+                    },
+                  },
+                },
+              },
+              {
+                name: 'searchString',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'String',
+                  ofType: null,
+                },
+              },
+              {
+                name: 'filter',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Any',
+                },
+              },
+              {
+                name: 'userMetaFilters',
+                type: {
+                  kind: 'LIST',
+                  ofType: {
+                    kind: 'NON_NULL',
+                    ofType: {
+                      kind: 'SCALAR',
+                      name: 'Any',
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: 'searchMoreObjects',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'UNION',
+                name: 'ObjectsSearchMoreResult',
+                ofType: null,
+              },
+            },
+            args: [
+              {
+                name: 'after',
+                type: {
+                  kind: 'NON_NULL',
+                  ofType: {
+                    kind: 'SCALAR',
+                    name: 'String',
+                    ofType: null,
+                  },
+                },
+              },
+              {
+                name: 'size',
+                type: {
+                  kind: 'SCALAR',
+                  name: 'Int',
                   ofType: null,
                 },
               },
             ],
           },
           {
-            name: 'package',
+            name: 'searchMorePackages',
             type: {
-              kind: 'OBJECT',
-              name: 'Package',
-              ofType: null,
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'UNION',
+                name: 'PackagesSearchMoreResult',
+                ofType: null,
+              },
             },
             args: [
               {
-                name: 'bucket',
+                name: 'after',
                 type: {
                   kind: 'NON_NULL',
                   ofType: {
@@ -2756,14 +3588,11 @@ export default {
                 },
               },
               {
-                name: 'name',
+                name: 'size',
                 type: {
-                  kind: 'NON_NULL',
-                  ofType: {
-                    kind: 'SCALAR',
-                    name: 'String',
-                    ofType: null,
-                  },
+                  kind: 'SCALAR',
+                  name: 'Int',
+                  ofType: null,
                 },
               },
             ],
@@ -3232,6 +4061,227 @@ export default {
         kind: 'SCALAR',
         name: 'S3ObjectLocation',
       },
+      {
+        kind: 'OBJECT',
+        name: 'SearchHitObject',
+        fields: [
+          {
+            name: 'id',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'ID',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'bucket',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'score',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Float',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'size',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Float',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'modified',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Datetime',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'key',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'version',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'deleted',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Boolean',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
+      {
+        kind: 'OBJECT',
+        name: 'SearchHitPackage',
+        fields: [
+          {
+            name: 'id',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'ID',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'bucket',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'score',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Float',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'size',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Float',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'modified',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'Datetime',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'name',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'hash',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+          {
+            name: 'comment',
+            type: {
+              kind: 'SCALAR',
+              name: 'String',
+              ofType: null,
+            },
+            args: [],
+          },
+          {
+            name: 'meta',
+            type: {
+              kind: 'SCALAR',
+              name: 'JsonRecord',
+              ofType: null,
+            },
+            args: [],
+          },
+          {
+            name: 'workflow',
+            type: {
+              kind: 'SCALAR',
+              name: 'JsonRecord',
+              ofType: null,
+            },
+            args: [],
+          },
+        ],
+        interfaces: [],
+      },
       {
         kind: 'OBJECT',
         name: 'SnsInvalid',
@@ -3557,6 +4607,30 @@ export default {
         ],
         interfaces: [],
       },
+      {
+        kind: 'OBJECT',
+        name: 'TextPackageUserMetaFacet',
+        fields: [
+          {
+            name: 'path',
+            type: {
+              kind: 'NON_NULL',
+              ofType: {
+                kind: 'SCALAR',
+                name: 'String',
+                ofType: null,
+              },
+            },
+            args: [],
+          },
+        ],
+        interfaces: [
+          {
+            kind: 'INTERFACE',
+            name: 'IPackageUserMetaFacet',
+          },
+        ],
+      },
       {
         kind: 'OBJECT',
         name: 'Unavailable',
diff --git a/catalog/app/model/graphql/types.generated.ts b/catalog/app/model/graphql/types.generated.ts
index 5738c6d82e2..34f3c872666 100644
--- a/catalog/app/model/graphql/types.generated.ts
+++ b/catalog/app/model/graphql/types.generated.ts
@@ -36,6 +36,16 @@ export interface AccessCounts {
   readonly counts: ReadonlyArray<AccessCountForDate>
 }
 
+export interface BooleanPackageUserMetaFacet extends IPackageUserMetaFacet {
+  readonly __typename: 'BooleanPackageUserMetaFacet'
+  readonly path: Scalars['String']
+}
+
+export interface BooleanSearchPredicate {
+  readonly true: Maybe<Scalars['Boolean']>
+  readonly false: Maybe<Scalars['Boolean']>
+}
+
 export interface BrowsingSession {
   readonly __typename: 'BrowsingSession'
   readonly id: Scalars['ID']
@@ -213,6 +223,32 @@ export interface ContentIndexingSettings {
   readonly bytesMax: Scalars['Int']
 }
 
+export interface DatetimeExtents {
+  readonly __typename: 'DatetimeExtents'
+  readonly min: Scalars['Datetime']
+  readonly max: Scalars['Datetime']
+}
+
+export interface DatetimePackageUserMetaFacet extends IPackageUserMetaFacet {
+  readonly __typename: 'DatetimePackageUserMetaFacet'
+  readonly path: Scalars['String']
+  readonly extents: DatetimeExtents
+}
+
+export interface DatetimeSearchPredicate {
+  readonly gte: Maybe<Scalars['Datetime']>
+  readonly lte: Maybe<Scalars['Datetime']>
+}
+
+export interface EmptySearchResultSet {
+  readonly __typename: 'EmptySearchResultSet'
+  readonly _: Maybe<Scalars['Boolean']>
+}
+
+export interface IPackageUserMetaFacet {
+  readonly path: Scalars['String']
+}
+
 export interface IndexingInProgress {
   readonly __typename: 'IndexingInProgress'
   readonly _: Maybe<Scalars['Boolean']>
@@ -236,6 +272,22 @@ export interface InvalidInput {
   readonly errors: ReadonlyArray<InputError>
 }
 
+export interface KeywordExtents {
+  readonly __typename: 'KeywordExtents'
+  readonly values: ReadonlyArray<Scalars['String']>
+}
+
+export interface KeywordPackageUserMetaFacet extends IPackageUserMetaFacet {
+  readonly __typename: 'KeywordPackageUserMetaFacet'
+  readonly path: Scalars['String']
+  readonly extents: KeywordExtents
+}
+
+export interface KeywordSearchPredicate {
+  readonly terms: Maybe<ReadonlyArray<Scalars['String']>>
+  readonly wildcard: Maybe<Scalars['String']>
+}
+
 export interface ManagedPolicyInput {
   readonly title: Scalars['String']
   readonly permissions: ReadonlyArray<PermissionInput>
@@ -387,6 +439,64 @@ export interface NotificationTopicNotFound {
   readonly _: Maybe<Scalars['Boolean']>
 }
 
+export interface NumberExtents {
+  readonly __typename: 'NumberExtents'
+  readonly min: Scalars['Float']
+  readonly max: Scalars['Float']
+}
+
+export interface NumberPackageUserMetaFacet extends IPackageUserMetaFacet {
+  readonly __typename: 'NumberPackageUserMetaFacet'
+  readonly path: Scalars['String']
+  readonly extents: NumberExtents
+}
+
+export interface NumberSearchPredicate {
+  readonly gte: Maybe<Scalars['Float']>
+  readonly lte: Maybe<Scalars['Float']>
+}
+
+export interface ObjectsSearchFilter {
+  readonly modified: Maybe<DatetimeSearchPredicate>
+  readonly size: Maybe<NumberSearchPredicate>
+  readonly ext: Maybe<KeywordSearchPredicate>
+  readonly key: Maybe<KeywordSearchPredicate>
+  readonly content: Maybe<TextSearchPredicate>
+  readonly deleted: Maybe<BooleanSearchPredicate>
+}
+
+export type ObjectsSearchMoreResult = ObjectsSearchResultSetPage | InvalidInput
+
+export type ObjectsSearchResult =
+  | ObjectsSearchResultSet
+  | EmptySearchResultSet
+  | InvalidInput
+
+export interface ObjectsSearchResultSet {
+  readonly __typename: 'ObjectsSearchResultSet'
+  readonly stats: ObjectsSearchStats
+  readonly firstPage: ObjectsSearchResultSetPage
+}
+
+export interface ObjectsSearchResultSetfirstPageArgs {
+  size?: Maybe<Scalars['Int']>
+  order: Maybe<SearchResultOrder>
+}
+
+export interface ObjectsSearchResultSetPage {
+  readonly __typename: 'ObjectsSearchResultSetPage'
+  readonly cursor: Maybe<Scalars['String']>
+  readonly hits: ReadonlyArray<SearchHitObject>
+}
+
+export interface ObjectsSearchStats {
+  readonly __typename: 'ObjectsSearchStats'
+  readonly total: Scalars['Int']
+  readonly modified: DatetimeExtents
+  readonly size: NumberExtents
+  readonly ext: KeywordExtents
+}
+
 export interface Ok {
   readonly __typename: 'Ok'
   readonly _: Maybe<Scalars['Boolean']>
@@ -551,12 +661,72 @@ export interface PackageRevisionListpageArgs {
   perPage?: Maybe<Scalars['Int']>
 }
 
+export type PackageUserMetaFacet =
+  | NumberPackageUserMetaFacet
+  | DatetimePackageUserMetaFacet
+  | KeywordPackageUserMetaFacet
+  | TextPackageUserMetaFacet
+  | BooleanPackageUserMetaFacet
+
+export interface PackageUserMetaPredicate {
+  readonly path: Scalars['String']
+  readonly datetime: Maybe<DatetimeSearchPredicate>
+  readonly number: Maybe<NumberSearchPredicate>
+  readonly text: Maybe<TextSearchPredicate>
+  readonly keyword: Maybe<KeywordSearchPredicate>
+  readonly boolean: Maybe<BooleanSearchPredicate>
+}
+
 export interface PackageWorkflow {
   readonly __typename: 'PackageWorkflow'
   readonly config: Scalars['String']
   readonly id: Maybe<Scalars['String']>
 }
 
+export interface PackagesSearchFilter {
+  readonly modified: Maybe<DatetimeSearchPredicate>
+  readonly size: Maybe<NumberSearchPredicate>
+  readonly name: Maybe<KeywordSearchPredicate>
+  readonly hash: Maybe<KeywordSearchPredicate>
+  readonly entries: Maybe<NumberSearchPredicate>
+  readonly comment: Maybe<TextSearchPredicate>
+  readonly workflow: Maybe<KeywordSearchPredicate>
+}
+
+export type PackagesSearchMoreResult = PackagesSearchResultSetPage | InvalidInput
+
+export type PackagesSearchResult =
+  | PackagesSearchResultSet
+  | EmptySearchResultSet
+  | InvalidInput
+
+export interface PackagesSearchResultSet {
+  readonly __typename: 'PackagesSearchResultSet'
+  readonly stats: PackagesSearchStats
+  readonly firstPage: PackagesSearchResultSetPage
+}
+
+export interface PackagesSearchResultSetfirstPageArgs {
+  size?: Maybe<Scalars['Int']>
+  order: Maybe<SearchResultOrder>
+}
+
+export interface PackagesSearchResultSetPage {
+  readonly __typename: 'PackagesSearchResultSetPage'
+  readonly cursor: Maybe<Scalars['String']>
+  readonly hits: ReadonlyArray<SearchHitPackage>
+}
+
+export interface PackagesSearchStats {
+  readonly __typename: 'PackagesSearchStats'
+  readonly total: Scalars['Int']
+  readonly modified: DatetimeExtents
+  readonly size: NumberExtents
+  readonly entries: NumberExtents
+  readonly workflow: KeywordExtents
+  readonly userMeta: ReadonlyArray<PackageUserMetaFacet>
+}
+
 export interface PermissionInput {
   readonly bucket: Scalars['String']
   readonly level: BucketPermissionLevel
@@ -591,6 +761,10 @@ export interface Query {
   readonly potentialCollaborators: ReadonlyArray<Collaborator>
   readonly packages: Maybe<PackageList>
   readonly package: Maybe<Package>
+  readonly searchObjects: ObjectsSearchResult
+  readonly searchPackages: PackagesSearchResult
+  readonly searchMoreObjects: ObjectsSearchMoreResult
+  readonly searchMorePackages: PackagesSearchMoreResult
   readonly policies: ReadonlyArray<Policy>
   readonly policy: Maybe<Policy>
   readonly roles: ReadonlyArray<Role>
@@ -613,6 +787,29 @@ export interface QuerypackageArgs {
   name: Scalars['String']
 }
 
+export interface QuerysearchObjectsArgs {
+  buckets: Maybe<ReadonlyArray<Scalars['String']>>
+  searchString: Maybe<Scalars['String']>
+  filter: Maybe<ObjectsSearchFilter>
+}
+
+export interface QuerysearchPackagesArgs {
+  buckets: Maybe<ReadonlyArray<Scalars['String']>>
+  searchString: Maybe<Scalars['String']>
+  filter: Maybe<PackagesSearchFilter>
+  userMetaFilters: Maybe<ReadonlyArray<PackageUserMetaPredicate>>
+}
+
+export interface QuerysearchMoreObjectsArgs {
+  after: Scalars['String']
+  size?: Maybe<Scalars['Int']>
+}
+
+export interface QuerysearchMorePackagesArgs {
+  after: Scalars['String']
+  size?: Maybe<Scalars['Int']>
+}
+
 export interface QuerypolicyArgs {
   id: Scalars['ID']
 }
@@ -714,11 +911,48 @@ export interface RoleUpdateSuccess {
   readonly role: Role
 }
 
+export interface SearchHitObject {
+  readonly __typename: 'SearchHitObject'
+  readonly id: Scalars['ID']
+  readonly bucket: Scalars['String']
+  readonly score: Scalars['Float']
+  readonly size: Scalars['Float']
+  readonly modified: Scalars['Datetime']
+  readonly key: Scalars['String']
+  readonly version: Scalars['String']
+  readonly deleted: Scalars['Boolean']
+}
+
+export interface SearchHitPackage {
+  readonly __typename: 'SearchHitPackage'
+  readonly id: Scalars['ID']
+  readonly bucket: Scalars['String']
+  readonly score: Scalars['Float']
+  readonly size: Scalars['Float']
+  readonly modified: Scalars['Datetime']
+  readonly name: Scalars['String']
+  readonly hash: Scalars['String']
+  readonly comment: Maybe<Scalars['String']>
+  readonly meta: Maybe<Scalars['JsonRecord']>
+  readonly workflow: Maybe<Scalars['JsonRecord']>
+}
+
+export enum SearchResultOrder {
+  BEST_MATCH = 'BEST_MATCH',
+  NEWEST = 'NEWEST',
+  OLDEST = 'OLDEST',
+}
+
 export interface SnsInvalid {
   readonly __typename: 'SnsInvalid'
   readonly _: Maybe<Scalars['Boolean']>
 }
 
+export enum SortDirection {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
+
 export interface Status {
   readonly __typename: 'Status'
   readonly canaries: ReadonlyArray<Canary>
@@ -780,6 +1014,15 @@ export interface TestStatsTimeSeries {
   readonly failed: ReadonlyArray<Scalars['Int']>
 }
 
+export interface TextPackageUserMetaFacet extends IPackageUserMetaFacet {
+  readonly __typename: 'TextPackageUserMetaFacet'
+  readonly path: Scalars['String']
+}
+
+export interface TextSearchPredicate {
+  readonly queryString: Scalars['String']
+}
+
 export interface Unavailable {
   readonly __typename: 'Unavailable'
   readonly _: Maybe<Scalars['Boolean']>
diff --git a/catalog/app/utils/GraphQL/Provider.tsx b/catalog/app/utils/GraphQL/Provider.tsx
index 5adb8746754..f5662c8291e 100644
--- a/catalog/app/utils/GraphQL/Provider.tsx
+++ b/catalog/app/utils/GraphQL/Provider.tsx
@@ -112,6 +112,23 @@ export default function GraphQLProvider({ children }: React.PropsWithChildren<{}
           StatusReportList: () => null,
           TestStats: () => null,
           TestStatsTimeSeries: () => null,
+          DatetimeExtents: () => null,
+          KeywordExtents: () => null,
+          NumberExtents: () => null,
+          BooleanPackageUserMetaFacet: () => null,
+          DatetimePackageUserMetaFacet: () => null,
+          KeywordPackageUserMetaFacet: () => null,
+          NumberPackageUserMetaFacet: () => null,
+          TextPackageUserMetaFacet: () => null,
+          ObjectsSearchResultSetPage: () => null,
+          PackagesSearchResultSetPage: () => null,
+          ObjectsSearchStats: () => null,
+          PackagesSearchStats: () => null,
+          EmptySearchResultSet: () => null,
+          ObjectsSearchResultSet: () => null,
+          PackagesSearchResultSet: () => null,
+          InvalidInput: () => null,
+          InputError: () => null,
         },
         updates: {
           Mutation: {
diff --git a/catalog/app/utils/JSONPointer.ts b/catalog/app/utils/JSONPointer.ts
index 1e36ae557a2..bf77691be1b 100644
--- a/catalog/app/utils/JSONPointer.ts
+++ b/catalog/app/utils/JSONPointer.ts
@@ -2,10 +2,18 @@ export type Path = (number | string)[]
 
 export type Pointer = string
 
-export function stringify(addressPath: Path): Pointer {
-  return `/${addressPath.join('/')}`
+function encodeFragment(fragment: number | string) {
+  return fragment.toString().replaceAll('~', '~0').replaceAll('/', '~1')
+}
+
+function decodeFragment(fragment: string) {
+  return fragment.replaceAll('~1', '/').replaceAll('~0', '~')
+}
+
+export function stringify(addressPath: Readonly<Path>): Pointer {
+  return `/${addressPath.map(encodeFragment).join('/')}`
 }
 
 export function parse(address: Pointer): Path {
-  return address.slice(1).split('/')
+  return address.slice(1).split('/').map(decodeFragment)
 }
diff --git a/catalog/app/utils/KeyedTree.ts b/catalog/app/utils/KeyedTree.ts
new file mode 100644
index 00000000000..a1a8e77a025
--- /dev/null
+++ b/catalog/app/utils/KeyedTree.ts
@@ -0,0 +1,62 @@
+import invariant from 'invariant'
+
+export interface Leaf<T> {
+  readonly _tag: 'Leaf'
+  value: T
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function Leaf<T>(value: T): Leaf<T> {
+  return { _tag: 'Leaf', value }
+}
+
+export interface Tree<T, K> {
+  readonly _tag: 'Tree'
+  children: Map<K, Node<T, K>>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function Tree<T, K>(children: Iterable<[K, Node<T, K>]>): Tree<T, K> {
+  return { _tag: 'Tree', children: new Map(children) }
+}
+
+export type Node<T, K> = Tree<T, K> | Leaf<T>
+
+export function at<T, K>(tree: Tree<T, K>, path: K[]): Node<T, K> | undefined {
+  invariant(path.length > 0, 'Path must not be empty')
+  const [head, ...tail] = path
+  const child = tree.children.get(head)
+  if (!child) return undefined
+  if (tail.length === 0) return child
+  if (child._tag === 'Leaf') return undefined
+  return at(child, tail)
+}
+
+export function Pair<A, B>(a: A, b: B): [A, B] {
+  return [a, b]
+}
+
+export function fromLeaf<T, K>(path: K[], leaf: Leaf<T>): Tree<T, K> {
+  invariant(path.length > 0, 'Path must not be empty')
+  const [head, ...tail] = path
+  const child = tail.length === 0 ? leaf : fromLeaf(tail, leaf)
+  return Tree([Pair(head, child)])
+}
+
+export type ConflictResolver<T, K> = (
+  existing: Node<T, K>,
+  conflict: Node<T, K>,
+) => Node<T, K>
+
+export function merge<T, K>(
+  a: Tree<T, K>,
+  b: Tree<T, K>,
+  resolve: ConflictResolver<T, K>,
+): Tree<T, K> {
+  const children = new Map(a.children)
+  b.children.forEach((node, path) => {
+    const existing = children.get(path)
+    children.set(path, existing ? resolve(existing, node) : node)
+  })
+  return Tree(children)
+}
diff --git a/catalog/app/utils/search.js b/catalog/app/utils/search.js
index d5fa32da92e..55cd1612d8b 100644
--- a/catalog/app/utils/search.js
+++ b/catalog/app/utils/search.js
@@ -1,3 +1,4 @@
+// XXX: remove once embed is converted to use GQL search
 import * as FP from 'fp-ts'
 import * as R from 'ramda'
 import * as React from 'react'
diff --git a/catalog/app/utils/string.js b/catalog/app/utils/string.js
index 646bd87ad72..ef264e90b9c 100644
--- a/catalog/app/utils/string.js
+++ b/catalog/app/utils/string.js
@@ -6,9 +6,9 @@ export function printObject(obj) {
   return JSON.stringify(obj, null, '  ')
 }
 
-const suffixes = ['', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
+const defaultSuffixes = ['', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
 
-const splitNumber = (n) => {
+const splitNumber = (n, suffixes) => {
   const exp = n === 0 ? 0 : Math.log10(n)
   const index = Math.min(Math.floor(exp / 3), suffixes.length - 1)
   const coeff = (n / 10 ** (index * 3)).toFixed(1)
@@ -24,12 +24,13 @@ export function formatQuantity(
     renderValue = R.identity,
     renderSuffix = R.identity,
     Component = React.Fragment,
+    suffixes = defaultSuffixes,
   } = {},
 ) {
   if (!Number.isInteger(q)) {
     return typeof fallback === 'function' ? fallback(q) : fallback
   }
-  const [coeff, suffix] = splitNumber(q)
+  const [coeff, suffix] = splitNumber(q, suffixes)
   return (
     <Component>
       {renderValue(numberFormat.format(coeff).toString())}
diff --git a/catalog/app/utils/useId.tsx b/catalog/app/utils/useId.tsx
new file mode 100644
index 00000000000..b52f3fd86f2
--- /dev/null
+++ b/catalog/app/utils/useId.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+type MakeId = () => string
+
+function randomId() {
+  return Math.random().toString(36).substring(2)
+}
+
+export default function useId(makeId: MakeId = randomId): string {
+  const [id] = React.useState(makeId)
+  return id
+}
diff --git a/catalog/app/website/pages/OpenLanding/OpenLanding.js b/catalog/app/website/pages/OpenLanding/OpenLanding.js
index 3c4501fa537..86ce02b7f17 100644
--- a/catalog/app/website/pages/OpenLanding/OpenLanding.js
+++ b/catalog/app/website/pages/OpenLanding/OpenLanding.js
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { useLocation } from 'react-router-dom'
 
+// TODO: decouple NavBar layout/state from gql and auth calls
+//       and place it into components/SearchBar
+import * as NavBar from 'containers/NavBar'
+
 import * as LinkedData from 'utils/LinkedData'
 import MetaTitle from 'utils/MetaTitle'
 import parseSearch from 'utils/parseSearch'
@@ -23,7 +27,9 @@ export default function OpenLanding() {
       <React.Suspense fallback={null}>
         <LinkedData.CatalogData />
       </React.Suspense>
-      <Search />
+      <NavBar.Provider>
+        <Search />
+      </NavBar.Provider>
       <Showcase />
       <Buckets query={query} />
       <Videos />
diff --git a/catalog/app/website/pages/OpenLanding/Search/Search.js b/catalog/app/website/pages/OpenLanding/Search/Search.js
index 0e26b92d7b6..ae0bf1f34f9 100644
--- a/catalog/app/website/pages/OpenLanding/Search/Search.js
+++ b/catalog/app/website/pages/OpenLanding/Search/Search.js
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { useHistory } from 'react-router-dom'
 import * as M from '@material-ui/core'
-import * as Lab from '@material-ui/lab'
 
-import SearchHelp from 'components/SearchHelp'
-import * as style from 'constants/style'
+// TODO: decouple NavBar layout/state from gql and auth calls
+//       and place it into components/SearchBar
+import { useNavBar } from 'containers/NavBar/Provider'
+import Suggestions from 'containers/NavBar/Suggestions'
+
 import * as BucketConfig from 'utils/BucketConfig'
-import * as NamedRoutes from 'utils/NamedRoutes'
 import img2x from 'utils/img2x'
 
 import Dots from 'website/components/Backgrounds/Dots'
@@ -14,6 +14,17 @@ import Dots from 'website/components/Backgrounds/Dots'
 import bg from './search-bg.png'
 import bg2x from './search-bg@2x.png'
 
+const useHelpStyles = M.makeStyles((t) => ({
+  paper: {
+    borderRadius: t.spacing(0.5),
+    marginTop: t.spacing(8),
+    maxWidth: 690,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 1,
+  },
+}))
+
 const useStyles = M.makeStyles((t) => ({
   root: {
     position: 'relative',
@@ -31,23 +42,6 @@ const useStyles = M.makeStyles((t) => ({
       top: 0,
     },
   },
-  help: {
-    maxHeight: '490px',
-    overflowY: 'auto',
-    padding: t.spacing(0, 2),
-    [t.breakpoints.down('xs')]: {
-      maxHeight: '400px',
-      padding: t.spacing(0, 2),
-    },
-  },
-  helpWrapper: {
-    borderRadius: t.spacing(0.5),
-    marginTop: t.spacing(8),
-    maxWidth: 690,
-    position: 'absolute',
-    width: '100%',
-    zIndex: 1,
-  },
   inner: {
     alignItems: 'center',
     display: 'flex',
@@ -72,7 +66,7 @@ const useStyles = M.makeStyles((t) => ({
   },
   inputInput: {
     height: 'auto',
-    padding: t.spacing(0, 4, 0, 15),
+    padding: t.spacing(0, 4, 0, 9.5),
   },
   inputOptions: {
     borderColor: t.palette.grey[300],
@@ -130,85 +124,44 @@ const useStyles = M.makeStyles((t) => ({
       fontSize: t.typography.pxToRem(16),
     },
   },
+  icon: {
+    marginLeft: t.spacing(3.5),
+    opacity: 0.5,
+  },
 }))
 
 export default function Search() {
   const classes = useStyles()
-
-  const history = useHistory()
-  const { urls } = NamedRoutes.use()
+  const helpClasses = useHelpStyles()
 
   // XXX: consider using graphql directly
   const bucketCount = BucketConfig.useRelevantBucketConfigs().length
 
-  const [value, change] = React.useState('')
-  const [helpOpened, setHelpOpened] = React.useState(false)
-
-  const onChange = React.useCallback((evt) => {
-    change(evt.target.value)
-  }, [])
-
-  const onQuery = React.useCallback((strPart) => change(`${value} ${strPart}`), [value])
-
-  const onToggleOptions = React.useCallback(
-    () => setHelpOpened(!helpOpened),
-    [helpOpened],
-  )
-
-  const onKeyDown = React.useCallback(
-    (evt) => {
-      // eslint-disable-next-line default-case
-      switch (evt.key) {
-        case 'Enter':
-          history.push(urls.search({ q: value }))
-          break
-        case 'Escape':
-          evt.target.blur()
-          break
-      }
-    },
-    [history, urls, value],
-  )
+  const { input, onClickAway } = useNavBar()
+  const ref = React.useRef(null)
+  const focus = React.useCallback(() => ref.current?.focus(), [])
 
   return (
     <div className={classes.root}>
       <Dots />
       <M.Container maxWidth="lg" className={classes.container}>
         <div className={classes.inner}>
-          <M.ClickAwayListener onClickAway={() => setHelpOpened(false)}>
+          <M.ClickAwayListener onClickAway={onClickAway}>
             <div className={classes.inputWrapper}>
               <M.InputBase
-                {...{ value, onChange, onKeyDown }}
+                {...input}
                 startAdornment={
                   <M.InputAdornment className={classes.adornment}>
-                    <M.MuiThemeProvider theme={style.appTheme}>
-                      <Lab.ToggleButton
-                        className={classes.inputOptions}
-                        size="large"
-                        value="help"
-                        selected={helpOpened}
-                        onChange={onToggleOptions}
-                        classes={{
-                          selected: classes.inputOptionsSelected,
-                        }}
-                      >
-                        <M.Icon fontSize="large">search</M.Icon>
-                        <M.Icon fontSize="large">
-                          {helpOpened ? 'arrow_drop_up' : 'arrow_drop_down'}
-                        </M.Icon>
-                      </Lab.ToggleButton>
-                    </M.MuiThemeProvider>
+                    <M.Icon className={classes.icon} onClick={focus}>
+                      search
+                    </M.Icon>
                   </M.InputAdornment>
                 }
                 classes={{ root: classes.inputRoot, input: classes.inputInput }}
                 placeholder="Search"
+                ref={ref}
               />
-
-              <SearchHelp
-                classes={{ contents: classes.help, paper: classes.helpWrapper }}
-                onQuery={onQuery}
-                open={helpOpened}
-              />
+              <Suggestions classes={helpClasses} open={input.helpOpen} />
             </div>
           </M.ClickAwayListener>
 
diff --git a/catalog/package-lock.json b/catalog/package-lock.json
index 8f4a0f18e42..624e76471f3 100644
--- a/catalog/package-lock.json
+++ b/catalog/package-lock.json
@@ -37,6 +37,7 @@
         "final-form": "^4.20.9",
         "fontfaceobserver": "^2.3.0",
         "fp-ts": "^2.16.1",
+        "fuse.js": "^6.6.2",
         "graphql": "^15.8.0",
         "highlight.js": "^11.8.0",
         "history": "^4.10.1",
@@ -9541,6 +9542,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -27032,6 +27041,11 @@
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true
     },
+    "fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/catalog/package.json b/catalog/package.json
index 516f6e39032..2a2b4541e4f 100644
--- a/catalog/package.json
+++ b/catalog/package.json
@@ -74,6 +74,7 @@
     "final-form": "^4.20.9",
     "fontfaceobserver": "^2.3.0",
     "fp-ts": "^2.16.1",
+    "fuse.js": "^6.6.2",
     "graphql": "^15.8.0",
     "highlight.js": "^11.8.0",
     "history": "^4.10.1",
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 930bcd09e0d..19a91a84ad1 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -38,6 +38,7 @@ Entries inside each section should be ordered by type:
 * [Changed] Allow users select files and directories and keep selection whenever they navigate to multiple directories or use filter ([#3527](https://github.com/quiltdata/quilt/pull/3527))
 * [Changed] Unify per-bucket and global search ([#3613](https://github.com/quiltdata/quilt/pull/3613))
 * [Changed] Allow use of <br /> in Markdown ([#3720](https://github.com/quiltdata/quilt/pull/3720))
+* [Changed] Faceted search ([#3712](https://github.com/quiltdata/quilt/pull/3712))
 
 # 5.3.1 - 2023-05-02
 ## Python API
diff --git a/shared/graphql/schema.graphql b/shared/graphql/schema.graphql
index dc8eb6eb808..32cef13e395 100644
--- a/shared/graphql/schema.graphql
+++ b/shared/graphql/schema.graphql
@@ -11,6 +11,11 @@ scalar PackageContentsFlatMap
 # bucket + key + version (aka physical key)
 scalar S3ObjectLocation
 
+enum SortDirection {
+  ASC
+  DESC
+}
+
 type OperationError {
   message: String!
   name: String!
@@ -269,6 +274,196 @@ type BrowsingSession {
   expires: Datetime!
 }
 
+enum SearchResultOrder {
+  BEST_MATCH
+  NEWEST
+  OLDEST
+}
+
+type DatetimeExtents {
+  min: Datetime!
+  max: Datetime!
+}
+
+type NumberExtents {
+  min: Float!
+  max: Float!
+}
+
+type KeywordExtents {
+  values: [String!]!
+}
+
+interface IPackageUserMetaFacet {
+  path: String!
+}
+
+type NumberPackageUserMetaFacet implements IPackageUserMetaFacet {
+  path: String!
+  extents: NumberExtents!
+}
+
+type DatetimePackageUserMetaFacet implements IPackageUserMetaFacet {
+  path: String!
+  extents: DatetimeExtents!
+}
+
+type KeywordPackageUserMetaFacet implements IPackageUserMetaFacet {
+  path: String!
+  extents: KeywordExtents!
+}
+
+type TextPackageUserMetaFacet implements IPackageUserMetaFacet {
+  path: String!
+}
+
+type BooleanPackageUserMetaFacet implements IPackageUserMetaFacet {
+  path: String!
+}
+
+union PackageUserMetaFacet =
+  | NumberPackageUserMetaFacet
+  | DatetimePackageUserMetaFacet
+  | KeywordPackageUserMetaFacet
+  | TextPackageUserMetaFacet
+  | BooleanPackageUserMetaFacet
+
+type PackagesSearchResultSetPage {
+  cursor: String
+  hits: [SearchHitPackage!]!
+}
+
+type ObjectsSearchResultSetPage {
+  cursor: String
+  hits: [SearchHitObject!]!
+}
+
+input DatetimeSearchPredicate {
+  gte: Datetime
+  lte: Datetime
+}
+
+input NumberSearchPredicate {
+  gte: Float
+  lte: Float
+}
+
+input TextSearchPredicate {
+  queryString: String!
+}
+
+input KeywordSearchPredicate {
+  terms: [String!]
+  wildcard: String
+}
+
+input BooleanSearchPredicate {
+  true: Boolean
+  false: Boolean
+}
+
+input PackageUserMetaPredicate {
+  path: String!
+  # one of the following
+  datetime: DatetimeSearchPredicate
+  number: NumberSearchPredicate
+  text: TextSearchPredicate
+  keyword: KeywordSearchPredicate
+  boolean: BooleanSearchPredicate
+}
+
+input ObjectsSearchFilter {
+  modified: DatetimeSearchPredicate
+  size: NumberSearchPredicate
+  ext: KeywordSearchPredicate
+  key: KeywordSearchPredicate
+  content: TextSearchPredicate
+  deleted: BooleanSearchPredicate
+}
+
+input PackagesSearchFilter {
+  modified: DatetimeSearchPredicate
+  size: NumberSearchPredicate
+  name: KeywordSearchPredicate
+  hash: KeywordSearchPredicate
+  entries: NumberSearchPredicate
+  comment: TextSearchPredicate
+  workflow: KeywordSearchPredicate
+}
+
+type ObjectsSearchStats {
+  total: Int!
+  modified: DatetimeExtents!
+  size: NumberExtents!
+  ext: KeywordExtents!
+}
+
+type PackagesSearchStats {
+  total: Int!
+  modified: DatetimeExtents!
+  size: NumberExtents!
+  entries: NumberExtents!
+  workflow: KeywordExtents!
+  userMeta: [PackageUserMetaFacet!]!
+}
+
+type ObjectsSearchResultSet {
+  stats: ObjectsSearchStats!
+  firstPage(size: Int = 30, order: SearchResultOrder): ObjectsSearchResultSetPage!
+}
+
+type PackagesSearchResultSet {
+  stats: PackagesSearchStats!
+  firstPage(size: Int = 30, order: SearchResultOrder): PackagesSearchResultSetPage!
+  # XXX: do we need this at all? do we need to accept type here?
+  # userMetaFacet(path: String!): PackageUserMetaFacet
+}
+
+type EmptySearchResultSet {
+  _: Boolean
+}
+
+union PackagesSearchResult = PackagesSearchResultSet | EmptySearchResultSet | InvalidInput
+
+union ObjectsSearchResult = ObjectsSearchResultSet | EmptySearchResultSet | InvalidInput
+
+union PackagesSearchMoreResult = PackagesSearchResultSetPage | InvalidInput
+
+union ObjectsSearchMoreResult = ObjectsSearchResultSetPage | InvalidInput
+
+type SearchHitObject {
+  id: ID!
+  bucket: String!
+  score: Float!
+  size: Float!
+  modified: Datetime!
+
+  key: String!
+  version: String!
+
+  deleted: Boolean!
+  # meta: JsonRecord! # String?
+  # tags
+}
+
+# TODO: reuse package types?
+type SearchHitPackage {
+  id: ID!
+  bucket: String!
+  score: Float!
+  size: Float!
+  modified: Datetime!
+
+  name: String!
+  hash: String!
+
+  # specific props
+  comment: String
+  meta: JsonRecord # user_meta
+  workflow: JsonRecord
+  # tags: [String!]! // TODO: currently not provided
+}
+
 type Query {
   config: Config!
   bucketConfigs: [BucketConfig!]!
@@ -276,6 +471,19 @@ type Query {
   potentialCollaborators: [Collaborator!]!
   packages(bucket: String!, filter: String): PackageList
   package(bucket: String!, name: String!): Package
+  searchObjects(
+    buckets: [String!]
+    searchString: String
+    filter: ObjectsSearchFilter
+  ): ObjectsSearchResult!
+  searchPackages(
+    buckets: [String!]
+    searchString: String
+    filter: PackagesSearchFilter
+    userMetaFilters: [PackageUserMetaPredicate!]
+  ): PackagesSearchResult!
+  searchMoreObjects(after: String!, size: Int = 30): ObjectsSearchMoreResult!
+  searchMorePackages(after: String!, size: Int = 30): PackagesSearchMoreResult!
   policies: [Policy!]! @admin
   policy(id: ID!): Policy @admin
   roles: [Role!]! @admin
@@ -551,10 +759,7 @@ union PackageConstructResult =
   | InvalidInput
   | OperationError
 
-union PackagePromoteResult =
-    PackagePushSuccess
-  | InvalidInput
-  | OperationError
+union PackagePromoteResult = PackagePushSuccess | InvalidInput | OperationError
 
 union PackageFromFolderResult =
     PackagePushSuccess
@@ -604,7 +809,8 @@ type Mutation {
   policyCreateManaged(input: ManagedPolicyInput!): PolicyResult! @admin
   policyCreateUnmanaged(input: UnmanagedPolicyInput!): PolicyResult! @admin
   policyUpdateManaged(id: ID!, input: ManagedPolicyInput!): PolicyResult! @admin
-  policyUpdateUnmanaged(id: ID!, input: UnmanagedPolicyInput!): PolicyResult! @admin
+  policyUpdateUnmanaged(id: ID!, input: UnmanagedPolicyInput!): PolicyResult!
+    @admin
   policyDelete(id: ID!): PolicyDeleteResult! @admin
 
   roleCreateManaged(input: ManagedRoleInput!): RoleCreateResult! @admin
@@ -615,7 +821,13 @@ type Mutation {
   roleDelete(id: ID!): RoleDeleteResult! @admin
   roleSetDefault(id: ID!): RoleSetDefaultResult! @admin
 
-  browsingSessionCreate(scope: String!, ttl: Int! = 180): BrowsingSessionCreateResult!
-  browsingSessionRefresh(id: ID!, ttl: Int! = 180): BrowsingSessionRefreshResult!
+  browsingSessionCreate(
+    scope: String!
+    ttl: Int! = 180
+  ): BrowsingSessionCreateResult!
+  browsingSessionRefresh(
+    id: ID!
+    ttl: Int! = 180
+  ): BrowsingSessionRefreshResult!
   browsingSessionDispose(id: ID!): BrowsingSessionDisposeResult!
 }