diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -160,11 +160,16 @@
 
     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 (
@@ -172,13 +177,7 @@
         {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}
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -6,6 +6,8 @@
   background-attachment: fixed;
   display: flex;
   flex-direction: column;
+  border-right: 1px solid var(--border);
+  background-color: var(--filter-panel-bg);
 }
 div.filters {
   color: #dddddd;
@@ -96,30 +98,42 @@
 }
 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;
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -9,6 +9,7 @@
 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';
 
@@ -48,6 +49,7 @@
   +includeDeleted: boolean,
   +dispatch: Dispatch,
   +pushModal: PushModal,
+  +toggleFilters: (event: SyntheticEvent<HTMLAnchorElement>) => void,
 };
 type State = {
   +query: string,
@@ -144,6 +146,9 @@
             />
             {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}>
@@ -384,8 +389,14 @@
   };
 }
 
-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,
@@ -405,9 +416,9 @@
         includeDeleted={includeDeleted}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
+        toggleFilters={props.toggleFilters}
       />
     );
-  },
-);
+  });
 
 export default ConnectedFilterPanel;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -207,6 +207,8 @@
   --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);
 }