diff --git a/src/layouts/desktop/FilterBar.js b/src/layouts/desktop/FilterBar.js
index ee18399..268ed12 100644
--- a/src/layouts/desktop/FilterBar.js
+++ b/src/layouts/desktop/FilterBar.js
@@ -1,8 +1,6 @@
 import React from 'react'
-import FilterModal from './FilterModal'
 // import Map3DToggle from './Filter3DToggle'
-// eslint-disable-next-line
-// import ProfileMenu from './ProfileMenu'
+import LayersPopper from './LayersPopper'
 import { makeStyles } from '@material-ui/core/styles'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { 
@@ -37,7 +35,7 @@ export default function FilterBar() {
         <FilterOption name="Model" control="dropdown"/>
         <FilterOption name="Bedrooms" control="dropdown"/>
         <FilterOption name="Prices" control="dropdown"/>
-        <FilterModal/>
+        <LayersPopper/>
       </div>
     </div>
   )
@@ -58,7 +56,7 @@ const FilterOption = ({name, control}) => {
       {control === 'dropdown' && 
         name === 'Model' 
         ? (<select name='flat_model' onChange={updateHandler}>
-          <option value="" selected>All</option>
+          <option value="">All</option>
           <option>Improved</option>
           <option>New Generation</option>
           <option>Standard</option>
@@ -82,7 +80,7 @@ const FilterOption = ({name, control}) => {
         </select>) 
         : name === 'Bedrooms' 
         ? (<select name='room' onChange={updateHandler}>
-          <option value="" selected>All</option>
+          <option value="">All</option>
           <option value="1 ROOM">1 Rooms</option>
           <option value="2 ROOM">2 Rooms</option>
           <option value="3 ROOM">3 Rooms</option>
@@ -92,7 +90,7 @@ const FilterOption = ({name, control}) => {
         </select>) 
         : name === 'Prices' 
         && (<select name='resale_price' onChange={updateHandler}>
-          <option value={[0, Infinity]} selected>All</option>
+          <option value={[0, Infinity]}>All</option>
           <option value={[150000, 250000]}>150K to 250K</option>
           <option value={[250000, 500000]}>250K to 500K</option>
           <option value={[500000, Infinity]}>More than 500K</option>
diff --git a/src/layouts/desktop/FilterModal.js b/src/layouts/desktop/FilterModal.js
deleted file mode 100644
index 40c39db..0000000
--- a/src/layouts/desktop/FilterModal.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React from 'react'
-import { FiMenu } from "react-icons/fi"
-import { makeStyles } from '@material-ui/core/styles'
-import Button from '@material-ui/core/Button'
-import CheckBox from 'components/CheckBox'
-import RadioButton from 'components/Radio'
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Modal from '@material-ui/core/Modal'
-import Backdrop from '@material-ui/core/Backdrop'
-import Fade from '@material-ui/core/Fade'
-import { useRecoilState } from 'recoil'
-import { 
-  layerSelection, 
-  modalControls,
-  overlaySelection
-} from 'data/recoil'
-
-export default function FilterModal() {
-  const classes = useStyles()
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Button 
-        onClick={() => setOpen(true)}
-        startIcon={<FiMenu className={classes.icon} />}
-        className={classes.button}
-        disableRipple> 
-        {'More'}
-      </Button>
-      <Modal
-        aria-labelledby="transition-modal-title"
-        aria-describedby="transition-modal-description"
-        className={classes.modal}
-        open={open}
-        onClose={() => setOpen(false)}
-        closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 500,
-        }}
-      >
-        <Fade in={open}>
-          <div className={classes.paper}>
-            <h2 id="transition-modal-title">More Selections</h2>
-            <div className="modal-filter-cols">
-              <FilterGroup title="Filter Attributes" group="attributes"/>
-              <div>
-                <FilterGroup title="Layers" group="layers" closePanel={() => setOpen(false)}/>
-              </div>
-            </div>
-            <div className="modal-filter-footer">
-              <div>
-                <button>Reset</button>
-                <button onClick={() => setOpen(false)}>Done</button>
-              </div>
-            </div>
-          </div>
-        </Fade>
-      </Modal>
-    </>
-  )
-}
-
-const FilterGroup = ({title, group, closePanel}) => {
-  const [controls, setControls] = useRecoilState(modalControls)
-  const [layer, setLayer] = useRecoilState(layerSelection);
-  const [overlay, setOverlay] = useRecoilState(overlaySelection);
-  
-  //handler for radio groups
-  const handleLayer = (e) => setLayer(e.target.value);
-
-  //handler for checkboxes
-  const handleChange = (e) => {
-    setControls({ 
-      ...controls,
-      [group]: {
-        ...controls[group],
-        [e.target.type]: {
-          ...controls[group][e.target.type],
-          [e.target.name]: e.target.checked
-        }
-      }
-    });
-    if (group === 'layers') {
-      let olyrs = [...overlay]
-      if (e.target.checked) {
-        olyrs.push(e.target.name)
-        setOverlay(olyrs)
-      } else {
-        const fOLyrs = olyrs.filter(val => val !== e.target.name);
-        setOverlay(fOLyrs)
-      }
-    }
-  };  
-
-  return (
-    <div>
-      <h3>{title}</h3>
-      {controls[group].radio
-       ? <RadioGroup value={layer} name={group}> 
-          {Object.keys(controls[group].radio).map(lbl => {
-            const val = controls[group].radio[lbl]
-            return <FormControlLabel 
-              value={val}
-              key={`filter-modal-radio-${val}`}
-              onChange={handleLayer}
-              onClick={closePanel}
-              control={<RadioButton value={val} />}
-              label={lbl}
-            />
-          })}
-        </RadioGroup>
-        : null
-      }
-      {controls[group].checkbox
-        ? <FormGroup>
-            {Object.keys(controls[group].checkbox).map(lbl => 
-              <FormControlLabel
-                key={`filter-modal-checkbox-${lbl}`}
-                control={<CheckBox checked={controls[group].checkbox[lbl]} onChange={handleChange} name={lbl} />}
-                label={lbl}
-              />
-            )}
-          </FormGroup>
-        : null
-      }
-    </div>
-  )
-}
-
-const useStyles = makeStyles({
-  button: { 
-    textAlign: 'center',
-    color: 'var(--grey-unselect)',
-    fontWeight: 600,
-    transition: 'all ease-in-out 0.15s',
-    marginLeft: '-0.8rem',
-    marginBottom: '-0.4rem',
-    '&:hover': {
-      color: 'var(--blue-highlight)',
-      cursor: 'pointer',
-    },
-    '& span': {
-      flexDirection: 'column',
-      alignItems: 'center',
-      margin: 0,
-    },
-  },
-  icon: {
-    fontSize: '1.5rem',    
-  },
-  modal: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  paper: {
-    color: 'var(--black-txt)',
-    minHeight: '70vh',
-    minWidth: '70vw',
-    overflowY: 'hidden',
-    backgroundColor: 'white',
-    boxShadow: 'var(--light-background)',
-    padding: '70px',
-    borderRadius: '5px',
-    border: 'none',
-    position: 'relative',
-    '&:focus': {
-      border: 'none',
-      outline: 'none',
-    },
-    '& h2': {
-      textTransform: 'uppercase',
-    },
-    '& h3': {
-      color: 'var(--blue-highlight)',
-    },
-    '& .modal-filter-cols': {
-      display: 'flex',
-      '& div': {
-        flex: 1,
-      }
-    },
-    '& .modal-filter-footer': {
-      position: 'absolute',
-      right: '5rem',
-      bottom: '5rem',
-      '& button': {
-        color: 'white',
-        marginTop: '20px',
-        marginLeft: '16px',
-        borderRadius: '5px',
-        letterSpacing: '0.75px',
-      },
-      '& button:nth-child(1)': {
-        background: 'var(--blue-highlight)'
-      },
-      '& button:nth-child(2)': {
-        background: '#273246'
-      }
-    }
-  },
-});
\ No newline at end of file
diff --git a/src/layouts/desktop/LayersPopper.js b/src/layouts/desktop/LayersPopper.js
new file mode 100644
index 0000000..a86d102
--- /dev/null
+++ b/src/layouts/desktop/LayersPopper.js
@@ -0,0 +1,176 @@
+import React from 'react'
+import IconButton from '@material-ui/core/IconButton';
+import { FaLayerGroup } from "react-icons/fa"
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import RadioButton from 'components/Radio'
+import CheckBox from 'components/CheckBox'
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from '@material-ui/core/styles';
+import { useRecoilState } from 'recoil'
+import { 
+  layerSelection, 
+  modalControls,
+  overlaySelection
+} from 'data/recoil'
+
+export default function LayersPopper() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  // return focus to the button when we transitioned from !open -> open
+  const prevOpen = React.useRef(open);
+  React.useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  const [controls, setControls] = useRecoilState(modalControls)
+  const [layer, setLayer] = useRecoilState(layerSelection);
+  const [overlay, setOverlay] = useRecoilState(overlaySelection);
+  
+  //handler for radio groups
+  const handleLayer = (e) => setLayer(e.target.value);
+
+  //handler for checkboxes
+  const handleChange = (e) => {
+    setControls({ 
+      ...controls,
+      [group]: {
+        ...controls[group],
+        [e.target.type]: {
+          ...controls[group][e.target.type],
+          [e.target.name]: e.target.checked
+        }
+      }
+    });
+    if (group === 'layers') {
+      let olyrs = [...overlay]
+      if (e.target.checked) {
+        olyrs.push(e.target.name)
+        setOverlay(olyrs)
+      } else {
+        const fOLyrs = olyrs.filter(val => val !== e.target.name);
+        setOverlay(fOLyrs)
+      }
+    }
+  };  
+
+  const group = 'layers'
+
+
+  return (
+    <div className={classes.root}>
+        <IconButton 
+          ref={anchorRef}
+          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+          variant="outlined" 
+          size="small" 
+          className={classes.icon}>
+          <FaLayerGroup/>
+        </IconButton>
+        <Popper className={classes.paper} open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
+          <Paper>
+            <ClickAwayListener onClickAway={handleClose}>
+              <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
+                {controls[group].radio
+                ? <RadioGroup value={layer} name={group}> 
+                    {Object.keys(controls[group].radio).map(lbl => {
+                      const val = controls[group].radio[lbl]
+                      return (
+                      <MenuItem key={`filter-modal-radio-${val}`} disableRipple>
+                        <ListItemIcon>
+                          <FormControlLabel 
+                            value={val}
+                            onClick={handleClose}
+                            onChange={handleLayer}
+                            control={<RadioButton value={val} />}
+                            label={lbl}
+                          />
+                        </ListItemIcon>
+                      </MenuItem>)
+                    })}
+                  </RadioGroup>
+                  : null
+                }
+                {controls[group].checkbox
+                  ? <FormGroup>
+                      {Object.keys(controls[group].checkbox).map(lbl => 
+                        <MenuItem key={`filter-modal-checkbox-${lbl}`} disableRipple>
+                          <ListItemIcon>
+                            <FormControlLabel
+                              control={<CheckBox checked={controls[group].checkbox[lbl]} onChange={handleChange} name={lbl} />}
+                              label={lbl}
+                            />
+                          </ListItemIcon>
+                        </MenuItem>
+                      )}
+                    </FormGroup>
+                  : null
+                }
+              </MenuList>
+            </ClickAwayListener>
+          </Paper>
+        </Popper>
+    </div>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  paper: {
+    zIndex: 1
+  },
+  root: {
+    width: '2rem',
+    padding: '0.5rem 1rem',
+    paddingRight: '1.3rem',
+    textAlign: 'center',
+    margin: 'auto 0',
+  },
+  icon: {
+    height: '2rem',
+    width: '2rem',
+    '& span': {
+      '& svg': {
+        fontSize: '2rem',
+        borderRadius: '50%',
+        color: 'var(--grey-unselect)',
+      },
+      '& svg:hover': {
+        color: 'var(--blue-highlight)',
+        cursor: 'pointer',
+      }
+    },
+  }
+}));