diff --git a/.storybook/MockRelayEnvironment.tsx b/.storybook/MockRelayEnvironment.tsx
index 4c456ee9..0af2e469 100644
--- a/.storybook/MockRelayEnvironment.tsx
+++ b/.storybook/MockRelayEnvironment.tsx
@@ -62,6 +62,8 @@ export type WithRelayParameters<TQuery extends OperationType, TResolvers = objec
      */
 };
 
+export let MockRelayEnvironment = createMockEnvironment();
+
 const AddMockRelayEnvironment = makeDecorator({
     name: "AddMockRelayEnvironment",
     parameterName: "relay",
@@ -75,15 +77,15 @@ const AddMockRelayEnvironment = makeDecorator({
             return getStory(context) as any;
         };
 
-        const environment = createMockEnvironment();
+        MockRelayEnvironment = createMockEnvironment();
 
         const resolver: OperationMockResolver = operation =>
             MockPayloadGenerator.generate(operation, mockResolvers);
-        environment.mock.queueOperationResolver(resolver);
-        environment.mock.queuePendingOperation(query, variables);
+        MockRelayEnvironment.mock.queueOperationResolver(resolver);
+        MockRelayEnvironment.mock.queuePendingOperation(query, variables);
 
         return (
-            <RelayEnvironmentProvider environment={environment}>
+            <RelayEnvironmentProvider environment={MockRelayEnvironment}>
                 <Renderer />
             </RelayEnvironmentProvider>
         );
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index acbb7ea3..a37412fe 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import { withRouter } from "storybook-addon-remix-react-router";
 
 import AddConfigDark from "./AddConfigDark";
 import AddIntlEn from "./AddIntlEn";
@@ -15,7 +16,7 @@ const preview: Preview = {
             }
         }
     },
-    decorators: [AddIntlEn, AddConfigDark, AddMockRelayEnvironment]
+    decorators: [AddIntlEn, AddConfigDark, AddMockRelayEnvironment, withRouter]
 };
 
 export default preview;
diff --git a/package.json b/package.json
index 0a912f66..79caebac 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "react-hook-form": "^7.53.0",
     "react-intl": "^6.8.0",
     "react-relay": "^18.1.0",
+    "react-router-dom": "^6.27.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^10.0.0",
@@ -70,13 +71,19 @@
     "@chromatic-com/storybook": "2.0.2",
     "@eslint/js": "^9.12.0",
     "@rollup/pluginutils": "^5.1.2",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.5",
     "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/channels": "^8.3.6",
+    "@storybook/components": "^8.3.6",
+    "@storybook/core-events": "^8.3.6",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/preview-api": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
     "@types/node": "^22.7.6",
     "@types/react": "^18",
     "@types/react-dom": "^18.3.1",
@@ -99,7 +106,8 @@
     "relay-compiler": "^18.1.0",
     "relay-test-utils": "^18.1.0",
     "rollup-plugin-jsx-remove-attributes": "^2.0.3",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
+    "storybook-addon-remix-react-router": "^3.0.1",
     "tailwindcss": "^3.4.14",
     "type-fest": "^4.26.1",
     "typescript": "^5.6.3",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index e71aec9a..d08a44a8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -10,10 +10,13 @@ import Locales from "../lib/translations/Locales";
 import Loading from "./utils/Loading/Loading";
 import icolibrary from "./utils/icolibrary";
 
