diff --git a/common/messages/fr.json b/common/messages/fr.json
index 0fd8379f..173a08af 100644
--- a/common/messages/fr.json
+++ b/common/messages/fr.json
@@ -340,7 +340,8 @@
   "filter.label.pref_age_min": "Âge min",
   "filter.label.pref_gender": "Genre recherché",
   "filter.label.pref_relation_styles": "Recherche",
-  "filter.label.wants_kids_strength": "Enfants",
+  "filter.label.wants_kids_strength": "Désir d'enfants",
+  "filter.label.has_kids": "Enfants",
   "filter.location": "Habite",
   "filter.location.any": "n'importe où",
   "filter.location.search_city": "Rechercher une ville...",
@@ -360,9 +361,9 @@
   "filter.last_active.3months": "3 derniers mois",
   "filter.reset": "Réinitialiser",
   "filter.short_bio_toggle": "Inclure les profils incomplets",
-  "filter.wants_kids.any_preference": "Toutes préférences",
+  "filter.wants_kids.any_preference": "N'importe",
   "filter.wants_kids.doesnt_want_kids": "Ne veut pas d'enfants",
-  "filter.wants_kids.either": "Tout désir d'enfants",
+  "filter.wants_kids.either": "N'importe",
   "filter.wants_kids.wants_kids": "Veut des enfants",
   "font.atkinson": "Atkinson Hyperlegible",
   "font.classic-serif": "Serif classique",
@@ -679,12 +680,12 @@
   "profile.gender.plural.male": "Hommes",
   "profile.gender.plural.other": "Autres",
   "profile.has_kids": "A des enfants",
-  "profile.has_kids.-1": "Tout enfant",
+  "profile.has_kids.-1": "N'importe",
   "profile.has_kids.0": "N'a pas d'enfants",
   "profile.has_kids.1": "A des enfants",
   "profile.has_kids.doesnt_have_kids": "N'a pas d'enfants",
   "profile.has_kids.has_kids": "A des enfants",
-  "profile.has_kids.no_preference": "Tout enfant",
+  "profile.has_kids.no_preference": "N'importe",
   "profile.has_kids_many": "A {count} enfants",
   "profile.has_kids_one": "A {count} enfant",
   "profile.header.age": "{age} ans",
