diff --git a/packages/website-ue/src/hocs/withErrorWrapper.tsx b/packages/website-ue/src/hocs/withErrorWrapper.tsx
new file mode 100644
index 000000000..786575ec0
--- /dev/null
+++ b/packages/website-ue/src/hocs/withErrorWrapper.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { ErrorWrapper } from "../components/ErrorWrapper";
+
+export function withErrorWrapper<Props extends {}>(
+  Component: (props: Props) => ReactNode,
+) {
+  return function (props: Props) {
+    <ErrorWrapper>
+      <Component {...props} />
+    </ErrorWrapper>;
+  };
+}
diff --git a/packages/website-ue/src/hocs/withLocale.tsx b/packages/website-ue/src/hocs/withLocale.tsx
new file mode 100644
index 000000000..fc7993ce2
--- /dev/null
+++ b/packages/website-ue/src/hocs/withLocale.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { LocaleProvider } from "../hooks/useLocale";
+
+interface WithLocaleProps {
+  locale: string;
+}
+
+export function withLocale<Props extends object>(
+  Component: (props: Props) => ReactNode,
+) {
+  return function ({ locale, ...props }: Props & WithLocaleProps) {
+    return (
+      <LocaleProvider locale={locale}>
+        <Component {...(props as Props)} />
+      </LocaleProvider>
+    );
+  };
+}
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
index 729529ecf..b51e6a0f7 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
@@ -1,21 +1,9 @@
 import { AvatarControls } from "../../../components/AvatarControls";
 import { AvatarsList } from "../../../components/AvatarsList";
 import { Section } from "../../../components/Section";
-import { LocaleProvider } from "../../../hooks/useLocale";
+import { withLocale } from "../../../hocs/withLocale";
 
