diff --git a/apps/green-infrastructure/frontend/src/components/map/MapLegend.tsx b/apps/green-infrastructure/frontend/src/components/map/MapLegend.tsx
index 051938d..cc3e040 100644
--- a/apps/green-infrastructure/frontend/src/components/map/MapLegend.tsx
+++ b/apps/green-infrastructure/frontend/src/components/map/MapLegend.tsx
@@ -4,7 +4,7 @@ import { ReactNode, useState } from 'react';
 import { SITE_STATUS_ROADMAP } from '../../constants';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import { Collapse } from '@mui/material';
-import ArrowBackIosIcon  from '@mui/icons-material/ArrowBackIos';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import generateCircleSVG from '../../images/markers/circle';
 import generateDiamondSVG from '../../images/markers/diamond';
 import generateSquareSVG from '../../images/markers/square';
@@ -18,30 +18,27 @@ import starSVG from '../../images/markers/star.svg';
 import pentagonSVG from '../../images/markers/pentagon.svg';
 import { CheckboxOptionType, CheckboxValueType } from 'antd/es/checkbox/Group';
 
-
 const Title = styled.h1`
-font-size: 15px;
-font-weight: bold; 
-color: #091F2F;
-text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  color: #091f2f;
+  text-align: center;
 `;
 
-
 const Heading = styled.h2`
-color: rgba(88, 88, 91, 1);
-text-align: center;
-font-family: Lora;
-font-size: 15px;
-font-weight: 400;
-line-height: 19px;
-letter-spacing: 0em;
-text-align: center;
+  color: rgba(88, 88, 91, 1);
+  text-align: center;
+  font-family: Lora;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+  text-align: center;
 `;
 
-
 const MapLegendContainer = styled.div<{ isVisible: boolean }>`
   background: rgba(255, 253, 253, 1);
-  width: 247px;             
+  width: 247px;
   gap: 20px;
   position: relative;
   transition: height 0.3s ease;
@@ -58,7 +55,6 @@ const LegendItem = styled.div`
   margin: 10px;
 `;
 
-
 const LegendImage = styled(Image)`
   height: 20px;
   width: 20px;
@@ -67,10 +63,10 @@ const LegendImage = styled(Image)`
 `;
 
 const FeatureContainer = styled.div`
-width: 206px;
-height: 284px;
-margin: 10px;
-background: rgba(242, 242, 242, 1);
+  width: 206px;
+  height: 284px;
+  margin: 10px;
+  background: rgba(242, 242, 242, 1);
 `;
 
 const StatusCheckbox = styled(Checkbox.Group)`
@@ -88,34 +84,32 @@ const StatusCheckbox = styled(Checkbox.Group)`
 `;
 
 const StatusContainer = styled.div`
-width: 206px;
-height: 79px;
-margin: 10px;
-background: rgba(242, 242, 242, 1);
+  width: 206px;
+  height: 79px;
+  margin: 10px;
+  background: rgba(242, 242, 242, 1);
 `;
 
-
 const StyledButton = styled.button<{ isSelected: boolean }>`
-  background-color: ${(props) => (props.isSelected ? '#45789C;' : '#fff')};
+  background-color: ${(props) => (props.isSelected ? '#45789C' : '#fff')};
   height: 36px;
   width: 187px;
-  color: #fff;
-  border: line;
+  border-style: solid;
+  border-color: black;
   padding: 10px 20px;
   cursor: pointer;
   font-size: 14px;
-  font-family: Montserrat;
-  font-weight: 600;
-  line-height: 17px;
   letter-spacing: 0em;
   text-align: left;
   align-items: center;
-  color:${(props) => (props.isSelected ? '#fff' : 'rgba(24, 112, 188, 1)')};
+  color: ${(props) => (props.isSelected ? '#fff' : 'rgba(24, 112, 188, 1)')};
   display: flex;
+  &:hover {
+    background-color: ${(props) => (props.isSelected ? '#45789C' : '#45789C')};
+    color: ${(props) => (props.isSelected ? '#fff' : '#fff')};
+  }
 `;
 
-
-
 const StatusButton = styled.button<{ isSelected: boolean }>`
   // background-color: ${(props) => (props.isSelected ? '#e74c3c' : '#fff')};
   height: 28px;
@@ -136,7 +130,6 @@ const StatusButton = styled.button<{ isSelected: boolean }>`
   display: flex;
 `;
 
-
 const ToggleContainer = styled.div<{ isVisible: boolean }>`
   cursor: pointer;
   font-size: 18px;
@@ -146,18 +139,16 @@ const ToggleContainer = styled.div<{ isVisible: boolean }>`
   z-index: 1;
   display: flex;
   justify-content: center;
