diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index f3e24bf4c..d1f28bc87 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -263,6 +263,7 @@
},
"loadout": {
+ "state": "State",
"consumables": "Consumables",
"modules": "Modules",
"equipment": "Equipment",
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
index 1ca654c48..3139b9a63 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css
+++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
@@ -13,6 +13,16 @@
}
}
+ .state {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-3);
+
+ .toggle {
+ font-size: 2em;
+ }
+ }
+
.consumables {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
index 62c285437..a92a3ad85 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx
+++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
@@ -11,6 +11,7 @@ import {
CornerBottomLeftIcon,
DoubleArrowLeftIcon,
DoubleArrowRightIcon,
+ ExclamationTriangleIcon,
ResetIcon,
TrashIcon,
} from "@radix-ui/react-icons";
@@ -54,6 +55,7 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
return (
<>
+