diff --git a/frontend/tomography/src/components/loader/Loader.tsx b/frontend/tomography/src/components/loader/Loader.tsx
index 0ba90610..e70f73b6 100644
--- a/frontend/tomography/src/components/loader/Loader.tsx
+++ b/frontend/tomography/src/components/loader/Loader.tsx
@@ -11,6 +11,7 @@ import {
   Modal,
   Tooltip,
   InputAdornment,
+  Stack,
 } from "@mui/material";
 import ContrastIcon from "@mui/icons-material/Contrast";
 import PreviewIcon from "@mui/icons-material/Visibility";
@@ -185,55 +186,25 @@ const Loader: React.FC = () => {
         </Box>
       </Box>
 
-      <TextField
-        label="data path"
-        variant="outlined"
-        fullWidth
-        size="small"
-        value={autoToggles.dataPath ? "auto" : parameters.data_path || ""}
-        disabled={autoToggles.dataPath}
-        onChange={(e) => {
-          if (!autoToggles.dataPath) setDataPath(e.target.value);
-        }}
-        placeholder="path to the dataset in the input hdf5/NeXuS file containing image data"
-        sx={{ mb: 1 }}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <Button
-                onClick={() => handleAutoToggle("dataPath")}
-                variant={autoToggles.dataPath ? "contained" : "outlined"}
-                size="small"
-                sx={{ mr: -1 }}
-              >
-                auto
-              </Button>
-            </InputAdornment>
-          ),
-        }}
-      />
-
-      {!showExtraFields && (
+      <Stack direction="column">
         <TextField
-          label="image path"
+          label="data path"
           variant="outlined"
           fullWidth
           size="small"
-          value={
-            autoToggles.imagePath ? "auto" : parameters.image_key_path || ""
-          }
-          disabled={autoToggles.imagePath}
+          value={autoToggles.dataPath ? "auto" : parameters.data_path || ""}
+          disabled={autoToggles.dataPath}
           onChange={(e) => {
-            if (!autoToggles.imagePath) setImageKeyPath(e.target.value);
+            if (!autoToggles.dataPath) setDataPath(e.target.value);
           }}
-          placeholder="path to the image key in your data"
+          placeholder="path to the dataset in the input hdf5/NeXuS file containing image data"
           sx={{ mb: 1 }}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
                 <Button
-                  onClick={() => handleAutoToggle("imagePath")}
-                  variant={autoToggles.imagePath ? "contained" : "outlined"}
+                  onClick={() => handleAutoToggle("dataPath")}
+                  variant={autoToggles.dataPath ? "contained" : "outlined"}
                   size="small"
                   sx={{ mr: -1 }}
                 >
@@ -243,193 +214,225 @@ const Loader: React.FC = () => {
             ),
           }}
         />
-      )}
 
-      <ToggleButtonGroup
-        value={mode}
-        exclusive
-        size="small"
-        color="primary"
-        onChange={handleModeChange}
-        aria-label="Rotation Angle Mode"
-        fullWidth
-        sx={{ mb: 1 }}
-      >
-        <ToggleButton value="setAddress" aria-label="Set Address">
-          use rotation angle within data
-        </ToggleButton>
-        <ToggleButton value="defineCustom" aria-label="Define Custom">
-          set custom rotation angle
-        </ToggleButton>
-      </ToggleButtonGroup>
+        {!showExtraFields && (
+          <TextField
+            label="image path"
+            variant="outlined"
+            fullWidth
+            size="small"
+            value={
+              autoToggles.imagePath ? "auto" : parameters.image_key_path || ""
+            }
+            disabled={autoToggles.imagePath}
+            onChange={(e) => {
+              if (!autoToggles.imagePath) setImageKeyPath(e.target.value);
+            }}
+            placeholder="path to the image key in your data"
+            sx={{ mb: 1 }}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Button
+                    onClick={() => handleAutoToggle("imagePath")}
+                    variant={autoToggles.imagePath ? "contained" : "outlined"}
+                    size="small"
+                    sx={{ mr: -1 }}
+                  >
+                    auto
+                  </Button>
+                </InputAdornment>
+              ),
+            }}
+          />
+        )}
 
