diff --git a/client/components/Map/Map.jsx b/client/components/Map/Map.jsx
index 3d81364aa..4edcfcaa9 100644
--- a/client/components/Map/Map.jsx
+++ b/client/components/Map/Map.jsx
@@ -40,7 +40,10 @@ import RequestDetail from './RequestDetail';
 
 const styles = theme => ({
   root: {
-    height: '100%',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '100%',
     margin: '0 auto',
     '& canvas.mapboxgl-canvas:focus': {
       outline: 'none',
@@ -49,6 +52,32 @@ const styles = theme => ({
     '& .mapboxgl-control-container': {
       display: 'none',
     },
+    '& .mapboxgl-popup-content': {
+      backgroundColor: theme.palette.primary.main,
+      borderRadius: 5,
+      padding: 10,
+    },
+    '& .mapboxgl-popup-close-button': {
+      fontSize: 24,
+      color: 'white',
+      padding: 0,
+      marginTop: 5,
+      marginRight: 5,
+    },
+    '& .mapboxgl-popup': {
+      '&-anchor-bottom .mapboxgl-popup-tip': {
+        borderTopColor: theme.palette.primary.main,
+      },
+      '&-anchor-top .mapboxgl-popup-tip': {
+        borderBottomColor: theme.palette.primary.main,
+      },
+      '&-anchor-left .mapboxgl-popup-tip': {
+        borderRightColor: theme.palette.primary.main,
+      },
+      '&-anchor-right .mapboxgl-popup-tip': {
+        borderLeftColor: theme.palette.primary.main,
+      },
+    },
   },
 })
 
@@ -123,7 +152,6 @@ class Map extends React.Component {
       }
     }
 
-    // requestsLayer requires requestTypes for circle-color
     if (this.props.requestTypes != prevProps.requestTypes) {
       this.requestsLayer.init({
         map: this.map,
@@ -230,25 +258,25 @@ class Map extends React.Component {
     }
   };
 
-  reset = () => {
-    this.zoomOut();
-    this.addressLayer.setCenter(null);
-    this.ncLayer.clearSelectedRegion();
-    this.ccLayer.clearSelectedRegion();
-    this.removePopup();
-
-    this.setState({
-      locationInfo: INITIAL_LOCATION,
-      canReset: false,
-    });
-
-    this.map.once('zoomend', () => {
-      this.setState({
-        filterGeo: null,
-        canReset: true,
-      });
-    });
-  };
+  // reset = () => {
+  //   this.zoomOut();
+  //   this.addressLayer.setCenter(null);
+  //   this.ncLayer.clearSelectedRegion();
+  //   this.ccLayer.clearSelectedRegion();
+  //   this.removePopup();
+
+  //   this.setState({
+  //     locationInfo: INITIAL_LOCATION,
+  //     canReset: false,
+  //   });
+
+  //   this.map.once('zoomend', () => {
+  //     this.setState({
+  //       filterGeo: null,
+  //       canReset: true,
+  //     });
+  //   });
+  // };
 
   onClick = e => {
     const masks = [
@@ -287,8 +315,8 @@ class Map extends React.Component {
 
       if (feature.layer.id === 'request-circles') {
         const { coordinates } = feature.geometry;
-        const { id } = feature.properties;
-        return this.addPopup(coordinates, id);
+        const { requestId, typeId } = feature.properties;
+        return this.addPopup(coordinates, requestId);
       }
     }
   };
@@ -331,23 +359,23 @@ class Map extends React.Component {
     console.log(this.map.getCanvas().toDataURL());
   };
 
-  setSelectedTypes = selectedTypes => {
-    this.setState({ selectedTypes });
-  };
+  // setSelectedTypes = selectedTypes => {
+  //   this.setState({ selectedTypes });
+  // };
 
-  setActiveRequestsLayer = layerName => {
-    this.setState({ activeRequestsLayer: layerName });
-  };
+  // setActiveRequestsLayer = layerName => {
+  //   this.setState({ activeRequestsLayer: layerName });
+  // };
 
-  setMapStyle = mapStyle => {
-    this.setState({ mapStyle });
-    this.map.setStyle(MAP_STYLES[mapStyle]);
-    this.map.once('styledata', () => this.initLayers(false));
-  };
+  // setMapStyle = mapStyle => {
+  //   this.setState({ mapStyle });
+  //   this.map.setStyle(MAP_STYLES[mapStyle]);
+  //   this.map.once('styledata', () => this.initLayers(false));
+  // };
 
-  setColorScheme = scheme => {
-    this.setState({ colorScheme: scheme });
-  };
+  // setColorScheme = scheme => {
+  //   this.setState({ colorScheme: scheme });
+  // };
 
   getDistrictCounts = (geoFilterType, filterGeo, selectedTypes) => {
     const { ncCounts, ccCounts } = this.props;
@@ -469,7 +497,7 @@ class Map extends React.Component {
           boundaryStyle={mapStyle === 'dark' ? 'light' : 'dark'}
         />
         <div ref={el => this.requestDetail = el}>
-          <RequestDetail srnumber={selectedRequestId} />
+          <RequestDetail requestId={selectedRequestId} />
         </div>
         { this.state.mapReady && (
           <>
diff --git a/client/components/Map/RequestDetail.jsx b/client/components/Map/RequestDetail.jsx
index e0a423fb8..91c31e4d7 100644
--- a/client/components/Map/RequestDetail.jsx
+++ b/client/components/Map/RequestDetail.jsx
@@ -1,83 +1,169 @@
-/* eslint-disable */
-
+/* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
 import moment from 'moment';
 import { getPinInfoRequest } from '@reducers/data';
-import { REQUEST_TYPES, COUNCILS } from '@components/common/CONSTANTS';
+import toTitleCase from '@utils/toTitleCase';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const styles = theme => ({
+  loader: {
+    margin: 10,
+  },
+  loaderText: {
+    textAlign: 'center',
+    marginTop: -10,
+  },
+  popupContent: {
+    backgroundColor: theme.palette.primary.main,
+    padding: '0 8',
+    minWidth: 215,
+  },
+  requestType: {
+    ...theme.typography.h4,
+    marginRight: 5,
+  },
+  icon: {
+    display: 'block',
+  },
+  divider: {
+    marginTop: 6,
+    marginBottom: 8,
+  },
+  info1: {
+    ...theme.typography.body2,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  info2: {
+    marginTop: 14,
+  },
+});
 
 class RequestDetail extends React.Component {
   componentDidUpdate(prev) {
-    const { srnumber, pinsInfo, getPinInfo } = this.props;
-    if (srnumber === prev.srnumber)
-      return;
+    const { requestId, pinsInfo, getPinInfo } = this.props;
+    if (requestId === prev.requestId) return;
 
-    if (srnumber && !pinsInfo[srnumber])
-      getPinInfo(srnumber);
+    if (requestId && !pinsInfo[requestId]) getPinInfo(requestId);
   }
 
   render() {
-    const { srnumber, pinsInfo } = this.props;
+    const {
+      classes, requestId, pinsInfo, requestTypes,
+    } = this.props;
 
-    if (!srnumber)
-      return null;
+    if (!requestId) return null;
 
-    if (!pinsInfo[srnumber])
-      return <div>loading</div>
+    if (!pinsInfo[requestId]) {
+      return (
+        <>
+          <CircularProgress
+            className={classes.loader}
+            size={30}
+            color="inherit"
+          />
+          <div className={classes.loaderText}>loading...</div>
+        </>
+      );
+    }
 
     const {
-      requesttype,
+      srnumber,
+      councilName,
+      typeName,
+      typeId: requestTypeId,
+      createdDate,
+      closedDate,
       address,
-      createddate,
-      updateddate,
-      closeddate,
-      status,
-      nc,
-    } = pinsInfo[srnumber];
-
-    const ncName = COUNCILS.find(c => c.id == nc)?.name;
-    const { displayName, color, abbrev } = REQUEST_TYPES[requesttype];
+    } = pinsInfo[requestId];
 
     return (
-      <div className="pin-popup">
-        <p className="pin-popup-type has-text-weight-bold">
-          {displayName}
-          {/*&nbsp;
-          [
-          <span className="pin-popup-type-abbrev" style={{ color }}>
-            {abbrev}
-          </span>
-          ]*/}
-        </p>
-        <p className="pin-popup-ncname">{ncName}</p>
-        <p className="pin-popup-address has-text-weight-bold">{address}</p>
-        <div className="pin-popup-status">
-          <p>
-            Reported on&nbsp;
-            {moment.unix(createddate).format('l')}
-          </p>
-          <p>{srnumber}</p>
-          {/*<p>
-            Status:&nbsp;
-            {status}
-          </p>
+      <div className={classes.popupContent}>
+        <Grid
+          container
+          direction="row"
+          justify="flex-start"
+          alignItems="center"
+        >
+          <Grid className={classes.requestType} item>
+            {typeName}
+          </Grid>
+          <Grid item>
+            <FiberManualRecordIcon
+              className={classes.icon}
+              style={{
+                color: requestTypes.find(({ typeId }) => typeId === requestTypeId).color,
+                fontSize: 16,
+              }}
+            />
+          </Grid>
+        </Grid>
+        <Divider className={classes.divider} />
+        <p className={classes.info1}>{toTitleCase(address)}</p>
+        <p className={classes.info1}>{`${councilName} NC`}</p>
+        <Grid
+          className={classes.info2}
+          container
+          direction="row"
+          justify="space-between"
+          alignItems="flex-start"
+        >
+          <Grid item xs={6}>
+            Service request:
+          </Grid>
+          <Grid
+            item
+            xs={6}
+            style={{ textAlign: 'right' }}
+          >
+            {srnumber}
+          </Grid>
+          <Grid item xs={6}>
+            Reported on:
+          </Grid>
+          <Grid
+            item
+            xs={6}
+            style={{ textAlign: 'right' }}
+          >
+            {moment(createdDate).format('l')}
+          </Grid>
           {
-            closeddate ? (
-              <p>
-                Closed on&nbsp;
-                {moment.unix(closeddate).format('l')}
-              </p>
+            closedDate ? (
+              <>
+                <Grid item xs={6}>
+                  Closed on:
+                </Grid>
+                <Grid
+                  item
+                  xs={6}
+                  style={{ textAlign: 'right' }}
+                >
+                  {moment(closedDate).format('l')}
+                </Grid>
+              </>
             ) : (
               <>
-                <p>
-                  Last updated on&nbsp;
-                  {moment.unix(updateddate).format('l')}
-                </p>
+                <Grid item xs={6}>
+                  Status:
+                </Grid>
+                <Grid
+                  item
+                  xs={6}
+                  style={{ textAlign: 'right' }}
+                >
+                  Open
+                </Grid>
               </>
             )
-          }*/}
-        </div>
+          }
+        </Grid>
       </div>
     );
   }
@@ -85,21 +171,23 @@ class RequestDetail extends React.Component {
 
 const mapStateToProps = state => ({
   pinsInfo: state.data.pinsInfo,
+  requestTypes: state.metadata.requestTypes,
 });
 
 const mapDispatchToProps = dispatch => ({
   getPinInfo: srnumber => dispatch(getPinInfoRequest(srnumber)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(RequestDetail);
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RequestDetail));
 
 RequestDetail.propTypes = {
-  srnumber: PropTypes.string,
+  requestId: PropTypes.number,
   pinsInfo: PropTypes.shape({}),
+  requestTypes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   getPinInfo: PropTypes.func.isRequired,
 };
 
 RequestDetail.defaultProps = {
-  srnumber: null,
+  requestId: null,
   pinsInfo: {},
 };
diff --git a/client/components/Map/index.js b/client/components/Map/index.js
index 595fdfc88..10ea00bb9 100644
--- a/client/components/Map/index.js
+++ b/client/components/Map/index.js
@@ -12,7 +12,7 @@ import Map from './Map';
 
 const styles = theme => ({
   root: {
-    height: '100%',
+    height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
   },
 })
 
@@ -75,8 +75,8 @@ class MapContainer extends React.Component {
     features: requests.map(request => ({
       type: 'Feature',
       properties: {
-        id: request.requestId,
-        type: request.typeId,
+        requestId: request.requestId,
+        typeId: request.typeId,
       },
       geometry: {
         type: 'Point',
diff --git a/client/components/Map/layers/RequestsLayer.js b/client/components/Map/layers/RequestsLayer.js
index 88c8217d9..ec071165e 100644
--- a/client/components/Map/layers/RequestsLayer.js
+++ b/client/components/Map/layers/RequestsLayer.js
@@ -14,7 +14,7 @@ function circleColors(requestTypes) {
   requestTypes.forEach(type => colors.push(type.typeId, type.color))
   return [
     'match',
-    ['get', 'type'],
+    ['get', 'typeId'],
     ...colors,
     '#FFFFFF',
   ];
diff --git a/client/package-lock.json b/client/package-lock.json
index 2aa2d4b20..b8d2ecae7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3931,14 +3931,101 @@
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz",
-      "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
+      "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
       "dev": true,
       "requires": {
+        "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1",
+        "es-abstract": "^1.18.0-next.1",
         "function-bind": "^1.1.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+          "dev": true
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+          "dev": true
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        }
       }
     },
     "arrify": {
@@ -4813,6 +4900,16 @@
         }
       }
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -7085,21 +7182,21 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.20.6",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.6.tgz",
-      "integrity": "sha512-kidMTE5HAEBSLu23CUDvj8dc3LdBU0ri1scwHBZjI41oDv4tjsWZKU7MQccFzH1QYPYhsnTF2ovh7JlcIcmxgg==",
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz",
+      "integrity": "sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.1",
         "array.prototype.flatmap": "^1.2.3",
         "doctrine": "^2.1.0",
         "has": "^1.0.3",
-        "jsx-ast-utils": "^2.4.1",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "object.entries": "^1.1.2",
         "object.fromentries": "^2.0.2",
         "object.values": "^1.1.1",
         "prop-types": "^15.7.2",
-        "resolve": "^1.17.0",
+        "resolve": "^1.18.1",
         "string.prototype.matchall": "^4.0.2"
       },
       "dependencies": {
@@ -7119,11 +7216,12 @@
           "dev": true
         },
         "resolve": {
-          "version": "1.17.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
           "dev": true,
           "requires": {
+            "is-core-module": "^2.2.0",
             "path-parse": "^1.0.6"
           }
         }
@@ -8114,6 +8212,17 @@
       "resolved": "https://registry.npmjs.org/get-closest/-/get-closest-0.0.4.tgz",
       "integrity": "sha1-JprHdtHmAiqg/Vht1wjop9Miaa8="
     },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -8337,6 +8446,12 @@
         "ansi-regex": "^2.0.0"
       }
     },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "dev": true
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -9072,14 +9187,14 @@
       }
     },
     "internal-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz",
-      "integrity": "sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
       "dev": true,
       "requires": {
-        "es-abstract": "^1.17.0-next.1",
+        "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
-        "side-channel": "^1.0.2"
+        "side-channel": "^1.0.4"
       }
     },
     "interpret": {
@@ -9157,6 +9272,12 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
+    "is-bigint": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
+      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==",
+      "dev": true
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -9191,6 +9312,15 @@
         "ci-info": "^2.0.0"
       }
     },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@@ -9272,6 +9402,12 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
     },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
+      "dev": true
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -13348,13 +13484,22 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
     "side-channel": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz",
-      "integrity": "sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
       "dev": true,
       "requires": {
-        "es-abstract": "^1.17.0-next.1",
-        "object-inspect": "^1.7.0"
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "dependencies": {
+        "object-inspect": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+          "dev": true
+        }
       }
     },
     "signal-exit": {
@@ -13971,17 +14116,116 @@
       }
     },
     "string.prototype.matchall": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz",
