diff --git a/web/src/Components/Bridging/BridgeGraph.tsx b/web/src/Components/Bridging/BridgeGraph.tsx
index 8881788..ec33636 100644
--- a/web/src/Components/Bridging/BridgeGraph.tsx
+++ b/web/src/Components/Bridging/BridgeGraph.tsx
@@ -53,7 +53,13 @@ export function BridgeGraph({ bridges, sizeFractions }) {
           label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
           height={70}
         />
-        <YAxis type='number' domain={[0, 100]} ticks={[20, 40, 60, 80, 100]} allowDataOverflow label={{value: 'Cumulative Volume (%)', angle: '270' }} />
+        <YAxis
+          type='number'
+          domain={[0, 100]}
+          ticks={[20, 40, 60, 80, 100]}
+          allowDataOverflow
+          label={{ value: 'Cumulative Volume (%)', angle: '270' }}
+        />
         <Tooltip />
         <Legend verticalAlign='bottom' align='center' />
         {Object.entries(bridges).map(([name, cumulative], index) => (
diff --git a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx b/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
index da52535..9820106 100644
--- a/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
+++ b/web/src/Components/Bridging/ParticleSizeDistributionGraph.tsx
@@ -55,7 +55,7 @@ export function ParticleSizeDistributionGraph({ bridges, sizeFractions }) {
           label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
           height={70}
         />
-        <YAxis type='number'  label={{value: 'Volume (%)', angle: '270' }} allowDataOverflow />
+        <YAxis type='number' label={{ value: 'Volume (%)', angle: '270' }} allowDataOverflow />
         <Tooltip />
         <Legend verticalAlign='bottom' align='center' />
         {Object.entries(bridges).map(([name, cumulative], index) => (
diff --git a/web/src/Components/Bridging/styles.ts b/web/src/Components/Bridging/styles.ts
index 91fbb11..2a9b15f 100644
--- a/web/src/Components/Bridging/styles.ts
+++ b/web/src/Components/Bridging/styles.ts
@@ -1,9 +1,9 @@
-import { styled } from "styled-components"
+import { styled } from 'styled-components'
 
 export const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 10px 5px; 
+  gap: 10px 5px;
 `
 
 export const RadioWrapper = styled.div`
@@ -22,15 +22,14 @@ export const StyledSelect = styled.select`
 `
 
 export const graphColors = [
-    '#000000',
-    '#ee2e89',
-    '#21d0bb',
-    '#2077d9',
-    '#a1022f',
-    '#2bcb95',
-    '#64b3ec',
-    '#ef7895',
-    '#02953d',
-    '#044f78',
-  ]
-  
\ No newline at end of file
+  '#000000',
+  '#ee2e89',
+  '#21d0bb',
+  '#2077d9',
+  '#a1022f',
+  '#2bcb95',
+  '#64b3ec',
+  '#ef7895',
+  '#02953d',
+  '#044f78',
+]
diff --git a/web/src/Components/Bridging/utils.ts b/web/src/Components/Bridging/utils.ts
index e42ab8a..0a5b90b 100644
--- a/web/src/Components/Bridging/utils.ts
+++ b/web/src/Components/Bridging/utils.ts
@@ -1,31 +1,31 @@
-import { GraphData } from "../../Types";
+import { GraphData } from '../../Types'
 
 export function differentiateArrayObjects(arr: GraphData[]): GraphData[] {
-    return arr.map((currentObj, index, array) => {
-        // Handling for the last element since it has no successor
-        if (index === array.length - 1) {
-            const lastObj: GraphData = { size: currentObj.size }; // Preserving the size property
-            // Set all other properties to NaN or 0 to indicate no difference can be calculated
-            Object.keys(currentObj).forEach((key) => {
-                if (key !== 'size') {
-                    lastObj[key] = NaN; // or set to 0 as per requirement
-                }
-            });
-            return lastObj;
+  return arr.map((currentObj, index, array) => {
+    // Handling for the last element since it has no successor
+    if (index === array.length - 1) {
+      const lastObj: GraphData = { size: currentObj.size } // Preserving the size property
+      // Set all other properties to NaN or 0 to indicate no difference can be calculated
+      Object.keys(currentObj).forEach(key => {
+        if (key !== 'size') {
+          lastObj[key] = NaN // or set to 0 as per requirement
         }
+      })
+      return lastObj
+    }
 
-        const nextObj = array[index + 1];
-        const differentiatedObj: GraphData = { size: currentObj.size }; // Preserve the size property
+    const nextObj = array[index + 1]
+    const differentiatedObj: GraphData = { size: currentObj.size } // Preserve the size property
 
-        // Iterate over the properties of the current object
-        Object.keys(currentObj).forEach((key) => {
-            if (key !== 'size' && typeof currentObj[key] === 'number') {
-                // Calculate the difference with the next object's corresponding property
-                const difference = (nextObj[key] || 0) - currentObj[key];
-                differentiatedObj[key] = parseFloat(difference.toFixed(3));
-            }
-        });
+    // Iterate over the properties of the current object
+    Object.keys(currentObj).forEach(key => {
+      if (key !== 'size' && typeof currentObj[key] === 'number') {
+        // Calculate the difference with the next object's corresponding property
+        const difference = (nextObj[key] || 0) - currentObj[key]
+        differentiatedObj[key] = parseFloat(difference.toFixed(3))
+      }
+    })
 
-        return differentiatedObj;
-    });
-}
\ No newline at end of file
+    return differentiatedObj
+  })
+}