diff --git a/apps/frontend/src/components/map/Map.tsx b/apps/frontend/src/components/map/Map.tsx
index 2682b35f..853d344f 100644
--- a/apps/frontend/src/components/map/Map.tsx
+++ b/apps/frontend/src/components/map/Map.tsx
@@ -7,6 +7,7 @@ import generateDiamondSVG from '../../images/markers/diamond';
 import generateTriangleSVG from '../../images/markers/triangle';
 import generateStarSVG from '../../images/markers/star';
 import generatePentagonSVG from '../../images/markers/pentagon';
+import generateOtherSVG from '../../images/markers/other';
 import PopupBox from '../mapIcon/PopupBox';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -31,7 +32,9 @@ const iconGenerators = {
   'Porous Paving': generateDiamondSVG,
   'Tree Trench/Pit': generateStarSVG,
   'Green Roof/Planter': generatePentagonSVG,
-  'Other': generatePentagonSVG,
+
+  'Other': generateOtherSVG // Placeholder, will remove
+
 } as const;
 
 type SymbolType = keyof typeof iconGenerators;
@@ -50,7 +53,7 @@ function filterMarkers(
   if (selectedFeatures.length === 0) {
     markers.forEach((marker: google.maps.Marker) => {
       marker.setMap(map);
-    });
+    }); 
     tempMarkers = markers;
   } else {
     markers.forEach((marker: google.maps.Marker) => marker.setMap(null));
@@ -128,8 +131,18 @@ const Map: React.FC<MapProps> = ({ zoom, selectedFeatures, selectedStatuses }) =
               console.warn(`Unknown symbol type: ${symbolType}`);
               return;
             }
+            
+            
+            let typeColor = '#58585B';    
+              if (markerInfo.siteStatus === 'Available') {
+  typeColor = '#2D6A4F'; // Green
+              } else if (markerInfo.siteStatus === 'Adopted') {
+              typeColor = '#DFC22A'; // Yellow (match legend)
+              } else if (markerInfo.siteStatus === 'Inactive') {
+  typeColor = '#58585B'; // Gray
+              }
+
 
-            const typeColor = markerInfo.siteStatus === 'Available' ? '#2D6A4F' : '#FB4D42';
             const generateIcon = iconGenerators[symbolType];
             const tempIcon = generateIcon(typeColor);
             const typeIcon = `data:image/svg+xml;utf8,${encodeURIComponent(tempIcon)}`;
diff --git a/apps/frontend/src/components/map/MapLegend.tsx b/apps/frontend/src/components/map/MapLegend.tsx
index 5e42bf69..c8d52f46 100644
--- a/apps/frontend/src/components/map/MapLegend.tsx
+++ b/apps/frontend/src/components/map/MapLegend.tsx
@@ -16,184 +16,99 @@ import circleSVG from '../../images/markers/circle.svg';
 import diamondSVG from '../../images/markers/diamond.svg';
 import starSVG from '../../images/markers/star.svg';
 import pentagonSVG from '../../images/markers/pentagon.svg';
+import otherSVG from '../../images/markers/other.svg';
 import { CheckboxOptionType } from 'antd/es/checkbox/Group';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
 
 type CheckboxValueType = string | number | boolean;
 
 const Title = styled.h1`
-font-size: 15px;
-font-weight: bold; 
-font-family: Montserrat;
-margin-top: 0px
-margin-bottom: 0px;
-color: #091F2F;
-text-align: center;
-`;
-
-const Heading = styled.h2`
-  color: rgba(88, 88, 91, 1);
-  text-align: center;
-  font-family: Lora;
-  font-size: 15px;
-  margin-top: 0px;
-  font-weight: 400;
-  line-height: 19px;
-  letter-spacing: 0em;
-  text-align: center;
+  font-size: 16px; /* Title remains 14px */
+  font-weight: bold;
+  font-family: Montserrat;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  color: #091F2F;
+  text-align: left;
+  padding-left: 5px;
 `;
 
 const MapLegendContainer = styled.div<{ isVisible: boolean }>`
   background: rgba(255, 253, 253, 1);
-  width: 247px;
-  gap: 20px;
-  padding-right: 0px;
+  width: 280px;
   position: relative;
   transition: height 0.3s ease;
   min-height: ${(props) => (props.isVisible ? '20px' : 'auto')};
-  height: ${(props) => (props.isVisible ? '475px' : 'auto')};
-  overflow: hidden;
+  max-height: ${(props) => (props.isVisible ? '600px' : 'auto')};
+  overflow-y: auto;
+  padding-bottom: 30px;
+  padding: 25px 20px;
 `;
 
 const LegendItem = styled.div`
-  width: 100%;
   display: flex;
-  gap: 10px;
-  padding-left: 10px;
   align-items: center;
-  margin: 10px;
+  gap: 10px;
+  padding-left: 5px;
+  margin: 10px 0;
 `;
 
 const LegendImage = styled(Image)`
+  width: 21px;
   height: 20px;
-  width: 20px;
-  justify-content: center;
   display: inline-block;
 `;
 
