diff --git a/map/serializers.py b/map/serializers.py
index 03dd912..a8b3d61 100644
--- a/map/serializers.py
+++ b/map/serializers.py
@@ -1,8 +1,6 @@
 from rest_framework import serializers
-
 from map.models import CommunityArea, RestaurantPermit
 
-
 class CommunityAreaSerializer(serializers.ModelSerializer):
     class Meta:
         model = CommunityArea
@@ -11,24 +9,10 @@ class Meta:
     num_permits = serializers.SerializerMethodField()
 
     def get_num_permits(self, obj):
-        """
-        TODO: supplement each community area object with the number
-        of permits issued in the given year.
+        year = self.context.get("year")
+
+        locations = RestaurantPermit.objects.filter(community_area_id=obj.area_id)
 
-        e.g. The endpoint /map-data/?year=2017 should return something like:
-        [
-            {
-                "ROGERS PARK": {
-                    area_id: 17,
-                    num_permits: 2
-                },
-                "BEVERLY": {
-                    area_id: 72,
-                    num_permits: 2
-                },
-                ...
-            }
-        ]
-        """
+        permits_year = locations.filter(issue_date__year=year)
 
-        pass
+        return permits_year.count()
diff --git a/map/static/js/RestaurantPermitMap.js b/map/static/js/RestaurantPermitMap.js
index 57f8ea0..8f39441 100644
--- a/map/static/js/RestaurantPermitMap.js
+++ b/map/static/js/RestaurantPermitMap.js
@@ -37,42 +37,58 @@ function YearSelect({ setFilterVal }) {
 }
 
 export default function RestaurantPermitMap() {
-  const communityAreaColors = ["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"]
 
   const [currentYearData, setCurrentYearData] = useState([])
   const [year, setYear] = useState(2026)
 
+  const maxNumPermits = currentYearData?.reduce((accumulator, currentValue) => {
+    return Math.max(accumulator, currentValue.num_permits);
+  }, 0)
+
+
+  const totalNumPermits = currentYearData?.reduce((accumulator, currentValue) => {
+    return accumulator + currentValue.num_permits;
+  }, 0)
+
+  const hashDataYear = new Map(currentYearData.map((value) => [value.name, value.num_permits])); 
+
   const yearlyDataEndpoint = `/map-data/?year=${year}`
 
+
   useEffect(() => {
-    fetch()
+    fetch("http://localhost:8000" + yearlyDataEndpoint)
       .then((res) => res.json())
       .then((data) => {
-        /**
-         * TODO: Fetch the data needed to supply to map with data
-         */
+        setCurrentYearData(data);
       })
   }, [yearlyDataEndpoint])
 
 
   function getColor(percentageOfPermits) {
-    /**
-     * TODO: Use this function in setAreaInteraction to set a community 
-     * area's color using the communityAreaColors constant above
-     */
+    const communityAreaColors = ["#1165ff", "#00cf23", "#f0ff19", "#f50909"]
+
+    let color;
+    if (percentageOfPermits > 75) {
+      color = communityAreaColors[3]
+    } else if (percentageOfPermits > 50) {
+      color = communityAreaColors[2] 
+    } else if (percentageOfPermits > 25) {
+      color = communityAreaColors[1]
+    } else {
+      color = communityAreaColors[0]
+    } 
+
+    return color
   }
 
   function setAreaInteraction(feature, layer) {
-    /**
-     * TODO: Use the methods below to:
-     * 1) Shade each community area according to what percentage of 
-     * permits were issued there in the selected year
-     * 2) On hover, display a popup with the community area's raw 
-     * permit count for the year
-     */
-    layer.setStyle()
-    layer.on("", () => {
-      layer.bindPopup("")
+
+    let num_permits = hashDataYear.get(feature.properties.community)
+    let num_permits_percentage = num_permits / maxNumPermits * 100
+
+    layer.setStyle({fillColor: getColor(num_permits_percentage), fillOpacity: "0.2"})
+    layer.on("mouseover", () => {
+      layer.bindPopup(`Community: ${feature.properties.community} Permits: ${num_permits}`)
       layer.openPopup()
     })
   }
@@ -81,11 +97,10 @@ export default function RestaurantPermitMap() {
     <>
       <YearSelect filterVal={year} setFilterVal={setYear} />
       <p className="fs-4">
-        Restaurant permits issued this year: {/* TODO: display this value */}
+        Restaurant permits issued this year: {totalNumPermits}
       </p>
       <p className="fs-4">
-        Maximum number of restaurant permits in a single area:
-        {/* TODO: display this value */}
+        Maximum number of restaurant permits in a single area: {maxNumPermits}
       </p>
       <MapContainer
         id="restaurant-map"
diff --git a/tests/test_views.py b/tests/test_views.py
index 24cc64e..84e2132 100644
--- a/tests/test_views.py
+++ b/tests/test_views.py
@@ -31,11 +31,20 @@ def test_map_data_view():
     RestaurantPermit.objects.create(
         community_area_id=area2.area_id, issue_date=date(2021, 6, 22)
     )
+    RestaurantPermit.objects.create(
+        community_area_id=area2.area_id, issue_date=date(2022, 6, 22)
+    )
+
 
     # Query the map data endpoint
     client = APIClient()
     response = client.get(reverse("map_data", query={"year": 2021}))
 
-    # TODO: Complete the test by asserting that the /map-data/ endpoint
-    # returns the correct number of permits for Beverly and Lincoln 
-    # Park in 2021
+    assert response.json() == [
+        {
+            'name': 'Beverly', 'num_permits': 2
+        },
+        {
+            'name': 'Lincoln Park', 'num_permits': 3
+        }
+    ]
\ No newline at end of file