diff --git a/web/src/Components/Bridging/BridgeContainer.jsx b/web/src/Components/Bridging/BridgeContainer.jsx
index bf6f5f8..ea718e3 100644
--- a/web/src/Components/Bridging/BridgeContainer.jsx
+++ b/web/src/Components/Bridging/BridgeContainer.jsx
@@ -1,18 +1,20 @@
 import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { Radio, TextField, Typography } from '@equinor/eds-core-react'
+import { Radio, TextField, Typography, Tabs } from '@equinor/eds-core-react'
 import { FractionsAPI } from '../../Api'
-import { BridgingOption, CeramicDiscsValues } from "../../Enums"
+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 BridgeGraph from './BridgeGraph'
+import { Tooltip } from '../Common/Tooltip'
+import { findGraphData } from '../../Utils'
 import { ErrorToast } from '../Common/Toast'
 
 const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  background-color: white;
+  border-radius: 4px 0 4px 4px; 
+  padding: 1rem; 
 `
 
 const RadioWrapper = styled.div`
@@ -36,25 +38,29 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   const [bridgeValueHelperText, setBridgeValueHelperText] = useState(undefined)
   const [bridgeValueVariant, setBridgeValueVariant] = useState(undefined)
   const [optimalBridgeGraphData, setOptimalBridgeGraphData] = useState([])
-   const { token} = useContext(AuthContext)
+  const { token } = useContext(AuthContext)
+  const [activeTab, setActiveTab] = useState(1)
+  const handleChange = index => {
+    setActiveTab(index)
+  }
 
   // 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)
-        })
+      .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"]}))
+    if (bridges['Bridge'].length && sizeFractions.length) {
+      const x = findGraphData(sizeFractions, { Bridge: bridges['Bridge'] })
       setOptimalBridgeGraphData(x)
-        }
+    }
   }, [bridges, sizeFractions])
 
   function bridgingOptionChange(event) {
@@ -98,75 +104,89 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   }
 
   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}
-            />
+    <div style={{ display: 'flex' }}>
+      <InputWrapper>
+        <Typography variant='h3'>Bridging options</Typography>
+        <div>Bridging based on:</div>
+        <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="Average pore size/crack opening"
-                name="group"
-                value={BridgingOption.AVERAGE_PORESIZE}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.AVERAGE_PORESIZE}
+              label='Max pore size/crack opening'
+              name='group'
+              value={BridgingOption.MAXIMUM_PORESIZE}
+              onChange={bridgingOptionChange}
+              checked={mode === BridgingOption.MAXIMUM_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}
+          </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}
             />
-          </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>
+          )}
+        </div>
+      </InputWrapper>
+        <Tabs activeTab={activeTab} onChange={handleChange}>
+          <Tabs.List>
+            <Tabs.Tab>Cumulative</Tabs.Tab>
+            <Tabs.Tab>Relative</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panels conditionalRender>
+            <Tabs.Panel key={1}>
+              <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+            </Tabs.Panel>
+            <Tabs.Panel key={2}>
+              <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+            </Tabs.Panel>
+          </Tabs.Panels>
+        </Tabs>
+    </div>
   )
 }
diff --git a/web/src/Components/Bridging/BridgeGraph.jsx b/web/src/Components/Bridging/BridgeGraph.jsx
index 8acc53b..bdfb3ee 100644
--- a/web/src/Components/Bridging/BridgeGraph.jsx
+++ b/web/src/Components/Bridging/BridgeGraph.jsx
@@ -73,7 +73,7 @@ export function BridgeGraph({ bridges, sizeFractions }) {
   }, [bridges, sizeFractions])
 
   return (
-    <div style={{ paddingLeft: '5%' }}>
+    <div>
       <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>