diff --git a/app/src/pages/dashboard/Analytics.scss b/app/src/pages/dashboard/Analytics.scss
index 23adbf1..9f1f02f 100644
--- a/app/src/pages/dashboard/Analytics.scss
+++ b/app/src/pages/dashboard/Analytics.scss
@@ -11,6 +11,27 @@
   color: $neutral-grey-dark-2;
 }
 
+.Analytics-filter-select {
+  @extend .subtitle-2;
+  color: $neutral-grey-dark-2;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  padding: 12px 40px 12px 16px;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+}
+
+.Analytics-filter-select:focus {
+  outline: none;
+  border: 2px solid $primary-500;
+}
+
 .Analytics-chart-title {
   @extend .subtitle-1;
   color: $primary-500;
diff --git a/app/src/pages/dashboard/TraineeProgressFilter.jsx b/app/src/pages/dashboard/TraineeProgressFilter.jsx
index 11c3a2c..674662b 100644
--- a/app/src/pages/dashboard/TraineeProgressFilter.jsx
+++ b/app/src/pages/dashboard/TraineeProgressFilter.jsx
@@ -1,10 +1,4 @@
-import {
-  FormControl,
-  Grid,
-  MenuItem,
-  Select,
-  ThemeProvider,
-} from "@mui/material";
+import { FormControl, Grid, ThemeProvider } from "@mui/material";
 import { useRecoilState } from "recoil";
 import {
   lessonTitleFilterState,
@@ -46,41 +40,43 @@ const TraineeProgressFilter = () => {
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
           <FormControl fullWidth>
-            <Select
-              color="primary500"
+            <select
+              id="lesson-title-select"
               value={lessonTitleFilter}
               onChange={updateLessonTitleFilter}
+              className="Analytics-filter-select"
             >
               {lessons.map((lesson) => (
-                <MenuItem
+                <option
                   key={lesson}
                   value={lesson}
                   className="Analytics-filter-text"
                 >
                   {lesson}
-                </MenuItem>
+                </option>
               ))}
-            </Select>
+            </select>
           </FormControl>
         </Grid>
 
         <Grid item xs={12} md={6}>
           <FormControl fullWidth>
-            <Select
-              color="primary500"
+            <select
+              id="lesson-title-select"
               value={lessonTimeFilter}
               onChange={updateLessonTimeFilter}
+              className="Analytics-filter-select"
             >
               {times.map((time) => (
-                <MenuItem
+                <option
                   key={time}
                   value={time}
-                  className=".Analytics-filter-text"
+                  className="Analytics-filter-text"
                 >
                   {time}
-                </MenuItem>
+                </option>
               ))}
-            </Select>
+            </select>
           </FormControl>
         </Grid>
       </Grid>