diff --git a/src/app/tools/tankopedia/[id]/components/Configure.tsx b/src/app/tools/tankopedia/[id]/components/Configure.tsx
deleted file mode 100644
index 51c277f8e..000000000
--- a/src/app/tools/tankopedia/[id]/components/Configure.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Flex, Heading } from '@radix-ui/themes';
-import { use } from 'react';
-import { ModuleButton } from '../../../../../components/ModuleButton';
-import { checkConsumableInclusivity } from '../../../../../core/blitzkrieg/checkConsumableInclusivity';
-import { consumableDefinitions } from '../../../../../core/blitzkrieg/consumablesDefinitions';
-import { equipmentDefinitions } from '../../../../../core/blitzkrieg/equipmentDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../core/blitzkrieg/tankDefinitions';
-import { mutateDuel, useDuel } from '../../../../../stores/duel';
-import {
-  mutateTankopediaTemporary,
-  useTankopediaTemporary,
-} from '../../../../../stores/tankopedia';
-
-export function Configure() {
-  const protagonist = useDuel((state) => state.protagonist!);
-  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
-  const awaitedConsumableDefinitions = use(consumableDefinitions);
-  const equipmentRows =
-    awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
-  const equipmentMatrix = useTankopediaTemporary(
-    (state) => state.equipmentMatrix,
-  );
-  const consumables = useTankopediaTemporary((state) => state.consumables);
-  const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
-    (consumable) =>
-      checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
-  );
-
-  return (
-    <Flex gap="4" direction="column">
-      <Heading>Configure</Heading>
-
-      <Flex gap="4" justify="between" wrap="wrap">
-        <Flex gap="2" direction="column">
-          <Heading size="4">Modules</Heading>
-
-          <Flex gap="2">
-            <Flex>
-              {protagonist.tank.turrets.map((thisTurret, index) => {
-                return (
-                  <ModuleButton
-                    key={thisTurret.id}
-                    selected={protagonist.turret.id === thisTurret.id}
-                    type="module"
-                    module="turret"
-                    discriminator={TIER_ROMAN_NUMERALS[thisTurret.tier]}
-                    first={index === 0}
-                    last={index === protagonist.tank.turrets.length - 1}
-                    rowChild
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.turret = thisTurret;
-                        draft.protagonist!.gun = thisTurret.guns.at(-1)!;
-                        draft.protagonist!.shell =
-                          thisTurret.guns.at(-1)!.shells[0];
-                      });
-                    }}
-                  />
-                );
-              })}
-            </Flex>
-
-            <Flex>
-              {protagonist.turret.guns.map((thisGun, index) => {
-                return (
-                  <ModuleButton
-                    key={thisGun.id}
-                    type="module"
-                    module="gun"
-                    discriminator={TIER_ROMAN_NUMERALS[thisGun.tier]}
-                    selected={protagonist.gun.id === thisGun.id}
-                    first={index === 0}
-                    last={index === protagonist.turret.guns.length - 1}
-                    rowChild
-                    onClick={() => {
-                      mutateDuel((draft) => {
-                        draft.protagonist!.gun = thisGun;
-                        draft.protagonist!.shell = thisGun.shells[0];
-                      });
-                    }}
-                  />
-                );
-              })}
-            </Flex>
-          </Flex>
-        </Flex>
-
-        <Flex gap="2" direction="column">
-          <Heading size="4">Equipment</Heading>
-
-          <Flex direction="column" gap="2">
-            {equipmentRows.map((equipmentRow, rowIndex) => (
-              <Flex gap="2" key={rowIndex}>
-                {equipmentRow.map((equipment, columnIndex) => (
-                  <Flex key={columnIndex}>
-                    <ModuleButton
-                      type="equipment"
-                      equipment={equipment[0]}
-                      first
-                      rowChild
-                      selected={equipmentMatrix[rowIndex][columnIndex] === -1}
-                      onClick={() => {
-                        mutateTankopediaTemporary((draft) => {
-                          if (equipmentMatrix[rowIndex][columnIndex] === -1) {
-                            draft.equipmentMatrix[rowIndex][columnIndex] = 0;
-                          } else {
-                            draft.equipmentMatrix[rowIndex][columnIndex] = -1;
-                          }
-                        });
-                      }}
-                    />
-                    <ModuleButton
-                      type="equipment"
-                      equipment={equipment[1]}
-                      last
-                      rowChild
-                      selected={equipmentMatrix[rowIndex][columnIndex] === 1}
-                      onClick={() => {
-                        mutateTankopediaTemporary((draft) => {
-                          if (equipmentMatrix[rowIndex][columnIndex] === 1) {
-                            draft.equipmentMatrix[rowIndex][columnIndex] = 0;
-                          } else {
-                            draft.equipmentMatrix[rowIndex][columnIndex] = 1;
-                          }
-                        });
-                      }}
-                    />
-                  </Flex>
-                ))}
-              </Flex>
-            ))}
-          </Flex>
-        </Flex>
-
-        <Flex gap="2" direction="column">
-          <Heading size="4">
-            Consumables (max {protagonist.tank.consumables})
-          </Heading>
-
-          <Flex>
-            {consumablesList.map((consumable, index) => {
-              const selected = consumables.includes(consumable.id);
-
-              return (
-                <ModuleButton
-                  first={index === 0}
-                  last={index === consumablesList.length - 1}
-                  rowChild
-                  type="consumable"
-                  disabled={
-                    protagonist.tank.consumables === consumables.length &&
-                    !selected
-                  }
-                  consumable={consumable.id}
-                  selected={selected}
-                  onClick={() => {
-                    mutateTankopediaTemporary((draft) => {
-                      if (selected) {
-                        draft.consumables = draft.consumables.filter(
-                          (id) => id !== consumable.id,
-                        );
-                      } else {
-                        draft.consumables.push(consumable.id);
-                      }
-                    });
-                  }}
-                />
-              );
-            })}
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/*
-      <Flex gap="4" direction="column">
-        <Heading size="5">Camouflage</Heading>
-      </Flex>
-
-      <Flex gap="4" direction="column">
-        <Heading size="5">Consumables</Heading>
-      </Flex>
-
-      <Flex gap="4" direction="column">
-        <Heading size="5">Provisions</Heading>
-      </Flex> */}
-    </Flex>
-  );
-}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx
new file mode 100644
index 000000000..f2d24596c
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Consumables.tsx
@@ -0,0 +1,60 @@
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import { checkConsumableInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableInclusivity';
+import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumablesDefinitions';
+import { useDuel } from '../../../../../../../stores/duel';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaTemporary,
+} from '../../../../../../../stores/tankopedia';
+
+export function Consumables() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const consumables = useTankopediaTemporary((state) => state.consumables);
+  const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
+    (consumable) =>
+      checkConsumableInclusivity(consumable, protagonist.tank, protagonist.gun),
+  );
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">
+        Consumables{' '}
+        <Text color="gray">(max {protagonist.tank.consumables})</Text>
+      </Heading>
+
+      <Flex>
+        {consumablesList.map((consumable, index) => {
+          const selected = consumables.includes(consumable.id);
+
+          return (
+            <ModuleButton
+              first={index === 0}
+              last={index === consumablesList.length - 1}
+              rowChild
+              type="consumable"
+              disabled={
+                protagonist.tank.consumables === consumables.length && !selected
+              }
+              consumable={consumable.id}
+              selected={selected}
+              onClick={() => {
+                mutateTankopediaTemporary((draft) => {
+                  if (selected) {
+                    draft.consumables = draft.consumables.filter(
+                      (id) => id !== consumable.id,
+                    );
+                  } else {
+                    draft.consumables.push(consumable.id);
+                  }
+                });
+              }}
+            />
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx
new file mode 100644
index 000000000..551bb5dcc
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Equipments.tsx
@@ -0,0 +1,68 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
+import { useDuel } from '../../../../../../../stores/duel';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaTemporary,
+} from '../../../../../../../stores/tankopedia';
+
+export function Equipments() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+  const equipmentRows =
+    awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
+  const equipmentMatrix = useTankopediaTemporary(
+    (state) => state.equipmentMatrix,
+  );
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">Equipments</Heading>
+
+      <Flex direction="column" gap="2">
+        {equipmentRows.map((equipmentRow, rowIndex) => (
+          <Flex gap="2" key={rowIndex}>
+            {equipmentRow.map((equipment, columnIndex) => (
+              <Flex key={columnIndex}>
+                <ModuleButton
+                  type="equipment"
+                  equipment={equipment[0]}
+                  first
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === -1}
+                  onClick={() => {
+                    mutateTankopediaTemporary((draft) => {
+                      if (equipmentMatrix[rowIndex][columnIndex] === -1) {
+                        draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                      } else {
+                        draft.equipmentMatrix[rowIndex][columnIndex] = -1;
+                      }
+                    });
+                  }}
+                />
+                <ModuleButton
+                  type="equipment"
+                  equipment={equipment[1]}
+                  last
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === 1}
+                  onClick={() => {
+                    mutateTankopediaTemporary((draft) => {
+                      if (equipmentMatrix[rowIndex][columnIndex] === 1) {
+                        draft.equipmentMatrix[rowIndex][columnIndex] = 0;
+                      } else {
+                        draft.equipmentMatrix[rowIndex][columnIndex] = 1;
+                      }
+                    });
+                  }}
+                />
+              </Flex>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx
new file mode 100644
index 000000000..d42383c53
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Modules.tsx
@@ -0,0 +1,64 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+
+export function Modules() {
+  const protagonist = useDuel((state) => state.protagonist!);
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">Modules</Heading>
+
+      <Flex gap="2">
+        <Flex>
+          {protagonist.tank.turrets.map((thisTurret, index) => {
+            return (
+              <ModuleButton
+                key={thisTurret.id}
+                selected={protagonist.turret.id === thisTurret.id}
+                type="module"
+                module="turret"
+                discriminator={TIER_ROMAN_NUMERALS[thisTurret.tier]}
+                first={index === 0}
+                last={index === protagonist.tank.turrets.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.turret = thisTurret;
+                    draft.protagonist!.gun = thisTurret.guns.at(-1)!;
+                    draft.protagonist!.shell =
+                      thisTurret.guns.at(-1)!.shells[0];
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex>
+          {protagonist.turret.guns.map((thisGun, index) => {
+            return (
+              <ModuleButton
+                key={thisGun.id}
+                type="module"
+                module="gun"
+                discriminator={TIER_ROMAN_NUMERALS[thisGun.tier]}
+                selected={protagonist.gun.id === thisGun.id}
+                first={index === 0}
+                last={index === protagonist.turret.guns.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.gun = thisGun;
+                    draft.protagonist!.shell = thisGun.shells[0];
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
new file mode 100644
index 000000000..57b73e568
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
@@ -0,0 +1,31 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { Consumables } from './components/Consumables';
+import { Equipments } from './components/Equipments';
+import { Modules } from './components/Modules';
+
+export function Configure() {
+  return (
+    <Flex gap="4" direction="column">
+      <Heading>Configure</Heading>
+
+      <Flex gap="4" direction="column" wrap="wrap">
+        <Modules />
+        <Equipments />
+        <Consumables />
+      </Flex>
+
+      {/*
+      <Flex gap="4" direction="column">
+        <Heading size="5">Camouflage</Heading>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Consumables</Heading>
+      </Flex>
+
+      <Flex gap="4" direction="column">
+        <Heading size="5">Provisions</Heading>
+      </Flex> */}
+    </Flex>
+  );
+}