diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
index dd5efe84c..b3d06fc0c 100644
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -1,285 +1,284 @@
 // @flow
 
 import dateFormat from 'dateformat';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateCalendarQueryActionTypes,
   updateCalendarQuery,
 } from 'lib/actions/entry-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { currentDaysToEntries } from 'lib/selectors/thread-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import {
   type EntryInfo,
   type CalendarQuery,
   type CalendarQueryUpdateResult,
   type CalendarQueryUpdateStartingPayload,
 } from 'lib/types/entry-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 import {
   getDate,
   dateString,
   startDateForYearAndMonth,
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils.js';
 
 import css from './calendar.css';
 import Day from './day.react.js';
 import FilterPanel from './filter-panel.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   yearAssertingSelector,
   monthAssertingSelector,
   webCalendarQuery,
 } from '../selectors/nav-selectors.js';
 import type { NavInfo } from '../types/nav-types.js';
 import { canonicalURLFromReduxState } from '../url-utils.js';
 
 type BaseProps = {
   +url: string,
 };
 type Props = {
   ...BaseProps,
   +year: number,
   +month: number,
   +daysToEntries: { +[dayString: string]: EntryInfo[] },
   +navInfo: NavInfo,
   +currentCalendarQuery: () => CalendarQuery,
   +loggedIn: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +updateCalendarQuery: (
     calendarQuery: CalendarQuery,
     reduxAlreadyUpdated?: boolean,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +filterPanelOpen: boolean,
 };
 class Calendar extends React.PureComponent<Props, State> {
   state: State = {
     filterPanelOpen: false,
   };
 
   getDate(
     dayOfMonth: number,
     monthInput: ?number = undefined,
     yearInput: ?number = undefined,
   ) {
     return getDate(
       yearInput ? yearInput : this.props.year,
       monthInput ? monthInput : this.props.month,
       dayOfMonth,
     );
   }
 
   prevMonthDates() {
     const { year, month } = this.props;
     const lastMonthDate = getDate(year, month - 1, 1);
     const prevYear = lastMonthDate.getFullYear();
     const prevMonth = lastMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(prevYear, prevMonth),
       endDate: endDateForYearAndMonth(prevYear, prevMonth),
     };
   }
 
   nextMonthDates() {
     const { year, month } = this.props;
     const nextMonthDate = getDate(year, month + 1, 1);
     const nextYear = nextMonthDate.getFullYear();
     const nextMonth = nextMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(nextYear, nextMonth),
       endDate: endDateForYearAndMonth(nextYear, nextMonth),
     };
   }
 
   render() {
     const { year, month } = this.props;
     const monthName = dateFormat(getDate(year, month, 1), 'mmmm');
     const prevURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.prevMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
     const nextURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.nextMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
 
     const lastDayOfMonth = this.getDate(0, this.props.month + 1);
     const totalDaysInMonth = lastDayOfMonth.getDate();
     const firstDayToPrint = 1 - this.getDate(1).getDay();
     const lastDayToPrint = totalDaysInMonth + 6 - lastDayOfMonth.getDay();
 
     const rows = [];
     let columns = [];
     let week = 1;
     let tabIndex = 1;
     for (
       let curDayOfMonth = firstDayToPrint;
       curDayOfMonth <= lastDayToPrint;
       curDayOfMonth++
     ) {
       if (curDayOfMonth < 1 || curDayOfMonth > totalDaysInMonth) {
         columns.push(<td key={curDayOfMonth} />);
       } else {
         const dayString = dateString(
           this.props.year,
           this.props.month,
           curDayOfMonth,
         );
         const entries = this.props.daysToEntries[dayString];
         invariant(
           entries,
           'the currentDaysToEntries selector should make sure all dayStrings ' +
             `in the current range have entries, but ${dayString} did not`,
         );
         columns.push(
           <Day
             dayString={dayString}
             entryInfos={entries}
             key={curDayOfMonth}
             startingTabIndex={tabIndex}
           />,
         );
         tabIndex += entries.length;
       }
       if (columns.length === 7) {
         rows.push(<tr key={week++}>{columns}</tr>);
         columns = [];
       }
     }
 
     let filterPanel = null;
     let calendarContentStyle = null;
-    let filterButtonStyle = null;
+    let filterButton = null;
     if (this.state.filterPanelOpen) {
-      filterPanel = <FilterPanel />;
+      filterPanel = <FilterPanel toggleFilters={this.toggleFilters} />;
       calendarContentStyle = { marginLeft: '300px' };
-      filterButtonStyle = { backgroundColor: 'rgba(0,0,0,0.67)' };
+    } else {
+      filterButton = (
+        <a className={css.filtersButton} onClick={this.toggleFilters}>
+          <SWMansionIcon icon="filters-2" size={16} />
+        </a>
+      );
     }
 
     return (
       <div>
         {filterPanel}
         <div className={css.content} style={calendarContentStyle}>
           <div>
-            <a
-              className={css.filtersButton}
-              onClick={this.toggleFilters}
-              style={filterButtonStyle}
-            >
-              <SWMansionIcon icon="filters-2" size={16} />
-            </a>
+            {filterButton}
             <nav className={css.nav}>
               <a
                 className={css.monthLink}
                 href={prevURL}
                 onClick={this.onClickPrevURL}
               >
                 <SWMansionIcon icon="chevron-left" size={24} />
               </a>
               <h2 className={css.monthName}>
                 {' '}
                 {monthName} {year}{' '}
               </h2>
               <a
                 className={css.monthLink}
                 href={nextURL}
                 onClick={this.onClickNextURL}
               >
                 <SWMansionIcon icon="chevron-right" size={24} />
               </a>
             </nav>
           </div>
           <table className={css.calendar}>
             <thead>
               <tr>
                 <th>Sunday</th>
                 <th>Monday</th>
                 <th>Tuesday</th>
                 <th>Wednesday</th>
                 <th>Thursday</th>
                 <th>Friday</th>
                 <th>Saturday</th>
               </tr>
             </thead>
             <tbody>{rows}</tbody>
           </table>
         </div>
       </div>
     );
   }
 
   toggleFilters = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ filterPanelOpen: !this.state.filterPanelOpen });
   };
 
   onClickPrevURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.prevMonthDates(),
     };
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(newCalendarQuery, true),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 
   onClickNextURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.nextMonthDates(),
     };
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(newCalendarQuery, true),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 }
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props) {
     const year = useSelector(yearAssertingSelector);
     const month = useSelector(monthAssertingSelector);
     const daysToEntries = useSelector(currentDaysToEntries);
     const navInfo = useSelector(state => state.navInfo);
     const currentCalendarQuery = useSelector(webCalendarQuery);
     const loggedIn = useSelector(isLoggedIn);
     const callUpdateCalendarQuery = useServerCall(updateCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
 
     return (
       <Calendar
         {...props}
         year={year}
         month={month}
         daysToEntries={daysToEntries}
         navInfo={navInfo}
         currentCalendarQuery={currentCalendarQuery}
         loggedIn={loggedIn}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
index 62789b9cb..ea74d3411 100644
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -1,167 +1,181 @@
 div.container {
   position: fixed;
   width: 300px;
   top: 126px;
   bottom: 0;
   background-attachment: fixed;
   display: flex;
   flex-direction: column;
+  border-right: 1px solid var(--border);
+  background-color: var(--filter-panel-bg);
 }
 div.filters {
   color: #dddddd;
   overflow-y: auto;
   height: 100%;
 }
 div.option {
   margin: 5px 18px 5px 32px;
 }
 div.optionThread {
   min-height: 20px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 div.optionThread input {
   position: absolute;
   left: 0;
   top: 0;
   width: calc(1em + 8px);
   height: calc(1em + 8px);
   z-index: 2;
   opacity: 0;
   cursor: pointer;
 }
 div.optionThread label {
   font-weight: 600 !important;
   font-size: 15px;
   padding-left: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
   text-indent: 24px;
 }
 div.optionCheckbox {
   display: block;
   content: '';
   width: calc(1em + 2px);
   height: calc(1em + 2px);
   border: 1px solid transparent;
   z-index: 0;
   position: absolute;
   left: 0;
   top: 0;
 }
 div.checkboxAfterOption {
   -webkit-transform: scale(0.6);
   -ms-transform: scale(0.6);
   transform: scale(0.6);
 }
 a.only {
   color: #888888;
   padding-left: 5px;
   font-size: 13px;
   cursor: pointer;
   display: none;
 }
 div.option:hover a.only {
   display: inline;
 }
 a.only:hover {
   text-decoration: underline;
   color: #eeeeee;
 }
 a.settingsCog {
   display: none;
   margin-left: auto;
   padding-left: 5px;
   cursor: pointer;
   color: #aaaaaa;
 }
 div.option:hover a.settingsCog {
   display: inline;
 }
 a.settingsCog:hover {
   color: #eeeeee;
 }
 div.optionDetails {
   font-style: italic;
   color: #888888;
   font-size: 13px;
   display: inline-block;
   text-indent: 24px;
   padding-left: 10px;
   padding-top: 1px;
 }
 div.searchContainer {
   padding: 8px 10px;
-  background-color: rgba(0, 0, 0, 0.89);
+  flex-direction: row;
+  display: flex;
+}
+.collapseButton {
+  color: var(--filter-panel-fg);
+  margin-left: 12px;
+  margin-right: 6px;
+  align-self: center;
+  display: flex;
+}
+.collapseButton:hover {
+  color: var(--fg);
 }
 div.search {
   display: flex;
-  border-radius: 5px;
-  padding: 5px;
-  background-color: rgba(255, 255, 255, 0.27);
+  border-radius: 8px;
+  padding: 10px;
+  background-color: var(--text-input-bg);
   align-items: center;
+  flex-grow: 1;
+  height: 20px;
 }
 svg.searchVector {
-  fill: white;
-  height: 22px;
-  width: 22px;
-  padding: 0 3px;
+  fill: var(--filter-panel-fg);
+  height: 20px;
+  width: 20px;
 }
 div.search > input {
   color: white;
   padding: 0;
   border: none;
   background-color: transparent;
-  font-weight: 600;
-  font-size: 15px;
+  font-weight: var(--normal);
+  font-size: var(--s-font-14);
   flex-grow: 1;
-  margin-left: 3px;
+  margin-left: 8px;
 }
 div.search > input:focus {
   outline: none;
 }
 svg.clearQuery {
   font-size: 15px;
   padding-bottom: 1px;
   padding-right: 2px;
   color: #cccccc;
 }
 svg.clearQuery:hover {
   font-size: 15px;
   padding-bottom: 1px;
   padding-right: 2px;
   color: white;
 }
 div.noResults {
   font-style: italic;
   text-align: center;
   font-size: 15px;
   color: #888888;
 }
 a.collapse {
   margin-left: auto;
   padding-left: 5px;
   cursor: pointer;
   color: #aaaaaa;
 }
 div.category {
   margin: 5px 18px 8px 18px;
 }
 div.extras {
   background-color: rgba(0, 0, 0, 0.89);
   color: #dddddd;
   padding: 8px 20px;
   font-size: 14px;
   display: flex;
 }
 div.extras > label {
   display: flex;
   align-items: center;
 }
 div.extras > label > span {
   margin-left: 8px;
 }
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
index f98d28142..bd8760ba5 100644
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -1,413 +1,424 @@
 // @flow
 
 import {
   faCog,
   faTimesCircle,
   faChevronUp,
   faChevronDown,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
+import { ChevronsLeft } from 'react-feather';
 import { useDispatch } from 'react-redux';
 import Switch from 'react-switch';
 
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import {
   filteredThreadIDsSelector,
   includeDeletedSelector,
 } from 'lib/selectors/calendar-filter-selectors.js';
 import SearchIndex from 'lib/shared/search-index.js';
 import {
   calendarThreadFilterTypes,
   type FilterThreadInfo,
   updateCalendarThreadFilter,
   clearCalendarThreadFilter,
   setCalendarDeletedFilter,
 } from 'lib/types/filter-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 
 import css from './filter-panel.css';
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useFilterThreadInfos,
   useFilterThreadSearchIndex,
   filterThreadIDsBelongingToCommunitySelector,
 } from '../selectors/calendar-selectors.js';
 import { MagnifyingGlass } from '../vectors.react.js';
 
 type Props = {
   +filterThreadInfos: $ReadOnlyArray<FilterThreadInfo>,
   +filterThreadSearchIndex: SearchIndex,
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +filteredCommunityThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
   +pushModal: PushModal,
+  +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 };
 type State = {
   +query: string,
   +searchResults: $ReadOnlyArray<FilterThreadInfo>,
   +collapsed: boolean,
 };
 class FilterPanel extends React.PureComponent<Props, State> {
   state: State = {
     query: '',
     searchResults: [],
     collapsed: false,
   };
 
   currentlySelected(threadID: string): boolean {
     if (!this.props.filteredThreadIDs) {
       return true;
     }
     return this.props.filteredThreadIDs.has(threadID);
   }
 
   inCurrentCommunity(threadID: string): boolean {
     if (!this.props.filteredCommunityThreadIDs) {
       return true;
     }
     return this.props.filteredCommunityThreadIDs.has(threadID);
   }
 
   render() {
     const filterThreadInfos = this.state.query
       ? this.state.searchResults
       : this.props.filterThreadInfos;
     const filterThreadInfosInCurrentCommunity = filterThreadInfos.filter(item =>
       this.inCurrentCommunity(item.threadInfo.id),
     );
 
     let filters = [];
     if (!this.state.query || filterThreadInfosInCurrentCommunity.length > 0) {
       filters.push(
         <Category
           numThreads={filterThreadInfosInCurrentCommunity.length}
           onToggle={this.onToggleAll}
           collapsed={this.state.collapsed}
           onCollapse={this.onCollapse}
           selected={
             !this.props.filteredThreadIDs ||
             this.props.filteredThreadIDs.size ===
               this.props.filteredCommunityThreadIDs?.size
           }
           key="all"
         />,
       );
     } else {
       filters.push(
         <div className={css.noResults} key="noResults">
           No results
         </div>,
       );
     }
     if (!this.state.collapsed) {
       const options = filterThreadInfosInCurrentCommunity.map(
         filterThreadInfo => (
           <Item
             filterThreadInfo={filterThreadInfo}
             onToggle={this.onToggle}
             onClickOnly={this.onClickOnly}
             onClickSettings={this.onClickSettings}
             selected={this.currentlySelected(filterThreadInfo.threadInfo.id)}
             key={filterThreadInfo.threadInfo.id}
           />
         ),
       );
       filters = [...filters, ...options];
     }
 
     let clearQueryButton = null;
     if (this.state.query) {
       clearQueryButton = (
         <a href="#" onClick={this.clearQuery}>
           <FontAwesomeIcon icon={faTimesCircle} className={css.clearQuery} />
         </a>
       );
     }
 
     return (
       <div className={css.container}>
         <div className={css.searchContainer}>
           <div className={css.search}>
             <MagnifyingGlass className={css.searchVector} />
             <input
               type="text"
               placeholder="Search"
               value={this.state.query}
               onChange={this.onChangeQuery}
             />
             {clearQueryButton}
           </div>
+          <a onClick={this.props.toggleFilters} className={css.collapseButton}>
+            <ChevronsLeft size={30} />
+          </a>
         </div>
         <div className={css.filters}>{filters}</div>
         <div className={css.extras}>
           <label htmlFor="include-deleted-switch">
             <Switch
               checked={this.props.includeDeleted}
               onChange={this.onChangeIncludeDeleted}
               checkedIcon={false}
               uncheckedIcon={false}
               height={20}
               width={40}
               id="include-deleted-switch"
             />
             <span>Include deleted entries</span>
           </label>
         </div>
       </div>
     );
   }
 
   onToggle = (threadID: string, value: boolean) => {
     let newThreadIDs;
     const selectedThreadIDs = this.props.filteredThreadIDs;
     if (!selectedThreadIDs && value) {
       // No thread filter exists and thread is being added
       return;
     } else if (!selectedThreadIDs) {
       // No thread filter exists and thread is being removed
       newThreadIDs = this.props.filterThreadInfos
         .map(filterThreadInfo => filterThreadInfo.threadInfo.id)
         .filter(id => id !== threadID);
     } else if (selectedThreadIDs.has(threadID) && value) {
       // Thread filter already includes thread being added
       return;
     } else if (selectedThreadIDs.has(threadID)) {
       // Thread being removed from current thread filter
       newThreadIDs = [...selectedThreadIDs].filter(id => id !== threadID);
     } else if (!value) {
       // Thread filter doesn't include thread being removed
       return;
     } else if (
       selectedThreadIDs.size + 1 ===
       this.props.filterThreadInfos.length
     ) {
       // Thread filter exists and thread being added is the only one missing
       newThreadIDs = null;
     } else {
       // Thread filter exists and thread is being added
       newThreadIDs = [...selectedThreadIDs, threadID];
     }
     this.setFilterThreads(newThreadIDs);
   };
 
   onToggleAll = (value: boolean) => {
     if (!value) {
       this.setFilterThreads([]);
       return;
     }
     const allChats = this.props.filteredCommunityThreadIDs
       ? Array.from(this.props.filteredCommunityThreadIDs)
       : null;
     this.setFilterThreads(allChats);
   };
 
   onClickOnly = (threadID: string) => {
     this.setFilterThreads([threadID]);
   };
 
   setFilterThreads(threadIDs: ?$ReadOnlyArray<string>) {
     if (!threadIDs) {
       this.props.dispatch({
         type: clearCalendarThreadFilter,
       });
     } else {
       this.props.dispatch({
         type: updateCalendarThreadFilter,
         payload: {
           type: calendarThreadFilterTypes.THREAD_LIST,
           threadIDs,
         },
       });
     }
   }
 
   onClickSettings = (threadID: string) => {
     this.props.pushModal(<ThreadSettingsModal threadID={threadID} />);
   };
 
   onChangeQuery = (event: SyntheticEvent<HTMLInputElement>) => {
     const query = event.currentTarget.value;
     const searchIndex = this.props.filterThreadSearchIndex;
     const resultIDs = new Set(searchIndex.getSearchResults(query));
     const results = this.props.filterThreadInfos.filter(filterThreadInfo =>
       resultIDs.has(filterThreadInfo.threadInfo.id),
     );
     this.setState({ query, searchResults: results, collapsed: false });
   };
 
   clearQuery = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ query: '', searchResults: [], collapsed: false });
   };
 
   onCollapse = (value: boolean) => {
     this.setState({ collapsed: value });
   };
 
   onChangeIncludeDeleted = (includeDeleted: boolean) => {
     this.props.dispatch({
       type: setCalendarDeletedFilter,
       payload: {
         includeDeleted,
       },
     });
   };
 }
 
 type ItemProps = {
   +filterThreadInfo: FilterThreadInfo,
   +onToggle: (threadID: string, value: boolean) => void,
   +onClickOnly: (threadID: string) => void,
   +onClickSettings: (threadID: string) => void,
   +selected: boolean,
 };
 class Item extends React.PureComponent<ItemProps> {
   render() {
     const threadInfo = this.props.filterThreadInfo.threadInfo;
     const beforeCheckStyles = { borderColor: `#${threadInfo.color}` };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: `#${threadInfo.color}` };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const details =
       this.props.filterThreadInfo.numVisibleEntries === 1
         ? '1 entry'
         : `${this.props.filterThreadInfo.numVisibleEntries} entries`;
     return (
       <div className={css.option}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             {threadInfo.uiName}
             {afterCheck}
           </label>
           <a onClick={this.onClickOnly} className={css.only}>
             only
           </a>
           <a onClick={this.onClickSettings} className={css.settingsCog}>
             <FontAwesomeIcon icon={faCog} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(
       this.props.filterThreadInfo.threadInfo.id,
       event.currentTarget.checked,
     );
   };
 
   onClickOnly = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickOnly(this.props.filterThreadInfo.threadInfo.id);
   };
 
   onClickSettings = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickSettings(this.props.filterThreadInfo.threadInfo.id);
   };
 }
 
 type CategoryProps = {
   +numThreads: number,
   +onToggle: (value: boolean) => void,
   +collapsed: boolean,
   +onCollapse: (value: boolean) => void,
   +selected: boolean,
 };
 class Category extends React.PureComponent<CategoryProps> {
   render() {
     const beforeCheckStyles = { borderColor: 'white' };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: 'white' };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const icon = this.props.collapsed ? faChevronUp : faChevronDown;
     const details =
       this.props.numThreads === 1 ? '1 chat' : `${this.props.numThreads} chats`;
     return (
       <div className={css.category}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             Your chats
             {afterCheck}
           </label>
           <a onClick={this.onCollapse} className={css.collapse}>
             <FontAwesomeIcon icon={icon} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(event.currentTarget.checked);
   };
 
   onCollapse = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onCollapse(!this.props.collapsed);
   };
 }
 
