diff --git a/src/basicAppBar.tsx b/src/basicAppBar.tsx
index 2918740..c8d99b8 100644
--- a/src/basicAppBar.tsx
+++ b/src/basicAppBar.tsx
@@ -21,20 +21,24 @@ export default function BasicAppBar(): JSX.Element {
 
   const preset = useBeamlineConfigStore((state) => state.preset);
   const updateBeamstop = useBeamstopStore((state) => state.updateBeamstop);
-  const updateCameraTube = useCameraTubeStore((state) => state.updateCameraTube);
-  const updateBeamlineConfig = useBeamlineConfigStore((state) => state.updateBeamlineConfig);
+  const updateCameraTube = useCameraTubeStore(
+    (state) => state.updateCameraTube,
+  );
+  const updateBeamlineConfig = useBeamlineConfigStore(
+    (state) => state.updateBeamlineConfig,
+  );
   const updatePreset = useBeamlineConfigStore((state) => state.updatePreset);
   const updateDetector = useDetectorStore((state) => state.updateDetector);
   const handlePreset = (preset: string) => {
-    const { beamstop, cameraTube, detector, ...beamlineConfig } = presetList[preset];
+    const { beamstop, cameraTube, detector, ...beamlineConfig } =
+      presetList[preset];
     updateDetector(detector);
     updateBeamstop(beamstop);
     updateCameraTube(cameraTube);
     updateBeamlineConfig(beamlineConfig);
-    updatePreset(preset)
+    updatePreset(preset);
   };
 
-
   return (
     <Box sx={{ flexGrow: 2 }}>
       <AppBar position="static">
@@ -73,9 +77,13 @@ export default function BasicAppBar(): JSX.Element {
             id="combo-box-demo"
             options={Object.keys(presetList)}
             value={preset}
-            sx={{ width: 300 }}
+            sx={{ width: 300, color: "white" }}
             renderInput={(params) => (
-              <TextField {...params} label="choose beamline preset" />
+              <TextField
+                {...params}
+                label="choose beamline preset"
+                sx={{ color: "white" }}
+              />
             )}
             onChange={(_, value) => {
               value ? handlePreset(value) : {};
diff --git a/src/data-entry/beamProperties.tsx b/src/data-entry/beamProperties.tsx
index da7dd54..e9c0b2f 100644
--- a/src/data-entry/beamProperties.tsx
+++ b/src/data-entry/beamProperties.tsx
@@ -1,202 +1,215 @@
 import {
-    Stack,
-    Typography,
-    TextField,
-    FormControl,
-    Select,
-    MenuItem,
-    InputLabel,
+  Stack,
+  Typography,
+  TextField,
+  FormControl,
+  Select,
+  MenuItem,
+  InputLabel,
 } from "@mui/material";
 import { AngleUnits, EnergyUnits, WavelengthUnits } from "../utils/units";
 import { useBeamlineConfigStore } from "./beamlineconfigStore";
 
 export default function BeampropertiesDataEntry() {
-    const minWavelength = useBeamlineConfigStore((state) => {
-        if (
-            state.wavelengthUnits === WavelengthUnits.angstroms
-        ) {
-            return state.maxWavelength * 10;
-        }
-        return state.maxWavelength;
-    });
+  const minWavelength = useBeamlineConfigStore((state) => {
+    if (state.wavelengthUnits === WavelengthUnits.angstroms) {
+      return state.maxWavelength * 10;
+    }
+    return state.maxWavelength;
+  });
 
-    const maxWavelength = useBeamlineConfigStore((state) => {
-        if (
-            state.wavelengthUnits === WavelengthUnits.angstroms
-        ) {
-            return state.maxWavelength * 10;
-        }
-        return state.maxWavelength;
-    });
+  const maxWavelength = useBeamlineConfigStore((state) => {
+    if (state.wavelengthUnits === WavelengthUnits.angstroms) {
+      return state.maxWavelength * 10;
+    }
+    return state.maxWavelength;
+  });
 
-    const cameraLength = useBeamlineConfigStore((state) => state.cameraLength);
-    const minCameraLength = useBeamlineConfigStore((state) => state.minCameraLength);
-    const maxCameraLength = useBeamlineConfigStore((state) => state.maxCameraLength);
+  const cameraLength = useBeamlineConfigStore((state) => state.cameraLength);
+  const minCameraLength = useBeamlineConfigStore(
+    (state) => state.minCameraLength,
+  );
+  const maxCameraLength = useBeamlineConfigStore(
+    (state) => state.maxCameraLength,
+  );
 
+  const energy = useBeamlineConfigStore((state) => {
+    if (state.energy && state.beamEnergyUnits === EnergyUnits.electronVolts) {
+      return 1000 * state.energy;
+    }
+    return state.energy;
+  });
+  const energyUnits = useBeamlineConfigStore((state) => state.beamEnergyUnits);
+  const updateEnergyUnits = useBeamlineConfigStore(
+    (state) => state.updateEnergyUnits,
+  );
+  const updateEnergy = useBeamlineConfigStore((state) => state.updateEnergy);
+  const handleEnergy = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (energyUnits === EnergyUnits.electronVolts && event.target.value) {
+      updateEnergy(parseFloat(event.target.value) / 1000);
+    } else {
+      updateEnergy(parseFloat(event.target.value));
+    }
+  };
 
-    const energy = useBeamlineConfigStore((state) => {
-        if (state.energy && state.beamEnergyUnits === EnergyUnits.electronVolts) {
-            return 1000 * state.energy;
-        }
-        return state.energy;
-    });
-    const energyUnits = useBeamlineConfigStore((state) => state.beamEnergyUnits);
-    const updateEnergyUnits = useBeamlineConfigStore(
-        (state) => state.updateEnergyUnits,
-    );
-    const updateEnergy = useBeamlineConfigStore((state) => state.updateEnergy);
-    const handleEnergy = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (energyUnits === EnergyUnits.electronVolts && event.target.value) {
-            updateEnergy(parseFloat(event.target.value) / 1000);
-        } else {
-            updateEnergy(parseFloat(event.target.value));
-        }
-    };
+  const angle = useBeamlineConfigStore((state) => {
+    if (state.angle && state.angleUnits === AngleUnits.degrees) {
+      return state.angle * (180 / Math.PI);
+    }
+    return state.angle;
+  });
+  const angleUnits = useBeamlineConfigStore((state) => state.angleUnits);
+  const updateAngleUnits = useBeamlineConfigStore(
+    (state) => state.updateAngleUnits,
+  );
+  const updateAngle = useBeamlineConfigStore((state) => state.updateAngle);
+  const handleAngle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (angleUnits === AngleUnits.degrees && event.target.value) {
+      updateAngle(parseFloat(event.target.value) / (180 / Math.PI));
+    } else {
+      updateAngle(parseFloat(event.target.value));
+    }
+  };
 
-    const angle = useBeamlineConfigStore((state) => {
-        if (state.angle && state.angleUnits === AngleUnits.degrees) {
-            return state.angle * (180 / Math.PI);
-        }
-        return state.angle;
-    });
-    const angleUnits = useBeamlineConfigStore((state) => state.angleUnits);
-    const updateAngleUnits = useBeamlineConfigStore(
-        (state) => state.updateAngleUnits,
-    );
-    const updateAngle = useBeamlineConfigStore((state) => state.updateAngle);
-    const handleAngle = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (angleUnits === AngleUnits.degrees && event.target.value) {
-            updateAngle(parseFloat(event.target.value) / (180 / Math.PI));
-        } else {
-            updateAngle(parseFloat(event.target.value));
-        }
-    };
+  const wavelength = useBeamlineConfigStore((state) => {
+    if (
+      state.wavelength &&
+      state.wavelengthUnits === WavelengthUnits.angstroms
+    ) {
+      return state.wavelength * 10;
+    }
+    return state.wavelength;
+  });
 
-    const wavelength = useBeamlineConfigStore((state) => {
-        if (
-            state.wavelength &&
-            state.wavelengthUnits === WavelengthUnits.angstroms
-        ) {
-            return state.wavelength * 10;
-        }
-        return state.wavelength;
-    });
+  const wavelengthUnits = useBeamlineConfigStore(
+    (state) => state.wavelengthUnits,
+  );
+  const updateWavelengthUnits = useBeamlineConfigStore(
+    (state) => state.updateWavelengthUnits,
+  );
+  const updateWavelength = useBeamlineConfigStore(
+    (state) => state.updateWavelength,
+  );
+  const handleWavelength = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (wavelengthUnits === WavelengthUnits.angstroms && event.target.value) {
+      updateWavelength(parseFloat(event.target.value) / 10);
+    } else {
+      updateWavelength(parseFloat(event.target.value));
+    }
+  };
 
-    const wavelengthUnits = useBeamlineConfigStore(
-        (state) => state.wavelengthUnits,
-    );
-    const updateWavelengthUnits = useBeamlineConfigStore(
-        (state) => state.updateWavelengthUnits,
-    );
-    const updateWavelength = useBeamlineConfigStore(
-        (state) => state.updateWavelength,
+  const updateCameraLength = useBeamlineConfigStore(
+    (state) => state.updateCameraLength,
+  );
+  const handleCameraLength = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateCameraLength(
+      parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
     );
-    const handleWavelength = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (wavelengthUnits === WavelengthUnits.angstroms && event.target.value) {
-            updateWavelength(parseFloat(event.target.value) / 10);
-        } else {
-            updateWavelength(parseFloat(event.target.value));
-        }
-    };
+  };
 
