diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
deleted file mode 100644
index 4f45720c6..000000000
--- a/src/app/tools/tankopedia/[id]/components/Model/MetaSection.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Code, Flex, Heading, Text } from '@radix-ui/themes';
-import { classIcons } from '../../../../../../components/ClassIcon';
-import { asset } from '../../../../../../core/blitzkit/asset';
-import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
-import strings from '../../../../../../lang/en-US.json';
-import * as App from '../../../../../../stores/app';
-import * as Duel from '../../../../../../stores/duel';
-
-export function MetaSection() {
-  const developerMode = App.useDeferred(false, (state) => state.developerMode);
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const ClassIcon = classIcons[tank.class];
-
-  return (
-    <Flex justify="center" align="center" py="8" px="4">
-      <Flex align="center" justify="center" gap="8" wrap="wrap">
-        <img alt="Economics" src={tankIcon(tank.id)} />
-
-        <Flex gap="6" wrap="wrap" align="start" justify="center">
-          <Flex direction="column" gap="2">
-            <Heading>Overview</Heading>
-
-            <Flex gap="6">
-              <Flex direction="column">
-                <Text color="gray">Name</Text>
-                {tank.nameFull && <Text color="gray">Full-name</Text>}
-                <Text color="gray">Nation</Text>
-                <Text color="gray">Tier</Text>
-                <Text color="gray">Class</Text>
-                <Text color="gray">Type</Text>
-                {developerMode && (
-                  <Text color="gray">
-                    <b>DEV:</b> ID
-                  </Text>
-                )}
-              </Flex>
-
-              <Flex direction="column" align="end">
-                <Text>{tank.name}</Text>
-                {tank.nameFull && <Text>{tank.nameFull}</Text>}
-                <Text>
-                  <Flex align="center" gap="1">
-                    <img
-                      style={{ width: '1em', height: '1em' }}
-                      alt={tank.nation}
-                      src={asset(`flags/circle/${tank.nation}.webp`)}
-                    />
-                    {
-                      strings.common.nations[
-                        tank.nation as keyof typeof strings.common.nations
-                      ]
-                    }
-                  </Flex>
-                </Text>
-                <Text>{tank.tier}</Text>
-                <Text>
-                  <Flex align="center" gap="1">
-                    <ClassIcon width="1em" height="1em" />
-                    {strings.common.tank_class_short[tank.class]}
-                  </Flex>
-                </Text>
-                <Text
-                  color={
-                    tank.treeType === 'collector'
-                      ? 'blue'
-                      : tank.treeType === 'premium'
-                        ? 'amber'
-                        : undefined
-                  }
-                >
-                  {strings.common.tree_type[tank.treeType]}
-                </Text>
-                {developerMode && <Code color="gray">{tank.id}</Code>}
-              </Flex>
-            </Flex>
-          </Flex>
-
-          <Flex direction="column" gap="2">
-            <Heading>Economics</Heading>
-
-            <Flex gap="6">
-              <Flex direction="column">
-                <Text color="gray">
-                  {tank.price.type === 'credits' ? 'Purchase' : 'Restoration'}{' '}
-                  price
-                </Text>
-                <Text color="gray">Sale price</Text>
-                {tank.xp && <Text color="gray">Research XP</Text>}
-              </Flex>
-
-              <Flex direction="column" align="end">
-                <Flex align="center" gap="2">
-                  <Text>{tank.price.value.toLocaleString()}</Text>
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    alt={tank.price.type}
-                    src={asset(
-                      `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
-                    )}
-                  />
-                </Flex>
-
-                <Flex align="center" gap="2">
-                  <Text>{(tank.price.value / 2).toLocaleString()}</Text>
-                  <img
-                    style={{ width: '1em', height: '1em' }}
-                    alt={tank.price.type}
-                    src={asset(
-                      `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
-                    )}
-                  />
-                </Flex>
-
-                {tank.xp && (
-                  <Flex align="center" gap="2">
-                    <Text>{tank.xp.toLocaleString()}</Text>
-                    <img
-                      style={{ width: '1em', height: '1em' }}
-                      alt="xp"
-                      src={asset('icons/currencies/xp.webp')}
-                    />
-                  </Flex>
-                )}
-              </Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-}
diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection/components/Listing.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection/components/Listing.tsx
new file mode 100644
index 000000000..688dc1cd4
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Model/MetaSection/components/Listing.tsx
@@ -0,0 +1,14 @@
+import { Flex, Text, TextProps } from '@radix-ui/themes';
+
+type ListingProps = TextProps & {
+  label: string;
+};
+
+export function Listing({ label, ...props }: ListingProps) {
+  return (
+    <Flex justify="between" gap="4">
+      <Text color="gray">{label}</Text>
+      <Text {...props} />
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Model/MetaSection/index.tsx b/src/app/tools/tankopedia/[id]/components/Model/MetaSection/index.tsx
new file mode 100644
index 000000000..25bc5d4a1
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Model/MetaSection/index.tsx
@@ -0,0 +1,127 @@
+import { Code, Flex, Heading } from '@radix-ui/themes';
+import { classIcons } from '../../../../../../../components/ClassIcon';
+import { asset } from '../../../../../../../core/blitzkit/asset';
+import { tankIcon } from '../../../../../../../core/blitzkit/tankIcon';
+import strings from '../../../../../../../lang/en-US.json';
+import * as App from '../../../../../../../stores/app';
+import * as Duel from '../../../../../../../stores/duel';
+import { Listing } from './components/Listing';
+
+export function MetaSection() {
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const ClassIcon = classIcons[tank.class];
+
+  return (
+    <Flex justify="center" align="center" py="8" px="4">
+      <Flex
+        align="center"
+        justify="center"
+        gap="8"
+        direction={{ initial: 'column', sm: 'row' }}
+      >
+        <img alt="Economics" src={tankIcon(tank.id)} />
+
+        <Flex
+          gap="6"
+          justify="center"
+          direction={{ initial: 'column', sm: 'row' }}
+        >
+          <Flex direction="column" minWidth="12rem">
+            <Heading mb="2" align={{ initial: 'center', sm: 'left' }}>
+              Overview
+            </Heading>
+
+            <Listing label="Name">{tank.name}</Listing>
+            {tank.nameFull && (
+              <Listing label="Full-name">{tank.nameFull}</Listing>
+            )}
+            <Listing label="Nation">
+              <Flex align="center" gap="1">
+                <img
+                  style={{ width: '1em', height: '1em' }}
+                  alt={tank.nation}
+                  src={asset(`flags/circle/${tank.nation}.webp`)}
+                />
+                {
+                  strings.common.nations[
+                    tank.nation as keyof typeof strings.common.nations
+                  ]
+                }
+              </Flex>
+            </Listing>
+            <Listing label="Tier">{tank.tier}</Listing>
+            <Listing label="Class">
+              <Flex align="center" gap="1">
+                <ClassIcon width="1em" height="1em" />
+                {strings.common.tank_class_short[tank.class]}
+              </Flex>
+            </Listing>
+            <Listing
+              label="Type"
+              color={
+                tank.treeType === 'collector'
+                  ? 'blue'
+                  : tank.treeType === 'premium'
+                    ? 'amber'
+                    : undefined
+              }
+            >
+              {strings.common.tree_type[tank.treeType]}
+            </Listing>
+            {developerMode && (
+              <Listing label="DEV: ID">
+                <Code>{tank.id}</Code>
+              </Listing>
+            )}
+          </Flex>
+
+          <Flex direction="column" minWidth="12rem">
+            <Heading mb="2" align={{ initial: 'center', sm: 'left' }}>
+              Economics
+            </Heading>
+
+            <Listing
+              label={`${tank.price.type === 'credits' ? 'Purchase' : 'Restoration'} price`}
+            >
+              <Flex align="center" gap="1">
+                {tank.price.value.toLocaleString()}
+                <img
+                  style={{ width: '1em', height: '1em' }}
+                  alt={tank.price.type}
+                  src={asset(
+                    `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+                  )}
+                />
+              </Flex>
+            </Listing>
+            <Listing label="Sale price">
+              <Flex align="center" gap="1">
+                {(tank.price.value / 2).toLocaleString()}
+                <img
+                  style={{ width: '1em', height: '1em' }}
+                  alt={tank.price.type}
+                  src={asset(
+                    `icons/currencies/${tank.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+                  )}
+                />
+              </Flex>
+            </Listing>
+            {tank.xp && (
+              <Listing label="Research XP">
+                <Flex align="center" gap="1">
+                  {tank.xp.toLocaleString()}
+                  <img
+                    style={{ width: '1em', height: '1em' }}
+                    alt="xp"
+                    src={asset('icons/currencies/xp.webp')}
+                  />
+                </Flex>
+              </Listing>
+            )}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}