diff --git a/src/app/tools/tankopedia/components/Sort.tsx b/src/app/tools/tankopedia/components/Sort.tsx
index 7486beba6..daa45dad3 100644
--- a/src/app/tools/tankopedia/components/Sort.tsx
+++ b/src/app/tools/tankopedia/components/Sort.tsx
@@ -1,13 +1,11 @@
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu } from '@radix-ui/themes';
 import { TankopediaSortDirection } from '../../../../stores/tankopedia';
-import {
-  mutateTankopediaSort,
-  useTankopediaSort,
-} from '../../../../stores/tankopediaSort';
+import * as TankopediaSort from '../../../../stores/tankopediaSort';
 
 export function Sort() {
-  const sort = useTankopediaSort();
+  const sort = TankopediaSort.use();
+  const mutateTankopediaSort = TankopediaSort.useMutation();
 
   return (
     <DropdownMenu.Root modal={false}>
diff --git a/src/app/tools/tankopedia/components/TankCard.tsx b/src/app/tools/tankopedia/components/TankCard.tsx
index 9fb1082ad..b2f5a58c4 100644
--- a/src/app/tools/tankopedia/components/TankCard.tsx
+++ b/src/app/tools/tankopedia/components/TankCard.tsx
@@ -12,7 +12,7 @@ import { resolveReload } from '../../../../core/blitzkit/resolveReload';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
 import { tankIcon } from '../../../../core/blitzkit/tankIcon';
 import { unionBoundingBox } from '../../../../core/blitzkit/unionBoundingBox';
-import { useTankopediaSort } from '../../../../stores/tankopediaSort';
+import * as TankopediaSort from '../../../../stores/tankopediaSort';
 import * as styles from './TankCard.css';
 
 interface TankCardProps {
@@ -23,7 +23,7 @@ interface TankCardProps {
 export function TankCard({ tank, onSelect }: TankCardProps) {
   const awaitedModelDefinitions = use(modelDefinitions);
   const Icon = classIcons[tank.class];
-  const sortBy = useTankopediaSort((state) => state.by);
+  const sortBy = TankopediaSort.use((state) => state.by);
   const discriminator = useMemo(() => {
     if (sortBy.startsWith('meta')) return undefined;
 
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 1106f8f92..36d8f4a96 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -22,7 +22,7 @@ import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox'
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
 import * as TankFilters from '../../../../../stores/tankFilters';
 import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
-import { useTankopediaSort } from '../../../../../stores/tankopediaSort';
+import * as TankopediaSort from '../../../../../stores/tankopediaSort';
 import { FilterControl } from '../FilterControl';
 import { NoResults } from '../NoResults';
 import { SearchBar } from '../SearchBar';
@@ -46,7 +46,7 @@ export const TankSearch = memo<TankSearchProps>(
     const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
     const awaitedTankNames = use(tankNames);
     const filters = TankFilters.use();
-    const sort = useTankopediaSort();
+    const sort = TankopediaSort.use();
     const tanks = useMemo(() => {
       if (filters.search === undefined) {
         const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
diff --git a/src/app/tools/tankopedia/components/TierFilter.tsx b/src/app/tools/tankopedia/components/TierFilter.tsx
index 9a9ff062a..e4592e4f0 100644
--- a/src/app/tools/tankopedia/components/TierFilter.tsx
+++ b/src/app/tools/tankopedia/components/TierFilter.tsx
@@ -4,11 +4,11 @@ import { memo } from 'react';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import * as TankFilters from '../../../../stores/tankFilters';
-import { useTankopediaSort } from '../../../../stores/tankopediaSort';
+import * as TankopediaSort from '../../../../stores/tankopediaSort';
 
 export const TierFilter = memo(() => {
   const tierFilter = TankFilters.use((state) => state.tiers);
-  const sort = useTankopediaSort();
+  const sort = TankopediaSort.use();
   const search = TankFilters.use((state) => state.search);
   const mutateTankFilters = TankFilters.useMutation();
 
diff --git a/src/app/tools/tankopedia/layout.tsx b/src/app/tools/tankopedia/layout.tsx
new file mode 100644
index 000000000..b15897aad
--- /dev/null
+++ b/src/app/tools/tankopedia/layout.tsx
@@ -0,0 +1,5 @@
+import * as TankopediaSort from '../../../stores/tankopediaSort';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <TankopediaSort.Provider>{children}</TankopediaSort.Provider>;
+}
diff --git a/src/stores/tankopediaSort.ts b/src/stores/tankopediaSort.ts
index b7005e02b..578f2df11 100644
--- a/src/stores/tankopediaSort.ts
+++ b/src/stores/tankopediaSort.ts
@@ -1,5 +1,6 @@
-import { produce } from 'immer';
-import { create } from 'zustand';
+'use client';
+
+import { createNextSafeStore } from '../core/zustand/createNextSafeStore';
 import { TankopediaSortBy, TankopediaSortDirection } from './tankopedia';
 
 export interface TankopediaSort {
@@ -7,11 +8,8 @@ export interface TankopediaSort {
   direction: TankopediaSortDirection;
 }
 
-export const useTankopediaSort = create<TankopediaSort>()(() => ({
-  by: 'meta.none',
-  direction: 'descending',
-}));
-
-export function mutateTankopediaSort(recipe: (draft: TankopediaSort) => void) {
-  useTankopediaSort.setState(produce(recipe));
-}
+export const { Provider, use, useMutation, useStore } =
+  createNextSafeStore<TankopediaSort>({
+    by: 'meta.none',
+    direction: 'descending',
+  });