-    const updateCameraLength = useBeamlineConfigStore((state) => state.updateCameraLength);
-    const handleCameraLength = (event: React.ChangeEvent<HTMLInputElement>) => {
-        updateCameraLength(parseFloat(event.target.value) ? parseFloat(event.target.value) : null);
-
-    };
-
-    return (
-        <Stack spacing={2}>
-            <Typography variant="h6">Beam properties</Typography>
-            <Stack direction={"row"} spacing={2}>
-                <Typography flexGrow={1}>Energy: </Typography>
-                <TextField
-                    type="number"
-                    size="small"
-                    value={energy ?? ""}
-                    onChange={handleEnergy}
-                />
-                <FormControl>
-                    <InputLabel>units</InputLabel>
-                    <Select
-                        size="small"
-                        label="units"
-                        value={energyUnits}
-                        onChange={(event) =>
-                            updateEnergyUnits(event.target.value as EnergyUnits)
-                        }
-                    >
-                        <MenuItem value={EnergyUnits.electronVolts}>
-                            {EnergyUnits.electronVolts}
-                        </MenuItem>
-                        <MenuItem value={EnergyUnits.kiloElectronVolts}>
-                            {EnergyUnits.kiloElectronVolts}
-                        </MenuItem>
-                    </Select>
-                </FormControl>
-            </Stack>
-            <Stack direction={"row"} spacing={2}>
-                <Typography flexGrow={1}>Wavelength: </Typography>
-                <TextField
-                    type="number"
-                    size="small"
-                    value={wavelength ?? ""}
-                    onChange={handleWavelength}
-                />
-                <FormControl>
-                    <InputLabel>units</InputLabel>
-                    <Select
-                        size="small"
-                        label="units"
-                        value={wavelengthUnits}
-                        onChange={(event) =>
-                            updateWavelengthUnits(event.target.value as WavelengthUnits)
-                        }
-                    >
-                        <MenuItem value={WavelengthUnits.nanmometres}>
-                            {WavelengthUnits.nanmometres}
-                        </MenuItem>
-                        <MenuItem value={WavelengthUnits.angstroms}>
-                            {WavelengthUnits.angstroms}
-                        </MenuItem>
-                    </Select>
-                </FormControl>
-            </Stack>
-            <Typography>Minimum allowed wavelength: {minWavelength} {wavelengthUnits} </Typography>
-            <Typography>Maximum allowed wavelength: {maxWavelength} {wavelengthUnits}</Typography>
-            <Stack direction="row" spacing={2}>
-                <Typography>Camera Length: </Typography>
-                <TextField
-                    type="number"
-                    size="small"
-                    value={cameraLength ?? ""}
-                    InputProps={{
-                        inputProps: {
-                            max: maxCameraLength, min: minCameraLength
-                        }
-                    }}
-                    onChange={handleCameraLength}
-                />
-                <Typography>m</Typography>
-            </Stack>
-            <Stack direction="row" spacing={2}>
-                <Typography flexGrow={2}>Angle:</Typography>
-                <TextField type="number" size="small" defaultValue={""} value={angle ?? ""} onChange={handleAngle} />
-                <FormControl>
-                    <InputLabel>units</InputLabel>
-                    <Select
-                        size="small"
-                        label="units"
-                        value={angleUnits}
-                        onChange={(event) =>
-                            updateAngleUnits(event.target.value as AngleUnits)
-                        }
-                    >
-                        <MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>
-                        <MenuItem value={AngleUnits.degrees}>{AngleUnits.degrees}</MenuItem>
-                    </Select>
-                </FormControl>
-            </Stack>
-        </Stack>
-    );
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6">Beam properties</Typography>
+      <Stack direction={"row"} spacing={2}>
+        <Typography flexGrow={1}>Energy: </Typography>
+        <TextField
+          type="number"
+          size="small"
+          value={energy ?? ""}
+          onChange={handleEnergy}
+        />
+        <FormControl>
+          <InputLabel>units</InputLabel>
+          <Select
+            size="small"
+            label="units"
+            value={energyUnits}
+            onChange={(event) =>
+              updateEnergyUnits(event.target.value as EnergyUnits)
+            }
+          >
+            <MenuItem value={EnergyUnits.electronVolts}>
+              {EnergyUnits.electronVolts}
+            </MenuItem>
+            <MenuItem value={EnergyUnits.kiloElectronVolts}>
+              {EnergyUnits.kiloElectronVolts}
+            </MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
+      <Stack direction={"row"} spacing={2}>
+        <Typography flexGrow={1}>Wavelength: </Typography>
+        <TextField
+          type="number"
+          size="small"
+          value={wavelength ?? ""}
+          onChange={handleWavelength}
+        />
+        <FormControl>
+          <InputLabel>units</InputLabel>
+          <Select
+            size="small"
+            label="units"
+            value={wavelengthUnits}
+            onChange={(event) =>
+              updateWavelengthUnits(event.target.value as WavelengthUnits)
+            }
+          >
+            <MenuItem value={WavelengthUnits.nanmometres}>
+              {WavelengthUnits.nanmometres}
+            </MenuItem>
+            <MenuItem value={WavelengthUnits.angstroms}>
+              {WavelengthUnits.angstroms}
+            </MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
+      <Typography>
+        Minimum allowed wavelength: {minWavelength} {wavelengthUnits}{" "}
+      </Typography>
+      <Typography>
+        Maximum allowed wavelength: {maxWavelength} {wavelengthUnits}
+      </Typography>
+      <Stack direction="row" spacing={2}>
+        <Typography>Camera Length: </Typography>
+        <TextField
+          type="number"
+          size="small"
+          value={cameraLength ?? ""}
+          InputProps={{
+            inputProps: {
+              max: maxCameraLength,
+              min: minCameraLength,
+            },
+          }}
+          onChange={handleCameraLength}
+        />
+        <Typography>m</Typography>
+      </Stack>
+      <Stack direction="row" spacing={2}>
+        <Typography flexGrow={2}>Angle:</Typography>
+        <TextField
+          type="number"
+          size="small"
+          defaultValue={""}
+          value={angle ?? ""}
+          onChange={handleAngle}
+        />
+        <FormControl>
+          <InputLabel>units</InputLabel>
+          <Select
+            size="small"
+            label="units"
+            value={angleUnits}
+            onChange={(event) =>
+              updateAngleUnits(event.target.value as AngleUnits)
+            }
+          >
+            <MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>
+            <MenuItem value={AngleUnits.degrees}>{AngleUnits.degrees}</MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
+    </Stack>
+  );
 }
