diff --git a/src/app.tsx b/src/app.tsx
index 54b2e32..0df7c49 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -8,7 +8,7 @@ export default function App(): JSX.Element {
   return (
     <Box margin={1}>
       <Stack direction={"row"} spacing={1}>
-        <Box maxWidth={"40vw"} maxHeight={"92vh"}>
+        <Box >
           <DataSideBar />
         </Box>
         <Stack direction={"column"} spacing={1} flexGrow={1}>
@@ -20,7 +20,7 @@ export default function App(): JSX.Element {
           </Stack>
           <ResultsBar />
         </Stack>
-      </Stack>
-    </Box>
+      </Stack >
+    </Box >
   );
 }
diff --git a/src/components/basicAppBar.tsx b/src/components/basicAppBar.tsx
index bfa71ce..129722f 100644
--- a/src/components/basicAppBar.tsx
+++ b/src/components/basicAppBar.tsx
@@ -8,6 +8,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import { Drawer } from "@mui/material";
 import SideMenu from "./sideMenu";
 
+
 export default function BasicAppBar(): JSX.Element {
   const [state, setState] = React.useState({ menuOpen: false });
   const toggleDrawer = (open: boolean) => () => {
diff --git a/src/components/dataSideBar.tsx b/src/components/dataSideBar.tsx
index 1f14a77..af3b593 100644
--- a/src/components/dataSideBar.tsx
+++ b/src/components/dataSideBar.tsx
@@ -19,26 +19,8 @@ import { BeamlineConfig, DetectorType } from "../utils/types";
 import React from "react";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
+import { DistanceUnits, EnergyUnits, WavelengthUnits, AngleUnits } from "../utils/units";
 
-enum DistanceUnits {
-  millimetre = "millimetre",
-  micrometre = "micrometre",
-}
-
-enum EnergyUnits {
-  electronVolts = "electronVolts",
-  kiloElectronVolts = "kiloElectronVolts",
-}
-
-enum WavelengthUnits {
-  nanmometres = "nanometeres",
-  angstroms = "angstroms",
-}
-
-enum AngleUnits {
-  radians = "radians",
-  degrees = "degrees",
-}
 
 export default function DataSideBar(): JSX.Element {
   const [cameraDiameterUnits, setCameraDiameterUnits] =
@@ -104,7 +86,7 @@ export default function DataSideBar(): JSX.Element {
   };
 
   return (
-    <Card sx={{ height: 1 }}>
+    <Card sx={{ height: 1 }} >
       <CardContent>
         <Stack spacing={1}>
           <Typography variant="h6">Configuration</Typography>
@@ -112,6 +94,7 @@ export default function DataSideBar(): JSX.Element {
           <Typography> Predefined Configuration Templates</Typography>
           <Stack direction={"row"}>
             <Autocomplete
+              size="small"
               disablePortal
               id="combo-box-demo"
               options={Object.values(BeamlineConfig)}
@@ -124,6 +107,7 @@ export default function DataSideBar(): JSX.Element {
           <Divider />
           <Typography variant="h6">Detector</Typography>
           <Autocomplete
+            size="small"
             disablePortal
             id="combo-box-demo"
             options={Object.values(DetectorType)}
@@ -138,13 +122,14 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={pixelSizeUnits}
                 label="units"
                 onChange={handlePixelSizeUnits}
               >
-                <MenuItem value={DistanceUnits.millimetre}>mm x mm</MenuItem>
+                <MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}x{DistanceUnits.millimetre}</MenuItem>
                 <MenuItem value={DistanceUnits.micrometre}>
-                  {"\u03bcm x \u03bcm"}
+                  {DistanceUnits.micrometre}x{DistanceUnits.micrometre}
                 </MenuItem>
               </Select>
             </FormControl>
@@ -157,31 +142,30 @@ export default function DataSideBar(): JSX.Element {
               <FormControl>
                 <InputLabel>units</InputLabel>
                 <Select
+                  size="small"
                   value={beamstopDiameterUnits}
                   label="units"
                   onChange={handleBeamstopDiameterUnits}
                 >
-                  <MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
+                  <MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
                   <MenuItem value={DistanceUnits.micrometre}>
-                    {"\u03bcm"}
+                    {DistanceUnits.micrometre}
                   </MenuItem>
                 </Select>
               </FormControl>
             </Stack>
           </Stack>
           <Divider />
-          <Stack>
-            <Typography variant="h6">Position</Typography>
-            <Stack direction={"row"}>
-              <Typography flexGrow={2}>x:</Typography>
-              <Typography flexGrow={2}>px</Typography>
-            </Stack>
-            <Stack direction={"row"}>
-              <Typography flexGrow={2}>y:</Typography>
-              <Typography flexGrow={2}>px</Typography>
-            </Stack>
-            <Button>Centre detector</Button>
-            <Button>Centre top edge</Button>
+          <Typography variant="h6">Position</Typography>
+          <Stack direction={"row"}>
+            <Typography flexGrow={2}>x:</Typography>
+            <Typography flexGrow={2}>px</Typography>
+            <Button size="small">Centre detector</Button>
+          </Stack>
+          <Stack direction={"row"}>
+            <Typography flexGrow={2}>y:</Typography>
+            <Typography flexGrow={2}>px</Typography>
+            <Button size="small">Centre top edge</Button>
           </Stack>
           <Divider />
           <Typography variant="h6">Clearance</Typography>
@@ -190,13 +174,14 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={clearanceDiameterUnits}
                 label="units"
                 onChange={handleClearanceDiameterUnits}
               >
-                <MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
+                <MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
                 <MenuItem value={DistanceUnits.micrometre}>
-                  {"\u03bcm"}
+                  {DistanceUnits.micrometre}
                 </MenuItem>
               </Select>
             </FormControl>
@@ -208,13 +193,13 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={cameraDiameterUnits}
                 label="units"
                 onChange={handleCameraDiameterUnits}
               >
-                <MenuItem value={DistanceUnits.millimetre}>mm</MenuItem>
-                <MenuItem value={DistanceUnits.micrometre}>
-                  {"\u03bcm"}
+                <MenuItem value={DistanceUnits.millimetre}>{DistanceUnits.millimetre}</MenuItem>
+                <MenuItem value={DistanceUnits.micrometre}>{DistanceUnits.micrometre}
                 </MenuItem>
               </Select>
             </FormControl>
@@ -235,12 +220,13 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={beamEnergyUnits}
                 label="units"
                 onChange={handleBeamEnergyUnits}
               >
-                <MenuItem value={EnergyUnits.electronVolts}>eV</MenuItem>
-                <MenuItem value={EnergyUnits.kiloElectronVolts}>keV</MenuItem>
+                <MenuItem value={EnergyUnits.electronVolts}>{EnergyUnits.electronVolts}</MenuItem>
+                <MenuItem value={EnergyUnits.kiloElectronVolts}>{EnergyUnits.kiloElectronVolts}</MenuItem>
               </Select>
             </FormControl>
           </Stack>
@@ -249,13 +235,13 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={wavelengthUnits}
                 label="units"
                 onChange={handleWavelengthUnits}
               >
-                <MenuItem value={WavelengthUnits.nanmometres}>nm</MenuItem>
-                <MenuItem value={WavelengthUnits.angstroms}>
-                  {"\u212B"}
+                <MenuItem value={WavelengthUnits.nanmometres}>{WavelengthUnits.nanmometres}</MenuItem>
+                <MenuItem value={WavelengthUnits.angstroms}>{WavelengthUnits.angstroms}
                 </MenuItem>
               </Select>
             </FormControl>
@@ -272,6 +258,7 @@ export default function DataSideBar(): JSX.Element {
                 value={cameraLength}
               />
               <Button
+                size="small"
                 onClick={() =>
                   setCameraLength(Math.round((cameraLength - 2.5) * 100) / 100)
                 }
@@ -279,6 +266,7 @@ export default function DataSideBar(): JSX.Element {
                 <RemoveIcon fontSize="small" />
               </Button>
               <Button
+                size="small"
                 onClick={() =>
                   setCameraLength(Math.round((cameraLength + 2.5) * 100) / 100)
                 }
@@ -295,17 +283,18 @@ export default function DataSideBar(): JSX.Element {
             <FormControl>
               <InputLabel>units</InputLabel>
               <Select
+                size="small"
                 value={angleUnits}
                 label="units"
                 onChange={handleAngleUnits}
               >
-                <MenuItem value={AngleUnits.radians}>rad</MenuItem>
-                <MenuItem value={AngleUnits.degrees}>deg</MenuItem>
+                <MenuItem value={AngleUnits.radians}>{AngleUnits.radians}</MenuItem>
+                <MenuItem value={AngleUnits.degrees}>{AngleUnits.degrees}</MenuItem>
               </Select>
             </FormControl>
           </Stack>
         </Stack>
       </CardContent>
-    </Card>
+    </Card >
   );
 }
diff --git a/src/components/resultsBar.tsx b/src/components/resultsBar.tsx
index d950c16..600ef48 100644
--- a/src/components/resultsBar.tsx
+++ b/src/components/resultsBar.tsx
@@ -1,12 +1,74 @@
-import { Box, Card, CardContent, Stack, Typography } from "@mui/material";
+import { Box, Card, CardContent, Divider, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, Typography } from "@mui/material";
+import { AngleUnits } from "../utils/units";
+import React from "react";
+const theta = "\u03B8"
+
+enum ScatteringQuantity {
+    q = "q",
+    d = "d",
+    s = "s",
+    twoTheta = "2" + theta,
+}
+
+
 
 export default function ResultsBar(): JSX.Element {
+    const [angleUnits, setAngleUnits] = React.useState<AngleUnits>(
+        AngleUnits.radians,
+    );
+
+    const handleAngleUnits = (event: SelectChangeEvent) => {
+        setAngleUnits(event.target.value as AngleUnits);
+    };
+    const [quantity, setQuantity] = React.useState<ScatteringQuantity>(
+        ScatteringQuantity.q
+    );
+
+    const handleQuantity = (event: SelectChangeEvent) => {
+        setQuantity(event.target.value as ScatteringQuantity);
+    };
+
     return (
         <Box sx={{ flexGrow: 2 }}>
             <Card sx={{ height: 1 }}>
                 <CardContent>
                     <Stack spacing={2}>
-                        <Typography variant="h4"> Results bottom bar </Typography>
+                        <Typography variant="h6"> Results bottom bar </Typography>
+                        <Divider />
+                        <Stack direction={"row"} spacing={3}>
+                            <Typography>Scattering quantity: </Typography>
+                            <FormControl>
+                                <InputLabel>quantity</InputLabel>
+                                <Select
+                                    size="small"
+                                    value={quantity}
+                                    label="units"
+                                    onChange={handleQuantity}
+                                >
+                                    <MenuItem value={ScatteringQuantity.q}>{ScatteringQuantity.q}</MenuItem>
+                                    <MenuItem value={ScatteringQuantity.d}>{ScatteringQuantity.d}</MenuItem>
+                                    <MenuItem value={ScatteringQuantity.s}>{ScatteringQuantity.s}</MenuItem>
+                                    <MenuItem value={ScatteringQuantity.twoTheta}>{ScatteringQuantity.twoTheta}</MenuItem>
+
+                                </Select>
+                            </FormControl>
+                            <FormControl>
+                                <InputLabel>units</InputLabel>
+                                <Select
+                                    size="small"
+                                    value={angleUnits}
+                                    label="units"
+                                    onChange={handleAngleUnits}
+                                >
+                                    <MenuItem value={AngleUnits.radians}>rad</MenuItem>
+                                    <MenuItem value={AngleUnits.degrees}>deg</MenuItem>
+                                </Select>
+                            </FormControl>
+                        </Stack>
+                        <Typography>Min {quantity} value: </Typography>
+                        <Typography>Max {quantity} value: </Typography>
+                        <Typography>Requested min {quantity} value: </Typography>
+                        <Typography>Requested max {quantity} value: </Typography>
                     </Stack>
                 </CardContent>
             </Card>
diff --git a/src/main.tsx b/src/main.tsx
index 8d93f3a..5ce9948 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,6 +5,8 @@ import BasicAppBar from "./components/basicAppBar.tsx";
 import "./index.css";
 import { Box } from "@mui/material";
 
+
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Box>
diff --git a/src/utils/types.ts b/src/utils/types.ts
index d96a748..1026ee1 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,4 +1,4 @@
-import Vector2D from "../calculations/vector";
+import { Vector2 } from "three";
 
 export enum BeamlineConfig {
   SaxAnIso = "I22 SAXS Anisotropic",
@@ -23,10 +23,10 @@ export interface Detector {
 
 export interface Beamstop {
   diameter: number;
-  position: Vector2D;
+  position: Vector2;
 }
 
 export interface CameraTube {
   diameter: number;
-  position: Vector2D;
+  position: Vector2;
 }
diff --git a/src/utils/units.ts b/src/utils/units.ts
new file mode 100644
index 0000000..50aabfd
--- /dev/null
+++ b/src/utils/units.ts
@@ -0,0 +1,22 @@
+const mu = "\u03bc"
+const angstrum = "\u212B"
+
+export enum DistanceUnits {
+    millimetre = "mm",
+    micrometre = mu + "m",
+}
+
+export enum EnergyUnits {
+    electronVolts = "eV",
+    kiloElectronVolts = "keV",
+}
+
+export enum WavelengthUnits {
+    nanmometres = "nm",
+    angstroms = angstrum
+}
+
+export enum AngleUnits {
+    radians = "rad",
+    degrees = "deg",
+}
\ No newline at end of file