diff --git a/api/resolvers/item.js b/api/resolvers/item.js
index 2ff086337..f88dda4b0 100644
--- a/api/resolvers/item.js
+++ b/api/resolvers/item.js
@@ -279,7 +279,8 @@ const subClause = (sub, num, table = 'Item', me, showNsfw) => {
   // Intentionally show nsfw posts (i.e. no nsfw clause) when viewing a specific nsfw sub
   if (sub) {
     const tables = [...new Set(['Item', table])].map(t => `"${t}".`)
-    return `(${tables.map(t => `${t}"subName" = $${num}::CITEXT`).join(' OR ')})`
+    // support multiple sub names
+    return `(${tables.map(t => `${t}"subName" = ANY($${num}::CITEXT[])`).join(' OR ')})`
   }
 
   if (!me) { return HIDE_NSFW_CLAUSE }
@@ -506,18 +507,25 @@ export default {
             orderBy: orderByClause('random', me, models, type)
           }, decodedCursor.offset, limit, ...subArr)
           break
-        default:
+        default: {
           // sub so we know the default ranking
+          let anyAuctionRanking = false
+
           if (sub) {
-            subFull = await models.sub.findUnique({ where: { name: sub } })
+            if (Array.isArray(sub)) {
+              subFull = await models.sub.findMany({ where: { name: { in: sub } } })
+              anyAuctionRanking = subFull.some(s => s.rankingType === 'AUCTION')
+            } else {
+              subFull = await models.sub.findUnique({ where: { name: sub } })
+              anyAuctionRanking = subFull.rankingType === 'AUCTION'
+            }
           }
 
-          switch (subFull?.rankingType) {
-            case 'AUCTION':
-              items = await itemQueryWithMeta({
-                me,
-                models,
-                query: `
+          if (anyAuctionRanking) {
+            items = await itemQueryWithMeta({
+              me,
+              models,
+              query: `
                   ${SELECT},
                     (boost IS NOT NULL AND boost > 0)::INT AS group_rank,
                     CASE WHEN boost IS NOT NULL AND boost > 0
@@ -535,16 +543,15 @@ export default {
                     ORDER BY group_rank DESC, rank
                   OFFSET $2
                   LIMIT $3`,
-                orderBy: 'ORDER BY group_rank DESC, rank'
-              }, decodedCursor.time, decodedCursor.offset, limit, ...subArr)
-              break
-            default:
-              if (decodedCursor.offset === 0) {
-              // get pins for the page and return those separately
-                pins = await itemQueryWithMeta({
-                  me,
-                  models,
-                  query: `
+              orderBy: 'ORDER BY group_rank DESC, rank'
+            }, decodedCursor.time, decodedCursor.offset, limit, ...subArr)
+          } else {
+            if (decodedCursor.offset === 0) {
+            // get pins for the page and return those separately
+              pins = await itemQueryWithMeta({
+                me,
+                models,
+                query: `
                   SELECT rank_filter.*
                     FROM (
                       ${SELECT}, position,
@@ -557,73 +564,73 @@ export default {
                       ${whereClause(
                         '"pinId" IS NOT NULL',
                         '"parentId" IS NULL',
-                        sub ? '"subName" = $1' : '"subName" IS NULL',
+                        sub ? '"subName" = ANY ($1::CITEXT[])' : '"subName" IS NULL',
                         muteClause(me))}
                   ) rank_filter WHERE RANK = 1
                   ORDER BY position ASC`,
-                  orderBy: 'ORDER BY position ASC'
-                }, ...subArr)
+                orderBy: 'ORDER BY position ASC'
+              }, ...subArr)
 
-                ad = await getAd(parent, { sub, subArr, showNsfw }, { me, models })
-              }
+              ad = await getAd(parent, { sub, subArr, showNsfw }, { me, models })
+            }
 