diff --git a/src/data-entry/beamlineconfigStore.ts b/src/data-entry/beamlineconfigStore.ts
index 16f71e8..51fb660 100644
--- a/src/data-entry/beamlineconfigStore.ts
+++ b/src/data-entry/beamlineconfigStore.ts
@@ -2,53 +2,51 @@ import { BeamlineConfig } from "../utils/types";
 import { create } from "zustand";
 import { AngleUnits, EnergyUnits, WavelengthUnits } from "../utils/units";
 
-
 export interface BeamlineConfigStore extends BeamlineConfig {
-    preset: string | null;
-    beamEnergyUnits: EnergyUnits;
-    angleUnits: AngleUnits;
-    wavelengthUnits: WavelengthUnits;
-    energy: number | null;
-    wavelength: number | null;
-    updateEnergyUnits: (newUnits: EnergyUnits) => void;
-    updateAngleUnits: (newUnits: AngleUnits) => void;
-    updateWavelengthUnits: (newUnits: WavelengthUnits) => void;
-    updateEnergy: (newEnergy: number | null) => void;
-    updateAngle: (newAngle: number | null) => void;
-    updateWavelength: (newWavelength: number | null) => void;
-    updatePreset: (newPreset: string) => void;
-    updateBeamlineConfig: (newConfig: BeamlineConfig) => void;
-    updateCameraLength: (cameraLength: number | null) => void;
+  preset: string | null;
+  beamEnergyUnits: EnergyUnits;
+  angleUnits: AngleUnits;
+  wavelengthUnits: WavelengthUnits;
+  energy: number | null;
+  wavelength: number | null;
+  updateEnergyUnits: (newUnits: EnergyUnits) => void;
+  updateAngleUnits: (newUnits: AngleUnits) => void;
+  updateWavelengthUnits: (newUnits: WavelengthUnits) => void;
+  updateEnergy: (newEnergy: number | null) => void;
+  updateAngle: (newAngle: number | null) => void;
+  updateWavelength: (newWavelength: number | null) => void;
+  updatePreset: (newPreset: string) => void;
+  updateBeamlineConfig: (newConfig: BeamlineConfig) => void;
+  updateCameraLength: (cameraLength: number | null) => void;
 }
 