diff --git a/common/src/has-kids.ts b/common/src/has-kids.ts
index 52214ddb..4b022faf 100644
--- a/common/src/has-kids.ts
+++ b/common/src/has-kids.ts
@@ -10,7 +10,7 @@ export interface HasKidsLabelsMap {
 
 export const hasKidsLabels: HasKidsLabelsMap = {
   no_preference: {
-    name: 'Any kids',
+    name: 'Either way',
     shortName: 'Either',
     value: -1,
   },
diff --git a/common/src/util/array.ts b/common/src/util/array.ts
index dd58b41e..e9407308 100644
--- a/common/src/util/array.ts
+++ b/common/src/util/array.ts
@@ -31,3 +31,8 @@ export function groupConsecutive<T, U>(xs: T[], key: (x: T) => U) {
   result.push(curr)
   return result
 }
+
+export function nullifyEmpty<T>(array: T[]) {
+  if (!Array.isArray(array)) return null
+  return array.length > 0 ? array : null
+}
diff --git a/common/src/wants-kids.ts b/common/src/wants-kids.ts
index 03478262..287e0b0c 100644
--- a/common/src/wants-kids.ts
+++ b/common/src/wants-kids.ts
@@ -10,7 +10,7 @@ export type KidsLabelsMap = Record<string, KidLabel>
 
 export const wantsKidsLabels: KidsLabelsMap = {
   no_preference: {
-    name: 'Any preference',
+    name: 'Either',
     shortName: 'Either',
     strength: -1,
   },
diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index 015f48fb..0e5627c3 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -11,7 +11,7 @@ import {buildArray} from 'common/util/array'
 import {keyBy, partition, sortBy} from 'lodash'
 import {useEffect, useState} from 'react'
 import toast from 'react-hot-toast'
-import DropdownMenu from 'web/components/comments/dropdown-menu'
+import DropdownMenu, {DropdownButton} from 'web/components/comments/dropdown-menu'
 import {Col} from 'web/components/layout/col'
 import {Modal, MODAL_CLASS, SCROLLABLE_MODAL_CLASS} from 'web/components/layout/modal'
 import {Row} from 'web/components/layout/row'
@@ -32,7 +32,6 @@ import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
 import {db} from 'web/lib/supabase/db'
 
-import {DropdownButton} from '../filters/desktop-filters'
 import {Subtitle} from '../widgets/profile-subtitle'
 import {AddCompatibilityQuestionButton} from './add-compatibility-question-button'
 import {
diff --git a/web/components/comments/dropdown-menu.tsx b/web/components/comments/dropdown-menu.tsx
index a0dee85e..53193d9b 100644
--- a/web/components/comments/dropdown-menu.tsx
+++ b/web/components/comments/dropdown-menu.tsx
@@ -1,10 +1,11 @@
 import {Popover, Transition} from '@headlessui/react'
-import {DotsHorizontalIcon} from '@heroicons/react/solid'
+import {ChevronDownIcon, ChevronUpIcon, DotsHorizontalIcon} from '@heroicons/react/solid'
 import clsx from 'clsx'
 import {toKey} from 'common/parsing'
 import {Fragment, ReactNode, useState} from 'react'
 import {usePopper} from 'react-popper'
 import {Col} from 'web/components/layout/col'
+import {Row} from 'web/components/layout/row'
 import {useT} from 'web/lib/locale'
 
 export type DropdownItem = {
@@ -165,3 +166,15 @@ export function DropdownOptions(props: {
     </Col>
   )
 }
+
+export function DropdownButton(props: {open: boolean; content: ReactNode}) {
+  const {open, content} = props
+  return (
+    <Row className="hover:text-ink-700 items-center gap-0.5 transition-all">
+      {content}
+      <span className="text-ink-400">
+        {open ? <ChevronUpIcon className="h-4 w-4" /> : <ChevronDownIcon className="h-4 w-4" />}
+      </span>
+    </Row>
+  )
+}
diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index d2150b19..8e3dfb30 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -1,705 +1,691 @@
-import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/react/outline'
-import {FilterFields} from 'common/filters'
-import {Gender} from 'common/gender'
-import {hasKidsLabels} from 'common/has-kids'
-import {OptionTableKey} from 'common/profiles/constants'
-import {Profile} from 'common/profiles/profile'
-import {ReactNode} from 'react'
-import {BsPersonHeart, BsPersonVcard} from 'react-icons/bs'
-import {FaBriefcase, FaHandsHelping, FaHeart, FaStar} from 'react-icons/fa'
-import {FaUserGroup} from 'react-icons/fa6'
-import {GiFruitBowl} from 'react-icons/gi'
-import {LuCigarette, LuGraduationCap} from 'react-icons/lu'
-import {MdLanguage, MdLocalBar} from 'react-icons/md'
-import {PiHandsPrayingBold} from 'react-icons/pi'
-import {RiScales3Line} from 'react-icons/ri'
-import DropdownMenu from 'web/components/comments/dropdown-menu'
-import {Big5Filters, Big5FilterText, hasAnyBig5Filter} from 'web/components/filters/big5-filter'
-import {DietFilter, DietFilterText} from 'web/components/filters/diet-filter'
-import {DrinksFilter, DrinksFilterText} from 'web/components/filters/drinks-filter'
-import {EducationFilter, EducationFilterText} from 'web/components/filters/education-filter'
-import {HasKidsLabel} from 'web/components/filters/has-kids-filter'
-import {InterestFilter, InterestFilterText} from 'web/components/filters/interest-filter'
-import {LanguageFilter, LanguageFilterText} from 'web/components/filters/language-filter'
-import {MbtiFilter, MbtiFilterText} from 'web/components/filters/mbti-filter'
-import {PoliticalFilter, PoliticalFilterText} from 'web/components/filters/political-filter'
-import {
-  RelationshipStatusFilter,
-  RelationshipStatusFilterText,
-} from 'web/components/filters/relationship-status-filter'
-import {ReligionFilter, ReligionFilterText} from 'web/components/filters/religion-filter'
-import {RomanticFilter, RomanticFilterText} from 'web/components/filters/romantic-filter'
-import {ShortBioToggle} from 'web/components/filters/short-bio-toggle'
-import {SmokerFilter, SmokerFilterText} from 'web/components/filters/smoker-filter'
-import {KidsLabel, useWantsKidsLabelsWithIcon} from 'web/components/filters/wants-kids-filter'
-import {Col} from 'web/components/layout/col'
-import {Row} from 'web/components/layout/row'
-import {ResetFiltersButton} from 'web/components/searches/button'
-import {CustomizeableDropdown} from 'web/components/widgets/customizeable-dropdown'
-import {useT} from 'web/lib/locale'
-import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'
-
-import {AgeFilter, AgeFilterText} from './age-filter'
-import {GenderFilter, GenderFilterText} from './gender-filter'
-import {LastActiveFilter, LastActiveFilterText} from './last-active-filter'
-import {LocationFilter, LocationFilterProps, LocationFilterText} from './location-filter'
-import {MyMatchesToggle} from './my-matches-toggle'
-import {RelationshipFilter, RelationshipFilterText} from './relationship-filter'
-
-export function DesktopFilters(props: {
-  filters: Partial<FilterFields>
-  youProfile: Profile | undefined | null
-  updateFilter: (newState: Partial<FilterFields>) => void
-  clearFilters: () => void
-  setYourFilters: (checked: boolean) => void
-  isYourFilters: boolean
-  locationFilterProps: LocationFilterProps
-  raisedInLocationFilterProps?: LocationFilterProps
-  includeRelationshipFilters: boolean | undefined
-  choices: Record<OptionTableKey, Record<string, string>>
-}) {
-  const {
-    filters,
-    youProfile,
-    updateFilter,
-    clearFilters,
-    setYourFilters,
-    isYourFilters,
-    locationFilterProps,
-    raisedInLocationFilterProps,
-    includeRelationshipFilters,
-    choices,
-  } = props
-
-  const t = useT()
-  const wantsKidsLabelsWithIcon = useWantsKidsLabelsWithIcon()
-
-  return (
-    <>
-      <ResetFiltersButton clearFilters={clearFilters} />
-
-      <MyMatchesToggle
-        setYourFilters={setYourFilters}
-        youProfile={youProfile}
-        on={isYourFilters}
-        hidden={!youProfile}
-      />
-
-      {/* Short Bios */}
-      <ShortBioToggle updateFilter={updateFilter} filters={filters} hidden={false} />
-
-      {/* CONNECTION */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <FaUserGroup className="h-4 w-4" />
-                <RelationshipFilterText
-                  relationship={filters.pref_relation_styles as RelationshipType[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={<RelationshipFilter filters={filters} updateFilter={updateFilter} />}
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* RELATIONSHIP STATUS */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <BsPersonHeart className="h-4 w-4" />
-                <RelationshipStatusFilterText
-                  options={filters.relationship_status as string[] | undefined}
-                  defaultLabel={t('filter.relationship_status.any', 'Any relationship status')}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <RelationshipStatusFilter filters={filters} updateFilter={updateFilter} />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* LOCATION */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            content={
-              <LocationFilterText
-                youProfile={youProfile}
-                location={locationFilterProps.location}
-                radius={locationFilterProps.radius}
-                highlightedClass={open ? 'text-primary-500' : ''}
-              />
-            }
-            open={open}
-          />
-        )}
-        dropdownMenuContent={
-          <LocationFilter youProfile={youProfile} locationFilterProps={locationFilterProps} />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-80"
-      />
-
-      {/* RAISED IN LOCATION */}
-      {raisedInLocationFilterProps && (
-        <CustomizeableDropdown
-          buttonContent={(open: boolean) => (
-            <DropdownButton
-              content={
-                <LocationFilterText
-                  youProfile={youProfile}
-                  location={raisedInLocationFilterProps.location}
-                  radius={raisedInLocationFilterProps.radius ?? 100}
-                  highlightedClass={open ? 'text-primary-500' : ''}
-                  labelPrefix={t('filter.raised_in', 'Grew up')}
-                />
-              }
-              open={open}
-            />
-          )}
-          dropdownMenuContent={
-            <LocationFilter
-              youProfile={youProfile}
-              locationFilterProps={raisedInLocationFilterProps}
-            />
-          }
-          popoverClassName="bg-canvas-50"
-          menuWidth="w-80"
-        />
-      )}
-
-      {/* AGE RANGE */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            open={open}
-            content={
-              <AgeFilterText
-                pref_age_min={filters.pref_age_min}
-                pref_age_max={filters.pref_age_max}
-                highlightedClass={open ? 'text-primary-500' : ''}
-              />
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <Col className="mx-2 mb-4">
-            <AgeFilter filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-80"
-      />
-
-      {/* GENDER */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            content={
-              <GenderFilterText
-                gender={filters.genders as Gender[]}
-                highlightedClass={open ? 'text-primary-500' : undefined}
-              />
-            }
-            open={open}
-          />
-        )}
-        dropdownMenuContent={
-          <Col>
-            <GenderFilter filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-      />
-
-      {/* GENDER THEY SEEK */}
-      {/*<CustomizeableDropdown*/}
-      {/*  buttonContent={(open: boolean) => (*/}
-      {/*    <DropdownButton*/}
-      {/*      content={*/}
-      {/*        <PrefGenderFilterText*/}
-      {/*          pref_gender={filters.pref_gender as Gender[]}*/}
-      {/*          highlightedClass={open ? 'text-primary-500' : undefined}*/}
-      {/*        />*/}
-      {/*      }*/}
-      {/*      open={open}*/}
-      {/*    />*/}
-      {/*  )}*/}
-      {/*  dropdownMenuContent={*/}
-      {/*    <Col>*/}
-      {/*      <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
-      {/*    </Col>*/}
-      {/*  }*/}
-      {/*  popoverClassName="bg-canvas-50"*/}
-      {/*/>*/}
-
-      {includeRelationshipFilters && (
-        <>
-          {/* RELATIONSHIP STYLE */}
-          <CustomizeableDropdown
-            buttonContent={(open) => (
-              <DropdownButton
-                open={open}
-                content={
-                  <Row className="items-center gap-1">
-                    <FaHeart className="h-4 w-4" />
-                    <RomanticFilterText
-                      relationship={filters.pref_romantic_styles as RomanticType[] | undefined}
-                      highlightedClass={open ? 'text-primary-500' : undefined}
-                    />
-                  </Row>
-                }
-              />
-            )}
-            dropdownMenuContent={<RomanticFilter filters={filters} updateFilter={updateFilter} />}
-            popoverClassName="bg-canvas-50"
-            menuWidth="w-50"
-          />
-
-          {/* WANTS KIDS */}
-          <DropdownMenu
-            items={[
-              {
-                name: wantsKidsLabelsWithIcon.no_preference.name,
-                icon: wantsKidsLabelsWithIcon.no_preference.icon,
-                onClick: () => {
-                  updateFilter({
-                    wants_kids_strength: wantsKidsLabelsWithIcon.no_preference.strength,
-                  })
-                },
-              },
-              {
-                name: wantsKidsLabelsWithIcon.wants_kids.name,
-                icon: wantsKidsLabelsWithIcon.wants_kids.icon,
-                onClick: () => {
-                  updateFilter({
-                    wants_kids_strength: wantsKidsLabelsWithIcon.wants_kids.strength,
-                  })
-                },
-              },
-              {
-                name: wantsKidsLabelsWithIcon.doesnt_want_kids.name,
-                icon: wantsKidsLabelsWithIcon.doesnt_want_kids.icon,
-                onClick: () => {
-                  updateFilter({
-                    wants_kids_strength: wantsKidsLabelsWithIcon.doesnt_want_kids.strength,
-                  })
-                },
-              },
-            ]}
-            closeOnClick
-            buttonClass={'!text-ink-600 !hover:!text-ink-600'}
-            buttonContent={(open: boolean) => (
-              <DropdownButton
-                content={
-                  <KidsLabel
-                    strength={
-                      filters.wants_kids_strength ?? wantsKidsLabelsWithIcon.no_preference.strength
-                    }
-                    highlightedClass={open ? 'text-primary-500' : ''}
-                  />
-                }
-                open={open}
-              />
-            )}
-            menuItemsClass={'bg-canvas-50'}
-            menuWidth="w-48"
-          />
-
-          {/* HAS KIDS */}
-          <DropdownMenu
-            items={[
-              {
-                name: t('profile.has_kids.no_preference', hasKidsLabels.no_preference.name),
-                onClick: () => {
-                  updateFilter({has_kids: hasKidsLabels.no_preference.value})
-                },
-              },
-              {
-                name: t('profile.has_kids.doesnt_have_kids', hasKidsLabels.doesnt_have_kids.name),
-                onClick: () => {
-                  updateFilter({has_kids: hasKidsLabels.doesnt_have_kids.value})
-                },
-              },
-              {
-                name: t('profile.has_kids.has_kids', hasKidsLabels.has_kids.name),
-                onClick: () => {
-                  updateFilter({has_kids: hasKidsLabels.has_kids.value})
-                },
-              },
-            ]}
-            closeOnClick
-            buttonClass={'!text-ink-600 !hover:!text-ink-600'}
-            buttonContent={(open: boolean) => (
-              <DropdownButton
-                content={
-                  <HasKidsLabel
-                    has_kids={filters.has_kids ?? -1}
-                    highlightedClass={open ? 'text-primary-500' : ''}
-                  />
-                }
-                open={open}
-              />
-            )}
-            menuItemsClass="bg-canvas-50"
-            menuWidth="w-40"
-          />
-        </>
-      )}
-
-      {/* DIET */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <GiFruitBowl className="h-4 w-4" />
-                <DietFilterText
-                  options={filters.diet as DietType[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={<DietFilter filters={filters} updateFilter={updateFilter} />}
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* DRINKS PER MONTH */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <MdLocalBar className="h-4 w-4" />
-                <DrinksFilterText
-                  drinks_min={filters.drinks_min}
-                  drinks_max={filters.drinks_max}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <Col className="mx-2 mb-4">
-            <DrinksFilter filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-80"
-      />
-
-      {/* SMOKER */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <LuCigarette className="h-4 w-4" />
-                <SmokerFilterText
-                  is_smoker={filters.is_smoker}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <Col className="mx-2 mb-4">
-            <SmokerFilter filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* LANGUAGES */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <MdLanguage className="h-4 w-4" />
-                <LanguageFilterText
-                  options={filters.languages as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={<LanguageFilter filters={filters} updateFilter={updateFilter} />}
-        popoverClassName="bg-canvas-50 col-span-full max-h-80 overflow-y-auto"
-        menuWidth="w-50"
-      />
-
-      {/* Interests */}
-      <CustomizeableDropdown
-        newBadgeClassName={'-top-3 -left-2'}
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <FaStar className="h-4 w-4" />
-                <InterestFilterText
-                  options={filters.interests as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                  label={'interests'}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <InterestFilter
-            filters={filters}
-            updateFilter={updateFilter}
-            choices={choices.interests}
-            label={'interests'}
-          />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50 max-h-[400px] overflow-y-auto"
-      />
-
-      {/* Causes */}
-      <CustomizeableDropdown
-        newBadgeClassName={'-top-3 -left-2'}
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <FaHandsHelping className="h-4 w-4" />
-                <InterestFilterText
-                  options={filters.causes as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                  label={'causes'}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <InterestFilter
-            filters={filters}
-            updateFilter={updateFilter}
-            choices={choices.causes}
-            label={'causes'}
-          />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50 max-h-[400px] overflow-y-auto"
-      />
-
-      {/* Work */}
-      <CustomizeableDropdown
-        newBadgeClassName={'-top-3 -left-2'}
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <FaBriefcase className="h-4 w-4" />
-                <InterestFilterText
-                  options={filters.work as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                  label={'work'}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <InterestFilter
-            filters={filters}
-            updateFilter={updateFilter}
-            choices={choices.work}
-            label={'work'}
-          />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-100 max-h-[400px] overflow-y-auto"
-      />
-
-      {/* POLITICS */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <RiScales3Line className="h-4 w-4" />
-                <PoliticalFilterText
-                  options={filters.political_beliefs as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={<PoliticalFilter filters={filters} updateFilter={updateFilter} />}
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* RELIGION */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <PiHandsPrayingBold className="h-4 w-4" />
-                <ReligionFilterText
-                  options={filters.religion as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <ReligionFilter
-            filters={filters}
-            updateFilter={updateFilter}
-            className={'w-[350px] grid grid-cols-2'}
-          />
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* MBTI */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <BsPersonVcard className="h-4 w-4" />
-                <MbtiFilterText
-                  options={filters.mbti as string[] | undefined}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                  defaultLabel={t('filter.any_mbti', 'Any MBTI')}
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={<MbtiFilter filters={filters} updateFilter={updateFilter} />}
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-[400px]"
-      />
-
-      {/* BIG FIVE PERSONALITY */}
-      <CustomizeableDropdown
-        buttonContent={(open) => (
-          <DropdownButton
-            open={open}
-            content={
-              <Row className="items-center gap-1">
-                <BsPersonVcard className="h-4 w-4" />
-                <Big5FilterText
-                  filters={filters}
-                  highlightedClass={
-                    open || hasAnyBig5Filter(filters) ? 'text-primary-500' : undefined
-                  }
-                />
-              </Row>
-            }
-          />
-        )}
-        dropdownMenuContent={
-          <Col className="mx-2 mb-4">
-            <Big5Filters filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-[420px]"
-      />
-
-      {/* EDUCATION */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            content={
-              <Row className="items-center gap-1">
-                <LuGraduationCap className="h-4 w-4" />
-                <EducationFilterText
-                  options={filters.education_levels as string[]}
-                  highlightedClass={open ? 'text-primary-500' : undefined}
-                />
-              </Row>
-            }
-            open={open}
-          />
-        )}
-        dropdownMenuContent={
-          <Col>
-            <EducationFilter filters={filters} updateFilter={updateFilter} />
-          </Col>
-        }
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-
-      {/* LAST ACTIVE */}
-      <CustomizeableDropdown
-        buttonContent={(open: boolean) => (
-          <DropdownButton
-            open={open}
-            content={
-              <LastActiveFilterText
-                last_active={filters.last_active}
-                highlightedClass={open ? 'text-primary-500' : ''}
-              />
-            }
-          />
-        )}
-        dropdownMenuContent={(close) => (
-          <Col className="mx-2 mb-4">
-            <LastActiveFilter filters={filters} updateFilter={updateFilter} close={close} />
-          </Col>
-        )}
-        popoverClassName="bg-canvas-50"
-        menuWidth="w-50"
-      />
-    </>
-  )
-}
-
-export function DropdownButton(props: {open: boolean; content: ReactNode}) {
-  const {open, content} = props
-  return (
-    <Row className="hover:text-ink-700 items-center gap-0.5 transition-all">
-      {content}
-      <span className="text-ink-400">
-        {open ? <ChevronUpIcon className="h-4 w-4" /> : <ChevronDownIcon className="h-4 w-4" />}
-      </span>
-    </Row>
-  )
-}
+// import {FilterFields} from 'common/filters'
+// import {Gender} from 'common/gender'
+// import {hasKidsLabels} from 'common/has-kids'
+// import {OptionTableKey} from 'common/profiles/constants'
+// import {Profile} from 'common/profiles/profile'
+// import {BsPersonHeart, BsPersonVcard} from 'react-icons/bs'
+// import {FaBriefcase, FaHandsHelping, FaHeart, FaStar} from 'react-icons/fa'
+// import {FaUserGroup} from 'react-icons/fa6'
+// import {GiFruitBowl} from 'react-icons/gi'
+// import {LuCigarette, LuGraduationCap} from 'react-icons/lu'
+// import {MdLanguage, MdLocalBar} from 'react-icons/md'
+// import {PiHandsPrayingBold} from 'react-icons/pi'
+// import {RiScales3Line} from 'react-icons/ri'
+// import DropdownMenu from 'web/components/comments/dropdown-menu'
+// import {Big5Filters, Big5FilterText, hasAnyBig5Filter} from 'web/components/filters/big5-filter'
+// import {DietFilter, DietFilterText} from 'web/components/filters/diet-filter'
+// import {DrinksFilter, DrinksFilterText} from 'web/components/filters/drinks-filter'
+// import {EducationFilter, EducationFilterText} from 'web/components/filters/education-filter'
+// import {HasKidsLabel} from 'web/components/filters/has-kids-filter'
+// import {InterestFilter, InterestFilterText} from 'web/components/filters/interest-filter'
+// import {LanguageFilter, LanguageFilterText} from 'web/components/filters/language-filter'
+// import {MbtiFilter, MbtiFilterText} from 'web/components/filters/mbti-filter'
+// import {PoliticalFilter, PoliticalFilterText} from 'web/components/filters/political-filter'
+// import {
+//   RelationshipStatusFilter,
+//   RelationshipStatusFilterText,
+// } from 'web/components/filters/relationship-status-filter'
+// import {ReligionFilter, ReligionFilterText} from 'web/components/filters/religion-filter'
+// import {RomanticFilter, RomanticFilterText} from 'web/components/filters/romantic-filter'
+// import {ShortBioToggle} from 'web/components/filters/short-bio-toggle'
+// import {SmokerFilter, SmokerFilterText} from 'web/components/filters/smoker-filter'
+// import {KidsLabel, useWantsKidsLabelsWithIcon} from 'web/components/filters/wants-kids-filter'
+// import {Col} from 'web/components/layout/col'
+// import {Row} from 'web/components/layout/row'
+// import {ResetFiltersButton} from 'web/components/searches/button'
+// import {CustomizeableDropdown} from 'web/components/widgets/customizeable-dropdown'
+// import {useT} from 'web/lib/locale'
+// import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'
+//
+// import {AgeFilter, AgeFilterText} from './age-filter'
+// import {GenderFilter, GenderFilterText} from './gender-filter'
+// import {LastActiveFilter, LastActiveFilterText} from './last-active-filter'
+// import {LocationFilter, LocationFilterProps, LocationFilterText} from './location-filter'
+// import {MyMatchesToggle} from './my-matches-toggle'
+// import {RelationshipFilter, RelationshipFilterText} from './relationship-filter'
+//
+// export function DesktopFilters(props: {
+//   filters: Partial<FilterFields>
+//   youProfile: Profile | undefined | null
+//   updateFilter: (newState: Partial<FilterFields>) => void
+//   clearFilters: () => void
+//   setYourFilters: (checked: boolean) => void
+//   isYourFilters: boolean
+//   locationFilterProps: LocationFilterProps
+//   raisedInLocationFilterProps?: LocationFilterProps
+//   includeRelationshipFilters: boolean | undefined
+//   choices: Record<OptionTableKey, Record<string, string>>
+// }) {
+//   const {
+//     filters,
+//     youProfile,
+//     updateFilter,
+//     clearFilters,
+//     setYourFilters,
+//     isYourFilters,
+//     locationFilterProps,
+//     raisedInLocationFilterProps,
+//     includeRelationshipFilters,
+//     choices,
+//   } = props
+//
+//   const t = useT()
+//   const wantsKidsLabelsWithIcon = useWantsKidsLabelsWithIcon()
+//
+//   return (
+//     <>
+//       <ResetFiltersButton clearFilters={clearFilters} />
+//
+//       <MyMatchesToggle
+//         setYourFilters={setYourFilters}
+//         youProfile={youProfile}
+//         on={isYourFilters}
+//         hidden={!youProfile}
+//       />
+//
+//       {/* Short Bios */}
+//       <ShortBioToggle updateFilter={updateFilter} filters={filters} hidden={false} />
+//
+//       {/* CONNECTION */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <FaUserGroup className="h-4 w-4" />
+//                 <RelationshipFilterText
+//                   relationship={filters.pref_relation_styles as RelationshipType[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={<RelationshipFilter filters={filters} updateFilter={updateFilter} />}
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* RELATIONSHIP STATUS */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <BsPersonHeart className="h-4 w-4" />
+//                 <RelationshipStatusFilterText
+//                   options={filters.relationship_status as string[] | undefined}
+//                   defaultLabel={t('filter.relationship_status.any', 'Any relationship status')}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <RelationshipStatusFilter filters={filters} updateFilter={updateFilter} />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* LOCATION */}
+//       <CustomizeableDropdown
+//         buttonContent={(open: boolean) => (
+//           <DropdownButton
+//             content={
+//               <LocationFilterText
+//                 youProfile={youProfile}
+//                 location={locationFilterProps.location}
+//                 radius={locationFilterProps.radius}
+//                 highlightedClass={open ? 'text-primary-500' : ''}
+//               />
+//             }
+//             open={open}
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <LocationFilter youProfile={youProfile} locationFilterProps={locationFilterProps} />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-80"
+//       />
+//
+//       {/* RAISED IN LOCATION */}
+//       {raisedInLocationFilterProps && (
+//         <CustomizeableDropdown
+//           buttonContent={(open: boolean) => (
+//             <DropdownButton
+//               content={
+//                 <LocationFilterText
+//                   youProfile={youProfile}
+//                   location={raisedInLocationFilterProps.location}
+//                   radius={raisedInLocationFilterProps.radius ?? 100}
+//                   highlightedClass={open ? 'text-primary-500' : ''}
+//                   labelPrefix={t('filter.raised_in', 'Grew up')}
+//                 />
+//               }
+//               open={open}
+//             />
+//           )}
+//           dropdownMenuContent={
+//             <LocationFilter
+//               youProfile={youProfile}
+//               locationFilterProps={raisedInLocationFilterProps}
+//             />
+//           }
+//           popoverClassName="bg-canvas-50"
+//           menuWidth="w-80"
+//         />
+//       )}
+//
+//       {/* AGE RANGE */}
+//       <CustomizeableDropdown
+//         buttonContent={(open: boolean) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <AgeFilterText
+//                 pref_age_min={filters.pref_age_min}
+//                 pref_age_max={filters.pref_age_max}
+//                 highlightedClass={open ? 'text-primary-500' : ''}
+//               />
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col className="mx-2 mb-4">
+//             <AgeFilter filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-80"
+//       />
+//
+//       {/* GENDER */}
+//       <CustomizeableDropdown
+//         buttonContent={(open: boolean) => (
+//           <DropdownButton
+//             content={
+//               <GenderFilterText
+//                 gender={filters.genders as Gender[]}
+//                 highlightedClass={open ? 'text-primary-500' : undefined}
+//               />
+//             }
+//             open={open}
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col>
+//             <GenderFilter filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//       />
+//
+//       {/* GENDER THEY SEEK */}
+//       {/*<CustomizeableDropdown*/}
+//       {/*  buttonContent={(open: boolean) => (*/}
+//       {/*    <DropdownButton*/}
+//       {/*      content={*/}
+//       {/*        <PrefGenderFilterText*/}
+//       {/*          pref_gender={filters.pref_gender as Gender[]}*/}
+//       {/*          highlightedClass={open ? 'text-primary-500' : undefined}*/}
+//       {/*        />*/}
+//       {/*      }*/}
+//       {/*      open={open}*/}
+//       {/*    />*/}
+//       {/*  )}*/}
+//       {/*  dropdownMenuContent={*/}
+//       {/*    <Col>*/}
+//       {/*      <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
+//       {/*    </Col>*/}
+//       {/*  }*/}
+//       {/*  popoverClassName="bg-canvas-50"*/}
+//       {/*/>*/}
+//
+//       {includeRelationshipFilters && (
+//         <>
+//           {/* RELATIONSHIP STYLE */}
+//           <CustomizeableDropdown
+//             buttonContent={(open) => (
+//               <DropdownButton
+//                 open={open}
+//                 content={
+//                   <Row className="items-center gap-1">
+//                     <FaHeart className="h-4 w-4" />
+//                     <RomanticFilterText
+//                       relationship={filters.pref_romantic_styles as RomanticType[] | undefined}
+//                       highlightedClass={open ? 'text-primary-500' : undefined}
+//                     />
+//                   </Row>
+//                 }
+//               />
+//             )}
+//             dropdownMenuContent={<RomanticFilter filters={filters} updateFilter={updateFilter} />}
+//             popoverClassName="bg-canvas-50"
+//             menuWidth="w-50"
+//           />
+//
+//           {/* WANTS KIDS */}
+//           <DropdownMenu
+//             items={[
+//               {
+//                 name: wantsKidsLabelsWithIcon.no_preference.name,
+//                 icon: wantsKidsLabelsWithIcon.no_preference.icon,
+//                 onClick: () => {
+//                   updateFilter({
+//                     wants_kids_strength: wantsKidsLabelsWithIcon.no_preference.strength,
+//                   })
+//                 },
+//               },
+//               {
+//                 name: wantsKidsLabelsWithIcon.wants_kids.name,
+//                 icon: wantsKidsLabelsWithIcon.wants_kids.icon,
+//                 onClick: () => {
+//                   updateFilter({
+//                     wants_kids_strength: wantsKidsLabelsWithIcon.wants_kids.strength,
+//                   })
+//                 },
+//               },
+//               {
+//                 name: wantsKidsLabelsWithIcon.doesnt_want_kids.name,
+//                 icon: wantsKidsLabelsWithIcon.doesnt_want_kids.icon,
+//                 onClick: () => {
+//                   updateFilter({
+//                     wants_kids_strength: wantsKidsLabelsWithIcon.doesnt_want_kids.strength,
+//                   })
+//                 },
+//               },
+//             ]}
+//             closeOnClick
+//             buttonClass={'!text-ink-600 !hover:!text-ink-600'}
+//             buttonContent={(open: boolean) => (
+//               <DropdownButton
+//                 content={
+//                   <KidsLabel
+//                     strength={
+//                       filters.wants_kids_strength ?? wantsKidsLabelsWithIcon.no_preference.strength
+//                     }
+//                     highlightedClass={open ? 'text-primary-500' : ''}
+//                   />
+//                 }
+//                 open={open}
+//               />
+//             )}
+//             menuItemsClass={'bg-canvas-50'}
+//             menuWidth="w-48"
+//           />
+//
+//           {/* HAS KIDS */}
+//           <DropdownMenu
+//             items={[
+//               {
+//                 name: t('profile.has_kids.no_preference', hasKidsLabels.no_preference.name),
+//                 onClick: () => {
+//                   updateFilter({has_kids: hasKidsLabels.no_preference.value})
+//                 },
+//               },
+//               {
+//                 name: t('profile.has_kids.doesnt_have_kids', hasKidsLabels.doesnt_have_kids.name),
+//                 onClick: () => {
+//                   updateFilter({has_kids: hasKidsLabels.doesnt_have_kids.value})
+//                 },
+//               },
+//               {
+//                 name: t('profile.has_kids.has_kids', hasKidsLabels.has_kids.name),
+//                 onClick: () => {
+//                   updateFilter({has_kids: hasKidsLabels.has_kids.value})
+//                 },
+//               },
+//             ]}
+//             closeOnClick
+//             buttonClass={'!text-ink-600 !hover:!text-ink-600'}
+//             buttonContent={(open: boolean) => (
+//               <DropdownButton
+//                 content={
+//                   <HasKidsLabel
+//                     has_kids={filters.has_kids ?? -1}
+//                     highlightedClass={open ? 'text-primary-500' : ''}
+//                   />
+//                 }
+//                 open={open}
+//               />
+//             )}
+//             menuItemsClass="bg-canvas-50"
+//             menuWidth="w-40"
+//           />
+//         </>
+//       )}
+//
+//       {/* DIET */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <GiFruitBowl className="h-4 w-4" />
+//                 <DietFilterText
+//                   options={filters.diet as DietType[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={<DietFilter filters={filters} updateFilter={updateFilter} />}
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* DRINKS PER MONTH */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <MdLocalBar className="h-4 w-4" />
+//                 <DrinksFilterText
+//                   drinks_min={filters.drinks_min}
+//                   drinks_max={filters.drinks_max}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col className="mx-2 mb-4">
+//             <DrinksFilter filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-80"
+//       />
+//
+//       {/* SMOKER */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <LuCigarette className="h-4 w-4" />
+//                 <SmokerFilterText
+//                   is_smoker={filters.is_smoker}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col className="mx-2 mb-4">
+//             <SmokerFilter filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* LANGUAGES */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <MdLanguage className="h-4 w-4" />
+//                 <LanguageFilterText
+//                   options={filters.languages as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={<LanguageFilter filters={filters} updateFilter={updateFilter} />}
+//         popoverClassName="bg-canvas-50 col-span-full max-h-80 overflow-y-auto"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* Interests */}
+//       <CustomizeableDropdown
+//         newBadgeClassName={'-top-3 -left-2'}
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <FaStar className="h-4 w-4" />
+//                 <InterestFilterText
+//                   options={filters.interests as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                   label={'interests'}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <InterestFilter
+//             filters={filters}
+//             updateFilter={updateFilter}
+//             choices={choices.interests}
+//             label={'interests'}
+//           />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50 max-h-[400px] overflow-y-auto"
+//       />
+//
+//       {/* Causes */}
+//       <CustomizeableDropdown
+//         newBadgeClassName={'-top-3 -left-2'}
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <FaHandsHelping className="h-4 w-4" />
+//                 <InterestFilterText
+//                   options={filters.causes as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                   label={'causes'}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <InterestFilter
+//             filters={filters}
+//             updateFilter={updateFilter}
+//             choices={choices.causes}
+//             label={'causes'}
+//           />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50 max-h-[400px] overflow-y-auto"
+//       />
+//
+//       {/* Work */}
+//       <CustomizeableDropdown
+//         newBadgeClassName={'-top-3 -left-2'}
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <FaBriefcase className="h-4 w-4" />
+//                 <InterestFilterText
+//                   options={filters.work as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                   label={'work'}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <InterestFilter
+//             filters={filters}
+//             updateFilter={updateFilter}
+//             choices={choices.work}
+//             label={'work'}
+//           />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-100 max-h-[400px] overflow-y-auto"
+//       />
+//
+//       {/* POLITICS */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <RiScales3Line className="h-4 w-4" />
+//                 <PoliticalFilterText
+//                   options={filters.political_beliefs as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={<PoliticalFilter filters={filters} updateFilter={updateFilter} />}
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* RELIGION */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <PiHandsPrayingBold className="h-4 w-4" />
+//                 <ReligionFilterText
+//                   options={filters.religion as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <ReligionFilter
+//             filters={filters}
+//             updateFilter={updateFilter}
+//             className={'w-[350px] grid grid-cols-2'}
+//           />
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* MBTI */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <BsPersonVcard className="h-4 w-4" />
+//                 <MbtiFilterText
+//                   options={filters.mbti as string[] | undefined}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                   defaultLabel={t('filter.any_mbti', 'Any MBTI')}
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={<MbtiFilter filters={filters} updateFilter={updateFilter} />}
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-[400px]"
+//       />
+//
+//       {/* BIG FIVE PERSONALITY */}
+//       <CustomizeableDropdown
+//         buttonContent={(open) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <Row className="items-center gap-1">
+//                 <BsPersonVcard className="h-4 w-4" />
+//                 <Big5FilterText
+//                   filters={filters}
+//                   highlightedClass={
+//                     open || hasAnyBig5Filter(filters) ? 'text-primary-500' : undefined
+//                   }
+//                 />
+//               </Row>
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col className="mx-2 mb-4">
+//             <Big5Filters filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-[420px]"
+//       />
+//
+//       {/* EDUCATION */}
+//       <CustomizeableDropdown
+//         buttonContent={(open: boolean) => (
+//           <DropdownButton
+//             content={
+//               <Row className="items-center gap-1">
+//                 <LuGraduationCap className="h-4 w-4" />
+//                 <EducationFilterText
+//                   options={filters.education_levels as string[]}
+//                   highlightedClass={open ? 'text-primary-500' : undefined}
+//                 />
+//               </Row>
+//             }
+//             open={open}
+//           />
+//         )}
+//         dropdownMenuContent={
+//           <Col>
+//             <EducationFilter filters={filters} updateFilter={updateFilter} />
+//           </Col>
+//         }
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//
+//       {/* LAST ACTIVE */}
+//       <CustomizeableDropdown
+//         buttonContent={(open: boolean) => (
+//           <DropdownButton
+//             open={open}
+//             content={
+//               <LastActiveFilterText
+//                 last_active={filters.last_active}
+//                 highlightedClass={open ? 'text-primary-500' : ''}
+//               />
+//             }
+//           />
+//         )}
+//         dropdownMenuContent={(close) => (
+//           <Col className="mx-2 mb-4">
+//             <LastActiveFilter filters={filters} updateFilter={updateFilter} close={close} />
+//           </Col>
+//         )}
+//         popoverClassName="bg-canvas-50"
+//         menuWidth="w-50"
+//       />
+//     </>
+//   )
+// }
diff --git a/web/components/filters/filters.tsx b/web/components/filters/filters.tsx
index 266b4947..c1fa13b2 100644
--- a/web/components/filters/filters.tsx
+++ b/web/components/filters/filters.tsx
@@ -51,12 +51,14 @@ function countActiveFilters(
   locationFilterProps: LocationFilterProps,
   raisedInLocationFilterProps: LocationFilterProps,
 ) {
-  let count = Object.keys(removeNullOrUndefinedProps({...filters, orderBy: undefined})).length
+  let parsedFilters = Object.keys(removeNullOrUndefinedProps({...filters, orderBy: undefined}))
+  parsedFilters = parsedFilters.filter((key) => !key.startsWith('big5_'))
+  let count = parsedFilters.length
   if (locationFilterProps.location) count = count - 2
   if (raisedInLocationFilterProps.location) count = count - 2
   if (filters.pref_age_min && filters.pref_age_max) count--
   const big5Count = countBig5Filters(filters)
-  if (big5Count > 1) count = count - (big5Count - 1)
+  if (big5Count > 0) count++
   return count
 }
 
@@ -344,26 +346,6 @@ function Filters(props: {
             <RomanticFilter filters={filters} updateFilter={updateFilter} />
           </FilterSection>
 
-          {/* Wants Kids */}
-          <FilterSection
-            title={t('filter.wants_kids.wants_kids', 'Wants kids')}
-            openFilter={openFilter}
-            setOpenFilter={setOpenFilter}
-            isActive={filters.wants_kids_strength != null && filters.wants_kids_strength !== -1}
-            selection={
-              <KidsLabel
-                strength={filters.wants_kids_strength ?? -1}
-                highlightedClass={
-                  filters.wants_kids_strength != null && filters.wants_kids_strength !== -1
-                    ? 'text-primary-600'
-                    : 'text-ink-900'
-                }
-              />
-            }
-          >
-            <WantsKidsFilter filters={filters} updateFilter={updateFilter} />
-          </FilterSection>
-
           {/* Has Kids */}
           <FilterSection
             title={t('profile.optional.has_kids', 'Has kids')}
@@ -383,6 +365,26 @@ function Filters(props: {
           >
             <HasKidsFilter filters={filters} updateFilter={updateFilter} />
           </FilterSection>
+
+          {/* Wants Kids */}
+          <FilterSection
+            title={t('filter.wants_kids.wants_kids', 'Wants kids')}
+            openFilter={openFilter}
+            setOpenFilter={setOpenFilter}
+            isActive={filters.wants_kids_strength != null && filters.wants_kids_strength !== -1}
+            selection={
+              <KidsLabel
+                strength={filters.wants_kids_strength ?? -1}
+                highlightedClass={
+                  filters.wants_kids_strength != null && filters.wants_kids_strength !== -1
+                    ? 'text-primary-600'
+                    : 'text-ink-900'
+                }
+              />
+            }
+          >
+            <WantsKidsFilter filters={filters} updateFilter={updateFilter} />
+          </FilterSection>
         </FilterGroup>
       )}
 
@@ -726,7 +728,7 @@ export function FilterSection(props: {
     <Col className={clsx(className)}>
       <button
         className={clsx(
-          'text-ink-600 flex w-full flex-row justify-between px-4 pt-4 relative',
+          'text-ink-600 flex w-full flex-row justify-between px-4 pt-4 relative hover-bold',
           isOpen ? 'pb-2' : 'pb-4',
         )}
         onClick={() => (isOpen ? setOpenFilter(undefined) : setOpenFilter(title))}
diff --git a/web/components/filters/has-kids-filter.tsx b/web/components/filters/has-kids-filter.tsx
index 8ddfbdd3..c77b4a7e 100644
--- a/web/components/filters/has-kids-filter.tsx
+++ b/web/components/filters/has-kids-filter.tsx
@@ -1,19 +1,23 @@
 import clsx from 'clsx'
 import {FilterFields} from 'common/filters'
 import {generateChoicesMap, hasKidsLabels} from 'common/has-kids'
-import {FaChild} from 'react-icons/fa6'
+import {invert} from 'lodash'
+import {DropdownOptions} from 'web/components/comments/dropdown-menu'
 import {Row} from 'web/components/layout/row'
-import {ChoicesToggleGroup} from 'web/components/widgets/choices-toggle-group'
 import {useT} from 'web/lib/locale'
 
+const DEFAULT_KEY = -1
+
 export function HasKidsLabel(props: {
   has_kids: number
   highlightedClass?: string
   mobile?: boolean
 }) {
-  const {has_kids, highlightedClass} = props
+  const {highlightedClass} = props
   const t = useT()
 
+  const has_kids = Number(props.has_kids)
+
   // Get the appropriate label based on has_kids value
   let labelKey = 'no_preference'
   let labelValue = hasKidsLabels.no_preference.name
@@ -27,8 +31,9 @@ export function HasKidsLabel(props: {
   }
   return (
     <Row className="items-center gap-0.5">
-      <FaChild className="h-4 w-4" />
-      <span className={clsx(highlightedClass, has_kids !== -1 && 'font-semibold')}>
+      {/*<FaChild className="h-4 w-4" />*/}
+      <span className={clsx(highlightedClass, has_kids !== DEFAULT_KEY && 'font-semibold')}>
+        {has_kids === DEFAULT_KEY && t('filter.label.has_kids', 'Kids') + ': '}
         {t(`profile.has_kids.${labelKey}`, labelValue)}
       </span>
     </Row>
@@ -41,12 +46,13 @@ export function HasKidsFilter(props: {
 }) {
   const {filters, updateFilter} = props
   return (
-    <ChoicesToggleGroup
-      currentChoice={filters.has_kids ?? 0}
-      choicesMap={generateChoicesMap(hasKidsLabels)}
+    <DropdownOptions
+      items={invert(generateChoicesMap(hasKidsLabels))}
+      activeKey={String(filters.has_kids ?? DEFAULT_KEY)}
       translationPrefix="profile.has_kids"
-      setChoice={(c) => updateFilter({has_kids: Number(c) >= 0 ? Number(c) : undefined})}
-      toggleClassName="w-1/3 justify-center"
+      onClick={(key) => {
+        updateFilter({has_kids: Number(key) === DEFAULT_KEY ? undefined : key})
+      }}
     />
   )
 }
diff --git a/web/components/filters/relationship-filter.tsx b/web/components/filters/relationship-filter.tsx
index cdf5a31f..cf984392 100644
--- a/web/components/filters/relationship-filter.tsx
+++ b/web/components/filters/relationship-filter.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import {RELATIONSHIP_CHOICES} from 'common/choices'
 import {FilterFields} from 'common/filters'
+import {nullifyEmpty} from 'common/util/array'
 import {MultiCheckbox} from 'web/components/multi-checkbox'
 import {useT} from 'web/lib/locale'
 import {convertRelationshipType, RelationshipType} from 'web/lib/util/convert-types'
@@ -59,7 +60,7 @@ export function RelationshipFilter(props: {
       choices={RELATIONSHIP_CHOICES as any}
       translationPrefix={'profile.relationship'}
       onChange={(c) => {
-        updateFilter({pref_relation_styles: c})
+        updateFilter({pref_relation_styles: nullifyEmpty(c)})
       }}
     />
   )
diff --git a/web/components/filters/wants-kids-filter.tsx b/web/components/filters/wants-kids-filter.tsx
index 72d57f0f..6b06425e 100644
--- a/web/components/filters/wants-kids-filter.tsx
+++ b/web/components/filters/wants-kids-filter.tsx
@@ -1,10 +1,11 @@
 import clsx from 'clsx'
 import {FilterFields} from 'common/filters'
 import {generateChoicesMap, KidLabel, wantsKidsLabels} from 'common/wants-kids'
+import {invert} from 'lodash'
 import {ReactNode} from 'react'
 import {MdNoStroller, MdOutlineStroller, MdStroller} from 'react-icons/md'
+import {DropdownOptions} from 'web/components/comments/dropdown-menu'
 import {Row} from 'web/components/layout/row'
-import {ChoicesToggleGroup} from 'web/components/widgets/choices-toggle-group'
 import {useT} from 'web/lib/locale'
 
 interface KidLabelWithIcon extends KidLabel {
@@ -15,12 +16,14 @@ interface KidsLabelsMapWithIcon {
   [key: string]: KidLabelWithIcon
 }
 
+const DEFAULT_KEY = -1
+
 export const useWantsKidsLabelsWithIcon = () => {
   const t = useT()
   return {
     no_preference: {
       ...wantsKidsLabels.no_preference,
-      name: t('filter.wants_kids.any_preference', 'Any preference'),
+      name: t('filter.wants_kids.any_preference', 'Either'),
       shortName: t('filter.wants_kids.either', 'Either'),
       icon: <MdOutlineStroller className="h-4 w-4" />,
     },
@@ -55,18 +58,22 @@ export function WantsKidsIcon(props: {strength: number; className?: string}) {
 }
 
 export function KidsLabel(props: {strength: number; highlightedClass?: string; mobile?: boolean}) {
-  const {strength, highlightedClass} = props
+  const {highlightedClass} = props
   const wantsKidsLabelsWithIcon = useWantsKidsLabelsWithIcon()
+  const t = useT()
+
+  const strength = props.strength ? Number(props.strength) : DEFAULT_KEY
 
   return (
     <Row className="items-center gap-0.5">
-      <WantsKidsIcon strength={strength} className={clsx('')} />
+      {/*<WantsKidsIcon strength={strength} className={clsx('')} />*/}
       <span
         className={clsx(
           strength != wantsKidsLabelsWithIcon.no_preference.strength && 'font-semibold',
           highlightedClass,
         )}
       >
+        {strength === DEFAULT_KEY && t('filter.label.wants_kids_strength', 'Wants Kids') + ': '}
         {strength == wantsKidsLabelsWithIcon.no_preference.strength
           ? wantsKidsLabelsWithIcon.no_preference.name
           : strength == wantsKidsLabelsWithIcon.wants_kids.strength
@@ -85,11 +92,13 @@ export function WantsKidsFilter(props: {
   const wantsKidsLabelsWithIcon = useWantsKidsLabelsWithIcon()
 
   return (
-    <ChoicesToggleGroup
-      currentChoice={filters.wants_kids_strength ?? 0}
-      choicesMap={generateChoicesMap(wantsKidsLabelsWithIcon)}
-      setChoice={(c) => updateFilter({wants_kids_strength: Number(c) >= 0 ? Number(c) : undefined})}
-      toggleClassName="w-1/3 justify-center"
+    <DropdownOptions
+      items={invert(generateChoicesMap(wantsKidsLabelsWithIcon))}
+      activeKey={String(filters.wants_kids_strength ?? DEFAULT_KEY)}
+      translationPrefix="profile.wants_kids"
+      onClick={(key) => {
+        updateFilter({wants_kids_strength: Number(key) === DEFAULT_KEY ? undefined : key})
+      }}
     />
   )
 }
diff --git a/web/components/multi-checkbox.tsx b/web/components/multi-checkbox.tsx
index 1eba4117..b63f2c49 100644
--- a/web/components/multi-checkbox.tsx
+++ b/web/components/multi-checkbox.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import {toKey} from 'common/parsing'
+import {nullifyEmpty} from 'common/util/array'
 import {useEffect, useMemo, useState} from 'react'
 import {Button} from 'web/components/buttons/button'
 import {Row} from 'web/components/layout/row'
@@ -12,7 +13,7 @@ export const MultiCheckbox = (props: {
   choices: {[key: string]: string}
   // Selected values (should match the "value" side of choices)
   selected: string[]
-  onChange: (selected: string[]) => void
+  onChange: (selected: string[] | null) => void
   className?: string
   optionsClassName?: string
   // If provided, enables adding a new option and should persist it (e.g. to DB)
@@ -146,7 +147,7 @@ export const MultiCheckbox = (props: {
               if (checked) {
                 onChange([...selected, value])
               } else {
-                onChange(selected.filter((s) => s !== value))
+                onChange(nullifyEmpty(selected.filter((s) => s !== value)))
               }
             }}
           />