+
 const LegendText = styled.div`
-  margin-left: 15px;
+  font-family: 'Lora', serif;
+  font-size: 16px; /* Increased text to 16px */
+  color: #000;
+  line-height: 1.3;
 `;
 
-const FeatureContainer = styled.div`
-  width: 90%;
-  height: 284px;
-  margin: 10px;
-  padding-top: 10px;
-  background: rgba(242, 242, 242, 1);
+const BoxedGroup = styled.div`
+  background-color: #F2F2F2;
+  padding: 8px;
+  margin: 10px 6px;
+  border-radius: 4px;
+  width: calc(100% - 12px);
 `;
 
 const StatusCheckbox = styled(Checkbox.Group)`
-  height: 12px;
-  width: 200px;
-  color: #fff;
-  border: line;
-  padding: 10px 20px;
-  cursor: pointer;
-  display: flex;
-  .ant-checkbox-checked .ant-checkbox-inner {
-    background-color: #e74c3c;
-    border-color: #e74c3c;
-  }
-`;
-
-const StatusContainer = styled.div`
-  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')};
-  height: 36px;
-  width: 187px;
-  border-style: solid;
-  border-color: black;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 14px;
-  letter-spacing: 0em;
-  text-align: left;
-  align-items: center;
-  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;
-  width: 187px;
-  // color: #fff;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 16px;
-  font-family: Montserrat;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 17px;
-  letter-spacing: 0em;
-  text-align: center;
-  align-items: center;
-  color: rgba(40, 139, 228, 1);
   display: flex;
+  flex-direction: column;
+  padding-left: 5px;
+  gap: 5px;
 `;
 
 const ToggleContainer = styled.div<{ isVisible: boolean }>`
   cursor: pointer;
-  font-size: 18px;
+  font-size: 16px;
   position: absolute;
-  width: 247px;
-  height: 20px;
-  z-index: 1;
+  width: 280px;
+  height: 30px;
   display: flex;
+  align-items: center;
   justify-content: center;
