diff --git a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
index 8f82fac94..ba181b169 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
@@ -1,9 +1,18 @@
-import { ChevronRightIcon } from '@radix-ui/react-icons';
-import { Box, ChevronDownIcon, Flex, Heading, Text } from '@radix-ui/themes';
+import { CaretRightIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import {
+  ChevronDownIcon,
+  Flex,
+  Heading,
+  ScrollArea,
+  Text,
+} from '@radix-ui/themes';
 import Link from 'next/link';
-import { ComponentProps, use } from 'react';
+import { ComponentProps, use, useMemo } from 'react';
 import { asset } from '../../../../../../core/blitzkit/asset';
-import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
+import {
+  TankDefinition,
+  tankDefinitions,
+} from '../../../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { formatCompact } from '../../../../../../core/math/formatCompact';
 import * as Duel from '../../../../../../stores/duel';
@@ -49,158 +58,147 @@ export function TreeArrow({
   );
 }
 
-export function TechTreeSection() {
+function Card({ id }: { id: number }) {
   const awaitedTankDefinitions = use(tankDefinitions);
-  const tank = Duel.use((state) => state.protagonist.tank);
+  const ancestor = awaitedTankDefinitions[id];
 
-  if (tank.treeType !== 'researchable') return null;
+  return (
+    <Link
+      href={`/tools/tankopedia/${id}`}
+      key={id}
+      style={{
+        textDecoration: 'none',
+        color: 'inherit',
+        position: 'relative',
+      }}
+    >
+      <Flex direction="column" align="center">
+        <img
+          alt={ancestor.name}
+          src={asset(`icons/tanks/big/${id}.webp`)}
+          width={64}
+          height={64}
+          style={{
+            objectFit: 'contain',
+          }}
+        />
 
-  function Card({ id }: { id: number }) {
-    const ancestor = awaitedTankDefinitions[id];
-
-    return (
-      <Link
-        href={`/tools/tankopedia/${id}`}
-        key={id}
-        style={{
-          textDecoration: 'none',
-          color: 'inherit',
-          position: 'relative',
-        }}
-      >
         <Flex direction="column" align="center">
-          <img
-            alt={ancestor.name}
-            src={asset(`icons/tanks/big/${id}.webp`)}
-            width={64}
-            height={64}
-            style={{
-              objectFit: 'contain',
-            }}
-          />
+          <Flex gap="2" align="center">
+            <Text color="gray" size="1">
+              {TIER_ROMAN_NUMERALS[ancestor.tier]}
+            </Text>
+            <Text wrap="nowrap">{ancestor.name}</Text>
+          </Flex>
 
-          <Flex direction="column" align="center">
-            <Flex gap="2" align="center">
-              <Text color="gray" size="1">
-                {TIER_ROMAN_NUMERALS[ancestor.tier]}
+          <Flex gap="2" align="center">
+            <Flex gap="1" align="center">
+              <img
+                alt="XP"
+                src={asset('icons/currencies/xp.webp')}
+                width={16}
+                height={16}
+                style={{
+                  objectFit: 'contain',
+                }}
+              />
+              <Text color="gray" size="1" wrap="nowrap">
+                {ancestor.xp === undefined ? 0 : formatCompact(ancestor.xp!)}
               </Text>
-              <Text>{ancestor.name}</Text>
             </Flex>
 
-            <Flex gap="2" align="center">
-              <Flex gap="1" align="center">
-                <img
-                  alt="XP"
-                  src={asset('icons/currencies/xp.webp')}
-                  width={16}
-                  height={16}
-                  style={{
-                    objectFit: 'contain',
-                  }}
-                />
-                <Text color="gray" size="1">
-                  {formatCompact(ancestor.xp!)}
-                </Text>
-              </Flex>
-
-              <Flex gap="1" align="center">
-                <img
-                  alt="Silver"
-                  src={asset('icons/currencies/silver.webp')}
-                  width={16}
-                  height={16}
-                  style={{
-                    objectFit: 'contain',
-                  }}
-                />
-                <Text color="gray" size="1">
-                  {formatCompact(ancestor.price.value)}
-                </Text>
-              </Flex>
+            <Flex gap="1" align="center">
+              <img
+                alt="Silver"
+                src={asset('icons/currencies/silver.webp')}
+                width={16}
+                height={16}
+                style={{
+                  objectFit: 'contain',
+                }}
+              />
+              <Text color="gray" size="1" wrap="nowrap">
+                {formatCompact(ancestor.price.value)}
+              </Text>
             </Flex>
           </Flex>
         </Flex>
-      </Link>
-    );
+      </Flex>
+    </Link>
+  );
+}
+
+export function TechTreeSection() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const awaitedTankDefinitions = use(tankDefinitions);
+
+  if (
+    tank.treeType !== 'researchable' ||
+    tank.ancestors === undefined ||
+    tank.ancestors.length === 0
+  ) {
+    return null;
   }
 
+  const ancestors = useMemo(() => {
+    const treeBackwards: number[] = [];
+    let ancestor: TankDefinition | undefined = tank;
+
+    while (ancestor !== undefined) {
+      if (ancestor.ancestors === undefined || ancestor.ancestors.length === 0) {
+        ancestor = undefined;
+        break;
+      } else if (ancestor.ancestors.length === 1) {
+        ancestor = awaitedTankDefinitions[ancestor.ancestors[0]];
+      } else {
+        let bestAncestor = awaitedTankDefinitions[ancestor.ancestors[0]];
+
+        ancestor.ancestors.forEach((thisAncestorId) => {
+          const possibleAncestor = awaitedTankDefinitions[thisAncestorId];
+
+          if (possibleAncestor.xp! < bestAncestor.xp!) {
+            bestAncestor = possibleAncestor;
+          }
+        });
+
+        ancestor = bestAncestor as TankDefinition;
+      }
+
+      treeBackwards.push(ancestor.id);
+    }
+
+    return treeBackwards.reverse();
+  }, []);
+
+  console.log(ancestors);
+
   return (
     <Flex
       my="6"
-      p="5"
+      py="6"
+      direction="column"
+      align="center"
+      gap="4"
       style={{
-        overflow: 'hidden',
         backgroundColor: 'var(--color-surface)',
       }}
-      align="center"
-      direction="column"
-      position="relative"
     >
-      <img
-        src={asset(`flags/scratched/${tank.nation}.webp`)}
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-40%, -50%)',
-          filter: 'blur(2px)',
-          opacity: 0.25,
-        }}
-      />
+      <Heading size="6">Tech tree</Heading>
 
-      <Heading mb="4">Tech tree</Heading>
-
-      <Flex align="center" gap="6" direction={{ initial: 'column', sm: 'row' }}>
-        {tank.ancestors && (
-          <>
-            <Flex
-              wrap="wrap"
-              direction={{ initial: 'row', sm: 'column' }}
-              maxHeight={{ initial: 'unset', sm: '320px' }}
-              align="center"
-              justify="center"
-              gap="6"
-            >
-              {tank.ancestors.map((id) => (
-                <Card key={id} id={id} />
-              ))}
-            </Flex>
-
-            <Box display={{ initial: 'block', sm: 'none' }}>
-              <TreeArrow down />
-            </Box>
-            <Box display={{ initial: 'none', sm: 'block' }}>
-              <TreeArrow />
-            </Box>
-          </>
-        )}
-
-        <Card id={tank.id} />
-
-        {tank.successors && (
-          <>
-            <Box display={{ initial: 'block', sm: 'none' }}>
-              <TreeArrow down />
-            </Box>
-            <Box display={{ initial: 'none', sm: 'block' }}>
-              <TreeArrow />
-            </Box>
-
-            <Flex
-              wrap="wrap"
-              direction={{ initial: 'row', sm: 'column' }}
-              maxHeight={{ initial: 'unset', sm: '320px' }}
-              align="center"
-              justify="center"
-              gap="6"
-            >
-              {tank.successors.map((id) => (
-                <Card key={id} id={id} />
-              ))}
-            </Flex>
-          </>
-        )}
-      </Flex>
+      <ScrollArea>
+        <Flex align="center" gap="4" justify="center" p="4">
+          {ancestors.map((id, index) => (
+            <>
+              {index > 0 && (
+                <Text color="gray">
+                  <CaretRightIcon />
+                </Text>
+              )}
+              <Card key={id} id={id} />
+            </>
+          ))}
+        </Flex>
+      </ScrollArea>
     </Flex>
   );
 }