-interface PageProps {
-  locale: string;
-}
-
-export function Page({ locale, ...props }: PageProps) {
-  return (
-    <LocaleProvider locale={locale}>
-      <Content {...props} />
-    </LocaleProvider>
-  );
-}
-
-function Content() {
+export const Page = withLocale(() => {
   return (
     <>
       <Section>
@@ -27,4 +15,4 @@ function Content() {
       </Section>
     </>
   );
-}
+});
diff --git a/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro b/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
deleted file mode 100644
index f58c46c27..000000000
--- a/packages/website-ue/src/pages/[...locale]/backgrounds/index.astro
+++ /dev/null
@@ -1,45 +0,0 @@
----
-import { Grade } from "@protos/blitz_static_standard_grades_enum";
-import { api } from "../../../api/dynamic";
-import BaseLayout from "../../../layouts/BaseLayout.astro";
-
-export { getStaticPaths } from "../index.astro";
-
-const { locale } = Astro.props;
-const { backgrounds } = await api.backgrounds();
----
-
-<BaseLayout {locale} accent="amber">
-  {
-    backgrounds.map((background) => {
-      return (
-        <>
-          <h3>
-            {background.stuff_ui!.display_name}{" "}
-            {Grade[background.stuff_ui!.grade]}{" "}
-          </h3>
-
-          <pre>{JSON.stringify(background.profile_background, null, 2)}</pre>
-
-          {background.stuff_ui!.description && (
-            <p>{background.stuff_ui!.description}</p>
-          )}
-          {background.stuff_ui!.obtaining_methods && (
-            <p>{background.stuff_ui!.obtaining_methods}</p>
-          )}
-          {background.stuff_ui!.features && (
-            <p>{background.stuff_ui!.features}</p>
-          )}
-
-          <img width="128" src={`/api/backgrounds/${background.name}.webp`} />
-
-          {background.sellable && (
-            <pre>{JSON.stringify(background.sellable, null, 2)}</pre>
-          )}
-
-          <br />
-        </>
-      );
-    })
-  }
-</BaseLayout>
diff --git a/packages/website-ue/src/pages/[...locale]/settings/index.astro b/packages/website-ue/src/pages/[...locale]/settings/index.astro
deleted file mode 100644
index 56c6c8190..000000000
--- a/packages/website-ue/src/pages/[...locale]/settings/index.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import { Heading } from "../../../components/Heading";
-import { Section } from "../../../components/Section";
-import BaseLayout from "../../../layouts/BaseLayout.astro";
-
-export { getStaticPaths } from "../index.astro";
-
-const { locale } = Astro.props;
----
-
-<BaseLayout {locale} accent="amber">
-  <Section>
-    <Heading>Settings</Heading>
-  </Section>
-</BaseLayout>
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
index 7de4a9416..901f38a92 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
@@ -1,48 +1,26 @@
 import { Fragment, useMemo } from "react";
 import { api } from "../../../../api/dynamic";
-import { ErrorWrapper } from "../../../../components/ErrorWrapper";
 import { TankopediaLoadout } from "../../../../components/TankopediaLoadout";
+import { withLocale } from "../../../../hocs/withLocale";
 import { useAwait } from "../../../../hooks/useAwait";
 import { useCharacteristicRenderer } from "../../../../hooks/useCharacteristicRenderer";
 import { useEquipment } from "../../../../hooks/useEquipment";
-import { LocaleProvider } from "../../../../hooks/useLocale";
 import { Tankopedia } from "../../../../stores/tankopedia";
 import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
 
 interface PageProps {
   id: string;
-  locale: string;
 }
 
-export function Page(props: PageProps) {
-  return (
-    <ErrorWrapper>
-      <Wrapper {...props} />
-    </ErrorWrapper>
-  );
-}
+export const Page = withLocale(({ id }: PageProps) => {
+  const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
 
-function Wrapper({ id, locale }: PageProps) {
-  const tank = useAwait(() => api.tank(id), `tank-${id}`);
+  Tankopedia.useInitialization(protagonistTank);
 
-  Tankopedia.useInitialization(tank);
-
-  return (
-    <LocaleProvider locale={locale}>
-      <Content />
-    </LocaleProvider>
-  );
-}
-
-function Content() {
   const renderCharacteristic = useCharacteristicRenderer();
 
   const protagonist = Tankopedia.use((state) => state.protagonist);
-  const protagonistTank = useAwait(
-    () => api.tank(protagonist.id),
-    `tank-${protagonist.id}`,
-  );
   const protagonistEquipment = useEquipment(protagonistTank.tank!);
 
   const { characteristics } = useMemo(
@@ -63,105 +41,6 @@ function Content() {
 
       <TankopediaLoadout />
 
-      {/* <h2>upgrades</h2>
-
-      {protagonistTank.tank!.upgrade_lines.map((line) => {
-        return (
-          <>
-            <h3>
-              {line.name} ({protagonist.upgrades[line.name]})
-            </h3>
-
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
-                gap: 8,
-              }}
-            >
-              {line.stages.map((stage, index) => {
-                if (stage.custom_picture) {
-                  throw new Error("Custom picture not supported");
-                }
-
-                return (
-                  <button
-                    key={stage.tech_name}
-                    onClick={() => {
-                      Tankopedia.mutate((draft) => {
-                        draft.protagonist.upgrades[line.name] = index;
-
-                        for (const required of stage.required_upgrades) {
-                          for (const line of protagonistTank.tank!
-                            .upgrade_lines) {
-                            let i = 0;
-
-                            for (const stage of line.stages) {
-                              if (stage.tech_name === required) {
-                                draft.protagonist.upgrades[line.name] =
-                                  Math.max(
-                                    draft.protagonist.upgrades[line.name],
-                                    i,
-                                  );
-                              }
-
-                              i++;
-                            }
-                          }
-                        }
-
-                        for (const line of protagonistTank.tank!
-                          .upgrade_lines) {
-                          let i = draft.protagonist.upgrades[line.name];
-
-                          while (i > 0) {
-                            const currentStage = line.stages[i];
-                            const valid = currentStage.required_upgrades.every(
-                              (required) => {
-                                for (const line of protagonistTank.tank!
-                                  .upgrade_lines) {
-                                  const idx =
-                                    draft.protagonist.upgrades[line.name];
-
-                                  if (
-                                    line.stages[idx]?.tech_name === required
-                                  ) {
-                                    return true;
-                                  }
-                                }
-
-                                return false;
-                              },
-                            );
-
-                            if (valid) break;
-
-                            i--;
-                          }
-
-                          draft.protagonist.upgrades[line.name] = i;
-                        }
-                      });
-                    }}
-                    style={{
-                      backgroundColor:
-                        protagonist.upgrades[line.name] === index
-                          ? "green"
-                          : undefined,
-                    }}
-                  >
-                    {stage.tech_name}: {Grade[stage.grade]}
-                    {StageParameters_StageType[stage.stage_type]}
-                    {tankEntityGameStrings[stage.display_name]}
-                  </button>
-                );
-              })}
-            </div>
-          </>
-        );
-      })} */}
-
       <h2>characteristics</h2>
 
       {characteristicsOrder.map((group) => {
@@ -189,191 +68,4 @@ function Content() {
       })}
     </>
   );
-
-  // const parameters = aggregateParameters(
-  //   protagonistTank.tank!,
-  //   protagonist.upgrades,
-  // );
-
-  // if (parameters.modules_upgrades.length > 0) {
-  //   throw new Error("Modules upgrades display not implemented");
-  // }
-
-  // return (
-  //   <>
-  //     <h1>{protagonist.id}</h1>
-
-  //     <br />
-
-  //     <h2>upgrades</h2>
-
-  //     {protagonistTank.tank!.upgrade_lines.map((line) => {
-  //       return (
-  //         <>
-  //           <h3>
-  //             {line.name} ({protagonist.upgrades[line.name]})
-  //           </h3>
-
-  //           <div
-  //             style={{
-  //               display: "flex",
-  //               flexDirection: "column",
-  //               alignItems: "flex-start",
-  //               gap: 8,
-  //             }}
-  //           >
-  //             {line.stages.map((stage, index) => {
-  //               if (stage.custom_picture) {
-  //                 throw new Error("Custom picture not supported");
-  //               }
-
-  //               return (
-  //                 <button
-  //                   key={stage.tech_name}
-  //                   onClick={() => {
-  //                     Tankopedia.mutate((draft) => {
-  //                       draft.protagonist.upgrades[line.name] = index;
-
-  //                       for (const required of stage.required_upgrades) {
-  //                         for (const line of protagonistTank.tank!
-  //                           .upgrade_lines) {
-  //                           let i = 0;
-
-  //                           for (const stage of line.stages) {
-  //                             if (stage.tech_name === required) {
-  //                               draft.protagonist.upgrades[line.name] =
-  //                                 Math.max(
-  //                                   draft.protagonist.upgrades[line.name],
-  //                                   i,
-  //                                 );
-  //                             }
-
-  //                             i++;
-  //                           }
-  //                         }
-  //                       }
-
-  //                       for (const line of protagonistTank.tank!
-  //                         .upgrade_lines) {
-  //                         let i = draft.protagonist.upgrades[line.name];
-
-  //                         while (i > 0) {
-  //                           const currentStage = line.stages[i];
-  //                           const valid = currentStage.required_upgrades.every(
-  //                             (required) => {
-  //                               for (const line of protagonistTank.tank!
-  //                                 .upgrade_lines) {
-  //                                 const idx =
-  //                                   draft.protagonist.upgrades[line.name];
-
-  //                                 if (
-  //                                   line.stages[idx]?.tech_name === required
-  //                                 ) {
-  //                                   return true;
-  //                                 }
-  //                               }
-
-  //                               return false;
-  //                             },
-  //                           );
-
-  //                           if (valid) break;
-
-  //                           i--;
-  //                         }
-
-  //                         draft.protagonist.upgrades[line.name] = i;
-  //                       }
-  //                     });
-  //                   }}
-  //                   style={{
-  //                     backgroundColor:
-  //                       protagonist.upgrades[line.name] === index
-  //                         ? "green"
-  //                         : undefined,
-  //                   }}
-  //                 >
-  //                   {stage.tech_name}: {Grade[stage.grade]}
-  //                   {StageParameters_StageType[stage.stage_type]}
-  //                   {tankEntityGameStrings[stage.display_name]}
-  //                 </button>
-  //               );
-  //             })}
-  //           </div>
-  //         </>
-  //       );
-  //     })}
-
-  //     <h2>characteristics</h2>
-
-  //     {}
-
-  //     <h2>parameters</h2>
-
-  //     <h3>attributes</h3>
-
-  //     {parameters.attributes.map((attribute) => {
-  //       return (
-  //         <span>
-  //           {TankAttributeChange_AttributeName[attribute.attribute_name]}:{" "}
-  //           {attribute.value}
-  //         </span>
-  //       );
-  //     })}
-
-  //     <h3>penetration groups</h3>
-
-  //     {parameters.penetration_groups_upgrades.map((upgrade) => {
-  //       return (
-  //         <>
-  //           <h4>{PenetrationGroupUpgrade_TankPart[upgrade.tank_part]}</h4>
-
-  //           <span>
-  //             primary armor ({upgrade.primary_armor.length}):{" "}
-  //             {upgrade.primary_armor}
-  //           </span>
-
-  //           <br />
-
-  //           {upgrade.penetration_groups.map((group) => {
-  //             return (
-  //               <span>
-  //                 {group.group_name}: {group.armor} (
-  //                 {PenetrationGroup_CommonData[group.common_data]})
-  //               </span>
-  //             );
-  //           })}
-  //         </>
-  //       );
-  //     })}
-
-  //     <h2>modules ({parameters.modules_upgrades.length})</h2>
-
-  //     {parameters.modules_upgrades.map((upgrade) => {
-  //       return (
-  //         <span>{ModuleUpgrade_AttributeName[upgrade.attribute_name]}</span>
-  //       );
-  //     })}
-
-  //     <h2>shells</h2>
-
-  //     {parameters.shells_upgrades.map((upgrade) => {
-  //       return (
-  //         <>
-  //           <h3>
-  //             {upgrade.shell_id}: {ShellUpgrade_ShellType[upgrade.shell_type]}
-  //           </h3>
-
-  //           <pre>
-  //             silver_price: {JSON.stringify(upgrade.silver_price, null, 2)}
-  //           </pre>
-
-  //           <pre>
-  //             tray_shells: {JSON.stringify(upgrade.tray_shells, null, 2)}
-  //           </pre>
-  //         </>
-  //       );
-  //     })}
-  //   </>
-  // );
-}
+});
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
index f1ead407a..97a6555fc 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/tanks/_index.tsx
@@ -5,27 +5,15 @@ import { IncrementalLoader } from "../../../components/IncrementalLoader";
 import { TankCard } from "../../../components/TankCard";
 import { TankCards } from "../../../components/TankCards";
 import { TankSearch } from "../../../components/TankSearch";
+import { withLocale } from "../../../hocs/withLocale";
 import { useAwait } from "../../../hooks/useAwait";
-import { LocaleProvider } from "../../../hooks/useLocale";
 import { useSearchableTanks } from "../../../hooks/useSearchableTanks";
 import { useTierCompare } from "../../../hooks/useTierCompare";
 import { TankFilters } from "../../../stores/tankFilters";
 
 const { go } = fuzzysort;
 
-interface PageProps {
-  locale: string;
-}
-
-export function Page({ locale, ...props }: PageProps) {
-  return (
-    <LocaleProvider locale={locale}>
-      <Content {...props} />
-    </LocaleProvider>
-  );
-}
-
-function Content() {
+export const Page = withLocale(() => {
   const tanks = useAwait(() => api.tanks(), "tanks");
 
   const compareTiers = useTierCompare();
@@ -60,7 +48,7 @@ function Content() {
       <List tanks={tanksFiltered} />
     </>
   );
-}
+});
 
 interface ListProps {
   tanks: string[];