diff --git a/src/app/tools/tank-performance/components/Header.tsx b/src/app/tools/tank-performance/components/Header.tsx
index 6e3c7aac3..f285e1578 100644
--- a/src/app/tools/tank-performance/components/Header.tsx
+++ b/src/app/tools/tank-performance/components/Header.tsx
@@ -31,6 +31,7 @@ export function Header() {
             >
               <Flex align="center" gap="1">
                 <IconButton
+                  size={isSelected ? '1' : '2'}
                   variant={isSelected ? 'soft' : 'ghost'}
                   color={isSelected ? undefined : 'gray'}
                   highContrast={!isSelected}
diff --git a/src/app/tools/tankopedia/components/NoResults.tsx b/src/app/tools/tankopedia/components/NoResults.tsx
index c4385aaf5..5592c33a4 100644
--- a/src/app/tools/tankopedia/components/NoResults.tsx
+++ b/src/app/tools/tankopedia/components/NoResults.tsx
@@ -1,11 +1,13 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
-import { useTankFilters } from '../../../../stores/tankFilters';
+import { useTankFiltersContext } from '../../../../stores/tankFilters';
 
 interface NoResultsProps {
   type?: 'filters' | 'search';
 }
 
 export function NoResults({ type = 'filters' }: NoResultsProps) {
+  const tankFiltersContext = useTankFiltersContext();
+
   return (
     <Flex flexGrow="1" align="center" justify="center">
       <Text color="gray">
@@ -15,7 +17,10 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
           underline="always"
           color="red"
           onClick={() =>
-            useTankFilters.setState(useTankFilters.getInitialState(), true)
+            tankFiltersContext.setState(
+              tankFiltersContext.getInitialState(),
+              true,
+            )
           }
         >
           {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
diff --git a/src/app/tools/tankopedia/components/SearchBar.tsx b/src/app/tools/tankopedia/components/SearchBar.tsx
index f86a5ae92..54c9915d1 100644
--- a/src/app/tools/tankopedia/components/SearchBar.tsx
+++ b/src/app/tools/tankopedia/components/SearchBar.tsx
@@ -4,7 +4,10 @@ import { debounce } from 'lodash';
 import { useRouter } from 'next/navigation';
 import { KeyboardEventHandler, useCallback, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import { useTankFilters } from '../../../../stores/tankFilters';
+import {
+  useTankFilters,
+  useTankFiltersContext,
+} from '../../../../stores/tankFilters';
 import { QuickLink } from './QuickLink';
 import { Sort } from './Sort';
 
@@ -14,26 +17,27 @@ interface SearchBarProps {
 }
 
 export function SearchBar({ topResult, onSelect }: SearchBarProps) {
+  const tankFiltersContext = useTankFiltersContext();
   const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
   const searching = useTankFilters((state) => state.searching);
   const performSearch = useCallback(
     debounce(() => {
-      useTankFilters.setState({ searching: false });
+      tankFiltersContext.setState({ searching: false });
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      useTankFilters.setState({
+      tankFiltersContext.setState({
         search: sanitized.length === 0 ? undefined : sanitized,
       });
     }, 500),
     [],
   );
   const handleChange = useCallback(() => {
-    if (!useTankFilters.getState().searching) {
-      useTankFilters.setState({ searching: true });
+    if (!tankFiltersContext.getState().searching) {
+      tankFiltersContext.setState({ searching: true });
     }
 
     performSearch();