diff --git a/components/map/mapLayer/MapLayer.tsx b/components/map/mapLayer/MapLayer.tsx
index fb16d78..2877f74 100644
--- a/components/map/mapLayer/MapLayer.tsx
+++ b/components/map/mapLayer/MapLayer.tsx
@@ -20,7 +20,7 @@ const MapLayer = () => {
     return (
         <>
             <MapLayerBtns clicked={clicked} buttonClickHandler={buttonClickHandler} />
-            {clicked === 'Layers' ? <MapLayerCards buttonClickHandler={buttonClickHandler} setLayerName={setLayerName} /> : clicked === 'Legend' ? <Legend buttonClickHandler={buttonClickHandler} layerName={layerName} /> : null}
+            {clicked === 'Layers' ? <MapLayerCards buttonClickHandler={buttonClickHandler} setLayerName={setLayerName} layerName={layerName} /> : clicked === 'Legend' ? <Legend buttonClickHandler={buttonClickHandler} layerName={layerName} /> : null}
         </>
     )
 }
diff --git a/components/map/mapLayer/MapLayerCards.tsx b/components/map/mapLayer/MapLayerCards.tsx
index 0154e89..1f9efc5 100644
--- a/components/map/mapLayer/MapLayerCards.tsx
+++ b/components/map/mapLayer/MapLayerCards.tsx
@@ -14,6 +14,7 @@ import { useMediaQuery } from 'react-responsive'
 
 type Props = {
     buttonClickHandler: (btn: btnsType) => void
+    layerName: floodingTypes
     setLayerName: Dispatch<SetStateAction<floodingTypes>>
 }
 
@@ -50,11 +51,11 @@ const layers: {
     ]
 
 
-const MapLayerCards = ({ buttonClickHandler, setLayerName }: Props) => {
+const MapLayerCards = ({ buttonClickHandler, setLayerName, layerName }: Props) => {
 
     const { map } = useContext(MapContext) as MapContextType
 
-    const [clicked, setClicked] = useState(layers.map((l, i) => i === 0 ? true : false))
+    const [clicked, setClicked] = useState(layers.map((l, i) => l.title === layerName ? true : false))
 
     const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(layers)