diff --git a/apps/i15-1/package.json b/apps/i15-1/package.json
index d4ab43a0..4bc672b9 100644
--- a/apps/i15-1/package.json
+++ b/apps/i15-1/package.json
@@ -15,7 +15,7 @@
     "@atlas/blueapi-query": "workspace:*",
     "@atlas/pvws-config": "workspace:*",
     "@diamondlightsource/cs-web-lib": "0.9.5",
-    "@diamondlightsource/sci-react-ui": "^0.4.0",
+    "@diamondlightsource/sci-react-ui": "file:../../diamondlightsource-sci-react-ui-0.4.1.tgz",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "<7.0.0",
     "@tanstack/react-query": "^5.90.21",
diff --git a/apps/i15-1/src/main.tsx b/apps/i15-1/src/main.tsx
index ee99aca5..a03b6385 100644
--- a/apps/i15-1/src/main.tsx
+++ b/apps/i15-1/src/main.tsx
@@ -1,4 +1,4 @@
-import { DiamondTheme } from "@diamondlightsource/sci-react-ui";
+import { DiamondDSTheme } from "@diamondlightsource/sci-react-ui";
 import { RouterProvider } from "react-router-dom";
 import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
@@ -20,7 +20,7 @@ const api = createApi("/api");
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
     <StrictMode>
-      <AppProviders api={api} theme={DiamondTheme}>
+      <AppProviders api={api} theme={DiamondDSTheme}>
         <RouterProvider router={router} />
       </AppProviders>
     </StrictMode>,
diff --git a/diamondlightsource-sci-react-ui-0.4.1.tgz b/diamondlightsource-sci-react-ui-0.4.1.tgz
new file mode 100644
index 00000000..409ee7e7
Binary files /dev/null and b/diamondlightsource-sci-react-ui-0.4.1.tgz differ
diff --git a/packages/app-shell/src/Layout.tsx b/packages/app-shell/src/Layout.tsx
index 3027a35c..0e8d1a00 100644
--- a/packages/app-shell/src/Layout.tsx
+++ b/packages/app-shell/src/Layout.tsx
@@ -1,18 +1,34 @@
+import { Toolbar } from "@mui/material";
 import Box from "@mui/material/Box";
-import { Outlet } from "react-router-dom";
-import { SideNav } from "./SideNav";
+import { NavLink, Outlet } from "react-router-dom";
+import { routePath, type RouterProps } from "./Router";
+import { SidebarNav, type Navigation } from "./SidebarNav";
 import { TopBar } from "./TopBar";
-import type { RouterProps } from "./Router";
 import { usePersistentDrawerState } from "./usePersistentDrawerState";
