diff --git a/web/calendar/calendar.css b/web/calendar/calendar.css
--- a/web/calendar/calendar.css
+++ b/web/calendar/calendar.css
@@ -1,11 +1,13 @@
 .container {
   display: flex;
   flex-direction: row;
+  background-color: var(--panel-background-secondary-default);
+  border-radius: 8px;
+  height: 100%;
 }
 
 .filtersButton {
-  color: var(--fg);
-  background-color: var(--filters-button-bg);
+  color: var(--button-label-primary-default);
   width: 40px;
   height: 40px;
   display: flex;
@@ -15,18 +17,18 @@
   margin: 0 0px 9px 24px;
   cursor: pointer;
   position: absolute;
-  border: 1px solid var(--filters-button-border);
+  border: 1px solid var(--button-border-outline-default);
   border-radius: 4px;
 }
 
 .filtersButton:hover {
-  background-color: var(--filters-button-hover-bg);
+  background-color: var(--button-background-tertiary-hover);
 }
 
 div.content {
   height: 100%;
-  overflow: auto;
   flex: 1;
+  overflow-y: scroll;
 }
 
 nav.nav {
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
@@ -3,11 +3,13 @@
   background-attachment: fixed;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid var(--border);
-  background-color: var(--filter-panel-bg);
+  background-color: var(--panel-background-primary-default);
+  border-radius: 8px 0 0 8px;
+  box-shadow: 0px 1px 3px 0px var(--panel-headerShadow-primary-default);
+  clip-path: inset(0 -3px 0 0);
 }
 div.filters {
-  color: #dddddd;
+  color: var(--text-background-primary-default);
   overflow-y: auto;
   height: 100%;
 }
@@ -47,6 +49,7 @@
   width: calc(1em + 2px);
   height: calc(1em + 2px);
   border: 1px solid transparent;
+  border-radius: 4px;
   z-index: 0;
   position: absolute;
   left: 0;
@@ -163,8 +166,7 @@
   margin: 5px 18px 8px 18px;
 }
 div.extras {
-  background-color: rgba(0, 0, 0, 0.89);
-  color: #dddddd;
+  color: var(--text-background-primary-default);
   padding: 8px 20px;
   font-size: 14px;
   display: flex;