diff --git a/frontend/src/components/Locations/AddLocationModal.tsx b/frontend/src/components/Locations/AddLocationModal.tsx
index 19105bab7..9ddd382be 100644
--- a/frontend/src/components/Locations/AddLocationModal.tsx
+++ b/frontend/src/components/Locations/AddLocationModal.tsx
@@ -1,27 +1,26 @@
 import React, { useState, useEffect } from 'react';
-import { 
-  Dialog, 
-  DialogTitle, 
-  DialogContent, 
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
   DialogActions,
   TextField,
   Button,
   Select,
   MenuItem,
   FormControl,
-  InputLabel
+  InputLabel,
 } from '@mui/material';
 import { PlacesSearch } from './PlacesSearch';
 
-
 // TODO : Move to the index.ts since it is a constant
 const CAMPUS_OPTIONS = [
   'North Campus',
-  'West Campus', 
+  'West Campus',
   'Central Campus',
   'South Campus',
   'Commons',
-  'Other'
+  'Other',
 ] as const;
 
 interface Location {
@@ -42,7 +41,7 @@ interface AddLocationModalProps {
 export const AddLocationModal: React.FC<AddLocationModalProps> = ({
   open,
   onClose,
-  onAdd
+  onAdd,
 }) => {
   const [newLocation, setNewLocation] = useState<Location>({
     name: '',
@@ -50,12 +49,12 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
     info: '',
     tag: 'Other',
     lat: 0,
-    lng: 0
+    lng: 0,
   });
 
   const [errors, setErrors] = useState({
     name: '',
-    info: ''
+    info: '',
   });
 
   useEffect(() => {
@@ -66,22 +65,22 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
         info: '',
         tag: 'Other',
         lat: 0,
-        lng: 0
+        lng: 0,
       });
       setErrors({
         name: '',
-        info: ''
+        info: '',
       });
     }
   }, [open]);
 
   const handleAddressSelect = (address: string, lat: number, lng: number) => {
     console.log('Address selected:', { address, lat, lng });
-    setNewLocation(prev => ({
+    setNewLocation((prev) => ({
       ...prev,
       address,
       lat,
-      lng
+      lng,
     }));
   };
 
@@ -98,8 +97,8 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const name = e.target.value;
     const error = validateName(name);
-    setErrors(prev => ({ ...prev, name: error }));
-    setNewLocation(prev => ({ ...prev, name }));
+    setErrors((prev) => ({ ...prev, name: error }));
+    setNewLocation((prev) => ({ ...prev, name }));
   };
 
   const handleSubmit = () => {
@@ -108,10 +107,16 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
 
     setErrors({
       name: nameError,
-      info: infoError
+      info: infoError,
     });
 
-    if (!nameError && !infoError && newLocation.address && newLocation.lat && newLocation.lng) {
+    if (
+      !nameError &&
+      !infoError &&
+      newLocation.address &&
+      newLocation.lat &&
+      newLocation.lng
+    ) {
       console.log('Submitting location:', newLocation);
       onAdd(newLocation);
       onClose();
@@ -127,7 +132,14 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
     <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
       <DialogTitle>Add New Location</DialogTitle>
       <DialogContent>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            marginTop: '1rem',
+          }}
+        >
           <TextField
             label="Location Name"
             fullWidth
@@ -136,14 +148,20 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
             error={!!errors.name}
             helperText={errors.name}
           />
-          
+
           <div>
-            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'rgba(0, 0, 0, 0.6)' }}>
+            <label
+              style={{
+                display: 'block',
+                marginBottom: '0.5rem',
+                color: 'rgba(0, 0, 0, 0.6)',
+              }}
+            >
               Address
             </label>
             <PlacesSearch onAddressSelect={handleAddressSelect} />
           </div>
-          
+
           <TextField
             label="Description"
             fullWidth
@@ -152,8 +170,11 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
             value={newLocation.info}
             onChange={(e) => {
               const info = e.target.value;
-              setErrors(prev => ({ ...prev, info: info ? '' : 'Description is required' }));
-              setNewLocation(prev => ({ ...prev, info }));
+              setErrors((prev) => ({
+                ...prev,
+                info: info ? '' : 'Description is required',
+              }));
+              setNewLocation((prev) => ({ ...prev, info }));
             }}
             error={!!errors.info}
             helperText={errors.info}
@@ -164,10 +185,12 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
             <Select
               value={newLocation.tag}
               label="Campus"
-              onChange={(e) => setNewLocation(prev => ({ 
-                ...prev, 
-                tag: e.target.value 
-              }))}
+              onChange={(e) =>
+                setNewLocation((prev) => ({
+                  ...prev,
+                  tag: e.target.value,
+                }))
+              }
             >
               {CAMPUS_OPTIONS.map((campus) => (
                 <MenuItem key={campus} value={campus}>
@@ -180,15 +203,21 @@ export const AddLocationModal: React.FC<AddLocationModalProps> = ({
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button 
+        <Button
           onClick={handleSubmit}
-          variant="contained" 
+          variant="contained"
           color="primary"
-          disabled={!newLocation.name || !newLocation.address || !newLocation.info || !newLocation.lat || !newLocation.lng}
+          disabled={
+            !newLocation.name ||
+            !newLocation.address ||
+            !newLocation.info ||
+            !newLocation.lat ||
+            !newLocation.lng
+          }
         >
           Add Location
         </Button>
       </DialogActions>
     </Dialog>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/Locations/LocationMap.tsx b/frontend/src/components/Locations/LocationMap.tsx
index 00b7cd0b5..923a4e4e0 100644
--- a/frontend/src/components/Locations/LocationMap.tsx
+++ b/frontend/src/components/Locations/LocationMap.tsx
@@ -2,8 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { Map, AdvancedMarker, Pin, useMap } from '@vis.gl/react-google-maps';
 import styles from './locations.module.css';
 
-
-// TODO : Move interface description into the index.ts and import cleaner code = better code 
+// TODO : Move interface description into the index.ts and import cleaner code = better code
 interface Location {
   id: number;
   name: string;
@@ -27,36 +26,48 @@ export const LocationMap: React.FC<LocationMapProps> = ({
 }) => {
   const map = useMap();
 
-  const handleMarkerClick = useCallback((location: Location): void => {
-    onLocationSelect(location);
-  }, [onLocationSelect]);
+  const handleMarkerClick = useCallback(
+    (location: Location): void => {
+      onLocationSelect(location);
+    },
+    [onLocationSelect]
+  );
 
   // Check if a location is within the current viewport
-  const isLocationInBounds = useCallback((map: google.maps.Map, location: Location): boolean => {
-    const bounds = map.getBounds();
-    if (!bounds) return false;
-    return bounds.contains({ lat: location.lat, lng: location.lng });
-  }, []);
+  const isLocationInBounds = useCallback(
+    (map: google.maps.Map, location: Location): boolean => {
+      const bounds = map.getBounds();
+      if (!bounds) return false;
+      return bounds.contains({ lat: location.lat, lng: location.lng });
+    },
+    []
+  );
 
   // Simple animation based on whether location is in bounds or not
-  const animateToLocation = useCallback((map: google.maps.Map, location: Location): void => {
-    const isInBounds = isLocationInBounds(map, location);
-    const targetPosition: google.maps.LatLngLiteral = { lat: location.lat, lng: location.lng };
-    const defaultZoom = 13;
+  const animateToLocation = useCallback(
+    (map: google.maps.Map, location: Location): void => {
+      const isInBounds = isLocationInBounds(map, location);
+      const targetPosition: google.maps.LatLngLiteral = {
+        lat: location.lat,
+        lng: location.lng,
+      };
+      const defaultZoom = 13;
 
-    if (!isInBounds) {
-      // If out of bounds, zoom out first then pan
-      map.setZoom(11); // Zoom out
-      setTimeout(() => {
-        map.panTo(targetPosition);
+      if (!isInBounds) {
+        // If out of bounds, zoom out first then pan
+        map.setZoom(11); // Zoom out
         setTimeout(() => {
-          map.setZoom(defaultZoom);
+          map.panTo(targetPosition);
+          setTimeout(() => {
+            map.setZoom(defaultZoom);
+          }, 300);
         }, 300);
-      }, 300);
-    } else {
-      map.panTo(targetPosition);
-    }
-  }, [isLocationInBounds]);
+      } else {
+        map.panTo(targetPosition);
+      }
+    },
+    [isLocationInBounds]
+  );
 
   useEffect(() => {
     if (map && selectedLocation) {
@@ -82,9 +93,7 @@ export const LocationMap: React.FC<LocationMapProps> = ({
         >
           <Pin
             background={
-              selectedLocation?.id === location.id
-                ? '#1976d2'
-                : '#FBBC04'
+              selectedLocation?.id === location.id ? '#1976d2' : '#FBBC04'
             }
             glyphColor="#000"
             borderColor="#000"
@@ -94,4 +103,4 @@ export const LocationMap: React.FC<LocationMapProps> = ({
       ))}
     </Map>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/components/Locations/LocationsContent.tsx b/frontend/src/components/Locations/LocationsContent.tsx
index a42b557dd..9b0967ec7 100644
--- a/frontend/src/components/Locations/LocationsContent.tsx
+++ b/frontend/src/components/Locations/LocationsContent.tsx
@@ -5,7 +5,6 @@ import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { Chip } from '@mui/material';
 import styles from './locations.module.css';
 
-
 // TODO : Move to the index.ts file cleaner code = better code
 interface Location {
   id: number;
@@ -22,8 +21,11 @@ interface LocationsContentProps {
 }
 
 const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
-  const [filteredLocations, setFilteredLocations] = useState<Location[]>(locations);
-  const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
+  const [filteredLocations, setFilteredLocations] =
+    useState<Location[]>(locations);
+  const [selectedLocation, setSelectedLocation] = useState<Location | null>(
+    null
+  );
 
   // Update filtered locations whenever locations prop changes
   useEffect(() => {
@@ -31,8 +33,8 @@ const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
     setFilteredLocations(locations);
   }, [locations]);
 
-  const uniqueTags = useMemo(() => 
-    Array.from(new Set(locations.map(location => location.tag))),
+  const uniqueTags = useMemo(
+    () => Array.from(new Set(locations.map((location) => location.tag))),
     [locations]
   );
 
@@ -53,11 +55,11 @@ const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
               {
                 field: 'tag',
                 label: 'Type',
-                options: uniqueTags.map(tag => ({
+                options: uniqueTags.map((tag) => ({
                   value: tag,
-                  label: tag.charAt(0).toUpperCase() + tag.slice(1)
-                }))
-              }
+                  label: tag.charAt(0).toUpperCase() + tag.slice(1),
+                })),
+              },
             ]}
             onFilterApply={handleFilterApply}
           />
@@ -112,4 +114,4 @@ const LocationsContent: React.FC<LocationsContentProps> = ({ locations }) => {
   );
 };
 
-export default LocationsContent;
\ No newline at end of file
+export default LocationsContent;
diff --git a/frontend/src/components/Locations/PlacesSearch.tsx b/frontend/src/components/Locations/PlacesSearch.tsx
index bbafaf463..3ab609bb9 100644
--- a/frontend/src/components/Locations/PlacesSearch.tsx
+++ b/frontend/src/components/Locations/PlacesSearch.tsx
@@ -1,5 +1,10 @@
 import React, { useState, useCallback } from 'react';
-import { TextField, Paper, CircularProgress, FormHelperText } from '@mui/material';
+import {
+  TextField,
+  Paper,
+  CircularProgress,
+  FormHelperText,
+} from '@mui/material';
 import { useMap } from '@vis.gl/react-google-maps';
 import styles from './locations.module.css';
 
@@ -7,99 +12,116 @@ interface PlacesSearchProps {
   onAddressSelect: (address: string, lat: number, lng: number) => void;
 }
 
-export const PlacesSearch: React.FC<PlacesSearchProps> = React.memo(({ onAddressSelect }) => {
-  const [searchValue, setSearchValue] = useState('');
-  const [results, setResults] = useState<google.maps.places.PlaceResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const map = useMap();
+export const PlacesSearch: React.FC<PlacesSearchProps> = React.memo(
+  ({ onAddressSelect }) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [results, setResults] = useState<google.maps.places.PlaceResult[]>(
+      []
+    );
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const map = useMap();
 
-  const searchPlace = useCallback(async (query: string) => {
-    if (!map || !query) {
-      setResults([]);
-      setError('');
-      return;
-    }
+    const searchPlace = useCallback(
+      async (query: string) => {
+        if (!map || !query) {
+          setResults([]);
+          setError('');
+          return;
+        }
 
-    try {
-      setIsLoading(true);
-      setError('');
-      const service = new google.maps.places.PlacesService(map);
-      const request = {
-        query,
-        fields: ['name', 'geometry', 'formatted_address'],
-      };
+        try {
+          setIsLoading(true);
+          setError('');
+          const service = new google.maps.places.PlacesService(map);
+          const request = {
+            query,
+            fields: ['name', 'geometry', 'formatted_address'],
+          };
 
-      service.findPlaceFromQuery(request, (results, status) => {
-        setIsLoading(false);
-        if (status === google.maps.places.PlacesServiceStatus.OK && results && results.length > 0) {
-          setResults(results);
-        } else {
+          service.findPlaceFromQuery(request, (results, status) => {
+            setIsLoading(false);
+            if (
+              status === google.maps.places.PlacesServiceStatus.OK &&
+              results &&
+              results.length > 0
+            ) {
+              setResults(results);
+            } else {
+              setResults([]);
+              setError('No matching address found');
+            }
+          });
+        } catch (error) {
+          console.error('Error searching place:', error);
+          setIsLoading(false);
+          setError('Error searching for address');
           setResults([]);
-          setError('No matching address found');
         }
-      });
-    } catch (error) {
-      console.error('Error searching place:', error);
-      setIsLoading(false);
-      setError('Error searching for address');
-      setResults([]);
-    }
-  }, [map]);
+      },
+      [map]
+    );
 
-  const handleSubmit = useCallback((event: React.FormEvent) => {
-    event.preventDefault();
-    if (searchValue.trim()) {
-      searchPlace(searchValue);
-    }
-  }, [searchValue, searchPlace]);
+    const handleSubmit = useCallback(
+      (event: React.FormEvent) => {
+        event.preventDefault();
+        if (searchValue.trim()) {
+          searchPlace(searchValue);
+        }
+      },
+      [searchValue, searchPlace]
+    );
 
-  const handleSelect = useCallback((place: google.maps.places.PlaceResult) => {
-    if (place.geometry?.location) {
-      const lat = place.geometry.location.lat();
-      const lng = place.geometry.location.lng();
-      const address = place.formatted_address || place.name || '';
-      onAddressSelect(address, lat, lng);
-      setSearchValue(address);
-      setResults([]);
-      setError('');
-    }
-  }, [onAddressSelect]);
+    const handleSelect = useCallback(
+      (place: google.maps.places.PlaceResult) => {
+        if (place.geometry?.location) {
+          const lat = place.geometry.location.lat();
+          const lng = place.geometry.location.lng();
+          const address = place.formatted_address || place.name || '';
+          onAddressSelect(address, lat, lng);
+          setSearchValue(address);
+          setResults([]);
+          setError('');
+        }
+      },
+      [onAddressSelect]
+    );
 
-  return (
-    <div className={styles.placesSearch}>
-      <form onSubmit={handleSubmit}>
-        <TextField
-          fullWidth
-          value={searchValue}
-          onChange={(e) => {
-            setSearchValue(e.target.value);
-            setError(''); // Clear error when user types
-          }}
-          placeholder="Enter address and press Enter to search"
-          helperText={error || "Press Enter to search for an address"}
-          error={!!error}
-          variant="outlined"
-          size="small"
-          InputProps={{
-            endAdornment: isLoading && <CircularProgress size={20} />,
-          }}
-        />
-      </form>
+    return (
+      <div className={styles.placesSearch}>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            value={searchValue}
+            onChange={(e) => {
+              setSearchValue(e.target.value);
+              setError(''); // Clear error when user types
+            }}
+            placeholder="Enter address and press Enter to search"
+            helperText={error || 'Press Enter to search for an address'}
+            error={!!error}
+            variant="outlined"
+            size="small"
+            InputProps={{
+              endAdornment: isLoading && <CircularProgress size={20} />,
+            }}
+          />
+        </form>
 
-      {results.length > 0 && (
-        <Paper className={styles.resultsContainer} elevation={3}>
-          {results.map((place, index) => (
-            <div
-              key={index}
-              className={styles.resultItem}
-              onClick={() => handleSelect(place)}
-            >
-              {place.formatted_address || place.name}
-            </div>
-          ))}
-        </Paper>
-      )}
-    </div>
-  );
-});
\ No newline at end of file
+        {results.length > 0 && (
+          <Paper className={styles.resultsContainer} elevation={3}>
+            {results.map((place, index) => (
+              <div
+                key={index}
+                className={styles.resultItem}
+                onClick={() => handleSelect(place)}
+              >
+                {place.formatted_address || place.name}
+              </div>
+            ))}
+          </Paper>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/frontend/src/components/Locations/locations.module.css b/frontend/src/components/Locations/locations.module.css
index cdef9df62..d422545b3 100644
--- a/frontend/src/components/Locations/locations.module.css
+++ b/frontend/src/components/Locations/locations.module.css
@@ -40,11 +40,10 @@
   background: #f5f5f5;
   border-radius: 4px;
   padding: 1rem;
-  min-height: 0; 
+  min-height: 0;
   max-height: calc(100vh - 300px);
 }
 
-
 /* Scrollbar styling */
 .locationsList::-webkit-scrollbar {
   width: 8px;
@@ -79,7 +78,7 @@
 }
 
 .locationItem:hover {
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .locationItemSelected {
@@ -174,4 +173,4 @@
 
 :global(.suggestion-item:hover) {
   background-color: rgba(0, 0, 0, 0.04);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Admin/Locations.tsx b/frontend/src/pages/Admin/Locations.tsx
index 95b76ba77..6678295ca 100644
--- a/frontend/src/pages/Admin/Locations.tsx
+++ b/frontend/src/pages/Admin/Locations.tsx
@@ -7,7 +7,7 @@ import LocationsContent from 'components/Locations/LocationsContent';
 import { AddLocationModal } from 'components/Locations/AddLocationModal';
 import styles from './page.module.css';
 
-// TODO : Move interface to index.ts 
+// TODO : Move interface to index.ts
 
 interface Location {
   id: number;