-      {/* Input Fields */}
-      {mode === "setAddress" ? (
-        <TextField
-          label="Path to rotation angle"
-          variant="outlined"
-          fullWidth
+        <ToggleButtonGroup
+          value={mode}
+          exclusive
           size="small"
-          value={
-            autoToggles.rotationAnglePath
-              ? "auto"
-              : parameters.rotation_angles.data_path || ""
-          }
-          disabled={autoToggles.rotationAnglePath}
-          onChange={(e) => {
-            if (!autoToggles.rotationAnglePath)
-              setRotationAnglesDataPath(e.target.value);
-          }}
-          placeholder="Path to rotation angle dataset in your data"
+          color="primary"
+          onChange={handleModeChange}
+          aria-label="Rotation Angle Mode"
+          fullWidth
           sx={{ mb: 1 }}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <Button
-                  onClick={() => handleAutoToggle("rotationAnglePath")}
-                  variant={
-                    autoToggles.rotationAnglePath ? "contained" : "outlined"
-                  }
-                  size="small"
-                  sx={{ mr: -1 }}
-                >
-                  auto
-                </Button>
-              </InputAdornment>
-            ),
-          }}
-        />
-      ) : (
-        <Grid container spacing={2} sx={{ mb: 1 }}>
-          <Grid size={{ xs: 4 }}>
-            <TextField
-              label="Start angle"
-              variant="outlined"
-              fullWidth
-              type="number"
-              size="small"
-              value={
-                parameters.rotation_angles.user_defined?.start_angle || null
-              }
-              onChange={(e) =>
-                setUserDefinedRotationAngles(
-                  Number(e.target.value),
-                  parameters.rotation_angles.user_defined?.stop_angle || 0,
-                  parameters.rotation_angles.user_defined?.angles_total || 0
-                )
-              }
-              placeholder="First angle"
-            />
-          </Grid>
-          <Grid size={{ xs: 4 }}>
-            <TextField
-              label="Stop angle"
-              variant="outlined"
-              fullWidth
-              type="number"
-              size="small"
-              value={
-                parameters.rotation_angles.user_defined?.stop_angle || null
-              }
-              onChange={(e) =>
-                setUserDefinedRotationAngles(
-                  parameters.rotation_angles.user_defined?.start_angle || 0,
-                  Number(e.target.value),
-                  parameters.rotation_angles.user_defined?.angles_total || 0
-                )
-              }
-              placeholder="Last angle"
-            />
-          </Grid>
-          <Grid size={{ xs: 4 }}>
-            <TextField
-              label="Total angle"
-              variant="outlined"
-              fullWidth
-              type="number"
-              size="small"
-              value={
-                parameters.rotation_angles.user_defined?.angles_total || null
-              }
-              onChange={(e) =>
-                setUserDefinedRotationAngles(
-                  parameters.rotation_angles.user_defined?.start_angle || 0,
-                  parameters.rotation_angles.user_defined?.stop_angle || 0,
-                  Number(e.target.value)
-                )
-              }
-              placeholder="Total angles between"
-            />
-          </Grid>
-        </Grid>
-      )}
+        >
+          <ToggleButton value="setAddress" aria-label="Set Address">
+            use rotation angle within data
+          </ToggleButton>
+          <ToggleButton value="defineCustom" aria-label="Define Custom">
+            set custom rotation angle
+          </ToggleButton>
+        </ToggleButtonGroup>
 