-
 export const useBeamlineConfigStore = create<BeamlineConfigStore>((set) => ({
-    preset: null,
-    angle: null,
-    cameraLength: 1,
-    minWavelength: 1,
-    maxWavelength: 2,
-    minCameraLength: 10,
-    maxCameraLength: 100,
-    energy: null,
-    wavelength: null,
-    beamEnergyUnits: EnergyUnits.kiloElectronVolts,
-    angleUnits: AngleUnits.radians,
-    wavelengthUnits: WavelengthUnits.nanmometres,
-    updateEnergyUnits: (newUnits: EnergyUnits) =>
-        set({ beamEnergyUnits: newUnits }),
-    updateAngleUnits: (newUnits: AngleUnits) => set({ angleUnits: newUnits }),
-    updateWavelengthUnits: (newUnits: WavelengthUnits) =>
-        set({ wavelengthUnits: newUnits }),
-    updateEnergy: (newEnergy: number | null) => set({ energy: newEnergy }),
-    updateAngle: (newAngle: number | null) => set({ angle: newAngle }),
-    updateWavelength: (newWavelength: number | null) =>
-        set({ wavelength: newWavelength }),
-    updateBeamlineConfig: (presetBeamlineConfig: BeamlineConfig) => {
-        set(presetBeamlineConfig)
-    },
-    updatePreset: (preset: string) => {
-        set({ preset: preset })
-    },
-    updateCameraLength: (length: number | null) => set({ cameraLength: length })
+  preset: null,
+  angle: null,
+  cameraLength: 1,
+  minWavelength: 1,
+  maxWavelength: 2,
+  minCameraLength: 10,
+  maxCameraLength: 100,
+  energy: null,
+  wavelength: null,
+  beamEnergyUnits: EnergyUnits.kiloElectronVolts,
+  angleUnits: AngleUnits.radians,
+  wavelengthUnits: WavelengthUnits.nanmometres,
+  updateEnergyUnits: (newUnits: EnergyUnits) =>
+    set({ beamEnergyUnits: newUnits }),
+  updateAngleUnits: (newUnits: AngleUnits) => set({ angleUnits: newUnits }),
+  updateWavelengthUnits: (newUnits: WavelengthUnits) =>
+    set({ wavelengthUnits: newUnits }),
+  updateEnergy: (newEnergy: number | null) => set({ energy: newEnergy }),
+  updateAngle: (newAngle: number | null) => set({ angle: newAngle }),
+  updateWavelength: (newWavelength: number | null) =>
+    set({ wavelength: newWavelength }),
+  updateBeamlineConfig: (presetBeamlineConfig: BeamlineConfig) => {
+    set(presetBeamlineConfig);
+  },
+  updatePreset: (preset: string) => {
+    set({ preset: preset });
+  },
+  updateCameraLength: (length: number | null) => set({ cameraLength: length }),
 }));
