diff --git a/frontend/src/Components/Search/Searchbar.jsx b/frontend/src/Components/Search/Searchbar.jsx
index f25bed7ed1cd9442a9289dcc693ebafcfee8b0ab..a35d2a5c48b020ce9b291709751478d90b9fafad 100644
--- a/frontend/src/Components/Search/Searchbar.jsx
+++ b/frontend/src/Components/Search/Searchbar.jsx
@@ -3,9 +3,10 @@ import * as MUI from '@mui/material';
 import MultiSelectText from './MultiSelectText';
 import "../../Css/Search.css";
 
-export const Searchbar = ({ data }) => {
+export const Searchbar = ({ data, handlerFunction, changeRegion }) => {
 
   const [selectedProvince, setSelectedProvince] = useState(null);
+  changeRegion(selectedProvince)
 
   const selection1 = {
     title: "Tabellinnehåll",
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 3f1d33181634652fc327bf43360f7e41376ca92a..ec22a8abee6e30aed8c3e864b509453d58e9d7d0 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -6,21 +6,32 @@ import Visualiser from './Visualiser';
 import { Searchbar } from '../../Components/Search/Searchbar';
 export const Dashboard = () => {
   const [data, setData] = useState({label: "", id: ""});
+  const [region, setRegion] = useState({});
+
 
   const handlerFunction = (Region_data) => {
     setData(Region_data)
-}
+  }
+  const changeRegion = (regionName) => {
+    // Update the region state to trigger re-render and change the color of the specified region's path
+   setRegion(regionName);
+   //const data = {label: regionName, id: "12"};
+        
+   handlerFunction(data);
+
+  
+  };
   return (
     <div className='dashboard'>
       <TopNavBar/>
       <div className='container'>
 
         <div className='map_container' id="d3_map">
-          <Map handlerFunction={handlerFunction}/>
+          <Map handlerFunction={handlerFunction} selectedRegion={region}/>
         </div>
 
         <div className='search_container'>
-          <Searchbar data={data.label} handlerFunction={handlerFunction}/>
+          <Searchbar data={data.label} handlerFunction={handlerFunction} changeRegion= {changeRegion}/>
           
         </div>
         <div className='table_container'>
diff --git a/frontend/src/Pages/Dashboard/Map.jsx b/frontend/src/Pages/Dashboard/Map.jsx
index a30f1f449c56ef93f21b7b3b6d311f056ac31a1b..95e37fe3e4c2cb94e83aac05fd90babc6ca4d19a 100644
--- a/frontend/src/Pages/Dashboard/Map.jsx
+++ b/frontend/src/Pages/Dashboard/Map.jsx
@@ -12,12 +12,22 @@ function getgeoJson(){
   return geojson;
 }
 
-const Map = ({handlerFunction}) => {
+const Map = ({handlerFunction, selectedRegion}) => {
  
 
   useEffect(() => {
 
 
+  function colorHandler(d){
+    if(d.properties.name === selectedRegion){
+        const data = {label: d.properties.name, id: d.properties.l_id};
+        handlerFunction(data);
+      return 'lightgray';
+    }else{
+      return 'white';
+    }
+  }
+
   let geojson = getgeoJson();
 
     //Filtering out non-topological data
@@ -46,7 +56,8 @@ const Map = ({handlerFunction}) => {
     .data(geojson.features)
     .enter().append('path')
     .attr('d', geoGenerator)
-    .attr('fill', 'white')
+   // .attr('fill', d => (d.properties.name === selectedRegion) ? 'lightgrey' : 'white') // Set fill color based on selectedRegion prop
+   .attr('fill', d => colorHandler(d))
     .attr('stroke', 'black')
     .on('click', function(event, d){ //OnClick event handler
         // Handle the click event here
@@ -115,7 +126,7 @@ const Map = ({handlerFunction}) => {
       // Remove SVG when component unmounts
       svg.remove();
     };
-  }, []); // Empty dependency array to ensure useEffect runs only once
+  }, [selectedRegion]); // Empty dependency array to ensure useEffect runs only once
 
   // Return null because the map is rendered using D3 inside useEffect
   return null;