-import { Toolbar } from "@mui/material";
+
+export function toNavItemGroups(routerProps: RouterProps): Navigation {
+  return routerProps.navigation.map((group) => ({
+    name: group.name,
+    navItems: group.sections.map((section) => ({
+      label: section.name,
+      icon: section.icon,
+      linkProps: {
+        to: routePath(section),
+        component: NavLink,
+      },
+    })),
+  }));
+}
 
 export function Layout(props: RouterProps) {
   const { open, setOpen } = usePersistentDrawerState();
 
+  const navigation = toNavItemGroups(props);
+
   return (
     <Box sx={{ display: "flex" }}>
       <TopBar title={props.title} open={open} setOpen={setOpen} />
-      <SideNav navigation={props.navigation} open={open} />
+      <SidebarNav navigation={navigation} open={open} />
       <Box component="main" sx={{ flexGrow: 1 }}>
         {/* The Toolbar acts as a spacer,
             same size as the toolbar used inside the TopBar's AppBar*/}
diff --git a/packages/app-shell/src/Router.tsx b/packages/app-shell/src/Router.tsx
index 1d70011f..19d8ae08 100644
--- a/packages/app-shell/src/Router.tsx
+++ b/packages/app-shell/src/Router.tsx
@@ -55,7 +55,7 @@ export function sanitisePath(name: string) {
   return name.toLowerCase().replace(/\s/g, "_");
 }
 
-function routePath(route: LabelledRoute) {
+export function routePath(route: LabelledRoute) {
   return route.path ?? sanitisePath(route.name);
 }
 
diff --git a/packages/app-shell/src/SideNav.tsx b/packages/app-shell/src/SideNav.tsx
deleted file mode 100644
index b6b1f78f..00000000
--- a/packages/app-shell/src/SideNav.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  Box,
-  Divider,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Tooltip,
-} from "@mui/material";
-import { NavLink } from "react-router-dom";
-import type { Section, SectionGroup } from "./Router";
-import type React from "react";
-import { Fragment } from "react";
-
-interface SideNavProps {
-  navigation: SectionGroup[];
-  open: boolean;
-}
-
-export function SideNav({ navigation, open }: SideNavProps) {
-  const width = open ? 256 : 72;
-
-  return (
-    <Drawer
-      variant="permanent"
-      sx={{
-        width: width,
-        flexShrink: 0,
-        [`& .MuiDrawer-paper`]: {
-          width: width,
-          boxSizing: "border-box",
-        },
-      }}
-    >
-      <Toolbar /> {/* spacer equal to the AppBar's height*/}
-      <Box sx={{ overflow: "auto" }}>
-        <List
-          sx={{
-            p: 1,
-            flexDirection: "column",
-          }}
-        >
-          {navigation.map((group, groupIndex) => (
-            <Fragment key={groupIndex}>
-              {groupIndex > 0 && <Divider />}
-              {group.sections.map((route) => (
-                <Entry key={route.path} route={route} open={open} />
-              ))}
-            </Fragment>
-          ))}
-        </List>
-      </Box>
-    </Drawer>
-  );
-}
-
-interface EntryProps {
-  route: Section;
-  open: boolean;
-}
-
-function Entry(props: EntryProps) {
-  const route = props.route;
-  const icon = (
-    <ListItemIcon
-      sx={{
-        minWidth: 0,
-        mr: 2,
-      }}
-    >
-      {route.icon}
-    </ListItemIcon>
-  );
-  return (
-    <ListItem disablePadding>
-      <ListItemButton
-        component={NavLink as React.ElementType}
-        to={route.path}
-        sx={{
-          "&.active": {
-            bgcolor: "action.selected",
-          },
-        }}
-        aria-label={route.name}
-      >
-        {props.open ? (
-          icon
-        ) : (
-          <Tooltip title={route.name} placement="right">
-            {icon}
-          </Tooltip>
-        )}
-        <ListItemText // always render but conditionally hide
-          primary={route.name}
-          sx={{
-            opacity: props.open ? 1 : 0,
-            width: props.open ? "auto" : 0,
-            overflow: "hidden",
-            transition: "0.2s",
-          }}
-        />
-      </ListItemButton>
-    </ListItem>
-  );
-}
diff --git a/packages/app-shell/src/SideNav.test.tsx b/packages/app-shell/src/SidebarNav.test.tsx
similarity index 78%
rename from packages/app-shell/src/SideNav.test.tsx
rename to packages/app-shell/src/SidebarNav.test.tsx
index 46397276..087ea3d1 100644
--- a/packages/app-shell/src/SideNav.test.tsx
+++ b/packages/app-shell/src/SidebarNav.test.tsx
@@ -1,9 +1,9 @@
 import { render, screen, userEvent } from "@atlas/vitest-conf";
-import { SideNav } from "./SideNav";
-import type { Section, SectionGroup } from "./Router";
+import { SidebarNav } from "./SidebarNav";
+import type { SectionGroup } from "./Router";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
 
-describe("SideNav", () => {
+describe("SidebarNav", () => {
   const groups: SectionGroup[] = [
     {
       sections: [
@@ -24,13 +24,22 @@ describe("SideNav", () => {
         },
       ],
     },
+    {
+      sections: [
+        {
+          name: "Log",
+          icon: <div data-testid="navicon4" />,
+          pages: [],
+        },
+      ],
+    },
   ];
 
   function renderSidenav(open: boolean) {
     const router = createMemoryRouter([
       {
         path: "/",
-        element: <SideNav navigation={groups} open={open} />,
+        element: <SidebarNav navigation={groups} open={open} />,
       },
     ]);
     render(<RouterProvider router={router} />);
@@ -47,7 +56,7 @@ describe("SideNav", () => {
       const label = screen.getByText(route.name);
       expect(label).toBeVisible();
     });
-    ["navicon1", "navicon2", "navicon3"].forEach((id) =>
+    ["navicon1", "navicon2", "navicon3", "navicon4"].forEach((id) =>
       expect(screen.getByTestId(id)).toBeVisible(),
     );
   });
@@ -62,7 +71,7 @@ describe("SideNav", () => {
       expect(label).toBeInTheDocument(); // label exists but
       expect(label).not.toBeVisible(); // not visible
     });
-    ["navicon1", "navicon2", "navicon3"].forEach((id) =>
+    ["navicon1", "navicon2", "navicon3", "navicon4"].forEach((id) =>
       expect(screen.getByTestId(id)).toBeVisible(),
     );
   });
@@ -91,4 +100,10 @@ describe("SideNav", () => {
     });
     expect(tooltip).not.toBeInTheDocument();
   });
+
+  it("creates divider between nav sections", () => {
+    renderSidenav(true);
+    const divider = screen.queryByRole("separator");
+    expect(divider).toBeInTheDocument();
+  });
 });
diff --git a/packages/app-shell/src/SidebarNav.tsx b/packages/app-shell/src/SidebarNav.tsx
new file mode 100644
index 00000000..8187c6a2
--- /dev/null
+++ b/packages/app-shell/src/SidebarNav.tsx
@@ -0,0 +1,171 @@
+import {
+  Box,
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Tooltip,
+  type Theme,
+} from "@mui/material";
+import { Fragment, type ElementType, type ReactNode } from "react";
+
+export type Navigation = NavItemGroup[];
+
+type NavItemGroup = {
+  name?: string;
+  navItems: NavItemDefinition[];
+};
+
+type NavItemDefinition = {
+  label: string;
+  icon: ReactNode;
+  linkProps: LinkProps;
+};
+
+type LinkProps = ExternalLinkProps | InternalLinkProps;
+
+/** For native anchor tags */
+type ExternalLinkProps = {
+  href: string;
+  component?: never;
+  to?: never;
+};
+
+/** For SPA navigation */
+type InternalLinkProps = {
+  component: ElementType;
+  to: string;
+  href?: never;
+};
+
+const drawerTransition = (theme: Theme, opening: boolean) => {
+  return theme.transitions.create("width", {
+    easing: opening
+      ? theme.transitions.easing.easeIn
+      : theme.transitions.easing.easeOut,
+    duration: opening
+      ? theme.transitions.duration.enteringScreen
+      : theme.transitions.duration.leavingScreen,
+  });
+};
+
+type NavProps = {
+  navigation: Navigation;
+  open: boolean;
+};
+
+export function SidebarNav({ navigation, open }: NavProps) {
+  const width = open ? 257 : 65; // 256/64 + 1 pixel for the border
+  return (
+    <Drawer
+      variant="permanent"
+      sx={(theme) => ({
+        width: width,
+        flexShrink: 0,
+        transition: (theme) => drawerTransition(theme, open),
+        [`& .MuiDrawer-paper`]: {
+          width: width,
+          boxSizing: "border-box",
+          transition: drawerTransition(theme, open),
+        },
+      })}
+    >
+      <Toolbar /> {/* spacer equal to the AppBar's height*/}
+      <Box sx={{ overflow: "auto" }}>
+        <List
+          sx={{
+            p: 1,
+            flexDirection: "column",
+          }}
+        >
+          {navigation.map((group, groupIndex) => (
+            <Fragment key={groupIndex}>
+              {groupIndex > 0 && <SectionDivider />}
+              {group.navItems.map((item, itemIndex) => {
+                return (
+                  <NavItem key={itemIndex} definition={item} open={open} />
+                );
+              })}
+            </Fragment>
+          ))}
+        </List>
+      </Box>
+    </Drawer>
+  );
+}
+
+function SectionDivider() {
+  return (
+    <Box sx={{ mb: 0.5 }}>
+      <Divider />
+    </Box>
+  );
+}
+
+interface NavItemProps {
+  definition: NavItemDefinition;
+  open: boolean;
+}
+
+function NavItem(props: NavItemProps) {
+  const item = props.definition;
+  const open = props.open;
+  const icon = (
+    <ListItemIcon
+      sx={{
+        minWidth: 32,
+        width: 32,
+        height: 32,
+        justifyContent: "center",
+        alignItems: "center",
+        color: open ? "text.secondary" : "text.primary",
+      }}
+    >
+      {item.icon}
+    </ListItemIcon>
+  );
+
+  return (
+    <ListItem disablePadding sx={{ mb: 0.5 }}>
+      <ListItemButton
+        {...item.linkProps}
+        sx={{
+          p: 1,
+          borderRadius: 2,
+          "&.active": {
+            bgcolor: "primary.container",
+            color: "primary.onContainer",
+            "& svg": {
+              color: "primary.main",
+            },
+          },
+          gap: 1.5,
+        }}
+        aria-label={item.label}
+      >
+        {open ? (
+          icon
+        ) : (
+          <Tooltip title={item.label} placement="right">
+            {icon}
+          </Tooltip>
+        )}
+        <ListItemText // always render but conditionally hide
+          primary={item.label}
+          sx={{
+            overflow: "hidden",
+            opacity: open ? 1 : 0,
+            transition: (theme) =>
+              theme.transitions.create("opacity", {
+                duration: theme.transitions.duration.shorter,
+              }),
+          }}
+        />
+      </ListItemButton>
+    </ListItem>
+  );
+}
diff --git a/packages/app-shell/src/TopBar.tsx b/packages/app-shell/src/TopBar.tsx
index 6d123971..93927ea9 100644
--- a/packages/app-shell/src/TopBar.tsx
+++ b/packages/app-shell/src/TopBar.tsx
@@ -20,22 +20,27 @@ export function TopBar({ title, open, setOpen }: Props) {
   return (
     <AppBar
       position="fixed"
-      sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
+      color="inherit"
+      sx={{
+        zIndex: (theme: Theme) => theme.zIndex.drawer + 1,
+        borderBottom: "1px solid",
+        borderColor: "divider",
+      }}
+      elevation={0}
     >
       <Toolbar>
         <IconButton
           size="large"
           edge="start"
-          color="inherit"
           aria-label="menu"
-          sx={{ mr: 2 }}
+          sx={{ mr: 2, color: "brand.onContainer" }}
           onClick={() => setOpen(!open)}
         >
           <Menu />
         </IconButton>
 
         <Box sx={{ mr: 2, width: 100 }}>
-          <Logo />
+          <Logo interchange />
         </Box>
 
         <Divider orientation="vertical" variant="middle" flexItem />
@@ -48,6 +53,7 @@ export function TopBar({ title, open, setOpen }: Props) {
             ml: 1.5,
             mt: 1.25,
             mr: 1.25,
+            color: "brand.onContainer",
           }}
         >
           Data Acquisition
@@ -62,6 +68,7 @@ export function TopBar({ title, open, setOpen }: Props) {
           sx={{
             ml: 1.5,
             mt: 1.25,
+            color: "brand.onContainer",
           }}
         >
           {title}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f0c4756..076b4373 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,8 +67,8 @@ importers:
         specifier: 0.9.5
         version: 0.9.5(@types/react@18.3.28)(graphql@16.13.1)(mapbox-gl@1.13.3)(react-dom@18.3.1(react@18.3.1))(react-redux@7.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-router-dom@7.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.106.2)
       '@diamondlightsource/sci-react-ui':
-        specifier: ^0.4.0
-        version: 0.4.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/icons-material@6.5.0(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: file:../../diamondlightsource-sci-react-ui-0.4.1.tgz
+        version: file:diamondlightsource-sci-react-ui-0.4.1.tgz(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
       '@mui/icons-material':
         specifier: ^6.5.0
         version: 6.5.0(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
@@ -324,7 +324,7 @@ importers:
         version: link:../vitest-conf
       '@diamondlightsource/sci-react-ui':
         specifier: ^0.4.1
-        version: 0.4.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/icons-material@6.5.0(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 0.4.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(77d78ecfc22988be2f298fed3e42b40a))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/icons-material@7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: ^6.5.0
         version: 6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -576,6 +576,18 @@ packages:
       '@mui/material': ^6.1.7
       react: ^18.3.1
 
+  '@diamondlightsource/sci-react-ui@file:diamondlightsource-sci-react-ui-0.4.1.tgz':
+    resolution: {integrity: sha512-Xp/qmo/+eM5qyorT/mfkEeRdSrTub8c96B1qIq5GElBJJBPUMor7BBJlw/gInl3+G2gzslI8b960bYFRz1OlRg==, tarball: file:diamondlightsource-sci-react-ui-0.4.1.tgz}
+    version: 0.4.1
+    peerDependencies:
+      '@emotion/react': ^11.13.3
+      '@emotion/styled': ^11.13.0
+      '@jsonforms/core': ^3.7.0
+      '@jsonforms/material-renderers': ^3.7.0
+      '@jsonforms/react': ^3.7.0
+      '@mui/material': ^7.0.0
+      react: ^18.3.1
+
   '@emotion/babel-plugin@11.13.5':
     resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
 
@@ -845,6 +857,9 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
   '@h5web/lib@13.0.0':
     resolution: {integrity: sha512-Y4yOH5QgJ9RmM4xyS74z2R0C0h3rJ2xx/dQrlabYJzbPDI/x4EdZC9FmDKG7RO1Rpol6gcqz13u0NHN+JMlEdg==}
     peerDependencies:
@@ -1028,6 +1043,17 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/icons-material@7.3.11':
+    resolution: {integrity: sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^7.3.11
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/lab@6.0.0-beta.22':
     resolution: {integrity: sha512-9nwUfBj+UzoQJOCbqV+JcCSJ74T+gGWrM1FMlXzkahtYUcMN+5Zmh2ArlttW3zv2dZyCzp7K5askcnKF0WzFQg==}
     engines: {node: '>=14.0.0'}
@@ -5037,20 +5063,38 @@ snapshots:
       react: 18.3.1
       react-icons: 5.6.0(react@18.3.1)
 
-  '@diamondlightsource/sci-react-ui@0.4.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/icons-material@6.5.0(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@diamondlightsource/sci-react-ui@0.4.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(77d78ecfc22988be2f298fed3e42b40a))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/icons-material@7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
       '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
       '@jsonforms/core': 3.6.0
-      '@jsonforms/material-renderers': 3.6.0(a2958437c922d885fd4a4f8b5e701907)
+      '@jsonforms/material-renderers': 3.6.0(77d78ecfc22988be2f298fed3e42b40a)
       '@jsonforms/react': 3.6.0(@jsonforms/core@3.6.0)(react@18.3.1)
-      '@mui/icons-material': 6.5.0(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@mui/icons-material': 7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
       '@mui/material': 6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       keycloak-js: 26.2.4
       react: 18.3.1
       react-icons: 5.6.0(react@18.3.1)
       utif: 3.1.0
 
+  '@diamondlightsource/sci-react-ui@file:diamondlightsource-sci-react-ui-0.4.1.tgz(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@jsonforms/core@3.6.0)(@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907))(@jsonforms/react@3.6.0(@jsonforms/core@3.6.0)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@fontsource-variable/inter': 5.2.8
+      '@jsonforms/core': 3.6.0
+      '@jsonforms/material-renderers': 3.6.0(a2958437c922d885fd4a4f8b5e701907)
+      '@jsonforms/react': 3.6.0(@jsonforms/core@3.6.0)(react@18.3.1)
+      '@mui/icons-material': 7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@mui/material': 6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-icons: 5.6.0(react@18.3.1)
+      utif: 3.1.0
+    optionalDependencies:
+      keycloak-js: 26.2.4
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@emotion/babel-plugin@11.13.5':
     dependencies:
       '@babel/helper-module-imports': 7.28.6
@@ -5283,6 +5327,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/inter@5.2.8': {}
+
   '@h5web/lib@13.0.0(@react-three/fiber@8.18.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.164.1))(@types/react@18.3.28)(immer@11.1.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.164.1)(typescript@5.9.3)':
     dependencies:
       '@floating-ui/react': 0.26.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -5388,6 +5434,20 @@ snapshots:
       ajv-formats: 2.1.1(ajv@8.18.0)
       lodash: 4.17.23
 
+  '@jsonforms/material-renderers@3.6.0(77d78ecfc22988be2f298fed3e42b40a)':
+    dependencies:
+      '@date-io/dayjs': 3.2.0(dayjs@1.10.7)
+      '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@jsonforms/core': 3.6.0
+      '@jsonforms/react': 3.6.0(@jsonforms/core@3.6.0)(react@18.3.1)
+      '@mui/icons-material': 7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)
+      '@mui/material': 6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/x-date-pickers': 7.29.4(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(dayjs@1.10.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      dayjs: 1.10.7
+      lodash: 4.17.23
+      react: 18.3.1
+
   '@jsonforms/material-renderers@3.6.0(a2958437c922d885fd4a4f8b5e701907)':
     dependencies:
       '@date-io/dayjs': 3.2.0(dayjs@1.10.7)
@@ -5487,6 +5547,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.28
 
+  '@mui/icons-material@7.3.11(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@mui/material': 6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.28
+
   '@mui/lab@6.0.0-beta.22(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@mui/material@6.5.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.6