diff --git a/package.json b/package.json
index 618462289..8b05832cd 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@prisma/client": "^5.4.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.1",
+    "@radix-ui/themes": "^3.0.1",
     "@react-three/drei": "^9.93.0",
     "@react-three/fiber": "^8.15.14",
     "@resvg/resvg-js": "^2.4.1",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9b9ed47c1..b59ceaab7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,11 +15,10 @@ export default function Page() {
 
   return (
     <PageWrapper>
-      <TextField.Root>
+      <TextField.Root placeholder="Search tools...">
         <TextField.Slot>
           <MagnifyingGlassIcon height="16" width="16" />
         </TextField.Slot>
-        <TextField.Input ref={input} placeholder="Search tools..." />
       </TextField.Root>
 
       <Flex gap="3" wrap="wrap" align="center" justify="center">
diff --git a/src/app/tools/rating/components/PageTurner/index.tsx b/src/app/tools/rating/components/PageTurner/index.tsx
index ecda55b86..7b3877baa 100644
--- a/src/app/tools/rating/components/PageTurner/index.tsx
+++ b/src/app/tools/rating/components/PageTurner/index.tsx
@@ -53,29 +53,26 @@ export function PageTurner({
             <CaretLeftIcon />
           )}
         </Button>
-        <TextField.Root>
+
+        <TextField.Root
+          type="number"
+          ref={pageInput}
+          style={{ textAlign: 'center' }}
+          min={1}
+          max={pages}
+          onBlur={(event) => {
+            onPageChange(
+              Math.max(0, Math.min(pages - 1, event.target.valueAsNumber - 1)),
+              false,
+            );
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              (event.target as HTMLInputElement).blur();
+            }
+          }}
+        >
           <TextField.Slot>Page</TextField.Slot>
-          <TextField.Input
-            type="number"
-            ref={pageInput}
-            style={{ width: 64, textAlign: 'center' }}
-            min={1}
-            max={pages}
-            onBlur={(event) => {
-              onPageChange(
-                Math.max(
-                  0,
-                  Math.min(pages - 1, event.target.valueAsNumber - 1),
-                ),
-                false,
-              );
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                (event.target as HTMLInputElement).blur();
-              }
-            }}
-          />
           <TextField.Slot>out of {pages}</TextField.Slot>
         </TextField.Root>
         <Button
diff --git a/src/app/tools/rating/page.tsx b/src/app/tools/rating/page.tsx
index 5fd68784b..14d47255d 100644
--- a/src/app/tools/rating/page.tsx
+++ b/src/app/tools/rating/page.tsx
@@ -605,7 +605,7 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" justify="center">
-                <TextField.Input
+                <TextField.Root
                   ref={scoreInput}
                   type="number"
                   placeholder="Type a score..."
@@ -638,7 +638,7 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" justify="center">
-                <TextField.Input
+                <TextField.Root
                   ref={positionInput}
                   type="number"
                   placeholder="Type a position..."
