diff --git a/package-lock.json b/package-lock.json
index dd4adc2ea..1949d91c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@dashpress/bacteria": "^0.0.12",
+        "@tanstack/react-query": "^5.28.9",
         "@tanstack/react-table": "^8.7.9",
         "bcrypt": "^5.0.1",
         "change-case": "^4.1.2",
@@ -48,7 +49,6 @@
         "react-final-form-arrays": "^3.1.4",
         "react-hot-toast": "^2.2.0",
         "react-paginate": "^8.1.3",
-        "react-query": "^3.39.2",
         "react-quill": "^2.0.0",
         "react-select": "^5.3.2",
         "react-simple-code-editor": "^0.11.0",
@@ -8234,6 +8234,30 @@
         "node": ">=14.16"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.9.tgz",
+      "integrity": "sha512-hNlfCiqZevr3GRVPXS3MhaGW5hjcxvCsIQ4q6ff7EPlvFwYZaS+0d9EIIgofnegDaU2BbCDlyURoYfRl5rmzow==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.9.tgz",
+      "integrity": "sha512-vwifBkGXsydsLxFOBMe3+f8kvtDoqDRDwUNjPHVDDt+FoBetCbOWAUHgZn4k+CVeZgLmy7bx6aKeDbe3e8koOQ==",
+      "dependencies": {
+        "@tanstack/query-core": "5.28.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.9.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.3.tgz",
@@ -10315,6 +10339,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/at-least-node": {
@@ -10837,7 +10862,9 @@
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true,
       "license": "Unlicense",
+      "optional": true,
       "engines": {
         "node": ">=0.6"
       }
@@ -11062,22 +11089,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/broadcast-channel": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
-      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "detect-node": "^2.1.0",
-        "js-sha3": "0.8.0",
-        "microseconds": "0.2.0",
-        "nano-time": "1.0.0",
-        "oblivious-set": "1.0.0",
-        "rimraf": "3.0.2",
-        "unload": "2.2.0"
-      }
-    },
     "node_modules/brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -12260,6 +12271,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
@@ -14395,6 +14407,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -14505,12 +14518,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "license": "MIT"
-    },
     "node_modules/detect-package-manager": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
@@ -17259,25 +17266,6 @@
       "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
       "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -17416,6 +17404,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -20798,12 +20787,6 @@
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
       "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA=="
     },
-    "node_modules/js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==",
-      "license": "MIT"
-    },
     "node_modules/js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -21829,16 +21812,6 @@
         "marked": "^0.3.12"
       }
     },
-    "node_modules/match-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
-      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "remove-accents": "0.4.2"
-      }
-    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -22264,6 +22237,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -22273,6 +22247,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -22794,15 +22769,6 @@
       "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==",
       "license": "MIT"
     },
-    "node_modules/nano-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
-      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
-      "license": "ISC",
-      "dependencies": {
-        "big-integer": "^1.6.16"
-      }
-    },
     "node_modules/nanoid": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
@@ -23636,12 +23602,6 @@
       "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
       "dev": true
     },
-    "node_modules/oblivious-set": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
-      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==",
-      "license": "MIT"
-    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -25727,11 +25687,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -26332,32 +26287,6 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/react-query": {
-      "version": "3.39.2",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.2.tgz",
-      "integrity": "sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
@@ -26996,12 +26925,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==",
-      "license": "MIT"
-    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -31120,16 +31043,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/unload": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
-      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@babel/runtime": "^7.6.2",
-        "detect-node": "^2.0.4"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -38563,6 +38476,19 @@
         "defer-to-connect": "^2.0.1"
       }
     },
+    "@tanstack/query-core": {
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.9.tgz",
+      "integrity": "sha512-hNlfCiqZevr3GRVPXS3MhaGW5hjcxvCsIQ4q6ff7EPlvFwYZaS+0d9EIIgofnegDaU2BbCDlyURoYfRl5rmzow=="
+    },
+    "@tanstack/react-query": {
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.9.tgz",
+      "integrity": "sha512-vwifBkGXsydsLxFOBMe3+f8kvtDoqDRDwUNjPHVDDt+FoBetCbOWAUHgZn4k+CVeZgLmy7bx6aKeDbe3e8koOQ==",
+      "requires": {
+        "@tanstack/query-core": "5.28.9"
+      }
+    },
     "@tanstack/react-table": {
       "version": "8.9.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.3.tgz",
@@ -40192,7 +40118,8 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -40573,7 +40500,9 @@
     "big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true,
+      "optional": true
     },
     "big.js": {
       "version": "5.2.2",
@@ -40748,21 +40677,6 @@
         "fill-range": "^7.0.1"
       }
     },
-    "broadcast-channel": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
-      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
-      "requires": {
-        "@babel/runtime": "^7.7.2",
-        "detect-node": "^2.1.0",
-        "js-sha3": "0.8.0",
-        "microseconds": "0.2.0",
-        "nano-time": "1.0.0",
-        "oblivious-set": "1.0.0",
-        "rimraf": "3.0.2",
-        "unload": "2.2.0"
-      }
-    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -41626,6 +41540,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -43272,7 +43187,8 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true
     },
     "delegates": {
       "version": "1.0.0",
@@ -43343,11 +43259,6 @@
       "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
       "dev": true
     },
-    "detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
-    },
     "detect-package-manager": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
@@ -45446,11 +45357,6 @@
       "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
       "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
     },
-    "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
-    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -45547,6 +45453,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -47974,11 +47881,6 @@
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
       "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA=="
     },
-    "js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
-    },
     "js-string-escape": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
@@ -48717,15 +48619,6 @@
         "marked": "^0.3.12"
       }
     },
-    "match-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
-      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
-      "requires": {
-        "@babel/runtime": "^7.12.5",
-        "remove-accents": "0.4.2"
-      }
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -49056,12 +48949,14 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -49464,14 +49359,6 @@
         }
       }
     },
-    "nano-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
-      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
-      "requires": {
-        "big-integer": "^1.6.16"
-      }
-    },
     "nanoid": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
@@ -50089,11 +49976,6 @@
       "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
       "dev": true
     },
-    "oblivious-set": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
-      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
-    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -51562,11 +51444,6 @@
         "ipaddr.js": "1.9.1"
       }
     },
-    "proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -52007,16 +51884,6 @@
         "warning": "^4.0.2"
       }
     },
-    "react-query": {
-      "version": "3.39.2",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.2.tgz",
-      "integrity": "sha512-F6hYDKyNgDQfQOuR1Rsp3VRzJnWHx6aRnnIZHMNGGgbL3SBgpZTDg8MQwmxOgpCAoqZJA+JSNCydF1xGJqKOCA==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
-      }
-    },
     "react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
@@ -52493,11 +52360,6 @@
         "mdast-squeeze-paragraphs": "^4.0.0"
       }
     },
-    "remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
-    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -55574,15 +55436,6 @@
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
     },