+            items = await itemQueryWithMeta({
+              me,
+              models,
+              query: `
+                  ${SELECT}, ${me ? 'GREATEST(g.tf_hot_score, l.tf_hot_score)' : 'g.tf_hot_score'} AS rank
+                  FROM "Item"
+                  LEFT JOIN "Sub" ON "Sub"."name" = "Item"."subName"
+                  ${joinZapRankPersonalView(me, models)}
+                  ${whereClause(
+                    // in home (sub undefined), filter out global pinned items since we inject them later
+                    sub ? '"Item"."pinId" IS NULL' : 'NOT ("Item"."pinId" IS NOT NULL AND "Item"."subName" IS NULL)',
+                    '"Item"."deletedAt" IS NULL',
+                    '"Item"."parentId" IS NULL',
+                    '"Item".outlawed = false',
+                    '"Item".bio = false',
+                    ad ? `"Item".id <> ${ad.id}` : '',
+                    activeOrMine(me),
+                    await filterClause(me, models, type),
+                    subClause(sub, 3, 'Item', me, showNsfw),
+                    muteClause(me))}
+                  ORDER BY rank DESC
+                  OFFSET $1
+                  LIMIT $2`,
+              orderBy: 'ORDER BY rank DESC'
+            }, decodedCursor.offset, limit, ...subArr)
+
+            // XXX this is mostly for subs that are really empty
+            if (items.length < limit) {
               items = await itemQueryWithMeta({
                 me,
                 models,
                 query: `
-                    ${SELECT}, ${me ? 'GREATEST(g.tf_hot_score, l.tf_hot_score)' : 'g.tf_hot_score'} AS rank
+                    ${SELECT}
                     FROM "Item"
                     LEFT JOIN "Sub" ON "Sub"."name" = "Item"."subName"
-                    ${joinZapRankPersonalView(me, models)}
                     ${whereClause(
+                      subClause(sub, 3, 'Item', me, showNsfw),
+                      muteClause(me),
                       // in home (sub undefined), filter out global pinned items since we inject them later
                       sub ? '"Item"."pinId" IS NULL' : 'NOT ("Item"."pinId" IS NOT NULL AND "Item"."subName" IS NULL)',
                       '"Item"."deletedAt" IS NULL',
                       '"Item"."parentId" IS NULL',
-                      '"Item".outlawed = false',
                       '"Item".bio = false',
                       ad ? `"Item".id <> ${ad.id}` : '',
                       activeOrMine(me),
-                      await filterClause(me, models, type),
-                      subClause(sub, 3, 'Item', me, showNsfw),
-                      muteClause(me))}
-                    ORDER BY rank DESC
+                      await filterClause(me, models, type))}
+                      ORDER BY ${orderByNumerator({ models, considerBoost: true })}/POWER(GREATEST(3, EXTRACT(EPOCH FROM (now_utc() - "Item".created_at))/3600), 1.3) DESC NULLS LAST,
+                        "Item".msats DESC, ("Item".cost > 0) DESC, "Item".id DESC
                     OFFSET $1
                     LIMIT $2`,
-                orderBy: 'ORDER BY rank DESC'
+                orderBy: `ORDER BY ${orderByNumerator({ models, considerBoost: true })}/POWER(GREATEST(3, EXTRACT(EPOCH FROM (now_utc() - "Item".created_at))/3600), 1.3) DESC NULLS LAST,
+                  "Item".msats DESC, ("Item".cost > 0) DESC, "Item".id DESC`
               }, decodedCursor.offset, limit, ...subArr)
-
-              // XXX this is mostly for subs that are really empty
-              if (items.length < limit) {
-                items = await itemQueryWithMeta({
-                  me,
-                  models,
-                  query: `
-                      ${SELECT}
-                      FROM "Item"
-                      LEFT JOIN "Sub" ON "Sub"."name" = "Item"."subName"
-                      ${whereClause(
-                        subClause(sub, 3, 'Item', me, showNsfw),
-                        muteClause(me),
-                        // in home (sub undefined), filter out global pinned items since we inject them later
-                        sub ? '"Item"."pinId" IS NULL' : 'NOT ("Item"."pinId" IS NOT NULL AND "Item"."subName" IS NULL)',
-                        '"Item"."deletedAt" IS NULL',
-                        '"Item"."parentId" IS NULL',
-                        '"Item".bio = false',
-                        ad ? `"Item".id <> ${ad.id}` : '',
-                        activeOrMine(me),
-                        await filterClause(me, models, type))}
-                        ORDER BY ${orderByNumerator({ models, considerBoost: true })}/POWER(GREATEST(3, EXTRACT(EPOCH FROM (now_utc() - "Item".created_at))/3600), 1.3) DESC NULLS LAST,
-                          "Item".msats DESC, ("Item".cost > 0) DESC, "Item".id DESC
-                      OFFSET $1
-                      LIMIT $2`,
-                  orderBy: `ORDER BY ${orderByNumerator({ models, considerBoost: true })}/POWER(GREATEST(3, EXTRACT(EPOCH FROM (now_utc() - "Item".created_at))/3600), 1.3) DESC NULLS LAST,
-                    "Item".msats DESC, ("Item".cost > 0) DESC, "Item".id DESC`
-                }, decodedCursor.offset, limit, ...subArr)
-              }
-              break
+            }
           }
           break
