diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 8ccbe5487..07204b42a 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -759,11 +759,13 @@
         "count_singular": "1 tank",
         "count_plural": "{count} tanks",
         "sorting_by": "Sorting by {name}",
+
         "no_tanks_found": {
           "body": "No tanks found.",
           "search_again": "Try searching again.",
           "clear_filters": "Try clearing filters."
         },
+
         "sort": {
           "meta.none": "none",
           "survivability.health": "health",
diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx
index 68ae1e60f..bd3c86e5e 100644
--- a/packages/website/src/components/TankSearch/components/FilterControl.tsx
+++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx
@@ -1,38 +1,24 @@
 import {
   asset,
+  GunDefinition,
   ShellType,
   TANK_CLASSES,
+  TANK_TYPES,
   TankType,
   TIER_ROMAN_NUMERALS,
 } from "@blitzkit/core";
-import { LockClosedIcon, LockOpen2Icon } from "@radix-ui/react-icons";
-import {
-  Box,
-  Flex,
-  IconButton,
-  Inset,
-  Link,
-  Popover,
-  Text,
-  Tooltip,
-  type ButtonProps,
-  type FlexProps,
-} from "@radix-ui/themes";
-import { isEqual, times } from "lodash-es";
+import { TrashIcon } from "@radix-ui/react-icons";
+import { Box, Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import type { ComponentProps, ReactNode } from "react";
 import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions";
-import { Var } from "../../../core/radix/var";
 import { useLocale } from "../../../hooks/useLocale";
-import { App } from "../../../stores/app";
-import { TankFilters } from "../../../stores/tankFilters";
-import { TankSort } from "../../../stores/tankopediaSort";
+import { TankFilters, type CaseType } from "../../../stores/tankFilters";
 import { classIcons } from "../../ClassIcon";
 import { GunAutoloaderIcon } from "../../GunAutoloaderIcon";
 import { GunAutoreloaderIcon } from "../../GunAutoreloaderIcon";
 import { GunRegularIcon } from "../../GunRegularIcon";
-import { MissingShellIcon } from "../../MissingShellIcon";
 import { ResearchedIcon } from "../../ResearchedIcon";
-import { ScienceIcon } from "../../ScienceIcon";
-import { ScienceOffIcon } from "../../ScienceOffIcon";
 
 const gameDefinitions = await awaitableGameDefinitions;
 
@@ -43,583 +29,452 @@ const shellTypeIcons: Record<ShellType, string> = {
   [ShellType.HEAT]: "hc",
 };
 
-const size: ButtonProps["size"] = { initial: "1", xs: "2" };
+const GUN_TYPE_ICONS: Record<
+  CaseType<GunDefinition>,
+  (props: ComponentProps<"svg">) => ReactNode
+> = {
+  regular: GunRegularIcon,
+  auto_loader: GunAutoloaderIcon,
+  auto_reloader: GunAutoreloaderIcon,
+};
 
-function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
-  const shells = TankFilters.use((state) => state.shells);
+const TANK_TYPE_COLORS: Record<TankType, string> = {
+  [TankType.RESEARCHABLE]: "gray",
+  [TankType.PREMIUM]: "amber",
+  [TankType.COLLECTOR]: "blue",
+};
 
-  return (
-    <Popover.Root>
-      <Popover.Trigger>
-        <IconButton
-          size={size}
-          variant="soft"
-          radius="none"
-          color="gray"
-          highContrast
-        >
-          {shells[index] === null && (
-            <Text color="gray" style={{ display: "contents" }}>
-              <MissingShellIcon width="1em" height="1em" />
-            </Text>
-          )}
-          {shells[index] !== null && (
-            <img
-              style={{ width: "1em", height: "1em" }}
-              src={asset(
-                `icons/shells/${shellTypeIcons[shells[index]]}${
-                  premium ? "_premium" : ""
-                }.webp`
-              )}
-            />
-          )}
-        </IconButton>
-      </Popover.Trigger>
+const GUN_TYPES = Object.keys(
+  GUN_TYPE_ICONS
+) as (keyof typeof GUN_TYPE_ICONS)[];
 
-      <Popover.Content>
-        <Inset>
-          <Flex>
-            {Object.values(ShellType).map((shellType) => {
-              if (typeof shellType === "string") return null;
+const MAX_TIERS = 4;
 
-              const selected = shells[index] === shellType;
-
-              return (
-                <IconButton
-                  size={size}
-                  key={shellType}
-                  value={`${shellType}`}
-                  radius="none"
-                  variant={selected ? "solid" : "soft"}
-                  onClick={() => {
-                    const mutated = [...shells] as TankFilters["shells"];
-
-                    mutated[index] = selected ? null : shellType;
-
-                    TankFilters.mutate((draft) => {
-                      draft.shells = mutated;
-                    });
-                  }}
-                  highContrast={selected}
-                  color={selected ? undefined : "gray"}
-                >
-                  <img
-                    src={asset(
-                      `icons/shells/${shellTypeIcons[shellType]}${
-                        premium ? "_premium" : ""
-                      }.webp`
-                    )}
-                    style={{ width: "1em", height: "1em" }}
-                  />
-                </IconButton>
-              );
-            })}
-          </Flex>
-        </Inset>
-      </Popover.Content>
-    </Popover.Root>
-  );
-}
-
-function OwnershipFilter(props: FlexProps) {
-  const tankFilters = TankFilters.use();
-  const wargaming = App.use((state) => state.logins.wargaming);
-
-  return (
-    <Flex
-      overflow="hidden"
-      style={{ borderRadius: "var(--radius-full)" }}
-      direction="column"
-      {...props}
-    >
-      <IconButton
-        size={size}
-        disabled={!wargaming}
-        variant={tankFilters.showOwned ? "solid" : "soft"}
-        radius="none"
-        color={tankFilters.showOwned ? undefined : "gray"}
-        highContrast
-        onClick={() => {
-          TankFilters.mutate((draft) => {
-            draft.showOwned = !draft.showOwned;
-          });
-        }}
-      >
-        <LockOpen2Icon />
-      </IconButton>
-
-      <IconButton
-        size={size}
-        disabled={!wargaming}
-        variant={tankFilters.showUnowned ? "solid" : "soft"}
-        radius="none"
-        color={tankFilters.showUnowned ? undefined : "gray"}
-        highContrast
-        onClick={() => {
-          TankFilters.mutate((draft) => {
-            draft.showUnowned = !draft.showUnowned;
-          });
-        }}
-      >
-        <LockClosedIcon />
-      </IconButton>
-    </Flex>
-  );
-}
+const TIERS = times(10, (i) => 10 - i);
 
 export function FilterControl() {
-  const tankFilters = TankFilters.use();
-  const { strings } = useLocale();
-  const clearable = !isEqual(tankFilters, TankFilters.initial);
-  const wargaming = App.use((state) => state.logins.wargaming);
-
   return (
-    <Flex direction="column" align="center">
-      <Flex height="fit-content" gap="1" align="start" justify="center">
-        <Flex
-          flexShrink="0"
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-4)" }}
-        >
-          <Flex direction="column">
-            {times(5, (index) => {
-              const tier = index + 1;
-              const selected = tankFilters.tiers?.includes(tier);
-
-              return (
-                <IconButton
-                  size={size}
-                  key={tier}
-                  variant={selected ? "solid" : "soft"}
-                  radius="none"
-                  color={selected ? undefined : "gray"}
-                  highContrast
-                  onClick={() => {
-                    if (tankFilters.tiers.includes(tier)) {
-                      TankFilters.mutate((draft) => {
-                        draft.tiers = draft.tiers.filter((t) => t !== tier);
-                      });
-                    } else {
-                      TankFilters.mutate((draft) => {
-                        draft.tiers = [...draft.tiers, tier];
-                      });
-                    }
-                  }}
-                >
-                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
-                </IconButton>
-              );
-            })}
-          </Flex>
-
-          <Box
-            display={{ initial: "none", md: "block" }}
-            style={{
-              height: Var("space-1"),
-              backgroundColor: Var("gray-a3"),
-            }}
-          />
-
-          <Flex direction="column">
-            {times(5, (index) => {
-              const tier = index + 6;
-              const selected = tankFilters.tiers?.includes(tier);
-
-              return (
-                <IconButton
-                  size={size}
-                  key={tier}
-                  variant={selected ? "solid" : "soft"}
-                  radius="none"
-                  color={selected ? undefined : "gray"}
-                  highContrast
-                  onClick={() => {
-                    if (tankFilters.tiers.includes(tier)) {
-                      TankFilters.mutate((draft) => {
-                        draft.tiers = draft.tiers.filter((t) => t !== tier);
-                      });
-                    } else {
-                      TankFilters.mutate((draft) => {
-                        draft.tiers = [...draft.tiers, tier];
-                      });
-                    }
-                  }}
-                >
-                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
-                </IconButton>
-              );
-            })}
-          </Flex>
-        </Flex>
-
-        <Flex
-          flexShrink="0"
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-4)" }}
-        >
-          <Flex direction="column">
-            {gameDefinitions.nations
-              .slice(0, Math.ceil(gameDefinitions.nations.length / 2))
-              .map((nation) => {
-                const selected = tankFilters.nations?.includes(nation);
-
-                return (
-                  <IconButton
-                    size={size}
-                    key={nation}
-                    variant={selected ? "solid" : "soft"}
-                    color={selected ? undefined : "gray"}
-                    highContrast
-                    radius="none"
-                    onClick={() => {
-                      TankFilters.mutate((draft) => {
-                        if (tankFilters.nations.includes(nation)) {
-                          draft.nations = draft.nations.filter(
-                            (n) => n !== nation
-                          );
-                        } else {
-                          draft.nations = [...draft.nations, nation];
-                        }
-                      });
-                    }}
-                  >
-                    <img
-                      style={{ width: "1em", height: "1em" }}
-                      src={asset(`flags/circle/${nation}.webp`)}
-                    />
-                  </IconButton>
-                );
-              })}
-          </Flex>
-
-          <Box
-            display={{ initial: "none", md: "block" }}
-            style={{
-              height: Var("space-1"),
-              backgroundColor: Var("gray-a3"),
-            }}
-          />
-
-          <Flex direction="column">
-            {gameDefinitions.nations
-              .slice(Math.ceil(gameDefinitions.nations.length / 2))
-              .map((nation) => {
-                const selected = tankFilters.nations?.includes(nation);
-
-                return (
-                  <IconButton
-                    size={size}
-                    key={nation}
-                    style={{ flex: 1 }}
-                    variant={selected ? "solid" : "soft"}
-                    color={selected ? undefined : "gray"}
-                    highContrast
-                    radius="none"
-                    onClick={() => {
-                      TankFilters.mutate((draft) => {
-                        if (tankFilters.nations.includes(nation)) {
-                          draft.nations = draft.nations.filter(
-                            (n) => n !== nation
-                          );
-                        } else {
-                          draft.nations = [...draft.nations, nation];
-                        }
-                      });
-                    }}
-                  >
-                    <img
-                      style={{ width: "1em", height: "1em" }}
-                      src={asset(`flags/circle/${nation}.webp`)}
-                    />
-                  </IconButton>
-                );
-              })}
-          </Flex>
-        </Flex>
-
-        <Flex
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-full)" }}
-          direction="column"
-        >
-          {TANK_CLASSES.map((tankClass) => {
-            const Icon = classIcons[tankClass];
-            const selected = tankFilters.classes?.includes(tankClass);
-
-            return (
-              <IconButton
-                size={size}
-                key={tankClass}
-                variant={selected ? "solid" : "soft"}
-                radius="none"
-                color={selected ? undefined : "gray"}
-                highContrast
-                onClick={() => {
-                  TankFilters.mutate((draft) => {
-                    if (tankFilters.classes.includes(tankClass)) {
-                      draft.classes = draft.classes.filter(
-                        (c) => c !== tankClass
-                      );
-                    } else {
-                      draft.classes = [...draft.classes, tankClass];
-                    }
-                  });
-                }}
-              >
-                <Icon style={{ width: "1em", height: "1em" }} />
-              </IconButton>
-            );
-          })}
-        </Flex>
-
-        <Flex
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-full)" }}
-          direction="column"
-        >
-          <IconButton
-            size={size}
-            variant={tankFilters.gunType.includes("regular") ? "solid" : "soft"}
-            radius="none"
-            color={tankFilters.gunType.includes("regular") ? undefined : "gray"}
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.gunType.includes("regular")) {
-                  draft.gunType = draft.gunType.filter((t) => t !== "regular");
-                } else {
-                  draft.gunType = [...draft.gunType, "regular"];
-                }
-              });
-            }}
-          >
-            <GunRegularIcon style={{ width: "1em", height: "1em" }} />
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={
-              tankFilters.gunType.includes("auto_loader") ? "solid" : "soft"
-            }
-            radius="none"
-            color={
-              tankFilters.gunType.includes("auto_loader") ? undefined : "gray"
-            }
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.gunType.includes("auto_loader")) {
-                  draft.gunType = draft.gunType.filter(
-                    (t) => t !== "auto_loader"
-                  );
-                } else {
-                  draft.gunType = [...draft.gunType, "auto_loader"];
-                }
-              });
-            }}
-          >
-            <GunAutoloaderIcon style={{ width: "1em", height: "1em" }} />
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={
-              tankFilters.gunType.includes("auto_reloader") ? "solid" : "soft"
-            }
-            radius="none"
-            color={
-              tankFilters.gunType.includes("auto_reloader") ? undefined : "gray"
-            }
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.gunType.includes("auto_reloader")) {
-                  draft.gunType = draft.gunType.filter(
-                    (t) => t !== "auto_reloader"
-                  );
-                } else {
-                  draft.gunType = [...draft.gunType, "auto_reloader"];
-                }
-              });
-            }}
-          >
-            <GunAutoreloaderIcon style={{ width: "1em", height: "1em" }} />
-          </IconButton>
-        </Flex>
-
-        <Flex
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-full)" }}
-          direction="column"
-        >
-          <ShellFilter index={0} />
-          <ShellFilter index={1} premium />
-          <ShellFilter index={2} />
-        </Flex>
-
-        <Flex
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-full)" }}
-          direction="column"
-        >
-          <IconButton
-            size={size}
-            variant={
-              tankFilters.types?.includes(TankType.RESEARCHABLE)
-                ? "solid"
-                : "soft"
-            }
-            radius="none"
-            color={
-              tankFilters.types?.includes(TankType.RESEARCHABLE)
-                ? undefined
-                : "gray"
-            }
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
-                  draft.types = draft.types.filter(
-                    (t) => t !== TankType.RESEARCHABLE
-                  );
-                } else {
-                  draft.types = [...draft.types, TankType.RESEARCHABLE];
-                }
-              });
-            }}
-          >
-            <ResearchedIcon style={{ width: "1em", height: "1em" }} />
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={
-              tankFilters.types?.includes(TankType.PREMIUM) ? "solid" : "soft"
-            }
-            radius="none"
-            color={
-              tankFilters.types?.includes(TankType.PREMIUM) ? "amber" : "gray"
-            }
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.types.includes(TankType.PREMIUM)) {
-                  draft.types = draft.types.filter(
-                    (t) => t !== TankType.PREMIUM
-                  );
-                } else {
-                  draft.types = [...draft.types, TankType.PREMIUM];
-                }
-              });
-            }}
-          >
-            <Text
-              color={
-                tankFilters.types?.includes(TankType.PREMIUM)
-                  ? undefined
-                  : "amber"
-              }
-              style={{ display: "flex", justifyContent: "center" }}
-            >
-              <ResearchedIcon style={{ width: "1em", height: "1em" }} />
-            </Text>
-          </IconButton>
-          <IconButton
-            size={size}
-            variant={
-              tankFilters.types?.includes(TankType.COLLECTOR) ? "solid" : "soft"
-            }
-            radius="none"
-            color={
-              tankFilters.types?.includes(TankType.COLLECTOR) ? "blue" : "gray"
-            }
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                if (tankFilters.types.includes(TankType.COLLECTOR)) {
-                  draft.types = draft.types.filter(
-                    (t) => t !== TankType.COLLECTOR
-                  );
-                } else {
-                  draft.types = [...draft.types, TankType.COLLECTOR];
-                }
-              });
-            }}
-          >
-            <Text
-              color={
-                tankFilters.types?.includes(TankType.COLLECTOR)
-                  ? undefined
-                  : "blue"
-              }
-              style={{ display: "flex", justifyContent: "center" }}
-            >
-              <ResearchedIcon style={{ width: "1em", height: "1em" }} />
-            </Text>
-          </IconButton>
-        </Flex>
-
-        <Flex
-          overflow="hidden"
-          style={{ borderRadius: "var(--radius-full)" }}
-          direction="column"
-        >
-          <IconButton
-            size={size}
-            variant={tankFilters.showNonTesting ? "solid" : "soft"}
-            radius="none"
-            color={tankFilters.showNonTesting ? undefined : "gray"}
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                draft.showNonTesting = !draft.showNonTesting;
-              });
-            }}
-          >
-            <ScienceOffIcon
-              style={{ width: "1em", height: "1em", color: "currentColor" }}
-            />
-          </IconButton>
-
-          <IconButton
-            size={size}
-            variant={tankFilters.showTesting ? "solid" : "soft"}
-            radius="none"
-            color={tankFilters.showTesting ? undefined : "gray"}
-            highContrast
-            onClick={() => {
-              TankFilters.mutate((draft) => {
-                draft.showTesting = !draft.showTesting;
-              });
-            }}
-          >
-            <ScienceIcon
-              style={{ width: "1em", height: "1em", color: "currentColor" }}
-            />
-          </IconButton>
-        </Flex>
-
-        {wargaming ? (
-          <OwnershipFilter />
-        ) : (
-          <Tooltip content={strings.website.common.tank_search.login}>
-            <OwnershipFilter />
-          </Tooltip>
-        )}
-      </Flex>
-
-      {clearable && (
-        <Link
-          color="red"
-          underline="always"
-          mt="4"
-          href="#"
-          onClick={(event) => {
-            event.preventDefault();
-            TankFilters.set(TankFilters.initial);
-            TankSort.set(TankSort.initial);
-          }}
-        >
-          {strings.website.common.tank_search.clear_filters}
-        </Link>
-      )}
+    <Flex align="center" gap="2" wrap="wrap">
+      <TiersFilter />
+      <NationsFilter />
+      <TypeFilter />
+      <ClassFilter />
+      <GunTypeFilter />
     </Flex>
   );
 }
