diff --git a/src/components/OpenLayerMap.tsx b/src/components/OpenLayerMap.tsx
index 9fc5bfe..c3254c4 100644
--- a/src/components/OpenLayerMap.tsx
+++ b/src/components/OpenLayerMap.tsx
@@ -20,131 +20,121 @@ const OpenLayersMap = () => {
   const [term, setTerm] = useState<string>('');
   const [address, setAddress] = useState();
 
-
   //Submit Button Logic
-
   const submitForm = async (event: React.FormEvent<HTMLFormElement>) => {
     // Preventing the page from reloading
     event.preventDefault();
 
-    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`)
-
+    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`);
     const json = await response.json();
     console.log(json);
     setAddress(json);
     console.log(address);
     alert(term);
   }
-
   //Submit Button Logic
 
-
   //const [data, setData] = useState({});
   const mapDivRef = useRef<HTMLDivElement>(null);
   const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
   const mapRef = useRef<Map | null>(null);
-const markerLayerRef = useRef<VectorLayer | null>(null);
+  const markerLayerRef = useRef<VectorLayer | null>(null);
+  const parcelLayerRef = useRef<VectorLayer | null>(null);
 
-useEffect(() => {
-  if (!mapRef.current) {
-    const map = new Map({
-      target: mapDivRef.current as HTMLDivElement,
-      layers: [new TileLayer({ source: new OSM() })],
-    });
-    mapRef.current = map;
+  useEffect(() => {
+    if (!mapRef.current) {
+      const map = new Map({
+        target: mapDivRef.current as HTMLDivElement,
+        layers: [new TileLayer({ source: new OSM() })],
+      });
+      mapRef.current = map;
 
-    map.on('click', (e) => {
-      setClickedCoordinate(e.coordinate);
-    });
-  }
-
-  if (address && address.length > 0) {
-    const lat = parseFloat(address[0].lat);
-    const lon = parseFloat(address[0].lon);
-    const coords = fromLonLat([lon, lat]);
-
-    // Set view to the searched location
-    mapRef.current!.setView(new View({
-      center: coords,
-      zoom: 15,
-    }));
-
-    // Create the marker feature
-    const markerFeature = new Feature({
-      geometry: new Point(coords),
-    });
-
-    markerFeature.setStyle(new Style({
-      image: new Icon({
-        anchor: [0.5, 1],
-        src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png', // A pin icon
-        scale: 0.05,
-      }),
-    }));
-
-    // Create vector source and layer
-    const vectorSource = new VectorSource({
-      features: [markerFeature],
-    });
-
-    const markerLayer = new VectorLayer({
-      source: vectorSource,
-    });
-
-    // Remove old marker layer if it exists
-    if (markerLayerRef.current) {
-      mapRef.current!.removeLayer(markerLayerRef.current);
+      map.on('click', (e) => {
+        setClickedCoordinate(e.coordinate);
+      });
     }
 
-    // Add new marker layer
-    mapRef.current!.addLayer(markerLayer);
-    markerLayerRef.current = markerLayer;
-  }
-}, [address]);
+    if (address && address.length > 0) {
+      const lat = parseFloat(address[0].lat);
+      const lon = parseFloat(address[0].lon);
+      const coords = fromLonLat([lon, lat]);
 
+      // Set view to the searched location
+      mapRef.current!.setView(new View({
+        center: coords,
+        zoom: 15,
+      }));
 
-  //Parcel Layer
-  useEffect(() => {
-    if (!mapRef.current) return;
-
-    const url = 'https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query' +
-      '?where=1=1&outFields=*&returnGeometry=true&f=geojson&resultRecordCount=5000';
-
-    fetch(url)
-      .then((res) => res.json())
-      .then((geojsonData) => {
-        const vectorSource = new VectorSource({
-          features: new GeoJSON().readFeatures(geojsonData, {
-            featureProjection: 'EPSG:3857', // Make sure features match OSM projection
-          }),
-        });
-
-        const vectorLayer = new VectorLayer({
-          source: vectorSource,
-          style: new Style({
-            stroke: new Stroke({
-              color: 'green',
-              width: 1.5,
-            }),
-            fill: new Fill({
-              color: 'rgba(0, 255, 0, 0.1)',
-            }),
-          }),
-        });
-
-        mapRef.current?.addLayer(vectorLayer);
-
-        // ✅ Fit map to features
-        mapRef.current?.getView().fit(vectorSource.getExtent(), {
-          padding: [20, 20, 20, 20],
-          maxZoom: 17,
-        });
-      })
-      .catch((err) => {
-        console.error('Error loading GeoJSON:', err);
+      // Create the marker feature
+      const markerFeature = new Feature({
+        geometry: new Point(coords),
       });
-  }, []);
 
+      markerFeature.setStyle(new Style({
+        image: new Icon({
+          anchor: [0.5, 1],
+          src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png', // A pin icon
+          scale: 0.05,
+        }),
+      }));
+
+      // Create vector source and layer
+      const vectorSource = new VectorSource({
+        features: [markerFeature],
+      });
+
+      const markerLayer = new VectorLayer({
+        source: vectorSource,
+      });
+
+      // Remove old marker layer if it exists
+      if (markerLayerRef.current) {
+        mapRef.current!.removeLayer(markerLayerRef.current);
+      }
+
+      // Add new marker layer
+      mapRef.current!.addLayer(markerLayer);
+      markerLayerRef.current = markerLayer;
+
+      //Parcel Layer
+      const radius = 500; // meters
+      const parcelUrl = `https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query?geometry=${lon},${lat}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=${radius}&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=geojson`;
+
+      fetch(parcelUrl)
+        .then((res) => res.json())
+        .then((geojsonData) => {
+          // 🧹 Remove previous parcel layer if exists
+          if (parcelLayerRef.current) {
+            mapRef.current?.removeLayer(parcelLayerRef.current);
+          }
+
+          const vectorSource = new VectorSource({
+            features: new GeoJSON().readFeatures(geojsonData, {
+              featureProjection: 'EPSG:3857',
+            }),
+          });
+
+          const vectorLayer = new VectorLayer({
+            source: vectorSource,
+            style: new Style({
+              stroke: new Stroke({
+                color: 'green',
+                width: 1.5,
+              }),
+              fill: new Fill({
+                color: 'rgba(0, 255, 0, 0.1)',
+              }),
+            }),
+          });
+
+          mapRef.current?.addLayer(vectorLayer);
+          parcelLayerRef.current = vectorLayer;
+        })
+        .catch((err) => {
+          console.error('Error fetching parcels:', err);
+        });
+    }
+  }, [address]); // ✅ Moved outside the useEffect block (syntax fix)
 
   //UI Downstairs
   return (
@@ -173,6 +163,3 @@ useEffect(() => {
 };
 
 export default OpenLayersMap;
-
-
-