+        }
       }
       return {
         cursor: items.length === limit ? nextCursorEncoded(decodedCursor) : null,
diff --git a/api/resolvers/sub.js b/api/resolvers/sub.js
index 320670b66..181f0404e 100644
--- a/api/resolvers/sub.js
+++ b/api/resolvers/sub.js
@@ -11,7 +11,7 @@ export async function getSub (parent, { name }, { models, me }) {
 
   return await models.sub.findUnique({
     where: {
-      name
+      name: name[0]
     },
     ...(me
       ? {
diff --git a/api/typeDefs/item.js b/api/typeDefs/item.js
index 730f61830..9981416bd 100644
--- a/api/typeDefs/item.js
+++ b/api/typeDefs/item.js
@@ -2,7 +2,7 @@ import { gql } from 'graphql-tag'
 
 export default gql`
   extend type Query {
-    items(sub: String, sort: String, type: String, cursor: String, name: String, when: String, from: String, to: String, by: String, limit: Limit): Items
+    items(sub: [String], sort: String, type: String, cursor: String, name: String, when: String, from: String, to: String, by: String, limit: Limit): Items
     item(id: ID!): Item
     pageTitleAndUnshorted(url: String!): TitleUnshorted
     dupes(url: String!): [Item!]
diff --git a/api/typeDefs/sub.js b/api/typeDefs/sub.js
index 8401f1854..0a4d999ae 100644
--- a/api/typeDefs/sub.js
+++ b/api/typeDefs/sub.js
@@ -2,7 +2,7 @@ import { gql } from 'graphql-tag'
 
 export default gql`
   extend type Query {
-    sub(name: String): Sub
+    sub(name: [String]): Sub
     subLatestPost(name: String!): String
     subs: [Sub!]!
     topSubs(cursor: String, when: String, from: String, to: String, by: String, limit: Limit): Subs
diff --git a/components/form.js b/components/form.js
index c429ab7c9..120281d05 100644
--- a/components/form.js
+++ b/components/form.js
@@ -950,7 +950,7 @@ export function Select ({ label, items, info, groupClassName, onChange, noForm,
             if (item && typeof item === 'object') {
               return (
                 <optgroup key={item.label} label={item.label}>
-                  {item.items.map(item => <option key={item}>{item}</option>)}
+                  {item.items?.map(item => <option key={item}>{item}</option>)}
                 </optgroup>
               )
             } else {
@@ -971,6 +971,126 @@ export function Select ({ label, items, info, groupClassName, onChange, noForm,
   )
 }
 
+// TODO: Remove clutter like handles
+// TODO: Better CSS
+// WIP: Handles are defined like this to have a better reading during development
+export function MultiSelect ({ label, items, info, groupClassName, onChange, noForm, overrideValue, hint, defaultValue = 'select', ...props }) {
+  const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
+  const formik = noForm ? null : useFormikContext()
+  const invalid = meta.touched && meta.error
+  const [selectedItems, setSelectedItems] = useState(() => field.value || [])
+
+  const shouldUpdateFromOverride = useMemo(() => {
+    return overrideValue && JSON.stringify(overrideValue) !== JSON.stringify(selectedItems)
+  }, [overrideValue, selectedItems])
+
+  useEffect(() => {
+    if (shouldUpdateFromOverride) {
+      !noForm && helpers.setValue(overrideValue)
+      setSelectedItems(overrideValue)
+    }
+  }, [shouldUpdateFromOverride, overrideValue, noForm, helpers])
+
+  const handleItemSelect = useCallback((item) => {
+    if (!selectedItems.includes(item)) {
+      const newSelectedItems = [...selectedItems, item]
+      onChange && onChange(formik, { target: { value: newSelectedItems } })
+      !noForm && setSelectedItems(newSelectedItems)
+      !noForm && helpers.setValue(newSelectedItems)
+    }
+  }, [selectedItems, noForm, helpers, onChange, formik])
+
+  const handleItemRemove = useCallback((item) => {
+    const newSelectedItems = selectedItems.filter((i) => i !== item)
+    onChange && onChange(formik, { target: { value: newSelectedItems } })
+    !noForm && setSelectedItems(newSelectedItems)
+    !noForm && helpers.setValue(newSelectedItems)
+  }, [selectedItems, noForm, helpers, onChange, formik])
+
+  const handleClearAll = useCallback(() => {
+    onChange && onChange(formik, { target: { value: [] } })
+    setSelectedItems([])
+    !noForm && helpers.setValue([])
+  }, [noForm, helpers, onChange, formik])
+
+  return (
+    <FormGroup label={label} className={groupClassName}>
+      <div className='my-1'>
+        <div className={`p-2 ${styles.multiSelectContainer} ${invalid ? 'border-danger' : ''}`}>
+          <div className={`${styles.multiSelectTags} flex-wrap`}>
+            {selectedItems && selectedItems.length > 0
+              ? selectedItems.map((item) => (
+                <span key={item} className={`${styles.multiSelectItem}`}>
+                  {item}
+                  <button
+                    type='button'
+                    className={`${styles.multiSelectRemoveButton}`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleItemRemove(item)
+                    }}
+                  >
+                    <CloseIcon className={styles.multiSelectRemoveIcon} />
+                  </button>
+                </span>
+              ))
+              : (
+                <span className='text-muted'>{defaultValue}</span>
+                )}
+          </div>
+          <div className={styles.multiSelectActionContainer}>
+            {selectedItems && selectedItems.length > 0 && (
+              <span
+                className={`d-flex align-items-center justify-content-end pointer ${styles.multiSelectRemoveAll}`}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleClearAll()
+                }}
+              >
+                <CloseIcon className={styles.multiSelectRemoveAllIcon} />
+              </span>)}
+            <Dropdown className='pointer' as='div'>
+              <Dropdown.Toggle
+                as='span'
+                onPointerDown={e => e.preventDefault()}
+              >
+                <AddIcon className={styles.multiSelectAddIcon} />
+              </Dropdown.Toggle>
+              <Dropdown.Menu style={{ maxHeight: '15rem', overflowY: 'auto' }}>
+                {items.map(item => {
+                  if (item && typeof item === 'object') {
+                    return null
+                  } else {
+                    const isSelected = selectedItems && selectedItems.includes(item)
+                    return (
+                      <Dropdown.Item
+                        key={item}
+                        onClick={() => handleItemSelect(item)}
+                        className='d-flex flex-row justify-content-between'
+                        active={isSelected}
+                        disabled={isSelected}
+                      >
+                        {item}
+                      </Dropdown.Item>
+                    )
+                  }
+                })}
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        </div>
+      </div>
+      <BootstrapForm.Control.Feedback type='invalid'>
+        {meta.touched && meta.error}
+      </BootstrapForm.Control.Feedback>
+      {hint &&
+        <BootstrapForm.Text>
+          {hint}
+        </BootstrapForm.Text>}
+    </FormGroup>
+  )
+}
+
 function DatePickerSkeleton () {
   return (
     <div className='react-datepicker-wrapper'>
diff --git a/components/form.module.css b/components/form.module.css
index 5d3f8f53d..0c958f625 100644
--- a/components/form.module.css
+++ b/components/form.module.css
@@ -69,6 +69,134 @@ textarea.passwordInput {
     animation-direction: alternate;
 }
 
+.multiSelectContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--theme-clickToContextColor);
+    border: none;
+    border-radius: 0.4rem;
+    font-weight: 700;
+    font-size: 0.7875rem;
+    color: var(--theme-dropdownItemColor);
+    padding-left: 0.4rem;
+    padding-right: 0;
+}
+
+.multiSelectTags {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    max-width: 100%;
+    transition: max-height 0.3s ease;
+    flex-wrap: nowrap;
+}
+
+.multiSelectTagsWrapped {
+    flex-wrap: wrap;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+.multiSelectMoreIndicator {
+    display: flex;
+    align-items: center;
+    background-color: var(--theme-clickToContextColor);
+    border: none;
+    border-radius: 0.4rem;
+    font-weight: 700;
+    font-size: 0.7875rem;
+    color: var(--theme-dropdownItemColor);
+    padding: 0.2rem 0.4rem;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.multiSelectMoreIndicator:hover {
+    background-color: var(--theme-clickToContextColor);
+    opacity: 0.8;
+}
+
+.multiSelectItem {
+    display: flex;
+    align-items: center;
+    background-color: var(--theme-clickToContextColor);
+    border: none;
+    border-radius: 0.4rem;
+    font-weight: 700;
+    font-size: 0.7875rem;
+    color: var(--theme-dropdownItemColor);
+    padding-left: 0.4rem;
+    padding-right: 0;
+    white-space: nowrap;
+}
+  
+.multiSelectRemoveButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #00000000;
+    border: none;
+    padding: 0;
+    border-top-right-radius: 0.4rem;
+    border-bottom-right-radius: 0.4rem;
+    width: 1.3rem;
+    height: 1.5rem;
+    margin-left: 0.2rem;
+}
+
+.multiSelectRemoveButton:hover {
+    background-color: var(--theme-clickToContextColor) !important;
+}
+  
+.multiSelectRemoveIcon {
+    fill: var(--theme-clickToContextColor);
+    width: 1rem;
+    height: 1rem;
+}
+  
+.multiSelectRemoveButton:hover .multiSelectRemoveIcon {
+    fill: var(--theme-dropdownItemColor) !important;
+    width: 1rem;
+    height: 1rem;
+}
+
+.multiSelectActionContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.multiSelectRemoveAll {
+    border: none;
+    border-radius: 0.2rem;
+    height: 1.3rem;
+    width: 1.3rem;
+    padding: 0;
+}
+
+.multiSelectRemoveAllIcon {
+    fill: var(--theme-clickToContextColor);
+    width: 1.3rem;
+    height: 1.3rem;
+}
+
+.multiSelectRemoveAllIcon:hover {
+    fill: #c03221 !important;
+}
+
+.multiSelectAddIcon {
+    width: 1.3rem;
+    height: 1.3rem;
+    margin-bottom: 0.1rem;
+    fill: var(--theme-clickToContextColor) !important;
+}
+
+.multiSelectAddIcon:hover {
+    fill: var(--theme-dropdownItemColor) !important;
+}
+
 @keyframes pulse {
 	0% {
 		opacity: 42%;
diff --git a/components/nav/common.js b/components/nav/common.js
index 7f0fc32fd..e6ae8a502 100644
--- a/components/nav/common.js
+++ b/components/nav/common.js
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import BackArrow from '../../svgs/arrow-left-line.svg'
 import { useCallback, useEffect, useState } from 'react'
 import Price from '../price'
-import SubSelect from '../sub-select'
+import SubSelect, { MultiSubSelect } from '../sub-select'
 import { USER_ID } from '../../lib/constants'
 import Head from 'next/head'
 import NoteIcon from '../../svgs/notification-4-fill.svg'
@@ -116,6 +116,14 @@ export function NavSelect ({ sub: subName, className, size }) {
   )
 }
 
+export function MultiNavSelect ({ subs, className, size }) {
+  return (
+    <Nav.Item className={className}>
+      <MultiSubSelect sub={subs} noForm groupClassName='mb-0' size={size} />
+    </Nav.Item>
+  )
+}
+
 export function NavNotifications ({ className }) {
   const hasNewNotes = useHasNewNotes()
 
diff --git a/components/nav/desktop/second-bar.js b/components/nav/desktop/second-bar.js
index 4120c3065..b0bc8c655 100644
--- a/components/nav/desktop/second-bar.js
+++ b/components/nav/desktop/second-bar.js
@@ -1,20 +1,32 @@
 import { Nav, Navbar } from 'react-bootstrap'
-import { NavSelect, PostItem, Sorts, hasNavSelect } from '../common'
+import { NavSelect, PostItem, Sorts, hasNavSelect, MultiNavSelect } from '../common'
 import styles from '../../header.module.css'
+import { useState, useEffect } from 'react'
+import AddIcon from '@/svgs/add-fill.svg'
 
 export default function SecondBar (props) {
   const { prefix, topNavKey, sub } = props
+  const [showMultiSelect, setShowMultiSelect] = useState(false)
+
+  useEffect(() => {
+    if (!sub) {
+      setShowMultiSelect(false)
+    }
+  }, [sub])
+
   if (!hasNavSelect(props)) return null
   return (
-    <Navbar className='pt-0 pb-2'>
+    <Navbar className='pt-0 pb-2 d-flex flex-column align-items-start'>
       <Nav
         className={styles.navbarNav}
         activeKey={topNavKey}
       >
         <NavSelect sub={sub} size='medium' className='me-1' />
+        {sub && <span className='ms-1 pointer' onClick={() => setShowMultiSelect(!showMultiSelect)}><AddIcon /></span>}
         <div className='ms-2 d-flex'><Sorts {...props} className='ms-1' /></div>
         <PostItem className='ms-auto me-0 d-none d-md-flex' prefix={prefix} />
       </Nav>
+      {showMultiSelect && <MultiNavSelect subs={sub} size='large' className='me-1 w-100' />}
     </Navbar>
   )
 }
diff --git a/components/nav/mobile/second-bar.js b/components/nav/mobile/second-bar.js
index 25ac2def2..d82f94298 100644
--- a/components/nav/mobile/second-bar.js
+++ b/components/nav/mobile/second-bar.js
@@ -1,14 +1,15 @@
 import { Nav, Navbar } from 'react-bootstrap'
-import { NavPrice, NavWalletSummary, Sorts, hasNavSelect } from '../common'
+import { NavPrice, NavWalletSummary, Sorts, hasNavSelect, MultiNavSelect } from '../common'
 import styles from '../../header.module.css'
 import { useMe } from '@/components/me'
 
 export default function SecondBar (props) {
   const { me } = useMe()
-  const { topNavKey } = props
+  const { topNavKey, sub } = props
+  const isMultiSub = sub && Array.isArray(sub) ? sub.length > 1 : false
   if (!hasNavSelect(props)) return null
   return (
-    <Navbar>
+    <Navbar className='d-flex flex-column align-items-start'>
       <Nav
         className={styles.navbarNav}
         activeKey={topNavKey}
@@ -16,6 +17,7 @@ export default function SecondBar (props) {
         <Sorts {...props} />
         {me ? <NavWalletSummary className='ms-auto px-2' /> : <NavPrice className='justify-content-end' />}
       </Nav>
+      {isMultiSub && hasNavSelect(props) && <MultiNavSelect subs={sub} size='large' className='me-1' />}
     </Navbar>
   )
 }
diff --git a/components/sub-select.js b/components/sub-select.js
index 5f7bcdea5..b80fd5443 100644
--- a/components/sub-select.js
+++ b/components/sub-select.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Select } from './form'
+import { Select, MultiSelect } from './form'
 import { EXTRA_LONG_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { SUBS } from '@/fragments/subs'
 import { useQuery } from '@apollo/client'
@@ -123,3 +123,89 @@ export default function SubSelect ({ prependSubs, sub, onChange, size, appendSub
     />
   )
 }
+
+function appendSubWithPlus (newSub) {
+  return newSub.length > 1 ? newSub.join('+') : newSub
+}
+
+// TODO: this is a copy of SubSelect with some changes to handle multiple territories
+//       mainly to test the new MultiSelect component
+export function MultiSubSelect ({ prependSubs, sub, onChange, size, appendSubs, filterSubs, className, ...props }) {
+  const router = useRouter()
+  const subs = useSubs({ prependSubs, sub, filterSubs, appendSubs })
+  const valueProps = props.noForm
+    ? {
+        overrideValue: Array.isArray(sub)
+          ? sub.filter(s => s !== 'home')
+          : (sub !== 'home' ? [sub] : [])
+      }
+    : {
+        value: Array.isArray(sub)
+          ? sub.filter(s => s !== 'home')
+          : (sub !== 'home' ? [sub] : [])
+      }
+
+  // If logged out user directly visits a nsfw sub, subs will not contain `sub`, so manually add it
+  // to display the correct sub name in the sub selector
+  const subItems = !sub || subs.find((s) => s === sub) ? subs : [sub].concat(subs)
+
+  return (
+    <MultiSelect
+      onChange={onChange || ((_, e) => {
+        console.log('e', e)
+        const value = e.target.value || []
+        const sub = ['home', 'pick territory'].includes(value) || value.length === 0 ? undefined : value
+        if (sub === 'create') {
+          router.push('/territory')
+          return
+        }
+
+        let asPath
+        // are we currently in a sub (ie not home)
+        if (router.query.sub) {
+          // are we going to a sub or home?
+          const subReplace = sub ? `/~${sub}` : ''
+
+          console.log('router.query.sub', router.query.sub)
+          console.log('sub', sub)
+
+          // if we are going to a sub, replace the current sub with the new one
+          asPath = router.asPath.replace(`/~${Array.isArray(router.query.sub) ? router.query.sub.join('+') : router.query.sub}`, sub ? `/~${appendSubWithPlus(sub)}` : subReplace)
+          console.log('asPath', asPath)
+          // if we're going to home, just go there directly
+          if (asPath === '') {
+            router.push('/')
+            return
+          }
+        } else {
+          // we're currently on the home sub
+          // are we in a sub aware route?
+          if (router.pathname.startsWith('/~')) {
+            // if we are, go to the same path but in the sub
+            asPath = `/~${sub}` + router.asPath
+          } else {
+            // otherwise, just go to the sub
+            router.push(sub ? `/~${sub}` : '/')
+            return
+          }
+        }
+        const query = {
+          ...router.query,
+          sub
+        }
+        delete query.nodata
+        router.push({
+          pathname: router.pathname,
+          query
+        }, asPath)
+      })}
+      name='sub'
+      size='sm'
+      defaultValue='home'
+      {...valueProps}
+      {...props}
+      className={`${className} ${styles.subSelect} ${size === 'large' ? styles.subSelectLarge : size === 'medium' ? styles.subSelectMedium : ''}`}
+      items={subItems}
+    />
+  )
+}
diff --git a/fragments/subs.js b/fragments/subs.js
index 1ff2c492e..b9ad79df0 100644
--- a/fragments/subs.js
+++ b/fragments/subs.js
@@ -51,7 +51,7 @@ export const SUB_FULL_FIELDS = gql`
 export const SUB = gql`
   ${SUB_FIELDS}
 
-  query Sub($sub: String) {
+  query Sub($sub: [String]) {
     sub(name: $sub) {
       ...SubFields
     }
@@ -60,7 +60,7 @@ export const SUB = gql`
 export const SUB_FULL = gql`
   ${SUB_FULL_FIELDS}
 
-  query Sub($sub: String) {
+  query Sub($sub: [String]) {
     sub(name: $sub) {
       ...SubFullFields
     }
@@ -80,7 +80,7 @@ export const SUB_ITEMS = gql`
   ${ITEM_FIELDS}
   ${COMMENTS_ITEM_EXT_FIELDS}
 
-  query SubItems($sub: String, $sort: String, $cursor: String, $type: String, $name: String, $when: String, $from: String, $to: String, $by: String, $limit: Limit, $includeComments: Boolean = false) {
+  query SubItems($sub: [String], $sort: String, $cursor: String, $type: String, $name: String, $when: String, $from: String, $to: String, $by: String, $limit: Limit, $includeComments: Boolean = false) {
     sub(name: $sub) {
       ...SubFullFields
     }
diff --git a/pages/~/index.js b/pages/~/index.js
index b2b5162b4..059809d03 100644
--- a/pages/~/index.js
+++ b/pages/~/index.js
@@ -8,22 +8,38 @@ import { useQuery } from '@apollo/client'
 import PageLoading from '@/components/page-loading'
 import TerritoryHeader from '@/components/territory-header'
 
+export const multiOrSingleSub = (sub) => {
+  return sub && !sub?.includes('+')
+    ? sub
+    : sub
+      ? [...new Set(sub.split('+'))]
+      : null
+}
+
 export const getServerSideProps = getGetServerSideProps({
   query: SUB_ITEMS,
+  variables: (query) => ({
+    ...query,
+    sub: multiOrSingleSub(query.sub)
+  }),
   notFound: (data, vars) => vars.sub && !data.sub
 })
 
 export default function Sub ({ ssrData }) {
   const router = useRouter()
-  const variables = { ...router.query }
+  const variables = {
+    ...router.query,
+    sub: multiOrSingleSub(router.query.sub)
+  }
+  console.log('variables', variables)
   const { data } = useQuery(SUB_FULL, { variables })
 
   if (!data && !ssrData) return <PageLoading />
   const { sub } = data || ssrData
 
   return (
-    <Layout sub={sub?.name}>
-      {sub
+    <Layout sub={multiOrSingleSub(router.query.sub)}>
+      {Array.isArray(sub) && sub.length === 1
         ? <TerritoryHeader sub={sub} />
         : (
           <>