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 #404040;
+  background-color: #0d0d0d;
 }
 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);
+  float: right;
+  margin-left: 12px;
+  margin-right: 6px;
+  align-self: center;
+}
+.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: 400;
+  font-size: 14px;
   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';
 
@@ -144,6 +145,7 @@
             />
             {clearQueryButton}
           </div>
+          <ChevronsLeft className={css.collapseButton} size={30} />
         </div>
         <div className={css.filters}>{filters}</div>
         <div className={css.extras}>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -206,4 +206,5 @@
   --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);
 }