diff --git a/src/other/GeofencesList.jsx b/src/other/GeofencesList.jsx
index d26eff0912..905bb51c79 100644
--- a/src/other/GeofencesList.jsx
+++ b/src/other/GeofencesList.jsx
@@ -11,7 +11,7 @@ import { useCatchCallback } from '../reactHelper';
 
 const useStyles = makeStyles(() => ({
   list: {
-    maxHeight: '100%',
+    flexGrow: 1,
     overflow: 'auto',
   },
   icon: {
diff --git a/src/other/GeofencesPage.jsx b/src/other/GeofencesPage.jsx
index f7a9d6aa8c..8cb0bf7e87 100644
--- a/src/other/GeofencesPage.jsx
+++ b/src/other/GeofencesPage.jsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
-  Divider, Typography, IconButton, useMediaQuery, Toolbar,
+  Divider, Typography, IconButton, Toolbar,
+  Paper,
 } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import makeStyles from '@mui/styles/makeStyles';
-import { useTheme } from '@mui/material/styles';
-import Drawer from '@mui/material/Drawer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import { useNavigate } from 'react-router-dom';
@@ -35,13 +34,13 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   drawer: {
-    zIndex: 1,
-    position: 'relative !important',
+    display: 'flex',
+    flexDirection: 'column',
     [theme.breakpoints.up('sm')]: {
       width: theme.dimensions.drawerWidthDesktop,
     },
     [theme.breakpoints.down('sm')]: {
-      height: `${theme.dimensions.drawerHeightPhone} !important`,
+      height: theme.dimensions.drawerHeightPhone,
     },
   },
   mapContainer: {
@@ -56,14 +55,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const GeofencesPage = () => {
-  const theme = useTheme();
   const classes = useStyles();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const t = useTranslation();
 
-  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
-
   const [selectedGeofenceId, setSelectedGeofenceId] = useState();
 
   const handleFile = (event) => {
@@ -103,12 +99,7 @@ const GeofencesPage = () => {
   return (
     <div className={classes.root}>
       <div className={classes.content}>
-        <Drawer
-          className={classes.drawer}
-          anchor={isPhone ? 'bottom' : 'left'}
-          variant="permanent"
-          classes={{ paper: classes.drawer }}
-        >
+        <Paper square className={classes.drawer}>
           <Toolbar>
             <IconButton edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
               <ArrowBackIcon />
@@ -125,7 +116,7 @@ const GeofencesPage = () => {
           </Toolbar>
           <Divider />
           <GeofencesList onGeofenceSelected={setSelectedGeofenceId} />
-        </Drawer>
+        </Paper>
         <div className={classes.mapContainer}>
           <MapView>
             <MapGeofenceEdit selectedGeofenceId={selectedGeofenceId} />