-      {showExtraFields && (
-        <Grid container spacing={2}>
-          <Grid size={{ xs: 6 }}>
-            <Typography variant="subtitle1" gutterBottom>
-              Darks
-            </Typography>
-            <TextField
-              label="Path to darks file"
-              variant="outlined"
-              fullWidth
-              type="text"
-              size="small"
-              value={parameters.darks?.file || ""}
-              onChange={(e) =>
-                setDarks(e.target.value, parameters.darks?.data_path || "")
-              }
-              sx={{ mb: 1 }}
-              placeholder="path to the hdf5/NeXuS darks file "
-            />
-            <TextField
-              label="Data path"
-              variant="outlined"
-              fullWidth
-              size="small"
-              type="text"
-              value={parameters.darks?.data_path || ""}
-              onChange={(e) =>
-                setDarks(parameters.darks?.file || "", e.target.value)
-              }
-              sx={{ mb: 1 }}
-              placeholder="dataset that contains the darks data"
-            />
+        {/* Input Fields */}
+        {mode === "setAddress" ? (
+          <TextField
+            label="Path to rotation angle"
+            variant="outlined"
+            fullWidth
+            size="small"
+            value={
+              autoToggles.rotationAnglePath
+                ? "auto"
+                : parameters.rotation_angles.data_path || ""
+            }
+            disabled={autoToggles.rotationAnglePath}
+            onChange={(e) => {
+              if (!autoToggles.rotationAnglePath)
+                setRotationAnglesDataPath(e.target.value);
+            }}
+            placeholder="Path to rotation angle dataset in your data"
+            sx={{ mb: 1 }}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Button
+                    onClick={() => handleAutoToggle("rotationAnglePath")}
+                    variant={
+                      autoToggles.rotationAnglePath ? "contained" : "outlined"
+                    }
+                    size="small"
+                    sx={{ mr: -1 }}
+                  >
+                    auto
+                  </Button>
+                </InputAdornment>
+              ),
+            }}
+          />
+        ) : (
+          <Grid container spacing={2} sx={{ mb: 1 }}>
+            <Grid size={{ xs: 4 }}>
+              <TextField
+                label="Start angle"
+                variant="outlined"
+                fullWidth
+                type="number"
+                size="small"
+                value={
+                  parameters.rotation_angles.user_defined?.start_angle || null
+                }
+                onChange={(e) =>
+                  setUserDefinedRotationAngles(
+                    Number(e.target.value),
+                    parameters.rotation_angles.user_defined?.stop_angle || 0,
+                    parameters.rotation_angles.user_defined?.angles_total || 0
+                  )
+                }
+                placeholder="First angle"
+              />
+            </Grid>
+            <Grid size={{ xs: 4 }}>
+              <TextField
+                label="Stop angle"
+                variant="outlined"
+                fullWidth
+                type="number"
+                size="small"
+                value={
+                  parameters.rotation_angles.user_defined?.stop_angle || null
+                }
+                onChange={(e) =>
+                  setUserDefinedRotationAngles(
+                    parameters.rotation_angles.user_defined?.start_angle || 0,
+                    Number(e.target.value),
+                    parameters.rotation_angles.user_defined?.angles_total || 0
+                  )
+                }
+                placeholder="Last angle"
+              />
+            </Grid>
+            <Grid size={{ xs: 4 }}>
+              <TextField
+                label="Total angle"
+                variant="outlined"
+                fullWidth
+                type="number"
+                size="small"
+                value={
+                  parameters.rotation_angles.user_defined?.angles_total || null
+                }
+                onChange={(e) =>
+                  setUserDefinedRotationAngles(
+                    parameters.rotation_angles.user_defined?.start_angle || 0,
+                    parameters.rotation_angles.user_defined?.stop_angle || 0,
+                    Number(e.target.value)
+                  )
+                }
+                placeholder="Total angles between"
+              />
+            </Grid>
           </Grid>
-          <Grid size={{ xs: 6 }}>
-            <Typography variant="subtitle1" gutterBottom>
-              Flats
-            </Typography>
-            <TextField
-              label="Path to flats file"
-              variant="outlined"
-              fullWidth
-              size="small"
-              type="text"
-              value={parameters.flats?.file || ""}
-              onChange={(e) =>
-                setFlats(e.target.value, parameters.flats?.data_path || "")
-              }
-              sx={{ mb: 1 }}
-              placeholder="path to the hdf5/NeXuS flats file"
-            />
-            <TextField
-              label="Data path"
-              type="text"
-              variant="outlined"
-              fullWidth
-              size="small"
-              value={parameters.flats?.data_path || ""}
-              onChange={(e) =>
-                setFlats(parameters.flats?.file || "", e.target.value)
-              }
-              sx={{ mb: 1 }}
-              placeholder="dataset that contains the flats data"
-            />
+        )}
+
+        {showExtraFields && (
+          <Grid container spacing={2}>
+            <Grid size={{ xs: 6 }}>
+              <Typography variant="subtitle1" gutterBottom>
+                Darks
+              </Typography>
+              <TextField
+                label="Path to darks file"
+                variant="outlined"
+                fullWidth
+                type="text"
+                size="small"
+                value={parameters.darks?.file || ""}
+                onChange={(e) =>
+                  setDarks(e.target.value, parameters.darks?.data_path || "")
+                }
+                sx={{ mb: 1 }}
+                placeholder="path to the hdf5/NeXuS darks file "
+              />
+              <TextField
+                label="Data path"
+                variant="outlined"
+                fullWidth
+                size="small"
+                type="text"
+                value={parameters.darks?.data_path || ""}
+                onChange={(e) =>
+                  setDarks(parameters.darks?.file || "", e.target.value)
+                }
+                sx={{ mb: 1 }}
+                placeholder="dataset that contains the darks data"
+              />
+            </Grid>
+            <Grid size={{ xs: 6 }}>
+              <Typography variant="subtitle1" gutterBottom>
+                Flats
+              </Typography>
+              <TextField
+                label="Path to flats file"
+                variant="outlined"
+                fullWidth
+                size="small"
+                type="text"
+                value={parameters.flats?.file || ""}
+                onChange={(e) =>
+                  setFlats(e.target.value, parameters.flats?.data_path || "")
+                }
+                sx={{ mb: 1 }}
+                placeholder="path to the hdf5/NeXuS flats file"
+              />
+              <TextField
+                label="Data path"
+                type="text"
+                variant="outlined"
+                fullWidth
+                size="small"
+                value={parameters.flats?.data_path || ""}
+                onChange={(e) =>
+                  setFlats(parameters.flats?.file || "", e.target.value)
+                }
+                sx={{ mb: 1 }}
+                placeholder="dataset that contains the flats data"
+              />
+            </Grid>
           </Grid>
-        </Grid>
-      )}
+        )}
+      </Stack>
 
       <Modal open={isPreviewModalOpen} onClose={handleClosePreviewModal}>
         <Box
diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx
index 1650a7d7..cbdbdb6d 100644
--- a/frontend/unified/src/App.tsx
+++ b/frontend/unified/src/App.tsx
@@ -187,20 +187,12 @@ export const App: React.FC = () => {
         </Stack>
 
         <ApolloProvider client={apolloClientWorkflows}>
-          <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
-            <Stack spacing={VERTICAL_SPACING} width="500px">
-              <Suspense>
-                <ProcessingView
-                  key={`process-${sessionName}`}
-                  visit={selectedVisit}
-                  beamline={beamline}
-                  startTime={session.startTime}
-                  scanIds={selectedScanIds}
-                />
-              </Suspense>
-            </Stack>
-            <WorkflowsDataFetcher visit={selectedVisit} />
-          </Grid>
+          <WorkflowsDataFetcher
+            visit={selectedVisit}
+            beamline={beamline}
+            startTime={session.startTime}
+            scanIds={selectedScanIds}
+          />
         </ApolloProvider>
       </>
     );
diff --git a/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowDataViewer.tsx b/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowDataViewer.tsx
index 6921bb69..00fadd1a 100644
--- a/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowDataViewer.tsx
+++ b/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowDataViewer.tsx
@@ -1,73 +1,115 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from "@mui/material";
+import { useEffect, useState } from "react";
+import { Tabs, Tab } from "@mui/material";
 import { Visit } from "@diamondlightsource/sci-react-ui";
 import LogStreamer from "./LogStreamer/LogStreamer";
 import { Plot } from "./Plot/Plot";
 import { useSuspenseQuery } from "@apollo/client/react";
 import InspectLogMeta from "./InspectLogMeta";
-import { ChevronDown } from "lucide-react";
 import { WORKFLOWDATAVIEWER_QUERY } from "../../graphql/WorkflowDataFetcher/WorkflowDataViewerQuery";
