diff --git a/map/serializers.py b/map/serializers.py
index 03dd912..abd7a57 100644
--- a/map/serializers.py
+++ b/map/serializers.py
@@ -2,14 +2,17 @@
 
 from map.models import CommunityArea, RestaurantPermit
 
-
 class CommunityAreaSerializer(serializers.ModelSerializer):
     class Meta:
         model = CommunityArea
-        fields = ["name", "num_permits"]
+        fields = ["name", "area_id", "num_permits"]
 
+    area_id = serializers.SerializerMethodField()
     num_permits = serializers.SerializerMethodField()
 
+    def get_area_id(self, obj):
+        return obj.area_id
+
     def get_num_permits(self, obj):
         """
         TODO: supplement each community area object with the number
@@ -30,5 +33,5 @@ def get_num_permits(self, obj):
             }
         ]
         """
-
-        pass
+        year = int(self.context.get("year"))
+        return RestaurantPermit.objects.filter( community_area_id=str(obj.area_id), issue_date__year=year).count()
diff --git a/map/static/js/RestaurantPermitMap.js b/map/static/js/RestaurantPermitMap.js
index 57f8ea0..e7e84aa 100644
--- a/map/static/js/RestaurantPermitMap.js
+++ b/map/static/js/RestaurantPermitMap.js
@@ -41,25 +41,52 @@ export default function RestaurantPermitMap() {
 
   const [currentYearData, setCurrentYearData] = useState([])
   const [year, setYear] = useState(2026)
-
-  const yearlyDataEndpoint = `/map-data/?year=${year}`
+  const [maxNumPermits, setMaxNumPermits] = useState(0)
+  const [totalNumPermits, setTotalNumPermits] = useState(0)
 
   useEffect(() => {
-    fetch()
+    fetch(`/map-data/?year=${year}`)
       .then((res) => res.json())
       .then((data) => {
-        /**
-         * TODO: Fetch the data needed to supply to map with data
-         */
-      })
-  }, [yearlyDataEndpoint])
+        setCurrentYearData(data);
+      });
+  }, [year]);
 
+  useEffect(() => {
+    var current_maxNumPermits = 0
+    var current_totalNumPermits = 0
+    currentYearData.forEach(function (area, index) {
+      if (area['num_permits'] > current_maxNumPermits) {
+        current_maxNumPermits = area['num_permits'];
+      }
+      current_totalNumPermits = current_totalNumPermits + 1;
+    });
+    setMaxNumPermits(current_maxNumPermits);
+    setTotalNumPermits(current_totalNumPermits);
+  }, [currentYearData]);
 
   function getColor(percentageOfPermits) {
     /**
      * TODO: Use this function in setAreaInteraction to set a community 
      * area's color using the communityAreaColors constant above
      */
+    if (percentageOfPermits == 0) {
+      return communityAreaColors[0];
+    } else if (percentageOfPermits < 0.10) {
+      return communityAreaColors[1];
+    } else if (percentageOfPermits < 0.25) {
+      return communityAreaColors[2];
+    }
+    else {
+      return communityAreaColors[3];
+    }
+  }
+
+  // Needs performance improvement (I would do the initial data processing differently)
+  // TODO fix area loop (it's giving me a number rather than an object?)
+  function findPermitCount(area_id) {
+    var area = currentYearData.find((element) => element['area_id'].toString() == area_id)
+    return area ? area['num_permits'] : -1;
   }
 
   function setAreaInteraction(feature, layer) {
@@ -70,9 +97,13 @@ export default function RestaurantPermitMap() {
      * 2) On hover, display a popup with the community area's raw 
      * permit count for the year
      */
-    layer.setStyle()
-    layer.on("", () => {
-      layer.bindPopup("")
+    var permit_count = findPermitCount(feature.properties.area_num_1)
+    var percentageOfPermits = Boolean(totalNumPermits) ? permit_count / totalNumPermits : 0;
+    layer.setStyle({fillColor: getColor(percentageOfPermits), strokeWeight: 5, fillOpacity: 0.6})
+    layer.on("click", () => {
+      if (feature.properties.community) {
+        layer.bindPopup(`${feature.properties.community}'s permit count ${permit_count}`)
+      }
       layer.openPopup()
     })
   }
@@ -81,11 +112,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..e9c1164 100644
--- a/tests/test_views.py
+++ b/tests/test_views.py
@@ -34,8 +34,16 @@ def test_map_data_view():
 
     # Query the map data endpoint
     client = APIClient()
-    response = client.get(reverse("map_data", query={"year": 2021}))
+    response = client.get(reverse("map_data"), {"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
+    data = response.data
+    beverly = next((area for area in data if area["name"] == "Beverly"), None)
+    lincoln_park = next((area for area in data if area["name"] == "Lincoln Park"), None)
+    assert beverly is not None
+    assert lincoln_park is not None
+    assert beverly['num_permits'] == 2
+    assert lincoln_park['num_permits'] == 3
+