diff --git a/components/FilterBar/index.module.scss b/components/FilterBar/index.module.scss
index 148094e9..7bdfce2e 100644
--- a/components/FilterBar/index.module.scss
+++ b/components/FilterBar/index.module.scss
@@ -1,4 +1,4 @@
-.FilterBar {
+.filterBar {
   align-items: center;
   background: var(--bar-bg);
   border-radius: $card-corner;
@@ -26,7 +26,7 @@
     min-height: auto;
   }
 
-  .Filters {
+  .filters {
     display: flex;
     box-sizing: border-box;
     flex-direction: row;
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index ccd444f7..a11af40c 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -41,8 +41,8 @@ const FilterBar = (props: Props) => {
   const [matchesDefaultFilters, setMatchesDefaultFilters] = useState(false)
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
-    FilterBar: true,
-    shadow: props.scrolled,
+    [styles.filterBar]: true,
+    [styles.shadow]: props.scrolled,
   })
 
   const filterButtonClasses = classNames({
@@ -126,7 +126,7 @@ const FilterBar = (props: Props) => {
     <>
       <div className={classes}>
         {props.children}
-        <div className="Filters">
+        <div className={styles.filters}>
           <Select
             value={`${props.element}`}
             overlayVisible={false}