-      "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz",
+      "integrity": "sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==",
       "dev": true,
       "requires": {
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0",
+        "es-abstract": "^1.18.0-next.2",
         "has-symbols": "^1.0.1",
-        "internal-slot": "^1.0.2",
-        "regexp.prototype.flags": "^1.3.0",
-        "side-channel": "^1.0.2"
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.3.1",
+        "side-channel": "^1.0.4"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
+            "object-inspect": "^1.9.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          },
+          "dependencies": {
+            "has-symbols": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+              "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+              "dev": true
+            }
+          }
+        },
+        "is-callable": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
+          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
+          "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "has-symbols": "^1.0.1"
+          }
+        },
+        "object-inspect": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+          "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
+          "dev": true
+        },
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        },
+        "regexp.prototype.flags": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
+          "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        }
       }
     },
     "string.prototype.trim": {
@@ -14619,6 +14863,18 @@
         }
       }
     },
+    "unbox-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
+      "integrity": "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.0",
+        "has-symbols": "^1.0.0",
+        "which-boxed-primitive": "^1.0.1"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -15666,6 +15922,30 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "dependencies": {
+        "is-boolean-object": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+          "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0"
+          }
+        }
+      }
+    },
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index d0182e3e7..9cd5349fe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -80,7 +80,7 @@
     "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^1.7.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^4.2.0",