-  background: #091f2f;
+  background: #0072C4;
   bottom: 0px;
 `;
 
-const CaretDownStyled = styled(CaretDownOutlined)`
-  color: #ffffff;
-`;
-
-const CaretUpStyled = styled(CaretUpOutlined)`
-  color: #ffffff;
-`;
-
-const FullWidthSpace = styled(Space)`
-  width: 100%;
-`;
 const statusSpan = (statusIcon: string, labelString: string): ReactNode => {
+  let color = '#000';
+  if (labelString.toLowerCase().includes('adopted')) color = '#DFC22A';
+  if (labelString.toLowerCase().includes('available')) color = '#2D6A4F';
+  if (labelString.toLowerCase().includes('inactive')) color = '#58585B';
+
   return (
-    <FullWidthSpace direction={'horizontal'} size={'small'}>
-      <LegendImage
-        src={statusIcon}
-        alt={labelString}
-        style={{
-          width: '20px',
-          height: '20px',
-          justifyContent: 'center',
-        }}
-      />
-      <Typography.Text
-        style={{
-          fontSize: '14px',
-          fontFamily: 'Montserrat',
-          fontWeight: '600',
-          lineHeight: '17px',
-          letterSpacing: '0em',
-          textAlign: 'left',
-          alignItems: 'center',
-          color: 'rgba(24, 112, 188, 1)',
-        }}
-      >
-        {labelString.replace(' Sites', '').toUpperCase()}
+    <Space size={'small'} direction="horizontal">
+      <div style={{ width: '18px', height: '18px', backgroundColor: color }} />
+      <Typography.Text style={{ fontSize: '16px', fontFamily: 'Lora', color: '#000' }}>
+        {labelString}
       </Typography.Text>
-    </FullWidthSpace>
+    </Space>
   );
 };
 
@@ -214,234 +129,143 @@ const MapLegend: React.FC<MapLegendProps> = ({
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
-  const options: CheckboxOptionType[] = SITE_STATUS_ROADMAP.map((option) => {
-    return {
-      label: statusSpan(option.image, option.label),
-      value: option.value,
-    };
+  const allFeatureTypes = [
+    'Bioretention',
+    'Rain Garden',
+    'Bioswale',
+    'Porous Paving',
+    'Tree Trench/Pit',
+    'Green Roof/Planter',
+    'Other',
+  ];
+
+  useState(() => {
+    setSelectedFeatures(allFeatureTypes);
+
+    const defaultStatus = SITE_STATUS_ROADMAP.find((s) =>
+      s.label.toLowerCase().includes('available')
+    );
+    if (defaultStatus) {
+      setSelectedStatuses([defaultStatus.value]);
+    }
+
+    return;
   });
 
+  const options: CheckboxOptionType[] = SITE_STATUS_ROADMAP.map((option) => ({
+    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 handleFeatureClick = (feature: string) => {
+    setSelectedFeatures((prevSelected: string[]) => {
+      if (prevSelected.includes(feature)) {
+        return prevSelected.filter((f) => f !== feature);
+      } else {
+        return [...prevSelected, feature];
+      }
+    });
   };
 
+  const CenteredIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+
   const handleStatusClick = (values: CheckboxValueType[]) => {
-    // set selected statuses
     setSelectedStatuses(values);
   };
 
   return (
     <Collapse collapsedSize={20} in={isVisible}>
       <MapLegendContainer isVisible={isVisible}>
-        <Grid container alignItems="center" display="flex" spacing={0}>
-          <Grid
-            item
-            xs
-            style={{ display: 'flex', alignItems: 'center', flex: 1 }}
-          >
-            <hr
-              style={{
-                borderTop: '3px solid black',
-                width: '90%',
-                marginLeft: '20px',
-                marginRight: '5px',
-              }}
-            />
-          </Grid>
-          <Grid item style={{ textAlign: 'center', paddingTop: '0px' }}>
-            <Title>FEATURE TYPE</Title>
-          </Grid>
-          <Grid
-            item
-            xs
-            style={{ display: 'flex', alignItems: 'center', flex: 1 }}
-          >
-            <hr
-              style={{
-                borderTop: '3px solid black',
-                width: '90%',
-                marginLeft: '5px',
-                marginRight: '20px',
-              }}
-            />
-          </Grid>
-        </Grid>
-        <Heading>Legend and Description</Heading>
-
-        <FeatureContainer>
+        <Title>Feature Types</Title>
+
+        <BoxedGroup>
           <LegendItem>
             {icons && (
-              <StyledButton
-                onClick={() => handleFeatureClick('Rain Garden')}
-                isSelected={selectedFeatures.includes('Rain Garden')}
-              >
-                <LegendImage
-                  src={squareSVG}
-                  alt="Square"
-                  style={{
-                    width: '20px',
-                    height: '20px',
-                    justifyContent: 'center',
-                  }}
-                />
-                <LegendText>RAIN GARDEN</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Bioretention')} onClick={() => handleFeatureClick('Bioretention')} />
             )}
+            <LegendImage src={circleSVG} alt="Circle" />
+            <LegendText>Bioretention</LegendText>
           </LegendItem>
 
           <LegendItem>
             {icons && (
-              <StyledButton
-                onClick={() => handleFeatureClick('Bioswale')}
-                isSelected={selectedFeatures.includes('Bioswale')}
-              >
-                <LegendImage
-                  src={triangleSVG}
-                  alt="Triangle"
-                  style={{
-                    width: '20px',
-                    height: '20px',
-                    justifyContent: 'center',
-                  }}
-                />
-                <LegendText>BIOSWALE</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Rain Garden')} onClick={() => handleFeatureClick('Rain Garden')} />
             )}
+            <LegendImage src={squareSVG} alt="Square" />
+            <LegendText>Rain Garden</LegendText>
           </LegendItem>
 
           <LegendItem>
             {icons && (
-              <StyledButton
-                onClick={() => handleFeatureClick('Bioretention')}
-                isSelected={selectedFeatures.includes('Bioretention')}
-              >
-                <LegendImage
-                  src={circleSVG}
-                  alt="Circle"
-                  style={{
-                    width: '20px',
-                    height: '20px',
-                    justifyContent: 'center',
-                  }}
-                />
-                <LegendText>BIORETENTION</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Bioswale')} onClick={() => handleFeatureClick('Bioswale')} />
             )}
+            <LegendImage src={triangleSVG} alt="Triangle" />
+            <LegendText>Bioswale</LegendText>
           </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',
-                  }}
-                />
-                <LegendText>POROUS PAVING</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Porous Paving')} onClick={() => handleFeatureClick('Porous Paving')} />
             )}
+            <LegendImage src={diamondSVG} alt="Diamond" />
+            <LegendText>Porous Paving</LegendText>
           </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',
-                  }}
-                />
-                <LegendText>TREE TRENCH/PIT</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Tree Trench/Pit')} onClick={() => handleFeatureClick('Tree Trench/Pit')} />
             )}
+            <LegendImage src={starSVG} alt="Star" />
+            <LegendText>Tree Trench / Planter</LegendText>
           </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',
-                  }}
-                />
-                <LegendText>GREEN ROOF/PLANTER</LegendText>
-              </StyledButton>
+              <Checkbox checked={selectedFeatures.includes('Green Roof/Planter')} onClick={() => handleFeatureClick('Green Roof/Planter')} />
             )}
+            <LegendImage src={pentagonSVG} alt="Pentagon" />
+            <LegendText>Green Roof / Planter</LegendText>
           </LegendItem>
-        </FeatureContainer>
 
-        <StatusContainer>
           <LegendItem>
             {icons && (
-              <StatusCheckbox
-                onChange={(values) =>
-                  handleStatusClick(values as CheckboxValueType[])
-                }
-                value={selectedStatuses}
-                options={options}
-              />
+              <Checkbox checked={selectedFeatures.includes('Other')} onChange={() => handleFeatureClick('Other')}/>
             )}
+            <LegendImage src={otherSVG} alt="Other" />
+            <LegendText>Other</LegendText>
           </LegendItem>
-        </StatusContainer>
+
+        </BoxedGroup>
+
+        <Title>Status</Title>
+
+        <BoxedGroup>
+          <StatusCheckbox onChange={(values) => handleStatusClick(values as CheckboxValueType[])} value={selectedStatuses} options={options} />
+        </BoxedGroup>
       </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>
+  <KeyboardArrowDownIcon
+    style={{
+      transform: isVisible ? 'rotate(180deg)' : 'rotate(0deg)',
+      color: 'white',
+      fontSize: '24px',
+    }}
+  />
+</ToggleContainer>
+
+
+
     </Collapse>
   );
 };
diff --git a/apps/frontend/src/images/markers/circle.svg b/apps/frontend/src/images/markers/circle.svg
index e32bc76f..2eaeab55 100644
--- a/apps/frontend/src/images/markers/circle.svg
+++ b/apps/frontend/src/images/markers/circle.svg
@@ -1,4 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="black" stroke-width="1.5"/>
-<circle cx="11" cy="11" r="3" fill="#091F2F"/>
+<circle cx="11" cy="11" r="6" fill="#091F2F"/>
 </svg>
diff --git a/apps/frontend/src/images/markers/diamond.svg b/apps/frontend/src/images/markers/diamond.svg
index 36976ed8..f900dfc8 100644
--- a/apps/frontend/src/images/markers/diamond.svg
+++ b/apps/frontend/src/images/markers/diamond.svg
@@ -1,4 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="black" stroke-width="1.5"/>
-<path d="M11 7L15 11L11 15L7 11L11 7Z" fill="#091F2F"/>
+  <path d="M11 4L18 11L11 18L4 11L11 4Z" fill="#091F2F"/>
 </svg>
diff --git a/apps/frontend/src/images/markers/other.svg b/apps/frontend/src/images/markers/other.svg
new file mode 100644
index 00000000..73cf37ce
--- /dev/null
+++ b/apps/frontend/src/images/markers/other.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4.5" y="7" width="12" height="6" fill="#091F2F"/>
+</svg>
diff --git a/apps/frontend/src/images/markers/other.tsx b/apps/frontend/src/images/markers/other.tsx
new file mode 100644
index 00000000..238fbd2e
--- /dev/null
+++ b/apps/frontend/src/images/markers/other.tsx
@@ -0,0 +1,9 @@
+export default function generateOtherSVG(color: string) {
+  return `
+    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4.5" y="7" width="12" height="6" fill="${color}"/>
+</svg>
+
+  `;
+}
+
diff --git a/apps/frontend/src/images/markers/pentagon.svg b/apps/frontend/src/images/markers/pentagon.svg
index f382372a..f05f5339 100644
--- a/apps/frontend/src/images/markers/pentagon.svg
+++ b/apps/frontend/src/images/markers/pentagon.svg
@@ -1,4 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="black" stroke-width="1.5"/>
-<path d="M11.0615 7L15 10.6267L13.4 15H9.15385L7 10.6267L11.0615 7Z" fill="#091F2F"/>
+  <path d="M11 4L17 9L14.5 17H7.5L5 9L11 4Z" fill="#091F2F"/>
 </svg>
diff --git a/apps/frontend/src/images/markers/square.svg b/apps/frontend/src/images/markers/square.svg
index 44bf4fe9..1089c9ea 100644
--- a/apps/frontend/src/images/markers/square.svg
+++ b/apps/frontend/src/images/markers/square.svg
@@ -1,6 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="#091F2F" stroke-width="1.5"/>
-<rect x="8.47998" y="7.75999" width="5.76" height="5.76" fill="#091F2F"/>
+  <rect x="5" y="5" width="12" height="12" fill="#091F2F"/>
 </svg>
-
-
diff --git a/apps/frontend/src/images/markers/star.svg b/apps/frontend/src/images/markers/star.svg
index 73cf2307..d4a05521 100644
--- a/apps/frontend/src/images/markers/star.svg
+++ b/apps/frontend/src/images/markers/star.svg
@@ -1,4 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="black" stroke-width="1.5"/>
-<path d="M11 6L12.1226 9.45492H15.7553L12.8164 11.5902L13.9389 15.0451L11 12.9098L8.06107 15.0451L9.18364 11.5902L6.24472 9.45492H9.87743L11 6Z" fill="#091F2F"/>
+  <path d="M11 4L12.5 9H18L13.5 12.5L15 18L11 14.5L7 18L8.5 12.5L4 9H9.5L11 4Z" fill="#091F2F"/>
 </svg>
diff --git a/apps/frontend/src/images/markers/triangle.svg b/apps/frontend/src/images/markers/triangle.svg
index ca69290f..00d35499 100644
--- a/apps/frontend/src/images/markers/triangle.svg
+++ b/apps/frontend/src/images/markers/triangle.svg
@@ -1,4 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="9.75" fill="#FFFDFD" stroke="black" stroke-width="1.5"/>
-<path d="M11 7L15 15H7L11 7Z" fill="#091F2F"/>
+  <path d="M11 5L17 15H5L11 5Z" fill="#091F2F"/>
 </svg>