diff --git a/client/src/components/MapTiles.jsx b/client/src/components/MapTiles.jsx
index 66921d38f..5ff16b54d 100644
--- a/client/src/components/MapTiles.jsx
+++ b/client/src/components/MapTiles.jsx
@@ -9,17 +9,14 @@ import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 import Portal from './portals/Portal.jsx'
 import Weather from './weather/Weather.jsx'
 import S2Cell from './s2Cell/S2Cell.jsx'
+import SubmissionCell from './submissionCells/SubmissionCells.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: {
-      lat: settings.map.startLat - 0.025,
-      lng: settings.map.startLon - 0.025
-    },
-    _northEast: {
-      lat: settings.map.startLat + 0.025,
-      lng: settings.map.startLon + 0.025
-    }
+    minLat: settings.map.startLat - 0.025,
+    maxLat: settings.map.startLat + 0.025,
+    minLon: settings.map.startLon - 0.025,
+    maxLon: settings.map.startLon + 0.025
   })
   const [selected, setSelected] = useState({
     gyms: settings.map.filters.gyms,
@@ -31,14 +28,20 @@ const MapTiles = ({ map, settings }) => {
     pokemon: settings.map.filters.pokemon,
     portals: settings.map.filters.portals,
     scanCells: settings.map.filters.scanCells,
-    s2Cells: settings.map.filters.submissionCells,
+    submissionCells: settings.map.filters.submissionCells,
     weather: settings.map.filters.weather,
     scanAreas: settings.map.filters.scanAreas,
     devices: settings.map.filters.devices
   })
 
   const onMove = useCallback(() => {
-    setBounds(map.getBounds())
+    const mapBounds = map.getBounds()
+    setBounds({
+      minLat: mapBounds._southWest.lat - 0.01,
+      maxLat: mapBounds._northEast.lat + 0.01,
+      minLon: mapBounds._southWest.lng - 0.01,
+      maxLon: mapBounds._northEast.lng + 0.01
+    })
   }, [map])
 
   useEffect(() => {
@@ -60,7 +63,8 @@ const MapTiles = ({ map, settings }) => {
       {selected.pokestops && <Pokestop bounds={bounds} />}
       {selected.pokemon && <Pokemon bounds={bounds} />}
       {selected.portals && <Portal bounds={bounds} />}
-      {selected.s2Cells && <S2Cell bounds={bounds} />}
+      {selected.scanCells && <S2Cell bounds={bounds} />}
+      {selected.submissionCells && <SubmissionCell bounds={bounds} />}
       {selected.spawnpoints && <Spawnpoint bounds={bounds} />}
       {selected.weather && <Weather bounds={bounds} />}
       <Nav
diff --git a/client/src/components/gyms/Gym.jsx b/client/src/components/gyms/Gym.jsx
index 8b7d6d2e7..41de758c4 100644
--- a/client/src/components/gyms/Gym.jsx
+++ b/client/src/components/gyms/Gym.jsx
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Gym = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllGyms(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
diff --git a/client/src/components/layout/Drawer.jsx b/client/src/components/layout/Drawer.jsx
index 4f46f5017..a0c8d8859 100644
--- a/client/src/components/layout/Drawer.jsx
+++ b/client/src/components/layout/Drawer.jsx
@@ -30,7 +30,7 @@ const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
     { name: 'Pokemon', icon: <ArrowForwardIos />, meta: 'pokemon' },
     { name: 'Ingress Portals', icon: <ArrowForwardIos/>, meta: 'portals' },
     { name: 'Scan-Cells', icon: <ArrowForwardIos />, meta: 'scanCells' },
-    { name: 'S2-Cells', icon: <ArrowForwardIos />, meta: 's2Cells' },
+    { name: 'Wayfarer', icon: <ArrowForwardIos />, meta: 'submissionCells' },
     { name: 'Weather', icon: <ArrowForwardIos />, meta: 'weather' },
     { name: 'ScanAreas', icon: <ArrowForwardIos />, meta: 'scanAreas' },
     { name: 'Devices', icon: <ArrowForwardIos />, meta: 'devices' }
diff --git a/client/src/components/pokemon/Pokemon.jsx b/client/src/components/pokemon/Pokemon.jsx
index b882ffe9d..1cad4fb72 100644
--- a/client/src/components/pokemon/Pokemon.jsx
+++ b/client/src/components/pokemon/Pokemon.jsx
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Pokemon = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokemon(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
diff --git a/client/src/components/pokestops/Pokestop.jsx b/client/src/components/pokestops/Pokestop.jsx
index 42ad5ccf7..a768c31f6 100644
--- a/client/src/components/pokestops/Pokestop.jsx
+++ b/client/src/components/pokestops/Pokestop.jsx
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Pokestop = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokestops(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
diff --git a/client/src/components/portals/Portal.jsx b/client/src/components/portals/Portal.jsx
index 6ce75c478..b92812594 100644
--- a/client/src/components/portals/Portal.jsx
+++ b/client/src/components/portals/Portal.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Popup, CircleMarker } from 'react-leaflet'
+import { Popup, Circle } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
 import { useQuery } from '@apollo/client'
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Portal = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPortals(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
   return (
     <MarkerClusterGroup
@@ -23,7 +18,7 @@ const Portal = ({ bounds }) => {
     >
       {data && data.portals.map(portal => {
         return (
-          <CircleMarker
+          <Circle
             key={portal.id}
             center={[portal.lat, portal.lon]}
             radius={20}
@@ -31,7 +26,7 @@ const Portal = ({ bounds }) => {
             <Popup position={[portal.lat, portal.lon]}>
               <PopupContent portal={portal} />
             </Popup>
-          </CircleMarker>
+          </Circle>
         )
       })}
     </MarkerClusterGroup>
diff --git a/client/src/components/s2Cell/S2Cell.jsx b/client/src/components/s2Cell/S2Cell.jsx
index 5bbbff9f8..0739a4c34 100644
--- a/client/src/components/s2Cell/S2Cell.jsx
+++ b/client/src/components/s2Cell/S2Cell.jsx
@@ -10,12 +10,7 @@ import getPolyVector from '../../services/getPolyVector'
 
 const S2Cell = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllS2Cells(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
diff --git a/client/src/components/spawnpoints/Spawnpoint.jsx b/client/src/components/spawnpoints/Spawnpoint.jsx
index f25582c5d..1fa90c468 100644
--- a/client/src/components/spawnpoints/Spawnpoint.jsx
+++ b/client/src/components/spawnpoints/Spawnpoint.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Popup, CircleMarker } from 'react-leaflet'
+import { Popup, Circle } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
 import { useQuery } from '@apollo/client'
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Spawnpoint = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllSpawnpoints(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
@@ -24,7 +19,7 @@ const Spawnpoint = ({ bounds }) => {
     >
       {data && data.spawnpoints.map(spawnpoint => {
         return (
-          <CircleMarker
+          <Circle
             key={spawnpoint.id}
             center={[spawnpoint.lat, spawnpoint.lon]}
             radius={1}
@@ -32,7 +27,7 @@ const Spawnpoint = ({ bounds }) => {
             <Popup position={[spawnpoint.lat, spawnpoint.lon]}>
               <PopupContent spawnpoint={spawnpoint} />
             </Popup>
-          </CircleMarker>
+          </Circle>
         )
       })}
     </MarkerClusterGroup>
diff --git a/client/src/components/submissionCells/Popup.jsx b/client/src/components/submissionCells/Popup.jsx
new file mode 100644
index 000000000..a008e72a4
--- /dev/null
+++ b/client/src/components/submissionCells/Popup.jsx
@@ -0,0 +1,30 @@
+import { Typography } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/styles';
+import React from 'react'
+import theme from '../layout/theme';
+
+const SubmissionCellPopup = ({ cell }) => {
+  console.log(cell)
+  return (
+    <ThemeProvider theme={theme}>
+      <Typography>
+        {cell.level}
+      </Typography>
+      <Typography>
+        {cell.id}
+      </Typography>
+      <Typography>
+        {cell.count}
+      </Typography>
+      <Typography>
+        {cell.count_pokestops}
+      </Typography>
+      <Typography>
+        {cell.count_gyms}
+      </Typography>
+
+    </ThemeProvider>
+  )
+}
+
+export default SubmissionCellPopup
\ No newline at end of file
diff --git a/client/src/components/submissionCells/SubmissionCells.jsx b/client/src/components/submissionCells/SubmissionCells.jsx
new file mode 100644
index 000000000..d7ad2924f
--- /dev/null
+++ b/client/src/components/submissionCells/SubmissionCells.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { Popup, Polygon, Circle, Tooltip } from 'react-leaflet'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import getPolyVector from '../../services/getPolyVector'
+import getPlacementCells from './data/getPlacementCells.js'
+import getTypeCells from './data/getTypeCells.js'
+
+import placementStyle from './placementStyle.js'
+import PopupContent from './Popup.jsx'
+import typeStyle from './typeStyle.js'
+
+const SubmissionCell = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllSubmissionCells(), {
+    variables: bounds
+  })
+
+  let cells = {
+    placementCells: {
+      cells: [],
+      rings: []
+    },
+    typeCells: []
+  }
+
+  if (data) {
+    cells = {
+      placementCells: getPlacementCells(bounds, data.pokestops, data.gyms),
+      typeCells: getTypeCells(bounds, data.pokestops, data.gyms)
+    }
+  }
+
+  return (
+    <>
+      {cells.placementCells.rings.map(ring => {
+        return (
+          <Circle
+            key={ring.id}
+            center={[ring.lat, ring.lon]}
+            radius={20}
+            interactive={false}>
+          </Circle>
+        )
+      })}
+      {cells.placementCells.cells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={placementStyle(cell.blocked)}
+            interactive={false}>
+          </Polygon>
+        )
+      })}
+      {cells.typeCells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={typeStyle(cell)}>
+            <Popup
+              position={[cell.lat, cell.lon]}>
+              <PopupContent cell={cell} />
+            </Popup>
+            <Tooltip
+              position={[cell.lat, cell.lon]}
+              direction='center'
+              permanent>
+              {cell.count}
+            </Tooltip>
+          </Polygon>
+        )
+      })}
+    </>
+  )
+}
+
+export default SubmissionCell
diff --git a/client/src/components/submissionCells/data/Ring.js b/client/src/components/submissionCells/data/Ring.js
new file mode 100644
index 000000000..dd874af79
--- /dev/null
+++ b/client/src/components/submissionCells/data/Ring.js
@@ -0,0 +1,10 @@
+class Ring {
+  constructor(lat, lon, radius) {
+      this.id = `${lat}-${lon}-${radius}`;
+      this.lat = lat;
+      this.lon = lon;
+      this.radius = radius;
+  }
+}
+
+export default Ring
\ No newline at end of file
diff --git a/client/src/components/submissionCells/data/getPlacementCells.js b/client/src/components/submissionCells/data/getPlacementCells.js
new file mode 100644
index 000000000..4f9b1203d
--- /dev/null
+++ b/client/src/components/submissionCells/data/getPlacementCells.js
@@ -0,0 +1,47 @@
+import { S2LatLng, S2RegionCoverer, S2CellId, S2LatLngRect } from 'nodes2ts'
+import getPolyVector from '../../../services/getPolyVector.js'
+import Ring from './Ring.js'
+
+export default function (bounds, pokestops, gyms) {
+  const allStops = pokestops.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const allGyms = gyms.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const stopCoords = allStops.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+  const gymCoords = allGyms.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+  const allCoords = gymCoords.concat(stopCoords)
+
+  const regionCoverer = new S2RegionCoverer()
+  regionCoverer.minLevel = 17
+  regionCoverer.maxLevel = 17
+  const region = S2LatLngRect.fromLatLng(
+    S2LatLng.fromDegrees(bounds.minLat, bounds.minLon),
+    S2LatLng.fromDegrees(bounds.maxLat, bounds.maxLon)
+  )
+  const indexedCells = {}
+  const coveringCells = regionCoverer.getCoveringCells(region)
+  for (let i = 0; i < coveringCells.length; i++) {
+    const cell = coveringCells[i]
+    const polygon = getPolyVector(cell.id)
+    const cellId = BigInt(cell.id).toString()
+    indexedCells[cellId] = {
+      'id': cellId,
+      'level': 17,
+      'blocked': false,
+      'polygon': polygon
+    }
+  }
+  for (let i = 0; i < allCoords.length; i++) {
+    const coord = allCoords[i]
+    const level17Cell = S2CellId.fromPoint(S2LatLng.fromDegrees(coord.lat, coord.lon).toPoint()).parentL(17)
+    const cellId = BigInt(level17Cell.id).toString()
+    const cell = indexedCells[cellId]
+    if (cell) {
+      cell.blocked = true
+    }
+  }
+  const rings = allCoords.map(x => new Ring(x.lat, x.lon, 20))
+  
+  return {
+    cells: Object.values(indexedCells),
+    rings: rings
+  }
+}
\ No newline at end of file
diff --git a/client/src/components/submissionCells/data/getTypeCells.js b/client/src/components/submissionCells/data/getTypeCells.js
new file mode 100644
index 000000000..62872ab7c
--- /dev/null
+++ b/client/src/components/submissionCells/data/getTypeCells.js
@@ -0,0 +1,53 @@
+import { S2LatLng, S2RegionCoverer, S2CellId, S2LatLngRect } from 'nodes2ts'
+import getPolyVector from '../../../services/getPolyVector.js'
+
+export default function (bounds, pokestops, gyms) {
+  const allStops = pokestops.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const allGyms = gyms.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const stopCoords = allStops.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+  const gymCoords = allGyms.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+
+  const regionCoverer = new S2RegionCoverer()
+  regionCoverer.minLevel = 14
+  regionCoverer.maxLevel = 14
+  const region = S2LatLngRect.fromLatLng(
+    S2LatLng.fromDegrees(bounds.minLat, bounds.minLon),
+    S2LatLng.fromDegrees(bounds.maxLat, bounds.maxLon)
+  )
+  const indexedCells = {}
+  const coveringCells = regionCoverer.getCoveringCells(region)
+  for (let i = 0; i < coveringCells.length; i++) {
+    const cell = coveringCells[i]
+    const polygon = getPolyVector(cell.id)
+    const cellId = BigInt(cell.id).toString()
+    indexedCells[cellId] = {
+      'id': cellId,
+      'level': 14,
+      'count': 0,
+      'count_pokestops': 0,
+      'count_gyms': 0,
+      'polygon': polygon
+    }
+  }
+  for (let i = 0; i < gymCoords.length; i++) {
+    const coord = gymCoords[i]
+    const level14Cell = S2CellId.fromPoint(S2LatLng.fromDegrees(coord.lat, coord.lon).toPoint()).parentL(14)
+    const cellId = BigInt(level14Cell.id).toString()
+    const cell = indexedCells[cellId]
+    if (cell) {
+      cell.count_gyms++
+      cell.count++
+    }
+  }
+  for (let i = 0; i < stopCoords.length; i++) {
+    const coord = stopCoords[i]
+    const level14Cell = S2CellId.fromPoint(S2LatLng.fromDegrees(coord.lat, coord.lon).toPoint()).parentL(14)
+    const cellId = BigInt(level14Cell.id).toString()
+    const cell = indexedCells[cellId]
+    if (cell) {
+      cell.count_pokestops++
+      cell.count++
+    }
+  }
+  return Object.values(indexedCells)
+}
\ No newline at end of file
diff --git a/client/src/components/submissionCells/placementStyle.js b/client/src/components/submissionCells/placementStyle.js
new file mode 100644
index 000000000..954868b43
--- /dev/null
+++ b/client/src/components/submissionCells/placementStyle.js
@@ -0,0 +1,9 @@
+export default function (cellBlocked) {
+  return {
+    fillColor: cellBlocked ? 'black' : 'green',
+    color: 'black',
+    opacity: 0.75,
+    fillOpacity: cellBlocked ? 0.25 : 0,
+    weight: 0.35
+  }
+}
\ No newline at end of file
diff --git a/client/src/components/submissionCells/typeStyle.js b/client/src/components/submissionCells/typeStyle.js
new file mode 100644
index 000000000..bab079312
--- /dev/null
+++ b/client/src/components/submissionCells/typeStyle.js
@@ -0,0 +1,11 @@
+export default function (cell) {
+  if ((cell.count === 1 && cell.count_gyms < 1) || (cell.count === 5 && cell.count_gyms < 2) || (cell.count === 19 && cell.count_gyms < 3)) {
+    return { fillColor: 'red', color: 'red', opacity: 0.75, fillOpacity: 0.5, weight: 0.75 };
+  } else if ((cell.count === 4 && cell.count_gyms < 2) || (cell.count === 18 && cell.count_gyms < 3)) {
+    return { fillColor: 'orange', color: 'red', opacity: 0.75, fillOpacity: 0.5, weight: 0.75 };
+  } else if (cell.count >= 20) {
+    return { fillColor: 'black', color: 'black', opacity: 0.75, fillOpacity: 0.25, weight: 0.8 };
+  } else {
+    return { fillColor: 'blue', color: 'black', opacity: 0.75, fillOpacity: 0.0, weight: 0.8 };
+  }
+}
\ No newline at end of file
diff --git a/client/src/components/weather/Weather.jsx b/client/src/components/weather/Weather.jsx
index cd8efb46a..18f0735da 100644
--- a/client/src/components/weather/Weather.jsx
+++ b/client/src/components/weather/Weather.jsx
@@ -10,12 +10,7 @@ import getPolyVector from '../../services/getPolyVector.js'
 
 const Weather = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllWeather(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
diff --git a/client/src/services/Query.js b/client/src/services/Query.js
index aac1510ef..63923de18 100644
--- a/client/src/services/Query.js
+++ b/client/src/services/Query.js
@@ -6,6 +6,8 @@ import { getAllSpawnpoints } from './data/spawnpoint.js'
 import { getAllPortals } from './data/portal.js' 
 import { getAllWeather } from './data/weather.js'
 import { getAllS2Cells } from './data/s2Cell.js'
+import { getAllSubmissionCells } from './data/submissionCells.js'
+
 class Query {
 
   static getAllDevices() {
@@ -36,6 +38,10 @@ class Query {
     return getAllSpawnpoints
   }
 
+  static getAllSubmissionCells() {
+    return getAllSubmissionCells
+  }
+
   static getAllWeather() {
     return getAllWeather
   }
diff --git a/client/src/services/data/submissionCells.js b/client/src/services/data/submissionCells.js
new file mode 100644
index 000000000..863ab8d2b
--- /dev/null
+++ b/client/src/services/data/submissionCells.js
@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client'
+
+const getAllSubmissionCells = gql`
+  query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+    gyms(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      lat
+      lon
+      sponsor_id
+    },
+    pokestops(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      lat
+      lon
+      sponsor_id
+    }
+  }
+`
+
+export { getAllSubmissionCells }
\ No newline at end of file