+import { Beamline } from "../../types";
+import { InstrumentSession } from "../SessionSelector";
+import ProcessingView from "../ProcessingView/ProcessingView";
+
+const EMPTY_WORKFLOW_NAME_QUERY_ERROR = "resource name may not be empty";
 
 const WorkflowDataViewer = ({
   visit,
   selectedWorkflow,
+  beamline,
+  startTime,
+  scanIds,
 }: {
   visit: Visit;
-  selectedWorkflow: string;
+  selectedWorkflow: string | null;
+  beamline: Beamline;
+  startTime: InstrumentSession["startTime"];
+  scanIds: number[];
 }) => {
+  const [tabIndex, setTabIndex] = useState<number>(0);
   const { data, error } = useSuspenseQuery(WORKFLOWDATAVIEWER_QUERY, {
     variables: {
       visit: visit,
-      name: selectedWorkflow,
+      name: selectedWorkflow ?? "",
     },
+    errorPolicy: "all",
   });
 
-  if (error) return <>Error: {error.message}</>;
-  if (!data) return <>No data</>;
-  if (!data.workflow) return <>No workflow data</>;
+  useEffect(() => {
+    if (!selectedWorkflow) {
+      setTabIndex(0);
+    }
+  }, [selectedWorkflow]);
+
+  if (error && !error.message.includes(EMPTY_WORKFLOW_NAME_QUERY_ERROR))
+    return <>Error: {error.message}</>;
+  if (!error && !data) return <>No data</>;
 
   return (
     <>
-      <Accordion defaultExpanded>
-        <AccordionSummary id="log" expandIcon={<ChevronDown />}>
-          <Typography variant="h5">Log</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <InspectLogMeta queryData={data.workflow} />
-        </AccordionDetails>
-      </Accordion>
+      <Tabs
+        variant="fullWidth"
+        value={tabIndex}
+        onChange={(_, newValue: number) => setTabIndex(newValue)}
+      >
+        <Tab label="Process" />
+        <Tab
+          label="View"
+          disabled={
+            selectedWorkflow === null ||
+            data === undefined ||
+            data.workflow === undefined
+          }
+        />
+        <Tab
+          label="Log"
+          disabled={
+            selectedWorkflow === null ||
+            data === undefined ||
+            data.workflow === undefined
+          }
+        />
+      </Tabs>
+      {selectedWorkflow && data && data.workflow && (
+        <>
+          <TabContent index={2} selectedIndex={tabIndex}>
+            <InspectLogMeta queryData={data.workflow} />
+            <LogStreamer
+              visit={visit}
+              selectedWorkflow={selectedWorkflow}
+              queryData={data.workflow}
+            />
+          </TabContent>
 
-      <Accordion defaultExpanded>
-        <AccordionSummary id="log-streamer" expandIcon={<ChevronDown />}>
-          <Typography variant="h5">Log Stream</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <LogStreamer
-            visit={visit}
-            selectedWorkflow={selectedWorkflow}
-            queryData={data.workflow}
-          />
-        </AccordionDetails>
-      </Accordion>
+          <TabContent index={1} selectedIndex={tabIndex}>
+            <Plot
+              workflowName={selectedWorkflow}
+              visit={visit}
+              queryData={data.workflow}
+            />
+          </TabContent>
+        </>
+      )}
 
-      <Accordion defaultExpanded>
-        <AccordionSummary id="plot" expandIcon={<ChevronDown />}>
-          <Typography variant="h5">Plot</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Plot
-            workflowName={selectedWorkflow}
-            visit={visit}
-            queryData={data.workflow}
-          />
-        </AccordionDetails>
-      </Accordion>
+      <TabContent index={0} selectedIndex={tabIndex}>
+        <ProcessingView
+          visit={visit}
+          beamline={beamline}
+          startTime={startTime}
+          scanIds={scanIds}
+        />
+      </TabContent>
     </>
   );
 };
 
+type TabContentProps = {
+  index: number;
+  selectedIndex: number;
+  children: React.ReactNode;
+};
+
+const TabContent = ({ children, index, selectedIndex }: TabContentProps) => {
+  return <div hidden={index !== selectedIndex}>{children}</div>;
+};
+
 export default WorkflowDataViewer;
diff --git a/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowsDataFetcher.tsx b/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowsDataFetcher.tsx
index 7f5a3e73..56d8deb2 100644
--- a/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowsDataFetcher.tsx
+++ b/frontend/unified/src/components/WorkflowsDataFetcher/WorkflowsDataFetcher.tsx
@@ -5,16 +5,28 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Stack,
   Typography,
 } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import WorkflowDataViewer from "./WorkflowDataViewer";
+import { Beamline } from "../../types";
+import { InstrumentSession } from "../SessionSelector";
 
-const WorkflowsDataFetcher = ({ visit }: { visit: Visit }) => {
+const WorkflowsDataFetcher = ({
+  visit,
+  beamline,
+  startTime,
+  scanIds,
+}: {
+  visit: Visit;
+
+  beamline: Beamline;
+  startTime: InstrumentSession["startTime"];
+  scanIds: number[];
+}) => {
   const [selectedWorkflow, setSelectedWorkflow] = useState<string | null>(null);
   return (
-    <Stack direction="column">
+    <>
       <Suspense>
         <Accordion defaultExpanded>
           <AccordionSummary id="jobs" expandIcon={<ChevronDown />}>
@@ -29,15 +41,16 @@ const WorkflowsDataFetcher = ({ visit }: { visit: Visit }) => {
           </AccordionDetails>
         </Accordion>
       </Suspense>
-      {selectedWorkflow && (
-        <Suspense>
-          <WorkflowDataViewer
-            visit={visit}
-            selectedWorkflow={selectedWorkflow}
-          />
-        </Suspense>
-      )}
-    </Stack>
+      <Suspense>
+        <WorkflowDataViewer
+          visit={visit}
+          selectedWorkflow={selectedWorkflow}
+          beamline={beamline}
+          startTime={startTime}
+          scanIds={scanIds}
+        />
+      </Suspense>
+    </>
   );
 };