-const RelayEnvironment = lazy(async () => {
-    await devDelay();
-    return await import("@/components/core/RelayEnvironment/RelayEnvironment");
-});
+const Environment = lazy(
+    async () =>
+        await devDelay(
+            () => import("@/components/core/Environment/Environment"),
+            "Component Load: Environment"
+        )
+);
 
 interface IProps {
     preferredLocales: readonly string[];
@@ -83,7 +86,7 @@ const App = (props: IProps) => {
                                     </div>
                                 </div>
                             }>
-                            <RelayEnvironment />
+                            <Environment />
                         </Suspense>
                     </IntlProvider>
                 ) : (
diff --git a/src/components/core/RelayEnvironment/RelayEnvironment.tsx b/src/components/core/Environment/Environment.tsx
similarity index 78%
rename from src/components/core/RelayEnvironment/RelayEnvironment.tsx
rename to src/components/core/Environment/Environment.tsx
index 1cd8538c..d28de670 100644
--- a/src/components/core/RelayEnvironment/RelayEnvironment.tsx
+++ b/src/components/core/Environment/Environment.tsx
@@ -1,16 +1,16 @@
-import { useContext, useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { RelayEnvironmentProvider } from "react-relay";
 
-import Layout from "../Layout/Layout";
+import Router from "../Router/Router";
 
 import Pkg from "@/../package.json";
-import ConfigContext from "@/context/config/Context";
+import useConfig from "@/context/config/useConfig";
 import ErrorsProvider from "@/context/errors/Provider";
 import SessionProvider from "@/context/session/Provider";
 import CreateRelayEnvironment from "@/lib/CreateRelayEnvironment";
 
-const RelayEnvironment = () => {
+const Environment = () => {
     const version = Pkg.version;
 
     const intl = useIntl();
@@ -19,7 +19,7 @@ const RelayEnvironment = () => {
         document.title = intl.formatMessage({ id: "title" }, { version });
     });
 
-    const config = useContext(ConfigContext);
+    const config = useConfig();
 
     const { relayEnviroment, setCredentials } = useMemo(
         () => CreateRelayEnvironment(config.ApiPath.value),
@@ -30,7 +30,7 @@ const RelayEnvironment = () => {
         <RelayEnvironmentProvider environment={relayEnviroment}>
             <SessionProvider setCredentials={credentials => setCredentials(credentials, false)}>
                 <ErrorsProvider>
-                    <Layout
+                    <Router
                         setTemporaryCredentials={credentials => setCredentials(credentials, true)}
                     />
                 </ErrorsProvider>
@@ -39,4 +39,4 @@ const RelayEnvironment = () => {
     );
 };
 
-export default RelayEnvironment;
+export default Environment;
diff --git a/src/components/core/ErrorViewer/ErrorViewer.stories.tsx b/src/components/core/ErrorViewer/ErrorViewer.stories.tsx
index 247f31a7..ecbae4dd 100644
--- a/src/components/core/ErrorViewer/ErrorViewer.stories.tsx
+++ b/src/components/core/ErrorViewer/ErrorViewer.stories.tsx
@@ -1,12 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 
 import ErrorViewer from "./ErrorViewer";
 
 import { ErrorMessageSingleFragment$data } from "@/components/graphql/__generated__/ErrorMessageSingleFragment.graphql";
-import ErrorsContext from "@/context/errors/Context";
 import ErrorsProvider from "@/context/errors/Provider";
+import useErrors from "@/context/errors/useErrors";
 import sleep from "@/lib/sleep";
 
 interface IArgs {
@@ -14,7 +14,7 @@ interface IArgs {
 }
 
 const InnerTestComponent = (props: IArgs) => {
-    const context = useContext(ErrorsContext);
+    const context = useErrors();
 
     useEffect(() => {
         context.addErrors(props.errors ?? []);
diff --git a/src/components/core/ErrorViewer/ErrorViewer.tsx b/src/components/core/ErrorViewer/ErrorViewer.tsx
index 001b810f..ae6fe0c3 100644
--- a/src/components/core/ErrorViewer/ErrorViewer.tsx
+++ b/src/components/core/ErrorViewer/ErrorViewer.tsx
@@ -1,10 +1,8 @@
-import { useContext } from "react";
-
 import ErrorCard from "@/components/utils/ErrorCard/ErrorCard";
-import ErrorsContext from "@/context/errors/Context";
+import useErrors from "@/context/errors/useErrors";
 
 const ErrorViewer = () => {
-    const context = useContext(ErrorsContext);
+    const context = useErrors();
 
     return (
         <>
diff --git a/src/components/core/Layout/Layout.tsx b/src/components/core/Layout/Layout.tsx
index 2120fb4c..f27be525 100644
--- a/src/components/core/Layout/Layout.tsx
+++ b/src/components/core/Layout/Layout.tsx
@@ -1,31 +1,32 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+
 import ErrorViewer from "../ErrorViewer/ErrorViewer";
 import Logo from "../Logo/Logo";
 import Navbar from "../Navbar/Navbar";
 import ReportIssue from "../ReportIssue/ReportIssue";
-import Router from "../Router/Router";
 
+import Loading from "@/components/utils/Loading/Loading";
 import ErrorBoundary from "@/components/utils/ErrorBoundary/ErrorBoundary";
-import { ICredentials } from "@/lib/Credentials";
 
-interface IProps {
-    setTemporaryCredentials: (credentials: ICredentials) => void;
-}
 
-const Layout = (props: IProps) => {
+const Layout = () => {
     return (
-        <ErrorBoundary>
+        <>
             <Navbar />
-            <div className="mt-20">
-                <div className="grid grid-cols-8">
-                    <div className="col-start-3 col-end-7">
+            <div className="mt-20 grid grid-cols-8">
+                <div className="lg:col-start-2 lg:col-end-8">
+                    <ErrorBoundary>
                         <ErrorViewer />
-                    </div>
+                        <Suspense fallback={<Loading />}>
+                            <Outlet />
+                        </Suspense>
+                    </ErrorBoundary>
                 </div>
-                <Router setTemporaryCredentials={props.setTemporaryCredentials} />
             </div>
             <ReportIssue />
             <Logo />
-        </ErrorBoundary>
+        </>
     );
 };
 
diff --git a/src/components/core/Navbar/Navbar.tsx b/src/components/core/Navbar/Navbar.tsx
index e0d0b453..6fdefc15 100644
--- a/src/components/core/Navbar/Navbar.tsx
+++ b/src/components/core/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@
 
 import { Menu, X } from "lucide-react";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
@@ -9,31 +10,26 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 const Navbar = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-    const navItems = [
-        { name: "Home", href: "/" },
-        { name: "About", href: "/about" },
-        { name: "Services", href: "/services" },
-        { name: "Contact", href: "/contact" }
-    ];
+    const navItems = [{ name: "Configuration", href: "/config" }];
 
     return (
         <nav className="fixed top-0 left-0 right-0 z-50 bg-primary shadow-md">
             <div className="container mx-1 px-4 sm:px-6 bg-primary shadow-md">
                 <div className="flex items-center justify-between h-16">
                     <div className="flex items-center">
-                        <a href="/" className="text-xl font-bold text-white">
+                        <Link to="/" className="text-xl font-bold text-white">
                             tgstation-server
-                        </a>
+                        </Link>
                     </div>
                     <div className="hidden md:block">
                         <div className="ml-10 flex items-baseline space-x-4">
                             {navItems.map(item => (
-                                <a
+                                <Link
                                     key={item.name}
-                                    href={item.href}
+                                    to={item.href}
                                     className="text-white hover:bg-primary hover:text-primary-foreground px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                                     {item.name}
-                                </a>
+                                </Link>
                             ))}
                         </div>
                     </div>
@@ -57,13 +53,13 @@ const Navbar = () => {
                                 className="w-[240px] sm:w-[300px] bg-primary">
                                 <nav className="flex flex-col space-y-4 mt-6">
                                     {navItems.map(item => (
-                                        <a
+                                        <Link
                                             key={item.name}
-                                            href={item.href}
+                                            to={item.href}
                                             className="text-white hover:bg-primary hover:text-primary-foreground px-3 py-2 rounded-md text-base font-medium transition-colors duration-200"
                                             onClick={() => setIsMobileMenuOpen(false)}>
                                             {item.name}
-                                        </a>
+                                        </Link>
                                     ))}
                                 </nav>
                             </SheetContent>
diff --git a/src/components/core/NotFound/NotFound.stories.tsx b/src/components/core/NotFound/NotFound.stories.tsx
new file mode 100644
index 00000000..982f9d91
--- /dev/null
+++ b/src/components/core/NotFound/NotFound.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import NotFound from "./NotFound";
+const config: Meta<typeof NotFound> = {
+    component: NotFound,
+    title: "Core/Not Found"
+};
+
+export default config;
+
+type Story = StoryObj<typeof config>;
+
+export const Default: Story = {};
diff --git a/src/components/core/NotFound/NotFound.tsx b/src/components/core/NotFound/NotFound.tsx
new file mode 100644
index 00000000..6d1fee1b
--- /dev/null
+++ b/src/components/core/NotFound/NotFound.tsx
@@ -0,0 +1,28 @@
+import { FormattedMessage } from "react-intl";
+
+import Pkg from "@/../package.json";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+const NotFound = () => (
+    <Card className="bg-transparent text-transparent-foreground mb-4">
+        <CardHeader>
+            <CardTitle>
+                <FormattedMessage id="error.somethingwentwrong" />
+            </CardTitle>
+            <CardDescription>
+                <FormattedMessage id="error.notfound" />
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div className="bg-transparent text-danger">
+                <code className="block whitespace-pre-wrap" data-chromatic="ignore">
+                    {`Webpanel Version: ${Pkg.version}\nWebpanel Mode: ${
+                        import.meta.env.VITE_DEV_MODE ? "DEV" : "PROD"
+                    }\nCurrent route: ${window.location.toString()}`}
+                </code>
+            </div>
+        </CardContent>
+    </Card>
+);
+
+export default NotFound;
diff --git a/src/components/core/Router/ProtectedRoute/ProtectedRoute.tsx b/src/components/core/Router/ProtectedRoute/ProtectedRoute.tsx
new file mode 100644
index 00000000..097d9ade
--- /dev/null
+++ b/src/components/core/Router/ProtectedRoute/ProtectedRoute.tsx
@@ -0,0 +1,17 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+import ILocationState from "@/components/routed/Login/LocationState";
+import useSession from "@/context/session/useSession";
+
+const ProtectedRoute = () => {
+    const session = useSession();
+    const location = useLocation();
+    if (session.currentSession == null) {
+        const state: ILocationState = { from: location };
+        return <Navigate to="/login" state={state} />;
+    }
+
+    return <Outlet />;
+};
+
+export default ProtectedRoute;
diff --git a/src/components/core/Router/RethrowRouteError/RethrowRouteError.tsx b/src/components/core/Router/RethrowRouteError/RethrowRouteError.tsx
new file mode 100644
index 00000000..2a3ef0d7
--- /dev/null
+++ b/src/components/core/Router/RethrowRouteError/RethrowRouteError.tsx
@@ -0,0 +1,8 @@
+import { useRouteError } from "react-router-dom";
+
+const RethrowRouteError = () => {
+    const error = useRouteError();
+    throw error;
+};
+
+export default RethrowRouteError;
diff --git a/src/components/core/Router/Router.tsx b/src/components/core/Router/Router.tsx
index c2e3410f..d605930b 100644
--- a/src/components/core/Router/Router.tsx
+++ b/src/components/core/Router/Router.tsx
@@ -1,21 +1,85 @@
-import { useContext } from "react";
+import { lazy, Suspense } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import Login from "@/components/routed/Login/Login";
-import SessionContext from "@/context/session/Context";
+import ProtectedRoute from "./ProtectedRoute/ProtectedRoute";
+import RethrowRouteError from "./RethrowRouteError/RethrowRouteError";
+
+import devDelay from "@/lib/devDelay";
 import { ICredentials } from "@/lib/Credentials";
+import Loading from "@/components/utils/Loading/Loading";
+
+const Configuration = lazy(
+    async () =>
+        await devDelay(
+            () => import("@/components/routed/Configuration/Configuration"),
+            "Component Load: Configuration"
+        )
+);
+
+const Home = lazy(
+    async () =>
+        await devDelay(() => import("@/components/routed/Home/Home"), "Component Load: Home")
+);
+
+const Layout = lazy(
+    async () =>
+        await devDelay(() => import("@/components/core/Layout/Layout"), "Component Load: Layout")
+);
+
+const Login = lazy(
+    async () =>
+        await devDelay(() => import("@/components/routed/Login/Login"), "Component Load: Login")
+);
+
+const NotFound = lazy(
+    async () =>
+        await devDelay(
+            () => import("@/components/core/NotFound/NotFound"),
+            "Component Load: NotFound"
+        )
+);
 
 interface IProps {
     setTemporaryCredentials: (credentials: ICredentials) => void;
 }
 
 const Router = (props: IProps) => {
-    const session = useContext(SessionContext);
-
-    if (!session.currentSession) {
-        return <Login setTemporaryCredentials={props.setTemporaryCredentials} />;
-    }
+    const router = createBrowserRouter([
+        {
+            path: "/",
+            element: <Layout />,
+            errorElement: <RethrowRouteError />,
+            children: [
+                {
+                    path: "config",
+                    element: <Configuration />
+                },
+                {
+                    path: "login",
+                    element: <Login setTemporaryCredentials={props.setTemporaryCredentials} />
+                },
+                {
+                    element: <ProtectedRoute />,
+                    children: [
+                        {
+                            path: "",
+                            element: <Home />
+                        },
+                        {
+                            path: "*",
+                            element: <NotFound />
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
 
-    return <></>;
+    return (
+        <Suspense fallback={<Loading />}>
+            <RouterProvider router={router}></RouterProvider>
+        </Suspense>
+    );
 };
 
 export default Router;
diff --git a/src/components/routed/Configuration/Configuration.stories.tsx b/src/components/routed/Configuration/Configuration.stories.tsx
new file mode 100644
index 00000000..3e5c51d7
--- /dev/null
+++ b/src/components/routed/Configuration/Configuration.stories.tsx
@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/react";
+
+import Configuration from "./Configuration";
+
+const config: Meta<typeof Configuration> = {
+    component: Configuration,
+    title: "Routed/Configuration"
+};
+
+export default config;
+
+export const Default = () => <Configuration />;
diff --git a/src/components/routed/Configuration/List/List.tsx b/src/components/routed/Configuration/Configuration.tsx
similarity index 55%
rename from src/components/routed/Configuration/List/List.tsx
rename to src/components/routed/Configuration/Configuration.tsx
index 451a72f4..a2eff459 100644
--- a/src/components/routed/Configuration/List/List.tsx
+++ b/src/components/routed/Configuration/Configuration.tsx
@@ -1,18 +1,17 @@
-import { useContext } from "react";
 import { FormattedMessage } from "react-intl";
 
-import Item from "../Item/Item";
+import Item from "./Item/Item";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import EnumDropdown from "@/components/utils/EnumDropdown/EnumDropdown";
-import ConfigContext from "@/context/config/Context";
 import { JobsWidgetOptions } from "@/context/config/CreateConfig";
 import Theme from "@/context/config/Theme";
+import useConfig from "@/context/config/useConfig";
 
 const List = () => {
-    const config = useContext(ConfigContext);
+    const config = useConfig();
 
     const saveCallbacks: (() => void)[] = [];
 
@@ -24,35 +23,60 @@ const List = () => {
                 <Item
                     configItem={config.Theme}
                     input={(currentValue, setValue) => (
-                        <EnumDropdown enum={Theme} value={currentValue} onChange={setValue} />
+                        <EnumDropdown
+                            enum={Theme}
+                            value={currentValue}
+                            onChange={setValue}
+                            noIntl
+                        />
                     )}
                     onSave={onSave}
                 />
                 <Item
                     configItem={config.ApiPath}
-                    input={currentValue => <Input value={currentValue} />}
+                    input={(currentValue, setValue) => (
+                        <Input
+                            value={currentValue}
+                            onChange={event => setValue(event.target.value)}
+                        />
+                    )}
                     onSave={onSave}
                 />
                 <Item
                     configItem={config.GitHubToken}
-                    input={currentValue => <Input type="password" value={currentValue} />}
+                    input={(currentValue, setValue) => (
+                        <Input
+                            type="password"
+                            value={currentValue}
+                            onChange={event => setValue(event.target.value)}
+                        />
+                    )}
                     onSave={onSave}
                 />
                 <Item
                     configItem={config.JobsWidgetDisplay}
-                    input={currentValue => (
-                        <EnumDropdown enum={JobsWidgetOptions} value={currentValue} />
+                    input={(currentValue, setValue) => (
+                        <EnumDropdown
+                            enum={JobsWidgetOptions}
+                            value={currentValue}
+                            noIntl
+                            onChange={setValue}
+                        />
                     )}
                     onSave={onSave}
                 />
                 <Item
                     configItem={config.ManualPR}
-                    input={currentValue => <Switch checked={currentValue} />}
+                    input={(currentValue, setValue) => (
+                        <Switch checked={currentValue} onCheckedChange={setValue} />
+                    )}
                     onSave={onSave}
                 />
                 <Item
                     configItem={config.ShowJson}
-                    input={currentValue => <Switch checked={currentValue} />}
+                    input={(currentValue, setValue) => (
+                        <Switch checked={currentValue} onCheckedChange={setValue} />
+                    )}
                     onSave={onSave}
                 />
             </div>
diff --git a/src/components/routed/Configuration/List/List.stories.tsx b/src/components/routed/Configuration/List/List.stories.tsx
deleted file mode 100644
index 67fe3685..00000000
--- a/src/components/routed/Configuration/List/List.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Meta } from "@storybook/react";
-
-import List from "./List";
-
-const config: Meta<typeof List> = {
-    component: List,
-    title: "Routed/Configuration/List"
-};
-
-export default config;
-
-export const Default = () => <List />;
diff --git a/src/components/routed/Home/Home.tsx b/src/components/routed/Home/Home.tsx
new file mode 100644
index 00000000..ab2bedb3
--- /dev/null
+++ b/src/components/routed/Home/Home.tsx
@@ -0,0 +1,5 @@
+const Home = () => {
+    return <></>;
+};
+
+export default Home;
diff --git a/src/components/routed/Login/LocationState.ts b/src/components/routed/Login/LocationState.ts
new file mode 100644
index 00000000..22411292
--- /dev/null
+++ b/src/components/routed/Login/LocationState.ts
@@ -0,0 +1,5 @@
+import { Location } from "react-router-dom";
+
+export default interface ILocationState {
+    from?: Location;
+}
diff --git a/src/components/routed/Login/Login.stories.tsx b/src/components/routed/Login/Login.stories.tsx
index 87da3f77..f65fe6ff 100644
--- a/src/components/routed/Login/Login.stories.tsx
+++ b/src/components/routed/Login/Login.stories.tsx
@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { useEffect } from "react";
+import { MockPayloadGenerator } from "relay-test-utils";
 
 import Login from "./Login";
 import GetOAuthProviders from "./OAuthOptions/graphql/GetOAuthProviders";
@@ -8,8 +10,13 @@ import {
     GetOAuthProvidersQuery$data
 } from "./OAuthOptions/graphql/__generated__/GetOAuthProvidersQuery.graphql";
 
-import { WithRelayParameters } from "@/../.storybook/MockRelayEnvironment";
+import { MockRelayEnvironment, WithRelayParameters } from "@/../.storybook/MockRelayEnvironment";
+import ErrorsProvider from "@/context/errors/Provider";
+import useErrors from "@/context/errors/useErrors";
+import SessionProvider from "@/context/session/Provider";
+import useSession from "@/context/session/useSession";
 import { ICredentials } from "@/lib/Credentials";
+import sleep from "@/lib/sleep";
 
 let mockData: GetOAuthProvidersQuery$data;
 
@@ -67,19 +74,55 @@ setMockData();
 interface IExtraArgs {
     oAuthProviders: string[];
     setTemporaryCredentials: (credentials: ICredentials) => void;
+    onSessionCreated: () => void;
+    hasErrors: () => void;
 }
 
-const TestComponent = (args: IExtraArgs) => {
+const InnerTestComponent = (args: IExtraArgs) => {
     oAuthProviders = args.oAuthProviders ?? [];
     setMockData();
+
+    const session = useSession();
+    useEffect(() => {
+        if (session.currentSession) {
+            args.onSessionCreated();
+        }
+    }, [args, session]);
+
+    const errors = useErrors();
+    useEffect(() => {
+        if (errors.errors.length > 0) {
+            args.hasErrors();
+        }
+    }, [args, errors]);
+
     return <Login {...args} />;
 };
 
+const TestComponent = (args: IExtraArgs) => {
+    return (
+        <ErrorsProvider>
+            <SessionProvider setCredentials={() => {}}>
+                <InnerTestComponent {...args} />
+            </SessionProvider>
+        </ErrorsProvider>
+    );
+};
+
+const relay: WithRelayParameters<GetOAuthProvidersQuery> = {
+    query: GetOAuthProviders,
+    mockResolvers: {
+        Query: () => mockData
+    }
+};
+
 const config: Meta<typeof TestComponent> = {
     component: TestComponent,
     title: "Routed/Login",
     args: {
-        setTemporaryCredentials: fn()
+        setTemporaryCredentials: fn(),
+        onSessionCreated: fn(),
+        hasErrors: fn()
     },
     argTypes: {
         oAuthProviders: {
@@ -89,6 +132,10 @@ const config: Meta<typeof TestComponent> = {
             },
             name: "OAuth Providers"
         }
+    },
+    parameters: {
+        query: GetOAuthProviders,
+        relay
     }
 };
 
@@ -96,16 +143,94 @@ export default config;
 
 type Story = StoryObj<typeof config>;
 
-const relay: WithRelayParameters<GetOAuthProvidersQuery> = {
-    query: GetOAuthProviders,
-    mockResolvers: {
-        Query: () => mockData
+export const Default: Story = {};
+export const SuccessfulLoginTest: Story = {
+    play: async ({ args, canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await sleep(1000);
+        const usernameField = canvas.getByTestId("login-username");
+        const passwordField = canvas.getByTestId("login-password");
+        const submitButton = canvas.getByTestId("login-submit");
+
+        await step("Fake login", async () => {
+            expect(args.setTemporaryCredentials).not.toBeCalled();
+            expect(args.onSessionCreated).not.toBeCalled();
+            expect(args.hasErrors).not.toBeCalled();
+            await userEvent.type(usernameField, "test username");
+            await userEvent.type(passwordField, "some password");
+            await userEvent.click(submitButton);
+            await waitFor(() => {
+                const usernameField = canvas.queryByTestId("login-username");
+                expect(usernameField).toBeNull();
+                expect(args.setTemporaryCredentials).toBeCalled();
+            });
+
+            MockRelayEnvironment.mock.resolveMostRecentOperation(operation => {
+                const payload = MockPayloadGenerator.generate(operation, {
+                    LoginPayload: () => ({
+                        errors: [],
+                        loginResult: {
+                            bearer: "new_bearer",
+                            user: {
+                                id: "current_user_id",
+                                name: "current_user_name"
+                            }
+                        },
+                        query: {}
+                    })
+                });
+
+                return payload;
+            });
+            await waitFor(() => {
+                expect(args.onSessionCreated).toBeCalled();
+                expect(args.hasErrors).not.toBeCalled();
+            });
+        });
     }
 };
 
-export const Default: Story = {
-    parameters: {
-        query: GetOAuthProviders,
-        relay
+export const UnauthenticatedLoginTest: Story = {
+    play: async ({ args, canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await sleep(1000);
+        const usernameField = canvas.getByTestId("login-username");
+        const passwordField = canvas.getByTestId("login-password");
+        const submitButton = canvas.getByTestId("login-submit");
+
+        await step("Fake login", async () => {
+            expect(args.setTemporaryCredentials).not.toBeCalled();
+            expect(args.onSessionCreated).not.toBeCalled();
+            await userEvent.type(usernameField, "test username");
+            await userEvent.type(passwordField, "some password");
+            await userEvent.click(submitButton);
+            await waitFor(() => {
+                const usernameField = canvas.queryByTestId("login-username");
+                expect(usernameField).toBeNull();
+                expect(args.setTemporaryCredentials).toBeCalled();
+            });
+
+            MockRelayEnvironment.mock.resolveMostRecentOperation(operation => {
+                const payload = MockPayloadGenerator.generate(operation, {
+                    LoginPayload: () => ({
+                        errors: [
+                            {
+                                message: "Unauthenticated"
+                            }
+                        ],
+                        loginResult: null,
+                        query: {}
+                    })
+                });
+
+                return payload;
+            });
+            await waitFor(() => {
+                expect(args.onSessionCreated).not.toBeCalled();
+                expect(args.hasErrors).toBeCalled();
+            });
+        });
     }
 };
diff --git a/src/components/routed/Login/Login.tsx b/src/components/routed/Login/Login.tsx
index e7752996..de82638e 100644
--- a/src/components/routed/Login/Login.tsx
+++ b/src/components/routed/Login/Login.tsx
@@ -1,16 +1,18 @@
-import { Suspense, useCallback, useContext, useEffect } from "react";
+import { Suspense, useCallback, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { useMutation } from "react-relay";
+import { Location, Navigate, useLocation } from "react-router-dom";
 
 import { ServerLoginMutation } from "./graphql/__generated__/ServerLoginMutation.graphql";
 import ServerLogin from "./graphql/ServerLogin";
 import OAuthOptions from "./OAuthOptions/OAuthOptions";
 import PasswordForm from "./PasswordForm/PasswordForm";
+import ILocationState from "./LocationState";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Loading from "@/components/utils/Loading/Loading";
 import useMutationErrors from "@/context/errors/useMutationErrors";
-import SessionContext from "@/context/session/Context";
+import useSession from "@/context/session/useSession";
 import { ICredentials, UserPasswordCredentials } from "@/lib/Credentials";
 
 interface IProps {
@@ -23,13 +25,14 @@ const DefaultCredentials = new UserPasswordCredentials(
 );
 
 const Login = (props: IProps) => {
+    const session = useSession();
+    const location = useLocation() as Location<ILocationState>;
+
     const [commitLogin, isLoginInFlight] = useMutation<ServerLoginMutation>(ServerLogin);
     const [requestErrorHandler, payloadErrorsHandler] = useMutationErrors();
 
     const showCard = !isLoginInFlight;
 
-    const session = useContext(SessionContext);
-
     const AttemptLogin = useCallback(
         (credentials: ICredentials) => {
             props.setTemporaryCredentials(credentials);
@@ -96,6 +99,11 @@ const Login = (props: IProps) => {
         </Card>
     );
 
+    // Can happen if we login with no history
+    if (session.currentSession) {
+        return <Navigate to={location.state?.from ?? "/home"} replace />;
+    }
+
     const AttemptingLoginSpinner = () => (
         <div className="lg:col-start-3 lg:col-end-9 md:col-start-2 md:col-end-8">
             <Loading message="loading.login" />
diff --git a/src/components/ui/form-declarations.ts b/src/components/ui/form-declarations.ts
new file mode 100644
index 00000000..4001b7c3
--- /dev/null
+++ b/src/components/ui/form-declarations.ts
@@ -0,0 +1,44 @@
+import React from "react";
+import { FieldPath, FieldValues, useFormContext } from "react-hook-form";
+
+type FormItemContextValue = {
+    id: string;
+};
+
+export const FormItemContext = React.createContext<FormItemContextValue>(
+    {} as FormItemContextValue
+);
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+    name: TName;
+};
+
+export const FormFieldContext = React.createContext<FormFieldContextValue>(
+    {} as FormFieldContextValue
+);
+
+export const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = useFormContext();
+
+    const fieldState = getFieldState(fieldContext.name, formState);
+
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+
+    const { id } = itemContext;
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState
+    };
+};
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 29c469f3..69c939e7 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,29 +1,15 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-import {
-    Controller,
-    ControllerProps,
-    FieldPath,
-    FieldValues,
-    FormProvider,
-    useFormContext
-} from "react-hook-form";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider } from "react-hook-form";
+
+import { FormFieldContext, FormItemContext, useFormField } from "./form-declarations";
 
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/shadcn/utils";
 
 const Form = FormProvider;
 
-type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-    name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
 const FormField = <
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -37,35 +23,6 @@ const FormField = <
     );
 };
 
-const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-
-    const fieldState = getFieldState(fieldContext.name, formState);
-
-    if (!fieldContext) {
-        throw new Error("useFormField should be used within <FormField>");
-    }
-
-    const { id } = itemContext;
-
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState
-    };
-};
-
-type FormItemContextValue = {
-    id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
 const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => {
         const id = React.useId();
@@ -156,13 +113,4 @@ const FormMessage = React.forwardRef<
 });
 FormMessage.displayName = "FormMessage";
 
-export {
-    Form,
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    useFormField
-};
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };
diff --git a/src/components/utils/Loading/Loading.tsx b/src/components/utils/Loading/Loading.tsx
index df43a15e..f0f9077d 100644
--- a/src/components/utils/Loading/Loading.tsx
+++ b/src/components/utils/Loading/Loading.tsx
@@ -9,7 +9,7 @@ interface IProps {
 const Loading = function (props: IProps) {
     return (
         <div className="flex flex-col items-center justify-center space-y-2">
-            <Loader2 className="w-3/4 h-3/4 animate-spin text-primary" />
+            <Loader2 className="w-3/5 h-3/5 animate-spin text-primary" />
             {props.message ? (
                 <p className="font-medium text-muted-foreground">
                     {props.noIntl ? props.message : <FormattedMessage id={props.message} />}
diff --git a/src/context/config/Context.ts b/src/context/config/ConfigContext.ts
similarity index 100%
rename from src/context/config/Context.ts
rename to src/context/config/ConfigContext.ts
diff --git a/src/context/config/Provider.tsx b/src/context/config/Provider.tsx
index 223ba286..55e0610c 100644
--- a/src/context/config/Provider.tsx
+++ b/src/context/config/Provider.tsx
@@ -1,5 +1,5 @@
+import ConfigContext from "./ConfigContext";
 import CreateConfig from "./CreateConfig";
-import ConfigContext from "./Context";
 
 interface IProps {
     children: React.ReactNode;
@@ -8,11 +8,7 @@ interface IProps {
 
 const ConfigProvider = (props: IProps) => {
     const config = CreateConfig(false, props.darkOverride);
-    return (
-        <ConfigContext.Provider value={config}>
-            {props.children}
-        </ConfigContext.Provider>
-    );
+    return <ConfigContext.Provider value={config}>{props.children}</ConfigContext.Provider>;
 };
 
 export default ConfigProvider;
diff --git a/src/context/config/useConfig.ts b/src/context/config/useConfig.ts
new file mode 100644
index 00000000..7da6cf76
--- /dev/null
+++ b/src/context/config/useConfig.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+
+import ConfigContext from "./ConfigContext";
+
+const useConfig = () => useContext(ConfigContext);
+export default useConfig;
diff --git a/src/context/errors/Context.ts b/src/context/errors/ErrorsContext.ts
similarity index 100%
rename from src/context/errors/Context.ts
rename to src/context/errors/ErrorsContext.ts
diff --git a/src/context/errors/Provider.tsx b/src/context/errors/Provider.tsx
index 4a024caf..cb79d05b 100644
--- a/src/context/errors/Provider.tsx
+++ b/src/context/errors/Provider.tsx
@@ -1,8 +1,10 @@
 import { ReactNode, useState } from "react";
 import { v4 } from "uuid";
 
-import ErrorsContext, { IErrorsContext } from "./Context";
 import IErrorRecord from "./ErrorRecord";
+import ErrorsContext, { IErrorsContext } from "./ErrorsContext";
+
+import ErrorBoundary from "@/components/utils/ErrorBoundary/ErrorBoundary";
 
 interface IProps {
     children: ReactNode;
@@ -43,7 +45,11 @@ const ErrorsProvider = (props: IProps) => {
         }
     };
 
-    return <ErrorsContext.Provider value={errorsContext}>{props.children}</ErrorsContext.Provider>;
+    return (
+        <ErrorsContext.Provider value={errorsContext}>
+            <ErrorBoundary>{props.children}</ErrorBoundary>
+        </ErrorsContext.Provider>
+    );
 };
 
 export default ErrorsProvider;
diff --git a/src/context/errors/useErrors.ts b/src/context/errors/useErrors.ts
new file mode 100644
index 00000000..34f155f8
--- /dev/null
+++ b/src/context/errors/useErrors.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+
+import ErrorsContext from "./ErrorsContext";
+
+const useErrors = () => useContext(ErrorsContext);
+export default useErrors;
diff --git a/src/context/errors/useMutationErrors.ts b/src/context/errors/useMutationErrors.ts
index 926b586f..e37720e7 100644
--- a/src/context/errors/useMutationErrors.ts
+++ b/src/context/errors/useMutationErrors.ts
@@ -1,16 +1,17 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useFragment } from "react-relay";
 
-import ErrorsContext from "./Context";
+import useErrors from "./useErrors";
 
 import { ErrorMessageArrayFragment$key } from "@/components/graphql/__generated__/ErrorMessageArrayFragment.graphql";
 import ErrorMessageArray from "@/components/graphql/ErrorMessageArray";
 
+
 const useMutationErrors = (): [
     (error: Error) => void,
     (errors?: ErrorMessageArrayFragment$key | null) => void
 ] => {
-    const errors = useContext(ErrorsContext);
+    const errors = useErrors();
 
     const requestErrorHandler = (error: Error) => {
         errors.addErrors([error]);
diff --git a/src/context/session/Provider.tsx b/src/context/session/Provider.tsx
index 1ed82b10..ee2efdf0 100644
--- a/src/context/session/Provider.tsx
+++ b/src/context/session/Provider.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useState } from "react";
 
-import SessionContext from "./Context";
 import ISession from "./Session";
+import SessionContext from "./SessionContext";
 
 import { BearerCredentials, ICredentials } from "@/lib/Credentials";
 
diff --git a/src/context/session/Context.ts b/src/context/session/SessionContext.ts
similarity index 100%
rename from src/context/session/Context.ts
rename to src/context/session/SessionContext.ts
diff --git a/src/context/session/useSession.ts b/src/context/session/useSession.ts
new file mode 100644
index 00000000..70efe622
--- /dev/null
+++ b/src/context/session/useSession.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+
+import SessionContext from "./SessionContext";
+
+const useSession = () => useContext(SessionContext);
+export default useSession;
diff --git a/src/lib/CreateRelayEnvironment.ts b/src/lib/CreateRelayEnvironment.ts
index af65a6dc..0d1d0995 100644
--- a/src/lib/CreateRelayEnvironment.ts
+++ b/src/lib/CreateRelayEnvironment.ts
@@ -17,9 +17,11 @@ import {
 } from "relay-runtime/lib/network/RelayNetworkTypes";
 
 import { ICredentials, OAuthCredentials } from "./Credentials";
+import devDelay from "./devDelay";
 
 import Pkg from "@/../package.json";
 
+
 const CreateRelayEnvironment = (
     serverUrl: string
 ): {
@@ -58,24 +60,18 @@ const CreateRelayEnvironment = (
             }
         }
 
-        const resp = await fetch(graphQLEndpoint, {
-            method: "POST",
-            headers: requestHeaders,
-            body: JSON.stringify({
-                query: request.text, // <-- The GraphQL document composed by Relay
-                variables
-            })
-        });
-
-        const result = await resp.json();
-
-        if (import.meta.env.VITE_DEV_DELAY_SECONDS) {
-            await new Promise<void>(resolve => {
-                setTimeout(() => resolve(), import.meta.env.VITE_DEV_DELAY_SECONDS * 1000);
+        return await devDelay(async () => {
+            const resp = await fetch(graphQLEndpoint, {
+                method: "POST",
+                headers: requestHeaders,
+                body: JSON.stringify({
+                    query: request.text, // <-- The GraphQL document composed by Relay
+                    variables
+                })
             });
-        }
 
-        return result;
+            return await resp.json();
+        }, "Relay Request");
     };
 
     // We only want to setup subscriptions if we are on the client.
diff --git a/src/lib/devDelay.ts b/src/lib/devDelay.ts
index 5a236989..dac9a5e7 100644
--- a/src/lib/devDelay.ts
+++ b/src/lib/devDelay.ts
@@ -1,8 +1,11 @@
 import sleep from "./sleep";
 
-const devDelay = async () => {
+const devDelay = async <T>(func: () => Promise<T>, name: string): Promise<T> => {
     if (import.meta.env.VITE_DEV_MODE) {
-        await sleep(import.meta.env.VITE_DEV_DELAY_SECONDS);
+        console.log(`Dev Delay: ${name}`);
+        await sleep(import.meta.env.VITE_DEV_DELAY_SECONDS * 1000);
     }
+
+    return await func();
 };
 export default devDelay;
diff --git a/src/main.tsx b/src/main.tsx
index 2a45cd99..da2dd5df 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,6 +4,10 @@ import App from "./components/App.tsx";
 import "./index.css";
 import TranslationFactory from "./lib/translations/TranslationFactory.ts";
 
+if (import.meta.env.DEV) {
+    console.log(`Using dev delay: ${import.meta.env.VITE_DEV_DELAY_SECONDS}s`);
+}
+
 // At some point, the webpanel had the ability to save passwords, this is however,
 // insecure as compromised webhosts can lead to code being served from an untrusted source,
 // leaking the saved password. Makes sure it's not there anymore
@@ -15,7 +19,7 @@ try {
 } catch {
     (() => {})();
 }
-console.log("here1");
+
 function mountApp() {
     const root = createRoot(document.getElementById("root")!);
     root.render(
diff --git a/vite.config.ts b/vite.config.ts
index 320912dd..91ac5343 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig(({ mode }) => {
     const testAttributeRemoverPlugin =
         // keep this one last, the storybook config pops it off
         removeTestIdAttribute({
-            attributes: ["data-testid"], // remove test attributes from jsx
+            attributes: ["data-testid", "data-chromatic"], // remove test attributes from jsx
             usage: "vite"
         });
     if (process.env.VITE_DEV_MODE !== "false") {
diff --git a/yarn.lock b/yarn.lock
index 5dd38dcc..f70e022e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1871,6 +1871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remix-run/router@npm:1.20.0":
+  version: 1.20.0
+  resolution: "@remix-run/router@npm:1.20.0"
+  checksum: 10c0/2e017dea530717a6e93a16d478714c4c9165313a1c48e39172ec609bc20324ca6362e8ee2243602df6343644c9268d82a3f50f154d3bb8a17dddde6c37be6e83
+  languageName: node
+  linkType: hard
+
 "@rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.1.2":
   version: 5.1.2
   resolution: "@rollup/pluginutils@npm:5.1.2"
@@ -2006,9 +2013,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-actions@npm:8.3.5"
+"@storybook/addon-actions@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-actions@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@types/uuid": "npm:^9.0.1"
@@ -2016,47 +2023,47 @@ __metadata:
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/c9872d9d41b33ae26be36dfb25ccb10e7c832d4677cffe4f3e8a42f2748d8c54e681810662b88e10d1e72223096ad1861e389ee7134974e9f3e2869958300e08
+    storybook: ^8.3.6
+  checksum: 10c0/77959b8f0b3e4748051411bb0cd8041cff68360aa3dc98745153bbfd48aa330f2228ac9b9a42c1f3fd40c003bab5b425ed2b1ff540a985d3a00869989e547b8e
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-backgrounds@npm:8.3.5"
+"@storybook/addon-backgrounds@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-backgrounds@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/6a2ce804bd96827a0601b53ea1f15bec382e1099cf957a0ac3c9452da1a58702fb5cea4b76c564a78a3a4f66431eaf3d826ad400d3bd579fec94ec266f06e211
+    storybook: ^8.3.6
+  checksum: 10c0/7d05c94ce351d162a5f55378a7779ce26e84dadbe540c5d68abd470501e097e7b006434fbb057b9d86c19e595254187d2f9f5e9ee847190ae29bcc2e46fa55a1
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-controls@npm:8.3.5"
+"@storybook/addon-controls@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-controls@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/f0bf85a8f401649734ae63ece9b64fe77b10a290cd1e83f54d83da4ae58f5a3a9e3876497f8cb3e9ac12dd1814fe7d16cee88bd6985877422823965b20607385
+    storybook: ^8.3.6
+  checksum: 10c0/d7222232caaee1f3e914c08987891b511b79127635cc352a20dd529c4518573844847f7b5da91f62ce27c6809e9303c95878db6f1dea4b8d88769cbff64fbce4
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-docs@npm:8.3.5"
+"@storybook/addon-docs@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-docs@npm:8.3.6"
   dependencies:
     "@mdx-js/react": "npm:^3.0.0"
-    "@storybook/blocks": "npm:8.3.5"
-    "@storybook/csf-plugin": "npm:8.3.5"
+    "@storybook/blocks": "npm:8.3.6"
+    "@storybook/csf-plugin": "npm:8.3.6"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/react-dom-shim": "npm:8.3.5"
+    "@storybook/react-dom-shim": "npm:8.3.6"
     "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
     fs-extra: "npm:^11.1.0"
     react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -2065,54 +2072,54 @@ __metadata:
     rehype-slug: "npm:^6.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/51f277079397ecc0e5fef721307a618e3aa4727069dba2b331cb4de2e6e318f4de338132e1ea886c0e9ee0824a10cbc9a0887e0f09f341221a31a09111ce4836
+    storybook: ^8.3.6
+  checksum: 10c0/c2d03904b6e465add7b3a56ed3ee965c098ea7252d0fe431cc581b7774fe99803a4891062b064033578f78c7ab77465e2179cfb66f4333a4d5edcd01af62c421
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-essentials@npm:8.3.5"
-  dependencies:
-    "@storybook/addon-actions": "npm:8.3.5"
-    "@storybook/addon-backgrounds": "npm:8.3.5"
-    "@storybook/addon-controls": "npm:8.3.5"
-    "@storybook/addon-docs": "npm:8.3.5"
-    "@storybook/addon-highlight": "npm:8.3.5"
-    "@storybook/addon-measure": "npm:8.3.5"
-    "@storybook/addon-outline": "npm:8.3.5"
-    "@storybook/addon-toolbars": "npm:8.3.5"
-    "@storybook/addon-viewport": "npm:8.3.5"
+"@storybook/addon-essentials@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-essentials@npm:8.3.6"
+  dependencies:
+    "@storybook/addon-actions": "npm:8.3.6"
+    "@storybook/addon-backgrounds": "npm:8.3.6"
+    "@storybook/addon-controls": "npm:8.3.6"
+    "@storybook/addon-docs": "npm:8.3.6"
+    "@storybook/addon-highlight": "npm:8.3.6"
+    "@storybook/addon-measure": "npm:8.3.6"
+    "@storybook/addon-outline": "npm:8.3.6"
+    "@storybook/addon-toolbars": "npm:8.3.6"
+    "@storybook/addon-viewport": "npm:8.3.6"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/dad5ec31342abafe93eefa10178278f2f3cb8f849824050cf9248ff976188fda9bdc167750a57c57f0f821a56dd46daef92e70816a62b3cba435484f263fb703
+    storybook: ^8.3.6
+  checksum: 10c0/5f0a53ee42792fb76afdc54485fa907981363138786306dbcf2dea990b5809843a60da1148cd60141844951f462ec021c06befa0b98fea796abead95ca54716b
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-highlight@npm:8.3.5"
+"@storybook/addon-highlight@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-highlight@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/9bd4d29d10d612aa6baf2a3c470fd571f32edd4d456e3c4eb0dfe416be7891b075f06a7f46da35274c58261db8be5e97d974edec3c11b477f1cc397b357a42ca
+    storybook: ^8.3.6
+  checksum: 10c0/6e0fe4b28e956af5bd534af2bfd4299be075e22b2fa4cbbe661da2901929e5a44f50cb65ed9869c1afee603f711e023e000556823ba534e1f61390b0c1989136
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-interactions@npm:8.3.5"
+"@storybook/addon-interactions@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-interactions@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/instrumenter": "npm:8.3.5"
-    "@storybook/test": "npm:8.3.5"
+    "@storybook/instrumenter": "npm:8.3.6"
+    "@storybook/test": "npm:8.3.6"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/66aef03bdaee184911db0ddd212ef5c87f30d985d363b65085a88d19aa0304feb2753f342338f7b675463405ddfd0f6c7938ec62acdad5bbcd43af3173738932
+    storybook: ^8.3.6
+  checksum: 10c0/cccde56641ce455a319d68fb9d2aadf1df9404566199e4225bfacf6e8381d118b1fea41dce5ff36946dd7aac3a9ff6a4a6f17763064ce2e14dfdab6df743a3de
   languageName: node
   linkType: hard
 
@@ -2133,51 +2140,82 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-measure@npm:8.3.5"
+"@storybook/addon-measure@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-measure@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/49a8f2fac76a65fc2b4fdf6c90a4996e58cccf4a3db56a7f32a17eff2a34ebeccf7ad8042a3bd3b1e8deba1d9ba95ce95f8ee57f11a98de51ce6fc29b2a127b4
+    storybook: ^8.3.6
+  checksum: 10c0/0ca83d45cf0268a9b2ac24a5fabb76ac23fb1036c75f6ac16ea847266ccd3c1676469289c1c41f73b89cdf38a8ebddafdedf82669c3fe9f81464fd0ce5ee9fe8
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-outline@npm:8.3.5"
+"@storybook/addon-outline@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-outline@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/d1d4d734e1770aa4af8fba2d789ad5c570ae0eb66301d8c5444a92a07428f66cde4a32e48fc1ea8627801c7d5c99ae40563554eef7f1a5ad14e4144ee74f9726
+    storybook: ^8.3.6
+  checksum: 10c0/52fa8cecd40f0b9ccd96053b7b1207c7cafe7f2ed6808e04e5f0d6503ab5266aeb0710bbace4b787ac3af38ea9cd6e671fc8aa8eee993f4cb64811057c5e3b55
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-toolbars@npm:8.3.5"
+"@storybook/addon-toolbars@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-toolbars@npm:8.3.6"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/1e198ab1c87204f3ed69493484e94e6ad6bd4ed3c5a164ceeb0719cf2ddf96159d0fc481584c413d0bf3ff3943196ca123888ac67b0dbf967195d024387de84e
+    storybook: ^8.3.6
+  checksum: 10c0/58ee542f1530dc71956fa15578320b8aa31b47406d011e40447dba80c62269c867af548fe1e72ddd95606118fbd51a444c86c0ea6f580b497390122a17ab65a7
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/addon-viewport@npm:8.3.5"
+"@storybook/addon-viewport@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/addon-viewport@npm:8.3.6"
   dependencies:
     memoizerific: "npm:^1.11.3"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/26e02754694d3422c19383ca330eb541394e54151e6c3d86865cbedcf49a323820b649e837e47ef94ea310c80ca47b9baa56fadee3a02db31bce5eaae6f43674
+    storybook: ^8.3.6
+  checksum: 10c0/95b91e415cb803898334e28890394884c612f1bcffdef5256e2b6ec373815fcefb43da8698bfa739eaf211315c49de056d107c1de61a9ab20c594e16da3f741e
+  languageName: node
+  linkType: hard
+
+"@storybook/blocks@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/blocks@npm:8.3.6"
+  dependencies:
+    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.10"
+    "@types/lodash": "npm:^4.14.167"
+    color-convert: "npm:^2.0.1"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    markdown-to-jsx: "npm:^7.4.5"
+    memoizerific: "npm:^1.11.3"
+    polished: "npm:^4.2.2"
+    react-colorful: "npm:^5.1.2"
+    telejson: "npm:^7.2.0"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^8.3.6
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/28522998923a62a5a365f60200b8fe3bd6df42e81a61b58d75440fde04916f402281622ffb68c321dab8ca148490f942abe753c98102e278ca9b620ce1ecc1d1
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:8.3.5, @storybook/blocks@npm:^8.3.5":
+"@storybook/blocks@npm:^8.3.5":
   version: 8.3.5
   resolution: "@storybook/blocks@npm:8.3.5"
   dependencies:
@@ -2208,11 +2246,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-vite@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/builder-vite@npm:8.3.5"
+"@storybook/builder-vite@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/builder-vite@npm:8.3.6"
   dependencies:
-    "@storybook/csf-plugin": "npm:8.3.5"
+    "@storybook/csf-plugin": "npm:8.3.6"
     "@types/find-cache-dir": "npm:^3.2.1"
     browser-assert: "npm:^1.2.1"
     es-module-lexer: "npm:^1.5.0"
@@ -2223,7 +2261,7 @@ __metadata:
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
     "@preact/preset-vite": "*"
-    storybook: ^8.3.5
+    storybook: ^8.3.6
     typescript: ">= 4.3.x"
     vite: ^4.0.0 || ^5.0.0
     vite-plugin-glimmerx: "*"
@@ -2234,22 +2272,40 @@ __metadata:
       optional: true
     vite-plugin-glimmerx:
       optional: true
-  checksum: 10c0/7f597c1f0ae252e408863b34011f9210dc4247f96c4790836efb004081d426131ff9bfa23d4b69da7479a4ec8cb81f430b9538ce62b87621747ffd389741c296
+  checksum: 10c0/d8fe2f548bc18ecb9844bc57736de32f1954e14f4697905b99f8fe7f89727a04f0acf6f6b94dacd6f41750605ac89f4ca2bdd5f36d180d831d8bbc7ec6a8d154
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/components@npm:8.3.5"
+"@storybook/channels@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/channels@npm:8.3.6"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/20b3217f1a0a48ab5a40c08960d966be1fc6842dd40fc9951328d9bdc76411e3d3820865fd93895eeccec718ef8c8512f19d1fcad9bdd2cb6a792f92ca4d73ce
+    storybook: ^8.3.6
+  checksum: 10c0/3c34ed2b03c60c6ed1160d9a0efdb836be892e333556848ff492c16ab6d92521207512670d42f69d681f521e50f130a00f692610a3ca63228a8d2b49be57f4fa
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/core@npm:8.3.5"
+"@storybook/components@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/components@npm:8.3.6"
+  peerDependencies:
+    storybook: ^8.3.6
+  checksum: 10c0/65badbad5143c6585c94b08d7f3496dad42de256cb077c60dade0ca3b0fa03eb4dc5917fe4c3df03df35b7cf39001b8898794747951ac4b7594ed278ea01e4b0
+  languageName: node
+  linkType: hard
+
+"@storybook/core-events@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/core-events@npm:8.3.6"
+  peerDependencies:
+    storybook: ^8.3.6
+  checksum: 10c0/247f1896fb18d9957f7d2ab653329df1af60da63a07da3737c5af8f407e110ebf2efc6516e44606726efb413826e6b9d101e676adcb36a9cbcd54fb7152ceb03
+  languageName: node
+  linkType: hard
+
+"@storybook/core@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/core@npm:8.3.6"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@types/express": "npm:^4.17.21"
@@ -2264,18 +2320,18 @@ __metadata:
     semver: "npm:^7.6.2"
     util: "npm:^0.12.5"
     ws: "npm:^8.2.3"
-  checksum: 10c0/f01d13c2309af518f1d029d27a3dd1ce80ea7423c9d4927d1096634a84887051c3581404971499ab81e5b28acca517bf1b31a3281fe7fdb0b418f0c45767f16f
+  checksum: 10c0/75635195335f9f296e830b51e4d71d8f2db833ad1d6b279f9da349dd312307d07c036351cfb421aea2b69c39f11a95343d9d5518432c7d49923237a82c694388
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/csf-plugin@npm:8.3.5"
+"@storybook/csf-plugin@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/csf-plugin@npm:8.3.6"
   dependencies:
     unplugin: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/528af7509500afe1baf446fb8d52978c71d18df0abafd27a81ab821977cfb211bb02190f5a7d09005c4c10dac5e91ef978e35c74ee477ed7d6e45583ebc8412d
+    storybook: ^8.3.6
+  checksum: 10c0/977998f7a908b2832dd293ea14171f6fdf9c3a25d4035b5c868a8be54630d73983eb3ff4867e488408283d1bcb64fc51c001460610b0143b050b11db953dcb26
   languageName: node
   linkType: hard
 
@@ -2314,56 +2370,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/instrumenter@npm:8.3.5"
+"@storybook/instrumenter@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/instrumenter@npm:8.3.6"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@vitest/utils": "npm:^2.0.5"
     util: "npm:^0.12.4"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/9dd4e9080591200aa410ae9f7c132b466173a4fc882ad78e06fdbe8d795b04cee3afc5b1385ecb3ff5b9fb314abc3da2ac1494a8bf815e1113c3e8a241c5b7b7
+    storybook: ^8.3.6
+  checksum: 10c0/e071fcdb9fdb87c215412351bba765beed43f3bb487e51e837a85e6eb12575edf89d77ca1ab9edb7a70ad01fd498bb3aa3b35bbdb318ef9246e43d1310734f87
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/manager-api@npm:8.3.5"
+"@storybook/manager-api@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/manager-api@npm:8.3.6"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/4983af0e3a05abec0114acfa8bfe9d5df816b91f76614eb3c37dd654a0d4fdf5379d4d0cffc1676c6681d6142acd44e81abcb7c4f6de6108c8d26158cca9820d
+    storybook: ^8.3.6
+  checksum: 10c0/9193d0f2d7bffdc461083f3ec5acf31badeb935d4a2d76a7ab39d2bb261105e3b60695811802113d03ac2fed7562e5c1377e1a090243c2d56b5cede0c8bc5fdd
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/preview-api@npm:8.3.5"
+"@storybook/preview-api@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/preview-api@npm:8.3.6"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/12d81d57c0931983428b8621311de79a3846ec0f1c51ab94c5a9e7795a1e4bade74aa62de3693c488001630403c98a5372caca4be613f6f806e7265afb22e3d7
+    storybook: ^8.3.6
+  checksum: 10c0/f0413c36765c3518503d8dc67752356106a8d90fbc8f1db14ab0b454458a41ff1e8ce012911e59fa4432dde4260495c93c6265273024dcb1e8bb4d4d6e13cedb
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/react-dom-shim@npm:8.3.5"
+"@storybook/react-dom-shim@npm:8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/react-dom-shim@npm:8.3.6"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.5
-  checksum: 10c0/a765dc358ae2b1775197aa540024ff8f999c4d1673e76f632b74edd62bb609c8405f4ddfd392923ee6190bf0a1506a473cf41202323d8bda77b20681dc5a1594
+    storybook: ^8.3.6
+  checksum: 10c0/efc7917f8bc0d522ab075fd604c1aef9519f5ac534db56a37b03f7958eb1e0e954a7efde2c29ad6c553fb482cdaead7c9a78102e6dd172c3515bbf3d0062c774
   languageName: node
   linkType: hard
 
-"@storybook/react-vite@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/react-vite@npm:8.3.5"
+"@storybook/react-vite@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/react-vite@npm:8.3.6"
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0"
     "@rollup/pluginutils": "npm:^5.0.2"
-    "@storybook/builder-vite": "npm:8.3.5"
-    "@storybook/react": "npm:8.3.5"
+    "@storybook/builder-vite": "npm:8.3.6"
+    "@storybook/react": "npm:8.3.6"
     find-up: "npm:^5.0.0"
     magic-string: "npm:^0.30.0"
     react-docgen: "npm:^7.0.0"
@@ -2372,22 +2428,22 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.5
+    storybook: ^8.3.6
     vite: ^4.0.0 || ^5.0.0
-  checksum: 10c0/a1e8969013cc74ffd353914880a533d5d64c2b912fa7b8e9528e06e2870625f7e9523647a8dfb03013e449a3eabcdefa5aa2155916dc6bb3063b66c3aa579be3
+  checksum: 10c0/a1fa15aa49863cc1e1c6dc83186094ff43091c40daa720355eefb9a74934fa47d4c126bb6252ae0380a19219dd7e542c1782026acab3cd9a68f9513ba2f210e1
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:8.3.5, @storybook/react@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/react@npm:8.3.5"
+"@storybook/react@npm:8.3.6, @storybook/react@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/react@npm:8.3.6"
   dependencies:
-    "@storybook/components": "npm:^8.3.5"
+    "@storybook/components": "npm:^8.3.6"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:^8.3.5"
-    "@storybook/preview-api": "npm:^8.3.5"
-    "@storybook/react-dom-shim": "npm:8.3.5"
-    "@storybook/theming": "npm:^8.3.5"
+    "@storybook/manager-api": "npm:^8.3.6"
+    "@storybook/preview-api": "npm:^8.3.6"
+    "@storybook/react-dom-shim": "npm:8.3.6"
+    "@storybook/theming": "npm:^8.3.6"
     "@types/escodegen": "npm:^0.0.6"
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^22.0.0"
@@ -2403,27 +2459,27 @@ __metadata:
     type-fest: "npm:~2.19"
     util-deprecate: "npm:^1.0.2"
   peerDependencies:
-    "@storybook/test": 8.3.5
+    "@storybook/test": 8.3.6
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.5
+    storybook: ^8.3.6
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     "@storybook/test":
       optional: true
     typescript:
       optional: true
-  checksum: 10c0/2db9aa673be975018c9a44cc4c0c662439a85298a4d931afe63bf4e1ca6f7ab6889eddf6d64a555483af84ccc65b3d81b712c2231096124063cf5afa77fcbb6d
+  checksum: 10c0/f536ec3c002f678b501ed0eb12b402770e2e185f9d751a6714609bacee7ae5f3ee05d25db3c7d44f1408819e313b78ce3aaa3eaa56a817b4c3b8083e5bd1383d
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:8.3.5, @storybook/test@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/test@npm:8.3.5"
+"@storybook/test@npm:8.3.6, @storybook/test@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/test@npm:8.3.6"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/instrumenter": "npm:8.3.5"
+    "@storybook/instrumenter": "npm:8.3.6"
     "@testing-library/dom": "npm:10.4.0"
     "@testing-library/jest-dom": "npm:6.5.0"
     "@testing-library/user-event": "npm:14.5.2"
@@ -2431,17 +2487,17 @@ __metadata:
     "@vitest/spy": "npm:2.0.5"
     util: "npm:^0.12.4"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/1890aeab0b10d08f6b6bbaf68defaa2a0794e17e8f43ac3d92c3873d34771e198d088a2f4c0b135a299fe586407c4315cd443e270afa65d84914fcc5d63ea099
+    storybook: ^8.3.6
+  checksum: 10c0/708932d35b62fd84fb0fe7813d229fdb8fda77a8403496c79652e5418f015a68d15a2c422325790bf71d869f9cca3a377e92bde7fc8881285ffb290087b08daf
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "@storybook/theming@npm:8.3.5"
+"@storybook/theming@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "@storybook/theming@npm:8.3.6"
   peerDependencies:
-    storybook: ^8.3.5
-  checksum: 10c0/25455033b2b3bdb86083f759df77df42bfff71405c6abd301963dd7596003b462a0960a86c5cec3503dc9e1eba565eeb82a897002c6823f9ee361155b9ddfd23
+    storybook: ^8.3.6
+  checksum: 10c0/9e6dc4cb4bb444cbf3ac0f5b42696d462cd4886a5dcd42b4a8aee332ab141a1b745041bbb3fb36ab220820a3ab36ac4edd5f1ef81b66bba4059b4bdaa890006e
   languageName: node
   linkType: hard
 
@@ -3869,6 +3925,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compare-versions@npm:^6.0.0":
+  version: 6.1.1
+  resolution: "compare-versions@npm:6.1.1"
+  checksum: 10c0/415205c7627f9e4f358f571266422980c9fe2d99086be0c9a48008ef7c771f32b0fbe8e97a441ffedc3910872f917a0675fe0fe3c3b6d331cda6d8690be06338
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -7169,6 +7232,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-inspector@npm:6.0.2":
+  version: 6.0.2
+  resolution: "react-inspector@npm:6.0.2"
+  peerDependencies:
+    react: ^16.8.4 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/8f9b23c21b4d95722e28c9455c2bf00fd9437347714382594461f98e5b9954d60864d0f4e74e881639b065e752a97ba52a65e39930c234072e5bff291bb02b5e
+  languageName: node
+  linkType: hard
+
 "react-intl@npm:^6.8.0":
   version: 6.8.0
   resolution: "react-intl@npm:6.8.0"
@@ -7271,6 +7343,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^6.27.0":
+  version: 6.27.0
+  resolution: "react-router-dom@npm:6.27.0"
+  dependencies:
+    "@remix-run/router": "npm:1.20.0"
+    react-router: "npm:6.27.0"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/7db48ffd0b387af0eed060ceaf42075d074e63fbd30f4cf60993526b3610883a9ff82615965001165ed69d2bf2f1bce05c594a21c8d0d845e7b9bf203201116e
+  languageName: node
+  linkType: hard
+
+"react-router@npm:6.27.0":
+  version: 6.27.0
+  resolution: "react-router@npm:6.27.0"
+  dependencies:
+    "@remix-run/router": "npm:1.20.0"
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 10c0/440d6ee00890cec92a0c2183164149fbb96363efccf52bb132a964f44e51aec2f4b5a0520c67f6f17faddaa4097090fd76f7efe58263947532fceeb11dd4cdf3
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"
@@ -7828,16 +7924,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^8.3.5":
-  version: 8.3.5
-  resolution: "storybook@npm:8.3.5"
+"storybook-addon-remix-react-router@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "storybook-addon-remix-react-router@npm:3.0.1"
+  dependencies:
+    compare-versions: "npm:^6.0.0"
+    react-inspector: "npm:6.0.2"
+  peerDependencies:
+    "@storybook/blocks": ^8.0.0
+    "@storybook/channels": ^8.0.0
+    "@storybook/components": ^8.0.0
+    "@storybook/core-events": ^8.0.0
+    "@storybook/manager-api": ^8.0.0
+    "@storybook/preview-api": ^8.0.0
+    "@storybook/theming": ^8.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-router-dom: ^6.4.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/4f756e244ee336f2105c31c9c2a28b5d3b4d894131e83f4646d22e2cf80fbdd7c8458933999524d6964efb2600884c22b234699409d31cac13255fb6db4817f6
+  languageName: node
+  linkType: hard
+
+"storybook@npm:^8.3.6":
+  version: 8.3.6
+  resolution: "storybook@npm:8.3.6"
   dependencies:
-    "@storybook/core": "npm:8.3.5"
+    "@storybook/core": "npm:8.3.6"
   bin:
     getstorybook: ./bin/index.cjs
     sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: 10c0/8f8ffe54c5dad8bad9d8701f63f4670cf3f388acd0e21e5bedeb86ebd2af5adf905024b6b9a2c46cf1199a0c1c86a97fddfa1fc70546149e18263b3b47c80585
+  checksum: 10c0/f366ab5feeb354200c6df58f6d7bafc146b56af2d72ad93e19438e1750de2185c199fd804da7728ecaba73ef73404a53f0501829c2af6dffff830f848faf198c
   languageName: node
   linkType: hard
 
@@ -8098,13 +8220,19 @@ __metadata:
     "@radix-ui/react-switch": "npm:^1.1.1"
     "@radix-ui/react-tooltip": "npm:^1.1.3"
     "@rollup/pluginutils": "npm:^5.1.2"
-    "@storybook/addon-essentials": "npm:^8.3.5"
-    "@storybook/addon-interactions": "npm:^8.3.5"
+    "@storybook/addon-essentials": "npm:^8.3.6"
+    "@storybook/addon-interactions": "npm:^8.3.6"
     "@storybook/addon-links": "npm:^8.3.5"
     "@storybook/blocks": "npm:^8.3.5"
-    "@storybook/react": "npm:^8.3.5"
-    "@storybook/react-vite": "npm:^8.3.5"
-    "@storybook/test": "npm:^8.3.5"
+    "@storybook/channels": "npm:^8.3.6"
+    "@storybook/components": "npm:^8.3.6"
+    "@storybook/core-events": "npm:^8.3.6"
+    "@storybook/manager-api": "npm:^8.3.6"
+    "@storybook/preview-api": "npm:^8.3.6"
+    "@storybook/react": "npm:^8.3.6"
+    "@storybook/react-vite": "npm:^8.3.6"
+    "@storybook/test": "npm:^8.3.6"
+    "@storybook/theming": "npm:^8.3.6"
     "@types/node": "npm:^22.7.6"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18.3.1"
@@ -8135,10 +8263,12 @@ __metadata:
     react-hook-form: "npm:^7.53.0"
     react-intl: "npm:^6.8.0"
     react-relay: "npm:^18.1.0"
+    react-router-dom: "npm:^6.27.0"
     relay-compiler: "npm:^18.1.0"
     relay-test-utils: "npm:^18.1.0"
     rollup-plugin-jsx-remove-attributes: "npm:^2.0.3"
-    storybook: "npm:^8.3.5"
+    storybook: "npm:^8.3.6"
+    storybook-addon-remix-react-router: "npm:^3.0.1"
     tailwind-merge: "npm:^2.5.4"
     tailwindcss: "npm:^3.4.14"
     tailwindcss-animate: "npm:^1.0.7"