diff --git a/map/serializers.py b/map/serializers.py
index 03dd912..633048a 100644
--- a/map/serializers.py
+++ b/map/serializers.py
@@ -11,24 +11,6 @@ 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.
-
-        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
-                },
-                ...
-            }
-        ]
-        """
+        return RestaurantPermit.objects.filter(community_area_id=obj.area_id).filter(issue_date__year=self.context.get("year")).count()
 
         pass
diff --git a/map/static/js/RestaurantPermitMap.js b/map/static/js/RestaurantPermitMap.js
index 57f8ea0..7779e6a 100644
--- a/map/static/js/RestaurantPermitMap.js
+++ b/map/static/js/RestaurantPermitMap.js
@@ -43,36 +43,31 @@ export default function RestaurantPermitMap() {
   const [year, setYear] = useState(2026)
 
   const yearlyDataEndpoint = `/map-data/?year=${year}`
+  const maxNumPermits = currentYearData.reduce((max, area) => (area.num_permits > max ? area.num_permits : max), 0);
+  const totalNumPermits = currentYearData.reduce((total, area) => total + area.num_permits, 0);
 
   useEffect(() => {
-    fetch()
+    fetch(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
-     */
+    // dynamically convert percentage to indices from 0 through communityAreaColors.length-1 to access communityAreaColors
+    // enforce max index of communityAreaColors.length-1 with Math.min()
+
+    return communityAreaColors[Math.floor(Math.min(percentageOfPermits * communityAreaColors.length, communityAreaColors.length-1))];
   }
 
   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("")
+    const communityNumPermits = currentYearData.find(area => area.name === feature.properties.community)?.num_permits || 0;
+
+    layer.setStyle({color: "black", weight:1, fillColor: getColor(communityNumPermits / maxNumPermits), fillOpacity: 0.7});
+    layer.on("mouseover", () => {
+      layer.bindPopup(`<strong>${feature.properties.community}</strong> <br/> Permits: ${communityNumPermits}`);
       layer.openPopup()
     })
   }
@@ -81,11 +76,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: {currentYearData.length > 0 && 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: {currentYearData.length > 0 && maxNumPermits}
       </p>
       <MapContainer
         id="restaurant-map"
diff --git a/tests/test_views.py b/tests/test_views.py
index 24cc64e..a4422f0 100644
--- a/tests/test_views.py
+++ b/tests/test_views.py
@@ -36,6 +36,8 @@ def test_map_data_view():
     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
+    for area in response.data:
+        if area["name"] == "Beverly":
+            assert area["num_permits"] == 2
+        elif area["name"] == "Lincoln Park":
+            assert area["num_permits"] == 3