diff --git a/README.md b/README.md
index d5dbba8..66c6045 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,8 @@
   - Support for Container Queries (media queries at the element level)
   - The website has a three-column layout, which turns into one-column + 2 toggleable side-menus if the screen is too narrow.
   - Check out our [Design System Showcase](https://accords-library.com/dev/showcase/design-system)
-- State Management: [React Context](https://reactjs.org/docs/context.html)
+- State Management: [Jōtai](https://jotai.org/)
+  - Jōtai is a small-weighted library for atomic state management
   - Persistent app state using LocalStorage and SessionStorage
 - Accessibility
   - Gestures using [react-swipeable](https://www.npmjs.com/package/react-swipeable)
diff --git a/package-lock.json b/package-lock.json
index 9de9b49..b0a93e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "autoprefixer": "^10.4.13",
         "cuid": "^2.1.8",
         "graphql-request": "^5.0.0",
+        "jotai": "^1.9.0",
         "markdown-to-jsx": "^7.1.7",
         "next": "^12.3.1",
         "nodemailer": "^6.8.0",
@@ -65,7 +66,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -78,7 +79,7 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
       "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.0",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -134,7 +135,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
       "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/highlight": "^7.18.6"
       },
@@ -146,7 +147,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.4.tgz",
       "integrity": "sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -155,7 +156,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.6.tgz",
       "integrity": "sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -185,7 +186,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -197,7 +198,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -206,7 +207,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.6.tgz",
       "integrity": "sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.19.4",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -232,7 +233,7 @@
       "version": "7.19.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz",
       "integrity": "sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/compat-data": "^7.19.3",
         "@babel/helper-validator-option": "^7.18.6",
@@ -250,7 +251,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -280,7 +281,7 @@
       "version": "7.18.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
       "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -289,7 +290,7 @@
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
       "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/types": "^7.19.0"
@@ -302,7 +303,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
       "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -326,7 +327,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
       "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -338,7 +339,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz",
       "integrity": "sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -394,7 +395,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz",
       "integrity": "sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.19.4"
       },
@@ -418,7 +419,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
       "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -430,7 +431,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
       "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -439,7 +440,7 @@
       "version": "7.19.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
       "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -448,7 +449,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
       "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -457,7 +458,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.4.tgz",
       "integrity": "sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.4",
@@ -471,7 +472,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
       "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
@@ -485,7 +486,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -497,7 +498,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -511,7 +512,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -520,13 +521,13 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -535,7 +536,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -544,7 +545,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -556,7 +557,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.6.tgz",
       "integrity": "sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1000,7 +1001,7 @@
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
       "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
         "@babel/parser": "^7.18.10",
@@ -1014,7 +1015,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.6.tgz",
       "integrity": "sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
         "@babel/generator": "^7.19.6",
@@ -1035,7 +1036,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz",
       "integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.19.4",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -2160,7 +2161,7 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
       "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2174,7 +2175,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2183,7 +2184,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2192,13 +2193,13 @@
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
       "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -3844,7 +3845,7 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/core-js-pure": {
       "version": "3.21.1",
@@ -3971,7 +3972,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -5463,7 +5464,7 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -5543,7 +5544,7 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -6298,6 +6299,51 @@
         "ws": "*"
       }
     },
+    "node_modules/jotai": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-1.9.0.tgz",
+      "integrity": "sha512-XYpSlxbxujUCTA8PNkzfj3+zF6XVyzo6XMZIEic3gXQCpTDPfmqhUj2FR8kwUACK5weosFrSBhesrjwfILUCoQ==",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "@babel/template": "*",
+        "immer": "*",
+        "jotai-tanstack-query": "*",
+        "jotai-urql": "*",
+        "optics-ts": "*",
+        "react": ">=16.8",
+        "valtio": "*",
+        "xstate": "*"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "jotai-tanstack-query": {
+          "optional": true
+        },
+        "jotai-urql": {
+          "optional": true
+        },
+        "optics-ts": {
+          "optional": true
+        },
+        "valtio": {
+          "optional": true
+        },
+        "xstate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -6325,7 +6371,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -6825,7 +6871,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/nanoid": {
       "version": "3.3.4",
@@ -8541,7 +8587,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -9219,7 +9265,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
       "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.1.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -9229,7 +9275,7 @@
           "version": "0.1.1",
           "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
           "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "@jridgewell/set-array": "^1.0.0",
             "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -9275,7 +9321,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
       "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/highlight": "^7.18.6"
       }
@@ -9284,13 +9330,13 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.4.tgz",
       "integrity": "sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/core": {
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.6.tgz",
       "integrity": "sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -9313,13 +9359,13 @@
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
           "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-          "dev": true
+          "devOptional": true
         },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -9327,7 +9373,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.6.tgz",
       "integrity": "sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/types": "^7.19.4",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -9347,7 +9393,7 @@
       "version": "7.19.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz",
       "integrity": "sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/compat-data": "^7.19.3",
         "@babel/helper-validator-option": "^7.18.6",
@@ -9359,7 +9405,7 @@
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -9382,13 +9428,13 @@
       "version": "7.18.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
       "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/helper-function-name": {
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
       "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/types": "^7.19.0"
@@ -9398,7 +9444,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
       "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -9416,7 +9462,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz",
       "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -9425,7 +9471,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz",
       "integrity": "sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -9469,7 +9515,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz",
       "integrity": "sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/types": "^7.19.4"
       }
@@ -9487,7 +9533,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
       "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -9496,25 +9542,25 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
       "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/helper-validator-identifier": {
       "version": "7.19.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
       "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
       "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/helpers": {
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.4.tgz",
       "integrity": "sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.4",
@@ -9525,7 +9571,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
       "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
@@ -9536,7 +9582,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -9545,7 +9591,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -9556,7 +9602,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -9565,25 +9611,25 @@
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
           "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-          "dev": true
+          "devOptional": true
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
           "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-          "dev": true
+          "devOptional": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
           "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-          "dev": true
+          "devOptional": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -9594,7 +9640,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.6.tgz",
       "integrity": "sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==",
-      "dev": true
+      "devOptional": true
     },
     "@babel/plugin-proposal-class-properties": {
       "version": "7.18.6",
@@ -9876,7 +9922,7 @@
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
       "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/code-frame": "^7.18.6",
         "@babel/parser": "^7.18.10",
@@ -9887,7 +9933,7 @@
       "version": "7.19.6",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.6.tgz",
       "integrity": "sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/code-frame": "^7.18.6",
         "@babel/generator": "^7.19.6",
@@ -9905,7 +9951,7 @@
       "version": "7.19.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz",
       "integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@babel/helper-string-parser": "^7.19.4",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -10885,7 +10931,7 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
       "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -10896,25 +10942,25 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true
+      "devOptional": true
     },
     "@jridgewell/set-array": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true
+      "devOptional": true
     },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
+      "devOptional": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
       "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -12104,7 +12150,7 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "devOptional": true
     },
     "core-js-pure": {
       "version": "3.21.1",
@@ -12205,7 +12251,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -13250,7 +13296,7 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "devOptional": true
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -13306,7 +13352,7 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
+      "devOptional": true
     },
     "globby": {
       "version": "11.1.0",
@@ -13856,6 +13902,12 @@
       "dev": true,
       "requires": {}
     },
+    "jotai": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-1.9.0.tgz",
+      "integrity": "sha512-XYpSlxbxujUCTA8PNkzfj3+zF6XVyzo6XMZIEic3gXQCpTDPfmqhUj2FR8kwUACK5weosFrSBhesrjwfILUCoQ==",
+      "requires": {}
+    },
     "js-sdsl": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