diff --git a/src/data-entry/beamstop.tsx b/src/data-entry/beamstop.tsx
index b21e3eb..058bdd7 100644
--- a/src/data-entry/beamstop.tsx
+++ b/src/data-entry/beamstop.tsx
@@ -44,15 +44,17 @@ export default function BeamStopDataEntry(): JSX.Element {
     );
   };
 
-
-  const detector = useDetectorStore((state) => state.current)
+  const detector = useDetectorStore((state) => state.current);
   const centreDetector = () => {
-    updateCentre({ x: detector.resolution.width / 2, y: detector.resolution.height / 2 })
-  }
+    updateCentre({
+      x: detector.resolution.width / 2,
+      y: detector.resolution.height / 2,
+    });
+  };
 
   const centreTopEdge = () => {
-    updateCentre({ x: detector.resolution.width / 2, y: 0 })
-  }
+    updateCentre({ x: detector.resolution.width / 2, y: 0 });
+  };
 
   return (
     <Stack spacing={2}>
diff --git a/src/data-entry/cameraTubeStore.ts b/src/data-entry/cameraTubeStore.ts
index eeb2780..a9b09c5 100644
--- a/src/data-entry/cameraTubeStore.ts
+++ b/src/data-entry/cameraTubeStore.ts
@@ -19,5 +19,5 @@ export const useCameraTubeStore = create<CameraTubeStore>((set) => ({
   updateCentre: (newCentre: Partial<SerialisedVector2>) =>
     set((state) => ({ centre: { ...state.centre, ...newCentre } })),
   updateUnits: (newUnits: DistanceUnits) => set({ diameterUnits: newUnits }),
-  updateCameraTube: (presetCameraTube: CircularDevice) => set(presetCameraTube)
+  updateCameraTube: (presetCameraTube: CircularDevice) => set(presetCameraTube),
 }));
diff --git a/src/data-entry/dataSideBar.tsx b/src/data-entry/dataSideBar.tsx
index d020e6d..640da4a 100644
--- a/src/data-entry/dataSideBar.tsx
+++ b/src/data-entry/dataSideBar.tsx
@@ -31,8 +31,6 @@ export default function DataSideBar(): JSX.Element {
   const updateUnits = useDetectorStore((state) => state.updateUnits);
   const updateDetector = useDetectorStore((state) => state.updateDetector);
 
-
-
   return (
     <Card sx={{ height: 1 }}>
       <CardContent>
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
index a889889..3c9280c 100644
--- a/src/plot/centrePlot.tsx
+++ b/src/plot/centrePlot.tsx
@@ -7,7 +7,7 @@ import {
   VisCanvas,
   SvgCircle,
   SvgRect,
-} from "@h5web/lib"
+} from "@h5web/lib";
 import { Vector3 } from "three";
 import { useBeamstopStore } from "../data-entry/beamstopStore";
 import { useDetectorStore } from "../data-entry/detectorStore";
@@ -16,64 +16,147 @@ import { getDomains } from "./plotUtils";
 import { PlotAxes, usePlotStore } from "./plotStore";
 import { Beamstop, CircularDevice, Detector } from "../utils/types";
 
-
 export default function CentrePlot(): JSX.Element {
   const plotConfig = usePlotStore();
   const detector = useDetectorStore((state): Detector => {
     if (plotConfig.plotAxes === PlotAxes.milimeter) {
-      return { resolution: { height: state.current.resolution.height * state.current.pixelSize, width: state.current.resolution.width * state.current.pixelSize }, pixelSize: state.current.pixelSize }
+      return {
+        resolution: {
+          height: state.current.resolution.height * state.current.pixelSize,
+          width: state.current.resolution.width * state.current.pixelSize,
+        },
+        pixelSize: state.current.pixelSize,
+      };
     }
-    return state.current
+    return state.current;
   });
   const beamstop = useBeamstopStore((state): Beamstop => {
     if (plotConfig.plotAxes === PlotAxes.milimeter) {
-      return { centre: { x: (state.centre.x ?? 0) * detector.pixelSize, y: (state.centre.y ?? 0) * detector.pixelSize }, diameter: state.diameter, clearance: (state.clearance ?? 0) * detector.pixelSize }
+      return {
+        centre: {
+          x: (state.centre.x ?? 0) * detector.pixelSize,
+          y: (state.centre.y ?? 0) * detector.pixelSize,
+        },
+        diameter: state.diameter,
+        clearance: (state.clearance ?? 0) * detector.pixelSize,
+      };
     }
     return {
-      centre: state.centre, diameter: (state.diameter / detector.pixelSize), clearance: state.clearance
-    }
+      centre: state.centre,
+      diameter: state.diameter / detector.pixelSize,
+      clearance: state.clearance,
+    };
   });
 
   const cameraTube = useCameraTubeStore((state): CircularDevice => {
     if (plotConfig.plotAxes === PlotAxes.milimeter) {
-      return { centre: { x: (state.centre.x ?? 0) * detector.pixelSize, y: (state.centre.y ?? 0) * detector.pixelSize }, diameter: state.diameter }
+      return {
+        centre: {
+          x: (state.centre.x ?? 0) * detector.pixelSize,
+          y: (state.centre.y ?? 0) * detector.pixelSize,
+        },
+        diameter: state.diameter,
+      };
     }
-    return { centre: state.centre, diameter: (state.diameter / detector.pixelSize) }
+    return {
+      centre: state.centre,
+      diameter: state.diameter / detector.pixelSize,
+    };
   });
 
-
   //const cameraTube = useCameraTubeStore();
-  const domains = getDomains(detector, { centre: cameraTube.centre, diameter: cameraTube.diameter })
-
+  const domains = getDomains(detector, {
+    centre: cameraTube.centre,
+    diameter: cameraTube.diameter,
+  });
 
   return (
     <Box>
       <Card>
         <CardContent>
-          <div style={{ display: "grid", height: "60vh", width: "50vw", border: "solid black" }}>
+          <div
+            style={{
+              display: "grid",
+              height: "60vh",
+              width: "50vw",
+              border: "solid black",
+            }}
+          >
             <VisCanvas
-              abscissaConfig={{ visDomain: [domains.xAxis.min, domains.xAxis.max], showGrid: true, nice: true }}
-              ordinateConfig={{ visDomain: [domains.yAxis.max, domains.yAxis.min], showGrid: true, nice: true }}
+              abscissaConfig={{
+                visDomain: [domains.xAxis.min, domains.xAxis.max],
+                showGrid: true,
+                nice: true,
+              }}
+              ordinateConfig={{
+                visDomain: [domains.yAxis.max, domains.yAxis.min],
+                showGrid: true,
+                nice: true,
+              }}
             >
               <DefaultInteractions />
               <ResetZoomButton />
               <DataToHtml
                 points={[
                   new Vector3(beamstop.centre.x ?? 0, beamstop.centre.y ?? 0),
-                  new Vector3((beamstop.centre.x ?? 0) + (beamstop.diameter / 2), beamstop.centre.y ?? 0),
-                  new Vector3((beamstop.centre.x ?? 0) + (beamstop.diameter / 2) + (beamstop.clearance ?? 0), beamstop.centre.y ?? 0),
-                  new Vector3(cameraTube.centre.x ?? 0, cameraTube.centre.y ?? 0),
-                  new Vector3((cameraTube.centre.x ?? 0) + (cameraTube.diameter / 2), cameraTube.centre.y ?? 0),
+                  new Vector3(
+                    (beamstop.centre.x ?? 0) + beamstop.diameter / 2,
+                    beamstop.centre.y ?? 0,
+                  ),
+                  new Vector3(
+                    (beamstop.centre.x ?? 0) +
+                    beamstop.diameter / 2 +
+                    (beamstop.clearance ?? 0),
+                    beamstop.centre.y ?? 0,
+                  ),
+                  new Vector3(
+                    cameraTube.centre.x ?? 0,
+                    cameraTube.centre.y ?? 0,
+                  ),
+                  new Vector3(
+                    (cameraTube.centre.x ?? 0) + cameraTube.diameter / 2,
+                    cameraTube.centre.y ?? 0,
+                  ),
                   new Vector3(0, 0),
-                  new Vector3(detector.resolution.width, detector.resolution.height)
+                  new Vector3(
+                    detector.resolution.width,
+                    detector.resolution.height,
+                  ),
                 ]}
               >
-                {(beamstopCentre: Vector3, beamstopPerimeter: Vector3, clearance: Vector3, cameraTubeCentre: Vector3, cameraTubePerimeter: Vector3, detectorLower: Vector3, detectorUpper: Vector3) => (
+                {(
+                  beamstopCentre: Vector3,
+                  beamstopPerimeter: Vector3,
+                  clearance: Vector3,
+                  cameraTubeCentre: Vector3,
+                  cameraTubePerimeter: Vector3,
+                  detectorLower: Vector3,
+                  detectorUpper: Vector3,
+                ) => (
                   <SvgElement>
-                    <SvgCircle coords={[cameraTubeCentre, cameraTubePerimeter]} fill="rgba(0, 255, 0, 0.5)" id="camera tube" />
-                    <SvgCircle coords={[beamstopCentre, clearance]} fill="rgba(0, 0, 255, 0.5)" id="clearance" />
-                    <SvgCircle coords={[beamstopCentre, beamstopPerimeter]} fill="black" id="beamstop" />
-                    <SvgRect coords={[detectorLower, detectorUpper]} fill="rgba(255, 0, 0, 0.5)" id="detector" stroke="black" strokePosition="outside" strokeWidth={0} />
+                    <SvgCircle
+                      coords={[cameraTubeCentre, cameraTubePerimeter]}
+                      fill="rgba(0, 255, 0, 0.5)"
+                      id="camera tube"
+                    />
+                    <SvgCircle
+                      coords={[beamstopCentre, clearance]}
+                      fill="rgba(0, 0, 255, 0.5)"
+                      id="clearance"
+                    />
+                    <SvgCircle
+                      coords={[beamstopCentre, beamstopPerimeter]}
+                      fill="black"
+                      id="beamstop"
+                    />
+                    <SvgRect
+                      coords={[detectorLower, detectorUpper]}
+                      fill="rgba(255, 0, 0, 0.5)"
+                      id="detector"
+                      stroke="black"
+                      strokePosition="outside"
+                      strokeWidth={0}
+                    />
                   </SvgElement>
                 )}
               </DataToHtml>
@@ -81,6 +164,6 @@ export default function CentrePlot(): JSX.Element {
           </div>
         </CardContent>
       </Card>
-    </Box >
+    </Box>
   );
 }
diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
index eef5db2..3024ed3 100644
--- a/src/plot/legendBar.tsx
+++ b/src/plot/legendBar.tsx
@@ -12,9 +12,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import {
-  PlotAxes, usePlotStore
-} from "./plotStore";
+import { PlotAxes, usePlotStore } from "./plotStore";
 
 export default function LegendBar(): JSX.Element {
   const plotConfig = usePlotStore();
@@ -26,12 +24,30 @@ export default function LegendBar(): JSX.Element {
           <Typography variant="h6"> Legend</Typography>
           <Typography>Add something to do with colors here</Typography>
           <FormGroup>
-            <FormControlLabel control={<Checkbox checked={plotConfig.detector.inPlot} />} label="Detector" />
-            <FormControlLabel control={<Checkbox checked={plotConfig.beamstop.inPlot} />} label="Beamstop" />
-            <FormControlLabel control={<Checkbox checked={plotConfig.cameraTube.inPlot} />} label="Camera tube" />
-            <FormControlLabel control={<Checkbox checked={plotConfig.qrange} />} label="Q range" />
-            <FormControlLabel control={<Checkbox checked={plotConfig.mask} />} label="Mask" />
-            <FormControlLabel control={<Checkbox checked={plotConfig.calibrantInPlot} />} label="Calibrant" />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.detector.inPlot} />}
+              label="Detector"
+            />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.beamstop.inPlot} />}
+              label="Beamstop"
+            />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.cameraTube.inPlot} />}
+              label="Camera tube"
+            />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.qrange} />}
+              label="Q range"
+            />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.mask} />}
+              label="Mask"
+            />
+            <FormControlLabel
+              control={<Checkbox checked={plotConfig.calibrantInPlot} />}
+              label="Calibrant"
+            />
           </FormGroup>
           <Divider />
           <Typography>Current calibrant: {5}</Typography>
