diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
deleted file mode 100644
index 9e4d6214..00000000
--- a/frontend/src/Components/RoadConditions/ConditionsMap.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import MapWrapper from '../Map/MapWrapper';
-import { FC } from 'react';
-import '../../css/road_conditions.css';
-import ForceMapUpdate from '../Map/ForceMapUpdate';
-
-interface Props {
-  triggerUpdate: number;
-}
-
-const ConditionsMap: FC<Props> = ({ triggerUpdate }) => {
-  //TODO trigger redrwaw the plot
-
-  return (
-    <div className="road-conditions-map">
-      <MapWrapper>
-        <ForceMapUpdate triggerUpdate={triggerUpdate} />
-      </MapWrapper>
-    </div>
-  );
-};
-export default ConditionsMap;
diff --git a/frontend/src/Components/RoadConditions/ConditionsGraph.tsx b/frontend/src/Components/RoadDetails/ConditionsGraph.tsx
similarity index 100%
rename from frontend/src/Components/RoadConditions/ConditionsGraph.tsx
rename to frontend/src/Components/RoadDetails/ConditionsGraph.tsx
diff --git a/frontend/src/Components/RoadDetails/MapArea.tsx b/frontend/src/Components/RoadDetails/MapArea.tsx
index 0d435662..4fb54da0 100644
--- a/frontend/src/Components/RoadDetails/MapArea.tsx
+++ b/frontend/src/Components/RoadDetails/MapArea.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
 import ImageGallery from './ImageGallery';
 import MapWrapper from '../Map/MapWrapper';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
+interface Props {
+  triggerUpdate: number;
+}
 /**
  * The map area op the road details(road inspect) page
  */