@@ -759,105 +759,100 @@ export default function Page() {
 
             <Dialog.Content>
               <Flex gap="4" direction="column">
-                <TextField.Root>
+                <TextField.Root
+                  onChange={debounce(
+                    async (event: ChangeEvent<HTMLInputElement>) => {
+                      const trimmedSearch = event.target.value.trim();
+                      const encodedSearch = encodeURIComponent(trimmedSearch);
+
+                      if (trimmedSearch) {
+                        if (season === 0) {
+                          setSearchLoading(true);
+
+                          const accountList = await searchCurrentRatingPlayers(
+                            region,
+                            trimmedSearch,
+                          );
+                          const values = Object.values(accountList).filter(
+                            (searchedPlayer) => !searchedPlayer.skip,
+                          );
+                          const valuesWithTypes =
+                            values as ((typeof values)[number] & {
+                              skip: false;
+                            })[];
+
+                          useLeaderboardCache.setState(
+                            produce((draft: LeaderboardCache) => {
+                              if (draft) {
+                                values.forEach((player) => {
+                                  const playerWithTypes =
+                                    player as typeof player & { skip: false };
+
+                                  draft[region][season][
+                                    playerWithTypes.number - 1
+                                  ] = playerWithTypes.spa_id;
+                                });
+                              }
+                            }),
+                          );
+                          useNameCache.setState(
+                            produce((draft: typeof names) => {
+                              valuesWithTypes.forEach((searchedPlayer) => {
+                                if (searchedPlayer.nickname) {
+                                  draft[region][searchedPlayer.spa_id] = {
+                                    nickname: searchedPlayer.nickname,
+                                    clan: searchedPlayer.clan_tag,
+                                  };
+                                }
+                              });
+                            }),
+                          );
+                          setSearchResults(
+                            valuesWithTypes.map((searchedPlayer) => ({
+                              account_id: searchedPlayer.spa_id,
+                              nickname: searchedPlayer.nickname,
+                              number: searchedPlayer.number,
+                            })),
+                          );
+                          setSearchLoading(false);
+                        } else {
+                          setSearchLoading(true);
+                          const accountList = await fetchBlitz<AccountList>(
+                            `https://api.wotblitz.${region}/wotb/account/list/?application_id=${WARGAMING_APPLICATION_ID}&search=${encodedSearch}`,
+                          );
+                          const playerKeys = Object.keys(
+                            leaderboard[region][season],
+                          );
+
+                          setSearchResults(
+                            accountList
+                              .map((searchedPlayer) => ({
+                                ...searchedPlayer,
+                                number: parseInt(
+                                  playerKeys.find(
+                                    (indexAsString) =>
+                                      leaderboard[region][season][
+                                        parseInt(indexAsString)
+                                      ] === searchedPlayer.account_id,
+                                  )!,
+                                ),
+                              }))
+                              .filter((player) => !Number.isNaN(player.number)),
+                          );
+
+                          setSearchLoading(false);
+                        }
+                      } else {
+                        setSearchResults(undefined);
+                      }
+                    },
+                    500,
+                  )}
+                  placeholder="Search for player..."
+                >
                   <TextField.Slot>
                     <MagnifyingGlassIcon height="16" width="16" />
                   </TextField.Slot>
-
-                  <TextField.Input
-                    onChange={debounce(
-                      async (event: ChangeEvent<HTMLInputElement>) => {
-                        const trimmedSearch = event.target.value.trim();
-                        const encodedSearch = encodeURIComponent(trimmedSearch);
-
-                        if (trimmedSearch) {
-                          if (season === 0) {
-                            setSearchLoading(true);
-
-                            const accountList =
-                              await searchCurrentRatingPlayers(
-                                region,
-                                trimmedSearch,
-                              );
-                            const values = Object.values(accountList).filter(
-                              (searchedPlayer) => !searchedPlayer.skip,
-                            );
-                            const valuesWithTypes =
-                              values as ((typeof values)[number] & {
-                                skip: false;
-                              })[];
-
-                            useLeaderboardCache.setState(
-                              produce((draft: LeaderboardCache) => {
-                                if (draft) {
-                                  values.forEach((player) => {
-                                    const playerWithTypes =
-                                      player as typeof player & { skip: false };
-
-                                    draft[region][season][
-                                      playerWithTypes.number - 1
-                                    ] = playerWithTypes.spa_id;
-                                  });
-                                }
-                              }),
-                            );
-                            useNameCache.setState(
-                              produce((draft: typeof names) => {
-                                valuesWithTypes.forEach((searchedPlayer) => {
-                                  if (searchedPlayer.nickname) {
-                                    draft[region][searchedPlayer.spa_id] = {
-                                      nickname: searchedPlayer.nickname,
-                                      clan: searchedPlayer.clan_tag,
-                                    };
-                                  }
-                                });
-                              }),
-                            );
-                            setSearchResults(
-                              valuesWithTypes.map((searchedPlayer) => ({
-                                account_id: searchedPlayer.spa_id,
-                                nickname: searchedPlayer.nickname,
-                                number: searchedPlayer.number,
-                              })),
-                            );
-                            setSearchLoading(false);
-                          } else {
-                            setSearchLoading(true);
-                            const accountList = await fetchBlitz<AccountList>(
-                              `https://api.wotblitz.${region}/wotb/account/list/?application_id=${WARGAMING_APPLICATION_ID}&search=${encodedSearch}`,
-                            );
-                            const playerKeys = Object.keys(
-                              leaderboard[region][season],
-                            );
-
-                            setSearchResults(
-                              accountList
-                                .map((searchedPlayer) => ({
-                                  ...searchedPlayer,
-                                  number: parseInt(
-                                    playerKeys.find(
-                                      (indexAsString) =>
-                                        leaderboard[region][season][
-                                          parseInt(indexAsString)
-                                        ] === searchedPlayer.account_id,
-                                    )!,
-                                  ),
-                                }))
-                                .filter(
-                                  (player) => !Number.isNaN(player.number),
-                                ),
-                            );
-
-                            setSearchLoading(false);
-                          }
-                        } else {
-                          setSearchResults(undefined);
-                        }
-                      },
-                      500,
-                    )}
-                    placeholder="Search for player..."
-                  />
                 </TextField.Root>
 
                 <Flex direction="column" gap="2">
diff --git a/src/app/tools/session/components/Menu.tsx b/src/app/tools/session/components/Menu.tsx
index ed26bd10b..2197d75a3 100644
--- a/src/app/tools/session/components/Menu.tsx
+++ b/src/app/tools/session/components/Menu.tsx
@@ -37,19 +37,18 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
             <Heading size="4">Edit title</Heading>
 
             <Flex gap="2" style={{ width: '100%' }}>
-              <TextField.Root style={{ flex: 1 }}>
-                <TextField.Input
-                  ref={titleInput}
-                  defaultValue={session.title}
-                  placeholder="Enter title..."
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter' && titleInput.current) {
-                      setShowTitleEditor(false);
-                      useSession.setState({ title: titleInput.current!.value });
-                    }
-                  }}
-                />
-              </TextField.Root>
+              <TextField.Root
+                style={{ flex: 1 }}
+                ref={titleInput}
+                defaultValue={session.title}
+                placeholder="Enter title..."
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && titleInput.current) {
+                    setShowTitleEditor(false);
+                    useSession.setState({ title: titleInput.current!.value });
+                  }
+                }}
+              />
 
               <Dialog.Close>
                 <Button
diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx
index 10123cb34..f46a18fa3 100644
--- a/src/app/tools/session/page.tsx
+++ b/src/app/tools/session/page.tsx
@@ -56,38 +56,36 @@ export default function Page() {
     <PageWrapper color="blue">
       <div className={styles.toolBar}>
         <div style={{ flex: 1, boxSizing: 'border-box', position: 'relative' }}>
-          <TextField.Root>
+          <TextField.Root
+            defaultValue={session.isTracking ? session.nickname : undefined}
+            ref={input}
+            onChange={(event) => {
+              event.stopPropagation();
+
+              if (event.target.value) {
+                setShowSearchResults(true);
+                setSearchResults(undefined);
+              } else {
+                setShowSearchResults(false);
+              }
+
+              handleChange(event);
+            }}
+            onBlur={(event) => {
+              // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 (https://github.com/radix-ui/primitives/issues/1969) is fixed
+              if (showSearchResults) event.target.focus();
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                setShowSearchResults(false);
+                input.current?.blur();
+              }
+            }}
+            placeholder="Search for a player..."
+          >
             <TextField.Slot>
               <PersonIcon height="16" width="16" />
             </TextField.Slot>
-
-            <TextField.Input
-              defaultValue={session.isTracking ? session.nickname : undefined}
-              ref={input}
-              onChange={(event) => {
-                event.stopPropagation();
-
-                if (event.target.value) {
-                  setShowSearchResults(true);
-                  setSearchResults(undefined);
-                } else {
-                  setShowSearchResults(false);
-                }
-
-                handleChange(event);
-              }}
-              onBlur={(event) => {
-                // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 is fixed
-                if (showSearchResults) event.target.focus();
-              }}
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  setShowSearchResults(false);
-                  input.current?.blur();
-                }
-              }}
-              placeholder="Search for a player..."
-            />
           </TextField.Root>
 
           <DropdownMenu.Root open={showSearchResults} modal={false}>
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx
index 39e86d24e..eb7f655ae 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx
@@ -89,34 +89,33 @@ export function Miscellaneous() {
             justify="end"
             style={{ width: 180 }}
           >
-            <TextField.Root>
+            <TextField.Root
+              ref={crewInput}
+              defaultValue={Math.round(crewMastery * 100)}
+              style={{ textAlign: 'right' }}
+              onBlur={() => {
+                const newValue = Number(crewInput.current!.value) / 100;
+
+                if (isNaN(newValue)) {
+                  crewInput.current!.value = `${Math.round(crewMastery * 100)}`;
+                  return;
+                }
+
+                mutateDuel((draft) => {
+                  draft.protagonist!.crewMastery = clamp(
+                    newValue / 100,
+                    0.5,
+                    1,
+                  );
+                });
+              }}
+              onKeyUp={(event) => {
+                if (event.key === 'Enter') {
+                  crewInput.current?.blur();
+                }
+              }}
+            >
               <TextField.Slot>Crew</TextField.Slot>
-              <TextField.Input
-                ref={crewInput}
-                defaultValue={Math.round(crewMastery * 100)}
-                style={{ textAlign: 'right' }}
-                onBlur={() => {
-                  const newValue = Number(crewInput.current!.value) / 100;
-
-                  if (isNaN(newValue)) {
-                    crewInput.current!.value = `${Math.round(crewMastery * 100)}`;
-                    return;
-                  }
-
-                  mutateDuel((draft) => {
-                    draft.protagonist!.crewMastery = clamp(
-                      newValue / 100,
-                      0.5,
-                      1,
-                    );
-                  });
-                }}
-                onKeyUp={(event) => {
-                  if (event.key === 'Enter') {
-                    crewInput.current?.blur();
-                  }
-                }}
-              />
               <TextField.Slot>%</TextField.Slot>
             </TextField.Root>
 
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index aec6f2741..c60ff229a 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -418,25 +418,25 @@ export function Characteristics() {
                   setPenetrationDistance(value);
                 }, 500)}
               />