@@ -42,15 +58,29 @@ export default function LegendBar(): JSX.Element {
               aria-labelledby="demo-radio-buttons-group-label"
               value={plotConfig.plotAxes}
               name="radio-buttons-group"
-              onChange={(event) => plotConfig.edit({ plotAxes: event.target.value as PlotAxes })}
+              onChange={(event) =>
+                plotConfig.edit({ plotAxes: event.target.value as PlotAxes })
+              }
             >
-              <FormControlLabel value={PlotAxes.milimeter} control={<Radio />} label="Axes in mm" />
-              <FormControlLabel value={PlotAxes.pixel} control={<Radio />} label="Axes in pixels" />
-              <FormControlLabel value={PlotAxes.reciprocal} control={<Radio />} label="Axes in q(nm^-1)" />
+              <FormControlLabel
+                value={PlotAxes.milimeter}
+                control={<Radio />}
+                label="Axes in mm"
+              />
+              <FormControlLabel
+                value={PlotAxes.pixel}
+                control={<Radio />}
+                label="Axes in pixels"
+              />
+              <FormControlLabel
+                value={PlotAxes.reciprocal}
+                control={<Radio />}
+                label="Axes in q(nm^-1)"
+              />
             </RadioGroup>
           </FormControl>
         </Stack>
       </CardContent>
-    </Card >
+    </Card>
   );
 }
