diff --git a/components/CharacterSearchFilterBar/index.scss b/components/CharacterSearchFilterBar/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/CharacterSearchFilterBar/index.tsx b/components/CharacterSearchFilterBar/index.tsx
new file mode 100644
index 00000000..df451ec5
--- /dev/null
+++ b/components/CharacterSearchFilterBar/index.tsx
@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import SearchFilter from '~components/SearchFilter'
+import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+
+import './index.scss'
+import { emptyElementState, emptyProficiencyState, emptyRarityState } from '~utils/emptyStates'
+import { elements, proficiencies, rarities } from '~utils/stateValues'
+
+interface Props {
+    sendFilters: (filters: { [key: string]: number[] }) => void
+}
+
+const CharacterSearchFilterBar = (props: Props) => {
+    const { t } = useTranslation('common')
+
+    const [rarityMenu, setRarityMenu] = useState(false)
+    const [elementMenu, setElementMenu] = useState(false)
+    const [proficiency1Menu, setProficiency1Menu] = useState(false)
+    const [proficiency2Menu, setProficiency2Menu] = useState(false)
+
+    const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
+    const [elementState, setElementState] = useState<ElementState>(emptyElementState)
+    const [proficiency1State, setProficiency1State] = useState<ProficiencyState>(emptyProficiencyState)
+    const [proficiency2State, setProficiency2State] = useState<ProficiencyState>(emptyProficiencyState)
+
+    function rarityMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(true)
+            setElementMenu(false)
+            setProficiency1Menu(false)
+            setProficiency2Menu(false)
+        } else setRarityMenu(false)
+    }
+
+    function elementMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(true)
+            setProficiency1Menu(false)
+            setProficiency2Menu(false)
+        } else setElementMenu(false)
+    }
+
+    function proficiency1MenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(false)
+            setProficiency1Menu(true)
+            setProficiency2Menu(false)
+        } else setProficiency1Menu(false)
+    }
+
+    function proficiency2MenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(false)
+            setProficiency1Menu(false)
+            setProficiency2Menu(true)
+        } else setProficiency2Menu(false)
+    }
+
+    function handleRarityChange(checked: boolean, key: string) {
+        let newRarityState = cloneDeep(rarityState)
+        newRarityState[key].checked = checked
+        setRarityState(newRarityState)
+    }
+
+    function handleElementChange(checked: boolean, key: string) {
+        let newElementState = cloneDeep(elementState)
+        newElementState[key].checked = checked
+        setElementState(newElementState)
+    }
+
+    function handleProficiency1Change(checked: boolean, key: string) {
+        let newProficiencyState = cloneDeep(proficiency1State)
+        newProficiencyState[key].checked = checked
+        setProficiency1State(newProficiencyState)
+    }
+
+    function handleProficiency2Change(checked: boolean, key: string) {
+        let newProficiencyState = cloneDeep(proficiency2State)
+        newProficiencyState[key].checked = checked
+        setProficiency2State(newProficiencyState)
+    }
+
+    function sendFilters() {
+        const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedProficiency1Filters = Object.values(proficiency1State).filter(x => x.checked).map((x, i) => x.id)
+        const checkedProficiency2Filters = Object.values(proficiency2State).filter(x => x.checked).map((x, i) => x.id)
+
+        const filters = {
+            rarity: checkedRarityFilters,
+            element: checkedElementFilters,
+            proficiency1: checkedProficiency1Filters,
+            proficiency2: checkedProficiency2Filters
+        }
+
+        props.sendFilters(filters)
+    }
+
+    useEffect(() => {
+        sendFilters()
+    }, [rarityState, elementState, proficiency1State, proficiency2State])
+
+    function renderProficiencyFilter(proficiency: 1 | 2) {
+        const onCheckedChange = (proficiency == 1) ? handleProficiency1Change : handleProficiency2Change
+        const numSelected = (proficiency == 1) 
+            ? Object.values(proficiency1State).map(x => x.checked).filter(Boolean).length 
+            : Object.values(proficiency2State).map(x => x.checked).filter(Boolean).length 
+        const open = (proficiency == 1) ? proficiency1Menu : proficiency2Menu
+        const onOpenChange = (proficiency == 1) ? proficiency1MenuOpened : proficiency2MenuOpened
+        
+        return (
+            <SearchFilter 
+                label={`${t('filters.labels.proficiency')} ${proficiency}`} 
+                numSelected={numSelected} 
+                open={open} 
+                onOpenChange={onOpenChange}>
+                    <DropdownMenu.Label className="Label">{`${t('filters.labels.proficiency')} ${proficiency}`}</DropdownMenu.Label>
+                    <section>
+                        <DropdownMenu.Group className="Group">
+                            { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+                                const checked = (proficiency == 1) 
+                                    ? proficiency1State[proficiencies[i]].checked 
+                                    : proficiency2State[proficiencies[i]].checked
+
+                                return (
+                                    <SearchFilterCheckboxItem 
+                                        key={proficiencies[i]}
+                                        onCheckedChange={onCheckedChange} 
+                                        checked={checked}
+                                        valueKey={proficiencies[i]}>
+                                            {t(`proficiencies.${proficiencies[i]}`)}
+                                    </SearchFilterCheckboxItem>
+                                )}
+                            ) }
+                        </DropdownMenu.Group>
+                        <DropdownMenu.Group className="Group">
+                            { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+                                const checked = (proficiency == 1) 
+                                    ? proficiency1State[proficiencies[i + (proficiencies.length / 2)]].checked 
+                                    : proficiency2State[proficiencies[i + (proficiencies.length / 2)]].checked
+
+                                return (
+                                    <SearchFilterCheckboxItem 
+                                        key={proficiencies[i + (proficiencies.length / 2)]}
+                                        onCheckedChange={onCheckedChange} 
+                                        checked={checked}
+                                        valueKey={proficiencies[i + (proficiencies.length / 2)]}>
+                                            {t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
+                                    </SearchFilterCheckboxItem>
+                                )}
+                            ) }
+                        </DropdownMenu.Group>
+                    </section>
+            </SearchFilter>
+        )
+    }
+
+    return (
+        <div className="SearchFilterBar">
+            <SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
+                { Array.from(Array(rarities.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={rarities[i]}
+                            onCheckedChange={handleRarityChange} 
+                            checked={rarityState[rarities[i]].checked} 
+                            valueKey={rarities[i]}>
+                                {t(`rarities.${rarities[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+
+            <SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
+                { Array.from(Array(elements.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={elements[i]}
+                            onCheckedChange={handleElementChange} 
+                            checked={elementState[elements[i]].checked} 
+                            valueKey={elements[i]}>
+                                {t(`elements.${elements[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+
+            { renderProficiencyFilter(1) }
+            { renderProficiencyFilter(2) }
+        </div>
+    )
+}
+
+export default CharacterSearchFilterBar
diff --git a/components/SummonSearchFilterBar/index.scss b/components/SummonSearchFilterBar/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/SummonSearchFilterBar/index.tsx b/components/SummonSearchFilterBar/index.tsx
new file mode 100644
index 00000000..14be3c1c
--- /dev/null
+++ b/components/SummonSearchFilterBar/index.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import SearchFilter from '~components/SearchFilter'
+import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+
+import './index.scss'
+import { emptyElementState, emptyRarityState } from '~utils/emptyStates'
+import { elements, rarities } from '~utils/stateValues'
+
+interface Props {
+    sendFilters: (filters: { [key: string]: number[] }) => void
+}
+
+const SummonSearchFilterBar = (props: Props) => {
+    const { t } = useTranslation('common')
+
+    const [rarityMenu, setRarityMenu] = useState(false)
+    const [elementMenu, setElementMenu] = useState(false)
+
+    const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
+    const [elementState, setElementState] = useState<ElementState>(emptyElementState)
+
+    function rarityMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(true)
+            setElementMenu(false)
+        } else setRarityMenu(false)
+    }
+
+    function elementMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(true)
+        } else setElementMenu(false)
+    }
+
+    function handleRarityChange(checked: boolean, key: string) {
+        let newRarityState = cloneDeep(rarityState)
+        newRarityState[key].checked = checked
+        setRarityState(newRarityState)
+    }
+
+    function handleElementChange(checked: boolean, key: string) {
+        let newElementState = cloneDeep(elementState)
+        newElementState[key].checked = checked
+        setElementState(newElementState)
+    }
+
+    function sendFilters() {
+        const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
+
+        const filters = {
+            rarity: checkedRarityFilters,
+            element: checkedElementFilters
+        }
+
+        props.sendFilters(filters)
+    }
+
+    useEffect(() => {
+        sendFilters()
+    }, [rarityState, elementState])
+
+    return (
+        <div className="SearchFilterBar">
+            <SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
+                { Array.from(Array(rarities.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={rarities[i]}
+                            onCheckedChange={handleRarityChange} 
+                            checked={rarityState[rarities[i]].checked} 
+                            valueKey={rarities[i]}>
+                                {t(`rarities.${rarities[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+
+            <SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
+                { Array.from(Array(elements.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={elements[i]}
+                            onCheckedChange={handleElementChange} 
+                            checked={elementState[elements[i]].checked} 
+                            valueKey={elements[i]}>
+                                {t(`elements.${elements[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+        </div>
+    )
+}
+
+export default SummonSearchFilterBar
diff --git a/components/WeaponSearchFilterBar/index.scss b/components/WeaponSearchFilterBar/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/WeaponSearchFilterBar/index.tsx b/components/WeaponSearchFilterBar/index.tsx
new file mode 100644
index 00000000..68ae7063
--- /dev/null
+++ b/components/WeaponSearchFilterBar/index.tsx
@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'next-i18next'
+
+import cloneDeep from 'lodash.clonedeep'
+
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import SearchFilter from '~components/SearchFilter'
+import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+
+import './index.scss'
+import { emptyElementState, emptyProficiencyState, emptyRarityState, emptyWeaponSeriesState } from '~utils/emptyStates'
+import { elements, proficiencies, rarities, weaponSeries } from '~utils/stateValues'
+
+interface Props {
+    sendFilters: (filters: { [key: string]: number[] }) => void
+}
+
+const WeaponSearchFilterBar = (props: Props) => {
+    const { t } = useTranslation('common')
+
+    const [rarityMenu, setRarityMenu] = useState(false)
+    const [elementMenu, setElementMenu] = useState(false)
+    const [proficiencyMenu, setProficiencyMenu] = useState(false)
+    const [seriesMenu, setSeriesMenu] = useState(false)
+
+    const [rarityState, setRarityState] = useState<RarityState>(emptyRarityState)
+    const [elementState, setElementState] = useState<ElementState>(emptyElementState)
+    const [proficiencyState, setProficiencyState] = useState<ProficiencyState>(emptyProficiencyState)
+    const [seriesState, setSeriesState] = useState<WeaponSeriesState>(emptyWeaponSeriesState)
+
+    function rarityMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(true)
+            setElementMenu(false)
+            setProficiencyMenu(false)
+            setSeriesMenu(false)
+        } else setRarityMenu(false)
+    }
+
+    function elementMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(true)
+            setProficiencyMenu(false)
+            setSeriesMenu(false)
+        } else setElementMenu(false)
+    }
+
+    function proficiencyMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(false)
+            setProficiencyMenu(true)
+            setSeriesMenu(false)
+        } else setProficiencyMenu(false)
+    }
+
+    function seriesMenuOpened(open: boolean) {
+        if (open) {
+            setRarityMenu(false)
+            setElementMenu(false)
+            setProficiencyMenu(false)
+            setSeriesMenu(true)
+        } else setSeriesMenu(false)
+    }
+
+    function handleRarityChange(checked: boolean, key: string) {
+        let newRarityState = cloneDeep(rarityState)
+        newRarityState[key].checked = checked
+        setRarityState(newRarityState)
+    }
+
+    function handleElementChange(checked: boolean, key: string) {
+        let newElementState = cloneDeep(elementState)
+        newElementState[key].checked = checked
+        setElementState(newElementState)
+    }
+
+    function handleProficiencyChange(checked: boolean, key: string) {
+        let newProficiencyState = cloneDeep(proficiencyState)
+        newProficiencyState[key].checked = checked
+        setProficiencyState(newProficiencyState)
+    }
+
+    function handleSeriesChange(checked: boolean, key: string) {
+        let newSeriesState = cloneDeep(seriesState)
+        newSeriesState[key].checked = checked
+        setSeriesState(newSeriesState)
+    }
+
+    function sendFilters() {
+        const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedProficiencyFilters = Object.values(proficiencyState).filter(x => x.checked).map((x, i) => x.id)
+        const checkedSeriesFilters = Object.values(seriesState).filter(x => x.checked).map((x, i) => x.id)
+        
+        const filters = {
+            rarity: checkedRarityFilters,
+            element: checkedElementFilters,
+            proficiency1: checkedProficiencyFilters,
+            series: checkedSeriesFilters
+        }
+
+        props.sendFilters(filters)
+    }
+
+    useEffect(() => {
+        sendFilters()
+    }, [rarityState, elementState, proficiencyState, seriesState])
+
+    return (
+        <div className="SearchFilterBar">
+            <SearchFilter label={t('filters.labels.rarity')} numSelected={Object.values(rarityState).map(x => x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.rarity')}</DropdownMenu.Label>
+                { Array.from(Array(rarities.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={rarities[i]}
+                            onCheckedChange={handleRarityChange} 
+                            checked={rarityState[rarities[i]].checked} 
+                            valueKey={rarities[i]}>
+                                {t(`rarities.${rarities[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+
+            <SearchFilter label={t('filters.labels.element')} numSelected={Object.values(elementState).map(x => x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.element')}</DropdownMenu.Label>
+                { Array.from(Array(elements.length)).map((x, i) => {
+                    return (
+                        <SearchFilterCheckboxItem 
+                            key={elements[i]}
+                            onCheckedChange={handleElementChange} 
+                            checked={elementState[elements[i]].checked} 
+                            valueKey={elements[i]}>
+                                {t(`elements.${elements[i]}`)}
+                        </SearchFilterCheckboxItem>
+                    )}
+                ) }
+            </SearchFilter>
+
+            <SearchFilter label={t('filters.labels.proficiency')} numSelected={Object.values(proficiencyState).map(x => x.checked).filter(Boolean).length} open={proficiencyMenu} onOpenChange={proficiencyMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.proficiency')}</DropdownMenu.Label>
+                <section>
+                    <DropdownMenu.Group className="Group">
+                        { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+                            return (
+                                <SearchFilterCheckboxItem 
+                                    key={proficiencies[i]}
+                                    onCheckedChange={handleProficiencyChange} 
+                                    checked={proficiencyState[proficiencies[i]].checked} 
+                                    valueKey={proficiencies[i]}>
+                                        {t(`proficiencies.${proficiencies[i]}`)}
+                                </SearchFilterCheckboxItem>
+                            )}
+                        ) }
+                    </DropdownMenu.Group>
+                    <DropdownMenu.Group className="Group">
+                        { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+                            return (
+                                <SearchFilterCheckboxItem 
+                                    key={proficiencies[i + (proficiencies.length / 2)]}
+                                    onCheckedChange={handleProficiencyChange} 
+                                    checked={proficiencyState[proficiencies[i + (proficiencies.length / 2)]].checked} 
+                                    valueKey={proficiencies[i + (proficiencies.length / 2)]}>
+                                        {t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
+                                </SearchFilterCheckboxItem>
+                            )}
+                        ) }
+                    </DropdownMenu.Group>
+                </section>
+            </SearchFilter>
+
+            <SearchFilter label={t('filters.labels.series')} numSelected={Object.values(seriesState).map(x => x.checked).filter(Boolean).length} open={seriesMenu} onOpenChange={seriesMenuOpened}>
+                <DropdownMenu.Label className="Label">{t('filters.labels.series')}</DropdownMenu.Label>
+                <section>
+                    <DropdownMenu.Group className="Group">
+                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+                            return (
+                                <SearchFilterCheckboxItem 
+                                    key={weaponSeries[i]}
+                                    onCheckedChange={handleSeriesChange} 
+                                    checked={seriesState[weaponSeries[i]].checked} 
+                                    valueKey={weaponSeries[i]}>
+                                        {t(`series.${weaponSeries[i]}`)}
+                                </SearchFilterCheckboxItem>
+                            )}
+                        ) }
+                    </DropdownMenu.Group>
+                    <DropdownMenu.Group className="Group">
+                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+                            return (
+                                <SearchFilterCheckboxItem 
+                                    key={weaponSeries[i + (weaponSeries.length / 3)]}
+                                    onCheckedChange={handleSeriesChange} 
+                                    checked={seriesState[weaponSeries[i + (weaponSeries.length / 3)]].checked} 
+                                    valueKey={weaponSeries[i + (weaponSeries.length / 3)]}>
+                                        {t(`series.${weaponSeries[i + (weaponSeries.length / 3)]}`)}
+                                </SearchFilterCheckboxItem>
+                            )}
+                        ) }
+                    </DropdownMenu.Group>
+                    <DropdownMenu.Group className="Group">
+                        { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+                            return (
+                                <SearchFilterCheckboxItem 
+                                    key={weaponSeries[i + (2 * (weaponSeries.length / 3))]}
+                                    onCheckedChange={handleSeriesChange} 
+                                    checked={seriesState[weaponSeries[i + (2 * (weaponSeries.length / 3))]].checked} 
+                                    valueKey={weaponSeries[i + (2 * (weaponSeries.length / 3))]}>
+                                        {t(`series.${weaponSeries[i + (2 * (weaponSeries.length / 3))]}`)}
+                                </SearchFilterCheckboxItem>
+                            )}
+                        ) }
+                    </DropdownMenu.Group>
+                </section>
+            </SearchFilter>
+        </div>
+    )
+}
+
+export default WeaponSearchFilterBar