-              <TextField.Root style={{ width: 64 }}>
-                <TextField.Input
-                  ref={penetrationDistanceInput}
-                  defaultValue={penetrationDistance}
-                  onBlur={() => {
-                    setPenetrationDistance(
-                      Math.min(
-                        parseInt(penetrationDistanceInput.current!.value),
-                        500,
-                      ),
-                    );
-                  }}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
-                      event.currentTarget.blur();
-                    }
-                  }}
-                />
-                <TextField.Slot>m</TextField.Slot>
+              <TextField.Root
+                style={{ width: 64 }}
+                ref={penetrationDistanceInput}
+                defaultValue={penetrationDistance}
+                onBlur={() => {
+                  setPenetrationDistance(
+                    Math.min(
+                      parseInt(penetrationDistanceInput.current!.value),
+                      500,
+                    ),
+                  );
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.currentTarget.blur();
+                  }
+                }}
+              >
+                <TextField.Slot side="right">m</TextField.Slot>
               </TextField.Root>
             </Flex>
           </>
diff --git a/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx b/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx
index 3e70986fc..d0adb06ed 100644
--- a/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx
@@ -54,7 +54,32 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
         <TextField.Root
           style={{
             flex: 1,
+            textAlign: 'right',
           }}
+          onBlur={() => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              protagonist.pitch,
+              degToRad(Number(turretYawInput.current!.value)),
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+            mutateDuel((state) => {
+              state.protagonist!.pitch = pitch;
+              state.protagonist!.yaw = yaw;
+            });
+            turretYawInput.current!.value = radToDeg(protagonist.yaw).toFixed(
+              1,
+            );
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              turretYawInput.current?.blur();
+            }
+          }}
+          onFocus={() => turretYawInput.current?.focus()}
+          ref={turretYawInput}
         >
           <TextField.Slot
             style={{
@@ -63,40 +88,38 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
           >
             Yaw
           </TextField.Slot>
-          <TextField.Input
-            onBlur={() => {
-              const [pitch, yaw] = applyPitchYawLimits(
-                protagonist.pitch,
-                degToRad(Number(turretYawInput.current!.value)),
-                gunModelDefinition.pitch,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-              );
-              modelTransformEvent.emit({ pitch, yaw });
-              mutateDuel((state) => {
-                state.protagonist!.pitch = pitch;
-                state.protagonist!.yaw = yaw;
-              });
-              turretYawInput.current!.value = radToDeg(protagonist.yaw).toFixed(
-                1,
-              );
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                turretYawInput.current?.blur();
-              }
-            }}
-            onFocus={() => turretYawInput.current?.focus()}
-            ref={turretYawInput}
-            style={{ textAlign: 'right' }}
-          />
           <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
         </TextField.Root>
 
         <TextField.Root
           style={{
             flex: 1,
+            textAlign: 'right',
           }}
+          onBlur={() => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              degToRad(-Number(gunPitchInput.current!.value) + initialGunPitch),
+              protagonist.yaw,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+            mutateDuel((state) => {
+              state.protagonist!.pitch = pitch;
+              state.protagonist!.yaw = yaw;
+            });
+            gunPitchInput.current!.value = (
+              -radToDeg(protagonist.pitch) + initialGunPitch
+            ).toFixed(1);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              gunPitchInput.current?.blur();
+            }
+          }}
+          onFocus={() => gunPitchInput.current?.focus()}
+          ref={gunPitchInput}
         >
           <TextField.Slot
             style={{
@@ -105,35 +128,6 @@ export function RotationInputs({ isFullScreen }: RotationInputsProps) {
           >
             Pitch
           </TextField.Slot>
-          <TextField.Input
-            onBlur={() => {
-              const [pitch, yaw] = applyPitchYawLimits(
-                degToRad(
-                  -Number(gunPitchInput.current!.value) + initialGunPitch,
-                ),
-                protagonist.yaw,
-                gunModelDefinition.pitch,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-              );
-              modelTransformEvent.emit({ pitch, yaw });
-              mutateDuel((state) => {
-                state.protagonist!.pitch = pitch;
-                state.protagonist!.yaw = yaw;
-              });
-              gunPitchInput.current!.value = (
-                -radToDeg(protagonist.pitch) + initialGunPitch
-              ).toFixed(1);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                gunPitchInput.current?.blur();
-              }
-            }}
-            onFocus={() => gunPitchInput.current?.focus()}
-            ref={gunPitchInput}
-            style={{ textAlign: 'right' }}
-          />
           <TextField.Slot
             style={{
               userSelect: 'none',
diff --git a/src/app/tools/tankopedia/components/PageTurner.tsx b/src/app/tools/tankopedia/components/PageTurner.tsx
index 131a6b423..652b6c3ba 100644
--- a/src/app/tools/tankopedia/components/PageTurner.tsx
+++ b/src/app/tools/tankopedia/components/PageTurner.tsx
@@ -32,32 +32,31 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
       >
         <CaretLeftIcon />
       </Button>
-      <TextField.Root>
+      <TextField.Root
+        defaultValue={1}
+        type="number"
+        ref={pageInput}
+        min={1}
+        max={Math.floor(searchedList.length / tanksPerPage) + 1}
+        style={{ textAlign: 'center' }}
+        onBlur={(event) => {
+          mutateTankopediaPersistent((draft) => {
+            draft.filters.page = Math.max(
+              0,
+              Math.min(
+                Math.floor(searchedList.length / tanksPerPage),
+                event.target.valueAsNumber - 1,
+              ),
+            );
+          });
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            (event.target as HTMLInputElement).blur();
+          }
+        }}
+      >
         <TextField.Slot>Page</TextField.Slot>
-        <TextField.Input
-          defaultValue={1}
-          type="number"
-          ref={pageInput}
-          min={1}
-          max={Math.floor(searchedList.length / tanksPerPage) + 1}
-          style={{ width: 64, textAlign: 'center' }}
-          onBlur={(event) => {
-            mutateTankopediaPersistent((draft) => {
-              draft.filters.page = Math.max(
-                0,
-                Math.min(
-                  Math.floor(searchedList.length / tanksPerPage),
-                  event.target.valueAsNumber - 1,
-                ),
-              );
-            });
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              (event.target as HTMLInputElement).blur();
-            }
-          }}
-        />
         <TextField.Slot>
           out of {Math.floor(searchedList.length / tanksPerPage) + 1}
         </TextField.Slot>
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 449565947..baed0fa35 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -392,27 +392,26 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
     <>
       <Flex direction="column" gap="4">
         <Flex gap="2">
-          <TextField.Root style={{ flex: 1 }}>
+          <TextField.Root
+            style={{ flex: 1 }}
+            ref={input}
+            placeholder="Search tanks..."
+            onChange={(event) => {
+              const results = go(event.target.value, searchableTanks, {
+                keys: [
+                  'name',
+                  'nameFull',
+                  'id',
+                ] satisfies (keyof TankDefinition)[],
+                all: true,
+              }).map(({ obj }) => obj);
+
+              setSearchedList(results);
+            }}
+          >
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
             </TextField.Slot>
-
-            <TextField.Input
-              ref={input}
-              placeholder="Search tanks..."
-              onChange={(event) => {
-                const results = go(event.target.value, searchableTanks, {
-                  keys: [
-                    'name',
-                    'nameFull',
-                    'id',
-                  ] satisfies (keyof TankDefinition)[],
-                  all: true,
-                }).map(({ obj }) => obj);
-
-                setSearchedList(results);
-              }}
-            />
           </TextField.Root>
 
           <DropdownMenu.Root>
@@ -779,12 +778,12 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
                 flex: 1,
                 cursor: 'pointer',
                 height: 64,
+                minWidth: 256,
               }}
             >
               <Inset
                 key={tank.id}
                 style={{
-                  minWidth: 256,
                   minHeight: 64,
                   position: 'relative',
                   display: 'flex',
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index c4c5c47de..7248a26db 100644
--- a/src/components/PageWrapper.tsx
+++ b/src/components/PageWrapper.tsx
@@ -1,10 +1,10 @@
-import { Flex, Theme } from '@radix-ui/themes';
+import { Flex, FlexProps, Theme } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 
-interface PageWrapperProps extends ComponentProps<typeof Flex> {
+type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
   size?: number;
-}
+};
 
 export default function PageWrapper({
   style,
diff --git a/yarn.lock b/yarn.lock
index 7702a9bf4..59a1ff1d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1259,7 +1259,7 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
-"@radix-ui/react-compose-refs@1.0.1":
+"@radix-ui/react-compose-refs@1.0.1", "@radix-ui/react-compose-refs@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
   integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
@@ -1279,7 +1279,7 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
-"@radix-ui/react-context@1.0.1":
+"@radix-ui/react-context@1.0.1", "@radix-ui/react-context@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
   integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
@@ -1432,6 +1432,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-navigation-menu@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz#654151310c3f9a29afd19fb60ddc7977e54b8a3d"
+  integrity sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/react-popover@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
@@ -1488,7 +1509,7 @@
     "@radix-ui/react-compose-refs" "1.0.1"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/react-primitive@1.0.3":
+"@radix-ui/react-primitive@1.0.3", "@radix-ui/react-primitive@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
   integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
@@ -1496,6 +1517,15 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-progress@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.0.3.tgz#8380272fdc64f15cbf263a294dea70a7d5d9b4fa"
+  integrity sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-radio-group@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz#3197f5dcce143bcbf961471bf89320735c0212d3"
@@ -1513,7 +1543,7 @@
     "@radix-ui/react-use-previous" "1.0.1"
     "@radix-ui/react-use-size" "1.0.1"
 
-"@radix-ui/react-roving-focus@1.0.4":
+"@radix-ui/react-roving-focus@1.0.4", "@radix-ui/react-roving-focus@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
   integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
@@ -1573,14 +1603,6 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
-"@radix-ui/react-separator@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
-  integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.3"
-
 "@radix-ui/react-slider@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
@@ -1636,6 +1658,30 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-toggle-group@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"
+  integrity sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-toggle" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-toggle@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz#aecb2945630d1dc5c512997556c57aba894e539e"
+  integrity sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-tooltip@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
@@ -1662,7 +1708,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-use-controllable-state@1.0.1":
+"@radix-ui/react-use-controllable-state@1.0.1", "@radix-ui/react-use-controllable-state@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
   integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
@@ -1723,10 +1769,10 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/themes@^2.0.1":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-2.0.3.tgz#c9e8f4029d73769f356dbe29c97ce3cbade601a8"
-  integrity sha512-yaXQ8aWT2P1CQ0Xe6YCRD9HXsfMTvKkrIYkrc4aitCzhGTLS0sjtTqKmrxIWMVA+3DIbEuG9K/8aAMRJBhep8g==
+"@radix-ui/themes@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-3.0.1.tgz#24b685166109f93bd2212ea6bc5114b9c0d943df"
+  integrity sha512-w0+2XqaifspZlds2ealxgVU2xtZlJ0gSTgHuLd56ectYxnC4hkg/PEOP5kPHOpCQ+vtV9+LI+Cy4RWipGgg3aQ==
   dependencies:
     "@radix-ui/colors" "^3.0.0"
     "@radix-ui/primitive" "^1.0.1"
@@ -1735,26 +1781,34 @@
     "@radix-ui/react-aspect-ratio" "^1.0.3"
     "@radix-ui/react-avatar" "^1.0.4"
     "@radix-ui/react-checkbox" "^1.0.4"
+    "@radix-ui/react-compose-refs" "^1.0.1"
+    "@radix-ui/react-context" "^1.0.1"
     "@radix-ui/react-context-menu" "^2.1.5"
     "@radix-ui/react-dialog" "^1.0.5"
     "@radix-ui/react-direction" "^1.0.1"
     "@radix-ui/react-dropdown-menu" "^2.0.6"
     "@radix-ui/react-form" "^0.0.3"
     "@radix-ui/react-hover-card" "^1.0.7"
+    "@radix-ui/react-navigation-menu" "^1.1.4"
     "@radix-ui/react-popover" "^1.0.7"
     "@radix-ui/react-portal" "^1.0.4"
+    "@radix-ui/react-primitive" "^1.0.3"
+    "@radix-ui/react-progress" "^1.0.3"
     "@radix-ui/react-radio-group" "^1.1.3"
+    "@radix-ui/react-roving-focus" "^1.0.4"
     "@radix-ui/react-scroll-area" "^1.0.5"
     "@radix-ui/react-select" "^2.0.0"
-    "@radix-ui/react-separator" "^1.0.3"
     "@radix-ui/react-slider" "^1.1.2"
     "@radix-ui/react-slot" "^1.0.2"
     "@radix-ui/react-switch" "^1.0.3"
     "@radix-ui/react-tabs" "^1.0.4"
+    "@radix-ui/react-toggle-group" "^1.0.4"
     "@radix-ui/react-tooltip" "^1.0.7"
     "@radix-ui/react-use-callback-ref" "^1.0.1"
+    "@radix-ui/react-use-controllable-state" "^1.0.1"
     "@radix-ui/react-visually-hidden" "^1.0.3"
     classnames "^2.3.2"
+    react-remove-scroll-bar "2.3.4"
 
 "@react-spring/animated@~9.6.1":
   version "9.6.1"
@@ -4813,6 +4867,14 @@ react-reconciler@^0.27.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
+react-remove-scroll-bar@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz#cd2543b3ed7716c7c5b446342d21b0e0b303f47c"