-    "unload": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
-      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
-      "requires": {
-        "@babel/runtime": "^7.6.2",
-        "detect-node": "^2.0.4"
-      }
-    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2ea2a1906..384fad01e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "bin": "./bin/dashpress",
   "dependencies": {
     "@dashpress/bacteria": "^0.0.12",
+    "@tanstack/react-query": "^5.28.9",
     "@tanstack/react-table": "^8.7.9",
     "bcrypt": "^5.0.1",
     "change-case": "^4.1.2",
@@ -71,7 +72,6 @@
     "react-final-form-arrays": "^3.1.4",
     "react-hot-toast": "^2.2.0",
     "react-paginate": "^8.1.3",
-    "react-query": "^3.39.2",
     "react-quill": "^2.0.0",
     "react-select": "^5.3.2",
     "react-simple-code-editor": "^0.11.0",
@@ -102,19 +102,19 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",
-    "@types/node": "^18.0.0",
-    "@types/react-dom": "^18.0.4",
     "@types/cryptr": "^4.0.1",
     "@types/formidable": "^3.4.5",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/lodash": "^4.14.182",
     "@types/microseconds": "^0.2.0",
+    "@types/node": "^18.0.0",
     "@types/nodemailer": "^6.4.6",
     "@types/prismjs": "^1.26.0",
     "@types/qs": "^6.9.7",
     "@types/ramda": "0.27.40",
     "@types/react": "^18.0.11",
     "@types/react-datepicker": "^4.4.1",
+    "@types/react-dom": "^18.0.4",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
     "babel-loader": "^8.2.5",
diff --git a/src/frontend/components/FEPaginationTable/useFEPagination.spec.tsx b/src/frontend/components/FEPaginationTable/useFEPagination.spec.tsx
index 0294a5c34..e1374da22 100644
--- a/src/frontend/components/FEPaginationTable/useFEPagination.spec.tsx
+++ b/src/frontend/components/FEPaginationTable/useFEPagination.spec.tsx
@@ -1,5 +1,5 @@
 import fetchMock from "jest-fetch-mock";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { waitFor } from "@testing-library/react";
 import { FieldQueryFilter, FilterOperators } from "shared/types/data";
 import { renderHook } from "__tests__/_/lib/renderHook";
diff --git a/src/frontend/components/FEPaginationTable/useFEPagination.ts b/src/frontend/components/FEPaginationTable/useFEPagination.ts
index c03f42883..12953aba5 100644
--- a/src/frontend/components/FEPaginationTable/useFEPagination.ts
+++ b/src/frontend/components/FEPaginationTable/useFEPagination.ts
@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from "react-query";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
   FieldQueryFilter,
   FilterOperators,
@@ -18,72 +18,70 @@ export function useFEPagination<T>(
   endPoint: string,
   dataState: IPaginatedDataState<T>
 ): UseQueryResult<PaginatedData<T>> {
-  return useQuery<PaginatedData<T>>(
-    getQueryCachekey(endPoint),
-    async () => {
+  return useQuery<PaginatedData<T>>({
+    queryKey: getQueryCachekey(endPoint),
+    queryFn: async () => {
       return await makeGetRequest(endPoint, "Data could not be retrieved");
     },
-    {
-      select: (data: any) => {
-        let returnData: T[] = data as unknown as T[];
-        if (dataState.filters) {
-          returnData = returnData.filter((datum) => {
-            return dataState.filters.every(($filter) => {
-              const filter = $filter as unknown as FieldQueryFilter;
-              const filterValue = filter.value.value;
-              const currentValue = datum[filter.id];
-              if (!filterValue) {
-                return true;
-              }
-              switch (filter.value.operator) {
-                case FilterOperators.CONTAINS:
-                  return currentValue
-                    .toLowerCase()
-                    .includes((filterValue as string).toLowerCase());
-                case FilterOperators.EQUAL_TO:
-                  return currentValue === filterValue;
-                case FilterOperators.NOT_EQUAL:
-                  return currentValue !== filterValue;
-                case FilterOperators.LESS_THAN:
-                  return currentValue < filterValue;
-                case FilterOperators.GREATER_THAN:
-                  return currentValue > filterValue;
-                case FilterOperators.IN:
-                  return (filterValue as string[]).includes(currentValue);
-                case FilterOperators.NOT_IN:
-                  return !(filterValue as string[]).includes(currentValue);
-              }
+    select: (data: any) => {
+      let returnData: T[] = data as unknown as T[];
+      if (dataState.filters) {
+        returnData = returnData.filter((datum) => {
+          return dataState.filters.every(($filter) => {
+            const filter = $filter as unknown as FieldQueryFilter;
+            const filterValue = filter.value.value;
+            const currentValue = datum[filter.id];
+            if (!filterValue) {
               return true;
-            });
+            }
+            switch (filter.value.operator) {
+              case FilterOperators.CONTAINS:
+                return currentValue
+                  .toLowerCase()
+                  .includes((filterValue as string).toLowerCase());
+              case FilterOperators.EQUAL_TO:
+                return currentValue === filterValue;
+              case FilterOperators.NOT_EQUAL:
+                return currentValue !== filterValue;
+              case FilterOperators.LESS_THAN:
+                return currentValue < filterValue;
+              case FilterOperators.GREATER_THAN:
+                return currentValue > filterValue;
+              case FilterOperators.IN:
+                return (filterValue as string[]).includes(currentValue);
+              case FilterOperators.NOT_IN:
+                return !(filterValue as string[]).includes(currentValue);
+            }
+            return true;
           });
-        }
+        });
+      }
 
-        if (dataState.sortBy && dataState.sortBy.length > 0) {
-          const { id, desc } = dataState.sortBy[0];
+      if (dataState.sortBy && dataState.sortBy.length > 0) {
+        const { id, desc } = dataState.sortBy[0];
 
-          returnData = returnData.sort((a, b) => {
-            const value1 = (desc ? b : a)[id];
-            const value2 = (desc ? a : b)[id];
-            if (typeof value1 === "number") {
-              return compareNumbers(value1, value2);
-            }
+        returnData = returnData.sort((a, b) => {
+          const value1 = (desc ? b : a)[id];
+          const value2 = (desc ? a : b)[id];
+          if (typeof value1 === "number") {
+            return compareNumbers(value1, value2);
+          }
 
-            return compareString(value1, value2);
-          });
-        }
-        const totalReturnData = returnData.length;
-        const pageSize = dataState.pageSize || DEFAULT_PAGE_SIZE;
+          return compareString(value1, value2);
+        });
+      }
+      const totalReturnData = returnData.length;
+      const pageSize = dataState.pageSize || DEFAULT_PAGE_SIZE;
 
-        return {
-          pageIndex: dataState.pageIndex,
-          pageSize,
-          totalRecords: totalReturnData,
-          data: returnData.slice(
-            (dataState.pageIndex - 1) * pageSize,
-            dataState.pageIndex * pageSize
-          ),
-        };
-      },
-    }
-  );
+      return {
+        pageIndex: dataState.pageIndex,
+        pageSize,
+        totalRecords: totalReturnData,
+        data: returnData.slice(
+          (dataState.pageIndex - 1) * pageSize,
+          dataState.pageIndex * pageSize
+        ),
+      };
+    },
+  });
 }
diff --git a/src/frontend/design-system/components/Table/Stories.tsx b/src/frontend/design-system/components/Table/Stories.tsx
index 4c89458a1..c3efbd32d 100644
--- a/src/frontend/design-system/components/Table/Stories.tsx
+++ b/src/frontend/design-system/components/Table/Stories.tsx
@@ -87,7 +87,7 @@ Empty.args = {
     },
     isLoading: false,
     error: false,
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
@@ -102,7 +102,7 @@ Error.args = {
     },
     isLoading: false,
     error: "Some Error Occured",
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
@@ -117,7 +117,7 @@ Loading.args = {
     },
     isLoading: true,
     error: false,
-    isPreviousData: false,
+    isPlaceholderData: false,
   },
 };
 
@@ -125,6 +125,6 @@ export const PreviousData = Template.bind({});
 PreviousData.args = {
   tableData: {
     ...TABLE_DATA,
-    isPreviousData: true,
+    isPlaceholderData: true,
   },
 };
diff --git a/src/frontend/design-system/components/Table/data/index.tsx b/src/frontend/design-system/components/Table/data/index.tsx
index fbcd60c25..248fd47ad 100644
--- a/src/frontend/design-system/components/Table/data/index.tsx
+++ b/src/frontend/design-system/components/Table/data/index.tsx
@@ -41,7 +41,7 @@ export const TABLE_DATA = {
   },
   isLoading: false,
   error: false,
-  isPreviousData: false,
+  isPlaceholderData: false,
 };
 
 export const TABLE_COLUMNS: ITableColumn[] = [
diff --git a/src/frontend/design-system/components/Table/index.tsx b/src/frontend/design-system/components/Table/index.tsx
index bfab8ea04..6e223af3c 100644
--- a/src/frontend/design-system/components/Table/index.tsx
+++ b/src/frontend/design-system/components/Table/index.tsx
@@ -67,7 +67,7 @@ export function Table<T extends unknown>({
     },
     isLoading,
     error,
-    isPreviousData,
+    isPlaceholderData,
   } = tableData;
 
   const totalPageCount = getPageCount(data.totalRecords, data.pageSize);
@@ -111,7 +111,7 @@ export function Table<T extends unknown>({
     return <TableSkeleton lean={lean} />;
   }
 
-  const previousDataRender = isPreviousData ? (
+  const previousDataRender = isPlaceholderData ? (
     <BaseSkeleton
       height="2px"
       width="100%"
diff --git a/src/frontend/design-system/components/Table/types.ts b/src/frontend/design-system/components/Table/types.ts
index 099629e13..b864815aa 100644
--- a/src/frontend/design-system/components/Table/types.ts
+++ b/src/frontend/design-system/components/Table/types.ts
@@ -1,6 +1,6 @@
 import { HeaderContext } from "@tanstack/react-table";
 import { ReactNode } from "react";
-import { UseQueryResult } from "react-query";
+import { UseQueryResult } from "@tanstack/react-query";
 import {
   IPaginatedDataState,
   PaginatedData,
@@ -27,7 +27,7 @@ export interface ITableProps<T> {
   columns: ITableColumn[];
   tableData: Pick<
     UseQueryResult<PaginatedData<Record<string, unknown>>, unknown>,
-    "data" | "isLoading" | "error" | "isPreviousData"
+    "data" | "isLoading" | "error" | "isPlaceholderData"
   >;
   lean?: true;
   border?: boolean;
diff --git a/src/frontend/hooks/auth/preferences.store.ts b/src/frontend/hooks/auth/preferences.store.ts
index 6ea9a98b6..b2fa95e33 100644
--- a/src/frontend/hooks/auth/preferences.store.ts
+++ b/src/frontend/hooks/auth/preferences.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
 import { useStorageApi } from "frontend/lib/data/useApi";
 import { useWaitForResponseMutationOptions } from "frontend/lib/data/useMutate/useWaitForResponseMutationOptions";
@@ -55,10 +55,13 @@ export function useUpsertUserPreferenceMutation<T extends UserPreferencesKeys>(
     successMessage: MAKE_USER_PREFERENCE_CRUD_CONFIG(key).MUTATION_LANG.SAVED,
   });
 
-  return useMutation(async (values: UserPreferencesValueType<T>) => {
-    await makeActionRequest("PUT", userPrefrencesApiPath(key), {
-      data: values,
-    });
-    return values;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (values: UserPreferencesValueType<T>) => {
+      await makeActionRequest("PUT", userPrefrencesApiPath(key), {
+        data: values,
+      });
+      return values;
+    },
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/hooks/configuration/configuration.store.ts b/src/frontend/hooks/configuration/configuration.store.ts
index 597473ae6..fd03dcb44 100644
--- a/src/frontend/hooks/configuration/configuration.store.ts
+++ b/src/frontend/hooks/configuration/configuration.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import {
   APP_CONFIGURATION_CONFIG,
   AppConfigurationKeys,
@@ -95,10 +95,13 @@ export function useUpsertConfigurationMutation<T extends AppConfigurationKeys>(
     successMessage: MAKE_APP_CONFIGURATION_CRUD_CONFIG(key).MUTATION_LANG.SAVED,
   });
 
-  return useMutation(async (values: AppConfigurationValueType<T>) => {
-    await makeActionRequest("PUT", configurationApiPath(key, entity, "PUT"), {
-      data: values,
-    });
-    return values;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (values: AppConfigurationValueType<T>) => {
+      await makeActionRequest("PUT", configurationApiPath(key, entity, "PUT"), {
+        data: values,
+      });
+      return values;
+    },
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/hooks/data/data.store.ts b/src/frontend/hooks/data/data.store.ts
index e0e8b75bc..e123c5f04 100644
--- a/src/frontend/hooks/data/data.store.ts
+++ b/src/frontend/hooks/data/data.store.ts
@@ -1,6 +1,6 @@
 import qs from "qs";
 import { useRouter } from "next/router";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { FieldQueryFilter, FilterOperators } from "shared/types/data";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
@@ -38,7 +38,7 @@ export const useEntityDataDetails = ({
     ENTITY_DETAILS_PATH({ entity, entityId, column }),
     {
       errorMessage: entityCrudConfig.TEXT_LANG.NOT_FOUND,
-      enabled: column !== SYSTEM_LOADING_VALUE,
+      enabled: column !== SYSTEM_LOADING_VALUE && !!entityId,
       defaultData: {},
     }
   );
@@ -129,6 +129,7 @@ export const useEntityReferenceCount = (
 export const useEntityDataReference = (entity: string, entityId: string) => {
   return useApi<string>(ENTITY_REFERENCE_PATH({ entity, entityId }), {
     errorMessage: CRUD_CONFIG_NOT_FOUND("Reference data"),
+    enabled: !!entityId && !!entity,
     defaultData: "",
   });
 };
@@ -160,11 +161,11 @@ export function useEntityDataCreationMutation(
         }),
   });
 
-  return useMutation(
-    async (data: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (data: Record<string, string>) =>
       await makeActionRequest("POST", `/api/data/${entity}`, { data }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useEntityDataUpdationMutation(
@@ -184,13 +185,13 @@ export function useEntityDataUpdationMutation(
 
   const metadata = useEntityMetadataDetails({ entity, entityId });
 
-  return useMutation(
-    async (data: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (data: Record<string, string>) =>
       await makeActionRequest("PATCH", `/api/data/${entity}/${entityId}`, {
         data: { ...data, ...metadata },
       }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useEntityDataDeletionMutation(
@@ -220,9 +221,9 @@ export function useEntityDataDeletionMutation(
     successMessage: entityCrudConfig.MUTATION_LANG.DELETE,
   });
   // eyes on optimstic delete here
-  return useMutation(
-    async (id: string) =>
+  return useMutation({
+    mutationFn: async (id: string) =>
       await makeActionRequest("DELETE", `/api/data/${entity}/${id}`),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/lib/data/QueryClient.tsx b/src/frontend/lib/data/QueryClient.tsx
index 6368b7519..1903ec140 100644
--- a/src/frontend/lib/data/QueryClient.tsx
+++ b/src/frontend/lib/data/QueryClient.tsx
@@ -1,5 +1,9 @@
 import React, { ReactNode } from "react";
-import { QueryClientProvider, QueryClient, QueryCache } from "react-query";
+import {
+  QueryClientProvider,
+  QueryClient,
+  QueryCache,
+} from "@tanstack/react-query";
 
 export const queryCache = new QueryCache();
 
diff --git a/src/frontend/lib/data/_buildOptions.ts b/src/frontend/lib/data/_buildOptions.ts
index 84149f4dd..133b6dfbe 100644
--- a/src/frontend/lib/data/_buildOptions.ts
+++ b/src/frontend/lib/data/_buildOptions.ts
@@ -1,9 +1,9 @@
-import { UseQueryOptions } from "react-query";
+import { UseQueryOptions } from "@tanstack/react-query";
 import { IUseApiOptions } from "./types";
 
 export function buildApiOptions<T>(
   options: IUseApiOptions<T>
-): UseQueryOptions<T> {
+): Partial<UseQueryOptions<T>> {
   return {
     ...options,
     select: (data: T) => {
diff --git a/src/frontend/lib/data/types.ts b/src/frontend/lib/data/types.ts
index de8687446..ba9419a20 100644
--- a/src/frontend/lib/data/types.ts
+++ b/src/frontend/lib/data/types.ts
@@ -1,4 +1,4 @@
-import { UseQueryResult } from "react-query";
+import { UseQueryResult } from "@tanstack/react-query";
 
 export enum DataStates {
   Loading = "loading",
@@ -6,10 +6,11 @@ export enum DataStates {
   Loaded = "loaded",
 }
 
-export type DataStateKeys<T> = Pick<
-  UseQueryResult<T>,
-  "data" | "isLoading" | "error"
->;
+export type DataStateKeys<T> = Pick<UseQueryResult<T>, "data" | "isLoading"> & {
+  error: unknown | Error;
+};
+
+type NonFunctionGuard<T> = T extends Function ? never : T;
 
 export interface IUseApiOptions<T> {
   selector?: (input: any) => T;
@@ -20,7 +21,7 @@ export interface IUseApiOptions<T> {
     body: Record<string, unknown>;
   };
   defaultData: T;
-  placeholderData?: T;
+  placeholderData?: NonFunctionGuard<T>;
   /*
   Some requests may go bad in the BE and it is makes sense
   Like checking if something exists in a list
diff --git a/src/frontend/lib/data/useApi/index.ts b/src/frontend/lib/data/useApi/index.ts
index 4e1b78339..0b00e5837 100644
--- a/src/frontend/lib/data/useApi/index.ts
+++ b/src/frontend/lib/data/useApi/index.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { AppStorage } from "frontend/lib/storage/app";
 import { useRouter } from "next/router";
 import { IUseApiOptions } from "../types";
@@ -9,9 +9,10 @@ import { getQueryCachekey } from "../constants/getQueryCacheKey";
 export function useApi<T>(endPoint: string, options: IUseApiOptions<T>) {
   const builtOptions = buildApiOptions(options);
   const router = useRouter();
-  const { data = options.defaultData, ...rest } = useQuery<T>(
-    getQueryCachekey(endPoint),
-    async () => {
+  const { data = options.defaultData, ...rest } = useQuery<T>({
+    enabled: router.isReady && builtOptions.enabled,
+    queryKey: getQueryCachekey(endPoint),
+    queryFn: async () => {
       try {
         if (options.request) {
           return await makeActionRequest(
@@ -29,8 +30,8 @@ export function useApi<T>(endPoint: string, options: IUseApiOptions<T>) {
         throw error;
       }
     },
-    { ...builtOptions, enabled: router.isReady && builtOptions.enabled }
-  );
+    ...builtOptions,
+  });
   return { data, ...rest };
 }
 
diff --git a/src/frontend/lib/data/useApi/useApiQueries.ts b/src/frontend/lib/data/useApi/useApiQueries.ts
index 6be2bd761..0a8336780 100644
--- a/src/frontend/lib/data/useApi/useApiQueries.ts
+++ b/src/frontend/lib/data/useApi/useApiQueries.ts
@@ -1,4 +1,4 @@
-import { useQueries, UseQueryResult } from "react-query";
+import { useQueries, UseQueryResult } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 import { makeGetRequest } from "../makeRequest";
 import { getQueryCachekey } from "../constants/getQueryCacheKey";
@@ -23,8 +23,8 @@ export function useApiQueries<T, P>({
 > {
   const router = useRouter();
 
-  const queryResults = useQueries(
-    input.map((inputItem) => ({
+  const queryResults = useQueries({
+    queries: input.map((inputItem) => ({
       placeholderData: placeholderDataFn
         ? placeholderDataFn(inputItem[accessor])
         : undefined,
@@ -32,8 +32,8 @@ export function useApiQueries<T, P>({
       queryKey: getQueryCachekey(pathFn(inputItem[accessor])),
       queryFn: async () =>
         dataTransformer(await makeGetRequest(pathFn(inputItem[accessor]))) as P,
-    }))
-  );
+    })),
+  });
 
   const recordedData = (): Record<keyof T, UseQueryResult<P, unknown>> =>
     Object.fromEntries(
diff --git a/src/frontend/lib/data/useApi/usePaginatedData.ts b/src/frontend/lib/data/useApi/usePaginatedData.ts
index 540670c5c..5c39c758b 100644
--- a/src/frontend/lib/data/useApi/usePaginatedData.ts
+++ b/src/frontend/lib/data/useApi/usePaginatedData.ts
@@ -1,4 +1,8 @@
-import { useQuery, UseQueryResult } from "react-query";
+import {
+  keepPreviousData,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
 import { IPaginatedDataState, PaginatedData } from "shared/types/data";
 import { useRouter } from "next/router";
 import { makeGetRequest } from "../makeRequest";
@@ -15,18 +19,16 @@ export function usePaginatedData<T extends Record<string, unknown>>(
   const builtOptions = buildApiOptions(options);
   const router = useRouter();
 
-  return useQuery<PaginatedData<T>>(
-    getPaginatedDataCachekey(endPoint, dataState),
-    async () => {
+  return useQuery<PaginatedData<T>>({
+    queryKey: getPaginatedDataCachekey(endPoint, dataState),
+    queryFn: async () => {
       return await makeGetRequest(
         endPoint + tableDataParamsToQueryString(dataState),
         "Data could not be retrieved"
       );
     },
-    {
-      ...builtOptions,
-      enabled: router.isReady && builtOptions.enabled,
-      keepPreviousData: true,
-    }
-  );
+    enabled: router.isReady && builtOptions.enabled,
+    placeholderData: keepPreviousData,
+    ...builtOptions,
+  });
 }
diff --git a/src/frontend/lib/data/useMutate/useApiMutate.ts b/src/frontend/lib/data/useMutate/useApiMutate.ts
index 10a20fe28..7e570a627 100644
--- a/src/frontend/lib/data/useMutate/useApiMutate.ts
+++ b/src/frontend/lib/data/useMutate/useApiMutate.ts
@@ -1,4 +1,4 @@
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { getQueryCachekey } from "../constants/getQueryCacheKey";
 
 export function useApiMutate<T>(endpoint: string) {
@@ -7,13 +7,13 @@ export function useApiMutate<T>(endpoint: string) {
 
   return {
     set: async (mutateOldData: (oldData: T | undefined) => T) => {
-      await queryClient.cancelQueries(queryKey);
+      await queryClient.cancelQueries({ queryKey });
       const previousData = queryClient.getQueryData<T>(queryKey);
       queryClient.setQueryData<T>(queryKey, mutateOldData);
       return previousData;
     },
     invalidate: () => {
-      queryClient.invalidateQueries(queryKey);
+      queryClient.invalidateQueries({ queryKey });
     },
     reset: (previousData: T | undefined) => {
       queryClient.setQueryData(queryKey, previousData);
diff --git a/src/frontend/lib/data/useMutate/useApiMutateOptimisticOptions.ts b/src/frontend/lib/data/useMutate/useApiMutateOptimisticOptions.ts
index 60777e77f..8626a785a 100644
--- a/src/frontend/lib/data/useMutate/useApiMutateOptimisticOptions.ts
+++ b/src/frontend/lib/data/useMutate/useApiMutateOptimisticOptions.ts
@@ -1,5 +1,5 @@
 import { noop } from "shared/lib/noop";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { ToastService } from "frontend/lib/toast";
 import { IApiMutateOptions } from "./types";
 import { useApiMutate } from "./useApiMutate";
@@ -22,7 +22,9 @@ export function useApiMutateOptimisticOptions<T, K, V = void>(
       }
       if (options.otherEndpoints) {
         options.otherEndpoints.forEach((queryKey) => {
-          queryClient.invalidateQueries(getQueryCachekey(queryKey));
+          queryClient.invalidateQueries({
+            queryKey: getQueryCachekey(queryKey),
+          });
         });
       }
       if (options.onSuccessActionWithFormData) {
diff --git a/src/frontend/lib/data/useMutate/useWaitForResponseMutationOptions.ts b/src/frontend/lib/data/useMutate/useWaitForResponseMutationOptions.ts
index 8d1968cde..57e490cfb 100644
--- a/src/frontend/lib/data/useMutate/useWaitForResponseMutationOptions.ts
+++ b/src/frontend/lib/data/useMutate/useWaitForResponseMutationOptions.ts
@@ -1,4 +1,4 @@
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { ToastService } from "frontend/lib/toast";
 import { getQueryCachekey } from "../constants/getQueryCacheKey";
 import { ToastMessageInput } from "./types";
@@ -22,7 +22,7 @@ export function useWaitForResponseMutationOptions<T>(
   return {
     onSuccess: async (formData: T | undefined) => {
       options.endpoints.forEach((queryKey) => {
-        queryClient.invalidateQueries(getQueryCachekey(queryKey));
+        queryClient.invalidateQueries({ queryKey: getQueryCachekey(queryKey) });
       });
 
       if (options.smartSuccessMessage) {
diff --git a/src/frontend/views/Dashboard/Widget/_manage/Form.tsx b/src/frontend/views/Dashboard/Widget/_manage/Form.tsx
index 6f33abecf..b2edda4cf 100644
--- a/src/frontend/views/Dashboard/Widget/_manage/Form.tsx
+++ b/src/frontend/views/Dashboard/Widget/_manage/Form.tsx
@@ -3,7 +3,7 @@ import { Field, Form } from "react-final-form";
 import { ISummaryWidgetConfig, IWidgetConfig } from "shared/types/dashboard";
 import { ROYGBIV } from "shared/constants/colors";
 import { IconInputField } from "frontend/components/IconInputField";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { ViewStateMachine } from "frontend/components/ViewStateMachine";
 import { useEffect, useState } from "react";
 import { WidgetScriptDocumentation } from "frontend/docs/scripts/widget-scripts";
@@ -49,10 +49,10 @@ const FormSchema: Partial<Record<IWidgetConfig["_type"], WidgetFormField[]>> = {
 };
 
 export function useRunWidgetScript() {
-  return useMutation(
-    async (script: string) =>
-      await makeActionRequest("POST", `/api/dashboards/script`, { script })
-  );
+  return useMutation({
+    mutationFn: async (script: string) =>
+      await makeActionRequest("POST", `/api/dashboards/script`, { script }),
+  });
 }
 
 export function DashboardWidgetForm({
@@ -241,7 +241,7 @@ export function DashboardWidgetForm({
 
                     <ViewStateMachine
                       error={runWidgetScript.error}
-                      loading={runWidgetScript.isLoading}
+                      loading={runWidgetScript.isPending}
                       loader={
                         <BaseSkeleton height={`${values.height || 250}px`} />
                       }
@@ -292,7 +292,7 @@ export function DashboardWidgetForm({
                               runWidgetScript.mutate(values.script);
                             }}
                             disabled={!values.script}
-                            isMakingRequest={runWidgetScript.isLoading}
+                            isMakingRequest={runWidgetScript.isPending}
                             systemIcon="Eye"
                             size={null}
                             label="Test Widget Script"
diff --git a/src/frontend/views/Dashboard/Widget/_render/Table/index.tsx b/src/frontend/views/Dashboard/Widget/_render/Table/index.tsx
index bdb5474e6..d6baa76e3 100644
--- a/src/frontend/views/Dashboard/Widget/_render/Table/index.tsx
+++ b/src/frontend/views/Dashboard/Widget/_render/Table/index.tsx
@@ -26,7 +26,7 @@ export function TableWidget({ data }: IProps) {
         },
         error: "",
         isLoading: false,
-        isPreviousData: false,
+        isPlaceholderData: false,
       }}
       syncPaginatedDataStateOut={() => {}}
       border
diff --git a/src/frontend/views/Dashboard/dashboard.store.ts b/src/frontend/views/Dashboard/dashboard.store.ts
index 5a5ddbfcd..f7330afc4 100644
--- a/src/frontend/views/Dashboard/dashboard.store.ts
+++ b/src/frontend/views/Dashboard/dashboard.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { IWidgetConfig } from "shared/types/dashboard";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
@@ -53,9 +53,12 @@ export function useCreateDashboardWidgetMutation(dashboardId: string) {
     successMessage: DASHBOARD_WIDGETS_CRUD_CONFIG.MUTATION_LANG.CREATE,
   });
 
-  return useMutation(async (widget: IWidgetConfig) => {
-    await makeActionRequest("POST", DASHBOARD_ENDPOINT(dashboardId), widget);
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (widget: IWidgetConfig) => {
+      await makeActionRequest("POST", DASHBOARD_ENDPOINT(dashboardId), widget);
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useUpdateDashboardWidgetMutation(
@@ -72,13 +75,16 @@ export function useUpdateDashboardWidgetMutation(
     successMessage: DASHBOARD_WIDGETS_CRUD_CONFIG.MUTATION_LANG.EDIT,
   });
 
-  return useMutation(async (widget: IWidgetConfig) => {
-    await makeActionRequest(
-      "PATCH",
-      `${DASHBOARD_ENDPOINT(dashboardId)}/${widget.id}`,
-      widget
-    );
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (widget: IWidgetConfig) => {
+      await makeActionRequest(
+        "PATCH",
+        `${DASHBOARD_ENDPOINT(dashboardId)}/${widget.id}`,
+        widget
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useDeleteDashboardWidgetMutation(dashboardId: string) {
@@ -91,15 +97,18 @@ export function useDeleteDashboardWidgetMutation(dashboardId: string) {
     successMessage: DASHBOARD_WIDGETS_CRUD_CONFIG.MUTATION_LANG.DELETE,
   });
 
-  return useMutation(async (widgetId: string) => {
-    await makeActionRequest(
-      "DELETE",
-      `${DASHBOARD_ENDPOINT(dashboardId)}/${widgetId}`,
-      {
-        widgetId,
-      }
-    );
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (widgetId: string) => {
+      await makeActionRequest(
+        "DELETE",
+        `${DASHBOARD_ENDPOINT(dashboardId)}/${widgetId}`,
+        {
+          widgetId,
+        }
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useArrangeDashboardWidgetMutation(dashboardId: string) {
@@ -111,11 +120,14 @@ export function useArrangeDashboardWidgetMutation(dashboardId: string) {
     onMutate: MutationHelpers.sortOrder,
   });
 
-  return useMutation(async (widgetList: string[]) => {
-    await makeActionRequest(
-      "PATCH",
-      DASHBOARD_ENDPOINT(dashboardId),
-      widgetList
-    );
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (widgetList: string[]) => {
+      await makeActionRequest(
+        "PATCH",
+        DASHBOARD_ENDPOINT(dashboardId),
+        widgetList
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/SignIn/index.tsx b/src/frontend/views/SignIn/index.tsx
index 6abf32679..2aeb2d94e 100644
--- a/src/frontend/views/SignIn/index.tsx
+++ b/src/frontend/views/SignIn/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { AuthLayout } from "frontend/_layouts/guest";
 import { ISuccessfullAuthenticationResponse } from "shared/types/auth/portal";
 import { useSetupCheck } from "frontend/hooks/setup/setup.store";
@@ -20,22 +20,20 @@ import { useHandleNoTokenAuthResponse } from "./portal";
 function useSignInMutation() {
   const authenticateUser = useAuthenticateUser();
   const handleNoTokenAuthResponse = useHandleNoTokenAuthResponse();
-  return useMutation(
-    async (values: ISignInForm) =>
+  return useMutation({
+    mutationFn: async (values: ISignInForm) =>
       await makeActionRequest("POST", `/api/auth/signin`, values),
-    {
-      onSuccess: (data: ISuccessfullAuthenticationResponse, formData) => {
-        if (data.token) {
-          authenticateUser(data.token, formData.rememberMe);
-          return;
-        }
-        handleNoTokenAuthResponse(data, formData);
-      },
-      onError: (error: { message: string }) => {
-        ToastService.error(error.message);
-      },
-    }
-  );
+    onSuccess: (data: ISuccessfullAuthenticationResponse, formData) => {
+      if (data.token) {
+        authenticateUser(data.token, formData.rememberMe);
+        return;
+      }
+      handleNoTokenAuthResponse(data, formData);
+    },
+    onError: (error: { message: string }) => {
+      ToastService.error(error.message);
+    },
+  });
 }
 
 export function SignIn() {
diff --git a/src/frontend/views/account/account.store.ts b/src/frontend/views/account/account.store.ts
index 941d4d320..f260f7e87 100644
--- a/src/frontend/views/account/account.store.ts
+++ b/src/frontend/views/account/account.store.ts
@@ -1,5 +1,5 @@
 import { AUTHENTICATED_ACCOUNT_URL } from "frontend/hooks/auth/user.store";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { IChangePasswordForm } from "shared/form-schemas/profile/password";
 import { IUpdateProfileForm } from "shared/form-schemas/profile/update";
 import { ACCOUNT_PROFILE_CRUD_CONFIG } from "frontend/hooks/auth/constants";
@@ -13,11 +13,11 @@ export function useUpdateProfileMutation() {
     successMessage: ACCOUNT_PROFILE_CRUD_CONFIG.MUTATION_LANG.SAVED,
   });
 
-  return useMutation(
-    async (data: IUpdateProfileForm) =>
+  return useMutation({
+    mutationFn: async (data: IUpdateProfileForm) =>
       await makeActionRequest("PATCH", AUTHENTICATED_ACCOUNT_URL, data),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useChangePasswordMutation() {
@@ -28,11 +28,14 @@ export function useChangePasswordMutation() {
       : PASSWORD_CRUD_CONFIG.MUTATION_LANG.EDIT,
   });
 
-  return useMutation(async (data: IChangePasswordForm) => {
-    return await makeActionRequest(
-      "PATCH",
-      `/api/account/change-password`,
-      data
-    );
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (data: IChangePasswordForm) => {
+      return await makeActionRequest(
+        "PATCH",
+        `/api/account/change-password`,
+        data
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/data/Details/RelationsDetails.tsx b/src/frontend/views/data/Details/RelationsDetails.tsx
index d7b967267..ca61beccb 100644
--- a/src/frontend/views/data/Details/RelationsDetails.tsx
+++ b/src/frontend/views/data/Details/RelationsDetails.tsx
@@ -45,7 +45,9 @@ export function EntityRelationDetails() {
   const { backLink } = useNavigationStack();
 
   const title =
-    entityDataReference.isLoading || entityDataReference.isIdle
+    entityDataReference.isLoading ||
+    (entityDataReference.status === "pending" &&
+      entityDataReference.fetchStatus === "idle")
       ? childEntityCrudConfig.TEXT_LANG.SINGULAR
       : `${entityDataReference.data} - ${childEntityCrudConfig.TEXT_LANG.SINGULAR}`;
 
@@ -100,7 +102,8 @@ export function EntityRelationDetails() {
           title={title}
           isLoading={
             entityDataReference.isLoading ||
-            entityDataReference.isIdle ||
+            (entityDataReference.status === "pending" &&
+              entityDataReference.fetchStatus === "idle") ||
             childEntityIdField.isLoading ||
             dataDetails.isLoading
           }
@@ -130,7 +133,8 @@ export function EntityRelationDetails() {
           title={title}
           isLoading={
             entityDataReference.isLoading ||
-            entityDataReference.isIdle ||
+            (entityDataReference.status === "pending" &&
+              entityDataReference.fetchStatus === "idle") ||
             dataDetails.isLoading
           }
           backLink={backLink}
diff --git a/src/frontend/views/data/hooks/useEntityActionButtons.ts b/src/frontend/views/data/hooks/useEntityActionButtons.ts
index 751f3ce3e..e7ab57ccb 100644
--- a/src/frontend/views/data/hooks/useEntityActionButtons.ts
+++ b/src/frontend/views/data/hooks/useEntityActionButtons.ts
@@ -54,7 +54,7 @@ export const useEntityActionButtons = ({
           entityDataDeletionMutation.mutate(entityId);
         },
         isMakingRequest:
-          entityDataDeletionMutation.isLoading &&
+          entityDataDeletionMutation.isPending &&
           entityDataDeletionMutation.variables === entityId,
       }),
       order: 30,
diff --git a/src/frontend/views/entity/Actions/Base.tsx b/src/frontend/views/entity/Actions/Base.tsx
index 9d96beb56..15dbd504e 100644
--- a/src/frontend/views/entity/Actions/Base.tsx
+++ b/src/frontend/views/entity/Actions/Base.tsx
@@ -72,7 +72,7 @@ export function FormActions({ entity }: { entity: string }) {
         ]}
       />
     ),
-    [deleteFormActionMutation.isLoading]
+    [deleteFormActionMutation.isPending]
   );
 
   const columns: IFETableColumn<IFormAction>[] = [
diff --git a/src/frontend/views/entity/Actions/form-actions.store.ts b/src/frontend/views/entity/Actions/form-actions.store.ts
index 99e984b25..e64c3ced1 100644
--- a/src/frontend/views/entity/Actions/form-actions.store.ts
+++ b/src/frontend/views/entity/Actions/form-actions.store.ts
@@ -1,5 +1,5 @@
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import {
   IFormAction,
   IIntegrationImplementationList,
@@ -39,14 +39,14 @@ export function useDeleteFormActionMutation(entity: string) {
     }
   );
 
-  return useMutation(
-    async (formActionId: string) =>
+  return useMutation({
+    mutationFn: async (formActionId: string) =>
       await makeActionRequest(
         "DELETE",
         FORM_ACTION_CRUD_CONFIG.ENDPOINTS.DELETE(formActionId)
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useCreateFormActionMutation(entity: string) {
@@ -57,13 +57,16 @@ export function useCreateFormActionMutation(entity: string) {
     successMessage: FORM_ACTION_CRUD_CONFIG.MUTATION_LANG.CREATE,
   });
 
-  return useMutation(async (configuration: IFormAction) => {
-    return await makeActionRequest(
-      "POST",
-      FORM_ACTION_CRUD_CONFIG.ENDPOINTS.CREATE,
-      configuration
-    );
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (configuration: IFormAction) => {
+      return await makeActionRequest(
+        "POST",
+        FORM_ACTION_CRUD_CONFIG.ENDPOINTS.CREATE,
+        configuration
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useUpdateFormActionMutation(entity: string) {
@@ -74,13 +77,13 @@ export function useUpdateFormActionMutation(entity: string) {
     successMessage: FORM_ACTION_CRUD_CONFIG.MUTATION_LANG.EDIT,
   });
 
-  return useMutation(
-    async (formAction: IFormAction) =>
+  return useMutation({
+    mutationFn: async (formAction: IFormAction) =>
       await makeActionRequest(
         "PATCH",
         FORM_ACTION_CRUD_CONFIG.ENDPOINTS.UPDATE(formAction.id),
         formAction
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/entity/Views/Form.tsx b/src/frontend/views/entity/Views/Form.tsx
index 27c98c913..f21d0dbba 100644
--- a/src/frontend/views/entity/Views/Form.tsx
+++ b/src/frontend/views/entity/Views/Form.tsx
@@ -114,7 +114,7 @@ function TabForm({ tableColumns, values, initialValues }: IProps) {
                           tableData: {
                             error: false,
                             isLoading: false,
-                            isPreviousData: false,
+                            isPlaceholderData: false,
                             data: {
                               data: [],
                               pageIndex: 0,
diff --git a/src/frontend/views/integrations/actions/actions.store.ts b/src/frontend/views/integrations/actions/actions.store.ts
index 65f6521cb..e1d7d7fed 100644
--- a/src/frontend/views/integrations/actions/actions.store.ts
+++ b/src/frontend/views/integrations/actions/actions.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { IIntegrationsList, ActionIntegrations } from "shared/types/actions";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { reduceStringToNumber } from "shared/lib/strings";
@@ -56,14 +56,14 @@ export function useDeactivateIntegrationMutation() {
       ACTION_INTEGRATIONS_CRUD_CONFIG.MUTATION_LANG.CUSTOM("Deactivated"),
   });
 
-  return useMutation(
-    async (activationId: string) =>
+  return useMutation({
+    mutationFn: async (activationId: string) =>
       await makeActionRequest(
         "DELETE",
         `/api/integrations/actions/${activationId}`
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useActivateIntegrationMutation(integration: string) {
@@ -75,15 +75,15 @@ export function useActivateIntegrationMutation(integration: string) {
       ACTION_INTEGRATIONS_CRUD_CONFIG.MUTATION_LANG.CUSTOM("Activated"),
   });
 
-  return useMutation(
-    async (configuration: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (configuration: Record<string, string>) =>
       await makeActionRequest(
         "POST",
         `/api/integrations/actions/${integration}`,
         configuration
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useUpdateActivatedIntegrationMutation(activationId: string) {
@@ -96,8 +96,8 @@ export function useUpdateActivatedIntegrationMutation(activationId: string) {
 
   const rootPassword = usePasswordStore((state) => state.password);
 
-  return useMutation(
-    async (configuration: Record<string, string>) =>
+  return useMutation({
+    mutationFn: async (configuration: Record<string, string>) =>
       await makeActionRequest(
         "PATCH",
         `/api/integrations/actions/${activationId}`,
@@ -106,6 +106,6 @@ export function useUpdateActivatedIntegrationMutation(activationId: string) {
           _password: rootPassword,
         }
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/integrations/storage/storage.store.ts b/src/frontend/views/integrations/storage/storage.store.ts
index c0450ee12..4e4332142 100644
--- a/src/frontend/views/integrations/storage/storage.store.ts
+++ b/src/frontend/views/integrations/storage/storage.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { reduceStringToNumber } from "shared/lib/strings";
 import { useApi } from "frontend/lib/data/useApi";
@@ -54,8 +54,8 @@ export function useActivateStorageMutation() {
       STORAGE_INTEGRATIONS_CRUD_CONFIG.MUTATION_LANG.CUSTOM("Activated"),
   });
 
-  return useMutation(
-    async (configuration: {
+  return useMutation({
+    mutationFn: async (configuration: {
       storageKey: string;
       configuration: Record<string, string>;
     }) =>
@@ -64,6 +64,6 @@ export function useActivateStorageMutation() {
         ACTIVE_STORAGE_INTEGRATIONS_ENDPOINT,
         configuration
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/roles/List.tsx b/src/frontend/views/roles/List.tsx
index 59a95f18d..ce3381dd0 100644
--- a/src/frontend/views/roles/List.tsx
+++ b/src/frontend/views/roles/List.tsx
@@ -54,7 +54,7 @@ export function ListRoles() {
         />
       );
     },
-    [roleDeletionMutation.isLoading]
+    [roleDeletionMutation.isPending]
   );
   const columns: IFETableColumn<IRolesList>[] = [
     {
diff --git a/src/frontend/views/roles/permissions.store.ts b/src/frontend/views/roles/permissions.store.ts
index 19ed2a011..685fb1f71 100644
--- a/src/frontend/views/roles/permissions.store.ts
+++ b/src/frontend/views/roles/permissions.store.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { MAKE_CRUD_CONFIG } from "frontend/lib/crud-config";
 import { useStorageApi } from "frontend/lib/data/useApi";
 import { useApiMutateOptimisticOptions } from "frontend/lib/data/useMutate/useApiMutateOptimisticOptions";
@@ -34,11 +34,18 @@ export function useRolePermissionDeletionMutation() {
     successMessage: ADMIN_PERMISSIONS_CRUD_CONFIG.MUTATION_LANG.DELETE,
   });
 
-  return useMutation(async (permissions: string[]) => {
-    await makeActionRequest("DELETE", ADMIN_ROLE_PERMISSION_ENDPOINT(roleId), {
-      permissions,
-    });
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (permissions: string[]) => {
+      await makeActionRequest(
+        "DELETE",
+        ADMIN_ROLE_PERMISSION_ENDPOINT(roleId),
+        {
+          permissions,
+        }
+      );
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useCreateRolePermissionMutation() {
@@ -50,11 +57,11 @@ export function useCreateRolePermissionMutation() {
     successMessage: ADMIN_PERMISSIONS_CRUD_CONFIG.MUTATION_LANG.CREATE,
   });
 
-  return useMutation(
-    async (permissions: string[]) =>
+  return useMutation({
+    mutationFn: async (permissions: string[]) =>
       await makeActionRequest("POST", ADMIN_ROLE_PERMISSION_ENDPOINT(roleId), {
         permissions,
       }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/roles/roles.store.ts b/src/frontend/views/roles/roles.store.ts
index ada6cb1ec..53ec888e7 100644
--- a/src/frontend/views/roles/roles.store.ts
+++ b/src/frontend/views/roles/roles.store.ts
@@ -1,6 +1,6 @@
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
 import { useRouter } from "next/router";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { IBaseRoleForm } from "shared/form-schemas/roles/base";
 import { makeRoleId } from "shared/constants/user";
 import { IRolesList } from "shared/types/roles";
@@ -30,14 +30,17 @@ export function useCreateRoleMutation() {
     }),
   });
 
-  return useMutation(async (data: IBaseRoleForm) => {
-    await makeActionRequest(
-      "POST",
-      ADMIN_ROLES_CRUD_CONFIG.ENDPOINTS.CREATE,
-      data
-    );
-    return data;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (data: IBaseRoleForm) => {
+      await makeActionRequest(
+        "POST",
+        ADMIN_ROLES_CRUD_CONFIG.ENDPOINTS.CREATE,
+        data
+      );
+      return data;
+    },
+    ...apiMutateOptions,
+  });
 }
 
 export function useRoleDeletionMutation() {
@@ -51,12 +54,12 @@ export function useRoleDeletionMutation() {
     successMessage: ADMIN_ROLES_CRUD_CONFIG.MUTATION_LANG.DELETE,
   });
 
-  return useMutation(
-    async (roleId: string) =>
+  return useMutation({
+    mutationFn: async (roleId: string) =>
       await makeActionRequest(
         "DELETE",
         ADMIN_ROLES_CRUD_CONFIG.ENDPOINTS.DELETE(roleId)
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx b/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
index 292a73050..3d98f02cf 100644
--- a/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
+++ b/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
@@ -102,7 +102,7 @@ export function ManageCredentialGroup({
         ]}
       />
     ),
-    [deleteConfigurationMutation.isLoading, passwordStore.password]
+    [deleteConfigurationMutation.isPending, passwordStore.password]
   );
 
   const canManageAction = !(
diff --git a/src/frontend/views/settings/Variables/configurations.store.ts b/src/frontend/views/settings/Variables/configurations.store.ts
index 3dc9585ee..282de395e 100644
--- a/src/frontend/views/settings/Variables/configurations.store.ts
+++ b/src/frontend/views/settings/Variables/configurations.store.ts
@@ -1,6 +1,6 @@
 import { usePasswordStore } from "frontend/views/integrations/password.store";
 import { useEffect } from "react";
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { IntegrationsConfigurationGroup } from "shared/types/integrations";
 import { CRUD_CONFIG_NOT_FOUND } from "frontend/lib/crud-config";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
@@ -34,14 +34,14 @@ export function useIntegrationConfigurationUpsertationMutation(
       INTEGRATIONS_GROUP_CRUD_CONFIG[group].crudConfig.MUTATION_LANG.SAVED,
   });
 
-  return useMutation(
-    async (data: { key: string; value: string }) =>
+  return useMutation({
+    mutationFn: async (data: { key: string; value: string }) =>
       await makeActionRequest("PUT", `/api/integrations/${group}/${data.key}`, {
         value: data.value,
         _password: rootPassword,
       }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useIntegrationConfigurationDeletionMutation(
@@ -57,13 +57,13 @@ export function useIntegrationConfigurationDeletionMutation(
     onMutate: MutationHelpers.deleteByKey("key"),
   });
 
-  return useMutation(
-    async (key: string) =>
+  return useMutation({
+    mutationFn: async (key: string) =>
       await makeActionRequest("DELETE", `/api/integrations/${group}/${key}`, {
         _password: rootPassword,
       }),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export const useRevealedCredentialsList = (
diff --git a/src/frontend/views/setup/setup.store.ts b/src/frontend/views/setup/setup.store.ts
index 834c9c11f..330af44c9 100644
--- a/src/frontend/views/setup/setup.store.ts
+++ b/src/frontend/views/setup/setup.store.ts
@@ -2,7 +2,7 @@ import { useAuthenticateUser } from "frontend/hooks/auth/useAuthenticateUser";
 import { SETUP_CHECK_URL } from "frontend/hooks/setup/setup.store";
 import { makeActionRequest } from "frontend/lib/data/makeRequest";
 import { useWaitForResponseMutationOptions } from "frontend/lib/data/useMutate/useWaitForResponseMutationOptions";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { ISetupUserForm } from "shared/form-schemas/setup/user";
 import { ISuccessfullAuthenticationResponse } from "shared/types/auth/portal";
 import { IDataSourceCredentials } from "shared/types/data-sources";
@@ -15,11 +15,11 @@ export function useSetupCredentialsMutation() {
     successMessage: "Credentials Was Successfully Setup",
   });
 
-  return useMutation(
-    async (data: IDataSourceCredentials) =>
+  return useMutation({
+    mutationFn: async (data: IDataSourceCredentials) =>
       await makeActionRequest("POST", `/api/setup/credentials`, data),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useSetupUserMutation() {
@@ -34,9 +34,9 @@ export function useSetupUserMutation() {
       },
     });
 
-  return useMutation(
-    async (data: ISetupUserForm) =>
+  return useMutation({
+    mutationFn: async (data: ISetupUserForm) =>
       await makeActionRequest("POST", `/api/setup/user`, data),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
diff --git a/src/frontend/views/users/List.tsx b/src/frontend/views/users/List.tsx
index 03ffa6817..920a12518 100644
--- a/src/frontend/views/users/List.tsx
+++ b/src/frontend/views/users/List.tsx
@@ -61,7 +61,7 @@ export function ListUsers() {
         />
       );
     },
-    [userDeletionMutation.isLoading]
+    [userDeletionMutation.isPending]
   );
 
   const columns: IFETableColumn<IAccountProfile>[] = [
diff --git a/src/frontend/views/users/users.store.ts b/src/frontend/views/users/users.store.ts
index c17ecd82c..df078b35f 100644
--- a/src/frontend/views/users/users.store.ts
+++ b/src/frontend/views/users/users.store.ts
@@ -1,6 +1,6 @@
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
 import { useRouter } from "next/router";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { ICreateUserForm } from "shared/form-schemas/users";
 import { IResetPasswordForm } from "shared/form-schemas/users/reset-password";
 import { IAccountProfile } from "shared/types/user";
@@ -52,14 +52,14 @@ export function useUserDeletionMutation() {
     successMessage: ADMIN_USERS_CRUD_CONFIG.MUTATION_LANG.DELETE,
   });
 
-  return useMutation(
-    async (username: string) =>
+  return useMutation({
+    mutationFn: async (username: string) =>
       await makeActionRequest(
         "DELETE",
         ADMIN_USERS_CRUD_CONFIG.ENDPOINTS.DELETE(username)
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useUpdateUserMutation() {
@@ -72,15 +72,15 @@ export function useUpdateUserMutation() {
     successMessage: ADMIN_USERS_CRUD_CONFIG.MUTATION_LANG.EDIT,
   });
 
-  return useMutation(
-    async (data: Partial<IAccountProfile>) =>
+  return useMutation({
+    mutationFn: async (data: Partial<IAccountProfile>) =>
       await makeActionRequest(
         "PATCH",
         ADMIN_USERS_CRUD_CONFIG.ENDPOINTS.UPDATE(username),
         data
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useResetUserPasswordMutation() {
@@ -90,15 +90,15 @@ export function useResetUserPasswordMutation() {
     successMessage: "Password Reset Successfully",
   });
 
-  return useMutation(
-    async (data: IResetPasswordForm) =>
+  return useMutation({
+    mutationFn: async (data: IResetPasswordForm) =>
       await makeActionRequest(
         "PATCH",
         ADMIN_USERS_CRUD_CONFIG.ENDPOINTS.CUSTOM(username, "reset-password"),
         data
       ),
-    apiMutateOptions
-  );
+    ...apiMutateOptions,
+  });
 }
 
 export function useCreateUserMutation() {
@@ -114,12 +114,15 @@ export function useCreateUserMutation() {
     }),
   });
 
-  return useMutation(async (data: ICreateUserForm) => {
-    await makeActionRequest(
-      "POST",
-      ADMIN_USERS_CRUD_CONFIG.ENDPOINTS.CREATE,
-      data
-    );
-    return data;
-  }, apiMutateOptions);
+  return useMutation({
+    mutationFn: async (data: ICreateUserForm) => {
+      await makeActionRequest(
+        "POST",
+        ADMIN_USERS_CRUD_CONFIG.ENDPOINTS.CREATE,
+        data
+      );
+      return data;
+    },
+    ...apiMutateOptions,
+  });
 }