diff --git a/web/components/filters/desktop-filters.tsx b/web/components/filters/desktop-filters.tsx
index 8bb7405..5830cb5 100644
--- a/web/components/filters/desktop-filters.tsx
+++ b/web/components/filters/desktop-filters.tsx
@@ -14,6 +14,11 @@ import {MyMatchesToggle} from './my-matches-toggle'
 import {Profile} from 'common/love/profile'
 import {FilterFields} from "common/filters";
 import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
+import {PrefGenderFilter, PrefGenderFilterText} from "web/components/filters/pref-gender-filter";
+import DropdownMenu from "web/components/comments/dropdown-menu";
+import {KidsLabel, wantsKidsLabelsWithIcon} from "web/components/filters/wants-kids-filter";
+import {hasKidsLabels} from "common/has-kids";
+import {HasKidsLabel} from "web/components/filters/has-kids-filter";
 
 export function DesktopFilters(props: {
   filters: Partial<FilterFields>
@@ -92,6 +97,7 @@ export function DesktopFilters(props: {
         popoverClassName="bg-canvas-50"
         menuWidth="w-80"
       />
+
       {/* AGE RANGE */}
       <CustomizeableDropdown
         buttonContent={(open: boolean) => (
@@ -114,6 +120,7 @@ export function DesktopFilters(props: {
         popoverClassName="bg-canvas-50"
         menuWidth="w-80"
       />
+
       {/* GENDER */}
       <CustomizeableDropdown
         buttonContent={(open: boolean) => (
@@ -134,120 +141,125 @@ export function DesktopFilters(props: {
         }
         popoverClassName="bg-canvas-50"
       />
+
+      {/* PREFERRED GENDER */}
+      <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"
+      />
+
+      {/* 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: hasKidsLabels.no_preference.name,
+            onClick: () => {
+              updateFilter({has_kids: hasKidsLabels.no_preference.value})
+            },
+          },
+          {
+            name: hasKidsLabels.doesnt_have_kids.name,
+            onClick: () => {
+              updateFilter({has_kids: hasKidsLabels.doesnt_have_kids.value})
+            },
+          },
+          {
+            name: 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"
+      />
+
       {/* Short Bios */}
       <ShortBioToggle
         updateFilter={updateFilter}
         filters={filters}
         hidden={false}
       />
-      {/* PREFERRED GENDER */}
-      {/*<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"*/}
-      {/*/>*/}
-      {/* WANTS KIDS */}
-      {/*<DropdownMenu*/}
-      {/*  items={[*/}
-      {/*    {*/}
-      {/*      name: wantsKidsLabels.no_preference.name,*/}
-      {/*      icon: wantsKidsLabels.no_preference.icon,*/}
-      {/*      onClick: () => {*/}
-      {/*        updateFilter({*/}
-      {/*          wants_kids_strength: wantsKidsLabels.no_preference.strength,*/}
-      {/*        })*/}
-      {/*      },*/}
-      {/*    },*/}
-      {/*    {*/}
-      {/*      name: wantsKidsLabels.wants_kids.name,*/}
-      {/*      icon: wantsKidsLabels.wants_kids.icon,*/}
-      {/*      onClick: () => {*/}
-      {/*        updateFilter({*/}
-      {/*          wants_kids_strength: wantsKidsLabels.wants_kids.strength,*/}
-      {/*        })*/}
-      {/*      },*/}
-      {/*    },*/}
-      {/*    {*/}
-      {/*      name: wantsKidsLabels.doesnt_want_kids.name,*/}
-      {/*      icon: wantsKidsLabels.doesnt_want_kids.icon,*/}
-      {/*      onClick: () => {*/}
-      {/*        updateFilter({*/}
-      {/*          wants_kids_strength: wantsKidsLabels.doesnt_want_kids.strength,*/}
-      {/*        })*/}
-      {/*      },*/}
-      {/*    },*/}
-      {/*  ]}*/}
-      {/*  closeOnClick*/}
-      {/*  buttonClass={'!text-ink-600 !hover:!text-ink-600'}*/}
-      {/*  buttonContent={(open: boolean) => (*/}
-      {/*    <DropdownButton*/}
-      {/*      content={*/}
-      {/*        <KidsLabel*/}
-      {/*          strength={*/}
-      {/*            filters.wants_kids_strength ??*/}
-      {/*            wantsKidsLabels.no_preference.strength*/}
-      {/*          }*/}
-      {/*          highlightedClass={open ? 'text-primary-500' : ''}*/}
-      {/*        />*/}
-      {/*      }*/}
-      {/*      open={open}*/}
-      {/*    />*/}
-      {/*  )}*/}
-      {/*  menuItemsClass={'bg-canvas-50'}*/}
-      {/*  menuWidth="w-48"*/}
-      {/*/>*/}
-      {/* HAS KIDS */}
-      {/*<DropdownMenu*/}
-      {/*  items={[*/}
-      {/*    {*/}
-      {/*      name: hasKidsLabels.no_preference.name,*/}
-      {/*      onClick: () => {*/}
-      {/*        updateFilter({ has_kids: hasKidsLabels.no_preference.value })*/}
-      {/*      },*/}
-      {/*    },*/}
-      {/*    {*/}
-      {/*      name: hasKidsLabels.doesnt_have_kids.name,*/}
-      {/*      onClick: () => {*/}
-      {/*        updateFilter({ has_kids: hasKidsLabels.doesnt_have_kids.value })*/}
-      {/*      },*/}
-      {/*    },*/}
-      {/*    {*/}
-      {/*      name: 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"*/}
-      {/*/>*/}
+
       <button
         className="text-ink-900 hover:text-primary-500 underline"
         onClick={clearFilters}
diff --git a/web/components/filters/mobile-filters.tsx b/web/components/filters/mobile-filters.tsx
index d895d75..9a3a44c 100644
--- a/web/components/filters/mobile-filters.tsx
+++ b/web/components/filters/mobile-filters.tsx
@@ -13,8 +13,14 @@ import {Gender} from 'common/gender'
 import {RelationshipType} from 'web/lib/util/convert-relationship-type'
 import {FilterFields} from "common/filters";
 import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
+import {PrefGenderFilter, PrefGenderFilterText} from "./pref-gender-filter"
+import {KidsLabel, WantsKidsFilter, WantsKidsIcon} from "web/components/filters/wants-kids-filter";
+import {wantsKidsLabels} from "common/wants-kids";
+import {FaChild} from "react-icons/fa"
+import {HasKidsFilter, HasKidsLabel} from "./has-kids-filter"
+import {hasKidsLabels} from "common/has-kids";
 
-export function MobileFilters(props: {
+function MobileFilters(props: {
   filters: Partial<FilterFields>
   youProfile: Profile | undefined | null
   updateFilter: (newState: Partial<FilterFields>) => void
@@ -133,8 +139,74 @@ export function MobileFilters(props: {
       >
         <GenderFilter filters={filters} updateFilter={updateFilter}/>
       </MobileFilterSection>
-      {/* Short Bios */}
 
+      {/* PREFERRED GENDER */}
+      <MobileFilterSection
+        title="Interested in"
+        openFilter={openFilter}
+        setOpenFilter={setOpenFilter}
+        isActive={hasAny(filters.pref_gender)}
+        selection={
+          <PrefGenderFilterText
+            pref_gender={filters.pref_gender as Gender[]}
+            highlightedClass={
+              hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'
+            }
+          />
+        }
+      >
+        <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
+      </MobileFilterSection>
+
+      {/* WANTS KIDS */}
+      <MobileFilterSection
+        title="Wants kids"
+        openFilter={openFilter}
+        setOpenFilter={setOpenFilter}
+        isActive={
+          filters.wants_kids_strength != null &&
+          filters.wants_kids_strength !== -1
+        }
+        icon={<WantsKidsIcon strength={filters.wants_kids_strength ?? -1}/>}
+        selection={
+          <KidsLabel
+            strength={filters.wants_kids_strength ?? -1}
+            highlightedClass={
+              (filters.wants_kids_strength ?? -1) ==
+              wantsKidsLabels.no_preference.strength
+                ? 'text-ink-900'
+                : 'text-primary-600'
+            }
+            mobile
+          />
+        }
+      >
+        <WantsKidsFilter filters={filters} updateFilter={updateFilter}/>
+      </MobileFilterSection>
+
+      {/* HAS KIDS */}
+      <MobileFilterSection
+        title="Has kids"
+        openFilter={openFilter}
+        setOpenFilter={setOpenFilter}
+        isActive={filters.has_kids != null && filters.has_kids !== -1}
+        icon={<FaChild className="text-ink-900 h-4 w-4"/>}
+        selection={
+          <HasKidsLabel
+            has_kids={filters.has_kids ?? -1}
+            highlightedClass={
+              (filters.has_kids ?? -1) == hasKidsLabels.no_preference.value
+                ? 'text-ink-900'
+                : 'text-primary-600'
+            }
+            mobile
+          />
+        }
+      >
+        <HasKidsFilter filters={filters} updateFilter={updateFilter}/>
+      </MobileFilterSection>
+
+      {/* Short Bios */}
       <Col className="p-4 pb-2">
         <ShortBioToggle
           updateFilter={updateFilter}
@@ -142,69 +214,6 @@ export function MobileFilters(props: {
           hidden={false}
         />
       </Col>
-      {/* PREFERRED GENDER */}
-      {/*<MobileFilterSection*/}
-      {/*  title="Interested in"*/}
-      {/*  openFilter={openFilter}*/}
-      {/*  setOpenFilter={setOpenFilter}*/}
-      {/*  isActive={hasAny(filters.pref_gender)}*/}
-      {/*  selection={*/}
-      {/*    <PrefGenderFilterText*/}
-      {/*      pref_gender={filters.pref_gender as Gender[]}*/}
-      {/*      highlightedClass={*/}
-      {/*        hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'*/}
-      {/*      }*/}
-      {/*    />*/}
-      {/*  }*/}
-      {/*>*/}
-      {/*  <PrefGenderFilter filters={filters} updateFilter={updateFilter} />*/}
-      {/*</MobileFilterSection>*/}
-      {/* WANTS KIDS */}
-      {/*<MobileFilterSection*/}
-      {/*  title="Wants kids"*/}
-      {/*  openFilter={openFilter}*/}
-      {/*  setOpenFilter={setOpenFilter}*/}
-      {/*  isActive={*/}
-      {/*    filters.wants_kids_strength != null &&*/}
-      {/*    filters.wants_kids_strength !== -1*/}
-      {/*  }*/}
-      {/*  icon={<WantsKidsIcon strength={filters.wants_kids_strength ?? -1} />}*/}
-      {/*  selection={*/}
-      {/*    <KidsLabel*/}
-      {/*      strength={filters.wants_kids_strength ?? -1}*/}
-      {/*      highlightedClass={*/}
-      {/*        (filters.wants_kids_strength ?? -1) ==*/}
-      {/*        wantsKidsLabels.no_preference.strength*/}
-      {/*          ? 'text-ink-900'*/}
-      {/*          : 'text-primary-600'*/}
-      {/*      }*/}
-      {/*      mobile*/}
-      {/*    />*/}
-      {/*  }*/}
-      {/*>*/}
-      {/*  <WantsKidsFilter filters={filters} updateFilter={updateFilter} />*/}
-      {/*</MobileFilterSection>*/}
-      {/* HAS KIDS */}
-      {/*<MobileFilterSection*/}
-      {/*  title="Has kids"*/}
-      {/*  openFilter={openFilter}*/}
-      {/*  setOpenFilter={setOpenFilter}*/}
-      {/*  isActive={filters.has_kids != null && filters.has_kids !== -1}*/}
-      {/*  icon={<FaChild className="text-ink-900 h-4 w-4" />}*/}
-      {/*  selection={*/}
-      {/*    <HasKidsLabel*/}
-      {/*      has_kids={filters.has_kids ?? -1}*/}
-      {/*      highlightedClass={*/}
-      {/*        (filters.has_kids ?? -1) == hasKidsLabels.no_preference.value*/}
-      {/*          ? 'text-ink-900'*/}
-      {/*          : 'text-primary-600'*/}
-      {/*      }*/}
-      {/*      mobile*/}
-      {/*    />*/}
-      {/*  }*/}
-      {/*>*/}
-      {/*  <HasKidsFilter filters={filters} updateFilter={updateFilter} />*/}
-      {/*</MobileFilterSection>*/}
       <button
         className="text-ink-500 hover:text-primary-500 underline"
         onClick={clearFilters}
@@ -215,6 +224,8 @@ export function MobileFilters(props: {
   )
 }
 
+export default MobileFilters
+
 export function MobileFilterSection(props: {
   title: string
   children: ReactNode