diff --git a/packages/simulator/web/routes.js b/packages/simulator/web/routes.js
index cad67ebd..bb62bc54 100644
--- a/packages/simulator/web/routes.js
+++ b/packages/simulator/web/routes.js
@@ -34,6 +34,7 @@ function start(socket) {
   socket.data.experiment = experiment
   experiment.subscriptions = subscribe(experiment, socket)
   experiment.virtualTime.waitUntil(moment().endOf('day').valueOf()).then(() => {
+    socket.emit('reset')
     info('Experiment finished. Restarting...')
     process.kill(process.pid, 'SIGUSR2')
   })
@@ -58,7 +59,7 @@ function register(io) {
     socket.data.emitTaxiUpdates = defaultEmitters.includes('taxis')
     socket.data.emitBusUpdates = defaultEmitters.includes('buses')
 
-    socket.emit('reset')
+    socket.emit('init')
     socket.on('reset', () => {
       socket.data.experiment.subscriptions.map((e) => e.unsubscribe())
       start(socket)
@@ -70,7 +71,7 @@ function register(io) {
     socket.on('experimentParameters', (value) => {
       info('New expiriment settings: ', value)
       save(value)
-      socket.emit('reset')
+      socket.emit('init')
     })
 
     socket.emit('parameters', socket.data.experiment.parameters)
diff --git a/packages/visualisation/.dockerignore b/packages/visualisation/.dockerignore
index cbfd549d..d8cbbeda 100644
--- a/packages/visualisation/.dockerignore
+++ b/packages/visualisation/.dockerignore
@@ -1,5 +1,7 @@
-dist/
 .dockerignore
+.gitignore
+
+dist/
 Dockerfile
 node_modules
 README.md
diff --git a/packages/visualisation/src/App.jsx b/packages/visualisation/src/App.jsx
index 4130a5d9..a62d6f25 100644
--- a/packages/visualisation/src/App.jsx
+++ b/packages/visualisation/src/App.jsx
@@ -1,19 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
+import 'jsoneditor-react/es/editor.min.css'
 import { useSocket } from './hooks/useSocket.js'
+
 import Map from './Map.jsx'
-import PlaybackOptions from './components/PlaybackOptions'
 import Loading from './components/Loading'
-import styled from 'styled-components'
-import ResetIcon from './icons/svg/resetIcon.svg'
-import TransparentButton from './components/TransparentButton'
-import SideMenu from './components/SideMenu'
-
-const Wrapper = styled.div`
-  position: absolute;
-  z-index: 2;
-  bottom: 3rem;
-  left: 11.3rem;
-`
+import PlaybackOptions from './components/PlaybackOptions'
+import ResetExperiment from './components/ResetExperiment'
+import EditExperimentModal from './components/EditExperimentModal'
+import Logo from './components/Logo'
+import ExperimentDoneModal from './components/ExperimentDoneModal/index.jsx'
 
 const App = () => {
   const [activeCar, setActiveCar] = useState(null)
@@ -30,9 +25,12 @@ const App = () => {
   const [commercialAreasLayer, setCommercialAreasLayer] = useState(false)
   const [busLineLayer, setBusLineLayer] = useState(true)
   const [kommunLayer, setKommunLayer] = useState(true)
-  const [newParameters, setNewParameters] = useState({})
+  const [experimentParameters, setExperimentParameters] = useState({})
   const [currentParameters, setCurrentParameters] = useState({})
   const [fleets, setFleets] = useState({})
+  const [showEditExperimentModal, setShowEditExperimentModal] = useState(false)
+  const [showExperimentDoneModal, setShowExperimentDoneModal] = useState(false)
+  const [previousExperimentId, setPreviousExperimentId] = useState(null)
 
   const [connected, setConnected] = useState(false)
 
@@ -61,12 +59,13 @@ const App = () => {
     setBusLineLayer,
   }
 
-  const newExperiment = () => {
-    socket.emit('experimentParameters', newParameters)
+  const restartSimulation = () => {
+    setShowEditExperimentModal(false)
+    socket.emit('experimentParameters', experimentParameters)
   }
 
-  useSocket('reset', () => {
-    console.log('received reset')
+  useSocket('init', () => {
+    console.log('Init experiment')
     setBookings([])
     setPassengers([])
     setCars([])
@@ -78,6 +77,12 @@ const App = () => {
     socket.emit('speed', speed) // reset speed on server
   })
 
+  useSocket('reset', () => {
+    console.log('Reset experiment')
+    setPreviousExperimentId(experimentParameters.id)
+    setShowExperimentDoneModal(true)
+  })
+
   function upsert(array, object, idProperty = 'id', deep = false) {
     const currentIndex = array.findIndex(
       (k) => k[idProperty] === object[idProperty]
@@ -183,7 +188,11 @@ const App = () => {
   })
 
   useSocket('parameters', (currentParameters) => {
-    console.log('new experimentId', currentParameters.id)
+    console.log('ExperimentId', currentParameters.id)
+
+    if (!previousExperimentId) {
+      setPreviousExperimentId(currentParameters.id)
+    }
 
     setCurrentParameters(currentParameters)
     const layerSetFunctions = {
@@ -206,10 +215,8 @@ const App = () => {
       }
     })
 
-    console.log(currentParameters)
     setFleets(currentParameters.fleets)
-
-    setNewParameters(currentParameters)
+    setExperimentParameters(currentParameters)
   })
   const [passengers, setPassengers] = React.useState([])
   useSocket('passengers', (passengers) => {
@@ -257,27 +264,18 @@ const App = () => {
     setConnected(true)
   })
 
+  /**
+   * Update the fleets part of the parameters.
+   */
+  const saveFleets = (updatedJson) => {
+    setExperimentParameters({ ...experimentParameters, fleets: updatedJson })
+  }
+
   return (
     <>
-      <Wrapper>
-        <TransparentButton onClick={() => resetSimulation()}>
-          <img src={ResetIcon} alt="Reset" />
-        </TransparentButton>
-      </Wrapper>
-      <SideMenu
-        activeLayers={activeLayers}
-        currentParameters={currentParameters}
-        newParameters={newParameters}
-        newExperiment={newExperiment}
-        setNewParameters={setNewParameters}
-        fleets={fleets}
-      />
+      <Logo />
 
-      <PlaybackOptions
-        onPause={onPause}
-        onPlay={onPlay}
-        onSpeedChange={onSpeedChange}
-      />
+      {/* Loader. */}
       {(!connected || reset || !cars.length || !bookings.length) && (
         <Loading
           connected={connected}
@@ -290,6 +288,34 @@ const App = () => {
           parameters={currentParameters}
         />
       )}
+
+      {/* Playback controls. */}
+      <PlaybackOptions
+        onPause={onPause}
+        onPlay={onPlay}
+        onSpeedChange={onSpeedChange}
+      />
+
+      {/* Reset experiment button. */}
+      <ResetExperiment resetSimulation={resetSimulation} />
+
+      {/* Edit experiment modal. */}
+      <EditExperimentModal
+        fleets={fleets}
+        show={showEditExperimentModal}
+        setShow={setShowEditExperimentModal}
+        restartSimulation={restartSimulation}
+        saveFleets={saveFleets}
+      />
+
+      {/* Experiment done modal. */}
+      <ExperimentDoneModal
+        experimentId={previousExperimentId}
+        show={showExperimentDoneModal}
+        setShow={setShowExperimentDoneModal}
+      />
+
+      {/* Map. */}
       <Map
         activeLayers={activeLayers}
         passengers={passengers}
@@ -303,6 +329,9 @@ const App = () => {
         time={time}
         setActiveCar={setActiveCar}
         lineShapes={lineShapes}
+        showEditExperimentModal={showEditExperimentModal}
+        setShowEditExperimentModal={setShowEditExperimentModal}
+        experimentId={currentParameters.id}
       />
     </>
   )
diff --git a/packages/visualisation/src/Map.jsx b/packages/visualisation/src/Map.jsx
index 891555b1..414fec44 100644
--- a/packages/visualisation/src/Map.jsx
+++ b/packages/visualisation/src/Map.jsx
@@ -10,14 +10,10 @@ import DeckGL, {
 import { GeoJsonLayer } from '@deck.gl/layers'
 import inside from 'point-in-polygon'
 import { ParagraphLarge } from './components/Typography'
-
 import KommunStatisticsBox from './components/KommunStatisticsBox'
 import TimeProgressBar from './components/TimeProgressBar'
-
 import LayersMenu from './components/LayersMenu/index.jsx'
-import mapboxgl from 'mapbox-gl'
 import HoverInfoBox from './components/HoverInfoBox'
-import { IconButton, Menu, MenuItem } from '@mui/material'
 
 const transitionInterpolator = new LinearInterpolator(['bearing'])
 
@@ -34,6 +30,8 @@ const Map = ({
   activeCar,
   setActiveCar,
   time,
+  setShowEditExperimentModal,
+  experimentId,
 }) => {
   const [mapState, setMapState] = useState({
     latitude: 65.0964472642777,
@@ -379,7 +377,7 @@ const Map = ({
 
   const bookingLayer = new ScatterplotLayer({
     id: 'booking-layer',
-    data: bookings.filter(b => b.type !== 'busstop'), //.filter((b) => !b.assigned), // TODO: revert change
+    data: bookings.filter((b) => b.type !== 'busstop'), //.filter((b) => !b.assigned), // TODO: revert change
     opacity: 1,
     stroked: false,
     filled: true,
@@ -619,12 +617,15 @@ const Map = ({
         }}
       >
         <LayersMenu
+          activeLayers={activeLayers}
           showArcLayer={showArcLayer}
           setShowArcLayer={setShowArcLayer}
           showActiveDeliveries={showActiveDeliveries}
           setShowActiveDeliveries={setShowActiveDeliveries}
           showAssignedBookings={showAssignedBookings}
           setShowAssignedBookings={setShowAssignedBookings}
+          setShowEditExperimentModal={setShowEditExperimentModal}
+          experimentId={experimentId}
         />
       </div>
       <StaticMap
@@ -636,7 +637,11 @@ const Map = ({
         mapboxApiAccessToken={import.meta.env.VITE_MAPBOX_ACCESS_TOKEN}
       />
       {hoverInfo && mapState.zoom > 6 && <HoverInfoBox data={hoverInfo} />}
+
+      {/* Time progress bar. */}
       <TimeProgressBar time={time} />
+
+      {/* Experiment clock. */}
       <div
         style={{
           right: '3rem',
@@ -656,6 +661,8 @@ const Map = ({
           <br />i simuleringen
         </ParagraphLarge>
       </div>
+
+      {/* Municipality stats. */}
       {kommunInfo && <KommunStatisticsBox {...kommunInfo} />}
     </DeckGL>
   )
diff --git a/packages/visualisation/src/components/DropDown/index.jsx b/packages/visualisation/src/components/DropDown/index.jsx
deleted file mode 100644
index 5059a348..00000000
--- a/packages/visualisation/src/components/DropDown/index.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react'
-import styled from 'styled-components'
-import { H2, H3 } from '../Typography'
-import openArrow from '../../icons/svg/openArrow.svg'
-import closeArrow from '../../icons/svg/closeArrow.svg'
-
-const Arrow = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: none;
-  background-color: inherit;
-  cursor: pointer;
-  padding: 0;
-  gap: 1rem;
-  z-index: 5;
-`
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: ${(props) => (props.small ? '1rem' : 0)};
-  width: ${(props) => (props.small ? '90%' : '100%')};
-`
-
-const DropDown = ({ title, small, children }) => {
-  const [open, setOpen] = useState(false)
-  return (
-    <Wrapper small={small}>
-      <Arrow onClick={() => setOpen((current) => !current)}>
-        {small ? <H3>{title}</H3> : <H2>{title}</H2>}
-        {open ? (
-          <img src={closeArrow} alt="Close" />
-        ) : (
-          <img src={openArrow} alt="Open" />
-        )}
-      </Arrow>
-      {open && children}
-    </Wrapper>
-  )
-}
-
-export default DropDown
diff --git a/packages/visualisation/src/components/EditExperimentModal/index.jsx b/packages/visualisation/src/components/EditExperimentModal/index.jsx
new file mode 100644
index 00000000..b64402db
--- /dev/null
+++ b/packages/visualisation/src/components/EditExperimentModal/index.jsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { Box, Button, Modal, Typography } from '@mui/material'
+import { JsonEditor as Editor } from 'jsoneditor-react'
+
+const modalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 700,
+  height: 600,
+  bgcolor: 'white',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+}
+
+const editorStyle = {
+  border: '1px solid #dfdfdf',
+  height: 480,
+  overflow: 'scroll',
+}
+
+const closeButtonStyle = {
+  marginLeft: '1rem',
+}
+
+const bottomStyle = {
+  position: 'absolute',
+  bottom: '1rem',
+  width: '90%',
+  paddingRight: '1rem',
+}
+
+const EditExperimentModal = ({
+  fleets,
+  show,
+  setShow,
+  restartSimulation,
+  saveFleets,
+}) => {
+  return (
+    <Modal
+      open={show}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={modalStyle}>
+        <Typography id="modal-modal-title" variant="h5" component="h2">
+          Redigera Experiment
+        </Typography>
+        <Box sx={editorStyle}>
+          <Editor value={fleets} onChange={saveFleets} />
+        </Box>
+        <Box sx={bottomStyle}>
+          <Typography id="modal-modal-description" sx={{ mb: 2, mt: 2 }}>
+            Dina ändringar träder i kraft när experimentet startar om.
+          </Typography>
+          <Button variant="contained" onClick={restartSimulation}>
+            Starta om experiment
+          </Button>
+          <Button
+            variant="outlined"
+            sx={closeButtonStyle}
+            onClick={() => setShow(false)}
+          >
+            Stäng
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  )
+}
+
+export default EditExperimentModal
diff --git a/packages/visualisation/src/components/ExperimentDoneModal/index.jsx b/packages/visualisation/src/components/ExperimentDoneModal/index.jsx
new file mode 100644
index 00000000..644edebe
--- /dev/null
+++ b/packages/visualisation/src/components/ExperimentDoneModal/index.jsx
@@ -0,0 +1,60 @@
+/*
+let experimentUrl =
+    "https://kibana.predictivemovement.se/app/kibana#/dashboard/767e6ae0-3ac8-11ed-bade-51cc9f3c8210?_g=(refreshInterval:(pause:!t,value:0),time:(from:now%2Fd,to:now%2Fd))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(mapCenter:!n,mapZoom:4),gridData:(h:15,i:'91cb1203-69c3-4398-8253-39ad96a9a9db',w:24,x:0,y:0),id:'65cf5470-3ac8-11ed-bade-51cc9f3c8210',panelIndex:'91cb1203-69c3-4398-8253-39ad96a9a9db',type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,w:24,x:24,y:0),id:'57aab970-3ac8-11ed-bade-51cc9f3c8210',panelIndex:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:c47eb77d-b191-4a9b-9a04-127c581b4dcd,w:24,x:0,y:15),id:'9973b280-3ac8-11ed-bade-51cc9f3c8210',panelIndex:c47eb77d-b191-4a9b-9a04-127c581b4dcd,type:visualization,version:'7.5.1'),(embeddableConfig:(isLayerTOCOpen:!f,mapCenter:(lat:66.58123,lon:24.83098,zoom:4.37),openTOCDetails:!()),gridData:(h:15,i:c278a0ec-d11d-49d9-8606-2a9d3fb98342,w:24,x:24,y:15),id:c52ada20-3acd-11ed-bade-51cc9f3c8210,panelIndex:c278a0ec-d11d-49d9-8606-2a9d3fb98342,type:map,version:'7.5.1'),(embeddableConfig:(),gridData:(h:17,i:f2374bbc-382e-4266-be64-09c5def6c71e,w:48,x:0,y:30),id:'3f728310-3c21-11ed-bade-51cc9f3c8210',panelIndex:f2374bbc-382e-4266-be64-09c5def6c71e,type:visualization,version:'7.5.1')),query:(language:kuery,query:'EXPERIMENT_ID'),timeRestore:!f,title:Overview,viewMode:view)"
+
+  experimentUrl = experimentUrl.replace(/EXPERIMENT_ID/, experimentId)
+
+  window.open(experimentUrl, '_blank')
+*/
+
+import React from 'react'
+import { Box, Button, Modal, Typography } from '@mui/material'
+
+const modalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 500,
+  bgcolor: 'background.paper',
+  color: 'white',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+}
+
+const ExperimentDoneModal = ({ experimentId, show, setShow }) => {
+  const openKibana = () => {
+    console.log('Open', experimentId)
+    window.open(
+      `https://kibana.predictivemovement.se/app/kibana#/dashboard/767e6ae0-3ac8-11ed-bade-51cc9f3c8210?_g=(refreshInterval:(pause:!t,value:0),time:(from:now%2Fd,to:now%2Fd))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(mapCenter:!n,mapZoom:4),gridData:(h:15,i:'91cb1203-69c3-4398-8253-39ad96a9a9db',w:24,x:0,y:0),id:'65cf5470-3ac8-11ed-bade-51cc9f3c8210',panelIndex:'91cb1203-69c3-4398-8253-39ad96a9a9db',type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,w:24,x:24,y:0),id:'57aab970-3ac8-11ed-bade-51cc9f3c8210',panelIndex:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:c47eb77d-b191-4a9b-9a04-127c581b4dcd,w:24,x:0,y:15),id:'9973b280-3ac8-11ed-bade-51cc9f3c8210',panelIndex:c47eb77d-b191-4a9b-9a04-127c581b4dcd,type:visualization,version:'7.5.1'),(embeddableConfig:(isLayerTOCOpen:!f,mapCenter:(lat:66.58123,lon:24.83098,zoom:4.37),openTOCDetails:!()),gridData:(h:15,i:c278a0ec-d11d-49d9-8606-2a9d3fb98342,w:24,x:24,y:15),id:c52ada20-3acd-11ed-bade-51cc9f3c8210,panelIndex:c278a0ec-d11d-49d9-8606-2a9d3fb98342,type:map,version:'7.5.1'),(embeddableConfig:(),gridData:(h:17,i:f2374bbc-382e-4266-be64-09c5def6c71e,w:48,x:0,y:30),id:'3f728310-3c21-11ed-bade-51cc9f3c8210',panelIndex:f2374bbc-382e-4266-be64-09c5def6c71e,type:visualization,version:'7.5.1')),query:(language:kuery,query:'${experimentId}'),timeRestore:!f,title:Overview,viewMode:view)`,
+      '_blank'
+    )
+  }
+
+  return (
+    <Modal title="Experiment done" open={show}>
+      <Box sx={modalStyle}>
+        <Typography id="modal-modal-title" variant="h5" component="h2">
+          Experiment klart
+        </Typography>
+        <Typography id="modal-modal-description" sx={{ mb: 2, mt: 2 }}>
+          Nu har experimentet nått midnatt och startar om i bakgrunden. Du kan
+          se resultatet i Kibana.
+        </Typography>
+        <Button variant="contained" onClick={openKibana}>
+          Öppna kibana
+        </Button>
+        <Button
+          variant="outlined"
+          sx={{ ml: 2 }}
+          onClick={() => setShow(false)}
+        >
+          Stäng
+        </Button>
+      </Box>
+    </Modal>
+  )
+}
+
+export default ExperimentDoneModal
diff --git a/packages/visualisation/src/components/ExperimentSection/index.jsx b/packages/visualisation/src/components/ExperimentSection/index.jsx
deleted file mode 100644
index 46d809a0..00000000
--- a/packages/visualisation/src/components/ExperimentSection/index.jsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import styled from 'styled-components'
-import Slider from '@mui/material/Slider'
-
-import { H1, H3, Paragraph, ParagraphBold } from '../Typography'
-import checkIcon from '../../icons/svg/checkIcon.svg'
-
-const WhiteCircle = styled.div`
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-`
-
-const Circle = styled.div`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: ${({ backgroundColor = 'transparent' }) => backgroundColor};
-`
-
-const Donut = styled.div`
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 4px solid ${({ borderColor = 'transparent' }) => borderColor};
-`
-
-const MenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 300px;
-  background-color: white;
-  position: absolute;
-  bottom: 0;
-  left: 3.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 2.5rem;
-  top: 0;
-  z-index: 4;
-
-  overflow-y: scroll;
-`
-
-const Button = styled.button`
-  width: 16px;
-  height: 16px;
-  background-color: #666666;
-  border: none;
-  border-radius: 2px;
-  cursor: pointer;
-  background-image: ${(props) => (props.checked ? `url(${checkIcon})` : null)};
-  background-repeat: no-repeat;
-  background-position: center;
-`
-
-const Flex = styled.div`
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-`
-
-const ParagraphMedium = styled(Paragraph)`
-  font-size: 14px;
-`
-
-const FlexSpaceBetween = styled.div`
-  display: flex;
-  justify-content: space-between;
-`
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-`
-
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: 1.5fr 1fr;
-  gap: 1rem 1.5rem;
-`
-
-const StyledButton = styled.button`
-  width: 220px;
-  height: 40px;
-  background-color: #10c57b;
-  border: none;
-  z-index: 2;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: Arial, Helvetica, sans-serif;
-  border-radius: 2px;
-`
-
-const CheckItem = ({ text, setLayer, checked, color, borderOnly = false }) => {
-  return (
-    <Flex>
-      <Button
-        checked={checked}
-        onClick={() => {
-          setLayer((current) => !current)
-        }}
-      />
-      {borderOnly ? (
-        <Donut borderColor={color} />
-      ) : color === '#FFFFFFAA' ? (
-        <WhiteCircle />
-      ) : (
-        <Circle backgroundColor={color} />
-      )}
-      <ParagraphMedium>
-        <strong> {text}</strong>
-      </ParagraphMedium>
-    </Flex>
-  )
-}
-
-const openKibana = (experimentId) => {
-  let experimentUrl =
-    "https://kibana.predictivemovement.se/app/kibana#/dashboard/767e6ae0-3ac8-11ed-bade-51cc9f3c8210?_g=(refreshInterval:(pause:!t,value:0),time:(from:now%2Fd,to:now%2Fd))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(mapCenter:!n,mapZoom:4),gridData:(h:15,i:'91cb1203-69c3-4398-8253-39ad96a9a9db',w:24,x:0,y:0),id:'65cf5470-3ac8-11ed-bade-51cc9f3c8210',panelIndex:'91cb1203-69c3-4398-8253-39ad96a9a9db',type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,w:24,x:24,y:0),id:'57aab970-3ac8-11ed-bade-51cc9f3c8210',panelIndex:bfff9c2e-acd3-412a-a3ff-056b2bc25ddb,type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:c47eb77d-b191-4a9b-9a04-127c581b4dcd,w:24,x:0,y:15),id:'9973b280-3ac8-11ed-bade-51cc9f3c8210',panelIndex:c47eb77d-b191-4a9b-9a04-127c581b4dcd,type:visualization,version:'7.5.1'),(embeddableConfig:(isLayerTOCOpen:!f,mapCenter:(lat:66.58123,lon:24.83098,zoom:4.37),openTOCDetails:!()),gridData:(h:15,i:c278a0ec-d11d-49d9-8606-2a9d3fb98342,w:24,x:24,y:15),id:c52ada20-3acd-11ed-bade-51cc9f3c8210,panelIndex:c278a0ec-d11d-49d9-8606-2a9d3fb98342,type:map,version:'7.5.1'),(embeddableConfig:(),gridData:(h:17,i:f2374bbc-382e-4266-be64-09c5def6c71e,w:48,x:0,y:30),id:'3f728310-3c21-11ed-bade-51cc9f3c8210',panelIndex:f2374bbc-382e-4266-be64-09c5def6c71e,type:visualization,version:'7.5.1')),query:(language:kuery,query:'EXPERIMENT_ID'),timeRestore:!f,title:Overview,viewMode:view)"
-
-  experimentUrl = experimentUrl.replace(/EXPERIMENT_ID/, experimentId)
-
-  window.open(experimentUrl, '_blank')
-}
-
-const ExperimentSection = ({ activeLayers, currentParameters }) => {
-  return (
-    <MenuContainer>
-      <H1>Pågående experiment</H1>
-      <ParagraphMedium>
-        Experiment-id: <strong>{currentParameters.id}</strong>
-        <br />
-        Starttid: <strong>{currentParameters.startDate}</strong>
-        <br />
-        <br />
-        <StyledButton
-          type="submit"
-          onClick={() => openKibana(currentParameters.id)}
-        >
-          Öppna experimentet i Kibana
-        </StyledButton>
-      </ParagraphMedium>
-
-      <ParagraphMedium>
-        Här kan ändra vad som visas i simuleringen till höger.
-      </ParagraphMedium>
-
-      <Container>
-        <H3>Fordon</H3>
-        <CheckItem
-          text="Bussar"
-          setLayer={activeLayers.setBusLayer}
-          checked={activeLayers.busLayer}
-          color="#E74493"
-        />
-        <CheckItem
-          text="Busslinjer"
-          setLayer={activeLayers.setBusLineLayer}
-          checked={activeLayers.busLineLayer}
-          color="#F00A1D"
-        />
-        <div style={{ marginBottom: '0.5rem', marginTop: '2rem' }}>
-          <Slider
-            aria-label="Custom marks"
-            size="small"
-            value={currentParameters.fixedRoute}
-            valueLabelDisplay="on"
-            valueLabelFormat={(value) => `${value}%`}
-            disabled
-          />
-          <FlexSpaceBetween>
-            <Paragraph black small>
-              Fasta
-            </Paragraph>
-            <Paragraph black small>
-              Dynamiska
-            </Paragraph>
-          </FlexSpaceBetween>
-        </div>
-        <CheckItem
-          text="Anropsstyrd Kollektivtrafik"
-          setLayer={activeLayers.setTaxiLayer}
-          checked={activeLayers.taxiLayer}
-          color="#FBFF33AA"
-        />
-        <CheckItem
-          text="Passagerare"
-          setLayer={activeLayers.setPassengerLayer}
-          checked={activeLayers.passengerLayer}
-          color="#0080FFAA"
-        />
-        <CheckItem
-          text="Busshållplatser"
-          setLayer={activeLayers.setBusStopLayer}
-          checked={activeLayers.busStopLayer}
-          color="#FFFFFFAA"
-        />
-        <CheckItem
-          text="Postombud"
-          setLayer={activeLayers.setPostombudLayer}
-          checked={activeLayers.postombudLayer}
-          color="#13C57BAA"
-        />
-        <CheckItem
-          text="Kommersiella distrikt"
-          setLayer={activeLayers.setCommercialAreasLayer}
-          checked={activeLayers.commercialAreasLayer}
-          color="#0080FFAA"
-          borderOnly
-        />
-        <CheckItem
-          text="Kommungränser"
-          setLayer={activeLayers.setKommunLayer}
-          checked={activeLayers.kommunLayer}
-          color="#13C57BAA"
-          borderOnly
-        />
-        <CheckItem
-          text="Mätpunkter"
-          setLayer={activeLayers.setMeasureStationsLayer}
-          checked={activeLayers.measureStationsLayer}
-          color="#13C57BAA"
-        />
-      </Container>
-
-      <Container>
-        <H3>Resultat</H3>
-
-        <ParagraphMedium black>
-          Här kan du se resultatet av experimentet.
-        </ParagraphMedium>
-
-        <Grid>
-          <ParagraphBold black>Antal fordon</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-          <ParagraphBold black>Antal resenärer</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-          <ParagraphBold black>CO2</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-          <ParagraphBold black>Genomsnittlig konstnad</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-          <ParagraphBold black>Medelfyllnadsgrad per bil</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-          <ParagraphBold black>Genomsnittlig restid</ParagraphBold>
-          <Paragraph black>Data</Paragraph>
-        </Grid>
-      </Container>
-    </MenuContainer>
-  )
-}
-
-export default ExperimentSection
diff --git a/packages/visualisation/src/components/InfoBox/index.jsx b/packages/visualisation/src/components/InfoBox/index.jsx
index d8a3172b..9c76929e 100644
--- a/packages/visualisation/src/components/InfoBox/index.jsx
+++ b/packages/visualisation/src/components/InfoBox/index.jsx
@@ -27,10 +27,6 @@ const InfoBox = ({ data }) => {
       <H4>{`${title}  ${id}`}</H4>
       <Paragraph>{subTitle}</Paragraph>
       <Paragraph>Kör för {fleet}</Paragraph>
-      {/* <div>
-        <Paragraph thin>Fyllnadsgrad:</Paragraph>
-        <ProgressBar completed={60} />
-      </div> */}
     </Wrapper>
   )
 }
diff --git a/packages/visualisation/src/components/LayersMenu/index.jsx b/packages/visualisation/src/components/LayersMenu/index.jsx
index 8a40f79e..75a2fe64 100644
--- a/packages/visualisation/src/components/LayersMenu/index.jsx
+++ b/packages/visualisation/src/components/LayersMenu/index.jsx
@@ -4,21 +4,30 @@ import MenuItem from '@mui/material/MenuItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
-import GitHub from '@mui/icons-material/GitHub'
-import Web from '@mui/icons-material/Web'
+import LayersIcon from '@mui/icons-material/Layers'
+import { FormControlLabel, ListItemText, Switch } from '@mui/material'
+import ContentPaste from '@mui/icons-material/ContentPaste'
 
-import AirlineStopsIcon from '@mui/icons-material/AirlineStops'
+import {
+  AddLocation,
+  AirportShuttle,
+  Hail,
+  Info,
+  Map,
+  Person,
+} from '@mui/icons-material'
 import RouteIcon from '@mui/icons-material/Route'
-import LayersIcon from '@mui/icons-material/Layers'
-import { FormControlLabel, Link, Switch } from '@mui/material'
 
 export default function LayersMenu({
+  activeLayers,
   showArcLayer,
   setShowArcLayer,
   showActiveDeliveries,
   setShowActiveDeliveries,
   showAssignedBookings,
   setShowAssignedBookings,
+  setShowEditExperimentModal,
+  experimentId,
 }) {
   const [anchorEl, setAnchorEl] = React.useState(null)
   const open = Boolean(anchorEl)
@@ -75,20 +84,163 @@ export default function LayersMenu({
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       >
-        <MenuItem >
-          <FormControlLabel control={
-          <Switch checked={showArcLayer} onChange={() => setShowArcLayer((on) => !on)}/>
-        } label="Nästa stopp" />
+        <MenuItem>
+          <ListItemIcon>
+            <RouteIcon fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showArcLayer}
+                onChange={() => setShowArcLayer((on) => !on)}
+              />
+            }
+            label="Nästa stopp"
+          />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <RouteIcon fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showAssignedBookings}
+                onChange={() => setShowAssignedBookings((on) => !on)}
+              />
+            }
+            label="Köade bokningar"
+          />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <RouteIcon fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showActiveDeliveries}
+                onChange={() => setShowActiveDeliveries((on) => !on)}
+              />
+            }
+            label="Pågående leveranser"
+          />
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemIcon>
+            <Hail fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.taxiLayer}
+                onChange={() => activeLayers.setTaxiLayer((on) => !on)}
+              />
+            }
+            label="Anropsstyrd kollektivtrafik"
+          />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <AirportShuttle fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.busLayer}
+                onChange={() => activeLayers.setBusLayer((on) => !on)}
+              />
+            }
+            label="Bussar"
+          />
         </MenuItem>
         <MenuItem>
-          <FormControlLabel control={
-            <Switch checked={showAssignedBookings} onChange={() => setShowAssignedBookings((on) => !on)}/>
-          } label="Köade bokningar" />
+          <ListItemIcon>
+            <AirportShuttle fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.busStopLayer}
+                onChange={() => activeLayers.setBusStopLayer((on) => !on)}
+              />
+            }
+            label="Busshållplatser"
+          />
         </MenuItem>
-        <MenuItem >
-          <FormControlLabel control={
-              <Switch checked={showActiveDeliveries} onChange={() => setShowActiveDeliveries((on) => !on)}/>
-            } label="Pågående leveranser" />
+        <MenuItem>
+          <ListItemIcon>
+            <AirportShuttle fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.busLineLayer}
+                onChange={() => activeLayers.setBusLineLayer((on) => !on)}
+              />
+            }
+            label="Busslinjer"
+          />
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemIcon>
+            <Person fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.passengerLayer}
+                onChange={() => activeLayers.setPassengerLayer((on) => !on)}
+              />
+            }
+            label="Passagerare"
+          />
+        </MenuItem>
+
+        <MenuItem>
+          <ListItemIcon>
+            <Map fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.kommunLayer}
+                onChange={() => activeLayers.setKommunLayer((on) => !on)}
+              />
+            }
+            label="Kommungränser"
+          />
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <AddLocation fontSize="small" />
+          </ListItemIcon>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={activeLayers.measureStationsLayer}
+                onChange={() =>
+                  activeLayers.setMeasureStationsLayer((on) => !on)
+                }
+              />
+            }
+            label="Mätpunkter"
+          />
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={() => setShowEditExperimentModal((on) => !on)}>
+          <ListItemIcon>
+            <ContentPaste fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Redigera experiment</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Info fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Experiment: {experimentId}</ListItemText>
         </MenuItem>
       </Menu>
     </React.Fragment>
diff --git a/packages/visualisation/src/components/Logo/index.jsx b/packages/visualisation/src/components/Logo/index.jsx
new file mode 100644
index 00000000..186f9552
--- /dev/null
+++ b/packages/visualisation/src/components/Logo/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { PMLogo } from '../../icons/icons'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 1em;
+  left: 1em;
+  padding: 1em;
+  z-index: 2;
+`
+
+const Logo = () => {
+  return (
+    <Wrapper>
+      <a href="https://predictivemovement.se/" target="_blank" rel="noreferrer">
+        <PMLogo />
+      </a>
+    </Wrapper>
+  )
+}
+
+export default Logo
diff --git a/packages/visualisation/src/components/NewExperimentSection/index.jsx b/packages/visualisation/src/components/NewExperimentSection/index.jsx
deleted file mode 100644
index 79b84741..00000000
--- a/packages/visualisation/src/components/NewExperimentSection/index.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { H1, H2, Paragraph } from '../Typography'
-import styled from 'styled-components'
-
-import Slider from '@mui/material/Slider'
-
-// JSON Editor.
-import { JsonEditor as Editor } from 'jsoneditor-react'
-import 'jsoneditor-react/es/editor.min.css'
-
-const FlexSpaceBetween = styled.div`
-  display: flex;
-  justify-content: space-between;
-`
-
-const MenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  gap: 2rem;
-  width: 700px;
-  background-color: white;
-  z-index: 4;
-
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 3.8rem;
-
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 2.5rem;
-`
-
-const StyledButton = styled.button`
-  width: 140px;
-  height: 40px;
-  background-color: #10c57b;
-  border: none;
-  z-index: 2;
-  cursor: pointer;
-  font-size: 14px;
-  font-family: Arial, Helvetica, sans-serif;
-  border-radius: 2px;
-`
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-
-  overflow-y: scroll;
-
-  margin-right: 1rem;
-  margin-left: 1rem;
-`
-
-const NewExperimentSection = ({
-  fleets,
-  newExperiment,
-  newParameters,
-  setNewParameters,
-}) => {
-  const updateFixedRoute = (e) => {
-    setNewParameters({ ...newParameters, fixedRoute: e.target.value })
-  }
-
-  const updateFleetsJson = (updatedJson) => {
-    console.log('Update JSON', updatedJson)
-    setNewParameters({ ...newParameters, fleets: updatedJson })
-  }
-
-  return (
-    <MenuContainer>
-      <Wrapper>
-        <H1>Parametrar</H1>
-
-        <H2>Kollektivtrafik</H2>
-        <Paragraph>
-          Här styr du hur stor andel av kollektivtrafik som kör i linjetrafik
-          och anropsstyrt.
-        </Paragraph>
-        <div style={{ marginBottom: '0.5rem', marginTop: '-0.7rem' }}>
-          <Slider
-            aria-label="Custom marks"
-            size="small"
-            value={newParameters.fixedRoute}
-            onChange={updateFixedRoute}
-            valueLabelDisplay="auto"
-            valueLabelFormat={(value) => `${value}%`}
-          />
-          <FlexSpaceBetween>
-            <Paragraph black small>
-              Fasta rutter (linjetrafik)
-            </Paragraph>
-            <Paragraph black small>
-              Dynamiska rutter (anropsstyrt)
-            </Paragraph>
-          </FlexSpaceBetween>
-        </div>
-
-        <H2>Flottor</H2>
-        <Paragraph>
-          Här kan du redigera flottorna som kör i respektive kommun. Ändringar
-          du gör slår igenom när nytt experiment startar.
-        </Paragraph>
-        <Editor value={fleets} onChange={updateFleetsJson} />
-
-        <H2>Nytt experiment</H2>
-        <Paragraph>
-          När du klickar på knappen nedan startar experimentet om med ovan valda
-          parametrar.
-        </Paragraph>
-        <StyledButton type="submit" onClick={newExperiment}>
-          Nytt experiment
-        </StyledButton>
-
-        <Paragraph></Paragraph>
-      </Wrapper>
-    </MenuContainer>
-  )
-}
-
-export default NewExperimentSection
diff --git a/packages/visualisation/src/components/PlaybackOptions/index.jsx b/packages/visualisation/src/components/PlaybackOptions/index.jsx
index 2e1216ad..b91109b8 100644
--- a/packages/visualisation/src/components/PlaybackOptions/index.jsx
+++ b/packages/visualisation/src/components/PlaybackOptions/index.jsx
@@ -10,7 +10,7 @@ import TransparentButton from '../TransparentButton'
 const Wrapper = styled.div`
   position: absolute;
   bottom: 2rem;
-  left: 5rem;
+  left: 2rem;
   z-index: 2;
   display: flex;
   align-items: center;
@@ -21,7 +21,7 @@ const SliderWrapper = styled.div`
   height: 14vh;
   position: absolute;
   bottom: 6rem;
-  left: 4.5rem;
+  left: 1.5rem;
   z-index: 2;
   position: absolute;
   padding-top: 30px;
diff --git a/packages/visualisation/src/components/ResetExperiment/index.jsx b/packages/visualisation/src/components/ResetExperiment/index.jsx
new file mode 100644
index 00000000..8ae968b1
--- /dev/null
+++ b/packages/visualisation/src/components/ResetExperiment/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import ResetIcon from '../../icons/svg/resetIcon.svg'
+import TransparentButton from '../TransparentButton'
+
+const Wrapper = styled.div`
+  position: absolute;
+  z-index: 2;
+  bottom: 3rem;
+  left: 8.3rem;
+`
+
+const ResetExperiment = ({ resetSimulation }) => {
+  return (
+    <Wrapper>
+      <TransparentButton onClick={() => resetSimulation()}>
+        <img src={ResetIcon} alt="Reset" />
+      </TransparentButton>
+    </Wrapper>
+  )
+}
+
+export default ResetExperiment
diff --git a/packages/visualisation/src/components/SavedExperimentSection/index.jsx b/packages/visualisation/src/components/SavedExperimentSection/index.jsx
deleted file mode 100644
index ef8497dc..00000000
--- a/packages/visualisation/src/components/SavedExperimentSection/index.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from 'styled-components'
-import { H1, Paragraph } from '../Typography'
-
-const MenuContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 300px;
-  background-color: white;
-  position: absolute;
-  bottom: 0;
-  left: 3.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-top: 2.5rem;
-  top: 0;
-  z-index: 4;
-`
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`
-
-const SavedExperimentSection = () => {
-  return (
-    <MenuContainer>
-      <Wrapper>
-        <H1>Sparade experiment</H1>
-        <Paragraph black>Här kan du se resultatet av experimentet.</Paragraph>
-      </Wrapper>
-    </MenuContainer>
-  )
-}
-
-export default SavedExperimentSection
diff --git a/packages/visualisation/src/components/SideMenu/index.jsx b/packages/visualisation/src/components/SideMenu/index.jsx
deleted file mode 100644
index 45d300a7..00000000
--- a/packages/visualisation/src/components/SideMenu/index.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { useState, useRef } from 'react'
-import styled from 'styled-components'
-import pmLogo from '../../icons/svg/pmLogo.svg'
-import experimentIcon from '../../icons/svg/experimentIcon.svg'
-import historyIcon from '../../icons/svg/historyIcon.svg'
-import menuActive from '../../icons/svg/menuActive.svg'
-import pencilIcon from '../../icons/svg/pencil.svg'
-import SavedExperimentSection from '../SavedExperimentSection'
-import ExperimentSection from '../ExperimentSection'
-import NewExperimentSection from '../NewExperimentSection'
-import useOutsideClick from '../../hooks/useClickOutside'
-import { keyframes } from 'styled-components'
-
-const pulseAnimation = keyframes`
-  0%
-  {
-    transform: scale( 1.2 );
-  }
-  50%
-  {
-    transform: scale( .90 );
-  }
-  100%
-  {
-    transform: scale( 1.2 );
-  }
-`
-
-const Menu = styled.nav`
-  background-color: #10c57b33;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  position: absolute;
-  cursor: auto;
-  z-index: 5;
-`
-
-const List = styled.ol`
-  margin: 0;
-  padding: 0;
-`
-
-const MenuItem = styled.li`
-  cursor: pointer;
-  margin: 4rem 1rem 0 1rem;
-  list-style-type: none;
-  display: flex;
-  align-items: center;
-  z-index: 4;
-
-  img {
-    width: 32px;
-  }
-`
-
-const ActiveMenu = styled.div`
-  margin-left: 1.2rem;
-  z-index: 10;
-  position: absolute;
-  left: 2.6rem;
-`
-
-const PulseIcon = styled.img`
-  animation-name: ${pulseAnimation};
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-`
-
-const SideMenu = ({
-  activeLayers,
-  currentParameters,
-  newParameters,
-  newExperiment,
-  setNewParameters,
-  fleets,
-}) => {
-  const ref = useRef()
-
-  const [open, setOpen] = useState('map')
-
-  useOutsideClick(ref, () => {
-    setOpen('map')
-  })
-  return (
-    <div ref={ref}>
-      <Menu>
-        <List>
-          <MenuItem onClick={() => setOpen('map')}>
-            <img src={pmLogo} alt="Logo" />
-          </MenuItem>
-          <MenuItem
-            onClick={() =>
-              setOpen((current) =>
-                current === 'newExperiment' ? 'map' : 'newExperiment'
-              )
-            }
-          >
-            <img src={pencilIcon} alt="Parametrar" />
-            {open === 'newExperiment' && (
-              <ActiveMenu>
-                <img src={menuActive} alt="Open" />
-              </ActiveMenu>
-            )}
-          </MenuItem>
-          <MenuItem
-            onClick={() =>
-              setOpen((current) =>
-                current === 'experiment' ? 'map' : 'experiment'
-              )
-            }
-          >
-            <PulseIcon src={experimentIcon} alt="Experiment" />
-            {open === 'experiment' && (
-              <ActiveMenu>
-                <img src={menuActive} alt="Open" />
-              </ActiveMenu>
-            )}
-          </MenuItem>
-          <MenuItem
-            onClick={() =>
-              setOpen((current) =>
-                current === 'savedExperiment' ? 'map' : 'savedExperiment'
-              )
-            }
-          >
-            <img src={historyIcon} alt="Saved Experiment" />
-            {open === 'savedExperiment' && (
-              <ActiveMenu>
-                <img src={menuActive} alt="Open" />
-              </ActiveMenu>
-            )}
-          </MenuItem>
-        </List>
-      </Menu>
-
-      {open === 'experiment' && (
-        <ExperimentSection
-          currentParameters={currentParameters}
-          activeLayers={activeLayers}
-        />
-      )}
-
-      {open === 'savedExperiment' && <SavedExperimentSection />}
-
-      {open === 'newExperiment' && (
-        <NewExperimentSection
-          fleets={fleets}
-          newParameters={newParameters}
-          newExperiment={newExperiment}
-          setNewParameters={setNewParameters}
-        />
-      )}
-    </div>
-  )
-}
-
-export default SideMenu
diff --git a/packages/visualisation/src/components/SideMenu/materialMenu.jsx b/packages/visualisation/src/components/SideMenu/materialMenu.jsx
deleted file mode 100644
index c0ef67ab..00000000
--- a/packages/visualisation/src/components/SideMenu/materialMenu.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-/*import pmLogo from '../../icons/svg/pmLogo.svg'
-import experimentIcon from '../../icons/svg/experimentIcon.svg'
-import historyIcon from '../../icons/svg/historyIcon.svg'
-import menuActive from '../../icons/svg/menuActive.svg'
-import pencilIcon from '../../icons/svg/pencil.svg'
-import SavedExperimentSection from '../SavedExperimentSection'
-import ExperimentSection from '../ExperimentSection'
-import NewExperimentSection from '../NewExperimentSection'*/
-
-import InboxIcon from '@mui/icons-material/MoveToInbox'
-import MailIcon from '@mui/icons-material/Mail'
-import SvgIcon, { Button, Icon } from '@mui/material'
-import logo from '../../icons/svg/pmLogo.svg'
-
-import { keyframes } from 'styled-components'
-import {
-  Box,
-  Divider,
-  IconButton,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  SwipeableDrawer,
-} from '@mui/material'
-
-const pulseAnimation = keyframes`
-  0%
-  {
-    transform: scale( 1.2 );
-  }
-  50%
-  {
-    transform: scale( .90 );
-  }
-  100%
-  {
-    transform: scale( 1.2 );
-  }
-`
-
-const Menu = styled.nav`
-  background-color: #10c57b;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  position: absolute;
-  cursor: auto;
-  z-index: 5;
-`
-
-const List = styled.ol`
-  margin: 0;
-  padding: 0;
-`
-
-const MenuItem = styled.li`
-  cursor: pointer;
-  margin: 4rem 1rem 0 1rem;
-  list-style-type: none;
-  display: flex;
-  align-items: center;
-  z-index: 4;
-
-  img {
-    width: 32px;
-  }
-`
-
-const ActiveMenu = styled.div`
-  margin-left: 1.2rem;
-  z-index: 10;
-  position: absolute;
-  left: 2.6rem;
-`
-
-const PulseIcon = styled.img`
-  animation-name: ${pulseAnimation};
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-`
-
-const SideMenu = ({
-  activeLayers,
-  currentParameters,
-  newParameters,
-  newExperiment,
-  setNewParameters,
-  fleets,
-}) => {
-  const [open, setOpen] = useState(true)
-  const toggleDrawer = (open) => (event) => {
-    if (
-      event &&
-      event.type === 'keydown' &&
-      (event.key === 'Tab' || event.key === 'Shift')
-    ) {
-      return
-    }
-    setOpen(open)
-  }
-
-  return (
-    <>
-      <SwipeableDrawer
-        anchor={'left'}
-        open={open}
-        onClose={toggleDrawer(false)}
-        onOpen={toggleDrawer(true)}
-        swipeAreaWidth={300}
-        disableSwipeToOpen={false}
-        ModalProps={{
-          keepMounted: true,
-        }}
-      >
-        <Box
-          sx={{
-            width: 300,
-            backgroundColor: '#10c57b',
-          }}
-          role="presentation"
-          onClick={toggleDrawer(false)}
-          onKeyDown={toggleDrawer(false)}
-        >
-          <List>
-            <ListItem disablePadding>
-              <ListItemButton>
-                <ListItemIcon>
-                  <Icon>
-                    <img src={logo} alt="PM Icon" />
-                  </Icon>
-                </ListItemIcon>
-              </ListItemButton>
-            </ListItem>
-            <ListItem disablePadding>
-              <ListItemButton>
-                <ListItemIcon>
-                  <InboxIcon />
-                </ListItemIcon>
-                <ListItemText primary="Experiment" />
-              </ListItemButton>
-            </ListItem>
-          </List>
-          <Divider />
-        </Box>
-      </SwipeableDrawer>
-    </>
-  )
-}
-
-export default SideMenu
diff --git a/packages/visualisation/src/components/TimeProgressBar/index.jsx b/packages/visualisation/src/components/TimeProgressBar/index.jsx
index 8a089170..17a8ed19 100644
--- a/packages/visualisation/src/components/TimeProgressBar/index.jsx
+++ b/packages/visualisation/src/components/TimeProgressBar/index.jsx
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   height: 50px;
   display: flex;
   align-items: center;
-  left: 15rem;
+  left: 12rem;
   right: 5rem;
 `
 
diff --git a/packages/visualisation/src/icons/icons.jsx b/packages/visualisation/src/icons/icons.jsx
index ec6556fc..9945d2ba 100644
--- a/packages/visualisation/src/icons/icons.jsx
+++ b/packages/visualisation/src/icons/icons.jsx
@@ -1,5 +1,23 @@
 import React from 'react'
 
+const PMLogo = (props) => {
+  return (
+    <svg
+      width="30"
+      height="31"
+      viewBox="0 0 30 31"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M26.9285 7.68689C28.6349 7.68689 30 6.30552 30 4.61538C30 2.92524 28.6186 1.54388 26.9285 1.54388C25.2221 1.54388 23.857 2.92524 23.857 4.61538C23.857 5.08667 23.9708 5.54171 24.1658 5.94799L19.2904 10.5471C18.6403 10.0921 17.844 9.81581 16.9827 9.81581C16.6251 9.81581 16.2676 9.86457 15.9263 9.96208L11.3272 4.90791C11.7335 4.38787 11.9773 3.73781 11.9773 3.03901C11.9773 1.36512 10.6121 0 8.93825 0C7.26436 0 5.89924 1.36512 5.89924 3.03901C5.89924 4.71289 7.26436 6.078 8.93825 6.078C9.31203 6.078 9.65331 6.013 9.97833 5.89924L14.3987 10.7584C13.5049 11.506 12.9361 12.6273 12.9361 13.8787C12.9361 13.9924 12.9361 14.0899 12.9523 14.2037L6.48429 16.1051C5.86674 15.0975 4.76165 14.415 3.49404 14.415C1.56013 14.415 0 15.9751 0 17.909C0 19.8429 1.56013 21.403 3.49404 21.403C5.42795 21.403 6.98808 19.8429 6.98808 17.909C6.98808 17.844 6.98808 17.779 6.97183 17.6977L13.4236 15.7963C13.7812 16.4626 14.3174 17.0152 14.9675 17.389L12.5135 24.8483C12.481 24.8483 12.4323 24.8483 12.3998 24.8483C10.7259 24.8483 9.36078 26.2134 9.36078 27.8873C9.36078 29.5612 10.7259 30.9263 12.3998 30.9263C14.0737 30.9263 15.4388 29.5612 15.4388 27.8873C15.4388 26.831 14.9025 25.9209 14.1062 25.3684L16.5601 17.909C16.7064 17.9252 16.8527 17.9415 17.0152 17.9415C18.0228 17.9415 18.9491 17.5677 19.6479 16.9664L23.6132 20.0217C23.4995 20.3304 23.4345 20.6555 23.4345 20.9968C23.4345 22.5569 24.7021 23.8245 26.2622 23.8245C27.8223 23.8245 29.0899 22.5569 29.0899 20.9968C29.0899 19.4366 27.8223 18.169 26.2622 18.169C25.6609 18.169 25.0921 18.364 24.6371 18.6891L20.6717 15.6338C20.9317 15.0975 21.078 14.5125 21.078 13.8787C21.078 13.0986 20.8505 12.3835 20.4767 11.766L25.3034 7.19935C25.7422 7.49187 26.3272 7.68689 26.9285 7.68689Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
 const Rabbit = (props) => {
   return (
     <svg
@@ -48,4 +66,4 @@ const Snail = (props) => {
   )
 }
 
-export { Rabbit, Snail }
+export { PMLogo, Rabbit, Snail }
diff --git a/packages/visualisation/src/icons/svg/pmLogo.svg b/packages/visualisation/src/icons/svg/pmLogo.svg
deleted file mode 100644
index c19035fb..00000000
--- a/packages/visualisation/src/icons/svg/pmLogo.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.9285 7.68689C28.6349 7.68689 30 6.30552 30 4.61538C30 2.92524 28.6186 1.54388 26.9285 1.54388C25.2221 1.54388 23.857 2.92524 23.857 4.61538C23.857 5.08667 23.9708 5.54171 24.1658 5.94799L19.2904 10.5471C18.6403 10.0921 17.844 9.81581 16.9827 9.81581C16.6251 9.81581 16.2676 9.86457 15.9263 9.96208L11.3272 4.90791C11.7335 4.38787 11.9773 3.73781 11.9773 3.03901C11.9773 1.36512 10.6121 0 8.93825 0C7.26436 0 5.89924 1.36512 5.89924 3.03901C5.89924 4.71289 7.26436 6.078 8.93825 6.078C9.31203 6.078 9.65331 6.013 9.97833 5.89924L14.3987 10.7584C13.5049 11.506 12.9361 12.6273 12.9361 13.8787C12.9361 13.9924 12.9361 14.0899 12.9523 14.2037L6.48429 16.1051C5.86674 15.0975 4.76165 14.415 3.49404 14.415C1.56013 14.415 0 15.9751 0 17.909C0 19.8429 1.56013 21.403 3.49404 21.403C5.42795 21.403 6.98808 19.8429 6.98808 17.909C6.98808 17.844 6.98808 17.779 6.97183 17.6977L13.4236 15.7963C13.7812 16.4626 14.3174 17.0152 14.9675 17.389L12.5135 24.8483C12.481 24.8483 12.4323 24.8483 12.3998 24.8483C10.7259 24.8483 9.36078 26.2134 9.36078 27.8873C9.36078 29.5612 10.7259 30.9263 12.3998 30.9263C14.0737 30.9263 15.4388 29.5612 15.4388 27.8873C15.4388 26.831 14.9025 25.9209 14.1062 25.3684L16.5601 17.909C16.7064 17.9252 16.8527 17.9415 17.0152 17.9415C18.0228 17.9415 18.9491 17.5677 19.6479 16.9664L23.6132 20.0217C23.4995 20.3304 23.4345 20.6555 23.4345 20.9968C23.4345 22.5569 24.7021 23.8245 26.2622 23.8245C27.8223 23.8245 29.0899 22.5569 29.0899 20.9968C29.0899 19.4366 27.8223 18.169 26.2622 18.169C25.6609 18.169 25.0921 18.364 24.6371 18.6891L20.6717 15.6338C20.9317 15.0975 21.078 14.5125 21.078 13.8787C21.078 13.0986 20.8505 12.3835 20.4767 11.766L25.3034 7.19935C25.7422 7.49187 26.3272 7.68689 26.9285 7.68689Z" fill="white"/>
-</svg>
diff --git a/packages/visualisation/src/logo.svg b/packages/visualisation/src/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/packages/visualisation/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file