diff --git a/client/public/index.html b/client/public/index.html
index af4aa703f..571049560 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -26,6 +26,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
+    <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
 
     <!-- Webpack injected tags -->
     <title><%= htmlWebpackPlugin.options.title %></title>
diff --git a/client/redux/reducers/data.js b/client/redux/reducers/data.js
index 5f30e1cf6..384e487a7 100644
--- a/client/redux/reducers/data.js
+++ b/client/redux/reducers/data.js
@@ -2,6 +2,9 @@ export const types = {
   GET_DATA_REQUEST: 'GET_DATA_REQUEST',
   GET_PINS_SUCCESS: 'GET_PINS_SUCCESS',
   GET_PINS_FAILURE: 'GET_PINS_FAILURE',
+  GET_OPEN_REQUESTS: 'GET_OPEN_REQUESTS',
+  GET_OPEN_REQUESTS_SUCCESS: 'GET_OPEN_REQUESTS_SUCCESS',
+  GET_OPEN_REQUESTS_FAILURE: 'GET_OPEN_REQUESTS_FAILURE',
   GET_PIN_INFO_REQUEST: 'GET_PIN_INFO_REQUEST',
   GET_PIN_INFO_SUCCESS: 'GET_PIN_INFO_SUCCESS',
   GET_PIN_INFO_FAILURE: 'GET_PIN_INFO_FAILURE',
@@ -28,9 +31,9 @@ export const getPinsFailure = error => ({
   payload: error,
 });
 
-export const getPinInfoRequest = srnumber => ({
+export const getPinInfoRequest = requestId => ({
   type: types.GET_PIN_INFO_REQUEST,
-  payload: srnumber,
+  payload: requestId,
 });
 
 export const getPinInfoSuccess = response => ({
@@ -129,7 +132,7 @@ export default (state = initialState, action) => {
         error: null,
         pinsInfo: {
           ...state.pinsInfo,
-          [action.payload.srnumber]: action.payload,
+          [action.payload.requestId]: action.payload,
         },
       };
     case types.GET_PIN_INFO_FAILURE: {
diff --git a/client/redux/sagas/data.js b/client/redux/sagas/data.js
index b0dac50ca..888cff87b 100644
--- a/client/redux/sagas/data.js
+++ b/client/redux/sagas/data.js
@@ -59,7 +59,7 @@ function* fetchHeatmap(filters) {
 }
 
 function* fetchPinInfo(srnumber) {
-  const pinInfoUrl = `${BASE_URL}/servicerequest/${srnumber}`;
+  const pinInfoUrl = `${BASE_URL}/requests/${srnumber}`;
 
   const { data } = yield call(axios.get, pinInfoUrl);
 
diff --git a/client/theme/typography.js b/client/theme/typography.js
index 4fa4db3b4..1bdd27a55 100644
--- a/client/theme/typography.js
+++ b/client/theme/typography.js
@@ -41,7 +41,7 @@ export default {
   },
   body2: {
     fontSize: 14,
-
+    fontWeight: robotoRegular,
   },
   body3: {
     fontSize: 14,
diff --git a/client/utils/toTitleCase.js b/client/utils/toTitleCase.js
new file mode 100644
index 000000000..fd66772c9
--- /dev/null
+++ b/client/utils/toTitleCase.js
@@ -0,0 +1,6 @@
+export default function toTitleCase(str) {
+  return str.replace(
+    /\w\S*/g,
+    txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
+  );
+}