diff --git a/src/plot/plotStore.ts b/src/plot/plotStore.ts
index f1c6aa3..df10d8e 100644
--- a/src/plot/plotStore.ts
+++ b/src/plot/plotStore.ts
@@ -1,38 +1,40 @@
 import { create } from "zustand";
 
 export enum PlotAxes {
-    milimeter = "milimeter",
-    pixel = "pixel",
-    reciprocal = "reciprocal",
+  milimeter = "milimeter",
+  pixel = "pixel",
+  reciprocal = "reciprocal",
 }
 
 interface PlotItem {
-    inPlot: boolean;
-    colour: string;
+  inPlot: boolean;
+  colour: string;
 }
 
 export interface PlotConfig {
-    detector: PlotItem;
-    beamstop: PlotItem;
-    cameraTube: PlotItem;
-    clearnace: PlotItem;
-    qrange: boolean;
-    mask: boolean;
-    calibrantInPlot: boolean;
-    calibrant: string;
-    plotAxes: PlotAxes;
-    edit: (newConfig: Partial<PlotConfig>) => void;
+  detector: PlotItem;
+  beamstop: PlotItem;
+  cameraTube: PlotItem;
+  clearnace: PlotItem;
+  qrange: boolean;
+  mask: boolean;
+  calibrantInPlot: boolean;
+  calibrant: string;
+  plotAxes: PlotAxes;
+  edit: (newConfig: Partial<PlotConfig>) => void;
 }
 
 export const usePlotStore = create<PlotConfig>((set) => ({
-    detector: { inPlot: false, colour: "red" },
-    beamstop: { inPlot: true, colour: "blue" },
-    cameraTube: { inPlot: true, colour: "green" },
-    clearnace: { inPlot: true, colour: "pink" },
-    qrange: true,
-    mask: false,
-    calibrantInPlot: false,
-    calibrant: "something",
-    plotAxes: PlotAxes.milimeter,
-    edit: (newConfig) => { set({ ...newConfig }) }
+  detector: { inPlot: false, colour: "red" },
+  beamstop: { inPlot: true, colour: "blue" },
+  cameraTube: { inPlot: true, colour: "green" },
+  clearnace: { inPlot: true, colour: "pink" },
+  qrange: true,
+  mask: false,
+  calibrantInPlot: false,
+  calibrant: "something",
+  plotAxes: PlotAxes.milimeter,
+  edit: (newConfig) => {
+    set({ ...newConfig });
+  },
 }));