@@ -13880,7 +13932,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
+      "devOptional": true
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -14280,7 +14332,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "devOptional": true
     },
     "nanoid": {
       "version": "3.3.4",
@@ -15513,7 +15565,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
+      "devOptional": true
     },
     "to-regex-range": {
       "version": "5.0.1",
diff --git a/package.json b/package.json
index a1825bf..691f3af 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "autoprefixer": "^10.4.13",
     "cuid": "^2.1.8",
     "graphql-request": "^5.0.0",
+    "jotai": "^1.9.0",
     "markdown-to-jsx": "^7.1.7",
     "next": "^12.3.1",
     "nodemailer": "^6.8.0",
diff --git a/src/components/AnchorShare.tsx b/src/components/AnchorShare.tsx
index 4e4dac9..6c19f7e 100644
--- a/src/components/AnchorShare.tsx
+++ b/src/components/AnchorShare.tsx
@@ -1,7 +1,8 @@
 import { Ico, Icon } from "./Ico";
 import { ToolTip } from "./ToolTip";
 import { cJoin } from "helpers/className";
-import { useLocalData } from "contexts/LocalDataContext";
+import { useAtomGetter } from "helpers/atoms";
+import { atoms } from "contexts/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -16,7 +17,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const AnchorShare = ({ id, className }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <ToolTip content={langui.copy_anchor_link} trigger="mouseenter" className="text-sm">
       <ToolTip content={langui.anchor_link_copied} trigger="click" className="text-sm">
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 6267d0b..efd932d 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -7,11 +7,10 @@ import { MainPanel } from "./Panels/MainPanel";
 import { SafariPopup } from "./Panels/SafariPopup";
 import { isDefined, isUndefined } from "helpers/others";
 import { cIf, cJoin } from "helpers/className";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
 import { Ids } from "types/ids";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter, useAtomPair } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -45,39 +44,34 @@ export const AppLayout = ({
   subPanelIcon = Icon.Tune,
   contentPanelScroolbar = true,
 }: Props): JSX.Element => {
-  const {
-    mainPanelOpen,
-    mainPanelReduced,
-    menuGestures,
-    subPanelOpen,
-    setMainPanelOpen,
-    setSubPanelOpen,
-    toggleMainPanelOpen,
-    toggleSubPanelOpen,
-  } = useAppLayout();
+  const isMainPanelReduced = useAtomGetter(atoms.layout.mainPanelReduced);
+  const [isSubPanelOpened, setSubPanelOpened] = useAtomPair(atoms.layout.subPanelOpened);
+  const [isMainPanelOpened, setMainPanelOpened] = useAtomPair(atoms.layout.mainPanelOpened);
+  const isMenuGesturesEnabled = useAtomGetter(atoms.layout.menuGesturesEnabled);
 
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
 
-  const { is1ColumnLayout, isScreenAtLeastXs } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+  const isScreenAtLeastXs = useAtomGetter(atoms.containerQueries.isScreenAtLeastXs);
 
   const handlers = useSwipeable({
     onSwipedLeft: (SwipeEventData) => {
-      if (menuGestures) {
+      if (isMenuGesturesEnabled) {
         if (SwipeEventData.velocity < SENSIBILITY_SWIPE) return;
-        if (mainPanelOpen) {
-          setMainPanelOpen(false);
+        if (isMainPanelOpened) {
+          setMainPanelOpened(false);
         } else if (isDefined(subPanel) && isDefined(contentPanel)) {
-          setSubPanelOpen(true);
+          setSubPanelOpened(true);
         }
       }
     },
     onSwipedRight: (SwipeEventData) => {
-      if (menuGestures) {
+      if (isMenuGesturesEnabled) {
         if (SwipeEventData.velocity < SENSIBILITY_SWIPE) return;
-        if (subPanelOpen) {
-          setSubPanelOpen(false);
+        if (isSubPanelOpened) {
+          setSubPanelOpened(false);
         } else {
-          setMainPanelOpen(true);
+          setMainPanelOpened(true);
         }
       }
     },
@@ -99,7 +93,7 @@ export const AppLayout = ({
       style={{
         gridTemplateColumns: is1ColumnLayout
           ? "1fr"
-          : `${mainPanelReduced ? layout.mainMenuReduced : layout.mainMenu}rem ${
+          : `${isMainPanelReduced ? layout.mainMenuReduced : layout.mainMenu}rem ${
               isDefined(subPanel) ? layout.subMenu : 0
             }rem 1fr`,
       }}>
@@ -128,7 +122,7 @@ export const AppLayout = ({
           `absolute inset-0 transition-filter duration-500
             [grid-area:content]`,
           cIf(
-            (mainPanelOpen || subPanelOpen) && is1ColumnLayout,
+            (isMainPanelOpened || isSubPanelOpened) && is1ColumnLayout,
             "z-10 backdrop-blur",
             "pointer-events-none touch-none"
           )
@@ -136,11 +130,15 @@ export const AppLayout = ({
         <div
           className={cJoin(
             "absolute inset-0 bg-shade transition-opacity duration-500",
-            cIf((mainPanelOpen || subPanelOpen) && is1ColumnLayout, "opacity-60", "opacity-0")
+            cIf(
+              (isMainPanelOpened || isSubPanelOpened) && is1ColumnLayout,
+              "opacity-60",
+              "opacity-0"
+            )
           )}
           onClick={() => {
-            setMainPanelOpen(false);
-            setSubPanelOpen(false);
+            setMainPanelOpened(false);
+            setSubPanelOpened(false);
           }}
         />
       </div>
@@ -175,7 +173,7 @@ export const AppLayout = ({
               "[grid-area:sub]"
             ),
             cIf(is1ColumnLayout && isScreenAtLeastXs, "w-[min(30rem,90%)] border-l"),
-            cIf(is1ColumnLayout && !subPanelOpen && !turnSubIntoContent, "translate-x-[100vw]"),
+            cIf(is1ColumnLayout && !isSubPanelOpened && !turnSubIntoContent, "translate-x-[100vw]"),
             cIf(is1ColumnLayout && turnSubIntoContent, "w-full border-l-0")
           )}>
           {subPanel}
@@ -189,7 +187,7 @@ export const AppLayout = ({
             transition-transform duration-300 scrollbar-none texture-paper-dots`,
           cIf(is1ColumnLayout, "justify-self-start [grid-area:content]", "[grid-area:main]"),
           cIf(is1ColumnLayout && isScreenAtLeastXs, "w-[min(30rem,90%)]"),
-          cIf(!mainPanelOpen && is1ColumnLayout, "-translate-x-full")
+          cIf(!isMainPanelOpened && is1ColumnLayout, "-translate-x-full")
         )}>
         <MainPanel />
       </div>
@@ -202,11 +200,11 @@ export const AppLayout = ({
           cIf(!is1ColumnLayout, "hidden")
         )}>
         <Ico
-          icon={mainPanelOpen ? Icon.Close : Icon.Menu}
+          icon={isMainPanelOpened ? Icon.Close : Icon.Menu}
           className="cursor-pointer !text-2xl"
           onClick={() => {
-            toggleMainPanelOpen();
-            setSubPanelOpen(false);
+            setMainPanelOpened((current) => !current);
+            setSubPanelOpened(false);
           }}
         />
         <p
@@ -220,11 +218,11 @@ export const AppLayout = ({
         </p>
         {isDefined(subPanel) && !turnSubIntoContent && (
           <Ico
-            icon={subPanelOpen ? Icon.Close : subPanelIcon}
+            icon={isSubPanelOpened ? Icon.Close : subPanelIcon}
             className="cursor-pointer !text-2xl"
             onClick={() => {
-              toggleSubPanelOpen();
-              setMainPanelOpen(false);
+              setSubPanelOpened((current) => !current);
+              setMainPanelOpened(false);
             }}
           />
         )}
diff --git a/src/components/Cli/Terminal.tsx b/src/components/Cli/Terminal.tsx
index ff72e3f..c28dda7 100644
--- a/src/components/Cli/Terminal.tsx
+++ b/src/components/Cli/Terminal.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { cJoin, cIf } from "helpers/className";
-import { useTerminalContext } from "contexts/TerminalContext";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { useUserSettings } from "contexts/UserSettingsContext";
+import { atoms } from "contexts/atoms";
+import { useAtomSetter, useAtomPair } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -31,9 +31,11 @@ export const Terminal = ({
   content,
 }: Props): JSX.Element => {
   const [childrenPaths, setChildrenPaths] = useState(propsChildrenPaths);
-  const { darkMode, setPlayerName } = useUserSettings();
-  const { previousCommands, previousLines, setPreviousCommands, setPreviousLines } =
-    useTerminalContext();
+  const setPlayerName = useAtomSetter(atoms.settings.playerName);
+
+  const [previousCommands, setPreviousCommands] = useAtomPair(atoms.terminal.previousCommands);
+  const [previousLines, setPreviousLines] = useAtomPair(atoms.terminal.previousLines);
+
   const [line, setLine] = useState("");
   const [displayCurrentLine, setDisplayCurrentLine] = useState(true);
   const [previousCommandIndex, setPreviousCommandIndex] = useState(0);
@@ -232,11 +234,7 @@ export const Terminal = ({
   }, [line]);
 
   return (
-    <div
-      className={cJoin(
-        "h-screen overflow-hidden bg-light set-theme-font-standard",
-        cIf(darkMode, "set-theme-dark", "set-theme-light")
-      )}>
+    <div className={cJoin("h-screen overflow-hidden bg-light set-theme-font-standard")}>
       <div
         ref={terminalWindowRef}
         className="h-full overflow-scroll scroll-auto p-6 scrollbar-none">
diff --git a/src/components/Containers/ContentPanel.tsx b/src/components/Containers/ContentPanel.tsx
index 954507b..add70a4 100644
--- a/src/components/Containers/ContentPanel.tsx
+++ b/src/components/Containers/ContentPanel.tsx
@@ -1,4 +1,5 @@
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { cIf, cJoin } from "helpers/className";
 
 /*
@@ -25,7 +26,7 @@ export const ContentPanel = ({
   children,
   className,
 }: Props): JSX.Element => {
-  const { isContentPanelAtLeast3xl } = useContainerQueries();
+  const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
   return (
     <div className="grid h-full">
       <main
diff --git a/src/components/Containers/Popup.tsx b/src/components/Containers/Popup.tsx
index 8227a14..49ab6b5 100644
--- a/src/components/Containers/Popup.tsx
+++ b/src/components/Containers/Popup.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { cIf, cJoin } from "helpers/className";
+import { atoms } from "contexts/atoms";
+import { useAtomSetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -27,13 +28,13 @@ export const Popup = ({
   hideBackground = false,
   padding = true,
 }: Props): JSX.Element => {
-  const { setMenuGestures } = useAppLayout();
+  const setMenuGesturesEnabled = useAtomSetter(atoms.layout.menuGesturesEnabled);
 
   useHotkeys("escape", () => onCloseRequest?.(), {}, [onCloseRequest]);
 
   useEffect(() => {
-    setMenuGestures(!isVisible);
-  }, [setMenuGestures, isVisible]);
+    setMenuGesturesEnabled(!isVisible);
+  }, [isVisible, setMenuGesturesEnabled]);
 
   return (
     <div
diff --git a/src/components/Containers/SubPanel.tsx b/src/components/Containers/SubPanel.tsx
index 3a26635..31bd3d2 100644
--- a/src/components/Containers/SubPanel.tsx
+++ b/src/components/Containers/SubPanel.tsx
@@ -1,4 +1,5 @@
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { cIf, cJoin } from "helpers/className";
 
 /*
@@ -13,7 +14,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const SubPanel = ({ children }: Props): JSX.Element => {
-  const { isSubPanelAtLeastXs } = useContainerQueries();
+  const isSubPanelAtLeastXs = useAtomGetter(atoms.containerQueries.isSubPanelAtLeastXs);
   return (
     <div
       className={cJoin(
diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx
index 4229428..0f605dc 100644
--- a/src/components/Inputs/LanguageSwitcher.tsx
+++ b/src/components/Inputs/LanguageSwitcher.tsx
@@ -6,7 +6,8 @@ import { cJoin } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
 import { iterateMap } from "helpers/others";
 import { sendAnalytics } from "helpers/analytics";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -32,7 +33,7 @@ export const LanguageSwitcher = ({
   onLanguageChanged,
   showBadge = true,
 }: Props): JSX.Element => {
-  const { languages } = useLocalData();
+  const languages = useAtomGetter(atoms.localData.languages);
   return (
     <ToolTip
       content={
diff --git a/src/components/Library/PreviewCardCTAs.tsx b/src/components/Library/PreviewCardCTAs.tsx
index 1c4ddd5..c2fe8e0 100644
--- a/src/components/Library/PreviewCardCTAs.tsx
+++ b/src/components/Library/PreviewCardCTAs.tsx
@@ -3,8 +3,9 @@ import { Button } from "components/Inputs/Button";
 import { ToolTip } from "components/ToolTip";
 import { LibraryItemUserStatus } from "types/types";
 import { cIf, cJoin } from "helpers/className";
-import { useLocalData } from "contexts/LocalDataContext";
 import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -20,7 +21,7 @@ interface Props {
 
 export const PreviewCardCTAs = ({ id, expand = false }: Props): JSX.Element => {
   const { libraryItemUserStatus, setLibraryItemUserStatus } = useLibraryItemUserStatus();
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
 
   return (
     <div
diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx
index ad07cc3..bd121f4 100644
--- a/src/components/LightBox.tsx
+++ b/src/components/LightBox.tsx
@@ -10,7 +10,8 @@ import { Ids } from "types/ids";
 import { UploadImageFragment } from "graphql/generated";
 import { ImageQuality } from "helpers/img";
 import { isDefined } from "helpers/others";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { useAtomGetter } from "helpers/atoms";
+import { atoms } from "contexts/atoms";
 
 interface Props {
   onCloseRequest: () => void;
@@ -138,7 +139,7 @@ const ControlButtons = ({
   onCloseRequest,
   toggleFullscreen,
 }: ControlButtonsProps): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
 
   const PreviousButton = () => (
     <Button
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx
index 7f00fd4..9bb5a84 100644
--- a/src/components/Markdown/Markdawn.tsx
+++ b/src/components/Markdown/Markdawn.tsx
@@ -13,10 +13,8 @@ import { AnchorShare } from "components/AnchorShare";
 import { useIntersectionList } from "hooks/useIntersectionList";
 import { Ico, Icon } from "components/Ico";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { useUserSettings } from "contexts/UserSettingsContext";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
-import { useLightBox } from "contexts/LightBoxContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -31,10 +29,10 @@ interface MarkdawnProps {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Element => {
-  const { playerName } = useUserSettings();
+  const playerName = useAtomGetter(atoms.settings.playerName);
   const router = useRouter();
-  const { isContentPanelAtLeastLg } = useContainerQueries();
-  const { showLightBox } = useLightBox();
+  const isContentPanelAtLeastLg = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastLg);
+  const { showLightBox } = useAtomGetter(atoms.lightBox);
 
   /* eslint-disable no-irregular-whitespace */
   const text = useMemo(
@@ -232,7 +230,7 @@ export const TableOfContents = ({
   horizontalLine = false,
 }: TableOfContentsProps): JSX.Element => {
   const router = useRouter();
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const toc = useMemo(() => getTocFromMarkdawn(preprocessMarkDawn(text), title), [text, title]);
 
   return (
diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx
index 71f9d41..f499a65 100644
--- a/src/components/PanelComponents/ReturnButton.tsx
+++ b/src/components/PanelComponents/ReturnButton.tsx
@@ -1,12 +1,11 @@
 import { useCallback } from "react";
 import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { TranslatedProps } from "types/TranslatedProps";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { isDefined } from "helpers/others";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -24,9 +23,8 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props): JSX.Element => {
-  const { setSubPanelOpen } = useAppLayout();
-  const { langui } = useLocalData();
-  const { is3ColumnsLayout } = useContainerQueries();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
 
   return (
     <>
@@ -34,12 +32,7 @@ export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props):
         (!is3ColumnsLayout && displayOnlyOn === "1ColumnLayout") ||
         !isDefined(displayOnlyOn)) && (
         <div className={className}>
-          <Button
-            onClick={() => setSubPanelOpen(false)}
-            href={href}
-            text={`${langui.return_to} ${title}`}
-            icon={Icon.NavigateBefore}
-          />
+          <Button href={href} text={`${langui.return_to} ${title}`} icon={Icon.NavigateBefore} />
         </div>
       )}
     </>
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx
index 7c76c15..3d66c69 100644
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@@ -3,15 +3,14 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { Button } from "components/Inputs/Button";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { ToolTip } from "components/ToolTip";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { Icon } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/others";
 import { Link } from "components/Inputs/Link";
 import { sendAnalytics } from "helpers/analytics";
-import { useLocalData } from "contexts/LocalDataContext";
 import { ColoredSvg } from "components/ColoredSvg";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -19,34 +18,35 @@ import { useContainerQueries } from "contexts/ContainerQueriesContext";
  */
 
 export const MainPanel = (): JSX.Element => {
-  const { is3ColumnsLayout } = useContainerQueries();
-  const { mainPanelReduced, toggleMainPanelReduced, setConfigPanelOpen } = useAppLayout();
-  const { langui } = useLocalData();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
+  const langui = useAtomGetter(atoms.localData.langui);
+  const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced);
+  const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);
 
   return (
     <div
       className={cJoin(
         "grid content-start justify-center gap-y-2 p-8 text-center",
-        cIf(mainPanelReduced && is3ColumnsLayout, "px-4")
+        cIf(isMainPanelReduced && is3ColumnsLayout, "px-4")
       )}>
       {/* Reduce/expand main menu */}
       {is3ColumnsLayout && (
         <div
           className={cJoin(
             "fixed top-1/2",
-            cIf(mainPanelReduced, "left-[4.65rem]", "left-[18.65rem]")
+            cIf(isMainPanelReduced, "left-[4.65rem]", "left-[18.65rem]")
           )}>
           <Button
             onClick={() => {
-              if (mainPanelReduced) {
+              if (isMainPanelReduced) {
                 sendAnalytics("MainPanel", "Expand");
               } else {
                 sendAnalytics("MainPanel", "Reduce");
               }
-              toggleMainPanelReduced();
+              setMainPanelReduced((current) => !current);
             }}
             className="z-50 bg-light !px-2"
-            icon={mainPanelReduced ? Icon.ChevronRight : Icon.ChevronLeft}
+            icon={isMainPanelReduced ? Icon.ChevronRight : Icon.ChevronLeft}
           />
         </div>
       )}
@@ -57,28 +57,28 @@ export const MainPanel = (): JSX.Element => {
               src="/icons/accords.svg"
               className={cJoin(
                 "mb-4 aspect-square bg-black hover:bg-dark",
-                cIf(mainPanelReduced && is3ColumnsLayout, "w-12", "w-1/2")
+                cIf(isMainPanelReduced && is3ColumnsLayout, "w-12", "w-1/2")
               )}
             />
           </Link>
 
-          {(!mainPanelReduced || !is3ColumnsLayout) && (
+          {(!isMainPanelReduced || !is3ColumnsLayout) && (
             <h2 className="mb-4 text-3xl">Accord&rsquo;s Library</h2>
           )}
 
           <div
             className={cJoin(
               "flex flex-wrap gap-2",
-              cIf(mainPanelReduced && is3ColumnsLayout, "flex-col gap-3", "flex-row")
+              cIf(isMainPanelReduced && is3ColumnsLayout, "flex-col gap-3", "flex-row")
             )}>
             <ToolTip
               content={<h3 className="text-2xl">{langui.open_settings}</h3>}
               placement="right"
               className="text-left"
-              disabled={!mainPanelReduced}>
+              disabled={!isMainPanelReduced}>
               <Button
                 onClick={() => {
-                  setConfigPanelOpen(true);
+                  setSettingsOpened(true);
                   sendAnalytics("Settings", "Open settings");
                 }}
                 icon={Icon.Settings}
@@ -95,7 +95,7 @@ export const MainPanel = (): JSX.Element => {
         icon={Icon.LibraryBooks}
         title={langui.library}
         subtitle={langui.library_short_description}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
@@ -103,7 +103,7 @@ export const MainPanel = (): JSX.Element => {
         icon={Icon.Workspaces}
         title={langui.contents}
         subtitle={langui.contents_short_description}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
@@ -111,7 +111,7 @@ export const MainPanel = (): JSX.Element => {
         icon={Icon.TravelExplore}
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
@@ -119,7 +119,7 @@ export const MainPanel = (): JSX.Element => {
         icon={Icon.WatchLater}
         title={langui.chronicles}
         subtitle={langui.chronicles_short_description}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <HorizontalLine />
@@ -128,7 +128,7 @@ export const MainPanel = (): JSX.Element => {
         url="/news"
         icon={Icon.Feed}
         title={langui.news}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       {/*
@@ -136,7 +136,7 @@ export const MainPanel = (): JSX.Element => {
         url="/merch"
         icon={Icon.Store}
         title={langui.merch}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
       */}
 
@@ -144,26 +144,26 @@ export const MainPanel = (): JSX.Element => {
         url="https://gallery.accords-library.com/posts/"
         icon={Icon.Collections}
         title={langui.gallery}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
         url="/archives"
         icon={Icon.Inventory2}
         title={langui.archives}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
         url="/about-us"
         icon={Icon.Info}
         title={langui.about_us}
-        reduced={mainPanelReduced && is3ColumnsLayout}
+        reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
-      {(!mainPanelReduced || !is3ColumnsLayout) && <HorizontalLine />}
+      {(!isMainPanelReduced || !is3ColumnsLayout) && <HorizontalLine />}
 
-      <div className={cJoin("text-center", cIf(mainPanelReduced && is3ColumnsLayout, "hidden"))}>
+      <div className={cJoin("text-center", cIf(isMainPanelReduced && is3ColumnsLayout, "hidden"))}>
         {isDefinedAndNotEmpty(langui.licensing_notice) && (
           <p>
             <Markdown>{langui.licensing_notice}</Markdown>
diff --git a/src/components/Panels/SettingsPopup.tsx b/src/components/Panels/SettingsPopup.tsx
index 609924e..3d27986 100644
--- a/src/components/Panels/SettingsPopup.tsx
+++ b/src/components/Panels/SettingsPopup.tsx
@@ -7,37 +7,32 @@ import { OrderableList } from "components/Inputs/OrderableList";
 import { Select } from "components/Inputs/Select";
 import { TextInput } from "components/Inputs/TextInput";
 import { Popup } from "components/Containers/Popup";
-import { useAppLayout } from "contexts/AppLayoutContext";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useUserSettings } from "contexts/UserSettingsContext";
 import { sendAnalytics } from "helpers/analytics";
 import { cJoin, cIf } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
 import { filterHasAttributes, isDefined } from "helpers/others";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter, useAtomPair } from "helpers/atoms";
+import { ThemeMode } from "contexts/settings";
 
 export const SettingsPopup = (): JSX.Element => {
-  const {
-    currency,
-    darkMode,
-    dyslexic,
-    fontSize,
-    playerName,
-    preferredLanguages,
-    selectedThemeMode,
-    setCurrency,
-    setDarkMode,
-    setDyslexic,
-    setFontSize,
-    setPlayerName,
-    setPreferredLanguages,
-    setSelectedThemeMode,
-  } = useUserSettings();
+  const [preferredLanguages, setPreferredLanguages] = useAtomPair(
+    atoms.settings.preferredLanguages
+  );
+  const [isSettingsOpened, setSettingsOpened] = useAtomPair(atoms.layout.settingsOpened);
+  const [currency, setCurrency] = useAtomPair(atoms.settings.currency);
+  const [isDyslexic, setDyslexic] = useAtomPair(atoms.settings.dyslexic);
+  const [fontSize, setFontSize] = useAtomPair(atoms.settings.fontSize);
+  const [playerName, setPlayerName] = useAtomPair(atoms.settings.playerName);
+  const [themeMode, setThemeMode] = useAtomPair(atoms.settings.themeMode);
+
+  const languages = useAtomGetter(atoms.localData.languages);
+  const langui = useAtomGetter(atoms.localData.langui);
+  const currencies = useAtomGetter(atoms.localData.currencies);
+
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
 
-  const { langui, currencies, languages } = useLocalData();
-  const { is1ColumnLayout } = useContainerQueries();
   const router = useRouter();
-  const { configPanelOpen, setConfigPanelOpen } = useAppLayout();
 
   const currencyOptions = useMemo(
     () =>
@@ -59,9 +54,9 @@ export const SettingsPopup = (): JSX.Element => {
 
   return (
     <Popup
-      isVisible={configPanelOpen}
+      isVisible={isSettingsOpened}
       onCloseRequest={() => {
-        setConfigPanelOpen(false);
+        setSettingsOpened(false);
         sendAnalytics("Settings", "Close settings");
       }}>
       <h2 className="text-2xl">{langui.settings}</h2>
@@ -110,28 +105,26 @@ export const SettingsPopup = (): JSX.Element => {
               buttonsProps={[
                 {
                   onClick: () => {
-                    setDarkMode(false);
-                    setSelectedThemeMode(true);
+                    setThemeMode(ThemeMode.Light);
                     sendAnalytics("Settings", "Change theme (light)");
                   },
-                  active: selectedThemeMode && !darkMode,
+                  active: themeMode === ThemeMode.Light,
                   text: langui.light,
                 },
                 {
                   onClick: () => {
-                    setSelectedThemeMode(false);
+                    setThemeMode(ThemeMode.Auto);
                     sendAnalytics("Settings", "Change theme (auto)");
                   },
-                  active: !selectedThemeMode,
+                  active: themeMode === ThemeMode.Auto,
                   text: langui.auto,
                 },
                 {
                   onClick: () => {
-                    setDarkMode(true);
-                    setSelectedThemeMode(true);
+                    setThemeMode(ThemeMode.Dark);
                     sendAnalytics("Settings", "Change theme (dark)");
                   },
-                  active: selectedThemeMode && darkMode,
+                  active: themeMode === ThemeMode.Dark,
                   text: langui.dark,
                 },
               ]}
@@ -198,7 +191,7 @@ export const SettingsPopup = (): JSX.Element => {
             <h3 className="text-xl">{langui.font}</h3>
             <div className="grid gap-2">
               <Button
-                active={!dyslexic}
+                active={!isDyslexic}
                 onClick={() => {
                   setDyslexic(false);
                   sendAnalytics("Settings", "Change font (Zen Maru Gothic)");
@@ -207,7 +200,7 @@ export const SettingsPopup = (): JSX.Element => {
                 text="Zen Maru Gothic"
               />
               <Button
-                active={dyslexic}
+                active={isDyslexic}
                 onClick={() => {
                   setDyslexic(true);
                   sendAnalytics("Settings", "Change font (OpenDyslexic)");
diff --git a/src/components/PostPage.tsx b/src/components/PostPage.tsx
index 5c13ff8..03af512 100644
--- a/src/components/PostPage.tsx
+++ b/src/components/PostPage.tsx
@@ -13,7 +13,8 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { PostWithTranslations } from "types/types";
 import { filterHasAttributes, getStatusDescription } from "helpers/others";
 import { prettySlug } from "helpers/formatters";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -48,7 +49,7 @@ export const PostPage = ({
   displayTitle = true,
   ...otherProps
 }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: post.translations,
     languageExtractor: useCallback(
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 7971dfc..367bcc8 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -11,8 +11,8 @@ import { ImageQuality } from "helpers/img";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { TranslatedProps } from "types/TranslatedProps";
-import { useUserSettings } from "contexts/UserSettingsContext";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -70,8 +70,8 @@ export const PreviewCard = ({
   infoAppend,
   disabled = false,
 }: Props): JSX.Element => {
-  const { currency } = useUserSettings();
-  const { currencies } = useLocalData();
+  const currency = useAtomGetter(atoms.settings.currency);
+  const currencies = useAtomGetter(atoms.localData.currencies);
   const isHoverable = useDeviceSupportsHover();
   const router = useRouter();
 
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx
index bb0dc51..6101eac 100644
--- a/src/components/RecorderChip.tsx
+++ b/src/components/RecorderChip.tsx
@@ -6,7 +6,8 @@ import { Chip } from "components/Chip";
 import { RecorderChipFragment } from "graphql/generated";
 import { ImageQuality } from "helpers/img";
 import { filterHasAttributes } from "helpers/others";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -21,7 +22,7 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 export const RecorderChip = ({ recorder }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
 
   return (
     <ToolTip
diff --git a/src/components/SmartList.tsx b/src/components/SmartList.tsx
index 73956f6..e081d45 100644
--- a/src/components/SmartList.tsx
+++ b/src/components/SmartList.tsx
@@ -8,8 +8,8 @@ import { cJoin } from "helpers/className";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { Ids } from "types/ids";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 interface Group<T> {
   name: string;
@@ -71,7 +71,7 @@ export const SmartList = <T,>({
   className,
 }: Props<T>): JSX.Element => {
   const [page, setPage] = useState(0);
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   useScrollTopOnChange(Ids.ContentPanel, [page], paginationScroolTop);
   useEffect(() => setPage(0), [searchingTerm, groupingFunction, groupSortingFunction, items]);
 
@@ -228,8 +228,8 @@ export const SmartList = <T,>({
  */
 
 const DefaultRenderWhenEmpty = () => {
-  const { is3ColumnsLayout } = useContainerQueries();
-  const { langui } = useLocalData();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <div className="grid h-full place-content-center">
       <div
diff --git a/src/components/ThumbnailHeader.tsx b/src/components/ThumbnailHeader.tsx
index 6afc6eb..993f148 100644
--- a/src/components/ThumbnailHeader.tsx
+++ b/src/components/ThumbnailHeader.tsx
@@ -6,8 +6,8 @@ import { GetContentTextQuery, UploadImageFragment } from "graphql/generated";
 import { prettyInlineTitle, prettySlug, slugify } from "helpers/formatters";
 import { ImageQuality } from "helpers/img";
 import { filterHasAttributes } from "helpers/others";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useLightBox } from "contexts/LightBoxContext";
+import { useAtomGetter } from "helpers/atoms";
+import { atoms } from "contexts/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -42,8 +42,8 @@ export const ThumbnailHeader = ({
   description,
   languageSwitcher,
 }: Props): JSX.Element => {
-  const { langui } = useLocalData();
-  const { showLightBox } = useLightBox();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const { showLightBox } = useAtomGetter(atoms.lightBox);
 
   return (
     <>
diff --git a/src/components/Wiki/DefinitionCard.tsx b/src/components/Wiki/DefinitionCard.tsx
index 487dab3..d06c648 100644
--- a/src/components/Wiki/DefinitionCard.tsx
+++ b/src/components/Wiki/DefinitionCard.tsx
@@ -5,8 +5,8 @@ import { getStatusDescription } from "helpers/others";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { Button } from "components/Inputs/Button";
 import { cIf, cJoin } from "helpers/className";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                        ╭─────────────╮
@@ -30,8 +30,8 @@ interface Props {
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
 const DefinitionCard = ({ source, translations = [], index, categories }: Props): JSX.Element => {
-  const { isContentPanelAtLeastMd } = useContainerQueries();
-  const { langui } = useLocalData();
+  const isContentPanelAtLeastMd = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastMd);
+  const langui = useAtomGetter(atoms.localData.langui);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: translations,
     languageExtractor: useCallback((item: Props["translations"][number]) => item.language, []),
diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx
deleted file mode 100644
index 343aafc..0000000
--- a/src/contexts/AppLayoutContext.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, {
-  createContext,
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-import { useRouter } from "next/router";
-import { useLocalStorage } from "usehooks-ts";
-import { isDefined } from "helpers/others";
-import { RequiredNonNullable } from "types/types";
-import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
-import { useScrollIntoView } from "hooks/useScrollIntoView";
-
-interface AppLayoutState {
-  subPanelOpen: boolean;
-  toggleSubPanelOpen: () => void;
-  setSubPanelOpen: Dispatch<SetStateAction<AppLayoutState["subPanelOpen"]>>;
-
-  configPanelOpen: boolean;
-  toggleConfigPanelOpen: () => void;
-  setConfigPanelOpen: Dispatch<SetStateAction<AppLayoutState["configPanelOpen"]>>;
-
-  mainPanelReduced: boolean;
-  toggleMainPanelReduced: () => void;
-  setMainPanelReduced: Dispatch<SetStateAction<AppLayoutState["mainPanelReduced"]>>;
-
-  mainPanelOpen: boolean;
-  toggleMainPanelOpen: () => void;
-  setMainPanelOpen: Dispatch<SetStateAction<AppLayoutState["mainPanelOpen"]>>;
-
-  menuGestures: boolean;
-  toggleMenuGestures: () => void;
-  setMenuGestures: Dispatch<SetStateAction<AppLayoutState["menuGestures"]>>;
-}
-
-const initialState: RequiredNonNullable<AppLayoutState> = {
-  subPanelOpen: false,
-  toggleSubPanelOpen: () => null,
-  setSubPanelOpen: () => null,
-
-  configPanelOpen: false,
-  setConfigPanelOpen: () => null,
-  toggleConfigPanelOpen: () => null,
-
-  mainPanelReduced: false,
-  setMainPanelReduced: () => null,
-  toggleMainPanelReduced: () => null,
-
-  mainPanelOpen: false,
-  toggleMainPanelOpen: () => null,
-  setMainPanelOpen: () => null,
-
-  menuGestures: true,
-  toggleMenuGestures: () => null,
-  setMenuGestures: () => null,
-};
-
-const AppLayoutContext = createContext<AppLayoutState>(initialState);
-
-export const useAppLayout = (): AppLayoutState => useContext(AppLayoutContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const AppContextProvider = ({ children }: Props): JSX.Element => {
-  const router = useRouter();
-
-  const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
-    "subPanelOpen",
-    initialState.subPanelOpen
-  );
-
-  const [configPanelOpen, setConfigPanelOpen] = useLocalStorage(
-    "configPanelOpen",
-    initialState.configPanelOpen
-  );
-
-  const [mainPanelReduced, setMainPanelReduced] = useLocalStorage(
-    "mainPanelReduced",
-    initialState.mainPanelReduced
-  );
-
-  const [mainPanelOpen, setMainPanelOpen] = useStateWithLocalStorage(
-    "mainPanelOpen",
-    initialState.mainPanelOpen
-  );
-
-  const [menuGestures, setMenuGestures] = useState(false);
-
-  const toggleSubPanelOpen = () => {
-    setSubPanelOpen((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleConfigPanelOpen = () => {
-    setConfigPanelOpen((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleMainPanelReduced = () => {
-    setMainPanelReduced((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleMainPanelOpen = () => {
-    setMainPanelOpen((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleMenuGestures = () => {
-    setMenuGestures((current) => !current);
-  };
-
-  useEffect(() => {
-    router.events.on("routeChangeStart", () => {
-      console.log("[Router Events] on routeChangeStart");
-      setConfigPanelOpen(false);
-      setMainPanelOpen(false);
-      setSubPanelOpen(false);
-    });
-
-    router.events.on("hashChangeStart", () => {
-      console.log("[Router Events] on hashChangeStart");
-      setSubPanelOpen(false);
-    });
-  }, [router.events, setConfigPanelOpen, setMainPanelOpen, setSubPanelOpen]);
-
-  useScrollIntoView();
-
-  return (
-    <AppLayoutContext.Provider
-      value={{
-        subPanelOpen,
-        configPanelOpen,
-        mainPanelReduced,
-        mainPanelOpen,
-        menuGestures,
-        setSubPanelOpen,
-        setConfigPanelOpen,
-        setMainPanelReduced,
-        setMainPanelOpen,
-        setMenuGestures,
-        toggleSubPanelOpen,
-        toggleConfigPanelOpen,
-        toggleMainPanelReduced,
-        toggleMainPanelOpen,
-        toggleMenuGestures,
-      }}>
-      {children}
-    </AppLayoutContext.Provider>
-  );
-};
diff --git a/src/contexts/ContainerQueriesContext.tsx b/src/contexts/ContainerQueriesContext.tsx
deleted file mode 100644
index 39564a1..0000000
--- a/src/contexts/ContainerQueriesContext.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo, useState } from "react";
-import { useUserSettings } from "./UserSettingsContext";
-import { useOnResize } from "hooks/useOnResize";
-import { Ids } from "types/ids";
-import { RequiredNonNullable } from "types/types";
-
-type Size =
-  | "2xl"
-  | "2xs"
-  | "3xl"
-  | "4xl"
-  | "5xl"
-  | "6xl"
-  | "7xl"
-  | "lg"
-  | "md"
-  | "sm"
-  | "xl"
-  | "xs";
-
-const sizes: Record<Size, number> = {
-  "2xl": 42,
-  "3xl": 48,
-  "4xl": 56,
-  "5xl": 64,
-  "6xl": 72,
-  "7xl": 80,
-  lg: 32,
-  md: 28,
-  sm: 24,
-  xl: 36,
-  xs: 19,
-  "2xs": 16,
-};
-
-type ContainerQueriesContainers = "contentPanel" | "screen" | "subPanel";
-
-type ContainerQueriesKeys =
-  | "is1ColumnLayout"
-  | "is3ColumnsLayout"
-  | `is${Capitalize<ContainerQueriesContainers>}AtLeast${Capitalize<Size>}`;
-
-type ContainerQueriesState = Record<ContainerQueriesKeys, boolean>;
-
-const initialState: RequiredNonNullable<ContainerQueriesState> = {
-  is1ColumnLayout: false,
-  is3ColumnsLayout: false,
-  isContentPanelAtLeast2xl: false,
-  isContentPanelAtLeast2xs: false,
-  isContentPanelAtLeast3xl: false,
-  isContentPanelAtLeast4xl: false,
-  isContentPanelAtLeast5xl: false,
-  isContentPanelAtLeast6xl: false,
-  isContentPanelAtLeast7xl: false,
-  isContentPanelAtLeastLg: false,
-  isContentPanelAtLeastMd: false,
-  isContentPanelAtLeastSm: false,
-  isContentPanelAtLeastXl: false,
-  isContentPanelAtLeastXs: false,
-  isScreenAtLeast2xl: false,
-  isScreenAtLeast2xs: false,
-  isScreenAtLeast3xl: false,
-  isScreenAtLeast4xl: false,
-  isScreenAtLeast5xl: false,
-  isScreenAtLeast6xl: false,
-  isScreenAtLeast7xl: false,
-  isScreenAtLeastLg: false,
-  isScreenAtLeastMd: false,
-  isScreenAtLeastSm: false,
-  isScreenAtLeastXl: false,
-  isScreenAtLeastXs: false,
-  isSubPanelAtLeast2xl: false,
-  isSubPanelAtLeast2xs: false,
-  isSubPanelAtLeast3xl: false,
-  isSubPanelAtLeast4xl: false,
-  isSubPanelAtLeast5xl: false,
-  isSubPanelAtLeast6xl: false,
-  isSubPanelAtLeast7xl: false,
-  isSubPanelAtLeastLg: false,
-  isSubPanelAtLeastMd: false,
-  isSubPanelAtLeastSm: false,
-  isSubPanelAtLeastXl: false,
-  isSubPanelAtLeastXs: false,
-};
-
-const ContainerQueriesContext = createContext<ContainerQueriesState>(initialState);
-
-export const useContainerQueries = (): ContainerQueriesState => useContext(ContainerQueriesContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const ContainerQueriesContextProvider = ({ children }: Props): JSX.Element => {
-  const [screenWidth, setScreenWidth] = useState(0);
-  const [contentPanelWidth, setContentPanelWidth] = useState(0);
-  const [subPanelWidth, setSubPanelWidth] = useState(0);
-
-  useOnResize(Ids.Body, (width) => setScreenWidth(width));
-  useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
-  useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
-
-  const { fontSize } = useUserSettings();
-
-  const screenAtLeasts = useMemo(
-    () => ({
-      isScreenAtLeast2xs: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isScreenAtLeastXs: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xs")),
-      isScreenAtLeastSm: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("sm")),
-      isScreenAtLeastMd: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("md")),
-      isScreenAtLeastLg: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("lg")),
-      isScreenAtLeastXl: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xl")),
-      isScreenAtLeast2xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isScreenAtLeast3xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isScreenAtLeast4xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isScreenAtLeast5xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isScreenAtLeast6xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isScreenAtLeast7xl: applyContainerQuery(
-        fontSize,
-        screenWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [screenWidth, fontSize]
-  );
-
-  const columnLayouts = useMemo(
-    () => ({
-      is1ColumnLayout: !screenAtLeasts.isScreenAtLeast5xl,
-      is3ColumnsLayout: screenAtLeasts.isScreenAtLeast5xl,
-    }),
-    [screenAtLeasts.isScreenAtLeast5xl]
-  );
-
-  const subPanelAtLeasts = useMemo(
-    () => ({
-      isSubPanelAtLeast2xs: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isSubPanelAtLeastXs: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("xs")
-      ),
-      isSubPanelAtLeastSm: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("sm")
-      ),
-      isSubPanelAtLeastMd: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("md")
-      ),
-      isSubPanelAtLeastLg: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("lg")
-      ),
-      isSubPanelAtLeastXl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("xl")
-      ),
-      isSubPanelAtLeast2xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isSubPanelAtLeast3xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isSubPanelAtLeast4xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isSubPanelAtLeast5xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isSubPanelAtLeast6xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isSubPanelAtLeast7xl: applyContainerQuery(
-        fontSize,
-        subPanelWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [subPanelWidth, fontSize]
-  );
-
-  const contentPanelAtLeasts = useMemo(
-    () => ({
-      isContentPanelAtLeast2xs: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("2xs")
-      ),
-      isContentPanelAtLeastXs: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("xs")
-      ),
-      isContentPanelAtLeastSm: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("sm")
-      ),
-      isContentPanelAtLeastMd: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("md")
-      ),
-      isContentPanelAtLeastLg: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("lg")
-      ),
-      isContentPanelAtLeastXl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("xl")
-      ),
-      isContentPanelAtLeast2xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("2xl")
-      ),
-      isContentPanelAtLeast3xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("3xl")
-      ),
-      isContentPanelAtLeast4xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("4xl")
-      ),
-      isContentPanelAtLeast5xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("5xl")
-      ),
-      isContentPanelAtLeast6xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("6xl")
-      ),
-      isContentPanelAtLeast7xl: applyContainerQuery(
-        fontSize,
-        contentPanelWidth,
-        createAtLeastMediaQuery("7xl")
-      ),
-    }),
-    [contentPanelWidth, fontSize]
-  );
-
-  return (
-    <ContainerQueriesContext.Provider
-      value={{
-        ...screenAtLeasts,
-        ...contentPanelAtLeasts,
-        ...subPanelAtLeasts,
-        ...columnLayouts,
-      }}>
-      {children}
-    </ContainerQueriesContext.Provider>
-  );
-};
-
-type MediaQuery = { value: number; unit: "px" | "rem"; rule: "max" | "min" };
-
-const createAtLeastMediaQuery = (size: Size): MediaQuery => ({
-  value: sizes[size],
-  unit: "rem",
-  rule: "min",
-});
-
-const applyContainerQuery = (fontSize: number, width: number, query: MediaQuery): boolean => {
-  const breakpoint = query.value * (query.unit === "rem" ? 16 : 1) * fontSize;
-  return query.rule === "min" ? width >= breakpoint : width < breakpoint;
-};
diff --git a/src/contexts/LightBoxContext.tsx b/src/contexts/LightBoxContext.tsx
deleted file mode 100644
index c79e025..0000000
--- a/src/contexts/LightBoxContext.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { createContext, ReactNode, useCallback, useContext, useState } from "react";
-import { UploadImageFragment } from "graphql/generated";
-import { RequiredNonNullable } from "types/types";
-import { LightBox } from "components/LightBox";
-import { filterDefined } from "helpers/others";
-
-type LightBoxImagesNullable = (UploadImageFragment | string | null | undefined)[];
-type LightBoxImages = (UploadImageFragment | string)[];
-
-interface LightBoxState {
-  showLightBox: (images: LightBoxImagesNullable, index?: number) => void;
-}
-
-const initialState: RequiredNonNullable<LightBoxState> = {
-  showLightBox: () => null,
-};
-
-const LightBoxContext = createContext<LightBoxState>(initialState);
-
-export const useLightBox = (): LightBoxState => useContext(LightBoxContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const LightBoxContextProvider = ({ children }: Props): JSX.Element => {
-  const [isLightBoxVisible, setLightBoxVisibility] = useState(false);
-  const [lightBoxImages, setLightBoxImages] = useState<LightBoxImages>([]);
-  const [lightBoxIndex, setLightBoxIndex] = useState(0);
-
-  const showLightBox = useCallback((images: LightBoxImagesNullable, index = 0) => {
-    const filteredImages = filterDefined(images);
-    setLightBoxIndex(index);
-    setLightBoxImages(filteredImages);
-    setLightBoxVisibility(true);
-  }, []);
-
-  const closeLightBox = useCallback(() => {
-    setLightBoxVisibility(false);
-    setTimeout(() => setLightBoxImages([]), 100);
-  }, []);
-
-  return (
-    <LightBoxContext.Provider value={{ showLightBox }}>
-      <LightBox
-        isVisible={isLightBoxVisible}
-        onCloseRequest={closeLightBox}
-        image={lightBoxImages[lightBoxIndex]}
-        isNextImageAvailable={lightBoxIndex < lightBoxImages.length - 1}
-        isPreviousImageAvailable={lightBoxIndex > 0}
-        onPressNext={() => setLightBoxIndex((current) => current + 1)}
-        onPressPrevious={() => setLightBoxIndex((current) => current - 1)}
-      />
-
-      {children}
-    </LightBoxContext.Provider>
-  );
-};
diff --git a/src/contexts/LightBoxProvider.tsx b/src/contexts/LightBoxProvider.tsx
new file mode 100644
index 0000000..ca36116
--- /dev/null
+++ b/src/contexts/LightBoxProvider.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from "react";
+import { useEffectOnce } from "usehooks-ts";
+import { atom } from "jotai";
+import { UploadImageFragment } from "graphql/generated";
+import { LightBox } from "components/LightBox";
+import { filterDefined } from "helpers/others";
+import { atomPairing, useAtomSetter } from "helpers/atoms";
+
+const lightBoxAtom = atomPairing(
+  atom<{
+    showLightBox: (
+      images: (UploadImageFragment | string | null | undefined)[],
+      index?: number
+    ) => void;
+  }>({ showLightBox: () => null })
+);
+
+export const lightBox = lightBoxAtom[0];
+
+export const LightBoxProvider = (): JSX.Element => {
+  const [isLightBoxVisible, setLightBoxVisibility] = useState(false);
+  const [lightBoxImages, setLightBoxImages] = useState<(UploadImageFragment | string)[]>([]);
+  const [lightBoxIndex, setLightBoxIndex] = useState(0);
+
+  const setShowLightBox = useAtomSetter(lightBoxAtom);
+
+  useEffectOnce(() =>
+    setShowLightBox({
+      showLightBox: (images, index = 0) => {
+        const filteredImages = filterDefined(images);
+        setLightBoxIndex(index);
+        setLightBoxImages(filteredImages);
+        setLightBoxVisibility(true);
+      },
+    })
+  );
+
+  const closeLightBox = useCallback(() => {
+    setLightBoxVisibility(false);
+    setTimeout(() => setLightBoxImages([]), 100);
+  }, []);
+
+  return (
+    <LightBox
+      isVisible={isLightBoxVisible}
+      onCloseRequest={closeLightBox}
+      image={lightBoxImages[lightBoxIndex]}
+      isNextImageAvailable={lightBoxIndex < lightBoxImages.length - 1}
+      isPreviousImageAvailable={lightBoxIndex > 0}
+      onPressNext={() => setLightBoxIndex((current) => current + 1)}
+      onPressPrevious={() => setLightBoxIndex((current) => current - 1)}
+    />
+  );
+};
diff --git a/src/contexts/LocalDataContext.tsx b/src/contexts/LocalDataContext.tsx
deleted file mode 100644
index 5dbee6c..0000000
--- a/src/contexts/LocalDataContext.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { createContext, ReactNode, useContext, useMemo } from "react";
-import { useRouter } from "next/router";
-import { useFetch } from "usehooks-ts";
-import {
-  Langui,
-  Languages,
-  Currencies,
-  processCurrencies,
-  processLanguages,
-  processLangui,
-} from "helpers/localData";
-import { RequiredNonNullable } from "types/types";
-import { LocalDataFile } from "graphql/fetchLocalData";
-import {
-  LocalDataGetCurrenciesQuery,
-  LocalDataGetLanguagesQuery,
-  LocalDataGetWebsiteInterfacesQuery,
-} from "graphql/generated";
-
-interface LocalDataState {
-  langui: Langui;
-  languages: Languages;
-  currencies: Currencies;
-}
-
-const initialState: RequiredNonNullable<LocalDataState> = {
-  currencies: [],
-  languages: [],
-  langui: {},
-};
-
-const LocalDataContext = createContext<LocalDataState>(initialState);
-
-export const useLocalData = (): LocalDataState => useContext(LocalDataContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const LocalDataContextProvider = ({ children }: Props): JSX.Element => {
-  const langui = useLangui();
-  const languages = useLanguages();
-  const currencies = useCurrencies();
-
-  return (
-    <LocalDataContext.Provider value={{ langui, languages, currencies }}>
-      {children}
-    </LocalDataContext.Provider>
-  );
-};
-
-const getFileName = (name: LocalDataFile): string => `/local-data/${name}.json`;
-
-const useLangui = (): Langui => {
-  const { locale } = useRouter();
-  const { data: websiteInterfaces } = useFetch<LocalDataGetWebsiteInterfacesQuery>(
-    getFileName("websiteInterfaces")
-  );
-  return useMemo(() => processLangui(websiteInterfaces, locale), [websiteInterfaces, locale]);
-};
-
-const useCurrencies = (): Currencies => {
-  const { data: currencies } = useFetch<LocalDataGetCurrenciesQuery>(getFileName("currencies"));
-  return useMemo(() => processCurrencies(currencies), [currencies]);
-};
-
-const useLanguages = (): Languages => {
-  const { data: languages } = useFetch<LocalDataGetLanguagesQuery>(getFileName("languages"));
-  return useMemo(() => processLanguages(languages), [languages]);
-};
diff --git a/src/contexts/TerminalContext.tsx b/src/contexts/TerminalContext.tsx
deleted file mode 100644
index 08671ab..0000000
--- a/src/contexts/TerminalContext.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, {
-  createContext,
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  useContext,
-  useState,
-} from "react";
-import { RequiredNonNullable } from "types/types";
-
-interface TerminalState {
-  previousLines: string[];
-  previousCommands: string[];
-  setPreviousLines: Dispatch<SetStateAction<TerminalState["previousLines"]>>;
-  setPreviousCommands: Dispatch<SetStateAction<TerminalState["previousCommands"]>>;
-}
-
-const initialState: RequiredNonNullable<TerminalState> = {
-  previousLines: [],
-  previousCommands: [],
-  setPreviousLines: () => null,
-  setPreviousCommands: () => null,
-};
-
-const TerminalContext = createContext<TerminalState>(initialState);
-
-export const useTerminalContext = (): TerminalState => useContext(TerminalContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const TerminalContextProvider = ({ children }: Props): JSX.Element => {
-  const [previousLines, setPreviousLines] = useState(initialState.previousLines);
-  const [previousCommands, setPreviousCommands] = useState(initialState.previousCommands);
-  return (
-    <TerminalContext.Provider
-      value={{ previousCommands, previousLines, setPreviousCommands, setPreviousLines }}>
-      {children}
-    </TerminalContext.Provider>
-  );
-};
diff --git a/src/contexts/UserSettingsContext.tsx b/src/contexts/UserSettingsContext.tsx
deleted file mode 100644
index ba41b0c..0000000
--- a/src/contexts/UserSettingsContext.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import { useLocalStorage } from "usehooks-ts";
-import React, {
-  createContext,
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-} from "react";
-import { useRouter } from "next/router";
-import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { RequiredNonNullable } from "types/types";
-import { getDefaultPreferredLanguages } from "helpers/locales";
-import { useDarkMode } from "hooks/useDarkMode";
-import { SettingsPopup } from "components/Panels/SettingsPopup";
-
-interface UserSettingsState {
-  fontSize: number;
-  setFontSize: Dispatch<SetStateAction<UserSettingsState["fontSize"]>>;
-
-  darkMode: boolean;
-  toggleDarkMode: () => void;
-  setDarkMode: Dispatch<SetStateAction<UserSettingsState["darkMode"]>>;
-
-  selectedThemeMode: boolean;
-  toggleSelectedThemeMode: () => void;
-  setSelectedThemeMode: Dispatch<SetStateAction<UserSettingsState["selectedThemeMode"]>>;
-
-  dyslexic: boolean;
-  toggleDyslexic: () => void;
-  setDyslexic: Dispatch<SetStateAction<UserSettingsState["dyslexic"]>>;
-
-  currency: string;
-  setCurrency: Dispatch<SetStateAction<UserSettingsState["currency"]>>;
-
-  playerName: string;
-  setPlayerName: Dispatch<SetStateAction<UserSettingsState["playerName"]>>;
-
-  preferredLanguages: string[];
-  setPreferredLanguages: Dispatch<SetStateAction<UserSettingsState["preferredLanguages"]>>;
-}
-
-const initialState: RequiredNonNullable<UserSettingsState> = {
-  fontSize: 1,
-  setFontSize: () => null,
-
-  darkMode: false,
-  toggleDarkMode: () => null,
-  setDarkMode: () => null,
-
-  selectedThemeMode: false,
-  toggleSelectedThemeMode: () => null,
-  setSelectedThemeMode: () => null,
-
-  dyslexic: false,
-  toggleDyslexic: () => null,
-  setDyslexic: () => null,
-
-  currency: "USD",
-  setCurrency: () => null,
-
-  playerName: "",
-  setPlayerName: () => null,
-
-  preferredLanguages: [],
-  setPreferredLanguages: () => null,
-};
-
-const UserSettingsContext = createContext<UserSettingsState>(initialState);
-
-export const useUserSettings = (): UserSettingsState => useContext(UserSettingsContext);
-
-interface Props {
-  children: ReactNode;
-}
-
-export const UserSettingsProvider = ({ children }: Props): JSX.Element => {
-  const router = useRouter();
-
-  const [fontSize, setFontSize] = useLocalStorage("fontSize", initialState.fontSize);
-
-  const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
-    "darkMode",
-    initialState.darkMode
-  );
-
-  const [dyslexic, setDyslexic] = useLocalStorage("dyslexic", initialState.dyslexic);
-
-  const [currency, setCurrency] = useLocalStorage("currency", initialState.currency);
-
-  const [playerName, setPlayerName] = useLocalStorage("playerName", initialState.playerName);
-
-  const [preferredLanguages, setPreferredLanguages] = useLocalStorage(
-    "preferredLanguages",
-    initialState.preferredLanguages
-  );
-
-  const toggleDarkMode = () => {
-    setDarkMode((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleSelectedThemeMode = () => {
-    setSelectedThemeMode((current) => (isDefined(current) ? !current : current));
-  };
-
-  const toggleDyslexic = () => {
-    setDyslexic((current) => (isDefined(current) ? !current : current));
-  };
-
-  useEffect(() => {
-    if (preferredLanguages.length === 0) {
-      if (isDefinedAndNotEmpty(router.locale) && router.locales) {
-        setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
-      }
-    } else if (router.locale !== preferredLanguages[0]) {
-      /*
-       * Using a timeout to the code getting stuck into a loop when reaching the website with a
-       * different preferredLanguages[0] from router.locale
-       */
-      setTimeout(
-        async () =>
-          router.replace(router.asPath, router.asPath, {
-            locale: preferredLanguages[0],
-          }),
-        250
-      );
-    }
-  }, [preferredLanguages, router, router.locale, router.locales, setPreferredLanguages]);
-
-  useLayoutEffect(() => {
-    const html = document.getElementsByTagName("html")[0];
-    if (isDefined(html)) {
-      html.style.fontSize = `${fontSize * 100}%`;
-    }
-  }, [fontSize]);
-
-  useLayoutEffect(() => {
-    const next = document.getElementById("__next");
-    if (isDefined(next)) {
-      if (darkMode) {
-        next.classList.add("set-theme-dark");
-        next.classList.remove("set-theme-light");
-      } else {
-        next.classList.add("set-theme-light");
-        next.classList.remove("set-theme-dark");
-      }
-    }
-  }, [darkMode]);
-
-  useLayoutEffect(() => {
-    const next = document.getElementById("__next");
-    if (isDefined(next)) {
-      if (dyslexic) {
-        next.classList.add("set-theme-font-dyslexic");
-        next.classList.remove("set-theme-font-standard");
-      } else {
-        next.classList.add("set-theme-font-standard");
-        next.classList.remove("set-theme-font-dyslexic");
-      }
-    }
-  }, [dyslexic]);
-
-  return (
-    <UserSettingsContext.Provider
-      value={{
-        fontSize,
-        darkMode,
-        selectedThemeMode,
-        dyslexic,
-        currency,
-        playerName,
-        preferredLanguages,
-        setFontSize,
-        setDarkMode,
-        setSelectedThemeMode,
-        setDyslexic,
-        setCurrency,
-        setPlayerName,
-        setPreferredLanguages,
-        toggleDarkMode,
-        toggleSelectedThemeMode,
-        toggleDyslexic,
-      }}>
-      <SettingsPopup />
-      {children}
-    </UserSettingsContext.Provider>
-  );
-};
diff --git a/src/contexts/appLayout.ts b/src/contexts/appLayout.ts
new file mode 100644
index 0000000..506ccdf
--- /dev/null
+++ b/src/contexts/appLayout.ts
@@ -0,0 +1,29 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useScrollIntoView } from "hooks/useScrollIntoView";
+import { useAtomSetter } from "helpers/atoms";
+import { atoms } from "contexts/atoms";
+
+export const useAppLayout = (): void => {
+  const router = useRouter();
+
+  const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);
+  const setMainPanelOpened = useAtomSetter(atoms.layout.mainPanelOpened);
+  const setSubPanelOpened = useAtomSetter(atoms.layout.subPanelOpened);
+
+  useEffect(() => {
+    router.events.on("routeChangeStart", () => {
+      console.log("[Router Events] on routeChangeStart");
+      setSettingsOpened(false);
+      setMainPanelOpened(false);
+      setSubPanelOpened(false);
+    });
+
+    router.events.on("hashChangeStart", () => {
+      console.log("[Router Events] on hashChangeStart");
+      setSubPanelOpened(false);
+    });
+  }, [router, setSettingsOpened, setMainPanelOpened, setSubPanelOpened]);
+
+  useScrollIntoView();
+};
diff --git a/src/contexts/atoms.ts b/src/contexts/atoms.ts
new file mode 100644
index 0000000..8c2d790
--- /dev/null
+++ b/src/contexts/atoms.ts
@@ -0,0 +1,49 @@
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { localData } from "contexts/localData";
+import { containerQueries } from "contexts/containerQueries";
+import { atomPairing } from "helpers/atoms";
+import { settings } from "contexts/settings";
+import { lightBox } from "contexts/LightBoxProvider";
+
+/*
+ * I'm getting a weird error if I put those atoms in appLayout.ts
+ * So I'm putting the atoms here. Sucks, I know.
+ */
+
+/* [ APPLAYOUT ATOMS ] */
+
+const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
+const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
+const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
+const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
+const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
+const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
+
+const layout = {
+  mainPanelReduced,
+  settingsOpened,
+  subPanelOpened,
+  mainPanelOpened,
+  menuGesturesEnabled,
+  terminalMode,
+};
+
+/* [ TERMINAL ATOMS ] */
+
+const previousLines = atomPairing(atom<string[]>([]));
+const previousCommands = atomPairing(atom<string[]>([]));
+
+const terminal = {
+  previousLines,
+  previousCommands,
+};
+
+export const atoms = {
+  settings,
+  layout,
+  terminal,
+  localData,
+  lightBox,
+  containerQueries,
+};
diff --git a/src/contexts/containerQueries.ts b/src/contexts/containerQueries.ts
new file mode 100644
index 0000000..0e42c75
--- /dev/null
+++ b/src/contexts/containerQueries.ts
@@ -0,0 +1,146 @@
+import { atom, Getter } from "jotai";
+import { atomPairing, useAtomSetter } from "helpers/atoms";
+import { useOnResize } from "hooks/useOnResize";
+import { Ids } from "types/ids";
+import { settings } from "contexts/settings";
+
+type Size =
+  | "2xl"
+  | "2xs"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl"
+  | "lg"
+  | "md"
+  | "sm"
+  | "xl"
+  | "xs";
+
+const sizes: Record<Size, number> = {
+  "2xl": 42,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  lg: 32,
+  md: 28,
+  sm: 24,
+  xl: 36,
+  xs: 19,
+  "2xs": 16,
+};
+
+const isAtLeastContainerQuery = (width: number, size: Size, fontSize: number): boolean =>
+  width >= sizes[size] * 16 * fontSize;
+
+const screenWidth = atomPairing(atom(0));
+const contentPanelWidth = atomPairing(atom(0));
+const subPanelWidth = atomPairing(atom(0));
+
+const screenGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(screenWidth[0]), size, get(settings.fontSize[0]));
+
+const isScreenAtLeast2xs = atom((get) => screenGetter(get, "2xs"));
+const isScreenAtLeastXs = atom((get) => screenGetter(get, "xs"));
+const isScreenAtLeastSm = atom((get) => screenGetter(get, "sm"));
+const isScreenAtLeastMd = atom((get) => screenGetter(get, "md"));
+const isScreenAtLeastLg = atom((get) => screenGetter(get, "lg"));
+const isScreenAtLeastXl = atom((get) => screenGetter(get, "xl"));
+const isScreenAtLeast2xl = atom((get) => screenGetter(get, "2xl"));
+const isScreenAtLeast3xl = atom((get) => screenGetter(get, "3xl"));
+const isScreenAtLeast4xl = atom((get) => screenGetter(get, "4xl"));
+const isScreenAtLeast5xl = atom((get) => screenGetter(get, "5xl"));
+const isScreenAtLeast6xl = atom((get) => screenGetter(get, "6xl"));
+const isScreenAtLeast7xl = atom((get) => screenGetter(get, "7xl"));
+
+const is1ColumnLayout = atom((get) => !get(isScreenAtLeast5xl));
+const is3ColumnsLayout = atom((get) => get(isScreenAtLeast5xl));
+
+const contentPanelGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(contentPanelWidth[0]), size, get(settings.fontSize[0]));
+
+const isContentPanelAtLeast2xs = atom((get) => contentPanelGetter(get, "2xs"));
+const isContentPanelAtLeastXs = atom((get) => contentPanelGetter(get, "xs"));
+const isContentPanelAtLeastSm = atom((get) => contentPanelGetter(get, "sm"));
+const isContentPanelAtLeastMd = atom((get) => contentPanelGetter(get, "md"));
+const isContentPanelAtLeastLg = atom((get) => contentPanelGetter(get, "lg"));
+const isContentPanelAtLeastXl = atom((get) => contentPanelGetter(get, "xl"));
+const isContentPanelAtLeast2xl = atom((get) => contentPanelGetter(get, "2xl"));
+const isContentPanelAtLeast3xl = atom((get) => contentPanelGetter(get, "3xl"));
+const isContentPanelAtLeast4xl = atom((get) => contentPanelGetter(get, "4xl"));
+const isContentPanelAtLeast5xl = atom((get) => contentPanelGetter(get, "5xl"));
+const isContentPanelAtLeast6xl = atom((get) => contentPanelGetter(get, "6xl"));
+const isContentPanelAtLeast7xl = atom((get) => contentPanelGetter(get, "7xl"));
+
+const subPanelGetter = (get: Getter, size: Size) =>
+  isAtLeastContainerQuery(get(subPanelWidth[0]), size, get(settings.fontSize[0]));
+
+const isSubPanelAtLeast2xs = atom((get) => subPanelGetter(get, "2xs"));
+const isSubPanelAtLeastXs = atom((get) => subPanelGetter(get, "xs"));
+const isSubPanelAtLeastSm = atom((get) => subPanelGetter(get, "sm"));
+const isSubPanelAtLeastMd = atom((get) => subPanelGetter(get, "md"));
+const isSubPanelAtLeastLg = atom((get) => subPanelGetter(get, "lg"));
+const isSubPanelAtLeastXl = atom((get) => subPanelGetter(get, "xl"));
+const isSubPanelAtLeast2xl = atom((get) => subPanelGetter(get, "2xl"));
+const isSubPanelAtLeast3xl = atom((get) => subPanelGetter(get, "3xl"));
+const isSubPanelAtLeast4xl = atom((get) => subPanelGetter(get, "4xl"));
+const isSubPanelAtLeast5xl = atom((get) => subPanelGetter(get, "5xl"));
+const isSubPanelAtLeast6xl = atom((get) => subPanelGetter(get, "6xl"));
+const isSubPanelAtLeast7xl = atom((get) => subPanelGetter(get, "7xl"));
+
+export const containerQueries = {
+  is1ColumnLayout,
+  is3ColumnsLayout,
+
+  isScreenAtLeast2xs,
+  isScreenAtLeastXs,
+  isScreenAtLeastSm,
+  isScreenAtLeastMd,
+  isScreenAtLeastLg,
+  isScreenAtLeastXl,
+  isScreenAtLeast2xl,
+  isScreenAtLeast3xl,
+  isScreenAtLeast4xl,
+  isScreenAtLeast5xl,
+  isScreenAtLeast6xl,
+  isScreenAtLeast7xl,
+
+  isContentPanelAtLeast2xs,
+  isContentPanelAtLeastXs,
+  isContentPanelAtLeastSm,
+  isContentPanelAtLeastMd,
+  isContentPanelAtLeastLg,
+  isContentPanelAtLeastXl,
+  isContentPanelAtLeast2xl,
+  isContentPanelAtLeast3xl,
+  isContentPanelAtLeast4xl,
+  isContentPanelAtLeast5xl,
+  isContentPanelAtLeast6xl,
+  isContentPanelAtLeast7xl,
+
+  isSubPanelAtLeast2xs,
+  isSubPanelAtLeastXs,
+  isSubPanelAtLeastSm,
+  isSubPanelAtLeastMd,
+  isSubPanelAtLeastLg,
+  isSubPanelAtLeastXl,
+  isSubPanelAtLeast2xl,
+  isSubPanelAtLeast3xl,
+  isSubPanelAtLeast4xl,
+  isSubPanelAtLeast5xl,
+  isSubPanelAtLeast6xl,
+  isSubPanelAtLeast7xl,
+};
+
+export const useContainerQueries = (): void => {
+  const setScreenWidth = useAtomSetter(screenWidth);
+  const setContentPanelWidth = useAtomSetter(contentPanelWidth);
+  const setSubPanelWidth = useAtomSetter(subPanelWidth);
+
+  useOnResize(Ids.Body, (width) => setScreenWidth(width));
+  useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
+  useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
+};
diff --git a/src/contexts/localData.ts b/src/contexts/localData.ts
new file mode 100644
index 0000000..be54704
--- /dev/null
+++ b/src/contexts/localData.ts
@@ -0,0 +1,59 @@
+import { atom } from "jotai";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useFetch } from "usehooks-ts";
+import { atomPairing, useAtomSetter } from "helpers/atoms";
+import {
+  Languages,
+  Currencies,
+  Langui,
+  processLangui,
+  processCurrencies,
+  processLanguages,
+} from "helpers/localData";
+import {
+  LocalDataGetWebsiteInterfacesQuery,
+  LocalDataGetCurrenciesQuery,
+  LocalDataGetLanguagesQuery,
+} from "graphql/generated";
+import { LocalDataFile } from "graphql/fetchLocalData";
+
+const languages = atomPairing(atom<Languages>([]));
+const currencies = atomPairing(atom<Currencies>([]));
+const langui = atomPairing(atom<Langui>({}));
+
+export const localData = {
+  languages: languages[0],
+  currencies: currencies[0],
+  langui: langui[0],
+};
+
+const getFileName = (name: LocalDataFile): string => `/local-data/${name}.json`;
+
+export const useLocalData = (): void => {
+  const setLanguages = useAtomSetter(languages);
+  const setCurrencies = useAtomSetter(currencies);
+  const setLangui = useAtomSetter(langui);
+
+  const { locale } = useRouter();
+  const { data: rawLanguages } = useFetch<LocalDataGetLanguagesQuery>(getFileName("languages"));
+  const { data: rawCurrencies } = useFetch<LocalDataGetCurrenciesQuery>(getFileName("currencies"));
+  const { data: rawLangui } = useFetch<LocalDataGetWebsiteInterfacesQuery>(
+    getFileName("websiteInterfaces")
+  );
+
+  useEffect(() => {
+    console.log("[useLocalData] Refresh languages");
+    setLanguages(processLanguages(rawLanguages));
+  }, [rawLanguages, setLanguages]);
+
+  useEffect(() => {
+    console.log("[useLocalData] Refresh currencies");
+    setCurrencies(processCurrencies(rawCurrencies));
+  }, [rawCurrencies, setCurrencies]);
+
+  useEffect(() => {
+    console.log("[useLocalData] Refresh langui");
+    setLangui(processLangui(rawLangui, locale));
+  }, [locale, rawLangui, setLangui]);
+};
diff --git a/src/contexts/settings.ts b/src/contexts/settings.ts
new file mode 100644
index 0000000..fe98769
--- /dev/null
+++ b/src/contexts/settings.ts
@@ -0,0 +1,103 @@
+import { useRouter } from "next/router";
+import { useLayoutEffect, useEffect } from "react";
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
+import { getDefaultPreferredLanguages } from "helpers/locales";
+import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
+import { usePrefersDarkMode } from "hooks/useMediaQuery";
+
+export enum ThemeMode {
+  Dark = "dark",
+  Auto = "auto",
+  Light = "light",
+}
+
+const preferredLanguagesAtom = atomPairing(atomWithStorage<string[]>("preferredLanguages", []));
+const themeModeAtom = atomPairing(atomWithStorage<ThemeMode>("themeMode", ThemeMode.Auto));
+const darkModeAtom = atomPairing(atom(false));
+const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1));
+const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false));
+const currencyAtom = atomPairing(atomWithStorage("currency", "USD"));
+const playerNameAtom = atomPairing(atomWithStorage("playerName", ""));
+
+export const settings = {
+  preferredLanguages: preferredLanguagesAtom,
+  themeMode: themeModeAtom,
+  darkMode: darkModeAtom,
+  fontSize: fontSizeAtom,
+  dyslexic: dyslexicAtom,
+  currency: currencyAtom,
+  playerName: playerNameAtom,
+};
+
+export const useSettings = (): void => {
+  const router = useRouter();
+  const [preferredLanguages, setPreferredLanguages] = useAtomPair(preferredLanguagesAtom);
+  const fontSize = useAtomGetter(fontSizeAtom);
+  const isDyslexic = useAtomGetter(dyslexicAtom);
+  const [isDarkMode, setDarkMode] = useAtomPair(darkModeAtom);
+  const themeMode = useAtomGetter(themeModeAtom);
+
+  useLayoutEffect(() => {
+    const html = document.getElementsByTagName("html")[0];
+    if (isDefined(html)) {
+      html.style.fontSize = `${fontSize * 100}%`;
+    }
+  }, [fontSize]);
+
+  useLayoutEffect(() => {
+    const next = document.getElementById("__next");
+    if (isDefined(next)) {
+      if (isDyslexic) {
+        next.classList.add("set-theme-font-dyslexic");
+        next.classList.remove("set-theme-font-standard");
+      } else {
+        next.classList.add("set-theme-font-standard");
+        next.classList.remove("set-theme-font-dyslexic");
+      }
+    }
+  }, [isDyslexic]);
+
+  /* DARK MODE */
+  const prefersDarkMode = usePrefersDarkMode();
+
+  useEffect(() => {
+    setDarkMode(themeMode === ThemeMode.Auto ? prefersDarkMode : themeMode === ThemeMode.Dark);
+  }, [prefersDarkMode, setDarkMode, themeMode]);
+
+  useLayoutEffect(() => {
+    const next = document.getElementById("__next");
+    if (isDefined(next)) {
+      if (isDarkMode) {
+        next.classList.add("set-theme-dark");
+        next.classList.remove("set-theme-light");
+      } else {
+        next.classList.add("set-theme-light");
+        next.classList.remove("set-theme-dark");
+      }
+    }
+  }, [isDarkMode]);
+
+  /* PREFERRED LANGUAGES */
+
+  useEffect(() => {
+    if (preferredLanguages.length === 0) {
+      if (isDefinedAndNotEmpty(router.locale) && router.locales) {
+        setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
+      }
+    } else if (router.locale !== preferredLanguages[0]) {
+      /*
+       * Using a timeout to the code getting stuck into a loop when reaching the website with a
+       * different preferredLanguages[0] from router.locale
+       */
+      setTimeout(
+        async () =>
+          router.replace(router.asPath, router.asPath, {
+            locale: preferredLanguages[0],
+          }),
+        250
+      );
+    }
+  }, [preferredLanguages, router, setPreferredLanguages]);
+};
diff --git a/src/helpers/analytics.ts b/src/helpers/analytics.ts
index 1915419..c12a1f7 100644
--- a/src/helpers/analytics.ts
+++ b/src/helpers/analytics.ts
@@ -2,6 +2,7 @@ export const sendAnalytics = (category: string, event: string): void => {
   try {
     umami(`[${category}] ${event}`);
   } catch (error) {
+    if (error instanceof ReferenceError) return;
     console.log(error);
   }
 };
diff --git a/src/helpers/atoms.ts b/src/helpers/atoms.ts
new file mode 100644
index 0000000..35e5bb7
--- /dev/null
+++ b/src/helpers/atoms.ts
@@ -0,0 +1,26 @@
+import { atom, PrimitiveAtom, Atom, WritableAtom, useAtom } from "jotai";
+import { Dispatch, SetStateAction } from "react";
+
+type AtomPair<T> = [Atom<T>, WritableAtom<null, T>];
+
+export const atomPairing = <T>(anAtom: PrimitiveAtom<T>): AtomPair<T> => {
+  const getter = atom((get) => get(anAtom));
+  const setter = atom(null, (_get, set, newText: T) => set(anAtom, newText));
+  return [getter, setter];
+};
+
+export const useAtomSetter = <T>(atomPair: AtomPair<T>): Dispatch<SetStateAction<T>> => {
+  const [, setter] = useAtom(atomPair[1]);
+  return setter as Dispatch<SetStateAction<T>>;
+};
+
+export const useAtomGetter = <T>(atomPair: Atom<T> | AtomPair<T>): T => {
+  const atomGet = Array.isArray(atomPair) ? atomPair[0] : atomPair;
+  const [getter] = useAtom(atomGet);
+  return getter;
+};
+
+export const useAtomPair = <T>(atomPair: AtomPair<T>): [T, Dispatch<SetStateAction<T>>] => [
+  useAtomGetter(atomPair),
+  useAtomSetter(atomPair),
+];
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
deleted file mode 100644
index 3eb284f..0000000
--- a/src/hooks/useDarkMode.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-import { useLocalStorage } from "usehooks-ts";
-import { usePrefersDarkMode } from "./useMediaQuery";
-
-export const useDarkMode = (
-  key: string,
-  initialValue: boolean
-): [boolean, boolean, Dispatch<SetStateAction<boolean>>, Dispatch<SetStateAction<boolean>>] => {
-  const [darkMode, setDarkMode] = useLocalStorage(key, initialValue);
-  const prefersDarkMode = usePrefersDarkMode();
-  const [selectedThemeMode, setSelectedThemeMode] = useLocalStorage("selectedThemeMode", false);
-
-  useEffect(() => {
-    if (!selectedThemeMode) setDarkMode(prefersDarkMode);
-  }, [selectedThemeMode, prefersDarkMode, setDarkMode]);
-
-  return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
-};
diff --git a/src/hooks/useIsTerminalMode.ts b/src/hooks/useIsTerminalMode.ts
deleted file mode 100644
index 4ba8112..0000000
--- a/src/hooks/useIsTerminalMode.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useUserSettings } from "contexts/UserSettingsContext";
-
-export const useIsTerminalMode = (): boolean => {
-  const { playerName } = useUserSettings();
-  return playerName === "root";
-};
diff --git a/src/hooks/useSmartLanguage.ts b/src/hooks/useSmartLanguage.ts
index 0b27421..3f290af 100644
--- a/src/hooks/useSmartLanguage.ts
+++ b/src/hooks/useSmartLanguage.ts
@@ -3,8 +3,8 @@ import { useEffect, useMemo, useState } from "react";
 import { LanguageSwitcher } from "components/Inputs/LanguageSwitcher";
 import { filterDefined, isDefined } from "helpers/others";
 import { getPreferredLanguage } from "helpers/locales";
-import { useUserSettings } from "contexts/UserSettingsContext";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 interface Props<T> {
   items: T[];
@@ -17,8 +17,8 @@ export const useSmartLanguage = <T>({
   languageExtractor,
   transform = (item) => item,
 }: Props<T>): [T | undefined, typeof LanguageSwitcher, Parameters<typeof LanguageSwitcher>[0]] => {
-  const { preferredLanguages } = useUserSettings();
-  const { languages } = useLocalData();
+  const preferredLanguages = useAtomGetter(atoms.settings.preferredLanguages);
+  const languages = useAtomGetter(atoms.localData.languages);
   const router = useRouter();
 
   const availableLocales = useMemo(() => {
diff --git a/src/hooks/useStateWithLocalStorage.ts b/src/hooks/useStateWithLocalStorage.ts
deleted file mode 100644
index 5c7d211..0000000
--- a/src/hooks/useStateWithLocalStorage.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { isDefined } from "helpers/others";
-
-export const useStateWithLocalStorage = <T>(
-  key: string,
-  initialValue: T
-): [T, Dispatch<SetStateAction<T>>] => {
-  const [value, setValue] = useState<T>(initialValue);
-  const [isFromLocaleStorage, setFromLocaleStorage] = useState<boolean>(false);
-
-  useEffect(() => {
-    try {
-      const item = localStorage.getItem(key);
-      if (isDefined(item)) {
-        setValue(JSON.parse(item) as T);
-      } else {
-        setValue(initialValue);
-      }
-      setFromLocaleStorage(true);
-    } catch (error) {
-      console.warn(`Error reading localStorage key “${key}”:`, error);
-      setValue(initialValue);
-    }
-  }, [initialValue, key]);
-
-  useEffect(() => {
-    if (isFromLocaleStorage) localStorage.setItem(key, JSON.stringify(value));
-  }, [value, key, isFromLocaleStorage]);
-
-  return [value, setValue];
-};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 496222b..3112b18 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -5,7 +5,8 @@ import { ContentPanel } from "components/Containers/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { Img } from "components/Img";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -15,7 +16,7 @@ import { useLocalData } from "contexts/LocalDataContext";
 interface Props extends AppLayoutRequired {}
 
 const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <AppLayout
       contentPanel={
diff --git a/src/pages/500.tsx b/src/pages/500.tsx
index d59dc01..c4605be 100644
--- a/src/pages/500.tsx
+++ b/src/pages/500.tsx
@@ -5,7 +5,8 @@ import { ContentPanel } from "components/Containers/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { Img } from "components/Img";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -15,7 +16,7 @@ import { useLocalData } from "contexts/LocalDataContext";
 interface Props extends AppLayoutRequired {}
 
 const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <AppLayout
       contentPanel={
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index bbc6e04..0121a98 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -9,7 +9,6 @@ import "@fontsource/zen-maru-gothic/900.css";
 
 import type { AppProps } from "next/app";
 import Script from "next/script";
-import { AppContextProvider } from "contexts/AppLayoutContext";
 
 import "styles/debug.css";
 import "styles/formatted.css";
@@ -17,31 +16,31 @@ import "styles/others.css";
 import "styles/rc-slider.css";
 import "styles/tippy.css";
 
-import { TerminalContextProvider } from "contexts/TerminalContext";
-import { UserSettingsProvider as UserSettingsContextProvider } from "contexts/UserSettingsContext";
-import { LocalDataContextProvider } from "contexts/LocalDataContext";
-import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesContext";
-import { LightBoxContextProvider } from "contexts/LightBoxContext";
+import { useLocalData } from "contexts/localData";
+import { useAppLayout } from "contexts/appLayout";
+import { LightBoxProvider } from "contexts/LightBoxProvider";
+import { SettingsPopup } from "components/Panels/SettingsPopup";
+import { useSettings } from "contexts/settings";
+import { useContainerQueries } from "contexts/containerQueries";
 
-const AccordsLibraryApp = (props: AppProps): JSX.Element => (
-  <LocalDataContextProvider>
-    <AppContextProvider>
-      <UserSettingsContextProvider>
-        <ContainerQueriesContextProvider>
-          <TerminalContextProvider>
-            <LightBoxContextProvider>
-              <Script
-                async
-                defer
-                data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
-                src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
-              />
-              <props.Component {...props.pageProps} />
-            </LightBoxContextProvider>
-          </TerminalContextProvider>
-        </ContainerQueriesContextProvider>
-      </UserSettingsContextProvider>
-    </AppContextProvider>
-  </LocalDataContextProvider>
-);
+const AccordsLibraryApp = (props: AppProps): JSX.Element => {
+  useLocalData();
+  useAppLayout();
+  useSettings();
+  useContainerQueries();
+
+  return (
+    <>
+      <SettingsPopup />
+      <LightBoxProvider />
+      <Script
+        async
+        defer
+        data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
+        src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
+      />
+      <props.Component {...props.pageProps} />
+    </>
+  );
+};
 export default AccordsLibraryApp;
diff --git a/src/pages/about-us/accords-handbook.tsx b/src/pages/about-us/accords-handbook.tsx
index 54fbcd7..4cb9d13 100644
--- a/src/pages/about-us/accords-handbook.tsx
+++ b/src/pages/about-us/accords-handbook.tsx
@@ -1,6 +1,7 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +9,7 @@ import { useLocalData } from "contexts/LocalDataContext";
  */
 
 const AccordsHandbook = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <PostPage
       {...props}
diff --git a/src/pages/about-us/contact.tsx b/src/pages/about-us/contact.tsx
index 5571c7a..2c1ddee 100644
--- a/src/pages/about-us/contact.tsx
+++ b/src/pages/about-us/contact.tsx
@@ -7,8 +7,8 @@ import { cIf, cJoin } from "helpers/className";
 import { randomInt } from "helpers/numbers";
 import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
 import { sendAnalytics } from "helpers/analytics";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -17,8 +17,8 @@ import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 const AboutUs = (props: PostStaticProps): JSX.Element => {
   const router = useRouter();
-  const { langui } = useLocalData();
-  const { is1ColumnLayout } = useContainerQueries();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
   const [formResponse, setFormResponse] = useState("");
   const [formState, setFormState] = useState<"completed" | "ongoing" | "stale">("stale");
 
diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
index a43fdd9..37627f1 100644
--- a/src/pages/about-us/index.tsx
+++ b/src/pages/about-us/index.tsx
@@ -7,7 +7,8 @@ import { SubPanel } from "components/Containers/SubPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -17,7 +18,7 @@ import { useLocalData } from "contexts/LocalDataContext";
 interface Props extends AppLayoutRequired {}
 
 const AboutUs = (props: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <AppLayout
       subPanel={
diff --git a/src/pages/about-us/legality.tsx b/src/pages/about-us/legality.tsx
index c7b9a5f..a753c4d 100644
--- a/src/pages/about-us/legality.tsx
+++ b/src/pages/about-us/legality.tsx
@@ -1,6 +1,7 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +9,7 @@ import { useLocalData } from "contexts/LocalDataContext";
  */
 
 const Legality = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <PostPage
       {...props}
diff --git a/src/pages/about-us/sharing-policy.tsx b/src/pages/about-us/sharing-policy.tsx
index 7ed1b7e..850523e 100644
--- a/src/pages/about-us/sharing-policy.tsx
+++ b/src/pages/about-us/sharing-policy.tsx
@@ -1,6 +1,7 @@
 import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -8,7 +9,7 @@ import { useLocalData } from "contexts/LocalDataContext";
  */
 
 const SharingPolicy = (props: PostStaticProps): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <PostPage
       {...props}
diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx
index 005fa18..e6cd447 100644
--- a/src/pages/archives/index.tsx
+++ b/src/pages/archives/index.tsx
@@ -8,7 +8,8 @@ import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -18,7 +19,7 @@ import { useLocalData } from "contexts/LocalDataContext";
 interface Props extends AppLayoutRequired {}
 
 const Archives = (props: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const subPanel = useMemo(
     () => (
       <SubPanel>
diff --git a/src/pages/archives/videos/c/[uid].tsx b/src/pages/archives/videos/c/[uid].tsx
index 8ffe8b4..41e0709 100644
--- a/src/pages/archives/videos/c/[uid].tsx
+++ b/src/pages/archives/videos/c/[uid].tsx
@@ -22,8 +22,8 @@ import { SmartList } from "components/SmartList";
 import { cIf } from "helpers/className";
 import { TextInput } from "components/Inputs/TextInput";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -45,9 +45,9 @@ interface Props extends AppLayoutRequired {
 
 const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
 
diff --git a/src/pages/archives/videos/index.tsx b/src/pages/archives/videos/index.tsx
index 936a9bf..1dd29e3 100644
--- a/src/pages/archives/videos/index.tsx
+++ b/src/pages/archives/videos/index.tsx
@@ -22,8 +22,8 @@ import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
 import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -44,9 +44,9 @@ interface Props extends AppLayoutRequired {
 }
 
 const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
 
diff --git a/src/pages/archives/videos/v/[uid].tsx b/src/pages/archives/videos/v/[uid].tsx
index 095086a..e0115a8 100644
--- a/src/pages/archives/videos/v/[uid].tsx
+++ b/src/pages/archives/videos/v/[uid].tsx
@@ -10,7 +10,6 @@ import { NavOption } from "components/PanelComponents/NavOption";
 import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { useAppLayout } from "contexts/AppLayoutContext";
 import { GetVideoQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { prettyDate, prettyShortenNumber } from "helpers/formatters";
@@ -18,8 +17,8 @@ import { filterHasAttributes, isDefined } from "helpers/others";
 import { getVideoFile } from "helpers/videos";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -31,9 +30,8 @@ interface Props extends AppLayoutRequired {
 }
 
 const Video = ({ video, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
-  const { setSubPanelOpen } = useAppLayout();
-  const { langui } = useLocalData();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const langui = useAtomGetter(atoms.localData.langui);
   const router = useRouter();
 
   const subPanel = useMemo(
@@ -47,29 +45,12 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
 
         <HorizontalLine />
 
-        <NavOption
-          title={langui.video}
-          url="#video"
-          border
-          onClick={() => setSubPanelOpen(false)}
-        />
-
-        <NavOption
-          title={langui.channel}
-          url="#channel"
-          border
-          onClick={() => setSubPanelOpen(false)}
-        />
-
-        <NavOption
-          title={langui.description}
-          url="#description"
-          border
-          onClick={() => setSubPanelOpen(false)}
-        />
+        <NavOption title={langui.video} url="#video" border />
+        <NavOption title={langui.channel} url="#channel" border />
+        <NavOption title={langui.description} url="#description" border />
       </SubPanel>
     ),
-    [setSubPanelOpen, langui]
+    [langui]
   );
 
   const contentPanel = useMemo(
diff --git a/src/pages/chronicles/[slug]/index.tsx b/src/pages/chronicles/[slug]/index.tsx
index 5697a0a..84b2850 100644
--- a/src/pages/chronicles/[slug]/index.tsx
+++ b/src/pages/chronicles/[slug]/index.tsx
@@ -19,7 +19,8 @@ import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/local
 import { getDescription } from "helpers/description";
 import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -32,7 +33,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: chronicle.translations,
     languageExtractor: useCallback(
diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx
index 6437539..208b214 100644
--- a/src/pages/chronicles/index.tsx
+++ b/src/pages/chronicles/index.tsx
@@ -12,7 +12,8 @@ import { getOpenGraph } from "helpers/openGraph";
 import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -24,7 +25,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const subPanel = useMemo(
     () => (
       <SubPanel>
diff --git a/src/pages/contents/[slug].tsx b/src/pages/contents/[slug].tsx
index d3c7050..cb32da4 100644
--- a/src/pages/contents/[slug].tsx
+++ b/src/pages/contents/[slug].tsx
@@ -32,8 +32,8 @@ import { TranslatedPreviewLine } from "components/PreviewLine";
 import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { Ids } from "types/ids";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -45,8 +45,11 @@ interface Props extends AppLayoutRequired {
 }
 
 const Content = ({ content, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast2xl, is1ColumnLayout } = useContainerQueries();
-  const { langui, languages } = useLocalData();
+  const isContentPanelAtLeast2xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast2xl);
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+
+  const langui = useAtomGetter(atoms.localData.langui);
+  const languages = useAtomGetter(atoms.localData.languages);
 
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: content.translations,
diff --git a/src/pages/contents/all.tsx b/src/pages/contents/all.tsx
index cbdd32b..1525854 100644
--- a/src/pages/contents/all.tsx
+++ b/src/pages/contents/all.tsx
@@ -25,8 +25,8 @@ import { TranslatedPreviewCard } from "components/PreviewCard";
 import { cJoin, cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -50,8 +50,8 @@ interface Props extends AppLayoutRequired {
 
 const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const { langui } = useLocalData();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const [groupingMethod, setGroupingMethod] = useState<number>(
     DEFAULT_FILTERS_STATE.groupingMethod
diff --git a/src/pages/contents/folder/[slug].tsx b/src/pages/contents/folder/[slug].tsx
index f3bc266..4eea4f0 100644
--- a/src/pages/contents/folder/[slug].tsx
+++ b/src/pages/contents/folder/[slug].tsx
@@ -18,8 +18,8 @@ import { TranslatedPreviewCard } from "components/PreviewCard";
 import { HorizontalLine } from "components/HorizontalLine";
 import { cJoin, cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { TranslatedPreviewFolder } from "components/Contents/PreviewFolder";
 
 /*
@@ -34,8 +34,8 @@ interface Props extends AppLayoutRequired {
 }
 
 const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const subPanel = useMemo(
     () => (
@@ -273,7 +273,7 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
  */
 
 const NoContentNorFolderMessage = () => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <div className="grid place-content-center">
       <div
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 481a010..8240587 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,8 +2,8 @@ import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
 import { getOpenGraph } from "helpers/openGraph";
 import { Terminal } from "components/Cli/Terminal";
-import { useIsTerminalMode } from "hooks/useIsTerminalMode";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -11,8 +11,8 @@ import { useLocalData } from "contexts/LocalDataContext";
  */
 
 const Home = ({ ...otherProps }: PostStaticProps): JSX.Element => {
-  const { langui } = useLocalData();
-  const isTerminalMode = useIsTerminalMode();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
   if (isTerminalMode) {
     return (
diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx
index ff6eae0..4c53865 100644
--- a/src/pages/library/[slug]/index.tsx
+++ b/src/pages/library/[slug]/index.tsx
@@ -51,10 +51,8 @@ import { useIntersectionList } from "hooks/useIntersectionList";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
 import { Ids } from "types/ids";
-import { useUserSettings } from "contexts/UserSettingsContext";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
-import { useLightBox } from "contexts/LightBoxContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -74,14 +72,18 @@ interface Props extends AppLayoutRequired {
 }
 
 const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
-  const { currency } = useUserSettings();
-  const { langui, currencies } = useLocalData();
-  const { isContentPanelAtLeast3xl, isContentPanelAtLeastSm } = useContainerQueries();
+  const currency = useAtomGetter(atoms.settings.currency);
+  const langui = useAtomGetter(atoms.localData.langui);
+  const currencies = useAtomGetter(atoms.localData.currencies);
+
+  const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
+  const isContentPanelAtLeastSm = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastSm);
+
   const hoverable = useDeviceSupportsHover();
   const router = useRouter();
   const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(false);
 
-  const { showLightBox } = useLightBox();
+  const { showLightBox } = useAtomGetter(atoms.lightBox);
 
   useScrollTopOnChange(Ids.ContentPanel, [item]);
   const currentIntersection = useIntersectionList(intersectionIds);
@@ -692,7 +694,7 @@ const ContentLine = ({
   parentSlug,
   condensed,
 }: ContentLineProps): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const { value: isOpened, toggle: toggleOpened } = useBoolean(false);
   const [selectedTranslation] = useSmartLanguage({
     items: content?.translations ?? [],
diff --git a/src/pages/library/[slug]/reader.tsx b/src/pages/library/[slug]/reader.tsx
index fc4e26a..f5c76aa 100644
--- a/src/pages/library/[slug]/reader.tsx
+++ b/src/pages/library/[slug]/reader.tsx
@@ -41,14 +41,13 @@ import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { TranslatedProps } from "types/TranslatedProps";
 import { prettyInlineTitle, prettySlug } from "helpers/formatters";
 import { useFullscreen } from "hooks/useFullscreen";
-import { useUserSettings } from "contexts/UserSettingsContext";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 const CUSTOM_DARK_DROPSHADOW = `
-drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
-drop-shadow(0 1em    1em rgb(var(--theme-color-shade) / 40%))
+  drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
+  drop-shadow(0 1em    1em rgb(var(--theme-color-shade) / 40%))
   drop-shadow(0 2em    2em rgb(var(--theme-color-shade) / 60%))
   drop-shadow(0 12em  12em rgb(var(--theme-color-shade) / 80%))`;
 
@@ -90,9 +89,9 @@ const LibrarySlug = ({
   item,
   ...otherProps
 }: Props): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
-  const { langui } = useLocalData();
-  const { darkMode } = useUserSettings();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isDarkMode = useAtomGetter(atoms.settings.darkMode);
   const {
     filterSettings,
     isSidePagesEnabled,
@@ -453,7 +452,7 @@ const LibrarySlug = ({
                 display: "grid",
                 placeContent: "center",
                 filter: filterSettings.dropShadow
-                  ? darkMode
+                  ? isDarkMode
                     ? CUSTOM_DARK_DROPSHADOW
                     : CUSTOM_LIGHT_DROPSHADOW
                   : undefined,
@@ -631,7 +630,7 @@ const LibrarySlug = ({
       is1ColumnLayout,
       currentZoom,
       filterSettings,
-      darkMode,
+      isDarkMode,
       pageHeight,
       effectiveDisplayMode,
       firstPage,
@@ -798,7 +797,7 @@ interface PageFiltersProps {
 }
 
 const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
-  const { darkMode } = useUserSettings();
+  const isDarkMode = useAtomGetter(atoms.settings.darkMode);
   const commonCss = useMemo(
     () => cJoin("absolute inset-0", cIf(page === "right", "[background-position-x:-100%]")),
     [page]
@@ -823,7 +822,7 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
             commonCss,
             `bg-blend-lighten mix-blend-multiply [background-image:url(/reader/book-fold.webp)]
           [background-size:200%_100%]`,
-            cIf(!darkMode, "bg-[#FFF]/50")
+            cIf(!isDarkMode, "bg-[#FFF]/50")
           )}
         />
       )}
@@ -834,7 +833,7 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
             className={cJoin(
               commonCss,
               `bg-blend-lighten mix-blend-multiply [background-size:200%_100%]`,
-              cIf(!darkMode, "bg-[#FFF]/50"),
+              cIf(!isDarkMode, "bg-[#FFF]/50"),
               cIf(
                 page === "single",
                 "[background-image:url(/reader/lighting-single-page.webp)]",
@@ -846,7 +845,7 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
             className={cJoin(
               commonCss,
               `bg-blend-lighten mix-blend-soft-light [background-size:200%_100%]`,
-              cIf(!darkMode, "bg-[#FFF]/30"),
+              cIf(!isDarkMode, "bg-[#FFF]/30"),
               cIf(
                 page === "single",
                 "[background-image:url(/reader/specular-single-page.webp)]",
@@ -889,8 +888,8 @@ interface ScanSetProps {
 }
 
 const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps): JSX.Element => {
-  const { is1ColumnLayout } = useContainerQueries();
-  const { langui } = useLocalData();
+  const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
+  const langui = useAtomGetter(atoms.localData.langui);
   const [selectedScan, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: scanSet,
     languageExtractor: useCallback(
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 5d0bfdb..6476846 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -31,9 +31,9 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { cIf, cJoin } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
 
 /*
  *                                         ╭─────────────╮
@@ -62,9 +62,11 @@ interface Props extends AppLayoutRequired {
 
 const Library = ({ items, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const { langui, currencies } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const currencies = useAtomGetter(atoms.localData.currencies);
+
   const { libraryItemUserStatus } = useLibraryItemUserStatus();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
 
diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx
index 3edd14a..389efc7 100644
--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@@ -5,7 +5,8 @@ import { SubPanel } from "components/Containers/SubPanel";
 import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -14,7 +15,7 @@ import { useLocalData } from "contexts/LocalDataContext";
 
 interface Props extends AppLayoutRequired {}
 const Merch = (props: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   return (
     <AppLayout
       subPanel={
diff --git a/src/pages/news/[slug].tsx b/src/pages/news/[slug].tsx
index 00360de..67bd2fa 100644
--- a/src/pages/news/[slug].tsx
+++ b/src/pages/news/[slug].tsx
@@ -4,14 +4,13 @@ import { PostPage } from "components/PostPage";
 import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { filterHasAttributes, isDefined, isDefinedAndNotEmpty } from "helpers/others";
-import { useIsTerminalMode } from "hooks/useIsTerminalMode";
 import { Terminal } from "components/Cli/Terminal";
 import { PostWithTranslations } from "types/types";
 import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
 import { prettyTerminalBoxedTitle } from "helpers/terminal";
 import { prettyMarkdown } from "helpers/description";
-import { useLocalData } from "contexts/LocalDataContext";
-
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
@@ -20,8 +19,8 @@ import { useLocalData } from "contexts/LocalDataContext";
 interface Props extends PostStaticProps {}
 
 const LibrarySlug = (props: Props): JSX.Element => {
-  const { langui } = useLocalData();
-  const isTerminalMode = useIsTerminalMode();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
   const router = useRouter();
 
   if (isTerminalMode) {
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index d8891a0..9eb8523 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -23,10 +23,9 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
-import { useIsTerminalMode } from "hooks/useIsTerminalMode";
 import { Terminal } from "components/Cli/Terminal";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -48,8 +47,8 @@ interface Props extends AppLayoutRequired {
 }
 
 const News = ({ posts, ...otherProps }: Props): JSX.Element => {
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
-  const { langui } = useLocalData();
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
   const {
@@ -57,7 +56,7 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
     toggle: toggleKeepInfoVisible,
     setValue: setKeepInfoVisible,
   } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
-  const isTerminalMode = useIsTerminalMode();
+  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
   const subPanel = useMemo(
     () => (
diff --git a/src/pages/wiki/[slug]/index.tsx b/src/pages/wiki/[slug]/index.tsx
index 2943da4..3781a76 100644
--- a/src/pages/wiki/[slug]/index.tsx
+++ b/src/pages/wiki/[slug]/index.tsx
@@ -22,10 +22,8 @@ import { cIf, cJoin } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { Terminal } from "components/Cli/Terminal";
 import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
-import { useIsTerminalMode } from "hooks/useIsTerminalMode";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
-import { useLightBox } from "contexts/LightBoxContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -37,10 +35,10 @@ interface Props extends AppLayoutRequired {
 }
 
 const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const router = useRouter();
-  const isTerminalMode = useIsTerminalMode();
-  const { showLightBox } = useLightBox();
+  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
+  const { showLightBox } = useAtomGetter(atoms.lightBox);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: page.translations,
     languageExtractor: useCallback(
@@ -49,7 +47,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
       []
     ),
   });
-  const { is3ColumnsLayout } = useContainerQueries();
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
 
   const subPanel = useMemo(
     () => (
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx
index 21fd03c..d164917 100644
--- a/src/pages/wiki/chronology.tsx
+++ b/src/pages/wiki/chronology.tsx
@@ -31,7 +31,8 @@ import { TranslatedNavOption } from "components/PanelComponents/NavOption";
 import { useIntersectionList } from "hooks/useIntersectionList";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
-import { useLocalData } from "contexts/LocalDataContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                           ╭────────╮
@@ -44,7 +45,7 @@ interface Props extends AppLayoutRequired {
 }
 
 const Chronology = ({ chronologyItems, chronologyEras, ...otherProps }: Props): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const ids = useMemo(
     () =>
       filterHasAttributes(chronologyEras, ["attributes"] as const).map(
@@ -315,7 +316,7 @@ interface ChronologyEventProps {
 }
 
 export const ChronologyEvent = ({ event, id }: ChronologyEventProps): JSX.Element => {
-  const { langui } = useLocalData();
+  const langui = useAtomGetter(atoms.localData.langui);
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: event.translations ?? [],
     languageExtractor: useCallback(
diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx
index 35c15f6..86f4b09 100644
--- a/src/pages/wiki/index.tsx
+++ b/src/pages/wiki/index.tsx
@@ -26,9 +26,8 @@ import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { Terminal } from "components/Cli/Terminal";
-import { useIsTerminalMode } from "hooks/useIsTerminalMode";
-import { useLocalData } from "contexts/LocalDataContext";
-import { useContainerQueries } from "contexts/ContainerQueriesContext";
+import { atoms } from "contexts/atoms";
+import { useAtomGetter } from "helpers/atoms";
 
 /*
  *                                         ╭─────────────╮
@@ -52,9 +51,9 @@ interface Props extends AppLayoutRequired {
 
 const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
-  const { langui } = useLocalData();
-  const { isContentPanelAtLeast4xl } = useContainerQueries();
-  const isTerminalMode = useIsTerminalMode();
+  const langui = useAtomGetter(atoms.localData.langui);
+  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
   const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
 
diff --git a/src/types/types.ts b/src/types/types.ts
index 62c91df..18fcb97 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -45,12 +45,6 @@ export interface ChronicleWithTranslations extends Omit<Chronicle, "translations
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
 
-export type RequiredNonNullable<T> = {
-  [P in keyof T]-?: NonNullable<T[P]>;
-};
-
-// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
-
 export enum LibraryItemUserStatus {
   None = 0,
   Want = 1,