diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
index b9f3cc6..276c405 100644
--- a/web/src/Components/Bridging/BridgeContainer.tsx
+++ b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -5,9 +5,9 @@ import { AuthContext } from 'react-oauth2-code-pkce'
 import { ErrorToast } from '../Common/Toast'
 import InputContainer from './InputContainer'
 import { findGraphData } from '../../Utils'
-import CumulativeGraph from './Graphs/CumulativeGraph'
-import DistributionGraph from './Graphs/DistributionGraph'
 import { Bridge } from '../../Types'
+import BridgeGraph from './Graphs/BridgeGraph'
+import { differentiateArrayObjects } from './utils'
 
 type BridgeContainerProps = {
   bridges: Bridge
@@ -96,8 +96,18 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
           borderRadius: '0.5rem',
         }}
       >
-        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
-        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <BridgeGraph
+          graphData={findGraphData(sizeFractions, bridges)}
+          yAxis={'Cumulative Volume (%)'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+        />
+        <BridgeGraph
+          graphData={differentiateArrayObjects(findGraphData(sizeFractions, bridges))}
+          yAxis={'Volume (%)'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+        />
       </div>
       <InputContainer
         mode={mode}
diff --git a/web/src/Components/Bridging/Graphs/CumulativeGraph.tsx b/web/src/Components/Bridging/Graphs/CumulativeGraph.tsx
deleted file mode 100644
index 360d3cd..0000000
--- a/web/src/Components/Bridging/Graphs/CumulativeGraph.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { ParticleSizeContext } from '../../../Context'
-import { findGraphData } from '../../../Utils'
-import BridgeGraph from './BridgeGraph'
-
-export function CumulativeGraph({ bridges, sizeFractions }) {
-  const [graphData, setGraphData] = useState([])
-
-  useEffect(() => {
-    const newGraphData = findGraphData(sizeFractions, bridges)
-    setGraphData(newGraphData)
-  }, [bridges, sizeFractions])
-
-  return (
-    <BridgeGraph
-      graphData={graphData}
-      bridges={bridges}
-      sizeFractions={sizeFractions}
-      yAxis={'Cumulative Volume (%)'}
-    />
-  )
-}
-
-export default CumulativeGraph
diff --git a/web/src/Components/Bridging/Graphs/DistributionGraph.tsx b/web/src/Components/Bridging/Graphs/DistributionGraph.tsx
deleted file mode 100644
index 6109d77..0000000
--- a/web/src/Components/Bridging/Graphs/DistributionGraph.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react'
-import { findGraphData } from '../../../Utils'
-import { differentiateArrayObjects } from '../utils'
-import BridgeGraph from './BridgeGraph'
-
-export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
-  const [graphData, setGraphData] = useState([])
-
-  useEffect(() => {
-    const newGraphData = findGraphData(sizeFractions, bridges)
-    const diffentiated = differentiateArrayObjects(newGraphData)
-    setGraphData(diffentiated)
-  }, [bridges, sizeFractions])
-
-  return <BridgeGraph yAxis='Volume (%)' graphData={graphData} sizeFractions={sizeFractions} bridges={bridges} />
-}
-
-export default ParticleSizeDistributionGraph