diff --git a/package.json b/package.json
index 02cc606..5f7f39f 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "@storybook/react": "^8.4.4",
     "@storybook/react-webpack5": "^8.4.4",
     "@storybook/test": "^8.4.4",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb36c64..d613891 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,8 +112,8 @@ importers:
         specifier: ^8.4.4
         version: 8.4.7(storybook@8.4.7(prettier@3.4.2))
       '@testing-library/jest-dom':
-        specifier: ^6.6.3
-        version: 6.6.3
+        specifier: ^6.9.1
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^16.1.0
         version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1858,8 +1858,8 @@ packages:
     resolution: {integrity: sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/jest-dom@6.6.3':
-    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
   '@testing-library/react@16.1.0':
@@ -7019,14 +7019,13 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/jest-dom@6.6.3':
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.1
       aria-query: 5.3.2
-      chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
+      picocolors: 1.1.1
       redent: 3.0.0
 
   '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
diff --git a/src/components/controls/ScrollableImages.tsx b/src/components/controls/ScrollableImages.tsx
index a35af17..2992336 100644
--- a/src/components/controls/ScrollableImages.tsx
+++ b/src/components/controls/ScrollableImages.tsx
@@ -169,6 +169,7 @@ const ScrollableImages = ({
         >
           {renderButtons && (
             <Button
+              aria-label="Previous Image"
               onClick={handlePrev}
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
@@ -220,6 +221,7 @@ const ScrollableImages = ({
 
           {renderButtons && (
             <Button
+              aria-label="Next Image"
               onClick={handleNext}
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
@@ -232,6 +234,7 @@ const ScrollableImages = ({
         {renderNumbers && (
           <Box sx={{ display: "flex" }}>
             <Box
+              aria-label="Total Images Numeration"
               data-testid="numeration"
               component="input"
               type="number"
diff --git a/src/components/controls/User.tsx b/src/components/controls/User.tsx
index 270d613..77cd4cd 100644
--- a/src/components/controls/User.tsx
+++ b/src/components/controls/User.tsx
@@ -136,7 +136,7 @@ const User = ({
           onClick={handleLogin}
           startIcon={<MdLogin />}
           sx={{
-            backgroundColor: theme.palette.primary.light,
+            backgroundColor: theme.palette.primary.main,
             color: theme.palette.primary.contrastText,
           }}
         >
diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index 5dd6a76..a9b2bb8 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.tsx
@@ -19,25 +19,28 @@ export const DataOrEmpty = ({ data }: { data?: string | null }) =>
 const DataBox = ({ label, data }: DataBoxProps) => (
   <Box className="data-box">
     <Stack direction="column">
-      <Box className="data-box-label">
-        <Typography
-          component="dt"
-          variant="h6"
-          sx={{
-            fontWeight: "bold",
-            textTransform: "capitalize",
-            fontSize: "smaller",
-          }}
-        >
-          {label}
-        </Typography>
-      </Box>
+      {/* tag needed for JSON Forms accessibility check */}
+      <dl>
+        <Box className="data-box-label">
+          <Typography
+            component="dt"
+            variant="h6"
+            sx={{
+              fontWeight: "bold",
+              textTransform: "capitalize",
+              fontSize: "smaller",
+            }}
+          >
+            {label}
+          </Typography>
+        </Box>
 
-      <Box className="data-box-data">
-        <Typography component="dd">
-          <DataOrEmpty data={data} />
-        </Typography>
-      </Box>
+        <Box className="data-box-data">
+          <Typography component="dd">
+            <DataOrEmpty data={data} />
+          </Typography>
+        </Box>
+      </dl>
     </Stack>
   </Box>
 );
diff --git a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
index 519b702..b0cb8e4 100644
--- a/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
+++ b/src/components/helpers/jsonforms/controls/TextDateTimeControl.tsx
@@ -6,7 +6,6 @@ import {
   schemaMatches,
   ControlProps,
 } from "@jsonforms/core";
-
 import { DataBox } from "../components/DataBox";
 
 const TextDateTimeControlTester = rankWith(
diff --git a/src/components/navigation/Footer.tsx b/src/components/navigation/Footer.tsx
index 8aa3832..d1229e8 100644
--- a/src/components/navigation/Footer.tsx
+++ b/src/components/navigation/Footer.tsx
@@ -88,7 +88,7 @@ const BarStyled = styled(Bar)<BarSlotsProps>(({ theme }) => ({
   position: "relative",
   bottom: 0,
   marginTop: "auto",
-  backgroundColor: theme.vars.palette.primary.light,
+  backgroundColor: theme.vars.palette.primary.main,
 }));
 
 interface FooterProps extends BarSlotsProps {
diff --git a/src/components/navigation/Navbar.test.tsx b/src/components/navigation/Navbar.test.tsx
index d62f61a..c9190b5 100644
--- a/src/components/navigation/Navbar.test.tsx
+++ b/src/components/navigation/Navbar.test.tsx
@@ -9,7 +9,7 @@ import { MemoryRouter, Link } from "react-router-dom";
 describe("Navbar", () => {
   it("should render", async () => {
     renderWithProviders(<Navbar />);
-    expect(await screen.findByRole("banner")).toBeInTheDocument();
+    expect(await screen.findByTestId("navbar")).toBeInTheDocument();
   });
 
   it("should render with styles", async () => {
@@ -17,7 +17,7 @@ describe("Navbar", () => {
     renderWithProviders(<Navbar style={{ border: borderStyle }} />);
 
     const headerComputedStyle = window.getComputedStyle(
-      await screen.findByRole("banner"),
+      await screen.findByTestId("navbar"),
     );
 
     // check new style is set
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index adad9e0..f233c67 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/src/components/navigation/Navbar.tsx
@@ -152,7 +152,7 @@ const Navbar = ({
 }: NavbarProps) => {
   return (
     <BarStyled
-      role="banner"
+      data-testid="navbar"
       {...props}
       leftSlot={
         <>
diff --git a/src/themes/DiamondTheme.old b/src/themes/DiamondTheme.old
new file mode 100644
index 0000000..0969f5d
--- /dev/null
+++ b/src/themes/DiamondTheme.old
@@ -0,0 +1,101 @@
+import { createTheme, Theme } from "@mui/material/styles";
+
+import { mergeThemeOptions } from "./ThemeManager";
+
+import logoImageDark from "../public/diamond/logo-dark.svg";
+import logoImageLight from "../public/diamond/logo-light.svg";
+import logoShort from "../public/diamond/logo-short.svg";
+
+const dlsLogoBlue = "#202740";
+const dlsLogoYellow = "#facf07";
+
+const DiamondThemeOptions = mergeThemeOptions({
+  logos: {
+    normal: {
+      src: logoImageDark, // Use the dark image for light backgrounds
+      srcDark: logoImageLight, // Use the light image for dark backgrounds
+      alt: "Diamond Light Source Logo",
+      width: "100",
+    },
+    short: {
+      src: logoShort,
+      alt: "Diamond Light Source Logo",
+      width: "35",
+    },
+  },
+  colorSchemes: {
+    // https://zenoo.github.io/mui-theme-creator/
+    light: {
+      palette: {
+        primary: {
+          main: dlsLogoBlue,
+          light: "#4C5266", // dark grey
+          dark: "#161B2C", // dark blue
+          contrastText: "#ffffff", // white
+        },
+        secondary: {
+          main: dlsLogoYellow,
+          light: "#FBD838", // light yellow
+          dark: "#AF9004", // dark yellow
+          contrastText: "#000000", // black
+        },
+        text: {
+          secondary: "#161B2C",
+        },
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: "#6175bd", //lightened version of {dlsLogoBlue}
+          light: "#8090CA", // lighter blue
+          dark: "#435184", // mid blue
+          contrastText: "#ffffff", // white
+        },
+        secondary: {
+          main: dlsLogoYellow,
+          light: "#FBD838", // light yellow
+          dark: "#AF9004", // dark yellow
+          contrastText: "#000000", // black
+        },
+        text: {
+          secondary: "#8090CA",
+        },
+      },
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }: { theme: Theme }) => ({
+          textTransform: "none",
+          "&.MuiButton-contained": {},
+          "&.default": {
+            color: theme.palette.primary.contrastText,
+            backgroundColor: theme.palette.primary.dark,
+            "&:hover": {
+              backgroundImage: "linear-gradient(rgb(0 0 0/30%) 0 0)",
+              "&:disabled": {
+                backgroundColor: theme.palette.primary.light,
+              },
+            },
+          },
+          "&.onBlue": {
+            color: theme.palette.secondary.light,
+            borderColor: theme.palette.secondary.light,
+            border: "1px solid",
+            fontSize: "0.875rem",
+            "&:hover": {
+              color: theme.palette.primary.dark,
+              backgroundColor: theme.palette.secondary.light,
+            },
+          },
+        }),
+      },
+    },
+  },
+});
+
+const DiamondTheme: Theme = createTheme(DiamondThemeOptions);
+
+export { DiamondTheme, DiamondThemeOptions };
diff --git a/src/themes/DiamondTheme.ts b/src/themes/DiamondTheme.ts
index c2c16ad..be9ebc5 100644
--- a/src/themes/DiamondTheme.ts
+++ b/src/themes/DiamondTheme.ts
@@ -3,7 +3,6 @@ import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";
 
-import logoImageDark from "../public/diamond/logo-dark.svg";
 import logoImageLight from "../public/diamond/logo-light.svg";
 import logoShort from "../public/diamond/logo-short.svg";
 
@@ -13,8 +12,8 @@ const dlsLogoYellow = "#facf07";
 const DiamondThemeOptions = mergeThemeOptions({
   logos: {
     normal: {
-      src: logoImageDark, // Use the dark image for light backgrounds
-      srcDark: logoImageLight, // Use the light image for dark backgrounds
+      src: logoImageLight,
+      srcDark: logoImageLight,
       alt: "Diamond Light Source Logo",
       width: "100",
     },
@@ -48,8 +47,8 @@ const DiamondThemeOptions = mergeThemeOptions({
     dark: {
       palette: {
         primary: {
-          main: "#6175bd", //lightened version of {dlsLogoBlue}
-          light: "#8090CA", // lighter blue
+          main: dlsLogoBlue,
+          light: "#3b4c8c", // lighter blue
           dark: "#435184", // mid blue
           contrastText: "#ffffff", // white
         },
diff --git a/src/themes/GenericTheme.ts b/src/themes/GenericTheme.ts
index 1b91d88..6fb29d9 100644
--- a/src/themes/GenericTheme.ts
+++ b/src/themes/GenericTheme.ts
@@ -1,4 +1,3 @@
-import type {} from "@mui/material/themeCssVarsAugmentation";
 import { createTheme, Theme } from "@mui/material/styles";
 
 import { mergeThemeOptions } from "./ThemeManager";