diff --git a/server/src/services/api/scannerApi.js b/server/src/services/api/scannerApi.js
index dce481ab8..8b468d6c2 100644
--- a/server/src/services/api/scannerApi.js
+++ b/server/src/services/api/scannerApi.js
@@ -37,17 +37,17 @@ module.exports = async function scannerApi(category, method, data = null) {
           console.log(
             `[scannerApi] Request to scan new location by ${data.username}${
               data.userId ? ` (${data.userId})` : ''
-            } - type ${data.scanNextType}: ${data.scanNextLocation[0].toFixed(
+            } - type ${data.scanNextType}: ${data.scanLocation[0].toFixed(
               5,
-            )},${data.scanNextLocation[1].toFixed(5)}`,
+            )},${data.scanLocation[1].toFixed(5)}`,
           )
           const coords =
             config.scanner.backendConfig.platform === 'mad'
-              ? `${parseFloat(
-                  data.scanNextCoords[0][0].toFixed(5),
-                )},${parseFloat(data.scanNextCoords[0][1].toFixed(5))}`
+              ? `${parseFloat(data.scanCoords[0][0].toFixed(5))},${parseFloat(
+                  data.scanCoords[0][1].toFixed(5),
+                )}`
               : JSON.stringify(
-                  data.scanNextCoords.map((coord) => ({
+                  data.scanCoords.map((coord) => ({
                     lat: parseFloat(coord[0].toFixed(5)),
                     lon: parseFloat(coord[1].toFixed(5)),
                   })),
@@ -76,12 +76,12 @@ module.exports = async function scannerApi(category, method, data = null) {
           console.log(
             `[scannerApi] Request to scan new zone by ${data.username}${
               data.userId ? ` (${data.userId})` : ''
-            } - size ${data.scanZoneSize}: ${data.scanZoneLocation[0].toFixed(
+            } - size ${data.scanZoneSize}: ${data.scanLocation[0].toFixed(
               5,
-            )},${data.scanZoneLocation[1].toFixed(5)}`,
+            )},${data.scanLocation[1].toFixed(5)}`,
           )
           const coords = JSON.stringify(
-            data.scanZoneCoords.map((coord) => ({
+            data.scanCoords.map((coord) => ({
               lat: parseFloat(coord[0].toFixed(5)),
               lon: parseFloat(coord[1].toFixed(5)),
             })),
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 281782510..e6228e141 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -10,8 +10,7 @@ import { useStatic, useStore } from '@hooks/useStore'
 import Nav from './layout/Nav'
 import QueryData from './QueryData'
 import Webhook from './layout/dialogs/webhooks/Webhook'
-import ScanNext from './layout/dialogs/scanner/ScanNext'
-import ScanZone from './layout/dialogs/scanner/ScanZone'
+import ScanOnDemand from './layout/dialogs/scanner/ScanOnDemand'
 import ClientError from './layout/dialogs/ClientError'
 
 const userSettingsCategory = (category) => {
@@ -164,7 +163,7 @@ export default function Map({
         Object.entries({ ...ui, ...ui.wayfarer, ...ui.admin }).map(
           ([category, value]) => {
             let enabled = false
-
+            if (scanZoneMode === 'setLocation') return null
             switch (category) {
               case 'scanAreas':
                 if (
@@ -275,20 +274,21 @@ export default function Map({
         )
       )}
       {scanNextMode && (
-        <ScanNext
+        <ScanOnDemand
           map={map}
-          scanNextMode={scanNextMode}
-          setScanNextMode={setScanNextMode}
+          scanMode={scanNextMode}
+          setScanMode={setScanNextMode}
           scanner={scanner}
+          mode="scanNext"
         />
       )}
       {scanZoneMode && (
-        <ScanZone
+        <ScanOnDemand
           map={map}
-          theme={theme}
-          scanZoneMode={scanZoneMode}
-          setScanZoneMode={setScanZoneMode}
+          scanMode={scanZoneMode}
+          setScanMode={setScanZoneMode}
           scanner={scanner}
+          mode="scanZone"
         />
       )}
       <Nav
diff --git a/src/components/layout/custom/AdvancedAccordion.jsx b/src/components/layout/custom/AdvancedAccordion.jsx
index 9274a923f..df7ad354f 100644
--- a/src/components/layout/custom/AdvancedAccordion.jsx
+++ b/src/components/layout/custom/AdvancedAccordion.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import {
-  createTheme,
-  ThemeProvider,
+  withStyles,
   Grid,
   Typography,
   Accordion,
@@ -11,84 +10,70 @@ import {
 import { ExpandMore } from '@material-ui/icons'
 import { useTranslation } from 'react-i18next'
 
-const accordionTheme = {
-  overrides: {
-    MuiAccordion: {
-      root: {
-        marginTop: 5,
-        border: 'none',
-        boxShadow: 'none',
-        borderRadius: 5,
-        '&:before': {
-          display: 'none',
-        },
-        '&$expanded': {
-          marginTop: 5,
-        },
-      },
-      rounded: {
-        borderRadius: 5,
-      },
-      expanded: {},
+const StyledAccordion = withStyles({
+  root: {
+    marginTop: 5,
+    border: 'none',
+    boxShadow: 'none',
+    borderRadius: 5,
+    '&:before': {
+      display: 'none',
     },
-    MuiAccordionSummary: {
-      root: {
-        backgroundColor: '#2e2e2e',
-        padding: '0px 5px 0px 8px',
-        minHeight: 30,
-        borderRadius: 5,
-        '&$expanded': {
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-          minHeight: 30,
-        },
-      },
-      content: {
-        margin: '8px 0px',
-        '&$expanded': {
-          margin: '8px 0px',
-        },
-      },
-      expandIcon: {
-        padding: 0,
-        margin: 0,
-      },
-      expanded: {},
+    '&$expanded': {
+      marginTop: 5,
     },
   },
-}
+  rounded: {
+    borderRadius: 5,
+  },
+  expanded: {},
+})(Accordion)
+
+const StyledAccordionSummary = withStyles({
+  root: {
+    backgroundColor: '#2e2e2e',
+    padding: '0px 5px 0px 8px',
+    minHeight: 30,
+    borderRadius: 5,
+    '&$expanded': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      minHeight: 30,
+    },
+  },
+  content: {
+    margin: '8px 0px',
+    '&$expanded': {
+      margin: '8px 0px',
+    },
+  },
+  expandIcon: {
+    padding: 0,
+    margin: 0,
+  },
+  expanded: {},
+})(AccordionSummary)
 
-export default function AdvancedAccordion({ block, theme = {} }) {
+export default function AdvancedAccordion({ block = null, children }) {
   const { t } = useTranslation()
   return (
-    <ThemeProvider theme={theme}>
-      <ThemeProvider
-        theme={(theme2) =>
-          createTheme({
-            ...theme2,
-            ...accordionTheme,
-          })
-        }
+    <StyledAccordion>
+      <StyledAccordionSummary
+        expandIcon={<ExpandMore style={{ color: 'white' }} />}
       >
-        <Accordion>
-          <AccordionSummary
-            expandIcon={<ExpandMore style={{ color: 'white' }} />}
-          >
-            <Typography variant="caption">{t('advanced')}</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Grid
-              container
-              style={{ width: 200 }}
-              direction="row"
-              justifyContent="center"
-              alignItems="center"
-            >
-              {block}
-            </Grid>
-          </AccordionDetails>
-        </Accordion>
-      </ThemeProvider>
-    </ThemeProvider>
+        <Typography variant="caption">{t('advanced')}</Typography>
+      </StyledAccordionSummary>
+      <AccordionDetails>
+        <Grid
+          container
+          style={{ width: 200 }}
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+        >
+          {block ?? children}
+        </Grid>
+      </AccordionDetails>
+    </StyledAccordion>
   )
 }
diff --git a/src/components/layout/dialogs/scanner/ScanDialog.jsx b/src/components/layout/dialogs/scanner/ScanDialog.jsx
new file mode 100644
index 000000000..7b866f7ab
--- /dev/null
+++ b/src/components/layout/dialogs/scanner/ScanDialog.jsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Dialog, DialogContent, Grid, Typography } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+import Header from '@components/layout/general/Header'
+import Footer from '@components/layout/general/Footer'
+
+export default function ScanDialog({ scanMode, setScanMode }) {
+  const { t } = useTranslation()
+
+  return (
+    <Dialog
+      onClose={() => setScanMode(false)}
+      open={['confirmed', 'loading', 'error'].includes(scanMode)}
+      maxWidth="xs"
+    >
+      <Header
+        titles={[`scan_${scanMode}_title`]}
+        action={() => setScanMode(false)}
+      />
+      <DialogContent>
+        <Grid item style={{ textAlign: 'center' }}>
+          <Typography variant="subtitle1" align="center">
+            {t(`scan_${scanMode}`)}
+          </Typography>
+        </Grid>
+      </DialogContent>
+      <Footer
+        options={[
+          {
+            name: 'close',
+            icon: 'Clear',
+            color: 'primary',
+            align: 'right',
+            action: () => setScanMode(false),
+          },
+        ]}
+      />
+    </Dialog>
+  )
+}
diff --git a/src/components/layout/dialogs/scanner/ScanNext.jsx b/src/components/layout/dialogs/scanner/ScanNext.jsx
deleted file mode 100644
index 51d92cc0a..000000000
--- a/src/components/layout/dialogs/scanner/ScanNext.jsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useQuery, useLazyQuery } from '@apollo/client'
-import { useTranslation } from 'react-i18next'
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogActions,
-  Button,
-  Grid,
-  Typography,
-} from '@material-ui/core'
-
-import { useStatic, useStore } from '@hooks/useStore'
-import Query from '@services/Query'
-import ScanNextTarget from './ScanNextTarget'
-
-export default function ScanNext({
-  map,
-  scanNextMode,
-  setScanNextMode,
-  scanner: {
-    scannerType,
-    scanNextShowScanCount,
-    scanNextShowScanQueue,
-    scanNextAreaRestriction,
-  },
-}) {
-  const { data: scanAreas } = scanNextAreaRestriction?.length
-    ? useQuery(Query.scanAreas())
-    : { data: null }
-  const { loggedIn } = useStatic((state) => state.auth)
-  const { t } = useTranslation()
-  const location = useStore((s) => s.location)
-  const [queue, setQueue] = useState('init')
-  const [scanNextLocation, setScanNextLocation] = useState(location)
-  const [scanNextCoords, setScanNextCoords] = useState([location])
-  const [scanNextType, setScanNextType] = useState('S')
-  const [scanNext, { error: scannerError, data: scannerResponse }] =
-    useLazyQuery(Query.scanner(), {
-      variables: {
-        category: 'scanNext',
-        method: 'GET',
-        data: {
-          username: loggedIn?.username || 'a visitor',
-          userId: loggedIn?.id,
-          scanNextLocation,
-          scanNextCoords,
-          scanNextType,
-        },
-      },
-      fetchPolicy: 'no-cache',
-    })
-  const [getQueue, { data: scannerQueueResponse }] = useLazyQuery(
-    Query.scanner(),
-    {
-      variables: {
-        category: 'getQueue',
-        method: 'GET',
-        data: {
-          username: loggedIn?.username || 'a visitor',
-          userId: loggedIn?.id,
-          type: 'scan_next',
-          typeName: 'scanNext',
-        },
-      },
-      fetchPolicy: 'no-cache',
-    },
-  )
-
-  if (scanNextMode === 'sendCoords') {
-    scanNext()
-    setScanNextMode('loading')
-  }
-  if (scannerError) {
-    setScanNextMode('error')
-  }
-  if (scannerResponse) {
-    if (scannerResponse.scanner?.status === 'ok') {
-      setScanNextMode('confirmed')
-    } else {
-      setScanNextMode('error')
-    }
-  }
-
-  if (scanNextShowScanQueue) {
-    if (queue === 'init') {
-      getQueue()
-      setQueue('...')
-    }
-    useEffect(() => {
-      const timer = setInterval(() => {
-        if (scanNextMode === 'setLocation') {
-          getQueue()
-        }
-      }, 2000)
-      return () => clearInterval(timer)
-    })
-  }
-  if (scannerQueueResponse && scannerQueueResponse.scanner?.status === 'ok') {
-    setQueue(scannerQueueResponse.scanner.message)
-    scannerQueueResponse.scanner = {}
-  }
-
-  return (
-    <>
-      {scanNextMode === 'setLocation' && (
-        <ScanNextTarget
-          map={map}
-          scannerType={scannerType}
-          queue={queue}
-          setScanNextMode={setScanNextMode}
-          scanNextLocation={scanNextLocation}
-          setScanNextLocation={setScanNextLocation}
-          scanNextCoords={scanNextCoords}
-          setScanNextCoords={setScanNextCoords}
-          scanNextType={scanNextType}
-          setScanNextType={setScanNextType}
-          scanNextShowScanCount={scanNextShowScanCount}
-          scanNextShowScanQueue={scanNextShowScanQueue}
-          scanNextAreaRestriction={scanNextAreaRestriction}
-          scanAreas={scanAreas ? scanAreas.scanAreas[0]?.features : null}
-        />
-      )}
-      <Dialog
-        onClose={() => setScanNextMode(false)}
-        open={['confirmed', 'loading', 'error'].includes(scanNextMode)}
-        maxWidth="xs"
-      >
-        <DialogTitle>{t(`scan_${scanNextMode}_title`)}</DialogTitle>
-        <DialogContent>
-          <Grid item style={{ textAlign: 'center' }}>
-            <Typography variant="subtitle1" align="center">
-              {t(`scan_${scanNextMode}`)}
-            </Typography>
-          </Grid>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setScanNextMode(false)}>{t('close')}</Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
diff --git a/src/components/layout/dialogs/scanner/ScanNextTarget.jsx b/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
index cbcf04a69..87a909f1b 100644
--- a/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
+++ b/src/components/layout/dialogs/scanner/ScanNextTarget.jsx
@@ -1,10 +1,35 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react'
 import { Grid, Button, ButtonGroup, Typography } from '@material-ui/core'
-import { point, polygon } from '@turf/helpers'
+import { point } from '@turf/helpers'
 import destination from '@turf/destination'
-import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
 import { Circle, Marker, Popup } from 'react-leaflet'
 import { useTranslation } from 'react-i18next'
+import Utility from '@services/Utility'
+
+const RADIUS_POKEMON = 70
+const RADIUS_GYM = 750
+const DISTANCE = {
+  M: RADIUS_POKEMON * 1.732,
+  XL: RADIUS_GYM * 1.732,
+}
+
+const calcScanNextCoords = (center, type) => {
+  const coords = [center]
+  if (type === 'S') return coords
+  const start = point([center[1], center[0]])
+  const options = { units: 'kilometers' }
+  return coords.concat(
+    [0, 60, 120, 180, 240, 300].map((bearing) => {
+      const [lon, lat] = destination(
+        start,
+        DISTANCE[type] / 1000,
+        bearing,
+        options,
+      ).geometry.coordinates
+      return [lat, lon]
+    }),
+  )
+}
 
 export default function ScanNextTarget({
   map,
@@ -23,52 +48,6 @@ export default function ScanNextTarget({
   scanAreas,
 }) {
   const [position, setPosition] = useState(scanNextLocation)
-  const radiusPokemon = 70
-  const radiusGym = 750
-  const calcScanNextCoords = (center, type) => {
-    const coords = [center]
-    if (type === 'S') return coords
-    const start = point([center[1], center[0]])
-    const distance = {
-      M: radiusPokemon * 1.732,
-      XL: radiusGym * 1.732,
-    }
-    const options = { units: 'kilometers' }
-    return coords.concat(
-      [0, 60, 120, 180, 240, 300].map((bearing) => {
-        const [lon, lat] = destination(
-          start,
-          distance[type] / 1000,
-          bearing,
-          options,
-        ).geometry.coordinates
-        return [lat, lon]
-      }),
-    )
-  }
-  const checkAreaValidity = (center) => {
-    if (!scanNextAreaRestriction?.length || !scanAreas?.length) return true
-    let isValid = false
-    if (scanNextAreaRestriction?.length && scanAreas?.length) {
-      const testPoint = point([center[1], center[0]])
-      scanNextAreaRestriction.map((area) => {
-        if (
-          scanAreas.some(
-            (scanArea) =>
-              scanArea.properties.name === area &&
-              booleanPointInPolygon(
-                testPoint,
-                polygon(scanArea.geometry.coordinates),
-              ),
-          )
-        ) {
-          isValid = true
-        }
-        return true
-      })
-    }
-    return isValid
-  }
 
   const { t } = useTranslation()
   const scanMarkerRef = useRef(null)
@@ -100,7 +79,9 @@ export default function ScanNextTarget({
     }
   }, [])
 
-  const isInAllowedArea = checkAreaValidity(position)
+  const isInAllowedArea = scanNextAreaRestriction.length
+    ? Utility.checkAreaValidity(position, scanNextAreaRestriction, scanAreas)
+    : true
 
   return (
     <>
@@ -188,7 +169,7 @@ export default function ScanNextTarget({
       {scanNextCoords.map((coords) => (
         <Circle
           key={[coords[0], coords[1]]}
-          radius={radiusPokemon}
+          radius={RADIUS_POKEMON}
           center={[coords[0], coords[1]]}
           fillOpacity={0.5}
           pathOptions={{
@@ -199,7 +180,7 @@ export default function ScanNextTarget({
       {scanNextType === 'M' ? (
         <Circle
           key={[scanNextCoords[0][0], scanNextCoords[0][1]]}
-          radius={radiusGym + radiusPokemon}
+          radius={RADIUS_GYM + RADIUS_POKEMON}
           center={[scanNextCoords[0][0], scanNextCoords[0][1]]}
           fillOpacity={0.1}
           pathOptions={{
@@ -213,7 +194,7 @@ export default function ScanNextTarget({
         scanNextCoords.map((coords) => (
           <Circle
             key={[coords[0], coords[1]]}
-            radius={radiusGym}
+            radius={RADIUS_GYM}
             center={[coords[0], coords[1]]}
             fillOpacity={0.1}
             pathOptions={{
diff --git a/src/components/layout/dialogs/scanner/ScanOnDemand.jsx b/src/components/layout/dialogs/scanner/ScanOnDemand.jsx
new file mode 100644
index 000000000..93e73784f
--- /dev/null
+++ b/src/components/layout/dialogs/scanner/ScanOnDemand.jsx
@@ -0,0 +1,165 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import React, { useEffect, useState } from 'react'
+import { useQuery, useLazyQuery } from '@apollo/client'
+import { useStatic, useStore } from '@hooks/useStore'
+import Query from '@services/Query'
+import ScanNextTarget from './ScanNextTarget'
+import ScanZoneTarget from './ScanZoneTarget'
+
+import ScanDialog from './ScanDialog'
+
+export default function ScanOnDemand({
+  map,
+  scanMode,
+  setScanMode,
+  scanner: {
+    scannerType,
+    scanNextShowScanCount,
+    scanNextShowScanQueue,
+    scanNextAreaRestriction,
+    scanZoneShowScanCount,
+    scanZoneShowScanQueue,
+    advancedScanZoneOptions,
+    scanZoneRadius,
+    scanZoneSpacing,
+    scanZoneMaxSize,
+    scanZoneAreaRestriction,
+  },
+  mode,
+}) {
+  const { loggedIn } = useStatic((state) => state.auth)
+
+  const location = useStore((s) => s.location)
+
+  const [queue, setQueue] = useState('init')
+  const [scanLocation, setScanLocation] = useState(location)
+  const [scanCoords, setScanCoords] = useState([location])
+  const [scanNextType, setScanNextType] = useState('S')
+  const [scanZoneSize, setScanZoneSize] = useState(1)
+
+  const { data: scanAreas } = useQuery(Query.scanAreas())
+  const [demandScan, { error: scannerError, data: scannerResponse }] =
+    useLazyQuery(Query.scanner(), {
+      variables: {
+        category: mode,
+        method: 'GET',
+        data: {
+          username: loggedIn?.username || 'a visitor',
+          userId: loggedIn?.id,
+          scanLocation,
+          scanCoords,
+          scanNextType,
+          scanZoneSize,
+        },
+      },
+      fetchPolicy: 'no-cache',
+    })
+  const [getQueue, { data: scannerQueueResponse }] = useLazyQuery(
+    Query.scanner(),
+    {
+      variables: {
+        category: 'getQueue',
+        method: 'GET',
+        data: {
+          username: loggedIn?.username || 'a visitor',
+          userId: loggedIn?.id,
+          type: 'scan_next',
+          typeName: mode,
+        },
+      },
+      fetchPolicy: 'no-cache',
+    },
+  )
+
+  useEffect(() => {
+    if (scanMode === 'sendCoords') {
+      demandScan()
+      setScanMode('loading')
+    }
+  }, [scanMode])
+
+  useEffect(() => {
+    if (scannerError) {
+      setScanMode('error')
+    }
+    if (scannerResponse) {
+      if (scannerResponse?.scanner?.status === 'ok') {
+        setScanMode('confirmed')
+      } else {
+        setScanMode('error')
+      }
+    }
+  }, [!!scannerError, scannerResponse?.scanner?.status])
+
+  useEffect(() => {
+    let timer
+    if (scanNextShowScanQueue || scanZoneShowScanQueue) {
+      if (queue === 'init') {
+        getQueue()
+        setQueue('...')
+      }
+      timer = setInterval(() => {
+        if (scanMode === 'setLocation') {
+          getQueue()
+        }
+      }, 2000)
+    }
+    return () => (timer ? clearInterval(timer) : null)
+  })
+
+  useEffect(() => {
+    if (scannerQueueResponse?.scanner?.status === 'ok') {
+      setQueue(scannerQueueResponse.scanner.message)
+      scannerQueueResponse.scanner = {}
+    }
+  }, [!!scannerQueueResponse?.scanner])
+
+  return (
+    <>
+      {scanMode === 'setLocation' && (
+        <>
+          {mode === 'scanNext' ? (
+            <ScanNextTarget
+              map={map}
+              scannerType={scannerType}
+              queue={queue}
+              setScanNextMode={setScanMode}
+              scanNextLocation={scanLocation}
+              setScanNextLocation={setScanLocation}
+              scanNextCoords={scanCoords}
+              setScanNextCoords={setScanCoords}
+              scanNextType={scanNextType}
+              setScanNextType={setScanNextType}
+              scanNextShowScanCount={scanNextShowScanCount}
+              scanNextShowScanQueue={scanNextShowScanQueue}
+              scanNextAreaRestriction={scanNextAreaRestriction}
+              scanAreas={scanAreas ? scanAreas.scanAreas[0]?.features : null}
+            />
+          ) : (
+            <ScanZoneTarget
+              map={map}
+              scannerType={scannerType}
+              queue={queue}
+              setScanZoneMode={setScanMode}
+              scanZoneLocation={scanLocation}
+              setScanZoneLocation={setScanLocation}
+              scanZoneCoords={scanCoords}
+              setScanZoneCoords={setScanCoords}
+              scanZoneSize={scanZoneSize}
+              setScanZoneSize={setScanZoneSize}
+              scanZoneShowScanCount={scanZoneShowScanCount}
+              scanZoneShowScanQueue={scanZoneShowScanQueue}
+              advancedScanZoneOptions={advancedScanZoneOptions}
+              scanZoneRadius={scanZoneRadius}
+              scanZoneSpacing={scanZoneSpacing}
+              scanZoneMaxSize={scanZoneMaxSize}
+              scanZoneAreaRestriction={scanZoneAreaRestriction}
+              scanAreas={scanAreas ? scanAreas.scanAreas[0]?.features : null}
+            />
+          )}
+        </>
+      )}
+      <ScanDialog scanMode={scanMode} setScanMode={setScanMode} />
+    </>
+  )
+}
diff --git a/src/components/layout/dialogs/scanner/ScanZone.jsx b/src/components/layout/dialogs/scanner/ScanZone.jsx
deleted file mode 100644
index 1fec1acef..000000000
--- a/src/components/layout/dialogs/scanner/ScanZone.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useQuery, useLazyQuery } from '@apollo/client'
-import { useTranslation } from 'react-i18next'
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogActions,
-  Button,
-  Grid,
-  Typography,
-} from '@material-ui/core'
-
-import { useStatic, useStore } from '@hooks/useStore'
-import Query from '@services/Query'
-import ScanZoneTarget from './ScanZoneTarget'
-
-export default function ScanZone({
-  map,
-  theme,
-  scanZoneMode,
-  setScanZoneMode,
-  scanner: {
-    scannerType,
-    scanZoneShowScanCount,
-    scanZoneShowScanQueue,
-    advancedScanZoneOptions,
-    scanZoneRadius,
-    scanZoneSpacing,
-    scanZoneMaxSize,
-    scanZoneAreaRestriction,
-  },
-}) {
-  const { data: scanAreas } = scanZoneAreaRestriction?.length
-    ? useQuery(Query.scanAreas())
-    : { data: null }
-  const { loggedIn } = useStatic((state) => state.auth)
-  const { t } = useTranslation()
-  const location = useStore((s) => s.location)
-  const [queue, setQueue] = useState('init')
-  const [scanZoneLocation, setScanZoneLocation] = useState(location)
-  const [scanZoneCoords, setScanZoneCoords] = useState([location])
-  const [scanZoneSize, setScanZoneSize] = useState(1)
-  const [scanZone, { error: scannerError, data: scannerResponse }] =
-    useLazyQuery(Query.scanner(), {
-      variables: {
-        category: 'scanZone',
-        method: 'GET',
-        data: {
-          username: loggedIn?.username || 'a visitor',
-          userId: loggedIn?.id,
-          scanZoneLocation,
-          scanZoneCoords,
-          scanZoneSize,
-        },
-      },
-      fetchPolicy: 'no-cache',
-    })
-  const [getQueue, { data: scannerQueueResponse }] = useLazyQuery(
-    Query.scanner(),
-    {
-      variables: {
-        category: 'getQueue',
-        method: 'GET',
-        data: {
-          username: loggedIn?.username || 'a visitor',
-          userId: loggedIn?.id,
-          type: 'scan_next',
-          typeName: 'scanZone',
-        },
-      },
-      fetchPolicy: 'no-cache',
-    },
-  )
-
-  if (scanZoneMode === 'sendCoords') {
-    scanZone()
-    setScanZoneMode('loading')
-  }
-  if (scannerError) {
-    setScanZoneMode('error')
-  }
-  if (scannerResponse) {
-    if (scannerResponse.scanner?.status === 'ok') {
-      setScanZoneMode('confirmed')
-    } else {
-      setScanZoneMode('error')
-    }
-  }
-
-  if (scanZoneShowScanQueue) {
-    if (queue === 'init') {
-      getQueue()
-      setQueue('...')
-    }
-    useEffect(() => {
-      const timer = setInterval(() => {
-        if (scanZoneMode === 'setLocation') {
-          getQueue()
-        }
-      }, 2000)
-      return () => clearInterval(timer)
-    })
-  }
-  if (scannerQueueResponse && scannerQueueResponse.scanner?.status === 'ok') {
-    setQueue(scannerQueueResponse.scanner.message)
-    scannerQueueResponse.scanner = {}
-  }
-
-  return (
-    <>
-      {scanZoneMode === 'setLocation' && (
-        <ScanZoneTarget
-          map={map}
-          theme={theme}
-          scannerType={scannerType}
-          queue={queue}
-          setScanZoneMode={setScanZoneMode}
-          scanZoneLocation={scanZoneLocation}
-          setScanZoneLocation={setScanZoneLocation}
-          scanZoneCoords={scanZoneCoords}
-          setScanZoneCoords={setScanZoneCoords}
-          scanZoneSize={scanZoneSize}
-          setScanZoneSize={setScanZoneSize}
-          scanZoneShowScanCount={scanZoneShowScanCount}
-          scanZoneShowScanQueue={scanZoneShowScanQueue}
-          advancedScanZoneOptions={advancedScanZoneOptions}
-          scanZoneRadius={scanZoneRadius}
-          scanZoneSpacing={scanZoneSpacing}
-          scanZoneMaxSize={scanZoneMaxSize}
-          scanZoneAreaRestriction={scanZoneAreaRestriction}
-          scanAreas={scanAreas ? scanAreas.scanAreas[0]?.features : null}
-        />
-      )}
-      <Dialog
-        onClose={() => setScanZoneMode(false)}
-        open={['confirmed', 'loading', 'error'].includes(scanZoneMode)}
-        maxWidth="xs"
-      >
-        <DialogTitle>{t(`scan_${scanZoneMode}_title`)}</DialogTitle>
-        <DialogContent>
-          <Grid item style={{ textAlign: 'center' }}>
-            <Typography variant="subtitle1" align="center">
-              {t(`scan_${scanZoneMode}`)}
-            </Typography>
-          </Grid>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setScanZoneMode(false)}>{t('close')}</Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  )
-}
diff --git a/src/components/layout/dialogs/scanner/ScanZoneTarget.jsx b/src/components/layout/dialogs/scanner/ScanZoneTarget.jsx
index 272d94ca4..70a9cd0e9 100644
--- a/src/components/layout/dialogs/scanner/ScanZoneTarget.jsx
+++ b/src/components/layout/dialogs/scanner/ScanZoneTarget.jsx
@@ -1,15 +1,49 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react'
 import { Grid, Button, Box, Slider, Typography } from '@material-ui/core'
-import { point, polygon } from '@turf/helpers'
+import { point } from '@turf/helpers'
 import destination from '@turf/destination'
-import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
 import { Circle, Marker, Popup } from 'react-leaflet'
 import { useTranslation } from 'react-i18next'
 import AdvancedAccordion from '@components/layout/custom/AdvancedAccordion'
+import Utility from '@services/Utility'
+
+const calcScanZoneCoords = (center, radius, spacing, scanZoneSize) => {
+  let coords = [center]
+  let currentPoint = point([center[1], center[0]])
+  const distance = radius * 2 * Math.cos(30 * (Math.PI / 180))
+  const bearings = {
+    1: 30,
+    2: 90,
+    3: 150,
+    4: 210,
+    5: 270,
+    6: 330,
+  }
+  for (let i = 1; i < scanZoneSize + 1; i += 1) {
+    let quadrant = 1
+    let step = 1
+    while (step < 6 * i + 1) {
+      currentPoint = destination(
+        currentPoint,
+        (distance * spacing) / 1000,
+        step === 1 ? 330 : bearings[quadrant],
+        { units: 'kilometers' },
+      )
+      coords = coords.concat([
+        [
+          currentPoint.geometry.coordinates[1],
+          currentPoint.geometry.coordinates[0],
+        ],
+      ])
+      quadrant = Math.floor(step / i) + 1
+      step += 1
+    }
+  }
+  return coords
+}
 
 export default function ScanZoneTarget({
   map,
-  theme,
   scannerType,
   queue,
   setScanZoneMode,
@@ -31,64 +65,6 @@ export default function ScanZoneTarget({
   const [position, setPosition] = useState(scanZoneLocation)
   const [spacing, setSpacing] = useState(scanZoneSpacing)
   const [radius, setRadius] = useState(scanZoneRadius.pokemon)
-  const calcScanZoneCoords = (center) => {
-    let coords = [center]
-    let currentPoint = point([center[1], center[0]])
-    const distance = radius * 2 * Math.cos(30 * (Math.PI / 180))
-    const bearings = {
-      1: 30,
-      2: 90,
-      3: 150,
-      4: 210,
-      5: 270,
-      6: 330,
-    }
-    for (let i = 1; i < scanZoneSize + 1; i += 1) {
-      let quadrant = 1
-      let step = 1
-      while (step < 6 * i + 1) {
-        currentPoint = destination(
-          currentPoint,
-          (distance * spacing) / 1000,
-          step === 1 ? 330 : bearings[quadrant],
-          { units: 'kilometers' },
-        )
-        coords = coords.concat([
-          [
-            currentPoint.geometry.coordinates[1],
-            currentPoint.geometry.coordinates[0],
-          ],
-        ])
-        quadrant = Math.floor(step / i) + 1
-        step += 1
-      }
-    }
-    return coords
-  }
-
-  const checkAreaValidity = (center) => {
-    if (!scanZoneAreaRestriction?.length || !scanAreas?.length) return true
-    let isValid = false
-    if (scanZoneAreaRestriction?.length && scanAreas?.length) {
-      const testPoint = point([center[1], center[0]])
-      scanZoneAreaRestriction.map((area) => {
-        if (
-          scanAreas.some(
-            (scanArea) =>
-              scanArea.properties.name === area &&
-              booleanPointInPolygon(
-                testPoint,
-                polygon(scanArea.geometry.coordinates),
-              ),
-          )
-        ) {
-          isValid = true
-        }
-        return true
-      })
-    }
-    return isValid
-  }
 
   const { t } = useTranslation()
   const scanMarkerRef = useRef(null)
@@ -102,7 +78,9 @@ export default function ScanZoneTarget({
           map.flyTo([lat, lng])
           setPosition([lat, lng])
           setScanZoneLocation([lat, lng])
-          setScanZoneCoords(calcScanZoneCoords([lat, lng]))
+          setScanZoneCoords(
+            calcScanZoneCoords([lat, lng], radius, spacing, scanZoneSize),
+          )
           const popup = scanPopupRef.current
           if (popup) {
             popup.openOn(map)
@@ -113,66 +91,45 @@ export default function ScanZoneTarget({
     [position, scanZoneLocation, scanZoneSize, spacing, radius],
   )
 
-  useEffect(() => {
-    const marker = scanMarkerRef.current
-    if (marker) {
-      marker.openPopup()
-    }
-  }, [])
-
-  const handleSizeChange = (event, newSize) => {
+  const handleSizeChange = (_event, newSize) => {
     setScanZoneSize(newSize)
-    setScanZoneCoords(calcScanZoneCoords(position))
+    setScanZoneCoords(
+      calcScanZoneCoords(position, radius, spacing, scanZoneSize),
+    )
   }
 
-  const handleSpacingChange = (event, newSpacing) => {
+  const handleSpacingChange = (_event, newSpacing) => {
     setSpacing(newSpacing)
-    setScanZoneCoords(calcScanZoneCoords(position))
+    setScanZoneCoords(
+      calcScanZoneCoords(position, radius, spacing, scanZoneSize),
+    )
   }
 
-  const handleRadiusChange = (event, newRadius) => {
+  const handleRadiusChange = (_event, newRadius) => {
     setRadius(newRadius)
-    setScanZoneCoords(calcScanZoneCoords(position))
+    setScanZoneCoords(
+      calcScanZoneCoords(position, radius, spacing, scanZoneSize),
+    )
   }
 
-  const rangeMarks = [
-    { value: scanZoneRadius.pokemon, label: t('pokemon') },
-    { value: scanZoneRadius.gym, label: t('gym') },
-  ]
-
-  const isInAllowedArea = checkAreaValidity(position)
+  const isInAllowedArea = scanZoneAreaRestriction.length
+    ? Utility.checkAreaValidity(position, scanZoneAreaRestriction, scanAreas)
+    : true
 
-  if (scanZoneCoords.length === 1) {
-    setScanZoneCoords(calcScanZoneCoords(scanZoneLocation))
-  }
+  useEffect(() => {
+    if (scanZoneCoords.length === 1) {
+      setScanZoneCoords(
+        calcScanZoneCoords(scanZoneLocation, radius, spacing, scanZoneSize),
+      )
+    }
+  }, [scanZoneCoords.length])
 
-  const advancedMenu = (
-    <Grid item xs={12} style={{ textAlign: 'center' }}>
-      <Typography variant="caption">{t('scan_zone_spacing')}</Typography>
-      <Slider
-        xs={12}
-        name="Spacing"
-        min={1}
-        max={2}
-        step={0.01}
-        value={spacing}
-        onChange={handleSpacingChange}
-        onChangeCommitted={handleSpacingChange}
-        valueLabelDisplay="auto"
-      />
-      <Typography variant="caption">{t('scan_zone_radius')}</Typography>
-      <Slider
-        xs={12}
-        name="Radius"
-        min={50}
-        max={900}
-        value={radius}
-        onChange={handleRadiusChange}
-        onChangeCommitted={handleRadiusChange}
-        valueLabelDisplay="auto"
-      />
-    </Grid>
-  )
+  useEffect(() => {
+    const marker = scanMarkerRef.current
+    if (marker) {
+      marker.openPopup()
+    }
+  }, [])
 
   return (
     <>
@@ -202,34 +159,60 @@ export default function ScanZoneTarget({
                     {t('scan_zone_size')}
                   </Typography>
                   <Slider
-                    xs={12}
                     name="Size"
                     min={1}
                     max={scanZoneMaxSize}
                     step={1}
                     value={scanZoneSize}
                     onChange={handleSizeChange}
-                    onChangeCommitted={handleSizeChange}
                     valueLabelDisplay="auto"
                   />
                   <Typography variant="caption" align="left">
                     {t('scan_zone_range')}
                   </Typography>
                   <Slider
-                    xs={12}
                     name="Range"
-                    marks={rangeMarks}
+                    marks={[
+                      { value: scanZoneRadius.pokemon, label: t('pokemon') },
+                      { value: scanZoneRadius.gym, label: t('gym') },
+                    ]}
                     min={-200}
                     max={1000}
                     step={null}
                     value={radius}
                     onChange={handleRadiusChange}
-                    onChangeCommitted={handleRadiusChange}
                     valueLabelDisplay="auto"
                   />
                 </Box>
                 {advancedScanZoneOptions && (
-                  <AdvancedAccordion block={advancedMenu} theme={theme} />
+                  <AdvancedAccordion>
+                    <Grid item xs={12} style={{ textAlign: 'center' }}>
+                      <Typography variant="caption">
+                        {t('scan_zone_spacing')}
+                      </Typography>
+                      <Slider
+                        xs={12}
+                        name="Spacing"
+                        min={1}
+                        max={2}
+                        step={0.01}
+                        value={spacing}
+                        onChange={handleSpacingChange}
+                        valueLabelDisplay="auto"
+                      />
+                      <Typography variant="caption">
+                        {t('scan_zone_radius')}
+                      </Typography>
+                      <Slider
+                        name="Radius"
+                        min={50}
+                        max={900}
+                        value={radius}
+                        onChange={handleRadiusChange}
+                        valueLabelDisplay="auto"
+                      />
+                    </Grid>
+                  </AdvancedAccordion>
                 )}
               </Grid>
             )}
diff --git a/src/components/popups/Pokemon.jsx b/src/components/popups/Pokemon.jsx
index 10ce07912..539896806 100644
--- a/src/components/popups/Pokemon.jsx
+++ b/src/components/popups/Pokemon.jsx
@@ -68,7 +68,7 @@ export default function PokemonPopup({
     <ErrorBoundary noRefresh style={{}} variant="h5">
       <Grid
         container
-        style={{ minWidth: 200 }}
+        style={{ width: 200 }}
         alignItems="center"
         justifyContent="center"
         spacing={1}
diff --git a/src/services/Utility.js b/src/services/Utility.js
index 9c053e564..58bece40a 100644
--- a/src/services/Utility.js
+++ b/src/services/Utility.js
@@ -9,6 +9,7 @@ import dayCheck from './functions/dayCheck'
 import parseQuestConditions from './functions/parseConditions'
 import formatter from './functions/formatter'
 import getRewardInfo from './functions/getRewardInfo'
+import checkAreaValidity from './functions/checkAreaValidity'
 
 export default class Utility {
   static getProperName(word) {
@@ -148,4 +149,8 @@ export default class Utility {
       ? content[localStorage.getItem('i18nextLng')] || Object.values(content)[0]
       : ''
   }
+
+  static checkAreaValidity(...args) {
+    return checkAreaValidity(...args)
+  }
 }
diff --git a/src/services/functions/checkAreaValidity.js b/src/services/functions/checkAreaValidity.js
new file mode 100644
index 000000000..86cc38ce7
--- /dev/null
+++ b/src/services/functions/checkAreaValidity.js
@@ -0,0 +1,26 @@
+import { point, polygon } from '@turf/helpers'
+import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
+
+export default function checkAreaValidity(center, areaRestrictions, scanAreas) {
+  if (!areaRestrictions?.length || !scanAreas?.length) return true
+  let isValid = false
+  if (areaRestrictions?.length && scanAreas?.length) {
+    const testPoint = point([center[1], center[0]])
+    areaRestrictions.map((area) => {
+      if (
+        scanAreas.some(
+          (scanArea) =>
+            scanArea.properties.name === area &&
+            booleanPointInPolygon(
+              testPoint,
+              polygon(scanArea.geometry.coordinates),
+            ),
+        )
+      ) {
+        isValid = true
+      }
+      return true
+    })
+  }
+  return isValid
+}