-  background: #091F2F;
+  background: #091f2f;
   bottom: 0px;
-  
 `;
 
-
 const CaretDownStyled = styled(CaretDownOutlined)`
-  color: #FFFFFF;
+  color: #ffffff;
 `;
 
 const CaretUpStyled = styled(CaretUpOutlined)`
-  color: #FFFFFF;
+  color: #ffffff;
 `;
 
 const FullWidthSpace = styled(Space)`
@@ -198,155 +189,216 @@ interface MapLegendProps {
   setSelectedFeatures: any;
   selectedStatuses: string[];
   setSelectedStatuses: any;
-  icons: string[] | null; 
+  icons: string[] | null;
 }
 
-const MapLegend: React.FC<MapLegendProps> = ({ selectedFeatures, setSelectedFeatures, selectedStatuses, setSelectedStatuses, icons }) => {
-    const [isVisible, setIsVisible] = useState(true);
-
-    const options: CheckboxOptionType[] = SITE_STATUS_ROADMAP.map((option) => {
-      return {
-        label: statusSpan(option.image, option.label),
-        value: option.value,
-      };
-    });
-
-    const toggleShowLegend = () => {
-        setIsVisible((prev) => !prev);
-      };
-
-    const [availableIcon, adoptedIcon] =
-      icons ?? SITE_STATUS_ROADMAP.map((option) => option.image);
-
-  
-      const handleFeatureClick = (icon: string) => {
-        // Check if the icon is already selected
-        const isAlreadySelected = selectedFeatures.includes(icon);
-    
-        if (isAlreadySelected) {
-          // Deselect the icon
-          setSelectedFeatures((prevSelectedFeatures: string []) =>
-            prevSelectedFeatures.filter((selected) => selected !== icon)
-          );
-        } else {
-          // Select the icon
-          setSelectedFeatures((prevSelectedFeatures: string []) => [...prevSelectedFeatures, icon]);
-        }
-      };
+const MapLegend: React.FC<MapLegendProps> = ({
+  selectedFeatures,
+  setSelectedFeatures,
+  selectedStatuses,
+  setSelectedStatuses,
+  icons,
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const options: CheckboxOptionType[] = SITE_STATUS_ROADMAP.map((option) => {
+    return {
+      label: statusSpan(option.image, option.label),
+      value: option.value,
+    };
+  });
+
+  const toggleShowLegend = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  const [availableIcon, adoptedIcon] =
+    icons ?? SITE_STATUS_ROADMAP.map((option) => option.image);
+
+  const handleFeatureClick = (icon: string) => {
+    // Check if the icon is already selected
+    const isAlreadySelected = selectedFeatures.includes(icon);
+
+    if (isAlreadySelected) {
+      // Deselect the icon
+      setSelectedFeatures((prevSelectedFeatures: string[]) =>
+        prevSelectedFeatures.filter((selected) => selected !== icon)
+      );
+    } else {
+      // Select the icon
+      setSelectedFeatures((prevSelectedFeatures: string[]) => [
+        ...prevSelectedFeatures,
+        icon,
+      ]);
+    }
+  };
+
+  const handleStatusClick = (values: CheckboxValueType[]) => {
+    // set selected statuses
+    setSelectedStatuses(values);
+  };
 
-      const handleStatusClick = (values: CheckboxValueType[]) => {
-        // set selected statuses
-        setSelectedStatuses(values);
-      };
-
-    return (
-
-      <Collapse collapsedSize={20} in={isVisible}>
+  return (
+    <Collapse collapsedSize={20} in={isVisible}>
       <MapLegendContainer isVisible={isVisible}>
-      <Title>FEATURE TYPE</Title>
-      <Heading>Legend and Description</Heading>
-
-<FeatureContainer>
-      <LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Rain Garden')} 
-      isSelected={selectedFeatures.includes('Rain Garden')} 
-    >
-      <LegendImage src={squareSVG} alt="Square" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      RAIN GARDEN
-    </StyledButton>
-  )}
-</LegendItem>
-
-<LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Bioswale')} 
-      isSelected={selectedFeatures.includes('Bioswale')} 
-    >
-      <LegendImage src={triangleSVG} alt="Triangle" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      BIOSWALE
-    </StyledButton>
-  )}
-</LegendItem>
-
-<LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Bioretention')} 
-      isSelected={selectedFeatures.includes('Bioretention')} 
-    >
-      <LegendImage src={circleSVG} alt="Circle" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      BIORETENTION
-    </StyledButton>
-  )}
-</LegendItem>
-
-
-<LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Porous Paving')} 
-      isSelected={selectedFeatures.includes('Porous Paving')} 
-    >
-      <LegendImage src={diamondSVG} alt="Diamond" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      POROUS PAVING
-    </StyledButton>
-  )}
-</LegendItem>
-
-
-<LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Tree Trench/Pit')} 
-      isSelected={selectedFeatures.includes('Tree Trench/Pit')} 
-    >
-      <LegendImage src={starSVG} alt="Star" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      TREE TRENCH/PIT
-    </StyledButton>
-  )}
-</LegendItem>
-
-<LegendItem>
-  {icons && (
-    <StyledButton
-      onClick={() => handleFeatureClick('Green Roof/Planter')} 
-      isSelected={selectedFeatures.includes('Green Roof/Planter')} 
-    >
-      <LegendImage src={pentagonSVG} alt="Pentagon" style={{ width: '20px', height: '20px', justifyContent: 'center' }} />
-      GREEN ROOF/PLANTER
-    </StyledButton>
-  )}
-</LegendItem>
-</FeatureContainer>
-
-<StatusContainer>
-<LegendItem>
-  {icons && (
-    <StatusCheckbox
-      onChange={(values: CheckboxValueType[]) =>
-        handleStatusClick(values)
-      }
-      value={selectedStatuses}
-      options={options}
-    />
-  )}
-</LegendItem>
-</StatusContainer>
-  </MapLegendContainer>
-  <ToggleContainer isVisible={isVisible} onClick={toggleShowLegend}>
-  {isVisible? <ArrowBackIosIcon  style={{
-    transform: 'translateY(-30%) rotate(-90deg)',
-    color: 'white'}} /> : <ArrowBackIosIcon style={{transform: 'translateY(15%) rotate(90deg)',
-    color: 'white'}} />}
-  </ToggleContainer>
-  </Collapse>
+        <Title>FEATURE TYPE</Title>
+        <Heading>Legend and Description</Heading>
+
+        <FeatureContainer>
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Rain Garden')}
+                isSelected={selectedFeatures.includes('Rain Garden')}
+              >
+                <LegendImage
+                  src={squareSVG}
+                  alt="Square"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                RAIN GARDEN
+              </StyledButton>
+            )}
+          </LegendItem>
+
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Bioswale')}
+                isSelected={selectedFeatures.includes('Bioswale')}
+              >
+                <LegendImage
+                  src={triangleSVG}
+                  alt="Triangle"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                BIOSWALE
+              </StyledButton>
+            )}
+          </LegendItem>
+
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Bioretention')}
+                isSelected={selectedFeatures.includes('Bioretention')}
+              >
+                <LegendImage
+                  src={circleSVG}
+                  alt="Circle"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                BIORETENTION
+              </StyledButton>
+            )}
+          </LegendItem>
+
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Porous Paving')}
+                isSelected={selectedFeatures.includes('Porous Paving')}
+              >
+                <LegendImage
+                  src={diamondSVG}
+                  alt="Diamond"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                POROUS PAVING
+              </StyledButton>
+            )}
+          </LegendItem>
+
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Tree Trench/Pit')}
+                isSelected={selectedFeatures.includes('Tree Trench/Pit')}
+              >
+                <LegendImage
+                  src={starSVG}
+                  alt="Star"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                TREE TRENCH/PIT
+              </StyledButton>
+            )}
+          </LegendItem>
+
+          <LegendItem>
+            {icons && (
+              <StyledButton
+                onClick={() => handleFeatureClick('Green Roof/Planter')}
+                isSelected={selectedFeatures.includes('Green Roof/Planter')}
+              >
+                <LegendImage
+                  src={pentagonSVG}
+                  alt="Pentagon"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    justifyContent: 'center',
+                  }}
+                />
+                GREEN ROOF/PLANTER
+              </StyledButton>
+            )}
+          </LegendItem>
+        </FeatureContainer>
+
+        <StatusContainer>
+          <LegendItem>
+            {icons && (
+              <StatusCheckbox
+                onChange={(values: CheckboxValueType[]) =>
+                  handleStatusClick(values)
+                }
+                value={selectedStatuses}
+                options={options}
+              />
+            )}
+          </LegendItem>
+        </StatusContainer>
+      </MapLegendContainer>
+      <ToggleContainer isVisible={isVisible} onClick={toggleShowLegend}>
+        {isVisible ? (
+          <ArrowBackIosIcon
+            style={{
+              transform: 'translateY(-30%) rotate(-90deg)',
+              color: 'white',
+            }}
+          />
+        ) : (
+          <ArrowBackIosIcon
+            style={{
+              transform: 'translateY(15%) rotate(90deg)',
+              color: 'white',
+            }}
+          />
+        )}
+      </ToggleContainer>
+    </Collapse>
   );
 };
 
-
-
 export default MapLegend;
-