diff --git a/.env.example b/.env.example
index a69f4c5..0f05eff 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,3 @@
 DATABASE_URL="file:./evolver.db"
-SESSION_SECRET="evolver4ever"
 DEFAULT_DEVICE_PORT="8080"
+EXCLUDED_PROPERTIES="name,vial"
diff --git a/app/__tests__/unit/root.test.tsx b/app/__tests__/unit/root.test.tsx
index f80bca5..fe537df 100644
--- a/app/__tests__/unit/root.test.tsx
+++ b/app/__tests__/unit/root.test.tsx
@@ -1,6 +1,6 @@
 import { expect, describe, it } from "vitest";
 import { loader, action } from "~/root";
-import { prefs } from "~/prefs-cookie";
+import { userPrefs } from "~/cookies.server";
 
 describe("root loader", () => {
   it("should return an object with the default theme and publically visible (to the client) env variables", async () => {
@@ -10,11 +10,11 @@ describe("root loader", () => {
       context: {},
     });
     const data = await response.json();
-    expect(data).toEqual({ theme: "dark", ENV: { VITEST: true } });
+    expect(data).toEqual({ theme: "dark", ENV: { NODE_ENV: "test" } });
   });
 
   it("should return the theme from the request cookie", async () => {
-    const prefsCookie = await prefs.serialize({ theme: "light" });
+    const prefsCookie = await userPrefs.serialize({ theme: "light" });
     const request = new Request("http://127.0.0.1:8000", {
       headers: { Cookie: prefsCookie },
     });
@@ -44,6 +44,7 @@ describe("root action", () => {
   it("should return valid json if theme form data is included in the request", async () => {
     const formData = new FormData();
     formData.set("theme", "dark");
+
     const request = new Request("http://127.0.0.1:8000", {
       method: "POST",
       body: formData,
@@ -51,7 +52,9 @@ describe("root action", () => {
 
     const response = await action({ request, params: {}, context: {} });
     const cookie = response?.headers.get("Set-Cookie");
-    const setCookieValue = await prefs.parse(cookie ?? null);
+
+    const setCookieValue = await userPrefs.parse(cookie ?? null);
+
     expect(setCookieValue).toEqual({ theme: "dark" });
   });
 });
diff --git a/app/components/EditJson.client.tsx b/app/components/EditJson.client.tsx
index d68993e..a0069bc 100644
--- a/app/components/EditJson.client.tsx
+++ b/app/components/EditJson.client.tsx
@@ -1,6 +1,5 @@
 import { useRouteLoaderData } from "@remix-run/react";
 import clsx from "clsx";
-import Ajv from "ajv";
 import {
   FilterFunction,
   JsonData,
@@ -11,15 +10,12 @@ import {
 import { loader as rootLoader } from "~/root";
 import { checkType } from "~/utils/checkType";
 import { EvolverConfigWithoutDefaults } from "client";
-import { SomeJSONSchema } from "ajv/dist/types/json-schema";
 
 export function EditJson({
   data,
   mode,
-  schema,
   setData,
 }: {
-  schema: SomeJSONSchema;
   data: EvolverConfigWithoutDefaults;
   mode: "edit" | "view";
   setData: (arg0: EvolverConfigWithoutDefaults) => void;
@@ -27,9 +23,8 @@ export function EditJson({
   const { theme } = useRouteLoaderData<typeof rootLoader>("root") ?? {
     theme: "dark",
   };
+
   const editorTheme = theme === "dark" ? "githubDark" : "githubLight";
-  const ajv = new Ajv();
-  const validate = ajv.compile(schema);
 
   const customizeText = ({ key, value }: NodeData) => {
     switch (key) {
@@ -146,7 +141,7 @@ export function EditJson({
     }
     if (mode === "edit") {
       if (level === 0) {
-        return true;
+        return false;
       }
       switch (key) {
         case "vials":
@@ -211,20 +206,6 @@ export function EditJson({
         restrictEdit={restrictEdit}
         restrictAdd={restrictAdd}
         restrictDelete={restrictDelete}
-        onUpdate={({ newData }) => {
-          const valid = validate(newData);
-          if (!valid) {
-            const errorMessage = validate.errors
-              ?.map(
-                (error) =>
-                  `${error.instancePath}${error.instancePath ? ": " : ""}${error.message}`,
-              )
-              .join("\n");
-            // This string is returned to and displayed in json-edit-react UI
-            return errorMessage;
-          }
-          // data is valid, do nothing
-        }}
         setData={(data: JsonData) =>
           setData(data as EvolverConfigWithoutDefaults)
         }
diff --git a/app/components/ErrorNotifs.tsx b/app/components/ErrorNotifs.tsx
deleted file mode 100644
index aa87639..0000000
--- a/app/components/ErrorNotifs.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
-import { useEffect, useState } from "react";
-
-export function ErrorNotifs(messages: string[]) {
-  const [errorMessages, setErrorMessages] = useState<string[]>([]);
-
-  useEffect(() => {
-    setErrorMessages(messages);
-  }, [messages]);
-
-  const dismissAlert = (msg: string) => {
-    const filteredErrorMessages = errorMessages.filter((errorMessage) => {
-      return errorMessage !== msg;
-    });
-
-    setErrorMessages(filteredErrorMessages);
-  };
-
-  const errorAlerts = errorMessages.map((errorMessage) => {
-    return (
-      <div key={errorMessage} role="alert" className="alert alert-error mb-4 ">
-        <ExclamationCircleIcon className="h-6 w-6 shrink-0 stroke-current" />
-        <div>{errorMessage}</div>
-        <div>
-          <button className="link" onClick={() => dismissAlert(errorMessage)}>
-            dismiss
-          </button>
-        </div>
-      </div>
-    );
-  });
-  return (
-    <div className="absolute z-50 flex flex-col items-center">
-      {errorAlerts}
-    </div>
-  );
-}
diff --git a/app/components/HardwareTable.tsx b/app/components/HardwareTable.tsx
new file mode 100644
index 0000000..f4e8e20
--- /dev/null
+++ b/app/components/HardwareTable.tsx
@@ -0,0 +1,89 @@
+import { Link } from "@remix-run/react";
+import { EvolverConfigWithoutDefaults } from "client";
+import clsx from "clsx";
+
+export function HardwareTable({
+  evolverConfig,
+  id,
+  hardwareName,
+  queryParams,
+}: {
+  evolverConfig: EvolverConfigWithoutDefaults;
+  id: string;
+  hardwareName: string;
+  queryParams: URLSearchParams;
+}) {
+  let currentVials: string[] = [];
+  let allVials = false;
+  if (queryParams.has("vials")) {
+    currentVials = queryParams.get("vials")?.split(",");
+  } else {
+    allVials = true;
+  }
+  const evolverHardware = evolverConfig.hardware;
+
+  const TableRows = Object.keys(evolverHardware).map((key) => {
+    const {
+      config: { vials },
+    } = evolverHardware[key];
+
+    const vialsWithLinks = vials.map((vial) => {
+      const linkTo = `/devices/${id}/hardware/${key}/history?vials=${vial}`;
+      const activeVial =
+        currentVials.includes(vial.toString()) && hardwareName === key;
+      const vialButtons = (
+        <Link
+          key={vial}
+          className={clsx(
+            "btn",
+            "btn-xs",
+            "btn-outline",
+            activeVial && "btn-active",
+          )}
+          to={linkTo}
+        >
+          {vial}
+        </Link>
+      );
+
+      return vialButtons;
+    });
+    const allButton = (
+      <Link
+        className={clsx(
+          "btn",
+          "btn-xs",
+          "btn-outline",
+          allVials && key === hardwareName && "btn-active",
+        )}
+        key={"all"}
+        to={`/devices/${id}/hardware/${key}/history`}
+      >
+        {" "}
+        all
+      </Link>
+    );
+
+    return (
+      <tr key={key} className={clsx(hardwareName === key && "bg-base-300")}>
+        <td>{key}</td>
+        <td className="flex gap-2">
+          {vialsWithLinks}
+          {allButton}
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th>name</th>
+          <th>vials</th>
+        </tr>
+      </thead>
+      <tbody>{TableRows}</tbody>
+    </table>
+  );
+}
diff --git a/app/components/LineChart.tsx b/app/components/LineChart.tsx
new file mode 100644
index 0000000..bbbe3fa
--- /dev/null
+++ b/app/components/LineChart.tsx
@@ -0,0 +1,56 @@
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import { vialColors } from "~/utils/chart/colors";
+
+const processData = (data, vials, property) => {
+  return data.map((entry) => {
+    const processedEntry: { [key: string]: string } = {
+      timestamp: new Date(entry.timestamp * 1000).toLocaleTimeString(), // Convert timestamp to readable time
+    };
+
+    vials.forEach((vial) => {
+      processedEntry[`vial_${vial}`] = entry.data[vial]?.[property];
+    });
+
+    return processedEntry;
+  });
+};
+
+export const HardwareLineChart = ({ vials, rawData, property = "raw" }) => {
+  const formattedData = processData(rawData, vials, property);
+
+  return (
+    <div>
+      <div className="divider"></div>
+      <div>property: </div>
+      <div className="stat-value font-mono">{property}</div>
+      <div className="divider"></div>
+      <ResponsiveContainer width="100%" height={400}>
+        <LineChart data={formattedData}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="timestamp" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          {vials.map((vial: number, index: number) => (
+            <Line
+              key={vial}
+              type="monotone"
+              dataKey={`vial_${vial}`}
+              stroke={vialColors[index % vialColors.length]}
+              name={`Vial ${vial}`}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 80aa6f6..3cc5a49 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -4,11 +4,11 @@ import clsx from "clsx";
 
 export default function Navbar({ pathname = "" as string }): JSX.Element {
   return (
-    <div className="mb-8">
-      <div className="px-4 mx-auto max-w-6xl flex flex-wrap justify-between gap-10 min-h-16 items-center">
+    <div className="">
+      <div className="mx-auto max-w-6xl flex flex-wrap justify-between gap-10 min-h-16 items-center">
         <div className="flex-1">
           <div className="flex items-center space-x-1">
-            <Link to="/" className="text-3xl">
+            <Link to="/" className="text-3xl text-primary">
               Evolver
             </Link>
           </div>
@@ -17,8 +17,11 @@ export default function Navbar({ pathname = "" as string }): JSX.Element {
           <Link
             tabIndex={0}
             role="button"
-            className={clsx("link", pathname !== "/devices" && "link-hover")}
-            to="/devices"
+            className={clsx(
+              "link",
+              pathname !== "/devices/list" && "link-hover",
+            )}
+            to="/devices/list"
           >
             Devices
           </Link>
@@ -27,7 +30,7 @@ export default function Navbar({ pathname = "" as string }): JSX.Element {
           <ThemeController />
         </div>
       </div>
-      <div className="divider divider-neutral h-0 m-0"></div>
+      <div className="divider h-0 m-0"></div>
     </div>
   );
 }
diff --git a/app/components/ThemeController.tsx b/app/components/ThemeController.tsx
index cd3a33d..e31687d 100644
--- a/app/components/ThemeController.tsx
+++ b/app/components/ThemeController.tsx
@@ -1,22 +1,28 @@
 import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
-import { useFetcher, useLoaderData } from "@remix-run/react";
-import { loader } from "../root";
+import { useFetcher, useLoaderData, useLocation } from "@remix-run/react";
+import { loader } from "~/root";
 
 export default function ThemeController() {
+  const { pathname, search } = useLocation();
+
+  // depends on root.tsx action returning a redirect with Set-Cookie header
   const fetcher = useFetcher();
+
+  // depends on root.tsx loader returning a theme
   const { theme } = useLoaderData<typeof loader>();
 
   return (
     <label className="swap swap-rotate pt-2">
-      <div className="hidden">switch theme</div>
+      {/* this hidden checkbox controls the state */}
       <input
         type="checkbox"
         role="switch"
-        name="theme"
         value={theme === "dark" ? "light" : "dark"}
         onChange={() => {
           const formData = new FormData();
-          formData.set("theme", theme === "dark" ? "light" : "dark");
+          const newTheme = theme === "dark" ? "light" : "dark";
+          formData.set("theme", newTheme);
+          formData.set("redirectTo", pathname + search);
           fetcher.submit(formData, { method: "POST" });
         }}
       ></input>
diff --git a/app/components/VialGrid.tsx b/app/components/VialGrid.tsx
new file mode 100644
index 0000000..74f4f3c
--- /dev/null
+++ b/app/components/VialGrid.tsx
@@ -0,0 +1,133 @@
+import { Link } from "@remix-run/react";
+import clsx from "clsx";
+
+const DataTable = ({
+  data,
+  id,
+  vialIndex,
+  excludedProperties = [],
+}: {
+  id: string;
+  vialIndex: number;
+  data: { [key: string]: number | null };
+  excludedProperties?: string[];
+}) => {
+  return (
+    <div className="overflow-x-auto">
+      <table className="table table-xs w-full">
+        <thead>
+          <tr>
+            <th>
+              <Link to={`/devices/${id}/hardware`}>hardware</Link>{" "}
+            </th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.keys(data).map((mainKey) =>
+            Object.keys(data[mainKey]).map((subKey, subIndex) => {
+              let renderSubKey = true;
+              if (excludedProperties.includes(subKey)) {
+                renderSubKey = false;
+              }
+              return (
+                <tr key={`${mainKey}-${subKey}`}>
+                  {subIndex === 0 && (
+                    <td
+                      rowSpan={Object.keys(data[mainKey]).length}
+                      className="text-center"
+                    >
+                      <Link
+                        className="link"
+                        to={`/devices/${id}/hardware/${mainKey}/history?vials=${vialIndex}`}
+                      >
+                        {mainKey}
+                      </Link>
+                    </td>
+                  )}
+                  {renderSubKey && (
+                    <td>
+                      <Link
+                        className="link"
+                        to={`/devices/${id}/hardware/${mainKey}/history?properties=${subKey}&vials=${vialIndex}`}
+                      >
+                        {subKey}
+                      </Link>
+                    </td>
+                  )}
+                  {renderSubKey && (
+                    <td>
+                      {data[mainKey][subKey] !== null &&
+                        data[mainKey][subKey].toString()}
+                      {data[mainKey][subKey] == null && "-"}
+                    </td>
+                  )}
+                </tr>
+              );
+            }),
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export function VialGrid({
+  vialCount,
+  stateData,
+  id,
+  excludedProperties = [],
+}: {
+  vialCount: number;
+  stateData: { [key: string]: { [key: string]: { [key: string]: number } } };
+  id: string;
+  excludedProperties?: string[];
+}) {
+  const gridItems = Array.from({ length: vialCount }, (_, index) => {
+    const indexString = index.toString();
+
+    // Find matching data in stateData based on indexString
+    const matchingData = Object.keys(stateData).reduce(
+      (acc, key) => {
+        if (stateData[key][indexString]) {
+          acc[key] = stateData[key][indexString];
+        }
+        return acc;
+      },
+      {} as { [key: string]: { [key: string]: number } },
+    );
+
+    // Spread matchingData into the return object
+    return { index, ...matchingData };
+  });
+  const cells = gridItems.map(({ index, ...data }) => {
+    const hasData = Object.keys(data).length > 0;
+    return (
+      <div
+        key={index}
+        className={clsx(
+          "relative flex items-center justify-center aspect-square border font-bold rounded-md",
+          !hasData && "border-2 border-gray-300",
+          hasData && "border-4 border-primary",
+        )}
+      >
+        <div className="absolute inset-0 flex items-center justify-center text-neutral text-opacity-25">
+          <span className="block text-[5vw] leading-none">{index}</span>
+        </div>
+        {hasData && (
+          <div className="relative z-10">
+            <DataTable
+              data={data}
+              id={id}
+              vialIndex={index}
+              excludedProperties={excludedProperties}
+            />
+          </div>
+        )}
+      </div>
+    );
+  });
+
+  return <div className="grid grid-cols-4 grid-rows-4 gap-2">{cells}</div>;
+}
diff --git a/app/components/__tests__/unit/EditJson.test.tsx b/app/components/__tests__/unit/EditJson.test.tsx
index 06fea70..2ec93a0 100644
--- a/app/components/__tests__/unit/EditJson.test.tsx
+++ b/app/components/__tests__/unit/EditJson.test.tsx
@@ -2,21 +2,13 @@ import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { createRemixStub } from "@remix-run/testing";
 import { json } from "@remix-run/node";
-import { data, schema } from "./testData";
+import { data } from "./testData";
 import { EditJson } from "../../EditJson.client";
-import { SomeJSONSchema } from "ajv/dist/types/json-schema";
 
 const RemixStub = createRemixStub([
   {
     path: "/",
-    Component: () => (
-      <EditJson
-        schema={schema as SomeJSONSchema}
-        data={data}
-        mode="view"
-        setData={() => null}
-      />
-    ),
+    Component: () => <EditJson data={data} mode="view" setData={() => null} />,
     loader() {
       return json({ theme: "dark" });
     },
diff --git a/app/components/__tests__/unit/Navbar.test.tsx b/app/components/__tests__/unit/Navbar.test.tsx
index f449f91..2d27ebe 100644
--- a/app/components/__tests__/unit/Navbar.test.tsx
+++ b/app/components/__tests__/unit/Navbar.test.tsx
@@ -7,7 +7,7 @@ import { json } from "@remix-run/node";
 const RemixStub = createRemixStub([
   {
     path: "/",
-    Component: () => <Navbar pathname="/devices" />,
+    Component: () => <Navbar pathname="/devices/list" />,
     loader() {
       return json({ theme: "dark" });
     },
@@ -21,5 +21,5 @@ test("shows the devices link", async () => {
 
 test("shows the theme toggle", async () => {
   await render(<RemixStub />);
-  expect(await screen.findAllByText("switch theme")).toHaveLength(1);
+  expect(await screen.findAllByText("sun")).toHaveLength(1);
 });
diff --git a/app/components/__tests__/unit/ThemeController.test.tsx b/app/components/__tests__/unit/ThemeController.test.tsx
index 9052319..d7e8f28 100644
--- a/app/components/__tests__/unit/ThemeController.test.tsx
+++ b/app/components/__tests__/unit/ThemeController.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { createRemixStub } from "@remix-run/testing";
 import { json } from "@remix-run/node";
-import ThemeController from "../../ThemeController";
+import ThemeController from "~/components/ThemeController";
 
 const RemixStub = createRemixStub([
   {
diff --git a/app/prefs-cookie.ts b/app/cookies.server.ts
similarity index 50%
rename from app/prefs-cookie.ts
rename to app/cookies.server.ts
index bfdc0bd..373fb34 100644
--- a/app/prefs-cookie.ts
+++ b/app/cookies.server.ts
@@ -1,2 +1,2 @@
 import { createCookie } from "@remix-run/node";
-export const prefs = createCookie("prefs");
+export const userPrefs = createCookie("prefs");
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index af1857f..08a4d0e 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -12,10 +12,11 @@ import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 import { server } from "./mocks/server";
+import { ENV } from "./utils/env.server";
 
 const ABORT_DELAY = 5_000;
 
-if (process.env.NODE_ENV === "test") {
+if (ENV.NODE_ENV === "test") {
   server.listen();
 }
 
diff --git a/app/integration/_index.test.ts b/app/integration/_index.test.ts
new file mode 100644
index 0000000..0b4c536
--- /dev/null
+++ b/app/integration/_index.test.ts
@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test";
+
+test("redirects to devices list", async ({ page }) => {
+  await page.goto("/", { waitUntil: "networkidle" });
+  expect(page.url()).toBe(`http://localhost:50123/devices/list`);
+});
diff --git a/app/root.tsx b/app/root.tsx
index d0f2e39..e6799dc 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,65 +9,97 @@ import {
   json,
   useLoaderData,
   useLocation,
+  useMatches,
   useRouteError,
+  useSearchParams,
 } from "@remix-run/react";
 import { ReactNode } from "react";
-import "./tailwind.css";
-import Navbar from "./components/Navbar";
-import { GlobalLoading } from "./components/GlobalLoading";
-import { db } from "./utils/db.server";
-import { prefs } from "./prefs-cookie";
-import { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
-import { getEnv } from "~/utils/env.server";
+import "~/tailwind.css";
+import Navbar from "~/components/Navbar";
+import { GlobalLoading } from "~/components/GlobalLoading";
+import { db } from "~/utils/db.server";
+import { userPrefs } from "~/cookies.server";
+import {
+  ActionFunctionArgs,
+  LoaderFunctionArgs,
+  redirect,
+} from "@remix-run/node";
+import { getClientEnv } from "~/utils/env.server";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
-// write the state to the cookie
 export async function action({ request }: ActionFunctionArgs) {
   const cookieHeader = request.headers.get("Cookie");
-  const cookie = (await prefs.parse(cookieHeader)) || {};
-
+  const cookie = (await userPrefs.parse(cookieHeader)) || {};
   const formData = await request.formData();
+  let redirectTo = "./";
 
-  // If the form data has a theme key, update the theme
   if (formData.has("theme")) {
     const theme = formData.get("theme");
+    true;
+
+    if (formData.has("redirectTo")) {
+      redirectTo = formData.get("redirectTo") as string;
+    }
+
     cookie.theme = theme;
-    // Update the theme cookie
-    return json(
-      { theme: cookie.theme },
-      {
-        headers: {
-          "Set-Cookie": await prefs.serialize(cookie),
-        },
+    // Update the theme cookie, redirect to the page the user was on when they toggled the theme
+    return redirect(redirectTo, {
+      headers: {
+        "Set-Cookie": await userPrefs.serialize(cookie),
       },
-    );
+    });
   }
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  // read theme state from the cookie or fallback to dark
+  // read user preferences from the client's cookie, this means user preference can be persisted between refreshes.
   const cookieHeader = request.headers.get("Cookie");
-  const cookie: { theme: "dark" | "light" } = (await prefs.parse(
+  const cookie: { theme: "dark" | "light" } = (await userPrefs.parse(
     cookieHeader,
   )) || { theme: "dark" };
 
   try {
-    // automatically add the local (running on same rpi) device to the db
+    // automatically add the local (running on same raspberry pi) device to the db
     await db.device.create({ data: { ip_addr: "127.0.0.1" } });
   } catch (error) {
     // succeed anyway the local device is already in the db
   }
-  // make the theme available to the client side
-  return json({ theme: cookie.theme, ENV: getEnv() });
+  // make the theme available to the client side, daisy ui uses it to set the theme
+  return json({ theme: cookie.theme, ENV: getClientEnv() });
 }
 
 export default function App() {
   const { theme } = useLoaderData<typeof loader>();
   const { pathname } = useLocation();
+  const [queryParams] = useSearchParams();
+  const matches = useMatches();
+
+  const breadcrumbs = matches
+    .filter((match) => match.handle && match.handle.breadcrumb)
+    .map((match, index) => {
+      return <li key={index}>{match.handle.breadcrumb(match, queryParams)}</li>;
+    });
 
   return (
     <Document theme={theme}>
       <Navbar pathname={pathname} />
-      <Outlet />
+      <ToastContainer
+        position="top-right"
+        autoClose={false}
+        newestOnTop
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        theme={theme === "dark" ? "dark" : "light"}
+      />
+      <div className="mx-auto max-w-6xl flex flex-col gap-4">
+        <div className="breadcrumbs text-sm">
+          <ul>{breadcrumbs}</ul>
+        </div>
+        <Outlet />
+      </div>
     </Document>
   );
 }
@@ -84,7 +116,7 @@ export function ErrorBoundary() {
             {error.status} {error.statusText || error.data}
           </pre>
           <div className="flex flex-col">
-            <Link className="link" to="/" reloadDocument>
+            <Link className="link" to="/devices" reloadDocument>
               home
             </Link>
             <Link className="link" to="https://evolver.bio">
diff --git a/app/routes/__tests__/integration/_index.test.ts b/app/routes/__tests__/integration/_index.test.ts
deleted file mode 100644
index 25a815a..0000000
--- a/app/routes/__tests__/integration/_index.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("redirects to local device ", async ({ page }) => {
-  await page.goto("/", { waitUntil: "networkidle" });
-  expect(page.url()).toBe(`http://localhost:50123/device/127.0.0.1`);
-});
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 6555d93..d05c69d 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,16 +1,5 @@
 import { redirect } from "@remix-run/node";
-import { pingDevice } from "~/utils/pingDevice.server";
 
 export async function loader() {
-  // by default, if user navigates to root path '/' and device is available locally redirect them to that device's page
-  try {
-    const isOnline = await pingDevice("127.0.0.1");
-    if (isOnline) {
-      return redirect("/device/127.0.0.1");
-    }
-    throw new Error("Local device is not available");
-  } catch (error) {
-    // otherwise redirect them to the devices page
-    return redirect("/devices");
-  }
+  return redirect("/devices/list");
 }
diff --git a/app/routes/device.$ip_addr.tsx b/app/routes/device.$ip_addr.tsx
deleted file mode 100644
index 47c0560..0000000
--- a/app/routes/device.$ip_addr.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import { z } from "zod";
-import {
-  ActionFunctionArgs,
-  LoaderFunctionArgs,
-  json,
-  redirect,
-} from "@remix-run/node";
-import { createClient } from "@hey-api/client-fetch";
-import * as Evolver from "client/services.gen";
-import {
-  Link,
-  useLoaderData,
-  useLocation,
-  useParams,
-  useSearchParams,
-  useSubmit,
-} from "@remix-run/react";
-import clsx from "clsx";
-import { EditJson } from "~/components/EditJson.client";
-import { ClientOnly } from "remix-utils/client-only";
-import { useEffect, useState } from "react";
-import { parseWithZod } from "@conform-to/zod";
-import { EvolverConfigWithoutDefaults } from "client";
-import { SomeJSONSchema } from "ajv/dist/types/json-schema";
-
-const IntentEnum = z.enum(["update_evolver"], {
-  required_error: "an intent is required",
-  invalid_type_error: "must be one of, update_device",
-});
-
-const schema = z.object({
-  intent: IntentEnum,
-  // The preprocess step is required for zod to perform the required check properly
-  // as the value of an empty input is usually an empty string
-  ip_addr: z.preprocess(
-    (value) => (value === "" ? undefined : value),
-    z.string({ required_error: "an ip address is required" }),
-  ),
-  // Assume this is valid, client side AJV validation.
-  data: z.string({ required_error: "an evolver config is required" }),
-});
-
-export async function action({ request }: ActionFunctionArgs) {
-  const formData = await request.formData();
-
-  const submission = parseWithZod(formData, { schema: schema });
-  if (submission.status !== "success") {
-    return submission.reply();
-  }
-  const { intent, ip_addr, data } = submission.value;
-
-  const evolverClient = createClient({
-    baseUrl: `http://${ip_addr}:${process.env.DEFAULT_DEVICE_PORT}`,
-  });
-
-  switch (intent) {
-    case IntentEnum.Enum.update_evolver:
-      try {
-        await Evolver.update({ body: JSON.parse(data), client: evolverClient });
-        return redirect(`/device/${ip_addr}`);
-      } catch (error) {
-        return null;
-      }
-    default:
-      return null;
-  }
-}
-
-export async function loader({ params }: LoaderFunctionArgs) {
-  const { ip_addr } = params;
-
-  const evolverClient = createClient({
-    baseUrl: `http://${ip_addr}:${process.env.DEFAULT_DEVICE_PORT}`,
-  });
-
-  try {
-    const describeEvolver = await Evolver.describe({ client: evolverClient });
-    const rootClassSchema = await Evolver.getSchemaSchemaGet({
-      query: { classinfo: "evolver.device.Evolver" },
-      client: evolverClient,
-    });
-    return json({
-      description: describeEvolver.data as {
-        config: EvolverConfigWithoutDefaults;
-      },
-      schema: rootClassSchema.data,
-      ok: true,
-    });
-  } catch (error) {
-    throw new Error("unable to load device config");
-  }
-}
-
-export function ErrorBoundary() {
-  const { ip_addr } = useParams();
-
-  return (
-    <div className="mx-auto max-w-6xl px-4 ">
-      <div className="mt-4 flex items-center gap-4 mb-8 justify-between">
-        <div className="flex items-center gap-4">
-          <div>
-            <div>
-              <h1 className="font-mono">{`${ip_addr}`}</h1>
-            </div>
-          </div>
-          <div className={clsx("badge text-sm", "badge-ghost badge-outline")}>
-            offline
-          </div>
-        </div>
-      </div>
-      <Link to="/devices" className="link">
-        other devices
-      </Link>
-    </div>
-  );
-}
-
-export default function DeviceConfig() {
-  const { ip_addr } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { pathname } = useLocation();
-  const submit = useSubmit();
-  const mode = searchParams.get("mode") === "edit" ? "edit" : "view";
-  const { description, schema } = useLoaderData<typeof loader>();
-  const evolverConfig = description.config;
-  const configSchema = schema?.config;
-
-  if (!configSchema) {
-    throw new Error("unable to get device schema");
-  }
-
-  const [updatedEvovlerConfig, setEvolverConfig] =
-    useState<typeof evolverConfig>(evolverConfig);
-
-  useEffect(() => {
-    setEvolverConfig(updatedEvovlerConfig);
-  }, [updatedEvovlerConfig]);
-
-  return (
-    <div className="mx-auto max-w-6xl px-4 ">
-      <div className="mt-4 flex items-center gap-4 mb-8 justify-between">
-        <div className="flex items-center gap-4">
-          <div>
-            <h1 className="text-2xl">{`${evolverConfig.name}`}</h1>
-            <div>
-              <h1 className="font-mono">{`${ip_addr}`}</h1>
-            </div>
-          </div>
-          <div className={clsx("badge text-sm", "badge-accent")}>online</div>
-        </div>
-        {mode === "view" && (
-          <div className="flex">
-            <button
-              className="btn btn-primary"
-              onClick={() => {
-                const params = new URLSearchParams();
-                params.set("mode", "edit");
-                setSearchParams(params);
-              }}
-            >
-              Edit
-            </button>
-          </div>
-        )}
-
-        {mode === "edit" && (
-          <div className="flex gap-4">
-            <button
-              className="btn "
-              onClick={() => {
-                setEvolverConfig(evolverConfig);
-                const params = new URLSearchParams();
-                params.set("mode", "view");
-                setSearchParams(params);
-              }}
-            >
-              Cancel
-            </button>
-
-            <button
-              className="btn btn-primary"
-              onClick={() => {
-                const formData = new FormData();
-                formData.append("ip_addr", ip_addr ?? "");
-                formData.append("intent", IntentEnum.Enum.update_evolver);
-                formData.append("data", JSON.stringify(updatedEvovlerConfig));
-                submit(formData, { method: "POST" });
-              }}
-            >
-              Save
-            </button>
-          </div>
-        )}
-      </div>
-
-      <ClientOnly fallback={<h1>...loading</h1>}>
-        {() => (
-          <EditJson
-            key={pathname}
-            data={updatedEvovlerConfig}
-            mode={mode}
-            schema={configSchema as SomeJSONSchema}
-            setData={setEvolverConfig}
-          />
-        )}
-      </ClientOnly>
-    </div>
-  );
-}
diff --git a/app/routes/devices.$id.config.tsx b/app/routes/devices.$id.config.tsx
new file mode 100644
index 0000000..b229acd
--- /dev/null
+++ b/app/routes/devices.$id.config.tsx
@@ -0,0 +1,250 @@
+import {
+  Link,
+  useActionData,
+  useLocation,
+  useParams,
+  useRouteLoaderData,
+  useSearchParams,
+  useSubmit,
+} from "@remix-run/react";
+import { EditJson } from "~/components/EditJson.client";
+import { ClientOnly } from "remix-utils/client-only";
+import { useEffect, useState } from "react";
+import { exportData } from "~/utils/exportData";
+import { type loader } from "./devices.$id";
+import { handleFileUpload } from "~/utils/handleFileUpload";
+import { EvolverConfigWithoutDefaults } from "client";
+import { ActionFunctionArgs, redirect } from "@remix-run/node";
+import { parseWithZod } from "@conform-to/zod";
+import { z } from "zod";
+import { createClient } from "@hey-api/client-fetch";
+import * as Evolver from "client/services.gen";
+import { toast as notify } from "react-toastify";
+import { db } from "~/utils/db.server";
+
+export const handle = {
+  breadcrumb: ({ params }: { params: { id: string } }) => {
+    const { id } = params;
+    return <Link to={`/devices/${id}/config`}>config</Link>;
+  },
+};
+
+// The action function is typically responsible for handling the form submission at the route.
+// Since the action function can handle different form submissions, we use intent to determine the action to take.
+// Branching on the intent field of the submitted form.
+// In this case, the intent is to update the evolver config. Later there may be an intent to delete a config, or undo a change etc...
+// Refs: https://sergiodxa.com/articles/multiple-forms-per-route-in-remix
+
+const UpdateDeviceIntentEnum = z.enum(["update_evolver"], {
+  required_error: "an intent is required",
+  invalid_type_error: "must be one of, update_device",
+});
+
+const schema = z.object({
+  intent: UpdateDeviceIntentEnum,
+  // The preprocess step is required for zod to perform the required check properly
+  // as the value of an empty input is usually an empty string
+  id: z.preprocess(
+    (value) => (value === "" ? undefined : value),
+    z.string({ required_error: "an id is required" }),
+  ),
+  // Assume this is valid, client side AJV validation.
+  data: z.string({ required_error: "an evolver config is required" }),
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+
+  // prelim validation, just checks request has intent, ip and a config.
+  const submission = parseWithZod(formData, { schema: schema });
+
+  if (submission.status !== "success") {
+    return submission.reply();
+  }
+  const { intent, id, data } = submission.value;
+
+  // use the db to get the url for that device id...
+  const targetDevice = await db.device.findUnique({ where: { device_id: id } });
+
+  if (!targetDevice) {
+    return submission.reply({ formErrors: ["device not found"] });
+  }
+
+  const { url } = targetDevice;
+  const evolverClient = createClient({
+    baseUrl: url,
+  });
+
+  switch (intent) {
+    case UpdateDeviceIntentEnum.Enum.update_evolver:
+      try {
+        const { response, error } = await Evolver.update({
+          body: JSON.parse(data),
+          client: evolverClient,
+        });
+
+        if (error) {
+          const errors = {};
+          error.detail?.forEach(({ loc, msg }) => {
+            const errorKey = loc
+              .map((l) => {
+                switch (l) {
+                  case "body":
+                    return "config";
+                  default:
+                    return l;
+                }
+              })
+              .join(".");
+            errors[errorKey] = [msg];
+          });
+
+          if (errors) {
+            return submission.reply({ fieldErrors: errors });
+          }
+        }
+        if (response.status !== 200) {
+          return submission.reply({
+            formErrors: [
+              `Got an unexpected response: ${response.status}. ${JSON.stringify(response)}`,
+            ],
+          });
+        }
+        return redirect(`/devices/${id}/config?mode=view`);
+      } catch (error) {
+        return submission.reply({ formErrors: ["unable to update device"] });
+      }
+    default:
+      return null;
+  }
+}
+
+export default function DeviceConfig() {
+  const { id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  // This should be what comes back from the action at /devices/:id that the form was submitted to.
+  const actionData = useActionData<typeof action>();
+
+  const submit = useSubmit();
+  const mode = searchParams.get("mode") === "edit" ? "edit" : "view";
+
+  const loaderData = useRouteLoaderData<typeof loader>("routes/devices.$id");
+  let description;
+
+  if (loaderData?.description?.config) {
+    description = loaderData.description;
+  }
+
+  const evolverConfig = description?.config as EvolverConfigWithoutDefaults;
+
+  useEffect(() => {
+    if (actionData?.error) {
+      if (typeof actionData.error === "string") {
+        notify.error(actionData.error);
+      }
+      if (typeof actionData.error === "object") {
+        const errorMessages: string[] = [];
+        Object.entries(actionData.error).forEach(([key, value]) => {
+          errorMessages.push(`${key}: ${value}`);
+        });
+        errorMessages.forEach((message) => {
+          notify.error(message);
+        });
+      }
+    }
+  }, [actionData]);
+
+  const [updatedEvolverConfig, setEvolverConfig] =
+    useState<typeof evolverConfig>(evolverConfig);
+
+  useEffect(() => {
+    setEvolverConfig(updatedEvolverConfig);
+  }, [updatedEvolverConfig]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {mode === "view" && (
+        <div className="flex gap-4">
+          <button
+            className="btn btn-neutral"
+            onClick={() => {
+              exportData(evolverConfig);
+            }}
+          >
+            Download
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              const params = new URLSearchParams();
+              params.set("mode", "edit");
+              setSearchParams(params);
+            }}
+          >
+            Edit
+          </button>
+        </div>
+      )}
+
+      {mode === "edit" && (
+        <div className="flex flex-wrap gap-4">
+          <input
+            onChange={(e) =>
+              handleFileUpload({
+                e,
+                setData: setEvolverConfig,
+              })
+            }
+            type="file"
+            className="file-input w-full max-w-xs"
+            accept=".json"
+          />
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              notify.dismiss();
+              const formData = new FormData();
+              formData.append("id", id ?? "");
+              formData.append(
+                "intent",
+                UpdateDeviceIntentEnum.Enum.update_evolver,
+              );
+              formData.append("data", JSON.stringify(updatedEvolverConfig));
+              submit(formData, {
+                method: "POST",
+              });
+            }}
+          >
+            Save
+          </button>
+          <button
+            className="btn"
+            onClick={() => {
+              setEvolverConfig(evolverConfig);
+              const params = new URLSearchParams();
+              params.set("mode", "view");
+              setSearchParams(params);
+              notify.dismiss();
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+      <div className="mt-4 flex items-start gap-4 mb-8 justify-between">
+        <ClientOnly fallback={<h1>...loading</h1>}>
+          {() => (
+            <EditJson
+              key={pathname}
+              data={updatedEvolverConfig}
+              mode={mode}
+              setData={setEvolverConfig}
+            />
+          )}
+        </ClientOnly>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/devices.$id.controllers.tsx b/app/routes/devices.$id.controllers.tsx
new file mode 100644
index 0000000..14fc8e0
--- /dev/null
+++ b/app/routes/devices.$id.controllers.tsx
@@ -0,0 +1,48 @@
+import { Link, Outlet, useParams, useRouteLoaderData } from "@remix-run/react";
+import { loader } from "./devices.$id";
+import { EvolverConfigWithoutDefaults } from "client";
+import { CogIcon } from "@heroicons/react/24/outline";
+
+export const handle = {
+  breadcrumb: ({ params }: { params: { id: string } }) => {
+    const { id } = params;
+    return <Link to={`/devices/${id}/controllers`}>controllers</Link>;
+  },
+};
+
+export default function Controllers() {
+  const { id } = useParams();
+
+  const loaderData = useRouteLoaderData<typeof loader>("routes/devices.$id");
+  let evolverConfig = {} as EvolverConfigWithoutDefaults;
+
+  if (loaderData?.description?.config) {
+    const description = loaderData.description;
+    if (description && description.config) {
+      evolverConfig = description.config as EvolverConfigWithoutDefaults;
+    }
+  }
+
+  if (!evolverConfig.controllers || evolverConfig.controllers.length === 0) {
+    return (
+      <div className="flex flex-col items-center">
+        <CogIcon className="h-20 w-20" />
+        <div>No controllers associated with this device.</div>
+        <div
+          className="tooltip"
+          data-tip="use the configuration editor to add hardware "
+        >
+          <Link className="link text-primary" to={`/devices/${id}/config`}>
+            add controller
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}
diff --git a/app/routes/devices.$id.hardware.$hardware_name.history.tsx b/app/routes/devices.$id.hardware.$hardware_name.history.tsx
new file mode 100644
index 0000000..60e7c2c
--- /dev/null
+++ b/app/routes/devices.$id.hardware.$hardware_name.history.tsx
@@ -0,0 +1,105 @@
+import { createClient } from "@hey-api/client-fetch";
+import { LoaderFunctionArgs, json } from "@remix-run/node";
+import {
+  Link,
+  useLoaderData,
+  useParams,
+  useRouteLoaderData,
+  useSearchParams,
+} from "@remix-run/react";
+import * as Evolver from "client/services.gen";
+import { db } from "~/utils/db.server";
+import { HardwareLineChart } from "~/components/LineChart";
+import { loader as rootLoader } from "~/root";
+
+export const handle = {
+  breadcrumb: (
+    {
+      params,
+    }: {
+      params: { id: string; hardware_name: string };
+    },
+    queryParams?: URLSearchParams,
+  ) => {
+    const { id, hardware_name } = params;
+    const linkTo = `/devices/${id}/hardware/${hardware_name}/history`;
+    if (queryParams !== undefined) {
+      linkTo.concat(`?${queryParams.toString()}`);
+    }
+    return <Link to={linkTo}>{hardware_name}</Link>;
+  },
+};
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const { id, hardware_name } = params;
+  const { searchParams } = new URL(request.url);
+  const targetDevice = await db.device.findUnique({ where: { device_id: id } });
+
+  const { url } = targetDevice;
+  const evolverClient = createClient({
+    baseUrl: url,
+  });
+
+  const vials = searchParams
+    .get("vials")
+    ?.split(",")
+    .map((str) => Number(str));
+
+  const properties = searchParams.get("properties")?.split(",");
+
+  const {
+    data: { data },
+  } = await Evolver.history({
+    body: {
+      vials,
+      properties,
+    },
+    query: { name: hardware_name },
+    client: evolverClient,
+  });
+
+  return json({ data });
+}
+
+export default function Hardware() {
+  const { data } = useLoaderData<typeof loader>();
+  const {
+    ENV: { EXCLUDED_PROPERTIES },
+  } = useRouteLoaderData<typeof rootLoader>("root");
+  const excludedProperties = EXCLUDED_PROPERTIES?.split(",") ?? [];
+  const [searchParams] = useSearchParams();
+  const { hardware_name } = useParams();
+  if (!hardware_name) {
+    return <div>Hardware not found</div>;
+  }
+  const hardwareHistory = data[hardware_name];
+  const allHardwareVials = Object.keys(hardwareHistory[0].data);
+  const allHardwareVialsProperties = Object.keys(
+    hardwareHistory[0].data[allHardwareVials[0]],
+  ).filter((property) => excludedProperties.includes(property) === false);
+
+  let selectedProperties: string[] = allHardwareVialsProperties;
+  let selectedVials: string[] = allHardwareVials;
+  if (searchParams.has("vials")) {
+    selectedVials = [...new Set(searchParams.get("vials")?.split(",") ?? [])];
+  }
+  if (searchParams.has("properties")) {
+    selectedProperties = [
+      ...new Set(searchParams.get("properties")?.split(",") ?? []),
+    ];
+  }
+
+  const charts = [];
+  selectedProperties.forEach((property) => {
+    const chart = (
+      <HardwareLineChart
+        rawData={hardwareHistory}
+        vials={selectedVials}
+        property={property}
+      />
+    );
+    charts.push(chart);
+  });
+
+  return <div className="mt-4">{charts}</div>;
+}
diff --git a/app/routes/devices.$id.hardware.tsx b/app/routes/devices.$id.hardware.tsx
new file mode 100644
index 0000000..4a87e8e
--- /dev/null
+++ b/app/routes/devices.$id.hardware.tsx
@@ -0,0 +1,69 @@
+import {
+  Link,
+  Outlet,
+  useParams,
+  useRouteLoaderData,
+  useSearchParams,
+} from "@remix-run/react";
+
+import { HardwareTable } from "~/components/HardwareTable";
+import { loader } from "./devices.$id";
+import { EvolverConfigWithoutDefaults } from "client";
+import { CogIcon } from "@heroicons/react/24/outline";
+
+export const handle = {
+  breadcrumb: ({
+    params,
+  }: {
+    params: { id: string; hardware_name: string };
+  }) => {
+    const { id } = params;
+    return <Link to={`/devices/${id}/hardware`}>hardware</Link>;
+  },
+};
+
+export default function Hardware() {
+  const { id, hardware_name } = useParams();
+  const [queryParams] = useSearchParams();
+  const loaderData = useRouteLoaderData<typeof loader>("routes/devices.$id");
+  let evolverConfig = {} as EvolverConfigWithoutDefaults;
+
+  if (loaderData?.description?.config) {
+    const description = loaderData.description;
+    if (description && description.config) {
+      evolverConfig = description.config as EvolverConfigWithoutDefaults;
+    }
+  }
+
+  if (
+    !evolverConfig.hardware ||
+    Object.keys(evolverConfig.hardware).length === 0
+  ) {
+    return (
+      <div className="flex flex-col items-center">
+        <CogIcon className="h-20 w-20" />
+        <div>No hardware associated with this device.</div>
+        <div
+          className="tooltip"
+          data-tip="use the configuration editor to add hardware "
+        >
+          <Link className="link text-primary" to={`/devices/${id}/config`}>
+            add hardware
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <HardwareTable
+        evolverConfig={evolverConfig}
+        hardwareName={hardware_name ?? ""}
+        queryParams={queryParams}
+        id={id ?? ""}
+      />
+      <Outlet />
+    </div>
+  );
+}
diff --git a/app/routes/devices.$id.state.tsx b/app/routes/devices.$id.state.tsx
new file mode 100644
index 0000000..8a6f6b0
--- /dev/null
+++ b/app/routes/devices.$id.state.tsx
@@ -0,0 +1,59 @@
+import { createClient } from "@hey-api/client-fetch";
+import { LoaderFunctionArgs, json } from "@remix-run/node";
+import {
+  Link,
+  useLoaderData,
+  useParams,
+  useRouteLoaderData,
+} from "@remix-run/react";
+import * as Evolver from "client/services.gen";
+import { VialGrid } from "~/components/VialGrid";
+import { db } from "~/utils/db.server";
+import { loader as rootLoader } from "~/root";
+
+const VIAL_COUNT = 16;
+
+export const handle = {
+  breadcrumb: ({ params }: { params: { id: string } }) => {
+    const { id } = params;
+    return <Link to={`/devices/${id}/state`}>state</Link>;
+  },
+};
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const { id } = params;
+  const targetDevice = await db.device.findUnique({ where: { device_id: id } });
+  const { url } = targetDevice;
+  const evolverClient = createClient({
+    baseUrl: url,
+  });
+  const { data } = await Evolver.state({ client: evolverClient });
+  const describeEvolver = await Evolver.describe({ client: evolverClient });
+  const vials = describeEvolver?.data?.config?.vials;
+  return json({
+    vials: vials,
+    evolverState: data,
+  });
+}
+
+export default function Hardware() {
+  const { id } = useParams();
+  const { evolverState } = useLoaderData<typeof loader>();
+
+  const {
+    ENV: { EXCLUDED_PROPERTIES },
+  } = useRouteLoaderData<typeof rootLoader>("root");
+
+  const excludedProperties = EXCLUDED_PROPERTIES?.split(",") ?? [];
+
+  return (
+    <div>
+      <VialGrid
+        stateData={evolverState.state}
+        id={id}
+        vialCount={VIAL_COUNT}
+        excludedProperties={excludedProperties}
+      />
+    </div>
+  );
+}
diff --git a/app/routes/devices.$id.tsx b/app/routes/devices.$id.tsx
new file mode 100644
index 0000000..a2b77e4
--- /dev/null
+++ b/app/routes/devices.$id.tsx
@@ -0,0 +1,140 @@
+import {
+  Outlet,
+  Link,
+  useParams,
+  useLoaderData,
+  useLocation,
+} from "@remix-run/react";
+import { LoaderFunctionArgs, json } from "@remix-run/node";
+import { createClient } from "@hey-api/client-fetch";
+import * as Evolver from "client/services.gen";
+import clsx from "clsx";
+import { EvolverConfigWithoutDefaults } from "client";
+import { BeakerIcon, WrenchScrewdriverIcon } from "@heroicons/react/24/outline";
+import { db } from "~/utils/db.server";
+
+export const handle = {
+  breadcrumb: ({ params }: { params: { id: string } }) => {
+    const { id } = params;
+    return <Link to={`/devices/${id}/state`}>{id}</Link>;
+  },
+};
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const { id } = params;
+  const targetDevice = await db.device.findUnique({ where: { device_id: id } });
+  if (!targetDevice) {
+    throw Error("device not found");
+  }
+  const { url } = targetDevice;
+  const evolverClient = createClient({
+    baseUrl: url,
+  });
+  const describeEvolver = await Evolver.describe({ client: evolverClient });
+  return json({
+    description: describeEvolver.data as {
+      config: EvolverConfigWithoutDefaults;
+    },
+    url,
+    ok: true,
+  });
+}
+
+export function ErrorBoundary() {
+  const { id } = useParams();
+  return (
+    <div className="flex flex-col gap-4 bg-base-300 p-8 rounded-box">
+      <WrenchScrewdriverIcon className="w-10 h-10" />
+      <div>
+        <div>
+          <h1 className="font-mono">{`Error loading the device: ${id}`}</h1>
+        </div>
+      </div>
+
+      <Link to="/" className="link">
+        home
+      </Link>
+    </div>
+  );
+}
+
+export default function Device() {
+  const { id } = useParams();
+  const { description, url } = useLoaderData<typeof loader>();
+  const { pathname } = useLocation();
+  const currentPath = pathname.split("/").pop();
+  const evolverConfig = description.config;
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className=" flex items-center gap-4 justify-between">
+        <div className="flex items-center">
+          <div>
+            <h1 className="text-2xl">{`${evolverConfig.name}`}</h1>
+            <div className="flex w-full">
+              <h1 className="font-mono">{`${id}`}</h1>
+              <div className="divider divider-horizontal"></div>
+              <h1 className="font-mono">{`${url}`}</h1>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <BeakerIcon className="h-9 w-9 text-accent" />
+          <div className={clsx("badge text-sm", "badge-accent")}>online</div>
+        </div>
+      </div>
+      <div role="tablist" className="tabs tabs-lg tabs-boxed">
+        <Link
+          to={"./state"}
+          role="tab"
+          className={clsx(
+            "tab",
+            currentPath === "state" && "tab-active",
+            "tab-border-3",
+          )}
+        >
+          state
+        </Link>
+        <Link
+          role="tab"
+          to={"./config"}
+          className={clsx(
+            "tab",
+            currentPath === "config" && "tab-active",
+            "tab-border-3",
+          )}
+        >
+          configuration
+        </Link>
+        <Link
+          to={"./hardware"}
+          role="tab"
+          className={clsx(
+            "tab",
+            currentPath === "hardware" && "tab-active",
+            currentPath === "history" && "tab-active",
+            "tab-border-3",
+          )}
+        >
+          hardware
+        </Link>
+
+        <Link
+          to={"./controllers"}
+          role="tab"
+          className={clsx(
+            "tab",
+            currentPath === "controllers" && "tab-active",
+            "tab-border-3",
+          )}
+        >
+          controllers
+        </Link>
+      </div>
+      <div className="p-8 bg-base-300 rounded-box  relative overflow-x-auto">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/devices.list.tsx b/app/routes/devices.list.tsx
new file mode 100644
index 0000000..c918c67
--- /dev/null
+++ b/app/routes/devices.list.tsx
@@ -0,0 +1,267 @@
+import { z } from "zod";
+import { type ActionFunctionArgs, redirect, json } from "@remix-run/node";
+import { parseWithZod, getZodConstraint } from "@conform-to/zod";
+import { pingDevice } from "~/utils/pingDevice.server";
+import { db } from "~/utils/db.server";
+import { Prisma } from "@prisma/client";
+import { useForm, getFormProps, getInputProps } from "@conform-to/react";
+import {
+  Form,
+  Link,
+  useActionData,
+  useLoaderData,
+  useSubmit,
+} from "@remix-run/react";
+import clsx from "clsx";
+import { CloudIcon } from "@heroicons/react/24/outline";
+import { generateDeviceId } from "~/utils/generateDeviceId.server";
+import { toast as notify } from "react-toastify";
+import { useEffect } from "react";
+
+const IntentEnum = z.enum(["add_device", "delete_device"], {
+  required_error: "intent is required",
+  invalid_type_error: "must be one of, add_device or delete_device",
+});
+
+const schema = z.discriminatedUnion("intent", [
+  z.object({
+    intent: z.literal(IntentEnum.Enum.add_device),
+    url: z.preprocess(
+      (value) => (value === "" ? undefined : value),
+      z.string().url(),
+    ),
+  }),
+  z.object({
+    intent: z.literal(IntentEnum.Enum.delete_device),
+    id: z.string(),
+  }),
+]);
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  const submission = parseWithZod(formData, { schema });
+  if (submission.status !== "success") {
+    return submission.reply();
+  }
+  const { intent } = submission.value;
+
+  let id = "";
+  switch (intent) {
+    case IntentEnum.Enum.add_device:
+      try {
+        const { url } = submission.value;
+        const { online: isOnline } = await pingDevice(url as string);
+        if (isOnline) {
+          id = await generateDeviceId(url);
+          await db.device.create({ data: { url, device_id: id } });
+        } else {
+          throw Error("no evolver detected at that address");
+        }
+      } catch (error) {
+        const { url } = submission.value;
+        const errorMessages = ["unable to add device"];
+        if (error instanceof Prisma.PrismaClientKnownRequestError) {
+          if (error.code === "P2002") {
+            errorMessages.push(`device at ${url} already exists`);
+          }
+        } else if (error instanceof Error) {
+          errorMessages.push(error.message);
+        }
+        return submission.reply({ formErrors: errorMessages });
+      }
+
+      return redirect(`/devices/${id}/state`);
+    case IntentEnum.Enum.delete_device:
+      try {
+        const { id } = submission.value;
+        await db.device.delete({ where: { device_id: id } });
+        return redirect("/devices/list");
+      } catch (error) {
+        const errorMessages = ["unable to delete device"];
+        return submission.reply({ formErrors: errorMessages });
+      }
+      return null;
+    default:
+      break;
+  }
+}
+
+export const loader = async () => {
+  const devices = await db.device.findMany();
+  const deviceStatusPromises = devices.map(({ url }) => pingDevice(url));
+  const resolved = await Promise.allSettled(deviceStatusPromises);
+  const results = resolved.map((result, index) => {
+    return {
+      name: result.status === "fulfilled" && result.value.name,
+      device_id: devices[index].device_id,
+      url: devices[index].url,
+      createdAt: devices[index].createdAt,
+      status:
+        result.status === "fulfilled" && result.value.online
+          ? "online"
+          : "offline",
+    };
+  });
+  return json(results);
+};
+
+export default function DevicesList() {
+  const loaderData = useLoaderData<typeof loader>();
+  const actionData = useActionData<typeof action>();
+  const submit = useSubmit();
+
+  const [form, fields] = useForm({
+    lastResult: actionData,
+    constraint: getZodConstraint(schema),
+    // validate field once user leaves the field
+    shouldValidate: "onInput",
+    // revalidate field as user types again
+    shouldRevalidate: "onInput",
+    // run validation logic on the client
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema });
+    },
+  });
+
+  useEffect(() => {
+    if (form?.errors) {
+      notify.dismiss();
+      form.errors.forEach((message) => {
+        notify.error(message);
+      });
+    }
+  }, [form.errors]);
+
+  const removeDevice = (id: string) => {
+    const formData = new FormData();
+    formData.append("id", id);
+    formData.append("intent", IntentEnum.Enum.delete_device);
+    submit(formData, { method: "delete" });
+  };
+
+  const deviceTableItems = loaderData.map(
+    ({ device_id, url, status, createdAt, name }, ix) => {
+      return (
+        <tr key={device_id}>
+          <th>{ix + 1}</th>
+          <td>{new Date(createdAt).toDateString()}</td>
+          <td>{name}</td>
+          <td>
+            {status === "online" && (
+              <Link to={`/devices/${device_id}/state`}>
+                <div
+                  className={clsx(status === "online" && "link link-primary")}
+                >
+                  {device_id}
+                </div>
+              </Link>
+            )}
+            {status === "offline" && (
+              <div className={clsx("")}>{device_id}</div>
+            )}
+          </td>
+
+          <td>
+            {status === "online" && <div>{url}</div>}
+            {status === "offline" && <div className={clsx("")}>{url}</div>}
+          </td>
+          <td>
+            <div
+              className={clsx(
+                "badge",
+                status === "online" && "badge-accent",
+                status === "offline" && "badge-ghost badge-outline",
+              )}
+            >
+              {status}
+            </div>
+          </td>
+          <td>
+            <button onClick={() => removeDevice(device_id)}>forget</button>
+          </td>
+        </tr>
+      );
+    },
+  );
+
+  return (
+    <>
+      <div className="mt-4 mb-4 flex flex-wrap justify-between gap-4">
+        <h1 className="flex-none text-2xl">Devices</h1>
+        <Form
+          method="POST"
+          action="/devices/list"
+          className="flex flex-none w-100 space-x-4 items-baseline"
+          {...getFormProps(form)}
+        >
+          <input
+            name={"intent"}
+            defaultValue={IntentEnum.Enum.add_device}
+            className="hidden"
+          ></input>
+          <div className="join">
+            <div className="flex flex-col">
+              <input
+                placeholder="url address"
+                {...getInputProps(fields.url, { type: "text" })}
+                className={clsx(
+                  "input input-bordered  max-w-xs join-item",
+                  fields.url.errors && "input-error",
+                )}
+              />
+              <div className="text-error">
+                {fields.url.errors && (
+                  <div>
+                    {fields.url.errors.map((message) =>
+                      message.toLocaleLowerCase(),
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            <button type="submit" className="btn btn-primary join-item ">
+              Add
+            </button>
+          </div>
+        </Form>
+      </div>
+      <div className="bg-base-300 rounded-box p-8">
+        {deviceTableItems.length === 0 && (
+          <div className="flex flex-col justify-center items-center gap-4">
+            <CloudIcon className="w-16 h-16 text-gray-500" />
+            <div>
+              Enter the url where an instance of the{" "}
+              <a
+                href="https://github.com/ssec-jhu/evolver-ng"
+                className="link link-primary"
+                target="_blank"
+                rel="noreferrer"
+              >
+                evolver-ng service
+              </a>{" "}
+              is running to get started.
+            </div>
+          </div>
+        )}
+        {deviceTableItems.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="table table-zebra">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>added</th>
+                  <th>name</th>
+                  <th>id</th>
+                  <th>url</th>
+                  <th>status</th>
+                  <th>forget</th>
+                </tr>
+              </thead>
+              <tbody>{deviceTableItems}</tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/app/routes/devices.tsx b/app/routes/devices.tsx
index 94743f4..0ceb3dd 100644
--- a/app/routes/devices.tsx
+++ b/app/routes/devices.tsx
@@ -1,250 +1,11 @@
-import { z } from "zod";
-import { type ActionFunctionArgs, redirect, json } from "@remix-run/node";
-import { parseWithZod, getZodConstraint } from "@conform-to/zod";
-import { pingDevice } from "~/utils/pingDevice.server";
-import { db } from "~/utils/db.server";
-import { Prisma } from "@prisma/client";
-import { useForm, getFormProps, getInputProps } from "@conform-to/react";
-import {
-  Form,
-  Link,
-  useActionData,
-  useLoaderData,
-  useSubmit,
-} from "@remix-run/react";
-import clsx from "clsx";
-import { BeakerIcon } from "@heroicons/react/16/solid";
+import { Outlet, Link } from "@remix-run/react";
 
-const IntentEnum = z.enum(["add_device", "delete_device"], {
-  required_error: "intent is required",
-  invalid_type_error: "must be one of, add_device or delete_device",
-});
-
-const schema = z.object({
-  intent: IntentEnum,
-  // The preprocess step is required for zod to perform the required check properly
-  // as the value of an empty input is usually an empty string
-  ip_addr: z.preprocess(
-    (value) => (value === "" ? undefined : value),
-    z
-      .string({ required_error: "ip address is required" })
-      .ip("ip address is invalid"),
-  ),
-});
-
-export async function action({ request }: ActionFunctionArgs) {
-  const formData = await request.formData();
-  const submission = parseWithZod(formData, { schema });
-  if (submission.status !== "success") {
-    return submission.reply();
-  }
-  const { intent, ip_addr } = submission.value;
-
-  switch (intent) {
-    case IntentEnum.Enum.add_device:
-      try {
-        const isOnline = await pingDevice(ip_addr as string);
-        if (isOnline) {
-          await db.device.create({ data: { ip_addr } });
-        } else {
-          throw Error("no evolver detected at that ip");
-        }
-      } catch (error) {
-        const errorMessages = ["unable to add device"];
-        if (error instanceof Prisma.PrismaClientKnownRequestError) {
-          if (error.code === "P2002") {
-            errorMessages.push(`${ip_addr} already exists`);
-          }
-        } else if (error instanceof Error) {
-          errorMessages.push(error.message);
-        }
-        return submission.reply({ formErrors: errorMessages });
-      }
-      return redirect(`/device/${ip_addr}`);
-    case IntentEnum.Enum.delete_device:
-      try {
-        await db.device.delete({ where: { ip_addr } });
-      } catch (error) {
-        const errorMessages = ["unable to delete device"];
-        return submission.reply({ formErrors: errorMessages });
-      }
-      return null;
-    default:
-      break;
-  }
-}
-
-export const loader = async () => {
-  const devices = await db.device.findMany();
-  const deviceStatusPromises = devices.map(({ ip_addr }) =>
-    pingDevice(ip_addr),
-  );
-  const resolved = await Promise.allSettled(deviceStatusPromises);
-  const results = resolved.map((result, index) => ({
-    ip_addr: devices[index].ip_addr,
-    createdAt: devices[index].createdAt,
-    status:
-      result.status === "fulfilled" && result.value ? "online" : "offline",
-  }));
-  return json(results);
+export const handle = {
+  breadcrumb: () => {
+    return <Link to={`/devices/list`}>devices</Link>;
+  },
 };
 
 export default function Devices() {
-  const loaderData = useLoaderData<typeof loader>();
-  const actionData = useActionData<typeof action>();
-  const submit = useSubmit();
-
-  const [form, fields] = useForm({
-    lastResult: actionData,
-    constraint: getZodConstraint(schema),
-    // validate field once user leaves the field
-    shouldValidate: "onInput",
-    // revalidate field as user types again
-    shouldRevalidate: "onInput",
-    // run validation logic on the client
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema });
-    },
-  });
-
-  const removeDevice = (ip_addr: string) => {
-    const formData = new FormData();
-    formData.append("ip_addr", ip_addr);
-    formData.append("intent", IntentEnum.Enum.delete_device);
-    submit(formData, { method: "delete" });
-  };
-
-  const deviceTableItems = loaderData.map(
-    ({ ip_addr, status, createdAt }, ix) => {
-      return (
-        <tr key={ip_addr}>
-          <th>{ix + 1}</th>
-          <td>{new Date(createdAt).toDateString()}</td>
-          <td>
-            {status === "online" && (
-              <Link to={`/device/${ip_addr}`}>
-                <div
-                  className={clsx(status === "online" && "link link-primary")}
-                >
-                  {ip_addr}
-                </div>
-              </Link>
-            )}
-            {status === "offline" && <div className={clsx("")}>{ip_addr}</div>}
-          </td>
-          <td>
-            <div
-              className={clsx(
-                "badge",
-                status === "online" && "badge-accent",
-                status === "offline" && "badge-ghost badge-outline",
-              )}
-            >
-              {status}
-            </div>
-          </td>
-          <td>
-            <button
-              onClick={() => removeDevice(ip_addr)}
-              className={clsx(
-                ip_addr !== "127.0.0.1" && "link",
-                ip_addr === "127.0.0.1" && "hidden",
-              )}
-            >
-              forget
-            </button>
-          </td>
-        </tr>
-      );
-    },
-  );
-
-  return (
-    <>
-      <div className="mx-auto max-w-6xl px-4">
-        <div className="mt-4 flex flex-wrap justify-between gap-4 min-h-28">
-          <h1 className="flex-none text-2xl">Devices</h1>
-          <Form
-            method="POST"
-            action="/devices"
-            className="flex flex-none w-100 space-x-4 items-baseline"
-            {...getFormProps(form)}
-          >
-            <input
-              name={"intent"}
-              defaultValue={IntentEnum.Enum.add_device}
-              className="hidden"
-            ></input>
-            <div className="join">
-              <div className="flex flex-col space-y-1">
-                <input
-                  {...getInputProps(fields.ip_addr, { type: "text" })}
-                  className={clsx(
-                    "join-item input input-bordered  max-w-xs",
-                    fields.ip_addr.errors && "input-error",
-                  )}
-                />
-                {fields.ip_addr.errors &&
-                  fields.ip_addr.errors.map(
-                    (message) =>
-                      message && (
-                        <div
-                          key={message}
-                          className="text-error text-wrap max-w-xs"
-                          id={fields.ip_addr.errorId}
-                          role="alert"
-                        >
-                          {message.toLocaleLowerCase()}
-                        </div>
-                      ),
-                  )}
-                {form.errors &&
-                  form.errors.map(
-                    (message) =>
-                      message && (
-                        <div
-                          key={message}
-                          className="text-error text-wrap max-w-xs"
-                          id={form.errorId}
-                          role="alert"
-                        >
-                          {message.toLocaleLowerCase()}
-                        </div>
-                      ),
-                  )}
-              </div>
-              <button
-                type="submit"
-                className="btn btn-primary join-item rounded-r-md pr-6 pl-6"
-              >
-                Add
-              </button>
-            </div>
-          </Form>
-        </div>
-        {deviceTableItems.length === 0 && (
-          <div className="flex flex-col justify-center items-center">
-            <BeakerIcon className="max-h-20 max-w-2010" />
-            <div>Enter an ip address to get started...</div>
-          </div>
-        )}
-        {deviceTableItems.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="table table-zebra">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>Added</th>
-                  <th>Address</th>
-                  <th>Status</th>
-                  <th>Forget</th>
-                </tr>
-              </thead>
-              <tbody>{deviceTableItems}</tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </>
-  );
+  return <Outlet />;
 }
diff --git a/app/sessions.ts b/app/sessions.ts
new file mode 100644
index 0000000..9e0027a
--- /dev/null
+++ b/app/sessions.ts
@@ -0,0 +1,33 @@
+// app/sessions.ts
+import { createCookieSessionStorage } from "@remix-run/node"; // or cloudflare/deno
+
+type SessionData = {
+  userId: string;
+};
+
+type SessionFlashData = {
+  error: string;
+};
+
+const { getSession, commitSession, destroySession } =
+  createCookieSessionStorage<SessionData, SessionFlashData>({
+    // a Cookie from `createCookie` or the CookieOptions to create one
+    cookie: {
+      name: "__session",
+
+      // all of these are optional
+      domain: "remix.run",
+      // Expires can also be set (although maxAge overrides it when used in combination).
+      // Note that this method is NOT recommended as `new Date` creates only one date on each server deployment, not a dynamic date in the future!
+      //
+      // expires: new Date(Date.now() + 60_000),
+      httpOnly: true,
+      maxAge: 60,
+      path: "/",
+      sameSite: "lax",
+      secrets: ["s3cret1"],
+      secure: true,
+    },
+  });
+
+export { getSession, commitSession, destroySession };
diff --git a/app/utils/chart/colors.ts b/app/utils/chart/colors.ts
new file mode 100644
index 0000000..597116f
--- /dev/null
+++ b/app/utils/chart/colors.ts
@@ -0,0 +1,52 @@
+export const vialColors = [
+  "#FF5733", // 1 - Vivid Red
+  "#33FF57", // 2 - Vivid Green
+  "#3357FF", // 3 - Vivid Blue
+  "#FF33A6", // 4 - Vivid Pink
+  "#57FF33", // 5 - Lime Green
+  "#5733FF", // 6 - Purple Blue
+  "#FFB833", // 7 - Bright Orange
+  "#33FFB8", // 8 - Aqua Green
+  "#B833FF", // 9 - Bright Purple
+  "#FFA633", // 10 - Orange
+  "#33FFA6", // 11 - Mint Green
+  "#A633FF", // 12 - Violet
+  "#FFD133", // 13 - Yellow Orange
+  "#33FFD1", // 14 - Cyan
+  "#D133FF", // 15 - Magenta
+  "#FF5733", // 16 - Red
+  "#33FF57", // 17 - Green
+  "#3357FF", // 18 - Blue
+  "#FF33A6", // 19 - Pink
+  "#57FF33", // 20 - Light Green
+  "#5733FF", // 21 - Indigo
+  "#FFB833", // 22 - Light Orange
+  "#33FFB8", // 23 - Light Aqua
+  "#B833FF", // 24 - Light Purple
+  "#FFA633", // 25 - Bright Orange
+  "#33FFA6", // 26 - Light Mint
+  "#A633FF", // 27 - Bright Violet
+  "#FFD133", // 28 - Light Yellow
+  "#33FFD1", // 29 - Light Cyan
+  "#D133FF", // 30 - Light Magenta
+  "#FF5733", // 31 - Deep Red
+  "#33FF57", // 32 - Deep Green
+  "#3357FF", // 33 - Deep Blue
+  "#FF33A6", // 34 - Deep Pink
+  "#57FF33", // 35 - Deep Lime
+  "#5733FF", // 36 - Deep Purple
+  "#FFB833", // 37 - Orange Yellow
+  "#33FFB8", // 38 - Greenish Aqua
+  "#B833FF", // 39 - Purple Magenta
+  "#FFA633", // 40 - Bright Yellow
+  "#33FFA6", // 41 - Pastel Green
+  "#A633FF", // 42 - Deep Violet
+  "#FFD133", // 43 - Pale Orange
+  "#33FFD1", // 44 - Pale Aqua
+  "#D133FF", // 45 - Light Magenta
+  "#FF5733", // 46 - Warm Red
+  "#33FF57", // 47 - Spring Green
+  "#3357FF", // 48 - Sky Blue
+  "#FF33A6", // 49 - Hot Pink
+  "#57FF33", // 50 - Neon Green
+];
diff --git a/app/utils/env.server.ts b/app/utils/env.server.ts
index e2388e1..8c7710f 100644
--- a/app/utils/env.server.ts
+++ b/app/utils/env.server.ts
@@ -3,12 +3,20 @@ import { z } from "zod";
 const schema = z.object({
   NODE_ENV: z.enum(["production", "development", "test"] as const),
   DATABASE_URL: z.string(),
-  SESSION_SECRET: z.string(),
   DEFAULT_DEVICE_PORT: z.string(),
-  VITEST: z.boolean().optional(),
+  VITEST: z.string().optional(),
+  EXCLUDED_PROPERTIES: z.string().optional(),
 });
 
-const clientSchema = schema.pick({ VITEST: true });
+const env = schema.parse(process.env);
+export const ENV = env;
+
+// Pick env variables that will be publically visible
+const clientSchema = schema.pick({
+  VITEST: true,
+  NODE_ENV: true,
+  EXCLUDED_PROPERTIES: true,
+});
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -39,10 +47,11 @@ export function init() {
  * be included in the client.
  * @returns all public ENV variables
  */
-export function getEnv() {
+export function getClientEnv() {
   /*⛔️ env vars added here will be visible to the client*/
   const clientEnv = {
-    VITEST: !!process.env.VITEST,
+    NODE_ENV: process.env.NODE_ENV,
+    EXCLUDED_PROPERTIES: process.env.EXCLUDED_PROPERTIES,
   };
   const parsed = clientSchema.safeParse(clientEnv);
   if (parsed.success === false) {
@@ -54,12 +63,3 @@ export function getEnv() {
     return clientEnv;
   }
 }
-
-type ENV = ReturnType<typeof getEnv>;
-
-declare global {
-  let ENV: ENV;
-  interface Window {
-    ENV: ENV;
-  }
-}
diff --git a/app/utils/exportData.ts b/app/utils/exportData.ts
new file mode 100644
index 0000000..0951feb
--- /dev/null
+++ b/app/utils/exportData.ts
@@ -0,0 +1,14 @@
+import { EvolverConfigWithoutDefaults } from "client";
+import { getDate } from "./getDate";
+
+export const exportData = (data: EvolverConfigWithoutDefaults) => {
+  const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+    JSON.stringify(data),
+  )}`;
+  const dateTime = getDate();
+  const link = document.createElement("a");
+  link.href = jsonString;
+  link.download = `${data.name}_${dateTime}.json`;
+
+  link.click();
+};
diff --git a/app/utils/generateDeviceId.server.ts b/app/utils/generateDeviceId.server.ts
new file mode 100644
index 0000000..23deff1
--- /dev/null
+++ b/app/utils/generateDeviceId.server.ts
@@ -0,0 +1,22 @@
+export async function generateDeviceId(url: string) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(url);
+
+  // Hash the URL using SHA-256
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+
+  // Convert the hash to a base64 string
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const base64String = btoa(String.fromCharCode(...hashArray));
+
+  // Convert to a URL-safe string
+  const urlSafeHash = base64String
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+
+  // truncate to a desired length
+  const deviceId = urlSafeHash.substring(0, 5);
+
+  return deviceId;
+}
diff --git a/app/utils/getDate.ts b/app/utils/getDate.ts
new file mode 100644
index 0000000..7f7e42d
--- /dev/null
+++ b/app/utils/getDate.ts
@@ -0,0 +1,14 @@
+export const getDate = () => {
+  const today = new Date();
+
+  const options: { month: "short"; day: "2-digit"; year: "numeric" } = {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  };
+
+  return today
+    .toLocaleDateString("en-US", options)
+    .replace(" ", "_")
+    .replace(",", "_");
+};
diff --git a/app/utils/handleFileUpload.ts b/app/utils/handleFileUpload.ts
new file mode 100644
index 0000000..f5e03e8
--- /dev/null
+++ b/app/utils/handleFileUpload.ts
@@ -0,0 +1,18 @@
+import React from "react";
+
+export function handleFileUpload<T>({
+  e,
+  setData,
+}: {
+  e: React.ChangeEvent<HTMLInputElement>;
+  setData: React.Dispatch<React.SetStateAction<T>>;
+}) {
+  const fileReader = new FileReader();
+  if (e.target.files?.[0]) {
+    fileReader.readAsText(e.target.files[0], "UTF-8");
+    fileReader.onload = (event) => {
+      const uploadedConfig = JSON.parse(event.target?.result as string);
+      setData(uploadedConfig);
+    };
+  }
+}
diff --git a/app/utils/pingDevice.server.ts b/app/utils/pingDevice.server.ts
index 7509a05..d71d91f 100644
--- a/app/utils/pingDevice.server.ts
+++ b/app/utils/pingDevice.server.ts
@@ -1,32 +1,43 @@
 import { createClient } from "@hey-api/client-fetch";
 import * as Evolver from "client/services.gen";
 
-export async function pingDevice(ip: string, timeout = 4000) {
+export async function pingDevice(
+  evolver_url_addr: string,
+  timeout = 4000,
+): Promise<{ online: boolean; name: string }> {
   const controller = new AbortController();
   const { signal } = controller;
 
   const evolverClient = createClient({
-    baseUrl: `http://${ip}:${process.env.DEFAULT_DEVICE_PORT}`,
+    baseUrl: evolver_url_addr,
   });
   // Set a timeout to abort the fetch request
   const timeoutId = setTimeout(() => controller.abort(), timeout);
 
   try {
-    const { response } = await Evolver.healthzHealthzGet({
+    const { response } = await Evolver.healthcheck({
       client: evolverClient,
       signal,
     });
+
     clearTimeout(timeoutId); // Clear the timeout if fetch is successful
     if (response && response.status && response.status !== 200) {
-      return false;
+      return { online: false, name: "unknown" };
     }
-    return true;
+    // get the evolver name too.
+    const evolverDescription = await Evolver.describe({
+      client: evolverClient,
+    });
+    const {
+      config: { name },
+    } = evolverDescription.data;
+    return { online: true, name };
   } catch (error) {
     if (error instanceof DOMException && error.name === "AbortError") {
       console.info(
-        `request to device ${ip} timed out after ${timeout}ms, now designated offline`,
+        `request to device ${evolver_url_addr} timed out after ${timeout}ms, now designated offline`,
       );
     }
-    return false;
+    return { online: false, name: "unknown" };
   }
 }
diff --git a/openapi.json b/openapi.json
index 68a9f45..bd5897d 100644
--- a/openapi.json
+++ b/openapi.json
@@ -58,7 +58,7 @@
     "/state": {
       "get": {
         "summary": "Get State",
-        "operationId": "get_state_state_get",
+        "operationId": "state",
         "responses": {
           "200": {
             "description": "Successful Response",
@@ -74,7 +74,7 @@
     "/schema/": {
       "get": {
         "summary": "Get Schema",
-        "operationId": "get_schema_schema__get",
+        "operationId": "schema",
         "parameters": [
           {
             "name": "classinfo",
@@ -119,27 +119,148 @@
         }
       }
     },
-    "/history/{name}": {
+    "/history/": {
+      "post": {
+        "summary": "Get History",
+        "operationId": "history",
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "string",
+              "title": "Name"
+            }
+          },
+          {
+            "name": "t_start",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "number",
+              "title": "T Start"
+            }
+          },
+          {
+            "name": "t_stop",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "number",
+              "title": "T Stop"
+            }
+          },
+          {
+            "name": "n_max",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "integer",
+              "title": "N Max"
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "allOf": [
+                  {
+                    "$ref": "#/components/schemas/Body_history"
+                  }
+                ],
+                "title": "Body"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HistoryResult"
+                }
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      },
       "get": {
         "summary": "Get History",
-        "operationId": "get_history",
+        "operationId": "history",
         "parameters": [
           {
             "name": "name",
-            "in": "path",
-            "required": true,
+            "in": "query",
+            "required": false,
             "schema": {
               "type": "string",
               "title": "Name"
             }
+          },
+          {
+            "name": "t_start",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "number",
+              "title": "T Start"
+            }
+          },
+          {
+            "name": "t_stop",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "number",
+              "title": "T Stop"
+            }
+          },
+          {
+            "name": "n_max",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "integer",
+              "title": "N Max"
+            }
           }
         ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "allOf": [
+                  {
+                    "$ref": "#/components/schemas/Body_history"
+                  }
+                ],
+                "title": "Body"
+              }
+            }
+          }
+        },
         "responses": {
           "200": {
             "description": "Successful Response",
             "content": {
               "application/json": {
-                "schema": {}
+                "schema": {
+                  "$ref": "#/components/schemas/HistoryResult"
+                }
               }
             }
           },
@@ -159,7 +280,81 @@
     "/healthz": {
       "get": {
         "summary": "Healthz",
-        "operationId": "healthz_healthz_get",
+        "operationId": "healthcheck",
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          }
+        }
+      }
+    },
+    "/calibration_status/": {
+      "get": {
+        "summary": "Calibration Status",
+        "operationId": "calibration_status_calibration_status__get",
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "string",
+              "title": "Name"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful Response",
+            "content": {
+              "application/json": {
+                "schema": {}
+              }
+            }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/calibrate/{name}": {
+      "post": {
+        "summary": "Calibrate",
+        "operationId": "calibrate_calibrate__name__post",
+        "parameters": [
+          {
+            "name": "name",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string",
+              "title": "Name"
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "title": "Data"
+              }
+            }
+          }
+        },
         "responses": {
           "200": {
             "description": "Successful Response",
@@ -168,6 +363,16 @@
                 "schema": {}
               }
             }
+          },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/HTTPValidationError"
+                }
+              }
+            }
           }
         }
       }
@@ -175,6 +380,40 @@
   },
   "components": {
     "schemas": {
+      "Body_history": {
+        "properties": {
+          "vials": {
+            "anyOf": [
+              {
+                "items": {
+                  "type": "integer"
+                },
+                "type": "array"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Vials"
+          },
+          "properties": {
+            "anyOf": [
+              {
+                "items": {
+                  "type": "string"
+                },
+                "type": "array"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Properties"
+          }
+        },
+        "type": "object",
+        "title": "Body_history"
+      },
       "ConfigDescriptor": {
         "properties": {
           "classinfo": {
@@ -200,6 +439,10 @@
             "type": "string",
             "title": "Name"
           },
+          "experiment": {
+            "type": "string",
+            "title": "Experiment"
+          },
           "vials": {
             "items": {},
             "type": "array",
@@ -250,7 +493,7 @@
                 "$ref": "#/components/schemas/ConfigDescriptor"
               },
               {
-                "$ref": "#/components/schemas/evolver__history__HistoryServer__Config"
+                "$ref": "#/components/schemas/evolver__history__interface__History__Config"
               }
             ],
             "title": "History"
@@ -271,6 +514,7 @@
         "type": "object",
         "required": [
           "name",
+          "experiment",
           "vials",
           "hardware",
           "controllers",
@@ -295,6 +539,42 @@
         "type": "object",
         "title": "HTTPValidationError"
       },
+      "HistoricDatum": {
+        "properties": {
+          "timestamp": {
+            "type": "number",
+            "title": "Timestamp"
+          },
+          "data": {
+            "title": "Data"
+          }
+        },
+        "type": "object",
+        "required": [
+          "timestamp",
+          "data"
+        ],
+        "title": "HistoricDatum"
+      },
+      "HistoryResult": {
+        "properties": {
+          "data": {
+            "additionalProperties": {
+              "items": {
+                "$ref": "#/components/schemas/HistoricDatum"
+              },
+              "type": "array"
+            },
+            "type": "object",
+            "title": "Data"
+          }
+        },
+        "type": "object",
+        "required": [
+          "data"
+        ],
+        "title": "HistoryResult"
+      },
       "SchemaResponse": {
         "properties": {
           "classinfo": {
@@ -375,6 +655,136 @@
         ],
         "title": "ValidationError"
       },
+      "evolver__calibration__interface__Calibrator__Config": {
+        "properties": {
+          "name": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Name"
+          },
+          "dir": {
+            "type": "string",
+            "format": "path",
+            "title": "Dir",
+            "description": "Directory for saving new configuration files to.",
+            "default": "calibration_files"
+          },
+          "created": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "date-time"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Created",
+            "description": "The creation timestamp"
+          },
+          "expire": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "duration"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Expire",
+            "description": "The amount of time after which the associated object is considered stale. `datetime.timedelta.max` := forever (the default).",
+            "default": "P168D"
+          },
+          "input_transformer": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/ConfigDescriptor"
+              },
+              {
+                "$ref": "#/components/schemas/evolver__calibration__interface__Transformer__Config"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Input Transformer"
+          },
+          "output_transformer": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/ConfigDescriptor"
+              },
+              {
+                "$ref": "#/components/schemas/evolver__calibration__interface__Transformer__Config"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Output Transformer"
+          }
+        },
+        "type": "object",
+        "title": "Config"
+      },
+      "evolver__calibration__interface__Transformer__Config": {
+        "properties": {
+          "name": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Name"
+          },
+          "dir": {
+            "type": "string",
+            "format": "path",
+            "title": "Dir",
+            "description": "Directory for saving new configuration files to.",
+            "default": "calibration_files"
+          },
+          "created": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "date-time"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Created",
+            "description": "The creation timestamp"
+          },
+          "expire": {
+            "anyOf": [
+              {
+                "type": "string",
+                "format": "duration"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Expire",
+            "description": "The amount of time after which the associated object is considered stale. `datetime.timedelta.max` := forever (the default).",
+            "default": "P168D"
+          }
+        },
+        "type": "object",
+        "title": "Config"
+      },
       "evolver__connection__interface__Connection__Config": {
         "properties": {
           "name": {
@@ -421,17 +831,38 @@
               }
             ],
             "title": "Name"
+          },
+          "calibrator": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/ConfigDescriptor"
+              },
+              {
+                "$ref": "#/components/schemas/evolver__calibration__interface__Calibrator__Config"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Calibrator",
+            "description": "The calibrator used to both calibrate and transform Input and/or Output data."
           }
         },
         "type": "object",
         "title": "Config"
       },
-      "evolver__history__HistoryServer__Config": {
+      "evolver__history__interface__History__Config": {
         "properties": {
           "name": {
-            "type": "string",
-            "title": "Name",
-            "default": "HistoryServer"
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Name"
           }
         },
         "type": "object",
diff --git a/package-lock.json b/package-lock.json
index f82c692..2825daf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,13 @@
 {
-  "name": "evolver-ui",
+  "name": "@jhu-software/evolver-ui",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "evolver-ui",
-      "hasInstallScript": true,
+      "name": "@jhu-software/evolver-ui",
+      "version": "1.0.0",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@conform-to/react": "^1.1.5",
         "@conform-to/zod": "^1.1.5",
@@ -18,13 +20,14 @@
         "@remix-run/node": "^2.10.2",
         "@remix-run/react": "^2.10.2",
         "@remix-run/serve": "^2.10.2",
-        "ajv": "^8.17.1",
         "clsx": "^2.1.1",
         "isbot": "^4.1.0",
         "json-edit-react": "^1.15.4",
         "njv": "^2.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-toastify": "^10.0.5",
+        "recharts": "^2.12.7",
         "remix-utils": "^7.6.0",
         "zod": "^3.23.8"
       },
@@ -702,7 +705,6 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
       "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2668,6 +2670,60 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -3298,21 +3354,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -4526,8 +4567,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/culori": {
       "version": "3.3.0",
@@ -4538,6 +4578,116 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/daisyui": {
       "version": "4.12.10",
       "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
@@ -4667,6 +4817,11 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -4897,6 +5052,15 @@
       "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
       "dev": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -5990,6 +6154,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -6112,7 +6281,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -6120,6 +6290,14 @@
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
       "dev": true
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6148,11 +6326,6 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
-    "node_modules/fast-uri": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
-      "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw=="
-    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -7077,6 +7250,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -7847,11 +8028,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -8007,8 +8183,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -9002,9 +9177,9 @@
       ]
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
@@ -9732,7 +9907,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10660,7 +10834,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -10830,8 +11003,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
@@ -10888,6 +11060,47 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10922,6 +11135,36 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.12.7",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz",
+      "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^16.10.2",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10959,8 +11202,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
@@ -11141,14 +11383,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
@@ -12361,6 +12595,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/tinybench": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.8.0.tgz",
@@ -13050,6 +13289,27 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
diff --git a/package.json b/package.json
index 15dd3dd..7c64ba6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
 {
-  "name": "evolver-ui",
-  "private": true,
+  "name": "@jhu-software/evolver-ui",
+  "version": "1.0.0",
+  "description": "reference web app implementation for the evolver, an opensource bio reactor produced by fynchbio.com",
+  "license": "BSD-3-Clause",
   "sideEffects": false,
   "type": "module",
   "scripts": {
@@ -15,8 +17,7 @@
     "coverage": "vitest run --coverage",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
-    "typecheck": "tsc",
-    "postinstall": "npm exec playwright install"
+    "typecheck": "tsc"
   },
   "dependencies": {
     "@conform-to/react": "^1.1.5",
@@ -30,13 +31,14 @@
     "@remix-run/node": "^2.10.2",
     "@remix-run/react": "^2.10.2",
     "@remix-run/serve": "^2.10.2",
-    "ajv": "^8.17.1",
     "clsx": "^2.1.1",
     "isbot": "^4.1.0",
     "json-edit-react": "^1.15.4",
     "njv": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.5",
+    "recharts": "^2.12.7",
     "remix-utils": "^7.6.0",
     "zod": "^3.23.8"
   },
@@ -85,4 +87,4 @@
       "public"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/prisma/migrations/20240715182118_init/migration.sql b/prisma/migrations/20240715182118_init/migration.sql
deleted file mode 100644
index 5ccc858..0000000
--- a/prisma/migrations/20240715182118_init/migration.sql
+++ /dev/null
@@ -1,10 +0,0 @@
--- CreateTable
-CREATE TABLE "Device" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    "ip_addr" TEXT NOT NULL
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "Device_ip_addr_key" ON "Device"("ip_addr");
diff --git a/prisma/migrations/20240826164712_init/migration.sql b/prisma/migrations/20240826164712_init/migration.sql
new file mode 100644
index 0000000..d54deb0
--- /dev/null
+++ b/prisma/migrations/20240826164712_init/migration.sql
@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "Device" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "url" TEXT NOT NULL,
+    "device_id" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Device_url_key" ON "Device"("url");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Device_device_id_key" ON "Device"("device_id");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index c77e6be..0e177b7 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -14,5 +14,6 @@ model Device {
   id        String   @id @default(uuid())
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  ip_addr   String   @unique
+  url       String   @unique
+  device_id String   @unique
 }