diff --git a/map/serializers.py b/map/serializers.py
index 03dd912..8953812 100644
--- a/map/serializers.py
+++ b/map/serializers.py
@@ -31,4 +31,7 @@ def get_num_permits(self, obj):
         ]
         """
 
-        pass
+        return RestaurantPermit.objects.filter(
+            community_area_id=obj.area_id,
+            issue_date__year=self.context["year"],
+        ).count()
diff --git a/map/static/js/RestaurantPermitMap.js b/map/static/js/RestaurantPermitMap.js
index 57f8ea0..ce023e8 100644
--- a/map/static/js/RestaurantPermitMap.js
+++ b/map/static/js/RestaurantPermitMap.js
@@ -1,24 +1,24 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react";
 
-import { MapContainer, TileLayer, GeoJSON } from "react-leaflet"
+import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
 
-import "leaflet/dist/leaflet.css"
+import "leaflet/dist/leaflet.css";
 
-import RAW_COMMUNITY_AREAS from "../../../data/raw/community-areas.geojson"
+import RAW_COMMUNITY_AREAS from "../../../data/raw/community-areas.geojson";
 
 function YearSelect({ setFilterVal }) {
   // Filter by the permit issue year for each restaurant
-  const startYear = 2026
+  const startYear = 2026;
   const years = [...Array(11).keys()].map((increment) => {
-    return startYear - increment
-  })
+    return startYear - increment;
+  });
   const options = years.map((year) => {
     return (
       <option value={year} key={year}>
         {year}
       </option>
-    )
-  })
+    );
+  });
 
   return (
     <>
@@ -33,65 +33,93 @@ function YearSelect({ setFilterVal }) {
         {options}
       </select>
     </>
-  )
+  );
 }
 
 export default function RestaurantPermitMap() {
-  const communityAreaColors = ["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"]
+  const communityAreaColors = ["#eff3ff", "#bdd7e7", "#6baed6", "#2171b5"];
+  
+  const [maxNumPermits, setMaxNumPermits] = useState([]);
+  const [totalPermits, setTotalPermits] = useState([]);
 
-  const [currentYearData, setCurrentYearData] = useState([])
-  const [year, setYear] = useState(2026)
+  const [currentYearData, setCurrentYearData] = useState([]);
+  const [year, setYear] = useState(2026);
 
-  const yearlyDataEndpoint = `/map-data/?year=${year}`
+  const yearlyDataEndpoint = `/map-data/?year=${year}`;
 
   useEffect(() => {
-    fetch()
+    fetch(yearlyDataEndpoint)
       .then((res) => res.json())
       .then((data) => {
         /**
          * TODO: Fetch the data needed to supply to map with data
          */
-      })
-  }, [yearlyDataEndpoint])
+        setCurrentYearData(data);
 
+        let max = 0;
+        let total = 0;
+        data.forEach((area) => {
+          total += area.num_permits;
+          if (area.num_permits > max) {
+            max = area.num_permits;
+          }
+        });
+
+        setMaxNumPermits(max);
+        setTotalPermits(total);
+      });
+  }, [yearlyDataEndpoint]);
 
   function getColor(percentageOfPermits) {
     /**
-     * TODO: Use this function in setAreaInteraction to set a community 
+     * TODO: Use this function in setAreaInteraction to set a community
      * area's color using the communityAreaColors constant above
      */
+    return communityAreaColors[Math.min(Math.ceil(percentageOfPermits / 25), 3)];
   }
 
   function setAreaInteraction(feature, layer) {
     /**
      * TODO: Use the methods below to:
-     * 1) Shade each community area according to what percentage of 
+     * 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 
+     * 2) On hover, display a popup with the community area's raw
      * permit count for the year
      */
-    layer.setStyle()
-    layer.on("", () => {
-      layer.bindPopup("")
-      layer.openPopup()
-    })
+    const areaData = currentYearData.find(
+      (area) => area.name === feature.properties.community,
+    );
+    const percentage = (areaData.num_permits / maxNumPermits) * 100;
+
+    layer.setStyle({
+      fillColor: getColor(percentage),
+      fillOpacity: 0.7,
+      color: "black",
+      weight: 1,
+    });
+    layer.on("mouseover",
+      () => {
+        layer.bindPopup(
+          `<b>${areaData.name}<b>
+          <p>Year: ${year}</p>
+          <p>Restaurant permits: ${areaData.num_permits}</p>`
+        );
+        layer.openPopup();
+      },
+    );
   }
 
   return (
     <>
       <YearSelect filterVal={year} setFilterVal={setYear} />
       <p className="fs-4">
-        Restaurant permits issued this year: {/* TODO: display this value */}
+        Restaurant permits issued this year: {totalPermits}
       </p>
       <p className="fs-4">
         Maximum number of restaurant permits in a single area:
-        {/* TODO: display this value */}
+        {maxNumPermits}
       </p>
-      <MapContainer
-        id="restaurant-map"
-        center={[41.88, -87.62]}
-        zoom={10}
-      >
+      <MapContainer id="restaurant-map" center={[41.88, -87.62]} zoom={10}>
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
@@ -105,5 +133,5 @@ export default function RestaurantPermitMap() {
         ) : null}
       </MapContainer>
     </>
-  )
+  );
 }
diff --git a/tests/test_views.py b/tests/test_views.py
index 24cc64e..c9b191b 100644
--- a/tests/test_views.py
+++ b/tests/test_views.py
@@ -3,6 +3,7 @@
 
 from django.shortcuts import reverse
 from rest_framework.test import APIClient
+from rest_framework import status
 
 from map.models import CommunityArea, RestaurantPermit
 
@@ -39,3 +40,11 @@ def test_map_data_view():
     # 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.status_code == status.HTTP_200_OK)
+
+    for area in response.data:
+        if area["name"] == "Beverly":
+            assert(area["num_permits"] == 2)
+        if area["name"] == "Lincoln Park":
+            assert(area["num_permits"] == 3)