-const MapArea: React.FC = () => {
+const MapArea: React.FC<Props> = ({ triggerUpdate }) => {
   return (
     <div className="map-area">
       <div className="map_area" style={{ height: '100%' }}>
-        <MapWrapper></MapWrapper>
+        <MapWrapper>
+          <ForceMapUpdate triggerUpdate={triggerUpdate} />
+        </MapWrapper>
       </div>
       <div className="imageGallery_container">
         <ImageGallery /> {/* Use the imageGallery component */}
diff --git a/frontend/src/Components/RoadDetails/RoadImage.tsx b/frontend/src/Components/RoadDetails/RoadImage.tsx
index 640320b1..46ad113f 100644
--- a/frontend/src/Components/RoadDetails/RoadImage.tsx
+++ b/frontend/src/Components/RoadDetails/RoadImage.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 const maproadStyles = {
   margin: 0,
   padding: 20,
-  color: '#333',
 };
 
 const road_area = <h1 style={maproadStyles}>Road surface image</h1>;
diff --git a/frontend/src/css/road_conditions.css b/frontend/src/css/road_conditions.css
deleted file mode 100644
index 0f2ca40a..00000000
--- a/frontend/src/css/road_conditions.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.road-conditions-page-wrapper {
-  height: calc(100vh - var(--navbar-height));
-  display: flex;
-  flex-direction: column;
-}
-
-.road-conditions-graph {
-  position: relative;
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css
index 43eab5fa..cd96b9f9 100644
--- a/frontend/src/css/road_details.css
+++ b/frontend/src/css/road_details.css
@@ -13,7 +13,7 @@
 .road-image,
 .map-area {
   /* background-color: #eee; Example color for the middle area */
-  height: 60vh; /* Occupying half of the page vertically */
+  height: 100%; /* Occupying half of the page vertically */
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -81,6 +81,14 @@
   transition: 0.4s;
 }
 
+.road-conditions-graph {
+  position: relative;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* Style to change the background color when switched on */
 input:checked + .slider {
   background-color: #4caf50;
diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx
deleted file mode 100644
index 3797b18b..00000000
--- a/frontend/src/pages/RoadConditions.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ChartData } from 'chart.js';
-
-import ConditionsMap from '../Components/RoadConditions/ConditionsMap';
-import ConditionsGraph from '../Components/RoadConditions/ConditionsGraph';
-
-import { GraphProvider } from '../context/GraphContext';
-
-import Split from 'react-split';
-
-import '../css/split.css';
-import '../css/road_conditions.css';
-import { useEffect, useState } from 'react';
-import { getConditionsWay } from '../queries/conditions';
-
-//this is to visualise the Road Conditions (GP) map
-const RoadConditions = () => {
-  const [wayData, setWayData] =
-    useState<ChartData<'scatter', number[], number>>();
-  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
-
-  console.log(wayData);
-
-  useEffect(() => {
-    getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => {
-      console.log(wc);
-      setWayData({
-        labels: wc.map((p) => p.way_dist * 100),
-        datasets: [
-          {
-            //@ts-ignore
-            type: 'line' as const,
-            label: 'KPI',
-            borderColor: 'rgb(255, 99, 132)',
-            borderWidth: 2,
-            fill: false,
-            tension: 0.2,
-            data: wc.map((p) => p.KPI),
-            yAxisID: 'KPI',
-          },
-          {
-            //@ts-ignore
-            type: 'line' as const,
-            label: 'DI',
-            borderColor: 'rgb(120, 245, 23)',
-            borderWidth: 2,
-            fill: false,
-            tension: 0.2,
-            data: wc.map((p) => p.DI),
-            yAxisID: 'DI',
-          },
-        ],
-      });
-    });
-  }, []);
-
-  return (
-    <GraphProvider>
-      <Split
-        className="split"
-        direction="vertical"
-        sizes={[45, 55]}
-        minSize={150}
-        snapOffset={10}
-        onDragEnd={() => {
-          setTriggerUpdate((prev) => prev + 1);
-        }}
-        // dragInterval={50}
-      >
-        <ConditionsMap triggerUpdate={triggerUpdate} />
-        <ConditionsGraph data={wayData} />
-      </Split>
-    </GraphProvider>
-  );
-};
-
-export default RoadConditions;
diff --git a/frontend/src/pages/RoadDetails.tsx b/frontend/src/pages/RoadDetails.tsx
index b6cf86ba..81c19c31 100644
--- a/frontend/src/pages/RoadDetails.tsx
+++ b/frontend/src/pages/RoadDetails.tsx
@@ -1,19 +1,77 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import '../css/road_details.css'; // Import the CSS file
 import MapArea from '../Components/RoadDetails/MapArea';
 import RoadImage from '../Components/RoadDetails/RoadImage';
 import TopBar from '../Components/RoadDetails/TopBar';
+import Split from 'react-split';
+import ConditionsGraph from '../Components/RoadDetails/ConditionsGraph';
+import { ChartData } from 'chart.js';
+import { getConditionsWay } from '../queries/conditions';
+import '../css/split.css';
 
 const RoadDetails = () => {
   const [showMapImageMode, setShowRoadImageMode] = useState(false);
+  const [wayData, setWayData] =
+    useState<ChartData<'scatter', number[], number>>();
+  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
+
+  useEffect(() => {
+    getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => {
+      console.log(wc);
+      setWayData({
+        labels: wc.map((p) => p.way_dist * 100),
+        datasets: [
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'KPI',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.KPI),
+            yAxisID: 'KPI',
+          },
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'DI',
+            borderColor: 'rgb(120, 245, 23)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.DI),
+            yAxisID: 'DI',
+          },
+        ],
+      });
+    });
+  }, []);
 
   return (
     <div>
       <TopBar isToggleOn={setShowRoadImageMode} />
-      {showMapImageMode ? <RoadImage /> : <MapArea />}
-      {/* TODO: putting plots here */}
-      <div className="plot-area">{/* Content for the plot area */}</div>
+      <Split
+        className="split"
+        direction="vertical"
+        sizes={[45, 55]}
+        minSize={150}
+        snapOffset={10}
+        onDragEnd={() => {
+          setTriggerUpdate((prev) => prev + 1);
+        }}
+      >
+        <div>
+          {showMapImageMode ? (
+            <RoadImage />
+          ) : (
+            <MapArea triggerUpdate={triggerUpdate} />
+          )}
+        </div>
+        <ConditionsGraph data={wayData} />
+      </Split>
+      ,
     </div>
   );
 };