diff --git a/front/app/(app)/_layout.tsx b/front/app/(app)/_layout.tsx
index b43d4dec..a353595c 100644
--- a/front/app/(app)/_layout.tsx
+++ b/front/app/(app)/_layout.tsx
@@ -1,5 +1,5 @@
 import { Slot } from "one";
-import { ErrorConsumer } from "~/providers/error-provider";
+import { ErrorConsumer } from "~/providers/error-consumer";
 
 export default function Layout() {
 	return (
diff --git a/front/src/providers/error-consumer.tsx b/front/src/providers/error-consumer.tsx
new file mode 100644
index 00000000..24720840
--- /dev/null
+++ b/front/src/providers/error-consumer.tsx
@@ -0,0 +1,14 @@
+import { type ReactNode, useContext } from "react";
+import { ErrorView, errorHandlers } from "~/ui/errors";
+import { ErrorContext } from "./error-provider";
+
+export const ErrorConsumer = ({ children, scope }: { children: ReactNode; scope: string }) => {
+	const error = useContext(ErrorContext);
+	if (!error) return children;
+
+	const handler = errorHandlers[error.key] ?? { view: ErrorView };
+	if (handler.forbid && handler.forbid !== scope) return children;
+	const Handler = handler.view;
+	const { key, ...val } = error;
+	return <Handler {...(val as any)} />;
+};
diff --git a/front/src/providers/error-provider.tsx b/front/src/providers/error-provider.tsx
index cc0f73e1..f4e4e753 100644
--- a/front/src/providers/error-provider.tsx
+++ b/front/src/providers/error-provider.tsx
@@ -8,7 +8,6 @@ import {
 	useState,
 } from "react";
 import type { KyooError } from "~/models";
-import { ErrorView, errorHandlers } from "~/ui/errors";
 
 type Error = {
 	key: string;
@@ -16,7 +15,7 @@ type Error = {
 	retry?: () => void;
 };
 
-const ErrorContext = createContext<Error | null>(null);
+export const ErrorContext = createContext<Error | null>(null);
 const ErrorSetterContext = createContext<{
 	setError: (error: Error | null) => void;
 	clearError: (key: string) => void;
@@ -45,16 +44,6 @@ export const ErrorProvider = ({ children }: { children: ReactNode }) => {
 	);
 };
 
-export const ErrorConsumer = ({ children, scope }: { children: ReactNode; scope: string }) => {
-	const error = useContext(ErrorContext);
-	if (!error) return children;
-
-	const handler = errorHandlers[error.key] ?? { view: ErrorView };
-	if (handler.forbid && handler.forbid !== scope) return children;
-	const Handler = handler.view;
-	const { key, ...val } = error;
-	return <Handler {...(val as any)} />;
-};
 export const useSetError = (key: string) => {
 	const { setError, clearError } = useContext(ErrorSetterContext);
 	const set = ({ key: nKey, ...obj }: Omit<Error, "key"> & { key?: Error["key"] }) =>
diff --git a/front/src/providers/index.tsx b/front/src/providers/index.tsx
index 2550dd72..4166e315 100644
--- a/front/src/providers/index.tsx
+++ b/front/src/providers/index.tsx
@@ -5,12 +5,9 @@ import { type ReactNode, useMemo, useState } from "react";
 import { ThemeSelector } from "~/primitives/theme";
 import { createQueryClient } from "~/query";
 import { AccountProvider } from "./account-provider";
-import { ErrorConsumer, ErrorProvider } from "./error-provider";
-
-const { TranslationsProvider } =
-	typeof window === "undefined"
-		? await import("./translations.ssr")
-		: await import("./translations");
+import { ErrorConsumer } from "./error-consumer";
+import { ErrorProvider } from "./error-provider";
+import { TranslationsProvider } from "./translations";
 
 const QueryProvider = ({ children }: { children: ReactNode }) => {
 	const [queryClient] = useState(() => createQueryClient());
diff --git a/front/src/query/fetch.tsx b/front/src/query/fetch.tsx
index f73c6330..57c4ac81 100644
--- a/front/src/query/fetch.tsx
+++ b/front/src/query/fetch.tsx
@@ -1,6 +1,6 @@
-import { useLayoutEffect, type ReactElement } from "react";
+import { type ReactElement, useLayoutEffect } from "react";
 import { useSetError } from "~/providers/error-provider";
-import { ErrorView } from "~/ui/errors";
+import { ErrorView } from "~/ui/errors/error";
 import { type QueryIdentifier, useFetch } from "./query";
 
 export const Fetch = <Data,>({