-const ConnectedFilterPanel: React.ComponentType<{}> = React.memo<{}>(
-  function ConnectedFilterPanel(): React.Node {
+type ConnectedFilterPanelProps = {
+  +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
+};
+
+const ConnectedFilterPanel: React.ComponentType<ConnectedFilterPanelProps> =
+  React.memo<ConnectedFilterPanelProps>(function ConnectedFilterPanel(
+    props: ConnectedFilterPanelProps,
+  ): React.Node {
     const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
     const filteredCommunityThreadIDs = useSelector(
       filterThreadIDsBelongingToCommunitySelector,
     );
     const filterThreadInfos = useFilterThreadInfos();
     const filterThreadSearchIndex = useFilterThreadSearchIndex();
     const includeDeleted = useSelector(includeDeletedSelector);
     const dispatch = useDispatch();
     const modalContext = useModalContext();
 
     return (
       <FilterPanel
         filteredThreadIDs={filteredThreadIDs}
         filteredCommunityThreadIDs={filteredCommunityThreadIDs}
         filterThreadInfos={filterThreadInfos}
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
+        toggleFilters={props.toggleFilters}
       />
     );
-  },
-);
+  });
 
 export default ConnectedFilterPanel;
diff --git a/web/theme.css b/web/theme.css
index 796684c5b..01372b642 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,212 +1,214 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-90);
   --filters-button-bg: var(--shades-black-100);
   --filters-button-border: var(--shades-black-80);
   --filters-button-hover-bg: var(--shades-black-90);
+  --filter-panel-fg: var(--shades-black-60);
+  --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-80);
   --topbar-button-fg: var(--shades-white-60);
 }