diff --git a/311-system-architecture.png b/311-system-architecture.png
new file mode 100644
index 000000000..21d55e679
Binary files /dev/null and b/311-system-architecture.png differ
diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
index 7047921c0..5670c881f 100644
--- a/GETTING_STARTED.md
+++ b/GETTING_STARTED.md
@@ -34,6 +34,10 @@ CI Is driven by tests, they help instill confidence in pull requests because a d
 
 Our front end tests are run through Enzyme and our backend tests are run through Pytest.
 
+## System architecture
+Here is our rough draft of our architecture diagram, since the application is not yet 'deployed to production' this diagram might not be the exact representation of what currently exists
+![System diagram](311-system-architecture.png)
+
 ## Postgres
 Our persistence layer is run by Postgresql. It is recommended to review [this]([https://www.tutorialspoint.com/postgresql/postgresql_overview.htm](https://www.tutorialspoint.com/postgresql/postgresql_overview.htm)) if you are unfamiliar
 For local development, we utilize a volatile docker container through docker compose. This is meant for experimentation and working with datasets in isolation. When the application is ready for deployment, the persistence will be offloaded to a shared server in some cloud...somewhere
diff --git a/package.json b/package.json
index 414dea211..3c9e5d050 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   },
   "scripts": {
     "start": "npm run check-env && npm run dev",
-    "dev": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0",
+    "dev": "webpack-dev-server --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint 'src/**/*.js*'",
     "test": "jest --passWithNoTests",
diff --git a/src/components/PinMap/PinMap.jsx b/src/components/PinMap/PinMap.jsx
index 1b28c9564..7f95fc2dd 100644
--- a/src/components/PinMap/PinMap.jsx
+++ b/src/components/PinMap/PinMap.jsx
@@ -14,6 +14,7 @@ import Choropleth from 'react-leaflet-choropleth';
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 import HeatmapLayer from 'react-leaflet-heatmap-layer';
 import PropTypes from 'proptypes';
+import COLORS from '@styles/COLORS';
 
 // import neighborhoodOverlay from '../../data/la-county-neighborhoods-v6.json';
 // import municipalOverlay from '../../data/la-county-municipal-regions-current.json';
@@ -21,16 +22,17 @@ import PropTypes from 'proptypes';
 import ncOverlay from '../../data/nc-boundary-2019.json';
 
 const { BaseLayer, Overlay } = LayersControl;
+const boundaryDefaultColor = COLORS.BRAND.MAIN;
+const boundaryHighlightColor = COLORS.BRAND.CTA1;
 
 class PinMap extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       position: [34.0094213, -118.6008506],
       zoom: 10,
-      mapUrl: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
-      satelliteUrl: `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      mapUrl: `https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
+      satelliteUrl: `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`,
       geoJSON: ncOverlay,
       bounds: null,
     };
@@ -41,7 +43,7 @@ class PinMap extends Component {
 
     layer.setStyle({
       weight: 5,
-      color: 'grey',
+      color: boundaryHighlightColor,
     });
 
     layer.bringToFront();
@@ -53,7 +55,7 @@ class PinMap extends Component {
     layer.setStyle({
       weight: 2,
       opacity: 1,
-      color: '#959595',
+      color: boundaryDefaultColor,
     });
   }
 
@@ -172,7 +174,7 @@ class PinMap extends Component {
                       fillColor: 'white',
                       weight: 2,
                       opacity: 1,
-                      color: '#959595',
+                      color: boundaryDefaultColor,
                       dashArray: '3',
                     }}
                     onEachFeature={this.onEachRegionFeature}
@@ -203,12 +205,13 @@ class PinMap extends Component {
                 * improve functionality post-MVP by generating a heatmap list
                 * on the backend. */}
               <HeatmapLayer
+                max={1}
                 points={data}
                 radius={20}
                 blur={25}
                 longitudeExtractor={m => m.longitude}
                 latitudeExtractor={m => m.latitude}
-                intensityExtractor={() => {}}
+                intensityExtractor={() => 1}
               />
             </Overlay>
           </LayersControl>
diff --git a/webpack.dev.js b/webpack.dev.js
index 53fb3d8a2..5011b791a 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -9,6 +9,7 @@ module.exports = merge(config, {
     contentBase: './public',
     compress: true,
     port: 3000,
+    host: '0.0.0.0',
     hot: true,
     historyApiFallback: true,
   },