diff --git a/.gitignore b/.gitignore
index 303f9f3..559a582 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 web/node_modules
 /.idea/
 /api/.venv/
+**/build
 **/__pycache__/**
 log.txt
 .env
diff --git a/web/src/Components/Bridging/BridgeContainer.jsx b/web/src/Components/Bridging/BridgeContainer.jsx
deleted file mode 100644
index bf6f5f8..0000000
--- a/web/src/Components/Bridging/BridgeContainer.jsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Radio, TextField, Typography } from '@equinor/eds-core-react'
-import { FractionsAPI } from '../../Api'
-import { BridgingOption, CeramicDiscsValues } from "../../Enums"
-import { AuthContext } from 'react-oauth2-code-pkce'
-import BridgeGraph from "./BridgeGraph"
-import {Tooltip} from "../Common/Tooltip";
-import {findDValue, findGraphData} from "../../Utils";
-import { ErrorToast } from '../Common/Toast'
-
-const InputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`
-
-const RadioWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
-const StyledSelect = styled.select`
-  position: relative;
-  font-size: medium;
-  padding: 8px 16px;
-  border: 1px solid #dbdbdb;
-  cursor: pointer;
-  width: 150px;
-  background-color: #ffffff;
-`
-
-export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
-  const [sizeFractions, setSizeFractions] = useState([])
-  const [unit, setUnit] = useState('mD')
-  const [bridgeValueHelperText, setBridgeValueHelperText] = useState(undefined)
-  const [bridgeValueVariant, setBridgeValueVariant] = useState(undefined)
-  const [optimalBridgeGraphData, setOptimalBridgeGraphData] = useState([])
-   const { token} = useContext(AuthContext)
-
-  // Load size fractions once on first render
-  useEffect(() => {
-    FractionsAPI.getFractionsApi(token)
-        .then(response => {
-          setSizeFractions(response.data.size_fractions)
-        })
-        .catch(error => {
-          ErrorToast(`${error.response.data}`, error.response.status)
-          console.error('fetch error' + error)
-        })
-  }, [])
-
-  useEffect(() => {
-      if (bridges["Bridge"].length && sizeFractions.length ) {
-      const x = (findGraphData(sizeFractions, {"Bridge": bridges["Bridge"]}))
-      setOptimalBridgeGraphData(x)
-        }
-  }, [bridges, sizeFractions])
-
-  function bridgingOptionChange(event) {
-    switch (event.target.value) {
-      case BridgingOption.PERMEABILITY:
-        setMode(BridgingOption.PERMEABILITY)
-        setUnit('mD')
-        break
-      case BridgingOption.AVERAGE_PORESIZE:
-        setMode(BridgingOption.AVERAGE_PORESIZE)
-        setUnit('microns')
-        break
-
-      case BridgingOption.MAXIMUM_PORESIZE:
-        setMode(BridgingOption.MAXIMUM_PORESIZE)
-        setUnit('microns')
-        break
-      case BridgingOption.CERAMIC_DISCS:
-        setMode(BridgingOption.CERAMIC_DISCS)
-        setUnit('microns')
-        setValue(CeramicDiscsValues[0])
-        break
-      default:
-        return
-    }
-  }
-
-  function onBridgeValueChange(value) {
-    const newBridgeValue = parseInt(value)
-    // TODO: Setting invalid values on parent is not good
-    setValue(newBridgeValue)
-
-    if (Math.sign(newBridgeValue) !== 1) {
-      setBridgeValueHelperText('Value must be an integer bigger than 0')
-      setBridgeValueVariant('error')
-      return
-    }
-
-    setBridgeValueVariant(undefined)
-    setBridgeValueHelperText(undefined)
-  }
-
-  return (
-      <div style={{ display: 'flex' }}>
-        <InputWrapper>
-          <Typography variant="h3">Bridging options</Typography>
-          <span>Bridging based on:</span>
-          <RadioWrapper>
-            <Radio
-                label="Permeability"
-                name="group"
-                value={BridgingOption.PERMEABILITY}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.PERMEABILITY}
-            />
-            <Radio
-                label="Average pore size/crack opening"
-                name="group"
-                value={BridgingOption.AVERAGE_PORESIZE}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.AVERAGE_PORESIZE}
-            />
-            <Tooltip text={'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'}>
-              <Radio
-                label="Max pore size/crack opening"
-                name="group"
-                value={BridgingOption.MAXIMUM_PORESIZE}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.MAXIMUM_PORESIZE}
-              />
-            </Tooltip>
-            <Radio
-                label="Ceramic Discs"
-                name="group"
-                value={BridgingOption.CERAMIC_DISCS}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.CERAMIC_DISCS}
-            />
-          </RadioWrapper>
-          <div style={{ width: '150px' }}>
-            {mode === BridgingOption.CERAMIC_DISCS ?
-                <div style={{display: 'flex', flexDirection: "column"}}>
-                  <label>Ceramic Discs Size</label>
-                  <StyledSelect onChange={event =>onBridgeValueChange(event.target.value)}>
-                    {CeramicDiscsValues.map((value, index)=>{
-                      return <option value={value} index={index+value}>{value}</option>
-                    })}
-                  </StyledSelect>
-                  <small style={{alignSelf: "flex-end"}}>microns</small>
-                </div>
-                :
-                <TextField
-                    label="Value"
-                    type="number"
-                    id="textfield-number"
-                    meta={unit}
-                    value={bridgeValue || 0}
-                    onChange={event=>onBridgeValueChange(event.target.value)}
-                    variant={bridgeValueVariant}
-                    helperText={bridgeValueHelperText}
-                />
-            }
-
-          </div>
-        </InputWrapper>
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions}/>
-        {optimalBridgeGraphData.length > 0 && <div>
-          <p>Optimal bridge:</p>
-          <p>D10: {findDValue(optimalBridgeGraphData, 10, "Bridge")}µ</p>
-          <p>D50: {findDValue(optimalBridgeGraphData, 50, "Bridge")}µ</p>
-          <p>D90: {findDValue(optimalBridgeGraphData, 90, "Bridge")}µ</p>
-        </div>}
-      </div>
-  )
-}
diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
new file mode 100644
index 0000000..ac27055
--- /dev/null
+++ b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -0,0 +1,134 @@
+import { useContext, useEffect, useState } from 'react'
+import { FractionsAPI } from '../../Api'
+import { BridgingOption, CeramicDiscsValues } from '../../Enums'
+import { AuthContext } from 'react-oauth2-code-pkce'
+import { ErrorToast } from '../Common/Toast'
+import InputContainer from './InputContainer'
+import { findGraphData } from '../../Utils'
+import { Bridge, GraphData } from '../../Types'
+import BridgeGraph from './Graphs/BridgeGraph'
+import { differentiateArrayObjects } from './utils'
+
+type BridgeContainerProps = {
+  bridges: Bridge
+  mode: BridgingOption
+  setMode: (mode: BridgingOption) => void
+  bridgeValue: number
+  setValue: (value: number) => void
+}
+
+export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContainerProps) => {
+  const [sizeFractions, setSizeFractions] = useState([])
+  const [unit, setUnit] = useState('mD')
+  const [bridgeValueHelperText, setBridgeValueHelperText] = useState(undefined)
+  const [bridgeValueVariant, setBridgeValueVariant] = useState(undefined)
+  const [optimalBridgeGraphData, setOptimalBridgeGraphData] = useState([])
+  const [volumeData, setVolumeData] = useState([])
+  const [cumulativeVolumeData, setCumulativeVolumeData] = useState([])
+  const { token } = useContext(AuthContext)
+
+  // Load size fractions once on first render
+  useEffect(() => {
+    FractionsAPI.getFractionsApi(token)
+      .then(response => {
+        setSizeFractions(response.data.size_fractions)
+      })
+      .catch(error => {
+        ErrorToast(`${error.response.data}`, error.response.status)
+        console.error('fetch error' + error)
+      })
+  }, [])
+
+  useEffect(() => {
+    if (bridges['Bridge'].length && sizeFractions.length) {
+      const x = findGraphData(sizeFractions, { Bridge: bridges['Bridge'] })
+      setOptimalBridgeGraphData(x)
+    }
+  }, [bridges, sizeFractions])
+
+  function onBridgeOptionChange(event) {
+    switch (event.target.value) {
+      case BridgingOption.PERMEABILITY:
+        setMode(BridgingOption.PERMEABILITY)
+        setUnit('mD')
+        break
+      case BridgingOption.AVERAGE_PORESIZE:
+        setMode(BridgingOption.AVERAGE_PORESIZE)
+        setUnit('microns')
+        break
+
+      case BridgingOption.MAXIMUM_PORESIZE:
+        setMode(BridgingOption.MAXIMUM_PORESIZE)
+        setUnit('microns')
+        break
+      case BridgingOption.CERAMIC_DISCS:
+        setMode(BridgingOption.CERAMIC_DISCS)
+        setUnit('microns')
+        setValue(parseInt(CeramicDiscsValues[0]))
+        break
+      default:
+        return
+    }
+  }
+
+  function onBridgeValueChange(value) {
+    const newBridgeValue = parseInt(value)
+    // TODO: Setting invalid values on parent is not good
+    setValue(newBridgeValue)
+
+    if (Math.sign(newBridgeValue) !== 1) {
+      setBridgeValueHelperText('Value must be an integer bigger than 0')
+      setBridgeValueVariant('error')
+      return
+    }
+
+    setBridgeValueVariant(undefined)
+    setBridgeValueHelperText(undefined)
+  }
+
+  useEffect(() => {
+    const cumulative = findGraphData(sizeFractions, bridges)
+    const differentiated = differentiateArrayObjects(cumulative)
+    setCumulativeVolumeData(cumulative)
+    setVolumeData(differentiated)
+  }, [sizeFractions, bridges])
+
+  return (
+    <div style={{ overflow: 'auto' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: 'white',
+          overflow: 'auto',
+          padding: '0.5rem',
+          borderRadius: '0.5rem',
+        }}
+      >
+        <InputContainer
+          mode={mode}
+          onBridgeOptionChange={onBridgeOptionChange}
+          onBridgeValueChange={onBridgeValueChange}
+          optimalBridgeGraphData={optimalBridgeGraphData}
+          unit={unit}
+          bridgeValue={bridgeValue}
+          bridgeValueVariant={bridgeValueVariant}
+          bridgeValueHelperText={bridgeValueHelperText}
+        />
+        <BridgeGraph
+          graphData={cumulativeVolumeData}
+          title={'Cumulative Frequency'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+        />
+        <BridgeGraph
+          graphData={volumeData}
+          title={'Relative Frequency'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+          showBridge={false}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/Components/Bridging/BridgeGraph.jsx b/web/src/Components/Bridging/BridgeGraph.jsx
deleted file mode 100644
index 8acc53b..0000000
--- a/web/src/Components/Bridging/BridgeGraph.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react'
-import { Area, AreaChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
-import { ParticleSizeContext } from "../../Context"
-import styled from 'styled-components'
-import { findGraphData } from '../../Utils'
-
-const colors = [
-  '#000000',
-  '#ee2e89',
-  '#21d0bb',
-  '#2077d9',
-  '#a1022f',
-  '#2bcb95',
-  '#64b3ec',
-  '#ef7895',
-  '#02953d',
-  '#044f78',
-]
-
-
-const TooltipCard = styled.div`
-  background: white;
-  border-style: solid;
-  border-color: silver;
-  border-width: 0.1px;
-  padding-left: 15px;
-  padding-right: 20px;
-  padding-bottom: 5px;
-`
-
-
-const CustomTooltip = ({ active, payload }) => {
-  if (active && payload && payload.length) {
-    const numMicrons = Math.round(payload[0].payload.size)
-    return (
-      <TooltipCard >
-        <p style={{ fontWeight: "500", marginLeft: '5px' }}> {numMicrons <= 1 ? 'Micron: ' : 'Microns: '} {numMicrons}</p>
-        {payload.map((payloadData) => {
-          return <p key={payloadData.name} style={{ color: payloadData.stroke, padding: '0px', margin: '5px' }}>{payloadData.name}: {Math.round(payloadData.value)}</p>
-        })}
-      </TooltipCard>
-    );
-  }
-
-  return null;
-}
-
-export function BridgeGraph({ bridges, sizeFractions }) {
-  const [graphData, setGraphData] = useState([])
-  const [particleFromPercentage, setParticleFromPercentage] = useState("")
-  const [particleToPercentage, setParticleToPercentage] = useState("")
-  const particleRange = useContext(ParticleSizeContext)
-
-  useEffect(() => {
-    setParticleFromPercentage(particleSizeOffsetPercentage(particleRange.from))
-    if (particleRange.to > sizeFractions[sizeFractions.length - 1]) {
-      setParticleToPercentage(sizeFractions[sizeFractions.length - 1])
-    } else {
-      setParticleToPercentage(particleSizeOffsetPercentage(particleRange.to))
-    }
-  }, [particleRange, sizeFractions])
-
-  function particleSizeOffsetPercentage(offsetSize) {
-    let index = sizeFractions.findIndex(size => size > offsetSize)
-    if (index === -1) return ""
-    let percentage = (index / sizeFractions.length) * 100
-    return `${parseInt(percentage)}%`
-  }
-
-  useEffect(() => {
-    let newGraphData = findGraphData(sizeFractions, bridges)
-    setGraphData(newGraphData)
-  }, [bridges, sizeFractions])
-
-  return (
-    <div style={{ paddingLeft: '5%' }}>
-      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={750} height={420}>
-        {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
-        <defs>
-          <linearGradient id="particleArea">
-            <stop offset={particleFromPercentage} stopColor="transparent" />
-            <stop offset={particleFromPercentage} stopColor="#E2DCDC" />
-            <stop offset={particleToPercentage} stopColor="#E2DCDC" />
-            <stop offset={particleToPercentage} stopColor="transparent" />
-          </linearGradient>
-        </defs>
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis
-          dataKey="size"
-          scale="log"
-          domain={[0.1, 10000]}
-          type="number"
-          ticks={[0.1, 1, 10, 100, 1000, 10000]}
-          label={{ value: 'microns', position: 'center', offset: 0 }}
-          height={70}
-        />
-        <YAxis type="number" domain={[0, 100]} ticks={[20, 40, 60, 80, 100]} allowDataOverflow />
-        <Tooltip content={<CustomTooltip />} />
-        <Legend />
-        {Object.entries(bridges).map(([name, cumulative], index) => (
-          <Area
-            type="monotone"
-            dataKey={name}
-            stroke={colors[index % colors.length]}
-            key={name}
-            fill={(name === "Bridge" && "url(#particleArea)") || "transparent"}
-            name={name}
-            strokeWidth={1.5}
-          />
-        ))}
-      </AreaChart>
-    </div>
-  )
-}
-
-export default BridgeGraph
diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
new file mode 100644
index 0000000..a2ac51b
--- /dev/null
+++ b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -0,0 +1,92 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { ParticleSizeContext } from '../../../Context'
+import { findGraphData } from '../../../Utils'
+import { bridgeColor, graphColors } from '../styles'
+import { Bridge, GraphData } from '../../../Types'
+import { Typography } from '@equinor/eds-core-react'
+
+type BridgeGraphProps = {
+  title: string
+  graphData: GraphData[]
+  sizeFractions: number[]
+  bridges: Bridge | undefined
+  showBridge?: boolean
+}
+
+export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
+  const [particleFromPercentage, setParticleFromPercentage] = useState<string>('0%')
+  const [particleToPercentage, setParticleToPercentage] = useState<string>('100%')
+  const particleRange = useContext(ParticleSizeContext)
+
+  useEffect(() => {
+    setParticleFromPercentage(particleSizeOffsetPercentage(particleRange.from))
+    if (particleRange.to > sizeFractions[sizeFractions.length - 1]) {
+      setParticleToPercentage(`${sizeFractions[sizeFractions.length - 1]}%`)
+    } else {
+      setParticleToPercentage(particleSizeOffsetPercentage(particleRange.to))
+    }
+  }, [particleRange, sizeFractions])
+
+  function particleSizeOffsetPercentage(offsetSize: number) {
+    const index = sizeFractions.findIndex(size => size > offsetSize)
+    if (index === -1) return '0%'
+    let percentage = (index / sizeFractions.length) * 100
+    return `${percentage}%`
+  }
+  const legendHeight = Math.max(Math.round(Object.entries(bridges).length / 3) * 20, 30)
+
+  if (!showBridge) {
+    const { Bridge, ...withoutBridge } = bridges
+    bridges = withoutBridge
+  }
+  return (
+    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
+      <Typography variant='h4' style={{ textAlign: 'center' }}>
+        {title}
+      </Typography>
+      <ResponsiveContainer height={500} minWidth={600}>
+        <AreaChart data={graphData} margin={{ top: 5, right: 30, bottom: 5 }}>
+          {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
+          <defs>
+            <linearGradient id='particleArea'>
+              <stop offset={particleFromPercentage} stopColor='transparent' />
+              <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='transparent' />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray='3 3' />
+
+          <XAxis
+            dataKey='size'
+            scale='log'
+            domain={[0.1, 10000]}
+            type='number'
+            ticks={[0.1, 1, 10, 100, 1000, 10000]}
+            label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
+            height={70}
+          />
+          <YAxis type='number' allowDataOverflow width={75} label={{ value: 'Volume (%)', angle: '270' }} />
+          <Tooltip />
+          <Legend verticalAlign='bottom' align='center' height={legendHeight} />
+          {Object.entries(bridges).map(([name, cumulative], index) => (
+            <Area
+              type='monotone'
+              dataKey={name}
+              stroke={
+                name === 'Bridge' ? bridgeColor : graphColors[(index - (showBridge ? 1 : 0)) % graphColors.length]
+              }
+              key={name}
+              fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
+              name={name}
+              strokeWidth={1.5}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+export default BridgeGraph
diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
new file mode 100644
index 0000000..dee2bb2
--- /dev/null
+++ b/web/src/Components/Bridging/InputContainer.tsx
@@ -0,0 +1,154 @@
+import { NativeSelect, Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react'
+import { InputWrapper, RadioWrapper, StyledSelect } from './styles'
+import { BridgingOption, CeramicDiscsValues } from '../../Enums'
+import { findDValue } from '../../Utils'
+import { GraphData } from '../../Types'
+import { Variants } from '@equinor/eds-core-react/dist/types/components/types'
+import { colors } from '../../colors'
+
+type InputContainerProps = {
+  mode: BridgingOption
+  onBridgeOptionChange: React.ChangeEventHandler<HTMLInputElement>
+  onBridgeValueChange: (value: string) => void
+  optimalBridgeGraphData: GraphData[]
+  unit: string
+  bridgeValue: number
+  bridgeValueVariant: Variants | undefined
+  bridgeValueHelperText: string
+}
+
+const InputLabels: { [key in BridgingOption]: string } = {
+  [BridgingOption.PERMEABILITY]: 'Permeability',
+  [BridgingOption.AVERAGE_PORESIZE]: 'Avg. Pore Size',
+  [BridgingOption.MAXIMUM_PORESIZE]: 'Max Pore Size',
+  [BridgingOption.CERAMIC_DISCS]: 'Disk Size',
+}
+
+const InputContainer = ({
+  mode,
+  onBridgeOptionChange,
+  onBridgeValueChange,
+  optimalBridgeGraphData,
+  unit,
+  bridgeValue,
+  bridgeValueVariant,
+  bridgeValueHelperText,
+}: InputContainerProps) => {
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        borderRadius: '0.5rem',
+        padding: '0.5rem',
+      }}
+    >
+      <InputWrapper>
+        <div
+          style={{
+            width: '180px',
+            border: '1px solid rgb(220, 220, 220)',
+            borderRadius: '0.5rem',
+            backgroundColor: `${colors.background}`,
+            padding: '0.5rem',
+          }}
+        >
+          <Typography variant='h3'>Bridging options</Typography>
+          <span>Bridging based on:</span>
+          <RadioWrapper>
+            <Radio
+              label='Permeability'
+              name='group'
+              value={BridgingOption.PERMEABILITY}
+              onChange={onBridgeOptionChange}
+              checked={mode === BridgingOption.PERMEABILITY}
+            />
+            <Radio
+              label='Average pore size/crack opening'
+              name='group'
+              value={BridgingOption.AVERAGE_PORESIZE}
+              onChange={onBridgeOptionChange}
+              checked={mode === BridgingOption.AVERAGE_PORESIZE}
+            />
+            <Tooltip
+              title={
+                'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'
+              }
+            >
+              <Radio
+                label='Max pore size/crack opening'
+                name='group'
+                value={BridgingOption.MAXIMUM_PORESIZE}
+                onChange={onBridgeOptionChange}
+                checked={mode === BridgingOption.MAXIMUM_PORESIZE}
+              />
+            </Tooltip>
+            <Radio
+              label='Ceramic Discs'
+              name='group'
+              value={BridgingOption.CERAMIC_DISCS}
+              onChange={onBridgeOptionChange}
+              checked={mode === BridgingOption.CERAMIC_DISCS}
+            />
+          </RadioWrapper>
+          <div style={{ width: '100%', margin: 'auto' }}>
+            {mode === BridgingOption.CERAMIC_DISCS ? (
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                {/* <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label> */}
+                <NativeSelect
+                  onChange={event => onBridgeValueChange(event.target.value)}
+                  id={'ceramic-disk-selector'}
+                  label={'Disk Size'}
+                  meta={'microns'}
+                >
+                  {CeramicDiscsValues.map((value, index) => {
+                    return (
+                      <option value={value} key={index + value}>
+                        {value}
+                      </option>
+                    )
+                  })}
+                </NativeSelect>
+                {/* <small style={{ alignSelf: 'flex-end' }}>microns</small> */}
+              </div>
+            ) : (
+              <TextField
+                label={InputLabels[mode]}
+                type='number'
+                id='textfield-number'
+                meta={unit}
+                value={bridgeValue || 0}
+                onChange={event => onBridgeValueChange(event.target.value)}
+                variant={bridgeValueVariant}
+                helperText={bridgeValueHelperText}
+              />
+            )}
+          </div>
+        </div>
+      </InputWrapper>
+      {optimalBridgeGraphData.length > 0 && (
+        <div
+          style={{
+            marginBlockStart: '2rem',
+            width: '180px',
+            border: '1px solid rgb(220, 220, 220)',
+            borderRadius: '0.5rem',
+            backgroundColor: `${colors.background}`,
+            padding: '0.5rem',
+          }}
+        >
+          <Typography variant='h3'>Optimal Bridge:</Typography>
+          <div style={{ marginInlineStart: '0.5rem' }}>
+            {[10, 50, 90].map(d => (
+              <p>
+                D{d}: {findDValue(optimalBridgeGraphData, d, 'Bridge')}
+                {'\u00B5m'}
+              </p>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default InputContainer
diff --git a/web/src/Components/Bridging/styles.ts b/web/src/Components/Bridging/styles.ts
new file mode 100644
index 0000000..b00cbf2
--- /dev/null
+++ b/web/src/Components/Bridging/styles.ts
@@ -0,0 +1,36 @@
+import { styled } from 'styled-components'
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px 5px;
+`
+
+export const RadioWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const StyledSelect = styled.select`
+  position: relative;
+  font-size: medium;
+  padding: 8px 16px;
+  border: 1px solid #dbdbdb;
+  cursor: pointer;
+  width: 150px;
+  background-color: #ffffff;
+`
+
+export const bridgeColor = '#000000'
+
+export const graphColors = [
+  '#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
new file mode 100644
index 0000000..0a5b90b
--- /dev/null
+++ b/web/src/Components/Bridging/utils.ts
@@ -0,0 +1,31 @@
+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
+    }
+
+    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))
+      }
+    })
+
+    return differentiatedObj
+  })
+}
diff --git a/web/src/Components/Combinations/CardContainer.tsx b/web/src/Components/Combinations/CardContainer.tsx
index 9464d76..368afc2 100644
--- a/web/src/Components/Combinations/CardContainer.tsx
+++ b/web/src/Components/Combinations/CardContainer.tsx
@@ -3,12 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import CombinationCard from './CombinationCard'
 // @ts-ignore
-import { Button } from '@equinor/eds-core-react'
+import { Button, Icon } from '@equinor/eds-core-react'
 import { Bridge, Combinations } from '../../Types'
-import Icon from '../../Icons'
 import { FractionsAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
 import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
+import { add } from '@equinor/eds-icons'
 export const Card = styled.div`
   margin: 10px;
   padding: 10px;
@@ -123,8 +123,8 @@ export const CardContainer = ({
             })
           }}
         >
-          <Icon name='add_box' title='add_box' />
-          Add combination
+          <Icon data={add} title='add_box' />
+          New combination
         </Button>
       </div>
     </>
diff --git a/web/src/Components/Combinations/CombinationCard.tsx b/web/src/Components/Combinations/CombinationCard.tsx
index f9e29f3..0ef043a 100644
--- a/web/src/Components/Combinations/CombinationCard.tsx
+++ b/web/src/Components/Combinations/CombinationCard.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Button, Icon, Switch, Input } from '@equinor/eds-core-react'
+import { Button, Icon, Switch, Input, Tooltip, Divider } from '@equinor/eds-core-react'
 import CombinationTable from './CombinationTable'
 import styled from 'styled-components'
 import { Card } from './CardContainer'
@@ -10,11 +10,13 @@ import { CombinationAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
 import { findDValue, findGraphData } from '../../Utils'
 import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
+import { edit, close, delete_to_trash } from '@equinor/eds-icons'
 
 const CardHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: self-end;
+  margin-bottom: 0.5rem;
 `
 
 const CardSummation = styled.div`
@@ -131,9 +133,11 @@ export const CombinationCard = ({
     <Card>
       <div>
         <CardHeader>
-          <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
-            <Icon name='edit' size={16} />
-          </Button>
+          <Tooltip title={isHeaderEditable ? 'Toggle edit off' : 'Edit combination title'}>
+            <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
+              <Icon data={edit} size={16} style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
           <Input
             id={`${combination.name}`}
             value={combinationName}
@@ -151,9 +155,11 @@ export const CombinationCard = ({
               }
             }}
           />
-          <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
-            <Icon name='close' title='close' />
-          </Button>
+          <Tooltip title={'Delete combination'}>
+            <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
+              <Icon data={delete_to_trash} title='close' style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
         </CardHeader>
         {Object.keys(enabledProducts).length ? (
           <div>
diff --git a/web/src/Components/Common/EditProducts.tsx b/web/src/Components/Common/EditProducts.tsx
index f7c558c..2773ff4 100644
--- a/web/src/Components/Common/EditProducts.tsx
+++ b/web/src/Components/Common/EditProducts.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 // @ts-ignore
 import { Button, Dialog, Icon, Scrim } from '@equinor/eds-core-react'
-import SelectProducts from '../SelectProducts'
+import SelectProducts from './SelectProducts'
 import { Products } from '../../Types'
 
 interface AddProductsProps {
diff --git a/web/src/Components/SelectProducts.tsx b/web/src/Components/Common/SelectProducts.tsx
similarity index 97%
rename from web/src/Components/SelectProducts.tsx
rename to web/src/Components/Common/SelectProducts.tsx
index 8a82009..b013a62 100644
--- a/web/src/Components/SelectProducts.tsx
+++ b/web/src/Components/Common/SelectProducts.tsx
@@ -3,9 +3,9 @@ import React, { ReactElement } from 'react'
 import { Checkbox, Chip, Switch, Typography } from '@equinor/eds-core-react'
 // @ts-ignore
 import styled from 'styled-components'
-import { Products, Product } from '../Types'
-import useLocalStorage from '../Hooks'
-import { sortProducts } from '../Utils'
+import { Products, Product } from '../../Types'
+import useLocalStorage from '../../Hooks'
+import { sortProducts } from '../../Utils'
 
 const ChipBox = styled.div`
   display: flex;
diff --git a/web/src/Components/Common/Tooltip.tsx b/web/src/Components/Common/Tooltip.tsx
index 0140a52..6edf755 100644
--- a/web/src/Components/Common/Tooltip.tsx
+++ b/web/src/Components/Common/Tooltip.tsx
@@ -3,7 +3,7 @@ import React, { ReactElement } from 'react'
 // @ts-ignore
 import { Tooltip as EDSTooltip, Icon } from '@equinor/eds-core-react'
 import { help_outline } from '@equinor/eds-icons'
-import { COLORS } from '../../Enums'
+import { colors } from '../../colors'
 
 const Wrapper = styled.div`
   justify-content: center;
@@ -29,7 +29,7 @@ export const Tooltip = ({ text, children }: TooltipProps): ReactElement => {
       {children}
       <EDSTooltip title={text} placement={'top-end'}>
         <Wrapper>
-          <Icon data={help_outline} size={18} style={{ color: COLORS.secondary }} />
+          <Icon data={help_outline} size={18} style={{ color: colors.secondary }} />
         </Wrapper>
       </EDSTooltip>
     </TooltipWrapper>
diff --git a/web/src/Components/CombinationsWrapper.tsx b/web/src/Components/MainBody.tsx
similarity index 66%
rename from web/src/Components/CombinationsWrapper.tsx
rename to web/src/Components/MainBody.tsx
index e477ebf..1922fa7 100644
--- a/web/src/Components/CombinationsWrapper.tsx
+++ b/web/src/Components/MainBody.tsx
@@ -3,7 +3,7 @@ import CardContainer from './Combinations/CardContainer'
 import OptimizationContainer from './Optimization/OptimizationContainer'
 import React, { ReactElement, useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Accordion, Button } from '@equinor/eds-core-react'
+import { Accordion, Button, Icon, Typography } from '@equinor/eds-core-react'
 import { BridgeAPI, CombinationAPI } from '../Api'
 // @ts-ignore
 import styled from 'styled-components'
@@ -12,16 +12,18 @@ import { ErrorToast } from './Common/Toast'
 import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce'
 import { Bridge, Combination, Combinations, Products } from '../Types'
 import useLocalStorage from '../Hooks'
+import { colors } from '../colors'
+import { delete_to_trash, visibility_off } from '@equinor/eds-icons'
 
 const MainComponentsWrapper = styled.div`
   padding: 16px 0 16px 0;
 `
 
-export interface CombinationsWrapperProps {
+export interface MainBodyProps {
   products: Products
 }
 
-export default ({ products }: CombinationsWrapperProps): ReactElement => {
+export default ({ products }: MainBodyProps): ReactElement => {
   const [mode, setMode] = useState<BridgingOption>(BridgingOption.PERMEABILITY)
   const [bridgeValue, setBridgeValue] = useState<number>(500)
   const [combinations, setCombinations] = useLocalStorage<any>('combinations', {})
@@ -154,55 +156,66 @@ export default ({ products }: CombinationsWrapperProps): ReactElement => {
           setValue={setBridgeValue}
         />
       </MainComponentsWrapper>
-      <MainComponentsWrapper>
-        <Button
-          onClick={() => setBridges({ Bridge: bridges.Bridge })}
-          color='danger'
-          variant='ghost'
-          style={{ maxWidth: '130px' }}
-        >
-          Clear Plot
-        </Button>
-        <Button style={{ marginLeft: '20px' }} onClick={() => resetCombinations()} color='danger' variant='ghost'>
-          Delete combinations
-        </Button>
-      </MainComponentsWrapper>
-      <MainComponentsWrapper>
-        <Accordion>
-          <Accordion.Item>
-            <Accordion.Header>Concentration blends</Accordion.Header>
-            <Accordion.Panel style={{ overflow: 'auto', backgroundColor: '#f7f7f7' }}>
-              <CardContainer
-                sacks={false}
-                combinations={combinations}
-                products={products}
-                updateCombination={updateCombinationAndFetchBridge}
-                renameCombination={renameCombination}
-                addCombination={addCombination}
-                removeCombination={removeCombination}
-                removeBridge={removeBridge}
-                bridges={bridges}
-              />
-            </Accordion.Panel>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>Sack blends</Accordion.Header>
-            <Accordion.Panel style={{ overflow: 'auto', backgroundColor: '#f7f7f7' }}>
-              <CardContainer
-                sacks={true}
-                combinations={combinations}
-                products={products}
-                updateCombination={updateCombinationAndFetchBridge}
-                renameCombination={renameCombination}
-                removeCombination={removeCombination}
-                addCombination={addCombination}
-                removeBridge={removeBridge}
-                bridges={bridges}
-              />
-            </Accordion.Panel>
-          </Accordion.Item>
-        </Accordion>
-      </MainComponentsWrapper>
+      <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', padding: '0.5rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant={'h3'}>Blends</Typography>
+            {/* <Icon style={{ cursor: 'pointer', paddingLeft: '5px' }} data={info_circle} /> */}
+          </div>
+          <div style={{ display: 'flex' }}>
+            <Button
+              onClick={() => setBridges({ Bridge: bridges.Bridge })}
+              color='danger'
+              variant='ghost'
+              style={{ maxWidth: '130px' }}
+            >
+              <Icon data={visibility_off} />
+              Hide blends
+            </Button>
+            <Button style={{ marginLeft: '20px' }} onClick={() => resetCombinations()} color='danger' variant='ghost'>
+              <Icon data={delete_to_trash} />
+              Delete blends
+            </Button>
+          </div>
+        </div>
+
+        <div style={{ padding: '0.5rem 0px 0.5rem 0px' }}>
+          <Accordion>
+            <Accordion.Item>
+              <Accordion.Header>Concentration blends</Accordion.Header>
+              <Accordion.Panel style={{ overflow: 'auto', backgroundColor: `${colors.background}` }}>
+                <CardContainer
+                  sacks={false}
+                  combinations={combinations}
+                  products={products}
+                  updateCombination={updateCombinationAndFetchBridge}
+                  renameCombination={renameCombination}
+                  addCombination={addCombination}
+                  removeCombination={removeCombination}
+                  removeBridge={removeBridge}
+                  bridges={bridges}
+                />
+              </Accordion.Panel>
+            </Accordion.Item>
+            <Accordion.Item>
+              <Accordion.Header>Sack blends</Accordion.Header>
+              <Accordion.Panel style={{ overflow: 'auto', backgroundColor: '#f7f7f7' }}>
+                <CardContainer
+                  sacks={true}
+                  combinations={combinations}
+                  products={products}
+                  updateCombination={updateCombinationAndFetchBridge}
+                  renameCombination={renameCombination}
+                  removeCombination={removeCombination}
+                  addCombination={addCombination}
+                  removeBridge={removeBridge}
+                  bridges={bridges}
+                />
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+        </div>
+      </div>
       <MainComponentsWrapper>
         {/* @ts-ignore*/}
         <OptimizationContainer
diff --git a/web/src/Components/ContactButton.tsx b/web/src/Components/Navbar/ContactButton.tsx
similarity index 92%
rename from web/src/Components/ContactButton.tsx
rename to web/src/Components/Navbar/ContactButton.tsx
index 5aab355..8be1671 100644
--- a/web/src/Components/ContactButton.tsx
+++ b/web/src/Components/Navbar/ContactButton.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 // @ts-ignore
 import { Button, Dialog, Icon } from '@equinor/eds-core-react'
+import { comment_important } from '@equinor/eds-icons'
 
 export const ContactButton = () => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -8,7 +9,7 @@ export const ContactButton = () => {
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='comment_important' title='filter products' />
+        <Icon data={comment_important} title='filter products' />
         Contact
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen}>
diff --git a/web/src/Components/Navbar/Navbar.tsx b/web/src/Components/Navbar/Navbar.tsx
new file mode 100644
index 0000000..276861e
--- /dev/null
+++ b/web/src/Components/Navbar/Navbar.tsx
@@ -0,0 +1,43 @@
+import { Button, Icon, TopBar, Typography } from '@equinor/eds-core-react'
+import RefreshButton from './RefreshButton'
+import { ContactButton } from './ContactButton'
+import { info_circle } from '@equinor/eds-icons'
+import { StyledLink } from './styles'
+
+const Navbar = () => {
+  return (
+    <TopBar>
+      <TopBar.Header>
+        <Typography variant='h2'>LCM Optimizer</Typography>
+      </TopBar.Header>
+      <TopBar.Actions>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, fit-content(100%))',
+            gap: '16px',
+          }}
+        >
+          <div>
+            <StyledLink
+              href='https://statoilsrm.sharepoint.com/sites/LCMlibrary/Lists/Product'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Button variant='outlined'>
+                <Icon data={info_circle} title='info_circle' />
+                LCM Library SharePoint
+              </Button>
+            </StyledLink>
+          </div>
+          <RefreshButton />
+          <div>
+            <ContactButton />
+          </div>
+        </div>
+      </TopBar.Actions>
+    </TopBar>
+  )
+}
+
+export default Navbar
diff --git a/web/src/Components/RefreshButton.tsx b/web/src/Components/Navbar/RefreshButton.tsx
similarity index 90%
rename from web/src/Components/RefreshButton.tsx
rename to web/src/Components/Navbar/RefreshButton.tsx
index 1dfdc3c..a6886b0 100644
--- a/web/src/Components/RefreshButton.tsx
+++ b/web/src/Components/Navbar/RefreshButton.tsx
@@ -1,13 +1,13 @@
 import React, { useContext, useState } from 'react'
 // @ts-ignore
-import { Button, Dialog, CircularProgress } from '@equinor/eds-core-react'
+import { Button, Dialog, CircularProgress, Icon } from '@equinor/eds-core-react'
 
-import { SyncAPI } from '../Api'
+import { SyncAPI } from '../../Api'
 import styled from 'styled-components'
-import { ErrorToast } from './Common/Toast'
+import { ErrorToast } from '../Common/Toast'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import Icon from '../Icons'
 import { IAuthContext } from 'react-oauth2-code-pkce'
+import { refresh } from '@equinor/eds-icons'
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -36,7 +36,7 @@ export const RefreshButton = () => {
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='refresh' title='refresh' />
+        <Icon data={refresh} title='refresh' />
         Synchronize with SharePoint
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen} isDismissable={true}>
diff --git a/web/src/Components/Navbar/styles.ts b/web/src/Components/Navbar/styles.ts
new file mode 100644
index 0000000..d1721f7
--- /dev/null
+++ b/web/src/Components/Navbar/styles.ts
@@ -0,0 +1,8 @@
+import { styled } from 'styled-components'
+
+export const StyledLink = styled.a`
+  color: #007079;
+  font-size: 16px;
+  line-height: 20px;
+  text-decoration-line: underline;
+`
diff --git a/web/src/Components/Optimization/OptimizationResult.tsx b/web/src/Components/Optimization/OptimizationResult.tsx
index 398f7c2..9def0f8 100644
--- a/web/src/Components/Optimization/OptimizationResult.tsx
+++ b/web/src/Components/Optimization/OptimizationResult.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import SolutionData from '../Solution/SolutionData'
 import SolutionVisualisations from '../Solution/SolutionVisualisations'
 import { Products } from '../../Types'
diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx
index a2ced34..92c847a 100644
--- a/web/src/Components/Optimization/OptimizationRunner.tsx
+++ b/web/src/Components/Optimization/OptimizationRunner.tsx
@@ -3,7 +3,7 @@ import PillInput, { Pill } from './PillInput'
 import { Weight, WeightOptions } from './WeightOptions'
 import React, { ReactElement, useContext, useState } from 'react'
 // @ts-ignore
-import { Accordion, Button, CircularProgress, TextField, Typography, Dialog } from '@equinor/eds-core-react'
+import { Accordion, Button, CircularProgress, TextField, Typography, Dialog, Icon } from '@equinor/eds-core-react'
 import { Products } from '../../Types'
 import styled from 'styled-components'
 import { Tooltip } from '../Common/Tooltip'
@@ -11,12 +11,12 @@ import { ErrorToast } from '../Common/Toast'
 import { ParticleSizeContext } from '../../Context'
 import EditProducts from '../Common/EditProducts'
 import useLocalStorage from '../../Hooks'
-import Icon from '../../Icons'
 import numberOfProductsFitnessFormulaImg from './FormulaPictures/NumberOfProductsFitnessFormula.png'
 import totalFitnessFormulaImg from './FormulaPictures/TotalFitnessFormula.png'
 import MassFitnessFormulaImg from './FormulaPictures/MassFitnessFormula.png'
 import BridgeFitnessFormulaImg from './FormulaPictures/BridgeFitnessFormula.png'
 import { AuthContext } from 'react-oauth2-code-pkce'
+import { info_circle, play } from '@equinor/eds-icons'
 
 const { Actions, Title, CustomContent } = Dialog
 
@@ -33,7 +33,9 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: space-between;
   min-height: 250px;
-  width: fit-content;
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
 `
 
 const InputWrapper = styled.div`
@@ -98,81 +100,95 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
 
   return (
     <Wrapper>
-      <Typography variant='h3' style={{ paddingBottom: '2rem' }}>
-        Optimizer
+      <div style={{ display: 'flex', alignItems: 'center', paddingBlockEnd: '2rem' }}>
+        <Typography variant='h3'>Optimizer</Typography>
         <Icon
           style={{ cursor: 'pointer', paddingLeft: '5px' }}
-          name='info_circle'
+          data={info_circle}
           onClick={() => setDialogOpen(true)}
         />
-        <Dialog style={{ width: 'auto' }} open={dialogOpen}>
-          <Dialog.Header>
-            <Dialog.Title>Formulas used in optimizer</Dialog.Title>
-          </Dialog.Header>
-          <Dialog.CustomContent>
-            <table style={{ border: '50px' }}>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Total fitness – weighted average:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={totalFitnessFormulaImg} alt='Formula for total fitness' height={53} width={240}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Bridge fitness – standard deviation:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={BridgeFitnessFormulaImg} alt='Formula for total fitness' height={94} width={337}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Mass fitness – deviation from desired mass:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={MassFitnessFormulaImg} alt='Formula for total fitness' height={60} width={270}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Number of products fitness:</th>
-                <th style={{ padding: '10px' }}>
-                  <img
-                    src={numberOfProductsFitnessFormulaImg}
-                    alt='Formula for total fitness'
-                    height={52}
-                    width={270}
-                  ></img>
-                </th>
-              </tr>
-            </table>
-          </Dialog.CustomContent>
-          <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
-            <Button onClick={() => setDialogOpen(false)}>Close</Button>
-          </Dialog.Actions>
-        </Dialog>
-      </Typography>
+      </div>
+      <Dialog style={{ width: 'auto' }} open={dialogOpen}>
+        <Dialog.Header>
+          <Dialog.Title>Formulas used in optimizer</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.CustomContent>
+          <table style={{ border: '50px' }}>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Total fitness – weighted average:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={totalFitnessFormulaImg} alt='Formula for total fitness' height={53} width={240}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Bridge fitness – standard deviation:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={BridgeFitnessFormulaImg} alt='Formula for total fitness' height={94} width={337}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Mass fitness – deviation from desired mass:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={MassFitnessFormulaImg} alt='Formula for total fitness' height={60} width={270}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Number of products fitness:</th>
+              <th style={{ padding: '10px' }}>
+                <img
+                  src={numberOfProductsFitnessFormulaImg}
+                  alt='Formula for total fitness'
+                  height={52}
+                  width={270}
+                ></img>
+              </th>
+            </tr>
+          </table>
+        </Dialog.CustomContent>
+        <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
+          <Button onClick={() => setDialogOpen(false)}>Close</Button>
+        </Dialog.Actions>
+      </Dialog>
       <div style={{ display: 'flex' }}>
-        <InputWrapper>
-          <Typography variant='body_short'>Pill</Typography>
-          <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
-        </InputWrapper>
-        <InputWrapper>
-          <Typography variant='body_short'>Products</Typography>
-          <div
-            style={{
-              border: '1px solid #DCDCDC',
-              maxHeight: '300px',
-              minHeight: '100px',
-              overflow: 'auto',
-              margin: '10px 0',
-            }}
-          >
-            {Object.values(products).map((product: any) => {
-              return (
-                <Typography key={product.id} variant='body_short'>
-                  {product.title}
-                </Typography>
-              )
-            })}
+        <div>
+          <div style={{ display: 'flex' }}>
+            <InputWrapper>
+              <Typography variant='body_short'>Products</Typography>
+              <div
+                style={{
+                  border: '1px solid #DCDCDC',
+                  maxHeight: '300px',
+                  minHeight: '100px',
+                  overflow: 'auto',
+                  margin: '10px 0',
+                  backgroundColor: '#f5f5f5',
+                  borderRadius: '4px',
+                  padding: '4px',
+                }}
+              >
+                {Object.values(products).map((product: any) => {
+                  return (
+                    <Typography key={product.id} variant='body_short'>
+                      {product.title}
+                    </Typography>
+                  )
+                })}
+              </div>
+              <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
+            </InputWrapper>
+            <InputWrapper>
+              <Typography variant='body_short'>Pill</Typography>
+              <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
+            </InputWrapper>
           </div>
-          <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
-        </InputWrapper>
+          <div style={{ display: 'flex', padding: '16px 0' }}>
+            <Button onClick={() => handleOptimize()} disabled={loading || invalidInput || iterations <= 0}>
+              <Icon data={play} title='play' />
+              Run optimizer
+            </Button>
+            {loading && <CircularProgress style={{ padding: '0 15px', height: '35px', width: '35px' }} />}
+          </div>
+        </div>
         <InputWrapper>
           <Accordion style={{ paddingTop: '10px' }}>
             <Accordion.Item>
@@ -264,13 +280,6 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           </Accordion>
         </InputWrapper>
       </div>
-      <div style={{ display: 'flex', padding: '16px 0' }}>
-        <Button onClick={() => handleOptimize()} disabled={loading || invalidInput || iterations <= 0}>
-          <Icon name='play' title='play' />
-          Run optimizer
-        </Button>
-        {loading && <CircularProgress style={{ padding: '0 15px', height: '35px', width: '35px' }} />}
-      </div>
 
       {failedRun && <p style={{ color: 'red' }}>Failed to run the optimizer</p>}
     </Wrapper>
diff --git a/web/src/Components/Optimization/styles.ts b/web/src/Components/Optimization/styles.ts
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/Components/Solution/SolutionData.tsx b/web/src/Components/Solution/SolutionData.tsx
index 0098f7e..7378a39 100644
--- a/web/src/Components/Solution/SolutionData.tsx
+++ b/web/src/Components/Solution/SolutionData.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement, useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Button, Typography, CircularProgress } from '@equinor/eds-core-react'
+import { Button, Typography, CircularProgress, Icon } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { ProductResult } from '../Optimization/OptimizationContainer'
 import { Products } from '../../Types'
 import { ReportAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
-import Icon from '../../Icons'
 import { AuthContext } from 'react-oauth2-code-pkce'
+import { save } from '@equinor/eds-icons'
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -124,7 +124,7 @@ const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
       </div>
       <div style={{ display: 'flex', paddingTop: '20px' }}>
         <Button onClick={() => onExportClick()} style={{ width: '170px' }} disabled={loading}>
-          <Icon name='save' title='export' />
+          <Icon data={save} title='export' />
           Export solution
         </Button>
 
diff --git a/web/src/Enums.ts b/web/src/Enums.ts
index 8a8f7bf..9dd34e8 100644
--- a/web/src/Enums.ts
+++ b/web/src/Enums.ts
@@ -5,9 +5,4 @@ export enum BridgingOption {
   CERAMIC_DISCS = 'CERAMIC_DISCS',
 }
 
-export enum COLORS {
-  primary = 'black',
-  secondary = '#017078',
-}
-
 export const CeramicDiscsValues = ['10', '12', '20', '40', '50', '55', '120']
diff --git a/web/src/Icons.ts b/web/src/Icons.ts
deleted file mode 100644
index 9ddf61b..0000000
--- a/web/src/Icons.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// @ts-ignore
-import { Icon } from '@equinor/eds-core-react'
-// @ts-ignore
-import { comment_important, edit, filter_alt, info_circle, refresh, add_box, save, play } from '@equinor/eds-icons'
-
-Icon.add({
-  play,
-  filter_alt,
-  info_circle,
-  refresh,
-  edit,
-  comment_important,
-  add_box,
-  save,
-})
-
-export default Icon
diff --git a/web/src/Pages/Main.tsx b/web/src/Pages/Main.tsx
index 5547f31..077883a 100644
--- a/web/src/Pages/Main.tsx
+++ b/web/src/Pages/Main.tsx
@@ -1,33 +1,23 @@
 // @ts-ignore
-import React, { ReactElement, useContext, useEffect, useState } from 'react'
+import { ReactElement, useContext, useEffect, useState } from 'react'
 // @ts-ignore
 import styled from 'styled-components'
 // @ts-ignore
-import { Button, Icon, TopBar, Typography } from '@equinor/eds-core-react'
-
-import RefreshButton from '../Components/RefreshButton'
 import { ProductsAPI } from '../Api'
-import CombinationsWrapper from '../Components/CombinationsWrapper'
+import Body from '../Components/MainBody'
 import { Products } from '../Types'
 import { ErrorToast } from '../Components/Common/Toast'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import { ContactButton } from '../Components/ContactButton'
 import { IAuthContext } from 'react-oauth2-code-pkce'
-import { info_circle, open_in_browser } from '@equinor/eds-icons'
+import Navbar from '../Components/Navbar/Navbar'
 
-const Body = styled.div`
+const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: 3%;
-  padding-right: 3%;
+  padding-left: 1rem;
+  padding-right: 1rem;
   font-family: 'Equinor';
 `
-const StyledLink = styled.a`
-  color: #007079;
-  font-size: 16px;
-  line-height: 20px;
-  text-decoration-line: underline;
-`
 
 export default (): ReactElement => {
   const [products, setProducts] = useState<Products>({})
@@ -47,41 +37,11 @@ export default (): ReactElement => {
 
   return (
     <>
-      <TopBar>
-        <TopBar.Header>
-          <Typography variant='h2'>LCM Optimizer</Typography>
-        </TopBar.Header>
-        <TopBar.Actions>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(3, fit-content(100%))',
-              gap: '16px',
-            }}
-          >
-            <div>
-              <StyledLink
-                href='https://statoilsrm.sharepoint.com/sites/LCMlibrary/Lists/Product'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <Button variant='outlined'>
-                  <Icon data={info_circle} title='info_circle' />
-                  LCM Library SharePoint
-                </Button>
-              </StyledLink>
-            </div>
-            <RefreshButton />
-            <div>
-              <ContactButton />
-            </div>
-          </div>
-        </TopBar.Actions>
-      </TopBar>
-      <Body>
+      <Navbar />
+      <BodyWrapper>
         {/* @ts-ignore*/}
-        <CombinationsWrapper products={products} />
-      </Body>
+        <Body products={products} />
+      </BodyWrapper>
     </>
   )
 }
diff --git a/web/src/colors.ts b/web/src/colors.ts
new file mode 100644
index 0000000..a333723
--- /dev/null
+++ b/web/src/colors.ts
@@ -0,0 +1,5 @@
+export const colors = {
+  primary: '#black',
+  secondary: '#017078',
+  background: '#f7f7f7',
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index 0ba4a9e..967a445 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1109,13 +1109,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.22.15", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
   integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1266,7 +1273,7 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
-"@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -1278,10 +1285,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/unitless@^0.8.0":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
-  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+"@emotion/unitless@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
 "@equinor/eds-core-react@^0.34.0":
   version "0.34.0"
@@ -1721,28 +1728,28 @@
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@react-aria/ssr@^3.5.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.0.tgz#457310129e1447b09d2f4aa2fdd62ab0e668d88c"
-  integrity sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.2.tgz#01b756965cd6e32b95217f968f513eb3bd6ee44b"
+  integrity sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==
   dependencies:
     "@swc/helpers" "^0.5.0"
 
-"@remix-run/router@1.13.1":
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e"
-  integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==
+"@remix-run/router@1.15.3":
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
+  integrity sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==
 
 "@restart/hooks@^0.4.9":
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.11.tgz#8876ccce1d4ad2a4b793a31689d63df36cf56088"
-  integrity sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==
+  version "0.4.16"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.16.tgz#95ae8ac1cc7e2bd4fed5e39800ff85604c6d59fb"
+  integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==
   dependencies:
     dequal "^2.0.3"
 
-"@restart/ui@^1.6.6":
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.6.6.tgz#3481e2eaf15d7cae55bb2f518624e10d19c75800"
-  integrity sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==
+"@restart/ui@^1.6.8":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.6.8.tgz#61b73503d4690e2f0f58992d4d6ae1e89c276791"
+  integrity sha512-6ndCv3oZ7r9vuP1Ok9KH55TM1/UkdBnP/fSraW0DFDMbPMzWKhVKeFAIEUCRCSdzayjZDcFYK6xbMlipN9dmMA==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@popperjs/core" "^2.11.6"
@@ -1929,9 +1936,9 @@
     loader-utils "^2.0.0"
 
 "@swc/helpers@^0.5.0":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.3.tgz#98c6da1e196f5f08f977658b80d6bd941b5f294f"
-  integrity sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.8.tgz#65d56b1961487fd99795ffd8c68edb7a591571fb"
+  integrity sha512-lruDGw3pnfM3wmZHeW7JuhkGQaJjPyiKjxeGhdmfoOT53Ic9qb5JLDNaK2HUdl1zLDeX28H221UvKjfdvSLVMg==
   dependencies:
     tslib "^2.4.0"
 
@@ -2043,9 +2050,9 @@
     "@types/d3-color" "*"
 
 "@types/d3-path@*":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.2.tgz#4327f4a05d475cf9be46a93fc2e0f8d23380805a"
-  integrity sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
+  integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
 
 "@types/d3-path@^1":
   version "1.0.11"
@@ -2212,13 +2219,20 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@^20.10.3":
+"@types/node@*":
   version "20.10.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.3.tgz#4900adcc7fc189d5af5bb41da8f543cea6962030"
   integrity sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^20.10.3":
+  version "20.12.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.4.tgz#af5921bd75ccdf3a3d8b3fa75bf3d3359268cd11"
+  integrity sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -2230,9 +2244,9 @@
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
 "@types/prop-types@*":
-  version "15.7.11"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
-  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
 "@types/q@^1.5.1":
   version "1.5.8"
@@ -2250,9 +2264,9 @@
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
 "@types/react-dom@^18.2.17":
-  version "18.2.17"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64"
-  integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==
+  version "18.2.24"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.24.tgz#8dda8f449ae436a7a6e91efed8035d4ab03ff759"
+  integrity sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==
   dependencies:
     "@types/react" "*"
 
@@ -2274,25 +2288,24 @@
     "@types/react" "*"
 
 "@types/react-transition-group@^4.4.6":
-  version "4.4.9"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
-  integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
   dependencies:
     "@types/react" "*"
 
 "@types/react@*", "@types/react@>=16.9.11", "@types/react@^18.2.41":
-  version "18.2.41"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.41.tgz#9eea044246bdb10510df89ef7f8422a8b6ad8fb9"
-  integrity sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==
+  version "18.2.74"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.74.tgz#2d52eb80e4e7c4ea8812c89181d6d590b53f958c"
+  integrity sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/recharts@^1.8.28":
-  version "1.8.28"
-  resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.28.tgz#2e4a4468e4390c5db8d822783f925d6e80ae8297"
-  integrity sha512-31D+dVBdVMtBnRMOjfM9210oRsclujQetwDNnCfapy/gF1BruvQkiK9WZ2ZMqDZY2xnDpIV8sWjISBcY+wgkLw==
+  version "1.8.29"
+  resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.29.tgz#5e117521a65bf015b808350b45b65553ff5011f3"
+  integrity sha512-ulKklaVsnFIIhTQsQw226TnOibrddW1qUQNFVhoQEyY1Z7FRQrNecFCGt7msRuJseudzE9czVawZb17dK/aPXw==
   dependencies:
     "@types/d3-shape" "^1"
     "@types/react" "*"
@@ -2309,11 +2322,6 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/scheduler@*":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
 "@types/semver@^7.3.12":
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
@@ -2356,18 +2364,18 @@
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
 "@types/styled-components@^5.1.32":
-  version "5.1.32"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.32.tgz#58718971519c4562229ba85face98e8530d21bfd"
-  integrity sha512-DqVpl8R0vbhVSop4120UHtGrFmHuPeoDwF4hDT0kPJTY8ty0SI38RV3VhCMsWigMUXG+kCXu7vMRqMFNy6eQgA==
+  version "5.1.34"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
+  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
     csstype "^3.0.2"
 
-"@types/stylis@^4.0.2":
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.4.tgz#14b61f022e832d87d442ae1795e0f0f0b7daa879"
-  integrity sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==
+"@types/stylis@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
+  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
 
 "@types/trusted-types@^2.0.2":
   version "2.0.7"
@@ -2970,11 +2978,11 @@ axe-core@=4.7.0:
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
 axios@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
-  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
+  integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
   dependencies:
-    follow-redirects "^1.15.0"
+    follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
@@ -3384,9 +3392,9 @@ cjs-module-lexer@^1.0.0:
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
 classnames@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 clean-css@^5.2.2:
   version "5.3.3"
@@ -3410,9 +3418,9 @@ clsx@^1.1.1:
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
 clsx@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
-  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
 co@^4.6.0:
   version "4.6.0"
@@ -3720,7 +3728,7 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
-css-to-react-native@^3.2.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
@@ -3838,11 +3846,16 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2, csstype@^3.1.2:
+csstype@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
@@ -4102,13 +4115,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
 dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@@ -4782,7 +4788,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-equals@^5.0.0:
+fast-equals@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
   integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
@@ -4922,11 +4928,16 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
-follow-redirects@^1.0.0, follow-redirects@^1.15.0:
+follow-redirects@^1.0.0:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
   integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
+follow-redirects@^1.15.6:
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -6605,7 +6616,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6808,7 +6819,7 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.7:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -7760,6 +7771,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.35:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
@@ -7768,7 +7788,7 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.4:
+postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
   integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -7943,13 +7963,13 @@ react-app-polyfill@^3.0.0:
     whatwg-fetch "^3.6.2"
 
 react-bootstrap@^2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.9.1.tgz#c1ab48ae2b2cfe6d5ac957c2042eb36fcafdb1d2"
-  integrity sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.10.2.tgz#3b609eb0170e31b3d9ace297d3a016c202a42642"
+  integrity sha512-UvB7mRqQjivdZNxJNEA2yOQRB7L9N43nBnKc33K47+cH90/ujmnMwatTCwQLu83gLhrzAl8fsa6Lqig/KLghaA==
   dependencies:
     "@babel/runtime" "^7.22.5"
     "@restart/hooks" "^0.4.9"
-    "@restart/ui" "^1.6.6"
+    "@restart/ui" "^1.6.8"
     "@types/react-transition-group" "^4.4.6"
     classnames "^2.3.2"
     dom-helpers "^5.2.1"
@@ -8024,9 +8044,9 @@ react-lifecycles-compat@^3.0.4:
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
 react-oauth2-code-pkce@^1.15.2:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/react-oauth2-code-pkce/-/react-oauth2-code-pkce-1.15.2.tgz#d01b7d07b3e02ee4fe3a476f47ac075ecdb1806f"
-  integrity sha512-gSeAtXt87MTjMKYi58I/pFalER29Gj6TkG6ukeogQyLSRfILQgmP3xKlacBJYomC5IWFQO+xsxSdYNrn2nW6lA==
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/react-oauth2-code-pkce/-/react-oauth2-code-pkce-1.17.2.tgz#a36fff30e33c131ed6bcdeeb7094536afad88448"
+  integrity sha512-CIuvKlOr0r390NTvtEXSTCrNuGz7pu+Omf3LOcsEGuhvuLze3G4i7RjYVsqLjWALdvy40Wv3q5PV+qTbIryBoQ==
 
 react-refresh@^0.11.0:
   version "0.11.0"
@@ -8034,19 +8054,19 @@ react-refresh@^0.11.0:
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
 react-router-dom@^6.20.1:
-  version "6.20.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984"
-  integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==
+  version "6.22.3"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
+  integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
   dependencies:
-    "@remix-run/router" "1.13.1"
-    react-router "6.20.1"
+    "@remix-run/router" "1.15.3"
+    react-router "6.22.3"
 
-react-router@6.20.1:
-  version "6.20.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef"
-  integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==
+react-router@6.22.3:
+  version "6.22.3"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.3.tgz#9d9142f35e08be08c736a2082db5f0c9540a885e"
+  integrity sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==
   dependencies:
-    "@remix-run/router" "1.13.1"
+    "@remix-run/router" "1.15.3"
 
 react-scripts@^5.0.1:
   version "5.0.1"
@@ -8103,13 +8123,14 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react-smooth@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.5.tgz#d153b7dffc7143d0c99e82db1532f8cf93f20ecd"
-  integrity sha512-BMP2Ad42tD60h0JW6BFaib+RJuV5dsXJK9Baxiv/HlNFjvRLqA9xrNKxVWnUIZPQfzUwGXIlU/dSYLU+54YGQA==
+react-smooth@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-4.0.1.tgz#6200d8699bfe051ae40ba187988323b1449eab1a"
+  integrity sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==
   dependencies:
-    fast-equals "^5.0.0"
-    react-transition-group "2.9.0"
+    fast-equals "^5.0.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
 
 react-toastify@^9.1.3:
   version "9.1.3"
@@ -8118,16 +8139,6 @@ react-toastify@^9.1.3:
   dependencies:
     clsx "^1.1.1"
 
-react-transition-group@2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -8189,15 +8200,15 @@ recharts-scale@^0.4.4:
     decimal.js-light "^2.4.1"
 
 recharts@^2.10.3:
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.10.3.tgz#a5dbe219354d744701e8bbd116fe42393af92f6b"
-  integrity sha512-G4J96fKTZdfFQd6aQnZjo2nVNdXhp+uuLb00+cBTGLo85pChvm1+E67K3wBOHDE/77spcYb2Cy9gYWVqiZvQCg==
+  version "2.12.4"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.12.4.tgz#e560a57cd44ab554c99a0d93bdd58d059b309a2e"
+  integrity sha512-dM4skmk4fDKEDjL9MNunxv6zcTxePGVEzRnLDXALRpfJ85JoQ0P0APJ/CoJlmnQI0gPjBlOkjzrwrfQrRST3KA==
   dependencies:
     clsx "^2.0.0"
     eventemitter3 "^4.0.1"
-    lodash "^4.17.19"
+    lodash "^4.17.21"
     react-is "^16.10.2"
-    react-smooth "^2.0.5"
+    react-smooth "^4.0.0"
     recharts-scale "^0.4.4"
     tiny-invariant "^1.3.1"
     victory-vendor "^36.6.8"
@@ -8239,9 +8250,9 @@ regenerator-runtime@^0.13.9:
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
 regenerator-runtime@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
-  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
 regenerator-transform@^0.15.2:
   version "0.15.2"
@@ -8626,7 +8637,7 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -8709,11 +8720,16 @@ source-map-explorer@^2.5.3:
     temp "^0.9.4"
     yargs "^16.2.0"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-loader@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
@@ -8955,19 +8971,19 @@ style-loader@^3.3.1:
   integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
 
 styled-components@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.1.tgz#a5414ada07fb1c17b96a26a05369daa4e2ad55e5"
-  integrity sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==
-  dependencies:
-    "@emotion/is-prop-valid" "^1.2.1"
-    "@emotion/unitless" "^0.8.0"
-    "@types/stylis" "^4.0.2"
-    css-to-react-native "^3.2.0"
-    csstype "^3.1.2"
-    postcss "^8.4.31"
-    shallowequal "^1.1.0"
-    stylis "^4.3.0"
-    tslib "^2.5.0"
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
+  integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.1"
+    "@emotion/unitless" "0.8.0"
+    "@types/stylis" "4.2.0"
+    css-to-react-native "3.2.0"
+    csstype "3.1.2"
+    postcss "8.4.31"
+    shallowequal "1.1.0"
+    stylis "4.3.1"
+    tslib "2.5.0"
 
 stylehacks@^5.1.1:
   version "5.1.1"
@@ -8977,10 +8993,10 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
-stylis@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
-  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+stylis@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
+  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
 
 sucrase@^3.32.0:
   version "3.34.0"
@@ -9205,9 +9221,9 @@ thunky@^1.0.2:
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
 tiny-invariant@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
-  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
 tmpl@1.0.5:
   version "1.0.5"
@@ -9275,12 +9291,17 @@ tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2:
+tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -9381,9 +9402,9 @@ typedarray-to-buffer@^3.1.5:
     is-typedarray "^1.0.0"
 
 typescript@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.2.tgz#00d1c7c1c46928c5845c1ee8d0cc2791031d4c43"
-  integrity sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
+  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -9543,9 +9564,9 @@ vary@~1.1.2:
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
 victory-vendor@^36.6.8:
-  version "36.7.0"
-  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.7.0.tgz#e02af33e249e74e659fa65c6d5936042c42e7aa8"
-  integrity sha512-nqYuTkLSdTTeACyXcCLbL7rl0y6jpzLPtTNGOtSnajdR+xxMxBdjMxDjfNJNlhR+ZU8vbXz+QejntcbY7h9/ZA==
+  version "36.9.2"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.9.2.tgz#668b02a448fa4ea0f788dbf4228b7e64669ff801"
+  integrity sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==
   dependencies:
     "@types/d3-array" "^3.0.3"
     "@types/d3-ease" "^3.0.0"