diff --git a/frontend/src/Components/Navbar/Navbar.js b/frontend/src/Components/Navbar/Navbar.js
index ffc461169add39330ecc5cb34d535a3325f352b8..cd506b38a0942f8288861c56fe07b0a2552f5510 100644
--- a/frontend/src/Components/Navbar/Navbar.js
+++ b/frontend/src/Components/Navbar/Navbar.js
@@ -1,11 +1,17 @@
 import React from 'react';
 import '../../Css/Navbar.css'
 
-function TopNavBar() {
+function TopNavBar({toggleDisplay, displayMap}) {
   return (
     <div className="top-nav">
     
        <button className='sign_out_button'>Sign Out</button>
+    
+          {/* Toggle button to switch between Map and Visualiser */}
+          <button className='sign_out_button' onClick={toggleDisplay}>
+            {displayMap ? 'Switch to Visualiser' : 'Switch to Map'}
+          </button>
+
       <h1 className='h1'>DASHBOARD</h1>
     </div>
   );
diff --git a/frontend/src/Css/Navbar.css b/frontend/src/Css/Navbar.css
index 9637c10ba2d4f79729a0b2c7b5e33a8ae3ca465d..53307928882ef7c48a320f3eeb432f546ffa4ed2 100644
--- a/frontend/src/Css/Navbar.css
+++ b/frontend/src/Css/Navbar.css
@@ -6,9 +6,14 @@
     border-style: solid;
     box-shadow: 0 0 10px rgba(0, 0, 0, .2);   
 }
+.sign_out_button{
+    margin: 5px;
+    height: 50px;
+
+}
 .h1{
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: auto;
-    margin-bottom: auto;
+    top: 4%;
+    left: 40%;
+    right: 50%;
+    position:absolute;
 }
\ No newline at end of file
diff --git a/frontend/src/Css/Visualiser.css b/frontend/src/Css/Visualiser.css
index 5532c0fdac4a31500980d6f5a676de585bd31e74..03089fc479184daa44cfd7267300d179874e1bca 100644
--- a/frontend/src/Css/Visualiser.css
+++ b/frontend/src/Css/Visualiser.css
@@ -12,6 +12,6 @@
 
 }
 
-.h1{
+.h2{
 text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 1d4aa10758bfe8d7395c17bdba4f97ccf4e33ca2..68f05c84e93bdbc439a20941479fde66fec96f3c 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -1,46 +1,66 @@
-import '../../Css/Dashboard.css'
-import React, { useState } from 'react'
+import '../../Css/Dashboard.css';
+import React, { useState } from 'react';
 import TopNavBar from '../../Components/Navbar/Navbar';
 import Map from './Map';
 import Visualiser from './Visualiser';
 import { SearchComponent } from '../../Components/Search/SearchComponent';
 
-
 export const Dashboard = () => {
   const [data, setData] = useState({ label: "", id: "" });
   const [region, setRegion] = useState({});
-
-
+  const [displayMap, setDisplayMap] = useState(true); // State variable to track the currently displayed component
 
   const handlerFunction = (Region_data) => {
-    setData(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);
     handlerFunction(data);
+  };
 
-
+  const toggleDisplay = () => {
+    setDisplayMap(!displayMap); // Toggle the displayMap state
   };
+
   return (
     <div className='dashboard'>
-      <TopNavBar />
+      <TopNavBar toggleDisplay = {toggleDisplay} displayMap = {displayMap} />
+     
       <div className='container'>
 
-
-
+    
         <div className='search_container'>
           <SearchComponent data={data.label} changeRegion={changeRegion} />
-
         </div>
         <div className='map_container' id="d3_map">
-          <Map handlerFunction={handlerFunction} selectedRegion={region} />
-        </div>
-        <div className='table_container'>
-          <Visualiser Regiondata={data} />
-        </div>
+              <Map handlerFunction={handlerFunction} selectedRegion={region} />
+            </div>
+            <div className='table_container'>
+              <Visualiser Regiondata={data} />
+            </div>
+        
       </div>
     </div>
-  )
-}
+  );
+};
+
+
+/*
+<div className='content_container'>
+          {/* Conditional rendering based on the displayMap state */
+        /*
+        }
+          {displayMap ? (
+            <div className='map_container' id="d3_map">
+              <Map handlerFunction={handlerFunction} selectedRegion={region} />
+            </div>
+          ) : (
+            <div className='table_container'>
+              <Visualiser Regiondata={data} />
+            </div>
+          )}
+        </div>
 
+*/
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Visualiser.jsx b/frontend/src/Pages/Dashboard/Visualiser.jsx
index 0d93542d42d96189e381d9ff34c8d6a630400971..6b9e293b83838c91583b3c69aab222091557b7f6 100644
--- a/frontend/src/Pages/Dashboard/Visualiser.jsx
+++ b/frontend/src/Pages/Dashboard/Visualiser.jsx
@@ -9,9 +9,9 @@ const Visualiser = ({Regiondata}) => {
 
   return (
     <div >
-    <h1 className='h1'>
+    <h2 >
         Visualiser
-    </h1>
+    </h2>
     <h2> LÄN: 
     {Regiondata.label}