+
+function TiersFilter() {
+  const tiersRaw = TankFilters.use((state) => state.tiers);
+  const tiers = tiersRaw.length === 0 ? TIERS : tiersRaw;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="surface">
+          <Flex gap="1">
+            {tiers.slice(0, MAX_TIERS).map((tier) => (
+              <Text size="1" key={tier}>
+                {TIER_ROMAN_NUMERALS[tier]}
+              </Text>
+            ))}
+
+            {tiers.length > MAX_TIERS && (
+              <Text size="1">+{tiers.length - MAX_TIERS}</Text>
+            )}
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        {TIERS.map((tier) => {
+          const selected = tiersRaw.includes(tier);
+
+          return (
+            <DropdownMenu.CheckboxItem
+              onClick={(event) => {
+                event.preventDefault();
+
+                TankFilters.mutate((draft) => {
+                  if (selected) {
+                    draft.tiers = draft.tiers.filter((t) => t !== tier);
+                  } else {
+                    draft.tiers = [...draft.tiers, tier].sort((a, b) => b - a);
+                  }
+                });
+              }}
+              checked={selected}
+              key={tier}
+            >
+              Tier {TIER_ROMAN_NUMERALS[tier]}
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Item
+          color="red"
+          onClick={(event) => {
+            event.preventDefault();
+
+            TankFilters.mutate((draft) => {
+              draft.tiers = [];
+            });
+          }}
+        >
+          <TrashIcon />
+          Clear
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+function NationsFilter() {
+  const rawNations = TankFilters.use((state) => state.nations);
+  const nations =
+    rawNations.length === 0 ? gameDefinitions.nations : rawNations;
+  const { strings } = useLocale();
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="surface">
+          <Flex>
+            {nations.map((nation, index) => (
+              <img
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                }}
+                src={asset(`flags/circle/${nation}.webp`)}
+              />
+            ))}
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        {gameDefinitions.nations.map((nation) => {
+          const selected = rawNations.includes(nation);
+
+          return (
+            <DropdownMenu.CheckboxItem
+              onClick={(event) => {
+                event.preventDefault();
+
+                TankFilters.mutate((draft) => {
+                  if (selected) {
+                    draft.nations = draft.nations.filter((n) => n !== nation);
+                  } else {
+                    draft.nations = [...draft.nations, nation];
+                  }
+                });
+              }}
+              checked={selected}
+              key={nation}
+              style={{
+                position: "relative",
+              }}
+            >
+              <Box
+                width="calc(100% + calc(4 * var(--space-2)))"
+                height="100%"
+                position="absolute"
+                right="0"
+                mr="-2"
+                style={{
+                  backgroundImage: `url(${asset(
+                    `flags/scratched/${nation}.webp`
+                  )})`,
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "5rem center",
+                }}
+              >
+                <Box
+                  width="100%"
+                  height="100%"
+                  style={{
+                    background: `linear-gradient(90deg, var(--gray-2) 50%, transparent)`,
+                  }}
+                />
+              </Box>
+
+              <Text style={{ zIndex: 1 }}>
+                {
+                  strings.common.nations[
+                    nation as keyof typeof strings.common.nations
+                  ]
+                }
+              </Text>
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Item
+          color="red"
+          onClick={(event) => {
+            event.preventDefault();
+
+            TankFilters.mutate((draft) => {
+              draft.nations = [];
+            });
+          }}
+        >
+          <TrashIcon />
+          Clear
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+function ClassFilter() {
+  const { strings } = useLocale();
+  const rawClasses = TankFilters.use((state) => state.classes);
+  const classes = rawClasses.length === 0 ? TANK_CLASSES : rawClasses;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="surface">
+          <Flex>
+            {classes.map((tankClass, index) => {
+              const Icon = classIcons[tankClass];
+              return (
+                <Icon
+                  style={{
+                    color: "var(--gray-12)",
+                    opacity: 1,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    marginLeft: index > 0 ? "-0.5em" : undefined,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                  key={tankClass}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        {TANK_CLASSES.map((tankClass) => {
+          const selected = rawClasses.includes(tankClass);
+          const Icon = classIcons[tankClass];
+
+          return (
+            <DropdownMenu.CheckboxItem
+              onClick={(event) => {
+                event.preventDefault();
+
+                TankFilters.mutate((draft) => {
+                  if (selected) {
+                    draft.classes = draft.classes.filter(
+                      (c) => c !== tankClass
+                    );
+                  } else {
+                    draft.classes = [...draft.classes, tankClass];
+                  }
+                });
+              }}
+              checked={selected}
+              key={tankClass}
+            >
+              <Icon style={{ width: "1em", height: "1em" }} />
+
+              {strings.common.tank_class_medium[tankClass]}
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Item
+          color="red"
+          onClick={(event) => {
+            event.preventDefault();
+
+            TankFilters.mutate((draft) => {
+              draft.classes = [];
+            });
+          }}
+        >
+          <TrashIcon />
+          Clear
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+function GunTypeFilter() {
+  const rawGunTypes = TankFilters.use((state) => state.gunType);
+  const gunTypes = rawGunTypes.length === 0 ? GUN_TYPES : rawGunTypes;
+  const { strings } = useLocale();
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="surface">
+          <Flex>
+            {gunTypes.map((gunType) => {
+              const Icon = GUN_TYPE_ICONS[gunType];
+
+              return (
+                <Icon
+                  style={{
+                    margin: gunType === "regular" ? "0 -0.125em" : undefined,
+                    opacity: 1,
+                    color: "var(--gray-12)",
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                  key={gunType}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        {GUN_TYPES.map((gunType) => {
+          const selected = rawGunTypes.includes(gunType);
+          const Icon = GUN_TYPE_ICONS[gunType];
+
+          return (
+            <DropdownMenu.CheckboxItem
+              onClick={(event) => {
+                event.preventDefault();
+
+                TankFilters.mutate((draft) => {
+                  if (selected) {
+                    draft.gunType = draft.gunType.filter((c) => c !== gunType);
+                  } else {
+                    draft.gunType = [...draft.gunType, gunType];
+                  }
+                });
+              }}
+              checked={selected}
+              key={gunType}
+            >
+              <Icon style={{ width: "1em", height: "1em" }} />
+
+              {strings.common.gun_types[gunType]}
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Item
+          color="red"
+          onClick={(event) => {
+            event.preventDefault();
+
+            TankFilters.mutate((draft) => {
+              draft.gunType = [];
+            });
+          }}
+        >
+          <TrashIcon />
+          Clear
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
+
+function TypeFilter() {
+  const { strings } = useLocale();
+  const rawTypes = TankFilters.use((state) => state.types);
+  const types = rawTypes.length === 0 ? TANK_TYPES : rawTypes;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button color="gray" variant="surface">
+          <Flex gap="1">
+            {types.map((tankType, index) => {
+              return (
+                <ResearchedIcon
+                  style={{
+                    color: `var(--${TANK_TYPE_COLORS[tankType]}-${
+                      tankType === TankType.RESEARCHABLE ? "12" : "11"
+                    })`,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    opacity: 1,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                  key={tankType}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        {TANK_TYPES.map((tankType) => {
+          const selected = rawTypes.includes(tankType);
+
+          return (
+            <DropdownMenu.CheckboxItem
+              onClick={(event) => {
+                event.preventDefault();
+
+                TankFilters.mutate((draft) => {
+                  if (selected) {
+                    draft.types = draft.types.filter((c) => c !== tankType);
+                  } else {
+                    draft.types = [...draft.types, tankType];
+                  }
+                });
+              }}
+              checked={selected}
+              key={tankType}
+            >
+              <ResearchedIcon
+                style={{
+                  color: `var(--${TANK_TYPE_COLORS[tankType]}-${
+                    tankType === TankType.RESEARCHABLE ? "12" : "11"
+                  })`,
+                  opacity: 1,
+                  width: "1em",
+                  height: "1em",
+                }}
+              />
+
+              {strings.common.tree_type[tankType]}
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Item
+          color="red"
+          onClick={(event) => {
+            event.preventDefault();
+
+            TankFilters.mutate((draft) => {
+              draft.types = [];
+            });
+          }}
+        >
+          <TrashIcon />
+          Clear
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}
diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx
index 581833c1c..4008e0366 100644
--- a/packages/website/src/components/TankSearch/index.tsx
+++ b/packages/website/src/components/TankSearch/index.tsx
@@ -429,7 +429,7 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <Flex direction="column" gap="4" flexGrow="1" {...props}>
+      <Flex direction="column" gap="2" flexGrow="1" {...props}>
         <SearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
diff --git a/packages/website/src/core/blitzkit/filterTank.ts b/packages/website/src/core/blitzkit/filterTank.ts
index 029505948..46d744c60 100644
--- a/packages/website/src/core/blitzkit/filterTank.ts
+++ b/packages/website/src/core/blitzkit/filterTank.ts
@@ -1,9 +1,13 @@
 import type { TankDefinition } from "@blitzkit/core";
+import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
 import { times } from "lodash-es";
+import { awaitableConsumableDefinitions } from "../../core/awaitables/consumableDefinitions";
 import type { TankFilters } from "../../stores/tankFilters";
 
 const SHELLS = times(3, (index) => index);
 
+const consumableDefinitions = await awaitableConsumableDefinitions;
+
 export async function filterTank(
   filters: TankFilters,
   tank: TankDefinition,
@@ -40,6 +44,18 @@ export async function filterTank(
             gun.shells[index].type === filters.shells[index]
         )
       )
-    )
+    ) &&
+    (filters.consumables.length === 0 ||
+      filters.consumables.every((consumableId) =>
+        tank.turrets.some((turret) =>
+          turret.guns.some((gun) =>
+            checkConsumableProvisionInclusivity(
+              consumableDefinitions.consumables[consumableId],
+              tank,
+              gun
+            )
+          )
+        )
+      ))
   );
 }
diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts
index 68999b562..d758d29a5 100644
--- a/packages/website/src/stores/tankFilters.ts
+++ b/packages/website/src/stores/tankFilters.ts
@@ -21,6 +21,7 @@ export interface TankFilters {
   searching: boolean;
   gunType: CaseType<GunDefinition>[];
   shells: [ShellType | null, ShellType | null, ShellType | null];
+  consumables: number[];
 
   showTesting: boolean;
   showNonTesting: boolean;
@@ -37,6 +38,7 @@ export const TankFilters = new Varuna<TankFilters>({
   searching: false,
   gunType: [],
   shells: [null, null, null],
+  consumables: [],
 
   showTesting: true,
   showNonTesting: true,