diff --git a/src/plot/plotUtils.ts b/src/plot/plotUtils.ts
index 4e28abb..ce4015b 100644
--- a/src/plot/plotUtils.ts
+++ b/src/plot/plotUtils.ts
@@ -3,7 +3,17 @@ import NumericRange from "../calculations/numericRange";
 
 const offset = 10;
 
-export const getDomains = (detector: Detector, cameraTube: CircularDevice): { xAxis: NumericRange, yAxis: NumericRange } => {
-    const maxLength = Math.max(detector.resolution.height, detector.resolution.width, cameraTube.diameter)
-    return { xAxis: new NumericRange(-offset, Math.round(maxLength + offset)), yAxis: new NumericRange(-offset, Math.round(maxLength + offset)) }
-}
\ No newline at end of file
+export const getDomains = (
+  detector: Detector,
+  cameraTube: CircularDevice,
+): { xAxis: NumericRange; yAxis: NumericRange } => {
+  const maxLength = Math.max(
+    detector.resolution.height,
+    detector.resolution.width,
+    cameraTube.diameter,
+  );
+  return {
+    xAxis: new NumericRange(-offset, Math.round(maxLength + offset)),
+    yAxis: new NumericRange(-offset, Math.round(maxLength + offset)),
+  };
+};
diff --git a/src/presets/presetConfigs.json b/src/presets/presetConfigs.json
index 83301f1..df57ff5 100644
--- a/src/presets/presetConfigs.json
+++ b/src/presets/presetConfigs.json
@@ -46,5 +46,29 @@
     "maxWavelength": 1,
     "minCameraLength": 1.9,
     "maxCameraLength": 100
+  },
+  "I22 SAXS Anisotropic": {
+    "detector": "Pilatus P3-2M",
+    "beamstop": {
+      "centre": {
+        "x": 738,
+        "y": 840
+      },
+      "diameter": 4,
+      "clearance": 10
+    },
+    "cameraTube": {
+      "centre": {
+        "x": 738,
+        "y": 840
+      },
+      "diameter": 310
+    },
+    "angle": 1.57,
+    "cameraLength": 1,
+    "minWavelength": 1,
+    "maxWavelength": 1,
+    "minCameraLength": 1.9,
+    "maxCameraLength": 100
   }
-}
\ No newline at end of file
+}
diff --git a/src/presets/presetManager.ts b/src/presets/presetManager.ts
index e78292d..bc4b1bb 100644
--- a/src/presets/presetManager.ts
+++ b/src/presets/presetManager.ts
@@ -1,6 +1,11 @@
 import detectorData from "../presets/detectors.json";
 import presetData from "../presets/presetConfigs.json";
-import { BeamlineConfig, Detector, CircularDevice, Beamstop } from "../utils/types";
+import {
+  BeamlineConfig,
+  Detector,
+  CircularDevice,
+  Beamstop,
+} from "../utils/types";
 
 interface AppDataFormat extends BeamlineConfig {
   detector: string;
@@ -9,7 +14,4 @@ interface AppDataFormat extends BeamlineConfig {
 }
 
 export const detectorList = detectorData as Record<string, Detector>;
-export const presetList = presetData as Record<
-  string,
-  AppDataFormat
->;
+export const presetList = presetData as Record<string, AppDataFormat>;
diff --git a/src/sideMenu.tsx b/src/sideMenu.tsx
index e7b473f..67dc059 100644
--- a/src/sideMenu.tsx
+++ b/src/sideMenu.tsx
@@ -4,7 +4,6 @@ import Divider from "@mui/material/Divider";
 import ListItem from "@mui/material/ListItem";
 import { Stack, Typography } from "@mui/material";
 
-
 // Ad some config options here
 export default function SideMenu() {
   return (
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 8ee841a..ccaa079 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -14,7 +14,7 @@ export interface CircularDevice {
 }
 
 export interface Beamstop extends CircularDevice {
-  clearance: number | null
+  clearance: number | null;
 }
 
 export interface BeamlineConfig {